:root{--accent:#6c63ff;--ink:#253047;--muted:#6f7890;--bg:#f6f7fb;--card:#fff;--border:#e7e9f2;--good:#22a06b;--bad:#e05252}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input{font:inherit}button{cursor:pointer}.app{width:min(100%,1050px);margin:auto;padding:16px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px 22px}.brand{font-weight:900;font-size:clamp(20px,4vw,30px)}.subtitle{color:var(--muted);font-size:13px;margin-top:3px}.top-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.top-stats span{background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 12px;font-size:13px;font-weight:700}
.screen{display:none}.screen.active{display:block}.hero,.result-card,.question-card,.panel,.reset-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:clamp(22px,5vw,46px);text-align:center}.hero{max-width:680px;margin:20px auto}.hero-emoji{font-size:clamp(55px,12vw,90px)}h1,h2{margin:8px 0}h1{font-size:clamp(27px,6vw,42px)}h2{font-size:clamp(23px,5vw,34px)}p{color:var(--muted);line-height:1.5}
.name-form{max-width:390px;margin:22px auto 0;text-align:left}.name-form label{display:block;font-weight:800;font-size:14px;margin-bottom:7px}input{width:100%;padding:14px 15px;border:2px solid var(--border);border-radius:14px;outline:none;background:#fff}input:focus{border-color:var(--accent)}
.primary,.secondary,.back,.tab,.danger{border:0;border-radius:14px;min-height:46px;padding:11px 16px;font-weight:800}.primary{background:var(--accent);color:#fff;width:100%;margin-top:12px}.secondary{background:#eef0f7;color:var(--ink)}.small{width:auto;min-height:42px}.back{background:transparent;color:var(--accent);padding:6px 0;min-height:40px}.danger{background:var(--bad);color:#fff;width:100%}.hidden{display:none!important}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:8px 0 22px}.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.game-card{min-height:170px;border:2px solid var(--border);background:#fff;border-radius:22px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--ink);transition:.15s}.game-card:hover{transform:translateY(-2px);border-color:var(--accent)}.game-card strong{font-size:19px}.game-card span:last-child{font-size:13px;color:var(--muted)}.big-emoji{font-size:50px}.numerasi{background:#fffaf0}.literasi{background:#f6f3ff}.acakkata{background:#fff3fa}.ranking{background:#f0fbf6}.reset{background:#fff2f2}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.summary-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px}.summary-card span{font-size:13px;color:var(--muted)}.summary-card strong{font-size:25px}
.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.level-card{border:2px solid var(--border);background:#fff;border-radius:18px;padding:18px 10px;min-height:130px;font-weight:800}.level-card .stars{font-size:20px;display:block;margin-bottom:8px}.level-card.locked{opacity:.48;cursor:not-allowed}
.game-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}.progress-wrap{flex:1}.progress-label{display:flex;justify-content:space-between;font-weight:800;font-size:13px;margin-bottom:7px}.progress{height:10px;background:#e8eaf2;border-radius:99px;overflow:hidden}.progress div{height:100%;background:var(--accent);width:0;transition:.25s}
.question-card{padding:28px 18px;margin-bottom:14px}.question-emoji{font-size:clamp(50px,13vw,90px);min-height:72px}.question-text{font-size:clamp(22px,5vw,34px);font-weight:900;margin:8px auto;max-width:800px}.hint{color:var(--muted);font-size:14px;min-height:20px}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:760px;margin:auto}.answer{min-height:72px;border:2px solid var(--border);background:#fff;border-radius:18px;font-size:clamp(20px,5vw,30px);font-weight:900;color:var(--ink)}.answer:hover{border-color:var(--accent)}.answer.correct{border-color:var(--good);background:#eaf9f1}.answer.wrong{border-color:var(--bad);background:#fff0f0}.feedback{text-align:center;min-height:46px;padding:12px;font-weight:900;font-size:17px}
.result-card{max-width:620px;margin:20px auto}.result-emoji{font-size:80px}.result-score{margin:18px auto;background:#f2f1ff;border-radius:20px;padding:16px}.result-score span{display:block;color:var(--muted)}.result-score strong{font-size:48px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.result-stats div{background:#f7f8fc;border-radius:15px;padding:12px;color:var(--muted)}.result-stats strong{display:block;font-size:24px;color:var(--ink)}.result-actions{display:grid;gap:9px;margin-top:18px}
.ranking-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tab{background:#fff;border:1px solid var(--border)}.tab.active{background:var(--accent);color:#fff}.ranking-list{display:grid;gap:8px}.rank-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:11px 14px}.rank-num{font-size:24px;text-align:center}.rank-name{font-weight:900}.rank-detail{font-size:12px;color:var(--muted)}.rank-score{font-weight:900;font-size:18px}
.reset-card{max-width:720px;margin:auto;text-align:left;padding:24px}.reset-card h3{margin:4px 0 8px}.reset-card hr{border:0;border-top:1px solid var(--border);margin:22px 0}.reset-users{display:grid;gap:9px}.reset-user{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7f8fc;border-radius:14px;padding:10px 12px}.reset-user strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reset-user button{min-height:40px;padding:8px 12px;border:0;border-radius:11px;background:#ffe6e6;color:#a52b2b;font-weight:800}.reset-message{margin-top:12px;text-align:center;font-weight:800;min-height:24px}
@media(max-width:720px){.app{padding:10px}.topbar{align-items:flex-start}.top-stats{max-width:45%}.menu-grid{grid-template-columns:1fr}.game-card{min-height:120px;flex-direction:row;justify-content:flex-start;text-align:left}.big-emoji{font-size:43px}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{flex-direction:column}.section-head .small{align-self:stretch}}
@media(max-width:420px){.topbar{display:block}.top-stats{max-width:none;justify-content:flex-start;margin-top:10px}.summary-grid{grid-template-columns:1fr}.answers{grid-template-columns:1fr}.result-stats{grid-template-columns:1fr}.game-head{gap:7px}.question-card{padding:20px 12px}.hero{padding:24px 16px}.reset-user{align-items:flex-start;flex-direction:column}.reset-user button{width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}