/* ── Body & Background ─────────────────────────────────────────────────── */
body {
  background-color: #060e20;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(196, 192, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255, 178, 188, 0.05) 0%, transparent 40%),
    linear-gradient(rgba(11, 19, 38, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 19, 38, 0.5) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  min-height: 100vh;
  color: #dae2fd;
  overflow-x: hidden;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
.font-headline-black {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
}

/* ── Glass Card ─────────────────────────────────────────────────────────── */
.glass-card {
  background: rgba(23, 31, 51, 0.4);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ── Neon Borders ───────────────────────────────────────────────────────── */
.neon-border-primary   { border-color: rgba(196, 192, 255, 0.4); box-shadow: 0 0 15px rgba(196, 192, 255, 0.2); }
.neon-border-secondary { border-color: rgba(255, 178, 188, 0.4); box-shadow: 0 0 15px rgba(255, 178, 188, 0.2); }
.neon-border-tertiary  { border-color: rgba(105, 218, 188, 0.4); box-shadow: 0 0 15px rgba(105, 218, 188, 0.2); }

/* ── Die ────────────────────────────────────────────────────────────────── */
.die-3d {
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  background: rgba(255, 255, 255, 0.03);
}

.led-dot {
  box-shadow: 0 0 12px currentColor, 0 0 4px currentColor inset;
}

.die-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Glow Text ──────────────────────────────────────────────────────────── */
.glow-text {
  text-shadow: 0 0 10px rgba(196, 192, 255, 0.5), 0 0 20px rgba(196, 192, 255, 0.3);
}

.glow-primary { filter: drop-shadow(0 0 15px rgba(196, 192, 255, 0.4)); }

/* ── Arcade Button ──────────────────────────────────────────────────────── */
.arcade-btn {
  box-shadow: 0 4px 0 rgb(135, 129, 255);
  transition: all 0.1s;
}
.arcade-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgb(135, 129, 255);
}

/* ── Score Dots ─────────────────────────────────────────────────────────── */
.score-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: inline-block;
  transition: background 0.3s, transform 0.2s;
}
.score-dot.filled  { transform: scale(1.2); border-color: transparent; }
.score-dot.win-dot { border-color: gold; }

/* ── Participant Chip ───────────────────────────────────────────────────── */
.participant-chip-used { opacity: 0.3; text-decoration: line-through; }

/* ── Winner Banner ──────────────────────────────────────────────────────── */
#winner-banner { transition: all 0.4s ease; }
#winner-banner.active {
  display: flex !important;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-20px) rotate(5deg); }
}
.animate-float { animation: float 6s infinite ease-in-out; }

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}
.animate-pulse-glow { animation: pulse-glow 3s infinite ease-in-out; }

@keyframes popIn {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes rollAnim {
  0%   { transform: rotate(0deg)   scale(1); }
  20%  { transform: rotate(-15deg) scale(1.15); }
  40%  { transform: rotate(20deg)  scale(0.9); }
  60%  { transform: rotate(-10deg) scale(1.1); }
  80%  { transform: rotate(8deg)   scale(0.95); }
  100% { transform: rotate(0deg)   scale(1); }
}
.rolling { animation: rollAnim 0.6s ease; }