:root{--teal:#0F766E;--teal2:#14B8A6;--tealD:#134E4A;--tealL:#CCFBF1;--amber:#F59E0B;--mus:#EAB308;--cream:#FFF7E6;--paper:#FFFDF7;--brown:#7C4A1E;--ink:#1F2937;--ok:#16A34A;--bad:#E11D48;--sh:0 6px 0 rgba(19,78,74,.18),0 12px 28px rgba(19,78,74,.14)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:'Baloo Bhaijaan 2','Noto Naskh Arabic',Tahoma,Arial,sans-serif;color:var(--ink);font-size:26px;line-height:1.5;min-height:100vh;
 background-color:var(--cream);background-image:radial-gradient(circle at 12% 18%,rgba(245,158,11,.12) 0 60px,transparent 61px),radial-gradient(circle at 88% 70%,rgba(20,184,166,.12) 0 90px,transparent 91px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23E7D6B5' stroke-width='3'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Cpath d='M37 37l9 9'/%3E%3C/g%3E%3Cg fill='%23EBDDBF'%3E%3Cellipse cx='88' cy='88' rx='5' ry='7'/%3E%3Cellipse cx='98' cy='100' rx='5' ry='7'/%3E%3C/g%3E%3C/svg%3E");background-attachment:fixed}
button{font-family:inherit;cursor:pointer}
#app{max-width:760px;margin:0 auto;padding:10px 12px 24px;min-height:calc(100vh - 70px)}
.loading{text-align:center;padding:80px 10px;font-size:30px;font-weight:800;color:var(--teal)}
.err{text-align:center;padding:60px 10px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:22px;padding:12px 26px;font-size:26px;font-weight:800;color:#fff;background:linear-gradient(180deg,#19A79A,#0F766E);box-shadow:0 5px 0 #0B5A54,0 10px 18px rgba(15,118,110,.3);min-height:60px;transition:transform .12s,box-shadow .12s;max-width:100%;white-space:normal;text-align:center;line-height:1.3}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #0B5A54}
.btn.amber{background:linear-gradient(180deg,#FBBF24,#F59E0B);color:#4A2C06;box-shadow:0 5px 0 #B45309,0 10px 18px rgba(245,158,11,.35)}
.btn.ghost{background:#fff;color:var(--teal);box-shadow:0 4px 0 #CDE7E2;border:3px solid var(--tealL)}
.btn.big{font-size:30px;padding:14px 34px;min-height:70px}
.btn:focus-visible,.opt:focus-visible,.case:focus-visible{outline:4px solid var(--amber);outline-offset:3px}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
/* hero */
.hero{position:relative;border-radius:32px;overflow:hidden;background:radial-gradient(circle at 75% 20%,#2DD4BF 0,transparent 45%),linear-gradient(160deg,#0F766E 0%,#115E59 55%,#134E4A 100%);color:#fff;padding:20px 18px 18px;box-shadow:var(--sh);margin-bottom:18px}
.hero:before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Ctext x='10' y='40' font-size='28' fill='%23ffffff' fill-opacity='.08' font-family='Arial'%3E%3F%3C/text%3E%3Ctext x='55' y='80' font-size='20' fill='%23ffffff' fill-opacity='.07' font-family='Arial'%3E%3F%3C/text%3E%3C/svg%3E")}
.hero .in{position:relative;display:flex;align-items:center;gap:10px}
.hero h1{margin:0;font-size:44px;line-height:1.2;font-weight:800;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.hero h1 .ey{color:#FDE68A}
.hero .sub{font-size:22px;opacity:.95;margin-top:4px;font-weight:600}
.hero .masc{flex:0 0 auto;width:140px}
.hero .txt{flex:1;min-width:0}
.hero .conan{margin-top:10px;background:#fff;color:#134E4A;border-radius:20px 20px 20px 6px;padding:8px 12px;font-size:21px;font-weight:700;line-height:1.35;box-shadow:0 4px 0 rgba(0,0,0,.15);display:inline-block}
.hero .conan b{color:#B45309}
.hero .cn{text-align:center;margin-top:-6px;background:#F59E0B;color:#4A2C06;border-radius:999px;font-size:20px;font-weight:800;padding:0 10px;box-shadow:0 3px 0 #B45309;position:relative}
.spot{position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(253,230,138,.35),transparent 70%);top:-30px;left:-20px;animation:spot 7s ease-in-out infinite}
@keyframes spot{0%,100%{transform:translate(0,0)}50%{transform:translate(160px,90px)}}
.mag{transform-origin:70% 75%;animation:mag 2.6s ease-in-out infinite}
@keyframes mag{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg) translate(-4px,-3px)}}
.blink{animation:blink 4s infinite;transform-origin:center}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.foot-tr{position:absolute;bottom:8px;right:14px;opacity:.25;font-size:20px;letter-spacing:6px}
/* name entry */
.card{background:var(--paper);border-radius:28px;padding:18px;box-shadow:var(--sh);margin-bottom:16px;border:3px solid #F3E3C3}
.card h2{margin:0 0 10px;font-size:30px;color:var(--teal);line-height:1.3}
.inp{width:100%;font-family:inherit;font-size:30px;padding:10px 16px;border-radius:18px;border:3px solid #E7D6B5;background:#fff;text-align:center;font-weight:700;color:var(--ink)}
.inp:focus{outline:none;border-color:var(--teal2)}
.gsel{display:flex;gap:12px;margin:14px 0}
.gsel button{flex:1;border:4px solid #E7D6B5;background:#fff;border-radius:24px;padding:8px 4px;font-size:26px;font-weight:800;color:var(--ink);display:flex;flex-direction:column;align-items:center}
.gsel button.on{border-color:var(--amber);background:#FFF3D6;box-shadow:0 0 0 4px rgba(245,158,11,.25)}
.gsel svg{width:96px;height:108px}
/* greeting */
.greet{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 12px;flex-wrap:wrap}
.greet .hi{font-size:30px;font-weight:800;color:var(--tealD)}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:4px 16px;font-weight:800;font-size:24px;box-shadow:0 3px 0 #EADBC0;color:var(--brown)}
.prog{height:16px;background:#F1E4C8;border-radius:99px;overflow:hidden;margin:6px 0 14px}
.prog i{display:block;float:right;height:100%;background:linear-gradient(90deg,#F59E0B,#FACC15);border-radius:99px;transition:width .5s}
/* cases */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.case{position:relative;border:none;background:linear-gradient(180deg,#FFE7A8,#FCD579);border-radius:8px 26px 26px 26px;padding:30px 10px 12px;box-shadow:0 6px 0 #D9A53C,0 12px 22px rgba(124,74,30,.18);text-align:center;color:var(--ink);transition:transform .15s;min-width:0}
.case:before{content:"";position:absolute;top:-14px;right:0;width:46%;height:22px;background:#FCD579;border-radius:14px 14px 0 0}
.case:active{transform:scale(.97)}
.case .no{position:absolute;top:-8px;right:12px;font-size:18px;font-weight:800;color:#8A5A12;z-index:1}
.case .ic{width:100%;max-width:150px;height:96px;display:block;margin:0 auto}
.case .t{font-size:26px;font-weight:800;line-height:1.25;margin:4px 0 2px;color:#5B3A0A;word-break:break-word}
.case .st{font-size:20px;font-weight:700;color:#8A5A12}
.case.c2{background:linear-gradient(180deg,#B9F3E8,#86E3D2);box-shadow:0 6px 0 #3FAE9C,0 12px 22px rgba(15,118,110,.18)}
.case.c2:before{background:#86E3D2}.case.c2 .t{color:#0B4F49}.case.c2 .st,.case.c2 .no{color:#0F766E}
.case.wide{grid-column:1/-1}
.case .stamp{position:absolute;left:8px;top:6px;font-size:16px;background:#16A34A;color:#fff;border-radius:10px;padding:0 8px;transform:rotate(-8deg);font-weight:800}
.links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
/* top bar */
.top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.top .back{flex:0 0 auto;width:56px;height:56px;border-radius:18px;border:none;background:#fff;box-shadow:0 4px 0 #E7D6B5;font-size:28px;color:var(--teal);font-weight:800}
.top .ttl{flex:1;min-width:0;font-size:26px;font-weight:800;color:var(--tealD);line-height:1.2;word-break:break-word}
.top .sc{flex:0 0 auto}
.qbar{display:flex;align-items:center;gap:10px;margin:2px 0 10px}
.qbar .lbl{font-size:22px;font-weight:800;color:var(--brown);white-space:nowrap}
.qbar .prog{flex:1;margin:0}
/* level select */
.lvls{display:flex;flex-direction:column;gap:14px}
.lv{display:flex;align-items:center;gap:14px;border:none;border-radius:26px;background:#fff;padding:14px;box-shadow:var(--sh);text-align:right;font-size:26px;color:var(--ink)}
.lv .n{flex:0 0 auto;width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:800;color:#fff;background:linear-gradient(180deg,#2DD4BF,#0F766E);box-shadow:inset 0 -5px 0 rgba(0,0,0,.15)}
.lv.l2 .n{background:linear-gradient(180deg,#FBBF24,#D97706)}.lv.l3 .n{background:linear-gradient(180deg,#FB7185,#BE123C)}
.lv .d{flex:1;min-width:0}.lv .d b{display:block;font-size:28px}.lv .d small{font-size:21px;color:#6B7280;font-weight:700}
.lv.lock{opacity:.6;filter:grayscale(.6)}
.lv .s{flex:0 0 auto;font-size:22px;font-weight:800;color:var(--brown)}
.intro{display:flex;align-items:center;gap:10px;background:#fff;border-radius:26px;padding:12px;box-shadow:var(--sh);margin-bottom:16px}
.intro .ic{width:110px;height:90px;flex:0 0 auto}
.intro h2{margin:0;font-size:32px;color:var(--teal);line-height:1.2}
.intro p{margin:2px 0 0;font-size:22px;color:#4B5563;font-weight:600;line-height:1.35}
/* game */
.stage{background:var(--paper);border-radius:28px;padding:14px 10px 16px;box-shadow:var(--sh);border:3px solid #F3E3C3;position:relative;overflow:hidden}
.prompt{font-size:28px;font-weight:800;text-align:center;color:var(--tealD);line-height:1.35;margin:2px 4px 10px;word-break:break-word}
.prompt small{display:block;font-size:22px;color:#6B7280;font-weight:700}
.vbar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.timer{position:relative;width:64px;height:64px;flex:0 0 auto}
.timer svg{width:64px;height:64px;transform:rotate(-90deg)}
.timer .bg{fill:#FFF3D6;stroke:#F3E3C3;stroke-width:6}
.timer .fg{fill:none;stroke:var(--amber);stroke-width:6;stroke-linecap:round}
.timer b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--brown);font-family:'Fredoka',sans-serif}
.board{display:grid;gap:10px;justify-content:center;margin:0 auto;perspective:900px}
.board.c2{grid-template-columns:repeat(2,minmax(0,140px))}
.board.c3{grid-template-columns:repeat(3,minmax(0,112px))}
.board.c4{grid-template-columns:repeat(4,minmax(0,84px))}
.slot{position:relative;aspect-ratio:1/1;min-height:72px}
.pc{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.pc .f,.pc .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;display:flex;align-items:center;justify-content:center}
.pc .f{background:#fff;box-shadow:0 4px 0 #E7D6B5,0 6px 14px rgba(124,74,30,.12);border:3px solid #F3E3C3}
.pc .b{transform:rotateY(180deg);background:linear-gradient(135deg,#14B8A6,#0F766E);box-shadow:0 4px 0 #0B5A54;border:3px solid #5EEAD4}
.pc .b svg{width:56%;height:56%;opacity:.9}
.pc.flip{transform:rotateY(180deg)}
.pc .f .ob{width:80%;height:80%}
.pc .pin{position:absolute;top:-6px;left:50%;margin-left:-8px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FCA5A5,#DC2626);box-shadow:0 2px 2px rgba(0,0,0,.25);z-index:2}
.slot.empty .gap{position:absolute;inset:0;border:4px dashed #D6BF92;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:44px;color:#C9A86A;font-weight:800;background:rgba(255,255,255,.5)}
.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.opts{display:grid;gap:12px;justify-content:center;margin:12px auto 4px}
.opts.c2{grid-template-columns:repeat(2,minmax(0,150px))}
.opts.c3{grid-template-columns:repeat(3,minmax(0,112px))}
.opts.c4{grid-template-columns:repeat(4,minmax(0,96px))}
.opt{position:relative;border:4px solid #EADBC0;background:#fff;border-radius:22px;aspect-ratio:1/1;padding:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 #E2CFA6;transition:transform .15s,border-color .2s,background .2s;min-height:80px}
.opt .ob{width:84%;height:84%;pointer-events:none}
.opt:active{transform:scale(.95)}
.opt.ok{border-color:var(--ok);background:#DCFCE7;box-shadow:0 5px 0 #86EFAC}
.opt.no{border-color:var(--bad);background:#FFE4E6;animation:shake .4s}
.opt.ok:after,.slot.ok:after{content:"✓";position:absolute;top:-10px;left:-8px;width:34px;height:34px;border-radius:50%;background:var(--ok);color:#fff;font-size:24px;line-height:34px;text-align:center;font-weight:800;z-index:3}
.opt.dim{opacity:.4}
.opt.reveal{border-color:var(--amber);background:#FFF3D6;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.slot.tap{cursor:pointer}
.slot.ok .pc .f{border-color:var(--ok);background:#DCFCE7}
.slot.no{animation:shake .4s}
.slot.reveal .pc .f{border-color:var(--amber);background:#FFF3D6}
.target{display:flex;justify-content:center;margin:0 auto 10px}
.target .tg{width:120px;height:120px;background:#fff;border-radius:24px;border:4px solid var(--amber);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 #F3C670}
.target .tg .ob{width:86%;height:86%}
.fb{min-height:48px;text-align:center;font-size:28px;font-weight:800;margin-top:10px;line-height:1.35;word-break:break-word}
.fb.ok{color:var(--ok)}.fb.no{color:var(--bad)}
.cnt{text-align:center;font-size:24px;font-weight:800;color:var(--brown);margin-top:6px}
.cover{position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,118,110,.96),rgba(19,78,74,.96));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:800;z-index:5;animation:fadein .25s}
.cover svg{width:120px;height:120px;animation:mag 1s ease-in-out infinite}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* end */
.endc{text-align:center}
.endc .big{font-size:64px;line-height:1.1}
.endc h2{font-size:34px;margin:6px 0;color:var(--teal);line-height:1.3}
.starsrow{font-size:30px;letter-spacing:2px;line-height:1.4;word-break:break-all}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.burst{position:fixed;font-size:30px;pointer-events:none;z-index:60;animation:burst 1.1s ease-out forwards}
@keyframes burst{0%{transform:translateY(0) scale(.5);opacity:1}100%{transform:translateY(-90px) scale(1.4);opacity:0}}
/* masc talk */
.say{display:flex;align-items:flex-end;gap:8px;margin:6px 0 12px}
.say .m{width:84px;flex:0 0 auto}
.say .bub{flex:1;min-width:0;background:#fff;border-radius:22px 22px 6px 22px;padding:10px 14px;font-size:26px;font-weight:700;box-shadow:0 4px 0 #EADBC0;line-height:1.35}
/* parents & cert */
table.pt{width:100%;border-collapse:collapse;font-size:22px;background:#fff;border-radius:16px;overflow:hidden}
table.pt td,table.pt th{border-bottom:2px solid #F3E3C3;padding:8px 6px;text-align:center}
table.pt th{background:var(--tealL);color:var(--tealD)}
table.pt td:first-child{text-align:right;font-weight:800}
.cert{background:#fff;border:10px double var(--amber);border-radius:26px;padding:22px 14px;text-align:center;box-shadow:var(--sh);position:relative}
.cert h1{font-size:40px;color:var(--teal);margin:4px 0;line-height:1.2}
.cert .nm{font-size:44px;font-weight:800;color:var(--brown);border-bottom:3px dashed #E7D6B5;display:inline-block;padding:0 20px;margin:6px 0;word-break:break-word}
.cert .sig{font-size:22px;font-weight:700;color:#4B5563;margin-top:12px}
.cert img{width:60px;height:auto}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0}
.bdg{width:96px;text-align:center;font-size:16px;font-weight:800;color:var(--brown);line-height:1.2}
.bdg .md{width:84px;height:84px;margin:0 auto 4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FDE68A,#F59E0B);border:5px solid #FFF7E6;box-shadow:0 0 0 3px #F59E0B,0 6px 10px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}
.bdg .md svg{width:70%;height:70%}
.bdg.off .md{background:#E5E7EB;box-shadow:0 0 0 3px #D1D5DB;filter:grayscale(1);opacity:.5}
footer.foot{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 10px 22px;font-size:20px;font-weight:700;color:#6B4F2A;text-align:center;flex-wrap:wrap}
footer.foot img{width:34px;height:auto}
.mute{position:fixed;bottom:14px;left:14px;width:54px;height:54px;border-radius:50%;border:none;background:#fff;box-shadow:0 4px 0 #E7D6B5,0 6px 12px rgba(0,0,0,.12);font-size:26px;z-index:40}
@media (max-width:420px){
 body{font-size:26px}
 #app{padding:8px 8px 20px}
 .hero h1{font-size:38px}.hero .masc{width:118px}.hero .sub{font-size:20px}
 .case .t{font-size:24px}.case{padding:28px 6px 10px}.case .ic{height:84px}
 .cases{gap:14px}
 .board.c3{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
 .board.c2{grid-template-columns:repeat(2,minmax(0,140px))}
 .board.c4{grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
 .opts.c3{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
 .opts.c2{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:320px}
 .opts.c4{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:8px}
 .opts.c4 .opt{border-radius:18px;padding:3px;min-height:70px}
 .opts.c4 .opt .ob{width:90%;height:90%}
 .prompt{font-size:27px}
}
@media (max-width:370px){.hero h1{font-size:34px}.hero .masc{width:100px}.case .t{font-size:23px}.top .ttl{font-size:24px}}
@media print{body{background:#fff}.top,.links,footer.foot,.mute,.noprint{display:none!important}.cert{box-shadow:none}}

.target .tg.big{width:150px;height:150px}
.qm{font-size:80px;font-weight:800;color:#C9A86A;font-family:Arial}
.ob.sil{filter:brightness(0) opacity(.78)}
.opt .ob.piece{width:auto;height:88%;max-width:90%}
.opt .ob.piece.pT,.opt .ob.piece.pB{width:90%;height:auto}
.board.cards{grid-template-columns:repeat(4,minmax(0,92px))}
.seqbig{display:flex;flex-direction:column;align-items:center;margin:6px 0}
.seqbig .sb{width:150px;height:150px;background:#fff;border-radius:28px;border:4px solid #F3E3C3;box-shadow:0 5px 0 #E2CFA6;display:flex;align-items:center;justify-content:center}
.seqbig .sb .ob{width:80%;height:80%}
.seqbig .sn{margin-top:8px;width:54px;height:54px;border-radius:50%;background:var(--amber);color:#4A2C06;font-size:32px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:Fredoka,Arial}
.seqrow{display:flex;justify-content:center;gap:6px;margin-top:10px;min-height:64px}
.seqrow .si{width:60px;height:60px}.seqrow .si .ob{width:100%;height:100%}
.slotsrow{display:flex;justify-content:center;gap:8px;margin:6px 0 4px;flex-wrap:wrap}
.os{position:relative;width:64px;height:64px;border-radius:16px;border:3px dashed #D6BF92;background:#FFFBF2;display:flex;align-items:center;justify-content:center;font-size:26px;color:#C9A86A;font-family:Fredoka,Arial}
.os .ob{width:88%;height:88%}
.os.ok{border:3px solid var(--ok);background:#DCFCE7}.os.reveal{border:3px solid var(--amber);background:#FFF3D6}
.opt.used{opacity:.35;transform:scale(.9)}
.scw{background:#fff;border-radius:18px;padding:4px;box-shadow:0 4px 0 #E2CFA6;margin:0 auto 10px;max-width:520px}
.scw svg{display:block;width:100%;height:auto}
.scw.tapme{cursor:crosshair;outline:3px solid var(--amber);outline-offset:-1px}
.scene .mk{animation:pop .4s}
.oddl{display:flex;flex-direction:column;gap:12px;align-items:center}
.opt.odd{aspect-ratio:auto;width:100%;max-width:360px;padding:6px 4px;min-height:96px}
.opt.odd .ob{width:100%;height:auto}
@media (max-width:420px){.board.cards{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:8px}.target .tg.big{width:140px;height:140px}.os{width:56px;height:56px}}

.sndB{border:none;font-size:24px;min-height:44px;cursor:pointer}
.lv .d small{display:block}

/* ===== v2 premium look ===== */
body{background-color:#FFF1D6;background-image:radial-gradient(1200px 600px at 100% -10%,rgba(45,212,191,.22),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(245,158,11,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23EED9AE' stroke-width='3'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Cpath d='M37 37l9 9'/%3E%3C/g%3E%3Cg fill='%23F0DFBA'%3E%3Cellipse cx='88' cy='88' rx='5' ry='7'/%3E%3Cellipse cx='98' cy='100' rx='5' ry='7'/%3E%3C/g%3E%3C/svg%3E")}
.hero{min-height:250px;padding:18px 16px 16px;background:#0B4F49;border-radius:34px;box-shadow:0 8px 0 rgba(11,79,73,.35),0 18px 40px rgba(11,79,73,.28)}
.hero:before{display:none}
.hero .hbg{position:absolute;inset:0;background:url(img/ui/bg_office.webp?v=2) 30% center/cover no-repeat;transform:scale(1.04);animation:kb 18s ease-in-out infinite alternate}
.hero .hbg:after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(7,52,48,.92) 0%,rgba(7,52,48,.72) 48%,rgba(7,52,48,.12) 100%)}
@keyframes kb{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.12) translateX(-10px)}}
.hero .in{align-items:flex-end;z-index:2}
.hero h1{font-size:46px;text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 24px rgba(253,230,138,.25)}
.hero h1 .ey{background:linear-gradient(180deg,#FEF3C7,#FBBF24);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.hero .sub{display:inline-block;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.25);border-radius:18px;padding:2px 12px;font-size:20px;line-height:1.35;margin-top:8px}
.hero .conan{font-size:22px;border-radius:22px 22px 22px 6px;box-shadow:0 5px 0 rgba(0,0,0,.18);animation:bob 3s ease-in-out infinite}
.hero .masc{width:150px;position:relative}
.hero .cn{margin-top:-4px;font-size:21px;background:linear-gradient(180deg,#FCD34D,#F59E0B)}
.spot{z-index:1;background:radial-gradient(circle,rgba(253,230,138,.28),transparent 70%)}
.sparks{position:absolute;inset:0;pointer-events:none;z-index:1}
.sparks i{position:absolute;width:8px;height:8px;border-radius:50%;background:#FDE68A;box-shadow:0 0 12px 4px rgba(253,230,138,.7);animation:tw 3s ease-in-out infinite}
.sparks i:nth-child(1){top:14%;left:8%}.sparks i:nth-child(2){top:70%;left:30%;animation-delay:.7s}.sparks i:nth-child(3){top:22%;left:44%;animation-delay:1.4s;width:6px;height:6px}.sparks i:nth-child(4){top:84%;right:10%;animation-delay:2s}.sparks i:nth-child(5){top:8%;right:40%;animation-delay:2.4s;width:5px;height:5px}
@keyframes tw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* mascot motion */
.mascot{display:block;width:100%;height:auto;transform-origin:50% 100%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));animation:breathe 3.2s ease-in-out infinite;user-select:none;-webkit-user-drag:none}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.985)}}
.m-welcome{animation:sway 2.8s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-2.5deg) scale(1.01,.99)}75%{transform:rotate(2.5deg) scale(1.01,.99)}}
.m-think{animation:look 3.6s ease-in-out infinite}
@keyframes look{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(-6px) rotate(-3deg)}65%{transform:translateX(6px) rotate(3deg)}}
.m-point{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px) rotate(-2deg)}}
.m-cheer{animation:jump 1s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes jump{0%,100%{transform:translateY(0) scale(1.03,.96)}15%{transform:translateY(0) scale(.97,1.04)}45%{transform:translateY(-16px) scale(1,1)}75%{transform:translateY(0) scale(1.03,.96)}}
.m-sad,.m-enc{animation:tilt 2.8s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(0)}}
.mlive{position:relative;aspect-ratio:1/1.5;margin:0 auto;cursor:pointer}
.mlive .mascot{position:absolute;bottom:0;left:0;opacity:0;transition:opacity .55s ease}
.mlive .mascot.on{opacity:1}
.mlive.hop{animation:hop .6s ease}
@keyframes hop{40%{transform:translateY(-14px)}}
/* gender pick */
.gsel button{padding:8px 4px 6px;background:linear-gradient(180deg,#fff,#FFF6E4);transition:transform .15s}
.gsel button .mascot{width:96px;height:auto;max-height:144px;object-fit:contain;animation:none}
.gsel button.on .mascot{animation:jump 1s ease infinite}
.gsel button span{margin-top:2px}
/* test cards */
.tcard{display:flex;align-items:center;gap:12px;width:100%;border:none;border-radius:26px;padding:12px 14px;margin:0 0 16px;text-align:right;color:#fff;font-family:inherit;background:linear-gradient(135deg,#7C3AED,#C026D3);box-shadow:0 6px 0 #5B21B6,0 14px 28px rgba(124,58,237,.3);position:relative;overflow:hidden}
.tcard:after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-80px}100%{left:110%}}
.tcard.post{background:linear-gradient(135deg,#F59E0B,#EA580C);box-shadow:0 6px 0 #B45309,0 14px 28px rgba(234,88,12,.3)}
.tcard.done{background:linear-gradient(135deg,#0EA5E9,#0F766E);box-shadow:0 6px 0 #0B5A54,0 14px 28px rgba(14,165,233,.25)}
.tcard .ic{width:78px;height:78px;flex:0 0 auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.tcard span{flex:1;min-width:0}
.tcard b{display:block;font-size:27px;line-height:1.25}
.tcard small{display:block;font-size:20px;font-weight:700;opacity:.92;line-height:1.3}
.tcard em{font-style:normal;flex:0 0 auto;background:#fff;color:#5B21B6;border-radius:999px;padding:4px 12px;font-size:20px;font-weight:800}
.tcard.post em{color:#B45309}.tcard.done em{color:#0F766E}
.sech{margin:6px 4px 14px;font-size:28px;color:var(--tealD)}
.prog.big{height:20px;box-shadow:inset 0 2px 3px rgba(0,0,0,.08)}
/* case folders */
.cases{gap:18px 14px;margin-top:6px}
.case{padding:30px 8px 12px;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.case .ic{width:100%;max-width:132px;height:104px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(124,74,30,.22));transition:transform .3s}
.case:hover .ic,.case:focus .ic{transform:scale(1.07) rotate(-3deg)}
.case .st{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.dots{display:inline-flex;gap:4px}
.dots i{width:12px;height:12px;border-radius:50%;background:rgba(124,74,30,.18)}
.dots i.half{background:#FCD34D}.dots i.on{background:#16A34A}
.cc1,.cc4,.cc7{background:linear-gradient(180deg,#FFE7A8,#FCD579)}
.cc2,.cc5,.cc8{background:linear-gradient(180deg,#B9F3E8,#86E3D2);box-shadow:0 6px 0 #3FAE9C,0 12px 22px rgba(15,118,110,.18)}
.cc2:before,.cc5:before,.cc8:before{background:#86E3D2}
.cc3,.cc6{background:linear-gradient(180deg,#FFD6E0,#FDB4C8);box-shadow:0 6px 0 #E0789A,0 12px 22px rgba(190,24,93,.15)}
.cc3:before,.cc6:before{background:#FDB4C8}
.cc9{background:linear-gradient(180deg,#E9D5FF,#C4B5FD);box-shadow:0 6px 0 #8B5CF6,0 12px 22px rgba(109,40,217,.18)}
.cc9:before{background:#C4B5FD}
.intro.cc1,.intro.cc2,.intro.cc3,.intro.cc4,.intro.cc5,.intro.cc6,.intro.cc7,.intro.cc8,.intro.cc9{box-shadow:var(--sh)}
.intro .ic{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(0,0,0,.18))}
/* levels */
.lv{position:relative;transition:transform .15s}
.lv:active{transform:scale(.98)}
.lv .s{font-size:24px;letter-spacing:1px}
.lv.rec{box-shadow:0 0 0 4px #F59E0B,0 8px 0 rgba(180,83,9,.25),0 14px 26px rgba(245,158,11,.3);animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px #FCD34D,0 8px 0 rgba(180,83,9,.25),0 14px 30px rgba(245,158,11,.45)}}
.rtag{display:inline-block;font-style:normal;background:#F59E0B;color:#4A2C06;border-radius:999px;padding:0 10px;font-size:19px;font-weight:800;margin-top:4px}
.hint{text-align:center;font-size:21px;font-weight:700;color:#8A5A12;margin:12px 0 0}
/* in-game level switch */
.lsw{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;font-size:21px;font-weight:800;color:var(--brown)}
.lsw .lsb{width:46px;height:46px;border-radius:14px;border:3px solid #EADBC0;background:#fff;font-size:24px;font-weight:800;color:var(--brown);box-shadow:0 3px 0 #E2CFA6}
.lsw .lsb.on{background:linear-gradient(180deg,#2DD4BF,#0F766E);border-color:#0F766E;color:#fff;box-shadow:0 3px 0 #0B5A54}
.lsw .csB{width:46px;height:46px;border-radius:14px;border:none;background:#fff;box-shadow:0 3px 0 #E2CFA6;font-size:22px;margin-left:6px}
/* stage & tiles */
.stage{background:linear-gradient(180deg,#FFFDF7,#FFF6E3);border:3px solid #F3E3C3;box-shadow:0 6px 0 rgba(124,74,30,.12),0 16px 30px rgba(124,74,30,.12)}
.pc .f{background:radial-gradient(circle at 50% 40%,#fff 0,#fff 55%,#FFF5DE 100%)}
.pc .f .ob{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.16))}
.opt{background:radial-gradient(circle at 50% 40%,#fff 0,#fff 55%,#FFF7E6 100%)}
.opt .ob{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.15))}
img.ob{display:block;user-select:none;-webkit-user-drag:none}
.opt.pick,.slot.pick .pc .f{border-color:#7C3AED;background:#EDE9FE;box-shadow:0 5px 0 #C4B5FD}
.os.pick{border:3px solid #7C3AED;background:#EDE9FE}
.target .tg{background:radial-gradient(circle at 50% 40%,#fff,#FFF5DE)}
.target .tg .ob{object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.18))}
.ob.sil{filter:none}
.ob.gray{filter:grayscale(1) brightness(1.18) contrast(.75)!important}
.seqrow .si .ob,.os .ob,.seqbig .sb .ob{filter:drop-shadow(0 3px 3px rgba(0,0,0,.15))}
.fb{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.fb .fbm{width:62px;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.fb.ok span{background:#DCFCE7;border-radius:18px;padding:2px 14px}
.cover{background:radial-gradient(circle at 50% 40%,rgba(20,184,166,.97),rgba(11,79,73,.97))}
/* offer / test intro */
.offer{text-align:center}
.offer .om{width:170px;margin:0 auto 4px}
.offer .om .ic{width:130px;height:130px;object-fit:contain}
.offer p{font-size:24px;font-weight:600;line-height:1.5;margin:6px 0 12px}
.tl{list-style:none;padding:0;margin:6px auto 14px;max-width:420px;text-align:right}
.tl li{background:#fff;border-radius:16px;padding:6px 12px;margin:6px 0;font-size:23px;font-weight:700;box-shadow:0 3px 0 #F0E2C5}
/* results */
.rcard{background:#fff;border-radius:28px;padding:16px 14px;box-shadow:var(--sh);border:4px solid #FDE68A;text-align:center;position:relative}
.rcard .rh{display:flex;align-items:flex-end;justify-content:space-between}
.rcard .rh .mascot{width:96px}
.rlogo{width:52px;height:auto}
.rcard h2{margin:2px 0;font-size:30px;color:var(--teal);line-height:1.25}
.rcard h3{margin:16px 0 6px;font-size:26px;color:var(--tealD)}
.rnm{font-size:24px;font-weight:800;color:var(--brown)}
.ring{--p:0;width:150px;height:150px;border-radius:50%;margin:10px auto;background:conic-gradient(#F59E0B calc(var(--p)*1%),#F1E4C8 0);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.ring:before{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff}
.ring b,.ring small{position:relative}.ring b{font-size:38px;line-height:1;color:var(--tealD);font-family:Fredoka,Arial}.ring small{font-size:18px;font-weight:800;color:#8A5A12}
.sks{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.skr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;text-align:right;background:#FFFBF2;border-radius:16px;padding:6px 10px}
.skr .sn2{font-size:22px;font-weight:800}.skr .ss{font-size:20px;white-space:nowrap}
.skr .bar{grid-column:1/-1}
.bar{position:relative;height:24px;background:#F1E4C8;border-radius:99px;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;right:0;border-radius:99px;background:linear-gradient(90deg,#14B8A6,#0F766E);transition:width .8s}
.bar.b0 i{background:linear-gradient(90deg,#CBD5E1,#94A3B8)}
.bar bdi{position:absolute;left:8px;top:0;font-size:17px;line-height:24px;font-weight:800;color:#1F2937;font-family:Fredoka,Arial;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.cmp{text-align:right}
.cmp .lg{display:flex;gap:14px;justify-content:center;font-size:19px;font-weight:800;margin-bottom:6px;flex-wrap:wrap}
.cmp .lg i{display:inline-block;width:18px;height:12px;border-radius:6px;background:#94A3B8;margin-left:4px}.cmp .lg i.b1{background:#0F766E}
.cr{background:#FFFBF2;border-radius:16px;padding:6px 10px;margin:6px 0}
.cr .bar{height:20px;margin-top:4px}.cr .bar bdi{line-height:20px;font-size:16px}
.cn2{font-size:21px;font-weight:800}
.cn2 em{font-style:normal;font-size:18px;border-radius:999px;padding:0 8px;background:#E5E7EB;margin-right:4px}
.cn2 em.up{background:#DCFCE7;color:#15803D}.cn2 em.dn{background:#FFE4E6;color:#BE123C}
.cr.tot{background:#FEF3C7}
.imp{text-align:center;font-size:26px;font-weight:800;color:#15803D;margin:8px 0 2px}
.sum{font-size:22px;font-weight:700;line-height:1.5;background:#F0FDFA;border-radius:16px;padding:8px 12px;margin:12px 0 4px;text-align:right}
.sum2{font-size:20px;font-weight:700;color:#8A5A12;margin:6px 0}
.rf{font-size:18px;font-weight:700;color:#6B7280;margin-top:8px}
.pbox{background:#FFFBF2;border-radius:20px;padding:10px 12px;margin:14px 0;border:3px solid #F3E3C3}
.pbox h3{margin:0 0 6px;font-size:25px;color:var(--tealD)}
.pbox p{font-size:21px;font-weight:600;line-height:1.5;margin:4px 0 10px}
.endc .mascot{width:150px;margin:0 auto}
.cert .mascot{width:120px;margin:0 auto}
.bdg .md .ic{width:74%;height:74%;object-fit:contain}
@media (max-width:420px){.hero{min-height:236px}.hero .masc{width:128px}.hero h1{font-size:40px}.tcard b{font-size:25px}.tcard .ic{width:66px;height:66px}.case .ic{height:92px}}
@media (max-width:370px){.hero .masc{width:112px}.hero h1{font-size:35px}.hero .conan{font-size:20px}.tcard{padding:10px}.tcard em{display:none}.lsw{gap:6px}.lsw .lsb,.lsw .csB{width:42px;height:42px}}
@media print{.rcard{box-shadow:none;border:3px solid #ccc}.hero,.tcard,.lsw{display:none!important}}
.cert .cseal{position:absolute;top:10px;left:10px;width:78px;height:auto;transform:rotate(-12deg);filter:drop-shadow(0 4px 5px rgba(0,0,0,.2))}
.board.cards.c3{grid-template-columns:repeat(3,minmax(0,112px))}
@media (max-width:420px){.board.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:330px}}
.prompt .pm{height:64px;width:auto;vertical-align:middle;margin-left:6px;display:inline-block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}

/* ===== QA fixes 2026-10-30 ===== */
/* 12: WCAG AA – darker teal behind white text (white on #0F766E = 5.5:1) */
.btn{background:linear-gradient(180deg,#0F766E,#0B5E57);box-shadow:0 5px 0 #08433E,0 10px 18px rgba(15,118,110,.3)}
.btn:active{box-shadow:0 1px 0 #08433E}
.lsw .lsb.on{background:linear-gradient(180deg,#0F766E,#0B5E57)}
/* 1: brief tap-through guard right after a new question appears */
.stage.arm{pointer-events:none}
/* 6: no-sound prompt */
.nosnd{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;transform:translateX(-50%);z-index:9000;border:none;border-radius:999px;padding:10px 20px;background:#7C2D12;color:#fff;font:inherit;font-size:20px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.3);white-space:nowrap;animation:nspulse 1.4s ease-in-out infinite;cursor:pointer}
@keyframes nspulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
/* 4: child picker */
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:10px 0 14px}
.kidb{display:flex;flex-direction:column;align-items:center;gap:4px;border:3px solid #EADBC0;background:#fff;border-radius:22px;padding:10px 6px;font:inherit;cursor:pointer;box-shadow:0 4px 0 #E2CFA6}
.kidb.on{border-color:#0F766E;background:#ECFDF5}
.kidb .kn{font-size:22px;font-weight:800;color:#134E4A;word-break:break-word}
.kidb small{font-size:17px;color:#6B4F1D;font-weight:700}
.kidb svg,.kidb img{max-width:70px;height:auto}
.pill.kidsB{border:none;cursor:pointer;font:inherit}
/* 7: grown-up lock */
.gu-ov{position:fixed;inset:0;z-index:9500;background:rgba(10,30,30,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.gu-box{background:#fff;border-radius:26px;padding:20px 18px;max-width:360px;width:100%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.gu-t{font-size:26px;font-weight:800;color:#134E4A}
.gu-box p{font-size:19px;line-height:1.5;margin:8px 0 12px;color:#374151}
.gu-hold{position:relative;width:120px;height:120px;border-radius:50%;border:none;background:#FFF7E6;margin:0 auto 14px;display:block;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.gu-hold svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gu-hold circle{fill:none;stroke-width:9}
.gu-hold .gu-bg{stroke:#F3E3C3}
.gu-hold .gu-fg{stroke:#0F766E;stroke-linecap:round}
.gu-hold span{position:relative;font-size:46px;line-height:120px}
.gu-hold.on{background:#ECFDF5}
/* 15: landscape phones – picture on one side, answers on the other, no scrolling */
@media (orientation:landscape) and (max-height:520px){
 #app{max-width:none;padding:4px 10px 8px;min-height:0}
 .top{margin-bottom:2px}
 .top .ttl{font-size:20px}
 .top .back{width:40px;height:40px;min-height:0;font-size:20px}
 .lsw{display:none}
 .qbar{margin:0 0 4px}
 .qbar .lbl{font-size:15px}
 .stage{columns:2;column-gap:16px;column-fill:balance;padding:8px 10px;border-radius:20px;min-height:calc(100vh - 90px)}
 .stage>*{break-inside:avoid;-webkit-column-break-inside:avoid}
 .stage>.opts,.stage>.oddl,.stage>.scw.tapme,.stage>.seqbig,.stage>.vwrap~.board,.stage>.vwrap~.target,.stage>.prompt+.board,.stage>.prompt+.slotsrow+.opts{break-before:column;-webkit-column-break-before:always}
 .stage.ty-miss>.prompt+.board,.stage.ty-miss2>.prompt+.board,.stage.ty-miss>.opts,.stage.ty-miss2>.opts{break-before:auto;-webkit-column-break-before:auto}
 .stage.ty-miss>.prompt~.prompt,.stage.ty-miss2>.prompt~.prompt{break-before:column;-webkit-column-break-before:always}
 .stage>.slotsrow{break-before:auto}
 .prompt{font-size:21px;margin:2px 2px 6px;line-height:1.3}
 .prompt .pm{height:42px}
 .prompt small{font-size:16px}
 .vbar{margin-bottom:4px;gap:8px}
 .vbar .btn{min-height:46px;font-size:21px;padding:8px 16px}
 .timer{transform:scale(.8)}
 .board{gap:8px}
 .board.c2{grid-template-columns:repeat(2,minmax(0,31vh));width:auto}
 .board.c3{grid-template-columns:repeat(3,minmax(0,24vh));width:auto}
 .board.c4,.board.cards{grid-template-columns:repeat(4,minmax(0,21vh));width:auto}
 .board.cards.c3{grid-template-columns:repeat(3,minmax(0,22vh))}
 .slot{min-height:0}
 .opts{margin:4px auto;gap:8px}
 .opts.c2{grid-template-columns:repeat(2,minmax(0,31vh));width:auto}
 .opts.c3{grid-template-columns:repeat(3,minmax(0,24vh));width:auto}
 .opts.c4{grid-template-columns:repeat(4,minmax(0,22vh));width:auto}
 .opt{min-height:0;border-radius:16px;padding:3px}
 .target{margin:0 auto 6px}
 .target .tg,.target .tg.big{width:36vh;height:36vh}
 .oddl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .opt.odd{min-height:0;max-width:none;padding:4px}
 .scw{max-width:100%;margin:0 auto 4px}
 .scw svg{max-height:56vh;width:auto;max-width:100%;display:block;margin:0 auto}
 .os{width:46px;height:46px}
 .fb{font-size:21px;min-height:0;margin-top:4px}
 .fb .fbm{height:44px;width:auto}
 .cnt{font-size:18px;margin-top:2px}
 .stage .row.noprint{margin-top:6px!important}
 .stage .row.noprint .btn{min-height:48px;font-size:22px;padding:8px 22px}
 .seqbig .sb{width:34vh;height:34vh}
 .nosnd{font-size:16px;padding:7px 14px}
 .stage.ty-miss>.board.c2,.stage.ty-miss2>.board.c2{grid-template-columns:repeat(2,minmax(0,21vh))}
 .stage.ty-miss>.board.c3,.stage.ty-miss2>.board.c3{grid-template-columns:repeat(3,minmax(0,18vh))}
 .stage.ty-miss>.prompt,.stage.ty-miss2>.prompt{margin-bottom:4px}
}