/* ============ Codex ============ */
:root {
  --bg: #0c0b09;
  --bg2: #110f0c;
  --panel: #17140f;
  --panel2: #1e1a13;
  --panel3: #26211833;
  --line: #2c261c;
  --line2: #3d3527;
  --text: #ece4d4;
  --muted: #a69b85;
  --dim: #6f6656;
  --gold: #d4ad62;
  --gold2: #f1d496;
  --gold-soft: #d4ad6222;
  --red: #e0574b;
  --green: #74c86f;
  --blue: #74a8ff;

  --unique: #d58a3f;
  --rare: #efe170;
  --magic: #9195ff;
  --normal: #d2d2d2;
  --gem: #2bb3a8;
  --crafted: #b9b9ff;
  --fractured: #b8a46b;
  --enchant: #b9b9ff;
  --corrupted: #e0453a;
  --exarch: #f08b4a;
  --eater: #8fd0a6;

  --gem-r: #d9534a;
  --gem-g: #63c45e;
  --gem-b: #5f9dff;
  --gem-w: #d9d9d9;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 10px 30px -12px #000c;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Cinzel", Georgia, serif;
  --wrap: 1280px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 15px/1.6 var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 15% -10%, #3a2a1255, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #1d2a3a33, transparent 60%),
    var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.nowrap { white-space: nowrap; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: #0c0b09e6;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  height: 56px; display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .08em; }
.brand:hover { text-decoration: none; color: var(--gold2); }
.brand svg { width: 22px; height: 22px; }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; min-width: 0; overflow: hidden; white-space: nowrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--dim); }
.crumbs .here { color: var(--text); overflow: hidden; text-overflow: ellipsis; }

.app { max-width: var(--wrap); margin: 0 auto; padding: 28px 20px 80px; outline: none; }
.loading, .empty { padding: 60px 0; text-align: center; color: var(--muted); }
.error-box { padding: 20px; border: 1px solid #5a2620; background: #2a1310; border-radius: var(--radius); color: #f3c2bc; }

/* ---------- botões, chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--gold); text-decoration: none; background: #262016; }
.btn.primary { background: linear-gradient(180deg, #e2bd74, #b98f43); color: #1b1408; border-color: #e7c27a; font-weight: 600; }
.btn.primary:hover { background: linear-gradient(180deg, #f0cc86, #c79c4e); }
.btn svg { width: 16px; height: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2);
  font-size: 12.5px; color: var(--muted); background: #ffffff05;
}
.chip.gold { color: var(--gold2); border-color: #d4ad6255; background: var(--gold-soft); }
.chip.green { color: #a9e6a5; border-color: #74c86f55; background: #74c86f14; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.seg button {
  border: 0; background: transparent; color: var(--muted); padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: 14px; font-weight: 500;
}
.seg button:hover { color: var(--text); background: #ffffff08; }
.seg button[aria-pressed="true"] { background: var(--panel2); color: var(--gold2); box-shadow: inset 0 0 0 1px #d4ad6244; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills button {
  border: 1px solid var(--line2); background: transparent; color: var(--muted);
  padding: 5px 12px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.pills button:hover { color: var(--text); border-color: var(--dim); }
.pills button[aria-pressed="true"] { color: #1b1408; background: var(--gold); border-color: var(--gold); font-weight: 600; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-pad { padding: 20px; }
.section-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.fine { font-size: 13px; color: var(--muted); margin: 16px 0 0; max-width: 72ch; }
.h-sub { font-size: 17px; font-weight: 600; margin: 0 0 12px; }

/* ---------- home ---------- */
.hero { padding: 40px 0 34px; }
.hero h1 { font-family: var(--display); font-size: clamp(34px, 5vw, 56px); letter-spacing: .04em; color: var(--gold2); font-weight: 700; }
.hero p { max-width: 640px; color: var(--muted); font-size: 17px; margin: 14px 0 0; }
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.game-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px; padding: 22px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line2); color: var(--text); isolation: isolate;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.game-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art); }
.game-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, #0c0b09f2 85%); }
a.game-card:hover { transform: translateY(-3px); border-color: var(--gold); text-decoration: none; box-shadow: 0 18px 40px -18px #d4ad6255; }
.game-card .tag { position: absolute; top: 16px; left: 16px; }
.game-card .mark { position: absolute; top: 22px; right: 22px; width: 64px; height: 64px; opacity: .9; }
.game-card h2 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: .03em; }
.game-card p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.game-card.soon { filter: saturate(.4); cursor: default; }
.game-card.soon h2 { color: #cfc6b6; }

.art-poe1 { --art: radial-gradient(circle at 70% 30%, #b8762a66, transparent 45%), radial-gradient(circle at 20% 80%, #5b1a1a88, transparent 50%), repeating-linear-gradient(135deg, #1a140c 0 14px, #1d170e 14px 28px); }
.art-poe2 { --art: radial-gradient(circle at 70% 30%, #4a7cb866, transparent 45%), radial-gradient(circle at 20% 80%, #1a2d5b88, transparent 50%), repeating-linear-gradient(135deg, #0d1219 0 14px, #10161e 14px 28px); }
.art-hs { --art: radial-gradient(circle at 70% 30%, #b8302a66, transparent 45%), radial-gradient(circle at 20% 80%, #5b3a1a88, transparent 50%), repeating-linear-gradient(135deg, #190d0d 0 14px, #1e1010 14px 28px); }

.home-foot { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: #ffffff03; }
.feature h3 { font-size: 15px; color: var(--gold2); margin-bottom: 4px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- página do jogo ---------- */
.game-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.game-head h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); color: var(--gold2); }
.league { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.build-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 14px;
  border: 1px solid var(--line2); background: linear-gradient(160deg, #221b11, var(--bg2) 60%); color: var(--text);
  transition: border-color .2s, transform .2s;
}
.build-card:hover { border-color: var(--gold); transform: translateY(-2px); text-decoration: none; }
.build-card .top { display: flex; gap: 14px; align-items: center; }
.class-badge {
  flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, #6a4dbd, #2a1b52); border: 1px solid #8c74d955;
  font-family: var(--display); font-weight: 700; font-size: 20px; color: #efe6ff;
}
.build-card h3 { font-size: 19px; }
.build-card .sub { color: var(--muted); font-size: 13.5px; }
.build-card .desc { color: #cfc6b4; font-size: 14px; margin: 0; }
.build-card .foot { display: flex; flex-wrap: wrap; gap: 6px; }
.build-card.placeholder { border-style: dashed; background: transparent; color: var(--muted); align-items: center; justify-content: center; text-align: center; min-height: 200px; }
.build-card.placeholder:hover { transform: none; border-color: var(--line2); }

/* ---------- página da build ---------- */
.build-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin-bottom: 18px; }
.build-head h1 { font-family: var(--display); font-size: clamp(26px, 4vw, 40px); color: var(--gold2); letter-spacing: .02em; }
.build-head .patch { font-family: var(--font); font-weight: 500; font-size: .5em; color: var(--muted); letter-spacing: 0; vertical-align: .35em; }
.build-sub { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.build-sub strong { color: var(--text); font-weight: 600; }
.build-head .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: flex-end; }
.progress-mini { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-mini .bar { width: 96px; }
.btn.ghost { background: transparent; border-color: var(--line2); }
.bar { flex: none; width: 160px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #b98f43, var(--gold2)); border-radius: inherit; transition: width .3s; }

.tabs {
  position: sticky; top: 56px; z-index: 40;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: #0c0b09f0; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); margin: 0 -20px 22px; padding: 0 20px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none; padding: 13px 16px; color: var(--muted); font-weight: 500; font-size: 14.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--gold2); border-bottom-color: var(--gold); }

.selector {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2);
}
.selector .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.selector .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); width: 74px; flex: none; }
.selector .pob-links { margin-left: auto; display: flex; gap: 8px; }
.selector .hint { font-size: 13px; color: var(--muted); }
.sel-note { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); max-width: 90ch; }
.sel-note strong { color: var(--text); font-weight: 500; }

/* overview */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.ov-main > * + * { margin-top: 22px; }
.lead { font-size: 17px; color: #ddd3c0; margin: 0; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pc ul { margin: 0; padding: 0; list-style: none; }
.pc li { position: relative; padding-left: 22px; margin: 7px 0; color: #d9cfbc; font-size: 14.5px; }
.pc li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pc .pros li::before { content: "+"; color: var(--green); }
.pc .cons li::before { content: "−"; color: var(--red); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { padding: 10px 12px; border-radius: 8px; background: #ffffff05; border: 1px solid var(--line); }
.stat b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.stat.life b { color: #ef7f74; } .stat.es b { color: #8fb7ff; } .stat.dps b { color: var(--gold2); }
.stat.fire b { color: #f08a5a; } .stat.cold b { color: #7fc4ff; } .stat.light b { color: #f2dc6a; } .stat.chaos b { color: #d07fe0; }
.video { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line2); }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video button.play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent, #0008); border: 0; cursor: pointer; }
.video button.play span { width: 66px; height: 66px; border-radius: 50%; background: #d4ad62e6; display: grid; place-items: center; box-shadow: 0 6px 24px #000a; }
.video button.play svg { width: 26px; height: 26px; margin-left: 4px; fill: #1b1408; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chapters { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.chapters a { display: flex; gap: 10px; padding: 5px 8px; border-radius: 6px; color: #d7cdb9; font-size: 14px; }
.chapters a:hover { background: #ffffff08; text-decoration: none; }
.chapters time { color: var(--gold); font-variant-numeric: tabular-nums; width: 40px; flex: none; }
.phase-strip { display: grid; gap: 0; border-top: 1px solid var(--line); }
.phase { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.phase:hover strong { color: var(--gold2); }
.phase .pn { font-family: var(--display); color: var(--gold); font-size: 15px; }
.phase strong { font-size: 15px; font-weight: 600; }
.phase .ps { color: var(--muted); font-size: 13px; text-align: right; }

/* gemas: ato da campanha e tabela "onde pegar" */
.gh-tags { display: flex; gap: 8px; align-items: center; }
.links { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gem .ga { font-size: 11.5px; color: var(--muted); padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gem .ga.none { border-color: transparent; color: var(--dim); }
.where-get { margin-top: 36px; max-width: 760px; }
.get-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.get-table th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--dim); padding: 0 12px 8px 0; border-bottom: 1px solid var(--line2); }
.get-table td { padding: 7px 12px 7px 0; border-bottom: 1px solid #2c261c80; vertical-align: baseline; }
.get-table tr.act-start td { border-top: 1px solid var(--line2); }
.get-table tr:first-child td { border-top: 0; }
.get-table td.act { color: var(--gold); white-space: nowrap; width: 1%; padding-right: 24px; }
.get-table td.how { color: var(--muted); }
.gem-inline { display: inline-flex; align-items: center; gap: 8px; cursor: help; }
.gem-inline .gd { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* guia (prosa) */
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.toc { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.toc a { color: var(--muted); padding: 6px 10px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--text); text-decoration: none; border-left-color: var(--dim); }
.toc a.active { color: var(--gold2); border-left-color: var(--gold); }
.prose { max-width: 68ch; line-height: 1.75; }
.prose section { scroll-margin-top: 120px; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--line); }
.prose section:last-child { border-bottom: 0; }
.prose h2 { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--gold2); margin-bottom: 4px; letter-spacing: .01em; }
.prose h3 { font-size: 15.5px; font-weight: 600; color: var(--text); margin: 28px 0 4px; }
.prose p { margin: 12px 0; color: #d3c9b6; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 20px; color: #d3c9b6; }
.prose li { margin: 8px 0; padding-left: 2px; }
.prose li::marker { color: var(--dim); }
.prose strong { color: var(--text); font-weight: 600; }
.sec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 18px; }
.callout { margin: 18px 0; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line2); background: #ffffff05; color: #ddd3c0; }
.callout.warn { border-color: #e0574b38; background: #e0574b0a; color: #ecd2cd; }
.callout.tip { border-color: #74c86f30; background: #74c86f08; color: #d6e6d3; }
.callout p { margin: 4px 0; }

/* referências inline */
/* referências: cor discreta, sem sublinhado; o sublinhado só aparece no hover */
.ref { font-weight: 500; cursor: help; text-underline-offset: 3px; }
.ref:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.ref.plain { color: inherit; font-weight: inherit; }
.ref.unique { color: #d49a60; }
.ref.rare { color: #e6db8e; }
.ref.magic { color: #a5a8f2; }
.ref.normal { color: var(--text); }
.ref.gem-r { color: #e3958e; } .ref.gem-g { color: #9fd09a; } .ref.gem-b { color: #9dbcef; } .ref.gem-w { color: var(--text); }
.ref.node { color: var(--text); }
.ref.kw { color: var(--text); cursor: inherit; font-weight: 600; }
.ref.kw:hover { text-decoration: none; }
.ts { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ts svg { width: 11px; height: 11px; color: #d97a70; }
.ts:hover { color: var(--text); }
.lo-link { font: inherit; font-size: 13px; padding: 0; border: 0; background: none; color: var(--gold); white-space: nowrap; cursor: pointer; }
.lo-link:hover { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; }

/* progressão */
.roadmap { display: grid; gap: 18px; }
.stage { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
.stage-num { position: relative; display: flex; justify-content: center; }
.stage-num span { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--gold2); background: var(--panel2); border: 1px solid #d4ad6266; }
.stage-num::after { content: ""; position: absolute; top: 44px; bottom: -18px; width: 2px; background: var(--line2); }
.stage:last-child .stage-num::after { display: none; }
.stage.done .stage-num span { background: var(--gold); color: #1b1408; }
.stage-body { padding: 18px 20px; }
.stage-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.stage-head h3 { font-size: 19px; }
.stage-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.stage-head .right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.checks label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: #ddd3c0; }
.checks label:hover { background: #ffffff06; }
.checks input { appearance: none; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 5px; border: 1.5px solid var(--dim); background: var(--bg); cursor: pointer; display: grid; place-items: center; }
.checks input:checked { background: var(--gold); border-color: var(--gold); }
.checks input:checked::after { content: ""; width: 5px; height: 9px; border: solid #1b1408; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.checks input:checked + span { color: var(--dim); text-decoration: line-through; text-decoration-color: #6f665688; }
.checks .opt { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; }

/* árvore */
.tree-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.tree-box { position: relative; height: min(76vh, 820px); min-height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line2); background: radial-gradient(circle at 50% 50%, #17130d, #0a0907 75%); touch-action: none; }
.tree-box svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
.tree-box svg.dragging { cursor: grabbing; }
.tree-tools { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; pointer-events: none; }
.tree-tools > * { pointer-events: auto; }
.tree-tools input, .tree-tools select { background: #0c0b09e6; border: 1px solid var(--line2); border-radius: 8px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 13.5px; }
.tree-tools input { width: 200px; }
.tree-tools .zoom { margin-left: auto; display: flex; gap: 4px; }
.tree-tools .zoom button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line2); background: #0c0b09e6; cursor: pointer; font-size: 18px; line-height: 1; }
.tree-tools .zoom button:hover { border-color: var(--gold); }
.tree-legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); background: #0c0b09d9; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); }
.tree-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.tree-note { position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: var(--dim); background: #0c0b09d9; padding: 6px 10px; border-radius: 8px; }

svg .e { stroke: #3a3225; stroke-width: 9; fill: none; stroke-linecap: round; }
svg .e.on { stroke: #c99e52; stroke-width: 15; }
svg .e.add { stroke: var(--green); stroke-width: 16; }
svg .e.rem { stroke: var(--red); stroke-width: 12; stroke-dasharray: 30 24; }
svg .nd { fill: #221d15; stroke: #4c4334; stroke-width: 6; }
svg .nd.nt { stroke: #7d6c4e; stroke-width: 9; }
svg .nd.k { stroke: #9d8a62; stroke-width: 12; }
svg .nd.m { fill: #1a1712; stroke: #3a3328; stroke-width: 4; stroke-dasharray: 8 10; }
svg .nd.j { fill: #15130f; stroke: #5d6f7c; stroke-width: 8; }
svg .nd.c { fill: #15120d; stroke: #5a4c35; stroke-width: 10; }
svg .nd.as { fill: #f1d496; stroke: #f1d496; }
svg .nd.on { fill: #e6c27b; stroke: #fff0c4; }
svg .nd.m.on { fill: #3a2f1a; stroke: #e6c27b; stroke-dasharray: none; stroke-width: 8; }
svg .nd.j.on { fill: #1b3a4f; stroke: #8fd3ff; }
svg .nd.j.on.has { fill: #8fd3ff; }
svg .nd.c.on { fill: #3a2f1a; stroke: var(--gold2); }
svg .nd.add { fill: var(--green); stroke: #d8ffd5; }
svg .nd.rem { fill: #4a1c18; stroke: var(--red); stroke-width: 10; }
svg .nd.hit { stroke: #5ff2ff !important; stroke-width: 22 !important; }
svg .nd.focus { stroke: #fff !important; stroke-width: 26 !important; }
svg .nd:hover { stroke: #fff; cursor: pointer; }
svg .cls-label { fill: #8a7a5c; font: 600 90px var(--display); text-anchor: middle; letter-spacing: 8px; pointer-events: none; }

.side-stack { display: grid; gap: 14px; }
.asc-box { height: 230px; position: relative; border-radius: var(--radius); border: 1px solid var(--line2); background: radial-gradient(circle, #1d1710, #0b0a08 80%); overflow: hidden; }
.asc-box svg { width: 100%; height: 100%; }
.asc-box .title { position: absolute; top: 10px; left: 12px; font-family: var(--display); color: var(--gold2); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.node-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.node-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 6px; font-size: 13.5px; cursor: default; }
.node-list li:hover { background: #ffffff08; }
.node-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-1px); }
.node-list .k .dot { background: #ffb15c; border-radius: 2px; }
.node-list .add .dot { background: var(--green); }
.node-list .rem { color: var(--dim); text-decoration: line-through; }
.node-list .rem .dot { background: var(--red); }
.node-list small { color: var(--muted); display: block; font-size: 12.5px; }
.diff-sum { font-size: 13px; color: var(--muted); }
.diff-sum b.g { color: var(--green); } .diff-sum b.r { color: var(--red); }
.scroll-list { max-height: 320px; overflow: auto; margin-right: -8px; padding-right: 8px; }

/* equipamento */
.gear-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 18px; align-items: start; }
.paperdoll { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas:
  "w1 hel hel w2"
  "w1 body body w2"
  "r1 body body r2"
  "glo amu belt boo"; gap: 10px; }
.slot {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 78px; padding: 12px 14px; border-radius: 10px; text-align: left;
  border: 1px solid var(--line2); background: linear-gradient(180deg, #1b1711, #12100c); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.slot:hover { border-color: var(--dim); }
.slot[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(180deg, #2a2216, #15120d); box-shadow: 0 0 0 1px #d4ad6233 inset; }
.slot .sl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.slot .nm { font-weight: 600; font-size: 14px; line-height: 1.3; }
.slot .bs { font-size: 12.5px; color: var(--muted); }
.slot.empty { cursor: default; opacity: .45; }
.slot.empty .nm { color: var(--dim); font-weight: 400; }
.slot .socks { margin-top: 6px; }
.r-UNIQUE { color: var(--unique); } .r-RARE { color: var(--rare); } .r-MAGIC { color: var(--magic); } .r-NORMAL { color: var(--normal); } .r-RELIC { color: #82ad6a; }
.flasks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.flasks .slot { min-height: 70px; }
.sub-title { margin: 22px 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.jewel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.jewel-grid .slot { min-height: 64px; }
.item-detail { position: sticky; top: 120px; }

.socks { display: inline-flex; align-items: center; gap: 2px; }
.sock { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #0006; }
.sock.R { background: var(--gem-r); } .sock.G { background: var(--gem-g); } .sock.B { background: var(--gem-b); } .sock.W { background: var(--gem-w); } .sock.A { background: #333; } .sock.D { background: #9a6; }
.link { width: 6px; height: 3px; background: #c9b78f; border-radius: 1px; }
.gap { width: 6px; }

/* card de item estilo PoE */
.item-card { border-radius: 8px; overflow: hidden; border: 1px solid #3a3226; background: #0b0a08f7; font-size: 13.5px; text-align: center; box-shadow: var(--shadow); min-width: 280px; }
.item-card .ih { padding: 8px 14px; border-bottom: 1px solid #ffffff14; }
.item-card.UNIQUE .ih { background: linear-gradient(180deg, #3a2410, #20140a); color: var(--unique); }
.item-card.RARE .ih { background: linear-gradient(180deg, #34300f, #1d1b08); color: var(--rare); }
.item-card.MAGIC .ih { background: linear-gradient(180deg, #1b1d3a, #0f1022); color: var(--magic); }
.item-card.NORMAL .ih { background: linear-gradient(180deg, #262626, #151515); color: var(--normal); }
.item-card.RELIC .ih { background: linear-gradient(180deg, #1e3418, #10200c); color: #8fd07a; }
.item-card .ih .n { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.item-card .ih .b { font-family: var(--display); font-size: 14px; opacity: .9; }
.item-card .ib { padding: 10px 14px 12px; }
.item-card .sep { height: 1px; margin: 8px auto; width: 70%; background: linear-gradient(90deg, transparent, #b8975a77, transparent); }
.item-card .prop { color: #8f8f8f; }
.item-card .prop b { color: #e8e8e8; font-weight: 500; }
.item-card .mod { color: #8888ff; line-height: 1.45; }
.item-card .mod.crafted, .item-card .mod.enchant { color: var(--crafted); }
.item-card .mod.fractured { color: var(--fractured); }
.item-card .mod.exarch { color: var(--exarch); }
.item-card .mod.eater { color: var(--eater); }
.item-card .unique-mod { color: #8888ff; }
.item-card .flag { color: var(--corrupted); font-weight: 600; }
.item-card .infl { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.item-card .infl span { font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid #ffffff22; color: #cfc6b6; }
.item-card .note { color: var(--dim); font-size: 12px; margin-top: 8px; }

/* gemas */
.gem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gem-group { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg2)); }
.gem-group.main { border-color: #d4ad6277; box-shadow: 0 0 0 1px #d4ad6222 inset; }
.gem-group header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.gem-group header .where { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.gem-group header .lbl { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.gem-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.gem { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; }
.gem:hover { background: #ffffff06; }
.gem .gd { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 -2px 3px #0007, 0 0 0 1px #0008; }
.gem.sup .gd { width: 10px; height: 10px; margin: 0 2px; }
.gem .gn { flex: 1; font-weight: 600; font-size: 14px; }
.gem.sup .gn { font-weight: 500; font-size: 13.5px; color: #cfc6b4; }
.gem .gl { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gem.off { opacity: .45; }
.gd.r { background: var(--gem-r); } .gd.g { background: var(--gem-g); } .gd.b { background: var(--gem-b); } .gd.w { background: var(--gem-w); }
.gem-group .tag { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--gold-soft); color: var(--gold2); border: 1px solid #d4ad6244; white-space: nowrap; }

/* tooltip global */
.tooltip { position: fixed; z-index: 100; pointer-events: none; max-width: 380px; }
.tooltip .tt { background: #0b0a08f7; border: 1px solid #4a3f2c; border-radius: 8px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 13px; }
.tooltip .tt h4 { font-size: 14.5px; color: var(--gold2); margin-bottom: 2px; }
.tooltip .tt .ty { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 6px; }
.tooltip .tt ul { margin: 0; padding: 0; list-style: none; color: #8f9bff; }
.tooltip .tt li { margin: 2px 0; }
.tooltip .tt .chosen { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff14; color: #e6c27b; }
.tooltip .tt .rt { color: var(--dim); font-size: 12px; margin-top: 6px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 120; background: var(--panel2); border: 1px solid var(--gold); color: var(--text); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .ov-grid, .tree-layout, .gear-layout { grid-template-columns: minmax(0, 1fr); }
  .item-detail { position: static; }
  .guide { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .toc a { border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; font-size: 13px; }
}
@media (max-width: 820px) {
  .games, .home-foot { grid-template-columns: 1fr; }
  .game-card { min-height: 200px; }
  .build-head { grid-template-columns: 1fr; }
  .build-head .actions { justify-content: flex-start; }
  .pc { grid-template-columns: 1fr; }
  .paperdoll { grid-template-columns: repeat(2, 1fr); grid-template-areas: "w1 w2" "hel body" "glo boo" "r1 r2" "amu belt"; }
  .flasks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .app { padding: 20px 16px 60px; }
  .topbar-inner { padding: 0 16px; }
  .tabs { margin: 0 -16px 18px; padding: 0 16px; }
  .build-grid { grid-template-columns: 1fr; }
  .selector .lbl { width: 100%; }
  .selector .pob-links { margin-left: 0; }
  .stage { grid-template-columns: 1fr; }
  .stage-num { justify-content: flex-start; }
  .stage-num::after { display: none; }
  .tree-tools input { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .item-card { min-width: 0; }
}