/* =====================================================================
   MONKEY LADDER QUIZ — STYLES
   Palette:
     Sky:      #7FD1FF -> #C8ECFF
     Sun:      #FFD84D / glow #FFF3B0
     Grass:    #7CC576 -> #4E9F4A
     Ladder:   rails #B9805A, rungs #8C5A34, glow #FFD84D
     Monkey:   body #A9673A, muzzle #E9B27C, cheeks #E8956D
     Card:     #FFFBF3 cream, border #FFE1A8
     Correct:  #45D483   Wrong: #FF6B6B
     Text:     #3B2A20 (heading) / #5B4636 (body)
   Fonts: Fredoka (display/rounded), Nunito (body/UI)
===================================================================== */

:root{
  --sky-top:#6EC9FF;
  --sky-bottom:#D9F3FF;
  --sun:#FFD84D;
  --sun-glow:#FFF3B0;
  --grass-top:#8AD07E;
  --grass-bottom:#469B48;
  --wood-light:#C89568;
  --wood-dark:#8C5A34;
  --rung-glow:#FFD84D;
  --card-bg:#FFFBF3;
  --card-border:#FFE1A8;
  --ink:#3B2A20;
  --ink-soft:#6B5747;
  --correct:#3FCB7A;
  --correct-dark:#2AA860;
  --wrong:#FF6B6B;
  --wrong-dark:#E2483F;
  --coral:#FF9770;
  --sunny:#FFC24B;
  --sky-blue-btn:#5AC8FA;
  --shadow-soft: 0 10px 24px rgba(59,42,32,0.14);
  font-size: 16px;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  overflow-x:hidden;
  font-family:'Nunito', sans-serif;
  color:var(--ink);
}

h1,h2,h3{ font-family:'Fredoka', 'Nunito', sans-serif; margin:0; }

button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--sunny); color:var(--ink); }

/* =====================================================================
   BACKGROUND SCENE
===================================================================== */
.scene{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
}
.sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 70%);
}

.sun{
  position:absolute; top:5%; right:8%;
  width:90px; height:90px;
  animation: sun-rotate 20s linear infinite, sun-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 30px var(--sun-glow));
}
.sun-face{ font-size:70px; line-height:1; }
@keyframes sun-rotate{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes sun-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

.cloud{
  position:absolute; font-size:48px; opacity:0.9;
  animation: float-across linear infinite;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
}
.cloud-1{ top:10%; left:-10%; font-size:56px; animation-duration:55s; }
.cloud-2{ top:20%; left:-15%; font-size:40px; animation-duration:70s; animation-delay:-20s;}
.cloud-3{ top:6%; left:-20%; font-size:64px; animation-duration:90s; animation-delay:-45s;}
@keyframes float-across{
  from{ transform:translateX(0); }
  to{ transform:translateX(130vw); }
}

.bird{ position:absolute; font-size:22px; animation: bird-fly linear infinite; }
.bird-1{ top:15%; left:-5%; animation-duration:18s; }
.bird-2{ top:28%; left:-5%; animation-duration:24s; animation-delay:-6s; }
@keyframes bird-fly{
  0%{ transform:translate(0,0) scaleX(1); }
  48%{ transform:translate(60vw, -20px) scaleX(1); }
  50%{ transform:translate(62vw, -20px) scaleX(1); }
  100%{ transform:translate(125vw, 10px) scaleX(1); }
}

.butterfly{ position:absolute; font-size:20px; animation: butterfly-dance 9s ease-in-out infinite; }
.butterfly-1{ bottom:22%; left:15%; animation-delay:0s; }
.butterfly-2{ bottom:30%; left:70%; animation-delay:-4s; }
@keyframes butterfly-dance{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  25%{ transform:translate(20px,-25px) rotate(10deg); }
  50%{ transform:translate(0,-45px) rotate(-8deg); }
  75%{ transform:translate(-20px,-20px) rotate(6deg); }
}

.hill{
  position:absolute; bottom:14%; width:70%; height:140px; border-radius:50% 50% 0 0;
}
.hill-back{ left:-10%; background:#9FDD8E; opacity:0.55; }
.hill-front{ right:-15%; background:#8AD07E; opacity:0.7; }

.tree{ position:absolute; bottom:12%; font-size:56px; animation: sway 6s ease-in-out infinite; transform-origin:bottom center; }
.tree-1{ left:3%; font-size:64px; animation-delay:0s; }
.tree-2{ left:12%; font-size:48px; animation-delay:-2s; }
.tree-3{ right:6%; font-size:60px; animation-delay:-4s; }
@keyframes sway{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } }

.flower{ position:absolute; bottom:9%; font-size:26px; animation: sway 4s ease-in-out infinite; }
.flower-1{ left:20%; animation-delay:-1s; }
.flower-2{ left:35%; animation-delay:-2s; }
.flower-3{ right:25%; animation-delay:-3s; }
.flower-4{ right:12%; animation-delay:0s; }

.grass{
  position:absolute; left:0; right:0; bottom:0; height:11%;
  background:linear-gradient(180deg, var(--grass-top), var(--grass-bottom));
  border-top:6px solid #6DBB5F;
}

/* =====================================================================
   TOP BAR
===================================================================== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding:16px 28px;
}
.game-title{
  font-size:1.7rem; font-weight:700; color:var(--ink);
  text-shadow: 0 2px 0 #fff8, 0 4px 10px rgba(59,42,32,0.15);
}
.score-panel{ display:flex; gap:10px; flex-wrap:wrap; }
.score-chip{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.85);
  border:2px solid var(--card-border);
  border-radius:999px;
  padding:6px 14px;
  font-weight:800; font-size:0.95rem;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease;
}
.score-chip:hover{ transform:translateY(-2px) scale(1.04); }
.chip-icon{ font-size:1.1rem; }
.score-chip.correct{ color:var(--correct-dark); }
.score-chip.wrong{ color:var(--wrong-dark); }
.score-chip.streak{ color:#E08A00; }
.score-chip.best{ color:#B8790A; }

/* =====================================================================
   MAIN LAYOUT
===================================================================== */
.game-area{
  display:flex;
  gap:24px;
  align-items:stretch;
  padding: 6px 28px 40px;
  min-height: 78vh;
}

/* ---------- LADDER ZONE ---------- */
.ladder-zone{
  flex: 0 0 300px;
  display:flex; flex-direction:column; align-items:center;
  position:relative;
}
.ladder-wrap{
  position:relative;
  width:220px;
  flex:1;
  min-height:640px;
  display:flex; align-items:flex-end; justify-content:center;
}
.ladder-rails{
  position:relative;
  width:180px; height:100%;
}
.rail{
  position:absolute; top:0; bottom:0; width:16px;
  background:linear-gradient(90deg, var(--wood-dark), var(--wood-light) 45%, var(--wood-dark));
  border-radius:8px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.25), var(--shadow-soft);
}
.rail-left{ left:8px; }
.rail-right{ right:8px; }

.ladder-steps{
  position:absolute; inset:0;
  display:flex; flex-direction:column-reverse;
  justify-content:flex-start;
}
.ladder-step{
  position:relative;
  height:24px;
  margin:0 -2px;
  display:flex; align-items:center; justify-content:center;
}
.ladder-step .rung{
  width:100%; height:10px;
  background:linear-gradient(180deg, var(--wood-light), var(--wood-dark));
  border-radius:6px;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.25);
  transition: box-shadow .3s ease, background .3s ease;
}
.ladder-step.active .rung{
  background:linear-gradient(180deg, var(--rung-glow), #FFB300);
  box-shadow: 0 0 14px 4px rgba(255,216,77,0.85), inset 0 -2px 3px rgba(0,0,0,0.15);
  animation: rung-glow-pulse 1.4s ease-in-out infinite;
}
.ladder-step.passed .rung{
  background:linear-gradient(180deg, #D9A066, var(--wood-dark));
  opacity:0.85;
}
@keyframes rung-glow-pulse{
  0%,100%{ box-shadow: 0 0 10px 2px rgba(255,216,77,0.7); }
  50%{ box-shadow: 0 0 20px 8px rgba(255,216,77,0.95); }
}
.ladder-step .step-label{
  position:absolute; left:-26px;
  font-size:0.65rem; font-weight:800; color:var(--ink-soft);
  opacity:0.7;
}

/* ---------- MONKEY ---------- */
.monkey{
  position:absolute;
  left:50%;
  bottom:0;
  width:86px; height:86px;
  transform: translate(-50%, 0);
  transition: bottom 0.6s cubic-bezier(.34,1.56,.64,1);
  z-index:5;
}
.monkey.climbing .monkey-body{ animation: monkey-hop 0.6s ease-in-out; }
.monkey.falling{ transition: bottom 0.55s cubic-bezier(.55,0,1,.45); }
.monkey.falling .monkey-body{ animation: monkey-scream 0.55s ease-in-out; }
.monkey.shake-land .monkey-body{ animation: monkey-land-shake 0.4s ease-in-out; }
.monkey.win .monkey-body{ animation: monkey-celebrate 0.9s ease-in-out infinite; }

.monkey-shadow{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:56px; height:12px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.28), transparent 70%);
}

.monkey-body{
  position:relative; width:100%; height:100%;
  animation: monkey-idle-bob 2.2s ease-in-out infinite, monkey-blink-holder 5s linear infinite;
}
@keyframes monkey-idle-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes monkey-hop{
  0%{ transform:translateY(0) scale(1,1); }
  30%{ transform:translateY(-22px) scale(0.94,1.08); }
  55%{ transform:translateY(-30px) scale(1.03,0.95); }
  75%{ transform:translateY(-8px) scale(0.97,1.03); }
  100%{ transform:translateY(0) scale(1,1); }
}
@keyframes monkey-scream{
  0%{ transform:translateY(0) rotate(0); }
  20%{ transform:translateY(-6px) rotate(-8deg); }
  100%{ transform:translateY(40px) rotate(25deg); }
}
@keyframes monkey-land-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px) scaleY(0.9); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(3px); }
}
@keyframes monkey-celebrate{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-14px) rotate(-8deg); }
  50%{ transform:translateY(0) rotate(0deg); }
  75%{ transform:translateY(-14px) rotate(8deg); }
}

.monkey-head{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:64px; height:56px;
  background: radial-gradient(circle at 35% 30%, #C07C43, #A9673A 70%);
  border-radius:50% 50% 46% 46%;
  box-shadow: inset 0 -6px 8px rgba(0,0,0,0.15);
  z-index:3;
}
.monkey-ear{
  position:absolute; top:2px; width:24px; height:24px; border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #C07C43, #8C5A34 75%);
  z-index:2;
}
.ear-left{ left:-2px; }
.ear-right{ right:-2px; }
.monkey-ear::after{
  content:''; position:absolute; inset:5px; border-radius:50%;
  background:#E9B27C;
}

.monkey-face{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:52px; height:36px;
}
.eye{
  position:absolute; top:2px; width:14px; height:16px; border-radius:50%;
  background:#3B2A20;
  animation: blink 5s ease-in-out infinite;
}
.eye-left{ left:4px; }
.eye-right{ right:4px; }
.pupil{
  position:absolute; top:2px; left:3px; width:6px; height:6px; border-radius:50%;
  background:#fff;
}
@keyframes blink{
  0%, 92%, 100%{ transform:scaleY(1); }
  95%{ transform:scaleY(0.1); }
}
.monkey-muzzle{
  position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  width:38px; height:22px; border-radius:50%;
  background: radial-gradient(circle at 40% 30%, #F3CB9A, #E9B27C 80%);
}
.nostril{
  position:absolute; top:5px; width:4px; height:5px; border-radius:50%;
  background:#8C5A34;
}
.nostril-left{ left:12px; }
.nostril-right{ right:12px; }
.mouth{
  position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:18px; height:8px; border-radius:0 0 10px 10px;
  border-bottom:3px solid #7A4A28;
}

.monkey-arm{
  position:absolute; top:30px; width:14px; height:34px; border-radius:10px;
  background: linear-gradient(180deg, #A9673A, #8C5A34);
  z-index:1;
  transform-origin: top center;
}
.arm-left{ left:2px; transform:rotate(-18deg); animation: arm-wave-left 2.6s ease-in-out infinite; }
.arm-right{ right:2px; transform:rotate(18deg); animation: arm-wave-right 2.6s ease-in-out infinite; }
@keyframes arm-wave-left{ 0%,100%{ transform:rotate(-18deg); } 50%{ transform:rotate(-32deg); } }
@keyframes arm-wave-right{ 0%,100%{ transform:rotate(18deg); } 50%{ transform:rotate(32deg); } }

.monkey-tail{
  position:absolute; bottom:6px; right:-6px; width:34px; height:34px;
  border:7px solid #A9673A;
  border-left-color:transparent; border-bottom-color:transparent;
  border-radius:50%;
  transform-origin: left center;
  animation: tail-swing 2.4s ease-in-out infinite;
}
@keyframes tail-swing{
  0%,100%{ transform:rotate(0deg); }
  50%{ transform:rotate(18deg); }
}

.level-flag{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  font-size:1.4rem; font-weight:800;
  background:#fff; padding:4px 12px; border-radius:999px;
  box-shadow:var(--shadow-soft);
  border:2px solid var(--card-border);
}

/* =====================================================================
   QUIZ ZONE
===================================================================== */
.quiz-zone{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding-top:10px; }
.quiz-card{
  width:100%; max-width:640px;
  background:var(--card-bg);
  border:3px solid var(--card-border);
  border-radius:28px;
  padding:28px 32px 24px;
  box-shadow: 0 18px 40px rgba(59,42,32,0.18), 0 2px 0 #fff inset;
  position:relative;
  animation: card-pop-in 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes card-pop-in{
  0%{ opacity:0; transform:translateY(30px) scale(0.95); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

.progress-block{ margin-bottom:20px; }
.progress-labels{
  display:flex; justify-content:space-between;
  font-weight:800; font-size:0.9rem; color:var(--ink-soft);
  margin-bottom:6px;
}
.progress-bar-track{
  width:100%; height:16px; border-radius:999px;
  background:#F0E4CC;
  overflow:hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
}
.progress-bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #FFD84D, #FF9770);
  border-radius:999px;
  transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.progress-bar-fill::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
.remaining-label{
  margin-top:6px; font-size:0.85rem; font-weight:700; color:var(--ink-soft);
}

.question-block{ min-height:80px; display:flex; align-items:center; margin-bottom:18px; }
.question-text{
  font-size:1.5rem; line-height:1.35; color:var(--ink);
  animation: question-fade-in 0.4s ease;
}
@keyframes question-fade-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.answers-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.answer-btn{
  position:relative; overflow:hidden;
  background:#fff;
  border:3px solid #FFE1A8;
  border-radius:18px;
  padding:16px 18px;
  font-size:1.05rem; font-weight:700; color:var(--ink);
  text-align:left;
  box-shadow: 0 6px 0 #EAD7B0, 0 8px 16px rgba(59,42,32,0.08);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  display:flex; align-items:center; gap:10px;
}
.answer-btn .answer-key{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--sunny); color:#fff; font-size:0.85rem; font-weight:800;
  flex:0 0 auto;
}
.answer-btn:hover{
  transform:translateY(-3px);
  box-shadow: 0 9px 0 #EAD7B0, 0 14px 20px rgba(59,42,32,0.12);
  background:#FFFDF7;
}
.answer-btn:active, .answer-btn.pressed{
  transform:translateY(2px);
  box-shadow: 0 2px 0 #EAD7B0, 0 4px 8px rgba(59,42,32,0.1);
}
.answer-btn:disabled{ cursor:default; }
.answer-btn.correct-answer{
  background: linear-gradient(135deg, #DFFCE9, #C6F7DA);
  border-color: var(--correct);
  animation: correct-scale 0.4s ease;
  box-shadow: 0 6px 0 var(--correct-dark), 0 0 18px rgba(63,203,122,0.5);
}
.answer-btn.wrong-answer{
  background: linear-gradient(135deg, #FFE3E0, #FFD1CC);
  border-color: var(--wrong);
  animation: wrong-shake 0.4s ease;
  box-shadow: 0 6px 0 var(--wrong-dark);
}
@keyframes correct-scale{
  0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); }
}
@keyframes wrong-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

/* ripple effect */
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,216,77,0.55);
  transform:scale(0); animation: ripple-anim 0.6s ease-out;
  pointer-events:none;
}
@keyframes ripple-anim{ to{ transform:scale(3); opacity:0; } }

.hint-row{ margin-top:16px; text-align:center; }
.key-hint{ font-size:0.78rem; color:var(--ink-soft); opacity:0.75; font-weight:700; }

/* =====================================================================
   FEEDBACK OVERLAYS
===================================================================== */
.feedback-flash{
  position:fixed; inset:0; pointer-events:none; z-index:40;
  opacity:0;
}
.feedback-flash.flash-correct{ background:rgba(63,203,122,0.28); animation: flash-fade 0.5s ease; }
.feedback-flash.flash-wrong{ background:rgba(255,107,107,0.32); animation: flash-fade 0.5s ease; }
@keyframes flash-fade{
  0%{ opacity:1; } 100%{ opacity:0; }
}

body.shake-screen{ animation: screen-shake 0.45s ease; }
@keyframes screen-shake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-8px,4px); }
  40%{ transform:translate(8px,-4px); }
  60%{ transform:translate(-6px,2px); }
  80%{ transform:translate(6px,-2px); }
}

.particle-layer{ position:fixed; inset:0; pointer-events:none; z-index:45; overflow:hidden; }
.particle{
  position:absolute; border-radius:50%;
  animation: particle-pop 0.7s ease-out forwards;
}
@keyframes particle-pop{
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:var(--pt) scale(0.3); opacity:0; }
}
.dust-particle{
  position:absolute; border-radius:50%; background:#C9B08A;
  animation: dust-pop 0.6s ease-out forwards;
}
@keyframes dust-pop{
  0%{ transform:translate(0,0) scale(0.6); opacity:0.8; }
  100%{ transform:var(--pt) scale(1.4); opacity:0; }
}

/* =====================================================================
   WIN MODAL
===================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(59,42,32,0.55);
  display:none; align-items:center; justify-content:center;
  overflow:hidden;
}
.modal-overlay.visible{ display:flex; }

.confetti-layer{ position:absolute; inset:0; overflow:hidden; }
.confetti-piece{
  position:absolute; top:-20px; width:10px; height:16px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(110vh) rotate(720deg); opacity:0.9; }
}

.win-card{
  position:relative; z-index:2;
  background:var(--card-bg);
  border:4px solid var(--sunny);
  border-radius:32px;
  padding:40px 48px;
  text-align:center;
  max-width:460px; width:90%;
  box-shadow: 0 0 0 8px rgba(255,216,77,0.25), 0 24px 60px rgba(59,42,32,0.4);
  animation: win-pop 0.55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes win-pop{
  0%{ opacity:0; transform:scale(0.6) translateY(40px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.win-monkey{
  font-size:5rem; animation: monkey-celebrate 0.9s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.2));
}
.win-title{ font-size:2rem; margin-top:6px; color:var(--ink); }
.win-subtitle{ color:var(--ink-soft); font-weight:700; margin-top:8px; }
.win-stats{ display:flex; justify-content:center; gap:36px; margin:22px 0; }
.win-stat{ display:flex; flex-direction:column; align-items:center; font-weight:800; color:var(--ink-soft); }
.win-stat-num{ font-size:2rem; color:var(--correct-dark); font-family:'Fredoka', sans-serif; }
.play-again-btn{
  background:linear-gradient(135deg, var(--sunny), var(--coral));
  border:none; color:#fff; font-weight:800; font-size:1.1rem;
  padding:14px 32px; border-radius:999px;
  box-shadow: 0 8px 0 #D97706, 0 14px 24px rgba(59,42,32,0.25);
  animation: btn-bounce 1.8s ease-in-out infinite;
  transition: transform .15s ease;
}
.play-again-btn:hover{ transform:translateY(-3px) scale(1.03); }
.play-again-btn:active{ transform:translateY(3px); box-shadow:0 3px 0 #D97706; }
@keyframes btn-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width: 900px){
  .game-area{ flex-direction:column; align-items:center; padding:0 16px 30px; }
  .ladder-zone{ flex:none; width:100%; }
  .ladder-wrap{ min-height:420px; width:180px; }
  .quiz-zone{ width:100%; padding-top:20px; }
  .quiz-card{ padding:22px 20px 20px; }
  .answers-grid{ grid-template-columns:1fr; }
  .game-title{ font-size:1.3rem; }
  .topbar{ padding:14px 16px; justify-content:center; text-align:center; }
}

@media (max-width:480px){
  .win-card{ padding:32px 24px; }
  .win-stats{ gap:20px; }
  .question-text{ font-size:1.25rem; }
}

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

/* Keyboard focus visibility */
.answer-btn:focus-visible,
.play-again-btn:focus-visible{
  outline:3px solid #2A67E0;
  outline-offset:2px;
}