/* Layout: a fixed camera "world" holds the vault; every screen (gate, lobby, HUD, overlays) floats above it.
   Palette: green-black hotel wall, brushed steel, brass gold, emergency red. */
:root {
  --ink: #090b0a;
  --wall: #121815;
  --wall-hi: #1c2420;
  --steel-hi: #c9d0cd;
  --steel: #59625f;
  --steel-lo: #1d2221;
  --bone: #eee5d4;
  --muted: #8f9792;
  --brass: #e6b75e;
  --brass-hi: #f6d48a;
  --brass-deep: #9b7130;
  --glow: #fff1cf;
  --alarm: #ff2a1a;
  --ok: #5fd08f;
  --glass: rgba(10, 13, 12, .74);
  --line: rgba(230, 183, 94, .22);
  /* fallbacks are narrow system fonts (iOS: Futura / Avenir Next Condensed, Android: Roboto Condensed via sans-serif-condensed),
     so a slow font download never spills text out of its box */
  --font-display: "Big Shoulders Stencil Display", Impact, "Futura-CondensedExtraBold", "AvenirNextCondensed-Heavy", "Arial Narrow", sans-serif-condensed, sans-serif;
  --font-body: "Barlow Condensed", "Roboto Condensed", "AvenirNextCondensed-Medium", "Arial Narrow", sans-serif-condensed, sans-serif;
  --font-mono: "Share Tech Mono", Consolas, ui-monospace, monospace;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.label {
  margin: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow {
  margin: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--alarm);
}

/* ---------- Screen-space backdrop ---------- */
.scene { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wall {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, var(--wall-hi), transparent 70%),
    repeating-linear-gradient(45deg, rgba(230, 183, 94, .028) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(230, 183, 94, .028) 0 1px, transparent 1px 26px),
    var(--wall);
}
.alarm {
  position: absolute; top: -20%; right: -20%; bottom: -20%; left: -20%;
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 42, 26, .38), transparent 40%),
    radial-gradient(circle at 10% 95%, rgba(255, 42, 26, .14), transparent 45%);
  mix-blend-mode: screen;
  animation: alarm 2.6s ease-in-out infinite;
}
@keyframes alarm { 0%, 100% { opacity: .25; } 45% { opacity: .95; } 60% { opacity: .7; } }
.vignette { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, .85) 100%); }
.grain {
  position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%;
  opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .6s steps(3) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
.silhouette {
  position: absolute; bottom: -10vh; left: 0;
  width: 38vw; height: 85vh;
  background: radial-gradient(ellipse 40% 50% at 50% 55%, rgba(0, 0, 0, .85), transparent 70%);
  filter: blur(18px);
  transform: translateX(-60vw);
}

/* ---------- Photo scenes ----------
   Both scenes are generated photographs (img/*.webp). game.js lays them out and moves the camera;
   the door geometry below is measured from the photos. */
.hall, .vault-scene { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: #050606; }
.hall { z-index: 1; transition: filter .6s ease-out; }
/* transparent: if a piece of the vault is not drawn yet at the hand-over, the identical corridor shows through instead of black */
.vault-scene { z-index: 2; opacity: 0; visibility: hidden; background: transparent; transition: opacity .7s ease-out, visibility 0s .7s, filter .6s ease-out; }
/* during the walk down the corridor the vault is already laid out and drawn, just invisible */
.vault-scene.warm { visibility: visible; opacity: .002; transition: none; }
.vault-scene.on { opacity: 1; visibility: visible; transition: opacity .7s ease-out, visibility 0s, filter .6s ease-out; }
body.dimmed .vault-scene, body.dimmed .hud { filter: brightness(.3) blur(2px); }
/* phones: no blur over the big photo layers (it needs a huge offscreen copy) */
@media (pointer: coarse) { body.dimmed .vault-scene, body.dimmed .hud { filter: brightness(.3); } }
/* once the camera is inside the close-up, the corridor stops rendering behind it */
.hall.behind { visibility: hidden; }

.hall-img {
  position: absolute; left: 0; top: 0;
  background: url(../img/hall.webp) center / 100% 100% no-repeat;
  transform-origin: var(--ox, 50%) var(--oy, 49%);
  will-change: transform, filter;
}
.hall-img { scale: 1.035; }
/* lobby: the camera breathes (slow zoom in and out) and drifts a little, like someone standing there */
.hall.idle .hall-img { animation: breathe 5.6s ease-in-out infinite, drift 23s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { scale: 1.035; } 45% { scale: 1.047; } }
@keyframes drift {
  0%, 100% { translate: 0 0; }
  20% { translate: -.45vw .25vh; }
  45% { translate: .3vw -.35vh; }
  70% { translate: .5vw .2vh; }
  85% { translate: -.2vw -.15vh; }
}
/* walking down the corridor: the breathing freezes where it is and the camera moves in */
.hall.idle .hall-img.dive, .hall-img.dive {
  animation: breathe 5.6s ease-in-out infinite paused, drift 23s ease-in-out infinite paused, dive var(--dive, 3s) cubic-bezier(.42, 0, .3, 1) forwards;
}
@keyframes dive { from { transform: scale(1); } to { transform: scale(var(--k, 5)); } }
.hall.flying { animation: steps-bob .52s ease-in-out var(--steps, 5); }
@keyframes steps-bob { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px) rotate(-.15deg); } 70% { transform: translateY(2px) rotate(.12deg); } }
/* the red emergency light on the left wall pulses, the ceiling lights flicker */
.hall-alarm {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: radial-gradient(ellipse 22% 30% at 30% 30%, rgba(255, 30, 20, .45), transparent 70%);
  mix-blend-mode: screen;
  animation: alarm 2.4s ease-in-out infinite;
}
.hall-haze {
  position: absolute; top: -10%; right: -10%; bottom: -10%; left: -10%; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 18% at 50% 10%, rgba(255, 244, 214, .18), transparent 70%),
    radial-gradient(ellipse 60% 25% at 40% 70%, rgba(255, 255, 255, .05), transparent 70%),
    radial-gradient(ellipse 50% 20% at 70% 55%, rgba(255, 255, 255, .04), transparent 70%);
  animation: haze 18s ease-in-out infinite alternate, flick 7s steps(1) infinite;
}
@keyframes haze { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
@keyframes flick { 0%, 100% { opacity: 1; } 31% { opacity: .4; } 32% { opacity: 1; } 34% { opacity: .55; } 35% { opacity: 1; } }

/* The close-up is a 4K upscale of the corridor photo's vault region, so the dive can hand over seamlessly.
   The open vault, the door disc and the wheel are cut from edits of that same image (one pixel grid, 4096 × 2313). */
.vstage { position: absolute; left: 0; top: 0; width: 4096px; height: 2313px; transform-origin: 0 0; will-change: transform; }
.vbase { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../img/closeup.webp) center / 100% 100% no-repeat; }
.vinside { position: absolute; border-radius: 50%; background: url(../img/inside-full.webp) center / 100% 100% no-repeat; visibility: hidden; }
/* the inside only exists once the door starts to move: before that the close-up's own closed door is underneath */
.vault-scene.swing .vinside, .vault-scene.opened .vinside { visibility: visible; }
.vinside.few { background-image: url(../img/inside-few.webp); }
/* over the opening only (placed by game.js): the door's shadow on the hinge side and warm light from inside.
   Both are ready from the start and only fade in, so nothing has to be re-drawn while the door swings. */
.vshade, .vlight { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; will-change: opacity; }
.vshade {
  box-shadow: inset 150px 0 170px -40px rgba(0, 0, 0, .82), inset 0 0 90px rgba(0, 0, 0, .5);
  transition: opacity 1.4s ease-out .5s;
}
.vlight {
  background: radial-gradient(circle at 52% 40%, rgba(255, 228, 175, .24), rgba(255, 210, 140, .07) 45%, transparent 70%);
  transition: opacity 1.6s ease-out .6s;
}
.vault-scene.opened .vshade, .vault-scene.opened .vlight { opacity: 1; }

/* the swinging door disc (placed by game.js) */
.vhinge { position: absolute; perspective: 4200px; }
.vdoor {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
  transform-origin: 0 50%;
  /* flat while you work the dials (one picture, cheap on phones); 3D with its steel rim only while it swings */
  transform-style: flat;
  transition: transform 2.8s cubic-bezier(.5, 0, .12, 1);
}
.vault-scene.swing .vdoor { transform-style: preserve-3d; }
.vault-scene.opened .vdoor { transform: rotateY(-100deg); }
.door-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: url(../img/door.webp) center / 100% 100% no-repeat; }
/* only while it swings: hidden back faces make the browser give every part its own layer */
.vault-scene.swing .door-img, .vault-scene.swing .door-handle, .vault-scene.swing .locks, .vault-scene.swing .plate { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* the door's thickness: 36 narrow steel segments standing on the edge, 96px deep (placed by game.js);
   lit from the upper right, polished at the front edge */
.rim, .door-back { display: none; }
.vault-scene.swing .rim, .vault-scene.swing .door-back { display: block; }
.rim {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: 96px; margin: -48px 0 0 calc(var(--w) / -2);
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) translateZ(-48px) rotateX(90deg);
  background: linear-gradient(to top,
    hsl(150 5% calc(var(--l) * 78%)) 0%, hsl(150 4% calc(var(--l) * 50%)) 14%,
    hsl(150 4% calc(var(--l) * 30%)) 55%, hsl(150 5% calc(var(--l) * 16%)) 100%);
}
/* the real inner side of the door, turned to face backwards so it reads correctly when the door is open */
.door-back {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
  background: url(../img/door-back.webp) center / 100% 100% no-repeat;
  transform: translateZ(-96px) rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* the spoked handle wheel, cut out of the photo, turns over clean steel; the shadow stays put while it spins */
.door-handle { position: absolute; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
.wheel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: url(../img/wheel.webp) center / 100% 100% no-repeat;
  /* the cut-out is round and centred on the hub; scaleY restores the camera's slight perspective,
     so the wheel turns in its own plane around its true centre */
  transform: scaleY(1.0203) rotate(0deg);
  transition: transform 1.7s cubic-bezier(.45, 0, .2, 1);
}
.vault-scene.spin-handle .wheel { transform: scaleY(1.0203) rotate(-432deg); }

/* the brass name plate above the dials: the round's vault number, engraved (placed by game.js) */
.plate { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.plate span {
  font-family: var(--font-body); font-weight: 700; font-size: var(--pf, 46px); line-height: 1;
  letter-spacing: .16em; text-indent: .16em; white-space: nowrap;
  /* cut into the brass: dark recess, light catching the lower lip */
  color: rgba(54, 38, 16, .8);
  text-shadow: 0 .045em 0 rgba(255, 238, 196, .5), 0 -.03em .02em rgba(20, 12, 2, .35);
}
.mini-plate { filter: brightness(.82) saturate(.9); }

/* corridor: the same dials, small, on the vault in the photo */
.mini-dial { position: absolute; border-radius: 50%; filter: brightness(.82) saturate(.9); }
.mini-dial .dial { box-shadow: 0 2px 4px rgba(0, 0, 0, .7); transition: none; }

/* four dials in the door's recessed panel (fractions measured from the photo) */
.locks { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.lock { position: absolute; }
.dial-wrap {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .25s cubic-bezier(.3, 0, .2, 1), filter .5s;
}
.dial-wrap:focus, .dial-wrap:focus-visible { outline: none; }
.lock.active .dial-wrap { cursor: grab; }
.dial-wrap.grabbing { cursor: grabbing; }
.lock.idle .dial-wrap { filter: brightness(.7) saturate(.8); }

/* the outer ring turns; it is the dial photo with engraved numbers on top */
.dial {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
  background: url(../img/dial.webp) center / 100% 100% no-repeat;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .75), 0 3px 4px rgba(0, 0, 0, .6), 0 0 0 2px rgba(0, 0, 0, .7);
  transition: transform 70ms ease-out, box-shadow .25s;
}
.dial.spin { transition: transform .62s cubic-bezier(.3, .1, .2, 1); }
.dial.spin-win { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.dial.instant { transition: none; }
.dial svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.tick { stroke: #2b2f2e; stroke-width: 1.6; }
.tick.major { stroke: #161918; stroke-width: 3; }
.num { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 19px; font-weight: 700; fill: #1d2120; }

/* the centre display stands still while the ring turns (a static crop of the same photo) */
.display {
  position: absolute; left: 50%; top: 50%; width: 36.1%; height: 36.1%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: url(../img/dial.webp) center / 277% 277% no-repeat;
  pointer-events: none;
}
/* the glass: tint for open (green) or wrong (red), digits, then the reflection on top */
.display::before {
  content: ""; position: absolute; top: 16.5%; right: 16.5%; bottom: 16.5%; left: 16.5%; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--glass, transparent) 0, transparent 78%);
  opacity: 0; transition: opacity .45s, background .45s;
}
.display::after {
  content: ""; position: absolute; top: 16.5%; right: 16.5%; bottom: 16.5%; left: 16.5%; border-radius: 50%;
  background:
    radial-gradient(ellipse 55% 35% at 36% 24%, rgba(255, 255, 255, .28), transparent 70%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, .55) 100%);
}
.seg { position: absolute; top: 16.5%; right: 16.5%; bottom: 16.5%; left: 16.5%; width: 67%; height: 67%; overflow: visible; transition: opacity .6s ease-out; }
.seg .off { fill: rgba(255, 176, 60, .07); }
.seg .on { fill: #ffb43c; filter: drop-shadow(0 0 1.6px rgba(255, 170, 50, .95)) drop-shadow(0 0 5px rgba(255, 140, 20, .55)); }
.lock.idle .seg .on { fill: rgba(255, 176, 60, .07); filter: none; }

/* cracked: the dial clicks in and sinks into the door, the glass turns green and the number fades out */
.lock.done .display::before { --glass: rgba(60, 255, 140, .95); opacity: 1; }
.lock.done .seg { opacity: 0; }
.lock.done .dial-wrap { transform: scale(.955); }
.lock.done .dial { box-shadow: 0 3px 6px rgba(0, 0, 0, .8), 0 0 0 2px rgba(0, 0, 0, .8), inset 0 0 0 999px rgba(0, 0, 0, .06); }
.lock.cracked .dial-wrap { animation: clunk .5s cubic-bezier(.3, 0, .2, 1); }
@keyframes clunk { 0% { transform: scale(1); } 30% { transform: scale(.92) rotate(-1.5deg); } 55% { transform: scale(.97) rotate(.6deg); } 100% { transform: scale(.955); } }
.lock.cracked .display::before { animation: glass-flash .7s ease-out; }
@keyframes glass-flash { 0% { opacity: 1; filter: brightness(2.2); } 100% { opacity: 1; filter: brightness(1); } }
/* a glint of light sweeps across the chrome once */
.glint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.glint::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.lock.cracked .glint::before { animation: glint .9s ease-out .1s; }
@keyframes glint { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }

/* wrong number: the glass turns red */
.lock.wrong .display::before { --glass: rgba(255, 30, 20, .95); opacity: 1; }
.lock.wrong .seg .on { fill: #ff5040; filter: drop-shadow(0 0 2px rgba(255, 40, 20, .95)); }

/* speed lines during the dive (screen space) */
.speed {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 236, 200, .12) 0 .5deg, transparent .5deg 5deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 20%, #000 75%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 20%, #000 75%);
}
.speed.flying { animation: speed var(--fly, 3.6s) ease-in-out forwards; }
@keyframes speed { 0% { opacity: 0; } 40% { opacity: .9; } 75% { opacity: .5; } 100% { opacity: 0; } }

/* ---------- Cinematic layers ---------- */
.blackout { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 6; background: #000; pointer-events: none; }
/* scene cuts: black over everything, overlays included; while black, resets happen without transitions */
body.no-anim *, body.no-anim *::before, body.no-anim *::after { transition: none !important; }
.fader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 95; background: #000; opacity: 0; pointer-events: none; }
.blackout.lights-on { animation: lights 2.6s forwards; }
@keyframes lights {
  0% { opacity: 1; } 18% { opacity: .15; } 22% { opacity: .95; } 30% { opacity: .1; } 33% { opacity: .75; }
  48% { opacity: 0; } 100% { opacity: 0; }
}
.letterbox {
  position: fixed; left: 0; right: 0; z-index: 25; height: 11vh;
  background: #000; pointer-events: none;
  transform: scaleY(0);
  transition: transform .7s cubic-bezier(.65, 0, .25, 1);
}
.letterbox.top { top: 0; transform-origin: top; }
.letterbox.bottom { bottom: 0; transform-origin: bottom; }
body.cinema .letterbox { transform: scaleY(1); }
.flash {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 42, 26, .15), rgba(140, 0, 0, .7));
}

/* ---------- 1 · Elevator ---------- */
.gate { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; display: grid; place-items: center; overflow: hidden; }
.gate-door {
  position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden;
  background: #0b0d0c;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, .55);
}
.gate-door.l { left: 0; }
.gate-door.r { right: 0; }
.door-photo { position: absolute; top: 0; width: 100vw; height: 100%; background: url(../img/elevator.webp) center / cover no-repeat; filter: brightness(.82); }
.gate-door.l .door-photo { left: 0; }
.gate-door.r .door-photo { right: 0; }
.gate-door.l::after, .gate-door.r::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(90deg, #050606, #1d2221);
}
.gate-door.l::after { right: 0; }
.gate-door.r::after { left: 0; }
.door-shine {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 46%, transparent 62%);
  background-size: 300% 100%;
  animation: shine-door 7s ease-in-out infinite;
}
@keyframes shine-door { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
/* opening like a real lift: the doors creep off, run, then slow down again and leave the picture completely
   (past the edge, so not even their shadow stays) */
.gate.open .gate-door.l, .gate.open .landing-door.l { animation: lift-open-l 2.6s forwards; }
.gate.open .gate-door.r, .gate.open .landing-door.r { animation: lift-open-r 2.6s forwards; }
.gate.open .landing-door { animation-delay: .035s; }   /* coupled to the car doors, trailing by a few centimetres */
@keyframes lift-open-l {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(.6, 0, .85, .21); }
  20% { transform: translateX(-7%); animation-timing-function: linear; }
  62% { transform: translateX(-84%); animation-timing-function: cubic-bezier(.2, .5, .4, 1); }
  100% { transform: translateX(-112%); }
}
@keyframes lift-open-r {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(.6, 0, .85, .21); }
  20% { transform: translateX(7%); animation-timing-function: linear; }
  62% { transform: translateX(84%); animation-timing-function: cubic-bezier(.2, .5, .4, 1); }
  100% { transform: translateX(112%); }
}
/* the car doors cast only a soft, short shadow onto the landing doors behind them */
.gate.open .gate-door.l { box-shadow: inset 0 0 140px rgba(0, 0, 0, .55), 8px 0 12px -6px rgba(0, 0, 0, .55); }
.gate.open .gate-door.r { box-shadow: inset 0 0 140px rgba(0, 0, 0, .55), -8px 0 12px -6px rgba(0, 0, 0, .55); }
/* landing doors: same panels, set back a few centimetres (slightly smaller, darker) and following with a lag */
.landing-door {
  position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden;
  background: #060707;
  scale: .985;
}
.landing-door.l { left: 0; transform-origin: 100% 50%; }
.landing-door.r { right: 0; transform-origin: 0 50%; }
.landing-door .door-photo { filter: brightness(.62) saturate(.85); }
/* the same door again, a little darker, and darker still towards the outside */
.landing-door::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.landing-door.l::after { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .05)); }
.landing-door.r::after { background: linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .05)); }
.gate.riding { animation: ride .11s linear infinite; }
@keyframes ride { 0% { transform: translate(0, 0); } 50% { transform: translate(.6px, 1px); } 100% { transform: translate(-.6px, 0); } }

.elev-frame {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  box-shadow: inset 0 0 0 20px #0f1211, inset 0 0 0 24px var(--brass-deep), inset 0 0 0 27px #050606, inset 0 0 60px 30px rgba(0, 0, 0, .7);
  transition: transform 2.8s cubic-bezier(.5, 0, .2, 1) .8s, opacity 1.4s ease-in 1.6s;
}
.gate.open .elev-frame { transform: scale(1.45); opacity: 0; }
.elev-header {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  padding: 10px 22px;
  background: linear-gradient(180deg, #2a1d0c, #0e0a05);
  border: 2px solid var(--brass-deep); border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.elev-lamp {
  width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid #3a2a12;
  transition: border-color .2s, filter .2s;
}
.gate.arrived .elev-lamp { border-top-color: var(--brass-hi); filter: drop-shadow(0 0 10px var(--brass)); }
.elev-floor {
  min-width: 64px; text-align: center;
  font-family: var(--font-mono); font-size: 30px; line-height: 1;
  color: #ff5a3c; text-shadow: 0 0 10px rgba(255, 60, 30, .8);
}
.elev-dir { font-size: 16px; color: #5a2a26; transition: color .2s; }
.gate.riding .elev-dir { color: #ff5a3c; text-shadow: 0 0 8px rgba(255, 60, 30, .8); animation: blink .6s steps(1) infinite; }

.gate-center {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 22px;
  text-align: center;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  transition: opacity .5s ease-in, transform .6s ease-in;
}
.gate.riding .gate-center, .gate.arrived .gate-center, .gate.open .gate-center { opacity: 0; transform: scale(.96); pointer-events: none; }
.neon {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(64px, 15vw, 150px); line-height: .86; letter-spacing: .02em;
  color: var(--glow);
  text-shadow: 0 0 6px rgba(255, 214, 140, .9), 0 0 22px rgba(230, 183, 94, .75), 0 0 60px rgba(230, 183, 94, .45);
}
.flicker { animation: flicker 4.5s infinite steps(1); }
@keyframes flicker {
  0%, 100% { opacity: 1; } 7% { opacity: .25; } 8% { opacity: 1; }
  42% { opacity: .15; } 43% { opacity: .9; } 44% { opacity: .2; } 46% { opacity: 1; }
  79% { opacity: .4; } 80% { opacity: 1; }
}
.gate-btn {
  position: relative;
  width: 150px; height: 150px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #2f3634, #0c0f0e 70%);
  box-shadow: 0 0 0 4px var(--brass-deep), 0 0 0 7px #0b0d0c, 0 0 0 9px rgba(230, 183, 94, .5), 0 0 50px rgba(230, 183, 94, .35), inset 0 2px 0 rgba(255, 255, 255, .1);
  transition: transform .2s, box-shadow .2s;
}
.gate-btn:hover { transform: scale(1.05); box-shadow: 0 0 0 4px var(--brass), 0 0 0 7px #0b0d0c, 0 0 0 9px var(--brass), 0 0 80px rgba(230, 183, 94, .55), inset 0 2px 0 rgba(255, 255, 255, .1); }
.gate-btn::after {
  content: ""; position: absolute; top: -9px; right: -9px; bottom: -9px; left: -9px; border-radius: 50%;
  border: 2px solid var(--brass);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.gate-ring {
  position: absolute; top: 12px; right: 12px; bottom: 12px; left: 12px; border-radius: 50%;
  border: 2px dashed rgba(230, 183, 94, .6);
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.gate-label {
  position: relative;
  font-family: var(--font-display); font-weight: 900; font-size: 34px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--glow); text-shadow: 0 0 14px rgba(230, 183, 94, .7);
}
.gate-round { display: grid; justify-items: center; gap: 8px; }
.gate-hint { margin: 0; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Round countdown (gate + lobby) */
.clock { display: flex; gap: 8px; }
.clock span {
  display: grid; justify-items: center; min-width: 58px;
  padding: 6px 8px 4px; border-radius: 4px;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--line);
}
.clock b { font-family: var(--font-mono); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--glow); font-variant-numeric: tabular-nums; }
.clock i { font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------- 2 · Lobby ---------- */
.lobby {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
  display: grid;
  grid-template-columns: minmax(280px, 370px) 1fr minmax(280px, 370px);
  grid-template-rows: auto 1fr auto;
  gap: 18px 28px;
  padding-block: 18px 26px;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
  pointer-events: none;
}
.lobby > * { pointer-events: auto; }
.lobby-spacer { display: none; }
.lobby-top {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 16px;
}
.logo {
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--glow); text-shadow: 0 0 16px rgba(230, 183, 94, .6);
}
.round {
  --c: var(--ok); --bg: rgba(95, 208, 143, .1); --bd: rgba(95, 208, 143, .35);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--bd); color: var(--c);
}
.round.soon { --c: var(--brass); --bg: rgba(230, 183, 94, .1); --bd: rgba(230, 183, 94, .4); }
.round.closed, .round.none { --c: #ff7a6b; --bg: rgba(255, 42, 26, .1); --bd: rgba(255, 42, 26, .45); }
.round .live-dot { background: var(--c); box-shadow: 0 0 8px var(--c); }
.round.closed .live-dot, .round.none .live-dot { animation: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 1.2s steps(1) infinite; }
.panel {
  position: relative;
  align-self: center;
  display: grid; gap: 14px;
  padding: 24px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}
.panel::before, .panel::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--brass);
}
.panel::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.lobby-left { grid-column: 1; grid-row: 2; align-self: center; display: grid; gap: 12px; }
.panel-prize { grid-column: 3; grid-row: 2; }
.panel h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: .95; text-transform: uppercase;
  text-wrap: balance;
}
.panel h3 { margin: 4px 0 0; font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.story { margin: 0; color: var(--muted); font-size: 17px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: baseline; }
.steps li::before {
  content: counter(s, decimal-leading-zero); grid-row: span 2;
  font-family: var(--font-mono); font-size: 15px; color: var(--brass);
}
.steps b { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; }
.steps span { font-size: 16px; color: var(--muted); line-height: 1.3; }
.jackpot {
  margin: -6px 0 4px;
  font-family: var(--font-display); font-weight: 900; font-size: 92px; line-height: .9;
  color: var(--glow);
  text-shadow: 0 0 10px rgba(255, 214, 140, .8), 0 0 40px rgba(230, 183, 94, .55);
}
.board { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ranks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ranks li {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center;
  padding: 8px 12px; border-radius: 4px;
  background: rgba(255, 255, 255, .04);
  font-size: 18px;
}
.ranks .pos { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--muted); }
.ranks li:first-child { background: rgba(230, 183, 94, .12); box-shadow: inset 0 0 0 1px rgba(230, 183, 94, .35); }
.ranks li:first-child .pos { color: var(--brass); }
.ranks .t { font-family: var(--font-mono); color: var(--glow); }
.ranks li.you { box-shadow: inset 0 0 0 1px rgba(95, 208, 143, .45); }

.your-best { margin: 0; display: flex; justify-content: space-between; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.your-best b { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; color: var(--bone); }
.demo-note { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(143, 151, 146, .6); }
.lobby-cta {
  grid-column: 1 / -1; grid-row: 3; justify-self: center;
  position: relative;
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 18px 28px 16px;
  background: rgba(8, 10, 9, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.lobby-cta::before, .lobby-cta::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--brass); }
.lobby-cta::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.lobby-cta::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.lobby-cta p { margin: 0; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #b9bfbb; }

/* lobby enter / leave */
.lobby .lobby-top, .lobby .panel, .lobby .lobby-cta, .lobby .live-box { opacity: 0; transition: opacity .6s ease-out, transform .7s cubic-bezier(.2, .8, .2, 1); }
.lobby .live-box { transform: translateX(-50px); }
.lobby.show .live-box { opacity: 1; transform: none; transition-delay: .25s; }
.lobby .lobby-top { transform: translateY(-20px); }
.lobby .panel-story { transform: translateX(-50px); }
.lobby .panel-prize { transform: translateX(50px); }
.lobby .lobby-cta { transform: translateY(30px); }
.lobby.show .lobby-top, .lobby.show .panel, .lobby.show .lobby-cta { opacity: 1; transform: none; }
.lobby.show .panel-story { transition-delay: .1s; }
.lobby.show .panel-prize { transition-delay: .2s; }
.lobby.show .lobby-cta { transition-delay: .35s; }

/* ---------- Buttons ---------- */
.btn-primary {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #1b1205;
  padding: 14px 28px; border-radius: 6px;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 45%, var(--brass-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 10px 30px rgba(230, 183, 94, .22);
  transition: transform .08s, filter .15s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(2px); }
.btn-primary:disabled { filter: grayscale(.8) brightness(.55); cursor: default; transform: none; }
.btn-xl {
  position: relative; overflow: hidden;
  font-size: 34px; padding: 18px 48px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .6), 0 14px 50px rgba(230, 183, 94, .4);
}
.btn-xl::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.btn-ghost {
  appearance: none; cursor: pointer;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(238, 229, 212, .35); border-radius: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 22px;
}
.btn-ghost:hover { border-color: var(--bone); }
.mute {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(238, 229, 212, .25);
  background: rgba(0, 0, 0, .4); cursor: pointer;
}
.mute svg { width: 22px; height: 22px; }
.mute .off, .mute[aria-pressed="true"] .on { display: none; }
.mute[aria-pressed="true"] .off { display: block; }

/* ---------- 3 · HUD ---------- */
.hud { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .5s, filter .6s; }
.hud.show { opacity: 1; }
.hud > * { pointer-events: auto; }
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-block: 16px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent);
}
.hud-top .mute { justify-self: end; }
.pips { margin: 0; padding: 0; list-style: none; display: flex; gap: 6px; }
.pips li {
  min-width: 38px; padding: 4px 6px; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .12em;
  border-radius: 3px; border: 1px solid rgba(238, 229, 212, .15);
  background: rgba(0, 0, 0, .5); color: var(--muted);
}
.pips li.active { color: var(--bone); border-color: var(--alarm); box-shadow: 0 0 12px rgba(255, 42, 26, .5); }
.pips li.done { color: #0b1a10; background: var(--ok); border-color: var(--ok); }
.timer {
  position: relative;
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 26px 10px;
  background: rgba(8, 10, 9, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
.timer::before, .timer::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--brass); }
.timer::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.timer::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.timer .label { color: #b9bfbb; }
.timer .value { font-family: var(--font-mono); font-size: 48px; line-height: 1; color: var(--glow); text-shadow: 0 0 16px rgba(230, 183, 94, .55); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .timer .value { font-size: 38px; } }
.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; justify-items: center; gap: 10px;
  padding-block: 40px max(18px, env(safe-area-inset-bottom, 0px));
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent);
}
.confirm { width: min(100%, 380px); }
/* Lobby | Confirm | Restart */
.hud-actions { display: grid; grid-template-columns: auto minmax(0, 380px) auto; align-items: stretch; justify-content: center; gap: 12px; width: min(100%, 680px); }
.hud-actions .confirm { width: 100%; }
.hud-side {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 58px; padding: 0 20px; border-radius: 6px;
  border: 1px solid rgba(238, 229, 212, .26); background: rgba(8, 10, 9, .74); color: var(--bone);
  font: 800 17px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s, transform .08s ease-out, opacity .35s;
  touch-action: manipulation;
}
.hud-side svg { width: 20px; height: 20px; flex: none; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
@media (min-width: 600px) { .hud-side { width: 152px; } } /* fixed width: "Sure?" never shifts Confirm */
.hud-side:hover:not(:disabled) { border-color: var(--brass); color: var(--glow); box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 18px rgba(230, 183, 94, .18); }
#btn-hud-lobby:hover:not(:disabled) svg { transform: translateX(-3px); }
#btn-hud-restart:hover:not(:disabled) svg { transform: rotate(-60deg); }
.hud-side:active:not(:disabled) { transform: translateY(2px) scale(.98); }
.hud-side:disabled { opacity: .3; cursor: default; }
/* first tap while the clock runs: asks for a second one */
.hud-side.armed { border-color: var(--alarm); color: #ffc4ba; background: rgba(70, 10, 6, .82); animation: side-armed .9s ease-in-out infinite alternate; }
@keyframes side-armed { from { box-shadow: 0 0 0 0 rgba(255, 42, 26, .35); } to { box-shadow: 0 0 0 5px rgba(255, 42, 26, 0), 0 0 22px rgba(255, 42, 26, .35); } }
.hud-hint { margin: 0; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #ffb3a8; text-align: center; animation: fade .25s ease-out both; }
/* the bottom bar rises in with the HUD */
.hud .hud-bottom { transform: translateY(18px); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.hud.show .hud-bottom { transform: none; }
@media (max-width: 599px) {
  .hud-actions { gap: 8px; }
  .hud-side { width: 58px; padding: 0; }
  .hud-side span { display: none; }
}
.controls { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
@media (hover: none) { .controls .kbd { display: none; } }
.debug { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--alarm); }

/* ---------- Countdown ---------- */
.countdown {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; pointer-events: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(120px, 40vw, 260px);
  text-transform: uppercase;
  color: var(--bone); text-shadow: 0 0 40px rgba(255, 42, 26, .6), 0 4px 0 #000;
}
.countdown.go { animation: count .7s ease-out both; }
@keyframes count { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.9); opacity: 0; } }

/* ---------- Game over & win ---------- */
/* NEW RECORD! in the middle of the screen (same neon type as the title) */
/* drawn once, invisibly, when a win starts (armed); showing it then only moves and fades it, no re-drawing */
.record { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 46; display: none; place-items: center; pointer-events: none; padding: 0 var(--gutter-r) 0 var(--gutter-l); }
.record.armed { display: grid; }
.record span {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; text-align: center;
  font-size: clamp(64px, min(15vw, 22vh), 190px); line-height: .9; letter-spacing: .02em;
  color: var(--glow);
  text-shadow: 0 0 8px rgba(255, 214, 140, .95), 0 0 26px rgba(230, 183, 94, .85), 0 0 56px rgba(230, 183, 94, .55), 0 5px 0 #3a2508;
  opacity: 0; will-change: transform, opacity;
  /* a soft dark halo behind the letters keeps them readable over the bright vault */
  padding: .25em .5em; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 60%, transparent);
}
.record.go span { animation: record-in 2.7s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes record-in {
  0% { opacity: 0; transform: scale(2.3); }
  10% { opacity: 1; transform: scale(.93); }
  16% { transform: scale(1.04); }
  22% { transform: scale(1); }
  80% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.1) translateY(-6%); }
}
@media (prefers-reduced-motion: reduce) { .record.go span { animation-name: record-fade; } }
@keyframes record-fade { 0%, 100% { opacity: 0; } 10%, 80% { opacity: 1; } }
#blood { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60;
  display: grid; place-content: center; place-content: safe center; justify-items: center; gap: 18px;
  text-align: center;
  padding-block: 24px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  animation: fade .35s ease-out both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.over { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .3), rgba(0, 0, 0, .6)); }
.over h2 { margin: 0; display: grid; gap: 6px; font-family: var(--font-display); text-transform: uppercase; line-height: .9; }
.over .wrong {
  font-size: clamp(22px, min(8vw, 8vh), 56px); font-weight: 800; letter-spacing: .08em;
  color: var(--bone); text-shadow: 0 2px 0 #000, 0 0 24px rgba(0, 0, 0, .9);
}
.over .gameover {
  font-size: clamp(56px, min(22vw, 24vh), 168px); font-weight: 900;
  color: var(--bone);
  text-shadow: 0 4px 0 #2a0000, 0 0 40px rgba(255, 42, 26, .65), 0 0 2px #000;
  animation: slam .5s cubic-bezier(.2, 1.6, .4, 1) .1s both;
}
@keyframes slam { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
.detail { margin: 0; font-size: 18px; text-wrap: balance; color: var(--bone); text-shadow: 0 1px 2px #000, 0 0 12px #000; }
@media (min-width: 600px) { .detail { white-space: nowrap; } }
.win {
  place-content: end center; gap: 10px;
  padding-bottom: max(5vh, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 32%, transparent 58%);
}
.win .win-time { font-size: clamp(44px, 9vw, 76px); }
.win .win-result { font-size: 18px; }
.win .eyebrow { font-size: 18px; }
.win .eyebrow { font-size: 22px; color: var(--brass); }
.win-time {
  margin: 0;
  font-family: var(--font-mono); font-size: clamp(64px, 18vw, 130px); line-height: 1;
  color: var(--glow); text-shadow: 0 0 30px rgba(230, 183, 94, .7);
}
.win-combo { margin: 0; font-family: var(--font-mono); font-size: 22px; letter-spacing: .1em; color: var(--brass); }
.win-best { margin: 0; font-size: 16px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.win-best.is-best { color: var(--ok); }

/* ---------- Player sign-up ---------- */
.register { z-index: 70; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.reg-card { width: min(100%, 440px); text-align: left; gap: 16px; animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.reg-card h2 { font-size: 40px; }
.reg-sub, .reg-note { margin: 0; font-size: 16px; color: var(--muted); }
.reg-note { font-size: 14px; }
.reg-card .actions { justify-content: flex-start; }
.field { display: grid; gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.input-wrap {
  display: flex; align-items: center;
  border: 1px solid rgba(238, 229, 212, .25); border-radius: 4px;
  background: rgba(0, 0, 0, .55);
  transition: border-color .15s, box-shadow .15s;
}
.input-wrap:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(230, 183, 94, .2); }
.input-wrap.invalid { border-color: var(--alarm); box-shadow: 0 0 0 3px rgba(255, 42, 26, .18); }
.prefix { padding-left: 14px; font-family: var(--font-mono); font-size: 22px; color: var(--brass); }
.input-wrap input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-mono); font-size: 22px; color: var(--glow);
}
.prefix + input { padding-left: 4px; }
.input-wrap input::placeholder { color: rgba(143, 151, 146, .55); }
.field-error { margin: 0; min-height: 1.2em; font-size: 15px; color: var(--alarm); }
.lobby-cta .player-line { margin: 0; font-size: 17px; letter-spacing: .06em; text-transform: none; color: #c9cec9; }
.player-line b { font-family: var(--font-mono); font-weight: 400; color: var(--glow); }
.link {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  font-size: 15px; letter-spacing: .08em; color: var(--brass); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Leaderboard search ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a player: first name (opens their stats) over the @name (opens Instagram) */
.who { display: grid; justify-items: start; min-width: 0; line-height: 1.15; }
.who .name {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer; max-width: 100%;
  font: 600 18px/1.15 var(--font-body); color: var(--bone); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who .ig {
  max-width: 100%;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who .ig:hover, .who .ig:focus-visible { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.rank-row { cursor: pointer; transition: background .15s, box-shadow .15s; }
.rank-row:hover { background: rgba(230, 183, 94, .1); }
.rank-row:hover .name { color: var(--glow); }
.ranks li.you .who .name { color: var(--ok); }
.ranks li.gap { margin-top: 8px; position: relative; }
.ranks li.gap::before { content: "\00b7\00b7\00b7"; position: absolute; top: -13px; left: 0; right: 0; text-align: center; font-size: 12px; line-height: 1; color: var(--muted); }
.search {
  display: flex; align-items: center;
  border: 1px solid rgba(238, 229, 212, .2); border-radius: 4px;
  background: rgba(0, 0, 0, .45);
}
.search:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(230, 183, 94, .18); }
.search-at { padding-left: 12px; font-family: var(--font-mono); color: var(--brass); }
.search input {
  flex: 1; min-width: 0; padding: 9px 12px 9px 4px;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-mono); font-size: 16px; color: var(--glow);
}
.search input::placeholder { color: rgba(143, 151, 146, .6); }
.results li { background: rgba(230, 183, 94, .06); }
.results li:first-child { background: rgba(230, 183, 94, .06); box-shadow: none; }
.results li:first-child .pos { color: var(--muted); }
.search-empty { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- Sign-up warning ---------- */
.reg-warning {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 4px;
  background: rgba(255, 42, 26, .1);
  border: 1px solid rgba(255, 42, 26, .55);
  color: #ffb3a8;
}
.reg-warning svg { width: 26px; height: 26px; color: var(--alarm); }
.reg-warning p { margin: 0; font-size: 16px; line-height: 1.35; }
.reg-warning b { color: #fff; }

/* ---------- Sign-up confirmations ---------- */
.checks { display: grid; gap: 10px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; font-size: 16px; line-height: 1.35; color: var(--bone); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box {
  width: 24px; height: 24px; border-radius: 4px;
  border: 1px solid rgba(238, 229, 212, .35); background: rgba(0, 0, 0, .55);
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.check .box::after {
  content: ""; width: 7px; height: 13px; margin-top: -3px;
  border: solid #1b1205; border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0); transition: transform .15s;
}
.check input:checked + .box { background: linear-gradient(180deg, var(--brass-hi), var(--brass)); border-color: var(--brass); }
.check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .box { outline: 2px solid var(--brass); outline-offset: 2px; }
.checks.invalid .check .box { border-color: var(--alarm); }
.check a { color: var(--brass); text-underline-offset: 3px; }

/* ---------- Win result ---------- */
.win-result { margin: 0; max-width: 46ch; font-size: 20px; line-height: 1.35; color: var(--bone); text-wrap: balance; }
.win-result b { color: var(--glow); }
.win-result.first b { color: var(--ok); }
.win-result.slow { color: #ffb3a8; }

/* the trolley in the vault shows a full load for #1, a few bills otherwise */
.room-back .load-full, .room-back .load-few { opacity: 0; transition: opacity .4s; }
.world.load-full .room-back .load-full, .world.load-few .room-back .load-few { opacity: 1; }

/* current number under the HUD (the dial itself has no digital window) */
.current { margin: 4px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.current span { font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.current b { font-family: var(--font-mono); font-weight: 400; font-size: 26px; line-height: 1; color: var(--glow); text-shadow: 0 0 14px rgba(230, 183, 94, .5); font-variant-numeric: tabular-nums; }

/* ---------- Round state ---------- */
.clock-note { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.35; color: var(--bone); text-wrap: balance; }
.gate-center .clock-note { text-align: center; }
.lobby-cta .cta-msg { max-width: 46ch; font-size: 16px; letter-spacing: .02em; text-transform: none; color: var(--bone); text-wrap: balance; }
.lobby-cta .cta-msg[data-kind="error"], .lobby-cta .cta-msg[data-kind="network"] { color: #ffb3a8; }
#btn-unlock.busy { pointer-events: none; animation: busy 1s ease-in-out infinite alternate; }
@keyframes busy { to { filter: brightness(.75); } }

/* ---------- Leaderboard tabs ---------- */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 6px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(238, 229, 212, .12); }
.tab {
  appearance: none; border: 0; cursor: pointer; min-height: 40px; padding: 8px 10px; border-radius: 4px;
  background: transparent; color: var(--muted);
  font: 800 15px/1.1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s;
}
.tab:hover { color: var(--bone); }
.tab[aria-selected="true"] { color: #1b1205; background: linear-gradient(180deg, var(--brass-hi), var(--brass)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.pane { display: grid; gap: 10px; }
.pane-note { margin: 0; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.board-empty { margin: 0; padding: 12px; border-radius: 4px; background: rgba(255, 255, 255, .04); font-size: 16px; color: var(--muted); text-align: center; }
.board-hint { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(143, 151, 146, .7); }

/* Hall of Fame: the #1 of every vault */
.hall-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-height: min(320px, 38vh); overflow-y: auto; overscroll-behavior: contain; }
.hof { display: grid; gap: 6px; padding: 10px 12px; border-radius: 4px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(238, 229, 212, .08); }
.hof[data-ig] { cursor: pointer; }
.hof[data-ig]:hover { background: rgba(230, 183, 94, .08); }
.hof.live { border-color: rgba(95, 208, 143, .35); }
.hof-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hof-vault { font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: .1em; color: var(--brass); }
.hof-info { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.hof.live .hof-info { color: var(--ok); }
.hof-body { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; }
.hof .crown { width: 22px; height: 22px; color: var(--brass-hi); filter: drop-shadow(0 0 6px rgba(230, 183, 94, .6)); }
.hof .crown svg { display: block; width: 100%; height: 100%; }
.hof .t { font-family: var(--font-mono); color: var(--glow); }
.hof .nobody { grid-column: 1 / -1; font-size: 15px; color: var(--muted); }

/* ---------- Player stats sheet ---------- */
.sheet { z-index: 72; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.stats-card { width: min(100%, 460px); margin: auto; text-align: left; gap: 14px; animation: rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.stats-card h2 { font-size: 46px; padding-right: 44px; overflow-wrap: anywhere; }
.stats-card h3 { margin: 6px 0 -4px; }
.stats-card.loading .stat-tiles, .stats-card.loading .stat-lines { opacity: .45; }
.stats-rank { min-height: 1.2em; color: var(--brass); }
.close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center;
  appearance: none; border: 1px solid rgba(238, 229, 212, .2); border-radius: 50%; background: rgba(0, 0, 0, .45); color: var(--bone); cursor: pointer;
}
.close svg { width: 20px; height: 20px; }
.close:hover { border-color: var(--bone); }
.ig-link {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 14px 8px 10px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-mono); font-size: 16px; color: var(--glow);
  background: rgba(230, 183, 94, .1); border: 1px solid rgba(230, 183, 94, .4);
}
.ig-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-link svg { flex: none; width: 20px; height: 20px; color: var(--brass); }
.ig-link:hover { border-color: var(--brass); background: rgba(230, 183, 94, .18); }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-tiles div { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 4px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line); }
.stat-tiles b { font-family: var(--font-mono); font-weight: 400; font-size: 34px; line-height: 1; color: var(--glow); }
.stat-tiles span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.stat-tiles .ok { border-color: rgba(95, 208, 143, .4); }
.stat-tiles .ok b { color: var(--ok); }
.stat-tiles .bad { border-color: rgba(255, 42, 26, .45); }
.stat-tiles .bad b { color: #ff7a6b; }
.stat-lines { margin: 0; display: grid; gap: 6px; }
.stat-lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.stat-lines dt { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.stat-lines dd { margin: 0; font-family: var(--font-mono); color: var(--bone); text-align: right; }
.attempt-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.attempt-list li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 4px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--muted);
}
.attempt-list .when { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.attempt-list .vault { font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.attempt-list .res { font-family: var(--font-mono); font-size: 15px; text-align: right; min-width: 92px; }
.attempt-list .ok { border-left-color: var(--ok); }
.attempt-list .ok .res { color: var(--ok); }
.attempt-list .bad { border-left-color: var(--alarm); }
.attempt-list .bad .res { color: #ff7a6b; }
.stats-msg { margin: 0; min-height: 1.2em; font-size: 15px; color: var(--muted); }
.stats-msg:empty { display: none; }
.win-note { margin: 0; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); }

/* sign-up scrolls on short screens instead of cutting the card off */
.register { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.reg-card { margin: auto; }

/* touch: no double-tap zoom, no pull-to-refresh, no text selection while playing */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button, a, .tab, .rank-row { touch-action: manipulation; }
.hud, .countdown, .vault-scene { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- Narrow screens: lobby becomes one scrolling column under the vault ---------- */
@media (max-width: 899px) {
  .lobby {
    display: flex; flex-direction: column; gap: 16px;
    overflow-y: auto; overscroll-behavior: contain;
    padding-left: var(--gutter-l); padding-right: var(--gutter-r);
    padding-bottom: 0;
    pointer-events: auto;
  }
  .lobby-spacer { display: block; flex: none; height: calc(54vw - 4px); } /* the vault sits here (camera fits it to 94vw) */
  .logo { font-size: 24px; }
  .round { font-size: 11px; padding: 5px 10px; }
  .panel { padding: 20px; flex: none; align-self: stretch; }
  .gate-handle { display: none; }
  .panel-prize { order: 1; }
  .panel-story { order: 2; }
  .lobby-left { order: 2; flex: none; gap: 16px; }
  .lobby-left .panel-story { order: 0; }
  .lobby .live-box { transform: translateY(30px); }
  .lobby-cta {
    order: 3; position: sticky; bottom: 0; flex: none;
    margin-inline: -16px;
    padding: 18px 16px max(18px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(0, 0, 0, .92) 60%, transparent);
  }
  .btn-xl { width: 100%; font-size: 28px; padding: 16px 20px; }
  .jackpot { font-size: 76px; }
  .lobby .panel-story, .lobby .panel-prize { transform: translateY(30px); }
  .clock span { min-width: 0; flex: 1; }
  .stats-card h2 { font-size: 40px; }
  .hall-list { max-height: none; overflow: visible; }
}
/* phones upright: the timer gets its own row under the lock pips */
@media (max-width: 899px) and (orientation: portrait) {
  .hud-top { grid-template-columns: 1fr auto; row-gap: 8px; }
  .hud-top .timer { grid-column: 1 / -1; grid-row: 2; }
}
/* phones: stats slide up from the bottom */
@media (max-width: 599px) {
  .sheet { padding: 0; }
  .stats-card {
    width: 100%; margin: auto 0 0;
    border-radius: 14px 14px 0 0; border-bottom: 0;
    padding: 22px var(--gutter-r) max(22px, env(safe-area-inset-bottom, 0px)) var(--gutter-l);
    animation: sheet-up .35s cubic-bezier(.2, .8, .2, 1) both;
  }
  .stats-card::after { display: none; }
  .stat-tiles b { font-size: 28px; }
  .attempt-list .vault { display: none; }
  .reg-card { padding: 20px 18px; }
  .reg-card h2 { font-size: 32px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* phones on their side: compact HUD so the dial gets the height */
@media (max-height: 500px) and (orientation: landscape) {
  .hud-top { padding-block: 8px; }
  .timer { padding: 4px 18px 6px; }
  .timer .label { display: none; }
  .timer .value { font-size: 28px; }
  .hud-bottom { padding-top: 16px; gap: 6px; }
  .confirm { font-size: 22px; padding: 10px 24px; }
  .controls { display: none; }
}
@media (max-height: 640px) {
  .controls { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .alarm, .grain, .flicker, .gate-ring, .gate-btn::after, .btn-xl::after, .live-dot,
  .lock.active .plaque .led, .countdown.go, .over .gameover { animation: none; }
  .dial, .door, .gate-door { transition: none; }
}

/* ---------- Credits & live jackpot ---------- */
.jackpot { font-variant-numeric: tabular-nums; }
.jackpot.bump { animation: bump .9s ease-out; }
@keyframes bump {
  0% { text-shadow: 0 0 10px rgba(255, 214, 140, .8), 0 0 40px rgba(230, 183, 94, .55); }
  25% { color: #fff; text-shadow: 0 0 18px rgba(255, 236, 190, 1), 0 0 70px rgba(255, 190, 80, .9); transform: scale(1.03); }
  100% { text-shadow: 0 0 10px rgba(255, 214, 140, .8), 0 0 40px rgba(230, 183, 94, .55); transform: none; }
}
.jackpot { transform-origin: left center; }
.jackpot-note { margin: -8px 0 2px; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ok); }
.jackpot-note::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 1.2s steps(1) infinite; }

.credit-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.lobby-cta .credit-line { text-transform: none; letter-spacing: .04em; }
.credit-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(230, 183, 94, .1); border: 1px solid rgba(230, 183, 94, .45);
  font-size: 17px; color: var(--bone);
}
.credit-pill svg { width: 20px; height: 20px; color: var(--brass); }
.credit-pill b { font-family: var(--font-mono); font-weight: 400; font-size: 20px; color: var(--glow); }
.credit-line.empty .credit-pill { border-color: rgba(255, 42, 26, .55); background: rgba(255, 42, 26, .1); }
.credit-line.empty .credit-pill b { color: #ff7a6b; }
.btn-buy {
  appearance: none; cursor: pointer; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--brass); background: rgba(0, 0, 0, .35); color: var(--brass-hi);
  font: 800 15px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
}
.btn-buy:hover { background: rgba(230, 183, 94, .16); }
.credit-line.empty .btn-buy { color: #1b1205; border-color: transparent; background: linear-gradient(180deg, var(--brass-hi), var(--brass)); }
.credits-left { margin: 0; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); text-shadow: 0 1px 2px #000; }

/* shop sheet */
.shop-card h2 { font-size: 42px; }
.shop-reason { margin: 0; padding: 10px 12px; border-radius: 4px; background: rgba(255, 42, 26, .1); border: 1px solid rgba(255, 42, 26, .5); color: #ffb3a8; font-size: 16px; }
.shop-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shop-facts.single { grid-template-columns: 1fr; }
.fact {
  display: grid; gap: 4px; padding: 12px 14px 11px; border-radius: 6px;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--line);
}
.fact b { font-family: var(--font-mono); font-weight: 400; font-size: 28px; line-height: 1; color: var(--glow); }
.fact span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; color: var(--muted); }
.fact.pot { border-color: rgba(95, 208, 143, .4); background: linear-gradient(180deg, rgba(95, 208, 143, .1), rgba(0, 0, 0, .45)); }
.fact.pot b { color: var(--ok); }
.fact.pot b::after { content: ""; display: inline-block; margin-left: 8px; vertical-align: .12em; border: 7px solid transparent; border-bottom: 10px solid currentColor; border-top: 0; }
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pack {
  position: relative; appearance: none; cursor: pointer; display: grid; justify-items: center; gap: 2px;
  padding: 16px 10px 14px; border-radius: 6px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(230, 183, 94, .1), rgba(0, 0, 0, .35));
  color: var(--bone); transition: transform .12s, border-color .15s, background .15s;
}
.pack:hover:not(:disabled) { border-color: var(--brass); background: linear-gradient(180deg, rgba(230, 183, 94, .2), rgba(0, 0, 0, .35)); transform: translateY(-2px); }
.pack:disabled { opacity: .5; cursor: default; }
.pack b { font: 900 44px/1 var(--font-display); color: var(--glow); text-shadow: 0 0 16px rgba(230, 183, 94, .5); }
.pack span { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pack em { margin-top: 6px; font-style: normal; font-family: var(--font-mono); font-size: 20px; color: var(--brass-hi); }
.pack.busy { animation: busy .8s ease-in-out infinite alternate; opacity: 1; }
.pack:first-child::after { content: "Min."; position: absolute; top: 8px; right: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.shop-msg { margin: 0; min-height: 1.3em; font-size: 15px; color: var(--bone); }
.shop-msg:empty { display: none; }
.shop-note { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.shop-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--brass); }

/* notices at the top (payment results) */
.notice {
  position: fixed; z-index: 90; left: 16px; right: 16px; top: max(16px, env(safe-area-inset-top, 0px)); margin: 0 auto;
  width: -webkit-fit-content; width: fit-content; max-width: 560px;
  padding: 12px 18px; border-radius: 8px; text-align: center;
  background: rgba(10, 13, 12, .94); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  font-size: 17px; color: var(--bone);
  animation: rise .35s cubic-bezier(.2, .8, .2, 1) both;
}
.notice[data-kind="ok"] { border-color: rgba(95, 208, 143, .6); color: #c8f2d8; }
.notice[data-kind="error"] { border-color: rgba(255, 42, 26, .6); color: #ffb3a8; }
@media (max-width: 599px) {
  .shop-card h2 { font-size: 34px; }
  .pack b { font-size: 38px; }
}

/* phones: the lobby scrolls up and down only (the full-bleed button bar's corner marks used to poke 2px past the edge) */
@media (max-width: 899px) {
  .lobby { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
  .lobby-cta::before, .lobby-cta::after { display: none; }
}

/* ---------- Phones and tablets (iOS & Android): same look, much less GPU work ----------
   No live blur behind the boxes, no screen blending over the moving photos, no full-screen grain layer.
   On many Android phones these effects caused stutter and flickering boxes. */
@media (pointer: coarse) {
  .panel, .lobby-cta, .timer, .register, .sheet { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel { background: rgba(10, 13, 12, .9); }
  .timer { background: rgba(8, 10, 9, .9); }
  .register, .sheet { background: rgba(0, 0, 0, .8); }
  .alarm, .hall-alarm, .vlight { mix-blend-mode: normal; }
  .grain { display: none; }
  .silhouette { filter: none; }
}

/* phones: readable win text over the bright vault, and a dark band behind the lobby's top bar (ceiling lights) */
@media (max-width: 899px) {
  .win { background: linear-gradient(0deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .82) 48%, rgba(0, 0, 0, .35) 70%, transparent 86%); }
  .win .eyebrow, .win-time, .win-combo { text-shadow: 0 2px 6px #000, 0 0 24px rgba(0, 0, 0, .8); }
  .lobby-top {
    margin: -18px calc(var(--gutter-r) * -1) 0 calc(var(--gutter-l) * -1);
    padding: 14px var(--gutter-r) 22px var(--gutter-l);
    background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 65%, transparent);
  }
}
/* notches and status bars (the page uses viewport-fit=cover) */
.lobby { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.hud-top { padding-top: max(16px, env(safe-area-inset-top, 0px)); }
@media (max-width: 899px) {
  .lobby-top { margin-top: calc(max(18px, env(safe-area-inset-top, 0px)) * -1); padding-top: max(14px, env(safe-area-inset-top, 0px)); }
}
/* phones on their side: a compact button bar and overlays that fit the short screen */
@media (max-height: 500px) and (orientation: landscape) {
  .lobby-cta { gap: 6px; padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .lobby-cta .btn-xl { width: auto; min-width: 46%; font-size: 22px; padding: 10px 28px; }
  #cta-line { display: none; }
  .lobby-cta .player-line { font-size: 15px; }
  .credit-pill { padding: 3px 12px 3px 8px; font-size: 15px; }
  .btn-buy { padding: 6px 12px; font-size: 13px; }
  .overlay { gap: 8px; padding-block: 10px; overflow-y: auto; }
  .over h2 { gap: 2px; }
  .over .wrong { font-size: clamp(20px, 7vh, 40px); }
  .over .gameover { font-size: clamp(56px, 26vh, 120px); }
  .detail { font-size: 15px; }
  .actions .btn-primary, .actions .btn-ghost { font-size: 18px; padding: 10px 18px; }
  .win { gap: 4px; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .win .eyebrow { font-size: 16px; }
  .win .win-time { font-size: clamp(34px, 13vh, 60px); }
  .win-combo { font-size: 16px; }
  .win .win-result { font-size: 15px; }
  .win-best, .win-note, .credits-left { font-size: 13px; }
  .countdown { font-size: clamp(90px, 45vh, 200px); }
}

/* sign-up: live Instagram name check */
.field-status { margin: -2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; line-height: 1.35; color: var(--muted); }
.field-status[data-kind="ok"] span { color: var(--ok); }
.field-status[data-kind="ok"] span::before { content: "\2713"; margin-right: 6px; font-weight: 700; }
.field-status[data-kind="checking"] span { animation: busy .8s ease-in-out infinite alternate; }
.field-status a { color: var(--brass); text-underline-offset: 3px; }
.field-error:empty + .field-status { margin-top: calc(-1.2em - 4px); }

/* phones and tablets during the vault opening: the same look with fewer and smaller GPU layers
   (the handle's live shadow, the separate shade and light layers become a plain inner shadow) */
@media (pointer: coarse) {
  .door-handle { filter: none; }
  .vshade, .vlight { display: none; }
  .vault-scene.opened .vinside { box-shadow: inset 130px 0 150px -40px rgba(0, 0, 0, .8), inset 0 0 70px rgba(0, 0, 0, .45); }
}

/* ---------- Lobby: live box under the story ---------- */
.live-box {
  position: relative;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 12px; row-gap: 8px;
  padding: 14px 18px;
  background: var(--glass); border: 1px solid rgba(95, 208, 143, .35); border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.live-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(95, 208, 143, .7); animation: live-ping 1.6s ease-out infinite; }
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(95, 208, 143, .7); } 100% { box-shadow: 0 0 0 12px rgba(95, 208, 143, 0); } }
.live-num { font-family: var(--font-mono); font-weight: 400; font-size: 34px; line-height: 1; color: var(--ok); font-variant-numeric: tabular-nums; }
.live-label { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; color: var(--bone); }
.live-today { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.live-today b { display: inline-block; font-family: var(--font-mono); font-weight: 400; font-size: 17px; letter-spacing: 0; color: var(--bone); font-variant-numeric: tabular-nums; }
.live-today b.tick { animation: today-tick 1.2s ease-out; }
@keyframes today-tick { 0% { color: var(--bone); } 15% { color: var(--brass-hi); text-shadow: 0 0 12px rgba(230, 183, 94, .9); transform: translateY(-2px); } 100% { color: var(--bone); text-shadow: none; transform: none; } }
.live-box.quiet { border-color: var(--line); }
/* lines switched off in /admin */
.live-box.no-now .live-pulse, .live-box.no-now .live-num, .live-box.no-now .live-label { display: none; }
.live-box.no-now .live-today { padding-top: 0; border-top: 0; }
.live-box.no-today .live-today { display: none; }
.live-box.no-now { border-color: var(--line); }
.live-box.quiet .live-pulse { background: var(--muted); animation: none; box-shadow: none; }
.live-box.quiet .live-num { color: var(--bone); }
.live-num.bump { animation: live-bump .8s ease-out; }
@keyframes live-bump { 0% { transform: scale(1); } 30% { transform: scale(1.25); color: #fff; } 100% { transform: scale(1); } }
@media (pointer: coarse) { .live-box { background: rgba(10, 13, 12, .9); } }
@media (max-width: 899px) { .live-box { padding: 14px 16px; } }

/* ---------- Scaling to the screen size ----------
   Desktop lobby: the columns, panels and the "Unlock" bar are built for ~945px of height. On laptop screens
   (1366×768, 1440×900, 1536×864 …) the button bar used to slide below the bottom edge. The lobby is now
   zoomed as a whole (same look, just smaller), and on big screens it grows with the screen. */
@media (min-width: 900px) {
  .lobby { grid-template-rows: auto minmax(0, 1fr) auto; }
}
@media (min-width: 900px) and (max-height: 960px) { .lobby { zoom: .94; } }
@media (min-width: 900px) and (max-height: 888px) { .lobby { zoom: .87; } }
@media (min-width: 900px) and (max-height: 822px) { .lobby { zoom: .8; } }
@media (min-width: 900px) and (max-height: 756px) { .lobby { zoom: .74; } }
/* very short desktop windows: the side columns scroll instead of pushing the button off screen */
@media (min-width: 900px) and (max-height: 700px) {
  .lobby { zoom: .7; }
  .lobby-left, .panel-prize { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* large screens: the lobby, the in-game bars and the cards grow with the screen instead of staying laptop-sized */
@media (min-width: 1800px) and (min-height: 1040px) {
  .lobby, .hud-top, .hud-bottom, .reg-card, .stats-card, .overlay.over, .overlay.win { zoom: 1.1; }
}
@media (min-width: 2200px) and (min-height: 1250px) {
  .lobby, .hud-top, .hud-bottom, .reg-card, .stats-card, .overlay.over, .overlay.win { zoom: 1.3; }
}
@media (min-width: 3000px) and (min-height: 1650px) {
  .lobby, .hud-top, .hud-bottom, .reg-card, .stats-card, .overlay.over, .overlay.win { zoom: 1.7; }
}

/* Elevator start screen on short screens (phones on their side, small laptop windows):
   title, button and countdown follow the height too, so the countdown is no longer cut off */
.neon { font-size: clamp(min(64px, 19vh), min(15vw, 19vh), 150px); }
.gate-center { gap: clamp(10px, 2.6vh, 22px); }
.gate-btn { width: clamp(96px, 19vh, 150px); height: clamp(96px, 19vh, 150px); }
.gate-label { font-size: clamp(24px, 4.3vh, 34px); }
@media (max-height: 500px) and (orientation: landscape) {
  .elev-header { top: 8px; padding: 6px 16px; gap: 12px; }
  .elev-floor { font-size: 22px; min-width: 48px; }
  .elev-frame { box-shadow: inset 0 0 0 10px #0f1211, inset 0 0 0 13px var(--brass-deep), inset 0 0 0 15px #050606, inset 0 0 40px 20px rgba(0, 0, 0, .7); }
  .gate-center { gap: 8px; padding-top: 34px; }
  .gate-ring { top: 8px; right: 8px; bottom: 8px; left: 8px; }
  .gate-round { gap: 4px; }
  .clock span { min-width: 46px; padding: 3px 6px 2px; }
  .clock b { font-size: 20px; }
  .clock i { font-size: 9px; }
  .gate-hint { font-size: 12px; }
}