/* ==========================================================================
   Weapons and info (agent 2, progression v2): the Stats panel, the shared tooltip, the HUD's status strip and
   upgrade chips, the after-round cards' rarity and path labels. KayKit UI: paper stickers, thick ink outlines, hard
   offset shadows, Lilita One for names and numbers, Nunito for words.
   ========================================================================== */
:root{ --r-epic:#a052a0; --r-epic-hi:#d9a0e6; }

/* ---------- the after-round cards: rarity frames, path label, path pips ---------- */
.card.r0{--rc:var(--r1)}
.card .path-tag{
  align-self:flex-start;max-width:100%;padding:3px 10px 4px;border:2.5px solid var(--ink);border-radius:9px;background:var(--paper);
  font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink);box-shadow:0 2px 0 var(--ink);
}
.card.boon .path-tag{background:var(--paper-2);color:var(--ink-2)}
.card.path .card-icon{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(180deg,#fff6e4 0%,#e7c58c 100%)}
.card.r1{box-shadow:inset 0 0 0 5px var(--rc),0 7px 0 var(--ink)}
.card.r2{box-shadow:inset 0 0 0 5px var(--rc),0 0 0 3px var(--r-epic-hi),0 7px 0 var(--ink)}
.card.r3{box-shadow:inset 0 0 0 6px var(--rc),0 0 0 3px var(--gold-hi),0 7px 0 var(--ink)}
.card.r2::after{
  content:"";position:absolute;inset:-20% -60%;pointer-events:none;
  background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.4) 50%,transparent 56%);
  transform:translateX(-60%);animation:shine 4.2s ease-in-out 1.4s infinite;
}
.card .stats.note{flex-wrap:wrap;justify-content:space-between;gap:6px 10px}
.pips{display:inline-flex;gap:4px;align-items:center}
.pips i{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--ink);background:#e7d3b0}
.pips i.on{background:var(--g-gold)}
.pips i.next{background:var(--rc,var(--r2));box-shadow:0 0 0 2px #fff}
.pips i.fin{border-radius:4px;transform:rotate(45deg) scale(.86)}
.trim-up,.trim-now{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-2)}
.trim-up b{color:var(--ink)}

/* ---------- HUD: the weapon medal's trim, the status strip ---------- */
.hud .medal[data-tip]{pointer-events:auto;cursor:default}
.medal[data-trim="2"]{box-shadow:0 0 0 3px var(--r2),0 4px 0 var(--ink)}
.medal[data-trim="2_5"]{box-shadow:0 0 0 3px var(--r-epic),0 4px 0 var(--ink)}
.medal[data-trim="3"]{box-shadow:0 0 0 3px var(--r3),0 4px 0 var(--ink)}
.hud-status{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;min-height:0;pointer-events:auto}
.hud-status:empty{display:none}
.st-chip{
  display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 3px;border-radius:999px;border:var(--line-xs) solid var(--ink);background:var(--paper);
  box-shadow:0 2px 0 var(--ink);font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink);white-space:nowrap;cursor:default;
}
.st-chip .ic{width:17px;height:17px}
.st-stunned,.st-snared,.st-slowed{background:#ffe2a8}
.st-bleeding,.st-burning{background:#ffd3cc}
.st-parry,.st-javelins{background:#dcebff}
.st-fury,.st-furySpd,.st-furor,.st-phoenix,.st-stacks{background:#fff0b3}
.st-spared{background:var(--g-gold)}

/* ---------- HUD: every upgrade taken this life, bottom right (two rows, then "+N") ---------- */
.boons{width:min(520px,46vw);pointer-events:auto;align-content:flex-end}
.up-chip,.up-wpn{
  all:unset;box-sizing:border-box;position:relative;width:40px;height:40px;display:grid;place-items:center;flex:none;cursor:default;
  border-radius:12px;border:var(--line-s) solid var(--ink);background:var(--g-paper);box-shadow:inset 0 0 0 3px var(--r1),0 3px 0 var(--ink);
}
.up-chip .ic,.up-wpn .ic{width:26px;height:26px}
.up-chip.rr{box-shadow:inset 0 0 0 3px var(--r2),0 3px 0 var(--ink)}
.up-chip.re{box-shadow:inset 0 0 0 3px var(--r-epic),0 3px 0 var(--ink)}
.up-chip.rl{box-shadow:inset 0 0 0 3px var(--r3),0 3px 0 var(--ink);background:linear-gradient(180deg,#fffbe0,#f6e0a0)}
.up-chip.wpn{background:linear-gradient(180deg,#f3f7ff,#dbe6f6)}
.up-chip.wpn.rl{background:linear-gradient(180deg,#fffbe0,#f6e0a0)}
.up-wpn{background:var(--g-bronze);box-shadow:0 3px 0 var(--ink)}
.up-badge{
  position:absolute;right:-6px;bottom:-6px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;display:grid;place-items:center;
  border:var(--line-xs) solid var(--ink);border-radius:999px;background:#fff;font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);
}
.up-chip.fin .up-badge{background:var(--g-gold)}
.up-chip.more{cursor:pointer;font:400 var(--t-name-s)/1 var(--f-display);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;background:var(--g-blue)}
/* the after-round screen keeps the chips in the free corner beside the cards (desktop) */
body[data-screen="draft"] .hud-bottom{z-index:var(--z-hud-over)}   /* above the after-round screen, so the chips can be hovered */
body[data-screen="draft"] .hud-bottom .boons{visibility:visible;width:calc((100vw - 1012px) / 2 - 8px)}
body[data-screen="draft"] .hud-bottom .favor{visibility:hidden}
@media (max-width:1240px){ body[data-screen="draft"] .hud-bottom .boons{visibility:hidden} }

/* ---------- the Stats panel ---------- */
.stats-panel{
  position:fixed;z-index:var(--z-panel);right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 128px);
  width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 128px - 120px);
  display:flex;flex-direction:column;gap:10px;padding:12px 14px 12px;pointer-events:auto;
  background:var(--g-paper);border:var(--line) solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--lip),var(--drop);
  animation:sp-in .18s var(--pop);
}
@keyframes sp-in{from{transform:translateY(-10px) scale(.97);opacity:0}}
/* ---------- the Stats panel (owner, 2026-10-22: "let's do a hillclimb ui pass on this ui until it feels elegant and AAA
   level"): one calm column of sections split by hairlines, no boxes inside boxes. Colour belongs to the content (each
   power's god, the rarity gems); a row's makings (stat sources, tags, slots) are in its tip (stats.js draw) ---------- */
.stats-panel{gap:0;padding:14px 16px 12px}
/* the header stays; the sections scroll under it, inside the border (kit.css: the scrollbar and the fades) */
.pv-scroll{--fade:8px;flex:0 1 auto;min-height:0;display:grid;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;margin:-8px -10px -8px 0;padding:8px 10px 8px 0}
.pv-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 2px 12px}
.pv-medal{width:52px;height:52px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;cursor:default;
  border:var(--line-s) solid var(--ink);background:var(--g-bronze);box-shadow:inset 0 0 0 3px var(--rc,var(--r1)),0 3px 0 var(--ink)}
.pv-medal .ic{width:32px;height:32px}
:is(.pv-medal,.pv-trim)[data-trim="2"]{--rc:var(--r2)}
:is(.pv-medal,.pv-trim)[data-trim="2_5"]{--rc:var(--r-epic)}
:is(.pv-medal,.pv-trim)[data-trim="3"]{--rc:var(--r3)}
.pv-title{display:grid;gap:3px;min-width:0}
.pv-name{font:400 var(--t-h)/1 var(--f-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-sub{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-3)}
.pv-trim{font-style:normal;color:color-mix(in srgb,var(--rc,var(--ink-3)) 75%,var(--ink))}
.pv-close{all:unset;box-sizing:border-box;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  font:400 26px/1 var(--f-display);color:var(--ink-3);transition:background-color .12s var(--out),color .12s var(--out)}
.pv-close:hover{background:rgba(42,26,46,.08);color:var(--ink)}
.pv-close:active{transform:scale(.94)}
.pv-sec{display:grid;gap:8px;padding:12px 0;border-top:1.5px solid rgba(42,26,46,.12)}
.pv-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px;
  font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.pv-h b{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* hover and focus: a soft plate under the row, never a border */
:is(.pv-god,.pv-pow,.pv-sig,.pv-trait,.pv-path,.pv-omen,#stats .sp-row){border-radius:10px;cursor:default;outline:none;transition:background-color .12s var(--out)}
:is(.pv-god,.pv-pow,.pv-sig,.pv-trait,.pv-path,.pv-omen,#stats .sp-row):is(:hover,:focus-visible){background:rgba(42,26,46,.06)}
html.kbd-nav :is(.pv-god,.pv-pow,.pv-sig,.pv-trait,.pv-path,.pv-omen,#stats .sp-row):focus{background:rgba(42,26,46,.06);box-shadow:inset 0 0 0 2px var(--focus,#3a7bd5)}
/* the gods: a seal each, its favor as a ring round it, the patron crowned */
.pv-gods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.pv-god{position:relative;display:grid;justify-items:center;gap:4px;padding:6px 2px 5px;text-align:center}
.pv-seal{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--gc) calc(var(--f) * 360deg),rgba(42,26,46,.13) 0)}
.pv-seal::before{content:"";position:absolute;inset:4px;border-radius:50%;background:color-mix(in srgb,var(--gc) 16%,#fffaf0)}
.pv-seal .ic{position:relative;width:28px;height:28px}
.pv-crown{position:absolute;top:-3px;left:50%;translate:-50% 0;width:20px;height:16px;display:grid;place-items:center}
.pv-crown .ic{width:20px;height:16px}
/* a full ring is the divine moment, ready: the ring glows in the god's colour */
.pv-god.full .pv-seal{box-shadow:0 0 0 3px color-mix(in srgb,var(--gc) 35%,transparent),0 0 14px color-mix(in srgb,var(--gc) 55%,transparent)}
.pv-god b{font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink)}
.pv-god small{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
.pv-omen{margin:0;display:flex;align-items:center;gap:8px;padding:4px 6px;font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-3)}
.pv-omen .ic{width:18px;height:18px;flex:none}
.pv-omen b{font-weight:var(--w-strong);color:color-mix(in srgb,var(--gc) 55%,var(--ink))}
/* powers: the icon on its god's colour, the whole name, the rarity as a gem and a word; the level only past 1 */
.pv-list,.pv-traits{margin:0;padding:0;list-style:none;display:grid;gap:1px}
.pv-pow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:4px 6px}
.pv-pic{position:relative;width:36px;height:36px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--gc,#e8dcc4) 30%,#fffaf0);border:2px solid color-mix(in srgb,var(--gc,#8a7a5a) 65%,var(--ink))}
.pv-pic .ic{width:22px;height:22px}
.pv-lv{position:absolute;right:-6px;bottom:-5px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:999px;
  background:var(--ink);color:#fff;font:400 var(--t-micro)/18px var(--f-display);text-align:center;font-variant-numeric:tabular-nums}
.pv-pname{display:grid;gap:2px;min-width:0;font:400 var(--t-name-s)/1.15 var(--f-display);color:var(--ink);text-wrap:balance}
.pv-pname small{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.pv-rar{display:inline-flex;align-items:center;gap:6px;font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3);white-space:nowrap}
.pv-rar::before{content:"";width:9px;height:9px;border-radius:2px;rotate:45deg;background:var(--rc,#c9bea6);box-shadow:0 0 0 1.5px rgba(42,26,46,.35)}
/* most powers are Common: theirs is the gem alone (the word stays for a screen reader), so the rarer ones stand out */
.pv-rar.r0 span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pv-rar.r1{--rc:var(--r2)}
.pv-rar.r2{--rc:var(--r-epic)}
.pv-rar.r3{--rc:var(--r3);color:color-mix(in srgb,var(--r3) 45%,var(--ink))}
/* the sets: a tag counted toward its bonus; a full one fills with its colour */
.pv-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:4px;padding:2px 2px 0}
.pv-set{display:flex;align-items:center;gap:4px;padding:5px 9px 5px 7px;white-space:nowrap;border-radius:999px;background:rgba(42,26,46,.06);cursor:default;
  font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3)}
.pv-set .ic{width:15px;height:15px;opacity:.7}
.pv-set b{margin-left:auto;font-weight:var(--w-strong);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pv-set.on{background:color-mix(in srgb,var(--tc) 26%,#fffaf0);color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tc) 65%,var(--ink))}
.pv-set.on .ic{opacity:1}
/* the fighter: the signature, then the home and talents as plain rows */
.pv-sig{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding:4px 6px}
.pv-sig span{display:grid;gap:3px}
.pv-sig b{font:400 var(--t-name-s)/1.1 var(--f-display);color:var(--ink)}
.pv-sig small{font:var(--w-body) var(--t-caption)/1.35 var(--f-ui);color:var(--ink-2)}
.pv-trait{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding:3px 6px;
  font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink)}
.pv-trait > .ic{width:20px;height:20px;justify-self:center;opacity:.85}
.pv-trait em{font-style:normal;color:var(--ink-3)}
/* weapon paths: the name, its pips, what it has taken */
.pv-path{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 10px;padding:5px 6px}
.pv-path > b{font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink)}
.pv-path .pips{justify-self:end}
.pv-path .pips i{width:11px;height:11px;border-width:2px}
.pv-taken{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 10px;font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-2)}
.pv-up{display:inline-flex;align-items:center;gap:5px}
.pv-up::before{content:"";width:7px;height:7px;border-radius:2px;rotate:45deg;background:#c9bea6}
.pv-up.r1::before{background:var(--r2)}
.pv-up.r2::before{background:var(--r-epic)}
.pv-up.r3::before{background:var(--r3)}
/* stats: the name and the number, its sources in the tip */
.pv-stats{margin:0;display:grid}
#stats .sp-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:9px;padding:6px 6px}
#stats .sp-row + .sp-row{box-shadow:0 -1px 0 rgba(42,26,46,.07)}
#stats .sp-row .ic{width:18px;height:18px}
#stats .sp-row dt{font:var(--w-strong) var(--t-body)/1.1 var(--f-ui);color:var(--ink-2)}
#stats .sp-row dd{margin:0;font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.pv-chips{display:flex;flex-wrap:wrap;gap:6px}
.pv-chips .boon-chip{cursor:default}
.pv-foot{margin:2px 0 0;display:flex;justify-content:center;gap:6px;font:var(--w-strong) var(--t-micro)/1.2 var(--f-ui);color:var(--ink-3)}
.pv-foot kbd{font-size:var(--t-micro)}
.sp-touch{display:none}
@media (pointer:coarse){ .sp-keys{display:none} .sp-touch{display:inline} .pv-close{width:44px;height:44px} }
@media (prefers-reduced-motion:reduce){ :is(.pv-god,.pv-pow,.pv-sig,.pv-trait,.pv-path,.pv-omen,#stats .sp-row,.pv-close){transition:none} }

/* ---------- the one tooltip ---------- */
.tip{
  position:fixed;left:0;top:0;z-index:var(--z-tip);width:max-content;max-width:min(320px,calc(100vw - 16px));pointer-events:none;
  display:grid;gap:4px;padding:9px 12px 10px;
  background:var(--g-paper);border:var(--line-s) solid var(--ink);border-radius:14px;box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--ink);
  /* it grows from its arrow (the side of the thing it explains): scale and translate ride on top of the placement */
  opacity:0;scale:.97;translate:0 4px;transform-origin:var(--ax,50%) 100%;
  transition:opacity .12s var(--out),scale .12s var(--out),translate .12s var(--out);
}
.tip[data-side="below"]{transform-origin:var(--ax,50%) 0;translate:0 -4px}
.tip.show{opacity:1;scale:1;translate:0 0}
.tip::after{
  content:"";position:absolute;left:var(--ax,50%);bottom:-9px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
  background:#f3e3c2;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
.tip[data-side="below"]::after{bottom:auto;top:-9px;background:#fffaf0;border:0;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.tp-title{font:400 var(--t-name)/1.05 var(--f-display);color:var(--ink)}
.tp-kicker{font:var(--w-strong) var(--t-micro)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.tp-line{font:var(--w-strong) var(--t-body)/1.4 var(--f-ui);color:var(--ink)}
.tp-rows{margin:2px 0 0;display:grid;gap:2px;padding:6px 8px;border:2px solid var(--ink);border-radius:10px;background:var(--paper-2)}
.tp-rows div{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline}
.tp-rows dt{font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2);white-space:nowrap}
.tp-rows dd{margin:0;font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink);text-align:start}
.tp-rows div.long{grid-template-columns:minmax(0,1fr);gap:1px;padding:2px 0}
.tp-note{font:italic var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}

@media (max-width:600px){
  .stats-panel{left:12px;right:12px;width:auto;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);max-height:62vh;padding:10px 11px}
  .pv-name{font-size:var(--t-name)}
  .pv-medal{width:44px;height:44px}
  .pv-medal .ic{width:28px;height:28px}
  .hud-status{margin-top:4px;gap:4px}
  .st-chip{font-size:var(--t-micro);padding:1px 6px 1px 2px}
  .st-chip .ic{width:14px;height:14px}
  .boons{width:auto;flex-wrap:wrap;justify-content:flex-start;gap:6px;overflow:visible}
  .up-chip,.up-wpn{width:34px;height:34px;border-radius:10px}
  .up-chip .ic,.up-wpn .ic{width:22px;height:22px}
  .card .path-tag{grid-column:2;font-size:var(--t-label);padding:2px 8px 3px}
  .card .stats.note .pips i{width:11px;height:11px;border-width:2px}
  .tip{max-width:calc(100vw - 24px)}
  body.stats-open .hud-bottom{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){
  .stats-panel{animation:none}
  .card.r2::after{animation:none}
  .tip{transition:none;scale:1;translate:0 0}
}

/* ---------- the UI pass: one focus ring, bigger targets on touch (docs/ui-audit.md G9, H6, S5) ---------- */
/* every focusable the keyboard or a gamepad lands on gets the same blue ring as nav.css's buttons */
:is(.icon-btn,.up-chip,.up-wpn,.st-chip,.pv-close,.pv-medal,.medal[data-tip],.god-chip,.god-dot,.set-chip,.pv-set,.hud-life[data-tip]):focus-visible,
html.kbd-nav :is(.icon-btn,.up-chip,.up-wpn,.st-chip,.pv-close,.pv-medal,.god-chip,.god-dot,.set-chip,.pv-set):focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
@media (max-width:600px){
  /* the 34 px chips answer a finger 42 px wide (the 6 px gap leaves no overlap) */
  .up-chip::before,.up-wpn::before{content:"";position:absolute;inset:-4px}
}

/* ---------- the research pass: the tooltip's now → next table, keyword boxes, the god's fan, the phone sheet ---------- */
.tp-delta{margin:2px 0 0;display:grid;gap:3px;padding:6px 8px;border:2px solid var(--ink);border-radius:10px;background:#fffdf6}
.tp-delta div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline}
.tp-delta dt{font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.tp-delta dd{margin:0;display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui)}
.tp-delta s{color:var(--ink-3);text-decoration-thickness:2px}
.tp-delta i{font-style:normal;color:var(--ink-3)}
.tp-delta b{font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink)}
.tp-delta b.up{color:#2f7a1c}
.tp-delta b.down{color:var(--enemy)}
.tp-delta em{font-style:normal;font-size:var(--t-micro);margin-left:2px;vertical-align:1px}
/* phones: the tip is a bottom sheet (stats.js sheet), up to 60% of the screen, with a 44 px close button */
.tip.sheet{
  left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;max-height:60vh;display:flex;flex-direction:column;pointer-events:auto;
  padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 16px);gap:6px;border-width:var(--line) var(--line) 0;border-radius:22px 22px 0 0;
  box-shadow:inset 0 3px 0 #fff,0 -6px 0 rgba(42,26,46,.35);transform-origin:50% 100%;scale:1;translate:0 40px;
}
.tip.sheet.show{translate:0 0}
.tip.sheet::after{display:none}
.tip.sheet .tp-title{font-size:var(--t-btn);padding-right:50px}
.tip.sheet .tp-line{font-size:var(--t-body)}
.tp-close{
  all:unset;box-sizing:border-box;position:absolute;top:8px;right:10px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:var(--line-s) solid var(--ink);border-radius:50%;background:var(--paper);box-shadow:0 3px 0 var(--ink);font:400 var(--t-h)/1 var(--f-display);color:var(--ink);
}
@media (prefers-reduced-motion:reduce){ .tip.sheet{translate:0 0} }
/* a phone's sheet sits on the open side of its thing (stats.js placeSheet): at the top, its round edge down, or at the
   bottom, lifted over the screen's way on (Fight!) as a card of its own; a handle marks the edge a swipe closes it to */
.tip.sheet{z-index:calc(var(--z-modal) + 2)}   /* over the corner buttons (Back, sound): its own close button is in that corner */
.tip.sheet::before{content:"";position:absolute;left:50%;top:6px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--ink-3);opacity:.45}
.tip.sheet.top{border-width:0 var(--line) var(--line);border-radius:0 0 22px 22px;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 22px;
  box-shadow:inset 0 -3px 0 #fff,0 6px 0 rgba(42,26,46,.35);transform-origin:50% 0;translate:0 -40px}
.tip.sheet.top.show{translate:0 0}
.tip.sheet.top::before{top:auto;bottom:8px}
.tp-close{z-index:2}   /* over the words: their scroller (its fade, kit.css) is a layer of its own and took the taps */
.tip.sheet.top .tp-close{top:calc(env(safe-area-inset-top,0px) + 8px)}
.tip.sheet.lifted{left:8px;right:8px;border-width:var(--line);border-radius:22px;padding-bottom:16px;box-shadow:inset 0 3px 0 #fff,0 5px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){ .tip.sheet.top{translate:0 0} }
/* the tip's content sits in .tp-in so Settings > Text size can scale it (--tz, nav.css) without moving the tip */
.tp-in{display:grid;gap:4px;zoom:var(--tz,1)}
/* the content scrolls, never the tip's rounded box (the sheet's close button and keyword line stay put), with the fade's
   room above and below (kit.css) */
.tp-in{--fade:6px;margin-block:-6px;padding-block:6px}
/* 3 px of room at the left (the margin gives it back): a J's or a Y's arm reaches past the text's start, where the scroll
   box would cut it (Mike, 2026-10-25: "text should never be clipped"; tools/audit/text-clip.js) */
.tp-in{padding-left:3px;margin-left:-3px}
.tip.sheet .tp-in{gap:6px;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.tip{max-width:min(calc(320px * var(--tz,1)),calc(100vw - 16px))}
.tip.sheet{max-width:none}

/* ---------- the playtest fixes (2026-10-21): a tip you can move into, read and point inside; never bigger than a card ----------
   The owner: "I go to hover over the tooltip... because it's huge... when I hover over the tooltip, it disappears".
   Shown, the tip takes the pointer (stats.js keeps it open while the pointer is on it, with a 280 ms grace); an
   invisible bridge covers the gap to its thing, so the way in never crosses empty sand. At most 360 px wide (Text size
   scales it) and 440 px tall (and never taller than the room beside its thing, so it never covers it): a longer one scrolls inside. A god's powers are tabs (below). */
.tip{max-width:min(calc(360px * var(--tz,1)),calc(100vw - 16px))}
.tip.show{pointer-events:auto}
.tip:not(.sheet)::before{content:"";position:absolute;left:-10px;right:-10px;height:22px}
.tip:not(.sheet)[data-side="above"]::before{top:100%}
.tip:not(.sheet)[data-side="below"]::before{bottom:100%}
.tip:not(.sheet) .tp-in{max-height:calc(min(var(--room,540px) - 30px,440px * var(--big,1)) / (var(--tz,1) * var(--big,1)));overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
/* a god's powers as tabs (owner, 2026-10-25: "this should have a clearer hierarchy, like almost like tabs"): the god heads
   the tip, the tabs stand on the top edge of one panel, and the chosen power's tab is cut from the panel's paper, so the
   two read as one piece; the other powers sit back, quieter. A switch is one move: the tab slides over and the new text
   fades in; a switch from the keys has no motion */
.tp-fan{position:relative;z-index:1;display:flex;gap:4px;margin:4px 0 -6px;padding:0 8px}   /* down over the row gap (4 px) and the panel's top border */
.tip.sheet .tp-fan{margin-bottom:-8px}
.tp-tab{position:absolute;left:8px;bottom:0;width:46px;height:46px;box-sizing:border-box;border:2px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;
  background:#fffdf6;transform:translateX(calc(var(--on,0) * 50px));transition:transform .16s var(--out)}
.tp-fan>.tp-fi{all:unset;box-sizing:border-box;position:relative;flex:none;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;border-radius:12px 12px 0 0}
.tp-fd{width:34px;height:34px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:var(--line-xs) solid var(--ink);box-shadow:0 2px 0 var(--ink);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc) 30%,#fff) 0 30%,color-mix(in srgb,var(--gc) 70%,#fff) 80%)}
.tp-fd .ic{width:22px;height:22px}
.tp-fi .tp-fd{opacity:.5;filter:saturate(.4);scale:.86;transition:opacity .16s var(--out),filter .16s var(--out),scale .16s var(--out)}
.tp-fi.on .tp-fd{opacity:1;filter:none;scale:1}
@media (hover:hover) and (pointer:fine){ .tp-fi:not(.on):hover .tp-fd{opacity:.85;filter:none} }
.tp-fi:focus-visible{outline:var(--focus-ring);outline-offset:-3px}
.tp-fan.plain{gap:6px;margin:3px 0 1px;padding:0}
.tp-fan-d{display:grid;padding:7px 10px 8px;border:2px solid var(--ink);border-radius:10px;background:#fffdf6}
.tp-fan-d>span{grid-area:1/1;display:grid;gap:1px;align-content:start;visibility:hidden;opacity:0}
.tp-fan-d>span.on{visibility:visible;opacity:1;transition:opacity .14s var(--out)}
.tp-fan-d b{font:400 var(--t-name-s)/1.1 var(--f-display);color:var(--ink)}
.tp-fan-d small{font:var(--w-strong) var(--t-micro)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.tp-fan-d i{margin-top:2px;font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);font-style:normal;color:var(--ink);text-wrap:pretty}
html.kbd-nav :is(.tp-tab,.tp-fi .tp-fd,.tp-fan-d>span.on){transition:none}
@media (prefers-reduced-motion:reduce){ :is(.tp-tab,.tp-fi .tp-fd,.tp-fan-d>span.on){transition:none} }
/* big screens: the words grow with the rest of the UI (nav.css --big); the bubble is placed in screen pixels */
.tip{max-width:min(calc(360px * var(--tz,1) * var(--big,1)),calc(100vw - 16px))}
.tp-in{zoom:calc(var(--tz,1) * var(--big,1))}

/* ---------- a game word inside a tip (ui/stats.js render, kwAt): underlined in its colour; pointing at it opens its
   sentence in a small box under the tip (owner, 2026-10-21) ---------- */
.tp-kw{color:color-mix(in srgb,var(--tc) 70%,var(--ink));font-weight:var(--w-strong);text-decoration:underline dotted 2px;text-underline-offset:3px;cursor:default;border-radius:4px;outline:none}
.tp-kw.on{background:color-mix(in srgb,var(--tc) 18%,transparent)}
.tp-sub{position:absolute;left:10px;right:10px;top:calc(100% + 6px);display:grid;gap:2px;padding:7px 10px 8px 12px;
  background:var(--paper);border:var(--line-2,2px) solid var(--ink);border-left:5px solid var(--tc);border-radius:10px;box-shadow:0 3px 0 var(--ink);
  font:var(--w-body) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-2);animation:tp-sub-in .14s var(--out)}
.tp-sub[hidden]{display:none}
/* the explainer opens on the far side of the tip from its thing (owner, 2026-10-22: "hover states on unlocked god tooltips
   have wrong zindex": under a tip above its thing it covered the thing and slid under the tip's arrow). stats.js adds .up
   when the screen has room above; below, it stacks over the arrow */
.tp-sub{z-index:2}
.tp-sub.up{top:auto;bottom:calc(100% + 6px);animation-name:tp-sub-up}
@keyframes tp-sub-up{from{opacity:0;translate:0 3px}}
.tp-sub b{font:400 var(--t-name-s)/1 var(--f-display);color:color-mix(in srgb,var(--tc) 72%,var(--ink))}
@keyframes tp-sub-in{from{opacity:0;translate:0 -3px}}
.tip.sheet .tp-sub{position:static;margin-top:6px}
/* beside a side panel (stats.js BESIDE: the new-fighter card, the Stats panel, the pause menu's build, the Armory's
   column): left or right of the panel, the arrow at the thing it explains; as tall as the screen allows (--room is the
   screen's height), so a long tip fits without scrolling */
.tip:is([data-side="left"],[data-side="right"]){translate:4px 0;transform-origin:100% var(--ay,50%)}
.tip[data-side="right"]{translate:-4px 0;transform-origin:0 var(--ay,50%)}
.tip.show:is([data-side="left"],[data-side="right"]){translate:0 0}
.tip[data-side="left"]::after{left:auto;right:-9px;bottom:auto;top:var(--ay,50%);transform:translateY(-50%) rotate(-45deg)}
.tip[data-side="right"]::after{left:-9px;bottom:auto;top:var(--ay,50%);transform:translateY(-50%) rotate(135deg)}
/* the arrow's fill is the paper's colour where it sits (--g-paper: #fffaf0, #fff6e4 at 55%, #f3e3c2), so it reads as a notch */
.tip:is([data-side="left"],[data-side="right"])::after{background:color-mix(in srgb,#f3e3c2 calc(clamp(0,(var(--af,.5) - .55) / .45,1) * 100%),color-mix(in srgb,#fff6e4 calc(clamp(0,var(--af,.5) / .55,1) * 100%),#fffaf0))}
.tip:not(.sheet):is([data-side="left"],[data-side="right"]) .tp-in{max-height:calc((var(--room,540px) - 30px) / (var(--tz,1) * var(--big,1)))}
@media (prefers-reduced-motion:reduce){ .tp-sub{animation:none} }
/* the pointer comes in from the panel's side: the bridge spans that gap, never the tip's own first line */
.tip:not(.sheet):is([data-side="left"],[data-side="right"])::before{top:0;bottom:0;width:44px;height:auto}
.tip:not(.sheet)[data-side="left"]::before{left:100%;right:auto}
.tip:not(.sheet)[data-side="right"]::before{left:auto;right:100%}

/* ---------- the damage breakdown (ui/damage.js): this life's damage by source, in the Stats panel (Damage dealt, after
   the powers) and on the death and victory screens (.dd). One colour, the damage stat's red (draft.css: damage red,
   health green, coins gold): each bar is the source's share of all your damage, the number is its damage, the row's tip
   says the share and the hits. The rows share one grid (subgrid), so names, bars and numbers line up ---------- */
.dmg-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:18px fit-content(52%) minmax(40px,1fr) auto;column-gap:9px;row-gap:1px}
.dmg-row{grid-column:1/-1;display:grid;grid-template-columns:18px fit-content(52%) minmax(40px,1fr) auto;grid-template-columns:subgrid;column-gap:inherit;align-items:center;padding:5px 6px;border-radius:10px;cursor:default;outline:none;transition:background-color .12s var(--out)}
.dmg-row .ic{width:18px;height:18px}
.dmg-name{min-width:0;font:var(--w-strong) var(--t-body)/1.15 var(--f-ui);color:var(--ink-2);overflow-wrap:anywhere}
.dmg-bar{position:relative;height:6px;overflow:hidden;border-radius:999px;background:rgba(42,26,46,.09)}
.dmg-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--enemy)}
.dmg-n{font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
/* Other: the rest, summed, in the panel's quiet ink */
.dmg-row.rest .dmg-name{color:var(--ink-3)}
.dmg-row.rest .dmg-bar>i{background:rgba(42,26,46,.3)}
.dmg-row:is(:hover,:focus-visible){background:rgba(42,26,46,.06)}
html.kbd-nav .dmg-row:focus{background:rgba(42,26,46,.06);box-shadow:inset 0 0 0 2px var(--focus,#3a7bd5)}
/* the death and victory screens: the top three in the screen's sticker look (the best-round bar's ink pill, its gradient
   in red), then the biggest hit and the final blow (or what hurt you most) as lines like "Your best" under them */
.dd{display:grid;gap:8px}
.dd:empty{display:none}
.dd-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.dd-h b{font:400 var(--t-name-s)/1 var(--f-display);letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}
.dd .dmg-list{grid-template-columns:22px fit-content(50%) minmax(48px,1fr) auto;column-gap:10px;row-gap:5px}
.dd .dmg-row{padding:0}
.dd .dmg-row .ic{width:22px;height:22px}
.dd .dmg-name{font:400 var(--t-name-s)/1.1 var(--f-display);color:var(--ink)}
.dd .dmg-bar{height:9px;border:2px solid var(--ink);background:var(--paper-2)}
.dd .dmg-bar>i{background:var(--g-red)}
.dd .dmg-n{font-size:var(--t-name)}
.dd-fact{margin:0;display:flex;align-items:center;gap:8px;min-width:0;font:var(--w-strong) var(--t-body)/1.3 var(--f-ui);color:var(--ink-2)}
.dd-fact .ic{flex:none;width:22px;height:22px}
.dd-fact b{font-weight:var(--w-strong);color:var(--ink)}
/* the death screen on a wide screen: a card of its own under the stone, so the record beside it keeps its height (a 768 px
   laptop still shows Play again); a name and its number over a bar the card's width. Phones keep it inside the record. */
#death-dmg-side{display:none}
@media (min-width:721px) and (min-aspect-ratio:801/1000){
  /* the record on the left, the stone and the damage on the right, as the pause menu (owner, 2026-10-25: "this too") */
  .death-wrap{grid-template-columns:minmax(0,440px) 300px;grid-template-areas:"side stele" "side dmg"}
  .death-wrap>.stele{grid-area:stele;align-self:end;justify-self:center;width:250px}
  .death-wrap>.death-side{grid-area:side}
  #death-dmg-side{display:grid;grid-area:dmg;align-self:start;padding:14px 16px 16px}
  #death-dmg-side:empty,#death-dmg{display:none}
  #death-dmg-side .dmg-list{grid-template-columns:20px minmax(0,1fr) auto;row-gap:10px}
  #death-dmg-side .dmg-row{grid-template-rows:auto auto;row-gap:5px}
  #death-dmg-side .dmg-row>:is(.ic,.dmg-name,.dmg-n){grid-row:1}
  #death-dmg-side .dmg-bar{grid-row:2;grid-column:2/-1}
  #death-dmg-side .dmg-row .ic{width:20px;height:20px}
  #death-dmg-side .dd-fact{align-items:flex-start;font-size:var(--t-caption);text-wrap:pretty}
  #death-dmg-side .dd-fact .ic{width:20px;height:20px}
}
/* the death beats: the block comes in after the medals, each bar growing from its start */
#scr-death.seq .dd{animation:seq-in .3s var(--pop) .9s backwards}
#scr-death.seq .dd .dmg-bar>i{animation:dd-grow .42s var(--out) 1.05s backwards}
#scr-death.seq .dd .dmg-row:nth-child(2) .dmg-bar>i{animation-delay:1.11s}
#scr-death.seq .dd .dmg-row:nth-child(3) .dmg-bar>i{animation-delay:1.17s}
#scr-death.seq-done :is(.dd,.dd .dmg-bar>i){animation:none}
@keyframes dd-grow{from{clip-path:inset(0 100% 0 0)}}
@media (max-width:720px),(max-aspect-ratio:4/5){
  .dd{gap:6px}
  .dd .dmg-list{grid-template-columns:18px fit-content(48%) minmax(40px,1fr) auto;column-gap:8px;row-gap:4px}
  .dd .dmg-row .ic{width:18px;height:18px}
  .dd .dmg-n{font-size:var(--t-name-s)}
  .dd-fact{font-size:var(--t-caption);gap:6px}
  .dd-fact .ic{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){ .dmg-row{transition:none} #scr-death .dd,#scr-death .dd .dmg-bar>i{animation:none} }