*{box-sizing:border-box}body{overflow-x:hidden}button,a,input{touch-action:manipulation}button{cursor:pointer}button,a{color:inherit}button{font-family:var(--arcade-pixel)}[hidden]{display:none!important}.topbar{max-width:1440px;margin:auto;min-height:70px;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{font:10px/1.5 var(--arcade-pixel);color:var(--arcade-gold);text-decoration:none}.topbar nav{display:flex;align-items:center;gap:12px}main{max-width:1440px;margin:12px auto;padding:0 28px}.cabinet{position:relative;aspect-ratio:16/9;overflow:hidden;border:3px solid #e9d28a;outline:1px solid #635e68;outline-offset:5px;box-shadow:0 15px 80px #0008;background:#16336b}canvas{width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated}canvas:focus-visible{outline:3px solid white;outline-offset:-5px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#08153418,#071338df 55%,#071338ed);gap:1%;padding:3%}.menu-art{height:95%;width:42%;align-self:end}.menu-art img{height:110%;width:100%;object-fit:contain;filter:drop-shadow(12px 12px #06102d80);transform:translateY(3%)}.menu-copy{width:53%;text-align:center;position:relative}.location{display:block;font:clamp(7px,.9vw,12px)/1.8 var(--arcade-pixel);color:#f4dd9c;letter-spacing:2px}h1{font:clamp(20px,3.6vw,51px)/1.45 var(--arcade-pixel);color:#fff0b4;text-shadow:3px 3px #96734d,6px 6px #030a27;margin:15px 0 24px;letter-spacing:-2px}h1 span{display:block;font-size:.4em;line-height:1.4;letter-spacing:7px}.gold-button{background:linear-gradient(#fff4be,#d9bb72);border:2px solid #fff1ac;box-shadow:4px 5px #020a29;color:#13214b;font:clamp(10px,1.3vw,17px)/1.5 var(--arcade-pixel);padding:17px 34px;min-height:52px;display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto}.gold-button:hover{background:#fff3c0;transform:translateY(-2px)}.gold-button:disabled{opacity:.6;cursor:wait}.ranked-choice{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;font:12px Arial;color:#d5e2ff}.ranked-choice input{width:17px;height:17px;accent-color:#e9ce83}#ranked-login{font:12px Arial;display:inline-block;margin-top:10px}.menu-links{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:20px}.menu-links a{font:9px var(--arcade-pixel);text-decoration:none}.menu-links button{background:none;border:1px solid #8c91a7;padding:7px 10px;color:#ffebb2}.hint{font:7px/1.8 var(--arcade-pixel);color:#a6b8d8;margin:20px 0 0}.error{font:12px/1.4 Arial;color:#ffc6ab;max-width:330px;margin:10px auto 0}.error:empty{display:none}.controls{display:flex;justify-content:space-between;align-items:center;padding:20px 0;color:#91a5c9;font:8px var(--arcade-pixel)}#touch-jump{display:none;background:#142958;border:1px solid #c7b87c;color:#fff0b3;padding:16px;touch-action:none;user-select:none}.pause-button{position:absolute;right:18px;bottom:17px;width:45px;height:40px;background:#0a173cdd;color:#fff0be;border:1px solid #e8d092;font-size:22px}.center{background:#081334b8;backdrop-filter:blur(5px)}.box{width:min(440px,92%);text-align:center;background:#111e4bf5;border:3px double #e5d098;box-shadow:8px 8px #030b2d;padding:26px}.box h2{font:24px/1.6 var(--arcade-pixel);color:#ffe39a;margin:10px 0 18px}.box .gold-button{margin:17px auto}.box a,.small-button{display:block;font:9px/1.8 var(--arcade-pixel);margin:12px auto;text-decoration:none}.small-button{background:none;border:0;color:#c3d3ee;padding:5px}.box p{font:12px/1.5 Arial;color:#c5d6ed}.box .score-label{font:9px var(--arcade-pixel);margin-top:-8px}#final-score{font-size:32px;margin-bottom:15px}#rank-status{min-height:18px;color:#ffdda1}#record{color:#ffe8a2}dialog{background:#101e48;color:#e0eaff;border:3px double #e8d298;padding:30px;max-width:min(500px,92vw);line-height:1.6}dialog::backdrop{background:#030c2ddc}dialog h2{font:14px/1.8 var(--arcade-pixel);color:#ffe8a4}dialog p,dialog label{font:14px/1.6 Arial}.help-close{float:right;background:none;border:0;color:#ffe8a4;font-size:24px;padding:0 0 8px 20px}:focus-visible{outline:3px solid white;outline-offset:4px}@media(min-width:1500px){main{max-width:1350px}}@media(max-width:760px){.topbar{padding:12px;min-height:58px}.brand{font-size:7px}.topbar nav{gap:6px}main{padding:0 10px;margin-top:8px}.overlay{padding:2%;gap:0}.menu-art{width:36%}.menu-copy{width:62%}h1{font-size:clamp(16px,4vw,28px);line-height:1.4;margin:7px 0 12px;letter-spacing:-1px}.location{font-size:6px;letter-spacing:0}.gold-button{padding:9px 20px;min-height:37px;font-size:9px}.ranked-choice{font-size:10px;margin-top:9px}.ranked-choice input{height:14px;width:14px}.menu-links{margin-top:8px;gap:12px}.menu-links a{font-size:6px}.menu-links button{font-size:8px;padding:4px 7px}.hint{font-size:5px;margin-top:9px}#ranked-login{font-size:9px;margin-top:4px}.controls{font-size:6px;gap:10px;padding-top:15px}#touch-jump{display:block}.box{padding:12px;max-width:310px}.box h2{font-size:16px;margin:3px 0 10px}.box .gold-button{margin:8px auto}.box p{font-size:10px;margin:6px}.box a,.small-button{font-size:7px;margin:7px auto}#final-score{font-size:24px;margin:4px 0 14px}.pause-button{width:35px;height:31px;right:9px;bottom:8px;font-size:16px}#rank-status{min-height:12px}.error{font-size:10px;margin-top:4px}}@media(max-width:520px) and (orientation:portrait){main{margin-top:11vh}.cabinet{aspect-ratio:1.15}.cabinet canvas{object-fit:contain;background:#10244d}.menu-art{position:absolute;left:-5%;bottom:0;width:60%;height:80%;opacity:.8}.overlay{background:linear-gradient(90deg,#09153a30,#071338e8 65%)}.menu-copy{margin-left:30%;width:70%}h1{font-size:5.7vw;line-height:1.5;margin-bottom:25px}.location{font-size:7px}.gold-button{font-size:12px;padding:15px 22px}.ranked-choice{font-size:12px;margin-top:17px}.menu-links{margin-top:20px}.menu-links a{font-size:8px}.hint{margin-top:18px;font-size:6px}.controls>span{max-width:90px;font-size:6px;line-height:1.8}.box .gold-button{font-size:11px}.box p{font-size:12px}.box a,.small-button{font-size:9px;margin:14px auto}.box{padding:24px 15px}#ranked-login{font-size:10px}}
@media(prefers-reduced-motion:reduce){.gold-button:hover{transform:none}}

@media(min-width:761px){main{max-width:min(1440px,calc((100svh - 140px)*1.77778 + 56px))}}
@media(max-width:520px) and (orientation:portrait){body[data-game-state=menu] .cabinet canvas{object-fit:cover}body[data-game-state=playing] .cabinet,body[data-game-state=paused] .cabinet{aspect-ratio:16/9}body[data-game-state=playing] main,body[data-game-state=paused] main{margin-top:17vh}.box h2{line-height:1.2}}

/* A landscape phone gets a fitted 16:9 cabinet and a clear touch lane. */
@media(orientation:landscape){
 html[data-mobile-game=touch] body{height:100dvh;min-height:0;overflow:hidden}
 html[data-mobile-game=touch] .topbar{position:fixed;inset:0 0 auto;z-index:30;height:calc(44px + env(safe-area-inset-top));min-height:0;max-width:none;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
 html[data-mobile-game=touch] .brand{font-size:7px}
 html[data-mobile-game=touch] .topbar nav{gap:7px}
 html[data-mobile-game=touch] .topbar .player-login{min-height:38px;padding:9px;font-size:7px}
 html[data-mobile-game=touch] main{position:fixed;top:calc(44px + env(safe-area-inset-top));bottom:env(safe-area-inset-bottom);left:50%;transform:translateX(-50%);width:min(calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9));max-width:none;margin:0;padding:0;display:flex;align-items:center}
 html[data-mobile-game=touch] .cabinet{width:100%;aspect-ratio:16/9;outline:0;border:1px solid #bca875;box-shadow:none}
 html[data-mobile-game=touch] .cabinet canvas{object-fit:contain}
 html[data-mobile-game=touch] .overlay{padding:2%;gap:0}
 html[data-mobile-game=touch] .menu-art{width:38%;height:94%}
 html[data-mobile-game=touch] .menu-copy{width:60%;margin-left:0}
 html[data-mobile-game=touch] .location{font-size:6px;letter-spacing:1px}
 html[data-mobile-game=touch] h1{font-size:clamp(17px,3vw,28px);line-height:1.3;letter-spacing:-1px;margin:7px 0 12px}
 html[data-mobile-game=touch] .gold-button{min-height:44px;padding:10px 22px;font-size:10px}
 html[data-mobile-game=touch] .ranked-choice{margin-top:8px;font-size:11px}
 html[data-mobile-game=touch] .ranked-choice input{width:18px;height:18px}
 html[data-mobile-game=touch] #ranked-login{font-size:10px;margin-top:5px}
 html[data-mobile-game=touch] .menu-links{margin-top:9px;gap:15px}
 html[data-mobile-game=touch] .menu-links a{font-size:7px;min-height:36px;display:flex;align-items:center}
 html[data-mobile-game=touch] .menu-links button{min-width:38px;min-height:36px;font-size:10px;padding:7px}
 html[data-mobile-game=touch] .hint{display:none}
 html[data-mobile-game=touch] .controls{display:none}
 html[data-mobile-game=touch] .box{width:min(310px,90%);padding:14px}
 html[data-mobile-game=touch] .box h2{font-size:20px;margin:5px 0 10px}
 html[data-mobile-game=touch] #final-score{font-size:26px;margin:5px 0 14px}
 html[data-mobile-game=touch] .box .gold-button{margin:10px auto}
 html[data-mobile-game=touch] .box p{font-size:10px;margin:6px 0}
 html[data-mobile-game=touch] .box a,html[data-mobile-game=touch] .small-button{font-size:7px;margin:7px auto;padding:7px}
 html[data-mobile-game=touch] .pause-button{width:44px;height:44px;right:8px;bottom:8px;font-size:20px}
 html[data-mobile-game=touch] body[data-game-state=playing] .topbar{display:none}
 html[data-mobile-game=touch] body[data-game-state=playing] main{top:env(safe-area-inset-top);width:min(calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9))}
 html[data-mobile-game=touch] body[data-game-state=playing] .controls{display:block;position:absolute;right:61px;bottom:8px;padding:0;z-index:4}
 html[data-mobile-game=touch] .controls>span{display:none}
 html[data-mobile-game=touch] #touch-jump{display:block;min-height:44px;min-width:118px;padding:10px 14px;font:8px/1.4 var(--arcade-pixel);background:#0b1a45dd}
 html[data-mobile-game=touch] dialog:not(.mobile-landscape-gate){max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto}
}
@media(orientation:landscape) and (max-height:370px){
 html[data-mobile-game=touch] .menu-art{width:32%}
 html[data-mobile-game=touch] .menu-copy{width:65%}
 html[data-mobile-game=touch] h1{font-size:18px;line-height:1.2;margin:5px 0 7px}
 html[data-mobile-game=touch] h1 span{display:inline;margin-right:5px;font-size:.45em}
 html[data-mobile-game=touch] .location{font-size:5px}
 html[data-mobile-game=touch] .menu-links{margin-top:3px}
 html[data-mobile-game=touch] .ranked-choice{margin-top:5px}
 html[data-mobile-game=touch] .box{padding:8px 12px}
 html[data-mobile-game=touch] .box a,html[data-mobile-game=touch] .small-button{margin:3px auto;padding:5px}
 html[data-mobile-game=touch] #final-score{font-size:21px;margin:3px 0 12px}
}

#membership{width:min(650px,92vw);max-height:85dvh;padding:24px}#membership-list{list-style:none;padding:0;margin:15px 0}#membership-list li{border-top:1px solid #35496d;padding:16px 0;text-align:left}#membership-list strong{display:block;color:#ffe9ac;font:12px/1.6 Arial}#membership-list span{display:block;font:14px/1.6 Arial;margin:5px 0}#membership-list details{color:#9fb7d9;font:12px/1.6 Arial}#membership-list details p{font-size:12px;margin:8px 0}#membership-list a{color:#f2dba1}.menu-links #membership-open{border:0;padding:7px 0;font-size:7px}.menu-links{gap:17px}html[data-mobile-game=touch] #membership{max-height:90dvh}html[data-mobile-game=touch] #membership-list li{padding:12px 0}
