*{box-sizing:border-box}
:root{
  --bg:#dff7ff;--ink:#17324d;--card:#fff;--primary:#ff9f1c;--primary-dark:#d87800;
  --soft:#e8f3ff;--ok:#159447;--bad:#e05252;--muted:#60758a;
}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:linear-gradient(#c8f1ff,#f6fdff);color:var(--ink)}
button,input{font:inherit}
button{cursor:pointer;border:0}
.screen{min-height:100vh;padding:20px;display:flex;flex-direction:column;align-items:center}
.top{width:min(980px,100%);display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.pill{background:#fff;border-radius:999px;padding:9px 14px;font-weight:900;box-shadow:0 3px 10px #0001}
.card{width:min(980px,100%);background:rgba(255,255,255,.97);border-radius:28px;padding:28px;box-shadow:0 10px 30px #0002;text-align:center}
h1{font-size:clamp(2rem,6vw,4rem);margin:8px 0}h2{margin:.5rem 0}.subtitle{font-size:1.2rem}.hero{font-size:6rem;margin:8px}
.primary{background:var(--primary);color:#fff;padding:16px 34px;border-radius:18px;font-size:1.35rem;font-weight:900;box-shadow:0 6px 0 var(--primary-dark);margin:18px 0}
.primary:active{transform:translateY(3px);box-shadow:0 3px 0 var(--primary-dark)}
.secondary{background:var(--soft);color:var(--ink);padding:12px 18px;border-radius:14px;font-weight:900}
.danger{background:#ffe7e7;color:#9b2525;padding:10px 14px;border-radius:12px;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;width:100%;margin-top:20px}
.zone,.profile-card{padding:22px;border-radius:24px;background:#fff;box-shadow:0 7px 18px #0002;text-align:center;font-weight:800;transition:.15s ease;border:3px solid transparent}
.zone:not(.locked):hover,.profile-card:hover{transform:translateY(-4px);border-color:#bde9ff}
.zone .emoji,.avatar{font-size:4rem}.locked{opacity:.45;filter:grayscale(.7);cursor:not-allowed}
.question{font-size:clamp(3rem,12vw,6rem);font-weight:1000;margin:22px 0}
.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:650px;margin:auto}
.answer{padding:20px;border-radius:20px;background:#eaf7ff;font-size:2rem;font-weight:900;box-shadow:0 5px 0 #b9d8e8}
.answer:disabled{cursor:default;opacity:.8}
.feedback{font-size:1.4rem;font-weight:900;margin:18px;min-height:34px}.correct{color:var(--ok)}.wrong{color:var(--bad)}
.progress{height:14px;background:#dcecf5;border-radius:99px;overflow:hidden;margin:12px 0}.progress>div{height:100%;background:#56c596}
.small{font-size:.92rem;color:var(--muted)}.zone-progress{margin-top:10px;height:10px;border-radius:99px;background:#edf3f6;overflow:hidden}.zone-progress i{display:block;height:100%;background:#56c596}
table{width:100%;border-collapse:collapse;margin-top:10px}td,th{padding:10px;border-bottom:1px solid #e6eef2;text-align:left}.bar{height:12px;background:#e7eef2;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:#56c596}
.notice{margin:14px auto;max-width:700px;padding:14px 16px;border-radius:16px;background:#fff8df;font-weight:800}
.footer-note{margin-top:18px;font-size:.9rem;color:#698095}.profile-name{font-size:1.3rem;font-weight:900;margin-top:8px}
.avatar-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0}
.avatar-btn{font-size:2.4rem;background:#f2f8ff;border:3px solid transparent;border-radius:16px;padding:10px}
.avatar-btn.selected{border-color:#62b8ff;background:#e6f4ff}
.form-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.name-input{padding:13px 16px;border:2px solid #cfe3ef;border-radius:14px;min-width:220px}
.profile-actions{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
@media(max-width:560px){.card{padding:20px}.answers{gap:10px}.answer{font-size:1.5rem;padding:16px}.top{align-items:flex-start}.stats{justify-content:flex-end}}