/* Approved cabinet design. Game board geometry remains owned by style.css. */
:root[data-style]{--bg:#eeeada;--surface:#faf7eb;--surface2:#e2ddcb;--ink:#22221e;--muted:#626055;--line:#22221e33;--accent:#a95c3c;--accent-ink:#fff8ee;--soft:#e9ddcd;--radius:10px;--shadow:none;--copper-highlight:#a95c3c}
:root[data-style][data-theme=dark]{--bg:#141413;--surface:#1d1d1b;--surface2:#292926;--ink:#f0ecd9;--muted:#b3b0a3;--line:#ece7ce26;--accent:#cf8650;--accent-ink:#23150f;--soft:#30251e;--copper-highlight:#cf8650}
body{border-top:3px solid #a95c3c}
.header{padding-top:20px;padding-bottom:20px;max-width:1332px}.watzl-logo img{filter:none!important}
.header .arcade-word{color:var(--ink)}.header nav{font-size:14px}.preferences{gap:12px}
#home{max-width:1260px}.hero{grid-template-columns:.9fr 1.1fr;gap:7%;padding:46px 0 54px;min-height:570px}
.hero .eyebrow,.eyebrow{font-family:monospace;letter-spacing:1.5px}.hero .eyebrow{color:var(--muted)}
.hero h1{font-family:Impact,'Arial Narrow','Helvetica Neue',sans-serif;font-weight:900;font-stretch:condensed;font-size:clamp(90px,10.5vw,142px);line-height:.84;letter-spacing:-3px;margin:25px 0 28px}
.hero h1 em{font-style:normal;background:linear-gradient(178deg,#e0a077 0%,#c27c53 24%,#a95c3c 60%,#935034 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.45px #eeb58b80;text-shadow:none;filter:drop-shadow(0 0 1px #ffd4a99c) drop-shadow(0 0 5px #e99b6659) drop-shadow(0 0 17px #d37d4933) drop-shadow(0 0 42px #b7673620)}
[data-theme=light] .hero h1 em{background-image:linear-gradient(178deg,#b77650,#a95c3c 60%,#8b492f);-webkit-text-stroke:.35px #d6926040;filter:drop-shadow(0 0 2px #d9895530) drop-shadow(0 0 12px #a95c3c18)}
.hero-description{font-size:15px;line-height:1.75;max-width:370px}.hero-actions{gap:20px;margin:26px 0 22px}.hero-notes{font-family:monospace;font-size:10px;gap:12px;flex-wrap:wrap}.hero-notes span+span:before{margin-right:12px}
.hero-art{height:auto;min-width:0;align-self:center}.hero .orbit,.hero .art-star,.hero .mini-card,.hero .floating-note{display:none}
.hero .hero-cabinet{position:relative;left:auto;top:auto;width:100%;transform:none;animation:none;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 18px 40px #0003;overflow:visible}
.hero .cabinet-label{padding:17px 18px;font:10px/1.5 monospace;letter-spacing:.7px;color:var(--muted)}.cabinet-label span:last-child{color:var(--copper-highlight);text-shadow:0 0 2px #ffcc9880,0 0 7px #d9895545,0 0 18px #a95c3c24}
.hero .cabinet-screen{margin:0 10px;border:1px solid var(--line);border-radius:3px;overflow:hidden;aspect-ratio:400/290}.hero .hero-cabinet canvas{height:100%;width:100%;object-fit:cover}.hero .cabinet-foot{padding:22px 18px;background:var(--surface);border-radius:0 0 10px 10px;font:11px/1.5 monospace;letter-spacing:.5px;gap:12px}
#surprise{padding:14px 18px;border-radius:8px}#motion-toggle{padding:10px 14px;border-radius:8px;margin-top:4px;font-size:11px}
.button,.outline,.icon-button,.text-button,.mode-options button,.chip-row button{border-radius:8px}.button{font-size:14px}.button.primary{--glow-face:var(--surface);color:var(--ink)}.button.primary:hover{filter:none}
.collection{padding-top:30px}.section-head h2{font-size:34px;letter-spacing:-1px}.game-grid{gap:24px}
#home .game-card{border-radius:9px;border:1px solid var(--line);box-shadow:none;padding:8px;background:var(--surface);overflow:visible;transform:none;transition:transform .18s}
#home .game-card:hover{transform:translateY(-3px)}.card-art,.card-frame{border-radius:4px;overflow:hidden}.card-body{padding:18px 10px 12px}.card-title{font-size:22px;font-weight:700}.card-description{font-size:12px;line-height:1.6}.card-meta{font:10px/1.5 monospace;gap:8px}.card-tags{font-family:monospace}
#home .game-card::before,#home .game-card::after{display:none}
.together-banner{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;margin:44px 0;padding:32px 8px;gap:30px}.together-banner h2{font-size:34px}.together-banner p:last-child{font-size:14px}.pair-art{filter:saturate(.6)}
footer{font-family:monospace}.rank-empty,.score-ticket,dialog{border-radius:10px}.score-ticket{border:1px solid var(--line)}.ticket-score{color:var(--copper-highlight)}
/* Independent layers avoid wrapping controls, so labels, focus and game handlers keep their DOM contract. */
@property --arcade-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
:where(.arcade-lit){position:relative}
.arcade-lit{isolation:isolate;overflow:visible;--glow-face:var(--surface);--spectrum:#824237 0deg,#b87347 55deg,#b8b05c 100deg,#64a87d 155deg,#548bba 205deg,#9864b4 265deg,#be6b8a 315deg,#824237 360deg}
.arcade-glow{position:absolute;inset:-2px;border-radius:inherit;z-index:-1;pointer-events:none;background:conic-gradient(from var(--arcade-angle),var(--spectrum));animation:arcade-orbit 4s linear infinite paused}
.arcade-glow::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:inherit;filter:blur(15px);opacity:.55;z-index:-1}
.arcade-glow::after{content:'';position:absolute;inset:2px;border-radius:inherit;background:var(--glow-face)}
.arcade-lit.in-view>.arcade-glow{animation-play-state:running}
.chip-row button[aria-pressed=true],.style-switch button[aria-pressed=true]{--glow-face:var(--ink);color:var(--bg)}
button.primary:not(.button){--glow-face:var(--accent)}
.game-card>.arcade-glow,.hero-cabinet>.arcade-glow{opacity:0;animation-play-state:paused!important;transition:opacity .18s}
@media(hover:hover){:is(.game-card,.hero-cabinet):hover>.arcade-glow{opacity:1;animation-play-state:running!important}}
.game-card:focus-visible>.arcade-glow{opacity:1;animation-play-state:running!important}
.arcade-lit:disabled>.arcade-glow{opacity:0;animation:none}
.arcade-lit.dialog-close{position:absolute}.arcade-lit:not(.game-card):active{translate:0 1px}
@keyframes arcade-orbit{to{--arcade-angle:360deg}}
:root.motion-paused .arcade-lit>.arcade-glow,:root.fx-hidden .arcade-lit>.arcade-glow{animation-play-state:paused!important}
[data-fx-borders=off] .arcade-glow{display:none}
.arcade-fx-controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.arcade-fx-controls button{padding:10px 14px;font-size:11px}
.effects-options{display:grid;gap:16px;margin:24px 0}.effects-options label{display:flex;align-items:center;gap:12px;font-size:14px}.effects-options input{min-height:24px;width:24px;height:24px;accent-color:var(--accent)}
.arcade-particle{position:fixed;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:1px;background:var(--spark);z-index:100;pointer-events:none;animation:arcade-burst 650ms ease-out both}
@keyframes arcade-burst{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(140deg);opacity:0}}
.arcade-victory{animation:arcade-win 800ms ease-out}.arcade-victory .ticket-score{text-shadow:0 0 2px #ffcc9880,0 0 7px #d9895545,0 0 18px #a95c3c24}
@keyframes arcade-win{from{box-shadow:0 0 0 1px #cf8650,0 0 60px #cf865055;transform:translateY(8px)}to{box-shadow:0 0 0 1px transparent;transform:none}}
.arcade-arrival{animation:arcade-win 900ms ease-out}.arcade-logo-pop{animation:arcade-logo-pop 450ms ease-out}@keyframes arcade-logo-pop{50%{transform:rotate(-5deg) scale(1.06)}}
.roulette-active .cabinet-screen{outline:2px solid var(--copper-highlight);outline-offset:2px}.roulette-active #surprise-name{font-variant-numeric:tabular-nums}
[data-style=retro] .hero h1{font-family:Silkscreen,monospace;font-size:clamp(54px,6.5vw,80px);line-height:1.1;letter-spacing:-3px}
@media(max-width:1000px){.hero{gap:5%}.hero h1{font-size:105px}.hero-actions{gap:16px}.preferences{gap:9px}.hero-notes{max-width:350px}}
@media(max-width:700px){.header{padding:18px 5%;gap:18px}.header .preferences{gap:12px}.hero{grid-template-columns:1fr;gap:30px;padding:30px 0 36px;min-height:0}.hero h1{font-size:104px;line-height:.85;margin:22px 0}.hero-art{height:auto;width:100%;max-width:none}.hero-actions{gap:16px;flex-wrap:wrap}.hero .hero-cabinet{width:100%;max-width:none}.hero-notes{font-size:10px}.section-head h2{font-size:30px}.game-grid{gap:22px}.together-banner{padding:28px 0;gap:24px}.together-banner h2{font-size:30px}.card-title{font-size:20px}.card-body{padding:14px 8px 10px}[data-style=retro] .hero h1{font-size:62px;line-height:1.1}}
@media(prefers-reduced-motion:reduce){.arcade-glow{animation:none!important}.arcade-particle{display:none}.arcade-victory,.arcade-arrival,.arcade-logo-pop{animation:none}#home .game-card:hover{transform:none}}
.motion-paused .arcade-particle{display:none}.motion-paused .arcade-victory,.motion-paused .arcade-arrival,.motion-paused .arcade-logo-pop{animation:none}
.header .style-switch{gap:10px;padding:0;border:0;background:transparent;overflow:visible}
.hero .cabinet-foot{align-items:center;padding:22px 18px;min-height:104px}.cabinet-foot p{font:10px/1.5 monospace;margin:0 0 8px;color:var(--muted)}.cabinet-foot h2{font:700 36px/1.1 var(--font);letter-spacing:-1px;margin:0}.cabinet-foot .icon-button{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center}
@media(max-width:700px){.cabinet-foot h2{font-size:30px}.hero .cabinet-foot{padding:18px 16px}}

#effects-dialog #try-fireworks{margin-bottom:16px}

.text-link.arcade-lit{padding:10px 14px;border-radius:8px;text-decoration:none;line-height:1.5}

.segmented{gap:12px;padding:4px;background:transparent}.segmented button{--glow-face:var(--surface2)}.segmented button[aria-pressed=true]{--glow-face:var(--ink);color:var(--bg)}