/* ---------- Table Themes ----------
   One unified selector: each theme is a complete, self-contained look —
   background, border, shape and ornaments together. The first 5 share a
   common light "Classic" frame (the default .felt::before below); the rest
   are full signature designs that set their own ::before/::after and don't
   inherit it (a class-qualified selector always beats the bare .felt::before
   below on specificity, so no !important or load-order tricks are needed
   for that override). */

.felt {
  position: relative;
}

/* Classic frame — the shared baseline for the 5 palette themes: a thin
   inset gold accent line for a "framed" feel. Signature themes below
   override this selector with a class-qualified one, which always wins. */
.felt::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(230, 178, 60, 0.35);
  border-radius: calc(var(--radius) - 3px);
  pointer-events: none;
}

/* Four corner ornaments, hidden by default — only a few signature themes
   use them. A real DOM element per corner (not ::before/::after, which cap
   out at two per element) so all four can be styled independently. */
.table-corner {
  display: none;
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 5;
}
.tc-tl { top: 8px; left: 8px; }
.tc-tr { top: 8px; right: 8px; }
.tc-bl { bottom: 8px; left: 8px; }
.tc-br { bottom: 8px; right: 8px; }

/* ==================================================================
   Palette themes — Classic frame, distinct felt colors
   ================================================================== */

/* ---------- the Classic table ----------
   The five palette themes share one table: rounded corners, a padded rail
   (box-shadow rings outside the border, so the felt keeps its full width and
   nothing inside moves), light falling from above with a vignette toward the
   edges, and a faint emblem in the middle of the felt. Each theme supplies only
   its cloth (background), its rim colour (--rim) and its rail colour (--rail).

   The rings sit outside the element; .table-view's padding (1rem desktop,
   ~0.6rem phones) is what they draw into, which is why the rail narrows on
   phones. */
body.theme-casino .felt,
body.theme-marble .felt,
body.theme-red_casino .felt,
body.theme-ocean_glow .felt,
body.theme-sunset_mirage .felt {
  --table-r: 30px;
  --rail-w: 9px;
  isolation: isolate;          /* lets the emblem below sit under the cards */
  border: 2px solid var(--rim) !important;
  border-radius: var(--table-r) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 46px 90px -46px rgba(255, 255, 255, 0.11),
    inset 0 0 140px rgba(0, 0, 0, 0.55),
    0 0 0 var(--rail-w) var(--rail),
    0 0 0 calc(var(--rail-w) + 1px) color-mix(in srgb, var(--rim) 40%, transparent),
    0 30px 60px -20px rgba(0, 0, 0, 0.75) !important;
}
body.theme-casino .felt::before,
body.theme-marble .felt::before,
body.theme-red_casino .felt::before,
body.theme-ocean_glow .felt::before,
body.theme-sunset_mirage .felt::before {
  inset: 8px;
  border-color: color-mix(in srgb, var(--rim) 30%, transparent);
  border-radius: calc(var(--table-r) - 8px);
}
/* The emblem: a ring and a spade, drawn as geometry, barely there. */
body.theme-casino .felt::after,
body.theme-marble .felt::after,
body.theme-red_casino .felt::after,
body.theme-ocean_glow .felt::after,
body.theme-sunset_mirage .felt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='white' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='60' r='49' fill='none' stroke='white' stroke-width='0.8'/%3E%3Cpath transform='translate%2828.8 24%29 scale%282.6%29' fill='white' d='M12 2.5c-2.6 3.6-7.5 6.3-7.5 10.6a3.9 3.9 0 0 0 6.6 2.8V18l-1.6 3.5h5L13 18v-2.1a3.9 3.9 0 0 0 6.6-2.8C19.5 8.8 14.6 6.1 12 2.5z'/%3E%3Cpath fill='white' d='M15 60l4.5-6.5L24 60l-4.5 6.5z'/%3E%3Cpath fill='white' d='M96 60l4.5-6.5L105 60l-4.5 6.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.055;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 720px) {
  body.theme-casino .felt,
  body.theme-marble .felt,
  body.theme-red_casino .felt,
  body.theme-ocean_glow .felt,
  body.theme-sunset_mirage .felt { --table-r: 22px; --rail-w: 5px; }
  body.theme-casino .felt::after,
  body.theme-marble .felt::after,
  body.theme-red_casino .felt::after,
  body.theme-ocean_glow .felt::after,
  body.theme-sunset_mirage .felt::after { width: 150px; height: 150px; }
}

/* 1. Casino Felt (default) */
body.theme-casino .felt {
  --rim: var(--gold);
  --rail: #2a1b11;
  background: radial-gradient(120% 120% at 50% 0%, #15803d 0%, #064e3b 80%) !important;
}
body.theme-casino .opponents .opp-avatar { border-color: rgba(230, 178, 60, 0.3) !important; }
body.theme-casino .s4-seat { background: #022c22 !important; border-color: rgba(230, 178, 60, 0.3) !important; }

/* 2. Marble Luxury */
body.theme-marble .felt {
  --rim: var(--gold);
  --rail: #1a1a1e;
  background: radial-gradient(120% 120% at 50% 0%, #2a2b2f 0%, #121316 80%) !important;
}
body.theme-marble .opponents .opp-avatar { border-color: rgba(230, 178, 60, 0.2) !important; }
body.theme-marble .s4-seat { background: #18191c !important; border-color: rgba(230, 178, 60, 0.2) !important; }

/* 3. Red Casino */
body.theme-red_casino .felt {
  --rim: var(--gold);
  --rail: #2b130e;
  background: radial-gradient(120% 120% at 50% 0%, #b91c1c 0%, #450a0a 80%) !important;
}
body.theme-red_casino .opponents .opp-avatar { border-color: rgba(230, 178, 60, 0.3) !important; }
body.theme-red_casino .s4-seat { background: #2d0505 !important; border-color: rgba(230, 178, 60, 0.3) !important; }

/* 4. Ocean Glow */
body.theme-ocean_glow .felt {
  --rim: #7dd3fc;
  --rail: #0a2226;
  background:
    radial-gradient(120% 120% at 50% 0%, #0f766e 0%, #134e4a 45%, #052b2b 100%) !important;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(103,232,249,0.16), transparent 24%),
    radial-gradient(circle at 80% 20%, rgba(34,211,238,0.14), transparent 20%),
    linear-gradient(135deg, #0f766e 0%, #134e4a 45%, #052b2b 100%) !important;
}
body.theme-ocean_glow .opponents .opp-avatar { border-color: rgba(125, 211, 252, 0.35) !important; }
body.theme-ocean_glow .s4-seat { background: #07313a !important; border-color: rgba(125, 211, 252, 0.35) !important; }

/* 5. Sunset Mirage */
body.theme-sunset_mirage .felt {
  --rim: #fbbf24;
  --rail: #29120a;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,237,213,0.18), transparent 20%),
    radial-gradient(circle at 80% 20%, rgba(251,146,60,0.18), transparent 22%),
    linear-gradient(135deg, #7c2d12 0%, #9a2c2c 45%, #431407 100%) !important;
}
body.theme-sunset_mirage .opponents .opp-avatar { border-color: rgba(251,191,36,0.35) !important; }
body.theme-sunset_mirage .s4-seat { background: #2e1209 !important; border-color: rgba(251,191,36,0.35) !important; }

/* ==================================================================
   Signature themes — each fully self-contained: own background,
   own border/shape, own ornaments. No color-theme layering.
   ================================================================== */

/* 6. Poker Table — a padded wood-tone rail around big, friendly rounded
   corners (a poker table's bumper, not a literal ellipse — a true oval
   risks clipping opponents/cards near the curve on a squarer mobile felt). */
body.theme-poker .felt {
  background: radial-gradient(120% 120% at 50% 0%, #146334 0%, #08331b 80%) !important;
  border: 8px solid #4a2f1c !important;
  border-radius: 56px !important;
  box-shadow:
    inset 0 0 0 4px #2a1a10,
    inset 0 0 60px -20px rgba(0, 0, 0, 0.6),
    0 10px 30px rgba(0,0,0,0.5) !important;
}
body.theme-poker .felt::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(230, 178, 60, 0.4);
  border-radius: 42px;
  pointer-events: none;
}
body.theme-poker .opponents .opp-avatar { border-color: rgba(230, 178, 60, 0.3) !important; }
body.theme-poker .s4-seat { background: #08331b !important; border-color: rgba(230, 178, 60, 0.3) !important; }

/* 7. Royal — deep velvet, sharp gold double border, a crown plaque
   breaking the top edge, and four L-bracket corners. */
body.theme-royal .felt {
  background: radial-gradient(120% 120% at 50% 0%, #5b1030 0%, #2a0616 75%) !important;
  border: 3px solid #e6b23c !important;
  box-shadow:
    inset 0 0 0 1px rgba(122, 90, 28, 0.6),
    inset 0 0 70px rgba(0,0,0,0.5),
    0 0 24px rgba(230, 178, 60, 0.22) !important;
}
body.theme-royal .felt::before {
  content: "♛";
  position: absolute;
  top: -13px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  font-size: 18px;
  line-height: 1;
  color: #e6b23c;
  background: var(--bg);
  padding: 0 8px;
  z-index: 6;
}
body.theme-royal .table-corner { display: block; }
body.theme-royal .tc-tl { border-top: 3px solid #e6b23c; border-left: 3px solid #e6b23c; border-radius: 8px 0 0 0; }
body.theme-royal .tc-tr { border-top: 3px solid #e6b23c; border-right: 3px solid #e6b23c; border-radius: 0 8px 0 0; }
body.theme-royal .tc-bl { border-bottom: 3px solid #e6b23c; border-left: 3px solid #e6b23c; border-radius: 0 0 0 8px; }
body.theme-royal .tc-br { border-bottom: 3px solid #e6b23c; border-right: 3px solid #e6b23c; border-radius: 0 0 8px 0; }
body.theme-royal .opponents .opp-avatar { border-color: rgba(230, 178, 60, 0.35) !important; }
body.theme-royal .s4-seat { background: #38091d !important; border-color: rgba(230, 178, 60, 0.35) !important; }

/* 8. Hacker — near-black terminal glow, angular cyan border, a faint
   circuit grid overlay, and glowing HUD-bracket corners. */
body.theme-hacker .felt {
  background: radial-gradient(120% 120% at 50% 0%, #06201c 0%, #020a09 80%) !important;
  border: 1.5px solid #0af0d8 !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 40px rgba(10, 240, 216, 0.12),
    0 0 18px rgba(10, 240, 216, 0.25) !important;
}
body.theme-hacker .felt::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(10, 240, 216, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 240, 216, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  border-radius: inherit;
  pointer-events: none;
}
body.theme-hacker .table-corner { display: block; }
body.theme-hacker .tc-tl { border-top: 2px solid #0af0d8; border-left: 2px solid #0af0d8; }
body.theme-hacker .tc-tr { border-top: 2px solid #0af0d8; border-right: 2px solid #0af0d8; }
body.theme-hacker .tc-bl { border-bottom: 2px solid #0af0d8; border-left: 2px solid #0af0d8; }
body.theme-hacker .tc-br { border-bottom: 2px solid #0af0d8; border-right: 2px solid #0af0d8; }
body.theme-hacker .opponents .opp-avatar { border-color: rgba(10, 240, 216, 0.35) !important; }
body.theme-hacker .s4-seat { background: #04120f !important; border-color: rgba(10, 240, 216, 0.35) !important; }

/* 9. Horror — a torn-fabric edge via clip-path (gentle 1-2% amplitude —
   anything more risks clipping opponents/cards near the edge), a padding
   buffer since clip-path genuinely cuts content, and two bleeding cracks. */
body.theme-horror .felt {
  background: radial-gradient(120% 120% at 50% 0%, #1a0505 0%, #050101 80%) !important;
  clip-path: polygon(
    1% 2%, 15% 0%, 30% 1.5%, 50% 0%, 70% 1.5%, 85% 0%, 99% 2%,
    100% 20%, 98.5% 40%, 100% 60%, 98.5% 80%, 100% 98%,
    85% 100%, 70% 98.5%, 50% 100%, 30% 98.5%, 15% 100%, 1% 98%,
    0% 80%, 1.5% 60%, 0% 40%, 1.5% 20%
  ) !important;
  border: 2px solid #3a0b0b !important;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(122, 16, 16, 0.25) !important;
  padding-top: calc(1.25rem + 10px) !important;
  padding-left: calc(1.25rem + 8px) !important;
  padding-right: calc(1.25rem + 8px) !important;
  padding-bottom: calc(2rem + 10px) !important;
}
body.theme-horror .felt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  width: 2px;
  height: 34px;
  background: linear-gradient(#7a1010, transparent);
  pointer-events: none;
}
body.theme-horror .felt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 68%;
  width: 2px;
  height: 48px;
  background: linear-gradient(#7a1010, transparent);
  pointer-events: none;
}
body.theme-horror .opponents .opp-avatar { border-color: rgba(122, 16, 16, 0.5) !important; }
body.theme-horror .s4-seat { background: #0f0202 !important; border-color: rgba(122, 16, 16, 0.5) !important; }

/* 10. Pirate Treasure — weathered wood-plank rail, a rope-stitched inset,
   a skull-and-crossbones plaque, deep sea-chest palette. */
body.theme-pirate .felt {
  background: radial-gradient(120% 120% at 50% 0%, #0b3d3a 0%, #041f1d 80%) !important;
  border: 8px solid #5c3a1e !important;
  box-shadow:
    inset 0 0 0 4px #2e2010,
    inset 0 0 60px -20px rgba(0, 0, 0, 0.7),
    0 10px 30px rgba(0,0,0,0.5) !important;
}
body.theme-pirate .felt::before {
  content: "☠";
  position: absolute;
  top: -14px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  font-size: 18px;
  line-height: 1;
  color: #d8c08a;
  background: var(--bg);
  padding: 0 8px;
  z-index: 6;
}
body.theme-pirate .felt::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(216, 192, 138, 0.35);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
body.theme-pirate .opponents .opp-avatar { border-color: rgba(216, 192, 138, 0.35) !important; }
body.theme-pirate .s4-seat { background: #042220 !important; border-color: rgba(216, 192, 138, 0.35) !important; }

/* 11. Space Galaxy — deep-space gradient, a soft scattered-star overlay,
   glowing nebula border. */
body.theme-space .felt {
  background: radial-gradient(120% 140% at 50% 0%, #1b0b3a 0%, #0a0420 55%, #030109 100%) !important;
  border: 2px solid #8b5cf6 !important;
  box-shadow:
    inset 0 0 70px rgba(139, 92, 246, 0.16),
    0 0 26px rgba(139, 92, 246, 0.32) !important;
}
body.theme-space .felt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.8) 0, rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(circle at 32% 65%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0.6) 1px, transparent 1.5px),
    radial-gradient(circle at 55% 30%, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.7) 1px, transparent 1.5px),
    radial-gradient(circle at 72% 75%, rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.7) 1px, transparent 1.5px),
    radial-gradient(circle at 20% 88%, rgba(103,232,249,0.5) 0, rgba(103,232,249,0.5) 1.5px, transparent 2px),
    radial-gradient(circle at 90% 55%, rgba(216,180,254,0.5) 0, rgba(216,180,254,0.5) 1.5px, transparent 2px);
  border-radius: inherit;
  pointer-events: none;
}
body.theme-space .opponents .opp-avatar { border-color: rgba(139, 92, 246, 0.4) !important; }
body.theme-space .s4-seat { background: #0e0625 !important; border-color: rgba(139, 92, 246, 0.4) !important; }

/* 12. Egyptian Pharaoh — sandstone-and-gold border on a desert-night sky,
   an ankh plaque, and squared gold corner brackets (sharp, not rounded —
   distinct from Royal's). */
body.theme-egyptian .felt {
  background: radial-gradient(120% 120% at 50% 0%, #2e2308 0%, #120d02 80%) !important;
  border: 3px solid #c9a227 !important;
  box-shadow:
    inset 0 0 0 1px rgba(90, 66, 12, 0.6),
    inset 0 0 70px rgba(0,0,0,0.6),
    0 0 22px rgba(201, 162, 39, 0.2) !important;
}
body.theme-egyptian .felt::before {
  content: "☥";
  position: absolute;
  top: -14px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  font-size: 18px;
  line-height: 1;
  color: #c9a227;
  background: var(--bg);
  padding: 0 8px;
  z-index: 6;
}
body.theme-egyptian .table-corner { display: block; }
body.theme-egyptian .tc-tl { border-top: 3px solid #c9a227; border-left: 3px solid #c9a227; }
body.theme-egyptian .tc-tr { border-top: 3px solid #c9a227; border-right: 3px solid #c9a227; }
body.theme-egyptian .tc-bl { border-bottom: 3px solid #c9a227; border-left: 3px solid #c9a227; }
body.theme-egyptian .tc-br { border-bottom: 3px solid #c9a227; border-right: 3px solid #c9a227; }
body.theme-egyptian .opponents .opp-avatar { border-color: rgba(201, 162, 39, 0.35) !important; }
body.theme-egyptian .s4-seat { background: #1a1304 !important; border-color: rgba(201, 162, 39, 0.35) !important; }

/* 13. Wild West Saloon — weathered leather-and-wood border, a leather-
   stitch dashed inset, a sheriff-star plaque, warm dusty palette. */
body.theme-wildwest .felt {
  background: radial-gradient(120% 120% at 50% 0%, #6b4226 0%, #2b1608 80%) !important;
  border: 6px solid #4a2f1c !important;
  box-shadow:
    inset 0 0 0 2px #2a1a10,
    inset 0 0 60px -15px rgba(0, 0, 0, 0.6),
    0 10px 30px rgba(0,0,0,0.5) !important;
}
body.theme-wildwest .felt::before {
  content: "★";
  position: absolute;
  top: -13px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 1;
  color: #e8c987;
  background: var(--bg);
  padding: 0 8px;
  z-index: 6;
}
body.theme-wildwest .felt::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(232, 201, 135, 0.3);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}
body.theme-wildwest .opponents .opp-avatar { border-color: rgba(232, 201, 135, 0.3) !important; }
body.theme-wildwest .s4-seat { background: #2b1608 !important; border-color: rgba(232, 201, 135, 0.3) !important; }

/* 14. Enchanted Forest — mystical deep green-to-violet gradient, a
   glowing vine-green border, scattered firefly glow dots, and a small
   sparkle plaque. */
body.theme-forest .felt {
  background: radial-gradient(120% 120% at 50% 0%, #0f3d1f 0%, #041a10 60%, #1a0b2e 100%) !important;
  border: 3px solid #22c55e !important;
  box-shadow:
    inset 0 0 70px rgba(34, 197, 94, 0.14),
    0 0 22px rgba(34, 197, 94, 0.22) !important;
}
body.theme-forest .felt::before {
  content: "✧";
  position: absolute;
  top: -13px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  font-size: 18px;
  line-height: 1;
  color: #86efac;
  background: var(--bg);
  padding: 0 8px;
  z-index: 6;
}
body.theme-forest .felt::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(190,242,100,0.9) 0, rgba(190,242,100,0.9) 1.5px, transparent 3px),
    radial-gradient(circle at 40% 70%, rgba(134,239,172,0.8) 0, rgba(134,239,172,0.8) 1.5px, transparent 3px),
    radial-gradient(circle at 68% 40%, rgba(190,242,100,0.7) 0, rgba(190,242,100,0.7) 1.5px, transparent 3px),
    radial-gradient(circle at 85% 75%, rgba(134,239,172,0.8) 0, rgba(134,239,172,0.8) 1.5px, transparent 3px);
  border-radius: inherit;
  pointer-events: none;
}
body.theme-forest .opponents .opp-avatar { border-color: rgba(34, 197, 94, 0.35) !important; }
body.theme-forest .s4-seat { background: #06210f !important; border-color: rgba(34, 197, 94, 0.35) !important; }

/* ---------- Responsive: scale ornaments/borders down, never eat into the
   already-tight mobile felt padding more than necessary ---------- */
@media (max-width: 720px) {
  .felt::before { inset: 4px; }

  .table-corner { width: 18px; height: 18px; }
  .tc-tl, .tc-tr { top: 5px; }
  .tc-bl, .tc-br { bottom: 5px; }
  .tc-tl, .tc-bl { left: 5px; }
  .tc-tr, .tc-br { right: 5px; }

  body.theme-poker .felt { border-width: 5px !important; border-radius: 30px !important; }
  body.theme-poker .felt::before { inset: 7px; border-radius: 22px; }

  body.theme-royal .felt { border-width: 2px !important; }
  body.theme-royal .felt::before { font-size: 14px; top: -10px; }
  body.theme-royal .tc-tl, body.theme-royal .tc-tr,
  body.theme-royal .tc-bl, body.theme-royal .tc-br { border-width: 2px !important; }

  body.theme-hacker .felt { border-width: 1px !important; }
  body.theme-hacker .felt::before { background-size: 16px 16px; }

  body.theme-horror .felt {
    padding-top: calc(1rem + 6px) !important;
    padding-left: calc(0.75rem + 5px) !important;
    padding-right: calc(0.75rem + 5px) !important;
    padding-bottom: calc(1.5rem + 6px) !important;
  }
  body.theme-horror .felt::before { height: 22px; }
  body.theme-horror .felt::after { height: 30px; }

  body.theme-pirate .felt { border-width: 5px !important; }
  body.theme-pirate .felt::before { font-size: 14px; top: -10px; }
  body.theme-pirate .felt::after { inset: 7px; }

  body.theme-egyptian .felt { border-width: 2px !important; }
  body.theme-egyptian .felt::before { font-size: 14px; top: -10px; }
  body.theme-egyptian .tc-tl, body.theme-egyptian .tc-tr,
  body.theme-egyptian .tc-bl, body.theme-egyptian .tc-br { border-width: 2px !important; }

  body.theme-wildwest .felt { border-width: 4px !important; }
  body.theme-wildwest .felt::before { font-size: 13px; top: -10px; }
  body.theme-wildwest .felt::after { inset: 6px; }

  body.theme-forest .felt { border-width: 2px !important; }
  body.theme-forest .felt::before { font-size: 14px; top: -10px; }
}

/* The theme picker itself is a section of the Settings sheet — see settings.css. */

/* ==================================================================
   Chrome bloom per theme
   ==================================================================
   Each theme contributes ONE value: the hue washed behind the page by
   body.room-page::after (see base.css). Everything else about the chrome —
   panels, borders, body text, muted text — stays graphite on every theme, so
   contrast is audited once rather than fourteen times.

   Hues are hand-picked to sit next to each felt, not derived from it. Deriving
   fails exactly where it matters: Hacker wants acid green over near-black and
   Horror wants desaturated blood, and neither falls out of "darken the felt".

   Alpha is the tuning knob. 0.05-0.10 for dark/subtle felts, up to ~0.14 for
   the vivid ones. If the bloom's edge is visible, it is too high. */

body.theme-casino        { --bloom: rgba( 63, 158, 100, 0.13); }  /* green felt   */
body.theme-marble        { --bloom: rgba(170, 176, 186, 0.07); }  /* cool stone   */
body.theme-red_casino    { --bloom: rgba(200,  62,  62, 0.12); }  /* deep red     */
body.theme-ocean_glow    { --bloom: rgba( 56, 170, 200, 0.14); }  /* teal / cyan  */
body.theme-sunset_mirage { --bloom: rgba(214, 106,  54, 0.13); }  /* burnt orange */
body.theme-poker         { --bloom: rgba( 46, 140,  84, 0.12); }  /* club green   */
body.theme-royal         { --bloom: rgba(158,  56, 104, 0.12); }  /* wine         */
body.theme-hacker        { --bloom: rgba( 10, 240, 216, 0.10); }  /* terminal     */
body.theme-horror        { --bloom: rgba(150,  30,  35, 0.13); }  /* blood        */
body.theme-pirate        { --bloom: rgba( 92, 138, 120, 0.11); }  /* sea / brass  */
body.theme-space         { --bloom: rgba(120,  80, 200, 0.14); }  /* indigo       */
body.theme-egyptian      { --bloom: rgba(201, 162,  39, 0.11); }  /* sand / gold  */
body.theme-wildwest      { --bloom: rgba(160, 102,  58, 0.12); }  /* leather      */
body.theme-forest        { --bloom: rgba( 52, 150,  86, 0.12); }  /* pine         */

/* ==================================================================
   15-17. Ornamented signature themes
   ==================================================================
   These three carry real ornament rather than a border colour and a glyph.

   **Every motif is inline SVG geometry, never a character in `content:`.**
   That is the lesson docs/todos.md §15 paid for on the card deck: a glyph is
   drawn with whatever font the *viewer* happens to have, so a deck that wrote
   its suits as text showed correct pips on the dev machine and tofu boxes
   everywhere else. Themes 12 and 13 above still take that risk with their
   U+2625 and U+2605 plaques — survivable for a star, but a dragon or a paisley
   has no dependable glyph at all, and the emoji fallbacks arrive as flat colour
   pictures that cannot be tinted gold.

   **The edge bands live in `.felt`'s own background, not in a pseudo-element.**
   The obvious build is an absolutely-positioned `::after` holding the four
   strips, and it is wrong: `.felt` is `position: relative; z-index: auto`, so
   it opens no stacking context, and a positioned pseudo-element paints *above*
   the in-flow cards no matter how low its z-index — while `z-index: -1` escapes
   the felt altogether and disappears behind it (the trap §13 hit with the
   bloom). Measured on a 375px phone the felt's padding falls to 13.6px and two
   hand cards sat inside the band, so this was a real overlap and not a
   hypothetical one. Background layers always paint beneath content, which makes
   the whole question go away.

   Ornament is sized for where it lives. Corners render at 26px (18px on
   mobile), so each is a bold silhouette that survives being small; the detail
   that needs room — the dragons, the arcade, the sunburst — goes on the wide
   top plaque, which has it. */

/* 15. Imperial Dragon — Chinese lacquer red under gold. Two dragons chase the
   flaming pearl across the top plaque (二龍戲珠), a meander fret runs the four
   edges, and ruyi cloud-scrolls turn the corners. */
body.theme-imperial .felt {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M2 8V3h9v4H6V5' fill='none' stroke='%23e8c063' stroke-width='1.2' opacity='0.55'/%3E%3C/svg%3E") top center repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M2 2v5h9V3H6v2' fill='none' stroke='%23e8c063' stroke-width='1.2' opacity='0.55'/%3E%3C/svg%3E") bottom center repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='24'%3E%3Cpath d='M8 2H3v9h4V6H5' fill='none' stroke='%23e8c063' stroke-width='1.2' opacity='0.55'/%3E%3C/svg%3E") left center repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='24'%3E%3Cpath d='M2 2h5v9H3V6h2' fill='none' stroke='%23e8c063' stroke-width='1.2' opacity='0.55'/%3E%3C/svg%3E") right center repeat-y,
    radial-gradient(120% 120% at 50% 0%, #8c1c1a 0%, #4a0c0d 55%, #250405 100%) !important;
  border: 4px solid #e8c063 !important;
  box-shadow:
    inset 0 0 0 1px rgba(120, 20, 20, 0.9),
    inset 0 0 80px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(232, 192, 99, 0.22) !important;
}
body.theme-imperial .felt::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  width: 168px;
  height: 26px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='26' viewBox='0 0 168 26'%3E%3Cg fill='none' stroke='%23e8c063' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M14 17c8 5 15-1 22-4s13 3 20-1'/%3E%3Cpath d='M14 17c-3-4 0-9 5-9 4 0 5 4 3 6'/%3E%3Cpath d='M17 9l-4-4M21 8l1-5'/%3E%3Cpath d='M154 17c-8 5-15-1-22-4s-13 3-20-1'/%3E%3Cpath d='M154 17c3-4 0-9-5-9-4 0-5 4-3 6'/%3E%3Cpath d='M151 9l4-4M147 8l-1-5'/%3E%3C/g%3E%3Cg fill='%23e8c063'%3E%3Ccircle cx='84' cy='12' r='5'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3Ccircle cx='149' cy='12' r='1.6'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e8c063' stroke-width='1.2' opacity='0.75'%3E%3Cpath d='M84 4l2 3-2-1-2 1zM84 20l2-3-2 1-2-1zM76 12l3-2-1 2 1 2zM92 12l-3-2 1 2-1 2z'/%3E%3C/g%3E%3C/svg%3E") center/168px 26px no-repeat;
  z-index: 6;
}
body.theme-imperial .table-corner {
  display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23e8c063' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 9c0-4 3-7 7-7'/%3E%3Cpath d='M6 13c0-4 3-7 7-7 3 0 5 2 5 5 0 2-2 4-4 4-1.6 0-3-1.4-3-3 0-1.2 1-2 2-2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
body.theme-imperial .tc-tr { transform: scaleX(-1); }
body.theme-imperial .tc-bl { transform: scaleY(-1); }
body.theme-imperial .tc-br { transform: scale(-1); }
body.theme-imperial .opponents .opp-avatar { border-color: rgba(232, 192, 99, 0.45) !important; }
body.theme-imperial .s4-seat { background: #3a0809 !important; border-color: rgba(232, 192, 99, 0.35) !important; }

/* 16. Maharaja Durbar — a Rajput court in deep magenta and gold. A Mughal
   scalloped arcade runs the edges, paisley (buta) turns the corners, and a
   lotus throne under an arch crowns the top. */
body.theme-maharaja .felt {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpath d='M0 9a5.5 5.5 0 0 1 11 0a5.5 5.5 0 0 1 11 0' fill='none' stroke='%23f0c85a' stroke-width='1.2' opacity='0.5'/%3E%3C/svg%3E") top center repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpath d='M0 2a5.5 5.5 0 0 0 11 0a5.5 5.5 0 0 0 11 0' fill='none' stroke='%23f0c85a' stroke-width='1.2' opacity='0.5'/%3E%3C/svg%3E") bottom center repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='22'%3E%3Cpath d='M9 0a5.5 5.5 0 0 1 0 11a5.5 5.5 0 0 1 0 11' fill='none' stroke='%23f0c85a' stroke-width='1.2' opacity='0.5'/%3E%3C/svg%3E") left center repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='22'%3E%3Cpath d='M2 0a5.5 5.5 0 0 0 0 11a5.5 5.5 0 0 0 0 11' fill='none' stroke='%23f0c85a' stroke-width='1.2' opacity='0.5'/%3E%3C/svg%3E") right center repeat-y,
    radial-gradient(120% 120% at 50% 0%, #7a1246 0%, #45072c 55%, #1e0316 100%) !important;
  border: 4px solid #f0c85a !important;
  box-shadow:
    inset 0 0 0 1px rgba(120, 30, 80, 0.9),
    inset 0 0 80px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(240, 200, 90, 0.22) !important;
}
body.theme-maharaja .felt::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  width: 150px;
  height: 28px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='28' viewBox='0 0 150 28'%3E%3Cg fill='none' stroke='%23f0c85a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M75 4c-6 0-10 4-10 9v9h20v-9c0-5-4-9-10-9z'/%3E%3Cpath d='M65 22c-5-1-8-4-9-8 4-1 7 0 9 3M85 22c5-1 8-4 9-8-4-1-7 0-9 3'/%3E%3Cpath d='M56 22h-8M102 22h8'/%3E%3Cpath d='M44 22a6 6 0 0 1 12 0M94 22a6 6 0 0 1 12 0'/%3E%3Cpath d='M32 22a6 6 0 0 1 12 0M106 22a6 6 0 0 1 12 0'/%3E%3Cpath d='M20 22a6 6 0 0 1 12 0M118 22a6 6 0 0 1 12 0'/%3E%3C/g%3E%3Cg fill='%23f0c85a'%3E%3Ccircle cx='75' cy='9' r='2.4'/%3E%3Ccircle cx='14' cy='22' r='2'/%3E%3Ccircle cx='136' cy='22' r='2'/%3E%3C/g%3E%3C/svg%3E") center/150px 28px no-repeat;
  z-index: 6;
}
body.theme-maharaja .table-corner {
  display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23f0c85a' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 24C4 12 10 3 18 3c4 0 5 4 3 7-2 3-7 3-8-1'/%3E%3Cpath d='M9 20c0-6 3-11 7-12'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
body.theme-maharaja .tc-tl { transform: scaleY(-1); }
body.theme-maharaja .tc-tr { transform: scale(-1); }
body.theme-maharaja .tc-br { transform: scaleX(-1); }
body.theme-maharaja .opponents .opp-avatar { border-color: rgba(240, 200, 90, 0.45) !important; }
body.theme-maharaja .s4-seat { background: #35061f !important; border-color: rgba(240, 200, 90, 0.35) !important; }

/* 17. Gatsby Deco — black lacquer and champagne gold. Nothing curved: a
   chevron band on the edges, stepped sunburst fans in the corners, a
   symmetrical fan plaque. Deco earns its place beside the other two by being
   the one ornament style built entirely from straight lines, so it stays crisp
   at the sizes where dragons and paisleys go soft. */
body.theme-deco .felt {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M0 8l4.5-6L9 8l4.5-6L18 8' fill='none' stroke='%23d9bb72' stroke-width='1.1' opacity='0.5'/%3E%3C/svg%3E") top center repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M0 1l4.5 6L9 1l4.5 6L18 1' fill='none' stroke='%23d9bb72' stroke-width='1.1' opacity='0.5'/%3E%3C/svg%3E") bottom center repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='18'%3E%3Cpath d='M8 0l-6 4.5L8 9l-6 4.5L8 18' fill='none' stroke='%23d9bb72' stroke-width='1.1' opacity='0.5'/%3E%3C/svg%3E") left center repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='18'%3E%3Cpath d='M1 0l6 4.5L1 9l6 4.5L1 18' fill='none' stroke='%23d9bb72' stroke-width='1.1' opacity='0.5'/%3E%3C/svg%3E") right center repeat-y,
    radial-gradient(120% 120% at 50% 0%, #23242a 0%, #121317 55%, #08090b 100%) !important;
  border: 3px solid #d9bb72 !important;
  box-shadow:
    inset 0 0 0 1px rgba(217, 187, 114, 0.25),
    inset 0 0 90px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(217, 187, 114, 0.18) !important;
}
body.theme-deco .felt::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  width: 132px;
  height: 26px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='26' viewBox='0 0 132 26'%3E%3Cg fill='none' stroke='%23d9bb72' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M66 21V7M66 21l-9-11M66 21l9-11M66 21l-16-8M66 21l16-8'/%3E%3Cpath d='M44 21h-8v-3M88 21h8v-3'/%3E%3Cpath d='M30 21h-6v-5M102 21h6v-5'/%3E%3Cpath d='M18 21h-5v-7M114 21h5v-7'/%3E%3C/g%3E%3Cg fill='%23d9bb72'%3E%3Cpath d='M66 3l3 4-3 4-3-4z'/%3E%3C/g%3E%3C/svg%3E") center/132px 26px no-repeat;
  z-index: 6;
}
body.theme-deco .table-corner {
  display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23d9bb72' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 23V3h20'/%3E%3Cpath d='M3 15h9V3M3 9h3V3'/%3E%3Cpath d='M9 23V13h10M15 23v-4h4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
body.theme-deco .tc-tr { transform: scaleX(-1); }
body.theme-deco .tc-bl { transform: scaleY(-1); }
body.theme-deco .tc-br { transform: scale(-1); }
body.theme-deco .opponents .opp-avatar { border-color: rgba(217, 187, 114, 0.4) !important; }
body.theme-deco .s4-seat { background: #17181d !important; border-color: rgba(217, 187, 114, 0.3) !important; }

body.theme-imperial      { --bloom: rgba(196,  40,  40, 0.13); }  /* lacquer red  */
body.theme-maharaja      { --bloom: rgba(190,  50, 130, 0.12); }  /* rani pink    */
body.theme-deco          { --bloom: rgba(217, 187, 114, 0.09); }  /* champagne    */