/* ── Intro band ───────────────────────────────── */

.rules-page {
    padding-top: 20px;
    /* Contain .rule-sections' bottom margin so it doesn't collapse through
       into body and expose the flat html background past the real content. */
    display: flow-root;
}

.rules-intro {
    text-align: center;
    padding: 30px 8% 10px;
}

.rules-intro h1 {
    font-size: 3.4rem;
    letter-spacing: 8px;
    margin: 10px 0 14px;
    color: #f2e0b7;
    text-shadow:
        0 0 10px rgba(242, 224, 183, .25),
        0 0 30px rgba(200, 164, 106, .15);
}

.rules-intro p {
    color: #d5d5d5;
    letter-spacing: 1px;
}

/* ── Category hub ─────────────────────────────── */

/* Grid base (width/columns/gap) is shared with .cards — defined in style.css */
.rule-hub {
    margin: 30px auto 55px;
}

/* .rule-card reuses .card for its frame; reset the button defaults.
   Flex column keeps the icon + title top-aligned across cards instead of
   a <button>'s default vertical-centering (which made shorter cards drop). */
.rule-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ── Accordion sections ───────────────────────── */

.rule-sections {
    width: min(1100px, 90%);
    margin: 0 auto 100px;
}

/* Panel chrome (background/border/backdrop-filter) is shared with
   .lore-entry, .sidebar, and .main-panel — defined in style.css */
.rule-section {
    display: none;
    position: relative;
    margin-bottom: 16px;
    overflow: hidden;
    scroll-margin-top: 20px;
}

/* A section only exists on the page once its card / header opens it */
.rule-section.open {
    display: block;
    animation: ruleReveal .35s ease both;
}

@keyframes ruleReveal {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

/* Title of a revealed topic panel (static — the card opens/closes it) */
.rule-section-title {
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 1.5rem;
    padding: 22px 28px 0;
    text-shadow: 0 0 10px rgba(224, 200, 145, .3);
}

.rule-section-inner {
    padding: 12px 28px 26px;
}

.rule-section-inner > p {
    color: #d9c19a;
    line-height: 1.8;
    margin-top: 12px;
}

.rule-section-inner em {
    color: #a89070;
}

.rule-section-inner a {
    color: var(--gold-light);
    transition: .2s;
}

.rule-section-inner a:hover {
    color: var(--gold);
}

/* ── Sub-systems (collapsible blocks within a topic) ── */

.subsystem {
    border: 1px solid rgba(200, 164, 106, .3);
    background: rgba(0, 0, 0, .18);
    margin-top: 18px;
}

.subsystem-header {
    width: 100%;
    background: none;
    border: none;
    color: var(--gold);
    font-family: var(--font-serif);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.05rem;
    padding: 16px 22px;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .25s;
}

.subsystem-header::after {
    content: "›";
    font-size: 1.3rem;
    transition: transform .3s;
}

.subsystem.open > .subsystem-header {
    color: var(--gold-light);
    background: rgba(200, 164, 106, .08);
}

.subsystem.open > .subsystem-header::after {
    transform: rotate(90deg);
}

.subsystem-header:hover {
    color: var(--gold-light);
    background: rgba(200, 164, 106, .05);
}

/* Smoothly animate to the content's natural height */
.subsystem-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}

.subsystem.open > .subsystem-body {
    grid-template-rows: 1fr;
}

.subsystem-inner {
    overflow: hidden;
    padding: 0 22px;
}

.subsystem.open > .subsystem-body > .subsystem-inner {
    padding: 4px 22px 20px;
}

/* A named rules entry: bold term + description (reusable) */
.rule-entry {
    margin-top: 20px;
}

.rule-entry h4 {
    color: var(--gold);
    letter-spacing: 1.5px;
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.rule-entry p {
    color: #d9c19a;
    line-height: 1.7;
}

.rule-entry p + p {
    margin-top: 12px;
}

/* Intro paragraph at the top of a sub-system block */
.subsystem-inner > p {
    color: #d9c19a;
    line-height: 1.7;
    margin-top: 4px;
}

/* Bulleted breakdown within an entry (e.g. turn phases) */
.rule-list {
    list-style: none;
    margin: 10px 0 0;
}

.rule-list li {
    position: relative;
    color: #d9c19a;
    line-height: 1.7;
    padding-left: 20px;
    margin-top: 8px;
}

.rule-list li::before {
    content: "◆";
    position: absolute;
    left: 2px;
    top: .45em;
    font-size: .5rem;
    color: var(--gold);
}

.rule-list strong {
    color: var(--gold-light);
}

/* Second-level grouping heading inside a sub-system (e.g. Attack / Damage / Defense) */
.rule-subhead {
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 1rem;
    margin: 26px 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(200, 164, 106, .22);
}

/* Background flavor tagline */
.subsystem-inner > p.rule-quote {
    margin: 4px 0 14px;
    padding-left: 14px;
    border-left: 2px solid rgba(200, 164, 106, .4);
    color: var(--gold-light);
    font-style: italic;
    line-height: 1.6;
}

/* Formula callout */
p.rule-formula {
    margin-top: 10px;
    padding: 8px 14px;
    border-left: 2px solid var(--gold);
    background: rgba(200, 164, 106, .07);
    color: var(--gold-light);
    font-style: italic;
    letter-spacing: .5px;
    line-height: 1.5;
}

/* Roll / reference table */
.rule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-size: .95rem;
}

.rule-table th,
.rule-table td {
    text-align: left;
    vertical-align: top;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(200, 164, 106, .18);
    color: #d9c19a;
    line-height: 1.5;
}

.rule-table th {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .8rem;
}

.rule-table td:first-child {
    color: var(--gold-light);
    white-space: nowrap;
}

/* d4 roll tables (background traits) — pin the die column so the gap
   between the number and the trait text stays uniform across every table */
.rule-table.roll-d4 {
    table-layout: fixed;
}

.rule-table.roll-d4 th:first-child,
.rule-table.roll-d4 td:first-child {
    width: 3rem;
}

/* Centered grid table (e.g. the alignment chart) */
.rule-table.centered th,
.rule-table.centered td {
    text-align: center;
    white-space: normal;
}

/* Worked-example callout (the "Creating Alfie" steps) */
.rule-example {
    margin-top: 14px;
    padding: 12px 16px 12px 18px;
    border-left: 2px solid rgba(200, 164, 106, .55);
    background: rgba(200, 164, 106, .05);
}

.rule-example .example-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .72rem;
    color: var(--gold);
    margin-bottom: 6px;
}

.rule-example p {
    color: #c4ad83;
    font-style: italic;
    line-height: 1.7;
}

.rule-example p + p {
    margin-top: 10px;
}

/* .back-to-top is shared with Lore — defined in style.css */

/* ── Responsive ───────────────────────────────── */
/* .rule-hub column breakpoints are shared with .cards — defined in style.css */

@media (max-width: 768px) {
    .rules-intro h1 {
        font-size: 1.9rem;
        letter-spacing: 4px;
    }

    .rule-section-title {
        padding: 18px 18px 0;
        font-size: 1.3rem;
    }

    .rule-section-inner {
        padding: 12px 18px 22px;
    }

    .subsystem-header {
        padding: 14px 16px;
    }

    .subsystem.open > .subsystem-body > .subsystem-inner {
        padding: 4px 16px 18px;
    }

    .rule-table {
        font-size: .82rem;
    }

    .rule-table th,
    .rule-table td {
        padding: 6px 8px;
    }
}