/* ==========================================================================
   HUD: unit bars, floating numbers, top bar, boss bar, favor, boons, banner      owner: P0-3
   KayKit look (art bible 14): paper stickers with 4 px ink outlines and hard drops, Lilita numbers,
   bars 3 px ink-outlined with rounded ends and a white ghost chip for recent damage.
   No scrims over the arena: every HUD piece is its own opaque little panel.
   ========================================================================== */
/* ---------- unit bars over the fighters ---------- */
.ub{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;will-change:transform}
.ub-track{
  position:relative;width:48px;height:10px;overflow:hidden;border-radius:999px;
  border:var(--line-xs) solid var(--ink);background:#4b3045;box-shadow:0 2px 0 var(--ink);
}
.ub-track>i,.ub-track>b{position:absolute;inset:0;transform-origin:left center}
.ub-track>b{background:var(--paper)}
.ub-track>i{background:linear-gradient(180deg,#ffa294 0%,#e2414a 48%,#a3182a 100%)}
.ub.me .ub-track{width:62px;height:12px}
.ub.me .ub-track>i{background:linear-gradient(180deg,#a8caff 0%,#4f8bf0 48%,#2556c4 100%)}
.ub.boss .ub-track,.ub.nem .ub-track{width:90px;height:13px;border-width:3px}
.ub-tag{
  font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap;
  padding:3px 7px 3px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:0 2px 0 var(--ink);
}
.ub.vet .ub-tag{background:var(--g-gold)}
.ub.nem .ub-tag{background:var(--g-red);color:#fff}
.ub.boss .ub-tag{background:var(--g-imperial);color:#fff;font-size:var(--t-label)}

/* ---------- floating numbers: Lilita, white with a thick ink stroke; crits gold with a star ---------- */
.pop{
  position:absolute;left:0;top:0;white-space:nowrap;will-change:transform,opacity;
  font:400 28px/1 var(--f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;
  color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);
}
.pop.crit{font-size:42px;color:#ffd84a;-webkit-text-stroke:8px var(--ink);text-shadow:0 4px 0 var(--ink)}
.pop.crit::before{
  content:"";display:inline-block;width:.78em;height:.78em;margin-right:.06em;vertical-align:-.04em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon points='24,4 29.3,17.7 44,18.5 32.6,27.8 36.3,42 24,34 11.7,42 15.4,27.8 4,18.5 18.7,17.7' fill='%23fff3a6' stroke='%232a1a2e' stroke-width='4.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pop.hurt{color:#ff8478}
.pop.heal{color:var(--laurel-hi)}
.pop.burn{color:#ffad55;font-size:22px;-webkit-text-stroke:5px var(--ink)}
.pop.bleed{color:#ff6f6f;font-size:22px;-webkit-text-stroke:5px var(--ink)}
.pop.info{font:var(--w-strong) 14px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;-webkit-text-stroke:4.5px var(--ink);text-shadow:0 2px 0 var(--ink)}

/* ---------- the top HUD: life plate, round badge, controls and glory ---------- */
.hud{
  position:fixed;top:0;left:0;right:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;gap:12px;pointer-events:none;
  padding-top:calc(env(safe-area-inset-top,0px) + 14px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
}
.hud-life{
  justify-self:start;display:flex;align-items:center;gap:10px;width:min(340px,100%);
  padding:8px 14px 10px 8px;
  background:var(--g-paper);border:var(--line) solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--lip),var(--drop);
}
.medal{
  flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  border:var(--line) solid var(--ink);background:var(--g-blue);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(10,30,90,.25),0 3px 0 var(--ink);
}
.medal .ic{width:40px;height:40px}
.life-main{flex:1;min-width:0;display:grid;gap:2px}
.life-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.who{min-width:0;font:400 var(--t-btn)/1.05 var(--f-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vita-tag{
  flex:none;font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:#fff;
  padding:3px 8px 3px;border:var(--line-xs) solid var(--ink);border-radius:999px;background:linear-gradient(180deg,var(--player),var(--player-lo));
}
.cls{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-2)}   /* type · weapon · origin: wraps between its parts rather than cut (UI audit H3) */
.cls>span{white-space:nowrap}
.bar{
  position:relative;height:18px;overflow:hidden;border-radius:999px;
  border:var(--line-s) solid var(--ink);background:#4b3045;box-shadow:0 3px 0 var(--ink);
}
.bar>i,.bar>b.ghost{position:absolute;inset:0;transform-origin:left center}
.bar>b.ghost{background:var(--paper)}
.bar>i{background:var(--g-red);box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.bar.hp>i{background:var(--g-blue)}
.hp-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.hp-row .bar{flex:1;min-width:0}
.num{font:400 var(--t-name-s)/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}

.hud-round{justify-self:center;display:grid;justify-items:center;gap:2px}
.round-badge{position:relative;width:112px;height:90px;display:grid;place-items:center}
.round-badge .wreath{position:absolute;left:50%;top:-12px;width:116px;height:116px;transform:translateX(-50%)}
.round-num{
  position:relative;min-width:58px;height:58px;padding:0 10px;margin-top:-8px;display:grid;place-items:center;border-radius:999px;
  border:var(--line) solid var(--ink);background:var(--g-gold);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(120,60,10,.22),0 4px 0 var(--ink);
  font:400 var(--t-btn-l)/1 var(--f-display);letter-spacing:.02em;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
  align-content:center;gap:1px;
}
/* the small "Round" label must not inherit the number's thick outline or white fill (it smeared the letters) */
.round-num::before{content:"Round";font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink);-webkit-text-fill-color:var(--ink);-webkit-text-stroke:0 transparent;paint-order:normal;text-shadow:none;margin-top:0;opacity:.85}
.foes{
  font:var(--w-strong) var(--t-caption)/1 var(--f-ui);letter-spacing:.02em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;
  padding:5px 12px 6px;border:var(--line-s) solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:0 3px 0 var(--ink);
}
.hud-ctrl{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ctrl-row{display:flex;gap:8px;pointer-events:auto}
.icon-btn{
  all:unset;box-sizing:border-box;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
  border:var(--line) solid var(--ink);background:var(--g-bronze);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(110,60,10,.22),0 5px 0 var(--ink);
  font:400 var(--t-name)/1 var(--f-display);font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
  transition:transform .2s var(--pop),box-shadow .2s var(--pop);touch-action:manipulation;
}
.icon-btn .ic{width:28px;height:28px}
/* hover lifts only under a real pointer (UI audit H5); the press sinks fast and springs back like the kit's buttons */
@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{transform:translateY(-2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(110,60,10,.22),0 7px 0 var(--ink)}
}
.icon-btn:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 2px 0 var(--ink);transition-duration:.06s;transition-timing-function:var(--out)}
.icon-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.glory{
  display:flex;align-items:center;gap:6px;padding:3px 13px 3px 4px;border-radius:999px;
  border:var(--line-s) solid var(--ink);background:var(--paper);box-shadow:var(--drop-s);
  font:400 var(--t-btn)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;
}
.glory .ic{width:30px;height:30px}
.glory b{font-weight:400;min-width:1ch}

/* ---------- boss bar: imperial frame with a gold edge ---------- */
.bossbar{
  position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 146px);
  width:min(460px,calc(100% - 32px));display:grid;justify-items:center;gap:7px;pointer-events:none;
}
.boss-head{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px}
.boss-name{font:400 var(--t-btn-l)/1 var(--f-display);letter-spacing:.04em;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.boss-title{
  font:italic var(--w-strong) var(--t-caption)/1 var(--f-ui);color:#fff;white-space:nowrap;
  padding:4px 10px 5px;border:var(--line-xs) solid var(--ink);border-radius:999px;background:var(--g-imperial);box-shadow:0 3px 0 var(--ink);
}
.bar.boss{
  width:100%;height:22px;border:3px solid var(--gold);background:#3a1638;
  box-shadow:0 0 0 3px var(--ink),0 6px 0 2px var(--ink);
}
.bar.boss>i{background:var(--g-red)}
/* two-phase bosses (src/bosses.js): a gold notch at half health until he turns; then the title pill turns red and says so */
.bar.boss>.half{position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%);background:var(--gold-hi);box-shadow:0 0 0 2px var(--ink);display:none}
.bossbar.two .bar.boss>.half{display:block}
.bossbar.rage .boss-title{background:var(--g-red)}

/* ---------- bottom: favor of the crowd and the blessings held ---------- */
.hud-bottom{
  position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
}
body[data-screen="draft"] .hud-bottom{visibility:hidden}
.favor{
  display:flex;align-items:center;gap:8px;width:min(360px,100%);padding:6px 14px 9px 7px;
  background:var(--g-paper);border:var(--line) solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--lip),var(--drop);
}
.favor-ic{width:42px;height:42px}
.favor-main{flex:1;min-width:0;display:grid;gap:5px}
.favor-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.favor-name{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.favor-state{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.favor-bar{height:16px;background:#cdb07e;box-shadow:inset 0 3px 0 rgba(90,50,30,.25),0 3px 0 var(--ink)}
.favor-bar>i{background:var(--g-laurel)}
.favor .mark{position:absolute;top:0;bottom:0;width:4px;background:var(--gold-hi);box-shadow:0 0 0 2px var(--ink);transform:translateX(-50%)}
.favor.ready .favor-bar>i{background:var(--g-gold);animation:favor-glow 1.1s ease-in-out infinite alternate}
.favor.ready .favor-state{color:var(--gold-lo)}
@keyframes favor-glow{to{filter:brightness(1.18)}}
.boons{display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;gap:8px;max-width:min(520px,52vw)}
.boon-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 11px 3px 4px;border-radius:999px;white-space:nowrap;
  border:var(--line-s) solid var(--ink);background:var(--paper);box-shadow:0 3px 0 var(--ink);
  font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink);
}
.boon-chip .ic{width:24px;height:24px}
.boon-chip em{font:400 var(--t-name-s)/1 var(--f-display);font-style:normal;color:var(--ink-2)}
.boon-chip.t1{background:#dcebff}
.boon-chip.t2{background:#fff0b3}

/* ---------- banner: big Lilita over the scene, sub line on a paper pill ---------- */
.banner{
  position:fixed;left:0;right:0;top:25%;display:grid;justify-items:center;gap:14px;pointer-events:none;text-align:center;padding-inline:16px;
  opacity:0;transform:scale(.72);transition:opacity .18s ease,transform .38s var(--pop);
}
.banner.show{opacity:1;transform:none}
.banner-title{
  font:400 clamp(54px,8.5vw,100px)/.95 var(--f-display);letter-spacing:.02em;text-wrap:balance;
  color:#fff;-webkit-text-stroke:12px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);
}
.banner-sub{
  max-width:min(560px,100%);padding:7px 18px 8px;border:var(--line) solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:var(--drop-s);
  font:var(--w-strong) var(--t-lead)/1.3 var(--f-ui);color:var(--ink);text-wrap:balance;
}
.banner-sub:empty{display:none}
.banner.boss .banner-title{color:#f6d2f2}
.banner.boss .banner-sub{background:var(--g-imperial);color:#fff}
.banner.rage .banner-title{color:#ffc4ab}
.banner.rage .banner-sub{background:var(--g-red)}
.banner.mercy .banner-title{color:var(--gold-hi)}

@media (max-width:900px){
  .boons{max-width:46vw}
  .boon-chip>span{display:none}
  .boon-chip{padding:3px}
}
@media (max-width:600px){
  .hud{
    grid-template-columns:minmax(0,1fr) auto 44px;grid-template-areas:"life round btns" "glory round btns";
    column-gap:8px;row-gap:8px;padding-top:calc(env(safe-area-inset-top,0px) + 10px);
  }
  body[data-screen="draft"] .ctrl-row,body[data-screen="draft"] .glory{display:none}
  .hud-life{grid-area:life;width:100%;gap:7px;padding:5px 9px 7px 5px}
  .medal{width:40px;height:40px}
  .medal .ic{width:28px;height:28px}
  .who{font-size:var(--t-name-s)}
  .vita-tag,.cls{display:none}
  .bar{height:14px;border-width:2.5px}
  .hp-row{margin-top:3px;gap:6px}
  .num{font-size:var(--t-tag)}
  .hud-round{grid-area:round}
  .round-badge{width:80px;height:64px}
  .round-badge .wreath{width:84px;height:84px;top:-9px}
  .round-num{min-width:42px;height:42px;margin-top:-6px;padding:0 7px;font-size:var(--t-btn);-webkit-text-stroke:4px var(--ink)}
  .round-num::before{display:none}
  .foes{font-size:var(--t-label);padding:3px 8px 4px;border-width:2.5px}
  .hud-ctrl{display:contents}
  .ctrl-row{grid-area:btns;flex-direction:column;gap:9px}
  .icon-btn{width:44px;height:44px;border-radius:12px;font-size:var(--t-name)}
  .icon-btn .ic{width:25px;height:25px}
  .glory{grid-area:glory;justify-self:start;align-self:start;font-size:var(--t-name);padding:2px 10px 2px 3px}
  .glory .ic{width:24px;height:24px}
  .bossbar{top:calc(env(safe-area-inset-top,0px) + 150px);width:calc(100% - 96px);left:calc(50% - 26px)}
  .boss-name{font-size:var(--t-btn);-webkit-text-stroke:5px var(--ink)}
  .boss-title{font-size:var(--t-label)}
  .bar.boss{height:16px}
  .hud-bottom{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .favor{width:auto;padding:5px 12px 7px 6px}
  .favor-ic{width:34px;height:34px}
  .favor-name{font-size:var(--t-label)}
  .favor-state{font-size:var(--t-label)}
  .favor-bar{height:13px}
  .boons{justify-content:flex-start;max-width:none;flex-wrap:nowrap;overflow:hidden}
  .ub-track{width:40px;height:9px;border-width:2px}
  .ub.me .ub-track{width:50px;height:10px}
  .ub.boss .ub-track,.ub.nem .ub-track{width:70px;height:11px}
  .pop{font-size:22px;-webkit-text-stroke:5px var(--ink)}
  .pop.crit{font-size:32px;-webkit-text-stroke:6px var(--ink)}
  .pop.burn,.pop.bleed{font-size:18px;-webkit-text-stroke:4px var(--ink)}
  .pop.info{font-size:12px;-webkit-text-stroke:4px var(--ink)}
  .banner{top:30%}
  .banner-title{font-size:48px;-webkit-text-stroke:9px var(--ink);text-shadow:0 6px 0 var(--ink)}
  .banner-sub{font-size:var(--t-body)}
}
@media (prefers-reduced-motion:reduce){
  .banner{transition:opacity .2s ease;transform:none}
  .icon-btn{transition:none}
  .favor.ready .favor-bar>i{animation:none}
}

/* ---------- the UI pass (docs/ui-audit.md delight 5, 6, 10) ---------- */
/* the full name lives in the plate's tooltip (hud.js; the plate itself shows the given name) */
.hud .hud-life[data-tip]{pointer-events:auto;cursor:default}
/* a round won: the laurel wiggles once; a new round number pops in */
.round-badge.win .wreath{animation:laurel-win .52s var(--out)}
@keyframes laurel-win{
  0%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(-50%) rotate(-7deg) scale(1.08)}
  60%{transform:translateX(-50%) rotate(5deg)}100%{transform:translateX(-50%) rotate(0)}
}
.round-num.pop{animation:round-pop .28s var(--pop)}
@keyframes round-pop{from{transform:scale(1.3)}}
/* coins: the chip bumps and the coin flips as the number ticks up (hud.js tickCoins) */
.hud .glory.bump{animation:coin-bump .28s var(--pop)}
@keyframes coin-bump{from{transform:scale(1.12)}}
.hud .glory.bump .ic{animation:coin-flip .4s var(--out)}
@keyframes coin-flip{from{transform:perspective(200px) rotateY(0)}to{transform:perspective(200px) rotateY(360deg)}}
/* the crowd's favor fills: its laurel wiggles twice, beside the glow */
.favor.ready .favor-ic{animation:favor-wiggle .6s var(--out)}
@keyframes favor-wiggle{0%,100%{transform:rotate(0)}17%{transform:rotate(-10deg)}42%{transform:rotate(10deg)}67%{transform:rotate(-8deg)}84%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){
  .round-badge.win .wreath,.round-num.pop,.hud .glory.bump,.hud .glory.bump .ic,.favor.ready .favor-ic{animation:none}
}
.shot :is(.round-badge .wreath,.round-num,.hud .glory,.hud .glory .ic,.favor-ic){animation:none}

/* ---- P0-3 additions (console, portrait, minimap, ghost bars, mobile strip) go below ---- */

/* ---------- the research pass (docs/research/game-ui.md §2.2, top-10 #7) ---------- */
/* your bar in chunks: a 2 px ink tick every 25 health (hud.js sets --tk: every 50 over 400) */
.bar.hp::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--tk,100%) - 2px),rgba(42,26,46,.35) calc(var(--tk,100%) - 2px) var(--tk,100%));
}
/* the chunk a hit took flashes white, holds, then drains (hud.js ghostTimed); a heal grows the fill green */
.bar>b.ghost.flash{background:#fff;box-shadow:0 0 0 2px #fff inset}
.bar.hp.heal>i{background:var(--g-laurel)}
/* low health: the fill turns red; the plate beats with the heartbeat (four beats, hud.js lowHealth) */
.hud-life.low .bar.hp>i{background:var(--g-red)}
.hud-life.low .num{color:var(--enemy)}
.hud-life.beating{animation:plate-beat 1s ease-out infinite;transform-origin:30% 50%}
@keyframes plate-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.03)}34%{transform:scale(1.005)}46%{transform:scale(1.02)}}
.low-vignette{
  position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .45s var(--out);
  background:radial-gradient(ellipse closest-side at 50% 50%,transparent 62%,rgba(200,32,44,.22) 86%,rgba(170,20,40,.5) 100%);
}
.low-vignette.on{opacity:.5}
.low-vignette.beat{animation:low-beat 1s var(--out)}
@keyframes low-beat{0%{opacity:.5}12%{opacity:1}30%{opacity:.7}44%{opacity:.92}100%{opacity:.5}}
/* timed power chips: a clockwise dark sweep over the cooldown, the seconds while 3 or more are left; the ready pop
   (a white flash, scale 1.15 to 1 and a ring in the god's colour) and the fire pulse */
.up-chip .cd{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:conic-gradient(transparent 0 var(--a,360deg),rgba(42,26,46,.45) var(--a,360deg) 360deg);
}
.up-chip .cd-n{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:400 var(--t-name-s)/1 var(--f-display);font-style:normal;
  color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;font-variant-numeric:tabular-nums;
}
.up-chip .cd-n:empty{display:none}
.up-chip.ready{animation:chip-ready .3s var(--pop)}
.up-chip.ready::after{
  content:"";position:absolute;inset:-3px;border-radius:15px;border:3px solid var(--gc,var(--gold));pointer-events:none;opacity:0;
  animation:chip-ring .46s var(--out);
}
@keyframes chip-ready{0%{transform:scale(1.15);filter:brightness(2.4) saturate(.3)}27%{filter:none}100%{transform:scale(1)}}
@keyframes chip-ring{0%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.55)}}
.up-chip.fired{animation:chip-fire .34s var(--out)}
@keyframes chip-fire{0%{box-shadow:inset 0 0 0 3px var(--gc,var(--gold)),0 0 0 5px var(--gc,var(--gold)),0 3px 0 var(--ink)}100%{}}
/* the number table: your hits white, crits gold with the star, the damage you take red, heals green, damage over time
   small in its tag's colour (--tc) with no pop, other fighters' hits on your side quieter */
.pop.dmg{font-size:25px;-webkit-text-stroke:5.5px var(--ink)}
.pop.dmg.foe{font-size:20px;color:#e9dccb;-webkit-text-stroke:4.5px var(--ink);opacity:.9}
.pop.crit{font-size:38px;-webkit-text-stroke:7px var(--ink)}
.pop.hurt{font-size:27px;color:#ff6a5e;-webkit-text-stroke:6px var(--ink)}
.pop.heal{font-size:24px;color:var(--laurel-hi);-webkit-text-stroke:5.5px var(--ink)}
.pop.dot{font-size:18px;color:var(--tc,#ff6f6f);-webkit-text-stroke:4.5px var(--ink);text-shadow:0 2px 0 var(--ink)}
@media (max-width:600px){
  .pop.dmg{font-size:21px;-webkit-text-stroke:4.5px var(--ink)}
  .pop.dmg.foe{font-size:17px;-webkit-text-stroke:4px var(--ink)}
  .pop.crit{font-size:32px;-webkit-text-stroke:6px var(--ink)}
  .pop.hurt{font-size:23px;-webkit-text-stroke:5px var(--ink)}
  .pop.heal{font-size:20px;-webkit-text-stroke:4.5px var(--ink)}
  .pop.dot{font-size:15px;-webkit-text-stroke:4px var(--ink)}
  .up-chip .cd-n{font-size:var(--t-name-s);-webkit-text-stroke:3.5px var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .hud-life.beating,.low-vignette.beat,.up-chip.ready,.up-chip.ready::after,.up-chip.fired{animation:none}
}

/* ---------- gods v2: the patron and the favor rings share the name's line (styles/gods.css draws the rings) ---------- */
.life-top .who{flex:1 1 auto}
.life-top .hud-gods{margin-left:2px}

/* ---------- the name plate never cuts the name (the bug pass: "Ama…" beside the life tag and three favor rings) ----------
   Desktop: the plate grows to fit the name, the life tag and the rings (up to 460 px); the name keeps its full width.
   Phones keep the full-width plate, where the life tag is hidden and the rings are smaller. */
@media (min-width:601px){
  .hud-life{width:max-content;min-width:min(340px,100%);max-width:min(460px,100%)}
  .life-top .who{flex:0 0 auto;overflow:visible;text-overflow:clip}
  .life-top .vita-tag{margin-right:auto}
}
/* phones: the plate is the column's width; the favor rings drop under the name rather than cut it */
@media (max-width:600px){
  .life-top{flex-wrap:wrap;row-gap:3px;justify-content:flex-start}
  .life-top .who{flex:0 0 auto;max-width:100%}
}

/* ---------- typography and states (2026-10-21): Lilita One and Nunito, as Google Fonts serves them, have no tabular
   figures (font-variant-numeric:tabular-nums changes nothing: a 1 is 0.4em, a 0 0.64em). So the numbers that tick keep
   their own room: your health beside its bar (the bar no longer shrinks and grows as it counts) and the coins. ---------- */
.hp-row .num{min-width:7ch;text-align:right}
.glory b{min-width:4ch;text-align:right}

/* ---------- crowd requests (src/requests.js, hud.js): the call and the chip ----------
   The call: "The crowd wants" on a laurel pill (the crowd's colour, as on the favor bar) over the wish in big letters.
   The chip hangs under the foes count without moving the HUD (so the camera's framing never shifts for it); a streak
   or a window fills it in a laurel tint; met it turns gold, missed it greys. The health request's line on your bar. */
.banner.crowd{gap:10px}
.banner.crowd .banner-title{
  font:400 var(--t-name)/1 var(--f-display);letter-spacing:.03em;color:#fff;-webkit-text-stroke:4px var(--ink);text-shadow:none;
  padding:6px 16px 7px;border:var(--line) solid var(--ink);border-radius:999px;background:var(--g-laurel);box-shadow:var(--lip),var(--drop-s);
}
.banner.crowd .banner-sub{
  max-width:min(960px,100%);padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font:400 clamp(40px,5.4vw,72px)/1 var(--f-display);letter-spacing:.02em;color:#fff;
  -webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);
}
.hud-round{position:relative}
.ask{
  position:absolute;top:calc(100% + 6px);left:50%;translate:-50% 0;overflow:hidden;
  display:inline-flex;align-items:center;gap:5px;padding:3px 11px 3px 5px;white-space:nowrap;
  border:var(--line-s) solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:0 3px 0 var(--ink);
  font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink);
}
.ask .ic{position:relative;width:22px;height:22px;flex:none}
.ask-name{position:relative}
.ask-n{position:relative;min-width:3.2ch;text-align:right;font:400 var(--t-name-s)/1 var(--f-display);font-style:normal}
.ask-n:empty{display:none}
.ask-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);background:color-mix(in srgb,var(--laurel-hi) 60%,var(--paper))}
.ask.met{background:var(--g-gold)}
.ask.missed{background:var(--paper-2);color:var(--ink-3)}
.ask.missed .ic{filter:grayscale(1);opacity:.55}
.ask.in{animation:ask-in .3s var(--pop)}
.ask.cheer{animation:ask-cheer .42s var(--pop)}
.ask.shake{animation:ask-shake .36s var(--out)}
@keyframes ask-in{from{transform:scale(.6);opacity:0}}
@keyframes ask-cheer{from{transform:scale(1.22)}}
@keyframes ask-shake{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
.bar.hp>.ask-line{display:none;position:absolute;top:0;bottom:0;width:4px;translate:-50% 0;background:var(--laurel-hi);box-shadow:0 0 0 2px var(--ink)}
.bar.hp.ask-at>.ask-line{display:block}
/* met: the favor panel bumps and its laurel wiggles as the bar fills (a kill's favor still steps at once) */
.favor.gain{animation:favor-gain .3s var(--pop)}
@keyframes favor-gain{from{transform:scale(1.05)}}
.favor.gain .favor-ic{animation:favor-wiggle .6s var(--out)}
.favor.gain .favor-bar>i{transition:transform .4s var(--out)}
@media (max-width:600px){
  .banner.crowd .banner-title{font-size:var(--t-name-s);-webkit-text-stroke:3.5px var(--ink)}
  .banner.crowd .banner-sub{font-size:34px;-webkit-text-stroke:8px var(--ink);text-shadow:0 5px 0 var(--ink)}
  .ask{top:calc(100% + 4px);left:auto;right:0;translate:none;padding:2px 9px 2px 4px;font-size:var(--t-label)}   /* clear of the buttons beside the badge */
  .ask .ic{width:18px;height:18px}
  .ask-n{font-size:var(--t-tag)}
}
@media (prefers-reduced-motion:reduce){
  .ask.in,.ask.cheer,.ask.shake,.favor.gain,.favor.gain .favor-ic{animation:none}
  .favor.gain .favor-bar>i{transition:none}
}

/* ---------- phones: the pop-ups that fill the screen ----------
   A trinket's pop-up has the screen to itself: the plate and the crowd's bar would only peek out under its edges. A
   landscape phone's card pick needs the whole height for the cards, so the plate steps aside there too (portrait keeps
   it above them). */
@media (max-width:600px),(max-height:500px){ body[data-screen="loot"] :is(.hud,.hud-bottom){visibility:hidden} }
@media (max-height:500px) and (min-width:601px){ body[data-screen="draft"] .hud{visibility:hidden} }
/* the card pick on a phone: the plate drops its status line (blocks, armor) so the round's result clears it */
@media (max-width:600px){ body[data-screen="draft"] .hud-status{display:none} }