/* ── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dark Theme (default) ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-1:         #0a0812;
  --bg-2:         #110e1f;
  --bg-3:         #1c1635;
  --surface:      rgba(28, 22, 53, 0.75);
  --surface-b:    rgba(124, 58, 237, 0.25);
  --text-1:       #ede9fe;
  --text-2:       #a78bfa;
  --text-3:       #6d5a9e;
  --accent:       #7c3aed;
  --accent-light: #a78bfa;
  --accent-glow:  rgba(124, 58, 237, 0.45);
  --accent2:      #ec4899;
  --shadow:       0 24px 64px rgba(0,0,0,0.55);
  --input-bg:     rgba(10, 8, 18, 0.55);
  --input-b:      rgba(124, 58, 237, 0.3);
  --btn-text:     #ffffff;
  --overlay-bg:   rgba(10, 8, 18, 0.92);
}

/* ── Light Theme ────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-1:         #f0ebff;
  --bg-2:         #e4d9ff;
  --bg-3:         #ffffff;
  --surface:      rgba(255, 255, 255, 0.82);
  --surface-b:    rgba(109, 40, 217, 0.18);
  --text-1:       #1e1b4b;
  --text-2:       #5b21b6;
  --text-3:       #8b5cf6;
  --accent:       #6d28d9;
  --accent-light: #8b5cf6;
  --accent-glow:  rgba(109, 40, 217, 0.35);
  --accent2:      #db2777;
  --shadow:       0 24px 64px rgba(109, 40, 217, 0.15);
  --input-bg:     rgba(237, 233, 254, 0.6);
  --input-b:      rgba(109, 40, 217, 0.25);
  --btn-text:     #ffffff;
  --overlay-bg:   rgba(240, 235, 255, 0.94);
}

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg-1);
  color: var(--text-1);
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-14px) scale(1.04); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { transform: scale(0.7); opacity: 0; }
  65%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes scoreFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.4); }
}

/* ── Theme Toggle ───────────────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-b);
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow);
  outline: none;
}
.theme-toggle:hover {
  transform: scale(1.12) rotate(20deg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow);
}

/* ── Kbd ────────────────────────────────────────────────────────────────── */
kbd {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--surface-b);
  font-size: 11px;
  font-family: var(--font);
  color: var(--text-2);
  font-weight: 600;
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }