:root{--purple:#6c3ce7;--pink:#ec4899;--ink:#24304a;--muted:#69738a;--bg:#f6f2ff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,"Segoe UI",sans-serif;color:var(--ink)}
body{background:linear-gradient(145deg,#f7efff,#edf8ff);padding:18px}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{width:min(540px,100%);margin:0 auto;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 18px 50px rgba(63,45,120,.18)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff}
.brand{font-weight:900;font-size:1.15rem}.top-actions{display:flex;gap:8px;align-items:center}.badge{background:#ffd447;color:#654b00;padding:6px 10px;border-radius:999px;font-size:.72rem;font-weight:900}.icon-btn{width:40px;height:40px;border:0;border-radius:50%;background:#fff}
.screen{display:none;padding:20px}.screen.active{display:block}
.card{text-align:center}.mascot{font-size:4rem}.demo-badge,.eyebrow{display:inline-block;background:#ffd447;color:#6e5000;border-radius:999px;padding:7px 12px;font-size:.75rem;font-weight:900}
h1{font-size:clamp(2rem,8vw,2.8rem);line-height:1.05;color:#5b2bd0;margin:14px 0 10px}h2{color:#5b2bd0;margin:8px 0}p{color:var(--muted);line-height:1.5}
label{display:block;text-align:left;font-weight:800;margin:20px 0 8px}input{width:100%;padding:14px 16px;border:2px solid #d9c8ff;border-radius:15px;outline:none;font-size:1rem}input:focus{border-color:var(--purple)}
.primary-btn,.secondary-btn{display:block;width:100%;margin-top:16px;border:0;border-radius:16px;padding:15px 18px;font-weight:900;font-size:1rem}.primary-btn{color:#fff;background:linear-gradient(135deg,var(--purple),var(--pink))}.secondary-btn{background:#eef1f8;color:var(--ink)}small{display:block;color:var(--muted);margin-top:12px}
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.game-card{min-height:130px;border:0;border-radius:18px;padding:14px;background:#f5f2ff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;color:var(--ink)}.game-card.unlocked{border:3px solid #2dcf84}.game-card.locked{opacity:.7}.game-card span{font-size:2rem}.game-card small{margin:0}
.game-panel{text-align:left}.game-head,.status-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.score{font-weight:900;background:#fff5c6;padding:10px 12px;border-radius:14px}.status-row{margin:16px 0 7px;color:var(--muted);font-weight:800;font-size:.9rem}.progress-track{height:12px;background:#e9e4f7;border-radius:999px;overflow:hidden}.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#2dcf84,#39a9ff);transition:width .3s}.question-box{text-align:center;padding:25px 15px;margin:18px 0;border-radius:18px;background:#f6f2ff;font-size:1.45rem;font-weight:900;min-height:100px;display:grid;place-items:center}.answer-grid{display:grid;gap:10px}.answer-btn{border:2px solid var(--purple);border-radius:15px;padding:14px;background:#fff;font-weight:900;font-size:1.15rem;color:#4d25b8}.answer-btn.correct{background:#c7f7df;border-color:#2dcf84}.answer-btn.wrong{background:#ffe0e8;border-color:#ef4444}.message{text-align:center;min-height:38px;padding-top:12px;font-weight:900}.firework{position:fixed;inset:0;display:none;place-items:center;font-size:5rem;pointer-events:none}.firework.show{display:grid}.celebration{font-size:3rem}.result-box{margin:20px 0;padding:18px;border-radius:18px;background:#fff8cf;display:flex;flex-direction:column;gap:6px}.result-box strong{font-size:1.5rem;color:#5b2bd0}
.modal{position:fixed;inset:0;background:rgba(35,22,69,.62);display:grid;place-items:center;padding:18px;z-index:50}.modal.hidden{display:none}.modal-card{position:relative;width:min(400px,100%);background:#fff;border-radius:22px;padding:25px;text-align:center}.modal-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;border-radius:50%;font-size:1.5rem}.modal-icon{font-size:3rem}
@media(max-width:600px){body{padding:0}.app-shell{min-height:100vh;border-radius:0}.screen{padding:18px}.game-grid{grid-template-columns:1fr}}