/* =============================================================================
   SemearIA: layout. O quadro tem três faixas fixas (cabeçalho, palco rolável,
   paginador): o paginador nunca cobre o conteúdo e cada seção ocupa a altura
   inteira do palco. Porte de Myths' Valley (vale.css, chat.css, editorial.css).
   ============================================================================= */

/* ---------- quadro: cabeçalho / palco / paginador ---------- */
.quadro { height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--header-h) minmax(0, 1fr) var(--pager-h); }
.quadro.sem-paginador .paginador__controles, .quadro.sem-paginador .paginador__rotulo { display: none; }
.quadro.sem-paginador .paginador__utilidades { grid-column: -2 / -1; }
.sem-js .paginador__controles { visibility: hidden; }
.palco { overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; scroll-snap-type: y proximity; overscroll-behavior-y: contain; position: relative; }
.palco:focus { outline: none; }
.palco { scrollbar-color: var(--ouro) transparent; }
@supports selector(::-webkit-scrollbar) {
    .palco { scrollbar-color: auto; }
    .palco::-webkit-scrollbar { width: 12px; background: transparent; }
    .palco::-webkit-scrollbar-track, .palco::-webkit-scrollbar-corner { background: transparent; }
    .palco::-webkit-scrollbar-thumb { background: var(--ouro); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
    .palco::-webkit-scrollbar-thumb:hover { background-color: var(--ouro-claro); }
    .palco::-webkit-scrollbar-button:single-button { display: block; height: 12px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: 8px 5px; }
    .palco::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23ebbd5c' d='M0 5 4 0 8 5Z'/%3E%3C/svg%3E"); }
    .palco::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23ebbd5c' d='M0 0 4 5 8 0Z'/%3E%3C/svg%3E"); }
}

/* ---------- cabeçalho ---------- */
.cabecalho {
    position: relative; z-index: 40;
    display: flex; align-items: center; gap: clamp(14px, 2vw, 34px);
    padding: 0 var(--gutter);
    background: linear-gradient(180deg, #0f2219, #0b1a13);
    border-bottom: 1px solid var(--ouro-linha);
}
.cabecalho__marca { display: flex; align-items: center; flex: 0 0 auto; gap: clamp(12px, 1.2vw, 18px); text-decoration: none; }
.cabecalho__lema { padding-left: clamp(12px, 1.2vw, 18px); border-left: 1px solid var(--ouro-linha); font: italic 500 calc(var(--fs-corpo) * .78)/1.2 Cormorant, serif; font-variant-numeric: oldstyle-nums; color: var(--texto-suave); white-space: nowrap; }
.navegacao { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 26px); margin-left: auto; }
.navegacao__grupo { position: relative; }
.navegacao__grupo > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
    font: 500 var(--fs-placa)/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase;
    padding: 10px 6px; color: var(--texto);
}
.navegacao__grupo > summary::-webkit-details-marker { display: none; }
.navegacao__grupo > summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.navegacao__grupo[open] > summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.navegacao__grupo > summary:hover, .navegacao__grupo.atual > summary { color: var(--ouro); }
.navegacao__menu {
    position: absolute; top: calc(100% + 12px); right: -12px; min-width: 250px; padding: 8px;
    background: #122a1f; border: 1px solid var(--ouro-linha); box-shadow: var(--sombra);
    display: grid;
}
.navegacao__menu::before { content: ''; position: absolute; top: -6px; right: 28px; width: 10px; height: 10px; background: #122a1f; border-left: 1px solid var(--ouro-linha); border-top: 1px solid var(--ouro-linha); transform: rotate(45deg); }
.navegacao__menu a { display: flex; justify-content: space-between; gap: 28px; align-items: baseline; white-space: nowrap; padding: 11px 12px; text-decoration: none; font-size: calc(var(--fs-corpo) * .95); }
.navegacao__menu a small { color: var(--texto-suave); font-size: .8em; }
.navegacao__menu a:hover, .navegacao__menu a[aria-current] { background: var(--ouro-tenue); color: var(--ouro-claro); }
.cabecalho__acoes { display: flex; align-items: center; gap: 10px; }
.cabecalho__acoes .etiqueta { padding: 6px 10px; }
.botao-menu { display: none; }

/* ---------- paginador (faixa própria, abaixo do palco) ---------- */
.paginador {
    position: relative; z-index: 30;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    padding: 0 var(--gutter);
    background: linear-gradient(0deg, #0b1a13, #0f2219);
    border-top: 1px solid var(--ouro-linha);
}
.paginador__rotulo { margin: 0; font: 500 var(--fs-mini)/1.2 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paginador__rotulo b { color: var(--ouro); font-weight: 600; }
.paginador__controles { display: flex; align-items: center; gap: 6px; }
.paginador__seta { width: 40px; height: 36px; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid transparent; color: var(--ouro); cursor: pointer; transition: background .2s, border-color .2s; }
.paginador__seta:hover:not(:disabled) { background: var(--ouro-tenue); border-color: var(--ouro); }
.paginador__seta:disabled { opacity: .3; cursor: default; }
.paginador__seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.paginador__pontos { display: flex; align-items: center; padding: 0 6px; max-width: min(56vw, 520px); overflow: hidden; }
.paginador__ponto { width: 22px; height: 30px; padding: 0; border: 0; background: none; position: relative; cursor: pointer; flex: 0 0 auto; }
/* o ponto é o losango de pixel: apagado em ouro escuro, aceso em ouro com brilho; nunca muda de escala */
.paginador__ponto::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--ouro-escuro); clip-path: var(--losango); transform: translate(-50%, -50%); transition: background .2s; }
.paginador__ponto:hover::after { background: var(--ouro-claro); }
.paginador__ponto[aria-current] { filter: drop-shadow(0 0 3px rgba(235, 189, 92, .6)); }
.paginador__ponto[aria-current]::after { background: var(--ouro); }
.paginador__ponto svg { display: none; }
.paginador__ponto--colecao { color: var(--ouro); }
.paginador__ponto--colecao::after { width: 20px; height: 20px; clip-path: none; border-radius: 50%; background: transparent; }
.paginador__ponto--colecao:hover::after { background: var(--ouro-tenue); }
.paginador__ponto--colecao svg { display: block; position: relative; z-index: 1; width: 14px; height: 14px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.paginador__ponto--colecao[aria-current] { color: var(--laca); filter: none; }
.paginador__utilidades { display: flex; align-items: center; justify-self: end; gap: 8px; min-width: 0; }
/* leitura proporcional da primeira versão: feitas / total, a barra tem a largura exata */
.paginador__progresso { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); text-decoration: none; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.paginador__progresso b { color: var(--ouro); font-weight: 600; }
.paginador__progresso .progresso__barra { flex: none; width: 90px; min-width: 0; }
a.paginador__progresso { transition: color .2s; }
a.paginador__progresso:hover { color: var(--ouro-claro); }

/* ---------- seções (slides) ---------- */
.slide {
    position: relative; isolation: isolate;
    min-height: 100%;
    display: flex; align-items: center;
    scroll-snap-align: start;
    border-bottom: 1px solid var(--ouro-linha);
    background: var(--laca);
    overflow: hidden;
}
.slide--topo { align-items: flex-start; }
.slide__conteudo { width: min(var(--conteudo), 100%); margin: 0 auto; padding: clamp(26px, 5vh, 76px) var(--gutter); position: relative; z-index: 2; }
.slide__conteudo--estreito { width: min(900px, 100%); }
.slide__conteudo--largo { width: min(1480px, 100%); }
.slide__conteudo--total { width: 100%; }
.slide__fundo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.slide__fundo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__fundo img.espelhado { transform: scaleX(-1); }
.slide__fundo::after { content: ''; position: absolute; inset: 0; }
/* relevo em curvas de nível: máscara externa recolorida por token (ouro a .16 por padrão) */
.slide__fundo--relevo::before { content: ''; position: absolute; inset: 0; background: var(--ouro); opacity: .16; -webkit-mask: url("../visuais/relevo.c60e5e35effa.svg") center / cover no-repeat; mask: url("../visuais/relevo.c60e5e35effa.svg") center / cover no-repeat; }
/* véus de Myths' Valley, na tinta da mata */
.slide--veu-esquerda .slide__fundo::after { background: linear-gradient(90deg, rgba(8, 20, 15, .92) 0%, rgba(8, 20, 15, .7) 38%, rgba(8, 20, 15, .12) 75%), linear-gradient(0deg, rgba(8, 20, 15, .75), transparent 35%); }
.slide--veu-direita .slide__fundo::after { background: linear-gradient(270deg, rgba(8, 20, 15, .92) 0%, rgba(8, 20, 15, .7) 38%, rgba(8, 20, 15, .12) 75%), linear-gradient(0deg, rgba(8, 20, 15, .7), transparent 35%); }
.slide--veu-baixo .slide__fundo::after { background: linear-gradient(0deg, rgba(8, 20, 15, .94) 0%, rgba(8, 20, 15, .55) 45%, rgba(8, 20, 15, .1) 80%); }
.slide--veu-cheio .slide__fundo::after { background: rgba(8, 20, 15, .74); }
.slide--veu-leve .slide__fundo::after { background: linear-gradient(0deg, rgba(8, 20, 15, .55), transparent 40%); }
/* variantes */
.slide--laca { background: radial-gradient(ellipse at 20% 0%, #183023 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, #142c1f 0%, transparent 50%), var(--laca); }
.slide--tinta, .slide--paisagem { background: var(--tinta); }
.slide--noite { background: radial-gradient(ellipse at 70% 10%, #14303a 0%, transparent 55%), #0b1618; }
/* papel quadriculado (V2): grade de 16 px e de 64 px sobre o papel de Myths' Valley */
.slide--papel {
    --texto: var(--papel-tinta); --texto-suave: var(--papel-suave); --ouro: var(--papel-ouro); --ouro-claro: #6a4a17;
    --ouro-linha: var(--papel-linha); --ouro-tenue: rgba(122, 83, 22, .08); --fundo-cartao: rgba(255, 255, 255, .38);
    --mar: var(--mar-papel); --broto: var(--broto-papel);
    color-scheme: light;
    color: var(--papel-tinta);
    background:
        linear-gradient(rgba(27, 49, 36, .05) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, rgba(27, 49, 36, .05) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(rgba(27, 49, 36, .05) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, rgba(27, 49, 36, .05) 1px, transparent 1px) 0 0 / 64px 64px,
        radial-gradient(ellipse at 15% 10%, #f6eedb 0%, transparent 60%),
        radial-gradient(ellipse at 90% 95%, #e2d2b1 0%, transparent 55%),
        var(--papel);
}
.slide--papel ::selection { background: var(--papel-ouro); color: var(--papel); }
/* grade de tiles (V3): só no modificador, sob máscara radial */
.slide--grade::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(235, 189, 92, .035) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(235, 189, 92, .035) 1px, transparent 1px) 0 0 / 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%);
}
/* a ilustração do site nunca passa por imagem do jogo */
.nota-arte { position: absolute; left: var(--gutter); bottom: 10px; z-index: 3; margin: 0; font: 500 calc(var(--fs-mini) * .9)/1.2 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(195, 185, 159, .75); pointer-events: none; }

/* ---------- grades ---------- */
.grade { display: grid; gap: clamp(16px, 2.4vw, 34px); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dividido { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4.5vw, 80px); align-items: center; }
.dividido--imagem-esquerda { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.dividido--meio { grid-template-columns: 1fr 1fr; }
.dividido--lateral { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 340px); align-items: start; }
.dividido--rotulo { grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr); align-items: start; }
.pilha { display: grid; gap: clamp(10px, 1.6vh, 18px); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(16px, 3vh, 30px); }

/* ---------- entrada (o retábulo sobre a paisagem) ---------- */
.entrada { align-items: stretch; }
.entrada .slide__conteudo { width: 100%; max-width: none; min-height: 100%; display: grid; grid-template-columns: clamp(330px, 33vw, 540px) 1fr; gap: clamp(20px, 4vw, 80px); align-items: center; align-content: center; padding-top: clamp(16px, 3.4vh, 40px); padding-bottom: clamp(16px, 3.4vh, 40px); }
.entrada .moldura { padding: clamp(40px, 6vh, 62px) clamp(28px, 2.6vw, 46px); }

/* ---------- rodapé ---------- */
.rodape { padding: clamp(32px, 6vh, 64px) var(--gutter) clamp(26px, 4vh, 40px); background: #07120d; border-top: 1px solid var(--ouro-linha); }
.rodape__grade { width: min(var(--conteudo), 100%); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.rodape__marca .marca { font-size: clamp(26px, 1.4vw + 1.2vh + 6px, 34px); }
.rodape__marca p { color: var(--texto-suave); font-size: calc(var(--fs-corpo) * .9); margin-top: 12px; max-width: 46ch; }
.rodape h4 { margin-bottom: 12px; }
.rodape nav ul { list-style: none; display: grid; gap: 7px; }
.rodape nav a { text-decoration: none; color: var(--texto-suave); }
.rodape nav a:hover { color: var(--ouro); }
.rodape__base { width: min(var(--conteudo), 100%); margin: clamp(22px, 4vh, 40px) auto 0; padding-top: 16px; border-top: 1px solid var(--ouro-linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: calc(var(--fs-corpo) * .82); color: var(--texto-suave); }
.rodape__base a { color: var(--texto); text-decoration-color: var(--ouro-linha); }
.rodape__base a:hover { color: var(--ouro); }

/* =============================================================================
   RESPONSIVO: os pontos de Myths' Valley (1280 / 1120 / 800 / 760 e as alturas
   1000 / 880 / 720 acima de 760). As regras que ajustam componentes levam o
   prefixo .quadro para vencer componentes.css, que vem depois.
   ============================================================================= */
@media (max-width: 1280px) {
    .cabecalho__lema { display: none; }
    .grade-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* a coluna da moldura é a mais estreita aqui (33vw): o lugar fica numa linha só, com os dois fios */
@media (min-width: 1121px) and (max-width: 1280px) {
    .quadro .retabulo__lugar { letter-spacing: .18em; }
}
@media (max-width: 1120px) {
    :root { --header-h: 62px; --gutter: 24px; }
    .navegacao { display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 50; background: #0b1a13; padding: 18px var(--gutter) 40px; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; }
    .menu-aberto .navegacao { display: flex; }
    .navegacao__grupo { border-bottom: 1px solid var(--ouro-linha); }
    .navegacao__grupo > summary { padding: 16px 0; font-size: 13px; }
    .navegacao__grupo > summary::after { display: none; }
    .navegacao__menu { position: static; box-shadow: none; border: 0; background: none; padding: 0 0 12px; min-width: 0; }
    .navegacao__menu::before { display: none; }
    .navegacao__menu a { padding: 10px 0; font-size: 18px; white-space: normal; gap: 12px; }
    .navegacao__menu a small { flex: none; }
    /* cabeçalho compacto: as ações vão para o topo do menu aberto, sem controles duplicados */
    .navegacao .cabecalho__acoes { order: -1; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ouro-linha); flex-wrap: wrap; }
    .botao-menu { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; padding: 0 12px; background: transparent; border: 1px solid var(--ouro-linha); color: var(--ouro); cursor: pointer; font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; }
    .botao-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
    .botao-menu[aria-expanded='true'] { border-color: var(--ouro); background: var(--ouro-tenue); }
    .entrada .slide__conteudo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .entrada .moldura { width: min(520px, 100%); }
    .quadro .almanaque-canto { display: none; }
    .dividido, .dividido--imagem-esquerda, .dividido--lateral, .dividido--rotulo { grid-template-columns: minmax(0, 1fr); }
    .grade-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rodape__grade { grid-template-columns: 1fr 1fr; }
    .paginador__rotulo { max-width: 150px; }
    .paginador__pontos { max-width: 30vw; }
}
@media (min-width: 801px) and (max-width: 1120px) {
    .quadro .dividido, .quadro .dividido--imagem-esquerda, .quadro .dividido--lateral, .quadro .dividido--rotulo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 800px) {
    .paginador { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; }
    .paginador__rotulo { display: none; }
    .paginador__controles { justify-content: center; }
    .paginador__pontos { max-width: 36vw; }
    .grade-2, .grade-3, .grade-4, .grade-5, .dividido--meio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    :root { --pager-h: 50px; --gutter: 18px; }
    .slide--veu-esquerda .slide__fundo::after, .slide--veu-direita .slide__fundo::after { background: linear-gradient(0deg, rgba(8, 20, 15, .92), rgba(8, 20, 15, .72)); }
    .quadro .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quadro .carrossel__pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paginador { grid-template-columns: minmax(0, 1fr); }
    .paginador__utilidades { display: none; }
    .paginador__pontos { max-width: 52vw; }
    .rodape__grade { grid-template-columns: minmax(0, 1fr); }
    .retabulo__placas > :nth-child(4), .retabulo__placas > .entrada__extra { display: none; }
    .quadro .retabulo__lugar { gap: 6px; letter-spacing: .1em; white-space: nowrap; }
    .quadro .retabulo__lugar.filete::before, .quadro .retabulo__lugar.filete::after { max-width: 14px; }
    .nota-arte { position: static; margin-top: 14px; text-align: center; }
}
@media (max-height: 1000px) and (min-width: 761px) {
    .retabulo__placas > :nth-child(4), .retabulo__placas > .entrada__extra { display: none; }
}
@media (max-height: 880px) and (min-width: 761px) {
    .quadro .cabeca { margin-bottom: clamp(14px, 2.6vh, 28px); }
}
@media (max-height: 720px) and (min-width: 761px) {
    :root { --header-h: 58px; --pager-h: 48px; }
    .slide__conteudo { padding-top: clamp(16px, 3.6vh, 34px); padding-bottom: clamp(16px, 3.6vh, 34px); }
    .quadro .cabeca { margin-bottom: 16px; }
    .quadro .placa { min-height: 40px; padding: .7em 1.2em; }
    .quadro .retabulo { gap: 6px; }
}