:root{--walnut-dark: #2a1a10;--walnut: #3b2415;--walnut-light: #5a3a22;--brass: #c9a227;--brass-dark: #8a6a1c;--ivory: #f3ecd9;--ivory-shadow: #b7ac91;--metal-dark: #23242a;--metal: #3a3c44;--ember: #ff3a1f;--ink: #1c1712;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ink);color:var(--ivory);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}#app{position:relative;width:100vw;height:100vh;overflow:hidden}#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55) 100%)}.btn{font-family:inherit;font-weight:700;letter-spacing:.06em;border:none;cursor:pointer;border-radius:12px;padding:.85rem 1.4rem;font-size:.95rem;width:100%;margin-top:.6rem;transition:transform .08s ease,box-shadow .15s ease}.btn-primary{color:#2b1d05;background:linear-gradient(180deg,#fffaf0 0%,var(--ivory) 45%,var(--ivory-shadow) 100%);box-shadow:0 3px 0 var(--ivory-shadow),0 6px 14px #00000073,inset 0 1px #fffc}.btn-primary:hover{box-shadow:0 3px 0 var(--ivory-shadow),0 6px 14px #00000073,0 0 0 3px #ffd27859,inset 0 1px #fffc}.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ivory-shadow),0 2px 6px #0006}.btn-big{font-size:1.15rem;padding:1.05rem 1.4rem}.btn-secondary{color:var(--ivory);background:linear-gradient(180deg,#4a4c54 0%,var(--metal) 55%,var(--metal-dark) 100%);box-shadow:0 3px #17181c,0 6px 12px #00000080,inset 0 1px #ffffff1f}.btn-secondary:hover{box-shadow:0 3px #17181c,0 6px 12px #00000080,0 0 0 3px #b4c8ff26}.btn-secondary:active{transform:translateY(2px);box-shadow:0 1px #17181c,0 2px 6px #0006}.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}.menu-row{display:flex;gap:.6rem;margin-top:.6rem}.menu-row .btn{margin-top:0}.icon-btn{border:none;border-radius:50%;width:2.6rem;height:2.6rem;color:var(--ivory);background:linear-gradient(180deg,#4a4c54,var(--metal-dark));box-shadow:0 3px #17181c,0 4px 8px #00000080,inset 0 1px #ffffff26;cursor:pointer}.icon-btn:active{transform:translateY(2px)}.dial{width:4.4rem;height:4.4rem;border-radius:50%;border:none;cursor:pointer;color:var(--ink);font-size:1.4rem;background:repeating-conic-gradient(from 0deg,rgba(0,0,0,.18) 0deg 4deg,transparent 4deg 12deg),radial-gradient(circle at 35% 30%,#e9c65a 0%,var(--brass) 45%,var(--brass-dark) 100%);box-shadow:0 4px #5e4813,0 8px 16px #00000080,inset 0 2px 3px #fff6}.dial:active{transform:translateY(3px) scale(.97)}.dial:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}.toggle{width:3.4rem;height:1.8rem;border-radius:999px;border:none;cursor:pointer;background:linear-gradient(180deg,#22242b,#34363e);box-shadow:inset 0 2px 4px #0009;position:relative;padding:.2rem}.toggle .knob{display:block;width:1.4rem;height:1.4rem;border-radius:50%;background:linear-gradient(180deg,#fffaf0,var(--ivory-shadow));transition:transform .15s ease;box-shadow:0 2px 4px #00000080}.toggle[aria-checked=true]{background:linear-gradient(180deg,#8a6a1c,var(--brass))}.toggle[aria-checked=true] .knob{transform:translate(1.6rem)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.08)}.setting-row label{font-size:.95rem}.setting-row input[type=range]{width:9rem;accent-color:var(--brass)}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a08068c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:20;padding:1.2rem}.screen[hidden]{display:none}.panel{width:min(420px,100%);max-height:90vh;overflow-y:auto;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--walnut);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:1.8rem 1.7rem;box-shadow:0 20px 60px #000000a6,inset 0 1px #ffffff14;position:relative}.panel:before,.panel:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9c65a,var(--brass-dark));top:14px}.panel:before{left:14px}.panel:after{right:14px}.panel h2{margin:0 0 1rem;font-size:1.3rem;letter-spacing:.04em}.hero{text-align:center}.eyebrow{letter-spacing:.22em;font-size:.72rem;color:var(--brass);margin:0 0 .3rem}.wordmark{margin:0;font-size:3rem;letter-spacing:.06em;background:linear-gradient(180deg,#fff7e2,var(--brass) 70%,var(--brass-dark));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}.tagline{margin:.2rem 0 1.2rem;opacity:.85;font-style:italic}.records{display:flex;justify-content:space-around;gap:.6rem;margin:.6rem 0 1.1rem;flex-wrap:wrap}.records div{display:flex;flex-direction:column;gap:.2rem;background:#00000040;border-radius:10px;padding:.5rem .8rem;flex:1;min-width:100px}.records span{font-size:.62rem;letter-spacing:.12em;opacity:.7}.records strong{font-size:1.2rem;color:var(--brass)}.rules{padding-left:1.1rem;line-height:1.5;font-size:.92rem}.rules li{margin-bottom:.5rem}.new-record{text-align:center;color:var(--ember);font-weight:800;letter-spacing:.14em;margin:0 0 .4rem;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;z-index:10;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}.brand{display:flex;align-items:center;gap:.4rem;font-weight:800;letter-spacing:.12em}.brand.small{font-size:.95rem}.brand-mark{color:var(--brass)}.readouts{display:flex;gap:1.1rem}.readout{display:flex;flex-direction:column;align-items:center;font-size:.6rem;letter-spacing:.1em;opacity:.85}.readout strong{font-size:1.05rem;color:var(--ivory)}.readout.lives strong{color:var(--ember);letter-spacing:.15em}.countdown{position:absolute;top:4.2rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:10;background:#0006;border-radius:14px;padding:.4rem 1rem;gap:.2rem}.count-label{font-size:.6rem;letter-spacing:.14em;opacity:.75}.countdown strong{font-size:1.5rem;color:var(--brass)}.status{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.9);text-align:center;z-index:15;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.status.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.status strong{display:block;font-size:1.6rem;letter-spacing:.1em}.status span{display:block;font-size:1rem;opacity:.85}.status.success strong{color:#9be29b}.status.crash strong{color:var(--ember)}.controls{position:absolute;bottom:1.4rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:1.4rem;z-index:10}.instruction{display:flex;flex-direction:column;align-items:center;font-size:.62rem;letter-spacing:.1em;opacity:.8;min-width:6rem}.instruction b{font-size:.85rem;letter-spacing:.06em}@media(max-width:640px){.wordmark{font-size:2.3rem}.readouts{gap:.6rem}.dial{width:3.6rem;height:3.6rem}.controls{gap:.9rem}}@media(prefers-reduced-motion:reduce){.status,.btn,.toggle .knob{transition:none}.new-record{animation:none}}.hud:not([hidden]){top:clamp(.45rem,1.5vh,1.1rem);left:50%;right:auto;width:min(92vw,980px);min-height:5.1rem;transform:translate(-50%);padding:.72rem clamp(.85rem,2vw,1.6rem);border:1px solid rgba(255,239,209,.5);border-bottom-color:#321c12e0;border-radius:4px;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,#00000006 1px 3px),linear-gradient(105deg,#615346,#b5a894 21%,#ddd1bc 48%,#9d8d7a 73%,#574a40);box-shadow:0 .35rem #32251e,0 .85rem 2rem #00000094,inset 0 1px #fff9e5cc,inset 0 -1px #39251b80;color:#2c211c}.hud:before,.hud:after{content:"";position:absolute;top:-.15rem;bottom:-.5rem;width:.62rem;background:linear-gradient(90deg,#241712,#684735 48%,#2a1a14);box-shadow:inset 0 0 0 1px #ffffff14}.hud:before{left:-.62rem;border-radius:5px 0 0 5px}.hud:after{right:-.62rem;border-radius:0 5px 5px 0}.hud .brand{font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:clamp(1.35rem,4vw,2.6rem);letter-spacing:.04em;color:#352822;text-shadow:0 1px rgba(255,255,255,.38)}.hud .brand-mark{color:#8e2f25}.readouts{gap:clamp(.45rem,1.4vw,1rem);margin-left:auto}.readout{gap:.15rem;min-width:clamp(4.1rem,10vw,7rem);color:#55271f;font-weight:800;opacity:1}.readout strong{width:100%;padding:.28rem .45rem .2rem;border:2px solid #3b2924;border-radius:3px;background:linear-gradient(180deg,#211417,#100a0c);box-shadow:inset 0 0 12px #000000e6,0 1px #ffffff59;color:#e35052;font-family:Courier New,monospace;font-size:clamp(1rem,3vw,1.65rem);line-height:1;text-align:center;text-shadow:0 0 7px rgba(232,64,67,.75)}.readout.lives strong{color:#e35052;font-size:clamp(.75rem,2vw,1.1rem)}.hud .icon-btn{flex:none;margin-left:clamp(.45rem,1.3vw,.9rem);color:#f0dfbd;border:1px solid rgba(255,255,255,.13)}.countdown:not([hidden]){top:clamp(6.5rem,14vh,8.7rem);left:clamp(.8rem,5vw,5rem);transform:none;padding:.5rem .8rem .42rem;border:2px solid #3c2922;border-radius:3px;background:linear-gradient(180deg,#25181a,#100a0b);box-shadow:0 5px 14px #0000008c,inset 0 0 12px #000000d9}.countdown .count-label{color:#f0dfbd;font-weight:800}.countdown strong{color:#ffd091;font-family:Courier New,monospace;font-size:clamp(1.35rem,4vw,2.25rem);text-shadow:0 0 8px rgba(255,165,87,.7)}.controls:not([hidden]){bottom:clamp(1rem,3vh,2rem);width:min(91vw,660px);min-height:5.7rem;justify-content:space-between;padding:.72rem clamp(.9rem,3vw,1.8rem);border:1px solid rgba(202,132,65,.5);border-bottom:5px solid #24120b;border-radius:9px 9px 4px 4px;background:repeating-linear-gradient(2deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),linear-gradient(110deg,#30160d,#6b391d 38%,#4b2615 70%,#28130b);box-shadow:0 .9rem 2rem #000000a6,inset 0 1px #ffd7a53d}.controls .instruction{min-width:min(48vw,330px);min-height:3.15rem;justify-content:center;border-radius:7px;background:linear-gradient(#f6ead2,#cfc0a4);box-shadow:inset 0 2px 4px #4e311f40,0 2px #fff3;color:#874a32;opacity:1}.controls .instruction b,.controls .instruction span{display:inline}.controls .instruction b{font-size:clamp(.8rem,2vw,1rem)}.controls .instruction span{font-size:clamp(.58rem,1.6vw,.78rem)}@media(max-width:640px){.hud:not([hidden]){width:calc(100vw - 1.4rem);min-height:4rem;padding:.48rem .55rem}.hud .brand{font-size:1rem}.hud .brand-mark{display:none}.readout{min-width:3.35rem;font-size:.48rem}.readout strong{font-size:.88rem;padding-inline:.24rem}.readout.lives{display:none}.hud .icon-btn{width:2.15rem;height:2.15rem;font-size:.7rem}.countdown:not([hidden]){top:5.4rem;left:.75rem}.controls:not([hidden]){width:calc(100vw - 1rem);min-height:4.65rem;padding:.48rem .6rem}.controls .instruction{min-width:42vw;min-height:2.7rem}}#app{background:linear-gradient(#140a0624,#0e07044d),url(/assets/workshop-reference.jpg) center center / cover no-repeat}#game{z-index:2}#app:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 46%,#24100814 0 29%,#15090580 51%,#0c0503bd 78%),linear-gradient(to bottom,#1208040d,#12080442)}.vignette{z-index:3}.hud,.countdown,.status,.controls{z-index:10}.screen{z-index:20}@media(max-width:700px){#app{background-position:center center}#app:before{background:radial-gradient(circle at 50% 46%,#1b0c060a 0 28%,#12080473 56%,#0a0402b8 84%),linear-gradient(to bottom,#1208041a,#1208044d)}}:root{--machine-w: min(100vw, 179.1667vh);--machine-h: min(55.814vw, 100vh)}#app{background-image:linear-gradient(#0c070406,#0c070414),url(/assets/zynzap-machine-clean.jpg);background-position:center,center;background-size:100% 100%,contain;background-repeat:no-repeat,no-repeat;background-color:#100b08}#app:before{background:radial-gradient(ellipse at center,transparent 54%,rgba(7,3,2,.32) 100%)}#game{inset:auto;left:calc(50% + .0018 * var(--machine-w));top:calc(50% - .0417 * var(--machine-h));width:calc(.225 * var(--machine-w));height:calc(.225 * var(--machine-w));transform:translate(-50%,-50%);border-radius:50%;overflow:hidden}.vignette{background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.38) 100%)}.hud:not([hidden]){inset:0;width:100%;min-height:0;transform:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none}.hud:before,.hud:after,.hud .brand{display:none}.readouts{display:contents;margin:0}.readout{position:absolute;min-width:0;height:calc(.064 * var(--machine-h));display:flex;justify-content:center;pointer-events:none}.readout>span{display:none}.readout strong{height:100%;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:transparent;box-shadow:none;color:#e84c50;font-size:clamp(.72rem,calc(.031 * var(--machine-h)),2.2rem);text-shadow:0 0 8px rgba(232,65,70,.82)}.readout:nth-child(1){left:calc(50% + -.1664 * var(--machine-w));top:calc(50% + -.3991 * var(--machine-h));width:calc(.0952 * var(--machine-w))}.readout:nth-child(2){left:calc(50% + -.0371 * var(--machine-w));top:calc(50% + -.3991 * var(--machine-h));width:calc(.0945 * var(--machine-w))}.readout:nth-child(3){left:calc(50% + .0952 * var(--machine-w));top:calc(50% + -.3991 * var(--machine-h));width:calc(.0945 * var(--machine-w))}.readout.lives strong{font-size:clamp(.5rem,calc(.021 * var(--machine-h)),1.45rem)}.hud .icon-btn{position:absolute;left:calc(50% + .144 * var(--machine-w));top:calc(50% + .213 * var(--machine-h));width:calc(.022 * var(--machine-w));height:calc(.022 * var(--machine-w));min-width:25px;min-height:25px;margin:0;opacity:.02;pointer-events:auto}.hud .icon-btn:hover,.hud .icon-btn:focus-visible{opacity:.35}.countdown:not([hidden]){left:calc(50% - .28 * var(--machine-w));top:calc(50% - .098 * var(--machine-h));transform:none;padding:.35rem .6rem;background:#120b0ce0}.controls:not([hidden]){position:absolute;inset:0;width:100%;min-height:0;transform:none;padding:0;border:0;background:transparent;box-shadow:none;pointer-events:none}.controls .dial{--knob-angle: 0deg;position:absolute;top:calc(50% + .307 * var(--machine-h));transform:translate(-50%,-50%);border:0;padding:0;background-repeat:no-repeat;background-position:center;background-size:contain;box-shadow:none;pointer-events:auto;touch-action:none;overflow:visible}.controls .dial.dial-vertical{left:calc(50% - .174 * var(--machine-w));width:calc(.115 * var(--machine-w));height:calc(.145 * var(--machine-w));background-image:url(/assets/control-up-down.png)}.controls .dial.dial-horizontal{left:calc(50% + .174 * var(--machine-w));width:calc(.142 * var(--machine-w));height:calc(.106 * var(--machine-w));background-image:url(/assets/control-left-right.png)}.controls .dial-face{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--knob-angle));border-radius:50%;background:center / contain no-repeat;filter:drop-shadow(0 2px 2px rgba(25,10,4,.35));pointer-events:none}.controls .dial.dial-vertical .dial-face{background-image:url(/assets/knob-up-down-face.png)}.controls .dial.dial-horizontal .dial-face{background-image:url(/assets/knob-left-right-face.png);width:43%}.controls .dial span{display:none}.controls .dial.turning .dial-face{filter:brightness(1.08) drop-shadow(0 2px 2px rgba(25,10,4,.35))}.controls .tuning-wheel{--roller-tilt: 0deg;position:absolute;left:50%;top:calc(50% + .307 * var(--machine-h));width:calc(.17 * var(--machine-w));height:calc(.067 * var(--machine-w));transform:translate(-50%,-50%);border:0;padding:0;background:url(/assets/control-gyro.png) center / contain no-repeat;box-shadow:none;pointer-events:auto;cursor:ew-resize;touch-action:none;perspective:180px}.controls .tuning-drum{position:absolute;inset:30% 17% 19%;transform:rotateX(var(--roller-tilt));border-radius:40%/22%;pointer-events:none}.controls .tuning-wheel small{display:none}.controls .tuning-wheel:focus-visible,.controls .dial:focus-visible{outline:2px solid #f0c174;outline-offset:3px}.countdown:not([hidden]){width:calc(.052 * var(--machine-w));height:calc(.048 * var(--machine-h));padding:0;display:grid;place-items:center;border:0;background:transparent;box-shadow:none}.countdown .count-label,.countdown #fitValue{display:none}.countdown strong{color:#f0a657;font-size:clamp(.7rem,calc(.029 * var(--machine-h)),2rem);text-shadow:0 0 7px rgba(240,126,55,.8)}.controls .dial.dial-vertical,.controls .dial.dial-horizontal{width:calc(.06 * var(--machine-w));height:calc(.06 * var(--machine-w));background-image:none;background-color:transparent}.controls .dial-face,.controls .dial.dial-horizontal .dial-face{width:78%;height:78%}.controls .dial span{display:block;position:absolute;color:#70462f;font:800 clamp(15px,calc(.015 * var(--machine-w)),25px)/1 sans-serif;text-shadow:0 1px rgba(255,255,255,.55),0 -1px rgba(45,20,10,.35);pointer-events:none}.controls .dial.dial-vertical span{left:50%;top:102%;transform:translate(-50%)}.controls .dial.dial-horizontal span{right:auto;left:50%;top:102%;transform:translate(-50%)}.controls .tuning-wheel{width:calc(.112 * var(--machine-w));height:calc(.041 * var(--machine-w));border:2px solid #171514;border-radius:10px 10px 22px 22px/8px 8px 15px 15px;padding:7px 10px;background:linear-gradient(180deg,#050505,#171514 55%,#020202);box-shadow:inset 0 5px 8px #000,inset 0 -2px #ffffff1a,0 2px 4px #1e0c0559}.controls .tuning-drum{position:absolute;inset:13% 8%;border-radius:48%/25%;background:url(/assets/gyro-roller-clean.png) center / 100% 100% no-repeat;transform:rotateX(var(--roller-tilt));transform-origin:center;pointer-events:none}.controls .dial.dial-vertical,.controls .dial.dial-horizontal{width:calc(.104 * var(--machine-w));height:calc(.078 * var(--machine-w));background:url(/assets/movement-knob.png) center / contain no-repeat}.controls .dial.dial-vertical{transform:translate(-50%,-50%) rotate(90deg)}.controls .dial.dial-horizontal{transform:translate(-50%,-50%)}.controls .dial-face,.controls .dial span{display:none}.controls .dial.turning{filter:brightness(1.08)}.controls .tuning-wheel{width:calc(.055 * var(--machine-w));height:calc(.148 * var(--machine-w));padding:0;border:0;border-radius:0;background:url(/assets/spin-roller.png) center / contain no-repeat;box-shadow:none;transform:translate(-50%,-50%);cursor:ns-resize}.controls .tuning-drum{display:none}.controls .tuning-wheel.turning{filter:brightness(1.08)}.countdown:not([hidden]){left:calc(50% - .279 * var(--machine-w));top:calc(50% - .105 * var(--machine-h));width:calc(.068 * var(--machine-w));height:calc(.052 * var(--machine-h));transform:translate(-50%,-50%)}.controls .dial.dial-vertical,.controls .dial.dial-horizontal{width:calc(.075 * var(--machine-w));height:calc(.056 * var(--machine-w))}.controls .dial-face,.controls .dial.dial-horizontal .dial-face{display:block;left:50%;top:50%;width:55%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--knob-angle));background:url(/assets/movement-knob-face-final.png) center / contain no-repeat;filter:none}.controls .dial.dial-vertical .dial-face,.controls .dial.dial-horizontal .dial-face{background-image:url(/assets/movement-knob-face-final.png)}.controls .dial.turning .dial-face{filter:brightness(1.1)}.controls .tuning-wheel{width:calc(.067 * var(--machine-w));height:calc(.18 * var(--machine-w));background:url(/assets/spin-roller-vertical.png) center / contain no-repeat;transform:translate(-50%,-50%)}.controls .dial.dial-vertical,.controls .dial.dial-horizontal{width:calc(.052 * var(--machine-w));height:calc(.052 * var(--machine-w));background:none;transform:translate(-50%,-50%)}.controls .dial-face,.controls .dial.dial-vertical .dial-face,.controls .dial.dial-horizontal .dial-face{display:block;position:absolute;inset:0;width:100%;height:100%;aspect-ratio:1;transform:rotate(var(--knob-angle));transform-origin:center;background:url(/assets/movement-knob-final.png) center / contain no-repeat;filter:drop-shadow(0 2px 2px rgba(25,10,4,.34));pointer-events:none}.controls .dial span{display:block;position:absolute;left:50%;top:calc(100% + 5px);transform:translate(-50%);color:#72492f;font:800 clamp(13px,calc(.013 * var(--machine-w)),22px)/1 sans-serif;text-shadow:0 1px rgba(255,255,255,.55);pointer-events:none}.controls .dial.turning .dial-face{filter:brightness(1.08) drop-shadow(0 2px 2px rgba(25,10,4,.34))}.controls .tuning-wheel{width:calc(.04 * var(--machine-w));height:calc(.132 * var(--machine-w));padding:0;border:0;border-radius:0;background:url(/assets/spin-roller-final-vertical.png) center / contain no-repeat;box-shadow:none;transform:translate(-50%,-50%);cursor:ns-resize}.controls .tuning-wheel.turning{filter:brightness(1.1)}.countdown:not([hidden]){left:calc(50% - .172 * var(--machine-w));top:calc(50% - .062 * var(--machine-h));width:calc(.068 * var(--machine-w));height:calc(.052 * var(--machine-h));transform:translate(-50%,-50%)}.controls .dial.dial-vertical{left:calc(50% - .205 * var(--machine-w));top:calc(50% + .3 * var(--machine-h))}.controls .dial.dial-horizontal{left:calc(50% + .205 * var(--machine-w));top:calc(50% + .3 * var(--machine-h))}.controls .dial.dial-vertical,.controls .dial.dial-horizontal{width:calc(.057 * var(--machine-w));height:calc(.057 * var(--machine-w))}.controls .tuning-wheel{left:50%;top:calc(50% + .3 * var(--machine-h));width:calc(.145 * var(--machine-w));height:calc(.043 * var(--machine-w));background-image:url(/assets/spin-roller.png);background-position:center;background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%);cursor:ns-resize}.countdown:not([hidden]){left:calc(50% - .216 * var(--machine-w));top:calc(50% - .059 * var(--machine-h));width:calc(.058 * var(--machine-w));height:auto;min-height:calc(.046 * var(--machine-h))}.controls .dial.dial-vertical,.controls .dial.dial-horizontal{width:calc(.043 * var(--machine-w));height:calc(.043 * var(--machine-w))}.controls .dial span{display:block;top:calc(100% + 7px);width:max-content;color:#86664d;font:700 clamp(7px,calc(.0065 * var(--machine-w)),11px)/1.1 Georgia,serif;letter-spacing:.08em;text-shadow:0 1px 0 rgba(255,255,255,.72),0 -1px 0 rgba(70,43,25,.58);opacity:.9}.controls .dial.dial-vertical span{font-size:0}.controls .dial.dial-vertical span:after{content:"▲  UP / DOWN  ▼";font:700 clamp(7px,calc(.0065 * var(--machine-w)),11px)/1.1 Georgia,serif}.controls .dial.dial-horizontal span{font-size:0}.controls .dial.dial-horizontal span:after{content:"◀  LEFT / RIGHT  ▶";font:700 clamp(7px,calc(.0065 * var(--machine-w)),11px)/1.1 Georgia,serif}.controls .tuning-wheel{width:calc(.126 * var(--machine-w));height:calc(.047 * var(--machine-w));padding:0;background:linear-gradient(180deg,#c5975b3b,#6f462414);border:1px solid rgba(133,91,53,.32);border-radius:18px;box-shadow:inset 0 2px 5px #5d35184d,0 1px #ffffff73;overflow:visible}.controls .tuning-drum{display:block;position:absolute;inset:9% 5%;border-radius:45%/25%;background:url(/assets/spin-roller.png) center / 100% 100% no-repeat;transform:rotateX(var(--roller-tilt));transform-origin:center;transition:transform 70ms linear,filter 90ms linear;pointer-events:none}.controls .tuning-wheel.turning .tuning-drum{filter:brightness(1.13)}.controls .tuning-wheel:after{content:"↻  ROTATE  ↺";position:absolute;left:50%;top:calc(100% + 6px);transform:translate(-50%);width:max-content;color:#86664d;font:700 clamp(8px,calc(.007 * var(--machine-w)),12px)/1 Georgia,serif;letter-spacing:.12em;text-shadow:0 1px 0 rgba(255,255,255,.72),0 -1px 0 rgba(70,43,25,.58);opacity:.92;pointer-events:none}.countdown:not([hidden]){left:calc(50% - .19 * var(--machine-w));top:calc(50% - .059 * var(--machine-h));transform:translate(-50%,-50%) rotate(0);text-align:center}.countdown strong{display:block;width:100%;line-height:1;text-align:center;transform:none}.controls .tuning-wheel{--roller-shift: 0px;overflow:hidden;background:linear-gradient(180deg,#c5975b38,#6f462414)}.controls .tuning-drum{display:block;position:absolute;inset:9% 5%;overflow:hidden;border-radius:46%/24%;background:url(/assets/spin-roller-final.png) center / 100% 100% no-repeat;transform:rotateX(var(--roller-tilt));transform-origin:center;transition:transform 55ms linear,filter 70ms linear}.controls .tuning-drum:after{content:"";position:absolute;inset:-40% 5%;border-radius:inherit;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.16) 5px 6px,rgba(0,0,0,.18) 6px 10px);background-position:0 var(--roller-shift);mix-blend-mode:overlay;pointer-events:none}.controls .tuning-wheel.turning .tuning-drum{filter:brightness(1.14)}.controls .tuning-wheel{cursor:ew-resize}.controls .tuning-drum:after{background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.16) 5px 6px,rgba(0,0,0,.18) 6px 10px);background-position:var(--roller-shift) 0}.controls .tuning-drum,.controls .tuning-wheel.turning .tuning-drum{transform:none}.controls .dial.dial-vertical,.controls .dial.dial-horizontal{filter:sepia(.22) brightness(.88) drop-shadow(0 3px 5px rgba(18,7,3,.62)) drop-shadow(0 1px 1px rgba(18,7,3,.44));mix-blend-mode:normal;opacity:.92;transition:filter .12s ease,opacity .12s ease}.controls .dial.dial-vertical:hover,.controls .dial.dial-horizontal:hover{filter:sepia(.14) brightness(.98) drop-shadow(0 3px 7px rgba(18,7,3,.55)) drop-shadow(0 1px 1px rgba(18,7,3,.35));opacity:1}.controls .dial.turning .dial-face{filter:brightness(1.06)}.controls .tuning-wheel{filter:sepia(.1) brightness(.95) drop-shadow(0 3px 8px rgba(18,7,3,.55));opacity:1;transition:filter .1s ease}.controls .tuning-wheel:hover{filter:sepia(.05) brightness(1.02) drop-shadow(0 3px 8px rgba(18,7,3,.5))}.controls .tuning-wheel.turning{filter:sepia(.05) brightness(1.06) drop-shadow(0 3px 8px rgba(18,7,3,.5))}.controls .dial span,.controls .tuning-wheel:after{color:#50341ed1;text-shadow:0 1px 0 rgba(255,235,190,.65),0 -1px 0 rgba(40,20,8,.5);letter-spacing:.14em}.controls .tuning-wheel:after{content:"↶  SPIN  ↷";top:auto;bottom:calc(100% + 7px);color:#4c311dd6;font:700 clamp(8px,calc(.007 * var(--machine-w)),12px)/1 Georgia,serif;letter-spacing:.16em;text-shadow:0 1px 0 rgba(255,239,205,.72),0 -1px 0 rgba(38,19,8,.58)}.controls .tuning-wheel{width:calc(.112 * var(--machine-w));height:calc(.039 * var(--machine-w));overflow:visible}.controls .tuning-drum{inset:7% 4%;overflow:hidden}.controls .tuning-wheel:after{top:auto;bottom:calc(100% + 5px);z-index:2;display:block;visibility:visible;opacity:.95}.controls .tuning-wheel:after{top:calc(100% + 7px);bottom:auto}.mode-row{margin-bottom:.4rem}.btn-mode{flex:1;opacity:.65}.btn-mode.active{opacity:1;box-shadow:0 0 0 2px #ffd2788c,0 3px #17181c,0 6px 12px #00000080}.cosmetics-row{flex-direction:column;align-items:flex-start;gap:.5rem}.cosmetic-swatches{display:flex;gap:.55rem;flex-wrap:wrap}.cosmetic-swatch{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;display:grid;place-items:center;font-size:.6rem;color:#0000008c}.cosmetic-swatch.selected{border-color:#fff;box-shadow:0 0 0 2px #fff6}.cosmetic-swatch.locked{opacity:.3;cursor:not-allowed}.mode-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.mode-row-grid .btn-mode{flex:none;width:100%}.stats-row div{min-width:90px;padding:.4rem .7rem;opacity:.85}.stats-row strong{font-size:1rem}.fit-label{margin-top:.3rem}.fit-value{color:var(--ember, #ff7a4d)}.pct-sign{margin-left:.18em;font-size:.72em;vertical-align:.12em}.rotate-overlay{display:none;position:fixed;inset:0;z-index:9999;background:#1c1712;align-items:center;justify-content:center;text-align:center;padding:2rem}.rotate-card{display:flex;flex-direction:column;align-items:center;gap:1rem;color:#f0e6d2;font-family:inherit;max-width:320px}.rotate-icon{font-size:3rem;color:var(--brass, #c9a227);animation:rotate-nudge 1.6s ease-in-out infinite}.rotate-card p{margin:0;font-size:1.05rem;line-height:1.5}@keyframes rotate-nudge{0%,to{transform:rotate(0)}50%{transform:rotate(-90deg)}}@media(orientation:portrait){.rotate-overlay{display:flex}}.fullscreen-btn{position:absolute;top:1rem;right:1rem;font-size:1.1rem;z-index:21}.install-btn{position:absolute;top:1rem;right:4.2rem;font-size:1rem;z-index:21}.joystick{display:none;position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9c65a47,#1c1712b8 62%,#0a0806e0);border:1px solid rgba(133,91,53,.45);box-shadow:inset 0 3px 8px #0000008c,inset 0 -2px 4px #ffffff14,0 2px 4px #1e0c0566;pointer-events:auto;touch-action:none}.move-joystick,.rotate-joystick{top:calc(50% + .3 * var(--machine-h));width:calc(.145 * var(--machine-w));height:calc(.145 * var(--machine-w));transform:translateY(-50%)}.move-joystick{left:.8rem}.rotate-joystick{left:auto;right:.8rem}.joystick-cap{--stick-x: 0px;--stick-y: 0px;position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;border-radius:50%;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));background:url(/assets/movement-knob-final.png) center / contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));pointer-events:none;transition:transform .12s ease}.joystick.dragging .joystick-cap{transition:none}.joystick.dragging{filter:brightness(1.08)}.joystick small{position:absolute;left:50%;top:calc(100% + 7px);transform:translate(-50%);width:max-content;color:#86664d;font:700 clamp(7px,calc(.0065 * var(--machine-w)),11px)/1.1 Georgia,serif;letter-spacing:.08em;text-shadow:0 1px 0 rgba(255,255,255,.72),0 -1px 0 rgba(70,43,25,.58);opacity:.9;pointer-events:none}.joystick:focus-visible{outline:2px solid #f0c174;outline-offset:3px}@media(pointer:coarse){.controls .dial,.controls .tuning-wheel{pointer-events:none}.joystick{display:block}}#fullscreenBtnHud,#exitBtnHud{position:absolute;top:1rem;left:auto;bottom:auto;min-width:0;min-height:0;opacity:1;pointer-events:auto;z-index:22}#fullscreenBtnHud{right:1rem;width:2.2rem;height:2.2rem;font-size:1rem}#exitBtnHud{right:4.4rem;width:auto;height:2.2rem;padding:0 .65rem;border-radius:999px;font:800 .62rem/1 Georgia,serif;letter-spacing:.08em;white-space:nowrap}#fullscreenBtnHud:hover,#fullscreenBtnHud:focus-visible,#exitBtnHud:hover,#exitBtnHud:focus-visible{opacity:.85}