:root{--night:#0b1810;--paper:#ead9a8;--brass:#c99a49}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 45% 16%,#294331,#0b1d13 42%,#050c08 82%);color:var(--paper);font-family:Georgia,"Times New Roman",serif}
.room{min-height:calc(100vh - 150px);padding:42px 24px 70px}
.machine-layout{display:grid;grid-template-columns:minmax(320px,660px) minmax(270px,370px);gap:clamp(30px,5vw,76px);align-items:start;justify-content:center}
.cabinet{position:relative;aspect-ratio:989/1591;filter:drop-shadow(0 32px 30px #000b);user-select:none}
.cabinet>img{display:block;width:100%;height:100%;object-fit:contain}
.race-layer{position:absolute;inset:0;pointer-events:none}
.ball{position:absolute;width:1.45%;aspect-ratio:1;border:1px solid #5e5237;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fffbdc 0 9%,#d8cba4 22%,#8b7b56 58%,#3b3324 82%,#17140e);transform:translate(-50%,-50%);z-index:8;box-shadow:inset -1px -2px 2px #17130dbb,0 1px 2px #000c;will-change:left,top}
.marker{position:absolute;top:56.5%;width:5.8%;height:auto;translate:-50% calc(var(--progress,0)*-185%);transform-origin:50% 72%;transition:translate .55s cubic-bezier(.2,.8,.25,1);filter:drop-shadow(0 2px 3px #000a);will-change:translate,rotate}
.marker-1{left:36.4%}
.marker-2{left:42.9%}
.marker-3{left:49.8%}
.marker-4{left:56.4%}
.marker-5{left:63.4%}
.marker.is-hit{animation:beetle-rock .62s cubic-bezier(.22,.75,.3,1)}
@keyframes beetle-rock{0%{rotate:0deg}
18%{rotate:-9deg}
38%{rotate:6deg}
58%{rotate:-4deg}
78%{rotate:2deg}
100%{rotate:0deg}
}
.selector{position:absolute;left:41.1%;top:80.35%;width:17%;height:3%;display:grid;grid-template-columns:repeat(5,1fr);z-index:10}
.selector button{--lamp:#ddd0aa;position:relative;border:0;background:transparent;cursor:pointer}
.selector button::before{content:"";position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;border:1px solid #31291d;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff 0 8%,color-mix(in srgb,var(--lamp),#fff 28%) 18%,var(--lamp) 53%,color-mix(in srgb,var(--lamp),#000 58%) 100%);box-shadow:inset 0 -2px 3px #0008,0 0 0 1px #c6ad7c,0 0 8px var(--lamp);translate:-50% -50%;animation:lane-lamp-blink 1.15s steps(2,end) infinite;animation-delay:calc(var(--lane)*-.17s)}
.selector button:nth-child(1){--lamp:#d52d24;--lane:0}
.selector button:nth-child(2){--lamp:#276cc0;--lane:1}
.selector button:nth-child(3){--lamp:#efe2bd;--lane:2}
.selector button:nth-child(4){--lamp:#27814a;--lane:3}
.selector button:nth-child(5){--lamp:#e4b72f;--lane:4}
.selector button[aria-checked="true"]::before{animation:none;filter:brightness(1.35);box-shadow:inset 0 -2px 3px #0006,0 0 0 2px #f8e8b4,0 0 14px 3px var(--lamp)}
.selector button:focus-visible{outline:2px solid #fff0b6;outline-offset:-1px}
.selector:has(button[aria-checked="true"]) button:not([aria-checked="true"])::before{animation:none;filter:brightness(.45);box-shadow:inset 0 -2px 3px #0009}
@keyframes lane-lamp-blink{0%,46%{filter:brightness(1.25);opacity:1}47%,100%{filter:brightness(.48);opacity:.72}}
.launch{position:absolute;right:8.5%;bottom:4%;width:13%;height:7%;border:0;background:transparent;cursor:pointer;touch-action:none}
.launch:focus-visible{outline:4px solid #f5d778}
.launch:disabled{cursor:wait}
.eyebrow{font:700 11px/1.4 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#99b3a1}
.machine-copy h1{margin:.12em 0 0;font-size:clamp(54px,7vw,98px);font-weight:400;line-height:.82;letter-spacing:-.065em}
.machine-copy h1 em{display:block;margin:.7em 0 0;font:italic 400 clamp(20px,2.4vw,31px)/1.1 Georgia,serif;letter-spacing:0;color:var(--brass)}
.lead{max-width:30ch;font-size:19px;line-height:1.55;color:#d3d4c1}
.readout{margin:26px 0;padding:17px 18px;border:1px solid #79623d;background:#071009cc;box-shadow:inset 0 0 22px #000}
.readout span{display:block;font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:#9fb6ac}
.readout strong{display:block;margin-top:6px;font-size:24px;color:#f3d27c}
.facts{display:grid;grid-template-columns:1fr 1fr;margin:0;border-block:1px solid #50615c}
.facts div{padding:14px 0}
.facts dt{font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8ea19a}
.facts dd{margin:5px 0 0}
.help{font-size:14px;line-height:1.5;color:#9fb6ac}
@media(max-width:900px){.room{padding:28px 14px 54px}
.machine-layout{grid-template-columns:minmax(280px,620px)}
.machine-copy{max-width:620px}
.machine-copy h1{font-size:58px}
}
@media(prefers-reduced-motion:reduce){.ball,.marker,.selector button::before{transition:none!important;animation:none!important}
}