/* ぽてむしRPG: 画面は canvas 1枚を整数倍で拡大（ドットをにじませない）。周りは濃いこげ茶の帯。 */
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #2a2230;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2230;
}

#screen {
  display: block;
  background: #2a2230;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#touch {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
#touch[hidden] { display: none; }

.t-part {
  position: fixed;
  pointer-events: auto;
  touch-action: none;
  opacity: 0.82;
}
.t-part canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* 縦持ちの台（ゲーム画面の下の空きを埋める。操作の部品より下） */
.t-deck {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
.t-deck[hidden] { display: none; }
.t-deck canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.t-part { z-index: 1; }

.noscript {
  position: fixed;
  inset: auto 0 40% 0;
  margin: 0;
  color: #ddd;
  text-align: center;
  font: 16px "DotGothic16", monospace;
}

/* 「ポテチ代を送る」ボタン（ゲームをクリアしたあとの題の画面だけ。js/engine/ui/tip.js が置く）。
   ゲームの窓と同じ見た目（クリームの地にこげ茶の縁。art/ui.js の 'pote'）。--u は 画面の1ドットの大きさ（CSS の px） */
#tip {
  --u: 2;
  position: fixed;
  z-index: 3;
  box-sizing: border-box;
  margin: 0;
  padding: calc(var(--u) * 2px) calc(var(--u) * 7px) calc(var(--u) * 3px);
  min-height: max(32px, calc(var(--u) * 16px));
  display: flex;
  align-items: center;
  font-family: "DotGothic16", monospace;
  font-size: calc(var(--u) * 11px);
  line-height: 1.2;
  white-space: nowrap;
  color: #5a4636;
  background: #fff6e8;
  border: calc(var(--u) * 1px) solid #5a4636;
  box-shadow: inset 0 0 0 calc(var(--u) * 1px) #c9a878, 0 calc(var(--u) * 2px) 0 #b89870;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
#tip[hidden] { display: none; }
#tip:hover { background: #fdecd0; color: #e8801e; }
#tip:active { transform: translateY(calc(var(--u) * 1px)); box-shadow: inset 0 0 0 calc(var(--u) * 1px) #c9a878; }

/* 「あなたのキャラでも作れます」ボタン（題の画面だけ・右下。js/engine/ui/tip.js が置く）。#tip と同じ見た目で、細い箱に 2行＋小さな1行 */
#irai {
  --u: 2;
  position: fixed;
  z-index: 3;
  box-sizing: border-box;
  width: max-content;
  white-space: nowrap;
  margin: 0;
  padding: calc(var(--u) * 3px) calc(var(--u) * 5px) calc(var(--u) * 4px);
  min-height: max(32px, calc(var(--u) * 16px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 1px);
  font-family: "DotGothic16", monospace;
  line-height: 1.2;
  color: #5a4636;
  background: #fff6e8;
  border: calc(var(--u) * 1px) solid #5a4636;
  box-shadow: inset 0 0 0 calc(var(--u) * 1px) #c9a878, 0 calc(var(--u) * 2px) 0 #b89870;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
#irai[hidden] { display: none; }
#irai .main { display: block; font-size: max(10px, calc(var(--u) * 9px)); }
#irai .sub { display: block; font-size: max(9px, calc(var(--u) * 7px)); color: #8a7258; }
#irai:hover { background: #fdecd0; color: #e8801e; }
#irai:hover .sub { color: #c98a4a; }
#irai:active { transform: translateY(calc(var(--u) * 1px)); box-shadow: inset 0 0 0 calc(var(--u) * 1px) #c9a878; }