/* ==========================================================================
   The Armory (ui/armory.js): one hub for fighters, weapons, gods, talents and trials
   owner: the redesign, part A (docs/redesign-ia.md 1). Loaded last. The KayKit kit: paper panels, ink lines, hard
   offset drops, Lilita for names. The shared menu column (nav.css --menu-col, 1180 px, top-aligned, Back at its corner)
   and the big-screen zoom (nav.css --big) hold here as on Past Lives.
   The weight pass (2026-10-21, kit.css tokens): one header row (title and subtitle, compact chips, one primary action);
   light tabs, the chosen one gold; a badge only where something can be spent; thick ink only on what you press (tiles,
   tabs, buttons, nodes), --line-xs and --drop-xs on panels that only hold things; Nunito 600 body, 800 emphasis.
   ========================================================================== */
/* the Emperor's Rules' own screen (ui/rules.js) shares the ground, the column and the head */
#scr-armory,#scr-rules{background:linear-gradient(180deg,rgba(240,214,164,.96),rgba(222,180,120,.98))}
:is(#scr-armory,#scr-rules) .screen-inner{width:min(var(--menu-col,1180px),100%);max-width:var(--menu-col,1180px);margin:0 auto;padding-bottom:28px}

/* ---------- the head: the title and its one-line subtitle, the purse, one primary action ---------- */
.ar-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;margin:0 0 14px}
.ar-title{display:grid;gap:4px;justify-items:start;min-width:0}
.ar-title h2{margin:0;font:400 var(--t-title)/1 var(--f-display);color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.ar-sub{margin:0;display:block;font:var(--w-body) var(--t-body)/1.3 var(--f-ui);color:var(--ink-2);text-wrap:pretty}
.ar-info{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:5px;vertical-align:-6px;border-radius:50%;cursor:default;outline:none}
.ar-info .ic{width:18px;height:18px;opacity:.85}
.ar-info:focus-visible{outline:var(--focus-ring);outline-offset:1px}
.ar-side-head{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.ar-purse{display:flex;gap:6px}
/* compact currency chips: icon and number (the word is in the tooltip) */
.ar-chip{gap:5px;padding:3px 12px 4px 4px;border-width:var(--line-xs);box-shadow:inset 0 2px 0 #fff,var(--drop-xs)}
.ar-chip .ic{width:24px;height:24px}
.ar-chip b{font-size:var(--t-btn);-webkit-text-stroke:4px var(--ink)}
#btn-ar-play{min-height:46px;padding:0 22px;font-size:var(--t-btn);-webkit-text-stroke:4.5px var(--ink)}

/* ---------- the title's next goal (ui/armory.js renderGoal into #title-goal; unlocks.css draws its button) ---------- */
.gl-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-tile);border:var(--line-2) solid var(--ink);background:linear-gradient(180deg,#f7f1e4 0%,#e6d7b8 100%)}
.gl-ic .ic{width:30px;height:30px}
.title-goal.ok .gl-ic{background:linear-gradient(180deg,#fff3c4 0%,#efcf78 100%)}
.gl-main{display:grid;gap:5px;min-width:0}
.gl-line{font:var(--w-body) var(--t-body)/1.2 var(--f-ui);color:var(--ink-2);text-wrap:balance}
.gl-line b{font:400 var(--t-name-s)/1.05 var(--f-display);color:var(--ink);font-weight:400}
.gl-line em{font-style:normal;color:var(--ink-3);white-space:nowrap}
.gl-bar{display:block;height:8px;box-sizing:border-box;border:var(--line-2) solid var(--ink);border-radius:var(--r-pill);background:#fffaf0;overflow:hidden}
.gl-bar>i{display:block;height:100%;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo))}
.title-goal.ok .gl-bar>i{width:100%!important}
.gl-cost{display:inline-flex;align-items:center;gap:4px;font:400 var(--t-name)/1 var(--f-display);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.gl-cost .ic{width:20px;height:20px}

/* ---------- the tabs: light, the chosen one gold; a small gold count only where something can be spent ---------- */
.ar-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ar-tab{position:relative;min-height:42px;padding:0 16px 0 11px;gap:7px;font-size:var(--t-name);color:var(--ink-2);
  border-width:var(--line-xs);background:rgba(255,248,234,.72);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),var(--drop-xs)}
.ar-tab .ic{width:22px;height:22px}
.ar-tab>span{white-space:nowrap}
.ar-tab[aria-selected="true"]{color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),var(--drop-xs)}
.ar-dot{position:absolute;top:-8px;right:-7px;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--g-gold);border:var(--line-2) solid var(--ink);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-text-stroke:0;text-shadow:none;paint-order:normal}   /* never the chosen tab's outline */

/* ---------- Fighters and Weapons: a rail of tiles, then the one picked ---------- */
.ar-split{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
.ar-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:sticky;top:0}
.ar-rail.wr{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
/* weapon families: each fighter type's name over its weapons */
.ar-rgroup{grid-column:1/-1;margin:6px 2px -1px;font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.ar-rgroup:first-child{margin-top:0}
/* the five fighters (the roster cut, 2026-10-21): two a row on a four-column grid, so an odd last one sits centred under
   the pair above it instead of hanging off the left */
.ar-rail.fr{grid-template-columns:repeat(4,minmax(0,1fr))}
.ar-rail.fr>.ar-tile{grid-column:span 2}
.ar-rail.fr>.ar-tile:last-child:nth-child(odd){grid-column:2 / span 2}
.ar-tile{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;justify-items:center;align-content:start;gap:3px;padding:6px 4px 7px;min-width:0;
  border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile);background:var(--g-paper);box-shadow:inset 0 2px 0 #fff,var(--drop-xs);
  transition:transform .12s var(--out),box-shadow .12s var(--out);
}
@media (hover:hover) and (pointer:fine){ .ar-tile:not(.on):hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--ink)} }
.ar-tile:focus-visible,html.kbd-nav .ar-tile:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.ar-tile.on{background:linear-gradient(180deg,#fff2c6,#f6d887);box-shadow:var(--ring-pick),var(--drop-xs)}
.ar-tile img{width:58px;height:58px;border-radius:10px;border:var(--line-2) solid var(--ink);object-fit:cover;background:#3a2a3e}
.at-ic{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;border:var(--line-2) solid var(--ink);background:linear-gradient(180deg,#f7f1e4,#e6d7b8)}
.at-ic .ic{width:32px;height:32px}
.at-name{max-width:100%;font:400 var(--t-tag)/1.05 var(--f-display);color:var(--ink);text-align:center;text-wrap:balance}
.wtile .at-name{font-size:var(--t-tag)}
.at-m{display:flex;align-items:center;gap:3px;width:100%;padding:0 3px;box-sizing:border-box}
.at-m .ic{width:13px;height:13px;flex:none}
.at-m b{font:400 var(--t-tag)/1 var(--f-display);color:var(--ink)}
.at-bar{flex:1;height:5px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:#fffaf0;overflow:hidden}
.at-bar>i{display:block;height:100%;background:var(--gold)}
.at-pips{display:flex;gap:2px}
.at-pips i{width:5px;height:5px;border-radius:50%;background:rgba(42,26,46,.2)}
.at-pips i.on{background:var(--gold-lo);box-shadow:0 0 0 1px var(--ink)}
.at-pts{position:absolute;top:-7px;right:-6px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--g-gold);border:var(--line-2) solid var(--ink);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.at-lock{display:inline-flex;align-items:center;gap:2px;font:400 var(--t-tag)/1 var(--f-display);color:var(--ink-2)}
.at-lock .ic{width:14px;height:14px}
/* locked things show in full (owner, 2026-10-21: "why are characters still hidden"): the price or the lock says it */
.ar-tile.locked{background:linear-gradient(180deg,#f1e7d1,#e2d2b0);box-shadow:none;border-color:rgba(42,26,46,.55)}
.ar-tile.locked.on{background:linear-gradient(180deg,#f7ecd0,#e8d39e);border-color:var(--ink)}
.ar-new{position:absolute;top:-8px;left:-6px;z-index:2;padding:2px 6px 3px;border-radius:6px;background:#e2414a;border:var(--line-2) solid var(--ink);font:400 var(--t-tag)/1 var(--f-display);color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;rotate:-6deg}

.ar-main{display:grid;gap:12px;min-width:0}
@keyframes ar-pop{40%{transform:scale(1.025)}}
.ar-seal{flex:none;width:28px;height:28px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--sc) 40%,#fff) 0 30%,var(--sc) 80%);border:var(--line-2) solid var(--ink)}
.ar-seal .ic{width:18px;height:18px}
.ar-bar{display:block;height:9px;box-sizing:border-box;border:var(--line-2) solid var(--ink);border-radius:var(--r-pill);background:#fffaf0;overflow:hidden}
.ar-bar>i{display:block;height:100%;min-width:3px;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo))}
.ar-unlock{white-space:nowrap;min-height:48px;padding:0 18px;font-size:var(--t-name);gap:6px}
.ar-unlock .ic{width:22px;height:22px}
.ar-unlock.short{filter:saturate(.55);opacity:.85}
.ar-unlock.nope{animation:tm-nope .32s var(--out)}
.ar-gate{display:flex;align-items:center;gap:8px;max-width:300px;padding:6px 12px 7px 6px;border:var(--line-2) solid rgba(42,26,46,.5);border-radius:var(--r-tile);background:#efe3c8}
.ar-gate>.ic{width:24px;height:24px;flex:none;opacity:.8}
.ar-gate>span{display:grid;gap:3px;min-width:0}
.ar-gate b{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink)}
.ar-gate small{display:inline-flex;align-items:center;gap:3px;font:var(--w-body) var(--t-caption)/1 var(--f-ui);color:var(--ink-3)}
.ar-gate small .ic{width:15px;height:15px}

/* the tree and, beside it, the selected node, the points and the fighter's own switches */
.ar-treebox{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.ar-mapcol{position:relative;container:tree / inline-size;min-width:0}
.ar-side{display:grid;gap:12px;align-content:start;position:sticky;top:0}
.ar-side .tm-info{min-height:150px}
.ar-refit{margin:0;display:flex;align-items:flex-start;gap:7px;padding:7px 10px;border:var(--line-2) solid var(--ink);border-radius:var(--r-tile);background:#fff6d6;font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.ar-refit .ic{width:18px;height:18px;flex:none;margin-top:1px}
.ar-refit b{color:var(--ink);font-weight:var(--w-strong)}
/* the roster cut (save v9): once, over the Fighters tab, what each retired fighter paid back */
.ar-retired{padding:8px 12px}
.ar-retired>span{display:grid;gap:3px}
.ar-retired ul{margin:0;padding:0;list-style:none;display:grid;gap:1px;color:var(--ink)}
.ar-retired small{font-size:inherit;color:var(--ink-2)}
.ar-lab{font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.ar-lab small{font:var(--w-body) var(--t-label)/1.2 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--ink-3);margin-left:4px}
.ar-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ar-opt{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:2px;min-height:40px;padding:6px 11px 7px;
  border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile);background:var(--paper);box-shadow:0 2px 0 var(--ink);color:var(--ink-2);transition:transform .12s var(--out),box-shadow .12s var(--out);
}
.ar-opt.choice{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:7px 10px 8px 7px}
.ar-opt.choice>.ic{width:28px;height:28px}
.ar-opt>span{display:grid;gap:2px;min-width:0}
.ar-opt b{font:400 var(--t-name-s)/1.05 var(--f-display);color:var(--ink)}
.ar-opt small{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3);text-wrap:pretty}
@media (hover:hover) and (pointer:fine){ .ar-opt:not(.on):not(:disabled):hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)} }
.ar-opt.on{background:linear-gradient(180deg,#fff2c6,#f6d887);box-shadow:var(--ring-pick),0 2px 0 var(--ink)}
.ar-opt.on small{color:var(--ink-2)}
.ar-opt:disabled{cursor:default;background:var(--paper-2);color:var(--ink-3);box-shadow:none}
.ar-opt:disabled b{color:var(--ink-3)}
.ar-opt:disabled>.ic{filter:grayscale(1);opacity:.55}
.ar-opt:focus-visible,html.kbd-nav .ar-opt:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.ar-tick{position:absolute;top:-7px;right:-6px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;border:var(--line-2) solid var(--ink);background:var(--g-laurel,#6fbf3a);font:var(--w-strong) var(--t-label)/1 var(--f-ui);font-style:normal;color:#fff}
.ar-sw{flex:none;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:var(--line-2) solid var(--ink);background:var(--sw);box-shadow:inset 0 3px 0 rgba(255,255,255,.35);display:inline-block;vertical-align:middle}
.ar-cloth{all:unset;box-sizing:border-box;cursor:pointer;justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:3px 4px;border:var(--line-xs) solid var(--ink);border-radius:var(--r-pill);background:var(--paper);box-shadow:0 2px 0 var(--ink);font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink)}
.ar-cloth em{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);font-style:normal;letter-spacing:var(--ls-caps);text-transform:uppercase;padding:4px 8px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-3)}
.ar-cloth.on{background:linear-gradient(180deg,#fff2c6,#f6d887)}
.ar-cloth.on em{background:var(--g-laurel,#6fbf3a);color:var(--ink)}

/* ---------- Gods: the seal and the name are the biggest thing on a card; the rows are quiet ---------- */
.ar-gods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.ar-god{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px 15px 14px;border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile-lg);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gc) 16%,#fff8ea) 0%,var(--paper) 55%);box-shadow:inset 0 2px 0 #fff,var(--drop-xs)}
.ag-seal{width:62px;height:62px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc) 35%,#fff) 0 30%,var(--gc) 80%);border:var(--line-s) solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 var(--ink);cursor:default}
.ag-seal .ic{width:42px;height:42px}
.ag-main{display:grid;gap:9px;min-width:0}
.ag-main h4{margin:0;font:400 var(--t-h)/1 var(--f-display);color:var(--ink)}
.ag-main h4 small{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:color-mix(in srgb,var(--gc) 60%,var(--ink));margin-left:6px;vertical-align:3px}
.ag-line{margin:-3px 0 0;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.ag-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:start}
.ag-lab{font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3);padding-top:2px}
.ag-lab i{font-style:normal;font-weight:var(--w-body)}
.ag-txt{font:var(--w-body) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-2);text-wrap:pretty}
.ag-txt b{color:var(--ink);font-weight:var(--w-strong)}
.ag-txt em{font-style:normal;color:var(--ink-3)}
.ag-pows{display:flex;flex-wrap:wrap;gap:5px}
.ag-pow{width:32px;height:32px;box-sizing:border-box;display:grid;place-items:center;border-radius:9px;border:var(--line-2) solid rgba(42,26,46,.4);background:#eadfc6;outline:none;cursor:default}
.ag-pow .ic{width:22px;height:22px;filter:grayscale(1);opacity:.45}
.ag-pow.on{border-color:var(--ink);background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--gc) 30%,#fff));box-shadow:0 2px 0 var(--ink)}
.ag-pow.on .ic{filter:none;opacity:1}
.ag-pow:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.ag-omens{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.ag-omens li{display:grid;align-content:start;gap:1px;font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.ag-omens b{font:400 var(--t-name-s)/1.1 var(--f-display);color:var(--ink)}
.ag-omens .up{color:#2f7a1e}
.ag-omens .dn{color:#b23a2a}
.ar-god.locked{background:linear-gradient(135deg,#ece2c9,#ddcca8);box-shadow:none;border-color:rgba(42,26,46,.5)}
.ar-god.locked .ag-seal{box-shadow:none}


/* ---------- Trials: quiet panels; the rule cards are what you press ---------- */
.ar-trials{display:grid;gap:14px}
.ar-panel{padding:12px 14px 14px;border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile-lg);background:rgba(255,248,234,.75);box-shadow:var(--drop-xs)}
.ar-panel h4{margin:0 0 10px;display:flex;align-items:center;gap:8px;font:400 var(--t-h)/1 var(--f-display);color:var(--ink)}
.ar-panel h4 .ic{width:28px;height:28px}
.ar-miles{display:grid;gap:9px}
.ar-miles h4{margin-bottom:2px}
.ar-mrow{display:grid;grid-template-columns:190px minmax(0,1fr) auto;align-items:center;gap:10px}
.ar-mrow small{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3)}
.ar-slots{display:flex;gap:5px}
.ar-slots i{width:22px;height:22px;border-radius:6px;border:var(--line-2) solid rgba(42,26,46,.45);background:#eadfc6;box-sizing:border-box}
.ar-slots i.on{border-color:var(--ink);background:linear-gradient(180deg,#fff3c4,#eac254);box-shadow:0 2px 0 var(--ink)}
.ar-rars,.ar-champs{display:flex;flex-wrap:wrap;gap:6px}
.ar-rar{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 4px 5px;border:var(--line-2) solid rgba(42,26,46,.45);border-radius:var(--r-pill);background:#eadfc6;font:400 var(--t-tag)/1 var(--f-display);color:var(--ink-3);outline:none;cursor:default}
.ar-rar i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);background:#bbb}
.ar-rar.on{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.ar-rar.r0.on i{background:var(--r1,#c8c8c8)}.ar-rar.r1.on i{background:var(--r2,#3f8ff0)}.ar-rar.r2.on i{background:var(--r-epic,#a052a0)}.ar-rar.r3.on i{background:var(--r3,#f2a91e)}
.ar-champ{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 5px;padding:3px 10px 4px 4px;border:var(--line-2) solid rgba(42,26,46,.45);border-radius:var(--r-tile);background:#eadfc6;outline:none;cursor:default}
.ar-champ .ic{grid-row:span 2;width:22px;height:22px;opacity:.55}
.ar-champ b{font:400 var(--t-tag)/1 var(--f-display);color:var(--ink-3)}
.ar-champ small{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);color:var(--ink-3)}
.ar-champ.seen{background:var(--paper);border-color:var(--ink)}
.ar-champ.seen .ic{filter:none;opacity:1}
.ar-champ.seen b{color:var(--ink)}
.ar-champ.beaten{background:linear-gradient(180deg,#f3fae6,#d9edb9)}
.ar-champ.beaten small{color:var(--laurel-lo,#3c7a1e)}
.ar-teaser{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:var(--line-2) dashed rgba(42,26,46,.45);border-radius:var(--r-tile);background:#efe3c8}
.ar-teaser>.ic{width:28px;height:28px;flex:none;opacity:.8}
.ar-teaser>span{display:grid;gap:4px;min-width:0;max-width:440px}
.ar-teaser b{font:400 var(--t-name)/1 var(--f-display);color:var(--ink)}
.ar-teaser small{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3)}
.ar-teaser em{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);font-style:normal;color:var(--ink)}
/* the Emperor's Rules have their own screen (ui/rules.js); the Trials tab keeps a row with the heat that opens it */
.ar-rgo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ar-rgo-h{display:inline-flex;align-items:center;gap:6px;font:400 var(--t-name)/1 var(--f-display);color:var(--ink)}
.ar-rgo-h .ic{width:30px;height:30px}
.ar-rgo-h:not(.hot) .ic{filter:grayscale(1);opacity:.55}
.ar-rgo small{flex:1 1 220px;min-width:0;font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.ar-rgo .btn{margin-left:auto}
/* the Emperor's Rules (meta.css) on their screen: the Armory's lighter outlines on the panel and the off cards, a quieter heat tag */
#scr-rules .ru-heat{border-width:var(--line-xs);box-shadow:inset 0 3px 0 #fff,var(--drop-xs)}
#scr-rules .ru-heat.hot{box-shadow:inset 0 0 0 3px #ffd0a0,inset 0 3px 0 #fff,var(--drop-xs)}
#scr-rules .ru-rw span{border-width:var(--line-2);font-weight:var(--w-strong)}
#scr-rules .ru-card{border-width:var(--line-xs);box-shadow:inset 0 2px 0 #fff,var(--drop-xs)}
#scr-rules .ru-card.on{box-shadow:inset 0 2px 0 #fff,var(--drop-xs)}
@media (hover:hover) and (pointer:fine){ #scr-rules .ru-card:not(.on):hover{box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--ink)} }
#scr-rules .ru-ic{border-width:var(--line-2)}
#scr-rules .ru-line{font-weight:var(--w-body)}
#scr-rules .ru-heatb{padding:1px 6px 2px;border-width:var(--line-2);font-size:var(--t-tag);background:linear-gradient(180deg,#f9d3b8,#ee9364);color:var(--ink);-webkit-text-stroke:0}
#scr-rules .ru-onoff{border:0;padding:3px 8px;font-weight:var(--w-strong)}
/* on its own screen the column is wide: four cards a row on a desktop (eleven rules: 4, 4 and 3, not 5, 5 and 1) */
@media (min-width:601px){ #scr-rules .ru-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} }

/* ---------- desktop heights: a little tighter ---------- */
@media (max-height:960px) and (min-width:721px){
  .ar-head{margin-bottom:10px}
  .ar-title h2{font-size:var(--t-title)}
  .ar-tabs{margin-bottom:12px}
}
@media (max-width:900px) and (min-width:721px){ .ar-treebox{grid-template-columns:minmax(0,1fr)} .ar-side{position:static} }
@media (max-width:1100px) and (min-width:721px){
  .ar-gods{grid-template-columns:minmax(0,1fr)}
}

/* ---------- phones: one column; the rails scroll sideways; the account tree one branch at a time ---------- */
@media (max-width:720px){
  :is(#scr-armory,#scr-rules) .screen-inner{padding-bottom:20px}
  .ar-head{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;margin:2px 0 10px}
  .ar-side-head{display:contents}
  .ar-title{grid-column:1;grid-row:1}
  :is(#btn-ar-play,#btn-ru-play){grid-column:2;grid-row:1;min-height:44px;padding:0 14px;font-size:var(--t-name);-webkit-text-stroke:4px var(--ink)}
  .ar-purse{grid-column:1 / -1;grid-row:2}
  .ar-sub{grid-column:1 / -1;grid-row:3;font-size:var(--t-caption)}
  .ar-title{display:contents}
  .ar-title h2{grid-column:1;grid-row:1;-webkit-text-stroke:6px var(--ink);text-shadow:0 4px 0 var(--ink)}
  .ar-chip b{font-size:var(--t-name)}
  .ar-chip .ic{width:22px;height:22px}
  .ar-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:12px}
  .ar-tab{flex-direction:column;justify-content:center;gap:3px;min-height:52px;padding:5px 2px;border-radius:var(--r-tile);font-size:var(--t-tag);-webkit-text-stroke:0}
  .ar-tab[aria-selected="true"]{color:var(--ink);-webkit-text-stroke:0}
  .ar-tab .ic{width:21px;height:21px}
  .ar-dot{top:-7px;right:-4px;min-width:17px;height:17px;font-size:var(--t-tag)}
  .ar-split{grid-template-columns:minmax(0,1fr);gap:10px}
  .ar-rail,.ar-rail.wr{position:static;display:flex;overflow-x:auto;gap:7px;padding:8px 8px 9px;margin:-8px -8px -3px;scroll-snap-type:x proximity;scrollbar-width:none}
  .ar-rail::-webkit-scrollbar{display:none}
  .ar-rgroup{display:none}
  .ar-tile{flex:0 0 76px;scroll-snap-align:start}
  /* the five fighters fit across a phone: no sideways scroll */
  .ar-rail.fr{overflow:visible;gap:5px}
  .ar-rail.fr>.ar-tile{flex:1 1 0;padding-inline:0}
  .ar-rail.fr .at-name{font-size:var(--t-tag);letter-spacing:-.02em}
  .ar-tile img{width:48px;height:48px}
  .wtile{flex-basis:70px}
  .ar-unlock{width:100%;justify-content:center}
  /* one column; the panel pinned to the bottom of the screen (the aside steps aside so the panel can stick) */
  .ar-treebox{display:block}
  .ar-side{display:contents}
  .ar-gods{grid-template-columns:minmax(0,1fr)}
  .ar-god{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
  .ar-god .ag-seal{position:absolute;top:10px;right:12px;width:48px;height:48px}
  .ar-god .ag-seal .ic{width:32px;height:32px}
  .ar-god .ag-main h4,.ar-god .ag-line{padding-right:56px}
  .ag-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .ag-omens{grid-template-columns:minmax(0,1fr)}
  .ar-mrow{grid-template-columns:minmax(0,1fr);gap:5px}
}

/* ---------- reduced motion, photo mode ---------- */
@media (prefers-reduced-motion:reduce){
  .ar-tile,.ar-opt{transition:none}
}

/* ---------- a locked fighter's or weapon's tree (armory.js treeBox): the owned layout, the same size, blurred past
   reading and inert, under one lock card, so moving between owned and locked never jumps ---------- */
.ar-treebox.locked{position:relative}
.ar-treebox.locked .ar-mapcol>[inert]{filter:blur(6px) saturate(.45);opacity:.6;pointer-events:none;user-select:none}
.ar-lockveil{position:absolute;inset:0;z-index:6;display:grid;place-items:start center;padding-top:clamp(40px,14%,150px);pointer-events:none}
.ar-lockcard{display:grid;justify-items:center;gap:6px;max-width:300px;padding:16px 24px 18px;text-align:center;border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile-lg);background:var(--paper);box-shadow:inset 0 2px 0 #fff,var(--drop-xs)}
.ar-lockcard>.ic{width:38px;height:38px}
.ar-lockcard b{font:400 var(--t-h)/1 var(--f-display);color:var(--ink)}
.ar-lockcard small{font:var(--w-body) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-2);text-wrap:balance}

/* ---------- the Gods tab: every card the same shape and size; a god not met yet is a quieter, cooler card whose rows
   are blurred and inert under one lock card (armory.js renderGods) ---------- */
.ar-gods{grid-auto-rows:1fr;align-items:stretch}
.ar-god{height:100%;box-sizing:border-box}
.ag-body{position:relative;display:grid;gap:9px}
.ag-rows{display:grid;gap:9px}
.ar-god.locked{background:linear-gradient(135deg,#e6dcc8,#d6c9ae);border-color:rgba(42,26,46,.55);box-shadow:none}
.ar-god.locked .ag-seal{filter:saturate(.35);opacity:.8;box-shadow:none}
.ar-god.locked h4{color:var(--ink-2)}
.ar-god.locked h4 small{color:var(--ink-3)}
.ar-god.locked .ag-line{color:var(--ink-3)}
.ar-god.locked .ag-rows{filter:blur(5px) saturate(.3);opacity:.55;pointer-events:none;user-select:none}
.ag-lock{position:absolute;inset:-4px 0;display:grid;place-items:center;pointer-events:none}
.ag-lockcard{pointer-events:auto;gap:5px;min-width:220px;padding:12px 18px 13px}
.ag-lockcard>.ic{width:26px;height:26px}
.ag-lockcard b{font:400 var(--t-name)/1.1 var(--f-display)}
.ag-lockcard .ar-bar{width:100%;max-width:200px}
.ag-lockcard small{font:var(--w-body) var(--t-caption)/1 var(--f-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- the one panel (2026-10-24): the thing picked, and its one gold button ----------
   The owner, of the Talents board: "hierarchy is so trash"; of the Fighters page: "such a mess". Both pages are now the
   thing itself (the board, the web) and this panel beside it, read top down: the name, one line of what it does, a quiet
   two-way choice if there is one, the page's one gold button, and the small words (points, Unlearn, Reset) at the foot.
   On a phone it sits under the board, pinned to the bottom of the screen. */
.ip{position:sticky;top:0;display:grid;gap:12px;align-content:start;padding:16px 16px 14px;box-sizing:border-box;border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile-lg);background:var(--g-paper);box-shadow:inset 0 2px 0 #fff,var(--drop-xs)}
.ip.just{animation:ar-pop .5s var(--pop)}
.ip-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.ip-ic{width:56px;height:56px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:var(--line-xs) solid var(--ink);background:color-mix(in srgb,var(--lc,#e6d3a8) 45%,#fffaf0);box-shadow:0 3px 0 var(--ink)}
.ip-ic .ic{width:30px;height:30px}
.ip-face{width:56px;height:56px;box-sizing:border-box;border-radius:14px;border:var(--line-xs) solid var(--ink);object-fit:cover;object-position:50% 22%;background:#3a2a3e}
.ip-head h3{margin:0;font:400 var(--t-h)/1.02 var(--f-display);color:var(--ink);text-wrap:balance}
.ip-head small{display:block;margin-top:4px;font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-3)}
.ip-dots{align-self:start;display:flex;gap:3px;margin-top:8px}
.ip-dots i{width:8px;height:8px;border-radius:50%;background:rgba(42,26,46,.18)}
.ip-dots i.on{background:var(--lc);box-shadow:0 0 0 1.5px var(--ink)}
.ip-line{margin:0;font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink);text-wrap:pretty}
.ip-note{margin:-5px 0 0;font:var(--w-body) var(--t-caption)/1.35 var(--f-ui);color:var(--ink-3);text-wrap:pretty}
.ip-lv{display:grid;gap:5px;cursor:default}
.ip-lv small{font:var(--w-body) var(--t-caption)/1.35 var(--f-ui);color:var(--ink-2);text-wrap:pretty}
.ip-lv .ip-soon{color:var(--ink-3)}
.ip-sig{margin:0;display:flex;align-items:flex-start;gap:9px;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2);text-wrap:pretty;cursor:default}
.ip-sig b{color:var(--ink);font-weight:var(--w-strong)}
/* a quiet two-way choice (a talent's version, the signature): the one in use on paper, the other plain */
.ip-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px;border-radius:12px;background:rgba(42,26,46,.08)}
.ip-seg button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:4px 8px;border-radius:9px;font:400 var(--t-name-s)/1.05 var(--f-display);color:var(--ink-3);text-align:center;transition:background-color .12s var(--out),color .12s var(--out)}
.ip-seg button .ic{width:18px;height:18px;flex:none;opacity:.55}
.ip-seg button.on{background:#fffaf0;color:var(--ink);box-shadow:0 2px 0 rgba(42,26,46,.3)}
.ip-seg button.on .ic{opacity:1}
.ip-seg button:disabled{cursor:default;opacity:.55}
@media (hover:hover) and (pointer:fine){ .ip-seg button:not(.on):not(:disabled):hover{color:var(--ink)} }
.ip-seg button:focus-visible,html.kbd-nav .ip-seg button:focus{outline:var(--focus-ring);outline-offset:1px}
/* the one gold button, as wide as the panel, its price at the end */
.ip .tm-learn{width:100%;justify-content:space-between;min-height:48px}
.ip .ar-opts.two{grid-template-columns:minmax(0,1fr)}
.ip .ar-cloth{justify-self:start}
.ip .ar-unlock{width:100%;justify-content:center;white-space:normal}
.ip .ar-gate{max-width:none}
.ip-why{margin:0;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(42,26,46,.06);font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2);text-wrap:pretty}
.ip-why .ic{width:17px;height:17px;flex:none;opacity:.8}
.ip-done{margin:0;display:flex;align-items:center;gap:7px;font:var(--w-strong) var(--t-body)/1 var(--f-ui);color:var(--laurel-lo,#3c7a1e)}
.ip-done .ic{width:19px;height:19px}
.ip-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:11px;border-top:1.5px solid rgba(42,26,46,.1);font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-2)}
.ip-foot b{font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.ip-link{all:unset;cursor:pointer;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.ip-foot>span+.ip-link{margin-left:auto}
.ip-link:hover{color:var(--ink)}
.ip-link:focus-visible,html.kbd-nav .ip-link:focus{outline:var(--focus-ring);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){ .ip.just{animation:none} .ip-seg button{transition:none} }

@media (max-width:720px){
  .ip{position:sticky;top:auto;bottom:8px;z-index:3;margin-top:12px;max-height:50vh;overflow-y:auto;box-shadow:inset 0 2px 0 #fff,0 -6px 18px rgba(42,26,46,.16),var(--drop-xs)}
  .ip-head h3{font-size:var(--t-name)}
  .ip-ic,.ip-face{width:48px;height:48px}
}

/* ---------- Talents: the Upgrades and the rows (2026-10-24) ----------
   The owner: "...three per row, and then one row unlocks the next" (meta.js "the Upgrades and the rows"). The dark stage
   of the board before it: the six Upgrades along the top (buy them all), then the rows, one talent of each theme under
   its name, each row a shelf holding one talent, lit in its theme's colour with a gold rim and the row's ranks; the
   other two are dark with a light rim (a switch, free; a gold dot when you can pay now); a row not reached yet shows its
   faint silhouettes and the round that opens it; the keystones at the foot are crowned medals. The panel (.ip) shows the
   talent picked, big. */
.tk{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
/* the rows' one-time note sits apart from the board, the gap the tabs keep (owner, 2026-10-25: "this bar with no
   spacing above talents is so wack") */
.ar-refit.tk-note{margin:0 0 16px}
@media (max-height:960px), (max-width:720px){ .ar-refit.tk-note{margin-bottom:12px} }
.tk-board{
  --t:80px;--well:#21172a;box-sizing:border-box;display:grid;gap:26px;padding:18px 18px 28px;border:var(--line-xs) solid var(--ink);border-radius:24px;
  background:radial-gradient(140% 90% at 50% 0%,#3e2c48 0%,#2b1e33 52%,#21172a 100%);box-shadow:inset 0 0 0 2px rgba(242,201,76,.16),var(--drop-xs);
}
.tk-part{display:grid;gap:14px;justify-items:center;min-width:0}
.tk-lab{margin:0;display:flex;align-items:baseline;gap:10px;font:400 var(--t-name)/1 var(--f-display);color:#fff6e4}
.tk-lab small{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:rgba(255,246,228,.5)}
.tk-ups{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 18px;padding-bottom:6px}
.tk-ups .tk-tok{--t:64px}
.tk-grid{display:grid;grid-template-columns:repeat(3,var(--t));column-gap:64px;row-gap:20px;justify-content:center}
.tk-head{grid-row:1;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font:400 var(--t-name-s)/1 var(--f-display);color:#fff6e4;cursor:default}
.tk-head>i{flex:none;width:26px;height:26px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:var(--line-2) solid var(--ink);background:var(--lc);font-style:normal;box-shadow:0 2px 0 var(--ink)}
.tk-head>i .ic{width:16px;height:16px}
/* a row: a shelf behind its three, one decision; a shut row's shelf is darker */
.tk-shelf{grid-row:var(--r);grid-column:1 / -1;margin:-10px -28px;border-radius:20px;background:rgba(255,246,228,.06);box-shadow:inset 0 0 0 1.5px rgba(255,246,228,.09)}
.tk-shelf.shut{background:rgba(10,4,14,.22);box-shadow:none}
/* a row not reached yet: the round that opens it, over its silhouettes */
.tk-need{grid-row:var(--r);grid-column:1 / -1;z-index:2;justify-self:center;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:6px 13px 7px 10px;border-radius:var(--r-pill);background:rgba(20,10,24,.82);box-shadow:inset 0 0 0 1.5px rgba(255,246,228,.16);font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:#fff6e4;white-space:nowrap;pointer-events:none}
.tk-need .ic{width:14px;height:14px;flex:none;opacity:.8}
/* a tile: the board's, and the panel's big one */
.tk-tok{all:unset;grid-row:var(--r);grid-column:var(--c);justify-self:center;align-self:center;position:relative;z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tk-face{position:relative;width:var(--t);height:var(--t);box-sizing:border-box;display:grid;place-items:center;border-radius:calc(var(--t) * .25);font-style:normal;transition:translate .12s var(--out),box-shadow .12s var(--out)}
.tk-face>.ic{width:calc(var(--t) * .58);height:calc(var(--t) * .58);filter:drop-shadow(0 2px 0 rgba(20,10,24,.4))}
:is(.tk-tok,.tk-show).s-some>.tk-face{border:3px solid #f2c94c;background:radial-gradient(110% 100% at 30% 18%,color-mix(in srgb,var(--lc) 50%,#fff) 0%,var(--lc) 58%,color-mix(in srgb,var(--lc) 62%,#1a0f1f) 100%);box-shadow:0 0 0 2px var(--ink),0 5px 0 1px #120b16}
:is(.tk-tok,.tk-show).s-open>.tk-face{border:3px solid rgba(255,246,228,.62);background:radial-gradient(110% 100% at 30% 18%,color-mix(in srgb,var(--lc) 30%,#57445f) 0%,color-mix(in srgb,var(--lc) 15%,#30223a) 100%);box-shadow:0 0 0 2px var(--ink),0 5px 0 1px #120b16}
:is(.tk-tok,.tk-show).s-locked>.tk-face{border:2px solid rgba(255,246,228,.07);background:var(--well);box-shadow:inset 0 3px 7px rgba(0,0,0,.5)}
:is(.tk-tok,.tk-show).s-locked>.tk-face>.ic{filter:brightness(0) invert(1);opacity:.12}
.tk-can{position:absolute;top:-7px;right:-7px;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2px solid var(--ink);background:var(--g-gold);box-shadow:0 0 0 2px #2b1e33}
.tk-dots{position:absolute;left:50%;bottom:-10px;translate:-50% 0;display:flex;gap:3px;padding:3px 5px;border-radius:var(--r-pill);background:#1d1424;box-shadow:0 0 0 2px var(--ink)}
.tk-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,246,228,.22)}
.tk-dots i.on{background:#f2c94c}
.tk-dots.many{gap:2px;padding:3px 4px}
.tk-dots.many i{width:4px;height:4px}
.tk-tok.sel>.tk-face{translate:0 -3px;box-shadow:0 0 0 2px var(--ink),0 0 0 5px #2b1e33,0 0 0 8.5px var(--gold-lo),0 8px 0 1px #120b16}
.tk-tok.s-locked.sel>.tk-face{translate:none;box-shadow:inset 0 3px 7px rgba(0,0,0,.5),0 0 0 3px #2b1e33,0 0 0 6.5px var(--gold-lo)}
.tk-tok.s-locked.sel>.tk-face>.ic{opacity:.26}
@media (hover:hover) and (pointer:fine){ .tk-tok:not(.sel):not(.s-locked):hover>.tk-face{translate:0 -2px} .tk-tok.s-locked:not(.sel):hover>.tk-face>.ic{opacity:.22} }
.tk-tok:active>.tk-face{scale:.96}
.tk-tok:focus-visible>.tk-face,html.kbd-nav .tk-tok:focus>.tk-face{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.tk-tok.just>.tk-face{animation:ar-pop .4s var(--pop)}
/* the keystones: crowned round medals, the last row */
.tk-tok.key{margin-top:22px}
:is(.tk-tok,.tk-show).key>.tk-face{width:calc(var(--t) + 12px);height:calc(var(--t) + 12px);border-radius:50%}
.tk-crown{position:absolute;top:-27px;left:50%;translate:-50% 0;display:grid;pointer-events:none}
.tk-crown .ic{width:30px;height:30px;filter:drop-shadow(0 2px 0 var(--ink))}
.s-locked>.tk-face>.tk-crown{opacity:.3;filter:grayscale(1)}
/* the panel: the picked tile big, its name under it */
.tk-info{justify-items:center;text-align:center}
.tk-show{--t:96px;--well:#2b1e33;margin:6px 0 4px}
.tk-show.key{margin-top:26px}
.tk-show.s-locked>.tk-face>.ic{opacity:.3}
.tk-ih h3{margin:2px 0 0;font:400 var(--t-h)/1.02 var(--f-display);color:var(--ink);text-wrap:balance}
.tk-ih small{display:block;margin-top:5px;font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-3)}
.tk-info .ip-note b{color:var(--ink);font-weight:var(--w-strong)}
.tk-info :is(.tm-learn,.ip-why){justify-self:stretch}
.tk-info :is(.ip-why,.ip-done){justify-content:center}
@media (prefers-reduced-motion:reduce){ .tk-face{transition:none} .tk-tok.just>.tk-face{animation:none} }
@media (max-width:1100px){ .tk-board{--t:66px} .tk-grid{column-gap:40px} }
@media (max-width:900px) and (min-width:721px){ .tk{grid-template-columns:minmax(0,1fr)} .tk .ip{position:static} }
@media (max-width:720px){
  .tk{display:block}
  .tk-board{--t:64px;gap:22px;padding:16px 10px 24px}
  .tk-ups{display:grid;grid-template-columns:repeat(3,auto);gap:16px 26px}
  .tk-ups .tk-tok{--t:54px}
  .tk-grid{column-gap:30px;row-gap:16px}
  .tk-shelf{margin:-8px -16px}
  .tk-head{font-size:var(--t-caption)}
  .tk-show{display:none}
}
/* one number per fighter tile (2026-10-22): talent points waiting are a gold dot, as on the fighter screen */
.at-pts.dot{top:-5px;right:-5px;min-width:0;width:14px;height:14px;padding:0;border:2px solid var(--ink);background:var(--g-gold);box-shadow:0 0 0 2px var(--paper)}

/* ---------- Weapons: the weapons themselves (2026-10-24) ----------
   The fighter types as small chips; the family's weapons as big renders on paper plates (the picked one lifted with the
   pick ring, a locked one greyed with its price); under them the picked weapon: its name, one line, its five mastery
   steps on a track (reached gold, the next dashed, a worn form ringed), and one line of status or the one button. */
.wb{display:grid;gap:14px}
.wb-types{display:flex;flex-wrap:wrap;gap:6px}
.wb-type{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border:var(--line-xs) solid var(--ink);border-radius:var(--r-pill);background:rgba(255,248,234,.7);font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink-2);transition:transform .12s var(--out),box-shadow .12s var(--out)}
.wb-type img{width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;object-position:50% 20%;background:#e9cf9f}
.wb-type.on{background:var(--g-paper);color:var(--ink);box-shadow:var(--ring-pick),0 3px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){ .wb-type:not(.on):hover{transform:translateY(-2px)} }
.wb-type:active{transform:translateY(1px)}
.wb-type:focus-visible,html.kbd-nav .wb-type:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.wa-row{display:grid;grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;gap:18px}
.wa-row[data-n="4"]{grid-template-columns:repeat(4,minmax(0,200px))}
.wa-tile{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:grid;justify-items:center;gap:6px;padding:10px 10px 12px;border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile-lg);background:radial-gradient(circle at 50% 42%,#fffaf0 0,#f5e3bd 70%);box-shadow:inset 0 2px 0 #fff,var(--drop-xs);transition:transform .14s var(--out),box-shadow .14s var(--out)}
.wa-tile img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(42,26,46,.28));pointer-events:none}
.wa-tile b{font:400 var(--t-name)/1 var(--f-display);color:var(--ink)}
.wa-tile.on{transform:translateY(-4px);box-shadow:var(--ring-pick),0 7px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){ .wa-tile:not(.on):hover{transform:translateY(-3px);box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--ink)} }
.wa-tile:focus-visible,html.kbd-nav .wa-tile:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.wa-tile.locked{background:radial-gradient(circle at 50% 42%,#f3e6cc 0,#e3cfa8 70%)}
.wa-tile.locked img{filter:grayscale(.85) brightness(1.08) contrast(.85) drop-shadow(0 6px 4px rgba(42,26,46,.18));opacity:.7}
.wa-tile.locked b{color:var(--ink-2)}
.wa-pips{display:flex;gap:4px}
.wa-pips i{width:10px;height:10px;box-sizing:border-box;border:2px solid var(--ink-3);border-radius:50%;background:var(--paper)}
.wa-pips i.on{border-color:var(--ink);background:var(--g-gold)}
.wa-price{display:inline-flex;align-items:center;gap:3px;font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink-2)}
.wa-price .ic{width:17px;height:17px}
.wd{justify-self:center;width:min(720px,100%);display:grid;justify-items:center;gap:12px;padding:14px 16px 16px;border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile-lg);background:var(--g-paper);box-shadow:inset 0 2px 0 #fff,var(--drop-xs);text-align:center}
.wd-head h3{margin:0;font:400 var(--t-hero, 30px)/1 var(--f-display);color:var(--ink)}
.wd-head p{margin:5px 0 0;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.wd-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%}
.wd-track::before{content:"";position:absolute;left:10%;right:10%;top:25px;height:4px;border-radius:999px;background:rgba(42,26,46,.14)}
.wd-step{all:unset;box-sizing:border-box;position:relative;z-index:1;display:grid;justify-items:center;gap:5px;cursor:default;min-width:0}
button.wd-step{cursor:pointer}
.wd-step>i{position:relative;width:52px;height:52px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:var(--line-s) solid var(--ink);background:var(--paper-2);font-style:normal;transition:transform .14s var(--out),box-shadow .14s var(--out)}
.wd-step>i .ic{width:26px;height:26px;opacity:.45}
.wd-step small{font:var(--w-strong) var(--t-caption)/1.15 var(--f-ui);color:var(--ink-3);text-wrap:balance}
.wd-step.got>i{background:var(--g-gold);box-shadow:0 3px 0 var(--ink)}
.wd-step.got>i .ic{opacity:1}
.wd-step.got small{color:var(--ink)}
.wd-step.next>i{border-style:dashed;background:#fffaf0}
.wd-step.next>i .ic{opacity:.75}
.wd-step.worn>i{box-shadow:var(--ring-pick),0 3px 0 var(--ink)}
.wd-step>i em{position:absolute;top:-6px;right:-6px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);background:#56b04a;font:700 12px/1 var(--f-ui);font-style:normal;color:#fff}
@media (hover:hover) and (pointer:fine){ button.wd-step:hover>i{transform:translateY(-2px)} }
.wd-step:focus-visible>i,html.kbd-nav .wd-step:focus>i{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.wd-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-height:30px}
.wd-next{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3);cursor:default}
.wd-up{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 4px 0 10px;cursor:pointer;border:2px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:0 2px 0 var(--ink);font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink)}
.wd-up i{display:inline-flex;align-items:center;gap:2px;padding:2px 7px 2px 3px;border-radius:var(--r-pill);background:rgba(42,26,46,.84);font-style:normal;color:var(--gold-hi)}
.wd-up i .ic{width:15px;height:15px}
.wd-up:disabled{cursor:default;opacity:.55;box-shadow:none}
.wd-foot .ar-unlock{min-height:44px;font-size:var(--t-name-s)}
@media (prefers-reduced-motion:reduce){ .wa-tile,.wd-step>i,.wb-type{transition:none} }
@media (max-width:720px){
  .wb-types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:2px 4px 4px}
  .wb-types::-webkit-scrollbar{display:none}
  .wb-type{flex:none}
  /* a phone: the weapons in one swipeable strip, so the picked one's steps sit right under it */
  .wa-row,.wa-row[data-n="4"]{display:flex;justify-content:flex-start;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:6px 4px 8px}
  .wa-row::-webkit-scrollbar{display:none}
  .wa-tile{flex:0 0 128px;padding:8px 8px 10px}
  .wa-tile b{font-size:var(--t-name-s)}
  .wd-step>i{width:44px;height:44px}
  .wd-track::before{top:21px}
}
/* the fighter's web wants room: its column is wider than the other trees' */
@media (min-width:721px){ .ar-treebox:has(.tw-map){grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr)} }

/* ---------- a fighter's talent points (2026-10-24): a chip in the purse on the Fighters tab, and the same star wherever they
   are counted (the web's middle, the panel's foot, the Learn price). The owner: "Not clear to me how to track my star
   currencies for this tree". */
.tp-chip b{color:#ffe08a}
.tp-chip .ic{width:28px;height:28px}
.tw-pts .ic{width:16px;height:16px;flex:none}
.ip-tp{display:inline-flex;align-items:center;gap:4px}
.ip-tp .ic{width:17px;height:17px;flex:none}
.at-m b{white-space:nowrap}
/* a form's playstyle under its name on the weapon ladder (2026-10-24) */
.wd-step .wd-tag{display:block;margin-top:1px;font:var(--w-strong) var(--t-label)/1.1 var(--f-ui);color:var(--ink-3)}