/* =====================================================================
   Casino styling — pulled into one stylesheet so the rest of the site
   keeps its plain Bootstrap look while the roulette page goes full
   casino. Generic styles come first; .casino-page scopes the heavy
   theming.
   ===================================================================== */

body { background: #f5f5f7; }

/* ---------------------------------------------------------------------
   PALETTE
   --------------------------------------------------------------------- */
:root {
    --felt-deep:   #0c4a2a;
    --felt-dark:   #073a20;
    --felt-edge:   #052917;
    --gold:        #d4af37;
    --gold-light:  #f5d36a;
    --gold-dark:   #8a6118;
    --pocket-red:  #c8102e;
    --pocket-black:#1a1a1a;
    --pocket-green:#117a3d;
    --rim:         #3a200d;
    --rim-light:   #5a3416;
    --cream:       #f5f1e8;
}

/* =====================================================================
   ROULETTE PAGE
   ===================================================================== */

.casino-page {
    /* Felt-ish backdrop, framed in mahogany */
    background:
        radial-gradient(circle at 50% 0%, #0e6037 0%, var(--felt-deep) 40%, var(--felt-dark) 80%, var(--felt-edge) 100%);
    border: 6px solid var(--rim);
    border-radius: 16px;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.55),
        0 12px 40px rgba(0,0,0,0.45);
    padding: 28px 24px 24px;
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
}

/* ---- Top: wheel + side panel ---------------------------------------- */
.casino-top {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 28px;
    align-items: start;
    margin-bottom: 28px;
}
@media (max-width: 900px) {
    .casino-top { grid-template-columns: 1fr; }
}

.wheel-stage {
    position: relative;
    width: 400px;
    height: 400px;
    max-width: 100%;
    margin: 0 auto;
}
.wheel-stage::before {
    /* Outer table cradle */
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #432410 0%, #1f0d04 80%);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.7), 0 8px 30px rgba(0,0,0,0.5);
    z-index: 0;
}
.wheel-rotor {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* The transition is applied dynamically by JS — leave it inline-able */
    transform: rotate(0deg);
    will-change: transform;
}
.roulette-wheel-svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}
.wheel-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left:  16px solid transparent;
    border-right: 16px solid transparent;
    border-top:   28px solid var(--gold);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
    z-index: 5;
}
.wheel-pointer::after {
    content: "";
    position: absolute;
    top: -32px; left: -4px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 4px var(--gold);
}

/* ---- Side: balance + history + result ------------------------------- */
.wheel-side {
    padding: 6px 4px;
}
.wheel-meta { display: flex; gap: 10px; flex-wrap: wrap; }

.history-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    border: 1px solid rgba(212,175,55,0.18);
    min-height: 50px;
    align-items: center;
}
.history-pip {
    width: 30px; height: 30px;
    border-radius: 50%;
    line-height: 28px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1.5px solid rgba(255,255,255,0.85);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    font-family: Georgia, serif;
}
.pip-red   { background: var(--pocket-red);   }
.pip-black { background: var(--pocket-black); }
.pip-green { background: var(--pocket-green); }

.result-display {
    margin-top: 16px;
    padding: 16px;
    text-align: center;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 10px;
}
.result-pip {
    width: 80px; height: 80px;
    line-height: 76px;
    margin: 0 auto 10px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 1.8rem;
    border: 3px solid var(--gold);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 -4px 8px rgba(0,0,0,0.3);
    font-family: Georgia, serif;
    background: var(--pocket-green);
}
.result-pip.color-red   { background: var(--pocket-red);   }
.result-pip.color-black { background: var(--pocket-black); }
.result-pip.color-green { background: var(--pocket-green); }
.result-text { font-size: 1.2rem; font-weight: 600; }
.result-net  { font-size: 1.05rem; margin-top: 4px; }

/* ---- The betting table (felt) --------------------------------------- */
.casino-felt {
    background: linear-gradient(180deg, var(--felt-deep), var(--felt-dark));
    border: 3px solid var(--gold-dark);
    border-radius: 10px;
    padding: 10px;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.5);
    margin-bottom: 22px;
}

.bet-table {
    display: grid;
    /* Zero column | numbers grid (1fr) */
    grid-template-columns: 60px 1fr;
    gap: 6px;
}

/* Generic cell */
.cell {
    border: 2px solid var(--gold-dark);
    color: #fff;
    font-weight: 700;
    font-family: Georgia, serif;
    cursor: pointer;
    text-align: center;
    transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
    user-select: none;
    background: var(--felt-deep);
}
.cell:hover  { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.5); filter: brightness(1.15); }
.cell:active { transform: translateY(0); }
.cell.selected {
    outline: 3px solid var(--gold-light);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(245,211,106,0.35);
}
.cell.win-flash {
    animation: win-flash 1.2s ease-in-out 2;
}
@keyframes win-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,211,106,0); }
    50%      { box-shadow: 0 0 24px 6px rgba(245,211,106,0.9); }
}

.color-red   { background: var(--pocket-red);   }
.color-black { background: var(--pocket-black); }
.color-green { background: var(--pocket-green); }

/* Zero column — spans entire numbers grid height */
.zero-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zero-cell {
    flex: 1;
    background: var(--pocket-green);
    font-size: 1.4rem;
    border-radius: 50% 0 0 50% / 8% 0 0 8%;
}

/* Numbers grid */
.numbers-grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
}
.num-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr) 50px;
    gap: 6px;
}
.num-cell {
    aspect-ratio: 1 / 1;
    font-size: 1.1rem;
    min-height: 48px;
}
.column-cell {
    background: linear-gradient(180deg, #0e6037, var(--felt-deep));
    font-size: 0.9rem;
    color: var(--gold-light);
    letter-spacing: 0.5px;
}

/* Dozens row */
.dozens-row {
    grid-column: 2;     /* aligns under the numbers grid, NOT under the 0 */
    display: grid;
    grid-template-columns: 4fr 4fr 4fr 50px;
    gap: 6px;
    margin-top: 6px;
}
.dozen-cell {
    padding: 12px 4px;
    font-size: 1rem;
    background: linear-gradient(180deg, #0e6037, var(--felt-deep));
    color: var(--gold-light);
    letter-spacing: 1px;
}
/* The 50px gap on the right keeps things aligned with the column cells above. */
.dozens-row::after {
    content: "";
    grid-column: 4;
}

/* Outside row */
.outside-row {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr) 50px;
    gap: 6px;
    margin-top: 6px;
}
.outside-cell {
    padding: 12px 4px;
    font-size: 0.95rem;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #0e6037, var(--felt-deep));
    color: var(--gold-light);
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.outside-cell.color-red,
.outside-cell.color-black {
    color: #fff;
}
.outside-row::after {
    content: "";
    grid-column: 7;
}
.diamond { font-size: 1.6rem; }

/* ---- Bet controls (chips + spin) ------------------------------------ */
.casino-controls {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1fr;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .casino-controls { grid-template-columns: 1fr; }
}

.bet-summary-card,
.chips,
.action-buttons {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 10px;
    padding: 14px 16px;
}

.bet-summary {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold-light);
    margin: 4px 0 8px;
    min-height: 1.6em;
}
.bet-summary.empty { color: rgba(255,255,255,0.55); font-weight: 400; }
.bet-stake-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px dashed rgba(212,175,55,0.3);
    padding-top: 8px;
}

/* Chip row */
.chip-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.chip {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 3px dashed rgba(255,255,255,0.55);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    font-family: "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    box-shadow:
        0 4px 8px rgba(0,0,0,0.5),
        inset 0 -3px 6px rgba(0,0,0,0.3),
        inset 0 2px 3px rgba(255,255,255,0.25);
    transition: transform .08s ease, box-shadow .12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
}
.chip span {
    background: rgba(0,0,0,0.35);
    border-radius: 50%;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.4);
}
.chip:hover { transform: translateY(-2px); }
.chip.selected {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 3px var(--gold-light),
        0 6px 14px rgba(0,0,0,0.55),
        inset 0 -3px 6px rgba(0,0,0,0.3);
}
.chip-0 { background: linear-gradient(135deg, #ffffff, #c8c8c8); color: #222; }
.chip-0 span { color: #222; background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.4); }
.chip-1 { background: linear-gradient(135deg, #d83a3a, #8a1717); }
.chip-2 { background: linear-gradient(135deg, #2f78d4, #14366b); }
.chip-3 { background: linear-gradient(135deg, #2e8b50, #0d3d22); }
.chip-4 { background: linear-gradient(135deg, #303030, #0a0a0a); border-color: rgba(212,175,55,0.7); }

/* Action buttons */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}
.btn-spin {
    background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
    color: #2a1a05;
    font-family: Georgia, serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 4px;
    border: 2px solid var(--rim);
    border-radius: 8px;
    padding: 14px 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 -3px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    cursor: pointer;
    transition: transform .08s, filter .12s;
}
.btn-spin:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.btn-spin:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-spin.spinning .spin-label::after {
    content: "…";
    animation: ellipsis 1s steps(3, jump-none) infinite;
}
@keyframes ellipsis {
    0%   { content: ".";   }
    33%  { content: "..";  }
    66%  { content: "..."; }
}

.btn-clear {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(212,175,55,0.45);
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-family: Georgia, serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.btn-clear:hover { background: rgba(212,175,55,0.1); }

/* ---- Wheel rotation transition (set by JS at spin time) ---- */
.wheel-rotor.spinning {
    transition: transform 4.2s cubic-bezier(0.17, 0.67, 0.16, 0.99);
}

/* ---------------------------------------------------------------------
   Responsive — squish on smaller screens
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
    .casino-page { padding: 14px 10px; }
    .num-row    { grid-template-columns: repeat(12, 1fr) 36px; gap: 3px; }
    .num-cell   { font-size: 0.78rem; min-height: 32px; }
    .column-cell{ font-size: 0.75rem; }
    .dozens-row { grid-template-columns: 4fr 4fr 4fr 36px; gap: 3px; }
    .outside-row{ grid-template-columns: repeat(6, 1fr) 36px; gap: 3px; }
    .outside-cell, .dozen-cell { padding: 10px 2px; font-size: 0.78rem; min-height: 44px; }
    .bet-table  { grid-template-columns: 40px 1fr; gap: 3px; }
    .zero-cell  { font-size: 1rem; }
    .chip       { width: 48px; height: 48px; font-size: 0.7rem; }
    .chip span  { width: 32px; height: 32px; }
    .btn-spin   { font-size: 1.2rem; letter-spacing: 2px; padding: 10px 18px; }
}

/* ---------------------------------------------------------------------
   CMS page styling — applied to admin-authored content rendered at
   /page/<slug>. Constrained to the page-body container so it doesn't
   leak into the rest of the app.
   --------------------------------------------------------------------- */
.cms-content { padding: 1.5rem 2rem; }
.cms-body    { line-height: 1.65; font-size: 1.04rem; color: #2c2c2c; }
.cms-body h2 { margin: 1.6rem 0 0.6rem; font-size: 1.45rem; }
.cms-body h3 { margin: 1.3rem 0 0.5rem; font-size: 1.2rem; }
.cms-body p  { margin: 0 0 1rem; }
.cms-body ul, .cms-body ol { margin: 0 0 1rem 1.5rem; }
.cms-body li { margin-bottom: 0.4rem; }
.cms-body a  { color: #b8860b; text-decoration: underline; }
.cms-body a:hover { color: #8a6118; }
.cms-body blockquote {
    border-left: 3px solid #d4af37;
    padding: 0.5rem 0 0.5rem 1rem;
    color: #555;
    margin: 1rem 0;
    background: #fafaf5;
}
.cms-body hr { margin: 1.5rem 0; }
.cms-body strong { color: #1a1a1a; }

/* =====================================================================
   THEMING SYSTEM
   ---------------------------------------------------------------------
   Three themes are supported via a body class:
     - .theme-default  — original dark+gold casino feel  (the seed theme)
     - .theme-classic  — Monte Carlo: cream + navy + gold, serif fonts
     - .theme-modern   — Neon Lounge: dark mode + electric accents
                         (also sets data-bs-theme="dark" on <html>, so
                          Bootstrap 5.3+ auto-darkens its components)

   Strategy: structural CSS uses var(--app-X). Each theme overrides the
   variables it cares about. Bootstrap CSS variables (--bs-X) are
   overridden where it makes sense so .btn-warning, .text-bg-success
   etc. pick up the theme's accent without each component needing
   per-theme CSS.
   ===================================================================== */

/* ---- Default theme (seed values, applied to all themes unless overridden) ---- */
:root,
body.theme-default {
    --app-body-bg:   #f5f5f7;
    --app-body-color:#212529;
    --app-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --app-font-heading: var(--app-font-body);

    --app-nav-bg:    #1a1a1a;
    --app-nav-color: #f5f1e8;
    --app-nav-brand: #d4af37;
    --app-nav-link:  rgba(245,241,232,0.85);
    --app-nav-link-hover: #fff;

    --app-admin-nav-bg: #c0392b;

    --app-card-bg:     #ffffff;
    --app-card-border: rgba(0,0,0,0.125);
    --app-card-shadow: 0 1px 3px rgba(0,0,0,0.08);

    --app-accent:        #d4af37;
    --app-accent-hover:  #c19c1f;
    --app-accent-text:   #2a1a05;
    --app-accent-soft:   rgba(212,175,55,0.15);

    --app-link: #b8860b;
    --app-link-hover: #8a6118;
}

/* ---- Classic theme: Monte Carlo ---- */
body.theme-classic {
    --app-body-bg:   #faf6ed;
    --app-body-color:#2c3e50;
    --app-font-body: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    --app-font-heading: 'Playfair Display', Georgia, serif;

    --app-nav-bg:    #1a2a44;
    --app-nav-color: #f4e4bc;
    --app-nav-brand: #c9a961;
    --app-nav-link:  rgba(244,228,188,0.85);

    --app-admin-nav-bg: #6e1b1b;

    --app-card-bg:     #ffffff;
    --app-card-border: #d4c5a3;
    --app-card-shadow: 0 1px 0 rgba(0,0,0,0.04);

    --app-accent:        #c9a961;
    --app-accent-hover:  #b69149;
    --app-accent-text:   #1a2a44;
    --app-accent-soft:   rgba(201,169,97,0.15);

    --app-link: #1a2a44;
    --app-link-hover: #2c3e50;

    /* Bootstrap overrides: warning button → gold + navy text */
    --bs-warning: #c9a961;
    --bs-warning-rgb: 201,169,97;
    --bs-warning-bg-subtle: #f5ead0;
    --bs-warning-border-subtle: #d4c5a3;
    --bs-link-color: #1a2a44;
    --bs-link-color-rgb: 26,42,68;
    --bs-link-hover-color: #2c3e50;
    --bs-border-color: #d4c5a3;
}

/* ---- Modern theme: Neon Lounge (dark) ---- */
body.theme-modern {
    --app-body-bg:    #0a0a0f;
    --app-body-color: #e8e8ec;
    --app-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --app-font-heading: 'Inter', system-ui, -apple-system, sans-serif;

    --app-nav-bg:    #050508;
    --app-nav-color: #e8e8ec;
    --app-nav-brand: #00ffd4;
    --app-nav-link:  rgba(232,232,236,0.7);
    --app-nav-link-hover: #00ffd4;

    --app-admin-nav-bg: #ff3b6b;

    --app-card-bg:     #15151c;
    --app-card-border: rgba(0,255,212,0.18);
    --app-card-shadow: 0 0 24px rgba(0,255,212,0.05);

    --app-accent:        #00ffd4;
    --app-accent-hover:  #00ddb8;
    --app-accent-text:   #050508;
    --app-accent-soft:   rgba(0,255,212,0.12);

    --app-link: #00ffd4;
    --app-link-hover: #00ddb8;

    /* Bootstrap dark-theme tuning. data-bs-theme="dark" is set on <html>
       in PHP, so Bootstrap also handles cards/tables/forms automatically. */
    --bs-warning: #00ffd4;
    --bs-warning-rgb: 0,255,212;
    --bs-link-color: #00ffd4;
    --bs-link-color-rgb: 0,255,212;
    --bs-link-hover-color: #00ddb8;
}

/* ---- Apply variables to elements ---------------------------------- */
body {
    background: var(--app-body-bg);
    color: var(--app-body-color);
    font-family: var(--app-font-body);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--app-font-heading); }
a { color: var(--app-link); }
a:hover { color: var(--app-link-hover); }

/* App navbar (user-side) */
.app-navbar {
    background: var(--app-nav-bg);
    color: var(--app-nav-color);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.app-navbar .navbar-brand,
.app-navbar .brand-glyph { color: var(--app-nav-brand); }
.app-navbar .nav-links a:not(.btn) {
    color: var(--app-nav-link);
    text-decoration: none;
}
.app-navbar .nav-links a:not(.btn):hover { color: var(--app-nav-link-hover, var(--app-accent)); }
.app-navbar .nav-greet { color: rgba(255,255,255,0.65); }
.app-navbar .nav-balance {
    background: var(--app-accent);
    color: var(--app-accent-text);
    font-size: 0.95rem;
    padding: 6px 10px;
}

/* Admin navbar */
.app-admin-navbar {
    background: var(--app-admin-nav-bg);
    color: #fff;
}
.app-admin-navbar .navbar-brand,
.app-admin-navbar .brand-glyph,
.app-admin-navbar .nav-links a:not(.btn) {
    color: rgba(255,255,255,0.92);
    text-decoration: none;
}
.app-admin-navbar .nav-links a:not(.btn):hover { color: #fff; }

/* Cards */
.card {
    background-color: var(--app-card-bg);
    border-color: var(--app-card-border);
    box-shadow: var(--app-card-shadow);
}

/* Make .btn-warning honour the theme accent */
.btn-warning,
.btn-warning:disabled {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-accent-text);
}
.btn-warning:hover:not(:disabled),
.btn-warning:focus:not(:disabled) {
    background-color: var(--app-accent-hover);
    border-color: var(--app-accent-hover);
    color: var(--app-accent-text);
}

/* A theme-aware accent button (used in some places where btn-warning was) */
.btn-accent {
    background: var(--app-accent);
    border: 1px solid var(--app-accent);
    color: var(--app-accent-text);
    padding: .25rem .65rem;
    border-radius: .375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}
.btn-accent:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); color: var(--app-accent-text); }

/* ---- Per-theme additional polish ---------------------------------- */

/* Classic theme — soften card borders, add elegant heading flourishes */
body.theme-classic h1,
body.theme-classic h2,
body.theme-classic h3 {
    letter-spacing: -0.01em;
}
body.theme-classic .card { border-radius: 4px; }
body.theme-classic .navbar-brand { font-family: 'Playfair Display', Georgia, serif; letter-spacing: 0.5px; }
body.theme-classic .casino-page { font-family: 'Playfair Display', Georgia, serif; }

/* Modern theme — subtle glow on accent buttons and links */
body.theme-modern .btn-warning {
    box-shadow: 0 0 12px rgba(0,255,212,0.25);
}
body.theme-modern .btn-warning:hover:not(:disabled) {
    box-shadow: 0 0 18px rgba(0,255,212,0.4);
}
body.theme-modern .nav-balance {
    box-shadow: 0 0 8px rgba(0,255,212,0.4);
}
body.theme-modern .card {
    border-radius: 8px;
}
body.theme-modern .card-header,
body.theme-modern .card-footer {
    border-color: var(--app-card-border);
    background: rgba(255,255,255,0.02);
}
body.theme-modern .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-body-color);
    --bs-table-border-color: rgba(0,255,212,0.1);
}
body.theme-modern .table thead th {
    color: rgba(232,232,236,0.6);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 1px;
}
body.theme-modern .form-control,
body.theme-modern .form-select {
    background: #1f1f29;
    border-color: rgba(0,255,212,0.15);
    color: var(--app-body-color);
}
body.theme-modern .form-control:focus,
body.theme-modern .form-select:focus {
    background: #1f1f29;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.2rem rgba(0,255,212,0.18);
    color: var(--app-body-color);
}
body.theme-modern .text-muted { color: rgba(232,232,236,0.5) !important; }
body.theme-modern .input-group-text {
    background: #1f1f29;
    border-color: rgba(0,255,212,0.15);
    color: rgba(232,232,236,0.7);
}
body.theme-modern .modal-content {
    background: var(--app-card-bg);
    color: var(--app-body-color);
    border: 1px solid var(--app-card-border);
}
body.theme-modern .alert-success {
    background: rgba(0,255,212,0.12);
    color: #b3ffe9;
    border-color: rgba(0,255,212,0.3);
}
body.theme-modern .alert-danger {
    background: rgba(255,59,107,0.15);
    color: #ffc4d2;
    border-color: rgba(255,59,107,0.3);
}
body.theme-modern .alert-info {
    background: rgba(80,180,255,0.12);
    color: #c8e6ff;
    border-color: rgba(80,180,255,0.3);
}

/* Admin login page background — used to be just bg-dark. Now per-theme. */
.admin-login-bg {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 50% -100px, rgba(212,175,55,0.08), transparent 60%),
        var(--app-body-bg);
}
body.theme-default.admin-login-bg { background: #1a1a1a; }
body.theme-classic.admin-login-bg {
    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(201,169,97,0.18), transparent 60%),
        #1a2a44;
}
body.theme-modern.admin-login-bg {
    background:
        radial-gradient(800px 400px at 50% 0, rgba(0,255,212,0.08), transparent 60%),
        #050508;
}

/* ---- Theme picker preview swatches (used in admin/settings) ---- */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.theme-picker .form-check-input { display: none; }
.theme-picker .theme-card {
    display: block;
    border: 2px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .08s;
    background: var(--app-card-bg);
}
.theme-picker .theme-card:hover { transform: translateY(-2px); }
.theme-picker .form-check-input:checked + .theme-card {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}
.theme-picker .theme-name { font-weight: 600; margin-top: 10px; }
.theme-picker .theme-desc { font-size: 0.85rem; color: var(--bs-secondary-color); margin-top: 2px; }
.theme-picker .theme-swatch {
    display: flex;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}
.theme-picker .theme-swatch span { flex: 1; }

/* =====================================================================
   SLOTS PAGE
   ===================================================================== */

.slots-page {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: start;
}
@media (max-width: 980px) {
    .slots-page { grid-template-columns: 1fr; }
}

.slots-cabinet {
    grid-column: 1;
    grid-row: 1 / span 2;
    background:
        radial-gradient(circle at 50% -50px, #5a3416 0%, #2e1b0d 60%, #1a0d05 100%);
    border: 6px solid var(--rim, #3a200d);
    border-radius: 16px;
    padding: 22px 20px 24px;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.55),
        0 12px 40px rgba(0,0,0,0.45);
    color: var(--cream, #f5f1e8);
    font-family: Georgia, "Times New Roman", serif;
}
@media (max-width: 980px) {
    .slots-cabinet { grid-row: auto; }
}

.slots-marquee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px 16px;
    border-bottom: 2px solid rgba(212,175,55,0.3);
    margin-bottom: 18px;
}
.slots-marquee h2 {
    font-family: Georgia, serif;
    font-weight: 800;
    color: var(--gold-light, #f5d36a);
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(245,211,106,0.4);
}
.slots-marquee .balance-pill {
    background: var(--gold, #d4af37);
    color: #2a1a05;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-family: -apple-system, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ---- Reel display ---- */
.slots-display {
    background: linear-gradient(180deg, #0c0703, #1a0e05);
    border: 2px solid var(--gold-dark, #8a6118);
    border-radius: 8px;
    padding: 24px 18px;
    position: relative;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.7);
}

.payline-marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold-light, #f5d36a);
    font-size: 24px;
    text-shadow: 0 0 8px rgba(245,211,106,0.6);
}
.payline-left  { left: 4px; }
.payline-right { right: 4px; }

.reels-frame {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.reel {
    background: linear-gradient(180deg, #fdfaf0, #e6dfc8);
    border: 3px solid var(--gold-dark, #8a6118);
    border-radius: 6px;
    height: 96px;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 4px 8px rgba(0,0,0,0.2),
        inset 0 -4px 8px rgba(0,0,0,0.1);
}

.reel-strip {
    will-change: transform;
}

.symbol {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    line-height: 1;
    user-select: none;
    color: #2a1a05;
    text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}
.symbol.symbol-win {
    background: radial-gradient(circle, rgba(245,211,106,0.55), transparent);
    animation: slot-pulse 0.8s ease-in-out 3;
}
@keyframes slot-pulse {
    0%, 100% { box-shadow: inset 0 0 0 rgba(245,211,106,0); }
    50%      { box-shadow: inset 0 0 30px rgba(245,211,106,0.9); }
}

/* Styled BAR / 7 (since emoji versions vary too much across platforms) */
.sym-bar {
    background: linear-gradient(180deg, #1a1a1a, #3a3a3a);
    color: #fdfaf0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
    font-size: 22px;
    padding: 6px 14px;
    border-radius: 4px;
    letter-spacing: 1.5px;
    text-shadow: none;
    box-shadow: 0 2px 0 #000;
}
.sym-seven {
    color: #c8102e;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;
    font-size: 64px;
    text-shadow:
        2px 2px 0 #8a0a1d,
        4px 4px 8px rgba(0,0,0,0.4);
    line-height: 0.9;
}

/* ---- Result banner ---- */
.result-banner {
    margin-top: 16px;
    padding: 10px 16px;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.1rem;
}
.result-banner-win {
    background: linear-gradient(180deg, rgba(67,160,71,0.8), rgba(46,125,50,0.8));
    color: #e8f7e9;
    border: 1px solid rgba(123,224,154,0.5);
    box-shadow: 0 0 18px rgba(67,160,71,0.4);
}
.result-banner-loss {
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.1);
}

/* ---- Controls (chips + lever) ---- */
.slots-controls {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
}
.chip-area .chip-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px 0 4px;
}

/* Chip styles are shared with roulette via existing .chip class */

.lever-area .btn-lever {
    background: linear-gradient(180deg, var(--gold-light, #f5d36a), var(--gold, #d4af37), var(--gold-dark, #8a6118));
    color: #2a1a05;
    border: 3px solid #2a1a05;
    border-radius: 50px;
    padding: 14px 28px 14px 56px;
    font-family: Georgia, serif;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 4px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 -3px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    transition: transform .08s, filter .12s;
}
.lever-area .btn-lever:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.lever-area .btn-lever:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lever-area .btn-lever .lever-knob {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe28a, #d4af37 60%, #6e4d10);
    border: 2px solid #2a1a05;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.4);
}
.lever-area .btn-lever.spinning .lever-text::after {
    content: '…';
    animation: ellipsis 1s steps(3, jump-none) infinite;
}

/* ---- Paytable card ---- */
.paytable-card,
.recent-card {
    background: rgba(0,0,0,0.30);
    color: var(--cream, #f5f1e8);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: Georgia, serif;
}
.paytable-card h5,
.recent-card h5 {
    color: var(--gold-light, #f5d36a);
    margin-bottom: 8px;
}

.paytable {
    width: 100%;
    border-collapse: collapse;
}
.paytable td {
    padding: 6px 4px;
    border-bottom: 1px dashed rgba(212,175,55,0.2);
    vertical-align: middle;
}
.paytable tr:last-child td { border-bottom: none; }

.paytable-symbol {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 22px;
    margin-right: 2px;
    vertical-align: middle;
}
.paytable-symbol .sym-bar {
    font-size: 10px;
    padding: 2px 4px;
}
.paytable-symbol .sym-seven {
    font-size: 22px;
    text-shadow: none;
}

.recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.recent-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px dashed rgba(212,175,55,0.15);
}
.recent-list li:last-child { border-bottom: none; }
.recent-reels { display: inline-flex; gap: 2px; }

@media (max-width: 980px) {
    .slots-controls { grid-template-columns: 1fr; }
    .lever-area { display: flex; justify-content: center; }
}

/* =====================================================================
   CAPTCHA + HONEYPOT (registration / login forms)
   ===================================================================== */

.captcha-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.captcha-image {
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    height: 60px;
    width: 180px;
    background: #f5f5fa;
    display: block;
}
.captcha-refresh {
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
}
.captcha-fallback {
    padding: 10px 12px;
    background: var(--bs-warning-bg-subtle, #fff7d6);
    border: 1px dashed var(--bs-warning, #ffc107);
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 1px;
    color: var(--bs-body-color, inherit);
}
.captcha-input {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: monospace;
    max-width: 200px;
}

/* Honeypot — visually hidden but still in the DOM so bots find it.
   Avoid display:none and visibility:hidden because some bots skip those;
   absolute positioning off-screen is more reliable. */
.honeypot-field {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* =====================================================================
   2FA SCREENS — TOTP setup, code entry
   ===================================================================== */

.letter-spaced {
    letter-spacing: 0.4em !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace !important;
}

.totp-qr-box {
    background: #fff;
    padding: 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    display: inline-block;
    line-height: 0;
}
.totp-qr-box canvas {
    display: block;
    max-width: 200px;
    height: auto;
}