/* ═══════════════════════════════════════════════════════════════════
   FYM Casino — Mobile-compact game layouts
   ───────────────────────────────────────────────────────────────────
   Goal: every gameplay action fits above the fold on phones from
   iPhone SE (375×667) up to Pixel 8 Pro (412×892) without scrolling.

   IMPORTANT: every selector below is scoped to `.active` so it only
   takes effect when the player is actually on that screen. Without
   this, the `display: flex` rule overrides `.screen { display: none }`
   (ID beats class in specificity) and every game-screen renders
   stacked underneath the homescreen — the bug the user caught on
   the local dev server.

   Strategy per game:
     1. Pin the active screen to viewport height (100dvh − header −
        bottom-nav) via flex column with named bands.
     2. Hide ceremonial decoration (ornate frames, roll strips, intro
        banners) when idle — promote to overlay only during the action
        (.r-spinning, .dropping, .revealing).
     3. Compact paddings + dropdown to optical-minimum without losing
        the Lodge / Obsidian Vault DNA. Brass ornaments shrink to
        ~60% but stay visible — never hidden completely on resting
        height ranges.
     4. History / stats / recent-spins always move BELOW the action
        bar — discoverable by scrolling, never blocking gameplay.

   Excluded by spec: Black Vault, High Roller, Liquidation (premium
   slot machines, deliberate hero-image layouts), Blackjack (custom
   cinematic frame).

   Author: Claude Opus 4.7 (1M context)
   First ship: 2026-06-04
   Last polish: 2026-06-04 (added .active scoping + brass DNA)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Shared budgets — derived from header.css + obsidian-vault.css.
     Tweak here once if either ever changes. */
  --gc-header-h:    52px;   /* topbar (FYM Casino + balance + bell) */
  --gc-bottomnav-h: 72px;   /* HOME / GAMES / EVENTS / PROFILE */
  --gc-safe-top:    env(safe-area-inset-top, 0px);
  --gc-safe-bot:    env(safe-area-inset-bottom, 0px);

  /* Available height for any game screen content. */
  --gc-viewport-h: calc(
    100dvh
    - var(--gc-header-h)
    - var(--gc-bottomnav-h)
    - var(--gc-safe-top)
    - var(--gc-safe-bot)
  );

  /* Lodge-DNA tokens reused across compact game screens so brass
     accents stay consistent. */
  --gc-brass-gold:   oklch(0.78 0.13 80);
  --gc-brass-hi:     oklch(0.88 0.13 80);
  --gc-brass-dim:    oklch(0.55 0.10 78);
  --gc-felt-deep:    oklch(0.18 0.04 158);
  --gc-divider-line: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--gc-brass-gold) 50%, transparent) 50%,
    transparent 100%
  );
}

/* ═══════════════════ ROULETTE ════════════════════════════════════
   Compact band layout:
     ┌ header (50px) — back · ceremonial title · info
     ├ announcement (22px) — collapses during spin
     ├ board + side-bets (flex 1, ~280-330px) — table felt centerpiece
     ├ stake plate (28px) — brass nameplate with ornaments
     ├ chip tray (60px) — 6 chips with subtle brass rim
     ├ action buttons (54px) — Clear · Set the Wheel
     └ history (below the fold; scroll to discover)

     Spin overlay: roll strip + caption appear centered with backdrop.
     ════════════════════════════════════════════════════════════════ */

#roulette-screen.lodge.active {
  padding: 8px 10px 0;
  display: flex;
  flex-direction: column;
  min-height: var(--gc-viewport-h);
  max-height: 100dvh;
}

/* Header — compress to ~50px total height. The original Lodge
   header takes 110px+ on mobile which is too aggressive for a
   "no-scroll-to-play" budget. We keep the brass DNA via a hairline
   bottom divider and a small title emblem, drop the dual flourishes
   (left/right ornament SVGs) which were the biggest waste of
   vertical space. */
#roulette-screen.lodge.active .lodge-game-header--wheel {
  padding: 2px 0 4px !important;
  margin-bottom: 2px !important;
  background: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--gc-brass-gold) 28%, transparent) !important;
  grid-template-columns: 36px 1fr 36px;
  gap: 6px;
}
/* Kill the heavy ::before/::after background gradients that double the
   header padding visually. */
#roulette-screen.lodge.active .lodge-game-header--wheel::before,
#roulette-screen.lodge.active .lodge-game-header--wheel::after {
  display: none !important;
}
/* Drop the two side-flourish SVGs entirely. The emblem + title +
   subtitle gives enough Lodge DNA on its own; the flourishes were
   adding ~20px width AND vertical alignment slack. */
#roulette-screen.lodge.active .lodge-title-flourish {
  display: none !important;
}
#roulette-screen.lodge.active .lodge-game-title-text {
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
}
#roulette-screen.lodge.active .lodge-game-subtitle {
  font-size: 8px !important;
  letter-spacing: 0.20em !important;
  line-height: 1.2 !important;
}
#roulette-screen.lodge.active .lodge-title-emblem-wrap {
  width: 22px !important;
  height: 22px !important;
}
#roulette-screen.lodge.active .lodge-title-stack {
  gap: 0 !important;
}
#roulette-screen.lodge.active .lodge-back,
#roulette-screen.lodge.active .lodge-info {
  width: 36px !important;
  height: 36px !important;
}

/* Announcement bar — single-line compact, kept inline. Disappears
   during spin (overlay takes over). */
#roulette-screen.lodge.active .r-announcement {
  padding: 4px 8px;
  margin: 4px 0 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  min-height: 22px;
}
#roulette-screen.lodge.active.r-spinning .r-announcement {
  visibility: hidden;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
}

/* Roll-strip — HIDDEN by default, OVERLAY during spin. The brass
   theater-frame styling already lives in lodge.css's .r-roll-frame
   rules; we just lift it into a centered modal position. */
#roulette-screen.lodge.active .r-roll-frame {
  display: none;
}
#roulette-screen.lodge.active.r-spinning .r-roll-frame {
  display: block;
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: min(94vw, 540px);
  z-index: 9000;
  margin: 0;
  /* Layered shadows: dark drop + gold ring + warm bloom */
  box-shadow:
    0 24px 60px oklch(0 0 0 / 0.7),
    0 0 0 1px color-mix(in srgb, var(--gc-brass-gold) 50%, transparent),
    0 0 80px color-mix(in srgb, var(--gc-brass-gold) 20%, transparent);
  animation: rouletteOverlayLift 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rouletteOverlayLift {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* Backdrop dims the table behind the rolling reel. */
#roulette-screen.lodge.active.r-spinning::before {
  content: '';
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 8999;
  pointer-events: none;
  animation: rouletteOverlayFadeIn 220ms ease-out;
}
@keyframes rouletteOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Ceremonial spinning caption under the rolling reel. */
#roulette-screen.lodge.active.r-spinning .r-roll-frame::after {
  content: '✦  RIEN NE VA PLUS  ✦';
  position: absolute;
  left: 0; right: 0;
  bottom: -36px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gc-brass-hi);
  text-shadow: 0 1px 4px oklch(0 0 0 / 0.8);
  pointer-events: none;
}

/* Result info — small, doesn't interrupt the gameplay band. */
#roulette-screen.lodge.active .roulette-result-info {
  margin: 2px 0 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* Table wrap — let the board hold center stage. */
#roulette-screen.lodge.active .r-table-wrap {
  margin: 0 -2px 6px;
  padding: 0;
  flex-shrink: 1;
}

/* Board cells — 26px on most phones. The flex-grow on board keeps it
   visually weighted as the centerpiece. */
#roulette-screen.lodge.active .roulette-board {
  --r-cell-h: 26px;
  gap: 2px;
  padding: 4px;
}
#roulette-screen.lodge.active .roulette-cell {
  height: 26px;
  font-size: 13px;
}
#roulette-screen.lodge.active .roulette-cell.num-zero {
  font-size: 14px;
}

/* Side bets — keep the original Lodge 13-col grid layout (it's
   carefully tuned with grid-column nth-child positioning at
   lodge.css:2068-2082; touching grid-template-columns there breaks
   dozens stacking). Just tighten font + padding inside the existing
   cells so BLACK fits its 2-col span without truncation. */
#roulette-screen.lodge.active .roulette-side-bets {
  gap: 2px;
  margin-top: 2px;
}
#roulette-screen.lodge.active .roulette-side-bets .roulette-cell {
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  padding: 6px 2px !important;
  min-height: 30px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* Stake plate — single horizontal line. Original wraps "Stake on the
   table" caption above "Total Bet: X $FYM" → 80px vertical. We pivot
   the inner .r-stake-body to inline so caption + value share one row,
   reading like a casino tape ticker. */
#roulette-screen.lodge.active .r-stake-plate {
  margin: 4px 0 4px !important;
  padding: 2px 12px !important;
  min-height: 28px !important;
  height: 28px !important;
}
#roulette-screen.lodge.active .r-stake-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
}
#roulette-screen.lodge.active .r-stake-label {
  font-size: 9px !important;
  letter-spacing: 0.20em !important;
}
#roulette-screen.lodge.active .r-total-bet {
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}
#roulette-screen.lodge.active .r-stake-orn {
  width: 20px;
  height: 6px;
  opacity: 0.50;
}

/* Chip section — drop the "Your Stake" plaque but keep a hairline
   brass top-rim so the tray reads as a felt-and-brass element. */
#roulette-screen.lodge.active .r-chip-section-plate {
  display: none;
}
#roulette-screen.lodge.active .r-chip-section {
  margin: 0 0 6px;
  padding: 4px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gc-brass-gold) 25%, transparent);
}
#roulette-screen.lodge.active .r-chip-tray {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
#roulette-screen.lodge.active .r-chip-selector {
  gap: 4px;
  justify-content: space-between;
  padding: 0;
}
#roulette-screen.lodge.active .r-chip {
  width: 46px;
  height: 46px;
}

/* Action buttons — compact, 1:2 grid (clear : spin). The primary
   "Set the Wheel" stays the visual anchor with its existing gold
   gradient + emblem from lodge.css. */
#roulette-screen.lodge.active .r-action-btns {
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6px;
}
#roulette-screen.lodge.active .lodge-action {
  padding: 8px 10px;
  min-height: 46px;
  font-size: 12px;
}
#roulette-screen.lodge.active .lodge-action-label {
  font-size: 11px;
  letter-spacing: 0.16em;
}
#roulette-screen.lodge.active .lodge-action-icon {
  width: 18px;
  height: 18px;
}

/* History — below the fold, with a brass-divider feel above it so
   it reads as a "secondary" panel rather than missing UI. */
#roulette-screen.lodge.active .lodge-plaque.r-tableau-plaque {
  margin: 8px 0 4px;
  padding: 6px 12px;
  font-size: 10px;
  background: var(--gc-divider-line);
  border: none;
}
#roulette-screen.lodge.active .r-history-section {
  padding: 0 4px 16px;
}
#roulette-screen.lodge.active .r-history-title {
  font-size: 10px;
  margin-bottom: 4px;
}

/* ════════════════════ PLINKO ═════════════════════════════════════
   Compact:
     ┌ header (50px)
     ├ balance row (24px)
     ├ difficulty tabs (32px)
     ├ peg pyramid (clamped 220-320px, ALWAYS visible)
     ├ multiplier strip (28px)
     ├ bet controls (60px)
     └ drop button (52px)
   ════════════════════════════════════════════════════════════════ */

#plinko-screen.active {
  padding: 8px 12px 0;
  display: flex;
  flex-direction: column;
  min-height: var(--gc-viewport-h);
  max-height: 100dvh;
  gap: 4px;
}
#plinko-screen.active .plinko-header,
#plinko-screen.active .game-header {
  margin-bottom: 0;
  padding: 4px 0;
}
#plinko-screen.active .plinko-balance {
  font-size: 13px;
  padding: 0;
  margin: 0 0 2px;
}
#plinko-screen.active .plinko-risk-tabs,
#plinko-screen.active .plinko-difficulty {
  padding: 2px;
  margin: 0 0 4px;
}
#plinko-screen.active .plinko-risk-tab,
#plinko-screen.active .plinko-difficulty button {
  padding: 6px 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
}
#plinko-screen.active .plinko-board,
#plinko-screen.active .plinko-canvas-wrap,
#plinko-screen.active #plinko-canvas {
  max-height: 320px;
  min-height: 220px;
  flex: 1 1 auto;
  margin: 0;
}
#plinko-screen.active .plinko-multipliers-row {
  padding: 0;
  font-size: 10px;
  margin: 2px 0;
}
#plinko-screen.active .plinko-bet-controls,
#plinko-screen.active .plinko-controls,
#plinko-screen.active .plinko-bet-row {
  margin: 0;
  padding: 4px 0;
  gap: 6px;
}
#plinko-screen.active .plinko-drop-btn,
#plinko-screen.active #plinko-drop-btn {
  min-height: 52px;
  font-size: 14px;
  margin: 6px 0 8px;
}

/* ═══════════════════ CRASH ═══════════════════════════════════════
   Compact:
     ┌ header (50px)
     ├ balance + recent-strip combined (38px)
     ├ chart with multiplier overlay on top (flex, ~280px)
     ├ bet input + amount (60px)
     └ bet/cashout button (52px)
   ════════════════════════════════════════════════════════════════ */

#crash-screen.active {
  padding: 8px 10px 0;
  display: flex;
  flex-direction: column;
  min-height: var(--gc-viewport-h);
  max-height: 100dvh;
  gap: 4px;
}
#crash-screen.active .crash-header,
#crash-screen.active .game-header {
  padding: 4px 0;
  margin: 0;
}
#crash-screen.active .crash-balance {
  font-size: 13px;
  padding: 0;
  margin: 0;
}
#crash-screen.active .crash-history-strip {
  padding: 4px 0;
  margin: 0 0 4px;
  gap: 6px;
  font-size: 11px;
  min-height: 28px;
}
#crash-screen.active .crash-history-strip .crash-history-chip {
  padding: 2px 8px;
  font-size: 11px;
}
#crash-screen.active .crash-multiplier-wrap,
#crash-screen.active .crash-game-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  max-height: 360px;
  margin: 0;
}
#crash-screen.active .crash-multiplier {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 56px;
  line-height: 1;
  margin: 0;
  z-index: 5;
  text-shadow: 0 2px 8px oklch(0 0 0 / 0.7);
}
#crash-screen.active .crash-status-badge,
#crash-screen.active #crash-status {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  padding: 2px 12px;
  z-index: 6;
}
#crash-screen.active .crash-chart,
#crash-screen.active #crash-chart {
  height: 100%;
  width: 100%;
}
#crash-screen.active .crash-bet-section,
#crash-screen.active #crash-bet-controls {
  padding: 4px 0;
  margin: 0;
}
#crash-screen.active .crash-bet-row,
#crash-screen.active .crash-action-row {
  gap: 6px;
  padding: 0;
}
#crash-screen.active .crash-bet-btn,
#crash-screen.active .crash-cashout-btn,
#crash-screen.active #crash-bet-btn {
  min-height: 52px;
  font-size: 14px;
  margin: 4px 0 6px;
}

/* ═══════════════════ MINES ═══════════════════════════════════════
   Actual DOM structure (from JS):
     #mines-screen > .mines-wrapper
       .mines-header
       .mines-layout
         .mines-grid-wrap (314px → cap at 260)
         .mines-panel
           .mines-mult-block  (mult + next-pick, 119px → 36)
           .mines-payout-block (68px → 28, merged inline)
           .mines-presets     (1/3/10 Mines, 44px → 32)
           .mines-count-row   (MINES ▼ N ▲, 44px → 32)
           .mines-bet-row     (52px → 40)
           .mines-quick-bets  (44px → 32)
           .mines-start-btn   (45px → 48)
           .mines-cashout-btn (0px when hidden)

   Compact target — fit everything under 760px viewport budget.
   ════════════════════════════════════════════════════════════════ */

#mines-screen.active {
  padding: 6px 10px 0;
  display: flex;
  flex-direction: column;
  min-height: var(--gc-viewport-h);
  max-height: 100dvh;
}
#mines-screen.active .mines-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 4px;
}
#mines-screen.active .mines-header,
#mines-screen.active .game-header {
  padding: 2px 0 4px !important;
  margin: 0 !important;
  min-height: 36px;
}
#mines-screen.active .mines-layout {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

/* Grid — cap at 260px on most phones so the panel has room. */
#mines-screen.active .mines-grid-wrap {
  flex: 0 0 auto;
  max-height: 260px;
  margin: 0 auto;
  width: min(96%, 300px);
}
#mines-screen.active .mines-grid {
  gap: 6px !important;
  padding: 0 !important;
  width: 100% !important;
  max-height: 260px !important;
}
#mines-screen.active .mines-tile {
  width: auto !important;
  aspect-ratio: 1 !important;
  min-width: 0 !important;
}

/* Panel — flex column, all controls compressed. */
#mines-screen.active .mines-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
}

/* MULTIPLIER + NEXT PICK block — compressed to single row. */
#mines-screen.active .mines-mult-block {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  min-height: 36px !important;
  max-height: 38px !important;
  font-size: 11px !important;
  align-items: center !important;
}
#mines-screen.active .mines-mult-block > * {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-align: center !important;
}

/* POTENTIAL PAYOUT — compressed single-line. */
#mines-screen.active .mines-payout-block {
  padding: 4px 8px !important;
  margin: 0 !important;
  min-height: 28px !important;
  max-height: 30px !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
#mines-screen.active .mines-payout-block > * {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

/* Presets row (1 Mine / 3 Mines / 10 Mines) — compact. */
#mines-screen.active .mines-presets {
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  min-height: 32px !important;
  max-height: 34px !important;
}
#mines-screen.active .mines-presets button {
  padding: 4px 8px !important;
  font-size: 11px !important;
  min-height: 30px !important;
}

/* MINES count row — compact stepper. */
#mines-screen.active .mines-count-row {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 32px !important;
  max-height: 34px !important;
}

/* Bet input row — compact. */
#mines-screen.active .mines-bet-row {
  padding: 0 !important;
  margin: 0 !important;
  gap: 6px !important;
  min-height: 40px !important;
  max-height: 42px !important;
}

/* Quick-bet chips — compact. */
#mines-screen.active .mines-quick-bets {
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  min-height: 32px !important;
  max-height: 34px !important;
}

/* Primary DEAL action — always visible, prominent. */
#mines-screen.active .mines-start-btn,
#mines-screen.active #mines-start-btn,
#mines-screen.active .mines-cashout-btn {
  min-height: 48px !important;
  font-size: 14px !important;
  margin: 4px 0 0 !important;
}

/* ═══════════════════ MINI-GAMES (Coinflip / Dice / Hi-Lo) ═══════ */

#coinflip-screen.active,
#dice-screen.active,
#hilo-screen.active {
  padding: 8px 12px 0;
  display: flex;
  flex-direction: column;
  min-height: var(--gc-viewport-h);
  max-height: 100dvh;
  gap: 6px;
}
#coinflip-screen.active .mg-arena,
#dice-screen.active .mg-arena,
#hilo-screen.active .mg-arena,
#coinflip-screen.active .mg-visual,
#dice-screen.active .mg-visual,
#hilo-screen.active .mg-visual {
  flex: 1 1 auto;
  max-height: 320px;
  min-height: 200px;
}
#coinflip-screen.active .mg-controls,
#dice-screen.active .mg-controls,
#hilo-screen.active .mg-controls {
  padding: 4px 0;
  margin: 0;
  gap: 6px;
}
#coinflip-screen.active .mg-play-btn,
#dice-screen.active .mg-play-btn,
#hilo-screen.active .mg-play-btn {
  min-height: 52px;
  font-size: 14px;
}

/* ═══════════════════ LOTTERY ═════════════════════════════════════ */

#lottery-screen.active {
  padding: 8px 12px 0;
  display: flex;
  flex-direction: column;
  min-height: var(--gc-viewport-h);
  max-height: 100dvh;
  gap: 6px;
}
#lottery-screen.active .lottery-info-banner,
#lottery-screen.active .lottery-banner {
  padding: 6px 10px;
  margin: 0;
  font-size: 12px;
}
#lottery-screen.active .lottery-content,
#lottery-screen.active .lottery-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
#lottery-screen.active .lottery-action,
#lottery-screen.active .lottery-buy-btn {
  min-height: 52px;
  font-size: 14px;
  margin: 4px 0 8px;
}

/* ═══════════════════ LEVERAGED MARKET ════════════════════════════ */

#leveraged-market-screen.active {
  padding: 8px 10px 0;
  display: flex;
  flex-direction: column;
  min-height: var(--gc-viewport-h);
  max-height: 100dvh;
  gap: 4px;
}
#leveraged-market-screen.active .mkt-header,
#leveraged-market-screen.active .game-header {
  padding: 4px 0;
  margin: 0;
}
#leveraged-market-screen.active .mkt-chart-wrap,
#leveraged-market-screen.active .mkt-chart {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: 360px;
}
#leveraged-market-screen.active .mkt-controls,
#leveraged-market-screen.active .mkt-actions {
  padding: 4px 0;
  margin: 0;
  gap: 6px;
}
#leveraged-market-screen.active .mkt-action-btn {
  min-height: 48px;
  font-size: 13px;
}

/* ═══════════════════ Mobile size breakpoints ═════════════════════
   Tighten further on very narrow phones (iPhone SE/8, 375×667),
   loosen slightly on tall phones (iPhone Pro Max, 430×932).
   ════════════════════════════════════════════════════════════════ */

@media (max-height: 700px) {
  /* SE / 8 territory — drop the announcement entirely. */
  #roulette-screen.lodge.active .r-announcement {
    display: none;
  }
  #roulette-screen.lodge.active .roulette-board {
    --r-cell-h: 22px;
  }
  #roulette-screen.lodge.active .roulette-cell {
    height: 22px;
    font-size: 12px;
  }
  #roulette-screen.lodge.active .r-chip {
    width: 42px;
    height: 42px;
  }
  #roulette-screen.lodge.active .lodge-game-title-text {
    font-size: 16px;
  }

  #plinko-screen.active .plinko-board,
  #plinko-screen.active #plinko-canvas {
    min-height: 200px;
    max-height: 260px;
  }

  #crash-screen.active .crash-multiplier {
    font-size: 44px;
  }
}

@media (min-height: 880px) {
  /* Pro Max territory — let things breathe a little. */
  #roulette-screen.lodge.active .roulette-board {
    --r-cell-h: 30px;
  }
  #roulette-screen.lodge.active .roulette-cell {
    height: 30px;
    font-size: 14px;
  }
  #plinko-screen.active .plinko-board,
  #plinko-screen.active #plinko-canvas {
    max-height: 360px;
  }
  #crash-screen.active .crash-multiplier-wrap,
  #crash-screen.active .crash-game-area {
    max-height: 400px;
  }
}