/* ============================================
   FLIPLINE — Coinflip Marketplace
   ============================================ */
:root {
  --header-h: 84px;
  --subnav-h: 56px;
  --chat-w: 380px;
  --mobile-nav-h: 0px;
  /* Brand accent — EMERALD GREEN family (May 2026 rebrand from orange).
     The CSS variable name `--orange` is kept to avoid breaking every
     class that references it; the *value* is now emerald. New code
     should still use `var(--orange)`; gradual migration to a
     semantically-named token (--brand) can happen later. */
  /* Brand accent — ORANGE family (default). Users can switch to
     Emerald/Magenta/Blue from Settings → Appearance → Accent color;
     when they do, the JS code overrides these three vars at runtime
     by setting them on document.documentElement. The variable name
     `--orange` is kept so existing class references keep working. */
  --orange:      #FE9920;    /* orange 500 — main brand */
  --orange-h:    #FFA538;    /* orange 400 — hover */
  --orange-soft: rgba(254,153,32,0.22); /* tinted bg for chips/halos */
  /* Light theme palette (default) */
  --white: #FFFFFF;
  --g-50: #FCFCFC;
  --g-100: #FAFAFA;
  --g-150: #F6F6F6;
  --g-200: #EFEFEF;
  --g-300: #C8C8C8;
  --g-400: #B5B5B5;
  --g-500: #969696;
  --g-600: #838383;
  --g-700: #646464;
  --g-800: #323232;
  --g-900: #212121;
  --black: #000;
}

/* ============================================
   DARK THEME — calmer "near-black" palette with a slight cool undertone.
   Rewritten from scratch (May 2026) per user feedback: previous version
   was too literally black (#0E1014) which felt harsh next to bright
   surfaces; the new ladder lifts the page bg one notch, lifts surfaces
   slightly more, and reduces the contrast jumps so cards/modals feel
   elevated without screaming against the page.

   Design philosophy:
     • Page bg sits at ~6% white — perceptually dark but not pitch black,
       so the eye doesn't strain when bright cards appear over it.
     • 4 distinct surface elevations (page → alt → card → hover) with
       even ~3–4% perceptual steps so depth is readable.
     • Text top-out at #ECEFF5 (NOT pure white) — 8-bit-pure white on
       dark causes "glow" eye strain; off-white reads softer.
     • Borders quieter (5% white instead of 8%) — light mode uses very
       subtle borders, dark mode should match that "calm" energy.
     • Orange accent stays brand-saturated, but ::selection / -soft
       variants use lower alpha so they don't muddy surfaces.
   ============================================ */
[data-theme="dark"] {
  --white: #15181F;   /* page background — soft near-black, slight cool tint */
  --g-50:  #1A1E26;   /* alt bg (tickers, sidebars, code blocks) */
  --g-100: #1F232C;   /* primary surface (cards, modals, tickers) */
  --g-150: #272C37;   /* hover surface */
  --g-200: #313644;   /* visible divider / soft border */
  --g-300: #3F4555;   /* stronger border / disabled bg */
  --g-400: #5C6377;   /* disabled text */
  --g-500: #828A9C;   /* muted text (timestamps, captions) */
  --g-600: #A6ADBE;   /* secondary text (labels) */
  --g-700: #C5CAD6;   /* primary text mid */
  --g-800: #DFE3EB;   /* primary text */
  --g-900: #ECEFF5;   /* high-emphasis text (NOT pure white — easier on eyes) */
  --black: #ffffff;
  --overlay: rgba(0,0,0,0.62);
  --shadow:        0 4px 16px 0 rgba(0,0,0,0.45);
  --shadow-card:   0 1px 2px rgba(0,0,0,0.30), 0 4px 14px -4px rgba(0,0,0,0.45);
  --shadow-modal:  0 24px 60px -10px rgba(0,0,0,0.65);
  /* Soft tint of brand orange for hover halos, fills, etc. Keep this LOW
     alpha so it doesn't muddy surfaces. */
  --orange-soft: rgba(254,153,32,0.18);
}
[data-theme="dark"] body { background: var(--white); color: var(--g-800); }
[data-theme="dark"] .header {
  background: rgba(21,24,31,0.92);
  /* Slightly more visible than the previous 5% — dark mode needs a touch
     more contrast to register as a separator without going stark. */
  border-bottom: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
[data-theme="dark"] .mobile-nav {
  background: rgba(21,24,31,0.96);
  border-top: 1px solid rgba(255,255,255,0.09);
  box-shadow: none;
}

/* ============================================================
   DARK MODE — match light-mode visual cues
   Light mode uses subtle borders + shadows in many places (rgba(0,0,0,0.04)
   on white reads as a clean line). Those exact rgba values are invisible on
   dark surfaces, so we explicitly add darker-friendly equivalents.
   ============================================================ */
[data-theme="dark"] .filter-bar {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .ticker {
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
[data-theme="dark"] .flip-card {
  border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .flip-card:not(.rolling):not(.resolved):not(.cancelled):hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .modal {
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 28px 72px -8px rgba(0,0,0,0.6);
}
[data-theme="dark"] .inv-item,
[data-theme="dark"] .lbs-row,
[data-theme="dark"] .hist-row,
[data-theme="dark"] .ach-card,
[data-theme="dark"] .tip-cell,
[data-theme="dark"] .bp-cell,
[data-theme="dark"] .showcase-cell,
[data-theme="dark"] .wl-tile,
[data-theme="dark"] .lvr-card,
[data-theme="dark"] .user-popover,
[data-theme="dark"] .notif-drop,
[data-theme="dark"] .emoji-picker,
[data-theme="dark"] .lang-list,
[data-theme="dark"] .msg-ctx-menu,
[data-theme="dark"] .msg-menu,
[data-theme="dark"] .login-screen-inner {
  border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .h-search,
[data-theme="dark"] .login-input,
[data-theme="dark"] .chat-input-field,
[data-theme="dark"] .inv-search input,
[data-theme="dark"] .admin-search,
[data-theme="dark"] .wl-input,
[data-theme="dark"] .tip-note {
  border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .h-search:focus-within,
[data-theme="dark"] .login-input:focus,
[data-theme="dark"] .chat-input-field:focus-within {
  border-color: rgba(16,185,129,0.5);
}
[data-theme="dark"] .chat-side {
  border-right: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .footer {
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* Soften the logo text so it doesn't burn on the warm dark background */
[data-theme="dark"] .logo-text {
  background: linear-gradient(135deg, var(--g-900) 0%, var(--g-900) 65%, var(--orange) 65%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Surface depth — second-tier surfaces slightly lighter so cards pop off page */
[data-theme="dark"] .flip-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .prof-stat,
[data-theme="dark"] .lbs-row,
[data-theme="dark"] .ach-card,
[data-theme="dark"] .hist-row,
[data-theme="dark"] .inv-item,
[data-theme="dark"] .tip-cell,
[data-theme="dark"] .bp-cell,
[data-theme="dark"] .showcase-cell {
  background: var(--g-100);
  border-color: var(--g-200);
}
[data-theme="dark"] .flip-card:not(.rolling):not(.resolved):not(.cancelled):hover {
  background: var(--g-150);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* "MINE" flip — your own card. Old gradient was 10% orange tint on dark
   which muddied the surface. Use a slimmer left accent + flat dark bg so
   the card stays clean and the orange reads as a deliberate accent, not
   a wash. */
/* Orange accent now comes from .flip-card.mine::before (shared by both
   themes), so dark only needs the surface colors. */
[data-theme="dark"] .flip-card.mine { background: var(--g-100); }
[data-theme="dark"] .flip-card.mine:hover { background: var(--g-150); }
/* Rolling state — clean surface, no orange inset ring either (user
   complained about "stripes" on the card edges during a flip). */
[data-theme="dark"] .flip-card.rolling {
  background: var(--g-100);
  box-shadow: none;
}
/* Resolved cards — slightly dimmer so live ones stand out */
[data-theme="dark"] .flip-card.resolved {
  background: var(--g-50);
  opacity: 0.92;
}
/* Inputs & textareas — match surface, lighter text */
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  color: var(--g-800);
}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder {
  color: var(--g-500);
}
/* Soft selection color */
[data-theme="dark"] ::selection {
  background: rgba(255,255,255,0.04);
  color: var(--g-900);
}

/* ============================================
   DARK MODE — KEEP ALL LIGHT-MODE BORDERS
   User explicitly wants dark mode to be a 1:1 color-inverted copy of
   light mode: every border light mode has, dark mode also has — just
   in dark-mode-friendly colors. The previous "seamless" override that
   stripped borders is REMOVED. Borders now use var(--g-200) which in
   dark resolves to #2D3340 — visible but subtle, matching light mode.
   ============================================ */

/* Surfaces — slight bg lift instead of borders for hover/active feedback */
[data-theme="dark"] .h-search:focus-within { background: var(--g-200); }
[data-theme="dark"] .chat-input:focus { background: var(--g-150); }
[data-theme="dark"] .login-input:focus { background: var(--g-150); }
[data-theme="dark"] .admin-search:focus { background: var(--g-150); }
[data-theme="dark"] .wl-input:focus { background: var(--g-150); }
[data-theme="dark"] .tip-note:focus { background: var(--g-150); }
[data-theme="dark"] .admin-note-textarea:focus { background: var(--g-150); }
[data-theme="dark"] .admin-note-textarea { border: 0 !important; background: var(--g-100); }

/* ============================================
   NO-NEON OVERRIDE — kill all orange/gold glows in dark mode.
   Glows on dark surfaces read as cheap neon and the user explicitly
   doesn't want any. Replaces them with subtle neutral shadows.
   ============================================ */
/* .logo-img REMOVED from this list — it was drawing a dark drop-shadow
   box behind the logo image in dark mode (most visible on mobile). The
   logo is a self-contained SVG, it doesn't need a shadow plate. */
[data-theme="dark"] .h-wallet-cta,
[data-theme="dark"] .pm-row.pm-primary,
[data-theme="dark"] .lb-rank-1,
[data-theme="dark"] .big-coin .face.h,
[data-theme="dark"] .hero-event--gold .he-icon,
[data-theme="dark"] .event-gold .ev-icon,
[data-theme="dark"] .fc-empty-join:hover,
[data-theme="dark"] .fc-quick-join,
[data-theme="dark"] .featured-tag,
[data-theme="dark"] .chat-newmsg-pill,
[data-theme="dark"] .up-tip-btn,
[data-theme="dark"] .report-sent-icon,
[data-theme="dark"] .lvr-cur-num,
[data-theme="dark"] .bw-item,
[data-theme="dark"] .bw-counter,
[data-theme="dark"] .prof-banner-edit {
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
  filter: none !important;
}
/* Kill the winning-avatar ring pulse (it was orange neon) */
[data-theme="dark"] .fc-avatar.is-winner {
  box-shadow: 0 0 0 3px var(--orange) !important;
  animation: none !important;
}
/* Kill the subnav active glow if any */
[data-theme="dark"] .subnav-pill.is-active { box-shadow: none; }
/* Kill any text-shadow neon on the big-win counter */
[data-theme="dark"] .bw-counter { text-shadow: none !important; }
[data-theme="dark"] .h-search { background: var(--g-150); border-color: transparent; }
[data-theme="dark"] .h-profile { background: var(--g-150); }
[data-theme="dark"] .h-profile:hover { background: var(--g-200); }
[data-theme="dark"] .h-profile-avatar { box-shadow: 0 0 0 2px var(--white); }
[data-theme="dark"] .h-icon-btn { background: var(--g-150); color: var(--g-700); }
[data-theme="dark"] .h-icon-btn:hover { background: var(--g-200); color: var(--g-900); }
[data-theme="dark"] .h-icon-btn .dot { border-color: var(--g-150); }

/* Filter bar sticky bg matches body */
[data-theme="dark"] .filter-bar { background: var(--white); }

/* Subnav pills */
[data-theme="dark"] .subnav-pill { color: var(--g-600); }
[data-theme="dark"] .subnav-pill:not(.is-active):hover { background: var(--g-150); color: var(--g-900); }
/* Active state in dark mode — same underline approach as light mode.
   Pill stays transparent; underline + orange accent on the icon/sub
   carry the "active" signal. */
[data-theme="dark"] .subnav-pill.is-active { background: transparent; color: var(--g-900); }
[data-theme="dark"] .subnav-pill.is-active > i { color: var(--orange); }
[data-theme="dark"] .subnav-pill.is-active .subnav-label { color: var(--g-900); }
[data-theme="dark"] .subnav-pill.is-active .subnav-sub  { color: var(--orange); }
[data-theme="dark"] .subnav-pill.is-active::after { background: var(--orange); }

/* Chat */
[data-theme="dark"] .chat-side { background: var(--g-50); border-right: 1px solid rgba(255,255,255,0.04); }
[data-theme="dark"] .chat-head { background: rgba(26,30,38,0.92); border-bottom-color: transparent; }
[data-theme="dark"] .chat-tabs { background: rgba(26,30,38,0.92); }
[data-theme="dark"] .chat-tab.is-active { background: var(--g-200); color: var(--g-900); }
[data-theme="dark"] .chat-input-row { background: rgba(26,30,38,0.92); border-top-color: transparent; }
[data-theme="dark"] .chat-input-field { background: var(--g-100); }
[data-theme="dark"] .chat-input { background: transparent; color: var(--g-900); }
[data-theme="dark"] .chat-emoji { background: transparent; color: var(--g-600); }
[data-theme="dark"] .chat-emoji:hover, [data-theme="dark"] .chat-emoji.is-open { background: var(--g-150); color: var(--g-900); }
[data-theme="dark"] .emoji-picker { background: var(--g-50); border-color: var(--g-200); }
[data-theme="dark"] .chat-msg:hover { background: var(--g-50); }
[data-theme="dark"] .chat-msg.system .text b { color: var(--g-600); }

/* Modal & overlay — SOLID dark surface (no transparency, no blur).
   Uses the var(--g-100) so the modal always lifts ONE step above the
   page bg, even if the palette is re-tuned later. */
[data-theme="dark"] .modal {
  background: var(--g-100);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="dark"] .modal-overlay { background: var(--overlay); }
[data-theme="dark"] .modal-close:hover { background: var(--g-150); }
/* All major sheet modals get the same solid bg */
[data-theme="dark"] .modal.create-modal,
[data-theme="dark"] .modal.inv-modal,
[data-theme="dark"] .modal.tip-modal,
[data-theme="dark"] .modal.banner-picker-modal,
[data-theme="dark"] .modal.user-pop-modal,
[data-theme="dark"] .modal.report-modal,
[data-theme="dark"] .modal.lvr {
  background: var(--g-100);
}

/* Flip cards */
[data-theme="dark"] .flip-card { background: var(--g-100); }
[data-theme="dark"] .flip-card:not(.rolling):hover { background: var(--g-150); }
[data-theme="dark"] .fc-item .inner { background: var(--g-200); }
[data-theme="dark"] .fc-overflow { background: var(--g-200); color: var(--g-700); }
[data-theme="dark"] .fc-btn.view { background: var(--g-200); color: var(--g-800); }
[data-theme="dark"] .fc-btn.view:hover { background: var(--g-300); }

/* Tickers */
[data-theme="dark"] .ticker { background: var(--g-100); }
[data-theme="dark"] .ticker:hover { background: var(--g-150); }

/* (Dark mode now inherits ALL light-mode borders via var(--g-200) which
   resolves to a visible dark-friendly tone. No explicit override needed.) */

/* Lobby empty state */
[data-theme="dark"] .flip-grid > div[style*="background: var(--g-100)"] { background: var(--g-100) !important; }

/* Hero */
[data-theme="dark"] .hero { background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(255,255,255,0.04), transparent 60%), radial-gradient(ellipse 50% 70% at 30% 80%, rgba(255,255,255,0.04), transparent 55%), linear-gradient(135deg, #050913 0%, #0D0820 45%, #030308 100%); }

/* Featured (whale flip) */
[data-theme="dark"] .featured { background: linear-gradient(135deg, #2A1A05 0%, #3D2608 100%); color: #FFE9CF; }
[data-theme="dark"] .featured h3 { color: #FFE9CF; }
[data-theme="dark"] .featured p { color: rgba(255,233,207,0.7); }
[data-theme="dark"] .featured-tag { background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.04); }
[data-theme="dark"] .featured-cta { background: var(--g-900); color: var(--white); }

/* Profile menu */
[data-theme="dark"] .profile-menu { background: var(--g-100); border-color: var(--g-200); }
[data-theme="dark"] .pm-user { border-bottom-color: var(--g-200); }
/* Wallet "VALUE" chip in the profile dropdown — dark mode tuning.
   Brand color is ORANGE (not emerald) so the chip uses orange family.
   The big number is pure white for max contrast on the dark chip. */
[data-theme="dark"] .pm-balance {
  background: linear-gradient(135deg, rgba(254,153,32,0.14), rgba(254,153,32,0.05));
  border: 1px solid rgba(254,153,32,0.28);
}
[data-theme="dark"] .pm-balance-lbl { color: var(--orange); font-weight: 800; }
[data-theme="dark"] .pm-balance-val { color: var(--white); font-size: 19px; font-weight: 800; }
[data-theme="dark"] .pm-row:hover { background: var(--g-150); }
[data-theme="dark"] .pm-row.pm-danger:hover { background: rgba(255,255,255,0.04); }

/* Leaderboard */
[data-theme="dark"] .lb-table { background: var(--g-100); }
[data-theme="dark"] .lb-table-head { background: var(--g-50); color: var(--g-600); }
[data-theme="dark"] .lb-row { border-top-color: var(--g-200); }
[data-theme="dark"] .lb-row:hover { background: var(--g-150); }
[data-theme="dark"] .lb-top-card { background: var(--g-100); }
[data-theme="dark"] .lb-rank-1 { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, var(--g-100) 70%); }
[data-theme="dark"] .lb-rank-2 { background: linear-gradient(180deg, rgba(200,200,200,0.10) 0%, var(--g-100) 70%); }
[data-theme="dark"] .lb-rank-3 { background: linear-gradient(180deg, rgba(199,123,62,0.13) 0%, var(--g-100) 70%); }

/* Inventory */
[data-theme="dark"] .inv-search { background: var(--g-150); border-color: var(--g-200); }
[data-theme="dark"] .inv-search input { color: var(--g-900); }
[data-theme="dark"] .inv-item { background: var(--g-150); }
[data-theme="dark"] .inv-item:hover { background: var(--g-150); transform: none; }
[data-theme="dark"] .inv-item.selected { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .inv-empty h2 { color: var(--g-900); }
[data-theme="dark"] .inv-footer { border-top-color: var(--g-200); }
[data-theme="dark"] .inv-select-all { background: var(--g-200); color: var(--g-800); }
[data-theme="dark"] .inv-select-all:hover { background: var(--g-300); }

/* Bot deposit list */
[data-theme="dark"] .bot-item { background: var(--g-150); border-color: var(--g-200); color: var(--g-900); }
[data-theme="dark"] .bot-item:not(:disabled):hover { background: var(--g-200); border-color: var(--orange); }

/* Custom select dropdown */
[data-theme="dark"] .cs-btn { background: var(--g-150); border-color: var(--g-200); color: var(--g-900); }
[data-theme="dark"] .cs-btn:hover, [data-theme="dark"] .cs-btn.is-open { background: var(--g-200); border-color: var(--g-300); }
[data-theme="dark"] .cs-menu { background: var(--g-100); border-color: var(--g-200); }
[data-theme="dark"] .cs-item { color: var(--g-800); }
[data-theme="dark"] .cs-item:hover, [data-theme="dark"] .cs-item.is-active { background: var(--g-150); color: var(--g-900); }

/* Language menu */
[data-theme="dark"] .lang-btn { background: var(--g-150); }
[data-theme="dark"] .lang-btn:hover { background: var(--g-200); }
[data-theme="dark"] .lang-menu { background: var(--g-100); border-color: var(--g-200); }
[data-theme="dark"] .lang-item:hover, [data-theme="dark"] .lang-item.is-active { background: var(--g-150); }

/* Filter pills */
[data-theme="dark"] .fp { background: var(--g-150); color: var(--g-800); }
[data-theme="dark"] .fp:not(.is-active):hover { background: var(--g-200); }
/* Active filter pill — light mode is orange, dark must match. Using
   var(--g-900) with var(--white) here produced an off-white pill with
   dark text — looked wrong vs the orange site accent. */
[data-theme="dark"] .fp.is-active { background: var(--orange); color: #fff; }
[data-theme="dark"] .fp.is-active:hover { background: var(--orange-h); }
[data-theme="dark"] .fp.is-active i { color: #fff; }
[data-theme="dark"] .fp:not(.is-active) .count { background: var(--g-200); color: var(--g-700); }
[data-theme="dark"] .divider-v { background: var(--g-200); }

/* Confirm dialog & tutorial */
[data-theme="dark"] .confirm-btn.cancel { background: var(--g-200); color: var(--g-800); }
[data-theme="dark"] .confirm-btn.cancel:hover { background: var(--g-300); }
[data-theme="dark"] .tutorial-card { background: var(--g-100); }
[data-theme="dark"] .tut-back { background: var(--g-200); color: var(--g-700); }
[data-theme="dark"] .tut-back:hover { background: var(--g-300); }
[data-theme="dark"] .tut-skip:hover { background: var(--g-200); }
[data-theme="dark"] .tut-dot { background: var(--g-200); }

/* Flip detail modal */
[data-theme="dark"] .fd-item { background: var(--g-150); }
[data-theme="dark"] .fd-pot { background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04)); }
[data-theme="dark"] .fd-pot-lbl { color: rgba(16,185,129,0.22); }
[data-theme="dark"] .fd-pot-val { color: var(--g-900); }

/* Toasts */
[data-theme="dark"] .toast { background: var(--g-200); }
[data-theme="dark"] .toast.lose { background: var(--g-150); }

/* Footer */
[data-theme="dark"] .footer { background: var(--g-50); }
[data-theme="dark"] .footer-legal { border-top-color: var(--g-200); }
[data-theme="dark"] .f-soc { background: var(--g-150); color: var(--g-700); }
[data-theme="dark"] .f-soc:hover { background: var(--g-200); color: var(--g-900); }
[data-theme="dark"] .age-badge { background: var(--g-300); }

/* Fair details */
[data-theme="dark"] .fair-details { background: var(--g-150); border-color: var(--g-200); }
[data-theme="dark"] .fair-row code { background: var(--g-50); border-color: var(--g-200); color: var(--g-700); }

/* Featured prize text */
[data-theme="dark"] .featured-prize { color: #FFE9CF; }

/* Logo */
[data-theme="dark"] .logo { color: var(--g-900); }

/* Side coin keep colorful */
[data-theme="dark"] .modal .side-card { background: var(--g-150); }
[data-theme="dark"] .modal .side-card.selected { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .amt-input { background: var(--g-150); }
[data-theme="dark"] .amt-input input { color: var(--g-900); }
[data-theme="dark"] .amt-input .max { background: var(--g-200); color: var(--g-700); }
[data-theme="dark"] .quick-amts button { background: var(--g-200); color: var(--g-700); }
[data-theme="dark"] .quick-amts button:hover { background: var(--g-300); }
[data-theme="dark"] .summary-div { background: var(--g-200); }

/* Chat backdrop subtler on dark */
[data-theme="dark"] .chat-backdrop.is-visible { background: rgba(0,0,0,0.5); }

/* ============================================
   SEASONAL THEME OVERRIDES (admin-toggleable later)
   Apply via data-season="halloween" | "xmas"
   ============================================ */
[data-season="halloween"] {
  --orange: #FF6F00;
  --orange-h: #FF8A1F;
  --orange-soft: #FFD7A0;
}
[data-season="halloween"] .hero { background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(255,111,0,0.45), transparent 60%), radial-gradient(ellipse 50% 70% at 30% 80%, rgba(124,58,237,0.50), transparent 55%), linear-gradient(135deg, #1A0820 0%, #0A0510 100%); }
[data-season="halloween"] .logo-mark::after { background: radial-gradient(circle at 35% 30%, #FFCC80, #FF6F00 60%, #5A2200); }

[data-season="xmas"] {
  --orange: #C62828;
  --orange-h: #E53935;
  --orange-soft: #FFCDD2;
}
[data-season="xmas"] .hero { background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(46,125,50,0.40), transparent 60%), radial-gradient(ellipse 50% 70% at 30% 80%, rgba(198,40,40,0.40), transparent 55%), linear-gradient(135deg, #102818 0%, #061410 100%); }
[data-season="xmas"] .logo-mark::after { background: radial-gradient(circle at 35% 30%, #FFCDD2, #C62828 60%, #5B0F0F); }

:root {
  --blue: #2E7DFF;
  --purple: #8B5CF6;
  --magenta: #FF3D9A;
  --emerald: #10B981;
  --gold: #FFD64A;
  --red: #EF4444;
  --overlay: rgba(33,33,33,0.32);
  --shadow: 0 4px 18px 0 rgba(0,0,0,0.03);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.02), 0 4px 14px -4px rgba(0,0,0,0.06);
  --shadow-modal: 0 24px 60px -10px rgba(0,0,0,0.20);
  --motion: 0.2s ease-in-out;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--white); color: var(--g-900); font-family: 'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 16px; line-height: 1.45; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
/* Reserve the scrollbar gutter at all times so opening a modal (which adds
   overflow:hidden to <body>) doesn't shift the layout by ~15px. */
html { scrollbar-gutter: stable; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; letter-spacing: 0; }
input { font-family: inherit; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }
/* Minimal subtle scrollbars (auto-hide on inactivity) */
* { scrollbar-width: thin; scrollbar-color: var(--g-200) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--g-200); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-300); }
::-webkit-scrollbar-track { background: transparent; }
body { overflow-x: hidden; }

/* ============================================================
   MOBILE: lock the document, scroll INSIDE #root.
   ============================================================
   Goal: keep iOS Safari / Chrome's URL bar fully expanded at all times,
   even while the user scrolls. The trick:

   1. Make the DOCUMENT non-scrollable (html + body overflow:hidden).
      The browser won't fire a page-level scroll → no auto-collapse.

   2. Size everything to 100svh (Small Viewport Height) instead of dvh.
      svh = "always assume the browser chrome is expanded". Using dvh
      lets Safari shrink the viewport as the chrome collapses, which
      triggers the very collapse we're trying to avoid. svh keeps the
      viewport locked to the smaller (URL-bar-visible) size at all
      times — so Safari has no reason to grow it by hiding the bar.

   3. Use overscroll-behavior:none everywhere so a swipe at the top/
      bottom of the scroll container doesn't bleed into the document and
      retrigger browser chrome animation.

   Fallbacks: 100vh (legacy), 100dvh (iOS 15.4+ but not used as primary).
   */
@media (max-width: 980px) {
  html, body {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
    margin: 0;
  }
  #root {
    height: 100vh;
    height: 100svh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }
}
/* iOS Safari auto-zooms when input font-size < 16px. Force 16px on mobile to prevent. */
@media (max-width: 980px) {
  input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], input[type="tel"], textarea, select,
  .h-search input, .chat-input, .inv-search input, .amt-input input,
  .cs-btn { font-size: 16px !important; }
}
/* When a text input is focused on mobile, hide the bottom nav so the keyboard
   doesn't compete with it for screen real estate. */
@media (max-width: 980px) {
  /* Navbar stays put when input is focused — user explicitly requested this.
     We just lift the chat above where the navbar would sit. */
  body.input-focused .chat-side { bottom: 0; }
}
.bc-track::-webkit-scrollbar, .banner-carousel::-webkit-scrollbar { display: none; }
.bc-track, .banner-carousel { scrollbar-width: none; -ms-overflow-style: none; }

.shell { max-width: 1720px; margin: 0 auto; padding: 0 28px; }
.shell-wide { max-width: none; margin: 0; padding: 0 28px; }
.section { padding: 22px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.section-head h2 .count { font-size: 12px; font-weight: 500; color: var(--g-500); margin-left: 8px; }
.section-head .link { font-size: 13px; color: var(--g-700); font-weight: 500; transition: color var(--motion); }
@media (hover:hover) and (pointer:fine) { .section-head .link:hover { color: var(--g-900); } }

/* ============================================
   HEADER
   ============================================ */
/* Sticky header — `backdrop-filter: blur(12px)` was removed. On a page with
   many cards/images underneath (a populated lobby), the blur has to
   recomposite every scroll frame which causes the "10fps" feeling the user
   reported. Solid background reads just as cleanly.
   Layout: tight padding + overflow:visible so the logo can render LARGER
   than the header bounds without making the header itself taller. The
   logo uses negative margins to "eat into" the flex layout. */
.header {
  /* iOS PWA: shift the inner content below the notch / status bar.
     env(safe-area-inset-top) is 0 on desktop and ~47px on a notched iPhone. */
  padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px;
  /* Fixed (not sticky) so the header stays visible even when a modal locks
     body scroll. With sticky, body overflow:hidden + scroll position kept
     the header above the viewport when a modal opened from a scrolled
     state — header looked "gone". Fixed pins it to the viewport top. */
  position: fixed;
  top: 0; left: 0; right: 0;
  /* z-index 150 — sits ABOVE the .modal-overlay (z-index: 100) AND above
     the mobile full-screen chat overlay (z-index: 1100 — yes, on mobile we
     specifically bump header above chat so its top is never naked). */
  z-index: 150;
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  overflow: visible;
}
/* (padding-top to reserve scroll space under the fixed header is set on
    the .app-layout rule further down, around line 969.) */
.header-row { overflow: visible; }
.h-left { overflow: visible; }
/* Topbar layout: logo on the left, search dominates the middle, actions
   right. Search column is `minmax(0,1fr)` so it stretches and eats the
   extra horizontal space — no more huge gaps between sections on PC. */
/* Header layout: logo left, search anchored to the LEFT of the center
   column (lines up horizontally with the Heads/Tails filter buttons in
   the lobby below), actions right. */
.header-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 0 40px; width: 100%; }
.h-left { display: flex; align-items: center; gap: 16px; min-width: 0; justify-self: start; }
/* h-center: bumped padding-left so the search bar starts horizontally at
   the same X as the Coinflip subnav pill below (which sits inside .shell
   with the standard app-layout padding). */
.h-center { display: flex; align-items: center; justify-content: flex-start; min-width: 0; width: 100%; padding-left: 56px; }
.h-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; justify-self: end; }
/* Header logo — the SVG already contains the "BLOX.HOT" wordmark, so we
   just render it wide and don't add a separate text span. Aspect-ratio is
   preserved by letting width drive the size while height adapts. */
.logo { display: flex; align-items: center; line-height: 1; padding: 0 4px 0 0; }
/* QUALITY FIX — full logo (icon + wordmark) as one image, but served
   at FOUR pre-resampled PNG sizes via srcset. The browser picks the
   right density (1x / 2x / 3x / 4x) for the screen, so retina + 3x
   phones get a properly-sharp logo instead of a blurry browser-
   downscaled raster. Generation pipeline: extracted the embedded PNG
   from bloxhotlogo31.svg, Lanczos-resampled offline to 80/160/240/320
   pixel heights (= 221, 441, 662, 882 wide @ 2.756:1 aspect). */
.logo--full {
  align-self: center;
  display: inline-flex;
  align-items: center;
  /* Clickable but never selectable or draggable */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
/* BIG logo on every breakpoint per user request. SVG so it scales
   crisply — and using negative top/bottom margin to overflow the
   header bounds so the logo can be visually huge without forcing
   the header to grow taller (would shove every other element down). */
.logo--full {
  margin: -28px 0;
  /* Belt-and-suspenders: kill ANY box-shadow / filter / drop-shadow
     that some dark-mode override might be applying to descendants.
     Mobile dark mode was leaking a 4px black shadow behind the SVG. */
  box-shadow: none !important;
  filter: none !important;
}
.logo--full .logo-img {
  width: auto;
  height: 112px;
  max-width: 360px;
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: transparent !important;
  /* Triple-strength shadow kill — there was an earlier dark-mode rule
     adding a box-shadow plate behind .logo-img. Even after removing it
     from that selector list, we belt-and-suspender here so future edits
     can't accidentally re-add the shadow. */
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  /* Hint browsers to use their best resample path */
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
}
/* Dark-mode override — explicitly nuke shadow + filter again at higher
   specificity than the no-neon rule, in case any future selector tries
   to re-introduce one. */
[data-theme="dark"] .logo--full,
[data-theme="dark"] .logo--full .logo-img {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  background: transparent !important;
}
.logo-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 65%, var(--orange) 65%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: 28px;
}
.logo-dot { color: var(--orange); -webkit-text-fill-color: var(--orange); }
/* Legacy logo-mark kept for non-header references */
.logo-mark { width: 30px; height: 30px; border-radius: var(--r-md); background: var(--g-900); display: grid; place-items: center; color: var(--gold); position: relative; overflow: hidden; }
.logo-mark::after { content:""; position: absolute; inset: 5px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #FFE89A, #10B981 60%, #B7560B); }
.logo-mark::before { content:""; position: absolute; top: 9px; left: 9px; width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.5); z-index: 1; }
/* Search bar — PC = fills available middle column, mobile = compact.
   max-width raised 640 → 880 so the search dominates the topbar (was looking
   small with too much empty space on either side). */
.h-search {
  width: 100%;
  /* Capped narrower so the search bar's right edge aligns roughly with
     the Heads/Tails coin filter pills below in the lobby — not stretched
     to the actions column. */
  max-width: 640px;
  min-width: 280px;
  height: 44px;
  background: var(--g-150);
  border-radius: var(--r-md);
  display: flex; align-items: center;
  padding: 0 16px; gap: 10px;
  transition: background var(--motion);
}
/* On desktop, chat is always open — hide the close button inside it */
@media (min-width: 981px) {
  .chat-side .chat-close { display: none; }
}
/* Mobile: inline search is replaced with a button that opens a full-screen
   search sheet (see .msp-* and .h-search-mobile-btn rules below). The
   h-center column is therefore empty on mobile, which lets the logo take
   real estate and dominate the topbar like the user wants. */
@media (max-width: 980px) {
  .header-row { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 12px; }
  /* Hide inline desktop search on mobile — we use the popup instead */
  .h-search--desktop { display: none !important; }
  /* Show mobile search trigger button */
  .h-search-mobile-btn { display: grid; }
  /* Tablet / large phone — much bigger per user request */
  .logo--full { margin: -26px 0; }
  .logo--full .logo-img { height: 104px; max-width: 320px; }
  .logo-text { font-size: 20px; }
}
/* Hide the mobile search button on desktop (default state, ≥981px) */
@media (min-width: 981px) {
  .h-search-mobile-btn { display: none !important; }
}
@media (max-width: 480px) {
  .header-row { gap: 6px; padding: 0 10px; }
  /* Phone — MUCH bigger per user request. Search is now a popup-button
     (single icon) so there's plenty of horizontal room for a fat logo. */
  .logo--full { margin: -22px 0; }
  .logo--full .logo-img { height: 92px; max-width: 280px; }
  .logo-text { font-size: 16px; }
}

/* ============================================================
   Mobile search popup (.msp-*) — full-screen sheet that slides
   down from the top with a single big search field. Mirrors the
   notifications dropdown UX (tap icon → popup) for consistency.
   ============================================================ */
.h-search-mobile-btn { position: relative; }
.h-search-btn-dot {
  position: absolute;
  top: 9px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 2px var(--g-150);
  pointer-events: none;
}
.msp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 28, 0.55);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: msp-fade-in 0.18s ease-out both;
}
@keyframes msp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.msp-sheet {
  width: 100%;
  max-width: 560px;
  margin: 12px;
  background: var(--g-100);
  border-radius: 16px;
  padding: 14px 14px 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.18);
  animation: msp-slide-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes msp-slide-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.msp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--g-200);
  border-radius: 12px;
  padding: 0 12px;
  height: 48px;
}
.msp-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--g-900);
  min-width: 0;
}
.msp-input::placeholder { color: var(--g-500); }
.msp-clear {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--g-300);
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.msp-close {
  background: transparent;
  border: none;
  color: var(--orange);
  font-weight: 700;
  font-size: 14px;
  padding: 0 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.msp-hint {
  margin-top: 10px;
  color: var(--g-500);
  font-size: 12.5px;
  text-align: center;
}
[data-theme="dark"] .msp-sheet { background: var(--g-150); }
[data-theme="dark"] .msp-row  { background: var(--g-200); }
.h-search:focus-within { background: var(--g-200); }
.h-search input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; color: var(--g-900); }
.h-search input::placeholder { color: var(--g-500); }
.h-search-clear { width: 22px; height: 22px; border-radius: 999px; background: var(--g-300); color: white; display: grid; place-items: center; transition: background var(--motion); flex-shrink: 0; }
.h-search-clear:hover { background: var(--g-500); }
.h-icon-btn { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--g-150); display: grid; place-items: center; color: var(--g-800); position: relative; transition: background var(--motion), color var(--motion); }
/* Theme toggle button — visible in the header on ALL viewports so the
   user can flip dark/light from anywhere without diving into menus.
   Sits left of the notifications bell in the .h-right cluster. */
.h-theme-mobile-btn { display: grid; }
.h-theme-mobile-btn i { transition: transform 0.25s ease; }
.h-theme-mobile-btn:active i { transform: rotate(-20deg); }
/* Tablet-only chat trigger — only the 981-1450px range needs this button,
   because chat moves from sidebar to overlay there. PC ≥1451 has the
   sidebar push, mobile ≤980 has the bottom-nav chat icon. */
.h-chat-tablet-btn { display: none; }
@media (max-width: 1450px) and (min-width: 981px) {
  .h-chat-tablet-btn { display: grid; }
}

/* Fairness button — same h-icon-btn family, gets a hover tooltip rendered
   below the button via a [data-tip] CSS pseudo-element trick (no JS needed). */
.h-fairness-btn { position: relative; }
.h-fairness-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--g-900); color: var(--white);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.30);
}
.h-fairness-btn[data-tip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--g-900);
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 200;
}
.h-fairness-btn:hover[data-tip]::after,
.h-fairness-btn:focus-visible[data-tip]::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.h-fairness-btn:hover[data-tip]::before,
.h-fairness-btn:focus-visible[data-tip]::before { opacity: 1; }
[data-theme="dark"] .h-fairness-btn[data-tip]::after { background: var(--g-150); color: var(--g-900); }
[data-theme="dark"] .h-fairness-btn[data-tip]::before { border-bottom-color: var(--g-150); }
/* Hide tooltip variant on tablet/mobile — there it's already in the drawer. */
@media (max-width: 1450px) {
  .h-fairness-btn { display: none; }
}

/* ============================================================
   HAMBURGER MENU BUTTON + SIDE DRAWER
   The hamburger sits in the h-left cluster (before the logo). It's the
   primary nav trigger ONLY on the tablet / small-laptop range; PC has
   the header SubNav and mobile has the bottom mobile-nav.
   Hidden by default, shown via @media in the tablet range below.
   ============================================================ */
.hdr-burger {
  display: none;
  width: 42px; height: 42px;
  margin-right: 6px;
  border-radius: 10px;
  background: var(--g-150);
  color: var(--g-800);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  transition: background var(--motion);
  flex-shrink: 0;
  border: 0; cursor: pointer;
}
.hdr-burger:hover { background: var(--g-200); }
.hdr-burger-line {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
[data-theme="dark"] .hdr-burger { background: var(--g-100); color: var(--g-800); }
[data-theme="dark"] .hdr-burger:hover { background: var(--g-150); }

/* Tablet / small-laptop activation — show hamburger, hide header SubNav.
   PC threshold 1451px — anything below collapses into the drawer. */
@media (max-width: 1450px) and (min-width: 981px) {
  .hdr-burger { display: flex; }
  .h-subnav { display: none !important; }
  /* h-center is now empty in this range — let h-left/h-right take the
     full topbar width, no awkward gap. */
  .h-center { display: none; }
  .header-row { grid-template-columns: auto auto; justify-content: space-between; }
}

/* ===== Side drawer (slides in from left) ===== */
.hdr-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9100;
  animation: modal-fade 0.18s ease;
}
.hdr-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(86vw, 320px);
  background: var(--white);
  z-index: 9200;
  display: flex; flex-direction: column;
  box-shadow: 2px 0 30px rgba(0,0,0,0.20);
  animation: drawer-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
[data-theme="dark"] .hdr-drawer {
  background: var(--g-100);
  box-shadow: 2px 0 30px rgba(0,0,0,0.55);
}

.hdr-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--g-200);
}
.hdr-drawer-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; color: var(--g-900); }
.hdr-drawer-brand .brandmark-icon { width: 28px; height: 28px; }
.hdr-drawer-brand .brandmark-dot { color: var(--orange); }
.hdr-drawer-brand .brandmark-hot { color: var(--orange); }

.hdr-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 12px 12px 16px;
  display: flex; flex-direction: column; gap: 14px;
}

.hdr-drawer-section { display: flex; flex-direction: column; gap: 4px; }
.hdr-drawer-divider { height: 1px; background: var(--g-200); margin: 4px 4px; }

.hdr-drawer-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: transparent;
  color: var(--g-800);
  font-size: 14.5px; font-weight: 600;
  border: 0; cursor: pointer;
  width: 100%; text-align: left;
  position: relative;
  transition: background var(--motion), color var(--motion);
}
.hdr-drawer-link > i:first-child {
  width: 20px;
  font-size: 16px;
  text-align: center;
  color: var(--g-600);
  flex-shrink: 0;
}
.hdr-drawer-link:hover { background: var(--g-150); color: var(--g-900); }
.hdr-drawer-link:hover > i:first-child { color: var(--g-900); }
/* Active state — calm gray surface lift with a single orange left bar.
   No orange-tint background (that was the ugly version). The bar reads
   as a clean "you are here" indicator without dominating the row. */
.hdr-drawer-link.is-active {
  background: var(--g-150);
  color: var(--g-900);
  padding-left: 17px;       /* compensate for the 3px left bar */
}
.hdr-drawer-link.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--orange);
}
.hdr-drawer-link.is-active > i:first-child { color: var(--orange); }
.hdr-drawer-link .hdr-drawer-chev { margin-left: auto; color: var(--orange); font-size: 11px; }
[data-theme="dark"] .hdr-drawer-link:hover { background: var(--g-150); }
[data-theme="dark"] .hdr-drawer-link.is-active { background: var(--g-150); }

.hdr-drawer-cta { padding: 8px 4px 0; }
.hdr-drawer-login {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 10px;
  background: var(--orange); color: white;
  font-weight: 700; font-size: 14px;
  border: 0; cursor: pointer;
  transition: background var(--motion);
}
.hdr-drawer-login:hover { background: var(--orange-h); }
@media (hover:hover) and (pointer:fine) { .h-icon-btn:hover { background: var(--g-200); } }
.h-icon-btn.is-active { background: var(--g-900); color: var(--white); }
.h-icon-btn.is-active .dot { border-color: var(--g-900); }
.h-icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; background: var(--magenta); border-radius: 999px; border: 2px solid var(--g-150); }
/* Wallet CTA — two-column card.
   LEFT (h-wallet-info):
     • Top row: bloxhotgem.svg + balance value (big, bold).
     • Bottom row: small uppercase "Value" label.
   RIGHT (h-wallet-action):
     • Square chip with wallet icon (brand orange).
   The whole card is ONE button; tapping anywhere opens the inventory
   sheet. Designed to match the StarPets reference layout but in our
   brand language (orange action, gem SVG, dark-card surface). */
.h-wallet-cta {
  display: inline-flex; align-items: stretch; gap: 0;
  height: 48px;                       /* a tick smaller than before (was 54) */
  padding: 5px 5px 5px 13px;
  background: var(--g-150);
  color: var(--g-900);
  border-radius: 11px;
  border: 0;                          /* no border — matches .h-icon-btn family */
  cursor: pointer;
  transition: background var(--motion);
}
.h-wallet-cta:hover { background: var(--g-200); }
[data-theme="dark"] .h-wallet-cta { background: var(--g-100); }
[data-theme="dark"] .h-wallet-cta:hover { background: var(--g-150); }

.h-wallet-info {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding-right: 14px;
  text-align: left;
}
.h-wallet-amt {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 800;       /* was 15 */
  color: var(--g-900);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.h-wallet-amt .gem-i { font-size: 13px; }
.h-wallet-num { display: inline-block; }
.h-wallet-lbl {
  font-size: 9.5px;                         /* was 10 */
  font-weight: 700;
  color: var(--g-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-top: 3px;
}

.h-wallet-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;          /* was 42 — shrunk to match new card */
  border-radius: 9px;
  background: var(--orange);
  color: white;
  font-size: 15px;
  flex-shrink: 0;
  align-self: center;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.18);
  transition: background var(--motion), transform 0.08s ease;
}
.h-wallet-cta:hover .h-wallet-action { background: var(--orange-h); }
.h-wallet-cta:active .h-wallet-action { transform: scale(0.94); }
[data-theme="dark"] .h-wallet-action { box-shadow: 0 2px 8px -2px rgba(0,0,0,0.18); }

/* Profile section in header — username + Profile subtitle + avatar */
.h-profile {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 6px 0 14px;
  background: var(--g-150); border-radius: var(--r-md);
  transition: background var(--motion);
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
}
.h-profile:hover { background: var(--g-200); }
.h-profile-info {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  line-height: 1.2;
  height: 32px;
}
.h-profile-name { font-size: 13.5px; font-weight: 700; color: var(--g-900); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-profile-sub { font-size: 10.5px; color: var(--g-500); font-weight: 500; margin-top: 1px; }
.h-profile-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg,#8B5CF6,#FF3D9A);
  color: white; display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
  position: relative;
}
/* Green online indicator removed per user request */

/* Old h-balance kept for compatibility but unused */
.h-balance { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; background: var(--g-150); border-radius: var(--r-md); transition: background var(--motion); }
@media (hover:hover) and (pointer:fine) { .h-balance:hover { background: var(--g-200); } }
.h-balance .amt { font-weight: 700; font-size: 14px; color: var(--g-900); display: inline-flex; align-items: center; gap: 8px; }
.h-balance .amt::before { content: ""; width: 13px; height: 13px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #FFE89A, #10B981 60%, #B7560B); display: inline-block; }
.h-balance-plus { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--orange); color: white; font-weight: 600; display: grid; place-items: center; font-size: 17px; line-height: 1; transition: background var(--motion); }
@media (hover:hover) and (pointer:fine) { .h-balance-plus:hover { background: var(--orange-h); } }
.h-wallet { height: 42px; padding: 0 14px; border-radius: var(--r-md); background: var(--g-150); color: var(--g-800); display: inline-flex; align-items: center; gap: 8px; transition: background var(--motion), color var(--motion); position: relative; font-size: 13px; font-weight: 600; }
.h-wallet .h-wallet-label { line-height: 1; }
@media (hover:hover) and (pointer:fine) { .h-wallet:hover { background: var(--g-200); color: var(--g-900); } }
.h-avatar { width: 42px; height: 42px; border-radius: var(--r-md); background: linear-gradient(135deg,#8B5CF6,#FF3D9A); color: white; display: grid; place-items: center; font-weight: 700; font-size: 13px; position: relative; cursor: pointer; transition: transform var(--motion); }
.h-avatar:hover { transform: translateY(-1px); }
.h-avatar-wrap { position: relative; }
.h-avatar::after { content: ""; position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; background: var(--emerald); border-radius: 999px; border: 2px solid white; }

/* Language switcher */
.lang-switch { position: relative; }
.lang-btn { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--g-150); display: grid; place-items: center; transition: background var(--motion); overflow: hidden; }
@media (hover:hover) and (pointer:fine) { .lang-btn:hover { background: var(--g-200); } }
.lang-btn .fi { width: 22px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
/* Default flag image size — overridden in specific contexts */
.lang-flag {
  width: 18px; height: 18px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  display: inline-block;
  vertical-align: middle;
}
.lang-btn .lang-flag { width: 24px; height: 24px; }
.lang-item .lang-flag { width: 22px; height: 22px; }
.chat-tab .lang-flag { width: 14px; height: 14px; }
.lang-menu {
  position: absolute; top: 50px; right: 0;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: 0 12px 36px -8px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
  padding: 6px; min-width: 200px;
  max-height: 380px; overflow-y: auto; z-index: 60;
  animation: dropdown-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top right;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.lang-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--g-800); transition: background var(--motion); }
.lang-item:hover { background: var(--g-100); }
.lang-item.is-active { background: var(--g-100); color: var(--g-900); font-weight: 600; }
.lang-item .fi { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); flex-shrink: 0; }

/* Subnav — two-variant layout:
   • variant="page"  (default) → rendered below the header, visible on MOBILE.
   • variant="header"          → rendered inside .h-center, visible on DESKTOP.
   The duplicate-render approach keeps each variant simple (no DOM-portal
   trickery) and the inactive variant is collapsed via CSS display:none. */
.subnav-wrap { padding: 0 28px; }
@media (max-width: 980px) { .subnav-wrap { padding: 0 16px; } }
/* On desktop the subnav lives in the header → hide the page-level one. */
@media (min-width: 981px) {
  .subnav-wrap--page { display: none !important; }
}
/* On mobile the header is too narrow for pills → hide the header-embedded
   subnav and let the page-level one take over below the topbar. */
@media (max-width: 980px) {
  .subnav-wrap--header { display: none !important; }
}
/* Header variant: pills STRETCH to the full header content-row height
   so the active underline can anchor right at the header's bottom border.
   Header itself has padding-top + padding-bottom of 8px each — the pill
   sits inside that content area, so the underline needs to be pushed
   down by `(padding-bottom + border) = 9px` to reach the visible bottom
   line. `.h-subnav .subnav-pill.is-active::after { bottom: -9px }` does
   this cleanly without any margin trickery. */
.h-center { align-self: stretch; align-items: stretch; overflow: visible; }
.h-subnav { display: flex; align-items: stretch; min-width: 0; flex: 1; height: 100%; }
.h-subnav .subnav-wrap--header { padding: 0; display: flex; align-items: stretch; height: 100%; }
.h-subnav .subnav { padding: 0; gap: 6px; align-items: stretch; height: 100%; overflow: visible; }
.h-subnav .subnav-pill {
  align-self: stretch;
  height: auto;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 0;
  position: relative;
  overflow: visible;       /* so the absolutely-positioned underline is not clipped */
  transition: color var(--motion);
}
/* Has-sub pills (Coinflip / Dice / Events) — icon aligned with label top,
   whole stack vertically centered within the full-height pill. */
.h-subnav .subnav-pill.has-sub {
  align-items: center;   /* keep the stack centered vertically */
  gap: 9px;
}
.h-subnav .subnav-pill.has-sub > i {
  align-self: flex-start;
  margin-top: 14px;      /* nudge icon to label cap-height inside full-height pill */
  line-height: 1;
}
.h-subnav .subnav-pill.has-sub .subnav-label-wrap { padding-top: 10px; }
.h-subnav .subnav-pill .subnav-label { font-size: 14.5px; font-weight: 600; line-height: 1.1; }
.h-subnav .subnav-pill .subnav-sub  { font-size: 11px; margin-top: 4px; font-weight: 700; line-height: 1; }
.h-subnav .subnav-pill > i           { font-size: 15px !important; }
.h-subnav .subnav-pill .subnav-sub .gem-i { font-size: 11px !important; }
/* Active underline — pushed DOWN 9px past the header's content area so
   it lands on top of the 1px bottom border (header padding-bottom = 8,
   border = 1, total = 9). The parent chain has overflow:visible so the
   underline isn't clipped. Solid 3px orange bar = the "you are here"
   indicator that reads as a real tab indicator. */
.h-subnav .subnav-pill.is-active::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 14px; right: 14px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--orange);
  z-index: 1;
}

/* HOVER — no background tint in the header subnav. Just brighten the
   text + icon color (StarPets reference style). Keeps the topbar quiet
   on hover instead of flashing a gray chip behind the pill. */
.h-subnav .subnav-pill:not(.is-active):hover { background: transparent !important; color: var(--g-900); }
.h-subnav .subnav-pill:not(.is-active):hover > i { color: var(--g-900); }
.h-subnav .subnav-pill:not(.is-active):hover .subnav-label { color: var(--g-900); }
[data-theme="dark"] .h-subnav .subnav-pill:not(.is-active):hover { background: transparent !important; color: #fff; }
[data-theme="dark"] .h-subnav .subnav-pill:not(.is-active):hover > i { color: #fff; }

/* TABLET / SMALL-LAPTOP RANGE — 981px to ~1300px.
   The full-size header pills + wallet CTA + profile chip + theme/bell/lang
   cluster don't all fit comfortably on common laptop widths. Shrink the
   pill padding/font progressively so nothing overlaps, but keep the
   structure (no hamburger collapse) since these viewports still have
   plenty of horizontal real estate — just not "huge". */
@media (max-width: 1300px) {
  .h-subnav .subnav { gap: 4px; }
  .h-subnav .subnav-pill { height: 44px; font-size: 13.5px; padding: 0 14px; border-radius: 10px; }
  .h-subnav .subnav-pill.has-sub { padding: 5px 14px; }
  .h-subnav .subnav-pill .subnav-label { font-size: 13.5px; }
  .h-subnav .subnav-pill .subnav-sub { font-size: 10px; margin-top: 3px; }
  .h-subnav .subnav-pill > i { font-size: 13.5px !important; }
}
@media (max-width: 1140px) {
  /* Very tight laptop / small-tablet — drop the sub-label (TOTAL VALUE)
     so the pills stay compact. Users still get the value from the Tickers
     row on the lobby itself, no functional loss. */
  .h-subnav .subnav-pill { height: 40px; padding: 0 11px; font-size: 13px; }
  .h-subnav .subnav-pill.has-sub { padding: 0 11px; align-items: center; }
  .h-subnav .subnav-pill.has-sub > i { margin-top: 0; }
  .h-subnav .subnav-pill .subnav-sub { display: none !important; }
  .header-row { gap: 14px; padding: 0 20px; }
  .h-right { gap: 8px; }
  .h-wallet-cta { height: 48px; padding: 4px 4px 4px 12px; }
  .h-wallet-action { width: 38px; height: 38px; font-size: 14px; }
  .h-wallet-amt { font-size: 13.5px; }
  .h-wallet-lbl { font-size: 9px; margin-top: 3px; }
  .h-profile-info { display: none; }   /* hide "@username / Lv N" text */
}
@media (max-width: 1024px) and (min-width: 981px) {
  /* Just above the mobile breakpoint — pills get TIGHT.
     Switch labels to icon-only style (still visible, but compact). */
  .h-subnav .subnav-pill { padding: 0 9px; gap: 5px; }
  .h-subnav .subnav-pill .subnav-label { font-size: 12.5px; }
  .h-icon-btn { width: 38px; height: 38px; }
  .h-wallet-cta { height: 44px; padding: 3px 3px 3px 10px; }
  .h-wallet-action { width: 34px; height: 34px; font-size: 13px; }
  .h-wallet-info { padding-right: 10px; }
}
.subnav { display: flex; align-items: center; gap: 4px; padding: 10px 0 14px; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--g-700); white-space: nowrap; transition: background var(--motion), color var(--motion); }
/* Pill with a secondary label (e.g. Events with countdown) — icon aligns
   with the TOP row (the primary label), not centered against the label+sub
   stack. Same logic as .h-subnav .has-sub — see comment there. */
.subnav-pill.has-sub {
  height: auto;
  padding: 6px 13px;
  align-items: flex-start;
  gap: 7px;
}
.subnav-pill.has-sub > i {
  align-self: flex-start;
  margin-top: 2px;
  line-height: 1;
}
.subnav-label-wrap { display: inline-flex; flex-direction: column; line-height: 1.05; }
.subnav-sub {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.04em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.subnav-sub--online { color: var(--emerald); }
.subnav-sub--new {
  background: var(--orange);
  color: white !important;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 8.5px;
  letter-spacing: 0.08em;
}
.subnav-sub-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--emerald);
  animation: pulse 1.4s ease-in-out infinite;
}
/* Active state — UNDERLINE style (StarPets-inspired).
   Old behaviour was a solid orange fill which dominated the header.
   New: pill keeps neutral colors, gets a brand-orange underline at the
   bottom edge so the active tab reads as a tab indicator, not a button.
   Sub-label (gem + value) gets the brand orange for emphasis. */
.subnav-pill { position: relative; }
.subnav-pill.is-active { background: transparent; color: var(--g-900); }
.subnav-pill.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}
.subnav-pill.is-active > i { color: var(--orange); }
.subnav-pill.is-active .subnav-label { color: var(--g-900); font-weight: 700; }
.subnav-pill.is-active .subnav-sub  { color: var(--orange); }
.subnav-pill.is-active .subnav-sub--online { color: var(--emerald); }
.subnav-pill.is-active .subnav-sub-dot { background: var(--emerald); }
@media (hover:hover) and (pointer:fine) { .subnav-pill:not(.is-active):hover { background: var(--g-150); color: var(--g-900); } }
.subnav-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--emerald); }
.subnav-pill.live .dot { animation: pulse 1.4s ease-in-out infinite; }
.subnav-pill .new-badge { background: var(--orange-soft); color: #6B3D00; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

/* Mobile-only Create Flip button inside SubNav. Pushed to the far right
   (margin-left:auto) so the regular nav pills stay aligned to the left.
   Filled orange so it pops as a primary CTA. */
.subnav-create-mobile {
  display: none; /* desktop hides it via this; mobile @media unhides */
  align-items: center; gap: 6px;
  height: 34px;
  padding: 0 14px;
  margin-left: auto;
  background: var(--orange);
  color: white;
  border: 0;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.18);
  transition: background var(--motion), transform var(--motion);
  flex-shrink: 0;
}
.subnav-create-mobile:hover  { background: var(--orange-h); }
.subnav-create-mobile:active { transform: scale(0.96); }
.subnav-create-mobile i { font-size: 11px; }
@media (max-width: 980px) {
  .subnav-create-mobile { display: inline-flex; }
}

/* ============================================
   PAGE WRAPPER
   Desktop: chat is a sidebar (page shifts right).
   Mobile:  chat is an overlay (page stays put).
   ============================================ */
.page {
  min-height: calc(100vh - var(--header-h));
  /* padding-top reserves room for the FIXED .header so SubNav + app-layout
     don't slide under it. (Previously this padding was on .app-layout only,
     but SubNav lives outside .app-layout — it was getting hidden under the
     fixed header. Putting the reservation on .page covers everything inside.)
     NOTE: --header-h already includes env(safe-area-inset-top) on mobile
     (see the mobile @media override of --header-h), so we do NOT add it
     again here — doing so would double-count the notch (~47px gap above
     the banner on iPhone PWA). */
  padding-top: var(--header-h);
  padding-bottom: var(--mobile-nav-h);
  display: flex;
  flex-direction: column;
  transition: padding-left 0.28s ease;
  /* Hard cap so nothing inside the page can ever produce a horizontal
     scrollbar on mobile (e.g. a wide chat message, an item-row tooltip).
     Combined with body's overflow-x:hidden this guarantees no sideways
     bleed past the viewport. */
  max-width: 100vw;
  overflow-x: clip;
}
/* Sticky footer: push to the bottom of .page in a flex column. */
.page > .footer { margin-top: auto; }
/* Chat is a sidebar on REAL desktop (≥1451px), an overlay on tablet
   (981-1450px) and mobile (≤980px). Tablet/mobile share the overlay
   pattern: chat slides over the lobby instead of pushing it. */
@media (min-width: 1451px) {
  .page.with-chat { padding-left: var(--chat-w); }
}
@media (max-width: 1450px) and (min-width: 981px) {
  .page.with-chat { padding-left: 0; }
  /* Lift chat above the header so it's visually "on top" like a modal. */
  .chat-side { z-index: 160; }
  /* Show the backdrop in this range too — same as mobile overlay UX. */
  .chat-backdrop { display: block; }
  .chat-backdrop.is-visible {
    opacity: 1; pointer-events: auto;
    background: rgba(0,0,0,0.42);
    inset: var(--header-h) 0 0 0;
    z-index: 155;
  }
}
/* App layout: stretches to fill .page entirely (no centering, no max-width).
   When chat is open (.page.with-chat), .page gets padding-left of var(--chat-w)
   so layout-main naturally fills the remaining viewport — exactly like the
   original Flipline screenshot. */
.app-layout {
  width: 100%;
  /* Top reservation for the fixed header is on .page above (so SubNav also
     gets pushed down). Here only side/bottom padding. Top trimmed from
     10 → 6 per user request — banner + main content sit a tick higher
     and match the original Flipline screenshot density.
     `flex: 1` makes .app-layout EXPAND to fill the page's leftover space
     in the flex column — that's what pins .footer to the bottom on short
     pages (e.g. Settings, Rakeback with no content). Without it the
     footer floated up to wherever the content ended. */
  flex: 1;
  padding: 6px 24px 28px;
}
@media (max-width: 720px) {
  .app-layout { padding: 6px 12px 24px; }
}
.layout-main { min-width: 0; }

.chat-backdrop {
  position: fixed; inset: var(--header-h) 0 0 0;
  z-index: 24;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
  display: none;
}
@media (max-width: 980px) {
  .chat-backdrop { display: block; }
  .chat-backdrop.is-visible {
    opacity: 1; pointer-events: auto;
    background: rgba(0,0,0,0.42);
    inset: var(--header-h) 0 var(--mobile-nav-h) 0;
  }
}

/* ============================================
   CHAT — fixed left sidebar, attached under header
   ============================================ */
.chat-side {
  position: fixed;
  left: 0;
  top: var(--header-h);
  bottom: var(--mobile-nav-h);
  width: var(--chat-w);
  background: var(--g-100);
  border-right: 1px solid var(--g-200);
  box-shadow: 4px 0 24px -8px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  z-index: 25;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  overflow: hidden;
}
.chat-side.is-open { transform: translateX(0); }
/* Chat panel sub-header: visually flush with the main site header so the
   chat sidebar feels like a vertical extension of the topbar. Same bg as
   header, soft 1px divider only on the bottom (separator from messages).
   Slim padding so the header line continues uninterrupted. */
.chat-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--g-200);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: rgba(255,255,255,0.98);
  /* Tiny top shadow that mirrors the main header's bottom shadow — makes
     the two surfaces read as one continuous bar. */
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
  min-height: 44px;
}
[data-theme="dark"] .chat-head { background: rgba(21,24,31,0.96); border-bottom-color: rgba(255,255,255,0.06); }
.chat-head .ttl { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--g-900); }
.chat-head .ttl .online-pulse { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--emerald); text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; }
.chat-head .ttl .online-pulse .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--emerald); animation: pulse 1.4s ease-in-out infinite; }
.chat-close { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--g-600); transition: background var(--motion), color var(--motion); }
@media (hover:hover) and (pointer:fine) { .chat-close:hover { background: var(--g-150); color: var(--g-900); } }
.chat-tabs { display: flex; gap: 4px; padding: 8px 10px 6px; flex-shrink: 0; background: var(--g-100); }
.chat-tab { flex: 1; height: 30px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; color: var(--g-600); background: transparent; transition: background var(--motion), color var(--motion); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; }
.chat-tab.is-active { background: var(--white); color: var(--g-900); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
@media (hover:hover) and (pointer:fine) { .chat-tab:not(.is-active):hover { background: var(--white); color: var(--g-800); } }
.chat-tab .fi { width: 14px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
.chat-messages { flex: 1; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; }
.chat-msg {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  transition: background var(--motion);
  position: relative;
  /* Prevent native iOS text selection / callout menu on long-press —
     the long-press is reserved for our reaction picker. Otherwise iOS
     pops the copy/share toolbar and selects the message text, breaking
     the UX. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Re-allow selection ON DESKTOP only (where it's actually useful and
   doesn't conflict with our gesture). hover:hover targets devices with
   a real mouse pointer. */
@media (hover: hover) and (pointer: fine) {
  .chat-msg .text { -webkit-user-select: text; user-select: text; }
}
@media (hover:hover) and (pointer:fine) { .chat-msg:hover { background: var(--white); } }
.chat-msg .av { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: white; font-weight: 700; font-size: 12px; flex-shrink: 0; overflow: hidden; }
.chat-msg .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-msg .av-btn { border: 0; padding: 0; cursor: pointer; transition: transform 0.1s ease; }
.chat-msg .av-btn:hover { transform: scale(1.08); }
.chat-msg .body { min-width: 0; font-size: 14.5px; line-height: 1.45; word-break: break-word; }
.chat-msg .name { font-weight: 700; color: var(--g-900); font-size: 13.5px; transition: color var(--motion); }
/* Role-based chat name colors. Applied to .chat-msg .name via the
   .name--role-<X> modifier the JSX emits. Cosmetic only — purely a
   visual cue for "this person is admin / a high-level whale". */
.chat-msg .name--role-rookie { color: var(--g-900); }            /* default */
.chat-msg .name--role-vet    { color: #60A5FA; }                 /* lv20+ — calm blue */
.chat-msg .name--role-whale  {                                    /* lv50+ — gold gradient */
  background: linear-gradient(135deg, #FFD56B 0%, #10B981 55%, #C77B3E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(0,0,0,0.18);
}
.chat-msg .name--role-admin  {                                    /* admin — red, bold */
  color: #DC2626;
  font-weight: 800;
}
.chat-msg .name--role-admin::after {
  content: "MOD";
  display: inline-block;
  margin-left: 5px;
  background: #DC2626; color: white;
  font-size: 8.5px; font-weight: 800;
  padding: 1px 5px; border-radius: 3px;
  vertical-align: 1.5px;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .chat-msg .name--role-vet   { color: #93C5FD; }
[data-theme="dark"] .chat-msg .name--role-admin { color: #F87171; }
[data-theme="dark"] .chat-msg .name--role-admin::after { background: #F87171; color: #1A1E26; }

.chat-msg .lvl { display: inline-block; background: var(--g-200); color: var(--g-700); padding: 0 5px; border-radius: 3px; font-weight: 700; font-size: 9px; margin-left: 4px; vertical-align: 2px; }
.chat-msg .rank-emoji { display: inline-block; font-size: 12px; margin-left: 4px; line-height: 1; }
.chat-msg .text { color: var(--g-700); }
.chat-msg.mine { background: rgba(16,185,129,0.08); }
.chat-msg.mine .name { color: var(--orange); }
/* System message — subtle, no avatar, italic, slightly transparent so it
   reads as ambient info rather than a real chat reply. */
.chat-msg.system {
  grid-template-columns: 1fr;
  padding: 6px 10px;
  background: transparent;
  opacity: 0.6;
}
.chat-msg.system:hover { background: transparent; opacity: 0.85; }
.chat-msg.system .text {
  color: var(--g-600);
  font-size: 11.5px;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.01em;
}
.chat-msg.system .text b { font-weight: 700; color: var(--g-700); font-style: normal; }
/* ============================================
   CHAT — mention highlight, reactions, new-msg pill
   ============================================ */
.chat-msg.is-mention {
  background: rgba(16,185,129,0.08);
  border-left: 3px solid var(--orange);
  padding-left: 7px;
  border-radius: 4px;
  animation: mention-pulse 1.4s ease-out;
}
/* Long-press / right-click hint cursor on PC */
@media (hover: hover) and (pointer: fine) {
  .chat-msg { cursor: context-menu; }
}
/* Disable iOS text-selection + selection highlight on EVERY chat element
   so long-press opens the reaction picker cleanly without the blue
   "copy/select" UI getting in the way. */
.chat-msg,
.chat-msg * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* Allow tapping on actual interactive children (av button, reaction chips). */
.chat-msg button { -webkit-touch-callout: default; }
@keyframes mention-pulse {
  0%   { background: rgba(16,185,129,0.32); }
  100% { background: rgba(16,185,129,0.08); }
}
.chat-msg .body { position: relative; }
.msg-reactions { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.msg-react-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 999px;
  font-size: 11px; line-height: 1.2;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion), border-color var(--motion);
}
.msg-react-chip:hover { background: var(--g-200); transform: scale(1.05); }
.msg-react-chip.is-mine { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.4); }
.msg-react-chip:disabled { cursor: not-allowed; opacity: 0.6; }
.msg-react-count { font-weight: 700; color: var(--g-700); }
.msg-react-chip.is-mine .msg-react-count { color: var(--orange); }

/* 3-dot button on each chat message — JUST the dots, no background, no shadow.
   Sits in the top-right of the message body. */
.msg-menu-btn {
  position: absolute;
  right: 6px; top: 6px;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: transparent;
  border: 0;
  color: var(--g-500);
  display: grid; place-items: center;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  z-index: 4;
  padding: 0;
  transition: opacity 0.12s, color 0.15s;
}
.chat-msg:hover .msg-menu-btn { opacity: 0.7; }
.msg-menu-btn:hover { opacity: 1 !important; color: var(--g-900); }
/* Touch devices — ALWAYS visible so mobile users see it's tappable
   (we disabled long-press text selection so this is the primary way
   for them to open the context menu). */
@media (hover: none) {
  .msg-menu-btn {
    opacity: 1;
    background: var(--g-100);
    width: 26px; height: 26px;
    font-size: 14px;
  }
}
[data-theme="dark"] .msg-menu-btn { color: rgba(255,255,255,0.5); }
[data-theme="dark"] @media (hover: none) { .msg-menu-btn { background: rgba(255,255,255,0.08); } }

/* Invisible backdrop catches outside clicks to close the menu/picker.
   z-index 1500 — must be ABOVE the mobile-nav (z:1000) so the menu isn't
   hidden behind the bottom navbar on phones. */
.msg-ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: transparent;
}

/* Discord-style context menu — opens at click point, ABOVE the message.
   Rendered via portal to <body> so chat-side overflow:hidden can't clip it.
   z-index 1510 stays above the mobile bottom navbar. */
.msg-ctx-menu {
  position: fixed;
  z-index: 1510;
  width: 220px;
  background: white;
  border: 1px solid var(--g-200);
  border-radius: 10px;
  box-shadow: 0 14px 36px -8px rgba(0,0,0,0.24);
  padding: 6px;
  animation: msg-ctx-in 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="dark"] .msg-ctx-menu {
  background: #1e2026;
  border-color: transparent;
  box-shadow: 0 14px 36px -8px rgba(0,0,0,0.55);
}
[data-theme="dark"] .msg-ctx-quick-btn:hover { background: var(--g-200); }
[data-theme="dark"] .msg-ctx-item { color: var(--g-900); }
[data-theme="dark"] .msg-ctx-item:hover { background: var(--g-200); }
[data-theme="dark"] .msg-ctx-divider { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .msg-react-picker {
  background: #1e2026;
  border-color: transparent;
  box-shadow: 0 14px 36px -8px rgba(0,0,0,0.55);
}
@keyframes msg-ctx-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.msg-ctx-quick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 4px 2px;
}
.msg-ctx-quick-btn {
  width: 38px; height: 38px;
  border: 0; background: transparent;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.1s, transform 0.08s;
}
.msg-ctx-quick-btn:hover { background: var(--g-100); transform: scale(1.15); }
.msg-ctx-quick-btn.add {
  color: var(--g-500);
  font-size: 12px;
}
.msg-ctx-quick-btn.add:hover { background: var(--g-100); color: var(--g-900); }
.msg-ctx-divider { height: 1px; background: var(--g-200); margin: 4px 6px; }
.msg-ctx-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--g-500); padding: 2px 12px 4px; text-transform: uppercase; }

/* ============================================================
   VALUE MANAGER modal + admin value-request queue
   ============================================================ */
.vm-body { max-height: 70vh; overflow-y: auto; }
.vm-item-list { display: flex; flex-direction: column; gap: 4px; max-height: 42vh; overflow-y: auto; }
.vm-item-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--g-100); border: 1px solid var(--g-200);
  cursor: pointer; transition: background var(--motion);
  font-size: 13.5px; color: var(--g-900); text-align: left;
}
.vm-item-row:hover { background: var(--g-150); }
.vm-item-price { font-weight: 800; color: var(--g-800); white-space: nowrap; }
.vm-form { display: flex; flex-direction: column; gap: 8px; }
.vm-picked { background: var(--g-100); border: 1px solid var(--g-200); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 6px; }
.vm-picked-name { font-weight: 800; font-size: 15px; color: var(--g-900); }
.vm-picked-cur { font-size: 12.5px; color: var(--g-600); margin-top: 2px; }
.vm-label { font-size: 11px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.vm-input { height: 42px; border-radius: var(--r-sm); border: 1px solid var(--g-200); background: var(--g-100); padding: 0 12px; font-size: 14px; color: var(--g-900); outline: none; }
.vm-input:focus { border-color: var(--orange); }
.vm-form-actions { display: flex; gap: 8px; margin-top: 10px; }
.vm-form-actions .settings-btn { flex: 1; height: 42px; }
.vm-msg { padding: 8px 12px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; }
.vm-msg.win  { background: rgba(16,185,129,0.12); color: #10B981; }
.vm-msg.lose { background: rgba(239,68,68,0.12); color: #ef4444; }
.vm-mine { margin-top: 16px; border-top: 1px solid var(--g-200); padding-top: 12px; }
.vm-mine-label { font-size: 11px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.vm-mine-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 0; }
.vm-mine-name { font-weight: 700; color: var(--g-900); flex: 1; }
.vm-mine-change { color: var(--g-600); white-space: nowrap; }
.vm-status { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.vm-status.pending  { background: rgba(254,153,32,0.16); color: var(--orange); }
.vm-status.approved { background: rgba(16,185,129,0.16); color: #10B981; }
.vm-status.rejected { background: rgba(239,68,68,0.16); color: #ef4444; }
[data-theme="dark"] .vm-item-row, [data-theme="dark"] .vm-picked, [data-theme="dark"] .vm-input { background: var(--g-150); border-color: var(--g-200); }

.admin-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; margin-left: 6px; }
.admin-empty { color: var(--g-500); font-size: 13px; padding: 14px 4px; }
.vcr-list { display: flex; flex-direction: column; gap: 8px; }
.vcr-row { background: var(--g-100); border: 1px solid var(--g-200); border-radius: var(--r-md); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.vcr-item { grid-row: 1; }
.vcr-name { font-weight: 800; color: var(--g-900); }
.vcr-by { font-size: 11.5px; color: var(--g-500); }
.vcr-prices { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 8px; font-weight: 800; white-space: nowrap; }
.vcr-old { color: var(--g-500); text-decoration: line-through; }
.vcr-arrow.up { color: #10B981; } .vcr-arrow.down { color: #ef4444; }
.vcr-new.up { color: #10B981; } .vcr-new.down { color: #ef4444; }
.vcr-note { grid-column: 1 / -1; font-size: 12px; color: var(--g-600); font-style: italic; }
.vcr-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.vcr-actions .settings-btn.primary { background: var(--orange); color: #fff; }
[data-theme="dark"] .vcr-row { background: var(--g-100); border-color: var(--g-200); }
.msg-ctx-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent; border: 0;
  border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--g-800);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: left;
}
.msg-ctx-item:hover { background: var(--g-100); }
.msg-ctx-item.danger { color: var(--red); }
.msg-ctx-item.danger:hover { background: rgba(239,68,68,0.08); }
.msg-ctx-item > i:first-child { width: 14px; text-align: center; font-size: 12px; }
.msg-ctx-item > span { flex: 1; }
.msg-ctx-item .ctx-arrow { color: var(--g-400); font-size: 10px; }

/* Report message modal — matches the reference screenshot style */
/* Report modal — centered on page with a LIGHT shadow only (no blur).
   The overlay's own backdrop-filter is overridden to none on this variant. */
.modal-overlay.report-overlay {
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.report-modal {
  padding: 0;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.report-modal .modal-head { align-items: flex-start; padding: 22px 22px 12px; }
.report-modal .modal-head h3 { margin: 0; font-size: 18px; }
.report-modal .report-sub { font-size: 13px; color: var(--g-600); margin-top: 4px; }
.report-modal .modal-body { padding: 4px 22px 22px; }
.report-section-label {
  font-size: 11px; font-weight: 700; color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.report-msg-preview {
  display: flex; gap: 12px;
  padding: 12px;
  background: var(--g-100);
  border-radius: 10px;
  margin-bottom: 18px;
}
.report-msg-av { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; background: var(--g-200); }
.report-msg-av-fallback { display: grid; place-items: center; color: white; font-weight: 800; font-size: 12px; background: var(--orange); }
.report-msg-body { min-width: 0; flex: 1; }
.report-msg-name { font-weight: 700; font-size: 13px; color: var(--g-900); margin-bottom: 2px; }
.report-msg-text { font-size: 13px; color: var(--g-700); word-break: break-word; }
.report-options { display: flex; flex-direction: column; gap: 6px; }
.report-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: var(--g-100);
  border: 0;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--g-900);
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.report-option:hover { background: var(--g-150); }
.report-option i { color: var(--g-400); font-size: 12px; }

/* Summary step */
.report-cat-row {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--g-100);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
  margin-bottom: 18px;
}
.report-cat-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--orange);
  flex-shrink: 0;
}
.report-actions { display: flex; gap: 10px; margin-top: 6px; }
.report-btn-back, .report-btn-submit {
  flex: 1;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.report-btn-back { background: var(--g-150); color: var(--g-900); }
.report-btn-back:hover { background: var(--g-200); }
.report-btn-submit { background: var(--orange); color: white; }
.report-btn-submit:hover { background: var(--orange-h); }
.report-btn-back:active, .report-btn-submit:active { transform: translateY(1px); }

/* Sent confirmation step */
.report-sent {
  padding: 44px 28px 32px;
  text-align: center;
}
.report-sent-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #34D9A0, #047857);
  color: white;
  display: grid; place-items: center;
  font-size: 28px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18);
}
.report-sent h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  color: var(--g-900);
}
.report-sent p {
  margin: 0;
  font-size: 13px;
  color: var(--g-600);
}

/* ============================================
   FEATURED FLIP HERO — highest-pot card pinned above the lobby
   ============================================ */
.featured-flip-wrap {
  position: relative;
  margin: 12px 0 16px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(255,61,154,0.08), rgba(124,58,237,0.10));
  border: 2px solid transparent;
  background-clip: padding-box;
}
.featured-flip-wrap::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, var(--orange), #FF3D9A, #7C3AED, var(--orange));
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: featured-shimmer 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes featured-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.featured-tag {
  display: inline-flex; align-items: center; gap: 6px;
  position: absolute; top: -10px; left: 20px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #FFD64A, var(--orange));
  color: #5a2c00;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.18);
}
.featured-flip-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  position: relative;
  z-index: 1;
}
.featured-flip-grid .flip-card {
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.06);
}
[data-theme="dark"] .featured-flip-grid .flip-card { background: var(--g-100); }

/* ============================================
   ACTIVITY TICKER — scrolling band of recent events
   ============================================ */
.activity-ticker {
  display: flex; align-items: center;
  margin: 8px 0 14px;
  padding: 0;
  background: linear-gradient(90deg, #0f0d1a 0%, #1a1530 100%);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  height: 38px;
  color: white;
}
.ticker-live {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px;
  height: 100%;
  background: var(--red);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em;
}
.ticker-pulse-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: white;
  animation: ticker-pulse 1.2s ease-in-out infinite;
}
@keyframes ticker-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
.ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ticker-track {
  display: flex; gap: 32px; align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: ticker-scroll 80s linear infinite;
  padding-left: 24px;
}
.activity-ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-event {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  cursor: pointer;
  padding: 0;
}
.ticker-event b { color: white; font-weight: 700; }
.ticker-event:hover { color: #FFD64A; }
.ticker-event i { font-size: 11px; }
.ticker-tip i { color: #FFD64A; }
.ticker-win i { color: var(--emerald); }
.ticker-win.is-whale b { color: #FFD64A; }
.ticker-big-open i { color: var(--orange); }
.ticker-win-small i { color: var(--emerald); opacity: 0.6; font-size: 9px; }
.ticker-tag-whale {
  display: inline-block;
  background: linear-gradient(135deg, #FFD64A, var(--orange));
  color: #5a2c00;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px; font-weight: 900;
  margin-left: 6px;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .activity-ticker { height: 34px; font-size: 12px; }
  .ticker-live { padding: 0 10px; font-size: 9px; }
  .ticker-event { font-size: 12px; }
  .featured-tag { font-size: 9.5px; padding: 3px 10px; }
}

/* ============================================
   SHARE REPLAY BUTTON in FlipDetailModal
   ============================================ */
.fd-share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  color: var(--g-700);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.fd-share-btn:hover { background: white; border-color: var(--orange); color: var(--orange); }
.fd-share-btn i { font-size: 11px; }

/* ============================================
   BIG WIN CINEMATIC TAKEOVER
   ============================================ */
.big-win-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  display: grid; place-items: center;
  /* Deeper radial — gold core, dark vignette outside, no blur */
  background:
    radial-gradient(circle at center, rgba(16,185,129,0.42) 0%, rgba(0,0,0,0.88) 60%);
  animation: bw-overlay-in 0.25s ease-out;
  cursor: pointer;
  overflow: hidden;
}
@keyframes bw-overlay-in { from { opacity: 0; } to { opacity: 1; } }

.bw-stage {
  position: relative;
  text-align: center;
  color: white;
  padding: 40px 24px;
  z-index: 2;
}

/* Radial rays bursting outward */
.bw-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: -1;
}
.bw-ray {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: var(--len, 280px);
  background: linear-gradient(180deg, rgba(255,214,74,0.85), rgba(16,185,129,0) 90%);
  transform-origin: top center;
  transform: rotate(var(--ang)) translateY(-50%);
  opacity: 0;
  animation: bw-ray-burst 2.6s cubic-bezier(0.22, 0.6, 0.36, 1) forwards;
}
@keyframes bw-ray-burst {
  0%   { opacity: 0;   transform: rotate(var(--ang)) scaleY(0.1); }
  18%  { opacity: 0.9; transform: rotate(var(--ang)) scaleY(1); }
  100% { opacity: 0;   transform: rotate(var(--ang)) scaleY(1.05); }
}

/* Golden coin/sparkle particles bursting outward from the center */
.bw-coins {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.bw-coin-particle {
  position: absolute;
  top: 0; left: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #FFE89A, #10B981 55%, #B7560B);
  box-shadow:
    0 0 12px rgba(255,214,74,0.7),
    0 0 4px rgba(16,185,129,1);
  opacity: 0;
  animation: bw-coin-burst 1.6s cubic-bezier(0.22, 0.6, 0.36, 1) forwards;
}
@keyframes bw-coin-burst {
  0%   { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);                  opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* Trophy emoji at the very top — big and bouncy */
.bw-trophy {
  font-size: clamp(60px, 14vw, 110px);
  line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
  animation: bw-trophy-pop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-bottom: 10px;
}
@keyframes bw-trophy-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-15deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.bw-counter {
  font-size: clamp(56px, 14vw, 120px);
  font-weight: 900;
  background: linear-gradient(135deg, #FFE89A 0%, #FFD64A 40%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(0,0,0,0.18);
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  animation: bw-counter-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.bw-counter .gem {
  width: 0.7em; height: 0.7em;
  background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
}
@keyframes bw-counter-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}
.bw-title {
  font-size: clamp(18px, 3.5vw, 26px);
  font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: #FFD64A;
  margin: 12px 0 4px;
  animation: bw-title-in 0.5s ease-out 0.1s both;
  text-shadow: 0 0 18px rgba(0,0,0,0.18);
}
@keyframes bw-title-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bw-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
  animation: bw-title-in 0.5s ease-out 0.4s both;
}

/* Falling confetti rain — covers the entire viewport */
.bw-confetti-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.bw-confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation-name: bw-rain-fall;
  animation-timing-function: cubic-bezier(0.4, 0.7, 0.7, 1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes bw-rain-fall {
  0%   { transform: translateY(-30px) rotate(0deg);              opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(var(--rot, 360deg)); opacity: 0.9; }
}

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 24px;
  text-align: center;
  color: var(--g-500);
}
.empty-state-illu {
  font-size: 56px;
  margin-bottom: 14px;
  filter: grayscale(0.3);
  animation: empty-float 3.4s ease-in-out infinite;
}
@keyframes empty-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.empty-state h3 {
  margin: 0 0 6px;
  font-size: 16px; font-weight: 700;
  color: var(--g-800);
}
.empty-state p {
  margin: 0 0 18px;
  font-size: 13px; color: var(--g-600);
  max-width: 380px;
}
.empty-state .empty-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: var(--orange); color: white;
  border: 0; border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background var(--motion);
}
.empty-state .empty-cta:hover { background: var(--orange-h); }

/* ============================================
   ACHIEVEMENT CARDS — clean redesign (replaces hex grid)
   ============================================ */
.ach-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 8px 0;
}
.ach-card-new {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 14px;
  background: var(--g-100);
  border-radius: 12px;
  transition: transform var(--motion), background var(--motion);
  overflow: hidden;
  cursor: default;
}
.ach-card-new:hover { transform: translateY(-1px); }
.ach-card-new .ach-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}
.ach-card-new .ach-meta { flex: 1; min-width: 0; }
.ach-card-new .ach-title { font-size: 13px; font-weight: 800; color: var(--g-900); margin-bottom: 2px; line-height: 1.2; }
.ach-card-new .ach-desc  { font-size: 11px; color: var(--g-600); line-height: 1.35; }
.ach-card-new .ach-tick {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--emerald);
  color: white;
  font-size: 10px;
}
.ach-card-new .ach-lock {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.06);
  color: var(--g-500);
  font-size: 9px;
}

/* Tier colors — applied to the icon wrap so the card stays subtle */
.ach-card-new.is-unlocked.tier-bronze   .ach-icon-wrap { background: linear-gradient(135deg, #C97A4A, #8B4513); }
.ach-card-new.is-unlocked.tier-silver   .ach-icon-wrap { background: linear-gradient(135deg, #D8D8D8, #9AA0A6); }
.ach-card-new.is-unlocked.tier-gold     .ach-icon-wrap { background: linear-gradient(135deg, #FFD64A, #FE9920); }
.ach-card-new.is-unlocked.tier-platinum .ach-icon-wrap { background: linear-gradient(135deg, #B589FF, #6D28D9); }
.ach-card-new.is-unlocked {
  background: linear-gradient(135deg, rgba(16,185,129,0.05), transparent);
}
.ach-card-new.is-unlocked.tier-gold     { background: linear-gradient(135deg, rgba(255,214,74,0.10), transparent); }
.ach-card-new.is-unlocked.tier-platinum { background: linear-gradient(135deg, rgba(181,137,255,0.10), transparent); }
.ach-card-new.is-locked .ach-icon-wrap {
  background: rgba(0,0,0,0.06);
  color: var(--g-400);
}
.ach-card-new.is-locked .ach-title { color: var(--g-700); }
.ach-card-new.is-locked .ach-desc  { color: var(--g-500); }

/* Dark mode versions — icon wraps stay tier-colored, surface stays subtle */
[data-theme="dark"] .ach-card-new { background: var(--g-100); }
[data-theme="dark"] .ach-card-new.is-locked .ach-icon-wrap { background: var(--g-150); color: var(--g-500); }
[data-theme="dark"] .ach-card-new.is-locked .ach-title { color: var(--g-700); }
[data-theme="dark"] .ach-card-new.is-locked .ach-desc  { color: var(--g-500); }
[data-theme="dark"] .ach-card-new.is-unlocked { background: linear-gradient(135deg, rgba(255,255,255,0.04), var(--g-100)); }
[data-theme="dark"] .ach-card-new .ach-lock { background: rgba(255,255,255,0.05); }

@media (max-width: 540px) {
  .ach-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ach-card-new { padding: 12px; gap: 10px; }
  .ach-card-new .ach-icon-wrap { width: 38px; height: 38px; font-size: 16px; }
  .ach-card-new .ach-title { font-size: 12px; }
  .ach-card-new .ach-desc  { font-size: 10.5px; }
}

/* ============================================
   HEX ACHIEVEMENT GRID (LEGACY — kept for fallback)
   ============================================ */
.hex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 92px);
  justify-content: center;
  gap: 8px 4px;
  padding: 16px 0;
}
.hex-cell {
  width: 92px; height: 104px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
  padding: 12px 6px;
  position: relative;
}
.hex-cell:nth-child(even) { transform: translateY(28px); }
.hex-cell:hover { transform: scale(1.06) translateY(0); }
.hex-cell:nth-child(even):hover { transform: scale(1.06) translateY(28px); }
.hex-cell.unlocked { background: linear-gradient(135deg, var(--orange), var(--orange-h)); }
.hex-cell.unlocked.tier-bronze { background: linear-gradient(135deg, #B66830, #8B4513); }
.hex-cell.unlocked.tier-silver { background: linear-gradient(135deg, #C8C8C8, #909090); }
.hex-cell.unlocked.tier-gold   { background: linear-gradient(135deg, #FFD64A, #FE9920); }
.hex-cell.unlocked.tier-platinum { background: linear-gradient(135deg, #B589FF, #6D28D9); }
.hex-cell.locked {
  background: var(--g-200);
  filter: grayscale(1) opacity(0.6);
}
.hex-cell-icon { font-size: 24px; color: white; margin-bottom: 4px; }
.hex-cell-label {
  font-size: 9px; font-weight: 800;
  color: white;
  text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1.1;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hex-cell.locked .hex-cell-icon,
.hex-cell.locked .hex-cell-label { color: var(--g-600); }
@media (max-width: 720px) {
  .hex-grid { grid-template-columns: repeat(auto-fill, 76px); }
  .hex-cell { width: 76px; height: 86px; }
  .hex-cell-icon { font-size: 20px; }
  .hex-cell-label { font-size: 8px; }
  .hex-cell:nth-child(even),
  .hex-cell:nth-child(even):hover { transform: translateY(22px); }
  .hex-cell:nth-child(even):hover { transform: scale(1.06) translateY(22px); }
}

/* ============================================
   ADMIN REPORTS PANEL
   ============================================ */
.admin-pill-warn {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  background: var(--red);
  color: white;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  vertical-align: middle;
}
.admin-filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  background: var(--g-100);
  border-radius: var(--r-md);
}
.admin-status-pills { display: flex; gap: 4px; }
.admin-pill {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--g-200);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--g-700);
  cursor: pointer;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
}
.admin-pill:hover { background: var(--white); }
.admin-pill.is-active { background: var(--orange); color: white; border-color: var(--orange); }
.admin-search {
  flex: 1; min-width: 200px;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  font-size: 13px;
  outline: none;
  transition: border-color var(--motion);
}
.admin-search:focus { border-color: var(--orange); }
.admin-date {
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--g-700);
}
.admin-reports-table { width: 100%; font-size: 13px; }
.admin-reports-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--g-600); padding: 8px 10px; border-bottom: 1px solid var(--g-200); text-align: left; }
.admin-reports-table td { padding: 10px; border-bottom: 1px solid var(--g-150); vertical-align: top; }
.admin-reports-table tr.status-resolved { opacity: 0.65; }
.admin-reports-table tr.status-dismissed { opacity: 0.5; }
.admin-reports-table .t-date { white-space: nowrap; color: var(--g-600); font-size: 12px; }
.admin-reports-table .t-user { white-space: nowrap; font-weight: 600; }
.admin-reports-table .t-msg {
  max-width: 360px;
  word-break: break-word;
  color: var(--g-800);
}
.admin-reports-table .t-actions { white-space: nowrap; }
.admin-reports-table .t-actions button + button { margin-left: 4px; }
.reports-count-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--red);
  color: white;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.status-badge.status-open      { background: rgba(239,68,68,0.12); color: var(--red); }
.status-badge.status-resolved  { background: rgba(16,185,129,0.12); color: var(--emerald); }
.status-badge.status-dismissed { background: var(--g-200); color: var(--g-700); }
.t-resolver { font-size: 11px; color: var(--g-500); font-style: italic; }
.admin-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 0;
}
.admin-pager-info { font-size: 12px; color: var(--g-600); }
.admin-btn.small { padding: 4px 10px; font-size: 11px; }
.admin-btn.danger { background: var(--red); color: white; }
.admin-btn.danger:hover { background: #d62828; }
.admin-note-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.admin-note-textarea:focus { border-color: var(--orange); }
/* Responsive: stack filter bar on mobile */
@media (max-width: 720px) {
  .admin-filter-bar { flex-direction: column; align-items: stretch; }
  .admin-status-pills { flex-wrap: wrap; }
  .admin-reports-table th, .admin-reports-table td { padding: 8px 6px; font-size: 11.5px; }
  .admin-reports-table .t-msg { max-width: 180px; }
}

/* Reaction picker — squarish flat panel, anchored just BELOW the message,
   never positioned at the top of the card. Auto-flips up when too close to
   the bottom of the chat scroll container. */
.msg-react-picker {
  position: absolute;
  left: 44px;          /* aligned past the avatar gutter */
  top: 100%;
  margin-top: 6px;
  background: white;
  border: 1px solid var(--g-200);
  border-radius: 10px;  /* squarish, was full pill */
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.16);
  padding: 6px;
  display: flex; gap: 4px;
  z-index: 25;
  animation: react-picker-in 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
.msg-react-picker.flip-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 6px; }
@keyframes react-picker-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-react-picker button {
  width: 34px; height: 34px;
  border: 0; background: transparent;
  border-radius: 8px; /* squarish chip */
  font-size: 20px;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  display: grid; place-items: center;
}
.msg-react-picker button:hover { background: var(--g-100); }
.msg-react-picker button:active { transform: scale(0.92); }

/* Full picker — Discord-style with search + tabs + grid.
   Rendered via portal to <body> + positioned via inline style.
   Fixed size so Custom tab being empty doesn't shrink the panel.
   z-index 1510 stays above the mobile bottom navbar. */
.msg-react-picker.is-full {
  position: fixed;
  z-index: 1510;
  width: 380px;                                /* was 340 — fits 8 cols nicely */
  max-width: calc(100vw - 24px);
  height: 460px;                               /* was 380 — shows more rows so scroll is obvious */
  padding: 0;
  display: flex; flex-direction: column;
  background: white;
  border: 1px solid var(--g-200);
  border-radius: 12px;
  box-shadow: 0 18px 44px -10px rgba(0,0,0,0.28);
  animation: msg-ctx-in 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
.msg-react-picker.is-full .mrp-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--g-200);
}
.msg-react-picker.is-full .mrp-search i { color: var(--g-500); font-size: 12px; }
.msg-react-picker.is-full .mrp-search input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-size: 13px;
  padding: 4px 0;
}
.msg-react-picker.is-full .mrp-close {
  width: 22px; height: 22px;
  background: transparent; border: 0;
  color: var(--g-500);
  border-radius: 6px;
  cursor: pointer;
}
.msg-react-picker.is-full .mrp-close:hover { background: var(--g-100); color: var(--g-900); }
.msg-react-picker.is-full .mrp-tabs {
  display: flex; gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--g-200);
}
.msg-react-picker.is-full .mrp-tab {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--g-500);
  text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer;
  height: 30px;
}
.msg-react-picker.is-full .mrp-tab:hover { color: var(--g-700); }
.msg-react-picker.is-full .mrp-tab.is-active { background: var(--g-100); color: var(--g-900); }
.msg-react-picker.is-full .mrp-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);  /* was 7 — 8 cols fit naturally in 380px */
  gap: 4px;
  align-content: start;
}
.msg-react-picker.is-full .mrp-grid button {
  width: 40px; height: 40px;          /* was 36×36 — a tick bigger */
  border: 0; background: transparent;
  border-radius: 6px;
  font-size: 22px;                    /* glyph emojis also a tick bigger */
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.1s, transform 0.1s;
}
.msg-react-picker.is-full .mrp-grid button:hover { background: var(--g-100); transform: scale(1.15); }
/* Custom-emoji button in the reaction picker grid — same hit box, but it
   contains an <img> instead of a glyph so we need explicit img sizing. */
.msg-react-picker.is-full .mrp-grid button.mrp-custom-btn { padding: 2px; }
.msg-react-picker.is-full .mrp-grid button.mrp-custom-btn img {
  width: 30px; height: 30px; object-fit: contain; display: block;
}
.msg-react-picker.is-full .mrp-empty {
  grid-column: 1 / -1;
  padding: 60px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--g-500);
  line-height: 1.5;
}
.msg-react-picker.is-full .mrp-empty code {
  background: var(--g-100);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* "See who reacted" button next to chips */
.msg-react-viewers {
  width: 22px; height: 22px;
  padding: 0;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 999px;
  color: var(--g-500);
  font-size: 9px;
  cursor: pointer;
  display: grid; place-items: center;
}
.msg-react-viewers:hover { background: var(--g-200); color: var(--g-700); }

/* Reaction detail modal */
.rd-empty { padding: 24px 0; text-align: center; color: var(--g-500); font-size: 13px; }
.rd-section { margin-bottom: 14px; }
.rd-section:last-child { margin-bottom: 0; }
.rd-emoji-row {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--g-200);
}
.rd-emoji { font-size: 22px; }
.rd-count { font-size: 12px; font-weight: 700; color: var(--g-600); }
.rd-users { display: flex; flex-direction: column; gap: 4px; }
.rd-user {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
}
.rd-user:hover { background: var(--g-100); }
.rd-user-av {
  width: 28px; height: 28px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--g-200);
}
.rd-user-av-fallback {
  display: grid; place-items: center;
  background: var(--orange); color: white;
  font-size: 10px; font-weight: 800;
}
.rd-user-name { font-size: 13px; font-weight: 600; color: var(--g-800); }

/* "↓ N new" pill that appears when scrolled up and new messages arrive */
.chat-newmsg-pill {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 60px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--orange);
  color: white;
  border: 0;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.18);
  animation: pill-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-newmsg-pill:hover { background: var(--orange-h); }
@keyframes pill-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.chat-side { position: fixed; } /* re-affirmed so pill positions correctly */

/* Tip note bubble — shown under a system tip message when sender included a note */
.tip-note-bubble {
  margin: 6px auto 0;
  max-width: 92%;
  padding: 7px 12px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.28);
  border-radius: 14px 14px 14px 4px;
  font-size: 12px;
  font-style: italic;
  color: var(--g-800);
  line-height: 1.35;
  opacity: 1;
  text-align: left;
  word-break: break-word;
}

/* Chat input + emoji picker */
/* Chat input — input wrapper holds emoji icon inside on right.
   Send button is FULL-WIDTH below the input as a pill. */
.chat-input-row {
  position: relative;
  /* iOS home-indicator safe-area: add ~34px bottom padding on iPhones with
     no home button so the Send pill isn't hidden behind the indicator
     when chat is full-screen on mobile. Falls back to 10px on devices
     that don't expose env(safe-area-inset-bottom). */
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  background: var(--g-100);
}
.chat-input-field {
  position: relative;
  display: flex; align-items: center;
  background: var(--white);
  border-radius: 10px;
  padding-right: 4px;
}
.chat-input {
  flex: 1;
  height: 42px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  color: var(--g-900);
  min-width: 0;
}
.chat-input::placeholder { color: var(--g-500); }
.chat-emoji {
  width: 34px; height: 34px;
  background: transparent;
  border: 0;
  color: var(--g-500);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: color var(--motion), background var(--motion);
  font-size: 16px;
  border-radius: 6px;
}
.chat-emoji:hover,
.chat-emoji.is-open { color: var(--g-900); background: var(--g-100); }
/* Send pill — full width, orange, rounded */
.chat-send-btn {
  width: 100%;
  height: 40px;
  background: var(--orange);
  color: white;
  border: 0;
  border-radius: 10px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}
.chat-send-btn:hover:not(:disabled) { background: var(--orange-h); }
.chat-send-btn:active:not(:disabled) { transform: translateY(1px); }
.chat-send-btn:disabled {
  background: var(--g-200);
  color: var(--g-500);
  cursor: not-allowed;
}
/* Legacy class kept so existing tests/snippets don't break */
.chat-send { display: none; }

/* Validation chip — shown above the input when send is blocked
   (max-length, max-emojis, duplicate, burst-rate). Auto-fades after
   3s. Discord-style red inline hint. */
.chat-validation-chip {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 6px;
  padding: 7px 10px;
  background: rgba(239,68,68,0.10);
  color: #B91C1C;
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px;
  font-size: 11.5px; font-weight: 600;
  animation: chat-validation-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-validation-chip i { font-size: 12px; opacity: 0.85; }
@keyframes chat-validation-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
[data-theme="dark"] .chat-validation-chip { background: rgba(239,68,68,0.12); color: #FCA5A5; border-color: rgba(239,68,68,0.30); }

/* Live char/emoji counter — sits in its OWN row between the input
   field and the send button. Single line, ellipsis-safe, never
   overlaps typed text (which was the previous bug when it floated
   inside the input). Two pill-style segments side by side. */
.chat-input-field { position: relative; }
.chat-input-counter-row {
  display: flex;
  justify-content: flex-end;
  margin: 4px 2px 6px;
  pointer-events: none;
}
.chat-input-counter {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--g-100);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  color: var(--g-600);
  font-variant-numeric: tabular-nums;
}
.chat-input-counter .cic-segment {
  display: inline-flex;
}
.chat-input-counter .cic-segment + .cic-segment {
  border-left: 1px solid var(--g-200);
  padding-left: 8px;
}
.chat-input-counter.over { background: rgba(239,68,68,0.10); color: #DC2626; }
.chat-input-counter.over .cic-segment + .cic-segment { border-left-color: rgba(239,68,68,0.20); }
[data-theme="dark"] .chat-input-counter { background: var(--g-150); color: var(--g-600); }
[data-theme="dark"] .chat-input-counter .cic-segment + .cic-segment { border-left-color: var(--g-200); }
[data-theme="dark"] .chat-input-counter.over { background: rgba(239,68,68,0.15); color: #F87171; }

.emoji-picker {
  position: absolute;
  /* Lifted higher above the chat input so the picker doesn't sit ON the
     input — leaves visible space between picker and input field. */
  bottom: 72px;
  left: 8px;
  right: 8px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.18);
  padding: 10px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 30;
  display: block;
}
/* Anchored mode — portal'd to <body>, positioned via inline style next to
   the chat-emoji button. NEW: mirrors the reaction picker (.msg-react-picker.is-full)
   visual language — bordered search row, bordered tabs row, full-bleed
   scrollable grid. Cleaner than the previous chip-style layout and
   visually consistent with the add-reaction popup the user liked. */
.emoji-picker.is-anchored {
  position: fixed !important;
  left: auto;
  right: auto;
  bottom: auto;
  max-height: none !important;
  background: white;
  border: 1px solid var(--g-200);
  border-radius: 12px;
  box-shadow: 0 18px 44px -10px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  animation: msg-ctx-in 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Search row — full-bleed, just a bottom border (no chip bg). Matches
   .msg-react-picker.is-full .mrp-search exactly. */
.emoji-picker.is-anchored .ep-search {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  margin: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--g-200);
}
/* Tabs row — full-bleed, bottom border, equal-width segmented tabs */
.emoji-picker.is-anchored .ep-tabs {
  flex-shrink: 0;
  display: flex; gap: 4px;
  padding: 6px 10px;
  margin: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--g-200);
}
.emoji-picker.is-anchored .ep-tab {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--g-500);
  text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer;
  height: 30px;
  box-shadow: none;
}
.emoji-picker.is-anchored .ep-tab:hover { color: var(--g-700); }
.emoji-picker.is-anchored .ep-tab.is-active {
  background: var(--g-100);
  color: var(--g-900);
  box-shadow: none;
}
/* Grid — full-bleed, flex:1 so it fills remaining space and scrolls. */
.emoji-picker.is-anchored .ep-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 8px;
  overflow-y: auto;
  align-content: start;
}
/* Bottom category nav — Slack/Discord-style icon strip with a SINGLE
   sliding pill underneath that animates between active categories.
   Sits flush at the picker's bottom edge. flex-shrink:0 so it never
   collapses. position:relative because the pill is absolutely
   positioned inside it. */
.emoji-picker.is-anchored .ep-catnav {
  position: relative;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(var(--cat-count, 9), 1fr);
  align-items: center;
  padding: 6px 4px 8px;
  border-top: 1px solid var(--g-150);
  background: var(--g-50);
}
.emoji-picker.is-anchored .ep-catbtn {
  width: 100%; height: 30px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: 6px;
  color: var(--g-500);
  font-size: 14px;
  cursor: pointer;
  position: relative;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.emoji-picker.is-anchored .ep-catbtn:hover:not(:disabled) { color: var(--g-900); }
.emoji-picker.is-anchored .ep-catbtn:disabled { opacity: 0.30; cursor: default; }
.emoji-picker.is-anchored .ep-catbtn.is-active { color: var(--orange); }
/* The moving underline. The pill is exactly one column wide (1/N of the
   nav), then a centered inner bar via padding shrinks the visible width
   to ~60% of the column. translateX(N × 100%) slides cleanly between
   cells because each translate unit equals one column width. */
.emoji-picker.is-anchored .ep-catnav-pill {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: calc(100% / var(--cat-count, 9));
  height: 3px;
  padding: 0 22%;                  /* center a thinner bar inside the cell */
  transform: translateX(calc(var(--cat-idx, 0) * 100%));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.emoji-picker.is-anchored .ep-catnav-pill::after {
  content: '';
  display: block;
  width: 100%; height: 100%;
  background: var(--orange);
  border-radius: 2px;
}
[data-theme="dark"] .emoji-picker.is-anchored .ep-catnav { background: var(--g-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .emoji-picker.is-anchored .ep-catbtn:hover:not(:disabled) { color: var(--white); }

/* Cat-nav inside the REACTION picker (msg-react-picker). Same look as
   the chat picker's nav, just scoped to the different parent so it
   inherits the same .ep-catbtn / .ep-catnav-pill children. */
.msg-react-picker.is-full .mrp-catnav {
  position: relative;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(var(--cat-count, 8), 1fr);
  align-items: center;
  padding: 6px 4px 8px;
  border-top: 1px solid var(--g-200);
  background: var(--g-50);
}
.msg-react-picker.is-full .mrp-catnav .ep-catbtn {
  width: 100%; height: 30px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: 6px;
  color: var(--g-500);
  font-size: 14px;
  cursor: pointer;
  position: relative;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.msg-react-picker.is-full .mrp-catnav .ep-catbtn:hover:not(:disabled) { color: var(--g-900); }
.msg-react-picker.is-full .mrp-catnav .ep-catbtn:disabled { opacity: 0.30; cursor: default; }
.msg-react-picker.is-full .mrp-catnav .ep-catbtn.is-active { color: var(--orange); }
.msg-react-picker.is-full .mrp-catnav .ep-catnav-pill {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: calc(100% / var(--cat-count, 8));
  height: 3px;
  padding: 0 22%;
  transform: translateX(calc(var(--cat-idx, 0) * 100%));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.msg-react-picker.is-full .mrp-catnav .ep-catnav-pill::after {
  content: '';
  display: block;
  width: 100%; height: 100%;
  background: var(--orange);
  border-radius: 2px;
}
[data-theme="dark"] .msg-react-picker.is-full .mrp-catnav { background: var(--g-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .msg-react-picker.is-full .mrp-catnav .ep-catbtn:hover:not(:disabled) { color: var(--white); }
.emoji-picker button {
  width: 34px; height: 34px;
  font-size: 20px;
  padding: 0;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
  line-height: 1;
}
.emoji-picker button:hover { background: var(--g-100); transform: scale(1.15); }

/* Mobile chat — covers the ENTIRE viewport, headers included.
   Slides up from bottom with a soft cubic-bezier curve. */
@media (max-width: 980px) {
  .chat-side {
    width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none;
    z-index: 1100; /* above the mobile-nav */
    border-right: none;
    border-radius: 0;
  }
  .chat-side.is-open { transform: translateY(0); }
  .chat-head {
    padding: 18px 16px 12px;
    background: var(--white);
    border-bottom: 1px solid var(--g-200);
    padding-top: max(18px, env(safe-area-inset-top, 18px));
  }
  .chat-head .ttl { font-size: 16px; }
  .chat-close { width: 38px; height: 38px; }
  /* On mobile the chat-backdrop is redundant — chat covers everything */
  .chat-backdrop { display: none; }
}
@media (max-width: 980px) and (hover: none) {
  /* Hide the X icon on mobile when chat is full-screen — user expects
     bottom navbar tap to close it. Keep accessible. */
  .chat-side.is-open .chat-close { display: inline-grid; }
}

/* ============================================
   HERO (compact)
   ============================================ */
.hero-wrap { padding-top: 4px; }
.hero { border-radius: var(--r-xl); background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(139,92,246,0.55), transparent 60%), radial-gradient(ellipse 50% 70% at 30% 80%, rgba(255,61,154,0.35), transparent 55%), linear-gradient(135deg, #120820 0%, #1A0B2E 45%, #0B0518 100%); color: white; position: relative; overflow: hidden; min-height: 132px; display: flex; align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0, transparent 1.5px), radial-gradient(circle at 60% 70%, rgba(255,255,255,0.04) 0, transparent 1.5px), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0, transparent 1.2px); background-size: 90px 90px, 130px 130px, 70px 70px; pointer-events: none; opacity: 0.9; }
.hero-inner { padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; position: relative; z-index: 1; }
.hero-text { max-width: 480px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px 4px 8px; border-radius: var(--r-md); font-size: 10px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; color: var(--gold); }
.hero-eyebrow .dot-live { width: 6px; height: 6px; border-radius: 999px; background: var(--emerald); animation: pulse 1.4s ease-in-out infinite; }
.hero h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
.hero h1 .accent { color: var(--gold); }
.hero h1 .accent2 { background: linear-gradient(120deg, #B589FF 0%, #FF7AC2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { margin: 8px 0 14px; font-size: 13px; color: rgba(255,255,255,0.7); max-width: 420px; line-height: 1.5; }

/* Event slot inside hero — admin-controlled later */
.hero-event {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 16px;
  padding: 12px 16px;
  width: 100%; max-width: 460px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  text-align: left;
  color: white;
  transition: background 0.22s, transform 0.22s, border-color 0.22s;
}
.hero-event:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.hero-event--green { background: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(16,185,129,0.06)); border-color: rgba(16,185,129,0.42); }
.hero-event--green:hover { background: linear-gradient(135deg, rgba(16,185,129,0.30), rgba(16,185,129,0.10)); }
.hero-event--gold  { background: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(16,185,129,0.06)); border-color: rgba(16,185,129,0.45); }
.hero-event--gold:hover  { background: linear-gradient(135deg, rgba(16,185,129,0.30), rgba(16,185,129,0.10)); }

.hero-event .he-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 16px;
  color: white;
}
.hero-event--green .he-icon { background: var(--emerald); box-shadow: 0 0 16px -4px rgba(0,0,0,0.18); }
.hero-event--gold  .he-icon { background: var(--orange);  box-shadow: 0 0 16px -4px rgba(0,0,0,0.18); }

.hero-event .he-text { flex: 1; min-width: 0; }
.hero-event .he-title { font-size: 13.5px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.hero-event--green .he-title { color: #6BE6B7; }
.hero-event--gold  .he-title { color: rgba(16,185,129,0.22); }
.hero-event .he-sub { font-size: 12px; color: rgba(255,255,255,0.78); margin-top: 2px; line-height: 1.35; }
.hero-event .he-arrow { color: rgba(255,255,255,0.55); transition: transform var(--motion); font-size: 12px; }
.hero-event:hover .he-arrow { transform: translateX(3px); color: rgba(255,255,255,0.9); }

.hero-event-dots { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.hed-dot {
  width: 16px; height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  transition: background var(--motion), width var(--motion);
  cursor: pointer;
}
.hed-dot.is-active { background: rgba(255,255,255,0.7); width: 22px; }
.hed-dot:hover:not(.is-active) { background: rgba(255,255,255,0.35); }
.hero-ctas { display: flex; gap: 8px; align-items: center; }
.hero-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; background: var(--orange); color: white; border-radius: var(--r-md); font-size: 13px; font-weight: 600; transition: background var(--motion); }
@media (hover:hover) and (pointer:fine) { .hero-cta:hover { background: var(--orange-h); } }
.hero-cta-ghost { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; color: white; border-radius: var(--r-md); font-size: 13px; font-weight: 500; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); transition: background var(--motion); }
@media (hover:hover) and (pointer:fine) { .hero-cta-ghost:hover { background: rgba(255,255,255,0.12); } }

.hero-stats { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.hero-stat .val { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.hero-stat .val .live-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--emerald); animation: pulse 1.4s ease-in-out infinite; }
.hero-stat .lbl { font-size: 10px; color: rgba(255,255,255,0.55); text-transform: uppercase; font-weight: 500; margin-top: 2px; letter-spacing: 0.04em; }

/* Compact floating coin */
.hero-coin-stage { position: relative; width: 200px; height: 160px; flex-shrink: 0; }
.big-coin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotateY(0deg); transform-style: preserve-3d; animation: bigflip 5s ease-in-out infinite; width: 130px; height: 130px; }
@keyframes bigflip { 0% { transform: translate(-50%,-50%) rotateY(0deg); } 50% { transform: translate(-50%,-55%) rotateY(180deg); } 100% { transform: translate(-50%,-50%) rotateY(360deg); } }
.big-coin .face { position: absolute; inset: 0; border-radius: 999px; backface-visibility: hidden; display: grid; place-items: center; font-weight: 800; font-size: 36px; }
.big-coin .face.h { background: radial-gradient(circle at 35% 28%, #FFE89A, #10B981 55%, #A14D08); box-shadow: inset -10px -14px 24px rgba(0,0,0,0.3), inset 8px 10px 18px rgba(255,255,255,0.4), 0 30px 60px -20px rgba(0,0,0,0.18); color: rgba(0,0,0,0.4); }
.big-coin .face.t { background: radial-gradient(circle at 35% 28%, #F0F0F0, #969696 55%, #2A2A2A); box-shadow: inset -10px -14px 24px rgba(0,0,0,0.3), inset 8px 10px 18px rgba(255,255,255,0.4), 0 30px 60px -20px rgba(150,150,150,0.4); transform: rotateY(180deg); color: rgba(255,255,255,0.4); }
.hero-coin-shadow { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 110px; height: 16px; background: radial-gradient(ellipse, rgba(0,0,0,0.4), transparent 70%); animation: shadowpulse 5s ease-in-out infinite; }
@keyframes shadowpulse { 0%,100% { width: 110px; opacity: 0.4; } 50% { width: 70px; opacity: 0.2; } }

/* ============================================
   BANNER CAROUSEL — pure image slots, admin-controlled
   ============================================ */
/* Banner dismiss × — subtle, matches site (no shadow, no blur).
   Site-fitting square chip in the top-right corner. */
.hero-wrap { position: relative; }
/* Anchored to hero-wrap, but offset by the carousel's margin-top (16px = 4px
   hero-wrap padding-top + 12px banner margin-top) so the X sits cleanly INSIDE
   the banner's top-right corner instead of floating above it. */
.bc-dismiss {
  position: absolute;
  top: 26px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.9);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition: background var(--motion), color var(--motion), transform var(--motion);
}
.bc-dismiss > i { display: block; line-height: 1; }
.bc-dismiss:hover { background: rgba(0,0,0,0.6); color: white; transform: scale(1.05); }

.banner-carousel {
  width: 100%;
  height: 170px;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  background: var(--g-100);
  margin-top: 12px;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  -webkit-user-drag: none;
}
/* Single-banner mode — nothing to swipe, drop the grab cursor + dots. */
.banner-carousel.is-single { cursor: default; touch-action: auto; }
.banner-carousel.is-single .bc-dots,
.banner-carousel.is-single .bc-arrow { display: none !important; }
.banner-carousel.is-dragging { cursor: grabbing; }
.banner-carousel.is-dragging .bc-track { transition: none !important; }
.banner-carousel * { -webkit-user-drag: none; }
.bc-track {
  display: flex;
  height: 100%;
  /* GPU compositing — translate3d + will-change so the carousel slides
     smoothly on mobile instead of stuttering on every frame. */
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bc-slide {
  /* Promote each slide to its own layer too so big background images
     don't repaint during the transform animation. */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bc-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center;
}
.bc-accent-purple { background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(139,92,246,0.45), transparent 60%), radial-gradient(ellipse 50% 70% at 30% 80%, rgba(16,185,129,0.18), transparent 55%), linear-gradient(135deg, #1A0B2E 0%, #120820 60%, #0B0518 100%); }
.bc-accent-orange { background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(16,185,129,0.35), transparent 60%), radial-gradient(ellipse 50% 70% at 30% 80%, rgba(139,92,246,0.18), transparent 55%), linear-gradient(135deg, #2A1A05 0%, #3D2608 60%, #1A0F03 100%); }
.bc-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  z-index: 0;
}
/* When a banner has an image, overlay a soft left-to-right dark gradient
   so the title + CTA on the left side stay readable regardless of what
   the artwork shows underneath. Uses both .has-bg (explicit class set in
   JSX) and :has(.bc-bg) (selector for browsers that support it) so this
   works even on older Safari that lacks :has(). */
.bc-slide.has-bg::before,
.bc-slide:has(.bc-bg)::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.15) 70%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.bc-content {
  position: relative; z-index: 2;
  padding: 28px 36px;
  max-width: 560px;
  color: white;
}
.bc-title {
  margin: 0;
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.bc-subtitle {
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  line-height: 1.45;
  max-width: 460px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
/* Rewards-variant banner content — the title becomes the prize-pool value,
   the eyebrow names it as "Prize pool". Same visual language as the events
   page so the two surfaces look like one event identity. */
.bc-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.bc-title.bc-title--pool {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 2px 0 0;
}
.bc-title.bc-title--pool .gem-i { font-size: 26px; }
@media (max-width: 767px) {
  .bc-title.bc-title--pool { font-size: 26px; gap: 8px; }
  .bc-title.bc-title--pool .gem-i { font-size: 20px; }
}

/* Top-3 podium tiles on the banner — anchored to the right side of the
   slide (where the artwork has empty sky/background). Compact vertical
   stack of 3 mini-tiles. Hidden on narrow phones (content column needs
   the room). The events page shows the same data in a roomier layout. */
.bc-podium {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.bc-podium-tile {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  min-width: 140px;
}
.bc-podium-tile.rank-1 { border-color: rgba(255,214,74,0.55); }
.bc-podium-tile.rank-2 { border-color: rgba(200,200,200,0.45); }
.bc-podium-tile.rank-3 { border-color: rgba(199,123,62,0.55); }
.bc-podium-rank {
  font-size: 10px; font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: white;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.bc-podium-tile.rank-1 .bc-podium-rank { background: #FFD64A; color: #4A3300; }
.bc-podium-tile.rank-2 .bc-podium-rank { background: #C8C8C8; color: #1F1F1F; }
.bc-podium-tile.rank-3 .bc-podium-rank { background: #C77B3E; color: #FFF1E0; }
.bc-podium-img {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.bc-podium-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.bc-podium-val {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin-left: auto;
}
.bc-podium-val .gem-i { font-size: 11px; }

/* Hide the podium on tablet/phone — banner is too narrow to show both the
   text column AND the 3-tile column without overlap. Events page still
   shows them full-width. */
@media (max-width: 980px) {
  .bc-podium { display: none; }
}

.bc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 0 18px; height: 40px;
  background: var(--orange); color: white;
  border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 700;
  transition: background var(--motion), transform var(--motion);
  /* No shadow on purpose — user explicitly asked for zero "neon" or
     glow effects on CTA buttons. Flat fill only. */
}
.banner-carousel:hover .bc-cta { background: var(--orange-h); transform: translateY(-1px); }

@media (max-width: 767px) {
  .bc-content { padding: 18px 18px 30px; max-width: 100%; }
  .bc-title { font-size: 20px; }
  .bc-subtitle { font-size: 12.5px; margin-top: 6px; }
  .bc-cta { height: 36px; padding: 0 14px; font-size: 12.5px; margin-top: 12px; }
}

.bc-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  color: white;
  border: 0;
  display: grid; place-items: center;
  z-index: 5;
  transition: opacity 0.18s, background 0.15s, transform 0.05s;
  font-size: 12px;
  /* backdrop-filter removed — small cost individually, big cumulative perf hit
     when many banners/elements use it. Solid rgba bg is enough. */
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.banner-carousel:hover .bc-arrow { opacity: 1; pointer-events: auto; }
.bc-arrow:hover { background: rgba(0,0,0,0.78); }
.bc-arrow:active { transform: translateY(-50%) scale(0.92); }
.bc-arrow:disabled, .bc-arrow.is-disabled { opacity: 0 !important; pointer-events: none; }
.bc-prev { left: 14px; }
.bc-next { right: 14px; }
/* Touch devices: arrows always visible (no hover) */
@media (hover: none) {
  .bc-arrow { opacity: 1; pointer-events: auto; }
}

.bc-dots {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 5;
  cursor: default;
}
/* Dots use padding to expand the click area to ~24×24 while the visible
   pill stays at 24×4. The visual bar is a pseudo-element so the padding
   doesn't push the next dot apart. */
.bc-dot {
  width: 24px; height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.30);
  transition: background var(--motion), width var(--motion);
  cursor: pointer;
  /* Hit area expansion — invisible 14px padding all around */
  position: relative;
}
.bc-dot::before {
  content: '';
  position: absolute;
  inset: -14px -8px;
  /* Transparent click zone so taps near the dot still land */
}
.bc-dot.is-active { background: white; width: 32px; }
.bc-dot:hover:not(.is-active) { background: rgba(255,255,255,0.6); }

@media (max-width: 767px) {
  .banner-carousel {
    height: 160px;
    border-radius: var(--r-md);
  }
  .bc-arrow { width: 32px; height: 32px; }
  .bc-prev { left: 8px; }
  .bc-next { right: 8px; }
  .bc-dots { bottom: 8px; }
  .bc-dot { width: 18px; }
  .bc-dot.is-active { width: 24px; }
}

/* ============================================
   REWARDS PAGE — wager race with prizes
   ============================================ */
/* Reduced top padding (was 18px) — user reported the prize pool banner
   was sitting "a tick too low" after recent changes. The 18px was on
   top of .app-layout's own 10px, giving ~28px of dead air before the
   banner. Now 4px + 10px = 14px, which matches the pre-recent layout. */
.rewards-page { padding: 4px 0 28px; }
.rewards-hero {
  /* Background: event banner image (sky/items) under a stronger dark
     overlay so all stats stay readable across the FULL width (the
     previous left-heavy gradient let the right-side countdown overlap
     the artwork's sword). The radial top-right adds a subtle orange
     accent without bleaching the text. */
  background:
    linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.58) 50%, rgba(0,0,0,0.7) 100%),
    url('../images/eventbanner1.webp') center/cover no-repeat,
    linear-gradient(135deg, #1A0B2E 0%, #2A0E48 50%, #1A0B2E 100%);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.rewards-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 100%, rgba(16,185,129,0.16), transparent 55%);
  pointer-events: none;
}

/* Hero headline — mirrors the coinflip banner layout exactly so both
   surfaces look like one event identity. eyebrow → big pool → subtitle. */
.rh-headline {
  position: relative; z-index: 1;
  max-width: 720px;
}
.rh-headline-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.rh-countdown { text-align: right; }
.rhc-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.rhc-blocks { display: inline-flex; align-items: baseline; gap: 4px; }
.rhc-block {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  display: inline-flex; align-items: baseline; gap: 2px;
  min-width: 38px; justify-content: center;
}
.rhc-num { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 800; color: white; line-height: 1; }
.rhc-unit { font-size: 10px; color: rgba(255,255,255,0.55); font-weight: 600; }
.rhc-sep { color: rgba(255,255,255,0.4); font-weight: 700; font-size: 16px; }

/* ============================================
   Top-3 podium — used on BOTH the homepage banner (compact) and the
   events-page hero (wider). Each tile = rank badge + item artwork +
   value. Glassy tile so the underlying banner artwork bleeds through.
   ============================================ */
.rh-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
.rh-podium-tile {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--motion), border-color var(--motion);
}
.rh-podium-tile:hover { transform: translateY(-2px); border-color: rgba(16,185,129,0.5); }
.rh-podium-tile.rank-1 { border-color: rgba(255,214,74,0.55); background: linear-gradient(135deg, rgba(255,214,74,0.18), rgba(255,214,74,0.04)); }
.rh-podium-tile.rank-2 { border-color: rgba(200,200,200,0.45); background: linear-gradient(135deg, rgba(220,220,220,0.16), rgba(220,220,220,0.04)); }
.rh-podium-tile.rank-3 { border-color: rgba(199,123,62,0.5);  background: linear-gradient(135deg, rgba(199,123,62,0.18), rgba(199,123,62,0.04)); }
.rh-podium-rank {
  position: absolute;
  top: -8px; left: 10px;
  background: var(--orange);
  color: white;
  font-size: 10px; font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid rgba(15,20,30,0.7);
  letter-spacing: 0.05em;
}
.rh-podium-tile.rank-1 .rh-podium-rank { background: #FFD64A; color: #4A3300; }
.rh-podium-tile.rank-2 .rh-podium-rank { background: #C8C8C8; color: #1F1F1F; }
.rh-podium-tile.rank-3 .rh-podium-rank { background: #C77B3E; color: #FFF1E0; }
.rh-podium-img {
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 4px;
}
.rh-podium-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.rh-podium-meta { min-width: 0; flex: 1; }
.rh-podium-name {
  font-size: 12.5px;
  font-weight: 700;
  color: white;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rh-podium-val {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--orange);
}
.rh-podium-val .gem-i { font-size: 12px; }

/* Responsive: 2 columns on tablet, 1 column on phone */
@media (max-width: 860px) {
  .rh-podium { grid-template-columns: repeat(2, 1fr); }
  .rh-podium-tile.rank-3 { grid-column: 1 / -1; }
  .rh-pool-big { font-size: 30px; }
  .rh-pool-big .gem-i { font-size: 24px; }
}
@media (max-width: 540px) {
  .rh-podium { grid-template-columns: 1fr; gap: 8px; }
  .rh-podium-tile.rank-3 { grid-column: auto; }
  .rh-podium-tile { padding: 10px 12px 10px 10px; }
  .rh-podium-img { width: 48px; height: 48px; }
  .rh-pool-big { font-size: 26px; }
  .rh-pool-big .gem-i { font-size: 20px; }
  .rhc-block { padding: 5px 7px; min-width: 32px; }
  .rhc-num { font-size: 15px; }
}

.rewards-table {
  background: var(--g-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rw-head, .rw-row {
  display: grid;
  grid-template-columns: 60px 1.4fr 1fr 1.2fr;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
}
.rw-head { background: var(--g-150); font-size: 11px; color: var(--g-600); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.rw-head .prize-col, .rw-head .num { text-align: right; }
.rw-row { border-top: 1px solid var(--g-150); transition: background var(--motion); }
.rw-row:hover { background: var(--g-150); }
.rw-row.gold   { background: linear-gradient(90deg, rgba(255,214,74,0.10) 0%, transparent 60%); }
.rw-row.silver { background: linear-gradient(90deg, rgba(200,200,200,0.10) 0%, transparent 60%); }
.rw-row.bronze { background: linear-gradient(90deg, rgba(199,123,62,0.10) 0%, transparent 60%); }
.rw-rank {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800; font-size: 15px;
  color: var(--g-700);
}
.rw-rank.gold   { color: #B7790E; }
.rw-rank.silver { color: var(--g-600); }
.rw-rank.bronze { color: #8B4513; }
[data-theme="dark"] .rw-rank.gold   { color: #FFD64A; }
[data-theme="dark"] .rw-rank.silver { color: #C8C8C8; }
[data-theme="dark"] .rw-rank.bronze { color: #D49A6A; }
.rw-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rw-name { font-weight: 700; color: var(--g-900); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-wagered { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; color: var(--g-900); font-weight: 700; font-size: 14px; }

/* "Open slot" row — when fewer than 10 players have wagered, the remaining
   rank rows still show with the prize item visible (so users can see what
   they could win) but with a placeholder user + faded look. */
.rw-row.is-open { opacity: 0.65; }
.rw-empty-av {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--g-150);
  border: 1.5px dashed var(--g-300);
  color: var(--g-500);
  display: grid; place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.rw-empty-name {
  font-style: italic;
  color: var(--g-500);
  font-size: 13px;
  font-weight: 600;
}
.rw-empty-wagered { color: var(--g-400); font-size: 14px; font-weight: 600; }
[data-theme="dark"] .rw-empty-av { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.4); }
[data-theme="dark"] .rw-empty-name { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .rw-empty-wagered { color: rgba(255,255,255,0.35); }
.rw-wagered .gem { width: 12px; height: 12px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }
.rw-prize { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.rw-prize-val { display: inline-flex; align-items: center; gap: 5px; color: var(--orange); font-weight: 800; font-size: 14px; }
.rw-prize-val .gem { width: 11px; height: 11px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }
.rw-noprize { color: var(--g-400); font-size: 13px; }

[data-theme="dark"] .rewards-table { background: var(--g-100); }
[data-theme="dark"] .rw-head { background: var(--g-50); }
[data-theme="dark"] .rw-row { border-top-color: var(--g-200); }
[data-theme="dark"] .rw-row:hover { background: var(--g-150); }

@media (max-width: 767px) {
  .rewards-hero { padding: 18px 16px; gap: 14px; }
  .rh-stats-row { gap: 12px; }
  .rh-stat--countdown { text-align: right; }
  .rw-head, .rw-row { grid-template-columns: 40px 1.2fr 1fr; padding: 10px 12px; gap: 8px; }
  .rw-prize { grid-column: 1 / -1; padding-top: 4px; border-top: 1px dashed var(--g-200); padding-bottom: 4px; }
  .rw-head .prize-col { display: none; }
  .rh-title { font-size: 19px; }
}

/* ============================================
   EVENT BANNER (legacy — kept for reference, unused after carousel refactor)
   ============================================ */
.event-banner {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  margin-top: 12px;
  position: relative;
  text-align: left;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--motion), box-shadow var(--motion);
  overflow: hidden;
}
.event-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 50%, rgba(255,255,255,0.04), transparent 50%);
  pointer-events: none;
}
.event-banner:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18); }
.event-green {
  background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0.04) 100%);
  border-color: rgba(16,185,129,0.25);
}
[data-theme="dark"] .event-green {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(16,185,129,0.35);
}
.event-gold {
  background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0.04) 100%);
  border-color: rgba(16,185,129,0.30);
}
[data-theme="dark"] .event-gold {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(16,185,129,0.4);
}

.ev-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 18px;
}
.event-green .ev-icon { background: var(--emerald); color: white; box-shadow: 0 0 14px -2px rgba(0,0,0,0.18); }
.event-gold  .ev-icon { background: var(--orange); color: white; box-shadow: 0 0 14px -2px rgba(0,0,0,0.18); }

.ev-text { flex: 1; min-width: 0; }
.ev-title { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.event-green .ev-title { color: var(--emerald); }
.event-gold  .ev-title { color: var(--orange); }
.ev-sub { font-size: 12.5px; color: var(--g-700); font-weight: 500; margin-top: 2px; }
[data-theme="dark"] .ev-sub { color: var(--g-700); }

.ev-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  color: var(--g-900);
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.5);
  transition: background var(--motion), transform var(--motion);
}
[data-theme="dark"] .ev-cta { background: rgba(255,255,255,0.08); color: var(--g-900); }
.event-banner:hover .ev-cta { transform: translateX(2px); }

.ev-dots {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
}
.ev-dot { width: 14px; height: 3px; border-radius: 3px; background: rgba(0,0,0,0.12); transition: background var(--motion); }
.ev-dot.is-active { background: var(--g-900); }
.event-green .ev-dot.is-active { background: var(--emerald); }
.event-gold  .ev-dot.is-active { background: var(--orange); }
[data-theme="dark"] .ev-dot { background: rgba(255,255,255,0.15); }

@media (max-width: 767px) {
  .event-banner { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .ev-icon { width: 36px; height: 36px; font-size: 15px; }
  .ev-cta { font-size: 11.5px; padding: 6px 10px; }
  .ev-title { font-size: 13px; }
  .ev-sub { font-size: 11.5px; }
  .ev-dots { display: none; }
}

/* ============================================
   TICKERS
   ============================================ */
.tickers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.tickers-3 { grid-template-columns: repeat(3, 1fr) !important; }
.ticker { background: var(--g-100); border-radius: var(--r-md); padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; transition: background var(--motion); position: relative; overflow: hidden; }
.ticker:hover { background: var(--g-150); }
.ticker .lbl { font-size: 10.5px; color: var(--g-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }
.ticker .val { font-size: 20px; font-weight: 800; color: var(--g-900); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px; }
.ticker .val .arrow { font-size: 11px; color: var(--emerald); margin-left: 6px; font-weight: 600; }
.ticker .val .live-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--magenta); display: inline-block; animation: pulse 1.4s ease-in-out infinite; margin-left: 2px; }
.ticker-icon { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; }
.ticker-icon.gem {
  background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
}
.ticker-icon.box {
  background: var(--g-900);
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
}
.ticker-icon.games { background: var(--orange); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.ticker-icon.online { background: var(--emerald); border-radius: 999px; box-shadow: 0 0 0 3px rgba(0,0,0,0.18); }

/* Font Awesome ticker icons — replaced the custom clip-path squares with
   proper recognizable icons (gem / cubes / bolt). Each gets a subtle
   colored chip background so the icon reads at small sizes on both light
   and dark themes. */
.ticker-fa {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}

/* Inline gem icon — now uses bloxhotgem.svg as a background image.
   The .gem-i element is sized via 1em width/height so it scales with
   its parent's font-size (12px label → 12×12 gem, 26px headline → 26×26).
   `content: none` kills the FontAwesome ::before glyph so the `<i>` tag
   doesn't render the diamond on top of the SVG.
   Add the file at assets/images/bloxhotgem.svg. */
.gem-i {
  display: inline-block;
  width: 1em; height: 1em;
  background: url('../images/bloxhotlogothirtyone.svg') center/contain no-repeat;
  vertical-align: -0.18em;
  flex-shrink: 0;
  /* color kept so legacy code that reads computed color still works */
  color: var(--orange);
  font-size: 1em;
  line-height: 1;
}
/* Kill the FontAwesome glyph that would otherwise stack on top of the
   SVG image. The :before/:after pseudo-elements are how FA injects the
   icon character — clearing content collapses them to nothing. */
.gem-i::before, .gem-i::after { content: none !important; display: none !important; }
/* Ticker-bar variant — same SVG, slightly inflated for the larger row */
/* IMPORTANT: when fa-gem is INSIDE a .ticker-fa chip we keep the 26×26
   coloured chip box (so the label row has the SAME height as the
   cubes/bolt rows next to it). The SVG renders as a centred background
   at a sane inner size, NOT stretched to fill. Before this fix the gem
   chip collapsed to ~13px so the TOTAL VALUE number sat visibly higher
   than the other two tickers. */
.ticker-fa.fa-gem {
  background-image: url('../images/bloxhotlogothirtyone.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
/* Bare fa-gem (not inside a ticker chip) — render as inline svg image */
i.fa-gem:not(.gem-i):not(.ticker-fa) {
  display: inline-block;
  width: 1em; height: 1em;
  background: url('../images/bloxhotlogothirtyone.svg') center/contain no-repeat;
  vertical-align: -0.18em;
  font-size: 1em;
}
.ticker-fa.fa-gem::before,
i.fa-gem:not(.gem-i)::before { content: none !important; display: none !important; }
/* IMPORTANT: use background-COLOR (not the `background:` shorthand) here.
   The shorthand expands to ALL background longhands, including
   background-image: initial, which wipes out the gem SVG painted by
   `.ticker-fa.fa-gem { background-image: url(bloxhotgem.svg) }`. Dark
   mode override has the same specificity and comes AFTER, so it was
   winning the cascade and the gem icon disappeared on dark theme. */
.ticker-fa--orange {
  color: var(--orange);
  background-color: rgba(16,185,129,0.14);
}
.ticker-fa--blue {
  color: #60A5FA;
  background-color: rgba(96,165,250,0.14);
}
.ticker-fa--green {
  color: #34D399;
  background-color: rgba(52,211,153,0.14);
}
[data-theme="dark"] .ticker-fa--orange { background-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .ticker-fa--blue   { background-color: rgba(96,165,250,0.18); }
[data-theme="dark"] .ticker-fa--green  { background-color: rgba(52,211,153,0.18); }
/* Active games count dot — static, no pulse animation (neon-free) */
.ticker-pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--orange); }

/* ============================================
   FEATURED FLIP
   ============================================ */
.featured { background: linear-gradient(135deg, #FFF2D5 0%, #FFE0AC 100%); border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.featured::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 999px; background: radial-gradient(circle, rgba(16,185,129,0.25), transparent 60%); }
.featured-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #8C4500; background: rgba(255,255,255,0.6); padding: 3px 8px; border-radius: var(--r-sm); letter-spacing: 0.05em; }
.featured-text { flex: 1; min-width: 0; }
.featured h3 { margin: 5px 0 2px; font-size: 15px; font-weight: 700; color: var(--g-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.featured p { margin: 0; font-size: 12px; color: var(--g-700); }
.featured-prize { font-size: 24px; font-weight: 800; color: var(--g-900); letter-spacing: -0.02em; }
.featured-cta { padding: 0 16px; height: 36px; background: var(--g-900); color: white; border-radius: var(--r-md); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: background var(--motion); white-space: nowrap; }
@media (hover:hover) and (pointer:fine) { .featured-cta:hover { background: var(--g-800); } }

/* ============================================
   LOBBY / FILTERS
   ============================================ */
.filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 9;
  background: var(--white);
  padding: 8px 0;
  border-radius: var(--r-md);
}
/* Lobby search input — slot 1 of the FilterBar. Grows to eat all spare
   width on PC (alongside the pills + create button), and on mobile takes
   priority over the pills (which collapse into the .fb-mobile dropdown). */
.fb-search {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  background: var(--g-150);
  border-radius: var(--r-md);
  transition: background var(--motion);
}
/* No focus ring / border on the search input — the user explicitly does
   not want the orange halo on focus. Bg stays the same on focus too so
   nothing visually jumps. */
.fb-search:focus-within { background: var(--g-150); box-shadow: none; }
.fb-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font-size: 14px; font-weight: 500;
  color: var(--g-900);
}
.fb-search input::placeholder { color: var(--g-500); font-weight: 500; }
.fb-search-clear {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--g-200); color: var(--g-700);
  font-size: 11px;
  transition: background var(--motion), color var(--motion);
}
.fb-search-clear:hover { background: var(--g-300); color: var(--g-900); }
[data-theme="dark"] .fb-search { background: var(--g-100); }
[data-theme="dark"] .fb-search:focus-within { background: var(--g-150); }
[data-theme="dark"] .fb-search-clear { background: var(--g-200); }
.fb-pills { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
/* When the FilterBar has a search input, pills no longer need to expand —
   they should be content-width and let the search take the slack. */
.filter-bar.has-search .fb-pills { flex: 0 1 auto; flex-wrap: nowrap; }
.fb-mobile { display: none; flex: 1; position: relative; }
.fb-mb-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 38px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--g-150);
  font-size: 13px; font-weight: 600;
  color: var(--g-800);
  transition: background var(--motion);
}
.fb-mb-btn:hover, .fb-mb-btn.is-open { background: var(--g-200); }
.fb-mb-btn > span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-mb-chev { font-size: 11px; color: var(--g-600); transition: transform 0.22s ease; }
.fb-mb-chev.is-up { transform: rotate(180deg); }
.fb-mb-menu {
  /* Anchor to the RIGHT edge of the (now icon-only) filter button so the
     menu opens leftward into the viewport instead of inheriting the tiny
     button width. Min-width guarantees the pills inside fit on one row. */
  position: absolute; top: calc(100% + 6px); right: 0; left: auto;
  min-width: 260px;
  width: max-content;
  max-width: calc(100vw - 24px);
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.18);
  padding: 12px;
  z-index: 50;
  display: flex; flex-direction: column; gap: 12px;
  animation: dropdown-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top right;
}
.fb-mb-group { display: flex; flex-direction: column; gap: 8px; }
.fb-mb-label { font-size: 10px; font-weight: 700; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.05em; }
.fb-mb-row { display: flex; gap: 6px; flex-wrap: wrap; }
[data-theme="dark"] .fb-mb-menu { background: var(--g-100); border-color: var(--g-200); }
@media (max-width: 767px) {
  .fb-pills { display: none; }
  .fb-mobile { display: block; flex: 0 0 auto; }
  /* Mobile FilterBar layout: [Search (grows)] [filter icon] [create].
     Search is the priority — pills collapse into the .fb-mobile dropdown
     which is now icon-only (sliders + chevron), no text label. */
  .filter-bar.has-search { flex-wrap: nowrap; gap: 6px; }
  .filter-bar.has-search .fb-search { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 12px; }
  .filter-bar.has-search .fb-search input { font-size: 13.5px; }
  .filter-bar.has-search .create-btn { flex: 0 0 auto; }
  /* Dice filter-bar override — same layout as the coinflip one now that
     dice also has search: search first, the round-filter dropdown collapses
     into the same .fb-mobile icon button, then create. */
  .filter-bar.is-dice.has-search .fb-pills { display: none; }
  .filter-bar.is-dice.has-search .fb-mobile { display: block; }
  /* Legacy dice (no search) — keep the 4 round pills visible (back-compat). */
  .filter-bar.is-dice:not(.has-search) .fb-pills { display: flex; flex-wrap: wrap; gap: 4px; }
  .filter-bar.is-dice:not(.has-search) .fb-mobile { display: none; }
  .filter-bar.is-dice .fp { height: 32px; padding: 0 10px; font-size: 12px; }
  .filter-bar.is-dice .fp .gem-i { font-size: 10px; }
  .filter-bar.is-dice .create-btn { height: 32px; padding: 0 12px; font-size: 12px; }
}
/* Icon-only mobile filter button — no width:100%, just compact square */
.fb-mb-btn--icon {
  width: auto !important;
  padding: 0 12px !important;
  height: 40px !important;
  gap: 6px !important;
}
.filter-bar .spacer { flex: 1; }
.fp { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-md); background: var(--g-150); font-size: 13.5px; font-weight: 600; color: var(--g-800); transition: background var(--motion); white-space: nowrap; }
.fp.is-active { background: var(--orange); color: white; }
@media (hover:hover) and (pointer:fine) { .fp:not(.is-active):hover { background: var(--g-200); } }
.fp .count { background: rgba(255,255,255,0.15); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; }
.fp:not(.is-active) .count { background: var(--white); color: var(--g-700); }
/* Global coin-mini — used by filter pills AND the dm2-items-col headers
   (and any future place that needs an inline heads/tails badge). The
   .h/.t variants set the background image, so they MUST be global (not
   scoped to .fp) or the SVG never renders outside the filter bar. */
/* coin-mini — heads/tails badge used in filter pills, picked-side chips,
   item-col headers etc. Bumped 18 → 22 per user request ("bir tik
   daha büyük"). Variants below override for specific dense contexts. */
.coin-mini { width: 22px; height: 22px; border-radius: 999px; display: inline-block; }
.coin-mini.h { background: url('../images/heads.webp') center/cover no-repeat; }
.coin-mini.t { background: url('../images/tails.webp') center/cover no-repeat; }
.divider-v { width: 1px; height: 18px; background: var(--g-200); margin: 0 2px; }
.create-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--r-md); background: var(--orange); color: white; font-size: 13px; font-weight: 600; transition: background var(--motion); }
@media (hover:hover) and (pointer:fine) { .create-btn:hover { background: var(--orange-h); } }

/* Flip cards — item based, CSGO Empire / Roblox MM2 style */
.flip-grid { display: flex; flex-direction: column; gap: 8px; }
.flip-card {
  background: var(--g-100); border-radius: var(--r-md);
  /* 1px border in BOTH themes so the card's box height is identical in
     light and dark (dark used to add a 1px border that light lacked,
     which made the row 2px taller in dark → the content "shifted down"
     when you switched themes). Light gets a subtle grey line, dark gets
     a subtle white line — same width, just different color. */
  border: 1px solid var(--g-200);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  transition: background var(--motion), box-shadow 0.2s ease, transform 0.15s ease, border-color var(--motion);
  position: relative;
}
@media (hover:hover) and (pointer:fine) {
  .flip-card:not(.rolling):not(.resolved):not(.cancelled):hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
}
.fc-vs {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px;
  background: transparent;
  color: var(--g-400);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  text-transform: lowercase;
}
.flip-card.is-team .fc-vs { display: none; }
/* Items take the available middle space */
.fc-items-wrap { flex: 1; min-width: 0; }
.flip-card > * { z-index: 1; }
.flip-card.mine, .flip-card.rolling { isolation: isolate; }
/* Own flip — a 3px orange accent bar on the left, drawn via ::before so
   it's IDENTICAL in light + dark, doesn't change the box size, and isn't
   wiped by the hover box-shadow (the old approach used a green gradient in
   light but an orange inset only in dark — inconsistent between themes). */
.flip-card.mine { background: var(--g-100); }
.flip-card.mine::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  border-radius: var(--r-md) 0 0 var(--r-md);
  z-index: 2;
  pointer-events: none;
}
/* YOURS label removed — Cancel button already indicates ownership */
/* Rolling state — keep the card visually identical to a normal card.
   Old behaviour layered a magenta gradient on the right side ("stripes")
   that the user found distracting; the centered ROLLING pill + sub
   indicators already signal the state clearly. */
.flip-card.rolling { background: var(--g-100); }
@media (hover:hover) and (pointer:fine) { .flip-card:not(.rolling):hover { background: var(--g-150); } }

/* Left side: avatar + chip */
.fc-creator { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fc-avatar { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; color: white; font-size: 15px; flex-shrink: 0; position: relative; }
/* Side badge — user's webp coin face, no halo. */
.fc-side-badge {
  position: absolute; top: -4px; right: -4px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}
.fc-side-badge.h { background-image: url('../images/heads.webp'); }
.fc-side-badge.t { background-image: url('../images/tails.webp'); }
/* Dice variant — orange filled chip with the round count instead of the
   H/T coin face. Same size + position as the coin badges so layout stays
   identical across coinflip + dice lobby rows. */
.fc-side-badge.fc-side-badge--dice {
  background: var(--orange);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900;
  color: white;
  border: 2px solid var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[data-theme="dark"] .fc-side-badge.fc-side-badge--dice { border-color: var(--g-50); }

/* Roblox profile image used inside .fc-avatar circles. */
.fc-avatar.has-img { background: transparent !important; }
.fc-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.fc-avatar.purple { background: linear-gradient(135deg,#7C3AED,#A78BFA); }
.fc-avatar.blue { background: linear-gradient(135deg,#1E63F0,#5C9CFF); }
.fc-avatar.green { background: linear-gradient(135deg,#047857,#10B981); }
.fc-avatar.pink { background: linear-gradient(135deg,#C2185B,#FF3D9A); }
.fc-avatar.yellow { background: linear-gradient(135deg,#10B981,#FFC960); }
.fc-avatar.cyan { background: linear-gradient(135deg,#0891B2,#22D3EE); }
.fc-avatar.empty {
  background: transparent;
  color: var(--g-400);
  border: 2px dashed var(--g-300);
  animation: empty-pulse 2.5s ease-in-out infinite;
}
@keyframes empty-pulse {
  0%, 100% { border-color: var(--g-300); }
  50%      { border-color: var(--orange); }
}
/* Dark mode — --g-300 (#3D4555) is too dim against --g-100 surfaces, so
   the "waiting for opponent" dashed circle barely registered. Bump it to
   a more visible neutral + retarget the pulse keyframe so the animation
   doesn't snap back to the too-dim color. */
[data-theme="dark"] .fc-avatar.empty {
  /* Force the full border shorthand so an earlier `border: 0` reset can't
     win on specificity. Bumped to 0.30 alpha so the dashed ring is clearly
     visible on the dark surface (light mode shows it crisply via g-300).
     NOTE: only the "your flip — waiting for opponent" avatar keeps this
     dashed ring. The quick-join chip (.fc-empty-join) must NOT have it —
     the user wants that chip borderless, matching the plain avatar. */
  border: 2px dashed rgba(255,255,255,0.30) !important;
  color: var(--g-600);
  animation-name: empty-pulse-dark;
}
@keyframes empty-pulse-dark {
  0%, 100% { border-color: rgba(255,255,255,0.30); }
  50%      { border-color: var(--orange); }
}

/* legacy .fc-chip — kept hidden, badge on avatar replaces it */
.fc-chip { display: none; }

/* Opponent slot — Quick join button OR opponent avatar */
.fc-opponent { flex-shrink: 0; }
.fc-empty-join {
  /* Sized to EXACTLY match its visual sibling — the creator .fc-avatar on
     the opposite side of the VS (48px card / 60px list, see overrides
     below) — NOT the centre coin slot. The opponent chip and the creator
     avatar must read as the same circle; matching the countdown instead
     made the chip noticeably smaller than the avatar facing it. */
  width: 48px; height: 48px;
  border-radius: 999px;
  background: transparent;
  /* No border — per user request the chip fills the button with no
     perimeter line/background. The chip's own circular shape is the edge. */
  border: 0;
  padding: 0;
  color: var(--orange);
  display: grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  transition: transform var(--motion), box-shadow var(--motion);
  position: relative;
}
/* Coin face shown inside the empty quick-join slot. The side displayed
   is the side the joiner would TAKE — opposite of the creator's pick.
   So the user sees instantly: "join here = I'll be tails / heads".
   Sized to FILL the parent (48×48 was 30×30, leaving a 2px dashed
   ring visible around it — that ring is what the user wanted gone). */
.fc-empty-coin {
  width: 100%; height: 100%;
  border-radius: 999px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* No drop shadow — the user wants the chip to read as flat as the plain
     creator avatar opposite it, with no halo/ring/background behind it. */
}
.fc-empty-coin.h { background-image: url('../images/heads.webp'); }
.fc-empty-coin.t { background-image: url('../images/tails.webp'); }
.fc-empty-join:hover .fc-empty-coin {
  transform: scale(1.06);
  transition: transform 0.18s ease;
}

/* Dice variant — orange filled disc with the round count badge.
   Mirrors coinflip's quick-join shape (48×48 circle, no border) but
   uses a die icon instead of a coin face so the user instantly knows
   they're about to join a dice match (not a coinflip). */
.fc-empty-join--dice .fc-empty-dice {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-h) 100%);
  color: white;
  font-size: 20px;
  /* No drop shadow — match the flat creator avatar opposite it (no ring). */
}
.fc-empty-join--dice .fc-empty-dice-n {
  position: absolute;
  bottom: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--white);
  color: var(--orange);
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  line-height: 1;
}
.fc-empty-join--dice:hover .fc-empty-dice {
  transform: scale(1.06);
  transition: transform 0.18s ease;
}
[data-theme="dark"] .fc-empty-join--dice .fc-empty-dice-n {
  background: var(--g-150);
  border-color: var(--g-150);
}
/* Hover state — no border to swap anymore, so the only feedback is the
   coin face scaling slightly (handled by `.fc-empty-join:hover .fc-empty-coin`
   above). Keep this rule for any inherited button styling reset. */
.fc-empty-join:hover { background: transparent; }
.fc-avatar.empty i { font-size: 16px; }

/* Middle: items + overflow */
.fc-items-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.fc-items { display: flex; gap: 6px; flex-shrink: 1; min-width: 0; }
.fc-item {
  width: 50px; height: 50px;
  position: relative;
  border-radius: var(--r-md);
  padding: 2px;
  flex-shrink: 0;
  transition: transform var(--motion);
}
/* Inner-item hover lift removed per user request — items stay still on hover */
.fc-item .inner {
  width: 100%; height: 100%;
  background: var(--g-50);
  border-radius: calc(var(--r-md) - 2px);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
.fc-item .inner img {
  width: 86%; height: 86%;
  object-fit: contain;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  /* Fade-in once the image actually decodes (sets data-loaded via onLoad). */
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fc-item .inner img[data-loaded="1"] { opacity: 1; }
.fc-item.r-ancient { background: linear-gradient(135deg, #FFA94D, #E63946); box-shadow: 0 0 12px -2px rgba(0,0,0,0.18); }
.fc-item.r-godly   { background: linear-gradient(135deg, #FFE066, #FF8800); box-shadow: 0 0 12px -2px rgba(0,0,0,0.18); }
.fc-item.r-unique  { background: linear-gradient(135deg, #B197FC, #7048E8); box-shadow: 0 0 12px -2px rgba(0,0,0,0.18); }
/* Chroma — animate only the ::before so children (tooltip, image) aren't hue-shifted */
.fc-item.r-chroma {
  background: transparent;
  overflow: hidden;
  box-shadow: 0 0 16px -2px rgba(0,0,0,0.18);
}
.fc-item.r-chroma::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 180deg at 50% 50%, #FF6B6B, #FFD93D, #6BCB77, #4D96FF, #B967FF, #FF6B6B);
  animation: chroma-rot 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.fc-item.r-chroma > * { position: relative; z-index: 1; }
@keyframes chroma-rot { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
/* PERF: pause hue rotation when the card isn't directly hovered — saves
   significant CPU when the lobby has many chroma items, since `hue-rotate`
   forces a per-frame filter pass on the whole element. */
@media (hover: hover) and (pointer: fine) {
  .fc-item.r-chroma::before { animation-play-state: paused; }
  .flip-card:hover .fc-item.r-chroma::before,
  .inv-item:hover .fc-item.r-chroma::before,
  .fc-item.r-chroma:hover::before { animation-play-state: running; }
}
/* Tooltip always above any background filter cascade.
   Use width:max-content so the bubble fits its text — never gets squeezed to
   a 1-character "Ch / a" stack. Long names truncate with ellipsis instead. */
.fc-item-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--white);
  color: var(--g-900);
  padding: 7px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  /* Full item name visible — no truncation. Allows wrap to 2 lines for
     very long names rather than ellipsis cutoff. max-width capped so it
     can't push past the viewport, but generous enough for any MM2 name. */
  white-space: normal;
  text-align: center;
  width: max-content;
  max-width: min(320px, 80vw);
  word-break: break-word;
  hyphens: none;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0; transition: opacity 0.18s;
  z-index: 999;
  isolation: isolate;
  filter: none;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.05);
}
[data-theme="dark"] .fc-item-tooltip {
  background: #1e2026;
  color: var(--g-900);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.55);
}
/* Let the tooltip break out of its containers so it never gets clipped */
.fc-items, .fc-items-wrap, .fc-creator, .fc-opponent { overflow: visible; }
.flip-card { overflow: visible; }
.flip-grid { overflow: visible; }
.fc-item { position: relative; }
.fc-item:hover { z-index: 50; }
.fc-item:hover .fc-item-tooltip { opacity: 1; }

/* ============================================================================
   RESOLVED FLIP — finished games visually dimmed so they're distinguishable
   from active (open/rolling) battles.
   PERF: uses ONLY opacity (compositor-only, GPU-fast). No `filter:` —
   that was creating one composite layer per card and chunking the lobby
   when many resolved cards stacked up.
   ============================================================================ */
.flip-card.resolved {
  opacity: 0.7;
  transition: opacity 0.2s;
}
.flip-card.resolved:hover { opacity: 1; }
.flip-card.resolved .fc-items-wrap { opacity: 0.88; }
/* Cancelled flips fade even more */
.flip-card.cancelled {
  opacity: 0.45;
}

.fc-overflow {
  height: 50px; min-width: 50px;
  padding: 0 10px;
  background: var(--g-200);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  color: var(--g-700);
  flex-shrink: 0;
}

/* Right: value + range + actions */
.fc-value { text-align: right; flex-shrink: 0; min-width: 80px; }
.fc-value .total {
  font-size: 17px; font-weight: 700;
  color: var(--g-900);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: -0.01em;
}
.fc-value .total .gem {
  width: 13px; height: 13px;
  background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
  display: inline-block;
}
.fc-value .range { font-size: 11px; color: var(--g-500); margin-top: 2px; font-weight: 500; }

.fc-actions { display: flex; flex-direction: row; gap: 6px; flex-shrink: 0; }
.fc-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 700;
  transition: background var(--motion);
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.fc-btn.join { background: var(--orange); color: white; }
.fc-btn.join:hover { background: var(--orange-h); }

/* Quick join — empty-slot inviting design with dashed border + filled center */
.fc-quick-join {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 6px 0 4px;
  border-radius: var(--r-md);
  background: transparent;
  border: 2px dashed var(--g-300);
  color: var(--g-800);
  font-size: 13px; font-weight: 700;
  transition: border-color var(--motion), background var(--motion), transform var(--motion);
  cursor: pointer;
  animation: empty-pulse 2.4s ease-in-out infinite;
}
.fc-quick-join:hover { background: #FFF6E9; border-color: var(--orange); animation: none; transform: translateY(-1px); }
.fc-quick-join .fc-qj-icon {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--orange);
  display: grid; place-items: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,0.18);
}
.fc-quick-join .fc-qj-label { padding-right: 6px; }
[data-theme="dark"] .fc-quick-join:hover { background: rgba(255,255,255,0.04); }
.fc-btn.view { background: var(--g-200); color: var(--g-800); }
.fc-btn.view:hover { background: var(--g-300); }
.fc-btn.rolling { background: var(--g-200); color: var(--g-700); display: inline-flex; align-items: center; gap: 6px; cursor: default; justify-content: center; }
.fc-btn.rolling .dot { width: 6px; height: 6px; background: var(--magenta); border-radius: 999px; animation: pulse 1.4s ease-in-out infinite; }
.fc-btn.cancel { background: transparent; color: var(--g-600); padding: 0 10px; min-width: 0; }
.fc-btn.cancel:hover { color: var(--red); }

/* HoldButton CSS removed — feature reverted per user request. The
   component definition is still present in app.jsx (unused but harmless)
   in case we want it back later. */

/* ============================================
   PROFILE DROPDOWN MENU
   ============================================ */
.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 36px -8px rgba(0,0,0,0.18);
  padding: 10px;
  z-index: 60;
  display: flex; flex-direction: column; gap: 6px;
  animation: pm-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pm-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.pm-user { display: flex; align-items: center; gap: 12px; padding: 10px 8px 12px; border-bottom: 1px solid var(--g-150); margin-bottom: 4px; }
.pm-avatar { width: 44px; height: 44px; border-radius: var(--r-md); background: linear-gradient(135deg,#8B5CF6,#FF3D9A); color: white; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.pm-info { min-width: 0; }
.pm-name { font-weight: 700; color: var(--g-900); font-size: 14px; }
.pm-sub { font-size: 11px; color: var(--g-500); display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; }
.pm-rank {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; margin-top: 3px;
  padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  width: fit-content;
}
.pm-rank.rank-whale    { background: linear-gradient(135deg, rgba(139,92,246,0.20), rgba(139,92,246,0.08)); color: #8B5CF6; }
.pm-rank.rank-diamond  { background: linear-gradient(135deg, rgba(34,211,238,0.20), rgba(34,211,238,0.08)); color: #0891B2; }
.pm-rank.rank-platinum { background: linear-gradient(135deg, rgba(167,139,250,0.20), rgba(167,139,250,0.08)); color: #7C3AED; }
.pm-rank.rank-gold     { background: linear-gradient(135deg, rgba(255,214,74,0.22), rgba(255,153,32,0.10)); color: #B7790E; }
.pm-rank.rank-silver   { background: linear-gradient(135deg, rgba(200,200,200,0.22), rgba(150,150,150,0.10)); color: #646464; }
.pm-rank.rank-bronze   { background: linear-gradient(135deg, rgba(205,127,50,0.22), rgba(180,100,40,0.10)); color: #8B4513; }
.pm-rank.rank-rookie   { background: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(16,185,129,0.08)); color: #0E9F6E; }
[data-theme="dark"] .pm-rank.rank-gold     { color: #FFD64A; }
[data-theme="dark"] .pm-rank.rank-silver   { color: #C8C8C8; }
[data-theme="dark"] .pm-rank.rank-bronze   { color: #D49A6A; }
[data-theme="dark"] .pm-rank.rank-diamond  { color: #22D3EE; }
[data-theme="dark"] .pm-rank.rank-platinum { color: #B197FC; }
[data-theme="dark"] .pm-rank.rank-rookie   { color: #34D399; }
.pm-balance {
  background: linear-gradient(135deg, #FFF6E9, #FFEBC9);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.pm-balance-lbl { font-size: 10px; font-weight: 700; color: #8C4500; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 5px; }
.pm-balance-val { font-size: 18px; font-weight: 800; color: var(--g-900); letter-spacing: -0.02em; }
.pm-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent;
  border-radius: var(--r-md);
  padding: 10px 10px;
  font-size: 13px; font-weight: 600;
  color: var(--g-800);
  transition: background var(--motion), color var(--motion);
  text-align: left;
}
.pm-row:hover { background: var(--g-100); }
.pm-row .pm-icon { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--g-150); display: grid; place-items: center; flex-shrink: 0; color: var(--g-700); }
.pm-row .pm-label { flex: 1; }
.pm-row.pm-primary { background: var(--orange); color: white; }
.pm-row.pm-primary:hover { background: var(--orange-h); }
.pm-row.pm-primary .pm-icon { background: rgba(255,255,255,0.2); color: white; }
.pm-row.pm-danger { color: var(--red); }
.pm-row.pm-danger:hover { background: rgba(239,68,68,0.08); }
.pm-row.pm-danger .pm-icon { background: rgba(239,68,68,0.1); color: var(--red); }
@media (max-width: 480px) {
  .profile-menu { right: -10px; width: 260px; }
}

/* ============================================
   LEADERBOARD PAGE
   ============================================ */
.lb-page { padding: 18px 0 28px; }
.lb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.lb-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; color: var(--g-900); }
.lb-sub { margin: 4px 0 0; font-size: 13px; color: var(--g-500); }
.lb-period { min-width: 180px; }

/* Top 3 podium */
.lb-top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.lb-top-card {
  background: var(--g-100);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  border: 1px solid var(--g-150);
  transition: transform var(--motion), box-shadow var(--motion);
  overflow: hidden;
}
.lb-top-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.lb-rank-1 { background: linear-gradient(180deg, #FFF6E9 0%, var(--g-100) 70%); border-color: rgba(255,214,74,0.5); box-shadow: 0 8px 24px -10px rgba(0,0,0,0.18); }
.lb-rank-1::before { background: linear-gradient(90deg, #FFD64A, #FE9920); }
.lb-rank-2 { background: linear-gradient(180deg, #F6F6F6 0%, var(--g-100) 70%); border-color: var(--g-300); }
.lb-rank-2::before { background: linear-gradient(90deg, #D5D5D5, #969696); }
.lb-rank-3 { background: linear-gradient(180deg, #FFEEDD 0%, var(--g-100) 70%); border-color: rgba(199,123,62,0.5); }
.lb-rank-3::before { background: linear-gradient(90deg, #D49A6A, #8B4513); }
@media (hover:hover) and (pointer:fine) { .lb-top-card:hover { transform: translateY(-3px); } }

.lb-top-medal { position: absolute; top: 12px; right: 14px; font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)); }
.lb-top-row { display: flex; align-items: center; gap: 12px; }
.lb-avatar { width: 52px !important; height: 52px !important; font-size: 15px !important; border-radius: 999px !important; flex-shrink: 0; }
.lb-top-info { min-width: 0; }
.lb-top-name { font-weight: 800; font-size: 17px; color: var(--g-900); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-top-rank { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--g-600); font-weight: 700; margin-top: 2px; }

.lb-top-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px dashed var(--g-200); }
.lb-ts-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-ts-lbl { font-size: 9.5px; color: var(--g-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.lb-ts-val { font-size: 14px; font-weight: 800; color: var(--g-900); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 4px; }
.lb-ts-val .gem { width: 11px; height: 11px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }
[data-theme="dark"] .lb-top-card { background: var(--g-100); border-color: var(--g-200); }
[data-theme="dark"] .lb-rank-1 { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, var(--g-100) 70%); }
[data-theme="dark"] .lb-rank-2 { background: linear-gradient(180deg, rgba(200,200,200,0.10) 0%, var(--g-100) 70%); }
[data-theme="dark"] .lb-rank-3 { background: linear-gradient(180deg, rgba(199,123,62,0.18) 0%, var(--g-100) 70%); }
[data-theme="dark"] .lb-top-stats { border-top-color: var(--g-200); }

/* Card-style row list (rank 4+) */
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row {
  display: grid;
  grid-template-columns: 56px 1.6fr 1fr 1.2fr 1.3fr;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--g-100);
  border-radius: var(--r-md);
  border: 1px solid var(--g-150);
  transition: transform var(--motion), background var(--motion), border-color var(--motion);
}
.lb-row:hover { transform: translateX(2px); background: var(--g-150); border-color: var(--g-200); }
[data-theme="dark"] .lb-row { background: var(--g-100); border-color: var(--g-200); }
[data-theme="dark"] .lb-row:hover { background: var(--g-150); }
.lb-row-rank { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--g-600); font-size: 15px; }
.lb-row-player { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-row-name { font-weight: 700; color: var(--g-900); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }

.lb-row-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lbs-lbl { font-size: 9.5px; color: var(--g-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.lbs-val { font-size: 14px; font-weight: 800; color: var(--g-900); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 4px; }
.lbs-val.highlight { color: var(--orange); }
.lbs-val .gem { width: 11px; height: 11px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }
.lbs-unit { font-size: 10px; color: var(--g-500); font-weight: 600; margin-left: 2px; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 980px) {
  .lb-top3 { grid-template-columns: 1fr; }
  .lb-row { grid-template-columns: 44px 1.4fr 1fr 1fr; padding: 12px 14px; gap: 10px; }
  .lb-hide-sm { display: none; }
  .lb-title { font-size: 22px; }
}
@media (max-width: 540px) {
  .lb-row { grid-template-columns: 40px 1fr 1fr; }
  .lb-row > :nth-child(4) { display: none; }
}

/* ============================================
   MOBILE BOTTOM NAVBAR
   ============================================ */
.mobile-nav {
  display: none;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 64px;
  background: rgba(255,255,255,0.98);
  /* backdrop-filter removed — perf hit on mobile too, especially with
     a scrollable lobby underneath. */
  border-top: 1px solid var(--g-200);
  z-index: 1000;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  /* Lock in place — no scroll-driven animation, no transition. */
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
  will-change: auto;
  /* iOS Safari sometimes lifts position:fixed during over-scroll bounce —
     this hint forces a new compositor layer so the bounce is isolated. */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
.mn-btn {
  flex: 1; max-width: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  color: var(--g-600);
  font-size: 10px; font-weight: 600;
  background: transparent;
  transition: color var(--motion);
  position: relative;
}
.mn-btn.is-active { color: var(--g-900); }
.mn-btn.is-active::before {
  content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--orange);
}
.mn-btn i { font-size: 18px; line-height: 1; }
.mn-btn.center {
  position: relative;
  flex: 0 0 60px;
  max-width: 60px;
}
.mn-btn.center .mn-center-bg {
  width: 54px; height: 54px;
  border-radius: 999px;
  background: var(--orange);
  display: grid; place-items: center;
  color: white;
  margin-top: -22px;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.18), 0 0 0 4px var(--white);
  transition: background var(--motion), transform var(--motion);
}
.mn-btn.center:hover .mn-center-bg, .mn-btn.center:active .mn-center-bg { background: var(--orange-h); transform: translateY(-2px); }
.mn-btn.center i { font-size: 22px; }
.mn-btn.center .mn-label { color: var(--orange); font-weight: 700; }
/* Profile button — when logged in, the user's Roblox avatar replaces the
   generic user icon. Same 22px footprint as other icons. */
.mn-btn--profile .mn-avatar {
  width: 22px; height: 22px;
  border-radius: 999px;
  object-fit: cover;
  display: inline-block;
  background: var(--g-200);
  /* Subtle ring so the avatar reads as a button at small size */
  box-shadow: 0 0 0 1.5px var(--g-300);
}
.mn-btn--profile.is-active .mn-avatar {
  box-shadow: 0 0 0 1.5px var(--orange);
}

@media (max-width: 980px) {
  :root { --mobile-nav-h: 64px; }
  .mobile-nav { display: flex; }
  .chat-side { width: 100%; max-width: 100%; }
  /* Hide things that are already in the bottom mobile-nav */
  .h-wallet, .h-wallet-cta, .h-avatar-wrap, .h-chat-btn { display: none !important; }
}

/* ============================================
   FOOTER (slim)
   ============================================ */
.footer { background: var(--g-100); margin-top: 40px; padding: 32px 0 0; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 24px; }
.footer-cols--slim { grid-template-columns: 1.8fr 1fr 1fr; }
.footer h4 { font-size: 12px; font-weight: 700; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--g-700); }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a { font-size: 13px; color: var(--g-700); transition: color var(--motion); }
@media (hover:hover) and (pointer:fine) { .footer a:hover { color: var(--g-900); } }
.footer-brand p { color: var(--g-600); font-size: 13px; margin: 10px 0 14px; max-width: 320px; line-height: 1.5; }

/* ============================================================
   ADMIN PANEL — upgraded user dossier + chat moderation
   ============================================================ */
.admin-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.admin-user-card {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 12px;
  padding: 14px;
  transition: border-color 0.15s, transform 0.05s;
}
.admin-user-card:hover { border-color: var(--orange); }
.admin-user-card.is-banned { border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.04); }
.admin-user-card.is-admin  { border-color: rgba(16,185,129,0.5); }
.auc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.auc-name {
  background: none; border: 0; padding: 0;
  font-size: 15px; font-weight: 800; color: var(--g-900);
  cursor: pointer;
}
.auc-name:hover { color: var(--orange); text-decoration: underline; }
.auc-tags { display: flex; gap: 4px; }
.auc-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 6px; border-radius: 4px;
}
.auc-tag.admin  { background: var(--orange); color: #fff; }
.auc-tag.mod    { background: #2E7DFF; color: #fff; }
.auc-tag.vm     { background: #8B5CF6; color: #fff; }
.auc-tag.banned { background: #ef4444; color: #fff; }
.auc-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  font-size: 12px;
  margin-bottom: 12px;
}
.auc-stats > div { display: flex; justify-content: space-between; }
.auc-stats .lbl { color: var(--g-600); }
.auc-stats .val { font-weight: 700; color: var(--g-900); display: inline-flex; align-items: center; gap: 4px; }
.auc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.auc-actions .settings-btn { font-size: 11px; padding: 6px 10px; }
.auc-role-select {
  font-size: 11px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--g-100);
  border: 1px solid var(--g-200);
  color: var(--g-800);
  cursor: pointer;
}
[data-theme="dark"] .auc-role-select { background: var(--g-150); border-color: var(--g-200); color: var(--g-800); }
.auc-actions .settings-btn.danger { background: #ef4444; color: #fff; }
.auc-actions .settings-btn.danger:hover { background: #dc2626; }

/* User detail modal — premium dossier */
.admin-detail-modal {
  width: min(960px, 96vw);
  max-height: 92vh;
  display: flex; flex-direction: column;
  padding: 0;
}
.adm-detail-head {
  position: relative;
  padding: 22px 24px;
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--g-200);
  overflow: hidden;
}
.adm-detail-head-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 0% 50%, rgba(16,185,129,0.18), transparent 55%),
    linear-gradient(90deg, var(--g-100), var(--g-150));
  pointer-events: none;
  z-index: 0;
}
.adm-detail-head > * { position: relative; z-index: 1; }
.adm-detail-av {
  width: 64px; height: 64px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--g-200);
  box-shadow: 0 0 0 3px var(--g-100), 0 0 0 5px var(--orange);
}
.adm-detail-av-fallback {
  display: grid; place-items: center;
  font-size: 22px; font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #10B981, #14C795);
}
.adm-detail-id { flex: 1; min-width: 0; }
.adm-detail-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 20px; font-weight: 900;
  color: var(--g-900);
}
.adm-detail-sub {
  margin-top: 4px;
  font-size: 12px; color: var(--g-600);
}
.adm-detail-close {
  position: relative; z-index: 2;
  width: 36px; height: 36px;
  background: var(--g-100);
  border: 0; border-radius: 10px;
  color: var(--g-700); cursor: pointer;
  display: grid; place-items: center;
}
.adm-detail-close:hover { background: var(--g-200); color: var(--g-900); }
.adm-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  background: var(--g-200);
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  color: var(--g-700);
}
.adm-tab.is-active .adm-tab-count { background: var(--orange); color: #fff; }
.admin-detail-body { padding: 16px 20px; overflow-y: auto; flex: 1; }

/* Chat tab — Discord-style premium */
.adm-chat-wrap { display: flex; flex-direction: column; gap: 12px; }
.adm-msg-channels-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--g-200);
}
.adm-msg-ch-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--g-700);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.adm-msg-ch-pill:hover { background: var(--g-200); }
.adm-msg-ch-pill.is-active {
  background: var(--ch-color, var(--orange));
  border-color: var(--ch-color, var(--orange));
  color: #fff;
}
.adm-msg-ch-pill.is-active .adm-msg-ch-count { background: rgba(255,255,255,0.25); color: #fff; }
.adm-msg-ch-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--g-400);
}
.adm-msg-ch-count {
  padding: 1px 6px;
  background: var(--g-200);
  border-radius: 999px;
  font-size: 9px; font-weight: 900;
  color: var(--g-700);
}

.adm-msg-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 10px;
}
.adm-msg-search i { color: var(--g-500); font-size: 13px; }
.adm-msg-search input {
  flex: 1;
  border: 0; background: transparent;
  color: var(--g-900);
  font-size: 13px;
  outline: none;
}
.adm-msg-search .settings-btn { padding: 6px 12px; font-size: 11px; }

.adm-msg-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}
.adm-msg {
  position: relative;
  display: grid;
  /* checkbox · channel-pill · text · date · delete-btn */
  grid-template-columns: auto auto 1fr auto auto;
  align-items: flex-start; gap: 12px;
  padding: 10px 14px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  transition: background 0.12s, border-color 0.12s;
}
.adm-msg:hover { background: var(--g-200); }
.adm-msg.is-selected {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.55);
}
.adm-msg-check {
  width: 16px; height: 16px;
  margin-top: 4px;
  cursor: pointer;
  accent-color: var(--orange);
}
.adm-msg-del {
  align-self: center;
  width: 30px; height: 30px;
  border: 0; background: transparent;
  color: var(--g-500);
  border-radius: 6px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--motion), color var(--motion);
}
.adm-msg-del:hover { background: rgba(220,38,38,0.12); color: var(--rose); }

/* Bulk-action bar above the message list — sticky-looking pill that swaps
   its content between "X selected → Delete selected" and idle counter. */
.adm-msg-bulkbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.adm-msg-bulkbar-count {
  font-weight: 700;
  color: var(--g-800);
  margin-right: auto;
}
.adm-bulk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--g-800);
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.adm-bulk-btn:hover { background: var(--g-100); border-color: var(--g-300); }
.adm-bulk-btn.danger {
  background: var(--rose);
  border-color: var(--rose);
  color: white;
}
.adm-bulk-btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }
[data-theme="dark"] .adm-msg-bulkbar { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .adm-bulk-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--g-200); }
[data-theme="dark"] .adm-bulk-btn:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .adm-msg-del:hover { background: rgba(220,38,38,0.2); }
.adm-msg.is-flagged {
  background: linear-gradient(90deg, rgba(245,158,11,0.16), rgba(16,185,129,0.08));
  border-color: rgba(245,158,11,0.7);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 0 12px -2px rgba(0,0,0,0.18);
}
.adm-msg-ch {
  font-size: 10px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
}
.adm-msg-body { min-width: 0; }
.adm-msg-text {
  font-size: 14px; line-height: 1.4;
  color: var(--g-900);
  word-break: break-word;
}
.adm-msg-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.adm-msg-date {
  font-size: 11px;
  color: var(--g-500);
  white-space: nowrap;
  align-self: flex-start;
  padding-top: 2px;
}
.adm-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--g-200); margin-bottom: 14px; }
.adm-tab {
  background: none; border: 0;
  padding: 10px 14px;
  font-size: 13px; font-weight: 700;
  color: var(--g-600);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.adm-tab.is-active { color: var(--orange); border-bottom-color: var(--orange); }
.adm-tab:hover:not(.is-active) { color: var(--g-900); }
.adm-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.adm-card {
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 8px;
  padding: 10px 12px;
}
.adm-card .lbl { font-size: 11px; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.04em; }
.adm-card .val { font-size: 16px; font-weight: 800; color: var(--g-900); display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.adm-card.good { border-color: rgba(16,185,129,0.45); background: rgba(16,185,129,0.06); }
.adm-card.good .val { color: #047857; }
.adm-card.bad  { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.06); }
.adm-card.bad  .val { color: #b91c1c; }
[data-theme="dark"] .adm-card.good .val { color: #34D399; }
[data-theme="dark"] .adm-card.bad  .val { color: #F87171; }

.adm-flip-list { display: flex; flex-direction: column; gap: 6px; }
.adm-flip-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto auto auto;
  align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 8px;
  font-size: 13px;
}
.adm-flip-row.won  { border-left: 3px solid #10B981; }
.adm-flip-row.lost { border-left: 3px solid #ef4444; opacity: 0.7; }
.adm-flip-id { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--g-500); }
.adm-flip-date { font-size: 11px; color: var(--g-500); }
.adm-state-pill {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  background: var(--g-200);
  color: var(--g-700);
  display: inline-flex; align-items: center; gap: 4px;
}
.adm-state-pill.won  { background: rgba(16,185,129,0.18); color: #047857; }
.adm-state-pill.lost { background: rgba(239,68,68,0.18); color: #b91c1c; }
[data-theme="dark"] .adm-state-pill.won  { color: #34D399; }
[data-theme="dark"] .adm-state-pill.lost { color: #F87171; }

.adm-msg-list, .adm-session-list { display: flex; flex-direction: column; gap: 6px; }
.adm-msg, .adm-session {
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.adm-msg.is-flagged {
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.6);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18);
}
.adm-msg-ch {
  padding: 2px 7px;
  background: var(--g-200);
  border-radius: 4px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g-700);
}
.adm-msg-text { flex: 1; color: var(--g-900); word-break: break-word; }
.adm-msg-date { font-size: 11px; color: var(--g-500); }
.adm-flag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px; font-weight: 800;
  background: #ef4444; color: #fff;
}
.adm-flag.flag-external_link, .adm-flag.flag-link {
  background: #f59e0b; color: #fff;
}
.adm-flag.flag-invite_link, .adm-flag.flag-invite {
  background: #8b5cf6; color: #fff;
}
.adm-flag.flag-crypto_addr {
  background: #db2777; color: #fff;
}
.adm-flag.flag-scam_phrase, .adm-flag.flag-scam {
  background: #ef4444; color: #fff;
  animation: flag-pulse 1.4s ease-in-out infinite;
}
.adm-flag.flag-all_caps {
  background: #6b7280; color: #fff;
}
@keyframes flag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(0,0,0,0.18); }
}
.adm-session .adm-ip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; }
.adm-session .adm-ua { color: var(--g-600); font-size: 11px; flex: 1; word-break: break-all; }
.adm-session .adm-meta { font-size: 11px; color: var(--g-500); display: flex; flex-direction: column; }

/* AdminChatMod — multi-channel chat moderation */
.admin-chat-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 14px 0;
  align-items: center;
}
.admin-flag-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--g-700);
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--g-200);
  border-radius: 8px;
  background: var(--g-150);
}
.admin-flag-toggle input { accent-color: var(--orange); }
.admin-flag-toggle i { color: #f59e0b; }
.admin-chat-list { display: flex; flex-direction: column; gap: 6px; max-height: 600px; overflow-y: auto; }
.adm-chat-row {
  position: relative;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 10px 14px 10px 38px; /* extra left padding for the checkbox */
  transition: background var(--motion), border-color var(--motion);
}
/* Checkbox is positioned absolutely so the meta/text row layout below
   doesn't need to change. */
.adm-chat-row .adm-msg-check {
  position: absolute;
  top: 13px; left: 12px;
}
.adm-chat-row.is-selected {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.55);
}
.adm-chat-row.is-flagged {
  /* FLUORESCENT WARNING — fosforlu uyarı per user request */
  background: linear-gradient(90deg, rgba(245,158,11,0.18), rgba(16,185,129,0.10));
  border-color: rgba(245,158,11,0.7);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18), 0 0 16px -2px rgba(0,0,0,0.18);
}
.adm-chat-row.user-banned { opacity: 0.65; border-left: 3px solid #ef4444; }
.adm-chat-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
  font-size: 11px;
}
.adm-chat-channel {
  padding: 2px 6px;
  background: var(--g-200);
  border-radius: 4px;
  font-weight: 800; text-transform: uppercase;
  color: var(--g-700);
}
.adm-chat-user { font-weight: 700; color: var(--g-900); }
.adm-chat-user.system { color: var(--orange); font-style: italic; }
.adm-chat-date { color: var(--g-500); margin-left: auto; }
.adm-chat-text {
  font-size: 14px;
  color: var(--g-900);
  word-break: break-word;
}
.adm-chat-flags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.adm-chat-del {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  color: var(--g-500);
  cursor: pointer;
  border-radius: 6px;
  display: grid; place-items: center;
}
.adm-chat-del:hover { background: #ef4444; color: #fff; }

/* ============================================================
   CHAT — big-win system message styling
   ============================================================ */
.chat-bigwin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(16,185,129,0.15), rgba(16,185,129,0.06));
  border: 1px solid rgba(16,185,129,0.35);
  border-radius: 10px;
  font-size: 12px; font-weight: 700;
  color: var(--g-900);
  margin: 4px 0;
  /* No animation — the bigwin-pulse keyframe was removed per user request;
     the row stays static in chat. */
}
.chat-bigwin i.fa-trophy { color: #FFD64A; font-size: 14px; }
.chat-bigwin b { color: var(--orange); font-weight: 800; }
[data-theme="dark"] .chat-bigwin {
  background: rgba(255,255,255,0.04);
  border-color: rgba(16,185,129,0.30);
}

/* ============================================================
   WIN SHARE — buttons that appear after a big win in FlipModal
   ============================================================ */
.win-share-row {
  display: flex; gap: 10px;
  margin-top: 14px;
  justify-content: center;
}
.win-share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  color: var(--g-900);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.win-share-btn:hover { background: var(--g-200); }
.win-share-btn:active { transform: translateY(1px); }
.win-share-btn.primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.win-share-btn.primary:hover { background: var(--orange-h); }
.win-share-btn:disabled { opacity: 0.6; cursor: wait; }

/* ============================================================
   PWA install prompt — floating card bottom-left
   ============================================================ */
.pwa-prompt {
  position: fixed;
  bottom: calc(20px + var(--mobile-nav-h, 0px));
  left: 20px;
  z-index: 9500;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 14px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.25);
  max-width: 360px;
  animation: pwa-slide-up 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pwa-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pwa-close {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  border: 0; background: transparent;
  color: var(--g-500); cursor: pointer;
  display: grid; place-items: center;
  border-radius: 6px;
  font-size: 11px;
}
.pwa-close:hover { background: var(--g-200); color: var(--g-900); }
.pwa-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--g-150);
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.pwa-icon img { width: 32px; height: 32px; object-fit: contain; }
.pwa-body { min-width: 0; padding-right: 8px; }
.pwa-title { font-size: 13px; font-weight: 800; color: var(--g-900); line-height: 1.2; }
.pwa-sub   { font-size: 11px; color: var(--g-600); margin-top: 3px; line-height: 1.3; }
.pwa-install {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--orange);
  color: #fff;
  border: 0; border-radius: 10px;
  font-weight: 800; font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.pwa-install:hover { background: var(--orange-h); }
@media (max-width: 540px) {
  .pwa-prompt { left: 12px; right: 12px; bottom: calc(80px + var(--mobile-nav-h, 64px)); max-width: none; }
}

/* ============================================================
   FLIP ARENA — BLOX.HOT's own battle layout (not a BloxyBet copy).
   ============================================================
   - Diagonal split background: left-half subtly orange-tinted, right-half
     contrasting neutral. The coin sits exactly on the split line.
   - HUGE central coin with 3D rotation + suspense-pause animation.
   - Player chips flank the coin with name + stake + win-% on a single
     compact row (avatar bottom-left of the chip, side badge top-right).
   - Total Pot strip between arena and the items track.
   - Items track is one horizontal row with a "VS" divider in the middle,
     left items have green tint, right items have orange.
   - Provably-fair shield in the top-left, X close in the top-right.
*/
.flip-modal-overlay { z-index: 9000; }
.flip-arena {
  position: relative;
  width: min(560px, 96vw); max-width: 560px;
  background: var(--g-100);
  border-radius: 20px;
  padding: 60px 22px 22px;
  box-shadow: 0 28px 72px -8px rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 16px;
}
/* Diagonal split tint — left side warm, right side cool — sits behind everything */
.flip-arena::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(115deg,
      rgba(16,185,129,0.10) 0%,
      rgba(16,185,129,0.04) 38%,
      transparent 50%,
      rgba(46,125,255,0.04) 62%,
      rgba(46,125,255,0.08) 100%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .flip-arena::before {
  background:
    linear-gradient(115deg,
      rgba(16,185,129,0.16) 0%,
      rgba(16,185,129,0.06) 38%,
      transparent 50%,
      rgba(46,125,255,0.08) 62%,
      rgba(46,125,255,0.14) 100%);
}
.flip-arena > * { position: relative; z-index: 1; }

/* Ambient radial pulse behind the coin during spin */
.fa-ambient {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(16,185,129,0.18), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 0;
  pointer-events: none;
}
.flip-arena.phase-spinning .fa-ambient { opacity: 1; animation: fa-ambient-pulse 1.2s ease-in-out infinite; }
.flip-arena.phase-result   .fa-ambient { opacity: 0.6; }
@keyframes fa-ambient-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Top bar — provably-fair pill + close */
.fa-topbar {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 5;
}
.fa-gameid {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.25);
  color: #047857;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
[data-theme="dark"] .fa-gameid { color: #34D399; background: rgba(255,255,255,0.04); }
.fa-gameid:hover { background: rgba(16,185,129,0.18); }
.fa-gameid i { font-size: 12px; }
.fa-gameid-label { letter-spacing: 0.02em; }
.fa-gameid-hash { font-family: 'JetBrains Mono', ui-monospace, monospace; opacity: 0.7; font-size: 10px; }
.fa-close {
  width: 32px; height: 32px;
  border: 0; background: var(--g-150); color: var(--g-700);
  border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fa-close:hover { background: var(--g-200); color: var(--g-900); }

/* ARENA — 3-column grid: left side | coin | right side */
.fa-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.fa-side {
  position: relative;
  padding: 16px;
  border-radius: 14px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  min-width: 0;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.fa-side-glow {
  position: absolute; inset: -1px;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.fa-side.is-winner .fa-side-glow {
  opacity: 1;
  background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.30), transparent 70%);
  box-shadow: 0 0 0 2px var(--orange), 0 0 24px -2px rgba(0,0,0,0.18);
  border-radius: inherit;
}
.fa-side.is-winner { transform: translateY(-2px); }
.fa-side.is-loser  { opacity: 0.5; filter: grayscale(0.3); }

.fa-side-side-badge {
  position: absolute; top: -10px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--g-100);
  border: 2px solid var(--g-200);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
  color: var(--g-900);
  z-index: 2;
}
.fa-side-l .fa-side-side-badge { right: 12px; }
.fa-side-r .fa-side-side-badge { left: 12px; }
.fa-side.side-h .fa-side-side-badge { background: linear-gradient(135deg, rgba(16,185,129,0.22), var(--orange)); color: #fff; border-color: #10B981; }
.fa-side.side-t .fa-side-side-badge { background: linear-gradient(135deg, #94A3B8, #475569); color: #fff; border-color: #475569; }

.fa-player-chip {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.fa-av {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  color: #fff; font-weight: 800; font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--g-100);
}
.fa-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fa-av-init { position: relative; z-index: 1; }
.fa-player-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fa-name {
  font-size: 13px; font-weight: 700;
  color: var(--g-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fa-stake {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--g-800);
}
.fa-stake-val { color: var(--g-900); }
.fa-pct {
  margin-left: 4px;
  padding: 2px 6px;
  background: var(--g-200);
  color: var(--g-700);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.fa-side.is-winner .fa-pct { background: var(--orange); color: #fff; }

/* Crown sits on the avatar's top-left corner, matching the original
   .fc-winner-pill / .fd-crown style — small, subtle rotation, soft shadow.
   Was previously floating big above the chip and overlapping the side
   badge; user wanted the simple original treatment, just a tick smaller. */
.fa-av { position: relative; }
.fa-av-crown {
  position: absolute;
  top: -6px; left: -6px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFD068, #10B981 65%, #B7560B);
  color: #fff;
  display: grid; place-items: center;
  font-size: 10px;
  box-shadow: 0 3px 8px -1px rgba(0,0,0,0.18);
  transform: rotate(-12deg);
  z-index: 4;
  animation: fa-crown-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Right player's crown mirrors so it sits top-right with the opposite tilt */
.fa-side-r .fa-av-crown {
  left: auto; right: -6px;
  transform: rotate(12deg);
}
@keyframes fa-crown-pop {
  from { transform: rotate(-12deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(-12deg) scale(1);   opacity: 1; }
}
.fa-side-r .fa-av-crown { animation-name: fa-crown-pop-r; }
@keyframes fa-crown-pop-r {
  from { transform: rotate(12deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(12deg) scale(1);   opacity: 1; }
}

/* COIN STAGE — center of the arena */
.fa-coin-stage {
  width: 160px; height: 160px;
  display: grid; place-items: center;
  perspective: 900px;
  position: relative;
  flex-shrink: 0;
}
.fa-cd-num {
  font-size: 84px; font-weight: 900;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 12px 32px rgba(0,0,0,0.18);
  animation: fa-cd-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fa-cd-pop {
  from { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.fa-coin {
  position: relative;
  width: 150px; height: 150px;
  transform-style: preserve-3d;
  will-change: transform;
}
.fa-cf {
  position: absolute; inset: 0;
  border-radius: 999px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-position: center; background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 14px 40px -6px rgba(0,0,0,0.18), inset 0 -10px 18px rgba(0,0,0,0.20);
}
.fa-cf--h { background-image: url('../images/heads.webp'); }
.fa-cf--t { background-image: url('../images/tails.webp'); transform: rotateY(180deg); }

/* Coin flip animation — polished v2 (May 2026).
   Adds vertical toss + dramatic acceleration/deceleration curve so the
   coin doesn't just spin in place — it leaps up, peaks, drops back with
   one decisive landing. Three-phase easing:
     0-15%  : explosive launch (fast rotate + upward lift)
     15-75% : fast spin at apex
     75-100%: deceleration + landing (the dramatic "settling" moment)
   Each face uses a slight ±tilt-on-landing for a 3D physical feel. */
.fa-coin.is-spinning.heads { animation: fa-coin-spin-h 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.fa-coin.is-spinning.tails { animation: fa-coin-spin-t 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes fa-coin-spin-h {
  0%   { transform: translateY(0)      rotateY(0deg)    rotateX(0deg)  scale(0.82); }
  15%  { transform: translateY(-44px)  rotateY(900deg)  rotateX(-10deg) scale(1.10); }
  50%  { transform: translateY(-30px)  rotateY(2160deg) rotateX(-6deg)  scale(1.08); }
  78%  { transform: translateY(-4px)   rotateY(2880deg) rotateX(0deg)   scale(1.05); }
  90%  { transform: translateY(0)      rotateY(2880deg) rotateX(0deg)   scale(0.96); }
  100% { transform: translateY(0)      rotateY(2880deg) rotateX(0deg)   scale(1); }
}
@keyframes fa-coin-spin-t {
  0%   { transform: translateY(0)      rotateY(0deg)    rotateX(0deg)  scale(0.82); }
  15%  { transform: translateY(-44px)  rotateY(900deg)  rotateX(-10deg) scale(1.10); }
  50%  { transform: translateY(-30px)  rotateY(2160deg) rotateX(-6deg)  scale(1.08); }
  78%  { transform: translateY(-4px)   rotateY(2700deg) rotateX(0deg)   scale(1.05); }
  90%  { transform: translateY(0)      rotateY(2700deg) rotateX(0deg)   scale(0.96); }
  100% { transform: translateY(0)      rotateY(2700deg) rotateX(0deg)   scale(1); }
}
.fa-coin.is-landed.heads { animation: fa-coin-bounce-h 0.70s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.fa-coin.is-landed.tails { animation: fa-coin-bounce-t 0.70s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes fa-coin-bounce-h {
  0%   { transform: rotateY(2880deg) scale(1); }
  30%  { transform: rotateY(2880deg) scale(1.22) translateY(-8px); }
  55%  { transform: rotateY(2880deg) scale(0.92) translateY(2px); }
  78%  { transform: rotateY(2880deg) scale(1.04); }
  100% { transform: rotateY(2880deg) scale(1); }
}
@keyframes fa-coin-bounce-t {
  0%   { transform: rotateY(2700deg) scale(1); }
  30%  { transform: rotateY(2700deg) scale(1.22) translateY(-8px); }
  55%  { transform: rotateY(2700deg) scale(0.92) translateY(2px); }
  78%  { transform: rotateY(2700deg) scale(1.04); }
  100% { transform: rotateY(2700deg) scale(1); }
}
/* Subtle radial glow that pulses while the coin is spinning — adds drama
   without a heavy background. Placed under the coin via a sibling pseudo. */
.fa-coin.is-spinning { filter: drop-shadow(0 18px 30px rgba(0,0,0,0.18)); }
.fa-coin.is-landed   { filter: drop-shadow(0 12px 20px rgba(0,0,0,0.18)); }

/* POT — hero number between arena and items */
.fa-pot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(90deg,
    rgba(16,185,129,0) 0%,
    rgba(16,185,129,0.10) 50%,
    rgba(16,185,129,0) 100%);
  border-radius: 12px;
}
.fa-pot-label {
  font-size: 11px; font-weight: 700;
  color: var(--g-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fa-pot-value {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 22px; font-weight: 900;
  color: var(--g-900);
}
.fa-pot-value .gem-i { font-size: 18px; }

/* ITEMS STRIP — single horizontal track */
.fa-items-strip {
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.fa-items-strip::-webkit-scrollbar { height: 6px; }
.fa-items-track {
  display: flex; align-items: center;
  gap: 8px;
  min-width: 100%;
  width: max-content;
}
.fa-item-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  flex-shrink: 0;
}
.fa-item-pill.side-l { border-left: 3px solid #34D399; }
.fa-item-pill.side-r { border-left: 3px solid var(--orange); }
.fa-item-val {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  color: var(--g-900);
}
.fa-items-divider {
  flex-shrink: 0;
  padding: 6px 14px;
  background: var(--g-200);
  border-radius: 8px;
  font-size: 11px; font-weight: 900;
  color: var(--g-700);
  letter-spacing: 0.08em;
}

.fa-result {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px; font-weight: 800;
  margin-top: 2px;
}
.fa-result.won  { background: rgba(16,185,129,0.12); color: #047857; }
.fa-result.lost { background: rgba(239,68,68,0.10); color: #b91c1c; }
.fa-result b { color: inherit; font-weight: 900; }
.fa-result i { font-size: 20px; }
[data-theme="dark"] .fa-result.won  { background: rgba(255,255,255,0.04); color: #34D399; }
[data-theme="dark"] .fa-result.lost { background: rgba(255,255,255,0.04); color: #F87171; }

/* Mobile */
@media (max-width: 540px) {
  .flip-arena { padding: 56px 14px 16px; gap: 12px; }
  .fa-arena { grid-template-columns: 1fr; gap: 24px; }
  .fa-side  { padding: 14px; }
  .fa-side-l .fa-side-side-badge,
  .fa-side-r .fa-side-side-badge { left: 50%; transform: translateX(-50%); right: auto; }
  .fa-coin-stage { width: 130px; height: 130px; justify-self: center; }
  .fa-coin { width: 120px; height: 120px; }
  .fa-cd-num { font-size: 64px; }
  .fa-av { width: 46px; height: 46px; font-size: 14px; }
  .fa-pot-value { font-size: 18px; }
}

.flip-modal-v2 {
  width: min(540px, 96vw); max-width: 540px;
  background: var(--g-100);
  border-radius: 18px;
  padding: 18px 22px 22px;
  box-shadow: 0 24px 64px -8px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.04);
  position: relative; overflow: hidden;
}
.fmv2-head {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--g-200);
  margin-bottom: 22px;
}
.fmv2-close {
  position: absolute; top: 0; right: 0;
  width: 32px; height: 32px;
  border: 0; background: transparent; color: var(--g-700);
  border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fmv2-close:hover { background: var(--g-150); color: var(--g-900); }
.fmv2-body { display: flex; flex-direction: column; gap: 18px; }

.fmv2-players {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
  padding: 4px 0 8px;
}
.fmv2-player { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.fmv2-av {
  position: relative;
  width: 88px; height: 88px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  color: #fff; font-weight: 800; font-size: 22px;
  box-shadow: 0 0 0 3px var(--g-100), 0 0 0 5px var(--g-200);
  overflow: visible;
  transition: box-shadow 0.3s ease;
}
.fmv2-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fmv2-av-init { position: relative; z-index: 1; }
.fmv2-side-chip {
  position: absolute;
  bottom: -4px; left: -4px;
  width: 30px; height: 30px;
  border-radius: 999px;
  background-position: center; background-size: cover;
  box-shadow: 0 0 0 3px var(--g-100);
  z-index: 2;
}
.fmv2-side-chip.h { background-image: url('../images/heads.webp'); }
.fmv2-side-chip.t { background-image: url('../images/tails.webp'); }
.fmv2-player.is-winner .fmv2-av {
  box-shadow: 0 0 0 3px var(--g-100), 0 0 0 5px var(--orange), 0 0 24px -2px rgba(0,0,0,0.18);
}
.fmv2-player.is-loser .fmv2-av { opacity: 0.45; filter: grayscale(0.4); }
.fmv2-name {
  font-size: 14px; font-weight: 700; color: var(--g-900);
  max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fmv2-coin-stage {
  width: 140px; height: 140px;
  display: grid; place-items: center;
  perspective: 800px; position: relative;
}
.fmv2-cd-num {
  font-size: 64px; font-weight: 900;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  animation: fmv2-cd-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
@keyframes fmv2-cd-pop {
  from { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.fmv2-coin {
  position: relative;
  width: 130px; height: 130px;
  transform-style: preserve-3d;
  will-change: transform;
}
.fmv2-cf {
  position: absolute; inset: 0;
  border-radius: 999px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-position: center; background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 12px 36px -6px rgba(0,0,0,0.18), inset 0 -8px 16px rgba(0,0,0,0.18);
}
.fmv2-cf--h { background-image: url('../images/heads.webp'); }
.fmv2-cf--t { background-image: url('../images/tails.webp'); transform: rotateY(180deg); }

/* Polished coin spin — adds a vertical toss + dynamic tilt for a physical
   "thrown in the air" feel (was just a flat in-place rotate before). */
.fmv2-coin.is-spinning.heads { animation: fmv2-coin-spin-h 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.fmv2-coin.is-spinning.tails { animation: fmv2-coin-spin-t 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes fmv2-coin-spin-h {
  0%   { transform: translateY(0)     rotateY(0deg)    rotateX(0deg)   scale(0.88); }
  15%  { transform: translateY(-50px) rotateY(900deg)  rotateX(-12deg) scale(1.12); }
  50%  { transform: translateY(-32px) rotateY(2160deg) rotateX(-6deg)  scale(1.10); }
  78%  { transform: translateY(-6px)  rotateY(2880deg) rotateX(0deg)   scale(1.05); }
  90%  { transform: translateY(0)     rotateY(2880deg) rotateX(0deg)   scale(0.96); }
  100% { transform: translateY(0)     rotateY(2880deg) rotateX(0deg)   scale(1); }
}
@keyframes fmv2-coin-spin-t {
  0%   { transform: translateY(0)     rotateY(0deg)    rotateX(0deg)   scale(0.88); }
  15%  { transform: translateY(-50px) rotateY(900deg)  rotateX(-12deg) scale(1.12); }
  50%  { transform: translateY(-32px) rotateY(2160deg) rotateX(-6deg)  scale(1.10); }
  78%  { transform: translateY(-6px)  rotateY(2700deg) rotateX(0deg)   scale(1.05); }
  90%  { transform: translateY(0)     rotateY(2700deg) rotateX(0deg)   scale(0.96); }
  100% { transform: translateY(0)     rotateY(2700deg) rotateX(0deg)   scale(1); }
}
.fmv2-coin.is-landed.heads { transform: rotateY(2880deg); animation: fmv2-coin-bounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.fmv2-coin.is-landed.tails { transform: rotateY(2700deg); animation: fmv2-coin-bounce-t 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes fmv2-coin-bounce {
  0%   { transform: rotateY(2880deg) scale(1) translateY(0); }
  30%  { transform: rotateY(2880deg) scale(1.20) translateY(-6px); }
  55%  { transform: rotateY(2880deg) scale(0.92) translateY(3px); }
  78%  { transform: rotateY(2880deg) scale(1.05); }
  100% { transform: rotateY(2880deg) scale(1); }
}
@keyframes fmv2-coin-bounce-t {
  0%   { transform: rotateY(2700deg) scale(1) translateY(0); }
  30%  { transform: rotateY(2700deg) scale(1.20) translateY(-6px); }
  55%  { transform: rotateY(2700deg) scale(0.92) translateY(3px); }
  78%  { transform: rotateY(2700deg) scale(1.05); }
  100% { transform: rotateY(2700deg) scale(1); }
}
.fmv2-coin-stage.spinning::before {
  content: ''; position: absolute; inset: -20px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(16,185,129,0.30), transparent 65%);
  animation: fmv2-coin-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fmv2-coin-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.1); opacity: 1; }
}

.fmv2-gameid {
  align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--g-500);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fmv2-gameid:hover { background: var(--g-200); color: var(--g-900); }
.fmv2-gameid i { font-size: 10px; }

.fmv2-odds-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fmv2-odds-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 12px;
  transition: border-color 0.3s, background 0.3s;
}
.fmv2-odds-pct { font-size: 16px; font-weight: 700; color: var(--g-600); }
.fmv2-odds-val { font-size: 16px; font-weight: 800; color: var(--g-900); display: inline-flex; align-items: center; gap: 6px; }
.fmv2-odds-card.is-winner {
  border-color: var(--orange);
  background: rgba(16,185,129,0.08);
}
.fmv2-odds-card.is-winner .fmv2-odds-pct { color: var(--orange); }

.fmv2-items-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fmv2-items-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fmv2-item-cell {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  min-width: 0;
}
.fmv2-item-name { font-size: 12px; font-weight: 600; color: var(--g-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmv2-item-val { font-size: 12px; font-weight: 700; color: var(--g-900); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.fmv2-item-more { text-align: center; font-size: 11px; font-weight: 700; color: var(--g-500); padding: 6px; }

.fmv2-result {
  text-align: center;
  font-size: 15px; font-weight: 700;
  padding: 12px;
  border-radius: 10px;
  margin-top: 4px;
}
.fmv2-result.won  { background: rgba(16,185,129,0.10); color: #047857; }
.fmv2-result.lost { background: rgba(239,68,68,0.08); color: #b91c1c; }
.fmv2-result b { color: inherit; font-weight: 900; }
[data-theme="dark"] .fmv2-result.won  { background: rgba(255,255,255,0.04); color: #34D399; }
[data-theme="dark"] .fmv2-result.lost { background: rgba(255,255,255,0.04); color: #F87171; }

/* Fairness modal */
.fairness-modal-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.6);
  display: grid; place-items: center;
  padding: 20px;
  animation: login-fade-in 0.18s ease-out;
}
.fairness-modal {
  width: min(420px, 96vw);
  background: var(--g-100);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  border: 1px solid var(--g-200);
  animation: login-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fairness-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fairness-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--g-900); }
.fairness-body { display: flex; flex-direction: column; gap: 12px; }
.fairness-row { display: flex; flex-direction: column; gap: 4px; }
.fairness-label { font-size: 11px; font-weight: 700; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.04em; }
.fairness-value-wrap { display: flex; align-items: center; gap: 8px; }
.fairness-value {
  flex: 1; min-width: 0;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--g-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fairness-copy {
  width: 32px; height: 32px;
  border: 0; background: var(--g-150); border-radius: 8px;
  color: var(--g-600); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fairness-copy:hover { background: var(--g-200); color: var(--g-900); }
.fairness-verify {
  margin-top: 4px;
  width: 100%; height: 40px;
  border: 0; border-radius: 10px;
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.fairness-verify.ok   { background: #10B981; }
.fairness-verify.fail { background: #ef4444; }
.fairness-verify:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 540px) {
  .flip-modal-v2 { padding: 14px 16px 18px; }
  .fmv2-av { width: 72px; height: 72px; font-size: 18px; }
  .fmv2-side-chip { width: 26px; height: 26px; }
  .fmv2-coin-stage { width: 120px; height: 120px; }
  .fmv2-coin { width: 110px; height: 110px; }
  .fmv2-cd-num { font-size: 52px; }
  .fmv2-name { max-width: 80px; font-size: 12px; }
  .fmv2-odds-card { padding: 10px 12px; }
  .fmv2-odds-pct, .fmv2-odds-val { font-size: 14px; }
}

/* ============================================================
   BRANDMARK — composite icon + BLOX.HOT wordmark
   ============================================================
   Used in header, footer, login, and modal heads. The icon is the small
   round logo (bloxhotlogothirtyone.svg); the text is "BLOX.HOT" with a
   single orange dot. onError on the <img> hides the icon if it's missing,
   so deploying without the file just shows the text alone. */
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}
.brandmark-icon {
  display: inline-block;
  /* Square box (logo SVG is 1024×1024). Explicit width — NOT aspect-ratio —
     so it doesn't collapse on older iOS Safari that lacks aspect-ratio. Each
     size variant below overrides BOTH width and height together. */
  width: 1.55em;
  height: 1.55em;
  flex-shrink: 0;
  /* Recolor the logo to the LIVE accent: the SVG shape is used as a mask and
     filled with an accent gradient, so the icon re-themes the instant the user
     changes the accent in Settings (var(--orange) is set at runtime). The
     first background is a safe fallback; the second adds depth via color-mix
     where supported. */
  background: linear-gradient(150deg, var(--orange-h) 0%, var(--orange) 100%);
  background: linear-gradient(150deg,
    var(--orange-h) 0%,
    var(--orange) 55%,
    color-mix(in srgb, var(--orange) 70%, #1a0a00) 100%);
  -webkit-mask: url('../images/bloxhotlogothirtyone.svg') center / contain no-repeat;
          mask: url('../images/bloxhotlogothirtyone.svg') center / contain no-repeat;
}
.brandmark-text {
  /* Exo 2 — a soft-technical display face: rounded-but-engineered letterforms
     that read as a modern gaming/crypto brand mark rather than plain text.
     Heavy 800 weight + tight tracking packs the glyphs into one solid lockup. */
  font-family: 'Exo 2', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--g-900);
  /* Subtle lift so the wordmark reads as a designed mark, not flat text. */
  filter: drop-shadow(0 1px 1.5px rgba(13, 16, 20, 0.14));
}
/* The dot is the brand "spark" — a small glowing accent between the two
   halves of the lockup. Tracks the user's accent (var(--orange) + its hover
   tint), with a soft halo from --orange-soft so it re-themes automatically. */
.brandmark-dot {
  background: linear-gradient(180deg, var(--orange-h) 0%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 14px var(--orange-soft);
}
/* "HOT" runs a gradient built ENTIRELY from the live accent variables, so when
   the user changes the accent in Settings the wordmark re-colors instantly.
   The first `background` is a safe fallback (only --orange/-h); the second
   deepens the tail via color-mix where supported for a richer, dimensional
   look. `color: var(--orange)` is the last-ditch fallback. */
.brandmark-hot {
  color: var(--orange);
  background: linear-gradient(95deg, var(--orange-h) 0%, var(--orange) 100%);
  background: linear-gradient(95deg,
    var(--orange-h) 0%,
    var(--orange) 46%,
    color-mix(in srgb, var(--orange) 66%, #1a0a00) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .brandmark-text { color: var(--g-900); }
/* Dark surfaces — deepen the BLOX half's shadow so it doesn't read as a flat
   white next to the glowing accent HOT gradient. */
[data-theme="dark"] .brandmark-text { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }

/* Size variants */
.brandmark--header { font-size: 32px; gap: 12px; }
.brandmark--header .brandmark-icon { width: 1.7em; height: 1.7em; }
.brandmark--footer { font-size: 18px; gap: 8px; }
.brandmark--modal  { font-size: 24px; gap: 10px; }
.brandmark--login  { font-size: 30px; gap: 12px; }
/* Modal brandmark icon is the visual anchor of the modal head — bump it a
   bit so the wordmark doesn't read smaller than the close button. */
.brandmark--modal .brandmark-icon { width: 1.8em; height: 1.8em; }

@media (max-width: 720px) {
  .brandmark--header { font-size: 22px; gap: 8px; }
  .brandmark--header .brandmark-icon { width: 1.55em; height: 1.55em; }
  .brandmark--modal  { font-size: 20px; }
  .brandmark--login  { font-size: 26px; }
}
.footer-socials { display: flex; gap: 8px; }
.f-soc { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--white); display: grid; place-items: center; color: var(--g-700); transition: background var(--motion); }
@media (hover:hover) and (pointer:fine) { .f-soc:hover { background: var(--g-200); color: var(--g-900); } }
.footer-legal { border-top: 1px solid var(--g-200); padding: 16px 0; display: flex; justify-content: space-between; font-size: 12px; color: var(--g-500); flex-wrap: wrap; gap: 10px; }
.footer-legal .responsible { display: inline-flex; align-items: center; gap: 8px; }
.age-badge { background: var(--g-900); color: white; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 3px; }

/* ============================================
   MODALS — with entry/exit animations
   ============================================ */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: grid; place-items: center;
  /* z-index 200 — sits ABOVE .header (z-index: 150). Previously the
     modal was 100 so the topbar always rendered on top, clipping the
     close button and obscuring the modal head on mobile. With the modal
     on top, the user can still close from anywhere and the topbar is
     visually behind the dark backdrop. */
  z-index: 200;
  padding: 16px 24px 24px;
  /* Tiny opacity-only fade — 100ms, no transform. Feels "clean", not laggy.
     Bigger spring/scale animations were causing jank on the inventory
     modal because the giant item grid had to repaint mid-transform. */
  animation: modal-fade 0.10s linear;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay.is-closing { animation: modal-fade 0.10s linear reverse forwards; }
@media (max-width: 720px) {
  .modal-overlay { padding: 8px 12px 12px; }
}
.modal { overscroll-behavior: contain; touch-action: pan-y; }
/* Close animation removed too — open had none, so close shouldn't either
   (otherwise the modal feels asymmetric). Both directions are instant. */
.modal {
  background: var(--white); border-radius: var(--r-xl);
  width: 520px; max-width: 100%;
  box-shadow: var(--shadow-modal);
  overflow: hidden; max-height: 92vh; overflow-y: auto;
  /* Open animation removed per user request — instant appear. */
}
/* modal-out animation also removed for symmetry with the disabled open. */

/* MOBILE MODALS — FULL-SCREEN GUI (was bottom-sheet, changed per user request)
   Profile, Wallet, Create Flip, Inventory, Mobile Account etc fill the entire
   viewport instead of sliding up as a draggable sheet. No drag handle, no
   swipe-to-dismiss, no margin around the modal — just a clean full-page UI. */
@media (max-width: 720px) {
  .modal-sheet { padding: 0; align-items: stretch; }
  .modal-sheet .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    /* Disable any swipe-drag offset — the CSS var is ignored. */
    transform: none !important;
    will-change: auto;
    /* Bottom padding leaves room for mobile navbar reach */
    padding: 0 0 calc(var(--mobile-nav-h, 64px) + env(safe-area-inset-bottom, 0px)) 0;
    overflow-y: auto;
    /* Subtle fade-in instead of slide-up */
    animation: modal-fullscreen-in 0.22s ease-out;
  }
  /* Legacy non-sheet modals — also full-screen on phones now for consistency */
  .modal-overlay:not(.modal-sheet) .modal {
    margin-bottom: calc(var(--mobile-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--mobile-nav-h, 64px) - env(safe-area-inset-bottom, 0px) - 24px);
    overflow-y: auto;
  }
  .modal-sheet.is-closing .modal { animation: modal-fullscreen-out 0.18s ease-in forwards; }
  /* Drag handle pill REMOVED — no swipe affordance on full-screen modals */
  .modal-sheet .modal::before { display: none !important; }
  /* The full-screen overlay sits above the navbar so it covers everything */
  .modal-sheet { z-index: 1050; }
}
/* Pure opacity fade — no transform-based scale. Scale animations on
   fullscreen modals trigger a layer-repaint on every frame which feels
   stuttery on mobile (the "kasıyor" the user reported). Opacity is GPU-
   composited cleanly so the open/close is silky. */
@keyframes modal-fullscreen-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-fullscreen-out {
  to { opacity: 0; }
}
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
/* iOS Safari doesn't always evaluate CSS variables inside @keyframes — keep
   the close animation pure so it always slides cleanly down to bottom. */
@keyframes sheet-out {
  to { transform: translateY(100%); }
}
/* Plain opacity fades — no backdrop-filter, no transform-heavy scale. */
@keyframes modal-overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,   0); }
}
@keyframes modal-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, 6px, 0); }
}
.modal-head { padding: 18px 20px 10px; display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
/* CANONICAL close button used everywhere a modal/overlay closes.
   New modals should ALWAYS use <button className="modal-close"> for consistency.
   Aliases (.up-close, .login-modal-close) inherit from this style below. */
/* Close button — soft-cornered square (NOT a circle), matches the rest
   of the site's button family (search box, h-icon-btn, settings-btn).
   Subtle bg + hover darken + scale on press. */
.modal-close {
  width: 34px; height: 34px;
  border-radius: 9px; /* a touch more rounded than --r-md, softer square */
  display: grid; place-items: center;
  color: var(--g-600);
  background: var(--g-100);
  border: 1px solid var(--g-200);
  cursor: pointer;
  transition: background var(--motion), color var(--motion), transform 0.10s ease, border-color var(--motion), box-shadow var(--motion);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  /* subtle inner highlight for a more "tactile" chip look */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.modal-close > i { font-weight: 600; }   /* slightly lighter X stroke than fa-solid default */
.modal-close:hover {
  background: var(--g-200);
  color: var(--g-900);
  border-color: var(--g-300);
  transform: translateY(-0.5px);
}
.modal-close:active { transform: scale(0.93); }
.modal-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
[data-theme="dark"] .modal-close {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .modal-close:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.16);
}
@media (hover:hover) and (pointer:fine) { .modal-close:hover { background: var(--g-150); } }
.modal-body { padding: 0 20px 20px; }
.modal-label { font-size: 11px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 8px; }

.side-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal .side-card { border-radius: var(--r-lg); background: var(--g-100); padding: 16px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; border: 2px solid transparent; transition: background var(--motion), border-color var(--motion); }
.modal .side-card.selected { border-color: var(--orange); background: #FFF6E9; }
/* Side-card hover effect removed per user request — no bg change on hover */
.side-coin { width: 64px; height: 64px; border-radius: 999px; }
.side-coin.h { background: url('../images/heads.webp') center/contain no-repeat; }
.side-coin.t { background: url('../images/tails.webp') center/contain no-repeat; }
.modal .side-card .lbl { font-weight: 700; font-size: 14px; }
.modal .side-card .sub { font-size: 11px; color: var(--g-500); }

.amt-input { display: flex; align-items: center; background: var(--g-100); border-radius: var(--r-sm); padding: 10px 14px; gap: 10px; }
.amt-input .coin-mark { width: 22px; height: 22px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #FFE89A, #10B981 60%, #B7560B); flex-shrink: 0; }
.amt-input input { flex: 1; font-size: 22px; font-weight: 700; border: none; outline: none; background: transparent; color: var(--g-900); width: 100%; letter-spacing: -0.01em; }
.amt-input .max { font-size: 11px; font-weight: 700; color: var(--g-700); background: var(--g-200); border-radius: var(--r-sm); padding: 5px 11px; transition: background var(--motion); }
@media (hover:hover) and (pointer:fine) { .amt-input .max:hover { background: var(--g-300); } }
.quick-amts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.quick-amts button { background: var(--g-150); border-radius: var(--r-sm); padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--g-700); white-space: nowrap; transition: background var(--motion); }
@media (hover:hover) and (pointer:fine) { .quick-amts button:hover { background: var(--g-200); } }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; }
.summary-row .lbl { color: var(--g-600); }
.summary-row .val { font-weight: 600; }
.summary-row.big .val { font-size: 17px; }
.summary-div { height: 1px; background: var(--g-200); margin: 8px 0; }
.modal-cta {
  width: 100%; height: 48px;
  border-radius: var(--r-md);
  background: var(--orange);
  color: white;
  font-weight: 600; font-size: 15px;
  margin-top: 16px;
  transition: background var(--motion);
  /* Sticky to the BOTTOM of the scrolling modal-body so the user can hit
     "Create flip" without having to scroll all the way past the inventory
     grid. Background hint above so the items underneath don't look glued
     to the button. Higher z-index than the grid items below. */
  position: sticky;
  bottom: 8px;
  z-index: 5;
  box-shadow: 0 -16px 18px -10px var(--white);
}
[data-theme="dark"] .modal-cta {
  box-shadow: 0 -16px 18px -10px var(--g-50);
}
@media (hover:hover) and (pointer:fine) { .modal-cta:hover { background: var(--orange-h); } }
.modal-cta:disabled { background: var(--g-200); color: var(--g-500); cursor: not-allowed; }
.fairness { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 10px; font-size: 11px; color: var(--g-600); }
.fairness .ok { color: var(--emerald); font-weight: 600; }

/* Flip animation modal */
.flip-stage { padding: 4px 20px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.flip-players { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 0; }
.flip-player { display: flex; align-items: center; gap: 10px; min-width: 0; transition: transform 0.3s; }
.flip-player .av {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 13px;
  position: relative;
  transition: box-shadow 0.4s, transform 0.4s;
}
.flip-player.winner .av {
  /* Just a clean orange ring + scale up — no pulsing glow halo. The
     animated winner-pulse keyframe was removed because, once the brand
     glow was neutralised, it pulsed a grey halo which looked worse than
     no animation. The static ring is enough to mark the winner. */
  box-shadow: 0 0 0 3px var(--orange);
  transform: scale(1.08);
}
.flip-player.loser { opacity: 0.55; }
.flip-player.loser .av { filter: grayscale(0.6); }
.flip-player .nm { font-weight: 600; font-size: 14px; }
.flip-player .pk { font-size: 11px; color: var(--g-500); }
.flip-player.r { flex-direction: row-reverse; text-align: right; }
.flip-pot { text-align: center; padding: 6px 14px; background: var(--g-100); border-radius: var(--r-sm); }
.flip-pot .lbl { font-size: 10px; color: var(--g-500); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }
.flip-pot .val { font-size: 17px; font-weight: 700; }

.coin-arena { height: 200px; width: 100%; position: relative; perspective: 1200px; display: grid; place-items: center; }
.coin-arena::before { content: ""; position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 130px; height: 14px; background: radial-gradient(ellipse, rgba(0,0,0,0.18), transparent 70%); transition: width 0.3s, opacity 0.3s; }
.coin-arena.land { animation: arena-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.coin-arena.land::before { width: 160px; opacity: 1.1; }
@keyframes arena-shake {
  0%, 100% { transform: translate(0,0); }
  15% { transform: translate(-3px, 1px); }
  30% { transform: translate(2px, -1px); }
  45% { transform: translate(-2px, 2px); }
  60% { transform: translate(2px, 0); }
  75% { transform: translate(-1px, 1px); }
  90% { transform: translate(1px, 0); }
}
.coin { width: 140px; height: 140px; border-radius: 999px; position: relative; transform-style: preserve-3d; transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.coin.spin-h { transform: rotateY(2160deg) translateY(-14px); }
.coin.spin-t { transform: rotateY(2340deg) translateY(-14px); }
/* Bounce keyframes per-side so the coin doesn't snap to the wrong face. */
.coin.spin-h.bounce { animation: coin-land-h 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s both; }
.coin.spin-t.bounce { animation: coin-land-t 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s both; }
@keyframes coin-land-h {
  0%   { transform: rotateY(2160deg) translateY(-14px) scale(1); }
  40%  { transform: rotateY(2160deg) translateY(6px)   scale(1.06, 0.94); }
  70%  { transform: rotateY(2160deg) translateY(-4px)  scale(0.98, 1.02); }
  100% { transform: rotateY(2160deg) translateY(0)     scale(1); }
}
@keyframes coin-land-t {
  0%   { transform: rotateY(2340deg) translateY(-14px) scale(1); }
  40%  { transform: rotateY(2340deg) translateY(6px)   scale(1.06, 0.94); }
  70%  { transform: rotateY(2340deg) translateY(-4px)  scale(0.98, 1.02); }
  100% { transform: rotateY(2340deg) translateY(0)     scale(1); }
}
/* Coin faces — user's webp images. */
.coin .cf {
  position: absolute; inset: 0;
  border-radius: 999px;
  backface-visibility: hidden;
}
.coin .cf.h { background: url('../images/heads.webp') center/contain no-repeat; }
.coin .cf.t { background: url('../images/tails.webp') center/contain no-repeat; transform: rotateY(180deg); }
.flip-result { text-align: center; min-height: 60px; }
.flip-result .who { font-size: 17px; font-weight: 700; }
.flip-result .who.won { color: var(--emerald); }
.flip-result .pot { font-size: 13px; color: var(--g-600); margin-top: 4px; }
.flip-result .pot b { color: var(--emerald); font-weight: 700; }
.countdown-num { font-family: 'JetBrains Mono', monospace; font-size: 80px; font-weight: 700; color: var(--orange); line-height: 1; letter-spacing: -0.04em; animation: countdown-pop 0.6s ease-out; }
@keyframes countdown-pop {
  from { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.15); }
  to { opacity: 1; transform: scale(1); }
}

/* Provably Fair drawer */
.fair-details { width: 100%; margin-top: 14px; background: var(--g-100); border-radius: var(--r-md); border: 1px solid var(--g-200); }
.fair-details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--g-800);
}
.fair-details > summary::-webkit-details-marker { display: none; }
.fair-details > summary .fair-toggle { margin-left: auto; color: var(--g-500); transition: transform 0.2s; }
.fair-details[open] > summary .fair-toggle { transform: rotate(180deg); }
.fair-content { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.fair-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.fair-row .lbl { color: var(--g-600); flex-shrink: 0; }
.fair-row code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--white);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--g-200);
  font-size: 10.5px;
  color: var(--g-800);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  white-space: nowrap;
}
.verify-btn {
  margin-top: 8px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--g-900);
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  transition: background var(--motion);
}
.verify-btn:hover:not(:disabled) { background: var(--g-700); }
.verify-btn.ok { background: var(--emerald); }
.verify-btn.fail { background: var(--red); }
.verify-btn.checking { background: var(--g-500); cursor: wait; }
.confetti-piece { position: absolute; width: 7px; height: 11px; top: 50%; left: 50%; animation: confetti-fall 1.9s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; opacity: 0; border-radius: 2px; }
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(0,0) rotate(0) scale(0.6); }
  20% { opacity: 1; transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) rotate(calc(var(--rot) * 0.5)) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.7); }
}

/* ============================================
   MODAL VARIANTS — light, matching site palette
   ============================================ */
.modal--wide { width: 880px; }

/* ============================================
   CUSTOM DROPDOWN (replaces native <select>)
   ============================================ */
.cs { position: relative; }
.cs-btn {
  width: 100%; height: 42px;
  background: var(--g-150);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  padding: 0 12px 0 14px;
  font-size: 13px; font-weight: 600; color: var(--g-900);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: background var(--motion), border-color var(--motion);
  cursor: pointer;
}
.cs-btn:hover, .cs-btn.is-open { background: var(--g-200); border-color: var(--g-300); }
.cs-btn .cs-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-btn .cs-chev { color: var(--g-600); transition: transform 0.22s ease; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.cs-btn.is-open .cs-chev { transform: rotate(180deg); }
.cs-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px -6px rgba(0,0,0,0.12);
  padding: 4px;
  z-index: 50;
  max-height: 240px; overflow-y: auto;
  animation: dropdown-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top left;
}
.cs-item {
  width: 100%; text-align: left;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  color: var(--g-800);
  background: transparent;
  transition: background var(--motion);
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.cs-item:hover { background: var(--g-100); }
.cs-item.is-active { background: var(--g-100); color: var(--g-900); font-weight: 600; }

/* ============================================
   INVENTORY MODAL — light theme
   ============================================ */
.inv-body { padding: 0 22px 14px; display: flex; flex-direction: column; gap: 14px; }
.inv-label { font-size: 12px; font-weight: 700; color: var(--g-600); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.inv-controls { display: grid; grid-template-columns: 1fr 170px 200px; gap: 10px; }
@media (max-width: 720px) { .inv-controls { grid-template-columns: 1fr; } }
.inv-search { display: flex; align-items: center; gap: 8px; background: var(--g-150); border: 1px solid var(--g-200); border-radius: var(--r-md); padding: 0 12px; height: 42px; transition: border-color var(--motion); }
.inv-search:focus-within { border-color: var(--g-300); }
.inv-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--g-900); font-size: 13px; }
.inv-search input::placeholder { color: var(--g-500); }

.inv-summary { display: flex; align-items: center; gap: 22px; padding: 6px 0 2px; }
.inv-stat { display: flex; align-items: center; gap: 10px; }
.inv-stat .gem {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #FFD64A, #FE9920);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
}
.inv-stat .roblox-box {
  width: 20px; height: 20px;
  background: var(--g-900);
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
  position: relative;
}
.inv-stat .lbl { font-size: 10px; color: var(--g-500); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; }
.inv-stat .val { font-size: 17px; font-weight: 700; color: var(--g-900); line-height: 1.1; letter-spacing: -0.01em; }
.inv-add {
  height: 40px;
  padding: 0 14px;
  background: var(--orange);
  border-radius: var(--r-md);
  color: white;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px;
  transition: background var(--motion);
  margin-left: 6px;
}
.inv-add:hover { background: var(--orange-h); }
.inv-add-label { white-space: nowrap; }
@media (max-width: 480px) {
  .inv-add { padding: 0 10px; }
  .inv-add-label { display: none; }
}

.inv-empty { padding: 56px 20px; text-align: center; }
.inv-empty h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: var(--g-900); letter-spacing: -0.02em; }
.inv-empty p { margin: 0 0 22px; color: var(--g-500); font-size: 13px; }
.inv-deposit-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: white; border-radius: var(--r-md); padding: 0 22px; height: 44px; font-size: 14px; font-weight: 600; transition: background var(--motion); }
.inv-deposit-btn:hover { background: var(--orange-h); }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 2px;
  margin: 0 -2px;
  /* PERF: scope paint/layout to this container so a hover on one item
     doesn't trigger a layout/paint pass on the whole document. Big win
     when inventory has 100+ items. */
  contain: layout paint;
}
/* Each inv-item also paint-isolated — hover effects only repaint that cell.
   Inv-items don't show the hover tooltip (it's hidden via .inv-grid rule
   above) so paint containment is safe here. */
.inv-item { contain: layout paint; }
/* Lobby flip cards: ONLY layout containment, NOT paint — paint containment
   would clip the hover item-name tooltip that escapes upward. Layout-only
   still gives a perf win (sibling hovers don't cause full-tree reflow). */
.flip-grid { contain: layout; }
.flip-card { contain: layout; }
/* Tooltip already shown as label below image inside .inv-item, hide hover tooltip in inventory grid */
/* Portal-rendered tooltip — escapes all overflow clipping. JS positions
   it via fixed coordinates from the item's bounding box. */
.fc-item-tooltip.is-portal {
  position: fixed !important;
  bottom: auto !important;
  left: 0; top: 0;
  opacity: 1 !important;
  z-index: 10000 !important;
  pointer-events: none;
}
.inv-item {
  background: var(--g-100);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), transform var(--motion);
}
.inv-item:hover { background: var(--g-100); transform: none; }
.inv-item.selected { border-color: var(--orange); background: #FFF6E9; }
.inv-item.is-locked {
  cursor: not-allowed;
  position: relative;
  isolation: isolate; /* new stacking context — keeps badge above rarity glow */
}
/* Apply the faded look ONLY to the image + price/name text, NOT to the lock badge
   (otherwise the badge gets desaturated/transparent and blends into the bg). */
.inv-item.is-locked .fc-item,
.inv-item.is-locked > img,
.inv-item.is-locked .inv-item-name,
.inv-item.is-locked .inv-item-price {
  opacity: 0.55;
  filter: grayscale(0.5);
}
.inv-item.is-locked:hover { background: var(--g-100); transform: none; }
.inv-item-locked {
  position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* Must be ABOVE .fc-item:hover's z-index (50) — otherwise hovering the
     item lifts the inner card on top of the badge and the orange chip
     visually "escapes" behind the image. 100 keeps us comfortably below
     the hover tooltip (999) but above any item lift. */
  z-index: 100;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,0.18);
  /* Full opacity / no filter — overrides any parent dimming */
  opacity: 1 !important;
  filter: none !important;
  transition: opacity 0.15s ease;
}
/* Tooltip on locked items must outrank the IN FLIP badge so the item name
   stays readable above it on hover. */
.inv-item.is-locked .fc-item-tooltip { z-index: 1000; }
.inv-item-locked i { font-size: 8px; }

/* ============================================
   MOBILE ACCOUNT SHEET (bottom-sheet variant of ProfileMenu)
   ============================================ */
.mas-body { padding: 0 16px 20px; }
.mas-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--g-100);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.mas-av {
  width: 48px; height: 48px;
  border-radius: 999px; overflow: hidden;
  border: 2px solid var(--orange);
  background: var(--g-200);
  flex-shrink: 0;
}
.mas-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mas-av-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  font-size: 14px; font-weight: 800;
}
.mas-meta { min-width: 0; }
.mas-handle { font-size: 15px; font-weight: 800; color: var(--g-900); }
.mas-sub { font-size: 11px; color: var(--g-600); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.mas-sub i { color: var(--orange); }
.mas-balance {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: linear-gradient(90deg, var(--orange), #FFB85C);
  color: #fff;
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.mas-balance-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.95; display: flex; align-items: center; gap: 6px; }
.mas-balance-val { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.mas-row-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 12px;
}
.mas-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  color: var(--g-800);
  cursor: pointer;
}
.mas-pill:hover { background: var(--g-200); }
.mas-pill i { color: var(--g-600); }
.mas-pill .cs { width: 100%; }
.mas-pill .cs-btn { width: 100%; height: auto; padding: 0; background: transparent; border: 0; }
.mas-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--g-100);
  border: 0; border-radius: var(--r-md);
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.mas-row:hover { background: var(--g-200); }
.mas-row.primary { background: var(--orange); color: #fff; }
.mas-row.primary .mas-row-icon { background: rgba(255,255,255,0.22); color: #fff; }
.mas-row.primary:hover { background: var(--orange-h); }
.mas-row.danger { color: #b91c1c; }
.mas-row.danger .mas-row-icon { background: rgba(239,68,68,0.12); color: #b91c1c; }
.mas-row-icon {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--g-200); color: var(--g-700);
  font-size: 13px;
  flex-shrink: 0;
}
.mas-row-label { flex: 1; font-size: 14px; font-weight: 700; }
.mas-row > i.fa-chevron-right { font-size: 11px; opacity: 0.5; }

/* Profile recent activity pagination */
.prof-pager {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 14px;
}
.pager-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  color: var(--g-700);
  cursor: pointer;
  transition: background 0.15s;
}
.pager-btn:hover:not(:disabled) { background: var(--g-200); color: var(--g-900); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-btn i { font-size: 10px; }
.pager-info { font-size: 12px; color: var(--g-600); font-weight: 600; }
.pager-info b { color: var(--g-900); }

/* ============================================
   VISUAL POLISH — banners, tilt, idle spin, logo, NProgress, sparkles
   ============================================ */
.maintenance-screen {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(254,153,32,0.10), transparent 70%),
    var(--g-50);
  z-index: 9999;
  padding: 20px;
  animation: maint-fade 0.3s ease-out both;
}
@keyframes maint-fade { from { opacity: 0; } to { opacity: 1; } }
.maintenance-card {
  text-align: center;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: 20px;
  padding: 40px 34px 30px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.06);
  animation: maint-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes maint-pop {
  from { transform: translateY(12px) scale(0.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.maint-logo {
  height: 56px; width: auto; max-width: 200px;
  object-fit: contain; display: block; margin: 0 auto 22px;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.maint-icon {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(254,153,32,0.16), rgba(254,153,32,0.06));
  color: var(--orange);
  font-size: 32px;
}
.maint-icon i { display: inline-block; animation: wrench-wiggle 2.4s ease-in-out infinite; transform-origin: 55% 55%; }
@keyframes wrench-wiggle {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
.maintenance-card h1 { font-size: 26px; font-weight: 800; margin: 0 0 10px; color: var(--g-900); letter-spacing: -0.4px; }
.maintenance-card p { color: var(--g-600); font-size: 14.5px; line-height: 1.55; margin: 0 auto; max-width: 340px; }
.maint-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  font-size: 12.5px; font-weight: 700; color: var(--g-700);
  letter-spacing: 0.02em;
}
.maint-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(254,153,32,0.5);
  animation: maint-dot-pulse 1.6s ease-out infinite;
}
@keyframes maint-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(254,153,32,0.45); }
  100% { box-shadow: 0 0 0 9px rgba(254,153,32,0); }
}
[data-theme="dark"] .maintenance-screen { background: radial-gradient(900px 480px at 50% -10%, rgba(254,153,32,0.10), transparent 70%), #0f1115; }
[data-theme="dark"] .maintenance-card { background: var(--g-100); border-color: var(--g-200); }
[data-theme="dark"] .maint-status { background: var(--g-150); border-color: var(--g-200); }

.site-broadcast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--orange), #FFB85C);
  color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.site-broadcast > span { flex: 1; }
.site-broadcast button {
  background: rgba(255,255,255,0.18);
  border: 0;
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
}
.site-broadcast button:hover { background: rgba(255,255,255,0.30); }
.site-xp-event {
  text-align: center; padding: 8px 16px;
  background: linear-gradient(90deg, #ffd64a, var(--orange));
  color: #1a1a1a;
  font-size: 13px;
}
.site-xp-event b { font-weight: 800; }
.site-xp-event i { margin-right: 6px; }

/* 3D tilt removed per user request */

/* Coin idle spin — small coin in the header */
.header-coin {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--orange-h), var(--orange) 65%);
  margin-left: 6px;
  animation: coin-idle-spin 6s linear infinite;
  box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}
@keyframes coin-idle-spin {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, var(--g-700), var(--g-800) 65%); }
}

/* Animated logo — "o" becomes a tiny spinning coin */
.logo-coin-o {
  display: inline-block;
  width: 0.8em; height: 0.8em;
  vertical-align: -0.05em;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--orange-h), var(--orange) 70%);
  animation: coin-idle-spin 5s ease-in-out infinite;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  margin: 0 0.02em;
}

/* NProgress-style top bar */
.np-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
}
.np-bar::before {
  content: ""; display: block; height: 100%;
  background: linear-gradient(90deg, var(--orange), #FFD64A, var(--orange));
  background-size: 200% 100%;
  animation: np-slide 1.4s linear infinite;
  box-shadow: 0 0 8px var(--orange);
}
@keyframes np-slide {
  0%   { background-position: 100% 0; transform: translateX(-100%); }
  50%  { transform: translateX(0%); }
  100% { background-position: -100% 0; transform: translateX(100%); }
}

/* Item drop sparkle — used when items appear in inventory or modal */
.spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--orange);
  pointer-events: none;
  opacity: 0;
  animation: spark-go 0.9s ease-out forwards;
}
@keyframes spark-go {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx, 30px), var(--sy, -30px)) scale(0.2); }
}

/* ============================================
   FLIP GRID — two view modes (Card / List)
   ============================================ */

/* CARD view — REWRITTEN for guaranteed alignment.
   The card uses ONE flex column with two rows:
     Row A: avatar-row  → creator | VS | opponent  (each fixed 56px tall)
     Row B: items-row   → creator items | (gap) | opponent items  (each 50px tall)
     Row C: foot        → value | actions
   Every side has identical fixed-height slots, so they MUST line up. */
.flip-grid.is-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.flip-grid.is-card .flip-card {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  grid-template-rows: 56px 50px auto;
  grid-template-areas:
    "creator-av  vs       opponent-av"
    "creator-it  vs       opponent-it"
    "value       .        actions";
  column-gap: 12px;
  row-gap: 10px;
  padding: 16px;
  align-items: center;
  justify-items: center;
}
/* JSX has .fc-creator and .fc-opponent wrappers containing avatar + items.
   We hard-position each by spanning rows. */
.flip-grid.is-card .fc-creator {
  grid-column: 1; grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: 56px 50px;
  row-gap: 8px;
  justify-items: center; align-items: center;
  width: 100%;
}
.flip-grid.is-card .fc-opponent {
  grid-column: 3; grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: 56px 50px;
  row-gap: 8px;
  justify-items: center; align-items: center;
  width: 100%;
}
.flip-grid.is-card .fc-vs {
  grid-column: 2; grid-row: 1;
  align-self: center;
  font-size: 13px;
  color: var(--g-400);
}
.flip-grid.is-card .fc-items-wrap { display: none; }
.flip-grid.is-card .fc-value   { grid-column: 1; grid-row: 3; justify-self: start; text-align: left; }
.flip-grid.is-card .fc-actions {
  grid-column: 3; grid-row: 3;
  justify-self: end;
  display: flex; flex-direction: row; gap: 8px; flex-wrap: nowrap;
}
.flip-grid.is-card .fc-actions > * { min-width: 72px; justify-content: center; }
/* Each side's items row — fixed height ensures bottom-row alignment */
.flip-grid.is-card .fc-side-items {
  height: 50px;
  width: 100%;
  display: flex; gap: 6px;
  align-items: center; justify-content: center;
}
/* Default: hidden everywhere except card view (rule for card view is above). */
.fc-side-items { display: none; }
.fc-side-placeholder { display: inline-block; width: 0; height: 50px; opacity: 0; }
.fc-side-overflow {
  min-width: 28px; height: 42px;
  padding: 0 8px;
  background: var(--g-200);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
  color: var(--g-700);
}
/* YOURS positioning removed */

/* Team flips in card view — show two stacked rows of avatars */
.flip-grid.is-card .flip-card.is-team {
  grid-template-areas:
    "creator vs opponent"
    "items   items items"
    "value   value actions";
}
.flip-grid.is-card .flip-card.is-team .fc-team-a   { grid-area: creator; justify-self: start; }
.flip-grid.is-card .flip-card.is-team .fc-team-b   { grid-area: opponent; justify-self: end; }

/* Phones: collapse to single column grid, keep left-VS-right header row */
@media (max-width: 540px) {
  .flip-grid.is-card { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 380px) {
  .flip-grid.is-card .flip-card { padding: 12px; }
}

/* LIST view (default, no .is-card class) — single wide row on desktop:
     [creator] [VS] [opponent] [items pushed right] [value] [actions side-by-side]
   On mobile (≤720) wraps to a 3-row layout. */
/* List view — clean flexbox row, single source of truth. Order:
     [creator]  VS  [opponent]  ── items ──  [coin]  [value]  [actions]
   The coin slot ALWAYS exists (placeholder when no countdown/result),
   so items align in the exact same X position on every row regardless
   of flip state.
*/
.flip-grid:not(.is-card) .flip-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 18px 26px;
  min-height: 96px;
}
.flip-grid:not(.is-card) .fc-avatar { width: 60px; height: 60px; font-size: 16px; }
/* Quick-join chip tracks the avatar size in list view too (was stuck at
   48px → looked smaller than the 60px creator avatar facing it). */
.flip-grid:not(.is-card) .fc-empty-join { width: 60px; height: 60px; }
.flip-grid:not(.is-card) .fc-item   { width: 60px; height: 60px; }
.flip-grid:not(.is-card) .fc-value .total { font-size: 20px; }

/* JSX renders fc-vs BEFORE creator/opponent, so we force visual order via
   flex `order` to get:
     [creator]  VS  [opponent]  ── items ──  [coin]  [value]  [actions]
   Countdown/result coin sits between items and value (order 55) so the
   rolling/resolved coin never overlaps the items strip. */
.flip-grid:not(.is-card) .fc-creator,
.flip-grid:not(.is-card) .fc-team-a {
  order: 10;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.flip-grid:not(.is-card) .fc-vs {
  order: 20;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--g-500);
  text-transform: uppercase;
  padding: 0;
  height: auto;
}
.flip-grid:not(.is-card) .fc-opponent,
.flip-grid:not(.is-card) .fc-team-b {
  order: 30;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.flip-grid:not(.is-card) .fc-items-wrap {
  order: 50;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center; /* centered in the available middle space */
  gap: 8px;
  min-width: 0;
  padding: 0;
}
.flip-grid:not(.is-card) .fc-value {
  order: 60;
  flex: 0 0 auto;
  text-align: right;
  min-width: 100px;
  /* Breathing room between value and the action buttons — mm2cash-style
     spacing so the pot value isn't glued to the View button. */
  margin-right: 28px;
}
.flip-grid:not(.is-card) .fc-actions {
  order: 70;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 0;
}
.flip-grid:not(.is-card) .fc-actions > * { min-width: 72px; justify-content: center; }
.flip-grid:not(.is-card) .fc-side-items { display: none; }

/* Mobile: hide the view toggle and FORCE card layout regardless of user choice.
   Phones aren't great for the wide list layout — single-column card stack
   reads much better. Toggle stays for tablet/desktop. */
@media (max-width: 720px) {
  .hide-on-mobile { display: none !important; }
  /* Force card layout on every .flip-grid, even ones without .is-card */
  .flip-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .flip-grid .flip-card {
    display: grid !important;
    grid-template-columns: 1fr 56px 1fr !important;
    grid-template-rows: 56px 50px auto !important;
    grid-template-areas:
      "creator vs opponent"
      "creator vs opponent"
      "value   .  actions" !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    padding: 16px !important;
    align-items: center !important;
    justify-items: center !important;
    min-height: auto !important;
  }
  .flip-grid .fc-creator   { grid-column: 1 !important; grid-row: 1 / span 2 !important; display: grid !important; grid-template-rows: 56px 50px !important; row-gap: 8px !important; justify-items: center !important; align-items: center !important; width: 100% !important; }
  .flip-grid .fc-opponent  { grid-column: 3 !important; grid-row: 1 / span 2 !important; display: grid !important; grid-template-rows: 56px 50px !important; row-gap: 8px !important; justify-items: center !important; align-items: center !important; width: 100% !important; }
  .flip-grid .fc-vs        { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; font-size: 13px !important; color: var(--g-400) !important; }
  .flip-grid .fc-items-wrap { display: none !important; }
  .flip-grid .fc-side-items { display: flex !important; height: 50px !important; width: 100% !important; gap: 6px !important; align-items: center !important; justify-content: center !important; }
  .flip-grid .fc-value      { grid-column: 1 !important; grid-row: 3 !important; justify-self: start !important; text-align: left !important; padding-left: 4px !important; }
  .flip-grid .fc-actions    { grid-column: 3 !important; grid-row: 3 !important; justify-self: end !important; display: flex !important; flex-direction: row !important; gap: 8px !important; flex-wrap: nowrap !important; padding-right: 4px !important; }
  .flip-grid .fc-actions > * { min-width: 72px !important; padding: 0 12px !important; height: 36px !important; font-size: 13px !important; white-space: nowrap !important; }
  .flip-grid .fc-avatar     { width: 48px !important; height: 48px !important; }
  /* Match the avatar exactly on mobile too (was 46 → 2px smaller). */
  .flip-grid .fc-empty-join { width: 48px !important; height: 48px !important; }
  /* Mobile forces a grid card layout — keep the countdown/result coin
     floating at top-center where the VS would otherwise sit. */
  .flip-grid .fc-countdown {
    position: absolute !important;
    top: 6px !important; left: 50% !important;
    transform: translateX(-50%) !important;
  }
  /* Mobile uses the card-style pop so the translateX(-50%) centering is
     preserved through the result-coin reveal animation. */
  .flip-grid .fc-countdown.is-result {
    animation: fc-result-pop-card 0.28s ease-out both !important;
  }
}

@media (max-width: 720px) {
  /* (kept for back-compat with rules below — they're now overridden by the
      forced-card block above, but desktop list view still uses them) */
  /* MOBILE LIST VIEW v3 — clean horizontal row.
     Layout: [av] [vs] [av] [items-strip max 3] [value] [actions]
     Items shown as small icon row (28px each, max 3, then "+N").
     Items are subtle (no big colored tiles), actions compact. */
  .flip-grid:not(.is-card) { gap: 8px; }
  .flip-grid:not(.is-card) .flip-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    min-height: 56px;
  }
  .flip-grid:not(.is-card) .fc-creator   { order: 1; flex-shrink: 0; }
  .flip-grid:not(.is-card) .fc-vs        { order: 2; flex-shrink: 0; padding: 0 2px; min-width: 20px; font-size: 10px; }
  .flip-grid:not(.is-card) .fc-opponent  { order: 3; flex-shrink: 0; }
  .flip-grid:not(.is-card) .fc-items-wrap{
    order: 4;
    flex: 1 1 auto;
    display: flex; gap: 4px; align-items: center;
    overflow: hidden;
    min-width: 0;
    padding-left: 6px;
    border: 0; margin: 0;
  }
  /* Compact item tiles — no bright colored box, just a clean rounded square */
  .flip-grid:not(.is-card) .fc-items-wrap .fc-item {
    width: 30px; height: 30px;
    flex-shrink: 0;
    box-shadow: none !important;
    border-radius: 6px !important;
  }
  .flip-grid:not(.is-card) .fc-items-wrap .fc-item .inner {
    width: 30px; height: 30px;
    background: var(--g-100) !important;
    border: 1px solid var(--g-200);
    border-radius: 6px;
  }
  .flip-grid:not(.is-card) .fc-items-wrap .fc-item .inner img { width: 24px; height: 24px; }
  /* Hide items beyond the first 3 via :nth-of-type fallback */
  .flip-grid:not(.is-card) .fc-items-wrap .fc-item:nth-of-type(n+4) { display: none; }
  .flip-grid:not(.is-card) .fc-value {
    order: 5; flex-shrink: 0;
    text-align: right;
    padding-left: 4px;
  }
  .flip-grid:not(.is-card) .fc-value .total { font-size: 14px; gap: 3px; font-weight: 800; }
  .flip-grid:not(.is-card) .fc-value .range { display: none; } /* hide range on mobile to save space */
  .flip-grid:not(.is-card) .fc-actions {
    order: 6;
    flex-shrink: 0;
    display: flex; gap: 6px; flex-wrap: nowrap;
  }
  .flip-grid:not(.is-card) .fc-actions > * {
    min-width: 0; width: auto;
    padding: 0 14px;
    height: 32px; font-size: 12px;
    white-space: nowrap;
  }
  .flip-grid:not(.is-card) .fc-overflow {
    width: 30px; height: 30px;
    padding: 0; font-size: 10px;
    background: var(--g-100); color: var(--g-700);
    border: 1px solid var(--g-200);
    border-radius: 6px;
  }
  .flip-grid:not(.is-card) .fc-avatar { width: 36px; height: 36px; font-size: 11px; }
  .flip-grid:not(.is-card) .fc-empty-join { width: 36px; height: 36px; font-size: 13px; }
  .flip-grid:not(.is-card) .fc-side-items { display: none; }
}

/* Very narrow phones — hide opponent placeholder if there's no opponent yet to save space */
@media (max-width: 480px) {
  .flip-grid:not(.is-card) .flip-card { padding: 10px; gap: 6px; }
  .flip-grid:not(.is-card) .fc-items-wrap .fc-item:nth-of-type(n+3) { display: none; }
  .flip-grid:not(.is-card) .fc-actions > * { padding: 0 12px; font-size: 11px; }
}

/* Card/list toggle button */
.view-toggle {
  display: inline-flex;
  background: var(--g-100);
  border-radius: var(--r-md);
  padding: 3px;
  margin-left: 6px;
}
.view-toggle button {
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--g-600);
  cursor: pointer;
  font-size: 12px;
}
.view-toggle button.is-active { background: var(--white); color: var(--g-900); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Empty state SVG centered */
/* Hand-rolled SVG illustration used in empty states (lobby, no flips,
   etc). Wider aspect ratio (200×120 viewBox) so two coins fit side-by-
   side with a motion arc between them. Color via `currentColor` lets the
   parent (.empty-state) tune the arc with its own text color. */
.empty-state-svg {
  width: 180px; height: 110px;
  margin: 0 auto 16px;
  display: block;
  color: var(--g-500);  /* drives the motion-arc stroke via currentColor */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.08));
}
@media (max-width: 540px) {
  .empty-state-svg { width: 140px; height: 90px; margin-bottom: 12px; }
}

/* Pinned chat announcement */
.chat-pinned {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  margin: 8px 10px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.30);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--g-800);
  line-height: 1.4;
}
.chat-pinned i.fa-thumbtack { color: var(--orange); margin-top: 2px; }
.chat-pinned span { flex: 1; word-break: break-word; }
/* Admin-only unpin × button on the pinned strip. Hover paints it red so
   the destructive action is clear. */
.chat-pinned-unpin {
  width: 22px; height: 22px;
  border: 0; background: transparent;
  border-radius: 6px;
  color: var(--g-500);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: -1px;
  transition: background var(--motion), color var(--motion);
}
.chat-pinned-unpin:hover { background: rgba(239,68,68,0.14); color: #DC2626; }
[data-theme="dark"] .chat-pinned-unpin { color: var(--g-600); }
[data-theme="dark"] .chat-pinned-unpin:hover { color: #F87171; }

/* Admin settings form */
.admin-settings-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.admin-set { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.admin-set.wide { grid-column: 1 / -1; }
.admin-set .as-name { font-weight: 700; color: var(--g-800); font-size: 12px; }
.admin-set .as-hint { font-size: 10px; color: var(--g-500); }
.admin-set input, .admin-set select {
  height: 36px; padding: 0 10px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--g-900);
}
.admin-set input:focus, .admin-set select:focus { outline: none; border-color: var(--orange); }

/* Analytics charts */
.admin-charts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.chart-card {
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  padding: 12px;
}
.chart-label { font-size: 11px; font-weight: 800; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.chart-empty { padding: 20px; text-align: center; color: var(--g-500); font-size: 12px; }
.chart-foot { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--g-500); }
.admin-retention { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }

/* =========================================================
   EMOJI PICKER — clean rebuild
   Layout (anchored / portal'd mode, the only mode in use):
     ┌───────────────────────────┐
     │ 🔍 Search…                │  ← ep-search (full width)
     │ STANDARD │ CUSTOM         │  ← ep-tabs (segmented, full width)
     │ ───────────────────────── │
     │ [ emoji grid, scrolls ]   │  ← ep-grid (flex:1)
     │                           │
     │ 🕐 😀 🐾 🍔 ⚽ 🚗 💡 ⚡ 🚩 │  ← ep-catnav (only on Standard, with
     │                           │      animated underline pill)
     └───────────────────────────┘
   Picker is anchored to the chat-emoji button via fixed inline style
   (see EmojiPicker JS). Inner panels are flex children. The grid is
   the flex-grow region; everything else is flex-shrink: 0.
   ========================================================= */

/* Tabs row — segmented buttons, both share width, active = filled pill */
.emoji-picker .ep-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 8px 6px;
  background: var(--g-100);
  border-radius: 8px;
}
.emoji-picker .ep-tab {
  flex: 1;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 140ms ease-out, color 140ms ease-out;
}
.emoji-picker .ep-tab:hover { color: var(--g-900); }
.emoji-picker .ep-tab.is-active {
  background: var(--white);
  color: var(--g-900);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Search input — full width, soft chip */
.emoji-picker .ep-search {
  position: relative;
  display: flex; align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--g-100);
  border-radius: 10px;
}
.emoji-picker .ep-search i {
  font-size: 12px;
  color: var(--g-500);
}
.emoji-picker .ep-search input {
  flex: 1;
  min-width: 0;       /* let it shrink inside flex */
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--g-900);
  padding: 0;
}
.emoji-picker .ep-search input::placeholder { color: var(--g-500); }

/* GRID — standard (glyph). Mirrors the reaction picker: fixed 8 columns
   with 40×40 buttons, gap 4, align-content: start so empty bottom doesn't
   redistribute rows. Visually identical to .mrp-grid. */
.emoji-picker .ep-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.emoji-picker .ep-grid > button {
  /* Use auto width so the grid track decides — combined with
     aspect-ratio:1 the button stays square at whatever cell width the
     parent allots. Buttons stay 40-42px in the standard 380px picker. */
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
  display: grid; place-items: center;
  overflow: hidden;       /* belt-and-suspenders against oversized children */
  cursor: pointer;
  transition: background 100ms ease-out, transform 80ms ease-out;
}
.emoji-picker .ep-grid > button:hover {
  background: var(--g-100);
  transform: scale(1.12);
}
/* CRITICAL: when Recent shows custom emoji <img> in the standard grid,
   without explicit sizing the natural 96×96 image overflows the 40×40
   button — the user reported "stacked memes in top-left". This sizes
   the img to fit cleanly inside whatever cell it lands in. */
.emoji-picker .ep-grid > button img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

/* CUSTOM emoji grid — bigger cells for image artwork. Still 6 cols so
   each custom image gets room to breathe (image emojis read better at
   ~44px than glyph emojis at 40px). */
.emoji-picker .ep-grid.ep-grid--custom {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.emoji-picker .ep-grid.ep-grid--custom > button {
  width: 100%; height: 50px;
  padding: 4px;
  aspect-ratio: auto;
}
.emoji-picker .ep-grid.ep-grid--custom > button img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Empty state */
.emoji-picker .ep-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: var(--g-500);
  font-size: 12px;
  line-height: 1.5;
}
.emoji-picker .ep-empty code {
  background: var(--g-100);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

[data-theme="dark"] .emoji-picker .ep-tabs   { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .emoji-picker .ep-tab.is-active { background: var(--g-150); }
[data-theme="dark"] .emoji-picker .ep-search { background: var(--g-150); }
[data-theme="dark"] .emoji-picker .ep-grid > button:hover { background: var(--g-200); }
.chat-msg .text .chat-emoji-img {
  width: 28px; height: 28px;          /* bumped again per user — clearly visible now */
  vertical-align: -8px;
  margin: 0 2px;
  display: inline-block;
}
/* Reaction chip — show the custom-emoji <img> at the same visual weight
   as the glyph it replaces (no extra margin so the chip stays compact). */
.msg-react-chip .chat-emoji-img {
  width: 16px; height: 16px;
  vertical-align: middle;
  margin: 0;
  display: inline-block;
}

/* ============================================
   RESPONSIVE — header, layout, modals across all device sizes
   ============================================ */

/* Header on phones: search is conditionally rendered in JSX (only when logged in),
   so we don't need a class-based show/hide here anymore. Just shrink sizing. */
@media (max-width: 720px) {
  .h-search { flex: 1; max-width: none; height: 36px; padding: 0 10px; font-size: 13px; }
  .h-search input { font-size: 13px; }
  .h-left { gap: 8px; }
  .h-right { gap: 6px; }
  .h-icon-btn { width: 36px; height: 36px; }
  .lang-btn { width: 36px; height: 36px; }
  .h-auth-btn { padding: 0 12px; height: 36px; font-size: 12px; }
  .h-wallet-cta { height: 42px; padding: 3px 3px 3px 10px; }
  .h-wallet-action { width: 32px; height: 32px; font-size: 12px; }
  .h-wallet-amt { font-size: 12.5px; }
  .h-wallet-lbl { font-size: 8.5px; margin-top: 2px; }
  .h-wallet-info { padding-right: 8px; }
  .h-profile { padding: 4px 6px 4px 10px; height: 36px; }
  .h-profile-info { display: none; }
  .h-profile-avatar { width: 28px; height: 28px; font-size: 11px; }
}
@media (max-width: 480px) {
  /* Wordmark stays visible — it's CSS text and scales fine */
  .h-icon-btn, .lang-btn, .h-profile-avatar { width: 32px; height: 32px; }
  .h-auth-btn { padding: 0 10px; font-size: 11px; }
  .h-auth-login { display: none; }
  .h-wallet-amt { font-size: 11px; }
}

/* App layout side padding tighter on phones so content doesn't get squeezed */
@media (max-width: 480px) {
  .app-layout { padding: 6px 8px 20px; }
  .section { padding: 14px 0; }
  .section-head h2 { font-size: 16px; }
}

/* Banner carousel shorter on phones */
@media (max-width: 720px) {
  .banner-carousel { height: 170px; }
  .bc-content h2 { font-size: 22px; }
}

/* Tickers stack two-per-row on phones */
@media (max-width: 720px) {
  .tickers-3 { grid-template-columns: 1fr 1fr !important; }
  .tickers-3 .ticker:last-child { grid-column: 1 / -1; }
}

/* Filter bar wraps cleanly on phone */
@media (max-width: 720px) {
  .filter-bar { gap: 6px; }
  .fp { height: 32px; padding: 0 10px; font-size: 12px; }
  .create-btn { height: 32px; padding: 0 12px; font-size: 12px; }
  /* View-toggle stays visible on mobile so users can switch card/list */
  .view-toggle { display: inline-flex; margin-left: 4px; }
  .view-toggle button { width: 28px; height: 28px; }
}

/* Modals wider on tablet, sheet on phone (already in modal-sheet code) */
@media (max-width: 720px) {
  .modal-overlay:not(.modal-sheet) { padding: 12px; }
  .modal:not(.is-team) .modal-head h3 { font-size: 16px; }
  .inv-body { padding: 0 14px 14px; }
}

/* User popover never wider than viewport on phone */
@media (max-width: 480px) {
  .user-popover.is-mobile { max-height: 70vh; }
  .up-name { font-size: 15px; }
  .up-stats { grid-template-columns: 1fr 1fr; }
}

/* Admin tables horizontal scroll on tight screens so they don't blow out the layout */
@media (max-width: 720px) {
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
  .admin-charts { grid-template-columns: 1fr; }
}

/* Profile header stacks vertically on phone */
@media (max-width: 540px) {
  .prof-header { flex-direction: column; text-align: center; gap: 12px; }
  .prof-xp { margin-left: auto; margin-right: auto; }
  .prof-stats { grid-template-columns: 1fr 1fr; }
}

/* Chat overlays full width on small phones; default 280px is OK on tablets */
@media (max-width: 380px) {
  :root { --chat-w: 100vw; }
  .chat-side { box-shadow: 0 0 32px rgba(0,0,0,0.32); }
}

/* FlipDetailModal result block (resolved/cancelled state) */
.fd-result {
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--g-100);
  border-left: 3px solid var(--g-300);
}
.fd-result.won  { background: rgba(16, 185, 129, 0.08); border-left-color: #10B981; }
.fd-result.lost { background: rgba(239, 68, 68, 0.06); border-left-color: #ef4444; }
.fd-result-side {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--g-900);
}
.fd-result-side i { color: var(--orange); }
.fd-result-side b { color: var(--orange); }
.fd-result-pot { font-size: 22px; font-weight: 800; color: var(--g-900); display: inline-flex; align-items: center; gap: 4px; }
.fd-result-you {
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--white); color: var(--g-700);
  margin-top: 2px;
}
.fd-result.won  .fd-result-you { background: #10B981; color: #fff; }
.fd-result.lost .fd-result-you { background: #ef4444; color: #fff; }
.inv-item-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-900);
  text-align: center;
  width: 100%;
  /* 2-line clamp instead of 1-line ellipsis — most item names fit fully on
     2 lines so the user reads the full word without needing to hover. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.25;
  min-height: 2.5em;
  word-break: break-word;
}
.inv-item-price {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--orange);
}
.inv-item-price .gem {
  width: 10px; height: 10px;
  background: linear-gradient(135deg, #FFD64A, #FE9920);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
}

.inv-footer { padding: 14px 22px 18px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--g-200); flex-wrap: wrap; }
.inv-select-all { background: var(--g-150); color: var(--g-800); height: 40px; padding: 0 18px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; transition: background var(--motion); }
/* Giveaway host button — orange ghost style next to Withdraw */
.inv-giveaway-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-md);
  background: rgba(16,185,129,0.10);
  color: var(--orange);
  border: 1.5px solid rgba(16,185,129,0.35);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion);
}
.inv-giveaway-btn:hover {
  background: rgba(16,185,129,0.18);
  border-color: var(--orange);
}
[data-theme="dark"] .inv-giveaway-btn {
  background: rgba(255,255,255,0.04);
  color: #FFAA3A;
  border-color: rgba(16,185,129,0.25);
}
[data-theme="dark"] .inv-giveaway-btn:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--orange);
}
@media (max-width: 720px) {
  .inv-giveaway-btn { flex: 1; min-width: 0; padding: 0 12px; justify-content: center; }
}
.inv-select-all:hover { background: var(--g-200); }
.inv-withdraw {
  background: var(--orange); color: white;
  height: 40px; padding: 0 20px;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--motion);
}
.inv-withdraw:hover:not(:disabled) { background: var(--orange-h); }
.inv-withdraw:disabled { background: var(--g-200); cursor: not-allowed; color: var(--g-500); }
.inv-withdraw .gem {
  width: 10px; height: 10px;
  background: linear-gradient(135deg, #FFE89A, #FE9920);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
}

/* Create flip summary panel */
.cf-summary {
  margin-top: 4px;
  background: var(--g-100);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.cf-sum-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.cf-sum-row .lbl { color: var(--g-600); }
.cf-sum-row .val { font-weight: 600; color: var(--g-900); }
.cf-sum-row.big .val { font-size: 17px; color: var(--orange); letter-spacing: -0.01em; }

/* ============================================
   BOT DEPOSIT MODAL — light
   ============================================ */
.bot-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bot-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  padding: 12px 14px;
  width: 100%; text-align: left;
  transition: background var(--motion), border-color var(--motion), transform var(--motion);
  color: var(--g-900);
}
.bot-item:not(:disabled):hover { background: var(--g-150); border-color: var(--orange); transform: translateX(2px); }
.bot-item--offline, .bot-item--busy { opacity: 0.55; cursor: not-allowed; }
.bot-avatar { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.bot-meta { flex: 1; min-width: 0; }
.bot-name { font-weight: 600; font-size: 14px; color: var(--g-900); }
.bot-sub { font-size: 11px; color: var(--g-500); display: flex; gap: 10px; margin-top: 2px; align-items: center; }
.bot-status { font-weight: 600; text-transform: capitalize; display: inline-flex; align-items: center; gap: 4px; }
.bot-status--online { color: var(--emerald); }
.bot-status--busy   { color: var(--orange); }
.bot-status--offline{ color: var(--g-500); }

/* ============================================
   MATCH MODAL — pick items to match a flip's value
   ============================================ */
.match-target {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  background: var(--g-100);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 4px 0 12px;
}
.mt-side { min-width: 0; }
.mt-label { font-size: 10px; font-weight: 700; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.05em; }
.mt-value, .mt-range, .mt-current {
  font-size: 16px; font-weight: 800; color: var(--g-900);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.mt-value .gem, .mt-current .gem {
  width: 13px; height: 13px;
  background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
}
.mt-range { font-size: 13px; color: var(--g-700); font-weight: 600; }
.mt-current.in-range { color: var(--orange); }
.mt-current.low  { color: var(--g-500); }
.mt-current.high { color: var(--red); }

/* Progress bar */
.mp-bar { padding: 6px 0 18px; margin-bottom: 4px; position: relative; }
.mp-track {
  height: 8px; background: var(--g-150);
  border-radius: 999px;
  position: relative;
  overflow: visible;
}
.mp-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--g-300), var(--g-400));
  transition: width 0.25s ease, background 0.25s ease;
  max-width: 100%;
}
.mp-fill.in-range { background: linear-gradient(90deg, var(--orange-soft), var(--orange)); }
.mp-fill.high { background: linear-gradient(90deg, #FFA0A0, var(--red)); }
.mp-marker { position: absolute; top: -2px; bottom: -2px; }
.mp-marker-line { display: block; width: 2px; height: 100%; background: var(--g-400); border-radius: 2px; }
.mp-marker-target { background: var(--orange); width: 3px; }
.mp-marker-lbl {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 4px;
  font-size: 9px; font-weight: 700; color: var(--g-500);
  text-transform: uppercase; letter-spacing: 0.05em;
}
[data-theme="dark"] .match-target { background: var(--g-100); }

/* ============================================
   EVENT CALLOUT — compact single-line label above banner
   ============================================ */
.event-callout {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 12px 8px 8px;
  background: linear-gradient(90deg, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0.04) 70%, transparent 100%);
  border: 1px solid rgba(16,185,129,0.30);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--g-800);
  text-align: left;
  transition: background var(--motion), transform var(--motion);
  cursor: pointer;
}
.event-callout:hover { background: linear-gradient(90deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.06) 70%, transparent 100%); transform: translateY(-1px); }
[data-theme="dark"] .event-callout {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 70%, transparent 100%);
  border-color: rgba(16,185,129,0.36);
  color: var(--g-800);
}
[data-theme="dark"] .event-callout:hover { background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 70%, transparent 100%); }

.ec-pill {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--orange); color: white;
  display: grid; place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.ec-text {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ec-text strong { color: var(--g-900); font-weight: 800; }
[data-theme="dark"] .ec-text strong { color: var(--g-900); }
.ec-text em { color: var(--orange); font-weight: 700; font-style: normal; }
.ec-time { color: var(--g-600); font-weight: 600; }
.ec-sep { color: var(--g-300); font-weight: 700; }
.ec-cta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--orange); color: white;
  font-size: 11.5px; font-weight: 700;
  flex-shrink: 0;
  transition: background var(--motion);
}
.event-callout:hover .ec-cta { background: var(--orange-h); }

@media (max-width: 767px) {
  .event-callout { padding: 7px 10px 7px 6px; gap: 8px; font-size: 11.5px; }
  .ec-pill { width: 22px; height: 22px; font-size: 10px; }
  .ec-cta { padding: 4px 8px; font-size: 10.5px; }
  /* Hide separators/extra text on small screens, just show title + countdown + cta */
  .ec-text .ec-sep:nth-of-type(n+2), .ec-text > span:nth-of-type(n+3) { display: none; }
}

/* ============================================
   "Don't ask again" — custom checkbox row
   ============================================ */
.dont-ask {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--g-700); font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--g-100);
  border: 1px solid var(--g-200);
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--motion), border-color var(--motion);
}
.dont-ask:hover { background: var(--g-150); border-color: var(--g-300); }
.dont-ask input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 2px solid var(--g-300);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color var(--motion), background var(--motion);
  margin: 0;
}
.dont-ask:hover input { border-color: var(--g-400); }
.dont-ask input:checked {
  background: var(--orange);
  border-color: var(--orange);
}
.dont-ask input:checked::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 11px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  border-radius: 1px;
}
[data-theme="dark"] .dont-ask { background: var(--g-100); border-color: var(--g-200); }
[data-theme="dark"] .dont-ask:hover { background: var(--g-150); }
[data-theme="dark"] .dont-ask input { background: var(--g-50); border-color: var(--g-300); }

/* ============================================
   FLIP DETAIL MODAL (View / Spectator)
   ============================================ */
.fd-players { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 12px; }
.fd-player {
  display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: transparent;
  transition: background var(--motion), box-shadow var(--motion), transform var(--motion);
  position: relative;
}
.fd-player.r { flex-direction: row-reverse; text-align: right; }
/* Winner — soft orange tint only, no outline box-shadow per user req */
.fd-player.is-winner {
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
}
.fd-player.is-winner .fc-avatar { box-shadow: 0 0 0 2px var(--orange), 0 6px 14px -4px rgba(0,0,0,0.18); }
.fd-player.is-winner .fd-name { color: var(--orange); }
/* Loser — slight desaturation so the winner pops */
.fd-player.is-loser { opacity: 0.55; }
.fd-player.is-loser .fc-avatar { filter: grayscale(0.4); }

/* Crown overlay on the winner's avatar — sits on top-left corner */
.fd-crown {
  position: absolute;
  top: -8px; left: -8px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFD068, #10B981 65%, #B7560B);
  color: #fff;
  display: grid; place-items: center;
  font-size: 10px;
  box-shadow: 0 3px 8px -1px rgba(0,0,0,0.18);
  transform: rotate(-12deg);
  z-index: 2;
}
.fd-player.r .fd-crown { left: auto; right: -8px; transform: rotate(12deg); }

/* WINNER badge — small inline chip next to the name */
.fd-winbadge {
  display: inline-block;
  margin: 0 6px;
  padding: 2px 7px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--orange);
  border-radius: 4px;
  vertical-align: middle;
}

.fd-name { font-weight: 700; color: var(--g-900); font-size: 15px; }
.fd-sub { font-size: 12px; color: var(--g-500); margin-top: 2px; }
.fd-vs { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800; color: var(--g-400); letter-spacing: 0.05em; flex-shrink: 0; padding: 0 6px; }

/* Slim "You won/lost" pill replaces the old fd-result block */
.fd-you-pill {
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: center;
  width: fit-content;
  margin-left: auto; margin-right: auto;
}
.fd-you-pill.won  { background: rgba(16, 185, 129, 0.12); color: #047857; }
.fd-you-pill.lost { background: rgba(239, 68, 68, 0.10);  color: #b91c1c; }
.fd-you-pill i { font-size: 14px; }
[data-theme="dark"] .fd-you-pill.won  { background: rgba(255,255,255,0.04); color: #6EE7B7; }
[data-theme="dark"] .fd-you-pill.lost { background: rgba(255,255,255,0.04); color: #FCA5A5; }

.fd-pot {
  background: linear-gradient(135deg, #FFF6E9, #FFE5BC);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 14px;
}
.fd-pot-lbl { font-size: 11px; color: #8C4500; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.fd-pot-val { font-size: 24px; font-weight: 800; color: var(--g-900); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; }
.fd-pot-val .gem { width: 16px; height: 16px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }

.fd-label { font-size: 12px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 10px; }
.fd-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  max-height: 38vh;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 12px;
  padding-right: 2px;
}
.modal-body, .inv-body { overflow-x: hidden; }
.fd-item {
  background: var(--g-100); border-radius: var(--r-md);
  padding: 10px 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fd-item-name { font-size: 11px; font-weight: 600; color: var(--g-900); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.fd-item-price { font-size: 11px; font-weight: 700; color: var(--orange); display: inline-flex; align-items: center; gap: 4px; }
.fd-item-price .gem { width: 9px; height: 9px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }

.fd-watching {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: rgba(255,61,154,0.08);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--magenta);
}
.fd-watching-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--magenta); animation: pulse 1.4s ease-in-out infinite; }

.fd-mine {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: rgba(16,185,129,0.08);
  border-radius: var(--r-md);
  padding: 14px;
  font-size: 13px; font-weight: 600;
  color: var(--orange);
}

/* ============================================
   AVATAR LEVEL RINGS (VIP / streak / level indicators)
   ============================================ */
.fc-avatar.lvl-bronze { box-shadow: 0 0 0 2px #B66830, 0 0 0 4px var(--g-100); }
.fc-avatar.lvl-silver { box-shadow: 0 0 0 2px #C8C8C8, 0 0 0 4px var(--g-100); }
.fc-avatar.lvl-gold   { box-shadow: 0 0 0 2px #FFD64A, 0 0 0 4px var(--g-100); }
.fc-avatar.lvl-diamond {
  box-shadow: 0 0 0 2px transparent, 0 0 0 4px var(--g-100);
  background-clip: padding-box;
}
.fc-avatar.lvl-diamond::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  background: conic-gradient(from 0deg, #B589FF, #FF7AC2, #FFD64A, #34D399, #B589FF);
  z-index: -1; animation: ring-spin 4s linear infinite;
}
.fc-avatar.lvl-vip {
  box-shadow: 0 0 0 2px #10B981, 0 0 0 4px var(--g-100);
}
.fc-avatar.lvl-vip::before {
  content: "VIP"; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 800; color: white;
  background: var(--orange); padding: 1px 6px; border-radius: 4px;
  letter-spacing: 0.05em;
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

/* Avatar streak badge — fire emoji corner */
.fc-avatar.streak::after {
  content: "🔥"; position: absolute; top: -6px; right: -6px;
  font-size: 14px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  animation: streak-bounce 0.8s ease-in-out infinite alternate;
}
@keyframes streak-bounce {
  from { transform: translateY(0) rotate(-8deg); }
  to   { transform: translateY(-2px) rotate(8deg); }
}

/* ============================================
   CONFIRM DIALOG (used for big flip joins/creates)
   ============================================ */
.confirm-modal { width: 420px; max-width: calc(100% - 24px); }
.confirm-body { padding: 0 22px 22px; text-align: center; }
.confirm-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange-soft), var(--orange));
  display: grid; place-items: center;
  color: white;
  font-size: 26px;
  box-shadow: 0 6px 20px -4px rgba(0,0,0,0.18);
}
.confirm-modal.is-fail .confirm-icon {
  background: linear-gradient(135deg, #FFA0A0, var(--red));
  box-shadow: 0 6px 20px -4px rgba(0,0,0,0.18);
}
.confirm-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--g-900); }
.confirm-message { margin: 0 0 18px; font-size: 13.5px; color: var(--g-600); line-height: 1.5; }
.confirm-actions { display: flex; gap: 8px; }
.confirm-btn { flex: 1; height: 44px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; transition: background var(--motion); }
.confirm-btn.cancel { background: var(--g-150); color: var(--g-800); }
.confirm-btn.cancel:hover { background: var(--g-200); }
.confirm-btn.confirm { background: var(--orange); color: white; }
.confirm-btn.confirm:hover { background: var(--orange-h); }

/* ============================================
   INTERACTIVE TUTORIAL (spotlight on real elements)
   ============================================ */
.tut-overlay-host {
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
}
.tut-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.62);
  transition: top 0.35s cubic-bezier(0.4,0,0.2,1), left 0.35s cubic-bezier(0.4,0,0.2,1), width 0.35s, height 0.35s;
  pointer-events: none;
  animation: tut-pulse 1.6s ease-in-out infinite;
}
@keyframes tut-pulse {
  0%, 100% { outline: 0 solid rgba(16,185,129,0); }
  50%      { outline: 6px solid rgba(16,185,129,0.35); }
}
.tut-card {
  position: fixed;
  background: var(--white);
  border-radius: var(--r-lg);
  width: 320px; max-width: calc(100% - 24px);
  padding: 18px 18px 14px;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.4);
  pointer-events: auto;
  z-index: 201;
  animation: tut-card-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tut-card-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tut-step { font-size: 10px; font-weight: 800; color: var(--orange); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.tut-emoji { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.tut-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--g-900); letter-spacing: -0.01em; }
.tut-body { margin: 0 0 14px; font-size: 13px; color: var(--g-700); line-height: 1.5; }
.tut-progress { display: flex; gap: 4px; margin: 0 0 14px; }
.tut-dot { flex: 1; height: 3px; border-radius: 3px; background: var(--g-200); transition: background var(--motion); }
.tut-dot.is-active { background: var(--orange); }
.tut-dot.is-done   { background: var(--orange-soft); }
.tut-actions { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.tut-back, .tut-skip-btn, .tut-next {
  height: 34px; padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700;
  transition: background var(--motion);
}
.tut-back, .tut-skip-btn { background: var(--g-100); color: var(--g-700); }
.tut-back:hover, .tut-skip-btn:hover { background: var(--g-150); }
.tut-back:disabled { opacity: 0; pointer-events: none; }
.tut-next { background: var(--orange); color: white; padding: 0 18px; }
.tut-next:hover { background: var(--orange-h); }

[data-theme="dark"] .tut-card { background: var(--g-100); }
[data-theme="dark"] .tut-back, [data-theme="dark"] .tut-skip-btn { background: var(--g-150); color: var(--g-700); }
[data-theme="dark"] .tut-back:hover, [data-theme="dark"] .tut-skip-btn:hover { background: var(--g-200); }

/* ============================================
   LUCKY 7 STREAK BURST
   ============================================ */
.lucky-burst {
  position: fixed; inset: 0;
  z-index: 150;
  pointer-events: none;
  display: grid; place-items: center;
  animation: lucky-flash 2.4s ease-out forwards;
}
.lucky-burst .ring { font-size: 240px; line-height: 1; filter: drop-shadow(0 0 40px rgba(0,0,0,0.18)); animation: lucky-scale 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.lucky-burst .text {
  position: absolute;
  font-size: 36px; font-weight: 900;
  color: white;
  text-shadow: 0 4px 24px rgba(0,0,0,0.18);
  letter-spacing: -0.02em;
  animation: lucky-text 2.4s ease-out forwards;
}
@keyframes lucky-flash {
  0%   { background: rgba(255,153,32,0.3); }
  20%  { background: rgba(255,153,32,0.15); }
  100% { background: transparent; opacity: 0; }
}
@keyframes lucky-scale {
  0%   { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  20%  { opacity: 1; transform: scale(1.2) rotate(8deg); }
  60%  { opacity: 1; transform: scale(1.05) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.95) translateY(-30px); }
}
@keyframes lucky-text {
  0%   { opacity: 0; transform: translateY(60px) scale(0.5); }
  25%  { opacity: 1; transform: translateY(0) scale(1.1); }
  70%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ============================================
   TOASTS — custom site-style design
   Distinctive shape: thick left accent rail with a glowing dot, layered
   shadow, subtle internal gradient. Not the default "alert card" template.
   ============================================ */
.toast-stack {
  position: fixed;
  bottom: 22px;
  right: 22px;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  z-index: 1200;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  max-width: 400px;
  padding: 14px 18px 14px 24px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-900);
  background:
    linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(255,255,255,0) 50%),
    var(--white);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 12px 32px -8px rgba(0,0,0,0.16),
    0 4px 14px -4px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.04);
  pointer-events: auto;
  overflow: hidden;
  animation: toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Thick accent rail on the left — the visual signature */
.toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--orange), #FF6B35);
  border-radius: 14px 0 0 14px;
  box-shadow: 0 0 12px -2px rgba(0,0,0,0.18);
}
/* Slim progress bar at the bottom — time-to-dismiss */
.toast::after {
  content: "";
  position: absolute; left: 6px; bottom: 0; right: 0; height: 2px;
  background: var(--orange);
  opacity: 0.4;
  transform-origin: left;
  animation: toast-progress 4s linear forwards;
}
.toast.win::before  { background: linear-gradient(180deg, #34D399, #10B981); box-shadow: 0 0 12px -2px rgba(0,0,0,0.18); }
.toast.win::after   { background: #10B981; }
.toast.lose::before { background: linear-gradient(180deg, #F87171, #ef4444); box-shadow: 0 0 12px -2px rgba(0,0,0,0.18); }
.toast.lose::after  { background: #ef4444; }
.toast.info::before { background: linear-gradient(180deg, #FFAA3A, var(--orange)); }
.toast.info::after  { background: var(--orange); }

.toast-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 16px;
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.06));
  color: var(--orange);
  position: relative;
}
/* Small pulse ring around the icon */
.toast-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  border: 1.5px solid currentColor;
  opacity: 0.18;
  animation: toast-pulse 1.6s ease-out infinite;
}
.toast.win .toast-icon  {
  background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(16,185,129,0.08));
  color: #10B981;
}
.toast.lose .toast-icon {
  background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(239,68,68,0.08));
  color: #ef4444;
}
.toast-body { flex: 1; min-width: 0; line-height: 1.35; }

@keyframes toast-pulse {
  0%   { transform: scale(1);   opacity: 0.22; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes toast-in {
  from { transform: translate3d(20px, 0, 0) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Mobile: full-width strip lifted above the navbar + safe-area */
@media (max-width: 720px) {
  .toast-stack {
    bottom: calc(var(--mobile-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 14px);
    right: 12px;
    left: 12px;
    align-items: stretch;
  }
  .toast {
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  @keyframes toast-in {
    from { transform: translate3d(0, 16px, 0); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}

[data-theme="dark"] .toast {
  color: var(--g-900);
  background:
    linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(255,255,255,0) 50%),
    #1e2026;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 32px -8px rgba(0,0,0,0.65),
    0 4px 14px -4px rgba(0,0,0,0.40),
    0 0 0 1px rgba(255,255,255,0.04);
}
[data-theme="dark"] .toast-icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
}
[data-theme="dark"] .toast.win .toast-icon  {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
}
[data-theme="dark"] .toast.lose .toast-icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
}

/* ============================================
   TWEAKS PANEL
   ============================================ */
.tweaks { position: fixed; bottom: 20px; right: 20px; width: 280px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-modal); padding: 16px; z-index: 90; display: none; }
.tweaks.show { display: block; }
.tweaks-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tweaks-head h4 { margin: 0; font-size: 14px; font-weight: 700; }
.tweaks-close { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--g-700); transition: background var(--motion); }
.tweaks-close:hover { background: var(--g-150); }
.tw-section { margin-bottom: 12px; }
.tw-label { font-size: 11px; font-weight: 600; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.tw-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.tw-swatches { display: flex; gap: 8px; }
.tw-swatch { width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer; position: relative; border: 2px solid transparent; transition: transform var(--motion); }
.tw-swatch.active { border-color: var(--g-900); }
.tw-toggle { width: 36px; height: 20px; background: var(--g-200); border-radius: 999px; position: relative; cursor: pointer; transition: background var(--motion); }
.tw-toggle.on { background: var(--orange); }
.tw-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 999px; transition: transform var(--motion); }
.tw-toggle.on::after { transform: translateX(16px); }
.tw-btn { width: 100%; height: 34px; border-radius: var(--r-sm); background: var(--g-100); font-size: 13px; font-weight: 600; color: var(--g-800); margin-bottom: 4px; transition: background var(--motion); }
.tw-btn:hover { background: var(--g-150); }

/* ============================================
   RESPONSIVE — mobile-first considered
   ============================================ */
@media (max-width: 1180px) {
  .app-layout { padding: 10px 20px 24px; }
  .modal--wide { width: 720px; }
  .header-row { padding: 0 22px; }
  .h-search { max-width: 460px; }
}
@media (max-width: 980px) {
  /* CRITICAL fix for the "header floats in the middle of the page" bug.
     Root cause: on mobile we lock html+body and make #root the scroll
     container (line 521). iOS Safari has a long-standing bug where
     `position: fixed` children of a scrolling overflow container behave
     erratically — the element drifts off-anchor and re-renders at the
     wrong y-position on each scroll frame.

     Switching the header to `position: sticky; top: 0` inside the
     scrolling #root fixes this — the header pins flush to the top of the
     scroll container reliably across iOS / Android / Chrome. It still
     takes its own height in flow (so we DON'T add padding-top on .page
     for the mobile branch below — that's reserved by the sticky element
     itself). */
  .header {
    position: sticky !important;
    top: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 0 10px;
  }
  /* Sticky takes its own height in flow, so .page no longer needs to
     reserve scroll space under it. Override the global desktop rule. */
  .page { padding-top: 0 !important; }
  /* Bump --header-h on PWA standalone so other components (chat-side,
     ptr-indicator, etc) that anchor to var(--header-h) still account for
     the safe-area portion of the header. */
  :root { --header-h: calc(64px + env(safe-area-inset-top, 0px)); }
  .header-row { padding: 0 14px; gap: 8px; }
  .h-search { max-width: none; }
  .logo-mark { width: 32px; height: 32px; }
  .logo { font-size: 17px; }
  /* Wordmark visible — CSS text scales fine on mobile */
  .h-icon-btn { width: 40px; height: 40px; }
  .lang-btn { width: 40px; height: 40px; }
  .app-layout { padding: 8px 16px 24px; }
  .hero-inner { padding: 20px 22px; }
  .hero h1 { font-size: 26px; }
  .hero-coin-stage { width: 140px; height: 120px; }
  .big-coin { width: 90px; height: 90px; }
  .big-coin .face { font-size: 28px; }
  .modal--wide { width: 600px; }
}
@media (max-width: 860px) {
  .tickers { grid-template-columns: repeat(2, 1fr); }
  .footer-cols, .footer-cols--slim { grid-template-columns: 1fr 1fr; }
  .modal { width: 100%; max-width: 520px; }
  .modal--wide { width: 100%; max-width: 100%; }
}
@media (max-width: 767px) {
  .header-row { gap: 6px; padding: 0 12px; }
  .logo { font-size: 16px; margin-right: 0; }
  .h-balance { padding: 0 6px 0 10px; height: 38px; }
  .h-icon-btn, .h-wallet, .lang-btn, .h-avatar { width: 38px; height: 38px; }
  .shell { padding: 0 14px; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 18px; }
  .hero-coin-stage { width: 100%; height: 110px; }
  .hero h1 { font-size: 22px; }
  .hero-sub { font-size: 12.5px; }
  .hero-cta, .hero-cta-ghost { height: 38px; padding: 0 14px; font-size: 12.5px; }
  .flip-card { gap: 10px; padding: 12px 12px 14px; flex-wrap: wrap; align-items: flex-start; }
  .fc-creator { width: 100%; }
  .fc-items-wrap { flex: 1 1 100%; order: 3; flex-wrap: wrap; }
  .fc-items { flex-wrap: wrap; }
  .fc-value { order: 4; text-align: left; min-width: 0; flex: 1; }
  .fc-actions { order: 5; flex-direction: row; }
  .fc-item { width: 44px; height: 44px; }
  .fc-overflow { height: 44px; min-width: 44px; font-size: 12px; }
  .featured { flex-direction: column; align-items: flex-start; }
  .lang-menu { right: -10px; max-height: 60vh; }
  .filter-bar { gap: 6px; }
  .fp { font-size: 12px; padding: 0 10px; height: 30px; }
  .create-btn { padding: 0 12px; font-size: 12px; height: 32px; }
  .section-head h2 { font-size: 18px; }
  /* Inventory grid tighter */
  .inv-controls { grid-template-columns: 1fr 1fr; }
  .inv-controls .inv-search { grid-column: 1 / -1; }
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); max-height: 50vh; }
  .inv-item { padding: 10px 6px 8px; }
  .inv-summary { gap: 14px; flex-wrap: wrap; }
  .inv-empty { padding: 40px 16px; }
  .inv-empty h2 { font-size: 22px; }
  .inv-footer { padding: 12px 16px 16px; flex-wrap: wrap; }
  .inv-withdraw, .inv-select-all { flex: 1; min-width: 0; padding: 0 12px; }
  .modal-body { padding: 0 16px 16px; }
  .modal-head { padding: 16px 16px 8px; }
  .inv-body { padding: 0 16px 12px; }
}
@media (max-width: 540px) {
  .header-row { gap: 5px; padding: 0 10px; }
  /* Wordmark visible — CSS text scales fine on mobile */
  .h-balance .amt { font-size: 12.5px; }
  .h-balance .amt::before { width: 11px; height: 11px; }
  /* Header order: logo, chat, search wraps full, lang, bell, balance, wallet, avatar */
  .h-search { height: 36px; }
  .app-layout { padding: 6px 10px 20px; }
  .section { padding: 16px 0; }
  .ticker { padding: 10px 12px; }
  .ticker .val { font-size: 16px; }
  .ticker .lbl { font-size: 9px; }
  .flip-card { padding: 10px 10px 12px; }
  .fc-avatar { width: 38px; height: 38px; }
  .fc-chip { width: 36px; height: 36px; }
  .fc-item { width: 40px; height: 40px; }
  .fc-overflow { height: 40px; min-width: 40px; }
  /* Inventory super compact */
  .inv-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .inv-item { padding: 8px 4px 6px; }
  .inv-item-name { font-size: 10px; }
  .inv-item-price { font-size: 11px; }
  .modal { border-radius: var(--r-md); }
  .modal--wide { max-height: 100vh; height: auto; }
}
@media (max-width: 380px) {
  .h-icon-btn, .h-wallet, .lang-btn, .h-avatar { width: 34px; height: 34px; }
  .h-balance { height: 34px; padding: 0 4px 0 8px; }
  .header-row { gap: 4px; padding: 0 8px; }
  .h-avatar { display: none; }
  .subnav { padding: 6px 0 10px; }
}

/* RTL adjustments for Arabic / Urdu */
[dir="rtl"] .chat-side { left: auto; right: 0; border-right: none; border-left: 1px solid var(--g-200); transform: translateX(100%); }
[dir="rtl"] .chat-side.is-open { transform: translateX(0); }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
@media (min-width: 981px) {
  [dir="rtl"] .page.with-chat { padding-left: 0; padding-right: var(--chat-w); }
}

/* ============================================
   AUTH (header buttons + login modal)
   ============================================ */
.h-auth { display: inline-flex; gap: 8px; align-items: center; }
.h-auth-btn {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.05s, color 0.15s;
  white-space: nowrap;
}
.h-auth-btn:active { transform: translateY(1px); }
.h-auth-login {
  background: var(--g-100);
  color: var(--g-700);
}
.h-auth-login:hover { background: var(--g-200); }
.h-auth-register {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.h-auth-register:hover { background: var(--orange-h); }
@media (max-width: 640px) {
  .h-auth-login { display: none; }
  .h-auth-btn { padding: 0 14px; height: 38px; font-size: 12px; }
}

.login-overlay { z-index: 10000; }
.login-overlay .login-card { position: relative; }

/* ============================================================
   LOGIN — Desktop popup modal / mobile full-screen sheet.
   Roblox-only auth (username → bio code → verify). No social, no register.
   Pattern: outer .login-screen is the overlay/backdrop, .login-screen-inner
   is the actual card that sizes differently per breakpoint.
   ============================================================ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: login-fade-in 0.18s ease-out;
}
.login-screen.is-closing { animation: login-fade-out 0.18s ease-out forwards; }
@keyframes login-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes login-fade-out { to   { opacity: 0; } }

.login-screen-inner {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--white);
  border-radius: 20px;
  padding: 44px 32px 28px;
  box-shadow:
    0 24px 64px -8px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.04);
  display: flex; flex-direction: column;
  gap: 4px;
  animation: login-pop-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Subtle radial accent at the top so the logo sits in a warm pool */
  background-image:
    radial-gradient(circle at 50% -10%, rgba(16,185,129,0.12), transparent 55%);
}
[data-theme="dark"] .login-screen-inner {
  background: var(--g-100);
  background-image:
    radial-gradient(circle at 50% -10%, rgba(16,185,129,0.18), transparent 55%);
}
@keyframes login-pop-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.login-screen-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0;
  background: var(--g-100);
  border-radius: 10px;
  color: var(--g-700);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.login-screen-close:hover { background: var(--g-200); color: var(--g-900); }
[data-theme="dark"] .login-screen-close { background: var(--g-200); }
[data-theme="dark"] .login-screen-close:hover { background: var(--g-300); }

/* Animated logo: rotating ring + breathing halo + diagonal sheen. */
.login-logo-wrap {
  position: relative;
  width: 96px; height: 96px;
  margin: 4px auto 18px;
  display: grid; place-items: center;
  isolation: isolate;
}
/* Outer rotating conic ring */
.login-logo-halo {
  position: absolute;
  inset: -6px;
  border-radius: 30px;
  padding: 3px;
  background: conic-gradient(
    from 0deg,
    rgba(16,185,129,0.95),
    rgba(16,185,129,0.10) 35%,
    rgba(255,200,96,0.85) 55%,
    rgba(16,185,129,0.05) 80%,
    rgba(16,185,129,0.95)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: login-ring-spin 7s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
/* Soft breathing radial glow behind the ring */
.login-logo-halo--2 {
  inset: -20px;
  padding: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, rgba(16,185,129,0.45), rgba(16,185,129,0) 60%),
    radial-gradient(circle at 50% 50%, rgba(255,200,96,0.18), transparent 70%);
  -webkit-mask: none;
          mask: none;
  filter: blur(2px);
  animation: login-halo-breathe 3.6s ease-in-out infinite;
  z-index: -1;
}
@keyframes login-ring-spin    { to { transform: rotate(360deg); } }
@keyframes login-halo-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1;    }
}
.login-logo-icon {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.18))
    drop-shadow(0 2px 4px rgba(0,0,0,0.18));
  animation: login-logo-float 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes login-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.login-screen-title {
  margin: 4px 0 6px;
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--g-900);
  line-height: 1.1;
}
.login-screen-sub {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px; color: var(--g-600);
  line-height: 1.5;
}

.login-screen-form { display: flex; flex-direction: column; gap: 12px; }
.login-screen-form .login-btn { margin-top: 6px; }
.login-screen .login-input { height: 48px; font-size: 15px; }
.login-screen .login-btn   { height: 48px; font-size: 14px; border-radius: 12px; }
.login-screen .login-note  { text-align: center; }

/* ============================================================
   MOBILE — full-screen sheet (≤720px).
   Overlay loses its backdrop tint, inner card stretches edge-to-edge,
   slides up from the bottom for a native-app feel.
   ============================================================ */
@media (max-width: 720px) {
  .login-screen {
    padding: 0;
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: stretch;
    justify-content: stretch;
  }
  [data-theme="dark"] .login-screen { background: var(--g-50); }
  .login-screen-inner {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    border-radius: 0;
    box-shadow: none;
    padding:
      calc(56px + env(safe-area-inset-top, 0px))
      20px
      calc(28px + env(safe-area-inset-bottom, 0px));
    background-image:
      radial-gradient(circle at 50% 0%, rgba(16,185,129,0.10), transparent 60%);
    animation: login-slide-up 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes login-slide-up {
    from { transform: translateY(24px); opacity: 0.4; }
    to   { transform: translateY(0);    opacity: 1;   }
  }
  .login-screen-close {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    width: 40px; height: 40px;
  }
  .login-logo-wrap { width: 86px; height: 86px; }
  .login-screen-title { font-size: 24px; }
}
/* Login close button — same shape as .modal-close for visual consistency */
.login-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px; height: 30px;
  border: 0;
  background: transparent;
  color: var(--g-700);
  cursor: pointer;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.login-modal-close:hover { background: var(--g-150); color: var(--g-900); }
[dir="rtl"] .login-modal-close { left: 12px; right: auto; }

.login-card {
  width: 100%; max-width: 420px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.login-brand {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 18px;
}
.login-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 18px;
}
.login-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  background: var(--g-100);
  color: var(--g-600);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.05s;
}
.login-tab:hover { background: var(--g-200); }
.login-tab:active { transform: translateY(1px); }
.login-tab.is-active {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.login-tab.is-active:hover { background: var(--orange-h); }
.login-tab-arrow { font-size: 11px; }
.login-mode-headline {
  font-size: 18px; font-weight: 800;
  color: var(--g-900);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.login-mode-sub {
  font-size: 13px; color: var(--g-500);
  margin-bottom: 18px;
}
.login-logo {
  font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--g-900);
}
.login-dot { color: var(--orange); }
.login-tagline {
  font-size: 12px; color: var(--g-500); font-weight: 500;
}
.login-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--g-700);
  margin-bottom: 8px;
}
.login-input {
  width: 100%; height: 44px;
  padding: 0 14px;
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  background: var(--g-100);
  font-size: 15px; color: var(--g-900);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.login-input:focus { border-color: var(--orange); background: var(--white); }
.login-error {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #c0392b;
  border-radius: var(--r-md);
  font-size: 13px;
}
.login-btn {
  width: 100%; height: 44px;
  border: 0; border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.login-btn:active { transform: translateY(1px); }
.login-btn.primary { background: var(--orange); color: #fff; }
.login-btn.primary:hover { background: var(--orange-h); }
.login-btn.primary:disabled { opacity: 0.6; cursor: not-allowed; }
.login-btn.ghost {
  background: transparent; color: var(--g-700);
  border: 1px solid var(--g-200);
}
.login-btn.ghost:hover { background: var(--g-100); }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .login-btn { margin-top: 4px; }
.login-note {
  font-size: 12px; color: var(--g-500);
  line-height: 1.45;
  margin-top: 12px;
}
.login-verify { display: flex; flex-direction: column; gap: 16px; }
.login-rblx-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--g-100);
  border-radius: var(--r-md);
}
.login-rblx-av {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  background: var(--g-200);
}
.login-rblx-name { font-weight: 700; color: var(--g-900); font-size: 14px; }
.login-rblx-sub  { font-size: 12px; color: var(--g-500); }
.login-steps {
  margin: 0; padding: 0 0 0 18px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 14px; color: var(--g-800); line-height: 1.5;
}
.login-steps li::marker { color: var(--orange); font-weight: 700; }
.login-code-row {
  margin-top: 8px;
  display: flex; gap: 8px; align-items: stretch;
}
.login-code {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  font-family: ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
  background: var(--g-100);
  border: 1px dashed var(--orange);
  border-radius: var(--r-md);
  color: var(--g-900);
  user-select: all;
}
.login-copy {
  padding: 0 14px;
  background: var(--orange); color: #fff;
  border: 0; border-radius: var(--r-md);
  font-weight: 600; font-size: 13px;
  cursor: pointer;
}
.login-copy:hover { background: var(--orange-h); }
.login-actions { display: flex; gap: 10px; }
.login-actions .login-btn { flex: 1; }

/* ============================================
   PROFILE PAGE
   ============================================ */
.page-state {
  padding: 60px 20px; text-align: center;
  color: var(--g-500); font-size: 14px;
  background: var(--g-100); border-radius: var(--r-md);
  margin: 20px 0;
}
.page-state.err { color: #c0392b; background: rgba(239,68,68,0.06); }

.profile-page { padding: 20px 0 40px; max-width: 980px; margin: 0 auto; }
/* Profile header IS the banner — gradient applied directly to .prof-header.
   Override with .prof-header.prof-banner-N classes. */
.prof-header {
  display: flex; align-items: center; gap: 20px;
  padding: 28px 28px 32px;
  background: var(--g-100);
  border-radius: var(--r-lg);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  color: white;
}
/* Make text inside the banner readable on gradient backgrounds */
.prof-header .prof-name { color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.prof-header .prof-handle { color: rgba(255,255,255,0.86); }
.prof-header .prof-since { color: rgba(255,255,255,0.72); }
.prof-header .prof-xp-head { color: rgba(255,255,255,0.85); }
.prof-header .prof-xp-num { color: rgba(255,255,255,0.7); }
.prof-header .prof-xp-bar { background: rgba(255,255,255,0.22); }
.prof-header .prof-xp-fill { background: linear-gradient(90deg, #FFD64A, #fff); }
/* Subtle dot-pattern overlay across all banners for some texture */
.prof-header::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0, transparent 1.5px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.04) 0, transparent 1.5px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0, transparent 1.2px);
  background-size: 90px 90px, 130px 130px, 70px 70px;
  pointer-events: none;
  opacity: 0.7;
}
.prof-header > * { position: relative; z-index: 1; }
.prof-av-wrap {
  width: 96px; height: 96px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--orange);
  background: var(--g-200);
}
.prof-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-avatar-fallback {
  display: grid; place-items: center;
  font-size: 28px; font-weight: 800; color: var(--g-600);
}
.prof-meta { display: flex; flex-direction: column; gap: 4px; }
.prof-name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.3px; color: var(--g-900); }
.prof-handle { font-size: 14px; color: var(--g-600); font-weight: 600; }
.prof-since { font-size: 12px; color: var(--g-500); margin-top: 4px; }
.prof-av-wrap { position: relative; overflow: visible; }
.prof-level-badge {
  position: absolute;
  bottom: -6px; right: -6px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  letter-spacing: 0.5px;
  z-index: 5;
  pointer-events: none;
}
.prof-xp { margin-top: 10px; max-width: 360px; }
.prof-xp-head {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.prof-xp-num { font-weight: 600; color: var(--g-500); }
.prof-xp-bar { height: 8px; background: var(--g-200); border-radius: 999px; overflow: hidden; }
.prof-xp-fill {
  height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-h));
  border-radius: 999px; transition: width 0.4s ease;
}

/* Header avatar level badge (small chip on the corner) */
.h-profile-avatar { position: relative; }
.h-level-badge {
  position: absolute; bottom: -2px; right: -2px;
  background: var(--orange); color: #fff;
  min-width: 18px; height: 16px; padding: 0 4px;
  font-size: 9px; font-weight: 800;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--white);
  letter-spacing: 0.3px;
}

/* ProfileMenu XP block */
.pm-xp { padding: 10px 14px; border-bottom: 1px solid var(--g-200); }
.pm-xp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pm-xp-lvl { font-size: 12px; font-weight: 800; color: var(--g-900); }
.pm-xp-num { font-size: 11px; color: var(--g-500); font-weight: 600; }
.pm-xp-bar { height: 6px; background: var(--g-200); border-radius: 999px; overflow: hidden; }
.pm-xp-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-h)); border-radius: 999px; transition: width 0.4s ease; }

/* Achievements grid */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.ach-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--g-100);
  border-radius: var(--r-md);
  border-left: 3px solid var(--g-300);
  position: relative;
  transition: transform 0.15s, background 0.15s;
}
.ach-card.unlocked { background: var(--white); border-left-color: var(--orange); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.ach-card.locked .ach-icon, .ach-card.locked .ach-title, .ach-card.locked .ach-desc { opacity: 0.45; filter: grayscale(0.8); }
.ach-icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
  background: var(--orange);
}
.ach-card.tier-bronze   .ach-icon { background: #B66830; }
.ach-card.tier-silver   .ach-icon { background: #A0A0A0; }
.ach-card.tier-gold     .ach-icon { background: linear-gradient(135deg, #FFD64A, #FE9920); }
.ach-card.tier-platinum .ach-icon { background: linear-gradient(135deg, #B197FC, #7048E8); }
.ach-meta { min-width: 0; flex: 1; }
.ach-title { font-size: 13px; font-weight: 800; color: var(--g-900); }
.ach-desc { font-size: 11px; color: var(--g-600); margin-top: 2px; line-height: 1.4; }
.ach-check {
  position: absolute; top: 6px; right: 8px;
  width: 18px; height: 18px;
  background: var(--orange); color: #fff;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
}

/* ============================================
   FLIP CARD CONTEXT MENU (right-click)
   ============================================ */
.fc-ctx {
  position: fixed;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
  padding: 6px;
  z-index: 200;
  display: flex; flex-direction: column;
}
.fc-ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  color: var(--g-800);
  cursor: pointer;
  text-align: left;
}
.fc-ctx-item:hover { background: var(--g-100); }
.fc-ctx-item.danger { color: #b91c1c; }
.fc-ctx-item.danger:hover { background: rgba(239,68,68,0.08); }
.fc-ctx-item i { font-size: 12px; width: 14px; text-align: center; }

/* ============================================
   @MENTION POPOVER in chat
   ============================================ */
.mention-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px; right: 8px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
  padding: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 30;
}
.mention-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0; border-radius: var(--r-sm);
  text-align: left;
  cursor: pointer;
}
.mention-item:hover, .mention-item.is-active { background: var(--g-100); }
.mention-av {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 800;
  overflow: hidden; flex-shrink: 0;
}
.mention-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mention-name { font-size: 13px; font-weight: 600; color: var(--g-900); }

/* Provably-fair link — replaces the wider .fairness footer strip. A
   compact clickable text-button that opens a centered explainer popup. */
.fairness-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px auto 4px;
  padding: 6px 12px;
  background: rgba(16,185,129,0.08);
  border: 0;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--emerald);
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
  align-self: center;
}
.fairness-link:hover { background: rgba(16,185,129,0.16); transform: translateY(-1px); }
.fairness-link:active { transform: translateY(0); }
.fairness-link .ok { color: var(--emerald); }
.fairness-link-icon { color: var(--g-500); font-size: 11px; margin-left: 2px; }

/* Body of the fairness popup — left-aligned step list inside .cm-card */
.fairness-pop-body { text-align: left; font-size: 13px; color: var(--g-700); line-height: 1.5; margin-bottom: 14px; }
.fairness-pop-body p { margin: 0 0 14px; }
.fairness-pop-steps { padding-left: 20px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.fairness-pop-steps li { line-height: 1.45; }
.fairness-pop-steps li b { display: block; color: var(--g-900); font-size: 13px; margin-bottom: 2px; font-weight: 700; }
.fairness-pop-steps li span { font-size: 12.5px; color: var(--g-600); }
.fairness-pop-foot {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: rgba(16,185,129,0.08);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  font-size: 12px;
  color: var(--g-800);
}
.fairness-pop-foot i { color: var(--orange); font-size: 13px; margin-top: 2px; }
[data-theme="dark"] .fairness-link { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .fairness-link:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .fairness-pop-body { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .fairness-pop-steps li b { color: rgba(255,255,255,0.95); }
[data-theme="dark"] .fairness-pop-steps li span { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .fairness-pop-foot { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); }

/* ============================================
   OfflineBanner — fixed strip at the very top, above the header
   ============================================ */
/* ============================================
   REFERRAL WELCOME BANNER
   Shown only to anonymous visitors who arrived via /r/{username}.
   Sits above the header (high z-index) so it can't be hidden behind
   the topbar. Self-destructs once user registers/logs in.
   ============================================ */
.ref-welcome-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 180;
  display: flex; align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 14px;
  background: linear-gradient(135deg, #10B981, #F08018);
  color: white;
  box-shadow: 0 2px 12px -2px rgba(0,0,0,0.15);
  animation: refWelcomeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes refWelcomeIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Bump the header down so banner doesn't overlap it. We toggle a class
   on <body> from JS (App-level) — older browsers without `:has()` support
   used to silently no-op these rules. Class-based is portable. */
body.body--ref-banner .header { top: 56px; }
body.body--ref-banner .page { padding-top: calc(var(--header-h) + 56px); }
@media (max-width: 720px) {
  body.body--ref-banner .header { top: 76px; }
  body.body--ref-banner .page { padding-top: calc(var(--header-h) + 76px); }
}

.ref-welcome-av {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  overflow: hidden;
  flex-shrink: 0;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
.ref-welcome-av img { width: 100%; height: 100%; object-fit: cover; }
.ref-welcome-av-fb { font-weight: 800; font-size: 13px; color: white; }

.ref-welcome-text { flex: 1; min-width: 0; line-height: 1.25; }
.ref-welcome-line1 { font-weight: 700; font-size: 14px; }
.ref-welcome-line1 b { font-weight: 800; }
.ref-welcome-line2 { font-size: 12px; opacity: 0.92; margin-top: 2px; }

.ref-welcome-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ref-welcome-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  background: rgba(0,0,0,0.20);
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background var(--motion);
}
.ref-welcome-btn:hover { background: rgba(0,0,0,0.30); }
.ref-welcome-btn i { font-size: 11px; }
.ref-welcome-x {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
  color: white;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  font-size: 12px;
  transition: background var(--motion);
}
.ref-welcome-x:hover { background: rgba(0,0,0,0.30); }

@media (max-width: 720px) {
  .ref-welcome-banner { gap: 10px; padding: 8px 10px; }
  .ref-welcome-av { width: 34px; height: 34px; }
  .ref-welcome-line1 { font-size: 12.5px; }
  .ref-welcome-line2 { font-size: 11px; }
  .ref-welcome-btn { height: 32px; padding: 0 10px; font-size: 12px; }
  .ref-welcome-x { width: 30px; height: 30px; }
}

.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  animation: offline-slide 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.offline-banner.is-offline { background: linear-gradient(135deg, #b91c1c, #dc2626); }
.offline-banner.is-restored { background: linear-gradient(135deg, #047857, #10b981); }
.offline-banner i { font-size: 14px; }
@keyframes offline-slide { from { transform: translateY(-100%); } to { transform: none; } }

/* Color-blind friendly win/loss — add an icon, don't rely on color alone */
.win-loss-icon { display: inline-flex; vertical-align: middle; margin-right: 4px; }

/* Personal stats chart on the profile page — last 14 days, stacked
   win (green, bottom) + loss (red, top) bars. */
.profile-chart-section {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin: 18px 0;
}
.profile-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-chart-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--g-800); }
.profile-chart-summary { display: flex; gap: 14px; font-size: 13px; }
.pcs-stat { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.pcs-wins   { color: var(--emerald); }
.pcs-losses { color: var(--rose); }
.pcs-net.is-profit { color: var(--emerald); }
.pcs-net.is-loss   { color: var(--rose); }
.profile-chart {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  align-items: end;
  height: 120px;
  padding: 8px 0 4px;
}
.pc-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.pc-bar {
  width: 100%;
  max-width: 22px;
  display: flex; flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  min-height: 2px;
  background: var(--g-200);
}
.pc-bar-loss { background: var(--rose); transition: height 0.3s; }
.pc-bar-win  { background: var(--emerald); transition: height 0.3s; }
.pc-day { font-size: 10px; color: var(--g-500); margin-top: 4px; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .profile-chart-section { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .pc-bar { background: rgba(255,255,255,0.06); }

/* Font-size root scale — toggled via Settings page (small / normal / large).
   We scale on *both* the html root (drives rem/em) AND set a `--font-scale`
   CSS variable. Most existing UI uses fixed px (so rem alone wouldn't move
   much); the explicit body font-size + variable lets the noticeable text
   surfaces (chat, body copy, menus) follow the user's pick without us
   having to refactor every `font-size: 12px` in the codebase.
   To opt in elsewhere: `font-size: calc(13px * var(--font-scale))`. */
html[data-font="small"]  { font-size: 14.5px; --font-scale: 0.92; }
html[data-font="normal"] { font-size: 16px;   --font-scale: 1;    }
html[data-font="large"]  { font-size: 17.5px; --font-scale: 1.12; }
html[data-font="small"]  body,
html[data-font="normal"] body,
html[data-font="large"]  body { font-size: calc(15px * var(--font-scale, 1)); }
/* High-traffic text surfaces — chat msg body, message input, menu items.
   These were `font-size: 13px` etc.; calc() lets them follow font-scale. */
html[data-font] .chat-msg .text,
html[data-font] .chat-msg .name,
html[data-font] .chat-input,
html[data-font] .pm-item,
html[data-font] .settings-row .sr-name,
html[data-font] .settings-row .sr-desc {
  font-size: calc(1em * var(--font-scale, 1));
}

/* Settings page — pill group (segmented control style) */
.settings-pill-group {
  display: inline-flex;
  background: var(--g-150);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.settings-pill {
  padding: 6px 14px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--g-700);
  cursor: pointer;
  transition: background var(--motion), color var(--motion);
}
.settings-pill:hover { color: var(--g-900); }
.settings-pill.is-active {
  background: var(--white);
  color: var(--orange);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="dark"] .settings-pill-group { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .settings-pill.is-active { background: rgba(255,255,255,0.1); color: var(--orange); }

/* Accent color swatch picker — 4 circular swatches in a row.
   The active one shows a white checkmark and a slightly larger ring. */
.settings-swatch-group {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.settings-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px transparent;
  color: #fff;
}
.settings-swatch i { font-size: 11px; opacity: 0; transition: opacity 120ms ease-out; }
.settings-swatch:hover { transform: scale(1.08); }
.settings-swatch.is-active {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px currentColor;
}
.settings-swatch.is-active i { opacity: 1; }
[data-theme="dark"] .settings-swatch { box-shadow: 0 0 0 2px var(--g-50), 0 0 0 3px transparent; }
[data-theme="dark"] .settings-swatch.is-active { box-shadow: 0 0 0 2px var(--g-50), 0 0 0 4px currentColor; }

/* ============================================
   ConfirmModal / AlertModal — replaces window.confirm/alert
   Compact (max 380px), centered with safe padding, nice icon + body + actions.
   Lives at z-index 99999 so it tops every other modal/overlay.
   ============================================ */
.cm-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 20, 30, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 99999;
  animation: none;
}
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
.cm-card {
  background: var(--white);
  border-radius: 16px;
  padding: 22px 22px 18px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--g-200);
  text-align: center;
  animation: none;
}
@keyframes cm-pop {
  from { transform: translateY(6px) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.cm-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  font-size: 24px;
}
.cm-icon.danger { background: rgba(220,38,38,0.12); color: #dc2626; }
.cm-icon.warn   { background: rgba(245,158,11,0.16); color: #d97706; }
.cm-icon.info   { background: rgba(16,185,129,0.14); color: var(--orange); }
.cm-icon.error  { background: rgba(220,38,38,0.14); color: #dc2626; }
.cm-title {
  font-size: 17px; font-weight: 800;
  color: var(--g-900);
  margin-bottom: 6px;
  line-height: 1.3;
}
.cm-body {
  font-size: 13.5px;
  color: var(--g-600);
  line-height: 1.5;
  margin-bottom: 18px;
}
.cm-actions {
  display: flex; gap: 8px;
  justify-content: stretch;
}
.cm-btn {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}
.cm-btn:active { transform: scale(0.97); }
.cm-btn-secondary {
  background: var(--g-100);
  color: var(--g-800);
  border: 1px solid var(--g-200);
}
.cm-btn-secondary:hover { background: var(--g-150); }
.cm-btn-primary {
  background: var(--orange);
  color: white;
}
.cm-btn-primary:hover { background: var(--orange-h); }
.cm-btn-danger {
  background: #dc2626;
  color: white;
}
.cm-btn-danger:hover { background: #b91c1c; }

[data-theme="dark"] .cm-card { background: var(--g-100); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cm-btn-secondary { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: var(--g-200); }
[data-theme="dark"] .cm-btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* Inline reply quote block — shown ABOVE the actual reply body inside
   a chat message. Click to jump to the quoted user's popup. Visually
   distinct so the snippet is clearly a quote, not the replier's words. */
.chat-reply-quote {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 4px 8px;
  margin-bottom: 4px;
  background: rgba(16,185,129,0.10);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--g-700);
  border-top: 0; border-right: 0; border-bottom: 0;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion);
}
.chat-reply-quote:hover { background: rgba(16,185,129,0.18); }
.chat-reply-quote .fa-reply { color: var(--orange); font-size: 10px; flex-shrink: 0; }
.crq-name { color: var(--orange); font-weight: 700; flex-shrink: 0; }
.crq-snippet {
  color: var(--g-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chat-reply-body { /* the actual reply text below the quote */ }
[data-theme="dark"] .chat-reply-quote { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .chat-reply-quote:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .crq-snippet { color: rgba(255,255,255,0.6); }

/* Reply preview above the chat input — shows which message you're replying
   to with a quote snippet and a × to cancel. */
.chat-reply-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--g-100);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 6px;
}
.chat-reply-preview .fa-reply { color: var(--orange); font-size: 11px; }
.chat-reply-name { font-weight: 700; color: var(--orange); }
.chat-reply-snippet {
  color: var(--g-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.chat-reply-x {
  width: 22px; height: 22px;
  border: 0; background: transparent;
  color: var(--g-500);
  cursor: pointer;
  border-radius: 4px;
  display: grid; place-items: center;
}
.chat-reply-x:hover { background: var(--g-200); color: var(--g-800); }
[data-theme="dark"] .chat-reply-preview { background: rgba(255,255,255,0.04); }

/* Quick reactions row at the top of the full emoji picker — Discord-style
   6 most-common reactions one tap away. */
.mrp-quick {
  display: flex; gap: 4px;
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--g-200);
}
.mrp-quick-btn {
  flex: 1;
  height: 36px;
  border: 0; background: transparent;
  border-radius: 6px;
  font-size: 20px;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}
.mrp-quick-btn:hover { background: var(--g-100); transform: scale(1.15); }
[data-theme="dark"] .mrp-quick-btn:hover { background: rgba(255,255,255,0.06); }

/* ============================================
   Admin — online chart + revenue + item heatmap
   ============================================ */
.admin-stat .as-sub {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--g-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.admin-online-chart {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 12px 14px;
}
.admin-online-meta {
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: var(--g-700);
  margin-top: 6px;
}
[data-theme="dark"] .admin-online-chart { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

/* Suspicious users panel */
.adm-susp-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rose); color: white;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  padding: 1px 8px;
  margin-left: 8px;
}
.adm-susp-list { display: flex; flex-direction: column; gap: 6px; }
.adm-susp-row {
  display: grid; grid-template-columns: 40px 160px 1fr; gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 10px;
}
.adm-susp-row.sev-1, .adm-susp-row.sev-2 { border-left: 4px solid #f59e0b; }
.adm-susp-row.sev-3, .adm-susp-row.sev-4 { border-left: 4px solid #f97316; }
.adm-susp-row.sev-5 { border-left: 4px solid var(--rose); background: rgba(220,38,38,0.08); }
.adm-susp-sev {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 800;
  color: var(--g-700);
  text-align: center;
}
.adm-susp-row.sev-5 .adm-susp-sev { color: var(--rose); }
.adm-susp-user { font-weight: 700; color: var(--g-900); }
.adm-susp-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-susp-flag {
  background: var(--g-200);
  color: var(--g-800);
  font-size: 10px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.adm-susp-flag.flag-wash_trade,
.adm-susp-flag.flag-win_rate_high { background: var(--rose); color: white; }
.adm-susp-flag.flag-burst_flip,
.adm-susp-flag.flag-ip_cluster    { background: #f97316; color: white; }
.adm-susp-flag.flag-rapid_signup  { background: #f59e0b; color: white; }
[data-theme="dark"] .adm-susp-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .adm-susp-flag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }

/* User card with bulk-select checkbox */
.admin-user-card { position: relative; }
.admin-user-card.is-selected {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.55);
}
.adm-user-check {
  position: absolute;
  top: 10px; left: 10px;
  width: 16px; height: 16px;
  accent-color: var(--orange);
  cursor: pointer;
  z-index: 1;
}

.adm-heatmap {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 480px;
  overflow-y: auto;
}
.adm-heat-row {
  display: grid;
  grid-template-columns: 1.5fr 2fr 70px 90px;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
}
.adm-heat-row:nth-child(odd) { background: var(--g-100); border-radius: 6px; }
.adm-heat-name { font-weight: 600; color: var(--g-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-heat-bar { height: 12px; background: var(--g-200); border-radius: 999px; overflow: hidden; }
.adm-heat-fill { height: 100%; transition: width 0.3s; }
.adm-heat-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--g-700); text-align: right; }
.adm-heat-vol   { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; color: var(--orange); font-weight: 700; font-size: 13px; }
[data-theme="dark"] .adm-heat-row:nth-child(odd) { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .adm-heat-bar { background: rgba(255,255,255,0.06); }
@media (max-width: 720px) {
  .adm-heat-row { grid-template-columns: 1fr 50px 70px; gap: 6px; padding: 6px 8px; font-size: 12px; }
  .adm-heat-bar { display: none; }
}

/* ============================================
   Dice Resolved Modal v2 — BLOX.HOT-branded, real avatars, dramatic
   reveal animation with confetti. Mirrors the FlipModal architecture
   so it feels like part of the same game family.
   ============================================ */
.dice-match-modal-v2 { max-width: 880px; width: 880px; }
@media (max-width: 920px) { .dice-match-modal-v2 { max-width: 100%; width: 100%; } }
.dm2-body { padding: 18px 22px 22px; }

.dm2-eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--g-500);
  margin-bottom: 12px;
}
.dm2-eyebrow i { color: var(--orange); margin-right: 4px; }

/* Players row */
.dm2-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--g-200);
  margin-bottom: 16px;
}
.dm2-player { text-align: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dm2-player.is-winner { transform: scale(1.05); }
.dm2-player.is-loser  { opacity: 0.55; }
.dm2-avatar {
  position: relative;
  width: 72px; height: 72px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: var(--g-100);
  overflow: visible;
  border: 3px solid var(--g-200);
  transition: border-color 0.3s;
}
.dm2-avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
.dm2-avatar-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 800;
  color: var(--g-700);
  background: var(--g-150);
  border-radius: 999px;
}
.dm2-player.is-winner .dm2-avatar {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.18), 0 0 24px rgba(0,0,0,0.18);
}
/* Crown perches on the TOP-LEFT corner of the winner's avatar (rotated
   slightly so it looks like it's just been plopped on, not centered).
   Matches the coinflip flip-player crown which sits on the side too. */
.dm2-crown {
  position: absolute;
  top: -10px; left: -10px;
  /* Gold → orange gradient (original "trophy crown" look). An earlier
     brand-color sweep accidentally swapped `#FE9920` → `#10B981` here
     which turned the crown into a gold→green badge — user noticed. */
  background: linear-gradient(135deg, #FFD64A, #FE9920);
  color: white;
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 0 0 2px rgba(255,255,255,0.95);
  transform: rotate(-14deg);
}
[data-theme="dark"] .dm2-crown { box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 0 0 2px var(--g-50); }
/* Keep the keyframe for any legacy usage but it's no longer applied
   (animations were stripped per user request). */
@keyframes crown-bounce {
  from { transform: rotate(-14deg) scale(0); opacity: 0; }
  to   { transform: rotate(-14deg) scale(1); opacity: 1; }
}
.dm2-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--g-900);
  margin-bottom: 4px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: auto; margin-right: auto;
}
.dm2-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
}
/* Used in the coinflip FlipDetailModal to mirror the dice "score" row —
   shows "picked heads" / "picked tails" under the username so coinflip
   and dice modals have the same structure. */
.dm2-pick {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-600);
  margin-top: 4px;
}
.dm2-pick b { color: var(--g-900); font-weight: 700; }
[data-theme="dark"] .dm2-pick { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .dm2-pick b { color: rgba(255,255,255,0.95); }
/* Empty opponent slot — waiting for someone to join. Same circle frame
   as a real avatar but with a bolt icon centered. */
.dm2-avatar--empty {
  display: grid; place-items: center;
  color: var(--g-400);
  font-size: 22px;
  background: var(--g-100);
}
[data-theme="dark"] .dm2-avatar--empty { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); }
.dm2-player.is-winner .dm2-score {
  color: var(--emerald);
  text-shadow: 0 0 18px rgba(0,0,0,0.18);
}

.dm2-vs-block { text-align: center; }
.dm2-vs-text {
  font-size: 13px;
  font-weight: 800;
  color: var(--g-500);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.dm2-round-counter {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  background: rgba(16,185,129,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Arena — big dice stage */
.dm2-arena {
  background: linear-gradient(135deg, var(--g-100) 0%, var(--g-50) 50%, var(--g-100) 100%);
  border: 1px solid var(--g-200);
  border-radius: 16px;
  padding: 26px 18px 32px;
  margin-bottom: 16px;
  min-height: 130px;
  display: grid;
  place-items: center;
}
.dm2-arena-intro { text-align: center; }
.dm2-arena-intro-pulse {
  font-size: 38px;
  color: var(--orange);
  animation: dm2-pulse 1s ease-in-out infinite;
}
@keyframes dm2-pulse {
  0%,100% { transform: scale(1) rotate(0deg);   opacity: 1; }
  50%     { transform: scale(1.15) rotate(15deg); opacity: 0.6; }
}
.dm2-arena-intro-text {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dm2-arena-roll {
  display: flex; align-items: center; justify-content: center;
  gap: 30px;
}
.dm2-die-side {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s;
}
.dm2-die-side.won { transform: scale(1.1); }
.dm2-die-side.lost { opacity: 0.35; transform: scale(0.92); }
.dm2-die-vs {
  font-size: 26px;
  color: var(--g-400);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--white);
  border: 1.5px solid var(--g-200);
}
.dm2-vs-bolt { color: var(--orange); animation: dm2-pulse 0.6s ease-in-out infinite; }
.dm2-vs-win  { color: var(--emerald); }
.dm2-vs-lose { color: var(--rose); }

/* Round pill row */
.dm2-rounds {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.dm2-round {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--g-100);
  border: 1.5px solid var(--g-200);
  border-radius: 999px;
  font-size: 12px;
  color: var(--g-700);
  transition: all 0.3s;
  font-variant-numeric: tabular-nums;
}
.dm2-round.is-current {
  background: rgba(16,185,129,0.16);
  border-color: var(--orange);
  color: var(--orange);
  animation: dm2-shake 0.4s ease-in-out infinite;
}
.dm2-round.is-done { background: var(--white); color: var(--g-900); font-weight: 700; }
.dm2-round.win  { border-color: var(--emerald); }
.dm2-round.lose { border-color: var(--rose); }
.dm2-round-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; opacity: 0.55; }
.dm2-round-val { font-family: 'JetBrains Mono', monospace; font-weight: 800; min-width: 14px; text-align: center; }
.dm2-round-sep { font-size: 10px; color: var(--g-400); }
.dm2-round.win  .dm2-round-sep { color: var(--emerald); }
.dm2-round.lose .dm2-round-sep { color: var(--rose); }
@keyframes dm2-shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-2px); }
  75%     { transform: translateX(2px); }
}

/* Items strip — minimal: just a thin colored top border + label, no big
   card. User asked for less "card" feel, so we drop the heavy bg/border
   in favor of a subtle accent line. */
.dm2-items {
  padding: 10px 4px;
  margin-bottom: 12px;
  text-align: center;
  border-top: 1px solid var(--g-200);
}
.dm2-items.won  { border-top-color: rgba(16,185,129,0.5); }
.dm2-items.lost { border-top-color: rgba(220,38,38,0.4); }
.dm2-items-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-600);
  margin-bottom: 10px;
}
.dm2-items.won  .dm2-items-label { color: var(--emerald); }
.dm2-items.lost .dm2-items-label { color: var(--rose); }
.dm2-items-label i { margin-right: 4px; }
.dm2-items-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center;
}
.dm2-item-drop {
  animation: none;
}
.dm2-item-more {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--g-200);
  border-radius: 8px;
  font-weight: 800; font-size: 13px;
  color: var(--g-700);
}
@keyframes dm2-drop {
  from { transform: translateY(-30px) scale(0.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ============================================
   STAKES + SCROLLABLE ITEMS LIST (BloxyBet-inspired layout)
   Replaces the old "You won / You lost" banner with a per-player
   percentage + value pill, then a vertical scroll of staked items.
   Winner-side pill tints green, loser-side red — the result is
   communicated by the pill instead of a separate banner.
   ============================================ */
/* Hash row — flex with justify-content: center so it ALWAYS lays out
   horizontally centered regardless of parent (was inline-flex before
   which broke margin:auto centering in the view modal). */
.dm2-hash {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin: 6px 0 14px;
  color: var(--g-500);
  font-size: 12px;
  background: transparent;
  border: 0;
  cursor: default;
  padding: 4px 10px;
  border-radius: 8px;
  width: 100%;
  text-align: center;
}
.dm2-hash--link {
  cursor: pointer;
  transition: background var(--motion), color var(--motion);
}
.dm2-hash--link:hover { background: var(--g-150); color: var(--g-700); }
[data-theme="dark"] .dm2-hash--link:hover { background: var(--g-100); color: var(--g-700); }
.dm2-hash i { font-size: 11px; opacity: 0.75; }
.dm2-hash code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--g-600);
  background: transparent;
  letter-spacing: 0.02em;
}
.dm2-hash--link:hover code { color: var(--g-800); }

/* Pick chip — replaces the old "picked heads" text under the avatar.
   Slim pill with the coin face + bold side label, much more legible
   than gray subtext. */
.dm2-pick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--g-150);
  font-size: 11px; font-weight: 800;
  color: var(--g-800);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.dm2-pick-chip .coin-mini { width: 17px !important; height: 17px !important; }
.dm2-pick-chip--ghost { opacity: 0.6; }
.dm2-pick-chip--inline { /* used inside FlipModal's compact players row */
  font-size: 10px;
  padding: 3px 8px;
}
[data-theme="dark"] .dm2-pick-chip { background: var(--g-100); color: var(--g-700); }

/* Fairness data modal — table-like rows showing seeds + hash + game id */
.fd-fairness-rows { display: flex; flex-direction: column; gap: 10px; }
.fd-fairness-row { display: flex; flex-direction: column; gap: 4px; }
.fd-fairness-lbl {
  font-size: 11px; font-weight: 700;
  color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fd-fairness-val {
  display: flex; align-items: center; gap: 6px;
  background: var(--g-150);
  border-radius: 8px;
  padding: 8px 12px;
}
[data-theme="dark"] .fd-fairness-val { background: var(--g-100); }
.fd-fairness-val code {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--g-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: transparent;
}
.fd-fairness-copy {
  width: 28px; height: 28px;
  border: 0; cursor: pointer;
  background: transparent;
  color: var(--g-600);
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 12px;
  transition: background var(--motion), color var(--motion);
}
.fd-fairness-copy:hover { background: var(--g-200); color: var(--g-900); }
[data-theme="dark"] .fd-fairness-copy:hover { background: var(--g-200); }

.dm2-stakes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.dm2-stake-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  position: relative;
  overflow: hidden;
  transition: background var(--motion), border-color var(--motion);
}
.dm2-stake-pill--neutral { /* default */ }
.dm2-stake-pill--win {
  background: linear-gradient(90deg, rgba(16,185,129,0.18), rgba(16,185,129,0.05));
  border-color: rgba(16,185,129,0.35);
}
.dm2-stake-pill--loss {
  background: linear-gradient(90deg, rgba(239,68,68,0.16), rgba(239,68,68,0.04));
  border-color: rgba(239,68,68,0.30);
  opacity: 0.92;
}
.dm2-stake-pct {
  font-size: 16px; font-weight: 800;
  color: var(--g-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dm2-stake-pill--win  .dm2-stake-pct { color: #047857; }
.dm2-stake-pill--loss .dm2-stake-pct { color: #B91C1C; }
.dm2-stake-val {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 800;
  color: var(--g-900);
  font-variant-numeric: tabular-nums;
}
.dm2-stake-val .gem-i { font-size: 13px; }
[data-theme="dark"] .dm2-stake-pill { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
/* Dark mode: NEUTRAL fill, colored border + colored text only.
   Removed the green/red fills entirely — they were reading as neon
   panels against the dark modal. Now the pct text + border carry all
   the win/loss meaning. */
[data-theme="dark"] .dm2-stake-pill--win  {
  background: rgba(255,255,255,0.04);
  border-color: rgba(16,185,129,0.30);
}
[data-theme="dark"] .dm2-stake-pill--loss {
  background: rgba(255,255,255,0.04);
  border-color: rgba(239,68,68,0.22);
  opacity: 1;
}
[data-theme="dark"] .dm2-stake-pill--win  .dm2-stake-pct { color: #6EE7B7; }
[data-theme="dark"] .dm2-stake-pill--loss .dm2-stake-pct { color: #FCA5A5; }

/* Two-column items layout — left column = creator (or YOU when inside
   FlipModal post-resolve), right column = opponent. Each column has a
   side coin badge head and its own scrollable items list. Resolved
   flips: winner column tints green, loser column tints red. */
.dm2-items-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.dm2-items-col {
  display: flex; flex-direction: column;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;       /* prevent flex children from blowing out the column */
}
.dm2-items-col--neutral { /* default */ }
.dm2-items-col--win {
  background: linear-gradient(180deg, rgba(16,185,129,0.10), var(--g-100));
  border-color: rgba(16,185,129,0.30);
}
.dm2-items-col--loss {
  background: linear-gradient(180deg, rgba(239,68,68,0.10), var(--g-100));
  border-color: rgba(239,68,68,0.25);
}
[data-theme="dark"] .dm2-items-col { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
/* Dark mode tints — flat low-alpha fill instead of a top-to-bottom gradient.
   The old gradient + 14% green/red on dark grey produced the "3D / muddy"
   look the user complained about. Now: subtle flat tint + slightly stronger
   border, so win/loss reads at a glance but the column doesn't dominate. */
/* Dark mode: BORDER ONLY for win/loss item columns — no colored fill.
   The fill was reading as a green/red neon panel against the dark
   modal. Border color is enough to signal which side won. */
[data-theme="dark"] .dm2-items-col--win  {
  background: rgba(255,255,255,0.03);
  border-color: rgba(16,185,129,0.30);
}
[data-theme="dark"] .dm2-items-col--loss {
  background: rgba(255,255,255,0.03);
  border-color: rgba(239,68,68,0.22);
}

/* Side coin badge head — heads = orange, tails = grey/silver. The
   .coin-mini class is already styled elsewhere (filter pills) and uses
   the same heads.webp / tails.webp backgrounds. */
.dm2-items-col-head {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.35);
}
[data-theme="dark"] .dm2-items-col-head { background: rgba(255,255,255,0.04); }
/* Coin icon only — HEADS/TAILS text label removed per user request.
   The column's own bg tint (green/red on resolved) communicates the
   result; the coin face tells which side, no need for a redundant
   uppercase label below it. */
.dm2-items-col-head .coin-mini {
  width: 30px !important; height: 30px !important;   /* was 26 — a tick bigger */
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.dm2-items-col-side {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--g-700);
}
.dm2-items-col--win  .dm2-items-col-side { color: #059669; }
.dm2-items-col--loss .dm2-items-col-side { color: #DC2626; }
[data-theme="dark"] .dm2-items-col--win  .dm2-items-col-side { color: #34D399; }
[data-theme="dark"] .dm2-items-col--loss .dm2-items-col-side { color: #F87171; }

/* Scrollable per-column items list — height capped so the modal NEVER
   grows beyond ~2 items visible. Anything past the cap scrolls inside.
   Each item row is ~56px (40px thumb + 8px padding × 2) → 2 items =
   ~120px, plus 16px gap → cap at ~140px. */
.dm2-items-col-list {
  display: flex; flex-direction: column;
  gap: 6px;
  height: 156px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--g-300) transparent;
}
.dm2-items-col-list::-webkit-scrollbar { width: 6px; }
.dm2-items-col-list::-webkit-scrollbar-thumb { background: var(--g-300); border-radius: 999px; }
.dm2-items-col-list::-webkit-scrollbar-track { background: transparent; }
.dm2-items-row-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  transition: background var(--motion);
  flex-shrink: 0;
  min-height: 56px;
}
.dm2-items-row-item:hover { background: var(--white); }
[data-theme="dark"] .dm2-items-row-item { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .dm2-items-row-item:hover { background: rgba(255,255,255,0.07); }
.dm2-items-row-item .fc-item { width: 40px !important; height: 40px !important; }
.dm2-items-row-item .fc-item {
  width: 44px !important; height: 44px !important;
  flex-shrink: 0;
}
.dm2-items-row-name {
  font-size: 14px; font-weight: 700;
  color: var(--g-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm2-items-row-val {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 800;
  color: var(--g-900);
  font-variant-numeric: tabular-nums;
}
.dm2-items-row-val .gem-i { font-size: 12px; }
.dm2-items-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--g-500);
  font-size: 13px;
}

.dm2-cancelled-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--g-100);
  color: var(--g-600);
  font-size: 13px; font-weight: 600;
  margin-bottom: 12px;
}
.dm2-cancelled-note i { color: var(--g-500); }
[data-theme="dark"] .dm2-cancelled-note { background: var(--g-50); }

@media (max-width: 560px) {
  .dm2-stakes { grid-template-columns: 1fr 1fr; gap: 6px; }
  .dm2-stake-pill { padding: 10px 12px; }
  .dm2-stake-pct, .dm2-stake-val { font-size: 13.5px; }
  .dm2-items-cols { gap: 6px; }
  .dm2-items-col-list { height: 140px; padding: 6px; gap: 4px; }
  .dm2-items-col-head { padding: 8px 10px; gap: 6px; }
  .dm2-items-col-head .coin-mini { width: 22px !important; height: 22px !important; }
  .dm2-items-col-side { font-size: 10px; }
  .dm2-items-row-item { grid-template-columns: 38px 1fr auto; gap: 8px; padding: 5px 8px; min-height: 48px; }
  .dm2-items-row-item .fc-item { width: 34px !important; height: 34px !important; }
  .dm2-items-row-name { font-size: 12px; }
  .dm2-items-row-val { font-size: 12px; }
}

/* Final result banner — full-width, slim, slick. Headline + value sit
   side-by-side on a soft gradient bg with a left accent bar that mirrors
   the result color. NO thick border, NO heavy padding — feels like an
   inline status line not a confirmation card. */
.dm2-result {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 14px;
  font-size: 17px; font-weight: 800;
  margin-top: 4px;
  border: 0;
  position: relative;
  overflow: hidden;
  letter-spacing: -0.01em;
  text-align: center;
}
.dm2-result::before {
  /* Subtle inner shine — adds depth without adding a border */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%);
  pointer-events: none;
}
.dm2-result > i:first-child {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.dm2-result-you {
  background: linear-gradient(90deg, rgba(16,185,129,0.20), rgba(16,185,129,0.08));
  color: #047857;
  box-shadow: inset 4px 0 0 #10B981;
}
.dm2-result-opponent {
  background: linear-gradient(90deg, rgba(239,68,68,0.20), rgba(239,68,68,0.08));
  color: #B91C1C;
  box-shadow: inset 4px 0 0 #EF4444;
}
.dm2-result-tie {
  background: var(--g-150);
  color: var(--g-700);
  box-shadow: inset 4px 0 0 var(--g-400);
}
[data-theme="dark"] .dm2-result-you {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  color: #6EE7B7;
}
[data-theme="dark"] .dm2-result-opponent {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  color: #FCA5A5;
}
[data-theme="dark"] .dm2-result-tie {
  background: var(--g-100); color: var(--g-700);
}
[data-theme="dark"] .dm2-result > i:first-child { background: rgba(255,255,255,0.08); }
.dm2-result-amount {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* Body-level result tint — soft gradient from neutral surface to a
   green/red/neutral wash at the bottom so the entire resolved view
   reads as "won" or "lost" before the user even reaches the banner.
   Applied via .dm2-body--won / .dm2-body--lost modifier classes on the
   modal body element. */
.dm2-body.dm2-body--won  {
  background: linear-gradient(180deg, transparent 55%, rgba(16,185,129,0.07) 100%);
}
.dm2-body.dm2-body--lost {
  background: linear-gradient(180deg, transparent 55%, rgba(239,68,68,0.07) 100%);
}
/* Dark mode: NO bottom wash on win/loss bodies. The colored gradients
   read as "neon green/red glow" against the dark modal — user
   explicitly hated it. Tint-via-pill + tint-via-item-row is enough
   signal for win/loss without a full-body wash. */
[data-theme="dark"] .dm2-body.dm2-body--won,
[data-theme="dark"] .dm2-body.dm2-body--lost { background: none; }

/* Tie badge — Discord-style pill at the top of the resolved modal so
   the player understands why neither side got the crown. */
.dm2-draw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  padding: 3px 10px;
  background: rgba(254,153,32,0.15);
  color: var(--orange);
  border: 1px solid rgba(254,153,32,0.30);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em;
}
.dm2-draw-badge i { font-size: 10px; }
[data-theme="dark"] .dm2-draw-badge { background: rgba(254,153,32,0.18); }

/* Sudden-death chip — the base rounds tied so extra rounds were auto-played
   until someone won. Magenta/pink to read as "overtime!", distinct from the
   neutral orange draw badge. */
.dm2-sd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  padding: 3px 10px;
  background: rgba(233,75,123,0.14);
  color: #E94B7B;
  border: 1px solid rgba(233,75,123,0.32);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em;
}
.dm2-sd-badge i { font-size: 10px; }
[data-theme="dark"] .dm2-sd-badge { background: rgba(233,75,123,0.20); }

/* MOBILE — keep the dice filter bar + draw badge inside the viewport.
   The dice filter (search + round pills + sort) was overflowing to the right
   on phones; let the pills scroll horizontally and the search take a full row. */
@media (max-width: 720px) {
  .filter-bar.is-dice { flex-wrap: wrap; gap: 8px; }
  .filter-bar.is-dice .fb-search { flex: 1 1 100%; min-width: 0; }
  .filter-bar.is-dice .fb-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    scrollbar-width: none;
  }
  .filter-bar.is-dice .fb-pills::-webkit-scrollbar { display: none; }
  .dm2-draw-badge { margin-left: 6px; font-size: 9px; padding: 2px 7px; }
}
@keyframes dm2-result-in {
  from { transform: translateY(20px) scale(0.92); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Confetti rain — pure CSS, only mounts on win */
.dm2-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}
.dm2-confetti span {
  position: absolute;
  top: -12px;
  width: 8px; height: 14px;
  border-radius: 2px;
  animation: dm2-confetti-fall linear forwards;
}
@keyframes dm2-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(560px) rotate(var(--rot-end, 360deg)); opacity: 0; }
}

[data-theme="dark"] .dm2-arena { background: linear-gradient(135deg, var(--g-100), var(--g-50)); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .dm2-round { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .dm2-round.is-done { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); }
[data-theme="dark"] .dm2-die-vs { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .dm2-items { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .dm2-avatar { background: var(--g-100); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .dm2-avatar-fallback { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }

@media (max-width: 560px) {
  .dm2-body { padding: 14px 14px 18px; }
  .dm2-players { grid-template-columns: 1fr 60px 1fr; gap: 8px; padding: 10px 0; }
  .dm2-avatar { width: 56px; height: 56px; border-width: 2px; }
  .dm2-name { font-size: 11px; max-width: 90px; }
  .dm2-score { font-size: 28px; }
  .dm2-arena { padding: 18px 12px 24px; min-height: 100px; }
  .dm2-arena-roll { gap: 16px; }
  .dm2-die-vs { font-size: 18px; width: 36px; height: 36px; }
  .dm2-round { padding: 5px 10px; font-size: 11px; gap: 6px; }
  .dm2-items-row { gap: 4px; }
}

/* ============================================
   Dice 3D — pip-face dice with shake animation. Used in DiceResolvedModal.
   Designed to feel like a real die rolling (visible faces during shake,
   landing satisfaction when settled).
   ============================================ */
/* Big gap so the two cubes never overlap while tumbling — a rotating
   3D cube projects OUTSIDE its own box (faces stick out by half the edge
   in Z), so the boxes need plenty of breathing room between them. */
.dice-3d-pair { display: inline-flex; align-items: center; gap: 52px; position: relative; }
.dice-3d-pair .dice-3d-sum {
  position: absolute;
  bottom: -26px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 800;
  color: var(--orange);
}
/* ============================================================
   TRUE 3D DICE — a CSS cube with 6 pip faces that tumbles while
   rolling and rotates to land on the resolved value's face.
   ============================================================ */
.die3d {
  width: 50px; height: 50px;
  perspective: 460px;          /* flatter perspective = less extreme stick-out */
  flex-shrink: 0;
}
.die3d-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  /* Settling: a long, decelerating rotate to the final face. */
  transition: transform 0.9s cubic-bezier(0.18, 0.85, 0.25, 1);
  transform: rotateX(-18deg) rotateY(16deg); /* resting tilt before roll */
}
.die3d.is-rolling .die3d-inner {
  animation: die-tumble 0.62s linear infinite;
  transition: none;
}
/* Second die tumbles on a slightly different axis cadence so they don't
   look mechanically synced. */
.dice-3d-pair .die3d:nth-child(2).is-rolling .die3d-inner {
  animation-duration: 0.52s;
  animation-direction: reverse;
}
@keyframes die-tumble {
  0%   { transform: rotateX(0deg)    rotateY(0deg)    rotateZ(0deg); }
  100% { transform: rotateX(360deg)  rotateY(396deg)  rotateZ(180deg); }
}
.die3d-face {
  position: absolute;
  width: 50px; height: 50px;
  background: var(--white);
  /* Square-ish faces (tiny 4px radius) — large rounded corners left
     transparent triangular gaps where the perpendicular faces poked
     through, which read as the "weird screenshot corners". 4px keeps a
     soft edge while the faces still tile the cube cleanly. */
  border-radius: 4px;
  border: 1px solid var(--g-300);
  padding: 8px;
  backface-visibility: hidden; /* never see the inside of the cube */
}
/* Position the 6 faces of a 50px cube (half = 25px). */
.die3d-front  { transform: translateZ(25px); }
.die3d-back   { transform: rotateY(180deg) translateZ(25px); }
.die3d-right  { transform: rotateY(90deg)  translateZ(25px); }
.die3d-left   { transform: rotateY(-90deg) translateZ(25px); }
.die3d-top    { transform: rotateX(90deg)  translateZ(25px); }
.die3d-bottom { transform: rotateX(-90deg) translateZ(25px); }
[data-theme="dark"] .die3d-face {
  background: #20232b;
  border-color: rgba(255,255,255,0.12);
}
.pip-face {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
}
.pip {
  width: 7px; height: 7px;
  background: var(--g-900);
  border-radius: 999px;
  align-self: center;
  justify-self: center;
}
[data-theme="dark"] .pip { background: #fff; }
/* Pip positions (CSS grid placement) */
.pip-tl { grid-column: 1; grid-row: 1; }
.pip-tr { grid-column: 3; grid-row: 1; }
.pip-ml { grid-column: 1; grid-row: 2; }
.pip-c  { grid-column: 2; grid-row: 2; }
.pip-mr { grid-column: 3; grid-row: 2; }
.pip-bl { grid-column: 1; grid-row: 3; }
.pip-br { grid-column: 3; grid-row: 3; }

/* Never let the spinning cubes push the dice arena past the viewport on
   small screens. The 3D projection can extend beyond the box, so clamp. */
.dice-3d-pair { max-width: 100%; }

/* MOBILE — shrink the cubes + gap so two dice pairs (+VS) fit a phone width.
   translateZ MUST equal half the face size or the cube comes apart. */
@media (max-width: 600px) {
  .dice-3d-pair { gap: 20px; }
  .die3d { width: 34px; height: 34px; perspective: 300px; }
  .die3d-face { width: 34px; height: 34px; padding: 5px; }
  .die3d-front  { transform: translateZ(17px); }
  .die3d-back   { transform: rotateY(180deg) translateZ(17px); }
  .die3d-right  { transform: rotateY(90deg)  translateZ(17px); }
  .die3d-left   { transform: rotateY(-90deg) translateZ(17px); }
  .die3d-top    { transform: rotateX(90deg)  translateZ(17px); }
  .die3d-bottom { transform: rotateX(-90deg) translateZ(17px); }
  .pip { width: 5px; height: 5px; }
  .dice-3d-pair .dice-3d-sum { bottom: -20px; font-size: 12px; }
}
@media (max-width: 380px) {
  .dice-3d-pair { gap: 14px; }
  .die3d { width: 30px; height: 30px; }
  .die3d-face { width: 30px; height: 30px; padding: 4px; }
  .die3d-front  { transform: translateZ(15px); }
  .die3d-back   { transform: rotateY(180deg) translateZ(15px); }
  .die3d-right  { transform: rotateY(90deg)  translateZ(15px); }
  .die3d-left   { transform: rotateY(-90deg) translateZ(15px); }
  .die3d-top    { transform: rotateX(90deg)  translateZ(15px); }
  .die3d-bottom { transform: rotateX(-90deg) translateZ(15px); }
}

/* Center stage in the resolved modal — big dice + name + outcome arrow */
.dice-arena {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 14px;
  padding: 22px 18px 38px;
  margin: 16px 0 18px;
  text-align: center;
}
.dice-arena-label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g-500);
  margin-bottom: 12px;
}
.dice-arena-row {
  display: flex; align-items: center; justify-content: center;
  gap: 24px;
}
.dice-arena-side {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 26px; /* extra so the sum label below dice doesn't overlap name */
  transition: transform 0.3s, opacity 0.3s;
}
.dice-arena-side.won { transform: scale(1.06); }
.dice-arena-side.lost { opacity: 0.4; }
.dice-arena-name {
  font-size: 12px; font-weight: 700;
  color: var(--g-700);
}
.dice-arena-vs {
  font-size: 22px;
  color: var(--g-500);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--g-200);
}
[data-theme="dark"] .dice-arena { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .dice-arena-vs { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.65); }

/* Round history strip below the arena — compact pill rows */
.dice-rounds-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.dice-round {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 999px;
  font-size: 12px;
  color: var(--g-700);
  transition: background var(--motion);
}
.dice-round.is-current {
  background: rgba(16,185,129,0.12);
  border-color: var(--orange);
  color: var(--orange);
}
.dice-round.is-done { background: var(--white); color: var(--g-900); font-weight: 600; }
[data-theme="dark"] .dice-round { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .dice-round.is-done { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); }
.dice-round-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; opacity: 0.6; }
.dice-round-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; min-width: 12px; text-align: center; }
.dice-vs-mini { font-size: 12px; }
.dice-vs-mini.you-win { color: var(--emerald); }
.dice-vs-mini.opp-win { color: var(--rose); }

.dice-player.is-winner .dice-player-score { color: var(--emerald); text-shadow: 0 0 16px rgba(0,0,0,0.18); }

/* ============================================
   DICE PAGE — peer-vs-peer lobby (mirrors coinflip lobby pattern)
   ============================================ */
/* Dice page wrapper — INTENTIONALLY plain block layout (no flex / gap)
   so children stack with their NATURAL component margins, exactly like
   the coinflip lobby (which is rendered as a bare fragment under
   .layout-main with no wrapping container). Previously this had
   `display:flex; flex-direction:column; gap:14px` which doubled the
   spacing between BannerCarousel → Tickers (gap 14 + Tickers'
   `margin-top: 14` = 28px), so dice's tickers row sat 14px BELOW
   where coinflip's did. Switching to plain block restores parity. */
.dice-page { padding: 0 0 28px; }

/* Lobby grid — auto-fill columns, responsive */
.dice-lobby {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
@media (max-width: 540px) {
  .dice-lobby { grid-template-columns: 1fr; }
}

/* Dice match card — same shape language as FlipCard */
.dice-card {
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--motion), border-color var(--motion), box-shadow var(--motion);
}
.dice-card:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 8px 24px -10px rgba(0,0,0,0.18); }
.dice-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.dice-card-meta { min-width: 0; }
.dice-card-name { font-size: 13px; font-weight: 700; color: var(--g-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dice-card-sub  { font-size: 11px; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.dice-card-wager {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
}
.dice-card-wager .lbl { font-size: 9.5px; font-weight: 800; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.06em; }
.dice-card-wager .val { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; color: var(--orange); }
.dice-card-rounds {
  display: flex; gap: 6px;
  padding: 10px;
  background: var(--g-100);
  border-radius: 8px;
  justify-content: center;
}
.dice-card-items {
  display: flex; gap: 4px; flex-wrap: wrap;
  align-items: center;
  padding: 8px;
  background: var(--g-100);
  border-radius: 8px;
  min-height: 52px;
}
.dice-more {
  font-size: 11px; font-weight: 700;
  color: var(--g-500);
  padding: 4px 8px;
  background: var(--g-200);
  border-radius: 6px;
}
.dice-card-slot {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--white);
  border: 1px dashed var(--g-300);
  border-radius: 8px;
  color: var(--g-400);
  font-size: 16px;
}
.dice-card-join {
  width: 100%;
  height: 40px;
  background: var(--orange);
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}
.dice-card-join:hover { background: var(--orange-h); }
.dice-card-join:active { transform: scale(0.98); }
.dice-card-join.cancel {
  background: var(--g-200);
  color: var(--g-700);
}
.dice-card-join.cancel:hover { background: var(--g-300); }
[data-theme="dark"] .dice-card-items { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .dice-more { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
[data-theme="dark"] .dice-card-join.cancel { background: rgba(255,255,255,0.06); color: var(--g-300); }

/* Join modal — header info bar */
.dice-join-info {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--g-100);
  border-radius: 8px;
  font-size: 12px;
  color: var(--g-700);
}
.dice-join-target { font-weight: 700; color: var(--orange); }
[data-theme="dark"] .dice-join-info { background: rgba(255,255,255,0.04); }

[data-theme="dark"] .dice-card { background: var(--g-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .dice-card-rounds { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .dice-card-slot { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

/* Create-dice modal — reuses the .modal shell + dice-config-row layout */
.create-dice-modal .modal-body { background: transparent; }
.create-dice-modal .modal-cta {
  position: static;
  box-shadow: none;
  gap: 6px;
}
.create-dice-modal .modal-cta .gem-i { font-size: 13px; }

.dice-config-row { display: flex; flex-direction: column; gap: 8px; }
.dice-config-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-600); }
.dice-rounds-pick, .dice-wager-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.dice-round-btn, .dice-wager-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: var(--white);
  border: 1.5px solid var(--g-200);
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  color: var(--g-800);
  cursor: pointer;
  transition: all var(--motion);
}
.dice-round-btn:hover, .dice-wager-btn:hover { border-color: var(--orange); }
.dice-round-btn.is-active, .dice-wager-btn.is-active {
  background: var(--orange); color: white; border-color: var(--orange);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,0.18);
}
.dice-play-btn {
  height: 48px;
  background: var(--orange);
  color: white;
  border: 0; border-radius: 10px;
  font-size: 15px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}
.dice-play-btn:hover { background: var(--orange-h); }
.dice-play-btn:active { transform: scale(0.98); }

.dice-history { background: var(--g-100); border: 1px solid var(--g-200); border-radius: var(--r-lg); padding: 16px 20px; }
.dice-history h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--g-800); }
.dice-history-list { display: flex; flex-direction: column; gap: 6px; }
.dice-hist-row {
  display: grid;
  grid-template-columns: 100px 60px 60px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--white);
  border-radius: 8px;
  font-size: 13px;
}
.dice-hist-result { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.dice-hist-you      { color: var(--emerald); }
.dice-hist-opponent { color: var(--rose); }
.dice-hist-tie      { color: var(--g-600); }
.dice-hist-score { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.dice-hist-rounds { font-size: 11px; color: var(--g-500); text-transform: uppercase; }
.dice-hist-wager { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; color: var(--orange); font-weight: 700; }

.dice-match-overlay { z-index: 250; }
.dice-match-modal { max-width: 520px; width: 100%; }
.dice-match-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--g-200);
  display: flex; align-items: center; justify-content: space-between;
}
.dice-match-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.dice-match-body { padding: 24px 20px; }
.dice-players { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 24px; }
.dice-player { text-align: center; }
.dice-player-name { font-size: 13px; font-weight: 700; color: var(--g-700); margin-bottom: 4px; }
.dice-player-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 38px; font-weight: 800;
  color: var(--orange);
  line-height: 1;
}
.dice-vs { font-size: 12px; font-weight: 800; color: var(--g-500); letter-spacing: 0.06em; }
.dice-rounds-list { display: flex; flex-direction: column; gap: 10px; }
.dice-round {
  display: grid;
  grid-template-columns: 32px 1fr 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--g-100);
  border-radius: 10px;
  border: 1px solid var(--g-200);
}
.dice-round.is-done { background: var(--white); }
.dice-round-lbl { font-size: 11px; font-weight: 800; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.05em; }
.dice-face {
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
  font-size: 14px; font-weight: 800;
  color: var(--g-900);
}
.dice-face i { font-size: 20px; color: var(--orange); }
.dice-face.is-rolling i { animation: dice-spin 0.5s linear infinite; }
@keyframes dice-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.dice-face-val { font-family: 'JetBrains Mono', monospace; min-width: 24px; text-align: center; }
.dice-vs-mini { text-align: center; font-size: 14px; font-weight: 800; color: var(--g-400); }
.dice-vs-mini.you-win { color: var(--emerald); }
.dice-vs-mini.opp-win { color: var(--rose); }
.dice-result {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.dice-result-you      { background: rgba(16,185,129,0.12); color: var(--emerald); border: 1px solid rgba(16,185,129,0.4); }
.dice-result-opponent { background: rgba(220,38,38,0.12); color: var(--rose);    border: 1px solid rgba(220,38,38,0.4); }
.dice-result-tie      { background: var(--g-100); color: var(--g-700); border: 1px solid var(--g-200); }

[data-theme="dark"] .dice-config { background: var(--g-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .dice-history { background: var(--g-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .dice-hist-row { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .dice-round { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .dice-round.is-done { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .dice-round-btn, [data-theme="dark"] .dice-wager-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: var(--g-200);
}

@media (max-width: 540px) {
  .dice-hist-row { grid-template-columns: 90px 50px 1fr; gap: 8px; padding: 8px; font-size: 12px; }
  .dice-hist-rounds { display: none; }
  .dice-round { grid-template-columns: 24px 1fr 28px 1fr; padding: 8px; gap: 6px; }
  .dice-face { font-size: 12px; gap: 5px; }
  .dice-face i { font-size: 16px; }
  .dice-player-score { font-size: 30px; }
}

/* Inline @mention pill rendered inside chat messages. Click → opens the
   referenced user's popup (same as clicking the avatar in the message header).
   Style is a subtle orange-tinted pill so mentions stand out from plain text
   but don't dominate the message. */
.chat-mention {
  display: inline-flex; align-items: center;
  background: rgba(16,185,129,0.14);
  color: var(--orange);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1.3;
  transition: background var(--motion);
}
.chat-mention:hover { background: rgba(16,185,129,0.26); }
[data-theme="dark"] .chat-mention { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .chat-mention:hover { background: rgba(255,255,255,0.04); }

/* ============================================
   PULL-TO-REFRESH indicator (mobile lobby)
   ============================================ */
.ptr-indicator {
  position: fixed;
  top: calc(var(--header-h) + 6px); left: 50%;
  width: 38px; height: 38px;
  margin-left: -19px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--orange);
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  z-index: 200;
  pointer-events: none;
  transition: transform 0.05s linear;
}

/* ============================================
   DAILY REWARD banner + modal
   ============================================ */
.daily-banner {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  margin: 12px 0 0;
  padding: 14px 18px;
  background: linear-gradient(90deg, var(--orange) 0%, #FFB85C 100%);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.daily-banner:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.db-icon {
  width: 42px; height: 42px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.22);
  font-size: 18px;
}
.db-text { flex: 1; }
.db-title { font-size: 15px; font-weight: 800; }
.db-sub { font-size: 12px; opacity: 0.92; margin-top: 2px; }

.daily-streak-big {
  font-size: 18px; font-weight: 800; color: var(--orange);
  margin: 12px 0 14px;
}
.daily-items {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.daily-xp {
  font-size: 22px; font-weight: 800; color: var(--g-900);
  margin-bottom: 14px;
}

/* ============================================
   REFERRAL block in Settings
   ============================================ */
.ref-code-row, .ref-use-row { display: inline-flex; gap: 8px; align-items: stretch; }
.ref-code {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  background: var(--g-100);
  border: 1px dashed var(--orange);
  border-radius: var(--r-sm);
  color: var(--g-900);
  min-width: 90px;
  user-select: all;
}
.ref-input { width: 110px; text-align: center; font-family: ui-monospace, Menlo, monospace; letter-spacing: 2px; font-weight: 700; }
.ref-msg { font-size: 12px; color: var(--orange); font-weight: 600; padding: 6px 0; }

/* ============================================
   ADMIN PAGE
   ============================================ */
.admin-page { padding: 20px 0 40px; }
.admin-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 26px; font-weight: 800; margin: 0 0 22px;
  letter-spacing: -0.3px;
}
.admin-title i { color: var(--orange); }

/* ============================================================
   ADMIN SHELL — sidebar layout. Left rail of section links,
   right pane shows the active section.
   ============================================================ */
.admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0 40px;
  align-items: start;
}
.admin-sidebar {
  position: sticky; top: calc(var(--header-h) + 12px);
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.admin-sidebar-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--g-900);
  padding: 6px 10px 12px;
}
.admin-sidebar-brand i { color: var(--orange); }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: transparent; border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--g-700);
  text-align: left; width: 100%;
  transition: background var(--motion), color var(--motion);
  position: relative;
}
.admin-nav-item i { width: 18px; text-align: center; font-size: 14px; color: var(--g-500); transition: color var(--motion); }
.admin-nav-item:hover { background: var(--g-150); color: var(--g-900); }
.admin-nav-item.is-active { background: var(--orange); color: #fff; }
.admin-nav-item.is-active i { color: #fff; }
.admin-nav-badge {
  margin-left: auto;
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--magenta, #FF3D9A); color: #fff;
  font-size: 10.5px; font-weight: 800;
}
.admin-nav-item.is-active .admin-nav-badge { background: #fff; color: var(--orange); }
.admin-main { min-width: 0; }
/* Section header used by AdminValueRequests + future sections */
.admin-h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; margin: 0 0 14px; color: var(--g-900); }
.admin-h2 i { color: var(--orange); }

@media (max-width: 860px) {
  /* Sidebar becomes a horizontal scrolling tab bar on top */
  .admin-shell { grid-template-columns: 1fr; gap: 12px; }
  .admin-sidebar {
    position: static;
    flex-direction: row; overflow-x: auto;
    padding: 8px; gap: 6px;
  }
  .admin-sidebar-brand { display: none; }
  .admin-nav { flex-direction: row; gap: 6px; }
  .admin-nav-item { white-space: nowrap; padding: 9px 12px; }
  .admin-nav-label { font-size: 12.5px; }
}
[data-theme="dark"] .admin-sidebar { background: var(--g-100); border-color: var(--g-200); }
.admin-section {
  padding: 18px 22px;
  background: var(--g-100);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.admin-section h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--g-700); }
.admin-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.admin-stat {
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.as-lbl { font-size: 10px; font-weight: 800; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.06em; }
.as-val { font-size: 20px; font-weight: 800; color: var(--g-900); margin-top: 4px; }

.admin-event-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.admin-event-form .settings-select { height: 36px; }
.admin-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.admin-table th, .admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--g-200);
  text-align: left;
}
.admin-table th { font-size: 11px; color: var(--g-600); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-table tr.banned td { opacity: 0.5; }
.admin-table td .settings-btn { margin-right: 6px; height: 30px; padding: 0 10px; font-size: 12px; }
.admin-search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-search-row .settings-select { flex: 1; max-width: 320px; }

/* ============================================
   BIG-WIN particle burst (>500 pot)
   ============================================ */
.bw-burst {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  display: grid; place-items: center;
}
.bw-particle {
  position: absolute;
  border-radius: 50%;
  --dx: 0px; --dy: 0px; --delay: 0s;
  animation: bw-fly 1.5s cubic-bezier(0.16, 0.85, 0.45, 1.0) var(--delay) both;
}
.bw-particle.orange { background: radial-gradient(circle, var(--orange-h), var(--orange)); box-shadow: 0 0 12px var(--orange); }
.bw-particle.gold   { background: radial-gradient(circle, #FFE066, #FFD64A);                box-shadow: 0 0 14px #FFD64A; }
@keyframes bw-fly {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

/* ============================================
   ITEM DROP row in FlipModal result phase
   ============================================ */
.item-drop-row {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  flex-wrap: wrap;
  margin-top: 14px; max-width: 360px;
}
.item-drop {
  opacity: 0;
  animation: item-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.item-drop-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--g-100);
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; color: var(--g-700);
}
@keyframes item-pop {
  0%   { opacity: 0; transform: scale(0.4) translateY(-12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================
   QUESTS modal
   ============================================ */
.quests-section-label {
  font-size: 11px; font-weight: 800;
  color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 14px 0 8px;
}
.quests-list { display: flex; flex-direction: column; gap: 8px; }
.quest-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--g-100);
  border-radius: var(--r-md);
  border-left: 3px solid var(--g-300);
}
.quest-row.done { border-left-color: var(--orange); background: rgba(16,185,129,0.06); }
.quest-row.claimed { opacity: 0.55; }
.qr-meta { flex: 1; min-width: 0; }
.qr-title { font-size: 14px; font-weight: 800; color: var(--g-900); }
.qr-desc  { font-size: 12px; color: var(--g-600); margin: 2px 0 8px; }
.qr-progress { height: 6px; background: var(--g-200); border-radius: 999px; overflow: hidden; }
.qr-progress-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-h)); border-radius: 999px; transition: width 0.4s ease; }
.qr-progress-num { font-size: 11px; color: var(--g-500); margin-top: 4px; font-weight: 600; }
.qr-reward { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.qr-xp { font-size: 12px; font-weight: 800; color: var(--orange); }
.qr-claim {
  padding: 6px 12px;
  background: var(--orange); color: #fff; border: 0;
  border-radius: var(--r-sm); font-weight: 700; font-size: 12px;
  cursor: pointer;
}
.qr-claim:hover:not(:disabled) { background: var(--orange-h); }
.qr-claim.locked { background: var(--g-200); color: var(--g-600); cursor: not-allowed; }
.qr-claim.claimed { background: var(--g-300); color: var(--g-600); cursor: default; }
.qr-claim:disabled { opacity: 0.7; }

/* ============================================
   FRIENDS modal
   ============================================ */
.fr-add-row { display: flex; gap: 8px; }
.fr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--g-100);
  border-radius: var(--r-md);
  margin-bottom: 6px;
}
.fr-av-wrap { flex-shrink: 0; }
.fr-av-img {
  width: 38px; height: 38px;
  border-radius: 999px; object-fit: cover;
  background: var(--g-200);
}
.fr-av-fallback {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  font-size: 12px; font-weight: 800;
}
.fr-meta { flex: 1; min-width: 0; }
.fr-name { font-size: 14px; font-weight: 700; color: var(--g-900); }
.fr-handle { font-size: 12px; color: var(--g-500); }
.fr-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fr-actions .settings-btn { padding: 0 10px; height: 32px; font-size: 12px; }

/* ============================================
   WINNER highlight on resolved flip cards
   ============================================ */
.fc-avatar.is-winner {
  box-shadow: 0 0 0 3px var(--orange), 0 0 18px rgba(0,0,0,0.18);
  animation: winner-pulse 1.6s ease-in-out infinite;
}
.fc-avatar.is-loser { opacity: 0.55; filter: grayscale(0.5); }
.fc-winner-pill {
  position: absolute; top: -10px; left: -6px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--orange); color: #fff;
  display: grid; place-items: center;
  font-size: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  z-index: 3;
}
@keyframes winner-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--orange), 0 0 18px rgba(0,0,0,0.18); }
  50%      { box-shadow: 0 0 0 3px var(--orange), 0 0 28px rgba(0,0,0,0.18); }
}
.fc-avatar.clickable { cursor: pointer; transition: transform 0.12s ease; }
.fc-avatar.clickable:hover { transform: scale(1.08); }

/* ============================================
   USER STATS POPOVER (click avatar in flip card / chat)
   ============================================ */
/* User popover modal — CENTERED on the page (both axes). */
.user-pop-overlay {
  z-index: 250;
  align-items: center !important;
  justify-items: center !important;
}
.user-pop-modal {
  max-width: 460px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: 0;
  position: relative;
}
@media (max-width: 720px) {
  .user-pop-overlay { padding-left: 12px; padding-right: 12px; }
  .user-pop-modal { max-height: calc(100dvh - var(--mobile-nav-h, 64px) - 32px); }
}
.up-banner {
  height: 90px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  position: relative;
  background: linear-gradient(135deg, #FE9920 0%, #FFD64A 100%); /* fallback — overridden by .prof-banner-N */
}
.up-banner.prof-banner-1 { background: url('../images/banner1.webp') center/cover, linear-gradient(135deg, #FE9920, #FFD64A); }
.up-banner.prof-banner-2 { background: url('../images/banner2.webp') center/cover, linear-gradient(135deg, #1E63F0, #5C9CFF); }
.up-banner.prof-banner-3 { background: url('../images/banner3.webp') center/cover, linear-gradient(135deg, #047857, #34D9A0); }
.up-banner.prof-banner-4 { background: url('../images/banner4.webp') center/cover, linear-gradient(135deg, #C2185B, #FF3D9A); }
.up-banner.prof-banner-5 { background: url('../images/banner5.webp') center/cover, linear-gradient(135deg, #7C3AED, #FF6F00); }
.up-banner.prof-banner-6 { background: url('../images/banner6.webp') center/cover, linear-gradient(135deg, #0F172A, #6D28D9); }
.up-banner.prof-banner-7 { background: url('../images/banner7.webp') center/cover, linear-gradient(135deg, #C2410C, #FBBF24); }
.up-banner.prof-banner-8 { background: url('../images/banner8.webp') center/cover, linear-gradient(135deg, #0EA5E9, #BAE6FD); }

/* ============================================
   BANNER PICKER + edit button
   ============================================ */
.prof-banner-edit {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.92);
  color: var(--g-700);
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 14px;
  z-index: 2;
  transition: background var(--motion), transform var(--motion);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.prof-banner-edit:hover { background: white; transform: translateY(-1px); }

.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 4px;
}
.bp-cell {
  position: relative;
  height: 110px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: transform var(--motion), border-color var(--motion);
}
.bp-cell:hover:not(:disabled) { transform: translateY(-2px); }
.bp-cell.is-active { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(0,0,0,0.18); }
.bp-cell.is-locked { cursor: not-allowed; filter: grayscale(0.7); opacity: 0.55; }
/* Re-use the prof-banner-N background recipes for the cell */
.bp-cell.prof-banner-1 { background: url('../images/banner1.webp') center/cover, linear-gradient(135deg, #FE9920, #FFD64A); }
.bp-cell.prof-banner-2 { background: url('../images/banner2.webp') center/cover, linear-gradient(135deg, #1E63F0, #5C9CFF); }
.bp-cell.prof-banner-3 { background: url('../images/banner3.webp') center/cover, linear-gradient(135deg, #047857, #34D9A0); }
.bp-cell.prof-banner-4 { background: url('../images/banner4.webp') center/cover, linear-gradient(135deg, #C2185B, #FF3D9A); }
.bp-cell.prof-banner-5 { background: url('../images/banner5.webp') center/cover, linear-gradient(135deg, #7C3AED, #FF6F00); }
.bp-cell.prof-banner-6 { background: url('../images/banner6.webp') center/cover, linear-gradient(135deg, #0F172A, #6D28D9); }
.bp-cell.prof-banner-7 { background: url('../images/banner7.webp') center/cover, linear-gradient(135deg, #C2410C, #FBBF24); }
.bp-cell.prof-banner-8 { background: url('../images/banner8.webp') center/cover, linear-gradient(135deg, #0EA5E9, #BAE6FD); }
.bp-cell-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px 12px;
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.bp-cell-name { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.bp-cell-lock, .bp-cell-active, .bp-cell-pick {
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.bp-cell-lock { color: #FFD64A; }
.bp-cell-active { color: #34D9A0; }
.bp-cell-pick { opacity: 0.85; }
.bp-err { color: var(--red); font-size: 12px; margin-top: 12px; text-align: center; }
.up-head {
  display: flex; align-items: flex-end; gap: 14px;
  padding: 0 20px;
  margin-top: -34px;
  margin-bottom: 16px;
  position: relative;
}
.up-av-wrap { flex-shrink: 0; position: relative; }
.up-av {
  display: block;
  width: 72px; height: 72px;
  border-radius: 999px; object-fit: cover;
  border: 4px solid white;
  background: var(--g-200);
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.up-av-fallback {
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  font-size: 18px; font-weight: 800;
}
.up-level {
  position: absolute; bottom: -4px; right: -6px;
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  border: 2px solid var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  letter-spacing: 0.4px;
}
.up-meta { min-width: 0; flex: 1; padding-right: 24px; }
.up-name { font-size: 17px; font-weight: 800; color: var(--g-900); line-height: 1.2; }
.up-handle { font-size: 12px; color: var(--g-600); margin-top: 2px; }
/* Floating close button on banner background — positions a .modal-close
   absolutely on the banner so it sits on the colored area, but visually
   uses the standard .modal-close size/shape. */
.up-close-floating {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,0.92);
  z-index: 2;
}
.up-close-floating:hover { background: white; }

.up-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  padding: 0 20px;
  margin-bottom: 16px;
}
.up-section {
  padding: 0 20px;
  margin-bottom: 14px;
}
.up-section-title {
  font-size: 11px; font-weight: 700; color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.up-mini-row { display: flex; gap: 6px; flex-wrap: wrap; }
.up-mini-item {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: var(--g-100);
  border: 1px solid var(--g-200);
  display: grid; place-items: center;
  padding: 4px;
}
.up-mini-item img { width: 100%; height: 100%; object-fit: contain; }
.up-mini-wish { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.06); }
.up-stat {
  padding: 10px 12px;
  background: var(--g-100);
  border-radius: var(--r-md);
}
.up-stat-lbl { font-size: 10px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.05em; }
.up-stat-val { font-size: 15px; font-weight: 800; color: var(--g-900); margin-top: 4px; display: flex; align-items: center; gap: 3px; }

.up-cta-row { padding: 0 20px 20px; display: flex; gap: 10px; }
.up-cta-row .up-cta { flex: 1; }
.up-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  background: var(--orange); color: #fff;
  border: 0; border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s, transform 0.05s;
}
.up-cta:hover { background: var(--orange-h); }
.up-cta:active { transform: translateY(1px); }
.up-loading, .up-err { text-align: center; padding: 64px 24px; color: var(--g-500); font-size: 14px; }
.up-err { color: #c0392b; }

@media (max-width: 480px) {
  .up-stats { grid-template-columns: 1fr 1fr; }
}
.prof-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-bottom: 28px;
}
.prof-stat {
  background: var(--g-100);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.ps-lbl { font-size: 11px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.ps-val { font-size: 22px; font-weight: 800; color: var(--g-900); display: flex; align-items: center; gap: 4px; }
.prof-section-title { font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--g-900); }
/* ============================================
   RECENT ACTIVITY v2 — redesigned card rows on profile
   ============================================ */
/* Recent-activity wrapper hosts toolbar + stats strip + list. */
.prof-recent-wrap { display: flex; flex-direction: column; gap: 12px; }

/* Toolbar — filter pills on the left, search input on the right.
   Wraps under each other on mobile (the grid auto-fits). */
.prr-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}
.prr-filter-pills { display: inline-flex; gap: 4px; background: var(--g-100); border-radius: 999px; padding: 3px; }
.prr-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 0; background: transparent;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--g-600);
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.prr-filter-pill:hover { color: var(--g-900); }
.prr-filter-pill.is-active { background: var(--white); color: var(--g-900); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.prr-filter-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--g-200);
  color: var(--g-700);
  font-variant-numeric: tabular-nums;
}
.prr-filter-pill.is-active .prr-filter-count { background: var(--g-150); }

.prr-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 999px;
  min-width: 240px;
  flex: 0 1 280px;
}
.prr-search i { font-size: 12px; color: var(--g-500); }
.prr-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--g-900);
}
.prr-search input::placeholder { color: var(--g-500); }
.prr-search-clear {
  width: 18px; height: 18px;
  border: 0; background: transparent;
  border-radius: 4px;
  color: var(--g-500); cursor: pointer;
  display: grid; place-items: center;
  font-size: 10px;
}
.prr-search-clear:hover { background: var(--g-200); color: var(--g-900); }

/* Stats strip — 4 mini stats: showing / win rate / W/L / net */
.prr-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px 14px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 12px;
}
.prr-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prr-stat-lbl { font-size: 10px; font-weight: 700; color: var(--g-500); text-transform: uppercase; letter-spacing: 0.06em; }
.prr-stat b { font-size: 16px; font-weight: 800; color: var(--g-900); display: inline-flex; align-items: center; gap: 4px; }

[data-theme="dark"] .prr-filter-pills { background: var(--g-150); }
[data-theme="dark"] .prr-filter-pill.is-active { background: var(--g-200); color: var(--white); box-shadow: none; }
[data-theme="dark"] .prr-filter-count { background: var(--g-200); }
[data-theme="dark"] .prr-search { background: var(--g-150); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .prr-stats-strip { background: var(--g-100); border-color: rgba(255,255,255,0.06); }

/* Meta row — id + items count below the username. Adds detail
   without bloating the card height. */
.prr-meta-row {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--g-500);
  font-variant-numeric: tabular-nums;
}
.prr-meta-id { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.prr-meta-dot { opacity: 0.5; }
.prr-date { font-size: 10px; color: var(--g-500); font-weight: 600; }

.prof-recent-v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Responsive: stack toolbar on small screens; full-width search */
@media (max-width: 720px) {
  .prr-toolbar { gap: 8px; }
  .prr-search { min-width: 100%; flex-basis: 100%; }
  .prr-filter-pills { flex: 1; justify-content: space-around; }
  .prr-stats-strip {
    padding: 10px;
    /* Halve to 2 cols on phone so each stat actually breathes */
    grid-template-columns: repeat(2, 1fr);
  }
  .prr-stat b { font-size: 14px; }
  .prr-card { grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px 10px 14px; }
  .prr-card .prr-items-mini { grid-column: 1 / -1; padding: 0; border-top: 1px solid var(--g-150); padding-top: 8px; }
  .prr-card .prr-share { display: none; }
  /* Counter row chip — tighter on mobile so it doesn't push send-btn down */
  .chat-input-counter-row { margin: 3px 2px 4px; }
  .chat-input-counter { font-size: 10px; padding: 2px 6px; }
}
/* Tablet: 4-col stats becomes 2-col, search keeps room next to pills */
@media (min-width: 721px) and (max-width: 980px) {
  .prr-stats-strip { grid-template-columns: repeat(2, 1fr); }
}
/* Recent-activity row — v4 COMPACT redesign per user request ("daha
   güzel, gereksiz büyük ve geniş, daha iyi tasarım"). Halved row height,
   tighter horizontal rhythm, items strip merged inline (no tray),
   left edge accent line is a thin 3px bar. Reads more like a Discord
   activity feed row than a heavy leaderboard card. */
.prr-card {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 14px;
  background: var(--g-100);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease-out, border-color 140ms ease-out;
  position: relative;
  overflow: hidden;
  min-height: 52px;
}
.prr-card:hover {
  background: var(--g-150);
  border-color: var(--g-200);
}
.prr-card.is-won:hover  { border-color: rgba(16,185,129,0.30); }
.prr-card.is-lost:hover { border-color: rgba(239,68,68,0.25); }
.prr-card::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}
.prr-card.is-won::before  { background: var(--emerald); }
.prr-card.is-lost::before { background: var(--red); }

.prr-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prr-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em;
  width: fit-content;
  text-transform: uppercase;
}
.prr-badge.win  { background: rgba(16,185,129,0.12); color: var(--emerald); }
.prr-badge.lose { background: rgba(239,68,68,0.12);  color: var(--red); }
.prr-badge i    { font-size: 9px; }
.prr-vs { font-size: 12px; color: var(--g-700); line-height: 1.2; }
.prr-vs b { color: var(--g-900); font-weight: 700; }
.prr-vs em { color: var(--g-500); font-style: normal; }

/* Items strip — flat inline, no tray. Smaller item tiles for density. */
.prr-items-mini {
  display: flex; gap: 4px; align-items: center;
  min-width: 0;
}
.prr-item {
  width: 30px; height: 30px;
  object-fit: contain;
  background: var(--g-50);
  border-radius: 6px;
  padding: 3px;
  flex-shrink: 0;
}
.prr-item-more {
  font-size: 11px; font-weight: 700;
  color: var(--g-500);
  padding: 0 4px;
  white-space: nowrap;
}

.prr-pot-col { text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.prr-pot-value {
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  justify-content: flex-end;
  color: var(--g-900);
  font-variant-numeric: tabular-nums;
}
.prr-pot-value b { font-weight: 800; letter-spacing: -0.01em; }
.prr-pot-value .gem-i { font-size: 11px; }
.prr-time {
  font-size: 10.5px; color: var(--g-500);
  font-variant-numeric: tabular-nums;
}

.prr-share {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  color: var(--g-500);
  border: 1px solid var(--g-200);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 12px;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
  flex-shrink: 0;
}
.prr-share:hover { background: var(--g-100); color: var(--orange); border-color: var(--orange); }
.prr-share.is-copied { background: var(--emerald); color: white; border-color: var(--emerald); }

[data-theme="dark"] .prr-card { background: var(--g-100); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .prr-card:hover { background: var(--g-150); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .prr-card.is-won:hover  { border-color: rgba(16,185,129,0.35); }
[data-theme="dark"] .prr-card.is-lost:hover { border-color: rgba(239,68,68,0.28); }
[data-theme="dark"] .prr-item { background: var(--g-150); }
[data-theme="dark"] .prr-share { background: transparent; color: var(--g-700); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .prr-share:hover { background: var(--g-200); color: var(--orange); }

@media (max-width: 540px) {
  .prr-card { grid-template-columns: 1fr auto; gap: 10px; padding: 12px; }
  .prr-items-mini { grid-column: 1 / -1; }
  .prr-pot-col { grid-row: 1; }
  .prr-share { grid-row: 1; }
  .prr-item { width: 30px; height: 30px; }
}

/* ============================================
   LEGACY RECENT ACTIVITY (kept for back-compat)
   ============================================ */
.prof-recent { display: flex; flex-direction: column; gap: 6px; }
.prof-recent-row {
  display: grid;
  grid-template-columns: 100px 120px 1fr 200px;
  gap: 16px; align-items: center;
  padding: 12px 16px;
  background: var(--g-100);
  border-radius: var(--r-md);
  border-left: 3px solid var(--g-300);
}
.prof-recent-row.won  { border-left-color: #10B981; }
.prof-recent-row.lost { border-left-color: #ef4444; }
.prr-result { font-weight: 800; font-size: 13px; }
.prof-recent-row.won  .prr-result { color: #10B981; }
.prof-recent-row.lost .prr-result { color: #ef4444; }
.prr-pot { font-weight: 700; color: var(--g-900); display: flex; align-items: center; gap: 4px; }
.prr-opp { font-size: 13px; color: var(--g-700); }
.prr-date { font-size: 12px; color: var(--g-500); text-align: right; }

@media (max-width: 720px) {
  .prof-stats { grid-template-columns: repeat(2, 1fr); }
  .prof-recent-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .prr-date { text-align: left; grid-column: 1 / -1; }
}

/* ============================================
   HISTORY PAGE
   ============================================ */
.history-page { padding: 20px 0 40px; max-width: 1100px; margin: 0 auto; }
.hist-title { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.hist-sub { margin: 0 0 22px; color: var(--g-500); font-size: 14px; }
.hist-list { display: flex; flex-direction: column; gap: 8px; }
.hist-row {
  display: grid;
  grid-template-columns: 130px 1fr 200px 100px;
  gap: 16px; align-items: center;
  padding: 14px 16px;
  background: var(--g-100);
  border-radius: var(--r-md);
  border-left: 3px solid var(--g-300);
}
.hist-row.won  { border-left-color: #10B981; }
.hist-row.lost { border-left-color: #ef4444; }
.hist-row.cancelled { border-left-color: var(--g-400); opacity: 0.7; }
.hist-result-col { display: flex; flex-direction: column; gap: 4px; }
.hist-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  width: max-content;
}
.tag-win { background: rgba(16,185,129,0.14); color: #047857; }
.tag-lose { background: rgba(239,68,68,0.14); color: #b91c1c; }
.tag-neutral { background: var(--g-200); color: var(--g-700); }
.hist-side { font-size: 11px; color: var(--g-500); font-weight: 700; }
.hist-row-items { display: flex; gap: 6px; align-items: center; }
.hist-item-img {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--g-200);
  padding: 2px;
  object-fit: contain;
}
.hist-row-extra { font-size: 12px; color: var(--g-600); font-weight: 700; }
.hist-vs { font-size: 12px; color: var(--g-500); margin-top: 4px; }
.hist-pot { font-size: 16px; font-weight: 800; color: var(--g-900); display: flex; align-items: center; gap: 4px; }
.hist-date { font-size: 11px; color: var(--g-500); margin-top: 2px; }
.hist-verify-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--g-200);
  background: var(--white);
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600;
  color: var(--g-700);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hist-verify-btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

@media (max-width: 720px) {
  .hist-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hist-actions-col { grid-column: 1 / -1; }
}

/* ============================================
   FAIRNESS PAGE
   ============================================ */
/* ============================================
   AFFILIATES PAGE
   ============================================ */
.affiliates-page { padding: 4px 0 40px; max-width: 1100px; margin: 0 auto; }
.aff-skel { padding: 24px 0; }
.aff-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 22px 24px;
  margin: 14px 0 18px;
  background: linear-gradient(135deg, var(--g-100), var(--g-150));
  border-radius: 16px;
  border: 1px solid var(--g-200);
}
[data-theme="dark"] .aff-hero { background: linear-gradient(135deg, var(--g-50), var(--g-100)); }

/* ===== Claim card ===== Monthly 15th payout */
.aff-claim-card {
  display: flex; flex-direction: column;
  margin-bottom: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(254,153,32,0.10), rgba(254,153,32,0.02));
  border: 1px solid rgba(254,153,32,0.30);
  border-radius: 16px;
}
.aff-claim-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.aff-claim-lbl { font-size: 11px; font-weight: 800; color: var(--orange); text-transform: uppercase; letter-spacing: 0.06em; }
.aff-claim-val {
  font-size: 26px; font-weight: 900; color: var(--g-900);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; letter-spacing: -0.02em;
}
.aff-claim-val .gem-i { font-size: 20px; }
.aff-claim-sub { font-size: 12px; color: var(--g-600); margin-top: 4px; max-width: 360px; }
.aff-claim-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--orange); color: white;
  border: 0; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}
.aff-claim-btn:hover { background: var(--orange-h); transform: translateY(-1px); }
.aff-claim-pending, .aff-claim-locked {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--g-100); border: 1px solid var(--g-200);
  border-radius: 12px;
  font-size: 12px;
}
.aff-claim-pending i, .aff-claim-locked i { font-size: 16px; color: var(--orange); }
.aff-claim-pending b, .aff-claim-locked b { display: block; font-size: 12.5px; color: var(--g-900); margin-bottom: 2px; }
.aff-claim-pending span, .aff-claim-locked span { font-size: 11px; color: var(--g-600); }
[data-theme="dark"] .aff-claim-card { background: linear-gradient(135deg, rgba(254,153,32,0.10), rgba(255,255,255,0.02)); }
[data-theme="dark"] .aff-claim-val { color: var(--white); }
[data-theme="dark"] .aff-claim-pending, [data-theme="dark"] .aff-claim-locked { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .aff-claim-pending b, [data-theme="dark"] .aff-claim-locked b { color: var(--white); }
@media (max-width: 720px) {
  .aff-claim-head { flex-direction: column; align-items: stretch; }
  .aff-claim-btn { width: 100%; justify-content: center; }
  .aff-claim-pending, .aff-claim-locked { width: 100%; }
}
.aff-hero-left { min-width: 0; }
.aff-title {
  margin: 0 0 6px;
  font-size: 28px; font-weight: 800; letter-spacing: -0.5px;
  display: flex; align-items: center; gap: 10px;
  color: var(--g-900);
}
.aff-title > i { color: var(--orange); font-size: 22px; }
.aff-sub { margin: 0; color: var(--g-600); font-size: 13.5px; line-height: 1.55; max-width: 600px; }
.aff-hero-right {
  display: flex; gap: 14px;
  flex-shrink: 0;
}
.aff-stat {
  min-width: 130px;
  text-align: right;
}
.aff-stat-lbl {
  font-size: 10px; font-weight: 700;
  color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.aff-stat-val {
  font-size: 22px; font-weight: 800;
  color: var(--g-900);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.aff-stat-val .gem-i { font-size: 18px; }

.aff-links {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.aff-link-card {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 12px;
  padding: 14px 16px;
}
.aff-link-lbl {
  font-size: 10.5px; font-weight: 700;
  color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.aff-link-row { display: flex; align-items: center; gap: 8px; }
.aff-link-val {
  flex: 1; min-width: 0;
  background: var(--g-150);
  padding: 9px 12px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: 13px;
  color: var(--g-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aff-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px;
  border-radius: 8px;
  background: var(--orange); color: white;
  font-size: 12.5px; font-weight: 700;
  border: 0; cursor: pointer;
  transition: background var(--motion);
  flex-shrink: 0;
}
.aff-copy-btn:hover { background: var(--orange-h); }
.aff-share-btn { background: var(--g-200); color: var(--g-900); }
.aff-share-btn:hover { background: var(--g-300); }
[data-theme="dark"] .aff-share-btn { background: var(--g-150); color: var(--g-900); }
[data-theme="dark"] .aff-share-btn:hover { background: var(--g-200); }

.aff-section {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 14px;
  padding: 8px 8px 8px;
  overflow: hidden;
}
.aff-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.aff-section-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--g-900); }
.aff-section-meta {
  background: var(--orange-soft, rgba(16,185,129,0.14));
  color: var(--orange);
  font-size: 11px; font-weight: 700;
  padding: 4px 8px; border-radius: 999px;
  letter-spacing: 0.03em;
}

.aff-table { display: flex; flex-direction: column; gap: 2px; }
.aff-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--g-800);
}
.aff-row--head {
  font-size: 10.5px; font-weight: 700;
  color: var(--g-600);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 8px 14px;
}
.aff-row:not(.aff-row--head):hover { background: var(--g-150); }
.aff-col-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aff-av {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--g-200);
  object-fit: cover;
  flex-shrink: 0;
}
.aff-av--fallback {
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--g-700);
}
.aff-uname { min-width: 0; line-height: 1.2; }
.aff-uname-handle { font-weight: 700; color: var(--g-900); font-size: 13.5px; }
.aff-uname-display { color: var(--g-500); font-size: 11.5px; }
.aff-col-joined { color: var(--g-600); font-size: 12.5px; }
.aff-col-wagered, .aff-col-earn {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.aff-col-earn--positive { color: var(--emerald); }
.aff-col-wagered .gem-i, .aff-col-earn .gem-i { font-size: 12px; }

.aff-empty {
  padding: 36px 16px;
  text-align: center;
}
.aff-empty-illu { font-size: 38px; margin-bottom: 10px; }
.aff-empty h4 { margin: 0 0 6px; font-size: 16px; color: var(--g-900); }
.aff-empty p { margin: 0; color: var(--g-500); font-size: 13px; max-width: 480px; margin-inline: auto; line-height: 1.55; }

/* Tablet / phones */
@media (max-width: 880px) {
  .aff-hero { flex-direction: column; align-items: stretch; }
  .aff-hero-right { justify-content: space-between; }
  .aff-stat { min-width: 0; text-align: left; flex: 1; }
  .aff-links { grid-template-columns: 1fr; }
  .aff-row { grid-template-columns: 1.6fr 1fr; gap: 8px 12px; }
  .aff-row--head { display: none; }
  .aff-col-joined { font-size: 11px; }
  .aff-col-wagered, .aff-col-earn {
    grid-column: 2 / 3;
    justify-content: flex-end;
  }
}

/* ============================================
   RAKEBACK PAGE
   ============================================ */
.rakeback-page { padding: 4px 0 40px; max-width: 1000px; margin: 0 auto; }
.rb-hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 24px;
  margin: 14px 0 18px;
  background: linear-gradient(135deg, var(--g-100), var(--g-150));
  border: 1px solid var(--g-200);
  border-radius: 16px;
}
[data-theme="dark"] .rb-hero { background: linear-gradient(135deg, var(--g-50), var(--g-100)); }
.rb-title {
  margin: 0 0 6px;
  font-size: 28px; font-weight: 800; letter-spacing: -0.5px;
  display: flex; align-items: center; gap: 10px;
  color: var(--g-900);
}
.rb-title > i { color: var(--orange); font-size: 22px; }
.rb-sub { margin: 0; color: var(--g-600); font-size: 13.5px; line-height: 1.55; max-width: 540px; }
.rb-countdown {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  background: var(--g-200);
  color: var(--g-800);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.rb-countdown i { color: var(--g-700); font-size: 12px; }
.rb-countdown b { color: var(--g-900); font-weight: 800; font-variant-numeric: tabular-nums; }
.rb-countdown--open { background: rgba(16,185,129,0.15); color: #059669; }
.rb-countdown--open i { color: #059669; }
[data-theme="dark"] .rb-countdown { background: rgba(255,255,255,0.08); color: var(--g-700); }
[data-theme="dark"] .rb-countdown--open { background: rgba(255,255,255,0.04); color: #34D399; }
[data-theme="dark"] .rb-countdown--open i { color: #34D399; }

.rb-claim {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  background: var(--white);
  border: 1px solid var(--g-200);
  padding: 14px 16px;
  border-radius: 12px;
  min-width: 220px;
}
[data-theme="dark"] .rb-claim { background: var(--g-100); }
.rb-claim-lbl {
  font-size: 10.5px; font-weight: 700;
  color: var(--g-600); text-transform: uppercase; letter-spacing: 0.06em;
}
.rb-claim-val {
  font-size: 26px; font-weight: 800;
  color: var(--g-900);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rb-claim-val .gem-i { font-size: 20px; }
.rb-claim-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  margin-top: 4px;
  background: var(--orange); color: white;
  border-radius: 10px; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.18);
  transition: background var(--motion);
  width: 100%;
}
.rb-claim-btn:hover:not(.is-disabled) { background: var(--orange-h); }
.rb-claim-btn.is-disabled { background: var(--g-300); color: var(--g-600); cursor: not-allowed; box-shadow: none; }

.rb-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.rb-stat {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 12px;
  padding: 14px 16px;
}
.rb-stat-lbl {
  font-size: 10.5px; font-weight: 700;
  color: var(--g-600); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.rb-stat-val {
  font-size: 20px; font-weight: 800;
  color: var(--g-900);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rb-stat-val .gem-i { font-size: 16px; }

.rb-section {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: 14px;
  padding: 8px;
}
.rb-section-head { padding: 12px 14px 8px; }
.rb-section-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--g-900); }
.rb-list { display: flex; flex-direction: column; gap: 4px; }
.rb-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
}
.rb-row:hover { background: var(--g-150); }
.rb-row-src { display: flex; align-items: center; gap: 12px; }
.rb-row-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--orange-soft, rgba(16,185,129,0.14));
  color: var(--orange);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.rb-row-title { font-weight: 700; color: var(--g-900); font-size: 13.5px; }
.rb-row-time  { color: var(--g-500); font-size: 11.5px; }
.rb-row-lost {
  display: inline-flex; align-items: center; gap: 4px;
  color: #EF4444; font-weight: 700;
  justify-self: end;
  font-variant-numeric: tabular-nums;
}
.rb-row-rake {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--emerald); font-weight: 700;
  justify-self: end;
  font-variant-numeric: tabular-nums;
}
.rb-row-lost .gem-i, .rb-row-rake .gem-i { font-size: 12px; }
.rb-empty { padding: 36px 16px; text-align: center; }
.rb-empty-illu { font-size: 38px; margin-bottom: 8px; }
.rb-empty h4 { margin: 0 0 6px; font-size: 16px; color: var(--g-900); }
.rb-empty p { margin: 0; color: var(--g-500); font-size: 13px; max-width: 480px; margin-inline: auto; line-height: 1.55; }

@media (max-width: 720px) {
  .rb-hero { flex-direction: column; align-items: stretch; }
  .rb-claim { min-width: 0; align-items: stretch; }
  .rb-claim-val { font-size: 22px; }
  .rb-stats { grid-template-columns: 1fr 1fr; }
  .rb-stats .rb-stat:last-child { grid-column: 1 / -1; }
  .rb-row { grid-template-columns: 1.5fr auto; gap: 6px; }
  .rb-row-rake { grid-column: 2 / 3; }
  .rb-row-lost { grid-column: 2 / 3; }
}

/* Fairness modal — slim head with just the close button (the H1 sits
   inside the inner FairnessPage), padding-tuned body so the page header
   doesn't fight the modal head. */
.fairness-modal-v2 .fairness-modal-head {
  border-bottom: 0;
  padding-bottom: 0;
}
.fairness-modal-body { padding: 4px 22px 22px; max-height: 80vh; overflow-y: auto; }
.fairness-modal-body .fairness-page { padding: 4px 0 0; max-width: 100%; }
.fairness-modal-body .fair-title { font-size: 22px; }
.fairness-modal-body .fair-title i { font-size: 18px; }
.fairness-modal-body .fair-sub { font-size: 13px; margin-bottom: 18px; }
.fairness-modal-body .fair-how { background: var(--g-100); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.fairness-modal-body .fair-how h3 { margin: 0 0 8px; font-size: 14px; color: var(--g-900); }
.fairness-modal-body .fair-how ol { margin: 0; padding-left: 20px; color: var(--g-700); font-size: 12.5px; line-height: 1.6; }
[data-theme="dark"] .fairness-modal-body .fair-how { background: var(--g-50); }

.fairness-page { padding: 20px 0 40px; max-width: 880px; margin: 0 auto; }
.fair-title { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.3px; display: flex; align-items: center; gap: 10px; color: var(--g-900); }
.fair-title i { color: var(--orange); }
.fair-sub { margin: 0 0 28px; color: var(--g-600); font-size: 14px; line-height: 1.55; max-width: 720px; }
.fair-how, .fair-verifier {
  padding: 20px 22px;
  background: var(--g-100);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
}
.fair-how h3, .fair-verifier h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--g-900); }
.fair-how ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--g-700); line-height: 1.55; }
.fair-how ol li::marker { color: var(--orange); font-weight: 700; }
.fair-label { display: block; font-size: 11px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.04em; margin: 12px 0 6px; }
.fair-input {
  width: 100%; height: 38px;
  padding: 0 12px;
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12px; color: var(--g-900);
  outline: none;
  transition: border-color 0.15s;
}
.fair-input:focus { border-color: var(--orange); }
.fair-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fair-run-btn {
  margin-top: 18px;
  height: 42px; padding: 0 18px;
  background: var(--orange); color: #fff;
  border: 0; border-radius: var(--r-md);
  font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.15s;
}
.fair-run-btn:hover { background: var(--orange-h); }
.fair-output {
  margin-top: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
}
.fair-out-row { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 6px 0; align-items: center; }
.fair-out-lbl { font-size: 11px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.04em; }
.fair-mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--g-900); word-break: break-all; line-height: 1.5; }
.fair-out-val.ok  { color: #10B981; font-weight: 700; }
.fair-out-val.bad { color: #ef4444; font-weight: 700; }
.fair-out-row.big { padding-top: 14px; border-top: 1px solid var(--g-200); margin-top: 8px; }
.fair-result-pill {
  display: inline-flex; align-items: center; padding: 6px 16px;
  border-radius: 999px;
  background: var(--orange); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
}
.fair-err { color: #c0392b; font-weight: 600; }

@media (max-width: 720px) {
  .fair-out-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================
   SETTINGS PAGE
   ============================================ */
.settings-page { padding: 20px 0 40px; max-width: 720px; margin: 0 auto; }
.settings-title { margin: 0 0 24px; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.settings-section {
  padding: 18px 22px;
  background: var(--g-100);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.settings-section h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--g-700); text-transform: uppercase; letter-spacing: 0.04em; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--g-200);
}
.settings-row:last-child { border-bottom: 0; }
.sr-name { font-size: 14px; font-weight: 600; color: var(--g-900); }
.sr-desc { font-size: 12px; color: var(--g-500); margin-top: 2px; }
.settings-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  color: var(--g-700);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.settings-btn:hover { background: var(--g-200); }
.settings-btn.danger { color: #b91c1c; border-color: rgba(239,68,68,0.3); }
.settings-btn.danger:hover { background: rgba(239,68,68,0.08); }
.settings-select {
  height: 36px; padding: 0 12px;
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--g-900);
  cursor: pointer;
}
.settings-saved {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--g-900); color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 100;
}

/* Match range chips in CreateModal */
.match-range { display: flex; gap: 8px; margin-top: 6px; }
.mr-chip {
  padding: 8px 14px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 700;
  color: var(--g-700);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mr-chip:hover { background: var(--g-200); }
.mr-chip.is-active { background: var(--orange); color: #fff; border-color: var(--orange); }
.mr-help { font-size: 12px; color: var(--g-500); margin-top: 6px; }

/* Stake-weighted win chance — on FlipCard + MatchModal */
.fc-odds {
  font-size: 10px; font-weight: 700;
  color: var(--g-600);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.mt-odds {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: var(--r-md);
}
.mt-odds-row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--g-700); font-weight: 600;
  padding: 4px 0;
}
.mt-odds-row b { color: var(--orange); font-weight: 800; }
.mt-odds-row.mt-odds-you { color: var(--g-900); }

/* Team size pick (1v1 / 2v2) */
.ts-pick { display: flex; gap: 8px; margin-top: 6px; }
.ts-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  color: var(--g-700);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ts-chip:hover { background: var(--g-200); }
.ts-chip.is-active { background: var(--orange); color: #fff; border-color: var(--orange); }
.ts-chip i { font-size: 12px; }

/* Team flip card — stacked avatars per team */
.flip-card.is-team .fc-creator,
.flip-card.is-team .fc-opponent { display: none; }
.fc-team {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.fc-team-stack { display: flex; gap: 6px; align-items: center; }
.fc-team-label {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  background: var(--orange); color: #fff;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.5px;
}
.fc-team-b .fc-team-label { display: none; }
.fc-empty-join.sm {
  width: 38px; height: 38px;
  font-size: 12px;
}

/* Private flip toggle in CreateModal */
.cf-private {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--g-100);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
}
.cf-private input { width: 18px; height: 18px; accent-color: var(--orange); cursor: pointer; }
.cf-private span:not(.cf-private-help) { font-size: 13px; font-weight: 700; color: var(--g-900); display: inline-flex; align-items: center; }
.cf-private-help { font-size: 11px; color: var(--g-500); margin-left: auto; text-align: right; }

/* New-flips floating badge above the lobby */
.new-flips-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto 12px;
  padding: 8px 16px;
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  align-self: center;
}
.new-flips-badge:hover { background: var(--orange-h); }

/* Notifications dropdown */
.h-notif-wrap { position: relative; }
.h-notif-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--orange);
  color: #fff;
  font-size: 10px; font-weight: 800;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--white);
}
.notif-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: calc(100vw - 24px);
  background: var(--white);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  z-index: 60;
  overflow: hidden;
}
[dir="rtl"] .notif-menu { right: auto; left: 0; }
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--g-200);
}
.notif-title { font-size: 14px; font-weight: 800; color: var(--g-900); }
.notif-clear {
  font-size: 12px; font-weight: 600;
  color: var(--g-600); background: transparent; border: 0;
  cursor: pointer;
}
.notif-clear:hover { color: var(--orange); }
.notif-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px; color: var(--g-500);
}
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--g-100);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: rgba(16,185,129,0.04); }
.notif-dot {
  flex-shrink: 0;
  width: 8px; height: 8px; margin-top: 6px;
  border-radius: 999px;
  background: var(--g-300);
}
.notif-item.kind-win .notif-dot  { background: #10B981; }
.notif-item.kind-lose .notif-dot { background: #ef4444; }
.notif-item.kind-info .notif-dot { background: var(--orange); }
.notif-item.read .notif-dot { opacity: 0.45; }
.notif-body { flex: 1; min-width: 0; }
.notif-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.notif-text-title { font-size: 13px; font-weight: 700; color: var(--g-900); }
.notif-time { font-size: 11px; color: var(--g-500); flex-shrink: 0; }
.notif-text { font-size: 12px; color: var(--g-600); margin-top: 2px; }

/* Lobby skeleton — pulsing placeholders */
.flip-card.sk { pointer-events: none; }
/* Skeleton "swept" shimmer — a brighter band moves left→right over a neutral base. */
.sk-circle, .sk-line, .sk-item, .sk-pill, .sk-block {
  position: relative;
  background-color: var(--g-200);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  display: inline-block;
}
.sk-circle::after, .sk-line::after, .sk-item::after, .sk-pill::after, .sk-block::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,0.65) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: sk-sweep 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
[data-theme="dark"] .sk-circle,
[data-theme="dark"] .sk-line,
[data-theme="dark"] .sk-item,
[data-theme="dark"] .sk-pill,
[data-theme="dark"] .sk-block {
  background-color: var(--g-200);
}
[data-theme="dark"] .sk-circle::after,
[data-theme="dark"] .sk-line::after,
[data-theme="dark"] .sk-item::after,
[data-theme="dark"] .sk-pill::after,
[data-theme="dark"] .sk-block::after {
  /* Was 8% — too subtle on dark surfaces. 18% reads as a clear sweep. */
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,0.18) 50%,
    transparent 80%
  );
}
.sk-circle { width: 48px; height: 48px; border-radius: 999px; }
.sk-line   { height: 12px; border-radius: 6px; margin-bottom: 4px; }
.sk-line.w60 { width: 60px; }
.sk-line.w40 { width: 40px; }
.sk-item   { width: 36px; height: 36px; border-radius: 6px; }
.sk-pill   { width: 76px; height: 32px; border-radius: var(--r-md); }
@keyframes sk-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================
   LEVEL REWARDS MODAL
   ============================================ */
.lvr-body { padding: 14px 20px 22px; }
.lvr-current {
  display: flex; align-items: center; gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(16,185,129,0.14), rgba(16,185,129,0.04));
  border: 1px solid rgba(16,185,129,0.32);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
}
.lvr-cur-num {
  font-size: 38px; font-weight: 900; color: var(--orange);
  background: linear-gradient(135deg, #FFD64A, var(--orange));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em; line-height: 1;
  flex-shrink: 0; min-width: 60px; text-align: center;
}
.lvr-cur-info { flex: 1; min-width: 0; }
.lvr-cur-label { font-size: 11px; font-weight: 700; color: var(--g-600); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.lvr-cur-bar { height: 8px; background: var(--g-200); border-radius: 999px; overflow: hidden; }
.lvr-cur-bar-fill { height: 100%; background: linear-gradient(90deg, #FFD64A, var(--orange)); border-radius: 999px; transition: width 0.4s ease; }
.lvr-cur-sub { font-size: 12px; color: var(--g-600); margin-top: 6px; }
.lvr-grid { display: flex; flex-direction: column; gap: 8px; }
.lvr-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  transition: background var(--motion), border-color var(--motion), transform var(--motion);
  opacity: 0.65;
}
.lvr-card.is-unlocked {
  opacity: 1;
  background: linear-gradient(135deg, rgba(16,185,129,0.10), transparent);
  border-color: rgba(16,185,129,0.32);
}
.lvr-icon { font-size: 28px; flex-shrink: 0; width: 44px; text-align: center; }
.lvr-info { flex: 1; min-width: 0; }
.lvr-title { font-size: 14px; font-weight: 700; color: var(--g-900); margin-bottom: 2px; }
.lvr-desc { font-size: 12px; color: var(--g-600); }
.lvr-state {
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--g-200); color: var(--g-500);
  font-size: 12px;
}
.lvr-card.is-unlocked .lvr-state { background: var(--emerald); color: white; }

/* ============================================
   TIP SYSTEM — UI bits
   ============================================ */
.generous-pill {
  display: inline-block;
  background: linear-gradient(135deg, #FFD64A, var(--orange));
  color: #5A2C00;
  font-size: 10px; font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.up-cta-row { display: flex; gap: 8px; padding: 0 16px 16px; }
.up-cta-row .up-cta { flex: 1; }
.up-tip-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--orange);
  color: white;
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 16px;
  transition: background var(--motion), transform var(--motion);
  flex-shrink: 0;
}
.up-tip-btn:hover { background: var(--orange-h); transform: translateY(-1px); }
.up-tip-btn:active { transform: scale(0.97); }

.tip-modal .modal-body { padding-bottom: 20px; }
.tip-receiver {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(16,185,129,0.10), transparent);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: var(--r-md);
  margin: 10px 0 12px;
}
.tip-recv-av { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.tip-recv-av-fallback { background: var(--g-300); color: var(--g-700); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.tip-recv-name { font-weight: 700; font-size: 15px; }
.tip-recv-sub  { font-size: 12px; color: var(--g-600); }
.tip-sub       { font-size: 12px; color: var(--g-600); margin: 6px 2px 10px; }
.tip-empty     { padding: 24px 0; text-align: center; color: var(--g-500); font-size: 13px; }
.tip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  max-height: 320px; overflow-y: auto;
  padding: 4px;
}
.tip-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px;
  background: var(--g-100);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), transform var(--motion);
}
.tip-cell:hover { background: var(--g-150); }
.tip-cell.is-picked {
  border-color: var(--orange);
  background: rgba(16,185,129,0.08);
  transform: translateY(-1px);
}
.tip-cell-name { font-size: 10.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-800); }
.tip-cell-val  { font-size: 10px; color: var(--orange); font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
.tip-cell-val .gem { width: 9px; height: 9px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }
.tip-note {
  width: 100%; box-sizing: border-box;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  background: var(--g-100);
  font-size: 13px;
  outline: none;
  transition: border-color var(--motion), background var(--motion);
}
.tip-note:focus { border-color: var(--orange); background: var(--white); }
.tip-err { color: var(--red); font-size: 12px; margin-top: 8px; }

/* "Are you sure?" overlay inside TipModal */
.tip-confirm {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.97);
  /* backdrop-filter removed for perf — solid bg is sufficient */
  display: grid; place-items: center;
  border-radius: inherit;
  z-index: 5;
  animation: tip-confirm-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tip-confirm-in { from { opacity: 0; } to { opacity: 1; } }
.tip-confirm-box {
  width: 90%; max-width: 380px;
  background: white;
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
  padding: 22px 22px 16px;
  text-align: center;
}
.tip-confirm-title { font-size: 17px; font-weight: 800; color: var(--g-900); margin-bottom: 6px; letter-spacing: -0.01em; }
.tip-confirm-msg { font-size: 13px; color: var(--g-700); line-height: 1.5; margin-bottom: 16px; }
.tip-confirm-msg b { color: var(--orange); }
.tip-confirm-preview {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(16,185,129,0.10), transparent);
  border: 1px solid rgba(16,185,129,0.32);
  border-radius: var(--r-md);
  margin-bottom: 18px;
  text-align: left;
}
.tip-confirm-actions { display: flex; gap: 10px; }
.tip-confirm-actions > button {
  flex: 1;
  padding: 11px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  border: 0;
  transition: background var(--motion), transform var(--motion);
}
.tip-confirm-cancel { background: var(--g-150); color: var(--g-800); }
.tip-confirm-cancel:hover { background: var(--g-200); }
.tip-confirm-send { background: var(--orange); color: white; }
.tip-confirm-send:hover { background: var(--orange-h); }
.tip-confirm-send:disabled, .tip-confirm-cancel:disabled { opacity: 0.6; cursor: not-allowed; }
/* TipModal needs to be relative so the confirm overlay positions correctly */
.tip-modal { position: relative; }

/* ============================================
   TIP RECEIVED — centered bouncing card + confetti
   ============================================ */
.tip-anim-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(circle at center, rgba(16,185,129,0.18), rgba(0,0,0,0.55) 70%);
  cursor: pointer;
  animation: tip-anim-bg-in 0.25s ease-out, tip-anim-bg-out 0.4s ease-in 2.2s forwards;
}
@keyframes tip-anim-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tip-anim-bg-out { from { opacity: 1; } to { opacity: 0; } }
.tip-anim-stage { position: relative; }
.tip-anim-card {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 30px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,0.4), 0 0 0 6px rgba(255,255,255,0.15);
  animation: tip-anim-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative; z-index: 2;
}
@keyframes tip-anim-bounce {
  0%   { opacity: 0; transform: scale(0.3) translateY(40px); }
  60%  { transform: scale(1.08) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.tip-anim-img {
  width: 96px; height: 96px;
  object-fit: contain;
  animation: tip-anim-spin 1.4s ease-in-out infinite alternate;
}
@keyframes tip-anim-spin {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}
.tip-anim-text { display: flex; flex-direction: column; gap: 4px; }
.tip-anim-from { font-size: 13px; font-weight: 700; color: var(--g-600); letter-spacing: 0.02em; }
.tip-anim-item { font-size: 22px; font-weight: 900; color: var(--g-900); letter-spacing: -0.02em; }

.tip-anim-chip {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 14px;
  border-radius: 2px;
  transform-origin: 50% 50%;
  animation: tip-anim-burst 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0ms) forwards;
  opacity: 0;
}
@keyframes tip-anim-burst {
  0%   { opacity: 1; transform: rotate(var(--ang)) translateX(0)   rotate(0); }
  100% { opacity: 0; transform: rotate(var(--ang)) translateX(220px) rotate(540deg); }
}
@media (max-width: 540px) {
  .tip-anim-card { padding: 18px 22px; gap: 14px; }
  .tip-anim-img { width: 76px; height: 76px; }
  .tip-anim-item { font-size: 18px; }
}

/* ============================================
   PROFILE BANNER PRESETS — 8 image-based banners, level-gated
   1-2 free, 3=lv5, 4=lv15, 5=lv30, 6=lv50, 7=lv75, 8=lv100
   Drop banner1.webp .. banner8.webp into assets/images/
   ============================================ */
.prof-header.prof-banner-1 { background: url('../images/banner1.webp') center/cover, linear-gradient(135deg, #FE9920, #FFD64A); }
.prof-header.prof-banner-2 { background: url('../images/banner2.webp') center/cover, linear-gradient(135deg, #1E63F0, #5C9CFF); }
.prof-header.prof-banner-3 { background: url('../images/banner3.webp') center/cover, linear-gradient(135deg, #047857, #34D9A0); }
.prof-header.prof-banner-4 { background: url('../images/banner4.webp') center/cover, linear-gradient(135deg, #C2185B, #FF3D9A); }
.prof-header.prof-banner-5 { background: url('../images/banner5.webp') center/cover, linear-gradient(135deg, #7C3AED, #FF6F00); }
.prof-header.prof-banner-6 { background: url('../images/banner6.webp') center/cover, linear-gradient(135deg, #0F172A, #6D28D9); }
.prof-header.prof-banner-7 { background: url('../images/banner7.webp') center/cover, linear-gradient(135deg, #C2410C, #FBBF24); }
.prof-header.prof-banner-8 { background: url('../images/banner8.webp') center/cover, linear-gradient(135deg, #0EA5E9, #BAE6FD); }
.prof-header[class*="prof-banner-"] .prof-av-wrap {
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.prof-header[class*="prof-banner-"] .prof-level-badge {
  border-color: rgba(255,255,255,0.95);
}
/* Subtle dark gradient overlay so the white text stays readable on any image */
.prof-header[class*="prof-banner-"]::before {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0.18), rgba(0,0,0,0.32));
  background-size: cover;
  opacity: 1;
}

/* ============================================
   INVENTORY SHOWCASE on profile
   ============================================ */
.showcase-section {
  margin-bottom: 20px;
}
.showcase-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.showcase-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--g-900); }
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.showcase-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  background: var(--g-100);
  border-radius: var(--r-md);
  border: 1px solid var(--g-200);
}
.showcase-cell-name { font-size: 12px; font-weight: 600; color: var(--g-800); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-cell-val { font-size: 11px; color: var(--orange); font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
.showcase-cell-val .gem { width: 9px; height: 9px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }

/* ============================================
   WISHLIST chips
   ============================================ */
.wishlist-section { margin-bottom: 20px; }
.wishlist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wishlist-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 999px;
  font-size: 12px;
  color: var(--g-800);
  font-weight: 600;
}
.wishlist-chip i { color: var(--orange); font-size: 10px; }
.wishlist-empty { font-size: 13px; color: var(--g-500); padding: 12px; background: var(--g-100); border-radius: var(--r-md); border: 1px dashed var(--g-300); }
.wl-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: var(--orange);
  color: white;
  border-radius: var(--r-md);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background var(--motion);
}
.wl-add-btn:hover { background: var(--orange-h); }
.wl-add-btn i { font-size: 10px; }
.wl-add-box { position: relative; margin-bottom: 10px; }
.wl-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 14px;
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  background: var(--g-100);
  font-size: 13px;
  outline: none;
  transition: border-color var(--motion), background var(--motion);
}
.wl-input:focus { border-color: var(--orange); background: var(--white); }
.wl-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: white;
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18);
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
}
.wl-suggest-item {
  display: block; width: 100%;
  padding: 8px 12px;
  background: none; border: 0;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion);
}
.wl-suggest-item:hover { background: var(--g-100); }
.wl-remove {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  font-size: 9px;
  cursor: pointer;
  transition: background var(--motion);
  border: 0;
}
.wl-remove:hover { background: rgba(239,68,68,0.8); color: white; }
.wl-err { color: var(--red); font-size: 12px; margin-top: 6px; }

/* ============================================
   WISHLIST — image picker + tile chips
   ============================================ */
.wl-picker {
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 12px;
}
.wl-picker-search {
  display: flex; align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border: 1px solid var(--g-200);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.wl-picker-search i { color: var(--g-500); font-size: 13px; }
.wl-picker-search .wl-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 13px;
  outline: none;
}
.wl-clear {
  background: none; border: 0;
  padding: 0; width: 20px; height: 20px;
  border-radius: 999px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--g-500);
}
.wl-clear:hover { background: var(--g-200); }
.wl-picker-empty { padding: 20px 0; text-align: center; color: var(--g-500); font-size: 13px; }
.wl-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding: 2px;
}
.wl-pick-cell {
  background: white;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--motion), transform var(--motion), background var(--motion);
}
.wl-pick-cell:hover:not(:disabled) {
  border-color: var(--orange);
  background: rgba(16,185,129,0.05);
  transform: translateY(-1px);
}
.wl-pick-cell:disabled { opacity: 0.4; cursor: not-allowed; }
.wl-pick-img { width: 48px; height: 48px; object-fit: contain; display: block; }
.wl-pick-name { font-size: 11px; font-weight: 600; color: var(--g-800); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.wl-pick-val { font-size: 10px; color: var(--orange); font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
.wl-pick-val .gem { width: 9px; height: 9px; background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); }

/* Wishlist tiles (instead of chips) */
.wishlist-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.wl-tile {
  position: relative;
  background: var(--g-100);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--r-md);
  padding: 12px 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.wl-tile-img { width: 56px; height: 56px; object-fit: contain; }
.wl-tile-name { font-size: 11px; font-weight: 600; color: var(--g-800); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
/* Wishlist tile close button — matches the site's `.modal-close` / `.bc-dismiss`
   style: rounded square, subtle dark bg, hover lifts color. Consistent with
   every other × button across the site. */
.wl-tile-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.9);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  transition: background var(--motion), color var(--motion), transform var(--motion);
}
.wl-tile-remove > i { display: block; line-height: 1; }
.wl-tile-remove:hover {
  background: rgba(0,0,0,0.65);
  color: #fff;
  transform: scale(1.05);
}

/* ============================================================================
   GIVEAWAY STRIP — sits above chat. Players host item giveaways, others
   click to enter. Compact, carousel when multiple are live.
   ============================================================================ */
.giveaway-strip {
  padding: 10px 12px 12px;
  background: var(--g-50);
  /* No bottom border — visual separation comes from the bg color shift alone */
  flex-shrink: 0;
}
.giveaway-empty {
  padding: 8px 12px;
  background: var(--g-50);
  border-bottom: 1px solid var(--g-200);
}
.giveaway-host-mini {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1.5px dashed var(--g-300);
  color: var(--g-700);
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color var(--motion), color var(--motion), background var(--motion);
}
.giveaway-host-mini:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(16,185,129,0.06);
}
.giveaway-card {
  background: var(--white);
  border-radius: 12px;
  padding: 10px;
  /* No neon glow — soft neutral shadow only */
  box-shadow: 0 2px 8px -3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.05);
}
.giveaway-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.giveaway-creator { display: flex; align-items: center; gap: 8px; min-width: 0; }
.giveaway-av {
  width: 26px; height: 26px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.giveaway-av-fallback {
  background: linear-gradient(135deg, var(--orange), #FF6B35);
  color: white;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800;
}
.giveaway-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--orange);
  text-transform: uppercase;
  line-height: 1.1;
}
.giveaway-creator-name {
  font-size: 12px; font-weight: 700;
  color: var(--g-900);
  line-height: 1.2;
  max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.giveaway-host-btn {
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 0;
  background: rgba(16,185,129,0.12);
  color: var(--orange);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: background var(--motion);
}
.giveaway-host-btn:hover { background: rgba(16,185,129,0.22); }
.giveaway-body { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.giveaway-item {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--g-100);
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.giveaway-item { position: relative; }
.giveaway-item-img { width: 80%; height: 80%; object-fit: contain; transition: opacity 0.2s; }
/* "+N" badge in the corner of the item preview when bundle has 2+ items */
.giveaway-bundle-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--orange);
  color: white;
  font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--white);
  z-index: 2;
}
[data-theme="dark"] .giveaway-bundle-badge { box-shadow: 0 0 0 2px var(--g-100); }
.gv-bundle-tag {
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(16,185,129,0.15);
  color: var(--orange);
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
}

/* GiveawayCreatorModal — selected-items summary */
.gv-pick-summary {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--g-100);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--g-800);
}
.gv-pick-total {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px;
  color: var(--orange);
}
.gv-pick-total .gem {
  width: 12px; height: 12px;
  background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
  display: inline-block;
}
[data-theme="dark"] .gv-pick-summary { background: var(--g-150); }
.giveaway-info { flex: 1; min-width: 0; }
.giveaway-item-name { font-size: 12px; font-weight: 700; color: var(--g-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.giveaway-value {
  font-size: 14px; font-weight: 800;
  color: var(--orange);
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.giveaway-value .gem {
  width: 11px; height: 11px;
  background: linear-gradient(135deg, #FFE89A, #FE9920 60%, #B7560B);
  clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
  display: inline-block;
}
.giveaway-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.giveaway-meta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  background: var(--g-100);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  color: var(--g-700);
}
.giveaway-meta-pill i { font-size: 9px; }
.giveaway-foot { margin-top: 4px; }
.giveaway-join-btn {
  width: 100%;
  padding: 9px 14px;
  background: var(--orange);
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.02em;
  /* No neon glow */
  transition: background var(--motion), transform 0.05s;
}
.giveaway-join-btn:hover { background: #FFAA3A; }
.giveaway-join-btn:active { transform: translateY(1px); }
.giveaway-entered {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(16,185,129,0.12);
  color: #047857;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  width: 100%;
}
.giveaway-mine {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  background: var(--g-100);
  color: var(--g-700);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  width: 100%;
}
.giveaway-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.giveaway-arrow {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--g-600);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 10px;
  transition: background var(--motion);
}
.giveaway-arrow:hover { background: var(--g-200); color: var(--g-900); }
.giveaway-dots { display: flex; gap: 4px; }
.giveaway-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--g-300);
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}
.giveaway-dot.is-active { background: var(--orange); transform: scale(1.2); }

[data-theme="dark"] .giveaway-strip {
  background: var(--g-50);
  border-bottom-color: transparent;
}
[data-theme="dark"] .giveaway-card {
  background: var(--g-100);
  box-shadow: 0 2px 8px -3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.25);
}
[data-theme="dark"] .giveaway-empty { background: var(--g-50); }
[data-theme="dark"] .giveaway-meta-pill,
[data-theme="dark"] .giveaway-item,
[data-theme="dark"] .giveaway-mine { background: var(--g-150); }

/* ============================================================================
   FlipModal — brand-only head (site logo + name centered) instead of the
   old "Flipping the coin" / "Better luck next time" text label. The actual
   result/spin status moves into the result block below the coin.
   ============================================================================ */
.fm-brand-head {
  justify-content: center !important;
  position: relative;
  padding: 14px 18px;
}
.fm-brand {
  display: inline-flex;
  align-items: center;
  /* Same unselectable / undraggable treatment as the header logo */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.fm-brand--full {
  /* Old SVG-logo overflow margin removed — the brandmark is text-height
     now, doesn't need negative margin to compensate for an oversized image. */
  margin: 0;
}
.fm-brand-logo {
  width: auto;
  height: 84px;
  max-width: 280px;
  object-fit: contain;
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  filter: none;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 720px) {
  .fm-brand--full { margin: -12px 0; }
  .fm-brand-logo { height: 66px; max-width: 220px; }
}
.fm-brand-head .modal-close {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
}

/* Show Roblox avatar images in the FlipModal player chips (was hardcoded
   to a gradient initials block). Treats the `.av` element like an avatar
   container — img fills it cleanly. */
.flip-player .av {
  position: relative;
  overflow: hidden;
}
.flip-player .av.has-img {
  background: var(--g-100) !important;
}
.flip-player .av .fc-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================================
   FlipModal — width matched to DiceResolvedModal (720px) so both game
   modals share the same footprint. The old 1100px layout felt too wide
   compared to the dice modal and required scrolling on smaller laptops.
   ============================================================================ */
.flip-modal-wide {
  width: 880px !important;             /* bumped 720 → 880 for the 2-column items layout */
  max-width: calc(100vw - 32px) !important;
  position: relative;
  overflow: hidden; /* contain the confetti rain */
}
/* Crown on the coinflip winner — pinned on the .flip-player (NOT .av) so
   the parent's `overflow: hidden` doesn't clip it. The .av is overflow:
   hidden to round the avatar img; the crown needs to escape that.
   Z-index 10 keeps it above the winner-pulse box-shadow ring. */
.flip-player { position: relative; }
.flip-player.winner::before {
  content: '\f521'; /* fa-crown */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: -8px; left: -8px;
  background: linear-gradient(135deg, #FFD64A, #FE9920);
  color: white;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 0 2px rgba(255,255,255,0.95);
  transform: rotate(-14deg);
  z-index: 10;
  pointer-events: none;
}
/* Right-side player → crown on top-right corner */
.flip-player.r.winner::before { left: auto; right: -8px; transform: rotate(14deg); }
/* ============================================
   INLINE COIN — lives inside .dm2-vs-block between the two players.
   Replaces the old big coin-arena that sat below the players. Sized
   to fit the VS slot (~88px) so it doesn't dwarf the player avatars.
   No drop-shadow per user request — cleaner look.
   ============================================ */
.dm2-vs-block--coin {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  min-width: 110px;     /* reserve space so players don't shift mid-spin */
  min-height: 110px;
}
.fm-inline-countdown {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  font-size: 44px; font-weight: 900;
  color: var(--orange);
  letter-spacing: -0.02em;
  animation: fm-countdown-pulse 0.6s ease-out;
}
@keyframes fm-countdown-pulse {
  0%   { transform: scale(1.4); opacity: 0; }
  40%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* ============================================
   BLOX COIN — 3D flip using our heads.webp / tails.webp faces.
   NO drop-shadow, NO inset highlights, NO border — clean face only,
   per user request. The coin ZOOMS IN dramatically during the spin
   (close-up effect) and shrinks back to its resting size right before
   the result is revealed.
   ============================================ */
.blox-coin {
  position: relative;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  display: block;
  /* z-index so the zoomed-in coin can visually overlap surrounding UI
     without being clipped by stacking quirks. */
  z-index: 5;
}
.blox-coin-face {
  position: absolute; inset: 0;
  border-radius: 999px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  /* No shadows, no glow — clean coin face only. */
}
.blox-coin-face--h { background-image: url('../images/heads.webp'); }
.blox-coin-face--t { background-image: url('../images/tails.webp'); transform: rotateY(180deg); }

/* SMOOTH SLOW SPIN — no zoom, no vertical movement. Just a long
   rotateY with cubic-bezier ease-out so the coin spins fast at the
   start and decelerates naturally toward the result. 4.8s total —
   gives the eye time to track the flip without feeling rushed.
   Heads ends at 2880° (8 full turns), tails at 2700° (7.5 turns). */
/* 2.75s spin so the coin lands exactly as the synchronized 3-second
   countdown hits 0 (modal locks `is-landed` at 2750ms). Shortened from
   4.8s when the whole flip was unified to a 3-second server-anchored
   reveal — keeps the modal in lockstep with the spectator cards. */
.blox-coin.spin-h { animation: blox-coin-spin-h 2.75s cubic-bezier(0.12, 0.78, 0.22, 1) forwards; }
.blox-coin.spin-t { animation: blox-coin-spin-t 2.75s cubic-bezier(0.12, 0.78, 0.22, 1) forwards; }
@keyframes blox-coin-spin-h {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(2880deg); }
}
@keyframes blox-coin-spin-t {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(2700deg); }
}
/* Landed — kill the animation so nothing can restart it on re-render.
   Transform locked on the final rotation. The 280ms transition smooths
   the snap when we land mid-animation (View modal lands at 3.4s while
   the spin keyframe runs 4.8s — without the transition the coin would
   jump from ~2500deg straight to 2880deg in one frame, visible jolt). */
.blox-coin.is-landed { animation: none !important; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.blox-coin.is-landed.spin-h { transform: rotateY(2880deg); }
.blox-coin.is-landed.spin-t { transform: rotateY(2700deg); }

/* LOOPING SPIN — used when the flip is "rolling" but no result is
   committed yet. Just rotates forever (or until React unmounts).
   Same speed as the heaviest part of the deceleration spin, so the
   transition into the actual landing animation feels seamless. */
.blox-coin--looping { animation: blox-coin-loop 1.2s linear infinite; }
@keyframes blox-coin-loop {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
/* Dark mode: dim the coin face image (heads.webp is brand-emerald, which
   reads as neon against the dark modal). brightness+saturate tones it
   down so it feels like part of the dark surface, not a glow source. */
[data-theme="dark"] .blox-coin .blox-coin-face {
  filter: brightness(0.85) saturate(0.85);
}

/* (Old CSS coin kept below as a reference / for any place still using it) */
.fm-inline-coin {
  width: 88px; height: 88px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  filter: none !important;   /* explicitly kill any drop-shadow */
}
.fm-inline-coin .cf {
  position: absolute; inset: 0;
  border-radius: 999px;
  backface-visibility: hidden;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.fm-inline-coin .cf.h { background-image: url('../images/heads.webp'); }
.fm-inline-coin .cf.t { background-image: url('../images/tails.webp'); transform: rotateY(180deg); }
/* SUSPENSE SPIN — 3.5s with a dramatic deceleration arc:
     0-15%   : explosive launch (1 rotation + lift)
     15-55%  : steady fast spin (~6 rotations)
     55-85%  : DRAMATIC slowdown (suspense — the eye starts seeing the
               face flicker into focus)
     85-95%  : land + small bounce
     95-100% : settle
   Both heads (2880° = 8 full turns) and tails (2700° = 7.5 turns) keep
   their final rotateY in EVERY keyframe past the spin so adding the
   `bounce` class can't accidentally reset rotateY back to 0° (that was
   the bug where the coin "flipped to tails then jumped to heads").
   Linear timing-function — the curve is baked into the keyframes. */
.fm-inline-coin.spin-h { animation: fm-inline-spin-h 3.5s linear forwards; }
.fm-inline-coin.spin-t { animation: fm-inline-spin-t 3.5s linear forwards; }
@keyframes fm-inline-spin-h {
  0%   { transform: translateY(0)     rotateY(0deg)    scale(0.88); }
  15%  { transform: translateY(-26px) rotateY(540deg)  scale(1.06); }
  35%  { transform: translateY(-22px) rotateY(1620deg) scale(1.04); }   /* mid-air, fast */
  55%  { transform: translateY(-18px) rotateY(2340deg) scale(1.04); }
  70%  { transform: translateY(-10px) rotateY(2700deg) scale(1.02); }   /* slowing — suspense */
  82%  { transform: translateY(-2px)  rotateY(2820deg) scale(1.00); }
  90%  { transform: translateY(0)     rotateY(2880deg) scale(1.16); }   /* land + pop */
  95%  { transform: translateY(0)     rotateY(2880deg) scale(0.94); }   /* squash */
  100% { transform: translateY(0)     rotateY(2880deg) scale(1); }
}
@keyframes fm-inline-spin-t {
  0%   { transform: translateY(0)     rotateY(0deg)    scale(0.88); }
  15%  { transform: translateY(-26px) rotateY(540deg)  scale(1.06); }
  35%  { transform: translateY(-22px) rotateY(1440deg) scale(1.04); }
  55%  { transform: translateY(-18px) rotateY(2160deg) scale(1.04); }
  70%  { transform: translateY(-10px) rotateY(2520deg) scale(1.02); }
  82%  { transform: translateY(-2px)  rotateY(2640deg) scale(1.00); }
  90%  { transform: translateY(0)     rotateY(2700deg) scale(1.16); }
  95%  { transform: translateY(0)     rotateY(2700deg) scale(0.94); }
  100% { transform: translateY(0)     rotateY(2700deg) scale(1); }
}
/* No separate `bounce` keyframe — the bounce is baked into the spin
   (90-100%) so the rotateY never resets. The .bounce class is kept only
   as a marker for any future hook; visually it's a no-op now. */

/* .flip-stage acts as the FlipModal body. To match FlipDetailModal's
   .dm2-body width and behaviour 1:1, override the flex-column layout
   with plain block flow (same as dm2-body). The coin-arena re-centers
   itself via its own margin auto. */
.flip-modal-wide .flip-stage {
  padding: 18px 22px 22px;
  display: block !important;     /* override the flex-column from base .flip-stage */
  align-items: initial !important;
}
/* Inner blocks: full-width matching the view modal. NOTE: do NOT apply
   `display: grid` to .dm2-eyebrow — that broke the inline icon+text
   layout (icon stacked above the text instead of next to it). Eyebrow
   stays its native flex/inline. Other blocks get explicit grid. */
.flip-modal-wide .flip-stage > .dm2-eyebrow { width: 100%; }
.flip-modal-wide .flip-stage > .dm2-players,
.flip-modal-wide .flip-stage > .dm2-hash,
.flip-modal-wide .flip-stage > .dm2-stakes,
.flip-modal-wide .flip-stage > .dm2-items-cols {
  width: 100%;
  display: grid;
}
/* dm2-players needs its grid columns preserved (1fr auto 1fr) */
.flip-modal-wide .flip-stage > .dm2-players { grid-template-columns: 1fr auto 1fr; }
.flip-modal-wide .flip-stage > .dm2-stakes  { grid-template-columns: 1fr 1fr; }
.flip-modal-wide .flip-stage > .dm2-items-cols { grid-template-columns: 1fr 1fr; }
/* Hash stays inline-flex so it can center; force it to be a centered block */
.flip-modal-wide .flip-stage > .dm2-hash {
  display: inline-flex; margin-left: auto; margin-right: auto;
}
/* Coin-arena re-centers itself */
.flip-modal-wide .flip-stage > .coin-arena { margin: 14px auto; display: block; }
/* flip-result + ShareWinButtons */
.flip-modal-wide .flip-stage > .flip-result { width: 100%; display: block; }
.flip-modal-wide .flip-players { gap: 28px; }
.flip-modal-wide .flip-player .av {
  width: 72px; height: 72px;
  font-size: 22px;
}
.flip-modal-wide .flip-player .nm { font-size: 17px; }
.flip-modal-wide .flip-pot {
  padding: 16px 22px;
}
.flip-modal-wide .flip-pot .val { font-size: 28px; }
.flip-modal-wide .coin-arena { min-height: 220px; }

/* On smaller screens scale gracefully */
@media (max-width: 1100px) {
  .flip-modal-wide { width: calc(100vw - 32px) !important; }
}
@media (max-width: 720px) {
  .flip-modal-wide .flip-stage { padding: 18px; }
  .flip-modal-wide .flip-players { gap: 12px; }
  .flip-modal-wide .flip-player .av { width: 48px; height: 48px; font-size: 15px; }
}

/* Winner-only particle layer rendered INSIDE the modal. Pointer-events:none
   so the user can still interact with the result block underneath. */
.fm-winfx {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.fm-winfx-confetti {
  position: absolute; inset: 0;
  overflow: hidden;
}
.fm-winfx-confetti .bw-confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation-name: bw-rain-fall;
  animation-timing-function: cubic-bezier(0.4, 0.7, 0.7, 1);
  animation-fill-mode: forwards;
}
.fm-winfx-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
}
.fm-winfx-coins {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
}
/* Winner modal — subtle golden inner glow background */
/* Win celebration glow REMOVED per user — no neon/colored shine on win.
   The modal keeps its normal background; the winner is signalled by the
   crown + winner/loser pill tints only. */
.modal.is-winner-celebrating { background: var(--white); }
[data-theme="dark"] .modal.is-winner-celebrating { background: #15171c; }

/* ============================================================================
   MEGA WIN — cinematic celebration for 100+ gem wins. Big floating value,
   light beams, gold sparks, screen flash, subtle modal shake.
   ============================================================================ */
.modal.is-mega-winner {
  animation: mega-modal-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  background: var(--white);
}
[data-theme="dark"] .modal.is-mega-winner { background: #15171c; }
@keyframes mega-modal-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%      { transform: translate3d(-3px, 1px, 0); }
  20%      { transform: translate3d(4px, -2px, 0); }
  30%      { transform: translate3d(-4px, 3px, 0); }
  40%      { transform: translate3d(3px, -1px, 0); }
  50%      { transform: translate3d(-2px, 2px, 0); }
  60%      { transform: translate3d(2px, -1px, 0); }
  70%      { transform: translate3d(-1px, 1px, 0); }
}

.fm-mega {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* z-index: 0 → renders BEHIND .flip-stage (which has z-index auto inside
     the modal's stacking context). The coin, players, and result text all
     stay sharp and readable on top; the light beams + sparks + rays
     animate in the background where they belong. */
  z-index: 0;
}
.flip-modal-wide .flip-stage { position: relative; z-index: 1; }

/* Mandala (rotating gold rays) removed per user request — too much
   background motion. We keep only the subtle radial pulse + floating
   items for the mega-win celebration. */

/* Won items floating UP from the pot center, fanning outward */
.fm-mega-items {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  z-index: 1;
}
.fm-mega-item {
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: mega-item-float 2.6s cubic-bezier(0.22, 0.7, 0.30, 1) forwards;
  pointer-events: none;
}
.fm-mega-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18)) drop-shadow(0 0 8px rgba(0,0,0,0.18));
}
.fm-mega-item-glow {
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,214,74,0.55) 0%, rgba(16,185,129,0.18) 50%, transparent 75%);
  z-index: -1;
}
@keyframes mega-item-float {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(0, 60px) scale(0.4) rotate(0deg); }
  15%  { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1.1) rotate(0deg); }
  60%  { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) scale(1) rotate(calc(var(--rot) * 0.7)); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.7) rotate(var(--rot)); }
}

/* 2. Pulsing radial gradient — subtle heartbeat behind everything. Tone
   way down from before so the orange doesn't drown the content. */
.fm-mega-bg-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 700px; height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.05) 45%, transparent 75%);
  animation: mega-pulse 2.8s ease-in-out infinite;
  border-radius: 999px;
}
@keyframes mega-pulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.75; transform: translate(-50%, -50%) scale(1.10); }
}

/* (legacy .fm-mega-beams / .fm-mega-sparks rules removed — the new mandala
    + floating items design replaces those. The petal animation already
    handles the rotating-light effect with less visual noise.) */

/* "MEGA WIN" banner — sits at the TOP of the modal (just below the brand
   head), out of the way of the players row and the coin. The actual win
   value lives in the existing result block below the coin; we don't
   duplicate it on top of the players. */
.fm-mega-banner {
  position: absolute;
  top: 64px;             /* below the brand head */
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFE89A 0%, #FFD64A 40%, var(--orange) 100%);
  color: #5C2C00;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.18);
  animation: mega-banner-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
  white-space: nowrap;
}
@keyframes mega-banner-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.85); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1.05); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}
[data-theme="dark"] .fm-mega-banner {
  color: #2A1500;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.18);
}

/* Confetti rain shared with the normal-win variant */
.fm-mega .fm-winfx-confetti { position: absolute; inset: 0; overflow: hidden; }
.fm-mega .bw-confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation-name: bw-rain-fall;
  animation-timing-function: cubic-bezier(0.4, 0.7, 0.7, 1);
  animation-fill-mode: forwards;
}

/* "Something else" report — free-text textarea + char counter */
.report-other-input {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--g-200);
  background: var(--white);
  color: var(--g-900);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 96px;
  max-height: 220px;
  outline: none;
  transition: border-color var(--motion), background var(--motion);
}
.report-other-input:focus {
  border-color: var(--orange);
}
.report-other-input::placeholder { color: var(--g-500); }
.report-other-count {
  font-size: 11px;
  color: var(--g-500);
  text-align: right;
  margin-top: 4px;
}
.report-suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.report-suggest-chip {
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--g-200);
  background: var(--g-100);
  color: var(--g-800);
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.report-suggest-chip:hover {
  background: rgba(16,185,129,0.08);
  border-color: var(--orange);
  color: var(--orange);
}
[data-theme="dark"] .report-suggest-chip {
  background: var(--g-150);
  border-color: transparent;
  color: var(--g-800);
}
[data-theme="dark"] .report-suggest-chip:hover {
  background: rgba(255,255,255,0.04);
  color: #FFC078;
}
.report-btn-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
[data-theme="dark"] .report-other-input {
  background: var(--g-100);
  border-color: transparent;
}
[data-theme="dark"] .report-other-input:focus {
  border-color: var(--orange);
  background: var(--g-150);
}

/* (Open-state list alignment is now handled by the unified flex rule at
   line ~4094. Old overrides removed because they were fighting the new
   layout with margin-left:auto / padding-left:32px and pushing VS into
   the wrong row.) */
.flip-grid:not(.is-card) .flip-card.open .fc-actions > * {
  min-width: 76px;
  height: 36px;
  align-items: center;
}

/* ============================================================================
   3-SECOND COUNTDOWN RING on flip cards
   Shown for the first 3 seconds after a flip transitions out of OPEN state,
   so EVERY lobby viewer sees the battle starting without needing to click
   View. After 3s the card naturally shows the resolved state.
   ============================================================================ */
.fc-countdown {
  position: relative;
  width: 46px; height: 46px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 6;
  display: grid; place-items: center;
  flex: 0 0 auto;
  /* In LIST view: slot between items (order 50) and value (order 60)
     so the layout reads [creator] VS [opponent] ─ items ─ [coin] ─ [value] ─ [actions].
     CARD view overrides below. */
  order: 55;
  /* Extra right-margin nudges the coin visually toward the items strip
     (away from the value column) per user request. */
  margin-right: 24px;
}
/* Placeholder coin slot for OPEN flips — same footprint, no visual.
   Ensures every row's items strip lines up to the same X position. */
.fc-countdown--placeholder {
  visibility: hidden;
  pointer-events: none;
}
/* SVG-based progress ring — smooth GPU-animated stroke-dashoffset.
   Old conic-gradient + JS-polled inline style was choppy because each tick
   triggered a React re-render + a CSS background recalculation. */
.fc-cd-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* Rotate so the stroke starts at 12 o'clock (top) instead of 3 o'clock. */
  transform: rotate(-90deg);
}
.fc-cd-track {
  fill: none;
  stroke: rgba(0,0,0,0.08);
  stroke-width: 3;
}
.fc-cd-stroke {
  fill: none;
  stroke: #10B981;
  stroke-width: 3;
  stroke-linecap: round;
  /* circumference of r=17: 2π·17 ≈ 106.814 */
  stroke-dasharray: 106.814;
  stroke-dashoffset: 106.814;
  animation: fc-cd-fill 3s linear forwards;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fc-cd-fill {
  to { stroke-dashoffset: 0; }
}
[data-theme="dark"] .fc-cd-track { stroke: rgba(255,255,255,0.10); }

.fc-countdown-num {
  position: relative; z-index: 1;
  font-size: 17px; font-weight: 800;
  color: var(--g-900);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fc-countdown:hover .fc-countdown-num { color: var(--orange); }
/* Participant version — orange stroke to flag YOUR battle */
.fc-countdown.is-participant .fc-cd-stroke {
  stroke: var(--orange);
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.18));
}
.fc-countdown.is-participant .fc-countdown-num { color: var(--orange); }

/* Resolved-state coin face — when the 3s countdown ends, the same slot
   morphs into the result coin (heads/tails) so the outcome appears
   exactly where the user was already watching. */
.fc-countdown.is-result {
  /* Soft pop-in so the coin reveal feels deliberate, not a swap. */
  animation: fc-result-pop 0.28s ease-out both;
}
.fc-countdown-result {
  position: absolute; inset: 0;
  border-radius: 999px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* No border/ring — coin face speaks for itself. */
}
.fc-countdown.is-result.heads .fc-countdown-result { background-image: url('../images/heads.webp'); }
.fc-countdown.is-result.tails .fc-countdown-result { background-image: url('../images/tails.webp'); }
@keyframes fc-result-pop {
  /* List view: countdown is position:relative inside the flex flow, so no
     centering translate is needed — just scale + fade. */
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.flip-grid.is-card .fc-countdown.is-result {
  animation: fc-result-pop-card 0.28s ease-out both;
}
@keyframes fc-result-pop-card {
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}

/* On CARD view (grid layout) move the ring to top-center where the VS would be.
   Card view places it absolutely against the card so it floats above the
   stacked content; list view keeps the inline (flex-flow) placement above. */
.flip-grid.is-card .fc-countdown {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  order: 0;       /* irrelevant when absolute, reset for clarity */
  margin-right: 0; /* list-view's left-nudge doesn't apply on card view */
}

/* ============================================================================
   LEGACY rolling banner — kept for backwards compatibility but no longer
   rendered. (FlipCountdown component replaced it.)
   ============================================================================ */
.fc-rolling-banner {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 10px;
  background: linear-gradient(135deg, var(--orange), #E07A0F);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 4px 14px -2px rgba(0,0,0,0.18), 0 0 0 3px rgba(0,0,0,0.18);
  animation: fc-roll-pulse 1.4s ease-in-out infinite;
}
.fc-rolling-banner:hover {
  background: linear-gradient(135deg, #FFAA3A, var(--orange));
  transform: translateX(-50%) translateY(-1px);
}
.fc-rolling-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: fc-roll-dot 1.0s ease-out infinite;
}
.fc-rolling-text { line-height: 1; }
/* Tiny spinning ring at the right edge — gives a sense of motion without
   needing JS. Pure CSS conic-gradient with rotation. */
.fc-rolling-ring {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent 0deg, #fff 270deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
          mask: radial-gradient(circle, transparent 60%, #000 62%);
  animation: fc-roll-ring 1.0s linear infinite;
}

/* Participant rolling — orange ring around the whole card removed per
   user request. The centered ROLLING pill at the top of the card and
   the coin animation already signal the user's involvement; the bright
   border was visual noise. */
.flip-card.is-mine-rolling { box-shadow: var(--shadow-card); }
.flip-card.rolling { position: relative; }

@keyframes fc-roll-pulse {
  0%, 100% { box-shadow: 0 4px 14px -2px rgba(0,0,0,0.18), 0 0 0 3px rgba(0,0,0,0.18); }
  50%      { box-shadow: 0 4px 18px -2px rgba(0,0,0,0.18), 0 0 0 5px rgba(0,0,0,0.18); }
}
@keyframes fc-roll-dot {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  100% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
}
@keyframes fc-roll-ring {
  to { transform: rotate(360deg); }
}

/* Compact variant on small screens — keeps the badge fitting. */
@media (max-width: 540px) {
  .fc-rolling-banner { padding: 4px 10px 4px 8px; font-size: 9.5px; gap: 6px; }
  .fc-rolling-dot { width: 6px; height: 6px; }
  .fc-rolling-ring { width: 10px; height: 10px; }
}

/* ============================================================================
   DARK MODE — FINAL BORDER WIPE
   Catches every remaining hairline (`var(--g-100|g-150|g-200|g-300)` borders
   and bare-rgba `border: 1px solid` lines) and renders them invisible by
   forcing `border-color: transparent` on EVERY descendant of `[data-theme="dark"]`.
   Width/style are kept so layouts and rounded corners stay intact.
   Intentional accent borders (orange, red, winner ring, active states) are
   re-enabled below.
   ============================================================================ */
[data-theme="dark"] * {
  border-color: transparent !important;
}

/* --- Re-enable intentional accent borders (orange / red / winner / focus) --- */
[data-theme="dark"] .fp.is-active,
[data-theme="dark"] .subnav-pill.is-active,
[data-theme="dark"] .side-card.selected,
[data-theme="dark"] .tip-cell.is-picked,
[data-theme="dark"] .bp-cell.is-active,
[data-theme="dark"] .ts-chip.is-active,
[data-theme="dark"] .mr-chip.is-active,
[data-theme="dark"] .inv-item.selected,
[data-theme="dark"] .modal .side-card.selected,
[data-theme="dark"] .admin-pill.is-active,
[data-theme="dark"] .admin-search:focus,
[data-theme="dark"] .admin-note-textarea:focus,
[data-theme="dark"] .admin-set input:focus,
[data-theme="dark"] .admin-set select:focus,
[data-theme="dark"] .fair-input:focus,
[data-theme="dark"] .login-input:focus,
[data-theme="dark"] .wl-input:focus,
[data-theme="dark"] .tip-note:focus,
[data-theme="dark"] .fd-share-btn:hover,
[data-theme="dark"] .bot-item:not(:disabled):hover,
[data-theme="dark"] .fc-quick-join:hover,
[data-theme="dark"] .wl-pick-cell:hover:not(:disabled),
[data-theme="dark"] .hist-verify-btn:hover {
  border-color: var(--orange) !important;
}

/* Winner avatar ring stays orange (3px ring is intentional) */
[data-theme="dark"] .fc-avatar.is-winner {
  border-color: var(--orange) !important;
}

/* Danger / destructive accents stay red */
[data-theme="dark"] .danger,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .admin-pill.is-danger,
[data-theme="dark"] .wl-tile-remove:hover {
  border-color: var(--red) !important;
}

/* Avatars / level rings — keep their explicit white/colored rings */
[data-theme="dark"] .h-profile-avatar,
[data-theme="dark"] .av-ring,
[data-theme="dark"] .level-ring,
[data-theme="dark"] .prof-avatar-ring,
[data-theme="dark"] .fc-avatar-ring {
  border-color: var(--white) !important;
}

/* Inputs that benefit from a visible focus state — give them a subtle one */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  outline: none;
}