/* ==========================================================================
   Texas Sweeps — design system
   "Lone Star night": deep royal-purple night sky, gold for the brand and Gold Coins, emerald for Sweep Coins.
   Chakra Petch for brand and headings, Anton for promo headlines, Inter for UI and figures.
   Token contrast was checked against --surface (#1a1135): ink 16:1, ink-2 10.5:1, muted 5.6:1, status text >= 5.5:1.
   ========================================================================== */

:root {
    --page: #0c0719;
    --page-2: #120a26;
    --surface: #1a1135;
    --surface-glass: rgba(30, 19, 62, 0.72);
    --raised: #241848;
    --raised-2: #2f2160;
    --border: rgba(196, 170, 255, 0.11);
    --border-strong: rgba(196, 170, 255, 0.22);

    --ink: #fbf7ff;
    --ink-2: #d6cdec;
    --muted: #a397c4;

    --gold: #ffc94d;
    --gold-strong: #f5a524;
    --gold-soft: rgba(255, 201, 77, 0.13);
    --gold-ink: #241602;

    /* Sweep Coins: emerald, so a player can always tell the two coins apart at a glance. */
    --sc: #3fe0a5;
    --sc-strong: #10b981;
    --sc-soft: rgba(63, 224, 165, 0.13);

    --violet: #9b6bff;
    --violet-strong: #7c3aed;
    --magenta: #ec4fd0;
    --buy: #22c55e;
    --buy-strong: #15924a;

    /* Status: reserved for state, always paired with an icon and a label. */
    --good: #16a34a;
    --good-text: #4ade80;
    --warning: #fab219;
    --warning-text: #fbbf24;
    --critical: #dc3545;
    --critical-text: #ff8a85;

    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-brand: "Chakra Petch", var(--font-ui);
    --font-display: "Anton", "Impact", var(--font-brand);

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow: 0 18px 44px rgba(5, 2, 14, 0.55);
    --glow-violet: 0 0 0 1px rgba(155, 107, 255, 0.35), 0 12px 36px rgba(124, 58, 237, 0.35);
    --focus: 0 0 0 3px rgba(255, 201, 77, 0.6);
    --gutter: clamp(16px, 2.6vw, 32px);
    --sidebar: 264px;
    --topbar: 70px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; background: var(--page); }

body {
    position: relative;
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1100px 620px at 8% -8%, rgba(124, 58, 237, 0.34), transparent 62%),
        radial-gradient(900px 520px at 100% 0%, rgba(236, 79, 208, 0.16), transparent 60%),
        radial-gradient(1200px 600px at 50% 115%, rgba(245, 165, 36, 0.10), transparent 60%),
        linear-gradient(180deg, #120a28 0%, var(--page) 55%, #0a0616 100%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
/* The bundled Bootstrap build is the Bootswatch "Vapor" theme, which gives all text a cyan glow. Our palette is gold,
   emerald and violet, and the glow also tints gradient-filled lettering, so it is switched off. */
body, a, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn-link, .modal, table, .toast, .card { text-shadow: none; }

/* A quiet field of stars behind everything. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.8), transparent 60%),
        radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, 0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 62%, rgba(255, 233, 168, 0.7), transparent 60%),
        radial-gradient(1px 1px at 88% 48%, rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(1px 1px at 22% 82%, rgba(214, 205, 236, 0.6), transparent 60%),
        radial-gradient(1.2px 1.2px at 58% 34%, rgba(255, 255, 255, 0.5), transparent 60%);
    background-size: 340px 340px, 420px 420px, 520px 520px, 380px 380px, 460px 460px, 300px 300px;
}

h1, h2, h3, h4 {
    margin: 0 0 0.4em;
    font-family: var(--font-brand);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--ink);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
small { font-size: 0.8rem; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: #ffdc85; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

img { max-width: 100%; display: block; }

.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Brand ---------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink);
    font-family: var(--font-brand);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.brand:hover { color: var(--ink); }
.brand-mark { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; filter: drop-shadow(0 4px 14px rgba(245, 165, 36, 0.45)); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { display: flex; flex-direction: column; line-height: 0.95; }
.brand-name b {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, #fff6d6 0%, #ffd66b 45%, #f5a524 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand-name small { margin-top: 3px; color: var(--ink-2); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5em; }

/* ---------- Coins ---------- */

.coin-ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
/* Text written for one coin only shows while that coin is chosen. */
body[data-coin="SC"] [data-for-coin="GC"], body[data-coin="GC"] [data-for-coin="SC"] { display: none !important; }
.sc-figure { color: var(--sc); }
.gc-figure { color: var(--gold); }

/* ---------- Buttons ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--raised);
    color: var(--ink);
    font: 700 0.9rem/1.2 var(--font-ui);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s, filter 0.15s;
    white-space: nowrap;
}
.button:hover { background: var(--raised-2); color: var(--ink); }
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; }
.button.primary {
    background: linear-gradient(180deg, #ffe08a 0%, #ffc94d 40%, #f5a524 100%);
    color: var(--gold-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(245, 165, 36, 0.32);
}
.button.primary:hover { filter: brightness(1.06); color: var(--gold-ink); }
.button.buy {
    background: linear-gradient(180deg, #4ade80 0%, var(--buy) 45%, var(--buy-strong) 100%);
    color: #04210f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(34, 197, 94, 0.3);
}
.button.buy:hover { filter: brightness(1.07); color: #04210f; }
.button.redeem {
    background: linear-gradient(135deg, #a78bfa 0%, var(--violet-strong) 45%, var(--magenta) 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(124, 58, 237, 0.35);
}
.button.redeem:hover { filter: brightness(1.08); color: #fff; }
.button.ghost { background: rgba(255, 255, 255, 0.02); border-color: var(--border-strong); }
.button.ghost:hover { border-color: var(--gold); background: var(--gold-soft); }
.button.quiet { background: transparent; color: var(--ink-2); padding-inline: 0.7rem; }
.button.quiet:hover { background: var(--raised); color: var(--ink); }
.button.danger { background: transparent; border-color: rgba(255, 138, 133, 0.45); color: var(--critical-text); }
.button.danger:hover { background: rgba(220, 53, 69, 0.14); }
.button.small { min-height: 34px; padding: 0.35rem 0.75rem; font-size: 0.82rem; }
.button.block { width: 100%; }
.button.pill { border-radius: 999px; }
.button .spinner-border { width: 1rem; height: 1rem; border-width: 2px; }

.button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.inline-form { display: inline; margin: 0; }

/* ---------- Panels ---------- */

.panel {
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(18px, 2.4vw, 28px);
    backdrop-filter: blur(10px);
}
.panel + .panel { margin-top: 20px; }
.panel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.panel-header h2, .panel-header h3 { margin: 0; }
.panel-header p { margin: 0.25rem 0 0; color: var(--muted); }

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 24px;
}
.page-header h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.page-header p { margin: 0.35rem 0 0; color: var(--ink-2); max-width: 62ch; }

.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid.sidebar-right { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; }

/* ---------- Stat tiles (figure contract: label · value · optional note) ---------- */

.stat-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-bottom: 20px; }
.stat {
    padding: 18px 20px;
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.stat-label { margin: 0 0 0.35rem; color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.stat-value { margin: 0; color: var(--ink); font: 700 1.6rem/1.15 var(--font-ui); }
.stat-note { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.8rem; }

.hero-figure {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid rgba(255, 201, 77, 0.24);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 201, 77, 0.18), transparent 48%),
        radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.22), transparent 50%),
        var(--surface);
}
.hero-figure .stat-label { color: var(--ink-2); }
.hero-figure .stat-value { font-size: clamp(2.4rem, 6vw, 3.3rem); letter-spacing: -0.01em; }

/* ---------- Status pills (state = icon + label + tone, never colour alone) ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-2);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}
.pill i { font-size: 0.8rem; }
.pill.status-success { color: var(--good-text); border-color: rgba(74, 222, 128, 0.45); background: rgba(22, 163, 74, 0.12); }
.pill.status-pending { color: var(--warning-text); border-color: rgba(250, 178, 25, 0.4); background: rgba(250, 178, 25, 0.08); }
.pill.status-danger { color: var(--critical-text); border-color: rgba(220, 53, 69, 0.5); background: rgba(220, 53, 69, 0.12); }
.pill.status-neutral { color: var(--ink-2); }
.pill.brand { color: var(--gold); border-color: rgba(255, 201, 77, 0.38); background: var(--gold-soft); letter-spacing: 0.04em; }

/* ---------- Flash messages ---------- */

.flash {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--raised);
}
.flash i { font-size: 1.15rem; line-height: 1.3; }
.flash p { margin: 0; color: var(--ink); }
.flash.success { border-color: rgba(74, 222, 128, 0.45); }
.flash.success i { color: var(--good-text); }
.flash.error { border-color: rgba(220, 53, 69, 0.55); }
.flash.error i { color: var(--critical-text); }
.flash.info i { color: var(--gold); }
.flash .flash-close { margin-left: auto; padding: 0 4px; border: 0; background: none; color: var(--muted); cursor: pointer; }

/* ---------- Forms ---------- */

.form-stack { display: grid; gap: 16px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; }
.field { display: grid; gap: 6px; }
.field > label, .field-label { color: var(--ink-2); font-size: 0.85rem; font-weight: 600; }
.field-hint { color: var(--muted); font-size: 0.8rem; }
.field-error, .field-validation-error, .validation-summary-errors {
    color: var(--critical-text);
    font-size: 0.82rem;
}
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.validation-summary-valid { display: none; }

.input, .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: rgba(8, 4, 20, 0.6);
    color: var(--ink);
    font: 500 0.95rem/1.3 var(--font-ui);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select[multiple] { min-height: 120px; }
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: #7d70a3; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: var(--focus);
}
.field input.input-validation-error, .field select.input-validation-error { border-color: var(--critical); }
.field input[type="file"] { color: var(--ink-2); font-size: 0.85rem; }

.money-input { position: relative; }
.money-input span {
    position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-weight: 700; pointer-events: none;
}
.field .money-input input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { padding-left: 2.6rem; font-size: 1.25rem; font-weight: 700; }

.check {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    color: var(--ink-2);
    font-size: 0.88rem;
    cursor: pointer;
}
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex: none; }

/* Selectable cards (payment methods, amounts, games) built on native radios. */
.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.choice-grid.amounts { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--raised);
    transition: border-color 0.15s, background-color 0.15s;
}
.choice-body i { color: var(--gold); font-size: 1.3rem; }
.choice-body strong { font-size: 0.95rem; }
.choice-body small { color: var(--muted); }
.amounts .choice-body { align-items: center; padding: 12px 8px; font-weight: 700; }
.choice:hover .choice-body { border-color: rgba(255, 201, 77, 0.5); }
.choice input:checked + .choice-body { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.choice input:focus-visible + .choice-body { box-shadow: var(--focus); }
.choice input:disabled + .choice-body { opacity: 0.5; cursor: not-allowed; }

.step-legend {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 12px;
    padding: 0;
    font: 700 1rem var(--font-ui);
    color: var(--ink);
}
.step-legend b {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--gold-soft); color: var(--gold); font-size: 0.8rem;
}
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset + fieldset { margin-top: 24px; }

/* ---------- Tables & lists ---------- */

.table-wrap { overflow-x: auto; margin: 0 -4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th {
    padding: 0 12px 10px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.data-table td { padding: 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.data-table td.amount, .data-table th.amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.data-table .cell-sub { display: block; color: var(--muted); font-size: 0.78rem; }
.data-table code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; color: var(--ink-2); }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li + li { border-top: 1px solid var(--border); }
.activity-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 4px;
    color: var(--ink);
}
a.activity-row:hover { color: var(--ink); background: rgba(255, 255, 255, 0.025); }
.activity-icon {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--raised); color: var(--gold); font-size: 1.05rem;
}
.activity-main { min-width: 0; }
.activity-main strong { display: block; font-weight: 600; }
.activity-main small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.activity-side { display: grid; justify-items: end; gap: 4px; }
.activity-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

.empty {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 36px 16px;
    text-align: center;
    color: var(--muted);
}
.empty i { font-size: 2rem; color: var(--gold); opacity: 0.85; }
.empty h3 { margin: 0.3rem 0 0; color: var(--ink); }
.empty p { margin: 0 0 0.6rem; max-width: 42ch; }

.definition { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.definition dt { color: var(--muted); font-weight: 500; }
.definition dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Game artwork (game rooms and admin) ---------- */

.cover {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--raised) center / cover no-repeat;
}
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(12, 7, 25, 0.88)); }
.cover-tag {
    position: absolute; left: 10px; top: 10px; z-index: 1;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    background: rgba(12, 7, 25, 0.75); color: var(--ink-2);
    font-size: 0.72rem; font-weight: 700;
}

.game-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.game-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-glass);
    color: var(--ink);
    transition: border-color 0.15s, transform 0.15s;
}
a.game-tile:hover { border-color: rgba(255, 201, 77, 0.45); color: var(--ink); transform: translateY(-2px); }
.game-tile-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 4px; }
.game-tile-body strong { font-family: var(--font-brand); font-size: 1.05rem; }
.game-tile-body small { display: block; color: var(--muted); }
.game-tile.is-soon .cover { filter: grayscale(0.7) brightness(0.7); }

/* Player account card */
.account-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.account-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-glass);
}
.account-card.is-ready { border-color: rgba(255, 201, 77, 0.24); }
.account-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; }
.account-head .cover { aspect-ratio: 1; border-radius: 12px; }
.account-head .cover::after { display: none; }
.account-title h3 { margin: 0 0 0.3rem; }
.account-body { display: grid; gap: 10px; padding: 0 16px 16px; }
.credential {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(8, 4, 20, 0.55);
    border: 1px solid var(--border);
}
.credential small { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.credential strong { display: block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.credential .is-masked { letter-spacing: 0.2em; }
.account-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
}
.account-actions .button { min-height: 40px; padding-inline: 0.5rem; font-size: 0.82rem; }
.account-note { margin: 0; color: var(--muted); font-size: 0.82rem; }
.progress-line { height: 4px; overflow: hidden; border-radius: 4px; background: var(--raised); }
.progress-line span { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--gold); animation: progress-slide 1.4s ease-in-out infinite; }
@keyframes progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- Public site (visitors) ---------- */

.public-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: rgba(12, 7, 25, 0.82);
    backdrop-filter: blur(14px);
}
.public-header .container-wide { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.public-nav { display: flex; align-items: center; gap: 0.5rem; }
.container-wide { width: min(1320px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

.section { padding: clamp(40px, 6vw, 72px) 0; }
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 24px; }
.section-heading h2 { margin: 0; }

.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: step; }
.step { position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-glass); }
.step::before {
    counter-increment: step; content: "0" counter(step);
    display: block; margin-bottom: 14px; color: var(--gold); font: 400 1.6rem var(--font-display); letter-spacing: 0.06em;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { margin: 0; color: var(--ink-2); }
.method-strip { display: flex; flex-wrap: wrap; gap: 10px; }

.site-footer { margin-top: 40px; padding: 36px 0 28px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.86rem; background: rgba(8, 4, 20, 0.45); }
.site-footer .container-wide { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.site-footer h4 { margin-bottom: 0.6rem; font: 700 0.8rem var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.site-footer p { margin: 0.6rem 0 0; }
.site-footer a { display: block; margin-bottom: 0.35rem; color: var(--ink-2); }
.site-footer a:hover { color: var(--gold); }
.site-footer a.brand { display: inline-flex; margin-bottom: 0; color: var(--ink); }

/* ---------- Auth modal & pages ---------- */

.auth-modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 201, 77, 0.14), transparent 40%),
        radial-gradient(circle at 0 100%, rgba(124, 58, 237, 0.25), transparent 45%),
        var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
}
.auth-modal .modal-dialog { max-width: 540px; }
.auth-modal .modal-body { padding: clamp(22px, 4vw, 34px); }
.modal-backdrop.show { opacity: 0.72; }
.auth-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 0; border-radius: 50%; background: var(--raised); color: var(--ink-2); cursor: pointer;
}
.auth-close:hover { color: var(--ink); background: var(--raised-2); }
.auth-panel h2 { margin: 0.2rem 0 0.3rem; }
.auth-panel > p { color: var(--ink-2); }
.auth-modal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-switch { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 0.88rem; }
.auth-switch button { padding: 0; border: 0; background: none; color: var(--gold); font-weight: 700; cursor: pointer; }
.auth-page { display: grid; place-items: start center; padding: clamp(28px, 6vw, 72px) var(--gutter); }
.auth-page .panel { width: min(100%, 540px); }

/* ---------- App shell (signed in) ---------- */

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 14px 18px;
    border-right: 1px solid var(--border);
    background:
        radial-gradient(420px 260px at 0 0, rgba(124, 58, 237, 0.28), transparent 70%),
        linear-gradient(180deg, rgba(26, 15, 54, 0.96), rgba(13, 7, 27, 0.98));
    scrollbar-width: thin;
    scrollbar-color: var(--raised-2) transparent;
}
.app-sidebar .brand { padding: 0 6px; }
/* The sidebar scrolls; its parts keep their size instead of squashing to fit. */
.app-sidebar > * { flex-shrink: 0; }

.player-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 201, 77, 0.22);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 201, 77, 0.16), transparent 55%),
        rgba(36, 24, 72, 0.7);
}
.player-card-head { display: flex; align-items: center; gap: 10px; }
.player-card-head strong { display: block; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card-head small { color: var(--muted); }
.avatar {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%;
    background: linear-gradient(145deg, #a78bfa, var(--violet-strong)); color: #fff; font-weight: 800; text-transform: uppercase;
    box-shadow: 0 0 0 2px rgba(255, 201, 77, 0.55);
}
.player-balances { display: grid; gap: 6px; margin: 0; }
.player-balances div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(8, 4, 20, 0.45); }
.player-balances dt { display: flex; align-items: center; gap: 0.45rem; color: var(--ink-2); font-size: 0.78rem; font-weight: 600; }
.player-balances dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }

.daily-bonus {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 201, 77, 0.55);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255, 201, 77, 0.22), rgba(236, 79, 208, 0.12));
    color: var(--ink);
    font: 700 0.88rem var(--font-ui);
    text-align: left;
    cursor: pointer;
}
.daily-bonus i { color: var(--gold); font-size: 1.2rem; }
.daily-bonus small { display: block; color: var(--ink-2); font-weight: 500; font-size: 0.74rem; }
.daily-bonus:not(:disabled)::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
    animation: shine 3.2s ease-in-out infinite;
}
.daily-bonus:disabled { cursor: default; border-color: var(--border-strong); background: rgba(255, 255, 255, 0.03); }
.daily-bonus:disabled i { color: var(--muted); }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.side-nav { display: grid; gap: 2px; }
.side-nav p { margin: 12px 10px 6px; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.side-nav a {
    display: flex; align-items: center; gap: 0.75rem;
    min-height: 42px; padding: 0 12px; border-radius: var(--radius-sm);
    color: var(--ink-2); font-weight: 600;
    transition: background-color 0.15s, color 0.15s;
}
.side-nav a i { width: 20px; font-size: 1.05rem; text-align: center; color: var(--muted); transition: color 0.15s; }
.side-nav a:hover { background: rgba(155, 107, 255, 0.12); color: var(--ink); }
.side-nav a:hover i { color: var(--violet); }
.side-nav a.active { background: linear-gradient(90deg, rgba(255, 201, 77, 0.2), rgba(255, 201, 77, 0.04)); color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.side-nav a.active i { color: var(--gold); }
.side-nav .count { margin-left: auto; padding: 0 0.45rem; border-radius: 999px; background: var(--raised-2); color: var(--ink-2); font-size: 0.7rem; font-weight: 800; }
.side-nav .count.hot { background: var(--critical); color: #fff; }
.sidebar-foot { margin-top: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); color: var(--muted); font-size: 0.78rem; }
.sidebar-foot strong { display: block; color: var(--ink-2); }

.app-main { min-width: 0; }
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--topbar);
    padding: 0 var(--gutter);
    border-bottom: 1px solid var(--border);
    background: rgba(13, 7, 27, 0.8);
    backdrop-filter: blur(16px);
}
.app-topbar .brand { display: none; }
.topbar-menu { display: none; }
.topbar-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.topbar-search .input { min-height: 42px; padding-left: 2.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.topbar-search > i { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-actions .button { min-height: 42px; border-radius: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* The coin switch: both balances, and which one the casino plays with. */
.coin-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(8, 4, 20, 0.6);
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.45);
}
.coin-switch button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0 0.85rem 0 0.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: 800 0.92rem var(--font-ui);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.coin-switch button:hover { color: var(--ink); }
.coin-switch button[aria-checked="true"][data-coin="GC"] {
    color: #fff3cf; border-color: rgba(255, 201, 77, 0.55);
    background: linear-gradient(180deg, rgba(255, 201, 77, 0.32), rgba(245, 165, 36, 0.14));
    box-shadow: 0 0 18px rgba(255, 201, 77, 0.28);
}
.coin-switch button[aria-checked="true"][data-coin="SC"] {
    color: #d8ffef; border-color: rgba(63, 224, 165, 0.55);
    background: linear-gradient(180deg, rgba(63, 224, 165, 0.3), rgba(16, 185, 129, 0.12));
    box-shadow: 0 0 18px rgba(63, 224, 165, 0.25);
}
.coin-switch .coin-ico { width: 24px; height: 24px; }
.coin-switch small { display: none; }

.user-menu > button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 3px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; }
.user-menu .dropdown-menu {
    min-width: 240px; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
}
.user-menu .dropdown-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 0.9rem; }
.user-menu .dropdown-item i { color: var(--muted); }
.user-menu .dropdown-item:hover, .user-menu .dropdown-item:focus { background: var(--raised); color: var(--ink); }
.user-menu .dropdown-header { padding: 0.5rem 0.7rem; color: var(--ink); font-weight: 700; }
.user-menu .dropdown-header small { display: block; color: var(--muted); font-weight: 500; }
.user-menu .dropdown-divider { border-color: var(--border); }

.app-content { padding: 22px var(--gutter) 64px; max-width: 1480px; }
.app-content.narrow { max-width: 1240px; }

.bottom-nav { display: none; }

/* Mobile drawer: the sidebar slides in. */
.drawer { --bs-offcanvas-width: min(320px, 86vw); --bs-offcanvas-color: var(--ink); --bs-offcanvas-bg: transparent; color: var(--ink); background: transparent; border: 0 !important; }
/* Bootstrap components bring the Vapor theme's cyan text; keep them on the site's ink. */
.dropdown-menu, .offcanvas, .modal-content { --bs-dropdown-color: var(--ink-2); --bs-dropdown-link-color: var(--ink-2); color: var(--ink); }
.drawer .app-sidebar { position: static; height: 100%; border-right: 1px solid var(--border-strong); }
.drawer-close { position: absolute; top: 14px; right: 12px; z-index: 2; }

/* ---------- Player pages ---------- */

.dashboard-hero { margin-bottom: 20px; }
.dashboard-hero h1 { margin: 0 0 0.2rem; font-size: clamp(1.5rem, 3vw, 2rem); }

.status-card { width: min(100%, 560px); margin: 0 auto; text-align: center; }
.status-card .status-icon {
    display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px;
    border-radius: 50%; background: var(--raised); font-size: 1.8rem;
}
.status-card .status-icon.status-success { color: var(--good-text); background: rgba(22, 163, 74, 0.16); }
.status-card .status-icon.status-pending { color: var(--warning-text); background: rgba(250, 178, 25, 0.12); }
.status-card .status-icon.status-danger { color: var(--critical-text); background: rgba(220, 53, 69, 0.16); }
.status-card .definition { margin: 22px 0; padding: 18px; border-radius: var(--radius); background: rgba(8, 4, 20, 0.5); text-align: left; }
.status-card .button-row { justify-content: center; }

.notice {
    display: flex; gap: 0.8rem; align-items: flex-start;
    padding: 14px 16px; border-radius: var(--radius);
    background: var(--raised); color: var(--ink-2); font-size: 0.88rem;
}
.notice i { color: var(--gold); font-size: 1.1rem; line-height: 1.3; }
.notice strong { color: var(--ink); }

.summary-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
}

/* ---------- Admin ---------- */

.admin-badge { color: var(--gold); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; }
.provider-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.provider {
    display: grid; gap: 8px; padding: 16px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--raised);
}
.provider header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.provider strong { font-family: var(--font-brand); font-size: 1rem; }
.provider ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.provider p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.thumb { width: 56px; height: 40px; border-radius: 6px; background: var(--raised) center / cover no-repeat; }
.thumb.portrait { width: 42px; height: 56px; }
.search-form { display: flex; gap: 10px; max-width: 520px; }
.search-form .input { flex: 1; }
.cover-preview { width: 100%; max-width: 320px; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--raised) center / cover no-repeat; border: 1px dashed var(--border-strong); }

/* ---------- Page loader (js/page-loader.js) ---------- */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 46%, rgba(124, 58, 237, 0.42), transparent 34%),
        radial-gradient(circle at 50% 46%, rgba(20, 10, 44, 0.72), rgba(8, 4, 18, 0.9) 70%);
    backdrop-filter: blur(7px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.page-loader.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.22s ease; }

/* A gold shimmer racing along the top edge, like a browser progress bar. */
.page-loader-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: rgba(255, 201, 77, 0.12); }
.page-loader-bar::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(90deg, transparent, #ffc94d 35%, #fff1b8 50%, #ec4fd0 70%, transparent);
    box-shadow: 0 0 12px rgba(255, 201, 77, 0.8);
    animation: loader-bar 1.15s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes loader-bar { from { transform: translateX(-110%); } to { transform: translateX(240%); } }

.page-loader-card { display: grid; justify-items: center; gap: 6px; transform: scale(0.9) translateY(6px); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35); }
.page-loader.is-active .page-loader-card { transform: none; }

/* Room underneath so the orbiting coins pass clear of the title. */
.loader-orbit { position: relative; width: 136px; height: 136px; margin: 26px 0 38px; }
.loader-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 201, 77, 0.25) 30%, #ffc94d 55%, #fff1b8 62%, transparent 63% 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    filter: drop-shadow(0 0 8px rgba(255, 201, 77, 0.7));
    animation: loader-spin 1.05s linear infinite;
}
.loader-ring.inner {
    inset: 13px;
    background: conic-gradient(from 180deg, transparent 0 25%, rgba(155, 107, 255, 0.3) 40%, #9b6bff 62%, #ec4fd0 72%, transparent 73% 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    filter: drop-shadow(0 0 6px rgba(236, 79, 208, 0.7));
    animation-duration: 1.6s;
    animation-direction: reverse;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }

.loader-star {
    position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px;
    filter: drop-shadow(0 6px 18px rgba(245, 165, 36, 0.55));
    animation: loader-pulse 1.3s ease-in-out infinite;
}
@keyframes loader-pulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(10deg); } }

/* Gold and Sweep coins circling the ring. */
.loader-coin { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; animation: loader-orbit 2.2s linear infinite; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.loader-coin.sc { animation-delay: -1.1s; }
@keyframes loader-orbit { from { transform: rotate(0deg) translateX(84px) rotate(0deg); } to { transform: rotate(360deg) translateX(84px) rotate(-360deg); } }

.loader-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff7d6; box-shadow: 0 0 10px 3px rgba(255, 215, 106, 0.8); opacity: 0; animation: loader-twinkle 1.8s ease-in-out infinite; }
.loader-spark.s1 { left: -10px; top: 18px; }
.loader-spark.s2 { right: -14px; top: 64px; animation-delay: 0.6s; }
.loader-spark.s3 { left: 30px; bottom: -14px; animation-delay: 1.2s; }
@keyframes loader-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 45% { opacity: 1; transform: scale(1); } }

.loader-title {
    margin: 0;
    font: 400 1.65rem/1 var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff8d8, #ffd56a 50%, #f5a524);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(60, 26, 0, 0.6));
}
.loader-dots i { font-style: normal; animation: loader-dot 1.2s ease-in-out infinite; }
.loader-dots i:nth-child(2) { animation-delay: 0.2s; }
.loader-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes loader-dot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
.loader-tagline { margin: 0; color: var(--ink-2); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; }

/* The new page eases in instead of popping. */
.app-content, .public-main { animation: page-enter 0.32s ease-out both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    /* Still clearly "working", without the spinning. */
    .loader-ring, .loader-ring.inner, .loader-star, .loader-coin, .loader-spark { animation: none !important; }
    .loader-coin.gc { transform: translateX(-84px); }
    .loader-coin.sc { transform: translateX(84px); }
    .page-loader-bar::before { animation: none !important; width: 100%; opacity: 0.7; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .topbar-search { display: none; }
}

@media (max-width: 1080px) {
    .grid.sidebar-right { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-shell > .app-sidebar { display: none; }
    .app-topbar { gap: 8px; min-height: 62px; padding: 0 12px; }
    .app-topbar .brand { display: inline-flex; }
    .app-topbar .brand-name { display: none; }
    .app-topbar .brand-mark { width: 36px; height: 36px; }
    .topbar-menu { display: inline-grid; }
    .topbar-actions { gap: 6px; }
    .topbar-actions .redeem, .user-menu { display: none; }
    .app-content { padding: 16px 12px 104px; }
    .bottom-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 50;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-strong);
        background: rgba(15, 8, 32, 0.96);
        backdrop-filter: blur(14px);
    }
    .bottom-nav a, .bottom-nav button {
        display: grid; justify-items: center; gap: 2px;
        padding: 6px 2px; border: 0; border-radius: var(--radius-sm); background: none;
        color: var(--muted); font: 700 0.68rem var(--font-ui); cursor: pointer;
    }
    .bottom-nav i { font-size: 1.25rem; }
    .bottom-nav a.active { color: var(--gold); background: var(--gold-soft); }
    .bottom-nav .bottom-buy i { color: var(--buy); }
    .site-footer .container-wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .auth-modal .form-grid { grid-template-columns: minmax(0, 1fr); }
    .public-nav .button.ghost { display: none; }
    .activity-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
    .activity-icon { width: 34px; height: 34px; }
    .definition { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .definition dd { margin-bottom: 8px; }
    .account-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coin-switch { padding: 3px; gap: 2px; }
    .coin-switch button { min-height: 34px; padding: 0 0.55rem 0 0.3rem; font-size: 0.8rem; gap: 0.3rem; }
    .coin-switch .coin-ico { width: 20px; height: 20px; }
    .topbar-actions .buy span { display: none; }
    .topbar-actions .buy { padding-inline: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}