/* ============================================================
   BATTLE-V3.CSS — Codex Battle HUD (design-review/mockups/battle-*-v1.webp,
   spec HANDOFF.md "Battle HUD mockups and full layout spec")
   Every box below is Codex's written (x,y,w,h) in reference pixels, scaled by
   --u (1 reference px): desktop ref 1920x1080, phone landscape ref 844x390.
   Elements are moved into the containers by js/battle-hud.js (same ids).
   ============================================================ */

/* ---------- reference unit + safe areas ---------- */
#screen-round{
  --u: min(calc(100vw / 844), calc(100vh / 390));             /* phone ref (also the fallback) */
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);  --sb: env(safe-area-inset-bottom, 0px);
  --blue:#00C2FF; --red:#FF2D2D; --green:#00FF87; --amber:#FFB300; --yellow:#FFE600;
  --ink:#F4F7FF; --ink2:#B7C4D8; --muted:#899AB3; --edge:#344963;
  position:relative; overflow:hidden; padding:0 !important;
}
@media (min-width:768px) and (min-height:521px){
  #screen-round{ --u: min(calc(100vw / 1920), calc(100vh / 1080)); }
}

/* old positions of the moved pieces are void now */
#screen-round .pdots, #screen-round .tally, #screen-round .round-instr-row, #screen-round .peak-row, #screen-round .round-tip,
#screen-round #debug-level, #screen-round .voice-status-pill, #screen-round .battle-vs-center .vol-lbl, #screen-round #round-stage{ display:none !important; }
#screen-round .battle-vs-center{ position:absolute !important; width:0; height:0; overflow:hidden; }
#screen-round .fighter-slot .fighter-nametag{ display:none !important; } /* (none left there; the tags live in the plates) */

/* ============================================================
   SPRITE CANVASES — P1 (80,260,640,640) / P2 (1200,260,640,640);
   phone (24,94,240,240) / (580,94,240,240). Square, contain, no distortion.
   ============================================================ */
#screen-round #arena-zoom-wrap{ position:absolute !important; inset:0; z-index:1 !important; pointer-events:none; }
#screen-round #battle-arena{ position:absolute !important; inset:0; width:auto; max-width:none; min-height:0; padding:0; display:block; }
#screen-round #battle-arena .fighter-slot{ position:absolute !important; width:var(--spr); height:var(--spr); bottom:var(--spr-b); top:auto; display:block; flex:none; }
#screen-round #battle-arena .fighter-slot.p1{ left:calc(var(--spr-x) + var(--sl)); }
#screen-round #battle-arena .fighter-slot.p2{ right:calc(var(--spr-x) + var(--sr)); }
#screen-round #battle-arena .dog-sprite-wrap{ position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:flex-end; justify-content:center; }
#screen-round #battle-arena .dog-sprite-img{ width:100%; height:100%; object-fit:contain; object-position:center bottom; }
#screen-round #battle-arena .dog-sprite-wrap::before{ width:70%; height:70%; }
#screen-round #battle-arena .dog-sprite-wrap::after{ width:80%; height:22%; }
#screen-round #battle-arena .dog-ground-shadow{ position:absolute; left:50%; bottom:calc(var(--spr) * .03); width:60%; height:calc(var(--spr) * .06); margin:0; transform:translateX(-50%); }
#screen-round{ --spr:calc(240 * var(--u)); --spr-b:calc(56 * var(--u) + var(--sb)); --spr-x:calc(24 * var(--u)); }
@media (min-width:768px) and (min-height:521px){
  #screen-round{ --spr:calc(640 * var(--u)); --spr-b:calc(180 * var(--u)); --spr-x:calc(80 * var(--u)); }
}

/* ============================================================
   SHARED PLATE LOOK (panel-frame-v3 9-slice, same as Home)
   ============================================================ */
#screen-round > .hud-plate, #screen-round > .hud-score, #screen-round > .hud-panel, #screen-round > .hud-prompt, #screen-round > .hud-controls{
  position:absolute !important; z-index:6 !important; box-sizing:border-box;
}
#screen-round > .hud-plate::before, #screen-round > .hud-score::before, #screen-round > .hud-panel::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; box-sizing:border-box;
  border-style:solid; border-width:calc(14 * var(--u)); border-image:url('../assets/ui/panel-frame-v3.webp') 64 fill / calc(14 * var(--u));
  filter:drop-shadow(0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.55));
}
#screen-round > .hud-plate > *, #screen-round > .hud-score > *, #screen-round > .hud-panel > *{ position:relative; z-index:1; }

/* ============================================================
   PLAYER PLATES — (80,64,480,100) / mirrored; phone (12,8,236,48)
   avatar/frame 64|36, name 24|14, title 16|12
   ============================================================ */
#screen-round > .hud-plate{ top:calc(8 * var(--u) + var(--st)); width:calc(236 * var(--u)); height:calc(48 * var(--u));
  display:flex; align-items:center; padding:0 calc(10 * var(--u)); }
#screen-round > .hud-p1{ left:calc(12 * var(--u) + var(--sl)); }
#screen-round > .hud-p2{ right:calc(12 * var(--u) + var(--sr)); }
#screen-round .hud-plate::after{ content:''; position:absolute; z-index:1; top:22%; bottom:22%; width:calc(4 * var(--u)); border-radius:2px; }
#screen-round .hud-p1::after{ right:calc(12 * var(--u)); background:var(--blue); box-shadow:0 0 calc(10 * var(--u)) var(--blue); }
#screen-round .hud-p2::after{ left:calc(12 * var(--u)); background:var(--red); box-shadow:0 0 calc(10 * var(--u)) var(--red); }
#screen-round .hud-plate .fighter-nametag{ display:flex !important; align-items:center; gap:calc(10 * var(--u)); width:100%; min-width:0; max-width:none !important;
  background:none !important; border:none !important; box-shadow:none !important; padding:0 calc(14 * var(--u)) 0 0 !important; margin:0 !important;
  font-family:'Oswald',sans-serif !important; color:var(--ink) !important; order:0; align-self:auto; position:static; }
#screen-round .hud-p1 .fighter-nametag{ text-align:left; justify-content:flex-start; }
#screen-round .hud-p2 .fighter-nametag{ flex-direction:row-reverse; text-align:right; justify-content:flex-start; padding:0 0 0 calc(14 * var(--u)) !important; }
#screen-round .hud-plate .nametag-av-wrap{ margin:0 !important; flex-shrink:0; }
#screen-round .hud-plate .nametag-av{ width:calc(36 * var(--u)) !important; height:calc(36 * var(--u)) !important; flex-shrink:0; border-radius:calc(6 * var(--u));
  overflow:hidden; display:block; }
#screen-round .hud-p1 .nametag-av{ box-shadow:0 0 0 2px var(--blue), 0 0 10px rgba(0,194,255,.55); }
#screen-round .hud-p2 .nametag-av{ box-shadow:0 0 0 2px var(--red), 0 0 10px rgba(255,45,45,.55); }
#screen-round .hud-plate .nametag-av-wrap[class*="gear-frame"] .nametag-av{ box-shadow:none; }
#screen-round .hud-plate .nametag-txt{ flex:1; min-width:0; display:block; font-family:'Oswald',sans-serif !important; font-weight:700 !important;
  font-size:calc(14 * var(--u)) !important; line-height:1.15; letter-spacing:.5px; color:var(--ink) !important; text-transform:uppercase;
  text-shadow:0 2px 0 #000 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#screen-round .hud-plate .nametag-title-img{ display:block; height:calc(14 * var(--u)) !important; width:auto; max-width:100%; margin-top:1px; object-fit:contain; object-position:left center; }
#screen-round .hud-p2 .nametag-title-img{ margin-left:auto; object-position:right center; }
#screen-round .hud-plate .nametag-title{ display:block; font-family:'Oswald',sans-serif !important; font-size:calc(12 * var(--u)) !important; font-weight:700;
  color:var(--yellow) !important; letter-spacing:.5px; text-shadow:0 1px 0 #000; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   SCORE ASSEMBLY — (680,24,560,144); phone (280,8,284,64)
   score 40|24, timer 56|28, round 16|12, two win pips per side
   ============================================================ */
#screen-round > .hud-score{ left:50%; transform:translateX(-50%); top:calc(8 * var(--u) + var(--st)); width:calc(284 * var(--u)); height:calc(78 * var(--u)); } /* Codex FIX: 78u so the ROUND/pips row sits inside the 14u frame with 4u clearance */
#screen-round .hs-side{ position:absolute; top:calc(6 * var(--u)); width:calc(96 * var(--u)); height:calc(42 * var(--u));
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; line-height:1; }
#screen-round .hs-you{ left:calc(10 * var(--u)); } #screen-round .hs-rival{ right:calc(10 * var(--u)); }
#screen-round .hs-lbl{ font-size:calc(12 * var(--u)); font-weight:700; letter-spacing:1px; }
#screen-round .hs-you .hs-lbl, #screen-round .hs-you b{ color:#3fd3ff; }
#screen-round .hs-rival .hs-lbl, #screen-round .hs-rival b{ color:#ff4747; }
#screen-round .hs-side b{ font-family:'Bangers','Oswald',sans-serif; font-weight:400; font-size:calc(24 * var(--u)); line-height:1; margin-top:1px;
  text-shadow:0 2px 0 #000; }
#screen-round .hs-timer{ position:absolute; left:50%; top:calc(1 * var(--u)); transform:translateX(-50%); width:calc(46 * var(--u)); height:calc(46 * var(--u));
  border-radius:50%; --p:1; --ring:#344963;
  background:conic-gradient(var(--ring) calc(var(--p) * 360deg), #0a1020 0); padding:calc(3 * var(--u)); box-sizing:border-box;
  box-shadow:0 0 0 calc(2 * var(--u)) #0a1020, 0 0 calc(14 * var(--u)) rgba(0,194,255,.2); }
#screen-round .hs-timer::before{ content:''; position:absolute; inset:calc(3 * var(--u)); border-radius:50%; background:radial-gradient(circle at 50% 40%, #1c2a45, #080d1a 72%); }
#screen-round .hs-timer.live{ --ring:var(--blue); box-shadow:0 0 0 calc(2 * var(--u)) #0a1020, 0 0 calc(18 * var(--u)) rgba(0,194,255,.5); }
#screen-round .hs-timer.urgent{ --ring:var(--amber); box-shadow:0 0 0 calc(2 * var(--u)) #0a1020, 0 0 calc(18 * var(--u)) rgba(255,179,0,.6); }
#screen-round .hs-timer span{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-family:'Bangers','Oswald',sans-serif; font-size:calc(28 * var(--u)); line-height:1; color:var(--ink); text-shadow:0 2px 0 #000; letter-spacing:1px; }
#screen-round .hs-timer.urgent span{ color:var(--amber); }
#screen-round .hs-foot{ position:absolute; left:0; right:0; bottom:calc(18 * var(--u)); height:calc(13 * var(--u)); display:flex; align-items:center; justify-content:center; gap:calc(8 * var(--u)); }
#screen-round .hs-round{ font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(11 * var(--u)); line-height:1; letter-spacing:1.5px; color:var(--ink2); white-space:nowrap; }
#screen-round .hs-round.sd{ color:var(--amber); text-shadow:0 0 8px rgba(255,179,0,.5); }
#screen-round .hs-pips{ display:flex; gap:calc(4 * var(--u)); }
#screen-round .hs-pips i{ width:calc(8 * var(--u)); height:calc(8 * var(--u)); border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:rgba(0,0,0,.4); display:block; box-sizing:border-box; }
#screen-round .hs-pips-me i.on{ background:var(--blue); border-color:var(--blue); box-shadow:0 0 6px var(--blue); }
#screen-round .hs-pips-opp i.on{ background:var(--red); border-color:var(--red); box-shadow:0 0 6px var(--red); }
/* phone: the small foot row sits under the timer, sides move up */
#screen-round .hs-side{ top:calc(4 * var(--u)); }

/* ============================================================
   STATE PROMPT — (720,230,480,90); phone (302,84,240,40)
   GET READY / 3-2-1 / BARK NOW / SUDDEN DEATH / WAITING FOR SCORE, same box
   ============================================================ */
#screen-round > .hud-prompt{ left:50%; transform:translateX(-50%); top:calc(92 * var(--u) + var(--st)); width:calc(240 * var(--u)); height:calc(40 * var(--u));
  display:flex; align-items:center; justify-content:center; gap:calc(10 * var(--u)); padding:0 calc(12 * var(--u));
  border-style:solid; border-width:calc(6 * var(--u)) calc(18 * var(--u)); border-image:url('../assets/ui/header-ribbon-v3.webp') 24 96 fill / calc(6 * var(--u)) calc(18 * var(--u));
  filter:drop-shadow(0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.6)); overflow:hidden; }
#screen-round .hud-prompt .instr{ display:inline-flex !important; align-items:center; gap:.3em; font-family:'Bangers','Oswald',sans-serif !important;
  font-size:calc(24 * var(--u)) !important; line-height:1 !important; letter-spacing:1.5px; color:var(--ink) !important; white-space:nowrap;
  text-shadow:0 2px 0 #000 !important; min-height:0 !important; margin:0 !important; padding:0 !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
#screen-round .hud-prompt .instr.go{ color:var(--yellow) !important; animation:none !important; }
#screen-round .hud-prompt .instr-ico{ height:.95em; }
#screen-round .hud-prompt.long .instr{ font-family:'Oswald',sans-serif !important; font-weight:700; font-size:calc(13 * var(--u)) !important; letter-spacing:.5px; text-transform:uppercase; white-space:normal; text-align:center; line-height:1.1 !important; }
#screen-round .hud-prompt.sd .instr.go{ color:var(--amber) !important; }
#screen-round .hud-prompt .countdown-display{ position:static !important; height:auto !important; width:auto !important; line-height:1 !important; margin:0 !important; padding:0 !important;
  font-family:'Bangers',sans-serif !important; font-size:calc(30 * var(--u)) !important; color:var(--yellow) !important; text-shadow:0 2px 0 #000 !important; background:none !important; }
#screen-round .hud-prompt .countdown-display .ico{ width:calc(20 * var(--u)); height:calc(20 * var(--u)); color:var(--ink2); }
#screen-round .hud-prompt .countdown-display:not(.in-prompt){ display:none !important; } /* the bark timer lives in the score assembly */
#screen-round .hud-prompt .hp-wait{ display:none; font-family:'Bangers','Oswald',sans-serif; font-size:calc(20 * var(--u)); letter-spacing:1.5px; color:var(--ink2); text-shadow:0 2px 0 #000; white-space:nowrap; }
#screen-round .hud-prompt[data-state="score"] .hp-wait{ display:block; }
#screen-round .hud-prompt[data-state="score"] .instr, #screen-round .hud-prompt[data-state="score"] .countdown-display{ display:none !important; }

/* ============================================================
   COMBINED HUD — (650,740,620,210); phone (264,245,316,125)
   tug (24,20,572,32) lead (24,64,572,26) mic (24,102,572,32) detection (24,148,572,38)
   phone: tug (16,10,284,18) lead (16,33,284,18) mic (16,55,284,24) detection (16,90,284,20)
   ============================================================ */
#screen-round > .hud-panel{ left:50%; transform:translateX(-50%); bottom:calc(20 * var(--u) + var(--sb)); width:calc(316 * var(--u)); height:calc(125 * var(--u));
  --px:calc(16 * var(--u)); --pw:calc(284 * var(--u)); }
#screen-round > .hud-panel::before{ border-width:calc(10 * var(--u)); border-image-width:calc(10 * var(--u)); opacity:.94; }
#screen-round .hud-panel > .hp-tug, #screen-round .hud-panel > .hp-lead, #screen-round .hud-panel > .hp-mic, #screen-round .hud-panel > .hp-detect{
  position:absolute; left:var(--px); width:var(--pw); box-sizing:border-box; }
#screen-round .hud-panel > .hp-tug{ top:calc(10 * var(--u)); height:calc(18 * var(--u)); }
#screen-round .hud-panel > .hp-lead{ top:calc(33 * var(--u)); height:calc(18 * var(--u)); }
#screen-round .hud-panel > .hp-mic{ top:calc(55 * var(--u)); height:calc(24 * var(--u)); }
#screen-round .hud-panel > .hp-detect{ top:calc(90 * var(--u)); height:calc(20 * var(--u)); }

/* tug track: blue (you) / red (rival) shares + bone marker, driven by updateTugBar */
#screen-round #tug-section{ display:block !important; position:static !important; width:100% !important; height:100%; max-width:none !important; margin:0 !important; padding:0 !important; }
#screen-round #tug-section .tug-labels{ display:none !important; }
#screen-round #tug-section .tug-bar-outer{ height:100% !important; width:100%; border-radius:999px; overflow:visible; box-sizing:border-box;
  border:calc(2 * var(--u)) solid #0a1020 !important; background:#0b1326 !important; box-shadow:inset 0 0 0 1px var(--edge), inset 0 2px 6px rgba(0,0,0,.6) !important; }
#screen-round #tug-section .tug-bar-me{ background:linear-gradient(90deg, #0a5bd6, var(--blue)) !important; box-shadow:0 0 12px rgba(0,194,255,.55) !important; border-radius:999px 0 0 999px !important; }
#screen-round #tug-section .tug-bar-opp{ background:linear-gradient(270deg, #9c0f1d, var(--red)) !important; box-shadow:0 0 12px rgba(255,45,45,.55) !important; border-radius:0 999px 999px 0 !important; }
#screen-round #tug-section .tug-center-line{ width:2px; height:120%; border-radius:0; border:0; background:rgba(244,247,255,.35); box-shadow:none; z-index:1; }
#screen-round #tug-section .tug-center-line::before{ content:none !important; display:none !important; }
#screen-round #tug-section .hp-bone{ position:absolute; top:50%; left:50%; height:calc(26 * var(--u)); width:auto; transform:translate(-50%,-50%) rotate(90deg); z-index:3;
  pointer-events:none; filter:drop-shadow(0 0 4px rgba(255,255,255,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.8));
  transition:left .28s cubic-bezier(.22,.8,.32,1); }
/* percentages sit on the lead line, left / right of the lead text */
#screen-round #tug-section .tug-pcts{ position:absolute; left:0; width:100%; top:calc(23 * var(--u)); height:calc(18 * var(--u)); margin:0 !important; z-index:2;
  display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
#screen-round #tug-section .tug-pct{ font-family:'Oswald',sans-serif !important; font-weight:700; font-size:calc(14 * var(--u)) !important; line-height:1; text-shadow:0 2px 0 #000 !important; }
#screen-round #tug-section .tug-pct.me{ color:#3fd3ff !important; } #screen-round #tug-section .tug-pct.opp{ color:#ff4747 !important; }
/* before the bark starts: neutral track, no fabricated scoring */
#screen-round .hud-panel.is-idle #tug-section .tug-bar-me, #screen-round .hud-panel.is-idle #tug-section .tug-bar-opp{ filter:saturate(.15) brightness(.55); box-shadow:none !important; }
#screen-round .hud-panel.is-idle #tug-section .tug-bar-me::after, #screen-round .hud-panel.is-idle #tug-section .tug-bar-opp::after{ animation:none; opacity:0; }
#screen-round .hud-panel.is-idle #tug-section .tug-pcts{ visibility:hidden; }
#screen-round .hud-panel.is-idle #tug-section .hp-bone{ left:50% !important; filter:grayscale(1) brightness(.8); }

/* lead line */
#screen-round .hp-lead{ display:flex; align-items:center; justify-content:center; }
#screen-round #live-leader{ display:flex !important; align-items:center; justify-content:center; gap:.35em; width:auto !important; max-width:62% !important; margin:0 !important; padding:0 !important;
  font-family:'Oswald',sans-serif !important; font-weight:700 !important; font-size:calc(14 * var(--u)) !important; line-height:1; letter-spacing:.5px; white-space:nowrap; overflow:hidden;
  background:none !important; border:none !important; box-shadow:none !important; text-shadow:0 2px 0 #000; animation:none !important; }
#screen-round #live-leader .ico{ width:1em; height:1em; flex-shrink:0; }
#screen-round #live-leader.winning{ color:#3fd3ff !important; } #screen-round #live-leader.losing{ color:#ff4747 !important; } #screen-round #live-leader.tied{ color:var(--ink2) !important; }
#screen-round .hp-lead-idle{ display:none; font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(14 * var(--u)); letter-spacing:1px; color:var(--muted); }
#screen-round .hud-panel.is-idle #live-leader{ display:none !important; }
#screen-round .hud-panel.is-idle .hp-lead-idle{ display:block; }

/* Bark Power = raw mic amplitude (not proof of a bark) */
#screen-round .hp-mic{ display:flex; align-items:center; gap:calc(8 * var(--u)); }
#screen-round .hp-mic-lbl{ font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(11 * var(--u)); letter-spacing:.5px; color:var(--ink); white-space:nowrap; flex-shrink:0; }
#screen-round .hp-mic-track{ flex:1; height:calc(14 * var(--u)); min-width:0; position:relative; }
#screen-round .hp-mic-track .vol-meter{ position:relative; width:100% !important; height:100% !important; margin:0 !important; border-radius:999px !important; transform:none !important;
  border:calc(2 * var(--u)) solid #0a1020 !important; background:#0b1326 !important; box-shadow:inset 0 0 0 1px var(--edge) !important; display:block; overflow:hidden; box-sizing:border-box; }
#screen-round .hp-mic-track .vol-fill{ position:absolute; left:0; top:0; bottom:0; height:100% !important; border-radius:999px !important;
  background:linear-gradient(90deg, #00FF87 0%, #FFE600 60%, #FF2D2D 100%) !important; transition:width .06s linear; }
#screen-round .hp-mic-off{ display:none; font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(11 * var(--u)); letter-spacing:.5px; color:var(--amber); white-space:nowrap; flex-shrink:0; }
#screen-round .hud-panel.mic-off .hp-mic-track .vol-fill{ width:0 !important; box-shadow:none !important; }
#screen-round .hud-panel.mic-off .hp-mic-off{ display:block; }
#screen-round .hud-panel.mic-off .hp-mic-track .vol-meter{ background:repeating-linear-gradient(135deg, #0b1326 0 6px, #141d33 6px 12px) !important; }

/* detection: ONE live classifier state + burst count */
#screen-round #bark-ai-status{ display:none !important; }
#screen-round .hp-detect-line{ display:flex; align-items:center; gap:calc(6 * var(--u)); height:100%; padding:0 calc(10 * var(--u)); box-sizing:border-box;
  background:rgba(8,13,26,.72); border:1px solid var(--edge); border-radius:calc(6 * var(--u)); font-family:'Oswald',sans-serif; font-weight:700;
  font-size:calc(12 * var(--u)); letter-spacing:.5px; color:var(--ink2); white-space:nowrap; }
#screen-round .hp-dot{ width:calc(8 * var(--u)); height:calc(8 * var(--u)); border-radius:50%; background:var(--muted); flex-shrink:0; }
#screen-round .hp-st{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; }
#screen-round .hp-bursts{ flex-shrink:0; color:var(--muted); }
#screen-round .hp-bursts b{ color:var(--ink); font-weight:700; }
#screen-round .hp-detect-line[data-st="bark"]{ border-color:rgba(0,255,135,.55); }
#screen-round .hp-detect-line[data-st="bark"] .hp-st{ color:var(--green); }
#screen-round .hp-detect-line[data-st="bark"] .hp-dot{ background:var(--green); box-shadow:0 0 8px var(--green); }
#screen-round .hp-detect-line[data-st="voice"] .hp-st{ color:var(--amber); }
#screen-round .hp-detect-line[data-st="voice"] .hp-dot{ background:var(--amber); }
#screen-round .hp-detect-line[data-st="muted"], #screen-round .hp-detect-line[data-st="off"]{ border-color:rgba(255,179,0,.5); }
#screen-round .hp-detect-line[data-st="muted"] .hp-st, #screen-round .hp-detect-line[data-st="off"] .hp-st{ color:var(--amber); }
#screen-round .hp-detect-line[data-st="muted"] .hp-dot, #screen-round .hp-detect-line[data-st="off"] .hp-dot{ background:var(--amber); }
#screen-round .hp-detect-line[data-st="idle"] .hp-dot{ background:var(--blue); opacity:.7; }

/* ============================================================
   CONTROLS — emote / rival voice / my mic / sound
   desktop x1520,1608,1696,1784 y974 72x72; phone x636,686,736,786 y334 44x44
   ============================================================ */
#screen-round > .hud-controls{ right:calc(14 * var(--u) + var(--sr)); bottom:calc(12 * var(--u) + var(--sb)); display:flex; gap:calc(6 * var(--u)); --b:max(44px, calc(44 * var(--u))); }
#screen-round .hud-emote-slot, #screen-round .hud-sfx-slot{ position:static; width:var(--b); height:var(--b); flex-shrink:0; }
#screen-round .hud-controls .voice-mute-btn, #screen-round .hud-emote-empty, body.in-battle #emote-bar .emote-toggle, body.in-battle #sfx-toggle{
  position:relative !important; inset:auto !important; width:var(--b) !important; height:var(--b) !important; min-width:0 !important; padding:0 0 calc(var(--b) * .2) !important; margin:0 !important;
  display:flex !important; align-items:center; justify-content:center; flex-shrink:0; box-sizing:border-box; cursor:pointer;
  border-style:solid !important; border-width:calc(var(--b) * .12) calc(var(--b) * .14) !important; border-image:url('../assets/ui/btn-dark-v3.webp') 32 48 fill / calc(var(--b) * .12) calc(var(--b) * .14) !important;
  background:none !important; box-shadow:none !important; border-radius:0 !important; color:var(--ink) !important; font-size:0 !important; opacity:1 !important; transform:none;
  -webkit-tap-highlight-color:transparent; }
#screen-round .hud-controls .voice-mute-btn .ico, body.in-battle #sfx-toggle .ico{ width:calc(var(--b) * .4); height:calc(var(--b) * .4); display:block; }
body.in-battle #emote-bar .emote-toggle img, #screen-round .hud-emote-empty img{ width:calc(var(--b) * .46) !important; height:calc(var(--b) * .46) !important; display:block; margin:0; pointer-events:none; }
/* small label under each icon (distinct text per control; states from voice.js / juice.js / cosmetics.js) */
#screen-round .hud-controls .voice-mute-btn::after, #screen-round .hud-emote-empty::after, body.in-battle #sfx-toggle::after, body.in-battle #emote-bar .emote-toggle::after{
  content:attr(data-lbl); position:absolute; left:-4px; right:-4px; bottom:calc(var(--b) * -.02); text-align:center; font-family:'Oswald',sans-serif; font-weight:700;
  font-size:max(8px, calc(var(--b) * .15)); line-height:1.1; letter-spacing:.3px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:clip; pointer-events:none; }
body.in-battle #emote-bar .emote-toggle::after{ content:'EMOTE'; }
body.in-battle #emote-bar.open .emote-toggle{ border-image-source:url('../assets/ui/btn-yellow-v3.webp') !important; }
body.in-battle #emote-bar.open .emote-toggle::after{ color:#1a1300; }
#screen-round .hud-controls .voice-mute-btn:active:not(:disabled), body.in-battle #sfx-toggle:active, body.in-battle #emote-bar .emote-toggle:active{
  border-image-source:url('../assets/ui/btn-dark-pressed-v3.webp') !important; transform:translateY(2px) !important; }
#screen-round .hud-controls .voice-mute-btn:focus-visible, body.in-battle #sfx-toggle:focus-visible, body.in-battle #emote-bar button:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }
/* explicit OFF state (slash icon + amber label), not just dimmed */
#screen-round .hud-controls .voice-mute-btn.is-off, body.in-battle #sfx-toggle.muted{ color:var(--amber) !important; }
#screen-round .hud-controls .voice-mute-btn.is-off::after, body.in-battle #sfx-toggle.muted::after{ color:var(--amber); }
body.in-battle #sfx-toggle.muted::before{ content:''; position:absolute; left:50%; top:40%; width:calc(var(--b) * .5); height:2.5px; background:var(--amber); border-radius:2px;
  transform:translate(-50%,-50%) rotate(-45deg); box-shadow:0 0 0 1.5px #0a1020; }
/* disabled with a reason label */
#screen-round .hud-controls .voice-mute-btn:disabled, #screen-round .hud-emote-empty:disabled{ cursor:not-allowed; color:#5d6d86 !important; filter:saturate(.3); }
#screen-round .hud-controls .voice-mute-btn:disabled::after, #screen-round .hud-emote-empty:disabled::after{ color:var(--muted); }
#screen-round .hud-emote-empty:disabled img{ opacity:.45; filter:grayscale(1); }
#screen-round .hud-emote-slot.has-emotes .hud-emote-empty{ display:none !important; }
#screen-round .hud-emote-slot:not(.has-emotes) #emote-bar{ display:none !important; }

/* emote bar lives in slot 1; its tray opens ABOVE the control row
   desktop (1390,822,426,132) -> relative to controls (-130,-152); phone (570,230,262,96) -> (-66,-104) */
body.in-battle #emote-bar{ position:static !important; inset:auto !important; display:block; gap:0; z-index:auto; }
body.in-battle #emote-bar .emote-menu{ position:absolute; left:calc(-66 * var(--u)); bottom:calc(var(--b) + 8 * var(--u)); width:calc(262 * var(--u)); height:calc(96 * var(--u));
  box-sizing:border-box; display:none; align-items:center; justify-content:center; flex-wrap:wrap; gap:calc(8 * var(--u)); padding:calc(12 * var(--u));
  border-style:solid; border-width:calc(12 * var(--u)); border-image:url('../assets/ui/panel-frame-v3.webp') 64 fill / calc(12 * var(--u)); z-index:8;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)); overflow:hidden; max-width:calc(100vw - 16px - var(--sr)); }
body.in-battle #emote-bar.open .emote-menu{ display:flex; animation:hud-tray-in .15s ease-out; }
@keyframes hud-tray-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
body.in-battle #emote-bar .emote-menu button{ width:max(44px, calc(52 * var(--u))); height:max(44px, calc(52 * var(--u))); border-radius:calc(10 * var(--u)); padding:0;
  background:#1C2A45; border:1px solid var(--edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; cursor:pointer; }
body.in-battle #emote-bar .emote-menu button img{ width:72%; height:72%; }
body.in-battle #emote-bar .emote-menu button:active{ transform:translateY(2px); background:#26375a; }
/* 2.5s send cooldown, readable on the toggle */
#screen-round .hud-emote-slot.cooling #emote-bar .emote-toggle{ filter:saturate(.35); }
#screen-round .hud-emote-slot.cooling #emote-bar .emote-toggle::after{ content:'WAIT'; color:var(--amber); }
#screen-round .hud-emote-slot.cooling #emote-bar .emote-toggle::before{ content:''; position:absolute; left:10%; right:10%; bottom:calc(var(--b) * .2); height:3px; border-radius:2px;
  background:var(--amber); transform-origin:left center; animation:hud-emote-cd 2.5s linear forwards; }
@keyframes hud-emote-cd{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
#screen-round .hud-emote-slot.cooling #emote-bar .emote-menu button{ opacity:.45; }

/* ============================================================
   DESKTOP (1920x1080 reference) — only boxes that differ from phone
   ============================================================ */
@media (min-width:768px) and (min-height:521px){
  #screen-round > .hud-plate{ top:calc(64 * var(--u)); width:calc(480 * var(--u)); height:calc(100 * var(--u)); padding:0 calc(18 * var(--u)); }
  #screen-round > .hud-p1{ left:calc(80 * var(--u)); } #screen-round > .hud-p2{ right:calc(80 * var(--u)); }
  #screen-round .hud-plate .fighter-nametag{ gap:calc(16 * var(--u)); padding-right:calc(24 * var(--u)) !important; }
  #screen-round .hud-p2 .fighter-nametag{ padding:0 0 0 calc(24 * var(--u)) !important; }
  #screen-round .hud-p1::after{ right:calc(22 * var(--u)); } #screen-round .hud-p2::after{ left:calc(22 * var(--u)); }
  #screen-round .hud-plate .nametag-av{ width:calc(64 * var(--u)) !important; height:calc(64 * var(--u)) !important; border-radius:calc(10 * var(--u)); }
  #screen-round .hud-p1 .nametag-av{ box-shadow:0 0 0 3px var(--blue), 0 0 14px rgba(0,194,255,.55); }
  #screen-round .hud-p2 .nametag-av{ box-shadow:0 0 0 3px var(--red), 0 0 14px rgba(255,45,45,.55); }
  #screen-round .hud-plate .nametag-txt{ font-size:calc(24 * var(--u)) !important; letter-spacing:1px; }
  #screen-round .hud-plate .nametag-title-img{ height:calc(24 * var(--u)) !important; margin-top:calc(3 * var(--u)); }
  #screen-round .hud-plate .nametag-title{ font-size:calc(16 * var(--u)) !important; }

  #screen-round > .hud-score{ top:calc(24 * var(--u)); width:calc(560 * var(--u)); height:calc(144 * var(--u)); }
  #screen-round .hs-side{ top:calc(14 * var(--u)); width:calc(170 * var(--u)); height:calc(96 * var(--u)); }
  #screen-round .hs-you{ left:calc(24 * var(--u)); } #screen-round .hs-rival{ right:calc(24 * var(--u)); }
  #screen-round .hs-lbl{ font-size:calc(22 * var(--u)); letter-spacing:2px; }
  #screen-round .hs-side b{ font-size:calc(40 * var(--u)); margin-top:calc(4 * var(--u)); text-shadow:0 3px 0 #000; }
  #screen-round .hs-timer{ top:calc(10 * var(--u)); width:calc(98 * var(--u)); height:calc(98 * var(--u)); padding:calc(5 * var(--u)); }
  #screen-round .hs-timer::before{ inset:calc(6 * var(--u)); }
  #screen-round .hs-timer span{ font-size:calc(56 * var(--u)); text-shadow:0 3px 0 #000; }
  #screen-round .hs-foot{ bottom:calc(12 * var(--u)); height:calc(20 * var(--u)); gap:calc(16 * var(--u)); }
  #screen-round .hs-round{ font-size:calc(16 * var(--u)); letter-spacing:3px; }
  #screen-round .hs-pips{ gap:calc(8 * var(--u)); }
  #screen-round .hs-pips i{ width:calc(16 * var(--u)); height:calc(16 * var(--u)); border-width:2px; }

  #screen-round > .hud-prompt{ top:calc(230 * var(--u)); width:calc(480 * var(--u)); height:calc(90 * var(--u)); padding:0 calc(24 * var(--u)); gap:calc(18 * var(--u));
    border-width:calc(10 * var(--u)) calc(32 * var(--u)); border-image-width:calc(10 * var(--u)) calc(32 * var(--u)); }
  #screen-round .hud-prompt .instr{ font-size:calc(40 * var(--u)) !important; letter-spacing:2px; text-shadow:0 3px 0 #000 !important; }
  #screen-round .hud-prompt.long .instr{ font-size:calc(22 * var(--u)) !important; }
  #screen-round .hud-prompt .countdown-display{ font-size:calc(60 * var(--u)) !important; text-shadow:0 3px 0 #000 !important; }
  #screen-round .hud-prompt .countdown-display .ico{ width:calc(36 * var(--u)); height:calc(36 * var(--u)); }
  #screen-round .hud-prompt .hp-wait{ font-size:calc(34 * var(--u)); letter-spacing:2px; }

  #screen-round > .hud-panel{ bottom:calc(130 * var(--u)); width:calc(620 * var(--u)); height:calc(210 * var(--u)); --px:calc(24 * var(--u)); --pw:calc(572 * var(--u)); }
  #screen-round > .hud-panel::before{ border-width:calc(14 * var(--u)); border-image-width:calc(14 * var(--u)); }
  #screen-round .hud-panel > .hp-tug{ top:calc(20 * var(--u)); height:calc(32 * var(--u)); }
  #screen-round .hud-panel > .hp-lead{ top:calc(64 * var(--u)); height:calc(26 * var(--u)); }
  #screen-round .hud-panel > .hp-mic{ top:calc(102 * var(--u)); height:calc(32 * var(--u)); }
  #screen-round .hud-panel > .hp-detect{ top:calc(148 * var(--u)); height:calc(38 * var(--u)); }
  #screen-round #tug-section .tug-bar-outer{ border-width:calc(3 * var(--u)) !important; }
  #screen-round #tug-section .hp-bone{ height:calc(46 * var(--u)); }
  #screen-round #tug-section .tug-pcts{ top:calc(44 * var(--u)); height:calc(26 * var(--u)); }
  #screen-round #tug-section .tug-pct{ font-size:calc(22 * var(--u)) !important; }
  #screen-round #live-leader, #screen-round .hp-lead-idle{ font-size:calc(20 * var(--u)) !important; letter-spacing:1px; }
  #screen-round .hp-mic{ gap:calc(14 * var(--u)); }
  #screen-round .hp-mic-lbl, #screen-round .hp-mic-off{ font-size:calc(18 * var(--u)); letter-spacing:1px; }
  #screen-round .hp-mic-track{ height:calc(24 * var(--u)); }
  #screen-round .hp-detect-line{ font-size:calc(16 * var(--u)); gap:calc(10 * var(--u)); padding:0 calc(16 * var(--u)); border-radius:calc(8 * var(--u)); }
  #screen-round .hp-dot{ width:calc(12 * var(--u)); height:calc(12 * var(--u)); }

  #screen-round > .hud-controls{ right:calc(64 * var(--u)); bottom:calc(34 * var(--u)); gap:calc(16 * var(--u)); --b:max(44px, calc(72 * var(--u))); }
  body.in-battle #emote-bar .emote-menu{ left:calc(-130 * var(--u)); bottom:calc(var(--b) + 20 * var(--u)); width:calc(426 * var(--u)); height:calc(132 * var(--u));
    gap:calc(14 * var(--u)); padding:calc(16 * var(--u)); border-width:calc(14 * var(--u)); border-image-width:calc(14 * var(--u)); }
  body.in-battle #emote-bar .emote-menu button{ width:calc(76 * var(--u)); height:calc(76 * var(--u)); min-width:44px; min-height:44px; }
}

/* ============================================================
   PASS 2 — prompt head/sub, honest Bark Power, spec lead labels
   ============================================================ */
/* prompt: .hp-stack holds #instruction-text; in the wait state a short display head
   (GET READY / SUDDEN DEATH) sits over the game's own message as one small line */
#screen-round .hud-prompt .hp-stack{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; max-width:100%; line-height:1; }
#screen-round .hud-prompt .hp-head, #screen-round .hud-prompt .hp-sub{ display:none; }
#screen-round .hud-prompt[data-state="wait"] .hp-stack{ flex:1; align-items:flex-start; }
#screen-round .hud-prompt[data-state="wait"] #instruction-text{ display:none !important; }
#screen-round .hud-prompt[data-state="wait"] .hp-head{ display:block; font-family:'Bangers','Oswald',sans-serif; font-size:calc(20 * var(--u)); letter-spacing:1.5px;
  color:var(--ink); text-shadow:0 2px 0 #000; white-space:nowrap; line-height:1; }
#screen-round .hud-prompt[data-state="wait"].sd .hp-head{ color:var(--amber); }
#screen-round .hud-prompt[data-state="wait"] .hp-sub{ display:block; max-width:100%; margin-top:calc(2 * var(--u)); font-family:'Oswald',sans-serif; font-weight:700;
  font-size:max(9px, calc(9 * var(--u))); letter-spacing:.4px; line-height:1.15; color:var(--ink2); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-round .hud-prompt[data-state="wait"] .countdown-display{ flex-shrink:0; }

/* Bark Power: raw mic level only while a bark round is live; empty (not a stale / full bar) otherwise */
#screen-round .hp-mic-track .vol-fill{ width:0; }
#screen-round .hud-panel.is-idle .hp-mic-track .vol-fill{ width:0 !important; box-shadow:none !important; }

/* lead line: spec wording YOU LEAD / RIVAL LEADS / EVEN (battle.js text stays in the DOM for screen readers) */
#screen-round #live-leader{ font-size:0 !important; gap:0; }
#screen-round #live-leader .ico{ display:none !important; }
#screen-round #live-leader::after{ content:'EVEN'; font-size:calc(14 * var(--u)); letter-spacing:1px; }
#screen-round #live-leader.winning::after{ content:'YOU LEAD'; }
#screen-round #live-leader.losing::after{ content:'RIVAL LEADS'; }

@media (min-width:768px) and (min-height:521px){
  #screen-round .hud-prompt[data-state="wait"] .hp-head{ font-size:calc(38 * var(--u)); letter-spacing:2px; text-shadow:0 3px 0 #000; }
  #screen-round .hud-prompt[data-state="wait"] .hp-sub{ font-size:calc(16 * var(--u)); margin-top:calc(4 * var(--u)); }
  #screen-round #live-leader::after{ font-size:calc(20 * var(--u)); letter-spacing:1.5px; }
}