/* ============================================================
   THEME.CSS — Bold Vegas + Neon overlay
   Sits on top of style.css to retone the whole flow.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   GLOBAL BACKDROP — neon city night
   ───────────────────────────────────────────────────────────── */
body {
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%,  rgba(var(--neon-1-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(var(--neon-2-rgb), 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, var(--bg-1) 0%, var(--bg-0) 80%);
  font-feature-settings: 'ss01', 'cv11';
}

/* ─────────────────────────────────────────────────────────────
   AMBIENT BG ARTWORK (added programmatically by tweaks.js)
   ───────────────────────────────────────────────────────────── */
.bg-grid { display: none; }
.bg-orb { display: none; }
.bg-orb-1, .bg-orb-2, .bg-orb-3 { display: none; }
@keyframes orbDrift {
  0%,100% { transform: translate(0,0)        scale(1);   }
  33%     { transform: translate(40px,-30px) scale(1.08);}
  66%     { transform: translate(-30px,40px) scale(0.94);}
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
.display, .mm-game-name, #mm-logo, #tvs-logo-title,
#lp-logo h1, .draw-box h2 {
  font-family: var(--display-font-2);
  font-weight: 700;
}
.ornate {
  font-family: var(--display-font);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   MAIN MENU — KartArena hero
   ───────────────────────────────────────────────────────────── */
#main-menu {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,   rgba(var(--neon-1-rgb), 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 100%,  rgba(var(--neon-2-rgb), 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(var(--accent-cool), 0.14) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}

/* Decorative pip cards — hidden to avoid missing-glyph rectangles on some systems */
.mm-bg-card { display: none !important; }

/* Top bar — glass with neon underline */
#mm-topbar {
  background: linear-gradient(180deg, rgba(8,4,16,0.85) 0%, rgba(8,4,16,0.55) 100%);
  border-bottom: 1px solid var(--line-1);
  position: sticky; top: 0; z-index: 50;
  padding: 16px 32px;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
}
#mm-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--neon-1-rgb), 0.4) 25%,
    rgba(var(--neon-2-rgb), 0.4) 75%,
    transparent 100%);
}
#mm-brand {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 18px rgba(var(--neon-1-rgb), 0.6);
}
#mm-brand span { color: var(--neon-2); text-shadow: 0 0 18px rgba(var(--neon-2-rgb), 0.7); }

/* Coin chip */
.mm-coin {
  background: linear-gradient(135deg, rgba(var(--accent-warm-rgb), 0.18), rgba(var(--accent-warm-rgb), 0.04));
  border: 1px solid rgba(var(--accent-warm-rgb), 0.4);
  color: var(--accent-warm);
  box-shadow: 0 0 18px rgba(var(--accent-warm-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mm-coin-icon { filter: drop-shadow(0 0 6px currentColor); }

.mm-user {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
}
.mm-icon-btn { background: rgba(255,255,255,0.04); border-color: var(--line-2); }
.mm-icon-btn:hover { border-color: var(--neon-2); color: var(--neon-2); box-shadow: 0 0 18px rgba(var(--neon-2-rgb), 0.4); }

/* ── HERO ── */
#mm-content { max-width: 1180px; padding: 48px var(--pad-screen) 64px; gap: var(--gap-3); }
#mm-hero { padding: 24px 0 8px; position: relative; }
#mm-logo {
  font-family: var(--display-font);
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  letter-spacing: 12px;
  background: linear-gradient(180deg, #fff 0%, #fff 55%, rgba(var(--neon-1-rgb), 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 60px rgba(var(--neon-1-rgb), 0.35),
    0 0 100px rgba(var(--neon-2-rgb), 0.18);
  filter: drop-shadow(0 4px 24px rgba(var(--neon-1-rgb), 0.25));
}
#mm-logo span {
  background: linear-gradient(180deg, var(--neon-2) 0%, var(--neon-1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#mm-sub {
  color: var(--ink-3);
  letter-spacing: 8px;
  font-size: 0.72rem;
  margin-top: 14px;
  font-weight: 600;
}
#mm-sub::before, #mm-sub::after {
  content: '◆';
  display: inline-block;
  color: var(--neon-2);
  margin: 0 14px;
  font-size: 0.55rem;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px currentColor);
}

/* ── Live stats strip ── */
#mm-stats {
  background:
    linear-gradient(90deg,
      rgba(var(--neon-1-rgb), 0.05) 0%,
      rgba(var(--accent-warm-rgb), 0.06) 50%,
      rgba(var(--neon-2-rgb), 0.05) 100%);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Active games — hero tiles ── */
#mm-active-games { gap: var(--gap-2); }
.mm-game-card {
  position: relative;
  padding: 28px 28px 24px !important;
  background: linear-gradient(160deg, var(--glass-1) 0%, rgba(0,0,0,0.4) 100%) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  backdrop-filter: blur(var(--glass-blur));
}
.mm-game-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--neon-1-rgb), 0.0) 0%, transparent 70%);
  transition: opacity 0.3s, background 0.3s;
}
.mm-game-card[data-game="toto"]::before  { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--neon-1-rgb), 0.18) 0%, transparent 70%); }
.mm-game-card[data-game="tavla"]::before { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--neon-2-rgb), 0.18) 0%, transparent 70%); }
.mm-game-card.active {
  border-color: rgba(var(--neon-1-rgb), 0.3) !important;
}
.mm-game-card[data-game="tavla"].active { border-color: rgba(var(--neon-2-rgb), 0.3) !important; }
.mm-game-card.active:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(var(--neon-1-rgb), 0.7) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 48px rgba(var(--neon-1-rgb), 0.3) !important;
}
.mm-game-card[data-game="tavla"].active:hover {
  border-color: rgba(var(--neon-2-rgb), 0.7) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 48px rgba(var(--neon-2-rgb), 0.3) !important;
}

/* corner ornament */
.mm-game-card::after {
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 80px; height: 80px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--neon-1-rgb), 0.25) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 0 22px 0 0;
}
.mm-game-card[data-game="tavla"]::after {
  background: radial-gradient(circle at 100% 0%, rgba(var(--neon-2-rgb), 0.28) 0%, transparent 60%);
}

.mm-game-icon {
  font-size: 2rem !important;
  filter: drop-shadow(0 0 12px rgba(var(--neon-1-rgb), 0.45));
}
.mm-game-icon .suit.s-spade   { color: #fff; }
.mm-game-icon .suit.s-heart   { color: var(--neon-1); }
.mm-game-icon .suit.s-diamond { color: var(--neon-1); }
.mm-game-icon .suit.s-club    { color: #fff; }
.mm-game-icon.tavla-icon { color: var(--neon-2) !important; filter: drop-shadow(0 0 12px rgba(var(--neon-2-rgb), 0.5)); }
.mm-game-icon.tavla-icon .hex { color: var(--neon-2); }
.mm-game-icon.tavla-icon .hex:nth-child(2),
.mm-game-icon.tavla-icon .hex:nth-child(3) { color: rgba(var(--neon-2-rgb), 0.45); }

.mm-game-name {
  font-family: var(--display-font-2);
  font-size: 2rem !important;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 14px;
}
.mm-game-desc { font-size: 0.82rem; color: var(--ink-3); letter-spacing: 0.5px; }

.mm-badge-live {
  background: linear-gradient(135deg, var(--neon-1) 0%, #ff5fa0 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: 0 0 20px rgba(var(--neon-1-rgb), 0.5), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  padding: 6px 14px !important;
  font-size: 0.65rem !important;
}
.mm-game-card[data-game="tavla"] .mm-badge-live {
  background: linear-gradient(135deg, var(--neon-2) 0%, #6af0ff 100%) !important;
  color: #04141a !important;
  box-shadow: 0 0 20px rgba(var(--neon-2-rgb), 0.5), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  text-shadow: none;
}
.mm-card-foot { border-top-color: var(--line-1) !important; }
.mm-live-dot { background: var(--good) !important; box-shadow: 0 0 10px var(--good) !important; }

/* ── Soon section ── */
.mm-soon-card {
  background: rgba(255,255,255,0.02) !important;
  border: 1px dashed var(--line-2) !important;
}
.mm-soon-icon { color: var(--accent-warm) !important; }

/* ── Widgets (Leaderboard + Quests) ── */
.mm-widget {
  background: linear-gradient(160deg, var(--glass-1) 0%, rgba(0,0,0,0.35) 100%) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(var(--glass-blur));
  position: relative;
  overflow: hidden;
}
.mm-widget::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--neon-1), var(--accent-warm), var(--neon-2));
  opacity: 0.7;
}
#mm-leaderboard::before { background: linear-gradient(90deg, var(--accent-warm), var(--neon-1)); }
#mm-quests::before      { background: linear-gradient(90deg, var(--neon-2), var(--accent-warm)); }

.mm-widget-title { color: var(--ink-1) !important; }
.mm-lb-row.top1 .mm-lb-name { color: var(--accent-warm) !important; text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.5); }
.mm-lb-row.top1 .mm-lb-av {
  background: linear-gradient(135deg, var(--accent-warm), #c08020) !important;
  box-shadow: 0 0 14px rgba(var(--accent-warm-rgb), 0.6) !important;
}
.mm-quest.done .mm-quest-check { background: var(--good) !important; border-color: var(--good) !important; }
.mm-quest.done .mm-quest-check::after { color: #04140a !important; }
.mm-quest-progress span {
  background: linear-gradient(90deg, var(--neon-1), var(--accent-warm)) !important;
}
.mm-quest.done .mm-quest-progress span { background: var(--good) !important; }
.mm-quest-reward { color: var(--accent-warm) !important; text-shadow: 0 0 10px rgba(var(--accent-warm-rgb), 0.4); }

/* ─────────────────────────────────────────────────────────────
   LOBBY — online players + waiting rooms
   ───────────────────────────────────────────────────────────── */
#lobby {
  background:
    radial-gradient(ellipse 60% 60% at 20% 20%, rgba(var(--neon-1-rgb), 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 70% 70% at 80% 80%, rgba(var(--neon-2-rgb), 0.14) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%) !important;
}
#lp-left {
  background: linear-gradient(180deg, var(--glass-1) 0%, rgba(0,0,0,0.3) 100%);
  border-right: 1px solid var(--line-2);
  backdrop-filter: blur(var(--glass-blur));
}
#lp-logo h1 {
  font-family: var(--display-font);
  background: linear-gradient(180deg, #fff 0%, var(--neon-1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 40px rgba(var(--neon-1-rgb), 0.5),
    0 0 80px rgba(var(--neon-2-rgb), 0.2);
}
.lp-panel {
  background: var(--glass-1) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
}
.lp-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--neon-1-rgb), 0.6), rgba(var(--neon-2-rgb), 0.6), transparent);
}
.online-dot { background: var(--good) !important; box-shadow: 0 0 10px var(--good) !important; }

/* Player entries */
.lpe-avatar { background: linear-gradient(135deg, var(--accent-cool), #4828a8) !important; border: 1px solid rgba(255,255,255,0.08); }
.lpe-avatar.is-me {
  background: linear-gradient(135deg, var(--neon-1), #b01058) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(var(--neon-1-rgb), 0.5);
}
.lpe-badge { background: rgba(var(--neon-2-rgb), 0.16) !important; border-color: rgba(var(--neon-2-rgb), 0.4) !important; color: var(--neon-2) !important; }
.lpe-badge.me { background: rgba(var(--neon-1-rgb), 0.2) !important; border-color: rgba(var(--neon-1-rgb), 0.4) !important; color: var(--neon-1) !important; }

/* Waiting rooms — neon mini tables */
#waiting-rooms-list { gap: 10px; }
.wr-card {
  background: linear-gradient(160deg, var(--glass-2) 0%, rgba(0,0,0,0.35) 100%) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 14px !important;
  padding: 14px 8px 10px !important;
}
.wr-num { color: var(--ink-3) !important; font-weight: 700; letter-spacing: 0.12em; }
.wr-table-felt {
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--neon-1-rgb), 0.4) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(var(--neon-2-rgb), 0.16) 0%, transparent 60%),
    linear-gradient(160deg, var(--felt-mid) 0%, var(--felt) 50%, var(--felt-dark) 100%) !important;
  border: 2px solid rgba(var(--neon-1-rgb), 0.35) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--neon-2-rgb), 0.18),
    inset 0 -2px 8px rgba(0,0,0,0.5),
    0 4px 12px rgba(0,0,0,0.6),
    0 0 14px rgba(var(--neon-1-rgb), 0.2) !important;
}
.wr-seat {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(0,0,0,0.4);
}
.wr-seat.filled {
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent-warm) 70%, #8a5810 100%) !important;
  box-shadow: 0 0 10px rgba(var(--accent-warm-rgb), 0.8), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  border-color: rgba(120,80,0,0.6) !important;
}
.wr-card.wr-active {
  border-color: rgba(var(--neon-2-rgb), 0.4) !important;
  background: linear-gradient(160deg, rgba(var(--neon-2-rgb), 0.06) 0%, var(--glass-2) 100%) !important;
}
.wr-card.wr-hot {
  border-color: rgba(var(--neon-1-rgb), 0.6) !important;
  background: linear-gradient(160deg, rgba(var(--neon-1-rgb), 0.1) 0%, var(--glass-2) 100%) !important;
  animation: hotPulse 1.4s ease-in-out infinite !important;
}
@keyframes hotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--neon-1-rgb), 0), 0 4px 14px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 0 3px rgba(var(--neon-1-rgb), 0.25), 0 4px 18px rgba(var(--neon-1-rgb), 0.35); }
}
.wr-card:hover {
  border-color: rgba(var(--neon-2-rgb), 0.65) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 22px rgba(var(--neon-2-rgb), 0.25) !important;
  background: linear-gradient(160deg, rgba(var(--neon-2-rgb), 0.08) 0%, var(--glass-2) 100%) !important;
}
.wr-card.wr-active .wr-count, .wr-card.wr-active .wr-status { color: var(--neon-2) !important; }
.wr-card.wr-hot .wr-count, .wr-card.wr-hot .wr-status { color: var(--neon-1) !important; }
.wr-card.wr-full { opacity: 0.35 !important; }

/* Inputs */
.lp-input-row input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--line-2) !important;
  font-family: var(--body-font);
  font-weight: 500;
}
.lp-input-row input:focus {
  border-color: var(--neon-1) !important;
  box-shadow: 0 0 0 3px rgba(var(--neon-1-rgb), 0.2);
}

/* Room slots */
.room-slot.filled {
  background: var(--glass-2) !important;
  border: 1.5px solid var(--line-2) !important;
}
.rs-avatar { box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.rs-badge.you { background: rgba(var(--neon-1-rgb), 0.2) !important; border-color: rgba(var(--neon-1-rgb), 0.4) !important; color: var(--neon-1) !important; }
.rs-badge.bot { background: rgba(255,255,255,0.06) !important; border-color: var(--line-2) !important; }
#room-status-msg.room-full { color: var(--good) !important; }
#room-countdown {
  color: var(--neon-1) !important;
  text-shadow: 0 0 24px rgba(var(--neon-1-rgb), 0.7);
  font-family: var(--display-font);
  font-size: 3rem !important;
}

/* Primary button — neon */
.btn-primary {
  background: linear-gradient(135deg, var(--neon-1) 0%, var(--accent-cool) 50%, var(--neon-2) 100%) !important;
  background-size: 200% auto !important;
  color: #fff !important;
  font-family: var(--display-font-2) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 8px 28px rgba(var(--neon-1-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  border-radius: 14px !important;
  letter-spacing: 4px !important;
}
.btn-primary:hover {
  background-position: right center !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.2),
    0 12px 36px rgba(var(--neon-1-rgb), 0.6),
    0 0 32px rgba(var(--neon-2-rgb), 0.4),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* ─────────────────────────────────────────────────────────────
   DEALER DRAW SCREEN
   ───────────────────────────────────────────────────────────── */
#draw-screen {
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, var(--felt) 0%, var(--felt-dark) 80%),
    var(--bg-0) !important;
  position: relative;
}
#draw-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 30% at 50% 20%, rgba(var(--neon-2-rgb), 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 80%, rgba(var(--neon-1-rgb), 0.12) 0%, transparent 70%);
}
.draw-box h2 {
  font-family: var(--display-font);
  background: linear-gradient(180deg, #fff, var(--accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 4px;
  font-size: 1.8rem !important;
}
#draw-grid {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
}
.dc-back {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(var(--neon-2-rgb), 0.06) 4px, rgba(var(--neon-2-rgb), 0.06) 5px),
    linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 60%, var(--bg-1) 100%) !important;
  border: 1.5px solid rgba(var(--neon-1-rgb), 0.4) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--neon-2-rgb), 0.15) inset !important;
}
.dc-back::after {
  border-color: rgba(var(--accent-warm-rgb), 0.45) !important;
}
.draw-card-wrap:hover .dc-back {
  box-shadow: 0 0 0 2px var(--neon-1), 0 0 24px rgba(var(--neon-1-rgb), 0.6), 0 8px 24px rgba(0,0,0,0.6) !important;
}
.draw-result-item.dr-winner {
  border-color: var(--neon-1) !important;
  background: rgba(var(--neon-1-rgb), 0.1) !important;
  box-shadow: 0 0 28px rgba(var(--neon-1-rgb), 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────
   GAME TABLE — Toto
   ───────────────────────────────────────────────────────────── */
#game-screen.active {
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, var(--bg-2) 0%, var(--bg-0) 80%) !important;
}

#table {
  /* Neon-rim oval felt */
  background:
    radial-gradient(ellipse 65% 50% at 50% 35%, rgba(var(--neon-2-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
    radial-gradient(ellipse 100% 100% at 50% 50%, var(--felt-mid) 0%, var(--felt) 55%, var(--felt-dark) 100%),
    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.06) 2px, rgba(0,0,0,0.06) 3px) !important;
  /* Replace wood ring with neon piping */
  box-shadow:
    inset 0 0 0 2px rgba(var(--neon-1-rgb), 0.55),
    inset 0 0 0 4px rgba(0,0,0,0.6),
    inset 0 0 0 5px rgba(var(--neon-2-rgb), 0.35),
    inset 0 0 0 10px rgba(0,0,0,0.85),
    inset 0 0 60px rgba(var(--neon-2-rgb), 0.15),
    0 30px 90px rgba(0,0,0,0.95),
    0 0 80px rgba(var(--neon-1-rgb), 0.18),
    0 0 140px rgba(var(--neon-2-rgb), 0.15) !important;
}

.pinfo {
  background: var(--glass-1) !important;
  border: 1px solid var(--line-2) !important;
  backdrop-filter: blur(14px) saturate(1.6);
}
.pname-label { font-weight: 700; }
.pbid-label  { color: var(--accent-warm) !important; }

/* Turn pulse — neon */
@keyframes turnPulseNeon {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--neon-1-rgb), 0.6), 0 0 18px rgba(var(--neon-1-rgb), 0.4); }
  50%     { box-shadow: 0 0 0 10px rgba(var(--neon-1-rgb), 0),   0 0 32px rgba(var(--neon-1-rgb), 0.9); }
}
.pinfo.is-turn {
  border: 1.5px solid var(--neon-1) !important;
  background: linear-gradient(135deg, rgba(var(--neon-1-rgb), 0.18), var(--glass-1)) !important;
  animation: turnPulseNeon 1.4s ease-in-out infinite !important;
}
.pinfo.is-dealer .pavatar::before {
  background: var(--accent-warm) !important;
  color: #000 !important;
  box-shadow: 0 0 8px rgba(var(--accent-warm-rgb), 0.6);
}

/* Round info bubble */
#round-info {
  background: var(--glass-1) !important;
  border: 1px solid var(--line-2);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--line-1);
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-family: var(--body-font);
}
#round-info span { color: var(--ink-2); letter-spacing: 0.5px; }
#ri-round { color: var(--ink-1) !important; font-weight: 700; }
#ri-trump { color: var(--neon-1) !important; text-shadow: 0 0 10px rgba(var(--neon-1-rgb), 0.4); }

/* Trump badge */
#trump-badge {
  background: var(--glass-1) !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 12px 36px rgba(0,0,0,0.65), 0 0 24px rgba(var(--neon-2-rgb), 0.2);
}
#trump-badge.trump-red {
  border-color: var(--neon-1) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.65), 0 0 28px rgba(var(--neon-1-rgb), 0.5) !important;
}
#trump-badge.trump-black {
  border-color: var(--neon-2) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.65), 0 0 28px rgba(var(--neon-2-rgb), 0.4) !important;
}
#trump-badge-name { color: var(--ink-2) !important; }

.screen-back-btn {
  background: var(--glass-1) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
  backdrop-filter: blur(10px);
  border-radius: 10px !important;
  font-family: var(--body-font);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.screen-back-btn:hover {
  border-color: var(--neon-2) !important;
  color: var(--neon-2) !important;
  box-shadow: 0 0 18px rgba(var(--neon-2-rgb), 0.3);
}

/* Trick play area ring */
#center-area::before {
  border-color: rgba(var(--neon-2-rgb), 0.18) !important;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.25), 0 0 24px rgba(var(--neon-2-rgb), 0.06) !important;
}

/* Bid buttons */
.bid-btn {
  background: var(--glass-1) !important;
  border: 1.5px solid var(--line-2) !important;
  color: var(--ink-1) !important;
  font-family: var(--body-font);
}
.bid-btn:hover {
  background: var(--neon-1) !important;
  border-color: var(--neon-1) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(var(--neon-1-rgb), 0.6), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Timer */
#timer-fill { background: linear-gradient(90deg, var(--neon-2), var(--neon-1)) !important; }
#timer-fill.urgent { background: var(--bad) !important; box-shadow: 0 0 14px var(--bad); }

/* ─────────────────────────────────────────────────────────────
   CARDS
   ───────────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, #fff 0%, #f5efe0 100%) !important;
  border: 1.5px solid #d8c79c !important;
  outline: 1px solid rgba(var(--accent-warm-rgb), 0.35) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.05),
    inset 0 0 0 2px rgba(255,235,180,0.25) !important;
}
.card.red  { color: var(--red) !important; }
.card.black { color: #0a0a0d !important; }
.card .c-suit-bg { opacity: 0.06 !important; }

/* Premium card back — neon damask */
.card-back {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(var(--neon-2-rgb), 0.06) 4px, rgba(var(--neon-2-rgb), 0.06) 5px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 4px, rgba(var(--neon-1-rgb), 0.06) 4px, rgba(var(--neon-1-rgb), 0.06) 5px),
    linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-1) 100%) !important;
  border: 1.5px solid rgba(var(--neon-1-rgb), 0.5) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(var(--neon-2-rgb), 0.18),
    inset 0 1px 0 rgba(var(--neon-1-rgb), 0.2) !important;
}
.card-back::before {
  border-color: rgba(var(--accent-warm-rgb), 0.55) !important;
}
.card-back::after {
  content: '◈' !important;
  color: rgba(var(--accent-warm-rgb), 0.45) !important;
  text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.5);
}

/* Playable cards — neon hover */
.card.playable:hover {
  box-shadow:
    0 16px 36px rgba(0,0,0,0.7),
    0 0 0 2.5px var(--neon-1),
    0 0 32px rgba(var(--neon-1-rgb), 0.6) !important;
}

/* ─────────────────────────────────────────────────────────────
   SCOREBOARD
   ───────────────────────────────────────────────────────────── */
#scoreboard {
  background: linear-gradient(180deg, var(--glass-1) 0%, rgba(0,0,0,0.5) 100%) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--neon-1-rgb), 0.05);
  position: relative;
  overflow: hidden;
}
#scoreboard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--neon-1), var(--accent-warm), var(--neon-2));
  z-index: 2;
}
#sb-header {
  background: linear-gradient(180deg, rgba(var(--neon-1-rgb), 0.1) 0%, rgba(var(--neon-1-rgb), 0.02) 100%) !important;
  border-bottom: 1px solid var(--line-2) !important;
  color: var(--accent-warm) !important;
  font-family: var(--display-font-2);
  letter-spacing: 2px;
  text-transform: uppercase;
}
#sb-table th { background: rgba(0,0,0,0.4) !important; color: var(--ink-3) !important; font-family: var(--body-font); letter-spacing: 0.5px; }
#sb-table tr.current-row td { background: rgba(var(--neon-1-rgb), 0.1) !important; }
.sb-hit { color: var(--good) !important; }
.sb-miss-x { color: var(--bad) !important; }
#sb-table tfoot td {
  color: var(--accent-warm) !important;
  border-top: 2px solid rgba(var(--accent-warm-rgb), 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────
   MODALS (trump choose, game over)
   ───────────────────────────────────────────────────────────── */
.modal-box {
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-0) 100%) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(var(--neon-1-rgb), 0.1), 0 0 80px rgba(var(--neon-1-rgb), 0.18) !important;
  padding: 36px !important;
}
.modal-box h3 {
  font-family: var(--display-font-2);
  color: var(--accent-warm) !important;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.trump-btn {
  background: var(--glass-2) !important;
  border: 1.5px solid var(--line-2) !important;
  font-family: var(--body-font);
  font-weight: 700;
}
.trump-btn:hover {
  border-color: var(--neon-1) !important;
  color: var(--neon-1) !important;
  box-shadow: 0 0 24px rgba(var(--neon-1-rgb), 0.4);
}

.go-box {
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-0) 100%) !important;
  border: 2px solid var(--neon-1) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 80px rgba(var(--neon-1-rgb), 0.35), 0 30px 80px rgba(0,0,0,0.9) !important;
}
.go-box h2 {
  font-family: var(--display-font);
  background: linear-gradient(180deg, #fff, var(--accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 4px;
}
.go-winners {
  background: rgba(var(--accent-warm-rgb), 0.08) !important;
  border-color: rgba(var(--accent-warm-rgb), 0.35) !important;
}
.go-rank-winner { background: rgba(var(--neon-1-rgb), 0.12) !important; }
.go-rank-winner .rank-pos { background: var(--neon-1) !important; color: #fff !important; box-shadow: 0 0 14px rgba(var(--neon-1-rgb), 0.6); }
.btn-next {
  background: linear-gradient(135deg, var(--neon-1), var(--accent-cool)) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(var(--neon-1-rgb), 0.4);
}

/* ─────────────────────────────────────────────────────────────
   TAVLA — variant screen & game
   ───────────────────────────────────────────────────────────── */
#tavla-variant-screen { font-family: var(--display-font-2) !important; }
#tvs-overlay {
  background:
    radial-gradient(ellipse 55% 70% at 35% 50%, transparent 0%, rgba(0,0,0,0.4) 100%),
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(var(--neon-1-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(var(--neon-2-rgb), 0.16) 0%, transparent 60%),
    linear-gradient(to right,  rgba(0,0,0,0.6) 0%, transparent 28%, transparent 68%, rgba(0,0,0,0.65) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 22%, transparent 75%, rgba(0,0,0,0.85) 100%) !important;
}
#tvs-logo-title {
  font-family: var(--display-font) !important;
  background: linear-gradient(180deg, #fff 0%, var(--accent-warm) 55%, var(--neon-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 40px rgba(var(--accent-warm-rgb), 0.4),
    0 0 80px rgba(var(--neon-2-rgb), 0.3) !important;
}
#tvs-logo-edition { color: var(--ink-3) !important; letter-spacing: 8px !important; }
#tvs-gear {
  background: var(--glass-1) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-2) !important;
}
#tvs-gear:hover {
  border-color: var(--neon-2) !important;
  color: var(--neon-2) !important;
  box-shadow: 0 0 18px rgba(var(--neon-2-rgb), 0.4);
}

.tvs-panel {
  background: var(--glass-1) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
}
.tvs-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--neon-2-rgb), 0.6), transparent);
}
.tvs-ph { color: var(--ink-3) !important; }
.tvs-top1 { color: var(--accent-warm) !important; text-shadow: 0 0 10px rgba(var(--accent-warm-rgb), 0.4); }
.tvs-av { background: linear-gradient(135deg, var(--bg-3), var(--bg-2)) !important; border-color: var(--line-2) !important; }
.tvs-sel {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-1) !important;
}
.tvs-ctrl button {
  background: var(--glass-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
}
.tvs-ctrl button:hover { border-color: var(--neon-2) !important; color: var(--neon-2) !important; }
.tvs-ctrl span {
  background: rgba(0,0,0,0.4) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-1) !important;
}

/* Bottom nav pills */
.tvs-npill {
  background: var(--glass-1) !important;
  border: 1.5px solid var(--line-2) !important;
  color: var(--ink-2) !important;
  font-family: var(--display-font-2) !important;
}
.tvs-npill:hover {
  border-color: var(--neon-2) !important;
  color: var(--neon-2) !important;
  box-shadow: 0 0 22px rgba(var(--neon-2-rgb), 0.3) !important;
}

#tvs-bottom {
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
}

/* OYNA mega button — gold neon */
#tvs-play-btn {
  font-family: var(--display-font) !important;
  background: linear-gradient(175deg, #fff5d0 0%, var(--accent-warm) 35%, #c08020 65%, var(--accent-warm) 100%) !important;
  color: #2a1500 !important;
  box-shadow:
    0 0 0 2px #7a5808,
    0 0 0 5px rgba(var(--accent-warm-rgb), 0.4),
    0 0 60px rgba(var(--accent-warm-rgb), 0.35),
    0 14px 40px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
#tvs-play-btn:hover {
  box-shadow:
    0 0 0 2px #7a5808,
    0 0 0 6px rgba(var(--accent-warm-rgb), 0.55),
    0 0 80px rgba(var(--accent-warm-rgb), 0.55),
    0 18px 48px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
#tvs-devmode-btn {
  font-family: var(--display-font-2) !important;
  background: var(--glass-1) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-3) !important;
}
#tvs-devmode-btn:hover { border-color: var(--neon-2) !important; color: var(--neon-2) !important; }

/* Tavla game backdrop */
#tavla-game {
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, var(--bg-2) 0%, var(--bg-0) 80%) !important;
}
#tg-topbar {
  background: var(--glass-1) !important;
  border-bottom: 1px solid var(--line-2) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
#tg-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-2), transparent);
  opacity: 0.5;
}
#tg-topbar { position: relative; }
#tg-variant-label {
  font-family: var(--display-font-2);
  color: var(--accent-warm) !important;
  text-shadow: 0 0 10px rgba(var(--accent-warm-rgb), 0.4);
}
#tg-back-btn {
  background: var(--glass-2) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-2) !important;
}
#tg-roll-btn {
  background: linear-gradient(135deg, var(--neon-1), var(--accent-cool)) !important;
  color: #fff !important;
  font-family: var(--display-font-2);
  letter-spacing: 2px;
  border: none !important;
  box-shadow: 0 8px 24px rgba(var(--neon-1-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
#tg-roll-btn:hover {
  box-shadow: 0 12px 32px rgba(var(--neon-1-rgb), 0.6), 0 0 32px rgba(var(--neon-2-rgb), 0.3), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
#tg-end-btn {
  background: linear-gradient(135deg, var(--neon-2), #2a90a8) !important;
  color: #04141a !important;
  border: none !important;
}
#tg-controls {
  background: var(--glass-1) !important;
  border-top: 1px solid var(--line-2) !important;
}

/* ─────────────────────────────────────────────────────────────
   PROFILE MODAL
   ───────────────────────────────────────────────────────────── */
.pm-box {
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-0) 100%) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(var(--neon-1-rgb), 0.1), 0 0 60px rgba(var(--neon-1-rgb), 0.2) !important;
}
.pm-title {
  color: var(--accent-warm) !important;
  font-family: var(--display-font-2);
}
.pm-color.selected {
  border-color: var(--neon-1) !important;
  box-shadow: 0 0 0 2px rgba(var(--neon-1-rgb), 0.4), 0 0 18px rgba(var(--neon-1-rgb), 0.4) !important;
}
.pm-btn-primary {
  background: linear-gradient(135deg, var(--neon-1), var(--accent-cool)) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(var(--neon-1-rgb), 0.4) !important;
}

/* Toasts */
.kt-toast {
  background: linear-gradient(135deg, var(--accent-warm), #c08820) !important;
  color: #1a0e00 !important;
}
.kt-toast-quest {
  background: linear-gradient(135deg, var(--good), #1a905a) !important;
  color: #04140a !important;
}
.kt-toast-level {
  background: linear-gradient(135deg, var(--neon-1), var(--accent-cool)) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   TWEAKS PANEL
   ───────────────────────────────────────────────────────────── */
#tweaks-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-1), var(--accent-cool));
  border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(var(--neon-1-rgb), 0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--body-font);
}
#tweaks-btn:hover { transform: scale(1.08); box-shadow: 0 12px 36px rgba(var(--neon-1-rgb), 0.7), 0 0 32px rgba(var(--neon-2-rgb), 0.4); }
#tweaks-btn.open { transform: rotate(45deg); }

#tweaks-panel {
  position: fixed;
  bottom: 88px;
  right: 20px;
  z-index: 998;
  width: 340px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(var(--neon-1-rgb), 0.15), 0 0 60px rgba(var(--neon-1-rgb), 0.18);
  font-family: var(--body-font);
  color: var(--ink-1);
  transform-origin: bottom right;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s;
}
#tweaks-panel.hidden {
  transform: scale(0.6) translateY(20px);
  opacity: 0;
  pointer-events: none;
}
#tweaks-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--neon-1), var(--accent-warm), var(--neon-2));
  border-radius: 18px 18px 0 0;
}
.tw-title {
  font-family: var(--display-font-2);
  font-size: 0.78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-warm);
  text-align: center;
  margin-bottom: 18px;
}
.tw-section { margin-bottom: 18px; }
.tw-section:last-child { margin-bottom: 0; }
.tw-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tw-themes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.tw-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
}
.tw-theme:hover { background: rgba(255,255,255,0.06); }
.tw-theme.active {
  border-color: var(--neon-1);
  background: rgba(var(--neon-1-rgb), 0.1);
  box-shadow: 0 0 0 2px rgba(var(--neon-1-rgb), 0.25), 0 0 20px rgba(var(--neon-1-rgb), 0.25);
}
.tw-swatch {
  display: flex;
  gap: 2px;
  width: 32px; height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.tw-swatch > span { flex: 1; }
.tw-theme-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.tw-radios {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  background: rgba(0,0,0,0.3);
  border-radius: 9px;
  padding: 3px;
  border: 1px solid var(--line-1);
}
.tw-radios.cols-2 { --cols: 2; }
.tw-radio {
  padding: 8px 6px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.15s;
  font-family: var(--body-font);
}
.tw-radio:hover { color: var(--ink-1); }
.tw-radio.active {
  background: linear-gradient(135deg, var(--neon-1), var(--accent-cool));
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--neon-1-rgb), 0.4);
}
.tw-footnote {
  font-size: 0.65rem;
  color: var(--ink-4);
  text-align: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-1);
}

/* ─────────────────────────────────────────────────────────────
   MODERN FONT VARIANT (Tweaks: font=modern)
   ───────────────────────────────────────────────────────────── */
[data-font="modern"] {
  --display-font: 'Outfit', 'Inter', system-ui, sans-serif;
  --display-font-2: 'Outfit', 'Inter', system-ui, sans-serif;
}
[data-font="modern"] #mm-logo,
[data-font="modern"] #lp-logo h1,
[data-font="modern"] #tvs-logo-title,
[data-font="modern"] .draw-box h2 {
  font-weight: 800;
  letter-spacing: 6px;
}
[data-font="modern"] .mm-game-name { font-weight: 900; letter-spacing: 2px; }

/* ─────────────────────────────────────────────────────────────
   FAMILY: SUITS retone in red theme
   ───────────────────────────────────────────────────────────── */
[data-theme="crimson"] .card.red { color: var(--neon-1) !important; }
[data-theme="emerald"] .card.red { color: #e8404a !important; }
[data-theme="violet"]  .card.red { color: var(--neon-1) !important; }

/* ─────────────────────────────────────────────────────────────
   SCROLLBARS
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--neon-1-rgb), 0.3), rgba(var(--neon-2-rgb), 0.3));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--neon-1-rgb), 0.6), rgba(var(--neon-2-rgb), 0.6)); }

/* ─────────────────────────────────────────────────────────────
   MOBILE TUNING
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  #tweaks-panel { right: 10px; left: 10px; width: auto; }
  #mm-logo { letter-spacing: 5px !important; }
}