:root{
  --lime:#C8F800;
  --ink:#1A1A0C;
  --alert:#FF3B1F;
  --flash:#FFFFFF;
  --font-display:'Archivo Black','Arial Black','Helvetica Neue',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  background:var(--lime);
  color:var(--ink);
  overflow:hidden;
  font-family:var(--font-mono);
  -webkit-font-smoothing:antialiased;
}

/* ---------- boot ---------- */
#boot{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:var(--lime); color:var(--ink);
  font-family:var(--font-mono); font-size:14px; letter-spacing:.28em;
}
body.ready #boot{display:none}

/* ---------- stage ---------- */
#stage{
  position:fixed; inset:0; overflow:hidden;
  background:var(--lime);
  --s:1;
}
body:not(.ready) #stage{visibility:hidden}

#bg{position:absolute; display:block; user-select:none}

#safe{position:absolute; overflow:hidden}

img.layer{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; user-select:none; -webkit-user-drag:none;
}

#L1_body{z-index:10}
#hood-back{z-index:20}
#L2_head{z-index:30}
#L2s_face_blank{z-index:40}
#hood-front{z-index:50}

.hood-group{position:absolute; inset:0}
.hood-group .hood{position:absolute; inset:0; width:100%; height:100%; display:block}

/* idle bob on the shared wrapper (per-key translate stays on the <img>s) */
.hood-group.bobbing{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{
  0%,100%{transform:translateY(-0.463%)}
  50%    {transform:translateY(0.463%)}
}

/* ---------- capture frame / svg ---------- */
#frame{position:absolute; inset:0; width:100%; height:100%; z-index:60; pointer-events:none}
.brackets{fill:none; stroke:var(--ink); stroke-width:3}
.guide{fill:none; stroke:var(--alert); stroke-width:3}

/* captured-print frame: static graphic, no photographic darkening */
#capture-print{opacity:0; transition:opacity 1.5s ease}
.captured #capture-print{opacity:1}
.crop{fill:none; stroke:var(--ink); stroke-width:2}

/* progress-ring badge: its own opaque ink badge so it reads on lime, black cape and ledge */
.ring-badge{fill:var(--ink); opacity:1}
.ring-track{fill:none; stroke:var(--lime); stroke-opacity:.25; stroke-width:3}
.ring-fill{fill:none; stroke:var(--lime); stroke-width:5; stroke-linecap:round}
.ring-label{fill:var(--lime); font-family:var(--font-mono); font-size:20px; text-anchor:middle; dominant-baseline:central}

.captured #face-guide{stroke:var(--ink); stroke-dasharray:none; animation:none}

.blink{animation:blink 1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1} 50%{opacity:.25}}

/* ---------- captured print overlay (graphic, flat) ---------- */
#vignette{
  position:absolute; inset:0; z-index:65; pointer-events:none;
  opacity:0; transition:opacity 1.5s ease;
  background:radial-gradient(ellipse 120% 120% at 50% 50%,
    rgba(26,26,12,0) 0%,
    rgba(26,26,12,0) 40%,
    rgba(26,26,12,.10) 100%);
}
.captured #vignette{opacity:1}

/* ---------- the one control ---------- */
#hood-hit{
  position:absolute; left:30%; top:14%; width:28%; height:38%;
  z-index:70; padding:0; border:0; background:transparent;
  border-radius:calc(var(--s) * 10px);
  pointer-events:none; cursor:progress;
}
#hood-hit.armed{pointer-events:auto; cursor:grab}
#hood-hit.armed:active,
#hood-hit.armed.grabbing{cursor:grabbing}
#hood-hit:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ---------- hud ---------- */
#hud{position:absolute; inset:0; z-index:80; pointer-events:none}

#brand{
  position:absolute; left:3%; top:4%;
  font-family:var(--font-mono); font-size:calc(var(--s) * 13px);
  letter-spacing:.18em; color:var(--ink);
}

/* wordmark: fixed block y 12 -> 112, never grows past it */
#wordmark{
  position:absolute; left:50%; top:calc(var(--s) * 12px);
  transform:translateX(-50%);
  height:calc(var(--s) * 100px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  font-family:var(--font-display); font-size:calc(var(--s) * 46px);
  line-height:1.02; letter-spacing:-0.02em; color:var(--ink);
}
.wm-line{position:relative; display:inline-block; white-space:nowrap}
.wm-text{display:inline-block; transition:opacity 300ms linear}
.strike{
  position:absolute; left:0; top:52%; height:calc(var(--s) * 5px);
  width:0; background:var(--ink);
}
.striking #wm-old .strike{width:100%; transition:width 300ms linear}
.striking #wm-old .wm-text{opacity:.45}

/* IDLE: the one line is centred; PAYOFF: pair bottom-aligned to y 112 */
#wm-new{
  position:absolute; bottom:0; visibility:hidden; opacity:0; transform:translateY(8px);
}
.captured #wordmark{justify-content:flex-end}
.captured #wm-new{position:static}
.revealed #wm-new{
  visibility:visible; opacity:1; transform:none;
  transition:opacity 240ms ease, transform 240ms ease;
}

#x-link{
  position:absolute; right:3%; top:4%;
  font-family:var(--font-mono); font-size:calc(var(--s) * 13px);
  letter-spacing:.1em; color:var(--ink); opacity:.8;
  text-decoration:none; pointer-events:auto;
}
#x-link:hover{opacity:1}
#x-link:focus-visible{outline-color:var(--ink)}

.arrow{opacity:0; margin-left:.35em; transition:opacity 150ms ease}
#x-link:hover .arrow,
#retake:hover .arrow,
.row a:hover .arrow{opacity:1}

/* left column */
#hud-left{position:absolute; left:4%; top:82%; width:28%; padding-top:calc(var(--s) * 10px)}
.hud-label{
  font-family:var(--font-mono); font-size:calc(var(--s) * 11px);
  letter-spacing:.16em; color:var(--lime); opacity:.6;
}
.hud-value{
  font-family:var(--font-mono); font-size:calc(var(--s) * 40px);
  font-variant-numeric:tabular-nums; color:var(--lime); line-height:1.1;
}

/* centre column: absolute children measured in safe-area units from y 0 */
#hud-centre{position:absolute; left:35%; top:0; height:100%; width:30%; text-align:center; pointer-events:none}

#status-pill{
  position:absolute; left:0; right:0;
  top:calc(var(--s) * 750px); transform:translateY(-50%);
  text-align:center;
  font-family:var(--font-mono); font-size:calc(var(--s) * 13px); letter-spacing:.12em;
}
.captured #status-pill{top:calc(var(--s) * 728px)}
.pill.alert{color:var(--alert)}
.pill.clear{color:var(--ink)}
.pill.confirmed{
  color:var(--ink); background:var(--lime); display:inline-block;
  padding:calc(var(--s) * 4px) calc(var(--s) * 10px);
}

#hold-hint{
  position:absolute; left:0; right:0;
  top:calc(var(--s) * 775px); transform:translateY(-50%);
  text-align:center;
  font-family:var(--font-mono); font-size:calc(var(--s) * 11px);
  letter-spacing:.22em; color:var(--lime);
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.7} 50%{opacity:.3}}
#hold-hint.gone{animation:none; opacity:0; transition:opacity 150ms ease}

/* record rows: absolute, each centred on its own safe-area y */
#records{position:absolute; inset:0}
.row{
  position:absolute; left:0; right:0;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:calc(var(--s) * 12px);
  font-family:var(--font-mono); font-size:calc(var(--s) * 15px); line-height:1.2;
  color:rgba(200,248,0,.75);
  border-bottom:1px solid rgba(200,248,0,.25);
  padding:calc(var(--s) * 2px) 0;
  visibility:hidden; opacity:0; transform:translateY(calc(-50% + 6px));
}
.row:nth-child(1){top:calc(var(--s) * 760px)}
.row:nth-child(2){top:calc(var(--s) * 790px)}
.row:nth-child(3){top:calc(var(--s) * 820px)}
.rows-in .row{
  visibility:visible; opacity:1; transform:translateY(-50%);
  transition:opacity 260ms ease, transform 260ms ease;
}
.rows-in .row:nth-child(1){transition-delay:0ms}
.rows-in .row:nth-child(2){transition-delay:40ms}
.rows-in .row:nth-child(3){transition-delay:80ms}
.row.int:hover{color:var(--lime)}
.row .lbl{letter-spacing:.14em; opacity:.85}
.row .val{text-align:right}
.row a{color:inherit; text-decoration:none; pointer-events:auto}
.row a:hover{color:var(--lime)}

#records :focus-visible{outline-color:var(--lime)}

#copy-btn{
  margin-left:calc(var(--s) * 10px);
  font-family:var(--font-mono); font-size:calc(var(--s) * 11px);
  letter-spacing:.12em; color:var(--lime); background:transparent;
  border:1px solid rgba(200,248,0,.5); padding:calc(var(--s) * 2px) calc(var(--s) * 6px);
  cursor:pointer; pointer-events:auto;
}
#copy-btn:hover{border-color:var(--lime); background:rgba(200,248,0,.12)}
#copy-btn:focus-visible{outline-color:var(--lime)}

#copied{
  position:absolute; right:0; top:calc(var(--s) * -16px);
  font-family:var(--font-mono); font-size:calc(var(--s) * 11px);
  letter-spacing:.14em; color:var(--lime);
  border:2px solid var(--lime); padding:calc(var(--s) * 2px) calc(var(--s) * 7px);
  transform:rotate(-6deg); opacity:0; pointer-events:none;
}
#copied.show{opacity:1; transition:opacity 120ms ease}

/* right column: down in the clear ledge, right-aligned at x 1475 */
#hud-right{
  position:absolute; right:calc(var(--s) * 61px); top:0; height:100%;
  width:40%; text-align:right; pointer-events:none;
}
.hud-line{
  position:absolute; right:0; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:calc(var(--s) * 12px);
  letter-spacing:.14em; color:var(--lime); white-space:nowrap;
}
#case-line{top:calc(var(--s) * 748px); opacity:.55}
#station{top:calc(var(--s) * 776px); opacity:.45}
#retake{
  position:absolute; right:0; top:calc(var(--s) * 800px); transform:translateY(-50%);
  visibility:hidden; opacity:0;
  font-family:var(--font-display); font-size:calc(var(--s) * 14px); letter-spacing:.02em;
  color:var(--lime); background:transparent; border:1px solid var(--lime);
  padding:calc(var(--s) * 4px) calc(var(--s) * 10px);
  cursor:pointer; pointer-events:auto;
}
.retake-in #retake{visibility:visible; opacity:1; transition:opacity 260ms ease}
.retake-in #station{visibility:hidden}
#retake:focus-visible{outline-color:var(--lime)}

/* ---------- flash ---------- */
#flash{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  background:var(--flash); opacity:0;
}

/* ---------- shake ---------- */
#safe.shake-hard{animation:shake 180ms linear 1}
#safe.shake-soft{animation:shake 120ms linear 1}
@keyframes shake{
  0%  {transform:translate(0,0)}
  16% {transform:translate(-3px,2px)}
  33% {transform:translate(3px,-2px)}
  50% {transform:translate(-3px,-2px)}
  66% {transform:translate(3px,2px)}
  83% {transform:translate(-2px,2px)}
  100%{transform:translate(0,0)}
}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hood-group.bobbing{animation:none}
  #safe.shake-hard,
  #safe.shake-soft{animation:none}
  #vignette{display:none}
}