/* ═══════════════════════════════════════════════════════════════════════
   FYM CASINO — THE LODGE (Home screen)
   Members-only lounge aesthetic. Old-money restraint + on-chain trust.
   Design principles enforced from .impeccable.md:
   1. Members-Only, Not Mass-Market — insider language, not marketing
   2. Quiet Swagger, Loud Signal    — restraint 90% of the UI
   3. Ritual Over Reaction          — ceremony for money-in-motion
   4. Analog Weight, On-Chain Trust — physical textures + chain data
   5. The Middle Finger in Velvet   — defiant, never tacky
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Lodge typography additions (gradual migration) ─────────────────
   Bodoni Moda — old-money display headlines (game rooms, dossier).
   --font-plaque kept as a semantic alias for engraved-style headings.
   Body + chain data inherit from tokens.css (Manrope / JetBrains Mono). */
:root {
  --font-plaque:       'Bodoni Moda', serif;
  --font-lodge-display:'Bodoni Moda', Georgia, serif;

  /* OKLCH-based warm amber neutrals. Tinting toward brand hue (~85°)
     so every surface feels unified with the gold, instead of floating
     on cold grey. Subtle (chroma 0.004–0.010) but perceptible. */
  --lodge-ink:          oklch(0.98 0.02 85);     /* primary text */
  --lodge-ink-2:        oklch(0.72 0.02 85);     /* secondary */
  --lodge-ink-3:        oklch(0.52 0.02 85);     /* muted */
  --lodge-ink-4:        oklch(0.34 0.015 85);    /* very muted */

  --lodge-surface:      oklch(0.15 0.010 80);    /* card surface */
  --lodge-surface-2:    oklch(0.18 0.012 80);    /* raised surface */
  --lodge-hairline:     oklch(0.75 0.08 85 / 0.10);  /* gold hairline */
  --lodge-hairline-2:   oklch(0.75 0.08 85 / 0.20);
  --lodge-hairline-3:   oklch(0.75 0.08 85 / 0.35);

  --lodge-gold:         oklch(0.78 0.14 85);     /* warm aged gold */
  --lodge-gold-2:       oklch(0.86 0.14 88);     /* highlight */
  --lodge-gold-dark:    oklch(0.48 0.12 80);     /* dark gold */
  --lodge-gold-wash:    oklch(0.78 0.14 85 / 0.06);  /* subtle tint */

  --lodge-wax:          oklch(0.32 0.15 22);     /* oxblood wax */
  --lodge-wax-2:        oklch(0.42 0.18 25);     /* wax highlight */
  --lodge-wax-dark:     oklch(0.22 0.13 20);

  --lodge-violet:       oklch(0.62 0.20 300);    /* RARE signal only */
}

/* ── Scope the entire lodge aesthetic to #home-screen ─────────────── */
#home-screen.lodge {
  padding: 20px 16px 40px;
  font-family: var(--font-body);
}

/* Hidden SVG sprite — all lodge iconography lives here and is used
   via <use href="#icon-…"> elsewhere on the screen. */
.lodge-sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

/* Base lodge icon — inherits currentColor for stroke. Sizes applied
   per context (nav icons 22px, game icons 52px, tags 16px, crest 36px). */
.lodge-icon {
  display: inline-block;
  fill: none;
  stroke: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}
.lodge-icon--nav   { width: 24px; height: 24px; }
.lodge-icon--game  { width: 56px; height: 56px; }
.lodge-icon--tag   { width: 16px; height: 16px; }
.lodge-icon--crest { width: 38px; height: 38px; }
.lodge-icon--mini  { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════════════════════
   CREST — welcome bar at the very top.
   Two-line greeting. Left: "Welcome back." in engraved Bodoni. Right:
   current local time + date in mono, quietly.
   ══════════════════════════════════════════════════════════════════ */
.lodge-crest {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px 20px;
  border-bottom: 1px solid var(--lodge-hairline);
  margin-bottom: 24px;
  position: relative;
}
.lodge-crest::after {
  /* Double-line under the crest — old-menu divider feel */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--lodge-hairline) 8%,
    var(--lodge-hairline) 92%,
    transparent 100%);
}
.lodge-crest-hail {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-plaque);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lodge-gold);
  line-height: 1;
}
.lodge-crest-mark {
  color: var(--lodge-gold-2);
  filter: drop-shadow(0 0 8px oklch(0.78 0.14 85 / 0.25));
}
.lodge-crest-hail-text em {
  font-style: italic;
  font-family: var(--font-lodge-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lodge-ink);
  text-transform: none;
  display: block;
  margin-top: 6px;
}
.lodge-crest-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--lodge-ink-3);
  letter-spacing: 0.12em;
  text-align: right;
  line-height: 1.5;
}
.lodge-crest-meta b {
  color: var(--lodge-ink-2);
  font-weight: 500;
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════════════════
   TONIGHT'S WELCOME — Daily courtesy with wax-seal claim.
   Replaces the old .streak-banner. When claimable, the seal presses
   (ritual), stamps a ledger line, and the card dims to "accepted."
   ══════════════════════════════════════════════════════════════════ */
.lodge-courtesy {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 22px 22px 26px;
  margin-bottom: 28px;
  background:
    linear-gradient(135deg,
      oklch(0.13 0.018 85 / 0.72) 0%,
      oklch(0.10 0.014 80 / 0.80) 100%);
  border: 1px solid var(--lodge-hairline-2);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.08),
    0 1px 0 oklch(0 0 0 / 0.40),
    0 18px 40px oklch(0 0 0 / 0.35);
  overflow: hidden;
}

/* Folded-corner treatment: a diagonal triangle in the top-left,
   like the corner of an envelope that's been turned. Purely decorative,
   but the kind of detail old-money stationery has. */
.lodge-courtesy::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 26px; height: 26px;
  background: linear-gradient(135deg,
    var(--lodge-gold-wash) 0%,
    transparent 55%);
  border-right: 1px solid var(--lodge-hairline);
  border-bottom: 1px solid var(--lodge-hairline);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}

.lodge-courtesy-body { min-width: 0; }

.lodge-courtesy-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-plaque);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lodge-gold);
  margin-bottom: 10px;
}
.lodge-courtesy-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    var(--lodge-hairline-2) 0%,
    transparent 60%);
  min-width: 20px;
}

.lodge-courtesy-title {
  font-family: var(--font-lodge-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  color: var(--lodge-ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.lodge-courtesy-title em {
  font-style: italic;
  color: var(--lodge-gold);
  font-weight: 500;
}
.lodge-courtesy-amount {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--lodge-ink-2);
  margin-top: 2px;
}
.lodge-courtesy-amount b {
  color: var(--lodge-gold-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Wax-seal claim button ─────────────────────────────────────── */
.lodge-seal {
  position: relative;
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-plaque);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: oklch(0.92 0.12 85 / 0.88);
  display: grid;
  place-items: center;
  /* Wax disc — layered radial gradients for depth, not a flat color */
  background:
    radial-gradient(circle at 35% 30%,
      var(--lodge-wax-2) 0%,
      var(--lodge-wax) 45%,
      var(--lodge-wax-dark) 100%);
  /* Embossed ring + seated shadow */
  box-shadow:
    inset 0 2px 0 oklch(0.55 0.18 25 / 0.30),
    inset 0 -4px 6px oklch(0 0 0 / 0.35),
    inset 0 0 0 1px oklch(0.22 0.13 20 / 0.80),
    0 2px 0 oklch(0 0 0 / 0.30),
    0 8px 20px oklch(0.22 0.13 20 / 0.40),
    0 14px 36px oklch(0.22 0.13 20 / 0.22);
  text-shadow:
    0 1px 0 oklch(0 0 0 / 0.50),
    0 -1px 0 oklch(0.70 0.14 75 / 0.25);
  transform: translateZ(0);
  transition:
    transform 140ms cubic-bezier(0.34, 1.2, 0.64, 1),
    box-shadow 240ms ease-out,
    filter 240ms ease-out;
  flex-shrink: 0;
}
.lodge-seal:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.05);
}
.lodge-seal:active:not(:disabled) {
  transform: scale(0.93) translateY(2px);
  box-shadow:
    inset 0 4px 8px oklch(0 0 0 / 0.45),
    inset 0 0 0 1px oklch(0.22 0.13 20 / 0.80),
    0 1px 3px oklch(0 0 0 / 0.30);
}

/* Engraved inner ring — the subtle recess around the monogram,
   like a carved seal with a raised center and depressed border. */
.lodge-seal::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid oklch(0.18 0.10 20 / 0.85);
  box-shadow:
    inset 0 1px 0 oklch(0.70 0.14 75 / 0.20),
    inset 0 -1px 0 oklch(0 0 0 / 0.25);
  pointer-events: none;
}
/* Outer decorative ring — four tiny fleur-de-lis-style pips at
   the cardinal points to make the seal feel like a proper die-stamp. */
.lodge-seal::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    /* Four cardinal marks */
    radial-gradient(circle 2px at 50% 5%, oklch(0.70 0.14 75 / 0.55), transparent 60%),
    radial-gradient(circle 2px at 50% 95%, oklch(0.70 0.14 75 / 0.55), transparent 60%),
    radial-gradient(circle 2px at 5% 50%, oklch(0.70 0.14 75 / 0.55), transparent 60%),
    radial-gradient(circle 2px at 95% 50%, oklch(0.70 0.14 75 / 0.55), transparent 60%),
    /* Four diagonal marks */
    radial-gradient(circle 1.5px at 20% 20%, oklch(0.65 0.14 75 / 0.40), transparent 60%),
    radial-gradient(circle 1.5px at 80% 20%, oklch(0.65 0.14 75 / 0.40), transparent 60%),
    radial-gradient(circle 1.5px at 20% 80%, oklch(0.65 0.14 75 / 0.40), transparent 60%),
    radial-gradient(circle 1.5px at 80% 80%, oklch(0.65 0.14 75 / 0.40), transparent 60%);
  pointer-events: none;
}

/* Monogram glyph rendered via text; kept simple ($FYM) */
.lodge-seal-glyph {
  position: relative;
  display: block;
  line-height: 1;
  transform: translateY(-1px);
  z-index: 1;
}

/* Press-to-claim moment: warm bloom + gentle tilt, then settle. */
@keyframes lodge-seal-press {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(0.88) rotate(-6deg); filter: brightness(1.25) saturate(1.2); }
  60%  { transform: scale(1.05) rotate(-3deg); filter: brightness(1.15); }
  100% { transform: scale(1) rotate(-2deg); filter: none; }
}
.lodge-seal.stamping {
  animation: lodge-seal-press 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Warm glow bloom at the moment of stamping */
.lodge-seal.stamping::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle,
    oklch(0.85 0.14 80 / 0.45) 0%, transparent 60%);
  animation: lodge-seal-bloom 700ms ease-out both;
  pointer-events: none;
}
@keyframes lodge-seal-bloom {
  0%   { opacity: 0; transform: scale(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

/* "Accepted" resting state — seal darkens, ring rotates slightly,
   visually present but clearly inert. */
.lodge-seal:disabled,
.lodge-seal[disabled] {
  cursor: default;
  transform: rotate(-3deg);
  filter: saturate(0.68) brightness(0.78);
  box-shadow:
    inset 0 -3px 6px oklch(0 0 0 / 0.45),
    inset 0 0 0 1px oklch(0.20 0.10 20 / 0.80),
    0 1px 2px oklch(0 0 0 / 0.40);
}

/* ── Streak dots — converted to faint serif numerals under courtesy ── */
#streak-dots {
  display: flex;
  gap: 6px;
  padding: 12px 2px 0;
  margin-top: 18px;
  border-top: 1px dashed var(--lodge-hairline);
  opacity: 0.85;
}
.lodge .streak-dot {
  flex: 1;
  height: 3px;
  background: var(--lodge-hairline);
  border-radius: 1px;
  transition: background 300ms ease-out;
  /* Hide the numeric label that app.js writes into each dot */
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
}
.lodge .streak-dot.active,
.lodge .streak-dot.claimed {
  background: var(--lodge-gold);
  box-shadow: 0 0 6px oklch(0.78 0.14 85 / 0.35);
}

/* ══════════════════════════════════════════════════════════════════
   DOSSIER — replaces the old .home-progression-card styling.
   A membership-card aesthetic: leather-dark surface, gold hairlines,
   rank name in display italic, degree in mono.
   ══════════════════════════════════════════════════════════════════ */
.lodge #home-progression-card.home-prog-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 28px;
  background:
    linear-gradient(180deg,
      oklch(0.14 0.014 80 / 0.76),
      oklch(0.10 0.010 75 / 0.82));
  border: 1px solid var(--lodge-hairline);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.06),
    0 1px 0 oklch(0 0 0 / 0.35);
  cursor: pointer;
  transition: border-color 220ms ease-out, transform 160ms ease-out;
}
.lodge #home-progression-card.home-prog-card:active { transform: scale(0.995); }
.lodge #home-progression-card.home-prog-card:hover  { border-color: var(--lodge-hairline-2); }

.lodge .home-prog-left { display: contents; }
.lodge #home-prog-rank {
  font-family: var(--font-plaque);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 6px 10px;
  border-radius: 2px;
  background: oklch(0.12 0.012 85);
  border: 1px solid var(--lodge-hairline-2);
  color: var(--lodge-gold);
  text-transform: uppercase;
  min-width: 44px;
  text-align: center;
  line-height: 1;
  box-shadow: inset 0 1px 0 oklch(0.80 0.08 85 / 0.08);
}

.lodge .home-prog-main { display: grid; gap: 8px; min-width: 0; }
.lodge .home-prog-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.lodge .home-prog-level {
  font-family: var(--font-plaque);
  font-size: 9px;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: var(--lodge-ink-3);
  text-transform: uppercase;
}
.lodge .home-prog-level::before { content: 'Degree '; color: var(--lodge-ink-3); }
.lodge .home-prog-level span { color: var(--lodge-ink); font-size: 11px; }
.lodge .home-prog-xp-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--lodge-ink-3);
  letter-spacing: 0.05em;
}
.lodge .home-prog-bar {
  position: relative;
  height: 3px;
  background: oklch(0.08 0.01 80);
  border-radius: 0;
  overflow: hidden;
  border-top: 1px solid oklch(0 0 0 / 0.30);
}
/* Hairline ends on progress bar suggest engraved "from/to" ticks */
.lodge .home-prog-bar::before,
.lodge .home-prog-bar::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 1px; height: 9px;
  background: var(--lodge-hairline-3);
}
.lodge .home-prog-bar::before { left: 0; }
.lodge .home-prog-bar::after  { right: 0; }
.lodge .home-prog-bar-fill {
  height: 100%;
  /* JS sets background inline based on rank color — we leave it alone */
  box-shadow: 0 0 8px oklch(0.80 0.14 80 / 0.5);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lodge .home-prog-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-lodge-display);
  font-weight: 500;
  font-style: italic;
  font-size: 13px;
  color: var(--lodge-ink-2);
}
.lodge .home-prog-chev {
  font-family: var(--font-body);
  font-style: normal;
  color: var(--lodge-gold);
  font-weight: 400;
  font-size: 16px;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════
   LODGE NAV — Quick actions as insider row, no big emoji icons.
   Text-forward, hairline dividers, Bodoni labels.
   ══════════════════════════════════════════════════════════════════ */
.lodge .home-quick-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 14px 0;
  margin-bottom: 28px;
  border-top: 1px solid var(--lodge-hairline);
  border-bottom: 1px solid var(--lodge-hairline);
  background: linear-gradient(180deg, transparent 0%, var(--lodge-gold-wash) 100%);
}
.lodge .home-qa {
  position: relative;
  background: transparent;
  border: 0;
  padding: 10px 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-plaque);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lodge-ink-2);
  cursor: pointer;
  transition: color 180ms ease-out, transform 160ms ease-out;
  /* touch target */
  min-height: 56px;
  justify-content: center;
}
.lodge .home-qa:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--lodge-hairline);
}
.lodge .home-qa:active {
  color: var(--lodge-gold-2);
  transform: scale(0.96);
}
.lodge .home-qa:active .home-qa-icon {
  color: var(--lodge-gold-2);
  filter: drop-shadow(0 0 4px oklch(0.80 0.14 85 / 0.45));
}
.lodge .home-qa-icon {
  /* Flex container for the SVG — colour cascades to currentColor */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lodge-gold);
  line-height: 0;
  transition: color 180ms ease-out, filter 180ms ease-out;
}
.lodge .home-qa-icon svg { pointer-events: none; }
.lodge .home-qa-label { line-height: 1; }

/* ══════════════════════════════════════════════════════════════════
   PLAQUE — section divider with engraved feel.
   "TONIGHT'S SERVICE" / "THE HALL" / "HOUSE LEDGER"
   Bodoni uppercase + hairline rules either side + central diamond.
   ══════════════════════════════════════════════════════════════════ */
.lodge-plaque {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 36px 0 18px;
  font-family: var(--font-plaque);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--lodge-gold);
  text-transform: uppercase;
}
.lodge-plaque-orn {
  width: 76px;
  height: 14px;
  color: var(--lodge-gold);
  opacity: 0.85;
  filter: drop-shadow(0 0 4px oklch(0.78 0.14 85 / 0.25));
}
.lodge-plaque-orn--l { justify-self: end; }
.lodge-plaque-orn--r { justify-self: start; }
.lodge-plaque-text {
  padding: 0 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Live-now pulse — the one bit of signal motion the lodge permits. */
.lodge-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: oklch(0.60 0.22 22);   /* crimson — "live" */
  box-shadow: 0 0 0 0 oklch(0.60 0.22 22 / 0.6);
  animation: lodge-pulse 2.1s ease-out infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes lodge-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.60 0.22 22 / 0.55); }
  70%  { box-shadow: 0 0 0 7px oklch(0.60 0.22 22 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.60 0.22 22 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lodge-pulse { animation: none; }
}

.lodge-plaque-sub {
  margin-top: 6px;
  font-family: var(--font-lodge-display);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--lodge-ink-3);
  text-align: center;
  text-transform: none;
}

/* ══════════════════════════════════════════════════════════════════
   THE EVENING'S SERVICE — Replaces .featured-games grid-of-cards.
   A printed-menu aesthetic. Each room is a large listing with:
     - Roman numeral + display italic name (Bodoni)
     - Insider description (muted, withheld)
     - Minimum stake (mono, right-aligned)
     - Hairline rule above, subtle chevron right
   ══════════════════════════════════════════════════════════════════ */
/* Service menu — subtle baize-green wash beneath so the gaming-tables
   association kicks in. Very low-saturation emerald so it doesn't fight
   the gold. */
.lodge-service {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lodge-hairline-2);
  border-bottom: 1px solid var(--lodge-hairline-2);
  background:
    linear-gradient(180deg,
      oklch(0.18 0.035 155 / 0.10) 0%,
      oklch(0.14 0.020 155 / 0.05) 100%);
}
/* Ambient card-suit watermarks — nearly invisible decoration at the
   corners, signal "casino" at a subconscious level. */
.lodge-service::before {
  content: '♠';
  position: absolute;
  top: -8px; left: 6px;
  font-family: var(--font-lodge-display);
  font-size: 56px;
  color: oklch(0.75 0.08 85);
  opacity: 0.03;
  pointer-events: none;
  line-height: 1;
  transform: rotate(-18deg);
}
.lodge-service::after {
  content: '♦';
  position: absolute;
  bottom: -8px; right: 6px;
  font-family: var(--font-lodge-display);
  font-size: 56px;
  color: oklch(0.60 0.22 22);
  opacity: 0.05;
  pointer-events: none;
  line-height: 1;
  transform: rotate(14deg);
}

.lodge-service-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 6px 18px 6px;
  border-bottom: 1px solid var(--lodge-hairline);
  cursor: pointer;
  color: var(--lodge-ink);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  text-align: left;
  transition: background 240ms ease-out, padding-left 240ms ease-out;
  font-family: inherit;
  z-index: 1;
}
.lodge-service-row:last-child { border-bottom: 0; }
.lodge-service-row:hover,
.lodge-service-row:active {
  background: var(--lodge-gold-wash);
  padding-left: 14px;
}
.lodge-service-row:hover .lodge-service-icon,
.lodge-service-row:active .lodge-service-icon {
  color: var(--lodge-gold-2);
  transform: scale(1.04);
}

/* The illustrated icon tile — sits in a quiet frame with a thin gold
   hairline. Per-game accent colour on hover via the modifier class. */
.lodge-service-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lodge-hairline);
  border-radius: 2px;
  background:
    linear-gradient(135deg,
      oklch(0.10 0.010 80 / 0.85) 0%,
      oklch(0.07 0.008 75 / 0.90) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.06),
    0 1px 0 oklch(0 0 0 / 0.4);
  color: var(--lodge-gold);
  transition: color 200ms ease-out, transform 200ms ease-out, border-color 200ms ease-out;
  flex-shrink: 0;
}
.lodge-service-icon svg { display: block; }
/* Per-room accent — very subtle hue shift on the icon colour on hover */
.lodge-service-row:hover .lodge-service-icon--reels  { color: oklch(0.80 0.14 85); }
.lodge-service-row:hover .lodge-service-icon--cards  { color: oklch(0.80 0.14 85); }
.lodge-service-row:hover .lodge-service-icon--ascent { color: oklch(0.72 0.16 130); }
.lodge-service-row:hover .lodge-service-icon--wheel  { color: oklch(0.78 0.14 85); }

.lodge-service-body { min-width: 0; }
.lodge-service-name {
  font-family: var(--font-lodge-display);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1.1;
  color: var(--lodge-ink);
  letter-spacing: -0.005em;
  margin-bottom: 5px;
}
.lodge-service-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: var(--lodge-ink-3);
  max-width: 42ch;
}
.lodge-service-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--lodge-ink-4);
  text-transform: uppercase;
  line-height: 1.3;
}
.lodge-service-meta span {
  display: block;
  font-size: 8.5px;
  color: var(--lodge-ink-4);
}
.lodge-service-meta b {
  color: var(--lodge-gold);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.lodge-service-meta::after {
  content: '›';
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 300;
  color: var(--lodge-ink-3);
  line-height: 1;
  margin-top: 6px;
  transition: transform 180ms ease-out, color 180ms ease-out;
}
.lodge-service-row:hover .lodge-service-meta::after,
.lodge-service-row:active .lodge-service-meta::after {
  transform: translateX(4px);
  color: var(--lodge-gold);
}

/* ══════════════════════════════════════════════════════════════════
   THE HALL — Dispatches (live wins feed) restyled as a ledger.
   JS-generated .live-win-card entries become hairline rows with
   monospace amounts and muted member names. No avatars, no chips.
   ══════════════════════════════════════════════════════════════════ */
.lodge .live-wins-section {
  margin-top: 4px;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}
.lodge .live-wins-label {
  display: none;  /* replaced by .lodge-plaque above */
}
.lodge .live-wins-scroll {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--lodge-hairline);
}
.lodge .live-win-card {
  display: grid !important;
  grid-template-columns: 18px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "mark  name    amount"
    ".     game    time";
  column-gap: 10px;
  row-gap: 2px;
  padding: 11px 4px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lodge-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: initial !important;
  min-width: 0 !important;
  width: 100%;
  cursor: pointer;
  color: var(--lodge-ink);
  transition: background 180ms ease-out;
}
.lodge .live-win-card:hover { background: var(--lodge-gold-wash); }

/* Replace the circular avatar tile with a game-specific SVG tag icon
   injected via the ::before pseudo-element as an inline data-URI. The
   actual avatar image/fallback inside is hidden. The icon is picked
   by [data-game="…"] set on the card in app.js's loadLiveWins(). */
.lodge .live-win-avatar-wrap {
  grid-area: mark;
  align-self: center;
  width: 22px !important; height: 22px !important;
  min-width: 22px !important;
  background: transparent !important;
  border: 1px solid var(--lodge-hairline-2) !important;
  border-radius: 2px !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 oklch(0.80 0.08 85 / 0.06);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--lodge-gold);
  position: relative;
}
.lodge .live-win-avatar-wrap > * { display: none !important; }

/* Game-specific tag — uses `mask-image` so the SVG inherits currentColor. */
.lodge .live-win-avatar-wrap::before {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 14px 14px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 14px 14px;
  /* Default (fallback): a subtle star tag */
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2 L 10 6 L 14 7 L 11 10 L 12 14 L 8 12 L 4 14 L 5 10 L 2 7 L 6 6 Z' fill='black' stroke='black' stroke-width='0.8' stroke-linejoin='round'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2 L 10 6 L 14 7 L 11 10 L 12 14 L 8 12 L 4 14 L 5 10 L 2 7 L 6 6 Z' fill='black' stroke='black' stroke-width='0.8' stroke-linejoin='round'/></svg>");
}
/* Game-specific masks. Case-insensitive partial match on data-game. */
.lodge .live-win-card[data-game*="slot" i]      .live-win-avatar-wrap::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1' stroke-linejoin='round'><rect x='1.5' y='4' width='13' height='9' rx='0.8' fill='black' fill-opacity='0.15'/><rect x='3' y='6' width='2.5' height='5.5' fill='black' fill-opacity='0.5'/><rect x='6.75' y='6' width='2.5' height='5.5' fill='black' fill-opacity='0.5'/><rect x='10.5' y='6' width='2.5' height='5.5' fill='black' fill-opacity='0.5'/></g></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1' stroke-linejoin='round'><rect x='1.5' y='4' width='13' height='9' rx='0.8' fill='black' fill-opacity='0.15'/><rect x='3' y='6' width='2.5' height='5.5' fill='black' fill-opacity='0.5'/><rect x='6.75' y='6' width='2.5' height='5.5' fill='black' fill-opacity='0.5'/><rect x='10.5' y='6' width='2.5' height='5.5' fill='black' fill-opacity='0.5'/></g></svg>");
}
.lodge .live-win-card[data-game*="blackjack" i] .live-win-avatar-wrap::before,
.lodge .live-win-card[data-game*="twenty" i]    .live-win-avatar-wrap::before,
.lodge .live-win-card[data-game*="21" i]        .live-win-avatar-wrap::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1'><rect x='1' y='3' width='9' height='11' rx='1' fill='black' fill-opacity='0.2' transform='rotate(-8 5.5 8.5)'/><rect x='5' y='2' width='9' height='11' rx='1' fill='black' fill-opacity='0.4' transform='rotate(11 9.5 7.5)'/></g></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1'><rect x='1' y='3' width='9' height='11' rx='1' fill='black' fill-opacity='0.2' transform='rotate(-8 5.5 8.5)'/><rect x='5' y='2' width='9' height='11' rx='1' fill='black' fill-opacity='0.4' transform='rotate(11 9.5 7.5)'/></g></svg>");
}
.lodge .live-win-card[data-game*="crash" i]   .live-win-avatar-wrap::before,
.lodge .live-win-card[data-game*="ascent" i]  .live-win-avatar-wrap::before,
.lodge .live-win-card[data-game*="market" i]  .live-win-avatar-wrap::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13 L 7.5 8 L 14 3'/><path d='M14 3 L 10.5 3.5 L 11.5 7 Z' fill='black'/></g></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13 L 7.5 8 L 14 3'/><path d='M14 3 L 10.5 3.5 L 11.5 7 Z' fill='black'/></g></svg>");
}
.lodge .live-win-card[data-game*="roulette" i] .live-win-avatar-wrap::before,
.lodge .live-win-card[data-game*="wheel" i]    .live-win-avatar-wrap::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1'><circle cx='8' cy='8' r='6.5' fill='black' fill-opacity='0.12'/><circle cx='8' cy='8' r='3.8' stroke-width='0.9' opacity='0.65'/><circle cx='8' cy='8' r='1.2' fill='black'/><circle cx='12.2' cy='5' r='1' fill='black'/></g></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1'><circle cx='8' cy='8' r='6.5' fill='black' fill-opacity='0.12'/><circle cx='8' cy='8' r='3.8' stroke-width='0.9' opacity='0.65'/><circle cx='8' cy='8' r='1.2' fill='black'/><circle cx='12.2' cy='5' r='1' fill='black'/></g></svg>");
}
.lodge .live-win-card[data-game*="plinko" i] .live-win-avatar-wrap::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='black'><circle cx='4' cy='3' r='0.9'/><circle cx='8' cy='3' r='0.9'/><circle cx='12' cy='3' r='0.9'/><circle cx='6' cy='6.5' r='0.9'/><circle cx='10' cy='6.5' r='0.9'/><circle cx='4' cy='10' r='0.9'/><circle cx='8' cy='10' r='0.9'/><circle cx='12' cy='10' r='0.9'/><circle cx='8' cy='13.5' r='1.4' opacity='0.8'/></g></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='black'><circle cx='4' cy='3' r='0.9'/><circle cx='8' cy='3' r='0.9'/><circle cx='12' cy='3' r='0.9'/><circle cx='6' cy='6.5' r='0.9'/><circle cx='10' cy='6.5' r='0.9'/><circle cx='4' cy='10' r='0.9'/><circle cx='8' cy='10' r='0.9'/><circle cx='12' cy='10' r='0.9'/><circle cx='8' cy='13.5' r='1.4' opacity='0.8'/></g></svg>");
}
.lodge .live-win-card[data-game*="mine" i] .live-win-avatar-wrap::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1'><circle cx='8' cy='9' r='4.5' fill='black' fill-opacity='0.35'/><line x1='8' y1='2.5' x2='8' y2='4.5' stroke-linecap='round'/><line x1='5' y1='3.5' x2='6.5' y2='5' stroke-linecap='round'/><line x1='11' y1='3.5' x2='9.5' y2='5' stroke-linecap='round'/></g></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1'><circle cx='8' cy='9' r='4.5' fill='black' fill-opacity='0.35'/><line x1='8' y1='2.5' x2='8' y2='4.5' stroke-linecap='round'/><line x1='5' y1='3.5' x2='6.5' y2='5' stroke-linecap='round'/><line x1='11' y1='3.5' x2='9.5' y2='5' stroke-linecap='round'/></g></svg>");
}
.lodge .live-win-card[data-game*="lottery" i] .live-win-avatar-wrap::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1'><rect x='2' y='4' width='12' height='8' rx='0.8' fill='black' fill-opacity='0.15'/><circle cx='5' cy='9.5' r='1' fill='black'/><circle cx='8' cy='9.5' r='1' fill='black'/><circle cx='11' cy='9.5' r='1' fill='black'/></g></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.1'><rect x='2' y='4' width='12' height='8' rx='0.8' fill='black' fill-opacity='0.15'/><circle cx='5' cy='9.5' r='1' fill='black'/><circle cx='8' cy='9.5' r='1' fill='black'/><circle cx='11' cy='9.5' r='1' fill='black'/></g></svg>");
}

.lodge .live-win-info {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lodge .live-win-name {
  grid-area: name;
  font-family: var(--font-lodge-display);
  font-weight: 500;
  font-size: 13px;
  font-style: italic;
  color: var(--lodge-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lodge .live-win-game {
  grid-area: game;
  font-family: var(--font-plaque);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lodge-ink-3);
}
.lodge .live-win-amount {
  grid-area: amount;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lodge-gold-2) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
  align-self: center;
  padding-left: 12px;
}
/* "time" slot reserved for future use (ledger timestamps). Hidden now. */

/* Empty state — when there are no dispatches yet */
.lodge .live-wins-scroll > div[style*="color:var(--faint)"] {
  font-family: var(--font-lodge-display) !important;
  font-style: italic;
  font-size: 13px !important;
  color: var(--lodge-ink-3) !important;
  padding: 28px 8px !important;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   HOUSE LEDGER — Top players preview restyled as a ledger.
   JS-generated .lb-row → ledger rows with rank + name + tally.
   ══════════════════════════════════════════════════════════════════ */
.lodge .leaderboard-preview {
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: 0;
}
.lodge .leaderboard-preview .section-heading {
  display: none;  /* replaced by .lodge-plaque above */
}

.lodge #leaderboard-preview {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lodge-hairline);
}
.lodge .lb-row {
  display: grid !important;
  grid-template-columns: 26px 1fr auto !important;
  align-items: baseline;
  gap: 12px;
  padding: 13px 4px !important;
  border-bottom: 1px solid var(--lodge-hairline);
  background: transparent !important;
  border-radius: 0 !important;
}
.lodge .lb-row + .lb-row { margin-top: 0; }
.lodge .lb-rank {
  font-family: var(--font-plaque) !important;
  font-size: 12px !important;
  font-weight: 600;
  color: var(--lodge-gold) !important;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.08em;
  /* Medal emojis still render — but we colour everything gold-ish so
     a medal doesn't fight the monochrome. */
  filter: saturate(0.45) brightness(0.95);
}
.lodge .lb-name {
  font-family: var(--font-lodge-display) !important;
  font-weight: 500 !important;
  font-style: italic;
  font-size: 14px !important;
  color: var(--lodge-ink) !important;
  letter-spacing: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lodge .lb-balance {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500;
  color: var(--lodge-gold-2) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════════
   SESSION LINE — today's session, condensed single-row callout
   ══════════════════════════════════════════════════════════════════ */
.lodge .session-stats {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--lodge-ink-3);
  text-transform: uppercase;
  border-top: 1px dashed var(--lodge-hairline);
  border-bottom: 1px dashed var(--lodge-hairline);
  background: transparent !important;
  border-radius: 0 !important;
}
.lodge .session-label { color: var(--lodge-ink-2); }
.lodge .session-games { color: var(--lodge-ink-3); }
.lodge .session-net.positive { color: var(--lodge-gold-2); font-weight: 600; }
.lodge .session-net.negative { color: oklch(0.58 0.18 25); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   ENTRY ANIMATION — staggered reveal of service rows + ledger rows
   when the Home screen becomes active. Subtle, one-time.
   ══════════════════════════════════════════════════════════════════ */
#home-screen.lodge.screen.active .lodge-service-row {
  animation: lodge-row-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#home-screen.lodge.screen.active .lodge-service-row:nth-child(1) { animation-delay: 140ms; }
#home-screen.lodge.screen.active .lodge-service-row:nth-child(2) { animation-delay: 220ms; }
#home-screen.lodge.screen.active .lodge-service-row:nth-child(3) { animation-delay: 300ms; }
#home-screen.lodge.screen.active .lodge-service-row:nth-child(4) { animation-delay: 380ms; }
@keyframes lodge-row-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Crest hail ribbon — gentle fade-in */
#home-screen.lodge.screen.active .lodge-crest {
  animation: lodge-fade-in 600ms ease-out both;
  animation-delay: 80ms;
}
@keyframes lodge-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reduced motion — honor user preference */
@media (prefers-reduced-motion: reduce) {
  #home-screen.lodge.screen.active .lodge-service-row,
  #home-screen.lodge.screen.active .lodge-crest {
    animation: none;
  }
  .lodge-seal.stamping { animation: none; }
  .lodge-seal.stamping::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   THE HOUSE · ALL ROOMS  (Games screen — #games-screen.lodge)
   Games catalog rendered as a printed programme of rooms, grouped
   under minor plaques. Every grid is 2-column on mobile so nothing
   overflows the viewport — the ONLY exception is the full-width
   Exchange card which spans the whole row.
   ══════════════════════════════════════════════════════════════════ */

#games-screen.lodge {
  padding: 20px 16px 40px;
  font-family: var(--font-body);
}

/* Minor plaque — smaller heading for each game category. Same Bodoni
   etched feel as the main plaque but less space + no big flourish. */
.lodge-plaque--minor {
  margin: 28px 0 4px;
  font-size: 10px;
  letter-spacing: 0.30em;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
}
.lodge-plaque--minor::before,
.lodge-plaque--minor::after {
  content: '';
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--lodge-hairline-2) 60%,
    transparent 100%);
  align-self: center;
}
.lodge-plaque--minor::after {
  background: linear-gradient(to left,
    transparent 0%,
    var(--lodge-hairline-2) 60%,
    transparent 100%);
}
.lodge-plaque-sub--minor {
  font-size: 11.5px;
  margin: 0 0 14px;
  color: var(--lodge-ink-3);
}

/* Games grid — always 2 columns on mobile so nothing overflows
   the 360px viewport width. Grid cells naturally absorb any width
   left over after column gutter. */
.lodge-games-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 6px;
  /* Prevent any card from being wider than its cell */
  overflow: hidden;
}
/* Full-width variant for featured rooms (the Exchange) */
.lodge-games-grid--wide {
  grid-template-columns: 1fr;
}

/* Game card — flex column with centered icon, name, desc, and floor
   amount at the bottom. Min-height keeps the grid rhythm. */
.lodge-game-card {
  /* Reset native <button> styling */
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* Lodge card surface */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px 12px;
  min-height: 172px;
  background:
    linear-gradient(180deg,
      oklch(0.13 0.012 80 / 0.88) 0%,
      oklch(0.09 0.008 75 / 0.92) 100%);
  border: 1px solid var(--lodge-hairline-2);
  border-radius: 2px;
  color: var(--lodge-ink);
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.06),
    0 1px 0 oklch(0 0 0 / 0.40),
    0 6px 16px oklch(0 0 0 / 0.25);
  overflow: hidden;
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease-out,
    box-shadow 240ms ease-out;
  /* Guard against long words breaking layout */
  min-width: 0;
  word-wrap: break-word;
}
/* Decorative corner ornament — a tiny diagonal fold like on the
   courtesy card, echoes the lodge stationery aesthetic. */
.lodge-game-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 18px; height: 18px;
  background: linear-gradient(135deg,
    var(--lodge-gold-wash) 0%,
    transparent 60%);
  border-right: 1px solid var(--lodge-hairline);
  border-bottom: 1px solid var(--lodge-hairline);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}
.lodge-game-card:active {
  transform: scale(0.97);
  border-color: var(--lodge-hairline-3);
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.12),
    0 1px 0 oklch(0 0 0 / 0.30),
    0 4px 10px oklch(0 0 0 / 0.20);
}

.lodge-game-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--lodge-gold);
  margin-bottom: 12px;
  transition: color 220ms ease-out, transform 220ms ease-out;
}
.lodge-game-card:active .lodge-game-icon {
  transform: scale(1.06);
  color: var(--lodge-gold-2);
}
.lodge-game-icon .lodge-icon--game { width: 58px; height: 58px; }

.lodge-game-name {
  font-family: var(--font-lodge-display);
  font-weight: 500;
  font-style: italic;
  font-size: 16px;
  line-height: 1.15;
  color: var(--lodge-ink);
  text-align: center;
  margin-bottom: 5px;
  /* Allow the name to break cleanly on narrow cards */
  word-break: break-word;
  hyphens: auto;
}
.lodge-game-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.35;
  color: var(--lodge-ink-3);
  text-align: center;
  margin-bottom: 10px;
  /* Clamp at 2 lines so cards stay uniform */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 30px;
  max-width: 100%;
}
.lodge-game-floor {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lodge-gold);
  font-variant-numeric: tabular-nums;
  padding-top: 8px;
  border-top: 1px solid var(--lodge-hairline);
  width: 100%;
  text-align: center;
}
.lodge-game-floor::before {
  content: 'Floor · ';
  color: var(--lodge-ink-4);
  font-weight: 400;
}

/* NEW / status badge — small Bodoni label pinned top-right */
.lodge-game-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--font-plaque);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.20em;
  padding: 3px 7px 3px 8px;
  border: 1px solid oklch(0.55 0.14 80 / 0.55);
  background: linear-gradient(180deg,
    oklch(0.18 0.02 80) 0%,
    oklch(0.12 0.015 75) 100%);
  color: var(--lodge-gold-2);
  text-transform: uppercase;
  border-radius: 1px;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.12),
    0 1px 0 oklch(0 0 0 / 0.3);
}

/* ── Full-width card variant: horizontal layout for The Exchange ──
   Icon left, text block right. Floor sits inline with desc. */
.lodge-game-card--wide {
  flex-direction: row;
  align-items: center;
  min-height: 120px;
  padding: 14px 14px 14px 12px;
  gap: 14px;
  text-align: left;
  /* Subtle baize-green wash to signal "trading floor" */
  background:
    linear-gradient(135deg,
      oklch(0.18 0.04 155 / 0.28) 0%,
      oklch(0.13 0.015 80 / 0.85) 60%,
      oklch(0.09 0.008 75 / 0.92) 100%);
}
.lodge-game-card--wide .lodge-game-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.lodge-game-card--wide .lodge-game-icon .lodge-icon--game {
  width: 64px; height: 64px;
}
.lodge-game-card--wide .lodge-game-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.lodge-game-card--wide .lodge-game-name {
  text-align: left;
  font-size: 20px;
  margin-bottom: 2px;
}
.lodge-game-card--wide .lodge-game-desc {
  text-align: left;
  font-size: 11.5px;
  max-width: none;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-height: 0;
  margin-bottom: 6px;
}
.lodge-game-floor--wide {
  margin-top: 2px;
  border-top: 0;
  border-left: 1px solid var(--lodge-hairline);
  padding-top: 0;
  padding-left: 8px;
  width: auto;
  text-align: left;
  font-size: 9px;
}
.lodge-game-floor--wide::before { content: ''; }

/* Multiplayer cards get a subtle violet tint — the rare signal hue
   from .impeccable.md. Announces "other members in the room" without
   shouting. */
.lodge-game-card.mp {
  background:
    linear-gradient(180deg,
      oklch(0.15 0.035 300 / 0.30) 0%,
      oklch(0.09 0.008 75 / 0.92) 80%);
}
.lodge-game-card.mp .lodge-game-icon { color: oklch(0.72 0.12 300); }
.lodge-game-card.mp:active .lodge-game-icon { color: oklch(0.82 0.14 300); }

/* Staggered entry reveal when the Games screen activates */
#games-screen.lodge.screen.active .lodge-games-grid > .lodge-game-card {
  animation: lodge-card-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#games-screen.lodge.screen.active .lodge-games-grid > .lodge-game-card:nth-child(1) { animation-delay: 80ms; }
#games-screen.lodge.screen.active .lodge-games-grid > .lodge-game-card:nth-child(2) { animation-delay: 140ms; }
#games-screen.lodge.screen.active .lodge-games-grid > .lodge-game-card:nth-child(3) { animation-delay: 200ms; }
#games-screen.lodge.screen.active .lodge-games-grid > .lodge-game-card:nth-child(4) { animation-delay: 260ms; }
#games-screen.lodge.screen.active .lodge-games-grid > .lodge-game-card:nth-child(5) { animation-delay: 320ms; }
@keyframes lodge-card-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #games-screen.lodge.screen.active .lodge-games-grid > .lodge-game-card { animation: none; }
}

/* .game-unavailable styling lives in style.css (canonical, screen-agnostic).
   Removed lodge-scoped duplicate (P3.C2.0): live markup never nests a
   .game-card inside .lodge, so the override never fired — applyDisabledGameUi()
   in app.js targets the generic .game-card / .featured-game-card classes
   defined in style.css for the unavailable overlay + badge. */

/* ══════════════════════════════════════════════════════════════════
   THE WHEEL  (Roulette screen — #roulette-screen.lodge.lodge-wheel)
   A Monte Carlo baccarat-room take on roulette. Green baize table,
   etched-gold number fields, proper layered-chip stacks, brass-framed
   roll strip, Bodoni plaques.

   Mobile guarantee: main board fits 328–336px viewport without any
   horizontal scroll. 13 columns (0 + 12 numbered) use fr units so
   the whole thing absorbs any width left after the screen padding.
   ══════════════════════════════════════════════════════════════════ */

/* ── Baize colour tokens (emerald, oxblood, obsidian) ─────────── */
.lodge-wheel {
  --baize-deep:    oklch(0.18 0.06 158);
  --baize-mid:     oklch(0.22 0.08 155);
  --baize-dark:    oklch(0.13 0.05 158);
  --baize-line:    oklch(0.32 0.10 150 / 0.45);
  --oxblood:       oklch(0.34 0.18 22);
  --oxblood-2:     oklch(0.42 0.20 24);
  --oxblood-dark:  oklch(0.22 0.14 20);
  --obsidian:      oklch(0.11 0.008 80);
  --obsidian-2:    oklch(0.16 0.010 80);
  --obsidian-dark: oklch(0.06 0.004 80);
  --table-gold:    oklch(0.82 0.13 85);
  --table-gold-2:  oklch(0.90 0.12 88);
}

#roulette-screen.lodge {
  padding: 16px 12px 32px;
  font-family: var(--font-body);
}

/* ── Game header row (back · ceremonial title · info) ──────────── */
.lodge-game-header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 10px;
  padding: 6px 0 20px;
  margin-bottom: 14px;
  position: relative;
}

/* Double-hairline + brass divider under the header (Wheel variant) */
.lodge-game-header--wheel {
  padding: 14px 0 22px;
  margin-bottom: 12px;
  background:
    linear-gradient(180deg,
      oklch(0.11 0.012 80 / 0.30) 0%,
      transparent 100%);
}
.lodge-game-header--wheel::before {
  /* Upper filigree line — very subtle */
  content: '';
  position: absolute;
  top: 6px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, var(--lodge-hairline) 50%, transparent 100%);
  opacity: 0.6;
}
.lodge-game-header--wheel::after {
  /* Double bottom rule: outer hairline + inner brass */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background:
    linear-gradient(to bottom,
      var(--lodge-hairline-2) 0 1px,
      transparent 1px 2px,
      var(--lodge-hairline-3) 2px 3px,
      transparent 3px 4px);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.lodge-back,
.lodge-info {
  width: 40px;
  height: 40px;
  border: 1px solid var(--lodge-hairline-2);
  background: linear-gradient(180deg,
    oklch(0.14 0.014 80 / 0.80), oklch(0.09 0.008 75 / 0.88));
  border-radius: 2px;
  color: var(--lodge-gold);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 160ms ease-out, border-color 220ms ease-out, color 200ms ease-out;
  padding: 0;
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.08),
    inset 0 -1px 0 oklch(0 0 0 / 0.3),
    0 1px 2px oklch(0 0 0 / 0.4);
  position: relative;
}
/* Tiny brass rivets at each corner of the header buttons */
.lodge-back::before,
.lodge-back::after,
.lodge-info::before,
.lodge-info::after {
  content: '';
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    var(--lodge-gold-2), var(--lodge-gold-dark));
  box-shadow: 0 1px 1px oklch(0 0 0 / 0.5);
}
.lodge-back::before,
.lodge-info::before  { top: 3px; left: 3px; }
.lodge-back::after,
.lodge-info::after   { bottom: 3px; right: 3px; }
.lodge-back svg,
.lodge-info svg { width: 20px; height: 20px; display: block; position: relative; z-index: 1; }
.lodge-back:active,
.lodge-info:active {
  transform: scale(0.94);
  border-color: var(--lodge-hairline-3);
  color: var(--lodge-gold-2);
}

/* Title block — now holds flourishes + emblem + 2-line text */
.lodge-game-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.lodge-title-flourish {
  width: 30px;
  height: 10px;
  color: var(--lodge-gold);
  opacity: 0.7;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px oklch(0.78 0.14 85 / 0.2));
}
.lodge-title-emblem-wrap {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      oklch(0.30 0.015 80) 0%,
      oklch(0.14 0.010 80) 60%,
      oklch(0.08 0.006 75) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.15),
    inset 0 0 0 1px oklch(0.75 0.12 85 / 0.35),
    inset 0 -1px 0 oklch(0 0 0 / 0.4),
    0 2px 4px oklch(0 0 0 / 0.5);
  flex-shrink: 0;
  position: relative;
}
.lodge-title-emblem {
  width: 26px;
  height: 26px;
  color: var(--lodge-gold-2);
  filter: drop-shadow(0 0 6px oklch(0.78 0.14 85 / 0.35));
  transition: transform 400ms ease-out;
}
/* When the wheel is spinning, rotate the emblem continuously */
.lodge-wheel.r-spinning .lodge-title-emblem {
  animation: lodge-wheel-emblem-spin 1.2s linear infinite;
}
@keyframes lodge-wheel-emblem-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lodge-wheel.r-spinning .lodge-title-emblem { animation: none; }
}

.lodge-title-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.lodge-game-title-text {
  font-family: var(--font-lodge-display);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  color: var(--lodge-ink);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
}
.lodge-game-subtitle {
  font-family: var(--font-plaque);
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lodge-gold);
  line-height: 1;
  opacity: 0.85;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   CROUPIER'S ANNOUNCEMENT BAR
   State-driven line under the header. JS switches data-state as bets
   are placed, the wheel spins, and results come in.
   ══════════════════════════════════════════════════════════════════ */
.r-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 14px;
  margin: 0 -4px 14px;
  font-family: var(--font-plaque);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lodge-gold);
  background:
    linear-gradient(180deg,
      oklch(0.11 0.010 80 / 0.70),
      oklch(0.07 0.006 75 / 0.85));
  border-top: 1px solid var(--lodge-hairline);
  border-bottom: 1px solid var(--lodge-hairline);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
  transition: color 220ms ease-out, background 220ms ease-out;
  position: relative;
}
.r-announcement-mark {
  color: var(--lodge-gold-2);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 400ms ease-out;
}
.r-announcement-text {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* State variants */
.r-announcement[data-state="bets-placed"] {
  color: var(--lodge-gold-2);
  background:
    linear-gradient(180deg,
      oklch(0.14 0.020 85 / 0.70),
      oklch(0.09 0.014 80 / 0.85));
}
.r-announcement[data-state="spinning"] {
  color: oklch(0.82 0.16 22);
  background:
    linear-gradient(180deg,
      oklch(0.18 0.08 22 / 0.50),
      oklch(0.11 0.05 22 / 0.80));
  border-color: oklch(0.35 0.14 22 / 0.45);
}
.r-announcement[data-state="spinning"] .r-announcement-mark {
  animation: r-announce-pulse 1.4s ease-in-out infinite;
}
@keyframes r-announce-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.r-announcement[data-state="winner-red"] {
  color: var(--table-gold-2);
  background:
    linear-gradient(180deg,
      oklch(0.25 0.13 22 / 0.65),
      oklch(0.15 0.08 22 / 0.85));
  border-color: oklch(0.42 0.18 22 / 0.55);
}
.r-announcement[data-state="winner-black"] {
  color: var(--table-gold-2);
  background:
    linear-gradient(180deg,
      oklch(0.22 0.010 85 / 0.85),
      oklch(0.13 0.008 80 / 0.90));
  border-color: oklch(0.35 0.010 85 / 0.55);
}
.r-announcement[data-state="winner-green"] {
  color: var(--table-gold-2);
  background:
    linear-gradient(180deg,
      oklch(0.22 0.10 155 / 0.60),
      oklch(0.13 0.06 155 / 0.85));
  border-color: oklch(0.40 0.14 155 / 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .r-announcement[data-state="spinning"] .r-announcement-mark { animation: none; }
}

/* ── Brass-framed roll strip ───────────────────────────────────── */
.r-roll-frame {
  position: relative;
  padding: 14px 18px 14px;
  margin: 0 auto 12px;
  border: 1px solid var(--lodge-hairline-2);
  border-radius: 3px;
  background:
    linear-gradient(180deg,
      oklch(0.15 0.016 80) 0%,
      oklch(0.11 0.012 78) 50%,
      oklch(0.08 0.008 75) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.14),
    inset 0 -1px 0 oklch(0 0 0 / 0.45),
    inset 0 0 0 1px oklch(0 0 0 / 0.25),
    0 6px 18px oklch(0 0 0 / 0.5),
    0 2px 6px oklch(0 0 0 / 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Inner brass hairline — second ring inside the frame */
.r-roll-frame::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--lodge-hairline);
  border-radius: 2px;
  pointer-events: none;
}
/* Idle shimmer on the brass frame */
.r-roll-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 40%,
    oklch(0.80 0.08 85 / 0.06) 50%,
    transparent 60%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: r-roll-frame-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes r-roll-frame-shimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
/* Spinning state — richer frame energy */
.lodge-wheel.r-spinning .r-roll-frame {
  border-color: oklch(0.50 0.10 80);
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.25),
    inset 0 -1px 0 oklch(0 0 0 / 0.45),
    inset 0 0 0 1px oklch(0.55 0.12 80 / 0.35),
    0 6px 22px oklch(0.55 0.12 75 / 0.35),
    0 2px 6px oklch(0 0 0 / 0.4);
}
.lodge-wheel.r-spinning .r-roll-frame::after {
  animation-duration: 1.2s;
}
@media (prefers-reduced-motion: reduce) {
  .r-roll-frame::after { animation: none; display: none; }
}

/* Corner brass-rivet flourishes — larger, with inner highlight */
.r-roll-frame-corner {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%,
      oklch(0.96 0.08 88) 0%,
      var(--lodge-gold-2) 30%,
      var(--lodge-gold) 60%,
      var(--lodge-gold-dark) 100%);
  box-shadow:
    inset 0 -1px 1px oklch(0 0 0 / 0.35),
    inset 0 1px 1px oklch(0.95 0.08 85 / 0.4),
    0 1px 2px oklch(0 0 0 / 0.55);
  z-index: 5;
}
.r-roll-frame-corner--tl { top: 5px; left: 5px; }
.r-roll-frame-corner--tr { top: 5px; right: 5px; }
.r-roll-frame-corner--bl { bottom: 5px; left: 5px; }
.r-roll-frame-corner--br { bottom: 5px; right: 5px; }

/* Side rails — short vertical gold bars framing the window */
.r-roll-rail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 40px;
  border-radius: 1px;
  background: linear-gradient(180deg,
    var(--lodge-gold-dark) 0%,
    var(--lodge-gold-2) 50%,
    var(--lodge-gold-dark) 100%);
  box-shadow:
    inset 0 0 0 1px oklch(0 0 0 / 0.3),
    0 0 4px oklch(0.78 0.14 85 / 0.35);
  z-index: 4;
  pointer-events: none;
}
.r-roll-rail--l { left: 18px; }
.r-roll-rail--r { right: 18px; }

/* Pointer (top) — caret down above center cell */
.r-roll-pointer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 10px;
  color: var(--lodge-gold-2);
  filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.7));
  z-index: 5;
  pointer-events: none;
}
.r-roll-pointer--top    { top: 2px; }
.r-roll-pointer--bottom { bottom: 2px; }
.r-roll-pointer svg { width: 100%; height: 100%; display: block; }
.lodge-wheel.r-spinning .r-roll-pointer {
  color: oklch(0.92 0.14 85);
  animation: r-pointer-pulse 0.9s ease-in-out infinite;
}
@keyframes r-pointer-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(1px); }
}

/* Override the legacy roll-container so it sits in the frame.
   JS (roulette.js:188) hard-codes width = cellWidth * visibleCells. */
.lodge-wheel .r-roll-container {
  position: relative;
  height: 52px;
  background: transparent;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--lodge-hairline),
    inset 0 2px 6px oklch(0 0 0 / 0.5);
}
.lodge-wheel .r-strip-track {
  display: flex;
  height: 100%;
}
.lodge-wheel .r-strip-num {
  flex: 0 0 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-family: var(--font-lodge-display);
  font-weight: 700;
  font-style: italic;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--table-gold-2);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.55), 0 0 8px oklch(0 0 0 / 0.4);
  border-right: 1px solid oklch(0 0 0 / 0.45);
  position: relative;
}
.lodge-wheel .r-strip-num.red {
  background: linear-gradient(180deg, var(--oxblood-2), var(--oxblood-dark));
  box-shadow: inset 0 1px 0 oklch(0.55 0.20 25 / 0.4);
}
.lodge-wheel .r-strip-num.black {
  background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian-dark));
  box-shadow: inset 0 1px 0 oklch(0.35 0.010 85 / 0.4);
}
.lodge-wheel .r-strip-num.green {
  background: linear-gradient(180deg, var(--baize-mid), var(--baize-dark));
  box-shadow: inset 0 1px 0 oklch(0.45 0.14 155 / 0.5);
}
.lodge-wheel .r-strip-highlight {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  border-left: 1px solid var(--table-gold);
  border-right: 1px solid var(--table-gold);
  background:
    linear-gradient(to right,
      oklch(0.82 0.14 85 / 0.10) 0%,
      oklch(0.82 0.14 85 / 0.18) 50%,
      oklch(0.82 0.14 85 / 0.10) 100%);
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 0 10px oklch(0.82 0.14 85 / 0.25);
}

/* ── Result info (game id) — subtle below the roll strip ──────── */
.lodge-wheel .roulette-result-info {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  color: var(--lodge-ink-4);
  text-transform: uppercase;
  min-height: 14px;
  margin-bottom: 10px;
}
.lodge-wheel .roulette-result-info:not(:empty)::before {
  content: '— ';
  color: var(--lodge-ink-4);
}

/* ══════════════════════════════════════════════════════════════════
   THE BAIZE — the green felt table
   13 columns (0 spanning 3 rows + 12 numbered columns × 3 rows).
   Side bets below, aligned to columns 2–13 so they sit under the
   numbered grid exactly like a real European roulette layout.
   ══════════════════════════════════════════════════════════════════ */
.lodge-wheel .r-table-wrap {
  /* Kill the legacy overflow-x scroll — we fit at 360px now */
  overflow: visible;
  padding: 10px 8px 12px;
  margin-bottom: 14px;
  background:
    /* Baize noise texture via layered radial gradients */
    radial-gradient(ellipse 180% 60% at 50% 0%,
      oklch(0.25 0.09 155 / 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 140% 70% at 50% 100%,
      oklch(0.11 0.04 155 / 0.75) 0%, transparent 60%),
    linear-gradient(180deg, var(--baize-mid) 0%, var(--baize-deep) 100%);
  border: 1px solid var(--baize-line);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 oklch(0.45 0.14 155 / 0.25),
    inset 0 -2px 8px oklch(0 0 0 / 0.45),
    inset 0 0 40px oklch(0 0 0 / 0.30),
    0 4px 14px oklch(0 0 0 / 0.40);
  position: relative;
}
/* Baize felt subtle cross-hatch */
.lodge-wheel .r-table-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      oklch(0.20 0.08 155 / 0.10) 0 1px,
      transparent 1px 4px),
    repeating-linear-gradient(-45deg,
      oklch(0.20 0.08 155 / 0.08) 0 1px,
      transparent 1px 4px);
  pointer-events: none;
  opacity: 0.6;
  border-radius: inherit;
}

.lodge-wheel .r-standard-board {
  display: grid;
  /* Zero slightly wider; 12 numbered cols equal */
  grid-template-columns: 1.1fr repeat(12, 1fr);
  grid-template-rows: repeat(3, 46px);
  gap: 2px;
  /* Drop the legacy min-width that caused horizontal scroll */
  min-width: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

.lodge-wheel .roulette-cell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  text-align: center;
  font-family: var(--font-lodge-display);
  font-weight: 700;
  font-style: italic;
  font-size: 13px;
  border: 1px solid var(--baize-line);
  border-radius: 2px;
  cursor: pointer;
  transition: filter 140ms ease-out, transform 140ms ease-out;
  color: var(--table-gold-2);
  user-select: none;
  overflow: hidden;
  /* Etched number: inset shadow gives engraved feel */
  text-shadow:
    0 1px 0 oklch(0 0 0 / 0.6),
    0 -1px 0 oklch(0.85 0.12 85 / 0.15);
}
.lodge-wheel .roulette-cell::before {
  /* Subtle top highlight — like a polished enamel surface */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg,
    oklch(0.60 0.15 80 / 0.08) 0%,
    transparent 100%);
  pointer-events: none;
}
.lodge-wheel .roulette-cell:active {
  transform: scale(0.95);
  filter: brightness(1.15);
}
.lodge-wheel .roulette-cell.num-red {
  background: linear-gradient(180deg, var(--oxblood-2), var(--oxblood-dark));
  box-shadow:
    inset 0 1px 0 oklch(0.55 0.20 25 / 0.45),
    inset 0 -1px 0 oklch(0 0 0 / 0.35);
}
.lodge-wheel .roulette-cell.num-black {
  background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian-dark));
  border-color: oklch(0.35 0.010 85 / 0.45);
  box-shadow:
    inset 0 1px 0 oklch(0.40 0.010 85 / 0.4),
    inset 0 -1px 0 oklch(0 0 0 / 0.45);
}
.lodge-wheel .roulette-cell.num-green {
  background: linear-gradient(180deg, var(--baize-mid), var(--baize-dark));
  border-color: oklch(0.45 0.14 155 / 0.65);
  box-shadow:
    inset 0 1px 0 oklch(0.45 0.14 155 / 0.55),
    inset 0 -1px 0 oklch(0 0 0 / 0.35);
  /* Zero label gets a taller italic — it's the one special cell */
  font-size: 18px;
}
.lodge-wheel .roulette-cell.num-green .r-cell-label {
  color: var(--table-gold-2);
}
.lodge-wheel .r-cell-label {
  position: relative;
  z-index: 1;
  line-height: 1;
}

/* Result highlight — gold ring pulse */
.lodge-wheel .roulette-cell.result-highlight {
  animation: lodge-wheel-highlight 0.75s ease-in-out infinite alternate;
  z-index: 5;
}
@keyframes lodge-wheel-highlight {
  from {
    box-shadow:
      inset 0 0 0 2px var(--table-gold),
      0 0 10px oklch(0.82 0.13 85 / 0.5);
  }
  to {
    box-shadow:
      inset 0 0 0 2px var(--table-gold-2),
      0 0 24px oklch(0.90 0.14 85 / 0.85),
      0 0 40px oklch(0.82 0.13 85 / 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lodge-wheel .roulette-cell.result-highlight {
    animation: none;
    box-shadow: inset 0 0 0 2px var(--table-gold-2), 0 0 16px oklch(0.82 0.13 85 / 0.7);
  }
}

/* ── Side bets — aligned to columns 2-13 of the main board ───── */
.lodge-wheel .roulette-side-bets {
  display: grid;
  grid-template-columns: 1.1fr repeat(12, 1fr);
  gap: 2px;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}
/* Dozens row: 1st 12 starts at col 2, each spans 4 cols */
.lodge-wheel .roulette-side-bets > :nth-child(1) { grid-column: 2 / span 4; }
.lodge-wheel .roulette-side-bets > :nth-child(2) { grid-column: span 4; }
.lodge-wheel .roulette-side-bets > :nth-child(3) { grid-column: span 4; }
/* Even-money row: start at col 2 on new row, each spans 2 cols */
.lodge-wheel .roulette-side-bets > :nth-child(4) { grid-column: 2 / span 2; }
.lodge-wheel .roulette-side-bets > :nth-child(n+5) { grid-column: span 2; }

.lodge-wheel .roulette-side-bets .roulette-cell {
  font-family: var(--font-plaque);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 4px;
  min-height: 36px;
  display: grid;
  place-items: center;
}
.lodge-wheel .roulette-cell.side-bet {
  background: linear-gradient(180deg, var(--baize-mid), var(--baize-dark));
  border-color: var(--baize-line);
  color: var(--table-gold);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
  font-size: 10px;
}
.lodge-wheel .roulette-cell.side-red {
  background: linear-gradient(180deg, var(--oxblood-2), var(--oxblood-dark));
  border-color: oklch(0.45 0.18 24 / 0.5);
  color: var(--table-gold-2);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.55);
  font-size: 11px;
}
.lodge-wheel .roulette-cell.side-black {
  background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian-dark));
  border-color: oklch(0.35 0.010 85 / 0.45);
  color: var(--table-gold-2);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.55);
  font-size: 11px;
}
.lodge-wheel .roulette-cell.side-wide {
  font-size: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   THE CHIPS — proper layered casino chips with edge stripes
   Denomination-specific colours. 8 edge marks rendered via conic-
   gradient masks. No flat-circle chips here.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   BRASS STAKE NAMEPLATE — "Stake on the table" with flanking
   engraved flourishes. Sits directly under the baize so the eye
   tracks: board → stake → chips → controls.
   ══════════════════════════════════════════════════════════════════ */
.r-stake-plate {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background:
    linear-gradient(180deg,
      oklch(0.16 0.018 82) 0%,
      oklch(0.11 0.012 78) 50%,
      oklch(0.07 0.008 75) 100%);
  border: 1px solid var(--lodge-hairline-2);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.12),
    inset 0 -1px 0 oklch(0 0 0 / 0.40),
    inset 0 0 0 1px oklch(0 0 0 / 0.2),
    0 2px 6px oklch(0 0 0 / 0.4);
  position: relative;
}
/* Brass rivets at plate corners */
.r-stake-plate::before,
.r-stake-plate::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    var(--lodge-gold-2), var(--lodge-gold-dark));
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 1px 1.5px oklch(0 0 0 / 0.6);
}
.r-stake-plate::before { left: 6px; }
.r-stake-plate::after  { right: 6px; }

.r-stake-orn {
  width: 100%;
  max-width: 80px;
  height: 10px;
  color: var(--lodge-gold);
  opacity: 0.75;
  min-width: 0;
}
.r-stake-orn--l { justify-self: end; }
.r-stake-orn--r { justify-self: start; }

.r-stake-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  white-space: nowrap;
  padding: 0 4px;
}
.r-stake-label {
  font-family: var(--font-plaque);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lodge-gold);
  opacity: 0.85;
  line-height: 1;
}
.lodge-wheel .r-total-bet {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--table-gold-2);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* Override legacy styles */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  display: inline;
  text-transform: none;
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
}

/* ══════════════════════════════════════════════════════════════════
   CHIP SECTION — wooden chip tray with brass plate, stacked chips
   ══════════════════════════════════════════════════════════════════ */
.lodge-wheel .r-chip-section {
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border: 0;
  position: relative;
  box-shadow: none;
}

/* Brass plate title ribbon above the tray */
.r-chip-section-plate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background:
    linear-gradient(180deg,
      oklch(0.15 0.016 82) 0%,
      oklch(0.11 0.012 78) 100%);
  border: 1px solid var(--lodge-hairline-2);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.10);
  color: var(--lodge-gold);
}
.r-chip-plate-orn {
  width: 100%;
  max-width: 60px;
  height: 10px;
  opacity: 0.7;
  color: inherit;
  min-width: 0;
}
.r-chip-plate-orn--l { justify-self: end; }
.r-chip-plate-orn--r { justify-self: start; }
.r-chip-section-label {
  font-family: var(--font-plaque);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--lodge-gold);
  white-space: nowrap;
  padding: 0 4px;
  line-height: 1;
}

/* The tray itself — felt-green well where chips sit */
.r-chip-tray {
  padding: 14px 10px 12px;
  background:
    radial-gradient(ellipse 130% 70% at 50% 100%,
      oklch(0.14 0.05 158 / 0.5) 0%, transparent 70%),
    linear-gradient(180deg,
      oklch(0.13 0.04 155) 0%,
      oklch(0.10 0.03 158) 100%);
  border: 1px solid var(--lodge-hairline-2);
  border-top: 1px solid var(--baize-line);
  border-radius: 0 0 2px 2px;
  box-shadow:
    inset 0 2px 6px oklch(0 0 0 / 0.55),
    inset 0 0 24px oklch(0 0 0 / 0.3),
    0 1px 0 oklch(0 0 0 / 0.4);
}

/* Hide the legacy "Chip:" label if it's still in markup */
.lodge-wheel .r-chip-label { display: none; }

/* The chip row */
.lodge-wheel .r-chip-selector {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 2px 2px 4px;
  overflow: visible;
  justify-content: unset;
  flex-wrap: nowrap;
  margin: 0;
}

/* Base chip — layered concentric rings via box-shadow + conic mask */
.lodge-wheel .r-chip {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 52px;
  min-width: 0;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: var(--font-lodge-display);
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  color: var(--chip-text, oklch(0.98 0.02 85));
  /* Chip body — radial gradient gives domed look */
  background:
    radial-gradient(circle at 32% 28%,
      var(--chip-hi, oklch(0.50 0.10 80)) 0%,
      var(--chip-body, oklch(0.30 0.08 80)) 55%,
      var(--chip-lo, oklch(0.18 0.06 80)) 100%);
  /* Outer rim + inner plug + faint inset depth */
  box-shadow:
    inset 0 0 0 2px var(--chip-rim, oklch(0.85 0.10 80 / 0.9)),
    inset 0 0 0 3px var(--chip-lo, oklch(0.18 0.06 80)),
    inset 0 0 0 13px var(--chip-lo, oklch(0.18 0.06 80)),
    inset 0 0 0 14px var(--chip-rim, oklch(0.85 0.10 80 / 0.65)),
    inset 0 3px 4px oklch(0.85 0.10 80 / 0.15),
    inset 0 -3px 4px oklch(0 0 0 / 0.35),
    0 3px 8px oklch(0 0 0 / 0.55);
  transition: transform 180ms cubic-bezier(0.34, 1.3, 0.64, 1), filter 180ms ease-out;
  user-select: none;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5), 0 0 6px oklch(0 0 0 / 0.4);
  line-height: 1;
}
/* The 8 edge marks — small rectangles arranged radially via conic
   gradient mask. Gives the "dashed-edge" chip look without 8 divs. */
.lodge-wheel .r-chip::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--chip-edge, oklch(0.85 0.10 80 / 0.9)) 0deg 18deg,
    transparent 18deg 45deg,
    var(--chip-edge, oklch(0.85 0.10 80 / 0.9)) 45deg 63deg,
    transparent 63deg 90deg,
    var(--chip-edge, oklch(0.85 0.10 80 / 0.9)) 90deg 108deg,
    transparent 108deg 135deg,
    var(--chip-edge, oklch(0.85 0.10 80 / 0.9)) 135deg 153deg,
    transparent 153deg 180deg,
    var(--chip-edge, oklch(0.85 0.10 80 / 0.9)) 180deg 198deg,
    transparent 198deg 225deg,
    var(--chip-edge, oklch(0.85 0.10 80 / 0.9)) 225deg 243deg,
    transparent 243deg 270deg,
    var(--chip-edge, oklch(0.85 0.10 80 / 0.9)) 270deg 288deg,
    transparent 288deg 315deg,
    var(--chip-edge, oklch(0.85 0.10 80 / 0.9)) 315deg 333deg,
    transparent 333deg 360deg);
  /* Ring mask: only the rim shows */
  -webkit-mask: radial-gradient(circle,
    transparent 62%, black 64%, black 74%, transparent 76%);
          mask: radial-gradient(circle,
    transparent 62%, black 64%, black 74%, transparent 76%);
  pointer-events: none;
}
/* Inner engraved circle for the denomination */
.lodge-wheel .r-chip::after {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--chip-inner-hi, oklch(0.35 0.08 80)) 0%,
    var(--chip-inner-lo, oklch(0.18 0.06 80)) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.10 80 / 0.2),
    inset 0 -1px 0 oklch(0 0 0 / 0.4),
    inset 0 0 0 1px oklch(0 0 0 / 0.35);
  z-index: 0;
  pointer-events: none;
}
.lodge-wheel .r-chip-value {
  position: relative;
  z-index: 1;
}

/* Denomination palettes — classic casino colour coding */
.lodge-wheel .r-chip--1 {
  --chip-hi: oklch(0.96 0.020 85);
  --chip-body: oklch(0.80 0.015 85);
  --chip-lo: oklch(0.50 0.010 85);
  --chip-rim: oklch(0.97 0.015 85);
  --chip-edge: oklch(0.35 0.010 85);
  --chip-inner-hi: oklch(0.90 0.015 85);
  --chip-inner-lo: oklch(0.65 0.012 85);
  --chip-text: oklch(0.20 0.015 85);
  text-shadow: 0 1px 0 oklch(0.98 0.015 85 / 0.6), 0 0 2px oklch(0 0 0 / 0.2);
}
.lodge-wheel .r-chip--5 {
  --chip-hi: oklch(0.58 0.20 25);
  --chip-body: oklch(0.42 0.18 22);
  --chip-lo: oklch(0.24 0.12 20);
  --chip-rim: oklch(0.88 0.04 25);
  --chip-edge: oklch(0.96 0.015 85);
  --chip-inner-hi: oklch(0.48 0.19 22);
  --chip-inner-lo: oklch(0.28 0.14 20);
  --chip-text: oklch(0.97 0.015 85);
}
.lodge-wheel .r-chip--10 {
  --chip-hi: oklch(0.52 0.14 240);
  --chip-body: oklch(0.38 0.13 240);
  --chip-lo: oklch(0.20 0.10 240);
  --chip-rim: oklch(0.88 0.04 240);
  --chip-edge: oklch(0.96 0.015 85);
  --chip-inner-hi: oklch(0.44 0.14 240);
  --chip-inner-lo: oklch(0.24 0.12 240);
  --chip-text: oklch(0.97 0.015 85);
}
.lodge-wheel .r-chip--25 {
  --chip-hi: oklch(0.50 0.14 155);
  --chip-body: oklch(0.36 0.12 155);
  --chip-lo: oklch(0.20 0.08 155);
  --chip-rim: oklch(0.88 0.06 155);
  --chip-edge: oklch(0.96 0.015 85);
  --chip-inner-hi: oklch(0.42 0.14 155);
  --chip-inner-lo: oklch(0.24 0.10 155);
  --chip-text: oklch(0.97 0.015 85);
}
.lodge-wheel .r-chip--50 {
  --chip-hi: oklch(0.68 0.16 50);
  --chip-body: oklch(0.52 0.14 50);
  --chip-lo: oklch(0.30 0.10 48);
  --chip-rim: oklch(0.90 0.08 75);
  --chip-edge: oklch(0.24 0.06 48);
  --chip-inner-hi: oklch(0.58 0.15 50);
  --chip-inner-lo: oklch(0.34 0.12 48);
  --chip-text: oklch(0.14 0.03 50);
  text-shadow: 0 1px 0 oklch(0.80 0.14 55 / 0.55), 0 0 2px oklch(0 0 0 / 0.3);
}
.lodge-wheel .r-chip--100 {
  --chip-hi: oklch(0.28 0.012 85);
  --chip-body: oklch(0.14 0.008 80);
  --chip-lo: oklch(0.07 0.004 75);
  --chip-rim: oklch(0.82 0.13 85);
  --chip-edge: oklch(0.88 0.14 88);
  --chip-inner-hi: oklch(0.22 0.010 80);
  --chip-inner-lo: oklch(0.10 0.006 75);
  --chip-text: oklch(0.82 0.13 85);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.8), 0 0 6px oklch(0.82 0.13 85 / 0.3);
}

/* Stack-under-chip shadows — makes each chip look like top of a short
   pile. Positioned in the same order as the box-shadow rules above
   so they cascade correctly. */
.lodge-wheel .r-chip {
  /* Two tiny strata below each chip fake the stacked feel */
  box-shadow:
    inset 0 0 0 2px var(--chip-rim, oklch(0.85 0.10 80 / 0.9)),
    inset 0 0 0 3px var(--chip-lo, oklch(0.18 0.06 80)),
    inset 0 0 0 13px var(--chip-lo, oklch(0.18 0.06 80)),
    inset 0 0 0 14px var(--chip-rim, oklch(0.85 0.10 80 / 0.65)),
    inset 0 3px 4px oklch(0.85 0.10 80 / 0.15),
    inset 0 -3px 4px oklch(0 0 0 / 0.35),
    /* Stack: two thin dark rims showing chips beneath */
    0 2px 0 var(--chip-lo, oklch(0.14 0.04 80)),
    0 4px 0 var(--chip-body, oklch(0.28 0.08 80)),
    0 6px 0 var(--chip-lo, oklch(0.14 0.04 80)),
    0 8px 10px oklch(0 0 0 / 0.55),
    0 2px 6px oklch(0 0 0 / 0.35);
}

/* Active chip — raised higher, brighter ring, taller stack */
.lodge-wheel .r-chip:active { transform: translateY(-4px) scale(0.95); }
.lodge-wheel .r-chip.active {
  transform: scale(1.1) translateY(-6px);
  filter: saturate(1.12) brightness(1.08);
  box-shadow:
    inset 0 0 0 2px var(--chip-rim, oklch(0.85 0.10 80 / 0.9)),
    inset 0 0 0 3px var(--chip-lo, oklch(0.18 0.06 80)),
    inset 0 0 0 13px var(--chip-lo, oklch(0.18 0.06 80)),
    inset 0 0 0 14px var(--chip-rim, oklch(0.85 0.10 80 / 0.65)),
    inset 0 3px 4px oklch(0.85 0.10 80 / 0.15),
    inset 0 -3px 4px oklch(0 0 0 / 0.35),
    /* Raised stack — 4 strata + aura */
    0 2px 0 var(--chip-lo, oklch(0.14 0.04 80)),
    0 4px 0 var(--chip-body, oklch(0.28 0.08 80)),
    0 6px 0 var(--chip-lo, oklch(0.14 0.04 80)),
    0 8px 0 var(--chip-body, oklch(0.28 0.08 80)),
    0 10px 0 var(--chip-lo, oklch(0.14 0.04 80)),
    0 0 0 2px oklch(0.82 0.14 85 / 0.35),
    0 0 16px oklch(0.82 0.14 85 / 0.55),
    0 12px 18px oklch(0 0 0 / 0.6);
}

/* ── Chip placed ON a board cell — smaller but same aesthetic ── */
.lodge-wheel .r-cell-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      var(--table-gold-2) 0%,
      var(--lodge-gold) 55%,
      var(--lodge-gold-dark) 100%);
  color: oklch(0.10 0.01 80);
  font-family: var(--font-lodge-display);
  font-style: italic;
  font-weight: 700;
  font-size: 10px;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1.5px oklch(0 0 0 / 0.35),
    inset 0 0 0 2.5px oklch(0.88 0.14 85 / 0.65),
    inset 0 -2px 2px oklch(0 0 0 / 0.3),
    0 2px 5px oklch(0 0 0 / 0.65);
  z-index: 3;
  pointer-events: none;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 oklch(0.90 0.10 85 / 0.7);
}
.lodge-wheel .r-cell-chip::before {
  /* Edge dashes on the cell chip */
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    oklch(0 0 0 / 0.5) 0deg 22deg, transparent 22deg 45deg,
    oklch(0 0 0 / 0.5) 45deg 67deg, transparent 67deg 90deg,
    oklch(0 0 0 / 0.5) 90deg 112deg, transparent 112deg 135deg,
    oklch(0 0 0 / 0.5) 135deg 157deg, transparent 157deg 180deg,
    oklch(0 0 0 / 0.5) 180deg 202deg, transparent 202deg 225deg,
    oklch(0 0 0 / 0.5) 225deg 247deg, transparent 247deg 270deg,
    oklch(0 0 0 / 0.5) 270deg 292deg, transparent 292deg 315deg,
    oklch(0 0 0 / 0.5) 315deg 337deg, transparent 337deg 360deg);
  -webkit-mask: radial-gradient(circle,
    transparent 62%, black 64%, black 78%, transparent 80%);
          mask: radial-gradient(circle,
    transparent 62%, black 64%, black 78%, transparent 80%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   ACTION PADDLES — Clear the Board (carved) + Set the Wheel (gold)
   The primary button gets a rotating wheel emblem while spinning.
   ══════════════════════════════════════════════════════════════════ */
.lodge-wheel .r-action-btns {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
  justify-content: unset;
  max-width: 100%;
  margin: 0 0 20px;
}
.lodge-wheel .lodge-action {
  max-width: none;
  flex: initial;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-plaque);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 0;
  height: 54px;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 160ms ease-out, filter 200ms ease-out, box-shadow 240ms ease-out;
  line-height: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 12px;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.lodge-action-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
  transition: transform 400ms ease-out;
}
.lodge-action-label {
  font-size: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ghost (Clear the Board) — carved/recessed feel */
.lodge-wheel .lodge-action--ghost {
  color: var(--lodge-gold);
  background:
    linear-gradient(180deg,
      oklch(0.13 0.012 80) 0%,
      oklch(0.08 0.008 75) 100%);
  border: 1px solid var(--lodge-hairline-2);
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.10),
    inset 0 -1px 0 oklch(0 0 0 / 0.35),
    inset 0 0 0 1px oklch(0 0 0 / 0.2),
    0 1px 0 oklch(0 0 0 / 0.4);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.45);
}
.lodge-wheel .lodge-action--ghost::before {
  /* Recessed inner frame */
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid oklch(0 0 0 / 0.35);
  border-radius: 1px;
  pointer-events: none;
}
.lodge-wheel .lodge-action--ghost:active {
  transform: scale(0.97);
  border-color: var(--lodge-hairline-3);
  color: var(--lodge-gold-2);
  box-shadow:
    inset 0 2px 4px oklch(0 0 0 / 0.55),
    inset 0 0 0 1px oklch(0 0 0 / 0.25),
    0 1px 0 oklch(0 0 0 / 0.3);
}

/* Primary (Set the Wheel) — gold ceremonial button */
.lodge-wheel .lodge-action--primary {
  color: oklch(0.15 0.02 75);
  background:
    linear-gradient(180deg,
      oklch(0.96 0.12 90) 0%,
      oklch(0.86 0.14 85) 15%,
      oklch(0.72 0.14 80) 55%,
      oklch(0.55 0.12 75) 100%);
  border: 1px solid oklch(0.48 0.12 75);
  box-shadow:
    inset 0 1px 0 oklch(0.98 0.10 90 / 0.75),
    inset 0 -2px 0 oklch(0 0 0 / 0.22),
    inset 0 0 0 1px oklch(0.90 0.13 88 / 0.35),
    0 2px 0 oklch(0.32 0.08 68),
    0 5px 14px oklch(0.55 0.12 75 / 0.40),
    0 2px 4px oklch(0 0 0 / 0.35);
  text-shadow:
    0 1px 0 oklch(0.98 0.10 90 / 0.55),
    0 0 4px oklch(0.96 0.10 88 / 0.4);
}
/* Animated sheen sliding across the primary button */
.lodge-wheel .lodge-action--primary::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 30%;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(0.98 0.08 88 / 0.45) 50%,
    transparent 100%);
  transform: skewX(-22deg);
  animation: r-primary-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes r-primary-sheen {
  0%, 100% { left: -30%; opacity: 0; }
  45%      { opacity: 0; }
  55%      { opacity: 1; }
  80%      { left: 110%; opacity: 0; }
}
.lodge-wheel .lodge-action--primary .lodge-action-icon {
  color: oklch(0.18 0.04 70);
  filter: drop-shadow(0 1px 0 oklch(0.98 0.10 90 / 0.5));
}
.lodge-wheel .lodge-action--primary:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 oklch(0.98 0.10 90 / 0.4),
    inset 0 -1px 0 oklch(0 0 0 / 0.2),
    inset 0 0 0 1px oklch(0.90 0.13 88 / 0.3),
    0 1px 0 oklch(0.32 0.08 68),
    0 2px 6px oklch(0.55 0.12 75 / 0.3);
}
/* While spinning: rotate the wheel emblem on the button */
.lodge-wheel.r-spinning .lodge-action--primary .lodge-action-icon {
  animation: lodge-wheel-emblem-spin 0.8s linear infinite;
}
.lodge-wheel.r-spinning .lodge-action--primary::before {
  animation-duration: 1.5s;
}
.lodge-wheel .lodge-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.55);
}
@media (prefers-reduced-motion: reduce) {
  .lodge-wheel .lodge-action--primary::before { animation: none; opacity: 0; }
  .lodge-wheel.r-spinning .lodge-action--primary .lodge-action-icon { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LE TABLEAU — Recent spins history with rouge/noir/zéro counters
   ══════════════════════════════════════════════════════════════════ */

/* Slightly tighten the minor plaque when used as the tableau header */
.r-tableau-plaque { margin-top: 10px; }

.lodge-wheel .r-history-section {
  margin-top: 8px;
  padding: 14px 12px 12px;
  border: 1px solid var(--lodge-hairline-2);
  border-radius: 2px;
  background:
    linear-gradient(180deg,
      oklch(0.11 0.010 80 / 0.85),
      oklch(0.07 0.006 75 / 0.92));
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.08),
    0 1px 0 oklch(0 0 0 / 0.35);
}
/* Hide legacy title — plaque does the heading */
.lodge-wheel .r-history-title { display: none; }
.lodge-wheel .r-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 90px;
  overflow-y: auto;
  justify-content: flex-start;
  padding: 2px 2px 4px;
}
.lodge-wheel .r-history-list:empty::before {
  content: 'No spins yet — the wheel is still';
  font-family: var(--font-lodge-display);
  font-style: italic;
  font-size: 12px;
  color: var(--lodge-ink-3);
  padding: 10px 4px;
}
/* Disc numbers — Bodoni italic, embossed inset */
.lodge-wheel .r-hist-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-lodge-display);
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  color: var(--table-gold-2);
  border: 1px solid oklch(0 0 0 / 0.4);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.55);
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.18),
    inset 0 -1px 0 oklch(0 0 0 / 0.4),
    inset 0 0 0 1px oklch(0.75 0.12 85 / 0.25),
    0 1px 2px oklch(0 0 0 / 0.5);
  flex-shrink: 0;
  position: relative;
}
/* Newest 3 spins get a subtle gold aura — "fresh" markers */
.lodge-wheel .r-history-list .r-hist-num:nth-child(-n+3) {
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.08 85 / 0.22),
    inset 0 -1px 0 oklch(0 0 0 / 0.4),
    inset 0 0 0 1px oklch(0.85 0.13 85 / 0.45),
    0 0 6px oklch(0.82 0.13 85 / 0.25),
    0 1px 2px oklch(0 0 0 / 0.5);
}
.lodge-wheel .r-hist-num.red {
  background: linear-gradient(180deg, var(--oxblood-2), var(--oxblood-dark));
}
.lodge-wheel .r-hist-num.black {
  background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian-dark));
}
.lodge-wheel .r-hist-num.green {
  background: linear-gradient(180deg, var(--baize-mid), var(--baize-dark));
}

/* Stats row — Rouge · Noir · Zéro counters below the history strip */
.r-history-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--lodge-hairline);
  font-family: var(--font-plaque);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lodge-ink-3);
}
.r-hist-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  background:
    linear-gradient(180deg,
      oklch(0.10 0.008 80 / 0.5),
      oklch(0.06 0.005 75 / 0.6));
  border: 1px solid var(--lodge-hairline);
  border-radius: 2px;
  min-width: 0;
}
.r-hist-stat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid oklch(0 0 0 / 0.45);
}
.r-hist-stat--red .r-hist-stat-dot {
  background: linear-gradient(180deg, var(--oxblood-2), var(--oxblood-dark));
}
.r-hist-stat--black .r-hist-stat-dot {
  background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian-dark));
  border-color: oklch(0.35 0.010 85 / 0.6);
}
.r-hist-stat--green .r-hist-stat-dot {
  background: linear-gradient(180deg, var(--baize-mid), var(--baize-dark));
  border-color: oklch(0.40 0.14 155 / 0.6);
}
.r-hist-stat-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  color: var(--lodge-gold-2);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  min-width: 14px;
  text-align: right;
}
.r-hist-stat-label {
  color: var(--lodge-ink-3);
  opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════════
   THE ANOINTMENT — Daily social-XP rewards (lodge aesthetic)
   Rows of tasks, each showing icon · name · desc · XP badge · action.
   Platforms each get a small accent colour pulled from casino palette.
   ══════════════════════════════════════════════════════════════════ */
.lodge-social {
  border-top: 1px solid var(--lodge-hairline-2);
  border-bottom: 1px solid var(--lodge-hairline-2);
  background:
    linear-gradient(180deg,
      oklch(0.18 0.035 155 / 0.10) 0%,
      oklch(0.14 0.020 155 / 0.05) 100%);
  margin-bottom: 12px;
}
.lodge-social-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 10px;
  border-bottom: 1px solid var(--lodge-hairline);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  color: var(--lodge-ink);
  font-family: inherit;
  text-align: left;
  transition: background 200ms ease-out;
  min-width: 0;
}
.lodge-social-row:last-child { border-bottom: 0; }
.lodge-social-row:not(.claimed):not(.cooldown):not(.pending):hover {
  background: var(--lodge-gold-wash);
}
.lodge-social-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lodge-hairline);
  border-radius: 2px;
  background:
    linear-gradient(135deg,
      oklch(0.10 0.010 80 / 0.85) 0%,
      oklch(0.07 0.008 75 / 0.90) 100%);
  font-size: 22px;
  color: var(--lodge-gold);
  box-shadow: inset 0 1px 0 oklch(0.80 0.08 85 / 0.06);
  flex-shrink: 0;
}
.lodge-social-body { min-width: 0; }
.lodge-social-name {
  font-family: var(--font-lodge-display);
  font-weight: 500;
  font-style: italic;
  font-size: 15px;
  color: var(--lodge-ink);
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.lodge-social-name em {
  font-style: normal;
  font-family: var(--font-plaque);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lodge-ink-3);
  padding: 2px 6px;
  background: oklch(0.12 0.008 85 / 0.65);
  border: 1px solid var(--lodge-hairline);
  border-radius: 1px;
}
.lodge-social-desc {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--lodge-ink-3);
  max-width: 42ch;
}
.lodge-social-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 98px;
}
.lodge-social-xp {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lodge-gold-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lodge-social-xp::before {
  content: '+';
  color: var(--lodge-gold);
}
.lodge-social-xp::after {
  content: ' XP';
  color: var(--lodge-ink-4);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.10em;
}
.lodge-social-btn {
  padding: 7px 14px;
  font-family: var(--font-plaque);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1;
  border: 1px solid oklch(0.48 0.12 75);
  background:
    linear-gradient(180deg,
      oklch(0.96 0.12 90) 0%,
      oklch(0.86 0.14 85) 15%,
      oklch(0.72 0.14 80) 55%,
      oklch(0.55 0.12 75) 100%);
  color: oklch(0.15 0.02 75);
  box-shadow:
    inset 0 1px 0 oklch(0.98 0.10 90 / 0.55),
    inset 0 -1px 0 oklch(0 0 0 / 0.2),
    0 2px 0 oklch(0.32 0.08 68),
    0 3px 8px oklch(0.55 0.12 75 / 0.35);
  text-shadow: 0 1px 0 oklch(0.98 0.10 90 / 0.4);
  transition: transform 160ms, filter 200ms;
  white-space: nowrap;
}
.lodge-social-btn:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}
.lodge-social-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: saturate(0.4);
}
/* State overlays */
.lodge-social-row.claimed .lodge-social-btn,
.lodge-social-row.cooldown .lodge-social-btn,
.lodge-social-row.pending .lodge-social-btn {
  background: oklch(0.14 0.014 80);
  color: var(--lodge-gold);
  border-color: var(--lodge-hairline-2);
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
.lodge-social-row.claimed {
  opacity: 0.75;
}
.lodge-social-row.claimed .lodge-social-icon {
  filter: grayscale(0.35);
}
.lodge-social-row.cooldown .lodge-social-btn::before {
  content: '⏳ ';
  margin-right: 2px;
}
.lodge-social-row.pending .lodge-social-btn::before {
  content: '⏲ ';
  margin-right: 2px;
}
.lodge-social-row.auto {
  cursor: default;
}
.lodge-social-row.auto .lodge-social-btn {
  background: oklch(0.14 0.014 80);
  color: var(--lodge-gold);
  border-color: var(--lodge-hairline-2);
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
.lodge-social-row.auto .lodge-social-btn::before {
  content: '⦿ ';
  margin-right: 2px;
  color: var(--lodge-gold-2);
}

.lodge-social-row.no-post {
  opacity: 0.55;
}
.lodge-social-row.no-post .lodge-social-btn {
  background: oklch(0.14 0.014 80);
  color: var(--lodge-ink-3);
  border-color: var(--lodge-hairline-2);
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
.lodge-social-row.no-post .lodge-social-btn::before {
  content: '○ ';
  margin-right: 2px;
  opacity: 0.7;
}

/* Tiny "latest post" hint line under X task desc */
.lodge-social-post {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--lodge-ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.lodge-social-post a {
  color: var(--lodge-gold);
  text-decoration: none;
  border-bottom: 1px dashed var(--lodge-hairline-2);
}
.lodge-social-post a:hover { color: var(--lodge-gold-2); }

/* XP total summary above the row list */
.lodge-social-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 4px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lodge-ink-3);
  gap: 8px;
  flex-wrap: wrap;
}
.lodge-social-summary b {
  color: var(--lodge-gold-2);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 359px) {
  .lodge-social-row { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 12px 6px; }
  .lodge-social-icon { width: 44px; height: 44px; font-size: 20px; }
  .lodge-social-name { font-size: 14px; }
  .lodge-social-desc { font-size: 11px; }
  .lodge-social-action { min-width: 88px; }
  .lodge-social-btn { padding: 6px 10px; font-size: 9px; letter-spacing: 0.14em; }
}

/* ══════════════════════════════════════════════════════════════════
   LODGE SUITS — Tiny ambient card-suit marks at the bottom of the
   lobby. A decorative full-stop that signals "casino" without noise.
   ══════════════════════════════════════════════════════════════════ */
.lodge-suits {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  margin: 48px 0 8px;
  padding: 16px 0;
  position: relative;
  color: var(--lodge-gold);
  opacity: 0.45;
}
.lodge-suits::before,
.lodge-suits::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--lodge-hairline) 50%,
    transparent 100%);
}
.lodge-suits::before { left: 0; }
.lodge-suits::after  { right: 0; }
.lodge-suits .lodge-icon { width: 14px; height: 14px; }
/* Hearts + diamonds in wax-red, spades + clubs in gold — same as
   traditional playing-card colour convention. Kept soft. */
.lodge-suits .lodge-icon:nth-child(2),
.lodge-suits .lodge-icon:nth-child(3) { color: oklch(0.60 0.18 25); opacity: 0.65; }

/* ══════════════════════════════════════════════════════════════════
   NARROW SCREENS — Telegram webview under 360px
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 359px) {
  #home-screen.lodge,
  #games-screen.lodge,
  #roulette-screen.lodge { padding: 14px 10px 28px; }
  /* Wheel: tighten board and chips to stay inside narrow viewports */
  .lodge-wheel .r-standard-board { grid-template-rows: repeat(3, 42px); gap: 1.5px; }
  .lodge-wheel .roulette-cell { font-size: 12px; }
  .lodge-wheel .roulette-cell.num-green { font-size: 16px; }
  .lodge-wheel .roulette-side-bets .roulette-cell {
    font-size: 9px; letter-spacing: 0.14em; padding: 8px 2px; min-height: 32px;
  }
  .lodge-wheel .roulette-cell.side-red,
  .lodge-wheel .roulette-cell.side-black { font-size: 10px; }
  .lodge-wheel .r-chip-selector { gap: 6px; }
  .lodge-wheel .r-chip { max-width: 46px; font-size: 13px; }
  .lodge-wheel .r-cell-chip { width: 22px; height: 22px; font-size: 9px; }
  .lodge-wheel .lodge-game-title-text { font-size: 19px; }
  .lodge-wheel .lodge-title-emblem { width: 22px; height: 22px; }
  .lodge-wheel .lodge-back,
  .lodge-wheel .lodge-info { width: 36px; height: 36px; }
  .lodge-wheel .r-action-btns .btn,
  .lodge-wheel .lodge-action { padding: 12px 8px; font-size: 10px; letter-spacing: 0.14em; }
  .lodge-courtesy { padding: 18px 18px 18px 20px; gap: 14px; }
  .lodge-courtesy-title { font-size: 20px; }
  .lodge-seal { width: 60px; height: 60px; font-size: 11px; }
  .lodge-service-row { grid-template-columns: 56px 1fr auto; gap: 12px; }
  .lodge-service-icon { width: 56px; height: 56px; }
  .lodge-service-icon .lodge-icon--game { width: 44px; height: 44px; }
  .lodge-service-name { font-size: 20px; }
  .lodge-service-desc { font-size: 11.5px; }
  .lodge .home-qa { font-size: 8px; letter-spacing: 0.12em; }
  .lodge .home-qa-icon { width: 20px; height: 20px; }
  .lodge-icon--nav { width: 20px; height: 20px; }
  .lodge-plaque { font-size: 10px; letter-spacing: 0.28em; gap: 10px; }
  .lodge-plaque--minor { font-size: 9px; letter-spacing: 0.24em; gap: 10px; }
  .lodge-plaque-orn { width: 56px; }
  .lodge-crest-hail { gap: 10px; }
  .lodge-icon--crest { width: 32px; height: 32px; }
  /* Games grid tightens up on tiny screens */
  .lodge-games-grid { gap: 8px; }
  .lodge-game-card { padding: 14px 8px 10px; min-height: 158px; }
  .lodge-game-icon { width: 54px; height: 54px; margin-bottom: 8px; }
  .lodge-game-icon .lodge-icon--game { width: 50px; height: 50px; }
  .lodge-game-name { font-size: 14.5px; }
  .lodge-game-desc { font-size: 10.5px; }
  .lodge-game-card--wide { padding: 12px; gap: 10px; min-height: 108px; }
  .lodge-game-card--wide .lodge-game-icon { width: 60px; height: 60px; }
  .lodge-game-card--wide .lodge-game-icon .lodge-icon--game { width: 54px; height: 54px; }
  .lodge-game-card--wide .lodge-game-name { font-size: 18px; }
}