/* ============================================================
   Word-Bluff.com — Stylesheet
   ============================================================ */

* { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #09090b;
}

/* ── Glassmorphism card ───────────────────────────────────── */
.glass {
  background: rgba(28, 28, 37, 0.85);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(167, 139, 250, 0.13);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}
.btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.5);
}
.btn-primary:active { transform: translateY(0); }

.btn-green {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.35);
}
.btn-green:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(22, 163, 74, 0.45);
}
.btn-green:active { transform: translateY(0); }

.btn-red {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(185, 28, 28, 0.35);
}
.btn-red:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.btn-red:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s ease;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* ── Form inputs ──────────────────────────────────────────── */
select,
input[type="number"] {
  background: rgba(28, 28, 37, 0.9);
  border: 1px solid rgba(167, 139, 250, 0.2);
  color: #e4e4f0;
  transition: border-color 0.2s;
}
select:focus,
input[type="number"]:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 1; }

/* ── Role badges ──────────────────────────────────────────── */
.badge-impostor {
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.3), rgba(239, 68, 68, 0.2));
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.badge-innocent {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.25), rgba(34, 197, 94, 0.15));
  border: 1px solid rgba(34, 197, 94, 0.35);
}

/* ── Word reveal card ─────────────────────────────────────── */
.word-reveal-card {
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.18), rgba(168, 85, 247, 0.08));
  border: 1.5px solid rgba(167, 139, 250, 0.3);
}

/* ── Starfield ────────────────────────────────────────────── */
.star-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: twinkle var(--dur) ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: var(--min); }
  50%       { opacity: var(--max); }
}

/* ── Screen visibility ────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: flex; }