/* The Ranch RP — regulamento
   Skin "Royal" do RoyalJobsMexico: painel de tinta, texto creme/dourado,
   pinceladas nos botoes e ornamento como friso. */

@font-face {
    font-family: "Crock";
    src: url("./assets/crock.ttf") format("truetype");
    font-display: swap;
}

:root {
    --cream: #f7efdf;
    --cream-soft: #cfc6b4;
    --gold: #b99a60;
    --gold-bright: #e1c992;
    --ink: #171109;
    --black: #080706;
    --line: rgba(232, 220, 191, .2);
    --red: #c4796a;
    --green: #8fb08a;

    --panel: url("./assets/panel.webp");
    --slot: url("./assets/slot.webp");
    --btn-dark: url("./assets/btn-dark.webp");
    --btn-light: url("./assets/btn-light.webp");
    --ornament: url("./assets/ornament.webp");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--topo, 84px); }

body {
    margin: 0;
    min-height: 100%;
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.62;
    background: var(--black) url("./assets/backdrop.webp") center / cover fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(6, 5, 4, .88), rgba(3, 3, 2, .97));
}

img { max-width: 100%; }
a { color: var(--gold-bright); }

/* ---------- painel ---------- */

.sheet {
    position: relative;
    z-index: 1;
    width: min(1180px, 94vw);
    margin: clamp(16px, 4vh, 48px) auto;
    padding: 34px 26px 0;
    background-color: transparent;
    background-image: var(--panel);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* o menu usa filter: drop-shadow, mas ai o painel tem altura fixa;
       numa pagina de milhares de px o box-shadow custa muito menos a pintar */
    box-shadow: 0 18px 44px rgba(0, 0, 0, .62);
}

.sheet::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 26px 30px;
    pointer-events: none;
    opacity: .1;
    background: url("./assets/ink.webp") center / 100% 100% no-repeat;
    mix-blend-mode: screen;
}

.sheet > * { position: relative; z-index: 2; }

/* ---------- cabecalho ---------- */

.hero {
    position: relative;
    min-height: 330px;
    margin: 0 4px;
    padding: 22px clamp(20px, 3.4vw, 34px) clamp(28px, 4vw, 42px);
    color: var(--cream);
    background-color: #221f1a;
    background-image: url("./assets/hero.webp");
    background-position: center 52%;
    background-size: cover;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}

.hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 5, 4, .93) 0%, rgba(8, 7, 5, .58) 54%, rgba(12, 10, 7, .28) 100%),
        linear-gradient(0deg, rgba(6, 5, 4, .9), transparent 58%);
}

.brand-line,
.hero-copy { position: relative; z-index: 2; }

.brand-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    color: var(--cream);
    font-family: Crock, Georgia, serif;
    font-size: 12px;
    letter-spacing: .26em;
}

.brand-line .mark { display: flex; align-items: center; gap: 12px; }
.brand-line .mark img { height: 84px; width: auto; }

/* No desktop o logo cresce para dentro do espaco vazio do hero, em posicao
   absoluta, para que o aumento nao empurre o titulo nem estique o cabecalho. */
@media (min-width: 881px) {
    .brand-line { position: relative; }
    .brand-line .mark { height: 28px; }
    .brand-line .mark img { position: absolute; top: 0; left: 0; }
}

.brand-line .stamp {
    padding: 6px 13px 8px;
    color: var(--ink);
    font-size: 10px;
    letter-spacing: .2em;
    background: var(--btn-light) center / 100% 100% no-repeat;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .38));
}

.hero-copy { margin-top: clamp(46px, 8vw, 96px); max-width: 660px; }

.eyebrow {
    margin: 0 0 8px;
    color: var(--gold-bright);
    font-family: Crock, Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
}

.hero h1 {
    margin: 0;
    font-family: Crock, Georgia, serif;
    font-size: clamp(34px, 5.4vw, 62px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: .015em;
    text-shadow: 0 4px 20px #000;
}

.hero-copy p.lede {
    margin: 14px 0 0;
    color: var(--cream-soft);
    font-size: 16px;
    font-style: italic;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

/* ---------- barra de estado ---------- */

.status-strip {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    margin: -2px 13px 0;
    padding: 6px 26px 10px;
    color: var(--cream);
    font-family: Crock, Georgia, serif;
    font-size: 12px;
    letter-spacing: .18em;
    background:
        var(--btn-dark) center / 100% 100% no-repeat,
        linear-gradient(#16140f, #16140f) center / calc(100% - 10px) calc(100% - 8px) no-repeat;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3));
}

.status-strip .live::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    vertical-align: middle;
}

.status-strip a { color: var(--cream); text-decoration: none; border-bottom: 1px dotted rgba(247, 239, 223, .45); }
.status-strip a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* ---------- corpo ---------- */

.layout {
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 38px);
    padding: clamp(24px, 3.4vw, 38px) clamp(14px, 2vw, 22px) clamp(28px, 4vw, 44px);
}

/* indice lateral */

/* O topo do indice tem de seguir a altura real da barra fixa, que muda com o
   numero de abas e com a largura do ecra (com 8 abas ela quebra em duas
   linhas). Com um valor fixo, a faixa de cima do indice ficava escondida por
   baixo da barra opaca e os links dessa faixa deixavam de se poder carregar.
   O --topo e escrito pelo script-tail.js, que mede a barra. */
.toc { position: sticky; top: var(--topo, 84px); align-self: start; }
.toc { max-height: calc(100vh - var(--topo, 84px) - 22px); overflow-y: auto; }

.toc h2 {
    margin: 0 0 12px;
    font-family: Crock, Georgia, serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .22em;
    color: var(--gold);
    text-transform: uppercase;
}

.search {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 480px;
    margin: 0;
    padding: 9px 14px 10px;
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    letter-spacing: 0;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(232, 220, 191, .22);
    border-radius: 2px;
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, .55);
}

.search:focus { outline: none; border-color: var(--gold); background: rgba(0, 0, 0, .58); }
.search::placeholder { color: rgba(247, 239, 223, .5); }

.a-procurar .rule[role="link"] { cursor: pointer; }
.a-procurar .rule[role="link"]:hover,
.a-procurar .rule[role="link"]:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.toc ol { margin: 0; padding: 0; list-style: none; }
#toc-list { counter-reset: toc; }

.toc li[data-cap] { counter-increment: toc; }

/* linha do capitulo: numero romano, titulo e botao de subcategorias */

.toc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
    border-bottom: 1px solid var(--line);
}

.toc-num {
    display: inline-block;
    width: 30px;
    flex: none;
    font-family: Crock, Georgia, serif;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--gold);
    opacity: .75;
}

.toc-row > a {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 7px 0 8px;
    color: var(--cream-soft);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

.toc-row > a:hover { color: var(--cream); }

/* botao com o numero de subcategorias */

.toc-toggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 22px;
    padding: 0;
    color: var(--gold);
    font: inherit;
    font-family: Crock, Georgia, serif;
    font-size: 11px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(232, 220, 191, .18);
    border-radius: 3px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.toc-toggle span { display: block; line-height: 1; padding-top: 1px; }

.toc-toggle::after {
    content: "";
    width: 0;
    height: 0;
    margin-top: 2px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform .18s ease;
}

.toc-toggle:hover { color: var(--gold-bright); border-color: var(--gold); background: rgba(0, 0, 0, .5); }

/* capitulo activo */

.toc li.active > .toc-row { border-bottom-color: rgba(225, 201, 146, .45); }
.toc li.active > .toc-row .toc-num { color: var(--gold-bright); opacity: 1; }
.toc li.active > .toc-row > a { color: var(--gold-bright); }
.toc li.active > .toc-row .toc-toggle { color: var(--gold-bright); border-color: rgba(225, 201, 146, .45); }

/* lista de subcategorias: aberta no capitulo activo, ou a pedido no botao */

.toc-sub {
    display: none;
    margin: 4px 0 10px;
    padding: 2px 0 2px 38px;
    list-style: none;
    position: relative;
}

.toc-sub::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 12px;
    width: 1px;
    background: linear-gradient(rgba(185, 154, 96, .55), rgba(185, 154, 96, .08));
}

.toc li.active > .toc-sub,
.toc li.aberto > .toc-sub { display: block; }
.toc li.fechado > .toc-sub { display: none; }

.toc li.aberto > .toc-row .toc-toggle::after,
.toc li.active > .toc-row .toc-toggle::after { transform: rotate(180deg); }
.toc li.fechado > .toc-row .toc-toggle::after { transform: none; }

.toc-sub li { counter-increment: none; }

.toc-sub a {
    position: relative;
    display: block;
    padding: 5px 0 5px 12px;
    color: rgba(207, 198, 180, .82);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    border-bottom: 0;
}

.toc-sub a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    width: 7px;
    height: 1px;
    background: rgba(185, 154, 96, .5);
}

.toc-sub a:hover { color: var(--cream); }

.toc-sub a.active {
    color: var(--gold-bright);
    background: rgba(185, 154, 96, .12);
    box-shadow: inset 2px 0 0 var(--gold);
}

.toc-sub a.active::before { background: var(--gold-bright); }

/* durante a procura, capitulos sem resultados apagam-se */
.toc li.vazio { opacity: .32; }
.toc li.vazio .toc-sub { display: none; }

/* seccoes */

.rules { min-width: 0; }

.intro {
    position: relative;
    margin: 0 0 36px;
    padding: 20px 24px 22px;
    color: var(--cream);
    background: var(--btn-dark) center / 100% 100% no-repeat;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .35));
}

.intro p { margin: 0 0 10px; }
.intro p:last-child { margin-bottom: 0; }

section.chapter { margin-bottom: 44px; scroll-margin-top: 20px; }

.chapter-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.chapter-art {
    flex: none;
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .55));
}

.chapter-title { min-width: 0; }

.chapter-num {
    display: block;
    margin-bottom: 3px;
    font-family: Crock, Georgia, serif;
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--gold);
}

.chapter h2 {
    margin: 0;
    color: var(--cream);
    font-family: Crock, Georgia, serif;
    font-size: clamp(23px, 2.9vw, 31px);
    font-weight: 400;
    letter-spacing: .01em;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .75);
}

.rule {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.rule:last-child { border-bottom: 0; }

.seal {
    display: grid;
    place-items: center;
    width: 44px;
    height: 38px;
    margin-top: 2px;
    color: var(--cream);
    font-family: Crock, Georgia, serif;
    font-size: 13px;
    background: var(--slot) center / 100% 100% no-repeat;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45));
}

.rule-body h3 {
    margin: 0 0 6px;
    color: var(--cream);
    font-family: Crock, Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .02em;
}

.rule-body p { margin: 0; color: var(--cream-soft); }
.rule-body p + p { margin-top: 7px; }
.rule-body ul { margin: 8px 0 0; padding-left: 20px; color: var(--cream-soft); }
.rule-body li { margin-bottom: 4px; }
.rule-body code {
    padding: 1px 6px;
    color: var(--gold-bright);
    font-family: Consolas, monospace;
    font-size: .88em;
    background: rgba(0, 0, 0, .45);
}

.tag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px 4px;
    font-family: Crock, Georgia, serif;
    font-size: 10px;
    letter-spacing: .16em;
    vertical-align: 3px;
    border: 1px solid currentColor;
    text-transform: uppercase;
}

/* etiquetas de multa do servidor */
.tag.f300  { color: var(--green); }
.tag.f500  { color: var(--gold-bright); }
.tag.f1000 { color: var(--red); }
.tag.aviso { color: var(--cream-soft); }

/* rotulo que NAO e penalizacao (ex.: "max 4 com tag"): traco a tracejado
   e cor apagada, para nao se confundir com uma multa */
.tag.info {
    color: rgba(207, 198, 180, .62);
    border-style: dashed;
    letter-spacing: .12em;
}

/* sub-secção (cada evento dentro do capítulo de Eventos) */

.subhead {
    margin: 30px 0 14px;
    padding: 12px 18px 14px;
    background: var(--btn-dark) center / 100% 100% no-repeat;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35));
}

.subhead h3 {
    margin: 0;
    color: var(--gold-bright);
    font-family: Crock, Georgia, serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .06em;
}

.subhead p {
    margin: 7px 0 0;
    color: var(--cream-soft);
    font-size: 13.5px;
    font-style: italic;
}

/* nota destacada dentro de um capítulo */

.note {
    margin: 0 0 20px;
    padding: 12px 16px;
    color: var(--cream-soft);
    font-size: 14px;
    font-style: italic;
    border-left: 2px solid var(--gold);
    background: rgba(0, 0, 0, .28);
}

/* lista de subalíneas (a, b, c / 🔸) */
.rule-body ul.sub { list-style: none; padding-left: 4px; }
.rule-body ul.sub li { position: relative; padding-left: 18px; }
.rule-body ul.sub li::before {
    content: "◦";
    position: absolute;
    left: 2px;
    color: var(--gold);
}

.hint { display: none; margin: 28px 0; font-style: italic; color: var(--cream-soft); }
.hint.on { display: block; }

/* rodape */

.sheet-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin: 0 13px 30px;
    padding: 16px 26px 20px;
    color: var(--cream-soft);
    font-size: 13px;
    background: var(--btn-dark) center / 100% 100% no-repeat;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3));
}

.sheet-footer a { color: var(--gold-bright); }
.sheet-footer .sig { color: var(--cream); font-family: Crock, Georgia, serif; letter-spacing: .2em; font-size: 12px; }

/* ---------- responsivo ---------- */

@media (max-width: 880px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .toc { position: static; }
    #toc-list { columns: 2; column-gap: 22px; }
    #toc-list > li.grupo { break-inside: avoid; }
    .grupo-caps, .toc-sub { columns: 1; }
    .rule { grid-template-columns: 38px minmax(0, 1fr); gap: 13px; }
    .seal { width: 36px; height: 32px; font-size: 11px; }
    .chapter-art { width: 66px; height: 66px; }
    .hero { min-height: 250px; }
}

@media (max-width: 520px) {
    body { font-size: 15.5px; }
    #toc-list { columns: 1; }
    .sheet { width: 100%; margin: 0; padding: 14px 8px 0; }
    .status-strip { margin: -2px 6px 0; padding: 8px 16px 12px; }
    .sheet-footer { margin: 0 6px 16px; padding: 14px 16px 18px; }
}

/* ---------- impressao ---------- */

@media print {
    body { background: #fff; color: #000; }
    body::before, .toc, .status-strip, .sheet::after, .hero::after, .chapter-head::after { display: none; }
    .sheet { width: auto; margin: 0; padding: 0; background: none; filter: none; }
    .layout { display: block; padding: 0; }
    .hero { background: none; color: #000; min-height: 0; filter: none; }
    .hero-shade { display: none; }
    .hero h1, .eyebrow, .brand-line, .chapter h2, .rule-body h3, .intro { color: #000; text-shadow: none; }
    .intro { background: none; border-left: 3px solid #000; filter: none; }
    .rule-body p, .rule-body ul { color: #222; }
    .seal { background: none; border: 1px solid #000; color: #000; filter: none; }
    .chapter-head { border-bottom: 2px solid #000; }
    .rule { border-bottom: 1px solid #bbb; }
}

/* subcategorias no indice — so aparecem no capitulo activo */

/* ---------- scrollbars ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: #6b5a38 rgba(0, 0, 0, .42);
}

::-webkit-scrollbar { width: 13px; height: 13px; }

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .42);
    box-shadow: inset 1px 0 0 rgba(232, 220, 191, .1);
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, #9d8352, #6b5a38 55%, #4c3f27);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 7px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #6b5a38);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active { background: var(--gold-bright); background-clip: padding-box; }

::-webkit-scrollbar-corner { background: rgba(0, 0, 0, .42); }

/* a barra do indice e mais discreta que a da pagina */
.toc::-webkit-scrollbar { width: 9px; }
.toc::-webkit-scrollbar-thumb { border-width: 2px; }

/* ---------- barra do topo: RR, links e Discord ---------- */

.strip-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.strip-meta .rr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 5px;
    color: var(--gold-bright);
    font-size: 11px;
    letter-spacing: .16em;
    white-space: nowrap;
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(232, 220, 191, .18);
    border-radius: 3px;
}

.strip-meta .rr-lbl {
    padding: 1px 5px 2px;
    color: var(--ink);
    font-size: 9px;
    letter-spacing: .12em;
    background: var(--gold);
    border-radius: 2px;
}

.strip-meta .dc { display: inline-flex; align-items: center; gap: 7px; }
.strip-meta .dc .ic { flex: none; }

.live { display: inline-flex; align-items: center; white-space: nowrap; }
.live.com-numero .live-txt { color: var(--gold-bright); }

@media (max-width: 880px) {
    .strip-meta { gap: 6px 12px; }
    .status-strip { font-size: 11px; }
}

.strip-meta .tb { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-bright); }
.strip-meta .tb .ic { flex: none; }
.strip-meta .tb:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- realce da procura ---------- */

mark {
    padding: 0 2px;
    color: var(--black);
    background: var(--gold-bright);
    border-radius: 2px;
}

/* ---------- selo sem numero (capitulos de definicoes) ---------- */

.seal.vazio::before {
    content: "";
    width: 9px;
    height: 9px;
    background: var(--gold);
    transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(185, 154, 96, .5);
}

/* ---------- grupos do indice ---------- */

#toc-list > li.grupo { counter-increment: none; margin-bottom: 2px; }

.grupo-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 10px 10px;
    color: var(--gold);
    font: inherit;
    font-family: Crock, Georgia, serif;
    font-size: 12px;
    letter-spacing: .18em;
    text-align: left;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(232, 220, 191, .14);
    border-radius: 2px;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.grupo-cab:hover { color: var(--gold-bright); background: rgba(0, 0, 0, .5); border-color: rgba(232, 220, 191, .3); }

.grupo-nome { flex: 1 1 auto; }

.grupo-n {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 18px;
    padding: 1px 5px 0;
    color: var(--ink);
    font-size: 10px;
    letter-spacing: .06em;
    background: var(--gold);
    border-radius: 2px;
}

.grupo-cab::after {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .18s ease;
}

/* a lista de capitulos so aparece no grupo activo, ou no que for aberto a mao */
.grupo-caps { display: none; padding: 4px 0 10px 4px; }

#toc-list > li.grupo.activo > .grupo-caps,
#toc-list > li.grupo.aberto > .grupo-caps,
#toc-list > li.grupo.procura > .grupo-caps { display: block; }
#toc-list > li.grupo.fechado > .grupo-caps { display: none; }

#toc-list > li.grupo.activo > .grupo-cab::after,
#toc-list > li.grupo.aberto > .grupo-cab::after,
#toc-list > li.grupo.procura > .grupo-cab::after { transform: rotate(180deg); }
#toc-list > li.grupo.fechado > .grupo-cab::after { transform: none; }

#toc-list > li.grupo.activo > .grupo-cab,
#toc-list > li.grupo.aberto > .grupo-cab { color: var(--gold-bright); border-color: rgba(225, 201, 146, .4); }

#toc-list > li.grupo.vazio { opacity: .35; }

/* ---------- superficies do indice e das regras ----------
   Sem isto, o texto assenta directamente na fotografia do painel e
   os menus ficam ilegiveis nas zonas claras da imagem. */

.toc {
    padding: 16px 15px 18px;
    background: rgba(9, 8, 6, .82);
    border: 1px solid rgba(232, 220, 191, .12);
    border-radius: 2px;
    box-shadow: inset 0 0 34px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .35);
}

.rules {
    padding: clamp(18px, 2.4vw, 30px) clamp(16px, 2.4vw, 32px) clamp(22px, 3vw, 34px);
    background: rgba(9, 8, 6, .68);
    border: 1px solid rgba(232, 220, 191, .09);
    border-radius: 2px;
    box-shadow: inset 0 0 44px rgba(0, 0, 0, .5);
}

@media (max-width: 880px) {
    .toc { padding: 14px 12px 16px; }
    /* deixa de ser coluna fixa: sem isto ficava uma caixa com scroll
       proprio dentro de uma pagina que ja faz scroll */
    .toc { position: static; max-height: none; overflow: visible; }
}

/* ============================================================
   MENU LATERAL — versao com marca, icones e linha activa
   ============================================================ */

/* linha de capitulo ------------------------------------------------ */

.toc-row {
    border-bottom: 0;
    border-radius: 3px;
    padding-left: 0;
    transition: background .15s;
}

.toc-row > a {
    align-items: center;
    gap: 11px;
    padding: 9px 8px 9px 10px;
    font-family: Crock, Georgia, serif;
    font-size: 13.5px;
    letter-spacing: .05em;
    color: var(--cream-soft);
}

.ic-menu {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 4px;
    color: var(--gold);
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(232, 220, 191, .16);
    border-radius: 3px;
    box-sizing: border-box;
    transition: color .15s, border-color .15s, background .15s;
}

.toc-num {
    order: 3;
    width: auto;
    margin-left: auto;
    font-size: 10px;
    opacity: .45;
}

.toc-row:hover { background: rgba(255, 255, 255, .04); }
.toc-row:hover > a { color: var(--cream); }
.toc-row:hover .ic-menu { color: var(--gold-bright); border-color: rgba(225, 201, 146, .4); }

/* capitulo activo: painel preenchido com barra dourada a esquerda */

.toc li.active > .toc-row {
    background: linear-gradient(90deg, rgba(185, 154, 96, .22), rgba(185, 154, 96, .04));
    box-shadow: inset 3px 0 0 var(--gold);
    border-bottom: 0;
}

.toc li.active > .toc-row > a { color: var(--gold-bright); }
.toc li.active > .toc-row .ic-menu {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold);
}
.toc li.active > .toc-row .toc-num { color: var(--gold-bright); opacity: .8; }

/* botao das subcategorias acompanha o novo tamanho */
.toc-toggle { margin-right: 6px; }

/* subcategorias alinhadas com o texto, nao com o icone */
.toc-sub { padding-left: 47px; }
.toc-sub::before { left: 22px; }

@media (max-width: 880px) {
}

/* o numeral do capitulo sai do menu: ja aparece no titulo da seccao
   e aqui so roubava espaco aos nomes longos */
.toc-num { display: none; }

.toc-row > a { line-height: 1.25; }

/* ============================================================
   MENU — aproximacao a referencia: glifos cheios sem moldura,
   linhas mais altas, grupos discretos, activo subtil
   ============================================================ */

/* icone: silhueta dourada, sem caixa nem borda */
.ic-menu {
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--gold);
    opacity: .82;
    transition: color .15s, opacity .15s;
}

.toc-row { border-radius: 2px; }

.toc-row > a {
    gap: 13px;
    padding: 11px 10px 11px 12px;
    font-size: 14.5px;
    letter-spacing: .055em;
    line-height: 1.3;
}

.toc-row:hover { background: rgba(255, 255, 255, .05); }
.toc-row:hover .ic-menu { opacity: 1; color: var(--gold-bright); }

/* activo: painel claro com filete dourado, nao um degrade forte */
.toc-row { border: 1px solid transparent; }

.toc li.active > .toc-row {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(185, 154, 96, .5);
    box-shadow: inset 3px 0 0 var(--gold);
}

.toc li.active > .toc-row > a { color: var(--gold-bright); padding-left: 11px; }

.toc li.active > .toc-row .ic-menu {
    color: var(--gold-bright);
    opacity: 1;
    background: none;
    border: 0;
}

/* grupos: passam a rotulo discreto, sem caixa */
.grupo-cab {
    padding: 14px 6px 7px;
    background: none;
    border: 0;
    border-top: 1px solid rgba(232, 220, 191, .1);
    border-radius: 0;
    font-size: 10.5px;
    letter-spacing: .26em;
    color: rgba(185, 154, 96, .78);
}

#toc-list > li.grupo:first-child > .grupo-cab { border-top: 0; padding-top: 4px; }

.grupo-cab:hover { background: none; color: var(--gold-bright); }

.grupo-n {
    min-width: 0;
    height: auto;
    padding: 0;
    color: rgba(185, 154, 96, .55);
    font-size: 10px;
    letter-spacing: .1em;
    background: none;
    border-radius: 0;
}

#toc-list > li.grupo.activo > .grupo-cab,
#toc-list > li.grupo.aberto > .grupo-cab { color: var(--gold-bright); border-color: rgba(232, 220, 191, .1); }

.grupo-caps { padding: 2px 0 8px; }

/* botao das subcategorias mais leve */
.toc-toggle {
    width: 26px;
    height: 20px;
    background: none;
    border: 1px solid rgba(232, 220, 191, .16);
    color: rgba(185, 154, 96, .8);
}

.toc-sub { padding-left: 46px; }
.toc-sub::before { left: 24px; }

/* ---------- setas sem numeros ---------- */

.grupo-n { display: none; }

.grupo-cab::after {
    border-left-width: 5.5px;
    border-right-width: 5.5px;
    border-top-width: 7px;
    margin-top: 1px;
}

.toc-toggle {
    width: 24px;
    height: 21px;
}

.toc-toggle::after {
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 6.5px;
    margin-top: 0;
}

/* ---------- guia das subcategorias ----------
   A linha vertical e o traco de cada item tem de se tocar: antes ficavam
   a 20px um do outro e o traco parecia solto. */

.toc-sub {
    padding-left: 30px;
}

.toc-sub::before {
    left: 14px;
    top: 2px;
    bottom: 2px;
    background: linear-gradient(
        rgba(185, 154, 96, .5) 0%,
        rgba(185, 154, 96, .5) 72%,
        rgba(185, 154, 96, .12) 100%);
}

.toc-sub a {
    padding-left: 14px;
}

.toc-sub a::before {
    left: -16px;
    width: 13px;
    background: rgba(185, 154, 96, .45);
}

.toc-sub a.active::before {
    left: -16px;
    width: 13px;
    background: var(--gold-bright);
}

/* subcategoria activa: brilho suave em vez de caixa rectangular */
.toc-sub a.active {
    background: radial-gradient(130% 150% at 0% 50%,
        rgba(185, 154, 96, .3) 0%,
        rgba(185, 154, 96, .12) 38%,
        rgba(185, 154, 96, 0) 72%);
    box-shadow: none;
}

/* ---------- subir ao topo ----------
   Pincelada escura do tema, sem bordas. A sombra e drop-shadow e nao
   box-shadow para acompanhar as pontas gastas do pincel em vez de
   desenhar um rectangulo a volta. */

.subir {
    position: fixed;
    top: 62px;
    left: 50%;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 26px 12px;
    color: var(--cream);
    font: inherit;
    font-family: Crock, Georgia, serif;
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: var(--btn-dark) center / 100% 100% no-repeat;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .62));
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, color .15s;
    pointer-events: none;
}

.subir.visivel {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.subir:hover { color: var(--gold-bright); }

.subir .seta {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6.5px solid var(--gold);
}

.subir:hover .seta { border-bottom-color: var(--gold-bright); }

/* ============================================================
   SECCOES DE TOPO
   ============================================================ */

/* a barra de estado e a das seccoes colam ao topo em conjunto */
.topo-fixo {
    position: sticky;
    top: 0;
    z-index: 5;
}

.status-strip { position: static; z-index: auto; }

.barra-seccoes {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 13px;
    padding: 0 14px;
    background:
        var(--btn-dark) center / 100% 100% no-repeat,
        linear-gradient(#14120e, #14120e) center / calc(100% - 10px) calc(100% - 6px) no-repeat;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .38));
}

.sec-bt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px 12px;
    color: var(--cream-soft);
    font: inherit;
    font-family: Crock, Georgia, serif;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .15s;
}

.sec-bt .ic-menu {
    width: 17px;
    height: 17px;
    color: var(--gold);
    opacity: .72;
    transition: color .15s, opacity .15s;
}

.sec-bt::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform .18s ease;
}

.sec-bt:hover { color: var(--cream); }
.sec-bt:hover .ic-menu { opacity: 1; color: var(--gold-bright); }

/* seccao activa */
    color: var(--gold-bright);
}

/* contador de resultados por seccao, so durante a procura */
.sec-n {
    min-width: 17px;
    padding: 1px 5px 2px;
    color: var(--ink);
    font-size: 10px;
    letter-spacing: .06em;
    background: var(--gold);
    border-radius: 2px;
}

.sec-bt .sec-n[hidden] { display: none; }
.sec-bt.vazio { opacity: .38; }
.sec-bt.vazio .sec-n { background: rgba(185, 154, 96, .35); color: var(--cream-soft); }

/* ---------- so a seccao activa e mostrada ---------- */

/* a procurar, o filtro de seccao e suspenso: ve-se tudo o que da match */

@media (max-width: 880px) {
    .barra-seccoes { margin: 0 6px; padding: 0 6px; gap: 0; }
    .sec-bt { padding: 9px 10px 10px; font-size: 11px; gap: 6px; }
    .sec-bt::after { left: 8px; right: 8px; }
}

@media (max-width: 560px) {
    .sec-bt span:not(.sec-n) { display: none; }
    .sec-bt { padding: 10px 14px; }
    .sec-bt .ic-menu { width: 19px; height: 19px; }
}

/* ============================================================
   IMAGENS, COMPARACOES E VIDEOS
   Molduras de tinta, iguais as do resto do painel: filete dourado
   fino, fundo preto e legenda em italico por baixo.
   ============================================================ */

.figura,
.video {
    margin: 0 0 22px;
    padding: 0;
}

.figura img,
.video video {
    display: block;
    width: 100%;
    height: auto;
    background: var(--black);
    border: 1px solid rgba(232, 220, 191, .16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}

.figura figcaption,
.video figcaption {
    margin-top: 7px;
    color: var(--cream-soft);
    font-size: 12.5px;
    font-style: italic;
    line-height: 1.45;
}

/* imagem em pe: o build marca-a, porque encher a coluna com uma foto
   vertical faz o texto seguinte cair muito abaixo */
.figura.retrato { max-width: 340px; }

/* ---------- antes / depois ---------- */

.comparacao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 22px;
}

.comparacao .figura { margin: 0; }

/* a legenda da segunda fica dourada: e ela que mostra a vantagem */
.comparacao .figura:last-child figcaption { color: var(--gold-bright); }

@media (max-width: 700px) {
    .comparacao { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- video ---------- */

.video video {
    aspect-ratio: 16 / 9;
    /* contain e nao cover: um video que nao seja 16:9 fica com barras
       pretas em vez de ser cortado */
    object-fit: contain;
}

.video figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
    font-style: normal;
    font-family: Crock, Georgia, serif;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
}

.video-autor {
    color: rgba(207, 198, 180, .7);
    font-family: inherit;
    font-size: 11.5px;
    letter-spacing: .1em;
}

/* na aba dos trailers a gravura do capitulo e a propria miniatura:
   sai do formato quadrado e fica um retangulo com o mesmo filete */
[data-sec="trailers"] .chapter-art {
    width: 132px;
    height: 74px;
    object-fit: cover;
    border: 1px solid rgba(232, 220, 191, .16);
    filter: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}

@media (max-width: 560px) {
    [data-sec="trailers"] .chapter-art { width: 96px; height: 54px; }
}

/* video cujo ficheiro ainda nao esta publicado: melhor dizer do que
   deixar o play a nao fazer nada */
.video-falta {
    margin: 8px 0 0;
    padding: 9px 13px;
    color: var(--cream-soft);
    font-size: 12.5px;
    font-style: italic;
    background: rgba(0, 0, 0, .3);
    border-left: 2px solid var(--red);
}