/* ============================================================
   ECHO — style.css
   Dark sonar aesthetic: near-black, cyan glow, letterspaced
   monospace UI. Overlays for title / pause / game over, HUD,
   and the level flash animation.
   ============================================================ */

/* ================= BASE ================= */
:root {
  --cyan:          #45e0f5;
  --cyan-bright:   #b9f4ff;
  --magenta:       #ff2cc0;
  --magenta-bright:#ff8ae6;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* The top HUD is TWO bands, and everything up there hangs off these so a
     notchless phone can't stack them on each other. Band 1: the depth label
     (left) and the pearl counter (right). Band 2: the O₂ / alarm gauge pair
     (centre) and the SKIP target (right). Nothing may sit at a bare `top`. */
  --hud-row1: calc(var(--safe-t) + 12px);
  --hud-row2: calc(var(--safe-t) + 36px);
  /* Band 2's centre pair is anchored 8px off centre, and the SKIP target eats
     ~76px of the right edge. Half the viewport minus both, minus a 12px gutter,
     is the widest either gauge may ever be — so on a 320px phone the hairlines
     shrink rather than sliding under SKIP. */
  --gauge-max: calc(50% - 96px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #01050a;
  color: #bfeff7;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* CRT scanline veil over the WHOLE app (menus included) — ties the canvas
   scanlines and the DOM chrome into one cohesive retro-terminal look. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0.13) 0 1px, transparent 1px 3px);
}
canvas#game {
  position: fixed; inset: 0;
  width: 100%; height: 100%;   /* MUST match the viewport: a canvas keeps its
                                  intrinsic (backing-store) size otherwise, so on
                                  high-DPR screens it overflows and the centered
                                  player renders into the bottom-right corner */
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* ================= OVERLAYS ================= */
.overlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.4rem;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(2,12,20,.55) 0%, rgba(0,2,5,.92) 100%);
  z-index: 20;
  transition: opacity .45s ease;
  padding: 24px;
}
.overlay.hidden { opacity: 0; pointer-events: none; }
/* faint neon perspective grid behind every menu — cheap cyberpunk depth */
.overlay::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(56,217,240,.05) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255,44,192,.04) 1px, transparent 1px) 0 0 / 46px 100%;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
}

#title h1 {
  position: relative;
  font-size: clamp(64px, 17vw, 150px);
  font-weight: 200;
  letter-spacing: .42em;
  margin-right: -.42em; /* re-center letterspaced text */
  color: #d6fbff;
  text-shadow:
    0 0 8px  rgba(80,230,255,.95),
    -2px 0 10px rgba(255,44,192,.55),   /* magenta chromatic bleed left  */
     2px 0 10px rgba(40,220,255,.55),   /* cyan chromatic bleed right    */
    0 0 34px rgba(40,200,255,.5),
    0 0 90px rgba(255,44,192,.28);
  animation: titlePulse 3.4s ease-in-out infinite, titleGlitch 6.5s steps(1) infinite;
}
@keyframes titlePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .84; }
}
/* occasional chromatic-aberration twitch — a brief RGB split, then settle */
@keyframes titleGlitch {
  0%, 92%, 100% { transform: translate(0,0); }
  93%  { transform: translate(-2px, 1px); text-shadow: -4px 0 10px rgba(255,44,192,.8), 4px 0 10px rgba(40,220,255,.8), 0 0 34px rgba(40,200,255,.5); }
  95%  { transform: translate(3px, -1px); }
  97%  { transform: translate(-1px, 0); }
}
.tagline {
  letter-spacing: .28em;
  margin-right: -.28em;
  font-size: clamp(11px, 2.4vw, 15px);
  color: #58b9c9;
  text-shadow: 0 0 12px rgba(60,200,230,.4);
}
.controls {
  font-size: 12px;
  line-height: 2.1;
  letter-spacing: .12em;
  color: #3e7d8c;
}
.controls b { color: #7adcef; font-weight: 400; }
.btn {
  position: relative;
  margin-top: .6rem;
  padding: 15px 52px;
  font: inherit;
  font-size: 15px;
  letter-spacing: .38em;
  text-indent: .38em;
  color: var(--cyan-bright);
  background: rgba(56,217,240,.05);
  border: 1px solid rgba(70,220,245,.65);
  /* angular cyberpunk corners */
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  box-shadow: 0 0 18px rgba(50,210,240,.22), inset 0 0 14px rgba(50,210,240,.08);
  transition: all .22s ease;
}
.btn:hover, .btn:focus-visible {
  color: #fff;
  background: rgba(255,44,192,.12);
  border-color: var(--magenta-bright);
  box-shadow: 0 0 34px rgba(255,44,192,.5), inset 0 0 20px rgba(255,44,192,.14);
  outline: none;
}
.hintline { font-size: 11px; letter-spacing: .2em; color: #2c5a66; }

/* ---- floor checkpoints: the depth stepper (unlocked by your deepest dive) ----
   A dive computer, not a menu: two square arrows either side of a readout that
   names both the floor and the biome you'd drop into. Arrows are 48px squares —
   thumb targets first, mouse targets second. */
.depthsel {
  display: flex; gap: 14px;
  align-items: center; justify-content: center; margin: .1rem 0 .2rem;
}
.depthsel:empty { display: none; }
.steparrow {
  flex: none; width: 48px; height: 48px;
  font: inherit; font-size: 18px; line-height: 1;
  color: var(--cyan-bright);
  background: rgba(56,217,240,.05);
  border: 1px solid rgba(70,220,245,.55);
  /* same angular cut as .btn, at chip scale */
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  cursor: pointer;
  box-shadow: 0 0 14px rgba(50,210,240,.18), inset 0 0 12px rgba(50,210,240,.07);
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.steparrow:hover:not(:disabled), .steparrow:focus-visible:not(:disabled) {
  color: #fff;
  background: rgba(255,44,192,.12);
  border-color: var(--magenta-bright);
  box-shadow: 0 0 26px rgba(255,44,192,.45), inset 0 0 16px rgba(255,44,192,.12);
  outline: none;
}
.steparrow:disabled { opacity: .2; cursor: default; box-shadow: none; }
.stepread {
  min-width: 176px;
  display: flex; flex-direction: column; gap: 4px;
}
.stepdepth {
  font-size: 15px; letter-spacing: .28em; text-indent: .28em;
  color: #cffaff; text-shadow: 0 0 12px rgba(120,240,255,.55);
}
.stepbiome { font-size: 9px; letter-spacing: .2em; text-indent: .2em; color: #3e7d8c; }
@media (max-width:380px) {
  .depthsel { gap: 10px; }
  .stepread { min-width: 138px; }
  .stepbiome { letter-spacing: .12em; text-indent: .12em; }
}

.btnrow { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.btn-ghost { padding: 15px 30px; font-size: 13px; opacity: .72; }
/* HOW TO PLAY — a quiet link under THE SURFACE that replays the first-dive
   coach. Small type, but still a full 44px target on both platforms. */
.btn-link {
  margin-top: .2rem; padding: 0 22px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .3em; text-indent: .3em;
  background: none; border-color: rgba(70,220,245,.28); opacity: .6;
}
.btn.hidden { display: none; }

#gameover h1 {
  font-size: clamp(30px, 7vw, 62px);
  font-weight: 200;
  letter-spacing: .3em;
  margin-right: -.3em;
  color: #ff7a55;
  text-shadow: 0 0 12px rgba(255,90,50,.8), 0 0 46px rgba(255,60,20,.4);
}
.stats { font-size: 14px; letter-spacing: .22em; color: #6fc7d6; line-height: 2.2; }
.stats .num { color: #cffaff; text-shadow: 0 0 10px rgba(120,240,255,.7); }

#pause h1 {
  font-size: clamp(26px, 6vw, 48px);
  font-weight: 200;
  letter-spacing: .4em;
  margin-right: -.4em;
  color: #86f2ff;
  text-shadow: 0 0 14px rgba(80,230,255,.7);
}

/* ================= HUD ================= */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; transition: opacity .4s; }
#hud.hidden { opacity: 0; }
#depthLabel {
  position: absolute; top: var(--hud-row1); left: calc(20px + var(--safe-l));
  font-size: 13px; letter-spacing: .3em;
  color: rgba(150,240,255,.8);
  text-shadow: 0 0 10px rgba(70,220,250,.55);
}
/* the one-line hint is long enough to reach the pearl counter, so it gets its
   own band UNDER the gauges rather than sharing the depth label's. */
#hint {
  position: absolute; top: calc(var(--safe-t) + 60px); right: calc(20px + var(--safe-r));
  font-size: 11px; letter-spacing: .22em;
  color: rgba(90,180,200,.55);
  transition: opacity 1.2s;
}
/* ---- the first-dive coach ----
   One line, the same voice as #hint (mono, letterspaced, neon cyan on nothing)
   — never a card, never a modal, and never in the way. Desktop: top-centre,
   in the band UNDER the O₂ / alarm pair, where #hint lives. Touch: floated ABOVE
   the bottom thumb cluster, so the hand holding the phone can't cover the very
   instruction it's being given. Fades in 180ms; the copy is capped at ~46
   characters so it stays one line down to a 360px screen. */
#tutLine {
  position: absolute;
  top: calc(var(--safe-t) + 60px);
  left: 50%; transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  font-size: 12px; letter-spacing: .22em; text-indent: .22em;
  white-space: nowrap; text-align: center;
  color: rgba(160,244,255,.92);
  text-shadow: 0 0 10px rgba(70,225,250,.6), 0 0 34px rgba(40,200,255,.28);
  opacity: 1;
  transition: opacity .18s ease, color .18s ease;
}
#tutLine.hidden { opacity: 0; }
/* THE LESSON: the one beat that isn't an instruction but a warning, so it
   borrows the death-screen's hot palette instead of the calm cyan. */
#tutLine.hot {
  color: #ff9c78;
  text-shadow: 0 0 12px rgba(255,96,56,.85), 0 0 40px rgba(255,60,20,.4);
}
body.touch #tutLine {
  top: auto; bottom: calc(96px + var(--safe-b));
  font-size: clamp(9px, 2.7vw, 12px);
  letter-spacing: .16em; text-indent: .16em;
}

/* SKIP: 44px minimum target, tucked under the pearl counter, top-right. Shares
   band 2 with the gauge pair — outboard of it, never over it. */
#tutSkip {
  position: absolute;
  top: var(--hud-row2);
  right: calc(var(--safe-r) + 6px);
  min-width: 44px; min-height: 44px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; cursor: pointer;
  font: inherit; font-size: 10px; letter-spacing: .2em; text-indent: .2em;
  color: rgba(120,200,220,.6);
  background: none; border: none;
  transition: opacity .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
#tutSkip:hover, #tutSkip:focus-visible { color: var(--cyan-bright); outline: none; }
#tutSkip.hidden { opacity: 0; pointer-events: none; }

/* the tool button a beat is pointing at, ringed at 2Hz until it's pressed */
@keyframes tutRing {
  0%, 100% { box-shadow: 0 0 0 1px rgba(120,240,255,.85), 0 0 26px rgba(70,225,250,.7); }
  50%      { box-shadow: 0 0 0 4px rgba(120,240,255,.18), 0 0 10px rgba(70,225,250,.2); }
}
body.touch .toolbtn.tutpulse { animation: tutRing .5s ease-in-out infinite; opacity: 1; }

#pingWrap {
  position: absolute; bottom: calc(22px + var(--safe-b)); left: 50%;
  width: 130px; height: 3px;
  transform: translateX(-50%);
  background: rgba(140,240,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
#pingFill {
  height: 100%; width: 100%;
  background: #45e0f5;
  box-shadow: 0 0 8px rgba(70,225,245,.9);
  transform-origin: left center;
}

/* ---- oxygen bar: centred in HUD band 2, clear of both thumb zones and of the
        depth label / pearl counter above it. A hairline that you never look at
        while it's cyan — it only asks for attention when it turns amber (low)
        or red (drowning). It sits just LEFT of centre; the alarm bar mirrors it
        on the right, so the two gauges read as one pair that fills inward from
        the screen edges. `--gauge-max` is the hard guarantee: the pair may never
        grow past the lane the SKIP target occupies on the right (and its mirror
        on the left), at ANY width — the hairline shrinks instead. ---- */
#oxyBar {
  position: absolute; right: calc(50% + 8px);
  top: var(--hud-row2);
  max-width: var(--gauge-max);
  display: flex; align-items: center; gap: 7px;
}
#oxyBar .oglyph {
  font-size: 10px; letter-spacing: .18em;
  color: rgba(125,232,255,.7);
  text-shadow: 0 0 8px rgba(125,232,255,.5);
}
#oxyWrap {
  width: min(24vw, 230px); height: 3px;
  background: rgba(125,232,255,.14);
  border-radius: 2px; overflow: hidden;
}
#oxyFill {
  height: 100%; width: 100%;
  background: #7de8ff;
  box-shadow: 0 0 8px rgba(125,232,255,.85);
  transform-origin: left center;
}
/* low air: amber, pulsing at 2Hz. Drowning: red, twice as fast — and the
   trough itself lights up, because at zero there is no fill left to see. */
#oxyBar.low .oglyph      { color: rgba(255,177,78,.85); text-shadow: 0 0 8px rgba(255,177,78,.5); }
#oxyBar.low #oxyFill     { background: #ffb14e; box-shadow: 0 0 8px rgba(255,177,78,.85); }
#oxyBar.low              { animation: oxyPulse .5s ease-in-out infinite; }
#oxyBar.drowning .oglyph { color: rgba(255,90,88,.95); text-shadow: 0 0 10px rgba(255,90,88,.6); }
#oxyBar.drowning #oxyWrap{ background: rgba(255,90,88,.3); }
#oxyBar.drowning #oxyFill{ background: #ff5a58; box-shadow: 0 0 8px rgba(255,90,88,.9); }
#oxyBar.drowning         { animation: oxyPulse .25s ease-in-out infinite; }
@keyframes oxyPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ---- alarm bar: the O₂ bar's mirror, just RIGHT of centre. It fills red as
        the deep hears you and empties as it forgets, anchored at its outer
        edge so both gauges grow toward the middle. Dim while the floor is
        calm (nothing to read), solid once there's noise on it, flashing at
        3Hz from `flashAt` — the last warning before THE DARK ANSWERS. ---- */
#almBar {
  position: absolute; left: calc(50% + 8px);
  top: var(--hud-row2);
  max-width: var(--gauge-max);
  display: flex; align-items: center; gap: 7px;
  opacity: .5; transition: opacity .35s;
}
#almBar .aglyph {
  font-size: 10px; letter-spacing: .18em;
  color: rgba(255,90,88,.7);
  text-shadow: 0 0 8px rgba(255,90,88,.5);
}
#almWrap {
  width: min(24vw, 230px); height: 3px;
  background: rgba(255,90,88,.12);
  border-radius: 2px; overflow: hidden;
}
#almFill {
  height: 100%; width: 100%;
  background: #ff5a58;
  box-shadow: 0 0 8px rgba(255,90,88,.85);
  transform-origin: right center;
}
#almBar.on { opacity: 1; }
#almBar.hot { animation: almFlash .333s ease-in-out infinite; }
@keyframes almFlash { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- dash / decoy tool buttons (tap targets on touch, status on desktop) ---- */
.toolbtn {
  position: absolute; bottom: calc(24px + var(--safe-b));
  width: 56px; height: 56px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  pointer-events: auto;
  background: rgba(56,217,240,.05);
  border: 1px solid rgba(70,220,245,.5);
  border-radius: 50%;
  color: #bff0ff;
  font: inherit; line-height: 1;
  box-shadow: 0 0 14px rgba(50,210,240,.16), inset 0 0 12px rgba(50,210,240,.06);
  transition: opacity .18s ease, box-shadow .18s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.toolbtn .glyph { font-size: 22px; font-weight: 300; }
.toolbtn #decoyCount { font-size: 11px; letter-spacing: .06em; color: #9fe6ff; }
.toolbtn:active { transform: scale(.9); }
.toolbtn:hover, .toolbtn:focus-visible {
  box-shadow: 0 0 24px rgba(50,210,240,.4), inset 0 0 16px rgba(50,210,240,.12);
  outline: none;
}
/* the decoy carries a magenta accent so the two abilities read apart at a glance */
#decoyBtn {
  left: calc(20px + var(--safe-l));
  border-color: rgba(255,120,225,.5);
  color: var(--magenta-bright);
  box-shadow: 0 0 14px rgba(255,44,192,.18), inset 0 0 12px rgba(255,44,192,.06);
}
#decoyBtn #decoyCount { color: var(--magenta-bright); }
#dashBtn  { right: calc(20px + var(--safe-r)); }
#dashBtn.cooling  { opacity: .3; box-shadow: none; }
#decoyBtn.empty   { opacity: .28; }
/* touch: larger tap targets in the comfortable thumb arc (research: 56–64px) */
body.touch .toolbtn { width: 66px; height: 66px; }
body.touch .toolbtn .glyph { font-size: 26px; }
/* on desktop the buttons are just quiet status chips (keyboard drives play) */
body:not(.touch) .toolbtn { width: 46px; height: 46px; bottom: 18px; opacity: .8; }
body:not(.touch) .toolbtn .glyph { font-size: 18px; }

/* ================= LEVEL FLASH ================= */
#flash {
  position: fixed; top: 42%; left: 0; right: 0;
  text-align: center;
  font-size: clamp(24px, 6vw, 44px);
  font-weight: 200;
  letter-spacing: .5em;
  text-indent: .5em;
  color: #a5f5ff;
  text-shadow: 0 0 16px rgba(80,230,255,.8), 0 0 60px rgba(40,200,255,.4);
  opacity: 0;
  pointer-events: none;
  z-index: 15;
}
#flash.show { animation: flashAnim 2.1s ease forwards; }
@keyframes flashAnim {
  0%   { opacity: 0; transform: scale(.92); }
  18%  { opacity: 1; transform: scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ============================================================
   THE DESCENT — Pearls HUD, Boon shrines, the Surface shop
   ============================================================ */

/* --- Pearls counter: HUD band 1, opposite the depth label, clear of thumbs --- */
#pearlHud{
  position:fixed; top:var(--hud-row1);
  right:calc(var(--safe-r) + 14px);
  display:flex; align-items:center; gap:6px;
  font:600 15px/1 system-ui, sans-serif; letter-spacing:.06em;
  color:#bfe9ff; text-shadow:0 0 10px rgba(96,208,255,.6);
  pointer-events:none; z-index:6;
}
#pearlHud .pglyph{ color:#8fd8ff; font-size:16px; }

/* --- Boon-pick overlay --- */
#boonpick .shrine-h{ color:#c9a7ff; text-shadow:0 0 18px rgba(168,120,255,.7); }
.booncards{ display:flex; flex-direction:column; gap:14px; width:min(440px,86vw); margin-top:22px; }
.booncard{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:16px 18px; border:1px solid rgba(168,120,255,.5);
  background:linear-gradient(180deg, rgba(60,40,110,.35), rgba(20,14,40,.5));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  color:#eae0ff; transition:transform .08s, border-color .12s, background .12s;
}
.booncard:hover, .booncard:active{ border-color:#c9a7ff; transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(90,60,160,.5), rgba(30,20,60,.6)); }
.booncard .bname{ font:700 17px/1 system-ui,sans-serif; letter-spacing:.08em; color:#d7c2ff; }
.booncard .bdesc{ margin-top:7px; font:400 14px/1.35 system-ui,sans-serif; color:#c3b6e0; }
.booncard .brare{ float:right; font:600 11px/1 system-ui,sans-serif; letter-spacing:.1em;
  color:#9a7ad0; opacity:.8; }
@media (max-width:520px){ .booncard{ padding:18px; } .booncard .bname{ font-size:18px; } }

/* --- The Surface shop --- */
.shopcols{ display:flex; gap:22px; width:min(760px,90vw); margin:18px 0; justify-content:center; }
.shopcol{ flex:1 1 0; min-width:0; }
.shopcol h2{ font:700 14px/1 system-ui,sans-serif; letter-spacing:.14em; color:#8fd8ff; margin-bottom:12px; }
.shopitem{
  width:100%; text-align:left; cursor:pointer; margin-bottom:12px; padding:13px 15px;
  border:1px solid rgba(64,224,255,.4); background:rgba(12,30,44,.5); color:#dff2ff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:border-color .12s, transform .08s, opacity .12s;
}
.shopitem:hover, .shopitem:active{ border-color:#64e0ff; transform:translateY(-2px); }
.shopitem[disabled]{ opacity:.4; cursor:default; transform:none; }
.shopitem .sname{ font:700 15px/1 system-ui,sans-serif; letter-spacing:.06em; }
.shopitem .sdesc{ margin-top:6px; font:400 13px/1.3 system-ui,sans-serif; color:#a9d6e8; }
.shopitem .scost{ float:right; color:#bfe9ff; font:600 13px/1 system-ui,sans-serif; }
.shopitem .smax{ float:right; color:#7fb0c4; font:600 12px/1 system-ui,sans-serif; letter-spacing:.1em; }
@media (max-width:640px){ .shopcols{ flex-direction:column; gap:24px; } }

/* Gameover: the banked-pearls line + counter pop when pearls land mid-run */
.pearlnum{ color:#8fd8ff !important; text-shadow:0 0 12px rgba(96,208,255,.7); }
#pearlHud.pop{ animation:pearlPop .32s ease-out; }
@keyframes pearlPop{
  0%{ transform:scale(1); } 40%{ transform:scale(1.45); color:#fff; } 100%{ transform:scale(1); }
}