/* =========================================================================
   MURLAN — High-Roller Luxury Edition
   "Royal Velvet & High-Roller Casino" design system
   ========================================================================= */

:root {
  --emerald: #0a2e1d;
  --emerald-deep: #061e13;
  --obsidian: #0f1115;
  --obsidian-2: #16191d;
  --burgundy: #2e0a12;
  --burgundy-deep: #1a050a;
  --gold: #f2c94c;
  --gold-bright: #ffe28a;
  --gold-dim: #b8912f;
  --champagne-1: #f3d075;
  --champagne-2: #c99b30;
  --mahogany: #3a1d10;
  --mahogany-light: #5c2f18;
  --cream: #f4ead1;
  --card-cream: #fdfbfa;
  --crimson: #b4232f;
  --amber: #e0a52e;
  --felt-shadow: rgba(0, 0, 0, 0.55);
  --pod-bg: #1a1d20;
  --glass-bg: rgba(26, 29, 32, 0.85);

  /* Realistic casino-table felt/rail palette — oval blue felt, a thick
     black padded leather bumper as the outer rail, and a thin glossy
     mahogany trim ring between the leather and the felt (matching a
     real high-roller table's build order: pad, then wood, then felt). */
  --felt-blue-light: #3f7fd6;
  --felt-blue: #1f4fa0;
  --felt-blue-deep: #091b40;
  --leather-black: #0a0a0c;
  --leather-black-light: #2c2c31;
  --mahogany-rail: #5c2015;
  --mahogany-rail-light: #a8502c;
  --mahogany-rail-dark: #2c0f0a;
  --card-back-navy-1: #1c3364;
  --card-back-navy-2: #0c1938;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-deep: 0 18px 40px rgba(0, 0, 0, 0.55);
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--obsidian);
  color: var(--cream);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* ---------------------------------------------------------------------
   Ambient gold dust particles
   --------------------------------------------------------------------- */
.dust-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.dust-layer::before,
.dust-layer::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(242,201,76,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(242,201,76,0.4), transparent 60%),
    radial-gradient(2px 2px at 55% 35%, rgba(242,201,76,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 80%, rgba(242,201,76,0.35), transparent 60%),
    radial-gradient(2px 2px at 90% 15%, rgba(242,201,76,0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 15% 90%, rgba(242,201,76,0.3), transparent 60%),
    radial-gradient(2px 2px at 65% 55%, rgba(242,201,76,0.4), transparent 60%);
  animation: dust-drift 22s linear infinite;
  opacity: 0.8;
}
.dust-layer::after { animation-duration: 34s; animation-direction: reverse; opacity: 0.5; }
@keyframes dust-drift {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(-6%) translateX(3%); }
}

/* ---------------------------------------------------------------------
   VIP casino bokeh — soft warm-lit background depth, sits behind
   everything else on both the lobby and the table screen.
   --------------------------------------------------------------------- */
/* The user's own warm wood-paneling + gold-bokeh render, used as the real
   room backdrop behind both the lobby and the table. A vignette gradient
   sits on top so the felt/content in the middle still reads as the lit
   focal point rather than competing with the photo. */
.bokeh-layer {
  position: absolute;
  inset: -2%;
  pointer-events: none;
  overflow: hidden;
  /* Negative, not 0: flex-item siblings (the lobby sidebar/main, table
     topbar, etc.) paint at stacking level 0 too, and with the old mostly-
     transparent CSS gradients here it never mattered which of them landed
     on top — now that this is an opaque photo, it must stay strictly
     behind everything else in the screen. */
  z-index: -1;
  background:
    /* flat dark wash over the whole photo, on top of the edge vignette,
       specifically to tone down the bright bokeh light spots so they read
       as soft ambient glow rather than glare */
    linear-gradient(rgba(6,5,4,0.5), rgba(6,5,4,0.5)),
    radial-gradient(ellipse 75% 65% at 50% 45%, transparent 40%, rgba(0,0,0,0.72) 100%),
    url("../assets/images/bg-wood-bokeh.jpg") center / cover no-repeat;
  filter: brightness(0.62) saturate(0.8);
  animation: bokeh-drift 26s ease-in-out infinite alternate;
}
@keyframes bokeh-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-2%, 2%) scale(1.05); }
}

/* ---------------------------------------------------------------------
   Screens
   --------------------------------------------------------------------- */
.screen {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Setup screen — lobby layout
   --------------------------------------------------------------------- */
#setup-screen.lobby {
  align-items: stretch;
  justify-content: flex-start;
  background: radial-gradient(ellipse at 15% 0%, rgba(242,201,76,0.05), transparent 45%), #07090b;
  overflow: hidden;
}

.lobby-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  background: linear-gradient(180deg, rgba(15,20,16,0.9), rgba(7,9,8,0.96));
  border-right: 1px solid rgba(242,201,76,0.12);
}
.sidebar-crest {
  font-size: 26px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 22px;
  text-shadow: 0 0 16px rgba(242,201,76,0.5);
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(244,234,209,0.55);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  border-left: 2px solid transparent;
}
.nav-item .nav-icon { font-size: 15px; width: 18px; text-align: center; }
.nav-item:hover { color: var(--cream); background: rgba(255,255,255,0.03); }
.nav-item.active {
  color: var(--gold-bright);
  background: rgba(242,201,76,0.08);
  border-left-color: var(--gold);
}
.lobby-mute-btn {
  margin: auto auto 0;
}
.sidebar-footer {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(244,234,209,0.3);
  text-align: center;
  padding-top: 14px;
}

.lobby-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 26px 28px 60px;
}

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 700;
  margin-bottom: 10px;
}

.lobby-top {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  margin-bottom: 20px;
}

.hero-banner {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 30%, rgba(242,201,76,0.12), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(46,10,18,0.7), transparent 60%),
    linear-gradient(160deg, #10140f, #0a0c0a 75%);
  border: 1px solid rgba(242,201,76,0.18);
  box-shadow: var(--shadow-deep);
  min-height: 260px;
  display: flex;
  align-items: center;
}
.hero-content { position: relative; z-index: 2; max-width: 420px; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--cream);
  font-weight: 700;
}
.hero-title .gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 45%, var(--gold-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-desc {
  color: rgba(244,234,209,0.6);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
  max-width: 360px;
}
.hero-art {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 220px;
  height: 200px;
  opacity: 0.9;
}
.hero-card {
  position: absolute;
  width: 92px;
  height: 128px;
  border-radius: 10px;
  background: linear-gradient(160deg, #fffdf6, #f1e6c9 60%, #e7d8a9);
  border: 1.5px solid var(--gold-dim);
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: #1a1a1a;
  font-family: var(--font-display);
}
.hero-card.c2 { color: var(--crimson); }
.hero-card.c1 { top: 10px; right: 70px; transform: rotate(-14deg); z-index: 1; }
.hero-card.c2 { top: 0; right: 20px; transform: rotate(2deg); z-index: 2; }
.hero-card.c3 { top: 26px; right: -20px; transform: rotate(16deg); z-index: 1; }

.table-summary-panel {
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  background: linear-gradient(180deg, rgba(18,22,18,0.85), rgba(8,10,9,0.92));
  border: 1px solid rgba(242,201,76,0.16);
  box-shadow: var(--shadow-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.panel-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244,234,209,0.55);
  font-weight: 700;
  margin-bottom: 18px;
}
.count-badge {
  background: rgba(242,201,76,0.12);
  color: var(--gold-bright);
  border: 1px solid rgba(242,201,76,0.3);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
}
.summary-icon { font-size: 30px; margin-bottom: 10px; }
.summary-line { color: var(--cream); font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.summary-hint { color: rgba(244,234,209,0.45); font-size: 11.5px; line-height: 1.4; margin: 0; }

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.config-tile {
  border-radius: 18px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(16,20,16,0.85), rgba(8,10,9,0.92));
  border: 1px solid rgba(242,201,76,0.14);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.config-tile:hover {
  border-color: rgba(242,201,76,0.45);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 0 0 1px rgba(242,201,76,0.15);
  transform: translateY(-2px);
}
.tile-icon { font-size: 24px; margin-bottom: 10px; }
.config-tile h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  color: var(--cream);
  font-weight: 700;
}
.tile-sub {
  margin: 0 0 14px;
  font-size: 11.5px;
  color: rgba(244,234,209,0.45);
  line-height: 1.4;
}

.chip-group { display: flex; gap: 8px; }
.chip-group button {
  flex: 1;
  padding: 9px 0;
  border-radius: 10px;
  border: 1px solid rgba(242,201,76,0.25);
  background: rgba(255,255,255,0.03);
  color: var(--cream);
  font-weight: 600;
  font-size: 13.5px;
  transition: all 0.15s ease;
}
.chip-group button:hover { border-color: rgba(242,201,76,0.6); }
.chip-group button.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  color: #241a02;
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(242,201,76,0.35);
}
.chip-group button.locked {
  opacity: 0.5;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.chip-group button.locked:hover { border-color: rgba(242,201,76,0.25); }
.soon-tag {
  font-size: 8.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-dim);
  background: rgba(242,201,76,0.12);
  border: 1px solid rgba(242,201,76,0.3);
  border-radius: 10px;
  padding: 1px 6px;
}

/* ---------------------------------------------------------------------
   Multiplayer / online section (lobby) — UI-only placeholders for now
   --------------------------------------------------------------------- */
.online-section { margin-bottom: 20px; }
.section-heading { margin-bottom: 14px; }
.section-heading h2 {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--cream);
  margin: 0 0 4px;
}
.section-heading p {
  color: rgba(244,234,209,0.45);
  font-size: 12.5px;
  margin: 0;
}
.online-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.online-tile {
  border-radius: 18px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(16,20,16,0.7), rgba(8,10,9,0.85));
  border: 1px solid rgba(242,201,76,0.1);
  text-align: left;
}
.online-tile h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--cream); font-weight: 700; }
.coming-soon-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(244,234,209,0.5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(242,201,76,0.18);
  border-radius: 20px;
  padding: 6px 14px;
}
.invite-code-box {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 8px;
  color: var(--gold-bright);
  background: rgba(242,201,76,0.08);
  border: 1px solid rgba(242,201,76,0.3);
  border-radius: 12px;
  padding: 14px;
  margin: 4px 0 14px;
}
.invite-link-row { display: flex; gap: 8px; }
.invite-link-row .lux-input { flex: 1; font-size: 12px; }

.lux-input {
  width: 100%;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid rgba(242,201,76,0.25);
  background: rgba(255,255,255,0.03);
  color: var(--cream);
  font-size: 13.5px;
  outline: none;
}
.lux-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,201,76,0.15); }

.promo-banner {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 32px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 90% 50%, rgba(242,201,76,0.1), transparent 55%),
    linear-gradient(160deg, #10140f, #0a0c0a 75%);
  border: 1px solid rgba(242,201,76,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.promo-content { max-width: 420px; }
.promo-content h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--cream);
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}
.promo-content p {
  color: rgba(244,234,209,0.55);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.promo-art {
  font-size: 72px;
  opacity: 0.85;
  filter: drop-shadow(0 0 24px rgba(242,201,76,0.35));
  flex-shrink: 0;
}

/* Pill buttons (lobby CTAs) */
.pill-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.pill-btn .arrow { transition: transform 0.15s ease; }
.pill-btn:hover .arrow { transform: translateX(3px); }
.pill-btn:active { transform: translateY(2px); }
.gold-pill {
  /* Dark forest-green fill with a double gold border and bold gold
     text — matches the Play/Pass/Sort button art exactly (sampled from
     those assets: #0c4135 fill, #f5d378 gold) so every CTA in the game
     reads as one consistent set, whether it's rendered from an image
     (fixed English labels) or drawn in CSS (labels that vary, like
     "Resume Table" / "Start Match" / "Done"). */
  color: var(--gold-bright);
  background: linear-gradient(180deg, #164f40 0%, #0c4135 55%, #0a362c 100%);
  border: 1.5px solid rgba(245,211,120,0.85);
  box-shadow:
    0 0 0 3px rgba(245,211,120,0.18) inset,
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 2px 2px rgba(0,0,0,0.3),
    0 8px 16px rgba(0,0,0,0.45),
    0 14px 24px rgba(0,0,0,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.gold-pill:hover { filter: brightness(1.18); }
.gold-pill:active { filter: brightness(0.9); }
.pill-btn.large { padding: 16px 30px; font-size: 15px; }

/* ---------------------------------------------------------------------
   Gold 3D buttons
   --------------------------------------------------------------------- */
.gold-btn {
  border: none;
  border-radius: 12px;
  padding: 13px 22px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #2a1e04;
  background: linear-gradient(135deg, var(--champagne-1) 0%, var(--champagne-2) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -3px 0 rgba(120,88,10,0.45) inset,
    0 8px 18px rgba(0,0,0,0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.gold-btn:hover { filter: brightness(1.08); }
.gold-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(120,88,10,0.45) inset,
    0 3px 8px rgba(0,0,0,0.4);
}
.gold-btn.large { width: 100%; padding: 16px; font-size: 16px; margin-top: 6px; }
.gold-btn:disabled {
  filter: grayscale(0.6) brightness(0.6);
  cursor: not-allowed;
  transform: none;
}
.gold-btn.primary { background: linear-gradient(135deg, var(--champagne-1) 0%, var(--champagne-2) 100%); }

/* ---------------------------------------------------------------------
   Table screen
   --------------------------------------------------------------------- */
/* `.screen` centers its children (align-items: center) by default, which
   left every child here sizing itself via shrink-to-fit against nothing
   but its own max-width instead of the real viewport — the actual reason
   the hand fan and topbar weren't respecting the true screen width on
   narrower viewports. Stretching makes each child span the real width, so
   their own width:100%/max-width/margin:auto rules can center correctly
   within it. */
#table-screen { flex-direction: column; align-items: stretch; }

.table-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  /* Top-aligned, not centered: fitTableToContainer() in main.js sizes
     .table-rail-outer to prioritize width, which can make it taller than
     this box allows (by a bounded budget) — top-aligning means any
     overflow spills only downward, into the hand area below, never
     upward into the HUD bar. */
  align-items: flex-start;
  justify-content: center;
  padding: 4px 10px 0;
  min-height: 0;
  overflow: visible;
}

/* The table is now the user's own reference render (table.png): a real
   oval-table image with the wood rail, black leather bumper, and gold
   filigree racetrack baked in. table-rail-outer is sized to the image's
   OWN aspect ratio (955:488) so it never stretches or letterboxes — the
   <img> then exactly fills it. table-rail-inner positions the live game
   content (seats, trick cards) using a measured inset so it lands inside
   the image's blue felt area rather than on the painted wood/leather. */
.table-rail-outer {
  /* CSS fallback size (width-driven, correct aspect ratio) for the
     instant before JS measures .table-wrap and sets an explicit pixel
     width/height — see fitTableToContainer() in main.js. That JS pass is
     what lets the table grow to fill BOTH available width and height
     (whichever is the tighter constraint) instead of being capped by
     just one axis, matching the dense, edge-to-edge framing of the
     reference table. */
  position: relative;
  width: min(100%, 1220px);
  aspect-ratio: 955 / 488;
  margin: 0 auto;
  /* A real cast shadow beneath the whole table (following the oval's own
     alpha shape, not a rectangular box) — this alone does a lot to sell
     "a physical object sitting on a surface" rather than "a flat sticker
     floating on the background", which a top-down, evenly-lit render
     otherwise reads as. */
  filter: drop-shadow(0 22px 20px rgba(0,0,0,0.55)) drop-shadow(0 46px 46px rgba(0,0,0,0.4));
}
.table-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Directional light/shade wash over the rail + felt: a soft highlight
   along the back/top edge (as if lit from above and slightly behind)
   fading through neutral at the middle, into a deeper shadow along the
   front/bottom edge closest to the viewer — the same lighting logic a
   real angled table photo has, layered on top of the flat top-down
   render via blend mode rather than needing a new camera-angle asset. */
.table-rail-outer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.26) 0%,
    rgba(255,255,255,0.08) 12%,
    transparent 24%,
    transparent 68%,
    rgba(0,0,0,0.3) 90%,
    rgba(0,0,0,0.48) 100%);
  mix-blend-mode: overlay;
}

.table-rail-inner {
  position: absolute;
  z-index: 2;
  /* measured against the current table.png (the green-felt render): the
     felt sits ~8% in from the left/right edges, ~12.5% in from the top,
     ~15% in from the bottom (the rail reads very slightly thicker along
     the bottom edge in the source art). */
  inset: 12.5% 8% 15% 8%;
}

.table-felt {
  position: relative;
  width: 100%;
  height: 100%;
}

/* The current table.png (green felt) is already a clean, evenly-lit
   render straight from the source art, so — unlike the older blue table
   this project used to ship — it doesn't need a color-correction layer
   on top. (A previous revision tinted the old felt toward a more muted
   navy; that tint was tuned for blue and would just muddy this green
   felt, so it's gone rather than carried forward.) */

/* Double gold pinstripe racetrack set inside the felt, echoing a real
   casino table's card/chip line — two concentric ovals rather than one. */
/* table.png already bakes in its own gold racetrack/filigree border, so
   this CSS-drawn one is retired in favor of the image's. */
.filigree-ring {
  display: none;
}

/* Kept small and faint on purpose — this is a watermark, not a focal
   point. The center of the table is reserved for the active trick so
   played cards always read as the clear visual focus. */
.table-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.6vw, 18px);
  letter-spacing: 9px;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(120deg,
    rgba(242,201,76,0.1) 0%,
    rgba(242,201,76,0.1) 35%,
    rgba(255,232,166,0.32) 50%,
    rgba(242,201,76,0.1) 65%,
    rgba(242,201,76,0.1) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 2px rgba(0,0,0,0.5);
  animation: logo-shine 7s ease-in-out infinite;
}
@keyframes logo-shine {
  0%, 20% { background-position: 100% 0; }
  60%, 100% { background-position: -60% 0; }
}

/* Brass card shoe, gold discard/pot plaque, and the dealer's chip rack —
   fixed felt fixtures near the top rail, matching the reference table's
   dealer setup. Pure image assets cropped from the user's own reference
   render. Positions were re-measured directly against that reference
   image (as percentages of the felt box) rather than guessed, since the
   shoe/plaque previously sat noticeably off from where the reference
   places them. */
.dealer-shoe {
  position: absolute;
  top: -6%;
  right: 9%;
  width: 18%;
  max-width: 150px;
  aspect-ratio: 159 / 93;
  background: url("../assets/images/dealer-shoe.png") center / contain no-repeat;
  transform: rotate(-4deg);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
  z-index: 2;
  pointer-events: none;
}
.pot-marker {
  position: absolute;
  top: 9%;
  left: 26%;
  width: 7.5%;
  max-width: 65px;
  aspect-ratio: 58 / 13;
  background: url("../assets/images/pot-marker.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  z-index: 2;
  pointer-events: none;
}
/* ---------------------------------------------------------------------
   Seats
   --------------------------------------------------------------------- */
#seats-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
}

.seat-pos-bottom { left: 50%; top: 90%; }
.seat-pos-top    { left: 50%; top: 12%; }
.seat-pos-left   { left: 12%; top: 50%; }
.seat-pos-right  { left: 88%; top: 50%; }
.seat-pos-topleft  { left: 22%; top: 16%; }
.seat-pos-topright { left: 78%; top: 16%; }

.seat {
  padding: 6px;
  border-radius: 16px;
}
.avatar-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #24272b, var(--pod-bg));
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  font-size: 26px;
}
/* The gold double-ring frame is now the matching image asset rather than
   a CSS border + box-shadow hairline — it sits just outside the pod so
   the dark avatar circle reads as set INTO the ring rather than under
   a flat painted border. */
.ring-base {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: url("../assets/images/ring-base.png") center / contain no-repeat;
  pointer-events: none;
  /* Negative, not positive: a positioned descendant with z-index:0/auto
     (and plain in-flow content like .avatar-glyph) still paints above a
     positive-z-index sibling only once ITS OWN stacking context is
     established — simplest correct fix here is to keep both ring layers
     behind everything else in .avatar-ring by using negative z-index,
     rather than having to bump every other child's z-index to match. */
  z-index: -1;
}
/* Active-turn glow: the second (very slightly larger/warmer) ring asset,
   layered just outside the base ring and faded in only while it's this
   seat's turn — a soft pulse instead of the old CSS box-shadow bloom. */
.ring-glow {
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  background: url("../assets/images/ring-glow.png") center / contain no-repeat;
  pointer-events: none;
  z-index: -2;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(242,201,76,0.7));
  transition: opacity 0.2s ease;
}
.seat.active-turn .ring-glow {
  opacity: 1;
  animation: pod-pulse 1.6s ease-in-out infinite;
}
@keyframes pod-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.seat.finished .avatar-ring { opacity: 0.45; filter: grayscale(0.5); }

.timer-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0deg, rgba(255,255,255,0.08) 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  transition: background 0.25s linear;
}

.seat-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: linear-gradient(135deg, var(--champagne-1), var(--champagne-2));
  border: 1.5px solid var(--obsidian);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 10px rgba(242,201,76,0.5);
}
.seat-badge.pec { background: linear-gradient(135deg, #d9c9a8, #8d6a3f); box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
/* The Murlani (round winner) badge uses the matching flat crown-medallion
   asset (burgundy + gold, same family as the table/button/ring art)
   instead of the earlier photoreal trophy render, which no longer fit
   the flatter style the rest of the table moved to. Sized up from the
   base 24px badge since the crown reads better a bit bigger, and given
   its own plain background/border since the image bakes in its own gold
   ring. */
.seat-badge.murlani-trophy {
  width: 34px;
  height: 34px;
  top: -16px;
  right: -12px;
  background: url("../assets/images/badge-crown.png") center / contain no-repeat;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Ornamental gold-filigree countdown badge, shown only beside the
   currently-active seat (opposite corner from .seat-badge) while that
   seat's turn timer is running. Scalloped rim via a repeating conic
   gradient, dark navy face, neon "digital" blue seconds readout. */
.seat-timer-widget {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-conic-gradient(from 0deg, rgba(242,201,76,0.95) 0deg 8deg, rgba(178,140,50,0.9) 8deg 16deg),
    radial-gradient(circle, #0a1530 55%, #050a1a 100%);
  border: 2px solid var(--gold-dim);
  box-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 10px rgba(242,201,76,0.35);
  z-index: 5;
  transition: opacity 0.15s ease;
}
.seat-timer-widget.hidden { display: none; }
.seat-timer-widget::before {
  /* inner navy face sits above the filigree ring background, leaving
     only a thin scalloped gold edge visible */
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #0f1c3d, #050a1a 75%);
}
.timer-widget-value {
  position: relative;
  font-family: var(--font-display), monospace;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: #4fd8ff;
  text-shadow: 0 0 6px rgba(79,216,255,0.9), 0 0 12px rgba(79,216,255,0.5);
}

/* Gold-trimmed pedestal the avatar pod rests on. */
.avatar-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 46px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  opacity: 0.7;
}

/* Styled as a small gold gauge/tally readout (a faint repeating tick
   pattern behind the number) rather than a plain chat-style pill badge. */
.card-count-badge {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 20px;
  background:
    repeating-linear-gradient(90deg,
      rgba(242,201,76,0.35) 0px, rgba(242,201,76,0.35) 1px,
      transparent 1px, transparent 3px),
    rgba(0,0,0,0.6);
  border: 1px solid rgba(242,201,76,0.45);
  color: var(--gold-bright);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.seat-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  max-width: 90px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.seat-bots-hand {
  display: flex;
  margin-top: 2px;
}
.seat-bots-hand .mini-card {
  position: relative;
  width: 14px;
  height: 20px;
  margin-left: -8px;
  border-radius: 3px;
  /* carries the same near-black/gold card-back identity as the real
     cardback.png, just simplified to a tiny gold center fleck at this
     scale, where the image's own detail would just blur */
  background: linear-gradient(160deg, #262626, #0d0d0e 70%, #000);
  border: 1px solid var(--gold-dim);
}
.seat-bots-hand .mini-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(242,201,76,0.75);
  box-shadow: 0 0 3px rgba(242,201,76,0.6);
}
.seat-bots-hand .mini-card:first-child { margin-left: 0; }

/* ---------------------------------------------------------------------
   Trick area (cards currently in play)
   --------------------------------------------------------------------- */
#trick-area {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
#trick-cards {
  display: flex;
  gap: -6px;
}
#trick-cards .card {
  margin-left: -14px;
}
#trick-cards .card:first-child { margin-left: 0; }
/* The real landing card stays invisible while a flight clone (see
   .card-flight-clone below) travels from the player's hand or seat to
   this spot, then a quick settle bounce plays as the clone hands off. */
#trick-cards .card.trick-card-landing { opacity: 0; }
#trick-cards .card.trick-card-settle {
  animation: trick-card-settle 0.22s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes trick-card-settle {
  0%   { transform: scale(1.14) rotate(-2deg); }
  60%  { transform: scale(0.97) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* Ghost card that actually performs the hand/seat -> table flight.
   Fixed-positioned in viewport coordinates (JS sets left/top/width/height
   per-flight) so it can travel across the hand area, table rail and felt
   without being clipped by any of their containers. */
.card-flight-clone {
  position: fixed;
  z-index: 500;
  margin: 0;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5));
}

.round-banner {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.4vw, 34px);
  color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(242,201,76,0.7), 0 3px 6px rgba(0,0,0,0.6);
  /* Same dark forest-green + double gold border as the button art, so
     the round banner reads as part of the same set rather than the old
     near-black chip it used to be. */
  background: linear-gradient(180deg, rgba(22,79,64,0.85) 0%, rgba(10,54,44,0.85) 100%);
  padding: 10px 28px;
  border-radius: 40px;
  border: 1px solid rgba(245,211,120,0.6);
  box-shadow: 0 0 0 3px rgba(245,211,120,0.14) inset;
  animation: banner-pop 1.6s ease forwards;
  pointer-events: none;
}
@keyframes banner-pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  25% { transform: translate(-50%,-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------------
   Playing cards
   --------------------------------------------------------------------- */
.card {
  --w: 66px;
  --h: 94px;
  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: 8px;
  /* plain classic ivory card face — no ornate gold filigree ring, matching
     the clean casino-card look of the reference sheet, but with enough
     shadow/highlight layering to read as a real physical card resting on
     the felt (a visible cast shadow onto whatever's behind/below it, plus
     a glossy top-edge highlight) rather than a flat cutout shape. */
  background: linear-gradient(175deg, #fffdf6 0%, #f8f1dd 45%, #ece0bf 100%);
  border: 1px solid rgba(30,20,10,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -10px 14px rgba(0,0,0,0.06) inset,
    0 3px 3px rgba(0,0,0,0.35),
    0 8px 16px rgba(0,0,0,0.45),
    0 14px 26px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 6px;
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
  overflow: hidden;
}
.card .rank-top, .card .rank-bottom {
  font-size: 14px;
  line-height: 1;
  z-index: 1;
}
.card .rank-bottom { align-self: flex-end; transform: rotate(180deg); }
.card .suit-center {
  position: absolute;
  inset: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  z-index: 1;
  line-height: 1;
}
.card.red { color: var(--crimson); }
.card.black { color: #1a1a1a; }
.card.joker { background: linear-gradient(170deg, #fbf6e8, #f3ecd8 55%, #ece1c4); color: #1a1a1a; }
.card.joker .suit-center { font-size: 14px; text-align: center; font-family: var(--font-display); letter-spacing: 1px; line-height: 1.3; }

/* The user's own ornate card-back render (cardback.png) is a wide/landscape
   crop, not the card's portrait shape, so it's shown uncropped via
   background-size:contain with a fallback fill matched to the image's own
   near-black background — the letterboxed top/bottom margin blends into
   that same black rather than reading as empty space. */
.card.face-down {
  background-color: #0d0d0e;
  background-image: url("../assets/images/cardback.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 88% auto;
  border-color: var(--gold-dim);
}
.card.face-down::after { content: none; }
.card.face-down .crest-mark { display: none; }

.card.playable { cursor: pointer; }
/* Hover feedback only applies while a card is NOT selected — once picked,
   it holds its lifted pose steady (no further hover reaction) until
   clicked again to deselect it.
   .js-hover (not CSS :hover) is what drives this — see
   tableRenderer.js's _setupHandHoverTracking for why: fanned cards
   overlap, and native :hover on a card that then lifts and moves out
   from under a stationary cursor creates a self-sustaining flicker loop
   right where a player is trying to click. .js-hover is computed once
   per mousemove against each card's RESTING geometry, which the lift
   itself can never change, so it can't feed back on itself that way. */
.card.playable.js-hover:not(.selected) {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 3px 3px rgba(0,0,0,0.35),
    0 10px 20px rgba(0,0,0,0.5),
    0 0 0 2px rgba(242,201,76,0.5);
}
.card.selected {
  transform: translateY(-20px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 3px 3px rgba(0,0,0,0.35),
    0 16px 28px rgba(0,0,0,0.55),
    0 0 0 2px var(--gold),
    0 0 16px rgba(242,201,76,0.6);
}
.card .shine {
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.card.playable.js-hover:not(.selected) .shine { opacity: 1; animation: shine-sweep 0.6s ease; }
@keyframes shine-sweep {
  from { left: -60%; }
  to   { left: 130%; }
}

/* ---------------------------------------------------------------------
   Hand area
   --------------------------------------------------------------------- */
#hand-area {
  padding: 6px 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  position: relative;
}
#hand-info {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.turn-indicator {
  /* A real pill, not bare text sitting on the felt — matches the
     gold-pill/round-banner family so it reads as a UI element you're
     meant to notice, and fades/rises in rather than just appearing. */
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(22,79,64,0.92) 0%, rgba(10,54,44,0.92) 100%);
  border: 1.5px solid rgba(245,211,120,0.45);
  box-shadow: 0 2px 2px rgba(0,0,0,0.3), 0 6px 14px rgba(0,0,0,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.turn-indicator.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.turn-indicator.my-turn {
  /* Inverted gold-on-gold treatment, used only when it's the human's own
     turn to act — the color flip against every other (dark-pill) state
     is what makes "it's your move" unmistakable at a glance instead of
     something you have to read to notice. */
  font-size: 13px;
  color: #241a08;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-dim) 100%);
  border-color: rgba(255,255,255,0.6);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow:
    0 0 0 3px rgba(245,211,120,0.22),
    0 2px 2px rgba(0,0,0,0.3),
    0 6px 18px rgba(242,201,76,0.6);
  animation: turn-pulse 1.7s ease-in-out infinite;
}
@keyframes turn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(245,211,120,0.22), 0 2px 2px rgba(0,0,0,0.3), 0 6px 18px rgba(242,201,76,0.6);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(245,211,120,0.32), 0 2px 2px rgba(0,0,0,0.3), 0 8px 26px rgba(242,201,76,0.85);
  }
}
.hand-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 116px;
  padding: 24px 12px 2px;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
}
/* Escape hatch for the extreme case (a full 27-card hand on a very narrow
   phone) where even the smallest legible card can't fit everyone with a
   readable sliver — the fan scrolls horizontally instead of squeezing
   cards past readability or letting them clip off-screen. */
.hand-fan.scrolls {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.hand-fan .card {
  /* Overlap is computed and applied per-card by tableRenderer.js (both the
     margin and the --w/--h size shrink as the hand grows toward 27 cards),
     so every hand — 2, 3, or 4 players — fits inside this fixed-width
     container without clipping off the edge of the screen. Each card also
     gets a small --fan-rotate custom property (also set by JS) so the
     hand reads as a real fanned spread rather than a flat overlapped row;
     the rotation pivots around a point well below the card so the tilt
     reads as a natural arc, and it's dialed back toward 0 as the hand
     grows toward 27 cards to keep the largest hands flat and legible.
     transform is layered on the rotation via the shared custom property
     rather than overwritten, so hover/selected keep the card's fan angle
     instead of snapping upright. */
  transform: rotate(var(--fan-rotate, 0deg));
  transform-origin: 50% 460px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, margin 0.15s ease;
}
.hand-fan .card:first-child { margin-left: 0 !important; }

/* A hovered or selected card must repaint ABOVE its overlapping neighbors,
   not just lift visually — otherwise most of it stays hidden under the
   next card in the stack, which is what made cards hard to pick out. */
.hand-fan .card.js-hover,
.hand-fan .card.selected {
  z-index: 90;
}
.hand-fan .card.js-hover:not(.selected) { transform: rotate(var(--fan-rotate, 0deg)) translateY(-24px); }
.hand-fan .card.selected { transform: rotate(var(--fan-rotate, 0deg)) translateY(-24px); }

#action-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 6px 12px 16px;
  z-index: 5;
}
/* Play/Pass/Sort now use the matching baked-label button art (dark
   forest-green pill, double gold border, bold gold text) instead of a
   CSS-drawn gradient pill. The button text stays in the DOM (screen
   readers, and a fallback if the image fails) but is hidden visually —
   text-indent pushes it off the box rather than color:transparent, so
   there's no ghost glyph if a browser paints the fallback font briefly. */
#action-bar #play-btn,
#action-bar #pass-btn,
#action-bar #sort-btn {
  min-width: 0;
  justify-content: center;
  text-indent: -9999px;
  overflow: hidden;
  padding: 0;
  height: 50px;
  width: auto;
  aspect-ratio: 420 / 130;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  border: none;
}
#action-bar #play-btn { background-image: url("../assets/images/btn-play.png"); }
#action-bar #pass-btn { background-image: url("../assets/images/btn-pass.png"); }
#action-bar #sort-btn { background-image: url("../assets/images/btn-sort.png"); height: 44px; }
#action-bar #play-btn:hover,
#action-bar #pass-btn:hover,
#action-bar #sort-btn:hover { filter: brightness(1.12); }
#action-bar #play-btn:active,
#action-bar #pass-btn:active,
#action-bar #sort-btn:active { filter: brightness(0.94); }

/* ---------------------------------------------------------------------
   Toast + overlays
   --------------------------------------------------------------------- */
.toast {
  position: absolute;
  left: 50%;
  bottom: 190px;
  transform: translateX(-50%);
  background: rgba(20,10,10,0.85);
  border: 1px solid rgba(242,201,76,0.4);
  color: var(--gold-bright);
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13px;
  z-index: 20;
  animation: toast-in 0.2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px);} to { opacity: 1; transform: translate(-50%, 0);} }

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(4,4,4,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(3px);
}
.overlay-panel {
  width: min(92vw, 420px);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(242,201,76,0.4);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  text-align: center;
  box-shadow: var(--shadow-deep);
}
/* Round/Match-end summary gets its own richer frame — a mahogany outer
   border, a thin gold-leaf line just inside it, and a dark blue velvet
   interior — instead of the plain glass panel every other overlay uses. */
.overlay-panel.round-end-panel {
  /* A gradient "border" with the panel's own rounded corners: the first
     layer paints inside the border (padding-box), the second paints
     under the border itself (border-box) — border-image can't do this
     without squaring off the corners, so this layered-background trick
     is used instead. */
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,255,255,0.06), transparent 60%) padding-box,
    linear-gradient(180deg, #101a33 0%, #0a1226 60%, #070d1c 100%) padding-box,
    linear-gradient(155deg, var(--mahogany-rail-light), var(--mahogany-rail) 45%, var(--mahogany-rail-dark) 100%) border-box;
  border: 10px solid transparent;
  box-shadow:
    0 0 0 2px rgba(242,201,76,0.55),
    0 0 0 3px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(242,201,76,0.25),
    var(--shadow-deep);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* The velvet nap: a very faint directional grain over the dark blue fill. */
.overlay-panel.round-end-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: repeating-linear-gradient(115deg,
    rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
.overlay-panel.round-end-panel { position: relative; }
.overlay-panel h2 {
  position: relative;
  font-family: var(--font-display);
  color: var(--gold-bright);
  letter-spacing: 2px;
  margin: 0 0 4px;
  padding-bottom: 14px;
}
/* Small gold filigree flourish: a thin line with a rotated diamond
   accent at its center, echoing the reference sheet's ornate dividers. */
.overlay-panel h2::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,201,76,0.6), transparent);
}
.overlay-panel h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--champagne-1), var(--champagne-2));
  box-shadow: 0 0 6px rgba(242,201,76,0.5);
}
.overlay-panel .sub { color: rgba(244,234,209,0.6); font-size: 12.5px; margin-bottom: 18px; }
.standing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
}
.standing-row .place { color: var(--gold); font-weight: 700; width: 40px; flex-shrink: 0; text-align: left; }
.standing-row .name { flex: 1; text-align: left; }
.standing-row .tag { font-size: 11px; color: rgba(244,234,209,0.55); }
.exchange-hint { font-size: 13px; color: var(--gold-bright); margin: 10px 0 16px; }

/* 1-card exchange visual: Murlani and Pec avatars connected by a glowing
   gold transfer line, with small card glyphs sliding both directions. */
.transfer-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 16px 0 6px;
}
.transfer-avatar { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.transfer-avatar .transfer-glyph {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: radial-gradient(circle at 35% 30%, #24272b, var(--pod-bg));
  border: 2px solid var(--gold-dim);
  box-shadow: 0 0 14px rgba(242,201,76,0.25);
}
.transfer-avatar.murlani .transfer-glyph { border-color: var(--gold); box-shadow: 0 0 18px rgba(242,201,76,0.5); }
.transfer-avatar .transfer-label {
  font-size: 11px; color: var(--cream); font-weight: 600;
  max-width: 84px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.transfer-avatar .transfer-tag { font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold-dim); }
.transfer-avatar.murlani .transfer-tag { color: var(--gold-bright); }
.transfer-line {
  position: relative;
  flex: 1;
  max-width: 84px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright), var(--gold-dim));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(242,201,76,0.4);
}
.transfer-line .transfer-card {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 13px;
  transform: translate(-50%, -50%);
  animation: transfer-slide-right 1.8s ease-in-out infinite;
}
.transfer-line .transfer-card.back {
  top: calc(50% - 12px);
  animation: transfer-slide-left 1.8s ease-in-out infinite;
  animation-delay: 0.3s;
  font-size: 11px;
  opacity: 0.85;
}
@keyframes transfer-slide-right {
  0% { left: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes transfer-slide-left {
  0% { left: 100%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 0%; opacity: 0; }
}

/* ---------------------------------------------------------------------
   FX layer: bomb blasts + confetti
   --------------------------------------------------------------------- */
#fx-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), var(--gold) 60%, transparent 75%);
  will-change: transform, opacity;
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  will-change: transform, opacity;
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 4px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -3px); }
  80% { transform: translate(4px, 3px); }
}
.shake { animation: screen-shake 0.35s ease; }

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(242,201,76,0.55);
  background: radial-gradient(circle at 35% 30%, #24272b, rgba(10,11,13,0.92));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.5);
  color: var(--gold-bright);
  font-size: 16px;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.icon-btn:hover { border-color: rgba(242,201,76,0.85); box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 12px rgba(242,201,76,0.4), 0 4px 10px rgba(0,0,0,0.5); }
.mute-btn.muted { opacity: 0.45; }

/* Table screen top HUD: round/timer pills (left), a prominent floating
   gold MENU pill dead-center, and quick Sound/Rules/Exit icons (right). */
.table-topbar {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  max-width: 900px;
  margin: 6px auto 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%) padding-box,
    linear-gradient(180deg, var(--leather-black-light) 0%, var(--leather-black) 55%, #050506 100%) padding-box,
    linear-gradient(180deg, var(--gold-dim), rgba(120,92,30,0.6) 50%, var(--gold-dim) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 8px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.match-info,
.timer-pill {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(244,234,209,0.55);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(242,201,76,0.18);
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 700;
  white-space: nowrap;
}
.timer-pill { color: var(--gold-bright); border-color: rgba(242,201,76,0.3); }

/* The prominent, floating front-and-center menu control. */
.menu-pill-btn {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #2a1e04;
  background: linear-gradient(135deg, var(--champagne-1) 0%, var(--champagne-2) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 22px rgba(0,0,0,0.5), 0 0 0 1px rgba(242,201,76,0.35);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.menu-pill-btn:hover { filter: brightness(1.08); }
.menu-pill-btn:active { transform: translateY(2px); }
.menu-pill-btn .menu-icon { font-size: 14px; }

/* Table screen menu overlay content */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.gold-outline-pill {
  color: var(--gold-bright);
  background: rgba(242,201,76,0.06);
  border: 1.5px solid rgba(242,201,76,0.4);
}
.gold-outline-pill:hover { background: rgba(242,201,76,0.12); border-color: rgba(242,201,76,0.7); }
.danger-pill {
  color: #ff9aa2;
  background: rgba(180,35,47,0.08);
  border: 1.5px solid rgba(180,35,47,0.45);
}
.danger-pill:hover { background: rgba(180,35,47,0.18); border-color: rgba(180,35,47,0.75); }
.pill-btn.full { width: 100%; justify-content: center; }
.pill-btn:disabled {
  filter: grayscale(0.6) brightness(0.6);
  cursor: not-allowed;
  transform: none !important;
}

/* ---------------------------------------------------------------------
   Rotate-to-landscape guard
   --------------------------------------------------------------------- */
/* A fanned fourteen-card hand needs real width to read — there's no
   portrait phone layout worth having, so instead of squeezing the table
   into a tall, narrow column, a phone held upright gets asked to turn
   sideways. Hidden by default; the media query below is the only thing
   that ever shows it, and only while #table-screen (its parent) is the
   active screen, so the lobby is never blocked by it. */
.rotate-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 32px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(242,201,76,0.07), transparent 55%),
    linear-gradient(180deg, var(--obsidian), #050607 80%);
}
.rotate-icon {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.rotate-phone {
  display: inline-block;
  font-size: 46px;
  animation: rotate-phone-spin 1.8s ease-in-out infinite;
}
.rotate-arrow {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 22px;
  color: var(--gold);
  opacity: 0.85;
}
@keyframes rotate-phone-spin {
  0%, 15%   { transform: rotate(0deg); }
  45%, 65%  { transform: rotate(-90deg); }
  100%      { transform: rotate(-90deg); }
}
.rotate-title {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.5px;
  color: var(--gold-bright);
  margin: 0;
}
.rotate-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(244,234,209,0.65);
  max-width: 320px;
  margin: 0;
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 820px) {
  #table-screen .rotate-overlay { display: flex; }
  /* Belt and suspenders: with the overlay covering everything this is
     mostly unnecessary, but it also stops the felt/hand from doing any
     layout work (JS width measurements, animations) while it's turned
     away, and guarantees nothing underneath can be reached by touch. */
  #table-screen > *:not(.rotate-overlay) { visibility: hidden; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Lobby: sidebar collapses to a slim horizontal top bar, hero/summary
     stack, and the decorative fanned cards hide (no room to breathe).
     The lobby has no landscape requirement — only the table does — so
     this stays keyed on width alone and works in phone portrait too. */
  #setup-screen.lobby { flex-direction: column; }
  .lobby-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 12px 14px;
    border-right: none;
    border-bottom: 1px solid rgba(242,201,76,0.12);
  }
  .sidebar-crest { margin: 0 12px 0 0; font-size: 20px; }
  .sidebar-nav { flex-direction: row; flex: 1; overflow-x: auto; }
  .nav-item { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav-item.active { border-left-color: transparent; border-bottom-color: var(--gold); }
  .sidebar-footer { display: none; }
  .lobby-main { padding: 18px 14px 40px; }
  .lobby-top { grid-template-columns: 1fr; }
  .hero-banner { padding: 26px 22px; min-height: unset; }
  .hero-art { display: none; }
  .hero-content { max-width: 100%; }
  .promo-banner { flex-direction: column; text-align: center; padding: 26px 22px; }
  .promo-content { max-width: 100%; }
  .lobby-mute-btn { margin: 0 0 0 8px; }
}

/* Phone held sideways to actually play: short viewport height is the
   real signal (not width — a landscape phone is WIDE), scoped to
   touchscreens so a merely-short desktop window doesn't get squeezed by
   rules meant for a 375-430px-tall phone screen. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .card { --w: 50px; --h: 72px; }
  .card .rank-top, .card .rank-bottom { font-size: 11px; }
  .card .suit-center { font-size: 19px; }
  .avatar-ring { width: 44px; height: 44px; font-size: 18px; }
  /* Hand-fan card sizing/overlap is computed in JS from the container's
     real (already-short) height/width, so no static override is needed
     here. */
  #trick-cards .card { margin-left: -10px; }
  .gold-btn { padding: 11px 16px; font-size: 13px; }

  /* Table HUD: trim to the essentials at phone-landscape heights. */
  .table-topbar { gap: 6px; padding: 4px 8px; margin: 4px auto 0; max-width: none; }
  .timer-pill { display: none; }
  .menu-pill-btn { padding: 7px 12px; font-size: 11px; letter-spacing: 1px; }
  .icon-btn { width: 28px; height: 28px; font-size: 13px; }
  .match-info { font-size: 10px; padding: 4px 9px; }

  /* A short landscape phone screen is starved for vertical room far more
     than horizontal, so the table itself — the part actually worth
     looking at — was losing most of the height budget to generously
     padded hand/action chrome sized for a roomy desktop window. None of
     this changes hand-fan's own card-overlap math (still computed live
     in JS from the container's real width), only how much dead vertical
     space surrounds it. */
  #hand-area { padding: 2px 10px 2px; }
  #hand-info { height: 20px; }
  .turn-indicator { padding: 3px 12px; font-size: 10px; }
  .turn-indicator.my-turn { font-size: 11px; }
  .hand-fan { min-height: 78px; padding: 12px 10px 2px; }
  #action-bar { padding: 3px 12px 8px; gap: 8px; }
  /* Play/Pass/Sort are image buttons now (see #action-bar rules above) —
     sized by height + aspect-ratio, not padding/font-size. */
  #action-bar #play-btn,
  #action-bar #pass-btn { height: 34px; }
  #action-bar #sort-btn { height: 30px; }

  .round-banner {
    font-size: 15px;
    padding: 6px 16px;
    white-space: nowrap;
  }
}