/* PING — abyssal dark-field instrument panel. Cyan is sound, amber is light. */
:root{
  --abyss:#050D1A; --deep:#0A1B2E; --line:#12314A;
  --glow:#35F2E0; --glow-hi:#7BF7E7; --teal-dim:#0F7E74;
  --foam:#C9E8E4; --dim:#567A85;
  --amber:#FFB13D; --amber-hi:#FFD98A;
  --paper:#F4EDDC; --pen:#2A3038; --danger:#FF5470;
  --display:'Unbounded', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, Menlo, monospace;
  --hand:'Caveat', cursive;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:var(--abyss); color:var(--foam); font-family:var(--mono);
  overscroll-behavior:none; -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none; overflow:hidden;
}
.mono{ font-family:var(--mono); }
a{ color:var(--dim); }
button{ font-family:inherit; cursor:pointer; color:inherit; }
[hidden]{ display:none !important; }

#field{ position:fixed; inset:0; display:block; touch-action:none; background:var(--abyss); }

/* ============ HUD ============ */
#hud{
  animation:hudin .5s ease;
  position:fixed; top:0; left:0; right:0; z-index:20;
  height:calc(56px + env(safe-area-inset-top, 0px));
  display:flex; align-items:center; gap:8px;
  padding:0 10px 0 12px;
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(12px, env(safe-area-inset-left));
  padding-right:max(10px, env(safe-area-inset-right));
  pointer-events:none;
}
#hud > *{ pointer-events:auto; }
/* invisible probe: JS reads the top safe-area inset from its height */
#satProbe{ position:fixed; top:0; left:0; width:0;
  height:env(safe-area-inset-top, 0px);
  visibility:hidden; pointer-events:none; }
.chip{
  background:var(--deep); border:1.25px solid var(--line); border-radius:12px;
  font-family:var(--mono); font-size:.72rem; color:var(--foam);
  padding:6px 10px; display:inline-flex; align-items:center; gap:6px;
  position:relative;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
/* invisible hit-area expansion: 32px-tall chips reach a ~44px touch target */
.chip::after{ content:''; position:absolute; inset:-8px -2px; }
.chip:active{ transform:scale(.92); }
.icon-chip{ padding:6px 8px; color:var(--dim); }
.icon-chip .snd-off{ display:none; }
.icon-chip.muted .snd-on{ display:none; }
.icon-chip.muted .snd-off{ display:inline; }

.lamps{ display:flex; gap:6px; align-items:center; }
.lamp{ width:20px; height:20px; display:block; }
.lamp svg{ width:100%; height:100%; display:block; }
.lamp svg{ transition:transform .09s ease-in; }
.lamp .ring{ stroke:var(--glow); transition:stroke .9s ease, opacity .9s ease; }
.lamp .dot{ fill:var(--glow-hi); transition:opacity .3s; }
.lamp.spent svg{ transform:rotate(42deg); }   /* the bulb unscrews */
.lamp.spent .ring{ stroke:var(--line); opacity:.8; }
.lamp.spent .dot{ opacity:0; }
.lamp.flick .ring{ stroke:#fff; transition:none; }
.lamp.last .ring{ stroke:var(--danger); animation:lampbreathe 1.1s ease-in-out infinite; }
.lamp.last .dot{ fill:var(--danger); }
@keyframes lampbreathe{ 0%,100%{ opacity:.55; } 40%{ opacity:1; } }

.hud-day{ flex:1; text-align:center; font-size:.72rem; font-weight:700;
  letter-spacing:.18em; color:var(--dim); white-space:nowrap; overflow:hidden; }

.receiver{ min-width:84px; justify-content:flex-start; color:var(--dim); position:relative; }
.receiver i{
  width:8px; height:8px; border-radius:50%; border:1.5px solid var(--glow);
  opacity:.25; flex:none; transition:opacity .3s;
}
.receiver.blip{ color:var(--glow-hi); }
.receiver.blip i{ opacity:1; animation:rxblip .5s ease-out; }
@keyframes rxblip{ 0%{ box-shadow:0 0 0 0 rgba(53,242,224,.7);} 100%{ box-shadow:0 0 0 12px rgba(53,242,224,0);} }

.camera-chip{ color:var(--amber); border-color:rgba(255,177,61,.4); font-weight:700;
  letter-spacing:.08em; }
.camera-chip.on{ background:var(--amber); color:var(--pen); border-color:var(--amber); }
.camera-chip.nudge{ animation:chippulse .8s ease-in-out infinite; }
@keyframes chippulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,177,61,0);} 50%{ box-shadow:0 0 0 8px rgba(255,177,61,.18);} }

/* ============ whisper / shutter / flash ============ */
#whisper{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  z-index:22; font-size:.8rem; color:var(--dim); font-style:italic;
  text-align:center; max-width:86vw; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}
#whisper.show{ opacity:1; }

#shutter{
  position:fixed; left:50%; bottom:max(26px, env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:22;
  font-family:var(--display); font-weight:500; font-size:1rem; letter-spacing:.1em;
  color:var(--pen); background:var(--amber); border:none; border-radius:16px;
  padding:16px 38px; box-shadow:0 0 24px rgba(255,177,61,.35), 0 4px 0 rgba(0,0,0,.4);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
#shutter:active{ transform:translateX(-50%) scale(.92); }
#shutter{ animation:shutterin .25s cubic-bezier(.2,1.4,.4,1); }
@keyframes shutterin{ from{ opacity:0; transform:translateX(-50%) translateY(22px); } }
@keyframes hudin{ from{ opacity:0; transform:translateY(-10px); } }

#flashFx{ position:fixed; inset:0; z-index:60; pointer-events:none; }
#flashFx.black{ background:#000; }
#flashFx.white{ background:#fff; }

/* ============ screens ============ */
.screen{ position:fixed; inset:0; z-index:30; overflow-y:auto;
  display:flex; flex-direction:column; align-items:center;
  transition:opacity .3s ease; }
.screen.fading{ opacity:0; pointer-events:none; }

/* ============ INTRO ============ */
.intro{ justify-content:center; text-align:center; padding:24px 18px 60px; gap:0;
  background:transparent; }
.kicker{ font-weight:700; font-size:.78rem; letter-spacing:.26em; color:var(--dim); }
.wordmark-wrap{ position:relative; margin:6px 0 2px; }
.wm-rings{ position:absolute; width:240px; height:240px; left:50%; top:50%;
  transform:translate(-79%,-50%); pointer-events:none; z-index:-1; opacity:.8; }
.wordmark{
  font-family:var(--display); font-weight:800; line-height:1.15;
  font-size:clamp(3.4rem, 17vw, 6rem); letter-spacing:.01em;
  color:var(--glow-hi); position:relative; display:inline-block;
  text-shadow:0 0 18px rgba(53,242,224,.5), 0 0 60px rgba(53,242,224,.25);
}
.wm-dot{ position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--amber); right:.24em; bottom:.48em;
  box-shadow:0 0 8px rgba(255,177,61,.8);
  animation:dotblink 4s ease-in-out infinite; }
@keyframes dotblink{ 0%,58%,100%{ opacity:1; } 62%,70%{ opacity:.15; } 74%{ opacity:1; } }
.tagline{ font-style:italic; font-size:.92rem; color:var(--foam); margin:6px 0 26px; }
.steps{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.step{ display:flex; flex-direction:column; align-items:center; gap:8px; width:104px; }
.step svg{ width:44px; height:44px; }
.step span{ font-size:.64rem; color:var(--dim); line-height:1.45; }
.film-chip{ font-size:.72rem; color:var(--foam); background:var(--deep);
  border:1.25px solid var(--line); border-radius:12px; padding:7px 14px; margin-bottom:26px;
  letter-spacing:.06em; }
.dive-btn{
  width:150px; height:150px; border-radius:50%;
  background:var(--deep); border:none; position:relative;
  font-family:var(--display); font-weight:800; font-size:1.7rem;
  color:var(--glow-hi); letter-spacing:.04em;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.dive-btn::before{ content:''; position:absolute; inset:-2px; border-radius:49% 51% 52% 48% / 51% 48% 52% 49%;
  border:3.5px solid var(--glow); box-shadow:0 0 22px rgba(53,242,224,.35), inset 0 0 22px rgba(53,242,224,.12);
  animation:divebreathe 4.2s ease-in-out infinite; }
@keyframes divebreathe{
  0%,100%{ box-shadow:0 0 18px rgba(53,242,224,.28), inset 0 0 18px rgba(53,242,224,.09); }
  50%{ box-shadow:0 0 36px rgba(53,242,224,.5), inset 0 0 26px rgba(53,242,224,.16); }
}
.dive-btn:active{ transform:scale(.92); }
.dive-btn.small-label{ font-size:.86rem; line-height:1.4; padding:0 14px; }
.ghost-btn{
  margin-top:16px; background:transparent; border:1.25px solid var(--line);
  border-radius:12px; color:var(--dim); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; padding:11px 22px; position:relative;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), color .2s, border-color .2s;
}
.ghost-btn::after{ content:''; position:absolute; inset:-4px; }
.ghost-btn:active{ transform:scale(.92); }
.ghost-btn:hover{ color:var(--glow); border-color:var(--teal-dim); }
.intro-mute{ position:absolute; top:14px; right:14px;
  top:max(14px, env(safe-area-inset-top)); }
.foot{ position:absolute; bottom:14px; bottom:max(14px, env(safe-area-inset-bottom)); left:0; right:0; text-align:center;
  font-size:.7rem; color:var(--dim); }
.foot a{ color:var(--dim); }

.intro.submerging{ animation:submerge .7s ease-in forwards; }
@keyframes submerge{
  0%{ opacity:1; transform:translateY(0); filter:none; }
  100%{ opacity:0; transform:translateY(-26px); filter:blur(3px); }
}

/* ============ RESULT ============ */
.result{ justify-content:flex-start; padding:20px 16px 30px; z-index:40;
  padding-bottom:max(30px, calc(env(safe-area-inset-bottom) + 16px));
  background:var(--abyss); animation:screenrise .4s ease; }
@keyframes screenrise{ from{ opacity:0; } }
.result-inner{ display:flex; flex-direction:column; align-items:center; width:100%;
  max-width:520px; margin:auto; }
.develop-note{ font-size:.78rem; letter-spacing:.3em; color:var(--dim); margin-bottom:12px;
  animation:devpulse 1.2s ease-in-out infinite; }
@keyframes devpulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
#card{ width:min(440px, 92vw); width:min(440px, 92vw, calc(100svh - 210px)); height:auto; display:block;
  border-radius:10px; background:var(--abyss);
  animation:cardup .65s cubic-bezier(.2,1.2,.4,1); }
@keyframes cardup{ from{ opacity:0; transform:translateY(34px); } }
.result-actions{ margin-top:16px; display:flex; flex-direction:column; align-items:center;
  animation:actionsup .45s cubic-bezier(.2,1.2,.4,1); }
@keyframes actionsup{ from{ opacity:0; transform:translateY(14px); } }
.big-btn{
  font-family:var(--display); font-weight:500; font-size:.95rem; letter-spacing:.06em;
  color:var(--pen); background:var(--amber); border:none; border-radius:14px;
  padding:16px 30px; box-shadow:0 0 24px rgba(255,177,61,.25), 0 4px 0 rgba(0,0,0,.4);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.big-btn:active{ transform:scale(.92); }
.fine{ font-size:.74rem; color:var(--dim); margin-top:14px; text-align:center; }
.fine a{ color:var(--dim); }

@media (max-width:560px){
  .hud-day{ display:none; }
  .camera-chip span{ display:none; }
  .receiver{ min-width:64px; font-size:.66rem; }
}
@media (max-width:380px){
  .steps{ gap:8px; }
  .lamps{ gap:4px; }
}

@media (prefers-reduced-motion: reduce){
  .wm-dot{ animation:none; }
  .lamp.last .ring{ animation:none; opacity:1; }
  .lamp svg,.lamp.spent svg{ transition:none; transform:none; }
  .camera-chip.nudge{ animation:none; box-shadow:0 0 0 4px rgba(255,177,61,.2); }
  .develop-note{ animation:none; }
  .intro.submerging{ animation:none; opacity:0; }
  .dive-btn::before{ animation:none; }
  #hud,#shutter,.result,#card,.result-actions{ animation:none; }
  .screen{ transition:none; }
  .chip:active,.dive-btn:active,.big-btn:active,.ghost-btn:active,#shutter:active{ transform:none; }
}