/* ═══════════════════════════════════════
   base.css — Reset · Variables · Keyframes · Body · Stars
═══════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --primary:   #5B21B6;
  --primary-l: #7C3AED;
  --primary-ll:#A78BFA;
  --accent:    #F59E0B;
  --accent-l:  #FCD34D;
  --ok:        #059669;
  --ok-l:      #34D399;
  --err:       #DC2626;
  --err-l:     #F87171;
  --speed:     #EF4444;
  --speed-l:   #FCA5A5;
  --border:    rgba(255,255,255,.12);
  --shadow:    0 8px 32px rgba(0,0,0,.35);
  --r:         20px;
  --r-sm:      12px;
}

html { height: 100%; }

body {
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(150deg, #0F0C29 0%, #302B63 55%, #1E0A3C 100%);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── SCREENS ── */
.screen {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.screen.active { display: flex; }

/* ── STARS BACKGROUND ── */
#stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--d, 3s) ease-in-out infinite var(--delay, 0s);
  opacity: .5;
}

/* ═══════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════ */
@keyframes twinkle {
  0%,100% { opacity:.15; transform:scale(1); }
  50%     { opacity:.9;  transform:scale(1.4); }
}

@keyframes bounce-in {
  0%  { transform:scale(.2);   opacity:0; }
  60% { transform:scale(1.08); }
  80% { transform:scale(.95);  }
  100%{ transform:scale(1);    opacity:1; }
}

@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-9px); }
  40%,80% { transform:translateX(9px); }
}

@keyframes float-up {
  0%  { transform:translateY(0)    translateX(-50%); opacity:1; }
  100%{ transform:translateY(-60px) translateX(-50%); opacity:0; }
}

@keyframes slide-up {
  from { transform:translateY(24px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}

@keyframes fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}

@keyframes logo-float {
  0%,100% { transform:translateY(0)    rotate(-6deg); }
  50%     { transform:translateY(-14px) rotate(6deg); }
}

@keyframes pulse-dot {
  0%,100% { opacity:1; }
  50%     { opacity:.4; }
}

@keyframes timer-pulse {
  0%,100% { opacity:1; }
  50%     { opacity:.6; }
}

/* ── RESPONSIVE ── */
@media (max-width:360px) {
  .q-text   { font-size:42px; }
  .ans-btn  { font-size:26px; padding:15px 8px; }
  .avatar-grid { grid-template-columns:repeat(5,1fr); }
  .grade-grid  { grid-template-columns:repeat(2,1fr); }
}