/*
 * =============================================================================
 * Document ID:  WS-HB-CSS-GAME-REFERENCE
 * Title:        Game Reference Component Library
 * Status:       Active
 * Version:      1.1
 * Date:         2026-07-31
 *
 * Purpose:
 *   Component-level styling for every "Game Reference"-style article:
 *   the Narrative Dice reference (dice cards, result-pair/cancellation
 *   cards, instructional steps, worked examples), the tab
 *   list/button/panel system reused by Skills Overview's Action Panels
 *   and every ATTD article, and reference tables. Kept separate from
 *   css/handbook.css so component styling has a single, clearly-owned
 *   home rather than being mixed into the general shell stylesheet.
 *
 * Scope / Authority:
 *   Governed by WS-HANDBOOK-ARCH-001. Any new tabbed or card-based
 *   content should reuse these existing classes
 *   (.game-reference-tab-*, .game-reference-result-*, etc.) rather
 *   than introducing parallel styling - see Technical Standards.
 * =============================================================================
 */


/* =========================================================
   GAME REFERENCE VARIABLES
   ========================================================= */

:root {
    --gr-ink: var(--color-ink, #273941);
    --gr-blue-dark: var(--color-blue-dark, #2c4e61);
    --gr-blue: var(--color-blue, #4b7b92);
    --gr-blue-light: var(--color-blue-light, #73a9c7);
    --gr-blue-pale: var(--color-blue-pale, #b1d0de);
    --gr-paper: var(--color-paper, #dfddd4);
    --gr-paper-light: #ebe9e2;
    --gr-paper-dark: #cfcdc4;
    --gr-rust: var(--color-rust, #784b26);
    --gr-gray: var(--color-gray, #939ea0);
    --gr-border: rgba(39, 57, 65, 0.24);
    --gr-border-strong: rgba(39, 57, 65, 0.42);
    --gr-shadow: 0 2px 7px rgba(24, 39, 47, 0.12);
    --gr-radius-small: 4px;
    --gr-radius: 7px;
    --gr-die-small: 28px;
    --gr-die-medium: 48px;
    --gr-die-reference: 64px;
    --gr-symbol-size: 80px;
}


/* =========================================================
   ARTICLE FOUNDATION
   ========================================================= */

.game-reference-article {
    width: 100%;
    max-width: none;
    color: var(--gr-ink);
}

    .game-reference-article *,
    .game-reference-article *::before,
    .game-reference-article *::after {
        box-sizing: border-box;
    }

.game-reference-article-header {
    margin: 0 0 1rem;
}

    .game-reference-article-header .article-kicker {
        margin: 0 0 0.35rem;
    }

    .game-reference-article-header h1 {
        margin: 0;
        line-height: 1.12;
    }

    .game-reference-article-header .article-subtitle {
        max-width: 900px;
        margin: 0.6rem 0 0;
        line-height: 1.45;
    }

.game-reference-article h2,
.game-reference-article h3,
.game-reference-article h4 {
    line-height: 1.2;
}

.game-reference-article p {
    margin-top: 0;
    margin-bottom: 0.65rem;
    line-height: 1.48;
}

    .game-reference-article p:last-child {
        margin-bottom: 0;
    }


/* =========================================================
   INTRODUCTION
   ========================================================= */

.game-reference-introduction {
    margin: 0;
}

    .game-reference-introduction > h2 {
        margin: 0 0 0.55rem;
    }

    .game-reference-introduction > p {
        max-width: 920px;
    }

.game-reference-core-callout {
    max-width: 920px;
    margin: 0.9rem 0 1.1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient( 90deg, rgba(177, 208, 222, 0.72), rgba(223, 221, 212, 0.72) );
    border-left: 5px solid var(--gr-blue);
    border-radius: 0 var(--gr-radius) var(--gr-radius) 0;
}

    .game-reference-core-callout h3 {
        margin: 0 0 0.55rem;
        color: var(--gr-blue-dark);
    }

.game-reference-core-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 2rem;
}

    .game-reference-core-questions p {
        margin: 0;
    }


/* =========================================================
   TAB WORKSPACE
   ========================================================= */

.game-reference-tab-workspace {
    margin-top: 1.15rem;
}

.game-reference-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.3rem;
    margin: 0;
    padding: 0 0.65rem;
    border-bottom: 2px solid var(--gr-blue-dark);
}

.game-reference-tab-button {
    appearance: none;
    margin: 0 0 -2px;
    padding: 0.65rem 1rem;
    color: var(--gr-blue-dark);
    background: var(--gr-paper-dark);
    border: 1px solid var(--gr-border-strong);
    border-bottom: 2px solid var(--gr-blue-dark);
    border-radius: var(--gr-radius-small) var(--gr-radius-small) 0 0;
    font: inherit;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

    .game-reference-tab-button:hover {
        color: var(--gr-ink);
        background: var(--gr-blue-pale);
    }

    .game-reference-tab-button:focus-visible {
        position: relative;
        z-index: 3;
        outline: 3px solid rgba(115, 169, 199, 0.6);
        outline-offset: 2px;
    }

    .game-reference-tab-button.is-active,
    .game-reference-tab-button[aria-selected="true"] {
        position: relative;
        z-index: 2;
        color: var(--gr-paper-light);
        background: var(--gr-blue-dark);
        border-color: var(--gr-blue-dark);
        border-bottom-color: var(--gr-blue-dark);
    }

.game-reference-tab-panels {
    padding-top: 0;
}

.game-reference-tab-panel {
    padding: 1.45rem 0 0;
}

    .game-reference-tab-panel[hidden] {
        display: none !important;
    }

.game-reference-tab-heading {
    margin: 0 0 1rem;
}

    .game-reference-tab-heading h2 {
        margin: 0 0 0.45rem;
    }

    .game-reference-tab-heading p {
        max-width: 920px;
    }


/* =========================================================
   SHARED SECTION HEADERS
   ========================================================= */

.game-reference-section-header {
    margin: 0 0 0.75rem;
}

    .game-reference-section-header h3 {
        margin: 0 0 0.35rem;
    }

    .game-reference-section-header p {
        max-width: 900px;
    }


/* =========================================================
   THE SEVEN DICE
   ========================================================= */

.game-reference-dice-groups {
    display: grid;
    gap: 1rem;
}

.game-reference-dice-group {
    margin: 0;
    padding: 0.9rem;
    background: rgba(235, 233, 226, 0.76);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
}

    .game-reference-dice-group .game-reference-section-header {
        margin-bottom: 0.7rem;
    }

        .game-reference-dice-group .game-reference-section-header h3 {
            color: var(--gr-blue-dark);
        }

.game-reference-dice-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.game-reference-dice-group[data-dice-group="special"]
.game-reference-dice-card-grid {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
}

.game-reference-die-card {
    min-width: 0;
    padding: 0.75rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-small);
}

.game-reference-die-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.45rem;
}

.game-reference-die-card-image {
    display: block;
    flex: 0 0 auto;
    width: var(--gr-die-reference);
    height: var(--gr-die-reference);
    object-fit: contain;
}

.game-reference-die-card h4 {
    margin: 0 0 0.2rem;
    color: var(--gr-ink);
}

.game-reference-die-sides {
    margin: 0;
    font-size: 0.88rem;
    color: var(--gr-blue-dark);
}

.game-reference-die-description {
    margin: 0;
    font-size: 0.94rem;
}


/* =========================================================
   RESULT SYMBOLS
   ========================================================= */

.game-reference-result-section {
    margin-top: 1.2rem;
}

.game-reference-result-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.game-reference-result-pair {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.8rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
}

.game-reference-result-symbols {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.game-reference-result-symbol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: var(--gr-symbol-size);
    text-align: center;
    font-size: 0.78rem;
}

.game-reference-symbol-icon {
    display: block !important;
    width: var(--gr-symbol-size) !important;
    height: var(--gr-symbol-size) !important;
    max-width: var(--gr-symbol-size) !important;
    max-height: var(--gr-symbol-size) !important;
    object-fit: contain !important;
}

.game-reference-symbol-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gr-symbol-size);
    min-height: var(--gr-symbol-size);
    padding: 0.25rem;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--gr-border);
}

.game-reference-cancels {
    flex: 0 0 auto;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gr-blue-dark);
}

.game-reference-result-pair-text h4 {
    margin: 0 0 0.3rem;
}

.game-reference-result-pair-text p {
    font-size: 0.92rem;
}


/* =========================================================
   NUMBERED INSTRUCTIONAL STEPS
   ========================================================= */

.game-reference-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0 0 1.1rem;
}

.game-reference-step {
    padding: 0.75rem 0.85rem;
    background: rgba(235, 233, 226, 0.74);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-small);
}

.game-reference-step-number {
    display: none;
}

.game-reference-step-content h3 {
    margin: 0 0 0.3rem;
    color: var(--gr-blue-dark);
    font-size: 1rem;
}

    .game-reference-step-content h3::before {
        content: counter(game-reference-step) ". ";
    }

.game-reference-steps {
    counter-reset: game-reference-step;
}

.game-reference-step {
    counter-increment: game-reference-step;
}

.game-reference-step-content p {
    margin: 0;
    font-size: 0.94rem;
}


/* =========================================================
   WHERE THE DICE COME FROM
   ========================================================= */

.game-reference-pool-category-section {
    margin: 1rem 0;
}

.game-reference-pool-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.game-reference-pool-category {
    padding: 0.75rem 0.85rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-small);
}

.game-reference-pool-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0 0 0.45rem;
}

    .game-reference-pool-category-heading h3 {
        margin: 0;
        font-size: 1rem;
        color: var(--gr-blue-dark);
    }

.game-reference-pool-category p {
    margin: 0;
    font-size: 0.92rem;
}


/* =========================================================
   DICE POOL RENDERER
   ========================================================= */

.dice-pool {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.45rem;
    max-width: 100%;
    vertical-align: middle;
}

.dice-pool-type {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
}

.dice-pool-type-images {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
}

.dice-pool-die {
    display: block;
    flex: 0 0 auto;
    width: var(--gr-die-small);
    height: var(--gr-die-small);
    max-width: var(--gr-die-small);
    max-height: var(--gr-die-small);
    object-fit: contain;
}

    .dice-pool-die.inline-icon {
        width: var(--gr-die-small);
        height: var(--gr-die-small);
        max-width: var(--gr-die-small);
        max-height: var(--gr-die-small);
    }

    .dice-pool-die.reference-icon {
        width: var(--gr-die-medium);
        height: var(--gr-die-medium);
        max-width: var(--gr-die-medium);
        max-height: var(--gr-die-medium);
    }

.dice-pool-count {
    font-size: 0.82rem;
    font-weight: 700;
}

.dice-pool-die-label {
    margin-right: 0.25rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.dice-pool-empty {
    font-style: italic;
    color: var(--gr-gray);
}


/* =========================================================
   LABELED AND GROUPED POOLS
   ========================================================= */

.dice-pool-labeled,
.dice-pool-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dice-pool-label,
.dice-pool-group-label {
    flex: 0 0 auto;
    font-weight: 700;
}

.dice-pool-groups {
    display: grid;
    gap: 0.65rem;
}


/* =========================================================
   DICE BREAKDOWN
   ========================================================= */

.dice-pool-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.8rem;
    margin-top: 0.8rem;
}

.dice-pool-breakdown-heading {
    grid-column: 1 / -1;
    margin: 0 0 0.05rem !important;
    padding-top: 0.15rem;
    font-weight: 700;
}

.dice-pool-breakdown-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    background: rgba(235, 233, 226, 0.72);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-small);
}

.dice-pool-breakdown-name {
    min-width: 0;
}

    .dice-pool-breakdown-name strong {
        display: block;
        margin-bottom: 0.18rem;
    }

.dice-pool-breakdown-reason {
    display: block;
    font-size: 0.88rem;
    line-height: 1.35;
}

.dice-pool-breakdown-images {
    min-width: 0;
}

    .dice-pool-breakdown-images .dice-pool-type {
        display: flex;
    }


/* =========================================================
   QUICK EXAMPLE
   ========================================================= */

.game-reference-example-card {
    margin-top: 1rem;
    padding: 0.9rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border-strong);
    border-radius: var(--gr-radius);
}

    .game-reference-example-card > header h3 {
        margin: 0 0 0.35rem;
    }

    .game-reference-example-card > header p {
        max-width: 920px;
    }

.game-reference-example-pool {
    display: flex;
    align-items: center;
    min-height: calc(var(--gr-die-medium) + 1rem);
    margin: 0.75rem 0;
    padding: 0.6rem 0.75rem;
    background: rgba(177, 208, 222, 0.32);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-small);
}

    .game-reference-example-pool .dice-pool {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


/* =========================================================
   ROLL AND RESOLVE
   ========================================================= */

.game-reference-cancellation-section {
    margin-bottom: 1rem;
}

.game-reference-cancellation-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.game-reference-cancellation-pair {
    padding: 0.8rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
}

.game-reference-cancellation-symbols {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 0.45rem;
}

.game-reference-cancellation-mark {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gr-blue-dark);
}

.game-reference-cancellation-pair p {
    margin: 0;
    text-align: center;
    font-size: 0.92rem;
}

.game-reference-outcome-section {
    margin-top: 1rem;
}

.game-reference-outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.game-reference-outcome {
    padding: 0.7rem 0.8rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-small);
}

    .game-reference-outcome h4 {
        margin: 0 0 0.3rem;
        color: var(--gr-blue-dark);
    }

    .game-reference-outcome p {
        margin: 0;
        font-size: 0.92rem;
    }


/* =========================================================
   WORKED EXAMPLE — SCENARIO
   ========================================================= */

.game-reference-example-scenario {
    margin-bottom: 0.9rem;
    padding: 0.85rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
}

.game-reference-scenario-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0.75rem 0 0;
}

    .game-reference-scenario-details > div {
        min-width: 0;
        padding: 0.55rem 0.65rem;
        background: rgba(177, 208, 222, 0.22);
        border-radius: var(--gr-radius-small);
    }

    .game-reference-scenario-details dt {
        margin: 0 0 0.16rem;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gr-blue-dark);
    }

    .game-reference-scenario-details dd {
        margin: 0;
        line-height: 1.35;
    }


/* =========================================================
   WORKED EXAMPLE — STAGES
   ========================================================= */

.game-reference-example-stage {
    margin: 0 0 0.85rem;
    padding: 0.85rem;
    background: rgba(235, 233, 226, 0.7);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
}

.game-reference-stage-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0 0.7rem;
}

.game-reference-stage-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--gr-paper-light);
    background: var(--gr-blue-dark);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
}

.game-reference-stage-heading h3 {
    margin: 0 0 0.22rem;
    color: var(--gr-blue-dark);
}

.game-reference-stage-heading p {
    margin: 0;
}


/* =========================================================
   WORKED EXAMPLE — ROLLED SYMBOLS
   ========================================================= */

.game-reference-rolled-symbols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
}

.game-reference-rolled-symbol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 110px;
    padding: 0.55rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-small);
}

.game-reference-symbol-amount {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.game-reference-symbol-images {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
}

.game-reference-symbol-count {
    font-weight: 700;
    color: var(--gr-blue-dark);
}

.game-reference-rolled-symbol-name {
    font-size: 0.82rem;
    font-weight: 700;
}


/* =========================================================
   WORKED EXAMPLE — CANCELLATION
   ========================================================= */

.game-reference-cancellation-calculations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.game-reference-cancellation-calculation {
    padding: 0.75rem;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-small);
}

.game-reference-calculation-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.game-reference-calculation-operator {
    font-size: 1.15rem;
    font-weight: 700;
}

.game-reference-no-symbols {
    color: var(--gr-blue-dark);
}

.game-reference-cancellation-calculation p {
    margin: 0;
    font-size: 0.9rem;
}


/* =========================================================
   WORKED EXAMPLE — FINAL RESULT
   ========================================================= */

.game-reference-final-result {
    border-color: var(--gr-blue);
}

.game-reference-final-result-card {
    padding: 0.85rem;
    background: linear-gradient( 135deg, rgba(177, 208, 222, 0.45), rgba(235, 233, 226, 0.9) );
    border-left: 5px solid var(--gr-blue);
    border-radius: var(--gr-radius-small);
}

    .game-reference-final-result-card > h3 {
        margin: 0 0 0.6rem;
        color: var(--gr-rust);
    }

.game-reference-net-symbols {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.game-reference-narrative-outcome {
    margin-top: 0.7rem;
    padding: 0.7rem 0.8rem;
    background: rgba(223, 221, 212, 0.82);
    border-radius: var(--gr-radius-small);
}

    .game-reference-narrative-outcome h4 {
        margin: 0 0 0.3rem;
        color: var(--gr-blue-dark);
    }


/* =========================================================
   RESPONSIVE LAYOUT
   ========================================================= */

@media (max-width: 920px) {

    .game-reference-dice-card-grid,
    .game-reference-pool-categories,
    .game-reference-result-pairs,
    .game-reference-cancellation-pairs,
    .game-reference-outcomes,
    .game-reference-cancellation-calculations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-reference-dice-group[data-dice-group="special"]
    .game-reference-dice-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-reference-scenario-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 680px) {

    .game-reference-tabs {
        padding-left: 0;
        padding-right: 0;
    }

    .game-reference-tab-button {
        flex: 1 1 calc(50% - 0.3rem);
        border-radius: var(--gr-radius-small);
        margin-bottom: 0.3rem;
        border-bottom-width: 1px;
    }

        .game-reference-tab-button.is-active,
        .game-reference-tab-button[aria-selected="true"] {
            border-bottom-color: var(--gr-blue-dark);
        }

    .game-reference-tab-panel {
        padding-top: 1rem;
    }

    .game-reference-dice-card-grid,
    .game-reference-dice-group[data-dice-group="special"]
    .game-reference-dice-card-grid,
    .game-reference-pool-categories,
    .game-reference-result-pairs,
    .game-reference-cancellation-pairs,
    .game-reference-outcomes,
    .game-reference-cancellation-calculations,
    .game-reference-scenario-details,
    .dice-pool-breakdown,
    .game-reference-steps {
        grid-template-columns: 1fr;
    }

    .game-reference-result-pair {
        grid-template-columns: 1fr;
    }

    .game-reference-result-symbols {
        justify-content: center;
    }

    .game-reference-pool-category-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .game-reference-core-questions {
        flex-direction: column;
        gap: 0.3rem;
    }
}
/* =========================================================
   RULEBOOK REFERENCES
   ========================================================= */

.game-reference-references {
    margin-top: 1.5rem;
}

.game-reference-accordion {
    overflow: hidden;
    background: var(--gr-paper-light);
    border: 1px solid var(--gr-border-strong);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
}

.game-reference-accordion-summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    color: var(--gr-paper-light);
    background: var(--gr-blue-dark);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

    .game-reference-accordion-summary::-webkit-details-marker {
        display: none;
    }

    .game-reference-accordion-summary::marker {
        display: none;
        content: "";
    }

    .game-reference-accordion-summary:hover {
        background: var(--gr-blue);
    }

    .game-reference-accordion-summary:focus-visible {
        outline: 3px solid rgba(115, 169, 199, 0.72);
        outline-offset: -3px;
    }

.game-reference-accordion-marker {
    display: inline-block;
    flex: 0 0 auto;
    transition: transform 140ms ease;
}

.game-reference-accordion[open]
.game-reference-accordion-marker {
    transform: rotate(90deg);
}

.game-reference-accordion-content {
    padding: 0;
    background: var(--gr-paper-light);
}

.game-reference-reference-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.game-reference-reference-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .game-reference-reference-table th,
    .game-reference-reference-table td {
        padding: 0.7rem 0.85rem;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--gr-border);
    }

    .game-reference-reference-table thead th {
        color: var(--gr-blue-dark);
        background: rgba(177, 208, 222, 0.42);
        font-size: 0.9rem;
    }

        .game-reference-reference-table thead th:first-child {
            width: auto;
        }

        .game-reference-reference-table thead th:last-child {
            width: 8rem;
            text-align: center;
        }

    .game-reference-reference-table tbody th {
        font-weight: 600;
    }

    .game-reference-reference-table tbody td {
        width: 8rem;
        text-align: center;
        white-space: nowrap;
    }

    .game-reference-reference-table tbody tr:last-child th,
    .game-reference-reference-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .game-reference-reference-table tbody tr:hover {
        background: rgba(177, 208, 222, 0.18);
    }


/* =========================================================
   ARTICLE INFORMATION
   ========================================================= */

.game-reference-article-information {
    margin-top: 1.15rem;
    padding: 0.9rem 1rem;
    background: rgba(207, 205, 196, 0.46);
    border-top: 2px solid var(--gr-blue-dark);
    border-bottom: 1px solid var(--gr-border);
}

    .game-reference-article-information > h2 {
        margin: 0 0 0.7rem;
        color: var(--gr-blue-dark);
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

.game-reference-article-information-grid {
    display: grid;
    grid-template-columns: minmax(100px, 0.7fr) minmax(260px, 2fr) minmax(100px, 0.7fr) minmax(130px, 0.9fr);
    gap: 0.7rem;
    margin: 0;
}

.game-reference-article-information-item {
    min-width: 0;
}

    .game-reference-article-information-item dt {
        margin: 0 0 0.18rem;
        color: var(--gr-blue-dark);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }

    .game-reference-article-information-item dd {
        margin: 0;
        line-height: 1.35;
    }


/* =========================================================
   REFERENCE FOOTER RESPONSIVE LAYOUT
   ========================================================= */

@media (max-width: 920px) {

    .game-reference-article-information-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 680px) {

    .game-reference-accordion-summary {
        padding: 0.75rem 0.8rem;
    }

    .game-reference-reference-table {
        min-width: 520px;
    }

    .game-reference-article-information-grid {
        grid-template-columns: 1fr;
    }

    .game-reference-article-information-item {
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--gr-border);
    }

        .game-reference-article-information-item:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }
}


/*
 * =============================================================================
 * UPDATE LOG (most recent first)
 * -----------------------------------------------------------------------------
 * 2026-07-31  Retrofitted the formal file header and this update log
 *             per the project's code documentation standard.
 * 2026-07-23  Added .action-panel-tabs spacing rule; removed the
 *             alternating-row background rule (no longer meaningful
 *             once Exploration/Technology moved to tabs).
 * -----          Initial version (predates this log).
 * =============================================================================
 */