/* Mascot cheer animation */
.mascot-cheer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}
.mascot-cheer {
  width: 90px;
  height: auto;
  transition: transform 0.4s cubic-bezier(.68,-0.55,.27,1.55);
  filter: drop-shadow(0 4px 8px #0008);
}
.mascot-cheer.cheer {
  animation: mascot-bounce 0.7s cubic-bezier(.68,-0.55,.27,1.55) 1;
}
@keyframes mascot-bounce {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.15,0.85) translateY(-10px); }
  50% { transform: scale(0.95,1.1) translateY(-18px); }
  70% { transform: scale(1.1,0.9) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}
.mascot-cheer.hidden { display: none; }
:root{
  --bg:#0f4bb3;
  --bg-dark:#0a3a8d;
  --card:#f6efe6;
  --text:#0e2450;
  --accent:#ffb509;
  --accent-dark:#f39a00;
  --red:#ff5a58;
  --green:#2ac56c;
  --blue:#1e88ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, #1e64ff22, transparent), var(--bg);
  color:var(--text);
}
.app{min-height:100%; display:flex; flex-direction:column;}

/* HUD */
.hud{
  display:grid;
  grid-template-columns: 120px 1fr 140px;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  background: linear-gradient(180deg, var(--bg-dark), var(--bg));
  color:#fff;
  border-bottom:4px solid #0b2f73;
}
.brand{margin:0; text-align:center; font-weight:900; letter-spacing:0.5px}
.hud-item{display:flex; flex-direction:column; justify-content:center; align-items:center; background:#0b2f73; border-radius:14px; padding:10px 14px; border:3px solid #092760; box-shadow:inset 0 2px 0 #183b8e}
.hud-label{opacity:.85; font-size:12px; text-transform:uppercase; letter-spacing:1px}
.hud-timer span:last-child, .hud-score span:last-child{font-size:28px; font-weight:900}

/* Board */
.board{max-width:880px; margin:24px auto; padding:0 16px; width:100%;}

/* Meter */
.meter{margin:8px auto 18px; max-width:660px}
.meter-bar{display:flex; height:16px; border-radius:10px; overflow:hidden; outline:3px solid #e7d9c7; box-shadow:inset 0 1px 0 #fff5, 0 2px 0 #0002}
.mseg{flex:var(--p); background:var(--blue);}
#mseg-0{background:#ffd54f}
#mseg-1{background:#ffb300}
#mseg-2{background:#26c6da}
.meter-labels{display:flex; justify-content:space-between; padding:6px 4px 0; color:#fff; font-weight:800}

/* Card */
.card{background:var(--card); border-radius:20px; padding:22px 22px; border:4px solid #e7d9c7; box-shadow:0 6px 0 #c4b29a, 0 14px 24px #00000022}
.sentence{font-size:26px; line-height:1.4; color:#26314e; margin:0 0 16px;}
.highlight{background:#ffe68a; padding:2px 4px; border-radius:8px}

.choices{display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 4px}
.choice{flex:1 1 180px; background:#e9f1ff; color:#10325a; border:3px solid #c7ddff; border-radius:14px; padding:14px 16px; font-weight:800; font-size:20px; cursor:pointer; box-shadow:0 4px 0 #9ec0ff; transition:transform .05s ease, filter .15s}
.choice:active{transform:translateY(1px)}
.choice.correct{background:#d1f6e3; border-color:#a4ecc8; box-shadow:0 4px 0 #77e0af}
.choice.wrong{background:#ffd7d6; border-color:#ffb0ae; box-shadow:0 4px 0 #ff9a98}
.choice[disabled]{filter:saturate(.6); cursor:not-allowed}

.feedback{margin-top:14px; background:#ffd15a; border:3px solid #f0b73f; color:#322100; padding:12px 14px; border-radius:16px; font-weight:900; display:none}
.feedback.show{display:block}

.actions{display:flex; gap:10px; justify-content:center; margin:18px 0}
.btn{border:none; padding:12px 18px; font-weight:900; border-radius:14px; cursor:pointer}
.btn.primary{background:var(--accent); border:3px solid var(--accent-dark)}
.btn.secondary{background:#c7e0ff; border:3px solid #9ec3ff}

.footer{color:#d6e2ff; text-align:center; padding:24px 0 40px}

/* Accessibility helpers */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}