/* ============================================================
   V3-RESULT.CSS — Codex Round Result layout (design-review/mockups/round-result-*-v1.webp,
   spec HANDOFF.md "Round Result mockups and states"). Written boxes (x,y,w,h) in reference px,
   scaled by --u: desktop ref 1920x1080, phone landscape ref 844x390. Same ids, same JS
   (js/battle.js showRoundResult / proceedAfterResult); this file only re-homes and restyles.
   ============================================================ */
#screen-result{
  --u: min(calc(100vw / 844), calc(100vh / 390));
  --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; --panel:#121C32;
  position:relative; overflow:hidden !important; padding:0 !important; gap:0 !important;
  height:100vh; height:100dvh; min-height:0 !important; max-height:none !important;
  background:linear-gradient(180deg, rgba(8,13,26,.58) 0%, rgba(8,13,26,.74) 100%), url('../assets/backgrounds/arena-v2-mobile.webp') center / cover no-repeat !important;
}
@media (min-width:768px) and (min-height:521px){
  #screen-result{ --u: min(calc(100vw / 1920), calc(100vh / 1080));
    background:linear-gradient(180deg, rgba(8,13,26,.58) 0%, rgba(8,13,26,.74) 100%), url('../assets/backgrounds/arena-v2-desktop.webp') center / cover no-repeat !important; }
}
#screen-result > *{ position:absolute !important; margin:0 !important; z-index:2; box-sizing:border-box; }
#screen-result > .arena-bg-layer{ display:none !important; }   /* old promo backdrop layer: inert */
#screen-result .confetti-piece, #screen-result .confetti{ z-index:1; }

/* ---------- round ribbon (272,8,300,36) / (600,24,720,80) ---------- */
#screen-result #result-round-tag{
  left:calc(272 * var(--u)); top:calc(8 * var(--u) + var(--st)); width:calc(300 * var(--u)); height:calc(36 * var(--u));
  display:flex; align-items:center; justify-content:center; padding:0 calc(12 * var(--u)) !important;
  background:none !important; border-radius:0 !important; color:var(--ink) !important;
  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));
  font-family:'Bangers','Oswald',sans-serif !important; font-size:calc(18 * var(--u)) !important; letter-spacing:1.5px; line-height:1; text-shadow:0 2px 0 #000; white-space:nowrap; overflow:hidden;
}

/* ---------- scores (276,52,292,52) / (600,212,720,84) ---------- */
#screen-result .vs-row{
  left:calc(276 * var(--u)); top:calc(52 * var(--u) + var(--st)); width:calc(292 * var(--u)); height:calc(52 * var(--u));
  display:flex; align-items:stretch; justify-content:center; gap:calc(8 * var(--u)); padding:0 !important;
}
#screen-result .vs-col{
  flex:1 1 0; min-width:0; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:calc(6 * var(--u));
  background:rgba(8,13,26,.78); border:calc(1.5 * var(--u)) solid var(--edge); border-radius:calc(10 * var(--u));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.45);
}
#screen-result .vs-col:first-child{ box-shadow:inset calc(4 * var(--u)) 0 0 var(--blue), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.45); }
#screen-result .vs-col:last-child{  box-shadow:inset calc(-4 * var(--u)) 0 0 var(--red), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.45); }
#screen-result .vs-col .t-label{ font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(11 * var(--u)); letter-spacing:1.5px; color:var(--ink2); margin:0; line-height:1; }
#screen-result .vs-col:first-child .t-label{ color:var(--blue); }
#screen-result .vs-col:last-child  .t-label{ color:#ff6b6b; }
#screen-result .score-big{ font-family:'Bangers','Oswald',sans-serif !important; font-size:calc(28 * var(--u)) !important; color:var(--yellow) !important; text-shadow:0 2px 0 #000 !important; line-height:1 !important; white-space:nowrap; display:inline-flex; align-items:baseline; gap:.15em; }
#screen-result .score-big small{ font-family:'Oswald',sans-serif; font-weight:700; font-size:.42em; letter-spacing:1px; color:var(--ink2); text-shadow:none; }
#screen-result .vs-div{ align-self:center; font-family:'Bangers',sans-serif !important; font-size:calc(20 * var(--u)) !important; color:var(--ink) !important; text-shadow:0 2px 0 #000 !important; padding:0 calc(2 * var(--u)); }

/* ---------- sprites: P1 (12,96,244,244) / (48,284,640,640), P2 (588,96,244,244) / (1232,284,640,640) ---------- */
#screen-result .result-arena{ inset:0 !important; width:auto !important; max-width:none !important; min-height:0 !important; height:auto !important; padding:0 !important; gap:0 !important; display:block !important; z-index:1; pointer-events:none; }
#screen-result .result-arena .fighter-slot{ position:absolute !important; width:calc(244 * var(--u)); height:calc(244 * var(--u)); top:calc(96 * var(--u) + var(--st)); display:block; flex:none; }
#screen-result .result-arena .fighter-slot.p1{ left:calc(12 * var(--u) + var(--sl)); }
#screen-result .result-arena .fighter-slot.p2{ right:calc(12 * var(--u) + var(--sr)); }
#screen-result .result-arena .dog-sprite-wrap{ position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:flex-end; justify-content:center; }
#screen-result .result-arena .dog-sprite-img{ width:100% !important; height:100% !important; object-fit:contain; object-position:center bottom; animation:none !important; }
#screen-result .result-arena .fighter-slot.p2 .dog-sprite-img{ transform:scaleX(-1); }  /* rival faces the centre */
#screen-result .result-arena .dog-ground-shadow{ position:absolute; left:50%; bottom:calc(-4 * var(--u)); width:62%; height:calc(14 * var(--u)); transform:translateX(-50%); margin:0; }

/* ---------- name plates: P1 (12,52,248,32) / (120,136,520,64), P2 (584,52,248,32) / (1280,136,520,64) (anchored to the sprite boxes) ---------- */
#screen-result .fighter-nametag{
  position:absolute; top:calc(-44 * var(--u)); width:calc(248 * var(--u)); height:calc(32 * var(--u)); max-width:none !important;
  display:flex !important; align-items:center; gap:calc(8 * var(--u)); padding:0 calc(10 * var(--u)) !important; margin:0 !important;
  background:rgba(8,13,26,.82) !important; border:calc(1.5 * var(--u)) solid var(--edge) !important; border-radius:calc(8 * var(--u)) !important;
  font-family:'Oswald',sans-serif !important; font-weight:700; font-size:calc(14 * var(--u)) !important; letter-spacing:.5px; color:var(--ink) !important; text-shadow:0 1px 0 #000;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
#screen-result .fighter-slot.p1 .fighter-nametag{ left:0; box-shadow:inset calc(4 * var(--u)) 0 0 var(--blue); }
#screen-result .fighter-slot.p2 .fighter-nametag{ left:calc(-4 * var(--u)); flex-direction:row-reverse; box-shadow:inset calc(-4 * var(--u)) 0 0 var(--red); }
#screen-result .fighter-nametag .nametag-av, #screen-result .fighter-nametag .nametag-av-wrap{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); flex:0 0 auto; border-radius:50%; overflow:hidden; }
#screen-result .fighter-nametag .nametag-av img{ width:100%; height:100%; object-fit:cover; display:block; }
#screen-result .fighter-nametag .nametag-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; display:inline-flex; align-items:center; gap:calc(6 * var(--u)); }
#screen-result .fighter-nametag .nametag-title{ font-size:.7em; color:var(--yellow); }
#screen-result .fighter-nametag .nametag-title-img{ height:calc(16 * var(--u)); }

/* ---------- outcome (272,126,300,76) / (688,350,544,140) ---------- */
#screen-result #result-verdict{
  left:calc(272 * var(--u)); top:calc(126 * var(--u) + var(--st)); width:calc(300 * var(--u)); height:calc(76 * var(--u));
  display:flex; align-items:center; justify-content:center; text-align:center; padding:0 calc(14 * var(--u)) !important;
  background:rgba(8,13,26,.82); border:calc(2 * var(--u)) solid var(--edge); border-radius:calc(12 * var(--u));
  box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.5);
  font-family:'Bangers','Oswald',sans-serif !important; font-size:calc(28 * var(--u)) !important; line-height:1.05 !important; letter-spacing:1.5px;
  color:var(--ink) !important; text-shadow:0 2px 0 #000 !important; animation:none !important;
}
#screen-result #result-verdict .ico{ width:.8em; height:.8em; margin-left:.25em; }
#screen-result #result-verdict.win{  color:var(--green) !important; border-color:rgba(0,255,135,.55); box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.5), 0 0 calc(24 * var(--u)) rgba(0,255,135,.25); }
#screen-result #result-verdict.lose{ color:#ff6b6b !important; border-color:rgba(255,45,45,.55); box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.5), 0 0 calc(24 * var(--u)) rgba(255,45,45,.22); }
#screen-result #result-verdict.tie{  color:var(--amber) !important; border-color:rgba(255,179,0,.55); }

/* ---------- meme line (272,212,300,24) / (688,510,544,40) ---------- */
#screen-result #result-meme{
  left:calc(272 * var(--u)); top:calc(212 * var(--u) + var(--st)); width:calc(300 * var(--u)); height:calc(24 * var(--u)); max-width:none !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center;
  font-family:'Oswald',sans-serif !important; font-weight:500 !important; font-size:calc(13 * var(--u)) !important; line-height:1.2 !important; color:var(--ink2) !important; text-shadow:0 1px 0 #000;
}

/* ---------- match pips (332,250,180,30) / (784,586,352,64): three round slots coloured by the real winner ---------- */
#screen-result #result-dots{
  left:calc(332 * var(--u)); top:calc(250 * var(--u) + var(--st)); width:calc(180 * var(--u)); height:calc(30 * var(--u));
  display:flex; align-items:flex-end; justify-content:center; gap:calc(12 * var(--u)); padding:0 !important;
}
#screen-result #result-dots::before{ content:'BEST OF 3'; position:absolute; left:0; right:0; top:0; text-align:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(8 * var(--u)); letter-spacing:2px; color:var(--muted); line-height:1; }
#screen-result #result-dots:has(.dot[data-round="4"])::before{ content:'SUDDEN DEATH'; color:var(--amber); }
#screen-result #result-dots .dot{ width:calc(14 * var(--u)); height:calc(14 * var(--u)); border-width:calc(2 * var(--u)); }

/* ---------- primary action (292,310,260,52) / (728,790,464,80): yellow NEXT ROUND, green SEE FINAL, amber SUDDEN DEATH ---------- */
#screen-result #result-next-btn{
  left:calc(292 * var(--u)); top:calc(310 * var(--u) + var(--st)); width:calc(260 * var(--u)); height:calc(52 * var(--u)); min-height:0;
  display:inline-flex; align-items:center; justify-content:center; gap:.3em; padding:0 calc(16 * var(--u)) !important;
  border-style:solid !important; border-width:calc(8 * var(--u)) calc(14 * var(--u)) !important; border-image:url('../assets/ui/btn-yellow-v3.webp') 32 48 fill / calc(8 * var(--u)) calc(14 * var(--u)) !important;
  background:none !important; box-shadow:none !important; border-radius:0 !important; transform:none !important;
  font-family:'Bangers','Oswald',sans-serif !important; font-size:calc(20 * var(--u)) !important; letter-spacing:1.5px; color:#0b0f1a !important; text-shadow:none !important; white-space:nowrap; overflow:hidden;
}
#screen-result #result-next-btn:active{ border-image-source:url('../assets/ui/btn-yellow-pressed-v3.webp') !important; transform:translateY(calc(2 * var(--u))) !important; }
#screen-result #result-next-btn.is-final{ border-image-source:url('../assets/ui/btn-green-v3.webp') !important; }
#screen-result #result-next-btn.is-final:active{ border-image-source:url('../assets/ui/btn-green-pressed-v3.webp') !important; }
#screen-result #result-next-btn.is-sd{ filter:sepia(.9) saturate(2.4) hue-rotate(-12deg); }   /* amber: yellow kit button, warmed */
#screen-result #result-next-btn:disabled{ opacity:.55; filter:grayscale(.4); cursor:default; }
#screen-result #result-next-btn .ico{ width:.9em; height:.9em; }

/* ---------- desktop boxes ---------- */
@media (min-width:768px) and (min-height:521px){
  #screen-result #result-round-tag{ left:calc(600 * var(--u)); top:calc(24 * var(--u)); width:calc(720 * var(--u)); height:calc(80 * var(--u));
    border-width:calc(12 * var(--u)) calc(36 * var(--u)); border-image-width:calc(12 * var(--u)) calc(36 * var(--u)); font-size:calc(40 * var(--u)) !important; letter-spacing:3px; }
  #screen-result .vs-row{ left:calc(600 * var(--u)); top:calc(212 * var(--u)); width:calc(720 * var(--u)); height:calc(84 * var(--u)); gap:calc(16 * var(--u)); }
  #screen-result .vs-col{ gap:calc(12 * var(--u)); border-radius:calc(14 * var(--u)); }
  #screen-result .vs-col .t-label{ font-size:calc(22 * var(--u)); letter-spacing:2px; }
  #screen-result .score-big{ font-size:calc(48 * var(--u)) !important; text-shadow:0 3px 0 #000 !important; }
  #screen-result .vs-div{ font-size:calc(36 * var(--u)) !important; padding:0 calc(6 * var(--u)); }
  #screen-result .result-arena .fighter-slot{ width:calc(640 * var(--u)); height:calc(640 * var(--u)); top:calc(284 * var(--u)); }
  #screen-result .result-arena .fighter-slot.p1{ left:calc(48 * var(--u)); }
  #screen-result .result-arena .fighter-slot.p2{ right:calc(48 * var(--u)); }
  #screen-result .result-arena .dog-ground-shadow{ height:calc(30 * var(--u)); bottom:calc(-8 * var(--u)); }
  #screen-result .fighter-nametag{ top:calc(-148 * var(--u)); width:calc(520 * var(--u)); height:calc(64 * var(--u)); gap:calc(14 * var(--u)); padding:0 calc(20 * var(--u)) !important;
    border-radius:calc(12 * var(--u)) !important; font-size:calc(24 * var(--u)) !important; letter-spacing:1px; }
  #screen-result .fighter-slot.p1 .fighter-nametag{ left:calc(72 * var(--u)); }
  #screen-result .fighter-slot.p2 .fighter-nametag{ left:calc(48 * var(--u)); }
  #screen-result .fighter-nametag .nametag-av, #screen-result .fighter-nametag .nametag-av-wrap{ width:calc(44 * var(--u)); height:calc(44 * var(--u)); }
  #screen-result .fighter-nametag .nametag-title-img{ height:calc(26 * var(--u)); }
  #screen-result #result-verdict{ left:calc(688 * var(--u)); top:calc(350 * var(--u)); width:calc(544 * var(--u)); height:calc(140 * var(--u)); font-size:calc(48 * var(--u)) !important; letter-spacing:2.5px; border-radius:calc(16 * var(--u)); text-shadow:0 3px 0 #000 !important; }
  #screen-result #result-meme{ left:calc(688 * var(--u)); top:calc(510 * var(--u)); width:calc(544 * var(--u)); height:calc(40 * var(--u)); font-size:calc(20 * var(--u)) !important; }
  #screen-result #result-dots{ left:calc(784 * var(--u)); top:calc(586 * var(--u)); width:calc(352 * var(--u)); height:calc(64 * var(--u)); gap:calc(24 * var(--u)); }
  #screen-result #result-dots::before{ font-size:calc(16 * var(--u)); letter-spacing:4px; }
  #screen-result #result-dots .dot{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); border-width:calc(3 * var(--u)); }
  #screen-result #result-next-btn{ left:calc(728 * var(--u)); top:calc(790 * var(--u)); width:calc(464 * var(--u)); height:calc(80 * var(--u));
    border-width:calc(12 * var(--u)) calc(22 * var(--u)) !important; border-image-width:calc(12 * var(--u)) calc(22 * var(--u)) !important; font-size:calc(32 * var(--u)) !important; letter-spacing:2.5px; }
}

/* reduced motion: no confetti drift, no pops */
@media (prefers-reduced-motion:reduce){
  #screen-result *{ animation:none !important; transition:none !important; }
}

/* the floating battle emote button and its tray have no place on the result screen */
body:has(#screen-result[style*="flex"]) #emote-bar{ display:none !important; }

/* pips = per-round history in player colours (Codex FIX): YOU blue, RIVAL red, current round neutral */
#screen-result #result-dots .dot.win{ background:var(--blue) !important; border-color:var(--blue) !important; box-shadow:0 0 calc(8 * var(--u)) rgba(0,194,255,.5) !important; }
#screen-result #result-dots .dot.lose{ background:var(--red) !important; border-color:var(--red) !important; box-shadow:0 0 calc(8 * var(--u)) rgba(255,45,45,.5) !important; }
#screen-result #result-dots .dot.active{ background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.55) !important; box-shadow:none !important; }
#screen-result #result-dots .pips-legend{ position:absolute; left:0; right:0; bottom:calc(-11 * var(--u)); display:flex; justify-content:center; gap:calc(10 * var(--u)); font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(7 * var(--u)); letter-spacing:1.5px; color:var(--muted); line-height:1; }
#screen-result #result-dots .pips-legend i{ display:inline-block; width:.9em; height:.9em; border-radius:50%; margin-right:.35em; vertical-align:-.05em; }
#screen-result #result-dots .pips-legend i.you{ background:var(--blue); } #screen-result #result-dots .pips-legend i.rival{ background:var(--red); }
@media (min-width:768px) and (min-height:521px){ #screen-result #result-dots .pips-legend{ font-size:calc(13 * var(--u)); bottom:calc(-20 * var(--u)); letter-spacing:3px; gap:calc(20 * var(--u)); } }
#screen-result #result-dots .dot.active.res-win{ background:var(--blue) !important; border-color:var(--blue) !important; box-shadow:0 0 calc(8 * var(--u)) rgba(0,194,255,.5) !important; }
#screen-result #result-dots .dot.active.res-lose{ background:var(--red) !important; border-color:var(--red) !important; box-shadow:0 0 calc(8 * var(--u)) rgba(255,45,45,.5) !important; }