/* Shared competition overlay: single player and online use the same markup. */
:is(#hud,#matchHUD){--body:"Bahnschrift","Microsoft YaHei",sans-serif;--mono:"Consolas",monospace;--display:var(--body);--lime:#ffab7d;position:fixed;inset:0;z-index:5;pointer-events:none;color:#eaf0f4;font-family:var(--body)}
:is(#hud,#matchHUD) :is(button,select,.stick){pointer-events:auto;min-height:38px;font-family:inherit;color:inherit}
:is(#hud,#matchHUD) .scoreboard{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;border:1px solid #8ca0ae66;border-radius:3px;overflow:hidden;box-shadow:0 6px 20px #0004;filter:none}
:is(#hud,#matchHUD) .alliance-score{min-width:100px;padding:8px 16px;text-align:center;color:#fff;border:0;border-bottom:3px solid;border-radius:0}
:is(#hud,#matchHUD) .red-score{background:#b72332;border-color:#ff6270}:is(#hud,#matchHUD) .blue-score{background:#116bab;border-color:#68c4ff}
:is(#hud,#matchHUD) .alliance-score>span{display:block;font:10px var(--mono);letter-spacing:.12em}:is(#hud,#matchHUD) .alliance-score>strong{display:block;font:700 43px/1.1 var(--display);font-variant-numeric:tabular-nums;color:white}:is(#hud,#matchHUD) .alliance-score>small{font:10px var(--mono)}
:is(#hud,#matchHUD) .clock-box{min-width:150px;background:#ecede4;color:#162333;padding:8px 14px;text-align:center}:is(#hud,#matchHUD) .clock-box>span{font:700 10px var(--mono)}:is(#hud,#matchHUD) .clock-box>strong{display:block;font:700 32px/1.35 var(--mono)}:is(#hud,#matchHUD) .clock-box>small{font:9px var(--mono);color:#445b6a}
:is(#hud,#matchHUD) .phase-track{height:3px;background:#23392033;margin-bottom:4px}:is(#hud,#matchHUD) .phase-track i{display:block;height:100%;background:#dc6a35}
:is(#hud,#matchHUD) .view-toolbar{position:absolute;top:16px;left:18px;display:flex;align-items:center;gap:0;padding:4px;background:#0c1824ed;border:1px solid #68809480;border-radius:3px;box-shadow:none}:is(#hud,#matchHUD) .view-toolbar>span{display:none}:is(#hud,#matchHUD) .view-toolbar select{width:150px;font-size:12px;background:transparent;border:0;padding:5px}:is(#hud,#matchHUD) .view-toolbar button{min-width:39px;padding:4px 10px;background:transparent;border:0;border-left:1px solid #68809450;font-size:19px}
:is(#hud,#matchHUD) .team-support{position:absolute;top:80px;left:18px;width:222px;max-width:222px;padding:7px;background:#0c1824d9;border:1px solid #68809445;border-radius:3px}:is(#hud,#matchHUD) .team-support button{font-size:11px;color:#ffbd9d;background:transparent;border:0}:is(#hud,#matchHUD) #teamIntent{font:11px/1.8 var(--body);color:#c3d0da;padding:5px 4px}
:is(#hud,#matchHUD) .arena-hint{position:absolute;top:16px;right:18px;max-width:240px;padding:10px 14px;background:#0c1824ec;border-left:2px solid var(--lime);font-size:12px;line-height:1.5;color:#d2dce5;box-shadow:none}
:is(#hud,#matchHUD) .telemetry{display:flex;align-items:center;position:absolute;bottom:49px;left:50%;transform:translateX(-50%);gap:20px;min-height:78px;padding:11px 18px;background:#0c1824f5;border:1px solid #69839699;border-radius:3px;box-shadow:none;backdrop-filter:none;max-width:calc(100% - 24px)}
:is(#hud,#matchHUD) .player-id>span,:is(#hud,#matchHUD) .fuel-meter>span,:is(#hud,#matchHUD) .device-box>span{display:block;font:10px var(--mono);color:#adbecb;letter-spacing:.06em}:is(#hud,#matchHUD) .player-id>strong{display:block;font:700 25px var(--body);white-space:nowrap;margin-top:5px}:is(#hud,#matchHUD) .fuel-meter{min-width:100px}:is(#hud,#matchHUD) .fuel-meter>strong{font:27px var(--mono)}:is(#hud,#matchHUD) .fuel-meter strong span{font-size:12px;color:#91a7b7;margin-left:4px}:is(#hud,#matchHUD) .fuel-meter>div{height:3px;background:#42505e;margin-top:4px}:is(#hud,#matchHUD) .fuel-meter i{display:block;height:100%;background:var(--lime)}
:is(#hud,#matchHUD) .status-toggle{position:relative;text-align:left;border:0;border-left:1px solid #69839650;border-radius:0;background:transparent;min-width:100px;padding:0 0 0 15px;min-height:46px}:is(#hud,#matchHUD) .status-toggle>strong{display:block;font:13px var(--mono);margin-top:6px;color:#b9c8d4}:is(#hud,#matchHUD) .status-toggle.enabled>strong{color:#ffb28d}:is(#hud,#matchHUD) .status-toggle>span{display:block;font-size:11px;color:#a9bac8}:is(#hud,#matchHUD) kbd{font:10px var(--mono);padding:2px 4px;background:#26384a;color:#dfebf3;border:1px solid #688094;border-radius:2px}:is(#hud,#matchHUD) .status-toggle kbd{position:absolute;right:0;top:0}
:is(#hud,#matchHUD) .device-box{border-left:1px solid #69839650;padding-left:18px;min-width:96px}:is(#hud,#matchHUD) .device-box>strong{display:block;font-size:12px;margin-top:6px}:is(#hud,#matchHUD) .device-box small{display:block;font:10px var(--mono);color:#a8bac8;margin-top:4px;white-space:nowrap}:is(#hud,#matchHUD) .text-button{font-size:11px;background:transparent;border:0;padding:5px;max-width:88px}
:is(#hud,#matchHUD) .keyboard-strip{display:flex;position:absolute;bottom:17px;left:50%;transform:translateX(-50%);gap:20px;white-space:nowrap}:is(#hud,#matchHUD) .keyboard-strip>span{display:flex;align-items:center;gap:6px;font:10px var(--mono)}:is(#hud,#matchHUD) .keyboard-strip kbd{position:static}:is(#hud,#matchHUD) .keyboard-strip b{font:11px var(--body);color:#bdcdd8;margin:0}
:is(#hud,#matchHUD) .touch-controls{display:none;position:absolute;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;gap:15px;pointer-events:none}:is(#hud,#matchHUD) .stick{position:relative;flex:0 0 125px;width:125px;height:125px;border-radius:50%;touch-action:none;border:1px solid #b4c6d477;background:#182d4066}:is(#hud,#matchHUD) .turn-stick{flex-basis:105px;width:105px;height:105px}:is(#hud,#matchHUD) .stick-caption{position:absolute;top:14px;left:0;right:0;text-align:center;font:10px var(--mono)}:is(#hud,#matchHUD) .stick-knob{position:absolute;left:50%;top:50%;width:43px;height:43px;border-radius:50%;background:#d9e4ef88;transform:translate(-50%,-50%)}:is(#hud,#matchHUD) .touch-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:180px;max-width:180px;margin-left:auto;margin-right:0}:is(#hud,#matchHUD) .touch-actions button{touch-action:none;user-select:none;font-size:11px;min-height:44px;padding:8px;background:#14283dea;border:1px solid #6b879966}:is(#hud,#matchHUD) .touch-actions .fire-button{grid-column:span 2;background:#ff7948ed;color:#111820}:is(#hud,#matchHUD) .touch-actions button.pressed{background:#ffb990;color:#111820}
.touch-enabled :is(#hud,#matchHUD) .touch-controls{display:flex}.touch-enabled :is(#hud,#matchHUD) .telemetry{bottom:184px}.touch-enabled :is(#hud,#matchHUD) .keyboard-strip{display:none}
body[data-view=match]>header{display:none}#matchNotice{position:absolute;top:125px;left:50%;transform:translateX(-50%);background:#14212aeb;padding:8px 16px;max-width:45%;text-align:center;font-size:12px;color:#edcf9c}#matchNotice:empty{display:none}#onlineSkill{position:absolute;right:18px;bottom:150px;padding:12px 20px;background:#122438e8;border:1px solid #e5c394;color:#f2d7ae}
#onlineSettings{width:min(600px,94vw);max-height:90dvh;overflow:auto;padding:26px;background:#101e2bee;border:1px solid #879caf;color:#edf2f5;border-radius:5px}#onlineSettings::backdrop{background:#020810aa}#onlineSettings h2{font-size:28px;margin:0 0 8px}#onlineSettings p{color:#b7c6d1;font-size:14px;line-height:1.5}#onlineSettings .match-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}#onlineSettings label{display:flex;flex-direction:column;gap:8px;font-size:13px}#onlineSettings label.check{flex-direction:row;align-items:center}#onlineSettings input[type=checkbox]{min-height:18px;width:18px}#onlineSettings input[type=range]{width:100%;padding:0}#onlineSettings .settings-actions{display:flex;gap:10px;margin-top:20px}#onlineSettings .settings-actions button{flex:1}#onlineSettings .binding-row{display:grid;grid-template-columns:1fr 90px 90px;gap:8px;align-items:center;margin:8px 0}#onlineSettings summary{cursor:pointer;margin:15px 0}#onlineSettings button:focus-visible,:is(#hud,#matchHUD) :is(button,select):focus-visible{outline:2px solid #ffcfac;outline-offset:3px}
@media(max-width:1150px){:is(#hud,#matchHUD) .view-toolbar{top:122px;left:14px}:is(#hud,#matchHUD) .team-support{top:174px;left:14px;width:195px}:is(#hud,#matchHUD) .arena-hint{top:122px;right:14px;max-width:210px}:is(#hud,#matchHUD) .telemetry{gap:12px}:is(#hud,#matchHUD) .player-id>strong{font-size:22px}}
@media(max-width:700px){:is(#hud,#matchHUD) .scoreboard{top:8px}:is(#hud,#matchHUD) .alliance-score{min-width:74px;padding:7px 10px}:is(#hud,#matchHUD) .alliance-score>strong{font-size:34px}:is(#hud,#matchHUD) .clock-box{min-width:140px}:is(#hud,#matchHUD) .telemetry{gap:9px;padding:9px;flex-wrap:wrap;justify-content:center;width:max-content}:is(#hud,#matchHUD) .device-box{padding-left:8px;min-width:80px}:is(#hud,#matchHUD) .status-toggle{min-width:70px;padding-left:8px}:is(#hud,#matchHUD) .keyboard-strip{display:none}:is(#hud,#matchHUD) .team-support{display:none}:is(#hud,#matchHUD) .arena-hint{top:175px;left:14px;right:auto;max-width:calc(100% - 28px)}:is(#hud,#matchHUD) .touch-controls{left:10px;right:10px;gap:8px}:is(#hud,#matchHUD) .stick{flex-basis:88px;width:88px;height:88px}:is(#hud,#matchHUD) .turn-stick{flex-basis:75px;width:75px;height:75px}:is(#hud,#matchHUD) .touch-actions{width:165px}:is(#hud,#matchHUD) .stick-caption{font-size:8px;top:8px}#matchNotice{top:218px;max-width:85%;width:max-content}#onlineSettings .match-settings-grid{grid-template-columns:1fr}}
@media(pointer:coarse){:is(#hud,#matchHUD) .touch-controls{display:flex}:is(#hud,#matchHUD) .telemetry{bottom:184px}:is(#hud,#matchHUD) .keyboard-strip,:is(#hud,#matchHUD) kbd{display:none}:is(#hud,#matchHUD) .team-support{display:none}}
@media(pointer:coarse) and (max-height:600px){:is(#hud,#matchHUD) .telemetry{bottom:12px;max-width:calc(100% - 470px);min-width:150px;padding:8px;gap:8px;flex-wrap:wrap;justify-content:center}:is(#hud,#matchHUD) .telemetry :is(.player-id,.device-box,#finish){display:none}:is(#hud,#matchHUD) .touch-actions{margin-left:0}:is(#hud,#matchHUD) .view-toolbar{top:108px}:is(#hud,#matchHUD) .arena-hint{top:108px;right:14px;left:auto;font-size:11px}:is(#hud,#matchHUD) .alliance-score>strong{font-size:30px}#onlineSkill{bottom:170px}}

@media(max-width:1150px){body[data-view=match] #soundtrack{top:14px;right:14px}}
@media(max-width:700px){body[data-view=match] #soundtrack{top:119px;right:14px}body[data-view=match] #musicLabel{display:none}}
:is(#hud,#matchHUD) .player-id>span{white-space:nowrap}

/* Touch play keeps the centre of the field clear. Secondary actions stay
   directly accessible as translucent 44 px circles, including on tablets. */
:is(#hud,#matchHUD)[data-touch=true]{--move-size:clamp(88px,18dvh,112px);--turn-size:clamp(80px,16dvh,100px);--edge:max(10px,env(safe-area-inset-right));--bottom:max(10px,env(safe-area-inset-bottom))}
:is(#hud,#matchHUD)[data-touch=true] :is(.keyboard-strip,.team-support,.arena-hint,.device-box,.player-id,#finish,kbd){display:none}
:is(#hud,#matchHUD)[data-touch=true] .scoreboard{top:max(8px,env(safe-area-inset-top));width:180px;min-height:48px;box-shadow:none}
:is(#hud,#matchHUD)[data-touch=true] .alliance-score{min-width:46px;width:46px;padding:3px 4px;border-bottom-width:2px;background:#a7192bd9}
:is(#hud,#matchHUD)[data-touch=true] .blue-score{background:#08629cd9}
:is(#hud,#matchHUD)[data-touch=true] .alliance-score>span{font-size:8px}
:is(#hud,#matchHUD)[data-touch=true] .alliance-score>strong{font-size:25px}
:is(#hud,#matchHUD)[data-touch=true] .alliance-score>small{display:none}
:is(#hud,#matchHUD)[data-touch=true] .clock-box{min-width:0;flex:1;padding:3px 5px;background:#ecede4e6}
:is(#hud,#matchHUD)[data-touch=true] .clock-box>span{font-size:8px}
:is(#hud,#matchHUD)[data-touch=true] .clock-box>strong{font-size:21px;line-height:1.15}
:is(#hud,#matchHUD)[data-touch=true] .clock-box>small{display:none}
:is(#hud,#matchHUD)[data-touch=true] .phase-track{height:2px;margin:2px 0 0}
:is(#hud,#matchHUD)[data-touch=true] .view-toolbar{top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));padding:0;border:0;background:#0c182459}
:is(#hud,#matchHUD)[data-touch=true] .view-toolbar select{width:82px;min-height:44px;font-size:10px;padding:4px}
:is(#hud,#matchHUD)[data-touch=true] .view-toolbar button{min-width:44px;min-height:44px;padding:4px;font-size:18px}
:is(#hud,#matchHUD)[data-touch=true] .telemetry{top:max(8px,env(safe-area-inset-top));right:var(--edge);bottom:auto;left:auto;transform:none;display:flex;flex-wrap:nowrap;gap:7px;width:auto;min-width:0;max-width:none;min-height:44px;padding:0;border:0;background:transparent}
:is(#hud,#matchHUD)[data-touch=true] .fuel-meter{min-width:43px;max-width:48px;text-align:center;background:#0c182459;border-radius:8px;padding:3px}
:is(#hud,#matchHUD)[data-touch=true] .fuel-meter>span{font-size:8px}
:is(#hud,#matchHUD)[data-touch=true] .fuel-meter>strong{font-size:20px}
:is(#hud,#matchHUD)[data-touch=true] .fuel-meter strong span{display:none}
:is(#hud,#matchHUD)[data-touch=true] .status-toggle{width:44px;min-width:44px;height:44px;min-height:44px;padding:5px 2px;text-align:center;border:1px solid #d7e6f077;border-radius:50%;background:#0c182459}
:is(#hud,#matchHUD)[data-touch=true] .status-toggle>span{display:block;font-size:8px;line-height:10px;color:#fff}
:is(#hud,#matchHUD)[data-touch=true] .status-toggle>strong{font-size:9px;line-height:11px;margin-top:3px;color:#dce5eb}
:is(#hud,#matchHUD)[data-touch=true] .status-toggle.enabled{background:#a46c3959;border-color:#ffd1a0}
:is(#hud,#matchHUD)[data-touch=true] .touch-controls{display:flex;left:max(10px,env(safe-area-inset-left));right:var(--edge);bottom:var(--bottom);height:var(--move-size);gap:0;justify-content:space-between;align-items:end}
:is(#hud,#matchHUD)[data-touch=true] .stick{width:var(--move-size);height:var(--move-size);flex:0 0 var(--move-size);border:1px solid #d5e3ec66;background:#132a3c26;box-shadow:none}
:is(#hud,#matchHUD)[data-touch=true] .turn-stick{width:var(--turn-size);height:var(--turn-size);flex-basis:var(--turn-size)}
:is(#hud,#matchHUD)[data-touch=true] .stick-knob{width:36px;height:36px;background:#d9e4ef66;border:1px solid #d9e4ef88;box-shadow:none}
:is(#hud,#matchHUD)[data-touch=true] .stick-caption{top:10px;font-size:8px;color:#fff;text-shadow:0 1px 3px #000}
:is(#hud,#matchHUD)[data-touch=true] .touch-actions{display:contents}
:is(#hud,#matchHUD)[data-touch=true] .touch-secondary{position:absolute;right:0;bottom:calc(var(--turn-size) + 12px);display:flex;gap:8px;align-items:center;pointer-events:none}
:is(#hud,#matchHUD)[data-touch=true] .touch-secondary button{pointer-events:auto;touch-action:none;width:44px;min-width:44px;min-height:44px;height:44px;border-radius:50%;padding:4px 2px;border:1px solid #d7e6f077;background:#0c182459;font-size:9px;line-height:11px;text-align:center;white-space:normal;user-select:none}
:is(#hud,#matchHUD)[data-touch=true] .touch-actions .fire-button{position:absolute;right:calc(var(--turn-size) + 12px);bottom:0;width:62px;height:62px;min-height:62px;border-radius:50%;padding:5px;background:#f3835099;border:1px solid #ffd1acbb;color:#fff;font-size:13px;text-shadow:0 1px 2px #5a1f08}
:is(#hud,#matchHUD)[data-touch=true] :is(.touch-secondary button,.fire-button).pressed{background:#edaa62cc;border-color:#fff4db;color:#14212c}
:is(#hud,#matchHUD)[data-touch=true] .ability-hud{right:calc(var(--edge) + var(--turn-size) + 84px);bottom:var(--bottom);gap:0}
:is(#hud,#matchHUD)[data-touch=true] .ability-context{display:none}
:is(#hud,#matchHUD)[data-touch=true] .ability-button{width:50px;height:50px;min-height:50px;background:#0c182466}
:is(#hud,#matchHUD)[data-touch=true] #onlineSkill{right:calc(var(--edge) + var(--turn-size) + 84px);bottom:var(--bottom);width:52px;height:52px;min-height:52px;padding:4px;border-radius:50%;background:#0c182466;font-size:9px;line-height:11px}
:is(#hud,#matchHUD)[data-touch=true] #endOnlinePractice{top:64px;left:max(10px,env(safe-area-inset-left));right:auto;bottom:auto;max-width:150px;min-height:36px;padding:5px 9px;font-size:10px;background:#0c182459}
:is(#hud,#matchHUD)[data-touch=true] #matchNotice{top:64px;max-width:45%;padding:5px 9px;font-size:10px;pointer-events:none}
@media(max-width:600px){:is(#hud,#matchHUD)[data-touch=true] :is(.view-toolbar,.telemetry){top:64px}:is(#hud,#matchHUD)[data-touch=true] #matchNotice{top:116px;max-width:65%}:is(#hud,#matchHUD)[data-touch=true] #endOnlinePractice{top:116px;max-width:120px}}
body:has(:is(#hud,#matchHUD)[data-touch=true]:not([hidden])) #soundtrack{top:64px;right:max(10px,env(safe-area-inset-right));bottom:auto}
body:has(:is(#hud,#matchHUD)[data-touch=true]:not([hidden])) #soundtrack .music-bar{gap:4px;border:0;background:transparent;backdrop-filter:none}
body:has(:is(#hud,#matchHUD)[data-touch=true]:not([hidden])) #soundtrack button{width:44px;height:44px;min-width:44px;min-height:44px;padding:5px;justify-content:center;border:1px solid #d7e6f077;border-radius:50%;background:#0c182459}
body:has(:is(#hud,#matchHUD)[data-touch=true]:not([hidden])) #musicLabel{display:none}
@media(max-width:600px){body:has(:is(#hud,#matchHUD)[data-touch=true]:not([hidden])) #soundtrack{top:116px}}