:root{
  --bg:#FFF7EA;--bg2:#FFEFD6;--card:#FFFFFF;--ink:#1E293B;--muted:#64748B;--line:#F1E4CF;
  --pri:#FF8A3D;--pri2:#FF5E62;--ok:#22C55E;--bad:#EF4444;--blue:#3B82F6;--gold:#FBBF24;
  --r:22px;--sh:0 6px 0 rgba(30,41,59,.08),0 10px 24px rgba(30,41,59,.08);
  --font:ui-rounded,"SF Pro Rounded","Nunito","Arial Rounded MT Bold",system-ui,-apple-system,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
input,textarea,select{-webkit-user-select:text;user-select:text;font-family:var(--font)}
body{min-height:100vh;background:radial-gradient(1200px 600px at 100% -10%,#FFE0B8 0,transparent 60%),radial-gradient(900px 500px at -10% 110%,#FFE4F0 0,transparent 60%),var(--bg);background-attachment:fixed}
body.in-act{overflow:hidden}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
h1,h2,h3{margin:0}
#app{max-width:1180px;margin:0 auto;padding:calc(var(--safe-t) + 8px) 16px calc(96px + var(--safe-b))}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:200}

/* top bar */
.top{display:flex;align-items:center;gap:10px;padding:6px 0 10px;position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg) 70%,transparent)}
.me{display:flex;align-items:center;gap:8px;background:var(--card);padding:6px 14px 6px 6px;border-radius:999px;box-shadow:var(--sh);font-weight:800;font-size:18px}
.me .av{font-size:30px;width:44px;height:44px;display:grid;place-items:center;background:var(--bg2);border-radius:50%}
.chips{display:flex;gap:8px;margin-left:auto}
.chip{background:var(--card);padding:10px 14px;border-radius:999px;font-weight:800;box-shadow:var(--sh);font-size:17px}
.top-r{display:flex;gap:8px}
.icon-btn{min-width:48px;height:48px;border-radius:16px;background:var(--card);box-shadow:var(--sh);font-size:20px;font-weight:800;padding:0 10px}
.icon-btn:active,.btn:active,.acard:active,.cat:active,.mission:active,.opt:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(30,41,59,.1)}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;gap:4px;padding:8px 8px calc(8px + var(--safe-b));background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tabs button{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:16px;font-weight:700;color:var(--muted)}
.tabs button span{font-size:26px;transition:transform .2s}
.tabs button small{font-size:12px}
.tabs button.on{background:#FFF1E2;color:var(--pri)}
.tabs button.on span{transform:scale(1.15) translateY(-2px)}

/* home */
.hero{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#FFB347,#FF6F91);color:#fff;border-radius:28px;padding:22px 26px;box-shadow:var(--sh);margin:6px 0 8px;overflow:hidden;position:relative}
.hero h1{font-size:clamp(22px,3.4vw,34px)}
.hero p{margin:6px 0 10px;font-weight:700;opacity:.95}
.hero-txt{flex:1}
.meter{height:14px;background:rgba(255,255,255,.35);border-radius:99px;overflow:hidden;max-width:420px}
.meter i{display:block;height:100%;background:#FFF59D;border-radius:99px;transition:width .6s}
.owl{font-size:min(120px,18vw);animation:float 3s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.15))}
@keyframes float{50%{transform:translateY(-8px) rotate(-4deg)}}
.sec{font-size:22px;margin:24px 4px 12px;display:flex;align-items:center;gap:8px}
.sec small{margin-left:auto;font-size:15px;color:var(--muted);background:var(--card);padding:4px 12px;border-radius:99px}
.missions{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.mission{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--sh);text-align:left;border:3px solid transparent}
.mission .aico{font-size:40px;width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:color-mix(in srgb,var(--cc) 18%,#fff)}
.mission b{display:block;font-size:18px}.mission small{color:var(--muted);font-weight:700}
.mission .tick{margin-left:auto;font-size:24px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--cc);color:#fff}
.mission.done{border-color:var(--ok)}.mission.done .tick{background:#DCFCE7}
.row-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;scroll-snap-type:x mandatory}
.row-scroll .acard{min-width:160px;scroll-snap-align:start}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.cat{background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 85%,#fff),var(--cc));color:#fff;border-radius:26px;padding:18px 14px;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.cat span{font-size:46px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.15))}
.cat b{font-size:17px}.cat small{opacity:.9;font-weight:700}

/* grids & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.grid.big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.acard{background:var(--card);border-radius:var(--r);padding:14px 10px 12px;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative;overflow:hidden;border-bottom:5px solid var(--cc)}
.acard .aico{font-size:44px;width:84px;height:84px;display:grid;place-items:center;border-radius:24px;background:radial-gradient(circle at 30% 30%,#fff,color-mix(in srgb,var(--cc) 28%,#fff))}
.grid.big .acard .aico{width:100px;height:100px;font-size:56px}
.aname{font-weight:800;font-size:16px;line-height:1.15}
.adesc{font-size:13px;color:var(--muted);font-weight:700}
.astars{color:#E2E8F0;font-size:18px;letter-spacing:2px}.astars.on{color:var(--gold)}
.catbar{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px}
.catbar button{white-space:nowrap;background:var(--card);padding:12px 16px;border-radius:999px;font-weight:800;box-shadow:var(--sh);font-size:16px}
.catbar button.on{background:var(--cc);color:#fff}
.searchbar input{width:100%;font-size:18px;padding:14px 18px;border-radius:18px;border:2px solid var(--line);background:var(--card);margin:4px 0 14px;outline:none}
.searchbar input:focus{border-color:var(--pri)}
.cat-head{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 80%,#fff),var(--cc));color:#fff;border-radius:26px;padding:18px 22px;margin:4px 0 16px;box-shadow:var(--sh)}
.cat-head>span{font-size:56px}.cat-head h2{font-size:26px}.cat-head small{font-weight:700;opacity:.95}
.subbar{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;position:sticky;top:64px;z-index:10;background:linear-gradient(var(--bg) 80%,transparent)}
.subbar button{white-space:nowrap;background:#fff;padding:10px 14px;border-radius:14px;font-weight:800;font-size:15px;box-shadow:var(--sh);border:2px solid transparent}
.subbar button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.subbar small{opacity:.6;margin-left:2px}
.subsec{content-visibility:auto;contain-intrinsic-size:auto 800px;margin-bottom:8px}
.subh{font-size:20px;margin:18px 4px 10px;display:flex;gap:8px;align-items:center}.subh small{font-size:14px;color:var(--muted);background:#fff;padding:2px 10px;border-radius:99px}
.empty{color:var(--muted);text-align:center;padding:30px;font-weight:700}

/* rewards */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;background:var(--card);padding:16px;border-radius:26px;box-shadow:var(--sh)}
.stk{aspect-ratio:1;display:grid;place-items:center;font-size:40px;border-radius:20px;background:#F8FAFC;border:3px dashed #E2E8F0;color:#CBD5E1;font-weight:800}
.stk.got{background:radial-gradient(circle,#FFFBEB,#FEF3C7);border:3px solid #FDE68A}
.boing{animation:boing .5s}
@keyframes boing{30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(.92) rotate(5deg)}}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.badge{background:var(--card);border-radius:20px;padding:14px;text-align:center;box-shadow:var(--sh);filter:grayscale(1);opacity:.5}
.badge.got{filter:none;opacity:1}
.badge span{font-size:44px;display:block}.badge small{font-weight:800}

/* buttons */
.btn{background:linear-gradient(180deg,#FF9F52,var(--pri));color:#fff;font-weight:800;font-size:18px;padding:14px 22px;border-radius:18px;box-shadow:0 5px 0 #D9661F;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 5px 0 #E8DCC7}
.btn.big{font-size:22px;padding:18px 30px}
.btn.sm{font-size:15px;padding:10px 14px;border-radius:14px}
.btn.danger{background:#FEE2E2;color:#B91C1C;box-shadow:0 5px 0 #FCA5A5}
.btn:disabled{opacity:.45}
.btn.rec{background:linear-gradient(180deg,#F87171,#DC2626);box-shadow:0 5px 0 #991B1B;animation:pulse 1s infinite}
.btn.on{outline:4px solid var(--gold)}
@keyframes pulse{50%{opacity:.7}}
.row-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}

/* activity */
#stage{position:fixed;inset:0;z-index:50;background:var(--bg)}
.act{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(900px 500px at 50% -20%,color-mix(in srgb,var(--cc) 22%,transparent),transparent 70%),var(--bg)}
.act-top{display:flex;align-items:center;gap:12px;padding:calc(var(--safe-t) + 10px) 16px 10px}
.act-title{font-weight:800;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.act-top .bar{flex:1;height:18px;background:#fff;border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
.act-top .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cc),color-mix(in srgb,var(--cc) 60%,#fff));border-radius:99px;transition:width .4s}
.act-body{flex:1;overflow:auto;padding:8px 16px calc(16px + var(--safe-b));display:flex;flex-direction:column}
.mascot{position:absolute;right:14px;bottom:calc(10px + var(--safe-b));font-size:52px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.mascot.jump{animation:jump .6s}.mascot.sad{animation:sad .6s}
@keyframes jump{40%{transform:translateY(-30px) rotate(10deg) scale(1.15)}}
@keyframes sad{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.drill-timer{background:#fff;border-radius:99px;padding:2px 10px;font-size:16px}

/* quiz */
.q-wrap{width:100%;max-width:960px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:18px;padding:8px 0}
.q-prompt{font-size:clamp(22px,3.2vw,32px);font-weight:800;text-align:center;line-height:1.25;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.q-prompt.sm{font-size:20px}
.q-wrap.small .q-prompt{font-size:clamp(19px,2.6vw,25px);background:#fff;padding:16px 20px;border-radius:20px;box-shadow:var(--sh);max-width:780px}
.q-big{background:#fff;border-radius:28px;padding:18px 26px;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;gap:8px;min-width:200px;max-width:100%}
.q-opts{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:14px;width:100%;max-width:900px}
.opt{background:#fff;border-radius:24px;padding:16px 10px;min-height:96px;box-shadow:0 6px 0 #E8DCC7;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;font-weight:800;border:4px solid transparent;transition:transform .1s}
.size-lg .opt{min-height:150px}
.size-txt .opt{min-height:76px;font-size:22px;padding:14px 46px 14px 16px}
.opt.ok{border-color:var(--ok);background:#ECFDF5;animation:pop .4s}
.opt.bad{border-color:var(--bad);background:#FEF2F2;opacity:.7}
.opt.hint{animation:glow 1s infinite}
@keyframes glow{50%{box-shadow:0 0 0 8px rgba(251,191,36,.6)}}
@keyframes pop{50%{transform:scale(1.08)}}
.mini-spk{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:20px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#F1F5F9}
.q-explain{font-size:20px;font-weight:700;color:#065F46;background:#ECFDF5;border-radius:16px;padding:0 16px;max-height:0;overflow:hidden;transition:all .3s;text-align:center}
.q-explain.show{max-height:200px;padding:12px 16px}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.emo{font-size:64px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emo.xl{font-size:110px}.emo.lg{font-size:84px}.emo.sm{font-size:36px}
.size-lg .emo{font-size:80px}
.emo.shadow{filter:brightness(0) opacity(.75)}
.txt{font-size:22px;font-weight:800}.txt.big{font-size:40px}
.word{font-size:clamp(34px,5vw,54px);font-weight:900;letter-spacing:6px;color:#334155}
.sentence{font-size:clamp(24px,3.4vw,34px);font-weight:800;text-align:center;line-height:1.35}
.letter{font-size:110px;font-weight:900;color:var(--pri);line-height:1}
.blank{display:inline-block;min-width:44px;border-bottom:4px solid var(--pri);color:var(--pri)}
.hl{background:var(--gold);color:#78350F;padding:0 12px;border-radius:12px}.hl.big{font-size:1.3em}
.dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:440px;font-size:40px;line-height:1}
.opt .dots{font-size:28px;max-width:260px}
.eq{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}.eq b{font-size:46px;color:var(--pri)}.eq .dots{max-width:220px;font-size:34px}
.groups{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.groups .dots{border:3px dashed #E2E8F0;border-radius:14px;padding:6px;font-size:26px;max-width:120px}
.blocks{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;justify-content:center;max-width:600px}
.blocks i{display:inline-block;width:20px;height:20px;background:#60A5FA;border:2px solid #1D4ED8;border-radius:4px}
.blocks i.ten{height:200px;background:repeating-linear-gradient(#FB923C 0 18px,#C2410C 18px 20px);border-color:#C2410C}
.blocks .ones{display:grid;grid-template-columns:repeat(2,20px);gap:4px}
.money{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;max-width:600px}
.coin{width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c));border:3px solid rgba(0,0,0,.2);display:grid;place-items:center;font-weight:900;font-size:20px;line-height:.9;text-align:center;color:#334155}
.coin small{display:block;font-size:11px}
.bill{padding:16px 22px;border-radius:10px;font-weight:900;font-size:22px;color:#fff;border:3px solid rgba(0,0,0,.15)}
.bill.n100{background:#2563EB}.bill.n500{background:#16A34A}.bill.n1000{background:#DC2626}
.seq{display:flex;gap:10px;font-size:58px;flex-wrap:wrap;justify-content:center}
.seq .q{width:72px;height:72px;border:4px dashed var(--pri);border-radius:16px;display:grid;place-items:center;color:var(--pri);font-weight:900;font-size:44px}
.swatch{width:84px;height:84px;border-radius:50%;display:inline-block;border:4px solid rgba(0,0,0,.12)}.swatch.big{width:110px;height:110px}
.staff{max-width:100%}
.lvl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;width:100%}
.lvl{background:#fff;border-radius:20px;padding:20px 10px;font-weight:800;font-size:19px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:4px;border:3px solid transparent}
.lvl.rec{border-color:var(--pri)}.lvl small{color:var(--pri);font-size:13px}

/* pairs */
.match{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px,14vw,180px);width:100%;max-width:820px}
.match .col{display:flex;flex-direction:column;gap:12px;z-index:1}
.match .card{background:#fff;border-radius:22px;min-height:96px;padding:10px;box-shadow:0 6px 0 #E8DCC7;display:flex;align-items:center;justify-content:center;gap:10px;border:4px solid transparent;font-weight:800}
.match .card .emo{font-size:58px}.match .card .emo.sm{font-size:34px}
.match .card.sel{border-color:var(--blue);transform:scale(1.04)}
.match .card.done{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 15%,#fff)}
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* sort */
.sort-stage{min-height:190px;display:flex;flex-direction:column;align-items:center;gap:8px}
.sort-card{background:#fff;border-radius:28px;width:170px;height:170px;display:grid;place-items:center;box-shadow:var(--sh);touch-action:none;transition:transform .25s,opacity .25s}
.sort-card.dragging{transition:none;z-index:5}
.sort-card.fly{transform:translateY(160px) scale(.3)!important;opacity:0}
.sort-card .emo{font-size:96px}
.sort-label{font-weight:800;font-size:20px;min-height:26px}
.bins{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:12px;width:100%}
.bin{background:#fff;border-radius:24px;padding:14px 8px;box-shadow:0 6px 0 #E8DCC7;display:flex;flex-direction:column;align-items:center;gap:4px;border:4px dashed #E2E8F0;min-height:150px}
.bin-ico{font-size:40px}.bin-name{font-weight:800;font-size:18px}
.bin-items{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}.bin-items i{font-style:normal}.bin-items .emo{font-size:26px}.bin-items .txt.big{font-size:18px}.bin-items svg{width:26px;height:26px}

/* order */
.slots{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.slot{width:120px;height:130px;border:4px dashed #CBD5E1;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.6);position:relative;font-weight:800;text-align:center}
.slot>small:first-child{position:absolute;top:6px;left:10px;color:#94A3B8}
.slot.filled{border-style:solid;border-color:var(--ok);background:#fff;animation:pop .3s}
.slot .emo{font-size:56px}.slot small{font-size:13px}
.slots.compact .slot{width:auto;min-width:80px;height:84px;padding:6px 12px}
.arr{font-size:26px;color:#CBD5E1}
.tray{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}
.tile{background:#fff;border-radius:22px;min-width:110px;min-height:110px;padding:10px 14px;box-shadow:0 6px 0 #E8DCC7;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800}
.tile small{font-size:14px}
.tile.used{visibility:hidden}

/* spell */
.spell-slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sl{width:64px;height:76px;border-radius:16px;background:#fff;border-bottom:6px solid #CBD5E1;display:grid;place-items:center;font-size:44px;font-weight:900}
.sl i{color:#E2E8F0;font-style:normal}
.sl.filled{border-color:var(--ok);color:#166534;animation:pop .3s}
.spell-tiles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:720px}
.lt{width:76px;height:76px;border-radius:18px;background:linear-gradient(180deg,#FDE68A,#FBBF24);box-shadow:0 6px 0 #D97706;font-size:40px;font-weight:900;color:#78350F}
.lt.used{opacity:.15;transform:scale(.8)}.lt.hint{animation:glow 1s infinite}

/* memory */
.mem{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,130px));gap:12px;perspective:800px}
.mc{aspect-ratio:1;position:relative;transform-style:preserve-3d;transition:transform .4s}
.mc span{position:absolute;inset:0;border-radius:20px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 6px 0 rgba(0,0,0,.1)}
.mc .back{background:linear-gradient(135deg,#A78BFA,#7C3AED);font-size:40px}
.mc .front{background:#fff;transform:rotateY(180deg);padding:6px;text-align:center}
.mc .front .emo{font-size:58px}.mc .front .txt{font-size:20px}
.mc.flip{transform:rotateY(180deg)}
.mc.got .front{background:#DCFCE7;outline:4px solid var(--ok)}

/* tap & count */
.field{position:relative;width:100%;max-width:820px;height:min(52vh,460px);background:#fff;border-radius:28px;box-shadow:var(--sh)}
.obj{position:absolute;font-size:52px;transform:translate(-10%,-10%)}
.obj.counted{filter:grayscale(.6) opacity(.6)}
.obj.counted::after{content:attr(data-n);position:absolute;top:-8px;right:-14px;background:var(--pri);color:#fff;font-size:18px;font-weight:900;border-radius:99px;min-width:30px;height:30px;display:grid;place-items:center;filter:none}

/* spot */
.spot{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.sgrid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px;background:#fff;padding:12px;border-radius:24px;box-shadow:var(--sh)}
.sc{width:min(72px,10vw);height:min(72px,10vw);font-size:min(44px,6vw);border-radius:14px;background:#F8FAFC}
.sc.found{background:#FEF9C3;outline:4px solid var(--gold)}

/* breathe */
.breath{display:flex;flex-direction:column;align-items:center;gap:20px;min-height:340px;justify-content:center}
.ball{font-size:90px;transition:transform 4s ease-in-out}.ball.grow{transform:scale(2.4)}
.breath-txt{font-size:28px;font-weight:800}

/* trace */
.trace-box{position:relative;width:min(560px,90vw);height:min(52vh,460px);background:#fff;border-radius:28px;box-shadow:var(--sh)}
.trace-box canvas{position:absolute;inset:0;width:100%;height:100%}
.td{touch-action:none}.td.glow{filter:drop-shadow(0 0 12px var(--gold))}

/* maze */
.maze-box{background:#fff;border-radius:28px;padding:14px;box-shadow:var(--sh);width:min(720px,94vw)}
.maze{width:100%;height:auto;max-height:58vh;touch-action:none;display:block}
.walls{stroke:#334155;stroke-width:4;stroke-linecap:round;fill:none}
.trail{stroke:#FDBA74;stroke-width:14;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.dpad{display:grid;grid-template-columns:repeat(4,64px);gap:10px}
.dpad button{height:60px;border-radius:16px;background:#fff;box-shadow:0 5px 0 #E8DCC7;font-size:28px}

/* jigsaw */
.jig{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.board{position:relative;width:min(420px,80vw);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--c),1fr);grid-template-rows:repeat(var(--r),1fr);background:#fff;border-radius:16px;box-shadow:var(--sh);overflow:hidden}
.board .ghost-img{position:absolute;inset:0;width:100%;height:100%;opacity:.15;pointer-events:none}
.jslot{border:1px dashed #CBD5E1;position:relative;z-index:1}
.jslot .jp{width:100%!important;height:100%;border-radius:0}
.board.done{outline:6px solid var(--gold)}
.jtray{display:flex;flex-wrap:wrap;gap:8px;width:min(420px,80vw);justify-content:center}
.jp{width:calc(min(420px,80vw)/4);aspect-ratio:1;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.2);touch-action:none;position:relative;z-index:2}
.jp.drag{z-index:10;box-shadow:0 12px 24px rgba(0,0,0,.3)}.jp.sel{outline:4px solid var(--blue)}
.photo-btn{font-size:15px}

/* coding */
.code-wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.cgrid{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(400px,86vw);aspect-ratio:1;background:#fff;border-radius:20px;padding:6px;gap:4px;box-shadow:var(--sh)}
.cc{background:#F1F5F9;border-radius:10px;display:grid;place-items:center;font-size:min(40px,8vw)}
.bot{position:absolute;width:20%;height:20%;display:grid;place-items:center;font-size:min(44px,9vw);transition:left .35s,top .35s;padding:6px}
.bot.bump{animation:shake .4s}
.code-side{display:flex;flex-direction:column;gap:12px;width:min(340px,90vw)}
.prog{min-height:70px;background:#fff;border-radius:18px;padding:10px;display:flex;flex-wrap:wrap;gap:6px;box-shadow:var(--sh)}
.prog span{font-size:30px;padding:2px;border-radius:8px}.prog span.on{background:#FEF08A}.prog i{color:var(--muted)}
.cmds{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cmds button{height:64px;font-size:30px;border-radius:16px;background:#fff;box-shadow:0 5px 0 #E8DCC7}

/* sudoku */
.sudo{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#334155;padding:6px;border-radius:18px;width:min(380px,86vw)}
.sd{aspect-ratio:1;background:#fff;font-size:40px;font-weight:900;border-radius:8px}
.sd:nth-child(4n+2){margin-right:4px}.sd:nth-child(n+5):nth-child(-n+8){margin-bottom:4px}
.sd.given{background:#F1F5F9}.sd.sel{outline:4px solid var(--blue);z-index:1}.sd.filled{background:#ECFDF5;color:#166534}
.palette{display:flex;gap:12px}.palette button{width:80px;height:80px;border-radius:20px;background:#fff;box-shadow:0 6px 0 #E8DCC7;font-size:40px;font-weight:900}

/* draw */
.draw{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.dtools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.dtools>div{display:flex;gap:6px;background:#fff;padding:6px;border-radius:16px;box-shadow:var(--sh);align-items:center}
.tpl button,.modes button{width:46px;height:46px;font-size:24px;border-radius:12px}
.modes button.on{background:#FEF3C7;outline:3px solid var(--gold)}
.cols button{width:36px;height:36px;border-radius:50%;border:3px solid rgba(0,0,0,.1)}.cols button.on{outline:4px solid var(--ink)}
.dcv{flex:1;width:100%;min-height:300px;background:#fff;border-radius:22px;box-shadow:var(--sh);touch-action:none}

/* games */
.game{flex:1;display:flex;flex-direction:column;gap:8px;position:relative;min-height:0}
.hud{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:22px;background:#fff;border-radius:16px;padding:8px 16px;box-shadow:var(--sh)}
.gcv{flex:1;width:100%;min-height:360px;background:linear-gradient(#E0F2FE,#F0F9FF);border-radius:22px;touch-action:none}
.g-msg{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);background:#fff;padding:12px 22px;border-radius:99px;font-weight:800;font-size:22px;box-shadow:var(--sh);pointer-events:none}
.game.sky .bfield{flex:1;position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(#BAE6FD,#E0F2FE 70%,#DCFCE7);min-height:400px}
.bl{position:absolute;top:0;width:96px;height:118px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 30% 30%,#fff8,transparent 40%),var(--c);display:grid;place-items:center;font-size:44px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);will-change:transform}
.bl::after{content:"";position:absolute;bottom:-26px;left:50%;width:2px;height:28px;background:#94A3B8}
.bl.pop{animation:popb .35s forwards}
@keyframes popb{to{scale:1.8;opacity:0}}

/* music */
.inst{flex:1;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;width:100%}
.song-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.song-bar select{font-size:18px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:700}
.lyric,.karaoke{font-size:clamp(20px,3vw,30px);font-weight:800;text-align:center;min-height:44px;max-width:900px;line-height:1.6}
.lyric span,.karaoke span{color:#94A3B8;transition:all .15s}.lyric .done,.karaoke .done{color:var(--ink)}
.lyric .cur,.karaoke .cur{color:var(--pri);font-size:1.35em}
.piano{position:relative;display:flex;width:100%;max-width:1100px;height:min(46vh,360px);touch-action:none}
.wk{flex:1;background:linear-gradient(#fff 80%,#F1F5F9);border:2px solid #CBD5E1;border-radius:0 0 14px 14px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-weight:900;font-size:16px;text-align:center;color:var(--c);border-top:10px solid var(--c)}
.wk small{color:#94A3B8}
.wk.down{background:color-mix(in srgb,var(--c) 30%,#fff)}
.wk.next{animation:bounce .7s infinite;background:color-mix(in srgb,var(--c) 20%,#fff)}
@keyframes bounce{50%{transform:translateY(8px)}}
.bk{position:absolute;top:0;width:4.4%;height:60%;background:linear-gradient(#334155,#0F172A);border-radius:0 0 8px 8px;z-index:2}
.bk.down{background:#475569}
.xylo,.bells{display:flex;gap:10px;align-items:center;justify-content:center;width:100%;max-width:1000px;height:min(50vh,380px)}
.xylo .bar{flex:1;height:var(--h);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#000) 0,var(--c) 30%,color-mix(in srgb,var(--c) 70%,#fff) 70%,var(--c));border-radius:14px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;color:#fff;font-size:22px;box-shadow:0 6px 0 rgba(0,0,0,.15);position:relative}
.xylo .bar::before,.xylo .bar::after{content:"";position:absolute;left:50%;width:14px;height:14px;border-radius:50%;background:#E5E7EB;transform:translateX(-50%)}
.xylo .bar::before{top:12%}.xylo .bar::after{bottom:22%}
.bells .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:color-mix(in srgb,var(--c) 18%,#fff);border-radius:22px;padding:20px 4px;font-size:20px;color:var(--c);border:4px solid var(--c)}
.bells .bell{font-size:56px;transform-origin:50% 0}
.bar.down{transform:scale(.96)}.bells .bar.down .bell{animation:ring .25s 2}
.bar.next{animation:bounce .7s infinite}
@keyframes ring{25%{transform:rotate(18deg)}75%{transform:rotate(-18deg)}}
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%;max-width:900px}
.pad{aspect-ratio:1.2;border-radius:26px;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 40%,#fff),var(--c));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;box-shadow:0 8px 0 color-mix(in srgb,var(--c) 70%,#000);touch-action:none}
.pad span{font-size:52px}.pad.down{transform:translateY(6px);box-shadow:0 2px 0 color-mix(in srgb,var(--c) 70%,#000)}
.chords{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chords button{min-width:72px;height:64px;font-size:24px;font-weight:900;border-radius:16px;background:#fff;box-shadow:0 5px 0 #E8DCC7}
.chords button.on{background:var(--pri);color:#fff;box-shadow:0 5px 0 #D9661F}
.strings{width:100%;max-width:900px;height:min(46vh,360px);background:linear-gradient(90deg,#92400E,#B45309 30%,#92400E);border-radius:26px;display:flex;flex-direction:column;justify-content:space-evenly;padding:0 20px;touch-action:none;box-shadow:var(--sh)}
.str{height:var(--w);background:linear-gradient(#F8FAFC,#94A3B8);border-radius:4px;box-shadow:0 2px 2px rgba(0,0,0,.3);position:relative}
.str::before{content:"";position:absolute;inset:-18px 0}
.str.vib{animation:vib .35s}
@keyframes vib{20%{transform:translateY(-3px)}40%{transform:translateY(3px)}60%{transform:translateY(-2px)}80%{transform:translateY(1px)}}
.song-list{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.song-card{width:150px;padding:18px 10px;border-radius:22px;background:color-mix(in srgb,var(--c) 18%,#fff);border:4px solid var(--c);font-weight:800;font-size:17px}
.karaoke{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--sh);width:100%;min-height:150px;position:relative}
.ball-bounce{font-size:20px;animation:bounce .3s infinite;height:24px}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;width:100%}
.sb{aspect-ratio:1;font-size:70px;background:#fff;border-radius:26px;box-shadow:0 6px 0 #E8DCC7}
.simon{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(420px,80vw);aspect-ratio:1}
.sp{border-radius:30px;background:var(--c);opacity:.55;box-shadow:0 8px 0 rgba(0,0,0,.15);touch-action:none}
.sp:nth-child(1){border-top-left-radius:50%}.sp:nth-child(2){border-top-right-radius:50%}.sp:nth-child(3){border-bottom-left-radius:50%}.sp:nth-child(4){border-bottom-right-radius:50%}
.sp.lit{opacity:1;filter:brightness(1.2);transform:scale(1.03)}
.beat-dots{display:flex;gap:12px}.beat-dots i{width:34px;height:34px;border-radius:50%;background:#E2E8F0}.beat-dots i.on{background:var(--pri)}
.clapper{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#FDE68A,#F59E0B);font-size:96px;box-shadow:0 10px 0 #B45309;touch-action:none}
.clapper.down{transform:translateY(8px);box-shadow:0 2px 0 #B45309}
.dance .move{font-size:160px;transition:transform .15s}.dance .move.bop{transform:scale(1.1) rotate(6deg)}
.dance.frozen{filter:hue-rotate(180deg)}.dance.frozen .move{animation:none}

/* lab */
.drill{width:100%;max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.dq{font-size:clamp(34px,6vw,56px);font-weight:900;text-align:center;background:#fff;border-radius:24px;padding:20px;box-shadow:var(--sh)}
.dans{font-size:48px;font-weight:900;text-align:center;min-height:64px;color:var(--blue);border-radius:18px}
.dans.flash-ok{background:#DCFCE7}.dans.flash-bad{background:#FEE2E2}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.keypad .go{grid-column:span 2}
.keypad button{height:74px;border-radius:18px;background:#fff;font-size:32px;font-weight:900;box-shadow:0 5px 0 #E8DCC7}
.keypad .go{background:var(--ok);color:#fff;box-shadow:0 5px 0 #15803D}
.big-stat{font-size:56px;font-weight:900;text-align:center}.big-stat small{font-size:22px;color:var(--muted)}
.report{background:#fff;border-radius:26px;padding:24px;box-shadow:var(--sh);width:100%;max-width:640px;text-align:center;font-size:18px}
.report table{width:100%;text-align:left;margin:14px 0;border-collapse:collapse}.report td{padding:6px;border-bottom:1px solid #F1F5F9}
.grade{font-size:84px;font-weight:900;width:130px;height:130px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;color:#fff}
.gA{background:#22C55E}.gB{background:#3B82F6}.gC{background:#F59E0B}.gD{background:#EF4444}
.story-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;width:100%}
.story-pick button{background:#fff;border-radius:24px;padding:16px 8px;box-shadow:0 6px 0 #E8DCC7;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800}
.story-pick small{font-size:15px}
.storybook{width:100%;max-width:860px;margin:auto;background:#FFFDF7;border-radius:30px;padding:26px;box-shadow:var(--sh);text-align:center;border:3px solid #FDE68A}
.page-art{font-size:110px;letter-spacing:10px}
.page-text{font-size:clamp(22px,3vw,30px);line-height:1.5;font-weight:700}
.pg{color:var(--muted);font-weight:700;margin-top:10px}
.reader h2{font-size:28px;margin-bottom:10px}
.passage{text-align:left;font-size:clamp(20px,2.6vw,27px);line-height:1.7;font-weight:600}
.passage p{margin:6px 0;padding:4px 10px;border-radius:12px;transition:background .2s}.passage p.cur{background:#FEF9C3}
.w{border-radius:6px;cursor:pointer}.w.lit{background:#BFDBFE}
.hint-line{color:var(--muted);font-weight:700;margin-top:8px}
.chat{flex:1;display:flex;flex-direction:column;gap:10px;width:100%;max-width:880px;margin:0 auto;min-height:0}
.msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:6px}
.msg{max-width:80%;padding:14px 18px;border-radius:22px;font-size:19px;line-height:1.45;font-weight:600;-webkit-user-select:text;user-select:text}
.msg.bot{background:#fff;box-shadow:var(--sh);align-self:flex-start;border-bottom-left-radius:6px}
.msg.me{background:var(--blue);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.msg img{max-width:220px;border-radius:12px;display:block;margin-bottom:6px}
.warn{background:#FEF3C7;border-radius:16px;padding:12px 16px;font-weight:700}
.sugg{display:flex;gap:8px;overflow-x:auto}.sugg button{white-space:nowrap;background:#fff;border-radius:99px;padding:10px 14px;font-weight:700;box-shadow:var(--sh)}
.composer{display:flex;gap:8px;align-items:center}
.composer input{flex:1;font-size:19px;padding:14px 16px;border-radius:16px;border:2px solid var(--line);outline:none}
.cam{font-size:30px;width:56px;height:56px;display:grid;place-items:center;background:#fff;border-radius:16px;box-shadow:var(--sh)}
.thumb img{width:52px;height:52px;object-fit:cover;border-radius:10px}
.typing i{display:inline-block;width:8px;height:8px;margin:0 2px;border-radius:50%;background:#94A3B8;animation:pulse 1s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}

/* result & modals */
.result,.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(30,41,59,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:16px}
.rcard,.mcard{background:#fff;border-radius:32px;padding:28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);width:min(520px,100%);animation:rise .35s}
@keyframes rise{from{transform:translateY(40px) scale(.9);opacity:0}}
.rcard h2,.mcard h2{font-size:30px;margin:6px 0}.rcard p{font-size:20px;font-weight:700}
.rstars{display:flex;justify-content:center;gap:8px;font-size:78px;color:#E2E8F0}
.rstars span.on{color:var(--gold);animation:starpop .5s backwards;animation-delay:var(--d);text-shadow:0 4px 0 #D97706}
@keyframes starpop{from{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.3)}}
.big-stk{font-size:120px;animation:boing .8s}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:16px 0}
.plist button{background:#F8FAFC;border-radius:20px;padding:12px;display:flex;flex-direction:column;align-items:center;font-weight:800;border:3px solid transparent}
.plist button span{font-size:48px}.plist button.on{border-color:var(--pri)}.plist small{color:var(--muted)}
.gate-q{font-size:44px;font-weight:900;margin:10px 0}
.gate-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.gate-opts button{height:64px;border-radius:16px;background:#F1F5F9;font-size:24px;font-weight:800}
.modal.full{place-items:stretch;padding:0}
.pc{background:var(--bg);display:flex;flex-direction:column;height:100%;padding:calc(var(--safe-t) + 12px) 16px calc(16px + var(--safe-b));overflow:hidden}
.pc header{display:flex;align-items:center;justify-content:space-between;max-width:1000px;width:100%;margin:0 auto}
.pctabs{display:flex;gap:8px;overflow-x:auto;padding:12px 0;max-width:1000px;width:100%;margin:0 auto}
.pctabs button{background:#fff;padding:12px 16px;border-radius:14px;font-weight:800;white-space:nowrap;box-shadow:var(--sh)}.pctabs button.on{background:var(--ink);color:#fff}
.pcbody{flex:1;overflow:auto;max-width:1000px;width:100%;margin:0 auto;padding-bottom:30px}
.pcbody h3{margin:20px 0 10px}
.psel{display:flex;gap:8px;flex-wrap:wrap}.psel button{background:#fff;padding:10px 14px;border-radius:99px;font-weight:800;box-shadow:var(--sh)}.psel button.on{background:var(--pri);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.kpis div{background:#fff;border-radius:18px;padding:14px;box-shadow:var(--sh)}.kpis b{font-size:26px;display:block}.kpis small{color:var(--muted);font-weight:700}
.week{display:flex;gap:10px;align-items:flex-end;height:150px;background:#fff;border-radius:18px;padding:14px;box-shadow:var(--sh)}
.week div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-weight:700}
.week i{width:70%;background:linear-gradient(var(--pri),#FFB347);border-radius:8px 8px 4px 4px;min-height:3px}.week small{color:var(--muted)}
.accs{background:#fff;border-radius:18px;padding:12px 16px;box-shadow:var(--sh)}
.accrow{display:grid;grid-template-columns:minmax(150px,1.2fr) 2fr 52px 52px;gap:10px;align-items:center;padding:6px 0;font-weight:700}
.accbar{height:14px;background:#F1F5F9;border-radius:99px;overflow:hidden}.accbar i{display:block;height:100%;border-radius:99px}
.accrow small{color:var(--muted)}
.insight{background:#EFF6FF;border-radius:16px;padding:14px;margin-top:12px;font-size:17px}
.log{background:#fff;border-radius:18px;padding:6px 14px;box-shadow:var(--sh)}
.log div{display:grid;grid-template-columns:1fr 70px 50px 130px;gap:8px;padding:8px 0;border-bottom:1px solid #F1F5F9;align-items:center;font-weight:600}.log span:nth-child(2){color:var(--gold)}
.prow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:10px 14px;box-shadow:var(--sh);grid-column:1/-1}
.prow .av{font-size:36px}.prow small{color:var(--muted);margin-right:auto}
.plist.big{grid-template-columns:1fr}
.form{display:flex;flex-direction:column;gap:12px;max-width:640px}
.form label{display:flex;align-items:center;gap:12px;justify-content:space-between;background:#fff;padding:12px 16px;border-radius:16px;font-weight:800;box-shadow:var(--sh)}
.form select,.form input[type=password]{font-size:16px;padding:10px;border-radius:12px;border:2px solid var(--line);min-width:200px}
.form input[type=checkbox]{width:28px;height:28px}
.note{color:var(--muted);font-weight:600;font-size:15px}
.install ol{font-size:20px;line-height:2;font-weight:600}.install .ok{font-size:20px;font-weight:800;color:#15803D}
.kbd{background:#fff;border-radius:10px;padding:2px 10px;box-shadow:var(--sh)}

/* onboarding */
.onboard{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:20px 0}
.onboard .logo{font-size:110px;animation:float 3s infinite}
.onboard h1{font-size:44px;background:linear-gradient(90deg,#FF8A3D,#FF5E62,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.onboard p{font-size:20px;font-weight:700;color:var(--muted)}
.ob-card{background:#fff;border-radius:30px;padding:24px;box-shadow:var(--sh);width:min(560px,100%);display:flex;flex-direction:column;gap:10px;text-align:left}
.ob-card label{font-weight:800;font-size:18px;margin-top:6px}
.ob-card input#nm{font-size:24px;padding:14px 16px;border-radius:16px;border:3px solid var(--line);outline:none;font-weight:700}
.ob-card input#nm:focus{border-color:var(--pri)}
.avs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.avs button{font-size:40px;aspect-ratio:1;border-radius:18px;background:#F8FAFC;border:3px solid transparent}.avs button.on{border-color:var(--pri);background:#FFF1E2}
input[type=range]{accent-color:var(--pri);width:100%;height:30px}

/* worksheets */
.ws-ctrl{background:#fff;border-radius:22px;padding:14px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.ws-types{display:flex;flex-wrap:wrap;gap:8px}.ws-types button{background:#F8FAFC;border-radius:12px;padding:10px 12px;font-weight:700;border:2px solid transparent}.ws-types button.on{border-color:var(--pri);background:#FFF1E2}
.ws-ctrl label{font-weight:800;display:flex;align-items:center;gap:10px}.ws-ctrl label input{max-width:260px}
.sheet-wrap{overflow-x:auto}
.sheet{background:#fff;width:100%;max-width:820px;margin:0 auto;padding:36px 40px;border-radius:8px;box-shadow:0 4px 30px rgba(0,0,0,.12);color:#111;-webkit-user-select:text;user-select:text}
.sh-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-bottom:3px solid #111;padding-bottom:10px;margin-bottom:20px;font-size:18px}
.sh-head .line{display:inline-block;min-width:150px;border-bottom:2px solid #111;font-weight:700}
.ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;font-size:24px;font-weight:700}
.ws-grid.one{grid-template-columns:1fr}.ws-grid.three{grid-template-columns:repeat(3,1fr)}
.wq small{color:#64748B;margin-right:6px}
.wq .blank{min-width:90px;border-bottom:2px solid #111;color:#111;text-align:center}.wq .blank.sm{min-width:60px}
.ans{color:#DC2626;visibility:hidden}.ans.show{visibility:visible}
.cnt{display:flex;align-items:center;gap:10px}.cobj{font-size:26px;max-width:260px;line-height:1.3;word-break:break-all}
.word{}.wq.word{display:flex;align-items:center;gap:14px}.wemo{font-size:52px}.wlines{flex:1;border-bottom:2px solid #111;height:44px;text-align:center}
.clk{display:flex;flex-direction:column;align-items:center;gap:6px}
.trow{margin:4px 0 10px}.trow svg{width:100%;height:auto}
.sh-foot{text-align:center;margin-top:26px;color:#64748B;font-weight:700}

/* misc */
#toast{position:fixed;left:50%;bottom:calc(110px + var(--safe-b));transform:translate(-50%,40px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:99px;font-weight:800;font-size:18px;opacity:0;transition:all .3s;z-index:300;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.ios-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + var(--safe-b));background:#1E293B;color:#fff;padding:12px 16px;border-radius:18px;font-weight:700;z-index:40;display:flex;align-items:center;gap:8px;box-shadow:var(--sh);width:max-content;max-width:94vw}
.ios-hint button{color:#fff;font-size:18px;margin-left:6px}

@media (max-width:700px){
  .q-opts{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}
  .pads{grid-template-columns:repeat(2,1fr)}
  .chips .chip:first-child{display:none}
  .me .nm{display:none}
  .accrow{grid-template-columns:1fr 1fr 44px}.accrow small{display:none}
  .ws-grid{grid-template-columns:1fr}
}
@media (orientation:portrait) and (min-width:700px){.match{gap:90px}}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff}
  body *{visibility:hidden}
  .sheet,.sheet *{visibility:visible}
  .sheet{position:absolute;left:0;top:0;width:100%;max-width:none;box-shadow:none;padding:0}
  .tabs,.top,.ios-hint{display:none}
}