/* ══════════════════════════════════════════════════════════════════
   FYM Casino — Sovereign Vault design system
   ──────────────────────────────────────────────────────────────────
   The shared vocabulary for every screen being migrated from the
   "Monte Carlo + Cyber Vault" legacy aesthetic to the new
   high-end editorial direction (obsidian + gold, "glass & gradient",
   intentional asymmetry).

   Layering vs. style.css:
   • This file loads AFTER style.css and ONLY applies when an element
     opts in via `.sv` root class (screen-level), .sv-* utilities, or
     data-sv="..." hooks. Untouched legacy screens render unchanged —
     there's no bulk overwrite of existing rules.
   • Tokens are exposed as CSS custom properties on `:root` so games
     and components can pull them without knowing about the SV layer.

   Section map
   ──────────
     1. Tokens (color, surface tiers, spacing, radius, motion)
     2. Typography (scales + utility classes)
     3. Base primitives (containers, dividers, glass surfaces)
     4. Component: metric readouts
     5. Component: game card / featured card
     6. Component: leaderboard podium + rank row
     7. Component: progression bar + streak dots
     8. Component: event hero / event row
     9. Component: achievement chip + referral card
    10. Component: button variants (primary gold, ghost, danger)
    11. Component: top bar + bottom nav
   ══════════════════════════════════════════════════════════════════ */


/* ─── 1. Tokens ─────────────────────────────────────────────────── */

:root {
    /* Stitch Material-scheme palette — 1:1 with the design system.
       Don't rename these to the project's older conventions; keeping
       the Material names here means the class rules below mirror the
       Stitch Tailwind config token-for-token. */
    --sv-primary:             #f2ca50;    /* gold — 1st place, profit, links */
    --sv-primary-fixed:       #ffe088;    /* pale gold — hover/gleam */
    --sv-primary-container:   #d4af37;    /* deep gold — 3rd place, gradient end */
    --sv-primary-fixed-dim:   #e9c349;    /* legacy "soft gold" static accent */
    --sv-on-primary:          #3c2f00;    /* dark brown — text on gold gradient */
    --sv-secondary:           #b8c8da;    /* silvery blue — 2nd place, LVL chips */

    /* Legacy aliases so existing rules keep working; new rules below
       use the Stitch-named tokens directly. */
    --sv-gold:          var(--sv-primary);
    --sv-gold-bright:   var(--sv-primary-fixed);
    --sv-gold-deep:     var(--sv-primary-container);
    --sv-gold-soft:     var(--sv-primary-fixed-dim);

    /* Obsidian family — surface tiers, ordered recessed → elevated.
       Use tonal shifts (not 1px borders) to separate sections. */
    --sv-surface:           #131313;      /* base page */
    --sv-surface-lowest:    #0e0e0e;      /* recessed wells / footers */
    --sv-surface-low:       #1c1b1b;      /* section panels */
    --sv-surface-mid:       #201f1f;      /* container */
    --sv-surface-high:      #2a2a2a;      /* elevated cards */
    --sv-surface-highest:   #353534;      /* inset cards inside cards */
    --sv-surface-variant:   #353534;      /* same, aliased for clarity */

    /* Text — never pure white. `on-surface-variant` is for labels,
       captions, muted annotations. */
    --sv-on-surface:        #e5e2e1;
    --sv-on-surface-var:    #d0c5af;
    --sv-on-surface-dim:    #99907c;      /* outline / subhead */
    --sv-outline-variant:   #4d4635;      /* faint border token (used @10-30% opacity) */
    --sv-zinc-600:          #52525b;      /* rank number italic */
    --sv-zinc-800:          #27272a;      /* placeholder avatar bg */

    /* Semantic */
    --sv-danger:            #ffb4ab;
    --sv-danger-bg:         rgba(147, 0, 10, 0.18);
    --sv-success:           #a6d4a3;
    --sv-success-bg:        rgba(0, 82, 23, 0.14);

    /* Signature gold gradient — 45° matches the Stitch `vault-gradient`
       CSS declaration exactly. Don't change the angle; the 1st-place
       podium pillar was designed against this specific light ramp. */
    --sv-gold-gradient:     linear-gradient(45deg,
                                #f2ca50 0%,
                                #d4af37 100%);
    /* Used for subtle divider lines where a real border would violate
       the "no-line rule" but we still want a hairline separator. */
    --sv-gold-hairline:     linear-gradient(90deg,
                                transparent,
                                rgba(233, 195, 73, 0.6) 50%,
                                transparent);

    /* Glass surface — translucent panel with backdrop blur. Used for
       bottom nav, floating overlays, sticky headers. Never a plain
       dark rectangle. */
    --sv-glass-bg:          rgba(28, 27, 27, 0.6);
    --sv-glass-border:      rgba(233, 195, 73, 0.12);
    --sv-glass-blur:        20px;

    /* Spacing scale — 4pt grid, semantic names. */
    --sv-space-1:   4px;
    --sv-space-2:   8px;
    --sv-space-3:  12px;
    --sv-space-4:  16px;
    --sv-space-5:  20px;
    --sv-space-6:  24px;
    --sv-space-8:  32px;
    --sv-space-10: 40px;
    --sv-space-12: 48px;
    --sv-space-16: 64px;
    --sv-space-20: 80px;

    /* Radius — keep it quiet. The design is about weight, not bubbles. */
    --sv-radius-sm:  6px;
    --sv-radius-md: 12px;
    --sv-radius-lg: 20px;
    --sv-radius-pill: 999px;

    /* Motion — exponential ease-out for natural deceleration. */
    --sv-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --sv-dur-fast:     180ms;
    --sv-dur-med:      280ms;
    --sv-dur-slow:     480ms;

    /* Shadow — heavy and quiet. "Gold bar on velvet" weight. */
    --sv-shadow-lg:    0 18px 40px -12px rgba(0, 0, 0, 0.65);
    --sv-shadow-xl:    0 28px 60px -18px rgba(0, 0, 0, 0.75);
    --sv-shadow-gold:  0 14px 38px -12px rgba(212, 175, 55, 0.32);
}


/* ─── 2. Typography ────────────────────────────────────────────── */

/* Base + fonts */
.sv,
.sv * {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.005em;
}

.sv-headline {
    font-family: 'Noto Serif', 'Iowan Old Style', Georgia, serif;
    font-style: normal;              /* Stitch LEADERBOARD is upright. */
    font-weight: 900;                /* `font-black` */
    letter-spacing: -0.025em;        /* `tracking-tight` */
    line-height: 1.02;
    color: var(--sv-on-surface);     /* off-white. Gold is for the eyebrow. */
}
/* Opt-in italic variant — used by smaller display-serif headings. */
.sv-headline--italic { font-style: italic; font-weight: 700; }

.sv-headline-lg   { font-size: clamp(44px, 10vw, 64px); }
.sv-headline-md   { font-size: clamp(32px, 7vw, 44px); }
.sv-headline-sm   { font-size: clamp(22px, 5vw, 28px); }

/* Editorial micro-caps label — used above every hero to establish
   section hierarchy without competing with the display serif. */
.sv-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;                 /* `text-[10px]` */
    font-weight: 700;                /* `font-bold` */
    letter-spacing: 0.3em;           /* `tracking-[0.3em]` */
    text-transform: uppercase;
    color: var(--sv-primary);         /* `text-primary` — gold primary, not muted */
}

.sv-eyebrow--muted { color: var(--sv-on-surface-dim); }
.sv-eyebrow--gold { color: var(--sv-gold-soft); }   /* legacy alias */

.sv-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sv-on-surface-dim);
}

.sv-body   { font-size: 14px; line-height: 1.55; color: var(--sv-on-surface-var); }
.sv-body-l { font-size: 16px; line-height: 1.6;  color: var(--sv-on-surface-var); }

.sv-mono {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.sv-gold         { color: var(--sv-gold-soft); }
.sv-gold-gleam   { color: var(--sv-gold-bright); }
.sv-muted        { color: var(--sv-on-surface-dim); }
.sv-danger       { color: var(--sv-danger); }
.sv-success      { color: var(--sv-success); }


/* ─── 3. Base primitives ───────────────────────────────────────── */

/* Root wrapper — any screen opting in sets this on its top-level
   element. Locks the page to the obsidian surface + neutral text. */
.sv {
    background: var(--sv-surface);
    color: var(--sv-on-surface);
    min-height: 100%;
}

/* When a Sovereign Vault screen is active AND its stage is owning
   the header (has the .sv-topbar-mini inside it), hide the global
   casino header so we don't stack two top-bars. The body gets
   `data-sv-no-global-header` added by navigate() on entry and
   removed on exit. */
body[data-sv-no-global-header] > #header { display: none !important; }

/* Phone-frame container — the canonical mobile width. Every Stitch
   design is shot at ~390px wide; this enforces the same stage. */
.sv-stage {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--sv-space-4);
    padding-bottom: calc(var(--sv-space-20) + env(safe-area-inset-bottom, 0));
}

/* Section block — used for each visual region. Spacing around it is
   the primary separator (no borders). */
.sv-section        { padding-block: var(--sv-space-8); }
.sv-section--dense { padding-block: var(--sv-space-5); }

/* Recessed well — for the background of a grouped list. Sits INSIDE
   a surface-low context to create the "carved obsidian" feel. */
.sv-well {
    background: var(--sv-surface-lowest);
    border-radius: var(--sv-radius-lg);
    padding: var(--sv-space-5);
}

/* Elevated panel — primary interactive card. */
.sv-panel {
    background: var(--sv-surface-high);
    border-radius: var(--sv-radius-lg);
    padding: var(--sv-space-5);
}

/* Nested inset — a panel inside a well to create "machined" depth. */
.sv-inset {
    background: var(--sv-surface-highest);
    border-radius: var(--sv-radius-md);
    padding: var(--sv-space-4);
}

/* Gold hairline — the ONLY acceptable "divider line". Fades at edges
   so it reads as reflected light, not a drawn border. */
.sv-hairline {
    height: 1px;
    background: var(--sv-gold-hairline);
    border: 0;
    margin-block: var(--sv-space-6);
}

/* Glass surface — translucent overlay panel. Used for bottom nav +
   floating headers. Requires backdrop-filter support. */
.sv-glass {
    background: var(--sv-glass-bg);
    -webkit-backdrop-filter: blur(var(--sv-glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--sv-glass-blur)) saturate(150%);
}


/* ─── 4. Metric readout (big number + small label) ──────────────── */

.sv-metric {
    display: flex;
    flex-direction: column;
    gap: var(--sv-space-1);
}

.sv-metric__value {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(28px, 6vw, 40px);
    letter-spacing: -0.02em;
    color: var(--sv-on-surface);
    font-variant-numeric: tabular-nums;
}

.sv-metric__value--gold { color: var(--sv-gold-soft); }

.sv-metric__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sv-on-surface-dim);
}


/* ─── 5. Game card + featured card ─────────────────────────────── */

/* Base game card — image + title + subtitle, no border, just
   surface-layering. */
.sv-game-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--sv-radius-md);
    overflow: hidden;
    background: var(--sv-surface-high);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: transform var(--sv-dur-med) var(--sv-ease-out);
}

.sv-game-card:active { transform: scale(0.985); }

.sv-game-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform var(--sv-dur-slow) var(--sv-ease-out);
}

.sv-game-card:hover .sv-game-card__img {
    transform: scale(1.04);
}

.sv-game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 35%,
        rgba(7, 7, 9, 0.55) 70%,
        rgba(7, 7, 9, 0.92) 100%);
    z-index: 1;
}

.sv-game-card__body {
    position: absolute;
    left: var(--sv-space-4);
    right: var(--sv-space-4);
    bottom: var(--sv-space-4);
    z-index: 2;
}

.sv-game-card__title {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.008em;
    color: var(--sv-on-surface);
    margin: 0;
}

.sv-game-card__meta {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sv-gold-soft);
}

/* Featured (hero) variant — taller, richer, with "FEATURED" eyebrow. */
.sv-game-card--featured {
    aspect-ratio: 3 / 4;
}
.sv-game-card--featured .sv-game-card__title {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1;
}
.sv-game-card--featured::after {
    background: linear-gradient(180deg,
        rgba(7, 7, 9, 0.20) 0%,
        rgba(7, 7, 9, 0.50) 45%,
        rgba(7, 7, 9, 0.95) 100%);
}


/* ─── 6. Leaderboard podium (pixel-matched to Stitch zip 7) ─────
   Three flex columns aligned at bottom (items-end). 1st place sits
   scale-110 and z-10 so it lifts slightly forward of 2nd / 3rd.
   Avatar = hard-edged square with a 2-px medal-colored BORDER
   (not outline) and 4-px inner padding so the portrait floats
   inside the frame. Pillar below holds the $ amount; 1st also
   holds the "PROFIT" label. */

.sv-podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    gap: 4px;                      /* `gap-1` in Tailwind */
    padding: 48px 0 32px;           /* `pt-12 pb-8` */
}

.sv-podium__slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    min-width: 0;
    color: inherit;
}

/* 1st place lifts 10% and sits above its neighbors */
.sv-podium__slot--1 {
    transform: scale(1.1);
    z-index: 10;
}

/* Avatar frame — the Stitch spec uses `border-2` with a slot-tinted
   color and `p-1` inner padding. We mirror that with a solid
   border + box-sizing:content-box so `width/height` sets the IMG
   area, and the border lives OUTSIDE. */
/* Tailwind's `w-16 h-16 border-2 p-1` is border-box sized: the 64px
   outer dimension INCLUDES the border + padding. Mirror that sizing
   exactly — the `img` then fills the padded content area at 100%. */
.sv-podium__avatar {
    position: relative;
    width: 64px;                    /* `w-16` */
    height: 64px;                   /* `h-16` */
    padding: 4px;                   /* `p-1` */
    box-sizing: border-box;
    margin-bottom: 16px;            /* `mb-4` */
}
.sv-podium__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sv-podium__slot--2 .sv-podium__avatar { border: 2px solid rgba(184, 200, 218, 0.3); }   /* secondary/30 */
.sv-podium__slot--3 .sv-podium__avatar { border: 2px solid rgba(212, 175, 55, 0.3); }    /* primary-container/30 */

.sv-podium__slot--2 .sv-podium__avatar img { filter: grayscale(1); }
.sv-podium__slot--3 .sv-podium__avatar img { filter: grayscale(1) contrast(1.25); }

/* Empty-avatar fallback (no photo_url) */
.sv-podium__avatar--empty img { background: var(--sv-zinc-800); }

/* 1st place: 80×80 outer (w-20), mb-6, gold border + glow. */
.sv-podium__slot--1 .sv-podium__avatar {
    width: 80px;                    /* `w-20` */
    height: 80px;                   /* `h-20` */
    margin-bottom: 24px;            /* `mb-6` */
    border: 2px solid var(--sv-primary);
    box-shadow: 0 0 30px rgba(242, 202, 80, 0.2);
}
.sv-podium__slot--1 .sv-podium__avatar img { filter: none; }

/* Material Symbols medal, positioned top-right of avatar frame.
   Size + color per slot. `FILL` via font-variation-settings was
   already set globally on .material-symbols-outlined, but we
   override per-slot for the tint. */
.sv-podium__medal {
    position: absolute;
    top: -12px;                      /* `-top-3` */
    right: -12px;                    /* `-right-3` */
    font-family: 'Material Symbols Outlined', sans-serif;
    font-variation-settings: 'FILL' 1;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;                 /* `text-3xl` */
    line-height: 1;
}
.sv-podium__slot--1 .sv-podium__medal {
    top: -20px;                      /* `-top-5` */
    right: -20px;                    /* `-right-5` */
    font-size: 48px;                 /* `text-5xl` */
    color: var(--sv-primary);
}
.sv-podium__slot--2 .sv-podium__medal { color: var(--sv-secondary); }
.sv-podium__slot--3 .sv-podium__medal { color: var(--sv-primary-container); }

/* Name — 2nd/3rd use Inter uppercase, 1st uses Noto Serif in gold. */
.sv-podium__name {
    font-family: var(--font-body);
    font-size: 12px;                /* `text-xs` */
    font-weight: 700;               /* `font-bold` */
    letter-spacing: 0.1em;          /* `tracking-widest` */
    text-transform: uppercase;
    color: var(--sv-on-surface);
    margin-bottom: 4px;             /* `mb-1` */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.sv-podium__slot--1 .sv-podium__name {
    font-family: 'Noto Serif', serif;
    font-size: 14px;                /* `text-sm` */
    font-weight: 900;               /* `font-black` */
    font-style: normal;             /* spec: NOT italic on name */
    color: var(--sv-primary);
    margin-bottom: 8px;             /* `mb-2` */
}

/* Pillar — flex column ending justify-end so text hugs the bottom.
   Heights: h-24 / h-32 / h-20 on mobile. bg-surface-container-low
   for 2nd & 3rd, vault-gradient (gold) for 1st. */
.sv-podium__pillar {
    width: 100%;
    background: var(--sv-surface-low);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 16px;            /* `pb-4` */
}
.sv-podium__slot--1 .sv-podium__pillar {
    height: 128px;                   /* `h-32` */
    background: var(--sv-gold-gradient);
    padding-bottom: 24px;            /* `pb-6` */
}
.sv-podium__slot--2 .sv-podium__pillar { height: 96px; }   /* `h-24` */
.sv-podium__slot--3 .sv-podium__pillar { height: 80px; }   /* `h-20` */

.sv-podium__value {
    font-family: var(--font-body);
    font-weight: 700;                /* `font-bold` for 2nd/3rd */
    font-variant-numeric: tabular-nums;
}
.sv-podium__slot--1 .sv-podium__value {
    font-weight: 900;                /* `font-black` */
    font-size: 18px;                 /* `text-lg` */
    color: var(--sv-on-primary);
}
.sv-podium__slot--2 .sv-podium__value { color: var(--sv-secondary); }
.sv-podium__slot--3 .sv-podium__value { color: var(--sv-primary-container); }

.sv-podium__label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(60, 47, 0, 0.6);     /* `text-on-primary/60` */
    margin-top: 2px;
}


/* ─── Rank table (pixel-matched: 6-col grid, py-5, zebra) ───────── */

.sv-rank-head,
.sv-rank-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;                       /* `gap-4` */
    align-items: center;
    padding: 0 24px;                 /* `px-6` */
}

/* Header: bottom hairline in outline-variant/10 */
.sv-rank-head {
    padding-top: 16px;               /* `py-4` */
    padding-bottom: 16px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sv-on-surface-var);
    border-bottom: 1px solid rgba(77, 70, 53, 0.1);
}
.sv-rank-head > :nth-child(1) { grid-column: span 2; text-align: left; }
.sv-rank-head > :nth-child(2),
.sv-rank-head > :nth-child(3),
.sv-rank-head > :nth-child(4) { text-align: center; }
.sv-rank-head > :nth-child(5) { text-align: right; }

.sv-rank-list {
    display: flex;
    flex-direction: column;
    gap: 4px;                        /* `space-y-1` */
    margin-top: 4px;
}

.sv-rank-row {
    padding-top: 20px;               /* `py-5` */
    padding-bottom: 20px;
    background: var(--sv-surface-low);
    transition: background var(--sv-dur-fast) var(--sv-ease-out);
    cursor: pointer;
}
.sv-rank-row--alt { background: var(--sv-surface-lowest); }
.sv-rank-row:hover { background: var(--sv-surface-high); }

/* Column 1 (spans 2) — rank num + avatar + name */
.sv-rank-row__member {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 16px;                       /* `gap-4` */
    min-width: 0;
}
.sv-rank-row__pos {
    /* Spec: `text-zinc-600 font-black italic` — Inter italic, NOT serif. */
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 900;
    color: var(--sv-zinc-600);
    min-width: 24px;
}
.sv-rank-row__member-inner {
    display: flex;
    align-items: center;
    gap: 12px;                       /* `gap-3` */
    min-width: 0;
}
.sv-rank-row__avatar {
    width: 32px;
    height: 32px;
    background-color: var(--sv-zinc-800);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid rgba(77, 70, 53, 0.2);    /* outline-variant/20 */
}
.sv-rank-row__name {
    font-family: var(--font-body);
    font-weight: 700;                /* `font-bold` */
    font-size: 14px;                 /* `text-sm` */
    letter-spacing: -0.025em;        /* `tracking-tight` */
    color: var(--sv-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Column 2: profit (center, black weight, primary gold). */
.sv-rank-row__val {
    font-family: var(--font-body);
    font-weight: 900;                /* `font-black` */
    color: var(--sv-primary);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Columns 3-4: wagered + wins (center, muted, 14px). */
.sv-rank-row__wagered,
.sv-rank-row__wins {
    font-size: 14px;                 /* `text-sm` */
    color: var(--sv-on-surface-var);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Column 5: level chip (right-aligned, secondary silvery blue). */
.sv-rank-row__lvl-cell { text-align: right; }
.sv-rank-row__lvl {
    display: inline-block;
    padding: 2px 8px;                /* `px-2 py-0.5` */
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    background: var(--sv-surface-highest);
    color: var(--sv-secondary);
    letter-spacing: 0.02em;
}


/* ─── 7. Progression + streak ──────────────────────────────────── */

.sv-progress-bar {
    height: 4px;
    border-radius: var(--sv-radius-pill);
    background: var(--sv-surface-high);
    overflow: hidden;
}

.sv-progress-bar__fill {
    height: 100%;
    background: var(--sv-gold-gradient);
    border-radius: inherit;
    transition: width 800ms var(--sv-ease-out);
}

/* Streak — 7 quiet dots, last-claimed glows gold. */
.sv-streak {
    display: flex;
    gap: var(--sv-space-2);
    justify-content: space-between;
}

.sv-streak__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sv-surface-high);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--sv-on-surface-dim);
    font-family: var(--font-body);
}

.sv-streak__dot--done {
    background: var(--sv-gold-gradient);
    color: #181400;
    box-shadow: 0 0 0 2px rgba(233, 195, 73, 0.12);
}

.sv-streak__dot--today {
    background: var(--sv-surface-highest);
    color: var(--sv-gold-soft);
    box-shadow: 0 0 0 2px var(--sv-gold-soft);
}


/* ─── 8. Event hero + event row ────────────────────────────────── */

.sv-event-hero {
    position: relative;
    border-radius: var(--sv-radius-lg);
    overflow: hidden;
    padding: var(--sv-space-8) var(--sv-space-5);
    background:
        linear-gradient(180deg, rgba(7,7,9,0.1) 0%, rgba(7,7,9,0.85) 100%),
        var(--sv-surface-high);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.sv-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sv-space-3);
    padding: var(--sv-space-4) var(--sv-space-5);
    background: var(--sv-surface-high);
    border-radius: var(--sv-radius-md);
    margin-bottom: var(--sv-space-3);
}

.sv-event-row__title {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    color: var(--sv-on-surface);
}

.sv-event-row__meta {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sv-on-surface-dim);
}


/* ─── 9. Achievement chip + referral card ───────────────────────── */

.sv-ach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sv-space-3);
}

.sv-ach-chip {
    display: flex;
    align-items: center;
    gap: var(--sv-space-3);
    padding: var(--sv-space-3);
    background: var(--sv-surface-highest);
    border-radius: var(--sv-radius-md);
}

.sv-ach-chip--locked {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.sv-ach-chip__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--sv-radius-sm);
    display: grid;
    place-items: center;
    color: var(--sv-gold-soft);
    background: rgba(212, 175, 55, 0.08);
    font-size: 20px;
}

.sv-ach-chip__title {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    color: var(--sv-on-surface);
    line-height: 1.2;
}


/* ─── 10. Button variants ───────────────────────────────────────── */

.sv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sv-space-2);
    padding: 14px var(--sv-space-6);
    border-radius: var(--sv-radius-sm);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform var(--sv-dur-fast) var(--sv-ease-out),
                box-shadow var(--sv-dur-fast) var(--sv-ease-out),
                opacity var(--sv-dur-fast) var(--sv-ease-out);
    position: relative;
}

.sv-btn:active { transform: translateY(1px); }

.sv-btn--gold {
    background: var(--sv-gold-gradient);
    color: #181400;
    box-shadow: var(--sv-shadow-gold);
}
.sv-btn--gold:hover { filter: brightness(1.05); }

.sv-btn--ghost {
    background: transparent;
    color: var(--sv-on-surface);
    box-shadow: inset 0 0 0 1px rgba(233, 195, 73, 0.28);
}
.sv-btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(233, 195, 73, 0.5); }

.sv-btn--danger {
    background: var(--sv-danger-bg);
    color: var(--sv-danger);
}

.sv-btn--block { width: 100%; }


/* ─── 11. Top bar + bottom nav (screens opt in by wrapping `.sv`) ──
   Existing .top-bar / .bottom-nav remain untouched — these classes
   are used only where a screen has been fully migrated. */

.sv-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sv-space-3) var(--sv-space-4);
    background: var(--sv-glass-bg);
    -webkit-backdrop-filter: blur(var(--sv-glass-blur));
    backdrop-filter: blur(var(--sv-glass-blur));
    min-height: 56px;
}

.sv-topbar__brand {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    color: var(--sv-gold-soft);
    letter-spacing: -0.01em;
}

.sv-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: var(--sv-space-2) var(--sv-space-2) calc(var(--sv-space-3) + env(safe-area-inset-bottom, 0));
    background: var(--sv-glass-bg);
    -webkit-backdrop-filter: blur(var(--sv-glass-blur));
    backdrop-filter: blur(var(--sv-glass-blur));
}

.sv-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--sv-space-2);
    color: var(--sv-on-surface-dim);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.sv-bottom-nav__item--active {
    color: var(--sv-gold-soft);
}

.sv-bottom-nav__icon {
    font-size: 22px;
    line-height: 1;
}


/* ─── 12. Tonal utility helpers ─────────────────────────────────── */

.sv-flex         { display: flex; }
.sv-col          { display: flex; flex-direction: column; }
.sv-items-center { align-items: center; }
.sv-between      { justify-content: space-between; }
.sv-gap-1        { gap: var(--sv-space-1); }
.sv-gap-2        { gap: var(--sv-space-2); }
.sv-gap-3        { gap: var(--sv-space-3); }
.sv-gap-4        { gap: var(--sv-space-4); }
.sv-grid-2       { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sv-space-3); }
.sv-grid-3       { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sv-space-3); }

.sv-mt-2 { margin-top: var(--sv-space-2); }
.sv-mt-4 { margin-top: var(--sv-space-4); }
.sv-mt-6 { margin-top: var(--sv-space-6); }
.sv-mt-8 { margin-top: var(--sv-space-8); }
.sv-mb-2 { margin-bottom: var(--sv-space-2); }
.sv-mb-4 { margin-bottom: var(--sv-space-4); }
.sv-mb-6 { margin-bottom: var(--sv-space-6); }


/* ─── 11b. Sticky FYM top-bar (small logo + avatar) ──────────────
   Used above SV-styled screens. Matches the Stitch design: tiny
   gold FYM wordmark on the left, square avatar on the right,
   zinc-900 background with heavy drop shadow. */

.sv-topbar-mini {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sv-space-3) var(--sv-space-5);
    background: #18181b;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    min-height: 56px;
    margin-inline: calc(-1 * var(--sv-space-4));
    margin-top: calc(-1 * var(--sv-space-4));
}
.sv-topbar-mini__brand {
    display: flex;
    align-items: center;
    gap: var(--sv-space-3);
}
.sv-topbar-mini__logo {
    color: var(--sv-gold-deep);
    font-family: 'Material Symbols Outlined', sans-serif;
    font-variation-settings: 'FILL' 1;
    font-size: 22px;
    line-height: 1;
}
.sv-topbar-mini__word {
    font-family: 'Noto Serif', serif;
    font-weight: 900;
    font-style: italic;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--sv-gold-deep);
}
.sv-topbar-mini__avatar {
    width: 36px;
    height: 36px;
    background-size: cover;
    background-position: center;
    background-color: var(--sv-surface-highest);
    outline: 1px solid rgba(233, 195, 73, 0.24);
    outline-offset: -1px;
}


/* ─── 12b. Leaderboard-specific (search + tabs + empty) ─────────── */

.sv-lb-search {
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--sv-on-surface);
    font-family: var(--font-body);
    font-size: 14px;
    padding: var(--sv-space-2) var(--sv-space-2);
}
.sv-lb-search::placeholder {
    color: var(--sv-on-surface-dim);
    letter-spacing: 0.04em;
}

.sv-lb-search-results {
    background: var(--sv-surface-highest);
    border-radius: var(--sv-radius-md);
    padding: var(--sv-space-2);
    margin-bottom: var(--sv-space-4);
    max-height: 260px;
    overflow-y: auto;
}

.sv-lb-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--sv-space-5);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sv-lb-tabs::-webkit-scrollbar { display: none; }

.sv-lb-tab {
    flex: 1 0 auto;
    min-width: 68px;
    padding: var(--sv-space-2) var(--sv-space-3);
    background: transparent;
    border: 0;
    color: var(--sv-on-surface-dim);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--sv-radius-sm);
    transition: color var(--sv-dur-fast) var(--sv-ease-out),
                background var(--sv-dur-fast) var(--sv-ease-out);
}
.sv-lb-tab:hover { color: var(--sv-on-surface-var); }
.sv-lb-tab.active {
    color: var(--sv-gold-soft);
    background: rgba(233, 195, 73, 0.08);
}

.sv-rank-empty {
    padding: var(--sv-space-8) 0;
    text-align: center;
}

.sv-rank-list .sv-rank-row {
    cursor: pointer;
    transition: background var(--sv-dur-fast) var(--sv-ease-out);
    padding-inline: var(--sv-space-2);
    border-radius: var(--sv-radius-sm);
}
.sv-rank-list .sv-rank-row:hover {
    background: rgba(233, 195, 73, 0.04);
}


/* ─── 12c. Global Vault chat (on leaderboard screen) ────────────
   Translucent glass panel, asymmetric chat bubbles (left = other,
   right-flush = me in gold), system lines centered with thin
   surface-lowest chip. Matches the Stitch mock exactly. */

.sv-chat-panel {
    margin-top: var(--sv-space-8);
    background: rgba(53, 53, 52, 0.42);
    -webkit-backdrop-filter: blur(var(--sv-glass-blur));
    backdrop-filter: blur(var(--sv-glass-blur));
    box-shadow: var(--sv-shadow-xl);
    display: flex;
    flex-direction: column;
    min-height: 520px;
    position: relative;
}

.sv-chat-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sv-space-5) var(--sv-space-6);
    background-image: linear-gradient(to right,
        transparent 0%, rgba(77, 70, 53, 0.3) 50%, transparent 100%);
    background-position: bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}
.sv-chat-panel__title {
    display: flex;
    align-items: center;
    gap: var(--sv-space-2);
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    color: var(--sv-on-surface);
}
.sv-chat-panel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sv-gold-soft);
    animation: sv-pulse 2s ease-in-out infinite;
}
@keyframes sv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}
.sv-chat-panel__icons {
    display: flex;
    gap: var(--sv-space-4);
    color: var(--sv-on-surface-var);
}
.sv-chat-panel__icons .material-symbols-outlined {
    cursor: pointer;
    font-size: 20px;
    transition: color var(--sv-dur-fast) var(--sv-ease-out);
}
.sv-chat-panel__icons .material-symbols-outlined:hover { color: var(--sv-gold-soft); }

.sv-chat-feed {
    flex: 1;
    padding: var(--sv-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--sv-space-6);
    max-height: 420px;
    overflow-y: auto;
}

/* One message — avatar + body pair. `--me` flips direction. */
.sv-chat-msg {
    display: flex;
    align-items: flex-start;
    gap: var(--sv-space-3);
    max-width: 85%;
}
.sv-chat-msg--me {
    flex-direction: row-reverse;
    margin-left: auto;
    text-align: right;
}
.sv-chat-msg__avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--sv-surface-highest);
    outline: 1px solid rgba(77, 70, 53, 0.4);
    outline-offset: -1px;
}
.sv-chat-msg--me .sv-chat-msg__avatar {
    background-color: rgba(242, 202, 80, 0.2);
    outline-color: rgba(242, 202, 80, 0.4);
}
.sv-chat-msg__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sv-chat-msg__meta {
    display: flex;
    gap: var(--sv-space-2);
    align-items: center;
    font-size: 10px;
}
.sv-chat-msg--me .sv-chat-msg__meta { justify-content: flex-end; }
.sv-chat-msg__name {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sv-on-surface-var);
    font-size: 11px;
}
.sv-chat-msg--me .sv-chat-msg__name { color: var(--sv-gold-soft); }
.sv-chat-msg__time { color: var(--sv-on-surface-dim); font-weight: 700; font-size: 9px; }
.sv-chat-msg__bubble {
    background: var(--sv-surface-high);
    padding: var(--sv-space-4);
    font-size: 14px;
    line-height: 1.55;
    color: rgba(229, 226, 225, 0.92);
    /* Left accent bar — a reflected-light line, not a plain border.
       The "no-line rule" is bent here because it reads as lighting. */
    box-shadow: inset 2px 0 0 0 rgba(184, 200, 218, 0.35);
}
.sv-chat-msg--me .sv-chat-msg__bubble {
    background: var(--sv-gold-gradient);
    color: #181400;
    font-weight: 700;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
}

.sv-chat-sys {
    display: flex;
    justify-content: center;
    padding-block: var(--sv-space-3);
}
.sv-chat-sys__chip {
    background: var(--sv-surface-lowest);
    padding: var(--sv-space-2) var(--sv-space-4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sv-on-surface-var);
    outline: 1px solid rgba(77, 70, 53, 0.3);
    outline-offset: -1px;
}

.sv-chat-input {
    display: flex;
    align-items: center;
    gap: var(--sv-space-3);
    padding: var(--sv-space-5) var(--sv-space-6);
    background: var(--sv-surface-lowest);
    background-image: linear-gradient(to right,
        transparent 0%, rgba(77, 70, 53, 0.3) 50%, transparent 100%);
    background-position: top;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}
.sv-chat-input__field {
    flex: 1;
    position: relative;
}
.sv-chat-input__text {
    width: 100%;
    background: var(--sv-surface-high);
    border: 0;
    color: var(--sv-on-surface);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 14px 80px 14px 16px;
    outline: 0;
    transition: background var(--sv-dur-fast);
}
.sv-chat-input__text:focus { background: var(--sv-surface-bright, #3a3939); box-shadow: 0 0 0 1px var(--sv-gold-soft); }
.sv-chat-input__text::placeholder { color: var(--sv-on-surface-dim); }
.sv-chat-input__tools {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: var(--sv-space-3);
    color: var(--sv-on-surface-dim);
}
.sv-chat-input__tools .material-symbols-outlined {
    font-size: 20px;
    cursor: pointer;
    transition: color var(--sv-dur-fast);
}
.sv-chat-input__tools .material-symbols-outlined:hover { color: var(--sv-gold-soft); }
.sv-chat-input__send {
    background: var(--sv-gold-gradient);
    border: 0;
    padding: 14px;
    color: #181400;
    cursor: pointer;
    transition: filter var(--sv-dur-fast);
    display: grid;
    place-items: center;
    min-width: 48px;
    min-height: 48px;
}
.sv-chat-input__send:hover { filter: brightness(1.1); }
.sv-chat-input__send .material-symbols-outlined { font-size: 22px; }


/* ─── 13. Motion helpers ───────────────────────────────────────── */

.sv-fade-in {
    animation: sv-fade-in var(--sv-dur-slow) var(--sv-ease-out) both;
}
@keyframes sv-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .sv-fade-in { animation: none; }
    .sv-game-card,
    .sv-game-card__img { transition: none; }
    .sv-progress-bar__fill { transition: none; }
}