/* Arbre de compétences : même cuir sombre et laiton que la sacoche. */
#skills{padding:24px}
.panel.skills-panel{width:min(1060px,96vw);max-width:none;max-height:92dvh;overflow:auto;padding:0;text-align:left;background:linear-gradient(125deg,#33372d,#1a2320);color:#e6d6b3;border:1px solid #b18e58;border-radius:5px;box-shadow:0 0 0 5px #171f1c,0 0 0 6px #66563d,0 24px 100px #0009}
.skills-heading{display:flex;align-items:center;gap:18px;padding:14px 26px;border-bottom:1px solid #8b724957;background:linear-gradient(90deg,#68533b33,transparent);position:relative}
.skills-heading .eyebrow{color:#c8a773;font:10px 'Courier New',monospace;letter-spacing:2px}
.skills-heading h2{font:26px Georgia,serif;color:#f1dfbb;margin:3px 0}
.skills-heading p{color:#b9b29e;margin:0;font:12px system-ui,sans-serif}
.skills-heading .close-panel{right:20px;top:20px;width:36px;height:36px;border:1px solid #92784d;border-radius:50%;color:#e4cba1;background:#1a231f;font-size:26px;line-height:1}
.skills-heading .skills-reset{margin-left:auto;margin-right:52px;padding:7px 12px;border:1px solid #92784d99;background:#1a231f;color:#e4cba1;border-radius:3px;font:11px 'Courier New',monospace;letter-spacing:1px;cursor:pointer}
.skills-heading .skills-reset:disabled{opacity:.4;cursor:default}
.skills-footer{padding:12px 30px 18px;border-top:1px solid #8b724940;color:#a89e86;font:11px system-ui,sans-serif}

/* Emplacements K / F / G */
.st-slots-bar{display:flex;align-items:center;gap:16px;padding:8px 26px;border-bottom:1px solid #8b724940;background:#111a183b}
.st-slots{display:flex;gap:10px;flex:1}
.st-slot{position:relative;display:grid;flex:1;min-width:0;grid-template-columns:40px minmax(0,1fr);gap:0 8px;align-items:center;padding:5px 8px 5px 7px;border:2px solid #82643d;border-radius:6px;background:#101916}
.st-slot.filled{border-color:#caa05a}
.st-slot-key{position:absolute;left:-2px;top:-2px;min-width:20px;padding:1px 5px;border-radius:5px 0 5px 0;background:#caa05a;color:#241a0c;font:700 11px system-ui,sans-serif;text-align:center}
.st-slot-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid #92784d88;border-radius:50%;color:#e8d499}
.st-slot-icon svg{width:28px;height:28px}
.st-slot select{background:#1a231f;color:#f1dfbb;border:1px solid #92784d99;border-radius:3px;padding:3px 6px;width:100%;min-width:0}

/* Zones de l'arbre */
.st-zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.st-zone[data-zone=weapon]{grid-column:1/-1}
.st-zone[data-zone=base]{border-right:1px solid #8b724940}
.st-zone{padding:16px 24px 18px;border-bottom:1px solid #8b724940;background:linear-gradient(90deg,color-mix(in srgb,var(--zone) 9%,transparent),transparent 55%)}
.st-zone-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.st-zone-head h3{margin:0;font:21px Georgia,serif;color:var(--zone)}
.panel.skills-panel .st-zone-head p{margin:0;max-width:640px;color:#cdbf9f;font:12px/1.4 system-ui,sans-serif}
.st-zone-body{overflow-x:auto;padding-bottom:4px}
.st-graph{position:relative;min-height:116px}
.st-graph>svg{position:absolute;inset:0;pointer-events:none}
.st-graph path{fill:none;stroke:#5b4e37;stroke-width:2.5;stroke-linecap:round}
.st-graph path.on{stroke:var(--zone);stroke-width:3.5;filter:drop-shadow(0 0 4px var(--zone))}

/* Nœuds */
.st-node{display:flex;flex-direction:column;align-items:center;gap:4px;width:150px;padding:2px 4px 0;border:0;background:none;color:#e6d6b3;cursor:pointer;font:inherit}
.st-graph .st-node{position:absolute}
.st-orb{width:64px;height:64px;display:grid;place-items:center;border:2px solid #6c5c40;border-radius:50%;background:radial-gradient(#3a3a2c,#101916);color:#8c846e;transition:transform .16s,box-shadow .16s,border-color .16s,color .16s}
.st-orb svg{width:34px;height:34px}
.st-orb .spell-icon,.st-detail-orb .spell-icon{width:78%;height:78%;color:inherit}.st-slot-icon .spell-icon{width:80%;height:80%}
.st-node.locked .spell-icon{filter:grayscale(.9) brightness(.55)}
.st-node:hover .st-orb,.st-node:focus-visible .st-orb{transform:scale(1.08)}
.st-node:focus-visible{outline:none}
.st-node:focus-visible .st-orb{outline:2px solid #fff;outline-offset:3px}
.st-node.can .st-orb{border-color:var(--zone);color:var(--zone);animation:st-glow 1.8s ease-in-out infinite}
.st-node.learned .st-orb{border-color:var(--zone);color:var(--zone);background:radial-gradient(color-mix(in srgb,var(--zone) 30%,#26301f),#101916);box-shadow:0 0 14px -2px var(--zone)}
.st-node.full .st-orb{border-color:#f0d594;background:radial-gradient(color-mix(in srgb,var(--zone) 45%,#2b3322),#101916);box-shadow:0 0 0 3px #101916,0 0 0 5px var(--zone),0 0 18px var(--zone)}
.st-node.locked{opacity:.8}
.st-orb .painted{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 2px #000a)}
.st-node.locked .painted{filter:grayscale(.9) brightness(.55)}
.st-node.can .painted{filter:drop-shadow(0 2px 2px #000a) saturate(1.1)}
.st-detail-orb .painted,.st-slot-icon .painted{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 2px 2px #000a)}
.st-node.selected .st-orb{box-shadow:0 0 0 3px #101916,0 0 0 5px #fff}
.st-node.selected.full .st-orb{box-shadow:0 0 0 3px #101916,0 0 0 5px #fff,0 0 18px var(--zone)}
.st-pips{display:flex;gap:3px;height:7px}
.st-pips i{width:11px;height:6px;border-radius:3px;border:1px solid #92784d99;background:#151d19}
.st-pips i.on{background:var(--zone);border-color:var(--zone)}
.st-name{max-width:140px;font:600 12.5px/1.2 Georgia,serif;text-align:center}
.st-node small{max-width:140px;color:#b3a98f;font:10.5px/1.2 system-ui,sans-serif;text-align:center}
.st-node.learned .st-name{color:#f3e2bd}
@keyframes st-glow{50%{box-shadow:0 0 14px -1px var(--zone)}}
@media(prefers-reduced-motion:reduce){.st-node.can .st-orb{animation:none}.st-orb{transition:none}}

/* Armes : un groupe par type */
.st-families{display:flex;flex-direction:column;gap:12px}
.st-family{display:flex;gap:16px;align-items:center;padding:8px 14px;border:1px solid #8d744b55;border-radius:8px;background:#101916a8}
.st-family h4{width:90px;margin:0;font:700 14px Georgia,serif;color:var(--zone);flex:none}
.st-family h4 small{display:block;margin-top:3px;font:400 11px Georgia,serif;color:#b9ab8b}
.st-family-body{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.st-techniques,.st-upgrades{display:flex;gap:6px;flex-wrap:wrap}
.st-family .st-node{width:132px}
.st-sep{align-self:stretch;width:1px;margin:4px 6px;background:linear-gradient(transparent,#8d744b99,transparent)}
.st-node.equipped .st-name::after{content:" ★";color:var(--zone)}
.panel.skills-panel .st-empty{margin:0;color:#b5aa90;font:11px system-ui,sans-serif}

/* Fiche du nœud pointé ou choisi (collée en bas du panneau) */
.st-detail{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:64px minmax(0,1fr) 240px;gap:16px;align-items:start;padding:14px 24px;border-top:2px solid #b18e58;background:#1b2822;box-shadow:0 -12px 24px #0008;min-height:110px}
.st-detail-orb{width:64px;height:64px;display:grid;place-items:center;border:2px solid #caa05a;border-radius:50%;background:radial-gradient(#4a4630,#101916);color:#e8d499}
.st-detail-orb svg{width:36px;height:36px}
.st-detail-copy small{display:block;color:#c8a773;font:10px 'Courier New',monospace;letter-spacing:1.5px;text-transform:uppercase}
.st-detail-copy h3{margin:2px 0 4px;font:20px Georgia,serif;color:#f1dfbb}
.panel.skills-panel .st-detail-copy p{margin:0;max-width:60ch;color:#e0d4b6;font:12.5px/1.5 system-ui,sans-serif}
.st-detail-copy em{display:block;margin-top:4px;color:#e8d499;font:italic 12px system-ui,sans-serif}
.st-needs{display:flex;gap:6px 14px;flex-wrap:wrap;margin:6px 0 0;padding:0;list-style:none;font:11px system-ui,sans-serif;color:#d2aa7b}
.st-needs li::before{content:"✗ ";color:#c46a5a}.st-needs li.ok{color:#9fcfa0}.st-needs li.ok::before{content:"✓ ";color:#9fcfa0}
.st-detail-side{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.st-detail-rank{display:flex;gap:4px}
.st-detail-rank i{width:16px;height:8px;border-radius:4px;border:1px solid #92784d99;background:#151d19}.st-detail-rank i.on{background:#e1c870;border-color:#e1c870}
.st-reason{color:#d2aa7b;font:11px system-ui,sans-serif;text-align:right}
.st-learn{padding:7px 16px;border:2px solid #e1bd78;border-radius:4px;background:linear-gradient(#edce8c,#b88b4d);color:#241a0c;font:700 12px system-ui,sans-serif;cursor:pointer}
.st-learn:disabled{border-color:#6b5c41;background:#26302b;color:#8e866f;cursor:default}
.st-assign{display:flex;align-items:center;gap:6px;color:#c0b498;font:11px system-ui,sans-serif}
.st-key{width:30px;height:28px;border:1px solid #92784d;border-radius:5px;background:#1a231f;color:#f1dfbb;font:700 12px system-ui,sans-serif;cursor:pointer}
.st-key.on{background:#caa05a;color:#241a0c;border-color:#caa05a}