/* styles.css - simple styling for math mini game */
:root{
  --bg:#f3f4f6;
  --card:#fff;
  --accent:#2b6cb0;
  --ok:#16a34a;
  --err:#dc2626;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),hsl(0, 60%, 26%));
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.container{width:100%;max-width:480px}
h1{text-align:center;margin:0 0 18px}
.game{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,0.08)}
.question{font-size:1.3rem;font-weight:600;margin-bottom:12px}
input[type="text"]{width:100%;padding:10px 12px;font-size:1rem;border:1px solid #e6e7ea;border-radius:8px;margin-bottom:12px}
.controls{display:flex;gap:8px}
button{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer}
button[disabled]{opacity:.5;cursor:not-allowed}
.feedback{min-height:20px;margin-top:12px}
.feedback.ok{color:var(--ok)}
.feedback.err{color:var(--err)}
.score{margin-top:10px;font-weight:600}
.footer{text-align:center;margin-top:12px;color:#6b7280}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.45)}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:22px;border-radius:10px;min-width:260px;text-align:center;box-shadow:0 12px 30px rgba(2,6,23,0.15)}
.modal-content button{margin-top:12px;background:#10b981}

.modal-actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
.modal-actions .danger{background:#ef4444}
.small{font-size:0.85rem;padding:6px 8px;border-radius:6px}

@media (max-width:420px){.container{padding:0 8px}.game{padding:14px}.question{font-size:1.1rem}}

/* timer progress bar */
.timer-bar-wrap{background:#e6eef8;border-radius:8px;height:10px;margin-top:6px;overflow:hidden}
.timer-bar{height:100%;background:#16a34a;width:0%;transition:width 0.25s linear,background-color 0.2s}
.timer-bar.low{background:#f59e0b}
.timer-bar.critical{background:#ef4444}