/* Painted silver frames with explicit blue/red identities. */
:root { --team-blue:#63c6ff; --team-red:#ff536f; --combat-inset:140px; }
.hud-top,.combat-dock,.arena-frame { isolation:isolate; }
.hud-top::after,.combat-dock::after,.arena-frame::after {
  content:''; position:absolute; inset:-3px; z-index:4; pointer-events:none;
  border:16px solid transparent;
  border-image:url('assets/ui/arena-v4/steel-frame.png') 210 300 / 20px / 0 stretch;
}
.hud-top { border-radius:5px; overflow:visible; background:linear-gradient(110deg,#102a41f5,#08121ff5 48%,#321424f5); }
.hud-top::before { left:12px; right:12px; background:linear-gradient(90deg,var(--team-blue),#a8bed1,var(--team-red)); }
.hud-top .team.blue { color:var(--team-blue); }
.hud-top .team.red { color:var(--team-red); }
.hud-top .team { padding:14px 20px; }
.hud-top .mid { background:#07111b99; }
.hud-top .round-timer { color:#f1f7ff; }
.arena-frame { position:relative; border-radius:3px; padding:12px; border:1px solid #4a6c89; background:linear-gradient(105deg,#112b41f2,#07121eed); }
.arena-frame[data-team='1'] { border-color:#a5455c; background:linear-gradient(105deg,#361829f2,#130e1bed); }
.arena-frame.self { box-shadow:inset 3px 0 var(--team-blue),0 5px 16px #0005; }
.arena-frame[data-team='1'].self { box-shadow:inset 3px 0 var(--team-red),0 5px 16px #0005; }
.arena-frame[data-team='0'] .frame-health>i { background:linear-gradient(90deg,#227bb4,var(--team-blue)); }
.arena-frame[data-team='1'] .frame-health>i { background:linear-gradient(90deg,#a62d49,var(--team-red)); }
.arena-frame[data-team='0'] .frame-name { color:#bbebff; }
.arena-frame[data-team='1'] .frame-name { color:#ffb9c5; }
.frame-health { height:15px; border-radius:2px; }
.frame-health>b { font-size:9px; line-height:15px; }
.frame-portrait { border-radius:3px; border-color:#94b3ce88; }
.plate.blue .pname { color:#97dcff; }.plate.red .pname { color:#ff9bae; }
.plate.blue .pbar>i { background:var(--team-blue); }.plate.red .pbar>i { background:var(--team-red); }
.results-table .result-red .result-team th { color:#ff9bae; background:#331322; }

/* Everything belonging to the action bar lives below the arena canvas.
   hud.js measures this panel, including its utility row, instead of guessing. */
.combat-dock { width:min(920px,calc(100vw - 28px)); bottom:10px; padding:9px 10px 4px; border-radius:4px; background:linear-gradient(135deg,#152d42,#081320 65%); box-shadow:0 6px 25px #0009; }
.combat-dock .combat-utility { grid-column:1 / -1; grid-row:1; display:flex; align-items:center; justify-content:space-between; gap:10px; height:32px; min-width:0; padding:0 9px 4px; border-bottom:1px solid #7fa5c52b; }
.combat-dock .hud-left { grid-column:1; grid-row:2; padding:10px 12px; }
.combat-dock .hud-abilities { grid-column:2; grid-row:2; padding:10px 12px; }
.combat-dock .statuses { position:relative; left:auto; bottom:auto; transform:none; margin:0; max-width:55%; width:auto; flex-wrap:nowrap; overflow:hidden; gap:4px; }
.combat-dock .statuses .aura { width:26px; height:26px; flex-basis:26px; border-radius:3px; }
.combat-dock .statuses .aura>b { font-size:10px; line-height:13px; }
.combat-dock .castbar { position:relative; left:auto; bottom:auto; transform:none; flex:0 1 270px; width:270px; height:22px; min-height:22px; margin-left:auto; border-radius:2px; border-color:#83bee9; }
.combat-dock .castbar .cast-name { font-size:10px; line-height:20px; }
.combat-dock .hp>i { display:block; height:100%; background:linear-gradient(90deg,#267fb5,#79d4ff); }
.hud[data-team='1'] .combat-dock .hp>i { background:linear-gradient(90deg,#ac2e48,#ff7088); }
.combat-dock .portrait { border-radius:4px; border-color:#9ab9d3; }
.combat-dock .energy { height:18px; border-color:#9b9beb80; }
.combat-dock .slot { border-radius:4px; border-color:#87a5ba88; box-shadow:inset 0 0 0 1px #07101a,0 2px 7px #0008; }
.combat-dock .slot .icon,.combat-dock .slot .ring { border-radius:2px; }
.combat-dock .slot.ready { border-color:#9fcde5; }
.combat-dock .slot:hover { transform:none; border-color:#d6f1ff; box-shadow:0 0 12px #6bc8ff55; }
.hud-stats { bottom:3px; z-index:5; }
.trainbar { top:auto; bottom:calc(var(--combat-inset) + 12px); width:224px; max-width:calc(100vw - 24px); gap:7px; padding:10px; border-radius:4px; border-color:#9a805344; background:linear-gradient(135deg,#142333f5,#080f19f5); }
.trainbar .tlabel { display:block; width:100%; color:#c9b082; font:700 9px/1.3 system-ui; letter-spacing:1.5px; }
.trainbar #tr-exit { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; padding:8px; color:#fff1cd; border:1px solid #c5a466; border-radius:3px; background:linear-gradient(#493c29,#241e18); font:700 12px/1.3 system-ui; cursor:pointer; box-shadow:inset 0 1px #ffe4a52b,0 2px 8px #0005; }
.trainbar #tr-exit:hover { background:linear-gradient(#655033,#37291d); border-color:#ffe1a1; }
.trainbar #tr-exit:focus-visible { outline:2px solid #fff1cd; outline-offset:3px; }
.trainbar #tr-exit kbd { margin-left:auto; padding:3px 5px; border:1px solid #c5a46666; border-radius:3px; color:#dfd0af; font:600 10px/1 system-ui; }
.trainbar #tr-reset { width:100%; }
.trainbar .training-hero-label{color:#c9b082;font:700 10px/1.3 system-ui;letter-spacing:.4px}
.trainbar #tr-hero{width:100%;min-height:36px;padding:6px 9px;color:#f7ead0;border:1px solid #9a805377;border-radius:3px;background:#101d27;font:600 12px/1.3 system-ui}
.trainbar #tr-hero:focus-visible{outline:2px solid #e0bd78;outline-offset:2px}
.trainbar.dummy-mode .trskill,.trainbar.dummy-mode .tsep { display:none; }
.training-readout{display:flex;justify-content:space-between;gap:10px;width:100%;color:#c9dce2;font:600 11px/1.3 system-ui}.training-readout span{display:flex;gap:5px}.training-readout strong{color:#f6dc9c;font-variant-numeric:tabular-nums}.hud-top[hidden],.arena-frames[hidden]{display:none!important}
.ultimate-indicator { display:flex; align-items:center; gap:7px; flex:0 0 auto; color:#899ab4; font:750 8px/1.2 system-ui; letter-spacing:.6px; }
.ultimate-indicator kbd { display:grid; place-items:center; width:23px; height:23px; border:1px solid #65769b; border-radius:3px; background:#111c32; font:800 13px system-ui; }
.ultimate-indicator.ready { color:#fff0ac; font-size:10px; letter-spacing:.8px; text-shadow:0 0 9px #ffd16588; }
.ultimate-indicator.ready kbd { background:#7c5018; border-color:#ffe2a0; box-shadow:0 0 12px #ffc25488; color:#fff8de; }
.combat-dock.ultimate-ready { border-top-color:#ffe2a0; }
.combat-dock.ultimate-ready .slot.ult::after { content:'R'; position:absolute; right:3px; bottom:3px; z-index:4; padding:1px 4px; color:#1d1204; background:#ffe09b; border-radius:2px; font:900 12px system-ui; }
.combat-dock .statuses { max-width:40%; flex:0 1 auto; }
.combat-dock .castbar { flex-basis:220px; }
.shield-rail { display:block; position:relative; height:9px; margin:2px 0 3px; width:100%; border:1px solid #c0e9ff99; background:#122938; box-shadow:0 0 5px #7bd8ff33; }
.shield-rail[hidden] { display:none!important; }
.shield-rail>i { display:block; height:100%; background:linear-gradient(90deg,#6ebddd,#e7faff); }
.shield-rail>b { position:absolute; inset:0 3px 0 auto; color:#fff; font:800 9px/8px system-ui; text-shadow:0 1px 2px #00121f,1px 0 2px #00121f; }
.plate .shield-rail { width:92px; height:8px; margin:3px auto 1px; }
.plate .pbar { width:92px; height:8px; }
.plate .pultimate { display:block; width:92px; height:5px; margin:2px auto 0; overflow:hidden; background:#15111b; border:1px solid #483b24; border-radius:2px; box-shadow:0 1px 3px #000a; }
.plate .pultimate[hidden] { display:none; }
.plate .pultimate>i { display:block; height:100%; background:linear-gradient(90deg,#b57b28,#ebbf61); }
.plate .pultimate.ready { border-color:#ffe5a0; box-shadow:0 0 5px #f4c46699,0 1px 3px #000a; }
.plate .pultimate.ready>i { background:linear-gradient(90deg,#eebc56,#fff0b7); }
.head-control { width:max-content; max-width:180px; margin:0 auto 5px; padding:4px 7px; border:1px solid #ffd365; border-radius:3px; background:#241a08ed; color:#ffe18b; font:850 11px/1.1 system-ui; letter-spacing:.5px; box-shadow:0 2px 8px #000a; text-shadow:0 1px 2px #000; }
.head-control[hidden] { display:none; }
.head-control[data-control='silence'] { color:#e5baff; border-color:#bd80ed; background:#24122fed; }
.head-control[data-control='fear'] { color:#edb6ff; border-color:#bb6ce3; background:#280f35ed; }
.head-control[data-control='root'],.head-control[data-control='slow'] { color:#b7f2de; border-color:#68cfb1; background:#0b2925ed; }
.head-control[data-control='interrupt'] { color:#ffb3c2; border-color:#ff627f; background:#340c1aed; }
@media(max-width:760px) {
  .combat-dock { display:grid; grid-template-columns:minmax(0,1fr); width:calc(100vw - 16px); padding:9px 7px 4px; }
  .combat-dock .hud-left { grid-column:1; grid-row:2; padding:7px 10px; }
  .combat-dock .hud-abilities { grid-column:1; grid-row:3; margin:0; padding:7px 3px; gap:6px; }
  .combat-dock .combat-utility { padding-inline:6px; }
  .combat-dock .castbar { flex-basis:120px; min-width:85px; }
  .ultimate-indicator { font-size:7px; gap:4px; max-width:92px; }.ultimate-indicator kbd { flex:0 0 20px; }
  .ultimate-indicator.ready { font-size:8px; letter-spacing:.3px; }
  .combat-dock .statuses { max-width:32%; }
  .combat-dock .slot { width:clamp(36px,11.4vw,49px); height:clamp(36px,11.4vw,49px); }
  .arena-frame { padding:9px; }.arena-frames { width:142px; }
  .arena-frames.allies { left:7px; }.arena-frames.opponents { right:7px; }
  .hud-top { top:10px; }.hud-top .team { padding:12px; }
}
@media(max-height:600px) and (min-width:761px) {
  .combat-dock { padding-top:7px; bottom:8px; }.combat-dock .combat-utility { height:28px; }
  .combat-dock .hud-left,.combat-dock .hud-abilities { padding-block:6px; }
}

/* Compact floating controls: no full-width command strip. Camera protects this area. */
body:has(#select.hidden) canvas#game { height:100dvh; }
body:has(#select.hidden) .hud::before { display:none; }
.combat-dock { width:min(830px,calc(100vw - 20px)); padding:4px 6px; bottom:9px; }
.combat-dock .hud-left { padding:6px 9px; }
.combat-dock .hud-abilities { padding:6px 8px; gap:6px; }
.combat-dock .slot { width:48px; height:48px; }
.combat-dock .combat-utility { height:27px; padding-bottom:3px; }
.combat-utility:not(:has(.aura,.castbar.on,.ultimate-indicator.ready)) { display:none; }
.combat-dock .portrait { width:34px; height:34px; flex-basis:34px; }
.hud-stats { display:block; position:fixed; z-index:55; margin:0; padding:5px 7px; color:#d4e8f5; background:#07121bcc; border-radius:3px; pointer-events:none; }
.hud-stats[hidden] { display:none; }
.hud-stats[data-corner="top-left"] { top:8px; left:8px; right:auto; bottom:auto; }
.hud-stats[data-corner="top-right"] { top:8px; right:8px; left:auto; bottom:auto; }
.hud-stats[data-corner="bottom-left"] { bottom:8px; left:8px; right:auto; top:auto; }
.hud-stats[data-corner="bottom-right"] { bottom:8px; right:8px; left:auto; top:auto; }
body:has(#select.hidden):has(.hud-stats:not([hidden])[data-corner="top-right"]) #fullscreen-toggle { right:90px; }
.display-settings { margin:18px 0; padding:14px; border:1px solid #66849e55; border-radius:6px; }
.display-settings legend { color:#bed4e6; font-size:12px; }
.display-settings label { display:flex; align-items:center; gap:9px; margin:8px 0; font-size:12px; }
.display-settings input[type="checkbox"] { width:16px; height:16px; min-height:0; margin:0; }
.display-settings select { width:100%; }
@media(max-width:760px){
 .combat-dock { width:calc(100vw - 16px); }
 .combat-dock .hud-left { padding:5px 8px; }
 .combat-dock .hud-abilities { padding:5px 3px; }
 .combat-dock .slot { width:clamp(34px,10.6vw,46px); height:clamp(34px,10.6vw,46px); }
}

/* Balanced icon/bar proportions, with no permanent readiness copy. */
.combat-dock { width:max-content; max-width:calc(100vw - 20px); grid-template-columns:minmax(190px,240px) auto; padding:6px 8px; }
.combat-dock .hud-left { padding:7px 9px; gap:9px; }
.combat-dock .hud-abilities { padding:5px 8px; gap:7px; }
.combat-dock .slot { width:56px; height:56px; flex:0 0 56px; }
.combat-dock .bars { gap:6px; }.combat-dock .energy { margin:0; height:15px; }.combat-dock .energy-text { line-height:13px; font-size:9px; }
.combat-dock .hp { height:17px; }
.combat-dock .combat-utility { height:27px; }
.combat-utility:not(:has(.aura,.castbar.on)) { display:none; }
.combat-dock.ultimate-ready { border-color:#dfcc9a99; box-shadow:0 0 12px #e7cf872b; }
.combat-dock.ultimate-ready .energy { border-color:#929fe75e; box-shadow:inset 0 2px 5px #0009; }
.combat-dock.ultimate-ready .energy>i { background:linear-gradient(90deg,#596cc4,#9d9be6 65%,#d0c8ff); box-shadow:none; }
.combat-dock.ultimate-ready .energy-text { color:#f4f0ff; }
.combat-dock.ultimate-ready .slot.ult { box-shadow:0 0 7px #ead18c35; border-color:#e5d3a8; }
.combat-dock.ultimate-ready .slot.ult::after { content:none; }
.ultimate-notice { position:fixed; top:64px; right:24px; max-width:240px; padding:7px 10px; border:1px solid #d7c18c88; border-radius:4px; background:#0d1825eb; color:#f2dfa9; font:750 10px/1.3 system-ui; pointer-events:none; box-shadow:0 0 12px #dbc58d18; }
.ultimate-notice[hidden],.anchor-channel[hidden] { display:none; }
.anchor-channel { position:absolute; left:0; top:0; width:155px; height:20px; border:1px solid var(--anchor-color,#fff); background:#09131eea; border-radius:3px; overflow:hidden; pointer-events:none; }
.anchor-channel>i { display:block; height:100%; background:var(--anchor-color,#fff); opacity:.55; }
.anchor-channel>b { position:absolute; inset:0; text-align:center; color:#fff; font:750 10px/18px system-ui; text-shadow:0 1px 3px #000; }
@media(max-width:760px){
 .combat-dock { width:min(420px,calc(100vw - 16px)); grid-template-columns:minmax(0,1fr); }
 .combat-dock .hud-left { padding:6px 8px; }.combat-dock .hud-abilities { padding:6px 2px; gap:6px; }
 .combat-dock .slot { width:clamp(34px,10.5vw,50px); height:clamp(34px,10.5vw,50px); flex-basis:clamp(34px,10.5vw,50px); }
 .ultimate-notice { top:94px; right:8px; max-width:210px; padding:4px 7px; font-size:8px; }
}
.round-countdown { position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:6px; min-width:180px; padding:18px 36px; pointer-events:none; color:#fff2d2; text-align:center; background:radial-gradient(ellipse,#09131eeb,transparent 72%); filter:drop-shadow(0 2px 8px #000); z-index:30; }
.round-countdown[hidden] { display:none; }
body:has(#hud[data-phase="countdown"]) #banner { visibility:hidden; }
.round-countdown span { font:700 12px/1.5 system-ui; letter-spacing:.24em; }
.round-countdown strong { font:700 clamp(64px,9vw,104px)/1 Georgia,serif; text-shadow:0 0 28px #e2b95d88; }
.round-countdown small { font:600 11px/1.5 system-ui; letter-spacing:.18em; color:#c0d5df; }