*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#fff2db;background:#171127}body{background:radial-gradient(circle at 15% 24%,#ffb25a22,transparent 20%),radial-gradient(circle at 85% 30%,#a989f84d,transparent 35%),linear-gradient(#181328,#392249 70%,#121425);overscroll-behavior:none}body:before,body:after{content:"";position:fixed;bottom:0;width:26vw;height:65vh;pointer-events:none;background:repeating-linear-gradient(90deg,#0e1027 0 12%,#38213d 13% 17%);clip-path:polygon(0 100%,0 42%,12% 42%,12% 28%,22% 4%,32% 28%,32% 65%,45% 65%,45% 46%,55% 32%,66% 46%,66% 10%,77% 0,89% 17%,89% 68%,100% 68%,100% 100%);opacity:.75}body:after{right:0;transform:scaleX(-1)}main{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 12px max(10px,env(safe-area-inset-bottom))}.brand{font-size:12px;letter-spacing:2px;text-decoration:none;color:#f4e4ff;font-weight:800}.brand span{color:#d3f591}.cabinet{width:min(510px,calc((100svh - 102px)*510/1010),calc(100vw - 24px));aspect-ratio:510/1010;background:#1e1634;border:3px solid #ac80c9;border-radius:70px 70px 18px 18px;overflow:hidden;box-shadow:0 0 0 5px #251834,0 16px 70px #000a,0 0 60px #b165de29;display:flex;flex-direction:column}header{text-align:center;flex:0 0 14%;padding:14px 6px 9px;background:radial-gradient(ellipse at 50% 100%,#674376,#2b1d40);border-bottom:2px solid #a779bd}header>span{font-size:9px;font-weight:800;letter-spacing:3px;color:#e5beec}h1{font:900 clamp(26px,4.3vh,46px)/1 Georgia,serif;letter-spacing:-1.5px;margin:7px 0 4px;color:#fff0bc;text-shadow:2px 3px #301537}h1 i{color:#c9f196}header p{font-size:11px;letter-spacing:1px;margin:7px 0 0}.hud{display:flex;justify-content:space-around;align-items:center;text-align:center;padding:8px 2px;flex:0 0 7%;background:#211833}.hud small{font-size:9px;letter-spacing:1px;display:block;color:#c7b4d7}.hud b{display:block;font-size:18px;color:#ffd887;font-variant-numeric:tabular-nums}#hearts{color:#ff9b98;font-size:17px}#rush{color:#c8f896;font-size:17px}.stage{flex:1;min-height:0;position:relative;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#overlay{position:absolute;inset:0;background:#1810248a;display:flex;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(3px)}#overlay[hidden]{display:none}.ticket{text-align:center;max-height:100%;overflow:auto;width:100%;max-width:360px;padding:22px 16px;background:#221832ee;border:1px solid #d4b187;border-radius:30px 30px 12px 12px;box-shadow:0 8px 35px #0005}.eyebrow{font-size:10px;letter-spacing:2px;color:#e2b387;margin:0 0 15px;font-weight:800}.ticket h2{font:700 clamp(26px,4.4vh,42px)/1.07 Georgia,serif;margin:0 0 15px;color:#fff0d2}.ticket h2 em{color:#c9f196;font-weight:500}.ticket>p:not(.eyebrow):not(.fine){font-size:14px;line-height:1.65;margin:10px 0 18px;color:#e4d5ed}.fine{font-size:10px;line-height:1.5;color:#bdaaC8;margin:13px 0 0}button{font-family:inherit;font-weight:750;cursor:pointer;border:1px solid #9f84b3;border-radius:7px;background:#332544;color:#f5e8ff;padding:9px 12px;min-height:40px}button:hover{background:#4b365f}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #d6fa9c;outline-offset:2px}.primary{background:#d2ee95;color:#23322d;border:0;border-bottom:4px solid #8ba76b;width:100%;font-size:16px;padding:12px}.primary:hover{background:#e0ffa2}#share-score{margin-top:10px;width:100%}#notice{position:absolute;top:12px;left:8px;right:8px;text-align:center;pointer-events:none;font-size:14px;font-weight:850;color:#e7ffad;text-shadow:0 2px 5px #000;margin:0}.flight-tip{display:flex;justify-content:space-around;padding:10px 0;font-size:9px;letter-spacing:1px;font-weight:800;background:#332345;color:#d0ef9b;border-top:2px solid #755186}nav{display:flex;justify-content:space-around;gap:2px;padding:5px 2px}nav button{padding:5px 4px;border:0;background:transparent;font-size:10px;min-height:34px}.below{display:flex;align-items:center;justify-content:space-between;gap:15px;width:min(510px,100%)}.below button{font-size:12px;min-height:34px;padding:7px 12px}.below span{font-size:11px;letter-spacing:1px;color:#e0c19f}.footer{margin:0;font-size:8px;letter-spacing:2px;color:#bea7ce}#outfits{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 14px}#outfits[hidden]{display:none}.outfit{font-size:12px;padding:10px 4px}.outfit span{font-size:25px;display:block}.outfit small{display:block;font-size:10px;margin-top:5px}.outfit[aria-pressed=true]{border:2px solid #d0ef9b;background:#404733}dialog{background:#281e39;color:#fff0db;border:2px solid #a77dc2;border-radius:16px;width:420px;max-width:calc(100vw - 24px)}dialog::backdrop{background:#100b20bf}dialog textarea{width:100%;font:16px/1.5 system-ui;padding:10px}dialog button{margin:5px 0}@media(max-width:430px){main{padding-top:8px;gap:6px}.cabinet{width:min(calc(100vw - 20px),calc((100svh - 92px)*510/1010))}.ticket{padding:17px 12px}.ticket>p:not(.eyebrow):not(.fine){font-size:12px}.ticket h2{font-size:30px}.eyebrow{font-size:9px}.below{justify-content:center}.brand{font-size:10px}header{padding-top:12px}header>span{font-size:8px}header p{font-size:9px}}@media(max-height:550px){.brand,.footer{display:none}main{gap:5px;padding:6px}.cabinet{width:auto;height:calc(100svh - 51px);aspect-ratio:510/850;border-radius:30px 30px 12px 12px}header{padding:5px;flex-basis:12%}header>span,header p{display:none}h1{font-size:24px}.hud{padding:3px}.hud b{font-size:14px}.flight-tip{padding:4px}nav{padding:0}nav button{min-height:28px}.ticket{padding:10px}.ticket h2{font-size:23px}.ticket>p:not(.eyebrow):not(.fine){font-size:11px;margin:5px 0}.eyebrow,.fine{display:none}.primary{min-height:34px;padding:6px;font-size:14px}}
/* Prevent rapid taps from selecting game labels or opening touch callouts. */
main,main *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
main button,main a{touch-action:manipulation}
#share-text{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Responsive play area — 2026-09-08 */
/* Allocate height to the native 480 by 720 flight surface. */
main{--chrome:202px;--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))}
.game-topline{grid-row:1;display:flex;align-items:center;justify-content:space-between;width:min(510px,100%);gap:8px;min-width:0}
.game-topline .brand{letter-spacing:.3px;display:block}
.game-topline #share-game{min-width:64px;min-height:44px;font-size:12px;margin:0;padding:6px 12px}
.cabinet{grid-row:2;align-self:center;flex:none;aspect-ratio:auto;max-width:100%;height:auto;width:min(510px,100%,calc((100dvh - var(--shell) - var(--safe-bottom) - var(--chrome))*480/720 + 6px));border-radius:40px 40px 16px 16px}
header{flex:0 0 76px;padding:8px 5px 5px}header>span{font-size:8px}header h1{font-size:clamp(20px,5vw,32px);white-space:nowrap;margin:4px 0}header p{font-size:9px;margin:3px 0}
.hud{flex:0 0 48px;padding:4px 2px}
.stage{flex:none;aspect-ratio:480/720;height:auto}
.flight-tip{flex:0 0 28px;padding:6px 0;font-size:8px}
nav{flex:0 0 44px;padding:0 2px}nav button{min-height:44px}
.below{grid-row:3;align-self:center;justify-content:space-between;gap:8px}.below span{font-size:10px}.below .footer{font-size:7px;letter-spacing:1px}
dialog{max-height:calc(100dvh - 24px);overflow:auto}
@media(max-height:550px) and (orientation:landscape){
 main{--chrome:148px;--shell:16px;grid-template-rows:minmax(0,1fr)}
 .cabinet{grid-row:1;border-radius:25px 25px 12px 12px}
 .game-topline{position:absolute;top:8px;left:max(8px,env(safe-area-inset-left));width:130px;flex-direction:column;align-items:flex-start}
 .below{position:absolute;bottom:8px;left:max(8px,env(safe-area-inset-left));width:130px}.below .footer{display:none}
 header{flex-basis:40px;padding:3px}header h1{font-size:24px}header>span,header p{display:none}
 .hud{flex-basis:36px}.hud small{font-size:7px}.hud b,#hearts,#rush{font-size:13px}
 .flight-tip{flex-basis:22px;padding:4px 0;font-size:7px;letter-spacing:0}
}

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