:root{
  --bg:#0f1116; --txt:#fff;
  --glass-bg:rgba(255,255,255,.08); --glass-border:rgba(255,255,255,.16);
  --primary-1:#ffe08a; --primary-2:#ffbf66; --primary-text:#1a1a1a;
}

/* ベース */
*{ 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",Arial,sans-serif
}
h1{ margin:16px 0 6px; font-size:22px; font-weight:700; text-align:center }

/* ラッパー */
#wrap{ max-width:900px; margin:0 auto; }

/* HUD：枠外左上（〇/×表示） */
#hud{
  position:relative;
  display:flex; align-items:center; gap:10px;
  width:fit-content;
  margin:8px 0 10px 0;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  padding:8px 10px; border-radius:12px; backdrop-filter: blur(10px);
  font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 0 18px rgba(255,255,255,.04)
}
#hud .badge{ font-size:12px; letter-spacing:.5px; opacity:.95 }
#hud .score{ display:flex; gap:8px }
.mark{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; min-height:22px; padding:0 6px; border-radius:8px;
  font-weight:900; font-size:14px; line-height:1;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 0 10px rgba(255,255,255,.05);
}
.mark.win{  color:#7CFF9A; }
.mark.lose{ color:#FF6B6B; }
.mark.empty{ color:#cfcfcf; }

/* ステージ（高さはJSで指定 / 3:2維持） */
#stage{ position:relative; width:100%; }
canvas{
  display:block; width:100%; height:100%;
  background:#0f1116; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.35)
}

/* 画面内オーバーレイ（Start / Round / Result） */
.screen{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.card{
  background:rgba(0,0,0,.35); padding:20px 24px; border-radius:14px; text-align:center; backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 20px rgba(255,255,255,.03)
}
.ttl{ font-size:18px; font-weight:700; margin-bottom:8px }
.desc{ opacity:.9; font-size:14px; margin-bottom:14px }
.round-card .ttl{ font-size:22px; }
.result-ttl{ font-size:22px; font-weight:800; margin-bottom:8px }
.result-desc{ opacity:.95; margin-bottom:16px }
.btnrow{ display:flex; gap:12px; justify-content:center }

/* ボタン共通 */
button{
  cursor:pointer; border:none; border-radius:999px; padding:12px 18px; font-weight:800; letter-spacing:.2px;
  transition: transform .1s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  min-height:44px;
}
button:disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.2) }
.btn-primary{
  color:var(--primary-text);
  background:linear-gradient(180deg,var(--primary-1),var(--primary-2));
  box-shadow:0 6px 14px rgba(255,166,0,.25), inset 0 -2px 0 rgba(0,0,0,.15)
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-primary:active{ transform:translateY(1px); filter:brightness(.98) }
.btn-secondary{
  background:linear-gradient(180deg,#6c757d,#586069); color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.25)
}
.btn-secondary:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-secondary:active{ transform:translateY(1px); filter:brightness(.96) }

/* ▼ 常時表示・全幅の選択バー（“左／中央／右”） */
#controls{
  position:sticky; bottom:0; left:0; right:0;
  width:100%;
  display:flex; justify-content:space-between; gap:10px;
  /* 旧端末向けのフォールバック */
  padding:12px;
  /* セーフエリア対応で上書き */
  padding-right: max(12px, env(safe-area-inset-right));
  padding-left:  max(12px, env(safe-area-inset-left));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background:var(--glass-bg); border-top:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  box-shadow:0 -10px 24px rgba(0,0,0,.25), inset 0 8px 24px rgba(255,255,255,.04);
  z-index:20;
}
#controls .btn-primary{
  flex:1 1 0; min-width:0; /* 3つで均等幅 */
  padding:14px 16px; font-size:clamp(15px, 4.2vw, 18px);
}

/* ラウンド告知バナー（中央見た目） */
.banner{
  font-weight:900; font-size:28px; letter-spacing:.08em; padding:10px 18px; border-radius:999px; color:#111;
  background:linear-gradient(180deg,#fff4c1,#ffd166);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.18)
}

/* ホラー結果演出 */
#resultScreen.horror{
  background: radial-gradient(120% 120% at 50% 10%, rgba(255,0,0,.10), rgba(0,0,0,.92));
  animation: vignettePulse 2.2s infinite
}
#resultScreen.horror .card{
  background:linear-gradient(180deg, rgba(120,0,0,.6), rgba(0,0,0,.78));
  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)
}
#resultTitle.horror{
  color:#ff4d4d; text-shadow:0 0 6px rgba(255,0,0,.7),0 0 14px rgba(255,0,0,.4);
  animation: glitch 1.2s infinite
}

/* フッター */
#footer{
  display:flex; justify-content:center; align-items:center; gap:10px;
  margin:16px 0 24px; padding:10px 12px;
  color:#ddd;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
}
.ft-link{ color:#ffd166; text-decoration:none; font-weight:800; }
.ft-link:hover{ text-decoration:underline; }
.ft-sep{ opacity:.5 }

/* スマホ最適化 */
@media (max-width: 640px){
  #hud{ padding:10px 12px; }
  #hud .badge{ font-size: clamp(14px, 4.2vw, 16px); }
  .mark{ min-width:24px; min-height:24px; font-size: clamp(14px, 4.2vw, 18px); }

  .card{ padding:22px 24px }
  .ttl{ font-size: clamp(18px, 5.2vw, 22px) }
  .round-card .ttl{ font-size: clamp(22px, 6vw, 26px); }
  .desc, .result-desc{ font-size: clamp(14px, 4.2vw, 18px) }
  .result-ttl{ font-size: clamp(22px, 6vw, 26px) }
}

/* 表示制御（一般用） */
.hidden{ display:none !important; }
.screen.hidden{ display:none !important; }

/* ★HUD専用：高さは確保して不可視（ズレ防止） */
.hud-ghost{
  visibility: hidden;
  pointer-events: none;
}