@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('assets/barlow-900.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('assets/barlow-800.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/barlow-700.ttf') format('truetype')}

:root{--gold:#ffdd87;--pink:#ff65b7;--mint:#6df7dc}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100dvh;display:flex;flex-direction:column;background:#080b16;color:#fff2dd;font-family:'DM Sans',Arial,sans-serif}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:-3px}[hidden]{display:none!important}.console{flex:none;position:relative;z-index:3;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(100deg,#252332,#0b0d18 30%,#26202f 75%,#111421);border-bottom:3px solid #c2a9b0;box-shadow:0 3px 15px #000b,inset 0 1px #fff3}.console-top,.console-bottom{display:flex;align-items:center;gap:24px;padding:10px 24px}.console-top{border-bottom:1px solid #c09bba22}.brand{color:#f5ead6;text-decoration:none;letter-spacing:-.6px;font-size:12px;font-weight:800}.brand span{color:var(--gold)}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:37px;font-style:italic;line-height:.9;margin:0 12px 0 0;color:var(--gold);text-shadow:0 2px #a25d43,0 0 15px #ffdd8722;white-space:nowrap}h1 em{color:var(--pink);font-style:inherit;text-shadow:0 2px #8d2562,0 0 15px #ff65b744}h1 small{font:600 6px 'DM Sans',sans-serif;display:block;letter-spacing:4.5px;text-align:center;margin-top:7px;color:#c4a2bb}.score{padding:4px 16px;background:#050911;border:1px solid #72606c;border-radius:4px;min-width:120px;text-align:right;box-shadow:inset 0 2px 5px #000}.score small,.stat small{display:block;font-size:7px;letter-spacing:1.7px;color:#bca8c0;margin-bottom:3px}.score b{font-family:monospace;font-size:24px;letter-spacing:3px;color:var(--gold);text-shadow:0 0 10px #ffd36a55}.best b{color:var(--pink)}.stat{text-align:center;min-width:70px}.stat b{font-family:'Barlow Condensed',Impact,sans-serif;font-size:21px;color:var(--gold)}#balls{color:var(--mint);font:16px Arial;letter-spacing:4px}.stat i{font-style:normal;color:#8d7b99;font-size:14px}#tier{font-size:15px;letter-spacing:1px}#shelf{margin-left:auto;font-size:9px;white-space:nowrap}#shelf b{color:var(--gold);margin-left:8px}button{background:#ffffff08;border:1px solid #a089a044;border-radius:5px;padding:9px 12px;font-size:10px;white-space:nowrap}#fullscreen{font-size:23px;line-height:1;padding:3px 8px}.console-bottom{gap:16px;padding-top:8px;padding-bottom:8px}.how{margin:0;font-size:10px;color:#e1d1e7;white-space:nowrap}.how b{color:var(--gold);font-size:8px;margin-right:5px}.how>span{color:#756482;margin:0 9px}.how small{display:block;font-size:8px;color:#9d8aa9;margin-top:5px}.power{margin-left:auto;width:160px;flex-shrink:1;text-align:center;min-width:80px}.track{height:8px;border:1px solid #ffffff22;background:#02040b;border-radius:6px;overflow:hidden;margin-bottom:4px}.track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--mint),var(--gold),var(--pink));box-shadow:0 0 15px var(--pink)}#power-label{font-size:6px;letter-spacing:1.6px;color:#c5b3c9}#launch{padding:8px 21px;background:radial-gradient(ellipse at top,#ffd5ed,#f275b5 35%,#9b3d7a);border:2px solid #efc6db;box-shadow:inset 0 2px 2px #fff8,0 3px 0 #30172e;color:#280f29;font-size:12px;font-weight:800;letter-spacing:.5px}#launch small{display:block;font-size:6px;letter-spacing:1.5px;margin-top:2px}#launch:active:not(:disabled){transform:translateY(2px)}.table{flex:1;min-height:0;position:relative}.glass{height:100%;width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 10px #000}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#03061770;backdrop-filter:blur(2px)}.ticket{width:min(390px,85vw);padding:24px 30px;text-align:center;background:linear-gradient(135deg,#312039f5,#10172bf5);border:1px solid #f4d38a;border-radius:80px 80px 16px 16px;box-shadow:0 20px 80px #000b,inset 0 0 25px #f970b311}.ticket>p:first-child{color:var(--gold);font-size:8px;letter-spacing:2px}#ticket-icon{font-size:52px;color:var(--gold);text-shadow:0 0 30px #ffca6077}.ticket h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:46px;line-height:1;margin:6px 0 15px}.ticket>p{font-size:11px;line-height:1.7;color:#c6b7cf}.ticket button{display:block;width:100%;background:var(--gold);color:#271b31;font-weight:800;letter-spacing:1px;padding:13px;margin:20px 0 14px;border:0;box-shadow:0 4px #9e6646}.ticket>small{font-size:6px;letter-spacing:1.3px;color:#a994b6}#announcement{position:absolute;left:15%;right:15%;bottom:5px;text-align:center;font-size:13px;letter-spacing:1px;color:var(--gold);font-weight:800;pointer-events:none;text-shadow:0 2px 6px #000,0 0 12px #000}dialog{background:#171426;color:#f7ecda;border:1px solid #c4a473;border-radius:16px;max-width:92vw;width:500px;padding:30px}dialog::backdrop{background:#02040bdc;backdrop-filter:blur(7px)}dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:32px}dialog p{font-size:11px;line-height:1.8;color:#bcaac7}#close{float:right;font-size:20px;border:0}.eyebrow{color:var(--gold);letter-spacing:2px}#collection-items>div{display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #ffffff22}#collection-items span{font-size:25px}#collection-items strong{font-size:12px}#collection-items b{margin-left:auto;color:var(--gold)}@media(max-width:1200px){.brand,.prize-level{display:none}.console-top,.console-bottom{gap:13px;padding-inline:14px}.score{min-width:100px;padding:4px 10px}.how{font-size:9px}.how>span{margin:0 4px}.console-bottom button{font-size:9px;padding-inline:9px}.power{width:110px}}@media(max-width:800px){.console-top{gap:10px;padding:8px}.console-top h1{font-size:28px;margin-right:0}.console-top h1 small{font-size:5px;letter-spacing:2.8px}.score{min-width:80px;padding:4px 7px}.score b{font-size:18px;letter-spacing:1px}.score small,.stat small{font-size:6px;letter-spacing:.6px}.stat{min-width:50px}.stat b{font-size:17px}#balls{font-size:12px;letter-spacing:1px}.console-bottom{padding:6px 8px;gap:8px;flex-wrap:wrap}.how{order:0;flex-basis:100%;display:flex;justify-content:center;align-items:center;gap:4px;font-size:8px}.how small{display:none}.power{margin-left:0;flex:1;max-width:190px}#launch{padding:7px 13px;font-size:10px}.console-bottom>button:not(#launch){font-size:8px;padding:8px 5px}#shelf{font-size:0;padding:8px}#shelf b{font-size:11px;margin:0}#fullscreen{font-size:20px}.best{display:none}#announcement{font-size:10px;left:5%;right:5%}.ticket{padding:16px 25px}.ticket h2{font-size:38px}#ticket-icon{font-size:40px}}@media(max-height:600px){.console-top{padding-block:5px}.console-top h1{font-size:25px}.console-top h1 small{display:none}.console-bottom{padding-block:4px}.how small{display:none}.ticket{padding:14px 25px;border-radius:40px 40px 10px 10px}.ticket h2{font-size:29px;margin:4px 0 8px}#ticket-icon{font-size:27px}.ticket>p{margin:7px 0;font-size:10px}.ticket button{margin:10px 0;padding:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-width:500px){.console-top{gap:6px}.console-top h1{font-size:23px}.score{min-width:64px}.score b{font-size:15px}.stat{min-width:40px}.stat b{font-size:15px}#shelf{padding:6px}#fullscreen{padding:3px 6px}.console-bottom{gap:5px}.console-bottom>button:not(#launch){font-size:7px}.power{min-width:45px}.how{font-size:7px}.how b{font-size:7px;margin-right:1px}}
@media(max-width:800px){.console-top{flex-wrap:wrap}.best{display:block;order:8;flex-basis:100%;padding:0;border:0;background:none;box-shadow:none;text-align:center}.best small,.best b{display:inline;font-size:8px;letter-spacing:1px}.best b{margin-left:8px}}

.console{border-bottom-color:#f472d9;background:linear-gradient(110deg,#271148,#0b1024 35%,#271239 70%,#071c2d);box-shadow:0 3px 22px #e651ca44,inset 0 1px #fff3}h1{color:#7fffe0;text-shadow:0 2px #146e80,0 0 17px #00ffd955}h1 em{color:#ff80e3;text-shadow:0 2px #861a72,0 0 20px #ff41cf88}.ticket{background:radial-gradient(ellipse at 50% 0,#8c267955,transparent 65%),linear-gradient(135deg,#27163df7,#101a35f7);border-color:#e49bff;box-shadow:0 0 45px #f950c32b,0 20px 80px #000b}#ticket-icon{color:#b5ffce;text-shadow:0 0 35px #76ffd6}.ticket button{background:linear-gradient(110deg,#87ffde,#e8ffac,#ff9ce6);box-shadow:0 4px #7a398c}#music[aria-pressed=true]{color:#9af9e5;border-color:#6ef5cf66}@media(min-width:801px){.console-bottom{gap:10px}.how{font-size:9px}.power{width:130px}}@media(max-width:800px){.console-bottom{gap:4px}.console-bottom>button:not(#launch){padding-inline:4px;font-size:7px}.power{min-width:35px}}

.ticket #primary{background-color:#ffdc83;background-image:linear-gradient(110deg,#87ffde,#e8ffac,#ff9ce6);color:#171124;opacity:1;visibility:visible;min-height:48px;font-size:13px;border:2px solid #fff3c2;text-shadow:none;box-shadow:0 4px #76388b,0 0 18px #87ffde33}.ticket #primary:hover{background-image:linear-gradient(110deg,#bcffec,#f3ffcf,#ffc4ee)}

/* Prominent centered launch station. */
.console-bottom{display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);align-items:center;gap:18px;padding:10px 24px 12px}.how{grid-column:1;white-space:normal;line-height:1.8}.launch-station{grid-column:2;display:flex;flex-direction:column;align-items:stretch;gap:8px}.launch-station #launch{order:0;width:100%;min-height:58px;padding:9px 22px;border:2px solid #fff5c5;border-radius:12px;background:linear-gradient(110deg,#89ffe0,#eaff9d 48%,#ffc080);color:#182237;font-size:17px;font-weight:900;letter-spacing:1.2px;box-shadow:inset 0 2px 3px #fff9,0 4px 0 #4f5d31,0 0 22px #a9ffb144}.launch-station #launch small{font-size:8px;letter-spacing:2.5px;margin-top:4px}.launch-station #launch:disabled{opacity:.65;filter:saturate(.65)}.launch-station .power{order:1;display:flex;align-items:center;gap:8px;max-width:none;min-width:0;width:100%;margin:0}.launch-station .track{flex:1;height:7px;margin:0}.launch-station #power-label{font-size:6px;letter-spacing:1px;min-width:84px}.utility-controls{grid-column:3;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.utility-controls button{padding:9px 11px;font-size:9px}@keyframes launchGlow{0%,100%{box-shadow:inset 0 2px 3px #fff9,0 4px 0 #4f5d31,0 0 14px #a9ffb144}50%{box-shadow:inset 0 2px 3px #fff9,0 4px 0 #4f5d31,0 0 30px #a9ffb188}}@media(prefers-reduced-motion:no-preference){#launch:not(:disabled){animation:launchGlow 2.8s ease-in-out infinite}}body:has(#motion[aria-pressed=true]) #launch{animation:none}@media(max-width:800px){.console-bottom{grid-template-columns:1fr minmax(190px,230px) 1fr;padding:6px 8px 9px;gap:7px}.how{grid-column:1/-1;grid-row:1;line-height:1.4;justify-content:center;flex-basis:auto}.launch-station{grid-column:2;grid-row:2}.launch-station #launch{min-height:52px;font-size:15px}.utility-controls{grid-column:1/-1;grid-row:3;justify-content:center;gap:8px}.utility-controls button{font-size:8px;padding:6px 10px}.launch-station #power-label{font-size:6px}.launch-station{gap:6px}}@media(max-height:600px){.console-bottom{padding-top:5px;padding-bottom:7px}.launch-station #launch{min-height:43px;font-size:14px}.launch-station #launch small{font-size:6px}.launch-station{gap:5px}}

/* Launch directly from the center of the table; clear it during ball flight. */
.console-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:8px;padding-bottom:8px}.utility-controls{grid-column:2}.glass>.launch-station{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:250px;max-width:78vw;grid-column:auto;grid-row:auto;padding:13px;background:#101329e8;border:1px solid #c8ffdf99;border-radius:18px;box-shadow:0 8px 30px #0008,0 0 30px #9affc533;backdrop-filter:blur(5px)}.glass>.launch-station:has(#launch:disabled){display:none}.glass>.launch-station #launch{min-height:62px;font-size:18px}.overlay{z-index:3}.glass>.launch-station .power{padding-inline:2px}@media(max-width:800px){.console-bottom{grid-template-columns:1fr;gap:6px}.how{grid-column:1;grid-row:1}.utility-controls{grid-column:1;grid-row:2}.glass>.launch-station{width:240px}.glass>.launch-station #launch{min-height:58px;font-size:17px}}
.glass>.launch-station{transform:translate(-50%,calc(-50% + 8px))}

#tour-button{font-size:9px;color:#a9ffe0;border-color:#88ffd066;white-space:nowrap}#tour-status{color:#ffdd87;font-size:7px;letter-spacing:1px}#table-menu{width:1000px;max-width:95vw;max-height:88dvh;overflow:auto}#close-tables{float:right;font-size:24px;border:0}#table-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px}.table-card{padding:0 0 14px;text-align:left;white-space:normal;overflow:hidden;border:1px solid #6d597d;background:#101325;position:relative}.table-card img{width:100%;height:110px;object-fit:cover;display:block}.table-card strong,.table-card span,.table-card small{display:block;margin:10px 12px 0}.table-card strong{font-size:13px;color:#fff0cc}.table-card span{font-size:9px;color:#b9adc8}.table-card small{font-size:8px;line-height:1.6;color:#8fffe0}.table-card:disabled{opacity:.55}.table-card:disabled img{filter:grayscale(.8) brightness(.6)}.table-card.selected{border:2px solid #9fffd9}.ticket #next-table{background:linear-gradient(110deg,#a4ffcd,#ffdd87);color:#171124;margin-bottom:8px;font-size:10px}.ticket:has(#next-table:not([hidden])) #primary{font-size:10px;min-height:36px;padding:8px;margin-top:8px;background:#eee0ff}#board[data-playing=true]{cursor:none}@media(max-width:800px){#tour-button{font-size:7px;padding:6px}#table-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.table-card img{height:85px}.table-card strong{font-size:10px}.table-card span,.table-card small{font-size:7px}.console-top{gap:5px}.console-top #shelf{margin-left:0}.console-top h1{font-size:21px}.console-top h1 small{font-size:5px;letter-spacing:1px}.how #tour-status{display:block;flex-basis:100%;text-align:center}.how{flex-wrap:wrap}}

.table-card:disabled{opacity:.8}.table-card:disabled img{filter:grayscale(.65) brightness(.75)}

/* Full-window glass with a readable floating control console. */
.table{position:fixed;inset:0;width:100%;height:100dvh}.console{position:absolute;inset:0 0 auto;z-index:4;background:linear-gradient(180deg,#0b1024c9,#16112888);border-bottom:1px solid #ffd3f044;box-shadow:0 6px 24px #0005}.console button,.score{background-color:#070c20c9}.console .how,.console .stat,.console h1{filter:drop-shadow(0 1px 3px #000)}


/* Prevent mobile browsers painting a tap/long-press overlay across the table. */
.table,.table *, .console,.console *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#launch{touch-action:none}


.title-block{flex-shrink:0;text-align:center}.title-block h1{margin-right:0}.home-link{display:inline-block;margin-top:6px;font:700 9px Arial,sans-serif;letter-spacing:.3px;color:#c9ffe9;text-decoration:none;text-shadow:0 1px 4px #000}.home-link:hover{text-decoration:underline}.home-link:focus-visible{outline:2px solid #9fffe1;outline-offset:3px}@media(max-width:800px){.home-link{font-size:8px;margin-top:5px}}

/* Big table-unlock celebration; steady alternative follows the lights setting. */
.overlay[data-celebrating=true]{background:radial-gradient(ellipse at center,#ffad3928,#51297755 50%,#020817aa);backdrop-filter:blur(1px)}.overlay[data-celebrating=true] .ticket{border:2px solid #ffecab;box-shadow:0 0 50px #ffbf6399,0 0 120px #ed49c744}.overlay[data-celebrating=true] #ticket-icon{font-size:76px;color:#fff1ac}.overlay[data-celebrating=true] #note{font-size:12px;color:#fff3bd}.overlay[data-celebrating=true] #heading{color:#fff2bf}.overlay[data-celebrating=true] #fine{font-size:9px;color:#b9ffe5}@keyframes victoryGlow{50%{box-shadow:0 0 70px #ffbf63bb,0 0 140px #ed49c777;transform:scale(1.025)}}@media(prefers-reduced-motion:no-preference){body:has(#motion[aria-pressed=false]) .overlay[data-celebrating=true] .ticket{animation:victoryGlow 1.2s ease-in-out infinite}}

.copyright{position:fixed;bottom:2px;right:8px;z-index:5;color:#f2e8fc;font:8px Arial,sans-serif;text-shadow:0 1px 3px #000,0 0 4px #000;pointer-events:none}.ticket #share-score{background:#17243b;color:#ceffe9;box-shadow:none;border:1px solid #a8dfc1;margin:8px 0;font-size:10px;padding:8px;min-height:34px}#share-dialog{z-index:8}#close-share{float:right;font-size:22px}#share-message{width:100%;padding:12px;background:#080f20;color:#fff;border:1px solid #aab8d0;border-radius:7px;resize:vertical;font:14px/1.5 Arial,sans-serif;user-select:text;-webkit-user-select:text}#copy-share{margin-top:12px;background:#a7ffdb;color:#102033;font-weight:bold;min-height:42px}@media(max-width:800px){.copyright{font-size:7px;right:5px}.utility-controls{gap:5px}}

#multiball-status{color:#b8fff0;font-size:8px;letter-spacing:.6px}#multiball-banner{position:absolute;top:25%;left:50%;transform:translateX(-50%);pointer-events:none;text-align:center;color:#fff1aa;text-shadow:0 2px 5px #000,0 0 15px #fa8a36;background:#11172ebd;border:1px solid #ffe4a488;border-radius:10px;padding:9px 18px;z-index:1;white-space:nowrap}#multiball-banner strong{display:block;font:italic 900 28px 'Barlow Condensed',Arial,sans-serif;letter-spacing:2px}#multiball-banner span{font:700 8px Arial,sans-serif;letter-spacing:1px}@media(max-width:800px){#multiball-status{font-size:7px}#multiball-banner strong{font-size:24px}#multiball-banner{top:27%;padding:6px 12px}}

@media(max-width:800px){.how #multiball-status{display:block;flex-basis:100%;text-align:center}#multiball-banner{top:max(30%,260px)}}


/* Compact mobile console: secondary controls live in one modal. */
.mobile-only{display:none}#mobile-menu{width:370px;padding:22px;max-height:88dvh;overflow:auto}#close-mobile-menu{float:right;font-size:24px;border:0;padding:2px 8px}#mobile-menu h2{margin:12px 0}.settings-record{display:flex;justify-content:space-between;align-items:center}.settings-record strong{font:700 20px monospace;color:var(--gold)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-grid button{min-height:44px;font-size:12px;padding:10px;background:#111a30;border-color:#8ab3b655}.settings-grid button[aria-pressed=true]{color:#a4ffdc;border-color:#79d8b688}#settings-resume{width:100%;min-height:44px;background:#b6ffe0;color:#132038;font-weight:800}
@media(max-width:800px){.console-top{display:flex;flex-wrap:nowrap;gap:5px;padding:7px 8px;align-items:center}.console-top .best,.console-top #tour-button,.console-top #shelf,.console-top #fullscreen,.console-top .prize-level{display:none}.console-top .title-block{margin-right:auto}.console-top h1{font-size:22px}.console-top h1 small{font-size:5px;letter-spacing:.7px;margin-top:4px}.home-link{font-size:7px;margin-top:4px}.console-top .score{min-width:62px;padding:5px 6px}.console-top .score b{font-size:17px;letter-spacing:1px}.console-top .score small{font-size:5px;letter-spacing:.5px}.console-top .stat{min-width:30px}.console-top .stat small{font-size:5px;letter-spacing:.2px}.console-top .stat b{font-size:14px}.console-top .stat i{font-size:10px}#balls{font-size:11px;letter-spacing:0}.console-top .mobile-only{display:block;min-width:32px;min-height:36px;padding:4px;font-size:20px;color:#d4ffe9;background:#091323c9;border-color:#94b9b755}.console-bottom{display:block;padding:4px 9px 6px;border-top:1px solid #c8e4ff1a}.console-bottom .how,.console-bottom .utility-controls{display:none}.mobile-progress{display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 8px Arial,sans-serif;color:#ffe7a7;letter-spacing:.1px}#mobile-bumpers{color:#9fffe0;white-space:nowrap}#mobile-help:not([hidden]){display:flex;align-items:center;justify-content:space-between;margin:0 8px 6px;padding:6px 8px;background:#071325aa;border:1px solid #83cdb944;border-radius:6px;font:9px/1.5 Arial,sans-serif;color:#e4f6ff}#dismiss-mobile-help{font-size:19px;min-width:30px;padding:0 4px;border:0;background:none}#multiball-banner{top:20%}}
@media(max-width:360px){.console-top{gap:3px;padding-inline:6px}.console-top h1{font-size:18px}.console-top .score{min-width:55px}.console-top .score b{font-size:15px}.console-top .stat{min-width:27px}.console-top .mobile-only{min-width:29px;font-size:18px}.mobile-progress{font-size:7px}}

.music-volume{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#fff;white-space:nowrap}.music-volume input{width:90px;accent-color:var(--mint);cursor:pointer}.music-volume output{min-width:32px}.settings-grid .music-volume{grid-column:1/-1;flex-wrap:wrap;padding:10px}.settings-grid .music-volume input{flex:1;min-width:100px}

/* Physical cabinet welcome and pause screens. */
.pause-audio,.menu-home{display:none}
.overlay[data-screen="welcome"],.overlay[data-screen="paused"]{background:#0207129c;backdrop-filter:blur(3px)}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket{position:relative;width:min(480px,94vw,72dvh);aspect-ratio:1122/1402;padding:31% 15% 19%;padding:0;border:0;border-radius:0;background:url('assets/menu-frame.png') center/100% 100% no-repeat;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;filter:drop-shadow(0 12px 32px #000b)}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) :is(#note,#ticket-icon,#message,#fine){display:none}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #heading{font-size:clamp(28px,5vw,52px);letter-spacing:2px;color:#ffe9ae;text-shadow:0 2px #734e22,0 0 18px #ffd36a44;margin:12% 0 8%;line-height:1.1}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #primary{width:66%;min-height:54px;margin:0;padding:14px 8px;border:3px solid #f8dfa0;border-radius:8px;background:linear-gradient(155deg,#c7fff2 0%,#51f4db 22%,#09bdb4 50%,#65ffe3 76%,#d1fff2);box-shadow:inset 0 0 0 2px #107d85,inset 0 5px 9px #fff8,0 4px 0 #604525,0 0 24px #19eac34d;color:#031728;font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px;font-weight:800;letter-spacing:3px}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #primary:active{transform:translateY(2px)}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .menu-home{display:block;color:#f5dba4;font-size:12px;text-decoration:none;letter-spacing:.7px;margin-top:7%}
.overlay[data-screen="paused"] .pause-audio{display:flex;gap:8px;width:66%;margin-top:14px}
.overlay[data-screen="paused"] .pause-audio button{flex:1;width:auto;margin:0;padding:9px 3px;border:1px solid #c9ac70;background:#081729;color:#ffe7ab;box-shadow:inset 0 1px #fff4;font-size:11px;letter-spacing:0}
@media(max-height:500px){.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket{width:min(340px,95vw,76dvh)}.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #heading{font-size:24px;margin:15% 0 5%}.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #primary{min-height:38px;padding:5px;font-size:22px}.overlay[data-screen="paused"] .pause-audio{margin-top:7px}.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .menu-home{font-size:9px;margin-top:4%}}

.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]){position:fixed;z-index:20}
body:has(.overlay:not([hidden]):is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"])) .console{visibility:hidden}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket{width:min(640px,82vw,80dvh);aspect-ratio:1;background-image:url('assets/menu-diamond.png')}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #heading{margin:0 0 4%;font-size:clamp(24px,5vw,44px)}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #primary{width:48%;min-height:46px;font-size:26px;padding:10px 5px}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .menu-home{margin-top:4%;font-size:11px}
.overlay[data-screen="paused"] .pause-audio{width:42%;margin-top:10px}
.overlay[data-screen="paused"] .pause-audio button{padding:7px 2px;font-size:10px}
@media(max-width:450px),(max-height:500px){.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #heading{font-size:26px}.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #primary{min-height:40px;font-size:22px;padding:6px}.overlay[data-screen="paused"] .pause-audio{margin-top:6px}.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .menu-home{font-size:9px;margin-top:3%}}
/* Rotate the artwork independently of the readable controls. */
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket{background:none;isolation:isolate}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket::before{content:"";position:absolute;inset:0;background:url('assets/menu-diamond.png') center/contain no-repeat;z-index:-1;pointer-events:none;transform-origin:center}
@keyframes diamondOrbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:no-preference){body:has(#motion[aria-pressed="false"]) .overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket::before{animation:diamondOrbit 18s linear infinite}}
/* Extra frame clearance without enlarging the controls. */
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket::before{inset:-10%}


.overlay[data-screen="result"] .ticket{animation:none;box-shadow:none;border:0}.overlay[data-screen="result"] #heading{font-size:clamp(21px,4vw,34px);margin:0 0 2%}.overlay[data-screen="result"] #message{display:block;font-size:12px;color:#ffe7ab;margin:0 0 3%}.overlay[data-screen="result"] #share-score{width:40%;margin:10px 0 0;padding:8px;background:#091c30;border:1px solid #dfc386;color:#ffe4a0;box-shadow:none;font-size:11px}.overlay[data-screen="result"] .menu-home{margin-top:3%}

.table-music{display:flex;align-items:center;gap:14px;margin:18px 0;color:#ffe4a0;font-size:14px}.table-music select{flex:1;min-width:0;padding:10px;border:1px solid #c8a86d;border-radius:6px;background:#091729;color:#fff2dd;font:inherit}.table-music select:focus-visible{outline:2px solid var(--mint)}

/* Keep every score digit inside its cabinet display. */
.console .score{min-width:100px;flex-shrink:0;padding:5px 10px}
.console .score b{display:block;font-size:clamp(14px,1.65vw,20px);letter-spacing:1px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:800px){.console .score{min-width:78px;padding:4px 6px}.console .score b{font-size:16px;letter-spacing:.5px}}

.console .score{width:max-content}.console .score b{max-width:100%}

/* Corner jewel glints rotate with the artwork, behind the controls. */
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket::after{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 3% 1% at 50% 8%,#fff 0%,#fff7 35%,transparent 100%),radial-gradient(ellipse 1% 3% at 50% 8%,#fff 0%,#cff8 35%,transparent 100%),radial-gradient(ellipse 3% 1% at 92% 50%,#fff 0%,#fff7 35%,transparent 100%),radial-gradient(ellipse 1% 3% at 92% 50%,#fff 0%,#cff8 35%,transparent 100%),radial-gradient(ellipse 3% 1% at 50% 90%,#fff 0%,#fff7 35%,transparent 100%),radial-gradient(ellipse 1% 3% at 50% 90%,#fff 0%,#cff8 35%,transparent 100%),radial-gradient(ellipse 3% 1% at 8% 50%,#fff 0%,#fff7 35%,transparent 100%),radial-gradient(ellipse 1% 3% at 8% 50%,#fff 0%,#cff8 35%,transparent 100%);opacity:0;transform-origin:center}
@keyframes cornerGleam{0%,100%{opacity:.12;filter:brightness(1)}40%{opacity:.35}55%{opacity:1;filter:brightness(1.6)}75%{opacity:.2}}
@media(prefers-reduced-motion:no-preference){body:has(#motion[aria-pressed="false"]) .overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .ticket::after{animation:diamondOrbit 18s linear infinite,cornerGleam 3.2s ease-in-out infinite}}

.corner-flares{display:none}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) .corner-flares{display:block;position:absolute;inset:-10%;pointer-events:none;z-index:0;opacity:0}
.corner-flares i{position:absolute;width:52px;height:52px;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 3%,#cfffffbb 5%,#4eefff33 18%,transparent 48%);filter:drop-shadow(0 0 4px #7ffeff)}
.corner-flares i:nth-child(1){left:50%;top:8%}.corner-flares i:nth-child(2){left:92%;top:50%}.corner-flares i:nth-child(3){left:50%;top:90%}.corner-flares i:nth-child(4){left:8%;top:50%}
.corner-flares i::before,.corner-flares i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 5%,#cfffff99 45%,white 50%,#cfffff99 55%,transparent 95%);clip-path:polygon(0 49%,45% 46%,49% 0,51% 0,55% 46%,100% 49%,100% 51%,55% 54%,51% 100%,49% 100%,45% 54%,0 51%)}
.corner-flares i::after{transform:rotate(45deg) scale(.62);opacity:.65}
@keyframes flareSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:no-preference){body:has(#motion[aria-pressed="false"]) .overlay .corner-flares{opacity:.85;animation:diamondOrbit 18s linear infinite}body:has(#motion[aria-pressed="false"]) .corner-flares i{animation:flareSpin 5s linear infinite}body:has(#motion[aria-pressed="false"]) .corner-flares i:nth-child(even){animation-direction:reverse}}
@media(max-width:500px){.corner-flares i{width:36px;height:36px}}
/* Longer, brighter corner flare rays extend beyond the cabinet tips. */
.corner-flares i{width:150px;height:150px;filter:drop-shadow(0 0 7px #aaffff)}
.corner-flares i::after{transform:rotate(45deg) scale(.8);opacity:.8}
@media(prefers-reduced-motion:no-preference){body:has(#motion[aria-pressed="false"]) .overlay .corner-flares{opacity:1}}
@media(max-width:500px){.corner-flares i{width:96px;height:96px}}

/* The mask follows the cabinet; the artwork and real controls counter-rotate. */
.overlay .ticket .menu-mask{position:absolute;inset:-10%;clip-path:polygon(50% 9%,91% 50%,50% 91%,9% 50%);background:#030d24;z-index:0}
.overlay .ticket .menu-upright{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#06495c88,transparent 52%),radial-gradient(ellipse at 50% 20%,#37134b,#030b21 70%)}
.overlay .ticket::before{z-index:2!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H100V100H0Z M50 19L81 50L50 81L19 50Z'/%3E%3C/svg%3E") center/100% 100%}
.overlay .ticket::after,.overlay .ticket .corner-flares{z-index:3!important}
.menu-title-art{display:block;width:53%;height:auto;max-height:27%;object-fit:contain;margin-bottom:1%}
.overlay[data-screen="welcome"] #heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.overlay:is([data-screen="welcome"],[data-screen="paused"],[data-screen="result"]) #primary,
.overlay .ticket #next-table{background: url('assets/menu-button-sapphire.png') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;color:#fff0bc;text-shadow:0 2px 2px #00191e,0 0 5px #00191e;font-family:Georgia,serif;font-weight:bold;letter-spacing:1px;width:43%;height:13%;min-height:42px;padding:0;margin:0;font-size:clamp(17px,3vw,27px)}
.overlay .ticket #primary:hover,.overlay .ticket #next-table:hover{filter:brightness(1.18)}
.overlay .ticket .menu-home{position:relative;z-index:4;margin-top:1.5%;font-family:Georgia,serif;font-size:clamp(10px,1.8vw,15px);padding:5px}
.overlay[data-screen="paused"] .menu-title-art,.overlay[data-screen="result"] .menu-title-art{width:34%;max-height:17%;margin:0}
.overlay[data-screen="paused"] #heading,.overlay[data-screen="result"] #heading{font-size:clamp(17px,3vw,28px);margin:1% 0;color:#ffdf8e}
.overlay[data-screen="result"] #message{margin:0 0 1%;font-size:clamp(9px,1.5vw,12px)}
.overlay[data-screen="result"] #share-score{margin:1% 0 0;width:32%;padding:6px;font-size:10px}
.overlay[data-screen="paused"] .pause-audio{width:34%;margin-top:1%}
.overlay[data-screen="paused"] .pause-audio button{padding:6px 2px;font-size:9px}
@keyframes diamondCounterOrbit{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:no-preference){
 body:has(#motion[aria-pressed="false"]) .menu-mask{animation:diamondOrbit 18s linear infinite}
 body:has(#motion[aria-pressed="false"]) .menu-upright{animation:diamondCounterOrbit 18s linear infinite}
}
.overlay[data-screen="welcome"] .menu-title-art{width:39%;max-height:21%}
.overlay .ticket .menu-upright{background:radial-gradient(ellipse at center,#063347,#030b21 65%)}
.overlay .ticket #primary,.overlay .ticket #next-table{width:36%;height:11%}
.overlay[data-screen="paused"] .menu-title-art,.overlay[data-screen="result"] .menu-title-art{width:28%;max-height:14%}
.overlay[data-screen="result"] .menu-title-art{width:25%;max-height:11%}
.overlay[data-screen="result"] #primary{height:10%;font-size:clamp(16px,2.8vw,24px)}
.overlay[data-screen="result"] .menu-home{font-size:clamp(9px,1.5vw,12px);padding:3px}
/* Stationary illuminated cabinet scene behind all menu controls. */
.overlay .ticket .menu-upright{background:radial-gradient(ellipse at center,#02091b35 0%,#02091b10 60%),url('assets/menu-backdrop.png') center/cover no-repeat}
.menu-title-art{filter:drop-shadow(0 3px 5px #000)}
.overlay .ticket .menu-home,.overlay .ticket #heading,.overlay .ticket #message{text-shadow:0 2px 3px #000,0 0 8px #000}
/* Keep the inset shadow translucent rather than painting over the upright title. */
.overlay .ticket::before{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H100V100H0Z M50 15L85 50L50 85L15 50Z'/%3E%3Cpath fill='white' fill-opacity='.22' fill-rule='evenodd' d='M50 15L85 50L50 85L15 50Z M50 19L81 50L50 81L19 50Z'/%3E%3C/svg%3E") center/100% 100%}