*{box-sizing:border-box}html{background:#080d16;color:#e7edf7}body{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:30px 24px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:radial-gradient(ellipse at 50% 5%,#172a3d 0,transparent 65%),#080d16}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #54d9f1;outline-offset:5px}button:disabled{cursor:wait;opacity:.75}.arcade{width:min(1320px,100%)}.masthead{height:78px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900;line-height:1;text-decoration:none;color:#fff;letter-spacing:1px}.brand-world{display:block;color:#ffe14b;letter-spacing:5.6px;margin-top:5px;font-size:15px}.brand-ball{font-size:36px}.edition{font-size:10px;letter-spacing:1.8px;color:#92a6bf;display:flex;align-items:center;gap:9px}.live-dot,.footer-dot{width:5px;height:5px;display:inline-block;background:#62e7b0;box-shadow:0 0 10px #62e7b066}.version{margin-left:4px;padding:4px 6px;border:1px solid #344358;border-radius:3px;letter-spacing:0}.masthead nav{margin-left:auto;display:flex;gap:8px}.masthead nav button{background:#121d2a;color:#c3d0e2;width:36px;height:36px;border:1px solid #344154;border-radius:6px;font-size:20px;transition:background .15s}.masthead nav button:hover{background:#263349}.cabinet{position:relative;border:1px solid #3c526b;border-radius:10px;overflow:hidden;box-shadow:0 20px 80px #0009,0 0 0 6px #14202e,0 0 0 7px #27394c;background:#070d19;aspect-ratio:16/9}.cabinet canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:5%;background:linear-gradient(90deg,#05101cf2 0%,#05101cd9 35%,#05101c66 62%,transparent 100%)}.overlay.hidden,.hidden{display:none!important}.intro{max-width:690px}.eyebrow{font-size:11px;font-weight:bold;color:#5fdef0;letter-spacing:2px;margin-bottom:18px}.intro h1{font-size:clamp(26px,4vw,54px);line-height:1.13;letter-spacing:-2px;margin:0;color:#fff;font-weight:900;text-shadow:4px 4px #07101c}.intro h1 span{color:#ffe144}.intro p,.modal p{font-size:13px;line-height:1.8;color:#c3d2e4;margin:23px 0}.intro-actions{display:flex;align-items:center;gap:18px}.start{background:#ffe144;color:#09121f;font-weight:900;border:0;border-bottom:4px solid #ae8516;border-radius:4px;padding:17px 23px;letter-spacing:.7px;font-size:13px;box-shadow:0 4px 0 #0005}.start:hover{background:#fff071;transform:translateY(-1px)}.start:active{transform:translateY(2px);border-bottom-width:2px}.intro-actions>span{font-size:10px;color:#9cb6d2}.load-track{height:3px;background:#28354a;margin-top:15px;max-width:395px}.load-track>div{background:#60dbec;height:100%;width:0;transition:width .2s}.quick-tip{display:flex;align-items:center;gap:11px;margin-top:30px;font-size:10px;letter-spacing:1px;color:#9aaec7}.quick-tip span{color:#e9f2fc;padding:5px 9px;border:1px solid #657185;border-radius:3px;margin-left:8px}.quick-tip span:first-child{margin-left:0}.overlay.centered{justify-content:center;background:#060c19bd;backdrop-filter:blur(3px);text-align:center}.modal{max-width:570px;background:#0c1726;padding:35px;border:1px solid #485c78;border-radius:8px;box-shadow:0 15px 60px #0007}.modal h2{font-size:38px;letter-spacing:-1px;color:#ffe144;margin:6px 0 14px}.modal .eyebrow{margin-bottom:12px}.modal .start{margin-top:10px}.results{display:flex;justify-content:center;gap:44px;padding:22px 0;border-block:1px solid #2b3b51}.results span{display:block;color:#9ab0ca;font-size:10px;letter-spacing:2px;margin-bottom:9px}.results strong{font-size:27px}.text-button{display:block;margin:17px auto 0;border:0;background:none;color:#a1b8d1;font-size:11px}.help-grid{display:grid;grid-template-columns:100px 1fr;text-align:left;gap:15px;font-size:12px;line-height:1.6}.help-grid b{color:#ffe144}.help-grid span{color:#bbccdf}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0 0;font-size:10px;letter-spacing:1.2px;color:#7187a2}footer>span:first-child{display:flex;align-items:center;gap:9px}.footer-right{color:#475e77}.touch-controls{display:flex;justify-content:space-between;margin-top:20px;gap:15px}.touch-controls>div{display:flex;gap:10px}.touch-controls button{width:64px;height:52px;background:#152235;color:#e4edf8;border:1px solid #3d526b;border-bottom:3px solid #07101d;border-radius:6px;font-size:24px;touch-action:none;user-select:none}.touch-controls button small{display:block;font-size:8px;letter-spacing:.8px;margin-top:2px}.touch-controls .kick{color:#ffe144;border-color:#8a7733}.touch-controls button:active{background:#34506c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cabinet:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;aspect-ratio:auto;background:#000}.cabinet:fullscreen canvas{width:100%;height:100%;object-fit:contain}.cabinet:fullscreen .overlay{padding:8%}@media(min-width:1000px){.touch-controls{display:none}}@media(max-width:700px){body{padding:12px 12px 20px;align-items:flex-start}.masthead{height:65px;gap:10px}.brand{font-size:14px;gap:7px}.brand-world{font-size:11px;letter-spacing:3.7px}.brand-ball{font-size:24px}.edition{display:none}.masthead nav{gap:5px}.masthead nav button{width:29px;height:30px;font-size:17px}.cabinet{border-radius:5px;box-shadow:0 0 0 3px #14202e,0 0 0 4px #27394c}.overlay{padding:5%;background:#07101cc9}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:10px}.intro h1{font-size:clamp(18px,5vw,29px);letter-spacing:-1px}.intro p{font-size:10px;line-height:1.5;margin:12px 0}.start{padding:11px 14px;font-size:10px;border-bottom-width:3px}.quick-tip{display:none}.intro-actions{gap:10px}.intro-actions>span{font-size:8px}.load-track{margin-top:8px}.touch-controls button{width:55px;height:50px}.touch-controls>div{gap:7px}.modal{padding:15px;max-width:90%}.modal h2{font-size:22px}.modal p{font-size:10px;margin:10px 0}.results{padding:10px 0;gap:25px}.results strong{font-size:18px}.help-grid{gap:7px;font-size:9px;grid-template-columns:70px 1fr}.modal .eyebrow{margin-bottom:6px}.help-grid b{font-size:9px}.help-grid+p{display:none}footer{padding-top:17px;font-size:8px;letter-spacing:.6px}.footer-right{display:none}}@media(max-height:550px) and (orientation:landscape){body{padding:6px 14px}.arcade{width:min(900px,100%)}.masthead{height:44px}.cabinet{max-height:calc(100svh - 100px);width:auto;aspect-ratio:16/9;margin:auto}.touch-controls{position:fixed;bottom:6px;left:20px;right:20px;pointer-events:none}.touch-controls button{pointer-events:auto;width:44px;height:42px;opacity:.8}footer{padding-top:12px}.intro h1{font-size:30px}.intro p{font-size:11px;margin:12px 0}.quick-tip{display:none}}
/* Keep instructions reachable on compact phone screens. */
.modal{max-height:calc(100% - 12px);overflow-y:auto;overscroll-behavior:contain}

.kit-picker{border:0;padding:0;margin:0 0 18px;display:flex;gap:12px}.kit-picker legend{font-size:10px;letter-spacing:2px;color:#9cb6d2;margin-bottom:8px}.kit-picker label{display:flex;align-items:center;gap:10px;border:1px solid #42536b;background:#101e30;padding:5px 12px;cursor:pointer;font-size:10px;border-radius:5px}.kit-picker label:has(input:checked){border-color:#ffe144;background:#29313a;box-shadow:inset 0 0 0 1px #ffe144}.kit-picker input{accent-color:#ffe144}.kit-picker img{width:42px;height:54px;object-fit:contain;image-rendering:pixelated}.intro h1{font-size:clamp(24px,3.5vw,46px)}.intro p{margin:14px 0}.quick-tip{margin-top:16px}.overlay{overflow-y:auto}@media(max-width:700px){.intro h1{font-size:20px}.intro .eyebrow,.intro p,.load-track,.intro-actions>span{display:none}.kit-picker{margin:10px 0;gap:6px}.kit-picker label{font-size:8px;padding:3px 6px;gap:4px}.kit-picker img{width:24px;height:32px}.kit-picker legend{font-size:8px;margin-bottom:4px}.intro{margin:auto 0}.overlay{align-items:flex-start}}

/* Controls share the canvas HUD; their origin follows fullscreen letterboxing. */
.hud-controls{position:absolute;z-index:3;display:flex;gap:10px;transform-origin:top left}
.hud-controls button{width:42px;height:42px;padding:0;background:#121d2a;color:#c3d0e2;border:1px solid #344154;border-radius:6px;font-size:24px;line-height:1;touch-action:manipulation}
.hud-controls button:hover{background:#263349}

/* Minimal player selection and frameless game surface. */
.cabinet{border:0;border-radius:0;box-shadow:none}
.overlay:not(.centered){justify-content:center;align-items:center;padding:6% 5% 3%;background:#05101cc9}
.intro{width:min(760px,100%);max-width:none;margin:0}
.kit-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 22px}
.kit-picker legend{font-size:13px;margin-bottom:14px}
.kit-picker label{position:relative;justify-content:center;padding:12px 6px;min-width:0}
.kit-picker input{position:absolute;left:8px;top:8px;margin:0}
.kit-picker img{width:100%;height:clamp(100px,19vw,240px);object-fit:contain;image-rendering:pixelated}
.intro-actions{justify-content:center;flex-wrap:wrap}
.intro-actions .start{min-width:160px}
.intro-actions>span{display:block;font-size:11px}
.intro .load-track{display:block;max-width:none;margin-top:16px}
@media(max-width:700px){.kit-picker{gap:6px;margin-bottom:12px}.kit-picker legend{font-size:10px;margin-bottom:8px}.kit-picker label{padding:12px 3px 5px}.kit-picker img{height:clamp(76px,22vw,150px)}.intro .load-track{margin-top:8px}.intro-actions>span{font-size:9px}.intro-actions .start{padding:10px 20px;min-width:120px}}

.cabinet canvas:focus{outline:none}
.cabinet:has(#intro:not(.hidden)) .hud-controls,.arcade:has(#intro:not(.hidden)) .touch-controls{display:none}