@font-face{font-family:'Baloo';src:url('fonts/baloo-arabic.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Baloo';src:url('fonts/baloo-latin.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--coral:#FF6B6B;--coral2:#FF8A80;--pink:#FF9EC4;--sun:#FFD93D;--sun2:#FFB72B;--mint:#3CCFA9;--mint2:#A8F0DC;--sky:#7BD3F7;--ink:#3B2346;--ink2:#6D5478;--cream:#FFF8EE;--card:#ffffff;--sh:0 10px 24px rgba(120,40,80,.16)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:'Baloo','Tajawal','Segoe UI',Tahoma,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#FFE3EC 0%,#FFF4D6 45%,#DDF8EE 100%);background-attachment:fixed;min-height:100vh;font-size:22px;line-height:1.55;overflow-x:hidden}
#app{max-width:560px;margin:0 auto;padding:10px 14px 24px;min-height:100vh}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{max-width:100%}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px}
.top .ttl{flex:1;text-align:center;font-weight:800;font-size:24px;line-height:1.3;overflow-wrap:anywhere}
.btn-ic{width:52px;height:52px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #f3c3d3,var(--sh);font-size:24px;display:flex;align-items:center;justify-content:center;flex:none}
.btn-ic.no{opacity:.35}
.back{transform:none}
.btn{display:block;width:100%;padding:14px 18px;border-radius:24px;font-size:24px;font-weight:800;margin:10px 0;background:#fff;box-shadow:0 5px 0 #e9c9d6,var(--sh);transition:transform .1s}
.btn:active,.opt:active,.st:active,.lv:active{transform:translateY(3px)}
.btn.go{background:linear-gradient(180deg,#D93A45,#B8232F);color:#fff;box-shadow:0 6px 0 #8E1A24,var(--sh)}
.btn.go2{background:linear-gradient(180deg,#128A6A,#0B6E54);color:#fff;box-shadow:0 6px 0 #064A38,var(--sh)}
.btn.ghost{background:rgba(255,255,255,.75)}
.btn.big{font-size:28px;padding:18px}
.btn.sm{font-size:20px;padding:8px 14px;width:auto;display:inline-block}
.btn.danger{color:#c0392b;font-size:20px}
.row2{display:flex;gap:10px}.row2 .btn{flex:1}
/* hero */
.hero{position:relative;border-radius:34px;overflow:hidden;min-height:330px;padding:18px;display:flex;align-items:flex-end;box-shadow:var(--sh);margin-bottom:12px}
.hero-bg{position:absolute;inset:0;background:url('img/bg_home.webp') center/cover,linear-gradient(160deg,#FF9EC4,#FFD93D)}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 35%,rgba(255,240,245,.92) 100%)}
.hero-m{position:absolute;top:6px;left:-6px;width:58%;max-width:250px;z-index:2;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));animation:bob 3s ease-in-out infinite}
.hero-t{position:relative;z-index:3;width:62%;margin-right:0}
.hero h1{margin:4px 0 0;font-size:46px;line-height:1.05;color:var(--coral);text-shadow:0 3px 0 #fff,0 6px 14px rgba(255,107,107,.35)}
.hero h1 span{display:block;font-size:24px;color:var(--ink);text-shadow:0 2px 0 #fff;margin-top:6px}
.hero .hi{font-size:22px;font-weight:800;background:#fff;display:inline-block;padding:2px 14px;border-radius:99px;box-shadow:0 3px 0 #f3c3d3;margin-bottom:14px;line-height:1.5}
.hero .sub{font-size:20px;font-weight:700;margin-top:6px;color:var(--ink2)}
.hwave{position:absolute;top:14px;right:16px;z-index:3;height:40px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 10px}
.pill{background:#fff;border-radius:99px;padding:6px 16px;font-weight:800;box-shadow:0 4px 0 #f3d38a,var(--sh);font-size:22px}
.pbtn{font-size:20px}
.sec{font-size:28px;margin:16px 4px 8px;color:var(--ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st{position:relative;border-radius:28px;padding:10px 8px 12px;text-align:center;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.08),var(--sh);overflow:hidden;min-height:196px;display:flex;flex-direction:column;align-items:center}
.st:before{content:'';position:absolute;inset:0 0 auto 0;height:62%;background:var(--bgc,#FFE0E6);border-radius:0 0 50% 50%/0 0 22% 22%}
.st-ic{position:relative;width:104px;height:104px}.st-ic img{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.15))}
.st-n{position:absolute;top:8px;right:10px;width:34px;height:34px;border-radius:50%;background:#fff;font-weight:800;font-size:20px;line-height:34px;box-shadow:0 3px 0 rgba(0,0,0,.1)}
.st-t{position:relative;font-weight:800;font-size:22px;line-height:1.25;margin-top:4px;overflow-wrap:anywhere}
.st-s{position:relative;margin-top:auto;font-size:22px}
.st-s b,.lv-s b{color:#e6dce8}.st-s b.on,.lv-s b.on{color:#FFB72B;text-shadow:0 2px 0 #E08A00}
.c1{--bgc:#FFD6DE}.c2{--bgc:#FFF0B3}.c3{--bgc:#C9F5E6}.c4{--bgc:#FFE0C7}.c5{--bgc:#D9F0FF}.c6{--bgc:#FFD6F0}.c7{--bgc:#E9E1FF}.c8{--bgc:#FFE7A8}.c9{--bgc:linear-gradient(135deg,#FFD93D,#FF9EC4)}
.c9{grid-column:1/-1;min-height:170px}
.testcard{display:flex;align-items:center;gap:12px;width:100%;text-align:right;background:linear-gradient(135deg,#FFF6C9,#FFE1EC);border-radius:28px;padding:12px 14px;margin:10px 0;box-shadow:0 6px 0 #F2C5A0,var(--sh)}
.testcard img{width:78px;height:78px;object-fit:contain;flex:none}
.testcard div{flex:1}.testcard b{display:block;font-size:25px}.testcard span{font-size:19px;color:var(--ink2);line-height:1.4;display:block}
.testcard i{font-style:normal;font-size:24px;color:var(--coral)}
.testcard.post{background:linear-gradient(135deg,#D7FBEF,#FFF3C4)}.testcard.dim{opacity:.6}
.rec{background:#fff;border-radius:22px;padding:10px 14px;margin:8px 0;box-shadow:var(--sh);font-size:22px;text-align:center}
.rec small{display:block;font-size:17px;color:var(--ink2)}
/* name */
.namebox{background:rgba(255,255,255,.85);border-radius:34px;padding:18px;text-align:center;box-shadow:var(--sh);margin-top:10px}
.nm-m{width:190px;margin:-6px auto 0;display:block;animation:bob 3s ease-in-out infinite}
.big{font-size:34px;line-height:1.2;margin:8px 0;color:var(--coral);overflow-wrap:anywhere}
.big span{display:block;font-size:24px;color:var(--ink)}
.lbl{display:block;font-size:24px;font-weight:800;margin:10px 0 6px}
.inp{width:100%;font-family:inherit;font-size:28px;text-align:center;padding:12px;border-radius:20px;border:3px solid #FFC2D1;background:#fff;color:var(--ink);outline:none}
.inp:focus{border-color:var(--coral)}
.gsel{display:flex;gap:12px;margin:14px 0}
.gbtn{flex:1;background:#fff;border-radius:22px;padding:10px;font-size:24px;font-weight:800;box-shadow:0 5px 0 #e3d3dc;border:3px solid transparent}
.gbtn span{display:block;font-size:44px}.gbtn.sel{border-color:var(--mint);background:#E6FBF4}
.err{color:#d6336c;font-weight:800;min-height:30px}
.center{text-align:center}
.big-m{width:220px;display:block;margin:0 auto;animation:bob 3s ease-in-out infinite}
.lead{font-size:24px;font-weight:700}
/* levels */
.lvhead{display:flex;align-items:center;gap:12px;background:#fff;border-radius:26px;padding:10px 14px;box-shadow:var(--sh)}
.lvhead img{width:96px;height:96px;object-fit:contain}.lvhead p{margin:0;font-size:21px;font-weight:700;line-height:1.45}
.lvs{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.lv{position:relative;width:100%;text-align:right;border-radius:26px;padding:14px 18px;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.08),var(--sh);border-right:12px solid var(--lc)}
.l1{--lc:#3CCFA9}.l2{--lc:#FFB72B}.l3{--lc:#FF6B6B}
.lv-n{font-size:28px;font-weight:800}.lv-d{font-size:19px;color:var(--ink2);line-height:1.45}.lv-s{font-size:26px}.lv-s small{font-size:19px;margin-right:10px;color:var(--ink2)}
.tag{position:absolute;top:10px;left:12px;background:var(--sun);font-style:normal;font-size:16px;font-weight:800;padding:2px 10px;border-radius:99px;box-shadow:0 3px 0 #E0A800}
.note{text-align:center;font-weight:700;font-size:19px;color:var(--ink2)}
/* game */
.prog{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;margin-bottom:8px}
.pbar{flex:1;height:16px;background:#fff;border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--sun),var(--coral));border-radius:99px;transition:width .4s}
.stage{background:rgba(255,255,255,.72);border-radius:32px;padding:12px;box-shadow:var(--sh);min-height:420px}
.listen-zone{display:flex;flex-direction:column;align-items:center;gap:4px}
.lstn{width:118px;transition:transform .3s}.lstn.on{animation:lis 1s ease-in-out infinite}
@keyframes lis{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.05)}}
.wave{display:flex;align-items:center;justify-content:center;gap:5px;height:44px}
.wave i{display:block;width:8px;height:10px;border-radius:8px;background:linear-gradient(180deg,var(--coral),var(--sun));opacity:.45}
.wave.on i,.hwave i{animation:wv .9s ease-in-out infinite;opacity:1}
.wave i:nth-child(3n){background:linear-gradient(180deg,var(--mint),var(--sky))}
@keyframes wv{0%,100%{height:10px}50%{height:40px}}
.qtxt{font-size:27px;font-weight:800;text-align:center;line-height:1.45;overflow-wrap:anywhere;max-width:100%;padding:0 4px}
.qtxt .ref{display:inline-flex;align-items:center;gap:4px;background:#FFF3C4;border-radius:16px;padding:0 10px;vertical-align:middle}
.refimg{width:52px;height:52px;object-fit:contain;vertical-align:middle}
.nb{font-family:Arial,sans-serif;font-weight:800}
.ans{margin-top:10px;transition:opacity .3s}.ans.hid{opacity:0;pointer-events:none;height:0;overflow:hidden}
.hint{text-align:center;font-size:20px;font-weight:700;color:var(--ink2);margin:4px 0 8px}
.cnt{display:inline-block;background:#fff;border-radius:99px;padding:0 12px;margin-right:6px;font-family:Arial,sans-serif;font-weight:800}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.n3{grid-template-columns:1fr 1fr 1fr}.opts.n6,.opts.n8,.opts.n7{grid-template-columns:1fr 1fr 1fr}
.opt{position:relative;background:#fff;border-radius:24px;padding:8px 4px 6px;box-shadow:0 5px 0 #EBD6E0,0 6px 14px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;border:4px solid transparent;transition:transform .12s,border-color .2s}
.opt .oimg{width:100%;max-width:120px;aspect-ratio:1;object-fit:contain}
.opts.n6 .oimg,.opts.n7 .oimg,.opts.n8 .oimg{max-width:92px}
.opt span{font-size:20px;font-weight:800;line-height:1.2;min-height:24px}
.opt.sel{border-color:var(--sky);background:#EAF7FF;transform:scale(1.03)}
.opt.right{border-color:var(--mint);background:#E3FBF2;animation:pop .4s}
.opt.wrong{border-color:#FF6B6B;background:#FFE8E8;animation:shake .4s}
.opt .ord{position:absolute;top:-8px;right:-6px;width:36px;height:36px;border-radius:50%;background:#C42F3A;color:#fff;font-style:normal;font-weight:800;font-family:Arial,sans-serif;font-size:20px;line-height:36px;box-shadow:0 3px 0 #c94b4b}
.opt .ord.ok{background:var(--mint);box-shadow:0 3px 0 #1E9474}
@keyframes pop{50%{transform:scale(1.1)}}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.numo,.colo{min-height:96px;justify-content:center}
.numo .nb{font-size:52px;color:var(--coral)}
.colo .sw{display:block;width:62px;height:62px;border-radius:50%;background:var(--c);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.15)}
.opts.num,.opts.col{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}
.slots{display:flex;justify-content:center;gap:8px;margin:6px 0 12px;direction:ltr}
.slot{width:56px;height:66px;border-radius:16px;background:#fff;border:3px dashed #FFB3C4;font-size:40px;font-weight:800;font-family:Arial,sans-serif;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.slot.fill{border-style:solid;border-color:var(--sky);background:#EAF7FF}.slot.right{border-color:var(--mint);background:#E3FBF2}.slot.wrong{border-color:#FF6B6B;background:#FFE8E8}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;direction:ltr;max-width:340px;margin:0 auto}
.key{height:64px;border-radius:20px;background:#fff;font-size:34px;font-weight:800;font-family:Arial,sans-serif;box-shadow:0 5px 0 #EBD6E0}
.key:active{transform:translateY(3px)}.key.del{background:#FFE8E8;font-size:28px}
.corr{margin-top:10px;text-align:center;font-size:22px;font-weight:700;background:#FFF3C4;border-radius:16px;padding:8px;line-height:1.5}
.pads{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:360px;margin:0 auto}
.pads.n3{grid-template-columns:1fr 1fr 1fr}
.pad{aspect-ratio:1;border-radius:30px;background:var(--c);box-shadow:0 8px 0 rgba(0,0,0,.18),inset 0 -10px 0 rgba(0,0,0,.12);font-size:48px;transition:transform .1s,filter .1s;filter:saturate(.75) brightness(.95)}
.pad.lit{transform:scale(1.08);filter:saturate(1.3) brightness(1.2);box-shadow:0 0 0 6px #fff,0 0 30px var(--c)}
.pad.wrong{animation:shake .4s}
.pal{display:flex;justify-content:center;gap:12px;margin-bottom:10px}
.brush{width:58px;height:58px;border-radius:50%;background:var(--c);box-shadow:0 5px 0 rgba(0,0,0,.18),inset 0 -6px 0 rgba(0,0,0,.12);border:4px solid #fff}
.brush.sel{transform:scale(1.18);box-shadow:0 0 0 4px var(--ink),0 5px 0 rgba(0,0,0,.18)}
.scene{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sobj{position:relative;background:#fff;border-radius:24px;padding:8px;box-shadow:0 5px 0 #EBD6E0;--c:transparent}
.sobj img{width:100%;aspect-ratio:1;object-fit:contain}
.sobj.colored{background:var(--c);box-shadow:0 5px 0 rgba(0,0,0,.2),inset 0 0 0 4px #fff}
.sobj.tap{animation:pop .35s}
.sobj .ord{position:absolute;top:-8px;right:-6px;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-weight:800;font-family:Arial,sans-serif;line-height:34px;font-size:19px}
.fb{min-height:10px}
.fbok,.fbno{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:10px;padding:8px 12px;border-radius:24px;font-size:25px;font-weight:800;line-height:1.35;animation:pop .4s}
.fbok{background:linear-gradient(135deg,#E3FBF2,#FFF6C9);color:#11795c}.fbno{background:#FFF0F0;color:#c2414b}
.fbm{width:74px;flex:none}.fbn{text-align:center;font-size:40px}
.burst{position:fixed;top:45%;left:50%;width:0;height:0;z-index:50;pointer-events:none}
.burst i{position:absolute;width:14px;height:14px;border-radius:50%;animation:bu 1s ease-out forwards;transform:rotate(var(--a)) translateY(0)}
@keyframes bu{to{transform:rotate(var(--a)) translateY(-150px);opacity:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall 2s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.done .score{font-size:56px;font-weight:800;font-family:Arial,sans-serif;color:var(--coral)}
.bigstars{font-size:64px;letter-spacing:6px}.bigstars b{color:#e6dce8;display:inline-block}.bigstars b.on{color:#FFB72B;text-shadow:0 4px 0 #E08A00;animation:pop .6s both}
.newb{background:#FFF3C4;border-radius:20px;padding:10px;margin:8px 0;font-size:22px}
/* tests */
.tic{width:130px}.tl{list-style:none;padding:0;text-align:right;font-size:22px;font-weight:700;background:#fff;border-radius:24px;padding:12px 16px;box-shadow:var(--sh)}
.res{text-align:center}.res-m{width:150px}
.ring{--p:0;width:150px;height:150px;border-radius:50%;margin:6px auto;background:conic-gradient(var(--mint) calc(var(--p)*1%),#fff 0);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
.ring span{width:112px;height:112px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;font-family:Arial,sans-serif;color:var(--coral)}
.rok{font-size:22px;font-weight:700}
.bars{background:#fff;border-radius:24px;padding:12px;box-shadow:var(--sh);margin:10px 0;text-align:right}
.br{display:grid;grid-template-columns:1fr;gap:2px;margin:6px 0}
.bl{font-size:19px;font-weight:800}
.bt{position:relative;height:22px;background:#F4EDF5;border-radius:99px;overflow:hidden}
.bt i{position:absolute;top:0;right:0;height:100%;border-radius:99px}
.bt .b0{background:#FFC9D4;height:50%;top:0}.bt .b1{background:linear-gradient(90deg,var(--mint),#7BE3C5);height:100%}
.bt .b0+.b1{height:50%;top:50%}
.bv{font-size:17px;font-weight:800;text-align:left}
.bv small{color:#d77;margin-left:6px}
.legend{font-size:17px;text-align:center}.legend span{display:inline-block;width:16px;height:12px;border-radius:4px;margin:0 6px}.l0{background:#FFC9D4}.l1{background:var(--mint)}
.impr{font-size:24px;font-weight:800;background:linear-gradient(135deg,#E3FBF2,#FFF6C9);border-radius:20px;padding:8px;margin:8px 0}
.sum{font-size:20px;line-height:1.6;font-weight:600}
/* parents */
.card{background:#fff;border-radius:26px;padding:12px 14px;box-shadow:var(--sh);margin:12px 0}
.card h2{margin:0 0 6px;font-size:25px}
.cmp{display:flex;justify-content:center;align-items:center;gap:16px;text-align:center}
.cmp b{display:block;font-size:36px;font-family:Arial,sans-serif;color:var(--coral)}.cmp .arr{font-size:30px}
.tb{width:100%;border-collapse:collapse;font-size:19px}.tb th,.tb td{border-bottom:1px solid #F1E4EA;padding:6px 4px;text-align:center}.tb td:first-child{text-align:right;font-weight:700}
.bdg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bd{text-align:center;opacity:.35;filter:grayscale(1)}.bd.on{opacity:1;filter:none}.bd span{display:block;font-size:38px;width:62px;height:62px;line-height:62px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6C9,#FFD93D);box-shadow:0 4px 0 #E0A800}
.bd small{font-size:14px;font-weight:700;line-height:1.25;display:block;margin-top:4px}
.hist{padding-right:20px;font-size:19px}
/* card & cert */
.pcard,.cert{background:#fff;border-radius:26px;padding:16px;box-shadow:var(--sh);margin:8px 0;border:6px solid #FFD6DE}
.pc-h{display:flex;align-items:center;gap:10px}.pc-h img{width:70px}.pc-h div{flex:1}.pc-h b{display:block;font-size:22px}.pc-h small{font-size:17px}.pc-m{width:70px}
.pc-n{text-align:center;font-size:34px;font-weight:800;color:var(--coral);margin:8px 0}
.pc-f,.c-f{text-align:center;font-size:18px;font-weight:700;margin-top:10px}
.dt{text-align:center;font-size:16px;color:var(--ink2)}
.cert{text-align:center;background:radial-gradient(circle at top,#FFF6C9,#fff 60%);border:8px double #FF9EC4}
.clogo{width:90px}.cert h1{font-size:32px;color:var(--coral);margin:6px 0;line-height:1.3}
.c-s{font-size:21px;font-weight:700}.cert .nm{font-size:44px;font-weight:800;color:var(--ink);border-bottom:3px dashed var(--sun);display:inline-block;padding:0 20px;margin:6px 0}
.c-st{font-size:22px;font-weight:800;margin:6px 0}.c-m{width:150px}
.foot{text-align:center;margin-top:22px;font-size:18px;font-weight:700;color:var(--ink2)}
.foot .logo{width:64px;display:block;margin:0 auto 4px}
.masc{pointer-events:none;user-select:none}
@media (max-width:370px){body{font-size:21px}.hero h1{font-size:40px}.st-t{font-size:20px}.qtxt{font-size:26px}.opt span{font-size:18px}.st-ic,.st-ic img{width:92px;height:92px}.key{height:58px}.slot{width:48px}.big{font-size:30px}.top .ttl{font-size:22px}}
@media print{body{background:#fff}.noprint,.foot{display:none!important}.pcard,.cert{box-shadow:none;margin:0}#app{max-width:none}}
.top .ttl small{display:block;width:max-content;margin:2px auto 0;font-size:16px;padding:0 12px;border-radius:99px;background:var(--lc,#3CCFA9);color:#2a1733}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:min(92vw,480px);background:var(--ink);color:#fff;padding:12px 16px;border-radius:20px;font-size:20px;font-weight:700;text-align:center;z-index:80;box-shadow:var(--sh);animation:pop .3s}

/* ---- QA fixes (Oct 30) ---- */
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:6px 0 12px}
.kid{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border-radius:22px;padding:10px 6px;box-shadow:0 5px 0 #e3d3dc;border:3px solid transparent;font:inherit;color:var(--ink)}
.kid.cur{border-color:#128A6A;background:#E6FBF4}
.kid span{font-size:36px;line-height:1.1}.kid b{font-size:22px;overflow-wrap:anywhere}.kid small{font-size:17px;color:var(--ink2)}
.lbl.or{margin-top:12px;font-weight:800}
.kidnote{font-size:17px;line-height:1.55;color:var(--ink2);margin:6px 0}
.gate{padding-top:4vh}.gate-ic{font-size:72px}
.hold{position:relative;overflow:hidden;display:block;width:min(100%,340px);margin:18px auto;padding:22px 16px;border-radius:26px;border:3px dashed #8a6f95;background:#fff;color:var(--ink);font:inherit;font-size:24px;font-weight:800;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hold i{position:absolute;inset:0 auto 0 0;width:0;background:#CDEFE3;transition:none}
.hold.on i{width:100%;transition:width 3s linear}
.hold span{position:relative}
.nosnd{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9000;width:min(94vw,440px);display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:24px;padding:12px;box-shadow:0 10px 30px rgba(59,35,70,.35);animation:pop .4s}
.nosnd .ns-go{width:100%;min-height:60px;border-radius:20px;border:0;background:#B8232F;color:#fff;font:inherit;font-size:24px;font-weight:800;box-shadow:0 5px 0 #8E1A24}
.nosnd .ns-skip{border:0;background:none;color:#5b4366;font:inherit;font-size:18px;font-weight:700;text-decoration:underline}
/* landscape phones: picture/listening zone beside the answers, no scrolling */
@media (orientation:landscape) and (max-height:520px){
 #app{max-width:none;padding:6px 14px 8px}
 #app.game{min-height:0}
 .game .top{margin:0 0 4px}.game .btn-ic{width:42px;height:42px;font-size:20px;border-radius:14px}
 .game .ttl{font-size:20px}.game .top .ttl small{font-size:13px}
 .game .prog{margin-bottom:4px;font-size:15px}
 .game .stage{display:grid;grid-template-columns:minmax(150px,30%) 1fr;grid-template-areas:"lz ans" "lz fb";align-items:start;column-gap:12px;min-height:0;padding:8px 10px}
 .game .listen-zone{grid-area:lz;align-self:center}
 .game .lstn{width:84px}.game .wave{height:30px}
 .game .qtxt{font-size:20px;line-height:1.35}
 .game .ans{grid-area:ans;margin-top:0}.game .fb{grid-area:fb}
 .game .fbok,.game .fbno{font-size:19px;padding:4px 10px;margin-top:6px}.game .fbm{width:46px}
 .game .opts{grid-template-columns:repeat(4,1fr);gap:8px}
 .game .opts.n3{grid-template-columns:repeat(3,1fr)}
 .game .opts.n5,.game .opts.n6,.game .opts.n7,.game .opts.n8{grid-template-columns:repeat(4,1fr)}
 .game .opts.num,.game .opts.col{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}
 .game .opt{padding:4px 2px;border-radius:18px;border-width:3px}
 .game .opt .oimg,.game .opts.n6 .oimg,.game .opts.n7 .oimg,.game .opts.n8 .oimg{max-width:none;width:auto;height:min(15vh,62px)}
 .game .opt span{font-size:15px;min-height:18px}
 .game .hint{font-size:16px;margin:0 0 4px}
 .game .slots{margin:0 0 6px}.game .slot{height:44px;width:40px;font-size:28px}
 .game .kp{grid-template-columns:repeat(6,1fr);max-width:none;gap:6px}.game .key{height:44px;font-size:26px}
 .game .pads{grid-template-columns:repeat(4,1fr);max-width:none;gap:10px}.game .pad{aspect-ratio:auto;height:min(30vh,110px);font-size:36px}
 .game .scene{grid-template-columns:repeat(6,1fr);gap:6px}.game .sobj{padding:4px;border-radius:16px}
 .game .pal{margin-bottom:4px}.game .brush{width:42px;height:42px}
 .game .corr{font-size:17px;padding:4px;margin-top:4px}
 .game .btn.sm{margin:2px auto 0;padding:3px 14px;font-size:17px;display:table}
 .game .opts.n6 .oimg,.game .opts.n7 .oimg,.game .opts.n8 .oimg{height:min(13vh,52px)}
}