/* ============================================================================
   main.css — How Well Do You Know SIT? (v5 — Ultra Edition)
   ----------------------------------------------------------------------------
   Enhanced design with deeper glassmorphism, 3D transforms, magnetic
   interactions, and richer motion while preserving the core Black/White/Red
   palette and all original assets.
   Section map:
     1. Tokens               7. Mascot
     2. Base / layout         8. Achievements + toasts
     3. Top nav               9. Results / rank / stats
     4. Cards / buttons      10. Review screen
     5. Progress             11. Background graphics
     6. Quiz question        12. Motion / accessibility
     13. Enhanced effects     14. 3D transforms
============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
------------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Manrope:wght@500;600;700;800&family=Baloo+2:wght@600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
  --bg:#050505;
  --surface:#0F0E0E;
  --surface2:#181717;
  --line:#2A2828;
  --text:#FAFAFA;
  --text-dim:#9C9997;

  --red:#D8232A;
  --red-bright:#F0353D;
  --red-soft: rgba(216,35,42,0.12);
  --red-glow: rgba(216,35,42,0.65);
  --white-soft: rgba(255,255,255,0.08);
  --white-glow: rgba(255,255,255,0.5);
  --glass-bg: rgba(15,14,14,0.85);
  --glass-border: rgba(255,255,255,0.06);

  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --nav-h:64px;
}

/* ---------------------------------------------------------------------------
   2. BASE / LAYOUT
------------------------------------------------------------------------ */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body{
  margin:0;
  background: var(--bg);
  color:var(--text);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding:22px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
button{ font-family:inherit; color:inherit; }
img{ max-width:100%; display:block; }

.stage{
  width:100%; max-width:580px; position:relative; z-index:1;
  margin-top:calc(var(--nav-h) + 22px + env(safe-area-inset-top, 0px));
  perspective:1200px;
}

.screen{
  display:none;
  animation:screenEnter .6s var(--ease-out);
}
.screen.active{ display:block; }
@keyframes screenEnter{
  from{ opacity:0; transform:translateY(20px) scale(0.97);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--red-bright); margin-bottom:16px;
}
.eyebrow::before{
  content:''; width:20px; height:2px; background:linear-gradient(90deg, var(--red-bright), transparent);
  border-radius:2px;
}

h1{
  font-family:'Archivo Black',Impact,'Arial Narrow Bold',sans-serif;
  font-weight:400; line-height:1.05; letter-spacing:-0.02em;
  font-size:clamp(28px, 5vw, 38px); margin:0 0 14px;
  color:var(--text);
  background:linear-gradient(135deg, var(--text) 0%, #fff 50%, var(--text-dim) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
h1 span{
  background:linear-gradient(135deg, var(--red-bright), #ff6b6b);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
h2{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:26px; margin:0 0 10px;
}
p.lead{
  color:var(--text-dim); font-size:16px; line-height:1.6;
  margin:0 0 24px;
}

/* ---------------------------------------------------------------------------
   3. TOP NAV — ultra glassmorphism with floating effect
------------------------------------------------------------------------ */
.top-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h); padding:0 18px; padding-top:env(safe-area-inset-top, 0px);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.7) 100%);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 8px 32px -8px rgba(0,0,0,0.5);
}
.top-nav::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(216,35,42,0.03), transparent);
  opacity:0; transition:opacity .4s;
}
.top-nav:hover::before{ opacity:1; }

.top-nav-brand{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.top-nav-logo{
  width:38px; height:38px; flex:none; background:#fff; padding:5px;
  display:flex; align-items:center; justify-content:center;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  box-shadow:
    0 0 0 1.5px var(--red-glow),
    0 4px 20px -4px var(--red-glow),
    0 0 40px -20px var(--red);
  animation:logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{ box-shadow:0 0 0 1.5px var(--red-glow), 0 4px 20px -4px var(--red-glow), 0 0 40px -20px var(--red); }
  50%{ box-shadow:0 0 0 2px var(--red-bright), 0 6px 24px -4px var(--red-glow), 0 0 50px -15px var(--red-bright); }
}
.top-nav-logo img{ width:100%; height:100%; object-fit:contain; }
.top-nav-name{ min-width:0; font-family:'Archivo Black',sans-serif; font-size:14px; letter-spacing:0.01em; color:var(--text); }
.top-nav-name small{
  display:block; font-family:'Manrope',sans-serif; font-size:10px;
  font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); margin-top:2px;
}

.top-nav-actions{ display:flex; gap:10px; }
.util-btn{
  background:var(--surface2); border:1px solid var(--line);
  color:var(--text-dim); font-family:'Manrope',sans-serif; font-size:11px; font-weight:700;
  padding:9px 12px; border-radius:100px; cursor:pointer;
  display:flex; align-items:center; gap:6px; letter-spacing:0.02em;
  transition:all .3s var(--ease-out);
  position:relative; overflow:hidden;
}
.util-btn::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.util-btn:hover::before{ opacity:1; }
.util-btn:hover{
  background:var(--surface);
  border-color:var(--red-bright);
  color:var(--text);
  transform:translateY(-2px);
  box-shadow:0 6px 20px -6px var(--red-glow);
}
.util-btn.confirming{
  background:var(--red-soft);
  color:#ffb3b3;
  border-color:var(--red);
  animation:confirmPulse 1s ease-in-out infinite;
}
@keyframes confirmPulse{
  0%,100%{ box-shadow:0 0 0 0 var(--red-glow); }
  50%{ box-shadow:0 0 0 4px var(--red-glow); }
}
.util-btn svg{ width:14px; height:14px; flex:none; }
.util-btn .lbl{ display:none; }
@media (min-width:400px){ .util-btn .lbl{ display:inline; } }

/* ---------------------------------------------------------------------------
   4. CARDS / BUTTONS — enhanced glassmorphism with 3D effects
------------------------------------------------------------------------ */
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:32px 26px;
  position:relative; overflow:hidden;
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 32px 64px -24px rgba(0,0,0,0.8),
    0 0 80px -40px rgba(216,35,42,0.15);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
@media (max-width:420px){ .card{ padding:24px 20px; } }

.card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 0%, rgba(216,35,42,0.08), transparent 60%);
  opacity:0; transition:opacity .4s;
  pointer-events:none;
}
.card:hover::before{ opacity:1; }

.card::after{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.02) 50%,
    transparent 70%
  );
  transform:rotate(0deg);
  opacity:0;
  transition:opacity .6s;
  pointer-events:none;
}
.card:hover::after{ opacity:1; animation:shimmer 8s linear infinite; }

@keyframes shimmer{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.btn{
  appearance:none; border:none; cursor:pointer; width:100%;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; letter-spacing:0.02em;
  padding:18px 22px; border-radius:16px; color:#fff;
  background:linear-gradient(135deg, var(--red-bright) 0%, var(--red) 50%, #b01a20 100%);
  box-shadow:
    0 0 0 1px rgba(216,35,42,0.5) inset,
    0 12px 32px -10px var(--red-glow),
    0 0 40px -20px rgba(216,35,42,0.4);
  transition:all .2s var(--ease-out);
  min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden;
}
.btn::before{
  content:''; position:absolute; top:50%; left:50%; width:0; height:0;
  background:radial-gradient(circle, rgba(255,255,255,0.3), transparent 70%);
  transform:translate(-50%, -50%);
  border-radius:50%;
  transition:width .6s, height .6s;
}
.btn:active::before{ width:300px; height:300px; }
.btn:hover{
  filter:brightness(1.12);
  box-shadow:0 16px 40px -12px var(--red-glow), 0 0 50px -25px rgba(216,35,42,0.5);
  transform:translateY(-2px);
}
.btn:active{
  transform:scale(0.97) translateY(0);
  box-shadow:0 6px 20px -8px var(--red-glow);
}
.btn.secondary{
  background:transparent;
  color:var(--text);
  border:1.5px solid var(--line);
  box-shadow:none;
  font-weight:700;
}
.btn.secondary:hover{
  border-color:var(--red-bright);
  color:var(--red-bright);
  background:var(--red-soft);
  filter:none;
  transform:translateY(-2px);
}
.btn:disabled{
  opacity:0.4; cursor:not-allowed;
  filter:none; transform:none;
  box-shadow:none;
}
button:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--red-bright);
  outline-offset:4px;
  border-radius:8px;
}

.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-row .btn{ flex:1; min-width:130px; }

.meta-row{ display:flex; gap:18px; margin-top:22px; flex-wrap:wrap; }
.meta-item{
  font-size:12px; color:var(--text-dim);
  display:flex; align-items:center; gap:8px; font-weight:600;
}
.meta-item .dot{
  width:7px; height:7px; border-radius:50%; background:var(--red-bright);
  box-shadow:0 0 10px var(--red-glow);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.7; transform:scale(1.1); }
}

/* ---------------------------------------------------------------------------
   5. PROGRESS — enhanced level dots and animated bulbs
------------------------------------------------------------------------ */
.level-dots{
  display:flex; gap:10px; justify-content:center; margin-bottom:18px;
}
.level-dot{
  width:38px; height:7px; border-radius:5px;
  background:var(--surface2); border:1px solid var(--line);
  transition:all .4s var(--ease-spring);
  position:relative; overflow:hidden;
}
.level-dot::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform:translateX(-100%);
}
.level-dot.done::before{ animation:dotShine 1s ease-out; }
@keyframes dotShine{ to{ transform:translateX(100%); } }

.level-dot.done{
  background:#fff; border-color:#fff;
  box-shadow:0 0 20px var(--white-glow);
}
.level-dot.active{
  background:linear-gradient(90deg, var(--red), var(--red-bright));
  border-color:var(--red-bright);
  box-shadow:0 0 20px var(--red-glow), 0 0 40px -10px var(--red-glow);
}

.bulb-strip{
  display:flex; gap:7px; margin-bottom:20px; flex-wrap:wrap;
}
.bulb{
  flex:1; min-width:16px; height:9px; border-radius:6px;
  background:var(--surface2); border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:all .3s var(--ease-spring);
}
.bulb.correct{
  background:linear-gradient(90deg, #fff, #f5f5f5);
  border-color:#fff;
  box-shadow:0 0 12px var(--white-glow), 0 0 24px -8px rgba(255,255,255,0.3);
  animation:bulbCorrect .5s var(--ease-spring);
}
@keyframes bulbCorrect{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.2); }
  100%{ transform:scale(1); }
}
.bulb.wrong{
  background:linear-gradient(90deg, #a01a20, var(--red));
  border-color:var(--red-bright);
  box-shadow:0 0 12px var(--red-glow), 0 0 24px -8px rgba(216,35,42,0.3);
  animation:bulbWrong .4s var(--ease-out);
}
@keyframes bulbWrong{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  75%{ transform:translateX(3px); }
}
.bulb.current::after{
  content:''; position:absolute; inset:0;
  background:var(--text-dim); opacity:.4;
  animation:bulbPulse 1.5s ease-in-out infinite;
}
@keyframes bulbPulse{
  0%,100%{ opacity:.3; }
  50%{ opacity:.5; }
}

.timer-track{
  height:6px; border-radius:7px; background:var(--surface2);
  overflow:hidden; margin-bottom:18px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.3);
}
.timer-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg, #4ade80, #facc15, var(--red));
  transform-origin:left;
  transform:scaleX(1);
  position:relative;
}
.timer-fill::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:20px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
  animation:timerGlow 1s linear infinite;
}
@keyframes timerGlow{
  from{ opacity:0.5; }
  50%{ opacity:1; }
  to{ opacity:0.5; }
}

/* ---------------------------------------------------------------------------
   6. QUIZ QUESTION — enhanced options with flash effects
------------------------------------------------------------------------ */
.level-tag{
  font-size:11px; font-weight:800; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--red-bright);
}
.q-text{
  font-size:21px; font-weight:800; line-height:1.3;
  margin:0 0 20px; font-family:'Archivo Black',sans-serif; font-weight:400;
}

.options{ display:grid; grid-template-columns:1fr; gap:11px; }
.opt{
  background:var(--surface2); border:1.5px solid var(--line); border-radius:15px;
  padding:16px 18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px;
  color:var(--text); text-align:left; cursor:pointer; line-height:1.4; min-height:56px;
  display:flex; align-items:center; transition:all .2s var(--ease-out); width:100%;
  position:relative; overflow:hidden;
}
.opt::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(216,35,42,0.1), transparent 50%);
  opacity:0; transition:opacity .3s;
}
.opt:hover:not(.disabled)::before{ opacity:1; }
.opt:hover:not(.disabled){
  border-color:var(--red-bright);
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 8px 24px -8px rgba(216,35,42,0.2);
}
.opt:active{ transform:scale(0.98); }
.opt.pick-correct{
  background:linear-gradient(135deg, var(--white-soft), rgba(255,255,255,0.15));
  border-color:#fff; color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,0.3), 0 0 30px -10px rgba(255,255,255,0.4);
  animation:optionFlash .5s var(--ease-out);
}
.opt.pick-wrong{
  background:var(--red-soft); border-color:var(--red-bright); color:#ff9b9b;
  box-shadow:0 0 0 2px rgba(216,35,42,0.3), 0 0 30px -10px var(--red-glow);
  animation:optionShake .4s var(--ease-out);
}
@keyframes optionFlash{
  0%{ background:var(--white-soft); }
  50%{ background:rgba(255,255,255,0.4); }
  100%{ background:linear-gradient(135deg, var(--white-soft), rgba(255,255,255,0.15)); }
}
@keyframes optionShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  40%{ transform:translateX(5px); }
  60%{ transform:translateX(-3px); }
  80%{ transform:translateX(3px); }
}
.opt.disabled{ pointer-events:none; opacity:0.5; }
.opt.disabled.pick-correct, .opt.disabled.pick-wrong{ opacity:1; }

.explain-card{
  margin-top:16px; font-size:14px; color:var(--text-dim);
  background:var(--surface2);
  border:1px solid var(--line); border-radius:14px; padding:16px; line-height:1.6;
  display:none; gap:12px;
  animation:explainRise .4s var(--ease-out);
}
@keyframes explainRise{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:translateY(0); }
}
.explain-card.show{ display:flex; }
.explain-card b{ color:var(--text); }
.explain-card .verdict{ font-weight:800; flex:none; font-size:18px; }
.explain-card.is-correct{
  border-color:rgba(255,255,255,0.2);
  background:linear-gradient(135deg, rgba(255,255,255,0.05), var(--surface2));
}
.explain-card.is-wrong{
  border-color:var(--red);
  background:linear-gradient(135deg, var(--red-soft), var(--surface2));
}
.explain-card.is-correct .verdict{ color:#fff; }
.explain-card.is-wrong .verdict{ color:var(--red-bright); }

/* stat strip (score / streak / progress) shown during the quiz */
.stat-strip{ display:flex; gap:11px; margin-bottom:16px; }
.stat-chip{
  flex:1; background:var(--surface2); border:1px solid var(--line);
  border-radius:13px; padding:10px 12px; text-align:center;
  transition:all .3s var(--ease-out);
}
.stat-chip .val{
  font-family:'Archivo Black',sans-serif; font-size:18px;
  color:var(--red-bright);
  transition:all .3s var(--ease-out);
}
.stat-chip .lbl{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text-dim);
}
.stat-chip.streak-hot{
  border-color:var(--red);
  background:linear-gradient(135deg, var(--red-soft), var(--surface2));
  animation:streakPulse 1s ease-in-out infinite;
}
@keyframes streakPulse{
  0%,100%{ box-shadow:0 0 0 0 var(--red-glow); }
  50%{ box-shadow:0 0 0 3px var(--red-glow), 0 0 20px -5px var(--red-glow); }
}
.stat-chip.streak-hot .val{
  color:#fff;
  text-shadow:0 0 15px var(--red-glow), 0 0 30px -10px var(--red);
}

.bonus-toast{
  position:fixed; top:calc(var(--nav-h) + 14px); left:50%;
  transform:translateX(-50%) translateY(-20px); z-index:80;
  background:linear-gradient(135deg, var(--surface2), var(--surface));
  border:1.5px solid var(--red-bright); color:#fff; font-weight:800;
  font-size:14px; padding:10px 18px; border-radius:100px;
  opacity:0; pointer-events:none; transition:all .4s var(--ease-spring);
  white-space:nowrap;
  box-shadow:0 0 0 1px var(--red-glow), 0 12px 32px -8px var(--red-glow), 0 0 50px -20px var(--red-glow);
}
.bonus-toast.show{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------------------
   7. MASCOT
------------------------------------------------------------------------ */
.mascot-row{
  display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;
}
.mascot-img{
  width:72px; height:auto; flex:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.7));
  transition:transform .3s var(--ease-spring);
}
.mascot-img:hover{
  transform:scale(1.05) rotate(-3deg);
}
.mascot-bubble{
  background:var(--surface2); border:1px solid var(--line);
  border-radius:16px 16px 16px 6px;
  padding:12px 16px; font-size:14px; font-weight:600;
  color:var(--text); line-height:1.45; position:relative;
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.4);
}
.mascot-bubble::before{
  content:''; position:absolute; bottom:8px; left:-8px;
  width:0; height:0;
  border:8px solid transparent;
  border-right-color:var(--line);
}
.mascot-lg{
  width:140px; margin:0 auto; display:block;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,0.7));
  transition:transform .3s var(--ease-spring);
}
.mascot-lg:hover{
  transform:scale(1.03) rotate(2deg);
}
.mascot-fallback{
  width:72px; height:72px; border-radius:18px; flex:none;
  background:var(--surface2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:28px;
}
.mascot-bounce{
  animation:mascotBounce 2s ease-in-out infinite;
}
@keyframes mascotBounce{
  0%,100%{ transform:translateY(0) rotate(0deg);}
  50%{ transform:translateY(-8px) rotate(-3deg);}
}
.mascot-wiggle{
  animation:mascotWiggle .6s var(--ease-spring);
}
@keyframes mascotWiggle{
  0%,100%{ transform:rotate(0);}
  25%{ transform:rotate(-8deg);}
  75%{ transform:rotate(8deg);}
}
.mascot-enter{
  animation:mascotEnter .7s var(--ease-out);
}
@keyframes mascotEnter{
  0%{ opacity:0; transform:translateY(20px) scale(0.8);}
  100%{ opacity:1; transform:translateY(0) scale(1);}
}

/* ---------------------------------------------------------------------------
   8. ACHIEVEMENTS + TOASTS — more elaborate animations
------------------------------------------------------------------------ */
.achievement-toast{
  position:fixed; top:calc(var(--nav-h) + 14px); left:50%;
  transform:translateX(-50%) translateY(-30px) scale(0.9); z-index:85;
  background:linear-gradient(135deg, var(--surface2), var(--surface));
  border:1.5px solid var(--red-bright);
  border-radius:18px; padding:16px 20px; display:flex; align-items:center; gap:14px;
  opacity:0; pointer-events:none; transition:all .5s var(--ease-spring);
  box-shadow:0 0 0 1px var(--red-glow), 0 20px 40px -15px rgba(0,0,0,.9), 0 0 60px -20px var(--red-glow);
  min-width:260px;
}
.achievement-toast.show{
  opacity:1; transform:translateX(-50%) translateY(0) scale(1);
}
.achievement-toast::before{
  content:''; position:absolute; inset:-2px;
  background:linear-gradient(45deg, var(--red), transparent, var(--red-bright), transparent, var(--red));
  border-radius:20px;
  z-index:-1;
  opacity:0.6;
  animation:borderRotate 3s linear infinite;
}
@keyframes borderRotate{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.achievement-toast .icon{
  font-size:32px; flex:none;
  animation:iconBounce 1s var(--ease-spring);
}
@keyframes iconBounce{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.15) rotate(-5deg); }
}
.achievement-toast .name{
  font-family:'Archivo Black',sans-serif; font-size:15px;
  color:var(--red-bright);
}
.achievement-toast .desc{
  font-size:12px; color:var(--text-dim);
}

.achievement-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:18px 0;
}
.achievement-card{
  background:var(--surface2); border:1px solid var(--line);
  border-radius:14px; padding:14px; text-align:center;
  opacity:0.35; filter:grayscale(1);
  transition:all .4s var(--ease-spring);
  position:relative; overflow:hidden;
}
.achievement-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center, var(--red-soft), transparent 70%);
  opacity:0; transition:opacity .4s;
}
.achievement-card.earned{
  opacity:1; filter:none;
  border-color:var(--red-bright);
  background:linear-gradient(135deg, var(--red-soft), var(--surface2));
  box-shadow:0 0 0 1px var(--red-glow), 0 0 30px -10px var(--red-glow);
  animation:achievementUnlock .6s var(--ease-spring);
}
@keyframes achievementUnlock{
  0%{ transform:scale(0.9); }
  50%{ transform:scale(1.05); }
  100%{ transform:scale(1); }
}
.achievement-card.earned::before{ opacity:1; }
.achievement-card .icon{ font-size:26px; margin-bottom:6px; }
.achievement-card .name{
  font-size:11px; font-weight:800; color:var(--text);
}

/* ---------------------------------------------------------------------------
   9. RESULTS / RANK / STATS — enhanced reveal animations
------------------------------------------------------------------------ */
.rank-medal{
  font-size:72px; text-align:center; line-height:1; margin-bottom:8px;
  animation:rankReveal 1s var(--ease-spring);
}
@keyframes rankReveal{
  0%{ opacity:0; transform:scale(0) rotate(-180deg); }
  60%{ transform:scale(1.1) rotate(10deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.rank-name{
  text-align:center; font-family:'Archivo Black',sans-serif;
  font-size:28px; color:#fff; margin:0 0 10px;
  text-shadow:0 0 40px var(--red-glow), 0 0 80px -40px var(--red);
  animation:rankFadeIn 1s var(--ease-out) 0.3s both;
}
@keyframes rankFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.rank-desc{
  text-align:center; color:var(--text-dim); font-size:15px;
  line-height:1.6; margin:0 0:24px;
}

.score-hero{
  text-align:center; margin:8px 0 20px;
}
.score-hero .big{
  font-family:'Archivo Black',sans-serif; font-size:clamp(42px, 8vw, 58px);
  color:var(--text); line-height:1;
  background:linear-gradient(180deg, #fff 0%, var(--text-dim) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.score-hero .of{
  font-size:15px; color:var(--text-dim); font-weight:700;
}

.stats-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:20px;
}
.stats-grid .stat{
  background:var(--surface2); border:1px solid var(--line);
  border-radius:14px; padding:14px; text-align:center;
  transition:transform .3s var(--ease-out);
}
.stats-grid .stat:hover{
  transform:translateY(-3px);
  border-color:var(--red);
}
.stats-grid .stat .val{
  font-family:'Archivo Black',sans-serif; font-size:22px;
  color:var(--red-bright);
}
.stats-grid .stat .lbl{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text-dim); margin-top:3px;
}

.encourage{
  text-align:center; font-size:15px; color:var(--text);
  font-weight:700; margin:6px 0 24px; line-height:1.55;
}

.qr-wrap{
  background:#fff; border-radius:18px; padding:14px;
  width:140px; height:140px; margin:18px auto 8px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px rgba(255,255,255,0.1), 0 20px 40px -15px rgba(0,0,0,0.5);
  transition:transform .3s var(--ease-spring);
}
.qr-wrap:hover{
  transform:scale(1.05) rotate(2deg);
}
.qr-wrap img{ width:100%; height:100%; object-fit:contain; }
.tagline{
  font-family:'Archivo Black',sans-serif; letter-spacing:0.08em;
  font-size:13px; color:var(--red-bright); text-align:center;
  margin:18px 0 6px;
}
.cta-sub{
  text-align:center; font-size:13px; color:var(--text-dim); margin:0 0:20px;
}

/* ---------------------------------------------------------------------------
   10. REVIEW SCREEN
------------------------------------------------------------------------ */
.review-item{
  border:1px solid var(--line); border-radius:15px;
  padding:16px; margin-bottom:11px; background:var(--surface2);
  transition:all .3s var(--ease-out);
}
.review-item:hover{
  border-color:var(--line);
  transform:translateX(3px);
}
.review-item.correct{
  border-color:rgba(255,255,255,0.2);
  background:linear-gradient(135deg, rgba(255,255,255,0.03), var(--surface2));
}
.review-item.wrong{
  border-color:rgba(216,35,42,0.3);
  background:linear-gradient(135deg, var(--red-soft), var(--surface2));
}
.review-item .rq{
  font-size:14px; font-weight:800; margin:0 0 10px; line-height:1.45;
}
.review-item .ra{
  font-size:13px; line-height:1.55; display:flex; gap:7px;
  align-items:flex-start; margin-bottom:5px;
}
.review-item .ra .tag{ flex:none; font-weight:800; }
.review-item .ra.correct .tag{ color:#fff; }
.review-item .ra.wrong .tag{ color:var(--red-bright); }
.review-item .ra .val{ color:var(--text-dim); }
.review-filter{
  display:flex; gap:9px; margin-bottom:16px; flex-wrap:wrap;
}
.review-filter button{
  background:var(--surface2); border:1px solid var(--line);
  color:var(--text-dim); font-weight:700; font-size:12px;
  padding:8px 14px; border-radius:100px; cursor:pointer;
  transition:all .3s var(--ease-out);
}
.review-filter button:hover{
  border-color:var(--red);
  color:var(--text);
}
.review-filter button.active{
  background:var(--red-soft); border-color:var(--red-bright);
  color:var(--red-bright);
  box-shadow:0 0 0 1px var(--red-glow);
}

/* ---------------------------------------------------------------------------
   PASSPORT SHARE CARD
------------------------------------------------------------------------ */
.field-label{
  display:block; font-size:12px; font-weight:800;
  color:var(--text-dim); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:0.06em; text-align:center;
}
.text-input{
  width:100%; background:var(--surface2); border:1.5px solid var(--line);
  border-radius:15px;
  padding:15px 18px; font-size:16px; color:var(--text); font-weight:700;
  min-height:52px;
  text-align:center; margin-bottom:20px;
  transition:border-color .3s;
}
.text-input:focus{
  border-color:var(--red-bright);
  outline:none;
  box-shadow:0 0 0 3px var(--red-soft);
}

.passport-frame{
  perspective:1200px; opacity:0; transform:translateY(32px) scale(0.94);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.passport-frame.reveal{ opacity:1; transform:translateY(0) scale(1); }
.passport-preview{
  border-radius:var(--radius-md); overflow:hidden;
  border:1.5px solid var(--line);
  aspect-ratio:9/16; max-width:300px; margin:0 auto;
  background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 0 0 1px var(--red-glow),
    0 40px 70px -25px rgba(216,35,42,0.4),
    0 30px 60px -25px rgba(0,0,0,0.8);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.passport-frame.reveal .passport-preview:hover{
  transform:rotateY(-8deg) rotateX(4deg) scale(1.02);
  box-shadow:
    0 0 0 1px var(--red-glow),
    0 50px 80px -20px rgba(216,35,42,0.5),
    0 35px 65px -20px rgba(0,0,0,0.85);
}
.passport-preview img{ width:100%; height:100%; object-fit:cover; }
.passport-preview .loading-text{
  font-size:13px; color:var(--text-dim); text-align:center; padding:16px;
}

.field-error{
  font-size:13px; color:var(--red-bright); font-weight:700;
  margin:12px 0 0; min-height:18px; text-align:center;
}

/* ---------------------------------------------------------------------------
   MISC
------------------------------------------------------------------------ */
.trait-preview-card{
  background:var(--surface2); border:1px solid var(--line);
  border-radius:13px; padding:12px 14px;
  transition:all .3s var(--ease-out);
}
.trait-preview-card:hover{
  border-color:var(--red-bright);
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(216,35,42,0.2);
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------------------
   11. BACKGROUND GRAPHICS — ultra-enhanced with floating 3D shapes
------------------------------------------------------------------------ */
.bg-graphics{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; background:var(--bg);
}

/* Layer 1: Deep mesh gradients */
.bg-mesh{
  position:absolute; inset:-15%; opacity:0.85;
  animation:meshDrift 24s ease-in-out infinite;
}
.bg-mesh.m1{
  background:radial-gradient(circle at 15% 10%, rgba(216,35,42,0.22), transparent 45%);
}
.bg-mesh.m2{
  background:radial-gradient(circle at 88% 85%, rgba(216,35,42,0.16), transparent 50%);
  animation-delay:-10s; animation-duration:28s;
}
.bg-mesh.m3{
  background:radial-gradient(circle at 95% 12%, rgba(255,255,255,0.05), transparent 40%);
  animation-delay:-16s; animation-duration:21s;
}
.bg-mesh.m4{
  background:radial-gradient(circle at 6% 90%, rgba(216,35,42,0.10), transparent 42%);
  animation-delay:-6s; animation-duration:26s;
}
.bg-mesh.m5{
  background:radial-gradient(circle at 50% 50%, rgba(216,35,42,0.08), transparent 60%);
  animation:meshPulse 8s ease-in-out infinite;
}
@keyframes meshDrift{
  0%,100%{ transform:translate(0,0) scale(1) rotate(0deg);}
  50%{ transform:translate(-3%,4%) scale(1.08) rotate(2deg);}
}
@keyframes meshPulse{
  0%,100%{ opacity:0.5; transform:scale(1); }
  50%{ opacity:0.8; transform:scale(1.1); }
}

/* Layer 2: Enhanced grid with glow */
.bg-grid{
  position:absolute; inset:0; opacity:0.04;
  background-image:
    repeating-linear-gradient(45deg, #ffffff 0, #ffffff 1px, transparent 1px, transparent 72px),
    repeating-linear-gradient(-45deg, #D8232A 0, #D8232A 1px, transparent 1px, transparent 72px);
  animation:gridScroll 60s linear infinite;
}
@keyframes gridScroll{
  from{ transform:translateY(0); }
  to{ transform:translateY(-72px); }
}

/* Layer 3: Floating 3D geometric shapes */
.bg-shapes{ position:absolute; inset:0; }
.bg-shape{
  position:absolute; opacity:0.15;
  animation:shapeFloat 20s ease-in-out infinite;
}
.bg-shape.s1{
  width:120px; height:120px; top:10%; right:8%;
  background:linear-gradient(135deg, rgba(216,35,42,0.3), transparent);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation-delay:-2s;
}
.bg-shape.s2{
  width:80px; height:80px; bottom:15%; left:12%;
  border:2px solid rgba(216,35,42,0.4);
  border-radius:50%;
  animation-delay:-5s; animation-duration:25s;
}
.bg-shape.s3{
  width:60px; height:60px; top:40%; left:60%;
  background:rgba(255,255,255,0.05);
  transform:rotate(45deg);
  animation-delay:-8s; animation-duration:18s;
}
.bg-shape.s4{
  width:100px; height:100px; top:60%; right:15%;
  border:1px solid rgba(255,255,255,0.08);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation-delay:-12s; animation-duration:22s;
}
@keyframes shapeFloat{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  25%{ transform:translate(10px, -20px) rotate(5deg); }
  50%{ transform:translate(-5px, -10px) rotate(-3deg); }
  75%{ transform:translate(15px, 5px) rotate(2deg); }
}

/* Layer 4: Enhanced hexagon patterns */
.bg-graphics svg{ position:absolute; opacity:0.4; }
.bg-hex-1{
  top:-40px; right:-70px; width:280px; height:280px;
  animation:hexSpin 70s linear infinite;
}
.bg-hex-2{
  bottom:8%; left:-80px; width:220px; height:220px;
  animation:hexSpin 90s linear infinite reverse;
}
.bg-hex-3{
  top:45%; left:52%; width:150px; height:150px; opacity:0.18;
  animation:hexSpin 110s linear infinite;
}
@keyframes hexSpin{
  from{ transform:rotate(0deg);}
  to{ transform:rotate(360deg);}
}

/* Layer 5: Light beams with glow */
.bg-beam{
  position:absolute; width:2px; height:180%; top:-40%;
  background:linear-gradient(180deg, transparent, rgba(216,35,42,0.4), transparent);
  transform:rotate(18deg); animation:beamDrift 16s ease-in-out infinite;
}
.bg-beam.b2{
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
  animation-duration:20s; animation-delay:-6s;
}
@keyframes beamDrift{
  0%,100%{ opacity:0.4; transform:rotate(18deg) translateY(0);}
  50%{ opacity:1; transform:rotate(22deg) translateY(20px);}
}

/* Layer 6: Floating particles with trails */
.bg-dot{
  position:absolute; border-radius:50%;
  background:#fff; opacity:0.12;
  animation:floatDot 10s ease-in-out infinite;
}
.bg-dot.r{
  background:var(--red-bright); opacity:0.18;
}
@keyframes floatDot{
  0%,100%{ transform:translateY(0) scale(1); opacity:0.12;}
  50%{ transform:translateY(-24px) scale(1.1); opacity:0.2;}
}

/* Layer 7: Skyline silhouette */
.bg-skyline{
  position:absolute; left:0; right:0; bottom:0; height:100px; opacity:0.3;
}
.bg-skyline rect{ fill:rgba(255,255,255,0.03); }

/* Layer 8: Pulse rings on events */
.bg-pulse-ring{
  position:absolute; top:50%; left:50%;
  width:100px; height:100px;
  border:1px solid rgba(216,35,42,0.3);
  border-radius:50%;
  transform:translate(-50%, -50%) scale(0);
  opacity:0;
  animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{
  0%{ transform:translate(-50%, -50%) scale(0); opacity:0.5; }
  100%{ transform:translate(-50%, -50%) scale(4); opacity:0; }
}

/* ---------------------------------------------------------------------------
   12. MOTION / ACCESSIBILITY / RESPONSIVE
------------------------------------------------------------------------ */
.confetti-layer{
  position:fixed; inset:0; pointer-events:none; z-index:90;
}

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

@media (max-width:420px){
  h1{ font-size:26px; }
  .q-text{ font-size:18px; }
  .opt{ font-size:14px; padding:14px 15px; }
  .rank-medal{ font-size:56px; }
  .score-hero .big{ font-size:40px; }
  .top-nav-name{ max-width:140px; }
  .card{ padding:20px 16px; }
}

/* ---------------------------------------------------------------------------
   13. ENHANCED EFFECTS — magnetic buttons, ripples, glows
------------------------------------------------------------------------ */

/* Screen flash effect */
.screen-flash{
  position:fixed; inset:0; z-index:95; pointer-events:none;
  background:radial-gradient(circle at center, rgba(216,35,42,0.3), transparent 70%);
  opacity:0; animation:flashFade .3s ease-out;
}
@keyframes flashFade{
  0%{ opacity:1; }
  100%{ opacity:0; }
}

/* Card tilt effect */
.card-tilt{
  transform-style:preserve-3d;
  transition:transform .1s ease-out;
}

/* Glow pulse for active elements */
.glow-pulse{
  animation:glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ box-shadow:0 0 20px var(--red-glow); }
  50%{ box-shadow:0 0 40px var(--red-glow), 0 0 60px -20px var(--red); }
}

/* Text gradient shimmer */
.text-shimmer{
  background:linear-gradient(90deg, var(--text) 0%, #fff 50%, var(--text) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:textShimmer 3s linear infinite;
}
@keyframes textShimmer{
  from{ background-position:0% center; }
  to{ background-position:200% center; }
}

/* Progress bar glow */
.progress-glow{
  position:relative;
}
.progress-glow::after{
  content:''; position:absolute; right:0; top:0; bottom:0;
  width:8px; background:var(--red-bright);
  border-radius:4px;
  filter:blur(4px);
  animation:progressGlow 1.5s ease-in-out infinite;
}
@keyframes progressGlow{
  0%,100%{ opacity:0.5; transform:scaleX(1); }
  50%{ opacity:1; transform:scaleX(1.5); }
}

/* Border shimmer effect */
.border-shimmer{
  position:relative;
  overflow:hidden;
}
.border-shimmer::before{
  content:''; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:conic-gradient(from 0deg, transparent, rgba(216,35,42,0.3), transparent, rgba(255,255,255,0.1), transparent);
  animation:borderSpin 4s linear infinite;
}
@keyframes borderSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* Card fade in animation */
@keyframes cardFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Ripple animation */
@keyframes ripple{
  from{ width:0; height:0; opacity:0.5; }
  to{ width:100px; height:100px; opacity:0; }
}