/* ══════════════════════════════════════════════════════════════════
   FYM Casino — Obsidian Vault design system
   ──────────────────────────────────────────────────────────────────
   Ported from the Claude Design bundle (fym-casino-front-end-remix,
   src/tokens.css) into real production CSS. Applies to every non-game
   screen via opt-in `body.ov` root class. Game screens (slots, crash,
   blackjack, etc.) are left untouched per the user's constraint.

   Philosophy:
     • "No-line rule": boundaries via background-color shifts, not
       1px borders.
     • Tonal layering: recessed (lowest) → base → elevated (highest).
     • Sharp corners: max 4px radius for cards, 3px for buttons.
     • Serif display (Noto Serif) + Inter body + tabular numbers.
   ══════════════════════════════════════════════════════════════════ */


/* ─── Design tokens ─────────────────────────────────────────────── */

/* OV tokens are declared at :root so they're available to EVERY
   page, not just those that opt-in via `body.ov`. This is the first
   step of collapsing the 4 parallel design systems this codebase
   accumulated (legacy --bg-*, --fym-*, --ov-*, and admin's purple
   --accent) into a single canonical palette. Legacy tokens stay
   aliased below so game screens keep working untouched. */

:root {
    /* Surfaces — ordered recessed → elevated. */
    --ov-surface:            #131313;
    --ov-surface-lowest:     #0b0b0b;
    --ov-surface-low:        #1a1918;
    --ov-surface-container:  #201f1e;
    --ov-surface-high:       #2a2826;
    --ov-surface-highest:    #353330;
    --ov-surface-bright:     #3a3835;

    /* Text — contrast bumped so muted still passes WCAG AA on
       dark surfaces. Old values were failing: 8c8577 → 4.3:1
       (AA fail on body), now a39a84 gets us 5.1:1. Same for
       on-surface-variant/dim. */
    --ov-on-surface:         #e5e2e1;
    --ov-on-surface-variant: #e0d5bd;
    --ov-on-surface-muted:   #a39a84;
    --ov-on-surface-dim:     #78705f;

    /* Primary (gold) family */
    --ov-primary:            #e9c349;
    --ov-primary-hi:         #f2ca50;
    --ov-primary-container:  #c5a12a;
    --ov-primary-deep:       #735c00;
    --ov-on-primary:         #3c2f00;
    --ov-on-primary-container: #493900;

    /* Outlines (used only at low opacity — "ghost borders") */
    --ov-outline:            #99907c;
    --ov-outline-variant:    #4d4635;
    --ov-ghost-border:       rgba(77, 70, 53, 0.25);

    /* Semantic */
    --ov-green:              #5bb975;
    --ov-red:                #e56a6a;
    --ov-warn:               #f0b45c;

    /* Signature gradients */
    --ov-gold-gradient:      linear-gradient(135deg, #f2ca50 0%, #c5a12a 100%);
    --ov-gold-gradient-flat: linear-gradient(180deg, #e9c349 0%, #c5a12a 100%);

    /* Shadows */
    --ov-shadow-ambient:     0 24px 48px rgba(0, 0, 0, 0.55);
    --ov-shadow-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* ── Aliases for legacy code that reads --fym-* / --bg-* ──
       Keeps game screens rendering without forcing a big rewrite.
       When a screen migrates to OV, it starts referencing --ov-*
       directly and these aliases can be deleted later. */
    --fym-bg:       var(--ov-surface);
    --fym-surface:  var(--ov-surface-low);
    --fym-surface-2: var(--ov-surface-container);
    --fym-border:   var(--ov-outline-variant);
    --fym-text:     var(--ov-on-surface);
    --fym-text-dim: var(--ov-on-surface-muted);
    --fym-gold:     var(--ov-primary);
    --fym-gold-hi:  var(--ov-primary-hi);
    --fym-gold-lo:  var(--ov-primary-deep);
}

/* Keep `body.ov` as a no-op alias so older rules matching
   `body.ov .xyz` still apply. */
body.ov {
    /* intentionally empty — tokens moved to :root */
}


/* ─── Root wrapper ──────────────────────────────────────────────── */

/* When the body has the `ov` class, every Obsidian Vault screen
   inherits the palette + typography. Game screens (without `.ov`
   classes on their containers) still honour style.css.

   style.css sets `body { padding-top: var(--header-height) }` to
   reserve 56 px for its originally-fixed #header. Under the OV
   redesign #header is `position: relative` and already takes its
   own space in flow, so that padding just left a 56 px gap above
   the header. Reset it here. The bottom padding stays: the
   bottom-nav is still `position: fixed` so content needs the
   reservation. */
body.ov {
    background: var(--ov-surface);
    color: var(--ov-on-surface);
    padding-top: 0;
}

body.ov .ov-app,
body.ov .ov-app * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ─── Typography utilities ──────────────────────────────────────── */

.ov-serif {
    font-family: 'Noto Serif', 'Iowan Old Style', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ov-serif-italic {
    font-family: 'Noto Serif', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.02em;
}
.ov-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ov-primary);
}
.ov-eyebrow--dim {
    color: var(--ov-on-surface-muted);
    font-weight: 600;
    letter-spacing: 0.24em;
}
.ov-label-caps {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ov-on-surface-variant);
}
.ov-tabular {
    font-variant-numeric: tabular-nums;
}


/* ─── Surface primitives ────────────────────────────────────────── */

.ov-card          { background: var(--ov-surface-container); border-radius: 4px; }
.ov-card-high     { background: var(--ov-surface-high);      border-radius: 4px; }
.ov-card-low      { background: var(--ov-surface-low);       border-radius: 4px; }
.ov-card-lowest   { background: var(--ov-surface-lowest);    border-radius: 4px; }
.ov-ghost-border  { box-shadow: inset 0 0 0 0.5px var(--ov-ghost-border); }
.ov-top-light     { box-shadow: inset 0 1px 0 rgba(233, 195, 73, 0.12); }


/* ─── Buttons ───────────────────────────────────────────────────── */

.ov-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ov-gold-gradient);
    color: var(--ov-on-primary);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: 3px;
    border: 0;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.15s ease;
}
.ov-btn-gold:active { transform: scale(0.97); }
.ov-btn-gold:disabled { opacity: 0.4; cursor: not-allowed; }

.ov-btn-glass {
    background: rgba(255, 255, 255, 0.03);
    color: var(--ov-on-surface);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 13px 18px;
    border-radius: 3px;
    border: 0;
    box-shadow: inset 0 0 0 0.5px rgba(233, 195, 73, 0.22);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ov-btn-glass:hover  { background: rgba(233, 195, 73, 0.08); }
.ov-btn-glass:active { transform: scale(0.97); }

.ov-btn-ghost {
    background: transparent;
    color: var(--ov-on-surface);
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}


/* ─── Progress ──────────────────────────────────────────────────── */

.ov-progress-track {
    height: 4px;
    background: var(--ov-surface-lowest);
    border-radius: 2px;
    overflow: hidden;
}
.ov-progress-fill {
    height: 100%;
    background: var(--ov-gold-gradient);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}


/* ─── Top header (replaces .header on ov screens) ───────────────── */
/*
 * Matches the reference Sovereign Vault design:
 *   left  = 40×40 gold square w/ workspace_premium icon + one-line italic
 *           serif "Sovereign Vault" wordmark (NO subtitle tag)
 *   right = "12,450 $FYM" inline pill + notification bell
 */

body.ov #header {
    height: 64px;
    min-height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, #2a2a2a 0%, #131313 100%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    border: 0;
    position: relative;
    z-index: 30;
    flex-shrink: 0;
}

/* ─── Telegram fullscreen (Bot API 8.0+) ─────────────────────────
 * When Telegram.WebApp.requestFullscreen() succeeds, body.tg-fullscreen
 * is added by app.js. The Mini App now fills the entire phone screen,
 * which means the iOS status bar (clock / signal / battery) overlaps
 * the top of our content. Push the topbar/header DOWN by the safe-area
 * inset so nothing collides with it.
 */
body.ov.tg-fullscreen #header {
    height: calc(64px + env(safe-area-inset-top, 0px));
    min-height: calc(64px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
}
body.tg-fullscreen .ov-landing__topbar {
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
}
/* Match the Telegram bg colour exactly behind the status bar so
 * iOS doesn't draw a translucent strip across our gradient. */
body.tg-fullscreen { background-color: #0a0906; }

.ov-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    min-width: 0;          /* lets the wordmark ellipsise */
}
.ov-brand__mark {
    width: 40px;
    height: 40px;
    background: var(--ov-primary-container);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ov-on-primary-container);
    box-shadow: inset 0 0 0 1px rgba(233, 195, 73, 0.2);
    flex-shrink: 0;
}
.ov-brand__mark .material-symbols-outlined {
    font-size: 22px !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    color: var(--ov-on-primary-container);
}
.ov-brand__name {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;             /* mobile-first, bumps up on wider */
    color: var(--ov-primary);
    letter-spacing: -0.015em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 400px) {
    .ov-brand__name { font-size: 18px; }
}
@media (min-width: 640px) {
    .ov-brand__name { font-size: 20px; }
}

.ov-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ov-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ov-surface-lowest);
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(77, 70, 53, 0.22);
    cursor: pointer;
    border: 0;
    transition: box-shadow 0.2s ease;
    white-space: nowrap;
}
.ov-balance-pill:hover { box-shadow: inset 0 0 0 1px rgba(233, 195, 73, 0.4); }
.ov-balance-pill__amount {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 13px;
    color: var(--ov-primary);
    line-height: 1.1;
    letter-spacing: 0;
}
.ov-balance-pill__mode {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    color: var(--ov-primary);
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.ov-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ov-on-surface-variant);
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
}
.ov-icon-btn:hover { color: var(--ov-primary); }
.ov-icon-btn .ov-badge {
    position: absolute;
    top: 6px; right: 6px;
    min-width: 14px; height: 14px;
    padding: 0 3px;
    background: var(--ov-primary);
    color: var(--ov-on-primary);
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--ov-surface);
    font-variant-numeric: tabular-nums;
}


/* ─── Bottom nav (Track C3 — Refined Minimal) ─────────────────────
   Track A tokens + sliding gold strek + icon pulse on activation.
   data-active attribute on .bottom-nav drives strek position.
   ────────────────────────────────────────────────────────────────── */

body.ov .bottom-nav {
    height: 76px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-top: 0;
    box-shadow: none;
    /* The bigger z-index further down in this file (10000) wins the
       cascade for the OV theme. Bumped here too so any code path that
       doesn't apply the second rule still ranks the nav above the
       chat-bubble (9990) and most modal overlays. */
    z-index: 10000;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    /* Was `overflow: hidden` — that clipped the active-session badge
       on the Games button when it grew past two digits or when the
       top:4 inset put part of the bubble outside the nav box on
       certain font / DPR combinations (user-reported "I only see
       half of the (1) badge"). The nav still doesn't need to clip
       anything internally; let the badge render in full. */
    overflow: visible;
}

/* Sliding strek — single element positioned via data-active */
body.ov .bottom-nav .nav-strek {
    position: absolute;
    top: 0;
    width: 28px;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 4px 4px;
    transition: left 320ms cubic-bezier(0.34, 1.4, 0.64, 1);
    pointer-events: none;
}
body.ov .bottom-nav[data-active="home"]    .nav-strek { left: calc(12.5% - 14px); }
body.ov .bottom-nav[data-active="games"]   .nav-strek { left: calc(37.5% - 14px); }
body.ov .bottom-nav[data-active="events"]  .nav-strek { left: calc(62.5% - 14px); }
body.ov .bottom-nav[data-active="profile"] .nav-strek { left: calc(87.5% - 14px); }

/* Tab buttons */
body.ov .bottom-nav .nav-btn,
body.ov .ov-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    padding: 12px 4px 14px;
    transition: color 200ms ease;
    user-select: none;
}
body.ov .bottom-nav .nav-btn.active,
body.ov .ov-nav-item.active {
    color: var(--text);
}

/* Hide the old ::after stroke; new strek lives as a sibling */
body.ov .bottom-nav .nav-btn.active::after,
body.ov .ov-nav-item.active::after {
    display: none;
}

body.ov .bottom-nav .nav-btn svg,
body.ov .ov-nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.5;
    transition: transform 180ms ease;
}

/* Tap feedback on touch */
body.ov .bottom-nav .nav-btn:active svg {
    transform: scale(0.92);
    transition-duration: 80ms;
}

/* Hover scale (desktop only — touch devices skip via hover-hover media query) */
@media (hover: hover) {
    body.ov .bottom-nav .nav-btn:hover svg {
        transform: scale(1.05);
    }
}

/* Icon pulse — JS adds .is-pulsing class briefly on activation */
body.ov .bottom-nav .nav-btn.is-pulsing svg {
    animation: nav-icon-pulse 320ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes nav-icon-pulse {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(1.18); }
}

body.ov .bottom-nav .nav-btn .nav-btn-label,
body.ov .ov-nav-item .ov-nav-label {
    font-family: var(--font-body);
    font-size: 9.5px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Reduced motion: strek snaps, no icon pulse, no scale transform */
@media (prefers-reduced-motion: reduce) {
    body.ov .bottom-nav .nav-strek { transition: none; }
    body.ov .bottom-nav .nav-btn svg { transition: none; transform: none !important; }
    body.ov .bottom-nav .nav-btn.is-pulsing svg { animation: none; }
}

/* Active-session badge on bottom-nav buttons (Track G — see spec §7.3).
   Polish-fix #5 — pin gold color explicitly (literal OKLCH) so any
   accidental cascade override of --accent can't tint this badge. */
.nav-badge {
    position: absolute;
    top: 4px;
    right: 12px;
    background: oklch(0.78 0.13 80);  /* Track A --accent literal */
    color: oklch(0.10 0.005 80);      /* Track A --bg literal */
    font-size: var(--fs-caption);
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid oklch(0.10 0.005 80);
    line-height: 1;
    /* Sit above the active-strek (top:0) and the icon (transform-
       animated). Without this the strek's repaint occasionally re-
       stacked above the badge on slow devices and made it look like
       the badge was sliced in half. */
    z-index: 2;
    pointer-events: none;
}
.nav-badge:empty { display: none; }


/* ─── Section header (eyebrow + serif title + see-all) ──────────── */

.ov-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 16px;
    margin-bottom: 14px;
}
.ov-section-header .ov-title-block .ov-eyebrow {
    margin-bottom: 6px;
    display: block;
}
.ov-section-title {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    color: var(--ov-on-surface);
    letter-spacing: -0.01em;
    margin: 0;
}
.ov-see-all {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ov-primary);
    font-weight: 700;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding-bottom: 2px;
    box-shadow: 0 1px 0 rgba(233, 195, 73, 0.3);
}


/* ─── Live pulse dot ────────────────────────────────────────────── */

.ov-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ov-green);
    box-shadow: 0 0 0 2px rgba(91, 185, 117, 0.2), 0 0 6px var(--ov-green);
    animation: ov-pulse-dot 1.4s ease-in-out infinite;
}
.ov-live-dot--gold {
    background: var(--ov-primary);
    box-shadow: 0 0 0 2px rgba(233, 195, 73, 0.2), 0 0 6px var(--ov-primary);
}
@keyframes ov-pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}


/* ─── Live wins marquee ─────────────────────────────────────────── */

.ov-marquee-bar {
    overflow: hidden;
    background: var(--ov-surface-lowest);
    padding: 10px 0;
    margin: 0 16px 20px;
    border-radius: 3px;
}
.ov-marquee {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: ov-marquee 42s linear infinite;
}
.ov-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
}
.ov-marquee-item .ov-marquee-user   { font-size: 12px; color: var(--ov-on-surface); font-weight: 600; }
.ov-marquee-item .ov-marquee-verb   { font-size: 11px; color: var(--ov-on-surface-muted); }
.ov-marquee-item .ov-marquee-amount { font-size: 12px; color: var(--ov-primary); font-weight: 700; }
.ov-marquee-item .ov-marquee-game   { font-size: 10px; color: var(--ov-on-surface-dim); letter-spacing: 0.14em; text-transform: uppercase; }
.ov-marquee-item .ov-marquee-label  { font-size: 11px; color: var(--ov-on-surface-muted); letter-spacing: 0.18em; text-transform: uppercase; }
@keyframes ov-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ─── Quick actions grid ────────────────────────────────────────── */

.ov-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 22px;
}
.ov-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    background: var(--ov-surface-low);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0.5px var(--ov-ghost-border);
    color: var(--ov-on-surface-variant);
}
.ov-quick-action__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ov-primary);
}
.ov-quick-action__icon svg { width: 18px; height: 18px; }
.ov-quick-action__label {
    font-family: var(--font-body);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}


/* ─── Progression hero card ─────────────────────────────────────── */

.ov-progression-hero {
    margin: 0 16px 22px;
    padding: 20px;
    background: var(--ov-surface-high);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(233, 195, 73, 0.12);
}
.ov-progression-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 100% 0%, rgba(233, 195, 73, 0.15) 0%, transparent 55%);
    pointer-events: none;
}
.ov-progression-hero__inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.ov-progression-hero__title {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 20px;
    margin: 8px 0 14px;
    line-height: 1.15;
    color: var(--ov-on-surface);
}
.ov-progression-hero__xp {
    display: block;
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ov-progression-hero__mult {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.ov-progression-hero__mult-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted);
}
.ov-progression-hero__mult-value {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 34px;
    color: var(--ov-primary);
    line-height: 1;
}
.ov-progression-hero__mult-value small { font-size: 18px; }


/* ─── Session stats duo ─────────────────────────────────────────── */

.ov-stat-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 22px;
}
.ov-stat-duo__card {
    padding: 14px;
    background: var(--ov-surface-low);
    border-radius: 3px;
}
.ov-stat-duo__label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted);
    font-weight: 600;
}
.ov-stat-duo__value {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--ov-on-surface);
    font-variant-numeric: tabular-nums;
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.ov-stat-duo__value--green { color: var(--ov-green); }
.ov-stat-duo__value--red   { color: var(--ov-red); }
.ov-stat-duo__value small {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10px;
    color: var(--ov-on-surface-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ─── Featured games grid ───────────────────────────────────────── */

.ov-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 28px;
}
.ov-featured-card {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ov-surface-high);
    border: 0;
    border-radius: 3px;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.ov-featured-card__art {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(233,195,73,0.08) 0%, transparent 50%),
      repeating-linear-gradient(45deg, #1f1d1b 0, #1f1d1b 1px, transparent 1px, transparent 14px),
      var(--_art-tint, #1a1918);
}
.ov-featured-card__art::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(233, 195, 73, 0.12) 0%, transparent 55%);
}
.ov-featured-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
}
.ov-featured-card__tag {
    position: absolute;
    top: 10px; left: 10px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 8.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ov-primary);
    font-weight: 700;
}
.ov-featured-card__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 12px;
}
.ov-featured-card__title {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--ov-on-surface);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.ov-featured-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ov-featured-card__min {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--ov-on-surface-muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ov-featured-card__arrow {
    width: 14px;
    height: 14px;
    color: var(--ov-primary);
}


/* ─── Daily rewards (7-day streak) ──────────────────────────────── */

.ov-daily {
    margin: 0 16px 28px;
    padding: 18px;
    background: var(--ov-surface-low);
    border-radius: 4px;
}
.ov-daily__dots {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}
.ov-daily__dot {
    flex: 1;
    height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 2px;
    color: var(--ov-on-surface-dim);
    background: transparent;
    box-shadow: inset 0 0 0 0.5px var(--ov-ghost-border);
}
.ov-daily__dot-day {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.ov-daily__dot-n {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ov-daily__dot--claimed {
    color: var(--ov-primary);
    background: rgba(233, 195, 73, 0.1);
    box-shadow: inset 0 0 0 1px var(--ov-primary);
}
.ov-daily__dot--today {
    color: var(--ov-primary);
    background: var(--ov-surface-lowest);
    box-shadow: inset 0 0 0 1px rgba(233, 195, 73, 0.5);
}
.ov-daily__hint {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-style: italic;
    color: var(--ov-on-surface-muted);
    text-align: center;
    letter-spacing: 0.3px;
}

/* ─── N9: Streak count badge + current-day pulse + next-bonus hint ──
   Lives inside the right column of #streak-banner on the OV home.
   The legacy lodge/seal layouts don't render these elements; the
   markers simply don't exist there and the JS no-ops. */
.streak-side {
    align-self: stretch;
    justify-content: center;
}
.streak-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    background:
        linear-gradient(135deg,
            rgba(242, 202, 80, 0.14) 0%,
            rgba(242, 202, 80, 0.04) 100%);
    border: 1px solid rgba(242, 202, 80, 0.28);
    border-radius: 999px;
    line-height: 1;
    color: var(--ov-primary, #f2ca50);
    transition: filter 0.18s ease, border-color 0.18s ease;
}
.streak-count-badge[data-tier="0"],
.streak-count-badge.is-zero {
    color: var(--ov-on-surface-dim, #78705f);
    border-color: rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.streak-count-badge[data-tier="2"] {
    border-color: rgba(242, 202, 80, 0.42);
    box-shadow: 0 0 16px -4px rgba(242, 202, 80, 0.4);
}
.streak-count-badge[data-tier="3"] {
    border-color: rgba(242, 202, 80, 0.65);
    box-shadow: 0 0 22px -4px rgba(242, 202, 80, 0.6);
}
.streak-count-flame {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255, 140, 60, 0.45));
    transition: filter 0.18s ease;
}
.streak-count-badge.is-zero .streak-count-flame {
    filter: grayscale(0.85) opacity(0.45);
}
.streak-count-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(242, 202, 80, 0.35);
}
.streak-count-badge.is-zero .streak-count-num { text-shadow: none; }
.streak-count-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted, #a39a84);
    margin-left: 2px;
}

/* Pulsing halo around the current day's tile in the 7-tile row.
   Uses ::after so it doesn't fight the existing border / fill. */
.streak-dot.is-current {
    position: relative;
    z-index: 1;
}
.streak-dot.is-current::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 1.5px solid var(--ov-primary, #f2ca50);
    animation: streak-current-pulse 2.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes streak-current-pulse {
    0%, 100% {
        opacity: 0.85;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(242, 202, 80, 0);
    }
    50% {
        opacity: 0.25;
        transform: scale(1.12);
        box-shadow: 0 0 14px 2px rgba(242, 202, 80, 0.4);
    }
}

.streak-next-hint {
    margin: 0;
    min-height: 1.4em;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ov-on-surface-muted, #a39a84);
    text-align: center;
}
.streak-next-hint strong {
    color: var(--ov-primary, #f2ca50);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.streak-next-hint-mult {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: rgba(242, 202, 80, 0.1);
    border: 1px solid rgba(242, 202, 80, 0.25);
    border-radius: 999px;
    color: var(--ov-primary, #f2ca50);
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
}

/* ─── N5: Personal home banner — actionable promo for active bonus,
       pending claim, or armed deposit-match. One row, one CTA. ───── */
.home-personal-banner { margin-bottom: 0; }
.home-promo {
    --rc: var(--ov-primary, #f2ca50);
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--rc) 14%, var(--ov-surface-low, #1a1918)) 0%,
            var(--ov-surface-low, #1a1918) 75%);
    border: 1px solid color-mix(in srgb, var(--rc) 35%, rgba(255,255,255,0.06));
    border-radius: 4px;
    overflow: hidden;
}
.home-promo::before {
    /* faint corner sheen */
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 100%;
    background: radial-gradient(ellipse at top right,
        color-mix(in srgb, var(--rc) 18%, transparent),
        transparent 60%);
    pointer-events: none;
}
.home-promo--pending  { --rc: #f2ca50; }
.home-promo--active   { --rc: #7fcf96; }
.home-promo--awaiting { --rc: #c084fc; }

.home-promo-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--rc) 18%, #0e0e0e),
            #0e0e0e 75%);
    border: 1px solid color-mix(in srgb, var(--rc) 32%, transparent);
    border-radius: 4px;
    font-size: 28px;
    line-height: 1;
    text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent);
}
.home-promo-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.home-promo-eyebrow {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--rc);
    line-height: 1;
}
.home-promo-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--ov-on-surface, #e5e2e1);
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.home-promo-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--ov-on-surface-muted, #a39a84);
}
.home-promo-desc strong {
    color: var(--ov-on-surface, #e5e2e1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.home-promo-bar {
    margin: 6px 0 4px;
    height: 4px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.home-promo-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rc) 80%, white 0%),
        var(--rc) 50%,
        color-mix(in srgb, var(--rc) 65%, white 35%));
    box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 60%, transparent);
    transition: width 600ms cubic-bezier(0.22, 0.8, 0.26, 1);
}
.home-promo-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.home-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #d4af37 0%, #f2ca50 60%, #e9c349 100%);
    border: 0;
    color: #3c2f00;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 18px -6px rgba(212, 175, 55, 0.55),
                inset 0 1px 0 rgba(255,255,255,0.4);
}
.home-promo-cta .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.15s ease;
}
.home-promo-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(212, 175, 55, 0.7),
                inset 0 1px 0 rgba(255,255,255,0.5);
}
.home-promo-cta:hover .material-symbols-outlined { transform: translateX(3px); }
.home-promo-cta:active { transform: scale(0.97); }

.home-promo-dismiss {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.45);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.home-promo-dismiss:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    border-color: rgba(255,255,255,0.25);
}

/* Mobile: stack so the body + actions don't squish */
@media (max-width: 640px) {
    .home-promo {
        flex-wrap: wrap;
        padding: 14px 16px;
    }
    .home-promo-icon {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
    .home-promo-actions {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 4px;
    }
    .home-promo-cta { flex: 1; justify-content: center; }
}

/* ─── 2.10: Daily Wheel ───────────────────────────────────────────
   Home CTA card + spin modal with conic-gradient wheel + pointer.
   Modal overlays everything (z-index 5500) and locks itself while
   spinning so the user can't dismiss mid-animation. */

/* Home CTA card — harmonized with Daily Vault Bounty (FIX-E).
   The wrapper .dw-cta-card provides the surface + radius + padding via
   Tailwind utilities. The .dw-cta button itself is now a transparent
   row sitting inside that card. */
.dw-cta-host { margin: 0; }
.dw-cta-card > h2 { margin: 0 0 12px; }
.dw-cta {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 14px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    color: var(--ov-on-surface, #e5e2e1);
    font-family: var(--font-body);
    transition: opacity 0.18s ease, transform 0.12s ease;
}
.dw-cta:hover { opacity: 0.92; }
.dw-cta:active { transform: scale(0.99); }

.dw-cta-icon {
    position: relative;
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(242, 202, 80, 0.5), rgba(212, 175, 55, 0.2) 60%, #0e0e0e 90%);
    border: 2px solid rgba(242, 202, 80, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px -4px rgba(242, 202, 80, 0.4);
}
.dw-cta-icon-disc {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    animation: dw-cta-spin 12s linear infinite;
}
.dw-cta-icon-glyph {
    position: relative;
    z-index: 2;
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(242, 202, 80, 0.6));
}
@keyframes dw-cta-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.dw-cta--cooldown .dw-cta-icon {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.1), rgba(0,0,0,0.4) 60%);
}
.dw-cta--cooldown .dw-cta-icon-disc { animation-duration: 30s; }
.dw-cta--cooldown .dw-cta-icon-glyph { filter: grayscale(0.5) opacity(0.7); }

.dw-cta-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* .dw-cta-eyebrow retained for backwards-compat — FIX-E moved the
   eyebrow to a Bounty-style <h2 class="text-primary text-xs ..."> on
   the .dw-cta-card wrapper, but downstream code may still render the
   inner span. */
.dw-cta-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ov-primary, #f2ca50);
    line-height: 1;
}
/* .dw-cta-title — typography overridden by Tailwind utilities
   (font-headline text-xl text-on-surface) when present; this rule is
   the fallback for callers that don't apply utilities. */
.dw-cta-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ov-on-surface, #e5e2e1);
}
.dw-cta-timer { color: var(--ov-primary, #f2ca50); font-variant-numeric: tabular-nums; }
.dw-cta-last {
    margin-top: 4px;
    font-size: 11px;
    color: var(--ov-on-surface-muted, #a39a84);
}
.dw-cta-last strong {
    color: var(--ov-on-surface, #e5e2e1);
    font-variant-numeric: tabular-nums;
}
.dw-cta-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ov-primary, #f2ca50);
}
.dw-cta-action .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
}

/* ── Modal ──────────────────────────────────────────────────────── */
.dw-modal {
    position: fixed;
    inset: 0;
    z-index: 5500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(env(safe-area-inset-top, 0px), 16px) 16px max(env(safe-area-inset-bottom, 0px), 16px);
}
.dw-modal.is-open { display: flex; }
.dw-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.dw-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: min(90vh, 720px);
    overflow-y: auto;
    background:
        radial-gradient(120% 60% at 50% -20%, rgba(242, 202, 80, 0.18), transparent 60%),
        linear-gradient(180deg, #14132a 0%, #0a0915 60%, #08070f 100%);
    border: 1px solid rgba(242, 202, 80, 0.25);
    border-radius: 6px;
    padding: 24px 22px 22px;
    box-shadow:
        0 30px 70px -20px rgba(0,0,0,0.7),
        0 0 80px -30px rgba(242, 202, 80, 0.4);
    animation: dw-modal-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dw-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dw-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 7, 15, 0.6);
    color: #d0c5af;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.25s ease;
    z-index: 4;
}
.dw-modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f2ca50;
    transform: rotate(90deg);
}

.dw-modal-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    margin-bottom: 18px;
}
.dw-modal-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted, #a39a84);
}
.dw-modal-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    color: #fff;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 18px rgba(242, 202, 80, 0.4);
}

/* ── Wheel (conic-gradient) ─────────────────────────────────────── */
.dw-stage {
    position: relative;
    width: min(320px, 80vw);
    aspect-ratio: 1;
    margin: 0 auto 18px;
}
.dw-wheel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #0e0e0e;
    box-shadow:
        inset 0 0 0 3px #0e0e0e,
        inset 0 0 0 5px rgba(242, 202, 80, 0.85),
        inset 0 0 0 6px rgba(212, 175, 55, 0.4),
        0 0 32px -4px rgba(242, 202, 80, 0.5),
        0 0 60px -10px rgba(212, 175, 55, 0.3);
    overflow: hidden;
}
.dw-wheel-disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* The disc carries both the conic-gradient (set inline by JS) and
       the segment labels. Rotating the disc rotates the entire visible
       wheel together — segments + labels stay in sync. By default no
       transition so we can reset it before each animation cycle. */
    transform: rotate(0deg);
    transform-origin: 50% 50%;
}
/* Segment dividers — radial gold ticks projected from the centre.
   Lives on the disc so it rotates with the segments rather than
   ghost-overlaying them. */
.dw-wheel-disc::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        rgba(242, 202, 80, 0.4) 0deg, transparent 0.7deg,
        transparent 44.3deg, rgba(242, 202, 80, 0.4) 45deg, transparent 45.7deg,
        transparent 89.3deg, rgba(242, 202, 80, 0.4) 90deg, transparent 90.7deg,
        transparent 134.3deg, rgba(242, 202, 80, 0.4) 135deg, transparent 135.7deg,
        transparent 179.3deg, rgba(242, 202, 80, 0.4) 180deg, transparent 180.7deg,
        transparent 224.3deg, rgba(242, 202, 80, 0.4) 225deg, transparent 225.7deg,
        transparent 269.3deg, rgba(242, 202, 80, 0.4) 270deg, transparent 270.7deg,
        transparent 314.3deg, rgba(242, 202, 80, 0.4) 315deg, transparent 315.7deg,
        transparent 360deg);
    pointer-events: none;
    /* Inner-circle bevel so dividers fade into the gold-rim at the
       wheel edge for that "minted coin" feel. */
    mask-image: radial-gradient(circle, #000 60%, transparent 92%);
    -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 92%);
}
/* Center hub — the gold-rim circle in the middle */
.dw-wheel::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 22%; height: 22%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%,
            #f5d97e 0%, #d4af37 60%, #735c00 100%);
    border: 2px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        0 6px 14px -4px rgba(0, 0, 0, 0.6);
    z-index: 3;
}

/* Segment labels — absolutely positioned around the wheel */
.dw-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--dw-rot, 0deg)) translateY(-38%);
    transform-origin: center;
    width: 1px;
    height: 1px;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    pointer-events: none;
    z-index: 2;
}
.dw-label-inner {
    display: inline-block;
    /* Inline transform is set + animated by daily-wheel.js — it
       counter-rotates against the disc so the digits stay visually
       upright during and after the spin. We default to 0deg so a
       static (un-spun) wheel still reads correctly. */
    transform: rotate(0deg);
    transform-origin: center center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    /* Strong dark drop shadow so labels read against any segment
       colour — the new casino palette runs from dark felt-green to
       bright gold and white-on-color is the only universal solution. */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 4px rgba(0, 0, 0, 0.7),
        0 0 1px rgba(0, 0, 0, 1);
    white-space: nowrap;
    will-change: transform;
}
/* Pointer ▼ at the top */
.dw-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: var(--ov-primary, #f2ca50);
    font-size: 28px;
    line-height: 1;
    text-shadow: 0 4px 10px rgba(242, 202, 80, 0.6);
    filter: drop-shadow(0 0 6px rgba(242, 202, 80, 0.5));
}

/* ── Status + actions ──────────────────────────────────────────── */
.dw-status {
    text-align: center;
    margin-bottom: 16px;
    min-height: 1.6em;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ov-on-surface-variant, #d0c5af);
}
.dw-status-loading,
.dw-status-error { color: var(--ov-on-surface-muted, #a39a84); font-style: italic; }
.dw-status-error { color: #ffb4ab; }
.dw-status-ready,
.dw-status-cool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.dw-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dw-status-dot--ready {
    background: #7fcf96;
    box-shadow: 0 0 8px rgba(127, 207, 150, 0.6);
    animation: dw-pulse 2s ease-in-out infinite;
}
.dw-status-dot--cool {
    background: rgba(255, 255, 255, 0.4);
}
@keyframes dw-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.dw-status-prev {
    margin-top: 6px;
    font-size: 11px;
    color: var(--ov-on-surface-muted, #a39a84);
}
.dw-status-prev strong {
    color: var(--ov-primary, #f2ca50);
    font-variant-numeric: tabular-nums;
}
.dw-status-timer {
    color: var(--ov-primary, #f2ca50);
    font-variant-numeric: tabular-nums;
}

.dw-actions { display: flex; flex-direction: column; gap: 8px; }
.dw-spin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #d4af37 0%, #f2ca50 60%, #e9c349 100%);
    border: 0;
    border-radius: 2px;
    color: #3c2f00;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 8px 22px -8px rgba(212, 175, 55, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.dw-spin-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(212, 175, 55, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    filter: brightness(1.05);
}
.dw-spin-btn:active { transform: translateY(0) scale(0.985); }
.dw-spin-btn--disabled,
.dw-spin-btn:disabled {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    box-shadow: none;
}
.dw-spin-btn.is-busy { cursor: wait; }
.dw-spin-icon {
    animation: dw-spin-icon-rot 1s linear infinite;
}
@keyframes dw-spin-icon-rot {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.dw-spin-btn--done {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e2e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dw-fineprint {
    margin: 0;
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1.5;
    color: var(--ov-on-surface-muted, #a39a84);
    text-align: center;
    font-style: italic;
}
.dw-fineprint a {
    color: var(--ov-primary, #f2ca50);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Result overlay ─────────────────────────────────────────────── */
.dw-result {
    text-align: center;
    padding: 14px 0 4px;
    animation: dw-result-in 0.55s cubic-bezier(0.22, 1, 0.36, 1.4);
}
@keyframes dw-result-in {
    from { opacity: 0; transform: translateY(12px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dw-result-headline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ov-primary, #f2ca50);
}
.dw-result-prize {
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 22px rgba(242, 202, 80, 0.55);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.dw-result-prize-unit {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--ov-primary, #f2ca50);
    margin-left: 4px;
}
.dw-result-xp {
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted, #a39a84);
}
.dw-result--jackpot .dw-result-headline {
    color: #ff7a18;
    text-shadow: 0 0 14px rgba(255, 122, 24, 0.6);
    animation: dw-jackpot-throb 1.4s ease-in-out infinite;
}
@keyframes dw-jackpot-throb {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.dw-result--jackpot .dw-result-prize {
    color: #ffd97e;
    text-shadow: 0 0 28px rgba(255, 217, 126, 0.7);
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .dw-stage { width: min(280px, 80vw); }
    .dw-modal-title { font-size: 22px; }
    .dw-result-prize { font-size: 30px; }
}

/* ─── N1: Game-screen event badge ────────────────────────────────
   Floats above the game UI when the player is mid-game on a game
   they're competing in. Tap to jump to the event detail. */
.game-event-badge {
    position: fixed;
    bottom: max(env(safe-area-inset-bottom, 0px), 18px);
    right: 16px;
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background:
        linear-gradient(135deg,
            rgba(242, 202, 80, 0.18) 0%,
            #14121e 80%);
    border: 1px solid rgba(242, 202, 80, 0.55);
    border-radius: 6px;
    color: var(--ov-on-surface, #e5e2e1);
    font-family: var(--font-body);
    cursor: pointer;
    text-align: left;
    box-shadow:
        0 12px 28px -8px rgba(0, 0, 0, 0.7),
        0 0 22px -6px rgba(242, 202, 80, 0.4);
    animation: geb-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 240px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.game-event-badge:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 36px -8px rgba(0, 0, 0, 0.8),
        0 0 28px -6px rgba(242, 202, 80, 0.55);
}
.game-event-badge:active { transform: scale(0.97); }
@keyframes geb-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.geb-pulse {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ov-primary, #f2ca50);
    box-shadow: 0 0 10px rgba(242, 202, 80, 0.7);
    position: relative;
}
.geb-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--ov-primary, #f2ca50);
    animation: geb-pulse 1.8s ease-in-out infinite;
}
@keyframes geb-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 0;   transform: scale(2.2); }
}

.geb-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.geb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1;
}
.geb-eyebrow {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ov-primary, #f2ca50);
}
.geb-time {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-variant-numeric: tabular-nums;
}
.geb-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.geb-rank {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
}
.geb-arrow {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ov-primary, #f2ca50);
}

/* Small screens: tuck the badge a bit closer to the edge so it
   doesn't sit on top of the FAB / chat trigger. */
@media (max-width: 480px) {
    .game-event-badge {
        right: 12px;
        bottom: max(env(safe-area-inset-bottom, 0px), 14px);
        max-width: 200px;
        padding: 9px 12px;
    }
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .game-event-badge { animation: none; }
    .geb-pulse::after { animation: none; }
}

/* ─── Lottery countdown banner ──────────────────────────────────
   Fixed-position pill that surfaces on home + games screens when
   the daily lottery draw is within 60 minutes. Four urgency tiers
   tied to time-remaining, each a different colour temperature and
   pulse rate so the visual energy matches "drama is building". */
.lottery-cb {
    position: fixed;
    z-index: 4100;
    top: max(env(safe-area-inset-top, 0px), 12px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    border-radius: 999px;
    border: 1px solid;
    background: rgba(15, 12, 8, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.6);
    color: var(--ov-on-surface, #e5e2e1);
    text-align: left;
    font-family: var(--font-body);
    max-width: min(440px, calc(100vw - 32px));
    overflow: hidden;
    animation: lottery-cb-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lottery-cb:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(0,0,0,0.75);
}
.lottery-cb:active { transform: translateX(-50%) scale(0.98); }

/* Main clickable area inside the banner (everything except the close button) */
.lottery-cb-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 12px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

/* Close (×) button — explicit dismissal, stops propagation */
.lottery-cb-close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 22px;
    line-height: 1;
    padding: 0 14px;
    cursor: pointer;
    align-self: stretch;
    display: flex;
    align-items: center;
    transition: color 180ms ease;
}
.lottery-cb-close:hover { color: rgba(255, 255, 255, 0.9); }
@keyframes lottery-cb-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Tier 1: 60-15 min — calm gold */
.lottery-cb[data-tier="soon"] {
    border-color: rgba(242, 202, 80, 0.42);
}
/* Tier 2: 15-5 min — bright gold + soft pulse */
.lottery-cb[data-tier="urgent"] {
    border-color: rgba(242, 202, 80, 0.7);
    box-shadow:
        0 14px 30px -6px rgba(0,0,0,0.65),
        0 0 22px -4px rgba(242, 202, 80, 0.45);
    animation: lottery-cb-in 0.5s cubic-bezier(0.22, 1, 0.36, 1),
               lottery-cb-glow 2.4s ease-in-out infinite;
}
@keyframes lottery-cb-glow {
    0%, 100% { box-shadow: 0 14px 30px -6px rgba(0,0,0,0.65), 0 0 22px -4px rgba(242, 202, 80, 0.45); }
    50%      { box-shadow: 0 14px 30px -6px rgba(0,0,0,0.65), 0 0 36px -2px rgba(242, 202, 80, 0.7); }
}
/* Tier 3: 5-1 min — ember, faster pulse */
.lottery-cb[data-tier="critical"] {
    border-color: rgba(255, 122, 24, 0.85);
    background: linear-gradient(135deg,
        rgba(40, 14, 4, 0.96) 0%,
        rgba(15, 12, 8, 0.92) 80%);
    box-shadow:
        0 14px 30px -6px rgba(0,0,0,0.7),
        0 0 28px -4px rgba(255, 122, 24, 0.55);
    animation: lottery-cb-in 0.5s cubic-bezier(0.22, 1, 0.36, 1),
               lottery-cb-pulse-fast 1.4s ease-in-out infinite;
}
@keyframes lottery-cb-pulse-fast {
    0%, 100% { box-shadow: 0 14px 30px -6px rgba(0,0,0,0.7), 0 0 28px -4px rgba(255, 122, 24, 0.55); }
    50%      { box-shadow: 0 14px 30px -6px rgba(0,0,0,0.7), 0 0 44px 0     rgba(255, 122, 24, 0.9); }
}
/* Tier 4: drawing now — deep ruby, fastest pulse */
.lottery-cb[data-tier="live"] {
    border-color: rgba(220, 40, 60, 0.9);
    background: linear-gradient(135deg,
        rgba(48, 6, 12, 0.97) 0%,
        rgba(15, 8, 8, 0.94) 75%);
    color: #fff;
    box-shadow:
        0 14px 30px -6px rgba(0,0,0,0.75),
        0 0 32px -2px rgba(220, 40, 60, 0.65);
    animation: lottery-cb-in 0.5s cubic-bezier(0.22, 1, 0.36, 1),
               lottery-cb-live-pulse 0.9s ease-in-out infinite;
}
@keyframes lottery-cb-live-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.025); }
}

.lottery-cb-icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(242, 202, 80, 0.4));
}
.lottery-cb-body { flex: 1; min-width: 0; }
.lottery-cb-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    line-height: 1;
}
.lottery-cb-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.lottery-cb[data-tier="live"] .lottery-cb-headline {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #ffe1d6;
}
.lottery-cb-time {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--ov-primary, #f2ca50);
    letter-spacing: 0.04em;
}
.lottery-cb[data-tier="critical"] .lottery-cb-time { color: #ff9050; }
.lottery-cb-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5060;
    box-shadow: 0 0 12px rgba(255, 80, 96, 0.9);
    animation: lottery-cb-dot 0.8s ease-in-out infinite;
}
@keyframes lottery-cb-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.lottery-cb-sub {
    margin-top: 3px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
}
.lottery-cb-sub strong {
    color: var(--ov-primary, #f2ca50);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lottery-cb-arrow {
    flex-shrink: 0;
    font-size: 16px !important;
    color: var(--ov-primary, #f2ca50);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .lottery-cb,
    .lottery-cb[data-tier] { animation: none !important; }
    .lottery-cb-live-dot { animation: none !important; }
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .streak-dot.is-current::after { animation: none; }
}


/* ─── Social missions list ──────────────────────────────────────── */

.ov-mission-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px;
    margin-bottom: 28px;
}
.ov-mission-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--ov-surface-lowest);
    border-radius: 3px;
    box-shadow: inset 0 0 0 0.5px var(--ov-ghost-border);
}
.ov-mission-row--locked { opacity: 0.55; }
.ov-mission-row__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ov-surface-high);
    border-radius: 3px;
    color: var(--ov-on-surface-variant);
}
.ov-mission-row__body { flex: 1; min-width: 0; }
.ov-mission-row__title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ov-on-surface);
}
.ov-mission-row__sub {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--ov-on-surface-muted);
    margin-top: 2px;
}
.ov-mission-row__reward {
    font-family: var(--font-body);
    color: var(--ov-primary);
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}


/* ─── Leaderboard preview (home card list) ──────────────────────── */

.ov-lb-preview {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.ov-lb-preview__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--ov-surface-low);
    border-radius: 3px;
    cursor: pointer;
    border: 0;
    text-align: left;
    color: inherit;
    width: 100%;
}
.ov-lb-preview__row--1 {
    background: rgba(233, 195, 73, 0.06);
}
.ov-lb-preview__rank {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 16px;
    width: 22px;
    color: var(--ov-on-surface-muted);
    font-variant-numeric: tabular-nums;
}
.ov-lb-preview__row--1 .ov-lb-preview__rank {
    color: var(--ov-primary);
}
.ov-lb-preview__avatar {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background: var(--ov-surface-high);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ov-on-surface-muted);
    flex-shrink: 0;
}
.ov-lb-preview__name {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ov-on-surface);
}
.ov-lb-preview__tier {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--ov-on-surface-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ov-lb-preview__val {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--ov-primary);
    margin-left: auto;
}


/* ─── Fade-in + slide-up motion ─────────────────────────────────── */

.ov-fade-in {
    opacity: 1;
    animation: ov-fade-in 0.32s ease-out;
}
@keyframes ov-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ov-fade-in   { animation: none; }
    .ov-marquee   { animation-duration: 80s; }
    .ov-live-dot  { animation: none; }
}


/* ═════════════════════════════════════════════════════════════════
   LANDING SCREEN (ov-landing) — splash/login, ported from
   Landing_Page/code.html. This replaces the old loading-screen's
   visual content; it still has #loading-screen id + #loading-bar-fill
   + #loading-text so app.js's progress tracker keeps working.
   ═════════════════════════════════════════════════════════════════ */

/* Override the legacy `#loading-screen.active { display:flex; align-items:center; justify-content:center }`
   rule from style.css — without these overrides the landing's 4 top-level
   sections lay out side-by-side in a row instead of stacking vertically. */
body.ov #loading-screen.ov-landing.active {
    display: block !important;
}
body.ov #loading-screen.ov-landing {
    position: fixed;
    inset: 0;
    /* High z-index keeps landing above #header so the design's custom
       topbar (FYM wordmark + LOG IN link) is the only thing seen.
       The global bottom-nav is lifted above landing (see rule further
       down) so the shell nav stays visible at all times. */
    z-index: 9999;
    background: var(--ov-surface);
    color: var(--ov-on-surface);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    scrollbar-width: none;
    /* Telegram Mini App is narrow (360-420px). On desktop browsers the
       landing stays mobile-width centered in the viewport — the design
       was shot at ~390px and only works at that width. */
    text-align: left;
}
body.ov #loading-screen.ov-landing::-webkit-scrollbar { display: none; }

/* The landing is mobile-first AND responsive. Top-level sections are
   full-width (matching the reference Tailwind layout); only specific
   inner blocks (hero text body, benefit copy) get max-width caps so
   long lines don't become unreadable on wide screens. */
body.ov #loading-screen.ov-landing > * {
    width: 100%;
}

/* Hide every legacy loading-* element from style.css when we're in
   ov-landing mode. They'd otherwise float behind / on top of the
   new design. */
body.ov #loading-screen.ov-landing .loading-bg,
body.ov #loading-screen.ov-landing .loading-glow,
body.ov #loading-screen.ov-landing .loading-particles,
body.ov #loading-screen.ov-landing .loading-content,
body.ov #loading-screen.ov-landing .loading-content > *,
body.ov #loading-screen.ov-landing .loading-logo-img,
body.ov #loading-screen.ov-landing .loading-logo,
body.ov #loading-screen.ov-landing .loading-subtitle {
    display: none !important;
}


/* ── Hero ──────────────────────────────────────────────────────── */

.ov-landing__hero {
    position: relative;
    min-height: 100vh;
    padding: 96px 24px 48px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (min-width: 768px) {
    .ov-landing__hero { padding: 120px 40px 64px; }
}
@media (min-width: 1280px) {
    .ov-landing__hero { padding: 160px 96px 96px; }
}
.ov-landing__hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.ov-landing__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom,
                rgba(19,19,19,0.4) 0%,
                rgba(19,19,19,1)   92%);
}

.ov-landing__topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: rgba(10, 10, 11, 0.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.ov-landing__topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ov-landing__wordmark {
    /* Display serif (Bodoni Moda via --font-display).
       Solid gold instead of gradient-text (impeccable rule). */
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 24px;
    color: #f2ca50;
    line-height: 1;
}
.ov-landing__login-link {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #d4af37;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 4px;
    transition: transform 0.15s ease;
}
.ov-landing__login-link:active { transform: scale(0.95); }

/* Hero text block — capped to `max-w-lg` (512px) per the reference.
   Anchors to the left of the hero section so on wider screens the
   copy hugs the left edge and the casino image spreads to the right,
   same as the reference. */
.ov-landing__hero-body {
    position: relative;
    z-index: 2;
    max-width: 512px;
    width: 100%;
}
.ov-landing__eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ov-primary);
    margin: 0 0 16px;
    opacity: 0.8;
    font-weight: 700;
}
.ov-landing__headline {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(44px, 12vw, 74px);
    line-height: 0.9;
    color: var(--ov-on-surface);
    margin: 0 0 32px;
    letter-spacing: -0.01em;
}
.ov-landing__headline-accent { color: var(--ov-primary-container); }

.ov-landing__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 360px;
    padding: 18px 22px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    color: var(--ov-on-primary);
    background: linear-gradient(45deg, #f2ca50 0%, #d4af37 100%);
    box-shadow: 0 0 40px rgba(242, 202, 80, 0.3);
    transition: transform 0.15s ease;
}
.ov-landing__cta:active { transform: scale(0.98); }
.ov-landing__cta:hover  .ov-landing__cta-arrow { transform: translateX(4px); }

.ov-landing__cta > * { position: relative; z-index: 2; }

.ov-landing__cta-icon {
    font-size: 30px;
    margin-right: 14px;
}
.ov-landing__cta-label {
    flex: 1;
    text-align: left;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ov-on-primary);
}
.ov-landing__cta-arrow {
    font-size: 22px;
    transition: transform 0.2s ease;
}
/* The hidden progress tracker — #loading-bar-fill has its width set by
   app.js as the casino boots. We reveal it as a shimmer overlay on the
   CTA so users see loading progress without a separate bar. */
.ov-landing__cta-progress {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.25) 0%,
                rgba(255, 255, 255, 0.05) 100%);
    mix-blend-mode: overlay;
    width: 0;
    transition: width 0.4s ease-out;
    pointer-events: none;
    z-index: 1;
}

.ov-landing__tagline {
    margin: 24px 0 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(208, 197, 175, 0.6);
    line-height: 1.6;
    max-width: 280px;
}

/* Small loading-status line under the CTA — driven by app.js.
   Empty by default (initApp sets it to "Starting...", etc.). */
.ov-landing__loading-status {
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(208, 197, 175, 0.45);
    min-height: 1.2em;   /* reserve space so layout doesn't jump */
    max-width: 280px;
}
.ov-landing__loading-status:empty { display: none; }


/* ── Body sections (games showcase + benefits) ─────────────────── */

/* Sections are full-width, just padded. On tablets/desktops we scale
   the horizontal padding up so the content isn't pinned to the edge
   of a 1400px viewport. Vertical padding also grows on wider screens
   to keep the editorial rhythm of the reference design. */
.ov-landing__section {
    padding: 80px 24px;
    position: relative;
}
@media (min-width: 768px) {
    .ov-landing__section { padding: 96px 40px; }
}
@media (min-width: 1280px) {
    .ov-landing__section { padding: 120px 96px; }
}
.ov-landing__section--benefits {
    background: var(--ov-surface-lowest);
    overflow: hidden;
}
.ov-landing__section--benefits::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 260px; height: 260px;
    background: rgba(233, 195, 73, 0.05);
    filter: blur(120px);
    border-radius: 50%;
    pointer-events: none;
}

.ov-landing__section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 16px;
    margin-bottom: 40px;
    box-shadow: inset 0 -1px 0 rgba(77, 70, 53, 0.2);
}
.ov-landing__section-title {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 26px;
    color: var(--ov-on-surface);
    letter-spacing: -0.01em;
    margin: 0;
}
.ov-landing__section-title--xl {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 8px;
}
.ov-landing__section-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--ov-primary);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 4px 0 0;
    font-weight: 700;
}
.ov-landing__section-more {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--ov-on-surface-variant);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}

/* Games grid: 2 cols on mobile, 4 cols on md+ (≥768px) — matches the
   reference `grid-cols-2 md:grid-cols-4` exactly. */
.ov-landing__games {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (min-width: 768px) {
    .ov-landing__games {
        grid-template-columns: repeat(4, 1fr);
    }
}
.ov-landing__game {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--ov-surface-low);
    border-radius: 3px;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.ov-landing__game:active { transform: scale(0.96); }
.ov-landing__game img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.ov-landing__game:hover img { opacity: 1; }
.ov-landing__game-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                var(--ov-surface-lowest) 0%,
                transparent 50%);
}
.ov-landing__game-body {
    position: absolute;
    left: 16px;
    bottom: 16px;
}
.ov-landing__game-tag {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ov-primary);
    margin: 0 0 4px;
    font-weight: 600;
}
.ov-landing__game-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ov-on-surface);
    margin: 0;
}


/* Benefits */

.ov-landing__accent-bar {
    width: 48px;
    height: 4px;
    background: var(--ov-primary);
    margin-bottom: 64px;
}
.ov-landing__benefit {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 48px;
    max-width: 640px;   /* stop long body copy from stretching across desktop */
}
.ov-landing__benefit:last-child { margin-bottom: 0; }
.ov-landing__benefit-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ov-surface-high);
    border-radius: 3px;
    outline: 1px solid rgba(77, 70, 53, 0.3);
    outline-offset: -1px;
    color: var(--ov-primary);
}
.ov-landing__benefit-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ov-on-surface);
    margin: 0 0 10px;
}
.ov-landing__benefit-body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ov-on-surface-variant);
    margin: 0;
}


/* Footer CTA */

.ov-landing__footer {
    padding: 96px 24px 160px;
    text-align: center;
    background: var(--ov-surface);
    box-shadow: inset 0 1px 0 rgba(77, 70, 53, 0.15);
}
@media (min-width: 768px) {
    .ov-landing__footer { padding: 128px 40px 160px; }
}
@media (min-width: 1280px) {
    .ov-landing__footer { padding: 160px 96px 160px; }
}
.ov-landing__footer-title {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ov-on-surface);
    margin: 0 0 24px;
}
.ov-landing__footer-cta {
    background: linear-gradient(45deg, #f2ca50 0%, #d4af37 100%);
    color: var(--ov-on-primary);
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    padding: 16px 48px;
    border-radius: 3px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: transform 0.15s ease;
    box-shadow: 0 0 40px rgba(242, 202, 80, 0.2);
}
.ov-landing__footer-cta:active { transform: scale(0.95); }
.ov-landing__footer-fine {
    margin: 48px 0 0;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(208, 197, 175, 0.4);
}

/* Landing keeps the global bottom-nav visible — members should see the
   shell wherever they are. We float the nav above the landing with a
   higher z-index than the landing's 9999, and pad the landing footer so
   the last CTA never sits under the fixed nav. */
body.ov #bottom-nav,
body.ov .bottom-nav {
    z-index: 10000;
}
body.ov #loading-screen.ov-landing .ov-landing__footer {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
    body.ov #loading-screen.ov-landing .ov-landing__footer {
        padding-bottom: 128px;
    }
}


/* ══════════════════════════════════════════════════════════════════
   HOME SCREEN (ov-home) — ported from Claude Design "Home" bundle.
   Five stacked sections inside <main class="ov-home__main">:
     1. Live winnings ticker  (#live-wins-feed)
     2. Hero grid             (#home-progression-card + #streak-banner
                              + #social-rewards-list sidebar)
     3. Premium floor games   (6 image-backed game cards)
     4. House ledger          (#leaderboard-preview)
     5. Footer                (brand + links + $FYM market stats)
   Mobile-first; opens up to a 12-col grid at ≥1024px.
   ══════════════════════════════════════════════════════════════════ */

/* Keep the .screen default (display:none until .active). When active,
   style.css sets display:block — we only tweak padding and palette. */
body.ov #home-screen.ov-home {
    padding: 0;
    background: var(--ov-surface);
    color: var(--ov-on-surface);
}

.ov-home__main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px var(--sp-sm) 120px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}
@media (min-width: 768px) {
    .ov-home__main {
        padding: var(--sp-lg) var(--sp-lg) 140px;
        gap: var(--sp-xl);
    }
}
@media (min-width: 1280px) {
    .ov-home__main {
        padding: 40px var(--sp-xl) 120px;
        gap: 56px;
    }
}


/* ─── 1. Live winnings ticker ──────────────────────────────────── */

.ov-home__ticker {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--sp-xs) 14px;
    background: var(--ov-surface-lowest);
    border-radius: var(--r-2);
    box-shadow: inset 0 1px 0 rgba(233, 195, 73, 0.05);
    overflow: hidden;
    position: relative;
}
.ov-home__ticker-pulse {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ov-green);
    box-shadow: 0 0 0 3px rgba(91, 185, 117, 0.18), 0 0 8px var(--ov-green);
    animation: ov-pulse-dot 1.4s ease-in-out infinite;
}
.ov-home__ticker-label {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ov-on-surface-variant);
}
.ov-home__ticker-scroll {
    flex: 1 1 auto;
    /* Real content (.live-win-card) is populated by app.js; styles
       below keep the horizontal scroller but restyle the cards. */
    padding: 0;
    margin: 0;
}
.ov-home__ticker-empty {
    flex: 1;
    font-size: 11px;
    color: var(--ov-on-surface-muted);
    padding: var(--sp-3xs) 0;
}
/* Override style.css live-win-card defaults inside the OV ticker so
   they match the vault tone (dark charcoal with gold price tag). */
body.ov #home-screen.ov-home .live-wins-scroll {
    flex: 1;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0;
}
body.ov #home-screen.ov-home .live-wins-scroll::-webkit-scrollbar {
    display: none;
}
body.ov #home-screen.ov-home .live-win-card {
    flex: 0 0 auto;
    min-width: 168px !important;
    max-width: 200px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 3px !important;
    padding: 2px var(--sp-2xs) !important;
    display: grid !important;
    grid-template-columns: 26px 1fr auto;
    gap: var(--sp-2xs);
    align-items: center;
    box-shadow: none !important;
    transition: transform 150ms ease;
}
body.ov #home-screen.ov-home .live-win-card:hover {
    transform: none;
    background: rgba(233, 195, 73, 0.04) !important;
}
body.ov #home-screen.ov-home .live-win-name {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ov-on-surface) !important;
}
body.ov #home-screen.ov-home .live-win-game {
    font-family: var(--font-body) !important;
    font-size: 9px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted) !important;
}
body.ov #home-screen.ov-home .live-win-amount {
    font-family: var(--font-body) !important;
    font-variant-numeric: tabular-nums;
    font-size: 11px !important;
    font-weight: 700;
    color: var(--ov-primary) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}


/* ─── 2. Hero grid (progression + daily + social missions) ────── */

.ov-home__hero-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (min-width: 1024px) {
    .ov-home__hero-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 28px;
        align-items: stretch;
    }
}
.ov-home__hero-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Progression card — app.js toggles inline style.display between
   'none' (hidden) and 'flex' (visible), so we lean on flex here. */
.ov-prog-card {
    position: relative;
    background: var(--ov-surface-high);
    border-radius: 6px;
    padding: 22px;
    align-items: center;
    gap: var(--sp-sm);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--ov-shadow-ambient), inset 0 1px 0 rgba(233, 195, 73, 0.08);
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.ov-prog-card:hover {
    box-shadow: var(--ov-shadow-ambient), inset 0 1px 0 rgba(233, 195, 73, 0.2);
}
.ov-prog-card:active { transform: scale(0.995); }
.ov-prog-card-bg {
    position: absolute;
    right: -36px;
    bottom: -42px;
    width: 180px;
    height: 180px;
    opacity: 0.06;
    pointer-events: none;
}
.ov-prog-card-bg-icon {
    font-size: 180px !important;
    color: var(--ov-primary);
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48 !important;
    line-height: 1;
}
.ov-prog-card-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
    min-width: 0;
    flex: 1;
}
.ov-prog-card-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ov-primary);
}
.ov-prog-card-title {
    /* Reference design uses regular serif (not italic) for this title
       — "Progress to Obsidian Sovereign" sits on one/two lines as a
       quietly stately serif, with the next-tier name in gold. */
    font-family: 'Noto Serif', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ov-on-surface);
    margin: 0;
    letter-spacing: -0.005em;
}
.ov-prog-card-title #home-prog-rank-name {
    color: var(--ov-primary);
    font-style: italic;
    font-weight: 700;
}
.ov-prog-card-bar-track {
    height: 5px;
    border-radius: 2px;
    background: var(--ov-surface-lowest);
    overflow: hidden;
    margin-top: 10px;
    box-shadow: inset 0 0 0 0.5px var(--ov-ghost-border);
}
.ov-prog-card-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--ov-gold-gradient);
    border-radius: 2px;
    transition: width 600ms ease;
}
.ov-prog-card-meta {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ov-on-surface-muted);
    margin: 6px 0 0;
}
/* Right-hand column on the progression card: "MULTIPLIER" label +
   big italic serif value. Matches the reference design exactly. */
.ov-prog-card-mult {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-left: var(--sp-xs);
    flex: 0 0 auto;
}
.ov-prog-card-mult-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ov-on-surface-variant);
    font-weight: 400;
}
.ov-prog-card-mult-value {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 34px;
    color: var(--ov-primary);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* Card layout: stack on narrow, side-by-side with the multiplier
   centred on ≥640px (matches md:flex-row items-center in reference). */
.ov-prog-card {
    flex-direction: column;
    align-items: stretch;
}
@media (min-width: 640px) {
    .ov-prog-card {
        padding: 28px;
        flex-direction: row;
        align-items: center;
        gap: var(--sp-md);
    }
    .ov-prog-card-title { font-size: 24px; }
    .ov-prog-card-bar-track { width: 320px; max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════
   DAILY VAULT BOUNTY — override style.css's #home-screen .streak-banner
   !important rules so the Tailwind classes from the reference design
   show through. Each property is set to the exact value the design's
   Tailwind utility would produce; we use !important to beat style.css's
   !important, which wins on specificity. */
body.ov #home-screen.ov-home #streak-banner {
    background: #1c1b1b !important;         /* Tailwind bg-surface-container-low */
    border: 0 !important;
    border-radius: 0.5rem !important;       /* Tailwind rounded-xl */
    box-shadow: none !important;
}
body.ov #home-screen.ov-home #streak-day {
    font-family: 'Noto Serif', serif !important;   /* font-headline */
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important;          /* text-xl */
    line-height: 1.75rem !important;
    color: #e5e2e1 !important;              /* text-on-surface */
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0;
}
body.ov #home-screen.ov-home #streak-reward {
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;         /* text-sm */
    font-weight: 400 !important;
    line-height: 1.625 !important;          /* leading-relaxed */
    color: #d1c5b4 !important;              /* text-on-surface-variant */
    letter-spacing: normal !important;
    text-transform: none !important;
    max-width: 28rem !important;            /* max-w-md */
    margin: 0;
}
body.ov #home-screen.ov-home #streak-reward b {
    color: #e9c349;                         /* text-primary */
    font-weight: 700;
}
/* Override style.css's #daily-btn gradient + colour with the design's
   diagonal gold-gradient + on-primary ink. */
body.ov #home-screen.ov-home #daily-btn {
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%) !important;
    color: #3c2f00 !important;              /* text-on-primary */
    border: 0 !important;
    border-radius: 0.125rem !important;     /* Tailwind rounded */
    padding: 0.75rem 2rem !important;       /* py-3 px-8 */
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;         /* text-sm */
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;       /* tracking-widest */
    text-transform: uppercase !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: opacity 150ms ease, transform 150ms ease !important;
}
body.ov #home-screen.ov-home #daily-btn:hover {
    opacity: 0.9;
}
body.ov #home-screen.ov-home #daily-btn:active {
    transform: scale(0.95);
}
body.ov #home-screen.ov-home #daily-btn:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}
body.ov #home-screen.ov-home #streak-banner.claimable #daily-btn {
    animation: ov-daily-glow 2.4s ease-in-out infinite;
}
@keyframes ov-daily-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233, 195, 73, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(233, 195, 73, 0.12); }
}
/* Remaining legacy .ov-daily-* classes are no-ops on the new home. */
.ov-daily-streak {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.ov-daily-streak-dots {
    display: flex;
    gap: 6px;
}
/* Streak tiles: 7 rounded rectangles. Tiles 1-6 are 32×40 squares;
   tile 7 (.streak-dot--reward) is wider (48×40) and hosts a gift icon.
   Inactive tiles show a muted outline. Active (past + today) tiles get
   the primary-gold treatment. */
/* Streak tiles on the Obsidian Vault home are styled with Tailwind
   utility classes emitted by updateDailyStatus() — so we only reset
   the legacy style.css size/border here to let Tailwind take over. */
body.ov #home-screen.ov-home .streak-dot {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.ov-daily-streak-label {
    font-family: var(--font-body);
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted);
    font-weight: 700;
}


/* Events home banner (set by events.js) — FIX-E: harmonized with Daily
   Vault Bounty. Wrapper margin/padding is now provided by parent flex
   gap, so this rule only collapses default margins. */
body.ov #home-screen.ov-home #events-home-banner {
    margin: 0;
    padding: 0;
}
/* Session stats row */
body.ov #home-screen.ov-home .session-stats {
    background: var(--ov-surface-lowest);
    border: 0;
    box-shadow: inset 0 0 0 0.5px var(--ov-ghost-border);
    border-radius: 3px;
    padding: var(--sp-xs) 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xs);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ov-on-surface-variant);
}
body.ov #home-screen.ov-home .session-label {
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    color: var(--ov-on-surface-muted);
}
body.ov #home-screen.ov-home .session-net { font-variant-numeric: tabular-nums; font-weight: 700; }
body.ov #home-screen.ov-home .session-net.positive { color: var(--ov-green); }
body.ov #home-screen.ov-home .session-net.negative { color: var(--ov-red); }


/* Social missions sidebar */
.ov-missions {
    background: var(--ov-surface-container);
    border-radius: 6px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ov-missions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xs);
}
.ov-missions-title {
    font-family: 'Noto Serif', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 17px;
    color: var(--ov-on-surface);
    margin: 0;
}
.ov-missions-tag {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ov-primary);
    background: rgba(233, 195, 73, 0.1);
    padding: var(--sp-3xs) var(--sp-2xs);
    border-radius: 3px;
    white-space: nowrap;
}
.ov-missions-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
    min-height: 60px;
}
.ov-missions-empty {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 12px;
    color: var(--ov-on-surface-muted);
    text-align: center;
    padding: 20px 0;
}
.ov-missions-foot {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 11px;
    color: var(--ov-on-surface-muted);
    text-align: center;
    margin: 0;
    padding-top: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* social.js injects .lodge-social-* structures — override for OV. */
body.ov #home-screen.ov-home .lodge-social-summary {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--ov-surface-lowest);
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted);
    font-weight: 600;
    margin-bottom: var(--sp-3xs);
}
body.ov #home-screen.ov-home .lodge-social-summary b {
    color: var(--ov-primary);
    font-variant-numeric: tabular-nums;
}
body.ov #home-screen.ov-home .lodge-social-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--sp-xs);
    align-items: center;
    padding: 14px;
    background: var(--ov-surface-lowest);
    border-radius: 3px;
    box-shadow: inset 0 0 0 0.5px rgba(77, 70, 53, 0.15);
    transition: box-shadow 150ms ease;
    cursor: pointer;
}
body.ov #home-screen.ov-home .lodge-social-row:hover {
    box-shadow: inset 0 0 0 0.5px rgba(233, 195, 73, 0.3);
}
body.ov #home-screen.ov-home .lodge-social-row.claimed,
body.ov #home-screen.ov-home .lodge-social-row.cooldown,
body.ov #home-screen.ov-home .lodge-social-row.pending,
body.ov #home-screen.ov-home .lodge-social-row.no-post {
    opacity: 0.55;
    cursor: default;
}
body.ov #home-screen.ov-home .lodge-social-icon,
body.ov #home-screen.ov-home .lodge-social-row > svg:first-child {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ov-surface-high);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ov-on-surface-variant);
    flex: 0 0 auto;
}
body.ov #home-screen.ov-home .lodge-social-body,
body.ov #home-screen.ov-home .lodge-social-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.ov #home-screen.ov-home .lodge-social-name,
body.ov #home-screen.ov-home .lodge-social-title {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ov-on-surface);
    font-weight: 700;
}
body.ov #home-screen.ov-home .lodge-social-desc,
body.ov #home-screen.ov-home .lodge-social-sub {
    font-family: var(--font-body);
    font-size: 10.5px;
    color: var(--ov-on-surface-muted);
    font-weight: 500;
}
body.ov #home-screen.ov-home .lodge-social-reward,
body.ov #home-screen.ov-home .lodge-social-xp {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--ov-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
body.ov #home-screen.ov-home .lodge-social-btn,
body.ov #home-screen.ov-home .lodge-social-cta {
    font-family: var(--font-body);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ov-on-primary);
    background: var(--ov-gold-gradient);
    border: 0;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
}
body.ov #home-screen.ov-home .lodge-social-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
body.ov #home-screen.ov-home .lodge-social-post {
    display: block;
    font-size: 10px;
    color: var(--ov-on-surface-dim);
    margin-top: var(--sp-3xs);
}
body.ov #home-screen.ov-home .lodge-social-post a {
    color: var(--ov-primary);
    text-decoration: none;
}


/* ─── Section head (shared across Games + Ledger) ─────────────── */

.ov-home__section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ov-home__section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-sm);
    flex-wrap: wrap;            /* let "View All" drop below on narrow */
}
.ov-home__section-titles {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3xs);
    flex: 1 1 auto;
    min-width: 0;
}
.ov-home__section-titles .ov-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ov-primary);
}
.ov-home__section-title {
    /* Reference design: plain serif, NOT italic. "Premium Floor Games"
       reads as a quiet statement, not a decorative flourish. Sized down
       at mobile so the header doesn't wrap across three lines. */
    font-family: 'Noto Serif', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    color: var(--ov-on-surface);
    margin: 0;
    letter-spacing: -0.005em;
}
@media (min-width: 640px) {
    .ov-home__section-title { font-size: 28px; }
}
@media (min-width: 1024px) {
    .ov-home__section-title { font-size: 30px; }
}
.ov-home__section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ov-primary);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: var(--sp-3xs) 0;
    box-shadow: 0 1px 0 rgba(233, 195, 73, 0.25);
    white-space: nowrap;
}
.ov-home__section-more:hover { box-shadow: 0 1px 0 var(--ov-primary); }
.ov-home__section-more .material-symbols-outlined {
    font-size: 14px !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
}


/* ─── 3. Premium Floor Games grid ──────────────────────────────── */

.ov-home__games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 640px) {
    .ov-home__games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}
@media (min-width: 1024px) {
    .ov-home__games-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
}
.ov-game-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--ov-surface-highest);
    border: 0;
    padding: 0;
    cursor: pointer;
    /* make the whole card a clickable button */
    display: block;
    width: 100%;
    text-align: left;
    transition: transform 200ms ease;
}
.ov-game-card:active { transform: scale(0.97); }
.ov-game-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 400ms ease, transform 700ms ease;
}
.ov-game-card:hover .ov-game-card-img {
    opacity: 0.9;
    transform: scale(1.06);
}
.ov-game-card-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 11, 11, 0) 40%,
        rgba(11, 11, 11, 0.65) 75%,
        rgba(11, 11, 11, 0.92) 100%
    );
    pointer-events: none;
}
.ov-game-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px;
    color: var(--ov-on-surface);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3xs);
}
.ov-game-card-title {
    /* Reference uses plain bold serif (font-headline font-bold) — the
       italic was making everything feel overwrought. */
    font-family: 'Noto Serif', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    margin: 0;
    color: var(--ov-on-surface);
    letter-spacing: -0.005em;
}
.ov-game-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2xs);
}
.ov-game-card-tag {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ov-primary);
}
.ov-game-card-arrow {
    font-size: 16px !important;
    color: var(--ov-on-surface-muted);
    transition: color 150ms ease, transform 200ms ease;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
}
.ov-game-card:hover .ov-game-card-arrow {
    color: var(--ov-primary);
    transform: translateX(3px);
}


/* ─── 4. House ledger (leaderboard preview) ───────────────────── */

.ov-home__ledger {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--ov-surface-container);
    border-radius: var(--r-2);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ov-home__ledger-empty {
    padding: var(--sp-lg) var(--sp-sm);
    text-align: center;
    color: var(--ov-on-surface-muted);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
}
/* app.js's loadLeaderboardPreview() renders .lb-row markup — restyle
   for the vault palette. */
body.ov #home-screen.ov-home .lb-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    align-items: center;
    gap: var(--sp-xs);
    padding: 14px 18px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: background 150ms ease;
    cursor: pointer;
}
body.ov #home-screen.ov-home .lb-row:first-child { box-shadow: none; }
body.ov #home-screen.ov-home .lb-row:hover {
    background: rgba(233, 195, 73, 0.03);
}
body.ov #home-screen.ov-home .lb-row .lb-rank,
body.ov #home-screen.ov-home .lb-rank {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    color: var(--ov-primary);
    text-align: center;
}
body.ov #home-screen.ov-home .lb-row .lb-name,
body.ov #home-screen.ov-home .lb-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--ov-on-surface);
}
body.ov #home-screen.ov-home .lb-row .lb-meta,
body.ov #home-screen.ov-home .lb-meta {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted);
    font-weight: 600;
}
body.ov #home-screen.ov-home .lb-row .lb-amount,
body.ov #home-screen.ov-home .lb-amount {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--ov-primary);
    font-variant-numeric: tabular-nums;
}


/* ─── 5. Footer ────────────────────────────────────────────────── */

.ov-home__footer {
    padding-top: var(--sp-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}
@media (min-width: 768px) {
    .ov-home__footer { padding-top: 40px; gap: 44px; }
}
.ov-home__footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
}
@media (min-width: 768px) {
    .ov-home__footer-grid {
        grid-template-columns: 4fr 2fr 2fr 4fr;
        gap: var(--sp-xl);
    }
}
.ov-home__footer-brand { display: flex; flex-direction: column; gap: var(--sp-sm); }
.ov-home__footer-brandname {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 24px;
    color: var(--ov-primary);
    margin: 0;
    letter-spacing: -0.005em;
}
.ov-home__footer-lede {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ov-on-surface-variant);
    margin: 0;
    max-width: 52ch;
}
.ov-home__footer-social {
    display: flex;
    gap: 10px;
    margin-top: var(--sp-3xs);
}
.ov-home__footer-socicon {
    width: 36px;
    height: 36px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: inset 0 0 0 0.5px var(--ov-ghost-border);
    color: var(--ov-on-surface-variant);
    cursor: pointer;
    border: 0;
    transition: color 150ms ease, box-shadow 150ms ease;
}
.ov-home__footer-socicon:hover {
    color: var(--ov-primary);
    box-shadow: inset 0 0 0 0.5px var(--ov-primary);
}
.ov-home__footer-socicon .material-symbols-outlined { font-size: 16px !important; }

.ov-home__footer-col { display: flex; flex-direction: column; gap: 14px; }
.ov-home__footer-col h4,
.ov-home__footer-stats h4 {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ov-on-surface);
    margin: 0;
}
.ov-home__footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ov-home__footer-col li { margin: 0; padding: 0; }
.ov-home__footer-col a,
.ov-home__footer-col button {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ov-on-surface-variant);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: color 150ms ease;
}
.ov-home__footer-col a:hover,
.ov-home__footer-col button:hover {
    color: var(--ov-primary);
}
.ov-home__footer-stats {
    padding: 22px;
    background: var(--ov-surface-lowest);
    border-radius: var(--r-2);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: inset 0 0 0 0.5px rgba(77, 70, 53, 0.2);
}
.ov-home__footer-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 12px;
}
.ov-home__footer-stat span {
    color: var(--ov-on-surface-muted);
    letter-spacing: 0.02em;
}
.ov-home__footer-stat b {
    color: var(--ov-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ov-home__footer-stat b:has(.ov-home__footer-dot) {
    color: var(--ov-on-surface);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ov-home__footer-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ov-green);
    box-shadow: 0 0 0 2px rgba(91, 185, 117, 0.18), 0 0 6px var(--ov-green);
}

.ov-home__footer-fine {
    padding-top: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
    align-items: center;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ov-on-surface-muted);
    font-weight: 600;
}
@media (min-width: 640px) {
    .ov-home__footer-fine {
        flex-direction: row;
        justify-content: space-between;
    }
}


/* ─── Eyebrow utility used by home section heads ─────────────── */

.ov-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ov-primary);
    display: inline-block;
}


/* #home-progression-card starts with inline display:none (see
   index.html). app.js flips it to 'flex' once progression data is
   loaded. No extra CSS override needed — the `.ov-prog-card` rules
   above assume flex direction. */


/* ── Home reminder slot — Track C1.5 ─────────────────────────────
   Conditional engagement nudge below the hero column. Hidden when
   pickHomeReminder() returns null. Spec §7. */
.home-reminder { margin-top: var(--sp-md); }

.home-reminder-card {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--surface);
  border: var(--border-default);
  border-radius: var(--r-2);
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  transition: border-color var(--motion-small) var(--easing),
              transform var(--motion-small) var(--easing);
}
.home-reminder-card:hover,
.home-reminder-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

.home-reminder-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-2);
  background: color-mix(in oklch, var(--accent) 18%, var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
}

.home-reminder-content { flex: 1; min-width: 0; }
.home-reminder-title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
}
.home-reminder-meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0;
}

.home-reminder-cta {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--r-1);
  padding: var(--sp-2xs) var(--sp-sm);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-micro) var(--easing);
}
.home-reminder-cta:hover { background: var(--accent-hi); }


/* ── Active sessions banner — Track G3 ────────────────────────────
   Stack of in-flight session cards rendered below the home reminder.
   FYM_SESSIONS in active-sessions.js populates and hides this. Spec §7.2.
   FIX-E: outer surface + radius + padding now come from the
   .bg-surface-container-low .rounded-xl .p-6 .md:p-8 utilities on the
   inner .active-sessions-card wrapper, so this section element only
   handles flow spacing. */
.active-sessions-section { margin-top: 0; }

.active-sessions-card > .flex { margin: 0; }

.active-sessions-count {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--ov-on-surface-muted, #a39a84);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.active-sessions-label {
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 var(--sp-2xs);
}

.active-sessions-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
}

.active-session-card {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    background: var(--ov-surface, #201f1f);
    border: 1px solid var(--ov-ghost-border, rgba(255, 255, 255, 0.06));
    border-radius: var(--r-2);
    padding: var(--sp-2xs) var(--sp-sm);
    cursor: pointer;
    transition: border-color var(--motion-small) var(--easing),
                transform var(--motion-small) var(--easing);
}
.active-session-card:hover,
.active-session-card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-2px);
    outline: none;
}

.active-session-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--r-2);
    background: color-mix(in oklch, var(--accent) 25%, var(--surface));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.active-session-icon .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 1;
}

.active-session-content { flex: 1; min-width: 0; }
.active-session-title {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 2px;
}
.active-session-meta {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--muted);
    margin: 0;
}

.active-session-cta {
    flex-shrink: 0;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--r-1);
    padding: var(--sp-3xs) var(--sp-2xs);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-micro) var(--easing);
}
.active-session-cta:hover { background: var(--accent-hi); }

.active-sessions-more {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: var(--r-2);
    padding: var(--sp-2xs);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    cursor: pointer;
    text-align: center;
}
.active-sessions-more:hover { border-color: var(--accent); color: var(--text); }


/* ══════════════════════════════════════════════════════════════════
   HOME SCREEN UTILITIES — a hand-crafted subset of Tailwind, scoped
   to #home-screen so we don't depend on the CDN (which is blocked /
   flaky inside Telegram's Mini App WebView). Every class the Claude
   Design home HTML uses is implemented here. The design's tailwind.config
   tokens (colours, radii, fonts) are baked into the values. Other
   screens and the landing are completely untouched.

   We intentionally use a PREFIX `body.ov #home-screen.ov-home` so these
   rules beat the global `style.css` overrides that target #home-screen
   with `!important` (they fight our daily-btn / streak-banner colours).
   ══════════════════════════════════════════════════════════════════ */

/* Preflight subset (scoped) */
body.ov #home-screen.ov-home,
body.ov #home-screen.ov-home * {
    box-sizing: border-box;
}
body.ov #home-screen.ov-home button {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Container */
body.ov #home-screen.ov-home .max-w-7xl { max-width: 80rem; }
body.ov #home-screen.ov-home .mx-auto { margin-left: auto; margin-right: auto; }
body.ov #home-screen.ov-home .max-w-md { max-width: 28rem; }

/* Padding */
body.ov #home-screen.ov-home .p-0 { padding: 0; }
body.ov #home-screen.ov-home .p-4 { padding: 1rem; }
body.ov #home-screen.ov-home .p-6 { padding: 1.5rem; }
body.ov #home-screen.ov-home .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
body.ov #home-screen.ov-home .px-4 { padding-left: 1rem; padding-right: 1rem; }
body.ov #home-screen.ov-home .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
body.ov #home-screen.ov-home .px-8 { padding-left: 2rem; padding-right: 2rem; }
body.ov #home-screen.ov-home .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
body.ov #home-screen.ov-home .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
body.ov #home-screen.ov-home .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
body.ov #home-screen.ov-home .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
body.ov #home-screen.ov-home .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
body.ov #home-screen.ov-home .pt-4 { padding-top: 1rem; }
body.ov #home-screen.ov-home .pt-8 { padding-top: 2rem; }
body.ov #home-screen.ov-home .pt-12 { padding-top: 3rem; }
body.ov #home-screen.ov-home .pb-1 { padding-bottom: 0.25rem; }
body.ov #home-screen.ov-home .pb-12 { padding-bottom: 3rem; }

/* Margin */
body.ov #home-screen.ov-home .mt-4 { margin-top: 1rem; }
body.ov #home-screen.ov-home .mt-12 { margin-top: 3rem; }
body.ov #home-screen.ov-home .mt-auto { margin-top: auto; }
body.ov #home-screen.ov-home .mb-1 { margin-bottom: 0.25rem; }

/* Gap */
body.ov #home-screen.ov-home .gap-1 { gap: 0.25rem; }
body.ov #home-screen.ov-home .gap-1\.5 { gap: 0.375rem; }
body.ov #home-screen.ov-home .gap-2 { gap: 0.5rem; }
body.ov #home-screen.ov-home .gap-3 { gap: 0.75rem; }
body.ov #home-screen.ov-home .gap-4 { gap: 1rem; }
body.ov #home-screen.ov-home .gap-6 { gap: 1.5rem; }
body.ov #home-screen.ov-home .gap-8 { gap: 2rem; }

/* Space between children — using margin-top (matches Tailwind's space-y) */
body.ov #home-screen.ov-home .space-y-1 > * + * { margin-top: 0.25rem; }
body.ov #home-screen.ov-home .space-y-2 > * + * { margin-top: 0.5rem; }
body.ov #home-screen.ov-home .space-y-3 > * + * { margin-top: 0.75rem; }
body.ov #home-screen.ov-home .space-y-4 > * + * { margin-top: 1rem; }
body.ov #home-screen.ov-home .space-y-6 > * + * { margin-top: 1.5rem; }
body.ov #home-screen.ov-home .space-y-10 > * + * { margin-top: 2.5rem; }

/* Sizing */
body.ov #home-screen.ov-home .w-1\.5 { width: 0.375rem; }
body.ov #home-screen.ov-home .w-8 { width: 2rem; }
body.ov #home-screen.ov-home .w-64 { width: 16rem; }
body.ov #home-screen.ov-home .w-full { width: 100%; }
body.ov #home-screen.ov-home .w-\[1px\] { width: 1px; }
body.ov #home-screen.ov-home .h-1\.5 { height: 0.375rem; }
body.ov #home-screen.ov-home .h-4 { height: 1rem; }
body.ov #home-screen.ov-home .h-8 { height: 2rem; }
body.ov #home-screen.ov-home .h-64 { height: 16rem; }
body.ov #home-screen.ov-home .h-full { height: 100%; }

/* Display */
body.ov #home-screen.ov-home .block { display: block; }
body.ov #home-screen.ov-home .flex { display: flex; }
body.ov #home-screen.ov-home .grid { display: grid; }
body.ov #home-screen.ov-home .hidden { display: none; }

/* Flex */
body.ov #home-screen.ov-home .flex-1 { flex: 1 1 0%; }
body.ov #home-screen.ov-home .flex-col { flex-direction: column; }
body.ov #home-screen.ov-home .items-center { align-items: center; }
body.ov #home-screen.ov-home .items-end { align-items: flex-end; }
body.ov #home-screen.ov-home .items-start { align-items: flex-start; }
body.ov #home-screen.ov-home .items-stretch { align-items: stretch; }
body.ov #home-screen.ov-home .justify-between { justify-content: space-between; }
body.ov #home-screen.ov-home .justify-center { justify-content: center; }

/* Grid */
body.ov #home-screen.ov-home .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
body.ov #home-screen.ov-home .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Divide */
body.ov #home-screen.ov-home .divide-y > * + * {
    border-top-width: 1px;
    border-top-style: solid;
}
body.ov #home-screen.ov-home .divide-outline-variant\/10 > * + * {
    border-top-color: rgba(78, 70, 57, 0.1);
}

/* Position */
body.ov #home-screen.ov-home .relative { position: relative; }
body.ov #home-screen.ov-home .absolute { position: absolute; }
body.ov #home-screen.ov-home .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
body.ov #home-screen.ov-home .left-0 { left: 0; }
body.ov #home-screen.ov-home .bottom-0 { bottom: 0; }
body.ov #home-screen.ov-home .-right-12 { right: -3rem; }
body.ov #home-screen.ov-home .-bottom-12 { bottom: -3rem; }
body.ov #home-screen.ov-home .z-10 { z-index: 10; }

/* Typography */
body.ov #home-screen.ov-home .text-center { text-align: center; }
body.ov #home-screen.ov-home .text-left { text-align: left; }
body.ov #home-screen.ov-home .text-xs { font-size: 0.75rem; line-height: 1rem; }
body.ov #home-screen.ov-home .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
body.ov #home-screen.ov-home .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
body.ov #home-screen.ov-home .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
body.ov #home-screen.ov-home .text-2xl { font-size: 1.5rem; line-height: 2rem; }
body.ov #home-screen.ov-home .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
body.ov #home-screen.ov-home .text-\[10px\] { font-size: 10px; }
body.ov #home-screen.ov-home .text-\[11px\] { font-size: 11px; }
body.ov #home-screen.ov-home .text-\[160px\] { font-size: 160px; line-height: 1; }
body.ov #home-screen.ov-home .font-bold { font-weight: 700; }
body.ov #home-screen.ov-home .font-medium { font-weight: 500; }
body.ov #home-screen.ov-home .italic { font-style: italic; }
body.ov #home-screen.ov-home .uppercase { text-transform: uppercase; }
body.ov #home-screen.ov-home .tracking-wider { letter-spacing: 0.05em; }
body.ov #home-screen.ov-home .tracking-widest { letter-spacing: 0.1em; }
body.ov #home-screen.ov-home .tracking-tighter { letter-spacing: -0.05em; }
body.ov #home-screen.ov-home .tracking-\[0\.2em\] { letter-spacing: 0.2em; }
body.ov #home-screen.ov-home .tracking-\[0\.3em\] { letter-spacing: 0.3em; }
body.ov #home-screen.ov-home .leading-relaxed { line-height: 1.625; }
body.ov #home-screen.ov-home .whitespace-nowrap { white-space: nowrap; }
body.ov #home-screen.ov-home .font-body { font-family: var(--font-body); }
body.ov #home-screen.ov-home .font-headline { font-family: 'Noto Serif', serif; }

/* Colours — mapping tokens from the design's tailwind.config. */
body.ov #home-screen.ov-home .text-primary { color: #e9c349; }
body.ov #home-screen.ov-home .text-on-primary { color: #3c2f00; }
body.ov #home-screen.ov-home .text-on-surface { color: #e5e2e1; }
body.ov #home-screen.ov-home .text-on-surface-variant { color: #d1c5b4; }
body.ov #home-screen.ov-home .bg-background { background-color: #131313; }
body.ov #home-screen.ov-home .bg-surface-container { background-color: #201f1f; }
body.ov #home-screen.ov-home .bg-surface-container-high { background-color: #2a2a2a; }
body.ov #home-screen.ov-home .bg-surface-container-highest { background-color: #353534; }
body.ov #home-screen.ov-home .bg-surface-container-low { background-color: #1c1b1b; }
body.ov #home-screen.ov-home .bg-surface-container-lowest { background-color: #0e0e0e; }
body.ov #home-screen.ov-home .bg-primary\/10 { background-color: rgba(233, 195, 73, 0.1); }
body.ov #home-screen.ov-home .bg-outline-variant\/30 { background-color: rgba(78, 70, 57, 0.3); }
body.ov #home-screen.ov-home .bg-emerald-500 { background-color: #10b981; }

/* Gradients */
body.ov #home-screen.ov-home .bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-from, transparent), var(--tw-gradient-via, transparent), var(--tw-gradient-to, transparent));
}
body.ov #home-screen.ov-home .from-surface-container-lowest {
    --tw-gradient-from: #0e0e0e;
}
body.ov #home-screen.ov-home .via-transparent {
    --tw-gradient-via: rgba(0, 0, 0, 0);
}
body.ov #home-screen.ov-home .to-transparent {
    --tw-gradient-to: rgba(0, 0, 0, 0);
}

/* Border */
body.ov #home-screen.ov-home .border {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}
body.ov #home-screen.ov-home .border-0 {
    border-width: 0;
}
body.ov #home-screen.ov-home .border-t {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: transparent;
}
body.ov #home-screen.ov-home .border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}
body.ov #home-screen.ov-home .border-primary { border-color: #e9c349; }
body.ov #home-screen.ov-home .border-primary\/20 { border-color: rgba(233, 195, 73, 0.2); }
body.ov #home-screen.ov-home .border-outline-variant\/5 { border-color: rgba(78, 70, 57, 0.05); }
body.ov #home-screen.ov-home .border-outline-variant\/10 { border-color: rgba(78, 70, 57, 0.1); }
body.ov #home-screen.ov-home .border-outline-variant\/30 { border-color: rgba(78, 70, 57, 0.3); }

/* Radius */
body.ov #home-screen.ov-home .rounded { border-radius: 0.125rem; }
body.ov #home-screen.ov-home .rounded-lg { border-radius: 0.25rem; }
body.ov #home-screen.ov-home .rounded-xl { border-radius: 0.5rem; }
body.ov #home-screen.ov-home .rounded-full { border-radius: 9999px; }

/* Effects */
body.ov #home-screen.ov-home .overflow-hidden { overflow: hidden; }
body.ov #home-screen.ov-home .cursor-pointer { cursor: pointer; }
body.ov #home-screen.ov-home .pointer-events-none { pointer-events: none; }
body.ov #home-screen.ov-home .opacity-5 { opacity: 0.05; }
body.ov #home-screen.ov-home .opacity-60 { opacity: 0.6; }
body.ov #home-screen.ov-home .object-cover { object-fit: cover; }
body.ov #home-screen.ov-home .aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* Transitions */
body.ov #home-screen.ov-home .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
body.ov #home-screen.ov-home .transition-colors {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
body.ov #home-screen.ov-home .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
body.ov #home-screen.ov-home .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
body.ov #home-screen.ov-home .duration-700 {
    transition-duration: 700ms;
}

/* Hover / active */
body.ov #home-screen.ov-home .hover\:text-primary:hover { color: #e9c349; }
body.ov #home-screen.ov-home .hover\:border-primary:hover { border-color: #e9c349; }
body.ov #home-screen.ov-home .hover\:opacity-90:hover { opacity: 0.9; }
body.ov #home-screen.ov-home .active\:scale-95:active { transform: scale(0.95); }

/* Group hover — .group on ancestor triggers these */
body.ov #home-screen.ov-home .group:hover .group-hover\:text-primary { color: #e9c349; }
body.ov #home-screen.ov-home .group:hover .group-hover\:opacity-10 { opacity: 0.1; }
body.ov #home-screen.ov-home .group:hover .group-hover\:scale-110 { transform: scale(1.1); }

/* Marquee animation (already defined in inline <style> — keep a copy
   here as fallback in case the inline style loads later than this file). */
@keyframes ov-home-marquee-fallback {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
body.ov #home-screen.ov-home .animate-marquee {
    animation: ov-home-marquee-fallback 38s linear infinite;
}

/* ── Responsive: md breakpoint (≥768px) ────────────────────────── */
@media (min-width: 768px) {
    body.ov #home-screen.ov-home .md\:flex-row { flex-direction: row; }
    body.ov #home-screen.ov-home .md\:items-center { align-items: center; }
    body.ov #home-screen.ov-home .md\:text-left { text-align: left; }
    body.ov #home-screen.ov-home .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    body.ov #home-screen.ov-home .md\:w-80 { width: 20rem; }
    body.ov #home-screen.ov-home .md\:p-8 { padding: 2rem; }
    body.ov #home-screen.ov-home .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    body.ov #home-screen.ov-home .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    body.ov #home-screen.ov-home .md\:pt-16 { padding-top: 4rem; }
    body.ov #home-screen.ov-home .md\:mt-16 { margin-top: 4rem; }
    body.ov #home-screen.ov-home .md\:gap-6 { gap: 1.5rem; }
    body.ov #home-screen.ov-home .md\:gap-8 { gap: 2rem; }
    body.ov #home-screen.ov-home .md\:gap-12 { gap: 3rem; }
    body.ov #home-screen.ov-home .md\:space-y-8 > * + * { margin-top: 2rem; }
    body.ov #home-screen.ov-home .md\:space-y-12 > * + * { margin-top: 3rem; }
    body.ov #home-screen.ov-home .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.ov #home-screen.ov-home .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    body.ov #home-screen.ov-home .md\:col-span-2 { grid-column: span 2 / span 2; }
    body.ov #home-screen.ov-home .md\:col-span-4 { grid-column: span 4 / span 4; }
}

/* ── Responsive: lg breakpoint (≥1024px) ───────────────────────── */
@media (min-width: 1024px) {
    body.ov #home-screen.ov-home .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    body.ov #home-screen.ov-home .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    body.ov #home-screen.ov-home .lg\:col-span-4 { grid-column: span 4 / span 4; }
    body.ov #home-screen.ov-home .lg\:col-span-8 { grid-column: span 8 / span 8; }
}

/* ── No scrollbar utility ─────────────────────────────────────── */
body.ov #home-screen.ov-home .no-scrollbar::-webkit-scrollbar { display: none; }
body.ov #home-screen.ov-home .no-scrollbar { scrollbar-width: none; }

/* ── Helper classes referenced in the design (non-utility) ────── */
body.ov #home-screen.ov-home .gold-gradient {
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%);
}
body.ov #home-screen.ov-home .custom-shadow {
    box-shadow: 0 24px 48px oklch(0 0 0 / 0.5);
}
body.ov #home-screen.ov-home .serif-headline {
    font-family: 'Noto Serif', serif;
}

/* Home screen backdrop + default font (matches design body). Body
   itself already pads the bottom by --nav-height so the fixed
   bottom-nav doesn't eat the footer; no extra main padding needed. */
body.ov #home-screen.ov-home {
    background: #131313;
    color: #e5e2e1;
    font-family: var(--font-body);
    padding: 0;
    margin: 0;
}
body.ov #home-screen.ov-home main {
    padding-bottom: 0;
}
@media (min-width: 768px) {
    body.ov #home-screen.ov-home main {
        padding-bottom: 0;
    }
}


/* ══════════════════════════════════════════════════════════════════
   LEADERBOARD PODIUM — "Hall of Sovereigns" top-3 tiles with
   medal icons (military_tech / workspace_premium / stars). Ported
   from Leaderboard_and_public_chat/code.html.
   ══════════════════════════════════════════════════════════════════ */

body.ov #home-screen.ov-home .leaderboard-podium-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.25rem;
    align-items: end;
    padding-top: 3rem;
    padding-bottom: 2rem;
}
body.ov #home-screen.ov-home .podium-empty {
    min-height: 1px;
}
body.ov #home-screen.ov-home .podium-avatar-fb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #201f1f;
    color: #e9c349;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
}
body.ov #home-screen.ov-home .podium-glow {
    box-shadow: 0 0 30px rgba(242, 202, 80, 0.2);
}
body.ov #home-screen.ov-home .podium-grayscale {
    filter: grayscale(1);
}
body.ov #home-screen.ov-home .podium-contrast {
    filter: grayscale(1) contrast(1.25);
}
body.ov #home-screen.ov-home .podium-border-secondary {
    border-color: rgba(209, 197, 178, 0.3);
}
body.ov #home-screen.ov-home .podium-border-bronze {
    border-color: rgba(197, 161, 42, 0.3);
}

/* Extra Tailwind-ish utilities the podium needs that weren't in the
   original home subset. */
body.ov #home-screen.ov-home .scale-110 { transform: scale(1.1); }
body.ov #home-screen.ov-home .z-10 { z-index: 10; }
body.ov #home-screen.ov-home .w-16 { width: 4rem; }
body.ov #home-screen.ov-home .w-20 { width: 5rem; }
body.ov #home-screen.ov-home .w-28 { width: 7rem; }
body.ov #home-screen.ov-home .h-16 { height: 4rem; }
body.ov #home-screen.ov-home .h-20 { height: 5rem; }
body.ov #home-screen.ov-home .h-24 { height: 6rem; }
body.ov #home-screen.ov-home .h-28 { height: 7rem; }
body.ov #home-screen.ov-home .h-32 { height: 8rem; }
body.ov #home-screen.ov-home .h-44 { height: 11rem; }
body.ov #home-screen.ov-home .border-2 { border-width: 2px; border-style: solid; }
body.ov #home-screen.ov-home .p-1 { padding: 0.25rem; }
body.ov #home-screen.ov-home .mb-2 { margin-bottom: 0.5rem; }
body.ov #home-screen.ov-home .mb-4 { margin-bottom: 1rem; }
body.ov #home-screen.ov-home .mb-6 { margin-bottom: 1.5rem; }
body.ov #home-screen.ov-home .pb-4 { padding-bottom: 1rem; }
body.ov #home-screen.ov-home .pb-6 { padding-bottom: 1.5rem; }
body.ov #home-screen.ov-home .pb-8 { padding-bottom: 2rem; }
body.ov #home-screen.ov-home .-top-3 { top: -0.75rem; }
body.ov #home-screen.ov-home .-top-5 { top: -1.25rem; }
body.ov #home-screen.ov-home .-right-3 { right: -0.75rem; }
body.ov #home-screen.ov-home .-right-5 { right: -1.25rem; }
body.ov #home-screen.ov-home .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
body.ov #home-screen.ov-home .text-5xl { font-size: 3rem; line-height: 1; }
body.ov #home-screen.ov-home .text-on-surface-variant { color: #d1c5b4; }
body.ov #home-screen.ov-home .col-span-3 { grid-column: span 3 / span 3; }
body.ov #home-screen.ov-home .py-8 { padding-top: 2rem; padding-bottom: 2rem; }

@media (min-width: 768px) {
    body.ov #home-screen.ov-home .md\:w-20 { width: 5rem; }
    body.ov #home-screen.ov-home .md\:w-28 { width: 7rem; }
    body.ov #home-screen.ov-home .md\:h-20 { height: 5rem; }
    body.ov #home-screen.ov-home .md\:h-28 { height: 7rem; }
    body.ov #home-screen.ov-home .md\:h-32 { height: 8rem; }
    body.ov #home-screen.ov-home .md\:h-44 { height: 11rem; }
}


/* ══════════════════════════════════════════════════════════════════
   SHARED RESET — ul / ol / a inside the Obsidian Vault screens don't
   inherit Tailwind preflight (we disabled it), so the browser default
   bullet points + blue-underline links were leaking into the footer
   columns. Reset per-screen so it never bleeds onto game screens.
   ══════════════════════════════════════════════════════════════════ */
body.ov #home-screen.ov-home ul,
body.ov #home-screen.ov-home ol,
body.ov #games-screen.ov-games ul,
body.ov #games-screen.ov-games ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.ov #home-screen.ov-home a,
body.ov #games-screen.ov-games a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
body.ov #home-screen.ov-home h1,
body.ov #home-screen.ov-home h2,
body.ov #home-screen.ov-home h3,
body.ov #home-screen.ov-home h4,
body.ov #home-screen.ov-home h5,
body.ov #games-screen.ov-games h1,
body.ov #games-screen.ov-games h2,
body.ov #games-screen.ov-games h3,
body.ov #games-screen.ov-games h4,
body.ov #games-screen.ov-games h5 {
    margin: 0;
    font-weight: inherit;
}
body.ov #home-screen.ov-home input,
body.ov #games-screen.ov-games input,
body.ov #games-screen.ov-games button {
    font: inherit;
}


/* ══════════════════════════════════════════════════════════════════
   GAMES SCREEN (ov-games) — utility subset, scoped to #games-screen.
   Ported class-for-class from Games/code.html. Paints the Featured
   Black Vault hero, Live Events cards, and the Premium Games grid
   with its tabs + search bar. Other screens stay untouched.
   ══════════════════════════════════════════════════════════════════ */

/* Screen base */
body.ov #games-screen.ov-games {
    background: #131313;
    color: #e5e2e1;
    font-family: var(--font-body);
    padding: 0;
    margin: 0;
}
body.ov #games-screen.ov-games,
body.ov #games-screen.ov-games * {
    box-sizing: border-box;
}
body.ov #games-screen.ov-games button {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Container + spacing */
body.ov #games-screen.ov-games .max-w-7xl { max-width: 80rem; }
body.ov #games-screen.ov-games .max-w-md { max-width: 28rem; }
body.ov #games-screen.ov-games .max-w-2xl { max-width: 42rem; }
body.ov #games-screen.ov-games .mx-auto { margin-left: auto; margin-right: auto; }
body.ov #games-screen.ov-games .space-y-6 > * + * { margin-top: 1.5rem; }
body.ov #games-screen.ov-games .space-y-8 > * + * { margin-top: 2rem; }
body.ov #games-screen.ov-games .space-y-12 > * + * { margin-top: 3rem; }

/* Padding / margin utilities */
body.ov #games-screen.ov-games .p-1 { padding: 0.25rem; }
body.ov #games-screen.ov-games .p-6 { padding: 1.5rem; }
body.ov #games-screen.ov-games .p-8 { padding: 2rem; }
body.ov #games-screen.ov-games .px-4 { padding-left: 1rem; padding-right: 1rem; }
body.ov #games-screen.ov-games .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
body.ov #games-screen.ov-games .px-8 { padding-left: 2rem; padding-right: 2rem; }
body.ov #games-screen.ov-games .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
body.ov #games-screen.ov-games .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
body.ov #games-screen.ov-games .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
body.ov #games-screen.ov-games .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
body.ov #games-screen.ov-games .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
body.ov #games-screen.ov-games .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
body.ov #games-screen.ov-games .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
body.ov #games-screen.ov-games .pt-6 { padding-top: 1.5rem; }
body.ov #games-screen.ov-games .pt-8 { padding-top: 2rem; }
body.ov #games-screen.ov-games .pb-1 { padding-bottom: 0.25rem; }
body.ov #games-screen.ov-games .pl-12 { padding-left: 3rem; }
body.ov #games-screen.ov-games .pr-4 { padding-right: 1rem; }
body.ov #games-screen.ov-games .mb-2 { margin-bottom: 0.5rem; }
body.ov #games-screen.ov-games .mt-1 { margin-top: 0.25rem; }
body.ov #games-screen.ov-games .mt-2 { margin-top: 0.5rem; }

/* Gap */
body.ov #games-screen.ov-games .gap-1 { gap: 0.25rem; }
body.ov #games-screen.ov-games .gap-2 { gap: 0.5rem; }
body.ov #games-screen.ov-games .gap-3 { gap: 0.75rem; }
body.ov #games-screen.ov-games .gap-4 { gap: 1rem; }
body.ov #games-screen.ov-games .gap-6 { gap: 1.5rem; }

/* Sizing */
body.ov #games-screen.ov-games .w-1 { width: 0.25rem; }
body.ov #games-screen.ov-games .w-8 { width: 2rem; }
body.ov #games-screen.ov-games .w-full { width: 100%; }
body.ov #games-screen.ov-games .h-1 { height: 0.25rem; }
body.ov #games-screen.ov-games .h-8 { height: 2rem; }
body.ov #games-screen.ov-games .h-full { height: 100%; }

/* Position */
body.ov #games-screen.ov-games .relative { position: relative; }
body.ov #games-screen.ov-games .absolute { position: absolute; }
body.ov #games-screen.ov-games .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
body.ov #games-screen.ov-games .top-1\/2 { top: 50%; }
body.ov #games-screen.ov-games .left-4 { left: 1rem; }
body.ov #games-screen.ov-games .bottom-4 { bottom: 1rem; }
body.ov #games-screen.ov-games .left-4 { left: 1rem; }
body.ov #games-screen.ov-games .-translate-y-1\/2 { transform: translateY(-50%); }
body.ov #games-screen.ov-games .z-10 { z-index: 10; }
body.ov #games-screen.ov-games .z-20 { z-index: 20; }
body.ov #games-screen.ov-games .-space-x-2 > * + * { margin-left: -0.5rem; }

/* Display / flex / grid */
body.ov #games-screen.ov-games .block { display: block; }
body.ov #games-screen.ov-games .inline-block { display: inline-block; }
body.ov #games-screen.ov-games .flex { display: flex; }
body.ov #games-screen.ov-games .inline-flex { display: inline-flex; }
body.ov #games-screen.ov-games .grid { display: grid; }
body.ov #games-screen.ov-games .hidden { display: none; }
body.ov #games-screen.ov-games .flex-col { flex-direction: column; }
body.ov #games-screen.ov-games .items-start { align-items: flex-start; }
body.ov #games-screen.ov-games .items-center { align-items: center; }
body.ov #games-screen.ov-games .items-end { align-items: flex-end; }
body.ov #games-screen.ov-games .justify-between { justify-content: space-between; }
body.ov #games-screen.ov-games .justify-center { justify-content: center; }
body.ov #games-screen.ov-games .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
body.ov #games-screen.ov-games .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Colors */
body.ov #games-screen.ov-games .text-primary { color: #e9c349; }
body.ov #games-screen.ov-games .text-on-primary { color: #3c2f00; }
body.ov #games-screen.ov-games .text-on-surface { color: #e5e2e1; }
body.ov #games-screen.ov-games .text-on-surface-variant { color: #d1c5b4; }
body.ov #games-screen.ov-games .text-outline { color: #9a8f80; }
body.ov #games-screen.ov-games .text-outline-variant { color: #4e4639; }
body.ov #games-screen.ov-games .text-error { color: #ffb4ab; }
body.ov #games-screen.ov-games .bg-surface { background-color: #131313; }
body.ov #games-screen.ov-games .bg-surface-container-low { background-color: #1c1b1b; }
body.ov #games-screen.ov-games .bg-surface-container-lowest { background-color: #0e0e0e; }
body.ov #games-screen.ov-games .bg-surface-container-high { background-color: #2a2a2a; }
body.ov #games-screen.ov-games .bg-surface-container-highest { background-color: #353534; }
body.ov #games-screen.ov-games .bg-surface-variant { background-color: #353534; }
body.ov #games-screen.ov-games .bg-primary { background-color: #e9c349; }
body.ov #games-screen.ov-games .bg-primary\/10 { background-color: rgba(233, 195, 73, 0.1); }
body.ov #games-screen.ov-games .bg-primary\/20 { background-color: rgba(233, 195, 73, 0.2); }
body.ov #games-screen.ov-games .bg-error\/20 { background-color: rgba(255, 180, 171, 0.2); }

/* Borders */
body.ov #games-screen.ov-games .border { border-width: 1px; border-style: solid; border-color: transparent; }
body.ov #games-screen.ov-games .border-2 { border-width: 2px; border-style: solid; border-color: transparent; }
body.ov #games-screen.ov-games .border-l-2 { border-left: 2px solid transparent; }
body.ov #games-screen.ov-games .border-b { border-bottom: 1px solid transparent; }
body.ov #games-screen.ov-games .border-primary { border-color: #e9c349; }
body.ov #games-screen.ov-games .border-primary\/20 { border-color: rgba(233, 195, 73, 0.2); }
body.ov #games-screen.ov-games .border-primary\/30 { border-color: rgba(233, 195, 73, 0.3); }
body.ov #games-screen.ov-games .border-outline-variant\/10 { border-color: rgba(78, 70, 57, 0.1); }
body.ov #games-screen.ov-games .border-outline-variant\/15 { border-color: rgba(78, 70, 57, 0.15); }
body.ov #games-screen.ov-games .border-outline-variant\/20 { border-color: rgba(78, 70, 57, 0.2); }
body.ov #games-screen.ov-games .border-surface { border-color: #131313; }
body.ov #games-screen.ov-games .rounded { border-radius: 0.125rem; }
body.ov #games-screen.ov-games .rounded-lg { border-radius: 0.25rem; }
body.ov #games-screen.ov-games .rounded-full { border-radius: 9999px; }

/* Typography */
body.ov #games-screen.ov-games .text-\[9px\] { font-size: 9px; }
body.ov #games-screen.ov-games .text-\[10px\] { font-size: 10px; }
body.ov #games-screen.ov-games .text-\[11px\] { font-size: 11px; }
body.ov #games-screen.ov-games .text-xs { font-size: 0.75rem; line-height: 1rem; }
body.ov #games-screen.ov-games .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
body.ov #games-screen.ov-games .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
body.ov #games-screen.ov-games .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
body.ov #games-screen.ov-games .text-2xl { font-size: 1.5rem; line-height: 2rem; }
body.ov #games-screen.ov-games .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
body.ov #games-screen.ov-games .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
body.ov #games-screen.ov-games .text-5xl { font-size: 3rem; line-height: 1; }
body.ov #games-screen.ov-games .text-6xl { font-size: 3.75rem; line-height: 1; }
body.ov #games-screen.ov-games .text-7xl { font-size: 4.5rem; line-height: 1; }
body.ov #games-screen.ov-games .font-bold { font-weight: 700; }
body.ov #games-screen.ov-games .font-medium { font-weight: 500; }
body.ov #games-screen.ov-games .italic { font-style: italic; }
body.ov #games-screen.ov-games .uppercase { text-transform: uppercase; }
body.ov #games-screen.ov-games .leading-tight { line-height: 1.1; }
body.ov #games-screen.ov-games .leading-relaxed { line-height: 1.625; }
body.ov #games-screen.ov-games .tracking-tight { letter-spacing: -0.01em; }
body.ov #games-screen.ov-games .tracking-tighter { letter-spacing: -0.02em; }
body.ov #games-screen.ov-games .tracking-widest { letter-spacing: 0.1em; }
body.ov #games-screen.ov-games .tracking-\[0\.2em\] { letter-spacing: 0.2em; }
body.ov #games-screen.ov-games .font-label { font-family: var(--font-body); }
body.ov #games-screen.ov-games .font-headline { font-family: 'Noto Serif', serif; }
body.ov #games-screen.ov-games .font-body { font-family: var(--font-body); }
body.ov #games-screen.ov-games .whitespace-nowrap { white-space: nowrap; }

/* Opacity */
body.ov #games-screen.ov-games .opacity-40 { opacity: 0.4; }
body.ov #games-screen.ov-games .opacity-60 { opacity: 0.6; }

/* Image effects */
body.ov #games-screen.ov-games .object-cover { object-fit: cover; }
body.ov #games-screen.ov-games .object-center { object-position: center; }
body.ov #games-screen.ov-games .aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* Gradients */
body.ov #games-screen.ov-games .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--gfrom, transparent) 0%, var(--gvia, transparent) 50%, var(--gto, transparent) 100%);
}
body.ov #games-screen.ov-games .bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--gfrom, transparent) 0%, var(--gvia, transparent) 50%, var(--gto, transparent) 100%);
}
body.ov #games-screen.ov-games .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--gfrom, transparent) 0%, var(--gto, transparent) 100%);
}
body.ov #games-screen.ov-games .from-\[\#0e0e0e\] { --gfrom: #0e0e0e; }
body.ov #games-screen.ov-games .from-\[\#1c1b1b\] { --gfrom: #1c1b1b; }
body.ov #games-screen.ov-games .from-black\/80 { --gfrom: rgba(0, 0, 0, 0.8); }
body.ov #games-screen.ov-games .from-black { --gfrom: #000; }
body.ov #games-screen.ov-games .via-\[\#0e0e0e\]\/80 { --gvia: rgba(14, 14, 14, 0.8); }
body.ov #games-screen.ov-games .to-transparent { --gto: transparent; }
body.ov #games-screen.ov-games .to-\[\#0e0e0e\] { --gto: #0e0e0e; }

/* Effects */
body.ov #games-screen.ov-games .overflow-hidden { overflow: hidden; }
body.ov #games-screen.ov-games .cursor-pointer { cursor: pointer; }
body.ov #games-screen.ov-games .transition-all { transition: all 150ms cubic-bezier(.4,0,.2,1); }
body.ov #games-screen.ov-games .transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
body.ov #games-screen.ov-games .transition-transform { transition: transform 150ms cubic-bezier(.4,0,.2,1); }
body.ov #games-screen.ov-games .duration-700 { transition-duration: 700ms; }
body.ov #games-screen.ov-games .duration-1000 { transition-duration: 1000ms; }
body.ov #games-screen.ov-games .scale-105 { transform: scale(1.05); }
body.ov #games-screen.ov-games .active\:scale-95:active { transform: scale(0.95); }
body.ov #games-screen.ov-games .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3); }
body.ov #games-screen.ov-games .group:hover .group-hover\:scale-110 { transform: scale(1.1); }
body.ov #games-screen.ov-games .group:hover .group-hover\:scale-100 { transform: scale(1); }

/* Hover */
body.ov #games-screen.ov-games .hover\:text-primary:hover { color: #e9c349; }
body.ov #games-screen.ov-games .hover\:text-on-surface:hover { color: #e5e2e1; }
body.ov #games-screen.ov-games .hover\:border-primary:hover { border-color: #e9c349; }
body.ov #games-screen.ov-games .hover\:bg-primary\/20:hover { background-color: rgba(233, 195, 73, 0.2); }
body.ov #games-screen.ov-games .hover\:bg-surface-variant:hover { background-color: #353534; }
body.ov #games-screen.ov-games .hover\:underline:hover { text-decoration: underline; }
body.ov #games-screen.ov-games .focus\:ring-1:focus { box-shadow: 0 0 0 1px #e9c349; }
body.ov #games-screen.ov-games .focus\:border-primary:focus { border-color: #e9c349; }
body.ov #games-screen.ov-games .outline-none { outline: none; }
body.ov #games-screen.ov-games .placeholder\:text-outline-variant::placeholder { color: #4e4639; }

/* Custom helpers used by Games design */
body.ov #games-screen.ov-games .glass-card {
    background: rgba(42, 42, 42, 0.6);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 0 0 0.5px rgba(78, 70, 57, 0.15);
}
body.ov #games-screen.ov-games .gold-gradient {
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%);
}
body.ov #games-screen.ov-games .gold-border-glow {
    box-shadow: inset 1px 1px 0 rgba(233, 195, 73, 0.3);
}
body.ov #games-screen.ov-games .obsidian-shadow {
    box-shadow: 0 24px 48px oklch(0 0 0 / 0.5);
}
body.ov #games-screen.ov-games .animate-pulse {
    animation: ov-games-pulse 1.4s ease-in-out infinite;
}
@keyframes ov-games-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* Responsive md (≥768px) */
@media (min-width: 768px) {
    body.ov #games-screen.ov-games .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    body.ov #games-screen.ov-games .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    body.ov #games-screen.ov-games .md\:p-12 { padding: 3rem; }
    body.ov #games-screen.ov-games .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ov #games-screen.ov-games .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.ov #games-screen.ov-games .md\:flex-row { flex-direction: row; }
    body.ov #games-screen.ov-games .md\:items-center { align-items: center; }
    body.ov #games-screen.ov-games .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
    body.ov #games-screen.ov-games .md\:max-w-2xl { max-width: 42rem; }
}

/* Responsive lg (≥1024px) */
@media (min-width: 1024px) {
    body.ov #games-screen.ov-games .lg\:p-20 { padding: 5rem; }
    body.ov #games-screen.ov-games .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
    body.ov #games-screen.ov-games .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.ov #games-screen.ov-games .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Responsive xl (≥1280px) */
@media (min-width: 1280px) {
    body.ov #games-screen.ov-games .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Filter tabs — selected tab reads gold, inactive is muted. JS toggles
   the `is-active` class via onclick. */
body.ov #games-screen.ov-games .ov-filter-tab {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
    color: #d1c5b4;
    background: transparent;
    border: 0;
    padding: 2px 0;
    cursor: pointer;
    transition: color 150ms ease;
}
body.ov #games-screen.ov-games .ov-filter-tab:hover {
    color: #e5e2e1;
}
body.ov #games-screen.ov-games .ov-filter-tab.is-active {
    color: #e9c349;
    font-weight: 700;
}
body.ov #games-screen.ov-games .ov-filter-tab .ov-filter-tab-count {
    color: #9a8f80;
    margin-left: var(--sp-3xs);
}

/* Card hidden by search/filter */
body.ov #games-screen.ov-games .ov-game-tile[hidden] {
    display: none !important;
}

/* Tile-overlay meta line (RTP · variance). Replaces 10× inline
   style="..." attributes with token-driven CSS. */
body.ov #games-screen.ov-games .ov-game-tile__meta {
    font-size: var(--fs-caption);
    letter-spacing: 0.06em;
    color: color-mix(in oklch, oklch(1 0 0) 70%, transparent);
    margin-top: 2px;
}

/* ──────────────────────────────────────────────────────────────────
   Track C2.5 — Game tile (rewritten)
   Layered: pattern (z1) + content (z2). No <img> in catalog.
   ────────────────────────────────────────────────────────────────── */

body.ov #games-screen.ov-games .ov-game-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  padding: 16px;
  overflow: hidden;
  background: color-mix(in oklch, var(--surface) 100%, var(--cat-hue, var(--accent)) 6%);
  border: 1px solid color-mix(in oklch, var(--border) 100%, var(--cat-hue, var(--accent)) 8%);
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  isolation: isolate;
}

body.ov #games-screen.ov-games .ov-game-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--border) 100%, var(--cat-hue, var(--accent)) 30%);
  box-shadow: 0 4px 16px -4px color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 80%);
}

body.ov #games-screen.ov-games .ov-game-tile:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

body.ov #games-screen.ov-games .ov-game-tile__pill {
  position: relative;
  z-index: 2;
  display: inline-block;
  align-self: flex-start;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 99px;
  font-family: var(--font-body);
}

body.ov #games-screen.ov-games .ov-game-tile[data-cat="originals"]   .ov-game-tile__pill { background: var(--cat-orig-bg); color: var(--cat-orig-fg); }
body.ov #games-screen.ov-games .ov-game-tile[data-cat="bord"]        .ov-game-tile__pill { background: var(--cat-bord-bg); color: var(--cat-bord-fg); }
body.ov #games-screen.ov-games .ov-game-tile[data-cat="slots"]       .ov-game-tile__pill { background: var(--cat-slot-bg); color: var(--cat-slot-fg); }
body.ov #games-screen.ov-games .ov-game-tile[data-cat="multiplayer"] .ov-game-tile__pill { background: var(--cat-mp-bg);   color: var(--cat-mp-fg);   }

body.ov #games-screen.ov-games .ov-game-tile__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
}

body.ov #games-screen.ov-games .ov-game-tile__signal {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  font-size: var(--fs-caption);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Active signal state — pulse-dot + colored text */
body.ov #games-screen.ov-games .ov-game-tile__signal[data-priority]:not([data-priority=""]) {
  font-weight: 800;
  color: var(--cat-hue, var(--accent));
}

body.ov #games-screen.ov-games .ov-game-tile__signal[data-priority]:not([data-priority=""])::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: ov-tile-pulse 1.4s ease-in-out infinite;
}

@keyframes ov-tile-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  body.ov #games-screen.ov-games .ov-game-tile,
  body.ov #games-screen.ov-games .ov-game-tile:hover,
  body.ov #games-screen.ov-games .ov-game-tile:active {
    transition: none;
    transform: none;
  }
  body.ov #games-screen.ov-games .ov-game-tile__signal[data-priority]:not([data-priority=""])::before {
    animation: none;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Track C2.5 — Pattern primitive library
   6 CSS-generated abstract patterns. Each .ov-game-tile gets ONE
   pattern class + ONE category class (set via data-cat attribute).
   ────────────────────────────────────────────────────────────────── */

body.ov #games-screen.ov-games .ov-game-tile__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Primitive 1: stripes-circle (Roulette, Blackjack) */
body.ov #games-screen.ov-games .ov-pat-stripes-circle .ov-game-tile__pattern::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 14px,
    color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 88%) 14px,
    color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 88%) 16px
  );
}
body.ov #games-screen.ov-games .ov-pat-stripes-circle .ov-game-tile__pattern::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  border: 1px solid color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 65%);
  border-radius: 50%;
}

/* Primitive 2: rising-vector (Crash, Liquidation) */
body.ov #games-screen.ov-games .ov-pat-rising-vector .ov-game-tile__pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 50%,
    color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 50%,
    transparent 56%
  );
}
body.ov #games-screen.ov-games .ov-pat-rising-vector .ov-game-tile__pattern::after {
  content: '';
  position: absolute;
  right: 15%; top: 25%;
  width: 65%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cat-hue, var(--accent)));
  transform: rotate(-32deg);
  transform-origin: right;
}

/* Primitive 3: dot-grid (Mines, Lottery) */
body.ov #games-screen.ov-games .ov-pat-dot-grid .ov-game-tile__pattern {
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 30%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 80% 30%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 20% 60%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 60%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 75%) 2px, transparent 2.5px),
    radial-gradient(circle at 80% 60%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 20% 90%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 90%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 80% 90%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px);
}

/* Primitive 4: vertical-bands (FYM Slot, Black Vault, High Roller, Liquidation alt) */
body.ov #games-screen.ov-games .ov-pat-vertical-bands .ov-game-tile__pattern::before {
  content: '';
  position: absolute;
  left: 30%; top: -10%; bottom: -10%; width: 12%;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%),
    transparent
  );
}
body.ov #games-screen.ov-games .ov-pat-vertical-bands .ov-game-tile__pattern::after {
  content: '';
  position: absolute;
  left: 60%; top: -10%; bottom: -10%; width: 12%;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 76%),
    transparent
  );
}

/* Primitive 5: pin-triangle (Plinko) */
body.ov #games-screen.ov-games .ov-pat-pin-triangle .ov-game-tile__pattern {
  background-image:
    radial-gradient(circle at 50% 25%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 40% 45%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 60% 45%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 30% 65%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 65%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 70% 65%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 20% 85%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 40% 85%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 60% 85%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px),
    radial-gradient(circle at 80% 85%, color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 86%) 1.5px, transparent 2px);
}

/* Primitive 6: multi-circle (MP Roulette, MP Blackjack, Coinflip, Dice, Hi-Lo) */
body.ov #games-screen.ov-games .ov-pat-multi-circle .ov-game-tile__pattern::before {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 110px; height: 110px;
  border: 1px solid color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 65%);
  border-radius: 50%;
}
body.ov #games-screen.ov-games .ov-pat-multi-circle .ov-game-tile__pattern::after {
  content: '';
  position: absolute;
  right: 0px; bottom: -20px;
  width: 80px; height: 80px;
  border: 1px solid color-mix(in oklch, var(--cat-hue, var(--accent)) 100%, transparent 80%);
  border-radius: 50%;
}

/* Category hue resolution: data-cat attribute on .ov-game-tile sets --cat-hue */
body.ov #games-screen.ov-games .ov-game-tile[data-cat="originals"]    { --cat-hue: var(--cat-orig-hue); }
body.ov #games-screen.ov-games .ov-game-tile[data-cat="bord"]         { --cat-hue: var(--cat-bord-hue); }
body.ov #games-screen.ov-games .ov-game-tile[data-cat="slots"]        { --cat-hue: var(--cat-slot-hue); }
body.ov #games-screen.ov-games .ov-game-tile[data-cat="multiplayer"]  { --cat-hue: var(--cat-mp-hue);   }

/* Screen must not get the style.css legacy `.screen { padding: 16px }` */
body.ov #games-screen.ov-games.screen {
    padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════
   EVENTS SCREEN (ov-events) — Obsidian Vault utilities scoped to
   #events-screen. Mirrors Events/code.html class-for-class. State
   chips (live/scheduled/completed/cancelled) pick their palette via
   .chip-* modifiers. Game-type icon bleeds from the corner of the
   hero and archive cards at 5-10 % opacity.
   ══════════════════════════════════════════════════════════════════ */

body.ov #events-screen.ov-events {
    background: #131313;
    color: #e5e2e1;
    font-family: var(--font-body);
    padding: 0;
    margin: 0;
}
body.ov #events-screen.ov-events,
body.ov #events-screen.ov-events * {
    box-sizing: border-box;
}
body.ov #events-screen.ov-events button {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
body.ov #events-screen.ov-events ul,
body.ov #events-screen.ov-events ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.ov #events-screen.ov-events a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
body.ov #events-screen.ov-events h1,
body.ov #events-screen.ov-events h2,
body.ov #events-screen.ov-events h3,
body.ov #events-screen.ov-events h4,
body.ov #events-screen.ov-events h5 {
    margin: 0;
    font-weight: inherit;
}

body.ov #events-screen.ov-events.screen { padding: 0 !important; }

/* Layout / spacing */
body.ov #events-screen.ov-events .max-w-7xl { max-width: 80rem; }
body.ov #events-screen.ov-events .max-w-md { max-width: 28rem; }
body.ov #events-screen.ov-events .mx-auto { margin-left: auto; margin-right: auto; }
body.ov #events-screen.ov-events .min-h-screen { min-height: 100vh; }
body.ov #events-screen.ov-events .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
body.ov #events-screen.ov-events .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
body.ov #events-screen.ov-events .px-4 { padding-left: 1rem; padding-right: 1rem; }
body.ov #events-screen.ov-events .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
body.ov #events-screen.ov-events .px-8 { padding-left: 2rem; padding-right: 2rem; }
body.ov #events-screen.ov-events .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
body.ov #events-screen.ov-events .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
body.ov #events-screen.ov-events .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
body.ov #events-screen.ov-events .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
body.ov #events-screen.ov-events .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
body.ov #events-screen.ov-events .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
body.ov #events-screen.ov-events .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
body.ov #events-screen.ov-events .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
body.ov #events-screen.ov-events .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
body.ov #events-screen.ov-events .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
body.ov #events-screen.ov-events .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
body.ov #events-screen.ov-events .pt-24 { padding-top: 6rem; }
body.ov #events-screen.ov-events .pb-32 { padding-bottom: 8rem; }
body.ov #events-screen.ov-events .pl-6 { padding-left: 1.5rem; }
body.ov #events-screen.ov-events .pb-4 { padding-bottom: 1rem; }
body.ov #events-screen.ov-events .p-1 { padding: 0.25rem; }
body.ov #events-screen.ov-events .p-2 { padding: 0.5rem; }
body.ov #events-screen.ov-events .p-3 { padding: 0.75rem; }
body.ov #events-screen.ov-events .p-4 { padding: 1rem; }
body.ov #events-screen.ov-events .p-6 { padding: 1.5rem; }
body.ov #events-screen.ov-events .mb-1 { margin-bottom: 0.25rem; }
body.ov #events-screen.ov-events .mb-2 { margin-bottom: 0.5rem; }
body.ov #events-screen.ov-events .mb-3 { margin-bottom: 0.75rem; }
body.ov #events-screen.ov-events .mb-4 { margin-bottom: 1rem; }
body.ov #events-screen.ov-events .mb-5 { margin-bottom: 1.25rem; }
body.ov #events-screen.ov-events .mb-6 { margin-bottom: 1.5rem; }
body.ov #events-screen.ov-events .mb-8 { margin-bottom: 2rem; }
body.ov #events-screen.ov-events .mb-10 { margin-bottom: 2.5rem; }
body.ov #events-screen.ov-events .mb-12 { margin-bottom: 3rem; }
body.ov #events-screen.ov-events .mt-10 { margin-top: 2.5rem; }

/* Gap */
body.ov #events-screen.ov-events .gap-1 { gap: 0.25rem; }
body.ov #events-screen.ov-events .gap-2 { gap: 0.5rem; }
body.ov #events-screen.ov-events .gap-3 { gap: 0.75rem; }
body.ov #events-screen.ov-events .gap-4 { gap: 1rem; }
body.ov #events-screen.ov-events .gap-6 { gap: 1.5rem; }
body.ov #events-screen.ov-events .gap-8 { gap: 2rem; }
body.ov #events-screen.ov-events .space-y-1 > * + * { margin-top: 0.25rem; }

/* Display / flex / grid */
body.ov #events-screen.ov-events .block { display: block; }
body.ov #events-screen.ov-events .inline-block { display: inline-block; }
body.ov #events-screen.ov-events .flex { display: flex; }
body.ov #events-screen.ov-events .inline-flex { display: inline-flex; }
body.ov #events-screen.ov-events .grid { display: grid; }
body.ov #events-screen.ov-events .hidden { display: none; }
body.ov #events-screen.ov-events .flex-col { flex-direction: column; }
body.ov #events-screen.ov-events .flex-wrap { flex-wrap: wrap; }
body.ov #events-screen.ov-events .items-start { align-items: flex-start; }
body.ov #events-screen.ov-events .items-center { align-items: center; }
body.ov #events-screen.ov-events .items-baseline { align-items: baseline; }
body.ov #events-screen.ov-events .items-end { align-items: flex-end; }
body.ov #events-screen.ov-events .justify-center { justify-content: center; }
body.ov #events-screen.ov-events .justify-between { justify-content: space-between; }
body.ov #events-screen.ov-events .grid-cols-1 { grid-template-columns: 1fr; }
body.ov #events-screen.ov-events .text-center { text-align: center; }

/* Sizing */
body.ov #events-screen.ov-events .w-1 { width: 0.25rem; }
body.ov #events-screen.ov-events .w-8 { width: 2rem; }
body.ov #events-screen.ov-events .w-10 { width: 2.5rem; }
body.ov #events-screen.ov-events .w-full { width: 100%; }
body.ov #events-screen.ov-events .h-1 { height: 0.25rem; }
body.ov #events-screen.ov-events .h-8 { height: 2rem; }
body.ov #events-screen.ov-events .h-10 { height: 2.5rem; }
body.ov #events-screen.ov-events .h-full { height: 100%; }

/* Position */
body.ov #events-screen.ov-events .relative { position: relative; }
body.ov #events-screen.ov-events .absolute { position: absolute; }
body.ov #events-screen.ov-events .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
body.ov #events-screen.ov-events .-right-12 { right: -3rem; }
body.ov #events-screen.ov-events .-bottom-12 { bottom: -3rem; }
body.ov #events-screen.ov-events .-right-20 { right: -5rem; }
body.ov #events-screen.ov-events .-bottom-20 { bottom: -5rem; }

/* Colors */
body.ov #events-screen.ov-events .text-primary { color: #e9c349; }
body.ov #events-screen.ov-events .text-on-primary { color: #3c2f00; }
body.ov #events-screen.ov-events .text-on-surface { color: #e5e2e1; }
body.ov #events-screen.ov-events .text-on-surface-variant { color: #d1c5b4; }
body.ov #events-screen.ov-events .text-outline { color: #9a8f80; }
body.ov #events-screen.ov-events .text-outline-variant { color: #4e4639; }
body.ov #events-screen.ov-events .text-error { color: #ffb4ab; }
body.ov #events-screen.ov-events .bg-surface-container { background-color: #201f1f; }
body.ov #events-screen.ov-events .bg-surface-container-low { background-color: #1c1b1b; }
body.ov #events-screen.ov-events .bg-surface-container-lowest { background-color: #0e0e0e; }
body.ov #events-screen.ov-events .bg-surface-container-high { background-color: #2a2a2a; }
body.ov #events-screen.ov-events .bg-surface-container-highest { background-color: #353534; }
body.ov #events-screen.ov-events .bg-primary\/10 { background-color: rgba(233, 195, 73, 0.1); }
body.ov #events-screen.ov-events .bg-primary-container { background-color: #c5a12a; }

/* Borders */
body.ov #events-screen.ov-events .border { border-width: 1px; border-style: solid; border-color: transparent; }
body.ov #events-screen.ov-events .border-l { border-left: 1px solid transparent; }
body.ov #events-screen.ov-events .border-b { border-bottom: 1px solid transparent; }
body.ov #events-screen.ov-events .border-t { border-top: 1px solid transparent; }
body.ov #events-screen.ov-events .border-primary\/30 { border-color: rgba(233, 195, 73, 0.3); }
body.ov #events-screen.ov-events .border-outline-variant\/10 { border-color: rgba(78, 70, 57, 0.1); }
body.ov #events-screen.ov-events .border-outline-variant\/15 { border-color: rgba(78, 70, 57, 0.15); }
body.ov #events-screen.ov-events .border-outline-variant\/20 { border-color: rgba(78, 70, 57, 0.2); }
body.ov #events-screen.ov-events .border-outline-variant\/30 { border-color: rgba(78, 70, 57, 0.3); }
body.ov #events-screen.ov-events .rounded { border-radius: 0.125rem; }
body.ov #events-screen.ov-events .rounded-lg { border-radius: 0.25rem; }
body.ov #events-screen.ov-events .rounded-xl { border-radius: 0.5rem; }
body.ov #events-screen.ov-events .rounded-full { border-radius: 9999px; }

/* Typography */
body.ov #events-screen.ov-events .text-\[10px\] { font-size: 10px; }
body.ov #events-screen.ov-events .text-\[11px\] { font-size: 11px; }
body.ov #events-screen.ov-events .text-\[64px\] { font-size: 64px; line-height: 1; }
body.ov #events-screen.ov-events .text-xs { font-size: 0.75rem; line-height: 1rem; }
body.ov #events-screen.ov-events .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
body.ov #events-screen.ov-events .text-base { font-size: 1rem; line-height: 1.5rem; }
body.ov #events-screen.ov-events .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
body.ov #events-screen.ov-events .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
body.ov #events-screen.ov-events .text-2xl { font-size: 1.5rem; line-height: 2rem; }
body.ov #events-screen.ov-events .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
body.ov #events-screen.ov-events .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
body.ov #events-screen.ov-events .text-5xl { font-size: 3rem; line-height: 1; }
body.ov #events-screen.ov-events .font-bold { font-weight: 700; }
body.ov #events-screen.ov-events .font-medium { font-weight: 500; }
body.ov #events-screen.ov-events .italic { font-style: italic; }
body.ov #events-screen.ov-events .uppercase { text-transform: uppercase; }
body.ov #events-screen.ov-events .tracking-tight { letter-spacing: -0.01em; }
body.ov #events-screen.ov-events .tracking-tighter { letter-spacing: -0.02em; }
body.ov #events-screen.ov-events .tracking-wider { letter-spacing: 0.05em; }
body.ov #events-screen.ov-events .tracking-widest { letter-spacing: 0.1em; }
body.ov #events-screen.ov-events .tracking-\[0\.16em\] { letter-spacing: 0.16em; }
body.ov #events-screen.ov-events .tracking-\[0\.2em\] { letter-spacing: 0.2em; }
body.ov #events-screen.ov-events .tracking-\[0\.3em\] { letter-spacing: 0.3em; }
body.ov #events-screen.ov-events .leading-tight { line-height: 1.1; }
body.ov #events-screen.ov-events .leading-relaxed { line-height: 1.625; }
body.ov #events-screen.ov-events .font-headline { font-family: 'Noto Serif', serif; }
body.ov #events-screen.ov-events .font-mono { font-family: 'JetBrains Mono', 'Menlo', monospace; }
body.ov #events-screen.ov-events .whitespace-nowrap { white-space: nowrap; }
body.ov #events-screen.ov-events .overflow-hidden { overflow: hidden; }
body.ov #events-screen.ov-events .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
body.ov #events-screen.ov-events .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); }
body.ov #events-screen.ov-events .cursor-pointer { cursor: pointer; }
body.ov #events-screen.ov-events .pointer-events-none { pointer-events: none; }
body.ov #events-screen.ov-events .opacity-5 { opacity: 0.05; }
body.ov #events-screen.ov-events .opacity-10 { opacity: 0.1; }
body.ov #events-screen.ov-events .opacity-20 { opacity: 0.2; }
body.ov #events-screen.ov-events .opacity-60 { opacity: 0.6; }
body.ov #events-screen.ov-events .opacity-80 { opacity: 0.8; }
body.ov #events-screen.ov-events .transition-all { transition: all 150ms cubic-bezier(.4,0,.2,1); }
body.ov #events-screen.ov-events .transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
body.ov #events-screen.ov-events .transition-transform { transition: transform 150ms ease; }
body.ov #events-screen.ov-events .transition-opacity { transition: opacity 150ms ease; }
body.ov #events-screen.ov-events .duration-300 { transition-duration: 300ms; }
body.ov #events-screen.ov-events .duration-500 { transition-duration: 500ms; }
body.ov #events-screen.ov-events .grayscale { filter: grayscale(1); }
body.ov #events-screen.ov-events .active\:opacity-80:active { opacity: 0.8; }
body.ov #events-screen.ov-events .group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
body.ov #events-screen.ov-events .group:hover .group-hover\:text-on-surface { color: #e5e2e1; }
body.ov #events-screen.ov-events .hover\:bg-surface-container-high:hover { background-color: #2a2a2a; }
body.ov #events-screen.ov-events .hover\:text-primary:hover { color: #e9c349; }

/* Design helpers */
body.ov #events-screen.ov-events .gold-gradient {
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%);
}
body.ov #events-screen.ov-events .glass-panel {
    background: rgba(53, 53, 52, 0.6);
    backdrop-filter: blur(20px);
}

/* Responsive breakpoints */
@media (min-width: 768px) {
    body.ov #events-screen.ov-events .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    body.ov #events-screen.ov-events .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    body.ov #events-screen.ov-events .md\:p-12 { padding: 3rem; }
    body.ov #events-screen.ov-events .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ov #events-screen.ov-events .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    body.ov #events-screen.ov-events .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    body.ov #events-screen.ov-events .md\:text-5xl { font-size: 3rem; line-height: 1; }
    body.ov #events-screen.ov-events .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    body.ov #events-screen.ov-events .md\:border-l { border-left: 1px solid transparent; }
    body.ov #events-screen.ov-events .md\:pl-6 { padding-left: 1.5rem; }
    body.ov #events-screen.ov-events .md\:p-4 { padding: 1rem; }
    body.ov #events-screen.ov-events .md\:gap-8 { gap: 2rem; }
    body.ov #events-screen.ov-events .md\:mb-12 { margin-bottom: 3rem; }
    body.ov #events-screen.ov-events .md\:mb-10 { margin-bottom: 2.5rem; }
}

/* ── Event-specific components ─────────────────────────────────── */

/* Active / Past tab buttons */
body.ov #events-screen.ov-events .ov-events-tab {
    padding: 0.625rem 2rem;
    border-radius: 0.125rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 300ms ease;
    color: #d1c5b4;
    cursor: pointer;
}
body.ov #events-screen.ov-events .ov-events-tab:hover { color: #e9c349; }
body.ov #events-screen.ov-events .ov-events-tab.is-active {
    background: #2a2a2a;
    color: #e9c349;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* State chip (Live Now / Scheduled / Completed / Cancelled) */
body.ov #events-screen.ov-events .ov-ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.125rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}
body.ov #events-screen.ov-events .ov-ev-chip-mini {
    padding: 0.125rem 0.5rem;
    font-size: 9px;
}
body.ov #events-screen.ov-events .chip-live {
    background: rgba(255, 180, 171, 0.15);
    color: #ffb4ab;
    border-color: rgba(255, 180, 171, 0.35);
}
body.ov #events-screen.ov-events .chip-scheduled {
    background: rgba(233, 195, 73, 0.15);
    color: #e9c349;
    border-color: rgba(233, 195, 73, 0.35);
}
body.ov #events-screen.ov-events .chip-completed {
    background: #0e0e0e;
    color: #d1c5b4;
    border-color: rgba(78, 70, 57, 0.3);
}
body.ov #events-screen.ov-events .chip-cancelled {
    background: #1c1b1b;
    color: #9a8f80;
    border-color: rgba(78, 70, 57, 0.3);
    text-decoration: line-through;
}
body.ov #events-screen.ov-events .ov-ev-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ov-ev-chip-pulse 1.4s ease-in-out infinite;
}
@keyframes ov-ev-chip-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
    50%      { opacity: 0.5; box-shadow: 0 0 0 4px rgba(255, 180, 171, 0); }
}

/* Hero card */
body.ov #events-screen.ov-events .ov-ev-hero {
    /* Default bg override-able by state modifiers below. */
}
body.ov #events-screen.ov-events .ov-ev-hero-live {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1px rgba(255, 180, 171, 0.25);
}
body.ov #events-screen.ov-events .ov-ev-hero-scheduled {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1px rgba(233, 195, 73, 0.25);
}
body.ov #events-screen.ov-events .ov-ev-hero-completed {
    background: #1c1b1b;
}
body.ov #events-screen.ov-events .ov-ev-hero-completed .ov-ev-hero-icon {
    filter: grayscale(1);
}

/* The giant game-type icon bleeding from the hero corner */
body.ov #events-screen.ov-events .ov-ev-hero-icon {
    font-family: 'Material Symbols Outlined';
    font-size: 180px !important;
    line-height: 1;
    color: #e9c349;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48 !important;
}

/* Archive-card icon (corner) */
body.ov #events-screen.ov-events .ov-ev-archive-icon {
    font-family: 'Material Symbols Outlined';
    font-size: 120px !important;
    line-height: 1;
    color: #d1c5b4;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48 !important;
}

/* Standings panel */
body.ov #events-screen.ov-events .ov-ev-standings {
    min-height: 220px;
}


/* ══════════════════════════════════════════════════════════════════
   PROFILE SCREEN (ov-profile) — Obsidian Vault port of
   Profile_Page/code.html. Scoped to #profile-screen AND
   #player-profile-screen so the "view someone else's profile" flow
   shares the same styling.
   ══════════════════════════════════════════════════════════════════ */

body.ov #profile-screen.ov-profile,
body.ov #player-profile-screen.ov-profile {
    background: #131313;
    color: #e5e2e1;
    font-family: var(--font-body);
    padding: 0;
    margin: 0;
}
body.ov #profile-screen.ov-profile,
body.ov #profile-screen.ov-profile *,
body.ov #player-profile-screen.ov-profile,
body.ov #player-profile-screen.ov-profile * {
    box-sizing: border-box;
}
body.ov #profile-screen.ov-profile.screen,
body.ov #player-profile-screen.ov-profile.screen {
    padding: 0 !important;
}
body.ov #profile-screen.ov-profile button,
body.ov #player-profile-screen.ov-profile button {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
body.ov #profile-screen.ov-profile ul,
body.ov #profile-screen.ov-profile ol,
body.ov #player-profile-screen.ov-profile ul,
body.ov #player-profile-screen.ov-profile ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.ov #profile-screen.ov-profile h1,
body.ov #profile-screen.ov-profile h2,
body.ov #profile-screen.ov-profile h3,
body.ov #profile-screen.ov-profile h4,
body.ov #profile-screen.ov-profile h5,
body.ov #player-profile-screen.ov-profile h1,
body.ov #player-profile-screen.ov-profile h2,
body.ov #player-profile-screen.ov-profile h3,
body.ov #player-profile-screen.ov-profile h4,
body.ov #player-profile-screen.ov-profile h5 {
    margin: 0;
    font-weight: inherit;
}
body.ov #profile-screen.ov-profile input,
body.ov #player-profile-screen.ov-profile input {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    outline: none;
}

/* Shared utilities — the same set as the other OV screens. We spell
   both screen ids in the selector so a single rule covers both. */
body.ov .ov-profile .max-w-7xl { max-width: 80rem; }
body.ov .ov-profile .mx-auto { margin-left: auto; margin-right: auto; }

body.ov .ov-profile .px-4  { padding-left: 1rem;    padding-right: 1rem; }
body.ov .ov-profile .px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
body.ov .ov-profile .px-6  { padding-left: 1.5rem;  padding-right: 1.5rem; }
body.ov .ov-profile .px-8  { padding-left: 2rem;    padding-right: 2rem; }
body.ov .ov-profile .py-1  { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
body.ov .ov-profile .py-2  { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
body.ov .ov-profile .py-3  { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
body.ov .ov-profile .py-4  { padding-top: 1rem;     padding-bottom: 1rem; }
body.ov .ov-profile .py-5  { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
body.ov .ov-profile .py-6  { padding-top: 1.5rem;   padding-bottom: 1.5rem; }
body.ov .ov-profile .py-8  { padding-top: 2rem;     padding-bottom: 2rem; }
body.ov .ov-profile .py-12 { padding-top: 3rem;     padding-bottom: 3rem; }
body.ov .ov-profile .py-20 { padding-top: 5rem;     padding-bottom: 5rem; }
body.ov .ov-profile .pt-6  { padding-top: 1.5rem; }
body.ov .ov-profile .pt-12 { padding-top: 3rem; }
body.ov .ov-profile .pb-2  { padding-bottom: 0.5rem; }
body.ov .ov-profile .pb-20 { padding-bottom: 5rem; }
body.ov .ov-profile .pb-32 { padding-bottom: 8rem; }
body.ov .ov-profile .p-1   { padding: 0.25rem; }
body.ov .ov-profile .p-3   { padding: 0.75rem; }
body.ov .ov-profile .p-4   { padding: 1rem; }
body.ov .ov-profile .p-6   { padding: 1.5rem; }
body.ov .ov-profile .p-8   { padding: 2rem; }

body.ov .ov-profile .mt-1   { margin-top: 0.25rem; }
body.ov .ov-profile .mt-2   { margin-top: 0.5rem; }
body.ov .ov-profile .mt-6   { margin-top: 1.5rem; }
body.ov .ov-profile .mt-8   { margin-top: 2rem; }
body.ov .ov-profile .mt-12  { margin-top: 3rem; }
body.ov .ov-profile .mb-1   { margin-bottom: 0.25rem; }
body.ov .ov-profile .mb-2   { margin-bottom: 0.5rem; }
body.ov .ov-profile .mb-3   { margin-bottom: 0.75rem; }
body.ov .ov-profile .mb-4   { margin-bottom: 1rem; }
body.ov .ov-profile .mb-6   { margin-bottom: 1.5rem; }
body.ov .ov-profile .mb-8   { margin-bottom: 2rem; }
body.ov .ov-profile .mb-12  { margin-bottom: 3rem; }
body.ov .ov-profile .ml-2   { margin-left: 0.5rem; }
body.ov .ov-profile .-mr-16 { margin-right: -4rem; }
body.ov .ov-profile .-mt-16 { margin-top: -4rem; }

body.ov .ov-profile .gap-2  { gap: 0.5rem; }
body.ov .ov-profile .gap-3  { gap: 0.75rem; }
body.ov .ov-profile .gap-4  { gap: 1rem; }
body.ov .ov-profile .gap-6  { gap: 1.5rem; }
body.ov .ov-profile .gap-8  { gap: 2rem; }
body.ov .ov-profile .gap-12 { gap: 3rem; }
body.ov .ov-profile .space-y-2 > * + * { margin-top: 0.5rem; }
body.ov .ov-profile .space-y-4 > * + * { margin-top: 1rem; }
body.ov .ov-profile .space-y-6 > * + * { margin-top: 1.5rem; }
body.ov .ov-profile .space-y-8 > * + * { margin-top: 2rem; }
body.ov .ov-profile .space-y-10 > * + * { margin-top: 2.5rem; }
body.ov .ov-profile .space-y-12 > * + * { margin-top: 3rem; }

body.ov .ov-profile .w-7    { width: 1.75rem; }
body.ov .ov-profile .w-9    { width: 2.25rem; }
body.ov .ov-profile .w-10   { width: 2.5rem; }
body.ov .ov-profile .w-11   { width: 2.75rem; }
body.ov .ov-profile .w-24   { width: 6rem; }
body.ov .ov-profile .w-32   { width: 8rem; }
body.ov .ov-profile .w-full { width: 100%; }
body.ov .ov-profile .h-1    { height: 0.25rem; }
body.ov .ov-profile .h-2    { height: 0.5rem; }
body.ov .ov-profile .h-6    { height: 1.5rem; }
body.ov .ov-profile .h-7    { height: 1.75rem; }
body.ov .ov-profile .h-9    { height: 2.25rem; }
body.ov .ov-profile .h-10   { height: 2.5rem; }
body.ov .ov-profile .h-24   { height: 6rem; }
body.ov .ov-profile .h-32   { height: 8rem; }
body.ov .ov-profile .h-full { height: 100%; }
body.ov .ov-profile .min-h-\[140px\] { min-height: 140px; }
body.ov .ov-profile .min-h-\[160px\] { min-height: 160px; }
body.ov .ov-profile .min-w-\[220px\] { min-width: 220px; }

body.ov .ov-profile .block  { display: block; }
body.ov .ov-profile .inline-block { display: inline-block; }
body.ov .ov-profile .inline-flex { display: inline-flex; }
body.ov .ov-profile .flex   { display: flex; }
body.ov .ov-profile .grid   { display: grid; }
body.ov .ov-profile .hidden { display: none; }
body.ov .ov-profile .flex-1 { flex: 1 1 0%; }
body.ov .ov-profile .flex-col { flex-direction: column; }
body.ov .ov-profile .flex-wrap { flex-wrap: wrap; }
body.ov .ov-profile .items-start    { align-items: flex-start; }
body.ov .ov-profile .items-center   { align-items: center; }
body.ov .ov-profile .items-end      { align-items: flex-end; }
body.ov .ov-profile .items-baseline { align-items: baseline; }
body.ov .ov-profile .justify-center { justify-content: center; }
body.ov .ov-profile .justify-between { justify-content: space-between; }

body.ov .ov-profile .grid-cols-1 { grid-template-columns: 1fr; }
body.ov .ov-profile .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

body.ov .ov-profile .relative { position: relative; }
body.ov .ov-profile .absolute { position: absolute; }
body.ov .ov-profile .top-0    { top: 0; }
body.ov .ov-profile .right-0  { right: 0; }
body.ov .ov-profile .-bottom-2 { bottom: -0.5rem; }
body.ov .ov-profile .-right-2  { right: -0.5rem; }
body.ov .ov-profile .left-0   { left: 0; }
body.ov .ov-profile .z-10     { z-index: 10; }

body.ov .ov-profile .text-left   { text-align: left; }
body.ov .ov-profile .text-center { text-align: center; }
body.ov .ov-profile .text-right  { text-align: right; }

body.ov .ov-profile .text-\[10px\]  { font-size: 10px; }
body.ov .ov-profile .text-\[96px\]  { font-size: 96px; line-height: 1; }
body.ov .ov-profile .text-\[144px\] { font-size: 144px; line-height: 1; }
body.ov .ov-profile .text-\[160px\] { font-size: 160px; line-height: 1; }
body.ov .ov-profile .text-xs   { font-size: 0.75rem; line-height: 1rem; }
body.ov .ov-profile .text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
body.ov .ov-profile .text-base { font-size: 1rem; line-height: 1.5rem; }
body.ov .ov-profile .text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
body.ov .ov-profile .text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
body.ov .ov-profile .text-2xl  { font-size: 1.5rem; line-height: 2rem; }
body.ov .ov-profile .text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
body.ov .ov-profile .text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
body.ov .ov-profile .text-5xl  { font-size: 3rem; line-height: 1; }

body.ov .ov-profile .font-bold   { font-weight: 700; }
body.ov .ov-profile .font-medium { font-weight: 500; }
body.ov .ov-profile .italic      { font-style: italic; }
body.ov .ov-profile .uppercase   { text-transform: uppercase; }
body.ov .ov-profile .tracking-tight    { letter-spacing: -0.01em; }
body.ov .ov-profile .tracking-tighter  { letter-spacing: -0.02em; }
body.ov .ov-profile .tracking-wider    { letter-spacing: 0.05em; }
body.ov .ov-profile .tracking-widest   { letter-spacing: 0.1em; }
body.ov .ov-profile .tracking-\[0\.1em\]  { letter-spacing: 0.1em; }
body.ov .ov-profile .tracking-\[0\.15em\] { letter-spacing: 0.15em; }
body.ov .ov-profile .tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
body.ov .ov-profile .tracking-\[0\.3em\]  { letter-spacing: 0.3em; }
body.ov .ov-profile .font-headline { font-family: 'Noto Serif', serif; }

body.ov .ov-profile .text-primary           { color: #f2ca50; }
body.ov .ov-profile .text-on-primary        { color: #3c2f00; }
body.ov .ov-profile .text-on-surface        { color: #e5e2e1; }
body.ov .ov-profile .text-on-surface-variant { color: #d0c5af; }
body.ov .ov-profile .text-outline-variant   { color: #4d4635; }
body.ov .ov-profile .text-error             { color: #ffb4ab; }
body.ov .ov-profile .text-primary\/60       { color: rgba(242, 202, 80, 0.6); }

body.ov .ov-profile .bg-background                 { background: #131313; }
body.ov .ov-profile .bg-surface                    { background: #131313; }
body.ov .ov-profile .bg-surface-container          { background: #201f1f; }
body.ov .ov-profile .bg-surface-container-low      { background: #1c1b1b; }
body.ov .ov-profile .bg-surface-container-lowest  { background: #0e0e0e; }
body.ov .ov-profile .bg-surface-container-high   { background: #2a2a2a; }
body.ov .ov-profile .bg-surface-container-highest { background: #353534; }
body.ov .ov-profile .bg-surface-bright            { background: #3a3939; }
body.ov .ov-profile .bg-primary                   { background: #f2ca50; }
body.ov .ov-profile .bg-primary\/5                { background: rgba(242, 202, 80, 0.05); }
body.ov .ov-profile .bg-primary\/10               { background: rgba(242, 202, 80, 0.10); }
body.ov .ov-profile .bg-surface-container-high\/40 { background: rgba(42, 42, 42, 0.4); }
body.ov .ov-profile .bg-error-container\/20      { background: rgba(147, 0, 10, 0.2); }
body.ov .ov-profile .bg-error-container\/40      { background: rgba(147, 0, 10, 0.4); }

body.ov .ov-profile .border                       { border-width: 1px; border-style: solid; border-color: transparent; }
body.ov .ov-profile .border-l                     { border-left: 1px solid transparent; }
body.ov .ov-profile .border-l-4                   { border-left: 4px solid transparent; }
body.ov .ov-profile .border-t                     { border-top: 1px solid transparent; }
body.ov .ov-profile .border-primary               { border-color: #f2ca50; }
body.ov .ov-profile .border-primary-container     { border-color: #d4af37; }
body.ov .ov-profile .border-primary\/20           { border-color: rgba(242, 202, 80, 0.2); }
body.ov .ov-profile .border-primary\/40           { border-color: rgba(242, 202, 80, 0.4); }
body.ov .ov-profile .border-outline-variant\/10  { border-color: rgba(77, 70, 53, 0.1); }
body.ov .ov-profile .border-outline-variant\/20  { border-color: rgba(77, 70, 53, 0.2); }
body.ov .ov-profile .border-outline-variant\/30  { border-color: rgba(77, 70, 53, 0.3); }
body.ov .ov-profile .border-error\/20            { border-color: rgba(255, 180, 171, 0.2); }
body.ov .ov-profile .border-surface               { border-color: #131313; }

body.ov .ov-profile .rounded        { border-radius: 0.125rem; }
body.ov .ov-profile .rounded-sm     { border-radius: 0.125rem; }
body.ov .ov-profile .rounded-lg     { border-radius: 0.25rem; }
body.ov .ov-profile .rounded-full   { border-radius: 9999px; }

body.ov .ov-profile .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); }
body.ov .ov-profile .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }

body.ov .ov-profile .opacity-5      { opacity: 0.05; }
body.ov .ov-profile .opacity-40     { opacity: 0.4; }
body.ov .ov-profile .overflow-hidden { overflow: hidden; }
body.ov .ov-profile .cursor-pointer  { cursor: pointer; }
body.ov .ov-profile .pointer-events-none { pointer-events: none; }
body.ov .ov-profile .grayscale  { filter: grayscale(1); }
body.ov .ov-profile .blur-3xl   { filter: blur(64px); }
body.ov .ov-profile .transition-all    { transition: all 150ms cubic-bezier(.4,0,.2,1); }
body.ov .ov-profile .transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
body.ov .ov-profile .transition-opacity { transition: opacity 150ms ease; }
body.ov .ov-profile .hover\:opacity-90:hover        { opacity: 0.9; }
body.ov .ov-profile .hover\:bg-surface-bright:hover { background: #3a3939; }
body.ov .ov-profile .hover\:bg-surface-container-high:hover { background: #2a2a2a; }
body.ov .ov-profile .hover\:text-on-surface:hover { color: #e5e2e1; }
body.ov .ov-profile .focus\:border-primary:focus  { border-color: #f2ca50; }
body.ov .ov-profile .outline-none { outline: none; }

body.ov .ov-profile .gold-gradient {
    background: linear-gradient(45deg, #f2ca50 0%, #d4af37 100%);
}
body.ov .ov-profile .glass-panel {
    background: rgba(32, 31, 31, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Breakpoints */
@media (min-width: 768px) {
    body.ov .ov-profile .md\:flex-row     { flex-direction: row; }
    body.ov .ov-profile .md\:items-center { align-items: center; }
    body.ov .ov-profile .md\:text-right   { text-align: right; }
    body.ov .ov-profile .md\:px-6         { padding-left: 1.5rem; padding-right: 1.5rem; }
    body.ov .ov-profile .md\:pt-12        { padding-top: 3rem; }
    body.ov .ov-profile .md\:pb-32        { padding-bottom: 8rem; }
    body.ov .ov-profile .md\:p-8          { padding: 2rem; }
    body.ov .ov-profile .md\:mt-12        { margin-top: 3rem; }
    body.ov .ov-profile .md\:mb-4         { margin-bottom: 1rem; }
    body.ov .ov-profile .md\:mb-8         { margin-bottom: 2rem; }
    body.ov .ov-profile .md\:mb-10        { margin-bottom: 2.5rem; }
    body.ov .ov-profile .md\:mb-12        { margin-bottom: 3rem; }
    body.ov .ov-profile .md\:gap-4        { gap: 1rem; }
    body.ov .ov-profile .md\:gap-6        { gap: 1.5rem; }
    body.ov .ov-profile .md\:gap-8        { gap: 2rem; }
    body.ov .ov-profile .md\:gap-12       { gap: 3rem; }
    body.ov .ov-profile .md\:space-y-8 > * + *  { margin-top: 2rem; }
    body.ov .ov-profile .md\:space-y-10 > * + * { margin-top: 2.5rem; }
    body.ov .ov-profile .md\:space-y-12 > * + * { margin-top: 3rem; }
    body.ov .ov-profile .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ov .ov-profile .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.ov .ov-profile .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.ov .ov-profile .md\:min-h-\[160px\] { min-height: 160px; }
    body.ov .ov-profile .md\:w-32         { width: 8rem; }
    body.ov .ov-profile .md\:h-32         { height: 8rem; }
    body.ov .ov-profile .md\:p-12         { padding: 3rem; }
    body.ov .ov-profile .md\:pt-12        { padding-top: 3rem; }
    body.ov .ov-profile .md\:py-4         { padding-top: 1rem; padding-bottom: 1rem; }
    body.ov .ov-profile .md\:py-8         { padding-top: 2rem; padding-bottom: 2rem; }
    body.ov .ov-profile .md\:py-12        { padding-top: 3rem; padding-bottom: 3rem; }
    body.ov .ov-profile .md\:text-2xl     { font-size: 1.5rem; line-height: 2rem; }
    body.ov .ov-profile .md\:text-3xl     { font-size: 1.875rem; line-height: 2.25rem; }
    body.ov .ov-profile .md\:text-4xl     { font-size: 2.25rem; line-height: 2.5rem; }
    body.ov .ov-profile .md\:text-5xl     { font-size: 3rem; line-height: 1; }
    body.ov .ov-profile .md\:text-sm      { font-size: 0.875rem; line-height: 1.25rem; }
    body.ov .ov-profile .md\:text-xs      { font-size: 0.75rem; line-height: 1rem; }
    body.ov .ov-profile .md\:text-\[144px\] { font-size: 144px; line-height: 1; }
}

@media (min-width: 1024px) {
    body.ov .ov-profile .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ov .ov-profile .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.ov .ov-profile .lg\:col-span-1  { grid-column: span 1 / span 1; }
    body.ov .ov-profile .lg\:col-span-2  { grid-column: span 2 / span 2; }
}

/* ── Profile-specific components ─────────────────────────────── */

/* Avatar camera-edit pill (only on own profile) */
body.ov #profile-screen.ov-profile .ov-prof-avatar-edit {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 2rem;
    height: 2rem;
    background: #f2ca50;
    color: #3c2f00;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 2px solid #131313;
    transition: transform 150ms ease;
}
body.ov #profile-screen.ov-profile .ov-prof-avatar-edit:hover { transform: scale(1.05); }

/* Toggle switch for settings (matches the reference design's 44×24 pill) */
body.ov .ov-profile .ov-prof-switch {
    position: relative;
    display: inline-flex;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
}
body.ov .ov-profile .ov-prof-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 2;
}
body.ov .ov-profile .ov-prof-switch-slider {
    position: absolute;
    inset: 0;
    background: #353534;
    border-radius: 9999px;
    transition: background 200ms ease;
}
body.ov .ov-profile .ov-prof-switch-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background: #fff;
    border-radius: 9999px;
    transition: transform 200ms ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
body.ov .ov-profile .ov-prof-switch input:checked ~ .ov-prof-switch-slider {
    background: #f2ca50;
}
body.ov .ov-profile .ov-prof-switch input:checked ~ .ov-prof-switch-slider::after {
    transform: translateX(1.25rem);
}

/* Chronicles tabs */
body.ov .ov-profile .ov-prof-chron-tab {
    color: #8a8680;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.5rem;
    transition: color 150ms ease, border-color 150ms ease;
}
body.ov .ov-profile .ov-prof-chron-tab:hover { color: #e5e2e1; }
body.ov .ov-profile .ov-prof-chron-tab.is-active,
body.ov .ov-profile .ov-prof-chron-tab.active {
    color: #f2ca50;
    border-bottom-color: #f2ca50;
}

/* Color swatch in settings (gamer-tag / accent strip) */
body.ov .ov-profile .color-swatch {
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    transition: transform 150ms ease;
}
body.ov .ov-profile .color-swatch:hover { transform: scale(1.1); }
body.ov .ov-profile .color-swatch.selected {
    border-color: #f2ca50;
    box-shadow: 0 0 0 2px rgba(242, 202, 80, 0.2);
}

/* Progression body (Chronicles content area) — legacy .pp-* rows
   from profile.js get restyled to fit the Obsidian tone. */
body.ov #profile-screen.ov-profile #profile-prog-body .pp-row,
body.ov #profile-screen.ov-profile #profile-prog-body .pp-item,
body.ov #profile-screen.ov-profile #profile-prog-body .tl-row {
    background: #1c1b1b;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: background 150ms ease;
}
body.ov #profile-screen.ov-profile #profile-prog-body .pp-row:hover,
body.ov #profile-screen.ov-profile #profile-prog-body .pp-item:hover,
body.ov #profile-screen.ov-profile #profile-prog-body .tl-row:hover {
    background: #2a2a2a;
}

/* Achievement tile — restyled for OV grid. Legacy grid classes that
   profile.js writes (.ach-card / .ach-locked) remap to match the
   reference: small gold-accent tile for unlocked, grayscale + lock
   icon for locked. */
body.ov .ov-profile #profile-achievements-container .ach-card,
body.ov .ov-profile #player-achievements-container .ach-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #201f1f;
    border: 1px solid rgba(242, 202, 80, 0.2);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}
body.ov .ov-profile #profile-achievements-container .ach-card:hover,
body.ov .ov-profile #player-achievements-container .ach-card:hover {
    border-color: rgba(242, 202, 80, 0.5);
}
body.ov .ov-profile #profile-achievements-container .ach-card.locked,
body.ov .ov-profile #profile-achievements-container .ach-locked,
body.ov .ov-profile #player-achievements-container .ach-card.locked,
body.ov .ov-profile #player-achievements-container .ach-locked {
    background: #2a2a2a;
    border-color: transparent;
    filter: grayscale(1);
    opacity: 0.4;
}
body.ov .ov-profile #profile-achievements-container .ach-card .ach-icon,
body.ov .ov-profile #player-achievements-container .ach-card .ach-icon {
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    color: #f2ca50;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body.ov .ov-profile #profile-achievements-container .ach-card .ach-name,
body.ov .ov-profile #player-achievements-container .ach-card .ach-name {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e5e2e1;
}

/* Stat cards fallback — when renderStatsCards() writes the legacy
   markup into #profile-stats-container it still looks OK because we
   rendered the top-3 spotlight above anyway. Keep it hidden on OV. */
body.ov #profile-screen.ov-profile #profile-stats-container { display: none; }
body.ov #player-profile-screen.ov-profile #player-stats-container { display: none; }


/* ══════════════════════════════════════════════════════════════════
   LEADERBOARD SCREEN (ov-leaderboard)
   Podium reuses the Home utilities (.leaderboard-podium-grid etc.).
   We only add the screen scaffolding + category tabs + the full list
   rows below the podium. Scoped to #leaderboard-screen.ov-leaderboard
   ══════════════════════════════════════════════════════════════════ */

body.ov #leaderboard-screen.ov-leaderboard {
    background: #131313;
    color: #e5e2e1;
    font-family: var(--font-body);
    padding: 0;
    margin: 0;
}
body.ov #leaderboard-screen.ov-leaderboard,
body.ov #leaderboard-screen.ov-leaderboard * { box-sizing: border-box; }
body.ov #leaderboard-screen.ov-leaderboard.screen { padding: 0 !important; }
body.ov #leaderboard-screen.ov-leaderboard button {
    background: transparent; border: 0; padding: 0;
    color: inherit; font: inherit; cursor: pointer;
}
body.ov #leaderboard-screen.ov-leaderboard input {
    font: inherit; color: inherit; background: transparent; border: 0; outline: none;
}
body.ov #leaderboard-screen.ov-leaderboard h1,
body.ov #leaderboard-screen.ov-leaderboard h2 { margin: 0; font-weight: inherit; }

/* Utilities (subset — only what the screen HTML uses) */
body.ov .ov-leaderboard .max-w-7xl { max-width: 80rem; }
body.ov .ov-leaderboard .max-w-md  { max-width: 28rem; }
body.ov .ov-leaderboard .mx-auto   { margin-left: auto; margin-right: auto; }
body.ov .ov-leaderboard .px-4      { padding-left: 1rem; padding-right: 1rem; }
body.ov .ov-leaderboard .py-2      { padding-top: 0.5rem; padding-bottom: 0.5rem; }
body.ov .ov-leaderboard .py-3      { padding-top: 0.75rem; padding-bottom: 0.75rem; }
body.ov .ov-leaderboard .py-6      { padding-top: 1.5rem; padding-bottom: 1.5rem; }
body.ov .ov-leaderboard .py-8      { padding-top: 2rem; padding-bottom: 2rem; }
body.ov .ov-leaderboard .py-12     { padding-top: 3rem; padding-bottom: 3rem; }
body.ov .ov-leaderboard .pl-12     { padding-left: 3rem; }
body.ov .ov-leaderboard .pr-4      { padding-right: 1rem; }
body.ov .ov-leaderboard .mb-1      { margin-bottom: 0.25rem; }
body.ov .ov-leaderboard .mb-6      { margin-bottom: 1.5rem; }
body.ov .ov-leaderboard .mb-8      { margin-bottom: 2rem; }
body.ov .ov-leaderboard .mt-2      { margin-top: 0.5rem; }
body.ov .ov-leaderboard .gap-2     { gap: 0.5rem; }
body.ov .ov-leaderboard .gap-4     { gap: 1rem; }
body.ov .ov-leaderboard .flex      { display: flex; }
body.ov .ov-leaderboard .flex-col  { flex-direction: column; }
body.ov .ov-leaderboard .items-center { align-items: center; }
body.ov .ov-leaderboard .justify-between { justify-content: space-between; }
body.ov .ov-leaderboard .block     { display: block; }
body.ov .ov-leaderboard .hidden    { display: none; }
body.ov .ov-leaderboard .w-full    { width: 100%; }
body.ov .ov-leaderboard .overflow-x-auto { overflow-x: auto; }
body.ov .ov-leaderboard .relative  { position: relative; }
body.ov .ov-leaderboard .absolute  { position: absolute; }
body.ov .ov-leaderboard .top-1\/2 { top: 50%; }
body.ov .ov-leaderboard .left-4    { left: 1rem; }
body.ov .ov-leaderboard .-translate-y-1\/2 { transform: translateY(-50%); }
body.ov .ov-leaderboard .text-left  { text-align: left; }
body.ov .ov-leaderboard .text-right { text-align: right; }
body.ov .ov-leaderboard .text-center { text-align: center; }
body.ov .ov-leaderboard .text-xs    { font-size: 0.75rem; line-height: 1rem; }
body.ov .ov-leaderboard .text-sm    { font-size: 0.875rem; line-height: 1.25rem; }
body.ov .ov-leaderboard .text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }
body.ov .ov-leaderboard .font-bold  { font-weight: 700; }
body.ov .ov-leaderboard .uppercase  { text-transform: uppercase; }
body.ov .ov-leaderboard .italic     { font-style: italic; }
body.ov .ov-leaderboard .tracking-tight  { letter-spacing: -0.01em; }
body.ov .ov-leaderboard .tracking-widest { letter-spacing: 0.1em; }
body.ov .ov-leaderboard .tracking-\[0\.3em\] { letter-spacing: 0.3em; }
body.ov .ov-leaderboard .font-headline   { font-family: 'Noto Serif', serif; }
body.ov .ov-leaderboard .text-primary    { color: #e9c349; }
body.ov .ov-leaderboard .text-on-surface { color: #e5e2e1; }
body.ov .ov-leaderboard .text-on-surface-variant { color: #d1c5b4; }
body.ov .ov-leaderboard .text-outline-variant    { color: #4e4639; }
body.ov .ov-leaderboard .bg-surface-container-lowest { background: #0e0e0e; }
body.ov .ov-leaderboard .border-outline-variant\/20 { border-color: rgba(78, 70, 57, 0.2); }
body.ov .ov-leaderboard .border  { border-width: 1px; border-style: solid; border-color: transparent; }
body.ov .ov-leaderboard .rounded-lg { border-radius: 0.25rem; }
body.ov .ov-leaderboard .focus\:border-primary:focus { border-color: #e9c349; }
body.ov .ov-leaderboard .outline-none { outline: none; }
body.ov .ov-leaderboard .transition-all { transition: all 150ms cubic-bezier(.4,0,.2,1); }
body.ov .ov-leaderboard .no-scrollbar::-webkit-scrollbar { display: none; }
body.ov .ov-leaderboard .no-scrollbar { scrollbar-width: none; }

@media (min-width: 768px) {
    body.ov .ov-leaderboard .md\:px-8     { padding-left: 2rem; padding-right: 2rem; }
    body.ov .ov-leaderboard .md\:py-10    { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    body.ov .ov-leaderboard .md\:mb-10    { margin-bottom: 2.5rem; }
    body.ov .ov-leaderboard .md\:mb-12    { margin-bottom: 3rem; }
    body.ov .ov-leaderboard .md\:flex-row { flex-direction: row; }
    body.ov .ov-leaderboard .md\:items-center { align-items: center; }
    body.ov .ov-leaderboard .md\:text-5xl { font-size: 3rem; line-height: 1; }
    body.ov .ov-leaderboard .md\:inline   { display: inline; }
}

/* Category tabs */
body.ov .ov-leaderboard .ov-lb-tab {
    padding: 0.625rem 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: #d1c5b4;
    border: 1px solid rgba(78, 70, 57, 0.2);
    transition: all 150ms ease;
    white-space: nowrap;
    cursor: pointer;
}
body.ov .ov-leaderboard .ov-lb-tab:hover { color: #e5e2e1; border-color: rgba(233, 195, 73, 0.3); }
body.ov .ov-leaderboard .ov-lb-tab.is-active,
body.ov .ov-leaderboard .ov-lb-tab.active {
    color: #3c2f00;
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%);
    border-color: transparent;
}

/* Column header strip */
body.ov .ov-leaderboard .ov-lb-colhead {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #d1c5b4;
    font-weight: 700;
    border-top: 1px solid rgba(78, 70, 57, 0.15);
    border-bottom: 1px solid rgba(78, 70, 57, 0.15);
}
@media (min-width: 768px) {
    body.ov .ov-leaderboard .ov-lb-colhead {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }
}

/* Re-skin the legacy .lb-row markup loadLeaderboard() emits into our
   new visual tone. loadLeaderboard doesn't know about OV so we just
   style whatever it outputs. */
body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(78, 70, 57, 0.08);
    cursor: pointer;
    transition: background 150ms ease;
}
body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row:hover {
    background: rgba(233, 195, 73, 0.04);
}
@media (min-width: 768px) {
    body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row {
        grid-template-columns: 40px 2fr 1fr 1fr 1fr;
    }
}
body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row .lb-rank {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    color: #e9c349;
    text-align: center;
}
body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row .lb-name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.875rem;
    color: #e5e2e1;
    letter-spacing: 0.05em;
}
body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row .lb-amount,
body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row .lb-balance,
body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row .lb-score {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #e9c349;
    text-align: right;
}
body.ov #leaderboard-screen.ov-leaderboard #leaderboard-list .lb-row .lb-meta {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #d1c5b4;
    text-align: right;
}


/* ══════════════════════════════════════════════════════════════════
   CHAT SCREEN (ov-chat)
   ══════════════════════════════════════════════════════════════════ */

body.ov #chat-panel-content.ov-chat {
    background: #131313;
    color: #e5e2e1;
    font-family: var(--font-body);
    padding: 0;
    margin: 0;
}
body.ov #chat-panel-content.ov-chat,
body.ov #chat-panel-content.ov-chat * { box-sizing: border-box; }
body.ov #chat-panel-content.ov-chat.screen { padding: 0 !important; }
body.ov #chat-panel-content.ov-chat button {
    background: transparent; border: 0; padding: 0;
    color: inherit; font: inherit; cursor: pointer;
}
body.ov #chat-panel-content.ov-chat input {
    font: inherit; color: inherit; background: transparent; border: 0; outline: none;
}
body.ov #chat-panel-content.ov-chat h1,
body.ov #chat-panel-content.ov-chat h3 { margin: 0; font-weight: inherit; }

/* Utilities */
body.ov .ov-chat .max-w-4xl   { max-width: 56rem; }
body.ov .ov-chat .mx-auto     { margin-left: auto; margin-right: auto; }
body.ov .ov-chat .px-1        { padding-left: 0.25rem; padding-right: 0.25rem; }
body.ov .ov-chat .px-3        { padding-left: 0.75rem; padding-right: 0.75rem; }
body.ov .ov-chat .px-4        { padding-left: 1rem; padding-right: 1rem; }
body.ov .ov-chat .py-2        { padding-top: 0.5rem; padding-bottom: 0.5rem; }
body.ov .ov-chat .py-3        { padding-top: 0.75rem; padding-bottom: 0.75rem; }
body.ov .ov-chat .py-4        { padding-top: 1rem; padding-bottom: 1rem; }
body.ov .ov-chat .py-12       { padding-top: 3rem; padding-bottom: 3rem; }
body.ov .ov-chat .pt-2        { padding-top: 0.5rem; }
body.ov .ov-chat .pt-4        { padding-top: 1rem; }
body.ov .ov-chat .pb-4        { padding-bottom: 1rem; }
body.ov .ov-chat .pb-24       { padding-bottom: 6rem; }
body.ov .ov-chat .pb-32       { padding-bottom: 8rem; }
body.ov .ov-chat .mb-3        { margin-bottom: 0.75rem; }
body.ov .ov-chat .mb-4        { margin-bottom: 1rem; }
body.ov .ov-chat .mt-2        { margin-top: 0.5rem; }
body.ov .ov-chat .mt-3        { margin-top: 0.75rem; }
body.ov .ov-chat .p-3         { padding: 0.75rem; }
body.ov .ov-chat .p-4         { padding: 1rem; }
body.ov .ov-chat .gap-2       { gap: 0.5rem; }
body.ov .ov-chat .gap-3       { gap: 0.75rem; }
body.ov .ov-chat .space-y-4 > * + * { margin-top: 1rem; }
body.ov .ov-chat .flex        { display: flex; }
body.ov .ov-chat .inline-flex { display: inline-flex; }
body.ov .ov-chat .grid        { display: grid; }
body.ov .ov-chat .hidden      { display: none; }
body.ov .ov-chat .flex-col    { flex-direction: column; }
body.ov .ov-chat .flex-wrap   { flex-wrap: wrap; }
body.ov .ov-chat .flex-1      { flex: 1 1 0%; }
body.ov .ov-chat .items-stretch { align-items: stretch; }
body.ov .ov-chat .items-center  { align-items: center; }
body.ov .ov-chat .justify-between { justify-content: space-between; }
body.ov .ov-chat .justify-center  { justify-content: center; }
body.ov .ov-chat .w-2         { width: 0.5rem; }
body.ov .ov-chat .w-10        { width: 2.5rem; }
body.ov .ov-chat .w-14        { width: 3.5rem; }
body.ov .ov-chat .w-16        { width: 4rem; }
body.ov .ov-chat .w-full      { width: 100%; }
body.ov .ov-chat .h-2         { height: 0.5rem; }
body.ov .ov-chat .h-10        { height: 2.5rem; }
body.ov .ov-chat .min-h-screen { min-height: 100vh; }
body.ov .ov-chat .sticky      { position: sticky; }
body.ov .ov-chat .bottom-0    { bottom: 0; }
body.ov .ov-chat .relative    { position: relative; }
body.ov .ov-chat .absolute    { position: absolute; }
body.ov .ov-chat .text-center { text-align: center; }
body.ov .ov-chat .text-[10px] { font-size: 10px; }
body.ov .ov-chat .text-[12px] { font-size: 12px; }
body.ov .ov-chat .text-xs     { font-size: 0.75rem; line-height: 1rem; }
body.ov .ov-chat .text-sm     { font-size: 0.875rem; line-height: 1.25rem; }
body.ov .ov-chat .text-2xl    { font-size: 1.5rem; line-height: 2rem; }
body.ov .ov-chat .text-3xl    { font-size: 1.875rem; line-height: 2.25rem; }
body.ov .ov-chat .font-bold   { font-weight: 700; }
body.ov .ov-chat .italic      { font-style: italic; }
body.ov .ov-chat .uppercase   { text-transform: uppercase; }
body.ov .ov-chat .tracking-tight  { letter-spacing: -0.01em; }
body.ov .ov-chat .tracking-widest { letter-spacing: 0.1em; }
body.ov .ov-chat .tracking-[0.3em] { letter-spacing: 0.3em; }
body.ov .ov-chat .font-headline  { font-family: 'Noto Serif', serif; }
body.ov .ov-chat .font-mono     { font-family: 'JetBrains Mono', Menlo, monospace; }
body.ov .ov-chat .text-primary  { color: #e9c349; }
body.ov .ov-chat .text-on-primary { color: #3c2f00; }
body.ov .ov-chat .text-on-surface { color: #e5e2e1; }
body.ov .ov-chat .text-on-surface-variant { color: #d1c5b4; }
body.ov .ov-chat .text-outline-variant { color: #4e4639; }
body.ov .ov-chat .text-error   { color: #ffb4ab; }
body.ov .ov-chat .text-green-500 { color: #22c55e; }
body.ov .ov-chat .bg-surface-container-low    { background: #1c1b1b; }
body.ov .ov-chat .bg-surface-container-lowest { background: #0e0e0e; }
body.ov .ov-chat .bg-green-500  { background: #22c55e; }
body.ov .ov-chat .bg-error-container\/30 { background: rgba(147, 0, 10, 0.3); }
body.ov .ov-chat .bg-\[\#131313\]\/95 { background: rgba(19, 19, 19, 0.95); backdrop-filter: blur(12px); }
body.ov .ov-chat .border-b      { border-bottom: 1px solid transparent; }
body.ov .ov-chat .border        { border: 1px solid transparent; }
body.ov .ov-chat .border-primary\/40 { border-color: rgba(233, 195, 73, 0.4); }
body.ov .ov-chat .border-primary\/50 { border-color: rgba(233, 195, 73, 0.5); }
body.ov .ov-chat .border-error\/30   { border-color: rgba(255, 180, 171, 0.3); }
body.ov .ov-chat .border-outline-variant\/10 { border-color: rgba(78, 70, 57, 0.1); }
body.ov .ov-chat .border-outline-variant\/15 { border-color: rgba(78, 70, 57, 0.15); }
body.ov .ov-chat .border-outline-variant\/20 { border-color: rgba(78, 70, 57, 0.2); }
body.ov .ov-chat .rounded-full  { border-radius: 9999px; }
body.ov .ov-chat .overflow-y-auto { overflow-y: auto; }
body.ov .ov-chat .no-scrollbar::-webkit-scrollbar { display: none; }
body.ov .ov-chat .no-scrollbar  { scrollbar-width: none; }
body.ov .ov-chat .focus-within\:border-primary\/50:focus-within { border-color: rgba(233, 195, 73, 0.5); }
body.ov .ov-chat .transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
body.ov .ov-chat .transition-opacity { transition: opacity 150ms ease; }
body.ov .ov-chat .hover\:opacity-90:hover   { opacity: 0.9; }
body.ov .ov-chat .active\:opacity-75:active { opacity: 0.75; }
body.ov .ov-chat .hover\:border-primary\/40:hover { border-color: rgba(233, 195, 73, 0.4); }
body.ov .ov-chat .placeholder\:text-outline-variant::placeholder { color: #4e4639; }
body.ov .ov-chat .placeholder\:uppercase::placeholder    { text-transform: uppercase; }
body.ov .ov-chat .placeholder\:tracking-widest::placeholder { letter-spacing: 0.1em; }
body.ov .ov-chat .animate-pulse {
    animation: ov-chat-pulse 1.6s ease-in-out infinite;
}
@keyframes ov-chat-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
body.ov .ov-chat .align-middle { vertical-align: middle; }
body.ov .ov-chat .opacity-75   { opacity: 0.75; }

/* Reference gold gradient */
body.ov .ov-chat .gold-gradient {
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%);
}

/* Custom chat switch (same as profile's but scoped) */
body.ov .ov-chat .ov-chat-switch {
    position: relative;
    display: inline-block;
    width: 40px; height: 22px;
    flex-shrink: 0;
}
body.ov .ov-chat .ov-chat-switch input {
    position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2;
    width: 100%; height: 100%;
}
body.ov .ov-chat .ov-chat-switch-slider {
    position: absolute; inset: 0;
    background: #353534;
    border-radius: 9999px;
    transition: background 200ms ease;
}
body.ov .ov-chat .ov-chat-switch-slider::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 9999px;
    transition: transform 200ms ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
body.ov .ov-chat .ov-chat-switch input:checked ~ .ov-chat-switch-slider { background: #e9c349; }
body.ov .ov-chat .ov-chat-switch input:checked ~ .ov-chat-switch-slider::after { transform: translateX(18px); }

/* ─── Message rendering ─────────────────────────────────────── */

/* Other players' message row (left side) */
body.ov .ov-chat .ov-chat-msg {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.75rem;
    padding: 0.25rem 0;
}
body.ov .ov-chat .ov-chat-msg.is-me {
    grid-template-columns: 1fr 36px;
}

body.ov .ov-chat .ov-chat-avatar {
    width: 36px; height: 36px;
    overflow: hidden;
    background: #201f1f;
    border: 1px solid rgba(78, 70, 57, 0.2);
    cursor: pointer;
    flex-shrink: 0;
    order: 0;
    display: flex; align-items: center; justify-content: center;
}
body.ov .ov-chat .ov-chat-msg.is-me .ov-chat-avatar { order: 2; }
body.ov .ov-chat .ov-chat-avatar-img { width: 100%; height: 100%; object-fit: cover; }
body.ov .ov-chat .ov-chat-avatar-fb {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Serif', serif;
    font-weight: 700; font-style: italic;
    font-size: 14px;
    color: #e9c349;
}

body.ov .ov-chat .ov-chat-body {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 0.25rem;
    order: 1;
}
body.ov .ov-chat .ov-chat-msg.is-me .ov-chat-body {
    align-items: flex-end;
}

body.ov .ov-chat .ov-chat-meta {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 11px;
    color: #9a8f80;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
body.ov .ov-chat .ov-chat-name {
    font-weight: 700;
    color: #e9c349;
    cursor: pointer;
}
body.ov .ov-chat .ov-chat-msg.is-me .ov-chat-name { color: #e9c349; cursor: default; }
body.ov .ov-chat .ov-chat-time { color: #e9c349; opacity: 0.75; font-family: 'JetBrains Mono', monospace; }
body.ov .ov-chat .ov-chat-verified {
    font-size: 14px !important;
    color: #e9c349;
}
body.ov .ov-chat .ov-chat-report {
    margin-left: auto;
    color: #4e4639;
    transition: color 150ms ease;
    cursor: pointer;
    display: inline-flex; align-items: center;
    padding: 2px;
}
body.ov .ov-chat .ov-chat-report:hover { color: #ffb4ab; }
body.ov .ov-chat .ov-chat-report .material-symbols-outlined { font-size: 14px !important; }

/* Bubble — gold for me, dark for them, gold-bordered for win-share.
   Side-stripes replaced with full 1px hairlines + tonal backgrounds
   (impeccable rule: no side-stripes as decorative accents). */
body.ov .ov-chat .ov-chat-bubble {
    /* PC users reported bubbles and text felt "too big"; mobile was
       fine (mobile-specific block lower overrides to 12.5px/0.72rem).
       Scale desktop down so a chat message looks like a chat message,
       not a game tile. */
    padding: 0.5rem 0.75rem;
    max-width: 32rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #e5e2e1;
    word-break: break-word;
    white-space: pre-wrap;
    background: #201f1f;
    border: 1px solid rgba(233, 195, 73, 0.18);
}
body.ov .ov-chat .ov-chat-msg.is-me .ov-chat-bubble {
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%);
    color: #3c2f00;
    font-weight: 700;
    border: 1px solid rgba(60, 47, 0, 0.4);
}
body.ov .ov-chat .ov-chat-msg.is-win .ov-chat-bubble {
    background: linear-gradient(135deg, rgba(233, 195, 73, 0.12), rgba(197, 161, 42, 0.06));
    border-left-color: #e9c349;
    border-left-width: 4px;
}
body.ov .ov-chat .ov-chat-verify-link {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #e9c349;
    font-weight: 700;
    margin-top: 0.25rem;
    cursor: pointer;
}
body.ov .ov-chat .ov-chat-verify-link:hover { text-decoration: underline; }

/* System message ("V_Ghost has entered the high-limit room") */
body.ov .ov-chat .ov-chat-sys {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
body.ov .ov-chat .ov-chat-sys-text {
    padding: 0.625rem 1rem;
    background: #0e0e0e;
    color: #e9c349;
    border: 1px solid rgba(233, 195, 73, 0.2);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    max-width: 90%;
}
/* Admin-authored system chip: brighter border + ADMIN tag so players
   can distinguish a moderator broadcast from an auto-generated event. */
body.ov .ov-chat .ov-chat-sys.is-admin .ov-chat-sys-text {
    border-color: #e9c349;
    background: #141208;
    box-shadow: 0 0 0 1px rgba(233, 195, 73, 0.1);
}
body.ov .ov-chat .ov-chat-sys-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #e9c349;
    color: #0a0a0a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    border-radius: 2px;
}

/* Active-users presence chips */
body.ov .ov-chat .ov-chat-presence-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    background: #0e0e0e;
    border: 1px solid rgba(78, 70, 57, 0.2);
    transition: border-color 150ms ease;
    cursor: pointer;
    max-width: 260px;
}
body.ov .ov-chat .ov-chat-presence-chip:hover { border-color: rgba(233, 195, 73, 0.4); }
body.ov .ov-chat .ov-chat-presence-chip .ov-chat-avatar {
    width: 24px; height: 24px;
    border-width: 0;
}
body.ov .ov-chat .ov-chat-presence-chip .ov-chat-avatar-fb { font-size: 11px; }
body.ov .ov-chat .ov-chat-presence-name {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: #d1c5b4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (min-width: 768px) {
    body.ov .ov-chat .md\:px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
    body.ov .ov-chat .md\:pt-6  { padding-top: 1.5rem; }
    body.ov .ov-chat .md\:pt-8  { padding-top: 2rem; }
    body.ov .ov-chat .md\:pb-0  { padding-bottom: 0; }
    body.ov .ov-chat .md\:pb-20 { padding-bottom: 5rem; }
    body.ov .ov-chat .md\:pb-24 { padding-bottom: 6rem; }
    body.ov .ov-chat .md\:p-6   { padding: 1.5rem; }
    body.ov .ov-chat .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    body.ov .ov-chat .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    body.ov .ov-chat .md\:w-14  { width: 3.5rem; }
    body.ov .ov-chat .md\:w-16  { width: 4rem; }
    body.ov .ov-chat .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════
 *  Chat iteration 2 — viewport-locked shell + tighter typography
 *  ──────────────────────────────────────────────────────────────────
 *  Overrides the base .ov-chat rules above with higher specificity
 *  (#chat-panel-content.ov-chat beats .ov-chat) so nothing needed to change
 *  in the original block.
 *
 *  Goals:
 *    • Page never grows. The chat screen is exactly one viewport tall.
 *      The feed has internal scroll — composer stays pinned at the
 *      bottom regardless of how much history is loaded.
 *    • Smaller everything. Denser list, reads like a chat not a blog.
 *    • Admin broadcasts land on the right with an ADMIN pill instead
 *      of being lost in the centred system-chip stream.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Viewport-locked main shell ──────────────────────────────────── */

/* style.css ships `.screen { padding: 16px }` as a legacy default;
   that 32 px of vertical padding would push the chat shell beyond the
   viewport and re-introduce page scroll. Kill it on chat specifically
   (other OV screens already zero it out per-screen). */
body.ov #chat-panel-content.ov-chat.screen {
    padding: 0 !important;
}

body.ov #chat-panel-content.ov-chat .ov-chat-main {
    /* Height accounts for the global header (~56 px) + bottom nav
       (76 px) + a 4 px safety margin. dvh for modern WebViews (so
       the URL bar collapsing doesn't shift layout); vh fallback
       for older ones. */
    height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
    height: calc(100dvh - 140px);
    max-height: calc(100dvh - 140px);
    overflow: hidden;                 /* only the feed scrolls */
    padding-bottom: 0;                /* composer handles its own inset */
}

/* Feed: fills remaining flex space; internal scroll; tighter rhythm. */
body.ov #chat-panel-content.ov-chat #chat-feed.ov-chat-feed-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;     /* no rubberband into the page */
    scroll-behavior: smooth;
    padding-right: 2px;               /* a hair of room for the thumb */
}
/* Override Tailwind's space-y-4 (16 px gap) that used to be inline */
body.ov #chat-panel-content.ov-chat #chat-feed.ov-chat-feed-scroll > * + * {
    margin-top: 0.4rem;
}

/* Composer: stays inside the flex column at the bottom, not sticky. */
body.ov #chat-panel-content.ov-chat .ov-chat-composer {
    shrink: 0;
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Smaller avatars + bubbles ───────────────────────────────────── */

body.ov #chat-panel-content.ov-chat .ov-chat-msg {
    grid-template-columns: 26px 1fr;
    gap: 0.5rem;
    padding: 0;
}
body.ov #chat-panel-content.ov-chat .ov-chat-msg.is-me {
    grid-template-columns: 1fr 26px;
}
body.ov #chat-panel-content.ov-chat .ov-chat-avatar {
    width: 26px;
    height: 26px;
}
body.ov #chat-panel-content.ov-chat .ov-chat-avatar-fb {
    font-size: 11px;
}

body.ov #chat-panel-content.ov-chat .ov-chat-meta {
    font-size: 9.5px;
    gap: 0.35rem;
    letter-spacing: 0.09em;
}
body.ov #chat-panel-content.ov-chat .ov-chat-bubble {
    padding: 0.45rem 0.7rem;
    font-size: 12.5px;
    line-height: 1.4;
    /* Track I — was capped at 22rem (352px). On a 414px+ mobile that
       left ~60px of "empty space" on the side, which the user noticed.
       Use a percentage cap so bubbles scale with the viewport and feel
       like a real messaging app. The 32rem absolute cap from the base
       rule still applies on desktop. */
    max-width: 92%;
}

/* ── System chip: smaller, subtler (auto-generated events only) ──── */

body.ov #chat-panel-content.ov-chat .ov-chat-sys {
    padding: 0.2rem 0;
}
body.ov #chat-panel-content.ov-chat .ov-chat-sys-text {
    padding: 0.3rem 0.65rem;
    font-size: 9px;
    letter-spacing: 0.2em;
    opacity: 0.85;
}

/* ── Admin broadcast: right-aligned gold bubble + ADMIN pill ─────── */

/* The row has no avatar — grid is 1fr-only so the body fills it and
   align-items flex-end pushes the bubble to the right edge. */
body.ov #chat-panel-content.ov-chat .ov-chat-msg.is-admin-broadcast {
    grid-template-columns: 1fr;
    padding: 0;
}
body.ov #chat-panel-content.ov-chat .ov-chat-msg.is-admin-broadcast .ov-chat-body {
    align-items: flex-end;
}
body.ov #chat-panel-content.ov-chat .ov-chat-msg.is-admin-broadcast .ov-chat-meta {
    justify-content: flex-end;
}
body.ov #chat-panel-content.ov-chat .ov-chat-msg.is-admin-broadcast .ov-chat-bubble {
    background: linear-gradient(135deg, #e9c349 0%, #c5a12a 100%);
    color: #2a1e00;
    font-weight: 600;
    border: 0;
    box-shadow: 0 2px 12px rgba(233, 195, 73, 0.15);
}
body.ov #chat-panel-content.ov-chat .ov-chat-admin-tag {
    display: inline-block;
    padding: 1px 6px;
    background: #1a1400;
    color: #e9c349;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.2em;
    border-radius: 2px;
}
body.ov #chat-panel-content.ov-chat .ov-chat-msg.is-admin-broadcast .ov-chat-name {
    color: #bfb79c;
    font-weight: 600;
    cursor: default;
}

/* Keep the header / drawers from stealing feed height — they don't
   flex-grow, they just take what they need. */
body.ov #chat-panel-content.ov-chat #chat-settings-panel,
body.ov #chat-panel-content.ov-chat #chat-active-users-panel {
    flex-shrink: 0;
}


 *  ──────────────────────────────────────────────────────────────────
 *  Floats in the lower-right corner, above the bottom nav. Obsidian
 *  Vault palette — black felt, gold accent, thin serif heading —
 *  same treatment as the rest of the app.
 * ═══════════════════════════════════════════════════════════════════ */

.chatshare-chip {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
    z-index: 1600;
    min-width: 260px;
    max-width: 360px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(180deg, #16140b 0%, #0a0906 100%);
    border: 1px solid rgba(233, 195, 73, 0.35);
    box-shadow:
        0 14px 48px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(233, 195, 73, 0.08) inset;
    color: #e7e4d6;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.98);
    transition:
        opacity 240ms cubic-bezier(0.22, 0.8, 0.26, 1),
        transform 320ms cubic-bezier(0.22, 0.8, 0.26, 1);
    pointer-events: auto;
}
.chatshare-chip.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.chatshare-chip__body { flex: 1; min-width: 0; }
.chatshare-chip__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #bfb79c;
    margin-bottom: 0.35rem;
}
.chatshare-chip__icon { font-size: 13px; line-height: 1; }
.chatshare-chip__amount {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: #f0dd92;
    letter-spacing: 0.02em;
    line-height: 1.15;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.chatshare-chip__unit {
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #bfb79c;
    font-weight: 600;
}
.chatshare-chip__mult {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0a0906;
    background: #e9c349;
    padding: 2px 7px;
    border-radius: 2px;
    align-self: center;
}

.chatshare-chip__actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: stretch;
}

.chatshare-chip__share {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0906;
    background: #e9c349;
    border: 1px solid #e9c349;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms ease, transform 120ms ease;
}
.chatshare-chip__share:hover:not(:disabled) {
    background: #f1d05f;
    transform: translateY(-1px);
}
.chatshare-chip__share:disabled {
    opacity: 0.7;
    cursor: wait;
}

.chatshare-chip__dismiss {
    background: transparent;
    border: 1px solid rgba(233, 195, 73, 0.18);
    color: #bfb79c;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    align-self: flex-end;
    transition: all 120ms ease;
}
.chatshare-chip__dismiss:hover {
    color: #e9c349;
    border-color: #e9c349;
}

/* Verify modal — click the ×N badge on a shared win */

.chatshare-verify {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.chatshare-verify.is-open { display: flex; }

.chatshare-verify__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.chatshare-verify__card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(180deg, #16140b 0%, #0a0906 100%);
    border: 1px solid rgba(233, 195, 73, 0.35);
    padding: 1.5rem 1.25rem 1.25rem;
    color: #e7e4d6;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.chatshare-verify__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 1px solid rgba(233, 195, 73, 0.18);
    color: #bfb79c;
    width: 28px;
    height: 28px;
    font-size: 17px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: all 120ms ease;
}
.chatshare-verify__close:hover { color: #e9c349; border-color: #e9c349; }

.chatshare-verify__title {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #bfb79c;
    margin-bottom: 0.35rem;
}
.chatshare-verify__subtitle {
    font-size: 15px;
    color: #e7e4d6;
    margin-bottom: 1rem;
}
.chatshare-verify__subtitle strong { color: #f0dd92; font-weight: 600; }
.chatshare-verify__subtitle em {
    font-style: italic;
    color: #bfb79c;
    font-size: 13px;
}

.chatshare-verify__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.chatshare-verify__cell {
    padding: 0.65rem 0.75rem;
    background: rgba(233, 195, 73, 0.04);
    border: 1px solid rgba(233, 195, 73, 0.1);
}
.chatshare-verify__cell span {
    display: block;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8f8a78;
    margin-bottom: 2px;
}
.chatshare-verify__cell strong {
    display: block;
    font-size: 14px;
    color: #e7e4d6;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.chatshare-verify__cell--accent {
    background: rgba(233, 195, 73, 0.1);
    border-color: rgba(233, 195, 73, 0.3);
}
.chatshare-verify__cell--accent strong { color: #f0dd92; }

.chatshare-verify__ref {
    font-size: 11px;
    color: #8f8a78;
    letter-spacing: 0.08em;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(233, 195, 73, 0.08);
}
.chatshare-verify__ref code {
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    color: #bfb79c;
    font-size: 11px;
    word-break: break-all;
}

/* N2: deeplink to the full provably-fair derivation modal. Sits at
   the bottom of the chat-share trophy modal — gives the curious user
   a one-tap path into the HMAC re-derivation. */
.chatshare-verify__deeplink {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(233, 195, 73, 0.08);
    text-align: center;
}
.chatshare-verify__pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(242, 202, 80, 0.08);
    border: 1px solid rgba(242, 202, 80, 0.3);
    border-radius: 2px;
    color: #f2ca50;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.chatshare-verify__pf-btn:hover {
    background: rgba(242, 202, 80, 0.14);
    border-color: rgba(242, 202, 80, 0.55);
}
.chatshare-verify__pf-btn:active { transform: scale(0.97); }
.chatshare-verify__pf-btn .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}
.chatshare-verify__pf-hint {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.chatshare-verify__loading,
.chatshare-verify__error {
    padding: 1.5rem 0;
    text-align: center;
    font-size: 13px;
    color: #8f8a78;
    letter-spacing: 0.08em;
}
.chatshare-verify__error { color: #e0726d; }

@media (max-width: 480px) {
    .chatshare-chip {
        right: 12px;
        left: 12px;
        min-width: 0;
        max-width: none;
    }
    .chatshare-verify__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  Obsidian Vault restyle — shared modal affordances
 *  ──────────────────────────────────────────────────────────────────
 *  Overrides the legacy .notif-panel / .fym-modal / .tos-modal / .pf
 *  styles from style.css so all three modal families share one
 *  aesthetic on OV screens: black felt with gold accent, Bodoni
 *  serif headings, square edges, thin gold hairlines. The legacy
 *  rules are untouched so non-OV contexts (if any remain) still
 *  look like themselves.
 *
 *  Specificity via `body.ov` is enough to win over style.css, which
 *  uses class-only selectors at the same cascade depth.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Notifications drawer ───────────────────────────────────────── */

body.ov .notif-panel {
    background: linear-gradient(180deg, #16140b 0%, #0a0906 100%);
    border: 1px solid rgba(233, 195, 73, 0.35);
    border-radius: 0;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(233, 195, 73, 0.08) inset;
    top: 60px;
}
body.ov .notif-panel-head {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(233, 195, 73, 0.15);
    background: rgba(233, 195, 73, 0.03);
}
body.ov .notif-panel-title {
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 0.35em;
    color: #e9c349;
    font-weight: 600;
    text-transform: uppercase;
}
body.ov .notif-panel-actions { gap: 0.25rem; }
body.ov .notif-mark-all,
body.ov .notif-clear-all {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8f8a78;
    border-radius: 0;
    padding: 4px 10px;
    border: 1px solid transparent;
    transition: all 120ms ease;
}
body.ov .notif-mark-all:hover {
    color: #e9c349;
    background: rgba(233, 195, 73, 0.06);
    border-color: rgba(233, 195, 73, 0.18);
}
body.ov .notif-clear-all:hover {
    color: #e0726d;
    background: rgba(224, 114, 109, 0.06);
    border-color: rgba(224, 114, 109, 0.3);
}
body.ov .notif-panel-list { padding: 0.5rem; }
body.ov .notif-empty {
    color: #8f8a78;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2.25rem 1rem;
    font-family: var(--font-display);
}
body.ov .notif-item {
    border-radius: 0;
    border: 1px solid rgba(233, 195, 73, 0.1);
    background: rgba(233, 195, 73, 0.02);
    margin-bottom: 0.35rem;
    padding: 0.7rem 0.85rem;
    transition: all 140ms ease;
}
body.ov .notif-item:hover {
    background: rgba(233, 195, 73, 0.06);
    border-color: rgba(233, 195, 73, 0.25);
}
body.ov .notif-item .notif-title   { color: #f0dd92; font-weight: 600; }
body.ov .notif-item .notif-preview { color: #bfb79c; }
body.ov .notif-item .notif-time    { color: #8f8a78; font-size: 10.5px; }

body.ov .notif-backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

/* ── Shared .fym-modal (notif detail + TOS) ─────────────────────── */

body.ov .fym-modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}
body.ov .fym-modal-card {
    background: linear-gradient(180deg, #16140b 0%, #0a0906 100%);
    border: 1px solid rgba(233, 195, 73, 0.35);
    border-radius: 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.72);
    padding: 1.75rem 1.25rem 1.25rem;
    color: #e7e4d6;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    animation: ovModalPop 260ms cubic-bezier(0.22, 0.8, 0.26, 1);
}
@keyframes ovModalPop {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.ov .fym-modal-close {
    border: 1px solid rgba(233, 195, 73, 0.18);
    color: #bfb79c;
    width: 28px; height: 28px;
    font-size: 17px;
    border-radius: 0;
    transition: all 120ms ease;
}
body.ov .fym-modal-close:hover {
    color: #e9c349;
    border-color: #e9c349;
    background: rgba(233, 195, 73, 0.06);
}

/* ── Notification detail card ───────────────────────────────────── */

body.ov .notif-modal-icon {
    font-size: 32px;
    filter: drop-shadow(0 4px 14px rgba(233, 195, 73, 0.35));
    margin-bottom: 0.75rem;
}
body.ov .notif-modal-title {
    font-family: var(--font-display);
    color: #e9c349;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}
body.ov .notif-modal-body {
    color: #bfb79c;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
body.ov .notif-modal-time {
    color: #8f8a78;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-display);
    margin-bottom: 1.25rem;
}
body.ov .notif-modal-ok {
    width: 100%;
    padding: 0.75rem;
    background: #e9c349;
    color: #0a0906;
    border: 1px solid #e9c349;
    border-radius: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 140ms ease;
}
body.ov .notif-modal-ok:hover { background: #f0dd92; }

/* ── TOS acceptance modal ───────────────────────────────────────── */

body.ov .fym-modal-card.tos-modal-card {
    padding: 0;
    max-width: 480px;
    width: min(480px, calc(100vw - 24px));
    text-align: left;
}
body.ov .tos-modal-header {
    text-align: center;
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(233, 195, 73, 0.15);
    background: rgba(233, 195, 73, 0.03);
}
body.ov .tos-modal-logo {
    width: 44px; height: 44px;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 4px 12px rgba(233, 195, 73, 0.25));
}
body.ov .tos-modal-header h2 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: #e9c349;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
}
body.ov .tos-modal-version {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: #bfb79c;
    letter-spacing: 0.1em;
}
body.ov .tos-modal-body {
    padding: 1rem 1.25rem;
    color: #bfb79c;
    font-size: 13px;
    line-height: 1.7;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;          /* lock horizontal pan */
    overscroll-behavior: contain;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
body.ov .tos-modal-body * { max-width: 100%; }
body.ov .tos-modal-body h2,
body.ov .tos-modal-body h3,
body.ov .tos-modal-body h4 {
    font-family: var(--font-display);
    color: #e9c349;
    font-weight: 600;
    letter-spacing: 0.06em;
}
body.ov .tos-modal-body h2 { font-size: 14px; margin: 1.1rem 0 0.4rem; }
body.ov .tos-modal-body h3 { font-size: 13px; margin: 0.85rem 0 0.3rem; }
body.ov .tos-modal-body h4 { font-size: 12px; margin: 0.7rem 0 0.25rem; text-transform: uppercase; }
body.ov .tos-modal-body strong { color: #e7e4d6; font-weight: 600; }
body.ov .tos-modal-body em { color: #e7e4d6; }
body.ov .tos-modal-body a {
    color: #e9c349;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(233, 195, 73, 0.35);
}
body.ov .tos-modal-body a:hover { text-decoration-color: #e9c349; }
body.ov .tos-modal-body code {
    background: rgba(233, 195, 73, 0.08);
    border: 1px solid rgba(233, 195, 73, 0.18);
    border-radius: 0;
    padding: 1px 6px;
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: #f0dd92;
}
body.ov .tos-modal-body hr {
    border: none;
    border-top: 1px solid rgba(233, 195, 73, 0.15);
    margin: 1rem 0;
}
body.ov .tos-modal-footer {
    padding: 1rem 1.25rem 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(233, 195, 73, 0.15);
    border-radius: 0;
}
body.ov .tos-checkbox-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    color: #bfb79c;
    letter-spacing: 0.02em;
    margin-bottom: 0.85rem;
    gap: 0.55rem;
}
body.ov .tos-checkbox-label input[type="checkbox"] {
    accent-color: #e9c349;
    width: 15px;
    height: 15px;
}
body.ov .tos-accept-btn {
    padding: 0.85rem;
    background: #e9c349;
    color: #0a0906;
    border: 1px solid #e9c349;
    border-radius: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background 140ms ease;
}
body.ov .tos-accept-btn:not(:disabled):hover {
    background: #f0dd92;
    opacity: 1;
}
body.ov .tos-accept-btn:disabled {
    background: rgba(233, 195, 73, 0.2);
    border-color: rgba(233, 195, 73, 0.2);
    color: rgba(10, 9, 6, 0.5);
    opacity: 1;
}

/* ── Provably Fair modal (#pf-modal) ────────────────────────────── */

body.ov #pf-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    /* `style.css .modal-overlay.active { display: flex }` still fires
       on the show class; we just re-skin the children. */
}
body.ov #pf-modal .modal-content {
    background: linear-gradient(180deg, #16140b 0%, #0a0906 100%);
    border: 1px solid rgba(233, 195, 73, 0.35);
    border-radius: 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.72);
    padding: 1.5rem 1.25rem 1.25rem;
    color: #e7e4d6;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    max-width: 440px;
}
body.ov #pf-modal .pf-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(233, 195, 73, 0.15);
}
body.ov #pf-modal .pf-header h3 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: #e9c349;
    text-transform: uppercase;
    margin: 0;
}
body.ov #pf-modal .pf-close {
    color: #bfb79c;
    font-size: 24px;
    border: 1px solid rgba(233, 195, 73, 0.18);
    width: 30px; height: 30px;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: all 120ms ease;
}
body.ov #pf-modal .pf-close:hover {
    color: #e9c349;
    border-color: #e9c349;
    background: rgba(233, 195, 73, 0.06);
}
body.ov #pf-modal .pf-section { margin-bottom: 1rem; }
body.ov #pf-modal .pf-section h4 {
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 0.25em;
    color: #bfb79c;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
body.ov #pf-modal .pf-section p {
    color: #bfb79c;
    font-size: 13px;
    line-height: 1.6;
}
body.ov #pf-modal .pf-edge-badge {
    display: inline-block;
    background: rgba(233, 195, 73, 0.1);
    border: 1px solid rgba(233, 195, 73, 0.3);
    color: #f0dd92;
    padding: 0.35rem 0.85rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
body.ov #pf-modal .pf-table {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px;
    background: rgba(233, 195, 73, 0.1);
    border: 1px solid rgba(233, 195, 73, 0.15);
}
body.ov #pf-modal .pf-row {
    display: contents;
}
body.ov #pf-modal .pf-row > span {
    background: rgba(16, 14, 8, 0.95);
    padding: 0.5rem 0.75rem;
    font-size: 12.5px;
    color: #bfb79c;
}
body.ov #pf-modal .pf-row > span:last-child {
    color: #e7e4d6;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.ov #pf-modal .pf-payout-val {
    color: #f0dd92 !important;
    font-weight: 600;
}
body.ov #pf-modal .pf-rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.ov #pf-modal .pf-rules-list li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1rem;
    font-size: 12.5px;
    color: #bfb79c;
    line-height: 1.55;
}
body.ov #pf-modal .pf-rules-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 4px;
    height: 4px;
    background: #e9c349;
    border-radius: 50%;
}

/* Existing .fym-toast-stack toasts — re-skin to match */
body.ov .fym-toast {
    background: linear-gradient(180deg, #16140b 0%, #0a0906 100%);
    border: 1px solid rgba(233, 195, 73, 0.35);
    border-radius: 0;
    color: #e7e4d6;
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}


/* ═══════════════════════════════════════════════════════════════════
 *  Global polish — touch targets, focus-visible, tinted neutrals
 *  ──────────────────────────────────────────────────────────────────
 *  Catches 3 cross-cutting rules from the design-audit in one block:
 *    · P1.9  Touch targets ≥ 44×44 (WCAG 2.5.5)
 *    · P3.15 Focus-visible outline (keyboard a11y)
 *    · P3.16 Pure-black (#000) replaced with tinted neutrals
 *  Scoped to body.ov so game screens keep their hand-tuned affordances
 *  where 44px would break their mini-UIs (chip rails, slot reels).
 * ═══════════════════════════════════════════════════════════════════ */

/* P1.9 — Touch-target minimum for interactive controls on OV screens.
   Applies to buttons, anchors-as-buttons, and ALL form inputs. Uses
   min-height/min-width so layouts that size explicitly (e.g. icon
   bars) aren't broken — just padded out when smaller. */
body.ov button,
body.ov .ov-btn,
body.ov a[role="button"],
body.ov [type="button"],
body.ov [type="submit"] {
    min-height: 44px;
    min-width: 44px;
}
/* Exception: small inline action buttons where a 44px minimum would
   swallow surrounding text. These are usually flag / close / x-dismiss
   icons inside chips / rows. Explicit opt-out classname. */
body.ov .ov-btn-inline,
body.ov .ov-chat-report,
body.ov .ov-chip-dismiss {
    min-height: unset;
    min-width: unset;
}

/* P3.15 — Visible focus ring for keyboard navigation. Matches the
   accent gold so it reads as "you are here" instead of generic. */
body.ov *:focus-visible {
    outline: 2px solid var(--ov-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(233, 195, 73, 0.2);
}
body.ov button:focus-visible,
body.ov [role="button"]:focus-visible {
    outline-offset: 2px;
}
/* Mouse click should NOT trigger the ring — only keyboard focus.
   :focus-visible is already keyboard-only but belt+braces. */
body.ov *:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

/* P3.16 — Any `color: #000` or `background: #000` inherited from the
   legacy stylesheet gets re-tinted on OV screens. Pure black is
   uncommon in real surfaces; the softer `#060608` picks up a hint
   of the cool undertone without the sterile feel. Narrow selector
   to avoid breaking game canvases that deliberately use #000 as a
   chroma key. */
body.ov [style*="color: #000"],
body.ov [style*="color:#000"],
body.ov [style*="color: rgb(0, 0, 0)"],
body.ov [style*="color:rgb(0,0,0)"] {
    color: #060608 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Intro video loader — plays after "Enter Casino" tap, before TOS/home
   z-index 10001 sits above #loading-screen (z-index 9999) so the
   cinematic actually covers the landing page. We use
   visibility/opacity (not display) so the <video> can preload its
   metadata before play() fires.
   ═══════════════════════════════════════════════════════════════════ */
.intro-video-screen {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: #050405;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.45s;
}
.intro-video-screen.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
}
.intro-video-screen.is-fading {
    opacity: 0;
    pointer-events: none;
    visibility: visible;       /* keep painted while fading */
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.45s;
}

.intro-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #050405;
}

/* Vignette: subtle darken at the edges so the gold UI on top stays
   readable regardless of what frame the clip is on. Sits between the
   video and the overlay. */
.intro-video__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 30%, transparent 30%, rgba(0,0,0,0.28) 70%, rgba(0,0,0,0.6) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 30%, transparent 60%, rgba(5,4,5,0.78) 100%);
    pointer-events: none;
}

.intro-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: max(env(safe-area-inset-top, 0px), 28px) 24px max(env(safe-area-inset-bottom, 0px), 36px);
    pointer-events: none;
}

/* Top brand badge */
.intro-video__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(15, 11, 7, 0.6), rgba(15, 11, 7, 0.35));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 32px -8px rgba(0,0,0,0.6);
    animation: intro-brand-in 700ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.intro-video__brand-mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.34em;
    color: #f3d774;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}
.intro-video__brand-divider {
    width: 1px;
    height: 16px;
    background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}
.intro-video__brand-sub {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(208, 197, 175, 0.72);
}
@keyframes intro-brand-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bottom progress block */
.intro-video__progress-wrap {
    width: min(440px, 90vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: intro-progress-in 700ms 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes intro-progress-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.intro-video__progress-track {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(212, 175, 55, 0.16);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.intro-video__progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
        #d4af37 0%,
        #f5d97e 50%,
        #d4af37 100%);
    box-shadow:
        0 0 16px rgba(245, 217, 126, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}
.intro-video__progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%);
    animation: intro-shimmer 1.4s linear infinite;
}
@keyframes intro-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.intro-video__status {
    margin: 0;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(243, 215, 116, 0.85);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    text-align: center;
    min-height: 1.2em;
}
.intro-video__status:empty::before {
    content: '\00a0';
}