/* LearnDoKids Studio – play + draw pages. Scoped to .studio / body.studio-page so nothing else changes. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');
:root{--s-navy:#0b1f5c;--s-ink:#14286b;--s-blue:#2563eb;--s-sky:#eef5ff;--s-line:#dbe6fb;--s-green:#1fa855;--s-purple:#7c3aed;--s-orange:#ff8a00;--s-muted:#64748b;--s-disp:'Fredoka',ui-rounded,'Nunito','Segoe UI',system-ui,sans-serif}
[hidden]{display:none!important}
body.studio-page{background:linear-gradient(180deg,#f3f7ff,#eaf1ff 60%,#f7f9ff)}
body.studio-page .dash-content{padding-top:14px}
.studio{max-width:1380px;margin:0 auto;color:var(--s-ink);font-family:var(--s-disp)}
.studio button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.studio .ic{display:block;flex:none}
.studio :focus-visible{outline:3px solid #f59e0b;outline-offset:2px}

/* header row */
.studio-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.round-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--s-line);background:#fff;color:var(--s-blue);display:grid;place-items:center;box-shadow:0 4px 12px rgba(37,99,235,.1);text-decoration:none}
.round-btn:hover{background:var(--s-sky)}
.meter{flex:1 1 220px;display:flex;align-items:center;gap:12px;min-width:0}
.meter-bar{flex:1;height:14px;border-radius:99px;background:#dfe8fb;overflow:hidden;box-shadow:inset 0 1px 3px rgba(11,31,92,.12)}
.meter-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#2f6bff,#38bdf8);transition:width .35s cubic-bezier(.2,.9,.3,1)}
.meter-lab{font-weight:600;color:var(--s-blue);font-size:.95rem;white-space:nowrap}
.age-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:#ece6ff;color:#5b3fd0;font-weight:600;font-size:.9rem}
.studio-head .head-tools{display:flex;gap:8px}

/* 3-column grid */
.studio-grid{display:grid;grid-template-columns:116px minmax(0,1fr) 300px;gap:16px;align-items:start}
.card-surface,.pal,.tools .card{background:#fff;border:1px solid var(--s-line);border-radius:22px;box-shadow:0 10px 30px rgba(20,40,107,.07)}

/* palette rail */
.pal{padding:12px 10px;position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:hidden auto;scrollbar-width:thin}
.pal-toggle{display:none}
.pal-top{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.pal-wheel{width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.2);background:radial-gradient(circle closest-side,#fff 0,rgba(255,255,255,0) 75%),conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);padding:0}
.pal-favbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--s-line);background:#fff;color:#94a3b8;display:grid;place-items:center;padding:0}
.pal-favbtn.on{color:#ef4444;background:#fff1f2;border-color:#fecdd3}.pal-favbtn.on svg{fill:currentColor}
.pal-cur{margin:0 auto 10px;width:64px;height:64px;border-radius:18px;border:1px solid var(--s-line);background:repeating-conic-gradient(#f1f5f9 0 25%,#fff 0 50%) 0 0/12px 12px;padding:5px;cursor:pointer}
.pal-cur i{display:block;width:100%;height:100%;border-radius:13px;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(15,23,42,.12)}
.pal-cur i svg{display:block;width:100%;height:100%}
.pal-lab{font-size:.72rem;font-weight:600;color:var(--s-muted);margin:10px 2px 6px;text-align:center}
.pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;justify-items:center}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 2px 6px rgba(15,23,42,.22);padding:0;transition:transform .12s}
.sw:hover{transform:scale(1.08)}
.sw.sw-light{box-shadow:0 0 0 2px #cbd5e1}
.sw.on{transform:scale(1.14);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--s-blue)}
.pal-big .sw{width:46px;height:46px}.pal-big .pal-grid{gap:12px}

/* stage */
.stage{min-width:0}
.stage-vp{position:relative;overflow:hidden;border-radius:26px;background:radial-gradient(120% 90% at 50% 0,#fffdf7,#fff6e6);border:1px solid #f0e3c8;box-shadow:inset 0 0 0 5px #fff,0 14px 36px rgba(20,40,107,.1);display:grid;place-items:center;padding:10px;min-height:420px;touch-action:none;user-select:none;-webkit-user-select:none}
.stage-vp.zoomed{cursor:grab}
.stage-vp[data-mode=brush],.stage-vp[data-mode=eraser]{cursor:crosshair}
.stack{position:relative;width:min(100%,calc((100vh - 215px)*var(--ar,1)));min-width:260px;max-width:1200px;aspect-ratio:var(--ar,1);transform-origin:50% 50%;will-change:transform;background:#fff;border-radius:18px;box-shadow:0 6px 22px rgba(20,40,107,.1)}
.stack>svg,.stack>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stack #colorSvg{border-radius:18px}
.stack .layer-brush,.stack .layer-line{pointer-events:none}
.stack .layer-brush.clip{-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.stack .layer-stk{pointer-events:none;overflow:visible}
.stack.mode-sticker .sticker,.stack.mode-eraser .sticker{pointer-events:all;cursor:grab}
#colorSvg .deco,#colorSvg .deco *{pointer-events:none!important}
#colorSvg .colorable{cursor:pointer}
.stack.mode-brush #colorSvg .colorable,.stack.mode-eraser #colorSvg .colorable{cursor:crosshair}
.ldk-flash{animation:ldkFlash .38s ease}
@keyframes ldkFlash{40%{filter:brightness(1.18) saturate(1.25)}}
.ldk-hint{animation:ldkHint .7s ease-in-out 4}
@keyframes ldkHint{50%{fill:#fde68a}}
.stage-note{text-align:center;color:var(--s-muted);font-size:.9rem;margin:10px 0 0;font-family:inherit}

/* tools */
.tools{display:flex;flex-direction:column;gap:12px;min-width:0}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#e7eefc;border-radius:20px;padding:5px;gap:4px}
.seg button{border:0;background:transparent;border-radius:16px;padding:12px 6px;font-weight:600;font-size:1rem;color:#4b5f94;display:flex;flex-direction:column;align-items:center;gap:4px}
.seg button.on{background:linear-gradient(180deg,#2f7bff,#1d5df0);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.35)}
.tool-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{flex:1 1 auto;border:1px solid var(--s-line);background:#fff;color:var(--s-ink);border-radius:14px;padding:9px 12px;font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.chip.on{background:#fff3df;border-color:#ffc46b;color:#b45309}
.tools .card{padding:12px 14px}
.card h3{margin:0 0 8px;font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--s-ink)}
.card .fold-btn{margin-left:auto;border:0;background:transparent;color:var(--s-blue);padding:2px;display:grid;place-items:center;transition:transform .2s}
.card.open .fold-btn{transform:rotate(90deg)}
.stk-grid,.pat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stk,.pat{border:2px solid transparent;background:#f4f7ff;border-radius:14px;padding:4px;aspect-ratio:1;display:grid;place-items:center}
.stk svg,.pat svg{width:100%;height:100%;display:block}
.stk.on,.pat.on{border-color:var(--s-blue);background:#e8f0ff;box-shadow:0 4px 10px rgba(37,99,235,.2)}
.pat-solid i{display:block;width:78%;height:78%;border-radius:10px}
.tabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}.tab{border:0;background:#eef2fb;border-radius:99px;padding:5px 12px;font-size:.8rem;font-weight:600;color:#4b5f94}.tab.on{background:var(--s-blue);color:#fff}
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.styles button{border:2px solid transparent;background:#f4f7ff;border-radius:12px;padding:7px 2px;font-size:.78rem;font-weight:600;color:var(--s-ink)}
.styles button span{display:block;font-size:1.25rem;line-height:1.2}.styles button.on{border-color:var(--s-blue);background:#e8f0ff}
.range{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600;color:var(--s-muted);margin:6px 0}
.range input{flex:1;accent-color:var(--s-blue);height:28px}
.switch{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--s-ink);margin-top:8px}
.switch input{width:44px;height:26px;appearance:none;-webkit-appearance:none;background:#cbd5e1;border-radius:99px;position:relative;transition:.2s;flex:none;cursor:pointer}
.switch input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked{background:var(--s-green)}.switch input:checked::after{left:21px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soft-btn{border:0;border-radius:16px;background:#e2edff;color:#1d4ed8;padding:12px;font-weight:600;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:8px}
.soft-btn:disabled{background:#f1f5f9;color:#aab4c8;cursor:default}
.zoom-row{display:grid;grid-template-columns:48px 1fr 48px 48px;gap:8px;align-items:center}
.zoom-row .soft-btn{padding:10px 0}.zoom-row .soft-btn.on{background:#ffe6b8;color:#b45309}
.zoom-pct{text-align:center;background:#f1f5fb;border-radius:14px;padding:11px 0;font-weight:600;color:var(--s-muted);font-size:.9rem}
.missions{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.missions li{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--s-ink)}
.missions .mk{width:22px;height:22px;border-radius:50%;border:2px solid #cbd5e1;display:grid;place-items:center;color:#fff;flex:none}
.missions li.done .mk{background:var(--s-green);border-color:var(--s-green)}.missions li.done{color:#15803d}
.missions small{margin-left:auto;color:var(--s-muted)}
.sound-row{display:flex;align-items:center;gap:10px;font-weight:600}
.sound-row .switch{margin:0 0 0 auto}

/* bottom action bar */
.studio-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px;position:sticky;bottom:0;z-index:20;padding:12px 0 10px;background:linear-gradient(0deg,#eef3ff 65%,rgba(238,243,255,0))}
.act{border:0;border-radius:99px;padding:15px 30px;font-weight:600;font-size:1.05rem;display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;box-shadow:0 10px 22px rgba(20,40,107,.2);transition:transform .15s}
.act:hover{transform:translateY(-2px)}
.act-new{background:#fff;color:var(--s-blue);border:2px solid #9ec3ff;box-shadow:none}
.act-save{background:linear-gradient(180deg,#2bb866,#1a9a52)}.act-print{background:linear-gradient(180deg,#8b5cf6,#6d3de0)}
.act-done{background:linear-gradient(180deg,#ffa01f,#ff7a00);padding-inline:44px}
.act-done.ready{animation:readyPulse 1.6s ease-in-out infinite}
@keyframes readyPulse{50%{transform:scale(1.06);box-shadow:0 0 0 10px rgba(255,138,0,.18)}}

/* colour wheel popover */
.cw-pop{position:fixed;z-index:1200;width:248px;background:#fff;border-radius:22px;padding:16px;box-shadow:0 24px 60px rgba(11,31,92,.3);border:1px solid var(--s-line);font-family:var(--s-disp)}
.cw-wrap{position:relative;width:200px;height:200px;margin:0 auto 10px;touch-action:none}
.cw-wheel{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle closest-side,#fff 0,rgba(255,255,255,0) 100%),conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);box-shadow:inset 0 0 0 4px #fff,0 4px 14px rgba(0,0,0,.18)}
.cw-knob{position:absolute;width:26px;height:26px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px #1e293b,0 3px 8px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none}
.cw-light{display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:600;color:var(--s-muted)}.cw-light input{flex:1;accent-color:#1e293b}
.cw-row{display:flex;align-items:center;gap:8px;margin:10px 0}
.cw-prev{width:38px;height:38px;border-radius:12px;box-shadow:inset 0 0 0 2px rgba(15,23,42,.15);flex:none}
.cw-hex{flex:1;min-width:0;border:1px solid var(--s-line);border-radius:12px;padding:9px 10px;font:600 .95rem ui-monospace,Menlo,monospace;color:var(--s-ink)}
.cw-fav{width:38px;height:38px;border-radius:12px;border:1px solid #fecdd3;background:#fff1f2;color:#ef4444;display:grid;place-items:center;padding:0}
.cw-ok{width:100%;border:0;border-radius:14px;background:var(--s-blue);color:#fff;padding:12px;font:600 1rem var(--s-disp)}
@media(max-width:759px){.cw-pop.cw-sheet{left:8px!important;right:8px;bottom:8px;top:auto!important;width:auto;max-width:420px;margin:0 auto}}

/* effects, toast, modals */
.ldk-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:#0b1f5c;color:#fff;padding:12px 20px;border-radius:99px;font:600 .95rem var(--s-disp);z-index:1500;box-shadow:0 10px 28px rgba(11,31,92,.35);animation:tIn .25s ease}
.ldk-toast.out{opacity:0;transition:opacity .35s}@keyframes tIn{from{opacity:0;transform:translate(-50%,10px)}}
.fx-confetti{position:fixed;inset:0;pointer-events:none;z-index:1400;overflow:hidden}
.fx-confetti i{position:absolute;top:-16px;width:10px;height:16px;border-radius:2px;animation:fall linear forwards}@keyframes fall{to{top:105vh;margin-left:40px}}
.fx-star{position:fixed;z-index:1400;pointer-events:none;animation:starOut .9s ease-out forwards;text-shadow:0 2px 4px rgba(0,0,0,.2)}
@keyframes starOut{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(120deg);opacity:0}}
.fx-ribbon-wrap{position:absolute;inset:0;pointer-events:none;z-index:6;transition:opacity .7s}.fx-ribbon-wrap.out{opacity:0}
.fx-ribbon{position:absolute;left:50%;top:7%;transform:translateX(-50%) rotate(-3deg);display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#fff3a8,#ffe066);padding:12px 34px 12px 18px;border-radius:40px 60px 60px 40px;box-shadow:0 10px 24px rgba(180,120,0,.3);color:var(--s-navy);font:700 clamp(1.1rem,3vw,1.7rem) var(--s-disp);white-space:nowrap;animation:ribIn .6s cubic-bezier(.2,1.5,.4,1)}
.fx-ribbon-star{font-size:2rem;color:#f59e0b;text-shadow:0 2px 0 #fff}@keyframes ribIn{from{transform:translateX(-50%) rotate(-3deg) scale(.3);opacity:0}}
.fx-sprinkle{position:absolute;width:7px;height:22px;border-radius:5px;transform:rotate(var(--r));animation:spr .6s ease-out backwards}@keyframes spr{from{transform:rotate(var(--r)) scale(0);opacity:0}}
.ldk-modal{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:16px;background:rgba(11,31,92,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ldk-modal[hidden]{display:none!important}
.ldk-card{background:#fff;border-radius:30px;padding:30px 30px 24px;width:min(460px,100%);text-align:center;box-shadow:0 30px 70px rgba(11,31,92,.4);animation:pop .4s cubic-bezier(.2,1.4,.4,1);font-family:var(--s-disp);color:var(--s-ink);max-height:92vh;overflow:auto}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.ldk-card h2{font-size:clamp(1.6rem,6vw,2.1rem);margin:6px 0;color:var(--s-blue)}.ldk-card p{color:var(--s-muted);margin:0 0 14px;font-family:inherit}
.big-stars{font-size:2.6rem;letter-spacing:.1em;color:#facc15;text-shadow:0 3px 0 #f59e0b}.big-stars b{display:inline-block;animation:starIn .5s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes starIn{from{transform:scale(0) rotate(-90deg)}}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0 16px}
.badge{background:#f4f1ff;border-radius:18px;padding:10px 14px;font-weight:600;font-size:.85rem;display:grid;gap:2px;min-width:92px}.badge span{font-size:1.8rem}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.modal-actions .act{padding:12px 22px;font-size:.95rem}
.save-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin:12px 0}
.save-grid label span{display:block;font-size:.75rem;font-weight:600;color:var(--s-muted);margin-bottom:4px}
.save-grid select{width:100%;padding:10px;border-radius:12px;border:1px solid var(--s-line);min-height:44px;font:600 .95rem var(--s-disp)}
.wm-note{font-size:.8rem;color:#b45309;text-align:left;margin:0 0 10px;font-family:inherit}.wm-note a{color:#b45309;font-weight:700}

/* focus mode */
body.studio-focus .dash-sidebar,body.studio-focus .dash-topbar{display:none!important}
body.studio-focus .dash-main{margin:0!important}
body.studio-focus .stack{width:min(100%,calc((100vh - 150px)*var(--ar,1)))}

/* mobile: stage first, collapsible colour strip, compact tools */
@media(max-width:1100px){.studio-grid{grid-template-columns:100px minmax(0,1fr)}.tools{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));align-items:start}.tools>.seg,.tools>.tool-row{grid-column:1/-1}}
@media(max-width:800px){
  .studio-grid{grid-template-columns:1fr}.stage{order:1}.pal{order:2;position:static;max-height:none}.tools{order:3}
  .pal-toggle{display:flex;width:100%;align-items:center;gap:10px;border:0;background:transparent;font-weight:600;color:var(--s-ink);padding:2px 4px 8px}
  .pal-toggle-sw{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 4px #cbd5e1}.pal-toggle [data-ic]{margin-left:auto}
  .pal-body{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-start}.pal-top,.pal-cur{margin:0}.pal-cur{width:48px;height:48px}.pal-lab{display:none}
  .pal-sec{flex:1 1 100%}.pal-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}.sw{width:42px;height:42px}
  .pal-collapsed .pal-sec:not(.pal-main){display:none}.pal-collapsed .pal-main .pal-grid{flex-wrap:nowrap;overflow-x:auto;padding:8px 8px 10px;scrollbar-width:none}
  .pal-collapsed .pal-toggle [data-ic]{transform:rotate(-90deg)}
  .stage-vp{padding:6px;border-radius:20px;min-height:260px}.stack{width:min(100%,calc((100vh - 250px)*var(--ar,1)));min-width:220px}
  .studio-actions{gap:6px;flex-wrap:nowrap;padding:8px 0 6px}.studio-actions .act{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;padding:9px 4px;font-size:.74rem;border-radius:18px;justify-content:center}.studio-actions .act-done{padding-inline:4px}
  .ldk-toast{bottom:84px}
}
@media(prefers-reduced-motion:reduce){.fx-ribbon,.ldk-card,.act-done.ready,.ldk-hint,.ldk-flash{animation:none}.meter-bar i{transition:none}}

.act{text-align:center}
/* free draw */
.draw-stack{position:relative;width:min(100%,calc((100vh - 230px)*1.3333));min-width:280px;max-width:1200px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 6px 22px rgba(20,40,107,.12);background:#fff;touch-action:none}
.draw-stack canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.draw-stack[data-mode=brush],.draw-stack[data-mode=eraser]{cursor:crosshair}.draw-stack[data-mode=fill],.draw-stack[data-mode=stamp]{cursor:copy}
.draw-stack.sym-mirror::after,.draw-stack.sym-quad::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(37,99,235,.45) 0 calc(50% + 1px),transparent 0)}
.draw-stack.sym-quad::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(0deg,transparent calc(50% - 1px),rgba(37,99,235,.45) 0 calc(50% + 1px),transparent 0)}
.idea{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--s-line);border-radius:99px;padding:6px 8px 6px 18px;font-weight:600;color:var(--s-ink);box-shadow:0 6px 16px rgba(20,40,107,.06);flex:1 1 260px;min-width:0}
.idea #ideaText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.idea .round-btn{width:38px;height:38px;box-shadow:none}
.sym-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.sym-row button{border:2px solid transparent;background:#f4f7ff;border-radius:12px;padding:8px 2px;font-weight:600;font-size:.78rem;color:var(--s-ink)}.sym-row button.on{border-color:var(--s-blue);background:#e8f0ff}
.bg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bg-sw{border:2px solid transparent;border-radius:14px;aspect-ratio:1;padding:0;background:var(--b);box-shadow:inset 0 0 0 1px rgba(15,23,42,.12);position:relative;overflow:hidden}
.bg-sw.on{border-color:var(--s-blue);box-shadow:0 4px 10px rgba(37,99,235,.25)}
.bg-sw span{position:absolute;left:0;right:0;bottom:2px;font-size:.62rem;font-weight:600;color:#1e293b;text-shadow:0 0 3px #fff}

.fx-praise{position:fixed;z-index:1450;pointer-events:none;transform:translate(-50%,-50%);font:700 1.5rem var(--s-disp);text-shadow:0 2px 0 #fff,0 0 8px #fff;animation:praiseUp 1.1s ease-out forwards}
@keyframes praiseUp{from{opacity:0;transform:translate(-50%,-10%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}to{opacity:0;transform:translate(-50%,-190%) scale(1)}}

/* press + learn */
.ldk-press{filter:brightness(.93)}
.learn-pill{border:0;border-radius:99px;background:linear-gradient(180deg,#ffd23f,#ffb020);color:#5a3a00;padding:10px 18px;font:600 .95rem var(--s-disp);display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 14px rgba(255,176,32,.35)}
.learn-pill.sm{padding:8px 14px;font-size:.85rem;box-shadow:none;background:#fff3c4}
.fact-bar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ffe08a;border-radius:20px;padding:10px 12px;margin-top:10px;box-shadow:0 8px 20px rgba(255,176,32,.15)}
.fact-bar p{flex:1;margin:0;font-size:.95rem;line-height:1.35;color:var(--s-ink);min-width:0}.fact-bar p b{color:#d97706}
.fact-ico{font-size:1.9rem;flex:none}.fact-bar .round-btn{width:40px;height:40px;flex:none;box-shadow:none}
.learn-card{width:min(560px,100%);text-align:left;position:relative}
.modal-x{position:absolute;right:14px;top:10px;width:40px;height:40px;border-radius:50%;border:0;background:#eef2fb;font-size:1.6rem;line-height:1;color:var(--s-ink)}
.ln-emoji{font-size:3.4rem;text-align:center;line-height:1.1}.learn-card h2{text-align:center}
.ln-letters,.ln-words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}
.ltr{width:52px;height:60px;border-radius:16px;border:2px solid #bcd3ff;background:#f1f6ff;font:700 1.8rem var(--s-disp);color:var(--s-blue);box-shadow:0 4px 0 #bcd3ff;transition:transform .15s}
.wrd{border:2px solid #d9c9ff;background:#f6f1ff;border-radius:14px;padding:8px 14px;font:600 1.15rem var(--s-disp);color:#5b3fd0}
.ltr.say-on,.wrd.say-on{background:#ffd23f;border-color:#ffb020;color:#5a3a00;transform:translateY(-6px) scale(1.12);box-shadow:0 8px 14px rgba(255,176,32,.45)}
.ln-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 4px}.ln-actions .act{padding:11px 18px;font-size:.95rem}
.ln-sec{margin-top:14px}.ln-sec h3{margin:0 0 8px;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.ln-facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}.ln-facts li{display:flex;gap:10px;align-items:center;background:#f4f7ff;border-radius:16px;padding:10px 12px;font-size:.98rem;line-height:1.35;color:var(--s-ink)}.ln-facts li span{flex:1}
.say-btn{border:0;background:#e2edff;color:var(--s-blue);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;padding:0}
.ln-answers{display:grid;gap:8px}.ans{border:2px solid #d6e2fb;background:#fff;border-radius:16px;padding:12px;font:600 1.02rem var(--s-disp);color:var(--s-ink);text-align:left}
.ans.right{background:#dcfce7;border-color:#22c55e;color:#166534}.ans.wrong{background:#fee2e2;border-color:#f87171;color:#991b1b;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ln-feed{margin:8px 0 0;font-weight:600;color:var(--s-blue);min-height:1.3em}