:root{--ink: #1b2a4a;--sky: #3d8bff;--sun: #ffc33d;--mint: #37d39e;--coral: #ff6b57;--paper: #fffdf7;--paper-2: #f1eee5;--muted: #5f6b83;--display: "Baloo 2", system-ui, sans-serif;--body: "Nunito", system-ui, sans-serif;--r: 18px;--shadow: 5px 5px 0 var(--ink);--shadow-sm: 3px 3px 0 var(--ink)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--body);font-weight:600;color:var(--ink);background:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0}h1{font-size:2rem}h2{font-size:1.45rem}h3{font-size:1.15rem}p{margin:0;line-height:1.5}a{color:inherit}button,input,select{font:inherit;color:inherit}:focus-visible{outline:4px solid var(--sun);outline-offset:2px}.muted{color:var(--muted);font-size:.92rem}.mt{margin-top:14px}.mt-lg{margin-top:26px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.grow{flex:1}.center{text-align:center}.bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(1200px 700px at 30% 20%,#2f4a80,var(--ink) 65%);background-size:cover;background-position:center}.bg.has-l{background-image:var(--bg-l)}@media (orientation: portrait){.bg.has-p{background-image:var(--bg-p)}}.screen{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}.topbar,.page,.subject-tabs,.lobby{position:relative;z-index:1}.topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0}.brand img{width:40px;height:40px}.brand b{font-family:var(--display);font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand small{display:block;font-size:.75rem;opacity:.85;font-weight:600}.nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.sticker{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}.sticker.tight{padding:12px 14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:12px 18px;min-height:48px;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .08s ease,box-shadow .08s ease}.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.btn.sky{background:var(--sky);color:#fff}.btn.sun{background:var(--sun)}.btn.mint{background:var(--mint)}.btn.coral{background:var(--coral);color:#fff}.btn.ghost{background:#fffdf7eb}.btn.sm{min-height:40px;padding:8px 14px;font-size:.95rem}.btn.lg{min-height:60px;padding:16px 28px;font-size:1.3rem}.btn.block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.press{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.lobby{flex:1;position:relative}.lobby-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}.big-btn{width:min(52vw,260px);height:min(52vw,260px);border-radius:50%;background:var(--sun);border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,6vw,2.6rem);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;text-decoration:none}.big-btn small{font-family:var(--body);font-weight:700;font-size:.95rem}.big-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}.lobby-bl,.lobby-br{position:absolute;bottom:max(22px,env(safe-area-inset-bottom))}.lobby-bl{left:18px}.lobby-br{right:18px}.subject-tabs{display:flex;gap:10px;padding:6px 16px 12px;overflow-x:auto}.subject-tab{flex:1 0 auto;min-width:200px;text-decoration:none}.subject-tab .sticker{padding:12px 16px;display:flex;align-items:center;gap:12px}.letter{width:44px;height:44px;border-radius:12px;border:3px solid var(--ink);background:var(--sun);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;flex:none}.letter.b{background:var(--mint)}.chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:6px 12px;font-weight:800;font-size:.9rem;box-shadow:var(--shadow-sm)}.page{width:min(100% - 24px,760px);margin:8px auto 40px}.page.narrow{max-width:520px}.stack{display:grid;gap:14px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media (max-width: 560px){.grid3{grid-template-columns:1fr 1fr}.grid2.stack-sm{grid-template-columns:1fr}}label.f{display:grid;gap:6px;font-size:.92rem;font-weight:800}.input,select.input{width:100%;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:11px 12px;min-height:48px;font-weight:600}.help{font-size:.82rem;color:var(--muted);font-weight:600}.alert{border:3px solid var(--ink);border-radius:12px;padding:12px 14px;font-weight:700}.alert.err{background:#ffe3de}.alert.ok{background:#d8f7ea}.alert.info{background:#dbe9ff}.checkbox{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:.92rem}.checkbox input{width:22px;height:22px;margin-top:2px;flex:none}.code-box{font-family:var(--display);font-size:2.4rem;letter-spacing:.12em;background:var(--sun);border:3px solid var(--ink);border-radius:14px;padding:8px 16px;display:inline-block;box-shadow:var(--shadow-sm)}.progress{display:flex;gap:5px;margin:4px 0 12px}.progress i{flex:1;height:10px;border-radius:6px;border:2px solid var(--ink);background:var(--paper)}.progress i.ok{background:var(--mint)}.progress i.no{background:var(--coral)}.progress i.cur{background:var(--sun)}.question{font-size:1.25rem;line-height:1.45;font-weight:700}.question img{display:block;max-width:100%;max-height:300px;border-radius:12px;border:3px solid var(--ink);margin-top:12px}.options{display:grid;gap:10px;margin-top:16px}.opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px 14px;min-height:56px;cursor:pointer;font-weight:700;font-size:1.05rem;box-shadow:var(--shadow-sm);transition:transform .08s ease,box-shadow .08s ease}.opt:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.opt:disabled{cursor:default}.opt .k{width:36px;height:36px;border-radius:10px;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;flex:none;background:var(--paper-2)}.opt.right{background:#d8f7ea}.opt.right .k{background:var(--mint)}.opt.wrong{background:#ffe3de}.opt.wrong .k{background:var(--coral);color:#fff}.opt.dim{opacity:.55}.feedback{margin-top:14px;padding:14px;border-radius:14px;border:3px solid var(--ink);font-weight:700}.feedback.right{background:#d8f7ea}.feedback.wrong{background:#ffe3de}.feedback .big{font-family:var(--display);font-size:1.3rem}.pts-pop{display:inline-block;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:2px 12px;font-family:var(--display);font-weight:800}.stat{padding:14px}.stat .v{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1}.stat .l{font-size:.85rem;color:var(--muted);font-weight:700;margin-top:4px}.delta{font-size:.85rem;font-weight:800}.delta.up{color:#148b5c}.delta.down{color:#c73f2b}.rank-list{display:grid;gap:8px}.rank{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:3px solid var(--ink);border-radius:12px}.rank.me{background:#fff2c9}.rank .n{width:34px;height:34px;border-radius:10px;border:3px solid var(--ink);background:var(--paper-2);display:grid;place-items:center;font-family:var(--display);font-weight:800;flex:none}.rank.top1 .n{background:var(--sun)}.rank.top2 .n{background:#e6e6e6}.rank.top3 .n{background:#f4c39a}.rank .v{margin-left:auto;font-family:var(--display);font-weight:800;font-size:1.15rem;white-space:nowrap}.seg{display:inline-flex;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff}.seg button{border:0;background:transparent;padding:8px 12px;font-weight:800;cursor:pointer}.seg button+button{border-left:3px solid var(--ink)}.seg button.on{background:var(--sky);color:#fff}.bars{display:flex;align-items:flex-end;gap:4px;height:70px}.bars i{flex:1;background:var(--sky);border:2px solid var(--ink);border-radius:6px 6px 3px 3px;min-height:4px}.level-badge{display:inline-flex;align-items:center;gap:8px;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:6px 14px;font-family:var(--display);font-weight:800;box-shadow:var(--shadow-sm)}.timer{font-family:var(--display);font-weight:800;font-size:1.3rem}.timer.low{color:var(--coral)}@media (prefers-reduced-motion: reduce){*{transition:none!important}}