*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#23191b;color:#fff2d4;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{background:radial-gradient(ellipse at 50% 30%,#5b3533 0,#2c2022 45%,#191519 100%);overscroll-behavior:none}.app{min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:12px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));gap:10px}.appbar{width:min(540px,100%);display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px;color:#c3a99c}.appbar a{color:#f5e6d1;text-decoration:none;font-weight:800;font-size:12px;letter-spacing:.3px}.appbar a span{color:#ffb857}.cabinet{height:min(820px,calc(100svh - 84px));aspect-ratio:540/820;max-width:100%;display:flex;flex-direction:column;border:5px solid #a59e8d;border-radius:12px 12px 8px 8px;background:#38282a;box-shadow:0 0 0 2px #252021,0 20px 65px #0009,inset 0 0 0 2px #ede3c8;overflow:hidden}.marquee{flex:0 0 12%;min-height:52px;display:flex;align-items:center;justify-content:space-around;text-align:center;background:linear-gradient(#c63837,#a32129);border-bottom:5px solid #c6b9a1;box-shadow:inset 0 0 0 3px #821d27,inset 0 0 0 5px #e45b46}.marquee h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,6vh,55px);line-height:.9;letter-spacing:3px;margin:5px 0 3px;color:#ffe7a2;text-shadow:2px 3px #652026,-1px -1px #fff2bc;font-weight:900}.marquee p{font-size:9px;letter-spacing:3px;margin:7px 0 3px;color:#ffdfb3;font-weight:700}.star{font-size:28px;color:#ffd98b}.scoreboard{flex:0 0 10%;min-height:48px;display:flex;align-items:center;justify-content:space-around;padding:5px 8px;background:#30262a;border-bottom:2px solid #79634c;gap:5px}.scoreboard>div{min-width:25%;text-align:center}.label{display:block;font-size:10px;letter-spacing:1.3px;color:#d9bba1;font-weight:700}.scoreboard strong{display:block;font-size:clamp(20px,3.8vh,32px);font-variant-numeric:tabular-nums;line-height:1.1;color:#ffe5a6}.label b{color:#ffe5a6}.streak-box{position:relative}.meter{height:3px;background:#655047;width:70px;margin:3px auto 0;border-radius:4px;overflow:hidden}.meter i{height:100%;display:block;background:#ffc65a;width:0;transition:width .15s}#strikes{display:flex;gap:7px;justify-content:center;margin-top:9px}#strikes i{display:inline-block;width:13px;height:17px;border:2px solid #80684d;border-radius:60% 45% 50% 45%;transform:rotate(-15deg)}#strikes i.hit{background:#f9b348;border-color:#ffd583;box-shadow:0 0 9px #ffb34250}.window{flex:1;min-height:0;position:relative;margin:0 8px;border-left:3px solid #a69882;border-right:3px solid #a69882;background:#39251f;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:none;outline:none}canvas:focus-visible{box-shadow:inset 0 0 0 3px #ffd888}.machine-base{flex:0 0 4%;min-height:23px;background:linear-gradient(#b63836,#96222a);border-top:4px solid #b8a58b;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:8px;letter-spacing:1px;color:#ffdda9}.controls{flex:0 0 7%;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#292226}.controls button{min-height:40px;min-width:85px;border:0;color:#ffe5b6;background:transparent;font:600 13px system-ui;cursor:pointer;padding:5px}.controls button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ffd471;outline-offset:2px}.controls #best{font-size:11px;letter-spacing:1.1px;color:#bea68c;font-variant-numeric:tabular-nums}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:#211c1b60;backdrop-filter:blur(2px)}.overlay[hidden]{display:none}.ticket{max-width:350px;width:100%;background:#fff0d0;color:#492c26;text-align:center;padding:25px 20px 20px;border-radius:5px;box-shadow:0 8px 35px #0007;border:1px solid #dbc18e;outline:1px dashed #b89869;outline-offset:-9px}.kicker{font-size:11px;letter-spacing:3px;font-weight:800;color:#9b392c;margin:0 0 12px}.ticket h2{font:800 clamp(23px,4vh,34px)/1.1 Georgia,serif;margin:0 0 13px;letter-spacing:-.8px}.ticket>p:not(.kicker):not(.hint){font-size:15px;line-height:1.55;margin:0 0 15px}.legend{display:flex;justify-content:center;gap:14px;font-size:11px;font-weight:750;margin:17px 0}.legend span:last-child{color:#a25314}.play{display:block;width:100%;min-height:48px;background:#ae2f31;color:#fff1d5;border:0;border-bottom:4px solid #74212b;border-radius:7px;font-size:18px;font-weight:800;cursor:pointer}.play:hover{background:#c73d37}.play:disabled{opacity:.65}.ticket .hint{font-size:11px;line-height:1.6;color:#745443;margin:14px 0 0}.footnote{font:italic 12px Georgia,serif;color:#bda393;margin:0}.toast{position:absolute;top:10px;left:10px;right:10px;text-align:center;pointer-events:none;color:#fff2cf;font-size:15px;font-weight:750;text-shadow:0 2px 4px #000;opacity:0;transition:opacity .2s}.toast.show{opacity:1}@media(max-width:420px){.appbar>span{display:none}.cabinet{height:min(820px,calc(100svh - 76px))}.ticket{padding:20px 16px 16px}.ticket>p:not(.kicker):not(.hint){font-size:14px}.legend{gap:8px;font-size:10px}.marquee p{letter-spacing:2px}.label{font-size:9px}.machine-base{font-size:7px}}@media(max-height:520px){.app{padding:5px;gap:0}.appbar,.footnote{display:none}.cabinet{height:calc(100svh - 10px);aspect-ratio:650/820}.marquee p,.star,.legend,.ticket .hint{display:none}.marquee h1{font-size:26px}.ticket{padding:13px 16px}.ticket h2{font-size:21px;margin-bottom:7px}.ticket .kicker{margin-bottom:5px;font-size:9px}.ticket>p:not(.kicker):not(.hint){font-size:12px;line-height:1.3;margin-bottom:8px}.play{min-height:36px;font-size:15px}.scoreboard{min-height:38px}.controls{min-height:38px}.controls button{min-height:36px}.machine-base{min-height:16px}.label{font-size:8px}}
.cabinet{width:min(540px,calc((100svh - 84px)*540/820),calc(100vw - 24px));height:auto}@media(max-width:420px){.cabinet{height:auto;width:min(540px,calc((100svh - 76px)*540/820),calc(100vw - 24px))}}@media(max-height:520px){.cabinet{height:calc(100svh - 10px);width:auto;aspect-ratio:650/820}.controls button{min-width:65px;font-size:11px}.controls #best{font-size:9px}}

.batch-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 20px;background:#30262a;color:#ffe5a6;font-size:13px;font-weight:750;letter-spacing:1px;flex:0 0 28px;border-bottom:1px solid #79634c}#timer{font-variant-numeric:tabular-nums}#timer.urgent{color:#ff9678}

.ticket{container-type:inline-size}.ticket h2:has(.splash-line){font-size:clamp(16px,9cqi,29px)}.splash-line{white-space:nowrap}

/* Movie-theater concession setting. The machine remains the primary control. */
body{background:#29161b url('assets/snackbar.png') center center/cover fixed no-repeat}
.app{background:linear-gradient(90deg,#180d1460,#180d141a 45%,#180d1440);position:relative;isolation:isolate}
.appbar{color:#ffe9c7;text-shadow:0 2px 5px #000;background:#231419d9;padding:8px 12px;border:1px solid #b18a4d70;border-radius:4px}
.cabinet{box-shadow:0 0 0 2px #252021,0 25px 65px #000b,0 0 65px #ffb64d12,inset 0 0 0 2px #ede3c8}
.footnote{background:#28171edd;padding:6px 15px;border:1px solid #bd914b60;border-radius:3px;color:#ffe1a7;font:700 10px system-ui;letter-spacing:2px}
.concession-sign{position:absolute;right:calc(50% + 300px);top:30%;width:230px;text-align:center;color:#ffe3a1;text-shadow:0 3px 15px #140a0e;transform:rotate(-3deg)}
.concession-sign span{font:700 11px system-ui;letter-spacing:3px}.concession-sign strong{display:block;font:900 70px/.95 Georgia,serif;letter-spacing:2px;margin:17px 0;color:#fff0c9}.concession-sign small{font:600 11px/2 system-ui;letter-spacing:1px}
@media(max-width:1100px){.concession-sign{display:none}}@media(max-width:600px){body{background-position:center;background-attachment:scroll}.app{background:#180d1440}.appbar>span{display:none}}@media(max-height:520px){.appbar,.footnote{display:none}}

.share-score,.share-game{min-height:40px;border:1px solid #caa466;border-radius:6px;padding:8px 18px;font:700 13px system-ui;cursor:pointer}.share-score{margin:10px auto 0;background:transparent;color:#81302a}.share-score[hidden]{display:none}.share-game{background:#2b1923ed;color:#ffe4b2;flex-shrink:0}.overlay{overflow-y:auto}.ticket{max-height:100%;overflow-y:auto}.cabinet{width:min(540px,calc((100svh - 138px)*540/820),calc(100vw - 24px))}dialog{width:min(420px,calc(100vw - 24px));border:2px solid #caa466;border-radius:10px;background:#fff0d0;color:#492c26;padding:22px;box-shadow:0 12px 60px #0008}dialog::backdrop{background:#180d14bb}dialog h2{margin-top:0;font-family:Georgia,serif}dialog p{font-size:14px;line-height:1.5}dialog textarea{width:100%;font:15px/1.5 system-ui;padding:10px;color:#392820;background:#fff9eb;border:1px solid #aa8e65;resize:vertical}.share-actions{display:flex;gap:10px;flex-wrap:wrap}.share-actions button{min-height:44px;padding:8px 14px;border:1px solid #9b392c;border-radius:5px;background:#ae2f31;color:#fff1d5;cursor:pointer;font-weight:700}@media(max-height:520px){.cabinet{height:calc(100svh - 57px);width:auto}.share-game{min-height:36px;margin-top:5px}.share-score{min-height:32px;margin-top:6px;padding:4px 12px}}

/* Responsive play area — 2026-09-08 */
/* Size the playable window, rather than shrinking a decorative cabinet. */
.app{--chrome:214px;--shell:84px;height:100dvh;min-height:320px;display:grid;grid-template-rows:44px minmax(0,1fr) 16px;justify-items:center;align-content:stretch;gap:4px;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));--safe-bottom:max(0px,calc(env(safe-area-inset-bottom) - 8px))}
.appbar{grid-row:1;gap:8px;letter-spacing:0;min-width:0}.appbar>span{display:none}
.appbar .share-game{min-width:64px;min-height:44px;margin:0;padding:6px 12px}
.cabinet{grid-row:2;align-self:center;flex:none;aspect-ratio:auto;max-width:100%;height:auto;width:min(540px,100%,calc((100dvh - var(--shell) - var(--safe-bottom) - var(--chrome))*500/600 + 32px))}
.marquee{flex:0 0 64px;min-height:64px}.marquee h1{font-size:32px}.marquee p{font-size:8px;margin:4px 0}
.scoreboard{flex:0 0 48px;min-height:48px}.scoreboard strong{font-size:24px}
.batch-bar{flex:0 0 28px}.machine-base{flex:0 0 20px;min-height:20px}
.controls{flex:0 0 44px;min-height:44px}.controls button{min-height:44px;min-width:64px}
.window{flex:none;aspect-ratio:500/600;box-sizing:content-box;height:auto}
.footnote{grid-row:3;align-self:center}
dialog{max-height:calc(100dvh - 24px);overflow:auto}
@media(max-height:550px) and (orientation:landscape){
 .app{--chrome:172px;--shell:16px;grid-template-rows:minmax(0,1fr)}
 .cabinet{grid-row:1}
 .appbar{display:flex;position:absolute;top:8px;left:max(8px,env(safe-area-inset-left));width:130px;flex-direction:column;align-items:flex-start}
 .footnote{display:none}
 .marquee{flex-basis:40px;min-height:40px}.marquee h1{font-size:26px}.marquee p,.star{display:none}
 .scoreboard{flex-basis:38px;min-height:38px}.scoreboard strong{font-size:18px}
 .batch-bar{flex-basis:24px;font-size:10px;padding:2px 8px}.machine-base{flex-basis:16px;min-height:16px;font-size:6px;padding:0 5px}
 .controls button{font-size:10px}.controls #best{font-size:8px}
}

body>main{grid-template-columns:minmax(0,1fr)}
/* A horizontal cabinet gives landscape phones room for both play and controls. */
@media(max-height:550px) and (orientation:landscape){
 body>main{grid-template-columns:140px minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:8px}
 .appbar,.topline,.game-topline{position:static;grid-column:1;grid-row:1;align-self:start;width:100%;display:flex;flex-direction:column;align-items:flex-start}
 .cabinet,.machine{grid-column:2;grid-row:1;display:grid;grid-template-columns:150px minmax(0,1fr);height:auto;aspect-ratio:auto}
 .cabinet>header,.machine>header{grid-column:1;grid-row:1;min-width:0}
 .cabinet>.scoreboard,.cabinet>.hud,.machine>.hud{grid-column:1;grid-row:2;min-width:0}
 .window,.stage,.playfield{grid-column:2;grid-row:1/-1;align-self:center;min-width:0}
 .cabinet>.controls,.cabinet>nav,.machine>.tools{grid-column:1;grid-row:-2;min-width:0}
 .machine>.tools,.cabinet>nav{display:grid;grid-template-columns:1fr 1fr;align-content:center}
 .machine>.tools button,.cabinet>nav button{font-size:10px;padding:3px;min-height:44px;min-width:0}
 .cabinet h1,.machine h1{white-space:nowrap;font-size:22px;letter-spacing:-1px}
 .cabinet .marquee .star,.machine .marquee>span{display:none}
 .announcement,#notice{font-size:11px}
 .app .cabinet{width:min(100%,calc((100dvh - 26px - var(--safe-bottom))*500/600 + 182px));grid-template-rows:44px 56px 28px 20px minmax(88px,1fr)}
 .app .batch-bar{grid-column:1;grid-row:3;padding:3px 6px}
 .app .machine-base{grid-column:1;grid-row:4;overflow:hidden}.machine-base>span:last-child{display:none}
 .app .scoreboard{padding:3px;gap:2px}.app .label{font-size:7px;letter-spacing:0}.app #strikes{gap:3px}.app #strikes i{width:10px;height:13px}
 .app .controls{flex-wrap:wrap;justify-content:center;padding:0 3px}.app .controls #best{order:3;width:100%;text-align:center}.app .controls button{font-size:10px;min-width:64px}
 .arcade .machine{width:min(100%,calc((100dvh - 26px - var(--safe-bottom))*520/680 + 160px));grid-template-rows:48px 48px 60px minmax(132px,1fr)}
 .arcade .launch-deck{grid-column:1;grid-row:3;padding:4px;gap:4px;min-height:60px}.arcade .power>div:first-child{display:block}.arcade .power b{display:none}
 .arcade .hud{padding:2px}.arcade .hud small{font-size:7px;letter-spacing:0}.arcade #balls{font-size:12px}
 main:has(.game-topline) .cabinet{width:min(100%,calc((100dvh - 22px - var(--safe-bottom))*480/720 + 156px));grid-template-rows:48px 48px 28px minmax(88px,1fr)}
 .cabinet>.flight-tip{grid-column:1;grid-row:3;font-size:7px;letter-spacing:0}
 .game-topline .brand{font-size:10px}
}