:root{
  --bg:#fff8e6;
  --card:#ffffff;
  --accent:#ffb11b;
  --accent-2:#ff6b6b;
  --muted:#6b6b6b;
  --radius:14px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#fffdf4,var(--bg))}
.container{max-width:520px;margin:18px auto;padding:18px}
.hero{text-align:center;margin-bottom:12px;}
.hero h1{margin:4px 0;font-size:2.2rem}
.hero p{margin:0;color:var(--muted)}

.card{background:var(--card);padding:16px;border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(0,0,0,0.06);margin-bottom:12px;}

label{display:block;margin:8px 0;font-weight:700}
input[type="text"], select, #answer{
  width:100%;padding:12px;border-radius:12px;border:1px solid #f0e9d8;margin-top:6px;font-size:1rem;
  background:linear-gradient(180deg,#fff,#fffbe6);
}

.status{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font-weight:800}
.big{font-size:1.6rem;padding:12px 0;text-align:center}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:800}
.btn.primary{background:linear-gradient(90deg,var(--accent),#ffdf6b)}
.btn.danger{background:linear-gradient(90deg,var(--accent-2),#ff8b8b);color:white}
.btn:not(.primary):not(.danger){background:#f0f0f0}
.hidden{display:none}
.feedback{margin-top:10px;font-weight:800;min-height:22px;text-align:center}
.feedback.correct{color:green}
.feedback.wrong{color:crimson}

/* confetti */
#confetti{position:relative;height:0;pointer-events:none}
.confetti-piece{
  position:absolute;left:50%;top:0;width:10px;height:16px;opacity:0;transform-origin:center;
  border-radius:2px;
  animation:fall 1400ms ease-out forwards;
}
@keyframes fall{
  0%{opacity:1; transform:translateY(0) rotate(0) scale(1)}
  100%{opacity:1; transform:translateY(220px) rotate(720deg) scale(1)}
}

/* small mobile tweaks */
@media (max-width:420px){
  .container{padding:12px;margin:10px}
  .hero h1{font-size:1.8rem}
}
.footer{font-size:0.85rem;text-align:center;color:var(--muted)}
ol{padding-left:20px}