/* Layout: wiki de leitura — trilho das cidades à esquerda, conteúdo numa coluna larga;
   a cidade aberta tinge o acento da página com o seu elemento. */
:root {
  --bg: #eef0ec;
  --surface: #f8f9f6;
  --raised: #ffffff;
  --ink: #1b2024;
  --muted: #5a636b;
  --line: #d5d9d1;
  --c-default: #3b6f71;
  --accent: var(--c-default);
  --accent-ink: #ffffff;
  --open: #9a6b1f;
  --stage-bg: #e3e7e0;

  --c-crossroads: #5d6b72;
  --c-valgard: #6b7a8a;
  --c-lindeira: #2c6ca3;
  --c-eryndor: #3b7a3d;
  --c-solenne: #6e62bd;
  --c-brassel: #b14b26;
  --c-nox: #a87a26;

  --display: "Alegreya Sans SC", "Alegreya Sans", "Gill Sans", "Segoe UI", sans-serif;
  --body: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.1rem, 4vw, 3rem);
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121519; --surface: #191d22; --raised: #1f242a; --ink: #e7eae6; --muted: #9aa3aa;
    --line: #2d343b; --c-default: #7fb7b7; --accent-ink: #0f1416; --open: #e0ad5c; --stage-bg: #232a31;
    --c-crossroads: #9aa8ae; --c-valgard: #a6b6c6; --c-lindeira: #6fb0e8; --c-eryndor: #7cc27b;
    --c-solenne: #a99cf0; --c-brassel: #f08a5d; --c-nox: #e2b45a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121519; --surface: #191d22; --raised: #1f242a; --ink: #e7eae6; --muted: #9aa3aa;
  --line: #2d343b; --c-default: #7fb7b7; --accent-ink: #0f1416; --open: #e0ad5c; --stage-bg: #232a31;
  --c-crossroads: #9aa8ae; --c-valgard: #a6b6c6; --c-lindeira: #6fb0e8; --c-eryndor: #7cc27b;
  --c-solenne: #a99cf0; --c-brassel: #f08a5d; --c-nox: #e2b45a;
  color-scheme: dark;
}

[data-cidade="crossroads"] { --accent: var(--c-crossroads); }
[data-cidade="valgard"] { --accent: var(--c-valgard); }
[data-cidade="lindeira"] { --accent: var(--c-lindeira); }
[data-cidade="eryndor"] { --accent: var(--c-eryndor); }
[data-cidade="solenne"] { --accent: var(--c-solenne); }
[data-cidade="brassel"] { --accent: var(--c-brassel); }
[data-cidade="nox"] { --accent: var(--c-nox); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.55;
}
img { max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── topo ─────────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; white-space: nowrap; }
.marca em { font-style: normal; font-weight: 500; color: var(--muted); }
.marca-sinal {
  width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--c-valgard), var(--c-lindeira), var(--c-eryndor), var(--c-solenne), var(--c-brassel), var(--c-nox), var(--c-valgard));
  box-shadow: inset 0 0 0 5px var(--bg);
}
.busca { position: relative; flex: 1; max-width: 520px; margin-left: auto; }
.busca input {
  width: 100%; font: inherit; font-size: var(--step--1); color: var(--ink);
  background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
}
.resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 60vh; overflow-y: auto;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / .16); padding: 6px;
}
.resultados a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; text-decoration: none; }
.resultados a:hover, .resultados a.ativo { background: var(--stage-bg); }
.resultados small { color: var(--muted); margin-left: auto; font-size: .8rem; }
.resultados .vazio { padding: 8px; color: var(--muted); font-size: var(--step--1); }
.botao-menu { display: none; font: 600 var(--step--1) var(--body); color: var(--ink); background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; }

/* ── corpo ────────────────────────────────────────────────────────────── */
.corpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); max-width: 1320px; margin: 0 auto; }
.trilho {
  position: sticky; top: 58px; align-self: start; height: calc(100vh - 58px); overflow-y: auto;
  padding-block: 20px 40px; padding-inline: 16px 8px; border-right: 1px solid var(--line);
}
.trilho h2 { font: 700 .72rem var(--body); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 18px 0 6px; }
.trilho h2:first-child { margin-top: 0; }
.trilho a { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; text-decoration: none; font-size: .98rem; }
.trilho a:hover { background: var(--stage-bg); }
.trilho a[aria-current="page"] { background: var(--stage-bg); font-weight: 700; }
.trilho .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.trilho .filhos { padding-left: 17px; border-left: 1px solid var(--line); margin-left: 12px; }
.trilho .filhos a { font-size: .92rem; color: var(--muted); padding-block: 2px; }
.trilho .filhos a[aria-current="page"] { color: var(--ink); }

.pagina { padding-block: 28px 80px; padding-inline: clamp(16px, 4vw, 48px); min-width: 0; outline: none; }
.migalha { font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.migalha a { color: var(--muted); }
h1 { font-family: var(--display); font-weight: 800; font-size: var(--step-3); line-height: 1.05; margin: 0; letter-spacing: .01em; text-wrap: balance; }
h2.secao { font-family: var(--display); font-weight: 700; font-size: var(--step-2); margin: 44px 0 14px; text-wrap: balance; }
h3 { font-family: var(--display); font-weight: 700; font-size: var(--step-1); margin: 0; }
p { margin: 0; max-width: 68ch; }
.lema { font-size: var(--step-1); font-style: italic; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 600 .78rem var(--body); letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; background: var(--stage-bg); color: var(--muted); white-space: nowrap; }
.chip.cidade { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.chip.aberto { background: color-mix(in srgb, var(--open) 18%, transparent); color: var(--open); }
.fio { height: 3px; width: 64px; background: var(--accent); border-radius: 2px; }

/* ── início ───────────────────────────────────────────────────────────── */
.abertura { display: grid; gap: 16px; max-width: 760px; }
.abertura p { font-size: var(--step-1); color: var(--muted); line-height: 1.45; }
.cidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 28px; }
.cartao-cidade {
  display: grid; grid-template-rows: auto 1fr; text-decoration: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, border-color .15s;
}
.cartao-cidade:hover { transform: translateY(-2px); border-color: var(--accent); }
.cartao-cidade .elenco {
  display: flex; justify-content: center; align-items: flex-end; gap: 0; height: 150px; padding-top: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface));
}
.cartao-cidade .elenco img { height: 132px; width: auto; margin-inline: -10px; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .18)); }
.cartao-cidade .texto { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.cartao-cidade .texto p { font-size: var(--step--1); color: var(--muted); }
.cartao-cidade .elemento { font: 500 .75rem var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }

/* ── cidade ───────────────────────────────────────────────────────────── */
.cabeca { display: grid; gap: 12px; }
.pergunta { font-family: var(--display); font-size: var(--step-2); line-height: 1.15; color: var(--accent); max-width: 30ch; text-wrap: balance; }
.arvore { overflow-x: auto; padding-bottom: 6px; }
.arvore-grade { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; min-width: 640px; }
.arvore-coluna { display: grid; gap: 12px; align-content: center; }
.arvore-coluna > span { font: 700 .7rem var(--body); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); text-align: center; }
.no {
  display: grid; justify-items: center; gap: 4px; padding: 10px 8px 12px; text-decoration: none; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s;
}
.no:hover { border-color: var(--accent); }
.no img { height: 110px; width: auto; }
.no b { font-family: var(--display); font-size: 1.05rem; }
.no small { color: var(--muted); font-size: .78rem; }
.oficios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.historia { display: grid; gap: 12px; counter-reset: camada; }
.historia li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.historia li::before { counter-increment: camada; content: counter(camada); font: 500 .8rem var(--mono); color: var(--accent); border: 1px solid var(--accent); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; }
.historia ol { padding: 0; margin: 0; display: grid; gap: 14px; }
.criaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.criatura { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.criatura .foto { width: 72px; height: 72px; display: grid; place-items: center; background: var(--stage-bg); border-radius: 8px; overflow: hidden; }
.criatura .foto img { max-height: 66px; width: auto; }
.criatura .foto span { font: 500 1.4rem var(--display); color: var(--muted); }
.criatura b { font-family: var(--display); }
.criatura p { font-size: .88rem; color: var(--muted); }
.marcos { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── classe ───────────────────────────────────────────────────────────── */
.classe-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: clamp(20px, 4vw, 48px); align-items: end; }
.classe-texto { display: grid; gap: 14px; align-content: end; min-width: 0; }
.retrato {
  position: relative; display: grid; justify-items: center; align-items: end;
  background: radial-gradient(70% 55% at 50% 72%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%);
  border-radius: var(--radius); min-height: 300px;
}
.retrato img { height: clamp(260px, 42vw, 420px); width: auto; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .22)); }
.sexo { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--raised); justify-self: center; margin-top: 10px; }
.sexo button { font: 600 .8rem var(--body); border: 0; background: transparent; color: var(--muted); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.sexo button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.linhagem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--step--1); }
.linhagem a { text-decoration: none; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.linhagem a:hover { border-color: var(--accent); }
.linhagem .seta { color: var(--muted); }
.texto-longo { display: grid; gap: 14px; }
.texto-longo p { font-size: 1.12rem; }
.jornada { display: grid; gap: 0; padding: 0; margin: 0; }
.jornada li { list-style: none; display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.jornada li b { font: 700 .75rem var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); padding-top: 4px; }
.prova { display: grid; gap: 8px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 4px var(--radius) var(--radius) 4px; max-width: 760px; }
.prova .lugar { font-family: var(--display); font-size: var(--step-1); font-weight: 700; }
.aviso { display: flex; gap: 10px; align-items: baseline; color: var(--open); font-size: var(--step--1); max-width: 68ch; }

/* ── habilidades ──────────────────────────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtros button { font: 600 .82rem var(--body); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.filtros button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.lista-skills { display: grid; gap: 8px; }
.skill { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.skill > summary { list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; }
.skill > summary::-webkit-details-marker { display: none; }
.skill[open] { border-color: var(--accent); }
.icone { width: 44px; height: 44px; border-radius: 9px; background-image: url("../img/icons.webp"); background-repeat: no-repeat; flex: none; }
.skill .nome { display: grid; min-width: 0; }
.skill .nome b { font-family: var(--display); font-size: 1.12rem; line-height: 1.2; }
.skill .nome span { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill .nivel { font: 500 .78rem var(--mono); color: var(--muted); white-space: nowrap; }
.skill .detalhe { padding: 4px 14px 16px 70px; display: grid; gap: 12px; }
.skill .detalhe .efeito { font-size: 1.04rem; }
.golpe { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto; border-radius: 8px; background: #0f1114; display: block; }
.skill .detalhe .sabor { font-style: italic; color: var(--muted); }
.tabela { overflow-x: auto; }
.tabela table { border-collapse: collapse; font: 400 .82rem var(--mono); font-variant-numeric: tabular-nums; min-width: 100%; }
.tabela th, .tabela td { padding: 4px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; color: var(--muted); font-family: var(--body); font-weight: 600; }
.tabela thead th { color: var(--muted); font-weight: 500; }
.requisitos { font-size: .9rem; color: var(--muted); }
.requisitos a { color: var(--ink); }

@media (max-width: 860px) {
  .corpo { grid-template-columns: minmax(0, 1fr); }
  .botao-menu { display: inline-block; }
  .trilho { position: fixed; inset: 58px 0 0 0; height: auto; background: var(--bg); z-index: 9; border-right: 0; padding-inline: 16px; }
  .trilho:not(.aberto) { display: none; }
  .classe-topo { grid-template-columns: minmax(0, 1fr); }
  .retrato { order: -1; min-height: 0; }
  .jornada li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .skill .detalhe { padding-left: 14px; }
}
@media (max-width: 560px) {
  .marca em { display: none; }
  .topo { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}