*{box-sizing:border-box}body{margin:0;min-height:100dvh;font-family:system-ui,-apple-system,sans-serif;color:#1a2a4a;background:linear-gradient(165deg,#d6e8ff,#ffe8f4 45%,#fff6d6);padding:12px;padding-bottom:env(safe-area-inset-bottom);-webkit-tap-highlight-color:transparent;transition:background .35s ease} body.grade-1{background:linear-gradient(165deg,#c8e4ff,#e8f4ff 40%,#b8d9f8)}body.grade-2{background:linear-gradient(165deg,#c8f5e0,#e6fff2 40%,#a8e8c8)}body.grade-3{background:linear-gradient(165deg,#e4d4ff,#f3ebff 40%,#d0b8f5)}body.grade-4{background:linear-gradient(165deg,#ffe0c8,#fff0e4 40%,#ffc8a0)}body.grade-5{background:linear-gradient(165deg,#c0f0f0,#e0fafa 40%,#90e0e0)}body.grade-6{background:linear-gradient(165deg,#ffd0dc,#ffe8f0 40%,#ffc0a8)}body.grade-adult{background:linear-gradient(165deg,#1a2238,#2a3550 45%,#3d2a4a);color:#e8eef8}body.grade-adult .card{background:#243044;color:#e8eef8;box-shadow:0 12px 40px rgba(0,0,0,.35)}body.grade-adult .howto,.grade-adult .hint,.grade-adult .loadmsg,.grade-adult .cheer{color:#a8b8d8}body.grade-adult .steps li{background:#2e3d58;color:#e8eef8}body.grade-adult .grade{background:#2a3550;border-color:#4a5a78;color:#e8eef8;box-shadow:0 3px 0 #1a2238}body.grade-adult .icon{background:#2a3550;color:#e8eef8}body.grade-adult .pill{background:#3a4a68;color:#9ec5ff}body.grade-adult .choice{background:#2e3d58;border-color:#4a5a78;color:#e8eef8;box-shadow:0 3px 0 #1a2238}body.grade-adult .choice.picked{border-color:#7aa6ff;background:#354868}body.grade-adult h1,body.grade-adult h2,.grade-adult .q{color:#f0f4ff}body.grade-adult .cat{color:#ff9ec8}body.grade-adult .count{color:#7aa6ff}body.grade-adult .bar{background:#1a2238}body.grade-adult .ans.ok{background:#1e3d32;border-color:#3ecf8e;color:#e8fff4}body.grade-adult .ans.ok .ansb{color:#7dffb5}body.grade-adult .ans.miss{background:#3a2a28;border-color:#e8a070;color:#ffe8dc}body.grade-adult .ans.miss .ansb{color:#ffb090}body.grade-adult .ans.miss .cheer{color:#ffc4a0}.wrap{max-width:520px;margin:0 auto}.top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}h1{margin:0;font-size:1.4rem}.icon{border:0;background:#fff;border-radius:999px;padding:10px 14px;font-weight:700;min-height:44px}.icon[aria-pressed="true"]{opacity:.6;text-decoration:line-through}.card{background:#fff;border-radius:24px;padding:22px 18px;box-shadow:0 12px 40px rgba(60,90,160,.18);text-align:center}.howto{color:#5a6a8a;font-weight:600}.steps{list-style:none;padding:0;margin:16px 0 24px;text-align:left}.steps li{background:#f3f7ff;border-radius:14px;padding:12px 14px;margin:8px 0;font-weight:600}.btn{appearance:none;border:0;border-radius:999px;background:linear-gradient(180deg,#7aa6ff,#5b8def);color:#fff;font-weight:800;font-size:1.2rem;padding:16px 28px;min-height:56px;width:100%;cursor:pointer;box-shadow:0 6px 0 #3d6fd4}.btn:active{transform:translateY(3px);box-shadow:0 3px 0 #3d6fd4}.btn:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:0 6px 0 #3d6fd4}.btn-sec{background:#fff4d8;color:#8a5a00;box-shadow:0 4px 0 #e6c46a;margin-top:10px;font-size:1rem}.hidden{display:none!important}.pill{display:inline-block;background:#e8f0ff;color:#3d6fd4;font-weight:800;font-size:.85rem;padding:6px 12px;border-radius:999px;margin:4px}.cat{color:#ff7eb3;font-weight:800;text-transform:uppercase;font-size:.85rem}.q{font-size:clamp(1.35rem,5.5vw,1.9rem);line-height:1.25;margin:12px 0 16px}.count{font-size:clamp(2.8rem,16vw,4.5rem);font-weight:900;color:#5b8def;line-height:1}.bar{height:14px;background:#e8eef8;border-radius:999px;overflow:hidden;margin:10px auto;max-width:320px}.fill{height:100%;width:100%;background:linear-gradient(90deg,#ffd166,#ff7eb3,#5b8def);transition:width .2s linear} .qfade{transition:opacity .4s ease,filter .4s ease,transform .4s ease}.qfade.is-out{opacity:0;filter:saturate(.55) brightness(.94);transform:scale(.985);pointer-events:none} .play-stack{position:relative;min-height:220px;margin:4px 0 8px}.play-stack .timer-slot{transition:opacity .35s ease,transform .35s ease}.play-stack.revealed .timer-slot{opacity:0;transform:scale(.96);pointer-events:none;position:absolute;inset:0 auto auto 0;width:100%}.choices{display:grid;gap:10px;margin:14px 0 8px;text-align:left;transition:opacity .35s ease,filter .35s ease}.play-stack.revealed .choices{opacity:.35;filter:saturate(.7);pointer-events:none}.choice{appearance:none;border:3px solid #d6e4ff;background:#f7faff;border-radius:18px;padding:14px 16px;min-height:56px;font-size:1.15rem;font-weight:800;color:#1a2a4a;cursor:pointer;text-align:left;width:100%;box-shadow:0 3px 0 #c5d6f5;transition:opacity .35s ease,transform .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease}.choice:disabled{cursor:default}.choice.picked{border-color:#5b8def;background:#e8f0ff}.choice.correct{border-color:#3ecf8e;background:#e9fff4;color:#146b45;opacity:1!important;transform:scale(1.02);box-shadow:0 4px 0 #3ecf8e,0 0 0 3px rgba(62,207,142,.25);position:relative;z-index:1;padding-right:48px}.choice.wrong{border-color:#ff9bb8;background:#fff0f5;opacity:.72;transform:scale(.98);position:relative;padding-right:48px}.choice.fade-out{opacity:.3;transform:scale(.97)}.choice.correct::after,.choice.wrong::after{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:clamp(1.35rem,6vw,1.75rem);line-height:1;pointer-events:none}.choice.correct::after{content:"✅"}.choice.wrong::after{content:"❌"} .ans{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) scale(.94);background:#e9fff4;border:3px solid #3ecf8e;border-radius:18px;padding:16px;margin:0;opacity:0;pointer-events:none;visibility:hidden;z-index:2;box-shadow:0 10px 28px rgba(20,107,69,.18);transition:opacity .38s ease,transform .38s ease,visibility .38s,background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease}.ans.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) scale(1)}.ans.ok{background:#e9fff4;border-color:#3ecf8e;color:#146b45;box-shadow:0 10px 28px rgba(20,107,69,.18)}.ans.ok .ansb{color:#146b45}.ans.miss{background:#fff3ee;border-color:#f0a07a;color:#8a3a28;box-shadow:0 10px 28px rgba(180,70,50,.16)}.ans.miss .ansb{color:#b04a32}.ans.miss .cheer{color:#c45c2a}.ans-mark{font-size:clamp(2.6rem,14vw,3.6rem);line-height:1;margin:0 0 4px;min-height:1.1em;font-weight:900;user-select:none}.ans.ok .ans-mark{filter:drop-shadow(0 2px 0 rgba(20,107,69,.15))}.ans.miss .ans-mark{filter:drop-shadow(0 2px 0 rgba(180,70,50,.12))}.ansb{font-size:clamp(1.4rem,5.5vw,2rem);font-weight:900;color:#146b45;margin:6px 0}.cheer{color:#3d6fd4;font-weight:700} .actions{min-height:132px;margin-top:8px;display:flex;flex-direction:column;justify-content:flex-start}.actions .btn{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease,visibility .35s;margin-top:0}.actions .btn-sec{margin-top:10px}.actions.ready .btn{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hint{color:#5a6a8a;font-size:.9rem;margin-top:14px}.letter{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#5b8def;color:#fff;font-size:.9rem;margin-right:10px}.grades{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 18px}.grade{appearance:none;border:3px solid #d6e4ff;background:#f7faff;border-radius:16px;padding:12px 8px;min-height:52px;font-size:1rem;font-weight:800;color:#1a2a4a;cursor:pointer;box-shadow:0 3px 0 #c5d6f5}.grade.selected{border-color:#5b8def;background:#e8f0ff;color:#3d6fd4} .grade[data-grade="1"].selected{border-color:#5a9de0;background:#d6ecff;color:#2a6fb0;box-shadow:0 3px 0 #8bb8e8}.grade[data-grade="2"].selected{border-color:#3ecf8e;background:#d8f8e8;color:#1a7a50;box-shadow:0 3px 0 #7ad4a8}.grade[data-grade="3"].selected{border-color:#9b7ed8;background:#ebe0ff;color:#5a3a9a;box-shadow:0 3px 0 #b8a0e0}.grade[data-grade="4"].selected{border-color:#f0a060;background:#ffe8d4;color:#a05020;box-shadow:0 3px 0 #e8b888}.grade[data-grade="5"].selected{border-color:#40b8b8;background:#d4f5f5;color:#1a7070;box-shadow:0 3px 0 #80d0d0}.grade[data-grade="6"].selected{border-color:#f08098;background:#ffe0e8;color:#a03050;box-shadow:0 3px 0 #e8a0b0}.grade[data-grade="adult"].selected{border-color:#9ec5ff;background:#354868;color:#cfe2ff;box-shadow:0 3px 0 #1a2238}.grade.adult-wide{grid-column:1/-1}.extreme-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f3f7ff;border-radius:16px;padding:12px 14px;margin:0 0 14px;text-align:left}body.grade-adult .extreme-row{background:#2e3d58}.extreme-row .ext-label{font-weight:800;font-size:1rem;line-height:1.25}.extreme-row .ext-sub{display:block;font-weight:600;font-size:.82rem;color:#5a6a8a;margin-top:2px}body.grade-adult .extreme-row .ext-sub{color:#a8b8d8}.switch{position:relative;width:56px;height:32px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#c5d6f5;border-radius:999px;transition:.2s}.slider:before{position:absolute;content:"";height:24px;width:24px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.2)}.switch input:checked+.slider{background:#5b8def}.switch input:checked+.slider:before{transform:translateX(24px)}body.grade-adult .slider{background:#4a5a78}body.grade-adult .switch input:checked+.slider{background:#7aa6ff}.loadmsg{color:#5b8def;font-weight:700;min-height:1.4em;margin:8px 0 0}.back-btn{appearance:none;border:0;background:#fff;border-radius:999px;padding:10px 16px;font-weight:800;min-height:44px;min-width:44px;cursor:pointer;box-shadow:0 2px 0 #c5d6f5;color:#3d6fd4;font-size:1rem}body.grade-adult .back-btn{background:#2a3550;color:#cfe2ff;box-shadow:0 2px 0 #1a2238}.top-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.back-btn.hidden{display:none!important}