/* Dawnwalker Skills. Desktop first: the game's skill screen on the left, the picked node on the right.
   Kult's shell (purple-black page, pink acts) around a stage that keeps the game's own look: fresco, bone white, gold. */
:root{
  color-scheme:dark;
  --ink:260 20% 8%; --card:225 11% 14%; --fill:228 14% 18%; --line:224 9% 25%;
  --fg:250 10% 98%; --muted:240 10% 62%;
  --pink:299 99% 74%; --acid:75 100% 71%; --violet:259 95% 64%; --danger:0 72% 58%;
  --white:0 0% 100%; --black:0 0% 0%;
  --gold:37 70% 61%; --bone:36 22% 86%; --soot:30 8% 7%;
  --font-sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:hsl(228 14% 26%) transparent}
html,body{margin:0;height:100%}
[hidden]{display:none!important}
body{background:hsl(var(--ink));color:hsl(var(--fg));font-family:var(--font-sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
h2,p,ul,ol,dl,dd,dt{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid hsl(var(--violet));outline-offset:2px}

.dw{
  height:calc(100dvh - var(--kult-nav-height, 0px));display:grid;grid-template-columns:minmax(0,1fr) clamp(336px, 28.5vw, 440px);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top top" "main panel" "fine fine";gap:10px 12px;padding:10px 12px 8px;opacity:0;transition:opacity .2s;
}
body.ready .dw{opacity:1}

/* ---------- top bar ---------- */
.dw-top{grid-area:top;display:flex;align-items:center;gap:14px;min-width:0}
.dw-brand{display:flex;align-items:center;gap:10px;flex:none}
.dw-tile{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:hsl(var(--pink));color:hsl(var(--white))}
.dw-tile svg{width:23px;height:23px}
.dw-brand-text{display:flex;flex-direction:column;gap:3px}
.dw-brand-text b{font-size:19px;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.dw-brand-text small{font-family:var(--font-mono);font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.16em;color:hsl(var(--muted))}
.dw-name{
  flex:1 1 140px;min-width:110px;max-width:280px;height:36px;padding:0 12px;border-radius:8px;border:1px solid transparent;background:hsl(var(--card) / .6);
  font-size:15px;font-weight:600;text-overflow:ellipsis;
}
.dw-name:hover{border-color:hsl(var(--line))}
.dw-name:focus{outline:none;border-color:hsl(var(--violet) / .7);background:hsl(var(--card))}
.dw-totals{margin-left:auto;display:flex;align-items:stretch;gap:6px}
.dw-totals div{display:flex;align-items:center;gap:9px;height:36px;padding:0 11px;border-radius:8px;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line))}
.dw-totals dt{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:hsl(var(--muted));white-space:nowrap}
.dw-totals dt .dw-ic{width:15px;height:15px;margin:0}
.dw-totals dd{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:hsl(var(--acid))}
.dw-totals dd small{font-size:11px;font-weight:500;color:hsl(var(--muted))}
.dw-totals .over{box-shadow:0 0 0 1px hsl(var(--danger) / .8)}
.dw-totals .over dd{color:hsl(var(--danger))}
.dw-actions{display:flex;align-items:center;gap:6px;flex:none}
.dw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 13px;border-radius:8px;border:1px solid hsl(var(--line));background:hsl(var(--card));
  font-size:13px;font-weight:600;white-space:nowrap;transition:color .12s, background .12s, border-color .12s, transform .12s;
}
.dw-btn:hover:not(:disabled){color:hsl(var(--pink))}
.dw-btn:active:not(:disabled){transform:scale(.97)}
.dw-btn:disabled{opacity:.4;cursor:default}
.dw-btn.primary{border-color:transparent;background:hsl(var(--pink));color:hsl(var(--white));text-shadow:0 1px 2px hsl(var(--black) / .25);box-shadow:0 0 22px hsl(var(--pink) / .22)}
.dw-btn.primary:hover:not(:disabled){background:hsl(var(--violet));color:hsl(var(--white))}
.dw-btn.primary:disabled{background:hsl(var(--fill));color:hsl(var(--muted));box-shadow:none;text-shadow:none;opacity:.75}
.dw-btn.on{border-color:hsl(var(--acid) / .6);color:hsl(var(--acid))}

/* ---------- the tree ---------- */
.dw-main{
  grid-area:main;min-width:0;min-height:0;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:linear-gradient(hsl(var(--soot) / .5), hsl(var(--soot) / .72)), url(img/bg.jpg) center/cover hsl(var(--soot));box-shadow:0 0 0 1px hsl(var(--line));
}
.dw-tabs{display:flex;align-items:center;gap:4px;padding:8px 12px 0}
.dw-tab{
  display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 8px;border:0;border-radius:10px;background:none;color:hsl(var(--bone) / .72);
  font-size:15px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;transition:color .12s, background .12s;
}
.dw-tab img{width:32px;height:32px;opacity:.7;transition:opacity .12s, filter .12s}
.dw-tab b{min-width:22px;padding:1px 6px;border-radius:999px;background:hsl(var(--black) / .45);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0;color:hsl(var(--bone) / .8)}
.dw-tab:hover{color:hsl(var(--bone))}
.dw-tab.on{color:hsl(var(--gold));background:hsl(var(--black) / .3)}
.dw-tab.on img{opacity:1;filter:drop-shadow(0 0 6px hsl(var(--gold) / .55))}
.dw-tab.on b{background:hsl(var(--gold) / .16);color:hsl(var(--gold))}
.dw-fit{position:relative;flex:1 1 0;min-height:0;margin:2px 10px 0;overflow:hidden}
.dw-stage{position:absolute;top:0;left:0;transform-origin:0 0;color:hsl(var(--bone))}
.dw-label{position:absolute;top:10px;font-size:17px;letter-spacing:.09em;text-transform:uppercase;color:hsl(var(--bone) / .82)}
.dw-label-perks{left:29px}
.dw-label-abilities{left:990px;width:192px;text-align:center}
.dw-ultbar{
  position:absolute;left:29px;width:913px;top:calc(var(--ult-y) - 96px);height:46px;display:flex;align-items:flex-start;justify-content:space-between;
  border-bottom:1px solid hsl(var(--bone) / .22);font-size:17px;letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--bone) / .82);
}
.dw-ultbar i{font-style:normal;text-transform:none;letter-spacing:.01em;color:hsl(var(--bone) / .62)}
.dw-ultbar b{font-weight:500;text-transform:none;letter-spacing:.01em;color:hsl(2 62% 56%)}
.dw-ultbar b.met{color:hsl(var(--gold))}
.dw-ultbar .dw-ic{width:20px;height:20px}
.dw-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dw-links path{fill:none;stroke:hsl(var(--bone) / .16);stroke-width:2;transition:stroke .2s}
.dw-links path.open{stroke:hsl(var(--bone) / .66)}
.dw-nodes{position:absolute;inset:0}
.dw-cross{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;background:url(img/ui/cross.webp) center/contain no-repeat;opacity:.34;pointer-events:none}

.dw-node{position:absolute;width:88px;height:88px;margin:-44px 0 0 -44px;padding:0;border:0;border-radius:50%;background:none;transition:transform .12s}
.dw-node:hover{transform:scale(1.05)}
.dw-node:active{transform:scale(.97)}
.dw-node:focus-visible{outline-offset:6px}
.dw-node > span{position:absolute;pointer-events:none}
.dw-plate{inset:0;background:url(img/ui/node-off.webp) center/contain no-repeat}
.dw-node.round .dw-plate{background-image:url(img/ui/round-off.webp);inset:2px}
.dw-node.k-perk[data-state="on"] .dw-plate,.dw-node.k-perk[data-state="max"] .dw-plate,
.dw-node.k-ult[data-state="max"] .dw-plate{background-image:url(img/ui/node-on.webp)}
[data-tree="witchcraft"] .dw-node.k-ability:is([data-state="on"],[data-state="max"]) .dw-plate{background-image:url(img/ui/plate-witchcraft.webp)}
[data-tree="swordmastery"] .dw-node.k-ability:is([data-state="on"],[data-state="max"]) .dw-plate{background-image:url(img/ui/plate-swordmastery.webp)}
[data-tree="vampirism"] .dw-node.k-ability:is([data-state="on"],[data-state="max"]) .dw-plate{background-image:url(img/ui/plate-vampirism.webp)}
[data-tree="witchcraft"] .dw-node.k-ability.round:is([data-state="on"],[data-state="max"]) .dw-plate{background-image:url(img/ui/round-witchcraft.webp)}
[data-tree="swordmastery"] .dw-node.k-ability.round:is([data-state="on"],[data-state="max"]) .dw-plate{background-image:url(img/ui/round-swordmastery.webp)}
[data-tree="vampirism"] .dw-node.k-ability.round:is([data-state="on"],[data-state="max"]) .dw-plate{background-image:url(img/ui/round-vampirism.webp)}
.dw-icon{background-repeat:no-repeat}
.dw-node .dw-icon{inset:14px;opacity:.24;transition:opacity .15s}
.dw-node.k-ability .dw-icon{inset:6px}
.dw-node[data-state="open"] .dw-icon{opacity:.5}
.dw-node:is([data-state="on"],[data-state="max"]) .dw-icon{opacity:1}
.dw-ring{inset:-17px;background:url(img/ui/ring.webp) center/contain no-repeat;opacity:0;transition:opacity .12s}
.dw-node.sel .dw-ring{opacity:1}
.dw-node.peek .dw-ring{opacity:.42}
.dw-badge{right:-7px;bottom:3px;width:34px;height:34px;background:center/contain no-repeat;filter:drop-shadow(0 1px 3px hsl(var(--black) / .9));font-family:var(--font-sans);font-size:14px;font-weight:700;line-height:36px;text-align:center;color:hsl(2 86% 60%)}
.dw-badge.dw-ic-book{width:30px;height:22px;bottom:8px}
.dw-eq{left:-2px;bottom:8px;width:24px;height:20px;background:url(img/ui/check.webp) center/contain no-repeat;opacity:0;filter:drop-shadow(0 0 4px hsl(var(--acid) / .9)) hue-rotate(40deg) saturate(3) brightness(1.5)}
.dw-node.equipped .dw-eq{opacity:1}
.dw-pips{left:50%;top:calc(100% - 3px);display:flex;gap:5px;transform:translateX(-50%)}
.dw-pips i{width:8px;height:8px;transform:rotate(45deg);background:hsl(30 6% 5%);box-shadow:0 0 0 1.5px hsl(var(--bone) / .3)}
.dw-node[data-state="open"] .dw-pips i{box-shadow:0 0 0 1.5px hsl(var(--bone) / .62)}
.dw-pips i.on{background:hsl(var(--bone));box-shadow:0 0 0 1.5px hsl(30 6% 5%)}
.dw-node.no{animation:dw-no .28s}
@keyframes dw-no{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- loadout ---------- */
.dw-loadout{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;padding:7px 16px 10px;border-top:1px solid hsl(var(--bone) / .12);background:hsl(var(--black) / .3)}
.dw-lo{display:flex;flex-direction:column;gap:5px;min-width:0}
.dw-lo-name{display:flex;align-items:center;gap:3px;white-space:nowrap}
.dw-lo-name .dw-ic{width:13px;height:13px;margin:0}
.dw-lo-name b{margin-right:4px}
.dw-lo-name small{margin-left:5px}
.dw-lo-name b{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--bone) / .9)}
.dw-lo-name small{font-family:var(--font-mono);font-size:10px;color:hsl(var(--bone) / .55)}
.dw-lo-slots{display:flex;gap:6px}
.dw-slot{position:relative;display:block;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:hsl(var(--black) / .42);box-shadow:inset 0 0 0 1.5px hsl(var(--bone) / .34)}
.dw-slot.shut{box-shadow:inset 0 0 0 1.5px hsl(var(--bone) / .1);background:url(img/ui/lock.webp) center/13px no-repeat hsl(var(--black) / .3);opacity:.55}
.dw-slot.full{background:hsl(30 8% 14%);box-shadow:inset 0 0 0 1.5px hsl(var(--gold) / .8);transition:transform .12s}
.dw-slot.full:hover{transform:scale(1.08)}
.dw-slot .dw-icon{position:absolute;inset:2px}
.dw-lo-title{align-self:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--bone) / .45)}

/* ---------- the picked node ---------- */
.dw-panel{grid-area:panel;min-height:0;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:hsl(var(--soot));box-shadow:0 0 0 1px hsl(var(--line))}
.dw-art{position:relative;flex:none;background:hsl(var(--black))}
.dw-art img{display:block;width:100%;height:auto}
.dw-art::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent, hsl(var(--soot)))}
.dw-band{flex:none;display:flex;align-items:center;gap:16px;padding:16px;background:linear-gradient(135deg, hsl(var(--tone) / .5), hsl(var(--tone) / .14))}
.dw-band[data-tree="witchcraft"]{--tone:256 34% 46%}
.dw-band[data-tree="swordmastery"]{--tone:220 9% 52%}
.dw-band[data-tree="vampirism"]{--tone:355 60% 40%}
.dw-band-icon{position:relative;flex:none;width:84px;height:84px;background:url(img/ui/node-on.webp) center/contain no-repeat}
.dw-band-icon .dw-icon{position:absolute;inset:6px}
.dw-facts{display:flex;flex-wrap:wrap;gap:5px}
.dw-facts li{display:flex;align-items:center;padding:3px 9px;border-radius:999px;background:hsl(var(--black) / .38);font-size:12px;color:hsl(var(--bone) / .92);white-space:nowrap}
.dw-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 16px 14px}
.dw-when{display:flex;align-items:center;gap:2px;font-size:12px;letter-spacing:.09em;color:hsl(var(--gold) / .92)}
.dw-when span{margin-left:4px}
.dw-when em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--bone) / .5)}
.dw-when .dw-ic{width:15px;height:15px;margin:0}
.dw-panel h2{margin-top:3px;font-size:22px;font-weight:700;line-height:1.15;letter-spacing:.045em;text-transform:uppercase;color:hsl(var(--gold))}
.dw-about{margin-top:8px;padding-bottom:10px;border-bottom:1px solid hsl(var(--bone) / .16);font-size:14px;color:hsl(var(--bone) / .92)}
.dw-b{font-weight:600;color:hsl(var(--gold))}
.dw-d{font-size:12.5px;font-style:italic;color:hsl(var(--bone) / .58)}
.dw-levels li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid hsl(var(--bone) / .1);color:hsl(var(--bone) / .6)}
.dw-levels li.on,.dw-levels li.next{color:hsl(var(--bone) / .95)}
.dw-levels li:not(.on) .dw-b{color:hsl(var(--gold) / .7)}
.dw-levels li.next .dw-b{color:hsl(var(--gold))}
.dw-dia{flex:none;width:11px;height:11px;margin:5px 3px 0;transform:rotate(45deg);box-shadow:0 0 0 1.5px hsl(var(--bone) / .4)}
.dw-levels li.on .dw-dia{background:hsl(var(--bone));box-shadow:none}
.dw-levels li.next .dw-dia{box-shadow:0 0 0 1.5px hsl(var(--bone))}
.dw-levels p{font-size:14px}
.dw-price{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:5px}
.dw-price:empty{display:none}
.dw-chip{display:inline-flex;align-items:center;gap:1px;padding:1px 7px 1px 8px;border-radius:999px;background:hsl(var(--bone) / .1);font-family:var(--font-mono);font-size:12px;color:hsl(var(--bone) / .92)}
.dw-chip .dw-ic{width:13px;height:13px;margin:0 0 0 3px}
.dw-gate{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:hsl(var(--bone) / .62)}
.dw-gate .dw-ic{width:15px;height:15px;margin:0}
.dw-levels li.on .dw-price{opacity:.55}
.dw-foot{flex:none;padding:8px 14px 14px;border-top:1px solid hsl(var(--bone) / .12)}
.dw-why{min-height:18px;margin-bottom:6px;font-size:12.5px;color:hsl(2 70% 66%)}
.dw-do{display:flex;gap:6px}
.dw-do .primary{flex:1 1 auto;min-width:0}
.dw-btn-cost{display:inline-flex;gap:4px}
.dw-btn-cost .dw-chip{background:hsl(var(--black) / .22);color:hsl(var(--white))}

.dw-ic{display:inline-block;width:1.05em;height:1.05em;margin:0 .14em;vertical-align:-.17em;background:center/contain no-repeat}
.dw-ic-point{background-image:url(img/ui/point.webp)}
.dw-ic-time{background-image:url(img/ui/hourglass.webp)}
.dw-ic-book{background-image:url(img/ui/book.webp)}
.dw-ic-corruption{background-image:url(img/ui/fangs.webp)}
.dw-ic-skull,.dw-ic-skull-y,.dw-ic-skull-o,.dw-ic-skull-r{background-image:url(img/ui/skull.webp)}
.dw-ic-skull-y{filter:sepia(1) saturate(4) hue-rotate(5deg)}
.dw-ic-skull-o{filter:sepia(1) saturate(6) hue-rotate(-18deg)}
.dw-ic-skull-r{filter:sepia(1) saturate(8) hue-rotate(-45deg)}
.dw-ic-lock{background-image:url(img/ui/lock.webp)}
.dw-ic-charge{background-image:url(img/ui/charge.webp)}
.dw-ic-heart{background-image:url(img/ui/heart.webp)}
.dw-ic-sun{background-image:url(img/ui/sun.webp)}
.dw-ic-moon{background-image:url(img/ui/moon.webp)}

.dw-fine{grid-area:fine;font-size:11px;line-height:1.35;color:hsl(var(--muted) / .8)}
.dw-toast{
  position:fixed;left:50%;bottom:54px;z-index:5;transform:translateX(-50%);max-width:min(92vw, 520px);padding:9px 14px;border-radius:10px;
  background:hsl(var(--fill));box-shadow:0 0 0 1px hsl(var(--line)), 0 10px 30px hsl(var(--black) / .5);font-size:13px;font-weight:500;text-align:center;
}

/* ---------- laptops with little height ---------- */
@media (max-height: 800px){
  .dw{gap:8px 10px;padding-top:8px}
  .dw-tab{height:38px;font-size:14px}
  .dw-tab img{width:28px;height:28px}
  .dw-loadout{padding:6px 14px 8px}
  .dw-slot{width:32px;height:32px}
  .dw-panel h2{font-size:20px}
  .dw-body{padding:10px 14px 12px}
  .dw-levels li{padding:8px 0}
}
@media (max-width: 1320px){
  .dw-lo-title{display:none}
  .dw-loadout{justify-content:space-around}
}
@media (max-width: 1240px){
  .dw-totals dt{font-size:0;gap:0}
  .dw-totals dt .dw-ic{width:17px;height:17px}
  .dw-totals div{gap:7px;padding:0 9px}
}
/* ---------- phones and narrow windows: one column, the tree scrolls sideways ---------- */
@media (max-width: 900px){
  body{overflow:auto}
  html,body{height:auto}
  .dw{height:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "panel" "fine";padding-bottom:84px}
  .dw-top{flex-wrap:wrap;gap:8px 10px}
  .dw-name{order:5;flex-basis:100%;max-width:none}
  .dw-totals{margin-left:0;order:6;flex:1 1 100%;justify-content:space-between}
  .dw-totals div{flex:1 1 0;justify-content:center}
  .dw-actions{margin-left:auto}
  .dw-tabs{overflow-x:auto}
  .dw-loadout{justify-content:flex-start;gap:10px 22px}
  .dw-tab{padding-right:10px;font-size:13px}
  .dw-fit{flex:none;height:var(--stage-h);overflow-x:auto;overflow-y:hidden}
  .dw-fit::after{content:"";display:block;width:var(--stage-w);height:1px}
  .dw-panel{overflow:visible}
  .dw-body{overflow:visible}
  .dw-node:hover{transform:none}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }