:root{--ink: #2b2140;--muted: #6f6488;--card: #fff;--brand: #7c5cff;--brand-dark: #5b3fe0;--good: #22c55e;--ok: #f59e0b;--weak: #ef4444;font-family:"Baloo 2",Comic Sans MS,system-ui,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#a7dcff,#d9f1ff 45%,#fff4dc) fixed}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-user-select:none;user-select:none}h1,h2{margin:.2em 0;line-height:1.2}.sky{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}.cloud{position:absolute;width:140px;height:44px;border-radius:44px;background:#fff;opacity:.9;animation:drift linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud:before{width:60px;height:60px;left:22px;top:-30px}.cloud:after{width:46px;height:46px;left:70px;top:-20px}.c1{top:9%;animation-duration:60s;animation-delay:-10s}.c2{top:28%;scale:.7;animation-duration:80s;animation-delay:-45s;opacity:.7}.c3{top:55%;scale:.9;animation-duration:95s;animation-delay:-70s;opacity:.6}.twinkle{position:absolute;color:#fff;font-size:1.4rem;text-shadow:0 0 8px #fff8;animation:twinkle 2.4s ease-in-out infinite}.t0{top:6%;left:12%}.t1{top:16%;left:82%;animation-delay:.6s}.t2{top:40%;left:6%;animation-delay:1.2s}.t3{top:46%;left:92%;animation-delay:1.8s}.t4{top:70%;left:50%;animation-delay:.9s}.hill{position:absolute;bottom:-120px;border-radius:50%}.h1{left:-20%;width:90%;height:240px;background:#a7e3a1}.h2{right:-25%;width:100%;height:210px;background:#8fd98a}.app{max-width:960px;margin:0 auto;padding:10px 16px 120px}.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.title{font-size:clamp(2.4rem,11vw,3.6rem);color:#fff;margin-top:24px;text-shadow:0 4px 0 var(--brand),0 8px 18px #5b3fe055;letter-spacing:1px}.sub{color:var(--muted);font-size:1.1rem;margin:0 0 12px}.muted{color:var(--muted);font-size:.95rem}.page-title{--c: var(--brand);display:table;font-size:clamp(1.5rem,6.5vw,2.2rem);color:#fff;background:var(--c);padding:2px 22px 4px;border-radius:999px;margin:4px 0 16px;box-shadow:0 5px color-mix(in srgb,var(--c) 65%,black);text-shadow:0 2px 0 #0000002a}.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 -8px 14px;padding:8px;border-radius:0 0 22px 22px;background:#ffffffb8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.top-right{display:flex;align-items:center;gap:6px}.logo{font-size:1.45rem;font-weight:800;color:var(--brand);white-space:nowrap}@media (max-width: 440px){.logo{font-size:1.15rem}.round-btn{width:36px;height:36px;font-size:1.1rem}.round-btn.me{font-size:1.3rem}.points{padding:3px 10px}.top-right{gap:4px}}@media (max-width: 360px){.logo span{display:none}}.points{background:linear-gradient(180deg,#ffd84d,#ffb800);color:#6b3d00;padding:4px 14px;border-radius:999px;font-weight:800;box-shadow:0 3px #d98e00;animation:pop .4s;white-space:nowrap}.round-btn{width:42px;height:42px;display:grid;place-items:center;font-size:1.3rem;border-radius:50%;background:#fff;box-shadow:0 3px #0000001a;transition:transform .15s}.round-btn:hover{transform:scale(1.1) rotate(-6deg)}.round-btn:active{transform:scale(.9)}.round-btn.me{background:#f1edff;font-size:1.5rem}.card{background:var(--card);border-radius:26px;padding:20px;box-shadow:0 6px #0000000f,0 14px 30px #3b2a8a14;width:100%;max-width:640px;margin:0 auto 16px}.btn{background:var(--brand);color:#fff;font-weight:800;padding:12px 24px;border-radius:18px;box-shadow:0 5px 0 var(--brand-dark);transition:transform .1s,box-shadow .1s;font-size:1.1rem}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--brand-dark)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.big{width:100%;font-size:1.35rem;margin-top:12px}.btn.alt{background:#fff;color:var(--ink);box-shadow:0 5px #e2dcf3;border:2px solid #eee8fb}.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}.back{font-weight:800;color:var(--ink);padding:6px 14px;margin-bottom:6px;font-size:1rem;background:#ffffffc4;border-radius:999px;box-shadow:0 3px #0000000f}input{font:inherit;font-size:1.2rem;width:100%;padding:12px 16px;border:3px solid #e7e0ff;border-radius:18px;outline:none;text-align:center}input:focus{border-color:var(--brand);box-shadow:0 0 0 4px #7c5cff22}.avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.av{font-size:2.2rem;aspect-ratio:1;border-radius:50%;background:#f7f4ff;border:3px solid transparent;transition:transform .15s}.av.on{border-color:var(--brand);background:#ede8ff;transform:scale(1.12);animation:wiggle .5s}.players{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.player-btn{display:flex;flex-direction:column;align-items:center;padding:10px 16px;border-radius:20px;background:#f7f4ff;min-width:100px;box-shadow:0 4px #e3dcff;transition:transform .15s}.player-btn:hover{transform:translateY(-4px) rotate(-3deg)}.avatar{font-size:2.6rem}.mascot{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto 12px;width:100%;text-align:left}.owl{font-size:3.4rem;line-height:1;filter:drop-shadow(0 4px 0 #0000001a);animation:sway 2.6s ease-in-out infinite;transform-origin:bottom center}.mascot.happy .owl{animation:hop .6s ease 2}.mascot.sad .owl{animation:shake .5s}.bubble{position:relative;flex:1;background:#fff;padding:10px 16px;border-radius:20px;font-weight:700;font-size:1.1rem;box-shadow:0 4px #0000000d}.bubble:before{content:"";position:absolute;left:-10px;top:50%;margin-top:-10px;border:10px solid transparent;border-left:0;border-right-color:#fff}.mascot.happy .bubble{background:#dcfce7;color:#166534}.mascot.happy .bubble:before{border-right-color:#dcfce7}.mascot.sad .bubble{background:#ffe4e6;color:#9f1239}.mascot.sad .bubble:before{border-right-color:#ffe4e6}.hero{background:#ffffffd9;border-radius:26px;padding:14px 16px;margin-bottom:14px;box-shadow:0 6px #0000000a}.hero .mascot{margin-bottom:10px}.level{display:flex;align-items:center;gap:12px}.level>div{flex:1}.level-icon{font-size:2rem;width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#fff3b0,#ffd84d);box-shadow:0 3px #e0a800}.level b{font-size:1.15rem}.level small{color:var(--muted)}.level-bar{height:12px;border-radius:99px;background:#eee9fb;overflow:hidden;margin:2px 0}.level-bar>div{height:100%;border-radius:99px;background:linear-gradient(90deg,#ffd84d,#ff9f1c);transition:width .8s ease}.tip{display:block;width:100%;text-align:left;background:#fff3c4;border:3px dashed #f5b400;padding:10px 16px;border-radius:18px;margin-bottom:14px;font-size:1.05rem;animation:nudge 3s ease-in-out infinite}.exam-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;margin-bottom:18px;border-radius:26px;color:#fff;background:linear-gradient(120deg,#7c5cff,#ec4899);box-shadow:0 6px #a3249a,0 12px 24px #7c5cff44;transition:transform .15s}.exam-banner:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#ffffff55,transparent);transform:skew(-20deg);animation:shine 3.5s ease-in-out infinite}.exam-banner:hover{transform:translateY(-3px)}.exam-banner:active{transform:translateY(4px);box-shadow:0 2px #a3249a}.exam-banner b{font-size:1.5rem}.exam-banner small{opacity:.95;font-size:.98rem}.exam-banner .tile-icon{font-size:2.8rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.tile{--c: var(--brand);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px 12px;border-radius:26px;color:#fff;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 72%,white),var(--c));box-shadow:0 6px color-mix(in srgb,var(--c) 65%,black),0 12px 22px #0000001a;transition:transform .15s,box-shadow .15s}.tile:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:#fff2;top:-50px;right:-40px}.tile:hover{transform:translateY(-4px) rotate(-1deg)}.tile:active{transform:translateY(5px);box-shadow:0 1px color-mix(in srgb,var(--c) 65%,black)}.tile b{font-size:1.2rem;line-height:1.15;text-shadow:0 2px 0 #0000002a}.tile small{opacity:.92;font-weight:600}.tile-icon{font-size:3rem;display:inline-block;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 4px 0 #0000001f)}.tile:nth-child(2n) .tile-icon{animation-delay:-1.5s}.mini-stars{font-size:1.3rem;letter-spacing:2px;color:#ffffff59;line-height:1;margin-top:4px}.mini-stars .on{color:#ffe14d;text-shadow:0 2px 0 #c98a00}.bar{position:relative;width:100%;height:14px;border-radius:99px;background:#eee;overflow:hidden;margin-top:6px}.bar>div{height:100%;border-radius:99px;transition:width .6s ease}.bar span{position:absolute;top:0;right:0;bottom:0;left:0;font-size:.7rem;line-height:14px;font-weight:800;text-align:center;color:#333}.bar.good>div{background:var(--good)}.bar.ok>div{background:var(--ok)}.bar.weak>div{background:var(--weak)}.quiz{max-width:640px;margin:0 auto}.quiz-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.quiz-head .back{margin:0}.chip{background:var(--brand);color:#fff;padding:4px 14px;border-radius:999px;font-weight:800;white-space:nowrap}.chip.fire{background:linear-gradient(180deg,#fb923c,#ea580c);animation:pulse .7s infinite alternate}.chip.timer{background:#0ea5e9;font-variant-numeric:tabular-nums}.chip.timer.low{background:var(--weak);animation:pulse .5s infinite alternate}.dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px 0 12px}.dots i{width:14px;height:14px;border-radius:50%;background:#ffffffb0;box-shadow:inset 0 -2px #0000001a;transition:all .3s}.dots i.now{background:#fff;transform:scale(1.35);box-shadow:0 0 0 3px var(--brand)}.dots i.ok{background:var(--good)}.dots i.no{background:var(--weak)}.dots i.done{background:var(--brand)}.question{position:relative}.qnum{display:inline-block;color:#fff;font-weight:800;padding:2px 12px;border-radius:999px;font-size:.9rem}.question h2{font-size:clamp(1.3rem,5.5vw,1.7rem);margin-top:8px}.speak{font-size:1.2rem;width:40px;height:40px;border-radius:50%;background:#f1edff;vertical-align:middle;transition:transform .15s}.speak:active{transform:scale(.85)}.pic{font-size:clamp(4.5rem,22vw,6.5rem);text-align:center;line-height:1.3;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 6px 0 #0000001a)}.arabic{font-family:Noto Naskh Arabic,serif;font-size:clamp(3.5rem,16vw,5.5rem);text-align:center;color:var(--brand);line-height:1.6;background:#f7f4ff;border:3px dashed #ddd3ff;border-radius:22px;margin:8px 0}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;margin-top:14px}.opt{--o: var(--brand);display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:20px;font-size:1.15rem;font-weight:700;background:color-mix(in srgb,var(--o) 12%,white);border:3px solid color-mix(in srgb,var(--o) 35%,white);box-shadow:0 5px color-mix(in srgb,var(--o) 45%,white);transition:transform .1s,box-shadow .1s,background .2s}.opt:hover{transform:translateY(-2px)}.opt:active{transform:translateY(4px);box-shadow:0 1px color-mix(in srgb,var(--o) 45%,white)}.letter{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;background:var(--o);color:#fff;font-weight:800;transform:rotate(-6deg)}.opt.right{--o: var(--good);background:var(--good);color:#fff;border-color:#16a34a;box-shadow:0 5px #15803d;animation:pop .4s}.opt.right .letter{background:#fff;color:var(--good)}.opt.wrong{--o: var(--weak);background:var(--weak);color:#fff;border-color:#dc2626;box-shadow:0 5px #b91c1c;animation:shake .4s}.opt.wrong .letter{background:#fff;color:var(--weak)}.opt.dim{opacity:.4;transform:scale(.97)}.opt.chosen{--o: var(--brand);background:#ede9fe;border-color:var(--brand)}.opt.ar{font-family:Noto Naskh Arabic,serif;font-size:1.7rem}.opt.ar .letter{font-family:"Baloo 2",sans-serif;font-size:1rem}.plus{position:absolute;right:18px;top:10px;font-weight:800;font-size:1.6rem;color:#f59e0b;text-shadow:0 2px 0 #fff;animation:floatUp 1s ease-out forwards;pointer-events:none}.ar-answer{font-family:Noto Naskh Arabic,serif;font-size:1.5rem}.counts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0}.count-btn{--c: var(--brand);display:flex;flex-direction:column;align-items:center;min-width:78px;padding:10px 8px;border-radius:22px;background:#fff;border:3px solid var(--c);box-shadow:0 5px 0 var(--c);transition:transform .1s}.count-btn b{font-size:2rem;color:var(--c);line-height:1}.count-btn small{color:var(--muted)}.count-btn:hover{transform:translateY(-3px) rotate(-3deg)}.count-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--c)}.modes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0 4px}.mode{padding:10px 18px;border-radius:999px;font-weight:800;font-size:1.05rem;background:#f1edff;border:3px solid transparent}.mode.on{background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-dark)}.drawpad{margin-top:12px}.draw-hint{text-align:center;color:var(--muted);font-weight:700;margin:0 0 8px}.pad{position:relative;height:clamp(220px,50vw,300px);border-radius:22px;border:4px dashed #d8cffc;overflow:hidden;background:#fffdf5 repeating-linear-gradient(transparent 0 49px,#e8f0ff 49px,#e8f0ff 51px)}.pad canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}.pad canvas:last-child{cursor:crosshair}.result{position:relative;z-index:1}.big-emoji{font-size:5.5rem;animation:popBig .7s ease}.stars{font-size:3.4rem;letter-spacing:6px;color:#e5e1ee}.stars span{display:inline-block}.stars .on{color:#facc15;text-shadow:0 4px 0 #ca8a04;animation:starIn .5s ease backwards}.earned{display:inline-block;margin:0 auto 8px;padding:4px 16px;border-radius:999px;font-weight:800;font-size:1.3rem;background:linear-gradient(180deg,#ffd84d,#ffb800);color:#6b3d00;box-shadow:0 3px #d98e00;animation:pop .5s 1s backwards}.breakdown{text-align:left;margin-top:8px}.breakdown h2{font-size:1.2rem;margin-top:16px}.breakdown .sub-stat{padding-left:0}.review{padding:8px 12px;border-radius:14px;background:#faf8ff;margin-bottom:6px}.review div{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}.arabic-sm{font-family:Noto Naskh Arabic,serif;font-size:1.4rem;color:var(--brand)}.bad{color:#b91c1c;font-weight:700}.goodtxt{color:#15803d;font-weight:700}.rank{list-style:none;padding:0;margin:0}.rank li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;cursor:pointer;font-size:1.1rem}.rank li b{margin-left:auto}.rank li.on{background:#f1edff}.rank li:hover{background:#faf8ff}.medal{width:32px;text-align:center;font-size:1.4rem}.weak{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff1f2;padding:12px;border-radius:16px;margin-bottom:12px}.weak-chip{background:#fff;border:2px solid var(--weak);color:#b91c1c;padding:4px 12px;border-radius:99px;font-weight:700}.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.85rem;margin-bottom:8px}.legend span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}.legend .good:before{background:var(--good)}.legend .ok:before{background:var(--ok)}.legend .weak-l:before{background:var(--weak)}.cat-stat{border-top:2px solid #f3f0fa;padding:8px 0}.cat-stat summary,.sub-stat{display:grid;grid-template-columns:1fr auto minmax(80px,35%);gap:10px;align-items:center}.cat-stat summary{font-weight:800;font-size:1.1rem;cursor:pointer;list-style:none}.cat-stat summary .bar,.sub-stat .bar{margin:0}.sub-stat{padding:4px 0 4px 24px}.exams{width:100%;border-collapse:collapse}.exams th,.exams td{padding:6px 4px;text-align:left;border-bottom:1px solid #f3f0fa}.exams td:nth-child(3){width:40%}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:2}.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 2.6s linear forwards}.screen{animation:fadeUp .3s ease}.pop{animation:pop .45s ease backwards}.grid .pop:nth-child(2){animation-delay:.06s}.grid .pop:nth-child(3){animation-delay:.12s}.grid .pop:nth-child(4){animation-delay:.18s}.grid .pop:nth-child(5){animation-delay:.24s}.grid .pop:nth-child(n+6){animation-delay:.3s}.slide{animation:slideIn .35s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}}@keyframes slideIn{0%{opacity:0;transform:translate(40px) rotate(2deg)}}@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}@keyframes popBig{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(10deg)}to{transform:scale(1)}}@keyframes starIn{0%{transform:scale(0) rotate(-120deg);opacity:0}70%{transform:scale(1.4) rotate(15deg)}to{transform:scale(1);opacity:1}}@keyframes shake{25%{transform:translate(-8px)}50%{transform:translate(8px)}75%{transform:translate(-4px)}}@keyframes wiggle{25%{transform:scale(1.12) rotate(-10deg)}75%{transform:scale(1.12) rotate(10deg)}}@keyframes hop{40%{transform:translateY(-18px) rotate(-8deg)}70%{transform:translateY(0) scale(1.1,.9)}}@keyframes sway{50%{transform:rotate(-6deg)}}@keyframes float{50%{transform:translateY(-6px)}}@keyframes floatUp{0%{opacity:0;transform:translateY(10px) scale(.6)}30%{opacity:1;transform:translateY(0) scale(1.1)}to{opacity:0;transform:translateY(-40px)}}@keyframes pulse{to{transform:scale(1.1)}}@keyframes nudge{0%,90%,to{transform:none}93%{transform:rotate(-1.5deg)}96%{transform:rotate(1.5deg)}}@keyframes shine{0%,60%{left:-60%}to{left:130%}}@keyframes drift{0%{left:-180px}to{left:110%}}@keyframes twinkle{50%{opacity:.2;transform:scale(.6)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.pic.many{font-size:clamp(2.2rem,11vw,3.2rem);letter-spacing:2px}.ar-item{font-family:Noto Naskh Arabic,serif;font-size:1.5em;line-height:1.4;direction:rtl}.hint{text-align:center;color:#7a7192;font-size:.95rem;margin:8px 0 0}.match{position:relative;display:flex;justify-content:space-between;gap:22%;margin-top:12px}.match .col{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:10px;position:relative;z-index:1}.node{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:64px;padding:6px 10px;font-size:1.9rem;font-weight:800;color:var(--ink);background:#fff;border:3px solid #e6defa;border-radius:18px;box-shadow:0 4px #e6defa;transition:transform .1s}.node>span:not(.dot){flex:1;text-align:center}.node .dot{width:14px;height:14px;flex:none;border-radius:50%;background:var(--ink)}.node.sel{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent);transform:scale(1.04)}.node.linked{background:#f7f4ff}.match .col+.col .node{font-size:1.15rem}.node span{white-space:nowrap}.lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.lines line{stroke:var(--brand);stroke-width:5;stroke-linecap:round}.lines line.ok{stroke:var(--good)}.lines line.no{stroke:var(--weak);stroke-dasharray:8 7}.taps{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:14px}.tap{position:relative;min-width:96px;min-height:96px;padding:10px 18px;font-size:2.6rem;font-weight:800;color:var(--ink);background:#fff;border:3px solid #e6defa;border-radius:20px;box-shadow:0 5px #e6defa;transition:transform .1s}.tap:active{transform:translateY(3px)}.mark-circle .tap.on{border-color:transparent;box-shadow:0 0 0 5px #ef4444,0 5px #e6defa;border-radius:50%}.mark-colour .tap:not(.on){filter:grayscale(1);opacity:.75}.mark-colour .tap.on{background:#fde68a;border-color:#f59e0b;box-shadow:0 5px #f59e0b}.mark-tick .tap.on:after{content:"✓";position:absolute;top:-12px;right:-10px;width:38px;height:38px;display:grid;place-items:center;font-size:1.6rem;color:#fff;background:var(--good);border-radius:50%;box-shadow:0 3px #15803d;animation:pop .3s}.tap.right{background:color-mix(in srgb,var(--good) 22%,white);border-color:var(--good);filter:none;opacity:1}.tap.wrong{background:color-mix(in srgb,var(--weak) 22%,white);border-color:var(--weak);animation:shake .4s}.fill{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:14px 0}.car{display:flex;gap:4px;padding:6px;background:#f7f4ff;border:3px solid #e6defa;border-radius:14px}.cell{width:52px;height:60px;display:grid;place-items:center;font-size:2rem;font-weight:800;background:#fff;border:2px solid #e6defa;border-radius:10px}.cell.blank{border:3px dashed var(--brand);color:var(--brand)}.cell.cur{animation:pulse 1s ease-in-out infinite;background:#ede7ff}.cell.right{background:var(--good);color:#fff;border-style:solid;border-color:var(--good)}.cell.wrong{background:var(--weak);color:#fff;border-style:solid;border-color:var(--weak)}.keypad{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.keypad.digits{grid-template-columns:repeat(6,1fr)}.keypad button{padding:10px 0;font-size:1.4rem;font-weight:800;color:var(--ink);background:#fff;border:2px solid #e6defa;border-radius:12px;box-shadow:0 3px #e6defa}.keypad button:active{transform:translateY(2px);box-shadow:none}.keypad .del{background:#fee2e2;border-color:#fecaca}@keyframes pulse{50%{transform:scale(1.08)}}@media (max-width: 440px){.node{font-size:1.6rem;min-height:56px}.cell{width:42px;height:52px;font-size:1.7rem}.tap{min-width:84px;min-height:84px;font-size:2.2rem}}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#2b214022;cursor:default}.sound-menu{position:fixed;z-index:41;top:calc(env(safe-area-inset-top,0px) + 72px);right:16px;width:min(320px,calc(100vw - 32px));display:grid;gap:10px;padding:16px}.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;cursor:pointer}.switch small{display:block;font-weight:600;font-size:.8rem;color:#7a7192}.switch input{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:none;width:54px;height:32px;border-radius:999px;background:#d8d2e8;position:relative;transition:background .2s;cursor:pointer}.switch input:after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0003;transition:transform .2s}.switch input:checked{background:var(--good)}.switch input:checked:after{transform:translate(22px)}.switch input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}.guide summary{font-weight:800;cursor:pointer;font-size:1.1rem}.guide li{margin:6px 0;line-height:1.4}.flash{--c: var(--brand);text-align:center}.flash-letter{font-size:clamp(4.5rem,24vw,7rem);font-weight:800;line-height:1;color:var(--c);text-shadow:0 5px 0 #0000001a;margin-top:10px}.flash-letter span{font-size:1.6rem;vertical-align:middle}.flash-suku{font-size:1.7rem;font-weight:800;letter-spacing:4px;color:var(--ink)}.flash-word{font-size:2.2rem;font-weight:700}.flash-word b{color:var(--c)}.flash-gaya{background:#fff7e6;border-radius:16px;padding:8px 12px;font-size:1.1rem;margin:8px 0 0}.flash-strip{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:640px;margin:0 auto}.flash-strip button{width:40px;height:40px;border-radius:12px;background:#fff;font-weight:800;font-size:1.2rem;box-shadow:0 3px #0000001a}.flash-strip button.on{background:var(--brand);color:#fff}