/* Parent screens: calm and formal. Child screens (.kid-mode) keep the playful look. The worksheet (.paper-mode) looks like paper. */
:root{
  --bg:#F5F6F8; --surface:#FFFFFF; --line:#E1E4E9; --text:#1E2533; --muted:#5F6878;
  --primary:#1F5FAF; --primary-dark:#174A8A; --primary-soft:#EAF1FB; --go:#1E8C57; --go-dark:#176E44;
  --danger:#C23B30; --warn:#A76A00;
  --font:'IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
  /* child palette */
  --sky:#CFEAFF; --sky-2:#A9DBFF; --paper:#FFFDF6; --ink:#1B2A4A; --kmuted:#51607F;
  --sun:#FFC83D; --sun-2:#F2A900; --leaf:#3DB36B; --leaf-2:#23884C; --coral:#FF6F61; --coral-2:#D94B3F; --blue-2:#2B7BD6;
  --kfont:'Baloo Bhaijaan 2','IBM Plex Sans Arabic',Tahoma,sans-serif;
  --sheetfont:'Andika','Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif;
  color-scheme:only light;
}
*{box-sizing:border-box}
html{background:var(--bg);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-family:var(--font);color:var(--text);font-size:17px;line-height:1.65;background:var(--bg);min-height:100vh}
[hidden]{display:none!important}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #7FAAE3;outline-offset:2px}
.app{max-width:1040px;margin:0 auto;padding-inline:16px;padding-block:12px 40px}
.muted{color:var(--muted)} .small{font-size:.88rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .row.center{justify-content:center}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-weight:700;font-size:1.3rem;color:var(--text)}
.brand .coin{width:36px;height:36px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center;font-size:1rem;color:var(--ink)}
.tool-btn{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px 12px;font-size:.92rem;color:var(--text)}

/* parent components */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.card-title{font-size:1.1rem;font-weight:700;margin:0 0 12px}
.card-head .card-title{margin:0}
.card-title.big{font-size:1.35rem}
h1{font-size:clamp(1.45rem,3.4vw,1.9rem);line-height:1.3;margin:6px 0 4px;text-wrap:balance}
.lede{color:var(--muted);margin:0 0 18px;max-width:62ch}
.section-title{font-size:1.15rem;margin:22px 0 12px}
.fields{display:flex;flex-wrap:wrap;gap:14px}
.field{display:grid;gap:4px;flex:1 1 170px;margin-bottom:10px}
.field label,.field > span{font-size:.9rem;font-weight:600;color:var(--muted)}
input[type=text],input[type=password],select,textarea{width:100%;border:1px solid #C9CED6;border-radius:10px;padding:8px 12px;background:#fff;min-height:44px}
textarea{min-height:140px;resize:vertical;line-height:1.7;margin-top:10px}
.seg{display:flex;border:1px solid #C9CED6;border-radius:10px;overflow:hidden;min-height:44px}
.seg-btn{flex:1;border:0;background:#fff;font-weight:600;color:var(--muted)}
.seg-btn + .seg-btn{border-inline-start:1px solid #C9CED6}
.seg-btn[aria-pressed="true"]{background:var(--primary);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:10px 18px;font-weight:600;border:1px solid transparent;text-decoration:none;min-height:46px}
.btn-wide{width:100%}
.btn-sm{min-height:38px;padding:5px 12px;font-size:.92rem}
.btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-dark)}
.btn-go{background:var(--go);color:#fff;font-size:1.1rem} .btn-go:hover{background:var(--go-dark)}
.btn-quiet{background:#fff;border-color:#C9CED6;color:var(--text)} .btn-quiet:hover{background:#F2F4F7}
.btn-danger{background:#fff;border-color:#E7B4AE;color:var(--danger)}
.btn-wa{background:#1FAF55;color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link-btn{background:none;border:0;padding:0;color:var(--primary);font-weight:600;text-decoration:underline}
.back{background:none;border:0;padding:4px 0;color:var(--primary);font-weight:600;margin-bottom:6px}
.check{display:flex;align-items:center;gap:10px;font-weight:500;margin:8px 0}
.check input{width:20px;height:20px;accent-color:var(--primary);flex:none}
.exam-toggle{background:var(--primary-soft);border:1px solid #C6D8F1;border-radius:10px;padding:10px 12px;align-items:flex-start;line-height:1.55}
.exam-toggle input{margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-check{display:flex;align-items:center;gap:6px;border:1px solid #C9CED6;border-radius:99px;padding:4px 12px;background:#fff;font-size:.92rem;cursor:pointer}
.chip-check input{accent-color:var(--primary)}
.chip-btn{border:1px solid #C9CED6;border-radius:99px;padding:5px 12px;background:#fff;font-size:.92rem}
.chip-btn[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{background:#F0F2F5;border-radius:99px;padding:1px 10px;font-size:.85rem;font-weight:600;color:var(--muted);white-space:nowrap}
.note{font-size:.92rem;color:var(--muted);margin:0 0 12px}
.note.info{background:#FFF7E0;color:#6B4E00;border-radius:10px;padding:8px 12px}
.status{min-height:1.5em;margin:10px 0 0;font-weight:500;color:var(--muted)}
.status.err{color:var(--danger)} .status.ok{color:var(--go)}

/* home */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
@media (max-width:760px){.modes{grid-template-columns:1fr}}
.mode-card{display:grid;gap:4px;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;transition:border-color .15s,box-shadow .15s}
.mode-card:hover{border-color:var(--primary);box-shadow:0 2px 10px #1F5FAF1A}
.mode-ico{font-size:1.8rem;line-height:1}
.mode-name{font-weight:700;font-size:1.08rem;color:var(--text)}
.mode-desc{color:var(--muted);font-size:.92rem;line-height:1.55}
.lib-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lib-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;flex-wrap:wrap}
.lib-main{flex:1 1 220px;min-width:0}
.lib-title{font-weight:600;overflow-wrap:anywhere}
.lib-meta{font-size:.84rem;color:var(--muted)}
.lib-actions{display:flex;gap:6px;flex-wrap:wrap}
.lib-empty{color:var(--muted);text-align:center;padding:16px 8px}
details.owner{margin-top:8px;color:var(--muted);font-size:.92rem}
details.owner summary{cursor:pointer}
.owner-row{display:flex;gap:8px;margin-top:8px;max-width:420px}

/* rotating banner at the top of the home page */
.hero-banner{position:relative;overflow:hidden;border-radius:16px;margin-bottom:16px;background:linear-gradient(120deg,#1F5FAF 0%,#2F7BD3 55%,#4A9BE8 100%);color:#fff}
.hero-banner::after{content:"";position:absolute;inset:auto -60px -80px auto;width:260px;height:260px;border-radius:50%;background:#ffffff14;pointer-events:none}
.hb-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 26px 0;flex-wrap:wrap}
.hb-top .hb-tag{padding:0}
.hb-video{background:#FFC83D;color:#1B2A4A;border:0;border-radius:99px;padding:5px 14px;font-weight:700;font-size:.9rem;box-shadow:0 2px 0 #1B2A4A33;animation:hbPulse 2.4s ease-in-out infinite}
@keyframes hbPulse{0%,100%{box-shadow:0 0 0 0 #FFC83D88}50%{box-shadow:0 0 0 8px #FFC83D00}}
.video-modal{position:fixed;inset:0;z-index:80;background:#0B1220E6;display:grid;place-items:center;padding:16px}
.vm-box{position:relative;width:min(420px,100%);max-height:100%}
.vm-box video{display:block;width:100%;max-height:calc(100vh - 80px);border-radius:14px;background:#000}
.vm-close{position:absolute;top:-12px;left:-12px;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#1B2A4A;font-size:1.1rem;font-weight:700;box-shadow:0 2px 8px #0006;z-index:1}
@media (max-width:560px){.hb-top{padding:10px 16px 0}}
.hb-tag{position:relative;z-index:1;margin:0;padding:12px 26px 0;font-size:.9rem;font-weight:700;letter-spacing:.01em;opacity:.95}
.hb-tag::before{content:"★";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#FFC83D;color:#1B2A4A;font-size:.72rem;margin-inline-end:8px;vertical-align:1px}
.hb-slides{position:relative;min-height:150px}
.hb-slide{position:absolute;inset:0;display:flex;align-items:center;gap:18px;padding:10px 26px 32px;opacity:0;transform:translateX(-24px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.hb-slide.on{opacity:1;transform:none;pointer-events:auto}
.hb-art{flex:none;width:84px;height:84px;border-radius:22px;background:#ffffff26;display:grid;place-items:center;font-size:2.6rem;line-height:1}
.hb-slide.on .hb-art{animation:hbPop .7s cubic-bezier(.3,1.5,.5,1)}
.hb-text{min-width:0}
.hb-title{font-size:clamp(1.12rem,2.6vw,1.45rem);font-weight:700;line-height:1.35;margin:0 0 4px;text-wrap:balance}
.hb-sub{margin:0;opacity:.92;font-size:.98rem;line-height:1.55;max-width:60ch}
.hb-cta{display:inline-block;margin-top:8px;background:#fff;color:var(--primary);border:0;border-radius:99px;padding:4px 14px;font-weight:700;font-size:.9rem}
.hb-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.hb-dot{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:#ffffff66;transition:width .3s,background .3s}
.hb-dot[aria-selected="true"]{width:22px;background:#fff}
@keyframes hbPop{0%{transform:scale(.6) rotate(-8deg)}100%{transform:none}}
@media (max-width:560px){.hb-slides{min-height:190px}.hb-tag{padding:10px 16px 0}.hb-slide{padding:8px 16px 32px;gap:12px}.hb-art{width:60px;height:60px;font-size:2rem;border-radius:16px}}

/* create */
.drop{display:grid;place-items:center;text-align:center;gap:2px;min-height:140px;border:2px dashed #AEB6C2;border-radius:12px;background:#FAFBFC;padding:18px;cursor:pointer}
.drop.over{background:var(--primary-soft);border-color:var(--primary)}
.drop-ico{font-size:2rem;line-height:1}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumbs figure{margin:0;position:relative}
.thumbs img{width:70px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
.thumbs button{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;border:0;background:var(--danger);color:#fff;font-weight:700;line-height:1;padding:0}
details#pasteBox{margin-top:12px}
details#pasteBox summary{cursor:pointer;color:var(--primary);font-weight:600}
.progress{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.prog-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.prog-msg{flex:1;font-weight:600}
.prog-time{font-weight:700;font-variant-numeric:tabular-nums;background:#F0F2F5;border-radius:99px;padding:0 10px}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid #E1E4E9;border-top-color:var(--primary);flex:none;animation:spin .8s linear infinite}
.bar{height:6px;border-radius:99px;background:#EDEFF3;overflow:hidden}
.bar i{display:block;height:100%;width:35%;background:var(--primary);border-radius:99px;animation:slide 1.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{0%{transform:translateX(0)}100%{transform:translateX(-200%)}}

/* review */
.review-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
@media (max-width:860px){.review-grid{grid-template-columns:1fr}}
.pv-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:560px;overflow:auto}
.pv-sec{font-weight:700;font-size:.92rem;color:var(--primary);margin-top:6px}
.pv-item{border:1px solid var(--line);border-radius:10px;padding:8px 12px;position:relative}
.pv-tag{font-size:.75rem;font-weight:600;color:var(--muted)}
.pv-q{font-weight:600;margin:0 0 6px;padding-inline-end:24px}
.pv-opts{display:flex;flex-wrap:wrap;gap:6px}
.pv-opt{border:1px solid #D5DAE1;background:#FAFBFC;border-radius:8px;padding:0 10px;font-size:.9rem}
.pv-opt.correct{background:#E3F4EA;border-color:var(--go);font-weight:700}
.pv-pair{display:flex;align-items:center;gap:10px;font-weight:600;padding-inline-end:24px;flex-wrap:wrap}
.pv-pair .en{background:var(--primary-soft);border-radius:8px;padding:0 10px}
.pv-del{position:absolute;top:4px;left:6px;background:none;border:0;font-size:1.15rem;color:var(--muted);padding:0 4px}
.pv-passage{background:#FAFBFC;border:1px dashed #C9CED6;border-radius:10px;padding:8px 12px;font-size:.9rem;color:var(--muted)}
.style-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.style-btn{display:grid;gap:2px;justify-items:center;text-align:center;border:1px solid #C9CED6;border-radius:12px;background:#fff;padding:12px 8px}
.style-btn span{font-size:1.6rem;line-height:1}
.style-btn small{color:var(--muted);font-size:.8rem}
.style-btn[aria-pressed="true"]{border:2px solid var(--primary);background:var(--primary-soft)}
.chars{display:flex;gap:8px;flex-wrap:wrap}
.char{width:50px;height:50px;font-size:1.7rem;border-radius:12px;border:1px solid #C9CED6;background:#fff;display:grid;place-items:center;padding:0}
.char[aria-pressed="true"]{border:2px solid var(--primary);background:var(--primary-soft)}
.play-card .btn-wide{margin-top:10px}
.share-box{display:grid;gap:8px;margin-top:10px;background:#F3FAF6;border:1px solid #BFE3CF;border-radius:10px;padding:10px}
.share-box input{direction:ltr;font-size:.85rem}
.foot{text-align:center;color:var(--muted);font-size:.82rem;margin-top:24px}

/* ---------- child screens ---------- */
body.kid-mode{font-family:var(--kfont);color:var(--ink);background:
  radial-gradient(120px 46px at 12% 9%, #fff8 60%, transparent 62%),
  radial-gradient(160px 56px at 86% 16%, #fff9 60%, transparent 62%),
  linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 100%);background-attachment:fixed}
body.kid-mode .topbar,body.kid-mode .foot,body.paper-mode .foot{display:none}
.kid-btn{background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);padding:3px 12px;font-weight:700;font-family:var(--kfont);color:var(--ink)}
.kid-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.kid-btn:disabled{opacity:.5}
.kid-btn.sm{padding:0 10px;font-size:.9rem;box-shadow:0 2px 0 var(--ink)}
.kid-btn.go{background:var(--leaf);color:#fff;font-size:1.1rem;padding:6px 20px}
.kid-btn.big{font-size:1.15rem;padding:8px 22px}
.kid-btn.stop{background:#FFE3DF}
.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hud-chips{display:flex;gap:10px}
.kchip{background:var(--paper);border:3px solid var(--ink);border-radius:99px;padding:1px 14px;font-weight:800;box-shadow:0 3px 0 var(--ink);font-variant-numeric:tabular-nums}
.kchip:empty{display:none}
.kcard{background:var(--paper);border:3px solid var(--ink);border-radius:26px;box-shadow:0 7px 0 var(--ink);padding:18px clamp(14px,4vw,32px) 20px}
.q-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.q-num{font-weight:800;color:var(--kmuted);font-size:.95rem}
.q-tools{display:flex;gap:8px}
.passage-wrap{margin:0 0 14px;border:3px solid var(--ink);border-radius:16px;background:#FFFBEA;overflow:hidden}
.passage-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 12px;background:var(--sun);border-bottom:3px solid var(--ink);font-weight:800}
.passage{padding:12px 16px;max-height:250px;overflow:auto;line-height:1.85;font-size:1.08rem;white-space:pre-wrap;text-align:start;font-family:var(--sheetfont)}
.passage-wrap.closed .passage{display:none}
.passage-wrap.closed .passage-head{border-bottom:0}
.q-emoji{font-size:2.8rem;line-height:1;text-align:center;margin:2px 0 0}
.q-text{font-size:clamp(1.3rem,3.5vw,1.85rem);line-height:1.45;margin:4px 0 12px;text-wrap:balance;font-weight:800;text-align:center}
.young .q-text{font-size:clamp(1.55rem,4.3vw,2.2rem)}
.visual{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;font-size:2.2rem;line-height:1.1;margin:0 0 14px}
.visual:empty{display:none}
.visual .grp{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;max-width:260px}
.visual .op{font-weight:800;font-size:2.3rem;color:var(--kmuted)}
.visual .gone{opacity:.28;position:relative}
.visual .gone::after{content:"";position:absolute;inset:45% -2px auto;height:4px;background:var(--coral-2);transform:rotate(-20deg);border-radius:2px}
.fb{min-height:52px;margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.fb-msg{font-weight:800;font-size:1.2rem}
.fb-msg.good{color:var(--leaf-2)} .fb-msg.bad{color:var(--coral-2)}
.fb-sub{display:block;font-weight:500;font-size:1rem;color:var(--kmuted)}
.pop{position:fixed;pointer-events:none;font-size:1.8rem;font-weight:800;color:var(--sun-2);animation:rise 1s ease-out forwards;z-index:30;font-family:var(--kfont)}
@keyframes rise{from{opacity:1;transform:translateY(0) scale(.8)}to{opacity:0;transform:translateY(-80px) scale(1.2)}}
@keyframes shake{25%{transform:translateX(6px)}50%{transform:translateX(-6px)}75%{transform:translateX(3px)}}
@keyframes glow{50%{box-shadow:0 5px 0 var(--ink),0 0 0 6px #FFC83D99}}

/* answer: buttons */
.options{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px}
@media (max-width:640px){.options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{display:flex;align-items:center;gap:10px;text-align:start;min-height:62px;border:3px solid var(--ink);border-radius:18px;padding:8px 12px;background:#fff;box-shadow:0 5px 0 var(--ink);font-weight:700;font-size:1.1rem;line-height:1.35;overflow-wrap:anywhere;font-family:var(--kfont);color:var(--ink);transition:transform .08s,background .15s;-webkit-user-select:none;user-select:none}
.young .opt{min-height:80px;font-size:1.35rem}
.opt:hover:not(:disabled){background:#FFF6D8}
.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.opt .key{flex:none;width:32px;height:32px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;font-size:.95rem;background:var(--c,#fff)}
.opt .oe{font-size:1.9rem;line-height:1;flex:none}
.opt:nth-child(1){--c:#FFC83D}.opt:nth-child(2){--c:#8FD0FF}.opt:nth-child(3){--c:#FF9F94}.opt:nth-child(4){--c:#9BE2B3}
.opt.right{background:#DDF5E5;border-color:var(--leaf-2);box-shadow:0 5px 0 var(--leaf-2)}
.opt.wrong{background:#FFE3DF;opacity:.7;animation:shake .4s}
.opt.picked{background:#E6F3FF;border-color:var(--blue-2);box-shadow:0 5px 0 var(--blue-2)}
.opt:disabled{cursor:default}
.reveal{outline:5px solid var(--leaf);outline-offset:3px}
.guide{animation:glow 1s ease-in-out infinite}

/* answer: balloons */
.sky{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 30px;padding:6px 0 44px;min-height:200px}
.balloon{position:relative;width:118px;height:138px;border-radius:50% 50% 46% 46%/55% 55% 45% 45%;background:var(--bc);border:3px solid var(--ink);display:grid;place-items:center;align-content:center;font-weight:800;font-size:1.7rem;line-height:1.1;color:var(--ink);padding:6px;box-shadow:inset -10px -12px 0 #0000001a;animation:bob 3.2s ease-in-out infinite;animation-delay:var(--d);font-family:var(--kfont);overflow-wrap:anywhere}
.balloon.long{width:150px;font-size:1.05rem}
.balloon .oe{font-size:1.8rem}
.balloon::before{content:"";position:absolute;top:16px;right:22px;width:15px;height:26px;border-radius:50%;background:#ffffff90;transform:rotate(-20deg)}
.balloon::after{content:"";position:absolute;top:calc(100% + 3px);left:50%;width:2px;height:36px;background:var(--ink)}
.balloon.sad{animation:none;transform:scale(.85) rotate(8deg);opacity:.45}
.balloon.popped{animation:pop .35s ease-out forwards}
.balloon.picked{animation:none;transform:scale(1.08);outline:5px solid var(--blue-2)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes pop{40%{transform:scale(1.25)}100%{transform:scale(1.6);opacity:0;visibility:hidden}}

/* answer: fishing */
.pond{position:relative;height:clamp(250px,40vh,340px);border:3px solid var(--ink);border-radius:20px;overflow:hidden;background:
  radial-gradient(60px 12px at 20% 12%, #ffffff55 60%, transparent 62%),
  radial-gradient(80px 14px at 75% 30%, #ffffff44 60%, transparent 62%),
  linear-gradient(180deg,#7FD3F7 0%,#3AA6DC 60%,#2386BF 100%)}
.pond::after{content:"🌿🐚🌿🌾🌿🐚";position:absolute;bottom:-4px;left:0;right:0;text-align:center;font-size:1.6rem;letter-spacing:40px;opacity:.85;pointer-events:none}
.fish{position:absolute;top:var(--top);left:0;display:flex;align-items:center;gap:4px;background:none;border:0;padding:0;animation:swim var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay);font-family:var(--kfont);max-width:62%}
.fish .fe{font-size:2.6rem;line-height:1;display:inline-block;transform:scaleX(-1)}
.fish .fl{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:2px 10px;font-weight:800;font-size:1.05rem;color:var(--ink);box-shadow:0 3px 0 var(--ink);overflow-wrap:anywhere;text-align:start}
.fish.miss{animation-play-state:paused;opacity:.4;filter:grayscale(1)}
.fish.caught{animation:caught .8s ease-in forwards}
.fish.picked .fl{background:#E6F3FF;border-color:var(--blue-2)}
.fish.picked{animation-play-state:paused}
.fish.reveal .fl{background:#DDF5E5}
@keyframes swim{from{left:2%}to{left:36%}}
@keyframes caught{30%{transform:translateY(12px)}100%{transform:translateY(-360px) rotate(-20deg);opacity:0}}

/* answer: whack-a-mole (the answer sign under each hole is always visible) */
.moles{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:18px 12px;padding:6px 0}
@media (max-width:560px){.moles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mole-slot{display:grid;justify-items:center;gap:6px;background:none;border:0;padding:0;font-family:var(--kfont);color:var(--ink);-webkit-user-select:none;user-select:none}
.mole-slot .hole{position:relative;display:block;width:100%;height:96px;overflow:hidden}
.mole-slot .hole::after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:30px;border-radius:50%;background:#6B4423;border:3px solid var(--ink);z-index:2}
.mole-slot .critter{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:2.8rem;line-height:1;animation:peek var(--dur) ease-in-out infinite;animation-delay:var(--delay);z-index:1}
.mole-slot .ml{display:block;width:100%;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:4px 8px;font-weight:800;font-size:1.05rem;line-height:1.3;overflow-wrap:anywhere;text-align:center}
.mole-slot:active:not(:disabled) .ml{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.mole-slot.hide .critter{animation:none;transform:translateY(130%);transition:transform .4s}
.mole-slot.hide .ml{opacity:.45;background:#FFE3DF}
.mole-slot.bonk .critter{animation:none;transform:none}
.mole-slot.bonk .critter::after{content:"💫";position:absolute;top:-6px;margin-inline-start:-8px;font-size:1.4rem}
.mole-slot.bonk .ml{background:#DDF5E5;border-color:var(--leaf-2);box-shadow:0 4px 0 var(--leaf-2)}
.mole-slot.picked .critter{animation:none;transform:none}
.mole-slot.picked .ml{background:#E6F3FF;border-color:var(--blue-2);box-shadow:0 4px 0 var(--blue-2)}
.mole-slot.reveal{outline:none}
.mole-slot.reveal .critter{animation:none;transform:none}
.mole-slot.reveal .ml{background:#DDF5E5;border-color:var(--leaf-2);outline:4px solid var(--leaf);outline-offset:2px}
.mole-slot:disabled{cursor:default}
@keyframes peek{0%,100%{transform:translateY(70%)}35%,65%{transform:translateY(0)}}

/* answer: feed the monster */
.feed{display:grid;justify-items:center;gap:18px}
.monster{position:relative;width:170px;height:150px;border-radius:50% 50% 44% 44%;background:#8BDB7E;border:4px solid var(--ink);box-shadow:inset -14px -14px 0 #0000001a;transition:transform .25s}
.monster .eye{position:absolute;top:30px;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.monster .eye::after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:var(--ink);top:9px;left:9px}
.monster .eye.l{left:36px} .monster .eye.r{right:36px}
.monster .mouth{position:absolute;left:50%;bottom:26px;width:70px;height:30px;transform:translateX(-50%);background:#5A1E1E;border:3px solid var(--ink);border-radius:0 0 40px 40px;transition:all .25s}
.monster .horn{position:absolute;top:-16px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:22px solid #F2A900}
.monster .horn.l{left:36px} .monster .horn.r{right:36px}
.monster.hover{transform:scale(1.06)}
.monster.hover .mouth,.monster.yum .mouth{height:46px;width:84px}
.monster.yum{transform:scale(1.12)}
.monster.bleh .mouth{height:12px;border-radius:40px;background:#8B3A3A}
.monster.bleh{animation:shake .4s}
.chips-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.food{border:3px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:8px 14px;font-weight:800;font-size:1.1rem;font-family:var(--kfont);color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:6px}
.food::before{content:"🍪";font-size:1.3rem}
.food.dragging{position:fixed;z-index:50;pointer-events:none;transform:scale(1.08) rotate(-4deg)}
.food.eaten{visibility:hidden}
.food.nope{opacity:.4;animation:shake .4s}
.food.picked{background:#E6F3FF;border-color:var(--blue-2)}
.food.reveal{background:#DDF5E5}
.feed-help{font-size:.9rem;color:var(--kmuted);font-weight:600}

/* memory boards (inside the exam game and standalone) */
.memory{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px;max-width:640px;margin:0 auto}
@media (max-width:520px){.memory{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mcard{min-height:100px;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);background:var(--sun);font-weight:800;font-size:1.1rem;line-height:1.25;display:grid;place-items:center;align-content:center;gap:2px;padding:6px;overflow-wrap:anywhere;font-family:var(--kfont);color:var(--ink)}
.mcard .back{font-size:2rem}
.mcard .face{display:none}
.mcard .me{font-size:2.2rem;line-height:1}
.mcard.open .face{display:grid;gap:2px;justify-items:center}
.mcard.open .back{display:none}
.mcard.open{animation:flip .25s ease;background:#fff}
.mcard.open.en{background:#E6F3FF;border-color:var(--blue-2)}
.mcard.matched{background:#DDF5E5!important;border-color:var(--leaf-2)!important;box-shadow:0 4px 0 var(--leaf-2);cursor:default}
@keyframes flip{0%{transform:scaleX(1)}50%{transform:scaleX(.05)}100%{transform:scaleX(1)}}
.mem-setup{display:grid;gap:10px;margin-bottom:14px}
.mem-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mem-label{font-weight:800;min-width:64px}
.kchip-btn{border:3px solid var(--ink);border-radius:99px;background:#fff;padding:2px 12px;font-weight:700;font-family:var(--kfont);color:var(--ink)}
.kchip-btn[aria-pressed="true"]{background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.mem-board{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:10px;max-width:600px;margin:0 auto}
.mem-card{aspect-ratio:3/4;max-height:150px;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;font-size:clamp(2rem,7vw,3rem);font-family:var(--kfont);font-weight:800;color:var(--ink);padding:0;background:repeating-linear-gradient(45deg,#FFC83D 0 12px,#FFD56A 12px 24px)}
.mem-card .face{display:none}
.mem-card .back{font-size:1.6rem;opacity:.7}
.mem-card.open{background:#fff;animation:flip .25s ease}
.mem-card.open .face{display:block}
.mem-card.open .back{display:none}
.mem-card.gone{animation:vanish .45s ease forwards;pointer-events:none}
@keyframes vanish{40%{transform:scale(1.15)}100%{transform:scale(0);opacity:0}}

/* matching */
.match{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px 64px;max-width:760px;margin:0 auto}
.match svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mcol{display:grid;gap:10px;align-content:start}
.mitem{position:relative;z-index:1;min-height:56px;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:6px 10px;font-weight:700;font-size:1.05rem;line-height:1.3;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;text-align:start;font-family:var(--kfont);color:var(--ink)}
.mitem .me{font-size:1.6rem;flex:none}
.mitem.sel{background:#FFF4CF;border-color:var(--sun-2);box-shadow:0 4px 0 var(--sun-2);transform:scale(1.03)}
.mitem.done{background:var(--pc);cursor:default}
.mitem.bad{animation:shake .4s}
.mcol-head{font-size:.8rem;font-weight:800;color:var(--kmuted);text-align:center}
@media (max-width:520px){.match{gap:8px 30px}.mitem{font-size:.92rem;min-height:50px;padding:5px 7px}}

/* journeys (progress track) */
.track{background:var(--paper);border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);margin-bottom:12px;padding:10px 12px;overflow:hidden}
.trail-wrap{overflow-x:auto;padding:30px 4px 4px;scrollbar-width:thin}
.trail{display:flex;align-items:center;min-width:max-content;padding-inline:8px}
.stone{position:relative;width:40px;height:30px;border-radius:50%;background:#E9E1CF;border:3px solid var(--ink);flex:none;display:grid;place-items:center;font-weight:800;font-size:.78rem;color:var(--kmuted)}
.stone.good{background:var(--sun);color:var(--ink)} .stone.miss{background:#FFD3CE} .stone.done{background:#E6F3FF;color:var(--ink)}
.stone.cur{background:#fff;transform:scale(1.12)}
.stone.goal{width:52px;height:44px;border-radius:14px;background:var(--leaf);font-size:1.45rem}
.path{width:16px;height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 5px,transparent 5px 9px);flex:none;opacity:.5}
.hero{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:2rem;line-height:1;pointer-events:none}
.hero.hop{animation:hop .55s ease}
@keyframes hop{0%{transform:translate(-50%,0)}40%{transform:translate(-50%,-24px) rotate(-8deg)}100%{transform:translate(-50%,0)}}
.race{display:grid;gap:6px}
.lane{position:relative;height:46px;border-radius:12px;background:repeating-linear-gradient(90deg,#5B6270 0 30px,#646B79 30px 60px);border:3px solid var(--ink);overflow:hidden}
.lane::after{content:"";position:absolute;top:50%;left:0;right:0;border-top:3px dashed #ffffffaa}
.lane .finish{position:absolute;top:0;bottom:0;right:0;width:22px;background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/11px 11px;z-index:1}
.car{position:absolute;top:50%;left:var(--p,0%);transform:translateY(-50%);font-size:2rem;line-height:1;transition:left .7s cubic-bezier(.3,1.4,.5,1);z-index:2}
.car .flip{display:inline-block;transform:scaleX(-1)}
.lane-name{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:.72rem;color:#fff;font-weight:800;z-index:2;opacity:.85}
.tower{display:flex;align-items:flex-end;justify-content:center;gap:16px;height:170px}
.tower-stack{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;height:100%;gap:2px}
.block{width:78px;height:var(--bh,18px);border:3px solid var(--ink);border-radius:6px;background:var(--bc);animation:drop .5s cubic-bezier(.3,1.5,.5,1)}
.tower-top{font-size:2rem;line-height:1;animation:drop .6s ease}
.tower-side{font-size:2.2rem;align-self:flex-end}
@keyframes drop{from{transform:translateY(-120px);opacity:0}to{transform:none;opacity:1}}
.picture{position:relative;height:180px;max-width:420px;margin:0 auto;border-radius:14px;overflow:hidden;border:3px solid var(--ink);display:grid;place-items:center;background:var(--scene)}
.picture .scene{font-size:5.5rem;line-height:1;text-shadow:0 4px 0 #00000022}
.picture .deco{position:absolute;font-size:1.8rem}
.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--tc),1fr)}
.tile{background:#DCD5C3;border:2px solid #fff;display:grid;place-items:center;font-weight:800;color:#9C927C;transition:opacity .6s,transform .6s}
.tile.open{opacity:0;transform:scale(.6)}
.space{position:relative;height:120px;border-radius:14px;overflow:hidden;background:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 60% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 85%,#fff,transparent),linear-gradient(90deg,#1B1F4A,#2E1F5E)}
.space .planet{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:1.6rem}
.space .rocket{position:absolute;top:50%;left:var(--p,4%);transform:translate(-50%,-50%) rotate(45deg);font-size:2.4rem;transition:left .8s cubic-bezier(.3,1.3,.5,1);z-index:2}
.track-label{text-align:center;font-weight:800;font-size:.9rem;color:var(--kmuted);margin-top:4px}

/* end */
.end{text-align:center}
.chest{font-size:4.6rem;line-height:1;margin:6px 0;display:inline-block;animation:bounce 1.2s ease 2}
@keyframes bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-18px)}}
.end-stars{font-size:2.1rem;font-weight:800;font-variant-numeric:tabular-nums}
.end-stars small{font-size:1rem;color:var(--kmuted);display:block;font-weight:600}
.review{list-style:none;padding:0;margin:18px auto;text-align:start;max-width:640px;display:grid;gap:8px;font-family:var(--font)}
.review li{background:#fff;border:2px solid #D9D0BA;border-radius:14px;padding:8px 12px}
.review li.head{background:#FFF4CF;font-weight:700}
.review b{display:block}
.review span{color:var(--leaf-2);font-weight:700;display:block}
.review em{display:block;font-style:normal;color:var(--kmuted);font-size:.92rem}
.review em.picked{color:var(--coral-2)}

/* ---------- worksheet ---------- */
body.paper-mode{background:#E9EBEF}
body.paper-mode .topbar{display:none}
.sheet-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;position:sticky;top:env(safe-area-inset-top,0px);background:#E9EBEF;padding:6px 0;z-index:5}
.paper{background:#fff;max-width:820px;margin:0 auto;padding:clamp(18px,5vw,48px);box-shadow:0 2px 14px #0000001f;border-radius:4px;font-family:var(--sheetfont);font-size:1.12rem;line-height:1.75;color:#111}
.paper-head{border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:16px}
.paper-title{font-size:1.35rem;font-weight:700;text-align:center;margin:0 0 8px}
.paper-meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:1rem}
.paper-meta span b{font-weight:700}
.w-sec{margin:22px 0 10px}
.w-sec-title{font-weight:700;font-size:1.12rem;margin:0}
.w-sec-inst{margin:0;color:#333}
.w-passage{border:1.5px solid #111;padding:12px 16px;margin:10px 0 16px;white-space:pre-wrap;line-height:1.85}
.w-passage-title{font-weight:700;text-align:center;margin:0 0 6px}
.w-q{margin:12px 0;display:grid;gap:6px;position:relative;padding-inline-end:34px}
.w-qtext{margin:0}
.w-num{font-weight:700;margin-inline-end:6px}
.w-opts{display:flex;flex-wrap:wrap;gap:6px 22px;padding-inline-start:26px}
.w-opt{background:none;border:0;padding:2px 8px;border-radius:50%;font:inherit;color:inherit;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}
.w-opt .wl{font-weight:700;margin-inline-end:4px}
.w-opt.circled::after{content:"";position:absolute;inset:-4px -6px;border:2.5px solid #1C3FA8;border-radius:50%;transform:rotate(-3deg);pointer-events:none}
.w-blank{display:inline-block;min-width:110px;border:0;border-bottom:2px solid #111;background:#F7F9FF;padding:0 8px;font:inherit;color:#1C3FA8;font-weight:700;cursor:pointer;margin:0 4px}
.w-blank.empty{color:#9AA3B5}
.w-menu{position:absolute;z-index:20;background:#fff;border:1px solid #C9CED6;border-radius:10px;box-shadow:0 6px 18px #00000026;padding:6px;display:grid;gap:4px;min-width:160px}
.w-menu button{background:#fff;border:0;border-radius:8px;padding:6px 12px;text-align:start;font:inherit;cursor:pointer}
.w-menu button:hover{background:#EEF3FC}
.w-match{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px 70px;margin:8px 0 14px}
.w-match svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.w-mcol{display:grid;gap:8px;align-content:start}
.w-mitem{display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:8px;padding:4px 6px;font:inherit;color:inherit;text-align:start;cursor:pointer;position:relative;z-index:1}
.w-mitem .dot{width:12px;height:12px;border-radius:50%;border:2px solid #111;flex:none;background:#fff}
.w-mitem.sel{background:#FFF4CF;border-color:#E3B437}
.w-mitem.linked .dot{background:#1C3FA8;border-color:#1C3FA8}
.w-mark{position:absolute;inset-inline-end:0;top:0;font-size:1.5rem;font-weight:700;line-height:1}
.w-mark.ok{color:#1E8C57} .w-mark.no{color:#C4271D}
.w-fix{color:#C4271D;font-weight:700;font-size:1rem}
.w-opt.wrong-pick::after{border-color:#C4271D}
.w-opt.right-ans{background:#E3F4EA}
.paper.graded .w-opt,.paper.graded .w-blank,.paper.graded .w-mitem{pointer-events:none}
.stamp{display:inline-grid;place-items:center;min-width:92px;height:92px;border:4px solid #C4271D;border-radius:50%;color:#C4271D;font-weight:700;font-size:1.5rem;transform:rotate(-8deg);margin:0 auto;padding:0 8px;line-height:1.1}
.stamp small{display:block;font-size:.8rem}
.sheet-result{text-align:center;margin-bottom:10px}
.sheet-actions{max-width:820px;margin:14px auto 0}
/* "any notes?" box after games and worksheets (parent-facing, so plain style) */
.fb-widget{margin:18px auto 0;max-width:560px;font-family:var(--font);text-align:start;color:var(--text)}
.fbw-toggle{display:block;margin:0 auto;background:#fff;border:1px solid #C9CED6;border-radius:99px;padding:6px 16px;font-size:.92rem;color:var(--primary);font-weight:600;font-family:var(--font)}
.fbw-body{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px}
.fbw-body textarea{min-height:80px;margin:0}
/* printing: a clean black-and-white exam on A4, with an optional answer key on its own page */
.print-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.wa-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.wa-row .btn{flex:1 1 200px}
#printArea{display:none}
/* the printed page layout (also used to build the PDF for WhatsApp) */
.print-doc{font-family:var(--sheetfont);color:#000;font-size:12.5pt;line-height:1.6;background:#fff}
.print-doc .p-head{border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:10px}
.print-doc .p-title{text-align:center;font-size:16pt;font-weight:700;margin:0 0 8px}
.print-doc .p-meta{display:flex;justify-content:space-between;gap:12px;font-size:11.5pt}
.print-doc .p-meta span{white-space:nowrap}
.print-doc .p-sec{margin:14px 0 6px}
.print-doc .p-sec-title{font-weight:700;font-size:13pt;margin:0}
.print-doc .p-sec-inst{margin:0}
.print-doc .p-passage{border:1.5px solid #000;padding:8px 12px;margin:6px 0 10px;white-space:pre-wrap;line-height:1.75;break-inside:avoid}
.print-doc .p-passage-title{font-weight:700;text-align:center;margin:0 0 4px}
.print-doc .p-q{margin:8px 0;break-inside:avoid}
.print-doc .p-qtext{margin:0}
.print-doc .p-num{font-weight:700;margin-inline-end:6px}
.print-doc .p-opts{display:flex;flex-wrap:wrap;gap:4px 26px;padding-inline-start:24px;margin-top:2px}
.print-doc .p-opt::before{content:"◯";margin-inline-end:6px;font-size:10pt}
.print-doc .p-bank{padding-inline-start:24px;font-size:11pt}
.print-doc .p-match{display:grid;grid-template-columns:1fr 1fr;gap:6px 60px;margin:6px 0 10px;break-inside:avoid}
.print-doc .p-mitem{display:flex;gap:8px;align-items:center}
.print-doc .p-mitem .dot::before{content:"●";font-size:8pt}
.print-doc .p-key{break-before:page}
.print-doc .p-key h2{font-size:15pt;text-align:center;margin:0 0 10px}
.print-doc .p-key ol{margin:0;padding-inline-start:0;list-style:none;columns:2;column-gap:24px}
.print-doc .p-key li{break-inside:avoid;margin:2px 0}
.print-doc .p-key li.p-key-head{font-weight:700;margin-top:8px;break-after:avoid}
.print-doc .p-visual{font-size:18pt;line-height:1.3;padding-inline-start:24px;margin:2px 0}
.print-doc .p-foot{margin-top:14px;text-align:center;font-size:9pt;color:#555}
.print-doc.pdf .p-key ol{columns:1}
@media print{
  @page{size:A4;margin:14mm 13mm}
  html,body{background:#fff!important;padding:0!important}
  body > *:not(#printArea){display:none!important}
  #printArea{display:block}
}
.pdf-stage{position:fixed;left:-10000px;top:0;width:720px;background:#fff;z-index:-1}
/* ---------- skills section (testing) ---------- */
.sk-title{text-align:center;font-size:1.6rem;margin:2px 0 14px}
.sk-sub{font-size:1.15rem;margin:18px 0 8px}
.sk-note{text-align:center;color:var(--kmuted);font-weight:600;margin:14px 0 0}
.sk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:640px){.sk-tiles{grid-template-columns:1fr}}
.sk-tile{display:grid;gap:2px;justify-items:center;text-align:center;border:3px solid var(--ink);border-radius:20px;background:#fff;box-shadow:0 5px 0 var(--ink);padding:16px 10px;font-family:var(--kfont);color:var(--ink)}
.sk-tile:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.sk-tile-ico{font-size:2.6rem;line-height:1.1}
.sk-tile b{font-size:1.25rem}
.sk-tile small{color:var(--kmuted);font-weight:600}
.sk-letters,.sk-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.sk-letter{display:grid;justify-items:center;gap:0;border:3px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:6px 4px;color:var(--ink)}
.sk-letter .sk-ch{font-size:2rem;line-height:1.3;font-weight:700}
.sk-letter .sk-st{font-size:.8rem;color:#C99700;letter-spacing:1px}
.sk-letter.done{background:#FFF7DB}
.sk-letter.next{background:var(--sun);animation:glow 1.4s ease-in-out infinite}
.sk-steps{display:flex;justify-content:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sk-step{border:2px solid var(--ink);border-radius:99px;padding:1px 12px;font-weight:700;font-size:.9rem;background:#fff;opacity:.55}
.sk-step.on{background:var(--sun);opacity:1}
.sk-step.past{opacity:.85;background:#DDF5E5}
.sk-learn{display:grid;justify-items:center;gap:14px}
.sk-big{font-size:clamp(5rem,26vw,9rem);line-height:1.2;font-weight:700;border:0;background:none;color:var(--ink);padding:0 10px}
.sk-forms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:460px}
.sk-form{display:grid;justify-items:center;border:2px solid #D9D0BA;border-radius:14px;background:#fff;padding:4px 2px}
.sk-form-ch{font-size:2.2rem;line-height:1.4}
.sk-form small{font-size:.72rem;color:var(--kmuted);font-weight:700}
.sk-example{display:flex;align-items:center;gap:14px;border:3px solid var(--ink);border-radius:20px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:8px 20px;color:var(--ink)}
.sk-emoji{font-size:3.2rem;line-height:1}
.sk-word{font-size:2.2rem;font-weight:700}
.sk-word b{color:var(--coral-2)}
.sk-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.sk-hint{text-align:center;font-weight:700;margin:0 0 8px}
.sk-canvas{display:block;width:min(320px,86vw);aspect-ratio:1;margin:0 auto;border:3px solid var(--ink);border-radius:20px;background:#fff;touch-action:none;cursor:crosshair}
.sk-canvas + .fb-msg{text-align:center;min-height:1.6em;margin:8px 0 0}
.sk-bar{height:10px;border-radius:99px;background:#EFE8D6;border:2px solid var(--ink);overflow:hidden;margin-bottom:12px}
.sk-bar i{display:block;height:100%;width:0;background:var(--leaf);transition:width .4s}
.sk-q{text-align:center;font-size:1.4rem;font-weight:800;margin:4px 0 12px}
.sk-q.big{font-size:2.2rem;direction:rtl}
.sk-bubbles{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.sk-bubble{width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);background:var(--bc);box-shadow:inset -8px -10px 0 #0000001a,0 4px 0 var(--ink);font-size:2.3rem;font-weight:700;color:var(--ink);animation:bob 3.2s ease-in-out infinite;animation-delay:var(--d);font-family:inherit}
.sk-bubble.right{outline:6px solid var(--leaf);animation:none}
.sk-bubble.wrong{opacity:.35;animation:shake .4s}
.sk-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:480px;margin:0 auto}
.sk-pic{display:grid;justify-items:center;gap:2px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:10px 4px;color:var(--ink);font-family:var(--kfont)}
.sk-pic small{font-weight:700;font-size:.95rem}
.sk-pic.right{background:#DDF5E5;border-color:var(--leaf-2)}
.sk-pic.wrong{opacity:.4;animation:shake .4s}
.sk-play + .fb-msg{text-align:center;min-height:1.6em;margin-top:10px}
.sk-done{display:grid;justify-items:center;gap:6px;padding:10px 0}
.sk-done-stars{font-size:3rem;color:#E9A400;letter-spacing:6px}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* sending a ready game to another parent */
.gift-note{background:#FFF8E6;border:1px solid #F0D38C;border-radius:12px;padding:12px 14px;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;line-height:1.6}
.share-game{margin-top:14px}
.share-game + small{display:block;margin-top:6px}
.end-share{display:flex;margin:16px auto 0;max-width:100%}