/* ── UNLK Brand System v2.0 ───────────────────────────────────────────────
   Fonts: Inter (UI), DM Sans (UI), DM Mono (numeric), Barlow Condensed (display)
   Loaded via Google Fonts below — no CDN dependency at runtime.
   ─────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=DM+Mono:wght@400;500&family=Inter:wght@400;600;700&display=swap');

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --cyan:        #00E5FF;
  --cyan-dark:   #00B8CC;
  --pink:        #FF2D78;
  --pink-dark:   #CC1F5E;
  --pink-light:  #FF6FA3;

  /* Backgrounds */
  --bg:          #090909;   /* Void Black — all screens */
  --surface-1:   #111111;   /* Nav bar, tab bar, top app bar */
  --surface-2:   #1A1A1A;   /* Cards, modals, inputs, menus */

  /* Text */
  --cream:       #F0EDE8;   /* All primary text */
  --muted:       #555555;   /* Secondary text, placeholders, inactive */

  /* Borders */
  --border:      #2E2E2E;   /* All borders, dividers, locked states */

  /* Semantic */
  --success:     #22C55E;
  --error:       #EF4444;
  --warning:     #F59E0B;

  /* Typography */
  --font-ui:     'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:'Barlow Condensed', 'Impact', sans-serif;
  --font-mono:   'DM Mono', 'Courier New', monospace;

  /* Affinity-pill chrome — single source of truth used on every card colour.
     Solid near-black with a faint cyan border so the pill reads identically
     on Crash (magenta), Limbo (purple), Treasure Rush (brown), etc. Replaces
     the previous translucent rgba(0,0,0,0.30) which had wildly different
     contrast across colourways (see Lobby_Redesign_Spec_v1 §4). */
  --pill-bg:     #0B0F14;
  --pill-border: rgba(0, 229, 255, 0.22);
  --pill-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  height: -webkit-fill-available;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--cream);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  overscroll-behavior: none;
}

/* ── App Container ───────────────────────────────────────────────────────── */
#app-container {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  background: var(--bg);
  overflow-x: hidden;
}

.screen {
  display: none;
  min-height: 100vh;
  padding-top: 56px;
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

.screen.active {
  display: block;
}

/* ── Bottom Navigation ──────────────────────────────────────────────────── */
/* Brand spec: #111111 bg, 64px + safe area, rectangular floating pill */
.bottom-nav {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 406px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  display: flex;
  z-index: 300;
  overflow: hidden;
}

.nav-btn {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}

/* Brand SVG icons — inherit nav-btn colour so muted/cyan active states apply */
.nav-icon {
  display: block;
  flex-shrink: 0;
}

/* 2px Cyan line above active tab icon */
.nav-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--cyan);
  border-radius: 0 0 2px 2px;
}

.nav-btn.active {
  color: var(--cyan);
  font-weight: 600;
}

/* ── Top App Bar / Header ────────────────────────────────────────────────── */
/* Floating fixed header — transparent, no border, sits above all content  */
/* Respects Telegram safe-area via --tg-safe-top; centred to 430px shell   */
/* Used on ALL screens — lobby, game screens, store, wallet, profile etc.  */
.header {
  background: transparent;
  padding: 0 16px;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  position: fixed;
  top: var(--tg-safe-top, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 50;
  flex-shrink: 0;
}

/* Right-side header cluster: balance + rewards + profile */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header h1 {
  font-size: 18px;
  font-weight: 600;
  color: var(--cream);
}

/* Token balance — game screens (same neon-frame treatment as wallet-pill) */
.balance-pill {
  background: transparent;
  border: 1.5px solid var(--cyan);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cyan);
  font-family: var(--font-mono);
  box-shadow: 0 0 8px rgba(0,229,255,0.12);
}

/* ── Section Headers ─────────────────────────────────────────────────────── */
/* Brand: Cream, 20px, 600 weight; "See All" in Cyan 14px 400 */
.section-title {
  padding: 12px 16px 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-see-all {
  font-size: 14px;
  font-weight: 400;
  color: var(--cyan);
  background: none;
  border: none;
  cursor: pointer;
}

/* ── Game Cards Grid — 3-column (matches store/catalogue density) ─────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 16px 0;
}

/* Brand: Surface 2 bg, 12px radius, 12px padding, 1px Cyan border when unlocked.
   Layout uses an explicit 4-row grid so every card slot (badge / icon / title /
   description / affinity pill) renders in the same vertical position regardless
   of content length. This eliminates the visual jitter caused by:
     • title wrapping (e.g. "TREASURE RUSH" wrapping to 2 lines vs others to 1)
     • description varying between 1 and 2 lines
     • some cards having an affinity pill and others not
*/
.game-card {
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: grid;
  /* Five-row lockdown — see Lobby_Redesign_Spec_v1 §5.2.
     Each row has a fixed height so the icon, title, description-top, and
     pill-bottom edges align across every card in the 3-col grid regardless
     of description length or badge presence. The 1fr spacer pushes the pill
     to the bottom edge without coupling it to the description height. */
  grid-template-rows:
    24px       /* badge row — reserved overlay space */
    32px       /* icon row */
    18px       /* title row (single line @ 12px / 1.2) */
    28px       /* description row (2 lines @ 10px / 1.35, line-clamp 2) */
    1fr        /* spacer — anchors pill to card bottom */
    24px;      /* pill row */
  row-gap: 4px;
  border: 1px solid var(--border);
  transition: transform 0.08s ease-out;
  box-sizing: border-box;
}

/* Enforce uniform card height in the lobby 3-column grid.
   142px = sum of fixed rows (24+32+18+28+24) + 4*4px row-gap + 20px padding
   plus a 1fr spacer that grows to fill any rounding slack. */
.games-grid .game-card {
  height: 142px;
  min-height: 142px;
}

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

/* Game-specific backgrounds (full-colour thumbnails per brand spec) */
.game-card.crash         { background: linear-gradient(135deg, #e11d48, #be123c); border-color: var(--cyan); }
.game-card.plinko        { background: linear-gradient(135deg, #0891b2, #0e7490); border-color: var(--cyan); }
.game-card.mines         { background: linear-gradient(135deg, #059669, #047857); border-color: var(--cyan); }
.game-card.blackjack     { background: linear-gradient(135deg, #1a6b3c, #0f4d2a); border-color: var(--cyan); }
.game-card.treasurerush  { background: linear-gradient(135deg, #7c4a1e, #3d2008); border-color: var(--cyan); }
.game-card.dice          { background: linear-gradient(135deg, #4f46e5, #3730a3); border-color: var(--cyan); }
.game-card.limbo         { background: linear-gradient(135deg, #7e22ce, #581c87); border-color: var(--cyan); }
.game-card.keno          { background: linear-gradient(135deg, #0f766e, #134e4a); border-color: var(--cyan); }
.game-card.coming        { background: var(--surface-2); border-color: var(--border); filter: saturate(0.5); }

/* ── Lobby empty-state: locked teaser cards ─────────────────────────────── */
/* Shown in empty grid columns when player has < 3 games. Tapping opens catalogue. */
.game-card.lobby-teaser-card {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}

.game-card.lobby-teaser-card:hover,
.game-card.lobby-teaser-card:focus-visible {
  border-color: var(--cyan);
  background: rgba(0, 229, 255, 0.05);
  outline: none;
}

.game-card.lobby-teaser-card:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.lobby-teaser-icon {
  font-size: 20px;
  filter: grayscale(0.5) opacity(0.65);
}

.lobby-teaser-name {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--cyan);
  text-align: center;
}

.lobby-teaser-level {
  font-size: 8px;
  color: var(--muted);
  text-align: center;
}

/* "More" variant — muted, not cyan */
.lobby-teaser-card--more .lobby-teaser-icon { filter: grayscale(1) opacity(0.4); }
.lobby-teaser-card--more .lobby-teaser-name { color: var(--muted); }

/* ── Lobby progress strip ────────────────────────────────────────────────── */
/* Shown below the games grid when player has < 3 games unlocked. Removed once full. */
.lobby-progress-strip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 10px 16px 0;
  padding: 10px 12px;
}

.lps-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.lps-level {
  font-size: 11px;
  font-weight: 700;
  color: var(--cream);
}

.lps-next {
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
  text-align: right;
}

.lps-bar-track {
  background: #222222;
  border-radius: 4px;
  height: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.lps-bar-fill {
  background: var(--cyan);
  height: 100%;
  border-radius: 4px;
  transition: width 400ms ease-out;
}

.lps-caption {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
}

.lps-cta {
  width: 100%;
  background: transparent;
  border: 1px solid var(--cyan);
  border-radius: 6px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 7px 0;
  cursor: pointer;
  font-family: var(--font-display);
  transition: background 150ms ease-out;
  min-height: 36px;
}

.lps-cta:hover,
.lps-cta:focus-visible {
  background: rgba(0, 229, 255, 0.1);
  outline: none;
}

.lps-cta:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Brand: badges — "HOT" / "NEW" / "FOR YOU" etc.
   Base style uses Cyan; variant modifiers override colour per badge type. */
.game-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  background: var(--cyan);
  color: var(--bg);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* NEW — default cyan (inherits base .game-badge) */
.game-badge--new {
  background: var(--cyan);
  color: var(--bg);
}

/* HOT — amber/orange: high energy, trending */
.game-badge--hot {
  background: #FF8C00;
  color: #fff;
}

/* FOR YOU — purple: personalised recommendation */
.game-badge--foryou {
  background: #7C3AED;
  color: #fff;
  font-size: 8px; /* slightly smaller to fit "FOR YOU" in the badge */
  letter-spacing: 0.2px;
}

.game-icon {
  font-size: 26px;
  line-height: 1;
  /* Pin to row 2 (the icon row). Centred in its row keeps emoji baselines
     stable across cards — `align-self: end` was causing 1–2px float on
     glyphs with descenders (♠ vs ⛏️ vs 🃏). */
  grid-row: 2;
  align-self: center;
  justify-self: start;
}

/* Brand: card title — scaled for 3-col density, ALL CAPS per brand.
   Title is single-line with ellipsis. Long names like "TREASURE RUSH" get
   short forms via i18n (e.g. "TR. RUSH") rather than wrapping, which keeps
   the title row at exactly 1 line tall on every card and is localization-safe. */
.game-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Pin to row 3 (title row) so icon-row size changes never push the title
     down a sub-pixel. align-self:end keeps the baseline visually anchored. */
  grid-row: 3;
  align-self: end;
}

/* Description always reserves 2 lines of vertical space so cards stay aligned
   even if the copy is a single short line ("Roll over or under"). Pinned to
   row 4 (description row) so the row-height token is the single source of
   truth — line-clamp + 28px row guarantees identical bottom-edge alignment. */
.game-desc {
  font-size: 10px;
  color: rgba(240,237,232,0.7);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  grid-row: 4;
  align-self: start;
}

/* ── Affinity Score pill on game cards ──────────────────────────────────────── */
/*
  The pill is constrained to the card's content width so the score never bleeds
  past the right edge (the previous design let the pill expand inline-flex with
  white-space:nowrap, which clipped the trailing "· N" on cards where the tier
  label was long, e.g. "Comfortable · 5").

  Layout: emoji | label (truncates) | score (never truncates).
  Visibility instead of display:none preserves the bottom row height so cards
  with no affinity data line up with cards that have data.
*/
.affinity-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Solid chrome — see :root --pill-* tokens. Reads ≥ 4.5:1 contrast against
     every UNLK card colourway (verified WCAG AA). Backdrop-blur dropped: the
     blur was inconsistent on Telegram WebView across iOS/Android and the
     solid background makes it redundant. */
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  box-shadow: var(--pill-shadow);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
  max-width: 100%;
  width: fit-content;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
  /* Pin to row 6 (pill row). Bottom-aligned so the pill anchors to the
     card's lower edge regardless of description-row content. */
  grid-row: 6;
  align-self: end;
  justify-self: start;
}

/* Use visibility (not display:none) so the bottom row keeps its height and
   cards with no affinity data still align with neighbouring cards. */
.affinity-pill.hidden { visibility: hidden; }

/* Emoji never shrinks — tier is the most-glanceable signal. */
.affinity-pill .aff-emoji {
  flex: 0 0 auto;
  line-height: 1;
}

/* Tier label takes the leftover space and ellipsises if needed.
   max-width raised to 9ch so the longest tier label ("Comfortable")
   fits in full on every card colour before truncation kicks in — the
   previous default was clipping it to "Comfort..." even when there
   was room to spare on most cards. */
.affinity-pill .aff-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Score is fixed-size, never truncated; coloured per tier via --aff-color. */
.affinity-pill .aff-score {
  flex: 0 0 auto;
  color: var(--aff-color, #fff);
  /* Same font size as the rest of the pill — eliminates the visual mismatch
     that used to make the score look like it sat outside the chrome. */
  font-size: 10px;
  font-weight: 800;
}

/* Tooltip shown on hover/tap */
.affinity-pill[title] { cursor: help; }

/* ── Game Screen Back Button + Title (inside .header on game screens) ──── */
/* Brand: back button — Cream icon, 44×44px tap target */
.back-btn {
  background: transparent;
  border: none;
  color: var(--cream);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--cream);
  flex: 1;
}

/* ── Bet Panel ──────────────────────────────────────────────────────────── */
/* Brand: Surface 2, 12px radius */
.game-area {
  padding: 16px;
  position: relative;
}

.bet-panel {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
}

/* Brand: input label — Cream, 12px, 600 weight, 6px above input */
.bet-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 6px;
}

.bet-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}

/* Brand input: bg #1A1A1A, border 1px #2E2E2E, 8px radius, 14px Cream, 44px height */
.bet-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  height: 44px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bet-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,229,255,0.15);
}

.bet-input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.bet-quick {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--cream);
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  height: 44px;
  transition: border-color 0.15s, color 0.15s;
}

.bet-quick:active {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Brand: 44px min height, 8px radius, ALL CAPS text for CTAs */
.action-btn {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  margin-top: 8px;
  min-height: 44px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: transform 0.08s, opacity 0.15s;
}

.action-btn:active {
  transform: scale(0.97);
}

/* Primary CTA — #00E5FF bg, #090909 text */
.btn-primary {
  background: var(--cyan);
  color: var(--bg);
}
.btn-primary:active { background: var(--cyan-dark); }

/* Prize / Reward CTA — #FF2D78 bg, white text */
.btn-prize {
  background: var(--pink);
  color: #FFFFFF;
}
.btn-prize:active { background: var(--pink-dark); }

/* Success — green */
.btn-success {
  background: var(--success);
  color: var(--bg);
}
.btn-success:active { opacity: 0.85; }

/* Danger / Destructive — transparent with red border */
.btn-danger {
  background: transparent;
  color: var(--error);
  border: 1px solid var(--error);
}
.btn-danger:active { background: rgba(239,68,68,0.1); }

/* Secondary outline — transparent, Cyan border */
.btn-secondary {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan);
}
.btn-secondary:active { background: rgba(0,229,255,0.08); }

/* Ghost / Tertiary — no border */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
}

/* Disabled */
.btn-disabled,
.btn-claimed {
  background: var(--border) !important;
  color: var(--muted) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Legacy warning alias — use btn-prize for prize actions */
.btn-warning {
  background: var(--warning);
  color: var(--bg);
}

/* ── Crash Game ──────────────────────────────────────────────────────────── */
.crash-display {
  background: var(--surface-2);
  border-radius: 16px;
  height: 260px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

#crash-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.crash-status {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(240,237,232,0.4);
  pointer-events: none;
}

/* crash-result-overlay removed — results now shown via unified toast system */

/* ── Plinko ──────────────────────────────────────────────────────────────── */
.plinko-canvas {
  width: 100%;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: block;
}

.plinko-risk-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 40px;
}

.plinko-risk-btn.active-risk {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--bg);
}

.plinko-risk-btn[data-risk="medium"].active-risk {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--bg);
}

.plinko-risk-btn[data-risk="high"].active-risk {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

/* Plinko mobile layout
   ─────────────────────
   The screen itself stays locked to the viewport so the canvas can't drift
   off-screen, but the .game-area scrolls internally. Without internal scroll
   the bet-history-section at the bottom of the .game-area was unreachable
   because the parent #screen-plinko had overflow:hidden. */
#screen-plinko {
  display: none;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-bottom: 0;
  overflow: hidden;
}
#screen-plinko.active { display: flex; }
#screen-plinko .game-area {
  padding: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Allow vertical scrolling so the bet-history-section is reachable */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Reserve clearance below the bottom-nav so the last row of bet history
     isn't hidden behind the floating nav pill. */
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}
#screen-plinko .bet-panel { margin-top: 8px; flex-shrink: 0; }

/* ── Mines ───────────────────────────────────────────────────────────────── */
.mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.mine-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 4vw, 22px);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 0;
}

.mine-cell.revealed-safe {
  background: rgba(34,197,94,0.15);
  border-color: var(--success);
}

.mine-cell.revealed-mine {
  background: rgba(239,68,68,0.15);
  border-color: var(--error);
}

#screen-mines .game-area  { padding: 10px 10px 0; }
#screen-mines .bet-panel  { margin-top: 8px; }

.active-mine-btn {
  background: var(--cyan) !important;
  border-color: var(--cyan-dark) !important;
  color: var(--bg) !important;
}

/* mines-result-overlay removed — results now shown via unified toast system */

/* ── Multiplier Display ──────────────────────────────────────────────────── */
.multiplier-display {
  text-align: center;
  padding: 10px;
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--success);
  margin-bottom: 12px;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.lb-tabs {
  display: flex;
  padding: 16px 16px 0;
  gap: 8px;
}

.lb-tab {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  min-height: 44px;
  transition: all 0.15s;
}

.lb-tab.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--bg);
}

.lb-list { padding: 16px; }

.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}

.lb-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,229,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
}

.lb-rank.gold   { background: rgba(245,158,11,0.15); color: #F59E0B; }
.lb-rank.silver { background: rgba(156,163,175,0.15); color: #9CA3AF; }
.lb-rank.bronze { background: rgba(217,119,6,0.15);  color: #D97706; }

.lb-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
}

.lb-pts {
  font-size: 13px;
  color: var(--cyan);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ── Reward / Bonus Cards ────────────────────────────────────────────────── */
.reward-card {
  margin: 16px;
  background: var(--surface-2);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border);
}

.reward-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 4px;
}

.reward-card p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

/* Brand: prize/reward amounts in Hot Pink */
.reward-amount {
  font-size: 28px;
  font-weight: 900;
  font-family: var(--font-display);
  color: var(--cyan);
  margin-bottom: 16px;
  letter-spacing: 1px;
}

/* ── Streak ──────────────────────────────────────────────────────────────── */
.streak-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.streak-day {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
}

.streak-day.done {
  background: rgba(0,229,255,0.1);
  border-color: var(--cyan);
  color: var(--cyan);
}

.streak-day.today {
  background: var(--cyan);
  color: var(--bg);
  font-weight: 700;
}

/* ── UNLK Logo (text wordmark) ───────────────────────────────────────────── */
/* Replaces the image-based logo across all screens.
   "UN" in --cream, "LK" in --cyan via <span>. */
.header-logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1.5px;
  color: var(--cream);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}
.header-logo span { color: var(--cyan); }

/* ── Profile Avatar ──────────────────────────────────────────────────────── */
/* Brand: Surface 2 bg; Cyan accent ring */
.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--cream);
}

.profile-avatar-large {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0,229,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  margin: 0 auto 12px;
}

.profile-header {
  padding: 24px 16px;
  text-align: center;
}

.profile-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
}

.profile-id {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Stats Grid ──────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 16px;
}

.stat-card {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  text-align: center;
}

.stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--cyan);
  font-family: var(--font-mono);
}

.stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Toast Notifications ─────────────────────────────────────────────────── */
/* Pill-style: compact, single-line, consistent 36px height.
   Type is applied via toast--{type} class by showToast() in utils.js.       */
.toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--surface-2);
  border-left: 4px solid var(--cyan);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  z-index: 999;
  opacity: 0;
  max-width: 340px;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Toast type variants — set by showToast(msg, params, type) */
.toast--win     { border-left-color: var(--cyan); }
.toast--loss    { border-left-color: var(--error); }
.toast--info    { border-left-color: var(--cyan); }
.toast--success { border-left-color: var(--success); }
.toast--error   { border-left-color: var(--error); }
.toast--warning { border-left-color: var(--warning); }

/* ── Wallet Pill — UC balance in hub screens (Lobby, Store, Leaderboard…) ── */
/* Neon-frame treatment: cyan border + subtle outer glow, matching profile avatar */
.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1.5px solid var(--cyan);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  color: var(--cream);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(0,229,255,0.12);
  transition: box-shadow 0.2s, background 0.15s;
  flex-shrink: 0;
}
.wallet-pill:active { transform: scale(0.96); box-shadow: 0 0 12px rgba(0,229,255,0.2); }
.wallet-pill:hover  { background: var(--surface-1); }
.wallet-pill .wallet-pill-label {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ── Notification / Rewards Button ─────────────────────────────────────── */
/* Neon-frame treatment: cyan border + glow, matching profile avatar */
.notif-btn {
  background: var(--surface-2);
  border: 1.5px solid var(--cyan);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  padding: 0;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 8px rgba(0,229,255,0.12);
  transition: box-shadow 0.2s;
}
.notif-btn:active { transform: scale(0.92); box-shadow: 0 0 14px rgba(0,229,255,0.25); }

/* Brand: notification dot — Hot Pink */
.notif-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  background: var(--pink);
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: none;
  animation: notif-pulse 1.8s ease-in-out infinite;
}

@keyframes notif-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,120,0.5); }
  50%       { box-shadow: 0 0 0 4px rgba(255,45,120,0); }
}

/* ── Shop / Store ────────────────────────────────────────────────────────── */
.shop-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.shop-card:active { transform: scale(0.97); }

.shop-card-selected {
  border-color: var(--cyan);
  background: rgba(0,229,255,0.06);
  box-shadow: 0 0 0 1px rgba(0,229,255,0.25);
}

.shop-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.shop-badge.popular {
  background: rgba(0,229,255,0.15);
  color: var(--cyan);
}

.shop-badge.best {
  background: rgba(245,158,11,0.2);
  color: var(--warning);
}

.shop-sc {
  font-size: 18px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--cyan);
  margin-bottom: 4px;
}

.shop-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 2px;
}

.shop-usd {
  font-size: 10px;
  color: var(--muted);
}

/* ── Catalogue / Filter Chips ────────────────────────────────────────────── */
/* ── Catalogue Filter Bar ────────────────────────────────────────────────── */
.cat-filter-bar {
  display: flex;
  gap: 6px;
  padding: 14px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-filter-bar::-webkit-scrollbar { display: none; }

.cat-filter {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-ui);
  white-space: nowrap;
}
.cat-filter.active {
  background: rgba(0,229,255,0.06);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Originals filter pill — amber accent to stand out as the UNLK house brand */
.cat-filter--originals {
  border-color: rgba(255,140,0,0.4);
  color: #FF8C00;
}
.cat-filter--originals.active {
  background: rgba(255,140,0,0.08);
  border-color: #FF8C00;
  color: #FF8C00;
}

/* Badge positioned on catalogue card thumbnails */
.cat-badge {
  position: absolute;
  top: 6px;
  left: 6px;   /* catalogue cards: badge on the left (iQ chip is bottom-left, provider top-right) */
  right: auto;
  z-index: 2;
}

/* Originals card — subtle amber top border accent */
.cat-card--original {
  border-color: rgba(255,140,0,0.25);
}

/* ── Catalogue Sort Row ──────────────────────────────────────────────────── */
.cat-sort-row {
  padding: 12px 16px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-sort-label { font-size: 12px; color: var(--muted); }
.cat-sort-tabs  { display: flex; gap: 4px; }
.cat-sort-tab {
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  transition: all 0.15s;
  font-family: var(--font-ui);
}
.cat-sort-tab.active {
  background: var(--iq-gold-dim);
  border-color: rgba(255,215,0,0.4);
  color: var(--iq-gold);
}

/* ── Catalogue Grid — 3 columns ──────────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
}

/* ── Catalogue Game Card ─────────────────────────────────────────────────── */
/* Scoped to .cat-grid to prevent inheriting lobby .game-card layout styles  */
.cat-grid .game-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  /* Reset lobby card base (padding / flex layout) */
  display: block;
  padding: 0;
  min-height: unset;
  flex-direction: unset;
  justify-content: unset;
}
.cat-grid .game-card:active { transform: scale(0.97); }
.cat-grid .game-card.is-unlocked {
  border-color: rgba(34,197,94,0.4);
  box-shadow: 0 0 14px rgba(34,197,94,0.07);
}
.game-card.filter-hidden { display: none; }

/* Thumbnail */
.card-thumb {
  position: relative;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-thumb-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.card-emoji {
  font-size: 34px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  line-height: 1;
}

/* iQ badge — bottom-left of thumbnail */
.card-iq-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-iq-label {
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  line-height: 1;
}
.card-iq-score {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
}

/* Provider label — bottom-right of thumbnail */
.card-provider-label {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 2;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1.4;
}

/* iQ Tier colour modifiers */
.iq-acclaimed { border-color: rgba(34,197,94,0.65);  background: rgba(34,197,94,0.2);  }
.iq-acclaimed .card-iq-label { color: #22C55E; }
.iq-acclaimed .card-iq-score { color: #4ade80; }

.iq-favorable { border-color: rgba(255,215,0,0.6);   background: rgba(255,215,0,0.18); }
.iq-favorable .card-iq-label { color: var(--iq-gold); }
.iq-favorable .card-iq-score { color: #FFE566; }

.iq-mixed { border-color: rgba(245,158,11,0.6);    background: rgba(245,158,11,0.18); }
.iq-mixed .card-iq-label { color: #F59E0B; }
.iq-mixed .card-iq-score { color: #fbbf24; }

.iq-low { border-color: rgba(239,68,68,0.6);     background: rgba(239,68,68,0.18);  }
.iq-low .card-iq-label { color: #EF4444; }
.iq-low .card-iq-score { color: #f87171; }

/* Card info section */
.card-info { padding: 8px; }

.card-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.25;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 27px;
}

/* Lock / Unlock status button */
.card-status-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: opacity 0.15s, background 0.15s;
}
.card-status-btn.is-locked {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--muted);
}
.card-status-btn.is-locked:active { opacity: 0.7; }
.card-status-btn.is-unlocked {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.35);
  color: #4ade80;
}
.card-status-btn.is-unlocked:active { opacity: 0.75; }

/* Coming soon footer */
.catalogue-coming-soon {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 13px;
}
.catalogue-coming-soon .cs-icon { font-size: 32px; margin-bottom: 8px; }

/* ── Lobby Banner ────────────────────────────────────────────────────────── */
.lobby-banner {
  margin: 16px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--cyan);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lobby-banner h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--cream);
  text-transform: uppercase;
  font-family: var(--font-display);
  letter-spacing: 1px;
}

.lobby-banner p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* Brand: claim button inside banner — Prize CTA style */
.claim-btn {
  background: var(--pink);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  text-transform: uppercase;
  min-height: 44px;
  white-space: nowrap;
}
.claim-btn:active { background: var(--pink-dark); }

/* ── Loyalty Screen ──────────────────────────────────────────────────────── */
.loyalty-tier-banner {
  margin: 16px;
  border-radius: 16px;
  padding: 20px;
  background: var(--surface-2);
  border: 1px solid var(--cyan);
  display: flex;
  align-items: center;
  gap: 16px;
}

.loyalty-tier-emoji { font-size: 40px; }
.loyalty-tier-info  { flex: 1; }

.loyalty-tier-name {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cream);
}

.loyalty-tier-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.loyalty-xp-bar-wrap { margin: 0 16px; }

.loyalty-xp-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.loyalty-xp-track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Brand: XP fill — Cyan */
.loyalty-xp-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--cyan);
  transition: width 0.5s ease;
}

.loyalty-tiers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
  margin-top: 12px;
}

.loyalty-tier-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.loyalty-tier-card.current-tier {
  border-color: var(--cyan);
  background: rgba(0,229,255,0.06);
}

.loyalty-tier-card.locked-tier { opacity: 0.45; }

.ltc-emoji  { font-size: 24px; margin-bottom: 4px; }
.ltc-name   { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cream); margin-bottom: 6px; }
.ltc-reward { font-size: 11px; color: var(--cyan); margin-bottom: 2px; font-family: var(--font-mono); }
.ltc-xp     { font-size: 10px; color: var(--muted); }

/* ── Profile Level Section ───────────────────────────────────────────────── */
.profile-level-section {
  margin: 0 16px 16px;
  background: var(--surface-2);
  border: 1px solid var(--cyan);
  border-radius: 16px;
  padding: 14px 16px;
}

.profile-level-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-level-emoji {
  font-size: 34px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  flex-shrink: 0;
}

.profile-level-info { flex: 1; }

.profile-level-name {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cyan);
}

.profile-level-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* ── Profile Edit Trigger ────────────────────────────────────────────────── */
.profile-edit-trigger {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--cyan);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
  padding: 0;
  line-height: 1;
  color: var(--cream);
}
.profile-edit-trigger:active { transform: scale(0.9); background: rgba(0,229,255,0.1); }

/* ── Profile ID copy button ──────────────────────────────────────────────── */
.profile-id-copy-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0.7;
  transition: opacity 0.15s, transform 0.15s;
  line-height: 1;
  color: var(--cream);
}
.profile-id-copy-btn:active { opacity: 1; transform: scale(0.88); }

/* ── Rewards screen ──────────────────────────────────────────────────────── */
.rewards-header-back {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rewards-header-back h1 { flex: 1; }

.reward-claimed-msg { font-size: 12px; color: var(--success); margin-top: 8px; font-weight: 600; }
.reward-countdown   { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Lobby player-level card (slim strip) ─────────────────────────────────
   Lobby_Redesign_Spec_v1 §8. Sits between the header and the SP/MP tab bar.
   Single horizontal strip — total height ≤ 60px so the tile grid doesn't
   lose vertical real estate. Whole strip is a button (routes to the full
   profile); the embedded "?" stops propagation and routes to the
   progression guide. Hidden on the Multiplayer panel — see JS toggle. */
.lobby-level-card {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 6px 12px 8px 12px;
  padding: 8px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--cream);
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lobby-level-card:hover,
.lobby-level-card:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.lobby-level-card.is-hidden { display: none; }

.llc-tier-chip {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.10);
  border: 1px solid rgba(0, 229, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.llc-tier-emoji { font-size: 18px; line-height: 1; }

.llc-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;            /* allow ellipsis on tier-name */
}

.llc-meta-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--cream);
}

.llc-level {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.llc-tier-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llc-bar-track {
  display: block;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.llc-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-dark), var(--cyan));
  border-radius: 2px;
  transition: width 0.6s ease-out;
}

.llc-xp-caption {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
}

.llc-help {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.llc-help:hover,
.llc-help:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
  outline: none;
}

/* ── Store / Catalogue Tab Bar (underline style) ─────────────────────────── */
.store-subtab-bar {
  display: flex;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.store-subtab {
  flex: 1;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  text-align: center;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.store-subtab.active {
  color: var(--cream);
  border-bottom-color: var(--cyan);
}

/* ── UC Packs Grid ───────────────────────────────────────────────────────── */
.sc-packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px 16px;
}

.sc-pack-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--border);
}
.sc-pack-card:active { transform: scale(0.95); }

.sc-pack-visual-area {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
}

.sc-pack-save-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(9,9,9,0.65);
  color: var(--cream);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

.sc-pack-free-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--success);
  color: var(--bg);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

.sc-pack-bottom {
  width: 100%;
  background: rgba(9,9,9,0.4);
  padding: 6px 4px;
}

.sc-pack-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--cream);
  line-height: 1.2;
  text-transform: uppercase;
}

.sc-pack-price-tag {
  margin-top: 4px;
  background: var(--cyan);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--bg);
  display: inline-block;
  font-family: var(--font-mono);
}

.sc-pack-free-timer {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* ── Pack Purchase Modal ─────────────────────────────────────────────────── */
.sc-pack-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9,9,9,0.85);
  z-index: 9000;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sc-pack-modal-overlay.open { display: flex; }

/* Brand: modal — #1A1A1A bg, 16px radius, 24px padding, 1px #2E2E2E border */
.sc-pack-modal {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 28px 24px 36px;
  width: 100%;
  max-width: 480px;
  position: relative;
  animation: slideUpModal 0.2s ease-out;
}

@keyframes slideUpModal {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.sc-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(240,237,232,0.08);
  border: none;
  color: var(--muted);
  font-size: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  transition: color 0.15s, background 0.15s;
}
.sc-modal-close:hover { color: var(--cream); background: rgba(240,237,232,0.12); }

.sc-modal-visual {
  font-size: 72px;
  text-align: center;
  line-height: 1;
  margin-bottom: 12px;
}

.sc-modal-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--cream);
  font-family: var(--font-display);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px;
}

.sc-modal-desc {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.6;
}

/* Stars buy button */
.sc-buy-stars-btn {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  border: none;
  background: #F59E0B;
  color: var(--bg);
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-ui);
  cursor: pointer;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  transition: opacity 0.15s;
  text-transform: uppercase;
}
.sc-buy-stars-btn:active { opacity: 0.85; }

/* TON buy button */
.sc-buy-ton-btn {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--cream);
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-ui);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  transition: opacity 0.15s;
  text-transform: uppercase;
}
.sc-buy-ton-btn:active { opacity: 0.85; }

.sc-modal-or {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 10px;
}

/* ── TON Confirm Modal ───────────────────────────────────────────────────── */
.ton-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9,9,9,0.85);
  z-index: 9100;
  align-items: center;
  justify-content: center;
}
.ton-confirm-overlay.open { display: flex; }

.ton-confirm-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  max-width: 320px;
  width: 90%;
}

.ton-confirm-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.ton-confirm-box h3 { color: var(--cream); font-size: 18px; margin: 0 0 6px; }
.ton-confirm-box p  { color: var(--muted); font-size: 13px; margin: 0 0 16px; line-height: 1.6; }

.ton-confirm-open-wallet {
  background: rgba(0,229,255,0.1);
  border: 1px solid var(--cyan);
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  color: var(--cyan);
  cursor: pointer;
  font-family: var(--font-ui);
}

/* ── Transaction History ─────────────────────────────────────────────────── */
.tx-pill {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tx-pill-active,
.tx-pill:hover {
  background: rgba(0,229,255,0.1);
  border-color: var(--cyan);
  color: var(--cyan);
}

.tx-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.tx-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tx-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.tx-icon-withdrawal { background: rgba(0,229,255,0.1); }
.tx-icon-purchase   { background: rgba(34,197,94,0.1); }

.tx-main { flex: 1; min-width: 0; }

.tx-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-amount {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.tx-amount-withdrawal { color: var(--warning); }
.tx-amount-purchase   { color: var(--cyan); }

.tx-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.tx-badge-pending  { background: rgba(245,158,11,0.15); color: var(--warning); }
.tx-badge-paid     { background: rgba(34,197,94,0.15);  color: var(--success); }
.tx-badge-approved { background: rgba(34,197,94,0.15);  color: var(--success); }
.tx-badge-rejected { background: rgba(239,68,68,0.15);  color: var(--error); }
.tx-badge-completed{ background: rgba(0,229,255,0.1);   color: var(--cyan); }

.tx-date {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  font-family: var(--font-mono);
}

.tx-denied-id {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tx-denied-id-label {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}

.tx-denied-id-value {
  font-size: 11px;
  color: var(--error);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

.tx-empty {
  text-align: center;
  padding: 36px 0;
  color: var(--muted);
  font-size: 13px;
}

/* ── W5 Wallet Badge ─────────────────────────────────────────────────────── */
.w5-wallet-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 6px;
  letter-spacing: 0.02em;
  cursor: default;
  user-select: none;
  background: rgba(0,229,255,0.1);
  color: var(--cyan);
  border: 1px solid rgba(0,229,255,0.25);
}

/* ── Blackjack ───────────────────────────────────────────────────────────── */
.bj-table {
  background: radial-gradient(ellipse at center, #1a4d2e 0%, #0d3320 100%);
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 16px 12px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bj-zone { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bj-zone-label { font-size: 11px; font-weight: 600; color: rgba(240,237,232,0.4); text-transform: uppercase; letter-spacing: 1px; }
.bj-vs { font-size: 12px; font-weight: 700; color: rgba(240,237,232,0.25); letter-spacing: 2px; padding: 2px 0; }
.bj-cards { display: flex; gap: 0; flex-wrap: nowrap; justify-content: flex-start; min-height: 80px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.bj-card-wrapper { transition: transform 0.15s ease; margin-left: -26px; }
.bj-card-wrapper:first-child { margin-left: 0; }
#bj-player-area { width: 100%; display: flex; gap: 10px; justify-content: center; }
.bj-hand-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; max-width: 160px; border-radius: 12px; padding: 6px; border: 2px solid transparent; transition: border-color 0.2s; }
.bj-hand-zone.active-hand { border-color: rgba(0,229,255,0.5); background: rgba(0,229,255,0.05); }
.bj-total { font-size: 15px; font-weight: 700; color: rgba(240,237,232,0.85); min-height: 20px; font-family: var(--font-mono); }
.bj-total.bust { color: var(--error); }
.bj-total.blackjack { color: var(--warning); }
.bj-card-wrapper { transition: transform 0.15s ease; }
.bj-card-wrapper.bj-deal-anim { transform: translateY(-30px) scale(0.85); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; }
.bj-card-wrapper.bj-flip { transform: scaleX(0); transition: transform 0.15s ease; }
.bj-card { width: 52px; height: 72px; background: #fff; border-radius: 7px; border: 1px solid rgba(0,0,0,0.15); display: flex; flex-direction: column; justify-content: space-between; padding: 4px 5px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.35); user-select: none; }
.bj-card.red .bj-card-rank, .bj-card.red .bj-card-suit { color: #dc2626; }
.bj-card-rank { font-size: 14px; font-weight: 800; color: #1a1a1a; line-height: 1; }
.bj-card-rank-bot { align-self: flex-end; transform: rotate(180deg); }
.bj-card-suit { font-size: 18px; color: #1a1a1a; text-align: center; line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.bj-card-back { width: 52px; height: 72px; background: linear-gradient(135deg, var(--surface-2), var(--surface-1)); border-radius: 7px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.bj-card-inner { width: 100%; height: 100%; border-radius: 5px; border: 3px solid rgba(0,229,255,0.15); background: repeating-linear-gradient(45deg, rgba(0,229,255,0.03), rgba(0,229,255,0.03) 4px, transparent 4px, transparent 8px); }
#bj-actions { display: flex; gap: 8px; margin-top: 8px; }
#bj-actions .action-btn { flex: 1; margin-top: 0; padding: 12px 8px; font-size: 14px; }
.btn-secondary-dark { background: var(--surface-1); color: var(--cream); border: 1px solid var(--border); }
.bj-result-badge { font-size: 13px; font-weight: 800; letter-spacing: 1px; padding: 4px 12px; border-radius: 8px; margin-top: 6px; text-align: center; font-family: var(--font-display); text-transform: uppercase; }
.bj-result-win  { background: rgba(34,197,94,0.15); color: var(--success); }
.bj-result-lose { background: rgba(239,68,68,0.15); color: var(--error); }
.bj-result-push { background: rgba(0,229,255,0.1);  color: var(--cyan); }
.bj-result-blackjack { background: rgba(245,158,11,0.15); color: var(--warning); }

/* ── Treasure Rush ───────────────────────────────────────────────────────── */
#screen-treasurerush { display: none; flex-direction: column; height: 100dvh; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
#screen-treasurerush.active { display: flex; }
#screen-treasurerush .header { flex-shrink: 0; }

.mr-layout { flex: 1; display: flex; position: relative; overflow: hidden; min-height: min(240px, 35dvh); }
#mr-grid-wrapper { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 8px 10px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
#mr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; }

.mr-tile { aspect-ratio: 1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.12s; position: relative; border: 1px solid rgba(255,255,255,0.06); user-select: none; -webkit-tap-highlight-color: transparent; }
.mr-tile:active { transform: scale(0.94); }
.mr-tile.zone-0 { background: #1e2d1e; }
.mr-tile.zone-1 { background: #1a1e2d; }
.mr-tile.zone-2 { background: #2d1a1a; }
.mr-tile-question { font-size: 18px; color: rgba(240,237,232,0.3); font-weight: 700; }
.mr-tile-adjacent { border: 2px solid var(--success) !important; box-shadow: 0 0 10px rgba(34,197,94,0.4); animation: mr-pulse 1.5s ease-in-out infinite; }
.mr-tile-start-selectable { border: 2px dashed var(--cyan) !important; box-shadow: 0 0 12px rgba(0,229,255,0.3); }
@keyframes mr-pulse { 0%,100%{box-shadow:0 0 8px rgba(34,197,94,0.4)} 50%{box-shadow:0 0 18px rgba(34,197,94,0.7)} }
.mr-tile-player { border: 2px solid var(--warning) !important; box-shadow: 0 0 14px rgba(245,158,11,0.5) !important; animation: none !important; }
@keyframes mr-dig { 0%{transform:scale(1)} 40%{transform:scale(0.75) rotate(-8deg)} 100%{transform:scale(1)} }
.mr-dig-anim { animation: mr-dig 0.25s ease forwards; }
.mr-tile-revealed { opacity: 0.65; cursor: default; }
.mr-tile-neutral { background: #1e3a2a !important; border-color: rgba(34,197,94,0.4) !important; }
.mr-tile-bronze  { background: #3a2e1a !important; border-color: #c97b30 !important; box-shadow: 0 0 8px rgba(201,123,48,0.3); }
.mr-tile-silver  { background: #1e2a3a !important; border-color: #94a3b8 !important; box-shadow: 0 0 10px rgba(148,163,184,0.4); }
.mr-tile-gold    { background: #3a2e0a !important; border-color: var(--warning) !important; animation: mr-gold-glow 2s ease-in-out infinite; }
@keyframes mr-gold-glow { 0%,100%{box-shadow:0 0 12px rgba(245,158,11,0.5)} 50%{box-shadow:0 0 24px rgba(245,158,11,0.9)} }
.mr-tile-shield  { background: #1a2a3a !important; border-color: var(--cyan) !important; box-shadow: 0 0 10px rgba(0,229,255,0.3); }
.mr-tile-bomb    { background: rgba(239,68,68,0.15) !important; border-color: var(--error) !important; box-shadow: 0 0 12px rgba(239,68,68,0.5); cursor: default; }
.mr-tile-blocked { background: var(--error) !important; border-color: var(--error) !important; cursor: default; }
@keyframes mr-explode { 0%{transform:scale(1)} 30%{transform:scale(1.4)} 60%{transform:scale(0.9)} 100%{transform:scale(1)} }
.mr-bomb-anim  { animation: mr-explode 0.4s ease forwards; }
.mr-tile-icon  { font-size: clamp(14px,4vw,22px); line-height: 1; }
.mr-tile-mult  { font-size: clamp(9px,2.5vw,12px); font-weight: 700; color: var(--cream); margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); font-family: var(--font-mono); }

.mr-zone-bar-wrap  { width: 10px; display: flex; align-items: stretch; padding: 8px 4px; }
.mr-zone-bar-track { flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
#mr-zone-bar-fill  { width: 100%; height: 0%; border-radius: 4px; transition: height 0.4s ease, background 0.4s ease; background: var(--cyan); }

.mr-controls {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 200;
  background: var(--bg);
  /* Prevent controls from squashing the grid on small screens */
  max-height: min(320px, 48dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Tighter bet-history height within the game screen so the grid keeps space */
#screen-treasurerush .bet-history-list {
  max-height: 100px;
}
.mr-controls .bet-input-row { position: relative; z-index: 210; }
.mr-btn { width: 100%; margin: 0 0 8px 0; }
.mr-stats-row { display: flex; gap: 8px; margin-bottom: 10px; }
.mr-stat { flex: 1; background: var(--surface-2); border-radius: 10px; padding: 8px; text-align: center; border: 1px solid var(--border); }
.mr-zone-stat { flex: 2; }
.mr-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.mr-stat-val { font-size: 13px; font-weight: 700; color: var(--cyan); font-family: var(--font-mono); }
#mr-mult { color: var(--success); font-size: 16px; }
#mr-shields { color: var(--cyan); }

/* ── Plinko Result List ───────────────────────────────────────────────────── */
#plinko-results-list { max-height: 200px; overflow-y: auto; }
.plinko-result-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 4px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.plinko-result-row.win  { color: var(--success); }
.plinko-result-row.loss { color: var(--error); }

/* ── Sell Preview ─────────────────────────────────────────────────────────── */
.sell-preview { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 12px; text-align: center; }
.sell-preview-rate   { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.sell-preview-amount { font-size: 22px; font-weight: 900; color: var(--success); font-family: var(--font-mono); }

/* ── Telegram Safe-Area ──────────────────────────────────────────────────── */
#onboarding-modal,
#profile-edit-modal,
.ton-confirm-overlay {
  padding-top: var(--tg-safe-top, 0px);
  box-sizing: border-box;
}

/* ── Select Dropdowns (Plinko rows, Mines count) ─────────────────────────── */
select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  height: 44px;
  outline: none;
  appearance: none;
  cursor: pointer;
}

select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,229,255,0.15);
}

/* ═══════════════════════════════════════════════════════════
   UNLK-iQ (iQ) — Player-Game Compatibility Score System
   Gold palette: #FFD700 / #E6A000 / rgba(255,215,0,...)
═══════════════════════════════════════════════════════════ */

/* ── iQ design tokens ──────────────────────────────────── */
:root {
  --iq-gold:      #FFD700;
  --iq-gold-2:    #C89B00;
  --iq-gold-dim:  rgba(255,215,0,0.10);
  --iq-gold-ring: rgba(255,215,0,0.28);
}

/* ── iQ banner inside catalogue ────────────────────────── */
.iq-banner {
  margin: 10px 16px 4px;
  background: var(--iq-gold-dim);
  border: 1px solid var(--iq-gold-ring);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.iq-banner-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.iq-banner-text { flex: 1; }

.iq-banner-title {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display, 'Barlow Condensed', Impact, sans-serif);
  letter-spacing: 1.5px;
  color: var(--iq-gold);
  margin-bottom: 2px;
}

.iq-banner-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}

.iq-banner-info-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--iq-gold-ring);
  background: none;
  color: var(--iq-gold);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
}

/* ── CM Banner (UNLK-iQ Score info banner in catalogue) ── */
.iq-banner {
  margin: 10px 16px 4px;
  background: #1a1a2e;
  border: 1px solid var(--iq-gold-ring);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.iq-banner-icon {
  flex-shrink: 0;
  width: 40px;
  height: 46px;
}

.iq-banner-text {
  flex: 1;
  min-width: 0;
}

.iq-banner-title {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display, 'Barlow Condensed', Impact, sans-serif);
  letter-spacing: 1.5px;
  color: var(--iq-gold);
  margin-bottom: 3px;
}

.iq-banner-desc {
  font-size: 11px;
  color: #aaa;
  line-height: 1.45;
}

.iq-banner-info-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--iq-gold-ring);
  background: none;
  color: var(--iq-gold);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
}

/* CM Banner — iQ info strip at top of catalogue */
.cm-banner {
  margin: 10px 16px 4px;
  background: var(--surface-2);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cm-banner:active { border-color: rgba(255,215,0,0.4); }
.cm-banner-icon { flex-shrink: 0; width: 40px; height: 46px; }
.cm-banner-text { flex: 1; min-width: 0; }
.cm-banner-title { font-size: 11px; font-weight: 700; font-family: var(--font-display); letter-spacing: 1.5px; color: var(--iq-gold); margin-bottom: 3px; }
.cm-banner-desc  { font-size: 11px; color: var(--muted); line-height: 1.45; }
.cm-banner-info-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,215,0,0.35);
  background: none;
  color: var(--iq-gold);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
}

/* Tier colours + matching outer glow */
.iq-tier-acclaimed {
  border-color: #22C55E;
  background: rgba(34,197,94,0.14);
  box-shadow: 0 0 8px rgba(34,197,94,0.28);
}
.iq-tier-acclaimed .iq-chip-lbl   { color: #22C55E; }
.iq-tier-acclaimed .iq-chip-num   { color: #4ade80; }
.iq-tier-acclaimed .iq-tier-name   { color: #4ade80; }

.iq-tier-acclaimed:hover {
  box-shadow: 0 0 16px rgba(34,197,94,0.55), 0 0 6px rgba(34,197,94,0.3);
}

.iq-tier-favorable {
  border-color: var(--iq-gold);
  background: rgba(255,215,0,0.10);
  box-shadow: 0 0 8px rgba(255,215,0,0.22);
}
.iq-tier-favorable .iq-chip-lbl   { color: var(--iq-gold); }
.iq-tier-favorable .iq-chip-num   { color: #FFE566; }
.iq-tier-favorable .iq-tier-name   { color: #FFE566; }

.iq-tier-favorable:hover {
  box-shadow: 0 0 16px rgba(255,215,0,0.55), 0 0 6px rgba(255,215,0,0.3);
}

.iq-tier-mixed {
  border-color: #F59E0B;
  background: rgba(245,158,11,0.10);
  box-shadow: 0 0 8px rgba(245,158,11,0.22);
}
.iq-tier-mixed .iq-chip-lbl   { color: #F59E0B; }
.iq-tier-mixed .iq-chip-num   { color: #fbbf24; }
.iq-tier-mixed .iq-tier-name  { color: #fbbf24; }

.iq-tier-mixed:hover {
  box-shadow: 0 0 16px rgba(245,158,11,0.55), 0 0 6px rgba(245,158,11,0.3);
}

.iq-tier-low {
  border-color: #EF4444;
  background: rgba(239,68,68,0.10);
  box-shadow: 0 0 8px rgba(239,68,68,0.22);
}
.iq-tier-low .iq-chip-lbl   { color: #EF4444; }
.iq-tier-low .iq-chip-num   { color: #f87171; }
.iq-tier-low .iq-tier-name  { color: #f87171; }

.iq-tier-low:hover {
  box-shadow: 0 0 16px rgba(239,68,68,0.55), 0 0 6px rgba(239,68,68,0.3);
}

/* ── Superscript ───────────────────────────────────────── */
.sup { font-size: 0.65em; vertical-align: super; line-height: 0; position: relative; top: -0.3em; }

/* ── iQ chip on lobby game-card ────────────────────────── */
.game-card { position: relative; }

.game-card-iq-chip {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 6px;
  padding: 3px 6px;
  border: 1px solid var(--iq-gold-ring);
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.game-card-iq-chip .gcc-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--font-display, 'Barlow Condensed', Impact, sans-serif);
  color: var(--iq-gold);
}

.game-card-iq-chip .gcc-num {
  font-size: 13px;
  font-weight: 900;
  font-family: var(--font-mono, 'DM Mono', monospace);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   iQ MODALS
═══════════════════════════════════════════════════════════ */

/* Shared overlay */
.iq-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 800;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.iq-modal-overlay.iq-open { display: flex; }
.iq-modal-overlay.iq-center { align-items: center; }

/* Bottom sheet base */
.iq-sheet {
  background: var(--surface-2, #1A1A1A);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border, #2E2E2E);
  width: 100%;
  max-width: 430px;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: cmSlideUp 0.28s cubic-bezier(0.32,0.72,0,1);
  max-height: 90dvh;
  overflow-y: auto;
}

/* Bottom sheet for cm-unlock-overlay */
.cm-sheet {
  background: var(--surface-2, #1A1A1A);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border, #2E2E2E);
  width: 100%;
  max-width: 430px;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: cmSlideUp 0.28s cubic-bezier(0.32,0.72,0,1);
  max-height: 90dvh;
  overflow-y: auto;
}

@keyframes cmSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Handle bar for bottom sheets */
.cm-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #2E2E2E);
  margin: 0 auto 18px;
}

/* Unlock modal */
.cm-unlock-game-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.cm-unlock-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border, #2E2E2E);
}
.cm-unlock-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--cream, #F0EDE8);
  margin-bottom: 3px;
}
.cm-unlock-provider {
  font-size: 12px;
  color: var(--muted, #666);
  margin-bottom: 8px;
}
.cm-unlock-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cm-unlock-tag {
  background: var(--surface-3, #252525);
  border: 1px solid var(--border, #2E2E2E);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  color: var(--muted, #666);
}
.cm-unlock-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-3, #252525);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  cursor: pointer;
}
.cm-unlock-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  flex-shrink: 0;
}
.cm-unlock-badge .cub-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--iq-gold, #D4A000);
  font-family: var(--font-display, 'Barlow Condensed', Impact, sans-serif);
}
.cm-unlock-badge .cub-score {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-mono, 'DM Mono', monospace);
  color: var(--cream, #F0EDE8);
}
.cm-unlock-tier {
  font-size: 14px;
  font-weight: 700;
  color: var(--cream, #F0EDE8);
}
.cm-unlock-tier-sub {
  font-size: 11px;
  color: var(--muted, #666);
  margin-top: 2px;
}
.cm-mini-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.cm-mini-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmb-icon {
  font-size: 11px;
  width: 16px;
  text-align: center;
}
.cmb-label {
  font-size: 11px;
  color: var(--muted, #666);
  width: 110px;
  flex-shrink: 0;
}
.cm-mini-bar-track {
  flex: 1;
  height: 5px;
  background: var(--surface-3, #252525);
  border-radius: 99px;
  overflow: hidden;
}
.cm-mini-bar-fill {
  height: 100%;
  border-radius: 99px;
}
.cmb-val {
  font-size: 11px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  color: var(--cream, #F0EDE8);
  width: 28px;
  text-align: right;
}
.cm-unlock-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cm-unlock-cost-label,
.cm-unlock-bal-label {
  font-size: 11px;
  color: var(--muted, #666);
  margin-bottom: 2px;
}
.cm-unlock-cost-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--cream, #F0EDE8);
}
.cm-unlock-bal-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan, #00E5FF);
  font-family: var(--font-mono, 'DM Mono', monospace);
}
.cm-unlock-btns {
  display: flex;
  gap: 10px;
}
.cm-btn-cancel {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border, #2E2E2E);
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted, #666);
  cursor: pointer;
  font-family: var(--font-ui, sans-serif);
}
.cm-btn-cancel:active {
  background: rgba(255, 255, 255, 0.05);
}
.cm-btn-unlock {
  flex: 2;
  background: var(--cyan, #00E5FF);
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bg, #090909);
  cursor: pointer;
  font-family: var(--font-ui, sans-serif);
}
.cm-btn-unlock:active {
  opacity: 0.85;
}
.cm-btn-unlock:disabled {
  background: var(--border, #2E2E2E);
  color: var(--muted, #666);
  cursor: not-allowed;
}

/* Center dialog */
.iq-dialog {
  background: var(--surface-2, #1A1A1A);
  border: 1px solid var(--iq-gold-ring);
  border-radius: 20px;
  padding: 24px 20px 20px;
  max-width: 320px;
  width: 92%;
  animation: cmPopIn 0.2s ease;
  position: relative;
}

@keyframes cmPopIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Sheet handle */
.iq-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #2E2E2E);
  margin: 0 auto 18px;
}

/* Close button */
.iq-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-1, #111);
  border: 1px solid var(--border, #2E2E2E);
  color: var(--muted, #555);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 1. iQ Info dialog ─────────────────────────────────── */
.iq-info-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.iq-info-hex {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.iq-info-head-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cream, #F0EDE8);
}

.iq-info-head-sub {
  font-size: 10px;
  letter-spacing: 2px;
  font-family: var(--font-display, 'Barlow Condensed', Impact, sans-serif);
  color: var(--iq-gold);
}

.iq-info-body {
  font-size: 13px;
  line-height: 1.55;
  color: #999;
  margin-bottom: 14px;
}

.iq-info-body strong {
  color: var(--cream, #F0EDE8);
  font-weight: 600;
}

/* Tier band row */
.iq-tier-bands {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}

.iq-tier-band {
  flex: 1;
  border-radius: 7px;
  padding: 5px 4px;
  text-align: center;
}

.iq-tier-band .ctb-range {
  font-size: 9px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  display: block;
}

.iq-tier-band .ctb-label {
  font-size: 9px;
  font-weight: 700;
  display: block;
  margin-top: 1px;
}

.ctb-green  { background:rgba(34,197,94,0.1);  border:1px solid rgba(34,197,94,0.25); }
.ctb-green  .ctb-range, .ctb-green  .ctb-label { color:#4ade80; }
.ctb-gold   { background:rgba(255,215,0,0.08);  border:1px solid rgba(255,215,0,0.25); }
.ctb-gold   .ctb-range, .ctb-gold   .ctb-label { color:var(--iq-gold); }
.ctb-yellow { background:rgba(245,158,11,0.1);  border:1px solid rgba(245,158,11,0.25); }
.ctb-yellow .ctb-range, .ctb-yellow .ctb-label { color:#fbbf24; }
.ctb-red    { background:rgba(239,68,68,0.1);   border:1px solid rgba(239,68,68,0.25); }
.ctb-red    .ctb-range, .ctb-red    .ctb-label { color:#f87171; }

/* Components mini list inside info dialog */
.iq-comps-mini { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }

.iq-comp-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.iq-comp-mini .cmc-icon { font-size:13px; width:18px; }
.iq-comp-mini .cmc-name { flex:1; color:#888; }
.iq-comp-mini .icc-w    { color:var(--iq-gold); opacity:0.75; font-family:var(--font-mono,monospace); font-size:10px; }

.iq-info-footer {
  font-size: 10px;
  color: var(--muted, #555);
  text-align: center;
  border-top: 1px solid var(--border, #2E2E2E);
  padding-top: 12px;
  line-height: 1.5;
}

/* ── 2. Unlock Confirm sheet ───────────────────────────── */
.iq-unlock-game-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.iq-unlock-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
  border: 1px solid var(--border, #2E2E2E);
}

.iq-unlock-name {
  font-size: 20px;
  font-weight: 800;
}

.iq-unlock-provider {
  font-size: 11px;
  color: var(--muted, #555);
  margin-top: 2px;
}

.iq-unlock-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.iq-unlock-tag {
  font-size: 10px;
  border-radius: 5px;
  padding: 2px 7px;
  border: 1px solid var(--border, #2E2E2E);
  color: var(--muted, #555);
  background: var(--surface-1, #111);
}

/* iQ score block inside unlock confirm */
.iq-unlock-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-1, #111);
  border: 1px solid var(--iq-gold-ring);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.iq-unlock-score-row:active { border-color: var(--iq-gold); }

.iq-unlock-badge {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  flex-shrink: 0;
  line-height: 1;
}

.iq-unlock-badge .cub-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--font-display, 'Barlow Condensed', Impact, sans-serif);
}

.iq-unlock-badge .cub-score {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-mono, 'DM Mono', monospace);
}

.iq-unlock-score-info { flex: 1; }
.iq-unlock-tier { font-size: 14px; font-weight: 700; }
.iq-unlock-tier-sub { font-size: 11px; color: var(--muted, #555); margin-top: 2px; }

/* Mini bar rows inside unlock confirm */
.iq-mini-bars { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }

.iq-mini-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.iq-mini-bar-row .cmb-icon { font-size:11px; }
.iq-mini-bar-row .cmb-label { font-size:11px; color:var(--muted,#555); flex:1; }

.iq-mini-bar-track {
  width: 100px;
  height: 5px;
  background: var(--surface-1, #111);
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}

.iq-mini-bar-fill {
  height: 100%;
  border-radius: 99px;
}

.cmb-fill-green  { background: linear-gradient(to right, #22C55E, #4ade80); }
.cmb-fill-gold   { background: linear-gradient(to right, #C89B00, #FFD700); }
.cmb-fill-yellow { background: linear-gradient(to right, #F59E0B, #fbbf24); }
.cmb-fill-red    { background: linear-gradient(to right, #EF4444, #f87171); }

.iq-mini-bar-row .cmb-val {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--cream, #F0EDE8);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Cost / balance row */
.iq-unlock-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-1, #111);
  border: 1px solid var(--border, #2E2E2E);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.iq-unlock-cost-label { font-size: 12px; color: var(--muted, #555); }
.iq-unlock-cost-val { font-size: 16px; font-weight: 800; font-family: var(--font-mono, monospace); color: var(--iq-gold); }
.iq-unlock-bal-label { font-size: 10px; color: var(--muted, #555); text-align: right; }
.iq-unlock-bal-val { font-size: 12px; font-weight: 700; font-family: var(--font-mono, monospace); color: var(--cyan, #00E5FF); text-align: right; }

/* Action buttons */
.iq-unlock-btns { display:flex; gap:10px; }

.iq-btn-unlock {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  background: var(--iq-gold);
  color: #000;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: opacity 0.15s;
}
.iq-btn-unlock:active { opacity: 0.85; }
.iq-btn-unlock:disabled { opacity: 0.4; cursor: not-allowed; }

.iq-btn-cancel {
  padding: 14px 16px;
  border-radius: 14px;
  background: none;
  border: 1px solid var(--border, #2E2E2E);
  color: var(--muted, #555);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
}

/* ── 3. iQ Detail sheet ────────────────────────────────── */
.iq-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, #2E2E2E);
  margin-bottom: 16px;
}

.iq-detail-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--iq-gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: radial-gradient(circle, #1e1640 0%, var(--bg, #090909) 100%);
  box-shadow: 0 0 20px rgba(255,215,0,0.18);
  line-height: 1;
}

.iq-detail-circle .cdc-num {
  font-size: 28px;
  font-weight: 900;
  font-family: var(--font-mono, 'DM Mono', monospace);
  color: var(--iq-gold);
}

.iq-detail-circle .cdc-denom {
  font-size: 10px;
  color: var(--muted, #555);
}

.iq-detail-meta { flex: 1; }
.iq-detail-label { font-size: 9px; letter-spacing: 2px; font-weight: 700; font-family: var(--font-display, 'Barlow Condensed', Impact, sans-serif); color: var(--iq-gold); margin-bottom: 3px; }
.iq-detail-game-name { font-size: 20px; font-weight: 800; color: var(--cream, #F0EDE8); }
.iq-detail-tier-text { font-size: 13px; font-weight: 600; margin-top: 2px; }

/* Component bar rows */
.iq-detail-comps { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }

.iq-detail-comp-row { display:flex; flex-direction:column; gap:5px; }

.iq-detail-comp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.iq-detail-comp-name {
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
}

.iq-detail-comp-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.iq-detail-comp-wt { font-size: 10px; color: #333; }
.iq-detail-comp-val { font-size: 13px; font-weight: 700; font-family: var(--font-mono, monospace); color: var(--cream, #F0EDE8); }

.iq-detail-bar-track {
  height: 6px;
  background: var(--surface-1, #111);
  border-radius: 99px;
  overflow: hidden;
}

.iq-detail-bar-fill { height:100%; border-radius:99px; }

.cdbf-green  { background: linear-gradient(to right, #22C55E, #4ade80); }
.cdbf-gold   { background: linear-gradient(to right, #C89B00, #FFD700); }
.cdbf-yellow { background: linear-gradient(to right, #F59E0B, #fbbf24); }
.cdbf-red    { background: linear-gradient(to right, #EF4444, #f87171); }

.iq-detail-sources {
  border-top: 1px solid var(--border, #2E2E2E);
  padding-top: 12px;
  font-size: 10px;
  color: var(--muted, #555);
  line-height: 1.55;
}

.iq-detail-sources strong { color: #444; }

/* Proprietary methodology note — replaces signal breakdown */
.cm-detail-proprietary {
  border-top: 1px solid var(--border, #2E2E2E);
  padding-top: 12px;
  font-size: 11px;
  color: var(--muted, #888);
  line-height: 1.6;
  font-style: italic;
}

/* ── Bet History Component (shared across all games) ───────────────────────── */
.bet-history-section {
  margin-top: 14px;
  padding: 0 4px;
}

.bet-history-header {
  font-size: 13px;
  font-weight: 700;
  color: #00E5FF;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bet-history-cols {
  display: grid;
  grid-template-columns: 2.5fr 1.5fr 1.5fr 1.5fr;
  gap: 4px;
  padding: 0 4px 4px;
  border-bottom: 1px solid #1A1A1A;
  margin-bottom: 4px;
}

.bet-history-cols span {
  font-size: 10px;
  font-weight: 600;
  color: #555555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bet-history-cols span:nth-child(n+2) { text-align: right; }

.bet-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
}

.bet-history-list::-webkit-scrollbar { width: 3px; }
.bet-history-list::-webkit-scrollbar-track { background: transparent; }
.bet-history-list::-webkit-scrollbar-thumb { background: #2E2E2E; border-radius: 2px; }

.bet-history-row {
  display: grid;
  grid-template-columns: 2.5fr 1.5fr 1.5fr 1.5fr;
  gap: 4px;
  padding: 5px 4px;
  border-radius: 6px;
  background: #111111;
  align-items: center;
  transition: background 0.15s;
}

.bet-history-row:hover { background: #1A1A1A; }

.bet-history-row span {
  font-size: 12px;
  color: #F0EDE8;
  font-family: 'DM Mono', monospace;
}

.bet-history-row span:nth-child(n+2) { text-align: right; }

/* Round ID: muted and shortened */
.bet-history-row .bh-id {
  font-size: 10px;
  color: #555555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
}

/* Multiplier colour — win vs loss */
.bet-history-row.bh-win .bh-mult { color: #22C55E; }
.bet-history-row.bh-loss .bh-mult { color: #EF4444; }
.bet-history-row.bh-win .bh-win-amt { color: #22C55E; font-weight: 700; }
.bet-history-row.bh-loss .bh-win-amt { color: #555555; }

.bet-history-empty {
  text-align: center;
  padding: 16px 0;
  font-size: 12px;
  color: #555555;
}

/* ── Practice (Demo) Mode UI ──────────────────────────────────────────────────
   Surfaces the existing /api/demo/session backend in the Mini App. Three
   pieces, all driven by miniapp/js/demoMode.js:
     • .demo-pill          — small toggle in the .header-right cluster
     • .demo-banner        — ribbon at the top of every game body
     • body.demo-mode-active — global hook for any screen-level affordance
   The pill stays neutral when off and switches to a clear cyan "ON" treatment
   when active so the player can never miss what mode they're in. */
.demo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  margin-right: 4px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.demo-pill:hover {
  border-color: var(--cyan);
  color: var(--cream);
}
.demo-pill:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.demo-pill.is-on {
  background: var(--cyan);
  color: var(--bg);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}
.demo-pill.is-on::before {
  content: '● ';
  color: var(--bg);
}

/* Practice-mode banner sits flush below the fixed app bar (top:56px) on the
   default block-layout game screens, and naturally takes its place as the
   second flex row on the column-layout screens (Plinko, Treasure Rush). */
.demo-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 60px 12px 0;     /* clears the 56px fixed header on block screens */
  padding: 8px 12px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 10px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.demo-banner.is-on { display: flex; }

/* On flex-column screens the .header is in-flow at the top of the column, so
   we don't need the 60px clearance — flex order handles spacing. */
#screen-plinko .demo-banner,
#screen-treasurerush .demo-banner,
#screen-treasurerush-mp .demo-banner {
  margin-top: 8px;
  flex-shrink: 0;
}

.demo-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  animation: demo-banner-pulse 1.6s ease-in-out infinite;
}
@keyframes demo-banner-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.00; }
}

.demo-banner-label { flex: 1; }

.demo-banner-chips {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
  font-size: 12px;
  text-transform: none;
}

/* Dim the real-money wallet pill while in demo so it's clear bets are
   coming out of practice chips, not UC. */
body.demo-mode-active .wallet-pill {
  opacity: 0.55;
}

/* ── UNLK Brand Loading Screen ─────────────────────────────────────────────── */
#unlk-loading-screen {
  position: fixed;
  inset: 0;
  background: #090909;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

#unlk-loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.unlk-loader-logo {
  width: 140px;
  height: 140px;
  animation: unlk-pulse 2s ease-in-out infinite;
}

@keyframes unlk-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.6)); }
  50%       { opacity: 0.7; filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.9)); }
}

.unlk-loader-bar-wrap {
  width: 120px;
  height: 2px;
  background: #1A1A1A;
  border-radius: 2px;
  overflow: hidden;
}

.unlk-loader-bar {
  height: 100%;
  background: #00E5FF;
  border-radius: 2px;
  animation: unlk-bar 1.6s ease-in-out infinite;
}

@keyframes unlk-bar {
  0%   { width: 0%;   margin-left: 0; }
  50%  { width: 70%;  margin-left: 0; }
  100% { width: 0%;   margin-left: 120px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MULTIPLAYER LOBBY SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.mode-section { margin-bottom: 16px; padding-top: 4px; }

/* MP game card */
.mp-card { position: relative; }
.game-card.treasurerush-mp { background: linear-gradient(135deg, #92400e, #451a03); border-color: #FF6B6B; }

.game-badge--live {
  background: #FF6B6B;
  animation: trmp-pulse-badge 1.6s ease-in-out infinite;
}

@keyframes trmp-pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.mp-player-count {
  font-size: 11px;
  color: #00E5FF;
  margin-top: 4px;
  font-weight: 600;
}

/* ── Lobby 2-tab panels ──────────────────────────────────────────────────── */
/* Reuses .store-subtab-bar / .store-subtab for the tab bar itself.          */
/* Each panel fills the scrollable area below the tab bar.                   */
.lobby-tab-panel {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════════
   MULTIPLAYER GAME SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lobby panel ─────────────────────────────────────────────────────────── */
.trmp-lobby-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  /* flex child of the screen — fill remaining height and scroll internally
     so content never overflows and pushes the header off-screen */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.trmp-lobby-title {
  font-size: 18px;
  font-weight: 700;
  color: #E0E0E0;
  text-align: center;
}

/* ── Progressive jackpot banner (lobby) ─────────────────────────────────── */
.trmp-lobby-jackpot-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 12px;
  padding: 10px 20px;
  width: 100%;
  max-width: 300px;
}

.trmp-lobby-jackpot-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}

.trmp-lobby-jackpot-amount {
  font-size: 22px;
  font-weight: 800;
  color: #FFD700;
  font-family: var(--font-mono);
  animation: trmp-jackpot-glow 2s ease-in-out infinite;
}

/* ── Stake selector ──────────────────────────────────────────────────────── */
.trmp-stake-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
}

.trmp-stake-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}

.trmp-stake-options {
  display: flex;
  gap: 8px;
}

.trmp-stake-opt {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #C0C0C0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.trmp-stake-opt:hover:not(:disabled) {
  border-color: rgba(0,229,255,0.5);
  background: rgba(0,229,255,0.08);
  color: #E0E0E0;
}

.trmp-stake-opt--active {
  border-color: #00E5FF !important;
  background: rgba(0,229,255,0.14) !important;
  color: #00E5FF !important;
  box-shadow: 0 0 8px rgba(0,229,255,0.25);
}

.trmp-stake-opt:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Quick rules strip (always visible) ──────────────────────────────────── */
.trmp-rules-strip {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 2px 0 4px;
}

.trmp-rule-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #B0B0B0;
}

.trmp-rule-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 13px;
  margin-top: 1px;
}

.trmp-rule-row strong {
  color: #E0E0E0;
  font-weight: 600;
}

.trmp-lobby-players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 0;
}

.trmp-lobby-player {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid #00E5FF;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #E0E0E0;
  background: rgba(0, 229, 255, 0.06);
}

.trmp-lobby-player-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00E5FF;
}

/* ── Big countdown ring ──────────────────────────────────────────────────── */
.trmp-countdown-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid #00E5FF;
  box-shadow: 0 0 18px rgba(0,229,255,0.35);
  margin: 8px auto;
  animation: trmp-ring-pulse 1s ease-in-out infinite alternate;
}
.trmp-countdown-number {
  font-size: 38px;
  font-weight: 800;
  color: #00E5FF;
  line-height: 1;
}
.trmp-countdown-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@keyframes trmp-ring-pulse {
  from { box-shadow: 0 0 10px rgba(0,229,255,0.25); }
  to   { box-shadow: 0 0 24px rgba(0,229,255,0.55); }
}

/* ── Player count pill ───────────────────────────────────────────────────── */
.trmp-lobby-player-count {
  font-size: 13px;
  color: #888;
  text-align: center;
  margin: 4px 0 2px;
}
.trmp-lobby-player-count span {
  color: #00E5FF;
  font-weight: 700;
}


/* ── Join button: searching state ────────────────────────────────────────── */
.trmp-join-btn--searching {
  background: rgba(0, 229, 255, 0.25) !important;
  color: rgba(0, 0, 0, 0.45) !important;
  cursor: not-allowed;
  animation: trmp-btn-searching-pulse 1.6s ease-in-out infinite;
}
@keyframes trmp-btn-searching-pulse {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 1.00; }
}

/* ── Screen containment: lock MP game to viewport height ────────────────── */
/* Overrides base .screen { min-height: 100vh; display: block } so all     */
/* children stack inside the viewport and the cashout btn is always visible */
#screen-treasurerush-mp.active {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--tg-safe-top, 0px)); /* subtract Telegram chrome height — the
                         #tg-safe-area-spacer shifts this screen down by --tg-safe-top in the
                         normal flow, so without this correction the screen overflows the viewport
                         by that amount, pushing the cashout button off-screen */
  min-height: 0;      /* override base .screen { min-height: 100vh } — on iOS 100vh > 100dvh
                         which would push the cashout button below the visible fold */
  padding-top: 0; /* reset base .screen { padding-top: 56px } — that reserved space for the
                    globally fixed header; here the header is in-flow (position:relative) so it
                    needs no top clearance. #tg-safe-area-spacer already positions the screen
                    below the Telegram chrome — adding --tg-safe-top here would double-offset it */
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* reserve space for bottom nav + clearance */
  position: relative; /* contain toast + placement banner absolute children */
  /* NOTE: NO overflow:hidden here — that would break position:sticky on .header */
}

/* Header is part of the flex column — NOT position:fixed in this layout.
   Global .header rules (left:50%, transform:translateX(-50%), top:--tg-safe-top)
   must all be reset so the element sits flush at the top of the flex container. */
#screen-treasurerush-mp .header {
  flex-shrink: 0;
  position: relative; /* in-flow so the game area can fill the remaining height */
  top: 0;             /* reset: global uses top:--tg-safe-top which shifts relative elements */
  left: 0;            /* reset: centering trick (left:50%) not valid in flex flow */
  transform: none;    /* reset: translateX(-50%) not valid in flex flow */
  width: 100%;        /* fill the flex parent width */
  max-width: 100%;    /* override 430px cap — screen container is already constrained */
  z-index: 50;        /* match global header z-index so it sits above game content */
}

/* ── Game area ───────────────────────────────────────────────────────────── */
.trmp-game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 16px;
  flex: 1;
  min-height: 0;     /* allow flex to shrink below content size */
  overflow: hidden;  /* clip children; .trmp-grid-wrapper scrolls internally */
  position: relative; /* anchor for result overlay + toast absolute positioning */
}

/* ── HUD ─────────────────────────────────────────────────────────────────── */
.trmp-hud {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 360px;
  background: #111;
  border-radius: 12px;
  padding: 10px 8px;
  border: 1px solid #1E1E1E;
  flex-shrink: 0; /* never let the grid crowd out the HUD */
}

.trmp-hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.trmp-hud-label {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.trmp-hud-value {
  font-size: 15px;
  font-weight: 700;
  color: #E0E0E0;
}

.trmp-jackpot-value {
  color: #FFD700;
  animation: trmp-jackpot-glow 2s ease-in-out infinite;
}

@keyframes trmp-jackpot-glow {
  0%, 100% { text-shadow: 0 0 6px rgba(255, 215, 0, 0.4); }
  50%       { text-shadow: 0 0 14px rgba(255, 215, 0, 0.9); }
}

.trmp-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.trmp-tile:active { transform: scale(0.88); }

/* Tile states */
.trmp-tile--fog {
  background: #111;
  border: 1px solid #1C1C1C;
  cursor: default;
}

.trmp-tile--frontier {
  background: #1A2020;
  border: 1px solid rgba(0, 229, 255, 0.35);
  cursor: pointer;
  animation: trmp-frontier-pulse 1.8s ease-in-out infinite;
}

@keyframes trmp-frontier-pulse {
  0%, 100% { border-color: rgba(0, 229, 255, 0.25); }
  50%       { border-color: rgba(0, 229, 255, 0.7); }
}

.trmp-tile--empty {
  background: #1E1E1E;
  border: 1px solid #272727;
  color: #444;
  cursor: default;
}

.trmp-tile--chest {
  background: rgba(255, 215, 0, 0.12);
  border: 1.5px solid rgba(255, 215, 0, 0.6);
  font-size: 9px;
  font-weight: 700;
  color: #FFD700;
  cursor: default;
}

.trmp-tile--chest-hidden {
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.25);
  cursor: pointer;
}

.trmp-tile--chest-claimed {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  color: #444;
  cursor: default;
  opacity: 0.6;
}

.trmp-tile--cleared {
  background: #181818;
  border: 1px solid #222;
  color: #333;
  cursor: default;
}

.trmp-tile--treasure {
  background: rgba(255, 215, 0, 0.25);
  border: 2px solid #FFD700;
  cursor: default;
}

.trmp-tile--treasure-pulse {
  animation: trmp-treasure-pulse 0.8s ease-in-out infinite;
}

@keyframes trmp-treasure-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
  50%       { box-shadow: 0 0 20px rgba(255, 215, 0, 1); }
}

/* Multiplier pop animation */
.trmp-mult-pop {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  color: #FFD700;
  white-space: nowrap;
  pointer-events: none;
  animation: trmp-pop 0.9s ease-out forwards;
  z-index: 10;
}

@keyframes trmp-pop {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px); }
}

/* ── Players bar ─────────────────────────────────────────────────────────── */
.trmp-players-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 360px;
}

.trmp-player-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid #333;
  border-radius: 20px;
  font-size: 12px;
  background: #111;
  color: #CCC;
}

.trmp-player-pill--me {
  background: rgba(0, 229, 255, 0.06);
}

.trmp-player-pill-name { font-weight: 600; }
.trmp-bot-tag { font-size: 10px; opacity: 0.7; vertical-align: middle; }

.trmp-player-pill-mult {
  color: #888;
  font-size: 11px;
}

/* ── Placement phase ─────────────────────────────────────────────────────────── */

.trmp-placement-banner {
  background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(168,255,62,0.08));
  border: 1px solid rgba(0,229,255,0.35);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  text-align: center;
}

.trmp-placement-title {
  font-size: 15px;
  font-weight: 700;
  color: #00E5FF;
  letter-spacing: 0.5px;
}

.trmp-placement-sub {
  font-size: 12px;
  color: #ccc;
  margin-top: 2px;
}

.trmp-placement-timer {
  font-size: 13px;
  color: #FFD700;
  font-weight: 600;
  margin-top: 4px;
}

.trmp-placement-timer span {
  font-size: 18px;
  font-weight: 800;
}

/* Tiles in placement mode — NO !important so inline zone-depth colours show */
.trmp-tile--selectable {
  /* background and border-color injected inline per quadrant colour */
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.trmp-tile--selectable:hover,
.trmp-tile--selectable:active {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3) inset;
}

.trmp-tile--unselectable {
  /* background and border-color injected inline (zone-depth tint) */
  opacity: 0.38;
  cursor: default;
}

.trmp-tile--placed {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 2px solid !important;  /* colour set inline per quadrant */
  cursor: default;
  font-size: 14px;
}

.trmp-tile--placed-me {
  box-shadow: 0 0 10px currentColor;
  animation: trmp-placed-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes trmp-placed-pulse {
  from { opacity: 0.85; }
  to   { opacity: 1.0; box-shadow: 0 0 16px currentColor; }
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.trmp-actions {
  width: 100%;
  flex-shrink: 0; /* never let the grid squeeze the cashout button off screen */
}

.trmp-cashout-btn {
  width: 100%;
  background: linear-gradient(135deg, #1a4a1a 0%, #0d2e0d 100%);
  border: 1.5px solid #2a7a2a;
  color: #A8FF3E;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.trmp-cashout-btn:hover {
  background: linear-gradient(135deg, #2a6a2a 0%, #1a4a1a 100%);
  border-color: #A8FF3E;
}

/* ── Result overlay ──────────────────────────────────────────────────────── */
.trmp-result-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(3px);
}

.trmp-result-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  width: calc(100% - 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* Bomb-specific: red border to signal the critical game event */
.trmp-result-card--bomb {
  border-color: var(--error);
}

.trmp-result-icon  { font-size: 48px; }
.trmp-result-title { font-size: 20px; font-weight: 800; color: var(--cream); }
.trmp-result-sub   { font-size: 22px; font-weight: 700; }
/* Win colour = cyan (brand action/win), loss colour = brand error red */
.trmp-result-win   { color: var(--cyan); }
.trmp-result-loss  { color: var(--error); }
.trmp-result-detail { font-size: 13px; color: var(--muted); }
/* Payout lines */
.trmp-result-payout         { font-size: 24px; font-weight: 800; color: var(--cyan); }
.trmp-result-payout-neutral { font-size: 20px; font-weight: 700; color: var(--cream); }
/* Jackpot-specific */
.trmp-result-jackpot-title  { color: var(--cyan); letter-spacing: 2px; }
.trmp-result-jackpot-pulse  { animation: jackpot-pulse 0.8s ease-in-out infinite alternate; }
@keyframes jackpot-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}
/* Carryover / grow lines */
.trmp-result-carry { color: var(--warning); font-size: 15px; font-weight: 600; }
.trmp-result-muted { color: var(--muted); font-size: 13px; }

/* Live "players still digging" status pill inside the bomb card */
.trmp-result-bomb-status {
  background: var(--surface-1);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Share CTA below the primary cash-out button — outlined accent style so
   it's visually distinct and accessible without competing with the primary CTA.
   Meets WCAG AA contrast on dark backgrounds (cyan #00E5FF on #121212 = 9.8:1). */
.trmp-share-ghost {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1.5px solid var(--cyan);
  border-radius: 8px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.trmp-share-ghost:hover,
.trmp-share-ghost:active {
  background: rgba(0, 229, 255, 0.12);
  color: #fff;
}

/* trmp-toast removed — all notifications now use the global .toast system */

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   TREASURE RUSH MULTIPLAYER — ENHANCED STYLES (v2)
   Matches single-player SP look and feel:
   • Zone-colored tile backgrounds (Surface=green / Midshaft=blue / Core=red)
   • SP tile types: gold / silver / bronze / shield / neutral
   • 19×19 scrollable grid with minimap overlay
   • Zone depth bar (left strip)
   • Shield display and player position glow
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout: zone bar + scrollable grid ────────────────────────────────── */
.trmp-layout {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  min-height: 0; /* must be 0 so flex can shrink and cashout btn stays visible */
}

/* Zone depth bar — mirrors SP mr-zone-bar */
.trmp-zone-bar-wrap {
  width: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 3px 6px 4px;
  gap: 4px;
}

.trmp-zone-bar-track {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#trmp-zone-bar-fill {
  width: 100%;
  height: 0%;
  border-radius: 4px;
  transition: height 0.4s ease, background 0.4s ease;
  background: var(--cyan, #00E5FF);
}

.trmp-zone-label-wrap {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-size: 7px;
  color: #555;
  letter-spacing: 0.5px;
  text-align: center;
  height: 0; /* collapses — label is decoration only */
  overflow: visible;
}

#trmp-zone-label {
  font-size: 8px;
  color: #666;
  white-space: nowrap;
}

/* ── Scrollable grid wrapper — 19×19 larger than viewport ──────────────── */
.trmp-grid-wrapper {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding: 6px;
}

/* ── Grid — 19 columns, scrollable in both axes ────────────────────────── */
.trmp-grid {
  display: grid;
  grid-template-columns: repeat(19, 40px);
  grid-template-rows:    repeat(19, 40px);
  gap: 3px;
  width: max-content;
}

/* ── Tile base ──────────────────────────────────────────────────────────── */
.trmp-tile {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.10s, border-color 0.15s;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.trmp-tile:active { transform: scale(0.88); }

/* ── Tile icon and mult text (inside tiles) ────────────────────────────── */
.trmp-tile-icon {
  font-size: clamp(13px, 3.5vw, 20px);
  line-height: 1;
}

.trmp-tile-mult {
  font-size: clamp(10px, 2.5vw, 12px); /* was clamp(8px,2vw,11px) — too tiny on mobile */
  font-weight: 700;
  color: var(--cream, #F0EDE8);
  margin-top: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.trmp-tile-question {
  font-size: 15px;
  color: rgba(240,237,232,0.25);
  font-weight: 700;
}

/* ── Fog (unrevealed, not adjacent) ────────────────────────────────────── */
.trmp-tile--fog {
  /* background + border-color set inline per zone */
  cursor: default;
}

/* ── Frontier (adjacent, clickable) ────────────────────────────────────── */
.trmp-tile--frontier {
  cursor: pointer;
  animation: trmp-frontier-pulse 1.8s ease-in-out infinite;
}

@keyframes trmp-frontier-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0,229,255,0.2); }
  50%       { box-shadow: 0 0 12px rgba(0,229,255,0.5); }
}

/* ── Revealed tile types ────────────────────────────────────────────────── */
/* Empty — neutral floor, no reward */
.trmp-tile--empty {
  background: #1e3a2a !important;
  border-color: rgba(34,197,94,0.20) !important;
}

/* Regular — low-value reward (warm amber tint) */
.trmp-tile--regular {
  background: #3a2e1a !important;
  border-color: #c97b30 !important;
  box-shadow: 0 0 7px rgba(201,123,48,0.28);
}

/* Small reward — medium-value reward (blue-grey gem tint) */
.trmp-tile--small-reward {
  background: #1e2a3a !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 9px rgba(148,163,184,0.45);
  animation: trmp-sr-glow 2s ease-in-out infinite;
}

@keyframes trmp-sr-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(148,163,184,0.40); }
  50%       { box-shadow: 0 0 18px rgba(148,163,184,0.75); }
}

/* Shield (cyan glow) */
.trmp-tile--shield {
  background: #1a2a3a !important;
  border-color: var(--cyan, #00E5FF) !important;
  box-shadow: 0 0 9px rgba(0,229,255,0.28);
}

/* Claimed reward tile — dimmed version */
.trmp-tile--claimed {
  opacity: 0.45;
  cursor: default;
}

/* Bomb (shown on the local player's fatal tile) */
.trmp-tile--bomb {
  background: rgba(239,68,68,0.28) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239,68,68,0.6) !important;
  cursor: default;
  animation: trmp-bomb-flash 0.5s ease-out;
}

@keyframes trmp-bomb-flash {
  0%   { background: rgba(239,68,68,0.70); box-shadow: 0 0 24px rgba(239,68,68,1.0); }
  100% { background: rgba(239,68,68,0.28); box-shadow: 0 0 14px rgba(239,68,68,0.6); }
}

/* Bomb eligible cleared */
.trmp-tile--cleared {
  background: #181818 !important;
  border-color: rgba(255,255,255,0.06) !important;
  cursor: default;
  opacity: 0.55;
}

/* Visible obstacle — impassable rock terrain. Pre-revealed at game start.
   Distinct dark slate texture so players can plan paths around them. */
.trmp-tile--obstacle {
  background: repeating-linear-gradient(
    45deg,
    #2a2a2e,
    #2a2a2e 3px,
    #1f1f23 3px,
    #1f1f23 6px
  ) !important;
  border-color: rgba(255,255,255,0.12) !important;
  cursor: not-allowed;
  opacity: 0.85;
}
.trmp-tile--obstacle .trmp-tile-icon {
  opacity: 0.55;
  filter: grayscale(0.4);
}

/* Mult counter — at-cap state. Signals "next chest in this zone gets clamped". */
.trmp-mult--capped {
  color: #FFB347 !important;          /* amber — distinct from green-go state */
  text-shadow: 0 0 6px rgba(255,179,71,0.45);
  font-variant-numeric: tabular-nums;
}

/* Treasure-finder bonus line in the win overlay */
.trmp-result-bonus {
  color: #FFD700;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(255,215,0,0.5);
  margin-top: 4px;
}

/* Treasure (pulsing gold) */
.trmp-tile--treasure {
  background: rgba(255,215,0,0.22) !important;
  border-color: #FFD700 !important;
}

.trmp-tile--treasure-pulse {
  animation: trmp-treasure-pulse 0.8s ease-in-out infinite;
}

@keyframes trmp-treasure-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.6); }
  50%       { box-shadow: 0 0 22px rgba(255,215,0,1.0); }
}

/* ── Player position glow (overlaid on any tile type) ───────────────────── */
.trmp-tile--player-here {
  outline-offset: 1px;
}

/* ── Dig animation ──────────────────────────────────────────────────────── */
@keyframes trmp-dig {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.72) rotate(-6deg); }
  100% { transform: scale(1); }
}

.trmp-dig-anim { animation: trmp-dig 0.25s ease forwards; }

/* ── Minimap canvas overlay ─────────────────────────────────────────────── */
.trmp-minimap {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 95px;
  height: 95px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  background: #080808;
  z-index: 20;
  pointer-events: none; /* doesn't block grid taps */
  image-rendering: pixelated;
}

/* ── Bottom controls container — lives OUTSIDE .trmp-game-area
   so overflow:hidden never clips the stats bar or cashout button.
   It is a flex-shrink:0 sibling of .trmp-game-area in the screen
   flex column, pinned to the bottom of the visible viewport. ──── */
.trmp-bottom-controls {
  flex-shrink: 0;
  width: 100%;
  padding: 0 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Stats row (shields / zone / active players) ────────────────────────── */
.trmp-stats-row {
  display: flex;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
}

.trmp-stat {
  flex: 1;
  background: var(--surface-2, #111);
  border-radius: 10px;
  padding: 7px 8px;
  text-align: center;
  border: 1px solid var(--border, #1e1e1e);
}

.trmp-stat-zone { flex: 2; }

.trmp-stat-label {
  font-size: 10px;
  color: var(--muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.trmp-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--cream, #F0EDE8);
  min-height: 16px;
}

#trmp-mp-shields { color: var(--cyan, #00E5FF); letter-spacing: 1px; }
#trmp-zone-display { color: #999; font-size: 11px; }

/* ── MP grid: 19×19 2D-pan fix ───────────────────────────────────────────────
   The 19×19 grid at 40px/tile is ~814px wide — wider than any phone screen.
   The wrapper must fill the full layout width and scroll in BOTH axes.
   Without width:100% on .trmp-layout the flex container shrinks to content
   width, and .trmp-game-area's align-items:center clips horizontal overflow.
   Scoped to #screen-treasurerush-mp so SP styles are untouched.
   ─────────────────────────────────────────────────────────────────────────── */
#screen-treasurerush-mp .trmp-layout {
  width: 100%;          /* ensure layout fills game-area width (align-items:center would shrink it) */
}

#screen-treasurerush-mp .trmp-grid-wrapper {
  overflow: auto;                   /* 2D scroll in both axes */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;       /* allow finger pan in both directions */
  overscroll-behavior: contain;    /* prevent pull-to-refresh when panning grid */
}

/* ── Placement phase — other-quadrant zone tint ──────────────────────────────
   Shown for the three edge zones that aren't the local player's.
   Background and border-color are set inline (zone-depth tint + quadrant tint).
   ─────────────────────────────────────────────────────────────────────────── */
.trmp-tile--other-zone {
  opacity: 0.50;
  cursor: default;
  border-width: 1px;
  border-style: solid;
  /* background and border-color injected inline per quadrant */
}

/* ── Enhanced HUD: Live Pot styling ─────────────────────────────────────── */
.trmp-hud-pot .trmp-hud-label {
  font-weight: 700;
  color: #FFD700;
  font-size: 11px;
}

.trmp-hud-pot .trmp-jackpot-value {
  font-size: 17px;
  font-weight: 800;
}

/* ── Player pill shields badge ──────────────────────────────────────────── */
.trmp-pill-shields {
  font-size: 10px;
  color: var(--cyan, #00E5FF);
  font-weight: 700;
  background: rgba(0,229,255,0.08);
  border-radius: 6px;
  padding: 1px 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DICE GAME
   ═══════════════════════════════════════════════════════════════════════════ */
.dice-mode-row {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.dice-mode-btn {
  flex: 1; padding: 10px; border-radius: 12px; border: 1px solid #2E2E2E;
  background: #111; color: #aaa; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.dice-mode-btn.active {
  background: var(--cyan, #00E5FF); color: #000; border-color: var(--cyan, #00E5FF);
}

.dice-stats-bar {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.dice-stat {
  flex: 1; background: #111; border: 1px solid #1e1e1e; border-radius: 12px;
  padding: 10px 12px; text-align: center;
}
.dice-stat-target { flex: 1.4; }
.dice-stat-label  { font-size: 11px; color: #666; margin-bottom: 4px; }
.dice-stat-value  { font-size: 16px; font-weight: 700; color: #fff; }

.dice-slider-wrap { margin-bottom: 8px; }
.dice-slider {
  -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px;
  outline: none; cursor: pointer;
}
.dice-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid #00E5FF; cursor: pointer; box-shadow: 0 0 6px rgba(0,229,255,0.5);
}
.dice-slider-ticks {
  display: flex; justify-content: space-between; padding: 4px 2px 0;
  font-size: 11px; color: #555;
}
.dice-quick-targets {
  display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.dice-quick-btn {
  padding: 6px 14px; border-radius: 8px; border: 1px solid #2E2E2E;
  background: #111; color: #ccc; font-size: 13px; cursor: pointer;
  transition: background 0.12s;
}
.dice-quick-btn:active { background: #1e1e1e; }

/* dice-result-overlay removed — results now shown via unified toast system */

/* ═══════════════════════════════════════════════════════════════════════════
   LIMBO GAME
   ═══════════════════════════════════════════════════════════════════════════ */
.limbo-counter-container {
  text-align: center; padding: 32px 16px; border-radius: 20px;
  background: #0a0a0a; border: 1px solid #1e1e1e; margin-bottom: 8px;
  transition: border-color 0.3s;
}
.limbo-counter-container.win  { border-color: #00E5FF; box-shadow: 0 0 20px rgba(0,229,255,0.2); }
.limbo-counter-container.loss { border-color: #ff4444; box-shadow: 0 0 20px rgba(255,68,68,0.2); }
.limbo-counter-number {
  font-size: 56px; font-weight: 800; color: #fff; line-height: 1; font-family: monospace;
}
.limbo-counter-sub { font-size: 12px; color: #555; margin-top: 6px; }

/* limbo-result-overlay removed — results now shown via unified toast system */

/* ═══════════════════════════════════════════════════════════════════════════
   KENO GAME
   ═══════════════════════════════════════════════════════════════════════════ */
.keno-controls {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
}
.keno-picks-count { font-size: 14px; font-weight: 600; color: #00E5FF; }
.keno-ctrl-btn {
  padding: 6px 12px; border-radius: 8px; border: 1px solid #2E2E2E;
  background: #111; color: #ccc; font-size: 13px; cursor: pointer;
}
.keno-ctrl-btn:active { background: #1e1e1e; }

.keno-grid {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 4px; margin-bottom: 12px;
}
.keno-cell {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid #2E2E2E;
  background: #111; color: #ccc; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.1s; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.keno-cell:active { opacity: 0.7; }
.keno-cell.selected { background: #00E5FF22; border-color: #00E5FF; color: #00E5FF; }
.keno-cell.drawn    { background: #ffffff11; border-color: #555; color: #aaa; }
.keno-cell.hit      { background: #00E5FF44; border-color: #00E5FF; color: #fff;
                      box-shadow: 0 0 8px rgba(0,229,255,0.4); }

.keno-payout-section {
  background: #0a0a0a; border: 1px solid #1e1e1e; border-radius: 14px;
  padding: 12px; margin-bottom: 12px;
}
.keno-payout-title { font-size: 12px; color: #666; margin-bottom: 8px; font-weight: 600; text-transform: uppercase; }
.keno-payout-table { display: flex; flex-wrap: wrap; gap: 6px; }
.keno-pay-row {
  display: flex; gap: 6px; align-items: center;
  background: #111; border: 1px solid #1e1e1e; border-radius: 8px;
  padding: 4px 10px; font-size: 12px;
}
.keno-pay-row span:first-child { color: #666; }
.keno-pay-row span:last-child  { color: #00E5FF; font-weight: 700; }
.keno-pay-hint { font-size: 12px; color: #444; }

/* keno-result-overlay removed — results now shown via unified toast system */

/* ═══════════════════════════════════════════════════════════════════════════
   PROVABLY FAIR — fairness strip, bottom sheet, tabs, seeds, verify UI
   Class names match fairness.js exactly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fairness strip (rendered into .fairness-panel by loadFairnessPanel) ─── */
.fairness-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d1a0d;
  border: 1px solid #1a3a1a;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0 6px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s;
}
.fairness-strip:hover  { border-color: #00E5FF55; background: #0f1f0f; }
.fairness-strip:active { background: #0a140a; }

.fairness-strip__icon    { font-size: 15px; line-height: 1; flex-shrink: 0; }
.fairness-strip__label   { font-size: 12px; color: #00E5FF; font-weight: 600; letter-spacing: 0.4px; }
.fairness-strip__seed    { font-size: 10px; color: #444; font-family: 'Courier New', monospace;
                           flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fairness-strip__nonce   { font-size: 10px; color: #555; white-space: nowrap; }
.fairness-strip__chevron { font-size: 14px; color: #444; margin-left: auto; flex-shrink: 0; }

/* ── Bottom sheet (injected once into <body> by fairness.js) ─────────────── */
.fairness-sheet {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.fairness-sheet--open { pointer-events: all; }

.fairness-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s;
}
.fairness-sheet--open .fairness-sheet__backdrop { opacity: 1; }

.fairness-sheet__panel {
  position: relative;
  width: 100%;
  max-height: 88vh;
  background: #0e0e0e;
  border-top: 1px solid #1e1e1e;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.fairness-sheet--open .fairness-sheet__panel { transform: translateY(0); }

.fairness-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 4px;
  flex-shrink: 0;
}
.fairness-sheet__title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.fairness-sheet__close {
  background: none;
  border: none;
  color: #666;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.15s;
}
.fairness-sheet__close:hover { color: #fff; }

.fairness-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 24px;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.fairness-tabs {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
  gap: 2px;
}
.fairness-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 4px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.15s, border-color 0.15s;
}
.fairness-tab--active { color: #00E5FF; border-bottom-color: #00E5FF; }

.fairness-tab-panel { padding: 16px; }
.fairness-tab-panel--hidden { display: none; }

/* ── Overview panel ───────────────────────────────────────────────────────── */
.fairness-overview__desc {
  font-size: 13px;
  color: #888;
  line-height: 1.6;
  margin: 0 0 12px;
}
.fairness-overview__formula {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: #00E5FF;
  word-break: break-all;
  margin-bottom: 12px;
}
.fairness-overview__steps {
  padding-left: 18px;
  margin: 0;
  font-size: 12px;
  color: #777;
  line-height: 1.7;
}
.fairness-overview__steps li { margin-bottom: 4px; }

/* ── Seeds panel ──────────────────────────────────────────────────────────── */
.fairness-loading { font-size: 12px; color: #555; text-align: center; padding: 20px 0; }

.fairness-field {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.fairness-field > label,
.fairness-field > .fairness-field__label {
  display: block;
  font-size: 10px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}
.fairness-field__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fairness-field__value {
  flex: 1;
  font-size: 11px;
  color: #ccc;
  font-family: 'Courier New', monospace;
  word-break: break-all;
  line-height: 1.4;
  background: none;
}

.fairness-copy-btn {
  background: none;
  border: 1px solid #222;
  border-radius: 6px;
  color: #555;
  font-size: 13px;
  padding: 2px 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.fairness-copy-btn:hover       { color: #00E5FF; border-color: #00E5FF55; }
.fairness-copy-btn--copied     { color: #4ade80 !important; border-color: #4ade8055 !important; }

.fairness-divider {
  border: none;
  border-top: 1px solid #1a1a1a;
  margin: 14px 0;
}

/* ── Shared input style (seeds new-client field + verify fields) ──────────── */
.fairness-input {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  color: #ccc;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  padding: 8px 10px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.fairness-input:focus { border-color: #00E5FF44; }
select.fairness-input { font-family: inherit; }

/* ── Rotate ───────────────────────────────────────────────────────────────── */
.fairness-rotate-btn {
  width: 100%;
  padding: 12px;
  background: #0d1a0d;
  border: 1px solid #1a3a1a;
  border-radius: 12px;
  color: #00E5FF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-top: 4px;
}
.fairness-rotate-btn:hover  { background: #122212; border-color: #00E5FF55; }
.fairness-rotate-btn:active { background: #0a150a; }

.fairness-rotate-note {
  font-size: 11px;
  color: #444;
  line-height: 1.5;
  margin: 8px 0 0;
}
.fairness-rotate-result {
  margin-top: 12px;
  background: #0d1a0d;
  border: 1px solid #1a3a1a;
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
  color: #4ade80;
  word-break: break-all;
  line-height: 1.5;
}
.fairness-rotate-result[hidden] { display: none; }

/* ── Verify panel ─────────────────────────────────────────────────────────── */
.fairness-verify-btn {
  width: 100%;
  padding: 12px;
  background: #00E5FF18;
  border: 1px solid #00E5FF44;
  border-radius: 12px;
  color: #00E5FF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}
.fairness-verify-btn:hover { background: #00E5FF28; }

.fairness-verify-result {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}
.fairness-verify-result[hidden] { display: none; }
.fairness-verify-result.verify-result--pass {
  background: #0d1a0d;
  border: 1px solid #1a3a1a;
  color: #4ade80;
}
.fairness-verify-result.verify-result--fail {
  background: #1a0d0d;
  border: 1px solid #3a1a1a;
  color: #f87171;
}

.fairness-proof {
  margin-top: 8px;
  background: #0a0a0a;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: #555;
  word-break: break-all;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.fairness-proof small { flex: 1; }

/* ── History bet-row verify button ───────────────────────────────────────── */
.bh-verify-btn {
  background: none;
  border: 1px solid #1a3a1a;
  border-radius: 6px;
  color: #00E5FF;
  font-size: 10px;
  padding: 2px 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.bh-verify-btn:hover { background: #00E5FF18; border-color: #00E5FF55; }

/* body scroll lock when fairness sheet is open */
body.fairness-sheet-open { overflow: hidden; }

/* seeds tab wrapper */
.fairness-seeds { /* inherits .fairness-tab-panel padding */ }

/* ── Progression Guide screen ────────────────────────────────────────────────
   Permanent reference page for the levels + rewards + withdrawal model.
   Linked from: loyalty screen CTA, lobby header ?, About bottom-sheet.
   Uses the same brand tokens as the rest of the app (no new colours).
*/
.prog-scroll {
  padding: 0 16px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.prog-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 16px;
  margin-top: 12px;
}
.prog-hero {
  text-align: center;
  padding: 20px 14px 18px;
  border-color: rgba(0, 229, 255, 0.35);
  background: linear-gradient(180deg, rgba(0,229,255,0.06), rgba(0,229,255,0));
}
.prog-hero-emoji {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
}
.prog-hero-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--cream);
  margin-bottom: 4px;
}
.prog-hero-sub {
  font-size: 13px;
  color: rgba(240,237,232,0.72);
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}
.prog-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.prog-section-blurb {
  font-size: 12px;
  color: rgba(240,237,232,0.72);
  margin-bottom: 10px;
  line-height: 1.5;
}
.prog-section-footnote {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
  font-style: italic;
}

/* Numbered explainer rows ("How you earn XP" section) */
.prog-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}
.prog-row + .prog-row { border-top: 1px solid var(--border); }
.prog-row-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.prog-row-body {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(240,237,232,0.78);
}
.prog-row-body strong {
  color: var(--cream);
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

/* Perks grid (2-col on phones) */
.prog-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.prog-perk {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prog-perk-icon {
  font-size: 18px;
  line-height: 1;
}
.prog-perk-body strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  margin: 4px 0 2px;
}
.prog-perk-body span {
  font-size: 11px;
  color: rgba(240,237,232,0.65);
  line-height: 1.4;
}

/* Tier ladder rows */
.prog-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prog-tier {
  display: grid;
  grid-template-columns: 28px auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.prog-tier-emoji { font-size: 18px; line-height: 1; text-align: center; }
.prog-tier-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.5px;
}
.prog-tier-meta {
  font-size: 10px;
  color: rgba(240,237,232,0.6);
  text-align: right;
  line-height: 1.4;
}
.prog-tier[data-tier="diamond"] { border-color: rgba(0,229,255,0.5); }
.prog-tier[data-tier="gold"]    { border-color: rgba(232,181,71,0.4); }

/* Game unlock map — populated by JS from the loyalty status endpoint */
.prog-unlocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.prog-unlock-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.prog-unlock-card[data-state="unlocked"] { border-color: rgba(0, 229, 255, 0.4); }
.prog-unlock-card[data-state="locked"]   { opacity: 0.65; }
.prog-unlock-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.prog-unlock-info { display: flex; flex-direction: column; min-width: 0; }
.prog-unlock-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prog-unlock-level {
  font-size: 10px;
  color: var(--cyan);
  font-family: var(--font-mono);
}

/* KYC explainer */
.prog-section-kyc { border-color: rgba(245, 158, 11, 0.3); }
.prog-section-kyc p {
  font-size: 12px;
  color: rgba(240,237,232,0.78);
  line-height: 1.55;
}
.prog-kyc-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.prog-kyc-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.prog-kyc-tier {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
}
.prog-kyc-desc {
  font-size: 11px;
  color: rgba(240,237,232,0.7);
}

/* Plain-English rules list */
.prog-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prog-rules li {
  font-size: 12px;
  color: rgba(240,237,232,0.78);
  line-height: 1.55;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.prog-rules li strong { color: var(--cream); }

/* Permanent CTA on the loyalty screen — distinguishable from .lps-cta default */
.progression-guide-link {
  display: block;
  text-align: center;
}