/* Browser gestures belong to the game surface, not held button labels. */
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}button>*{pointer-events:none}
body.is-playing{touch-action:none}#scene,.controls,.controls *{touch-action:none}
.start,.result{touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
.loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; text-align: center; gap: 6px; background: #0b1a12; color: var(--ink); }
.loading b { font-size: 42px; animation: spin 1.4s linear infinite; } .loading p { margin: 0; font-weight: 800; } .loading small { color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
.scorebug { position: absolute; left: 186px; top: 14px; display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 12px; background: rgba(10,16,22,.85); border: 1px solid var(--line); font-weight: 800; font-size: 13px; white-space: nowrap; opacity: 0; transition: opacity .3s; }
body.is-playing .scorebug { opacity: 1; }
.scorebug i { width: 10px; height: 18px; border-radius: 3px; } .scorebug b { font-size: 18px; padding: 2px 10px; border-radius: 8px; background: #fff; color: #111; font-variant-numeric: tabular-nums; }
.scorebug em { font-style: normal; color: var(--lime); font-variant-numeric: tabular-nums; min-width: 30px; }
body.is-playing .top-actions .menu { display: block; }
.controls { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); pointer-events: none; opacity: 0; transition: opacity .3s; }
body.is-playing .controls { opacity: 1; }
.stick { pointer-events: auto; touch-action: none; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.22); display: grid; place-items: center; backdrop-filter: blur(4px); }
.stick i { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.pad { pointer-events: auto; position: relative; width: 236px; height: 214px; touch-action: none; }
.act { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 3px solid rgba(255,255,255,.45); background: rgba(255,255,255,.1); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); backdrop-filter: blur(3px); touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .08s, background .15s; display: grid; place-items: center; }
.act b { position: absolute; top: 10px; left: 0; right: 0; font-size: 10.5px; letter-spacing: .06em; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.act span { font-size: 40px; font-weight: 800; margin-top: 12px; opacity: .85; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.act.is-down { transform: scale(.9); background: rgba(223,255,99,.3); }
#btn-a { right: 0; bottom: 0; } #btn-b { right: 118px; bottom: 0; } #btn-c { right: 0; bottom: 118px; }
.power { position: absolute; left: 18px; right: 18px; bottom: 14px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; }
.power i { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }
.phase { position: fixed; z-index: 10; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 7px 26px; border-radius: 4px; background: #1d3f9e; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .08em; border: 2px solid #c8102e; opacity: 0; transition: opacity .3s; }
.phase.is-def { background: #8a1020; border-color: #1d4fb8; }
body.is-playing .phase:not(:empty) { opacity: 1; }
@media (pointer: fine) { .phase { bottom: 56px; } }
.keys-hint { position: fixed; z-index: 10; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--glass); font-size: 12px; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .3s; }
@media (pointer: fine) { body.is-playing .keys-hint { opacity: 1; } .controls { display: none; } }

/* Compact match messages leave the ball and goal visible. */
.banner,.banner.is-event{position:fixed;z-index:12;left:50%;top:82px;max-width:min(420px,85vw);transform:translate(-50%,-8px);padding:9px 18px;border-radius:8px;border-left:3px solid #efd35a;background:#0c1b25e8;font:800 17px/1.3 var(--sans);letter-spacing:.02em;white-space:normal;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;text-shadow:none}
.banner.is-on{opacity:1;transform:translate(-50%,0)}.banner.is-good{border-color:var(--lime);color:var(--lime)}.banner.is-bad{border-color:#ff8a7a;color:#ff8a7a}
#radar{position:fixed;z-index:9;bottom:56px;left:24px;width:112px;height:73px;border-radius:5px;opacity:0;pointer-events:none}body.is-playing #radar{opacity:.8}
#technique{position:fixed;z-index:11;right:24px;bottom:250px;min-height:36px;border:1px solid #ffffff50;border-radius:20px;padding:8px 14px;background:#102330bc;color:#fff;font:800 10px var(--sans);letter-spacing:.1em;display:none}body.is-playing #technique{display:block}
#replay-label{position:fixed;z-index:12;top:62px;left:50%;transform:translateX(-50%);max-width:85vw;background:#0a1a23d9;border-left:3px solid var(--lime);padding:6px 12px;font-size:10px;letter-spacing:.1em;font-weight:800;color:#fff;text-align:center}
#player-info{display:none;position:fixed;left:24px;bottom:22px;z-index:10;font:700 10px var(--sans);letter-spacing:.06em;color:#fff;text-shadow:0 1px 4px #000}body.is-playing #player-info{display:block}
.start h1{font-size:clamp(42px,6vw,78px);line-height:1.05}.start .lede{font-size:14px;line-height:1.5;margin-top:14px}.start .eyebrow{font-size:10px}.start .facts{margin-top:16px}.start .facts li{font-size:11px;padding:6px 10px}
.start-card{gap:12px}.start .note{font-size:11px;line-height:1.5}.result-card{padding:22px;max-height:calc(100dvh - 24px);overflow:auto}.result-card h2{font:800 26px/1.2 var(--sans)}.result-card p{font-size:13px;margin-bottom:16px}
body:not(.is-ready)>.loading{opacity:1}
@media(pointer:fine){#technique{bottom:82px}.phase{bottom:42px}.keys-hint{font-size:10px;padding:6px 10px}}
@media(pointer:coarse){#player-info{bottom:174px}.keys-hint{display:none}#radar{bottom:18px}.phase{bottom:100px;font-size:9px;padding:4px 10px}}
@media(max-width:900px){
 .topbar{padding:10px 12px;gap:8px}.back{padding:9px}.back span{display:none}.top-actions{gap:6px}.top-actions button{width:34px;height:34px}.top-actions .menu{font-size:11px;padding:0 10px}
 .scorebug{left:60px;right:146px;top:10px;gap:5px;padding:5px 7px;font-size:9px;justify-content:center;min-width:0}.scorebug>span{min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:100px}.scorebug i{width:6px;height:14px;flex-shrink:0}.scorebug b{font-size:14px;padding:2px 6px;flex-shrink:0}.scorebug em{font-size:10px;min-width:30px}
 .start{padding:68px 16px 20px;gap:18px}.start h1{font-size:42px}.start .lede{font-size:13px;margin:8px 0 0}.start .eyebrow{margin-bottom:8px}.start .facts{display:none}.start-card{padding:16px;gap:10px}.field{gap:5px}.field>span{font-size:10px}.seg button{font-size:11px;padding:9px 6px;min-height:36px}.primary{font-size:13px;padding:12px}.start .note{font-size:10px}
 .stick{width:112px;height:112px}.stick i{width:46px;height:46px}.act{width:68px;height:68px}.act span{font-size:27px;margin-top:10px}.act b{font-size:8px;top:8px}.pad{width:152px;height:148px}#btn-b{right:78px}#btn-c{bottom:78px}.controls{padding:0 14px max(14px,env(safe-area-inset-bottom))}.power{left:14px;right:14px;bottom:11px;height:4px}
}
@media(orientation:portrait) and (max-width:900px){
 .scorebug{top:54px;left:14px;right:14px;font-size:10px}.scorebug>span{max-width:110px}.banner,.banner.is-event{top:94px;font-size:14px}#replay-label{top:92px}
 #radar{bottom:184px;width:88px;height:57px}.phase{top:92px;bottom:auto;font-size:9px}#technique{right:16px;bottom:174px}#player-info{left:16px;bottom:144px;font-size:9px}
}
@media(max-height:500px) and (orientation:landscape){
 .topbar{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}.back{padding:8px}.back span{display:none}.top-actions{gap:5px}.top-actions button{width:32px;height:32px}.top-actions .menu{font-size:10px;padding:0 9px}
 .scorebug{left:max(58px,calc(env(safe-area-inset-left) + 48px));right:148px;top:8px;max-width:460px;gap:6px;padding:5px 8px;font-size:10px;justify-content:center}.scorebug>span{min-width:0;max-width:115px;overflow:hidden;text-overflow:ellipsis}.scorebug i{width:6px;height:14px;flex-shrink:0}.scorebug b{font-size:14px;padding:1px 7px}.scorebug em{font-size:10px}
 .start{grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-content:center;gap:20px;padding:50px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}.start h1{font-size:40px;margin:0}.start .lede{font-size:12px;max-width:300px}.start .facts{display:none}.start .eyebrow{font-size:9px;margin-bottom:10px}.start-card{padding:12px;gap:7px;max-width:none;width:100%;border-radius:16px}.field{gap:3px}.field>span{font-size:9px}.seg button{min-height:30px;font-size:10px;padding:6px}.start .primary{padding:9px;min-height:34px}.start .note{font-size:9px;line-height:1.35}
 .stick{width:104px;height:104px}.stick i{width:44px;height:44px}.act{width:64px;height:64px}.act span{font-size:25px}.act b{font-size:8px;top:7px}.pad{width:144px;height:136px}#btn-b{right:74px}#btn-c{bottom:72px}.controls{padding:0 max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 #technique{right:max(88px,calc(env(safe-area-inset-right) + 84px));bottom:92px;min-height:30px;padding:6px 10px;font-size:9px}#radar{bottom:12px;width:96px;height:62px}.phase{bottom:82px;font-size:8px;padding:3px 9px}#player-info{left:max(16px,env(safe-area-inset-left));bottom:124px;font-size:8px}.banner,.banner.is-event{top:54px;font-size:14px;padding:7px 12px}#replay-label{top:48px;font-size:9px}.keys-hint{display:none}.result-card{max-width:330px;padding:16px}.result-card h2{font-size:23px}
}
@media(max-height:350px) and (orientation:landscape){.start{grid-template-columns:1fr 300px;padding-top:44px;gap:12px}.start h1{font-size:32px}.start .lede{font-size:11px}.start-card{padding:9px;gap:5px}.start .note{display:none}.seg button{min-height:28px;padding:5px}.start .primary{padding:8px}.stick{width:92px;height:92px}.act{width:58px;height:58px}.pad{width:130px;height:124px}#btn-b{right:68px}#btn-c{bottom:66px}#technique{bottom:80px;right:80px}#player-info{bottom:110px}}
body.is-playing:has(#replay-label:not([hidden])) :is(.controls,#radar,#player-info,.phase,#technique,.keys-hint){opacity:0;pointer-events:none}

body[data-match-state="goal"] :is(.controls,#radar,#player-info,.phase,#technique,.keys-hint),body[data-match-state="walkout"] :is(.controls,#radar,#player-info,.phase,#technique,.keys-hint){opacity:0;pointer-events:none}

#skip-replay{display:none;position:fixed;z-index:16;right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));min-height:38px;padding:8px 14px;border:1px solid #ffffff55;border-radius:20px;background:#102330dd;color:#fff;font:700 11px var(--sans)}body[data-match-state="goal"] #skip-replay{display:block}