*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#fff6d7;background:#111638}body{background:radial-gradient(ellipse at 15% 25%,#4a1c6a,transparent 55%),radial-gradient(ellipse at 90% 70%,#093d75,transparent 60%),#10132d;overscroll-behavior:none}.arcade{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom))}.topline{display:flex;justify-content:space-between;width:min(520px,100%);font-size:9px;letter-spacing:2px;color:#a9b6dd}.topline a{font-size:12px;font-weight:850;color:white;text-decoration:none;letter-spacing:.3px}.topline a span{color:#ffca52}.machine{width:min(520px,calc((100svh - 100px)*520/925),calc(100vw - 20px));aspect-ratio:520/925;border:5px solid #e7b853;border-radius:22px 22px 14px 14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 0 3px #722936,0 0 0 6px #231831,0 15px 65px #0008,0 0 45px #ff467724;background:#132455}.marquee{flex:0 0 12%;min-height:64px;background:linear-gradient(#e74254,#ad203e);display:flex;align-items:center;justify-content:space-around;text-align:center;border-bottom:5px solid #ecc45a;box-shadow:inset 0 0 0 3px #881f3b;position:relative}.marquee>span{color:#ffdd77;font-size:28px;text-shadow:0 0 12px #ffd767}.marquee p{font-size:9px;font-weight:900;letter-spacing:4px;margin:5px 0 4px;color:#ffdfa4}.marquee h1{font:900 clamp(24px,4.7vh,43px)/.95 Georgia,serif;letter-spacing:-1px;color:#fff0bc;margin:3px 0;text-shadow:2px 3px #671e3a}.marquee small{font-size:8px;letter-spacing:1.5px;font-weight:800}.hud{flex:0 0 8%;min-height:47px;display:flex;align-items:center;justify-content:space-around;text-align:center;background:#0e1b45;border-bottom:2px solid #4673a8}.hud small{display:block;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#99b8de}.hud b{display:block;font-size:20px;font-variant-numeric:tabular-nums;color:#ffda74}.hud i{font:500 14px system-ui;color:#9ab5d7}#balls{font-size:21px;letter-spacing:4px}#tier{font-size:15px}.playfield{position:relative;flex:1;min-height:0;background:#0d1c41;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#08122e9c;backdrop-filter:blur(3px);padding:12px;overflow-y:auto}.overlay[hidden]{display:none}.ticket{width:100%;max-width:370px;max-height:100%;overflow:auto;background:#fff2d2;color:#3f2b3e;border:3px solid #ffcf66;border-radius:14px;padding:22px 18px;text-align:center;box-shadow:0 12px 30px #0006}.eyebrow{color:#a63550;font-size:10px;font-weight:850;letter-spacing:2px;margin:0 0 12px}.ticket h2{font:900 clamp(22px,3.8vh,32px)/1.05 Georgia,serif;margin:0 0 14px;letter-spacing:-.5px}.ticket>p:not(.eyebrow):not(.fine){font-size:14px;line-height:1.5;margin:10px 0 16px}.fine{font-size:10px;line-height:1.6;color:#7c5b59;margin:12px 0 0}button{cursor:pointer;font-family:inherit}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible,textarea:focus-visible{outline:3px solid #ffbf40;outline-offset:2px}.primary{width:100%;padding:12px;min-height:44px;border:0;border-bottom:4px solid #8c203b;border-radius:8px;color:#fff6de;background:#c72e4c;font-weight:850;font-size:16px}.primary:hover{background:#e53c59}.secondary{min-height:38px;border:1px solid #ad6880;background:transparent;color:#793247;border-radius:7px;margin-top:10px;padding:8px 15px;font-weight:700}.launch-deck{flex:0 0 10%;min-height:65px;padding:8px 12px;display:flex;align-items:center;gap:12px;background:linear-gradient(#234987,#142c5b);border-top:4px solid #e2b34f}.power{flex:1;min-width:0}.power>div:first-child{display:flex;justify-content:space-between;font-size:8px;font-weight:750;letter-spacing:.5px;gap:3px}.power b{color:#ffe174}.power small{font-size:9px;color:#b5c6e5;display:block;margin-top:5px}.power-track{height:12px;border:2px solid #6c88b2;background:#0d1c40;border-radius:4px;margin-top:5px;overflow:hidden}.power-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#37d9de,#f8de64,#ff5e62)}#launch{width:36%;align-self:stretch;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:linear-gradient(#ffe083,#efa93b);border:2px solid #fff0b4;border-bottom:5px solid #a85f23;border-radius:10px;color:#4f2e2a;font-size:10px;font-weight:900}#launch span{display:block;font-size:25px;line-height:1}.tools{flex:0 0 6%;min-height:40px;display:flex;justify-content:space-around;background:#101c3d;gap:2px;padding:0 5px}.tools button{background:none;border:0;color:#c9d8f0;font:650 10px system-ui;min-height:40px;padding:4px}.share-game{min-height:36px;border:1px solid #8191bb;border-radius:8px;background:#ffffff09;color:#fff0c1;padding:7px 20px;font-weight:750;font-size:12px}.footer{font-size:8px;letter-spacing:2px;color:#94a5c9;margin:0}.announcement{position:absolute;left:10px;right:10px;top:9px;text-align:center;pointer-events:none;font-size:13px;font-weight:800;text-shadow:0 2px 5px #000;margin:0}.prizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 16px}.prizes[hidden]{display:none}.prize{background:#fffaf0;border:2px solid #e1c5aa;border-radius:9px;padding:8px 4px;color:#54313e;min-width:0;font-size:11px;font-weight:750;position:relative}.prize:not(:disabled):hover{border-color:#dd3658;transform:translateY(-2px)}.prize:disabled{opacity:.5}.prize.chosen{border-color:#d62c4e;background:#ffe6a9;opacity:1}.prize-art{display:block;width:100%;aspect-ratio:1;background-image:url('assets/prizes.png');background-size:300% 300%;background-repeat:no-repeat}.prize b{display:block;font-size:10px;margin-top:4px}.shelf-count{position:absolute;top:3px;right:3px;border-radius:10px;padding:2px 5px;background:#3b3973;color:white;font-size:10px}dialog{border:2px solid #efc56e;border-radius:12px;background:#fff2d2;color:#402c3d;max-width:calc(100vw - 24px);width:410px;max-height:90svh;overflow:auto;padding:22px;font-size:14px}dialog::backdrop{background:#050c21bb}dialog textarea{width:100%;padding:9px;resize:vertical;font:14px/1.5 system-ui}dialog button{min-height:42px;padding:9px 14px;margin:4px;background:#bf304d;color:white;border:0;border-radius:6px}@media(max-width:450px){.topline>span{display:none}.ticket{padding:15px 12px}.power>div:first-child{display:block}.power b{display:none}.prizes{gap:4px}.prize{font-size:10px}.marquee>span{font-size:20px}}@media(max-height:540px){.topline,.footer{display:none}.arcade{padding:6px;gap:5px}.machine{width:auto;height:calc(100svh - 55px);aspect-ratio:650/925}.marquee{min-height:45px}.marquee h1{font-size:22px}.marquee p,.marquee small{display:none}.hud{min-height:38px}.hud b{font-size:15px}.hud small{font-size:7px}.launch-deck{min-height:45px}.tools,.tools button{min-height:32px}.tools button{font-size:8px}.ticket{padding:10px}.ticket h2{font-size:20px}.ticket .fine{display:none}.ticket>p:not(.eyebrow):not(.fine){font-size:12px;margin:5px 0}.eyebrow{font-size:8px;margin-bottom:6px}.primary{font-size:13px;min-height:36px;padding:6px}.share-game{min-height:32px}.power small{display:none}}
/* State fair midway surrounding the arcade cabinet. */
body{background:#102047 url('assets/carnival.png') center center/cover fixed no-repeat}
.arcade{background:linear-gradient(90deg,#08132b26,#08132b08 45%,#08132b26)}
.topline{color:#ffebc6;text-shadow:0 1px 4px #000;background:#101b36d9;border:1px solid #e5b65b66;border-radius:6px;padding:5px 9px;align-items:center}
.machine{box-shadow:0 0 0 3px #722936,0 0 0 6px #231831,0 16px 65px #000b,0 0 45px #ffc66738}
.share-game{background:#15203aed;border-color:#e1b769;color:#fff0c1;box-shadow:0 3px 12px #0005}
.share-game:hover{background:#283756}
.footer{color:#ffe9bf;text-shadow:0 1px 5px #000;background:#111b36cc;border-radius:4px;padding:3px 8px;text-align:center}
@media(max-width:600px){body{background-attachment:scroll;background-position:38% center}.topline{padding:3px 8px}.footer{letter-spacing:1px}}

/* Responsive play area — 2026-09-08 */
/* Keep the full native playfield ratio and compact the surrounding chrome. */
.arcade{--chrome:230px;--shell:84px;height:100dvh;min-height:320px;display:grid;grid-template-rows:44px minmax(0,1fr) 16px;justify-items:center;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))}
.topline{grid-row:1;align-items:center;gap:8px;min-width:0}.topline>span{display:none}
.topline .share-game{min-width:64px;min-height:44px;padding:6px 12px;margin:0}
.machine{grid-row:2;align-self:center;flex:none;aspect-ratio:auto;max-width:100%;height:auto;width:min(520px,100%,calc((100dvh - var(--shell) - var(--safe-bottom) - var(--chrome))*520/680 + 10px))}
.marquee{flex:0 0 64px;min-height:64px}.marquee h1{font-size:clamp(20px,5vw,30px);white-space:nowrap}.marquee small{display:none}
.hud{flex:0 0 48px;min-height:48px}
.playfield{flex:none;aspect-ratio:520/680;height:auto}
.launch-deck{flex:0 0 64px;min-height:64px;padding:5px 10px}.power small{display:none}
.tools{flex:0 0 44px;min-height:44px}.tools button{min-height:44px}
.footer{grid-row:3;align-self:center}
dialog{max-height:calc(100dvh - 24px);overflow:auto}
@media(max-height:550px) and (orientation:landscape){
 .arcade{--chrome:186px;--shell:16px;grid-template-rows:minmax(0,1fr)}
 .machine{grid-row:1}
 .topline{display:flex;position:absolute;top:8px;left:max(8px,env(safe-area-inset-left));width:130px;flex-direction:column;align-items:flex-start}
 .footer{display:none}
 .marquee{flex-basis:40px;min-height:40px}.marquee h1{font-size:23px}.marquee p{display:none}
 .hud{flex-basis:38px;min-height:38px}.hud b{font-size:15px}#balls{font-size:15px;letter-spacing:1px}#tier{font-size:11px}
 .launch-deck{flex-basis:54px;min-height:54px;padding:3px 5px;gap:5px}#launch{font-size:8px}#launch span{font-size:18px}
 .tools{gap:0;padding:0 2px}.tools button{font-size:8px;padding:2px}
}

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}
}