/* Fuse League — scoreboard, jersey labels and pitch markings. */
:root{--ink:#111a22;--panel:#182630;--panel-2:#243540;--line:#354751;--gold:#ffc43d;--text:#f5f0de;--muted:#adb8b7;--cyan:#3fe6ff;--danger:#f05a36;--num:"Barlow Condensed","Arial Narrow",sans-serif;--ui:Inter,system-ui,sans-serif;--ui-scale:1}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:var(--ui)}#app{position:fixed;inset:0}#app canvas{display:block;width:100%;height:100%}#ui{position:fixed;inset:0;pointer-events:none}.hidden,[hidden]{display:none!important}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid var(--line);border-radius:4px;padding:10px 16px;color:var(--text);background:var(--panel);transition:background .1s,transform .1s}button:hover{background:#30454f}button:active{transform:translateY(2px)}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}button.cta,.cta{background:var(--text);color:var(--ink);font:800 24px var(--num);border-color:transparent}button.cta:hover{background:var(--gold)}kbd{display:inline-block;font:600 12px var(--ui);padding:3px 6px;border:1px solid #627078;border-bottom-width:2px;border-radius:3px;background:#21333e;color:var(--text);white-space:nowrap}
.hud{position:absolute;inset:0;--me:#3d7bff;--pressure-color:var(--text)}.hud-score{position:absolute;left:50%;top:24px;transform:translateX(-50%) scale(var(--ui-scale));transform-origin:top center;display:flex;align-items:center;background:var(--panel);min-height:44px;box-shadow:0 3px 0 #0005}.hud-roster{display:flex;align-items:center;gap:10px;padding:4px 16px;font-size:13px;font-weight:700}.hud-left{font:800 30px var(--num)}.hud-time{font:700 28px var(--num);font-variant-numeric:tabular-nums;padding:4px 16px;border-left:1px solid var(--line)}.hud-zone{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:100%;box-sizing:border-box;white-space:nowrap;margin-top:4px;padding:6px 12px;background:var(--panel);text-align:center;font-size:13px;color:var(--muted)}.hud-zone.urgent{background:#612d26;color:var(--text)}.hud-zone.alert{color:var(--text);box-shadow:inset 0 -3px 0 var(--gold);animation:zonealert .4s ease-out 3}@keyframes zonealert{from{background:#6b5616}to{background:var(--panel)}}.team-score{display:flex;align-items:center;gap:6px;border-bottom:3px solid var(--team);padding:0 4px 3px}.team-score>span{font-size:12px}.team-score>b{font:800 28px var(--num)}.team-score.dead{opacity:.45}.team-symbol{display:inline-block;width:12px;height:12px;background:var(--team);border:1px solid var(--text)}.symbol-0{clip-path:polygon(50% 0,100% 100%,0 100%)}.symbol-1{border-radius:50%}.symbol-2{transform:rotate(45deg)}.symbol-3{clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
.hud-feed{position:absolute;right:24px;top:24px;display:flex;flex-direction:column;gap:4px;max-width:260px}.feed-line{display:flex;gap:8px;background:var(--panel);padding:7px 10px;font:600 14px var(--num);border-right:3px solid #617078;animation:slide-in .18s ease-out}.feed-line.mine{border-color:var(--gold)}.feed-line b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feed-line>span{color:var(--gold)}.hud-countdown{position:absolute;top:14%;left:50%;transform:translateX(-50%);font:800 100px/1 var(--num);text-shadow:0 4px 0 var(--ink)}.hud-countdown:empty{display:none}.hud-vignette{position:absolute;inset:0;box-shadow:inset 0 0 75px #f05a3638;opacity:0;transition:opacity .2s}.hud-vignette.on{opacity:1}.hud-arrow{position:absolute;left:-18px;top:-14px;width:36px;color:var(--danger);text-align:center}.hud-arrow i{display:block;width:32px;height:24px;background:var(--danger);clip-path:polygon(0 30%,65% 30%,65% 0,100% 50%,65% 100%,65% 70%,0 70%);filter:drop-shadow(0 2px 2px #000)}.hud-arrow b{display:block;font:700 14px var(--num);white-space:nowrap;background:var(--ink);padding:2px;margin-top:5px}.hud-arrow.incoming i{background:var(--gold)}.nameplate{position:absolute;left:0;top:0;padding:6px 10px;background:var(--ink);border-bottom:3px solid var(--cyan);font:700 18px var(--num)}.intro .player-panel,.intro .hud-score{opacity:.4}
.callout{position:absolute;left:50%;top:110px;transform:translate(-50%,-8px);max-width:420px;opacity:0;display:flex;flex-direction:column;gap:3px;background:var(--panel);padding:10px 18px;border-left:4px solid var(--c,var(--gold));transition:opacity .12s,transform .12s;text-align:left}.callout b{font:800 28px/1.05 var(--num)}.callout span{font-size:14px;line-height:20px;color:var(--muted)}.callout span:empty{display:none}.callout.show{opacity:1;transform:translate(-50%,0)}.callout.p3{border-left-width:6px}.screen-flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none}.screen-flash.on{animation:screenflash .13s ease-out}@keyframes screenflash{from{opacity:.12}to{opacity:0}}.toast{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:12px 18px;background:var(--panel);border-left:3px solid var(--gold);opacity:0;font-size:14px}.toast.show{opacity:1}
.pause{position:absolute;inset:0;background:#0b141b55;pointer-events:auto}.pause-panel{position:absolute;left:0;top:0;bottom:0;width:340px;background:var(--panel);padding:48px 32px;display:flex;flex-direction:column;gap:12px;box-shadow:4px 0 0 #0003}.pause-panel h1{font:800 42px/1 var(--num);margin:0 0 28px}.pause-panel>button{text-align:left;font:700 23px var(--num)}.pause-panel small{float:right;font:500 12px var(--ui);padding-top:5px}.pause-exit{margin-top:auto;display:flex;flex-direction:column;gap:8px}.pause-exit button{text-align:left;color:var(--muted)}
.tutorial{position:absolute;right:24px;bottom:24px;width:288px;pointer-events:auto;background:var(--panel);border-top:3px solid var(--cyan);padding:16px}.tutorial .step{font-size:12px;color:var(--muted)}.tutorial h2{font:800 25px/1.1 var(--num);margin:6px 0}.tutorial p{font-size:14px;line-height:21px;margin:8px 0}.tutorial footer{display:flex;gap:8px;justify-content:space-between;margin-top:12px}.tutorial button{font-size:13px;padding:8px;min-height:36px}.tutorial .cta{font:700 20px var(--num)}
.debug{position:absolute;top:12px;left:12px;background:#071018e8;color:#e2f2dd;padding:10px;font:12px/1.4 monospace;white-space:pre;pointer-events:none;z-index:30}.debug-overlay{position:absolute;top:12px;left:12px;background:#071018e8;color:#e2f2dd;padding:10px;font:12px/1.4 monospace;white-space:pre;z-index:30}@keyframes slide-in{from{opacity:0;transform:translateX(8px)}}
.high-contrast{--muted:#d4ddd9;--line:#87979a}.high-contrast .player-panel{border:2px solid var(--text);border-left:6px solid var(--cyan)}.high-contrast .team-symbol{width:16px;height:16px;border-width:2px}.reduced-motion *,[data-reduced-motion=true] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*:not(.allow-motion){animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media(max-height:760px){.player-panel{bottom:16px;left:16px}.hud-bonus{left:16px;bottom:232px}.hud-score{top:16px}.hud-feed{top:16px;right:16px}.results{padding:22px 28px;gap:10px}.results h1{font-size:52px}}@media(max-width:1100px){.hud-feed{top:92px}.results{width:46vw;right:3vw}.team-score>span{display:none}}


/* The player is an illustrated badge, while actions live under the aiming hand. */
.hud-personal { position: absolute; left: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; transform: scale(var(--ui-scale)); transform-origin: bottom left; }
.player-panel { width: 294px; filter: drop-shadow(0 4px 5px #0008); }
.player-alive { position: relative; padding: 8px 8px 12px 6px; }
.player-alive header { display: flex; align-items: center; gap: 12px; }
.hud-portrait { position: relative; width: 104px; height: 112px; flex-shrink: 0; border: 4px solid #dce7ec; border-bottom-width: 7px; border-radius: 48% 48% 34% 34%; background: linear-gradient(150deg, #496b9b, #12233f); box-shadow: inset 0 0 0 4px var(--me), 0 3px 8px #0006; overflow: hidden; }
.hud-portrait canvas { width: 112px; height: 112px; display: block; margin-left: -8px; }
.hud-identity { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hud-name { font: 800 23px/1 var(--num); color: #fff7e8; max-width: 172px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; background: #132139eb; transform: skewY(-3deg); }
.hud-identity > span { font: 700 12px var(--ui); margin: 6px 0 0 5px; color: #e2e6ee; text-shadow: 0 2px 3px #000; }
.pressure { display: flex; align-items: baseline; position: relative; margin-top: -5px; color: var(--pressure-color); font-variant-numeric: tabular-nums; transform: rotate(-4deg); text-shadow: 2px 3px 0 #101e36, -1px -1px 0 #101e36, 0 5px 8px #0009; }
.hud-pct { font: 800 68px/.95 var(--num); letter-spacing: -.025em; }
.pressure > span { font: 800 30px var(--num); }
.pressure-delta { position: absolute; right: -18px; top: -6px; font: 800 25px var(--num); color: #ffb442; }
.hud-super { display: flex; align-items: center; gap: 8px; padding: 6px 9px; margin: 8px 0 0 9px; background: #0b1731e6; border-radius: 14px; font: 700 13px var(--num); color: #edf1f7; }
.hud-super span { text-transform: uppercase; }
.super-track { height: 8px; flex: 1; border-radius: 4px; overflow: hidden; background: #020916; box-shadow: inset 0 1px 2px #000; }
.super-track i { display: block; width: 100%; height: 100%; background: linear-gradient(#fff393, #ffb52e); transform: scaleX(0); transform-origin: left; }
.hud-super b { font-size: 13px; }
.hud-super.full { color: #ffdc68; outline: 2px solid #f3b733; }
.hud-super.full .super-track { flex: 0 0 24px; }
.hud-feedback:empty { display: none; }
.hud-feedback { color: #ffe68f; background: #19253af0; border-radius: 6px; padding: 8px 12px; font-size: 14px; }
.player-out { padding: 16px 18px; background: linear-gradient(140deg, #263e61, #101d33); border: 2px solid #6683a2; border-radius: 18px 18px 18px 5px; }
.player-out h2 { font: 800 34px/1 var(--num); margin: 6px 0 14px; }
.out-place { color: #cbdced; font-size: 14px; }
.throw-state { font: 700 23px var(--num); color: #ffd354; }
.throw-command { font-size: 14px; line-height: 20px; }
.player-out small { display: block; color: #d5dfeb; font-size: 13px; line-height: 19px; }
.hud-bonus { display: flex; align-items: center; gap: 8px; margin-left: 8px; padding: 6px 12px 6px 6px; background: #12203bed; border: 2px solid var(--bonus); border-radius: 28px 8px 8px 28px; max-width: 290px; }
.hud-bonus canvas { width: 40px; height: 40px; }
.hud-bonus b,.hud-bonus span { display: block; font-size: 14px; }
.hud-bonus span { color: #d5dfeb; font-size: 13px; margin-top: 3px; }
.hud-actions { position: absolute; bottom: 24px; right: 24px; display: flex; align-items: flex-end; gap: 14px; transform: scale(var(--ui-scale)); transform-origin: bottom right; }
.action { --action: #8abbff; --action-dark: #274c84; display: flex; flex-direction: column; align-items: center; width: 100px; min-height: 158px; position: relative; color: #fff6de; text-align: center; filter: drop-shadow(0 3px 4px #000a); }
.action-tackle { --action: #ffd56b; --action-dark: #8a5920; margin-bottom: 34px; }
.action-kick { --action: #bdefff; --action-dark: #357cb2; width: 122px; }
.action-medallion { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 35% 18%, #3d6897 0, #17345c 46%, #0b182d 79%); box-shadow: inset 0 2px 2px #ecf6ff8c, inset 0 -7px 6px #020917, 0 4px 0 #071122; }
.action-medallion::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid #afcdec66; box-shadow: inset 0 1px 3px #0008; }
.game-icon { display: block; width: 64px; height: 64px; overflow: visible; }
.action-medallion > .game-icon { width: 62px; height: 62px; transform: rotate(-9deg); }
.action-kick .action-medallion { width: 108px; height: 108px; }
.action-kick .game-icon { width: 75px; height: 75px; }
.action-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); fill: none; transform: rotate(-90deg); }
.ring-track { stroke: #455d78; stroke-width: 5; }
.ring-fill { stroke: var(--action); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.action:not(.ready) .action-medallion > .game-icon { opacity: .38; }
.action:not(.ready) .ring-fill { stroke: #8197b0; }
.action-timer { position: absolute; top: 26px; left: 0; right: 0; font: 800 31px/1 var(--num); color: #fff7e3; text-shadow: 0 2px 3px #081323; }
.action kbd { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); z-index: 1; background: #f4ecd5; color: #172339; border: 2px solid #fffbe8; border-bottom-color: #99aac1; border-radius: 5px; padding: 3px 7px; font: 800 12px var(--ui); white-space: nowrap; box-shadow: 0 2px 3px #0008; }
.action > b { display: block; font: 800 21px/1 var(--num); text-transform: uppercase; margin: 15px 0 6px; text-shadow: 0 2px 2px #06132a; }
.action-state { min-height: 17px; max-width: 116px; font: 600 12px/16px var(--ui); color: #f8e1b7; text-shadow: 0 2px 2px #000; }
.action-state:empty { display: none; }
.charge-tip { max-width: 122px; font: 600 12px/16px var(--ui); color: #e6f1fb; }
.bpips,.tpips { display: flex; justify-content: center; gap: 5px; margin: 0 0 4px; }
.bpips i,.tpips i { display: block; position: relative; width: 13px; height: 13px; border: 1.5px solid #e4eaf1; border-radius: 50%; overflow: hidden; background: #0b152a; }
.tpips i { border-radius: 3px; width: 16px; height: 9px; }
.bpips i::after,.tpips i::after { content: ''; position: absolute; inset: 0; background: var(--action); transform: scaleY(var(--fill,0)); transform-origin: bottom; }
.action.refreshed .action-medallion { animation: action-ready .32s cubic-bezier(.2,.8,.3,1); }
.action.charging .action-medallion { background: radial-gradient(circle at 35% 18%, #cf9337, #69411b 55%, #241809 85%); }
.action.charging .ring-fill { stroke: #ffd453; }
.at-sideline .hud-actions { display: none; }
.symbol-0 { clip-path: none; border-radius: 50%; }
.symbol-1 { border-radius: 0; transform: rotate(45deg); }
.symbol-2 { transform: none; clip-path: polygon(50% 0,100% 100%,0 100%); }
.symbol-3 { clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.hud-score { border: 2px solid #bec8da; border-radius: 12px 4px 14px 4px; overflow: visible; background: linear-gradient(#213b60, #11223d); box-shadow: 0 4px 8px #0006; }
.hud-roster { min-height: 44px; }
.hud-roster:has(.hud-left) { background: linear-gradient(#ffe675, #ffbf32); color: #172133; border-radius: 9px 0 0 1px; }
.hud-left { font-size: 36px; }
.hud-time { font-size: 32px; }
.screens { position: absolute; inset: 0; }
.spectator { position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 8px; background: #11213de8; border-radius: 10px; pointer-events: auto; font-size: 13px; }
.spectator.sideline { display: none; }
.spectator .spec-text { padding: 0 8px; }
.spectator button { min-height: 44px; padding: 6px 10px; }
/* Celebration uses the whole stadium: the characters own the left, rewards the right. */
.results.game-results { position: absolute; inset: 0; width: auto; padding: 0; border: 0; overflow: hidden; background: linear-gradient(90deg, #0b173000 43%, #09162bc9 77%), linear-gradient(#09162b5e, #09162b00 40%, #09162b66); pointer-events: none; }
.victory-banner { position: absolute; top: 24px; left: 5%; display: flex; align-items: center; gap: 18px; transform: rotate(-3deg); animation: victory-arrival .65s cubic-bezier(.16,1,.3,1); filter: drop-shadow(0 6px 6px #0007); }
.victory-cup { width: 144px; height: 156px; flex-shrink: 0; }
.victory-cup .game-icon,.victory-cup img { width: 100%; height: 100%; object-fit: contain; }
.victory-word { display: block; color: #ffcf4b; font: 800 clamp(52px,6vw,92px)/.9 var(--num); letter-spacing: -.025em; text-shadow: 3px 5px 0 #172847, -1px -1px 0 #172847; }
.results h1 { display: inline-block; font: 800 clamp(26px,3vw,42px)/1 var(--num); padding: 7px 22px 10px 16px; margin: 12px 0 0; background: #fff4d1; color: #152644; clip-path: polygon(0 0,100% 0,95% 100%,0 100%); max-width: 560px; overflow-wrap: anywhere; }
.results-rewards { position: absolute; width: 31%; max-width: 430px; right: 5%; top: 26%; max-height: calc(74% - 142px); overflow: auto; pointer-events: auto; padding: 4px 8px 14px; animation: rewards-arrival .65s cubic-bezier(.16,1,.3,1); }
.result-personal { margin: 0 0 22px; color: #fff2ce; font: 800 27px/1.1 var(--num); text-align: center; text-shadow: 0 3px 4px #0008; }
.result-stats { display: flex; gap: 20px; justify-content: center; }
.reward-medal { position: relative; width: 132px; padding: 10px 6px 15px; text-align: center; border: 2px solid #e8c66c; border-radius: 22px 22px 38% 38%; background: linear-gradient(145deg, #294f7c, #101f37); box-shadow: inset 0 2px 0 #fff5, 0 5px 12px #0005; }
.reward-medal .game-icon { margin: -6px auto 0; width: 52px; height: 52px; }
.reward-medal b { display: block; font: 800 47px/1 var(--num); color: #fff1c3; }
.reward-medal span { display: block; font: 600 13px/18px var(--ui); color: #e7effa; }
.result-moment { margin: 22px 0 10px; padding: 12px 15px; background: #142b47dd; border-radius: 4px 18px 18px 18px; }
.result-moment span { display: block; color: #c4d6ec; font-size: 12px; }
.result-moment b { display: block; margin: 5px 0; font: 800 27px/1 var(--num); color: #ffd765; }
.result-moment p { margin: 4px 0 0; font-size: 14px; }
.result-details { font-size: 13px; background: #0c1930cf; border-radius: 8px; }
.result-details summary { cursor: pointer; min-height: 44px; padding: 12px; font-size: 14px; color: #e6eefb; }
.result-details table { width: 100%; border-collapse: collapse; font-size: 12px; }
.result-details th,.result-details td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #54739366; }
.result-details .me { color: #ffe070; }
.result-details p { padding: 6px 10px; line-height: 18px; color: #cad8ee; }
.table-team { background: #315375; }
.results footer { position: absolute; bottom: 28px; right: 5%; width: 31%; max-width: 430px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; pointer-events: auto; }
.results footer .cta { flex-basis: 100%; border: 2px solid #fff0a3; border-bottom: 6px solid #c37a18; border-radius: 10px; background: linear-gradient(#ffe579, #ffbd34); color: #1b2b45; box-shadow: 0 6px 12px #0005; font: 800 32px var(--num); }
.results footer .cta span { float: right; font-size: 38px; line-height: 32px; }
.results footer button:not(.cta) { background: #10223edf; border: 1px solid #7591b1; border-radius: 7px; flex: 1; }
.victory-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.victory-confetti i { position: absolute; left: var(--x); top: -24px; width: 8px; height: 16px; border-radius: 2px; background: #ffd252; animation: victory-confetti 2.4s calc(var(--i)*.045s) ease-in both; }
.victory-confetti i:nth-child(3n) { background: #70c6ff; }
.victory-confetti i:nth-child(3n + 1) { background: #fff6d6; }
.tutorial { bottom: 245px; border: 2px solid #819fc0; border-radius: 14px; background: #11223bed; box-shadow: 0 5px 14px #0005; }
.tutorial button { min-height: 44px; }
.tutorial footer { flex-wrap: wrap; }
.high-contrast .player-panel { border: 0; }
.high-contrast .action-state { background: #081328; border-radius: 3px; }
@keyframes action-ready { 0% { transform: scale(.85); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes victory-arrival { from { transform: translateY(-36px) rotate(-7deg) scale(.9); opacity: .3; } to { transform: rotate(-3deg); opacity: 1; } }
@keyframes rewards-arrival { from { transform: translateX(32px); opacity: .2; } to { transform: translateX(0); opacity: 1; } }
@keyframes victory-confetti { 0% { transform: translateY(-30px) rotate(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(100vh) rotate(540deg); opacity: 0; } }
@media (max-height:760px) { .hud-personal { left: 16px; bottom: 16px; } .hud-actions { right: 16px; bottom: 16px; } .victory-banner { top: 16px; } .results-rewards { top: 27%; } }
@media (max-width:1100px) { .hud-actions { gap: 8px; } .results-rewards,.results footer { width: 36%; right: 3%; } .victory-cup { width: 110px; height: 128px; } }
.hud-grab { position: absolute; top: -43px; left: 0; right: 0; display: flex; align-items: center; gap: 7px; justify-content: center; padding: 5px 9px; border-radius: 8px; background: #10223ee8; font: 600 12px var(--ui); color: #f4e9ce; }
.hud-grab kbd { font-size: 12px; background: #f4ecd5; color: #172339; }
.hud-grab.cooldown { color: #c0cad8; }
.hud-grab b { color: #ffda7d; font-variant-numeric: tabular-nums; }

/* Rejected inputs get one restrained medallion response; cooldowns stay still. */
.action.denied .action-medallion { animation:action-denied .24s ease-out; }
.action.denied .ring-track { stroke:#eab081; }
@keyframes action-denied { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px) rotate(-2deg); } 60% { transform:translateX(2px) rotate(1deg); } }
.feed-line { flex-wrap:wrap; }
.feed-line small { flex-basis:100%; color:#c9d7e4; font:500 11px/1.3 var(--ui); }
.player-out .out-cause { margin:0 0 12px; font:500 12px/1.4 var(--ui); color:#d3dfed; }
.result-exit { margin:-8px 0 18px; padding:10px 12px; background:#12223ade; border-radius:8px; }
.result-exit b { display:block; font:700 18px/1.15 var(--num); color:#fff0ce; }
.result-exit span { display:block; margin-top:5px; color:#cbd9e8; font:500 12px/1.4 var(--ui); }

.kb-map-options { display:flex; gap:7px; }
.kb-menu .kb-map-options button { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 5px 7px; font-size:16px; }
.kb-map-options img { display:block; width:82px; height:43px; object-fit:contain; }
.kb-match-options .kb-roof-size { margin:8px 0 14px; color:#e5d3a7; }
.kb-menu .kb-rule-options .kb-note { margin-bottom:12px; }
.kb-menu .kb-rule-options .kb-note:last-child { margin-bottom:0; }

.hud-minimap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%) scale(var(--ui-scale));transform-origin:bottom center;border:1px solid #fff5dd40;box-shadow:0 3px 0 #0005;pointer-events:none}.hud-minimap.hidden{display:none}.at-sideline .hud-minimap{opacity:.85}
.training-panel{position:absolute;right:24px;top:24px;display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--panel);border-top:3px solid var(--cyan);font-size:13px;color:var(--muted);transform:scale(var(--ui-scale));transform-origin:top right;pointer-events:none}.training-panel b{font:800 22px var(--num);color:var(--text)}.training-panel kbd{font:700 12px var(--ui);padding:1px 6px;border:1px solid var(--line);margin-right:6px;color:var(--text)}.training-panel.hidden{display:none}
.hud.training .hud-score,.hud.training .hud-feed{display:none}

.touch-layer{position:absolute;inset:0;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;z-index:5}.touch-layer.hidden{display:none}
.touch-stick{position:absolute;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:2px solid #fff5dd55;background:#07122644;opacity:0;pointer-events:none;transition:opacity .08s}.touch-stick.on{opacity:1}
.touch-stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff5ddcc;box-shadow:0 2px 0 #0006}.touch-stick.right i{background:#3fe6ffcc}
.touch-pause{position:absolute;left:12px;top:12px;width:44px;height:44px;min-height:0;padding:0;display:flex;gap:6px;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);pointer-events:auto}.touch-pause span{width:5px;height:18px;background:var(--text)}
.touch-play .hud-actions{z-index:6}.touch-play .hud-actions .action-ball,.touch-play .hud-actions .action-tackle{pointer-events:auto;touch-action:none}.touch-play .hud-actions kbd,.touch-play .action-kick{display:none}
.touch-play .hud-score{top:10px}
.touch-rotate{display:none}
@media (orientation:portrait){.touch-device .touch-rotate{display:flex;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#071226;color:var(--text);font:800 26px var(--num);text-align:center;padding:24px}.touch-rotate i{width:44px;height:72px;border:4px solid var(--text);border-radius:8px;transform:rotate(-90deg)}}
@media (max-height:500px){.hud-actions{transform:scale(calc(var(--ui-scale) * .78))}.hud-personal{transform:scale(calc(var(--ui-scale) * .7))}.hud-minimap{transform:translateX(-50%) scale(calc(var(--ui-scale) * .7))}.hud-score{transform:translateX(-50%) scale(calc(var(--ui-scale) * .8))}}
.pause-note{margin:-18px 0 18px;color:var(--muted);font-size:13px}