/* Minimal chrome, mobile friendly */
:root { --bg:#0b0e11; --fg:#e9eef3; --muted:#95a2af; --accent:#7cc; --ok:#0a0; --bad:#c00; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--fg); }
.app-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #222; }
#status-bar span { margin-left:12px; color:var(--muted); font-size:12px; }
main { padding:16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.card { border:1px solid #222; border-radius:12px; padding:12px; background:#12161a; display:flex; flex-direction:column; gap:8px; }
.card h3 { margin:0; font-size:18px; }
.card p { margin:0; color:var(--muted); font-size:14px; min-height:38px; }
.card .meta { font-size:12px; color:var(--muted); }
.card button { padding:8px 10px; border-radius:10px; border:1px solid #333; background:#1a222b; color:var(--fg); cursor:pointer; }
.card button:hover { border-color:#3a8; }
.hidden { display:none !important; }
.stage { min-height: 40vh; display:flex; align-items:center; justify-content:center; border:1px dashed #333; border-radius:12px; margin-top:8px; padding:12px; position:relative; }
.stage .instruction { text-align:center; font-size: clamp(18px, 3.2vw, 28px); margin-bottom: 12px; }
.stage .choices { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn { padding:10px 14px; border-radius:10px; border:1px solid #333; background:#1a222b; color:var(--fg); }
#controls .control-group { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.note { margin-top:8px; color:var(--muted); font-size:12px; }
.session-header { display:flex; gap:12px; align-items:center; }
#summary { white-space: pre-wrap; background:#0f1216; border:1px solid #222; padding:12px; border-radius:10px; }
.debug { max-height: 220px; overflow:auto; background:#0f1216; border:1px solid #222; padding:12px; border-radius:10px; }
.bg-correct { background: rgba(0,170,0,0.2); }
.bg-incorrect { background: rgba(204,0,0,0.2); }
.bg-neutral { background: transparent; }
.high-contrast { filter: contrast(1.2) brightness(1.05); }
footer { padding: 12px 16px; color: var(--muted); border-top:1px solid #222; }