/* oktodrop — "midnight arcade in the abyss" (site tokens) */
:root{
  --abyss-0:#03040c; --abyss-1:#070a1c; --abyss-2:#0c1334;
  --ink:#e9f1ff; --ink-dim:#8290c0; --ink-faint:#4d5a85;
  --mag:#c061ff; --mag-deep:#7c3aed;           /* Okto-Drop accent */
  --gold:#ffd23f;
  --panel:rgba(11,17,40,.74); --edge:rgba(124,154,255,.18);
  --font-ui:'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--abyss-0);color:var(--ink);font-family:var(--font-ui);
  display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
#stage{position:relative;width:min(100vw, calc(100vh * 580 / 720));
  height:min(100vh, calc(100vw * 720 / 580));aspect-ratio:580/720;
  background:radial-gradient(90% 70% at 50% 30%, var(--abyss-2), var(--abyss-1) 55%, var(--abyss-0));
  border-radius:6px;box-shadow:0 0 0 1px var(--edge), 0 0 44px rgba(124,97,255,.18), 0 30px 60px -30px rgba(0,0,0,.8)}
#game{width:100%;height:100%;display:block}
/* HUD (built by game.js inside #stage) — themed per era via --era-* custom
   props set by applyEraTheme() from the era palette. */
#hud{--era-accent:var(--mag);--era-text:var(--ink);--era-dim:var(--ink-dim);
  position:absolute;top:50%;right:calc(12px + env(safe-area-inset-right));
  /* Task 28 — whole-column scale from stage height (set on #stage by
     applyHudScale in game.js; 1 at canonical size). Origin right-center keeps
     the column anchored to the stage edge so a narrower column can never
     creep left onto the board. */
  transform:translateY(-50%) scale(var(--hud-scale,1));transform-origin:right center;
  width:132px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
/* Task 28 — small-stage overlap guard (<360px stage width with room below the
   board): the column collapses to a wrap row under the playfield, still scaled
   by --hud-scale (origin bottom so it hugs the stage bottom edge). */
#hud.hud-compact{top:auto;left:calc(6px + env(safe-area-inset-left));
  right:calc(6px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));
  width:auto;transform:scale(var(--hud-scale,1));transform-origin:bottom center;
  flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px}
#hud.hud-compact.pad-up{bottom:calc(150px + env(safe-area-inset-bottom))}  /* clear the button pad */
#hud.hud-compact .hud-box{flex:0 1 auto;padding:4px 7px}
#hud.hud-compact canvas{width:44px;height:auto}
.hud-box{background:color-mix(in srgb, var(--era-panel, var(--panel)) 88%, transparent);
  border:1px solid color-mix(in srgb, var(--era-accent) 38%, transparent);
  border-radius:8px;padding:8px;text-align:center}
.hud-label{font-size:11px;letter-spacing:.14em;color:var(--era-dim);margin-bottom:6px}
.hud-box canvas{display:block;margin:0 auto;image-rendering:pixelated}
.hud-text div:last-child{font-size:19px;font-weight:600;color:var(--era-text);font-variant-numeric:tabular-nums}
.hud-stage #hud-stage-name{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--era-accent)}
.hud-stage #hud-depth{font-size:11px;color:var(--era-dim);margin-top:3px;font-variant-numeric:tabular-nums}
.hud-quests{ text-align:left }
.quest{margin:5px 0}
.quest-text{display:block;font-size:11px;line-height:1.35;color:var(--era-dim)}
.quest-bar{display:block;height:4px;margin-top:3px;border-radius:2px;
  background:color-mix(in srgb, var(--era-accent) 15%, transparent);overflow:hidden}
.quest-prog{display:block;height:100%;width:0;background:var(--era-accent);transition:width .25s}
.quest-count{float:right;font-size:11px;font-weight:600;color:var(--era-dim);
  font-variant-numeric:tabular-nums;margin-left:4px}
.quest.done .quest-text{color:var(--era-text)}
.quest.done .quest-count{color:var(--era-accent)}
.quest.done .quest-prog{background:var(--era-flash,#fff)}
.quest.flash .quest-count{animation:quest-flash .9s ease-out}
.quest.flash .quest-bar{animation:quest-flash .9s ease-out}
@keyframes quest-flash{0%{color:#fff;text-shadow:0 0 12px #fff}100%{text-shadow:0 0 0 transparent}}
/* Task 26 — goal tracker (campaign HUD): lines-toward-goal + thin progress bar */
.hud-goal #hud-goal-text{font-size:15px;font-weight:600;color:var(--era-text);font-variant-numeric:tabular-nums}
.goal-track{display:block;height:4px;margin-top:5px;border-radius:2px;
  background:color-mix(in srgb, var(--era-accent) 15%, transparent);overflow:hidden}
#goal-prog{display:block;height:100%;width:0;background:var(--era-accent);transition:width .25s}
#goal-prog.full{background:var(--era-flash,#fff);box-shadow:0 0 8px 1px var(--era-accent)}
.meter{height:8px;border-radius:4px;background:color-mix(in srgb, var(--era-accent) 15%, transparent);overflow:hidden}
#meter-fill{display:block;height:100%;width:0;background:var(--era-accent);transition:width .25s}
.meter.ready #meter-fill{box-shadow:0 0 10px 1px var(--era-accent);background:var(--era-flash,#fff)}
.meter.active #meter-fill{background:#7fb2ff;animation:undertow-drain-pulse 1s ease-in-out infinite}
@keyframes undertow-drain-pulse{0%,100%{box-shadow:0 0 6px 1px rgba(127,178,255,.55)}50%{box-shadow:0 0 14px 3px rgba(127,178,255,.95)}}
@media (hover:none) and (pointer:coarse){
  #stage{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;box-shadow:none}
}
/* Button pad (built in index.html; visibility driven by game.js — coarse
   pointer + settings.inputMode === 'buttons'). Fine pointers never see it. */
#mobile-controls{position:absolute;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  background:linear-gradient(to top, rgba(3,4,12,.88), rgba(3,4,12,0));}
#mobile-controls[hidden]{display:none}
#mobile-controls button{font-family:var(--font-ui);font-size:17px;font-weight:600;
  color:var(--ink);background:var(--panel);border:1px solid var(--edge);border-radius:10px;
  padding:14px 0;touch-action:none;user-select:none;-webkit-user-select:none}
#mobile-controls button:active{background:rgba(124,97,255,.28)}
#mobile-controls button[data-act="undertow"]{color:var(--gold);letter-spacing:.06em}
#mobile-controls button:disabled{opacity:.35}
/* Task 27 — floating UNDERTOW button (touch, both input modes) + input chip.
   Fab sits bottom-right in the free strip right of the board (board spans the
   left ~60% of canvas width; vw cap keeps it clear on narrow phones), above
   the button pad when that pad is up (.pad-up). Era-styled via the --era-*
   props applyEraTheme() sets on #stage. Fine pointers never see either. */
#undertow-fab{position:absolute;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(120px,36vw);z-index:4;font-family:var(--font-ui);
  font-size:max(12px,calc(14px * var(--hud-scale,1)));font-weight:700;
  letter-spacing:.08em;color:var(--era-text,var(--ink));cursor:pointer;
  background:color-mix(in srgb, var(--era-panel,var(--panel)) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--era-accent) 55%, transparent);
  border-radius:10px;padding:14px 0;touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 0 14px 1px color-mix(in srgb, var(--era-accent) 45%, transparent)}
#undertow-fab:active{background:color-mix(in srgb, var(--era-accent) 30%, transparent)}
#undertow-fab.pad-up{bottom:calc(158px + env(safe-area-inset-bottom))}  /* clear the 2-row button pad */
#undertow-fab[hidden]{display:none}
#input-chip{position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));
  z-index:4;font-family:var(--font-ui);
  font-size:max(10px,calc(11px * var(--hud-scale,1)));font-weight:600;letter-spacing:.1em;
  color:var(--era-dim,var(--ink-dim));background:color-mix(in srgb, var(--era-panel,var(--panel)) 85%, transparent);
  border:1px solid var(--edge);border-radius:999px;padding:6px 12px;touch-action:none;
  user-select:none;-webkit-user-select:none}
#input-chip:active{color:var(--era-text,var(--ink))}
#input-chip[hidden]{display:none}

/* Rotate prompt — same query string as the JS listener (repo convention). */
#rotate-prompt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(3,4,12,.92);color:var(--ink);font-size:20px;font-weight:700;letter-spacing:.14em;z-index:5}
#rotate-prompt[hidden]{display:none}

/* ===== Task 13 + Task 30: campaign flow ===== */
/* Intermission overlay — TWO panels (Task 30): the pre-level descend card
   (data-role=pre: phase-descend veil → phase-reveal diorama → phase-card →
   phase-ready, cumulative) and the post-clear beat (data-role=post:
   phase-cleared → phase-stats). Timings live in game.js DESCEND_PHASES /
   POST_PHASES. #diorama-slot is the Task 20 slot, pre-level since Task 30. */
#intermission{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  background:rgba(3,4,12,.82);pointer-events:none}   /* tap-skip targets the canvas — the veil must not swallow it */
#intermission.hidden{display:none}
#intermission .im-panel{text-align:center;font-family:var(--font-ui);width:min(480px,100%);
  padding:0 12px}
/* only the active role's panel is visible */
#intermission .im-panel[data-role=pre],#intermission .im-panel[data-role=post]{display:none}
#intermission.phase-reveal .im-panel[data-role=pre],#intermission.phase-card .im-panel[data-role=pre],
#intermission.phase-ready .im-panel[data-role=pre]{display:block}
#intermission.phase-cleared .im-panel[data-role=post],#intermission.phase-stats .im-panel[data-role=post]{display:block}
/* Task 28 — the pre-level card scales with the HUD column */
#intermission .im-panel[data-role=pre]{transform:scale(var(--hud-scale,1));transform-origin:center}
/* cumulative child reveal within each panel */
#intermission .im-cleared,#intermission .im-stars,#intermission .im-stats,
#diorama-slot,#intermission .im-hintline,#intermission .im-kicker,#intermission .im-name,
#intermission .im-sub,#intermission .im-mech,#intermission .im-goal,#intermission .im-quests,
#intermission .im-credit,#intermission .im-ready,#intermission .im-hint{opacity:0;
  transition:opacity .4s ease}
#intermission.phase-cleared .im-cleared{opacity:1}
#intermission.phase-stats .im-stars,#intermission.phase-stats .im-stats{opacity:1}
#intermission.phase-reveal #diorama-slot,#intermission.phase-reveal .im-hintline{opacity:1}
#intermission.phase-card .im-kicker,#intermission.phase-card .im-name,
#intermission.phase-card .im-sub,#intermission.phase-card .im-mech,
#intermission.phase-card .im-goal,#intermission.phase-card .im-quests,
#intermission.phase-card .im-credit{opacity:1}
#intermission.phase-ready .im-ready,#intermission.phase-ready .im-hint{opacity:1}
/* post-clear beat */
#intermission .im-cleared{font-size:26px;font-weight:700;letter-spacing:.12em;color:#e9f1ff}
#intermission .im-stars{font-size:30px;color:#ffd873;margin-top:8px;letter-spacing:.2em}
#intermission .im-stats{font-size:13px;color:#8290c0;margin-top:10px;line-height:1.9}
#intermission .im-stats b{color:#e9f1ff}
/* pre-level descend card */
#diorama-slot{width:min(480px,100%);margin:0 auto;border:1px solid rgba(143,208,255,.35);
  border-radius:10px;background:rgba(10,18,34,.6);overflow:hidden}
#diorama-slot canvas{display:block;width:100%;height:auto}
#diorama-slot span{font-size:11px;color:#5f6f92;letter-spacing:.06em}
#intermission .im-hintline{font-size:11px;font-style:italic;color:#5f6f92;margin-top:6px}
#intermission .im-kicker{font-size:11px;letter-spacing:.3em;color:#8290c0;margin-top:12px}
#intermission .im-name{font-size:26px;font-weight:700;color:var(--era-accent,#8fd0ff);margin-top:2px}
#intermission .im-sub{font-size:12px;color:#8290c0;margin-top:2px}
#intermission .im-mech{font-size:12px;font-style:italic;color:#aebadb;margin-top:6px}
#intermission .im-goal{margin:10px auto 0;padding:8px 12px;max-width:340px;border:1px solid var(--era-accent,#8fd0ff);
  border-radius:8px;background:rgba(0,0,0,.35);text-align:left}
#intermission .im-goal .g-label{display:block;font-size:10px;letter-spacing:.3em;color:var(--era-accent,#8fd0ff)}
#intermission .im-goal .g-main{display:block;font-size:26px;font-weight:700;color:var(--era-text,#e9f1ff);line-height:1.15}
#intermission .im-goal .g-prog{display:block;font-size:10px;color:#8290c0}
#intermission .im-goal .g-persist{display:block;font-size:10px;color:#6fae6f;margin-top:2px}
#intermission .im-quests{margin:8px auto 0;max-width:360px;text-align:left}
#intermission .im-quests .quest{margin:3px 0}
#intermission .im-quests .quest-text{font-size:11px;color:#aebadb}
#intermission .im-quests .quest-count{float:right;font-size:11px;font-weight:600;color:#8290c0}
#intermission .im-credit{font-size:10px;color:#5f6f92;margin-top:8px}
#intermission .im-ready{font-size:20px;font-weight:700;letter-spacing:.3em;color:#c061ff;margin-top:14px}
#intermission .im-ready #im-count{color:var(--era-accent,#8fd0ff);font-size:26px;vertical-align:middle}
#intermission .im-hint{font-size:11px;color:#61708f;margin-top:10px}
/* D1/P3 descend veil — the depth counter floats over the canvas dive */
#intermission #descend-veil{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;opacity:0;pointer-events:none;
  transition:opacity .3s ease}
#intermission.phase-descend #descend-veil{opacity:1}
#intermission.phase-descend{background:transparent}   /* the canvas dive IS the backdrop */
#intermission #descend-veil .dv-label{font-family:var(--font-ui);font-size:11px;
  letter-spacing:.4em;color:#61708f}
#intermission #descend-veil #depth-counter{font-family:var(--font-ui);font-size:34px;font-weight:700;
  letter-spacing:.06em;color:var(--era-text,#e9f1ff);font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px var(--era-accent,#8fd0ff)}
/* Tutorial hint toast — era 0 first attempt, once each (oktodrop_seen_tutorial) */
#hint-toast{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);z-index:7;
  font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.05em;color:#e9f1ff;
  background:rgba(10,18,34,.85);border:1px solid rgba(143,208,255,.4);border-radius:8px;
  padding:8px 16px;pointer-events:none;opacity:0;transition:opacity .3s ease}
#hint-toast.show{opacity:1}
#hint-toast[hidden]{display:none}

/* Task 24 — reduced-motion kill-switch: quest flashes, Undertow drain pulse,
   toast fades all snap to their end state. Canvas motion (plankton drift) is
   gated separately in game.js via the same media query. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  #hint-toast.show { opacity: 1; }
}