:root{
  --bg:#0f1116;
  --txt:#fff;
  --table:#4b0e15;
  --tableEdge:#2a0508;
  --accent:#ffd166;
  --header-h: 56px; /* JSで上書き */
}

*{ box-sizing:border-box; }
html,body{
  margin:0; height:100%;
  background:var(--bg); color:var(--txt);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  /* ★ UFOと同じく、横だけ隠す（縦は隠さない） */
  overflow-x: hidden;
}

/* === レイアウト ===
   UFOはフロー文書＋可変。ESPもヘッダーを邪魔しない配置に変更 */
#fit{
  position: relative;
  z-index: 0; /* ★ ヘッダー（pc-header）が常に上に来るように */
  min-height: calc(100dvh - var(--header-h));
  padding: max(env(safe-area-inset-top),0px)
           max(env(safe-area-inset-right),0px)
           max(env(safe-area-inset-bottom),0px)
           max(env(safe-area-inset-left),0px);
  display: grid;
  place-items: center; /* 中央にステージ */
  overflow: visible;   /* ★ ヘッダーメニューの重なりを阻害しない */
}

/* ステージ（中央固定＆scale） */
#stage{
  position: relative;
  width: 800px;   /* JSで 800×600 / 600×600 に切替 */
  height: 600px;
  transform-origin: center center;
  /* ★ 画面にフィットするよう拡縮。translateはJS側で付与 */
}
#stage canvas{ display:block; image-rendering: pixelated; }
#gameCanvas, #bloodFX{
  position:absolute; inset:0;
  width: 100%; height: 100%;
}
.fx{ pointer-events:none; z-index: 3; }

/* HUD（ステージ左上固定） */
.hud{
  position:absolute; left:12px; top:12px; z-index: 5;
  display:flex; align-items:center; gap:10px; width:fit-content;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 8px; border-radius: 12px; backdrop-filter: blur(8px);
  font-weight: 800; font-size: 12px;
}
.badge{ display:flex; align-items:center; gap:8px; letter-spacing:.5px; opacity:.95 }
.badge .sep{ opacity:.5 }
.score{ display:flex; gap:8px; }
.score .mark{
  min-width:22px; min-height:22px; display:inline-grid; place-items:center;
  padding: 0 6px; border-radius: 8px; font-weight: 900; font-size:14px;
  background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.15);
}
.score .win { color:#7CFF9A; }
.score .lose{ color:#FF6B6B; }
.score .empty{ color:#cfcfcf; }

.hidden{ display:none !important; }

/* テキストボックス */
.textbox.retro{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:5;
  background: #1b1b1b; color:#ffffff;
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 2px #1b1b1b, 0 6px 18px rgba(0,0,0,.5);
  border-radius: 8px; padding: 12px 14px;
  font-family: ui-monospace, "Cascadia Mono", "Fira Code", Menlo, Consolas, monospace;
  font-weight: 700; font-size: 14px;
  display:grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
}
.textbox .actions{ grid-column: 1 / -1; margin-top:10px; text-align:right; }

/* 確認ボタン（白文字） */
.btnConfirm{
  background: transparent; color: #ffffff; border: none;
  font-weight: 900; font-size: 14px; letter-spacing: .5px;
  cursor: pointer; padding: 6px 8px;
}
.btnConfirm:hover{ text-decoration: underline; }

/* ▽（点滅） */
.nextArrow{
  background: transparent; border: none; color: #ffffff;
  font-weight: 900; font-size: 18px; cursor: pointer; padding: 0 4px;
  animation: blink 1s steps(1,end) infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* 推測ボタン群 */
.controls{
  position: absolute; left:0; right:0; bottom: 12px; z-index: 4;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.btn{
  cursor:pointer; border:none; border-radius:999px; padding:10px 16px; font-weight:900;
  background: linear-gradient(180deg, var(--accent), #ffbf66);
  color:#111; min-height:40px; font-size:14px;
}
.btn:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.btn:active{ filter:brightness(.98); transform: translateY(1px); }
.btn.ghost{ background: transparent; border:2px solid #aaa; color:#ddd; }
.btn.guess{ min-width:120px; }

/* 結果オーバーレイ */
.overlay{ position:absolute; inset:0; display:grid; place-items:center; z-index: 4; }
.panel{
  background: rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.18);
  padding: 18px 22px; border-radius: 12px; text-align:center; backdrop-filter: blur(8px);
}
.panel.horror{
  background: radial-gradient(120% 120% at 50% 10%, rgba(255,0,0,.10), rgba(0,0,0,.90));
  animation: vignettePulse 2.2s infinite;
  border:1px solid rgba(255,0,0,.35);
  box-shadow: 0 0 24px rgba(255,0,0,.28), inset 0 0 22px rgba(0,0,0,.65);
}
.ttl{ font-size:22px; font-weight:900; margin-bottom:8px; }
.msg{ opacity:.95; margin-bottom: 14px; }
.row{ display:flex; gap:12px; justify-content:center; }

@keyframes vignettePulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(.9); }
}

/* ───── スマホ縦画面向け ───── */
@media (max-width: 768px) and (orientation: portrait){
  .hud{ font-size: 17px; }
  .score .mark{ font-size: 16px; min-width:24px; min-height:24px; }
  .textbox.retro{ font-size: 18px; padding: 14px 16px; }
  .btn{ font-size: 18px; padding: 12px 18px; }
  .btn.guess{ min-width: 140px; }
}