/* ============================================================
   SHORTWAVE — light & material system
   Key light: soft top-left. Neon spill: magenta left, cyan right.
   Depth: strongest on keys + tubes; bezel recessed; chassis medium; alley flat.
   Materials: photo steel plate + hazard plate, photo acrylic key plates,
   CSS glass/phosphor/chrome for interaction & light.
   ============================================================ */
:root{
  --amber:#ffb02e; --green:#46e07a; --pink:#ff4fc8; --cyan:#3fe4ff;
  --phos:#8dffa6;
  --frost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .4 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --chips:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 0 0 0 -5.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --tex-rust:url(assets/rust.webp);
  --mono:"VT323", ui-monospace, Menlo, Consolas, monospace;
  --label:"Share Tech Mono", ui-monospace, Menlo, monospace;
  --stencil:"Black Ops One", Impact, "Arial Black", sans-serif;
  --cond:"Barlow Condensed", "Arial Narrow", sans-serif;
  /* --W = machine width. Mobile-first: fit the viewport width AND the full
     machine+desk stack (≈1.97·W tall incl. stage padding) into the visible height. */
  --W:max(300px, min(calc(100vw - 22px), calc((100svh - 58px) / 1.97)));
  /* --u = one design pixel; never below 1px, grows with the machine on big screens */
  --u:max(1px, calc(var(--W) / 400));
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;background:#05060a;color:#ddd;min-height:100%}
body{font-family:var(--label);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow-x:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}

/* ---------- alley ---------- */
.alley{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#05060a url(assets/alley-tall.webp) center 40%/cover no-repeat}
@media (min-aspect-ratio:4/5){ .alley{background-image:url(assets/alley-wide.webp)} }
.alley::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 45%,transparent 30%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.4))}
.rain{position:absolute;inset:-20% 0 0;opacity:.18;
  background:repeating-linear-gradient(100deg,transparent 0 calc(14*var(--u)),rgba(180,210,255,.5) calc(14*var(--u)) calc(15*var(--u)),transparent calc(15*var(--u)) calc(41*var(--u)));
  background-size:100% calc(220*var(--u));animation:rain .55s linear infinite;mix-blend-mode:screen;
  -webkit-mask:linear-gradient(transparent,#000 20%,#000 70%,transparent);mask:linear-gradient(transparent,#000 20%,#000 70%,transparent)}
@keyframes rain{to{background-position:0 calc(220*var(--u))}}
@media (prefers-reduced-motion:reduce){.rain{animation:none}}

.stage{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(calc(18*var(--u)),env(safe-area-inset-top)) calc(11*var(--u)) max(calc(28*var(--u)),env(safe-area-inset-bottom))}

/* ---------- machine chassis ---------- */
.machine{position:relative;width:var(--W);padding:calc(var(--W)*.105) calc(var(--W)*.05) calc(var(--W)*.085);
  border-radius:calc(20*var(--u));isolation:isolate;
  background:
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,0) 38%,rgba(0,0,0,.22) 100%),
    linear-gradient(90deg,rgba(255,60,200,.08),transparent 30%,transparent 70%,rgba(60,220,255,.08)),
    url(assets/steel2.webp) center/calc(320*var(--u)),
    #3a3d42;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22), inset 2px 0 0 rgba(255,255,255,.08),
    inset 0 -3px 0 rgba(0,0,0,.55), inset -2px 0 0 rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 2px 0 #0b0c0e, 0 calc(30*var(--u)) calc(50*var(--u)) -10px rgba(0,0,0,.85), 0 0 0 1px #08090b,
    -18px 0 calc(50*var(--u)) -30px rgba(255,60,200,.55), calc(18*var(--u)) 0 calc(50*var(--u)) -30px rgba(60,220,255,.55)}
/* wet-floor bleed from the keys */
.machine::after{content:"";position:absolute;left:6%;right:6%;bottom:-46px;height:calc(60*var(--u));z-index:-1;filter:blur(calc(22*var(--u)));opacity:.42;
  background:linear-gradient(90deg,var(--amber),var(--green),var(--pink),var(--cyan));border-radius:50%}
.machine::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--noise);opacity:.18;mix-blend-mode:overlay}

/* ---------- nameplate (photo-baked; h1 kept for a11y, text is in the plate) ---------- */
.nameplate{position:absolute;left:20.27%;top:2.75%;width:50.37%;height:7.97%;z-index:2;margin:0}
.nameplate h1{margin:0;width:100%;height:100%;font:400 calc(var(--W)*.068)/1 var(--stencil);color:transparent;overflow:hidden;
  display:flex;align-items:center;justify-content:center}

/* ---------- meter bezel ---------- */
.bezel{position:relative;display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:calc(7*var(--u));padding:calc(8*var(--u));margin-top:calc(var(--W)*.03);
  border-radius:calc(10*var(--u));
  background:linear-gradient(180deg,#1a1c20,#24272c);
  box-shadow:inset 0 calc(3*var(--u)) calc(7*var(--u)) rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.12),0 0 0 1px #0b0c0e}
.win{position:relative;height:calc(var(--W)*.205);border-radius:calc(6*var(--u));overflow:hidden;background:#050403;
  box-shadow:0 0 0 2px #0c0d0f,0 0 0 calc(3*var(--u)) #4a4e54,0 1px 0 calc(3*var(--u)) rgba(255,255,255,.12)}
.win canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.glass{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 32%,transparent 33%,transparent 75%,rgba(255,255,255,.04));
  box-shadow:inset 0 0 calc(14*var(--u)) rgba(0,0,0,.85),inset 0 0 calc(3*var(--u)) rgba(0,0,0,.9)}
.tag{position:absolute;left:calc(5*var(--u));top:calc(3*var(--u));font:calc(9*var(--u)) var(--label);letter-spacing:.1em;color:rgba(255,180,60,.45);z-index:1}

.crt{background:radial-gradient(120% 110% at 50% 45%,#0c2a15,#041108 70%,#020703)}
.crt-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(4*var(--u)) calc(5*var(--u));text-align:center;
  color:var(--phos);font-family:var(--mono);text-transform:uppercase;animation:flick 4s infinite steps(1)}
.crt-top,.crt-sub{font-size:calc(11*var(--u));line-height:1;letter-spacing:.06em;color:#5fd47d;opacity:.85;text-shadow:0 0 2px rgba(95,212,125,.5);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.crt-sub{font-size:calc(9.5*var(--u));letter-spacing:.02em;opacity:.7;white-space:normal;line-height:1.05;max-height:2.1em}
.crt-name{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;overflow:hidden;
  font-size:calc(30*var(--u));line-height:.86;letter-spacing:.03em;color:#a6ffb9;
  text-shadow:0 0 1px #d9ffe2,0 0 calc(5*var(--u)) rgba(120,255,150,.55)}
.crt-name.blip{animation:blip .28s steps(4)}
@keyframes blip{0%{opacity:.1;transform:scaleY(.15)}50%{opacity:1;transform:scaleY(1.08)}100%{transform:none}}
@keyframes flick{0%{opacity:1}97%{opacity:.93}98%{opacity:1}}
.scan{background:
   repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px calc(3*var(--u))),
   linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 32%,transparent 33%);
  animation:drift 7s linear infinite}
@keyframes drift{to{background-position:0 calc(30*var(--u)),0 0}}

/* ---------- key bay ---------- */
.bay{position:relative;display:grid;grid-template-columns:calc(var(--W)*.065) 1fr calc(var(--W)*.065);gap:calc(var(--W)*.03);
  margin-top:calc(var(--W)*.045);padding:calc(var(--W)*.03) calc(var(--W)*.022);border-radius:calc(12*var(--u));
  background:linear-gradient(180deg,#141518,#1d1f23);
  box-shadow:inset 0 calc(4*var(--u)) calc(10*var(--u)) rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.1),0 0 0 1px #0a0b0c}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--W)*.022) calc(var(--W)*.02)}

.key{position:relative;aspect-ratio:240/212;display:grid;place-items:center;outline:none;
  transition:transform .06s ease-out}
.key::before{content:"";position:absolute;inset:0;background:center/100% 100% no-repeat;
  filter:brightness(.8) saturate(.92) drop-shadow(0 calc(3*var(--u)) 2px rgba(0,0,0,.7));transition:filter .25s}
.key::after{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:30%;background:var(--kc);filter:blur(calc(14*var(--u)));opacity:.22;transition:opacity .25s}
.k-amber{--kc:var(--amber);--ink:#3a1f00}.k-amber::before{background-image:url(assets/key-amber.webp)}
.k-green{--kc:var(--green);--ink:#06300f}.k-green::before{background-image:url(assets/key-green.webp)}
.k-pink {--kc:var(--pink); --ink:#3a0730}.k-pink::before{background-image:url(assets/key-pink.webp)}
.k-cyan {--kc:var(--cyan); --ink:#033039}.k-cyan::before{background-image:url(assets/key-cyan.webp)}
.code{position:relative;z-index:1;margin-top:-9%;font:700 calc(var(--W)*.056)/1 var(--cond);letter-spacing:.07em;
  color:var(--ink);opacity:.86;text-shadow:0 1px 0 rgba(255,255,255,.28)}
.key kbd{position:absolute;right:11%;top:9%;z-index:1;font:calc(9*var(--u)) var(--label);color:var(--ink);opacity:.4}
@media (hover:none){.key kbd{display:none}}

.bay.playing .key::before{filter:brightness(.52) saturate(.75) drop-shadow(0 calc(3*var(--u)) 2px rgba(0,0,0,.7))}
.bay.playing .key::after{opacity:.12}
.key.live::before,.bay.playing .key.live::before{filter:brightness(1.18) saturate(1.1) drop-shadow(0 0 calc(7*var(--u)) var(--kc)) drop-shadow(0 2px 2px rgba(0,0,0,.6));transition:filter .05s}
.key.live::after{opacity:.8;transition:opacity .05s}
.key.live .code{opacity:1;text-shadow:0 0 calc(6*var(--u)) rgba(255,255,255,.7),0 1px 0 rgba(255,255,255,.4)}
.key.down{transform:translateY(calc(3*var(--u))) scale(.975)}
.key.down::before{filter:brightness(1.3) saturate(1.1) drop-shadow(0 0 calc(9*var(--u)) var(--kc)) drop-shadow(0 1px 0 rgba(0,0,0,.8))!important}
@media (hover:hover){.key:hover::before{filter:brightness(.86) saturate(.95) drop-shadow(0 3px 2px rgba(0,0,0,.7))}}
.key:focus-visible{outline:2px solid var(--cyan);outline-offset:calc(3*var(--u));border-radius:calc(8*var(--u))}

/* ---------- plasma tubes ---------- */
.tube{position:relative;border-radius:calc(999*var(--u));margin:calc(16*var(--u)) 0;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(10,6,24,.75) 30%,rgba(10,6,24,.75) 70%,rgba(255,255,255,.05));
  box-shadow:0 0 calc(18*var(--u)) rgba(170,90,255,.45),0 0 calc(40*var(--u)) rgba(60,200,255,.18),inset 0 0 0 1px rgba(200,220,255,.25);
  transition:box-shadow .3s}
.bay.playing .tube{box-shadow:0 0 calc(22*var(--u)) rgba(190,110,255,.75),0 0 calc(48*var(--u)) rgba(60,220,255,.4),inset 0 0 0 1px rgba(220,230,255,.4)}
.tube canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
.tube::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,transparent 12%,rgba(255,255,255,.4) 20%,rgba(255,255,255,.05) 30%,transparent 60%,rgba(255,255,255,.12) 82%,transparent 90%)}
.cap{position:absolute;left:50%;width:150%;height:calc(18*var(--u));transform:translateX(-50%);z-index:2;border-radius:calc(3*var(--u));
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 1px,transparent 1px calc(3*var(--u))),
    linear-gradient(90deg,#3d4146,#c3c8cd 28%,#7b8086 55%,#2b2e32);
  box-shadow:0 2px calc(3*var(--u)) rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.5)}
.cap.top{top:-14px}.cap.bot{bottom:-14px}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--u));margin-top:calc(var(--W)*.045);padding:0 calc(4*var(--u))}
.rocker{display:flex;align-items:center;gap:calc(7*var(--u));padding:calc(7*var(--u)) calc(11*var(--u)) calc(6*var(--u));border-radius:calc(6*var(--u));font:calc(12*var(--u)) var(--label);letter-spacing:.14em;color:#c9ccd0;
  background:linear-gradient(180deg,#2b2e33,#1a1c20);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px #08090a,0 calc(3*var(--u)) 0 #0b0c0e,0 calc(4*var(--u)) calc(6*var(--u)) rgba(0,0,0,.6);
  transition:transform .06s}
.rocker:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px #08090a,0 1px 0 #0b0c0e}
.led{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:#3a1212;box-shadow:inset 0 1px 1px rgba(0,0,0,.7)}
.rocker.on .led{background:#7dff9a;box-shadow:0 0 calc(6*var(--u)) #4dff7a,0 0 2px #fff inset}
.rocker#mystery.on .led{background:#ffb02e;box-shadow:0 0 calc(6*var(--u)) #ffb02e,0 0 2px #fff inset}
.stamp{font:calc(10*var(--u)) var(--label);letter-spacing:.16em;color:rgba(20,22,25,.85);text-shadow:0 1px 0 rgba(255,255,255,.14)}
.rx{display:flex;align-items:center;gap:calc(6*var(--u));font:calc(11*var(--u)) var(--label);letter-spacing:.14em;color:#a9adb2}
.rx.on .led{background:#ff4040;box-shadow:0 0 calc(7*var(--u)) #ff3030;animation:rxb .18s steps(2) infinite}
@keyframes rxb{50%{opacity:.4}}
.rocker:focus-visible{outline:2px solid var(--cyan);outline-offset:calc(3*var(--u))}


/* ============================================================
   MACHINE BODY — photographic plates + CSS light
   machine-plate.webp: generated head-on photo of the empty chassis (steel, rust,
   hazard bands, hex bolts, riveted SHORTWAVE nameplate, bezel + tray recesses)
   cropped and alpha-cut. Every live part is positioned INTO its recess in %
   of the plate, so the photo and the DOM line up at any width.
   CSS only adds: neon spill, glass reflections, glow, canvases, press.
   ============================================================ */
.machine{aspect-ratio:804/1092;padding:0;border-radius:calc(18*var(--u));
  background:url(assets/machine-plate.webp) 0 0/100% 100% no-repeat;
  box-shadow:0 calc(30*var(--u)) calc(50*var(--u)) -10px rgba(0,0,0,.85),-18px 0 calc(50*var(--u)) -26px rgba(255,60,200,.6),calc(18*var(--u)) 0 calc(50*var(--u)) -26px rgba(60,220,255,.6)}
/* neon spill from the alley on the plate edges (light only, no material) */
.machine::before{background:linear-gradient(90deg,rgba(255,60,200,.16),transparent 18%,transparent 82%,rgba(60,220,255,.16));
  opacity:1;mix-blend-mode:screen}

.bezel{position:absolute;inset:0;display:block;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;pointer-events:none;z-index:1}
.win{position:absolute;top:13.19%;height:16.03%;border-radius:calc(5*var(--u));pointer-events:auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.6)}
.win.scope{left:7.71%;width:26.24%}
.win.crt{left:36.32%;width:27.99%}
.win.vu{left:66.17%;width:25.87%}
.glass{background:
    url(assets/glass-dust.webp) center/cover,
    linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.02) 30%,transparent 31%,transparent 78%,rgba(255,255,255,.035));
  opacity:.9;box-shadow:inset 0 calc(3*var(--u)) calc(9*var(--u)) rgba(0,0,0,.9),inset 0 0 calc(3*var(--u)) rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.06)}
.scan{background:
   repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px calc(3*var(--u))),
   url(assets/glass-dust.webp) center/cover,
   linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 30%,transparent 31%)}
@keyframes drift{to{background-position:0 calc(30*var(--u)),center,0 0}}

.bay{position:absolute;left:5.35%;top:33.79%;width:89.55%;height:50.64%;margin:0;align-content:center;
  padding:0 calc(var(--W)*.024);background:none;box-shadow:none;border-radius:calc(10*var(--u))}
.tube{background:radial-gradient(60% 50% at 50% 50%,rgba(40,14,70,.55),rgba(6,4,14,.85));margin:calc(18*var(--u)) 0}
.tube::after{background:url(assets/tube-glass.webp) center/100% 100% no-repeat;border-radius:calc(999*var(--u))}
.cap{width:156%;height:auto;aspect-ratio:176/90;border-radius:0;background:url(assets/tube-cap.webp) center/100% 100% no-repeat;
  box-shadow:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.8))}
.cap.top{top:-13px}.cap.bot{bottom:-13px;transform:translateX(-50%) scaleY(-1)}

.foot{position:absolute;left:5.6%;right:5.6%;top:85.2%;height:6.6%;margin:0;padding:0 2px}
.rocker{background:url(assets/rocker.webp) center/100% 100% no-repeat;padding:0 calc(12*var(--u));
  min-height:calc(100% - 2px);color:#b9bdc2;text-shadow:0 -1px 0 rgba(0,0,0,.8);box-shadow:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.75));transition:transform .06s,filter .06s}
.rocker:active{transform:translateY(1px);box-shadow:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) brightness(.88)}
.rx{color:#c3c6ca;text-shadow:0 1px 1px rgba(0,0,0,.9)}

@media (min-width:600px){ :root{--W:max(360px, min(calc(100vw - 96px), calc((100svh - 84px) / 1.97), 720px))} }

/* ============================================================
   QUIZ DESK — two big answer keys lying on the desk in front of the
   machine, foreshortened toward the viewer like a keyboard under a screen.
   ============================================================ */
/* quiz feedback flash — own class names: "win" is the window base class, so
   toggling it used to drop the CRT out of its plate recess (text painted over the keys) */
.crt.crt-win{animation:crtwin .9s ease-out}
.crt.crt-lose{animation:crtlose 1.1s ease-out}
@keyframes crtwin{0%,30%{filter:brightness(2.4) saturate(1.4)}10%,45%{filter:brightness(1)}20%{filter:brightness(2)}100%{filter:none}}
@keyframes crtlose{0%{filter:hue-rotate(-110deg) brightness(1.6) saturate(2);transform:translateX(0)}
  10%{transform:translateX(-3px)}20%{transform:translateX(calc(3*var(--u)))}30%{transform:translateX(-2px)}40%{transform:translateX(1px)}
  70%{filter:hue-rotate(-110deg) brightness(1.2) saturate(1.6)}100%{filter:none;transform:none}}

.desk{position:relative;width:calc(var(--W)*.9);margin-top:calc(var(--W)*.1);perspective:calc(var(--W)*1.7);perspective-origin:50% -40%;z-index:0}
.stage{overflow-x:clip}
.deck{transform-origin:50% 0;transform:rotateX(60deg);transform-style:preserve-3d}
.deck-plate{position:relative;transform-style:preserve-3d;padding:calc(var(--W)*.035) calc(var(--W)*.05) calc(var(--W)*.08);
  border-radius:calc(8*var(--u)) calc(8*var(--u)) calc(6*var(--u)) calc(6*var(--u));
  background:
    linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,0) 20%),
    radial-gradient(60% 50% at 50% 60%,rgba(255,79,200,.12),transparent 70%),
    linear-gradient(rgba(8,8,10,.25),rgba(8,8,10,.25)),
    url(assets/plate-panel.webp) center/cover no-repeat,#3b3d3f;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px #08090b}
.fx-rust{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--tex-rust) -40px -30px/calc(240*var(--u)) calc(220*var(--u));opacity:.22;filter:brightness(.5)}
/* front lip: hangs straight down, faces the player — carnival marquee + chase bulbs on hazard steel */
.deck-lip{position:absolute;left:0;right:0;top:100%;height:calc(var(--W)*.2);transform-origin:50% 0;transform:rotateX(-90deg);
  display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--W)*.012) calc(var(--W)*.03);border-radius:0 0 calc(10*var(--u)) calc(10*var(--u));
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 8%,transparent 80%,rgba(0,0,0,.55)),
    url(assets/hazard-sm.webp) 0 0/calc(150*var(--u)) repeat;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(0,0,0,.6),0 calc(10*var(--u)) calc(20*var(--u)) rgba(0,0,0,.6)}
.deck-lip::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tex-steel,url(assets/steel2.webp)) 0 0/calc(300*var(--u));-webkit-mask:var(--chips);mask:var(--chips);opacity:.9;pointer-events:none}
.marquee{position:relative;z-index:1;align-self:center;padding:calc(3*var(--u)) calc(12*var(--u)) calc(4*var(--u));border-radius:calc(4*var(--u));text-align:center;
  background:linear-gradient(180deg,#1a0d14,#0b0609);box-shadow:0 0 0 2px #2a2c30,0 0 0 calc(3*var(--u)) #8a8f95,0 calc(3*var(--u)) calc(6*var(--u)) rgba(0,0,0,.7),inset 0 0 calc(14*var(--u)) rgba(255,79,200,.35)}
.marquee span{display:block;white-space:nowrap;font:400 calc(var(--W)*.04)/1 var(--stencil);letter-spacing:.06em;color:#ffe7f7;
  text-shadow:0 0 2px #fff,0 0 calc(7*var(--u)) var(--pink),0 0 calc(16*var(--u)) rgba(255,79,200,.8);animation:neonflick 6s infinite steps(1)}
.marquee small{display:block;margin-top:calc(3*var(--u));font:calc(9.5*var(--u)) var(--label);white-space:nowrap;letter-spacing:.16em;color:#ffd27a;text-shadow:0 0 calc(5*var(--u)) rgba(255,176,46,.7)}
@keyframes neonflick{0%,100%{opacity:1}61%{opacity:.45}62%{opacity:1}64%{opacity:.6}65%{opacity:1}}
.bulbs{position:relative;z-index:1;display:flex;justify-content:space-between;padding:0 2px}
.bulbs i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d6,#a87a2a 55%,#3b2a10);
  box-shadow:0 0 0 1.5px #1b1c1e,0 1px 1px rgba(0,0,0,.8);opacity:.55}
.desk .bulbs i{animation:chase 1.4s steps(1) infinite;animation-delay:calc(var(--n) * -.1s)}
@keyframes chase{0%,30%{opacity:1;background:radial-gradient(circle at 35% 30%,#fff,#ffd27a 50%,#c47a10);box-shadow:0 0 0 1.5px #1b1c1e,0 0 calc(8*var(--u)) #ffb02e,0 0 calc(16*var(--u)) rgba(255,176,46,.6)}31%,100%{opacity:.5}}
.desk.dancing .bulbs i{animation-duration:.7s}
.desk.won .bulbs i{animation:winbulb .22s steps(1) infinite;animation-delay:0s}
.desk.won .bulbs i:nth-child(even){animation-delay:-.11s}
@keyframes winbulb{0%{opacity:1;background:radial-gradient(circle at 35% 30%,#fff,#9dffb6 50%,#1f8a45);box-shadow:0 0 0 1.5px #1b1c1e,0 0 calc(10*var(--u)) var(--green)}50%{opacity:.35}}
.desk.lost .bulbs i{animation:none;opacity:.25;filter:grayscale(1)}
.desk.lost .bulbs i:nth-child(3n){opacity:1;background:radial-gradient(circle at 35% 30%,#ffd0d0,#ff3b3b 55%,#5a0d0d);box-shadow:0 0 0 1.5px #1b1c1e,0 0 calc(8*var(--u)) #ff3b3b}
/* graffiti + stickers stuck flat on the desk (foreshortened with it) */
.graf{position:absolute;left:9%;right:68%;bottom:calc(var(--W)*.008);height:calc(var(--W)*.065);pointer-events:none;
  background:url(assets/graf-rain.webp) left center/contain no-repeat;opacity:.7;transform:rotate(-2deg);filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)) hue-rotate(0deg)}
.sticker{position:absolute;pointer-events:none;font-family:var(--stencil);text-align:center;line-height:1;filter:url(#rough) drop-shadow(1px 2px 2px rgba(0,0,0,.5))}
.sticker::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(50% 40% at 75% 20%,rgba(255,255,255,.22),transparent 70%),var(--noise),linear-gradient(160deg,transparent 60%,rgba(60,40,20,.3));
  background-size:auto,calc(90*var(--u)) calc(90*var(--u)),auto;mix-blend-mode:multiply;opacity:.9}
.stk-norefund{left:calc(var(--W)*.04);top:calc(3*var(--u));z-index:2;background:#f2ead8;color:#c9352c;padding:calc(3*var(--u)) calc(5*var(--u));font-size:calc(9*var(--u));border:1.5px solid #c9352c;transform:rotate(-7deg)}
.stk-womp{right:3%;bottom:calc(var(--W)*.012);background:#f4c51c;color:#111;padding:calc(4*var(--u)) calc(6*var(--u));font-size:calc(8.5*var(--u));letter-spacing:.05em;border-radius:2px;transform:rotate(4deg)}
.stk-tune{left:50%;margin-left:-26px;bottom:calc(var(--W)*.004);width:calc(52*var(--u));height:calc(52*var(--u));border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle,#3fe4ff 0 57%,#111 58% 63%,#3fe4ff 64%);color:#06161a;font-size:calc(7.5*var(--u));letter-spacing:.03em;transform:rotate(-14deg);z-index:3}
.stk-tune big{font-size:calc(9*var(--u));display:block}
.deck-plate .bolt{position:absolute;width:calc(12*var(--u));height:calc(12*var(--u));border-radius:50%;z-index:3;
  background:url(assets/bolt.webp) center/cover;box-shadow:0 1px 1px rgba(255,255,255,.15),0 2px calc(3*var(--u)) rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.4)}
.deck-plate .bolt.tl{top:calc(9*var(--u));left:calc(9*var(--u))}.deck-plate .bolt.tr{top:calc(9*var(--u));right:calc(9*var(--u));transform:rotate(70deg)}
.deck-plate .bolt.bl{bottom:calc(9*var(--u));left:calc(9*var(--u));transform:rotate(130deg)}.deck-plate .bolt.br{bottom:calc(9*var(--u));right:calc(9*var(--u));transform:rotate(200deg)}
.deck-lab{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 calc(4*var(--u)) calc(var(--W)*.03);
  font:calc(11*var(--u)) var(--label);letter-spacing:.18em;color:rgba(18,20,23,.9);text-shadow:0 1px 0 rgba(255,255,255,.16)}
.lip-row{position:relative;z-index:1;display:flex;gap:calc(8*var(--u));align-items:center;justify-content:center}
.ticket{display:flex;flex-direction:column;align-items:center;padding:calc(3*var(--u)) calc(10*var(--u)) calc(3*var(--u)) calc(12*var(--u));background:#c9352c;color:#ffe9d0;font:calc(9*var(--u))/1.1 var(--label);letter-spacing:.14em;
  clip-path:polygon(0 0,100% 0,100% 30%,94% 50%,100% 70%,100% 100%,0 100%,0 70%,6% 50%,0 30%);box-shadow:inset 0 0 0 2px rgba(255,233,208,.35);transform:rotate(-3deg)}
.ticket b{white-space:nowrap;font:400 calc(12*var(--u))/1 var(--stencil);color:#fff;letter-spacing:.06em}
.desk.asking #qmsg{color:#ffd27a;text-shadow:0 0 calc(6*var(--u)) rgba(255,176,46,.8)}
.desk.won #qmsg{color:#9dffb6;text-shadow:0 0 calc(8*var(--u)) rgba(70,224,122,.9)}
.desk.lost #qmsg{color:#ff8b8b;text-shadow:0 0 calc(8*var(--u)) rgba(255,60,60,.9)}
#qmsg{color:rgba(230,226,214,.55);text-shadow:0 1px 0 rgba(0,0,0,.6)}

.slots{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--W)*.05);transform-style:preserve-3d}
/* recessed metal frame each key sits in */
.slot{position:relative;padding:calc(var(--W)*.022);border-radius:calc(12*var(--u));transform-style:preserve-3d;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,0) 30%,rgba(0,0,0,.25) 70%,rgba(255,255,255,.08)),
    url(assets/slot-frame.webp) center/100% 100%,#6d7277;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.5),0 0 0 1px #0b0c0e,0 calc(3*var(--u)) calc(5*var(--u)) rgba(0,0,0,.6)}
.slot::before{content:"";position:absolute;inset:calc(var(--W)*.016);border-radius:calc(8*var(--u));
  background:url(assets/grime.webp) 0 0/calc(160*var(--u)) auto,radial-gradient(80% 90% at 50% 50%,#17140f,#050403);box-shadow:inset 0 calc(3*var(--u)) calc(8*var(--u)) rgba(0,0,0,.95),inset 0 0 calc(14*var(--u)) rgba(40,26,10,.9)}

/* the key: a real 3D box (cap face + front skirt), cap tilted up toward the player */
.qkey{--qc:#30343a;--h:calc(var(--W)*.12);--tilt:-10deg;--lift:0px;position:relative;display:block;width:100%;aspect-ratio:1.22;transform-style:preserve-3d;
  transform-origin:50% 100%;transform:translateZ(calc(2px + var(--lift))) rotateX(var(--tilt));outline:none;transition:transform .08s ease-out}
.qkey:disabled{cursor:default}
.qcap{position:absolute;inset:0;display:grid;place-items:center;isolation:isolate;transform:translateZ(var(--h));border-radius:calc(9*var(--u))}
.qcap::before{content:"";position:absolute;inset:0;z-index:0;background:url(assets/key-worn.webp) center/100% 100% no-repeat;
  filter:brightness(.55) drop-shadow(0 0 0 transparent);transition:filter .35s}
.qtint{position:absolute;inset:0;z-index:1;background:var(--qc);mix-blend-mode:multiply;opacity:.9;transition:background-color .35s,opacity .35s;
  -webkit-mask:url(assets/key-white.webp) center/100% 100% no-repeat;mask:url(assets/key-white.webp) center/100% 100% no-repeat}
/* front skirt — translucent acrylic edge, catches the backlight */
/* block walls: front (faces the player, tallest on screen), sides, back — translucent acrylic lit from inside */
.qfront,.qside{position:absolute;pointer-events:none;backface-visibility:hidden;transition:background .3s,filter .3s}
.qfront{left:0;right:0;bottom:0;height:var(--h);transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:0 0 calc(7*var(--u)) calc(7*var(--u));
  background:
    url(assets/acrylic-edge.webp) 0 100%/100% 100%,
    linear-gradient(180deg,rgba(255,255,255,.55) 0 1.5px,transparent 2px),
    linear-gradient(90deg,rgba(0,0,0,.35),transparent 12%,transparent 88%,rgba(0,0,0,.35)),
    linear-gradient(180deg,color-mix(in srgb,var(--qc) 80%,#fff 20%),color-mix(in srgb,var(--qc) 70%,#000 30%) 70%,color-mix(in srgb,var(--qc) 35%,#000 65%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset 0 -6px calc(10*var(--u)) rgba(0,0,0,.35)}
.qside{top:0;bottom:0;width:var(--h)}
.ql{left:0;transform-origin:0 50%;transform:rotateY(-90deg)}
.qr{right:0;transform-origin:100% 50%;transform:rotateY(90deg)}
.ql,.qr{background:
    url(assets/acrylic-edge.webp) 40% 100%/100% 100%,
    linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 2px),
    linear-gradient(180deg,color-mix(in srgb,var(--qc) 45%,#000 55%),color-mix(in srgb,var(--qc) 60%,#000 40%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ql{background:
    url(assets/acrylic-edge.webp) 70% 100%/100% 100%,
    linear-gradient(270deg,rgba(255,255,255,.35) 0 1px,transparent 2px),
    linear-gradient(180deg,color-mix(in srgb,var(--qc) 45%,#000 55%),color-mix(in srgb,var(--qc) 60%,#000 40%))}
.qback{display:none;left:0;right:0;top:0;width:auto;bottom:auto;height:var(--h);transform-origin:50% 0;transform:rotateX(90deg);background:color-mix(in srgb,var(--qc) 30%,#000 70%)}
.qkey.dim .qfront,.qkey.dim .qside{filter:brightness(.6)}
.qcap::after{content:"";position:absolute;inset:0;z-index:3;border-radius:calc(10*var(--u));pointer-events:none;
  background:
    url(assets/scratch.webp) calc(30*var(--u)) calc(10*var(--u))/calc(260*var(--u)) auto,
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 45%,transparent 70%),
    var(--frost),
    url(assets/grime-lt.webp) 0 0/calc(220*var(--u)) auto;
  background-size:calc(260*var(--u)) auto,auto,calc(90*var(--u)) calc(90*var(--u)),calc(220*var(--u)) auto;-webkit-mask:url(assets/key-white.webp) center/100% 100%;mask:url(assets/key-white.webp) center/100% 100%;opacity:.7}
.qfront-lab{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:400 calc(var(--W)*.03)/1 var(--stencil);font-style:normal;
  letter-spacing:.2em;color:rgba(255,255,255,.6);text-shadow:0 0 calc(6*var(--u)) var(--qc),0 1px 0 rgba(0,0,0,.5)}
.qglow{position:absolute;inset:-10%;transform:translateZ(1px);border-radius:22%;background:var(--qc);filter:blur(calc(16*var(--u)));opacity:0;transition:opacity .35s,background-color .35s}
.qlabel{position:relative;z-index:2;margin-top:-6%;padding:0 10%;text-align:center;
  font:700 calc(var(--W)*.07)/.92 var(--cond);letter-spacing:.06em;color:rgba(10,10,12,.82);
  text-shadow:0 1px 0 rgba(255,255,255,.35);opacity:0}

.qkey.lit .qcap::before{filter:brightness(1.12) drop-shadow(0 0 calc(8*var(--u)) var(--qc))}
.qkey.lit .qtint{opacity:.85}
.qkey.lit .qglow{opacity:.75}
.desk.dancing .qkey .qcap::before{transition:filter .3s}
.desk.dancing .qkey.lit{animation:hop .46s ease-out}
@keyframes hop{35%{--lift:calc(var(--W)*.025)}}
/* idle breath once the dance settles */
.desk:not(.dancing):not(.asking) .qkey .qglow{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.18}}

/* labels materialise: phosphor-style smear into focus */
.qkey.show .qlabel{animation:magic .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes magic{0%{opacity:0;filter:blur(calc(9*var(--u)));transform:scale(1.35);letter-spacing:.4em}
  55%{opacity:1;filter:blur(1px);color:#fff;text-shadow:0 0 calc(14*var(--u)) #fff,0 0 calc(22*var(--u)) var(--qc)}
  100%{opacity:1;filter:none;transform:none}}
.desk.asking .qkey.show .qcap::before{animation:waiting 1.6s ease-in-out .6s infinite}
@keyframes waiting{50%{filter:brightness(1.3) drop-shadow(0 0 calc(14*var(--u)) var(--qc))}}

.qkey.down{--lift:calc(var(--W)*-.045)}
.qkey.right .qcap::before,.qkey.truth .qcap::before{animation:none;filter:brightness(1.45) drop-shadow(0 0 calc(16*var(--u)) var(--green))}
.qkey.right .qglow,.qkey.truth .qglow{opacity:1}
.qkey.right{animation:pop .5s ease-out}
@keyframes pop{0%{transform:translateZ(calc(2px - var(--W)*.045)) rotateX(var(--tilt))}45%{transform:translateZ(calc(var(--W)*.04)) rotateX(var(--tilt))}100%{transform:translateZ(2px) rotateX(var(--tilt))}}
.qkey.wrong .qcap::before{animation:none;filter:brightness(1.1) drop-shadow(0 0 calc(12*var(--u)) #ff3b3b)}
.qkey.wrong .qglow{opacity:.9}
.qkey.wrong{animation:nope .45s ease-out}
@keyframes nope{20%{transform:translateZ(2px) rotateX(var(--tilt)) translateX(-5px)}40%{transform:translateZ(2px) rotateX(var(--tilt)) translateX(calc(5*var(--u)))}60%{transform:translateZ(2px) rotateX(var(--tilt)) translateX(-3px)}80%{transform:translateZ(2px) rotateX(var(--tilt)) translateX(2px)}}
.qkey.dim .qcap::before{animation:none;filter:brightness(.45)}
.qkey.dim .qcap{filter:brightness(.7)}
.qkey.dim .qglow{opacity:0}
.qkey:focus-visible .qcap{outline:2px solid var(--cyan);outline-offset:2px;border-radius:calc(10*var(--u))}

.spark{position:fixed;z-index:50;width:calc(7*var(--u));height:calc(11*var(--u));border-radius:2px;pointer-events:none;
  animation:spark 1.1s cubic-bezier(.15,.7,.3,1) forwards;box-shadow:0 0 calc(6*var(--u)) currentColor}
@keyframes spark{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),calc(var(--dy) + calc(120*var(--u)))) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:reduce){.desk.dancing .qkey.lit,.qkey.right,.qkey.wrong{animation:none}}
.qkey:not(.lit) .qtint,.qkey:not(.lit) .qglow,.qkey:not(.lit) .qcap::before{transition-duration:.16s}
@property --lift{syntax:'<length>';inherits:true;initial-value:0px}

/* sprayed tags (baked overspray, drips, fade) — Fortune Hole graf-rain method */
.spray{position:absolute;pointer-events:none;background:center/contain no-repeat}
.sp-88{left:31%;bottom:calc(var(--W)*.002);width:13%;height:calc(var(--W)*.075);background-image:url(assets/tag-88.webp);opacity:.9;transform:rotate(-8deg)}
.sp-rigged{left:2%;bottom:-4px;width:26%;height:calc(var(--W)*.085);background-image:url(assets/tag-rigged.webp);opacity:.85;transform:rotate(-4deg);z-index:2}
.sp-punch{right:1%;bottom:-3px;width:36%;height:calc(var(--W)*.075);background-image:url(assets/tag-punch.webp);opacity:.85;transform:rotate(-5deg);z-index:2}

/* ============================================================
   DIFFICULTY KNOB — hybrid: photographed brushed cap (knob-top.webp,
   re-anodised red in the bake -> knob-red.webp) physically rotates; a darker
   copy below is the skirt (gives the cap its height). CSS adds only the
   fixed key light, contact shadow, detent LEDs and engraved paint.
   ============================================================ */
.foot{gap:calc(6*var(--u))}
.diff{display:flex;align-items:center;gap:calc(6*var(--u));margin-left:auto;height:100%}
.diff-lab{display:flex;flex-direction:column;align-items:flex-end;line-height:1;gap:2px;text-shadow:0 1px 1px rgba(0,0,0,.95)}
.diff-lab b{font:700 calc(var(--W)*.031)/1 var(--cond);letter-spacing:.16em;color:#d9d4cc;opacity:.85}
.diff-lab i{font:normal calc(var(--W)*.042)/1 var(--mono);letter-spacing:.08em;color:#ff5a4a;text-shadow:0 0 calc(6*var(--u)) rgba(255,50,40,.75),0 1px 1px #000}
.diff-lab .rx{font-size:calc(var(--W)*.022);gap:calc(4*var(--u));margin-top:1px}
.diff-lab .rx .led{width:calc(5*var(--u));height:calc(5*var(--u))}
.knob-well{position:relative;width:calc(var(--W)*.19);aspect-ratio:1;flex:none;margin:calc(var(--W)*-.045) calc(var(--W)*-.012) calc(var(--W)*-.06) 0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.85) 0 54%,rgba(0,0,0,.35) 62%,transparent 71%)}
.knob-marks i{position:absolute;left:50%;top:50%;font:700 calc(var(--W)*.029)/1 var(--cond);font-style:normal;color:#bdb8ae;opacity:.8;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--W)*-.104)) rotate(calc(-1 * var(--a)));text-shadow:0 1px 1px #000}
.knob-marks i::after{content:"";position:absolute;left:50%;top:calc(100% + 1px);width:calc(4*var(--u));height:calc(4*var(--u));margin-left:-2px;border-radius:50%;
  background:#3a1212;box-shadow:inset 0 1px 1px rgba(0,0,0,.8)}
.knob-marks i.on{color:#ffd2cc;opacity:1;text-shadow:0 0 calc(6*var(--u)) rgba(255,60,40,.9),0 1px 1px #000}
.knob-marks i.on::after{background:#ff3a2a;box-shadow:0 0 calc(6*var(--u)) #ff2a1a,0 0 2px #fff inset}
.knob{--rot:-135deg;position:absolute;inset:16%;border-radius:50%;touch-action:none;cursor:grab;outline:none}
.knob:active{cursor:grabbing}
.knob:focus-visible{box-shadow:0 0 0 2px var(--cyan)}
.knob-shadow{position:absolute;inset:8% -4% -10% 6%;border-radius:50%;background:rgba(0,0,0,.9);filter:blur(calc(5*var(--u)))}
.knob-rot{position:absolute;inset:0}
.knob-skirt,.knob-cap{position:absolute;left:0;width:100%;height:100%;border-radius:50%;
  background:url(assets/knob-red.webp) center/100% 100% no-repeat;transform:rotate(var(--rot));
  transition:transform .34s cubic-bezier(.3,1.45,.5,1)}
.knob-skirt{top:7%;filter:brightness(.38) contrast(1.3);box-shadow:0 2px 2px rgba(0,0,0,.6)}
.knob-cap{top:0;filter:saturate(1.05) brightness(.95)}
.knob.drag .knob-skirt,.knob.drag .knob-cap{transition:none}
.knob-light{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;
  background:radial-gradient(55% 45% at 32% 24%,rgba(255,235,225,.38),transparent 62%),
             radial-gradient(70% 60% at 72% 82%,rgba(0,0,0,.4),transparent 70%),
             radial-gradient(circle,transparent 64%,rgba(0,0,0,.35) 100%);mix-blend-mode:normal}
/* red bloom on the steel that rises with the level */
.knob-well::after{content:"";position:absolute;inset:-10%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(255,40,30,var(--bloom,.12)),transparent 70%);filter:blur(calc(6*var(--u)))}
body[data-diff="medium"] .knob-well{--bloom:.25}
body[data-diff="hard"] .knob-well{--bloom:.45}
.knob:active .knob-cap{filter:saturate(1.05) brightness(1.05)}

/* ============================================================
   STATION BACKLIGHT — each key is lit from behind through its acrylic.
   .bl is a coloured light pool behind the code (screen blend), always on low,
   breathing in a slow staggered wave; .live floods it, .scan flickers the band
   the key tuned into (Medium/Hard), .after is a short phosphor afterglow.
   ============================================================ */
.key .bl{position:absolute;inset:12% 10% 18%;z-index:0;border-radius:40%;pointer-events:none;
  background:radial-gradient(closest-side,var(--kc),transparent);mix-blend-mode:screen;opacity:.22;filter:blur(calc(4*var(--u)));
  animation:bl-breathe 5.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.35s)}
@keyframes bl-breathe{0%,100%{opacity:.14}50%{opacity:.36}}
.key::before{animation:key-breathe 5.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.35s)}
@keyframes key-breathe{0%,100%{filter:brightness(.78) saturate(.9) drop-shadow(0 calc(3*var(--u)) 2px rgba(0,0,0,.7))}50%{filter:brightness(.95) saturate(1) drop-shadow(0 0 calc(4*var(--u)) var(--kc)) drop-shadow(0 calc(3*var(--u)) 2px rgba(0,0,0,.7))}}
.boot .key::before{animation:key-boot .9s ease-out both;animation-delay:calc(var(--i) * 45ms)}
@keyframes key-boot{0%{filter:brightness(.3)}35%{filter:brightness(1.45) drop-shadow(0 0 calc(9*var(--u)) var(--kc))}100%{filter:brightness(.8) drop-shadow(0 calc(3*var(--u)) 2px rgba(0,0,0,.7))}}
.bay.playing .key::before{animation:none}
.bay.playing .key .bl{animation:none;opacity:.06}
.key.live .bl{animation:none;opacity:.95;inset:4%;filter:blur(calc(5*var(--u)))}
.key.live::before{animation:none}
.key.scan::before{animation:scan .22s steps(2) infinite;filter:brightness(.95) drop-shadow(0 0 calc(5*var(--u)) var(--kc))}
.key.scan .bl{animation:none;opacity:.5}
@keyframes scan{50%{filter:brightness(.7) drop-shadow(0 0 2px var(--kc))}}
.key.after .bl{animation:none;opacity:.5;transition:opacity .9s}
.key.after::before{animation:none;filter:brightness(1) drop-shadow(0 0 calc(6*var(--u)) var(--kc));transition:filter .9s}
.key .code{z-index:1}
@media (prefers-reduced-motion:reduce){.key .bl,.key::before,.key.scan::before{animation:none!important}}

/* ---------- HARD: blank answer caps ---------- */
.qkey .qq{display:block;font:400 calc(var(--W)*.15)/1 var(--stencil);color:rgba(255,255,255,.85);
  text-shadow:0 0 calc(10*var(--u)) var(--qc),0 0 calc(22*var(--u)) var(--qc),0 2px 0 rgba(0,0,0,.5);animation:qq 1.1s ease-in-out infinite}
@keyframes qq{50%{opacity:.45;transform:scale(.92)}}
.qkey.hidden-ans .qcap::before{animation:none;filter:brightness(.85) drop-shadow(0 0 calc(6*var(--u)) var(--qc))}

/* ---------- big screens ---------- */
/* landscape tablet / desktop: machine and punch desk side by side, both height-fitted */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  :root{--W:max(360px, min(calc((100svh - 84px) / 1.36), calc((100vw - 160px) / 1.92), 780px))}
  .stage{flex-direction:row;gap:calc(var(--W)*.09)}
  .desk{width:calc(var(--W)*.92);margin-top:calc(var(--W)*-.02);perspective:calc(var(--W)*2.2);perspective-origin:50% -55%}
}

/* ---------- difficulty labels ----------
   Medium: single letter, knocked off-centre to one of 6 spots (lp-0..5).
   Station keys only — punch caps always show full place names.
   Hard: station key codes + kbd hints gone. */
.key .code.letter{position:absolute;left:var(--lx);top:var(--ly);margin:0;padding:0;translate:-50% -50%;rotate:var(--lr);letter-spacing:0}
.key .code.letter{font-size:calc(var(--W)*.072)}
.key .code.lp-0{--lx:29%;--ly:30%;--lr:-7deg}
.key .code.lp-1{--lx:71%;--ly:27%;--lr:6deg} 
.key .code.lp-2{--lx:27%;--ly:57%;--lr:4deg} 
.key .code.lp-3{--lx:72%;--ly:55%;--lr:-5deg}
.key .code.lp-4{--lx:50%;--ly:23%;--lr:-3deg}
.key .code.lp-5{--lx:54%;--ly:62%;--lr:8deg} 
body[data-diff="hard"] .key .code,body[data-diff="hard"] .key kbd{visibility:hidden}