/*
 * card-themes.css
 * Playing card appearance: base .pc card element, suit colors, card back,
 * and all 5 selectable themes (classic, colorful, minimal, neon, gold).
 *
 * To add a new card theme:
 *   1. Add a .theme-yourname block here (face and .back variants)
 *   2. Add a button in the HTML settings modal with data-theme="yourname"
 *   3. applyCardTheme() in game/table.js handles the rest automatically.
 *
 * Reuse in another card game: this entire file works unchanged.
 * The .pc element structure is created by makeCardEl() in core/cards.js.
 */

/* ════════════════════════════════════════
   CARDS
════════════════════════════════════════ */
.pc {
  width: var(--card-w); height: var(--card-h);
  background: linear-gradient(145deg, #fffef8 0%, #f8f2e4 100%);
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 1px 3px 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.9);
  position: relative; cursor: default; user-select: none; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s;
}
.pc .tl, .pc .br {
  position: absolute; font-size: 13px; font-weight: 800;
  font-family: 'DM Sans', sans-serif; line-height: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.pc .tl { top: 5px; left: 6px; }
.pc .br { bottom: 5px; right: 6px; transform: rotate(180deg); }
.pc .tl .s, .pc .br .s { font-size: 10px; }
.pc .cs { font-size: 30px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.1)); }
.pc.red .tl, .pc.red .br, .pc.red .cs { color: #be1428; }
.pc.blk .tl, .pc.blk .br, .pc.blk .cs { color: #111827; }

/* ── CARD THEMES — scoped to #game-table, excludes .back (opponent face-down) ──*/

/* Colorful: each suit gets its own vivid tinted card — background + symbol all in suit color */
.theme-colorful .pc:not(.back) {
  border-radius: 10px;
  box-shadow: 2px 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.6);
}
/* Spades — bold cobalt blue */
.theme-colorful .pc:not(.back).spade {
  background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 60%, #93c5fd 100%);
  border: 1.5px solid rgba(37,99,235,.35);
}
.theme-colorful .pc:not(.back).spade  .tl,
.theme-colorful .pc:not(.back).spade  .br,
.theme-colorful .pc:not(.back).spade  .cs { color: #1d4ed8; filter: drop-shadow(0 1px 2px rgba(37,99,235,.3)); }

/* Hearts — vivid rose red */
.theme-colorful .pc:not(.back).heart {
  background: linear-gradient(145deg, #ffe4e6 0%, #fecdd3 60%, #fda4af 100%);
  border: 1.5px solid rgba(225,29,72,.3);
}
.theme-colorful .pc:not(.back).heart  .tl,
.theme-colorful .pc:not(.back).heart  .br,
.theme-colorful .pc:not(.back).heart  .cs { color: #be123c; filter: drop-shadow(0 1px 2px rgba(225,29,72,.3)); }

/* Diamonds — warm amber orange */
.theme-colorful .pc:not(.back).diamond {
  background: linear-gradient(145deg, #ffedd5 0%, #fed7aa 60%, #fdba74 100%);
  border: 1.5px solid rgba(234,88,12,.3);
}
.theme-colorful .pc:not(.back).diamond .tl,
.theme-colorful .pc:not(.back).diamond .br,
.theme-colorful .pc:not(.back).diamond .cs { color: #c2410c; filter: drop-shadow(0 1px 2px rgba(234,88,12,.3)); }

/* Clubs — rich emerald green */
.theme-colorful .pc:not(.back).club {
  background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 60%, #86efac 100%);
  border: 1.5px solid rgba(22,163,74,.3);
}
.theme-colorful .pc:not(.back).club   .tl,
.theme-colorful .pc:not(.back).club   .br,
.theme-colorful .pc:not(.back).club   .cs { color: #15803d; filter: drop-shadow(0 1px 2px rgba(22,163,74,.3)); }


/* Neon: cyberpunk dark card — each suit tints the whole card with its color */
.theme-neon .pc:not(.back) {
  background:
    /* CRT scanline texture */
    repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0,0,0,.25) 2px, rgba(0,0,0,.25) 3px
    ),
    linear-gradient(145deg, #0a0a18 0%, #12122a 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  box-shadow: 1px 3px 14px rgba(0,0,0,.9);
}
/* Spades — electric blue tint on whole card */
.theme-neon .pc:not(.back).spade {
  border-color: rgba(96,165,250,.5);
  box-shadow: 0 0 0 1px rgba(59,130,246,.2), 1px 3px 14px rgba(0,0,0,.9),
              inset 0 0 30px rgba(59,130,246,.08);
}
.theme-neon .pc:not(.back).spade  .tl,
.theme-neon .pc:not(.back).spade  .br,
.theme-neon .pc:not(.back).spade  .cs {
  color: #93c5fd;
  filter: drop-shadow(0 0 8px #3b82f6) drop-shadow(0 0 16px #2563eb);
}
/* Hearts — hot pink tint */
.theme-neon .pc:not(.back).heart {
  border-color: rgba(244,114,182,.5);
  box-shadow: 0 0 0 1px rgba(236,72,153,.2), 1px 3px 14px rgba(0,0,0,.9),
              inset 0 0 30px rgba(236,72,153,.08);
}
.theme-neon .pc:not(.back).heart  .tl,
.theme-neon .pc:not(.back).heart  .br,
.theme-neon .pc:not(.back).heart  .cs {
  color: #f9a8d4;
  filter: drop-shadow(0 0 8px #ec4899) drop-shadow(0 0 16px #db2777);
}
/* Diamonds — amber orange tint */
.theme-neon .pc:not(.back).diamond {
  border-color: rgba(251,146,60,.5);
  box-shadow: 0 0 0 1px rgba(249,115,22,.2), 1px 3px 14px rgba(0,0,0,.9),
              inset 0 0 30px rgba(249,115,22,.08);
}
.theme-neon .pc:not(.back).diamond .tl,
.theme-neon .pc:not(.back).diamond .br,
.theme-neon .pc:not(.back).diamond .cs {
  color: #fed7aa;
  filter: drop-shadow(0 0 8px #f97316) drop-shadow(0 0 16px #ea580c);
}
/* Clubs — acid green tint */
.theme-neon .pc:not(.back).club {
  border-color: rgba(74,222,128,.5);
  box-shadow: 0 0 0 1px rgba(34,197,94,.2), 1px 3px 14px rgba(0,0,0,.9),
              inset 0 0 30px rgba(34,197,94,.08);
}
.theme-neon .pc:not(.back).club   .tl,
.theme-neon .pc:not(.back).club   .br,
.theme-neon .pc:not(.back).club   .cs {
  color: #86efac;
  filter: drop-shadow(0 0 8px #22c55e) drop-shadow(0 0 16px #16a34a);
}
/* Rank/suit label text — white on all suits */
.theme-neon .pc:not(.back) .tl,
.theme-neon .pc:not(.back) .br { color: rgba(255,255,255,.9); font-weight: 800; }

/* Gold: rich black card with gold foil suits — true luxury feel */
.theme-gold .pc:not(.back) {
  background: linear-gradient(145deg, #1a1408 0%, #0d0b05 60%, #1a1408 100%);
  border: 1px solid rgba(212,175,55,.5);
  box-shadow: 0 0 0 1px rgba(212,175,55,.15), 2px 4px 12px rgba(0,0,0,.7),
              inset 0 1px 0 rgba(212,175,55,.2);
  border-radius: 9px;
}
.theme-gold .pc:not(.back)::before {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid rgba(212,175,55,.12); border-radius: 6px; pointer-events: none;
}
.theme-gold .pc:not(.back) .tl,
.theme-gold .pc:not(.back) .br { color: #d4af37; }
.theme-gold .pc:not(.back).red .tl,
.theme-gold .pc:not(.back).red .br,
.theme-gold .pc:not(.back).red .cs {
  color: #f4c842;
  filter: drop-shadow(0 0 4px rgba(244,200,66,.5));
}
.theme-gold .pc:not(.back).blk .tl,
.theme-gold .pc:not(.back).blk .br,
.theme-gold .pc:not(.back).blk .cs {
  color: #d4af37;
  filter: drop-shadow(0 0 4px rgba(212,175,55,.45));
}

/* Retro: vintage printed card — aged paper, flat NES colors, pixel font, chunky drop shadow */
.theme-retro .pc:not(.back) {
  background:
    /* subtle halftone dot texture */
    radial-gradient(circle, rgba(180,140,80,.12) 1px, transparent 1px),
    linear-gradient(160deg, #f2e8c9 0%, #e8d9a8 55%, #decca 100%);
  background-size: 6px 6px, 100% 100%;
  border: 2px solid #8b6914;
  border-radius: 3px;
  box-shadow: 4px 4px 0 #5a3e08, 0 0 0 1px #8b6914;
  font-family: 'Courier New', Courier, monospace;
}
/* Thick pixel inset border frame */
.theme-retro .pc:not(.back)::before {
  content: '';
  position: absolute; inset: 4px;
  border: 2px solid rgba(139,105,20,.25);
  border-radius: 0;
  pointer-events: none;
}
/* Decorative pixel dots bottom-center */
.theme-retro .pc:not(.back)::after {
  content: '▪ ▪ ▪';
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 5px; opacity: .35; pointer-events: none;
  color: #8b6914;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
}
.theme-retro .pc:not(.back) .tl,
.theme-retro .pc:not(.back) .br {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.5px;
}
.theme-retro .pc:not(.back) .tl .s,
.theme-retro .pc:not(.back) .br .s { font-size: 12px; }
.theme-retro .pc:not(.back) .cs {
  font-size: 32px; filter: none;
  display: flex; flex-direction: column; align-items: center;
}
/* Pixel row under center suit */
.theme-retro .pc:not(.back) .cs::after {
  content: '· · ·';
  font-size: 6px; letter-spacing: 3px; opacity: .4;
  font-family: 'Courier New', monospace;
  margin-top: 2px;
  color: #8b6914;
}
/* Flat NES red — no glow, pure pigment */
.theme-retro .pc:not(.back).red .tl,
.theme-retro .pc:not(.back).red .br,
.theme-retro .pc:not(.back).red .cs { color: #cc1a1a; filter: none; }
/* Flat NES black — pure ink */
.theme-retro .pc:not(.back).blk .tl,
.theme-retro .pc:not(.back).blk .br,
.theme-retro .pc:not(.back).blk .cs { color: #1a1a1a; filter: none; }

/* Retro winning card — gold pixel highlight */
.theme-retro .pc.winning-card {
  box-shadow: 4px 4px 0 #5a3e08, 0 0 0 2px #f5c518;
}

/* Retro back — warm burgundy with crosshatch print pattern */
.theme-retro .pc.back {
  background:
    repeating-linear-gradient(
      45deg, transparent, transparent 4px,
      rgba(255,255,255,.06) 4px, rgba(255,255,255,.06) 5px
    ),
    repeating-linear-gradient(
      -45deg, transparent, transparent 4px,
      rgba(255,255,255,.06) 4px, rgba(255,255,255,.06) 5px
    ),
    linear-gradient(135deg, #6b1a1a 0%, #4a0f0f 50%, #6b1a1a 100%);
  border: 2px solid #8b6914;
  border-radius: 3px;
  box-shadow: 4px 4px 0 #5a3e08, 0 0 0 1px #8b6914;
}
.theme-retro .pc.back::before {
  border-color: rgba(245,197,24,.2);
  box-shadow: none;
  border-radius: 0;
}
.theme-retro .pc.back::after {
  content: '🕹';
  color: rgba(245,197,24,.7);
  font-size: 22px;
  filter: none;
}

/* Retro table — worn green baize, like an old arcade table */
.theme-retro#game-table::before {
  background: radial-gradient(ellipse at 40% 38%, #2a4a1a 0%, #1a3010 50%, #0d1a08 100%);
  border-color: rgba(139,105,20,.4);
  box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(139,105,20,.1),
              0 0 60px rgba(0,0,0,.3) inset;
}
.theme-retro#game-table::after { display: none; }
body:has(#game-table.theme-retro) {
  background: #0a0d06;
}
body:has(#game-table.theme-retro)::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(30,50,15,.6) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #0d1408 0%, #0a0d06 100%);
}

/* Ice: frosted glacier glass — heavy blue tint, strong specular, feels like thick ice */
.theme-ice .pc:not(.back) {
  background:
    /* irregular frost cracks as SVG polylines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='120'%3E%3Cg stroke='rgba(255,255,255,0.55)' stroke-width='0.8' fill='none'%3E%3Cpolyline points='12,0 18,14 9,22 24,38'/%3E%3Cpolyline points='52,0 44,18 55,30 46,48 60,62'/%3E%3Cpolyline points='0,35 14,42 8,56 20,68'/%3E%3Cpolyline points='65,20 72,34 58,50 70,70'/%3E%3Cpolyline points='30,55 22,70 34,82 26,100'/%3E%3Cpolyline points='70,85 60,96 68,112 55,120'/%3E%3Cpolyline points='10,90 20,102 12,115'/%3E%3C/g%3E%3C/svg%3E"),
    /* deep glacial blue base */
    linear-gradient(145deg, #a8d4f5 0%, #7bb8e8 40%, #5ba3de 100%);
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 10px;
  box-shadow:
    1px 3px 16px rgba(30,100,200,.35),
    inset 0 0 24px rgba(120,190,255,.4);
}
/* Glass specular — bright diagonal slash across top-left */
.theme-ice .pc:not(.back)::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9px;
  background: linear-gradient(125deg,
    rgba(255,255,255,.75) 0%,
    rgba(255,255,255,.2) 30%,
    transparent 52%
  );
  pointer-events: none;
}
/* ❄ watermark */
.theme-ice .pc:not(.back)::after {
  content: '❄';
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: 14px; opacity: .3; pointer-events: none;
  color: #fff;
}
.theme-ice .pc:not(.back) .cs { font-size: 28px; }
/* Hearts/Diamonds: white-tinted crimson — readable on blue */
.theme-ice .pc:not(.back).red .tl,
.theme-ice .pc:not(.back).red .br,
.theme-ice .pc:not(.back).red .cs { color: #7f1d1d; filter: none; }
/* Spades/Clubs: deep navy ink — maximum contrast on blue card */
.theme-ice .pc:not(.back).blk .tl,
.theme-ice .pc:not(.back).blk .br,
.theme-ice .pc:not(.back).blk .cs { color: #0f172a; filter: none; }

/* Ice winning card */
.theme-ice .pc.winning-card {
  box-shadow: 0 0 0 2px #93c5fd, 0 0 20px rgba(147,197,253,.5),
              inset 0 0 20px rgba(219,234,254,.4);
}

/* Ice back — deep glacier blue, white snowflake */
.theme-ice .pc.back {
  background:
    repeating-linear-gradient(
      60deg,
      transparent 0px, transparent 10px,
      rgba(255,255,255,.04) 10px, rgba(255,255,255,.04) 11px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent 0px, transparent 10px,
      rgba(255,255,255,.04) 10px, rgba(255,255,255,.04) 11px
    ),
    linear-gradient(135deg, #1e3a8a 0%, #1e40af 45%, #1d4ed8 100%);
  border: 1.5px solid rgba(147,197,253,.4);
  box-shadow: 1px 3px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.theme-ice .pc.back::before {
  border-color: rgba(255,255,255,.15);
  box-shadow: none;
}
.theme-ice .pc.back::after {
  content: '❄';
  color: rgba(255,255,255,.5);
  font-size: 26px;
  filter: none;
}

/* Ice table — pale silver-blue ice rink */
.theme-ice#game-table::before {
  background: radial-gradient(ellipse at 40% 38%, #dbeafe 0%, #bfdbfe 45%, #93c5fd 100%);
  border-color: rgba(147,197,253,.6);
  box-shadow: 0 0 0 8px rgba(100,160,220,.3), 0 0 0 10px rgba(147,197,253,.2),
              0 0 80px rgba(255,255,255,.2) inset;
}
body:has(#game-table.theme-ice) {
  background: #c8dff5;
}
body:has(#game-table.theme-ice)::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(219,234,254,.8) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 10%, rgba(255,255,255,.5) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #dbeafe 0%, #c8dff5 100%);
}

/* Theme selector chips in settings */
.tpick-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 76px; height: 84px; border-radius: 10px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.5); transition: all .15s;
  box-sizing: border-box; padding: 8px 4px 6px;
}
.tpick-btn:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.tpick-btn.active { border-color: var(--teal); color: var(--teal); background: rgba(34,212,180,.08); }
.tpick-btn.active .tpick-card-preview { box-shadow: 0 0 0 2px var(--teal); border-radius: 6px; }
.tpick-btn.active .tpick-table-preview { box-shadow: 0 0 0 2px var(--teal); }

/* Card back — navy with gold filigree */
.pc.back {
  background: linear-gradient(135deg, #0c1f4a 0%, #071540 45%, #0c1f4a 100%);
  border: 1px solid rgba(201,150,14,.35); overflow: hidden;
}
.pc.back::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(201,150,14,.18); border-radius: 6px;
}
.pc.back::after {
  content: '◆'; font-size: 28px;
  color: rgba(201,150,14,.12);
}

/* Colorful back — clean white with a colored diamond grid */
.theme-colorful .pc.back {
  background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #1a2a6c 100%);
  border: 1px solid rgba(255,255,255,.25);
}
.theme-colorful .pc.back::before { border-color: rgba(255,255,255,.2); }
.theme-colorful .pc.back::after  { content: '✦'; color: rgba(255,255,255,.18); font-size: 26px; }


/* Neon back — deep black, rainbow border cycling through suit colors */
.theme-neon .pc.back {
  background:
    repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0,0,0,.3) 2px, rgba(0,0,0,.3) 3px
    ),
    linear-gradient(135deg, #07071a 0%, #0d0d28 50%, #07071a 100%);
  border: 1px solid rgba(147,197,253,.5);
  box-shadow: 0 0 0 1px rgba(59,130,246,.15),
              0 0 20px rgba(96,165,250,.2),
              inset 0 0 30px rgba(59,130,246,.06);
}
.theme-neon .pc.back::before {
  border-color: rgba(244,114,182,.25);
  box-shadow: inset 0 0 16px rgba(236,72,153,.06);
}
.theme-neon .pc.back::after {
  content: '◈';
  font-size: 26px;
  color: transparent;
  background: linear-gradient(135deg, #60a5fa, #f472b6, #fb923c, #4ade80);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(96,165,250,.6));
}

/* Neon table — deep black void with subtle color bleed */
.theme-neon#game-table::before {
  background: radial-gradient(ellipse at 40% 38%, #0d0d28 0%, #07071a 55%, #030310 100%);
  border-color: rgba(96,165,250,.2);
  box-shadow: 0 0 0 8px rgba(0,0,0,.8), 0 0 0 10px rgba(59,130,246,.06),
              0 0 120px rgba(59,130,246,.08) inset, 0 0 60px rgba(236,72,153,.04) inset;
}
body:has(#game-table.theme-neon) {
  background: #02020a;
}
body:has(#game-table.theme-neon)::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(13,13,40,.8) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 10%, rgba(59,130,246,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 85%, rgba(236,72,153,.05) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #05051a 0%, #02020a 100%);
}

/* Gold back — jet black with rich gold filigree (matches face) */
.theme-gold .pc.back {
  background: linear-gradient(135deg, #1a1408 0%, #0d0b05 45%, #1a1408 100%);
  border: 1px solid rgba(212,175,55,.5);
  box-shadow: 0 0 0 1px rgba(212,175,55,.1), inset 0 0 20px rgba(212,175,55,.04);
}
.theme-gold .pc.back::before { border-color: rgba(212,175,55,.22); }
.theme-gold .pc.back::after  { content: '✦'; color: rgba(212,175,55,.22); font-size: 26px; }

/* ════════════════════════════════════════
   HOLOGRAPHIC — animated rainbow foil card theme
   The card face slides a wide rainbow gradient diagonally,
   suit symbols shimmer with the same hue cycle.
════════════════════════════════════════ */
.theme-holo .pc:not(.back) {
  background:
    linear-gradient(
      125deg,
      #fff0fb 0%, #e8f0ff 12%, #d0faff 24%,
      #d4ffd4 36%, #fffbd0 48%, #ffddd0 60%,
      #ffd0f0 72%, #e0d0ff 84%, #d0e8ff 100%
    );
  background-size: 300% 300%;
  animation: holoShift 4s ease-in-out infinite;
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 10px;
  box-shadow:
    1px 3px 12px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.95);
  overflow: hidden;
}
/* Foil sheen — diagonal specular that moves opposite to the gradient */
.theme-holo .pc:not(.back)::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9px;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.08) 55%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: holoSheen 4s ease-in-out infinite;
  pointer-events: none;
}
/* Subtle diffraction grid overlay */
.theme-holo .pc:not(.back)::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9px;
  background:
    repeating-linear-gradient(
      0deg, transparent, transparent 3px,
      rgba(180,180,255,.07) 3px, rgba(180,180,255,.07) 4px
    ),
    repeating-linear-gradient(
      90deg, transparent, transparent 3px,
      rgba(255,180,220,.05) 3px, rgba(255,180,220,.05) 4px
    );
  pointer-events: none;
}
@keyframes holoShift {
  0%   { background-position: 0% 0%;   }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%;   }
}
@keyframes holoSheen {
  0%   { background-position: 200% 200%; }
  50%  { background-position: 0% 0%;     }
  100% { background-position: 200% 200%; }
}

/* Suit symbols — per-suit holographic color so suits are always distinguishable */
/* Spades: electric indigo */
.theme-holo .pc:not(.back).spade .tl,
.theme-holo .pc:not(.back).spade .br,
.theme-holo .pc:not(.back).spade .cs {
  color: #6d28d9;
  filter: drop-shadow(0 0 4px rgba(109,40,217,.7)) drop-shadow(0 0 8px rgba(139,92,246,.4));
  animation: holoSpade 4s ease-in-out infinite;
}
@keyframes holoSpade {
  0%,100% { color: #6d28d9; filter: drop-shadow(0 0 4px rgba(109,40,217,.7)) drop-shadow(0 0 8px rgba(139,92,246,.4)); }
  50%      { color: #818cf8; filter: drop-shadow(0 0 6px rgba(129,140,248,.9)) drop-shadow(0 0 12px rgba(109,40,217,.5)); }
}
/* Hearts: hot magenta/pink */
.theme-holo .pc:not(.back).heart .tl,
.theme-holo .pc:not(.back).heart .br,
.theme-holo .pc:not(.back).heart .cs {
  color: #db2777;
  filter: drop-shadow(0 0 4px rgba(219,39,119,.7)) drop-shadow(0 0 8px rgba(244,114,182,.4));
  animation: holoHeart 4s ease-in-out infinite;
}
@keyframes holoHeart {
  0%,100% { color: #db2777; filter: drop-shadow(0 0 4px rgba(219,39,119,.7)) drop-shadow(0 0 8px rgba(244,114,182,.4)); }
  50%      { color: #f472b6; filter: drop-shadow(0 0 6px rgba(244,114,182,.9)) drop-shadow(0 0 12px rgba(219,39,119,.5)); }
}
/* Diamonds: electric cyan/teal */
.theme-holo .pc:not(.back).diamond .tl,
.theme-holo .pc:not(.back).diamond .br,
.theme-holo .pc:not(.back).diamond .cs {
  color: #0891b2;
  filter: drop-shadow(0 0 4px rgba(8,145,178,.7)) drop-shadow(0 0 8px rgba(34,211,238,.4));
  animation: holoDiamond 4s ease-in-out infinite;
}
@keyframes holoDiamond {
  0%,100% { color: #0891b2; filter: drop-shadow(0 0 4px rgba(8,145,178,.7)) drop-shadow(0 0 8px rgba(34,211,238,.4)); }
  50%      { color: #22d3ee; filter: drop-shadow(0 0 6px rgba(34,211,238,.9)) drop-shadow(0 0 12px rgba(8,145,178,.5)); }
}
/* Clubs: electric lime/emerald */
.theme-holo .pc:not(.back).club .tl,
.theme-holo .pc:not(.back).club .br,
.theme-holo .pc:not(.back).club .cs {
  color: #16a34a;
  filter: drop-shadow(0 0 4px rgba(22,163,74,.7)) drop-shadow(0 0 8px rgba(74,222,128,.4));
  animation: holoClub 4s ease-in-out infinite;
}
@keyframes holoClub {
  0%,100% { color: #16a34a; filter: drop-shadow(0 0 4px rgba(22,163,74,.7)) drop-shadow(0 0 8px rgba(74,222,128,.4)); }
  50%      { color: #4ade80; filter: drop-shadow(0 0 6px rgba(74,222,128,.9)) drop-shadow(0 0 12px rgba(22,163,74,.5)); }
}

/* Holo back — dark prismatic shimmer */
.theme-holo .pc.back {
  background:
    linear-gradient(
      125deg,
      #1a0030 0%, #001a40 20%, #001a10 40%,
      #1a1000 60%, #1a0020 80%, #001030 100%
    );
  background-size: 300% 300%;
  animation: holoBackShift 5s ease-in-out infinite;
  border: 1.5px solid rgba(200,180,255,.4);
  box-shadow: 0 0 16px rgba(140,100,255,.2);
}
.theme-holo .pc.back::before {
  border-color: rgba(255,200,255,.15);
  box-shadow: none;
}
.theme-holo .pc.back::after {
  content: '✦';
  font-size: 26px;
  color: transparent;
  background: linear-gradient(135deg, #a78bfa, #f472b6, #fb923c, #4ade80, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  animation: holoSymbol 4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(167,139,250,.5));
}
@keyframes holoBackShift {
  0%   { background-position: 0% 0%;     }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%;     }
}

/* Holo table — deep dark with soft prismatic glow */
.theme-holo#game-table::before {
  background: radial-gradient(ellipse at 40% 38%, #1a0a2e 0%, #0a0818 55%, #04030c 100%);
  border-color: rgba(167,139,250,.25);
  box-shadow: 0 0 0 8px rgba(0,0,0,.7), 0 0 0 10px rgba(167,139,250,.06),
              0 0 100px rgba(167,139,250,.08) inset;
}
body:has(#game-table.theme-holo) { background: #06030f; }
body:has(#game-table.theme-holo)::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(26,10,46,.8) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 10%, rgba(167,139,250,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(244,114,182,.05) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #0c0618 0%, #06030f 100%);
}

/* Holo winning card — prismatic glow ring */
.theme-holo .pc.winning-card {
  box-shadow: 0 0 0 2px #a78bfa, 0 0 20px rgba(167,139,250,.6),
              0 0 40px rgba(244,114,182,.3);
  animation: holoWinRing 1s ease-in-out infinite alternate;
}
@keyframes holoWinRing {
  from { box-shadow: 0 0 0 2px #a78bfa, 0 0 20px rgba(167,139,250,.5); }
  to   { box-shadow: 0 0 0 2px #f472b6, 0 0 30px rgba(244,114,182,.7); }
}

/* ════════════════════════════════════════
   FIRE — dark card, flame glow rises from bottom
   Clean card face with ember symbols + outer flame aura
════════════════════════════════════════ */

/* Base card — dark charcoal with rising ember gradient */
.theme-fire .pc:not(.back) {
  background: linear-gradient(
    180deg,
    #0d0500 0%,
    #1a0800 30%,
    #2d1200 60%,
    #3d1800 80%,
    #ff4400 100%
  );
  background-size: 100% 200%;
  animation: fireBaseRise 2s ease-in-out infinite alternate;
  border: 1.5px solid rgba(255,100,0,.6);
  border-radius: 10px;
  box-shadow:
    0 0 20px rgba(255,80,0,.4),
    0 0 50px rgba(255,40,0,.12),
    inset 0 -4px 16px rgba(255,120,0,.2);
  overflow: hidden;
}
@keyframes fireBaseRise {
  0%   { background-position: 0% 100%; box-shadow: 0 0 16px rgba(255,60,0,.3),  inset 0 -4px 12px rgba(255,100,0,.15); }
  100% { background-position: 0% 60%;  box-shadow: 0 0 28px rgba(255,100,0,.55), inset 0 -4px 24px rgba(255,160,0,.3); }
}

/* Inner flame glow — soft radial bloom rising from bottom edge */
.theme-fire .pc:not(.back)::before {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  bottom: 0; height: 45%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(255,200,80,.55) 0%,
    rgba(255,100,0,.3) 35%,
    rgba(255,50,0,.08) 65%,
    transparent 100%
  );
  animation: flameGlow 1.4s ease-in-out infinite alternate;
  pointer-events: none;
  border-radius: 50%;
}
@keyframes flameGlow {
  0%   { transform: scaleX(1)    scaleY(1);    opacity: .7; }
  33%  { transform: scaleX(1.08) scaleY(1.05); opacity: 1;  }
  66%  { transform: scaleX(.94)  scaleY(.95);  opacity: .8; }
  100% { transform: scaleX(1.04) scaleY(1.08); opacity: .95;}
}

/* Thin bright ember line at card bottom */
.theme-fire .pc:not(.back)::after {
  content: '';
  position: absolute;
  left: 5%; right: 5%; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff8800, #ffcc00, #ff8800, transparent);
  border-radius: 0 0 10px 10px;
  animation: emberLine 1.1s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes emberLine {
  0%   { opacity: .6; transform: scaleX(.9);  }
  100% { opacity: 1;  transform: scaleX(1.0); }
}

/* Symbols — bright white with ember glow */
.theme-fire .pc:not(.back) .tl,
.theme-fire .pc:not(.back) .br,
.theme-fire .pc:not(.back) .cs {
  color: #fff8e7;
  filter: drop-shadow(0 0 4px rgba(255,180,0,.9)) drop-shadow(0 0 10px rgba(255,80,0,.7));
  animation: emberGlow 1.2s ease-in-out infinite alternate;
}
@keyframes emberGlow {
  0%   { filter: drop-shadow(0 0 3px rgba(255,160,0,.8))  drop-shadow(0 0 8px  rgba(255,60,0,.6));  }
  100% { filter: drop-shadow(0 0 8px rgba(255,230,0,1))   drop-shadow(0 0 18px rgba(255,100,0,.9)); }
}
@keyframes fireFlicker {
  0%   { opacity: .8;  }
  50%  { opacity: 1;   }
  100% { opacity: .85; }
}

/* Fire back — dark charcoal with ember core and rising glow */
.theme-fire .pc.back {
  background:
    radial-gradient(ellipse at 50% 90%, #ff4500 0%, #cc2200 20%, #2d0800 55%, #0d0400 100%);
  border: 1.5px solid rgba(255,80,0,.5);
  box-shadow: 0 0 24px rgba(255,60,0,.35), inset 0 0 30px rgba(255,80,0,.08);
  animation: fireBackPulse 2s ease-in-out infinite alternate;
}
@keyframes fireBackPulse {
  0%   { box-shadow: 0 0 16px rgba(255,60,0,.25); }
  100% { box-shadow: 0 0 36px rgba(255,100,0,.55); }
}
.theme-fire .pc.back::before { border-color: rgba(255,100,0,.2); }
.theme-fire .pc.back::after {
  content: '🔥';
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(255,100,0,.9));
  animation: fireFlicker 1.2s ease-in-out infinite alternate;
}

/* Fire winning card */
.theme-fire .pc.winning-card {
  animation: fireWinRing 0.8s ease-in-out infinite alternate;
}
@keyframes fireWinRing {
  from { box-shadow: 0 0 0 2px #ff4500, 0 0 24px rgba(255,80,0,.8); }
  to   { box-shadow: 0 0 0 3px #ffd700, 0 0 40px rgba(255,200,0,1); }
}

/* Fire table — scorched black pit with ember core */
.theme-fire#game-table::before {
  background: radial-gradient(ellipse at 40% 38%, #2d0a00 0%, #1a0500 45%, #080200 100%);
  border-color: rgba(255,80,0,.25);
  box-shadow: 0 0 0 8px rgba(0,0,0,.8), 0 0 0 10px rgba(255,60,0,.06),
              0 0 100px rgba(255,60,0,.14) inset;
}
body:has(#game-table.theme-fire) { background: #0a0200; }
body:has(#game-table.theme-fire)::before {
  background:
    radial-gradient(ellipse 60% 40% at 50% 60%, rgba(80,20,0,.6) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 30% 80%, rgba(255,60,0,.08) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #180800 0%, #0a0200 100%);
}


/* ════════════════════════════════════════
   TABLE THEMES — full-screen atmosphere via :has()
════════════════════════════════════════ */
/* felt = default (no class needed) */

/* ── Midnight ── */
.table-midnight#game-table::before {
  background:
    repeating-linear-gradient(135deg, rgba(96,165,250,.025) 0px, rgba(96,165,250,.025) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(45deg,  rgba(96,165,250,.025) 0px, rgba(96,165,250,.025) 1px, transparent 1px, transparent 5px),
    radial-gradient(ellipse at 40% 38%, #1e3170 0%, #0e1a4a 45%, #060918 100%);
  border-color: rgba(147,197,253,.2);
  box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(96,165,250,.06),
              0 0 100px rgba(96,165,250,.08) inset;
}
.table-midnight#game-table::after { border-color: rgba(147,197,253,.1); }
/* Full-screen: deep royal blue atmosphere */
body:has(#game-table.table-midnight) {
  background: #04060f;
}
body:has(#game-table.table-midnight)::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(30,49,112,.5) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 10%, rgba(96,165,250,.08) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #06091a 0%, #04060f 100%);
}

/* ── Crimson ── */
.table-crimson#game-table::before {
  background:
    repeating-linear-gradient(90deg,  rgba(239,68,68,.03)  0px, rgba(239,68,68,.03)  1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(0deg,   rgba(239,68,68,.03)  0px, rgba(239,68,68,.03)  1px, transparent 1px, transparent 4px),
    radial-gradient(ellipse at 40% 38%, #6b1a1a 0%, #420e0e 45%, #1a0606 100%);
  border-color: rgba(239,68,68,.2);
  box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(239,68,68,.06),
              0 0 100px rgba(220,38,38,.1) inset;
}
.table-crimson#game-table::after { border-color: rgba(239,68,68,.1); }
/* Full-screen: deep blood-red atmosphere */
body:has(#game-table.table-crimson) {
  background: #0f0404;
}
body:has(#game-table.table-crimson)::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(107,26,26,.5) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 15%, rgba(239,68,68,.07) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #180606 0%, #0f0404 100%);
}

/* ── Desert ── */
.table-desert#game-table::before {
  background:
    repeating-linear-gradient(160deg, rgba(217,119,6,.035) 0px, rgba(217,119,6,.035) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(70deg,  rgba(217,119,6,.035) 0px, rgba(217,119,6,.035) 1px, transparent 1px, transparent 6px),
    radial-gradient(ellipse at 40% 38%, #6b4e1a 0%, #42300e 45%, #1a1206 100%);
  border-color: rgba(217,119,6,.2);
  box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(217,119,6,.06),
              0 0 100px rgba(180,100,6,.08) inset;
}
.table-desert#game-table::after { border-color: rgba(217,119,6,.1); }
/* Full-screen: warm amber dusk atmosphere */
body:has(#game-table.table-desert) {
  background: #0f0b04;
}
body:has(#game-table.table-desert)::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(107,78,26,.45) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 10%, rgba(217,119,6,.08) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #1a1206 0%, #0f0b04 100%);
}

/* ════════════════════════════════════════
   PER-THEME TABLE OVAL ANIMATIONS
   Each theme has a structurally unique motion on both
   the felt oval (::before) and rail ring (::after)
════════════════════════════════════════ */

/* ── Midnight — rail glow pulses ── */
.table-midnight#game-table::after {
  border-color: rgba(96,165,250,.15);
  animation: midnightRail 4s ease-in-out infinite;
}
@keyframes midnightRail {
  0%,100% { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 0 0 1px rgba(96,165,250,.08),  0 0 30px rgba(59,130,246,.08) inset; }
  50%     { transform: translate(-50%,-50%) scale(1.01); box-shadow: 0 0 0 1px rgba(147,197,253,.35), 0 0 60px rgba(96,165,250,.22) inset; }
}

/* ── Crimson — oval beats like a heart (scale pulse) ── */
.table-crimson#game-table::before {
  animation: crimsonBeat 1.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes crimsonBeat {
  0%   { transform: translate(-50%,-50%) scale(1);     box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(239,68,68,.06), 0 0 80px rgba(220,38,38,.08) inset; }
  20%  { transform: translate(-50%,-50%) scale(1.025); box-shadow: 0 0 0 8px rgba(0,0,0,.4), 0 0 0 10px rgba(239,68,68,.2),  0 0 100px rgba(220,38,38,.25) inset; }
  35%  { transform: translate(-50%,-50%) scale(1);     box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(239,68,68,.06), 0 0 80px rgba(220,38,38,.08) inset; }
  55%  { transform: translate(-50%,-50%) scale(1.015); box-shadow: 0 0 0 8px rgba(0,0,0,.5), 0 0 0 10px rgba(239,68,68,.12), 0 0 90px rgba(220,38,38,.15) inset; }
  100% { transform: translate(-50%,-50%) scale(1);     box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(239,68,68,.06), 0 0 80px rgba(220,38,38,.08) inset; }
}
.table-crimson#game-table::after {
  border-color: rgba(239,68,68,.15);
  animation: crimsonBeat 1.4s cubic-bezier(.4,0,.6,1) infinite;
}

/* ── Desert — oval warps slightly like heat haze ── */
.table-desert#game-table::before {
  animation: desertHaze 5s ease-in-out infinite;
}
@keyframes desertHaze {
  0%   { transform: translate(-50%,-50%) scaleX(1)    scaleY(1)    skewX(0deg);   }
  20%  { transform: translate(-50%,-50%) scaleX(1.01) scaleY(.99)  skewX(.4deg);  }
  45%  { transform: translate(-50%,-50%) scaleX(.99)  scaleY(1.01) skewX(-.3deg); }
  70%  { transform: translate(-50%,-50%) scaleX(1.015) scaleY(.985) skewX(.2deg); }
  100% { transform: translate(-50%,-50%) scaleX(1)    scaleY(1)    skewX(0deg);   }
}
.table-desert#game-table::after {
  border-color: rgba(217,119,6,.15);
  animation: desertHaze 5s ease-in-out infinite;
}

/* ── Ocean — oval morphs border-radius like water surface ── */
.table-ocean#game-table::before {
  animation: oceanMorph 4s ease-in-out infinite;
}
@keyframes oceanMorph {
  0%   { border-radius: 50%; transform: translate(-50%,-50%); background: repeating-linear-gradient(30deg, rgba(34,211,238,.03) 0px, rgba(34,211,238,.03) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(120deg, rgba(34,211,238,.02) 0px, rgba(34,211,238,.02) 1px, transparent 1px, transparent 7px), radial-gradient(ellipse at 40% 38%, #0a4a5c 0%, #063040 45%, #020f18 100%); box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(34,211,238,.06), 0 0 80px rgba(6,182,212,.12) inset; }
  25%  { border-radius: 48% 52% 51% 49% / 50% 48% 52% 50%; transform: translate(-50%,-50%) scale(1.008); background: repeating-linear-gradient(30deg, rgba(34,211,238,.03) 0px, rgba(34,211,238,.03) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(120deg, rgba(34,211,238,.02) 0px, rgba(34,211,238,.02) 1px, transparent 1px, transparent 7px), radial-gradient(ellipse at 60% 42%, #0c5468 0%, #063040 45%, #020f18 100%); box-shadow: 0 0 0 8px rgba(0,0,0,.5), 0 0 0 10px rgba(34,211,238,.15), 0 0 100px rgba(6,182,212,.22) inset; }
  50%  { border-radius: 52% 48% 49% 51% / 49% 52% 48% 51%; transform: translate(-50%,-50%) scale(.996); background: repeating-linear-gradient(30deg, rgba(34,211,238,.03) 0px, rgba(34,211,238,.03) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(120deg, rgba(34,211,238,.02) 0px, rgba(34,211,238,.02) 1px, transparent 1px, transparent 7px), radial-gradient(ellipse at 40% 38%, #0a4a5c 0%, #063040 45%, #020f18 100%); box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(34,211,238,.08), 0 0 80px rgba(6,182,212,.14) inset; }
  75%  { border-radius: 49% 51% 52% 48% / 52% 49% 51% 48%; transform: translate(-50%,-50%) scale(1.005); background: repeating-linear-gradient(30deg, rgba(34,211,238,.03) 0px, rgba(34,211,238,.03) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(120deg, rgba(34,211,238,.02) 0px, rgba(34,211,238,.02) 1px, transparent 1px, transparent 7px), radial-gradient(ellipse at 35% 35%, #0c5468 0%, #063040 45%, #020f18 100%); box-shadow: 0 0 0 8px rgba(0,0,0,.5), 0 0 0 10px rgba(34,211,238,.12), 0 0 90px rgba(6,182,212,.18) inset; }
  100% { border-radius: 50%; transform: translate(-50%,-50%); background: repeating-linear-gradient(30deg, rgba(34,211,238,.03) 0px, rgba(34,211,238,.03) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(120deg, rgba(34,211,238,.02) 0px, rgba(34,211,238,.02) 1px, transparent 1px, transparent 7px), radial-gradient(ellipse at 40% 38%, #0a4a5c 0%, #063040 45%, #020f18 100%); box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(34,211,238,.06), 0 0 80px rgba(6,182,212,.12) inset; }
}
.table-ocean#game-table::after {
  border-color: rgba(34,211,238,.18);
  animation: oceanMorph 4s ease-in-out infinite;
}

/* ── Forest — rail dappled glow ── */
.table-forest#game-table::after {
  border-color: rgba(74,222,128,.15);
  animation: forestRail 7s ease-in-out infinite;
}
@keyframes forestRail {
  0%,100% { box-shadow: 0 0 0 1px rgba(74,222,128,.08),  0 0 20px rgba(34,197,94,.06) inset; }
  40%     { box-shadow: 0 0 0 1px rgba(134,239,172,.3),   0 0 50px rgba(74,222,128,.18) inset; }
  70%     { box-shadow: 0 0 0 1px rgba(74,222,128,.14),   0 0 30px rgba(34,197,94,.1)  inset; }
}

/* ── Storm — oval flickers, rail flashes lightning ── */
.table-storm#game-table::before {
  animation: stormFlicker 8s ease-in-out infinite;
}
.table-storm#game-table::after {
  border-color: rgba(139,92,246,.18);
  animation: stormLightning 8s ease-in-out infinite;
}
@keyframes stormLightning {
  0%,88%,100% { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 0 0 1px rgba(139,92,246,.1),  0 0 20px rgba(99,102,241,.08) inset; border-color: rgba(139,92,246,.18); }
  89%         { transform: translate(-50%,-50%) scale(1.02); box-shadow: 0 0 0 3px rgba(196,181,253,.8),  0 0 80px rgba(196,181,253,.5)  inset; border-color: rgba(196,181,253,.9); }
  90%         { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 0 0 1px rgba(139,92,246,.1),  0 0 20px rgba(99,102,241,.08) inset; border-color: rgba(139,92,246,.18); }
  93%         { transform: translate(-50%,-50%) scale(1.015);box-shadow: 0 0 0 2px rgba(196,181,253,.6),  0 0 60px rgba(167,139,250,.4)  inset; border-color: rgba(196,181,253,.7); }
  94%         { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 0 0 1px rgba(139,92,246,.1),  0 0 20px rgba(99,102,241,.08) inset; border-color: rgba(139,92,246,.18); }
}

/* ── Ocean ── */
.table-ocean#game-table::before {
  background:
    repeating-linear-gradient(30deg,  rgba(34,211,238,.03) 0px, rgba(34,211,238,.03) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(120deg, rgba(34,211,238,.02) 0px, rgba(34,211,238,.02) 1px, transparent 1px, transparent 7px),
    radial-gradient(ellipse at 40% 38%, #0a4a5c 0%, #063040 45%, #020f18 100%);
  border-color: rgba(34,211,238,.25);
  box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 0 10px rgba(34,211,238,.06),
              0 0 100px rgba(6,182,212,.12) inset, 0 0 60px rgba(34,211,238,.06) inset;
}
.table-ocean#game-table::after { border-color: rgba(34,211,238,.1); }
body:has(#game-table.table-ocean) { background: #010d14; }
body:has(#game-table.table-ocean)::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(10,74,92,.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(6,182,212,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 75%, rgba(34,211,238,.05) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #021018 0%, #010d14 100%);
}

/* ── Forest ── */
.table-forest#game-table::before {
  background:
    repeating-linear-gradient(110deg, rgba(74,222,128,.03)  0px, rgba(74,222,128,.03)  1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(20deg,  rgba(34,197,94,.02)   0px, rgba(34,197,94,.02)   1px, transparent 1px, transparent 8px),
    radial-gradient(ellipse at 40% 38%, #0d3318 0%, #071f0e 45%, #020a04 100%);
  border-color: rgba(74,222,128,.2);
  box-shadow: 0 0 0 8px rgba(0,0,0,.65), 0 0 0 10px rgba(74,222,128,.05),
              0 0 100px rgba(34,197,94,.1) inset, 0 0 60px rgba(22,163,74,.06) inset;
}
.table-forest#game-table::after { border-color: rgba(74,222,128,.1); }
body:has(#game-table.table-forest) { background: #020a04; }
body:has(#game-table.table-forest)::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(13,51,24,.6) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 15%, rgba(34,197,94,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(74,222,128,.05) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #041008 0%, #020a04 100%);
}

/* ── Storm ── */
.table-storm#game-table::before {
  background:
    repeating-linear-gradient(60deg,  rgba(196,181,253,.03) 0px, rgba(196,181,253,.03) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(150deg, rgba(139,92,246,.025) 0px, rgba(139,92,246,.025) 1px, transparent 1px, transparent 4px),
    radial-gradient(ellipse at 40% 38%, #1a1f2e 0%, #0e1220 45%, #050710 100%);
  border-color: rgba(196,181,253,.2);
  box-shadow: 0 0 0 8px rgba(0,0,0,.7), 0 0 0 10px rgba(139,92,246,.06),
              0 0 100px rgba(99,102,241,.1) inset, 0 0 60px rgba(196,181,253,.05) inset;
  animation: stormFlicker 8s ease-in-out infinite;
}
.table-storm#game-table::after { border-color: rgba(196,181,253,.1); }
@keyframes stormFlicker {
  0%, 92%, 100% { box-shadow: 0 0 0 8px rgba(0,0,0,.7), 0 0 0 10px rgba(139,92,246,.06), 0 0 100px rgba(99,102,241,.1) inset; }
  93%           { box-shadow: 0 0 0 8px rgba(0,0,0,.5), 0 0 0 10px rgba(196,181,253,.2),  0 0 140px rgba(196,181,253,.3) inset; }
  94%           { box-shadow: 0 0 0 8px rgba(0,0,0,.7), 0 0 0 10px rgba(139,92,246,.06), 0 0 100px rgba(99,102,241,.1) inset; }
  96%           { box-shadow: 0 0 0 8px rgba(0,0,0,.4), 0 0 0 10px rgba(196,181,253,.25), 0 0 160px rgba(196,181,253,.35) inset; }
}
body:has(#game-table.table-storm) { background: #04050d; }
body:has(#game-table.table-storm)::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(26,31,46,.6) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 25% 10%, rgba(99,102,241,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 75% 85%, rgba(139,92,246,.06) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #080a18 0%, #04050d 100%);
  animation: stormBgFlicker 8s ease-in-out infinite;
}
@keyframes stormBgFlicker {
  0%, 92%, 100% { opacity: 1; }
  93%           { opacity: 1.3; }
  94%           { opacity: 1; }
  96%           { opacity: 1.4; }
}

/* Small opponent cards */
.pc.sm { width: var(--opp-w); height: var(--opp-h); }
.pc.sm .tl, .pc.sm .br { font-size: 9px; }
.pc.sm .tl .s, .pc.sm .br .s { font-size: 7px; }
.pc.sm .cs { font-size: 17px; }
.pc.sm.back::after { font-size: 16px; }

/* Playable — teal glow float */
.pc.playable {
  cursor: pointer;
  animation: cardFloat 2.2s ease-in-out infinite;
  border-color: rgba(34,212,180,.55);
  box-shadow: 1px 3px 8px rgba(0,0,0,.55), 0 0 18px rgba(34,212,180,.3), 0 0 4px rgba(34,212,180,.5);
}
@keyframes cardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (hover: hover) {
  .pc.playable:hover {
    animation: none;
    transform: translateY(-26px) scale(1.09) rotate(-1deg);
    box-shadow: 0 22px 40px rgba(0,0,0,.65), 0 0 28px rgba(34,212,180,.5);
    border-color: var(--teal); z-index: 20;
  }
}
.pc.not-playable { opacity: .38; filter: grayscale(35%) brightness(.9); }

@keyframes playDrop { 0%{transform:scale(1.22) rotate(-5deg);opacity:.55} 100%{transform:scale(1) rotate(0);opacity:1} }
.pc.played-card { animation: playDrop .22s cubic-bezier(.34,1.2,.64,1); }
.pc.winning-card { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(201,150,14,.65); }