:root {
  --bg:           #0a0a0f;
  --bg-2:         #11111a;
  --bg-card:      #14141f;
  --accent:       #e94560;
  --accent-hover: #ff6b85;
  --purple:       #7c3aed;
  --purple-light: #a78bfa;
  --green:        #22c55e;
  --text:         #e2e2ef;
  --muted:        #6b6b8a;
  --border:       rgba(255,255,255,0.07);
  --radius:       10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
}
.dot { color: var(--accent); }
.nav__back { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: color .2s; }
.nav__back:hover { color: var(--text); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.game-page { flex: 1; padding: 2rem 1rem 3rem; }
.game-container { max-width: 680px; margin: 0 auto; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.game-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}
.game-title { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; }
.game-desc  { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }

.score-box {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 1.2rem;
  white-space: nowrap;
}
.score-box__label {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.score-box__value {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}

/* ── Mode selector ───────────────────────────────────────────────────────── */
.mode-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.mode-btn {
  flex: 1;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all .2s;
}
.mode-btn.active {
  border-color: var(--purple);
  color: var(--purple-light);
  background: rgba(124,58,237,0.12);
}
.mode-btn:hover:not(.active) { border-color: rgba(255,255,255,0.15); color: var(--text); }

/* ── Category grid ───────────────────────────────────────────────────────── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
  transition: all .2s;
}
.cat-btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.cat-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.cat-icon  { font-size: 2.5rem; line-height: 1; }
.cat-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; }

/* ── Progress ────────────────────────────────────────────────────────────── */
.progress-wrap {
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--purple);
  border-radius: 2px;
  width: 0%;
  transition: width .4s ease;
}

/* ── Game meta ───────────────────────────────────────────────────────────── */
.game-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.timer { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--purple-light); }
.timer--urgent { color: var(--accent); animation: pulse .5s ease infinite alternate; }

@keyframes pulse { to { opacity: 0.5; } }

/* ── Question ────────────────────────────────────────────────────────────── */
.question-text {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  min-height: 3rem;
}

/* ── Options ─────────────────────────────────────────────────────────────── */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.opt-btn {
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  line-height: 1.4;
}
.opt-btn:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
}
.opt-btn:disabled { cursor: default; }
.opt-btn--selected { border-color: var(--purple); background: rgba(124,58,237,0.1); }
.opt-btn--correct  { border-color: var(--green); background: rgba(34,197,94,0.12); color: #86efac; }
.opt-btn--wrong    { border-color: var(--accent); background: rgba(233,69,96,0.12); color: #fca5a5; }

/* ── Feedback ────────────────────────────────────────────────────────────── */
#screen-feedback { text-align: center; }

.feedback-icon {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.feedback-icon--correct { color: var(--green); }
.feedback-icon--wrong   { color: var(--accent); }

.feedback-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.feedback-answer {
  color: var(--purple-light);
  font-weight: 500;
  margin-bottom: 1rem;
}
.feedback-exp {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.2rem;
  text-align: left;
}

/* ── Result ──────────────────────────────────────────────────────────────── */
#screen-result { text-align: center; padding: 2rem 0; }

.result-score {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.result-message {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}
.result-actions { margin-bottom: 1rem; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.game-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, transform .1s;
  text-decoration: none;
}
.game-btn:hover:not(:disabled) { background: var(--accent-hover); }
.game-btn:active:not(:disabled) { transform: scale(0.98); }
.game-btn:disabled { opacity: 0.5; cursor: default; }
.result-best { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.5rem; min-height: 1.2em; }
.result-best--new { color: var(--purple); font-weight: 600; }
.game-btn--secondary { background: transparent; border: 2px solid var(--purple); color: var(--purple); }
.game-btn--secondary:hover:not(:disabled) { background: var(--purple); color: #fff; }

/* ── Donate ──────────────────────────────────────────────────────────────── */
.donate-area { text-align: center; margin-top: 1.5rem; }
.donate-link { color: var(--muted); text-decoration: none; font-size: 0.85rem; transition: color .2s; }
.donate-link:hover { color: var(--accent); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding: 1.5rem; text-align: center; }
.footer__inner p { color: var(--muted); font-size: 0.85rem; }
.footer__inner a { color: var(--muted); }
.footer__inner a:hover { color: var(--text); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  .options-grid { grid-template-columns: 1fr; }
  .game-title { font-size: 1.6rem; }
  .result-score { font-size: 3rem; }
  .cat-btn { padding: 1.5rem 1rem; }
  .game-top { flex-wrap: wrap; }
}