/* Super Dicey Games — the whole stylesheet.
 *
 * NOTHING HERE HAS BEEN REORDERED, and that is deliberate. The order is
 * load-bearing: games added late have rules that sit AFTER the Lights Out
 * counter-rule batches while older games sit before them, so grouping the
 * file into tidy sections strengthens one group and weakens the other.
 * Three attempts to do it shifted 794, then 7, then 14 classes. If it is
 * ever worth doing properly it needs cascade layers, one per run.
 *
 * What IS here: a banner at the head of every substantial run of related
 * rules, so the structure the file already has is findable. Comments cannot
 * change the cascade, so this is free.
 *
 * ⚠ MUST DEPLOY ALONGSIDE index.html, like games.js.
 * ⚠ Never write a comment terminator inside comment prose. Doing it once,
 *   in a header much like this one, ended the comment early and swallowed
 *   the :root block — every token went empty and 794 classes changed.
 *
 * WHERE EACH GAME LIVES  (line numbers, after this header)
 *     1192  Riot Cube
 *     1379  RSVP
 *     2134  Nine Lives  (~131 lines)
 *     2280  Nine Lives
 *     2574  Shootout
 *     2625  Shootout
 *     2987  Busted
 *     3057  Busted
 *     3146  Busted
 *     3215  Busted
 *     3262  OUT  (~123 lines)
 *     3375  OUT
 *     4086  MOLT
 *     4167  Red Flags
 *     4197  Red Flags
 *     4233  Red Flags
 *     4291  Duck Duck Roll  (~108 lines)
 *     4383  Safety in Numbers
 *     4405  Safety in Numbers
 *     4572  7 Up 7 Down  (~163 lines)
 *     4735  Tenny-Two
 *     4800  Tenny-Two
 *     4854  D20 Roulette
 *     4913  D20 Roulette
 *     4971  D20 Roulette  (~105 lines)
 *     5061  Dice Baccarat  (~115 lines)
 *     5163  Dice Baccarat
 *     5222  Dice Hold'em
 *     5284  Dice Hold'em
 *     6080  Double Down  (~147 lines)
 *     6221  Double Down
 *     6282  Double Down  (~299 lines)
 *     6676  OUTmaneuver  (~165 lines)
 *     6877  OUTmaneuver
 *     6938  The Cull  (~176 lines)
 *     7094  The Cull  (~173 lines)
 *     7242  Whittle  (~191 lines)
 *     7410  Whittle
 *     7491  B.U.M.P.
 *     7522  B.U.M.P.  (~253 lines)
 *     7737  Hodgepodge
 *     7861  Hodgepodge  (~115 lines)
 *     8007  One More Roll  (~229 lines)
 *     8206  One More Roll
 *     8260  Bomb Bomb
 *     8339  Bomb Bomb
 *     8382  Bomb Bomb
 *     8550  Crab Bucket  (~344 lines)
 *     8838  Tencathlon
 *     8863  Tencathlon  (~198 lines)
 *     9027  Subject to Change  (~277 lines)
 *     9257  Subject to Change
 *     9293  Impact Zone  (~276 lines)
 *     9548  Impact Zone
 *     9641  Broadswords & Beer  (~115 lines)
 *     9752  Broadswords & Beer  (~130 lines)
 *     9867  Broadswords & Beer  (~144 lines)
 *    10041  Super OUT
 *    10111  Super OUT
 *    10168  Super OUT  (~119 lines)
 *    10297  Tethered  (~298 lines)
 *    10570  Dead Weight
 *    10649  Dead Weight
 *    10714  Dead Weight  (~302 lines)
 *    10973  Follow My Lead  (~117 lines)
 *    11082  Follow My Lead  (~127 lines)
 *    11190  The Horde  (~157 lines)
 *    11335  The Horde
 *    11408  The Horde  (~114 lines)
 *    11508  The Horde
 *    11580  Close Enough  (~266 lines)
 *    11814  Close Enough  (~156 lines)
 *    11953  Close Enough
 *    12344  Lights Out: Hodgepodge
 *
 * EVERYTHING ELSE, in order
 *      133  theme tokens  (~225 lines)
 *      358  Lights Out: base elements
 *      435  unprefixed legacy classes
 *      492  Lights Out: site chrome + game shell
 *      550  Lights Out: site chrome + game shell
 *      624  Lights Out: unprefixed legacy classes
 *      765  base elements
 *      863  site chrome + game shell
 *      931  site chrome + game shell
 *      986  unprefixed legacy classes  (~134 lines)
 *     1154  unprefixed legacy classes
 *     1224  unprefixed legacy classes
 *     1474  unprefixed legacy classes
 *     1556  unprefixed legacy classes  (~131 lines)
 *     1676  unprefixed legacy classes
 *     1755  unprefixed legacy classes  (~121 lines)
 *     1868  site chrome + game shell
 *     1909  unprefixed legacy classes
 *     1958  unprefixed legacy classes
 *     1988  site chrome + game shell
 *     2072  media queries
 *     2347  media queries
 *     2389  unprefixed legacy classes  (~215 lines)
 *     2656  unprefixed legacy classes  (~390 lines)
 *     3590  Lights Out: site chrome + game shell
 *     3647  Lights Out: several games (Double Cross, Wind It Up, R.A.M., …)
 *     3823  site chrome + game shell
 *     3964  media queries
 *     4474  site chrome + game shell
 *     4503  site chrome + game shell
 *     6546  media queries  (~129 lines)
 *     8418  site chrome + game shell  (~153 lines)
 *     9984  unprefixed legacy classes
 *    11989  media queries  (~250 lines)
 *    12239  Lights Out: several games (Nine Lives, Shootout, Busted, …)
 */

/* [SDG] THEME TOKENS ------------------------------------------------ */
/* Super Dicey Games — the whole stylesheet.
 *
 * Lifted verbatim out of index.html: it was 12,019 of that file's 15,469
 * lines (77%), which made the markup for 44 games hard to find in among it.
 * Nothing here was rewritten in the move; only the 8-space indent it carried
 * as an inline <style> block was removed.
 *
 * ⚠ THIS FILE MUST DEPLOY ALONGSIDE index.html, exactly like games.js.
 * Copying index.html on its own now yields an unstyled page. The site is
 * genuinely opened over file:// as well as http:// (print/build-rules.js does
 * it), and a relative <link> works in both.
 *
 * LAYERS, roughly in order below: theme tokens (:root and [data-theme="dark"])
 * → base elements → site chrome → .gs-* THE SHARED GAME SHELL → then one
 * block per game, prefixed. The .gs-* layer is the universal one; anything a
 * new game needs that already exists there should not be re-declared.
 */
:root {
    /* === BASE PALETTE === */
    --kraft: #c9a66b;
    --kraft-light: #e8d4a8;
    --kraft-dark: #8b6914;
    --black: #1a1a1a;
    --ink: #2d2d2d;
    --red: #b91c1c;
    --red-dark: #7f1d1d;
    --tape: rgba(255, 245, 200, 0.7);
    --white: #fefefe;
    
    /* === SEMANTIC COLORS === */
    /* Text */
    --text-muted: #666;
    --text-muted-light: #888;
    --text-muted-lighter: #999;
    --text-muted-lightest: #aaa;
    --text-disabled: #ccc;
    
    /* Status */
    --success: #22c55e;
    --success-light: #4ade80;
    --success-dark: #16a34a;
    --success-darker: #166534;
    --success-bg: #f0fdf4;
    --success-bg-light: #dcfce7;
    --success-bg-dark: #bbf7d0;
    
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-bg: #fef3c7;
    --warning-bg-light: #fde68a;
    
    --error: #dc2626;
    --error-light: #ef4444;
    --error-lighter: #f87171;
    --error-lightest: #fca5a5;
    --error-dark: #991b1b;
    --error-bg: #fef2f2;
    --error-bg-light: #fee2e2;
    --error-bg-dark: #fecaca;
    
    --info: #2563eb;
    --info-light: #3b82f6;
    --info-lighter: #60a5fa;
    
    /* Accent */
    --gold: #ffd700;
    --purple: #7c3aed;
    --purple-light: #a855f7;
    
    /* Game-specific */
    --game-dark: #374151;
    --game-green: #27ae60;
    --game-green-dark: #1a472a;
    --game-red: #e74c3c;
    
    /* Theme-switchable variables */
    --bg-primary: var(--kraft);
    --bg-secondary: var(--kraft-light);
    /* THE INK CHANNEL. These four exist so that no colour token has to
       be both ink and surface at once — the ambiguity that made the old
       CRT theme need ~200 per-element counter-rules. Each aliases the
       tone it replaced, so Analog renders exactly as before; a dark
       theme can then flip ink without dragging surfaces along with it.
       Use these for `color:`, never --black/--kraft/--kraft-light. */
    --text-primary: var(--black);
    --text-secondary: var(--ink);
    --ink-on-dark: var(--kraft-light);
    --ink-on-dark-dim: var(--kraft);
    --ink-inverse: var(--white);
    --accent: var(--red);
    --accent-dark: var(--red-dark);
    --nav-bg: var(--black);
    --nav-text: var(--kraft-light);
    --nav-border: var(--red);
    --card-bg: var(--kraft-light);
    --card-border: var(--black);
    --btn-bg: var(--red);
    --btn-text: var(--white);
    --glow: none;
}

/* ============================================================
   LIGHTS OUT — the neutral dark theme

   Same table, dim room. This is deliberately NOT a second brand:
   the kraft warmth survives as warm-grey ink on warm-black paper,
   and the stamp red stays RED so colour can still carry meaning.

   THE ONE RULE THAT MATTERS: every surface here is DARK and every
   ink is LIGHT. The old CRT palette was two-tone (near-black page +
   a BRIGHT #00cc33 card fill), so one inherited colour could never
   serve both — which is why it needed ~200 per-element counter-rules.
   A monotone dark ground means one ink serves everything. Do not
   reintroduce a light or saturated SURFACE token here.
   ============================================================ */

/* --- Theme Variables --- */
[data-theme="dark"] {
    /* Surfaces: page is darkest, panels lift toward the viewer. */
    --surface-page:   #171512;
    --surface-sunken: #1e1b17;
    --surface-raised: #232019;
    --surface-high:   #2e2922;

    /* Ink: warm off-white, never pure #fff — the brand is warm. */
    --ink-bright: #f2ede3;
    --ink-dim:    #b9af9d;
    --ink-faint:  #8b8273;

    --edge:      #3a342c;
    --edge-deep: #29241e;

    /* The stamp red, lifted enough to clear 4.5:1 on --surface-page.
       #b91c1c (the Analog red) only manages 2.8:1 down here. */
    --accent-red:      #e35d4f;
    --accent-red-deep: #b8392e;


    /* Override base palette.
       --kraft-light is the CARD SURFACE. The CRT theme aliased it to a
       bright green INK value, which is what turned every card, .gs-top
       and .gs-dock into a glowing block. It must stay a dark surface. */
    --kraft:       var(--surface-page);
    --kraft-light: var(--surface-raised);
    --kraft-dark:  var(--edge);
    /* --black carries 219 borders and 72 backgrounds. It sits at --edge
       rather than --surface-high so it stays DISTINCT from --white: the
       two collided at one tone, which made every `border: var(--black)`
       on a `background: var(--white)` face invisible. Here it reads as a
       hairline against page, panel and face alike, and as a lifted panel
       behind content. Its ~50 INK uses ride --text-primary. */
    --black:    var(--edge);
    --ink:      var(--ink-dim);
    --red:      var(--accent-red);
    --red-dark: var(--accent-red-deep);
    --tape:     rgba(242, 237, 227, 0.06);
    /* --white is ink 61x and surface 38x. Keeping it light left a light
       island (dice faces, cards) inside a dark theme, and the ink landing
       on those islands is the same --text-primary the dark page needs —
       so it came out white-on-white. A light surface here would reopen
       exactly the two-tone split that made the CRT theme expensive, so
       --white becomes a dark face and its ink uses ride --ink-inverse. */
    --white:    var(--surface-high);

    /* Text roles. In Analog these alias --black / --ink / --kraft-light
       / --kraft, all of which are SURFACE tones down here — so the ink
       channel is set explicitly and is the only thing that flips. */
    --text-primary:      var(--ink-bright);
    --text-secondary:    var(--ink-dim);
    --ink-on-dark:       var(--ink-bright);
    --ink-on-dark-dim:   var(--ink-dim);
    --ink-inverse:       var(--ink-bright);

    --text-muted:          var(--ink-dim);
    --text-muted-light:    var(--ink-dim);
    --text-muted-lighter:  var(--ink-faint);
    --text-muted-lightest: var(--ink-faint);
    --text-disabled:       #6b6357;

    --success:        #6dd48a;
    --success-light:  #8ee0a4;
    --success-dark:   #4bb56a;
    --success-darker: #2f7a47;
    --success-bg:       #1b2a1f;
    --success-bg-light: #22331f;
    --success-bg-dark:  #16241a;

    --warning:          #e8b45c;
    --warning-light:    #f0c77e;
    --warning-bg:       #2c2415;
    --warning-bg-light: #3a2f1a;

    --error:          #f0645a;
    --error-light:    #f4837a;
    --error-lighter:  #f79f98;
    --error-lightest: #fabbb5;
    --error-dark:     #c0392b;
    --error-bg:       #2a1614;
    --error-bg-light: #351a17;
    --error-bg-dark:  #401f1a;

    --info:         #6aa9e8;
    --info-light:   #8bbdee;
    --info-lighter: #a9d0f3;

    --gold:         #e8c25c;
    --purple:       #b08de0;
    --purple-light: #c4a8e8;

    --game-dark:       var(--surface-sunken);
    --game-green:      #2f7a47;
    --game-green-dark: #1b2a1f;
    --game-red:        var(--error);

    /* Chrome */
    --nav-bg:     var(--surface-sunken);
    --nav-text:   var(--ink-bright);
    --nav-border: var(--accent-red);
    --card-bg:     var(--surface-raised);
    --card-border: var(--edge);
    --btn-bg:   var(--accent-red);
    --btn-text: var(--ink-bright);
    --glow: none;
}
/* [SDG] LIGHTS OUT: BASE ELEMENTS ----------------------------------- */


/* --- Base Elements ---
   No costume here: Lights Out keeps the brand faces (Bebas / Special
   Elite / Courier Prime) and the paper texture. Only the lights change. */
[data-theme="dark"] body {
    background: var(--surface-page);
    color: var(--ink-bright);
}

/* Inline `color: var(--black)` / `var(--kraft)` is set straight on
   elements in a handful of places — the "Coming soon" component lines
   among them. Both are SURFACE tones here, and an inline style beats
   every stylesheet rule, so they are caught by attribute match. The
   ink-channel split only reaches declarations inside <style>. */
[data-theme="dark"] [style*="color: var(--black)"],
[data-theme="dark"] [style*="color:var(--black)"],
[data-theme="dark"] [style*="color: var(--kraft)"],
[data-theme="dark"] [style*="color:var(--kraft)"] {
    color: var(--ink-dim) !important;
}

[data-theme="dark"] body::before {
    display: none;
}

[data-theme="dark"] body::after {
    display: none;
}

/* --- Typography --- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--ink-bright);
}

[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: var(--ink-bright);
}

[data-theme="dark"] a {
    color: var(--accent-red);
}

[data-theme="dark"] a:hover {
    color: var(--ink-bright);
}

/* --- CRT overlay + flicker retired with the CRT theme. The .crt-overlay
   div stays in the markup, kept inert here. --- */
.crt-overlay {
    display: none;
}

/* --- Navigation --- */
[data-theme="dark"] nav {
    background: var(--surface-sunken);
    border-bottom: 2px solid var(--accent-red);
}

[data-theme="dark"] nav .logo-text {
    color: var(--ink-bright);
}

[data-theme="dark"] nav a {
    color: var(--ink-dim);
}

[data-theme="dark"] nav a:hover {
    color: var(--ink-bright);
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */


/* --- Theme Toggle --- */
.theme-toggle {
    display: flex;
    gap: 0;
    margin-left: 1rem;
}

.theme-btn {
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    border: 2px solid var(--kraft-light);
    background: transparent;
    color: var(--ink-on-dark);
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 6.5rem;
    text-align: center;
}

.theme-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.theme-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.theme-btn.active {
    background: var(--kraft-light);
    color: var(--nav-bg);
}

.theme-btn:hover:not(.active) {
    background: rgba(232, 212, 168, 0.2);
}

[data-theme="dark"] .theme-btn {
    color: var(--ink-dim);
    border-color: var(--edge);
}

[data-theme="dark"] .theme-btn.active {
    background: var(--ink-bright);
    color: var(--surface-page);
    border-color: var(--ink-bright);
}

[data-theme="dark"] .theme-btn:hover:not(.active) {
    background: rgba(242, 237, 227, 0.12);
    color: var(--ink-bright);
}
/* [SDG] LIGHTS OUT: SITE CHROME + GAME SHELL ------------------------ */


/* --- Sections --- */
[data-theme="dark"] section,
[data-theme="dark"] .hero,
[data-theme="dark"] footer {
    background: var(--surface-page);
}

/* The rubber-stamp tilt is brand, not costume — deliberately NOT reset
   to rotate(0deg) the way the CRT theme did. */
[data-theme="dark"] .section-header h2,
[data-theme="dark"] .play-section .section-header h2,
[data-theme="dark"] #merch .section-header h2,
[data-theme="dark"] #team .section-header h2 {
    background: var(--surface-raised);
    color: var(--ink-bright);
    border: 2px solid var(--accent-red);
}

[data-theme="dark"] .section-header p,
[data-theme="dark"] .play-section .section-header p {
    color: var(--ink-dim);
}

/* --- Hero --- */
[data-theme="dark"] .hero-logo {
    border: 3px solid var(--edge);
}

[data-theme="dark"] .hero .tagline {
    background: transparent;
    color: var(--ink-dim);
    border: 1px solid var(--ink-dim);
}

[data-theme="dark"] .hero .motto {
    color: var(--ink-bright);
}

/* --- Cards & Containers --- */
[data-theme="dark"] .philosophy-box,
[data-theme="dark"] .division-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .manifesto-item,
[data-theme="dark"] .game-container,
[data-theme="dark"] .merch-item {
    background: var(--surface-raised);
    border: 1px solid var(--ink-dim);
}

[data-theme="dark"] .philosophy-box::before,
[data-theme="dark"] .manifesto-item::before,
[data-theme="dark"] .division-card::before {
    background: var(--ink-dim);
    opacity: 0.2;
}
/* [SDG] LIGHTS OUT: SITE CHROME + GAME SHELL ------------------------ */


/* --- Buttons --- */
[data-theme="dark"] .btn,
[data-theme="dark"] button {
    background: transparent;
    color: var(--ink-bright);
    border: 2px solid var(--ink-bright);
    text-transform: uppercase;
    letter-spacing: 2px;
}

[data-theme="dark"] .btn:hover,
[data-theme="dark"] button:hover {
    background: var(--ink-bright);
    color: var(--surface-page);
}

[data-theme="dark"] .btn-primary {
    background: var(--edge-deep);
}

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] button:disabled {
    opacity: 0.4;
    border-color: var(--edge-deep);
    color: var(--text-primary);
}

/* --- Form Elements --- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--surface-page);
    border: 1px solid var(--ink-dim);
    color: var(--ink-bright);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    outline: none;
    border-color: var(--ink-bright);
}

/* --- Game Components --- */
[data-theme="dark"] .game-info-bar {
    background: var(--surface-page);
    border: 1px solid var(--ink-dim);
}

[data-theme="dark"] .how-to-play {
    background: var(--surface-page);
    border: 1px solid var(--edge-deep);
}

[data-theme="dark"] .how-to-play summary {
    color: var(--ink-bright);
}

[data-theme="dark"] .rules-content {
    color: var(--ink-dim);
}

/* --- Dice --- */
[data-theme="dark"] .die,
[data-theme="dark"] .dd-die,
[data-theme="dark"] .deca-die,
[data-theme="dark"] .dh-die {
    background: var(--surface-sunken);
    border: 2px solid var(--ink-bright);
    color: var(--ink-bright);
}
/* [SDG] LIGHTS OUT: UNPREFIXED LEGACY CLASSES ----------------------- */


[data-theme="dark"] .die.kept,
[data-theme="dark"] .die.active {
    background: var(--edge-deep);
}

/* --- Player Elements --- */
[data-theme="dark"] .player,
[data-theme="dark"] .scoreboard {
    background: var(--surface-raised);
    border-color: var(--ink-dim);
}

[data-theme="dark"] .player.active {
    border-color: var(--ink-bright);
}

[data-theme="dark"] .player.winner {
    background: var(--edge-deep);
}

/* --- Messages --- */
[data-theme="dark"] .message {
    color: var(--ink-bright);
}

[data-theme="dark"] .message.good,
[data-theme="dark"] .message.success {
    color: var(--ink-bright);
}

[data-theme="dark"] .message.bad,
[data-theme="dark"] .message.error {
    color: var(--error);
}

/* --- Merch --- */
[data-theme="dark"] .merch-image {
    border: 2px solid var(--ink-dim);
}

[data-theme="dark"] .merch-hero-inner {
    background: var(--surface-raised);
    border: 1px solid var(--ink-bright);
}

[data-theme="dark"] .merch-status {
    color: var(--ink-bright);
    opacity: 0.7;
}

/* --- Team --- */
[data-theme="dark"] .team-card img {
    border: 2px solid var(--ink-dim);
}

/* --- Footer --- */
[data-theme="dark"] footer {
    background: var(--surface-page);
    border-top: 2px solid var(--ink-bright);
}

[data-theme="dark"] .other-projects {
    background: var(--surface-raised) !important;
    border: 2px dashed var(--ink-bright) !important;
}

[data-theme="dark"] .other-projects p:first-child {
    color: var(--ink-dim) !important;
}

[data-theme="dark"] .other-projects a {
    color: var(--ink-bright) !important;
}

[data-theme="dark"] .other-projects p:not(:first-child) {
    color: var(--text-primary);
}

[data-theme="dark"] .kofi-btn {
    background: transparent !important;
    border: 2px solid var(--ink-bright) !important;
    color: var(--ink-bright) !important;
}

[data-theme="dark"] .kofi-btn:hover {
    background: var(--ink-bright) !important;
    color: var(--surface-page) !important;
}

/* --- Tables --- */
[data-theme="dark"] table {
    border-color: var(--ink-dim);
}

[data-theme="dark"] th {
    background: var(--edge-deep);
    border-color: var(--ink-dim);
    color: var(--ink-bright);
}

[data-theme="dark"] td {
    border-color: var(--edge-deep);
}

/* --- Dividers --- */
[data-theme="dark"] .divider,
[data-theme="dark"] hr {
    background: var(--ink-dim);
}

/* --- Scrollbar --- */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    background: var(--surface-page);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--ink-dim);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--ink-bright);
}

/* --- Selection --- */
[data-theme="dark"] ::selection {
    background: var(--ink-bright);
    color: var(--surface-page);
}

/* --- Transitions --- */
body, section, nav, footer,
.btn, button,
.game-container, .die,
.philosophy-box, .division-card, .team-card, .merch-item {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* [SDG] BASE ELEMENTS ----------------------------------------------- */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Courier Prime', 'Courier New', monospace;
    background: var(--kraft);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}
/* Kraft paper texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.15;
    pointer-events: none;
    z-index: 9999;
}
/* Xerox/print artifacts */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.03) 2px,
            rgba(0,0,0,0.03) 4px
        );
    pointer-events: none;
    z-index: 9998;
}
/* Navigation */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--black);
    padding: 0.75rem 2rem;
    border-bottom: 4px solid var(--red);
}
nav .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
nav .logo-text {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
    color: var(--ink-inverse);
    letter-spacing: 1px;
}
nav .logo-text .tm {
    font-size: 0.6em;
    vertical-align: super;
}
nav ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    flex-wrap: wrap;
}
nav a {
    color: var(--ink-on-dark);
    text-decoration: none;
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: color 0.3s;
}
nav a:hover {
    color: var(--red);
}
/* [SDG] SITE CHROME + GAME SHELL ------------------------------------ */

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6rem 2rem 4rem;
    position: relative;
    background: var(--kraft);
}
.hero-logo {
    width: 180px;
    height: 180px;
    margin-bottom: 1.5rem;
    border: 4px solid var(--black);
    transform: rotate(-2deg);
    box-shadow: 8px 8px 0 var(--black);
}
.hero h1 {
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1;
    margin-bottom: 0.5rem;
    transform: rotate(-1deg);
}
.hero h1 .tm {
    font-size: 0.3em;
    vertical-align: super;
}
.hero .tagline {
    font-family: 'Special Elite', cursive;
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--red);
    margin-bottom: 1rem;
    transform: rotate(1deg);
    display: inline-block;
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 0.25rem 1rem;
}
.hero .subtitle {
    font-family: 'Courier Prime', monospace;
    font-size: 1.1rem;
    max-width: 500px;
    margin-bottom: 0.5rem;
}
.hero .motto {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
    color: var(--red);
    margin: 1.5rem 0;
    transform: rotate(-1deg);
}
.hero .motto .tm {
    font-size: 0.6em;
    vertical-align: super;
}
.cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}
/* [SDG] SITE CHROME + GAME SHELL ------------------------------------ */

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;
    border: 3px solid var(--black);
    background: var(--kraft-light);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 4px 4px 0 var(--black);
    transform: rotate(-1deg);
}
.btn:hover {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--black);
}
.btn-primary {
    background: var(--red);
    color: var(--ink-inverse);
    border-color: var(--red-dark);
    box-shadow: 4px 4px 0 var(--red-dark);
}
.btn-primary:hover {
    box-shadow: 6px 6px 0 var(--red-dark);
}
/* Sections */
section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.section-header h2 {
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 0.5rem;
    display: inline-block;
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 0.5rem 1.5rem;
    transform: rotate(-1deg);
}
.section-header p {
    font-family: 'Courier Prime', monospace;
    max-width: 600px;
    margin: 1rem auto 0;
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

/* Philosophy Section */
.philosophy-box {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 2rem;
    position: relative;
    margin: 2rem 0;
    box-shadow: 8px 8px 0 var(--black);
}
/* Tape effect */
.philosophy-box::before,
.philosophy-box::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 30px;
    background: var(--tape);
    border: 1px solid rgba(0,0,0,0.1);
}
.philosophy-box::before {
    top: -15px;
    left: 30px;
    transform: rotate(-5deg);
}
.philosophy-box::after {
    top: -15px;
    right: 30px;
    transform: rotate(3deg);
}
.philosophy-box h3 {
    font-family: 'Permanent Marker', cursive;
    font-size: 2rem;
    color: var(--red);
    margin-bottom: 1.5rem;
    transform: rotate(-1deg);
}
.philosophy-box h3 .tm {
    font-size: 0.5em;
    vertical-align: super;
}
.philosophy-box p {
    font-family: 'Courier Prime', monospace;
    margin-bottom: 1rem;
    line-height: 1.8;
}
.philosophy-box .signature {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.2rem;
    margin-top: 1.5rem;
    color: var(--red);
}
.philosophy-box .signature .tm {
    font-size: 0.6em;
    vertical-align: super;
}
/* Three Divisions */
.divisions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.division-card {
    background: var(--white);
    border: 3px solid var(--black);
    padding: 1.5rem;
    position: relative;
    box-shadow: 6px 6px 0 var(--black);
    transform: rotate(0deg);
    transition: transform 0.2s;
}
.division-card:nth-child(1) { transform: rotate(-1deg); }
.division-card:nth-child(2) { transform: rotate(0.5deg); }
.division-card:nth-child(3) { transform: rotate(-0.5deg); }
.division-card:hover {
    transform: rotate(0deg) translate(-3px, -3px);
}
.division-card .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.division-card h3 {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.division-card .subtitle {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    color: var(--red);
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.division-card p {
    font-family: 'Courier Prime', monospace;
    font-size: 0.9rem;
}
/* Play Section */
.play-section {
    background: var(--black);
    color: var(--ink-on-dark);
    margin: 3rem 0;
    padding: 4rem 2rem;
    border-top: 6px solid var(--red);
    border-bottom: 6px solid var(--red);
    max-width: 100%;
}
.play-inner {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.play-section .section-header {
    text-align: center;
    margin-bottom: 2rem;
}
.play-section .section-header h2 {
    background: var(--red);
    color: var(--ink-inverse);
    display: inline-block;
    padding: 0.5rem 1.5rem;
}
.play-section .section-header p {
    color: var(--ink-on-dark);
    max-width: 600px;
    margin: 1rem auto 0;
}
.game-container {
    background: var(--kraft);
    border: 3px solid var(--kraft-light);
    padding: 2rem;
    color: var(--text-primary);
    display: none;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .game-container {
        padding: 0.5rem;
        border-width: 2px;
    }
}
.game-container.active {
    display: block;
}
/* Game Info Bar - objective and components */
.game-info-bar {
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}
.game-info-bar.gambling-hall {
    background: linear-gradient(135deg, #1a472a 0%, #0d2818 100%);
    border-left: 4px solid #fbbf24;
}
.game-info-bar .game-objective {
    margin-bottom: 0.25rem;
}
.game-info-bar .game-components {
    opacity: 0.85;
    font-size: 0.8rem;
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

/* How to Play Toggle - shared across all games */
.how-to-play {
    margin-bottom: 1rem;
    background: var(--kraft-light);
    border: 2px solid var(--black);
}
.how-to-play summary {
    padding: 0.75rem 1rem;
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    cursor: pointer;
    background: var(--black);
    color: var(--ink-on-dark);
    list-style: none;
}
.how-to-play summary::-webkit-details-marker {
    display: none;
}
.how-to-play summary::before {
    content: '▶ ';
}
.how-to-play[open] summary::before {
    content: '▼ ';
}
.how-to-play .rules-content {
    padding: 1rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}
.how-to-play .rules-content p {
    margin-bottom: 0.5rem;
}
.how-to-play .rules-content p:last-child {
    margin-bottom: 0;
}
/* [SDG] RIOT CUBE --------------------------------------------------- */

/* Riot Cube Styles */
.riot-cube-game {
    text-align: center;
}
.riot-cube-game .setup-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.riot-cube-game label {
    font-family: 'Special Elite', cursive;
}
.riot-cube-game input {
    width: 60px;
    padding: 0.5rem;
    font-family: 'Courier Prime', monospace;
    font-size: 1rem;
    border: 2px solid var(--black);
    text-align: center;
}
.riot-cube-game .mode-btns {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

.mode-btn {
    padding: 0.5rem 1rem;
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    background: var(--kraft-light);
    border: 2px solid var(--black);
    cursor: pointer;
    transition: all 0.2s;
}
.mode-btn.active {
    background: var(--red);
    color: var(--ink-inverse);
    border-color: var(--red);
}
.dice-display {
    margin: 1.5rem 0;
}
.dice-face {
    display: inline-block;
    font-family: 'Permanent Marker', cursive;
    font-size: 2.5rem;
    background: var(--white);
    border: 4px solid var(--black);
    padding: 1rem 2rem;
    min-width: 200px;
    box-shadow: 4px 4px 0 var(--black);
}
.players-display {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
.player-chip {
    background: var(--white);
    border: 2px solid var(--black);
    padding: 0.75rem 1rem;
    min-width: 80px;
}
.player-chip.current {
    border-color: var(--red);
    border-width: 3px;
    background: var(--kraft-light);
}
.player-chip .name {
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
}
.player-chip .tokens {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    color: var(--red);
}
.player-chip.human {
    background: var(--white);
}
.player-chip.cpu {
    background: var(--text-disabled);
}
.player-chip.human .name {
    color: var(--red);
    font-weight: bold;
}
.game-message {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--kraft-light);
    border-left: 4px solid var(--red);
    font-family: 'Courier Prime', monospace;
    text-align: left;
}
/* RSVP Narrator - more prominent teaching text */
.rsvp-narrator {
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    background: var(--black);
    color: var(--ink-on-dark);
    font-family: 'Courier Prime', monospace;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    min-height: 3rem;
}
.winner-message {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    color: var(--red);
    text-align: center;
}
/* Rank and File Styles */
.rank-file-game {
    text-align: center;
}
/* RSVP Styles */
.rsvp-game {
    text-align: center;
    position: relative;
}
.rsvp-setup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.player-count-btns {
    display: flex;
    gap: 0.25rem;
}
.player-count-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}
.player-count-btn:hover {
    background: var(--black);
    color: var(--ink-on-dark);
}
.player-count-btn.active {
    background: var(--black);
    color: var(--ink-on-dark);
}
.rsvp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--black);
    color: var(--ink-on-dark);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
}
.rsvp-suit-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.suit-item {
    padding: 0.25rem 0.5rem;
    background: var(--kraft-light);
    border: 1px solid var(--black);
}
/* [SDG] RSVP -------------------------------------------------------- */

.rsvp-table {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.rsvp-player {
    background: var(--white);
    border: 2px solid var(--black);
    padding: 0.5rem;
    min-width: 80px;
    text-align: center;
    transition: all 0.3s ease;
}
.rsvp-player.human {
    border-color: var(--red);
    border-width: 3px;
}
.rsvp-player.eliminated {
    opacity: 0.3;
    background: #ccc;
}
.rsvp-player.greyed-out {
    opacity: 0.35;
    transform: scale(0.95);
}
.rsvp-player.in-war {
    box-shadow: 0 0 12px var(--red);
    transform: scale(1.05);
    background: var(--kraft-light);
}
.rsvp-player.winner {
    box-shadow: 0 0 15px gold;
    background: #fffde7;
    border-color: gold;
}
.rsvp-player .player-name {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
.rsvp-player .card-count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    color: var(--text-muted);
}
.rsvp-player .flipped-card {
    font-size: 2rem;
    margin-top: 0.25rem;
    min-height: 2.5rem;
    font-weight: bold;
}
.rsvp-player .roll-result {
    font-size: 1rem;
    margin-top: 0.25rem;
    color: var(--red);
    font-family: 'Courier Prime', monospace;
}
.rsvp-center {
    margin: 1.5rem 0;
    min-height: 60px;
}
.rsvp-flipped-cards {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.flipped-card-display {
    background: white;
    border: 2px solid var(--black);
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 1.5rem;
    min-width: 50px;
}
.flipped-card-display.winner {
    border-color: gold;
    box-shadow: 0 0 10px gold;
}
.flipped-card-display.loser {
    opacity: 0.5;
}
.rsvp-d4 {
    margin: 1rem 0;
}
.rsvp-d4 .d4-face {
    font-size: 3rem;
}
.rsvp-controls {
    margin-top: 1rem;
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

/* RPS Finale Modal */
.rps-finale {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.rps-finale-inner {
    background: var(--kraft);
    border: 4px solid var(--red);
    padding: 2rem;
    text-align: center;
    max-width: 350px;
}
.rps-finale h3 {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.8rem;
    color: var(--red);
    margin-bottom: 0.5rem;
}
.rps-finale p {
    font-family: 'Courier Prime', monospace;
    margin-bottom: 1rem;
}
.rps-score {
    display: flex;
    justify-content: space-around;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.rps-choices {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.rps-btn {
    padding: 1rem;
    font-size: 1.5rem;
    background: var(--white);
    border: 3px solid var(--black);
    cursor: pointer;
    transition: all 0.2s;
    /* the label is now a mark + a word, so lay them out on a row */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}
.rps-btn .sdg-suit { width: 1.15em; height: 1.15em; }
.rps-btn:hover {
    background: var(--kraft-light);
    transform: scale(1.1);
}
.rps-result {
    margin-top: 1rem;
    font-family: 'Courier Prime', monospace;
    min-height: 1.5rem;
}
/* TOSSER Styles */
.tosser-game {
    text-align: center;
}
.tosser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--black);
    color: var(--ink-on-dark);
    border: 2px solid var(--black);
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

.hole-info {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    display: flex;
    gap: 1.5rem;
}
.hole-par {
    color: var(--red);
}
.stroke-info {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
}
.course-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 1rem 0;
    padding: 1rem;
    background: #2d4a2d;
    border: 3px solid var(--black);
}
.course-card {
    background: #3a5a3a;
    border: 2px solid #2d4a2d;
    padding: 0.5rem;
    border-radius: 4px;
}
.course-card-tee {
    background: #5a4a3a;
}
.course-card-green {
    background: #1a4a1a;
}
.card-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-bottom: 0.25rem;
}
.card-spaces {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}
.course-space {
    width: 32px;
    height: 32px;
    background: #4a7a4a;
    border: 1px solid #3a5a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    position: relative;
}
.course-card-tee .course-space {
    background: #6a5a4a;
}
.course-card-green .course-space {
    background: #2a6a2a;
}
.course-space.water {
    background: #1e90ff;
    color: white;
    position: relative;
}
.course-space.water::after {
    content: '💧';
    position: absolute;
    font-size: 0.8rem;
    top: -2px;
    right: -2px;
}
.course-space.hole {
    background: #1a5a1a;
    color: white;
    position: relative;
}
.course-space.hole::after {
    content: '⛳';
    position: absolute;
    font-size: 0.8rem;
    top: -2px;
    right: -2px;
}
.course-space.trees {
    background: #2d5a2d;
    color: white;
    position: relative;
}
.course-space.trees::after {
    content: '🌲';
    position: absolute;
    font-size: 0.8rem;
    top: -2px;
    right: -2px;
}
.course-space.disc {
    position: relative;
}
.course-space.disc::after {
    content: '⚪';
    font-size: 1.2rem;
    position: absolute;
    z-index: 10;
}
.tosser-status {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1rem 0;
    font-family: 'Special Elite', cursive;
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

.wind-display {
    padding: 0.5rem 1rem;
    background: var(--kraft-light);
    border: 2px solid var(--black);
}
.wind-display span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--red);
}
.disc-position span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
}
.disc-selection {
    margin: 1.5rem 0;
}
.disc-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.disc-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--kraft-light);
    border: 2px solid var(--black);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
}
.disc-btn:hover {
    background: var(--white);
    transform: translateY(-2px);
}
.disc-btn.selected {
    background: var(--red);
    color: var(--ink-inverse);
    border-color: var(--red-dark);
}
.disc-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.disc-btn .die-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
}
.disc-btn .disc-name {
    font-family: 'Special Elite', cursive;
    font-size: 0.65rem;
    text-transform: uppercase;
}
.tosser-result {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--kraft-light);
    border-left: 4px solid var(--red);
    font-family: 'Courier Prime', monospace;
    text-align: left;
}
.tosser-result .roll-detail {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--red);
    text-align: center;
    margin-bottom: 0.5rem;
}
.tosser-scorecard {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--white);
    border: 2px solid var(--black);
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

.scorecard-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.scorecard-hole {
    width: 40px;
    padding: 0.25rem;
    background: var(--kraft-light);
    border: 1px solid var(--black);
    text-align: center;
}
.scorecard-hole .hole-number {
    font-family: 'Special Elite', cursive;
    font-size: 0.6rem;
}
.scorecard-hole .hole-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
}
.scorecard-hole .hole-score.under {
    color: green;
}
.scorecard-hole .hole-score.over {
    color: var(--red);
}
.total-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    margin-top: 0.5rem;
}
.total-score span {
    color: var(--red);
}
.putting-mode .disc-btn:not([data-die="4"]) {
    opacity: 0.3;
    pointer-events: none;
}
.trees-mode .disc-btn[data-die="12"],
.trees-mode .disc-btn[data-die="20"] {
    opacity: 0.3;
    pointer-events: none;
}
.tee-mode .disc-btn[data-die="4"],
.tee-mode .disc-btn[data-die="6"],
.tee-mode .disc-btn[data-die="8"] {
    opacity: 0.3;
    pointer-events: none;
}
.d100-display {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    color: var(--red);
    margin: 1rem 0;
}
.slots-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.4rem;
    margin: 1.5rem auto;
    max-width: 580px;
}
.slot {
    width: 100%;
    aspect-ratio: 1.1;
    background: var(--white);
    border: 2px solid var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s;
}
.slot:hover:not(.filled):not(.invalid) {
    background: var(--kraft-light);
    border-color: var(--red);
}
.slot.filled {
    background: var(--red);
    color: var(--ink-inverse);
}
.slot.invalid {
    background: #ffeeee;
    border-color: var(--text-disabled);
    cursor: not-allowed;
}
.slot .slot-number {
    font-family: 'Courier Prime', monospace;
    font-size: 0.6rem;
    color: var(--text-muted-light);
}
.slot.filled .slot-number {
    color: rgba(255,255,255,0.7);
}
.slot .slot-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
}
.rf-score {
    font-family: 'Special Elite', cursive;
    font-size: 1.3rem;
    margin-top: 1rem;
}
.rf-score span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    color: var(--red);
}
/* [SDG] SITE CHROME + GAME SHELL ------------------------------------ */

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    align-items: start;
}
.team-card {
    text-align: center;
    background: var(--white);
    border: 3px solid var(--black);
    padding: 1.5rem;
    box-shadow: 6px 6px 0 var(--black);
    height: fit-content;
}
.team-card:nth-child(1) { transform: rotate(-1deg); }
.team-card:nth-child(2) { transform: rotate(1deg); }
.team-card .photo {
    width: 150px;
    height: 150px;
    border: 3px solid var(--black);
    margin: 0 auto 1rem;
    overflow: hidden;
}
.team-card .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-card h3 {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
}
.team-card .nickname {
    font-family: 'Special Elite', cursive;
    color: var(--red);
    font-size: 1rem;
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

.bio-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-top: 0.5rem;
    transition: transform 0.3s;
    color: var(--text-primary);
}
.bio-toggle:hover {
    color: var(--red);
}
.bio-toggle.open {
    transform: rotate(180deg);
}
.bio {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 1rem;
}
.bio.open {
    max-height: 300px;
    padding: 1rem;
}
.bio p {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: left;
    color: var(--text-secondary);
}
/* Section red filmstrip borders — echoes the play section's marquee frame */
#merch,
#divisions,
#team {
    border-top: 3px solid var(--red);
    padding-top: 3rem;
    margin-top: 2rem;
}
[data-theme="dark"] #merch,
[data-theme="dark"] #divisions,
[data-theme="dark"] #team {
    border-top-color: var(--ink-bright);
    box-shadow: 0 -8px 20px -10px var(--ink-dim);
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

/* Division card dropdowns */
.dc-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s ease-out;
    text-align: left;
}
.dc-detail.open {
    max-height: 400px;
    padding: 0.75rem 0 0.25rem 0;
}
.dc-detail p {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}
.dc-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-top: 0.5rem;
    transition: transform 0.3s;
    color: var(--text-primary);
}
.dc-toggle:hover { color: var(--red); }
.dc-toggle.open { transform: rotate(180deg); }
/* [SDG] SITE CHROME + GAME SHELL ------------------------------------ */

/* Merch teaser — always visible, gives the collapsed section visual weight */
.merch-teaser {
    text-align: center;
    padding: 1rem 1rem 2.5rem;
    max-width: 640px;
    margin: 0 auto;
}
.merch-teaser-icons {
    font-size: 2.4rem;
    letter-spacing: 0.4rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.merch-teaser-line {
    font-family: 'Courier Prime', monospace;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.6rem;
    opacity: 0.85;
}
.merch-teaser-cta {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.95rem;
    color: var(--red);
    opacity: 0.85;
}
[data-theme="dark"] .merch-teaser-line { color: var(--ink-dim); }
[data-theme="dark"] .merch-teaser-cta {
    color: var(--ink-bright);
    font-size: 1.1rem;
}
/* Footer */
footer {
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 3rem 2rem;
    text-align: center;
    border-top: 6px solid var(--red);
}
footer .motto {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}
footer .motto .tm {
    font-size: 0.6em;
    vertical-align: super;
}
footer .social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
footer .social-links a {
    font-family: 'Special Elite', cursive;
    color: var(--ink-on-dark);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 2px solid var(--kraft);
    transition: all 0.2s;
}
footer .social-links a:hover {
    background: var(--red);
    border-color: var(--red);
}
footer .copyright {
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: var(--text-muted-light);
}
footer .parent {
    font-family: 'Special Elite', cursive;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    color: var(--text-muted);
}
footer .parent a {
    color: var(--red);
    text-decoration: none;
}
/* [SDG] MEDIA QUERIES ----------------------------------------------- */

/* Mobile */
@media (max-width: 768px) {
    nav ul {
        gap: 0.75rem;
    }
    nav a {
        font-size: 0.75rem;
    }
    .hero-logo {
        width: 140px;
        height: 140px;
    }
    .philosophy-box {
        padding: 1.5rem;
    }
    .philosophy-box::before,
    .philosophy-box::after {
        width: 60px;
        height: 25px;
    }
    .slots-container {
        grid-template-columns: repeat(5, 1fr);
        max-width: 300px;
    }
    .slot .slot-number {
        font-size: 0.55rem;
    }
    .slot .slot-value {
        font-size: 1rem;
    }
    .d100-display {
        font-size: 4rem;
    }
}
/* NINE LIVES Styles */
.nine-lives-game {
    text-align: center;
    position: relative;
}
.nl-stats-bar {
    display: flex;
    justify-content: space-between;
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
}
.nl-lives-display {
    color: var(--red);
}
.nl-lives-display.low {
    animation: nlPulse 0.5s ease-in-out infinite alternate;
}
@keyframes nlPulse {
    from { opacity: 1; }
    to { opacity: 0.5; }
}
/* [SDG] NINE LIVES -------------------------------------------------- */

.nl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}
.nl-pile {
    aspect-ratio: 2.5/3.5;
    background: white;
    border: 2px solid var(--black);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 2px 2px 0 var(--black);
}
.nl-pile:hover:not(.dead):not(.selected) {
    transform: translateY(-1px);
    box-shadow: 3px 3px 0 var(--black);
}
.nl-pile.selected {
    border-color: var(--gold);
    box-shadow: 0 0 10px #d4af37;
    transform: scale(1.03);
}
.nl-pile.dead {
    background: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}
.nl-pile.dead .nl-card-value {
    color: var(--text-muted-lighter);
}
.nl-pile.empty {
    background: var(--kraft-light);
    border-style: dashed;
}
.nl-pile-number {
    position: absolute;
    top: 2px;
    left: 4px;
    font-family: 'Courier Prime', monospace;
    font-size: 0.6rem;
    color: var(--text-muted-lighter);
}
.nl-pile-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-family: 'Courier Prime', monospace;
    font-size: 0.55rem;
    color: var(--text-muted-lighter);
}
.nl-card-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    line-height: 1;
}
.nl-card-value.rock { color: var(--info); }
.nl-card-value.scissors { color: var(--red); }
.nl-card-value.void { color: var(--text-primary); }
.nl-card-value.paper { color: var(--gold); }
.nl-card-suit {
    font-size: 1rem;
    margin-top: 0.1rem;
}
.nl-card-suit.rock { color: var(--info); }
.nl-card-suit.scissors { color: var(--red); }
.nl-card-suit.void { color: var(--text-primary); }
.nl-card-suit.paper { color: var(--gold); }
.nl-dice-area {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.nl-die {
    width: 44px;
    height: 44px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    box-shadow: 2px 2px 0 var(--black);
}
.nl-die.d10 {
    background: var(--red);
    color: white;
}
.nl-die.d6 {
    background: #2d5a27;
    color: white;
}
.nl-die.rolling {
    animation: nlRoll 0.1s ease-in-out infinite;
}
@keyframes nlRoll {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}
.nl-die.wild {
    background: #d4af37;
    color: var(--text-primary);
}
.nl-narrator {
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 0.6rem 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    min-height: 2.5rem;
}
.nl-controls {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
}
.nl-controls .btn {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}
.nl-controls .btn.over {
    background: #2d5a27;
    color: white;
}
.nl-controls .btn.under {
    background: #2980b9;
    color: white;
}
/* [SDG] NINE LIVES -------------------------------------------------- */

.nl-current-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 70px;
    height: 98px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 4px 4px 0 var(--black);
}
.nl-current-card.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.nl-current-card .nl-card-value {
    font-size: 1.8rem;
}
.nl-current-card .nl-card-suit {
    font-size: 1.3rem;
}
.nl-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 6px;
}
.nl-overlay.show {
    display: flex;
}
.nl-overlay-content {
    text-align: center;
    color: var(--ink-on-dark);
    padding: 1.5rem;
}
.nl-overlay h3 {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}
.nl-overlay h3.win {
    color: var(--gold);
}
.nl-overlay h3.lose {
    color: var(--red);
}
.nl-overlay p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
/* [SDG] MEDIA QUERIES ----------------------------------------------- */

/* Nine Lives mobile responsive */
@media (max-width: 480px) {
    .nl-grid {
        max-width: 200px;
        gap: 0.25rem;
    }
    .nl-pile {
        border-width: 2px;
        box-shadow: 1px 1px 0 var(--black);
    }
    .nl-card-value {
        font-size: 1.3rem;
    }
    .nl-card-suit {
        font-size: 0.85rem;
    }
    .nl-pile-number {
        font-size: 0.5rem;
    }
    .nl-pile-count {
        font-size: 0.45rem;
    }
    .nl-die {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }
    .nl-narrator {
        font-size: 0.8rem;
        padding: 0.5rem;
    }
    .nl-stats-bar {
        font-size: 0.85rem;
        padding: 0.4rem 0.5rem;
    }
    .nl-controls .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

/* SHOOTOUT STYLES */
.shootout-game {
    max-width: 500px;
    margin: 0 auto;
}
.shootout-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1rem;
    margin-top: 1rem;
}
.shootout-scoreboard {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.shootout-player {
    text-align: center;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--black);
    background: white;
}
.shootout-player.you {
    border-color: var(--success-light);
}
.shootout-player.opp {
    border-color: var(--error-lighter);
}
.shootout-player-name {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    font-size: 0.9rem;
}
.shootout-player.you .shootout-player-name { color: var(--success); }
.shootout-player.opp .shootout-player-name { color: var(--error-light); }
.shootout-player-score {
    font-family: 'Permanent Marker', cursive;
    font-size: 2.5rem;
    line-height: 1;
}
.shootout-grid {
    display: grid;
    grid-template-columns: auto repeat(5, 1fr);
    gap: 2px;
    background: var(--black);
    border: 2px solid var(--black);
    margin-bottom: 1rem;
    font-family: 'Bebas Neue', sans-serif;
}
.shootout-grid-header {
    background: var(--kraft);
    padding: 0.25rem 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.shootout-grid-label {
    background: var(--kraft);
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}
.shootout-grid-label.you { color: var(--success); }
.shootout-grid-label.opp { color: var(--error-light); }
.shootout-grid-cell {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    min-height: 36px;
}
.shootout-grid-cell .goal {
    width: 24px;
    height: 24px;
    background: var(--black);
    border-radius: 50%;
}
.shootout-grid-cell .miss {
    font-size: 1.2rem;
    color: var(--text-primary);
    font-weight: bold;
}
.shootout-grid-cell .pending {
    width: 24px;
    height: 24px;
    border: 2px dashed #ccc;
    border-radius: 50%;
}
.shootout-grid-cell.current {
    background: var(--warning-bg);
}
.shootout-vs {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.2rem;
    color: var(--red);
}
.shootout-status {
    display: flex;
    justify-content: space-between;
    background: var(--black);
    color: white;
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.shootout-field {
    position: relative;
    height: 150px;
    background: var(--success);
    border: 3px solid var(--black);
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.shootout-goal {
    position: absolute;
    top: 10px;
    width: 70%;
    height: 80px;
    display: flex;
}
.goal-post {
    width: 8px;
    height: 100%;
    background: white;
    border: 2px solid #ccc;
}
.goal-net {
    flex: 1;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.3) 10px,
        rgba(255,255,255,0.3) 12px
    ),
    repeating-linear-gradient(
        0deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.3) 10px,
        rgba(255,255,255,0.3) 12px
    );
    background-color: rgba(0,0,0,0.2);
    border-top: 4px solid white;
}
.shootout-ball {
    position: absolute;
    bottom: 15px;
    font-size: 2rem;
    transition: all 0.5s ease-out;
}
.shootout-ball.goal-left {
    transform: translate(-80px, -60px) scale(0.8);
}
.shootout-ball.goal-right {
    transform: translate(80px, -60px) scale(0.8);
}
.shootout-ball.saved {
    transform: translateY(-30px) scale(0.6);
    opacity: 0.5;
}
.shootout-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 1.1rem;
    padding: 1rem;
    background: var(--kraft);
    border: 2px dashed var(--black);
    margin-bottom: 1rem;
    min-height: 3rem;
}
.shootout-tokens {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}
/* [SDG] SHOOTOUT ---------------------------------------------------- */

.so-token {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid var(--black);
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
}
.so-token span {
    font-size: 0.7rem;
    letter-spacing: 1px;
}
.so-token.white {
    background: white;
    color: var(--text-primary);
}
.so-token.black {
    background: var(--black);
    color: white;
}
.so-token:hover {
    transform: scale(1.1);
}
.so-token.selected {
    box-shadow: 0 0 0 4px var(--red);
}
.so-token:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.shootout-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.shootout-dice-roll {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0;
}
/* [SDG] SHOOTOUT ---------------------------------------------------- */

.so-die-result {
    text-align: center;
}
.so-die-result .die-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}
.so-die-result .die-value {
    font-family: 'Permanent Marker', cursive;
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    border: 3px solid var(--black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}
.so-die-result.shooter .die-value {
    border-color: var(--success-light);
    color: var(--success);
}
.so-die-result.keeper .die-value {
    border-color: var(--error-lighter);
    color: var(--error-light);
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

.shootout-shots-display {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.shot-marker {
    width: 24px;
    height: 24px;
    border: 2px solid var(--black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.shot-marker.goal {
    background: var(--success);
    color: white;
}
.shot-marker.save {
    background: var(--error-light);
    color: white;
}
.shot-marker.pending {
    background: var(--text-disabled);
}
/* CHUCKER STYLES */
.chucker-game {
    max-width: 500px;
    margin: 0 auto;
}
.chucker-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1rem;
    margin-top: 1rem;
}
.chucker-board {
    background: #1a472a;
    border: 4px solid var(--black);
    padding: 1rem;
    margin-bottom: 1rem;
}
.chucker-board-header {
    display: grid;
    gap: 2px;
    margin-bottom: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    color: white;
    text-align: center;
}
.chucker-board-row {
    display: grid;
    gap: 2px;
    align-items: center;
    margin-bottom: 4px;
}
.chucker-board.players-2 .chucker-board-header,
.chucker-board.players-2 .chucker-board-row {
    grid-template-columns: 60px 50px 60px;
}
.chucker-target-cell {
    background: #2d5a3d;
    color: var(--gold);
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    padding: 0.5rem;
    text-align: center;
    border-radius: 4px;
}
.chucker-target-cell.scoring {
    background: #4a7c59;
    box-shadow: 0 0 6px #ffd700;
}
.chucker-marks-cell {
    background: #0d2818;
    color: white;
    font-family: 'Courier Prime', monospace;
    font-size: 1.4rem;
    padding: 0.5rem;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 2px solid transparent;
}
.chucker-marks-cell.active-player {
    border-color: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.chucker-marks-cell.can-score {
    background: #1a3a2a;
}
.chucker-marks-cell.you {
    color: var(--success-light);
}
.chucker-marks-cell.opp {
    color: var(--error-lighter);
}
.chucker-marks-cell.closed {
    background: #1a472a;
}
.chucker-player-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 0.25rem;
}
.chucker-player-header.you { color: var(--success-light); }
.chucker-player-header.opp { color: var(--error-lighter); }
.chucker-score-row {
    display: grid;
    gap: 2px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 2px solid #2d5a3d;
}
.chucker-score-row.players-2 {
    grid-template-columns: 60px 50px 60px;
}
.chucker-score-cell {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    text-align: center;
    padding: 0.25rem;
}
.chucker-score-cell.you { color: var(--success-light); }
.chucker-score-cell.opp { color: var(--error-lighter); }
.chucker-score-cell.label { 
    color: var(--gold); 
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
}
.chucker-turn-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--black);
    color: white;
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chucker-current-player {
    color: var(--success-light);
}
.chucker-current-player.opp-turn {
    color: var(--error-lighter);
}
.chucker-target-display {
    color: var(--gold);
}
.chucker-darts-left {
    color: var(--info-lighter);
}
.chucker-dice-area {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.chucker-die {
    width: 60px;
    height: 60px;
    border: 3px solid var(--black);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: white;
    transition: transform 0.3s;
}
.chucker-die.hit {
    background: var(--success-bg-light);
    border-color: var(--success);
}
.chucker-die.miss {
    background: var(--error-bg-light);
    border-color: var(--error-light);
}
.chucker-die.target-die {
    background: var(--warning-bg);
    border-color: var(--warning);
    font-family: 'Permanent Marker', cursive;
}
.chucker-die.wild {
    background: linear-gradient(135deg, #fef3c7, #ddd6fe);
    border-color: var(--purple);
}
.chucker-die.used {
    opacity: 0.4;
}
.chucker-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    padding: 0.75rem;
    background: var(--kraft);
    border: 2px dashed var(--black);
    margin-bottom: 1rem;
    min-height: 2.5rem;
}
.chucker-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.chucker-wild-picker {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}
.chucker-wild-btn {
    width: 50px;
    height: 50px;
    border: 3px solid var(--black);
    border-radius: 8px;
    background: var(--warning-bg);
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.chucker-wild-btn:hover {
    background: var(--warning-bg-light);
    transform: scale(1.1);
}
.chucker-wild-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
/* ESCAPE ROUTE STYLES */
.escape-route-game {
    max-width: 500px;
    margin: 0 auto;
}
.escape-route-showcase {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1.5rem;
    margin-top: 1rem;
}
.er-board-image {
    background: white;
    border: 2px solid var(--black);
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.er-board-image img {
    max-width: 100%;
    height: auto;
}
.er-rules-card {
    background: var(--kraft);
    border: 2px dashed var(--black);
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.er-rules-card h3 {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-align: center;
}
.er-rule {
    font-family: 'Courier Prime', monospace;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
    border-left: 3px solid var(--black);
}
.er-rule:last-child {
    margin-bottom: 0;
}
.er-rule strong {
    color: var(--red);
}
.er-dice-display {
    text-align: center;
    padding: 1rem;
    background: white;
    border: 2px solid var(--black);
}
.er-custom-die {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.er-custom-die .die-face {
    width: 36px;
    height: 36px;
    border: 2px solid var(--black);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.2rem;
    background: var(--kraft-light);
}
.er-dice-display p {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}
/* BUSTED STYLES */
.busted-game {
    max-width: 550px;
    margin: 0 auto;
}
.busted-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 0.5rem;
    margin-top: 0.5rem;
}
/* [SDG] BUSTED ------------------------------------------------------ */

.bu-scoreboard {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.bu-score-card {
    background: var(--black);
    color: white;
    padding: 0.25rem 0.6rem;
    text-align: center;
    min-width: 55px;
    border-radius: 4px;
}
.bu-score-card.active {
    box-shadow: 0 0 8px currentColor;
}
.bu-score-card .name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.bu-score-card .score {
    font-family: 'Permanent Marker', cursive;
    font-size: 1rem;
}
.bu-table {
    background: #2d5a3d;
    border: 2px solid var(--black);
    padding: 0.4rem;
    margin-bottom: 0.4rem;
    min-height: 50px;
}
.bu-table-label {
    font-family: 'Bebas Neue', sans-serif;
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    letter-spacing: 2px;
}
.bu-table-dice {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    min-height: 30px;
    align-items: center;
}
.bu-table-dice .bu-die {
    background: white;
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
}
.bu-table-empty {
    color: rgba(255,255,255,0.3);
    font-family: 'Special Elite', cursive;
    font-size: 0.8rem;
}
.bu-your-hand {
    background: white;
    border: 2px solid var(--black);
    padding: 0.4rem;
    margin-bottom: 0.4rem;
}
.bu-your-hand.out {
    opacity: 0.5;
}
/* [SDG] BUSTED ------------------------------------------------------ */

.bu-your-hand-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    color: var(--success-light);
}
.bu-hand-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
    gap: 0.25rem;
    min-height: 26px;
}
.bu-hand-value {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
}
.bu-hand-dice {
    display: flex;
    gap: 3px;
    flex: 1;
    flex-wrap: wrap;
}
.bu-hand-count {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    width: 22px;
    text-align: right;
    color: var(--text-muted);
}
.bu-die {
    width: 24px;
    height: 24px;
    border: 2px solid var(--black);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 0.85rem;
    background: var(--kraft-light);
    cursor: pointer;
    transition: all 0.1s;
    user-select: none;
}
.bu-die:hover {
    background: var(--text-disabled);
}
.bu-die.selected {
    background: var(--warning-light);
    border-color: var(--warning);
    box-shadow: 0 0 4px #fbbf24;
    transform: scale(1.08);
}
.bu-die.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.bu-die.disabled:hover {
    background: var(--kraft-light);
}
.bu-opponents {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.bu-opponent-card {
    background: var(--kraft);
    border: 2px solid var(--black);
    padding: 0.2rem 0.4rem;
    flex: 1;
    min-width: 60px;
    text-align: center;
}
.bu-opponent-card.active {
    border-color: var(--warning-light);
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}
.bu-opponent-card.out {
    opacity: 0.5;
}
/* [SDG] BUSTED ------------------------------------------------------ */

.bu-opponent-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.bu-opponent-dice {
    font-family: 'Courier Prime', monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.bu-opponent-hidden {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-muted-lighter);
}
.bu-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 0.8rem;
    padding: 0.35rem;
    background: var(--kraft);
    border: 2px dashed var(--black);
    margin-bottom: 0.35rem;
}
.bu-commentary {
    background: var(--black);
    color: var(--text-disabled);
    font-family: 'Courier Prime', monospace;
    font-size: 0.6rem;
    padding: 0.3rem;
    max-height: 55px;
    overflow-y: auto;
    margin-bottom: 0.35rem;
}
.bu-commentary-line {
    margin-bottom: 0.1rem;
    padding-left: 0.3rem;
    border-left: 2px solid #444;
}
.bu-commentary-line.sweep {
    color: var(--warning-light);
    border-color: var(--warning-light);
}
.bu-commentary-line.out {
    color: var(--success-light);
    border-color: var(--success-light);
}
.bu-controls {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.bu-controls .btn {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
}
.bu-controls .btn.shake {
    animation: bu-shake 0.4s ease;
}
@keyframes bu-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); background: var(--error-lightest); }
    40% { transform: translateX(4px); background: var(--error-lightest); }
    60% { transform: translateX(-4px); background: var(--error-lightest); }
    80% { transform: translateX(4px); background: var(--error-lightest); }
}
/* [SDG] BUSTED ------------------------------------------------------ */

.bu-to-beat {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: var(--warning-light);
    margin-top: 0.25rem;
}
.bu-pass-count {
    font-family: 'Courier Prime', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.2rem;
}
.bu-round-summary {
    background: white;
    border: 3px solid var(--black);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.bu-round-summary h4 {
    font-family: 'Permanent Marker', cursive;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
}
.bu-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px dashed #ccc;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
}
.bu-summary-row:last-child {
    border-bottom: none;
}
.bu-summary-row .name {
    font-weight: bold;
}
.bu-summary-row .added {
    color: var(--error);
}
.bu-summary-row .added.zero {
    color: var(--success-dark);
}
/* [SDG] OUT --------------------------------------------------------- */

/* OUT (Over Under Tie) STYLES */
.out-game {
    max-width: 400px;
    margin: 0 auto;
}
.out-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 0.75rem;
    margin-top: 0.5rem;
}
.out-mode-toggle {
    text-align: center;
    margin-bottom: 0.5rem;
}
.out-mode-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    background: white;
    border: 2px solid var(--black);
}
.out-mode-toggle input:checked + .out-toggle-label {
    color: var(--error);
    font-weight: bold;
}
.out-turn-bar {
    text-align: center;
    margin-bottom: 0.5rem;
}
.out-turn-indicator {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 0.25rem 1rem;
    background: var(--black);
    color: var(--success-light);
}
.out-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--black);
    padding: 4px;
    margin-bottom: 0.75rem;
}
.out-cell {
    aspect-ratio: 1;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.out-cell:hover {
    background: var(--text-disabled);
}
.out-cell.selectable {
    background: var(--warning-bg);
    cursor: pointer;
}
.out-cell.selectable:hover {
    background: var(--warning-bg-light);
}
.out-cell.selected {
    background: var(--warning-light);
    box-shadow: inset 0 0 0 3px var(--black);
}
.out-cell.win {
    background: var(--success-bg-dark);
}
.out-die {
    width: 50px;
    height: 50px;
    border: 3px solid var(--black);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.8rem;
}
.out-die.p1 {
    background: var(--success-light);
    color: var(--success-darker);
}
.out-die.p2 {
    background: var(--error-lighter);
    color: var(--error-dark);
}
.out-die.placeholder {
    background: #9ca3af;
    color: var(--game-dark);
    border-style: dashed;
}
.out-die.rolling {
    animation: out-roll 0.4s ease;
}
@keyframes out-roll {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(15deg) scale(1.1); }
    50% { transform: rotate(-15deg) scale(1.1); }
    75% { transform: rotate(10deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
}
/* [SDG] OUT --------------------------------------------------------- */

.out-action-area {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 40px;
    flex-wrap: wrap;
}
.out-action-btn {
    padding: 0.4rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    border: 2px solid var(--black);
    cursor: pointer;
    transition: all 0.15s;
}
.out-action-btn.cancel {
    background: var(--text-disabled);
    padding: 0.4rem 0.6rem;
}
.out-action-btn.cancel:hover {
    background: var(--text-disabled);
}
.out-action-btn.over {
    background: var(--info-lighter);
}
.out-action-btn.over:hover {
    background: #93c5fd;
}
.out-action-btn.under {
    background: var(--error-bg-dark);
}
.out-action-btn.under:hover {
    background: var(--error-lightest);
}
.out-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.out-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    padding: 0.5rem;
    background: var(--kraft);
    border: 2px dashed var(--black);
    margin-bottom: 0.5rem;
    min-height: 2rem;
}
.out-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
/* ===== REUSABLE GAME SHELL — mobile-first, no-scroll play surface =====
   Slots: gs-top (title/back/rules) · gs-status · gs-canvas (board) · gs-dock (actions)
   A game plugs its board into gs-canvas and its buttons into gs-dock; nothing scrolls. */
.game-shell { display: flex; flex-direction: column; position: relative; background: var(--bg-primary); color: var(--text-primary); }
@media (max-width: 700px) {
    .game-container.active .game-shell { position: fixed; inset: 0; z-index: 1200; height: 100dvh; }
}
@media (min-width: 701px) {
    .game-shell { max-width: 460px; margin: 0.5rem auto; height: min(82vh, 760px);
        border: 3px solid var(--black); box-shadow: 6px 6px 0 rgba(0,0,0,.18); }
}
.gs-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .65rem; border-bottom: 2px solid var(--black); background: var(--card-bg); }
.gs-top .gs-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 1.5px;
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-top .gs-right { display: flex; gap: .4rem; }
.gs-btn { font-family: 'Courier Prime', monospace; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
    border: 2px solid var(--black); background: transparent; color: inherit; padding: .32rem .55rem; cursor: pointer; }
.gs-btn:hover { background: var(--black); color: var(--ink-on-dark); }
/* ---- Terminal shell chrome. ----
   .gs-top and .gs-dock are painted with --card-bg, which on the CRT theme is a
   BRIGHT green block (#00cc33), not a dark one. The shared
   `[data-theme="dark"] button` rule paints every button --green-glow, so the
   shell's own buttons came out green-on-green at 1.59:1 in ALL 43 games — while
   the title sitting right beside them inherits --text-primary and reads at 8.84.
   Match the title. (Same lesson as .rfl-shell: on a --card-bg surface use
   --text-primary; it's only on the PAGE that you need --text-secondary.) */
[data-theme="dark"] .gs-top .gs-btn, [data-theme="dark"] .gs-dock .gs-btn {
    color: var(--text-primary); border-color: var(--text-primary); box-shadow: none; }
[data-theme="dark"] .gs-top .gs-btn:hover, [data-theme="dark"] .gs-dock .gs-btn:hover {
    background: var(--text-primary); color: var(--ink-bright); }
/* .gs-status sits on the page, NOT on --card-bg, so its inherited --text-primary
   (#0f0f0f) was near-black on near-black: 1.03:1, i.e. invisible. Any game that
   puts plain text in the status bar simply had no status in Terminal. Games that
   colour their own status children (RED FLAGS, Safety in Numbers) are unaffected. */
[data-theme="dark"] .gs-status { color: var(--ink-bright); }
/* Two stragglers the chrome sweep turned up, both pre-existing and both a literal
   invisibility rather than a near-miss. Riot Cube's SELECTED mode button was
   green-glow text on a green-glow fill in Terminal — contrast 1.00, so the active
   choice was the one you could not read. And D20 Roulette's chip balance is
   --warning-light gold, which sits on the kraft status bar at 1.37; it only needs
   darkening on Analog, since on the CRT it is gold on near-black and fine. */
[data-theme="dark"] .mode-btn.active { color: var(--surface-page); }
/* Scoped to .d20r-shell so it outranks the original `.d20r-balance` rule, which
   lives ~900 lines further down and would otherwise win on source order. */
.d20r-shell .d20r-balance { color: #593800; }
[data-theme="dark"] .d20r-shell .d20r-balance { color: var(--warning-light); }

/* ================= TERMINAL IN-GAME CONTRAST =================
   An audit of in-game (canvas) text found 66 pieces of EFFECTIVELY INVISIBLE
   text (<1.5:1) across 19 games in Terminal — against 2 in Analog. Four global
   candidates were measured and every one broke about as much as it fixed
   (canvas -> --text-secondary went 66 to 68), because a canvas holds BOTH
   page-background surfaces, which need bright ink, and --card-bg green
   surfaces, which need dark ink. One inherited colour cannot serve both, so
   these are scoped per game, per surface.
   The recurring faults, in Terminal:
     #0f0f0f on #0a0a0a  = --text-primary/--black on the PAGE   -> 1.03
     #00ff41 on #00ff41  = --green-glow on a --green-glow fill  -> 1.00
     #00cc33 on #00cc33  = --green-dim on a --card-bg fill      -> 1.00
     #003300 on dark     = --success/--green-dark anywhere dark -> 1.00-1.39
     #ffffff on #00ff41  = white on a bright green fill         -> 1.37
   ---- Batch 1: text sitting on the page background. ---- */
[data-theme="dark"] .molt-shell .molt-setup,
[data-theme="dark"] .bu-shell .busted-setup,
[data-theme="dark"] .nz-shell .nz-bomb-area,
[data-theme="dark"] .so-shell .shootout-grid,
[data-theme="dark"] .bb-shell .bb-option-group,
[data-theme="dark"] .bb-shell .bb-player-config,
[data-theme="dark"] .dw-shell .dw-setup,
[data-theme="dark"] .ss-shell #ss-setup,
[data-theme="dark"] .horde-shell #horde-setup { color: var(--text-secondary); }
/* Dead Weight's selected player button is the inverse case — a #0f0f0f fill
   with #0a0a0a ink, so it needs brightening rather than darkening. */
[data-theme="dark"] .dw-shell .dw-player-btn.active { color: var(--ink-bright); }
/* MOLT declares --text-primary on these explicitly, so inheriting from the
   container above cannot reach them. Its <select> is the same colour on a
   --bg-primary fill, i.e. an unreadable dropdown. */
[data-theme="dark"] .molt-shell .molt-setup h3,
[data-theme="dark"] .molt-shell .molt-setup-row label,
[data-theme="dark"] .molt-shell .molt-setup select { color: var(--text-secondary); }
/* Shootout's YOU/OPP labels sit on their own --kraft chip and use --success /
   --error-light: that is 1.01 on kraft in ANALOG (the worse theme for once) and
   #003300 on near-black in Terminal. Give the chip real ink in both. */
.so-shell .shootout-grid-label.you { color: #145226; }
.so-shell .shootout-grid-label.opp { color: #8a1a1a; }
[data-theme="dark"] .so-shell .shootout-grid-label.you { color: var(--ink-bright); }
[data-theme="dark"] .so-shell .shootout-grid-label.opp { color: #ff6b6b; }

/* ---- Batch 2. ----
   First, a GLOBAL one this batch uncovered: `[data-theme="dark"]
   button:disabled` inks text with --green-dark, and `.btn-primary` in Terminal
   is FILLED with --green-dark. So every disabled primary button in the app had
   a label the exact colour of its own background — Tosser's THROW, Seven Up
   Down's ROLL DICE, Dice Baccarat's DEAL. Disabled should read as inert, not
   erased; the 0.4 opacity already does the dimming. */
[data-theme="dark"] .btn:disabled, [data-theme="dark"] button:disabled { color: var(--ink-bright); }
/* Then the same page-background fault as batch 1. */
[data-theme="dark"] .rf-shell .rf-score,
[data-theme="dark"] .tosser-shell .tosser-status,
[data-theme="dark"] .tosser-shell .disc-selection,
[data-theme="dark"] .hp-shell .hp-message,
[data-theme="dark"] .bump-shell .bump-message,
[data-theme="dark"] .sud-shell .sud-bank,
[data-theme="dark"] .sud-shell .sud-bet-controls,
[data-theme="dark"] .sud-shell .sud-total { color: var(--text-secondary); }
/* --success is #003300 in Terminal: dark green on the dark page. */
[data-theme="dark"] .sud-shell .sud-bank-amount,
[data-theme="dark"] .sud-shell .sud-message,
[data-theme="dark"] .sud-shell .sud-chip.active { color: var(--ink-bright); }
/* Ink ON a bright --green-glow fill has to go dark, not brighter. --white is
   #00ff41 in Terminal, so anything filled with it becomes a green block: Rank &
   File's slots, Hodgepodge's card backs, Tosser's wind readout. */
[data-theme="dark"] .rf-shell .slot .slot-number,
[data-theme="dark"] .hp-shell .hp-card.back,
[data-theme="dark"] .tosser-shell .wind-display,
[data-theme="dark"] .tosser-shell .total-score span { color: var(--text-primary); }
/* Seven Up Down's bank is --success, which is a mid green on kraft: 1.25 in
   ANALOG. Terminal is handled above and out-specifies this. */
.sud-shell .sud-bank-amount { color: #145226; }

/* ---- Batch 3: the four games where the BOARD itself was unreadable. ----
   These are panels FILLED with green — --white and --card-bg are both greens in
   Terminal — so the ink has to go DARK. That is the opposite correction to
   batches 1 and 2, in the same canvas, which is the whole reason this could not
   be one global rule. Buttons are listed individually: they carry their own
   `[data-theme="dark"] button` colour, and a directly-matching rule always
   beats an inherited one, so a container rule cannot reach them. */
[data-theme="dark"] .riot-shell .player-chip.current .name,
[data-theme="dark"] .riot-shell .player-chip.current .tokens,
[data-theme="dark"] .nl-shell .nl-pile,
[data-theme="dark"] .nl-shell .nl-pile .nl-pile-number,
[data-theme="dark"] .nl-shell .nl-pile .nl-pile-count,
[data-theme="dark"] .ce-shell .ce-setup,
[data-theme="dark"] .ce-shell .ce-setup .ce-start-btn,
[data-theme="dark"] .ce-shell .ce-irl-mode,
[data-theme="dark"] .ce-shell .ce-irl-mode .btn,
[data-theme="dark"] .iz-shell .iz-deck-tabs .iz-tab,
[data-theme="dark"] .iz-shell .iz-card .iz-card-meta,
[data-theme="dark"] .iz-shell .iz-card-nav .btn,
[data-theme="dark"] .iz-shell .iz-irl-mode,
[data-theme="dark"] .iz-shell .iz-irl-deck .iz-irl-deck-label,
[data-theme="dark"] .iz-shell .iz-irl-deck .iz-irl-deck-count,
[data-theme="dark"] .iz-shell .iz-irl-deck .btn,
[data-theme="dark"] .iz-shell .iz-irl-mode > .btn { color: var(--text-primary); }
/* Riot Cube's CPU chips are the inverse: near-black ink on a --green-dark fill. */
[data-theme="dark"] .riot-shell .player-chip.cpu .name,
[data-theme="dark"] .riot-shell .player-chip.cpu .tokens { color: var(--ink-bright); }
/* Impact Zone's download blurb sits on the page, not on a panel. */
[data-theme="dark"] .iz-shell .iz-download { color: var(--text-secondary); }
/* Keep ACTION/IMPACT distinguishable rather than flattening both to black. */
[data-theme="dark"] .iz-shell .iz-irl-impact-deck .iz-irl-deck-label { color: var(--error-light); }
/* These declare their own colour, so the container rules above cannot reach them. */
[data-theme="dark"] .ce-shell .ce-setup h3,
[data-theme="dark"] .ce-shell .ce-irl-mode .ce-irl-subtitle,
[data-theme="dark"] .ce-shell .ce-irl-mode .ce-irl-deck-counts,
[data-theme="dark"] .ce-shell .ce-irl-mode .ce-irl-deck-counts span,
[data-theme="dark"] .iz-shell .iz-irl-mode .iz-irl-subtitle { color: var(--text-primary); }
/* [SDG] LIGHTS OUT: SITE CHROME + GAME SHELL ------------------------ */

/* And these sit INSIDE a green panel but carry their own DARK fill, so they need
   bright ink while everything around them needs dark: .btn-primary is filled
   --green-dark, and Impact Zone's SELECTED tab is filled --black while the
   unselected ones are transparent over the green. */
[data-theme="dark"] .ce-shell .ce-irl-mode .btn-primary,
[data-theme="dark"] .iz-shell .iz-deck-tabs .iz-tab.active { color: var(--ink-bright); }

/* ---- Batch 4: the remainder, all one shape — ink on a coloured fill. ----
   Setup pickers and chips whose fill is --green-dim, --green-glow, white or red,
   carrying ink that is another shade of the same. Terminal only; the Analog
   versions of these sit on kraft and read fine. */
/* `:not(.active)` matters — the SELECTED count button is filled --black and
   already has white ink; only the unselected ones sit transparent on the green
   panel. Darkening both erased the selected one. Same active/inactive split as
   Impact Zone's tabs. */
/* Lights Out: these sit transparent on a panel that is now DARK, so the
   correction inverts — they need bright ink, not dark. They ride
   --text-primary ("ink on a card") rather than a literal tone so a
   future palette change carries them along. */
[data-theme="dark"] .cull-shell .cull-count-btn:not(.active),
[data-theme="dark"] .cull-shell .cull-type-btn.human,
[data-theme="dark"] .cull-shell .cull-type-btn.cpu,
[data-theme="dark"] .whittle-shell .whittle-count-btn:not(.active),
[data-theme="dark"] .whittle-shell .whittle-type-btn.human,
[data-theme="dark"] .whittle-shell .whittle-type-btn.cpu,
[data-theme="dark"] .ck-shell .chucker-setup .btn,
[data-theme="dark"] .dd-shell .dd-count-btn.active,
[data-theme="dark"] .rsvp-shell .rsvp-player .card-count,
[data-theme="dark"] .om-shell .om-mini-cell.placeholder { color: var(--text-primary); }
/* The one genuine exception: this button keeps a RED fill, and dark ink
   on it measures 5.2:1 where bright ink would only manage 3.0. */
[data-theme="dark"] .d20r-shell .d20r-even-btn.red { color: var(--surface-page); }

/* ---- Controls that carry their OWN coloured fill. ----
   These are the mirror of the rules above: the surface under them is a
   saturated green/amber/red set by the game, not the dark panel, so the
   correction runs the other way and they keep DARK ink. Bright ink on
   these measured 1.4-2.2:1 — the type-buttons in particular were white
   on green. Grouped here rather than left in the transparent-on-panel
   rule they used to share, which is what made them flip by mistake. */
[data-theme="dark"] .cull-shell .cull-type-btn.human,
[data-theme="dark"] .cull-shell .cull-type-btn.cpu,
[data-theme="dark"] .whittle-shell .whittle-type-btn.human,
[data-theme="dark"] .whittle-shell .whittle-type-btn.cpu,
[data-theme="dark"] .dd-shell .dd-count-btn.active,
[data-theme="dark"] .deca-shell .deca-irl-day-btn.active,
[data-theme="dark"] .so-shell .shootout-ball,
[data-theme="dark"] .rfl-shell .rfl-odelta.gain {
    color: var(--surface-page);
}
/* OUTmaneuver's turn indicator, now that JS sets a class instead of a hex. */
.om-shell .om-turn-indicator.is-you { color: var(--success-dark); }
.om-shell .om-turn-indicator.is-cpu { color: var(--error); }
[data-theme="dark"] .om-shell .om-turn-indicator.is-you { color: var(--text-primary); }
[data-theme="dark"] .om-shell .om-turn-indicator.is-cpu { color: var(--error-light); }
/* [SDG] LIGHTS OUT: SEVERAL GAMES (DOUBLE CROSS, WIND IT UP, R.A.M., …) --- */


/* ---- Batch 5: PLAYING states. ----
   Batches 1-4 were verified against whatever state a game lands in after
   switchGame, which for many is the SETUP screen. Driving each game past setup
   and pressing its primary action found 58 more invisible items across 18 games
   — boards, scoreboards and messages that only exist mid-game. Same five faults.
   BRIGHT ink: dark-on-dark, i.e. --text-primary/--black/--success on the page. */
[data-theme="dark"] .dx-shell .dx-message,
[data-theme="dark"] .dx-shell .dx-pile-label,
[data-theme="dark"] .dx-shell .dx-pool-label,
[data-theme="dark"] .dx-shell .dx-discard-label,
[data-theme="dark"] .dx-shell .dx-pile,
[data-theme="dark"] .wu-shell .wu-message,
[data-theme="dark"] .wu-shell .wu-deck-label,
[data-theme="dark"] .wu-shell .wu-deck,
[data-theme="dark"] .ram-shell .ram-message,
[data-theme="dark"] .ram-shell .ram-die-label,
[data-theme="dark"] .ram-shell .ram-collection,
[data-theme="dark"] .echo-shell .echo-message,
[data-theme="dark"] .echo-shell .echo-sequence-label,
[data-theme="dark"] .bin-shell .bin-message,
[data-theme="dark"] .bin-shell .bin-coin-label,
[data-theme="dark"] .bin-shell .bin-streak-counter,
[data-theme="dark"] .bin-shell .bin-streak,
[data-theme="dark"] .bb-shell .bb-phase,
[data-theme="dark"] .bb-shell .bb-message,
[data-theme="dark"] .dw-shell .dw-call-label,
[data-theme="dark"] .dw-shell .dw-call-die,
[data-theme="dark"] .dw-shell .dw-message,
[data-theme="dark"] .dw-shell .dw-zone,
[data-theme="dark"] .ss-shell .ss-call-label,
[data-theme="dark"] .ce-shell .ce-player,
[data-theme="dark"] .ce-shell .ce-message,
[data-theme="dark"] .hp-shell .hp-player-name,
[data-theme="dark"] .hp-shell .hp-player-tokens,
[data-theme="dark"] .nz-shell .nz-player-lives { color: var(--text-secondary); }
/* DARK ink: the same games' green- and white-filled surfaces. */
[data-theme="dark"] .rfl-shell .rfl-flipper,
[data-theme="dark"] .sin-shell .sin-hint,
[data-theme="dark"] .riot-shell .player-chip.human .name,
[data-theme="dark"] .riot-shell .player-chip.human .tokens,
[data-theme="dark"] .nl-shell .nl-card-value,
[data-theme="dark"] .nl-shell .nl-card-suit,
[data-theme="dark"] .nl-shell .nl-die,
[data-theme="dark"] .cull-shell .cull-round-indicator,
[data-theme="dark"] .whittle-shell .whittle-player-tokens,
[data-theme="dark"] .bb-shell .bb-stat-health,
[data-theme="dark"] .bb-shell .bb-defense,
[data-theme="dark"] .ce-shell .ce-target-value,
[data-theme="dark"] .ce-shell .ce-dice-btn,
[data-theme="dark"] .ce-shell .ce-dice-picker h4,
[data-theme="dark"] .hp-shell .hp-card,
[data-theme="dark"] .hp-shell .hp-player-card,
[data-theme="dark"] .bump-shell .you-label,
[data-theme="dark"] .bump-shell h4 { color: var(--text-primary); }
/* Second pass on the playing states, against measured selector paths rather than
   guessed class names. */
[data-theme="dark"] .dx-shell .dx-pile-row,
[data-theme="dark"] .wu-shell .wu-current-card,
[data-theme="dark"] .ram-shell .ram-collected,
[data-theme="dark"] .bin-shell .bin-collected,
[data-theme="dark"] .dw-shell .dw-pool-section.dw-center .dw-pool-label,
[data-theme="dark"] .dw-shell .dw-pool-section.dw-center .dw-pool-label .count,
[data-theme="dark"] .ce-shell .ce-score-card .name,
[data-theme="dark"] .ce-shell .ce-score-card .wins,
[data-theme="dark"] .ss-shell .ss-die.set-aside { color: var(--text-secondary); }
[data-theme="dark"] .ss-shell .ss-die.matched,
[data-theme="dark"] .ce-shell .ce-dice-selection h4,
[data-theme="dark"] .bump-shell .bump-bf-scorer-col h4 { color: var(--text-primary); }
/* The active/inactive trap for the third time: Close Enough's SELECTED dice
   button is filled --black, so the blanket dark rule in batch 3 erased it. */
[data-theme="dark"] .ce-shell .ce-dice-btn.selected,
[data-theme="dark"] .ce-shell .ce-dice-btn.ce-selected { color: var(--ink-bright); }
/* Analog: Bomb Bomb's player names are --success-light / --error-light on kraft
   (1.20 and 1.32), and Nine Lives' card faces are gold on a white card (1.40).
   Base rules, so the Terminal overrides above still win there. */
.nl-shell .nl-card-value, .nl-shell .nl-card-suit { color: #8a6d00; }
/* Binary's target word, now that JS emits a class. The two stay distinguishable
   on the CRT theme rather than both collapsing to green. */
.bin-shell .bin-target-word { text-transform: uppercase; }
.bin-shell .bin-target-word.bin-red { color: #8a1020; }
.bin-shell .bin-target-word.bin-black { color: #000; }
[data-theme="dark"] .bin-shell .bin-target-word.bin-red { color: #ff6b6b; }
[data-theme="dark"] .bin-shell .bin-target-word.bin-black { color: var(--ink-dim); }
/* Dead Weight's OTHER pools are --card-bg, a green block in Terminal, so their
   labels need the opposite ink to the centre pool's. */
[data-theme="dark"] .dw-shell .dw-pool-section:not(.dw-center) .dw-pool-label,
[data-theme="dark"] .dw-shell .dw-pool-section:not(.dw-center) .dw-pool-label .count { color: var(--text-primary); }
/* Bomb Bomb's player palette, now that JS emits an index class. Dark enough for
   kraft; Terminal keeps the original light palette, which suits its dark card. */
.nz-shell .nz-player-name.nz-p0 { color: #0e4a20; }
.nz-shell .nz-player-name.nz-p1 { color: #7a1414; }
.nz-shell .nz-player-name.nz-p2 { color: #123a6b; }
.nz-shell .nz-player-name.nz-p3 { color: #6b4a00; }
[data-theme="dark"] .nz-shell .nz-player-name.nz-p0 { color: #4ade80; }
[data-theme="dark"] .nz-shell .nz-player-name.nz-p1 { color: #f87171; }
[data-theme="dark"] .nz-shell .nz-player-name.nz-p2 { color: #60a5fa; }
[data-theme="dark"] .nz-shell .nz-player-name.nz-p3 { color: #fbbf24; }
.gs-status { flex: 0 0 auto; text-align: center; padding: .5rem .7rem; border-bottom: 2px dashed var(--black); }
.gs-canvas { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 12px; overflow: hidden; container-type: size; }
.gs-dock { flex: 0 0 auto; min-height: 92px; display: flex; flex-direction: column; justify-content: center; gap: .5rem;
    padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 2px solid var(--black); background: var(--card-bg); }
.gs-sheet { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end;
    background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .18s; }
.gs-sheet.on { opacity: 1; pointer-events: auto; }
.gs-sheet-inner { width: 100%; max-height: 82%; overflow: auto; background: var(--kraft-light);
    border-top: 3px solid var(--black); padding: 1rem 1.1rem 1.3rem; transform: translateY(100%); transition: transform .2s; }
.gs-sheet.on .gs-sheet-inner { transform: translateY(0); }
.gs-sheet-h { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 1px; margin: .3rem 0 .4rem; }
.gs-sheet-inner p { font-family: 'Special Elite', cursive; font-size: .82rem; margin: .3rem 0; }
@media (prefers-reduced-motion: reduce) { .gs-sheet, .gs-sheet-inner { transition: none; } }
/* ---- "Play It For Real" kit links. Filled by sdgFillKitCtas(). ----
   Ink comes from --text-primary because this sits on a --kraft-light
   sheet, which is a light card in Analog and a dark panel in Lights Out;
   the token flips, a literal tone would not. */
.gs-kit { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0 .2rem !important; }
.gs-kit-lead { flex: 1 0 100%; font-family: 'Special Elite', cursive;
    font-size: .76rem; color: var(--text-primary); opacity: .85; margin-bottom: .15rem; }
/* Descendant-scoped on purpose: `[data-theme="dark"] a` is (0,1,1) and
   out-specifies a bare .gs-kit-a (0,1,0), which repainted the buy button
   accent-red ON its accent-red fill — 1.00:1. `.gs-kit .gs-kit-a` is
   (0,2,0) and wins. Same trap the Terminal audit hit repeatedly. */
.gs-kit .gs-kit-a { font-family: 'Bebas Neue', sans-serif; font-size: .82rem; letter-spacing: .6px;
    text-decoration: none; color: var(--text-primary); border: 2px solid var(--text-primary);
    padding: .34rem .6rem; min-height: 34px; display: inline-flex; align-items: center; }
.gs-kit .gs-kit-a:hover { background: var(--text-primary); color: var(--kraft-light); }
/* The paid path is the loud one, but it is still only one of four. */
.gs-kit .gs-kit-buy { flex: 1 0 100%; justify-content: center; background: var(--accent);
    color: var(--btn-text); border-color: var(--accent); font-size: .9rem; min-height: 40px; }
.gs-kit .gs-kit-buy:hover { background: transparent; color: var(--accent); }
/* Lights Out lifts the accent to #e35d4f so it reads on a dark page,
   which makes it too light for white ink: dark ink scores 5.2:1 where
   --btn-text managed only 3.0. Analog's deeper #b91c1c is the reverse. */
[data-theme="dark"] .gs-kit .gs-kit-buy { color: var(--surface-page); }
[data-theme="dark"] .gs-kit .gs-kit-buy:hover { color: var(--accent); }
/* Two-up on narrow screens, but the buy button keeps its own full-width
   row — :not() so the media query cannot pull it into the grid. */
@media (max-width: 480px) {
    .gs-kit .gs-kit-a:not(.gs-kit-buy) { flex: 1 0 calc(50% - .2rem); justify-content: center; }
}
/* Global pace toggle (Quick vs Learning), injected into each paced game's top bar */
.gs-pace.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.gs-pace .gs-pace-word { margin-left: .3em; }
/* On phones the toggle goes icon-only so long titles ("DOUBLE DOWN") stay on one line */
@media (max-width: 700px) { .gs-pace .gs-pace-word { display: none; } }
/* Shared CONTINUE bar shown at a learning-mode gate — slides over the dock */
.sdg-continue { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
    padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--card-bg); border-top: 3px solid var(--accent);
    opacity: 0; pointer-events: none; transition: opacity .18s; }
.sdg-continue.on { opacity: 1; pointer-events: auto; }
.sdg-continue-msg { font-family: 'Special Elite', cursive; font-size: .85rem; line-height: 1.3; text-align: center; color: var(--text-primary); }
.sdg-continue-btn { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 1.15rem;
    padding: .55rem 1rem; border: 2px solid var(--black); background: var(--accent); color: #fff; cursor: pointer; }
.sdg-continue-btn:active { transform: translate(1px,1px); }
@media (prefers-reduced-motion: reduce) { .sdg-continue { transition: none; } }
/* Top narration banner — for simultaneous games where the dock must stay free.
   Anchored to the shell just below the top bar (top offset set inline); never
   covers the bottom controls. */
.sdg-banner { position: absolute; left: 0; right: 0; z-index: 20;
    display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem;
    background: var(--card-bg); border-bottom: 3px solid var(--accent);
    box-shadow: 0 5px 14px rgba(0,0,0,.22);
    transform: translateY(-102%); transition: transform .22s ease-out; }
.sdg-banner.on { transform: translateY(0); }
.sdg-banner-icon { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
.sdg-banner-msg { flex: 1 1 auto; min-width: 0; font-family: 'Special Elite', cursive;
    font-size: .8rem; line-height: 1.25; text-align: left; color: var(--text-primary); }
.sdg-banner-btn { flex: 0 0 auto; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-size: .95rem;
    padding: .3rem .75rem; border: 2px solid var(--black); background: var(--accent); color: #fff;
    cursor: pointer; border-radius: 5px; white-space: nowrap; }
.sdg-banner-btn:active { transform: translate(1px,1px); }
@media (prefers-reduced-motion: reduce) { .sdg-banner { transition: none; } }
/* [SDG] SITE CHROME + GAME SHELL ------------------------------------ */

/* ---- End-of-game panel. Anchored to .game-shell like the other two
   shared primitives, so it never escapes the play surface. ---- */
.sdg-end { position: absolute; inset: 0; z-index: 40; display: flex;
    align-items: center; justify-content: center; padding: 1rem;
    background: rgba(0,0,0,.74); opacity: 0; transition: opacity .18s; }
.sdg-end.on { opacity: 1; }
.sdg-end-card { width: 100%; max-width: 330px; max-height: 100%; overflow: auto;
    background: var(--card-bg); border: 3px solid var(--text-primary);
    padding: 1rem .9rem; text-align: center; }
.sdg-end-h { font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; line-height: 1.05;
    letter-spacing: 1px; color: var(--text-primary); margin-bottom: .15rem; }
.sdg-end-sub { font-family: 'Special Elite', cursive; font-size: .8rem;
    color: var(--text-secondary); margin-bottom: .8rem; }
/* Descendant-scoped (0,2,0): a bare class (0,1,0) loses to
   `[data-theme="dark"] button` (0,1,1), which stripped the fill off
   Play again and gave the dismiss link a border it should not have. */
.sdg-end .sdg-end-again { width: 100%; min-height: 44px; font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem; letter-spacing: 1px; cursor: pointer;
    background: var(--text-primary); color: var(--card-bg);
    border: 2px solid var(--text-primary); margin-bottom: .7rem; }
.sdg-end-pitch { font-family: 'Special Elite', cursive; font-size: .74rem;
    color: var(--text-secondary); margin-bottom: .45rem; }
.sdg-end-kit { justify-content: center; }
.sdg-end .sdg-end-close { width: 100%; min-height: 34px; margin-top: .6rem; cursor: pointer;
    background: transparent; border: 0; box-shadow: none; text-decoration: underline;
    font-family: 'Courier Prime', monospace; font-size: .72rem; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .sdg-end { transition: none; } }
/* OUT tuned for the shell: board scales to the canvas, dice fill their cells */
.out-shell .out-board { width: min(95cqw, 95cqh); max-width: 440px; aspect-ratio: 1; gap: 2.5%;
    margin: 0; padding: 2.5%; container-type: size; }
.out-shell .out-cell { aspect-ratio: 1; border-radius: 2px; }
.out-shell .out-board .out-die { width: 86%; height: 86%; border-radius: 12%; font-size: 14cqmin; }
.out-shell .out-turn-indicator { font-size: 1.5rem; display: inline-block; }
.out-shell .out-message { margin: .35rem 0 0; background: transparent; border: 0; min-height: 1.3rem; padding: 0; font-size: .85rem; }
.out-shell .out-action-area { margin: 0; min-height: 0; }
.out-shell .out-controls { margin: 0; }
/* terminal-theme legibility for the shell status */
[data-theme="dark"] .out-shell .out-message { color: var(--ink-bright, #f2ede3); }
[data-theme="dark"] .out-shell .out-turn-indicator { background: rgba(242, 237, 227,.12); color: var(--ink-bright, #f2ede3); }
/* ---- Riot Cube in shell ---- */
.riot-shell .gs-canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; }
.riot-shell .dice-face { min-width: 0; width: min(82%, 300px); padding: 1rem .5rem; font-size: clamp(1.4rem, 6.5vw, 2.4rem); text-align: center; box-sizing: border-box; margin: 0; }
.riot-shell .dice-display { margin: 0; }
.riot-shell .players-display { margin: 0; }
.riot-shell .mode-btns { margin: 0 !important; }
.riot-shell #riot-roll-btn { width: 100%; }
.riot-shell .game-message { margin: 0; }
/* ---- D20 Roulette in shell ---- */
.d20r-shell .gs-canvas { align-items: stretch; justify-items: stretch; padding: 10px; gap: 8px; grid-template-rows: auto auto; }
.d20r-shell .d20r-table { width: 100%; margin: 0; }
.d20r-shell .d20r-outside { margin: 0; }
.d20r-shell .d20r-balance { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; }
.d20r-shell .d20r-message { margin: .25rem 0 0; }
.d20r-shell .gs-dock .d20r-die { align-self: center; width: 52px; height: 52px; font-size: 1.4rem; }
/* ---- RSVP in shell ---- */
.rsvp-shell .gs-canvas { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .3rem; overflow-y: auto; padding: .3rem 10px; }
.rsvp-shell .rsvp-table { margin: .15rem 0; gap: .5rem; }
.rsvp-shell .rsvp-player { min-width: 54px; padding: .3rem .25rem; font-size: .82rem; }
.rsvp-shell .rsvp-center { min-height: 0; }
.rsvp-shell .rsvp-header { margin: 0; gap: .6rem; }
.rsvp-shell .rsvp-narrator { margin: .15rem 0 0; }
.rsvp-shell .player-count-btn { width: 2rem; height: 2rem; font-size: 1rem; }
/* ---- Nine Lives + Shootout: multi-element canvases need column flex ---- */
.nl-shell .gs-canvas, .so-shell .gs-canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }
.nl-shell .nl-stats-bar, .nl-shell .nl-dice-area { margin: 0; }
.nl-shell .nl-narrator { margin: .2rem 0 0; }
.nl-shell .nl-grid { margin: 0; }
.nl-shell .nl-current-card { position: static; margin: 0; }
.so-shell .shootout-grid, .so-shell .shootout-field, .so-shell .shootout-status, .so-shell .shootout-tokens { margin: 0; }
.so-shell .shootout-message { margin: .2rem 0 0; }
/* ---- Light-shell variant: whole game-area in the canvas (for games with internal setup/play layouts) ---- */
.bu-shell .gs-canvas, .nz-shell .gs-canvas { display: flex; flex-direction: column; justify-content: flex-start; gap: .4rem; overflow-y: auto; padding: 10px; }
.bu-shell .gs-canvas { align-items: stretch; }
.nz-shell .gs-canvas { align-items: center; }
.bu-shell .busted-game-area, .nz-shell .nz-game-area { margin: 0; }
/* ---- Batch B light-shells: crab-bucket, tenny-two, dice-holdem, double-cross ---- */
.cb-shell .gs-canvas, .tt-shell .gs-canvas, .dh-shell .gs-canvas, .dx-shell .gs-canvas {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .4rem; overflow-y: auto; padding: 10px; }
.cb-shell .cb-game-area, .tt-shell .tt-game-area, .dh-shell .dh-game-area, .dx-shell .dx-area { margin: 0; }
.tt-shell .tt-game-area, .dh-shell .dh-game-area { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.cb-shell .cb-irl-divider { margin: .6rem 0 .3rem; }
/* ---- Batch C light-shells: Super OUT, dice-baccarat, double-down, wind-it-up ---- */
.om-shell .gs-canvas, .db-shell .gs-canvas, .dd-shell .gs-canvas, .wu-shell .gs-canvas {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .4rem; overflow-y: auto; padding: 10px; }
.om-shell .om-game-area, .db-shell .db-game-area, .dd-shell .dd-game-area, .wu-shell .wu-area { margin: 0; }
.db-shell .db-game-area { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
/* ---- Batch D light-shells: 7 up 7 down, R.A.M., echo, binary ---- */
.sud-shell .gs-canvas, .ram-shell .gs-canvas, .echo-shell .gs-canvas, .bin-shell .gs-canvas {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .4rem; overflow-y: auto; padding: 10px; }
.ram-shell .ram-area, .echo-shell .echo-area, .bin-shell .bin-area { margin: 0; }
.sud-shell .sud-bank { margin-top: 0; }
.sud-shell .sud-game-area { margin: 0; }
/* ---- Batch E light-shells: rank-file, tosser, hodgepodge, bump ---- */
.rf-shell .gs-canvas, .tosser-shell .gs-canvas, .hp-shell .gs-canvas, .bump-shell .gs-canvas {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .5rem; overflow-y: auto; padding: 10px; }
.hp-shell .hp-game-area, .bump-shell .bump-game-area { margin: 0; }
.rf-shell .d100-display, .tosser-shell .tosser-header { margin-top: 0; }
/* The 20 slots are the only thing you ever touch in Rank & File, and the shell
   port left them 20x18px. Cause: .slots-container carries `margin: 1.5rem auto`,
   and an auto cross-axis margin CANCELS `align-items: stretch` in a flex column —
   so the grid collapsed to min-content and every 1fr column shrank to the width
   of the little "01" label. An explicit width restores the stretch and takes the
   tap target to roughly 69x63 on a phone, well past the 44px guideline.
   Worth remembering for any other game whose board uses `margin: x auto` inside
   a gs-canvas: it will silently shrink-wrap instead of filling. */
.rf-shell .slots-container { width: 100%; max-width: 580px; margin: .4rem auto; }
/* Cells are ~3x bigger now, so the type inside them was left looking lost.
   `min-width: 0` is load-bearing, not tidying: `1fr` means `minmax(auto, 1fr)`,
   and that auto floor is the item's min-content width — which `.slot` TRANSFERS
   FROM ITS HEIGHT via `aspect-ratio: 1.1`. Enlarging the type raised the
   intrinsic height, so the floor rose to 71.4px, the five tracks refused to
   shrink, and the last column overflowed the grid by 12.5px straight off the
   screen edge. Zeroing the floor lets the tracks take their 1fr share again.
   Column-count agnostic, so it holds at the 10-column desktop breakpoint too. */
.rf-shell .slot { min-width: 0; }
.rf-shell .slot .slot-number { font-size: .68rem; }
.rf-shell .slot .slot-value { font-size: 1.7rem; }
/* ---- Board audit 2026-07-31: everything below ran off the right-hand edge of a
       390px phone, so part of a control was physically unreachable. ----
   Wind It Up, R.A.M., Echo and Binary share one setup row — <label> + a name
   <input type="text"> with `flex: 1` + a HUMAN/CPU toggle. `flex: 1` is
   `flex: 1 1 0%`, but a flex item's DEFAULT `min-width: auto` floors it at its
   intrinsic width, and a text input's intrinsic width is its ~20-character size
   attribute. So the input refused to shrink and shoved the toggle off-screen —
   by 23px on three of them and 44px on Wind It Up, i.e. most of the CPU button.
   Same family of bug as Rank & File's slots: an `auto` minimum silently winning
   against a share-the-space instruction. */
.wu-player-row input[type="text"], .ram-player-row input[type="text"],
.echo-player-row input[type="text"], .bin-player-row input[type="text"] { min-width: 0; }
/* OUTmaneuver's three player cards were sized by their content (a name plus three
   20px line-type pips) and overflowed the row by 36px, clipping the third card's
   pips. Let them shrink, and tighten the padding and gap that were tuned on
   desktop before the shell made this a 370px board. */
.tir-shell .tir-player { min-width: 0; padding-left: 6px; padding-right: 6px; }
.tir-shell .tir-players, .tir-shell .tir-players-3 { gap: .5rem; }
/* [SDG] MEDIA QUERIES ----------------------------------------------- */

/* ---- Board audit, second pass: tap targets a thumb actually misses. ----
       Scoped to the mobile breakpoint, so the desktop look is untouched. */
@media (max-width: 768px) {
    /* The shared HUMAN/CPU and option toggles sit at 19-27px tall across eight
       games — under half the 44px guideline, and they decide who plays. */
    .wu-type-btn, .ram-type-btn, .bin-type-btn, .echo-type-btn,
    .cull-type-btn, .whittle-type-btn, .bb-type-btn, .stc-type-btn,
    .bb-opt-btn, .stc-opt-btn, .echo-mode-btn { min-height: 44px; min-width: 44px; }
    /* Subject to Change's PLAYERS/MODE row is the one dense screen where the
       width floor doesn't pay: it wraps that row onto two lines and pushes the
       IRL panel 111px further down, to buy 11px of button width. Height is the
       cheap half of the win, so keep that and let the row stay on one line. */
    .stc-opt-btn { min-width: 0; }
    /* Nine Lives' nine piles were 20x28 — the shrink-wrap family a third time.
       .nl-shell's canvas CENTRES its children instead of stretching them, and
       `.nl-shell .nl-grid { margin: 0 }` removed the auto margins that used to
       centre the grid, so it shrank to fit and its `1fr` columns resolved against
       min-content. Giving it a width lets it actually stretch. The max-width goes
       up too: honouring the declared 180px alone left the nine piles as a small
       island in half a screen of dead kraft, and they ARE the game. 20x28 -> 90x127,
       which also lets them read as the cards they represent. */
    .nl-shell .nl-grid { width: 100%; max-width: 280px; }
    /* ---- Second bite: the global .btn, which is 31-40px tall on a phone across
       most of the app. Measured every candidate across all 43 games at 390x844
       and 360x740 before picking this one. A 44px floor takes games containing a
       sub-44px control from 37 to 26, and — the property that mattered — NOT ONE
       game that currently fits its screen stops fitting. Every board it grows is
       one that already scrolls by design (Crab Bucket's IRL mode, Tencathlon's
       per-event table, Tosser's scorecard, Impact Zone's card browser), and it
       adds 8-60px to those.
       Deliberately NOT extended to the per-game setup pickers: measured, that
       bought only 3 more games and pushed Subject to Change into scrolling at
       390px where it currently fits. Also deliberately not applied to <select>:
       they are 32px because that is the OS control, they are full-width so they
       are the easiest things on screen to hit, and restyling them means owning a
       dropdown's appearance in two themes forever. */
    .btn { min-height: 44px; }
}
/* Subject to Change lost its dark panel in the shell port and nobody noticed,
   because in Terminal --white IS green (#00ff41) so it still read fine there.
   `.stc-game` sets `background: var(--black); color: var(--white)`, but the port
   lifted `.stc-setup` and `.stc-game-area` OUT of `.stc-game` to sit directly in
   the canvas — so every element styled for a black panel ended up on kraft.
   Measured in Analog: `.stc-round` ("ROUND 1") and `.stc-message` ("Roll your
   dice!") both came out at contrast 1.00 — kraft on kraft, invisible — with the
   player scores and the PLAYERS/MODE buttons between 1.25 and 2.9. Restoring the
   panel to the two elements that replaced `.stc-game` fixes all of it at once and
   puts the game back in the clothes it was designed in, beside the IRL panel that
   always looked right. Padding stays tight — this board is the densest here.
   There is a second half to this. The game colours its headline text with
   `var(--kraft)` — a light tan in Analog, but #0a0a0a in Terminal, so ROUND and
   the message line were near-black on a dark surface there and had been invisible
   in Terminal since long before the port. Same trap RED FLAGS documented, so take
   the same escape hatch: game-scoped vars that opt out of the theme entirely,
   with a Terminal override that keeps the CRT green. */
.stc-shell { --stc-panel: #1a1a1a; --stc-ink: #fefefe; --stc-accent: #c9a66b;
    --stc-good: #27ae60; --stc-muted: #4a4a4a; }
/* Lights Out: the panel no longer has to dodge a green theme, so it rides
   the shared surface and the accent can go back to being kraft tan. */
[data-theme="dark"] .stc-shell { --stc-panel: var(--surface-raised); --stc-ink: var(--ink-bright);
    --stc-accent: #c9a66b; --stc-good: var(--success); --stc-muted: var(--ink-faint); }
/* Scores and stakes used var(--success), which is #003300 in Terminal — a dark
   green that vanished on the dark panel. Same inversion, same escape hatch. */
.stc-shell .stc-stakes, .stc-shell .stc-player-total span { color: var(--stc-good); }
/* The "— OR —" divider sits OUTSIDE the panel, on kraft in Analog and on near-black
   in Terminal, so a single hex breaks one or the other — darkening it for kraft
   took Terminal from 2.5 to 2.23. It needs the scoped treatment too. */
.stc-shell .stc-irl-divider { color: var(--stc-muted); }
.stc-shell .stc-setup, .stc-shell .stc-game-area {
    background: var(--stc-panel); color: var(--stc-ink);
    padding: .6rem; border-radius: 8px;
}
.stc-shell .stc-round, .stc-shell .stc-message,
.stc-shell .stc-player-score, .stc-shell .stc-option-group span { color: var(--stc-accent); }
.stc-shell .stc-opt-btn { color: var(--stc-ink); border-color: var(--stc-accent); }
.stc-shell .stc-opt-btn.active { background: var(--stc-accent); color: var(--stc-panel); }
/* ---- Batch F light-shells: chucker, tethered, subject-to-change, one-more-roll ---- */
.ck-shell .gs-canvas, .teth-shell .gs-canvas, .stc-shell .gs-canvas, .omr-shell .gs-canvas {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .5rem; overflow-y: auto; padding: 10px; }
.ck-shell .chucker-game-area, .teth-shell .teth-game-area, .omr-shell .omr-game-area { margin: 0; }
.stc-shell .stc-irl-divider { margin: .6rem 0 .3rem; }
/* ---- Batch G light-shells: three-row, cull, whittle, broadswords-beer ---- */
.tir-shell .gs-canvas, .cull-shell .gs-canvas, .whittle-shell .gs-canvas, .bb-shell .gs-canvas {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .5rem; overflow-y: auto; padding: 10px; }
.tir-shell .tir-game-area, .cull-shell .cull-game-area, .whittle-shell .whittle-game-area, .bb-shell .bb-game-area { margin: 0; }
/* pre-existing gap: these setups get a .hidden class on start but had no matching rule */
.cull-setup.hidden, .whittle-setup.hidden { display: none; }
/* ---- Batch H light-shells: dead-weight, follow-my-lead, the-horde, close-enough ---- */
.dw-shell .gs-canvas, .ss-shell .gs-canvas, .horde-shell .gs-canvas, .ce-shell .gs-canvas {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .5rem; overflow-y: auto; padding: 10px; }
.dw-shell .dw-game-area { margin: 0; }
.ce-shell .ce-header { margin: 0; }
.ce-shell .ce-irl-divider { margin: .6rem 0 .3rem; }
/* ---- Tencathlon (decathlon): one event at a time, points-table + IRL scroll below ---- */
.deca-shell .gs-canvas { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .4rem; overflow-y: auto; padding: 10px; }
.deca-shell .deca-game-area { margin: 0; padding: .6rem; }
.deca-shell .deca-header { margin-bottom: .4rem; }
.deca-shell .deca-event-name { font-size: 1.4rem; letter-spacing: 2px; }
/* compress the running-scores into a single row of chips (secondary info) */
.deca-shell .deca-scoreboard { gap: .35rem; margin-bottom: .5rem; flex-wrap: nowrap; }
.deca-shell .deca-player-card { min-width: 0; flex: 1 1 0; padding: .3rem .25rem; border-radius: 6px; }
.deca-shell .deca-player-name { font-size: .78rem; letter-spacing: .5px; }
.deca-shell .deca-player-total { font-size: 1.05rem; }
.deca-shell .deca-player-events { display: none; } /* redundant: header shows "Event X of 10" */
.deca-shell .deca-arena { margin: .3rem 0; min-height: 0; padding: .9rem .8rem; }
.deca-shell .deca-instructions { font-size: .92rem; margin-bottom: .6rem; }
.deca-shell .deca-points-table { margin-top: .3rem; }
/* ---- Impact Zone: card browser + IRL scroll below (not a played board) ---- */
.iz-shell .gs-canvas { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .5rem; overflow-y: auto; padding: 10px; }
.iz-shell .iz-demo-content { margin: 0; }
.iz-shell .iz-irl-divider { margin: .6rem 0 .3rem; }
/* ---- MOLT: suit-only card game, die-forced molting. Cards keep a fixed cream
       face + real red/black glyphs so the COLOR mechanic reads in both themes. ---- */
.molt-shell .gs-canvas { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .5rem; overflow-y: auto; padding: 10px; }
/* [SDG] MOLT -------------------------------------------------------- */

.molt-setup { text-align: center; padding: 1rem .5rem; }
.molt-setup h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; font-size: 2rem; margin: 0 0 .2rem; color: var(--text-primary); }
.molt-tagline { font-family: 'Special Elite', monospace; font-size: .85rem; color: var(--text-secondary); margin-bottom: 1rem; }
.molt-setup-row { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .7rem 0; flex-wrap: wrap; }
.molt-setup-row label { font-family: 'Special Elite', monospace; font-size: .9rem; color: var(--text-primary); }
.molt-setup select { font-family: 'Courier Prime', monospace; padding: .35rem .5rem; border: 2px solid var(--card-border); background: var(--bg-primary); color: var(--text-primary); }
/* Game length comes from the constants, so this line can never disagree with them. */
.molt-setup-note { font-family: 'Courier Prime', monospace; font-size: .78rem; color: var(--text-secondary); margin: .8rem auto 1rem; max-width: 20rem; line-height: 1.45; }
.molt-btn { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 1.15rem; padding: .6rem 1.4rem;
    background: var(--btn-bg); color: var(--btn-text); border: 3px solid var(--card-border); cursor: pointer; box-shadow: 3px 3px 0 rgba(0,0,0,.2); }
.molt-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.2); }
.molt-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.molt-scoreboard { display: flex; gap: .3rem; flex-wrap: nowrap; overflow-x: auto; }
.molt-pchip { flex: 1 1 0; min-width: 0; border: 2px solid var(--card-border); background: var(--card-bg); padding: .3rem .2rem; text-align: center; border-radius: 5px; }
.molt-pchip.active { box-shadow: 0 0 0 2px var(--accent); }
.molt-pchip .n { font-family: 'Bebas Neue', sans-serif; font-size: .8rem; letter-spacing: .5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.molt-pchip .s { font-family: 'Courier Prime', monospace; font-size: 1.15rem; font-weight: bold; color: var(--accent); }
.molt-pchip .die { font-size: .62rem; color: var(--text-secondary); height: 1em; }
/* --text-secondary reads in both themes (dark ink on kraft, green-dim on CRT);
   --text-primary would be near-black on the terminal background. */
.molt-msg { font-family: 'Special Elite', monospace; font-size: .92rem; text-align: center; color: var(--text-secondary); min-height: 1.3em; padding: .1rem; }
.molt-opps { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.molt-opp { border: 2px dashed var(--card-border); border-radius: 5px; padding: .2rem .5rem; font-family: 'Courier Prime', monospace; font-size: .75rem; color: var(--text-secondary); }
.molt-opp.open { display: inline-flex; align-items: center; gap: .22rem; padding: .2rem .4rem; }
.molt-opp-name { font-family: 'Bebas Neue', sans-serif; letter-spacing: .5px; font-size: .82rem; color: var(--text-secondary); }
.molt-omini { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 26px; background: #f4ecd8; border: 1px solid #1a1a1a; border-radius: 3px; font-size: .95rem; }
.molt-omini.red { color: #c0392b; } .molt-omini.black { color: #1a1a1a; }
.molt-hand-label { font-family: 'Special Elite', monospace; font-size: .72rem; text-align: center; color: var(--text-secondary); letter-spacing: .5px; }
.molt-hand { display: flex; gap: .45rem; justify-content: center; align-items: flex-start; }
.molt-card-slot { display: flex; flex-direction: column; align-items: center; gap: .18rem; }
.molt-card { position: relative; width: 56px; height: 80px; background: #f4ecd8; border: 2px solid #1a1a1a; border-radius: 7px;
    display: flex; align-items: center; justify-content: center; font-size: 2.3rem; box-shadow: 2px 2px 0 rgba(0,0,0,.25); transition: transform .1s; }
.molt-card.red { color: #c0392b; }
.molt-card.black { color: #1a1a1a; }
.molt-card.tappable { cursor: pointer; }
.molt-card.tappable:active { transform: translate(1px,1px); }
.molt-card.sel { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--accent), 2px 8px 0 rgba(0,0,0,.25); border-color: var(--accent); }
.molt-card-x { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: .05rem .3rem; border-radius: 8px;
    background: var(--accent); color: #fff; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-size: .6rem; line-height: 1.3;
    white-space: nowrap; box-shadow: 1px 1px 0 rgba(0,0,0,.3); }
.molt-die-row { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-top: .1rem; }
.molt-die { width: 58px; height: 58px; border: 3px solid var(--card-border); border-radius: 10px; background: var(--card-bg);
    display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 2.3rem; color: var(--accent); }
.molt-die.rolling { animation: moltShake .18s infinite; }
@keyframes moltShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px) rotate(-5deg)} 75%{transform:translateX(3px) rotate(5deg)} }
.molt-log { font-family: 'Courier Prime', monospace; font-size: .7rem; color: var(--text-secondary); border-top: 1px dashed var(--card-border); padding-top: .3rem; max-height: 84px; overflow-y: auto; }
.molt-log div { margin: .08rem 0; }
.molt-reveal { display: flex; flex-direction: column; gap: .4rem; }
.molt-reveal h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; text-align: center; font-size: 1.7rem; color: var(--accent); margin: .2rem 0; }
.molt-reveal-sub { font-family: 'Special Elite', monospace; font-size: .72rem; text-align: center; color: var(--text-secondary); letter-spacing: 1px; margin: -.15rem 0 .2rem; }
.molt-reveal-row { display: flex; align-items: center; gap: .5rem; border: 2px solid var(--card-border); border-radius: 6px; padding: .35rem .5rem; background: var(--card-bg); }
.molt-reveal-row.win { box-shadow: 0 0 0 2px var(--accent); }
.molt-reveal-name { flex: 0 0 58px; font-family: 'Bebas Neue', sans-serif; font-size: .85rem; letter-spacing: .5px; color: var(--text-primary); }
.molt-reveal-cards { display: flex; gap: .22rem; flex: 1; }
.molt-mini { width: 24px; height: 34px; background: #f4ecd8; border: 1px solid #1a1a1a; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.molt-mini.red { color: #c0392b; } .molt-mini.black { color: #1a1a1a; }
.molt-reveal-score { text-align: right; font-family: 'Courier Prime', monospace; font-size: .66rem; color: var(--text-secondary); flex: 0 0 auto; line-height: 1.15; }
.molt-reveal-score b { display: block; font-size: 1.2rem; color: var(--accent); }
/* ---- RED FLAGS: one card resolves for the whole table at once. Cards keep a
       fixed cream face + real red/black glyphs so the color mechanic reads in
       both themes; the zones borrow themed red/green vars. ---- */
/* Theme plumbing. Reading the whole table at a glance IS the game, so the chips
   and zones are the primary information surface — they get a dark CRT panel with
   bright ink in Terminal rather than the app's usual green-block-on-green card,
   which leaves score text nearly invisible. Card faces stay fixed cream/red/black
   in both themes because red-vs-black is the mechanic. */
.rfl-shell { --rfl-red: #c0392b; --rfl-green: #2e7d32;
    --rfl-surface: var(--card-bg); --rfl-ink: var(--text-primary);
    --rfl-dim: var(--text-muted); --rfl-page-ink: var(--text-primary); }
/* Lights Out: the CRT-green panel this used to need is gone; ride the
   shared surface. Loss-red / profit-green stay saturated on purpose —
   they ARE the game's accounting, not decoration. */
[data-theme="dark"] .rfl-shell { --rfl-red: #f4837a; --rfl-green: #6dd48a;
    --rfl-surface: var(--surface-raised); --rfl-ink: var(--ink-bright);
    --rfl-dim: var(--ink-dim); --rfl-page-ink: var(--ink-bright); }
.rfl-shell .gs-status { padding: .35rem .6rem; }
.rfl-shell .gs-canvas { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .45rem; overflow-y: auto; padding: 10px; }
.rfl-shell .gs-dock { min-height: 84px; gap: .35rem; }
/* [SDG] RED FLAGS --------------------------------------------------- */

/* The board fills the canvas so the played-card mess can sit on the bottom edge. */
.rfl-shell #rfl-game { flex: 1 1 auto; min-height: 0; }
.rfl-status { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.rfl-round { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 1rem; color: var(--rfl-page-ink); }
.rfl-sub { font-family: 'Courier Prime', monospace; font-size: .68rem; letter-spacing: .08em; color: var(--text-secondary); }
.rfl-dbl { font-family: 'Courier Prime', monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
    border: 2px solid var(--accent); color: var(--accent); padding: .04rem .3rem; }
.rfl-setup { text-align: center; padding: 1rem .5rem; }
.rfl-setup h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; font-size: 2rem; margin: 0 0 .2rem; color: var(--rfl-page-ink); }
.rfl-tagline { font-family: 'Special Elite', monospace; font-size: .85rem; color: var(--text-secondary); margin-bottom: 1rem; }
.rfl-setup-row { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .7rem 0; flex-wrap: wrap; }
.rfl-setup-row label { font-family: 'Special Elite', monospace; font-size: .9rem; color: var(--rfl-page-ink); }
.rfl-setup select { font-family: 'Courier Prime', monospace; padding: .35rem .5rem; border: 2px solid var(--card-border); background: var(--bg-primary); color: var(--rfl-page-ink); }
.rfl-setup-note { font-family: 'Special Elite', monospace; font-size: .76rem; line-height: 1.35; color: var(--text-secondary); margin: 1rem .3rem 0; }
.rfl-flipper { font-family: 'Courier Prime', monospace; font-size: .66rem; text-align: center; color: var(--text-secondary); min-height: 1em; }
.rfl-cardrow { display: flex; align-items: center; gap: .6rem; }
.rfl-card { flex: 0 0 auto; width: 74px; height: 104px; background: #f4ecd8; border: 2px solid #1a1a1a; border-radius: 7px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.rfl-card .v { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; line-height: .95; }
.rfl-card .s { font-size: 1.15rem; line-height: 1; }
.rfl-card.red { color: #c0392b; }
.rfl-card.black { color: #1a1a1a; }
.rfl-card.back { background: repeating-linear-gradient(45deg, #7a6349, #7a6349 5px, #8b7355 5px, #8b7355 10px);
    color: #f4ecd8; font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 1.5rem; }
[data-theme="dark"] .rfl-card.back { background: repeating-linear-gradient(45deg, #0d160d, #0d160d 5px, #14361a 5px, #14361a 10px);
    color: var(--ink-bright); border-color: var(--ink-dim); }
.rfl-card.flip { animation: rflFlipIn .26s ease-out; }
@keyframes rflFlipIn { from { transform: rotateY(84deg) scale(.92); } to { transform: none; } }
/* [SDG] RED FLAGS --------------------------------------------------- */

.rfl-verdict { flex: 1 1 0; min-width: 0; font-family: 'Special Elite', monospace; font-size: .78rem; line-height: 1.3; color: var(--text-secondary); }
.rfl-verdict b { display: block; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.5px; font-size: 1.1rem; color: var(--accent); margin-bottom: .12rem; }
/* Every opponent's live pool is on the table, face-up. One card resolves for
   everybody at once, so watching four of someone else's 6s die in the same beat
   as your own is the game — a dice COUNT can't carry that. */
.rfl-opps { display: flex; flex-direction: column; gap: .22rem; }
.rfl-orow { display: flex; align-items: center; gap: .3rem; border: 2px solid var(--card-border);
    background: var(--rfl-surface); border-radius: 5px; padding: .16rem .3rem; }
.rfl-oname { flex: 0 0 auto; min-width: 44px; max-width: 76px; font-family: 'Bebas Neue', sans-serif; font-size: .8rem;
    letter-spacing: .5px; color: var(--rfl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfl-oscore { flex: 0 0 auto; min-width: 24px; text-align: right; font-family: 'Courier Prime', monospace;
    font-size: .78rem; font-weight: bold; color: var(--accent); }
.rfl-odelta { flex: 0 0 auto; padding: .02rem .26rem; border-radius: 7px; color: #fff;
    font-family: 'Bebas Neue', sans-serif; font-size: .58rem; letter-spacing: .5px; white-space: nowrap; }
.rfl-odelta.loss { background: var(--rfl-red); }
.rfl-odelta.gain { background: var(--rfl-green); }
.rfl-odice { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.rfl-odie { width: 17px; height: 17px; border: 1px solid var(--card-border); border-radius: 3px; background: var(--bg-primary);
    display: flex; align-items: center; justify-content: center; font-family: 'Courier Prime', monospace;
    font-size: .6rem; color: var(--rfl-ink); }
.rfl-odie.hit-red { border-color: var(--rfl-red); color: var(--rfl-red); background: rgba(192,57,43,.16); }
.rfl-odie.hit-black { border-color: var(--rfl-green); color: var(--rfl-green); background: rgba(46,125,50,.16); }
.rfl-oempty { font-family: 'Courier Prime', monospace; font-size: .58rem; color: var(--rfl-dim); }
.rfl-orow.flipper .rfl-oname::after { content: ' \1F6A9'; font-size: .58rem; }
.rfl-label { font-family: 'Special Elite', monospace; font-size: .66rem; letter-spacing: .5px; text-align: center; color: var(--text-secondary); }
.rfl-pool { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; min-height: 38px; }
.rfl-die { width: 38px; height: 38px; border: 2px solid var(--card-border); border-radius: 6px; background: var(--rfl-surface);
    display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; color: var(--rfl-ink); }
.rfl-die.hit-red { border-color: var(--rfl-red); color: var(--rfl-red); animation: rflPulse .5s ease-in-out infinite; }
.rfl-die.hit-black { border-color: var(--rfl-green); color: var(--rfl-green); animation: rflPulse .5s ease-in-out infinite; }
.rfl-die.rolling { animation: rflShake .18s infinite; }
.rfl-pool-empty { font-family: 'Courier Prime', monospace; font-size: .7rem; color: var(--text-muted); align-self: center; }
@keyframes rflPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes rflShake { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(6deg); } }
/* [SDG] RED FLAGS --------------------------------------------------- */

/* Your books + the played-card mess sit on the bottom edge, near the thumb; the
   live board stays up top. Any slack collects in one gap between the two. */
.rfl-zones { display: flex; gap: .35rem; margin-top: auto; }
.rfl-zone { flex: 1 1 0; border: 2px solid var(--card-border); border-radius: 5px; padding: .22rem .1rem; text-align: center; background: var(--rfl-surface); }
.rfl-zone .zl { font-family: 'Courier Prime', monospace; font-size: .54rem; letter-spacing: .13em; text-transform: uppercase; color: var(--rfl-dim); }
.rfl-zone .zv { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; line-height: 1.1; color: var(--rfl-ink); }
.rfl-zone.loss { border-color: var(--rfl-red); } .rfl-zone.loss .zv { color: var(--rfl-red); }
.rfl-zone.profit { border-color: var(--rfl-green); } .rfl-zone.profit .zv { color: var(--rfl-green); }
.rfl-zone.tot { border-color: var(--accent); } .rfl-zone.tot .zv { color: var(--accent); }
/* The played cards are evidence, not a spreadsheet — leave them in a mess. */
.rfl-played { display: flex; gap: .22rem; flex-wrap: wrap; justify-content: center; align-items: center;
    border-top: 1px dashed var(--card-border); padding-top: .35rem; min-height: 30px; }
.rfl-mini { width: 20px; height: 28px; background: #f4ecd8; border: 1px solid #1a1a1a; border-radius: 3px;
    display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: .88rem; }
.rfl-mini:nth-child(odd) { transform: rotate(-5deg); }
.rfl-mini:nth-child(3n) { transform: rotate(6deg); }
.rfl-mini.red { color: #c0392b; } .rfl-mini.black { color: #1a1a1a; }
.rfl-gap { width: 7px; }
.rfl-final { flex-direction: column; gap: .45rem; }
.rfl-final h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; text-align: center; font-size: 1.6rem; color: var(--accent); margin: .2rem 0 0; }
.rfl-final-sub { font-family: 'Special Elite', monospace; font-size: .78rem; text-align: center; color: var(--text-secondary); }
.rfl-sheet-table { width: 100%; border-collapse: collapse; font-family: 'Courier Prime', monospace; font-size: .72rem; color: var(--rfl-page-ink); }
.rfl-sheet-table th, .rfl-sheet-table td { border: 1px solid var(--card-border); padding: .22rem .25rem; text-align: center; }
.rfl-sheet-table th { font-family: 'Bebas Neue', sans-serif; letter-spacing: .6px; font-size: .74rem; color: var(--text-secondary); font-weight: normal; }
.rfl-sheet-table td.nm { text-align: left; font-family: 'Bebas Neue', sans-serif; letter-spacing: .5px; font-size: .82rem; }
.rfl-sheet-table td.fin { font-weight: bold; color: var(--accent); }
.rfl-sheet-table tr.win td { background: rgba(192,57,43,.1); }
/* ---- SAFETY IN NUMBERS: everybody throws their whole RPG set at once and the
       table stacks by NUMBER. A die pays its number times the height of the stack
       it landed in; a die alone pays nothing. Up to 36 dice are on the table at
       once, so the board is one compact row per occupied number — never anything
       die-shaped, there isn't room.
       COLOUR IS THE MECHANIC HERE: it is the only record of whose die is whose
       ("colours are not optional"), so player colours are FIXED and theme-
       independent — the same call MOLT made for its red/black card faces. Only
       the chrome themes kraft/CRT. Terminal note as per .rfl-shell: --card-bg is
       a bright green block there, so this game runs its own dark panel. ---- */
/* ---- DUCK DUCK ROLL ----------------------------------------------
   Pond tiles carry a fixed player colour (whose duck is whose), same
   call as SAFETY IN NUMBERS, so those cannot be theme tokens. Every
   box that holds text is min-height, never height: this file has twice
   shipped a fixed-height box that clipped its own contents, and both
   times only a screenshot caught it. */
.ddr-shell { --ddr-surface: var(--card-bg); --ddr-ink: var(--text-primary);
    --ddr-dim: var(--text-muted); --ddr-water: #2f6fb0; --ddr-splash: #c0392b; }
[data-theme="dark"] .ddr-shell { --ddr-surface: var(--surface-raised); --ddr-ink: var(--ink-bright);
    --ddr-dim: var(--ink-dim); --ddr-water: #6fb0e8; --ddr-splash: #f4837a; }
.ddr-shell .gs-canvas { display: flex; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: .45rem; overflow-y: auto; padding: 10px; }
/* Centred like SAFETY IN NUMBERS, and for the same reason: the board is
   two rows at two players and six at six, so top-aligning leaves most of
   a phone screen empty. "safe center" so that if it ever did outgrow the
   canvas it falls back to top-aligned rather than clipping the top row. */
.ddr-shell #ddr-game { flex: 1 1 auto; min-height: 0; justify-content: center; justify-content: safe center; }
.ddr-tot i { white-space: nowrap; }
.ddr-shell .gs-dock { min-height: 84px; gap: .35rem; }
/* [SDG] DUCK DUCK ROLL ---------------------------------------------- */

.ddr-status { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.ddr-round { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 1rem; color: var(--ddr-ink); }
.ddr-dirbadge { font-family: 'Courier Prime', monospace; font-size: .6rem; letter-spacing: .12em;
    text-transform: uppercase; border: 2px solid var(--accent); color: var(--accent); padding: .04rem .3rem; }
.ddr-setup { text-align: center; padding: 1rem .5rem; }
.ddr-setup h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; font-size: 2rem; margin: 0 0 .2rem; color: var(--ddr-ink); }
.ddr-tagline { font-family: 'Special Elite', monospace; font-size: .85rem; color: var(--text-secondary); margin-bottom: 1rem; }
.ddr-setup-row { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .7rem 0; flex-wrap: wrap; }
.ddr-setup-row label { font-family: 'Special Elite', monospace; font-size: .9rem; color: var(--ddr-ink); }
.ddr-setup select { font-family: 'Courier Prime', monospace; padding: .35rem .5rem;
    border: 2px solid var(--card-border); background: var(--bg-primary); color: var(--ddr-ink); }
.ddr-setup-note { font-family: 'Special Elite', monospace; font-size: .76rem; line-height: 1.35;
    color: var(--text-secondary); margin: 1rem .3rem 0; }
.ddr-msg { font-family: 'Special Elite', monospace; font-size: .73rem; line-height: 1.3; color: var(--text-secondary); }
.ddr-msg b { display: block; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.5px;
    font-size: 1.05rem; color: var(--accent); margin-bottom: .12rem; }
.ddr-board { display: flex; flex-direction: column; gap: .25rem; }
/* Four columns: who / what is in the air / what has landed / the damage.
   The pond column is the one that grows, so it takes the free space. */
/* Last column fits "12 so far" on one line at .5rem — measured, not guessed. */
.ddr-row { display: grid; grid-template-columns: 58px 1fr minmax(0, 1.5fr) 56px;
    align-items: center; gap: .3rem; border: 2px solid var(--card-border);
    background: var(--ddr-surface); border-radius: 4px; padding: .2rem .25rem; min-height: 34px; }
.ddr-row.you { border-color: var(--accent); }
/* The two outcomes of a gamble worth looking up for. Deliberately louder than
   the "you" border so they win when they are the same row. */
.ddr-row.wiped { border-color: var(--ddr-splash); box-shadow: 0 0 0 2px var(--ddr-splash); }
.ddr-row.splashed { border-color: var(--ddr-water); box-shadow: 0 0 0 2px var(--ddr-water); }
/* The running scoreboard. min-height, never height — it is a text box, and
   a fixed height here has shipped a clipped row twice on this project. */
.ddr-rounds { min-height: 0; overflow-x: auto; }
.ddr-name { min-width: 0; border-radius: 3px; padding: .1rem .2rem; color: #fff; text-align: center;
    font-family: 'Bebas Neue', sans-serif; font-size: .7rem; letter-spacing: .4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddr-air { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; min-width: 0; }
.ddr-fliers { line-height: 1; display: inline-flex; flex-wrap: wrap; gap: 1px; align-items: center; }
/* A die still in the air. Drawn, not an emoji: a flier and a swimmer are the
   only two states in this game and the emoji was the same glyph for both. */
.ddr-duck { display: inline-flex; width: 14px; height: 14px; color: var(--ddr-ink); }
.ddr-duck svg { width: 100%; height: 100%; display: block; }
.ddr-arrived { font-family: 'Courier Prime', monospace; font-size: .5rem; color: var(--ddr-water); margin-left: .2rem; }
.ddr-empty { font-family: 'Courier Prime', monospace; font-size: .52rem; color: var(--ddr-dim); }
.ddr-pond { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; min-width: 0; }
/* One chip per settled duck — the chip is a patch of water and the duck is
   sitting on it. THE ROW OF CHIPS IS THE SCORE, which is the whole reason
   scoring is a count: a player can read their own total without counting pips
   or trusting the number in the last column. */
.ddr-swim { display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 15px; border-radius: 3px; background: var(--ddr-water); color: #fff; }
.ddr-swim svg { width: 13px; height: 13px; display: block; }
/* Ducks lost to a gamble. Kept in place rather than removed so the row still
   shows what was staked — "you rolled six and kept two" reads at a glance. */
.ddr-swim.gone { background: transparent; box-shadow: inset 0 0 0 1px var(--ddr-dim);
    opacity: .3; filter: grayscale(1); }
/* The declaration, before any dice move, and then what it came to. */
.ddr-choicebadge { font-family: 'Courier Prime', monospace; font-size: .5rem; letter-spacing: .1em;
    text-transform: uppercase; border: 1px solid var(--ddr-dim); color: var(--ddr-dim);
    padding: .02rem .22rem; border-radius: 2px; white-space: nowrap; }
.ddr-choicebadge.rolling { border-color: var(--ddr-splash); background: var(--ddr-splash);
    color: #fff; font-weight: 700; }
/* Two buttons, equal weight. The gamble is an even bet, so the dock should not
   imply that either one is the house recommendation. */
.ddr-choice { display: flex; gap: .4rem; width: 100%; }
.ddr-choice .btn { flex: 1 1 0; min-width: 0; }
.ddr-tot { text-align: right; font-family: 'Courier Prime', monospace; font-size: .8rem;
    font-weight: bold; color: var(--ddr-ink); line-height: 1.1; }
.ddr-tot i { display: block; font-style: normal; font-size: .5rem; font-weight: normal; color: var(--ddr-dim); }
/* Auto margins centre it in the flex-column canvas, matching #ddr-game —
   it is the only child once the board is hidden, and top-aligned it
   floats above half a screen of nothing. */
.ddr-final { padding: .4rem .2rem; margin-top: auto; margin-bottom: auto; }
.ddr-final-head { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.5px; font-size: 1.25rem;
    text-align: center; color: var(--accent); margin-bottom: .5rem; }
.ddr-table { width: 100%; border-collapse: collapse; font-family: 'Courier Prime', monospace; font-size: .62rem; }
.ddr-table th, .ddr-table td { border: 1px solid var(--card-border); padding: .2rem .15rem; text-align: center; color: var(--ddr-ink); }
.ddr-table th { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; color: var(--ddr-dim); }
.ddr-table td.nm { text-align: left; white-space: nowrap; }
.ddr-table td.nm span { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .25rem; }
.ddr-table td.tot { font-weight: bold; }
.ddr-table tr.win td { background: rgba(47, 111, 176, .14); }
[data-theme="dark"] .ddr-table tr.win td { background: rgba(111, 176, 232, .16); }
.ddr-hint { font-family: 'Courier Prime', monospace; font-size: .55rem; color: var(--ddr-dim); text-align: center; }

.sin-shell { --sin-surface: var(--card-bg); --sin-ink: var(--text-primary);
    --sin-dim: var(--text-muted); --sin-page-ink: var(--text-primary);
    --sin-alone: #c0392b; --sin-crowd: #2e7d32; }
/* Lights Out: rides the shared surface. alone/crowd stay saturated —
   they carry the "did my die find company" read at a glance. */
[data-theme="dark"] .sin-shell { --sin-surface: var(--surface-raised); --sin-ink: var(--ink-bright);
    --sin-dim: var(--ink-dim); --sin-page-ink: var(--ink-bright);
    --sin-alone: #f4837a; --sin-crowd: #6dd48a; }
/* Long name — trim it so the CRT theme's wider face doesn't ellipsis it away. */
.sin-shell .gs-title { font-size: 1.02rem; letter-spacing: .5px; }
.sin-shell .gs-status { padding: .35rem .6rem; }
.sin-shell .gs-canvas { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .45rem; overflow-y: auto; padding: 10px; }
/* Centred: the stack count swings from about ten rows at three players to
   eighteen at six, and top-aligning leaves half a screen of void on the small
   tables. "safe center" so that if the board ever did outgrow the canvas it
   falls back to top-aligned rather than clipping the top rows out of reach. */
.sin-shell #sin-game { flex: 1 1 auto; min-height: 0; justify-content: center; justify-content: safe center; }
.sin-shell .gs-dock { min-height: 84px; gap: .35rem; }
/* [SDG] SAFETY IN NUMBERS ------------------------------------------- */

.sin-status { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.sin-round { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 1rem; color: var(--sin-page-ink); }
.sin-sub { font-family: 'Courier Prime', monospace; font-size: .68rem; letter-spacing: .08em; color: var(--text-secondary); }
.sin-callbadge { font-family: 'Courier Prime', monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
    border: 2px solid var(--accent); color: var(--accent); padding: .04rem .3rem; }
.sin-setup { text-align: center; padding: 1rem .5rem; }
.sin-setup h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; font-size: 2rem; margin: 0 0 .2rem; color: var(--sin-page-ink); }
.sin-tagline { font-family: 'Special Elite', monospace; font-size: .85rem; color: var(--text-secondary); margin-bottom: 1rem; }
.sin-setup-row { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .7rem 0; flex-wrap: wrap; }
.sin-setup-row label { font-family: 'Special Elite', monospace; font-size: .9rem; color: var(--sin-page-ink); }
.sin-setup select { font-family: 'Courier Prime', monospace; padding: .35rem .5rem; border: 2px solid var(--card-border);
    background: var(--bg-primary); color: var(--sin-page-ink); }
.sin-setup-note { font-family: 'Special Elite', monospace; font-size: .76rem; line-height: 1.35; color: var(--text-secondary); margin: 1rem .3rem 0; }
.sin-callrow { display: flex; align-items: center; gap: .6rem; }
.sin-calldie { flex: 0 0 auto; width: 66px; height: 66px; border: 3px solid var(--accent); border-radius: 12px;
    background: var(--sin-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; }
.sin-calldie .pip { font-family: 'Courier Prime', monospace; font-size: .5rem; letter-spacing: .1em; color: var(--sin-dim); }
.sin-calldie .shape { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; line-height: 1; color: var(--accent); }
.sin-calldie.rolling { animation: sinShake .18s infinite; }
@keyframes sinShake { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(7deg); } }
/* [SDG] SAFETY IN NUMBERS ------------------------------------------- */

.sin-msg { flex: 1 1 0; min-width: 0; font-family: 'Special Elite', monospace; font-size: .73rem; line-height: 1.3; color: var(--text-secondary); }
.sin-msg b { display: block; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.5px; font-size: 1.05rem;
    color: var(--accent); margin-bottom: .12rem; }
/* The scoreboard doubles as the colour legend for the whole board, so the chip is
   filled with the player's colour rather than outlined in it. */
.sin-board { display: grid; gap: .22rem; }
.sin-pchip { min-width: 0; border-radius: 4px; padding: .16rem .18rem; text-align: center; color: #fff; }
.sin-pchip.you { box-shadow: 0 0 0 2px var(--sin-page-ink); }
.sin-pchip .n { font-family: 'Bebas Neue', sans-serif; font-size: .68rem; letter-spacing: .4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sin-pchip .s { font-family: 'Courier Prime', monospace; font-size: .84rem; font-weight: bold; line-height: 1.15; }
.sin-pchip .d { font-family: 'Courier Prime', monospace; font-size: .52rem; opacity: .85; }
/* One row per occupied number, and each row states its own rate — "the 6s are
   five deep, thirty a die" — because that is exactly how a real table scores it. */
.sin-stacks { display: flex; flex-direction: column; gap: .18rem; }
.sin-stack { display: flex; align-items: center; gap: .3rem; border: 2px solid var(--card-border);
    background: var(--sin-surface); border-radius: 4px; padding: .1rem .25rem; }
.sin-stack.alone { border-color: var(--sin-alone); }
.sin-stack.crowd { border-color: var(--sin-crowd); }
.sin-stack-n { flex: 0 0 auto; width: 24px; text-align: center; font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem; line-height: 1; color: var(--sin-ink); }
.sin-stack-rate { flex: 0 0 auto; width: 56px; font-family: 'Courier Prime', monospace; font-size: .55rem;
    color: var(--sin-crowd); }
.sin-stack.alone .sin-stack-rate { color: var(--sin-alone); }
.sin-stack-dice { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
/* Fixed player colour, white ink — every one of the six clears 5:1 against white,
   so the chips stay legible on kraft and on the CRT panel alike. */
.sin-die { display: inline-block; border-radius: 3px; padding: .04rem .22rem; color: #fff;
    font-family: 'Courier Prime', monospace; font-size: .55rem; line-height: 1.4; white-space: nowrap; }
.sin-die.mine { box-shadow: 0 0 0 2px var(--sin-page-ink); }
/* Muted, not faded out — at .5 the paler colours washed away entirely on kraft.
   The red row border is doing the real work of saying "this one is dead". */
.sin-die.dead { opacity: .78; }
.sin-die.target { box-shadow: 0 0 0 2px var(--accent); animation: sinPulse .9s infinite; }
@keyframes sinPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.sin-die .mk { font-weight: bold; }
/* The bonus choice takes the dock and #sin-action hides, so there is only ever
   one thing to press. Both buttons carry their real number — the teaching is in
   the arithmetic being visible, not in recommending one. */
.sin-choices { display: flex; gap: .35rem; width: 100%; }
.sin-choice { flex: 1 1 0; min-width: 0; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-size: 1rem;
    padding: .34rem .2rem; border: 2px solid var(--card-border); background: var(--sin-surface);
    color: var(--sin-ink); cursor: pointer; }
.sin-choice small { display: block; font-family: 'Courier Prime', monospace; font-size: .5rem;
    letter-spacing: .03em; color: var(--sin-dim); }
.sin-choice:active { transform: translate(1px,1px); }
/* [data-theme="dark"] button forces a transparent background and green ink,
   and it out-specifies a bare .sin-choice — which left these two sitting invisible
   on the CRT theme's bright green dock. Same trap RED FLAGS documented for its
   dock button; the fix there was to use .btn-primary, but these need sub-labels,
   so they win the specificity fight instead and paint their own dark panel. */
.sin-shell .sin-choice { background: var(--sin-surface); color: var(--sin-ink); }
[data-theme="dark"] .sin-shell .sin-choice { background: #0d160d; color: var(--ink-bright);
    border-color: var(--ink-bright); box-shadow: none; }
[data-theme="dark"] .sin-shell .sin-choice small { color: var(--ink-dim); }
.sin-hint { font-family: 'Courier Prime', monospace; font-size: .62rem; text-align: center; color: var(--text-secondary); min-height: 1em; }
.sin-final { flex-direction: column; gap: .45rem; }
.sin-final h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; text-align: center; font-size: 1.6rem; color: var(--accent); margin: .2rem 0 0; }
.sin-final-sub { font-family: 'Special Elite', monospace; font-size: .78rem; text-align: center; color: var(--text-secondary); }
.sin-sheet-table { width: 100%; border-collapse: collapse; font-family: 'Courier Prime', monospace; font-size: .58rem; color: var(--sin-page-ink); }
.sin-sheet-table th, .sin-sheet-table td { border: 1px solid var(--card-border); padding: .18rem .1rem; text-align: center; }
.sin-sheet-table th { font-family: 'Bebas Neue', sans-serif; letter-spacing: .5px; font-size: .68rem; color: var(--text-secondary); font-weight: normal; }
.sin-sheet-table td.nm { text-align: left; font-family: 'Bebas Neue', sans-serif; letter-spacing: .4px; font-size: .76rem; padding-left: .25rem; }
.sin-sheet-table td.fin { font-weight: bold; font-size: .74rem; color: var(--accent); }
.sin-sheet-table tr.win td { background: rgba(192,57,43,.1); }
/* ============ HOME GAMES CATALOG (replaces the two dropdowns) ============ */
.catalog { margin-top: .4rem; }
/* [SDG] SITE CHROME + GAME SHELL ------------------------------------ */

.cat-toolbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
    padding: .7rem .8rem; margin-bottom: .8rem;
    background: var(--card-bg); border: 3px solid var(--black); box-shadow: 4px 4px 0 rgba(0,0,0,.18);
}
.cat-search { flex: 1 1 200px; display: flex; align-items: center; gap: .5rem;
    border: 2px solid var(--black); background: var(--bg-primary); padding: .4rem .6rem; }
.cat-search span { opacity: .55; }
.cat-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary);
    font-family: 'Courier Prime', monospace; font-size: .85rem; outline: none; }
.cat-search input::placeholder { color: var(--text-muted); }
.cat-fgroup { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.cat-glabel { font-family: 'Courier Prime', monospace; font-size: .6rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-muted); margin-right: .1rem; }
.cat-chip { font-family: 'Courier Prime', monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-primary); background: transparent; border: 2px solid var(--black); padding: .3rem .55rem; cursor: pointer; }
.cat-chip[aria-pressed="true"] { background: var(--accent); color: var(--ink-on-dark); border-color: var(--accent); }
.cat-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cat-count { font-family: 'Courier Prime', monospace; font-size: .74rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted); margin: .2rem .2rem .6rem; }
.cat-count b { color: var(--accent); }
/* Quiet route to the free print-and-play kit — same tone as the per-card buy hook. */
.cat-printlink { float: right; color: var(--text-primary); text-decoration: none;
    border-bottom: 2px solid var(--accent); padding-bottom: 1px; text-transform: none; letter-spacing: .02em; }
.cat-printlink:hover { color: var(--accent); }
@media (max-width: 700px) { .cat-printlink { float: none; display: block; margin-top: .5rem; } }
/* [SDG] SITE CHROME + GAME SHELL ------------------------------------ */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.cat-card { display: flex; flex-direction: column; gap: .5rem;
    background: var(--card-bg); border: 3px solid var(--black); padding: .9rem; box-shadow: 5px 5px 0 rgba(0,0,0,.18);
    transition: transform .12s ease, box-shadow .12s ease; }
.cat-card:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 rgba(0,0,0,.18); }
.cat-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-height: 1.2rem; }
.cat-stamp { font-family: 'Courier Prime', monospace; font-size: .58rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; border: 2px solid var(--accent); color: var(--accent); padding: .16rem .4rem;
    transform: rotate(-3deg); white-space: nowrap; }
.cat-status { font-family: 'Courier Prime', monospace; font-size: .56rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted); text-align: right; padding-top: .2rem; }
.cat-status.pdf { color: var(--accent); }
.cat-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.55rem; line-height: .95; letter-spacing: 1px; margin: .1rem 0 0; }
.cat-hook { font-family: 'Special Elite', cursive; font-size: .82rem; margin: 0; color: var(--text-muted); }
.cat-meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; margin-top: auto; padding-top: .4rem;
    font-family: 'Courier Prime', monospace; font-size: .7rem; font-variant-numeric: tabular-nums; }
.cat-meta span { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.cat-foot { border-top: 2px dashed var(--black); padding-top: .65rem; display: flex; flex-direction: column; gap: .45rem; }
.cat-play { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: 1px; text-transform: uppercase;
    background: var(--accent); color: var(--ink-on-dark); border: 2px solid var(--black); padding: .45rem; cursor: pointer;
    text-align: center; box-shadow: 2px 2px 0 rgba(0,0,0,.2); transition: transform .08s; }
.cat-play.ghost { background: transparent; color: var(--text-primary); box-shadow: none; }
.cat-play:hover { transform: translateY(-1px); }
.cat-play:active { transform: translate(1px,1px); box-shadow: none; }
.cat-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cat-buy { display: block; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: .92rem; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-primary); background: transparent; border: 2px solid var(--accent);
    padding: .4rem; text-decoration: none; transition: background .1s, color .1s; }
.cat-buy:hover { background: var(--accent); color: var(--ink-on-dark); }
.cat-buy:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cat-empty { grid-column: 1/-1; text-align: center; color: var(--text-muted); padding: 3rem 1rem;
    border: 2px dashed var(--black); font-family: 'Special Elite', cursive; }
@media (max-width: 600px) {
    .cat-toolbar { position: static; }
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .cat-card { padding: .65rem; gap: .4rem; }
    .cat-name { font-size: 1.15rem; }
    .cat-hook { font-size: .74rem; }
    .cat-meta { font-size: .64rem; gap: .2rem .4rem; }
    .cat-stamp { font-size: .5rem; }
    .cat-status { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .cat-card, .cat-play { transition: none; } }
.showcase-back { font-family: 'Courier Prime', monospace; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
    border: 2px solid var(--black); background: transparent; color: var(--text-primary); padding: .32rem .55rem;
    cursor: pointer; margin-bottom: .7rem; }
.showcase-back:hover { background: var(--black); color: var(--ink-on-dark); }
/* Terminal: brighten card names + hooks to full CRT phosphor for contrast on green cards */
[data-theme="dark"] .cat-name { color: var(--ink-bright); }
[data-theme="dark"] .cat-hook { color: var(--ink-bright); opacity: .78; }
.out-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Permanent Marker', cursive;
    font-size: 2rem;
    color: white;
    text-shadow: 2px 2px 0 black;
    animation: out-pop 0.5s ease;
    pointer-events: none;
}
@keyframes out-pop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
/* [SDG] 7 UP 7 DOWN ------------------------------------------------- */


/* 7 UP 7 DOWN STYLES */
.sud-game {
    max-width: 450px;
    margin: 0 auto;
}
.sud-bank {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}
.sud-bank-amount {
    color: var(--game-green);
    font-size: 1.5rem;
}
.sud-bet-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.sud-bet-controls span {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.1em;
}
.sud-chip {
    font-family: 'Bebas Neue', sans-serif;
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--kraft);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 50px;
    font-size: 0.8rem;
}
.sud-chip.active {
    background: var(--kraft);
    color: var(--text-primary);
}
.sud-betting-area {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.sud-bet-zone {
    flex: 1;
    position: relative;
}
.sud-clear-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #333;
    background: var(--game-red);
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.sud-bet-zone:has(.sud-bet-btn.selected) .sud-clear-btn { display: flex; }
.sud-bet-btn {
    width: 100%;
    padding: 1rem 0.5rem;
    border: 3px solid #333;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s;
    background: #1a1a1a;
    color: white;
}
.sud-bet-btn:hover { transform: translateY(-2px); }
.sud-bet-btn.selected { border-color: var(--kraft); box-shadow: 0 0 15px rgba(201, 166, 107, 0.5); }
.sud-bet-btn.winner { border-color: var(--game-green); background: var(--success-darker); }
.sud-bet-btn.loser { opacity: 0.4; }
.sud-down { background: linear-gradient(135deg, #1e3a5f 0%, #0f1f33 100%); }
.sud-seven { background: linear-gradient(135deg, #5f1e1e 0%, #330f0f 100%); }
.sud-up { background: linear-gradient(135deg, #1e5f3a 0%, #0f3320 100%); }
.sud-bet-label {
    font-family: 'Permanent Marker', cursive;
    font-size: 1rem;
}
.sud-bet-range {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}
.sud-bet-odds {
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    opacity: 0.7;
}
.sud-bet-amount {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--success);
    min-height: 1.2rem;
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
}
.sud-dice-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}
.sud-die {
    width: 60px;
    height: 60px;
    background: white;
    border: 3px solid #333;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 2rem;
    color: var(--text-primary);
}
.sud-die.rolling {
    animation: sud-shake 0.1s infinite;
}
@keyframes sud-shake {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}
.sud-total {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    min-width: 50px;
    text-align: center;
}
.sud-total.low { color: var(--info); }
.sud-total.seven { color: var(--game-red); }
.sud-total.high { color: var(--game-green); }
.sud-message {
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.1rem;
    color: var(--kraft-dark);
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}
.sud-controls {
    text-align: center;
}
/* [SDG] TENNY-TWO --------------------------------------------------- */


/* TENNY-TWO STYLES */
.tt-game {
    max-width: 450px;
    margin: 0 auto;
}
.tt-game-area {
    background: var(--success-darker);
    border: 3px solid var(--black);
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 8px;
}
.tt-hands {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tt-hand {
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}
.tt-hand-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.tt-dice {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-height: 50px;
    align-items: center;
}
.tt-die {
    width: 45px;
    height: 45px;
    background: white;
    border: 3px solid var(--black);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
}
.tt-die.new {
    animation: tt-roll 0.4s ease;
}
.tt-die.hidden {
    background: #1e3a5f;
    color: transparent;
}
@keyframes tt-roll {
    0% { transform: rotate(0deg) scale(0.5); opacity: 0; }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
/* [SDG] TENNY-TWO --------------------------------------------------- */

.tt-total {
    font-family: 'Permanent Marker', cursive;
    font-size: 2rem;
    color: white;
    margin-top: 0.5rem;
}
.tt-total.bust {
    color: var(--error-lightest);
    text-decoration: line-through;
}
.tt-total.tenny-two {
    color: var(--warning-light);
    text-shadow: 0 0 10px #fbbf24;
}
.tt-status {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 2px;
    min-height: 1.5rem;
}
.tt-status.bust { color: var(--error-lightest); }
.tt-status.stand { color: var(--success-light); }
.tt-status.win { color: var(--warning-light); }
.tt-status.lose { color: var(--error-lightest); }
.tt-status.push { color: var(--info-lighter); }
.tt-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    color: white;
    padding: 0.75rem;
    margin: 0.75rem 0;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}
.tt-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.tt-controls .btn {
    min-width: 80px;
}
.tt-score {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
}
/* [SDG] D20 ROULETTE ------------------------------------------------ */

/* D20 ROULETTE STYLES */
.d20r-game {
    max-width: 450px;
    margin: 0 auto;
}
.d20r-game-area {
    background: var(--success-darker);
    border: 3px solid var(--black);
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 8px;
}
.d20r-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}
.d20r-balance {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    color: var(--warning-light);
    white-space: nowrap;
}
.d20r-die {
    width: 36px;
    height: 36px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 50%;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.d20r-die.green {
    background: var(--success);
    color: white;
}
.d20r-die.spinning {
    animation: d20r-spin 0.6s ease-out;
}
@keyframes d20r-spin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(540deg) scale(1.2); }
    100% { transform: rotate(720deg) scale(1); }
}
.d20r-controls-inline {
    display: flex;
    gap: 0.25rem;
}
.btn-sm {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.75rem !important;
}
/* [SDG] D20 ROULETTE ------------------------------------------------ */

.d20r-table {
    display: flex;
    gap: 2px;
    margin-bottom: 0.4rem;
}
.d20r-zeros {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.d20r-zero {
    flex: 1;
    width: 28px;
    background: var(--success);
    color: white;
    border: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.d20r-zero:hover { opacity: 0.8; }
.d20r-zero.selected { box-shadow: inset 0 0 0 2px #fbbf24; }
.d20r-zero.winner { animation: d20r-flash 0.5s ease 3; }
.d20r-board {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: var(--black);
    padding: 2px;
}
.d20r-cell {
    padding: 0.3rem 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.d20r-cell.red { background: var(--error); color: white; }
.d20r-cell.black { background: #1f2937; color: white; }
.d20r-cell:hover { opacity: 0.8; }
.d20r-cell.selected { box-shadow: inset 0 0 0 2px #fbbf24; }
.d20r-cell.winner { animation: d20r-flash 0.5s ease 3; }
@keyframes d20r-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* [SDG] D20 ROULETTE ------------------------------------------------ */

.d20r-chip {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background: var(--warning-light);
    border: 1px solid var(--black);
    border-radius: 50%;
}
.d20r-columns {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.d20r-col-btn {
    flex: 1;
    width: 28px;
    background: var(--game-dark);
    color: white;
    border: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
}
.d20r-col-btn:hover { background: #4b5563; }
.d20r-col-btn.selected { background: var(--warning-light); color: black; }
.d20r-outside {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.4rem;
}
.d20r-thirds-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-left: 30px;
    margin-right: 30px;
}
.d20r-third-btn {
    padding: 0.25rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.7rem;
    background: var(--game-dark);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.d20r-third-btn:hover { background: #4b5563; }
.d20r-third-btn.selected { background: var(--warning-light); color: black; }
.d20r-even-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    margin-left: 30px;
    margin-right: 30px;
}
.d20r-even-btn {
    padding: 0.25rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.7rem;
    background: var(--game-dark);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.d20r-even-btn.red {
    background: var(--error);
}
.d20r-even-btn.black {
    background: #1f2937;
}
.d20r-even-btn:hover { opacity: 0.8; }
.d20r-even-btn.selected { box-shadow: inset 0 0 0 2px #fbbf24; }
.d20r-message {
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: white;
    padding: 0.3rem;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    min-height: 1.2rem;
}
/* [SDG] DICE BACCARAT ----------------------------------------------- */

/* DICE BACCARAT STYLES */
.db-game {
    max-width: 450px;
    margin: 0 auto;
}
.db-game-area {
    background: #7c2d12;
    border: 3px solid var(--black);
    padding: 0.75rem;
    margin-top: 0.5rem;
    border-radius: 8px;
}
.db-balance {
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--warning-light);
    margin-bottom: 0.5rem;
}
.db-betting {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.db-bet-btn {
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.db-bet-btn:hover { background: rgba(255,255,255,0.2); }
.db-bet-btn.selected { background: var(--warning-light); border-color: var(--warning-light); }
.db-bet-btn.selected .db-bet-label { color: black; }
.db-bet-btn.selected .db-bet-odds { color: var(--text-muted); }
.db-bet-btn.tie { border-color: var(--success); }
.db-bet-label {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: white;
    letter-spacing: 1px;
}
.db-bet-odds {
    display: block;
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
}
.db-hands {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0.75rem;
}
.db-hand {
    text-align: center;
    flex: 1;
}
.db-hand-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.db-vs {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.5);
}
.db-dice {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    min-height: 40px;
    flex-wrap: wrap;
}
.db-die {
    width: 36px;
    height: 36px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.1rem;
}
.db-die.new {
    animation: db-roll 0.4s ease;
}
@keyframes db-roll {
    0% { transform: rotateY(0deg) scale(0.5); opacity: 0; }
    100% { transform: rotateY(360deg) scale(1); opacity: 1; }
}
/* [SDG] DICE BACCARAT ----------------------------------------------- */

.db-total {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.8rem;
    color: white;
    margin-top: 0.25rem;
}
.db-total.winner {
    color: var(--warning-light);
    text-shadow: 0 0 10px #fbbf24;
}
.db-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    color: white;
    padding: 0.5rem;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.db-commentary {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 60px;
    max-height: 80px;
    overflow-y: auto;
}
.db-commentary-inner {
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
}
.db-commentary-line {
    margin-bottom: 0.25rem;
}
.db-commentary-line.result {
    color: var(--warning-light);
    font-weight: bold;
}
.db-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.db-score {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
}
/* [SDG] DICE HOLD'EM ------------------------------------------------ */

/* DICE HOLD'EM STYLES */
.dh-game {
    max-width: 400px;
    margin: 0 auto;
}
.dh-game-area {
    background: var(--success-darker);
    border: 3px solid var(--black);
    padding: 0.75rem;
    margin-top: 0.5rem;
    border-radius: 8px;
}
.dh-community {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px dashed rgba(255,255,255,0.3);
}
.dh-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
    margin-bottom: 0.4rem;
}
.dh-dice {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
}
.dh-die {
    width: 38px;
    height: 38px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.1rem;
}
.dh-die.empty {
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.3);
}
.dh-die.hidden {
    background: #1e3a5f;
    color: rgba(255,255,255,0.3);
    border-color: var(--ink);
}
.dh-die.new {
    animation: dh-flip 0.4s ease;
}
@keyframes dh-flip {
    0% { transform: rotateY(0deg) scale(0.8); }
    50% { transform: rotateY(90deg) scale(1.1); }
    100% { transform: rotateY(0deg) scale(1); }
}
/* [SDG] DICE HOLD'EM ------------------------------------------------ */

.dh-die.winner {
    background: var(--warning-light);
    box-shadow: 0 0 8px #fbbf24;
}
.dh-players {
    display: flex;
    justify-content: space-around;
    margin-bottom: 0.75rem;
}
.dh-player {
    text-align: center;
}
.dh-player-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}
.dh-player.you .dh-player-label { color: var(--success-light); }
.dh-player.cpu .dh-player-label { color: var(--error-lighter); }
.dh-hole-dice {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}
.dh-hand-name {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: var(--warning-light);
    margin-top: 0.3rem;
    min-height: 1rem;
}
.dh-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    color: white;
    padding: 0.5rem;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.dh-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.dh-score {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
}
/* BINARY STYLES */
.bin-area { padding: 1rem 0.5rem; max-width: 720px; margin: 0 auto; }
.bin-setup { background: var(--kraft-light); border: 3px solid var(--black); padding: 1.5rem; border-radius: 8px; }
[data-theme="dark"] .bin-setup { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.bin-pcount-row { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bin-pcount-btn {
    background: transparent; border: 2px solid var(--black); color: var(--text-primary);
    font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; padding: 0.4rem 0.9rem;
    cursor: pointer; letter-spacing: 2px;
}
.bin-pcount-btn.active { background: var(--red); color: var(--ink-inverse); border-color: var(--red); }
[data-theme="dark"] .bin-pcount-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .bin-pcount-btn.active { background: var(--ink-dim); color: var(--surface-page); border-color: var(--ink-bright); }
.bin-player-setup { display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; margin: 0 auto; }
.bin-player-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; background: rgba(0,0,0,.05); border-radius: 4px; }
[data-theme="dark"] .bin-player-row { background: rgba(242, 237, 227,.08); }
.bin-player-row label { font-family: 'Courier Prime', monospace; font-size: 0.85rem; min-width: 4rem; }
.bin-player-row input[type="text"] {
    flex: 1; padding: 0.3rem 0.5rem; border: 1px solid var(--black);
    background: var(--white); font-family: 'Courier Prime', monospace; font-size: 0.85rem;
}
[data-theme="dark"] .bin-player-row input[type="text"] { background: var(--surface-page); border-color: var(--ink-dim); color: var(--ink-bright); }
.bin-type-toggle { display: flex; gap: 0.2rem; }
.bin-type-btn {
    background: transparent; border: 1px solid var(--black); color: var(--text-primary);
    font-family: 'Courier Prime', monospace; font-size: 0.75rem; padding: 0.25rem 0.5rem; cursor: pointer;
}
.bin-type-btn.active { background: var(--black); color: var(--ink-inverse); }
[data-theme="dark"] .bin-type-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .bin-type-btn.active { background: var(--ink-dim); color: var(--surface-page); }
.bin-scoreboard {
    display: grid; gap: 0.4rem; background: var(--kraft-light);
    border: 2px solid var(--black); padding: 0.6rem; margin-bottom: 0.8rem;
    font-family: 'Courier Prime', monospace; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
}
[data-theme="dark"] .bin-scoreboard { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.bin-sb-cell { text-align: center; padding: 0.25rem; border-radius: 4px; }
.bin-sb-cell.active { background: var(--red); color: var(--ink-inverse); }
[data-theme="dark"] .bin-sb-cell.active { background: var(--ink-dim); color: var(--surface-page); }
.bin-sb-name { font-weight: bold; font-size: 0.8rem; letter-spacing: 1px; }
.bin-sb-status { font-size: 0.7rem; opacity: 0.75; letter-spacing: 1px; }
.bin-turn-banner {
    text-align: center; padding: 0.5rem; margin-bottom: 0.8rem;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; font-size: 1.4rem;
    background: var(--red); color: var(--ink-inverse);
}
[data-theme="dark"] .bin-turn-banner { background: var(--ink-dim); color: var(--surface-page); }
.bin-message {
    text-align: center; padding: 0.5rem; margin-bottom: 0.8rem; min-height: 1.5rem;
    font-family: 'Courier Prime', monospace; font-size: 0.9rem;
}
.bin-coin-and-collected {
    display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
    margin-bottom: 0.8rem; padding: 0.6rem; background: rgba(0,0,0,.04); border-radius: 6px;
}
[data-theme="dark"] .bin-coin-and-collected { background: rgba(242, 237, 227,.04); }
.bin-coin-area {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.bin-coin {
    width: 4rem; height: 4rem; background: var(--white); border: 3px solid var(--black);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 1px;
    transition: background 0.2s, color 0.2s;
}
[data-theme="dark"] .bin-coin {
    background: var(--surface-page); border-color: var(--ink-bright); color: var(--ink-bright);
}
.bin-coin.red { background: #c0182f; color: var(--ink-inverse); border-color: var(--black); }
.bin-coin.black { background: var(--black); color: var(--ink-inverse); border-color: var(--black); }
[data-theme="dark"] .bin-coin.red { background: var(--surface-raised); color: var(--warning); border-color: var(--warning); }
[data-theme="dark"] .bin-coin.black { background: var(--surface-raised); color: var(--ink-bright); border-color: var(--ink-bright); }
.bin-coin.flipping { animation: bin-coin-flip 0.1s infinite; }
@keyframes bin-coin-flip {
    0%,100% { transform: scaleX(1); }
    50% { transform: scaleX(0.1); }
}
.bin-coin-label { font-size: 0.7rem; letter-spacing: 1.5px; opacity: 0.75; font-family: 'Courier Prime', monospace; }
.bin-collected {
    display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 4rem;
    align-items: center; justify-content: flex-start;
}
.bin-collected-mini {
    width: 2rem; height: 2.6rem; background: var(--white); border: 1px solid var(--black);
    border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem; padding: 0.15rem;
}
[data-theme="dark"] .bin-collected-mini { background: var(--surface-page); border-color: var(--ink-bright); color: var(--ink-bright); }
.bin-collected-mini.red-card { color: #c0182f; }
.bin-streak-counter {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 2px;
    text-align: center; margin-top: 0.2rem; opacity: 0.85;
}
.bin-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
    max-width: 360px; margin: 0 auto 0.8rem; padding: 0.5rem;
    background: rgba(0,0,0,.04); border-radius: 6px;
}
[data-theme="dark"] .bin-grid { background: rgba(242, 237, 227,.04); }
.bin-card {
    aspect-ratio: 2/3; background: var(--red); border: 2px solid var(--black);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; transition: transform 0.15s;
    font-family: 'Bebas Neue', sans-serif;
}
[data-theme="dark"] .bin-card {
    background: var(--surface-raised); border-color: var(--ink-dim);
}
.bin-card.face-down::after {
    content: '?'; color: rgba(255,255,255,.6); font-size: 1.6rem;
}
[data-theme="dark"] .bin-card.face-down::after { color: var(--ink-dim); }
.bin-card.face-up {
    background: var(--white); cursor: default;
    display: flex; flex-direction: column; padding: 0.2rem;
}
[data-theme="dark"] .bin-card.face-up { background: var(--surface-page); color: var(--ink-bright); }
.bin-card.face-up.red-card { color: #c0182f; }
.bin-card-rank { font-size: 1.4rem; line-height: 1; }
.bin-card-suit { font-size: 0.8rem; }
.bin-card.clickable:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.bin-card.flash-success {
    animation: bin-flash-success 0.5s ease;
    border-color: var(--success); box-shadow: 0 0 14px var(--success);
}
.bin-card.flash-bust {
    animation: bin-flash-bust 0.5s ease;
    border-color: var(--error); box-shadow: 0 0 16px var(--error);
}
@keyframes bin-flash-success {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes bin-flash-bust {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.bin-controls { text-align: center; padding: 0.4rem 0; }
.bin-controls .btn { margin: 0.25rem; }
.bin-gameover {
    background: var(--kraft-light); border: 3px solid var(--red); padding: 1.5rem;
    text-align: center; border-radius: 8px;
}
[data-theme="dark"] .bin-gameover { background: var(--surface-raised); border-color: var(--ink-bright); }
.bin-gameover h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 3px; margin-bottom: 1rem; }
.bin-gameover .winner { color: var(--red); font-size: 2.2rem; font-family: 'Bebas Neue', sans-serif; }
[data-theme="dark"] .bin-gameover .winner { color: var(--ink-bright); }
/* ECHO STYLES */
.echo-area { padding: 1rem 0.5rem; max-width: 720px; margin: 0 auto; }
.echo-setup { background: var(--kraft-light); border: 3px solid var(--black); padding: 1.5rem; border-radius: 8px; }
[data-theme="dark"] .echo-setup { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.echo-mode-row { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.echo-mode-btn {
    background: transparent; border: 2px solid var(--black); color: var(--text-primary);
    font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; padding: 0.35rem 0.7rem;
    cursor: pointer; letter-spacing: 1.5px;
}
.echo-mode-btn.active { background: var(--red); color: var(--ink-inverse); border-color: var(--red); }
[data-theme="dark"] .echo-mode-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .echo-mode-btn.active { background: var(--ink-dim); color: var(--surface-page); border-color: var(--ink-bright); }
.echo-pcount-row { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.echo-pcount-btn {
    background: transparent; border: 2px solid var(--black); color: var(--text-primary);
    font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; padding: 0.4rem 0.9rem;
    cursor: pointer; letter-spacing: 2px;
}
.echo-pcount-btn.active { background: var(--red); color: var(--ink-inverse); border-color: var(--red); }
[data-theme="dark"] .echo-pcount-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .echo-pcount-btn.active { background: var(--ink-dim); color: var(--surface-page); border-color: var(--ink-bright); }
.echo-player-setup { display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; margin: 0 auto; }
.echo-player-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; background: rgba(0,0,0,.05); border-radius: 4px; }
[data-theme="dark"] .echo-player-row { background: rgba(242, 237, 227,.08); }
.echo-player-row label { font-family: 'Courier Prime', monospace; font-size: 0.85rem; min-width: 4rem; }
.echo-player-row input[type="text"] {
    flex: 1; padding: 0.3rem 0.5rem; border: 1px solid var(--black);
    background: var(--white); font-family: 'Courier Prime', monospace; font-size: 0.85rem;
}
[data-theme="dark"] .echo-player-row input[type="text"] { background: var(--surface-page); border-color: var(--ink-dim); color: var(--ink-bright); }
.echo-type-toggle { display: flex; gap: 0.2rem; }
.echo-type-btn {
    background: transparent; border: 1px solid var(--black); color: var(--text-primary);
    font-family: 'Courier Prime', monospace; font-size: 0.75rem; padding: 0.25rem 0.5rem; cursor: pointer;
}
.echo-type-btn.active { background: var(--black); color: var(--ink-inverse); }
[data-theme="dark"] .echo-type-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .echo-type-btn.active { background: var(--ink-dim); color: var(--surface-page); }
.echo-scoreboard {
    display: grid; gap: 0.4rem; background: var(--kraft-light);
    border: 2px solid var(--black); padding: 0.6rem; margin-bottom: 0.6rem;
    font-family: 'Courier Prime', monospace; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
[data-theme="dark"] .echo-scoreboard { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.echo-sb-cell { text-align: center; padding: 0.25rem; border-radius: 4px; }
.echo-sb-cell.active { background: var(--red); color: var(--ink-inverse); }
.echo-sb-cell.eliminated { opacity: 0.35; text-decoration: line-through; }
[data-theme="dark"] .echo-sb-cell.active { background: var(--ink-dim); color: var(--surface-page); }
.echo-sb-name { font-weight: bold; font-size: 0.8rem; letter-spacing: 1px; }
.echo-sb-status { font-size: 0.65rem; opacity: 0.8; letter-spacing: 1px; }
.echo-mode-banner {
    text-align: center; padding: 0.3rem; margin-bottom: 0.5rem;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 0.9rem;
    background: var(--black); color: var(--ink-on-dark);
}
[data-theme="dark"] .echo-mode-banner { background: var(--surface-raised); color: var(--ink-bright); border: 1px solid var(--ink-dim); }
.echo-turn-banner {
    text-align: center; padding: 0.5rem; margin-bottom: 0.6rem;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; font-size: 1.3rem;
    background: var(--red); color: var(--ink-inverse);
}
[data-theme="dark"] .echo-turn-banner { background: var(--ink-dim); color: var(--surface-page); }
.echo-message {
    text-align: center; padding: 0.4rem; margin-bottom: 0.6rem; min-height: 1.5rem;
    font-family: 'Courier Prime', monospace; font-size: 0.9rem;
}
.echo-sequence-label { font-size: 0.7rem; letter-spacing: 1.5px; opacity: 0.7; text-align: center; font-family: 'Courier Prime', monospace; margin-bottom: 0.3rem; }
.echo-sequence {
    display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center;
    min-height: 3rem; padding: 0.5rem; margin-bottom: 0.8rem;
    background: rgba(0,0,0,.04); border-radius: 6px;
}
[data-theme="dark"] .echo-sequence { background: rgba(242, 237, 227,.04); border: 1px solid var(--ink-dim); }
.echo-seq-card {
    width: 1.7rem; height: 2.4rem; background: var(--white); border: 1px solid var(--black);
    border-radius: 3px; display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 1rem; position: relative;
}
[data-theme="dark"] .echo-seq-card { background: var(--surface-page); border-color: var(--ink-bright); color: var(--ink-bright); }
.echo-seq-card.red-card { color: #c0182f; }
.echo-seq-card.current {
    border-color: var(--red); border-width: 2px;
    box-shadow: 0 0 12px var(--red); transform: scale(1.15);
}
[data-theme="dark"] .echo-seq-card.current { border-color: var(--ink-bright); }
.echo-seq-card.done { opacity: 0.4; }
.echo-seq-card.new {
    animation: echo-new-card 0.6s ease;
    border-color: var(--success); box-shadow: 0 0 12px var(--success);
}
@keyframes echo-new-card {
    0% { transform: scale(0.3) rotate(-180deg); opacity: 0; }
    70% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1); opacity: 1; }
}
.echo-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
    max-width: 360px; margin: 0 auto 0.8rem; padding: 0.5rem;
    background: rgba(0,0,0,.04); border-radius: 6px;
}
[data-theme="dark"] .echo-grid { background: rgba(242, 237, 227,.04); }
.echo-card {
    aspect-ratio: 2/3; background: var(--red); border: 2px solid var(--black);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; transition: transform 0.15s;
    font-family: 'Bebas Neue', sans-serif;
}
[data-theme="dark"] .echo-card {
    background: var(--surface-raised); border-color: var(--ink-dim);
}
.echo-card.face-down::after {
    content: '?'; color: rgba(255,255,255,.6); font-size: 1.6rem;
}
[data-theme="dark"] .echo-card.face-down::after { color: var(--ink-dim); }
.echo-card.face-up {
    background: var(--white); cursor: default;
    display: flex; flex-direction: column; padding: 0.2rem;
}
[data-theme="dark"] .echo-card.face-up { background: var(--surface-page); color: var(--ink-bright); }
.echo-card.face-up.red-card { color: #c0182f; }
.echo-card-rank { font-size: 1.4rem; line-height: 1; }
.echo-card-suit { font-size: 0.8rem; }
.echo-card.clickable:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.echo-card.matched { border-color: var(--success); box-shadow: 0 0 10px var(--success); }
[data-theme="dark"] .echo-card.matched { border-color: var(--ink-bright); }
.echo-card.flash-success {
    animation: echo-card-success 0.5s ease;
}
.echo-card.flash-bust {
    animation: echo-card-bust 0.5s ease;
    border-color: var(--error); box-shadow: 0 0 18px var(--error);
}
@keyframes echo-card-success {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes echo-card-bust {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.echo-controls { text-align: center; padding: 0.4rem 0; }
.echo-controls .btn { margin: 0.25rem; }
.echo-gameover {
    background: var(--kraft-light); border: 3px solid var(--red); padding: 1.5rem;
    text-align: center; border-radius: 8px;
}
[data-theme="dark"] .echo-gameover { background: var(--surface-raised); border-color: var(--ink-bright); }
.echo-gameover h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 3px; margin-bottom: 1rem; }
.echo-gameover .winner { color: var(--red); font-size: 2.2rem; font-family: 'Bebas Neue', sans-serif; }
[data-theme="dark"] .echo-gameover .winner { color: var(--ink-bright); }
/* R.A.M. STYLES */
.ram-area { padding: 1rem 0.5rem; max-width: 720px; margin: 0 auto; }
.ram-setup { background: var(--kraft-light); border: 3px solid var(--black); padding: 1.5rem; border-radius: 8px; }
[data-theme="dark"] .ram-setup { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.ram-pcount-row { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ram-pcount-btn {
    background: transparent; border: 2px solid var(--black); color: var(--text-primary);
    font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; padding: 0.4rem 0.9rem;
    cursor: pointer; letter-spacing: 2px;
}
.ram-pcount-btn.active { background: var(--red); color: var(--ink-inverse); border-color: var(--red); }
[data-theme="dark"] .ram-pcount-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .ram-pcount-btn.active { background: var(--ink-dim); color: var(--surface-page); border-color: var(--ink-bright); }
.ram-player-setup { display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; margin: 0 auto; }
.ram-player-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; background: rgba(0,0,0,.05); border-radius: 4px; }
[data-theme="dark"] .ram-player-row { background: rgba(242, 237, 227,.08); }
.ram-player-row label { font-family: 'Courier Prime', monospace; font-size: 0.85rem; min-width: 4rem; }
.ram-player-row input[type="text"] {
    flex: 1; padding: 0.3rem 0.5rem; border: 1px solid var(--black);
    background: var(--white); font-family: 'Courier Prime', monospace; font-size: 0.85rem;
}
[data-theme="dark"] .ram-player-row input[type="text"] { background: var(--surface-page); border-color: var(--ink-dim); color: var(--ink-bright); }
.ram-type-toggle { display: flex; gap: 0.2rem; }
.ram-type-btn {
    background: transparent; border: 1px solid var(--black); color: var(--text-primary);
    font-family: 'Courier Prime', monospace; font-size: 0.75rem; padding: 0.25rem 0.5rem; cursor: pointer;
}
.ram-type-btn.active { background: var(--black); color: var(--ink-inverse); }
[data-theme="dark"] .ram-type-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .ram-type-btn.active { background: var(--ink-dim); color: var(--surface-page); }
.ram-scoreboard {
    display: grid; gap: 0.4rem; background: var(--kraft-light);
    border: 2px solid var(--black); padding: 0.6rem; margin-bottom: 0.8rem;
    font-family: 'Courier Prime', monospace; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
}
[data-theme="dark"] .ram-scoreboard { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.ram-sb-cell { text-align: center; padding: 0.25rem; border-radius: 4px; }
.ram-sb-cell.active { background: var(--red); color: var(--ink-inverse); }
[data-theme="dark"] .ram-sb-cell.active { background: var(--ink-dim); color: var(--surface-page); }
.ram-sb-name { font-weight: bold; font-size: 0.8rem; letter-spacing: 1px; }
.ram-sb-score { font-size: 1.4rem; font-family: 'Bebas Neue', sans-serif; }
.ram-sb-type { font-size: 0.6rem; opacity: 0.7; letter-spacing: 1px; }
.ram-sets-tracker {
    text-align: center; padding: 0.4rem; margin-bottom: 0.8rem;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px;
    background: var(--black); color: var(--ink-on-dark);
}
[data-theme="dark"] .ram-sets-tracker { background: var(--surface-raised); color: var(--ink-bright); border: 1px solid var(--ink-dim); }
.ram-set-pip {
    display: inline-block; margin: 0 0.25rem; padding: 0.15rem 0.5rem;
    font-size: 0.9rem; border-radius: 3px;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px;
}
.ram-set-pip.pending { opacity: 0.4; border: 1px dashed var(--kraft-light); }
.ram-set-pip.claimed { background: var(--red); color: var(--ink-inverse); }
[data-theme="dark"] .ram-set-pip.pending { border-color: var(--ink-dim); }
[data-theme="dark"] .ram-set-pip.claimed { background: var(--ink-dim); color: var(--surface-page); }
.ram-turn-banner {
    text-align: center; padding: 0.5rem; margin-bottom: 0.8rem;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; font-size: 1.4rem;
    background: var(--red); color: var(--ink-inverse);
}
[data-theme="dark"] .ram-turn-banner { background: var(--ink-dim); color: var(--surface-page); }
.ram-message {
    text-align: center; padding: 0.5rem; margin-bottom: 0.8rem; min-height: 1.5rem;
    font-family: 'Courier Prime', monospace; font-size: 0.9rem;
}
.ram-die-and-collected {
    display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
    margin-bottom: 0.8rem; padding: 0.6rem; background: rgba(0,0,0,.04); border-radius: 6px;
}
[data-theme="dark"] .ram-die-and-collected { background: rgba(242, 237, 227,.04); }
.ram-die-area {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.ram-die {
    width: 3.5rem; height: 3.5rem; background: var(--white); border: 2px solid var(--black);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem;
}
[data-theme="dark"] .ram-die {
    background: var(--surface-page); border-color: var(--ink-bright); color: var(--ink-bright);
}
.ram-die.rolling { animation: ram-die-shake 0.1s infinite; }
@keyframes ram-die-shake {
    0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); }
}
.ram-die.wild { background: var(--warning); border-color: var(--black); }
[data-theme="dark"] .ram-die.wild { background: var(--surface-raised); border-color: var(--ink-bright); }
.ram-die-label { font-size: 0.7rem; letter-spacing: 1.5px; opacity: 0.75; font-family: 'Courier Prime', monospace; }
.ram-collected {
    display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 4rem;
    align-items: center; justify-content: flex-start;
}
.ram-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem;
    margin-bottom: 0.8rem; padding: 0.5rem; background: rgba(0,0,0,.04); border-radius: 6px;
}
.ram-grid.d4-mode {
    grid-template-columns: repeat(4, 1fr);
    max-width: 360px; margin-left: auto; margin-right: auto;
}
[data-theme="dark"] .ram-grid { background: rgba(242, 237, 227,.04); }
.ram-card {
    aspect-ratio: 2/3; background: var(--red); border: 2px solid var(--black);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; transition: transform 0.15s;
    font-family: 'Bebas Neue', sans-serif;
}
[data-theme="dark"] .ram-card {
    background: var(--surface-raised); border-color: var(--ink-dim);
}
.ram-card.face-down::after {
    content: '?'; color: rgba(255,255,255,.6); font-size: 1.6rem;
}
[data-theme="dark"] .ram-card.face-down::after { color: var(--ink-dim); }
.ram-card.face-up {
    background: var(--white); cursor: default;
    display: flex; flex-direction: column; padding: 0.2rem;
}
[data-theme="dark"] .ram-card.face-up { background: var(--surface-page); color: var(--ink-bright); }
.ram-card.face-up.red-card { color: #c0182f; }
.ram-card-rank { font-size: 1.4rem; line-height: 1; }
.ram-card-suit { font-size: 0.8rem; }
.ram-card.clickable:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.ram-card.flash {
    animation: ram-card-flash 0.4s ease;
}
@keyframes ram-card-flash {
    0% { transform: scale(0.6) rotate(-10deg); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.ram-card.success { border-color: var(--success); box-shadow: 0 0 12px var(--success); }
.ram-card.bust { border-color: var(--error); box-shadow: 0 0 12px var(--error); }
.ram-card.trap-bust {
    border-color: var(--error); background: #ffe5e5;
    box-shadow: 0 0 20px var(--error), 0 0 40px rgba(239, 68, 68, .4);
    animation: ram-trap-shake 0.5s ease;
}
@keyframes ram-trap-shake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-6px); }
    30%, 70% { transform: translateX(6px); }
}
.ram-card.trap-card.face-up {
    background: #fff5e6; color: var(--error);
    border-color: var(--error);
}
[data-theme="dark"] .ram-card.trap-card.face-up {
    background: var(--surface-raised); color: var(--warning);
    border-color: var(--warning);
}
.ram-card.wild-card.face-up { background: var(--warning); color: var(--text-primary); }
[data-theme="dark"] .ram-card.wild-card.face-up { background: var(--surface-raised); color: var(--ink-bright); border-color: var(--ink-bright); }
.ram-card.claimed { opacity: 0.25; cursor: default; filter: grayscale(0.5); }
.ram-card.trap { /* memory trap: real card whose set is claimed but card still face-down */ }
.ram-collected-mini {
    width: 2rem; height: 2.6rem; background: var(--white); border: 1px solid var(--black);
    border-radius: 3px; display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem;
}
[data-theme="dark"] .ram-collected-mini { background: var(--surface-page); border-color: var(--ink-bright); color: var(--ink-bright); }
.ram-collected-mini.wild { background: var(--warning); color: var(--text-primary); }
[data-theme="dark"] .ram-collected-mini.wild { background: var(--surface-raised); color: var(--ink-bright); border-color: var(--ink-bright); }
.ram-controls { text-align: center; padding: 0.4rem 0; }
.ram-controls .btn { margin: 0.25rem; }
.ram-gameover {
    background: var(--kraft-light); border: 3px solid var(--red); padding: 1.5rem;
    text-align: center; border-radius: 8px;
}
[data-theme="dark"] .ram-gameover { background: var(--surface-raised); border-color: var(--ink-bright); }
.ram-gameover h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 3px; margin-bottom: 1rem; }
.ram-gameover .winner { color: var(--red); font-size: 2.2rem; font-family: 'Bebas Neue', sans-serif; }
[data-theme="dark"] .ram-gameover .winner { color: var(--ink-bright); }
/* WIND IT UP STYLES */
.wu-area { padding: 1rem 0.5rem; max-width: 720px; margin: 0 auto; }
.wu-setup { background: var(--kraft-light); border: 3px solid var(--black); padding: 1.5rem; border-radius: 8px; }
[data-theme="dark"] .wu-setup { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.wu-pcount-row { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wu-pcount-btn {
    background: transparent; border: 2px solid var(--black); color: var(--text-primary);
    font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; padding: 0.4rem 0.9rem;
    cursor: pointer; letter-spacing: 2px;
}
.wu-pcount-btn.active { background: var(--red); color: var(--ink-inverse); border-color: var(--red); }
[data-theme="dark"] .wu-pcount-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .wu-pcount-btn.active { background: var(--ink-dim); color: var(--surface-page); border-color: var(--ink-bright); }
.wu-player-setup { display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; margin: 0 auto; }
.wu-player-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; background: rgba(0,0,0,.05); border-radius: 4px; }
[data-theme="dark"] .wu-player-row { background: rgba(242, 237, 227,.08); }
.wu-player-row label { font-family: 'Courier Prime', monospace; font-size: 0.85rem; min-width: 4rem; }
.wu-player-row input[type="text"] {
    flex: 1; padding: 0.3rem 0.5rem; border: 1px solid var(--black);
    background: var(--white); font-family: 'Courier Prime', monospace; font-size: 0.85rem;
}
[data-theme="dark"] .wu-player-row input[type="text"] { background: var(--surface-page); border-color: var(--ink-dim); color: var(--ink-bright); }
.wu-type-toggle { display: flex; gap: 0.2rem; }
.wu-type-btn {
    background: transparent; border: 1px solid var(--black); color: var(--text-primary);
    font-family: 'Courier Prime', monospace; font-size: 0.75rem; padding: 0.25rem 0.5rem; cursor: pointer;
}
.wu-type-btn.active { background: var(--black); color: var(--ink-inverse); }
[data-theme="dark"] .wu-type-btn { border-color: var(--ink-dim); color: var(--ink-bright); }
[data-theme="dark"] .wu-type-btn.active { background: var(--ink-dim); color: var(--surface-page); }
.wu-scoreboard {
    display: grid; gap: 0.4rem; background: var(--kraft-light);
    border: 2px solid var(--black); padding: 0.6rem; margin-bottom: 0.8rem;
    font-family: 'Courier Prime', monospace; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
}
[data-theme="dark"] .wu-scoreboard { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.wu-sb-cell { text-align: center; padding: 0.25rem; border-radius: 4px; position: relative; }
.wu-sb-cell.active { background: var(--red); color: var(--ink-inverse); }
[data-theme="dark"] .wu-sb-cell.active { background: var(--ink-dim); color: var(--surface-page); }
.wu-sb-cell.leader::after { content: '👑'; position: absolute; top: -0.4rem; right: 0.1rem; font-size: 0.85rem; }
.wu-sb-cell.last::after { content: '🐢'; position: absolute; top: -0.4rem; right: 0.1rem; font-size: 0.85rem; }
.wu-sb-name { font-weight: bold; font-size: 0.8rem; letter-spacing: 1px; }
.wu-sb-score { font-size: 1.4rem; font-family: 'Bebas Neue', sans-serif; }
.wu-sb-type { font-size: 0.6rem; opacity: 0.7; letter-spacing: 1px; }
.wu-aces-tracker {
    text-align: center; padding: 0.4rem; margin-bottom: 0.8rem;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px;
    background: var(--black); color: var(--ink-on-dark);
}
[data-theme="dark"] .wu-aces-tracker { background: var(--surface-raised); color: var(--ink-bright); border: 1px solid var(--ink-dim); }
.wu-ace-pip { display: inline-block; margin: 0 0.2rem; font-size: 1.2rem; }
.wu-ace-pip.found { opacity: 1; color: var(--red); }
[data-theme="dark"] .wu-ace-pip.found { color: var(--ink-bright); }
.wu-ace-pip.pending { opacity: 0.3; }
.wu-turn-banner {
    text-align: center; padding: 0.5rem; margin-bottom: 0.8rem;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px; font-size: 1.4rem;
    background: var(--red); color: var(--ink-inverse);
}
[data-theme="dark"] .wu-turn-banner { background: var(--ink-dim); color: var(--surface-page); }
.wu-message {
    text-align: center; padding: 0.5rem; margin-bottom: 0.8rem; min-height: 1.5rem;
    font-family: 'Courier Prime', monospace;
}
.wu-dice {
    display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.6rem; min-height: 4rem;
}
.wu-die {
    width: 3.5rem; height: 3.5rem; background: var(--white); border: 2px solid var(--black);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; transition: all 0.2s;
}
[data-theme="dark"] .wu-die {
    background: var(--surface-page); border-color: var(--ink-bright); color: var(--ink-bright);
}
.wu-die { position: relative; }
.wu-die.rolling { animation: wu-die-shake 0.1s infinite; }
@keyframes wu-die-shake {
    0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); }
}
.wu-die.assigned-bank { background: var(--success); color: var(--ink-inverse); border-color: var(--success-darker); }
.wu-die.assigned-crank { background: var(--warning); color: var(--text-primary); border-color: var(--warning); }
.wu-die.assigned-bank::after,
.wu-die.assigned-crank::after {
    position: absolute; bottom: -1.1rem; left: 50%; transform: translateX(-50%);
    font-family: 'Bebas Neue', sans-serif; font-size: 0.75rem; letter-spacing: 2px;
    padding: 0.1rem 0.4rem; white-space: nowrap;
}
.wu-die.assigned-bank::after { content: 'BANK'; background: var(--success); color: var(--ink-inverse); }
.wu-die.assigned-crank::after { content: 'CRANK'; background: var(--warning); color: var(--text-primary); }
[data-theme="dark"] .wu-die.assigned-bank,
[data-theme="dark"] .wu-die.assigned-crank {
    background: var(--surface-page); color: var(--ink-bright);
}
[data-theme="dark"] .wu-die.assigned-bank::after,
[data-theme="dark"] .wu-die.assigned-crank::after {
    background: var(--surface-raised); color: var(--ink-bright); border: 1px solid var(--ink-dim);
}
.wu-die.clickable { cursor: pointer; }
.wu-die.clickable:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
.wu-assign {
    background: rgba(255,255,255,.6); border: 2px dashed var(--black); padding: 0.7rem;
    text-align: center; margin-bottom: 0.8rem; font-family: 'Courier Prime', monospace; font-size: 0.85rem;
}
[data-theme="dark"] .wu-assign { background: rgba(242, 237, 227,.05); border-color: var(--ink-dim); color: var(--ink-bright); }
.wu-deck-area {
    display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 0.6rem;
    align-items: center; margin-bottom: 0.8rem; min-height: 7rem;
}
.wu-deck-area > div { text-align: center; }
.wu-deck {
    background: var(--red); color: var(--ink-inverse); padding: 1.5rem 0.4rem;
    border: 3px solid var(--black); border-radius: 6px; min-height: 5.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Courier Prime', monospace; font-size: 0.7rem; letter-spacing: 1px;
    position: relative; box-shadow: 2px 2px 0 var(--black), 4px 4px 0 var(--black);
}
[data-theme="dark"] .wu-deck { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.wu-deck-count { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; margin-top: 0.2rem; }
.wu-current-card {
    display: flex; align-items: center; justify-content: center;
    min-height: 5.5rem; font-family: 'Bebas Neue', sans-serif;
}
.wu-card {
    background: var(--white); border: 2px solid var(--black); border-radius: 6px;
    padding: 0.6rem 0.9rem; min-width: 3.5rem; min-height: 5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 2px 2px 0 var(--black);
}
[data-theme="dark"] .wu-card { background: var(--surface-page); border-color: var(--ink-bright); color: var(--ink-bright); }
.wu-card.red { color: #c0182f; }
.wu-card.special { animation: wu-card-pop 0.4s ease; }
.wu-card.ace { border-color: var(--red); box-shadow: 0 0 20px var(--red); }
.wu-card.two { border-color: var(--warning); box-shadow: 0 0 20px var(--warning); }
[data-theme="dark"] .wu-card.ace,
[data-theme="dark"] .wu-card.two { border-color: var(--ink-bright); }
@keyframes wu-card-pop {
    0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.wu-card-rank { font-size: 1.8rem; line-height: 1; }
.wu-card-suit { font-size: 1.2rem; }
.wu-discard-label, .wu-deck-label { font-size: 0.65rem; letter-spacing: 1.5px; opacity: 0.7; margin-top: 0.3rem; font-family: 'Courier Prime', monospace; }
.wu-discard-card {
    background: var(--white); border: 1px solid var(--black); border-radius: 3px;
    padding: 0.15rem 0.3rem; font-size: 0.7rem; display: inline-block; margin: 0.05rem;
    font-family: 'Courier Prime', monospace;
}
[data-theme="dark"] .wu-discard-card { background: var(--surface-page); border-color: var(--ink-dim); color: var(--ink-bright); }
.wu-discard-card.red { color: #c0182f; }
.wu-discard-mini-grid { font-size: 0.7rem; max-height: 5rem; overflow-y: auto; }
.wu-controls { text-align: center; padding: 0.4rem 0; }
.wu-controls .btn { margin: 0.25rem; }
.wu-gameover {
    background: var(--kraft-light); border: 3px solid var(--red); padding: 1.5rem;
    text-align: center; border-radius: 8px;
}
[data-theme="dark"] .wu-gameover { background: var(--surface-raised); border-color: var(--ink-bright); }
.wu-gameover h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 3px; margin-bottom: 1rem; }
.wu-gameover .winner { color: var(--red); font-size: 2.2rem; font-family: 'Bebas Neue', sans-serif; }
[data-theme="dark"] .wu-gameover .winner { color: var(--ink-bright); }
/* DOUBLE CROSS STYLES */
.dx-area { padding: 1rem 0.5rem; max-width: 700px; margin: 0 auto; }
.dx-setup { background: var(--kraft-light); border: 3px solid var(--black); padding: 2rem; border-radius: 8px; }
[data-theme="dark"] .dx-setup { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.dx-round-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--black); color: var(--ink-on-dark); padding: 0.6rem 1rem;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; margin-bottom: 1rem;
}
[data-theme="dark"] .dx-round-bar { background: var(--surface-raised); border: 1px solid var(--ink-dim); color: var(--ink-bright); }
.dx-round-num { font-size: 1.2rem; }
.dx-round-flavor { font-size: 0.9rem; opacity: 0.85; }
.dx-scoreboard {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    background: var(--kraft-light); border: 2px solid var(--black); padding: 0.75rem;
    margin-bottom: 1rem; font-family: 'Courier Prime', monospace;
}
[data-theme="dark"] .dx-scoreboard { background: var(--surface-raised); border-color: var(--ink-dim); color: var(--ink-bright); }
.dx-scoreboard .sb-cell { text-align: center; }
.dx-scoreboard .sb-name { font-weight: bold; font-size: 0.9rem; letter-spacing: 1px; }
.dx-scoreboard .sb-rounds { font-size: 0.8rem; opacity: 0.75; margin: 0.25rem 0; }
.dx-scoreboard .sb-total { font-size: 1.4rem; font-family: 'Bebas Neue', sans-serif; }
.dx-turn-label {
    text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem;
    letter-spacing: 3px; padding: 0.4rem; background: var(--red); color: var(--ink-inverse);
    margin-bottom: 0.75rem;
}
[data-theme="dark"] .dx-turn-label { background: var(--ink-dim); color: var(--surface-page); }
.dx-message {
    text-align: center; padding: 0.5rem; margin-bottom: 1rem;
    font-family: 'Courier Prime', monospace; min-height: 1.5rem;
}
.dx-scoring-pile {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem; min-height: 1rem; margin-bottom: 1rem;
}
.dx-pile-label {
    font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
    opacity: 0.7; font-family: 'Courier Prime', monospace;
}
.dx-pile-row {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 2px dashed var(--red);
    border-radius: 6px;
    min-width: 4rem;
}
[data-theme="dark"] .dx-pile-row { border-color: var(--ink-dim); }
.dx-pool-label, .dx-discard-label {
    text-align: center; font-size: 0.75rem; letter-spacing: 2px;
    opacity: 0.7; margin-bottom: 0.4rem; font-family: 'Courier Prime', monospace;
}
.dx-pool, .dx-discard {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;
    min-height: 3.5rem; margin-bottom: 1rem;
}
.dx-die {
    width: 3rem; height: 3rem; background: var(--white); border: 2px solid var(--black);
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; cursor: default;
    transition: all 0.2s;
}
[data-theme="dark"] .dx-die {
    background: var(--surface-page); border-color: var(--ink-bright); color: var(--ink-bright);
}
.dx-die.pickable { cursor: pointer; }
.dx-die.pickable:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); border-color: var(--red); }
[data-theme="dark"] .dx-die.pickable:hover { border-color: var(--ink-bright); }
.dx-die.scoring { background: var(--red); color: var(--ink-inverse); border-color: var(--black); transform: scale(1.15); }
[data-theme="dark"] .dx-die.scoring { background: var(--ink-dim); color: var(--surface-page); border-color: var(--ink-bright); }
.dx-die.crossed { background: var(--error); color: var(--ink-inverse); border-color: var(--error-dark); position: relative; }
.dx-die.crossed::after {
    content: '✕'; position: absolute; font-size: 2.5rem; color: var(--text-primary);
    text-shadow: 1px 1px 0 var(--white);
}
.dx-die.matched {
    background: var(--warning); color: var(--text-primary);
    animation: dx-shake 0.4s ease;
}
@keyframes dx-shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
.dx-die.discarded { opacity: 0.35; }
.dx-die.survived { background: var(--success); color: var(--ink-inverse); border-color: var(--success-darker); }
.dx-controls { text-align: center; padding: 0.5rem 0; }
.dx-controls .btn { margin: 0.25rem; }
.dx-gameover {
    background: var(--kraft-light); border: 3px solid var(--red); padding: 2rem;
    text-align: center; border-radius: 8px;
}
[data-theme="dark"] .dx-gameover { background: var(--surface-raised); border-color: var(--ink-bright); }
.dx-gameover h3 {
    font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 3px; margin-bottom: 1rem;
}
.dx-gameover .winner { color: var(--red); font-size: 2.5rem; }
[data-theme="dark"] .dx-gameover .winner { color: var(--ink-bright); }
.dx-final-scores { font-family: 'Courier Prime', monospace; margin: 1rem 0; }
/* [SDG] DOUBLE DOWN ------------------------------------------------- */

/* DOUBLE DOWN STYLES */
.dd-game {
    max-width: 500px;
    margin: 0 auto;
}
.dd-game-area {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid var(--black);
    padding: 1.25rem;
    margin-top: 0.5rem;
    border-radius: 8px;
}
.dd-players {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}
.dd-player {
    text-align: center;
    padding: 0.75rem 1.25rem;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    min-width: 100px;
}
.dd-player.active {
    border-color: var(--warning-light);
    box-shadow: 0 0 15px rgba(251,191,36,0.3);
}
.dd-player.winner {
    border-color: var(--success-light);
    background: rgba(74,222,128,0.15);
}
.dd-player-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    margin-bottom: 0.25rem;
}
.dd-player-score {
    font-family: 'Permanent Marker', cursive;
    font-size: 2rem;
    color: white;
}
.dd-player.active .dd-player-score {
    color: var(--warning-light);
}
.dd-tier-display {
    text-align: center;
    margin-bottom: 1rem;
}
.dd-tier-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
}
.dd-tier-multiplier {
    font-family: 'Permanent Marker', cursive;
    font-size: 2.5rem;
    color: var(--warning-light);
    text-shadow: 0 0 20px rgba(251,191,36,0.5);
}
.dd-tier-pips {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.dd-pip {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.dd-pip.active {
    background: var(--warning-light);
    border-color: var(--warning-light);
    color: var(--text-primary);
}
.dd-pip.cleared {
    background: var(--success-light);
    border-color: var(--success-light);
    color: var(--text-primary);
}
.dd-dice-area {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dd-dice-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.dd-die {
    width: 50px;
    height: 50px;
    background: white;
    border: 3px solid var(--black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
}
.dd-die.rolling {
    animation: dd-roll 0.1s infinite;
}
@keyframes dd-roll {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}
.dd-die.new {
    animation: dd-pop 0.4s ease;
}
@keyframes dd-pop {
    0% { transform: scale(0) rotate(180deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* [SDG] DOUBLE DOWN ------------------------------------------------- */

.dd-total-display {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: white;
    letter-spacing: 2px;
}
.dd-total-display .total-num {
    color: var(--warning-light);
    font-size: 1.5rem;
}
.dd-target-display {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin-top: 0.25rem;
}
.dd-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    color: white;
    padding: 0.75rem;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    margin-bottom: 1rem;
    min-height: 2.5rem;
}
.dd-message.bust {
    color: var(--error-lightest);
    background: rgba(220,38,38,0.2);
}
.dd-message.success {
    color: var(--success-light);
    background: rgba(34,197,94,0.2);
}
.dd-message.cashout {
    color: var(--warning-light);
    background: rgba(251,191,36,0.2);
}
.dd-message.fullsend {
    color: var(--ink-inverse);
    background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(236,72,153,0.4));
    animation: fullsend-pulse 0.5s ease-in-out 3;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(139,92,246,0.8);
}
@keyframes fullsend-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
.dd-controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.dd-controls .btn {
    min-width: 120px;
}
/* [SDG] DOUBLE DOWN ------------------------------------------------- */

.dd-potential {
    text-align: center;
    margin-top: 0.75rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
}
.dd-potential .potential-pts {
    color: var(--success-light);
    font-weight: bold;
}
.dd-history-container {
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 0.75rem;
}
.dd-history-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}
.dd-history {
    max-height: 120px;
    overflow-y: auto;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    text-align: left;
    padding-right: 0.5rem;
}
.dd-history::-webkit-scrollbar {
    width: 4px;
}
.dd-history::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}
.dd-history::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}
.dd-history-entry {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dd-history-entry.bust {
    color: var(--error-lighter);
}
.dd-history-entry.cashout {
    color: var(--warning-light);
}
.dd-history-entry.win {
    color: var(--success-light);
}
.dd-history-entry.fullsend {
    color: var(--purple-light);
    font-weight: bold;
}
.dd-setup {
    text-align: center;
    padding: 2rem 1rem;
}
.dd-setup-title {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    color: var(--warning-light);
    margin-bottom: 1.5rem;
}
.dd-player-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.dd-count-label {
    font-family: 'Courier Prime', monospace;
    color: rgba(255,255,255,0.7);
    margin-right: 0.5rem;
}
.dd-count-btn {
    min-width: 40px;
    padding: 0.4rem 0.75rem;
    background: var(--game-dark);
    color: white;
}
.dd-count-btn.active {
    background: var(--warning-light);
    color: var(--text-secondary);
}
.dd-setup-players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.dd-setup-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.dd-setup-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}
.dd-toggle-btn {
    min-width: 100px;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}
.dd-toggle-btn.human {
    background: #3b82f6;
    color: white;
}
.dd-toggle-btn.cpu {
    background: #6b7280;
    color: white;
}
/* New DD simultaneous play styles */
.dd-scoreboard {
    text-align: center;
    margin-bottom: 1rem;
}
.dd-score-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.dd-scores {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.dd-score-item {
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    min-width: 80px;
}
.dd-score-item.winner {
    border-color: var(--success-light);
    background: rgba(74,222,128,0.15);
}
.dd-score-name {
    display: block;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
}
.dd-score-value {
    display: block;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    color: var(--warning-light);
}
.dd-round-info {
    text-align: center;
    margin-bottom: 1rem;
}
.dd-round-info .dd-target-display {
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    color: white;
    background: rgba(251,191,36,0.2);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    display: inline-block;
}
.dd-players-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.dd-player-hand {
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 0.75rem;
}
.dd-player-hand.stayed {
    border-color: var(--success-light);
    background: rgba(74,222,128,0.1);
}
.dd-player-hand.busted {
    border-color: var(--error-light);
    background: rgba(239,68,68,0.1);
    opacity: 0.6;
}
.dd-player-hand.doubling {
    border-color: var(--warning-light);
    box-shadow: 0 0 10px rgba(251,191,36,0.3);
}
.dd-player-hand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.dd-player-hand-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: white;
    letter-spacing: 1px;
}
.dd-player-hand-status {
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}
.dd-player-dice {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.dd-player-dice .dd-die {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
}
.dd-player-dice .dd-die.double-die {
    border-width: 3px;
}
.dd-player-dice .dd-die.double-die.success {
    border-color: var(--success-light);
    background: var(--success-bg-light);
}
.dd-player-dice .dd-die.double-die.bust {
    border-color: var(--error-light);
    background: var(--error-bg-light);
}
.dd-player-hand-total {
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
}
.dd-player-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.dd-player-actions .btn {
    flex: 1;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}
/* There was an orphan `}` here. At the top level CSS reads it as the start of a
   selector, so it swallowed the `.dd-start-btn` rule below and that rule never
   applied at all. Removing it makes the rule live for the first time. */
.dd-start-btn {
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
}
/* [SDG] MEDIA QUERIES ----------------------------------------------- */

/* ===========================================
   MOBILE OPTIMIZATIONS — fit gameplay on one screen
   Targets: BINARY, ECHO, R.A.M., WIND IT UP, DOUBLE CROSS
   =========================================== */
@media (max-width: 600px) {
    /* Compact game info bars across all the new games */
    #ram-demo .game-info-bar,
    #echo-demo .game-info-bar,
    #binary-demo .game-info-bar,
    #wind-it-up-demo .game-info-bar,
    #double-cross-demo .game-info-bar {
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
        line-height: 1.3;
    }
    #ram-demo .game-info-bar .game-components,
    #echo-demo .game-info-bar .game-components,
    #binary-demo .game-info-bar .game-components,
    #wind-it-up-demo .game-info-bar .game-components,
    #double-cross-demo .game-info-bar .game-components {
        display: none; /* hide components line on mobile */
    }
    #ram-demo .how-to-play,
    #echo-demo .how-to-play,
    #binary-demo .how-to-play,
    #wind-it-up-demo .how-to-play,
    #double-cross-demo .how-to-play {
        margin: 0.3rem 0;
    }
    #ram-demo .how-to-play summary,
    #echo-demo .how-to-play summary,
    #binary-demo .how-to-play summary,
    #wind-it-up-demo .how-to-play summary,
    #double-cross-demo .how-to-play summary {
        font-size: 0.8rem; padding: 0.3rem 0.5rem;
    }

    /* R.A.M. mobile */
    .ram-area { padding: 0.4rem 0.3rem; }
    .ram-scoreboard {
        padding: 0.35rem; margin-bottom: 0.4rem; gap: 0.25rem;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    }
    .ram-sb-name { font-size: 0.7rem; }
    .ram-sb-score { font-size: 1.1rem; }
    .ram-sb-type { font-size: 0.55rem; }
    .ram-sets-tracker { padding: 0.3rem; font-size: 0.75rem; margin-bottom: 0.4rem; letter-spacing: 1px; }
    .ram-set-pip { margin: 0 0.15rem; padding: 0.1rem 0.35rem; font-size: 0.75rem; }
    .ram-turn-banner { padding: 0.3rem; font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.4rem; }
    .ram-message { padding: 0.25rem; font-size: 0.75rem; margin-bottom: 0.4rem; min-height: 1.2rem; }
    .ram-die-and-collected { padding: 0.35rem; gap: 0.5rem; margin-bottom: 0.4rem; }
    .ram-die { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; border-width: 2px; }
    .ram-die-label { font-size: 0.6rem; }
    .ram-grid { gap: 0.25rem; padding: 0.3rem; margin-bottom: 0.4rem; }
    .ram-grid.d4-mode { max-width: 280px; }
    .ram-card-rank { font-size: 1rem; }
    .ram-card-suit { font-size: 0.65rem; }
    .ram-card.face-down::after { font-size: 1.1rem; }
    .ram-collected-mini { width: 1.55rem; height: 2rem; font-size: 0.85rem; }

    /* ECHO mobile */
    .echo-area { padding: 0.4rem 0.3rem; }
    .echo-scoreboard {
        padding: 0.35rem; margin-bottom: 0.4rem; gap: 0.25rem;
        grid-template-columns: repeat(auto-fit, minmax(55px, 1fr));
    }
    .echo-sb-name { font-size: 0.7rem; }
    .echo-sb-status { font-size: 0.55rem; }
    .echo-mode-banner { padding: 0.25rem; font-size: 0.7rem; letter-spacing: 1px; margin-bottom: 0.3rem; }
    .echo-turn-banner { padding: 0.3rem; font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.4rem; }
    .echo-message { padding: 0.25rem; font-size: 0.75rem; margin-bottom: 0.3rem; min-height: 1.2rem; }
    .echo-sequence-label { font-size: 0.6rem; margin-bottom: 0.2rem; }
    .echo-sequence { padding: 0.3rem; gap: 0.2rem; margin-bottom: 0.4rem; min-height: 2.2rem; }
    .echo-seq-card { width: 1.3rem; height: 1.85rem; font-size: 0.85rem; }
    .echo-grid { gap: 0.3rem; padding: 0.35rem; max-width: 280px; margin-bottom: 0.4rem; }
    .echo-card-rank { font-size: 1rem; }
    .echo-card-suit { font-size: 0.65rem; }
    .echo-card.face-down::after { font-size: 1.1rem; }

    /* BINARY mobile */
    .bin-area { padding: 0.4rem 0.3rem; }
    .bin-scoreboard {
        padding: 0.35rem; margin-bottom: 0.4rem; gap: 0.25rem;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    }
    .bin-sb-name { font-size: 0.7rem; }
    .bin-sb-status { font-size: 0.6rem; }
    .bin-turn-banner { padding: 0.3rem; font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.4rem; }
    .bin-message { padding: 0.25rem; font-size: 0.72rem; margin-bottom: 0.3rem; min-height: 1.2rem; }
    .bin-coin-and-collected { padding: 0.35rem; gap: 0.5rem; margin-bottom: 0.4rem; }
    .bin-coin { width: 2.6rem; height: 2.6rem; font-size: 0.85rem; border-width: 2px; letter-spacing: 0.5px; }
    .bin-coin-label { font-size: 0.55rem; letter-spacing: 1px; }
    .bin-streak-counter { font-size: 0.85rem; letter-spacing: 1px; margin-top: 0.1rem; }
    .bin-collected-mini { width: 1.55rem; height: 2rem; font-size: 0.75rem; padding: 0.1rem; }
    .bin-grid { gap: 0.3rem; padding: 0.35rem; max-width: 280px; margin-bottom: 0.4rem; }
    .bin-card-rank { font-size: 1rem; }
    .bin-card-suit { font-size: 0.65rem; }
    .bin-card.face-down::after { font-size: 1.1rem; }

    /* Make setup screens slightly tighter so Start button is visible */
    .ram-setup, .echo-setup, .bin-setup { padding: 1rem; }
    .ram-setup h3, .echo-setup h3, .bin-setup h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
    .ram-player-setup, .echo-player-setup, .bin-player-setup { max-width: 100%; }
    .ram-player-row, .echo-player-row, .bin-player-row { padding: 0.3rem 0.4rem; gap: 0.4rem; }
    .ram-pcount-btn, .echo-pcount-btn, .bin-pcount-btn { font-size: 0.95rem; padding: 0.3rem 0.7rem; letter-spacing: 1.5px; }
    .echo-mode-btn { font-size: 0.75rem; padding: 0.25rem 0.5rem; letter-spacing: 1px; }
    .echo-mode-row { gap: 0.25rem; }

    /* WIND IT UP mobile */
    .wu-scoreboard {
        padding: 0.35rem; margin-bottom: 0.4rem; gap: 0.25rem;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    }
    .wu-die { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }
    .wu-die.assigned-bank::after, .wu-die.assigned-crank::after {
        font-size: 0.55rem; padding: 0.1rem 0.3rem;
    }
    .wu-deck-area { padding: 0.35rem; gap: 0.3rem; margin-bottom: 0.4rem; }

    /* DOUBLE CROSS mobile */
    .dx-area { padding: 0.4rem 0.3rem; }
    .dx-round-bar { padding: 0.35rem 0.6rem; margin-bottom: 0.4rem; }
    .dx-round-num { font-size: 0.95rem; }
    .dx-round-flavor { font-size: 0.7rem; }
    .dx-scoreboard {
        padding: 0.4rem; margin-bottom: 0.4rem; gap: 0.3rem;
    }
}
/* [SDG] OUTMANEUVER ------------------------------------------------- */

/* OUTmaneuver STYLES */
.tir-game {
    max-width: 400px;
    margin: 0 auto;
}
.tir-game-area {
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
    border: 3px solid var(--black);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1rem;
    text-align: center;
}
.tir-players {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.tir-player {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    opacity: 0.5;
    transition: all 0.3s;
}
.tir-player.active {
    opacity: 1;
    transform: scale(1.05);
}
.tir-player.x.active {
    background: rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}
.tir-player.o.active {
    background: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}
.tir-player-symbol {
    font-size: 1.5rem;
    font-weight: bold;
}
.tir-player.x .tir-player-symbol {
    color: var(--error-light);
}
.tir-player.o .tir-player-symbol {
    color: var(--info-light);
}
.tir-player.t .tir-player-symbol {
    color: var(--warning);
}
.tir-player.t.active {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}
.tir-players-3 {
    justify-content: center;
    gap: 1rem;
}
.tir-players-3 .tir-player {
    min-width: 70px;
}
.tir-player-score {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin-top: 0.25rem;
}
.tir-line-type {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    opacity: 0.4;
}
.tir-line-type.scored {
    opacity: 1;
    background: var(--success);
    color: white;
}
.tir-player-trigger {
    font-family: 'Courier Prime', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.05em;
}
.tir-player-hand {
    font-family: 'Courier Prime', monospace;
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.tir-turn-indicator {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.tir-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 240px;
    margin: 0 auto 1rem;
}
.tir-cell {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}
.tir-cell:hover {
    background: rgba(255,255,255,0.15);
}
.tir-cell.highlight {
    animation: tir-pulse 0.5s ease;
    background: rgba(251, 191, 36, 0.3);
    border-color: var(--warning-light);
}
.tir-cell.selectable {
    border-color: var(--success-light);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
    animation: tir-selectable 1s infinite;
}
@keyframes tir-selectable {
    0%, 100% { box-shadow: 0 0 5px rgba(74, 222, 128, 0.4); }
    50% { box-shadow: 0 0 15px rgba(74, 222, 128, 0.6); }
}
@keyframes tir-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.tir-cell-num {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
    font-family: 'Courier Prime', monospace;
}
.tir-cell.x {
    color: var(--error-light);
}
.tir-cell.o {
    color: var(--info-light);
}
.tir-cell.t {
    color: var(--warning);
}
.tir-cell.win {
    animation: tir-win 0.6s ease;
    background: rgba(74, 222, 128, 0.3);
    border-color: var(--success-light);
}
@keyframes tir-win {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.tir-dice-area {
    margin-bottom: 1rem;
}
.tir-die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #fff, #e0e0e0);
    border: 3px solid #333;
    border-radius: 10px;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.8rem;
    color: var(--text-secondary);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}
.tir-die.rolling {
    animation: tir-roll 0.1s infinite;
}
@keyframes tir-roll {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}
/* [SDG] OUTMANEUVER ------------------------------------------------- */

.tir-die.odd {
    background: linear-gradient(145deg, #fca5a5, #ef4444);
    color: white;
}
.tir-die.even {
    background: linear-gradient(145deg, #93c5fd, #3b82f6);
    color: white;
}
.tir-cell.selected {
    border-color: var(--warning-light);
    background: rgba(251, 191, 36, 0.3);
}
.tir-message {
    font-family: 'Courier Prime', monospace;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 1rem;
    min-height: 1.5em;
}
.tir-message.win {
    color: var(--success-light);
    font-weight: bold;
}
.tir-message.bad {
    color: var(--error-lighter);
}
.tir-controls {
    margin-bottom: 0.75rem;
}
.tir-history-container {
    margin-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 0.75rem;
}
.tir-history-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}
.tir-history {
    max-height: 100px;
    overflow-y: auto;
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-align: left;
}
.tir-history::-webkit-scrollbar {
    width: 4px;
}
.tir-history::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}
.tir-history-entry {
    padding: 0.15rem 0;
}
/* [SDG] THE CULL ---------------------------------------------------- */


/* THE CULL STYLES */
.cull-game {
    max-width: 500px;
    margin: 0 auto;
}
.cull-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 0.5rem;
    margin-top: 0.5rem;
}
.cull-scores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.cull-round-indicator {
    width: 100%;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    color: var(--purple-light);
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}
.cull-score {
    text-align: center;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    min-width: 50px;
    color: white;
}
.cull-score-label {
    display: block;
    font-size: 0.6rem;
    font-family: 'Courier Prime', monospace;
    opacity: 0.8;
}
.cull-score-value {
    display: block;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
}
.cull-vs {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.8rem;
    color: rgba(0,0,0,0.4);
}
.cull-board {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.25rem;
    max-width: 320px;
    margin: 0 auto;
}
.cull-corner {
    background: rgba(0,0,0,0.05);
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 60px;
    overflow: hidden;
}
.cull-corner:nth-child(1) { grid-area: 1 / 1; }
.cull-corner:nth-child(2) { grid-area: 1 / 3; }
.cull-corner:nth-child(4) { grid-area: 3 / 1; }
.cull-corner:nth-child(5) { grid-area: 3 / 3; }
.cull-corner.hidden-player { display: none; }
.cull-corner.active {
    border-color: var(--purple-light);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}
.cull-center {
    grid-area: 2 / 2;
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border: 3px solid #a855f7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    min-height: 70px;
}
.cull-pool-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.45rem;
    letter-spacing: 0.05em;
    color: rgba(0,0,0,0.6);
}
.cull-dice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    max-width: 72px;
}
.cull-die {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-family: 'Permanent Marker', cursive;
    font-size: 0.55rem;
    border: 1px solid #333;
}
.cull-die.positive {
    background: linear-gradient(145deg, #bbf7d0, #86efac);
    color: var(--success-darker);
}
.cull-die.negative {
    background: linear-gradient(145deg, #fecaca, #fca5a5);
    color: var(--error-dark);
}
.cull-die.doomed {
    opacity: 0.3;
    border-color: var(--text-muted);
}
.cull-pool-sum {
    font-family: 'Courier Prime', monospace;
    font-size: 0.5rem;
    color: rgba(0,0,0,0.7);
}
.cull-die-center {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #a855f7, #7c3aed);
    border: 2px solid #fff;
    border-radius: 6px;
    font-family: 'Permanent Marker', cursive;
    font-size: 0.9rem;
    color: white;
}
.cull-die-center.rolling {
    animation: cull-roll 0.1s infinite;
}
@keyframes cull-roll {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}
/* [SDG] THE CULL ---------------------------------------------------- */

.cull-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.4rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
}
.cull-field-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.35rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.1em;
    margin-top: 0.15rem;
}
.cull-center-dice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin-top: 0.15rem;
    min-height: 18px;
}
.cull-center-dice .cull-die {
    border-color: var(--purple-light);
}
.cull-message {
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 0.95rem;
    margin: 0.4rem 0;
    min-height: 1.2rem;
}
.cull-message.win {
    color: var(--success-dark);
}
.cull-message.lose {
    color: var(--error);
}
.cull-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.4rem 0;
}
.cull-history-container {
    margin-top: 0.5rem;
}
.cull-history-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.5);
    margin-bottom: 0.15rem;
}
.cull-history {
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 0.35rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.65rem;
    max-height: 60px;
    overflow-y: auto;
}
.cull-history-entry {
    padding: 0.1rem 0;
}
.cull-setup {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1.5rem;
    margin-top: 1rem;
    text-align: center;
}
.cull-setup-title {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.cull-player-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cull-player-count span {
    font-family: 'Courier Prime', monospace;
    font-size: 0.9rem;
}
.cull-count-buttons {
    display: flex;
    gap: 0.5rem;
}
.cull-count-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--black);
    background: white;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.2rem;
    cursor: pointer;
}
.cull-count-btn.active {
    background: var(--black);
    color: white;
}
.cull-player-setup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 250px;
    margin: 0 auto;
}
.cull-player-config {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}
.cull-player-config.hidden {
    display: none;
}
.cull-player-name {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.1rem;
}
.cull-type-btn {
    padding: 0.3rem 0.75rem;
    border: 2px solid var(--black);
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    min-width: 70px;
}
.cull-type-btn.human {
    background: var(--success);
    color: white;
}
.cull-type-btn.cpu {
    background: var(--error-light);
    color: white;
}
.cull-game-area.hidden {
    display: none;
}
/* [SDG] WHITTLE ----------------------------------------------------- */


/* WHITTLE STYLES */
.whittle-game {
    max-width: 500px;
    margin: 0 auto;
}
.whittle-setup {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1rem;
    margin-top: 0.5rem;
    text-align: center;
}
.whittle-setup-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}
.whittle-player-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.whittle-count-buttons {
    display: flex;
    gap: 0.25rem;
}
.whittle-count-btn {
    padding: 0.25rem 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    background: white;
    border: 2px solid var(--black);
    cursor: pointer;
}
.whittle-count-btn.active {
    background: var(--black);
    color: white;
}
.whittle-player-setup {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.whittle-player-config {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: white;
    border: 2px solid var(--black);
    padding: 0.25rem 0.5rem;
}
.whittle-player-config.hidden {
    display: none;
}
.whittle-player-name {
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
}
.whittle-type-btn {
    font-family: 'Courier Prime', monospace;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--black);
    cursor: pointer;
}
.whittle-type-btn.human {
    background: var(--success);
    color: white;
}
.whittle-type-btn.cpu {
    background: var(--error-light);
    color: white;
}
.whittle-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 0.5rem;
    margin-top: 0.5rem;
}
.whittle-game-area.hidden {
    display: none;
}
.whittle-round-info {
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: var(--purple);
    margin-bottom: 0.5rem;
}
.whittle-players {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.whittle-player {
    background: white;
    border: 2px solid #333;
    border-radius: 6px;
    padding: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.whittle-player.winner {
    border-color: var(--success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}
.whittle-player.in-tiebreak {
    border-color: var(--warning);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.whittle-player-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 80px;
}
.whittle-player-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    font-weight: bold;
}
.whittle-player-tokens {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.8rem;
    color: var(--warning);
}
.whittle-dice-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    flex: 1;
}
.whittle-die {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    border: 2px solid #333;
    min-width: 32px;
    background: linear-gradient(145deg, #e0e0e0, #f5f5f5);
}
.whittle-die.rolled {
    background: linear-gradient(145deg, #bbf7d0, #86efac);
}
.whittle-die.doomed {
    background: linear-gradient(145deg, #fecaca, #fca5a5);
    border-color: var(--error-light);
}
.whittle-die.tied {
    animation: pulse-orange 0.5s infinite alternate;
}
@keyframes pulse-orange {
    from { box-shadow: 0 0 4px #f59e0b; }
    to { box-shadow: 0 0 8px #f59e0b; }
}
/* [SDG] WHITTLE ----------------------------------------------------- */

.whittle-die.removed {
    opacity: 0.3;
    text-decoration: line-through;
}
.whittle-die-type {
    font-family: 'Courier Prime', monospace;
    font-size: 0.5rem;
    color: var(--text-muted);
}
.whittle-die-value {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.9rem;
}
.whittle-player-total {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    min-width: 40px;
    text-align: right;
}
.whittle-player-total .tiebreak-score {
    color: var(--warning);
    font-size: 0.85rem;
}
.whittle-graveyard {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.25rem;
    margin-top: 0.25rem;
    border-top: 1px dashed #ccc;
}
.whittle-graveyard-label {
    font-size: 0.7rem;
}
.whittle-dead-die {
    font-family: 'Courier Prime', monospace;
    font-size: 0.55rem;
    color: var(--text-muted-lighter);
    text-decoration: line-through;
    background: var(--text-disabled);
    padding: 0.1rem 0.25rem;
    border-radius: 2px;
}
.whittle-message {
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 0.95rem;
    margin: 0.4rem 0;
    min-height: 1.2rem;
}
.whittle-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.4rem 0;
}
.whittle-history-container {
    margin-top: 0.5rem;
}
.whittle-history-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.5);
    margin-bottom: 0.15rem;
}
.whittle-history {
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 0.35rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.6rem;
    max-height: 50px;
    overflow-y: auto;
}
.whittle-history-entry {
    padding: 0.1rem 0;
}
/* [SDG] B.U.M.P. ---------------------------------------------------- */


/* B.U.M.P. STYLES */
.bump-game {
    max-width: 500px;
    margin: 0 auto;
}
.bump-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1rem;
    margin-top: 1rem;
}
.bump-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.bump-scores {
    display: flex;
    gap: 1.5rem;
}
.you-score { color: var(--success-light); }
.opp-score { color: var(--error-lighter); }
/* [SDG] B.U.M.P. ---------------------------------------------------- */

.bump-battlefield {
    background: white;
    border: 2px solid var(--black);
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.bump-bf-header {
    display: grid;
    grid-template-columns: 60px 1fr 80px 1fr 60px;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    text-align: center;
    align-items: center;
}
.bump-bf-header .you-label { color: var(--success); }
.bump-bf-header .opp-label { color: var(--error-light); }
.bump-bf-header .result-label { color: var(--text-muted); font-size: 0.75rem; }
.bump-bf-header .die-label { color: var(--text-muted-lighter); font-size: 0.7rem; }
.bump-bf-row {
    display: grid;
    grid-template-columns: 60px 1fr 80px 1fr 60px;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.4rem;
}
.bump-bf-die {
    width: 44px;
    height: 44px;
    border: 2px solid var(--black);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    font-family: 'Bebas Neue', sans-serif;
}
.bump-bf-die .die-val {
    font-size: 1.2rem;
    line-height: 1;
}
.bump-bf-die.you-die {
    border-color: var(--success);
    justify-self: center;
}
.bump-bf-die.opp-die {
    border-color: var(--error-light);
    justify-self: center;
}
.bump-bf-die.empty {
    background: #f5f5f5;
    border-style: dashed;
    border-color: var(--text-disabled);
    color: var(--text-muted-lighter);
}
.bump-bf-type {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: var(--text-muted-lighter);
    text-align: center;
}
.bump-bf-result {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
}
.bump-bf-result .result-val {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    min-width: 28px;
    text-align: center;
}
.bump-bf-result .result-val.you-won {
    background: var(--success-bg-light);
    color: var(--success-darker);
}
.bump-bf-result .result-val.opp-won {
    background: var(--error-bg-light);
    color: var(--error-dark);
}
.bump-bf-result .result-val.no-clash {
    color: var(--text-disabled);
    background: transparent;
}
.bump-bf-scorers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 2px dashed #ccc;
}
.bump-bf-scorer-col {
    text-align: center;
}
.bump-bf-scorer-col h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.bump-bf-scorer-col.you h4 { color: var(--success); }
.bump-bf-scorer-col.opp h4 { color: var(--error-light); }
.bump-bf-scorer-dice {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.bump-bf-scorer {
    width: 40px;
    height: 50px;
    border: 2px solid var(--black);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    font-family: 'Bebas Neue', sans-serif;
}
.bump-bf-scorer .die-val {
    font-size: 1.1rem;
    line-height: 1;
}
.bump-bf-scorer .die-type {
    font-size: 0.55rem;
    color: var(--text-muted);
}
.bump-bf-scorer.you { border-color: var(--success); }
.bump-bf-scorer.opp { border-color: var(--error-light); }
.bump-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    padding: 0.75rem;
    background: var(--kraft);
    border: 2px dashed var(--black);
    margin: 1rem 0;
    min-height: 2.5rem;
}
.bump-your-dice {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    min-height: 60px;
}
.bump-die {
    width: 52px;
    height: 52px;
    border: 3px solid var(--black);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Bebas Neue', sans-serif;
}
.bump-die:hover {
    transform: scale(1.05);
}
.bump-die.selected-scorer {
    background: var(--success-light);
    border-color: var(--success);
}
.bump-die .die-value {
    font-size: 1.3rem;
    line-height: 1;
}
.bump-die .die-type {
    font-size: 0.6rem;
    color: var(--text-muted);
}
.bump-die.selected-scorer .die-type {
    color: var(--success-darker);
}
.bump-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.bump-commentary {
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    background: #1a1a1a;
    color: var(--text-muted-lightest);
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 0.75rem;
    max-height: 180px;
    overflow-y: auto;
}
.bump-commentary .clash-line { color: var(--warning-light); }
.bump-commentary .pass-line { color: var(--text-muted-lightest); }
.bump-commentary .score-line { color: var(--purple-light); font-weight: bold; }
.bump-commentary .total-line { color: var(--success-light); }
.bump-commentary .opp-line { color: var(--error-lighter); }
.bump-commentary .grand-line { color: var(--info-lighter); font-weight: bold; }
/* HODGEPODGE STYLES */
.hodgepodge-game {
    max-width: 700px;
    margin: 0 auto;
}
/* [SDG] HODGEPODGE -------------------------------------------------- */

.hp-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1rem;
    margin-top: 1rem;
}
.hp-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.hp-phase {
    font-size: 1.1rem;
    color: var(--red);
}
.hp-dealer-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 1.5rem 0;
}
.hp-deck {
    cursor: pointer;
    transition: transform 0.2s;
}
.hp-deck:hover {
    transform: scale(1.05);
}
/* ---- SUIT MARKS — one inline sprite, shared by RSVP and HODGEPODGE.
   Colour is PINNED to the deck's 2-red/2-black split rather than themed.
   That split is the whole reason the physical deck doubles as an ordinary
   52-card deck, so it is the mechanic, not decoration — the same argument
   that pins MOLT's and RED FLAGS' card faces. The marks always sit on a
   light card face, so near-black reads in both themes.
   Class names are deliberately NOT .suit-rock etc: .suit-btn.rock already
   exists and sets border-color. ---- */
.sdg-suit { width: 1em; height: 1em; display: block; flex: 0 0 auto; }
.sdg-suit.is-rock, .sdg-suit.is-void { color: #17150f; }
.sdg-suit.is-scissors, .sdg-suit.is-paper { color: #c0392b; }
.hp-card {
    width: 60px;
    height: 84px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 2px solid var(--black);
    background: white;
    color: #17150f;
}
.hp-card .sdg-suit { width: 1.55rem; height: 1.55rem; }
.hp-card.back {
    background: var(--red);
    color: var(--red-dark);
}
.hp-player-card.rock {
    border-color: var(--text-muted);
    color: #17150f;
}
/* Borders follow the same 2-red/2-black split as the marks; the old
   four-colour scheme (grey/red/blue/purple) never matched the deck. */
.hp-player-card.rock, .hp-player-card.void { border-color: #17150f; color: #17150f; }
.hp-player-card.scissors, .hp-player-card.paper { border-color: #c0392b; color: #c0392b; }
.hp-player-card .sdg-suit { width: .95em; height: .95em; }
.hp-suit-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.hp-selected-suits {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
}
.hp-suit-buttons {
    display: flex;
    gap: 0.5rem;
}
.suit-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    padding: 0;
    border: 3px solid var(--black);
    background: white;
}
/* Selection is a RING, not an inversion. Inverting the fill means inverting
   the mark on top of it, and these marks are two-tone — Void is a heptagon
   with a pale spiral — so flipping them to a single light ink collapses the
   whole thing into a solid blob. A ring leaves the mark alone. */
.suit-btn.selected {
    background: #ffffff;
    box-shadow: 0 0 0 3px #17150f;
}
.suit-btn.rock, .suit-btn.void { border-color: #17150f; }
.suit-btn.scissors, .suit-btn.paper { border-color: #c0392b; }
.suit-btn.rock.selected, .suit-btn.void.selected { box-shadow: 0 0 0 3px #17150f; }
.suit-btn.scissors.selected, .suit-btn.paper.selected { box-shadow: 0 0 0 3px #c0392b; }
.suit-btn .sdg-suit { width: 1.6rem; height: 1.6rem; }
.hp-selected-suits .sdg-suit { width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; }
.hp-flipped-card {
    min-width: 60px;
    min-height: 84px;
}
.hp-flipped-card .hp-card {
    animation: hpFlip 0.3s ease-out;
}
@keyframes hpFlip {
    0% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}
/* [SDG] HODGEPODGE -------------------------------------------------- */

.hp-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 1.1rem;
    padding: 1rem;
    background: var(--kraft);
    border: 2px dashed var(--black);
    margin: 1rem 0;
}
.hp-players-area {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
}
.hp-player {
    background: white;
    border: 2px solid var(--black);
    padding: 0.75rem;
    min-width: 140px;
    text-align: center;
}
.hp-player.active {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red);
}
.hp-player.dealer {
    background: var(--kraft);
}
.hp-player-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}
.hp-player-tokens {
    font-family: 'Courier Prime', monospace;
    font-size: 0.9rem;
}
.hp-player-cards {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.hp-player-card {
    width: 32px;
    height: 44px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 1px solid var(--black);
    background: white;
    position: relative;
}
.hp-player-card.red {
    color: var(--red);
}
.hp-player-card.black {
    color: var(--text-primary);
}
.hp-player-card.covered::after {
    content: '●';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    color: gold;
    text-shadow: 0 0 2px var(--black);
}
.hp-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.hp-player-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Courier Prime', monospace;
}
.hp-player-select select {
    padding: 0.4rem;
    font-size: 1rem;
    border: 2px solid var(--black);
    background: white;
}
.hp-guess-buttons {
    display: flex;
    gap: 0.5rem;
}
.hp-guess-buttons .btn {
    min-width: 80px;
}
.hp-guess-buttons .btn.red-btn {
    background: var(--red);
    color: white;
}
.hp-guess-buttons .btn.black-btn {
    background: var(--black);
    color: white;
}
.hp-guess-buttons .btn.odd-btn {
    background: #5a4fcf;
    color: white;
}
.hp-guess-buttons .btn.even-btn {
    background: #2d8a4e;
    color: white;
}
.hp-countdown {
    font-family: 'Permanent Marker', cursive;
    font-size: 2rem;
    color: var(--red);
}
@media (max-width: 500px) {
    .hp-player {
        min-width: 100px;
        padding: 0.5rem;
    }
    .hp-player-card {
        width: 26px;
        height: 36px;
        font-size: 0.75rem;
    }
    .hp-card {
        width: 50px;
        height: 70px;
        font-size: 2rem;
    }
}
/* BOMB BOMB Styles */
.nz-game {
    max-width: 600px;
    margin: 0 auto;
}
/* [SDG] ONE MORE ROLL ----------------------------------------------- */

/* ONE MORE ROLL Styles */
.omr-game {
    max-width: 600px;
    margin: 0 auto;
}
.omr-game-area {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    border: 3px solid var(--black);
    padding: 1.5rem;
    margin-top: 1rem;
}
.omr-players {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.omr-player {
    background: rgba(255,255,255,0.1);
    padding: 0.75rem;
    border: 2px solid #444;
    text-align: center;
}
.omr-player.rolling {
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(255,215,0,0.3);
}
.omr-player.banked {
    border-color: var(--success-light);
    background: rgba(74,222,128,0.1);
}
.omr-player.busted {
    border-color: var(--error);
    background: rgba(255,68,68,0.1);
    opacity: 0.7;
}
.omr-player.current {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(255,215,0,0.5);
}
.omr-player.waiting {
    opacity: 0.5;
}
.omr-player-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.omr-player-score {
    font-family: 'Bebas Neue', sans-serif;
    color: white;
    font-size: 2rem;
    line-height: 1;
}
.omr-player-threshold {
    font-family: 'Courier Prime', monospace;
    color: var(--gold);
    font-size: 0.75rem;
}
.omr-player-dice {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}
.omr-mini-die {
    width: 24px;
    height: 24px;
    background: white;
    color: black;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
}
.omr-mini-die.bust {
    background: var(--error);
    color: white;
}
.omr-roll-result {
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
.omr-gained {
    color: var(--success-light);
}
.omr-lost {
    color: var(--error);
    opacity: 0.7;
}
.omr-player-status {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: var(--text-muted-light);
    margin-top: 0.25rem;
}
.omr-log-container {
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
    margin-top: 1rem;
}
.omr-log {
    height: 80px;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: var(--text-muted-lightest);
}
.omr-log-entry {
    padding: 0.2rem 0;
    border-bottom: 1px solid #333;
}
.omr-log-entry.bust { color: var(--error); }
.omr-log-entry.safe { color: var(--success-light); }
.omr-log-entry.bank { color: var(--gold); }
.omr-log-entry.round { color: var(--info-lighter); font-weight: bold; }
.omr-round-info {
    text-align: center;
    margin-bottom: 1.5rem;
}
.omr-round {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--gold);
    letter-spacing: 2px;
}
.omr-dice-type {
    font-family: 'Courier Prime', monospace;
    font-size: 1.25rem;
    color: var(--text-muted-lightest);
}
.omr-target-display {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.omr-target-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: var(--text-muted-light);
    letter-spacing: 2px;
}
.omr-target {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: var(--error);
    text-shadow: 0 0 20px rgba(255,68,68,0.5);
    line-height: 1;
}
.omr-roll-area {
    background: rgba(0,0,0,0.3);
    padding: 1.5rem;
    margin-bottom: 1rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.omr-dice {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.omr-die {
    width: 50px;
    height: 50px;
    background: white;
    border: 3px solid var(--black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
}
.omr-die.bust {
    background: var(--error);
    color: white;
    animation: shake 0.5s;
}
.omr-die.rolling {
    animation: roll 0.1s infinite;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
/* [SDG] ONE MORE ROLL ----------------------------------------------- */

.omr-roll-total {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: white;
}
.omr-roll-total.bust {
    color: var(--error);
}
.omr-roll-total.safe {
    color: var(--success-light);
}
.omr-score-display {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1rem;
}
.omr-current-score, .omr-threshold {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.omr-score-label, .omr-threshold-label {
    font-family: 'Courier Prime', monospace;
    font-size: 0.7rem;
    color: var(--text-muted-light);
    letter-spacing: 1px;
}
.omr-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    color: var(--success-light);
}
.omr-threshold-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--gold);
}
.omr-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    min-height: 2rem;
}
.omr-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* [SDG] BOMB BOMB --------------------------------------------------- */

.nz-game-area {
    background: linear-gradient(180deg, #1a1a1a 0%, #2d1f1f 50%, #1a1a1a 100%);
    border: 3px solid var(--black);
    padding: 1.5rem;
    margin-top: 1rem;
}
.nz-players {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.nz-player {
    background: rgba(255,255,255,0.1);
    padding: 0.5rem 1rem;
    border: 2px solid #444;
    text-align: center;
    min-width: 80px;
}
.nz-player.current {
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(255,215,0,0.5);
}
.nz-player.dead {
    opacity: 0.4;
    border-color: var(--text-muted);
}
.nz-player-name {
    font-family: 'Bebas Neue', sans-serif;
    color: white;
    font-size: 1rem;
}
.nz-player-lives {
    font-size: 1.25rem;
}
.nz-bomb-area {
    text-align: center;
    margin-bottom: 1.5rem;
}
.nz-timer-label {
    font-family: 'Courier Prime', monospace;
    color: var(--text-muted-light);
    font-size: 0.8rem;
    letter-spacing: 2px;
}
.nz-timer {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    color: var(--error);
    text-shadow: 0 0 20px rgba(255,68,68,0.5);
    line-height: 1;
}
.nz-timer.safe {
    color: var(--success-light);
    text-shadow: 0 0 20px rgba(74,222,128,0.5);
}
.nz-timer.danger {
    color: var(--error);
    animation: pulse-danger 0.5s infinite;
}
@keyframes pulse-danger {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.nz-bomb {
    font-size: 3rem;
    margin-top: 0.5rem;
}
.nz-bomb.explode {
    animation: explode 0.5s ease-out;
}
@keyframes explode {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); opacity: 0.5; }
}
/* [SDG] BOMB BOMB --------------------------------------------------- */

.nz-bomb.defused {
    filter: grayscale(1);
    opacity: 0.5;
}
.nz-dice-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(0,0,0,0.3);
}
.nz-die-select {
    font-family: 'Courier Prime', monospace;
    color: var(--text-muted-lightest);
}
.nz-die-select span:last-child {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--gold);
}
.nz-die-result {
    width: 60px;
    height: 60px;
    background: white;
    border: 3px solid var(--black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
}
.nz-die-result.rolling {
    animation: roll 0.1s infinite;
}
@keyframes roll {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* [SDG] BOMB BOMB --------------------------------------------------- */

.nz-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    min-height: 2rem;
}
.nz-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.nz-log-container {
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
    margin-top: 1rem;
}
.nz-log {
    height: 80px;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: var(--text-muted-lightest);
}
.nz-log-entry {
    padding: 0.2rem 0;
    border-bottom: 1px solid #333;
}
.nz-log-entry.boom { color: var(--error); }
.nz-log-entry.defuse { color: var(--success-light); }
.nz-log-entry.info { color: var(--gold); }
/* [SDG] SITE CHROME + GAME SHELL ------------------------------------ */

/* Merch Styles */
#merch .section-header {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
}
#merch .section-header:hover {
    opacity: 0.8;
}
#merch .section-header h2::after {
    content: ' ▼';
    font-size: 0.8em;
    margin-left: 0.5rem;
    display: inline-block;
}
#merch.collapsed .section-header h2::after {
    content: ' ▶';
    font-size: 0.8em;
}
.merch-content {
    max-height: none;
    overflow: visible;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    opacity: 1;
}
#merch.collapsed .merch-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}
.merch-item {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}
.merch-item:hover {
    transform: translateY(-4px);
}
.merch-item.merch-odd {
    border-style: dashed;
}
.merch-image {
    background: var(--kraft);
    padding: 2rem;
    text-align: center;
    font-size: 4rem;
    border-bottom: 3px solid var(--black);
}
.merch-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.merch-info h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.merch-info p {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    flex: 1;
    margin-bottom: 0.75rem;
}
/* No .merch-price. Every item here is unmade, and a number on an
   unmade thing is still an anchor — it becomes the price in people's
   heads and the pay-what-you-feel kit has to argue with it. The status
   line says the true thing instead. */
.merch-status {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: 0.55;
    border-top: 1px dashed currentColor;
    padding-top: 0.5rem;
    margin-top: auto;
}
/* Two divs so the box lines up with .merch-grid's 1rem inset. */
.merch-hero {
    max-width: 1000px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}
.merch-hero-inner {
    background: var(--kraft-light);
    border: 3px solid var(--red);
    padding: 1.25rem;
}
.merch-hero h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.merch-hero p {
    font-family: 'Courier Prime', monospace;
    font-size: 0.9rem;
    line-height: 1.55;
}
/* .gs-kit ships margin with !important, so overriding needs it too. */
.merch-hero .gs-kit { margin: 0.9rem 0 0 !important; }
.merch-footer {
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 1rem;
}
.merch-footer-note {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto 0.6rem;
    opacity: 0.75;
}
.merch-follow { margin-top: 1rem; }
/* [SDG] CRAB BUCKET ------------------------------------------------- */

/* CRAB BUCKET Styles */
.cb-game {
    max-width: 650px;
    margin: 0 auto;
}
.cb-game-area {
    background: linear-gradient(180deg, #1a2a1a 0%, #0d1a0d 100%);
    border: 3px solid var(--black);
    padding: 1.5rem;
    margin-top: 1rem;
}
.cb-target {
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--text-muted-light);
    margin-bottom: 1rem;
}
.cb-target-num {
    color: var(--gold);
    font-size: 1.5rem;
}
.cb-players {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.cb-player {
    background: rgba(255,255,255,0.05);
    border: 2px solid #444;
    padding: 0.75rem;
    text-align: center;
    position: relative;
}
.cb-player.current {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(255,215,0,0.3);
}
.cb-player.at-zero {
    border-color: var(--error-light);
    background: rgba(255,107,107,0.1);
}
.cb-player.winner {
    border-color: var(--success-light);
    background: rgba(74,222,128,0.2);
}
.cb-player-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.cb-player-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    line-height: 1;
}
.cb-player-crab {
    font-size: 1.5rem;
    margin-top: 0.25rem;
}
.cb-player.at-zero .cb-player-crab::after {
    content: '🦀';
}
.cb-dice-area {
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    margin-bottom: 1rem;
    min-height: 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}
.cb-die {
    width: 55px;
    height: 55px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    border: 3px solid var(--black);
}
.cb-die.ride {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: white;
}
.cb-die.die-val {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: white;
}
.cb-die:hover:not(.assigned) {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}
.cb-die.assigned {
    opacity: 0.3;
    cursor: not-allowed;
}
.cb-die.rolling {
    animation: roll 0.1s infinite;
}
.cb-assigned-die {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--black);
}
.cb-assigned-die.ride { background: var(--success-light); color: white; }
.cb-assigned-die.die-val { background: var(--error-lighter); color: white; }
.cb-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    min-height: 2rem;
}
.cb-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cb-log-container {
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
    margin-top: 1rem;
}
.cb-log {
    height: 80px;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: var(--text-muted-lightest);
}
.cb-log-entry { padding: 0.2rem 0; border-bottom: 1px solid #333; }
.cb-log-entry.good { color: var(--success-light); }
.cb-log-entry.bad { color: var(--error-light); }
.cb-log-entry.crab { color: var(--warning-light); }
.cb-log-entry.win { color: var(--gold); font-weight: bold; }
.cb-pips {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin: 0.5rem 0;
}
.cb-pip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #666;
    background: transparent;
}
.cb-pip.filled {
    background: var(--success-light);
    border-color: var(--success-light);
}
.cb-die.selected {
    box-shadow: 0 0 20px rgba(255,215,0,0.8);
    transform: scale(1.15);
}
.cb-card {
    background: rgba(0,0,0,0.8);
    border: 3px solid #ffd700;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    text-align: center;
}
.cb-card-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--ink-inverse);
}
.cb-card-desc {
    font-size: 0.75rem;
    color: var(--text-muted-lightest);
}
.cb-log-entry.card {
    color: var(--gold);
}
/* Crab Bucket IRL Mode */
.cb-irl-divider {
    text-align: center;
    color: var(--text-muted);
    margin: 1.5rem 0 1rem 0;
    font-family: 'Special Elite', cursive;
}
.cb-irl-mode {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
.cb-irl-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--error);
    letter-spacing: 2px;
}
.cb-irl-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted-light);
    margin-bottom: 1rem;
}
.cb-irl-card {
    width: 180px;
    height: 250px;
    margin: 1rem auto;
    perspective: 1000px;
}
.cb-irl-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.cb-irl-card-inner.flipped {
    transform: rotateY(180deg);
}
.cb-irl-card-back, .cb-irl-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cb-irl-card-back {
    background: linear-gradient(135deg, #e94560 0%, #c23a56 100%);
    border: 3px solid #ff6b6b;
    font-size: 4rem;
}
.cb-irl-card-front {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
    border: 3px solid #ffd700;
    transform: rotateY(180deg);
    padding: 1rem;
}
.cb-irl-card-type {
    font-size: 0.7rem;
    color: var(--text-muted-light);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.cb-irl-card-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
}
.cb-irl-card-desc {
    font-size: 1rem;
    color: var(--ink-inverse);
    line-height: 1.4;
}
.cb-irl-card-type.offensive { color: var(--error-lighter); }
.cb-irl-card-type.defensive { color: var(--success-light); }
.cb-irl-card-type.movement { color: var(--info-lighter); }
.cb-irl-card-type.chaos { color: var(--purple-light); }
.cb-irl-deck-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
/* [SDG] TENCATHLON -------------------------------------------------- */

/* Decathlon Styles */
.deca-game { padding: 1rem; }
.deca-game-area { background: #1a1a2e; border-radius: 8px; padding: 1rem; }
.deca-header { text-align: center; margin-bottom: 1rem; }
.deca-event-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; color: var(--gold); letter-spacing: 3px; }
.deca-event-num { font-size: 0.9rem; color: var(--text-muted-light); }
.deca-scoreboard { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.deca-player-card { background: rgba(0,0,0,0.5); border: 2px solid #444; border-radius: 8px; padding: 0.75rem 1rem; min-width: 120px; text-align: center; }
.deca-player-card.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,0.3); }
.deca-player-card.winner { border-color: var(--success-light); background: rgba(74,222,128,0.1); }
.deca-player-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--ink-inverse); }
.deca-player-total { font-size: 1.5rem; font-weight: bold; color: var(--gold); }
.deca-player-events { font-size: 0.7rem; color: var(--text-muted-light); margin-top: 0.25rem; }
.deca-arena { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 1.5rem; margin: 1rem 0; min-height: 200px; text-align: center; }
.deca-instructions { color: var(--text-muted-lightest); font-size: 1rem; margin-bottom: 1rem; }
.deca-dice-area { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.deca-die { width: 50px; height: 50px; background: var(--white); color: var(--text-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; transition: all 0.15s; }
.deca-die.rolling { animation: deca-roll 0.1s infinite; }
.deca-die.kept { background: var(--success-light); color: var(--text-primary); }
.deca-die.crashed { background: var(--error-lighter); color: var(--ink-inverse); }
.deca-die.selectable { cursor: pointer; box-shadow: 0 0 10px rgba(255,215,0,0.5); }
.deca-die.selectable:hover { transform: scale(1.1); }
@keyframes deca-roll { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
/* [SDG] TENCATHLON -------------------------------------------------- */

.deca-result { font-size: 1.25rem; color: var(--ink-inverse); margin: 1rem 0; }
.deca-result .points { color: var(--gold); font-size: 1.75rem; font-weight: bold; }
.deca-controls { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.deca-points-table { background: rgba(0,0,0,0.5); border-radius: 8px; padding: 1rem; margin-top: 1rem; font-size: 0.8rem; max-height: 200px; overflow-y: auto; }
.deca-points-table h4 { color: var(--gold); margin: 0 0 0.5rem 0; font-family: 'Bebas Neue', sans-serif; }
.deca-points-table table { width: 100%; border-collapse: collapse; }
.deca-points-table th, .deca-points-table td { padding: 0.25rem 0.5rem; text-align: left; border-bottom: 1px solid #333; }
.deca-points-table th { color: var(--text-muted-light); }
.deca-points-table td { color: var(--ink-inverse); }
.deca-bar { height: 20px; background: #333; border-radius: 4px; margin: 0.5rem 0; overflow: hidden; }
.deca-bar-fill { height: 100%; background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80); transition: width 0.5s; }
.deca-targets { display: flex; justify-content: center; gap: 0.5rem; margin: 0.5rem 0; }
.deca-target { width: 30px; height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.deca-target.cleared { background: var(--success-light); color: var(--text-primary); }
.deca-target.failed { background: var(--error-lighter); color: var(--ink-inverse); }
.deca-target.pending { background: #444; color: var(--text-muted-light); }
.deca-hurdles { display: flex; justify-content: center; gap: 0.25rem; margin: 1rem 0; flex-wrap: wrap; }
.deca-hurdle { width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: bold; background: #444; color: var(--ink-inverse); border: 2px solid #666; }
.deca-hurdle.current { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,0.5); }
.deca-hurdle.cleared { background: var(--success-light); color: var(--text-primary); border-color: var(--success-light); }
.deca-hurdle.hit { background: var(--error-lighter); color: var(--ink-inverse); border-color: var(--error-lighter); }
.deca-dice-row { display: flex; justify-content: center; gap: 0.5rem; margin: 1rem 0; }
.deca-wind-picker { margin-top: 1rem; }
.deca-wind-picker button { margin: 0 0.25rem; }

/* Decathlon IRL Mode */
.deca-irl-divider {
    text-align: center;
    color: var(--text-muted-light);
    margin: 1.5rem 0 1rem 0;
    font-family: 'Special Elite', cursive;
}
.deca-irl-mode {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    border: 2px solid #ffd700;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
.deca-irl-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--gold);
    letter-spacing: 2px;
}
.deca-irl-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted-light);
    margin-bottom: 1rem;
}
.deca-irl-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.deca-irl-nav-btn {
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    border: 2px solid #ffd700;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    border-radius: 4px;
}
.deca-irl-nav-btn:hover {
    background: rgba(255,215,0,0.2);
}
.deca-irl-event-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--ink-inverse);
}
.deca-irl-card {
    background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
    border: 3px solid #ffd700;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1rem 0;
    text-align: left;
}
.deca-irl-card-day {
    font-size: 0.7rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.25rem;
}
.deca-irl-card-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--ink-inverse);
    margin-bottom: 0.5rem;
}
.deca-irl-card-rules {
    font-size: 0.9rem;
    color: var(--text-disabled);
    margin-bottom: 1rem;
    line-height: 1.4;
}
.deca-irl-card-table {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 0.75rem;
}
.deca-irl-card-table-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
}
.deca-irl-card-table table {
    width: 100%;
    font-size: 0.75rem;
}
.deca-irl-card-table th {
    color: var(--text-muted-light);
    text-align: left;
    padding: 0.25rem;
    border-bottom: 1px solid #333;
}
.deca-irl-card-table td {
    color: var(--ink-inverse);
    padding: 0.25rem;
    border-bottom: 1px solid #222;
}
.deca-irl-card-table td:last-child {
    color: var(--gold);
    font-weight: bold;
}
.deca-irl-day-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.deca-irl-day-btn {
    padding: 0.4rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    border: 2px solid #444;
    background: transparent;
    color: var(--text-muted-light);
    cursor: pointer;
    border-radius: 4px;
}
.deca-irl-day-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--text-primary);
}

/* Subject to Change Styles */
.stc-game {
    background: var(--black);
    color: var(--ink-inverse);
    padding: 1.5rem;
    border-radius: 8px;
}
.stc-game .game-info-bar { background: rgba(255,255,255,0.1); color: var(--text-disabled); }
/* [SDG] SUBJECT TO CHANGE ------------------------------------------- */

.stc-game .how-to-play { background: rgba(255,255,255,0.05); border-color: var(--kraft); }
.stc-game .how-to-play summary { color: var(--ink-on-dark-dim); }
.stc-game .rules-content { color: var(--text-disabled); border-color: var(--kraft); }
.stc-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.stc-option-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.stc-option-group span { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; }
.stc-opt-btn {
    font-family: 'Bebas Neue', sans-serif;
    padding: 0.25rem 0.75rem;
    background: transparent;
    color: var(--ink-inverse);
    border: 2px solid var(--kraft);
    cursor: pointer;
}
.stc-opt-btn.active { background: var(--kraft); color: var(--text-primary); }
.stc-player-setup {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.stc-player-config {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255,255,255,0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.stc-type-btn {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid #444;
    cursor: pointer;
    border-radius: 3px;
}
.stc-type-btn.human { background: var(--game-green); color: white; }
.stc-type-btn.cpu { background: var(--game-red); color: white; }
.stc-round-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #333;
}
.stc-round {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--ink-on-dark-dim);
    letter-spacing: 0.1em;
}
.stc-stakes { font-size: 0.8rem; color: var(--game-green); }
.stc-condition-stack {
    background: rgba(0,0,0,0.3);
    border: 2px solid #e74c3c;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 50px;
}
.stc-stack-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.7rem;
    color: var(--game-red);
    letter-spacing: 0.1em;
}
.stc-applied { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.stc-cond-chip {
    background: var(--game-red);
    color: white;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    border-radius: 3px;
}
.stc-current-condition {
    background: #2c3e50;
    border: 2px solid var(--kraft);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    text-align: center;
}
.stc-cond-category {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.65rem;
    color: var(--text-muted-light);
    letter-spacing: 0.1em;
}
.stc-cond-name {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.2rem;
    color: var(--ink-on-dark-dim);
    margin: 0.25rem 0;
}
.stc-cond-effect { font-size: 0.8rem; }
.stc-players { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.stc-player {
    background: rgba(255,255,255,0.05);
    border: 2px solid #333;
    border-radius: 6px;
    padding: 0.5rem;
}
.stc-player.winner { border-color: var(--kraft); box-shadow: 0 0 10px rgba(201, 166, 107, 0.4); }
.stc-player.eliminated { opacity: 0.5; }
.stc-player-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}
.stc-player-label { font-size: 0.75rem; font-weight: bold; }
.stc-player-score {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.9rem;
    color: var(--ink-on-dark-dim);
}
.stc-dice-area { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.3rem; }
.stc-die {
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 2px solid #444;
    font-family: 'Permanent Marker', cursive;
    font-size: 1rem;
    background: #2c3e50;
}
.stc-die.active { background: var(--game-green); border-color: var(--success); }
.stc-die-type { font-size: 0.5rem; color: var(--text-muted-light); font-family: 'Courier Prime', monospace; }
.stc-player-total { font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem; color: var(--text-muted-light); }
.stc-player-total span { color: var(--game-green); font-size: 1rem; }
.stc-message {
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1rem;
    color: var(--ink-on-dark-dim);
    margin: 0.5rem 0;
    min-height: 1.5rem;
}
.stc-controls { text-align: center; margin: 0.5rem 0; }
.stc-p0 { border-left: 4px solid #27ae60 !important; }
.stc-p1 { border-left: 4px solid #e74c3c !important; }
.stc-p2 { border-left: 4px solid #3498db !important; }
.stc-p3 { border-left: 4px solid var(--kraft) !important; }

/* Subject to Change IRL Mode */
.stc-irl-divider {
    text-align: center;
    color: var(--text-muted);
    margin: 1.5rem 0 1rem 0;
    font-family: 'Special Elite', cursive;
}
.stc-irl-mode {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #9b59b6;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
.stc-irl-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--purple);
    letter-spacing: 2px;
}
.stc-irl-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted-light);
    margin-bottom: 1rem;
}
.stc-irl-mode-select, .stc-irl-round-select {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.stc-irl-round-select span {
    font-size: 0.75rem;
    color: var(--text-muted-light);
}
.stc-irl-mode-btn, .stc-irl-round-btn {
    padding: 0.4rem 0.8rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    border: 2px solid #444;
    background: transparent;
    color: var(--text-muted-light);
    cursor: pointer;
    border-radius: 4px;
}
.stc-irl-mode-btn.active, .stc-irl-round-btn.active {
    background: #9b59b6;
    border-color: var(--purple);
    color: white;
}
.stc-irl-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
    min-height: 120px;
}
.stc-irl-card {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border: 2px solid #9b59b6;
    border-radius: 8px;
    padding: 0.75rem;
    width: 140px;
    text-align: center;
    animation: stcCardFlip 0.4s ease-out;
}
@keyframes stcCardFlip {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}
/* [SDG] SUBJECT TO CHANGE ------------------------------------------- */

.stc-irl-card-category {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}
.stc-irl-card-category.CUT { color: var(--game-red); }
.stc-irl-card-category.REROLL { color: var(--warning-light); }
.stc-irl-card-category.MODIFY { color: var(--info); }
.stc-irl-card-category.SCORE { color: var(--success); }
.stc-irl-card-category.CHAOS { color: var(--purple); }
.stc-irl-card-category.EVOLVE { color: var(--success); }
.stc-irl-card-category.DEVOLVE { color: var(--warning); }
.stc-irl-card-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--ink-inverse);
    margin-bottom: 0.25rem;
}
.stc-irl-card-effect {
    font-size: 0.7rem;
    color: var(--text-muted-lightest);
    line-height: 1.3;
}
.stc-irl-deck-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* Impact Zone Styles */
#impact-zone {
    padding: 3rem 2rem;
}
/* [SDG] IMPACT ZONE ------------------------------------------------- */

.iz-container {
    max-width: 900px;
    margin: 0 auto;
}
.iz-intro {
    text-align: center;
    margin-bottom: 2rem;
}
.iz-intro > p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}
.iz-components {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.iz-component {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 1rem;
    width: 180px;
    text-align: center;
}
.iz-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}
.iz-component p {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.iz-how-to-play {
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 1.5rem;
    margin: 2rem 0;
}
.iz-how-to-play h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}
.iz-how-to-play ol {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}
.iz-how-to-play li {
    margin-bottom: 0.5rem;
}
.iz-symbols h4 {
    font-family: 'Special Elite', cursive;
    margin-bottom: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 1rem;
}
.iz-symbol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}
.iz-symbol {
    font-size: 0.9rem;
}
.iz-symbol span {
    margin-right: 0.5rem;
}
.iz-win-conditions {
    margin: 2rem 0;
}
.iz-win-conditions h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 1rem;
}
.iz-win-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.iz-win-option {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 1rem;
    text-align: center;
}
.iz-win-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.25rem;
}
.iz-win-option p {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.iz-capitalism {
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 2rem;
    margin: 2rem 0;
}
.iz-capitalism h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.iz-cap-tagline {
    font-family: 'Special Elite', cursive;
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 1.5rem;
}
.iz-cap-rules h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--ink-on-dark-dim);
}
.iz-cap-rules ol {
    margin-left: 1.5rem;
}
.iz-cap-rules li {
    margin-bottom: 0.5rem;
}
.iz-cap-variants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.iz-cap-variant {
    background: rgba(255,255,255,0.1);
    padding: 1rem;
}
.iz-cap-variant p {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    opacity: 0.8;
}
.iz-cap-footer {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
    font-style: italic;
}
.iz-cards-preview {
    margin: 2rem 0;
}
.iz-cards-preview h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 1rem;
}
.iz-card-browser {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1rem;
}
.iz-deck-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.iz-tab {
    flex: 1;
    min-width: 120px;
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    border: 2px solid var(--black);
    background: white;
    cursor: pointer;
    transition: all 0.15s;
}
.iz-tab.active {
    background: var(--black);
    color: var(--ink-on-dark);
}
.iz-card-display {
    background: white;
    border: 2px solid var(--black);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin-bottom: 1rem;
}
.iz-card-placeholder {
    text-align: center;
    color: var(--text-muted);
    font-family: 'Special Elite', cursive;
}
.iz-card {
    text-align: center;
    max-width: 300px;
}
.iz-card-name {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.iz-card-desc {
    font-family: 'Courier Prime', monospace;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}
.iz-card-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.iz-card-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
#iz-card-counter {
    font-family: 'Courier Prime', monospace;
    min-width: 60px;
    text-align: center;
}
.iz-cta {
    text-align: center;
    margin-top: 2rem;
    padding: 2rem;
    background: var(--black);
    color: var(--ink-on-dark);
}
.iz-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.iz-buttons .btn {
    min-width: 200px;
}
/* [SDG] IMPACT ZONE ------------------------------------------------- */


/* Impact Zone IRL Mode */
.iz-irl-divider {
    text-align: center;
    color: var(--text-muted);
    margin: 1.5rem 0 1rem 0;
    font-family: 'Special Elite', cursive;
}
.iz-irl-mode {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1.5rem;
    text-align: center;
}
.iz-irl-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--text-primary);
    letter-spacing: 2px;
}
.iz-irl-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.iz-irl-decks {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.iz-irl-deck {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
}
.iz-irl-deck-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.iz-irl-action-deck .iz-irl-deck-label { color: var(--info); }
.iz-irl-impact-deck .iz-irl-deck-label { color: var(--error); }
.iz-irl-card-display {
    background: white;
    border: 3px solid var(--black);
    border-radius: 8px;
    padding: 1rem;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.iz-irl-action-deck .iz-irl-card-display {
    border-color: var(--info);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.iz-irl-impact-deck .iz-irl-card-display {
    border-color: var(--error);
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
}
.iz-irl-card-display.flip {
    animation: izIrlFlip 0.3s ease-out;
}
@keyframes izIrlFlip {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}
.iz-irl-card-name {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.iz-irl-card-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    letter-spacing: 0.5px;
}
.iz-irl-card-desc {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-secondary);
}
.iz-irl-deck-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
/* [SDG] BROADSWORDS & BEER ------------------------------------------ */


/* BROADSWORDS & BEER Styles */
.bb-game {
    max-width: 550px;
    margin: 0 auto;
}
.bb-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.bb-option-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bb-option-group span {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.1em;
}
.bb-opt-btn {
    font-family: 'Bebas Neue', sans-serif;
    padding: 0.25rem 0.75rem;
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--kraft-dark);
    cursor: pointer;
}
.bb-opt-btn.active {
    background: var(--kraft-dark);
    color: var(--ink-inverse);
}
.bb-player-setup {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.bb-player-config {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(0,0,0,0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.bb-type-btn {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid #444;
    cursor: pointer;
    border-radius: 3px;
}
.bb-type-btn.human { background: var(--game-green); color: white; }
.bb-type-btn.cpu { background: var(--game-red); color: white; }
.bb-round-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--black);
    color: var(--ink-inverse);
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
.bb-round-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}
.bb-phase {
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: var(--ink-on-dark-dim);
}
.bb-beer-card {
    background: linear-gradient(135deg, #8B4513 0%, #5D2E0C 100%);
    border: 4px solid #3d1a00;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    min-height: 100px;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
.bb-card-back {
    cursor: pointer;
}
.bb-table-surface {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
    color: var(--ink-on-dark-dim);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: bb-wobble 2s ease-in-out infinite;
}
@keyframes bb-wobble {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
}
.bb-card-front {
    animation: bb-flip 0.5s ease-out;
}
@keyframes bb-flip {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}
/* [SDG] BROADSWORDS & BEER ------------------------------------------ */

.bb-card-name {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
    color: var(--gold);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
}
.bb-card-effect {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    color: var(--ink-inverse);
}
.bb-players {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.bb-player {
    background: var(--white);
    border: 3px solid var(--black);
    border-radius: 6px;
    padding: 0.5rem;
    position: relative;
}
.bb-player.active {
    border-color: var(--kraft-dark);
    box-shadow: 0 0 10px rgba(201, 166, 107, 0.5);
}
.bb-player.winner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.bb-player.dead {
    opacity: 0.5;
    background: #1f1f1f;
}
.bb-player.dead .bb-player-name {
    color: var(--text-muted);
}
.bb-stat-health {
    color: var(--success);
    font-weight: bold;
}
.bb-stat-health.critical {
    color: var(--error-light);
    animation: bb-pulse 0.5s ease-in-out infinite;
}
.bb-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.bb-player-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
}
.bb-player-stats {
    display: flex;
    gap: 0.75rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
}
.bb-stat-points { color: var(--game-green); font-weight: bold; }
.bb-stat-dice { color: var(--text-muted); }
.bb-stat-hangover { color: var(--game-red); }
.bb-dice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}
.bb-die {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 1.1rem;
    border: 2px solid #333;
}
.bb-die.sword { background: var(--error); color: white; }
.bb-die.shield { background: #2563eb; color: white; }
.bb-die.beer { background: #d97706; color: white; }
.bb-die.hungover { 
    background: var(--game-dark); 
    color: var(--text-muted-lightest); 
    opacity: 0.6;
    border-style: dashed;
}
.bb-die.empty {
    background: #f3f4f6;
    color: var(--text-muted-lightest);
    border-style: dotted;
}
.bb-die.rolling { animation: bb-shake 0.1s infinite; }
.bb-incoming-hangover {
    font-size: 0.7rem;
    color: var(--error-light);
    font-family: 'Courier Prime', monospace;
    margin-left: 0.5rem;
    animation: bb-pulse 1s ease-in-out infinite;
}
@keyframes bb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes bb-shake {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}
/* [SDG] BROADSWORDS & BEER ------------------------------------------ */

.bb-combat-stats {
    display: flex;
    gap: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
}
.bb-attack { color: var(--error); }
.bb-defense { color: var(--info); }
.bb-challenge-zone {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border: 3px solid var(--kraft);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}
.bb-challenge-title {
    font-family: 'Permanent Marker', cursive;
    font-size: 1rem;
    color: var(--ink-on-dark-dim);
    margin-bottom: 0.75rem;
}
.bb-challenge-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.bb-challenge-btn {
    font-family: 'Bebas Neue', sans-serif;
    padding: 0.5rem 1.5rem;
    background: var(--kraft);
    color: var(--text-primary);
    border: 2px solid var(--black);
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}
.bb-challenge-btn:hover {
    background: var(--kraft-dark);
    color: white;
    transform: scale(1.05);
}
.bb-combat-result {
    background: var(--black);
    color: var(--ink-inverse);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}
.bb-combat-vs {
    font-family: 'Courier Prime', monospace;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.bb-combat-outcome {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
}
.bb-combat-outcome.win { color: var(--success-light); }
.bb-combat-outcome.lose { color: var(--error-lighter); }
.bb-combat-outcome.tie { color: var(--ink-on-dark-dim); }
.bb-message {
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 1rem;
    color: var(--kraft-dark);
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}
.bb-controls {
    text-align: center;
}
.bb-p0 { border-left: 5px solid #27ae60 !important; }
.bb-p1 { border-left: 5px solid #e74c3c !important; }
.bb-p2 { border-left: 5px solid #3498db !important; }
.bb-p3 { border-left: 5px solid #9b59b6 !important; }
.bb-p0-fill { background: #27ae60 !important; }
.bb-p1-fill { background: #e74c3c !important; }
.bb-p2-fill { background: #3498db !important; }
.bb-p3-fill { background: #9b59b6 !important; }
.bb-progress-bar {
    height: 6px;
    background: #e5e5e5;
    border-radius: 3px;
    margin: 0.25rem 0;
    overflow: hidden;
}
.bb-progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}
.bb-step-info {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f1f33 100%);
    border: 2px solid var(--kraft);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}
.bb-step-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--ink-on-dark-dim);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.bb-step-details {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    color: var(--ink-inverse);
    line-height: 1.6;
}
/* [SDG] UNPREFIXED LEGACY CLASSES ----------------------------------- */

#bb-step-toggle.active {
    background: var(--game-green);
    color: white;
}

/* SPIKED Game Styles */
.spiked-game {
    max-width: 600px;
    margin: 0 auto;
}
.spiked-demo-content {
    text-align: center;
    padding: 1rem 0;
}
.spiked-tagline-box {
    font-family: 'Special Elite', cursive;
    font-size: 1.2rem;
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 1rem 2rem;
    display: inline-block;
    margin-bottom: 1.5rem;
}
.spiked-tagline-box span {
    margin-right: 0.5rem;
}
.spiked-modes {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.spiked-mode {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 0.75rem 1rem;
    min-width: 100px;
    text-align: center;
}
.spiked-mode p {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.spiked-box-promo {
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 1rem;
    max-width: 350px;
    margin: 0 auto;
    font-size: 0.9rem;
}
.spiked-box-promo p:first-child {
    margin-bottom: 0.5rem;
}
/* [SDG] SUPER OUT --------------------------------------------------- */

/* SUPER OUT Styles */
.om-game {
    max-width: 700px;
    margin: 0 auto;
}
.om-game-area {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1rem;
    margin-top: 1rem;
}
.om-turn-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--black);
    flex-wrap: wrap;
    gap: 0.5rem;
}
.om-turn-indicator {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 2px;
}
.om-status {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
}
.om-mega-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: var(--black);
    padding: 6px;
    margin-bottom: 1rem;
}
.om-mega-cell {
    background: var(--kraft);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    min-height: 100px;
}
.om-mega-cell.won-p1 {
    background: var(--success-bg-dark);
}
.om-mega-cell.won-p2 {
    background: var(--error-bg-dark);
}
.om-mega-cell.active {
    box-shadow: inset 0 0 0 3px #3b82f6;
}
.om-mega-cell.selectable:hover {
    background: var(--warning-bg);
}
.om-mega-cell.mega-win {
    animation: omMegaWin 0.5s ease infinite alternate;
}
@keyframes omMegaWin {
    from { transform: scale(1); }
    to { transform: scale(1.02); }
}
/* [SDG] SUPER OUT --------------------------------------------------- */

.om-mega-marker {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    line-height: 1;
}
.om-mega-marker.p1 {
    color: var(--success-dark);
}
.om-mega-marker.p2 {
    color: var(--error);
}
.om-mini-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    width: 90%;
    max-width: 90px;
}
.om-mini-cell {
    background: white;
    border: 1px solid var(--black);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
}
.om-mini-cell.placeholder {
    color: var(--text-muted-lighter);
}
.om-mini-cell.p1 {
    background: var(--success-bg-dark);
    color: var(--success-dark);
}
.om-mini-cell.p2 {
    background: var(--error-bg-dark);
    color: var(--error);
}
.om-mini-cell.selectable {
    cursor: pointer;
}
.om-mini-cell.selectable:hover {
    background: var(--warning-bg);
}
.om-mini-cell.selected {
    box-shadow: inset 0 0 0 2px #3b82f6;
}
.om-mini-cell.win {
    animation: omCellWin 0.3s ease;
}
@keyframes omCellWin {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
/* [SDG] SUPER OUT --------------------------------------------------- */

.om-action-area {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    min-height: 40px;
    align-items: center;
    flex-wrap: wrap;
}
.om-action-btn {
    padding: 0.5rem 1.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    border: 2px solid var(--black);
    cursor: pointer;
    transition: all 0.15s;
}
.om-action-btn.over {
    background: var(--info-lighter);
}
.om-action-btn.over:hover {
    background: #93c5fd;
}
.om-action-btn.under {
    background: var(--error-bg-dark);
}
.om-action-btn.under:hover {
    background: var(--error-lightest);
}
.om-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.om-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 0.95rem;
    min-height: 1.5rem;
    padding: 0.5rem;
    background: var(--black);
    color: var(--ink-on-dark);
}
.om-log-container {
    background: var(--black);
    border: 2px solid var(--black);
    margin-bottom: 0.5rem;
}
.om-log {
    height: 100px;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: var(--ink-on-dark);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.om-log-entry {
    padding: 0.25rem 0.5rem;
    border-left: 2px solid #666;
}
.om-log-entry.player {
    border-left-color: var(--success-light);
}
.om-log-entry.cpu {
    border-left-color: var(--error-lighter);
}
.om-log-entry.win {
    border-left-color: var(--warning-light);
    background: rgba(251, 191, 36, 0.1);
}
.om-log-entry.mega {
    border-left-color: var(--info-light);
    background: rgba(59, 130, 246, 0.1);
    font-weight: bold;
}
.om-die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--black);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    background: white;
}
.om-die.p1 {
    background: var(--success-bg-dark);
    color: var(--success-dark);
}
.om-die.p2 {
    background: var(--error-bg-dark);
    color: var(--error);
}
.om-die.rolling {
    animation: omDieRoll 0.4s ease;
}
@keyframes omDieRoll {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}
.om-back-btn {
    padding: 0.25rem 0.75rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    border: 1px solid var(--black);
    background: var(--text-disabled);
    cursor: pointer;
}
.om-back-btn:hover {
    background: var(--text-disabled);
}
@media (max-width: 500px) {
    .om-mega-cell {
        min-height: 80px;
    }
    .om-mini-board {
        max-width: 70px;
    }
    .om-mega-marker {
        font-size: 2.5rem;
    }
}
/* [SDG] TETHERED ---------------------------------------------------- */

/* TETHERED Styles */
.teth-game {
    max-width: 700px;
    margin: 0 auto;
}
.teth-game-area {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    border: 3px solid var(--black);
    padding: 1rem;
    margin-top: 1rem;
}
.teth-status-bar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.1);
    margin-bottom: 1rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    color: var(--text-disabled);
}
.teth-mountain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 1rem;
    padding: 1rem;
}
.teth-mountain-row {
    display: flex;
    gap: 4px;
    justify-content: center;
}
.teth-card {
    width: 40px;
    height: 56px;
    background: linear-gradient(135deg, #2d4a6d 0%, #1a3a5c 100%);
    border: 2px solid #4a90a4;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}
.teth-card.face-down {
    background: linear-gradient(135deg, #3d5a80 0%, #293241 100%);
    color: transparent;
}
.teth-card.face-down::after {
    content: '🏔️';
    font-size: 1rem;
}
.teth-card.completed {
    background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%);
    border-color: var(--success-dark);
    cursor: default;
}
.teth-card.current {
    border-color: var(--gold);
    box-shadow: 0 0 10px #ffd700;
}
.teth-card.summit {
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
    border-color: var(--white);
}
.teth-target-area {
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    min-height: 120px;
}
.teth-target-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
}
.teth-dice-pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.teth-die {
    width: 40px;
    height: 40px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
}
.teth-die:hover {
    transform: scale(1.1);
}
.teth-die.selected {
    background: var(--gold);
    border-color: var(--gold);
}
.teth-die.used {
    opacity: 0.3;
    cursor: not-allowed;
}
.teth-climbers-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.teth-climber {
    background: rgba(255,255,255,0.1);
    padding: 0.75rem;
    border-left: 4px solid #4a90a4;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.teth-climber.success {
    border-left-color: var(--success-dark);
    background: rgba(64, 145, 108, 0.2);
}
.teth-climber.failed {
    border-left-color: var(--error);
    background: rgba(220, 38, 38, 0.2);
}
.teth-climber.eliminated {
    opacity: 0.4;
    border-left-color: var(--text-muted);
}
.teth-climber-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: white;
    min-width: 80px;
}
.teth-climber-equation {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    min-height: 36px;
    background: rgba(0,0,0,0.3);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.teth-eq-die {
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
}
.teth-eq-op {
    width: 24px;
    height: 24px;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}
.teth-climber-result {
    font-family: 'Courier Prime', monospace;
    font-size: 1rem;
    color: white;
    min-width: 50px;
    text-align: right;
}
.teth-climber-actions {
    display: flex;
    gap: 0.25rem;
}
.teth-op-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #666;
    background: #333;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 4px;
}
.teth-op-btn:hover {
    background: #555;
}
.teth-op-btn.selected {
    background: var(--gold);
    color: black;
    border-color: var(--gold);
}
.teth-small-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    background: #444;
    color: white;
    border: 1px solid #666;
    cursor: pointer;
    border-radius: 4px;
}
.teth-small-btn:hover {
    background: #555;
}
.teth-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.teth-log-container {
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
}
.teth-log {
    height: 80px;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    color: var(--text-muted-lightest);
}
.teth-log-entry {
    padding: 0.2rem 0;
    border-bottom: 1px solid #333;
}
.teth-log-entry.success {
    color: var(--success-dark);
}
.teth-log-entry.danger {
    color: var(--error);
}
.teth-log-entry.info {
    color: var(--gold);
}
@media (max-width: 500px) {
    .teth-card {
        width: 32px;
        height: 44px;
        font-size: 1rem;
    }
    .teth-die {
        width: 32px;
        height: 32px;
    }
    .teth-target-number {
        font-size: 2rem;
    }
}
/* [SDG] DEAD WEIGHT ------------------------------------------------- */


/* DEAD WEIGHT Styles */
.dw-game {
    padding: 1rem;
}
.dw-game-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}
.dw-scores {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.dw-player-score {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 0.5rem 1rem;
    text-align: center;
    min-width: 100px;
}
.dw-player-score.active {
    border-color: var(--red);
    box-shadow: 0 0 0 2px var(--red);
}
.dw-player-score.eliminated {
    opacity: 0.4;
    text-decoration: line-through;
}
.dw-player-score .name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
}
.dw-player-score .score {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5rem;
}
.dw-player-score .score.danger {
    color: var(--red);
}
.dw-limit-bar {
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--red);
    margin-top: 0.5rem;
}
.dw-call-area {
    text-align: center;
    padding: 1rem;
    background: var(--black);
    color: var(--ink-on-dark-dim);
    border: 3px solid var(--kraft);
}
.dw-call-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    opacity: 0.8;
}
.dw-call-die {
    font-size: 4rem;
    font-family: 'Permanent Marker', cursive;
    line-height: 1;
    margin: 0.5rem 0;
}
.dw-call-die.rolling {
    animation: dw-roll 0.1s infinite;
}
@keyframes dw-roll {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}
/* [SDG] DEAD WEIGHT ------------------------------------------------- */

.dw-pool-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.dw-pool-section {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 0.75rem;
}
.dw-pool-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dw-pool-label .count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
}
.dw-dice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    min-height: 44px;
}
.dw-die {
    width: 40px;
    height: 40px;
    background: var(--white);
    border: 2px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.dw-die.kept {
    background: var(--red);
    color: var(--ink-inverse);
    border-color: var(--red-dark);
}
.dw-die.dumped {
    opacity: 0.4;
}
.dw-die.saved {
    background: var(--success);
    color: var(--ink-inverse);
    border-color: var(--success-darker);
}
.dw-die.rolling {
    animation: dw-die-roll 0.15s infinite;
}
@keyframes dw-die-roll {
    0% { transform: rotate(-10deg) scale(1.1); }
    50% { transform: rotate(10deg) scale(0.9); }
    100% { transform: rotate(-10deg) scale(1.1); }
}
/* [SDG] DEAD WEIGHT ------------------------------------------------- */

.dw-center {
    background: rgba(0,0,0,0.1);
    border: 2px dashed var(--black);
}
.dw-center .dw-pool-label {
    opacity: 0.6;
}
.dw-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    padding: 0.75rem;
    background: var(--tape);
    border: 1px solid var(--kraft-dark);
}
.dw-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.dw-token {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 2px solid #b45309;
    color: var(--text-primary);
    font-family: 'Bebas Neue', sans-serif;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.dw-token:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.dw-token:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.dw-token.used {
    background: var(--text-muted);
    border-color: var(--ink);
    color: var(--text-muted-lighter);
}
.dw-result {
    text-align: center;
    padding: 1rem;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.3rem;
}
.dw-result.good {
    color: var(--success);
}
.dw-result.bad {
    color: var(--red);
}
.dw-setup {
    text-align: center;
    padding: 1rem;
}
.dw-setup-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.dw-player-btns {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.dw-player-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    font-family: 'Bebas Neue', sans-serif;
    cursor: pointer;
}
.dw-player-btn.active {
    background: var(--black);
    color: var(--ink-on-dark-dim);
}
.dw-history {
    margin-top: 1rem;
    max-height: 100px;
    overflow-y: auto;
    font-size: 0.85rem;
    padding: 0.5rem;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
}
.dw-history-entry {
    padding: 0.25rem 0;
    border-bottom: 1px dotted rgba(0,0,0,0.1);
}
.dw-card-area {
    background: var(--black);
    border: 3px solid var(--kraft);
    padding: 0.75rem;
    text-align: center;
    margin-bottom: 0.5rem;
}
.dw-card-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.8rem;
    color: var(--ink-on-dark-dim);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}
.dw-card {
    background: var(--kraft-light);
    border: 2px solid var(--kraft-dark);
    padding: 0.5rem;
    margin: 0 auto;
    max-width: 280px;
}
.dw-card-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--kraft-dark);
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
}
.dw-card-effect {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.dw-card-back {
    background: repeating-linear-gradient(
        45deg,
        var(--kraft-dark),
        var(--kraft-dark) 5px,
        var(--black) 5px,
        var(--black) 10px
    );
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-on-dark-dim);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    border: 2px solid var(--kraft);
}
.dw-pile-in {
    background: rgba(255,100,100,0.1);
    border: 2px solid var(--red);
    padding: 0.5rem;
    margin-top: 0.5rem;
}
.dw-pile-in.helping {
    background: rgba(100,255,100,0.1);
    border-color: var(--success);
}
.dw-pile-in-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    color: var(--red);
    margin-bottom: 0.25rem;
}
.dw-pile-in.helping .dw-pile-in-label {
    color: var(--success);
}
.dw-pile-in-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.dw-pile-in-player {
    text-align: center;
}
.dw-pile-in-player .name {
    font-size: 0.75rem;
    font-family: 'Special Elite', cursive;
    margin-bottom: 0.25rem;
}
.dw-pile-in-player .dice {
    display: flex;
    gap: 0.2rem;
}
.dw-pile-in-player .dw-die {
    width: 28px;
    height: 28px;
    font-size: 1rem;
}
.dw-card-area {
    background: var(--black);
    border: 3px solid var(--kraft);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.dw-card {
    background: linear-gradient(135deg, var(--kraft-light), var(--kraft));
    border: 2px solid var(--black);
    padding: 0.75rem;
    text-align: center;
}
.dw-card-name {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}
.dw-card-effect {
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
}
.dw-card-back {
    background: repeating-linear-gradient(
        45deg,
        var(--black),
        var(--black) 10px,
        var(--ink) 10px,
        var(--ink) 20px
    );
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-on-dark-dim);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
}
.dw-pile-in {
    background: var(--tape);
    border: 2px dashed var(--kraft-dark);
    padding: 0.5rem;
    margin-top: 0.5rem;
}
.dw-pile-in-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    text-align: center;
}
.dw-pile-in-players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.dw-pile-in-player {
    background: var(--kraft-light);
    border: 1px solid var(--black);
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}
.dw-pile-in-player .dice {
    font-family: 'Bebas Neue', sans-serif;
}
.dw-pile-in-player .matches {
    color: var(--red);
    font-weight: bold;
}
.dw-pile-in-player.helping .matches {
    color: var(--success);
}
/* [SDG] FOLLOW MY LEAD ---------------------------------------------- */


/* SIMON SAYS Styles */
.ss-game {
    text-align: center;
}
.ss-player-btn {
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    cursor: pointer;
}
.ss-player-btn.active {
    background: var(--black);
    color: var(--ink-on-dark);
}
.ss-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--black);
    color: var(--ink-on-dark);
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
}
.ss-simon-indicator {
    font-size: 1.1rem;
}
.ss-round-info {
    font-size: 1rem;
    opacity: 0.8;
}
.ss-scores {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.ss-score-card {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 0.3rem 0.6rem;
    min-width: 70px;
}
.ss-score-card.simon {
    border-color: gold;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.ss-score-card .name {
    font-family: 'Special Elite', cursive;
    font-size: 0.75rem;
}
.ss-score-card .score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
}
.ss-call-area {
    background: var(--black);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.ss-call-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--ink-on-dark-dim);
    letter-spacing: 2px;
}
.ss-call-die {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    color: var(--ink-on-dark);
    margin: 0.25rem 0;
}
.ss-call-die.rolling {
    animation: dieRoll 0.5s ease-in-out;
}
.ss-players-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.ss-player-row {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 0.5rem;
}
.ss-player-row.simon {
    opacity: 0.5;
    background: var(--text-disabled);
}
.ss-player-row.matched {
    border-color: var(--success);
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}
.ss-player-row.out {
    opacity: 0.5;
    border-color: var(--error-light);
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}
.ss-player-row.out .ss-player-status {
    color: var(--error-light);
    font-weight: bold;
}
/* [SDG] FOLLOW MY LEAD ---------------------------------------------- */

.ss-player-row.paid {
    border-color: var(--warning);
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.ss-player-row.paid .ss-player-status {
    color: var(--warning);
}
.ss-player-row.done {
    border-color: var(--success);
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
}
.ss-player-row.done .ss-player-status {
    color: var(--success);
    font-weight: bold;
}
.ss-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}
.ss-player-name {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
}
.ss-player-status {
    font-size: 0.75rem;
    font-family: 'Courier Prime', monospace;
}
.ss-dice-section {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.ss-dice-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.ss-dice-group-label {
    font-size: 0.65rem;
    font-family: 'Special Elite', cursive;
    opacity: 0.7;
}
.ss-dice-row {
    display: flex;
    gap: 0.2rem;
    min-height: 32px;
}
.ss-die {
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
}
.ss-die.matched {
    background: var(--success);
    color: white;
    border-color: var(--success-dark);
}
.ss-die.set-aside {
    background: var(--warning-bg-light);
    border-color: var(--warning);
}
.ss-die.eliminated {
    background: var(--text-muted);
    color: var(--text-muted-lighter);
    opacity: 0.4;
}
.ss-message {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 0.5rem;
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.ss-controls {
    margin-bottom: 0.5rem;
}
.ss-result {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    padding: 0.5rem;
    min-height: 2rem;
}
.ss-result.good {
    color: var(--success);
    background: var(--success-bg);
}
.ss-result.bad {
    color: var(--red);
    background: var(--error-bg);
}
.ss-result.steal {
    color: gold;
    background: var(--black);
}
/* [SDG] THE HORDE --------------------------------------------------- */


/* THE HORDE Styles */
.horde-game {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}
.horde-rising {
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1515 100%);
    border: 2px solid #7f1d1d;
    padding: 1rem;
    margin-bottom: 0.5rem;
}
.horde-rising-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--error-light);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.horde-call-area {
    margin-bottom: 0.75rem;
}
.horde-call-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.75rem;
    color: var(--error-lightest);
    margin-bottom: 0.25rem;
}
.horde-call-die {
    width: 50px;
    height: 50px;
    background: var(--error);
    border: 3px solid #fca5a5;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: white;
}
.horde-swarm-area {
    margin-top: 0.5rem;
}
.horde-swarm-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.7rem;
    color: var(--error-lightest);
    margin-bottom: 0.25rem;
}
.horde-swarm-dice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
}
.horde-swarm-dice .horde-d6.matched {
    background: var(--error);
    color: white;
    border-color: var(--error-lightest);
}
.horde-swarm-dice .horde-d6.survivor {
    background: var(--success-light);
    border-color: var(--success-darker);
}
.horde-combat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.horde-commit-controls {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}
.horde-commit-btn {
    padding: 0.25rem 0.6rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    cursor: pointer;
}
.horde-commit-btn.active {
    background: var(--black);
    color: var(--ink-on-dark);
}
.horde-commit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.horde-role-btn {
    padding: 0.4rem 0.7rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    cursor: pointer;
}
.horde-role-btn.active {
    background: var(--black);
    color: var(--ink-on-dark);
}
.horde-role-btn:first-child.active {
    background: #7f1d1d;
    border-color: var(--error-dark);
    color: var(--error-bg-dark);
}
.horde-player-btn {
    padding: 0.4rem 0.8rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    cursor: pointer;
}
.horde-player-btn.active {
    background: var(--black);
    color: var(--ink-on-dark);
}
.horde-phase-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a0a0a;
    color: var(--error-light);
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.4rem;
    font-family: 'Bebas Neue', sans-serif;
    border: 2px solid #ff6b6b;
}
#horde-phase-label {
    font-size: 0.95rem;
    letter-spacing: 1px;
}
#horde-turn-label {
    font-size: 0.75rem;
    opacity: 0.8;
}
/* [SDG] THE HORDE --------------------------------------------------- */

.horde-section {
    border: 2px solid var(--black);
    padding: 0.5rem;
    margin-bottom: 0.3rem;
}
.horde-section.horde-side {
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1515 100%);
    border-color: var(--red-dark);
}
.horde-section.survivor-side {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: var(--success-darker);
}
.horde-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}
.horde-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.horde-side .horde-section-title {
    color: var(--error-lightest);
}
.survivor-side .horde-section-title {
    color: var(--success-darker);
}
.horde-dice-count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--error-lightest);
}
.horde-roll-area {
    text-align: center;
}
.horde-roll-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.65rem;
    color: var(--error-lightest);
    margin-bottom: 0.2rem;
}
.horde-dice-display {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
}
.horde-d6 {
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid var(--black);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
}
.horde-d6.rolling {
    animation: hordeShake 0.1s infinite;
}
.horde-d6.win { background: var(--success-light); border-color: var(--success-darker); }
.horde-d6.lose { background: var(--error-lightest); border-color: var(--error-dark); }
.horde-d6.tie { background: var(--warning-bg-light); border-color: var(--warning); }
@keyframes hordeShake {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}
/* [SDG] THE HORDE --------------------------------------------------- */

.horde-vs {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    padding: 0.15rem;
    color: var(--red);
}
.horde-survivors {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.horde-survivor-row {
    background: white;
    border: 2px solid var(--black);
    padding: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.horde-survivor-row.eliminated {
    opacity: 0.4;
    background: var(--error-bg-dark);
}
.horde-survivor-row.you {
    border-width: 3px;
    border-color: var(--info);
}
.horde-survivor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 90px;
}
.horde-survivor-name {
    font-family: 'Special Elite', cursive;
    font-size: 0.7rem;
    font-weight: bold;
}
.horde-survivor-pool {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    color: var(--success-darker);
    margin-left: 0.3rem;
}
.horde-survivor-dice {
    display: flex;
    gap: 0.2rem;
    align-items: center;
}
.horde-survivor-outcome {
    font-family: 'Special Elite', cursive;
    font-size: 0.6rem;
    padding: 0.1rem 0.25rem;
    border-radius: 2px;
    margin-left: auto;
}
.horde-survivor-outcome.win { background: var(--success-light); color: var(--success-darker); }
.horde-survivor-outcome.lose { background: var(--error-lightest); color: var(--error-dark); }
.horde-survivor-outcome.convert { background: var(--warning-bg-light); color: var(--warning); }
.horde-survivor-outcome.draw { background: var(--text-disabled); color: var(--game-dark); }
.horde-score-bar {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.3rem;
    margin-bottom: 0.3rem;
    background: var(--kraft-light);
    border: 2px solid var(--black);
    flex-wrap: wrap;
}
.horde-score-item {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 0.1rem 0.3rem;
}
.horde-score-item.you { font-weight: bold; }
.horde-score-item.is-horde { 
    background: #7f1d1d; 
    color: var(--error-bg-dark);
    border-radius: 2px;
}
.horde-message {
    background: var(--kraft-light);
    border: 2px solid var(--black);
    padding: 0.35rem;
    font-family: 'Special Elite', cursive;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}
.horde-controls {
    margin-bottom: 0.4rem;
}
.horde-controls .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
}
/* [SDG] THE HORDE --------------------------------------------------- */

.horde-result {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    padding: 0.3rem;
    min-height: 1.2rem;
}
.horde-result.horde-wins {
    color: var(--error-dark);
    background: var(--error-bg);
    border: 2px solid #991b1b;
}
.horde-result.survivors-win {
    color: var(--success-darker);
    background: var(--success-bg);
    border: 2px solid #166534;
}
/* Three declarations sat here with NO SELECTOR — font-family 'Special Elite',
   font-size 0.9rem, margin-bottom 0.5rem — followed by a stray `}`. Whatever
   rule they belonged to lost its selector line at some point. They had never
   applied to anything, and the top-level parse error also swallowed
   `.horde-controls` below, so that rule was dead too. Removed rather than
   guessed at: there is no way to recover the intended selector, and inventing
   one would change the layout on purpose rather than by accident. */
.horde-controls {
    margin-bottom: 0.5rem;
}
.horde-result {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    padding: 0.5rem;
    min-height: 2rem;
}
.horde-result.win {
    color: var(--success);
    background: var(--success-bg);
}
.horde-result.lose {
    color: var(--error-light);
    background: var(--error-bg);
}
.horde-fight-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: #1a0a0a;
    border: 2px solid #ff6b6b;
}
.horde-fight-side {
    text-align: center;
}
.horde-fight-label {
    font-family: 'Special Elite', cursive;
    font-size: 0.75rem;
    color: var(--error-light);
    margin-bottom: 0.25rem;
}
.horde-fight-vs {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--error-light);
}
.horde-fight-total {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    color: white;
    margin-top: 0.25rem;
}
/* [SDG] CLOSE ENOUGH ------------------------------------------------ */


/* CLOSE ENOUGH Styles */
.ce-game {
    background: var(--kraft-light);
    border: 3px solid var(--black);
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}
.ce-header {
    text-align: center;
    margin-bottom: 0.75rem;
}
.ce-header h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    margin: 0;
    letter-spacing: 2px;
}
.ce-header .tagline {
    font-family: 'Special Elite', cursive;
    font-size: 0.75rem;
    color: var(--red);
}
.ce-scoreboard {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.ce-score-card {
    background: var(--white);
    border: 2px solid var(--black);
    padding: 0.25rem 0.5rem;
    text-align: center;
    min-width: 50px;
    box-shadow: 2px 2px 0 var(--black);
}
.ce-score-card.you {
    background: var(--kraft);
    border-width: 3px;
}
.ce-score-card .name {
    font-size: 0.6rem;
    font-weight: bold;
}
.ce-score-card .wins {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    line-height: 1;
}
.ce-message {
    text-align: center;
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    padding: 0.5rem;
    background: var(--black);
    color: var(--ink-on-dark-dim);
    margin-bottom: 0.5rem;
}
.ce-message.good { background: #16a34a; color: white; }
.ce-message.bad { background: #b91c1c; color: white; }
.ce-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.ce-card {
    background: var(--white);
    border: 2px solid var(--black);
    padding: 0.75rem 0.5rem;
    position: relative;
    box-shadow: 2px 2px 0 var(--black);
}
.ce-card-label {
    position: absolute;
    top: -0.4rem;
    left: 0.4rem;
    background: var(--black);
    color: var(--ink-inverse);
    padding: 0.05rem 0.3rem;
    font-size: 0.5rem;
    font-weight: bold;
    letter-spacing: 1px;
}
.ce-target-card {
    text-align: center;
}
.ce-target-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--red);
}
.ce-target-value.dynamic {
    font-size: 0.9rem;
    padding: 0.5rem 0;
}
.ce-tolerance-card {
    font-family: 'Special Elite', cursive;
    font-size: 0.8rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50px;
}
.ce-tolerance-card.after-hours {
    background: var(--black);
    color: var(--ink-on-dark-dim);
}
.ce-tolerance-card.after-hours .ce-card-label {
    background: var(--red);
}
.ce-dice-selection {
    background: var(--white);
    border: 2px solid var(--black);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}
.ce-dice-selection h4 {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}
.ce-dice-buttons {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
}
.ce-dice-btn {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    padding: 0.4rem 1rem;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--black);
}
.ce-dice-btn.selected {
    background: var(--black);
    color: var(--ink-inverse);
    transform: translate(2px, 2px);
    box-shadow: 0 0 0;
}
.ce-roll-btn {
    display: block;
    width: 100%;
    padding: 0.6rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 2px;
    background: var(--red);
    color: var(--ink-inverse);
    border: 3px solid var(--black);
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--black);
    margin-bottom: 0.5rem;
}
.ce-roll-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}
.ce-results {
    background: var(--white);
    border: 2px solid var(--black);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}
.ce-results h4 {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px dashed var(--black);
    padding-bottom: 0.25rem;
}
.ce-player-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem;
    margin-bottom: 0.3rem;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    flex-wrap: wrap;
    gap: 0.2rem;
    font-size: 0.85rem;
}
.ce-player-result.you {
    background: var(--kraft);
}
.ce-player-result.winner {
    background: var(--success-light);
    border-color: var(--success-dark);
}
.ce-player-result.failed {
    background: var(--error-lightest);
    border-color: var(--red);
    opacity: 0.7;
}
.ce-player-name {
    font-weight: bold;
    font-size: 0.8rem;
}
.ce-player-dice {
    display: flex;
    gap: 0.15rem;
    align-items: center;
}
.ce-die {
    width: 22px;
    height: 22px;
    background: var(--white);
    border: 2px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    border-radius: 3px;
}
.ce-die.rolling {
    animation: ceShake 0.1s infinite;
}
@keyframes ceShake {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}
/* [SDG] CLOSE ENOUGH ------------------------------------------------ */

.ce-player-sum {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
}
.ce-player-distance {
    font-size: 0.65rem;
    opacity: 0.7;
}
.ce-controls {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    flex-wrap: wrap;
}
.ce-control-btn {
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border: 2px solid var(--black);
    background: var(--kraft-light);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--black);
}
.ce-setup {
    background: var(--white);
    border: 2px solid var(--black);
    padding: 1rem;
    text-align: center;
}
.ce-setup h3 {
    font-family: 'Permanent Marker', cursive;
    margin-bottom: 0.75rem;
}
.ce-setup-row {
    margin-bottom: 0.5rem;
    text-align: left;
}
.ce-setup-row label {
    display: block;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
.ce-setup-row select {
    width: 100%;
    padding: 0.4rem;
    font-family: 'Courier Prime', monospace;
    border: 2px solid var(--black);
}
.ce-setup-row .checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ce-setup-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
.ce-start-btn {
    width: 100%;
    padding: 0.6rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    background: var(--black);
    color: var(--ink-inverse);
    border: 2px solid var(--black);
    cursor: pointer;
    margin-top: 0.75rem;
    box-shadow: 3px 3px 0 var(--red);
}
.ce-hidden { display: none !important; }

/* Close Enough IRL Mode */
.ce-irl-divider {
    text-align: center;
    color: var(--text-muted);
    margin: 1.5rem 0 1rem 0;
    font-family: 'Special Elite', cursive;
}
.ce-irl-mode {
    background: var(--white);
    border: 3px solid var(--black);
    padding: 1.5rem;
    text-align: center;
}
.ce-irl-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--text-primary);
    letter-spacing: 2px;
}
.ce-irl-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.ce-irl-toggle {
    margin-bottom: 1rem;
}
.ce-irl-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.ce-irl-checkbox input {
    width: 18px;
    height: 18px;
}
.ce-irl-cards-area {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.ce-irl-card {
    width: 140px;
    min-height: 120px;
    border: 3px solid var(--black);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}
.ce-irl-card.flip {
    animation: ceIrlFlip 0.4s ease-out;
}
@keyframes ceIrlFlip {
    0% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}
/* [SDG] CLOSE ENOUGH ------------------------------------------------ */

.ce-irl-target {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: var(--warning);
}
.ce-irl-tolerance {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: var(--info);
}
.ce-irl-tolerance.after-hours {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    border-color: var(--purple);
}
.ce-irl-card-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}
.ce-irl-card-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    line-height: 1;
}
.ce-irl-card-text {
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
}
.ce-irl-deck-counts {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
/* [SDG] MEDIA QUERIES ----------------------------------------------- */


/* ============================================
   MOBILE OPTIMIZATION - NO SCROLL GAMEPLAY
   ============================================ */
@media (max-width: 600px) {
    /* Global game container - fit viewport */
    .game-container {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 0.5rem;
    }
    
    /* Compact info bars */
    .game-info-bar {
        padding: 0.4rem;
        font-size: 0.7rem;
        line-height: 1.3;
    }
    .game-info-bar .game-objective,
    .game-info-bar .game-components {
        margin: 0;
    }
    
    /* Collapse how-to-play by default on mobile */
    .how-to-play {
        margin: 0.3rem 0;
        font-size: 0.75rem;
    }
    .how-to-play summary {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
    .how-to-play .rules-content {
        padding: 0.4rem;
    }
    .how-to-play .rules-content p {
        margin: 0.2rem 0;
        font-size: 0.75rem;
    }
    
    /* Smaller buttons */
    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    .btn-primary {
        padding: 0.5rem 1rem;
    }
    
    /* DEAD WEIGHT mobile */
    .dw-game { padding: 0.3rem; }
    .dw-scores { gap: 0.25rem; }
    .dw-player-score {
        padding: 0.3rem 0.5rem;
        min-width: 60px;
    }
    .dw-player-score .name { font-size: 0.75rem; }
    .dw-player-score .score { font-size: 1.1rem; }
    .dw-limit-bar { font-size: 0.9rem; margin: 0.25rem 0; }
    .dw-card-area { padding: 0.4rem; margin-bottom: 0.3rem; }
    .dw-card { padding: 0.3rem; max-width: 200px; }
    .dw-card-name { font-size: 0.95rem; }
    .dw-card-effect { font-size: 0.7rem; }
    .dw-card-back { height: 40px; font-size: 0.9rem; }
    .dw-call-area { padding: 0.5rem; }
    .dw-call-die { font-size: 2.5rem; margin: 0.25rem 0; }
    .dw-call-label { font-size: 0.75rem; }
    .dw-pool-section { padding: 0.4rem; }
    .dw-pool-label { font-size: 0.7rem; margin-bottom: 0.25rem; }
    .dw-dice-row { gap: 0.2rem; min-height: 32px; }
    .dw-die { width: 28px; height: 28px; font-size: 1rem; }
    .dw-message { padding: 0.4rem; font-size: 0.75rem; }
    .dw-controls { gap: 0.3rem; }
    .dw-token { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
    .dw-result { padding: 0.4rem; font-size: 1rem; }
    .dw-history { max-height: 50px; font-size: 0.7rem; margin-top: 0.3rem; }
    .dw-pile-in { padding: 0.3rem; margin-top: 0.3rem; }
    .dw-pile-in-player .dw-die { width: 22px; height: 22px; font-size: 0.85rem; }
    
    /* BROADSWORDS & BEER mobile */
    .bb-game { padding: 0.3rem; }
    .bb-round-header { padding: 0.3rem; font-size: 0.9rem; }
    .bb-beer-card { padding: 0.3rem; margin: 0.3rem 0; }
    .bb-card-display { padding: 0.3rem; min-height: 50px; }
    .bb-card-name { font-size: 0.9rem; }
    .bb-card-effect { font-size: 0.7rem; }
    .bb-players { gap: 0.3rem; }
    .bb-player { padding: 0.3rem; }
    .bb-player-name { font-size: 0.8rem; }
    .bb-stat-health { font-size: 0.75rem; }
    .bb-die { width: 24px; height: 24px; font-size: 0.9rem; }
    .bb-dice-row { gap: 0.15rem; }
    .bb-combat-stats { font-size: 0.8rem; }
    .bb-progress-bar { height: 4px; }
    .bb-message { padding: 0.3rem; font-size: 0.75rem; }
    .bb-options { gap: 0.3rem; flex-wrap: wrap; }
    .bb-option-group { font-size: 0.75rem; }
    .bb-opt-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    
    /* BUMP mobile */
    .bump-game { padding: 0.3rem; }
    .bump-status-bar { font-size: 0.85rem; padding: 0.3rem; }
    .bump-die { width: 36px; height: 36px; font-size: 0.9rem; }
    .bump-message { font-size: 0.8rem; padding: 0.4rem; }
    
    /* CULL mobile */
    .cull-game { padding: 0.3rem; }
    .cull-pool { padding: 0.3rem; }
    .cull-die { width: 28px; height: 28px; font-size: 1rem; }
    .cull-culler { width: 50px; height: 50px; font-size: 1.5rem; }
    .cull-message { font-size: 0.75rem; padding: 0.3rem; }
    
    /* WHITTLE mobile */
    .whittle-game { padding: 0.3rem; }
    /* min-height, never height — a fixed one clips the value out of the box. */
    .whittle-die { width: 32px; min-height: 32px; font-size: 1.1rem; }
    .whittle-pool { padding: 0.3rem; }
    .whittle-message { font-size: 0.75rem; }
    
    /* NINE LIVES mobile */
    .nine-lives-game { padding: 0.3rem; }
    .nl-grid { max-width: 180px; gap: 0.25rem; }
    .nl-pile { font-size: 0.8rem; }
    .nl-stats-bar { font-size: 0.85rem; padding: 0.3rem; }
    .nl-message { font-size: 0.75rem; padding: 0.3rem; }
    
    /* Subject to Change mobile */
    .stc-game { padding: 0.3rem; }
    .stc-players { gap: 0.3rem; }
    .stc-player { padding: 0.3rem; }
    .stc-die { width: 28px; height: 28px; font-size: 1rem; }
    .stc-condition-stack { font-size: 0.75rem; }
    .stc-current-condition { padding: 0.3rem; }
    .stc-cond-name { font-size: 1rem; }
    .stc-cond-effect { font-size: 0.7rem; }
    
    /* Impact Zone mobile */
    .iz-game { padding: 0.3rem; }
    .iz-card-display { min-height: 100px; }
    .iz-card-nav { font-size: 0.8rem; }
    
    /* Tethered mobile */
    .teth-game { padding: 0.3rem; }
    .teth-mountain { transform: scale(0.8); margin: -1rem 0; }
    .teth-target-number { font-size: 2rem; }
    .teth-die { width: 32px; height: 32px; }
    
    /* OUT mobile */
    .out-board { transform: scale(0.85); margin: -0.5rem auto; }
    
    /* One More Roll mobile */
    .omr-game-area { padding: 0.3rem; }
    .omr-dice-type { font-size: 1rem; }
    .omr-target { font-size: 2rem; }
    
    /* Crab Bucket mobile */
    .cb-players { gap: 0.3rem; }
    .cb-player { padding: 0.3rem; min-width: 50px; }
    
    /* Decathlon mobile */
    .deca-game-area { padding: 0.3rem; }
    .deca-event-name { font-size: 1rem; }
    .deca-die { width: 32px; height: 32px; }
    
    /* Three Row mobile */
    .tir-board { max-width: 200px; }
    .tir-cell { font-size: 1.5rem; }
    
    /* Double Down mobile */
    .dd-game-area { padding: 0.3rem; }
    .dd-die { width: 28px; height: 28px; font-size: 1rem; }
    .dd-tier-display { padding: 0.3rem; }
    
    /* BOMB BOMB mobile */
    .nz-timer { font-size: 2.5rem; }
    .nz-bomb { font-size: 3rem; }
    
    /* Busted mobile */
    .bu-die { width: 28px; height: 28px; font-size: 1rem; }
    .bu-table { padding: 0.3rem; }
    
    /* Simon Says mobile */
    .ss-game { padding: 0.3rem; }
    .ss-status-bar { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
    .ss-scores { gap: 0.3rem; }
    .ss-score-card { padding: 0.25rem 0.4rem; min-width: 55px; }
    .ss-score-card .name { font-size: 0.65rem; }
    .ss-score-card .score { font-size: 1.1rem; }
    .ss-call-area { padding: 0.5rem; }
    .ss-call-die { font-size: 2.5rem; }
    .ss-call-label { font-size: 0.85rem; }
    .ss-player-row { padding: 0.3rem; }
    .ss-player-name { font-size: 0.75rem; }
    .ss-dice-section { gap: 0.5rem; }
    .ss-dice-group-label { font-size: 0.6rem; }
    .ss-die { width: 26px; height: 26px; font-size: 1rem; }
    .ss-message { padding: 0.4rem; font-size: 0.75rem; }
    .ss-result { font-size: 1rem; padding: 0.4rem; }
    
    /* The Horde mobile */
    .horde-game { padding: 0.3rem; }
    .horde-phase-bar { padding: 0.3rem 0.5rem; }
    #horde-phase-label { font-size: 1rem; }
    .horde-scores { gap: 0.3rem; }
    .horde-score-card { padding: 0.25rem 0.4rem; min-width: 55px; }
    .horde-score-card .name { font-size: 0.65rem; }
    .horde-score-card .score { font-size: 1rem; }
    .horde-center { padding: 0.5rem; }
    .horde-center-label { font-size: 0.85rem; }
    .horde-die { transform: scale(0.85); }
    .horde-die .value { font-size: 0.95rem; }
    .horde-die .type { font-size: 0.5rem; }
    .horde-player-row { padding: 0.3rem; }
    .horde-player-name { font-size: 0.75rem; }
    .horde-num-btn { padding: 0.3rem 0.6rem; font-size: 1rem; }
    .horde-message { padding: 0.4rem; font-size: 0.75rem; }
    .horde-result { font-size: 1rem; padding: 0.4rem; }
    
    /* General dice scaling */
    [class*="-die"] {
        min-width: 24px;
        min-height: 24px;
    }
    
    /* Hide less critical elements on mobile */
    .game-container .dw-history,
    .game-container .bb-step-info,
    .game-container [class*="-log"] {
        display: none;
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    .game-container {
        padding: 0.25rem;
    }
    .game-info-bar {
        font-size: 0.65rem;
    }
    .dw-die, .bb-die, .cull-die { 
        width: 24px; 
        height: 24px; 
        font-size: 0.9rem; 
    }
    .dw-call-die { font-size: 2rem; }
    .btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
}
/* [SDG] LIGHTS OUT: SEVERAL GAMES (NINE LIVES, SHOOTOUT, BUSTED, …) --- */

/* ============================================================
   LIGHTS OUT — the literal-white surfaces.
   These rules hardcode `background: white`, so no token remap can
   reach them and they stayed as light islands in a dark theme,
   carrying light ink: white-on-white. Dice faces, cards, tokens.
   They become faces one step ABOVE the panel they sit on, so an
   object still reads even where its border tone went quiet.
   ============================================================ */
[data-theme="dark"] .flipped-card-display,
[data-theme="dark"] .nl-pile,
[data-theme="dark"] .nl-die,
[data-theme="dark"] .nl-current-card,
[data-theme="dark"] .shootout-player,
[data-theme="dark"] .shootout-grid-cell,
[data-theme="dark"] .goal-post,
[data-theme="dark"] .so-token.white,
[data-theme="dark"] .so-die-result .die-value,
[data-theme="dark"] .chucker-die,
[data-theme="dark"] .er-board-image,
[data-theme="dark"] .er-dice-display,
[data-theme="dark"] .bu-table-dice .bu-die,
[data-theme="dark"] .bu-your-hand,
[data-theme="dark"] .bu-round-summary,
[data-theme="dark"] .out-mode-toggle label,
[data-theme="dark"] .out-cell,
[data-theme="dark"] .sud-die,
[data-theme="dark"] .tt-die,
[data-theme="dark"] .d20r-die,
[data-theme="dark"] .db-die,
[data-theme="dark"] .dh-die,
[data-theme="dark"] .dd-die,
[data-theme="dark"] .cull-count-btn,
[data-theme="dark"] .whittle-count-btn,
[data-theme="dark"] .whittle-player-config,
[data-theme="dark"] .whittle-player,
[data-theme="dark"] .bump-battlefield,
[data-theme="dark"] .bump-bf-die,
[data-theme="dark"] .bump-bf-scorer,
[data-theme="dark"] .bump-die,
[data-theme="dark"] .hp-card,
[data-theme="dark"] .suit-btn,
[data-theme="dark"] .hp-player,
[data-theme="dark"] .hp-player-card,
[data-theme="dark"] .hp-player-select select,
[data-theme="dark"] .omr-mini-die,
[data-theme="dark"] .omr-die,
[data-theme="dark"] .nz-die-result,
[data-theme="dark"] .iz-tab,
[data-theme="dark"] .iz-card-display,
[data-theme="dark"] .iz-irl-card-display,
[data-theme="dark"] .om-mini-cell,
[data-theme="dark"] .om-die,
[data-theme="dark"] .teth-die,
[data-theme="dark"] .teth-eq-die,
[data-theme="dark"] .ss-die,
[data-theme="dark"] .horde-d6,
[data-theme="dark"] .horde-survivor-row {
    background: var(--surface-high);
    border-color: var(--edge);
}
[data-theme="dark"] .tir-die {
    background: linear-gradient(145deg, #35302a, #241f1a);
    border-color: var(--edge);
}
/* ============================================================
   LIGHTS OUT — the pale STATE tints.
   Rows and dice tinted #f0fdf4 "matched" / #fecaca "lowest" /
   #fef3c7 "winner" are light surfaces hardcoded past every token,
   so they held bright ink and vanished. Each is rotated to a DARK
   tint of the SAME HUE: green still means good, red still means
   dead. Only the lightness inverts.
   ============================================================ */
[data-theme="dark"] .selector-group.gambling select { background: linear-gradient(135deg, #15261a 0%, #15261b 100%); }
[data-theme="dark"] .rsvp-player.eliminated { background: #1d1d1d; }
[data-theme="dark"] .rsvp-player.winner { background: #262415; }
[data-theme="dark"] .slot.invalid { background: #261515; }
[data-theme="dark"] .chucker-die.wild { background: linear-gradient(135deg, #262215, #181526); }
[data-theme="dark"] .ram-card.trap-bust { background: #261515; }
[data-theme="dark"] .ram-card.trap-card.face-up { background: #261f15; }
[data-theme="dark"] .tir-die { background: linear-gradient(145deg, #1d1d1d, #1d1d1d); }
[data-theme="dark"] .tir-die.odd { background: linear-gradient(145deg, #261515, #261515); }
[data-theme="dark"] .tir-die.even { background: linear-gradient(145deg, #151d26, #151b26); }
[data-theme="dark"] .cull-die.positive { background: linear-gradient(145deg, #15261b, #15261b); }
[data-theme="dark"] .cull-die.negative { background: linear-gradient(145deg, #261515, #261515); }
[data-theme="dark"] .whittle-die { background: linear-gradient(145deg, #1d1d1d, #1d1d1d); }
[data-theme="dark"] .whittle-die.rolled { background: linear-gradient(145deg, #15261b, #15261b); }
[data-theme="dark"] .whittle-die.doomed { background: linear-gradient(145deg, #261515, #261515); }
[data-theme="dark"] .bump-bf-die.empty { background: #1d1d1d; }
[data-theme="dark"] .cb-die.ride { background: linear-gradient(135deg, #15261b, #15261b); }
[data-theme="dark"] .iz-irl-action-deck .iz-irl-card-display { background: linear-gradient(135deg, #151c26 0%, #151c26 100%); }
[data-theme="dark"] .iz-irl-impact-deck .iz-irl-card-display { background: linear-gradient(135deg, #261515 0%, #261515 100%); }
[data-theme="dark"] .bb-player.winner { background: linear-gradient(135deg, #262215 0%, #262215 100%); }
[data-theme="dark"] .bb-die.empty { background: #151b26; }
[data-theme="dark"] .teth-card.summit { background: linear-gradient(135deg, #262315 0%, #262115 100%); }
[data-theme="dark"] .ss-score-card.simon { background: linear-gradient(135deg, #262215 0%, #262215 100%); }
[data-theme="dark"] .ss-player-row.matched { background: linear-gradient(135deg, #15261a 0%, #15261b 100%); }
[data-theme="dark"] .ss-player-row.out { background: linear-gradient(135deg, #261515 0%, #261515 100%); }
[data-theme="dark"] .ss-player-row.paid { background: linear-gradient(135deg, #262215 0%, #262215 100%); }
[data-theme="dark"] .ss-player-row.done { background: linear-gradient(135deg, #15261b 0%, #15261b 100%); }
[data-theme="dark"] .horde-section.survivor-side { background: linear-gradient(135deg, #15261a 0%, #15261b 100%); }
[data-theme="dark"] .ce-irl-target { background: linear-gradient(135deg, #262215 0%, #262215 100%); }
[data-theme="dark"] .ce-irl-tolerance { background: linear-gradient(135deg, #151c26 0%, #151c26 100%); }
[data-theme="dark"] .ce-irl-tolerance.after-hours { background: linear-gradient(135deg, #26151e 0%, #26151e 100%); }
/* [SDG] LIGHTS OUT: HODGEPODGE -------------------------------------- */


/* ---- SUIT CARD FACES STAY LIGHT IN BOTH THEMES ----
   The four suit marks carry a PINNED 2-red/2-black split, and that split
   is the mechanic (it is what lets the physical deck double as an ordinary
   52-card deck). A dark card face destroys it twice over: near-black Rock
   and Void sink into the card, and Void's pale spiral inverts into a white
   blob. Same call MOLT and RED FLAGS already made for their card faces.

   Dark repaints these three from a large shared multi-selector group.
   That group is NOT edited here — pulling one selector out of a shared
   group has silently broken unrelated games in this file before — so this
   overrides it at higher specificity instead. .hp-shell gives (0,3,0),
   which clears both the group (0,2,0) and .hp-player-card.rock (0,2,0). */
[data-theme="dark"] .hp-shell .hp-card,
[data-theme="dark"] .hp-shell .hp-player-card,
[data-theme="dark"] .hp-shell .suit-btn { background: #ffffff; color: #17150f; }
[data-theme="dark"] .hp-shell .hp-player-card.rock,
[data-theme="dark"] .hp-shell .hp-player-card.void { border-color: #17150f; color: #17150f; }
[data-theme="dark"] .hp-shell .hp-player-card.scissors,
[data-theme="dark"] .hp-shell .hp-player-card.paper { border-color: #c0392b; color: #c0392b; }
[data-theme="dark"] .hp-shell .suit-btn.rock,
[data-theme="dark"] .hp-shell .suit-btn.void { border-color: #17150f; }
[data-theme="dark"] .hp-shell .suit-btn.scissors,
[data-theme="dark"] .hp-shell .suit-btn.paper { border-color: #c0392b; }
/* Selection stays a ring in dark too — see the note on .suit-btn.selected. */
[data-theme="dark"] .hp-shell .suit-btn.selected { background: #ffffff; }
[data-theme="dark"] .hp-shell .suit-btn.rock.selected,
[data-theme="dark"] .hp-shell .suit-btn.void.selected { box-shadow: 0 0 0 3px #17150f; }
[data-theme="dark"] .hp-shell .suit-btn.scissors.selected,
[data-theme="dark"] .hp-shell .suit-btn.paper.selected { box-shadow: 0 0 0 3px #c0392b; }
/* The card BACK is meant to be a red block; keep it that way. */
[data-theme="dark"] .hp-shell .hp-card.back { background: var(--red); color: var(--red-dark); }
/* RSVP draws its flipped cards on the same pinned light face. */
[data-theme="dark"] .rsvp-demo-shell .flipped-card,
[data-theme="dark"] .flipped-card-display { background: #ffffff; color: #17150f; }