/* ============================================================
   PÁGINAS INTERNAS — cabeçalho comum e blocos de cada página
   ============================================================ */
.pg-cab { position: relative; overflow: hidden; padding-block: clamp(52px, 8vw, 100px) clamp(38px, 6vw, 68px); }
.pg-cab::after { content: ""; position: absolute; right: -5vw; top: 50%; width: min(44vw, 470px); aspect-ratio: 100 / 112; transform: translateY(-50%) rotate(9deg); background: url("/site/img/folha-marca.svg") center / contain no-repeat; opacity: .13; pointer-events: none; }
.pg-cab .wrap { position: relative; z-index: 1; }
.pg-cab h1 { font-size: clamp(44px, 8.4vw, 108px); line-height: .94; color: var(--luz); max-width: 14ch; }
.pg-cab .lede { margin-top: 24px; max-width: 52ch; }
.pg-selo { position: absolute; z-index: 2; right: max(var(--gut), calc((100vw - var(--max)) / 2)); bottom: clamp(24px, 4vw, 44px); transform: rotate(-7deg); border: 4px solid #ff6a4a; color: #ff6a4a; padding: 6px 12px 5px; background: rgba(21, 18, 27, .5); }
.pg-selo .pixsvg { height: auto; }
@media (max-width: 760px) { .pg-selo { display: none; } .pg-cab h1 { max-width: none; } }
.sec.sem-topo { padding-top: 0; }

/* ---------- MUNDO ---------- */
.mundo-radar { background: var(--noite); }
.mundo-radar .radar-mapa { max-width: 760px; }
.mundo-radar .radar-cols { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); }
.mundo-radar .radar-lista { max-height: 620px; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--noite-4) transparent; }
.dicas-radar { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 26px 0 0; padding: 0; font: 500 14px/1.4 var(--sans); color: var(--luz-2); }
.dicas-radar li::before { content: "▸ "; color: #ff8a6e; }
.dossies { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: 52px; }
.dossie { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 3.4vw, 44px); padding: 0 0 clamp(28px, 4vw, 48px); border-bottom: 3px solid var(--tinta); align-items: start; }
.dossie:last-child { border-bottom: 0; }
.dossie-mini { position: relative; border: 4px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); background: #0e0b13; line-height: 0; }
.dossie-mini canvas { width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.dossie-mini figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px; background: var(--tinta); color: var(--luz); font: 800 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.dossie h3 { font-size: clamp(28px, 3.6vw, 42px); }
.dossie-nv { display: inline-block; margin-left: 12px; vertical-align: middle; color: var(--selo-2); }
.dossie-txt { max-width: 62ch; margin: 12px 0 18px; }
.dossie dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 32px; margin: 0; }
.dossie dt { font: 800 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--selo-2); margin-bottom: 8px; }
.dossie dd { margin: 0; font-size: 16px; line-height: 1.5; }
.icones { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; margin: 0; padding: 0; }
.icones li { display: flex; align-items: center; gap: 7px; font: 600 13.5px/1.2 var(--sans); }
.icones canvas { flex: none; width: 28px; height: 28px; background: var(--papel-3); border: 2px solid var(--tinta); }
.icones .chefe canvas { border-color: var(--selo); background: #e9c2b4; }
.icones small { display: block; font-weight: 500; color: var(--tinta-3); font-size: 11.5px; }
@media (max-width: 760px) { .dossie { grid-template-columns: 1fr; } .dossie-mini { max-width: 240px; } }

/* ---------- BESTIÁRIO ---------- */
.filtro-barra { background: var(--papel-2) var(--grao); border-block: 3px solid var(--tinta); z-index: 40; }
@media (min-width: 900px) { .filtro-barra { position: sticky; top: calc(var(--topo-real, 91px) - 1px); } }
.filtro-in { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-block: 14px; align-items: center; }
.filtro-grupo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filtro-rot { font: 800 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--selo-2); }
.filtro-barra .tab { min-height: 38px; padding: 9px 13px; font-size: 11.5px; }
.filtro-barra .tab:hover { background: var(--papel-3); } .filtro-barra .tab[aria-pressed="true"]:hover { background: var(--tinta-2); }
.akat-fundo { overflow: hidden; }
.akat-fundo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cpath d='M14 60c-9 0-12-11-3-15 2-9 13-11 19-4 4-9 19-9 22 1 10-3 15 8 8 14 4 6 0 12-7 12H20z' fill='%23c4241a' stroke='%23f4e9cc' stroke-width='2.5'/%3E%3C/svg%3E"); background-size: 120px 90px; background-position: 10px 10px; }
.akat-fundo .wrap { position: relative; z-index: 1; }
.mural { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 44px; align-items: start; }
.mural-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mural-item { display: flex; gap: 12px; align-items: center; padding: 7px 12px 7px 8px; background: var(--noite-2); border-left: 5px solid var(--aura, #c2311b); cursor: pointer; color: var(--luz); transition: transform .1s steps(2); }
.mural-item:hover { background: var(--noite-3); transform: translateX(3px); }
.mural-item[aria-selected="true"] { background: var(--luz); color: var(--tinta); transform: translateX(6px); }
.mural-item canvas { flex: none; width: 40px; height: 40px; background: rgba(0, 0, 0, .35); }
.mural-item[aria-selected="true"] canvas { background: rgba(27, 23, 18, .25); }
.mural-item b { display: block; font: 800 14px/1.2 var(--sans); } .mural-item em { font: 500 12px var(--sans); font-style: normal; opacity: .85; }
.dossie-boss { --aura: #c2311b; position: relative; background: var(--noite-2); border: 3px solid var(--luz-2); padding: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); box-shadow: 8px 8px 0 #000; overflow: hidden; }
.dossie-vazio { grid-column: 1 / -1; display: grid; gap: 6px; padding: 30px 6px; } .dossie-vazio b { font: 900 30px var(--serif); } .dossie-vazio span { color: var(--luz-2); font: 500 15px var(--sans); }
.db-carimbo { position: absolute; z-index: 2; right: 18px; top: 16px; transform: rotate(7deg); border: 3px solid #ff6a4a; color: #ff6a4a; font: 900 13px var(--sans); letter-spacing: .22em; padding: 5px 10px; background: rgba(21, 18, 27, .4); }
.db-cena { position: relative; display: grid; place-items: end center; min-height: 320px; }
.db-cena::before { content: ""; position: absolute; left: 50%; bottom: 22px; width: min(100%, 270px); aspect-ratio: 1; margin-left: calc(min(100%, 270px) / -2); border-radius: 50%; background: var(--aura); opacity: .2; }
.db-cena::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 14px; height: 6px; background: var(--aura); opacity: .55; }
.db-sprite { position: relative; z-index: 1; max-width: 100%; height: auto; }
.db-cod { font: 800 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #ff9a86; margin: 0 0 6px; }
.db-info h3 { font-size: clamp(34px, 4.6vw, 58px); color: #fff; }
.db-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; } .db-meta span { padding: 4px 9px; background: var(--noite-3); color: var(--luz); font: 700 12px var(--sans); border-left: 3px solid var(--aura); }
.db-nota { margin: 16px 0 18px; font-size: 17px; line-height: 1.55; color: var(--luz); max-width: 56ch; }
.db-barras { display: grid; gap: 9px; margin-bottom: 20px; }
.bar { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; font: 700 13px var(--sans); }
.bar-r { color: var(--luz-2); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; }
.bar-t { display: block; height: 12px; background: #0d0b12; border: 2px solid #000; box-shadow: 0 0 0 1px var(--noite-4); }
.bar-t i { display: block; height: 100%; background: var(--aura, #c2311b); }
.bar b { min-width: 60px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.db-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 20px; padding-top: 16px; border-top: 2px dashed var(--noite-4); }
.db-lista dt, .db-rot { font: 800 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #ff9a86; margin-bottom: 5px; display: block; } .db-lista dd { margin: 0; font: 600 15px var(--sans); color: #fff; }
.cranios { display: inline-flex; gap: 4px; } .cranios i { color: #4a4258; line-height: 0; } .cranios i.on { color: #ff6a4a; }
.db-hab { margin-bottom: 14px; } .db-hab ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .db-hab li { padding: 5px 10px; background: var(--noite-3); color: var(--luz); font: 600 13px var(--sans); } .db-hab em { font-style: normal; color: #ffb060; font-weight: 800; }
.db-dica { margin: 18px 0 0; padding: 12px 14px; background: rgba(255, 106, 74, .1); border-left: 4px solid #ff6a4a; font: 500 15px/1.5 var(--sans); color: var(--luz); } .db-dica b { color: #ff9a86; }
@media (max-width: 980px) { .mural { grid-template-columns: 1fr; } .mural-lista { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .mural-item[aria-selected="true"], .mural-item:hover { transform: none; } .dossie-boss { grid-template-columns: 1fr; } .db-cena { min-height: 280px; } }
.cri-ferr { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: flex-end; justify-content: space-between; margin: 22px 0 34px; }
.ordem { font: 700 13px var(--sans); display: flex; align-items: center; gap: 10px; } .ordem select { font: 700 14px var(--sans); padding: 10px 34px 10px 12px; border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); min-height: 44px; }
.cri-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 24px; }
.cri { --aura: #c2311b; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; background: var(--papel-2) var(--grao); border: 3px solid var(--tinta); padding: 14px; box-shadow: 5px 5px 0 var(--tinta); }
.cri.chefe { box-shadow: 5px 5px 0 var(--selo-3); }
.cri-foto { display: grid; place-items: end center; background: var(--papel-3); border: 3px solid var(--tinta); min-height: 118px; padding-bottom: 6px; align-self: start; }
.cri h3 { font-size: 21px; } .cri-sub { font: 700 12px/1.4 var(--sans); letter-spacing: .06em; color: var(--tinta-3); margin: 4px 0 12px; }
.cri-barras { display: grid; gap: 6px; } .cri .bar { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 9px; font-size: 12.5px; } .cri .bar-r { color: var(--tinta-3); } .cri .bar-t { background: var(--papel-3); border-color: var(--tinta); box-shadow: none; height: 10px; } .cri .bar-t i { background: var(--selo); } .cri .bar b { color: var(--tinta); min-width: 54px; }
.cri-exp { font: 500 13px/1.45 var(--sans); margin: 12px 0 0; color: var(--tinta-2); } .cri-exp b { color: var(--selo-2); }
.cri-vazio { padding: 30px; text-align: center; color: var(--tinta-3); font: 500 15px var(--sans); grid-column: 1 / -1; }

/* ---------- LIVRO BINGO (página) ---------- */
.busca { margin-left: auto; } .busca input { font: 600 15px var(--sans); padding: 11px 14px; min-height: 44px; width: min(320px, 100%); border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); }
.busca input::placeholder { color: var(--tinta-3); }
.atualizado { flex-basis: 100%; margin: -4px 0 0; font: 600 12.5px var(--sans); color: var(--tinta-3); min-height: 18px; }
.bingo-pg { padding-top: clamp(36px, 5vw, 60px); }
.bingo-pg .bingo-3 { margin-top: 30px; }
.bingo-lista-wrap { margin-top: 64px; }
.bingo-lista-cab, .bingo-linha { display: grid; grid-template-columns: 52px 68px minmax(0, 1.5fr) 88px 88px 96px 96px 150px; gap: 12px; align-items: center; }
.bingo-lista-cab { padding: 0 20px 0 20px; font: 800 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 10px; }
.bingo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bingo-linha { --cla: var(--tinta); --fundo: var(--papel-3); padding: 8px 18px 8px 12px; background: var(--papel-2) var(--grao); border: 3px solid var(--tinta); border-left: 9px solid var(--cla); box-shadow: 4px 4px 0 var(--tinta); }
.bl-pos { font: 900 22px var(--sans); color: var(--selo-2); font-variant-numeric: tabular-nums; }
.bl-foto { display: block; width: 68px; height: 68px; overflow: hidden; background: var(--fundo); border: 2px solid var(--tinta); position: relative; }
.bl-foto canvas { position: absolute; left: -14px; top: 0; }
.bl-nome b { display: block; font: 900 21px/1.1 var(--serif); word-break: break-word; } .bl-nome span { font: 800 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.bl-c { font: 800 18px var(--sans); font-variant-numeric: tabular-nums; } .bl-c em { display: none; }
.bl-c.on { color: var(--selo-2); } .bl-rec { font-size: 15px; }
.como-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.regras { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 34px; margin: 0; } .regras dt { font: 800 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--selo-2); margin-bottom: 6px; } .regras dd { margin: 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) { .como-grid { grid-template-columns: 1fr; } .regras { grid-template-columns: 1fr; } .busca { margin-left: 0; flex: 1 1 100%; } .busca input { width: 100%; } }
@media (max-width: 860px) {
  .bingo-lista-cab { display: none; }
  .bingo-linha { grid-template-columns: 34px 68px repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 12px; }
  .bl-nome { grid-column: 3 / -1; } .bl-foto { grid-row: 1 / span 2; }
  .bl-pos { grid-row: 1 / span 2; align-self: center; font-size: 18px; }
  .bl-c { grid-row: 2; font-size: 16px; } .bl-c em { display: block; font: 800 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); font-style: normal; }
  .bl-vd, .bl-rec { display: none; }
}

.bl-foto canvas, .radar-item .ret canvas { max-width: none; }

/* ---------- CLÃS (página) ---------- */
.cla-sec { --cla: #e8801d; --cla2: #2c58c4; --fundo: #f0a04b; --fg: var(--tinta); position: relative; padding-bottom: clamp(56px, 8vw, 100px); }
.cla-sec.cla-mage { --fg: var(--luz); }
.cla-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: -1px; position: relative; z-index: 2; box-shadow: 0 5px 0 rgba(27, 23, 18, .0); }
.cla-aba { --cla: #888; --fg: var(--luz); display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: var(--noite-2); color: var(--luz); border: 0; border-top: 6px solid var(--cla); cursor: pointer; text-align: left; font: inherit; min-height: 84px; }
.cla-aba.cla-warrior { --fg: var(--tinta); } .cla-aba.cla-elf { --fg: var(--tinta); }
.cla-aba:hover { background: var(--noite-3); }
.cla-aba[aria-selected="true"] { background: var(--cla); color: var(--fg); }
.cla-aba-emb { flex: none; color: var(--cla); } .cla-aba[aria-selected="true"] .cla-aba-emb { color: var(--cla2); } .cla-aba-emb svg { width: 40px; height: 40px; display: block; }
.cla-aba b { display: block; font: 900 clamp(20px, 2.6vw, 30px)/1.05 var(--serif); } .cla-aba em { display: block; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; opacity: .95; margin-top: 3px; }
.cla-painel { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(30px, 4vw, 56px); align-items: start; }
.cla-painel:focus { outline: none; }
.cla-palco { position: sticky; top: calc(var(--topo-real, 91px) + 18px); background: var(--cla); color: var(--fg); padding: 26px 20px 20px; display: grid; justify-items: center; gap: 16px; border: 4px solid var(--tinta); box-shadow: 8px 8px 0 var(--tinta); overflow: hidden; }
.cla-emb { position: absolute; right: -36px; top: -24px; color: var(--cla2); opacity: .3; pointer-events: none; } .cla-emb svg { width: 230px; height: 230px; }
.cla-sol { position: absolute; left: 50%; top: 56px; width: 250px; height: 250px; margin-left: -125px; border-radius: 50%; background: var(--fundo); opacity: .75; }
.cla-sprite { position: relative; max-width: 100%; height: auto; margin-top: 4px; }
.prov { position: relative; width: 100%; background: rgba(21, 18, 27, .94); color: var(--luz); padding: 16px 16px 14px; display: grid; gap: 10px; }
.prov-tit { margin: 0; font: 900 20px var(--serif); } .prov-rot { font: 800 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #ff9a86; padding: 0; }
.prov fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.prov input[type=range] { width: 100%; height: 30px; background: transparent; accent-color: #ff6a4a; cursor: pointer; }
.prov-out { font: 600 14px/1.35 var(--sans); color: var(--luz); } .prov-out b { color: #fff; font-size: 16px; } .prov-out small { color: var(--luz-2); font-size: 12.5px; }
.prov-tick { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.prov-tick button { height: 24px; padding: 0; background: var(--c); border: 2px solid #000; cursor: pointer; }
.prov-tick button[aria-pressed="true"] { outline: 3px solid #ffd766; outline-offset: 1px; }
.prov-radios { display: grid; gap: 5px; margin-top: 6px; }
.radio { position: relative; display: block; } .radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio span { display: block; padding: 8px 10px; border: 2px solid var(--noite-4); font: 700 12px var(--sans); color: var(--luz-2); }
.radio input:checked + span { background: var(--luz); color: var(--tinta); border-color: var(--luz); } .radio input:focus-visible + span { outline: 3px solid #ffd766; outline-offset: 2px; }
.prov-dir { display: flex; flex-wrap: wrap; gap: 6px; } .prov-dir .tab { min-height: 34px; padding: 7px 10px; font-size: 11px; color: var(--luz); border-color: var(--noite-4); } .prov-dir .tab[aria-pressed="true"] { background: var(--luz); color: var(--tinta); }
.cla-info h2 { font-size: clamp(44px, 7vw, 84px); margin-bottom: 14px; }
.cla-estilo { font-size: 18px; line-height: 1.55; max-width: 54ch; margin-top: 8px; }
.cla-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; } .cla-chips span { padding: 8px 12px; background: var(--tinta); color: var(--luz); font: 700 14px var(--sans); } .cla-chips small { display: block; font: 800 9.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #ff9a86; }
.cla-h { font-size: 22px; margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 3px solid var(--tinta); }
.atrs { display: grid; gap: 8px; max-width: 520px; }
.atr { display: grid; grid-template-columns: 130px minmax(0, 1fr) 34px; gap: 12px; align-items: center; font: 700 14px var(--sans); } .atr small { color: var(--selo-2); font: 800 9.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.atr i { display: block; height: 14px; background: var(--papel-3); border: 2px solid var(--tinta); } .atr b { display: block; height: 100%; background: var(--cla); border-right: 2px solid var(--tinta); } .atr em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.atr.chave b { background: var(--selo); }
.cla-num { font: 500 15px/1.6 var(--sans); margin: 14px 0 0; color: var(--tinta-2); max-width: 60ch; } .cla-num b { color: var(--tinta); }
.jutsus { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.jutsu { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px 16px 14px 14px; background: var(--papel-2) var(--grao); border: 3px solid var(--tinta); border-left: 9px solid var(--el, var(--selo)); box-shadow: 4px 4px 0 var(--tinta); }
.jutsu-ic { width: 74px; height: 74px; display: grid; place-items: center; background: #14100c; border: 3px solid var(--tinta); } .jutsu-ic canvas { width: 64px; height: 64px; max-width: none; }
.jutsu h4 { font: 900 22px/1.1 var(--serif); } .jutsu-tipo { font: 800 11px var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--selo-2); margin: 3px 0 7px !important; }
.jutsu p { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
.jutsu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; } .jutsu-chips span { padding: 3px 9px; background: var(--papel-3); font: 700 12px var(--sans); }
.cla-dica { margin: 24px 0 0; padding: 14px 16px; background: var(--papel-2); border-left: 6px solid var(--selo); font: 500 16px/1.5 var(--sans); }
@media (max-width: 980px) { .cla-painel { grid-template-columns: 1fr; } .cla-palco { position: relative; top: 0; max-width: 460px; } .cla-abas { grid-template-columns: 1fr; } .cla-aba { min-height: 64px; padding: 12px 16px; } .cla-aba-emb svg { width: 32px; height: 32px; } }
.cmp-wrap { margin-top: 34px; overflow-x: auto; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--papel) var(--grao); border: 3px solid var(--tinta); }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 2px solid var(--papel-4); vertical-align: top; font: 500 15px/1.45 var(--sans); }
.cmp thead th { font: 900 26px var(--serif); border-top: 8px solid var(--cla); background: var(--papel-2); }
.cmp tbody th { font: 800 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--selo-2); width: 18%; }

/* ---------- GUIA ---------- */
.guia-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-block: clamp(40px, 6vw, 80px); align-items: start; }
.guia-toc { position: sticky; top: calc(var(--topo-real, 91px) + 24px); }
.toc-det summary { font: 800 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--selo-2); cursor: pointer; padding: 0 0 12px; list-style: none; }
.toc-det summary::-webkit-details-marker { display: none; }
.guia-toc ol { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--tinta); }
.guia-toc a { display: block; padding: 8px 14px; margin-left: -3px; border-left: 3px solid transparent; font: 700 14px/1.3 var(--sans); text-decoration: none; }
.guia-toc a:hover { background: var(--papel-2); color: var(--tinta); }
.guia-toc a[aria-current] { border-left-color: var(--selo); color: var(--selo-2); background: var(--papel-2); }
.g-sec { padding-bottom: clamp(40px, 6vw, 72px); margin-bottom: clamp(40px, 6vw, 72px); border-bottom: 3px solid var(--tinta); }
.g-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.g-num { color: var(--selo); display: block; margin-bottom: 12px; }
.g-sec h2 { font-size: clamp(32px, 4.6vw, 54px); margin-bottom: 22px; }
.g-sec > p, .g-sec > ul > li, .g-sec > ol > li { max-width: 68ch; }
.g-h3 { font-size: 24px; margin: 36px 0 16px; padding-bottom: 8px; border-bottom: 3px solid var(--tinta); }
.passos { list-style: none; counter-reset: p; padding: 0; margin: 0 0 18px; display: grid; gap: 20px; }
.passos li { counter-increment: p; position: relative; padding-left: 62px; min-height: 44px; }
.passos li::before { content: counter(p); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; background: var(--selo); color: var(--luz); font: 900 20px var(--sans); clip-path: var(--px-clip); --c: 4px; }
.nota { background: var(--papel-2); border-left: 6px solid var(--selo); padding: 12px 16px; font: 500 15.5px/1.5 var(--sans); max-width: 68ch; }
code { font: 700 .86em var(--mono); background: var(--tinta); color: var(--luz); padding: 2px 7px; white-space: nowrap; }
.teclas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.tecla { background: var(--papel-2) var(--grao); border: 3px solid var(--tinta); padding: 14px 16px 16px; box-shadow: 4px 4px 0 var(--tinta); }
.tk { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; min-height: 40px; align-items: center; }
.tecla p { margin: 0; font: 500 15px/1.5 var(--sans); }
.cmds, .tab-eq { width: 100%; border-collapse: collapse; background: var(--papel) var(--grao); border: 3px solid var(--tinta); margin: 14px 0; }
.cmds th, .cmds td, .tab-eq th, .tab-eq td { padding: 12px 14px; text-align: left; border-bottom: 2px solid var(--papel-4); vertical-align: top; font: 500 15px/1.5 var(--sans); }
.cmds thead th, .tab-eq thead th { background: var(--tinta); color: var(--luz); font: 800 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.cmds tbody th { width: 34%; font-weight: 400; } .cmds code { white-space: normal; overflow-wrap: anywhere; }
.tab-eq { min-width: 680px; } .tab-eq tbody th { font-weight: 800; white-space: nowrap; } .tab-eq td.num { font-weight: 800; font-variant-numeric: tabular-nums; }
.tab-eq tr.manto th, .tab-eq tr.manto td { background: var(--papel-2); }
.sw { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--tinta); vertical-align: -3px; margin-right: 10px; } .sw.grande { width: 34px; height: 34px; margin: 0; flex: none; }
.lista-pts, .dicas { padding-left: 22px; margin: 0 0 18px; } .lista-pts li, .dicas li { margin-bottom: 10px; padding-left: 4px; } .lista-pts li::marker, .dicas li::marker { color: var(--selo); }
.sagas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.saga { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; padding: 16px 18px; background: var(--papel-2) var(--grao); border: 3px solid var(--tinta); border-left: 10px solid var(--selo); box-shadow: 4px 4px 0 var(--tinta); }
.saga-n { font: 900 48px/1 var(--serif); color: var(--selo); text-align: center; }
.saga h4 { font: 900 24px/1.1 var(--serif); } .saga p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; }
.saga-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 !important; } .saga-meta span { padding: 3px 9px; background: var(--papel-3); font: 700 12px var(--sans); } .saga-meta .pet { background: var(--tinta); color: var(--luz); }
.pets { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.pet { padding: 14px 16px; background: var(--papel-2) var(--grao); border: 3px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); } .pet h3 { font: 900 22px var(--serif); } .pet p { margin: 8px 0 0; font: 500 15px/1.5 var(--sans); } .pet-src { font-size: 13px !important; }
.joias, .pocoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.joias li, .pocoes li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; background: var(--papel-2); border: 2px solid var(--tinta); } .joias p, .pocoes p { margin: 3px 0 0; font: 500 14.5px/1.45 var(--sans); } .joias b, .pocoes b { font: 800 15px var(--sans); }
@media (max-width: 960px) { .guia-grid { grid-template-columns: 1fr; } .guia-toc { position: relative; top: auto; background: var(--papel-2); border: 3px solid var(--tinta); padding: 14px 16px; } .toc-det:not([open]) summary { padding-bottom: 0; } }

/* ---------- DIÁRIO ---------- */
.diario-sec { padding-top: clamp(40px, 5vw, 64px); }
.diario-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.feed { list-style: none; margin: 0; padding: 0 0 0 0; border-left: 4px solid var(--tinta); }
.feed-dia { margin: 0 0 0 -4px; padding: 14px 0 12px 22px; font: 800 11.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--selo-2); border-left: 4px solid var(--selo); }
.ev { position: relative; display: grid; grid-template-columns: 54px auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0 16px 22px; border-bottom: 2px dashed var(--papel-4); }
.ev::before { content: ""; position: absolute; left: -10px; top: 24px; width: 16px; height: 16px; background: var(--selo); border: 3px solid var(--papel); }
.ev-boss::before { background: var(--selo-3); } .ev-fire::before { background: #e88a2a; } .ev-levelup::before { background: #2a7a44; } .ev-duel::before { background: #2a5f95; } .ev-info::before { background: var(--tinta-3); } .ev-invasion::before { background: #9a6a08; }
.ev-hora { font: 800 13px var(--sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; padding-top: 4px; }
.ev-ic { padding-top: 2px; }
.ev-tipo { font: 800 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.ev p { margin: 3px 0 0; font-size: 18px; line-height: 1.4; }
.ev-ago { font: 600 12px var(--sans); font-style: normal; color: var(--tinta-3); padding-top: 4px; white-space: nowrap; }
.ev.novo { animation: ev-novo 5s ease-out; } @keyframes ev-novo { 0% { background: #f2cf7a; } 100% { background: transparent; } }
.ev-boss p { font-weight: 700; }
.lateral { position: sticky; top: calc(var(--topo-real, 91px) + 20px); display: grid; gap: 20px; }
.painel-fogo { background: var(--noite); color: var(--luz); padding: 22px 22px 24px; border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); display: grid; justify-items: center; text-align: center; gap: 10px; position: relative; overflow: hidden; }
.painel-rot { font: 800 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #ff9a86; margin: 0; }
.painel-chama canvas { width: 224px !important; height: 248px !important; }
.painel-nv { margin: 0; color: #ffb060; line-height: 0; }
.painel-fogo .fogo-medidor { width: 100%; margin: 8px 0 4px; height: 24px; }
.painel-txt { font: 500 14px/1.5 var(--sans); margin: 0; color: var(--luz); } .painel-txt b { color: #ffb060; }
.painel-inv { background: #3a1410; color: var(--luz); border: 3px solid #ff5a3a; padding: 16px 18px; display: grid; gap: 8px; animation: inv-pulso 2s steps(2) infinite; box-shadow: 6px 6px 0 var(--tinta); }
@keyframes inv-pulso { 50% { border-color: #ffb060; } }
.painel-inv .painel-rot { color: #ffb060; } .inv-txt, .inv-tempo { margin: 0; font: 500 15px var(--sans); } .inv-txt b, .inv-tempo b { color: #fff; font-size: 18px; }
.painel-inv .btn { justify-self: start; }
.legenda-ev { background: var(--papel-2) var(--grao); border: 3px solid var(--tinta); padding: 14px 18px; } .legenda-ev .painel-rot { color: var(--selo-2); margin-bottom: 10px; }
.legenda-ev ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .legenda-ev li { display: flex; align-items: center; gap: 8px; font: 700 13px var(--sans); }
@media (max-width: 980px) { .diario-grid { grid-template-columns: 1fr; } .lateral { position: relative; top: 0; order: -1; } .painel-chama canvas { width: 168px !important; height: 186px !important; } .ev { grid-template-columns: 46px auto minmax(0, 1fr); } .ev-ago { grid-column: 3; padding-top: 0; } }
@media (max-width: 520px) { .ev { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding-left: 18px; } .ev-hora { grid-column: 1 / -1; padding: 0; } .ev-ago { grid-column: 2; } .ev p { font-size: 17px; } }
.rolos { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 26px; max-width: 900px; }
.rolo { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 22px; padding: 26px 28px; background: var(--papel) var(--grao); border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); }
.rolo::before, .rolo::after { content: ""; position: absolute; left: -10px; right: -10px; height: 14px; background: var(--tinta); }
.rolo::before { top: -10px; } .rolo::after { bottom: -10px; }
.rolo-selo { color: var(--selo); align-self: start; } .rolo-selo svg { width: 70px; height: 78px; }
.rolo-data { font: 800 11.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--selo-2); margin: 0 0 6px; }
.rolo h3 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; } .rolo ul { margin: 0; padding-left: 20px; } .rolo li { margin-bottom: 8px; max-width: 62ch; } .rolo li::marker { color: var(--selo); }
.rolo.novo { border-color: var(--selo-3); box-shadow: 6px 6px 0 var(--selo-3); }
@media (max-width: 640px) { .rolo { grid-template-columns: 1fr; padding: 22px 18px; } .rolo-selo svg { width: 46px; height: 52px; } }

/* ajustes finais de responsivo */
.mundo-radar .radar-mapa { max-width: min(760px, calc(100vh - 240px)); min-width: min(100%, 340px); }
.bingo-3:has(> .vazia) { grid-template-columns: minmax(0, 340px); justify-content: center; }
@media (max-width: 900px) {
  .mundo-radar .radar-cols { grid-template-columns: 1fr; }
  .mundo-radar .radar-mapa { max-width: 100%; }
  .mundo-radar .radar-lista { max-height: none; }
}
@media (max-width: 700px) {
  .radar-abas { flex-wrap: nowrap; overflow-x: auto; padding: 0 0 10px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-snap-type: x proximity; scrollbar-width: thin; }
  .radar-abas .tab { flex: none; scroll-snap-align: start; }
}
.ns { margin: 0; padding: 14px var(--gut); background: var(--noite); color: var(--luz); font: 600 14px var(--sans); }
.ns a { color: #ffb060; }