:root {
  --party-coral: #ff6f8f;
  --party-coral-deep: #ff4f78;
  --party-sky: #65d6ff;
  --party-mint: #8cf0cf;
  --party-gold: #ffd46b;
  --party-ink: #1f2751;
  --party-muted: #5e6790;
  --card-shadow: 0 20px 45px rgba(42, 53, 102, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  color: var(--party-ink);
  margin: 0;
  position: relative;
}

body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 999px;
  filter: blur(1px);
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
}

body::before {
  width: min(32vw, 440px);
  height: min(32vw, 440px);
  left: -8vw;
  top: -10vh;
  background: radial-gradient(circle at 35% 35%, #fff7b5 0%, #ffd46b 55%, transparent 76%);
}

body::after {
  width: min(34vw, 470px);
  height: min(34vw, 470px);
  right: -8vw;
  bottom: -12vh;
  background: radial-gradient(circle at 45% 45%, #a8e9ff 0%, #65d6ff 55%, transparent 78%);
}

.landing-bg {
  background: linear-gradient(145deg, #fff3f8 0%, #f4fbff 40%, #f6fffa 100%);
}

.boss-bg {
  background: linear-gradient(145deg, #fff2f7 0%, #eef8ff 42%, #f6fffc 100%);
}

.player-bg {
  background: linear-gradient(145deg, #fff5f0 0%, #edf9ff 45%, #f4fff8 100%);
}

.display-title {
  font-family: 'Baloo 2', cursive;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--party-ink);
}

.subtitle {
  color: var(--party-muted);
  font-weight: 700;
}

.glass-card,
.game-card,
.question-card,
.waiting-card,
.final-card {
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 26px;
  box-shadow: var(--card-shadow);
}

.glass-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

.game-card,
.question-card,
.waiting-card {
  background: #ffffff;
  color: var(--party-ink);
}

.final-card {
  background: #ffffff;
  color: var(--party-ink);
}

.alert-warning {
  background: #fff5d8;
  border: 1px solid #ffe59d;
  color: #7a5600;
}

.stat-pill {
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #ffd5e0;
  color: var(--party-muted);
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.38rem 0.8rem;
}

.input-pill {
  border-radius: 999px;
  border: 2px solid #dce4ff;
  font-weight: 700;
  color: var(--party-ink);
}

.input-pill:focus {
  border-color: var(--party-coral);
  box-shadow: 0 0 0 0.25rem rgba(255, 111, 143, 0.2);
}

.btn-party {
  background: linear-gradient(100deg, var(--party-coral), var(--party-coral-deep));
  color: #ffffff;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.btn-party:hover,
.btn-party:focus {
  color: #ffffff;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 20px rgba(255, 79, 120, 0.32);
}

.btn-outline-soft {
  border-radius: 999px;
  border: 2px solid #d7ddf9;
  color: var(--party-ink);
  font-weight: 800;
  background: #ffffff;
}

.btn-outline-soft:hover,
.btn-outline-soft:focus {
  background: #f1f4ff;
  color: var(--party-ink);
}

.session-code {
  font-family: 'Baloo 2', cursive;
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing: 5px;
  color: var(--party-coral-deep);
}

.qr-image {
  max-width: 340px;
  width: 100%;
  border-radius: 16px;
  border: 6px solid #fff;
}

.join-url {
  color: var(--party-coral-deep);
  font-weight: 800;
}

.option-chip {
  border-radius: 20px;
  padding: 1rem 1.2rem;
  background: #f7f9ff;
  border: 2px solid #e4eaff;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--party-ink);
}

.option-chip.correct {
  border-color: #31be8f;
  background: #dff8ef;
}

.question-text {
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.7rem, 4.6vw, 2.9rem);
}

.player-question-title {
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.8rem, 7vw, 3rem);
}

.answer-btn {
  border: 2px solid #e4e9ff;
  border-radius: 20px;
  min-height: 72px;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  font-weight: 800;
  background: #ffffff;
  color: var(--party-ink);
}

.answer-btn:active,
.answer-btn:focus,
.answer-btn:hover {
  background: #fff0f5;
  border-color: #ffb9cc;
  color: var(--party-ink);
}

.submitted-box {
  border-radius: 20px;
  background: #f6f9ff;
  color: var(--party-ink);
}

.winner-row {
  background: #fff1c8 !important;
}

.list-group-item {
  border-color: #edf1ff;
}

.list-group-item.bg-transparent {
  color: var(--party-ink) !important;
}

.badge.text-bg-light {
  background: #eff3ff !important;
  color: #2c3567 !important;
}

.pulse-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--party-coral);
  animation: pulse 1.2s infinite ease-in-out;
}

.mini-hero-title {
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.45rem, 3vw, 2rem);
  color: var(--party-ink);
}

.tiny-muted {
  color: var(--party-muted);
}

@keyframes pulse {
  0% {
    transform: scale(0.86);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.25);
    opacity: 0.2;
  }
  100% {
    transform: scale(0.86);
    opacity: 0.9;
  }
}

@media (max-width: 576px) {
  .question-card,
  .waiting-card,
  .game-card,
  .glass-card {
    border-radius: 18px;
  }

  .option-chip {
    font-size: 1rem;
  }
}