/* ===========================================================
   Hidden in H2O — Quiz
   =========================================================== */

.quiz-body{
  background:linear-gradient(180deg,#EAF6FF 0%, var(--beige) 60%);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

.quiz-field{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.q-bubble{
  position:absolute;
  bottom:-60px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(59,167,245,0.15) 70%);
  border:1px solid rgba(255,255,255,0.5);
  animation:qrise linear infinite;
}
.q-particle{
  position:absolute;
  bottom:-30px;
  width:8px;height:8px;
  border-radius:3px;
  background:var(--magenta);
  opacity:0.5;
  animation:qrise linear infinite;
}
@keyframes qrise{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:0.7; }
  90%{ opacity:0.5; }
  100%{ transform:translateY(-110vh) rotate(180deg); opacity:0; }
}

.quiz-wrap{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto;
  padding:50px 24px 100px;
}

.quiz-header{ text-align:center; margin-bottom:30px; }
.quiz-header h1{
  font-size:2.2rem;
  color:var(--navy);
  margin-bottom:8px;
}
.quiz-header p.subtitle{ color:#3c4a63; font-size:1.02rem; }

.quiz-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:26px 0 10px;
  font-weight:700;
  color:var(--navy);
  font-size:0.9rem;
}
.progress-track{
  width:100%;
  height:14px;
  background:#fff;
  border-radius:var(--radius-pill);
  overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(30,42,68,0.12);
  margin-bottom:36px;
}
.progress-fill{
  height:100%;
  width:0%;
  background:var(--water-blue);
  border-radius:var(--radius-pill);
  transition:width .5s ease;
}

.quiz-card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:36px 34px;
  box-shadow:var(--shadow-card);
  animation:cardIn .5s ease;
  position:relative;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(24px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.question-text{
  font-size:1.3rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:26px;
  line-height:1.4;
}

.answers{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.answer-btn{
  position:relative;
  overflow:hidden;
  text-align:left;
  background:var(--beige);
  border:2px solid transparent;
  border-radius:18px;
  padding:16px 20px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.98rem;
  color:var(--navy);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.answer-btn:hover:not(:disabled){
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(59,167,245,0.25);
  border-color:var(--water-blue);
}
.answer-btn:disabled{ cursor:default; }

.answer-btn .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(59,167,245,0.35);
  transform:scale(0);
  animation:rippleClick .6s ease-out;
  pointer-events:none;
}
@keyframes rippleClick{
  to{ transform:scale(3.2); opacity:0; }
}

.answer-btn.correct{
  background:#e2f6e6;
  border-color:#2e8b3f;
  color:#1c5c29;
}
.answer-btn.incorrect{
  background:#fbe4ec;
  border-color:var(--magenta);
  color:#8a0050;
}
.answer-btn.reveal-correct{
  background:#e2f6e6;
  border-color:#2e8b3f;
  color:#1c5c29;
}

.explanation{
  margin-top:20px;
  background:var(--pink);
  color:var(--navy);
  padding:16px 18px;
  border-radius:16px;
  font-size:0.92rem;
  font-weight:600;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .4s ease, max-height .4s ease, margin-top .4s ease;
}
.explanation.show{ opacity:1; max-height:200px; margin-top:20px; }

.next-btn-wrap{
  text-align:right;
  margin-top:24px;
  height:56px;
}
.next-btn{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.next-btn.show{ opacity:1; pointer-events:auto; }

/* otter feedback popup */
.otter-pop{
  position:fixed;
  bottom:24px;
  right:24px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  z-index:50;
  transform:translateY(140%);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.otter-pop.show{ transform:translateY(0); }
.otter-pop img{
  width:96px;
  height:128px;
  object-fit:contain;
  object-position:center;
  padding:3px;
  background:#fff;
  border:3px solid #fff;
  border-radius:17px;
  box-shadow:var(--shadow-soft);
}
.otter-pop .speech-bubble{
  background:#fff;
  border:2px solid var(--magenta);
  border-radius:16px;
  padding:10px 16px;
  font-weight:700;
  color:var(--navy);
  box-shadow:var(--shadow-soft);
  font-size:0.9rem;
  white-space:nowrap;
}

/* ---------- Results screen ---------- */
.results-card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:50px 34px;
  box-shadow:var(--shadow-card);
  text-align:center;
  display:none;
}
.results-card.show{ display:block; animation:cardIn .6s ease; }

.results-card h2{ font-size:2rem; color:var(--navy); margin-bottom:20px; }

.score-ring-wrap{
  position:relative;
  width:180px;
  height:180px;
  margin:0 auto 20px;
}
.score-ring-wrap svg{ transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:#eee; stroke-width:14; }
.ring-fill{
  fill:none;
  stroke:var(--magenta);
  stroke-width:14;
  stroke-linecap:round;
  stroke-dasharray:502;
  stroke-dashoffset:502;
  transition:stroke-dashoffset 1.4s ease;
}
.ring-label{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.ring-label .score-frac{ font-size:1.6rem; font-weight:800; color:var(--navy); }
.ring-label .score-pct{ font-size:1rem; color:var(--magenta); font-weight:700; }

.badge{
  display:inline-block;
  margin:10px auto 6px;
  padding:12px 26px;
  border-radius:var(--radius-pill);
  font-weight:800;
  font-size:1.15rem;
  background:var(--gray-yellow);
  color:var(--navy);
}
.badge-desc{ color:#3c4a63; margin-bottom:30px; }

.results-buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* confetti */
.confetti-piece{
  position:fixed;
  top:-20px;
  width:10px;height:16px;
  z-index:80;
  animation:confettiFall linear forwards;
  pointer-events:none;
}
@keyframes confettiFall{
  to{ transform:translateY(105vh) rotate(600deg); opacity:0.9; }
}

@media (max-width:600px){
  .quiz-card{ padding:26px 20px; }
  .otter-pop{ right:12px; bottom:12px; }
  .otter-pop img{ width:78px; height:104px; }
}