:root{
  --bg:#e6dfcd;--surface:#f2ecdf;--surface-2:#e9e1cf;--ink:#1d2540;--muted:#5d584c;--line:rgba(29,37,64,.18);
  --gold:#86661c;--gold-soft:rgba(134,102,28,.16);
  --runico:#2d67a0;--alquimista:#a0531a;--astrologo:#6a4fa8;
  --juramentado:#3f5f7c;--armas:#9b2f2a;--estandarte:#2f7440;
  --relicario:#2b7466;--confesor:#6b3f8f;--enterrador:#4a4a55;--warn:#9b2f2a;
  --aojador:#4c6b24;--plagas:#6e5a1c;--imaginero:#95591a;
  --justador:#a02a2a;--castellano:#6a6152;--andante:#2a5aa0;
  --verde:#3f6b35;--fuentes:#1f6f88;--tempestario:#4f5590;--lobo:#5a4a3a;--vampiro:#7a1f2e;--dlc:#2f7a3a;--dlc-ink:#f2ecdf;
  --martillo:#b4461a;--yunque:#4d5a66;--fragua:#8a5a2a;
  --egida:#4d3f9a;--filo:#8a2a7a;--errante:#1f7a7a;
  --trovador:#3d4f9a;--bufon:#a3401c;--goliardo:#701f3e;
  --arcolargo:#3d6a2e;--cetrero:#2c6788;--jauria:#8a4a24;
  --retaguardia:#3c5a86;--hospitalario:#8a1f1f;--matadragones:#a4501a;
  --diestro:#8a2d3a;--salteador:#7a4e26;--cortabolsas:#2b6b55;
  --locked:.38;
  --node:64px;--gap:14px;
  --display:"IM Fell English",Georgia,"Times New Roman",serif;
  --sc:"IM Fell English SC","IM Fell English",Georgia,serif;
  --body:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#151c31;--surface:#1e2743;--surface-2:#253052;--ink:#ebe1c8;--muted:#a79e88;--line:rgba(235,225,200,.14);
    --gold:#d3ad57;--gold-soft:rgba(211,173,87,.14);
    --runico:#84b5e6;--alquimista:#e69347;--astrologo:#b9a1e4;
  --juramentado:#a9c0d6;--armas:#e0706a;--estandarte:#86c98a;
  --relicario:#7fcab8;--confesor:#c4a2e2;--enterrador:#bcbcc8;--warn:#e0706a;
  --aojador:#a8cb72;--plagas:#d4c15c;--imaginero:#eaa660;
  --justador:#f08888;--castellano:#c9bfae;--andante:#8fb6f0;
  --verde:#9fd08a;--fuentes:#7fd0e6;--tempestario:#aab2ea;--lobo:#c9b49a;--vampiro:#e07a8a;--dlc:#86c98a;--dlc-ink:#151c31;
  --martillo:#f08a50;--yunque:#b0bcc8;--fragua:#e0a874;
  --egida:#b0a2f0;--filo:#e88ad8;--errante:#7ad8d8;
  --trovador:#9db0f0;--bufon:#f0956a;--goliardo:#dc7fa0;
  --arcolargo:#9fcd86;--cetrero:#8ec6e6;--jauria:#e3a06c;
  --retaguardia:#9ab8e6;--hospitalario:#ec8f8f;--matadragones:#f0a060;
  --diestro:#e48592;--salteador:#d9a06c;--cortabolsas:#7fcaa6;
  }
}
:root[data-theme="dark"]{
  --bg:#151c31;--surface:#1e2743;--surface-2:#253052;--ink:#ebe1c8;--muted:#a79e88;--line:rgba(235,225,200,.14);
  --gold:#d3ad57;--gold-soft:rgba(211,173,87,.14);
  --runico:#84b5e6;--alquimista:#e69347;--astrologo:#b9a1e4;
  --juramentado:#a9c0d6;--armas:#e0706a;--estandarte:#86c98a;
  --relicario:#7fcab8;--confesor:#c4a2e2;--enterrador:#bcbcc8;--warn:#e0706a;
  --aojador:#a8cb72;--plagas:#d4c15c;--imaginero:#eaa660;
  --justador:#f08888;--castellano:#c9bfae;--andante:#8fb6f0;
  --verde:#9fd08a;--fuentes:#7fd0e6;--tempestario:#aab2ea;--lobo:#c9b49a;--vampiro:#e07a8a;--dlc:#86c98a;--dlc-ink:#151c31;
  --martillo:#f08a50;--yunque:#b0bcc8;--fragua:#e0a874;
  --egida:#b0a2f0;--filo:#e88ad8;--errante:#7ad8d8;
  --trovador:#9db0f0;--bufon:#f0956a;--goliardo:#dc7fa0;
  --arcolargo:#9fcd86;--cetrero:#8ec6e6;--jauria:#e3a06c;
  --retaguardia:#9ab8e6;--hospitalario:#ec8f8f;--matadragones:#f0a060;
  --diestro:#e48592;--salteador:#d9a06c;--cortabolsas:#7fcaa6;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 48px}
.back{display:inline-block;margin-bottom:14px;font-size:15px;color:var(--gold)}
.back:hover{color:var(--ink)}

header.top{display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:22px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,8vw,84px);line-height:.9;margin:0;letter-spacing:-.01em}
h1 i{font-style:italic;color:var(--gold)}
.lede{grid-column:1/-1;margin:0;max-width:62ch;color:var(--muted)}
.level{display:flex;flex-direction:column;gap:6px;min-width:250px}
.level label{font-family:var(--sc);font-size:19px}
.level-row{display:flex;align-items:center;gap:12px}
.level input{flex:1;accent-color:var(--gold)}
.level output{font-family:var(--display);font-size:34px;line-height:1;min-width:2ch;text-align:right}
.points{display:flex;gap:18px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.points b{color:var(--ink);font-weight:700}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 8px}
.btn{background:transparent;border:1px solid var(--line);border-radius:3px;padding:6px 12px;cursor:var(--cursor-hand);font-size:15px}
.btn:hover{border-color:var(--gold)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.msg{font-size:15px;color:var(--gold);min-height:1.5em;margin-left:auto}

.tabs{display:none;gap:4px;margin:14px 0 0;border-bottom:1px solid var(--line)}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:8px 12px;cursor:var(--cursor-hand);font-family:var(--sc);font-size:18px;color:var(--muted)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--tc)}

.trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:18px}
.tree{--tc:var(--gold);background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--tc);padding:18px 16px 20px;border-radius:2px;min-width:0}
.tree h2{font-family:var(--display);font-weight:400;font-size:32px;margin:0;line-height:1.05;color:var(--tc)}
/* Ramas del DLC Kalawa: visibles, sin poder gastar puntos. */
.dlc-pill{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--dlc);color:var(--dlc-ink);font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.5;vertical-align:middle;white-space:nowrap}
.tree .meta{font-size:14px;color:var(--muted);margin:4px 0 0}
.tree .spent{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 14px;font-size:15px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tree .spent b{font-family:var(--display);font-size:26px;font-weight:400;color:var(--ink)}
.reset-tree{background:none;border:0;color:var(--muted);cursor:var(--cursor-hand);font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:0}

.board{display:grid;grid-template-columns:22px auto;gap:0 8px;justify-content:center}
.gutter{display:grid;grid-template-rows:repeat(11,var(--node));row-gap:var(--gap)}
.gutter span{font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;font-variant-numeric:tabular-nums}
.grid{position:relative;display:grid;grid-template-columns:repeat(4,var(--node));grid-template-rows:repeat(11,var(--node));gap:var(--gap)}
.grid svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.grid path{fill:none;stroke:var(--line);stroke-width:3}
.grid path.lit{stroke:var(--tc)}
.grid marker path{stroke:none;fill:var(--muted)}

.node{position:relative;width:var(--node);height:var(--node);border:2px solid var(--line);background:var(--surface-2);border-radius:4px;cursor:var(--cursor-hand);display:flex;align-items:center;justify-content:center;font-family:var(--sc);font-size:19px;padding:0;user-select:none;-webkit-touch-callout:none;transition:border-color .15s,box-shadow .15s}
.node.ability{border-radius:50%}
.node.locked{opacity:var(--locked)}
.node.open{border-color:var(--gold)}
.node.part{border-color:var(--tc);color:var(--tc)}
.node.max{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 22%,var(--surface-2));color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 28%,transparent)}
.node.capstone{outline:1px dashed var(--tc);outline-offset:4px}
.node.sel{box-shadow:0 0 0 3px var(--gold)}
.node .rk{position:absolute;right:-8px;bottom:-9px;background:var(--bg);border:1px solid var(--line);font-family:var(--body);font-size:11px;font-weight:700;line-height:1;padding:2px 4px;border-radius:2px;font-variant-numeric:tabular-nums}
.node.max .rk,.node.part .rk{border-color:var(--tc)}
.node .ic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}
.node.locked .ic{filter:grayscale(1)}
.spell .nm .ic{width:32px;height:32px;object-fit:cover;border-radius:4px;vertical-align:middle;margin-right:10px}

.panel{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));z-index:10;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.panel-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:start}
.panel h3{font-family:var(--display);font-weight:400;font-size:26px;margin:0;line-height:1.1}
.panel h3 small{font-family:var(--body);font-size:14px;color:var(--muted);margin-left:8px}
.panel p{margin:2px 0 0;max-width:78ch}
.panel .reqs{font-size:14px;color:var(--muted)}
.panel .reqs .bad{color:var(--warn)}
.panel .acts{display:flex;gap:8px;grid-row:1/span 3;grid-column:2;align-self:center}
.panel .empty{color:var(--muted);margin:0}

section.book{margin-top:56px}
section.book h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,52px);margin:0;line-height:1}
section.book>p{color:var(--muted);max-width:64ch;margin:8px 0 22px}
.spells{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.spell{display:grid;grid-template-columns:64px minmax(160px,1.1fr) 150px 2.4fr;gap:4px 18px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spell .lv{font-family:var(--display);font-size:28px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.spell .nm{font-family:var(--sc);font-size:20px;line-height:1.2}
.spell .ty{font-size:14px;color:var(--muted)}
.spell .fx{font-size:16px}
.spell.unk{opacity:.42}
.spell.unk .lv{color:var(--muted)}

@media (max-width:1180px){
  .trees{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .tabs{display:flex;max-width:420px;margin-left:auto;margin-right:auto}
  .tree{display:none}
  .tree.active{display:block}
}
@media (max-width:640px){
  header.top{grid-template-columns:1fr}
  .level{min-width:0}
  .spell{grid-template-columns:52px 1fr}
  .spell .ty,.spell .fx{grid-column:2}
  .panel .panel-in{grid-template-columns:1fr}
  .panel .acts{grid-row:auto;grid-column:1}
  .msg{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Móvil estrecho: 64 px no caben. Misma proporción casilla/hueco que N/G en talentos.js para que las flechas cuadren. */
@media (max-width:420px){:root{--node:52px;--gap:11.4px}}