/* Shared skill tree: bases in the center, one column for each specialization. */
.skill-tree { --skill-size:72px; padding:20px 0 28px; }
.skill-tree-bases { display:flex; flex-direction:column; align-items:center; gap:16px; }
.skill-tree-branches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; margin-top:23px; }
.skill-tree-branch { min-width:0; text-align:center; }
.skill-tree-branch h3 { display:flex; align-items:center; justify-content:center; min-height:2.8em; margin:0 0 15px; padding:0 3px; color:#f0eaff; font:700 .88rem/1.4 'DM Sans',sans-serif; overflow-wrap:anywhere; }
.skill-tree-branch-nodes { display:flex; align-items:center; flex-direction:column; gap:25px; }
.skill-tree-node { position:relative; display:block; width:var(--skill-size); height:var(--skill-size); flex:none; padding:0; border:2px solid #8796b2; border-radius:9px; background:#182032; color:#fff; cursor:pointer; box-shadow:0 5px 14px #0005; transition:border-color .18s,box-shadow .18s,transform .18s; }
.skill-art { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.skill-tree-node.base { border-color:#bea6e0; }
.skill-tree-node.locked { border-color:#60677e; }
.skill-tree-node.locked .skill-art { filter:saturate(.45) brightness(.72); }
.skill-tree-node.equipped { border-color:#8fe2b6; box-shadow:0 0 0 2px #8fe2b629,0 4px 15px #0005; }
.skill-tree-node:focus-visible { outline:3px solid #f5dca8; outline-offset:5px; }
.skill-node-level { position:absolute; z-index:1; bottom:-10px; left:50%; transform:translateX(-50%); min-width:47px; padding:2px 5px; border:1px solid #8e86a6; border-radius:5px; color:#ede7ff; background:#181b2cf5; font:700 .62rem/1.35 'DM Sans',sans-serif; white-space:nowrap; }
.skill-node-selected { position:absolute; z-index:2; top:-8px; right:-8px; width:21px; height:21px; display:grid; place-items:center; border:1px solid #caffdf; border-radius:50%; color:#102b1c; background:#91e8b5; font-size:14px; font-weight:800; }
.skill-node-lock { position:absolute; top:3px; right:3px; padding:2px; border-radius:4px; background:#101320b8; font-size:12px; line-height:1; }
.skills-page .loadout-summary .primary-button { width:100%; }
.class-preview-content .skill-tree { padding-top:5px; }
.class-preview-content .skill-tree-branch h3 { color:#f0eaff; font-size:.88rem; }
.class-preview-modal { overscroll-behavior:contain; scrollbar-gutter:stable; }
.skill-detail-modal { width:min(430px,calc(100vw - 24px)); max-height:90dvh; overscroll-behavior:contain; }
.skill-detail-close { display:block; margin:0 0 14px auto; }
.skill-detail-art { width:144px; aspect-ratio:1; margin:0 auto 20px; border:2px solid #c0a7ed; border-radius:12px; box-shadow:0 8px 28px #0005; }
.skill-detail-modal h2 { overflow-wrap:anywhere; }
.skill-detail-meta { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 17px; }
.skill-detail-meta span { padding:5px 8px; border:1px solid #9382ae66; border-radius:5px; background:#262a42; color:#e8d7fc; font-size:.72rem; }
.skill-detail-modal #skill-detail-description { color:#e3deeb; font-size:.9rem; line-height:1.75; }
.skill-detail-modal .skill-value { font-size:.81rem; color:#e8ce93; }
.skill-detail-action { padding-top:15px; margin-top:20px; border-top:1px solid #9582b444; }
.skill-detail-action .primary-button { width:100%; }
.skill-detail-hint,.skill-detail-action .base-skill-label { display:block; margin:12px 0 0; color:#bbcbe2; font-size:.77rem; line-height:1.6; }
.combat-skill-option .combat-skill-icon { display:block; width:54px; min-width:54px; height:54px; flex:0 0 54px; border:1px solid #b29acb; border-radius:7px; overflow:hidden; }
.combat-skill-option .skill-art { width:100%; height:100%; object-fit:cover; }
@media (hover:hover) {
  .skill-tree-node:hover { transform:translateY(-2px); border-color:#e5ceff; box-shadow:0 0 18px #b49aea3d; }
}
@media (max-width:360px) {
  .skill-tree { --skill-size:64px; }
  .skill-tree-branches { gap:12px; }
  .skill-tree-branch h3,.class-preview-content .skill-tree-branch h3 { font-size:.79rem; }
  .skill-detail-modal .item-modal-content { padding:18px; }
  .combat-skill-option .combat-skill-icon { width:46px; min-width:46px; height:46px; flex-basis:46px; }
}
@media (prefers-reduced-motion:reduce) {
  .skill-tree-node { transition:none; }
}