/* Base dos segmentos: contrato --seg-* por segmento, barra de abas com mini-tambor, componente .cena e estados comuns. */

:root {
    --barra-h: 48px;
    --seg-topo: calc(var(--topo-h) + var(--barra-h));
}
html:has(.barra-seg) { scroll-padding-top: calc(var(--seg-topo) + 16px); }

/* contrato por segmento: os temas podem trocar só estes (e a home usa nas portas) */

[data-segmento="scripts"] {
    --seg-font-titulo: "RDR Catalogue", "RDR Lino", Georgia, serif;
    --seg-font-nome: "RDR Catalogue", "RDR Lino", Georgia, serif;
    --seg-card-tex: var(--tex-card);
    --seg-card-slice: 18;
    --seg-card-fill: rgba(6, 5, 4, 0.9);
    --seg-card-cor: var(--text);
    --seg-foco: var(--red);
}
[data-segmento="sobrenatural"] {
    --seg-font-titulo: "Redemption", "RDR Lino", Georgia, serif;
    --seg-font-nome: "RDR Gothica", "RDR Lino", Georgia, serif;
    --seg-card-tex: var(--tex-plate);
    --seg-card-slice: 48;
    --seg-card-fill: rgba(6, 5, 4, 0.9);
    --seg-card-cor: var(--text);
    --seg-foco: var(--red);
}
[data-segmento="armas"] {
    --seg-font-titulo: "RDR Catalogue", "RDR Lino", Georgia, serif;
    --seg-font-nome: "RDR Lino", Georgia, serif;
    --seg-card-tex: var(--tex-box-wide);
    --seg-card-slice: 18;
    --seg-card-fill: rgba(6, 5, 4, 0.88);
    --seg-card-cor: var(--text);
    --seg-foco: var(--red);
}
[data-segmento="peds"] {
    --seg-font-titulo: "Redemption", "RDR Lino", Georgia, serif;
    --seg-font-nome: "Redemption", "RDR Lino", Georgia, serif;
    --seg-card-tex: var(--tex-help);
    --seg-card-slice: 40;
    --seg-card-fill: rgba(233, 226, 210, 0.93);
    --seg-card-cor: var(--ink);
    --seg-foco: var(--ink);
}

/* página */

.seg-main { display: block; padding: 0; }
#painel-seg { outline: none; min-height: 100dvh; }

/* barra de segmentos */

.barra-seg {
    position: fixed;
    top: var(--topo-h);
    left: 0;
    right: 0;
    z-index: 30;
    height: var(--barra-h);
    background: rgba(1, 1, 1, 0.94);
    transition: background 200ms ease;
}
/* sobre a foto da home a barra acompanha o véu do topo; ao descer, as duas viram um bloco só */
html:not([data-corte]) .topo[data-solido="false"] ~ .barra-seg {
    background: rgba(1, 1, 1, 0.58);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.barra-seg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 243, 238, 0.16) 12%, rgba(245, 243, 238, 0.16) 88%, transparent);
}
.barra-seg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--text);
    opacity: 0.14;
    -webkit-mask: var(--tex-line-wide) center / 100% 100% no-repeat;
    mask: var(--tex-line-wide) center / 100% 100% no-repeat;
}
.barra-seg-miolo {
    width: min(var(--largura), calc(100% - 32px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.abas { position: relative; display: flex; align-items: stretch; gap: 34px; height: 100%; }
.aba {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 2px;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, 0.66);
    transition: color 150ms ease;
}
.aba::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    height: 4px;
    background: var(--text);
    opacity: 0.5;
    -webkit-mask: var(--tex-line-narrow) center / 100% 100% no-repeat;
    mask: var(--tex-line-narrow) center / 100% 100% no-repeat;
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
}
.aba[aria-selected="true"], .aba[aria-current="page"] { color: var(--text); }
.aba[aria-selected="true"]::after, .aba[aria-current="page"]::after { display: none; }
@media (hover: hover) and (pointer: fine) {
    .aba:hover { color: var(--text); }
    .aba:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .aba::after { transition: none; } }
.aba:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.abas-marcador {
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100px;
    --rule-tex: var(--tex-line-narrow);
    --rule-opacity: 1;
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

.mini-tambor { flex: none; display: block; width: 24px; height: 24px; overflow: visible; }
.mini-tambor [data-giro] { transform-box: fill-box; transform-origin: center; }
.mt-corpo { fill: rgba(245, 243, 238, 0.07); stroke: rgba(245, 243, 238, 0.5); stroke-width: 1.1; }
.mt-camara { fill: var(--bg); stroke: rgba(245, 243, 238, 0.45); stroke-width: 0.9; }
.mt-camara[data-carregada] { fill: rgba(245, 243, 238, 0.9); stroke: none; }
.mt-camara[data-ativa] { fill: var(--red); }
.mt-eixo { fill: rgba(245, 243, 238, 0.5); }
.mt-mira { fill: var(--red); }

/* .cena: prende pontos na foto em qualquer proporção. O posicionamento (absolute, inset 0, z-index -1) vem do loja.css. */

.cena { container-type: size; overflow: hidden; }
.cena-caixa {
    --ar: 16 / 9;
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, 100cqh * (var(--ar)));
    height: max(100cqh, 100cqw / (var(--ar)));
    /* translate próprio, não transform: o tema pode espelhar a caixa com transform: scaleX(-1). */
    translate: -50% -50%;
}
.cena-caixa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cena-grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: var(--grade-tinta, rgba(1, 1, 1, 0.45)); }

/* HTML pré-renderizado (sem JS) e lista provisória (sem tema) */

.seg-pre, .seg-lista {
    width: var(--largura);
    margin: 0 auto;
    padding: calc(var(--seg-topo) + 8vh) 0 12vh;
    display: grid;
    gap: 22px;
    align-content: start;
}
.seg-pre-titulo, .seg-lista-titulo {
    margin: 0;
    font-family: var(--seg-font-titulo);
    font-size: clamp(56px, 7vw, 110px);
    line-height: 0.95;
    letter-spacing: 0.04em;
}
.seg-pre > .rule, .seg-lista-topo > .rule { width: min(380px, 70vw); }
.seg-pre-frase, .seg-lista-frase { max-width: 52ch; color: var(--text-dim); font-size: clamp(16px, 1.2vw, 19px); }
.seg-lista-topo { display: grid; gap: 20px; justify-items: start; margin-bottom: 4vh; }
.seg-pre-lista { list-style: none; margin: 3vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.seg-pre-lista li { position: relative; }
.seg-pre-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--text);
    opacity: 0.12;
    -webkit-mask: var(--tex-line-narrow) center / 100% 100% no-repeat;
    mask: var(--tex-line-narrow) center / 100% 100% no-repeat;
}
.seg-pre-lista a { display: grid; gap: 4px; padding: 18px 2px; }
.seg-pre-lista b { font-family: var(--seg-font-nome); font-size: 22px; line-height: 1.15; letter-spacing: 0.04em; }
.seg-pre-lista span { color: var(--text-dim); font-size: 15px; max-width: 60ch; }
@media (hover: hover) and (pointer: fine) { .seg-pre-lista a:hover b { color: var(--red); } }
.seg-pre-vazio { color: var(--text-dim); }

/* faixa Tambor de Tinta (js/transicao.js): abaixo do topo e da barra, acima do painel */

html[data-corte] .topo { background: rgba(1, 1, 1, 0.94); }
html[data-corte="entrada"] body::after { content: ""; position: fixed; inset: var(--seg-topo) 0 0; z-index: 29; background: var(--bg); }
.corte { position: fixed; inset: var(--seg-topo) 0 0; z-index: 29; overflow: hidden; pointer-events: none; }
.corte-caixa { position: absolute; inset: 0; will-change: transform; }
.corte-caixa > i { position: absolute; top: -4%; bottom: -4%; width: 38vw; background: var(--bg); }
.corte-frente, .corte-borda, .corte-tras {
    -webkit-mask: var(--tex-inkroller) center / 100% 100% no-repeat;
    mask: var(--tex-inkroller) center / 100% 100% no-repeat;
}
.corte-caixa > .corte-borda { left: -43vw; background: var(--red); opacity: var(--corte-borda, 0.6); }
.corte-frente { left: -38vw; }
/* A tinta do inkroller é translúcida: o miolo sólido entra por baixo da frente e da traseira e só as bordas rasgadas vazam. */
.corte-caixa > .corte-miolo { left: -30vw; width: 160vw; top: 0; bottom: 0; }
.corte-tras { left: 100vw; transform: scaleX(-1); }
.corte-eixo { position: absolute; left: 50vw; top: 50%; width: min(38vmin, 260px); aspect-ratio: 1; translate: -50% -50%; }
.corte-tambor { display: block; width: 100%; height: 100%; overflow: visible; }
.ct-corpo { fill: rgba(245, 243, 238, 0.08); stroke: rgba(245, 243, 238, 0.6); stroke-width: 1.1; }
.ct-camara { fill: var(--bg); stroke: rgba(245, 243, 238, 0.38); stroke-width: 1; }
.ct-bala { fill: rgba(245, 243, 238, 0.9); }
.ct-bala[data-ativa] { fill: var(--red); }
.ct-espoleta { fill: rgba(1, 1, 1, 0.38); }
.ct-eixo { fill: rgba(245, 243, 238, 0.5); }
.ct-furo { fill: var(--bg); }
.corte-mira { position: absolute; left: 50%; top: -18px; width: 18px; height: 12px; translate: -50% 0; background: var(--red); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* estados comuns: carregando, vazio, erro */

.seg-esqueleto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.seg-esqueleto > .plate {
    --plate-tex: var(--seg-card-tex);
    --plate-slice: var(--seg-card-slice);
    --plate-fill: var(--seg-card-fill);
    opacity: 0.5;
    min-height: 240px;
    padding: 28px 24px;
    display: grid;
    align-content: end;
    gap: 12px;
}
.seg-esqueleto .linha { display: block; height: 14px; background: rgba(245, 243, 238, 0.08); animation: pulso 1.6s ease-in-out infinite; }
.seg-esqueleto .linha.curta { width: 55%; }
.seg-estado, .seg-vazio { padding: 48px 0; display: grid; justify-items: center; gap: 14px; text-align: center; color: var(--text-dim); }
.seg-erro { margin: var(--seg-topo) auto 0; width: var(--largura); padding-top: 32px; }
.seg-erro + .seg-pre { padding-top: 4vh; }

@media (max-width: 760px) {
    .abas { gap: 14px; }
    .aba { font-size: 11px; letter-spacing: 0.08em; }
    .seg-pre-lista { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .aba, .abas-marcador { transition: none; }
    .seg-esqueleto .linha { animation: none; }
}