@charset "UTF-8";
/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Card geometry (legacy compat) ── */
  --card-w: 76px;
  --card-h: 107px;
  --card-w-sm: 54px;
  --card-h-sm: 76px;
  --radius: 8px;

  /* ── Legacy semantic tokens (themed below) ── */
  --felt: #0a3a28;
  --felt-dark: #02110b;
  --felt-mid: #0e5236;
  --gold: #f5d24a;
  --gold-dim: #8c6a14;
  --red: #ff3158;
  --black: #0a0a0d;
  --white: #fff;
  --shadow: 0 12px 36px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,255,255,0.05);
  --wood1: #2a1a48;
  --wood2: #160a30;
  --wood3: #07041a;

  /* ── New design tokens (Neon Royale default) ── */
  --bg-0: #050309;
  --bg-1: #0a0712;
  --bg-2: #120a22;
  --bg-3: #1b1130;
  --ink-1: #ffffff;
  --ink-2: rgba(255,255,255,0.72);
  --ink-3: rgba(255,255,255,0.46);
  --ink-4: rgba(255,255,255,0.22);
  --line-1: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.16);

  --neon-1: #ff2d8b;        /* hot magenta */
  --neon-1-rgb: 255,45,139;
  --neon-2: #00e0ff;        /* electric cyan */
  --neon-2-rgb: 0,224,255;
  --accent-warm: #ffc24a;   /* gold/champagne accent */
  --accent-warm-rgb: 255,194,74;
  --accent-cool: #a06bff;   /* royal violet */
  --good: #28e08c;
  --bad: #ff4070;

  /* Glass surfaces */
  --glass-1: rgba(20,12,38,0.62);
  --glass-2: rgba(28,18,52,0.55);
  --glass-blur: 18px;

  /* Glow recipes */
  --glow-1: 0 0 28px rgba(var(--neon-1-rgb), 0.45);
  --glow-2: 0 0 28px rgba(var(--neon-2-rgb), 0.45);
  --glow-warm: 0 0 28px rgba(var(--accent-warm-rgb), 0.45);

  /* Typography */
  --display-font: 'Cinzel Decorative', 'Cinzel', 'Playfair Display', serif;
  --display-font-2: 'Cinzel', 'Playfair Display', serif;
  --body-font: 'Outfit', 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Density */
  --pad-screen: 28px;
  --gap-1: 12px;
  --gap-2: 18px;
  --gap-3: 28px;
}

/* ── Theme: CRIMSON HEAT (Vegas casino night) ── */
[data-theme="crimson"] {
  --bg-0: #0d0306;
  --bg-1: #16060a;
  --bg-2: #260a12;
  --bg-3: #3a1018;
  --neon-1: #ff1e4d;
  --neon-1-rgb: 255,30,77;
  --neon-2: #ff8c2a;
  --neon-2-rgb: 255,140,42;
  --accent-warm: #ffd066;
  --accent-warm-rgb: 255,208,102;
  --accent-cool: #ff5a87;
  --felt: #4a0a18;
  --felt-dark: #1a0408;
  --felt-mid: #5a0e22;
  --wood1: #3a0a14;
  --wood2: #1a0408;
  --wood3: #0a0204;
  --gold: #ffd066;
  --glass-1: rgba(40,8,16,0.66);
  --glass-2: rgba(60,12,24,0.58);
}

/* ── Theme: EMERALD HALL (Monte Carlo) ── */
[data-theme="emerald"] {
  --bg-0: #02100a;
  --bg-1: #04180f;
  --bg-2: #082818;
  --bg-3: #0e3a24;
  --neon-1: #36ffb0;
  --neon-1-rgb: 54,255,176;
  --neon-2: #ffe28a;
  --neon-2-rgb: 255,226,138;
  --accent-warm: #f0d28a;
  --accent-warm-rgb: 240,210,138;
  --accent-cool: #6affc0;
  --felt: #0a4a2c;
  --felt-dark: #02180e;
  --felt-mid: #0e5e38;
  --wood1: #1a1208;
  --wood2: #0a0904;
  --wood3: #050302;
  --gold: #f0d28a;
  --glass-1: rgba(8,28,18,0.66);
  --glass-2: rgba(14,42,28,0.58);
}

/* ── Theme: VIOLET STORM (cyberpunk luxury) ── */
[data-theme="violet"] {
  --bg-0: #04030c;
  --bg-1: #0a0820;
  --bg-2: #14102e;
  --bg-3: #221848;
  --neon-1: #b04bff;
  --neon-1-rgb: 176,75,255;
  --neon-2: #4ad2ff;
  --neon-2-rgb: 74,210,255;
  --accent-warm: #e2c1ff;
  --accent-warm-rgb: 226,193,255;
  --accent-cool: #4ad2ff;
  --felt: #1a0e3e;
  --felt-dark: #060418;
  --felt-mid: #241458;
  --wood1: #2a1855;
  --wood2: #150a2c;
  --wood3: #060418;
  --gold: #e0c4ff;
  --glass-1: rgba(20,14,46,0.66);
  --glass-2: rgba(30,20,68,0.58);
}

/* ── Density modes ── */
[data-density="compact"]  { --pad-screen: 18px; --gap-1: 8px;  --gap-2: 12px; --gap-3: 20px; }
[data-density="spacious"] { --pad-screen: 40px; --gap-1: 16px; --gap-2: 26px; --gap-3: 40px; }

/* ── Animation level ── */
[data-anim="low"] *, [data-anim="low"] *::before, [data-anim="low"] *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.1s !important;
}
[data-anim="low"] .mm-bg-card,
[data-anim="low"] .bg-orb,
[data-anim="low"] .bg-grid,
[data-anim="low"] .neon-ring { display: none !important; }

body {
  font-family: var(--body-font);
  background: var(--bg-0);
  color: var(--white);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.screen { display: none; width: 100vw; height: 100vh; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ===== MAIN MENU ===== */
#main-menu {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #0e1c30 0%, #05080e 70%);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* Floating decorative suit cards in background */
#mm-bg-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.mm-bg-card {
  position: absolute;
  font-size: 12rem;
  font-weight: 900;
  color: rgba(255,255,255,0.018);
  user-select: none;
  animation: mmFloat 18s ease-in-out infinite;
}
.mm-bg-card.c1 { top: 8%;  left: 6%;  transform: rotate(-15deg); animation-delay: 0s;  }
.mm-bg-card.c2 { top: 22%; right: 5%; transform: rotate(12deg);  animation-delay: -4s; color: rgba(232,90,90,0.018); }
.mm-bg-card.c3 { bottom: 18%; left: 8%; transform: rotate(8deg); animation-delay: -8s; }
.mm-bg-card.c4 { bottom: 6%; right: 9%; transform: rotate(-10deg); animation-delay: -12s; color: rgba(232,90,90,0.018); }
@keyframes mmFloat {
  0%,100% { transform: translateY(0)   rotate(var(--r,0deg)); }
  50%     { transform: translateY(-18px) rotate(var(--r,0deg)); }
}

/* TOP BAR */
#mm-topbar {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(8,12,20,0.65);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 5;
}
#mm-brand {
  font-size: 1.05rem; font-weight: 900; letter-spacing: 3px;
  color: #fff; line-height: 1;
}
#mm-brand span { color: var(--gold); }
#mm-topbar-right {
  display: flex; align-items: center; gap: 12px;
}
.mm-coin {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(232,197,92,0.08);
  border: 1px solid rgba(232,197,92,0.25);
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.mm-coin-icon { font-size: 0.95rem; line-height: 1; }
.mm-user {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.mm-user:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); }
.mm-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #c08820);
  color: #1a0e00; font-weight: 900; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mm-user-info { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.mm-user-name { font-size: 0.78rem; font-weight: 700; color: #fff; }
.mm-user-level {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.62rem; color: rgba(255,255,255,0.4);
}
.mm-lv { font-weight: 700; color: var(--gold); letter-spacing: 0.04em; }
.mm-xp-bar {
  display: inline-block;
  width: 60px; height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px; overflow: hidden;
}
.mm-xp-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), #c08820);
  border-radius: 999px;
}
.mm-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.mm-icon-btn:hover {
  border-color: rgba(232,197,92,0.5);
  color: var(--gold);
  transform: rotate(45deg);
}

/* CONTENT WRAPPER */
#mm-content {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 28px 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 1;
}

/* HERO */
#mm-hero { text-align: center; padding: 12px 0 4px; }
#mm-logo {
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: 8px;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 60px rgba(232,197,92,0.15);
}
#mm-logo span { color: var(--gold); }
#mm-sub {
  color: rgba(255,255,255,0.3);
  font-size: 0.78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 10px;
}

/* LIVE STATS STRIP */
#mm-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  padding: 12px 22px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(232,197,92,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto;
}
.mm-stat {
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.mm-stat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74,222,128,0.7);
  animation: mmPulse 1.6s ease-in-out infinite;
  align-self: center;
  margin-right: 2px;
}
@keyframes mmPulse {
  0%,100% { opacity: 1;   box-shadow: 0 0 8px rgba(74,222,128,0.7); }
  50%     { opacity: 0.6; box-shadow: 0 0 14px rgba(74,222,128,1); }
}
.mm-stat-val {
  font-size: 1.05rem; font-weight: 800; color: #fff;
}
.mm-stat-label {
  font-size: 0.65rem; font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.mm-stat-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
}

/* ACTIVE GAMES (2-col grid) */
#mm-active-games {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.mm-game-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 22px 24px 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.22s, border-color 0.22s, background 0.22s, box-shadow 0.22s;
}
.mm-card-glow {
  position: absolute;
  inset: -1px;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(232,197,92,0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.mm-game-card.active { cursor: pointer; border-color: rgba(232,197,92,0.25); }
.mm-game-card.active:hover {
  transform: translateY(-4px);
  border-color: rgba(232,197,92,0.55);
  background: linear-gradient(160deg, rgba(232,197,92,0.08) 0%, rgba(255,255,255,0.01) 100%);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
.mm-game-card.active:hover .mm-card-glow { opacity: 1; }
.mm-game-card.active:hover .mm-game-icon { transform: scale(1.06); }

.mm-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.mm-game-icon {
  display: grid; grid-template-columns: repeat(2, auto); gap: 2px 6px;
  font-size: 1.6rem; line-height: 1;
  color: var(--gold);
  transition: transform 0.22s;
  font-weight: 900;
}
.mm-game-icon .suit.s-heart,
.mm-game-icon .suit.s-diamond { color: #e85a5a; }
.mm-game-icon.tavla-icon { font-size: 1.5rem; gap: 1px 4px; }
.mm-game-icon.tavla-icon .hex { color: var(--gold); }
.mm-game-icon.tavla-icon .hex:nth-child(2),
.mm-game-icon.tavla-icon .hex:nth-child(3) { color: rgba(232,197,92,0.5); }

.mm-game-name {
  font-size: 1.6rem; font-weight: 900; color: #fff;
  letter-spacing: 0.5px;
  margin-top: 6px;
}
.mm-game-desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.42);
}
.mm-card-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.74rem;
  color: rgba(255,255,255,0.55);
}
.mm-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.7);
  animation: mmPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.mm-live-text b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

.mm-badge-live {
  font-size: 0.62rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold), #c08820);
  color: #1a0e00;
  padding: 5px 12px;
  border-radius: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(232,197,92,0.25);
}

/* SOON section */
#mm-soon-section { display: flex; flex-direction: column; gap: 10px; }
.mm-section-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.7rem; font-weight: 800;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.mm-section-title::after {
  content: ''; flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent);
}
#mm-soon-games {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mm-soon-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
  opacity: 0.55;
  cursor: not-allowed;
  transition: opacity 0.18s;
}
.mm-soon-card:hover { opacity: 0.75; }
.mm-soon-icon {
  font-size: 1rem; font-weight: 900;
  color: var(--gold);
  min-width: 32px; text-align: center;
  letter-spacing: -1px;
  line-height: 1.1;
}
.mm-soon-icon span { color: #fff; }
.mm-soon-icon.spastira { color: rgba(232,197,92,0.7); font-size: 0.85rem; }
.mm-soon-text { display: flex; flex-direction: column; gap: 1px; }
.mm-soon-name { font-size: 0.85rem; font-weight: 800; color: #fff; }
.mm-soon-desc { font-size: 0.65rem; color: rgba(255,255,255,0.38); }

/* WIDGETS row */
#mm-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.mm-widget {
  background: linear-gradient(160deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.005) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.mm-widget-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.mm-widget-title {
  font-size: 0.75rem; font-weight: 800;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.mm-widget-sub {
  font-size: 0.65rem; font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
}

/* Leaderboard */
.mm-lb-list { display: flex; flex-direction: column; gap: 4px; }
.mm-lb-row {
  display: grid;
  grid-template-columns: 22px 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.mm-lb-row:hover { background: rgba(255,255,255,0.03); }
.mm-lb-rank {
  font-size: 0.72rem; font-weight: 800;
  color: rgba(255,255,255,0.35);
  text-align: center;
}
.mm-lb-row.top1 .mm-lb-rank { color: var(--gold); }
.mm-lb-row.top2 .mm-lb-rank { color: #c0c5cb; }
.mm-lb-row.top3 .mm-lb-rank { color: #cd7f32; }
.mm-lb-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg,#3a5cc0,#1a3080);
  color: #fff; font-weight: 800; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
.mm-lb-row.top1 .mm-lb-av {
  background: linear-gradient(135deg, var(--gold), #c08820); color: #1a0e00;
  box-shadow: 0 0 10px rgba(232,197,92,0.5);
}
.mm-lb-row.top2 .mm-lb-av { background: linear-gradient(135deg,#d8dde3,#8a8f96); color: #1a1a1a; }
.mm-lb-row.top3 .mm-lb-av { background: linear-gradient(135deg,#cd9762,#6e3e1a); color: #1a0e00; }
.mm-lb-name { font-size: 0.82rem; font-weight: 700; color: #fff; }
.mm-lb-row.top1 .mm-lb-name { color: var(--gold); }
.mm-lb-score {
  font-size: 0.78rem; font-weight: 700;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}

/* Quests */
.mm-quest-list { display: flex; flex-direction: column; gap: 8px; }
.mm-quest {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 9px;
}
.mm-quest.done {
  background: rgba(74,222,128,0.06);
  border-color: rgba(74,222,128,0.2);
}
.mm-quest-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
  position: relative;
}
.mm-quest.done .mm-quest-check {
  border-color: #4ade80;
  background: #4ade80;
}
.mm-quest.done .mm-quest-check::after {
  content: '✓';
  position: absolute; inset: 0;
  color: #052818; font-size: 0.7rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.mm-quest-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-quest-text {
  font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85);
}
.mm-quest.done .mm-quest-text {
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
}
.mm-quest-count {
  font-size: 0.65rem; color: rgba(255,255,255,0.35);
  font-weight: 700; margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.mm-quest-progress {
  height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.mm-quest-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), #c08820);
  border-radius: 999px;
}
.mm-quest.done .mm-quest-progress span { background: #4ade80; }
.mm-quest-reward {
  font-size: 0.72rem; font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* RESPONSIVE */
@media (max-width: 760px) {
  #mm-active-games { grid-template-columns: 1fr; }
  #mm-soon-games { grid-template-columns: 1fr; }
  #mm-widgets { grid-template-columns: 1fr; }
  #mm-logo { font-size: 2.4rem; letter-spacing: 5px; }
  .mm-game-name { font-size: 1.3rem; }
  .mm-user-info { display: none; }
  .mm-coin { padding: 5px 10px; font-size: 0.78rem; }
  #mm-stats { gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
  #mm-content { padding: 24px 18px 40px; }
}

/* ===== ONLINE LOBBY ===== */
#lobby {
  flex-direction: row !important;
  align-items: stretch;
  justify-content: flex-start;
  background: radial-gradient(ellipse 80% 80% at 25% 50%, #0a1628 0%, #05080e 100%);
  position: relative;
  overflow: hidden;
}
#lobby::before {
  content: '♠ ♥ ♣ ♦';
  position: absolute;
  font-size: 12rem;
  letter-spacing: 60px;
  color: rgba(255,255,255,0.012);
  transform: rotate(-15deg);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  top: 50%;
  left: -10%;
  transform: translateY(-50%) rotate(-15deg);
}

/* LEFT panel */
#lp-left {
  width: 300px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  border-right: 1px solid rgba(255,255,255,0.07);
  gap: 20px;
  position: relative;
  z-index: 1;
}

#lp-logo h1 {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(230,192,90,0.4), 0 2px 4px rgba(0,0,0,0.5);
  line-height: 1;
}
.lp-sub {
  color: rgba(255,255,255,0.3);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
}

/* Shared panel style */
.lp-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(8px);
}

.lp-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  font-weight: 700;
}

/* Pulsing online dot */
.online-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 6px #3ddc84;
  flex-shrink: 0;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.35; }
}

/* Players list */
#lobby-players-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.lobby-player-entry {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s;
  animation: lpeFadeIn 0.35s ease both;
}
.lobby-player-entry:hover { background: rgba(255,255,255,0.05); }
@keyframes lpeFadeIn {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
.lpe-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg,#3a5cc0,#1a3080);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.75rem; flex-shrink: 0;
}
.lpe-avatar.is-me { background: linear-gradient(135deg,var(--gold),#c08820); color:#000; }
.lpe-info { flex:1; display:flex; flex-direction:column; min-width:0; }
.lpe-name { font-weight:600; font-size:0.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lpe-ping { font-size:0.65rem; color:rgba(255,255,255,0.3); }
.lpe-badge {
  font-size:0.58rem; padding:2px 5px; border-radius:4px; font-weight:700;
  background:rgba(61,220,132,0.12); border:1px solid rgba(61,220,132,0.25); color:#3ddc84;
}
.lpe-badge.me { background:rgba(232,197,92,0.15); border-color:rgba(232,197,92,0.3); color:var(--gold); }

/* RIGHT panel */
#lp-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 56px;
  gap: 20px;
  position: relative;
  z-index: 1;
}

#lp-rooms-panel { width: 100%; max-width: 520px; }
#lp-join-form, #lp-room { width: 100%; max-width: 400px; }

/* Waiting rooms grid */
#waiting-rooms-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  padding-right: 2px;
}

.wr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: linear-gradient(155deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 6px 8px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
  user-select: none;
  overflow: hidden;
}
.wr-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 60%);
}
.wr-card:hover {
  border-color: rgba(232,197,92,0.45);
  background: linear-gradient(155deg, rgba(232,197,92,0.09) 0%, rgba(232,197,92,0.02) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.wr-card:active { transform: translateY(0); }

/* Active states: 1-2 players (bekliyor) */
.wr-card.wr-active {
  border-color: rgba(120,200,140,0.3);
  background: linear-gradient(155deg, rgba(120,200,140,0.06) 0%, rgba(255,255,255,0.015) 100%);
}
.wr-card.wr-active:hover {
  border-color: rgba(140,220,160,0.55);
}
/* Hot: 3/4 — about to start */
.wr-card.wr-hot {
  border-color: rgba(232,150,60,0.55);
  background: linear-gradient(155deg, rgba(232,150,60,0.1) 0%, rgba(232,100,40,0.02) 100%);
  animation: wrHotPulse 1.6s ease-in-out infinite;
}
.wr-card.wr-hot:hover {
  border-color: rgba(255,180,80,0.85);
}
@keyframes wrHotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,150,60,0.0), 0 2px 8px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 0 3px rgba(232,150,60,0.18), 0 2px 8px rgba(0,0,0,0.4); }
}
/* Full: not clickable */
.wr-card.wr-full {
  cursor: not-allowed;
  opacity: 0.45;
  border-color: rgba(255,255,255,0.06);
  filter: grayscale(0.4);
}
.wr-card.wr-full:hover {
  transform: none;
  border-color: rgba(255,255,255,0.06);
  background: linear-gradient(155deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  box-shadow: none;
}

.wr-num {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Mini felt table */
.wr-table {
  position: relative;
  width: 48px;
  height: 48px;
}
.wr-table-felt {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(40,180,90,0.5) 0%, transparent 65%),
    linear-gradient(160deg, #158048 0%, #0a5030 60%, #052818 100%);
  border: 2.5px solid #7a4c18;
  box-shadow:
    inset 0 0 0 1.5px rgba(160,100,40,0.5),
    inset 0 -3px 6px rgba(0,0,0,0.35),
    0 2px 6px rgba(0,0,0,0.6);
  position: relative;
}
/* 4 seat dots around the table */
.wr-seat {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background 0.2s, box-shadow 0.2s;
}
.wr-seat.filled {
  background: radial-gradient(circle at 35% 30%, #f4d878 0%, #c89020 60%, #7a5008 100%);
  border-color: rgba(80,40,0,0.6);
  box-shadow: 0 0 6px rgba(232,197,92,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
}
.wr-seat-top    { top: -5px;  left: 50%; transform: translateX(-50%); }
.wr-seat-bottom { bottom: -5px; left: 50%; transform: translateX(-50%); }
.wr-seat-left   { left: -5px; top: 50%;  transform: translateY(-50%); }
.wr-seat-right  { right: -5px; top: 50%; transform: translateY(-50%); }

.wr-slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.1;
}
.wr-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
}
.wr-status {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
.wr-card.wr-active .wr-count   { color: #c8e8d0; }
.wr-card.wr-active .wr-status  { color: rgba(140,220,160,0.7); }
.wr-card.wr-hot    .wr-count   { color: #ffd9a0; }
.wr-card.wr-hot    .wr-status  { color: rgba(255,190,100,0.85); }
.wr-card.wr-full   .wr-count   { color: rgba(255,255,255,0.4); }
.wr-card.wr-full   .wr-status  { color: rgba(220,80,80,0.6); }

.lp-input-row { display:flex; flex-direction:column; gap:8px; }
.lp-input-row input {
  width:100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 9px;
  color: var(--white);
  padding: 13px 16px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.lp-input-row input:focus { border-color: var(--gold); }

/* Room slots grid */
#room-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.room-slot {
  border-radius: 12px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-height: 92px;
  justify-content: center;
}
.room-slot.empty {
  background: rgba(255,255,255,0.025);
  border: 1.5px dashed rgba(255,255,255,0.1);
}
.room-slot.filled {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.13);
  animation: slotPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes slotPop {
  from { opacity:0; transform:scale(0.75); }
  to   { opacity:1; transform:scale(1); }
}
.rs-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
}
.rs-name {
  font-size: 0.8rem; font-weight: 600;
  text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%;
}
.rs-badge {
  font-size: 0.58rem; padding: 2px 7px; border-radius: 4px; font-weight: 700;
}
.rs-badge.you { background:rgba(232,197,92,0.18); color:var(--gold); border:1px solid rgba(232,197,92,0.3); }
.rs-badge.bot { background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.1); }
.rs-empty-icon { font-size:1.6rem; opacity:0.1; }
#room-status-msg {
  text-align:center; font-size:0.8rem; color:rgba(255,255,255,0.38); padding-top:2px;
}
#room-status-msg.room-full { color:#3ddc84; font-weight:700; }
#room-countdown {
  text-align:center; font-size:2rem; font-weight:900;
  color:var(--gold); letter-spacing:2px;
  animation: cdPulse 0.5s ease infinite alternate;
}
@keyframes cdPulse {
  from { transform:scale(1); opacity:1; }
  to   { transform:scale(1.12); opacity:0.7; }
}

.btn-primary {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #e6c05a 0%, #c89428 50%, #e6c05a 100%);
  background-size: 200% auto;
  color: #1a0e00;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-position 0.3s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(230,192,90,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(230,192,90,0.5);
}
.btn-primary:active { transform: translateY(0); }

/* ===== DRAW SCREEN ===== */
#draw-screen {
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 50%, #22743a 0%, #134a20 100%);
  flex-direction: column;
  gap: 0;
}

.draw-box {
  text-align: center;
  width: 96vw;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.draw-box h2 {
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.draw-box p {
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
  font-size: 0.9rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

#draw-grid {
  position: relative;
  width: 100%;
  height: 300px;
  margin-bottom: 14px;
  background: rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
}

/* Scattered face-down card wrapper */
.draw-card-wrap {
  position: absolute;
  width: 58px;
  height: 82px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
  user-select: none;
}
.draw-card-wrap:hover .dc-back {
  box-shadow: 0 0 0 2px var(--gold), 0 6px 16px rgba(212,168,67,0.6);
}
.draw-card-wrap.taken {
  pointer-events: none;
  opacity: 0.35;
  filter: grayscale(0.4);
}
/* flip reveals front */
.draw-card-wrap.flipped {
  /* rotation is applied via JS to preserve scatter angle */
}

/* shared face styles */
.dc-face {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1.1;
}

/* Back: matching .card-back */
.dc-back {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 5px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 4px, rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 5px),
    linear-gradient(160deg, #1c3d8a 0%, #0f2468 40%, #091848 100%);
  border: 1.5px solid #08163a;
  box-shadow: 0 3px 10px rgba(0,0,0,0.7);
}
.dc-back::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(232,197,92,0.38);
  border-radius: 3px;
  background: transparent;
}

/* Front: white card face — starts hidden (rotated 180deg) */
.dc-front {
  background: var(--white);
  border: 2px solid rgba(0,0,0,0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transform: rotateY(180deg);
  flex-direction: column;
  gap: 2px;
}
.dc-front.red { color: var(--red); }
.dc-front.black { color: #111; }
.dc-front .dc-val { font-size: 0.95rem; }
.dc-front .dc-suit { font-size: 1.1rem; }

#draw-results {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.draw-result-item {
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 20px;
  min-width: 100px;
}
.draw-result-item .dr-name { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.draw-result-item .dr-card { font-size: 1.3rem; font-weight: 800; }
.draw-result-item .dr-card.red { color: var(--red); }
.draw-result-item .dr-card.black { color: #222; }
.draw-result-item.dr-winner {
  border: 2px solid var(--gold);
  box-shadow: 0 0 14px rgba(212,168,67,0.35);
}
.draw-result-item.dr-winner .dr-name::after { content: ' 🏆'; }

/* ===== GAME LAYOUT ===== */
#game-screen { display: none; flex-direction: row; overflow: hidden; }
#game-screen.active {
  display: flex;
  background:
    radial-gradient(ellipse 55% 70% at 38% 50%, #0c1608 0%, #04060a 100%);
}

#game-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  padding: 12px;
  gap: 12px;
}

/* ===== TABLE ===== */
#table {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 0;
  /* OVAL shape — softer so corners don't clip players */
  border-radius: 80px / 60px;
  /* Felt layers */
  background:
    /* Overhead spotlight */
    radial-gradient(ellipse 65% 50% at 50% 38%, rgba(26,140,72,0.55) 0%, transparent 65%),
    /* Vignette edges */
    radial-gradient(ellipse 95% 90% at 50% 50%, transparent 50%, rgba(0,0,0,0.45) 100%),
    /* Base casino green */
    radial-gradient(ellipse 100% 100% at 50% 50%, #147545 0%, #0c5c32 50%, #052a16 100%),
    /* Micro fabric weave */
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 3px),
    repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 3px);
  padding: 22px 28px;
  /* Wood rail — highlight → grain → dark groove → shadow */
  box-shadow:
    inset 0 0 0 1px rgba(255,235,160,0.45),
    inset 0 0 0 18px var(--wood1),
    inset 0 -4px 0 18px rgba(0,0,0,0.2),
    inset 0 3px 0 18px rgba(255,200,100,0.2),
    inset 0 0 0 22px var(--wood2),
    inset 0 0 0 24px var(--wood3),
    inset 0 0 0 25px rgba(0,0,0,0.85),
    0 30px 80px rgba(0,0,0,0.95),
    0 0 120px rgba(0,0,0,0.6);
}

/* ===== PLAYER AREAS ===== */
.player-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#area-top { flex: 0 0 auto; padding: 2px 0; }
#area-bottom { flex: 0 0 auto; padding: 2px 0; }

#table-mid {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
}

.side-player {
  flex: 0 0 76px;
  justify-content: center;
  overflow: visible;
}

#area-left { align-items: flex-start; }
#area-right { align-items: flex-end; }

.pinfo {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.1);
  border-top-color: rgba(255,255,255,0.18);
  border-radius: 50px;
  padding: 5px 16px 5px 5px;
  font-size: 0.78rem;
  white-space: nowrap;
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Avatar circle — letter-based */
.pavatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  overflow: hidden;
  position: relative;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.pavatar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.pinfo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pname-label { font-weight: 700; color: rgba(255,255,255,0.92); font-size: 0.84rem; line-height: 1.2; }
.pbid-label {
  color: var(--gold);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 197, 92, 0.35);
  border-radius: 6px;
  display: inline-block;
  min-width: 28px;
  text-align: center;
}
.pbid-label:empty { display: none; }

@keyframes turnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,168,67,0.8), 0 0 10px rgba(212,168,67,0.4); border-color: rgba(212,168,67,0.5); }
  50%  { box-shadow: 0 0 0 8px rgba(212,168,67,0), 0 0 22px rgba(212,168,67,0.8); border-color: var(--gold); }
  100% { box-shadow: 0 0 0 0 rgba(212,168,67,0.8), 0 0 10px rgba(212,168,67,0.4); border-color: rgba(212,168,67,0.5); }
}
.pinfo.is-turn {
  border: 2px solid var(--gold);
  background: rgba(212,168,67,0.2);
  animation: turnPulse 1.1s ease-in-out infinite;
}
/* Dealer badge — shown on avatar */
.pinfo.is-dealer .pavatar::before {
  content: 'D';
  position: absolute;
  bottom: -2px; right: -2px;
  background: var(--gold);
  color: #000;
  border-radius: 50%;
  width: 14px; height: 14px;
  font-size: 0.55rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  border: 1px solid #000;
}

/* ===== HANDS ===== */
.hand {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  min-height: var(--card-h);
}

.hand-vert {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===== CARDS ===== */
.card {
  width: var(--card-w);
  height: var(--card-h);
  background: #fff;
  border-radius: var(--radius);
  border: 1.5px solid #c8b8a0;
  outline: 1px solid rgba(180,145,85,0.28);
  outline-offset: -5px;
  position: relative;
  box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.5);
  cursor: default;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
  overflow: hidden;
}
.card.red  { color: var(--red); }
.card.black { color: var(--black); }

/* Top-left corner: rank + suit */
.card::before {
  content: attr(data-label);
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: calc(var(--card-h) * 0.155);
  font-weight: 900;
  line-height: 1.15;
  white-space: pre;
}
/* Bottom-right corner: same, rotated 180° */
.card::after {
  content: attr(data-label);
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: calc(var(--card-h) * 0.155);
  font-weight: 900;
  line-height: 1.15;
  white-space: pre;
  transform: rotate(180deg);
  transform-origin: center;
}
/* Center suit watermark */
.card .c-suit-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--card-h) * 0.42);
  opacity: 0.08;
  pointer-events: none;
  line-height: 1;
}
/* Hide legacy elements */
.card .c-val, .card .c-suit { display: none; }

/* Back of card — deep navy, premium */
.card-back {
  width: var(--card-w);
  height: var(--card-h);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0, transparent 4px,
      rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 5px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0, transparent 4px,
      rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 5px
    ),
    linear-gradient(160deg, #1c3d8a 0%, #0f2468 40%, #091848 100%);
  border-radius: var(--radius);
  border: 1.5px solid #08163a;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(120,160,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* Gold frame */
.card-back::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(232,197,92,0.4);
  border-radius: 5px;
  background: transparent;
  z-index: 1;
}
/* Center ornament */
.card-back::after {
  content: '✦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--card-h) * 0.24);
  color: rgba(232,197,92,0.28);
  z-index: 2;
  line-height: 1;
}

/* Overlapping hand cards — human player (dynamic via JS --h-overlap) */
.hand .card, .hand .card-back {
  margin-left: var(--h-overlap, -38px);
}
.hand .card:first-child, .hand .card-back:first-child { margin-left: 0; }
.hand .card:hover { z-index: 5; }

/* Side players — vertical stack of backs */
.hand-vert .card, .hand-vert .card-back {
  margin-left: 0;
  margin-top: -40px;
}
.hand-vert .card:first-child, .hand-vert .card-back:first-child { margin-top: 0; }

/* Playable cards */
.card.playable { cursor: pointer; }
.card.playable:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 12px 24px rgba(0,0,0,0.6), 0 0 0 2.5px var(--gold);
  z-index: 20;
}
.card.not-playable { opacity: 0.4; cursor: not-allowed; }

/* Trick cards (in center): use sm size */
.card-sm {
  width: var(--card-w-sm);
  height: var(--card-h-sm);
}
.card-back.card-sm {
  width: var(--card-w-sm);
  height: var(--card-h-sm);
}

/* ===== CENTER AREA ===== */
#center-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
/* Felt oval play area */
#center-area::before {
  content: '';
  position: absolute;
  inset: -20px 10px;
  border: 2px solid rgba(255,255,255,0.07);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.15);
  pointer-events: none;
}

.screen-back-btn {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(180,110,30,0.35);
  color: rgba(220,180,100,0.7);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s;
}
.screen-back-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

#game-back-btn {
  position: absolute;
  top: 24px;
  left: 30px;
  z-index: 21;
}

#lobby-back-btn {
  align-self: flex-start;
  margin-bottom: 4px;
}

#round-info {
  position: absolute;
  top: 70px;
  left: 30px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0,0,0,0.55);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  min-width: 110px;
}
#round-info span { font-weight: 600; line-height: 1.5; }
#ri-trump { color: var(--gold); }

#trump-card-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}

/* Trick cards: 3×3 grid with positions for top/left/right/bottom */
#trick-cards {
  display: grid;
  grid-template-areas:
    ". top ."
    "left . right"
    ". bottom .";
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 4px;
  align-items: center;
  justify-items: center;
  min-height: 70px;
}

.trick-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.trick-slot[data-pos="top"]    { grid-area: top; }
.trick-slot[data-pos="left"]   { grid-area: left; }
.trick-slot[data-pos="right"]  { grid-area: right; }
.trick-slot[data-pos="bottom"] { grid-area: bottom; }

.trick-slot .tc-name {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  white-space: nowrap;
}
.trick-slot .card { cursor: default !important; }

#status-msg {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  min-height: 20px;
  font-weight: 500;
}

/* ===== BID CONTROLS ===== */
#bid-controls { text-align: center; }
#bid-prompt {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
#bid-buttons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 240px; }
.bid-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.9);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
}
.bid-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
  box-shadow: 0 4px 14px rgba(232,197,92,0.45);
  transform: translateY(-1px);
}
.bid-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.bid-btn.forbidden { opacity: 0.2; cursor: not-allowed; text-decoration: line-through; }

/* ===== TRUMP BADGE ===== */
#trump-badge {
  position: absolute;
  top: 26px;
  right: 30px;
  z-index: 20;
  background: linear-gradient(160deg, rgba(10,14,22,0.92) 0%, rgba(5,8,14,0.96) 100%);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 10px 18px;
  text-align: center;
  min-width: 88px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
}
#trump-badge-suit {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
#trump-badge-name {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
  text-transform: uppercase;
}
#trump-badge.trump-red {
  border-color: rgba(200,30,30,0.6);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 20px rgba(200,30,30,0.2);
}
#trump-badge.trump-black {
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 20px rgba(255,255,255,0.05);
}
#trump-badge.trump-none { border-color: rgba(255,255,255,0.15); }
#trump-badge.trump-none #trump-badge-suit { font-size: 0.95rem; letter-spacing: 1px; color: rgba(255,255,255,0.4); }

/* ===== TIMER ===== */
#timer-wrap {
  width: 100%;
  max-width: 240px;
}
#timer-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
}
#timer-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 4px;
  width: 100%;
}
#timer-fill.urgent { background: #e03030; }

/* ===== SCOREBOARD ===== */
#scoreboard {
  width: 290px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0d1117 0%, #080c10 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

#sb-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(230,192,90,0.12) 0%, rgba(230,192,90,0.04) 100%);
  border-bottom: 1px solid rgba(230,192,90,0.15);
  font-weight: 800;
  font-size: 0.92rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold);
  letter-spacing: 0.5px;
}
#sb-note { font-size: 0.68rem; color: rgba(255,255,255,0.35); font-weight: 400; letter-spacing: 0; }

#sb-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}
#sb-wrap::-webkit-scrollbar { width: 4px; }
#sb-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

#sb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
#sb-table th {
  position: sticky;
  top: 0;
  background: #1a1a1a;
  padding: 6px 4px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}
#sb-table th:first-child { max-width: 28px; color: rgba(255,255,255,0.35); }

#sb-table td {
  padding: 4px 4px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
}
#sb-table td:first-child { color: rgba(255,255,255,0.35); font-size: 0.7rem; }
#sb-table tr:last-child td { border-bottom: none; }
#sb-table tr.current-row td { background: rgba(212,168,67,0.08); }

.sb-bid { font-weight: 600; }
.sb-hit { color: #4caf50; font-weight: 700; }
.sb-miss { color: rgba(255,255,255,0.6); font-weight: 600; }
.sb-miss-x { color: #e05050; margin-right: 1px; font-size: 0.7rem; }

/* Live bid cells during bidding phase */
.sb-current td { background: rgba(212,168,67,0.07); }
.sb-pending { color: rgba(255,255,255,0.2); font-size: 0.8rem; }
.sb-bid-live {
  color: var(--gold);
  font-weight: 700;
  animation: bidPop 0.25s ease-out;
}
@keyframes bidPop {
  from { transform: scale(1.5); opacity: 0.4; }
  to   { transform: scale(1);   opacity: 1; }
}

#sb-table tfoot td {
  font-weight: 700;
  color: var(--gold);
  border-top: 2px solid rgba(212,168,67,0.3);
  font-size: 0.82rem;
  padding: 6px 4px;
}

/* ===== MODAL ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }

.modal-box {
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.modal-box h3 { font-size: 1.3rem; color: var(--gold); margin-bottom: 20px; }
.trump-buttons { display: flex; gap: 10px; }
.trump-btn {
  padding: 14px 20px;
  font-size: 1.1rem;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 80px;
}
.trump-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* Round over overlay */
#round-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  border-radius: 8px;
}
#round-overlay.hidden { display: none; }
.round-result-box {
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 24px 36px;
  text-align: center;
}
.round-result-box h3 { font-size: 1.2rem; color: var(--gold); margin-bottom: 12px; }
.round-result-items { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; }
.rr-item { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.rr-item strong { display: block; font-size: 1rem; color: var(--white); }
.rr-item.hit strong { color: #4caf50; }
.rr-item.miss strong { color: #e05050; }
.btn-next {
  padding: 10px 28px;
  background: var(--gold);
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}

/* Highlight current round in scoreboard */
.sb-current { background: rgba(212,168,67,0.12) !important; }

/* Game over */
#game-over-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(14px);
}
#game-over-overlay.hidden { display: none; }
#fw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.go-box {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, #1a1a2e 0%, #0e0e1c 100%);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 32px 44px;
  text-align: center;
  min-width: 360px;
  box-shadow: 0 0 60px rgba(232,197,92,0.25), 0 20px 60px rgba(0,0,0,0.8);
  animation: goAppear 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes goAppear {
  from { opacity: 0; transform: scale(0.7) translateY(30px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.go-crown { font-size: 2.8rem; line-height: 1; margin-bottom: 4px; }
.go-box h2 { font-size: 1.9rem; color: var(--gold); margin-bottom: 16px; }

/* Winners section */
.go-winners {
  background: rgba(232,197,92,0.08);
  border: 1px solid rgba(232,197,92,0.3);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 16px;
}
.go-winner-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 8px;
}
.go-winner-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.go-medal { font-size: 1rem; font-weight: 800; color: var(--gold); width: 24px; }
.go-wname { flex: 1; font-weight: 700; font-size: 1rem; text-align: left; }
.go-wscore { font-size: 0.85rem; color: var(--gold); opacity: 0.85; }

/* Rankings */
.go-rankings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.go-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  padding: 8px 14px;
  border-radius: 8px;
}
.go-rank-winner { background: rgba(232,197,92,0.1); }
.go-rank .rank-pos {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
}
.go-rank-winner .rank-pos { background: var(--gold); color: #000; }
.go-rank .rank-name { flex: 1; font-weight: 600; text-align: left; font-size: 0.9rem; }
.go-rank .rank-score { font-weight: 700; color: var(--gold); font-size: 0.85rem; }
.go-rank .rank-misses { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin-left: 4px; }

/* Miss badge in round result */
.miss-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.65rem;
  background: rgba(220,60,60,0.3);
  border: 1px solid rgba(220,60,60,0.5);
  color: #ff8080;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  vertical-align: middle;
}
.early-end-note {
  color: #ff8080;
  font-size: 0.85rem;
  margin-top: 8px;
  font-weight: 600;
}

/* ===== TAVLA PREMIUM LOBBY ===== */
#tavla-variant-screen {
  position: relative;
  background: #080502;
  overflow: hidden;
  font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
}

/* Board background fills full screen */
#tvs-board-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#tvs-board-bg svg { width: 100%; height: 100%; display: block; }

/* Dark vignette overlay */
#tvs-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 35% 50%, transparent 0%, rgba(4,2,1,0.38) 100%),
    linear-gradient(to right,  rgba(4,2,1,0.62) 0%, transparent 28%, transparent 68%, rgba(4,2,1,0.72) 100%),
    linear-gradient(to bottom, rgba(4,2,1,0.55) 0%, transparent 22%, transparent 75%, rgba(4,2,1,0.8) 100%);
}

/* All overlay content */
#tvs-logo, #tvs-gear, #tvs-panels, #tvs-bottom {
  position: absolute;
  z-index: 2;
}

/* ── Logo ── */
#tvs-logo { top: 22px; left: 30px; }
#tvs-logo-title {
  font-family: 'Cinzel Decorative', 'Cinzel', 'Georgia', serif;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 4px;
  color: #e8c870;
  text-shadow:
    0 0 40px rgba(232,200,112,0.55),
    0 2px 6px rgba(0,0,0,0.95),
    2px 3px 12px rgba(0,0,0,0.9);
}
#tvs-logo-edition {
  font-size: 0.62rem;
  letter-spacing: 7px;
  color: rgba(210,170,80,0.6);
  margin-top: 4px;
  padding-left: 3px;
  text-transform: uppercase;
}

/* ── Gear icon ── */
#tvs-gear {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40,18,6,0.72);
  border: 1.5px solid rgba(190,145,55,0.38);
  border-radius: 50%;
  font-size: 1rem;
  color: rgba(210,170,80,0.75);
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transition: all 0.2s;
}
#tvs-gear:hover { border-color: var(--gold); color: var(--gold); }

/* ── Right panels ── */
#tvs-panels {
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.tvs-panel {
  background: rgba(14,7,2,0.84);
  border: 1px solid rgba(175,125,45,0.28);
  border-radius: 8px;
  padding: 11px 13px;
  backdrop-filter: blur(18px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(200,160,60,0.08);
  color: rgba(220,190,130,0.9);
}
.tvs-ph {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: rgba(195,150,60,0.65);
  border-bottom: 1px solid rgba(175,125,45,0.2);
  padding-bottom: 6px;
  margin-bottom: 7px;
}

/* Leaderboard panel */
#tvs-lb { min-width: 158px; }
.tvs-lbr {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0;
  font-size: 0.76rem;
  color: rgba(215,190,150,0.8);
  border-bottom: 1px solid rgba(175,125,45,0.1);
}
.tvs-lbr:last-child { border-bottom: none; }
.tvs-top1 { color: rgba(238,210,100,1); font-weight: 700; }
.tvs-rk { font-size: 0.7rem; font-weight: 700; color: rgba(175,135,55,0.65); width: 13px; text-align: center; }
.tvs-av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #6d4428, #3a2010);
  border: 1.5px solid rgba(175,125,45,0.38);
}
.tvs-nm { flex: 1; font-weight: 600; }
.tvs-cr { font-size: 0.8rem; color: #e8c050; }

/* Dev tools panel */
#tvs-dev { min-width: 205px; }
.tvs-df { margin-bottom: 7px; }
.tvs-dl {
  display: block; font-size: 0.52rem; letter-spacing: 1.5px;
  color: rgba(175,135,55,0.62); margin-bottom: 3px;
}
.tvs-sel {
  width: 100%;
  background: rgba(30,14,5,0.9);
  border: 1px solid rgba(175,125,45,0.38);
  border-radius: 4px;
  color: rgba(228,196,136,0.9);
  padding: 4px 7px; font-size: 0.73rem;
  font-family: inherit; cursor: pointer; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8a040'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 22px;
}
.tvs-sel option { background: #1e0e04; }
.tvs-sel-list {
  font-size: 0.65rem;
  color: rgba(175,135,55,0.55);
  padding: 2px 0 0 2px;
  line-height: 1.8;
}
.tvs-srow {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.62rem; color: rgba(175,135,55,0.55);
}
.tvs-slider { flex: 1; accent-color: #c8a040; cursor: pointer; }
.tvs-crow { display: flex; gap: 8px; margin-bottom: 7px; }
.tvs-cg { flex: 1; }
.tvs-ctrl { display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.tvs-ctrl button {
  width: 20px; height: 20px;
  background: rgba(50,24,8,0.8);
  border: 1px solid rgba(175,125,45,0.38);
  border-radius: 3px;
  color: rgba(220,175,75,0.9);
  font-size: 0.85rem; cursor: pointer; line-height: 1; padding: 0;
  transition: all 0.15s;
}
.tvs-ctrl button:hover { background: rgba(70,34,10,0.9); border-color: var(--gold); }
.tvs-ctrl span {
  flex: 1; text-align: center; font-size: 0.73rem; font-weight: 700;
  color: rgba(228,196,136,0.9);
  background: rgba(30,14,5,0.7);
  border: 1px solid rgba(175,125,45,0.22);
  border-radius: 3px; padding: 1px 3px;
}
.tvs-ab {
  display: block; width: 100%;
  background: rgba(45,22,7,0.8);
  border: 1px solid rgba(155,105,35,0.42);
  border-radius: 4px;
  color: rgba(205,168,85,0.82);
  font-size: 0.58rem; letter-spacing: 0.6px;
  padding: 5px 5px;
  cursor: pointer; margin-bottom: 4px;
  font-family: inherit; text-align: center;
  transition: all 0.15s;
}
.tvs-ab:hover { background: rgba(65,30,8,0.9); border-color: rgba(200,150,55,0.55); color: rgba(235,198,115,0.95); }

/* ── Bottom navigation ── */
#tvs-bottom {
  bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 28px 22px;
  background: linear-gradient(to top, rgba(4,2,1,0.88) 0%, rgba(4,2,1,0.4) 70%, transparent 100%);
  min-height: 110px;
}
.tvs-bside {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding-bottom: 6px;
}
.tvs-npill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(22,10,3,0.78);
  border: 1.5px solid rgba(175,125,45,0.32);
  border-radius: 30px;
  color: rgba(205,168,85,0.85);
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 1.8px;
  padding: 9px 20px; cursor: pointer; transition: all 0.2s;
  backdrop-filter: blur(10px); white-space: nowrap;
  min-width: 138px; justify-content: center;
  box-shadow: 0 2px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.tvs-npill:hover {
  background: rgba(42,20,6,0.88);
  border-color: rgba(215,165,65,0.52);
  color: rgba(238,210,120,1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tvs-npill span { font-size: 0.95rem; }

/* Center: OYNA + DEV MODE */
#tvs-bcenter {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-bottom: 4px;
}

/* OYNA — ornate gold button */
#tvs-play-btn {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 1.45rem; font-weight: 700; letter-spacing: 8px;
  color: #1a0c00;
  background: linear-gradient(175deg, #f8e090 0%, #d8a828 35%, #b08018 65%, #d4a228 100%);
  border: none;
  padding: 15px 70px 15px 78px; /* extra right for letter-spacing */
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  box-shadow:
    0 0 0 2px #7a5808,
    0 0 0 4px rgba(190,145,40,0.38),
    0 10px 30px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -2px 0 rgba(0,0,0,0.18);
  text-shadow: 0 1px 3px rgba(255,255,255,0.28);
  min-width: 220px;
}
#tvs-play-btn::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(255,255,255,0.22);
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  pointer-events: none;
}
/* Decorative corner flourishes */
#tvs-play-btn::after {
  content: '❧  ❧';
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  font-size: 0.38rem; letter-spacing: 6px; color: rgba(30,15,0,0.35);
  white-space: nowrap; pointer-events: none;
}
#tvs-play-btn:hover {
  background: linear-gradient(175deg, #ffe898 0%, #e8b830 35%, #c09020 65%, #e4b228 100%);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px #7a5808,
    0 0 0 5px rgba(210,165,50,0.45),
    0 14px 38px rgba(0,0,0,0.8),
    0 0 50px rgba(200,160,50,0.28),
    inset 0 1px 0 rgba(255,255,255,0.42);
}
#tvs-play-btn:active { transform: translateY(-1px); }

/* Geliştirici Modu button */
#tvs-devmode-btn {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 3.5px;
  color: rgba(205,168,85,0.82);
  background: rgba(18,8,2,0.82);
  border: 1.5px solid rgba(175,125,45,0.42);
  padding: 8px 30px;
  cursor: pointer; transition: all 0.2s;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
#tvs-devmode-btn:hover {
  background: rgba(35,16,4,0.9);
  border-color: rgba(215,165,65,0.58);
  color: rgba(238,210,120,1);
  transform: translateY(-2px);
}

/* ===== TAVLA GAME ===== */
#tavla-game {
  flex-direction: column;
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, #2a1808 0%, #160c04 55%, #0a0602 100%);
  overflow: hidden;
}
#tg-layout {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
}
#tg-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px;
  background: rgba(18, 8, 2, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(160,90,20,0.25);
  flex-shrink: 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
#tg-back-btn {
  background: none; border: 1px solid rgba(180,110,30,0.35);
  color: rgba(220,180,100,0.7); border-radius: 6px;
  padding: 4px 12px; font-size: 0.85rem; cursor: pointer;
  transition: all 0.2s;
}
#tg-back-btn:hover { border-color: var(--gold); color: var(--gold); }
#tg-info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#tg-variant-label { font-weight: 700; font-size: 1rem; color: var(--gold); }
#tg-turn-label { font-size: 0.8rem; color: rgba(220,180,100,0.5); }
#tg-score { display: flex; gap: 16px; font-size: 0.85rem; }
#tg-score-white { color: #f0e8d4; font-weight: 600; }
#tg-score-black { color: #a07050; font-weight: 600; }

/* New scoreboard with cube indicator (replaces #tg-score) */
#tg-scoreboard {
  display: flex; align-items: center; gap: 14px;
  background: rgba(40, 20, 6, 0.55);
  border: 1px solid rgba(180, 110, 30, 0.25);
  border-radius: 999px;
  padding: 4px 8px;
}
.tg-sb-row { display: flex; align-items: center; gap: 6px; padding: 2px 8px; }
.tg-sb-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.tg-sb-dot-white { background: linear-gradient(135deg, #fff, #d8c5a0); box-shadow: 0 0 6px rgba(255,235,180,0.45); }
.tg-sb-dot-black { background: linear-gradient(135deg, #6a4828, #2a1605); box-shadow: 0 0 6px rgba(0,0,0,0.5); }
.tg-sb-name { font-size: 0.78rem; color: rgba(220,180,100,0.7); font-weight: 600; letter-spacing: 0.5px; }
.tg-sb-val {
  font-size: 1.05rem; font-weight: 800; color: var(--gold, #ffd58a);
  min-width: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
#tg-cube {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 32px;
  background: linear-gradient(135deg, #ff8a4d, #c4302b);
  color: #fff; font-weight: 800; font-size: 0.95rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(196, 48, 43, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  font-variant-numeric: tabular-nums;
  cursor: help;
}

/* Pes Et button in controls */
#tg-pes-btn {
  background: linear-gradient(135deg, rgba(196, 48, 43, 0.85), rgba(120, 25, 22, 0.85));
  color: #fff; border: 1px solid rgba(255, 138, 77, 0.5);
  padding: 8px 14px; border-radius: 8px;
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s;
  box-shadow: 0 2px 6px rgba(196, 48, 43, 0.3);
}
#tg-pes-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(196, 48, 43, 0.5); }
#tg-pes-btn:disabled { opacity: 0.4; cursor: default; transform: none; }

/* Pes / Çifte modal */
#tg-pes-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
}
#tg-pes-modal.hidden { display: none; }
.tg-pes-card {
  background: linear-gradient(180deg, #1a0d04, #0d0703);
  border: 1px solid rgba(180, 110, 30, 0.4);
  border-radius: 16px;
  padding: 28px 26px;
  max-width: 440px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,200,120,0.1);
}
.tg-pes-title {
  font-size: 1.25rem; font-weight: 800;
  color: var(--gold, #ffd58a);
  text-align: center; margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.tg-pes-sub {
  font-size: 0.88rem; color: rgba(220,180,100,0.7);
  text-align: center; margin-bottom: 22px;
}
.tg-pes-actions { display: flex; flex-direction: column; gap: 10px; }
.tg-pes-actions button {
  border: none; cursor: pointer; padding: 14px 18px;
  border-radius: 10px; font-family: inherit; color: #fff;
  text-align: left; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.tg-pes-actions button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.tg-pes-btn-give    { background: linear-gradient(135deg, #c4302b, #781916); }
.tg-pes-btn-double  { background: linear-gradient(135deg, #ff8a4d, #c46420); }
.tg-pes-btn-cancel  { background: rgba(255,255,255,0.08); color: rgba(220,180,100,0.75) !important; font-weight: 600; text-align: center !important; }
.tg-pes-btn-label   { font-size: 1rem; font-weight: 800; letter-spacing: 0.3px; }
.tg-pes-btn-hint    { font-size: 0.78rem; opacity: 0.9; margin-top: 3px; }

/* Win overlay enhancements (cube points + tally) */
.tg-win-points { font-size: 1rem; color: #ffd58a; font-weight: 700; margin: 8px 0 4px; text-align: center; }
.tg-win-tally  { font-size: 0.95rem; color: rgba(220,180,100,0.85); text-align: center; margin-bottom: 14px; font-variant-numeric: tabular-nums; }

#tg-board-wrap {
  display: flex;
  flex: 1;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  padding: 18px 24px;
  min-height: 0;
}
#tg-board-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 760px;
  min-height: 0;
}
.tg-num-row {
  display: flex;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.tg-num-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(200,150,60,0.55);
  letter-spacing: 0.5px;
}
.tg-bear-zone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 64px;
  justify-content: center;
}
.tg-bear-label {
  font-size: 0.55rem; color: rgba(200,150,70,0.5);
  text-transform: uppercase; letter-spacing: 2px;
  font-weight: 700;
}
.tg-bowl {
  width: 52px;
  flex: 1;
  min-height: 80px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(180,110,40,0.06) 0%, transparent 65%),
    linear-gradient(180deg, #0e0704 0%, #080402 100%);
  border: 1.5px solid rgba(120,70,20,0.3);
  box-shadow:
    inset 0 4px 20px rgba(0,0,0,0.8),
    inset 0 1px 4px rgba(0,0,0,0.95),
    0 1px 0 rgba(160,100,30,0.15);
  display: flex; flex-direction: column-reverse; align-items: center;
  padding: 6px 4px;
  gap: 2px;
  overflow: hidden;
  position: relative;
}

#tg-board {
  display: flex; flex-direction: column;
  background: #120804;
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  position: relative;
  border: 6px solid #4a2008;
  box-shadow:
    0 0 0 2px #7a4018,
    0 0 0 4px #3a1606,
    0 24px 70px rgba(0,0,0,0.95),
    0 0 50px rgba(80,30,5,0.4);
}

.tg-point-row {
  display: flex;
  flex: 1;
  min-height: 0;
  background: linear-gradient(180deg, #1a0d06 0%, #120804 100%);
}
#tg-top-row {
  background: linear-gradient(180deg, #1a0d06 0%, #0e0603 100%);
}
#tg-bot-row {
  background: linear-gradient(180deg, #0e0603 0%, #1a0d06 100%);
}

#tg-mid-row {
  display: flex;
  height: 64px;
  flex-shrink: 0;
  align-items: stretch;
  background: transparent;
}
.tg-mid-spacer {
  flex: 1;
  background: #120804;
}
/* Center bar — perfectly centered vertical strip, holds hit pieces */
#tg-center-bar {
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 4px,
      rgba(0,0,0,0.07) 4px, rgba(0,0,0,0.07) 5px
    ),
    linear-gradient(90deg, #3a1605 0%, #5a2a0a 25%, #6a3010 50%, #5a2a0a 75%, #3a1605 100%);
  box-shadow: inset 3px 0 8px rgba(0,0,0,0.5), inset -3px 0 8px rgba(0,0,0,0.5);
}
.tg-bar-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 0;
  width: 100%;
  cursor: default;
}
/* Dice float absolutely in the bottom-left playing quadrant */
#tg-dice-board {
  position: absolute;
  bottom: 8%;
  left: 3%;
  width: 44%;   /* left half before center bar ≈ (100%-44px)/2 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

/* Triangular points */
.tg-point {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: filter 0.15s;
  overflow: visible;
  min-width: 0;
}
.tg-point:hover { filter: brightness(1.25); }
.tg-point.tg-legal { filter: brightness(1.35); outline: 2px solid rgba(232,197,92,0.7); outline-offset: -1px; }
.tg-point.tg-selected { outline: 3px solid #e8c84a; outline-offset: -1px; filter: brightness(1.2); }

/* Triangle via clip-path on the point background */
.tg-point-bg {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 90%, 0% 0%, 100% 0%);
}
#tg-top-row .tg-point-bg {
  clip-path: polygon(50% 90%, 0% 0%, 100% 0%);
}
#tg-bot-row .tg-point-bg {
  clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
}
.tg-point-color-red .tg-point-bg {
  background: linear-gradient(180deg, #e8d4a0 0%, #c8b070 50%, #a08040 100%);
}
.tg-point-color-navy .tg-point-bg {
  background: linear-gradient(180deg, #6a0f1e 0%, #3d0810 60%, #220408 100%);
}

/* Point number label — moved outside board, hide inside */
.tg-point-num { display: none; }

/* Checkers/pieces */
.tg-piece {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800;
  z-index: 1;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  letter-spacing: -0.5px;
}
.tg-piece::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  pointer-events: none;
}
.tg-piece-white {
  background:
    radial-gradient(circle at 35% 28%, #ffffff 0%, #f5edd8 35%, #e0ceaa 70%, #c8b080 100%);
  border: 2px solid #c8a860;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.9),
    inset 0 2px 4px rgba(255,255,255,0.85),
    inset 0 -3px 6px rgba(120,80,10,0.25);
  color: #6a5020;
}
.tg-piece-white::after {
  background: radial-gradient(circle at 38% 28%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.1) 50%, transparent 70%);
}
.tg-piece-black {
  background:
    radial-gradient(circle at 35% 28%, #4a2818 0%, #2a1208 45%, #130604 100%);
  border: 2px solid #6a3c18;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.85),
    0 1px 0 rgba(100,60,20,0.5),
    inset 0 2px 4px rgba(160,80,30,0.2),
    inset 0 -3px 6px rgba(0,0,0,0.7);
  color: #d09060;
}
.tg-piece-black::after {
  background: radial-gradient(circle at 38% 28%, rgba(180,100,40,0.35) 0%, rgba(180,100,40,0.05) 50%, transparent 70%);
}
.tg-piece-pinned {
  outline: 2px solid #ff4444;
  outline-offset: 1px;
}

/* Pieces stack with overlap inside the point */
.tg-point-pieces {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  z-index: 2;
}
#tg-top-row .tg-point-pieces {
  top: 4px;
  flex-direction: column;
}
#tg-top-row .tg-point-pieces .tg-piece {
  margin-bottom: -14px;
}
#tg-top-row .tg-point-pieces .tg-piece:last-child {
  margin-bottom: 0;
}
#tg-bot-row .tg-point-pieces {
  bottom: 4px;
  flex-direction: column-reverse;
}
#tg-bot-row .tg-point-pieces .tg-piece {
  margin-top: -14px;
}
#tg-bot-row .tg-point-pieces .tg-piece:last-child {
  margin-top: 0;
}
/* Count badge on last stacked piece */
.tg-piece-count {
  position: absolute;
  font-size: 0.58rem;
  font-weight: 900;
  background: rgba(0,0,0,0.55);
  border-radius: 8px;
  padding: 1px 4px;
  pointer-events: none;
}

/* Bar pieces — smaller to fit in 44px center bar */
.tg-bar-half .tg-piece {
  width: 30px;
  height: 30px;
  font-size: 0.55rem;
}
/* Pulse when bar needs attention */
@keyframes tgBarPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,197,92,0); }
  50%       { box-shadow: 0 0 0 6px rgba(232,197,92,0.45); }
}
.tg-bar-half.needs-entry .tg-piece {
  animation: tgBarPulse 1s ease-in-out infinite;
}
.tg-bar-piece {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Borne off pieces in bowl */
.tg-bowl-piece {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tg-bowl-piece.tg-piece-white {
  background: radial-gradient(circle at 35% 28%, #ffffff 0%, #f5edd8 40%, #d8c090 100%);
  border: 1.5px solid #c8a860;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.8);
}
.tg-bowl-piece.tg-piece-black {
  background: radial-gradient(circle at 35% 28%, #4a2818 0%, #2a1208 45%, #130604 100%);
  border: 1.5px solid #6a3c18;
  box-shadow: 0 2px 6px rgba(0,0,0,0.8), inset 0 1px 2px rgba(160,80,30,0.2);
}
.tg-bowl-count {
  position: absolute;
  top: 5px; right: 5px;
  background: rgba(0,0,0,0.7);
  color: var(--gold);
  font-size: 0.65rem; font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid rgba(232,197,92,0.4);
  line-height: 1.5;
}

/* Vertical bar dividers in top/bottom rows — matches center bar exactly */
.tg-board-bar {
  flex: 0 0 44px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 4px,
      rgba(0,0,0,0.07) 4px, rgba(0,0,0,0.07) 5px
    ),
    linear-gradient(90deg, #3a1605 0%, #5a2a0a 25%, #6a3010 50%, #5a2a0a 75%, #3a1605 100%);
  box-shadow: inset 3px 0 8px rgba(0,0,0,0.5), inset -3px 0 8px rgba(0,0,0,0.5);
}

/* Gap in number rows above/below the bar */
.tg-num-bar-gap {
  flex: 0 0 44px;
}

/* Controls */
#tg-controls {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 24px;
  background: rgba(14, 6, 2, 0.9);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(120,70,15,0.3);
  flex-shrink: 0;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.5);
}
.tg-die {
  width: 48px; height: 48px;
  background: linear-gradient(145deg, #fdf6e4, #ede0c2);
  border-radius: 10px;
  position: relative;
  box-shadow:
    0 5px 16px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.85),
    inset 0 1px 3px rgba(255,255,255,0.95),
    inset 0 -2px 4px rgba(140,100,20,0.15);
  border: 1.5px solid #c8a84a;
  transition: opacity 0.35s, transform 0.15s;
  flex-shrink: 0;
}
.tg-die.used {
  opacity: 0.18;
  transform: scale(0.85);
}
.tg-die.black-die {
  background: linear-gradient(145deg, #3a1a08, #1e0a04);
  border-color: #7a4018;
  box-shadow:
    0 5px 16px rgba(0,0,0,0.85),
    inset 0 1px 3px rgba(160,80,30,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.7);
}

/* Pips */
.tg-pip {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2a1a06;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0.5px 0 rgba(255,220,100,0.15);
  transform: translate(-50%, -50%);
}
.tg-die.black-die .tg-pip {
  background: #e8c880;
  box-shadow: inset 0 1px 2px rgba(100,60,0,0.5), 0 0 3px rgba(220,180,60,0.4);
}

#tg-roll-btn, #tg-end-btn {
  background: linear-gradient(160deg, #e8c84a, #c8a020);
  color: #1a0c00;
  border: 1px solid #a88010;
  border-radius: 8px;
  padding: 10px 24px; font-weight: 800; font-size: 0.95rem;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
  letter-spacing: 0.3px;
}
#tg-roll-btn:hover, #tg-end-btn:hover {
  background: linear-gradient(160deg, #f5d870, #dab030);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
}
#tg-roll-btn:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: none; }
#tg-end-btn {
  background: linear-gradient(160deg, #4a6a2a, #2a4015);
  color: #c8e890; border-color: #385020;
}
#tg-end-btn:hover { background: linear-gradient(160deg, #5a8030, #3a5020); }

#tg-msg {
  text-align: center;
  font-size: 0.9rem; color: rgba(210,170,90,0.65);
  font-style: italic;
}

/* Win overlay */
#tg-win-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
#tg-win-box {
  background: #1a1008;
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 40px 60px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
#tg-win-title { font-size: 2rem; font-weight: 800; color: var(--gold); }
#tg-win-sub { font-size: 1rem; color: rgba(255,255,255,0.6); }
#tg-win-btns { display: flex; gap: 12px; margin-top: 8px; }
.tg-win-btn {
  background: var(--gold); color: #000;
  border: none; border-radius: 8px;
  padding: 10px 24px; font-weight: 700; font-size: 0.9rem;
  cursor: pointer;
}
.tg-win-btn.secondary {
  background: rgba(255,255,255,0.1); color: #fff;
}

@keyframes tgDieThrow {
  0%   { transform: translate(20px, 60px) rotate(540deg) scale(0.2); opacity: 0; }
  45%  { opacity: 1; }
  70%  { transform: translate(-4px, -6px) rotate(-12deg) scale(1.1); }
  85%  { transform: translate(2px, 3px) rotate(4deg) scale(0.96); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
}
.tg-die.rolling {
  animation: tgDieThrow 0.55s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* PERF: removed global .card / .card-back dealIn animation —
   it re-fired on every DOM rebuild (renderOneHand, renderAllHands),
   collided with dealInLuxe in .hand, and with trickPlayIn in .trick-slot.
   Hand-deal animation now lives only in game-polish.css (.hand .card → dealInLuxe).
   Trick-arrival animation lives only in game-polish.css (.trick-slot .card → trickPlayIn). */

/* ===== PROFILE MODAL ===== */
.pm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pm-modal.hidden { display: none; }
.pm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,8,14,0.78);
  backdrop-filter: blur(8px);
  animation: pmFade 0.18s ease-out;
}
.pm-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, #14182a 0%, #0a0d18 100%);
  border: 1px solid rgba(232,197,92,0.2);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: pmRise 0.22s cubic-bezier(0.2,0.8,0.4,1);
}
@keyframes pmFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pmRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pm-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
.pm-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 8px;
}
.pm-preview-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--avatar-grad, linear-gradient(135deg, var(--gold), #c08820));
  color: #1a0e00;
  font-weight: 900;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.pm-preview-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.pm-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}
#pm-name-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
  font-family: inherit;
}
#pm-name-input:focus {
  border-color: rgba(232,197,92,0.5);
  background: rgba(255,255,255,0.08);
}
#pm-colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pm-color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--g);
  border: 2px solid rgba(255,255,255,0.08);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pm-color:hover { transform: scale(1.08); }
.pm-color.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232,197,92,0.25), 0 4px 12px rgba(0,0,0,0.5);
  transform: scale(1.05);
}
.pm-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.pm-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: all 0.15s;
}
.pm-btn-secondary {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}
.pm-btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.pm-btn-primary {
  background: linear-gradient(135deg, var(--gold), #c08820);
  color: #1a0e00;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(232,197,92,0.3);
}
.pm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232,197,92,0.45);
}

/* Bind avatar gradient via CSS variable */
.mm-user-avatar { background: var(--avatar-grad, linear-gradient(135deg, var(--gold), #c08820)); }

/* Coin chip pop animation when balance increases */
@keyframes coinPop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 rgba(232,197,92,0); }
  35%  { transform: scale(1.18); box-shadow: 0 0 18px rgba(232,197,92,0.7); }
  100% { transform: scale(1);    box-shadow: 0 0 0 rgba(232,197,92,0); }
}
.mm-coin.coin-pop { animation: coinPop 0.55s ease-out; }

/* Toast notifications (rewards, quests, level up) */
.kt-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a0e00;
  background: linear-gradient(135deg, var(--gold), #c08820);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 24px rgba(232,197,92,0.3);
  border: 1px solid rgba(255,235,160,0.5);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.28s ease-out, opacity 0.28s ease-out;
  pointer-events: none;
  max-width: 320px;
}
.kt-toast.in { transform: translateY(0); opacity: 1; }
.kt-toast b { font-weight: 900; }
.kt-toast-quest {
  background: linear-gradient(135deg, #4ade80, #2a9050);
  color: #052818;
  border-color: rgba(160,255,180,0.4);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 24px rgba(74,222,128,0.3);
}
.kt-toast-level {
  background: linear-gradient(135deg, #c66bff, #6a28b0);
  color: #fff;
  border-color: rgba(220,170,255,0.5);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 28px rgba(180,90,255,0.4);
}

/* Toto game-over reward strip */
.go-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 14px 0 6px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(232,197,92,0.12), rgba(232,197,92,0.04));
  border: 1px solid rgba(232,197,92,0.3);
  border-radius: 10px;
}
.go-reward-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.go-reward-vals {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Tavla win overlay reward */
.tg-win-reward {
  margin: 14px auto 4px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(232,197,92,0.12), rgba(232,197,92,0.04));
  border: 1px solid rgba(232,197,92,0.3);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  width: fit-content;
}

/* ============================================================
   ===== MOBILE RESPONSIVE =====================================
   Breakpoints: 1024 / 768 / 480 / 375
   Appended at the end so it overrides all prior rules.
   ============================================================ */

/* Global safety net — no horizontal scroll on any viewport */
html, body { overflow-x: hidden; }

/* Hover-only effects only on devices that actually hover */
@media (hover: none) {
  .mm-game-card.active:hover           { transform: none !important; }
  .mm-game-card.active:hover .mm-card-glow { opacity: 0 !important; }
  .mm-game-card.active:active          { transform: translateY(-4px) !important; }
  .mm-game-card.active:active .mm-card-glow { opacity: 1 !important; }
  .wr-card:hover    { transform: none !important; }
  .wr-card:active   { transform: translateY(-1px) !important; }
  .card.playable:hover { transform: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.85) !important; }
  .card.playable:active {
    transform: translateY(-10px) scale(1.04) !important;
    box-shadow: 0 16px 32px rgba(0,0,0,0.7), 0 0 0 2.5px var(--gold), 0 0 28px rgba(232,197,92,0.6) !important;
  }
  .card.playable:active .card-insight { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   ≤ 1024px — hide scoreboard on tablet & smaller (it stacks ugly)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #scoreboard {
    position: fixed; right: 0; top: 0; bottom: 0;
    width: 320px; max-width: 90vw;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    background: var(--bg-2);
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
  }
  #scoreboard.sb-open { transform: translateX(0); }
  #sb-toggle { display: inline-flex !important; }
}
@media (min-width: 1025px) {
  #sb-toggle { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   ≤ 768px — tablet portrait + phone
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Minimum touch target 44×44 (Apple HIG) ── */
  .btn-primary, .bid-btn, .emote-btn, .tw-radio, .tw-theme,
  .gsc-share-btn, .dw-spin-btn, .dw-close-btn, .pm-btn,
  .trump-btn, .btn-next, .tg-win-btn, .screen-back-btn,
  #tg-back-btn, #lobby-back-btn, #game-back-btn,
  #btn-lobby-enter, #btn-invite, #tg-roll-btn, #tg-end-btn,
  .mm-icon-btn { min-height: 44px !important; min-width: 44px !important; }
  .bid-btn   { width: 44px !important; height: 44px !important; }
  .emote-btn { width: 44px !important; height: 44px !important; font-size: 1.3rem !important; }
  .mm-icon-btn { width: 40px !important; height: 40px !important; }

  /* ── MAIN MENU ── */
  #mm-topbar          { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; }
  #mm-topbar-right    { gap: 6px !important; }
  .mm-coin            { padding: 4px 10px !important; font-size: 0.78rem !important; }
  .mm-user            { padding: 4px 10px 4px 4px !important; }
  .mm-user-info       { display: none !important; }
  #daily-wheel-cta    { padding: 6px 12px !important; font-size: 0.72rem !important; min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }
  #daily-wheel-cta .dw-cta-text { display: none; }
  #mm-content         { padding: 24px 16px 80px !important; gap: 22px !important; }
  #mm-logo            { font-size: clamp(2.6rem, 14vw, 5rem) !important; letter-spacing: 2px !important; }
  #mm-sub             { letter-spacing: 4px !important; font-size: 0.6rem !important; }
  #mm-stats           { gap: 10px !important; padding: 8px 14px !important; flex-wrap: wrap; }
  .mm-stat-val        { font-size: 0.92rem !important; }
  .mm-stat-label      { font-size: 0.56rem !important; }

  /* Active games + widgets → block / single column */
  #mm-active-games    { display: block !important; }
  #mm-active-games > .mm-game-card { width: 100% !important; margin-bottom: 12px; }
  #mm-active-games > .mm-game-card:last-child { margin-bottom: 0; }
  #mm-widgets         { display: block !important; }
  #mm-widgets > .mm-widget { width: 100% !important; margin-bottom: 12px; }
  #mm-widgets > .mm-widget:last-child { margin-bottom: 0; }
  .mm-game-name       { font-size: 2.2rem !important; }
  .mm-game-card       { padding: 20px 18px !important; }
  .mm-game-icon       { font-size: 1.6rem !important; }
  #mm-soon-games      { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ── LOBBY ── */
  #lobby {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #lobby::before { display: none; }

  #lp-left {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 40vh !important;
    padding: 14px 14px 8px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    gap: 12px !important;
    flex: 0 0 auto;
    overflow-y: auto;
  }
  #lp-logo h1     { font-size: 2.6rem !important; }
  .lp-sub         { font-size: 0.62rem !important; }

  /* Compact horizontal player list */
  #lp-online-panel    { padding: 12px !important; }
  #lobby-players-list {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    gap: 6px !important;
    padding-bottom: 4px;
  }
  .lobby-player-entry { flex: 0 0 auto !important; width: 110px !important; padding: 6px 8px !important; }
  .lpe-name           { font-size: 0.74rem !important; }
  .lpe-ping           { font-size: 0.6rem !important; }
  .lpe-badge          { display: none !important; }

  /* Lobby chat compact in left panel; can be displayed below if attached */
  #lobby-chat         { max-height: 200px !important; min-height: 140px !important; }
  #lc-messages        { min-height: 80px !important; }

  /* Right side full width */
  #lp-right {
    width: 100% !important;
    flex: 1 !important;
    padding: 14px 14px 80px !important;
    overflow-y: visible !important;
    gap: 14px !important;
  }
  #lp-rooms-panel     { max-width: 100% !important; padding: 12px !important; }
  #lp-join-form, #lp-room { max-width: 100% !important; padding: 14px !important; }

  /* Waiting rooms → 2 columns */
  #waiting-rooms-list {
    grid-template-columns: repeat(2, 1fr) !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 8px !important;
  }
  .wr-table       { width: 42px !important; height: 42px !important; }
  #room-slots     { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .room-slot      { min-height: 80px !important; padding: 12px 8px !important; }

  /* ── DRAW SCREEN ── */
  #draw-screen        { padding: 12px !important; overflow: auto !important; }
  .draw-box           { max-width: 100% !important; gap: 6px !important; }
  .draw-box h2        { font-size: 1.8rem !important; }
  .draw-box p         { font-size: 0.74rem !important; letter-spacing: 2px !important; }
  #draw-grid          { height: 240px !important; margin-bottom: 10px !important; }
  .draw-card-wrap     { width: 44px !important; height: 62px !important; }
  .draw-result-item   { padding: 8px 12px !important; min-width: 80px !important; }
  .draw-result-item .dr-card { font-size: 1.05rem !important; }

  /* ── GAME SCREEN ── */
  #game-screen.active { flex-direction: column !important; }
  :root {
    --card-w: 58px; --card-h: 82px;
    --card-w-sm: 44px; --card-h-sm: 62px;
  }
  #game-layout        { flex-direction: column !important; padding: 8px !important; gap: 8px !important; }
  #table              { padding: 8px !important; border-radius: 70px / 50px !important; }

  /* CYPWARE watermark smaller */
  #table::before { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  #table::after  { font-size: 0.5rem !important; top: calc(50% + 1.6rem) !important; }

  /* Round info & back button */
  #game-back-btn      { top: 10px !important; left: 10px !important; padding: 6px 12px !important; font-size: 0.72rem !important; }
  #round-info         { top: 50px !important; left: 10px !important; padding: 8px 12px !important; font-size: 0.66rem !important; min-width: 0 !important; border-radius: 4px !important; }
  #ri-round           { font-size: 1rem !important; }
  #ri-dealer, #ri-trump { font-size: 0.58rem !important; }

  /* Trump badge smaller */
  #trump-badge        { top: 10px !important; right: 10px !important; padding: 6px 10px !important; min-width: 56px !important; border-radius: 6px !important; }
  #trump-badge-suit   { font-size: 1.6rem !important; }
  #trump-badge-name   { font-size: 0.5rem !important; margin-top: 2px !important; }

  /* Player chips — smaller */
  .pinfo              { padding: 4px 10px 4px 4px !important; font-size: 0.75rem !important; border-radius: 50px !important; }
  .pavatar            { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; border-width: 1.5px !important; }
  .pname-label        { font-size: 0.72rem !important; }
  .pbid-label         { font-size: 0.82rem !important; }

  /* Side hands — minimal: keep only top 3 cards or hide */
  #hand-left, #hand-right {
    max-height: 90px !important;
    overflow: hidden !important;
  }
  .hand-vert .card, .hand-vert .card-back {
    margin-top: -54px !important;
  }
  .side-player        { flex: 0 0 50px !important; }

  /* Center / trick area */
  #trick-cards        { min-height: 60px !important; gap: 3px !important; }
  .trick-slot .tc-name { font-size: 0.54rem !important; }
  #status-msg         { font-size: 0.78rem !important; }
  #bid-prompt         { font-size: 0.85rem !important; }
  #bid-controls       { padding: 10px 14px 8px !important; max-width: 92% !important; }
  #bid-buttons        { gap: 4px !important; max-width: 100% !important; }

  /* Hand area */
  #area-bottom .hand  { min-height: var(--card-h) !important; flex-wrap: nowrap !important; overflow: visible !important; }
  .card-insight       { display: none !important; }

  /* Hide commentary + feed on small viewports */
  #action-feed, #commentary-bubble { display: none !important; }

  /* Emote bar */
  #emote-bar          { bottom: 10px !important; padding: 4px 8px !important; gap: 4px !important; flex-wrap: wrap !important; justify-content: center !important; max-width: calc(100vw - 20px); }

  /* Streak badges */
  .streak-badge       { font-size: 0.65rem !important; padding: 3px 8px !important; }

  /* Round-end overlay */
  .round-result-box   { padding: 22px 26px !important; min-width: 0 !important; width: calc(100vw - 32px); max-width: 420px; }
  .round-result-box h3 { font-size: 2rem !important; }
  .rr-item            { padding: 10px 12px !important; min-width: 80px !important; }
  .rr-item strong     { font-size: 1.5rem !important; }
  .round-result-items { gap: 6px !important; }
  .btn-next           { padding: 12px 24px !important; font-size: 1.1rem !important; }

  /* Trump choose modal */
  .modal-box          { padding: 24px !important; min-width: 0 !important; max-width: calc(100vw - 32px); }
  .trump-buttons      { gap: 8px !important; flex-wrap: wrap; justify-content: center; }
  .trump-btn          { padding: 14px 10px !important; min-width: 64px !important; font-size: 0.85rem !important; }

  /* Game over */
  .go-box             { padding: 28px 24px !important; min-width: 0 !important; width: calc(100vw - 32px); max-height: calc(100vh - 24px); overflow-y: auto; }
  .go-box h2          { font-size: 1.8rem !important; }
  .go-rank            { padding: 6px 10px !important; }
  .go-rank .rank-name { font-size: 0.84rem !important; }
  .badges-strip       { gap: 6px !important; }
  .badge-chip         { font-size: 0.66rem !important; padding: 5px 10px 5px 6px !important; }
  .gsc-title          { font-size: 1.8rem !important; }
  .gsc-stat b         { font-size: 0.78rem !important; }

  /* Daily Wheel modal */
  .dw-box             { padding: 22px 18px !important; min-width: 0 !important; width: calc(100vw - 24px); max-width: 360px; }
  .dw-title           { font-size: 2rem !important; }
  .dw-wheel-wrap      { width: 220px !important; height: 220px !important; }
  .dw-wedge           { font-size: 1.05rem !important; padding-top: 20px !important; }
  .dw-spin-btn        { padding: 12px 28px !important; font-size: 1.05rem !important; letter-spacing: 3px !important; }

  /* ── TAVLA VARIANT SCREEN ── */
  #tvs-logo           { top: 12px !important; left: 14px !important; }
  #tvs-logo-title     { font-size: 2.4rem !important; }
  #tvs-logo-edition   { font-size: 0.5rem !important; letter-spacing: 4px !important; }
  #tvs-panels         { top: 12px !important; right: 12px !important; flex-direction: column; gap: 6px !important; }
  #tvs-lb, #tvs-dev   { min-width: 140px !important; padding: 8px 10px !important; }
  .tvs-ph             { font-size: 0.48rem !important; }
  .tvs-lbr            { font-size: 0.68rem !important; }
  #tvs-bottom         { padding: 0 14px 14px !important; min-height: 90px !important; }
  .tvs-bside          { gap: 6px !important; }
  .tvs-npill          { padding: 8px 14px !important; min-width: 100px !important; font-size: 0.6rem !important; }
  #tvs-play-btn       { font-size: 1rem !important; padding: 12px 36px !important; letter-spacing: 4px !important; min-width: 140px !important; }
  #tvs-devmode-btn    { font-size: 0.5rem !important; padding: 6px 18px !important; }

  /* ── TAVLA GAME ── */
  #tg-topbar          { padding: 8px 12px !important; }
  #tg-variant-label   { font-size: 1.1rem !important; }
  #tg-turn-label      { font-size: 0.6rem !important; }
  #tg-score           { gap: 12px !important; }
  #tg-score-white, #tg-score-black { font-size: 0.82rem !important; }
  #tg-board-wrap      { padding: 10px !important; gap: 8px !important; }
  .tg-bear-zone       { width: 44px !important; }
  .tg-bowl            { width: 36px !important; min-height: 60px !important; padding: 4px 2px !important; }
  .tg-bowl-piece      { width: 22px !important; height: 22px !important; }
  .tg-piece           { width: 26px !important; height: 26px !important; }
  .tg-bar-half .tg-piece { width: 22px !important; height: 22px !important; }
  .tg-die             { width: 36px !important; height: 36px !important; }
  .tg-pip             { width: 6px !important; height: 6px !important; }
  #tg-center-bar      { flex: 0 0 32px !important; }
  .tg-board-bar       { flex: 0 0 32px !important; }
  .tg-num-bar-gap     { flex: 0 0 32px !important; }
  .tg-num-cell        { font-size: 0.5rem !important; }
  #tg-controls        { padding: 10px 14px !important; }

  /* ── PROFILE & TWEAKS MODAL — bigger on mobile ── */
  .pm-modal           { padding: 0 !important; }
  .pm-box             { width: 90vw !important; max-width: 90vw !important; max-height: 85vh; overflow-y: auto; padding: 32px 22px 22px !important; border-radius: 12px !important; }
  .pm-preview-avatar  { width: 72px !important; height: 72px !important; font-size: 1.8rem !important; }
  .pm-color           { width: 40px !important; height: 40px !important; }

  #tweaks-btn         { bottom: 14px !important; right: 14px !important; width: 48px !important; height: 48px !important; }
  #tweaks-panel {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 85vh !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 24px 22px 80px !important;
    transform-origin: bottom center;
    overflow-y: auto;
  }
  #tweaks-panel.hidden  { transform: translateY(100%) !important; opacity: 0; }
  #tweaks-panel:not(.hidden) { transform: translateY(0) !important; }
}

/* ─────────────────────────────────────────────────────────────
   ≤ 480px — small phone portrait
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Topbar stack */
  #mm-topbar          { padding: 8px 10px !important; }
  #mm-brand           { font-size: 0.92rem !important; letter-spacing: 2px !important; }
  #mm-logo            { font-size: 2rem !important; letter-spacing: 2px !important; line-height: 0.9 !important; }
  #mm-sub             { font-size: 0.55rem !important; letter-spacing: 3px !important; }
  #mm-hero::before, #mm-hero::after { font-size: 0.5rem !important; letter-spacing: 0.3em !important; }

  /* Game cards even more compact */
  .mm-game-name       { font-size: 1.6rem !important; }
  .mm-game-card       { padding: 16px 14px !important; }

  /* Soon section single column */
  #mm-soon-games      { grid-template-columns: 1fr !important; }

  /* Lobby — rooms 1 col */
  #waiting-rooms-list { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  #lp-logo h1         { font-size: 2rem !important; }

  /* Game screen — tighter cards & layout */
  :root {
    --card-w: 48px; --card-h: 68px;
    --card-w-sm: 38px; --card-h-sm: 54px;
  }
  /* Aggressive overlap on the human hand */
  #hand-bottom .card, #hand-bottom .card-back { margin-left: -32px !important; }
  #hand-bottom .card:first-child, #hand-bottom .card-back:first-child { margin-left: 0 !important; }

  /* Top player → corner mini chip */
  #area-top {
    position: absolute;
    top: 52px;
    right: 60px;
    z-index: 18;
  }
  #area-top .pinfo    { padding: 3px 8px 3px 3px !important; }
  #area-top .pavatar  { width: 26px !important; height: 26px !important; font-size: 0.72rem !important; }
  #area-top .pname-label { font-size: 0.6rem !important; }
  #area-top .pbid-label  { font-size: 0.75rem !important; }
  #area-top .hand {
    position: absolute;
    top: 28px;
    right: 0;
    transform: scale(0.55);
    transform-origin: top right;
    min-height: 0;
    flex-direction: row;
  }

  /* Side players — minimal */
  .side-player        { flex: 0 0 40px !important; }
  #area-left .pavatar, #area-right .pavatar { width: 26px !important; height: 26px !important; font-size: 0.72rem !important; }
  .hand-vert .card, .hand-vert .card-back { transform: scale(0.7); margin-top: -58px !important; }

  /* Bid buttons grid */
  #bid-buttons        { max-width: 220px !important; }
  .bid-btn            { width: 40px !important; height: 40px !important; font-size: 0.78rem !important; }

  /* Round info even smaller */
  #round-info         { top: 46px !important; padding: 6px 10px !important; min-width: 0 !important; max-width: 130px; }
  #ri-round           { font-size: 0.85rem !important; }

  /* Emote bar — only emojis */
  .emote-btn-text     { display: none !important; }
  .emote-bar-sep      { display: none !important; }
  #emote-bar          { gap: 3px !important; padding: 4px 6px !important; }
  .emote-btn          { width: 38px !important; height: 38px !important; font-size: 1.1rem !important; }

  /* Modals — 90vw width */
  .modal-box, .round-result-box, .go-box, .dw-box, .pm-box {
    width: 90vw !important;
    max-width: 90vw !important;
    max-height: 85vh !important;
    overflow-y: auto;
    padding: 22px 18px !important;
  }
  .go-box h2          { font-size: 1.5rem !important; }
  .gsc-title          { font-size: 1.4rem !important; }
  .gsc-stats          { gap: 8px !important; }
  .gsc-stat           { font-size: 0.6rem !important; }
  .dw-wheel-wrap      { width: 200px !important; height: 200px !important; }
  .dw-wedge           { font-size: 0.92rem !important; padding-top: 16px !important; }

  /* Tavla extra tight */
  .tg-piece           { width: 22px !important; height: 22px !important; }
  .tg-die             { width: 30px !important; height: 30px !important; }
  .tg-bear-zone       { width: 36px !important; }
  .tg-bowl            { width: 30px !important; }
  #tg-board-wrap      { padding: 6px !important; gap: 4px !important; }
  #tg-center-bar      { flex: 0 0 26px !important; }
  .tg-board-bar       { flex: 0 0 26px !important; }
  .tg-num-bar-gap     { flex: 0 0 26px !important; }
  .tg-num-cell        { font-size: 0.45rem !important; }
  #tg-roll-btn, #tg-end-btn { padding: 10px 18px !important; font-size: 0.78rem !important; }

  /* Tavla variant — hide side panels on small phone */
  #tvs-panels         { display: none !important; }
  #tvs-bottom         { flex-wrap: wrap; gap: 8px; }
  .tvs-bside          { display: none; }
  #tvs-logo-title     { font-size: 1.8rem !important; }
}

/* ─────────────────────────────────────────────────────────────
   ≤ 375px — iPhone SE class (super narrow)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  #mm-logo            { font-size: 1.6rem !important; letter-spacing: 1px !important; }
  #mm-content         { padding: 18px 12px 70px !important; gap: 16px !important; }
  .mm-game-name       { font-size: 1.4rem !important; }
  .mm-game-card       { padding: 14px 12px !important; }

  #waiting-rooms-list { grid-template-columns: 1fr !important; }

  :root {
    --card-w: 42px; --card-h: 60px;
    --card-w-sm: 32px; --card-h-sm: 46px;
  }
  #hand-bottom .card, #hand-bottom .card-back { margin-left: -28px !important; }
  #area-top .hand { transform: scale(0.48); }
  .hand-vert .card, .hand-vert .card-back { transform: scale(0.6); margin-top: -50px !important; }

  .bid-btn            { width: 38px !important; height: 38px !important; font-size: 0.72rem !important; }
  #status-msg         { font-size: 0.7rem !important; }
  #bid-prompt         { font-size: 0.78rem !important; }
  #trump-badge        { padding: 4px 8px !important; min-width: 48px !important; }
  #trump-badge-suit   { font-size: 1.3rem !important; }
  #round-info         { padding: 5px 8px !important; max-width: 110px; }
  #ri-round           { font-size: 0.78rem !important; }

  #lp-logo h1         { font-size: 1.7rem !important; }
}

/* ─────────────────────────────────────────────────────────────
   LANDSCAPE PHONE (max-height: 480px, landscape)
   ───────────────────────────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
  :root         { --card-w: 48px; --card-h: 68px; }
  #game-layout  { padding: 4px !important; gap: 4px !important; }
  #table        { padding: 6px 14px !important; }
  .pavatar      { width: 26px !important; height: 26px !important; font-size: 0.7rem !important; }
  #round-info, #trump-badge { top: 4px !important; }
  #game-back-btn { top: 4px !important; padding: 4px 10px !important; }
  #emote-bar    { display: none !important; }
}