:root {
  --uno-red: #ff3b65;
  --uno-blue: #0ea5e9;
  --uno-green: #10b981;
  --uno-yellow: #facc15;
  --uno-wild: #1e1e24;
  --bg-gradient: radial-gradient(ellipse at 50% 10%, #152238 0%, #0a101d 45%, #030710 100%);
  --felt-gradient: radial-gradient(ellipse at center, #1e4a38 0%, #0d271c 100%);
  --table-rim: #2d1810;
  --rim-width: 10px;
  --rim-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 0 15px 35px rgba(0, 0, 0, 0.6);
  --felt-texture-opacity: 0.35;
  --panel-bg: rgba(22, 33, 49, 0.85);
  --border-glass: rgba(255, 255, 255, 0.12);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --radius-card: 12px;
  --header-h: 65px;

  /* Menu/lobby arena backdrop (default: Clean White) — see [data-arena-theme] below */
  --arena-c1: #ffffff;
  --arena-c2: #f3f4f6;
  --arena-c3: #eceef1;
  --arena-c4: #e5e7eb;
  --arena-ray: rgba(0, 0, 0, 0.09);
  --arena-spot-a: rgba(255, 138, 28, 0.1);
  --arena-spot-b: rgba(0, 0, 0, 0.03);
  --arena-glow1-a: rgba(255, 138, 28, 0.1);
  --arena-glow1-b: rgba(0, 0, 0, 0.02);
  --arena-glow2-a: rgba(0, 0, 0, 0.04);
  --arena-glow2-b: rgba(255, 138, 28, 0.05);
  --arena-spark-1: #f59e0b;
  --arena-spark-2: #9ca3af;
  --arena-spark-3: #fb923c;
  --arena-card-glow: rgba(0, 0, 0, 0.15);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg-gradient);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Header */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h);
  padding: 0 24px;
  background: rgba(10, 15, 22, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-glass);
  position: relative;
  z-index: 50;
}

.uno-brand-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uno-text {
  font-family: 'Fredoka', cursive;
  font-size: 28px;
  font-weight: 700;
  color: #ffcc00;
  text-shadow: 2px 2px 0px #e52521, 4px 4px 0px #000;
  transform: skewX(-6deg);
  letter-spacing: -1px;
}

.live-pill {
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  animation: pulse-badge 2s infinite;
}

/* Connection quality (online rooms): replaces the LIVE badge */
body.net-on .live-pill {
  display: none;
}

.net-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--net-color);
  color: var(--net-color);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  --net-color: #94a3b8;
}

.net-status.hidden {
  display: none;
}

.net-status[data-level='good'] {
  --net-color: #22c55e;
}

.net-status[data-level='ok'] {
  --net-color: #facc15;
}

.net-status[data-level='bad'],
.net-status[data-level='offline'] {
  --net-color: #ef4444;
}

.net-status[data-level='offline'] {
  animation: pulse-badge 1s infinite;
}

/* Signal bars: 4 when good, 3 normal, 2 bad, 1 offline */
.net-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}

.net-bars i {
  width: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.net-bars i:nth-child(1) { height: 4px; }
.net-bars i:nth-child(2) { height: 7px; }
.net-bars i:nth-child(3) { height: 10px; }
.net-bars i:nth-child(4) { height: 13px; }

.net-status[data-level='good'] .net-bars i,
.net-status[data-level='ok'] .net-bars i:nth-child(-n + 3),
.net-status[data-level='bad'] .net-bars i:nth-child(-n + 2),
.net-status[data-level='offline'] .net-bars i:nth-child(1) {
  background: var(--net-color);
}

/* Narrow phones: just the bars */
@media (max-width: 480px) {
  .net-status {
    padding: 3px 5px;
  }

  .net-status .net-ms {
    display: none;
  }
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.05); }
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

@media (max-width: 480px) {
  :root {
    --header-h: 55px;
  }

  .app-header {
    padding: 0 12px;
  }

  .header-controls,
  .voice-controls {
    gap: 6px;
  }

  .btn-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .live-pill {
    display: none;
  }
}

.btn-icon {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

/* "How to play" in the header: always there for players who want the rules again */
.btn-howto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 2px solid #fcd116;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(252, 209, 22, 0.24), rgba(252, 209, 22, 0.08));
  color: #fde68a;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-howto:hover,
.btn-howto:focus-visible {
  outline: none;
  background: #fcd116;
  color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(252, 209, 22, 0.4);
}

/* Phones: the words only; just the book when voice chat buttons need the room too */
@media (max-width: 480px) {
  .btn-howto {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }

  .btn-howto-icon {
    display: none;
  }

  .header-controls:has(#btn-voice:not(.hidden)) .btn-howto {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .header-controls:has(#btn-voice:not(.hidden)) .btn-howto-icon {
    display: inline;
  }

  .header-controls:has(#btn-voice:not(.hidden)) .btn-howto-label {
    display: none;
  }
}

/* Narrow phones: slightly smaller header buttons so voice chat, friends and the rest all fit */
@media (max-width: 400px) {
  .header-controls,
  .voice-controls {
    gap: 4px;
  }

  .btn-icon,
  .header-controls:has(#btn-voice:not(.hidden)) .btn-howto {
    width: 31px;
    height: 31px;
    font-size: 14px;
  }
}

@media (max-width: 340px) {
  .btn-howto {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .btn-howto-icon {
    display: inline;
  }

  .btn-howto-label {
    display: none;
  }
}

/* Leave the game / room: next to the logo, only in the waiting room and during a game */
.logo-area {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.btn-leave {
  display: none;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 2px solid rgba(248, 113, 113, 0.75);
  border-radius: 999px;
  background: rgba(229, 37, 33, 0.14);
  color: #fecaca;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-leave:hover,
.btn-leave:focus-visible {
  outline: none;
  background: #e52521;
  border-color: #e52521;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(229, 37, 33, 0.45);
}

body[data-view='game'] .btn-leave,
body[data-view='waiting'] .btn-leave {
  display: inline-flex;
}

.leave-label {
  display: none;
}

body[data-view='game'] .leave-label-game,
body[data-view='waiting'] .leave-label-room {
  display: inline;
}

/* Are you sure? */
.leave-card {
  max-width: 400px;
  animation: picker-pop 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.leave-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 8px;
}

.leave-card p {
  margin-top: 8px;
  color: var(--text-muted);
  line-height: 1.5;
}

.leave-card .modal-buttons button {
  flex: 1;
}

/* Phones: the door only, and the leaderboard steps aside in a room so everything fits */
@media (max-width: 480px) {
  .logo-area {
    gap: 8px;
  }

  .btn-leave {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    font-size: 15px;
  }

  body[data-view='game'] .leave-label-game,
  body[data-view='waiting'] .leave-label-room {
    display: none;
  }

  body[data-view='game'] #btn-leaderboard,
  body[data-view='waiting'] #btn-leaderboard {
    display: none;
  }
}

@media (max-width: 400px) {
  .btn-leave {
    width: 31px;
    height: 31px;
    font-size: 14px;
  }
}

/* Views Management */
.view {
  display: none;
  flex: 1;
  position: relative;
  z-index: 1; /* above the menu backdrop */
}

.view.active {
  display: flex;
  flex-direction: column;
}

.view:not(.active) {
  display: none !important;
}

/* Glass Panels & Common Cards */
.glass-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------------
   Vibrant Royal Arena Backdrop (Lobby & Waiting Screen)
   --------------------------------------------------------------------------- */
body[data-view='lobby'],
body[data-view='waiting'] {
  background: radial-gradient(ellipse at 50% 18%, var(--arena-c1) 0%, var(--arena-c2) 35%, var(--arena-c3) 70%, var(--arena-c4) 100%) !important;
  min-height: 100vh;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

body[data-view='lobby'] .menu-backdrop,
body[data-view='waiting'] .menu-backdrop {
  display: block;
}

/* Ambient Stadium Rays: spread out from the top-left corner across the page.
   Static, not rotating — a full spin would periodically sweep this pinned
   quarter-sweep pattern away from the viewport entirely. */
.menu-backdrop-rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 160%;
  height: 160%;
  background: repeating-conic-gradient(
    from 0deg at 0% 0%,
    var(--arena-ray) 0deg 4deg,
    transparent 4deg 8deg
  );
  pointer-events: none;
  z-index: 1;
}

/* Overhead Stadium Spotlight Beam */
.menu-stadium-spotlight {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  height: 60vh;
  background: radial-gradient(ellipse at 50% -10%, var(--arena-spot-a) 0%, var(--arena-spot-b) 32%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  filter: blur(40px);
}

/* Warm Hero Spotlight behind 3D Logo on Left */
.menu-glow-hero {
  position: absolute;
  top: 20%;
  left: 8%;
  width: 48vmax;
  height: 48vmax;
  border-radius: 50%;
  background: radial-gradient(circle, var(--arena-glow1-a) 0%, var(--arena-glow1-b) 40%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 2;
  animation: hero-glow-pulse 8s ease-in-out infinite alternate;
}

@keyframes hero-glow-pulse {
  from { transform: scale(0.95); opacity: 0.8; }
  to { transform: scale(1.1); opacity: 1; }
}

/* Electric Cyan Aura behind Lobby Panel on Right */
.menu-glow-lobby {
  position: absolute;
  top: 15%;
  right: 5%;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  background: radial-gradient(circle, var(--arena-glow2-a) 0%, var(--arena-glow2-b) 45%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 2;
  animation: lobby-glow-pulse 10s ease-in-out infinite alternate;
}

@keyframes lobby-glow-pulse {
  from { transform: scale(1.05); opacity: 0.85; }
  to { transform: scale(0.95); opacity: 1; }
}

/* Sparkling Atmosphere Dust Motes */
.menu-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.m-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--arena-spark-3);
  box-shadow: 0 0 10px var(--arena-spark-1), 0 0 20px var(--arena-spark-2);
  opacity: 0;
  animation: particle-rise 12s linear infinite;
}

.m-particle.p1 { left: 12%; width: 4px; height: 4px; animation-duration: 14s; animation-delay: 0s; }
.m-particle.p2 { left: 28%; width: 5px; height: 5px; animation-duration: 11s; animation-delay: 2s; background: var(--arena-spark-2); box-shadow: 0 0 10px var(--arena-spark-2); }
.m-particle.p3 { left: 45%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: 5s; }
.m-particle.p4 { left: 62%; width: 6px; height: 6px; animation-duration: 13s; animation-delay: 1s; background: var(--arena-spark-2); box-shadow: 0 0 12px var(--arena-spark-2); }
.m-particle.p5 { left: 78%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: 7s; }
.m-particle.p6 { left: 88%; width: 5px; height: 5px; animation-duration: 10s; animation-delay: 3s; }
.m-particle.p7 { left: 20%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: 9s; }
.m-particle.p8 { left: 70%; width: 4px; height: 4px; animation-duration: 12s; animation-delay: 4s; background: var(--arena-spark-1); box-shadow: 0 0 10px var(--arena-spark-1); }

@keyframes particle-rise {
  0% { transform: translateY(105vh) scale(0.6); opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* Floating UNO Cards in the arena */
.menu-backdrop .floating-card {
  position: absolute;
  top: 0;
  left: var(--x);
  margin: 0;
  cursor: default;
  transition: none;
  opacity: var(--opacity);
  transform: translateY(var(--y)) rotate(var(--rot)) scale(var(--scale));
  animation: card-float var(--dur) linear var(--delay) infinite;
  will-change: transform;
  z-index: 4;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), 0 3px 0 #cbd5e1, 0 0 16px var(--arena-card-glow);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

@keyframes card-float {
  from {
    transform: translateY(105vh) rotate(var(--rot)) scale(var(--scale));
  }
  to {
    transform: translateY(-35vh) rotate(calc(var(--rot) + var(--spin))) scale(var(--scale));
  }
}

/* ---------------------------------------------------------------------------
   Menu background themes (Settings → Menu background). Keep ids in sync
   with ARENA_THEMES in src/client/themes.js.
   --------------------------------------------------------------------------- */
[data-arena-theme='sunset'] {
  --arena-c1: #7a1d0a;
  --arena-c2: #4a1006;
  --arena-c3: #240703;
  --arena-c4: #120302;
  --arena-ray: rgba(255, 138, 28, 0.07);
  --arena-spot-a: rgba(255, 180, 50, 0.35);
  --arena-spot-b: rgba(232, 52, 12, 0.15);
  --arena-glow1-a: rgba(255, 180, 50, 0.34);
  --arena-glow1-b: rgba(232, 52, 12, 0.16);
  --arena-glow2-a: rgba(232, 52, 12, 0.26);
  --arena-glow2-b: rgba(255, 138, 28, 0.12);
  --arena-spark-1: #fbbf24;
  --arena-spark-2: #f97316;
  --arena-spark-3: #fde047;
  --arena-card-glow: rgba(255, 138, 28, 0.28);
}

[data-arena-theme='emerald'] {
  --arena-c1: #0f6b42;
  --arena-c2: #0a4a30;
  --arena-c3: #052e1e;
  --arena-c4: #021a11;
  --arena-ray: rgba(250, 204, 21, 0.05);
  --arena-spot-a: rgba(250, 204, 21, 0.3);
  --arena-spot-b: rgba(45, 212, 191, 0.14);
  --arena-glow1-a: rgba(250, 204, 21, 0.32);
  --arena-glow1-b: rgba(16, 185, 129, 0.14);
  --arena-glow2-a: rgba(45, 212, 191, 0.26);
  --arena-glow2-b: rgba(20, 184, 166, 0.12);
  --arena-spark-1: #fde047;
  --arena-spark-2: #5eead4;
  --arena-spark-3: #fbbf24;
  --arena-card-glow: rgba(45, 212, 191, 0.25);
}

[data-arena-theme='neon'] {
  --arena-c1: #4c1d95;
  --arena-c2: #2e1065;
  --arena-c3: #1a0b3d;
  --arena-c4: #0a0620;
  --arena-ray: rgba(217, 70, 239, 0.06);
  --arena-spot-a: rgba(236, 72, 153, 0.32);
  --arena-spot-b: rgba(34, 211, 238, 0.16);
  --arena-glow1-a: rgba(236, 72, 153, 0.34);
  --arena-glow1-b: rgba(168, 85, 247, 0.14);
  --arena-glow2-a: rgba(34, 211, 238, 0.28);
  --arena-glow2-b: rgba(59, 130, 246, 0.12);
  --arena-spark-1: #f472b6;
  --arena-spark-2: #67e8f9;
  --arena-spark-3: #e879f9;
  --arena-card-glow: rgba(236, 72, 153, 0.28);
}

[data-arena-theme='obsidian'] {
  --arena-c1: #1c1c1c;
  --arena-c2: #121212;
  --arena-c3: #060606;
  --arena-c4: #000000;
  --arena-ray: rgba(250, 204, 21, 0.035);
  --arena-spot-a: rgba(250, 204, 21, 0.22);
  --arena-spot-b: rgba(255, 255, 255, 0.06);
  --arena-glow1-a: rgba(250, 204, 21, 0.24);
  --arena-glow1-b: rgba(255, 255, 255, 0.05);
  --arena-glow2-a: rgba(255, 255, 255, 0.1);
  --arena-glow2-b: rgba(250, 204, 21, 0.08);
  --arena-spark-1: #fde047;
  --arena-spark-2: #f5f5f4;
  --arena-spark-3: #facc15;
  --arena-card-glow: rgba(250, 204, 21, 0.22);
}

[data-arena-theme='white'] {
  --arena-c1: #ffffff;
  --arena-c2: #f3f4f6;
  --arena-c3: #eceef1;
  --arena-c4: #e5e7eb;
  --arena-ray: rgba(0, 0, 0, 0.09);
  --arena-spot-a: rgba(255, 138, 28, 0.1);
  --arena-spot-b: rgba(0, 0, 0, 0.03);
  --arena-glow1-a: rgba(255, 138, 28, 0.1);
  --arena-glow1-b: rgba(0, 0, 0, 0.02);
  --arena-glow2-a: rgba(0, 0, 0, 0.04);
  --arena-glow2-b: rgba(255, 138, 28, 0.05);
  --arena-spark-1: #f59e0b;
  --arena-spark-2: #9ca3af;
  --arena-spark-3: #fb923c;
  --arena-card-glow: rgba(0, 0, 0, 0.15);
}

/* The white theme's backdrop is light, so the text that floats directly on
   it (not inside its own dark card) needs to flip to dark ink too. */
[data-arena-theme='white'] .hero-tagline {
  color: #3f3f46;
  text-shadow: none;
}

[data-arena-theme='white'] .hero-tagline strong {
  color: #c2410c;
}

[data-arena-theme='white'] .live-text {
  color: #334155;
}

[data-arena-theme='white'] .lobby-rating-pill {
  color: #475569;
  background: rgba(0, 0, 0, 0.045);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-arena-theme='white'] .legal-links,
[data-arena-theme='white'] .legal-links a {
  color: #64748b;
}

/* Settings picker: a swatch preview of each menu background */
.theme-preview-arena {
  height: 64px;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 25%, var(--arena-c1) 0%, var(--arena-c2) 45%, var(--arena-c4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* VIEW 1: Welcome screen */
#view-lobby {
  align-items: center;
  gap: 22px;
  padding: 24px 16px 40px;
}

.lobby-desktop-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.lobby-live-badge,
.lobby-perks-grid,
.lobby-rating-pill {
  display: none;
}

.lobby-options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 12px;
}

/* Auto margins centre the content vertically without clipping it on short screens */
.lobby-hero {
  margin-top: auto;
  padding-top: 92px; /* room for the fanned cards above the logo */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* A hand of cards fanned out behind the logo */
.hero-fan {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 0;
  height: 0;
}

.hero-fan .uno-card {
  position: absolute;
  left: -43px;
  top: -150px;
  margin: 0;
  cursor: default;
  transition: none;
  transform-origin: 50% 150%;
  transform: rotate(var(--fan-rot));
  animation: fan-open 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  animation-delay: var(--fan-delay);
}

@keyframes fan-open {
  from {
    transform: rotate(0deg) translateY(30px);
    opacity: 0;
  }
}

.hero-logo {
  position: relative;
  width: clamp(220px, 62vw, 300px);
  aspect-ratio: 1.75;
  display: grid;
  place-items: center;
  margin: 0;
  animation: logo-bob 4s ease-in-out infinite;
}

/* The ZERO MERCY logo: a fiery wordmark on an angled dark plate */
.hero-logo-plate {
  position: absolute;
  inset: 16% 2% 14%;
  transform: rotate(-7deg) skewX(-12deg);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%),
    linear-gradient(135deg, #2a0e0a 0%, #120606 55%, #2b0a05 100%);
  border: 3px solid #ff7a1a;
  box-shadow:
    0 0 0 4px #120606,
    0 0 34px rgba(255, 94, 26, 0.55),
    0 22px 45px rgba(0, 0, 0, 0.55);
}

.hero-logo-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(72px, 20vw, 108px);
  line-height: 1;
  transform: rotate(-7deg);
}

.hero-logo-zero {
  font-family: 'Rubik', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 0.78em;
  letter-spacing: 0.02em;
  line-height: 0.95;
  background: linear-gradient(180deg, #fff6c2 0%, #ffd23f 30%, #ff8a1c 62%, #e8340c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #1a0703;
  filter: drop-shadow(0 4px 0 #1a0703) drop-shadow(0 0 14px rgba(255, 120, 30, 0.55));
}

.hero-logo-mercy {
  margin-top: 0.06em;
  padding: 0.04em 0.34em 0.06em;
  border-radius: 6px;
  background: linear-gradient(180deg, #ff5a1f, #c21d0a);
  box-shadow: 0 3px 0 #1a0703, 0 6px 14px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-family: 'Rubik', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 0.3em;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* keeps the spaced letters centred */
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

@keyframes logo-bob {
  50% {
    transform: translateY(-8px) rotate(1.5deg);
  }
}

.hero-tagline {
  margin-top: 20px;
  max-width: 480px;
  font-size: 16px;
  line-height: 1.5;
  color: #e2e8f0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8);
}

.hero-tagline strong {
  font-family: 'Fredoka', sans-serif;
  color: #ff9a3c;
}

/* The join box, with a four-colour UNO border */
.lobby-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 28px 26px;
  border-radius: 22px;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(14, 21, 34, 0.88), rgba(14, 21, 34, 0.88)) padding-box,
    linear-gradient(135deg, #e51d24, #ffd500 35%, #26a23a 65%, #0076ce) border-box;
  backdrop-filter: blur(14px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
}

.lobby-card .input-group {
  margin-bottom: 16px;
}

.lobby-card input {
  padding: 14px 16px;
  font-size: 17px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.6);
}

.lobby-card input:focus {
  border-color: #fcd116;
  box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.25);
}

.lobby-card .btn-large {
  padding: 15px;
  border-radius: 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 19px;
  letter-spacing: 0.3px;
}

.lobby-card .join-inline .btn {
  padding: 0 24px;
  border-radius: 12px;
  font-size: 16px;
}

/* Account deletion and the privacy links */
.delete-account-link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: #f87171;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.legal-links {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.legal-links a {
  color: inherit;
}

/* Solo / 2v2 */
.style-group {
  margin: 4px 0 12px;
}

.style-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.style-picker {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-glass);
}

.style-option {
  min-width: 86px;
  padding: 7px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.style-option.selected {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.35);
}

.style-picker.locked .style-option {
  cursor: default;
}

.style-picker.locked .style-option:not(.selected) {
  opacity: 0.45;
}

.style-picker-compact {
  margin-top: 8px;
}

.style-picker-compact .style-option {
  min-width: 70px;
  padding: 5px 10px;
  font-size: 13px;
}

.style-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.style-hint[hidden],
.size-row[hidden] {
  display: none;
}

.team-chip {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
}

.team-chip.team-0 {
  background: #0d9488;
}

.team-chip.team-1 {
  background: #9333ea;
}

/* In the game: my 2v2 partner */
.seat.partner .opp-avatar {
  border-color: #fdba74;
}

.partner-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  background: #f59e0b;
  color: #1f2937;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* Play Online: table size chips and the big button */
.online-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.size-picker {
  display: flex;
  gap: 4px;
}

.size-chip {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}

.size-chip:hover {
  transform: translateY(-1px);
  border-color: #38bdf8;
}

.size-chip.selected {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
}

.btn-online {
  background: linear-gradient(135deg, #0ea5e9, #2563eb 60%, #7c3aed);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.btn-online:hover:not(:disabled) {
  background: linear-gradient(135deg, #38bdf8, #3b82f6 60%, #8b5cf6);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55);
}

/* Finding players… */
.match-card {
  max-width: 400px;
  text-align: center;
}

.match-globe {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 6px;
  animation: match-spin 3s ease-in-out infinite;
}

@keyframes match-spin {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50% { transform: rotate(12deg) scale(1.08); }
}

.match-sub {
  margin: 4px 0 14px;
  color: var(--text-muted);
  font-weight: 700;
}

.match-seats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.match-seat {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px dashed var(--border-glass);
  color: var(--text-muted);
  font-weight: 800;
  animation: match-wait 1.4s ease-in-out infinite;
}

.match-seat.filled {
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(135deg, hsl(var(--hue) 85% 62%), hsl(calc(var(--hue) + 40) 75% 40%));
  color: #ffffff;
  animation: match-pop 0.35s ease-out;
}

@keyframes match-wait {
  50% { opacity: 0.45; }
}

@keyframes match-pop {
  from { transform: scale(0.4); }
  to { transform: scale(1); }
}

.match-count {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
}

.match-hint {
  min-height: 2.6em;
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.public-note {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
}

.public-note[hidden] {
  display: none;
}

.next-round-hint {
  margin: 6px 0 0;
  font-weight: 800;
  color: #38bdf8;
}

.next-round-hint.hidden {
  display: none;
}

/* Create Room / Play Offline side by side */
.lobby-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-mode {
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 14px;
  line-height: 1.2;
}

.btn-mode-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.btn-mode-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Big, bold stake & multiplier badge on lobby buttons */
.stake-highlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(4, 18, 40, 0.8);
  border: 1.5px solid #ffd700;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #ffeb3b;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 8px rgba(255, 215, 0, 0.25);
  letter-spacing: 0.3px;
  vertical-align: middle;
}

.stake-highlight-badge .stake-badge-coin {
  color: #fef08a;
  font-weight: 800;
}

.stake-highlight-badge .stake-badge-mult {
  color: #38bdf8;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.1em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

#btn-play-online .stake-highlight-badge {
  font-size: 16px;
  padding: 3px 14px;
  background: rgba(3, 14, 32, 0.88);
  border: 2px solid #ffd700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.3);
}

#btn-play-online .stake-highlight-badge .stake-badge-mult {
  color: #4ade80;
}

.btn-offline {
  background: linear-gradient(135deg, #26a23a, #15803d);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(38, 162, 58, 0.35);
}

.btn-offline:hover:not(:disabled) {
  background: linear-gradient(135deg, #34c759, #16a34a);
  box-shadow: 0 6px 20px rgba(38, 162, 58, 0.5);
}

.lobby-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lobby-divider::before,
.lobby-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-glass);
}

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 3.2s ease-in-out infinite;
}

@keyframes btn-shine {
  0%,
  60% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

.lobby-features {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin-bottom: auto;
}

.lobby-features li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
}

/* Short laptop screens: tighten the welcome screen so it fits without scrolling */
@media (max-height: 800px) and (min-width: 641px) {
  #view-lobby {
    gap: 14px;
    padding: 12px 16px 16px;
  }

  .lobby-hero {
    padding-top: 66px;
  }

  .hero-logo {
    width: 220px;
  }

  .hero-logo-text {
    font-size: 78px;
  }

  .hero-fan {
    transform: scale(0.8);
  }

  .hero-tagline {
    margin-top: 12px;
  }

  .lobby-card {
    padding: 20px 22px;
  }
}

@media (max-height: 680px) and (min-width: 641px) {
  .lobby-features {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-glow,
  .menu-backdrop .floating-card,
  .hero-logo,
  .hero-fan .uno-card,
  .btn-shine::after {
    animation: none;
  }
}

/* Widescreen Desktop Landing Experience */
@media (min-width: 992px) {
  #view-lobby.active {
    display: grid !important;
    grid-template-columns: minmax(380px, 460px) minmax(560px, 700px);
    justify-content: center;
    align-items: center;
    gap: 48px 60px;
    max-width: 1280px;
    width: 94%;
    margin: 10px auto 40px;
    padding: 30px 24px 50px;
    min-height: calc(100vh - 90px);
  }

  .lobby-desktop-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 22px;
  }

  .lobby-hero {
    margin: 0;
    padding-top: 50px;
    align-items: flex-start;
    text-align: left;
  }

  .hero-logo {
    width: 320px;
  }

  .hero-logo-text {
    font-size: 110px;
  }

  .hero-tagline {
    text-align: left;
    font-size: 19px;
    line-height: 1.5;
    max-width: 440px;
    margin-top: 22px;
    color: #f1f5f9;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  }

  /* Live counter badge */
  .lobby-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    color: #34d399;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
    font-weight: 500;
  }

  .live-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: live-pulse 1.8s infinite;
  }

  @keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
  }

  /* Desktop perks grid */
  .lobby-perks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 450px;
    margin-top: 4px;
  }

  .perk-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    padding: 12px 14px;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
  }

  .perk-card:hover {
    transform: translateY(-2px);
    border-color: rgba(252, 209, 22, 0.5);
    background: rgba(30, 41, 59, 0.8);
  }

  .perk-icon {
    font-size: 22px;
    line-height: 1;
    margin-top: 2px;
  }

  .perk-card strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 2px;
  }

  .perk-card span {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
  }

  /* Rating pill */
  .lobby-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-glass);
  }

  .lobby-rating-pill .stars {
    font-size: 13px;
    letter-spacing: 2px;
  }

  .legal-links {
    text-align: left;
    margin: 6px 0 0;
  }

  /* The Wide Right Card */
  .lobby-card {
    max-width: 700px !important;
    width: 100%;
    padding: 26px 36px;
    border-radius: 28px;
    background:
      linear-gradient(rgba(14, 21, 34, 0.94), rgba(14, 21, 34, 0.94)) padding-box,
      linear-gradient(135deg, #e51d24, #ffd500 35%, #26a23a 65%, #0076ce) border-box;
    box-shadow:
      0 25px 70px rgba(0, 0, 0, 0.75),
      0 0 50px rgba(252, 209, 22, 0.15);
  }

  /* Mode Picker on Wide Screen */
  .mode-picker {
    gap: 14px;
  }

  .mode-tile {
    padding: 14px 12px 16px;
    border-radius: 18px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  }

  .mode-tile:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  }

  /* Options Row on Desktop: Solo/2v2 side by side with Table Size */
  .lobby-options-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: center;
    margin: 10px 0 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 10px 16px;
  }

  .lobby-options-row .style-group,
  .lobby-options-row .table-size-group {
    margin: 0;
  }

  .lobby-options-row .style-row,
  .lobby-options-row .size-row {
    margin: 0;
  }

  /* Large Play Online CTA Button */
  #btn-play-online {
    padding: 18px 24px;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(14, 165, 233, 0.5);
  }

  #btn-play-online .btn-mode-title {
    font-size: 20px;
    letter-spacing: 0.5px;
  }

  #btn-play-online .btn-mode-sub {
    font-size: 13px;
  }

  /* Secondary Buttons */
  .lobby-actions {
    gap: 14px;
  }

  .lobby-actions .btn-mode {
    padding: 15px 18px;
    border-radius: 16px;
  }
}

/* Tablet screens (641px - 991px): Make center card wider */
@media (min-width: 641px) and (max-width: 991px) {
  .lobby-card {
    max-width: 580px !important;
    padding: 32px 30px;
  }

  .lobby-options-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: center;
    margin: 8px 0 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    padding: 8px 12px;
  }
}

.input-group {
  margin-bottom: 24px;
  text-align: left;
}

.input-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.input-group input, .join-inline input {
  width: 100%;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-glass);
  padding: 12px 16px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}

.input-group input:focus, .join-inline input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.join-inline {
  display: flex;
  gap: 8px;
}

.join-inline input {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
}

/* Buttons */
.btn {
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: linear-gradient(135deg, #e52521, #b91c1c);
  color: white;
  box-shadow: 0 4px 15px rgba(229, 37, 33, 0.35);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 6px 20px rgba(229, 37, 33, 0.5);
}

.btn-secondary {
  background: #3b82f6;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #2563eb;
}

.btn-success {
  background: #10b981;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #059669;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-glass);
  color: white;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-large {
  width: 100%;
  padding: 14px;
  font-size: 16px;
}

.btn-small {
  padding: 6px 12px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   MODAL: Floating Stake / Coin Selection Window (Over Welcome Screen)
   --------------------------------------------------------------------------- */
#modal-stake .modal-card,
.stake-modal-card {
  max-width: min(1280px, 94vw) !important;
  width: min(1280px, 94vw) !important;
  max-height: calc(100dvh - 20px) !important;
  overflow-y: auto !important;
  padding: 22px 28px 20px;
  background: radial-gradient(ellipse at 50% 0%, #1e3a8a 0%, #0d1b3e 45%, #080f24 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 45px rgba(56, 189, 248, 0.2) !important;
  position: relative;
  overflow-x: hidden;
  animation: picker-pop 0.28s cubic-bezier(0.2, 1.2, 0.4, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

/* Background Rotating Sunburst Aura */
.stake-modal-sunburst {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.035) 0deg 12deg,
    transparent 12deg 24deg
  );
  animation: stake-sunburst-spin 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes stake-sunburst-spin {
  to { transform: rotate(360deg); }
}

.stake-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 2;
}

.stake-title-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.stake-modal-title {
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 900;
  background: linear-gradient(180deg, #fff7c2 0%, #fcd116 45%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

.stake-modal-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0.4px;
}

.stake-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stake-modal-card .btn-stake-close {
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 15px;
}

.stake-modal-card .btn-stake-close:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: #ef4444;
  transform: scale(1.1);
}

/* Solo / 2v2 Switch Tabs inside Floating Window */
.stake-style-switch {
  background: rgba(3, 20, 44, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 3px;
  display: inline-flex;
  gap: 3px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.stake-style-tab {
  padding: 6px 18px;
  border-radius: 999px;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}

.stake-style-tab:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.stake-style-tab.active {
  background: linear-gradient(180deg, #5eead4 0%, #06b6d4 50%, #0284c7 100%);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Coins Chip in Floating Header */
.stake-coins-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(4, 23, 50, 0.88);
  border: 1.5px solid #facc15;
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.stake-coin-icon {
  font-size: 16px;
}

.stake-balance-val {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

/* Center Carousel of Stake Cards */
.stake-carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 6px 0;
  overflow: hidden;
}

.stake-arrow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(6px);
  user-select: none;
}

.stake-arrow-nav.prev { left: 4px; }
.stake-arrow-nav.next { right: 4px; }

.stake-arrow-nav:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: #ffd700;
  color: #ffd700;
  transform: translateY(-50%) scale(1.1);
}

.stake-cards-carousel {
  display: flex;
  gap: 16px;
  padding: 14px 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

@media (min-width: 1260px) {
  .stake-cards-carousel {
    justify-content: center;
  }
}

.stake-cards-carousel::-webkit-scrollbar {
  height: 5px;
}

.stake-cards-carousel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}

/* Individual Compact UNO Cards in Floating Modal */
.stake-card {
  flex: 0 0 134px;
  height: 202px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 10px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.2s, box-shadow 0.2s;
  scroll-snap-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  user-select: none;
  overflow: hidden;
}

.stake-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Selected Card Halo */
.stake-card.selected {
  border-color: #ffd700 !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.65), 0 0 24px rgba(255, 215, 0, 0.85), 0 14px 30px rgba(0, 0, 0, 0.75) !important;
  transform: translateY(-8px) scale(1.05) !important;
}

.stake-card.selected::before {
  content: '✨';
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 14px;
  z-index: 15;
  filter: drop-shadow(0 0 5px #ffd700);
}

/* Locked Stake Cards (Not enough coins) */
.stake-card.locked {
  filter: grayscale(0.55) brightness(0.68);
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 0.8;
}

.stake-card.locked:hover {
  transform: translateY(-2px);
  filter: grayscale(0.3) brightness(0.8);
  border-color: #ef4444;
}

.stake-card-lock-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.stake-card.locked .stake-card-fee-badge {
  border-color: #ef4444;
  color: #fca5a5;
  background: rgba(30, 10, 10, 0.92);
}

/* Shake animation when clicking an unaffordable card */
@keyframes shake-card {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px) rotate(-1deg); }
  40%, 80% { transform: translateX(6px) rotate(1deg); }
}

.stake-card.shake {
  animation: shake-card 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.8) !important;
}

/* Corner Decorations */
.stake-card-task-icon {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 6;
}

.stake-card-bonus-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%);
  border: 1.5px solid #fff9c4;
  border-radius: 50%;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #78350f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  z-index: 8;
}

.stake-card-tickets {
  position: absolute;
  top: 8px;
  display: flex;
  gap: 2px;
  z-index: 4;
}

.stake-ticket {
  width: 11px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: rotate(-12deg);
}

.stake-ticket.silver { background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 100%); }
.stake-ticket.green { background: linear-gradient(180deg, #86efac 0%, #22c55e 100%); }
.stake-ticket.cyan { background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%); }
.stake-ticket.purple { background: linear-gradient(180deg, #d8b4fe 0%, #9333ea 100%); }
.stake-ticket.gold { background: linear-gradient(180deg, #fde047 0%, #eab308 100%); }

/* Tilted Red Uno Ellipse */
.stake-card-oval {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 104px;
  height: 138px;
  transform: translate(-50%, -50%) rotate(-25deg);
  background: radial-gradient(circle at 35% 30%, #ff4b4b 0%, #dc2626 55%, #991b1b 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* Exciting Gemstone colors for higher multipliers */
.stake-card[data-fee='3000'] .stake-card-oval,
.stake-card[data-fee='6000'] .stake-card-oval {
  background: radial-gradient(circle at 35% 30%, #38bdf8 0%, #0284c7 55%, #0369a1 100%);
}

.stake-card[data-fee='10000'] .stake-card-oval {
  background: radial-gradient(circle at 35% 30%, #c084fc 0%, #9333ea 55%, #581c87 100%);
}

.stake-card[data-fee='20000'] .stake-card-oval {
  background: radial-gradient(circle at 35% 30%, #fde047 0%, #eab308 55%, #854d0e 100%);
}

/* Card Content Area */
.stake-card-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}

/* Fan of Cards for Tier 1 (Classic/Base) */
.stake-card-fan {
  position: relative;
  width: 56px;
  height: 40px;
  margin-bottom: 2px;
}

.stake-mini-card {
  position: absolute;
  width: 20px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
}

.stake-mini-card.c1 {
  background: #e52521;
  transform: translateX(-110%) rotate(-18deg);
}

.stake-mini-card.c2 {
  background: #2ca048;
  transform: translateX(-50%) rotate(0deg);
  z-index: 2;
}

.stake-mini-card.c3 {
  background: #1e1e24;
  transform: translateX(10%) rotate(18deg);
  z-index: 3;
}

.stake-card-classic-title {
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 0 #b45309, 0 3px 6px rgba(0, 0, 0, 0.6), -1px -1px 0 rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

/* Graphic and Big Multiplier for Tiers 2-8 */
.stake-card-art {
  font-size: 20px;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  line-height: 1;
}

.stake-card-multiplier {
  font-family: 'Rubik', 'Fredoka', sans-serif;
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  text-shadow: 0 2.5px 0 #b45309, 0 4px 8px rgba(0, 0, 0, 0.65), -1px -1px 0 rgba(255, 255, 255, 0.8);
  line-height: 1;
  letter-spacing: -1px;
}

/* Bottom Badge: 🪙 ≥amount */
.stake-card-fee-badge {
  position: relative;
  z-index: 6;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.88);
  border: 1.5px solid #ffd700;
  border-radius: 999px;
  padding: 3px 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #fef08a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.stake-card-fee-badge .badge-icon {
  font-size: 13px;
}

/* Footer of Floating Modal */
.stake-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.stake-multiplier-tagline {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #fef08a;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
}

.stake-modal-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stake-modal-buttons #btn-stake-done {
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #e2e8f0;
  transition: all 0.2s ease;
}

.stake-modal-buttons #btn-stake-done:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
  color: #ffffff;
}

.stake-modal-buttons #btn-quick-start {
  background: linear-gradient(180deg, #ffe54c 0%, #f59e0b 50%, #d97706 100%);
  border: 2px solid #fffdf0;
  color: #451a03;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 10px 24px;
  border-radius: 14px;
  box-shadow: 0 4px 0 #92400e, 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 158, 11, 0.45);
  transition: all 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stake-modal-buttons #btn-quick-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #92400e, 0 12px 24px rgba(0, 0, 0, 0.45), 0 0 28px rgba(245, 158, 11, 0.65);
}

.stake-modal-buttons #btn-quick-start:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #92400e, 0 4px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
  .stake-modal-card {
    padding: 14px 12px;
    width: 96%;
  }

  .stake-modal-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .stake-modal-buttons {
    justify-content: stretch;
  }

  .stake-modal-buttons .btn {
    flex: 1;
  }

  .stake-arrow-nav {
    display: none;
  }
}

/* VIEW 2: Waiting Room */
#view-waiting {
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.waiting-card {
  max-width: 540px;
  width: 100%;
  padding: 32px;
}

.waiting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.room-code-display {
  font-size: 15px;
  color: var(--text-muted);
}

.room-code-display strong {
  color: #fcd116;
  font-size: 20px;
  letter-spacing: 2px;
}

.player-roster {
  margin-bottom: 24px;
}

.player-roster h3 {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.roster-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roster-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
}

.roster-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.host-tag {
  background: #fcd116;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.status-badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.status-badge.ready {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.status-badge.waiting {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.waiting-actions {
  display: flex;
  gap: 12px;
}

.waiting-actions button {
  flex: 1;
}

/* VIEW 3: In-Game Virtual Table */
#view-game {
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h)); /* excludes mobile browser bars */
  flex: none; /* use exactly this height rather than growing to fit the table */
  min-height: 0;
  overflow: hidden;
}

.game-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 0;
  background: var(--scene, none) center 60% / cover no-repeat; /* nature themes paint a scene */
}

.table-area {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Opponent seats. Phones: a row above the table (wide screens: see media query below) */
.opponents-zone {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 10px 12px 6px;
  overflow-x: auto;
  z-index: 12;
}

/* Player seats, UNO-app style: a framed picture tile with a name banner across its
   foot, and the player's cards fanned out beside it */
.seat {
  --fan-step: 7px;
  --card-w: 26px;
  --card-h: 38px;
  --tile: 48px;
  --count: 1;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.seat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.opp-avatar {
  --hue: 210;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 28%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, hsl(var(--hue) 95% 78% / 0.9), transparent 55%),
    linear-gradient(160deg, hsl(var(--hue) 82% 58%), hsl(calc(var(--hue) + 35) 76% 34%));
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.75), 0 6px 14px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* A glossy shine across the top of every tile */
.opp-avatar::after {
  content: '';
  position: absolute;
  inset: 0 0 52% 0;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

.seat .opp-avatar,
.my-seat .opp-avatar {
  width: var(--tile);
  height: var(--tile);
  font-size: calc(var(--tile) * 0.46);
}

/* Whose turn it is: a gold frame, and the turn timer running round it (--turn-progress from JS) */
.active-turn .opp-avatar {
  border-color: #fcd116;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.75), 0 0 20px rgba(252, 209, 22, 0.8);
}

.active-turn .opp-avatar::before {
  content: '';
  position: absolute;
  inset: -10px;
  padding: 4px;
  border-radius: 32%;
  background: conic-gradient(var(--ring-color, #fcd116) calc(var(--turn-progress, 1) * 360deg), rgba(255, 255, 255, 0.2) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.active-turn.turn-low .opp-avatar::before {
  --ring-color: #ef4444;
}

/* The name banner: blue for opponents, red for me and my 2v2 partner */
.seat-name {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: calc(var(--tile, 48px) * 1.45);
  max-width: 150px;
  margin-top: calc(var(--tile, 48px) * -0.16);
  padding: 2px 10px;
  border-radius: 9px;
  background: linear-gradient(180deg, #8cc8ff 0%, #3b82f6 40%, #1d4ed8 100%);
  border: 2px solid #0b1f4d;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 8px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.seat.partner .seat-name,
.my-seat .seat-name {
  background: linear-gradient(180deg, #ffc08f 0%, #f97316 40%, #c2410c 100%);
  border-color: #5a1a05;
}

.seat-name .opp-name,
#my-name-display {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An opponent's hand: their cards face down, fanned out, with a count */
.seat-hand {
  position: relative;
  margin-top: 2px;
}

/* A 2v2 partner's cards, face up */
.mini-face {
  position: absolute;
  bottom: 0;
  left: calc(var(--i) * var(--fan-step));
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 5px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  transform: rotate(calc((var(--i) - (var(--count) - 1) / 2) * 4deg));
  transform-origin: 50% 120%;
  overflow: hidden;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}

.mini-face b {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: calc(var(--card-w) * 0.34);
  line-height: 1;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 1px 1px rgba(0, 0, 0, 0.8);
}

.mini-face.mini-red {
  background: #e3202c;
}

.mini-face.mini-blue {
  background: #1f6fd6;
}

.mini-face.mini-green {
  background: #1f9d45;
}

.mini-face.mini-yellow {
  background: #f2c318;
}

.mini-face.mini-wild {
  background: conic-gradient(#e3202c 0 25%, #1f6fd6 0 50%, #f2c318 0 75%, #1f9d45 0);
}

.mini-face.mini-wild b {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.65);
}

.seat-fan {
  position: relative;
  height: var(--card-h);
  width: calc(var(--card-w) + (var(--count) - 1) * var(--fan-step));
}

.mini-back {
  position: absolute;
  bottom: 0;
  left: calc(var(--i) * var(--fan-step));
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  transform: rotate(calc((var(--i) - (var(--count) - 1) / 2) * 4deg));
  transform-origin: 50% 120%;
  overflow: hidden;
}

.mini-back::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  border: 1px solid #ff7a1a;
  background: radial-gradient(ellipse at 50% 42%, #3a130b 0%, #1a0806 65%, #0d0403 100%);
}

.mini-back::after {
  content: 'ZERO';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Rubik', 'Arial Black', sans-serif;
  font-size: 8px;
  font-weight: 900;
  color: #ff9a2e;
  text-shadow: 0 1px 0 #1a0703;
  transform: rotate(-25deg);
}

.seat-count {
  position: absolute;
  top: -8px;
  right: -12px;
  z-index: 2;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fcd116;
  color: #111111;
  border: 2px solid #111111;
  font-size: 12px;
  font-weight: 800;
}

.opp-uno-tag {
  z-index: 2;
  position: absolute;
  top: -8px;
  right: -22px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1.5px solid #ffffff;
  background: #e52521;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 700;
  animation: pulse-badge 1.5s infinite;
}

.btn-catch-uno {
  background: #dc2626;
  color: white;
  border: 2px solid #ffffff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.6);
  animation: pulse-badge 1s infinite;
}

/* Center Table Felt */
.table-felt {
  flex: 1;
  min-height: 0;
  margin: 0 12px 8px;
  background: var(--felt-gradient);
  border-radius: 120px;
  border: var(--rim-width) solid var(--table-rim);
  box-shadow: var(--rim-shadow);
  -webkit-backdrop-filter: var(--felt-backdrop, none);
  backdrop-filter: var(--felt-backdrop, none);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Wide screens: opponents sit around the table, clockwise from my left */
@media (min-width: 900px) and (min-height: 600px), (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  .opponents-zone {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .seat {
    --fan-step: 12px;
    --card-w: 40px;
    --card-h: 60px;
    --tile: 74px;
    position: absolute;
    left: calc(50% + var(--cx) * (50% - var(--seat-inset-x, 90px)));
    top: calc(50% - var(--cy) * (50% - var(--seat-inset-y, 82px)));
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* the tile sits on the seat's spot (its banner is a bit wider); the cards fan out beside it.
       --nudge-y (from app.js) moves a seat down clear of the info pills */
    transform: translate(calc(var(--tile) * -0.725), calc(-50% + var(--nudge-y, 0px)));
    pointer-events: auto;
  }

  /* Left and right edges: cards sweep down along the side of the table, towards the middle */
  .seat.side-left .seat-hand {
    transform: rotate(22deg);
    transform-origin: 0 50%;
    margin-top: 18px;
  }

  .seat.side-right {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + var(--tile) * 0.725), calc(-50% + var(--nudge-y, 0px)));
  }

  .seat.side-right .seat-hand {
    transform: rotate(-22deg);
    transform-origin: 100% 50%;
    margin-top: 18px;
  }

  .seat .seat-name {
    font-size: 14px;
    padding: 3px 12px;
  }

  .seat .mini-back::after {
    font-size: 10px;
  }

  .table-felt {
    margin: var(--felt-inset-top, 112px) var(--felt-inset-x, 130px) 12px;
  }

  /* Timer, turn and direction stack up in the top-left corner, clear of the seats */
  /* Mode, pot, clock and turn wrap along the top-left, clear of the side seats (the
     turn timer runs round the player's tile, so the bar isn't needed here) */
  .table-area > .table-info-overlay {
    top: 12px;
    bottom: auto;
    left: 16px;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: calc(50% - 100px);
  }

  .table-area .turn-timer-bar,
  .table-area .direction-indicator {
    display: none; /* the ring round the tile and the arrows round the pile show these */
  }

  .game-clock {
    font-size: 16px;
    padding: 6px 14px;
  }

  /* Six or more opponents: smaller seats, and along the far side the cards go under the tile */
  .opponents-zone.crowded .seat {
    --fan-step: 7px;
    --card-w: 30px;
    --card-h: 44px;
    --tile: 56px;
  }

  .opponents-zone.crowded .seat.side-top {
    flex-direction: column;
    gap: 6px;
    transform: translate(-50%, calc(-38% + var(--nudge-y, 0px)));
  }

  .opponents-zone.crowded .seat.side-top .seat-coins {
    display: none;
  }

  .opponents-zone.crowded .seat .seat-name {
    font-size: 12px;
  }

  .my-seat {
    --tile: 64px;
  }
}

/* Subtle cloth grain over every table theme */
.table-felt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(120px - var(--rim-width));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: var(--felt-texture-opacity);
  pointer-events: none;
}

.table-surface {
  display: flex;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 5;
}

/* Shorter screens: shrink the piles a little so the table isn't crowded */
@media (max-height: 820px) {
  .table-surface {
    transform: scale(0.85);
  }
}

@media (max-height: 720px) {
  .table-surface {
    transform: scale(0.75);
  }
}

.active-color-ring {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.25;
  filter: blur(25px);
  pointer-events: none;
  transition: background 0.5s ease;
}

.active-color-ring.color-red { background: var(--uno-red); }
.active-color-ring.color-blue { background: var(--uno-blue); }
.active-color-ring.color-green { background: var(--uno-green); }
.active-color-ring.color-yellow { background: var(--uno-yellow); }

/* Arrows circling the piles in the direction of play */
.direction-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  color: #ffffff;
  opacity: 0.16;
  pointer-events: none;
  transition: color 0.5s ease, opacity 0.5s ease;
}

/* The arrows take the colour in play: the top card's colour, or the colour called with a wild */
.direction-ring[data-color='red'] {
  color: #ff4040;
}

.direction-ring[data-color='blue'] {
  color: #2e9bff;
}

.direction-ring[data-color='green'] {
  color: #3ddc5b;
}

.direction-ring[data-color='yellow'] {
  color: #ffd500;
}

.direction-ring[data-color='red'],
.direction-ring[data-color='blue'],
.direction-ring[data-color='green'],
.direction-ring[data-color='yellow'] {
  opacity: 0.7;
  filter: drop-shadow(0 0 6px currentColor);
}

.direction-ring.ccw {
  transform: translate(-50%, -50%) scaleX(-1);
}

.direction-ring-svg {
  width: 100%;
  height: 100%;
  animation: ring-spin 18s linear infinite;
}

@keyframes ring-spin {
  to {
    transform: rotate(360deg);
  }
}

.pile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--table-ink-soft, rgba(255, 255, 255, 0.6));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.table-info-overlay {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  z-index: 6;
}

.turn-banner {
  font-size: 14px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 16px;
  border-radius: 20px;
  color: #fcd116;
}

.turn-timer-bar {
  width: 140px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.timer-progress-fill {
  height: 100%;
  width: 100%;
  background: #10b981;
  transition: width 0.25s linear, background-color 0.3s;
}

.timer-progress-fill.warning {
  background: #e52521;
}

.direction-indicator {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 10px;
  border-radius: 999px;
}

@media (max-width: 640px) {
  .table-info-overlay {
    gap: 4px 6px;
    flex-wrap: wrap;
    justify-content: center;
    width: min(250px, 80%);
  }

  .turn-banner {
    font-size: 12px;
    padding: 4px 10px;
  }

  .turn-timer-bar {
    width: 48px;
  }

  .direction-indicator {
    font-size: 11px;
  }

  .direction-ring {
    width: 270px;
    height: 270px;
  }
}

/* Local Player Hand & Tray */
.player-tray {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 20px 6px;
  background: var(--tray-bg, linear-gradient(180deg, rgba(10, 15, 22, 0.85), rgba(10, 15, 22, 0.98)));
  -webkit-backdrop-filter: var(--tray-backdrop, none);
  backdrop-filter: var(--tray-backdrop, none);
  border-top: 1px solid var(--border-glass);
}

.tray-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

.my-seat {
  --tile: 56px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.my-seat .seat-tile {
  margin-top: 4px;
}

.my-seat-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.my-score-badge {
  font-size: 12px;
  color: var(--tray-ink-muted, var(--text-muted));
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-action {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--action-bg, rgba(255, 255, 255, 0.08));
  color: white;
  font-weight: 700;
}

.btn-action:hover:not(:disabled) {
  background: var(--action-bg-hover, rgba(255, 255, 255, 0.18));
}

/* The big round CALL UNO button */
.uno-call-btn {
  position: relative;
  width: 88px;
  height: 88px;
  margin: -40px 4px 6px 8px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: radial-gradient(circle at 35% 30%, #ff6b5e 0%, #e51d24 45%, #8f0b10 100%);
  box-shadow:
    0 0 0 4px #111111,
    0 7px 0 4px #111111,
    0 14px 26px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease;
}

.uno-call-label {
  margin-bottom: -4px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.uno-call-logo {
  color: #ffd500;
  font-size: 25px; /* SOLO is one letter longer than the old word: a little smaller to fit */
  font-weight: 700;
  letter-spacing: -1px;
  transform: rotate(-10deg) skewX(-8deg);
  text-shadow:
    -2px -2px 0 #111111,
    2px -2px 0 #111111,
    -2px 2px 0 #111111,
    2px 2px 0 #111111,
    3px 4px 0 #111111;
}

.uno-call-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.uno-call-btn:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow:
    0 0 0 4px #111111,
    0 2px 0 4px #111111,
    0 6px 12px rgba(0, 0, 0, 0.5);
}

.uno-call-btn:disabled {
  cursor: not-allowed;
  filter: saturate(0.55) brightness(0.8);
  opacity: 0.85;
}

/* Down to your last cards: the button wobbles and pings until you press it */
.uno-call-btn.ready {
  animation: uno-wobble 1s ease-in-out infinite;
}

.uno-call-btn.ready::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 3px solid #fcd116;
  animation: uno-ping 1s ease-out infinite;
  pointer-events: none;
}

@keyframes uno-wobble {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(-7deg);
  }
  75% {
    transform: scale(1.1) rotate(7deg);
  }
}

@keyframes uno-ping {
  from {
    transform: scale(0.85);
    opacity: 1;
  }
  to {
    transform: scale(1.35);
    opacity: 0;
  }
}

.uno-call-btn.called {
  filter: none;
  opacity: 1;
  background: radial-gradient(circle at 35% 30%, #6ee7a0 0%, #16a34a 50%, #14532d 100%);
}

@media (max-width: 640px) {
  .player-tray {
    padding: 6px 10px 4px;
  }

  /* Narrow phones: when Draw / Pass / UNO don't fit beside my seat they move to their
     own line (on the right) instead of sliding under my name and coins */
  .tray-controls {
    gap: 6px 8px;
    flex-wrap: wrap;
  }

  .my-seat {
    --tile: 44px;
    flex-shrink: 0;
    gap: 8px;
  }

  .my-seat .seat-name {
    max-width: 170px;
  }

  .my-score-badge {
    display: none;
  }

  .action-buttons {
    gap: 6px;
    margin-left: auto;
  }

  .btn-action {
    padding: 7px 11px;
    font-size: 13px;
  }

  .uno-call-btn {
    width: 72px;
    height: 72px;
    margin-top: -30px;
  }

  .uno-call-logo {
    font-size: 20px;
  }

  .uno-call-label {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .direction-ring-svg,
  .uno-call-btn.ready,
  .uno-call-btn.ready::after {
    animation: none;
  }
}

/* UNO CARDS DESIGN - Authentic Mattel Physical Cards Visuals */
/* No scrolling (a scroll box would clip the card that pops up on hover): the cards
   overlap more when the hand is long so it always fits (see fitHand in app.js) */
.hand-wrapper {
  padding-bottom: 8px;
  display: flex;
  min-width: 0;
}

.card-hand {
  display: flex;
  margin-inline: auto;
  padding: 10px 20px;
  min-height: 155px;
  align-items: flex-end;
}

.uno-card {
  width: 86px;
  height: 130px;
  border-radius: var(--radius-card);
  background-color: #ffffff; /* Crisp white outer border */
  padding: 4.5px;
  box-shadow: 
    0 8px 18px rgba(0, 0, 0, 0.4),
    0 2.5px 0 #cbd5e1,
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-left: -24px;
  isolation: isolate; /* keep the card's numbers under the next overlapping card */
}

.uno-card:first-child {
  margin-left: 0;
}

.uno-card.card-large {
  width: 108px;
  height: 160px;
  margin-left: 0;
  cursor: default;
  padding: 5.5px;
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.45),
    0 3.5px 0 #cbd5e1,
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.card-hand .uno-card:hover {
  transform: translateY(-26px) scale(1.1);
  margin-right: 14px;
  z-index: 100;
  box-shadow: 
    0 18px 32px rgba(0, 0, 0, 0.6),
    0 4px 0 #94a3b8;
}

.uno-card.playable {
  box-shadow: 
    0 0 0 3px #fcd116, 
    0 8px 22px rgba(252, 209, 22, 0.7),
    0 3px 0 #d97706;
  cursor: pointer;
}

/* Inner Card Body with Candy Gradients */
.card-inner-frame {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--card-gradient, var(--card-color));
  box-shadow: inset 0 1.5px 3px rgba(255, 255, 255, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* Card colours (Lighter / Candy Pop Palette) */
.uno-card.color-red {
  --card-color: #ff3b65;
  --card-gradient: linear-gradient(165deg, #ff5c7c 0%, #ff2a5f 100%);
}
.uno-card.color-blue {
  --card-color: #0ea5e9;
  --card-gradient: linear-gradient(165deg, #38bdf8 0%, #0284c7 100%);
}
.uno-card.color-green {
  --card-color: #10b981;
  --card-gradient: linear-gradient(165deg, #34d399 0%, #059669 100%);
}
.uno-card.color-yellow {
  --card-color: #facc15;
  --card-gradient: linear-gradient(165deg, #fde047 0%, #eab308 100%);
}
.uno-card.color-wild {
  --card-color: #141416;
  --card-gradient: linear-gradient(165deg, #232736 0%, #0d0f15 100%);
}

/* The White Glossy Candy Bubble Sun */
.card-bubble-sun {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.card-large .card-bubble-sun {
  width: 102px;
  height: 102px;
}

.card-bubble-sun-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: transform 0.28s ease;
}

.uno-card:hover .card-bubble-sun-svg {
  transform: rotate(8deg) scale(1.04);
}

/* Fallback for legacy oval */
.card-oval {
  display: none;
}

.center-symbol-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

/* Big 3D Pop number in the card's colour with specular highlight */
.center-digit {
  position: relative;
  font-family: 'Fredoka', 'Rubik', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  color: var(--card-color);
  background: var(--card-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.3px #18181b;
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.4));
  z-index: 3;
}

.card-large .center-digit {
  font-size: 60px;
}

/* 6 and 9 are underlined */
.center-digit.with-underline::after {
  content: '';
  position: absolute;
  left: 14%;
  bottom: -3px;
  width: 72%;
  height: 5px;
  border-radius: 2px;
  background: var(--card-color);
  box-shadow: 0 0 0 1.5px #18181b, 0 2px 3px rgba(0, 0, 0, 0.35);
}

.card-large .center-digit.with-underline::after {
  height: 7px;
  bottom: -5px;
}

/* Action symbols in the card's colour */
.center-icon {
  color: var(--card-color);
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.4));
}

.icon-skip {
  width: 50px;
  height: 50px;
}

.icon-reverse {
  width: 50px;
  height: 58px;
}

.icon-draw2 {
  width: 48px;
  height: 58px;
}

.icon-draw4 {
  width: 54px;
  height: 64px;
}

.card-large .icon-skip {
  width: 64px;
  height: 64px;
}

.card-large .icon-reverse {
  width: 64px;
  height: 74px;
}

.card-large .icon-draw2 {
  width: 62px;
  height: 74px;
}

.card-large .icon-draw4 {
  width: 70px;
  height: 84px;
}

/* Wild: the oval split into the four colours */
.wild-oval {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

/* Corner numbers and symbols: white with a dark outline */
.corner-val {
  position: absolute;
  z-index: 5;
  font-family: 'Rubik', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 17px;
  line-height: 1;
  color: #ffffff;
  text-shadow:
    -1.5px -1.5px 0 #111,
    1.5px -1.5px 0 #111,
    -1.5px 1.5px 0 #111,
    1.5px 1.5px 0 #111,
    0 1.5px 0 #111,
    1.5px 2px 0 #111;
}

.card-large .corner-val {
  font-size: 20px;
}

.corner-top {
  top: 4px;
  left: 6px;
}

.corner-bottom {
  bottom: 4px;
  right: 6px;
  transform: rotate(180deg);
}

.corner-val.with-underline::after {
  content: '';
  display: block;
  width: 100%;
  height: 2.5px;
  margin-top: 1px;
  border-radius: 1px;
  background: #ffffff;
  box-shadow: 0 1px 0 #111;
}

.corner-indicator {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
}

.corner-icon {
  width: 16px;
  height: 16px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6));
}

.corner-icon.corner-wild {
  width: 13px;
  height: 18px;
}

.card-large .corner-icon {
  width: 19px;
  height: 19px;
}

.card-large .corner-icon.corner-wild {
  width: 15px;
  height: 21px;
}

/* Card back: the ZERO MERCY mark on a dark ember card with a fiery frame (every mode) */
.card-back {
  background-color: #ffffff;
  padding: 4px;
  border-radius: 12px;
  cursor: pointer;
}

.card-back .card-inner-frame {
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(ellipse at 50% 42%, #3a130b 0%, #1a0806 58%, #0d0403 100%);
}

.card-back .card-inner-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #ffd23f 0%, #ff7a1a 45%, #e8340c 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.card-back-plate {
  position: absolute;
  width: 86%;
  height: 40%;
  border-radius: 6px;
  background: linear-gradient(180deg, #3b140b 0%, #1a0705 100%);
  border: 2px solid #ff7a1a;
  transform: rotate(-20deg) skewX(-10deg);
  box-shadow: 0 0 0 2px #0d0403, 0 0 14px rgba(255, 110, 30, 0.45);
}

.card-back-logo {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 22px;
  line-height: 1;
  transform: rotate(-20deg);
}

.card-back-logo b {
  font-family: 'Rubik', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 1em;
  background: linear-gradient(180deg, #fff6c2 0%, #ffd23f 30%, #ff8a1c 62%, #e8340c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #1a0703;
}

.card-back-logo i {
  margin-top: 0.08em;
  padding: 0.05em 0.3em;
  border-radius: 3px;
  background: #d1300e;
  color: #ffffff;
  font-family: 'Rubik', 'Arial Black', sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 0.32em;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
}

.card-large .card-back-logo {
  font-size: 30px;
}

.card-back:hover {
  transform: scale(1.05);
}

/* Draw deck: stacked edges, and a glow when it's your turn to draw */
#draw-deck {
  box-shadow:
    2px 2px 0 -1px #ffffff, 2px 2px 0 0 rgba(0, 0, 0, 0.35),
    4px 4px 0 -1px #ffffff, 4px 4px 0 0 rgba(0, 0, 0, 0.35),
    6px 6px 0 -1px #ffffff, 6px 6px 0 0 rgba(0, 0, 0, 0.35),
    0 12px 22px rgba(0, 0, 0, 0.55);
}

#draw-deck.can-draw {
  cursor: pointer;
  box-shadow:
    2px 2px 0 -1px #ffffff, 2px 2px 0 0 rgba(0, 0, 0, 0.35),
    4px 4px 0 -1px #ffffff, 4px 4px 0 0 rgba(0, 0, 0, 0.35),
    6px 6px 0 -1px #ffffff, 6px 6px 0 0 rgba(0, 0, 0, 0.35),
    0 0 0 3px #fcd116, 0 0 24px rgba(252, 209, 22, 0.65);
}

/* Discard pile: recent cards stay visible under the top card */
.discard-stack {
  position: relative;
  width: 108px;
  height: 160px;
  margin: 18px 30px;
}

.discard-stack .uno-card {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transition: filter 0.4s ease;
}

.pile-caption {
  min-height: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--table-ink, rgba(255, 255, 255, 0.75));
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.caption-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
}

.uno-card.is-hidden {
  visibility: hidden;
}

/* Cards in flight between the deck, hands and the discard pile */
.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  overflow: hidden;
}

.fly-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 108px;
  height: 160px;
  perspective: 900px;
  will-change: transform, opacity;
}

.fly-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.fly-card .uno-card {
  position: absolute;
  inset: 0;
  margin: 0;
  transition: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55);
}

.fly-card .fly-back {
  transform: rotateY(180deg);
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card:not(.stake-modal-card):not(.rules-sheet):not(.leaderboard-card):not(.quick-chat-card):not(.gameover-card) {
  background: #162131;
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  padding: 28px;
  width: 90%;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------------
   MODAL: Quick Chat / Quick Messages (UNO Mobile style)
   --------------------------------------------------------------------------- */
#modal-quick-chat .modal-card,
.quick-chat-card {
  max-width: 440px !important;
  width: 92% !important;
  background: radial-gradient(ellipse at 50% 10%, #2997ff 0%, #0070e0 45%, #004ba0 100%) !important;
  border: 2.5px solid #90caf9 !important;
  border-radius: 24px !important;
  padding: 16px 18px 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(41, 151, 255, 0.45) !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: picker-pop 0.25s cubic-bezier(0.2, 1.2, 0.4, 1);
}

.quick-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
}

.quick-chat-title {
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  margin: 0;
  letter-spacing: 0.5px;
}

.btn-chat-close {
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-chat-close:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: #ef4444;
  transform: scale(1.1);
}

/* Emoji reaction bar in quick chat (matching reaction pill in reference) */
.chat-emoji-bar {
  background: rgba(10, 16, 26, 0.78);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.chat-emoji-extra {
  background: rgba(10, 16, 26, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  animation: picker-pop 0.18s cubic-bezier(0.2, 1.2, 0.4, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.chat-emoji-extra.hidden {
  display: none !important;
}

.chat-emoji-btn {
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  padding: 3px 4px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.4), filter 0.15s;
}

.chat-emoji-btn:hover {
  transform: scale(1.35) translateY(-3px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.chat-emoji-btn:active {
  transform: scale(0.92);
}

.chat-emoji-more {
  color: #ffffff;
  font-size: 22px;
  font-weight: 400;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.18s ease;
}

.chat-emoji-more:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.15);
}

.chat-emoji-more.open {
  transform: rotate(45deg);
  background: rgba(239, 68, 68, 0.5);
  border-color: #ef4444;
}

.quick-chat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 10px;
  padding: 4px 0 2px;
}

/* Individual speech bubble buttons */
.chat-bubble-btn {
  background: #ffffff;
  border: 2px solid #bae6fd;
  border-radius: 14px;
  padding: 10px 12px;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 #ffffff;
  transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.15s, border-color 0.15s;
  user-select: none;
}

/* Tail pointer on bottom-left of each bubble button */
.chat-bubble-btn::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 14px;
  border-width: 6px 6px 0 0;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.12));
}

.chat-bubble-btn.bubble-blue {
  color: #0284c7;
}

.chat-bubble-btn.bubble-green {
  color: #16a34a;
}

.chat-bubble-btn.bubble-red {
  color: #dc2626;
}

.chat-bubble-btn.bubble-yellow {
  color: #d97706;
}

.chat-bubble-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  border-color: #38bdf8;
}

.chat-bubble-btn:active {
  transform: translateY(1px) scale(0.97);
}

/* Quick Chat trigger button beside profile photo (UNO Mobile style) */
.avatar-chat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.2), filter 0.15s;
}

.avatar-chat-btn:hover {
  transform: translateY(-2px) scale(1.08);
  filter: brightness(1.08);
}

.avatar-chat-btn:active {
  transform: translateY(1px) scale(0.94);
}

.avatar-chat-bubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fef08a 0%, #facc15 50%, #eab308 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
}

.avatar-chat-label {
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.6);
  line-height: 1;
}

/* Speech bubbles displayed over player avatars on the table */
.chat-speech-bubble {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #0284c7;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 18px;
  border: 2px solid #38bdf8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(3, 105, 161, 0.3);
  white-space: nowrap;
  pointer-events: none;
  z-index: 300;
  animation: speech-pop 0.24s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.chat-speech-bubble.is-emoji {
  font-size: 32px;
  padding: 4px 12px;
  border-radius: 22px;
  line-height: 1.1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.5);
}

.chat-speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px 6px 0 6px;
  border-style: solid;
  border-color: #38bdf8 transparent transparent transparent;
}

.chat-speech-bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 4px 0 4px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  z-index: 1;
}

@keyframes speech-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6) translateY(6px); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

.chat-speech-bubble.fading {
  animation: speech-fade 0.35s ease forwards;
}

@keyframes speech-fade {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.8) translateY(-6px); }
}

/* For seats along the top edge of the table, place bubble below the avatar */
.seat.side-top .chat-speech-bubble {
  bottom: auto;
  top: calc(100% + 4px);
}

.seat.side-top .chat-speech-bubble::after {
  top: auto;
  bottom: 100%;
  border-width: 0 6px 7px 6px;
  border-color: transparent transparent #38bdf8 transparent;
}

.seat.side-top .chat-speech-bubble::before {
  top: auto;
  bottom: 100%;
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #ffffff transparent;
}

/* ---------------------------------------------------------------------------
   Skip Card FX Animation (prohibited ⊘ icon on skipped player's avatar)
   --------------------------------------------------------------------------- */
.skip-fx-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 500;
}

.skip-fx-stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: skip-slam-stamp 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.skip-fx-stamp .center-icon.icon-skip,
.skip-fx-stamp .icon-skip {
  width: 62px;
  height: 62px;
  color: inherit;
  filter: drop-shadow(0 0 16px currentColor) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
}

.skip-fx-container.color-red { color: #ef4444; }
.skip-fx-container.color-blue { color: #0284c7; }
.skip-fx-container.color-green { color: #22c55e; }
.skip-fx-container.color-yellow { color: #facc15; }
.skip-fx-container.color-wild { color: #a855f7; }

.skip-fx-badge {
  margin-top: -6px;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 9px;
  border-radius: 9999px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(239, 68, 68, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  animation: skip-badge-pulse 0.8s ease-in-out infinite alternate;
}

.skip-fx-container.color-blue .skip-fx-badge {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(2, 132, 199, 0.6);
}

.skip-fx-container.color-green .skip-fx-badge {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(34, 197, 94, 0.6);
}

.skip-fx-container.color-yellow .skip-fx-badge {
  background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(234, 179, 8, 0.6);
}

.skip-fx-container.color-wild .skip-fx-badge {
  background: linear-gradient(180deg, #a855f7 0%, #7e22ce 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(168, 85, 247, 0.6);
}

.skip-fx-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 4px solid currentColor;
  opacity: 0;
  animation: skip-shockwave 0.6s ease-out forwards;
}

@keyframes skip-slam-stamp {
  0% {
    transform: scale(2.6) rotate(-25deg);
    opacity: 0;
  }
  65% {
    transform: scale(0.92) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes skip-badge-pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

@keyframes skip-shockwave {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.skip-fx-container.fading {
  animation: skip-dissolve 0.35s ease forwards;
}

@keyframes skip-dissolve {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 0;
  }
}

/* Wild colour picker: a big UNO colour wheel */
.wild-picker {
  max-width: 400px;
  padding: 24px 24px 18px;
  background: radial-gradient(circle at 50% 0%, #243352 0%, #121b2c 70%);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4);
  animation: picker-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}

@keyframes picker-pop {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
}

.wild-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #ff5a4f, #ffd500, #3ddc5b, #2e9bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wild-subtitle {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 14px;
}

.wild-timer {
  color: #fcd116;
  font-weight: 700;
  white-space: nowrap;
}

.wild-timer.low {
  color: #f87171;
}

.color-wheel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 270px;
  height: 270px;
  margin: 20px auto 14px;
  animation: wheel-in 0.5s cubic-bezier(0.2, 1.1, 0.4, 1);
}

@keyframes wheel-in {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }
}

/* Each colour is a quarter of the wheel */
.color-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 4px solid #ffffff;
  border-radius: 14px;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 -8px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.wheel-red {
  background: radial-gradient(circle at 70% 70%, #ff5a4f, #e51d24 60%, #a50f14);
  border-top-left-radius: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 34px 26px 0;
  --glow: rgba(229, 29, 36, 0.8);
  --lift: translate(-6px, -6px);
}

.wheel-blue {
  background: radial-gradient(circle at 30% 70%, #3aa6ff, #0076ce 60%, #004c86);
  border-top-right-radius: 100%;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 26px 34px;
  --glow: rgba(0, 118, 206, 0.8);
  --lift: translate(6px, -6px);
}

.wheel-yellow {
  background: radial-gradient(circle at 70% 30%, #ffe45c, #ffd500 60%, #c9a100);
  border-bottom-left-radius: 100%;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 26px 34px 0 0;
  color: #1f1f1f;
  --glow: rgba(255, 213, 0, 0.8);
  --lift: translate(-6px, 6px);
}

.wheel-green {
  background: radial-gradient(circle at 30% 30%, #4fe06a, #26a23a 60%, #146b24);
  border-bottom-right-radius: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 26px 0 0 34px;
  --glow: rgba(38, 162, 58, 0.8);
  --lift: translate(6px, 6px);
}

.color-btn:hover,
.color-btn:focus-visible {
  outline: none;
  transform: var(--lift) scale(1.04);
  filter: brightness(1.1);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 0 30px var(--glow), 0 10px 20px rgba(0, 0, 0, 0.5);
}

.color-btn:active {
  transform: scale(0.96);
}

.wheel-label {
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.wheel-yellow .wheel-label {
  text-shadow: none;
}

.wheel-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.wheel-yellow .wheel-count {
  background: rgba(0, 0, 0, 0.12);
}

/* The colour you hold most: the usual best pick (shown above the colour name) */
.color-btn.best::before {
  content: '★ Best';
  order: -1;
  padding: 1px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Black UNO centre over the middle of the wheel */
.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2c2c31, #0a0a0b 70%);
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wheel-center span {
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #ffd500;
  text-shadow: -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 2px 2px 0 #111, 2px 3px 0 #111;
  transform: rotate(-12deg) skewX(-8deg);
}

.wild-hint {
  color: var(--text-muted);
  font-size: 12px;
}

.wild-hint kbd {
  font-size: 11px;
}

.wild-cancel {
  margin-top: 12px;
}

@media (max-height: 520px) {
  .wild-picker {
    padding: 14px 18px 12px;
  }

  .wild-title {
    font-size: 22px;
  }

  .color-wheel {
    width: 190px;
    height: 190px;
    margin: 10px auto 8px;
    gap: 7px;
  }

  .wheel-label {
    font-size: 14px;
  }

  /* On the small wheel the middle of each quarter is clear of both the edge and the centre */
  .wheel-red,
  .wheel-blue,
  .wheel-yellow,
  .wheel-green {
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .color-btn.best::before {
    padding: 0 6px;
    font-size: 9px;
  }

  .wheel-count,
  .wild-hint {
    display: none;
  }

  .wheel-center {
    width: 64px;
    height: 64px;
    border-width: 3px;
  }

  .wheel-center span {
    font-size: 18px;
  }

  .wild-cancel {
    margin-top: 6px;
  }
}

.modal-buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.modal-buttons button {
  flex: 1;
}

/* Leaderboard Modal */
#modal-leaderboard .modal-card,
.leaderboard-card {
  max-width: 580px !important;
  width: 90% !important;
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.leaderboard-table th, .leaderboard-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-glass);
}

.leaderboard-table th {
  color: var(--text-muted);
  font-weight: 600;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  border: 1px solid var(--border-glass);
  color: white;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  z-index: 2000;
  transition: all 0.3s ease;
}

.toast.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
}

/* Generic hide for buttons and small widgets toggled from JS */
.btn.hidden,
.btn-icon.hidden,
.game-clock.hidden {
  display: none;
}

/* Round clock */
.game-clock {
  font-size: 13px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 12px;
  border-radius: 20px;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.game-clock.low {
  color: #f87171;
  animation: pulse-badge 1s infinite;
}

/* Voice chat */
.voice-controls {
  display: flex;
  gap: 8px;
}

.btn-icon.active {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
}

#btn-mic,
#btn-voice {
  position: relative;
}

#btn-mic.mic-off::after,
#btn-voice.speaker-off::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2.5px;
  border-radius: 2px;
  background: #ef4444;
  transform: translate(-50%, -50%) rotate(-45deg);
}

#btn-mic.live {
  background: rgba(16, 185, 129, 0.3);
  border-color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.voice-icon {
  display: none;
  font-size: 12px;
}

.in-voice .voice-icon {
  display: inline;
}

.in-voice .voice-icon::before {
  content: '🎧';
}

.in-voice.mic-live .voice-icon::before {
  content: '🎤';
}

.in-voice.voice-failed .voice-icon::before {
  content: '⚠️';
}

.voice-failed .opp-avatar {
  box-shadow: 0 0 0 2px #f59e0b;
}

.voice-status-list {
  margin-top: 8px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-muted);
}

.voice-status-row.state-connected {
  color: #4ade80;
}

.voice-status-row.state-failed {
  color: #fbbf24;
}

.btn-peer-mute {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}

.in-voice .btn-peer-mute {
  display: inline-block;
}

.btn-peer-mute::before {
  content: '🔊';
}

.peer-muted .btn-peer-mute::before {
  content: '🔇';
}

.speaking .opp-avatar {
  box-shadow: 0 0 0 3px #22c55e, 0 0 16px rgba(34, 197, 94, 0.85);
}

.roster-item.speaking {
  border-color: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}


/* Settings modal */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.settings-card {
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
}

.settings-section {
  padding: 14px 0 6px;
  border-top: 1px solid var(--border-glass);
}

.settings-section h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 560px) {
  .theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.theme-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: transparent;
  border: 2px solid var(--border-glass);
  border-radius: 12px;
  color: var(--text-main);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.theme-option:hover {
  transform: translateY(-2px);
}

.theme-option.selected {
  border-color: #fcd116;
  box-shadow: 0 0 0 2px rgba(252, 209, 22, 0.35);
}

.theme-group {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.theme-preview {
  height: 64px;
  border-radius: 8px;
  background: var(--scene, none) center 60% / cover no-repeat, var(--bg-gradient);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.theme-preview-table {
  width: 78%;
  height: 62%;
  border-radius: 999px;
  background: var(--felt-gradient);
  border: 3px solid var(--table-rim);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}

.theme-name {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

.setting-row select {
  flex: 1;
  min-width: 0;
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}

.settings-hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border-glass);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-family: inherit;
  font-size: 12px;
  color: var(--text-main);
}

/* ---------------------------------------------------------------------------
   Game modes: Classic Mode, Wild Rush and Zero Mercy
   --------------------------------------------------------------------------- */
.mode-group {
  margin: 4px 0 16px;
}

.mode-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.mode-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* three equal tiles, whatever the names */
  gap: 8px;
}

.mode-tile {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px 9px;
  border: 2px solid var(--border-glass);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.55);
  color: var(--text-main);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mode-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
}

.mode-tile.selected {
  border-color: var(--mode-accent);
  background: linear-gradient(180deg, var(--mode-glow), rgba(2, 6, 23, 0.55) 75%);
  box-shadow: 0 0 0 1px var(--mode-accent), 0 8px 22px var(--mode-glow);
}

.mode-tile[data-mode='classic'] {
  --mode-accent: #fcd116;
  --mode-glow: rgba(252, 209, 22, 0.28);
}

.mode-tile[data-mode='all_wild'] {
  --mode-accent: #a78bfa;
  --mode-glow: rgba(139, 92, 246, 0.32);
}

.mode-tile[data-mode='no_mercy'] {
  --mode-accent: #f43f5e;
  --mode-glow: rgba(244, 63, 94, 0.32);
}

/* Two mini cards fanned above the name */
.mode-art {
  position: relative;
  width: 64px;
  height: 50px;
  margin-bottom: 2px;
  pointer-events: none;
}

.mode-art .mode-card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  cursor: inherit;
  transition: transform 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.mode-art .mode-card:nth-child(1) {
  transform: translate(-50%, -50%) translateX(-11px) rotate(-12deg) scale(0.36);
}

.mode-art .mode-card:nth-child(2) {
  transform: translate(-50%, -50%) translateX(11px) rotate(10deg) scale(0.36);
}

.mode-tile.selected .mode-card:nth-child(1),
.mode-tile:hover .mode-card:nth-child(1) {
  transform: translate(-50%, -50%) translateX(-14px) translateY(-2px) rotate(-18deg) scale(0.38);
}

.mode-tile.selected .mode-card:nth-child(2),
.mode-tile:hover .mode-card:nth-child(2) {
  transform: translate(-50%, -50%) translateX(14px) translateY(-2px) rotate(16deg) scale(0.38);
}

.mode-name {
  max-width: 100%;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere; /* "Wild Rush Mode" wraps onto two lines on narrow phones */
}

.mode-tag {
  max-width: 100%;
  text-align: center;
  line-height: 1.25;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mode-tile.selected .mode-tag {
  background: var(--mode-accent);
  color: #111111;
}

.mode-rules {
  min-height: 34px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
}

/* Waiting room: compact tiles; only the host can change the mode */
.waiting-mode {
  margin-bottom: 22px;
}

.mode-picker-compact .mode-tile {
  padding: 8px 6px;
}

.mode-picker.locked .mode-tile {
  cursor: default;
}

.mode-picker.locked .mode-tile:not(.selected) {
  opacity: 0.45;
}

/* In the game: which mode is being played */
.mode-pill {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fcd116;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.mode-pill[data-mode='all_wild'] {
  color: #c4b5fd;
}

.mode-pill[data-mode='no_mercy'] {
  color: #fb7185;
}

/* Zero Mercy: the stack of draw cards waiting for the next player */
.discard-pile-container {
  position: relative;
}

.stack-badge {
  position: absolute;
  top: 18px;
  right: -26px;
  z-index: 30;
  padding: 4px 12px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(135deg, #f43f5e, #b91c1c);
  color: #ffffff;
  font-family: 'Rubik', 'Arial Black', sans-serif;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(185, 28, 28, 0.6);
  transform: rotate(8deg);
  pointer-events: none;
}

.stack-badge.hidden {
  display: none;
}

/* Zero Mercy's Draw button reads "Draw until you can play" (two small lines where space is tight) */
.btn-action .draw-short {
  display: none;
}

@media (max-width: 700px), (max-height: 520px) {
  .btn-action:has(.draw-full) {
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

.btn-action.take-stack:not(:disabled) {
  background: linear-gradient(135deg, #f43f5e, #b91c1c);
  border-color: #ffffff;
  animation: pulse-badge 1.2s infinite;
}

/* Zero Mercy: players knocked out at 25 cards */
.seat.eliminated {
  filter: grayscale(1);
  opacity: 0.55;
}

/* A player whose connection dropped: the timer plays for them until they rejoin */
.seat.away .opp-avatar {
  filter: grayscale(0.7);
  opacity: 0.7;
}

.seat-away {
  z-index: 2;
  position: absolute;
  top: -6px;
  left: -8px;
  padding: 1px 4px;
  border-radius: 6px;
  background: #111111;
  font-size: 12px;
  animation: pulse-badge 1.2s infinite;
}

.seat-out {
  z-index: 2;
  position: absolute;
  bottom: -6px;
  left: 50%;
  padding: 1px 7px;
  border: 1.5px solid #ffffff;
  border-radius: 4px;
  background: #111111;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  transform: translateX(-50%) rotate(-6deg);
}

.my-seat.eliminated .opp-avatar {
  filter: grayscale(1);
}

/* Big Zero Mercy hands overlap more (set from app.js) */
.card-hand .uno-card:not(:first-child) {
  margin-left: var(--hand-overlap, -24px);
}

/* New card art */
.center-symbol-wrap.on-wild .center-icon {
  color: #ffffff;
}

.icon-skip2 {
  width: 62px;
  height: 48px;
}

.icon-target,
.icon-swap,
.icon-skip-all {
  width: 56px;
  height: 56px;
}

.icon-discard-all {
  width: 50px;
  height: 54px;
}

.card-large .icon-skip2 {
  width: 78px;
  height: 60px;
}

.card-large .icon-target,
.card-large .icon-swap,
.card-large .icon-skip-all {
  width: 70px;
  height: 70px;
}

.card-large .icon-discard-all {
  width: 64px;
  height: 68px;
}

.corner-icon.corner-wide {
  width: 23px;
  height: 16px;
}

.card-large .corner-icon.corner-wide {
  width: 27px;
  height: 19px;
}

/* Legacy ring fallback - unified to Candy Bubble Sun across all modes */
.card-ring {
  display: none !important;
}

/* Zero Mercy 7 and 0: arrows over the card show what they do (swap / pass hands) */
.nm-power-art {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55)) drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.6));
}

/* Zero Mercy wilds: piles of little cards on the white oval */
.icon-nm {
  width: 58px;
  height: 70px;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.55));
}

.card-large .icon-nm {
  width: 74px;
  height: 89px;
}

.corner-icon.corner-xwide {
  width: 31px;
  height: 17px;
}

.card-large .corner-icon.corner-xwide {
  width: 36px;
  height: 20px;
}

/* Choose a player (swap / targeted +2) */
.target-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 8px;
}

.target-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.target-option:hover,
.target-option:focus-visible {
  outline: none;
  transform: translateX(4px);
  border-color: #a78bfa;
  background: rgba(139, 92, 246, 0.18);
}

.target-option .opp-avatar {
  width: 42px;
  height: 42px;
  font-size: 19px;
}

.target-name {
  flex: 1;
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.target-count {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 700;
}

.target-option.best::after {
  content: '★ Fewest';
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-size: 10px;
  font-weight: 800;
}

/* Short landscape phones: keep the welcome card compact */
@media (max-height: 520px) {
  .mode-group {
    margin: 0 0 10px;
  }

  .mode-label,
  .mode-rules,
  .mode-art {
    display: none;
  }

  .mode-tile {
    padding: 6px 4px;
  }

  .mode-name {
    font-size: 14px;
  }

  .target-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 10px 0 4px;
  }
}

/* ---------------------------------------------------------------------------
   How to play: rules for each game mode
   --------------------------------------------------------------------------- */
.rules-link {
  display: block;
  margin: 6px auto 0;
  padding: 2px 6px;
  border: none;
  background: none;
  color: #fcd116;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rules-link:hover {
  color: #fde68a;
}

#modal-rules .modal-card,
.rules-sheet {
  --mode-accent: #fcd116;
  --mode-glow: rgba(252, 209, 22, 0.28);
  display: flex;
  flex-direction: column;
  max-width: min(980px, 92vw) !important;
  width: min(980px, 92vw) !important;
  max-height: 88vh;
  max-height: 88dvh;
  padding: 24px 28px 20px;
  text-align: left;
  animation: picker-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.rules-sheet[data-mode='all_wild'],
.rules-tab[data-mode='all_wild'] {
  --mode-accent: #a78bfa;
  --mode-glow: rgba(139, 92, 246, 0.32);
}

.rules-sheet[data-mode='no_mercy'],
.rules-tab[data-mode='no_mercy'] {
  --mode-accent: #f43f5e;
  --mode-glow: rgba(244, 63, 94, 0.32);
}

.rules-tab[data-mode='classic'] {
  --mode-accent: #fcd116;
  --mode-glow: rgba(252, 209, 22, 0.28);
}

.rules-intro {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

.rules-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.rules-tab {
  padding: 9px 6px;
  border: 2px solid var(--border-glass);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.55);
  color: var(--text-main);
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.rules-tab:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.rules-tab.selected {
  border-color: var(--mode-accent);
  background: linear-gradient(180deg, var(--mode-glow), rgba(2, 6, 23, 0.55));
  box-shadow: 0 0 0 1px var(--mode-accent), 0 6px 18px var(--mode-glow);
}

.rules-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.rules-lead {
  padding: 12px 14px;
  border-left: 4px solid var(--mode-accent);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 15px;
  line-height: 1.5;
}

.rules-body h3 {
  margin: 16px 0 8px;
  color: var(--mode-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rules-list {
  display: grid;
  gap: 8px;
  list-style: none;
}

.rules-list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}

.rules-icon {
  flex: none;
  width: 22px;
  text-align: center;
}

.rules-body strong {
  color: #ffffff;
}

.rules-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.rules-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

/* The real card artwork, shrunk */
.rules-card-row .uno-card {
  flex: none;
  margin: 0;
  zoom: 0.46;
  cursor: default;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.rules-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rules-card-text strong {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.rules-card-text span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.rules-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-glass);
}

.rules-footer .btn {
  min-width: 150px;
}

/* Short landscape phones */
@media (max-height: 520px) {
  .rules-link,
  .rules-intro {
    display: none;
  }

  .rules-sheet {
    max-height: 96vh;
    max-height: 96dvh;
    padding: 12px 16px 10px;
  }

  .rules-sheet .modal-header h2 {
    font-size: 18px;
  }

  .rules-tabs {
    margin-bottom: 8px;
  }

  .rules-tab {
    padding: 5px 6px;
    font-size: 14px;
  }

  .rules-footer {
    margin-top: 8px;
    padding-top: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Coins: balance, the pot, and what a round won or lost
   --------------------------------------------------------------------------- */
.coin-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 4px 10px;
  border: 1px solid rgba(252, 209, 22, 0.55);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(252, 209, 22, 0.22), rgba(245, 158, 11, 0.1));
  color: #fde68a;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.coin-chip[hidden] {
  display: none;
}

.pot-pill {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fcd116;
  font-size: 13px;
  font-weight: 700;
}

.pot-pill.hidden {
  display: none;
}

.my-coins {
  color: #fcd116;
  font-size: 12px;
  font-weight: 700;
}

.my-coins.hidden {
  display: none;
}

.seat-coins {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fcd116;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.seat-tile .seat-coins {
  margin-top: 3px;
}

.roster-coins {
  margin-left: 6px;
  color: #fcd116;
  font-size: 12px;
  font-weight: 700;
}

.coin-rules {
  margin-top: 6px;
  color: #fde68a;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
}

.coin-rules.short {
  color: #fca5a5;
}

.coin-result {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 700;
  line-height: 1.4;
}

.coin-result.hidden {
  display: none;
}

.coin-result.win {
  background: rgba(252, 209, 22, 0.14);
  color: #fcd116;
  font-size: 16px;
}

.coin-result.loss {
  color: #fca5a5;
}

.coin-result.refund {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   MODAL: Game Over / Victory Board (UNO Mobile Arcade Style)
   --------------------------------------------------------------------------- */
.gameover-confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

#modal-gameover {
  backdrop-filter: blur(12px) brightness(0.7);
  -webkit-backdrop-filter: blur(12px) brightness(0.7);
  background: rgba(4, 7, 14, 0.78);
}

#modal-gameover .modal-card,
.gameover-card {
  position: relative;
  width: min(480px, 94vw) !important;
  max-width: min(480px, 94vw) !important;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 28px !important;
  padding: 0 0 12px 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
  animation: gameover-popup 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  z-index: 2;
  scrollbar-width: thin;
}

/* VICTORY THEME: Golden rays, rich royal gradient, gold rim */
.gameover-card.is-victory {
  background:
    radial-gradient(circle at 50% -10%, rgba(251, 191, 36, 0.45) 0%, transparent 65%),
    radial-gradient(circle at 50% 100%, rgba(239, 68, 68, 0.28) 0%, transparent 60%),
    linear-gradient(180deg, #241a4a 0%, #171131 55%, #0e0a1e 100%) !important;
  border: 3px solid #fbbf24 !important;
  box-shadow:
    0 0 45px rgba(245, 158, 11, 0.45),
    0 25px 70px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* DEFEAT / OTHER WINNER THEME: Deep navy arcade gradient, sleek cyan/violet rim */
.gameover-card.is-defeat {
  background:
    radial-gradient(circle at 50% -10%, rgba(56, 189, 248, 0.28) 0%, transparent 65%),
    linear-gradient(180deg, #18263d 0%, #0f192b 55%, #090f1a 100%) !important;
  border: 2.5px solid rgba(147, 197, 253, 0.45) !important;
  box-shadow:
    0 0 35px rgba(14, 165, 233, 0.25),
    0 25px 70px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

@keyframes gameover-popup {
  0% {
    transform: scale(0.68) translateY(35px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Sunburst Light Rays */
.gameover-sunburst {
  position: absolute;
  top: -140px;
  left: 50%;
  width: 540px;
  height: 540px;
  margin-left: -270px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 215, 0, 0.14) 0deg 15deg,
    transparent 15deg 30deg
  );
  border-radius: 50%;
  pointer-events: none;
  animation: gameover-spin 30s linear infinite;
  mask-image: radial-gradient(circle at center, black 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 25%, transparent 70%);
  z-index: 0;
}

.gameover-card.is-defeat .gameover-sunburst {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.08) 0deg 15deg,
    transparent 15deg 30deg
  );
}

@keyframes gameover-spin {
  to { transform: rotate(360deg); }
}

/* Celebratory 3D Ribbon Banner */
.gameover-ribbon {
  position: relative;
  width: 100%;
  padding: 12px 20px 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.gameover-ribbon-text {
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 32px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  position: relative;
}

.gameover-card.is-victory .gameover-ribbon-text {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 50%, #b45309 100%);
  color: #451a03;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.8);
  animation: gameover-ribbon-glow 1.5s ease-in-out infinite alternate;
}

.gameover-card.is-defeat .gameover-ribbon-text {
  background: linear-gradient(180deg, #93c5fd 0%, #2563eb 50%, #1e40af 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

@keyframes gameover-ribbon-glow {
  0% { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4)); }
  100% { filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.85)); }
}

/* Winner Spotlight Area */
.gameover-spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  z-index: 1;
}

.gameover-crown {
  font-size: 38px;
  margin-bottom: -18px;
  z-index: 3;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  animation: gameover-crown-float 2.2s ease-in-out infinite;
}

@keyframes gameover-crown-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-3deg); }
}

.gameover-avatar-wrap {
  position: relative;
  width: 78px;
  height: 78px;
}

.gameover-avatar {
  width: 100%;
  height: 100%;
  border-radius: 26%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, hsl(var(--hue, 210) 95% 78% / 0.9), transparent 55%),
    linear-gradient(160deg, hsl(var(--hue, 210) 82% 58%), hsl(calc(var(--hue, 210) + 35) 76% 34%));
  border: 3.5px solid #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  font-family: 'Fredoka', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.gameover-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.gameover-avatar-ring {
  position: absolute;
  inset: -7px;
  border-radius: 32%;
  border: 2px dashed rgba(251, 191, 36, 0.7);
  animation: gameover-spin 14s linear infinite;
  pointer-events: none;
}

.gameover-card.is-defeat .gameover-avatar-ring {
  border-color: rgba(147, 197, 253, 0.5);
}

.gameover-winner-name {
  margin: 10px 0 2px;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.gameover-card.is-victory .gameover-winner-name {
  color: #fef08a;
  text-shadow: 0 2px 14px rgba(245, 158, 11, 0.6), 0 0 2px #000;
}

.gameover-winner-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gameover-card.is-victory .gameover-winner-badge {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.3));
  border-color: rgba(251, 191, 36, 0.55);
  color: #fef08a;
}

/* Result Body & Outcome */
.gameover-body {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  z-index: 1;
}

.gameover-reason-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gameover-reason-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.gameover-reason-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.35;
  text-align: center;
}

/* Stats Grid: Points & Coins */
.gameover-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.gameover-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}

.gameover-stat-card:hover {
  transform: translateY(-2px);
}

.gameover-stat-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 2px;
}

.gameover-stat-value {
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.gameover-stat-sub {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 2px;
}

/* Points Card Accent */
#gameover-stat-points .gameover-stat-value {
  color: #38bdf8;
}

/* Coins Card Variations */
#gameover-stat-coins.is-win {
  border-color: rgba(250, 204, 21, 0.6);
  background: radial-gradient(ellipse at 50% 0%, rgba(250, 204, 21, 0.22) 0%, rgba(15, 23, 42, 0.65) 80%);
}
#gameover-stat-coins.is-win .gameover-stat-value {
  color: #facc15;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
}
#gameover-stat-coins.is-win .gameover-stat-sub {
  color: #fef08a;
}

#gameover-stat-coins.is-loss {
  border-color: rgba(248, 113, 113, 0.4);
  background: radial-gradient(ellipse at 50% 0%, rgba(239, 68, 68, 0.15) 0%, rgba(15, 23, 42, 0.65) 80%);
}
#gameover-stat-coins.is-loss .gameover-stat-value {
  color: #fca5a5;
}

/* Match Target Progress Bar */
.gameover-match-progress {
  width: 100%;
  padding: 6px 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gameover-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #cbd5e1;
}

.gameover-progress-header span:last-child {
  color: #38bdf8;
}

.gameover-progress-track {
  width: 100%;
  height: 9px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: relative;
}

.gameover-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 50%, #ec4899 100%);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
  transition: width 0.6s ease;
}

/* Next Round Countdown Hint */
.next-round-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  align-self: center;
  margin-top: 2px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
  animation: gameover-timer-pulse 1.2s ease-in-out infinite alternate;
}

.next-round-hint strong {
  color: #ffffff;
  font-weight: 800;
}

@keyframes gameover-timer-pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.04); }
}

/* Gameover Action Buttons */
.gameover-buttons {
  width: 90%;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
  margin-top: 10px;
  z-index: 1;
}

.gameover-btn-primary {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 5px 0 #7f1d1d,
    0 10px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}

.gameover-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 #7f1d1d,
    0 14px 25px rgba(239, 68, 68, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.gameover-btn-primary:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 #7f1d1d,
    0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

.gameover-btn-secondary {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #e2e8f0 !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gameover-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.coin-flash {
  position: fixed;
  z-index: 3000;
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.coin-flash.gain {
  color: #fcd116;
}

.coin-flash.loss {
  color: #fca5a5;
}

/* Daily reward: a glowing bar on the welcome screen while it's waiting */
.daily-reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  width: 100%;
  margin: -4px 0 16px;
  padding: 11px 16px;
  border: 1.5px solid #facc15;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.32) 100%);
  color: #fef08a;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
  animation: reward-pulse 2.2s ease-in-out infinite;
}

.daily-reward[hidden] {
  display: none;
}

.daily-reward .reward-icon {
  font-size: 18px;
  display: inline-block;
  animation: gift-bounce 1.5s ease-in-out infinite;
}

@keyframes gift-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px) scale(1.1); }
}

.daily-reward .reward-claim,
.daily-reward strong {
  color: #fde047;
  font-weight: 900;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(253, 224, 71, 0.45);
}

.daily-reward:hover:not(:disabled) {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  border-color: #ffffff;
  color: #451a03;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(245, 158, 11, 0.55);
}

.daily-reward:hover:not(:disabled) .reward-claim,
.daily-reward:hover:not(:disabled) strong {
  color: #451a03 !important;
  background: rgba(255, 255, 255, 0.45);
  border-color: transparent;
}

@keyframes reward-pulse {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 16px rgba(253, 224, 71, 0.35);
  }
}

/* Gifts in the friends list */
.gift-status {
  margin: 4px 0 8px;
  color: #fde68a;
  font-size: 13px;
  font-weight: 600;
}

.gift-status[hidden] {
  display: none;
}

.btn-gift {
  border: 1px solid rgba(252, 209, 22, 0.6);
  background: rgba(252, 209, 22, 0.16);
  color: #fde68a;
}

.btn-gift:hover:not(:disabled) {
  background: #fcd116;
  color: #111111;
}

.btn-gift:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Leaderboard: champions / richest */
.leaderboard-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.leaderboard-tab {
  padding: 8px 6px;
  border: 2px solid var(--border-glass);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.55);
  color: var(--text-main);
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.leaderboard-tab.selected {
  border-color: #fcd116;
  background: linear-gradient(180deg, rgba(252, 209, 22, 0.22), rgba(2, 6, 23, 0.55));
}

/* Short landscape phones: the chip stays compact */
@media (max-height: 520px) {
  .coin-chip {
    padding: 2px 8px;
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Table themes: chosen per player in Settings (see themes.js). These come last
   so they override the :root defaults.
   --------------------------------------------------------------------------- */

/* Every themed element starts from the default look, so a theme preview never
   inherits the page's own theme ("initial" makes var() use its fallback) */
[data-table-theme] {
  --bg-gradient: radial-gradient(circle at center, #1b2838 0%, #0c1219 100%);
  --felt-gradient: radial-gradient(ellipse at center, #1e4a38 0%, #0d271c 100%);
  --table-rim: #2d1810;
  --rim-width: 10px;
  --rim-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 0 15px 35px rgba(0, 0, 0, 0.6);
  --felt-texture-opacity: 0.35;
  --scene: initial;
  --felt-backdrop: initial;
  --tray-bg: initial;
  --tray-backdrop: initial;
  --tray-ink-muted: initial;
  --table-ink: initial;
  --table-ink-soft: initial;
  --action-bg: initial;
  --action-bg-hover: initial;
}

[data-table-theme='royal'] {
  --bg-gradient: radial-gradient(circle at 50% 25%, #1e3a8a 0%, #0b1330 55%, #050814 100%);
  --felt-gradient: radial-gradient(ellipse at center, #2563eb 0%, #1e40af 40%, #0b1f4d 100%);
  --table-rim: #9a7418;
  --rim-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), 0 0 0 2px #e8c35a, 0 15px 35px rgba(0, 0, 0, 0.6);
}

[data-table-theme='crimson'] {
  --bg-gradient: radial-gradient(circle at 50% 25%, #3f0a18 0%, #16050a 70%);
  --felt-gradient: radial-gradient(ellipse at center, #8b1538 0%, #5c0d25 50%, #2a0510 100%);
  --table-rim: #151515;
  --rim-shadow: inset 0 0 60px rgba(0, 0, 0, 0.75), 0 0 0 2px #b8904a, 0 15px 35px rgba(0, 0, 0, 0.6);
}

[data-table-theme='neon'] {
  --bg-gradient:
    linear-gradient(rgba(168, 85, 247, 0.08) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(168, 85, 247, 0.08) 1px, transparent 1px) 0 0 / 36px 36px,
    radial-gradient(circle at 50% 35%, #2e1065 0%, #0a0118 70%);
  --felt-gradient: radial-gradient(ellipse at center, #3b0764 0%, #1e0536 60%, #0c0118 100%);
  --table-rim: #d946ef;
  --rim-width: 4px;
  --rim-shadow: inset 0 0 50px rgba(217, 70, 239, 0.25), 0 0 22px rgba(217, 70, 239, 0.7), 0 0 60px rgba(34, 211, 238, 0.3);
  --felt-texture-opacity: 0.2;
}

[data-table-theme='tavern'] {
  --bg-gradient: radial-gradient(circle at 50% 25%, #3a2818 0%, #1a110a 70%, #0d0805 100%);
  --felt-gradient:
    repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(89deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 27px),
    radial-gradient(ellipse at center, #9a6534 0%, #7a4a22 55%, #4f2e14 100%);
  --table-rim: #2b180a;
  --felt-texture-opacity: 0.25;
}

[data-table-theme='tropical'] {
  --bg-gradient: radial-gradient(circle at 50% 15%, #0e5566 0%, #06303b 55%, #03161c 100%);
  --felt-gradient: radial-gradient(ellipse at center, #14b8a6 0%, #0f766e 45%, #083b37 100%);
  --table-rim: #c9a66b;
  --rim-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 15px 35px rgba(0, 0, 0, 0.55);
}

[data-table-theme='galaxy'] {
  --bg-gradient:
    radial-gradient(circle at 20px 30px, #ffffff 0 1px, transparent 1.5px) 0 0 / 140px 140px,
    radial-gradient(circle at 90px 80px, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px) 0 0 / 180px 180px,
    radial-gradient(circle at 50px 120px, rgba(255, 255, 255, 0.9) 0 1.2px, transparent 1.8px) 0 0 / 230px 230px,
    radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(192, 38, 211, 0.3) 0%, transparent 45%),
    #05030f;
  --felt-gradient:
    radial-gradient(circle at 30px 40px, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px) 0 0 / 160px 160px,
    radial-gradient(circle at 110px 90px, rgba(255, 255, 255, 0.35) 0 1px, transparent 1.5px) 0 0 / 210px 210px,
    radial-gradient(ellipse at center, #3730a3 0%, #1e1b4b 50%, #0b0a24 100%);
  --table-rim: #475569;
  --rim-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.35), 0 15px 35px rgba(0, 0, 0, 0.6);
  --felt-texture-opacity: 0.15;
}

[data-table-theme='sunset'] {
  --bg-gradient: linear-gradient(180deg, #2b0f3a 0%, #6b1d3a 45%, #a3402a 80%, #3a1208 100%);
  --felt-gradient: radial-gradient(ellipse at center, #c2410c 0%, #9a3412 45%, #4a1606 100%);
  --table-rim: #2b1408;
}

/* Nature scenery: a light landscape behind a frosted-glass table, so the cards stay easy to read */
[data-table-theme='meadow'],
[data-table-theme='lake'],
[data-table-theme='hills'],
[data-table-theme='blossom'],
[data-table-theme='forest'],
[data-table-theme='sunrise'] {
  --felt-gradient: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(255, 255, 255, 0.24) 55%,
    rgba(255, 255, 255, 0.1) 100%
  );
  --table-rim: rgba(255, 255, 255, 0.85);
  --rim-width: 4px;
  --rim-shadow: 0 18px 40px rgba(40, 70, 90, 0.2), inset 0 0 36px rgba(255, 255, 255, 0.5);
  --felt-texture-opacity: 0;
  --felt-backdrop: blur(2px) saturate(1.1);
  --tray-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.4));
  --tray-backdrop: blur(6px);
  --action-bg: rgba(15, 23, 42, 0.72);
  --action-bg-hover: rgba(15, 23, 42, 0.88);
  --tray-ink-muted: #475569;
  --table-ink: #334155;
  --table-ink-soft: rgba(30, 41, 59, 0.6);
}

[data-table-theme='meadow'] {
  --scene: url('/scenes/meadow.svg');
}

[data-table-theme='lake'] {
  --scene: url('/scenes/lake.svg');
}

[data-table-theme='hills'] {
  --scene: url('/scenes/hills.svg');
}

[data-table-theme='blossom'] {
  --scene: url('/scenes/blossom.svg');
}

[data-table-theme='forest'] {
  --scene: url('/scenes/forest.svg');
}

[data-table-theme='sunrise'] {
  --scene: url('/scenes/sunrise.svg');
  --felt-gradient: radial-gradient(
    ellipse at center,
    rgba(255, 250, 246, 0.48) 0%,
    rgba(255, 246, 240, 0.26) 55%,
    rgba(255, 240, 235, 0.12) 100%
  );
}

/* ---------------------------------------------------------------------------
   Phones: landscape is the way to play
   --------------------------------------------------------------------------- */

/* Held upright during a game: ask the player to rotate (iPhones can't be locked to landscape) */
.rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, #1e293b 0%, #0b1120 75%);
}

.rotate-overlay h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
}

.rotate-overlay p {
  color: var(--text-muted);
  margin-bottom: 8px;
}

.rotate-phone {
  font-size: 72px;
  animation: rotate-hint 2.4s ease-in-out infinite;
}

@keyframes rotate-hint {
  0%,
  20% {
    transform: rotate(0deg);
  }
  50%,
  80% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (orientation: portrait) and (max-width: 600px) {
  body[data-view='game']:not(.portrait-ok) .rotate-overlay {
    display: flex;
  }
}

/* Landscape phones (short screens): compact header, table, seats and a one-row tray */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --header-h: 40px;
  }

  .app-header {
    padding: 0 12px;
  }

  .uno-text {
    font-size: 20px;
  }

  .live-pill {
    display: none;
  }

  .header-controls,
  .voice-controls {
    gap: 6px;
  }

  .btn-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  /* Welcome screen: logo and join box side by side */
  #view-lobby {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    padding: 8px 24px;
  }

  .lobby-hero {
    margin: 0;
    padding-top: 60px;
  }

  .hero-logo {
    width: 200px;
  }

  .hero-logo-text {
    font-size: 70px;
  }

  .hero-fan {
    transform: scale(0.72);
  }

  .hero-tagline {
    margin-top: 10px;
    max-width: 280px;
    font-size: 14px;
  }

  .lobby-card {
    margin-bottom: 0;
    padding: 16px 20px;
  }

  .lobby-card .input-group {
    margin-bottom: 10px;
  }

  .lobby-card input {
    padding: 10px 14px;
  }

  .lobby-card .btn-large {
    padding: 11px;
  }

  .lobby-divider {
    margin: 12px 0 10px;
  }

  .lobby-features {
    display: none;
  }

  /* Table */
  .table-area {
    --seat-inset-x: 58px;
    --seat-inset-y: 44px;
    --felt-inset-top: 66px;
    --felt-inset-x: 86px;
  }

  .table-felt {
    border-radius: 80px;
  }

  .table-felt::before {
    border-radius: calc(80px - var(--rim-width));
  }

  .table-surface {
    transform: scale(0.52);
  }

  .opponents-zone .seat,
  .opponents-zone.crowded .seat {
    --fan-step: 6px;
    --card-w: 22px;
    --card-h: 32px;
    --tile: 40px;
    gap: 5px;
  }

  .opponents-zone .seat .opp-avatar,
  .opponents-zone.crowded .seat .opp-avatar {
    border-width: 2px;
  }

  .opponents-zone .seat .seat-name {
    min-width: 58px;
    max-width: 90px;
    padding: 1px 7px;
    font-size: 10px;
    border-width: 1.5px;
    border-radius: 7px;
  }

  .opponents-zone .seat.side-left .seat-hand,
  .opponents-zone .seat.side-right .seat-hand {
    margin-top: 10px;
  }

  .partner-tag {
    top: -8px;
    padding: 0 5px;
    font-size: 8px;
  }

  .opponents-zone .seat .mini-back::after {
    font-size: 5px;
  }

  .opponents-zone .seat-count {
    top: -6px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    border-width: 1.5px;
  }

  .active-turn .opp-avatar::before {
    inset: -7px;
    padding: 3px;
  }

  .btn-catch-uno {
    font-size: 9px;
    padding: 2px 6px;
  }

  /* Mode, pot, clock and turn pack two to a row so they stay clear of the left-hand seat */
  .table-area > .table-info-overlay {
    top: 4px;
    left: 8px;
    gap: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 210px;
  }

  .table-area .game-clock,
  .table-area .turn-banner,
  .table-area .mode-pill,
  .table-area .pot-pill {
    font-size: 11px;
    padding: 2px 9px;
  }

  .table-area .turn-timer-bar,
  .table-area .direction-indicator {
    display: none;
  }

  /* Tray: my seat | my hand | draw/pass + UNO, all in one row */
  .player-tray {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 2px 10px;
  }

  .tray-controls {
    display: contents;
  }

  .my-seat {
    order: 0;
    flex-direction: column;
    gap: 3px;
  }

  .my-seat {
    --tile: 38px;
  }

  .my-seat .seat-name {
    min-width: 56px;
    max-width: 84px;
    padding: 1px 7px;
    font-size: 10px;
    border-radius: 7px;
  }

  .my-score-badge {
    display: none;
  }

  .hand-wrapper {
    order: 1;
    flex: 1;
    min-width: 0;
    padding-bottom: 2px;
  }

  .card-hand {
    zoom: 0.66;
  }

  .action-buttons {
    order: 2;
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 8px;
    align-items: center;
  }

  .btn-action {
    grid-column: 1;
    padding: 4px 10px;
    font-size: 12px;
  }

  .uno-call-btn {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 60px;
    height: 60px;
    margin: 0 2px 4px 0;
    border-width: 3px;
  }

  .uno-call-logo {
    font-size: 17px;
  }

  .uno-call-label {
    font-size: 8px;
    letter-spacing: 1px;
  }
}

/* ---------------------------------------------------------------------------
   Player ID, sign-in and friends
   --------------------------------------------------------------------------- */

/* Profile pictures inside the round avatars */
.opp-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Header Player Profile HUD (Avatar, Level, Name, ID, XP Progress)
   --------------------------------------------------------------------------- */
.identity-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(20, 32, 54, 0.85) 0%, rgba(10, 18, 32, 0.94) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
  margin-bottom: 0;
  max-width: 100%;
}

.identity-bar:hover {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.identity-bar .opp-avatar,
.identity-bar .identity-avatar {
  width: 42px;
  height: 42px;
  font-size: 18px;
  border-radius: 50%;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1.2), box-shadow 0.2s ease;
}

.identity-bar:hover .identity-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.8);
}

.identity-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.identity-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.identity-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.identity-name .player-name {
  color: #ffffff;
  font-weight: 800;
}

.identity-name .badge-guest {
  font-size: 10px;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  padding: 1.5px 6px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.identity-name .badge-provider {
  font-size: 10px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.22);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #86efac;
  padding: 1.5px 6px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.identity-sub-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.identity-id {
  padding: 1.5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  color: #94a3b8;
  font: 700 10.5px 'Outfit', sans-serif;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s;
}

.identity-id:hover {
  background: rgba(252, 209, 22, 0.16);
  color: #fcd116;
  border-color: rgba(252, 209, 22, 0.5);
  transform: translateY(-1px);
}

/* Identity Bar XP Progress */
.identity-xp-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  max-width: 130px;
}

.identity-xp-bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.identity-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

.identity-xp-text {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

/* Coins chip in top header */
#identity-coins,
.identity-bar #identity-coins {
  background: linear-gradient(135deg, rgba(20, 24, 33, 0.95) 0%, rgba(10, 12, 18, 0.98) 100%);
  border: 1.5px solid #facc15;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#identity-coins:hover,
.identity-bar #identity-coins:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.45), 0 4px 10px rgba(0, 0, 0, 0.5);
}

#identity-coins .coin-icon,
.identity-bar #identity-coins .coin-icon {
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(234, 179, 8, 0.5));
}

#identity-coins .coin-amount,
.identity-bar #identity-coins .coin-amount {
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fef08a;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Eye-Catching Sign In / Account Button in Top Header */
.btn-sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  height: 40px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

/* When Guest: Bright, high-contrast, glowing action pill */
.btn-sign-in.is-guest {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
  border: 1.5px solid #bae6fd;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 0 #075985, 0 6px 16px rgba(2, 132, 199, 0.4);
  animation: signin-breathe 2.8s ease-in-out infinite;
}

.btn-sign-in.is-guest:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 5px 0 #075985, 0 10px 22px rgba(56, 189, 248, 0.65);
  filter: brightness(1.1);
}

.btn-sign-in.is-guest:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 1px 0 #075985;
}

@keyframes signin-breathe {
  0%, 100% {
    box-shadow: 0 3px 0 #075985, 0 6px 16px rgba(2, 132, 199, 0.4);
  }
  50% {
    box-shadow: 0 3px 0 #075985, 0 8px 22px rgba(56, 189, 248, 0.75), 0 0 12px rgba(186, 230, 253, 0.5);
  }
}

/* When already Signed In: sleek emerald badge */
.btn-sign-in.is-signed-in {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border: 1.5px solid #a7f3d0;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 3px 0 #047857, 0 5px 14px rgba(16, 185, 129, 0.35);
}

.btn-sign-in.is-signed-in:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 5px 0 #047857, 0 8px 18px rgba(16, 185, 129, 0.5);
  filter: brightness(1.1);
}

.btn-sign-in.is-signed-in:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 1px 0 #047857;
}

/* Hide identity bar and sign-in button during gameplay and in waiting room */
body[data-view='game'] .identity-bar,
body[data-view='waiting'] .identity-bar {
  display: none !important;
}

body[data-view='game'] #btn-sign-in,
body[data-view='waiting'] #btn-sign-in {
  display: none !important;
}

/* Tablet & Mobile responsive adjustments */
@media (max-width: 680px) {
  .identity-sub-wrap {
    display: none;
  }
  .identity-bar {
    padding: 3px 10px 3px 3px;
  }
  .identity-bar .opp-avatar {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .identity-name {
    max-width: 110px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .app-header {
    padding: 0 10px;
  }
  .header-controls {
    gap: 6px;
  }
  #identity-coins,
  .identity-bar #identity-coins {
    padding: 4px 9px;
    gap: 4px;
  }
  #identity-coins .coin-amount,
  .identity-bar #identity-coins .coin-amount {
    font-size: 13px;
  }
  .btn-sign-in {
    padding: 6px 11px;
    height: 36px;
    font-size: 12px;
  }
  .identity-name {
    max-width: 80px;
    font-size: 12px;
  }
  .identity-name .badge-guest,
  .identity-name .badge-provider {
    display: none;
  }
}

/* Sign-in window */
.signin-card {
  max-width: 400px;
}

.signin-intro {
  margin: 4px 0 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.signin-note {
  margin: 6px 0 14px;
  color: var(--text-muted);
  font-size: 12px;
}

.signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.signin-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.signin-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Google's sign-in style: white button, dark text, coloured G */
.signin-google {
  background: #ffffff;
  color: #1f1f1f;
}

.signin-facebook {
  background: #1877f2;
}

.signin-x {
  background: #000000;
  border: 1px solid #3f3f46;
}

.signin-instagram {
  background: linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%);
}

.signin-btn.disabled {
  opacity: 0.4;
  filter: grayscale(0.6);
  cursor: not-allowed;
  transform: none;
}

/* Friends window */
.friends-card {
  max-width: 500px;
  text-align: left;
}

.my-id-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(252, 209, 22, 0.55);
  background: rgba(252, 209, 22, 0.08);
  color: var(--text-muted);
  font-size: 13px;
}

.my-id-box strong {
  flex: 1;
  color: #fcd116;
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
}

.add-friend-row {
  display: flex;
  gap: 8px;
}

.add-friend-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: rgba(15, 23, 42, 0.8);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  outline: none;
}

.add-friend-row input:focus {
  border-color: #fcd116;
}

.friends-error {
  min-height: 18px;
  margin: 6px 0;
  color: #f87171;
  font-size: 13px;
}

.friends-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  background: rgba(15, 23, 42, 0.6);
}

.friend-row .opp-avatar {
  width: 38px;
  height: 38px;
  font-size: 17px;
  border-width: 2px;
}

.friend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.friend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}

.friend-meta {
  color: var(--text-muted);
  font-size: 12px;
}

.friend-status.online {
  color: #4ade80;
}

.friend-status.playing {
  color: #fcd116;
}

.friend-actions {
  display: flex;
  gap: 6px;
}

.friend-actions .confirm {
  border-color: #f87171;
  color: #f87171;
}

.friends-empty {
  padding: 14px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* "A friend invited you" banner */
.invite-banner {
  position: fixed;
  top: calc(var(--header-h) + 10px);
  left: 50%;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  transform: translateX(-50%);
  animation: invite-in 0.35s ease-out;
}

.invite-banner.hidden {
  display: none;
}

.update-banner {
  background: linear-gradient(135deg, #059669, #0d9488);
}

.invite-banner .invite-dismiss {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

@keyframes invite-in {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
}

/* Landscape phones: a tighter identity bar so the join box still fits */
@media (orientation: landscape) and (max-height: 500px) {
  .identity-bar {
    margin-bottom: 10px;
    padding: 5px 8px;
  }

  .identity-bar .opp-avatar {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Player Level & XP Progression System
   ========================================================================== */

.player-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Tier 1: Bronze (Lv 1 - 4) */
.player-level-badge.tier-bronze {
  background: linear-gradient(135deg, #78350f 0%, #b45309 100%);
  color: #fef3c7;
  border-color: #d97706;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Tier 2: Silver (Lv 5 - 9) */
.player-level-badge.tier-silver {
  background: linear-gradient(135deg, #334155 0%, #64748b 100%);
  color: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Tier 3: Gold (Lv 10 - 19) */
.player-level-badge.tier-gold {
  background: linear-gradient(135deg, #854d0e 0%, #ca8a04 50%, #eab308 100%);
  color: #fef08a;
  border-color: #facc15;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Tier 4: Ruby (Lv 20 - 29) */
.player-level-badge.tier-ruby {
  background: linear-gradient(135deg, #881337 0%, #be123c 50%, #e11d48 100%);
  color: #ffe4e6;
  border-color: #fb7185;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Tier 5: Amethyst (Lv 30 - 49) */
.player-level-badge.tier-amethyst {
  background: linear-gradient(135deg, #581c87 0%, #7e22ce 50%, #a855f7 100%);
  color: #faf5ff;
  border-color: #c084fc;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Tier 6: Diamond (Lv 50+) */
.player-level-badge.tier-diamond {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 40%, #38bdf8 80%, #c084fc 100%);
  background-size: 200% 200%;
  color: #ffffff;
  border-color: #7dd3fc;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.8), 0 0 24px rgba(192, 132, 252, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  animation: diamondShimmer 3s ease infinite;
}

@keyframes diamondShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Identity Bar XP Progress */
.identity-xp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
  max-width: 240px;
}

.identity-xp-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.identity-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.identity-xp-text {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

/* Specific Context Badges */
.identity-name-wrap #identity-level-badge {
  font-size: 11.5px;
  padding: 2.5px 8px;
}

.my-seat .seat-name #my-level-badge {
  font-size: 10.5px;
  padding: 1.5px 6px;
  margin-right: 4px;
}

.seat-name .player-level-badge {
  font-size: 10px;
  padding: 1.5px 6px;
  margin-left: 4px;
}

.roster-name .player-level-badge {
  font-size: 10px;
  padding: 1.5px 6px;
  margin-left: 6px;
}

.winner-spotlight #winner-level-badge {
  margin-top: 4px;
  font-size: 13px;
  padding: 3px 10px;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5);
}

/* Level Up Toast Notification */
.level-up-toast {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px) scale(0.9);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.level-up-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.level-up-toast-content {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
  border: 2px solid #facc15;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.8), 0 0 25px rgba(250, 204, 21, 0.5);
  border-radius: 20px;
  padding: 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  backdrop-filter: blur(12px);
}

.level-up-sparkle {
  font-size: 26px;
  animation: levelSparkleBounce 1s infinite alternate ease-in-out;
}

.level-up-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #fde047, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.level-up-tier-badge {
  font-size: 14px;
  padding: 4px 14px;
}

.level-up-desc {
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 600;
  margin-top: 2px;
}

@keyframes levelSparkleBounce {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.25) rotate(15deg); }
}

/* ==========================================================================
   Wild Draw 4 Challenge Modals (Classic Mode - Arcade Edition)
   ========================================================================== */

.wild4-challenge-card {
  max-width: 640px;
  width: 95%;
  background: radial-gradient(ellipse at 50% 10%, #1e293b 0%, #0a0f1d 100%);
  border: 2.5px solid rgba(245, 158, 11, 0.7);
  border-radius: 28px;
  padding: 24px 26px 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: modalPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPopIn {
  0% { transform: scale(0.85) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.wild4-sunburst {
  position: absolute;
  width: 700px;
  height: 700px;
  top: -180px;
  left: calc(50% - 350px);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(245, 158, 11, 0.08) 15deg,
    transparent 30deg,
    rgba(239, 68, 68, 0.06) 45deg,
    transparent 60deg,
    rgba(245, 158, 11, 0.08) 75deg,
    transparent 90deg,
    rgba(239, 68, 68, 0.06) 105deg,
    transparent 120deg,
    rgba(245, 158, 11, 0.08) 135deg,
    transparent 150deg,
    rgba(239, 68, 68, 0.06) 165deg,
    transparent 180deg,
    rgba(245, 158, 11, 0.08) 195deg,
    transparent 210deg,
    rgba(239, 68, 68, 0.06) 225deg,
    transparent 240deg,
    rgba(245, 158, 11, 0.08) 255deg,
    transparent 270deg,
    rgba(239, 68, 68, 0.06) 285deg,
    transparent 300deg,
    rgba(245, 158, 11, 0.08) 315deg,
    transparent 330deg,
    rgba(239, 68, 68, 0.06) 345deg,
    transparent 360deg
  );
  animation: slowSunburst 35s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes slowSunburst {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.wild4-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.wild4-top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.wild4-banner-badge {
  background: linear-gradient(90deg, #dc2626 0%, #ea580c 50%, #f59e0b 100%);
  color: #ffffff;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 4px 13px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.wild4-badge-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
  animation: pulseDot 1s infinite alternate ease-in-out;
}

@keyframes pulseDot {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 1; }
}

.wild4-timer-pill {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  border-radius: 999px;
  padding: 3px 12px;
  color: #fbbf24;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.wild4-hero-title {
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 27px;
  font-weight: 900;
  margin: 4px 0 8px 0;
  background: linear-gradient(180deg, #ffffff 35%, #fde047 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}

.wild4-event-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13.5px;
  color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.wild4-source-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: 1.5px solid #ffffff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
}

.wild4-source-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wild4-summary-text {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wild4-color-pill {
  font-weight: 900;
  padding: 3px 11px;
  border-radius: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-block;
}

.wild4-color-pill.color-red {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.wild4-color-pill.color-blue {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.wild4-color-pill.color-green {
  background: linear-gradient(180deg, #10b981 0%, #047857 100%);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.wild4-color-pill.color-yellow {
  background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%);
  color: #0f172a;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}

/* Choices Side-by-Side Grid */
.wild4-choices-grid {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 18px 0 14px 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

.wild4-choice-card {
  flex: 1;
  border-radius: 20px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  outline: none;
}

.wild4-choice-card:hover,
.wild4-choice-card:focus-visible {
  transform: translateY(-4px);
}

.accept-choice {
  background: linear-gradient(170deg, rgba(30, 58, 138, 0.38) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 2px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.accept-choice:hover,
.accept-choice:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 14px 34px rgba(59, 130, 246, 0.4);
}

.challenge-choice {
  background: linear-gradient(170deg, rgba(185, 28, 28, 0.35) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 2px solid rgba(239, 68, 68, 0.6);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 16px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.challenge-choice:hover,
.challenge-choice:focus-visible {
  border-color: #f87171;
  box-shadow: 0 14px 34px rgba(239, 68, 68, 0.45);
}

.choice-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.safe-badge {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.risk-badge {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.5);
  animation: pulseGlow 1.5s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.3); }
  100% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.7); }
}

.choice-card-art {
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}

.choice-mini-card {
  width: 38px;
  height: 54px;
  background: #0f172a;
  border: 2.5px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
  position: relative;
  display: grid;
  place-items: center;
  transform: rotate(-6deg);
  transition: transform 0.2s ease;
}

.wild4-choice-card:hover .choice-mini-card {
  transform: rotate(-3deg) scale(1.08);
}

.mini-card-oval {
  width: 24px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  transform: rotate(-22deg);
  position: absolute;
}

.mini-card-plus {
  position: relative;
  z-index: 1;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
}

.choice-swords-aura {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.7));
  animation: swordBounce 1.8s infinite ease-in-out;
}

@keyframes swordBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(-6deg); }
}

.choice-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 2px 0;
}

.accept-choice .choice-name { color: #93c5fd; }
.challenge-choice .choice-name { color: #fca5a5; }

.choice-tagline {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 600;
  margin: 0 0 10px 0;
}

.choice-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
}

.choice-perks li {
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(15, 23, 42, 0.55);
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.perk-win {
  border-left: 3px solid #22c55e !important;
  color: #86efac !important;
}

.perk-lose {
  border-left: 3px solid #ef4444 !important;
  color: #fca5a5 !important;
}

.perk-icon {
  font-size: 13px;
  line-height: 1.1;
  flex-shrink: 0;
}

/* Choice Buttons */
.btn-choice-accept {
  width: 100%;
  margin-top: auto;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  border-radius: 12px;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border: 1.5px solid #93c5fd;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.btn-choice-accept:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.7);
}

.btn-choice-challenge {
  width: 100%;
  margin-top: auto;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  border-radius: 12px;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border: 1.5px solid #fca5a5;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: challengePulse 2s infinite ease-in-out;
  cursor: pointer;
}

.btn-choice-challenge:hover {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 6px 22px rgba(239, 68, 68, 0.85);
}

@keyframes challengePulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 4px 24px rgba(239, 68, 68, 0.9); }
}

.wild4-vs-divider {
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid rgba(245, 158, 11, 0.6);
  display: grid;
  place-items: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #fbbf24;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.wild4-timer-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.wild4-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #10b981 0%, #f59e0b 60%, #ef4444 100%);
  transform-origin: left;
  transition: width 0.25s linear;
}

/* Challenge Result Modal */
.challenge-result-card {
  max-width: 580px;
  width: 94%;
  background: radial-gradient(ellipse at 50% 10%, #1e293b 0%, #0a0f1d 100%);
  border: 2.5px solid #38bdf8;
  border-radius: 28px;
  padding: 24px 26px 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(56, 189, 248, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: modalPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.challenge-result-card.is-guilty {
  border-color: #22c55e;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(34, 197, 94, 0.4);
}

.challenge-result-card.is-innocent {
  border-color: #ef4444;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(239, 68, 68, 0.4);
}

.challenge-result-sunburst {
  position: absolute;
  width: 650px;
  height: 650px;
  top: -150px;
  left: calc(50% - 325px);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(56, 189, 248, 0.08) 20deg,
    transparent 40deg,
    rgba(56, 189, 248, 0.08) 60deg,
    transparent 80deg,
    rgba(56, 189, 248, 0.08) 100deg,
    transparent 120deg,
    rgba(56, 189, 248, 0.08) 140deg,
    transparent 160deg,
    rgba(56, 189, 248, 0.08) 180deg,
    transparent 200deg,
    rgba(56, 189, 248, 0.08) 220deg,
    transparent 240deg,
    rgba(56, 189, 248, 0.08) 260deg,
    transparent 280deg,
    rgba(56, 189, 248, 0.08) 300deg,
    transparent 320deg,
    rgba(56, 189, 248, 0.08) 340deg,
    transparent 360deg
  );
  animation: slowSunburst 35s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.challenge-result-icon {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}

.challenge-result-title {
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 25px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 8px 0;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.challenge-result-subtitle {
  font-size: 14px;
  color: #cbd5e1;
  margin: 0 0 16px 0;
  line-height: 1.45;
  position: relative;
  z-index: 1;
}

.challenge-hand-section {
  width: 100%;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.challenge-hand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  color: #94a3b8;
}

.challenge-hand-title {
  font-weight: 700;
  color: #e2e8f0;
}

.challenge-hand-hint {
  font-size: 12px;
  color: #facc15;
  font-weight: 700;
}

.challenge-revealed-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px 2px;
}

.challenge-revealed-cards .uno-card {
  width: 58px;
  height: 87px;
  pointer-events: none;
}

.challenge-revealed-cards .uno-card.challenge-bluff-card {
  box-shadow: 0 0 0 3px #ef4444, 0 0 18px #ef4444;
  animation: bluffCardPulse 1.2s infinite alternate ease-in-out;
  transform: translateY(-4px) scale(1.05);
  z-index: 2;
}

@keyframes bluffCardPulse {
  0% { transform: translateY(-4px) scale(1.05); box-shadow: 0 0 0 3px #ef4444, 0 0 12px #ef4444; }
  100% { transform: translateY(-7px) scale(1.09); box-shadow: 0 0 0 4px #f87171, 0 0 24px #ef4444; }
}

.challenge-result-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* The Accept / Challenge buttons must always be on screen: the window never grows
   taller than the screen (it scrolls instead)... */
.wild4-challenge-card {
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
}

/* ...and it's just the choice: two buttons side by side, no hints (turns are short) */
.wild4-challenge-card {
  max-width: 440px;
  padding: 14px 14px 12px;
  border-radius: 20px;
}
.wild4-hero-title {
  font-size: 20px;
  margin: 4px 0;
}
.wild4-event-summary {
  font-size: 13px;
}
.wild4-choices-grid {
  flex-direction: row;
  gap: 10px;
  margin: 12px 0 10px;
}
.wild4-sunburst,
.wild4-vs-divider,
.choice-card-art,
.choice-perks,
.choice-badge,
.choice-name,
.choice-tagline {
  display: none;
}
.wild4-choice-card {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}
.btn-choice-accept,
.btn-choice-challenge {
  width: 100%;
  margin: 0;
  padding: 12px 8px;
  font-size: 15px;
}



/* ---------------------------------------------------------------------------
   Winning board podium: 1st in the middle on the highest step, 2nd left, 3rd right
   --------------------------------------------------------------------------- */
.gameover-spotlight .gameover-crown,
.gameover-spotlight .gameover-avatar-wrap {
  display: none; /* the podium shows the winner */
}

.gameover-podium {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 6px 0 10px;
}

.podium-spot {
  --step-h: 28px;
  --step-top: #cbd5e1;
  --step-bottom: #64748b;
  --tile: 38px;
  flex: 0 1 120px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.podium-spot.place-1 {
  --step-h: 44px;
  --step-top: #fde047;
  --step-bottom: #ca8a04;
  --tile: 48px;
}

.podium-spot.place-2 {
  --step-h: 34px;
  --step-top: #e2e8f0;
  --step-bottom: #94a3b8;
}

.podium-spot.place-3 {
  --step-h: 24px;
  --step-top: #fdba74;
  --step-bottom: #c2410c;
}

.podium-crown {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  animation: podium-crown-bob 1.6s ease-in-out infinite;
}

@keyframes podium-crown-bob {
  50% {
    transform: translateY(-4px) rotate(-6deg);
  }
}

.podium-avatar {
  width: var(--tile);
  height: var(--tile);
  font-size: calc(var(--tile) * 0.46);
}

.place-1 .podium-avatar {
  border-color: #fde047;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.75), 0 0 22px rgba(253, 224, 71, 0.75);
}

.podium-name {
  max-width: 100%;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.place-1 .podium-name {
  font-size: 16px;
  color: #fde047;
}

.is-me .podium-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.podium-cards {
  margin: 1px 0 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
}

.podium-step {
  width: 100%;
  height: var(--step-h);
  display: grid;
  place-items: center;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--step-top), var(--step-bottom));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4);
}

.podium-step span {
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: calc(var(--step-h) * 0.55);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}

/* Short screens: the round-over card must fit with no scrolling, so the
   Play Next Round / Back to Lobby buttons are never hidden below the fold */
@media (max-height: 700px) {
  .gameover-ribbon {
    padding: 8px 20px 4px;
  }
  .gameover-crown {
    display: none;
  }
  .gameover-podium {
    margin: 2px 0 6px;
  }
  .podium-spot {
    --tile: 32px;
    --step-h: 22px;
  }
  .podium-spot.place-1 {
    --tile: 40px;
    --step-h: 34px;
  }
  .podium-spot.place-2 {
    --step-h: 26px;
  }
  .podium-spot.place-3 {
    --step-h: 18px;
  }
  .gameover-stat-card {
    padding: 5px 8px;
  }
  .gameover-stat-value {
    font-size: 20px;
  }
  .gameover-match-progress {
    padding: 5px 12px;
  }
  .gameover-reason-pill {
    padding: 5px 14px;
  }
  .gameover-body {
    gap: 5px;
    margin-top: 5px;
  }
  .gameover-buttons {
    margin-top: 6px;
  }
  .gameover-btn-primary,
  .gameover-btn-secondary {
    padding: 9px 14px !important;
  }
}

/* Classic and Wild Rush have no points match: no progress bar */
.gameover-match-progress.hidden {
  display: none;
}

/* Narrow phones in a game: the button row (voice + quick actions) and the Leave button share
   the header, so the buttons get a little smaller and Leave shows just its door */
@media (max-width: 600px) {
  body[data-view='game'] .side-dock {
    right: 6px;
    gap: 4px;
  }
  body[data-view='game'] .side-dock .btn-dock {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  body[data-view='game'] #btn-mic.mic-off::after,
  body[data-view='game'] #btn-voice.speaker-off::after {
    width: 20px;
  }
}

/* ---------------------------------------------------------------------------
   Settings menu: the side dock is now a single ⚙️ button with a drop-down
   --------------------------------------------------------------------------- */
.side-dock {
  padding: 0;
  overflow: visible;
  position: relative;
  top: auto;
  right: auto;
  z-index: 110;
  display: flex;
  align-items: center;
}

.side-dock .dock-trigger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 2px solid rgba(252, 209, 22, 0.65);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 14px rgba(252, 209, 22, 0.25), inset 0 1.5px 1px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}

.side-dock .dock-trigger:hover {
  transform: scale(1.1);
  border-color: #fcd116;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65), 0 0 22px rgba(252, 209, 22, 0.5), inset 0 1.5px 1px rgba(255, 255, 255, 0.5);
}

.side-dock .dock-trigger.open {
  background: linear-gradient(135deg, rgba(252, 209, 22, 0.25), rgba(15, 23, 42, 0.98));
  border-color: #fcd116;
  box-shadow: 0 4px 18px rgba(252, 209, 22, 0.45);
}

.dock-trigger-3d-gear {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.side-dock .dock-trigger:hover .dock-trigger-3d-gear {
  transform: rotate(25deg);
}

.side-dock .dock-trigger.open .dock-trigger-3d-gear {
  transform: rotate(60deg);
}

/* Mic is live: a green dot on the ⚙️ button */
.dock-mic-dot {
  display: none;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0a1220;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
}

.dock-trigger.mic-live .dock-mic-dot {
  display: block;
}

.dock-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  width: 295px;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 8px 10px;
  border-radius: 20px;
  background: linear-gradient(170deg, rgba(14, 23, 42, 0.98) 0%, rgba(7, 12, 24, 0.99) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.85),
              0 0 0 1px rgba(255, 255, 255, 0.06),
              0 0 30px rgba(252, 209, 22, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: dock-menu-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.dock-menu.hidden {
  display: none;
}

@keyframes dock-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Custom scrollbar for settings menu */
.dock-menu::-webkit-scrollbar {
  width: 5px;
}
.dock-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.dock-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(252, 209, 22, 0.4);
}

.dock-menu-head {
  padding: 4px 8px 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dock-menu-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dock-menu-pill {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fcd116, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dock-menu-sparkle {
  font-size: 12px;
  animation: dock-sparkle-float 2s ease-in-out infinite alternate;
}

@keyframes dock-sparkle-float {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-2px) rotate(15deg);
  }
}

.dock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px 7px 8px;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  user-select: none;
}

.dock-row[hidden] {
  display: none;
}

.dock-row:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.dock-row:active {
  transform: scale(0.98);
}

/* Visually clipped button trigger for accessibility & clean DOM event bubbling */
.dock-menu .dock-row .btn-dock {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* 3D Logos and Badges */
.dock-3d-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
              inset 0 1.5px 1.5px rgba(255, 255, 255, 0.4),
              inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.dock-row:hover .dock-3d-badge {
  transform: scale(1.1) translateY(-1px);
  filter: brightness(1.12);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5),
              inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
              inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

/* Badge Gradients & Color Accents */
.dock-badge-tutorial {
  background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
  border: 1.5px solid #a78bfa;
}
.dock-badge-rules {
  background: linear-gradient(135deg, #ea580c 0%, #7c2d12 100%);
  border: 1.5px solid #fb923c;
}
.dock-badge-friends {
  background: linear-gradient(135deg, #3b82f6 0%, #1e1b4b 100%);
  border: 1.5px solid #60a5fa;
}
.dock-badge-settings {
  background: linear-gradient(135deg, #db2777 0%, #700c3b 100%);
  border: 1.5px solid #f472b6;
}
.dock-badge-throws {
  background: linear-gradient(135deg, #059669 0%, #064e3b 100%);
  border: 1.5px solid #34d399;
}
.dock-badge-sound {
  background: linear-gradient(135deg, #f97316 0%, #9a3412 100%);
  border: 1.5px solid #fdba74;
}
.dock-badge-music {
  background: linear-gradient(135deg, #0284c7 0%, #0c4a6e 100%);
  border: 1.5px solid #38bdf8;
}
.dock-badge-leaderboard {
  background: linear-gradient(135deg, #d97706 0%, #78350f 100%);
  border: 1.5px solid #fde047;
}
.dock-badge-voice {
  background: linear-gradient(135deg, #0d9488 0%, #134e4a 100%);
  border: 1.5px solid #2dd4bf;
}
.dock-badge-mic {
  background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
  border: 1.5px solid #f87171;
}

/* Dimmed appearance when toggled off */
.dock-3d-badge.badge-off {
  filter: grayscale(0.7) opacity(0.6);
}

/* Typography */
.dock-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dock-row-label {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.25;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-row-sub {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-row:hover .dock-row-label {
  color: #ffffff;
}

.dock-row:hover .dock-row-sub {
  color: #cbd5e1;
}

/* Right-side State indicators */
.dock-row-state {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  transition: all 0.18s ease;
}

.dock-row-state:empty {
  display: none;
}

/* Navigation rows with chevron › */
.dock-row:not([data-keep-open]) .dock-row-state {
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 14px;
  font-weight: 900;
}

.dock-row:not([data-keep-open]):hover .dock-row-state {
  background: rgba(252, 209, 22, 0.2);
  color: #fcd116;
  transform: translateX(2px);
}

/* Toggle pills */
.dock-row[data-keep-open] .dock-row-state.on {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.dock-row[data-keep-open] .dock-row-state:not(.on) {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* In a game the ⚙️ button sits in the header controls */
body[data-view='game'] .side-dock {
  padding: 0;
  position: relative;
  top: auto;
  right: auto;
}

@media (max-width: 600px) {
  .dock-menu {
    width: min(290px, calc(100vw - 16px));
  }
}

/* ---------------------------------------------------------------------------
   Tutorial: intro slides and the guided practice game
   --------------------------------------------------------------------------- */
.tutorial-card {
  width: min(560px, 96vw);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 14px 18px 18px;
  text-align: center;
}

.tutorial-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tutorial-progress {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
}

.tutorial-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.tutorial-art {
  font-size: 54px;
  line-height: 1;
  margin: 6px 0 8px;
}

.tutorial-win {
  animation: tut-bounce 1s ease-in-out infinite;
}

@keyframes tut-bounce {
  50% {
    transform: translateY(-8px) scale(1.06);
  }
}

.tutorial-title {
  margin: 0 0 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
}

.tutorial-text {
  margin: 0 auto 16px;
  max-width: 440px;
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.55;
}

.tutorial-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  max-width: 320px;
  margin: 0 auto;
}

/* the mini table */
.tutorial-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tutorial-table.hidden,
.tutorial-intro.hidden,
.tut-colors.hidden {
  display: none;
}

.tut-bot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.tut-bot-avatar {
  --tile: 38px;
  width: 38px;
  height: 38px;
  font-size: 20px;
}

.tut-bot-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 12px;
}

.tut-piles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  zoom: 0.8;
}

.tut-draw {
  padding: 0;
  border: none;
  background: none;
  border-radius: 14px;
  cursor: pointer;
}

.tut-discard {
  position: relative;
}

.tut-called {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  padding: 1px 9px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.c-red { background: #e3202c; }
.c-blue { background: #1f6fd6; }
.c-green { background: #1f9d45; }
.c-yellow { background: #e2b000; }

.tut-coach {
  min-height: 3.2em;
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(252, 209, 22, 0.1);
  border: 1px solid rgba(252, 209, 22, 0.35);
  font-size: 15px;
  line-height: 1.45;
  width: 100%;
  box-sizing: border-box;
}

.tut-coach.tut-wrong {
  border-color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  animation: tut-shake 0.35s;
}

.tut-hint {
  color: #fcd116;
  font-weight: 800;
}

@keyframes tut-shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.tut-colors {
  display: flex;
  gap: 8px;
}

.tut-color {
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 12px;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.tut-hand {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  zoom: 0.72;
}

.tut-hand .uno-card {
  margin: 0;
}

/* the one thing to tap now */
.tut-target {
  animation: tut-glow 1s ease-in-out infinite;
  outline: 3px solid #fcd116;
  outline-offset: 3px;
}

.tut-hand .uno-card.tut-target {
  transform: translateY(-12px);
}

@keyframes tut-glow {
  50% {
    box-shadow: 0 0 22px 6px rgba(252, 209, 22, 0.75);
  }
}

.tut-actions {
  display: flex;
  justify-content: center;
}

.tut-solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #1a1a1a;
  background: radial-gradient(circle at 40% 35%, #ff5a4f, #c1121f 70%);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}

.tut-solo b {
  color: #ffd500;
  font-family: 'Fredoka', sans-serif;
  font-size: 17px;
  letter-spacing: 0;
}

.tut-solo.tut-target {
  outline-offset: 2px;
}

/* short screens (landscape phones): tighter */
@media (max-height: 520px) {
  .tutorial-art {
    font-size: 36px;
    margin: 0 0 4px;
  }
  .tutorial-title {
    font-size: 19px;
  }
  .tutorial-text {
    font-size: 13px;
    margin-bottom: 10px;
  }
  .tut-piles {
    zoom: 0.55;
  }
  .tut-hand {
    zoom: 0.5;
  }
  .tut-coach {
    font-size: 13px;
    padding: 6px 10px;
  }
}

/* ---------------------------------------------------------------------------
   Login streak calendar
   --------------------------------------------------------------------------- */
.streak-card {
  position: relative;
  width: min(520px, 96vw);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 18px 16px 16px;
  text-align: center;
}

.streak-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.streak-flame {
  font-size: 46px;
  line-height: 1;
  animation: tut-bounce 1.4s ease-in-out infinite;
}

.streak-title {
  margin: 6px 0 4px;
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
}

.streak-sub {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.streak-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}

.streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.7;
}

.streak-day-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  white-space: nowrap;
}

.streak-day-icon {
  font-size: 20px;
  line-height: 1;
}

.streak-day-coins {
  font-size: 12px;
  font-weight: 800;
  color: #fcd116;
}

.streak-day.done {
  opacity: 1;
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.14);
}

.streak-day.today {
  opacity: 1;
  border-color: #fcd116;
  background: rgba(252, 209, 22, 0.16);
  animation: tut-glow 1.2s ease-in-out infinite;
}

.streak-day.bonus {
  grid-column: auto;
  border-style: dashed;
}

.streak-day.bonus .streak-day-coins {
  color: #ff9a3c;
  font-size: 13px;
}

.streak-claim {
  width: 100%;
  max-width: 320px;
  font-size: 17px;
}

.streak-claim[hidden] {
  display: none;
}

.streak-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.streak-save {
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(252, 209, 22, 0.08);
  border: 1px solid rgba(252, 209, 22, 0.3);
  text-align: center;
}

.streak-save.hidden {
  display: none;
}

.streak-save-note {
  margin: 0 0 8px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
}

.streak-save-btn {
  width: 100%;
  font-size: 14px;
}

@media (max-width: 420px) {
  .streak-days {
    gap: 4px;
  }
  .streak-day-icon {
    font-size: 16px;
  }
  .streak-day-coins {
    font-size: 10px;
  }
  .streak-day-label {
    font-size: 9px;
  }
}

/* ---------------------------------------------------------------------------
   Throwable gifts
   --------------------------------------------------------------------------- */
body[data-view='game'] .seat .opp-avatar {
  cursor: pointer; /* tap a player's picture to throw a gift */
}

.throw-tray {
  position: fixed;
  z-index: 140;
  width: min(300px, calc(100vw - 16px));
  padding: 10px;
  border-radius: 16px;
  background: rgba(10, 18, 32, 0.97);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  animation: dock-menu-in 0.14s ease-out;
}

.throw-tray.hidden {
  display: none;
}

.throw-tray-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 800;
}

.throw-tray-coins {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(252, 209, 22, 0.45);
  background: rgba(252, 209, 22, 0.12);
  color: #fcd116;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.throw-tray-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.throw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.throw-item:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  background: rgba(255, 255, 255, 0.14);
}

.throw-item.too-pricey {
  opacity: 0.4;
}

.throw-emoji {
  font-size: 24px;
  line-height: 1;
}

.throw-price-tag {
  color: #fcd116;
  font-size: 11px;
  font-weight: 800;
}

/* the lion: the big one, across the whole row */
.throw-item-lion {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  border-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.25), rgba(234, 88, 12, 0.25));
}

.throw-item-lion .throw-emoji {
  font-size: 32px;
}

.throw-item-lion .throw-price-tag {
  font-size: 14px;
}

.throw-item-lion::after {
  content: 'LION';
  color: #fde68a;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
}

/* flying gift and its landing */
.throw-fx,
.throw-mark,
.throw-spark,
.throw-roar-text {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  line-height: 1;
}

.throw-fx {
  font-size: 34px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}

.throw-fx-lion {
  font-size: 80px;
}

.throw-mark {
  font-size: 46px;
  transform: translate(-50%, -50%);
  animation: throw-mark 1.4s ease-out forwards;
}

.throw-mark-splat {
  font-size: 54px;
  animation: throw-splat 1.4s ease-out forwards;
}

.throw-mark-boom {
  font-size: 90px;
  animation: throw-boom 0.9s ease-out forwards;
}

.throw-mark-crown {
  animation: throw-crown 2.5s ease-out forwards;
}

.throw-mark-roar {
  font-size: 110px;
  animation: throw-lion-land 2.5s ease-out forwards;
}

@keyframes throw-mark {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(1); opacity: 0; }
}

@keyframes throw-splat {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.4, 0.8); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 0.9; }
  100% { transform: translate(-50%, -30%) scale(1); opacity: 0; }
}

@keyframes throw-boom {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

@keyframes throw-crown {
  0% { transform: translate(-50%, -140%) scale(0.5); opacity: 0; }
  20% { transform: translate(-50%, -110%) scale(1.2); opacity: 1; }
  85% { transform: translate(-50%, -110%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(1); opacity: 0; }
}

@keyframes throw-lion-land {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
  15% { transform: translate(-50%, -50%) scale(1.35); }
  25% { transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

.throw-spark {
  font-size: 20px;
  transform: translate(-50%, -50%);
  animation: throw-spark 1s ease-out forwards;
}

@keyframes throw-spark {
  from { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
  to { transform: translate(calc(-50% + var(--sx)), -180%) scale(1); opacity: 0; }
}

.throw-roar-text {
  transform: translate(-50%, -150%);
  color: #fde047;
  font-family: 'Rubik', 'Arial Black', sans-serif;
  font-size: 44px;
  font-weight: 900;
  -webkit-text-stroke: 2px #7c2d12;
  animation: throw-roar 1.6s ease-out forwards;
}

@keyframes throw-roar {
  0% { transform: translate(-50%, -120%) scale(0.4); opacity: 0; }
  20% { transform: translate(-50%, -160%) scale(1.3); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(1.1); opacity: 0; }
}

.throw-shake {
  animation: throw-shake 0.6s ease-in-out;
}

@keyframes throw-shake {
  20% { transform: translate(-6px, 2px) rotate(-3deg); }
  40% { transform: translate(6px, -2px) rotate(3deg); }
  60% { transform: translate(-4px, 1px) rotate(-2deg); }
  80% { transform: translate(3px, 0) rotate(1deg); }
}

/* the seat translate is kept while it shakes (positioned seats use transform) */
.seat.throw-shake {
  animation-name: throw-shake-seat;
}

@keyframes throw-shake-seat {
  20%, 60% { filter: brightness(1.4); }
  40%, 80% { filter: brightness(0.9); }
}

.throw-frozen .opp-avatar {
  filter: hue-rotate(160deg) saturate(1.6) brightness(1.2);
  box-shadow: 0 0 0 3px #7dd3fc, 0 0 22px rgba(125, 211, 252, 0.9);
}

.throw-quake {
  animation: throw-quake 0.8s ease-in-out;
}

@keyframes throw-quake {
  10%, 50%, 90% { transform: translate(-5px, 2px); }
  30%, 70% { transform: translate(5px, -2px); }
}

@media (prefers-reduced-motion: reduce) {
  .throw-quake,
  .throw-shake {
    animation: none;
  }
}

/* How to play: the throwable gifts and their prices */
.rules-gifts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.rules-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 5px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.rules-gift-emoji {
  font-size: 20px;
  line-height: 1.1;
}

.rules-gift-price {
  color: #fcd116;
  font-size: 11px;
  font-weight: 800;
}

.rules-gift-lion {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(234, 88, 12, 0.25));
}

.rules-gift-lion .rules-gift-emoji {
  font-size: 26px;
}

.rules-list-after-gifts {
  margin-top: 12px;
}

/* ---------------------------------------------------------------------------
   Coins popup and rewarded videos
   --------------------------------------------------------------------------- */
.coins-tappable {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.coins-tappable:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(251, 191, 36, 0.55));
  transform: translateY(-1px);
}

.coins-card {
  position: relative !important;
  width: min(430px, calc(100vw - 28px)) !important;
  max-width: 430px !important;
  padding: 22px 20px 20px !important;
  background: radial-gradient(ellipse at 50% 0%, #1e294b 0%, #0d1629 55%, #070c17 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.4) !important;
  border-radius: 26px !important;
  box-shadow:
    0 25px 65px -10px rgba(0, 0, 0, 0.9),
    0 0 45px rgba(245, 158, 11, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  overflow: hidden !important;
  text-align: left !important;
  animation: picker-pop 0.28s cubic-bezier(0.2, 1.2, 0.4, 1);
}

/* Background Sunburst Aura */
.coins-card-sunburst {
  position: absolute;
  top: -65%;
  left: -65%;
  width: 230%;
  height: 230%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(245, 158, 11, 0.038) 0deg 14deg,
    transparent 14deg 28deg
  );
  animation: coins-sunburst-spin 50s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes coins-sunburst-spin {
  to { transform: rotate(360deg); }
}

.coins-card-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 180px;
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Header */
.coins-modal-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.coins-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coins-header-gem {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.15) 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.coins-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.coins-title-heading {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.15;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 40%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  letter-spacing: 0.5px;
}

.coins-title-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.coins-close-btn {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.coins-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.7);
  color: #ffffff;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

/* Hero Vault Card */
.coins-vault-hero {
  position: relative;
  z-index: 2;
  margin: 14px 0 12px;
  padding: 16px 14px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(26, 38, 64, 0.75) 0%, rgba(12, 19, 36, 0.95) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.32);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 25px rgba(245, 158, 11, 0.08);
  text-align: center;
  overflow: hidden;
}

.coins-vault-shimmer {
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    65deg,
    transparent 42%,
    rgba(255, 255, 255, 0.08) 48%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent 58%
  );
  animation: coins-vault-sheen 6s infinite;
  pointer-events: none;
}

@keyframes coins-vault-sheen {
  0%, 70% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.coins-vault-tag {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #fef08a;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.coins-balance {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 4px 0 2px !important;
}

.coins-big-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.35));
  animation: coins-coin-float 3s ease-in-out infinite;
}

@keyframes coins-coin-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.coins-gold-svg {
  display: block;
}

.coins-balance strong {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 25%, #f59e0b 65%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.35)) !important;
}

/* Deficit alert */
.coins-need {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.15) 100%);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #fecaca;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.18);
  animation: tut-bounce 1s ease-in-out 1;
}

/* Section Divider */
.coins-section-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
}

.coins-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.coins-more-title {
  font-family: 'Outfit', sans-serif !important;
  margin: 0 !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

/* Ways To Get Coins List */
.coins-ways {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coins-way {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(8px);
  color: #f1f5f9;
  font-family: 'Outfit', sans-serif;
  text-align: left;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
  box-sizing: border-box;
}

button.coins-way {
  cursor: pointer;
}

button.coins-way:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

button.coins-way:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

button.coins-way:disabled {
  opacity: 0.5;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

/* Icon Jewel Orbs */
.coins-way-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.coins-way-icon {
  font-size: 21px;
  line-height: 1;
}

.ad-icon-box {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border: 1.5px solid #6ee7b7;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
}

.streak-icon-box {
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
  border: 1.5px solid #fdba74;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.35);
}

.win-icon-box {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  border: 1.5px solid #c4b5fd;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.35);
}

.friends-icon-box {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  border: 1.5px solid #7dd3fc;
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.35);
}

/* Card Text */
.coins-way-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.coins-way-text strong {
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}

.coins-way-text small {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

/* Badge & Rewards */
.coins-way-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.coins-way-reward {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fcd116 !important;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.coins-action-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 3px 9px;
}

.coins-way-chevron {
  color: #64748b;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

button.coins-way:hover .coins-way-chevron {
  transform: translateX(3px);
  color: #ffffff;
}

/* Video ad card special styling */
.coins-way-ad {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.08) 100%) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.12);
}

button.coins-way-ad:hover:not(:disabled) {
  border-color: rgba(52, 211, 153, 0.85) !important;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.25) !important;
}

/* Streak ready animation */
.coins-way.ready {
  border-color: rgba(251, 191, 36, 0.75) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.1) 100%) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.25) !important;
  animation: coins-streak-pulse 1.8s ease-in-out infinite;
}

@keyframes coins-streak-pulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.22);
    border-color: rgba(251, 191, 36, 0.75);
  }
  50% {
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.45);
    border-color: rgba(253, 224, 71, 0.95);
  }
}

.coins-get-link {
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(252, 209, 22, 0.5);
  background: rgba(252, 209, 22, 0.15);
  color: #fcd116;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* the video */
.ad-player {
  position: fixed;
  inset: 0;
  z-index: 2000; /* above every popup */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.88);
}

.ad-player.hidden {
  display: none;
}

.ad-frame {
  position: relative;
  width: min(640px, 100%);
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ad-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fde047;
  font-size: 12px;
  font-weight: 800;
}

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  background: radial-gradient(circle at 50% 40%, #1e3a8a, #0b1220 70%);
}

.ad-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  color: #cbd5e1;
  text-align: center;
}

.ad-placeholder strong {
  color: #fff;
  font-size: 20px;
}

.ad-placeholder-icon {
  font-size: 48px;
  animation: ad-bob 1.6s ease-in-out infinite;
}

@keyframes ad-bob {
  50% { transform: translateY(-6px) scale(1.05); }
}

.ad-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.ad-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #22c55e;
  transition: width 0.25s linear;
}

.ad-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
}

.ad-countdown {
  color: #e2e8f0;
  font-weight: 700;
}

.ad-close {
  padding: 8px 14px;
  font-size: 14px;
}

.ad-close.ready {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}