/* The skill tree (src/arena/loadout.js treeHTML / paintTree): branches side by side, tiers top to bottom, wires to what a
   rank 3 opens. Shared by the Lab (arena.html, inside .lo) and the read-only tree on the select screen (index.html,
   src/arena/treeview.js, inside .tv). lab.css adds the clarity pass's look on top. Colours: each page's --gold, --cyan,
   --ink, --mute, --rule, --ember, --bg. */
.tr-tabs{display:none;gap:6px}
.tr-tab{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;font-family:'Bodoni Moda',serif!important;font-size:16px!important;font-weight:700}
.tr-tab .ic{width:18px;height:18px}.tr-tab b{font-family:'Barlow',system-ui,sans-serif;font-size:11px;color:var(--gold);font-weight:600}
.tr-tab[aria-selected=true]{border-color:var(--gold)!important;background:linear-gradient(180deg,rgba(224,178,90,.16),rgba(224,178,90,.02))!important}
.tr-tab.tr-energy[aria-selected=true]{border-color:var(--cyan)!important;background:linear-gradient(180deg,rgba(127,230,255,.14),rgba(127,230,255,.02))!important}
.tr-tree{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tr-br{border:1px solid var(--rule);padding:12px 10px 14px;min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%)}
.tr-br header{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;margin-bottom:8px}
.tr-br h3{margin:0;font-family:'Bodoni Moda',serif;font-size:22px;display:flex;align-items:center;gap:8px}.tr-br h3 .ic{width:20px;height:20px}
.tr-br header p{grid-column:1/-1;margin:0;font-size:11px;color:var(--mute)}.tr-bpts{font-size:11px;color:var(--gold);grid-row:1;grid-column:2}
.tr-iron h3{color:#c9ced6}.tr-gold h3{color:var(--gold)}.tr-energy h3,.tr-energy .tr-bpts{color:var(--cyan)}
.tr-grid{position:relative;display:flex;flex-direction:column;gap:14px}
.tr-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tr-wires path{fill:none;stroke:rgba(233,230,223,.16);stroke-width:2}
.tr-wires path.half{stroke:rgba(224,178,90,.38);stroke-dasharray:4 4}
.tr-wires path.lit{stroke:var(--gold);filter:drop-shadow(0 0 4px rgba(224,178,90,.7))}
.tr-energy .tr-wires path.half{stroke:rgba(127,230,255,.4)}.tr-energy .tr-wires path.lit{stroke:var(--cyan);filter:drop-shadow(0 0 4px rgba(127,230,255,.7))}
.tr-row{display:grid;grid-template-columns:44px repeat(3,1fr);align-items:start;min-height:92px}
.tr-tl{grid-column:1;font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:18px;line-height:1.4}
.tr-tl small{display:block;letter-spacing:.04em;text-transform:none;opacity:.8}
.tr-row.shut .tr-tl{color:var(--ember)}
:is(.lo,.tv) .tn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0!important;border:0!important;background:none!important;min-width:0}
.tn-ic{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--rule);background:#0f1013;color:var(--mute);transform:rotate(0);transition:color .2s,border-color .2s,box-shadow .3s,background .3s}
.tn-ic .ic{width:26px;height:26px}
.tn-nm{font-size:10.5px;line-height:1.2;text-align:center;color:var(--ink);max-width:100%}
.tn-rk{font-size:9.5px;color:var(--mute);letter-spacing:.06em}
.tn-pips{display:flex;gap:4px;margin-top:-1px}.tn-pips i{width:7px;height:7px;border:1px solid rgba(233,230,223,.35);transform:rotate(45deg);background:transparent;transition:background .25s,border-color .25s}
.tn-key{position:absolute;top:-6px;left:calc(50% + 18px);font-size:9px;font-weight:600;border:1px solid var(--rule);background:var(--bg);color:var(--gold);padding:0 4px;line-height:14px}
.tn-fab{color:var(--cyan)}
.tn:hover .tn-ic{border-color:rgba(233,230,223,.45)}
.tn.open .tn-ic{border-color:rgba(224,178,90,.6);box-shadow:0 0 0 1px rgba(224,178,90,.2),0 0 12px rgba(224,178,90,.18);color:var(--ink)}
.tn.part .tn-ic{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px rgba(224,178,90,.35)}
.tn.max .tn-ic{border-color:var(--gold);color:#14110a;background:linear-gradient(160deg,#f0cd83,#b88a3c);box-shadow:0 0 16px rgba(224,178,90,.55)}
.tn .tn-pips i.on{background:var(--gold);border-color:var(--gold)}
.tr-energy .tn.open .tn-ic{border-color:rgba(127,230,255,.6);box-shadow:0 0 12px rgba(127,230,255,.18)}
.tr-energy .tn.part .tn-ic{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px rgba(127,230,255,.35)}
.tr-energy .tn.max .tn-ic{border-color:var(--cyan);background:linear-gradient(160deg,#aef1ff,#3fa8c4);box-shadow:0 0 16px rgba(127,230,255,.55)}
.tr-energy .tn .tn-pips i.on{background:var(--cyan);border-color:var(--cyan)}
.tn.max .tn-rk{color:var(--gold)}.tr-energy .tn.max .tn-rk{color:var(--cyan)}
.tn.locked{opacity:.34;filter:grayscale(1)}
.tn.sel .tn-ic,.tn:focus-visible .tn-ic{outline:2px solid var(--ink);outline-offset:3px}
.tn.pop .tn-ic{animation:takeIc .55s ease-out}
@media (max-width:759px){.tr-tabs{display:flex}.tr-tree{grid-template-columns:1fr}.tr-tree .tr-br{display:none}.tr-tree[data-tab=iron] .tr-iron,.tr-tree[data-tab=gold] .tr-gold,.tr-tree[data-tab=energy] .tr-energy{display:block}
  .tr-br header p{display:none}.tr-row{min-height:88px}}
@media (prefers-reduced-motion:reduce){.tn.pop .tn-ic{animation:none}}

/* the read-only tree in a popup (src/arena/treeview.js): the page's theme colours, the Lab's buttons, a wide panel */
.tv{--gold:var(--ss-gold);--cyan:var(--ss-cyan);--ink:var(--ss-ink);--mute:var(--ss-mute);--ember:var(--ss-ember);--rule:rgba(207,212,219,.14);--bg:#0b0c0e;min-width:0}
.tv button{font:inherit;color:var(--ink);cursor:pointer}
.tv .tn{cursor:help}
.tv .tr-tabs{margin-bottom:10px}
.tv .tr-tab{min-height:44px;padding:6px 10px;border:1px solid var(--ss-chrome-lo);background:linear-gradient(180deg,#2a2f36,#171a1f 55%,#111317);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px #000}
.ss-dim>.ss-panel.tv-panel{width:min(1080px,100%)}
.tv-panel .ss-panel-head{padding-right:56px}
.tv-crest{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ss-gold);color:var(--ss-gold);background:radial-gradient(circle,rgba(224,178,90,.18),transparent 70%);box-shadow:0 0 14px rgba(224,178,90,.3),inset 0 0 0 3px rgba(0,0,0,.5)}
.tv-crest .ic{width:24px;height:24px}
@media (max-width:760px){.ss-dim>.ss-panel.tv-panel{max-height:92vh}.tv-panel .ss-panel-body{padding:12px 10px calc(12px + env(safe-area-inset-bottom))}.tv .tr-br{padding:10px 6px 12px}.tv .tr-row{grid-template-columns:36px repeat(3,minmax(0,1fr))}}
@media (max-height:520px) and (orientation:landscape){.ss-dim:has(>.tv-panel){place-items:center}.ss-dim>.ss-panel.tv-panel{width:100%}}