@charset "UTF-8";
/* ============================================================
   GAME-POLISH.CSS — Premium Toto table UX
   Loaded AFTER theme.css; pushes the game screen to A-tier.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   SIZING — slightly larger, more legible cards
   ───────────────────────────────────────────────────────────── */
:root {
  --card-w: 84px;
  --card-h: 118px;
  --card-w-sm: 64px;
  --card-h-sm: 90px;
  --radius: 10px;
}

/* ─────────────────────────────────────────────────────────────
   TABLE — calmer felt, sharper edge lighting
   ───────────────────────────────────────────────────────────── */
#game-screen.active {
  background:
    radial-gradient(ellipse 50% 70% at 50% 50%, rgba(var(--neon-2-rgb), 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 90% 100% at 50% 50%, var(--bg-1) 0%, var(--bg-0) 80%) !important;
}

#game-layout { padding: 16px; gap: 16px; }

#table {
  /* Refined felt — single rich gradient + crisp light */
  background:
    /* CYPWARE wordmark applies in ::before */
    /* Ceiling spotlights — two warm pools */
    radial-gradient(ellipse 38% 28% at 30% 25%, rgba(255,240,180,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 38% 28% at 70% 25%, rgba(255,240,180,0.06) 0%, transparent 60%),
    /* Soft inner cyan glow */
    radial-gradient(ellipse 65% 50% at 50% 50%, rgba(var(--neon-2-rgb), 0.12) 0%, transparent 65%),
    /* Vignette */
    radial-gradient(ellipse 95% 95% at 50% 55%, transparent 48%, rgba(0,0,0,0.6) 100%),
    /* Base felt — deeper, richer */
    radial-gradient(ellipse 100% 100% at 50% 50%, var(--felt-mid) 0%, var(--felt) 55%, var(--felt-dark) 100%),
    /* Subtle weave */
    repeating-linear-gradient(0deg,  transparent 0 2px, rgba(0,0,0,0.05) 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,0.04) 2px 3px) !important;
  border-radius: 120px / 80px !important;
  padding: 28px 36px !important;
  /* Multi-stop rim — dark groove, neon piping, glow */
  box-shadow:
    /* inside-out rim */
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(0,0,0,0.7),
    inset 0 0 0 3px rgba(var(--neon-2-rgb), 0.6),
    inset 0 0 0 4px rgba(0,0,0,0.55),
    inset 0 0 0 6px rgba(var(--neon-1-rgb), 0.35),
    inset 0 0 0 8px rgba(0,0,0,0.85),
    inset 0 0 100px rgba(0,0,0,0.55),
    inset 0 -40px 80px rgba(0,0,0,0.35),
    /* outer drop + atmospheric */
    0 40px 100px rgba(0,0,0,0.9),
    0 0 80px rgba(var(--neon-1-rgb), 0.15),
    0 0 160px rgba(var(--neon-2-rgb), 0.12) !important;
}

/* Table watermark — neutral suit emblem, KKTC-friendly (CYPWARE removed) */
#table::before {
  content: '♠ ♥ ♣ ♦';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.05);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  white-space: nowrap;
  text-indent: 0.4em;
}
/* Sub-mark under main */
#table::after {
  content: '◆  GÖNYELİ  ◆';
  position: absolute;
  top: calc(50% + clamp(2rem, 3.8vw, 3.4rem));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.55em;
  color: rgba(255,255,255,0.08);
  pointer-events: none;
  z-index: 0;
  text-indent: 0.55em;
  white-space: nowrap;
}

/* Round info — top-left */
#round-info {
  top: 78px !important;
  left: 24px !important;
  padding: 12px 16px !important;
  min-width: 140px !important;
  gap: 6px !important;
  border-radius: 14px !important;
  font-size: 0.78rem !important;
  background:
    linear-gradient(160deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5)) !important;
  border: 1px solid rgba(var(--neon-2-rgb), 0.25) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
#round-info::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-2), transparent);
  opacity: 0.5;
}
#round-info span { font-family: var(--body-font); }
#ri-round {
  font-family: var(--display-font-2) !important;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: #fff !important;
}
#ri-dealer { color: var(--ink-3) !important; font-size: 0.72rem; }
#ri-trump  { letter-spacing: 0.5px; font-weight: 700; }

/* Game back button */
#game-back-btn {
  top: 22px !important;
  left: 24px !important;
  padding: 8px 16px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.5px !important;
}

/* Trump badge — top-right luxe medallion */
#trump-badge {
  top: 22px !important;
  right: 24px !important;
  padding: 14px 22px !important;
  min-width: 100px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--accent-warm-rgb), 0.18) 0%, transparent 70%),
    linear-gradient(160deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 100%) !important;
}
#trump-badge-card {
  display: none;
  margin: 0;
}
#trump-badge-card .card {
  transform: scale(0.85);
  transform-origin: center center;
}
#trump-badge.trump-card-only {
  padding: 10px 12px !important;
  min-width: 0 !important;
}
#trump-badge.trump-card-only #trump-badge-suit,
#trump-badge.trump-card-only #trump-badge-name { display: none !important; }
#trump-badge-suit {
  font-size: 2.6rem !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
}
#trump-badge.trump-red #trump-badge-suit { filter: drop-shadow(0 0 18px rgba(var(--neon-1-rgb), 0.7)); }
#trump-badge.trump-black #trump-badge-suit { filter: drop-shadow(0 0 18px rgba(var(--neon-2-rgb), 0.7)); color: #fff; }
#trump-badge-name {
  margin-top: 6px !important;
  font-size: 0.6rem !important;
  letter-spacing: 2px !important;
  color: var(--ink-3) !important;
  font-family: var(--body-font);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   PLAYER AREAS — refined chip pills
   ───────────────────────────────────────────────────────────── */
.pinfo {
  padding: 6px 18px 6px 6px !important;
  border-radius: 100px !important;
  font-size: 0.82rem !important;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.78), rgba(0,0,0,0.6)) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, border-color 0.25s;
}
.pavatar {
  width: 38px !important;
  height: 38px !important;
  font-size: 1.05rem !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.25) !important;
}
.pname-label {
  font-size: 0.88rem !important;
  letter-spacing: 0.3px;
  font-family: var(--body-font);
}
.pbid-label {
  font-size: 0.95rem !important;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.5);
}

/* Active turn — vibrant neon pulse */
.pinfo.is-turn {
  transform: scale(1.04);
  border: 1.5px solid var(--neon-1) !important;
  background:
    linear-gradient(135deg, rgba(var(--neon-1-rgb), 0.22), rgba(0,0,0,0.6)) !important;
}
.pinfo.is-turn .pavatar {
  border-color: rgba(255,255,255,0.4) !important;
  box-shadow:
    0 0 0 2px rgba(var(--neon-1-rgb), 0.6),
    0 6px 16px rgba(var(--neon-1-rgb), 0.4),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.3) !important;
}
@keyframes turnPulseNeon {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--neon-1-rgb), 0.65), 0 12px 32px rgba(var(--neon-1-rgb), 0.4), inset 0 1px 0 rgba(255,255,255,0.1); }
  50%     { box-shadow: 0 0 0 12px rgba(var(--neon-1-rgb), 0),    0 12px 36px rgba(var(--neon-1-rgb), 0.65), inset 0 1px 0 rgba(255,255,255,0.1); }
}
.pinfo.is-turn { animation: turnPulseNeon 1.6s ease-in-out infinite !important; }

/* Name blinks/glows when it's that player's turn */
@keyframes turnNameFlash {
  0%, 100% {
    color: #fff;
    text-shadow:
      0 0 4px rgba(var(--neon-1-rgb), 0.8),
      0 0 14px rgba(var(--neon-1-rgb), 0.9),
      0 0 28px rgba(var(--neon-1-rgb), 0.7);
  }
  50% {
    color: rgba(255,255,255,0.55);
    text-shadow:
      0 0 2px rgba(var(--neon-1-rgb), 0.2),
      0 0 6px rgba(var(--neon-1-rgb), 0.2);
  }
}
.pinfo.is-turn .pname-label {
  animation: turnNameFlash 1.3s ease-in-out infinite;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

/* Dealer chip — a small medallion below the avatar */
.pinfo.is-dealer .pavatar::before {
  content: 'D' !important;
  width: 16px !important; height: 16px !important;
  font-size: 0.62rem !important;
  background: linear-gradient(135deg, var(--accent-warm), #b88410) !important;
  border: 1.5px solid rgba(0,0,0,0.6) !important;
  box-shadow: 0 0 10px rgba(var(--accent-warm-rgb), 0.7), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  color: #1a0e00 !important;
  font-weight: 900;
}

/* Bid badge variants: shows bid (gold), shows tricks won (cyan) */
.pbid-label.has-bid {
  color: var(--accent-warm) !important;
}
.pbid-label.is-bust {
  color: var(--bad) !important;
  text-shadow: 0 0 12px rgba(255,64,112,0.5) !important;
}
.pbid-label.is-made {
  color: var(--good) !important;
  text-shadow: 0 0 12px rgba(40,224,140,0.5) !important;
}

/* ─────────────────────────────────────────────────────────────
   CARDS — premium hand
   ───────────────────────────────────────────────────────────── */

/* Smooth corner geometry + ivory paper */
.card {
  border-radius: var(--radius) !important;
  background-color: #ffffff !important;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #fbf6e9 100%) !important;
  border: 1px solid #d6c388 !important;
  outline: 1px solid rgba(var(--accent-warm-rgb), 0.25) !important;
  outline-offset: -4px !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),
    0 2px 0 rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.85),
    inset 0 -8px 22px rgba(255,221,140,0.16) !important;
  isolation: isolate;
  transition:
    transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.22s,
    filter 0.22s;
}

/* When cards overlap heavily (hand), reduce shadow so they don't muddy each other */
.hand .card,
.hand .card-back {
  box-shadow:
    0 4px 10px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.85) !important;
}
.hand-vert .card,
.hand-vert .card-back {
  box-shadow:
    0 3px 8px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.85) !important;
}
/* Restore on hover */
.hand .card.playable:hover {
  box-shadow:
    0 24px 48px rgba(0,0,0,0.75),
    0 0 0 2.5px var(--neon-1),
    0 0 40px rgba(var(--neon-1-rgb), 0.7),
    inset 0 0 0 1px rgba(255,255,255,0.9) !important;
}
.card::before, .card::after {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 900;
  font-size: calc(var(--card-h) * 0.16) !important;
  letter-spacing: -0.5px;
  line-height: 1.08;
  top: 6px !important;
  left: 8px !important;
}
.card::after { top: auto !important; left: auto !important; bottom: 6px !important; right: 8px !important; }
.card .c-suit-bg {
  font-size: calc(var(--card-h) * 0.5) !important;
  opacity: 0.07 !important;
  filter: blur(0.3px);
}

/* Hand overlap — tighter for premium feel */
.hand .card, .hand .card-back { margin-left: var(--h-overlap, -42px); }
.hand-vert .card, .hand-vert .card-back { margin-top: -56px; }

/* Hover = lift, glow, slight rotation reset */
.card.playable {
  cursor: pointer;
  filter: brightness(1.02);
}
.card.playable:hover {
  transform: translateY(-22px) scale(1.08) !important;
  filter: brightness(1.06);
  box-shadow:
    0 24px 48px rgba(0,0,0,0.75),
    0 0 0 2.5px var(--neon-1),
    0 0 40px rgba(var(--neon-1-rgb), 0.7),
    inset 0 0 0 1px rgba(255,255,255,0.9) !important;
  z-index: 50 !important;
}
.card.not-playable {
  opacity: 0.78 !important;
  filter: saturate(0.6) brightness(0.78);
  cursor: not-allowed;
}
.card.red  { color: #e51a3c !important; }
.card.black { color: #0e0e14 !important; }
[data-theme="crimson"] .card.red { color: #ff1e4d !important; }
[data-theme="emerald"] .card.red { color: #e02a40 !important; }
[data-theme="violet"]  .card.red { color: #ff3d8a !important; }

/* Back of card — luxe damask plate */
.card-back {
  border-radius: var(--radius) !important;
  background:
    /* fine micro-weave */
    repeating-linear-gradient(45deg,
      transparent 0 3px,
      rgba(var(--neon-2-rgb), 0.05) 3px 4px),
    repeating-linear-gradient(-45deg,
      transparent 0 3px,
      rgba(var(--neon-1-rgb), 0.05) 3px 4px),
    /* radial wash */
    radial-gradient(ellipse 100% 70% at 50% 40%, rgba(var(--neon-1-rgb), 0.18) 0%, transparent 70%),
    linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 60%, var(--bg-1) 100%) !important;
  border: 1px solid rgba(var(--accent-warm-rgb), 0.35) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.7),
    0 2px 0 rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(var(--neon-2-rgb), 0.15),
    inset 0 1px 0 rgba(var(--accent-warm-rgb), 0.18),
    inset 0 -10px 24px rgba(0,0,0,0.35) !important;
}
.card-back::before {
  inset: 6px !important;
  border: 1px solid rgba(var(--accent-warm-rgb), 0.5) !important;
  border-radius: 6px !important;
}
.card-back::after {
  content: '✦' !important;
  font-size: calc(var(--card-h) * 0.32) !important;
  color: rgba(var(--accent-warm-rgb), 0.5) !important;
  text-shadow:
    0 0 14px rgba(var(--accent-warm-rgb), 0.6),
    0 0 28px rgba(var(--neon-1-rgb), 0.3);
}

/* Card-sm (trick cards) */
.card-sm { box-shadow:
  0 12px 28px rgba(0,0,0,0.7),
  0 0 0 1px rgba(0,0,0,0.4),
  inset 0 0 0 1px rgba(255,255,255,0.85) !important;
}
.card-back.card-sm::after { font-size: calc(var(--card-h-sm) * 0.32) !important; }

/* ─────────────────────────────────────────────────────────────
   CENTER / TRICK AREA
   ───────────────────────────────────────────────────────────── */
#center-area { gap: 12px !important; padding: 8px 12px !important; }

#center-area::before {
  inset: -28px 24px !important;
  border: 1px solid rgba(var(--neon-2-rgb), 0.2) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.4),
    0 0 32px rgba(var(--neon-2-rgb), 0.1) !important;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,0,0,0.25) 0%, transparent 70%);
}
#center-area::after {
  content: '';
  position: absolute;
  inset: -16px 36px;
  border: 1px dashed rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}

#trick-cards {
  gap: 6px !important;
  min-height: 90px !important;
  position: relative;
  z-index: 1;
}
.trick-slot .tc-name {
  font-size: 0.66rem !important;
  color: var(--ink-3) !important;
  font-family: var(--body-font);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Winning trick card briefly highlighted */
.trick-slot.is-winner .card,
.trick-slot.is-winner .card-back {
  animation: trickWin 1s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes trickWin {
  0%   { transform: scale(1)    rotate(0); box-shadow: 0 0 0 0 rgba(var(--neon-1-rgb), 0); }
  35%  { transform: scale(1.16) rotate(-2deg); box-shadow: 0 0 0 3px var(--neon-1), 0 0 36px rgba(var(--neon-1-rgb), 0.7), 0 12px 30px rgba(0,0,0,0.7); }
  100% { transform: scale(1)    rotate(0); box-shadow: 0 12px 28px rgba(0,0,0,0.7); }
}

/* Cards entering trick area */
@keyframes trickPlayIn {
  from { transform: translateY(-30px) scale(0.85); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
.trick-slot .card,
.trick-slot .card-back {
  animation: trickPlayIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

/* Status message — refined */
#status-msg {
  font-family: var(--display-font-2);
  font-size: 0.95rem !important;
  font-weight: 600;
  color: var(--ink-1) !important;
  letter-spacing: 0.5px;
  min-height: 24px !important;
  text-shadow: 0 0 12px rgba(var(--neon-2-rgb), 0.4), 0 2px 8px rgba(0,0,0,0.9) !important;
}

/* ─────────────────────────────────────────────────────────────
   BID CONTROLS — premium betting feel
   ───────────────────────────────────────────────────────────── */
#bid-controls {
  padding: 14px 18px 12px !important;
  background:
    linear-gradient(160deg, rgba(0,0,0,0.7), rgba(0,0,0,0.45)) !important;
  border: 1px solid rgba(var(--neon-1-rgb), 0.3) !important;
  border-radius: 18px !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 28px rgba(var(--neon-1-rgb), 0.18) !important;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
#bid-controls::before {
  content: '';
  position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-1), transparent);
  opacity: 0.6;
}
#bid-prompt {
  font-family: var(--display-font-2) !important;
  font-size: 0.78rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  color: var(--accent-warm) !important;
  margin-bottom: 10px !important;
  text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.4);
}
.bid-btn {
  width: 42px !important;
  height: 42px !important;
  font-size: 0.95rem !important;
  font-family: var(--body-font);
  font-weight: 700;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.4)) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.bid-btn:hover:not(:disabled):not(.forbidden) {
  background: linear-gradient(160deg, var(--neon-1), #b01058) !important;
  border-color: var(--neon-1) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow:
    0 10px 24px rgba(var(--neon-1-rgb), 0.6),
    0 0 24px rgba(var(--neon-1-rgb), 0.5),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.bid-btn:active { transform: translateY(-1px) scale(1.04) !important; }
.bid-btn.forbidden {
  background: rgba(255,64,112,0.06) !important;
  border-color: rgba(255,64,112,0.2) !important;
  color: rgba(255,64,112,0.4) !important;
  text-decoration: line-through;
}

/* Timer */
#timer-wrap {
  margin-top: 6px !important;
  width: 240px !important;
}
#timer-bar {
  height: 6px !important;
  background: rgba(0,0,0,0.5) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  border-radius: 999px !important;
}
#timer-fill {
  background: linear-gradient(90deg, var(--neon-2), var(--neon-1)) !important;
  box-shadow: 0 0 12px rgba(var(--neon-2-rgb), 0.6) !important;
  border-radius: 999px !important;
  transition: width 0.95s linear, background 0.3s;
}
#timer-fill.urgent {
  background: linear-gradient(90deg, #ff7044, var(--bad)) !important;
  box-shadow: 0 0 18px rgba(255,64,112,0.7) !important;
  animation: urgentPulse 0.7s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.55; }
}

/* ─────────────────────────────────────────────────────────────
   SCOREBOARD — clean data viz
   ───────────────────────────────────────────────────────────── */
#scoreboard {
  width: 320px !important;
  border-radius: 20px !important;
}
#sb-header {
  padding: 18px 20px !important;
  font-size: 0.78rem !important;
  letter-spacing: 3px !important;
  font-weight: 800;
}
#sb-note {
  font-size: 0.62rem !important;
  letter-spacing: 0.5px !important;
  font-family: var(--body-font);
  color: var(--ink-3) !important;
}
#sb-table { font-size: 0.78rem !important; }
#sb-table th {
  padding: 10px 4px !important;
  font-size: 0.62rem !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55) !important;
}
#sb-table th:first-child { font-size: 0.6rem !important; }
#sb-table td {
  padding: 7px 4px !important;
  font-family: var(--body-font);
  font-variant-numeric: tabular-nums;
}
#sb-table td:first-child {
  font-size: 0.7rem !important;
  font-weight: 700;
  color: var(--ink-3) !important;
}
.sb-bid { color: var(--ink-2) !important; }
.sb-hit {
  color: var(--good) !important;
  text-shadow: 0 0 8px rgba(40,224,140,0.4);
  font-weight: 700;
}
.sb-miss-x {
  background: rgba(255,64,112,0.15);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}
#sb-table tr.current-row td {
  background: rgba(var(--neon-1-rgb), 0.08) !important;
  box-shadow: inset 3px 0 0 var(--neon-1);
}
#sb-table tfoot td {
  font-size: 0.92rem !important;
  font-weight: 800;
  font-family: var(--display-font-2) !important;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-warm-rgb), 0.05)) !important;
}
.sb-bid-live {
  animation: sbLivePulse 0.5s cubic-bezier(0.34,1.56,0.64,1);
  color: var(--accent-warm) !important;
  text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.6);
}
@keyframes sbLivePulse {
  from { transform: scale(1.6); opacity: 0.3; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   ANIMATIONS — dealing, playing
   ───────────────────────────────────────────────────────────── */

/* Deal-in: cards swirl in from the deck (center) */
@keyframes dealInLuxe {
  0%   { opacity: 0; transform: translateY(-90px) scale(0.4) rotate(-14deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0)    scale(1)   rotate(0); }
}
.hand .card,
.hand .card-back {
  animation: dealInLuxe 0.6s cubic-bezier(0.34,1.4,0.64,1) backwards;
}
/* Stagger via nth-child delays (cinematic ~75ms apart) */
.hand .card:nth-child(1),  .hand .card-back:nth-child(1)  { animation-delay: 0.04s; }
.hand .card:nth-child(2),  .hand .card-back:nth-child(2)  { animation-delay: 0.11s; }
.hand .card:nth-child(3),  .hand .card-back:nth-child(3)  { animation-delay: 0.19s; }
.hand .card:nth-child(4),  .hand .card-back:nth-child(4)  { animation-delay: 0.27s; }
.hand .card:nth-child(5),  .hand .card-back:nth-child(5)  { animation-delay: 0.35s; }
.hand .card:nth-child(6),  .hand .card-back:nth-child(6)  { animation-delay: 0.43s; }
.hand .card:nth-child(7),  .hand .card-back:nth-child(7)  { animation-delay: 0.51s; }
.hand .card:nth-child(8),  .hand .card-back:nth-child(8)  { animation-delay: 0.59s; }
.hand .card:nth-child(9),  .hand .card-back:nth-child(9)  { animation-delay: 0.67s; }
.hand .card:nth-child(10), .hand .card-back:nth-child(10) { animation-delay: 0.75s; }
.hand .card:nth-child(11), .hand .card-back:nth-child(11) { animation-delay: 0.83s; }
.hand .card:nth-child(12), .hand .card-back:nth-child(12) { animation-delay: 0.91s; }
.hand .card:nth-child(13), .hand .card-back:nth-child(13) { animation-delay: 0.99s; }

/* Disable animation reset on hover (only on initial render) */
.card.playable:hover { animation: none !important; }

/* ─────────────────────────────────────────────────────────────
   MODAL — trump choose
   ───────────────────────────────────────────────────────────── */
#trump-modal {
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px);
}
#trump-modal .modal-box {
  min-width: 360px;
  padding: 36px 40px !important;
}
.trump-buttons { gap: 14px !important; flex-wrap: wrap; justify-content: center; }
.trump-btn {
  padding: 18px 14px !important;
  min-width: 92px !important;
  border-radius: 14px !important;
  font-size: 1.05rem !important;
  font-family: var(--body-font) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.4)) !important;
  border: 1.5px solid rgba(255,255,255,0.14) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.trump-btn::first-letter { font-size: 1.8em; line-height: 1; }
.trump-btn[data-suit="hearts"],
.trump-btn[data-suit="diamonds"] { color: #ff5077 !important; }
.trump-btn[data-suit="spades"],
.trump-btn[data-suit="clubs"]    { color: #fff !important; }
.trump-btn:hover {
  transform: translateY(-4px) scale(1.04) !important;
  border-color: var(--neon-1) !important;
  background: linear-gradient(160deg, rgba(var(--neon-1-rgb), 0.2), rgba(0,0,0,0.5)) !important;
  box-shadow: 0 14px 32px rgba(var(--neon-1-rgb), 0.4), 0 0 36px rgba(var(--neon-1-rgb), 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────
   GAME OVER OVERLAY
   ───────────────────────────────────────────────────────────── */
#game-over-overlay { background: rgba(0,0,0,0.75); backdrop-filter: blur(14px); }
.go-box {
  padding: 40px 52px !important;
  min-width: 420px !important;
  border: 1.5px solid rgba(var(--neon-1-rgb), 0.55) !important;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(var(--neon-1-rgb), 0.18) 0%, transparent 70%),
    linear-gradient(160deg, var(--bg-2) 0%, var(--bg-0) 100%) !important;
}
.go-crown { font-size: 3.4rem !important; filter: drop-shadow(0 0 24px var(--accent-warm)); }
.go-box h2 { font-size: 2.2rem !important; }

/* ─────────────────────────────────────────────────────────────
   ROUND OVERLAY (round result mini popup)
   ───────────────────────────────────────────────────────────── */
#round-overlay { background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); }
.round-result-box {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-0)) !important;
  border: 1px solid rgba(var(--accent-warm-rgb), 0.4) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 40px rgba(var(--accent-warm-rgb), 0.2) !important;
  border-radius: 18px !important;
  padding: 28px 40px !important;
}
.round-result-box h3 {
  font-family: var(--display-font-2);
  color: var(--accent-warm) !important;
  letter-spacing: 2px;
}
.rr-item.hit strong { color: var(--good) !important; }
.rr-item.miss strong { color: var(--bad) !important; }

/* ─────────────────────────────────────────────────────────────
   LARGER VIEWPORT POLISH
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1400px) {
  :root {
    --card-w: 92px;
    --card-h: 128px;
    --card-w-sm: 70px;
    --card-h-sm: 98px;
  }
  #scoreboard { width: 360px !important; }
}
@media (min-width: 1700px) {
  :root {
    --card-w: 100px;
    --card-h: 140px;
    --card-w-sm: 78px;
    --card-h-sm: 110px;
  }
}

/* Tighter screen padding for compact density */
[data-density="compact"] #game-layout { padding: 10px; gap: 10px; }
[data-density="compact"] #scoreboard { width: 280px !important; }
[data-density="compact"] #table { padding: 20px 26px !important; }
[data-density="compact"] :root { --card-w: 74px; --card-h: 104px; }

[data-density="spacious"] #game-layout { padding: 24px; gap: 24px; }
[data-density="spacious"] #scoreboard { width: 360px !important; }
[data-density="spacious"] #table { padding: 36px 44px !important; }

/* ─────────────────────────────────────────────────────────────
   SCOREBOARD POLISH — tighter, more legible, with totals row
   ───────────────────────────────────────────────────────────── */
#scoreboard {
  width: 300px !important;
  border-radius: 18px !important;
}
#sb-table { font-size: 0.8rem !important; }
#sb-table th {
  padding: 8px 6px !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%) !important;
  border-bottom: 1px solid var(--line-2) !important;
}
#sb-table th:first-child { color: var(--accent-warm) !important; font-weight: 800 !important; }
#sb-table td {
  padding: 7px 5px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  font-variant-numeric: tabular-nums;
}
#sb-table td:first-child {
  font-family: var(--editorial-2);
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  color: var(--accent-warm) !important;
  text-shadow: 0 0 8px rgba(var(--accent-warm-rgb), 0.3);
}
#sb-table tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
#sb-table tr.current-row td,
.sb-current td {
  background: linear-gradient(90deg,
    rgba(var(--neon-1-rgb), 0.18) 0%,
    rgba(var(--neon-1-rgb), 0.05) 100%) !important;
  box-shadow: inset 3px 0 0 var(--neon-1) !important;
}
.sb-hit {
  color: var(--good) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(40,224,140,0.4);
}
.sb-miss { color: var(--ink-3) !important; }
.sb-miss-x {
  color: var(--bad) !important;
  font-weight: 800 !important;
  margin-right: 2px;
}
.sb-bid-live {
  color: var(--accent-warm) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.5);
}
.sb-pending { color: var(--ink-4) !important; opacity: 0.5; }
#sb-table tfoot td {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.85) 100%) !important;
  color: var(--accent-warm) !important;
  border-top: 2px solid rgba(var(--accent-warm-rgb), 0.45) !important;
  padding: 10px 6px !important;
  font-family: var(--editorial-2);
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.4);
}

/* ─────────────────────────────────────────────────────────────
   ROUND RESULT OVERLAY — auto-advance ring + polish
   ───────────────────────────────────────────────────────────── */
.btn-next.auto-advance {
  position: relative;
  overflow: hidden;
}
.btn-next.auto-advance::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  transform-origin: left center;
  animation: btnNextProgress 3s linear forwards;
  pointer-events: none;
  z-index: 0;
}
.btn-next.auto-advance > * { position: relative; z-index: 1; }
@keyframes btnNextProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Sides: ensure vertical hands fit nicely */
.side-player { flex: 0 0 88px !important; }
.hand-vert {
  position: relative;
  padding: 4px;
}

/* Mobile: shrink trump badge to compact pill so it doesn't eat table space */
@media (max-width: 760px) {
  #trump-badge {
    top: 8px !important;
    right: 8px !important;
    padding: 6px 10px !important;
    min-width: 56px !important;
    border-radius: 12px !important;
  }
  #trump-badge-suit {
    font-size: 1.4rem !important;
  }
  #trump-badge-name {
    font-size: 0.5rem !important;
    margin-top: 2px !important;
    letter-spacing: 1px !important;
  }
  #trump-badge-card .card {
    transform: scale(0.5);
  }
}

/* ─────────────────────────────────────────────────────────────
   ON-TABLE DEALER DRAW — spread + per-player drawn slots
   ───────────────────────────────────────────────────────────── */
#table-draw-banner {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}
.tdb-title {
  font-family: var(--display-font-2, var(--display-font));
  font-size: 0.78rem;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: var(--neon-2);
  text-shadow: 0 0 16px rgba(var(--neon-2-rgb), 0.6);
  font-weight: 800;
}
.tdb-sub {
  margin-top: 6px;
  font-family: var(--body-font);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--ink-2);
}

#table-draw-grid {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 32%;
  bottom: 32%;
  z-index: 30;
  pointer-events: none;
}
#table-draw-grid .draw-card-wrap { pointer-events: auto; }

/* Per-player drawn-card slot, sits in front of the seat */
.drawn-slot {
  position: absolute;
  z-index: 36;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.drawn-slot-top    { top: 14%; left: 50%; transform: translateX(-50%); }
.drawn-slot-bottom { bottom: 16%; left: 50%; transform: translateX(-50%); }
.drawn-slot-left   { left: 12%; top: 50%; transform: translateY(-50%); }
.drawn-slot-right  { right: 12%; top: 50%; transform: translateY(-50%); }

.drawn-card {
  width: 58px; height: 82px;
  border-radius: 8px;
  background: linear-gradient(160deg, #f8f4ea 0%, #e6dcc8 100%);
  border: 1px solid rgba(60,32,8,0.5);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--body-font);
  font-weight: 800;
  color: #222;
}
.drawn-card.red { color: #c1283a; }
.drawn-card.black { color: #1a1a1a; }
.drawn-card .dc-val { font-size: 1.4rem; line-height: 1; }
.drawn-card .dc-suit { font-size: 1rem; line-height: 1; margin-top: 2px; }

.drawn-name {
  font-family: var(--body-font);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  font-weight: 700;
}

.drawn-winner .drawn-card {
  box-shadow:
    0 0 0 2px var(--accent-warm),
    0 0 24px rgba(var(--accent-warm-rgb), 0.7),
    0 8px 24px rgba(0,0,0,0.6);
  animation: drawnWinnerPulse 1.2s ease-in-out infinite;
}
@keyframes drawnWinnerPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}
.drawn-winner .drawn-name {
  color: var(--accent-warm);
  text-shadow: 0 0 8px rgba(var(--accent-warm-rgb), 0.6);
}