:root{font-family:system-ui,-apple-system,sans-serif;color:#173b32;background:#eaf1e9}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
main{width:min(100%,1000px);margin:auto;padding:calc(20px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
header{margin:0 0 20px}
h1{font-size:clamp(2rem,8vw,3.6rem);letter-spacing:-.05em;line-height:1.05;margin:.3em 0}
header p{max-width:38rem;margin:0;color:#506b5f;line-height:1.45}
.eyebrow{color:#167c69;font-weight:850;font-size:.75rem;letter-spacing:.16em}
.badge,.training-badge{display:inline-block;background:#d2e9d9;color:#175a43;border-radius:99px;font-size:.75rem;font-weight:750}
.badge{margin-top:14px;padding:8px 12px}
.game-card{background:#fff;border-radius:20px;box-shadow:0 12px 40px #254c3c1a;padding:18px}
form{max-width:560px;margin:auto;display:grid;gap:18px}
fieldset{border:0;padding:0;margin:0}
legend,.name{font-weight:750}
legend{margin-bottom:8px}
.clubs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clubs label{position:relative}
.clubs input{position:absolute;opacity:0}
.clubs span{display:block;border:2px solid #dce7e1;border-radius:12px;padding:15px 12px;cursor:pointer;font-weight:800;text-align:center}
.clubs input:checked+span{border-color:#187e68;background:#e7f6ee}
.clubs input:focus-visible+span{outline:3px solid #ed9b23;outline-offset:2px}
.name{display:grid;gap:8px}
input#nickname{width:100%;font:inherit;border:2px solid #dce7e1;border-radius:12px;padding:14px}
button{border:0;border-radius:12px;background:#126f5c;color:white;font:inherit;font-weight:800;padding:14px 18px;cursor:pointer}
button:hover{background:#095444}
button.secondary{background:#e7f1eb;color:#175a43}
button.secondary:hover{background:#d2e9d9}
.results-link{color:#fff;font-weight:800;padding:12px}
button:focus-visible,input#nickname:focus-visible{outline:3px solid #ed9b23;outline-offset:3px}
small,footer{color:#627773;line-height:1.4}
footer{font-size:.8rem;margin:16px 4px}
.error{background:#ffe9e7;color:#872a2a;padding:14px;border-radius:10px}
/* The game fills the viewport; controls float above the rendered scene. */
body.playing{overflow:hidden}
body.playing main{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;padding:0}
body.playing header,body.playing footer{display:none}
body.playing .game-card{height:100%;padding:0;border-radius:0;background:transparent;box-shadow:none}
#play{position:relative;width:100%;height:100%;overflow:hidden}
.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;background:#263c3a}
canvas{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;z-index:2;top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));display:flex;align-items:center;gap:6px;pointer-events:none}
.hud div{display:grid;gap:0;min-width:0;padding:5px 9px;border-radius:12px;background:#102c36d9;color:#fff}
.hud div>span{font-size:.7rem;font-weight:800;letter-spacing:.05em}
.hud strong{font-size:1rem;line-height:1.2}
.hud-player,.hud-extra{display:none!important}
.hud #lives{color:#fff;white-space:nowrap}
.training-badge{padding:6px 8px;background:#102c36d9;color:white}
#pause{flex-shrink:0;margin-left:auto;min-height:44px;padding:8px 10px;background:#102c36e8;color:white;font-size:.78rem;pointer-events:auto}
#fullscreen{flex-shrink:0;width:44px;min-width:44px;height:44px;padding:0;background:#102c36e8;color:white;font-size:1.4rem;pointer-events:auto}
.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}
.overlay{position:absolute;inset:0;background:#102c36c9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;color:white;text-align:center;padding:12px}
.overlay strong{font-size:clamp(1.2rem,4vw,2.2rem)}
.controls{position:absolute;z-index:2;bottom:calc(8px + env(safe-area-inset-bottom));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));display:grid;gap:4px;pointer-events:none}
.controls p{margin:0;text-align:center;font-size:.72rem;line-height:1.2;color:white;text-shadow:0 1px 3px #000}
.keyboard-tip{display:none}
.control-buttons{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px}.control-buttons button{min-width:48px;height:56px;padding:0;font-size:1.25rem;touch-action:none;background:#102c36e8;pointer-events:auto}
@media(max-width:599px){.training-badge,.hud-time{display:none!important}}
@media(min-width:700px){main{padding:32px}header{margin-bottom:24px}.game-card{padding:24px}form{padding:8px}}
@media(pointer:fine){.keyboard-tip{display:inline}}
@media(orientation:landscape) and (max-height:500px){.hud{left:auto;width:max-content}.training-badge,.hud-time{display:none!important}}
@media(orientation:landscape){.controls{left:auto;width:min(32%,240px)}.controls p{display:none}}

/* Only explicitly requested local QA scenes expose this badge and time. */
.qa-badge{position:absolute;z-index:3;top:calc(62px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));padding:5px 8px;border-radius:8px;background:#102c36e8;color:white;font-size:.72rem;font-weight:800;pointer-events:none}
.qa-badge[hidden]{display:none}
body.qa-scene .hud-time{display:grid!important}