/* ===== QUIZ ===== */
#quiz{
  position:relative;z-index:1;
  background:linear-gradient(180deg,#0a0030,#130050 50%,#0a0030);
  padding:70px 16px;
}
#quiz::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FFE01A,#FF4DA6,#9B30FF,#00D068,#FFE01A);}
.quiz-container{max-width:680px;margin:30px auto 0;}

/* Progress bar */
.quiz-progress{display:flex;gap:6px;justify-content:center;margin-bottom:24px;}
.qpip{
  width:28px;height:6px;border-radius:3px;
  background:rgba(255,255,255,.15);transition:background .4s;
}
.qpip.done{background:var(--kids-purple);}
.qpip.active{background:var(--kids-yellow);}

/* Question card */
.quiz-card{
  background:rgba(0,0,0,.4);
  border:2px solid rgba(155,48,255,.3);
  border-radius:24px;padding:28px 24px;
  text-align:center;
  transition:opacity .3s,transform .3s;
}
.quiz-card.fade-out{opacity:0;transform:translateY(-20px);}
.quiz-q-num{
  font-family:'Oswald',sans-serif;font-size:.75rem;letter-spacing:4px;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px;
}
.quiz-q-emoji{font-size:clamp(2.5rem,8vw,4rem);margin-bottom:10px;display:block;}
.quiz-q-text{
  font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:clamp(1.4rem,5vw,2.2rem);
  letter-spacing:2px;color:#fff;line-height:1.2;margin-bottom:24px;
}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){.quiz-options{grid-template-columns:1fr;}}
.quiz-opt{
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.12);
  border-radius:16px;padding:14px 16px;
  font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:700;
  color:rgba(255,255,255,.85);cursor:pointer;
  transition:all .2s;text-align:left;
  display:flex;align-items:center;gap:10px;
}
.quiz-opt:hover{
  background:rgba(155,48,255,.15);border-color:var(--kids-purple);
  color:#fff;transform:translateY(-3px);
}
.quiz-opt.selected-hero{
  background:rgba(0,208,104,.15);border-color:var(--kids-green);color:#fff;
  animation:bounceIn .3s ease forwards;
}
.quiz-opt.selected-villain{
  background:rgba(255,60,60,.15);border-color:#FF4444;color:#fff;
  animation:bounceIn .3s ease forwards;
}
.quiz-opt-emoji{font-size:1.5rem;flex-shrink:0;}

/* RESULT */
.quiz-result{
  background:rgba(0,0,0,.5);border-radius:24px;
  padding:32px 24px;text-align:center;
  border:2px solid rgba(255,255,255,.1);
  animation:bounceIn .6s ease forwards;
}
.result-char{font-size:clamp(4rem,15vw,8rem);margin-bottom:10px;display:block;animation:float 2s ease-in-out infinite;}
.result-badge{
  display:inline-block;font-family:'Bangers',Impact,'Arial Black',sans-serif;
  font-size:clamp(1rem,4vw,1.4rem);letter-spacing:3px;
  padding:8px 24px;border-radius:30px;margin-bottom:14px;
}
.result-hero .result-badge{background:linear-gradient(135deg,#00D068,#1A6BFF);color:#fff;box-shadow:0 0 20px rgba(0,208,104,.4);}
.result-villain .result-badge{background:linear-gradient(135deg,#FF4444,#9B00FF);color:#fff;box-shadow:0 0 20px rgba(255,68,68,.4);}
.result-h{
  font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:clamp(1.8rem,6vw,3rem);
  letter-spacing:2px;color:#fff;margin-bottom:8px;
}
.result-desc{color:rgba(255,255,255,.7);line-height:1.7;font-size:.95rem;max-width:460px;margin:0 auto 20px;}
.result-tip{
  background:rgba(255,255,255,.05);border-radius:14px;
  padding:14px 18px;margin:16px 0;
  border-left:3px solid var(--kids-yellow);
  font-size:.88rem;color:rgba(255,255,255,.75);
  text-align:left;line-height:1.6;
}
.result-tip strong{color:var(--kids-yellow);display:block;margin-bottom:4px;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;}
.quiz-restart-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:10px;
  font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:1.2rem;letter-spacing:2px;
  padding:12px 28px;border-radius:50px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#FF4DA6,#9B30FF);color:#fff;
  box-shadow:0 6px 22px rgba(155,48,255,.4);transition:all .3s;
}
.quiz-restart-btn:hover{transform:translateY(-4px) scale(1.04);}
.score-track{
  display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap;
}
.score-hero,.score-villain{
  font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:1.1rem;letter-spacing:2px;
  padding:6px 16px;border-radius:20px;
}
.score-hero{background:rgba(0,208,104,.15);color:#00D068;border:1px solid rgba(0,208,104,.3);}
.score-villain{background:rgba(255,68,68,.15);color:#FF8080;border:1px solid rgba(255,68,68,.3);}


/* Auto-extracted inline styles */
.quiz-badge-yellow {
    background:rgba(255,224,26,.08);
    color:var(--kids-yellow);
    border:1px solid rgba(255,224,26,.25);
}

.quiz-title-large {
    font-size:clamp(2rem,6vw,3.5rem);
}

.quiz-center {
    text-align:center;
}

.quiz-icon-giant {
    font-size:clamp(3rem,10vw,5rem);
}

.mt-12 {
    margin-top:12px;
}

.quiz-subtitle-text {
    color:rgba(255,255,255,.5);
    font-size:.92rem;
    max-width:380px;
    margin:0 auto 22px;
    line-height:1.6;
}

.display-none {
    display:none;
}