/* ============================================================
   Block Slide 3D — UI（3Dの上に重ねる DOM）
   兄弟タイトル（Cyber Slide / Cyber Marge）と同じ、暗色＋ガラス調。
   スクショ機能が DOM ごと写すので、見た目はここで完結させる。
   ============================================================ */

@font-face { font-family:'Orbitron'; src:url('../libs/fonts/orbitron_500.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Orbitron'; src:url('../libs/fonts/orbitron_700.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Orbitron'; src:url('../libs/fonts/orbitron_900.ttf') format('truetype'); font-weight:900; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../libs/fonts/quicksand_500.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../libs/fonts/quicksand_700.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
  --ink:#eaf3fb;
  --muted:#93a7bb;
  --accent:#35e0ff;
  --accent2:#39ff88;
  --danger:#ff4a34;
  --panel:rgba(10,16,22,.72);
  --panel-strong:rgba(9,14,20,.92);
  --line:rgba(120,170,205,.22);
  --shadow:0 18px 50px rgba(0,0,0,.55);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  margin:0; padding:0; width:100%; height:100%;
  background:#04070a; color:var(--ink);
  font-family:'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; touch-action:none;
  /* iOSの長押し虫眼鏡・コピーポップアップを出さない */
  -webkit-touch-callout:none;
}

#gl { position:fixed; inset:0; width:100%; height:100%; display:block; }

.num { font-family:'Orbitron', 'Quicksand', sans-serif; font-weight:700; font-variant-numeric:tabular-nums; }

/* ── HUD ───────────────────────────────────────────── */
#hud {
  position:fixed; inset:0; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px calc(env(safe-area-inset-bottom,0px) + 12px);
}
/* ⚠️ display:flex は [hidden] より強い。これが無いとタイトル画面に HUD が透けて出る */
#hud[hidden] { display:none; }
.hud-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }

.chip {
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:.42rem .7rem; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.chip .k { display:block; font-size:.56rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.chip .v { display:block; font-size:1.02rem; line-height:1.15; }

#score-chip .v { font-size:1.5rem; color:var(--accent2); }

.hud-btns { display:flex; gap:6px; pointer-events:auto; }
.icon-btn {
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-size:.9rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }

/* 席ごとのミッション行 — 横長ではベルトの上に重なるので、下地を敷いて読めるようにする */
.seats {
  display:flex; flex-direction:column; gap:4px; max-width:480px; margin:0 auto; width:100%;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.42rem .55rem;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.seat-row {
  --accent:#35e0ff;
  display:grid; grid-template-columns:10px 4.4em minmax(0,1fr) 64px 3.2em 2.4em 2.2em; align-items:center; gap:.45rem;
  font-size:.66rem; color:var(--muted); padding:.18rem .35rem; border-radius:8px; border:1px solid transparent;
  transition:background .2s, border-color .2s;
}
.seat-row.active { background:rgba(255,255,255,.06); border-color:var(--accent); color:var(--ink); }
.seat-row .sdot { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.seat-row.active .sdot { animation:pulse .8s infinite; }
.seat-row .sname { font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:.06em; font-size:.6rem; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat-row .smis { display:flex; align-items:center; gap:.3rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat-row .mdot { display:none; width:9px; height:9px; border-radius:3px; flex:none; box-shadow:0 0 6px rgba(255,255,255,.25); }
.seat-row .mtext { overflow:hidden; text-overflow:ellipsis; }
.seat-row .bar { height:7px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; border:1px solid var(--line); }
.seat-row .fill { display:block; height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg, var(--accent), #ffffff); transition:width .22s ease; }
.seat-row .n { text-align:right; color:var(--ink); font-size:.62rem; }
.seat-row .lv { text-align:right; font-size:.6rem; color:var(--accent2); }
.seat-row .hand { text-align:right; font-size:.6rem; color:var(--muted); }
.seat-row.active .hand { color:var(--ink); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* 手番トースト */
#turn {
  --accent:#35e0ff;
  position:fixed; left:50%; top:22%; transform:translate(-50%,-50%);
  pointer-events:none; opacity:0; text-align:center;
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:1.5rem; letter-spacing:.14em;
  color:var(--accent); text-shadow:0 0 22px var(--accent);
  padding:.35rem 1.2rem; border:1px solid var(--accent); border-radius:99px; background:rgba(6,12,18,.55);
}
#turn.show { animation:turnpop 1.1s ease-out forwards; }
@keyframes turnpop {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.85); }
  18% { opacity:1; transform:translate(-50%,-50%) scale(1.04); }
  75% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-60%) scale(.98); }
}

/* コンボのポップ */
#pop {
  position:fixed; left:50%; top:38%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; opacity:0;
}
#pop .big { font-family:'Orbitron',sans-serif; font-weight:900; font-size:2.4rem; color:var(--accent2); text-shadow:0 0 24px rgba(57,255,136,.65); }
#pop .sub { font-size:.85rem; letter-spacing:.2em; color:var(--accent); }
#pop.show { animation:popup .85s ease-out forwards; }
@keyframes popup {
  0% { opacity:0; transform:translate(-50%,-40%) scale(.7); }
  22% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
  70% { opacity:1; transform:translate(-50%,-52%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-64%) scale(.98); }
}

/* 中央バナー（ステージクリア等） */
#banner {
  position:fixed; left:50%; top:46%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; opacity:0; transition:opacity .25s;
}
#banner.show { opacity:1; }
#banner .t { font-family:'Orbitron',sans-serif; font-weight:900; font-size:2rem; letter-spacing:.12em; color:var(--accent); text-shadow:0 0 30px rgba(53,224,255,.6); }
#banner .s { margin-top:.3rem; font-size:.9rem; color:var(--ink); }

/* 一言ヒント */
/* 席の行（画面下）に重ならないよう、上のチップの下に出す */
#tip {
  position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 64px); transform:translateX(-50%);
  background:rgba(255,74,52,.16); border:1px solid rgba(255,74,52,.5); color:#ffd9d2;
  padding:.4rem .8rem; border-radius:99px; font-size:.78rem; opacity:0; transition:opacity .2s; pointer-events:none;
}
#tip.show { opacity:1; }

/* ── オーバーレイ画面 ─────────────────────────────── */
.overlay {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  padding:16px; background:radial-gradient(ellipse at 50% 30%, rgba(6,14,22,.72), rgba(2,5,8,.94));
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:20;
  overflow-y:auto;
}
.overlay.show { display:flex; }
.panel {
  width:100%; max-width:420px; background:var(--panel-strong); border:1px solid var(--line);
  border-radius:18px; padding:1.4rem 1.2rem; box-shadow:var(--shadow); text-align:center;
  max-height:100%; overflow-y:auto;
}
.logo { font-family:'Orbitron',sans-serif; font-weight:900; font-size:2.1rem; letter-spacing:.06em; margin:0; line-height:1.05;
  background:linear-gradient(180deg,#ffffff,#7fdcff 60%,#2b9fd8); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(53,224,255,.35)); }
.logo-sub { color:var(--muted); font-size:.8rem; margin:.35rem 0 1.1rem; letter-spacing:.05em; }

.mode-card {
  display:block; width:100%; text-align:left; cursor:pointer; margin-bottom:.6rem;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:14px; padding:.75rem .9rem;
  color:var(--ink); font-family:inherit; transition:border-color .15s, background .15s;
}
.mode-card:hover, .mode-card.sel { border-color:var(--accent); background:rgba(53,224,255,.10); }
.mode-card .m { display:block; font-family:'Orbitron',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.08em; }
.mode-card .d { display:block; font-size:.74rem; color:var(--muted); margin-top:.2rem; line-height:1.45; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--ink); font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:.1em;
  font-size:.86rem; padding:.7rem 1.1rem; cursor:pointer; transition:all .15s; width:100%;
}
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn-primary { background:linear-gradient(135deg, rgba(53,224,255,.24), rgba(57,255,136,.2)); border-color:rgba(53,224,255,.55); }
.btn-primary:hover { background:linear-gradient(135deg, rgba(53,224,255,.36), rgba(57,255,136,.3)); color:#fff; }
.btn-row { display:flex; gap:.5rem; margin-top:.6rem; }
.btn-ghost { background:none; font-size:.74rem; padding:.55rem .8rem; letter-spacing:.08em; }

.pick-d { color:var(--muted); font-size:.76rem; line-height:1.5; margin:0 0 .9rem; }
.pick-row { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:.7rem; }
.pick-label { font-size:.6rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.seg button { width:52px; height:40px; border:none; background:rgba(255,255,255,.04); color:var(--muted); font-family:'Orbitron',sans-serif; font-weight:700; font-size:1rem; cursor:pointer; }
.seg button + button { border-left:1px solid var(--line); }
.seg button.sel { background:rgba(53,224,255,.18); color:var(--accent); }
.stage-pick { display:flex; align-items:center; justify-content:center; gap:.6rem; margin:.2rem 0 .9rem; }
.stage-pick button { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink); font-size:1.1rem; cursor:pointer; }
.stage-pick .val { font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.05rem; min-width:5.2em; }
.stage-pick .val small { display:block; font-size:.55rem; letter-spacing:.16em; color:var(--muted); font-family:'Quicksand',sans-serif; }

.settings { display:flex; gap:.4rem; justify-content:center; margin-top:.9rem; flex-wrap:wrap; }
.settings .btn-ghost { width:auto; }

.rules { text-align:left; font-size:.8rem; line-height:1.6; color:var(--ink); }
.rules li { margin-bottom:.5rem; }
.rules ol { padding-left:1.1rem; margin:0; }

.result-score { font-family:'Orbitron',sans-serif; font-weight:900; font-size:2.6rem; color:var(--accent2); line-height:1; margin:.3rem 0; }
.result-line { font-size:.78rem; color:var(--muted); letter-spacing:.1em; }
.newbest { color:#ffd34d; font-family:'Orbitron',sans-serif; font-size:.85rem; letter-spacing:.14em; margin-top:.3rem; }
.reason { font-size:.82rem; color:var(--muted); margin:.5rem 0 1rem; line-height:1.5; }

.lang-row { display:flex; gap:.35rem; justify-content:center; margin-top:.8rem; }
.lang-row button { border:1px solid var(--line); background:none; color:var(--muted); border-radius:9px; padding:.3rem .7rem; font-size:.72rem; cursor:pointer; font-family:inherit; }
.lang-row button.sel { border-color:var(--accent); color:var(--accent); }

/* 細い画面では HUD の数字を少し小さく */
@media (max-width: 420px) {
  #score-chip .v { font-size:1.15rem; }
  .chip { padding:.35rem .55rem; }
  .icon-btn { width:30px; height:30px; }
  .seats { padding:.35rem .4rem; }
  .seat-row { grid-template-columns:8px 3.8em minmax(0,1fr) 48px 3em 2.2em 2em; gap:.32rem; font-size:.6rem; }
}

/* 横長では席の行が自分のロボの真上に重なるので、左上（ステージの下）へ寄せる */
@media (min-aspect-ratio: 5/4) {
  .seats { position:absolute; left:12px; top:calc(env(safe-area-inset-top,0px) + 66px); width:350px; margin:0; }
  .seat-row { font-size:.62rem; }
}

/* 横長のときは HUD を少し詰める */
@media (max-height: 520px) {
  .logo { font-size:1.6rem; }
  .panel { padding:1rem; }
  .mode-card { padding:.55rem .75rem; }
  #score-chip .v { font-size:1.15rem; }
}