/* ------------------------------------------------------------------ *
 * Hivemind — shared design tokens and primitives.
 * ------------------------------------------------------------------ */

:root {
  --bg: #0a0a18;
  --bg-2: #141433;
  --bg-3: #1d1d44;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);

  --text: #f4f4ff;
  --text-dim: rgba(244, 244, 255, 0.62);
  --text-faint: rgba(244, 244, 255, 0.38);

  --accent: #7c5cff;
  --accent-2: #00e0c6;
  --gold: #ffcc46;
  --silver: #cfd6e6;
  --bronze: #e08a4a;

  --a0: #ff4d6d; /* answer A — red    */
  --a1: #2f9bff; /* answer B — blue   */
  --a2: #ffb020; /* answer C — amber  */
  --a3: #2fd47a; /* answer D — green  */

  --a0-dark: #c22945;
  --a1-dark: #1a6dc4;
  --a2-dark: #c07a05;
  --a3-dark: #17994f;

  --ok: #2fd47a;
  --bad: #ff4d6d;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.3);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 12% -10%, #2a1a5e 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, #0d3d54 0%, transparent 55%),
    radial-gradient(900px 900px at 50% 120%, #3a1547 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Slow aurora drift behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(124, 92, 255, 0.22), transparent) 20% 30% / 45% 45% no-repeat,
    radial-gradient(closest-side, rgba(0, 224, 198, 0.16), transparent) 78% 22% / 40% 40% no-repeat,
    radial-gradient(closest-side, rgba(255, 77, 109, 0.14), transparent) 55% 85% / 42% 42% no-repeat;
  animation: drift 26s var(--ease) infinite alternate;
}

@keyframes drift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, 2%, 0) scale(1.08);
  }
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

input,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ---------- screens ---------- */

.screen {
  display: none;
  animation: screen-in 0.4s var(--ease) both;
}

.screen.active {
  display: flex;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #b14bff);
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(124, 92, 255, 0.4);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #8d70ff, #bd60ff);
  box-shadow: 0 14px 38px rgba(124, 92, 255, 0.55);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--text);
}

.btn-lg {
  padding: 1.1em 2.4em;
  font-size: 1.3rem;
}

.btn-sm {
  padding: 0.55em 1.1em;
  font-size: 0.9rem;
}

/* ---------- answer colours ---------- */

.a-0 {
  --answer: var(--a0);
  --answer-dark: var(--a0-dark);
}
.a-1 {
  --answer: var(--a1);
  --answer-dark: var(--a1-dark);
}
.a-2 {
  --answer: var(--a2);
  --answer-dark: var(--a2-dark);
}
.a-3 {
  --answer: var(--a3);
  --answer-dark: var(--a3-dark);
}

/* ---------- utility ---------- */

.dim {
  color: var(--text-dim);
}

.faint {
  color: var(--text-faint);
}

.hidden {
  display: none !important;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
}

#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::before {
    animation: none;
  }
}