/* The in-fight overlay: the two corner panels, the round box, the centre
   callout and the control notes. */

/* ---------- in-match hud ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-size:12px;transition:opacity .35s ease}
/* The replay owns the screen: see updateHud. Faded rather than removed so the
   bars come back where they were when the playback ends, instead of the whole
   HUD popping in on the frame the fight resumes. */
#hud.cinema{opacity:0}
.hint{
  position:fixed;bottom:14px;max-width:470px;line-height:1.9;color:#c6bba9;font-size:12px;
  background:rgba(16,14,12,.72);border:1px solid #2c261f;border-radius:3px;padding:9px 13px;
  transition:opacity .5s ease;
}
.hint kbd{
  font-family:var(--ui);font-size:11px;background:#221d18;border:1px solid #3d352c;border-bottom-width:2px;
  border-radius:3px;padding:1px 6px;margin:0 1px;color:var(--bone);
}
/* One key-and-label unit — "L O uppercuts", not "L O" and "uppercuts" apart —
   kept from breaking across two lines on its own. The middot between groups
   sits outside every span, so that is still exactly where a narrow line wraps;
   see src/ui/hud.js. */
.hint .hg{display:inline-block;white-space:nowrap}
.hint.p1{left:12px;border-left:3px solid var(--red)}
.hint.p2{right:12px;border-left:3px solid var(--blue);text-align:right}
.hint b{color:var(--bone);font-weight:600}
.hint.faded{opacity:.18}

/* ---------- pause menu ---------- */
/* Under #callout's own "Paused", which stays exactly where it was — this is
   only the two ways out of it. `.off` is `display:none`, the same switch
   every other screen in the game uses, so a closed pause panel is out of the
   layout and the accessibility tree rather than merely invisible; see
   src/ui/pause.js for what flips it. */
#pauseMenu{
  position:fixed;left:0;right:0;top:60%;z-index:21;
  display:flex;justify-content:center;pointer-events:none;
}
#pauseMenu.off{display:none}
.pause-btns{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;pointer-events:auto;
}
.pause-btns .big-btn{width:auto;min-width:150px;padding:12px 28px}
.pause-btns .bb-title{font-size:clamp(15px,2.2vh,20px)}

/* Sat under the big centre word, not on top of it. A knockdown puts DOWN! up
   and starts the count in the same instant, and at 16% the two were stacked in
   the same band of screen — the word landed over the number and the number came
   back out from behind it. The announcement owns 22–40%; this owns everything
   below 48%, and neither can reach the other at any window size. */
#centre{
  position:fixed;top:48%;left:0;right:0;text-align:center;font-family:var(--display);
  text-transform:uppercase;line-height:.95;
}
/* Sized off the shorter of the two axes. On vw alone a 1280x620 laptop got the
   full 190px count on a 620px screen, and the band below 48% grew until it met
   the announcement coming the other way. The vh term only ever bites on a short
   window — on anything 1000px tall the vw clamp still wins. */
#count{font-size:clamp(60px,min(17vw,26vh),190px);color:var(--amber);text-shadow:0 4px 0 rgba(0,0,0,.65)}
#callout{font-size:clamp(20px,3.6vw,40px);letter-spacing:.04em;color:var(--bone);text-shadow:0 3px 0 rgba(0,0,0,.7)}

/* ---------- the round box ---------- */
#roundBox{
  position:fixed;top:8px;left:50%;transform:translateX(-50%);
  min-width:96px;padding:4px 12px 6px;text-align:center;
  background:linear-gradient(180deg,rgba(16,14,12,.92),rgba(16,14,12,.7));
  border:1px solid #3a3129;border-top:2px solid var(--amber);
  clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);
  opacity:0;transition:opacity .35s ease;
}
#roundBox.live{opacity:1}
#roundNo{
  font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a2957f;
}
#clock{
  font-family:var(--display);font-size:34px;line-height:1;letter-spacing:.04em;color:var(--bone);
  text-shadow:0 2px 0 rgba(0,0,0,.8);font-variant-numeric:tabular-nums;
}
#roundPips{display:flex;justify-content:center;gap:5px;margin-top:3px;height:8px}
#roundPips i{width:8px;height:8px;transform:rotate(45deg);background:#2a241e;border:1px solid #4a4137}
#roundPips i.red{background:var(--red);border-color:#e2685c}
#roundPips i.blue{background:var(--blue);border-color:#79aede}
#roundPips i.even{background:#6d6355}

/* ---------- the corner panels ---------- */
/* Mirrored: red reads left to right from the edge in, blue right to left. The
   bars are anchored at the outside edge and shrink toward it, so the damage
   disappears from the end nearest the round box — the side both players'
   eyes are already on. */
.side{
  position:fixed;top:8px;width:clamp(170px,33vw,440px);
  opacity:0;transition:opacity .35s ease;
}
.side.live{opacity:1}
.side.p1{left:12px}
.side.p2{right:12px}
.side-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;text-shadow:0 2px 0 rgba(0,0,0,.8);
}
.side.p2 .side-head{flex-direction:row-reverse}
.side-name{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side.p1 .side-name{color:#e2685c}
.side.p2 .side-name{color:#79aede}

.kd{display:flex;gap:4px}
.kd i{width:9px;height:9px;border-radius:50%;background:#221d18;border:1px solid #4a4137}
.kd i.on{background:var(--amber);border-color:#ffd98a;box-shadow:0 0 6px rgba(242,179,61,.6)}
.kd.hot i.on{background:#E8503F;border-color:#ff9c8f;box-shadow:0 0 6px rgba(232,80,63,.7)}

.meter{display:flex;align-items:center;gap:7px;margin-top:3px;
  opacity:1;transition:opacity .45s ease}
/* A meter nothing has happened to lately steps back rather than leaving: see
   WAKE in src/ui/hud.js. Not display:none — the stack must not reflow every
   time a bar wakes, or the whole panel jumps on every punch. */
.meter.asleep{opacity:.16}
/* Poise sits between the damage bars and the wind, because that is what it is:
   how close the last exchange came to putting him down. Cold, so it reads as a
   different question from the warm damage bars above it. */
.meter.poise .meter-track{height:8px}
.meter.poise .fill{background:linear-gradient(180deg,#8fd8ff,#3f8fc4)}
.side.p2 .meter{flex-direction:row-reverse}
.meter b{
  width:34px;flex:none;font-family:var(--display);font-weight:normal;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8d8171;text-shadow:0 2px 0 rgba(0,0,0,.8);
}
.side.p2 .meter b{text-align:right}
.meter-track{
  position:relative;flex:1;height:8px;background:#15110e;border:1px solid #4a4137;overflow:hidden;
  transform:skewX(-20deg);box-shadow:0 2px 0 rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.5);
}
.side.p2 .meter-track{transform:skewX(20deg)}
.meter-track i{position:absolute;inset:0;transform-origin:left center}
.side.p2 .meter-track i{transform-origin:right center}
/* The lag layer: the chunk just taken, lit for a beat before it drains. */
.meter-track .lag{background:#f4efe4}
.meter.head .meter-track{height:15px}
.meter.head .fill{background:linear-gradient(180deg,#ffd46a,#e39a1c)}
.meter.body .fill{background:linear-gradient(180deg,#f08a4b,#c4531d)}
.meter.legs .fill{background:linear-gradient(180deg,#d7b37a,#9f7a3d)}
.meter.wind .meter-track{height:6px}
.meter.wind .fill{background:linear-gradient(180deg,#8fdc62,#4f9a2e)}
.meter.wind .lag{background:#2f3a25}

/* One more to the head and he is gone. */
.meter.head.danger .fill{background:linear-gradient(180deg,#ff7a63,#c7281c);animation:stamFlash .5s steps(2,end) infinite}
.meter.head.danger b{color:#e2685c}

.meter.wind.gassed .meter-track{border-color:#B4271F}
.meter.wind.gassed .fill{background:#B4271F!important;animation:stamFlash .34s steps(2,end) infinite}
.meter.wind.gassed b{color:#e2685c;animation:stamFlash .34s steps(2,end) infinite}
@keyframes stamFlash{0%{opacity:1}50%{opacity:.28}100%{opacity:1}}

/* ---------- the feed ---------- */
/* What that corner just did, newest on top, three at most. Each line pops in
   and fades on its own clock, so a flurry reads as a flurry. */
.feed{display:flex;flex-direction:column;gap:2px;margin-top:6px;min-height:0}
.side.p2 .feed{align-items:flex-end}
.feed .f{
  align-self:flex-start;padding:1px 9px 2px;
  font-family:var(--display);font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone);background:rgba(16,14,12,.7);border-left:3px solid #6d6355;
  text-shadow:0 2px 0 rgba(0,0,0,.8);
  animation:feedIn 1.7s cubic-bezier(.2,.9,.3,1.2) forwards;
}
.side.p2 .feed .f{align-self:flex-end;border-left:none;border-right:3px solid #6d6355}
.feed .f.big{color:var(--amber);font-size:19px;border-color:var(--amber)}
.feed .f.counter{color:#ff8a73;font-size:18px;border-color:#E8503F}
.feed .f.evade{color:#7fe0ff;border-color:#2e8fb0}
.feed .f.block{color:#a2957f;font-size:13px}
@keyframes feedIn{
  0%{opacity:0;transform:translateX(-14px) scale(1.25)}
  10%{opacity:1;transform:none}
  75%{opacity:1}
  100%{opacity:0;transform:translateY(-4px)}
}
.side.p2 .feed .f{animation-name:feedInR}
@keyframes feedInR{
  0%{opacity:0;transform:translateX(14px) scale(1.25)}
  10%{opacity:1;transform:none}
  75%{opacity:1}
  100%{opacity:0;transform:translateY(-4px)}
}

/* ---------- the combination counter ---------- */
/* Fighting-game style: a big number and HITS, on the side of the man throwing
   them, popping on every new one. */
.combo{
  display:flex;align-items:baseline;gap:6px;margin-top:6px;opacity:0;transform:translateY(-4px);
  font-family:var(--display);text-transform:uppercase;text-shadow:0 3px 0 rgba(0,0,0,.8);
  transition:opacity .25s ease, transform .25s ease;
}
.side.p2 .combo{justify-content:flex-end}
.combo.on{opacity:1;transform:none}
.combo b{font-weight:normal;font-size:44px;line-height:.9;color:var(--amber)}
.combo span{font-size:18px;letter-spacing:.12em;color:var(--bone)}
.combo.pop b{animation:comboPop .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes comboPop{0%{transform:scale(1.7);color:#fff}100%{transform:none}}

@media (max-width:720px){
  .side{width:38vw}
  .side-name{font-size:13px}
  .meter b{width:26px;font-size:9px;letter-spacing:.08em}
  #clock{font-size:26px}
  .feed .f{font-size:12px}
  .feed .f.big,.feed .f.counter{font-size:14px}
}

/* ---------- rocked ---------- */
/* A man whose legs have gone (fighter/rocked.js). The centre word goes up once
   through #announce; the panel carries it for as long as it lasts — the name
   flashes, the head bar glows, and a tag beside the name drains with the time
   he has left. The tag is built by src/ui/rocked.js and sits between the name
   and the knockdown pips, pushing the pips to the far end as they always were. */
#announce span.rocked{
  color:var(--amber);font-size:clamp(34px,min(9vw,16vh),120px);
  text-shadow:
    0 0 0 #000, 4px 4px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
    0 0 40px rgba(232,80,63,.75);
}
.rk-tag{
  display:none;position:relative;flex:none;align-items:center;margin-right:auto;
  padding:1px 7px 2px;font-size:12px;letter-spacing:.16em;color:#1a1410;
  background:var(--amber);transform:skewX(-14deg);box-shadow:0 2px 0 rgba(0,0,0,.6);
  overflow:hidden;
}
.side.p2 .rk-tag{margin-right:0;margin-left:auto;transform:skewX(14deg)}
.rk-tag b{font-weight:normal;text-shadow:none}
/* What is left of it, draining toward the outside edge like the bars do. */
.rk-tag i{position:absolute;left:0;right:0;bottom:0;height:2px;background:#B4271F;transform-origin:left center}
.side.p2 .rk-tag i{transform-origin:right center}
.side.rocked .rk-tag{display:inline-flex;animation:rkIn .32s cubic-bezier(.2,.9,.3,1.3)}
.side.rocked .side-name{animation:rkName .5s steps(2,end) infinite}
.side.rocked .meter.head .meter-track{
  border-color:var(--amber);
  box-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 10px rgba(242,179,61,.6), inset 0 0 0 1px rgba(0,0,0,.5);
}
@keyframes rkIn{0%{opacity:0;transform:skewX(-14deg) scale(1.8)}100%{opacity:1}}
@keyframes rkName{0%{color:var(--amber)}50%{color:var(--bone)}100%{color:var(--amber)}}
@media (prefers-reduced-motion:reduce){
  /* Steady rather than flashing: the tag and the colour still say it. */
  .side.rocked .side-name{animation:none;color:var(--amber)}
  .side.rocked .rk-tag{animation:none}
}