/* ==========================================================================
   The long-term layer: the Training Grounds (talent tree, weapon forms, challenges, the Emperor's Rules), the
   trinket pop-up, the new-fighter card's form and rules row, the HUD's form and trinket chips, Medals
   owner: the long-term layer (src/meta.js, src/trinkets.js, src/challenges.js; ui/training.js, ui/challenges.js,
   ui/trinket.js). Loaded last. The KayKit kit: paper panels, 3-4 px ink lines, hard offset drops, Lilita for names.
   ========================================================================== */
:root{
  --medal:#eac254; --medal-ink:#98500a;
  --b-str:#d2683f; --b-grit:#6fae3c; --b-fort:#db8720;
}

/* ---------- Medals: a chip beside the coins, a cell on the death and victory screens, the pop ---------- */
.medal-chip b{color:#f7d86a}
.medal-chip .ic{width:30px;height:30px}
.death-stats:has(> .dth-medal){grid-template-columns:repeat(4,minmax(0,1fr))}
.death-stats .dth-medal dd.gold{color:#f7d86a}
.pop.medalpop{color:#f7d86a;font-size:20px}
.pop.trinket{font-size:19px}

/* ---------- the Training Grounds ---------- */
#scr-training{background:linear-gradient(180deg,rgba(236,208,156,.96),rgba(214,170,112,.98))}
#scr-training .screen-inner{max-width:var(--menu-col,1180px);margin:0 auto}
.tg-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 18px;margin:0 0 14px}
.tg-title{display:grid;gap:4px}
.tg-title h2{margin:4px 0 0;font:400 clamp(34px,3.6vw,48px)/1 var(--f-display);color:#fff;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}
.tg-purse{display:flex;flex-wrap:wrap;gap:10px}
.tg-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.tg-tab.shut{color:var(--ink-3)}
.tg-tab.shut .ic{opacity:.7}
.tg-body{min-height:200px}
.tg-intro,.tg-hint{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:var(--w-strong) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.tg-intro .ic,.tg-hint .ic{width:28px;height:28px;flex:none}
.tg-hint{margin:12px 0 0;font-size:var(--t-body);color:var(--ink-3)}
.tg-pips{display:inline-flex;gap:3px}
.tg-pips i{width:9px;height:9px;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
.tg-pips i.on{background:#eac254}
.tg-price{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:3px 9px 3px 4px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);
  font:400 var(--t-name)/1 var(--f-display);color:var(--gold-ink);-webkit-text-stroke:0}
.tg-price .ic{width:20px;height:20px}
.tg-price.short{color:var(--enemy)}
.tg-bar{position:relative;display:block;height:10px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper-2);overflow:hidden}
.tg-bar>i{position:absolute;inset:0 auto 0 0;background:var(--g-gold)}
/* a door that is still closed: its tab shows what opens it */
.tg-locked{display:grid;justify-items:center;gap:8px;max-width:520px;margin:20px auto;padding:26px 26px 22px;text-align:center}
.tg-locked h3{margin:4px 0 0;font:400 var(--t-btn-l)/1 var(--f-display)}
.tg-locked p{margin:0;font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.tg-locked .tg-need{color:var(--ink)}
.tg-locked .tg-bar{width:min(320px,100%)}
.tg-locked small{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3)}
.tg-lic{position:relative;display:grid;place-items:center;width:84px;height:84px;border:var(--line) solid var(--ink);border-radius:50%;background:var(--paper-2);box-shadow:var(--drop-s)}
.tg-lic>.ic{width:52px;height:52px;filter:brightness(0);opacity:.3}
.tg-lic>i{position:absolute;right:-8px;bottom:-6px}
.tg-lic>i .ic{width:34px;height:34px}

/* ---------- the talent tree: three lanes, each from its first talent to its keystone ---------- */
.shop-grid[data-tree]{display:block}
.sh-tree{display:flex;align-items:center;gap:10px;margin:0 0 14px!important}
.sh-tree .ic{width:30px;height:30px;flex:none}
.sh-tree .sh-tg{min-height:38px;padding:0 14px;font-size:var(--t-name-s);margin-left:8px}
.tt{display:grid;gap:14px}
.tt-btabs{display:none}
.tt-lanes{display:grid;gap:10px}
.tt-lane{
  --bc:var(--b-str);position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:12px;padding:8px 14px 6px 10px;
  border:var(--line-s) solid var(--ink);border-radius:var(--r-panel);background:var(--g-paper);box-shadow:inset 0 2px 0 #fff,var(--drop-s);
}
.tt-lane::before{content:"";position:absolute;inset:0 auto 0 0;width:12px;border-radius:15px 0 0 15px;background:var(--bc);border-right:var(--line-s) solid var(--ink)}
.tt-bh{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;padding-left:12px}
.tt-bic{display:grid;place-items:center;width:44px;height:44px;border:var(--line-s) solid var(--ink);border-radius:50%;background:var(--bc);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 3px 0 var(--ink)}
.tt-bic .ic{width:28px;height:28px}
.tt-bt{display:grid;gap:2px;min-width:0}
.tt-bt b{font:400 var(--t-btn)/1 var(--f-display)}
.tt-bt small{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3)}
.tt-bn{grid-column:2;justify-self:start;padding:2px 8px 3px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink-2)}
.tt-nodes{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
/* the branch's line, behind the medallions */
.tt-nodes::before{content:"";position:absolute;left:5%;right:5%;top:31px;height:8px;border:2.5px solid var(--ink);border-radius:999px;background:color-mix(in srgb,var(--bc) 45%,var(--paper-2))}
.tt-nodes>li{position:relative;display:grid;justify-items:center}
.tt-nodes .sh-new{top:-12px;right:auto;left:50%;transform:translateX(-10%) rotate(4deg);font-size:var(--t-tag)}
.tt-node{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;justify-items:center;gap:4px;width:100%;padding:2px 0 0;
  -webkit-tap-highlight-color:transparent;
}
.tt-medal{
  position:relative;display:grid;place-items:center;width:62px;height:62px;border:var(--line-s) solid var(--ink);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.8) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(180deg,#fffaf0,color-mix(in srgb,var(--bc) 30%,#f3ddb4));
  box-shadow:inset 0 3px 0 #fff,0 4px 0 var(--ink);transition:transform .2s var(--pop),box-shadow .2s var(--pop);
}
.tt-medal .ic{width:36px;height:36px}
.tt-name{max-width:100%;font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);color:var(--ink-2);text-align:center;overflow-wrap:anywhere}
.tt-pips{margin-top:-1px}
.tt-pips i{width:7px;height:7px;border-width:1.8px}
.tt-swap{position:absolute;top:-2px;right:calc(50% - 38px);display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);
  font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink-2);box-shadow:0 2px 0 var(--ink)}
.tt-swap.alt{background:var(--g-blue);color:#fff}
.tt-keyw{display:inline-flex;align-items:center;gap:2px;font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--medal-ink)}
.tt-keyw .ic{width:15px;height:15px}
/* states: some ranks (the branch's colour fills in), maxed (a gold laurel rim), locked (a dark silhouette), affordable
   (a slow shimmer: the one thing you can do), selected (lifted, a blue ring) */
.tt-node.some .tt-medal{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.8) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(180deg,color-mix(in srgb,var(--bc) 40%,#fff),var(--bc))}
.tt-node.max .tt-medal{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.8) 0 14%,rgba(255,255,255,0) 15%),var(--g-gold);box-shadow:inset 0 0 0 3px #fff6c0,inset 0 3px 0 #fff,0 4px 0 var(--ink)}
.tt-node.max .tt-name{color:var(--gold-ink)}
.tt-node.locked .tt-medal{background:linear-gradient(180deg,#d9cbb6,#b9a78f)}
.tt-node.locked .tt-medal .ic{width:28px;height:28px;opacity:.75}
.tt-node.locked .tt-name{color:var(--ink-3)}
.tt-node.key .tt-medal{width:62px;height:62px;border-radius:20px;transform:rotate(45deg)}
.tt-node.key .tt-medal .ic{transform:rotate(-45deg);width:36px;height:36px}
.tt-node.key .tt-keyw,.tt-node.key .tt-name{margin-top:6px}
.tt-node.can .tt-medal::after{content:"";position:absolute;inset:-7px;border:3px solid #f7d86a;border-radius:inherit;opacity:0;animation:ttCan 2.6s ease-out infinite}
@keyframes ttCan{0%{opacity:0;transform:scale(.9)}25%{opacity:.95}70%,100%{opacity:0;transform:scale(1.12)}}
.tt-node.sel .tt-medal{transform:translateY(-4px);box-shadow:inset 0 3px 0 #fff,0 8px 0 var(--ink),0 0 0 4px var(--player-hi)}
.tt-node.key.sel .tt-medal{transform:translateY(-4px) rotate(45deg)}
.tt-node.sel .tt-name{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .tt-node:hover .tt-medal{transform:translateY(-3px)} .tt-node.key:hover .tt-medal{transform:translateY(-3px) rotate(45deg)} }
.tt-node:focus-visible{outline:none}
.tt-node:focus-visible .tt-medal{box-shadow:inset 0 3px 0 #fff,0 4px 0 var(--ink),0 0 0 4px var(--player-hi)}
.tt-node.just .tt-medal{animation:ttJust .5s var(--pop)}
.tt-node.nope .tt-medal{animation:ttNope .35s ease-out}
.tt-node.goal .tt-medal{animation:ttJust .6s var(--pop) 2}
@keyframes ttJust{30%{transform:translateY(-6px) scale(1.18)}}
@keyframes ttNope{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
/* the selected talent: both versions, now and next, Learn */
/* the strip stays in view at the bottom of the screen while the tree scrolls (the Shop's tab too) */
.tt-info{position:sticky;bottom:-24px;z-index:2;min-height:110px;padding-bottom:18px;margin-bottom:-18px}
.tt-info:empty{display:none}
.tt-card{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 18px;
  border:var(--line) solid var(--ink);border-radius:var(--r-panel);background:var(--g-paper);box-shadow:inset 0 3px 0 #fff,var(--drop);
}
.tt-big{position:relative;display:grid;place-items:center;width:84px;height:84px;border:var(--line) solid var(--ink);border-radius:50%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bc,#d9a548) 35%,#fff),var(--bc,#d9a548));box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 5px 0 var(--ink)}
.tt-big .ic{width:52px;height:52px}
.tt-big.locked{background:linear-gradient(180deg,#e2d5c1,#bba98f)}
.tt-big.locked .ic{filter:brightness(0);opacity:.35}
.tt-big.max{background:var(--g-gold)}
.tt-big.key{border-radius:24px}
.tt-main{display:grid;gap:5px;min-width:0}
.tt-kick{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.tt-title{font:400 var(--t-btn-l)/1 var(--f-display);color:var(--ink)}
.tt-sub{font:var(--w-strong) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.tt-now,.tt-next{font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.tt-now b,.tt-next b{color:var(--ink)}
.tt-next b{color:var(--laurel-lo)}
.tt-note{font:var(--w-body) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-3)}
.tt-vers{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tt-or{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3);text-transform:uppercase}
.tt-ver{
  all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 6px;
  border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:0 3px 0 var(--ink);font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink-2);
  transition:transform .12s var(--out)
}
.tt-ver .ic{width:24px;height:24px}
.tt-ver.on{background:var(--g-blue);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.tt-ver:focus-visible{outline:4px solid var(--player-hi);outline-offset:2px}
.tt-act{display:grid;gap:8px;justify-items:end}
.tt-learn{min-height:52px;padding:0 10px 0 22px;font-size:var(--t-btn);white-space:nowrap}
.tt-learn.short{filter:saturate(.6);cursor:not-allowed}
.tt-done,.tt-lock{display:inline-flex;align-items:center;gap:6px;max-width:260px;font:var(--w-strong) var(--t-body)/1.3 var(--f-ui);color:var(--ink-2)}
.tt-done{font:400 var(--t-btn)/1 var(--f-display);color:var(--gold-ink)}
.tt-done .ic,.tt-lock .ic{width:26px;height:26px;flex:none}

/* ---------- weapon forms ---------- */
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px 12px;margin-bottom:14px}
.fm-w{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px 8px 8px;border:var(--line-s) solid var(--ink);border-radius:16px;
  background:var(--g-paper);box-shadow:inset 0 2px 0 #fff,var(--drop-s)}
.fm-w.shut{opacity:.6}
.fm-wic{display:grid;place-items:center;width:46px;height:46px;border:var(--line-s) solid var(--ink);border-radius:12px;background:var(--paper-2)}
.fm-wic .ic{width:32px;height:32px}
.fm-w.shut .fm-wic .ic{filter:brightness(0);opacity:.35}
.fm-wn{display:grid;gap:2px;min-width:0}
.fm-wn b{font:400 var(--t-name)/1.05 var(--f-display)}
.fm-wn small{font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink-3)}
.fm-slots{display:flex;gap:6px}
.fm-slot{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;justify-items:center;align-content:center;gap:3px;width:52px;height:52px;
  border:var(--line-s) solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:0 3px 0 var(--ink);transition:transform .2s var(--pop)
}
.fm-rom{font:400 var(--t-name)/1 var(--f-display);color:var(--ink)}
.fm-cost{display:inline-flex;align-items:center;gap:1px;font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--medal-ink)}
.fm-cost .ic{width:15px;height:15px}
.fm-cost.lk{color:var(--ink-3)}
.fm-pips{gap:2px}
.fm-pips i{width:6px;height:6px;border-width:1.6px}
.fm-slot.locked{background:linear-gradient(180deg,#e2d5c1,#c9b89f)}
.fm-slot.locked .fm-rom{color:var(--ink-3)}
.fm-slot.open{background:linear-gradient(180deg,#fff6c0,#f3d78a)}
.fm-slot.some{background:linear-gradient(180deg,#e9d7ff,#c99be0)}
.fm-slot.max{background:var(--g-gold)}
.fm-slot.can::after{content:"";position:absolute;inset:-6px;border:3px solid #f7d86a;border-radius:18px;opacity:0;animation:ttCan 2.6s ease-out infinite}
.fm-slot.sel{transform:translateY(-3px);box-shadow:0 6px 0 var(--ink),0 0 0 4px var(--player-hi)}
.fm-slot:focus-visible{outline:none;box-shadow:0 3px 0 var(--ink),0 0 0 4px var(--player-hi)}
.fm-slot.just{animation:ttJust .5s var(--pop)}
.fm-slot.nope{animation:ttNope .35s ease-out}
.fm-worn{position:absolute;top:-9px;right:-8px}
.fm-worn .ic{width:20px;height:20px}
.fm-big{border-radius:22px;background:linear-gradient(180deg,#f3e6ff,#c99be0)}
.fm-big.locked{background:linear-gradient(180deg,#e2d5c1,#bba98f)}
.fm-big .fm-rom{position:absolute;right:-10px;bottom:-8px;display:grid;place-items:center;min-width:34px;height:30px;padding:0 6px;border:2.5px solid var(--ink);border-radius:10px;background:var(--g-gold);
  color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;font-size:var(--t-name)}
.fm-wear{min-height:42px;font-size:var(--t-name);padding:0 16px}
.fm-wear.on{background:var(--g-gold);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.fm-wear .ic{width:22px;height:22px}

/* ---------- challenges ---------- */
.ch-sum{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:14px;margin:0 0 14px;padding:10px 16px;border:var(--line-s) solid var(--ink);border-radius:999px;
  background:var(--g-paper);box-shadow:var(--drop-s);font:var(--w-strong) var(--t-lead)/1 var(--f-ui);color:var(--ink-2)}
.ch-sum b{font:400 var(--t-btn)/1 var(--f-display);color:var(--ink)}
.ch-sbar{position:relative;height:12px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper-2);overflow:hidden}
.ch-sbar>i{position:absolute;inset:0 auto 0 0;background:var(--g-gold)}
.ch-paid{display:inline-flex;align-items:center;gap:5px}
.ch-paid .ic{width:24px;height:24px}
.ch-gs{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;align-items:start}
.ch-g{padding:10px 12px 12px}
.ch-gh{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.ch-gh .ic{width:28px;height:28px}
.ch-gh h3{margin:0;font:400 var(--t-btn)/1 var(--f-display)}
.ch-rows{display:grid;gap:6px}
.ch-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 8px;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);outline:none}
.ch-row:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.ch-ic .ic{width:30px;height:30px}
.ch-main{display:grid;gap:4px;min-width:0}
.ch-name{font:var(--w-strong) var(--t-body)/1.2 var(--f-ui);color:var(--ink)}
.ch-steps{display:flex;gap:3px}
.ch-steps i{width:14px;height:5px;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper-2)}
.ch-steps i.on{background:#eac254;border-color:var(--ink)}
.ch-bar{position:relative;display:block;height:9px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);overflow:hidden}
.ch-bar>i{position:absolute;inset:0 auto 0 0;background:var(--g-laurel)}
.ch-num{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ch-num .ic{width:18px;height:18px;vertical-align:-4px}
.ch-pay{display:inline-flex;align-items:center;gap:2px;padding:3px 8px 3px 3px;border:2.5px solid var(--ink);border-radius:999px;background:var(--g-gold);
  font:400 var(--t-name-s)/1 var(--f-display);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.ch-pay .ic{width:20px;height:20px}
.ch-pay.paid{background:var(--paper-2);color:var(--ink-3);-webkit-text-stroke:0}
.ch-row.done{background:linear-gradient(180deg,#f4fbe9,#dcefc6)}
.ch-row.done .ch-bar>i{background:var(--g-gold)}
.ch-row.close{box-shadow:0 0 0 3px #f7d86a}

/* ---------- the Emperor's Rules ---------- */
.ru{display:grid;gap:14px}
.ru-heat{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px 18px;padding:12px 20px}
.ru-heat.hot{background:linear-gradient(180deg,#fff1dc,#f6c98e);box-shadow:inset 0 0 0 3px #ffd0a0,inset 0 3px 0 #fff,var(--drop)}
.ru-flame{position:relative;display:grid;place-items:center;width:72px;height:72px}
.ru-flame .ic{width:72px;height:72px}
.ru-flame b{position:absolute;bottom:2px;font:400 var(--t-btn-l)/1 var(--f-display);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
.ru-heat.hot .ru-flame .ic{animation:ruFlicker 1.8s ease-in-out infinite}
@keyframes ruFlicker{50%{transform:scale(1.06) rotate(-3deg)}}
.ru-ht{display:grid;gap:3px}
.ru-ht b{font:400 var(--t-btn-l)/1 var(--f-display)}
.ru-ht small{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3);text-transform:uppercase;letter-spacing:var(--ls-caps)}
.ru-rw{display:flex;flex-wrap:wrap;gap:8px}
.ru-rw span{display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 5px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);font:var(--w-strong) var(--t-body)/1 var(--f-ui)}
.ru-rw .ic{width:22px;height:22px}
.ru-best{display:grid;gap:4px;justify-items:end;font:var(--w-strong) var(--t-body)/1.2 var(--f-ui);color:var(--ink-2)}
.ru-best>span{display:inline-flex;align-items:center;gap:6px}
.ru-best b{font:400 var(--t-btn)/1 var(--f-display);color:var(--ink)}
.ru-best .ic{width:24px;height:24px}
.ru-best em{font-style:normal;color:var(--laurel-lo)}
.ru-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ru-card{
  position:relative;display:grid;box-sizing:border-box;min-height:118px;border:var(--line-s) solid var(--ink);border-radius:16px;background:var(--g-paper);box-shadow:inset 0 2px 0 #fff,var(--drop-s);
  transition:transform .2s var(--pop),box-shadow .2s var(--pop)
}
.ru-main{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:10px;row-gap:4px;padding:10px 12px 12px;border-radius:14px}
.ru-state{grid-column:2;display:flex;align-items:center;gap:8px;min-height:30px;padding-right:34px}
/* the − button: turn a ranked rule down without a right-click (phones) */
.ru-minus{position:absolute;right:9px;bottom:9px;width:30px;height:30px;display:grid;place-items:center;padding:0 0 3px;box-sizing:border-box;border:2.5px solid var(--ink);border-radius:50%;
  background:var(--paper);box-shadow:0 2px 0 var(--ink);font:400 var(--t-name)/1 var(--f-display);color:var(--ink);cursor:pointer;transition:transform .12s var(--out)}
.ru-minus:active{transform:scale(.92)}
.ru-minus:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.ru-card.nope{animation:ttNope .35s ease-out}
.ru-ic{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border:2.5px solid var(--ink);border-radius:50%;background:var(--paper-2)}
.ru-ic .ic{width:26px;height:26px}
.ru-name{font:400 var(--t-name)/1.05 var(--f-display)}
.ru-line{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.ru-onoff{white-space:nowrap;padding:2px 9px 3px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink-3);text-transform:uppercase}
.ru-heatb{position:absolute;top:-10px;right:10px;display:inline-flex;align-items:center;gap:2px;padding:2px 8px 3px;border:2.5px solid var(--ink);border-radius:8px;background:var(--g-terracotta);
  font:400 var(--t-name-s)/1 var(--f-display);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;transform:rotate(3deg)}
.ru-card.on{background:linear-gradient(180deg,#ffe2c8,#f2a477);box-shadow:inset 0 2px 0 #fff,var(--drop-s)}
.ru-card.on .ru-ic{background:var(--g-terracotta)}
.ru-card.on .ru-onoff{background:var(--g-terracotta);color:#fff}
.ru-card.on .tg-pips i.on{background:var(--g-red)}
.ru-card.just{animation:ttJust .45s var(--pop)}
.ru-main:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
@media (hover:hover) and (pointer:fine){ .ru-card:not(.on):hover{transform:translateY(-2px)} }
.ru-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-3)}
.ru-clear{min-height:38px;font-size:var(--t-name-s);padding:0 14px}

/* ---------- the new-fighter card: the weapon form for this life; the favourite trinket and the heat ---------- */
/* under the hero's name on the stage: the favourite trinket and the heat */
/* no extra row: the form's chips sit in the weapon's header line, to the right of its name, and the form's plain line takes
   the weapon's (#rbw-desc hides while the forms show) */
#scr-rebirth #rb-weapons:has(#rb-forms:not([hidden])){grid-template-columns:auto minmax(0,1fr);align-items:center}
#rb-weapons:has(#rb-forms:not([hidden])) > .rbw-head{grid-column:1;grid-row:1}
#rb-weapons:has(#rb-forms:not([hidden])) > .rbw-row{grid-column:1/-1;grid-row:2}
#rb-weapons:has(#rb-forms:not([hidden])) > #rbw-desc{display:none}
.rb-forms{display:contents}
.fc-row{grid-column:2;grid-row:1;justify-self:end;display:flex;flex-wrap:nowrap;align-items:center;gap:5px}
.fc-row .rbw-label{margin-right:2px;display:inline!important}
.fc-line{grid-column:1/-1;grid-row:3}
.fc{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:38px;height:36px;padding:0 6px;
  border:var(--line-s) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:0 3px 0 var(--ink);transition:transform .2s var(--pop)
}
.fc b{font:400 var(--t-name-s)/1 var(--f-display)}
.fc .ic{width:24px;height:24px}
.fc-pips{display:inline-flex;gap:2px}
.fc-pips i{width:5px;height:5px;border:1.5px solid var(--ink);border-radius:50%;background:var(--paper)}
.fc-pips i.on{background:#eac254}
.fc-cost{display:inline-flex;align-items:center;font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--medal-ink)}
.fc-cost .ic{width:16px;height:16px}
.fc.owned{background:linear-gradient(180deg,#f3e6ff,#d7b3ec)}
.fc.buy{background:linear-gradient(180deg,#fff6c0,#f3d78a)}
.fc.locked{cursor:default;background:linear-gradient(180deg,#e9dcc7,#d0bfa4);color:var(--ink-3)}
.fc.locked .fc-cost{color:var(--ink-3)}
.fc.on{background:var(--g-gold);box-shadow:var(--ring-pick),0 3px 0 var(--ink)}
.fc.on b{color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.fc.just{animation:ttJust .45s var(--pop)}
.fc:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.fc-line{margin:0;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.fc-line b{font-weight:var(--w-strong);color:var(--ink)}
.rb-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;pointer-events:auto}
.rbm-chip{
  all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:3px 12px 3px 5px;border:var(--line-s) solid var(--ink);border-radius:999px;
  background:var(--g-paper);box-shadow:0 3px 0 var(--ink);max-width:100%
}
.rbm-chip .ic{width:30px;height:30px;flex:none}
.rbm-chip span{display:grid;gap:1px;min-width:0}
.rbm-chip small{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.rbm-chip b{font:400 var(--t-name-s)/1.05 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbm-chip.trk.r1{box-shadow:inset 0 0 0 3px var(--r2),0 3px 0 var(--ink)}
.rbm-chip.trk.r2{box-shadow:inset 0 0 0 3px var(--r-epic,#a052a0),0 3px 0 var(--ink)}
.rbm-chip.trk.r3{box-shadow:inset 0 0 0 3px var(--r3),0 3px 0 var(--ink);background:linear-gradient(180deg,#fffbe0,#f6e0a0)}
.rbm-chip.heat.hot{background:linear-gradient(180deg,#ffe2c8,#f2a477)}
.rbm-chip:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}


/* ---------- the HUD: the form's chip and the trinkets' ---------- */
.up-chip.form{background:linear-gradient(180deg,#f3e6ff,#d7b3ec)}
.up-chip.trk.fav .up-badge{background:var(--g-gold)}

/* ---------- the trinket pop-up: found against worn ---------- */
.loot-screen{z-index:40;background:radial-gradient(ellipse at 50% 45%,rgba(42,26,46,.35),rgba(42,26,46,.62))}
.loot-screen .screen-inner{display:grid;place-items:center}
.loot-in{position:relative;display:grid;justify-items:center;gap:14px;width:min(720px,100%);margin-inline:auto;padding:30px 24px 20px;animation:lootIn .4s var(--pop) backwards}
@keyframes lootIn{from{transform:translateY(24px) scale(.94);opacity:0}}
.loot-rib{position:absolute;top:-18px;left:0;right:0;margin:0 auto!important;width:max-content;transform:none}
.loot-title{margin:4px 0 0;font:400 clamp(24px,2.6vw,32px)/1.05 var(--f-display);text-align:center;text-wrap:balance}
.loot-cards{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:12px;width:100%}
.loot-vs{align-self:center;font:400 var(--t-btn)/1 var(--f-display);color:var(--ink-3)}
.tk-card{
  --rc:var(--r1);position:relative;display:grid;justify-items:center;align-content:start;gap:6px;padding:20px 14px 14px;border:var(--line) solid var(--ink);border-radius:var(--r-panel);
  background:var(--g-paper);box-shadow:inset 0 0 0 4px var(--rc),inset 0 6px 0 rgba(255,255,255,.6),var(--drop);text-align:center
}
.tk-card.r1{--rc:var(--r2)} .tk-card.r2{--rc:var(--r-epic,#a052a0)} .tk-card.r3{--rc:var(--r3);background:linear-gradient(180deg,#fffbe6,#f7e2a6)}
.tk-card.worn{opacity:.92}
.tk-card.empty{border-style:dashed;box-shadow:inset 0 3px 0 #fff,var(--drop-s)}
.tk-rib{position:absolute;top:-14px;right:8px;font-size:var(--t-tag);margin:0}
.tk-card.r1 .tk-rib{--rb:var(--g-blue)} .tk-card.r2 .tk-rib{--rb:var(--g-imperial)} .tk-card.r3 .tk-rib{--rb:var(--g-gold)}
.tk-kick{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.tk-art{display:grid;place-items:center;width:88px;height:88px;border:var(--line-s) solid var(--ink);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(180deg,#fff,color-mix(in srgb,var(--gem,var(--rc)) 40%,#f3ddb4));box-shadow:0 4px 0 var(--ink)}
.tk-art .ic{width:60px;height:60px}
.tk-card.new .tk-art{animation:tkGlint 2.4s ease-in-out infinite}
@keyframes tkGlint{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg) scale(1.04)}}
.tk-card.empty .tk-art .ic{filter:brightness(0);opacity:.25}
.tk-name{font:400 var(--t-btn)/1.05 var(--f-display)}
.tk-rar{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3)}
.tk-empty{margin:0;font:var(--w-body) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-3)}
.tk-stats{display:grid;gap:4px;width:100%;margin:4px 0 0;padding:0;list-style:none}
.tk-stats li{display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 8px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font:var(--w-strong) var(--t-body)/1.2 var(--f-ui)}
/* a trinket's main stat (its gem's: src/trinkets.js gemOf, the card's --gem) and its effect (Rare up), the line that names it */
.tk-gem{flex:none;width:10px;height:10px;border:2px solid var(--ink);border-radius:2px;background:var(--gem);transform:rotate(45deg)}
.tk-stats li.tk-fx{justify-content:flex-start;gap:8px;padding:6px 10px;background:color-mix(in srgb,var(--gem) 16%,var(--paper));text-align:left;line-height:1.25}
.tk-stats li.tk-fx .ic{flex:none;width:24px;height:24px}
/* what wearing it changes (owner, 2026-10-24: "show the difference in stats like a stat compare wow does", always shown):
   a plate under the cards, its label, then one chip a stat that changes: ▲ and a plus for a gain, ▼ and a minus for a loss */
.loot-diff{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:14px;background:rgba(42,26,46,.07)}
.loot-dk{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.loot-diff ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.loot-diff li{display:flex;align-items:center;gap:5px;padding:4px 10px;border:2px solid var(--ink);border-radius:10px;font:var(--w-strong) var(--t-body)/1.2 var(--f-ui);font-variant-numeric:tabular-nums;white-space:nowrap}
.loot-diff li i{font-style:normal;font-size:var(--t-label)}
.loot-diff li.up{background:color-mix(in srgb,var(--laurel-hi) 45%,var(--paper))}
.loot-diff li.up i{color:var(--laurel-lo)}
.loot-diff li.down{background:color-mix(in srgb,var(--enemy-hi) 28%,var(--paper))}
.loot-diff li.down i{color:var(--enemy)}
.loot-diff p{margin:0;font:var(--w-body) var(--t-body)/1.3 var(--f-ui);color:var(--ink-2)}
.tk-fav{
  all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-top:4px;min-height:38px;padding:0 12px 0 6px;border:2.5px 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-2)
}
.tk-fav .ic{width:24px;height:24px;filter:grayscale(1) opacity(.55)}
.tk-fav.on{background:var(--g-gold);color:var(--ink)}
.tk-fav.on .ic{filter:none}
.tk-fav:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.loot-acts{justify-content:center}
.loot-acts .btn kbd{margin-left:4px;-webkit-text-stroke:0}
.loot-acts .btn .ic{width:28px;height:28px}
.loot-note{margin:0;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-3);text-align:center}
/* a weapon find in the same pop-up (src/finds.js, ui/trinket.js): the weapon's own art in the medallion, and its damage
   a second as its first number */
.tk-card.wpn .tk-art img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(42,26,46,.28))}
.tk-stats .tk-dps b{font:400 var(--t-name)/1 var(--f-display);font-variant-numeric:tabular-nums}

/* ---------- the Collection's Training Grounds tiles, and the reveal card's Medal and heat ---------- */
.col-tile.meta.has{cursor:pointer}
.ul-ic.ul-medal,.ul-ic.ul-heat{position:relative}
.ul-heat .ul-lv,.ul-medal .ul-lv{font-size:var(--t-h)}

/* ---------- narrower screens ---------- */
@media (max-width:900px){
  .tt-lane{grid-template-columns:minmax(0,1fr)}
  .tt-bh{padding-left:16px}
  .tt-nodes{grid-template-columns:repeat(9,minmax(64px,1fr));overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
  .tt-nodes::before{left:30px;right:30px}
}
@media (max-width:600px){
  /* (no extra top room: the screen already clears Back, and the head sits where the Shop's does: nav.css --menu-col) */
  .tg-head{margin:0 0 10px}
  .tg-title .ribbon{display:none}
  .tg-title h2{-webkit-text-stroke:8px var(--ink)}
  /* the tabs as the Shop's on phones: four even chips, the icon over the word */
  .tg-tabs{flex-wrap:nowrap;gap:6px;margin:0 0 12px}
  .tg-tabs .tab{flex:1 1 0;min-width:0;font-size:var(--t-tag);line-height:1.05;text-align:center;white-space:normal}
  .tt-info{position:static;margin:0;padding:0;min-height:0}
  .fc-row .rbw-label{display:none!important}
  /* the tree: one branch at a time, its talents in a grid with names */
  .tt-btabs{display:flex;gap:6px}
  .tt-btab{
    all:unset;box-sizing:border-box;cursor:pointer;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:42px;
    border:var(--line-s) solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:0 3px 0 var(--ink);font:400 var(--t-name-s)/1 var(--f-display)
  }
  .tt-btab .ic{width:22px;height:22px}
  .tt-btab.on{background:var(--bc);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;transform:translateY(-2px)}
  .tt-lane{display:none;padding:10px}
  .tt-lane.on{display:grid}
  .tt-lane::before{display:none}
  .tt-bh{grid-template-columns:40px minmax(0,1fr) auto;padding-left:0}
  .tt-bn{grid-column:3}
  .tt-nodes{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 6px;overflow:visible}
  .tt-nodes::before{display:none}
  .tt-medal{width:58px;height:58px}
  .tt-node.key .tt-medal{width:56px;height:56px}
  .tt-name{font-size:var(--t-caption)}
  .tt-card{grid-template-columns:60px minmax(0,1fr);gap:10px 12px;padding:12px}
  .tt-big{width:60px;height:60px}
  .tt-big .ic{width:38px;height:38px}
  .tt-title{font-size:var(--t-h)}
  .tt-now,.tt-next{font-size:var(--t-body)}
  .tt-act{grid-column:1/-1;justify-items:stretch}
  .tt-learn{justify-content:space-between}
  .fm-grid{grid-template-columns:minmax(0,1fr)}
  .fm-slot{width:48px;height:48px}
  .ch-gs{grid-template-columns:minmax(0,1fr)}
  .ch-sum{grid-template-columns:auto minmax(0,1fr);border-radius:16px}
  .ch-paid{grid-column:1/-1}
  .ch-row{grid-template-columns:28px minmax(0,1fr) auto;gap:8px}
  .ch-num{grid-column:2;grid-row:2;justify-self:start}
  .ch-pay{grid-column:3;grid-row:1/3}
  .ru-heat{grid-template-columns:auto minmax(0,1fr);padding:10px 14px}
  .ru-rw,.ru-best{grid-column:1/-1;justify-items:start}
  .ru-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ru-card{min-height:112px}
  .ru-main{grid-template-columns:minmax(0,1fr);padding:10px}
  .ru-ic{grid-row:auto;width:34px;height:34px}
  .ru-state{grid-column:1}
  .ar-panel{scroll-margin-top:76px}   /* a section scrolled to stays clear of the Back button */
  .loot-in{padding:26px 12px 16px;gap:10px}
  .loot-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .loot-vs{display:none}
  .tk-card{padding:16px 8px 10px}
  .tk-art{width:62px;height:62px}
  .tk-art .ic{width:42px;height:42px}
  .tk-name{font-size:var(--t-name)}
  .tk-stats li{font-size:var(--t-caption);padding:3px 5px}
  .loot-diff{padding:8px;gap:6px}
  .loot-diff li{font-size:var(--t-caption);padding:3px 7px}
  .tk-fav{font-size:var(--t-caption);padding:0 9px 0 4px}
  .title-actions:has(#btn-training:not([hidden])) > :is(#btn-collection,#btn-lineage){font-size:var(--t-name-s);padding:0 6px 0 36px}
  .title-actions:has(#btn-training:not([hidden])) > :is(#btn-collection,#btn-lineage) .ic{left:9px;width:22px;height:22px;margin-top:-11px}
}
@media (prefers-reduced-motion:reduce){
  .tt-node.can .tt-medal::after,.fm-slot.can::after,.tk-card.new .tk-art,.ru-heat.hot .ru-flame .ic{animation:none}
  .loot-in,.tt-node.just .tt-medal,.fm-slot.just,.ru-card.just,.fc.just{animation:none}
}
/* the trinket choice: two equal partners, same size whichever one is recommended */
.loot-acts{display:flex;gap:14px}
.loot-acts .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}

/* high mastery (6-10): a gold +N beside a weapon's five mastery pips (Armory tiles, the fighter card) */
.wa-hi,.wt-hi{display:inline-grid;place-items:center;min-width:20px;height:16px;margin-left:3px;padding:0 4px;box-sizing:border-box;border:2px solid var(--ink);border-radius:999px;background:var(--g-gold);font:400 11px/1 var(--f-display);color:var(--ink);vertical-align:middle}
.wd-step i.r1{background:color-mix(in srgb,var(--r2) 30%,var(--paper))} .wd-step i.r2{background:color-mix(in srgb,var(--r-epic,#a052a0) 28%,var(--paper))} .wd-step i.r3{background:color-mix(in srgb,var(--r3) 40%,var(--paper))}

/* a landscape phone: the trinket pop-up in two columns (the two trinkets, then what changes and the choice), so Wear it
   is on screen without scrolling */
@media (max-height:500px) and (min-width:601px){
  #scr-loot{padding-block:calc(env(safe-area-inset-top,0px) + 22px) calc(env(safe-area-inset-bottom,0px) + 10px)}
  .loot-in{width:min(780px,100%);grid-template-columns:minmax(0,1fr) 236px;align-items:center;column-gap:16px;row-gap:10px;padding:22px 16px 14px}
  .loot-title{grid-column:1/-1;font-size:var(--t-h)}
  .loot-cards{grid-column:1;grid-row:2/5;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .loot-vs{display:none}
  .loot-diff{grid-column:2;grid-row:2;padding:8px;gap:6px}
  .loot-diff li{font-size:var(--t-caption);padding:3px 7px}
  .loot-acts{grid-column:2;grid-row:3;justify-self:stretch;flex-direction:column;gap:10px}
  .loot-note{grid-column:2;grid-row:4;font-size:var(--t-caption);line-height:1.35}
  .tk-card{padding:14px 8px 10px;gap:4px}
  .tk-art{width:52px;height:52px}
  .tk-art .ic{width:36px;height:36px}
  .tk-name{font-size:var(--t-name)}
  .tk-stats li{font-size:var(--t-caption);padding:3px 5px}
  .tk-fav{min-height:34px;font-size:var(--t-caption);padding:0 9px 0 4px}
}