/* The skill tree (/skills, /skills/{path}) and a player's Skills tab. Each path carries its colour in --tone: gold for
   the shared paths (BlightSkills' own gold), the Blight purple for Virulent, a role's accent for its own tree. On a
   path's page the tree's trunk is a level ladder: each branch hangs at the level it opens, and lights up in the path's
   colour once the player has learned it. Built on the site tokens (site.css) and the profile panels (players.css). */
.sk { --tone: var(--gold); width: min(100% - 32px, 1320px); margin: 0 auto; padding: 28px 0 72px; display: grid; gap: 30px; }
.sk > * { min-width: 0; }
.sk-label { margin: 0; color: var(--ink-3); font: 700 .74rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.sk-empty { margin: 0; padding: 40px 20px; border: 1px dashed var(--line-soft); border-radius: 6px; color: var(--ink-3); text-align: center; }
.sk-section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0; color: var(--ink); font: 400 clamp(1.7rem, 3.4vw, 2.3rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.sk-section-title small { color: var(--ink-3); font: 700 .85rem/1 var(--font-label); letter-spacing: .1em; }
.sk-section-note { margin: -4px 0 0; max-width: 70ch; color: var(--ink-2); }
.sk-panel { display: grid; align-content: start; gap: 14px; padding: clamp(16px, 2vw, 22px); min-width: 0; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; }
.sk-panel__title { margin: 0; color: var(--ink); font: 400 1.4rem/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }

/* The top: the title, the lede and, for a signed-in player, their level card. */
.sk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 20px 48px; align-items: end; }
.sk-top__main { display: grid; gap: 12px; min-width: 0; }
.sk-title { margin: 0; color: var(--ink); font: 400 clamp(3rem, 9vw, 6rem)/.86 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.sk-title em { font-style: normal; color: var(--gold); }
.sk-lede { margin: 0; max-width: 62ch; color: var(--ink-2); }
.sk-lede b, .sk-signin b { color: var(--ink); font-weight: 600; }
.sk-signin { margin: 0; color: var(--ink-2); }
.sk-signin a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 600; }
.sk-signin .icon { width: 18px; height: 18px; }

/* A player's level: the number big, the rank in its own colour, the bar to the next level. */
.sk-me { --rank: var(--gold); display: grid; gap: 12px; padding: 18px; border: 1px solid color-mix(in oklch, var(--rank) 40%, var(--line-soft)); border-radius: 6px;
    background: radial-gradient(120% 90% at 100% 0, color-mix(in oklch, var(--rank) 14%, transparent), transparent 60%), linear-gradient(170deg, var(--panel-2), var(--bg-deep)); }
.sk-me__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sk-me__level { display: grid; gap: 4px; margin: 0; }
.sk-me__level strong { color: var(--ink); font: 400 clamp(3rem, 6vw, 4.2rem)/.85 var(--font-display); font-variant-numeric: tabular-nums; }
.sk-me__rank { display: grid; justify-items: end; gap: 6px; margin: 0; text-align: right; }
.sk-me__rank b { color: var(--rank); font: 700 1.25rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.sk-me__rank small { color: var(--ink-3); font-size: .85rem; }
.sk-prestige { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; color: var(--gold-ink); background: var(--gold); font: 700 .72rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.sk-xp-bar { display: grid; gap: 6px; }
.sk-xp-bar__track { height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sk-xp-bar__track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in oklch, var(--rank) 70%, var(--gold)), var(--rank)); }
.sk-xp-bar p { display: flex; justify-content: space-between; gap: 10px; margin: 0; color: var(--ink-3); font: 600 .82rem/1.2 var(--font-label); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sk-me__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sk-me__facts div { display: grid; gap: 4px; min-width: 0; }
.sk-me__facts dt { color: var(--ink-3); font: 700 .68rem/1.15 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.sk-me__facts dd { margin: 0; color: var(--ink); font: 400 1.6rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.sk-me__facts .is-free dd { color: var(--gold); }
.sk-me__link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font: 700 .85rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.sk-me__link:hover { text-decoration: underline; }
.sk-me__link .icon { width: 15px; height: 15px; }

/* How levelling works: five facts in a row, each a big word and a line. */
/* Every fact draws its own top and left rule, pulled 1px out so the rules on the band's outer edges are clipped away:
   the dividers stay right however many facts fit on a row. */
.sk-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0; margin: 0; overflow: hidden; border-block: 1px solid var(--line-soft); }
.sk-rules div { display: grid; align-content: start; gap: 6px; margin: -1px 0 0 -1px; padding: 18px 20px; min-width: 0; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.sk-rules dt { color: var(--ink-3); font: 700 .72rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.sk-rules dd { margin: 0; color: var(--ink); font: 400 clamp(1.5rem, 2.6vw, 2rem)/1 var(--font-display); text-transform: uppercase; }
.sk-rules p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.45; }

/* Paths as cards. */
.sk-paths { display: grid; gap: 14px; }
/* --cols is picked per list so every row is full (16 paths: 4 across; 6 role trees: 3 across). */
.sk-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sk-path { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "icon name" "icon meta" "foot foot"; align-content: start; gap: 4px 12px;
    height: 100%; padding: 14px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); color: inherit; text-decoration: none; }
.sk-path:hover { border-color: color-mix(in oklch, var(--tone) 60%, var(--line-soft)); background: var(--panel-2); }
.sk-path:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sk-path.is-toned { border-top: 3px solid var(--tone); padding-top: 12px; }
.sk-path.is-own { border-color: var(--tone); background: radial-gradient(130% 100% at 0 0, color-mix(in oklch, var(--tone) 16%, transparent), transparent 65%), var(--panel); }
.sk-path__icon { grid-area: icon; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 6px; background: var(--bg-deep); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tone) 30%, var(--line-soft)); }
.sk-path__icon img { width: 38px; height: 38px; }
.sk-path__icon .icon { width: 22px; height: 22px; color: var(--tone); }
.sk-path__name { grid-area: name; align-self: end; color: var(--ink); font: 700 1.2rem/1.05 var(--font-label); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.sk-path.is-toned .sk-path__name { color: color-mix(in oklch, var(--tone) 80%, var(--ink)); }
.sk-path__meta { grid-area: meta; color: var(--ink-3); font-size: .88rem; }
.sk-path__foot { grid-area: foot; display: grid; gap: 6px; margin-top: 8px; }
.sk-path__bar { height: 4px; overflow: hidden; border-radius: 99px; background: var(--bg-deep); }
.sk-path__bar i { display: block; height: 100%; background: var(--tone); }
.sk-path__mine { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); font: 600 .82rem/1.1 var(--font-label); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sk-path__mine b { color: var(--ink); }
.sk-path__lock { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: .84rem; }
.sk-path__lock .icon { flex: none; width: 13px; height: 13px; }
.sk-path__own { position: absolute; top: 10px; right: 10px; padding: 3px 7px; border-radius: 4px; color: var(--bg-deep); background: var(--tone); font: 700 .66rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.sk-path.is-closed .sk-path__icon img { opacity: .55; filter: grayscale(.6); }

/* Ranks: a ladder of colour, five levels a step, the player's own step lifted. */
.sk-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sk-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.sk-ladder li { --rank: var(--gold); display: grid; gap: 3px; padding: 9px 10px; border-radius: 4px; background: var(--bg-deep); border-left: 3px solid var(--rank); min-width: 0; }
.sk-ladder b { color: var(--rank); font: 700 .95rem/1.1 var(--font-label); letter-spacing: .04em; overflow-wrap: anywhere; }
.sk-ladder small { color: var(--ink-3); font: 600 .78rem/1 var(--font-label); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sk-ladder li.is-mine { background: color-mix(in oklch, var(--rank) 16%, var(--bg-deep)); box-shadow: inset 0 0 0 1px var(--rank); }
.sk-ladder li.is-mine small { color: var(--ink); }

/* The most learned skills. */
.sk-top-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: pick; }
.sk-top-list li { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); counter-increment: pick; }
.sk-top-list li:last-child { border-bottom: 0; }
.sk-top-list li::before { content: counter(pick); color: var(--ink-3); font: 400 1.2rem/1 var(--font-display); text-align: center; }
.sk-top-list a { display: grid; gap: 2px; min-width: 0; color: var(--ink); text-decoration: none; }
.sk-top-list a:hover b { color: var(--gold); }
.sk-top-list b { font: 700 1rem/1.15 var(--font-label); letter-spacing: .03em; overflow-wrap: anywhere; }
.sk-top-list small { color: var(--ink-3); font-size: .84rem; }
.sk-top-list strong { color: var(--ink-2); font: 600 .85rem/1 var(--font-label); letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; background: var(--bg-deep); }
.sk-ico img { width: 30px; height: 30px; }
.sk-ico .icon { width: 18px; height: 18px; color: var(--ink-3); }

/* What pays XP: a column of tables, each a group as the game's XP page has them. */
.sk-xp { display: grid; gap: 14px; }
.sk-xp__groups { columns: 3 300px; column-gap: 12px; }
.sk-xp__group { display: grid; gap: 0; margin: 0 0 12px; padding: 4px 14px 8px; break-inside: avoid; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); }
.sk-xp__group h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 0; color: var(--ink); font: 700 .9rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); }
.sk-xp__group h3::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--gold); }
.sk-xp__group.is-blight h3::before { background: #C04B8E; }
.sk-xp__group ul { margin: 0; padding: 0; list-style: none; }
.sk-xp__group li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid oklch(1 0 0 / .05); }
.sk-xp__group li:last-child { border-bottom: 0; }
.sk-xp__group img { width: 24px; height: 24px; }
.sk-xp__group .icon { width: 16px; height: 16px; color: var(--ink-3); justify-self: center; }
.sk-xp__name { color: var(--ink-2); font-size: .93rem; overflow-wrap: anywhere; }
.sk-xp__name small { display: block; color: var(--ink-3); font-size: .8rem; }
.sk-xp__amount { color: var(--gold); font: 700 1rem/1 var(--font-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-xp__amount span { color: var(--ink-3); font-size: .78rem; letter-spacing: .08em; }
.sk-mods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sk-mods li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line-soft); color: var(--ink-2); font-size: .92rem; }
.sk-mods li b { color: var(--ink); font-weight: 600; }
.sk-mods li .icon { flex: none; width: 16px; height: 16px; color: var(--gold); }
.sk-mods li.is-warn { border-color: oklch(0.68 0.19 28 / .45); }
.sk-mods li.is-warn .icon { color: var(--danger); }

/* ---------------------------------------------------------------- a path's page */
.sk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--ink-3); font: 700 .8rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.sk-crumbs a { color: var(--ink-2); text-decoration: none; }
.sk-crumbs a:hover { color: var(--gold); }
.sk-crumbs .icon { width: 13px; height: 13px; }
.sk-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.sk-rail { position: sticky; top: 96px; display: grid; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 4px; }
.sk-rail p { margin: 10px 0 6px; }
.sk-rail p:first-child { margin-top: 0; }
.sk-rail a { --tone: var(--gold); display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px 4px 6px; border-radius: 4px; color: var(--ink-2); text-decoration: none; }
.sk-rail a:hover { color: var(--ink); background: var(--panel); }
.sk-rail a[aria-current="page"] { color: var(--ink); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--tone); }
.sk-rail img { width: 26px; height: 26px; }
.sk-rail .icon { width: 16px; height: 16px; justify-self: center; color: var(--ink-3); }
.sk-rail span { font: 600 .98rem/1.1 var(--font-label); letter-spacing: .03em; overflow-wrap: anywhere; }
.sk-rail small { color: var(--ink-3); font: 600 .78rem/1 var(--font-label); font-variant-numeric: tabular-nums; }
.sk-rail a.is-toned span { color: color-mix(in oklch, var(--tone) 75%, var(--ink)); }

.sk-main { display: grid; gap: 22px; min-width: 0; }
.sk-head { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.sk-head__icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 8px; background: radial-gradient(circle at 50% 35%, color-mix(in oklch, var(--tone) 22%, transparent), var(--bg-deep) 70%); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tone) 45%, var(--line-soft)); }
.sk-head__icon img { width: 60px; height: 60px; }
.sk-head__icon .icon { width: 30px; height: 30px; color: var(--tone); }
.sk-head__text { display: grid; gap: 8px; min-width: 0; }
.sk-head__name { margin: 0; color: var(--ink); font: 400 clamp(2.6rem, 6vw, 4.4rem)/.86 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.sk--toned .sk-head__name { color: color-mix(in oklch, var(--tone) 85%, var(--ink)); }
.sk-head__meta { margin: 0; color: var(--ink-2); }
.sk-head__lock { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-2); font-size: .92rem; }
.sk-head__lock .icon { width: 15px; height: 15px; color: var(--tone); }
.sk-head__mine { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; margin: 0; }
.sk-head__mine div { display: grid; gap: 5px; padding: 10px 14px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line-soft); text-align: right; }
.sk-head__mine dt { color: var(--ink-3); font: 700 .68rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.sk-head__mine dd { margin: 0; color: var(--ink); font: 400 1.7rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.sk-head__mine .is-free dd { color: var(--gold); }

/* The tree. A root is a full card; its branches hang from the trunk at the level they open. */
.sk-tree { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sk-node { position: relative; padding-bottom: 10px; scroll-margin-top: 100px; }
.sk-node--branch { padding-left: 74px; }
.sk-node--branch::before { content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
.sk-node--branch.is-last::before { bottom: auto; height: 32px; }
.sk-node--branch::after { content: ""; position: absolute; left: 33px; top: 31px; width: 41px; height: 2px; background: var(--line-soft); }
.sk-node--branch.is-have::before, .sk-node--branch.is-have::after { background: color-mix(in oklch, var(--tone) 70%, transparent); }
.sk-node__lv { position: absolute; left: 10px; top: 20px; z-index: 1; display: grid; place-items: center; width: 44px; height: 24px; border-radius: 99px;
    background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 700 .74rem/1 var(--font-label); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sk-node.is-have .sk-node__lv { color: var(--bg-deep); background: var(--tone); box-shadow: none; }
.sk-node--root + .sk-node--root, .sk-node--branch + .sk-node--root { margin-top: 14px; }

.sk-card { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: start; gap: 6px 16px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); }
.sk-node--root .sk-card { background: linear-gradient(160deg, color-mix(in oklch, var(--tone) 9%, var(--panel-2)), var(--panel) 60%); border-color: color-mix(in oklch, var(--tone) 35%, var(--line-soft)); }
.sk-node:target .sk-card { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.sk-node.is-maxed .sk-card { border-color: color-mix(in oklch, var(--blight) 40%, var(--line-soft)); }
.sk-node.is-ready .sk-card { border-color: color-mix(in oklch, var(--gold) 60%, var(--line-soft)); }
.sk-card__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 6px; background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sk-card__icon img { width: 48px; height: 48px; }
.sk-card__icon .icon { width: 24px; height: 24px; color: var(--ink-3); }
.sk-node.is-have .sk-card__icon { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tone) 70%, transparent); }
.sk-node.is-closed .sk-card__icon img, .sk-node.is-level .sk-card__icon img { opacity: .6; filter: grayscale(.5); }
.sk-card__body { display: grid; gap: 7px; min-width: 0; }
.sk-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--ink); font: 700 1.28rem/1.05 var(--font-label); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.sk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 4px; color: var(--tone); background: color-mix(in oklch, var(--tone) 15%, transparent); font: 700 .68rem/1 var(--font-label); letter-spacing: .12em; }
.sk-tag .icon { width: 12px; height: 12px; }
.sk-card__desc { margin: 0; color: var(--ink-2); line-height: 1.45; }
.sk-card__needs { margin: 0; color: var(--ink-3); font-size: .86rem; }
.sk-card__needs a { color: var(--ink-2); }
.sk-card__needs a:hover { color: var(--gold); }

/* The value at each rank, the player's ranks lit. */
.sk-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sk-steps li { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 4px; background: var(--bg-deep); color: var(--ink-2);
    font: 700 .86rem/1 var(--font-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line-soft); }
.sk-steps li.is-have { color: var(--bg-deep); background: var(--tone); box-shadow: none; }
.sk-steps li.is-next { color: var(--ink); box-shadow: inset 0 0 0 1px var(--tone); }
.sk-ability { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: var(--ink-2); font: 600 .9rem/1.2 var(--font-label); letter-spacing: .03em; }
.sk-ability span { display: inline-flex; align-items: center; gap: 5px; }
.sk-ability .icon { width: 14px; height: 14px; color: var(--tone); }

/* Where a player stands with a skill: a word and a colour. */
.sk-state { display: grid; justify-items: end; gap: 4px; margin: 0; text-align: right; }
.sk-state b { padding: 5px 9px; border-radius: 4px; color: var(--ink-2); background: oklch(1 0 0 / .06); font: 700 .74rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sk-state small { color: var(--ink-3); font: 600 .78rem/1 var(--font-label); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sk-state--maxed b { color: var(--blight); background: oklch(0.87 0.2 128 / .12); }
.sk-state--ready b { color: var(--gold-ink); background: var(--gold); }
.sk-state--learning b { color: var(--ink); background: color-mix(in oklch, var(--tone) 22%, transparent); }
.sk-state--closed b, .sk-state--level b, .sk-state--parent b, .sk-state--points b { color: var(--ink-3); background: none; box-shadow: inset 0 0 0 1px var(--line-soft); }
/* Only the long ones ("Needs Cast-Iron Gut", "Opens at level 20 or by the Blight boss") wrap; "Reach level 40" stays on one line. */
.sk-state--closed b, .sk-state--parent b { white-space: normal; max-width: 240px; line-height: 1.25; }

/* ---------------------------------------------------------------- a player's Skills tab */
.sk-band { --rank: var(--gold); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 32px; align-items: center; padding: clamp(18px, 3vw, 26px);
    border: 1px solid color-mix(in oklch, var(--rank) 35%, var(--line-soft)); border-radius: 6px;
    background: radial-gradient(90% 140% at 0% 100%, color-mix(in oklch, var(--rank) 14%, transparent), transparent 60%), linear-gradient(170deg, var(--panel-2), var(--bg-deep)); }
.sk-band__level { display: grid; gap: 6px; margin: 0; }
.sk-band__level strong { color: var(--ink); font: 400 clamp(4rem, 10vw, 7rem)/.8 var(--font-display); font-variant-numeric: tabular-nums; }
.sk-band__level b { color: var(--rank); font: 700 1.15rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.sk-band__main { display: grid; gap: 14px; min-width: 0; }
.sk-band__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sk-band__facts div { display: grid; gap: 5px; padding: 10px 12px; border-radius: 6px; background: oklch(0 0 0 / .22); min-width: 0; }
.sk-band__facts dt { color: var(--ink-3); font: 700 .68rem/1.15 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.sk-band__facts dd { margin: 0; color: var(--ink); font: 400 1.75rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.sk-band__facts dd small { color: var(--ink-3); font: 600 .85rem/1 var(--font-label); letter-spacing: .04em; }
.sk-band__facts .is-free dd { color: var(--gold); }
.sk-role { --tone: var(--gold); display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 4px; color: var(--tone);
    background: color-mix(in oklch, var(--tone) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tone) 50%, transparent); font: 700 .82rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.sk-role:hover { background: color-mix(in oklch, var(--tone) 22%, transparent); }

.sk-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sk-spread { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sk-spread li { --tone: var(--gold); display: grid; grid-template-columns: 28px minmax(0, 9rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.sk-spread img { width: 26px; height: 26px; }
.sk-spread .icon { width: 16px; height: 16px; justify-self: center; color: var(--ink-3); }
.sk-spread a { color: var(--ink-2); font: 600 .98rem/1.1 var(--font-label); letter-spacing: .03em; text-decoration: none; overflow-wrap: anywhere; }
.sk-spread a:hover { color: var(--gold); }
.sk-spread__bar { height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg-deep); }
.sk-spread__bar i { display: block; height: 100%; border-radius: 99px; background: var(--tone); }
.sk-spread b { color: var(--ink); font: 700 .9rem/1 var(--font-label); letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }

.sk-wheel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sk-wheel li { --tone: var(--gold); display: grid; justify-items: center; gap: 6px; width: 84px; text-align: center; }
.sk-wheel__slot { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--tone) 18%, var(--bg-deep)), var(--bg-deep) 70%); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--tone) 60%, transparent); }
.sk-wheel__slot img { width: 36px; height: 36px; }
.sk-wheel__slot .icon { width: 22px; height: 22px; color: var(--tone); }
.sk-wheel span { color: var(--ink-2); font: 600 .8rem/1.1 var(--font-label); letter-spacing: .03em; overflow-wrap: anywhere; }

.sk-learned { --tone: var(--gold); display: grid; gap: 12px; }
.sk-learned__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.sk-learned__head h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--ink); font: 400 1.7rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.sk-learned.is-toned .sk-learned__head h2 { color: color-mix(in oklch, var(--tone) 85%, var(--ink)); }
.sk-learned__head h2 small { color: var(--ink-3); font: 700 .82rem/1 var(--font-label); letter-spacing: .1em; }
.sk-learned__head a { color: var(--ink-2); font: 700 .8rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.sk-learned__head a:hover { color: var(--gold); }
.sk-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sk-chip { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icon name now" "icon pips pips"; align-items: center; gap: 6px 12px; padding: 10px 12px;
    border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); }
.sk-chip.is-maxed { border-color: color-mix(in oklch, var(--tone) 40%, var(--line-soft)); }
.sk-chip__icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; background: var(--bg-deep); }
.sk-chip__icon img { width: 36px; height: 36px; }
.sk-chip__icon .icon { width: 20px; height: 20px; color: var(--ink-3); }
.sk-chip__name { grid-area: name; color: var(--ink); font: 700 1rem/1.1 var(--font-label); letter-spacing: .03em; text-decoration: none; overflow-wrap: anywhere; }
a.sk-chip__name:hover { color: var(--gold); }
.sk-chip__now { grid-area: now; color: var(--tone); font: 700 1rem/1 var(--font-label); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-pips { grid-area: pips; display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.sk-pips li { flex: 1; max-width: 28px; height: 5px; border-radius: 2px; background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sk-pips li.is-have { background: var(--tone); box-shadow: none; }
.sk-updated { margin: 0; color: var(--ink-3); font-size: .88rem; }

@media (max-width: 1100px) {
    .sk-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
}
@media (max-width: 1000px) {
    .sk-top, .sk-pair, .sk-split { grid-template-columns: minmax(0, 1fr); }
    .sk-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .sk-rail { position: static; display: flex; gap: 4px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 0 6px; scrollbar-width: thin; }
    .sk-rail p { display: none; }
    .sk-rail a { flex: none; grid-template-columns: 24px auto auto; min-height: 38px; border: 1px solid var(--line-soft); background: var(--panel); }
    .sk-rail a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--tone); }
    .sk-band__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .sk-head { grid-template-columns: 60px minmax(0, 1fr); }
    .sk-head__icon { width: 60px; height: 60px; }
    .sk-head__icon img { width: 46px; height: 46px; }
    .sk-head__mine { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sk-head__mine div { text-align: left; }
    .sk-card { grid-template-columns: 46px minmax(0, 1fr); padding: 12px; }
    .sk-card__icon { width: 46px; height: 46px; }
    .sk-card__icon img { width: 38px; height: 38px; }
    .sk-state { grid-column: 2; justify-items: start; text-align: left; }
    .sk-node--branch { padding-left: 54px; }
    .sk-node--branch::before { left: 21px; }
    .sk-node--branch::after { left: 23px; width: 31px; }
    .sk-node__lv { left: 2px; width: 40px; }
    .sk-band { grid-template-columns: minmax(0, 1fr); }
    .sk-me__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sk-spread li { grid-template-columns: 24px minmax(0, 7rem) minmax(0, 1fr) auto; gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
    .sk-path, .sk-rail a, .sk-top-list a b, .sk-chip__name { transition: color .15s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out); }
}