.skills-atlas-page{padding:16px!important;background:#faf7ef;min-height:100%;color:var(--text);--atlas-paper:#fffdf6;--atlas-ink:#173b51}
.skills-atlas-page *{box-sizing:border-box}
.atlas-hero{display:flex;align-items:center;gap:20px;min-height:195px;padding:25px;background:linear-gradient(90deg,#fffdf4e8 0%,#f5fff7e8 70%,#ffffff10),url('../assets/skills-ui/ranger-hero.webp') center 45%/cover;border:1px solid #d5dfbc;border-radius:20px;margin-bottom:18px}
.atlas-class-emblem{width:118px;flex-shrink:0;font-size:70px;text-align:center}
.atlas-class-emblem img{width:100%;display:block}
.atlas-class-title{flex:1;min-width:130px}
.atlas-class-title h1{font-family:Cinzel,serif;font-size:clamp(22px,2.3vw,36px);color:#08644c;margin:0 0 8px}
.atlas-class-title p{color:#426963;font-style:italic;font-size:14px;line-height:1.6}
.atlas-sp{display:flex;flex-direction:column;gap:8px;text-align:center;padding:18px;background:#eff2ffed;border:1px solid #d5ddff;border-radius:12px;flex-shrink:0;max-width:175px;color:#42557e}
.atlas-sp strong{font:700 30px Cinzel,serif;color:#5768ff}
.atlas-sp small{font-size:11px}
.atlas-passives{max-width:360px;border-left:1px solid #c9d9d4;padding-left:18px;font-size:11px;line-height:1.5}
.atlas-passives p{margin:6px 0}
.atlas-passives strong{color:#08724c}
.atlas-passives span{color:#526c82}
.skills-atlas-page .prestige-path-card{border:1px solid #ead5a4;background:linear-gradient(100deg,#fff3ca,#fffdf4);box-shadow:0 5px 20px #87703a10;border-radius:18px;margin-bottom:18px}
.atlas-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
.atlas-tree{background:var(--atlas-paper);border:1px solid #e7ddc8;border-radius:20px;overflow:hidden;min-width:0;box-shadow:0 5px 20px #6c512510}
.atlas-tree-heading{display:flex;align-items:center;gap:18px;padding:14px 20px}
.atlas-tree-heading h2,.atlas-details h2{font:700 22px Cinzel,serif;margin:0;color:var(--atlas-ink)}
.atlas-tree-heading span{font-size:12px;color:var(--text2)}
.atlas-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 8px 8px}
.atlas-branch{min-width:0;border:1px solid #d0bd86;border-radius:28px 28px 18px 18px;background:linear-gradient(#fff5d920,#fff5d940),url('../assets/skills-ui/branch-attack.webp') center/cover;padding:18px 9px;min-height:610px}
.atlas-branch-1{background-image:linear-gradient(#f4ffe520,#f4ffe540),url('../assets/skills-ui/branch-companions.webp')}
.atlas-branch-2{background-image:linear-gradient(#e6f4ff20,#e6f4ff40),url('../assets/skills-ui/branch-survival.webp')}
.atlas-branch h3{font:700 15px Cinzel,serif;text-align:center;color:#fffbe9;background:linear-gradient(100deg,#872e25,#bb6042,#872e25);border:2px solid #d9b264;border-radius:9px;padding:15px 3px;margin:0 0 18px;box-shadow:0 3px 8px #42331430;min-height:54px;display:grid;place-items:center}
.atlas-branch-1 h3{background:linear-gradient(100deg,#175831,#488652,#175831)}
.atlas-branch-2 h3{background:linear-gradient(100deg,#263e68,#57769b,#263e68)}
.atlas-nodes{display:flex;flex-direction:column;align-items:center;gap:18px}
.atlas-node{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;max-width:100%;width:180px;padding:0;cursor:pointer;color:#173354;font:inherit;position:relative}
.atlas-node>img{width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 3px 3px #4b390e50);transition:transform .15s}
.atlas-node:hover>img{transform:translateY(-3px)}
.atlas-node-label{position:relative;margin-top:-15px;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:9px 6px;background:linear-gradient(100deg,#fff3d7,#fffef4,#fff0cc);border:1px solid #d0a651;border-radius:10px;box-shadow:0 3px 8px #55340f25;font-size:11px}
.atlas-node-label strong{font-size:12px}
.atlas-node-label small{font-size:9px;line-height:1.4;color:#6b572e}
.atlas-node.selected .atlas-node-label{outline:2px solid #ff9700;box-shadow:0 0 20px #fbbf2470}
.atlas-node:focus-visible{outline:3px solid #5b70ff;border-radius:14px;outline-offset:4px}
.atlas-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.atlas-badges b{font-size:9px;border-radius:20px;padding:3px 6px;background:#ece2ff;color:#7044dc}
.atlas-badges .active{background:#ffded7;color:#bc362a}
.atlas-badges .complete{background:#d9fbe2;color:#00894b}
.atlas-cooldown{font-size:10px;background:#fff7deed;border-radius:6px;padding:4px;margin-top:4px;line-height:1.4}
.atlas-placeholder{width:88px;height:88px;border:6px double #d5ac52;border-radius:50%;background:radial-gradient(circle,#ece0a6,#5b6544);display:grid;place-items:center;font-size:35px;margin-bottom:10px;box-shadow:0 3px 8px #433b3050}
.atlas-sidebar{display:flex;flex-direction:column;gap:16px;min-width:0}
.atlas-details{background:var(--atlas-paper);border:1px solid #d6b778;border-radius:18px;padding:20px;box-shadow:inset 0 0 0 5px #eee2be55,0 4px 12px #68521b12}
.atlas-details h2{padding-bottom:14px;border-bottom:1px solid #e9d8b1}
.atlas-detail-title{display:flex;gap:10px;align-items:center;margin:14px 0}
.atlas-detail-title img{width:90px;height:90px;object-fit:contain}
.atlas-detail-title h3{font:700 18px Cinzel,serif;margin:0}
.atlas-details p{font-size:13px;line-height:1.65;color:var(--text2)}
.atlas-next{background:#e6dbc42f;border:1px solid #ecdfc5;border-radius:10px;padding:12px;font-size:12px}
.atlas-details .btn{width:100%;margin-top:12px;min-height:44px;white-space:normal}
.atlas-details .btn:disabled{opacity:.6;cursor:default}
.skills-atlas-page .skills-reskill-card{flex-wrap:wrap}
.skills-atlas-page .inherited-skill{max-width:100%!important}
.atlas-warrior .atlas-class-title h1{color:#993a27}
.atlas-mage .atlas-class-title h1{color:#7544a3}
.atlas-rogue .atlas-class-title h1{color:#394563}

[data-theme=dark] .skills-atlas-page{background:#171e26;--atlas-paper:#222b36;--atlas-ink:#e7d7ad}
[data-theme=dark] .atlas-hero{background:linear-gradient(90deg,#1d2a2cf2,#1c2b32e8),url('../assets/skills-ui/ranger-hero.webp') center/cover;border-color:#536447}
[data-theme=dark] .atlas-class-title h1,[data-theme=dark] .atlas-passives strong{color:#b4e6c5}
[data-theme=dark] .atlas-class-title p,[data-theme=dark] .atlas-passives span{color:#bbc9d6}
[data-theme=dark] .atlas-sp{background:#29344c;color:#c3cce3;border-color:#4b5679}
[data-theme=dark] .skills-atlas-page .prestige-path-card{background:#302d24;border-color:#726343}
[data-theme=dark] .atlas-next{background:#32342f;border-color:#625a44}
[data-theme=dark] .atlas-tree{border-color:#655b43}
[data-theme=dark] .atlas-details{border-color:#7c6c45}

@media(min-width:1600px){.atlas-node>img{width:115px;height:115px}
.atlas-nodes{gap:22px}
.atlas-branch{min-height:670px}
}

@media(max-width:1200px){.atlas-hero{flex-wrap:wrap}
.atlas-passives{max-width:none;flex:1;min-width:220px}
.atlas-layout{grid-template-columns:minmax(0,1fr) 250px}
.atlas-tree-heading{flex-wrap:wrap;gap:5px}
.atlas-branch h3{font-size:12px}
.atlas-node-label strong{font-size:11px}
}

@media(max-width:980px){.atlas-layout{grid-template-columns:1fr}
.atlas-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.atlas-details{grid-row:span 2}
.atlas-branch{min-height:590px}
}

@media(max-width:560px){.skills-atlas-page{padding:8px!important}
.atlas-hero{padding:16px;gap:12px}
.atlas-class-emblem{width:75px;font-size:48px}
.atlas-class-title h1{font-size:23px}
.atlas-class-title p{font-size:12px}
.atlas-sp{max-width:none;flex:1}
.atlas-passives{flex-basis:100%;border:0;padding:0}
.atlas-branches{grid-template-columns:1fr;gap:12px}
.atlas-branch{min-height:0;padding:15px}
.atlas-nodes{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:start;gap:16px 10px}
.atlas-node{width:calc(50% - 8px)}
.atlas-node>img{width:95px;height:95px}
.atlas-sidebar{display:flex}
.atlas-details{padding:18px}
.atlas-tree-heading{padding:16px}
.atlas-node-label small{font-size:10px}
}

/* Lines follow the real prerequisites, including links between branches. */
.atlas-branches{position:relative}
.atlas-edges{position:absolute;left:8px;top:92px;width:calc(100% - 16px);height:calc(var(--atlas-rows)*240px);z-index:1;pointer-events:none;overflow:visible}
.atlas-edges path{fill:none;stroke:#997f54;stroke-width:2.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.atlas-edges path.ready{stroke:#3f8d60;stroke-width:3;stroke-dasharray:none}
.atlas-nodes{position:relative;height:calc(var(--atlas-rows)*240px)}
.atlas-node{position:absolute;top:calc(var(--atlas-row)*240px);left:50%;transform:translateX(-50%);z-index:2}
.atlas-branch{min-height:0}
.skills-atlas-page .prestige-path-orb{width:72px;height:72px;flex:0 0 72px;border-radius:50%;border:4px double #cfa249;background:radial-gradient(circle at 35% 25%,#fffce7,#ffe29b 65%,#e7bc61);font-size:32px;color:#ad791a;box-shadow:0 0 0 5px #fff8df,0 4px 12px #89622120}
.skills-atlas-page .prestige-path-orb b{font-size:16px;color:white}
.atlas-hero{background:linear-gradient(90deg,#fffdf4ef 0%,#f5fff7e8 80%,#ffffff40),url('../assets/skills-ui/ranger-hero.webp') center 45%/cover}
.atlas-details:focus{outline:2px solid var(--primary);outline-offset:3px}

@media(max-width:560px){.atlas-edges{display:none}
.atlas-nodes{height:auto}
.atlas-node{position:relative;top:auto;left:auto;transform:none}
.skills-atlas-page .prestige-path-orb{width:56px;height:56px;flex-basis:56px;font-size:26px}
}

.skills-atlas-page .prestige-path-reqs{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:900px){.skills-atlas-page .prestige-path-reqs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){.skills-atlas-page .prestige-path-orb{flex-basis:56px}
.skills-atlas-page .prestige-path-reqs{grid-template-columns:1fr}
}

.skills-atlas-page .inherited-skill{width:100%!important}

/* Compact labels leave a clear stretch of each prerequisite line visible. */
.atlas-node-wrap{position:absolute;top:calc(var(--atlas-row)*240px);left:50%;transform:translateX(-50%);width:min(180px,100%);z-index:2}
.atlas-node-wrap .atlas-node{position:relative;top:auto;left:auto;transform:none;width:100%}
.atlas-node-label{min-height:75px;padding-right:30px;padding-left:30px}
.atlas-info{position:absolute;right:3px;bottom:16px;width:32px;height:36px;border:0;background:transparent;color:#795820;font:700 15px Georgia,serif;cursor:pointer;border-radius:50%}
.atlas-info:hover,.atlas-info:focus-visible{background:#eadcb9;outline:2px solid #b68b38}
.atlas-edges path{stroke-width:3;stroke:#816b43;filter:drop-shadow(0 1px 1px #fff8df)}
.atlas-edges path.ready{stroke-width:3.5;stroke:#26734b}
@media(max-width:560px){.atlas-node-wrap{position:relative;top:auto;left:auto;transform:none;width:calc(50% - 8px)}.atlas-node-wrap .atlas-node{width:100%}.atlas-nodes{row-gap:28px}}
.atlas-info{z-index:3}

/* Rebirth remains accessible below the skill atlas, with an undistorted medal. */
.skills-atlas-page .prestige-path-card{margin:24px 0 0;padding:22px;scroll-margin-top:20px}
.skills-atlas-page .prestige-path-head{gap:20px;min-height:80px}
.skills-atlas-page .prestige-path-heading h2{font-size:20px}
.skills-atlas-page .prestige-path-orb b{right:-3px;bottom:-3px;min-width:25px;height:25px;font-size:12px}
[data-theme=dark] .skills-atlas-page .prestige-path-orb{box-shadow:0 0 0 5px #51442b,0 4px 12px #0003}
@media(max-width:560px){.skills-atlas-page .prestige-path-card{padding:18px}.skills-atlas-page .prestige-path-head{gap:14px}.skills-atlas-page .prestige-path-heading{min-width:0;flex-basis:calc(100% - 80px)}.skills-atlas-page .prestige-path-heading h2{font-size:18px}}

/* Keep breathing room below the last card, including phone safe areas. */
.skills-atlas-page{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))!important}
/* The desktop scroll container is flex: never shrink the page below its content. */
.content-scroll > .skills-atlas-page{flex-shrink:0}