/* Kelas Kancil — gaya aplikasi anak */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --bg:#F2F5FA; --surface:#FFFFFF; --ink:#1B2140; --muted:#5A6386; --line:#DCE2EE;
  --coral:#FF6B4A; --sky:#2E9BEF; --sun:#FFB81F; --leaf:#1FAE6C; --grape:#8B5CF6;
  --coral-soft:#FFE3DB; --sky-soft:#DCEEFD; --sun-soft:#FFF0C7; --leaf-soft:#D3F4E4; --grape-soft:#ECE4FE;
  --nav:#1B2140; --nav-fg:#FFFFFF; --good:#1FAE6C; --bad:#E5484D;
  --f-display:"Baloo 2","Nunito",system-ui,sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11152A; --surface:#1B2140; --ink:#EEF1FA; --muted:#A3ABCB; --line:#2C3458;
    --coral:#FF8466; --sky:#5AB4F7; --sun:#FFC94D; --leaf:#3CCB88; --grape:#A685FA;
    --coral-soft:#4A2A27; --sky-soft:#1D3657; --sun-soft:#45391A; --leaf-soft:#173F31; --grape-soft:#33295A;
    --nav:#EEF1FA; --nav-fg:#1B2140; --good:#3CCB88; --bad:#FF6B70; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11152A; --surface:#1B2140; --ink:#EEF1FA; --muted:#A3ABCB; --line:#2C3458;
  --coral:#FF8466; --sky:#5AB4F7; --sun:#FFC94D; --leaf:#3CCB88; --grape:#A685FA;
  --coral-soft:#4A2A27; --sky-soft:#1D3657; --sun-soft:#45391A; --leaf-soft:#173F31; --grape-soft:#33295A;
  --nav:#EEF1FA; --nav-fg:#1B2140; --good:#3CCB88; --bad:#FF6B70; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 128px;display:flex;flex-direction:column;gap:28px}

.t-coral{--tone:var(--coral);--tone-soft:var(--coral-soft)}
.t-sky{--tone:var(--sky);--tone-soft:var(--sky-soft)}
.t-sun{--tone:var(--sun);--tone-soft:var(--sun-soft)}
.t-leaf{--tone:var(--leaf);--tone-soft:var(--leaf-soft)}
.t-grape{--tone:var(--grape);--tone-soft:var(--grape-soft)}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:44px;height:44px;flex:none}
.brand b{font-family:var(--f-display);font-size:1.6rem;font-weight:800;letter-spacing:-.01em}
.brand small{display:block;color:var(--muted);font-size:.8rem;margin-top:-4px}
.namebox{display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:4px 6px 4px 14px}
.namebox label{font-size:.8rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.namebox input{border:0;background:transparent;color:var(--ink);font:700 1rem var(--f-body);width:9.5em;padding:6px 8px;border-radius:999px}

/* hero */
.hero{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--sun-soft);border-radius:28px;padding:24px 28px}
.hero h1{font-size:clamp(1.8rem,4.6vw,2.7rem);font-weight:800}
.hero p{color:var(--muted);font-size:1.05rem;margin-top:4px;max-width:46ch}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.starcount{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface);border-radius:22px;padding:14px 22px;min-width:120px}
.starcount svg{width:40px;height:40px}
.starcount b{font-family:var(--f-display);font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.starcount span{font-size:.8rem;color:var(--muted);font-weight:700}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font-weight:800;font-size:1rem;background:var(--ink);color:var(--bg)}
.btn.alt{background:var(--surface);color:var(--ink);border:2px solid var(--line)}
.btn.tone{background:var(--tone);color:#1B2140}
.btn svg{width:18px;height:18px}

/* chips */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:0;padding:4px;font-weight:700;color:var(--ink)}
.cat .ring{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:3px solid var(--tone);transition:transform .15s}
.cat .ring svg{width:30px;height:30px;color:var(--ink)}
.cat .ring .g{font-family:var(--f-display);font-weight:800;font-size:1.4rem}
.cat[aria-pressed="true"] .ring{background:var(--tone);transform:translateY(-2px)}
.cat[aria-pressed="true"] .ring svg,.cat[aria-pressed="true"] .ring .g{color:#1B2140}
.cat span.lbl{font-size:.95rem;text-align:center;line-height:1.2}

/* section head */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.shead h2{font-size:clamp(1.5rem,3.4vw,2rem);font-weight:800}
.shead p{color:var(--muted);margin-top:4px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:16px;text-align:left;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--tone)}
.card .pill{align-self:flex-start;background:var(--tone-soft);color:var(--ink);font-size:.78rem;font-weight:800;border-radius:999px;padding:3px 10px;letter-spacing:.02em}
.card h3{font-size:1.3rem;font-weight:800}
.card p{color:var(--muted);font-size:.95rem;min-height:2.9em}
.art{aspect-ratio:4/3;max-width:100%;border-radius:18px;background:var(--tone-soft);display:grid;place-items:center;overflow:hidden;position:relative}
.art .big{font-family:var(--f-display);font-weight:800;font-size:3.4rem;color:var(--ink);letter-spacing:.02em}
.art .emo{font-size:3rem;display:flex;gap:6px}
.art .sw{display:flex;gap:10px}
.art .sw i{width:46px;height:46px;border-radius:50%;display:block;border:3px solid var(--surface)}
.cardfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.stars{display:flex;gap:2px}
.stars svg{width:20px;height:20px}
.go{width:44px;height:44px;border-radius:50%;background:var(--tone);display:grid;place-items:center}
.go svg{width:20px;height:20px;color:#1B2140}
.empty{color:var(--muted);padding:24px;text-align:center;border:2px dashed var(--line);border-radius:20px}

/* module view */
.mhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.back{width:48px;height:48px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none}
.back svg{width:22px;height:22px}
.mhead h1{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800}
.mhead .sub{color:var(--muted)}
.tabs{display:inline-flex;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:4px;gap:4px;align-self:flex-start}
.tabs button{border:0;background:transparent;border-radius:999px;padding:10px 22px;font-weight:800;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--tone);color:#1B2140}
.hint{display:flex;gap:10px;align-items:center;background:var(--tone-soft);border-radius:16px;padding:12px 16px;font-weight:600}
.hint svg{width:22px;height:22px;flex:none}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.tile{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:transform .12s,border-color .12s}
.tile:hover{border-color:var(--tone)}
.tile:active,.tile.say{transform:scale(.96);border-color:var(--tone);background:var(--tone-soft)}
.tile .pic{font-size:2.6rem;line-height:1.2}
.tile .w{font-family:var(--f-display);font-weight:800;font-size:1.35rem;line-height:1.1}
.tile .m{color:var(--muted);font-size:.85rem;font-weight:600}
.tile .num{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1}
.tile .dots{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:90px;min-height:20px}
.tile .dots i{width:9px;height:9px;border-radius:50%;background:var(--tone);display:block}
.swatch{width:54px;height:54px;border-radius:50%;border:3px solid var(--line)}
.rowlabel{font-family:var(--f-display);font-weight:800;font-size:1.1rem;color:var(--muted);margin-top:6px}
.sylgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sylgrid .tile{padding:10px 4px}
.sylgrid .tile .w{font-size:1.5rem}
.words{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.words .tile .w span{color:var(--tone)}

/* quiz */
.quiz{background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.qdots{display:flex;gap:8px}
.qdots i{width:14px;height:14px;border-radius:50%;background:var(--line);display:block}
.qdots i.ok{background:var(--good)}
.qdots i.no{background:var(--bad)}
.qdots i.now{outline:3px solid var(--tone);outline-offset:2px}
.ask{font-family:var(--f-display);font-weight:700;font-size:clamp(1.2rem,3.4vw,1.6rem)}
.ask .hl{color:var(--tone);font-weight:800}
.qobj{font-size:2.4rem;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:420px}
.qeq{font-family:var(--f-display);font-weight:800;font-size:2.6rem}
.speak{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--tone);color:#1B2140;padding:14px 26px;font-weight:800;font-size:1.1rem}
.speak svg{width:24px;height:24px}
.speak.word{font-family:var(--f-display);font-size:1.7rem;padding:10px 28px}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:560px}
.opt{background:var(--bg);border:3px solid var(--line);border-radius:22px;min-height:110px;display:grid;place-items:center;padding:10px;transition:transform .12s,border-color .12s}
.opt:hover{border-color:var(--tone)}
.opt .pic{font-size:3rem}
.opt .txt{font-family:var(--f-display);font-weight:800;font-size:2rem}
.opt.ok{border-color:var(--good);background:var(--leaf-soft)}
.opt.no{border-color:var(--bad);animation:shake .35s}
.opt[disabled]{cursor:default}
.feedback{min-height:1.6em;font-weight:800;font-size:1.1rem}
.feedback.ok{color:var(--good)}
.feedback.no{color:var(--bad)}
.result h2{font-size:2rem;font-weight:800}
.result .stars svg{width:44px;height:44px}
.result .stars{justify-content:center;gap:6px}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* progress & help */
.plist{display:flex;flex-direction:column;gap:10px}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px 16px}
.prow .dot{width:40px;height:40px;border-radius:12px;background:var(--tone-soft);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;color:var(--ink)}
.prow b{display:block}
.prow small{color:var(--muted)}
.prow .stars svg{width:18px;height:18px}
.panel{background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.panel h3{font-size:1.25rem}
.panel ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px;max-width:68ch}
.panel p{color:var(--muted);max-width:68ch}
.confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn.danger{background:var(--bad);color:#fff}

/* bottom nav */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;background:var(--nav);padding:6px;border-radius:999px;box-shadow:0 10px 30px rgba(17,21,42,.25);z-index:20}
.nav button{border:0;background:transparent;color:var(--nav-fg);border-radius:999px;height:52px;min-width:52px;padding:0 16px;display:flex;align-items:center;gap:8px;font-weight:800}
.nav button svg{width:22px;height:22px}
.nav button[aria-current="page"]{background:var(--sun);color:#1B2140}
.nav button .lb{display:none}
.nav button[aria-current="page"] .lb{display:inline}

@media (max-width:640px){
  .hero{grid-template-columns:1fr;padding:20px}
  .starcount{flex-direction:row;justify-content:center;gap:10px;min-width:0}
  .cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .cat .ring{width:56px;height:56px}
  .cat .ring svg{width:24px;height:24px}
  .cat span.lbl{font-size:.78rem}
  .opts{gap:8px}
  .opt{min-height:92px}
  .opt .pic{font-size:2.4rem}
  .opt .txt{font-size:1.6rem}
  .quiz{padding:18px 12px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .namebox input{width:7.5em}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* status: memuat, error, toast */
.loading{display:grid;place-items:center;gap:14px;min-height:60vh;color:var(--muted);font-weight:700;text-align:center}
.loading .spin{width:44px;height:44px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--sun);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;z-index:30;max-width:calc(100% - 32px);text-align:center;box-shadow:0 8px 24px rgba(17,21,42,.25)}

/* kode sinkron di halaman orang tua */
.code{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,6vw,2.2rem);letter-spacing:.18em;background:var(--sun-soft);border-radius:16px;padding:8px 18px;align-self:flex-start}
.restore{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.restore input{font:700 1.1rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:999px;padding:10px 16px;width:12em;max-width:100%}
.note{font-weight:700;min-height:1.5em}
.note.ok{color:var(--good)}
.note.no{color:var(--bad)}

/* ---------- tambahan: teks terjemahan, lawan kata, bayangan ---------- */
.ask small.tr{display:block;font-family:var(--f-body);font-size:.95rem;font-weight:700;color:var(--muted);margin-top:2px}
.vs{font-family:var(--f-display);font-weight:800;color:var(--muted);font-size:.6em;align-self:center}
.opt .cap{display:block;font-family:var(--f-display);font-weight:800;font-size:1.1rem;margin-top:2px}
.opt{grid-auto-flow:row;align-content:center;gap:2px}
.opts.four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:620px}
@media (max-width:640px){.opts.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shadow{filter:brightness(0);opacity:.82}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .shadow{filter:brightness(0) invert(.82);opacity:1}}
:root[data-theme="dark"] .shadow{filter:brightness(0) invert(.82);opacity:1}
.duo{display:flex;gap:10px;align-items:center;font-size:2.4rem;line-height:1.2}
.duo .pic{font-size:inherit}
.art .emo .shadow{display:inline-block}

.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:8px}
.pair .vs{font-size:1.4rem}
.side{border:0;background:var(--tone-soft);border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .12s}
.side:active,.side.say{transform:scale(.95)}
.side .pic{font-size:2.4rem;line-height:1.2}
.side .w{font-family:var(--f-display);font-weight:800;font-size:1.3rem;line-height:1.1}
.side .m{color:var(--muted);font-size:.82rem;font-weight:600}

/* ---------- menulis (jiplak) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-width:46px;height:46px;padding:0 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font-family:var(--f-display);font-weight:800;font-size:1.3rem}
.chip[aria-pressed="true"]{background:var(--tone);border-color:var(--tone);color:#1B2140}
.trace-card{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:16px;width:100%;max-width:640px;align-self:center;margin-inline:auto}
.trace-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.trace-head .pic{font-size:3rem;line-height:1}
.pad{position:relative;width:100%;aspect-ratio:4/3;max-height:58vh;border-radius:18px;background:var(--bg);border:2px dashed var(--line);overflow:hidden}
.pad canvas{position:absolute;inset:0;width:100%;height:100%}
.pad-ink{touch-action:none;cursor:crosshair}
.pad-tools{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.qstage{width:100%;display:flex;flex-direction:column;align-items:center}

/* ---------- labirin ---------- */
.maze{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.maze-svg{width:100%;max-width:min(520px,62vh);height:auto;touch-action:none;user-select:none;display:block}
.maze-bg{fill:var(--tone-soft)}
.maze-walls{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round}
.maze-trail{fill:none;stroke:var(--tone);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.maze-hint{fill:none;stroke:var(--good);stroke-width:1.4;stroke-dasharray:2 2;stroke-linecap:round;stroke-linejoin:round}
.maze-emoji{font-size:7px;text-anchor:middle;dominant-baseline:central}
.maze-hero{transition:transform .14s ease-out}
.maze-hero.bump text{animation:bump .25s}
.maze.won .maze-hero text{animation:hop .5s 2}
@keyframes bump{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hop{50%{transform:translateY(-2px)}}
.maze-pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-areas:". up ." "left down right";gap:8px}
.arrow{height:60px;border-radius:18px;border:0;background:var(--tone);color:#1B2140;font-size:1.3rem;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.arrow small{font-size:.7rem;font-weight:800;margin-top:3px}
.arrow:active{transform:scale(.94)}
.a-up{grid-area:up}.a-left{grid-area:left}.a-down{grid-area:down}.a-right{grid-area:right}
.maze-tools{display:flex;gap:10px;flex-wrap:wrap}
.maze-tools [aria-pressed="true"]{background:var(--leaf-soft);border-color:var(--good)}
.tips ul{gap:8px}

/* labirin: papan + tombol berdampingan di layar lebar, bertumpuk di HP */
.maze{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:18px 28px}
.maze-svg{flex:1 1 300px;max-width:min(500px,58vh)}
@media (max-width:640px){.maze-svg{max-width:min(100%,48vh)}.maze-pad{grid-template-columns:repeat(3,72px)}.arrow{height:62px}}
.qobj .pic{font-size:4.2rem;line-height:1.1}

/* ---------- latihan bicara (Speaking Trainer) ---------- */
.chip.wide{font-family:var(--f-body);font-size:.95rem;font-weight:800;height:auto;min-height:42px;padding:6px 14px}
.say-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:22px 16px;width:100%;max-width:560px;margin-inline:auto}
.say-pic{font-size:4.6rem;line-height:1.1}
.say-word{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,6vw,2.6rem);line-height:1.15}
.say-mean{color:var(--muted);font-weight:700;margin-top:-6px}
.say-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.say-note{color:var(--muted);font-weight:600;max-width:40ch}
.mic{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--coral);color:#1B2140;padding:16px 28px;font-weight:800;font-size:1.15rem;position:relative}
.mic svg{width:28px;height:28px}
.mic.on{background:var(--bad);color:#fff;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 14px rgba(229,72,77,0)}}
.mic.sm{padding:8px 14px;font-size:.85rem;gap:6px}
.mic.sm svg{width:18px;height:18px}
.say-result{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:2.4em;font-weight:700}
.say-result small{color:var(--muted);font-weight:600}
.say-result.lv3 b,.say-result.lv2 b{color:var(--good)}
.say-result.lv1 b{color:var(--sun)}
.say-result.lv0 b{color:var(--bad)}
.meter{display:inline-flex;gap:5px;vertical-align:middle}
.meter i{width:14px;height:14px;border-radius:50%;background:var(--line);display:block}
.meter i.on{background:var(--good)}
.opts.stack{grid-template-columns:1fr;max-width:520px}
.opts.stack .opt{min-height:64px;padding:10px 16px}
.txt.sm{font-size:1.3rem}

/* ---------- ABC phonics ---------- */
.tiles.letters .lt{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1}
.pic.sm{font-size:1.8rem}

/* ---------- percakapan ---------- */
.chat{display:flex;flex-direction:column;gap:10px;max-width:640px;width:100%;margin-inline:auto}
.chat.q{max-width:480px}
.bubble{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.bubble.me{flex-direction:row-reverse;margin-left:auto}
.bubble .who{font-size:2rem;line-height:1;flex:none}
.bubble .say{display:flex;flex-direction:column;gap:2px;text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:20px 20px 20px 6px;padding:10px 14px;font-family:var(--f-body)}
.bubble.me .say{background:var(--tone-soft);border-color:transparent;border-radius:20px 20px 6px 20px}
.bubble .say.playing{border-color:var(--tone);box-shadow:0 0 0 3px var(--tone-soft)}
.bubble .en,.reply .en{font-weight:800;font-size:1.08rem}
.bubble .id,.reply .id{color:var(--muted);font-size:.85rem;font-weight:600}
.reply{display:flex;flex-direction:column;gap:2px;text-align:center}
.me-row{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-bottom:8px}
.mini-mic{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mini-out{font-weight:700}
.mini-out small{color:var(--muted)}


/* ---------- beranda: kategori, pencarian, rak per kategori, kartu seragam ---------- */
:root{--card-soft-shadow:0 10px 28px rgba(44,60,108,.07)}
.hero{background:linear-gradient(110deg,var(--sun-soft),var(--sky-soft));box-shadow:var(--card-soft-shadow)}

/* kategori: satu baris, tidak ada baris "yatim"; di HP bisa digeser */
.cats{display:flex;gap:10px;justify-content:space-between;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 6px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:1 0 92px;scroll-snap-align:start}
.cat .ring img.cat-icon{width:44px;height:44px;object-fit:contain;display:block;transition:transform .16s}
.cat:hover .ring img.cat-icon{transform:scale(1.08) rotate(-4deg)}
.cat[aria-pressed="true"] .ring img.cat-icon{filter:drop-shadow(0 2px 3px rgba(27,33,64,.25))}
@media (max-width:640px){
  .cats{justify-content:flex-start;margin-inline:-16px;padding-inline:16px}
  .cat{flex:0 0 76px}
  .cat .ring img.cat-icon{width:36px;height:36px}
}

/* pencarian */
.lesson-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lesson-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.lesson-search{display:flex;align-items:center;gap:10px;flex:1 1 280px;max-width:560px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:0 18px;transition:border-color .2s}
.lesson-search:focus-within{border-color:var(--sky)}
.lesson-search svg{width:20px;height:20px;flex:none;color:var(--muted)}
.lesson-search input{width:100%;height:50px;border:0;outline:none;background:transparent;color:var(--ink);font:700 1rem var(--f-body);min-width:0}
.lesson-search input::placeholder{color:var(--muted);font-weight:600}
.lesson-count{font-size:.85rem;font-weight:800;color:var(--muted);white-space:nowrap}
.results{display:flex;flex-direction:column;gap:30px}

/* rak per kategori (tampilan "Semua") */
.shelf{display:flex;flex-direction:column;gap:12px}
.shelf-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shelf-icon{width:40px;height:40px;border-radius:12px;background:var(--tone-soft);display:grid;place-items:center;flex:none}
.shelf-icon img{width:28px;height:28px}
.shelf-icon .g{font-family:var(--f-display);font-weight:800;font-size:.95rem}
.shelf-head h2{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:800}
.shelf-count{color:var(--muted);font-weight:700;font-size:.9rem}
.shelf-nav{display:none;gap:6px;margin-left:auto}
.shelf-nav button{width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font-size:1.3rem;font-weight:800;line-height:1;color:var(--ink)}
.shelf-nav button:hover{border-color:var(--tone)}
.shelf-all{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink);font-weight:800;padding:6px 4px;margin-left:auto}
.shelf-nav + .shelf-all{margin-left:0}
.shelf-all svg{width:16px;height:16px}
@media (hover:hover) and (min-width:700px){.shelf-nav{display:inline-flex}}
.shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,calc((100% - 54px)/4));gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
.shelf-row > .card{scroll-snap-align:start}
@media (max-width:640px){
  .shelf-row{grid-auto-columns:78%;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;gap:12px}
}

/* kartu: tinggi gambar seragam (2:1), keterangan di baris atas */
.card{box-shadow:var(--card-soft-shadow);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover{box-shadow:0 14px 34px rgba(44,60,108,.13);transform:translateY(-4px)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.card h3{line-height:1.2}
.card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
.art{aspect-ratio:2/1;margin-top:auto}
.art.art-cover{display:block;padding:0}
.cover-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.art .big{font-size:clamp(1.9rem,3vw,2.5rem);white-space:nowrap}
.art .emo{font-size:2.5rem}
.cardfoot{margin-top:0}

.option-caption{display:block;color:var(--muted);font-size:.75rem;font-weight:800;max-width:16ch;text-align:center}
.card .pill{white-space:nowrap}
.shelf-row{scrollbar-width:none}
.shelf-row::-webkit-scrollbar{display:none}
@media (max-width:640px){
  .shelf-head{flex-wrap:nowrap}
  .shelf-head h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .shelf-count{white-space:nowrap}
  .shelf-all{white-space:nowrap;flex:none}
}
.art .big.syl{font-size:clamp(1.5rem,2.3vw,2rem)}
.art .big .dot{color:var(--tone);padding:0 .08em}
/* rak: ruang untuk bayangan & efek angkat kartu supaya tidak terpotong oleh area geser */
.shelf-row{padding:10px 4px 26px;margin:-6px -4px -18px}
.shelf-row > .card{box-shadow:0 6px 16px rgba(44,60,108,.07)}
.shelf-row > .card:hover{box-shadow:0 10px 20px rgba(44,60,108,.12)}
@media (max-width:640px){
  .shelf-row{margin-inline:-16px;padding-inline:16px}
  .shelf-count{display:none}
}
@media (max-width:699px), (hover:none){.shelf-nav + .shelf-all{margin-left:auto}}

/* =====================================================================
   DESAIN BARU (mengikuti mockup): menu atas, banner pemandangan, kartu pilihan
   ===================================================================== */
:root{
  --brand-blue:#2563EB; --title-blue:#1E3A8A; --accent-orange:#FF7A1A;
  --scene-sky-a:#BDE7FF; --scene-sky-b:#F3FBFF; --scene-cloud:#FFFFFF;
  --scene-hill-b:#A6E08A; --scene-hill-f:#7CCB5E; --scene-tree:#4FA944;
  --topbar-bg:rgba(242,245,250,.86);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-blue:#5AA2FF; --title-blue:#EEF1FA; --accent-orange:#FFA24D;
    --scene-sky-a:#16224A; --scene-sky-b:#26386C; --scene-cloud:rgba(255,255,255,.16);
    --scene-hill-b:#1F5B47; --scene-hill-f:#1B7350; --scene-tree:#2A8A55;
    --topbar-bg:rgba(17,21,42,.86);
  }
}
:root[data-theme="dark"]{
  --brand-blue:#5AA2FF; --title-blue:#EEF1FA; --accent-orange:#FFA24D;
  --scene-sky-a:#16224A; --scene-sky-b:#26386C; --scene-cloud:rgba(255,255,255,.16);
  --scene-hill-b:#1F5B47; --scene-hill-f:#1B7350; --scene-tree:#2A8A55;
  --topbar-bg:rgba(17,21,42,.86);
}

.wrap{max-width:1240px;padding-top:6px}

/* ---------- menu atas ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px max(16px,calc((100% - 1208px)/2));background:var(--topbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.tb-brand img{width:46px;height:46px}
.tb-brand b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.55rem;line-height:1;color:var(--title-blue)}
.tb-brand em{font-style:normal;color:var(--accent-orange)}
.tb-brand small{display:block;color:var(--muted);font-size:.74rem;font-weight:700;margin-top:3px}
.tb-nav{display:flex;gap:2px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 6px 18px rgba(44,60,108,.08)}
.tb-nav button{display:flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:999px;padding:9px 14px;font-weight:800;font-size:.9rem;color:var(--ink);white-space:nowrap}
.tb-nav button svg{width:20px;height:20px;flex:none}
.tb-nav button:nth-child(1) svg{color:var(--brand-blue)}
.tb-nav button:nth-child(2) svg{color:var(--sky)}
.tb-nav button:nth-child(3) svg{color:var(--grape)}
.tb-nav button:nth-child(4) svg{color:var(--sun)}
.tb-nav button:nth-child(5) svg{color:var(--coral)}
.tb-nav button:nth-child(6) svg{color:var(--leaf)}
.tb-nav button:hover{background:var(--bg)}
.tb-nav button[aria-current="page"]{background:var(--brand-blue);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.tb-nav button[aria-current="page"] svg{color:#fff}
.tb-tools{display:flex;align-items:center;gap:10px;flex:none}
.tb-round{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:1.2rem;padding:0}
.tb-round svg{width:20px;height:20px}
.tb-round .moon{display:none}
:root[data-theme="dark"] .tb-round .sun{display:none}
:root[data-theme="dark"] .tb-round .moon{display:inline}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tb-round .sun{display:none}:root:not([data-theme="light"]) .tb-round .moon{display:inline}}
.tb-profile{position:relative}
.tb-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px 4px 4px;text-align:left}
.tb-avatar{width:40px;height:40px;border-radius:50%;background:var(--sun-soft);display:grid;place-items:center;font-size:1.45rem;border:2px solid var(--sun)}
.tb-who b{display:block;font-size:.85rem;line-height:1.15;max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-who small{display:block;font-size:.72rem;color:var(--muted);font-weight:700}
.tb-chip .chev{width:16px;height:16px;color:var(--muted)}
.tb-pop{position:absolute;right:0;top:calc(100% + 8px);width:260px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 18px 40px rgba(17,21,42,.18)}
.tb-pop label{font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tb-pop input{font:700 1rem var(--f-body);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.tb-pop .btn{justify-content:center;padding:10px 14px}

/* menu bawah hanya untuk layar kecil */
.nav{display:none}
@media (max-width:1060px){
  .tb-nav{display:none}
  .tb-tools{margin-left:auto}
  .nav{display:flex}
}
@media (min-width:1061px){.wrap{padding-bottom:56px}}
@media (max-width:560px){
  .topbar{gap:8px;padding-block:10px}
  .tb-brand img{width:38px;height:38px}
  .tb-brand b{font-size:1.25rem}
  .tb-brand small{display:none}
  .tb-who,.tb-chip .chev{display:none}
  .tb-chip{padding:3px}
  .tb-round{width:40px;height:40px}
}
.nav button{min-width:48px;padding:0 13px}
.nav button svg{width:22px;height:22px}
@media (max-width:420px){.nav button[aria-current="page"] .lb{display:none}.nav{gap:2px}.nav button{min-width:44px;padding:0 10px}}

/* ---------- banner beranda ---------- */
.hero-banner{position:relative;isolation:isolate;overflow:hidden;border-radius:32px;min-height:330px;display:grid;place-items:start center;padding:46px 24px 120px;box-shadow:var(--card-soft-shadow)}
.hero-copy{position:relative;text-align:center;max-width:680px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-copy h1{position:relative;font-size:clamp(2rem,4.4vw,3.3rem);font-weight:800;color:var(--title-blue);letter-spacing:-.01em}
.hero-copy h1 em{font-style:normal;color:var(--accent-orange)}
.spark{position:absolute;left:-46px;top:2px;width:36px;height:48px}
.spark i{position:absolute;display:block;height:5px;border-radius:5px;background:var(--accent-orange)}
.spark i:nth-child(1){width:20px;left:14px;top:2px;transform:rotate(55deg)}
.spark i:nth-child(2){width:24px;left:4px;top:20px;transform:rotate(10deg)}
.spark i:nth-child(3){width:20px;left:12px;top:38px;transform:rotate(-40deg)}
.hero-copy p{font-weight:700;font-size:clamp(.98rem,1.6vw,1.12rem);color:var(--ink);opacity:.8;max-width:46ch}
.hero-continue{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--surface);color:var(--ink);font-weight:800;padding:10px 18px;box-shadow:0 6px 16px rgba(44,60,108,.14);margin-top:4px}
.hero-continue svg{width:16px;height:16px;color:var(--brand-blue)}
.hero-kid{position:absolute;bottom:92px;display:flex;align-items:flex-end;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(27,33,64,.18))}
.hero-kid.left{left:5%}
.hero-kid.right{right:5%}
.hero-kid img{max-height:240px;max-width:26vw;object-fit:contain}
.hero-kid .emoji{font-size:clamp(4rem,8.5vw,7.4rem);line-height:1}
.hero-kid .wave{font-size:clamp(2rem,4vw,3.4rem);margin-left:-.4em;margin-bottom:2.4em;animation:wave 2.4s ease-in-out infinite;transform-origin:70% 80%}
.hero-kid .pet{font-size:clamp(2.2rem,4.4vw,3.8rem);margin-left:-.5em}
@keyframes wave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(18deg)}80%{transform:rotate(-10deg)}90%{transform:rotate(14deg)}}
@media (max-width:900px){
  .hero-banner{padding:30px 18px 150px;min-height:0}
  .hero-kid{bottom:70px}
  .hero-kid.left{left:4%}.hero-kid.right{right:4%}
  .hero-kid .emoji{font-size:4.2rem}
  .spark{display:none}
}

/* ---------- kartu pilihan (menumpang di bawah banner) ---------- */
.featured{position:relative;z-index:1;margin-top:-118px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;padding-inline:clamp(0px,2.4vw,36px)}
@media (max-width:1100px){
  .featured{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:250px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:10px 16px 26px;margin-bottom:-18px}
  .featured::-webkit-scrollbar{display:none}
  .featured > .card{scroll-snap-align:start}
}
@media (max-width:900px){.featured{margin-top:-128px}}

/* ---------- kartu pelajaran ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 14px 12px;gap:8px}
.card:hover{border-color:var(--tone)}
.card-top{min-height:30px}
.card .pill{font-size:.74rem;padding:3px 10px}
.card h3{font-size:1.08rem;color:var(--title-blue);line-height:1.22}
.card h3 .t-en{white-space:nowrap}
.card-link{all:unset;cursor:pointer}
.card-link::after{content:"";position:absolute;inset:0;border-radius:22px}
.card:has(.card-link:focus-visible){outline:3px solid var(--sky);outline-offset:2px}
.card p{font-size:.86rem;line-height:1.4}
.art{border-radius:16px}
.card-meta{display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-start;align-self:stretch;overflow:hidden}
.card-meta span{font-size:.74rem;font-weight:800;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.card-group{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:6px;align-self:stretch;
  border:0;border-radius:12px;background:var(--tone-soft);color:var(--ink);font:inherit;font-size:.78rem;font-weight:700;
  padding:6px 10px;text-align:left;cursor:pointer;min-width:0}
.card-group{font-size:.74rem;padding:6px 8px;gap:5px}
.card-group .gname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card-group .gcount{white-space:nowrap;color:var(--muted);font-weight:800}
.card-group b{font-weight:800}
.card-group svg{width:14px;height:14px;flex:none}
.card-group:hover{outline:2px solid var(--tone)}
.fav{position:relative;z-index:2;width:32px;height:32px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;padding:0;margin-right:-4px}
.fav svg{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linejoin:round;transition:transform .15s}
.fav:hover svg{transform:scale(1.15)}
.fav[aria-pressed="true"] svg{fill:var(--coral);stroke:var(--coral)}
.go{width:40px;height:40px}

/* ---------- judul bagian & halaman daftar ---------- */
.section-title h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;color:var(--title-blue)}
.section-title p{color:var(--muted);margin-top:2px}
.page-head{display:flex;align-items:center;gap:16px;background:linear-gradient(110deg,var(--sky-soft),var(--sun-soft));border-radius:28px;padding:22px 26px}
.page-emoji{font-size:3rem;line-height:1}
.page-head h1{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;color:var(--title-blue)}
.page-head p{color:var(--muted);font-weight:600;margin-top:2px}
.result-count{color:var(--muted);font-weight:800;font-size:.88rem;margin-bottom:12px}
.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.mhead h1{color:var(--title-blue)}
.mhead h1 .t-en{color:var(--muted);font-size:.7em}
/* penyesuaian ukuran menu & tokoh banner */
.tb-nav button{padding:8px 12px;font-size:.88rem;gap:6px}
.tb-brand b{font-size:1.45rem}
.tb-who b{max-width:9.5em}
@media (max-width:1240px) and (min-width:1061px){.tb-nav button{padding:8px 9px}.tb-brand small{display:none}.tb-who small{display:none}}
.hero-banner{padding-bottom:150px;min-height:360px}
.featured{margin-top:-130px}
.hero-kid{bottom:150px}
.hero-kid .wave{margin-bottom:.2em;margin-left:-.25em}
@media (max-width:900px){.hero-kid{bottom:150px}.hero-kid .emoji{font-size:3.6rem}}
@media (max-width:640px){.hero-kid{display:none}.hero-banner{padding:28px 18px 128px}.featured{margin-top:-108px}}

/* ---------- latar banner & maskot kancil (paket aset tambahan) ---------- */
:root{--hero-bg:url('../img/backgrounds/hero-taman.svg')}
:root[data-theme="dark"]{--hero-bg:url('../img/backgrounds/hero-malam.svg')}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hero-bg:url('../img/backgrounds/hero-malam.svg')}}
.hero-banner{background:#BDE7FF var(--hero-bg) center bottom / cover no-repeat}
.hero-kid img{width:auto;height:clamp(150px,17vw,220px);max-width:none}
.hero-kid{bottom:128px}
.hero-kid.left{left:3%}
.hero-kid.right{right:3%}
@media (max-width:900px){.hero-kid img{height:130px}.hero-kid{bottom:140px}}
/* di layar sempit maskot dikecilkan & ditaruh di bawah teks, tidak menutupi judul */
@media (max-width:640px){
  .hero-kid{display:flex;bottom:118px}
  .hero-kid img{height:92px}
  .hero-kid.left{left:2%}
  .hero-kid.right{right:2%}
}

.tb-avatar{overflow:hidden;background:#FFF4D6}
.tb-avatar img{width:46px;height:46px;object-fit:cover;object-position:50% 8%;margin-top:6px}

.mascot{display:block;height:auto;flex:none}
.hero.with-mascot{grid-template-columns:1fr auto auto;align-items:end}
.hero.with-mascot .mascot{width:150px;margin-bottom:-24px}
@media (max-width:640px){
  .hero.with-mascot{grid-template-columns:1fr auto}
  .hero.with-mascot .mascot{width:96px;margin-bottom:0;grid-row:1;grid-column:2}
  .hero.with-mascot .starcount{grid-column:1 / -1}
}
.quiz.result .mascot{width:140px;margin-bottom:-6px}
.empty .mascot{width:130px;margin:0 auto 8px}
.empty p{max-width:40ch;margin-inline:auto}

/* ---------- banner bergambar (assets/img/banners) ---------- */
/* Gambar selalu terang (langit siang), jadi warna teks di atasnya dibuat tetap, tidak ikut mode gelap. */
.hero-banner.has-photo{aspect-ratio:2.76/1;min-height:0;padding:clamp(28px,3.6vw,48px) 24px 0;background:#8FD5FD}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:-1}
.has-photo .hero-copy h1{color:#1E3A8A;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.has-photo .hero-copy h1 em{color:#FF7A1A}
.has-photo .hero-copy p{color:#1B2140;opacity:.85}
.has-photo .hero-continue{background:#FFFFFF;color:#1B2140}
.has-photo .spark i{background:#FF7A1A}
:root[data-theme="dark"] .hero-photo{filter:brightness(.9)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero-photo{filter:brightness(.9)}}
.has-photo + .featured{margin-top:-104px}

/* layar sedang & HP: teks di atas, gambar utuh di bawah supaya tokohnya tidak terpotong */
@media (max-width:1000px){
  .hero-banner.has-photo{aspect-ratio:auto;padding:26px 18px 0;background:linear-gradient(180deg,#7ECCFE,#BDE8FD);gap:14px}
  .has-photo .hero-photo{position:static;order:2;width:calc(100% + 36px);height:auto;margin:0 -18px;aspect-ratio:2.76/1}
  .has-photo + .featured{margin-top:-46px}
}
/* judul tetap terbaca walau ada matahari di belakangnya */
.has-photo .hero-copy h1{font-size:clamp(2rem,4vw,3rem);text-shadow:0 2px 0 #fff,0 0 18px rgba(255,255,255,.9),0 0 4px rgba(255,255,255,.9)}
.has-photo .hero-copy p{text-shadow:0 1px 8px rgba(255,255,255,.9)}
@media (max-width:1000px){.has-photo .hero-photo{max-width:none;justify-self:stretch}}
/* gambar kosakata (assets/img/vocab/...) menggantikan emoji; ukurannya ikut ukuran huruf tempatnya */
.vis{display:inline-block;width:1.35em;height:1.35em;object-fit:contain;vertical-align:middle}
.tile .pic .vis{width:1.75em;height:1.75em}
.opt .pic .vis{width:1.6em;height:1.6em}
.qobj .pic .vis{width:1.5em;height:1.5em}
.say-pic .vis{width:1.6em;height:1.6em}
.art .emo .vis{width:1.45em;height:1.45em}
.chip .vis{width:1.5em;height:1.5em;margin:-4px 0}
.bubble .who .vis{width:1.4em;height:1.4em}
.shadow .vis{filter:inherit}

/* ---------- akun anak: masuk / daftar ---------- */
.tb-avatar img{width:38px;height:38px;object-fit:contain;object-position:center;margin:0}
.auth-page{display:grid;place-items:start center}
.auth-card{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:24px clamp(18px,4vw,32px);display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:var(--card-soft-shadow);text-align:center}
.auth-card .mascot{width:120px;margin-bottom:-6px}
.auth-card h1{font-size:clamp(1.5rem,4vw,2rem);color:var(--title-blue)}
.auth-tabs{align-self:center}
.auth-form{width:100%;display:flex;flex-direction:column;gap:14px;text-align:left}
.auth-form h1{text-align:center}
.field{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:.95rem}
.field small{font-weight:600;color:var(--muted)}
.field input,.pin-form input{font:700 1.1rem var(--f-body);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;min-width:0}
.field input:focus,.pin-form input:focus{border-color:var(--sky);outline:none}
.field input[inputmode="numeric"]{letter-spacing:.35em;text-align:center;font-size:1.3rem}
.btn.big{justify-content:center;padding:15px 20px;font-size:1.1rem}
.btn[disabled]{opacity:.6;cursor:wait}
.auth-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.note-ok{background:var(--leaf-soft);border-radius:14px;padding:10px 14px;font-weight:700}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.small{font-size:.86rem}
.muted{color:var(--muted)}
.center{text-align:center}

.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.avatar-grid.sm{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));max-width:620px}
.avatar-opt{aspect-ratio:1;border-radius:18px;border:3px solid var(--line);background:var(--bg);padding:4px;display:grid;place-items:center;transition:transform .12s}
.avatar-opt img{width:100%;height:100%;object-fit:contain}
.avatar-opt:hover{transform:translateY(-2px)}
.avatar-opt[aria-checked="true"]{border-color:var(--brand-blue);background:var(--sky-soft);box-shadow:0 0 0 3px rgba(37,99,235,.18)}

.pop-who{display:flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.pop-who img{width:48px;height:48px;object-fit:contain;border-radius:50%;background:var(--sun-soft)}
.pop-who b{display:block}
.pop-who small{color:var(--muted);font-weight:700}
.tb-pop .btn{width:100%}
.tb-pop .small{margin:2px 0 0}

/* ---------- pencapaian: tab, peringkat, riwayat ---------- */
.page-tabs{align-self:flex-start;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-bottom:6px}
.seg button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font-weight:800;color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--sun);color:#1B2140}
#ptab{display:flex;flex-direction:column;gap:14px}
.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:640px}
.brow{display:grid;grid-template-columns:44px 48px 1fr auto;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:8px 14px}
.brow .rank{font-family:var(--f-display);font-weight:800;font-size:1.4rem;text-align:center}
.brow .ava{width:44px;height:44px;object-fit:contain;border-radius:50%;background:var(--sun-soft)}
.brow .who{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .who small{color:var(--muted);font-weight:700}
.brow .pts{font-family:var(--f-display);font-weight:800;font-size:1.2rem}
.brow .pts small{font-family:var(--f-body);font-size:.75rem;color:var(--muted)}
.brow.me{border-color:var(--brand-blue);background:var(--sky-soft)}
.board-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--sun-soft);border-radius:20px;padding:14px 18px;max-width:640px}
.board-cta div{flex:1 1 220px}
.board-cta p{color:var(--muted);font-size:.9rem}
.loading.small{min-height:120px}

.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stile{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column}
.stile b{font-family:var(--f-display);font-size:2rem;line-height:1.1}
.stile span{color:var(--muted);font-weight:700;font-size:.88rem}
.hist-day h3{font-size:1.05rem;color:var(--muted);margin:6px 0 8px}
.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hist button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 14px}
.hist button:hover{border-color:var(--tone)}
.hist .dot{width:38px;height:38px;border-radius:12px;background:var(--tone-soft);display:grid;place-items:center;font-family:var(--f-display);font-weight:800}
.hist .what b{display:block}
.hist .what small{color:var(--muted)}
.hist .stars svg{width:16px;height:16px}

.pin-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.pin-form p{width:100%;margin:0}
.pin-form input{width:auto;flex:1 1 140px;letter-spacing:.2em}
.check{display:flex;align-items:center;gap:10px;font-weight:700}
.check input{width:20px;height:20px}
@media (max-width:560px){.brow{grid-template-columns:34px 40px 1fr auto;gap:8px;padding:8px 10px}.brow .ava{width:38px;height:38px}}
/* menu atas: pindah ke menu bawah lebih awal supaya chip profil (+@username) tidak terpotong */
@media (max-width:1180px){.tb-nav{display:none}.tb-tools{margin-left:auto}.nav{display:flex}}
@media (min-width:1181px){.wrap{padding-bottom:56px}}
@media (max-width:1180px) and (min-width:1061px){.wrap{padding-bottom:128px}}
.tb-who small{max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar{min-width:0}
.seg{align-self:flex-start}
/* tab di halaman tanpa warna pelajaran (masuk/daftar, pencapaian) */
.auth-tabs button[aria-selected="true"],.page-tabs button[aria-selected="true"]{background:var(--brand-blue);color:#fff}
.page-tabs{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
.page-tabs button{white-space:nowrap}
@media (max-width:480px){.page-tabs button,.auth-tabs button{padding:9px 13px;font-size:.9rem}}

/* ---------- level Cambridge ---------- */
.pills,.lvls{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}
.lvl{display:inline-block;font-size:.7rem;font-weight:800;border-radius:999px;padding:2px 9px;letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.lvl-starters{background:#DCF5E7;color:#13804B}
.lvl-movers{background:#DCEBFF;color:#1D5FC2}
.lvl-flyers{background:#F1E4FF;color:#7A3FD1}
:root[data-theme="dark"] .lvl-starters{background:#173F31;color:#7BE0AE}
:root[data-theme="dark"] .lvl-movers{background:#1D3657;color:#8EC3FF}
:root[data-theme="dark"] .lvl-flyers{background:#33295A;color:#C9A8FF}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lvl-starters{background:#173F31;color:#7BE0AE}
  :root:not([data-theme="light"]) .lvl-movers{background:#1D3657;color:#8EC3FF}
  :root:not([data-theme="light"]) .lvl-flyers{background:#33295A;color:#C9A8FF}
}
.mhead h1 .lvl{font-size:.8rem;font-family:var(--f-body);margin-left:6px}
.level-seg{margin:0}

/* ---------- kartu grup (sub menu) ---------- */
.group-card{border-width:2px;border-color:var(--tone-soft)}
.group-art{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 12px;text-align:left}
.g-icon{font-size:3rem;line-height:1;display:grid;place-items:center;width:1.5em;height:1.5em;background:var(--surface);border-radius:22px;box-shadow:0 4px 12px rgba(44,60,108,.08)}
.g-icon .vis{width:1.2em;height:1.2em}
.g-subs{display:flex;flex-wrap:wrap;gap:4px;align-content:center}
.g-subs i{font-style:normal;font-size:.72rem;font-weight:800;background:var(--surface);border-radius:999px;padding:2px 8px;color:var(--ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gprog{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.gprog .bar{flex:1;height:10px;border-radius:999px;background:var(--line);overflow:hidden;min-width:40px}
.gprog .bar i{display:block;height:100%;border-radius:999px;background:var(--sun)}
.gprog small{font-weight:800;color:var(--muted);white-space:nowrap;font-size:.78rem}
.group-card .cardfoot{gap:10px}

/* ---------- halaman grup ---------- */
.crumbs button,.crumb{border:0;background:transparent;color:var(--muted);font-weight:800;padding:4px 0;display:inline-flex;align-items:center;gap:6px}
.crumbs button svg{width:16px;height:16px}
.crumb{font-size:.88rem;padding:0;margin-bottom:2px}
.crumb:hover,.crumbs button:hover{color:var(--brand-blue)}
.group-head{display:flex;align-items:center;gap:22px;background:linear-gradient(110deg,var(--tone-soft),var(--surface));border:1px solid var(--line);border-radius:28px;padding:24px 28px;box-shadow:var(--card-soft-shadow)}
.g-icon.big{font-size:4.6rem;border-radius:30px;flex:none}
.g-info{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.g-info h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:var(--title-blue)}
.g-info h1 .t-en{color:var(--muted);font-size:.65em}
.g-info p{color:var(--muted);font-weight:600}
.gprog.wide{max-width:520px}
.g-info .btn{align-self:flex-start}
.sub-title{display:flex;align-items:center;gap:10px;font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:800;color:var(--title-blue);margin:4px 0 12px}
.cat-block{margin-bottom:22px}
@media (max-width:640px){
  .group-head{flex-direction:column;align-items:flex-start;padding:20px;gap:14px}
  .g-icon.big{font-size:3.4rem}
  /* kolom: lebar info ikut kartu, teks progres boleh turun baris (tidak melebar keluar layar) */
  .group-head .g-info{align-self:stretch;width:100%}
  .group-head .gprog{flex-wrap:wrap}
  .group-head .gprog small{white-space:normal}
}

/* ---------- daftar kata (hari, bulan, kata tanya) ---------- */
.art .big.wl{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.tiles.words.wl{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.tiles.wl .w{font-size:1.45rem}
.num-badge{width:30px;height:30px;border-radius:50%;background:var(--tone-soft);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:.95rem}

/* ---------- koreksi ucapan per kata ---------- */
.wordfb{font-family:var(--f-display);font-weight:800;font-size:1.35rem;line-height:1.5;margin:4px 0;text-align:center}
.wordfb span{border-radius:8px;padding:0 4px}
.w-ok{color:var(--good);background:var(--leaf-soft)}
.w-bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent);text-decoration:underline wavy;text-underline-offset:4px}
.w-practice{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}
.w-practice small{color:var(--muted);font-weight:700}
.w-chip{height:auto;min-height:36px;font-family:var(--f-body);font-size:.9rem;padding:4px 12px}
.mini-out .wordfb{font-size:1rem;text-align:right;margin:0}
.mini-out .w-practice{justify-content:flex-end}
/* kartu grup: label rentang level, daftar sub-pelajaran tidak terpotong */
.lvl-range{background:linear-gradient(90deg,#DCF5E7,#DCEBFF 55%,#F1E4FF);color:#1E3A8A}
:root[data-theme="dark"] .lvl-range{background:linear-gradient(90deg,#173F31,#1D3657 55%,#33295A);color:#EEF1FA}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lvl-range{background:linear-gradient(90deg,#173F31,#1D3657 55%,#33295A);color:#EEF1FA}}
.art.group-art{aspect-ratio:auto;min-height:112px}
.g-subs i.more{background:transparent;color:var(--muted)}
.level-seg{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
.level-seg button{white-space:nowrap}
@media (max-width:480px){.level-seg button{padding:8px 12px;font-size:.88rem}}
/* gambar kosakata: tinggi tetap, lebar ikut bentuk gambar (kendaraan melebar), dibatasi supaya kartu tetap rapi */
.vis{width:auto;height:1.35em;max-width:2.3em}
.tile .pic .vis{width:auto;height:1.75em;max-width:2.9em}
.opt .pic .vis{width:auto;height:1.6em;max-width:2.7em}
.qobj .pic .vis{width:auto;height:1.5em;max-width:2.6em}
.say-pic .vis{width:auto;height:1.6em;max-width:2.8em}
.art .emo .vis{width:auto;height:1.45em;max-width:2.3em}
.chip .vis{width:auto;height:1.5em;max-width:2.3em}
.bubble .who .vis{width:auto;height:1.4em;max-width:2em}
.tile .pic{max-width:100%}
.tile .pic .vis{max-width:min(2.9em,100%)}

/* menghitung sampai 100: papan seratus + batang puluhan dan kubus satuan */
.hundred{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;max-width:640px;margin:0 auto}
.hc{aspect-ratio:1;padding:0;display:grid;place-items:center;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:clamp(.8rem,3.4vw,1.35rem);cursor:pointer;transition:transform .12s,border-color .12s}
.hc:hover{transform:translateY(-2px);border-color:var(--tone)}
.hc.ten{background:var(--tone-soft);border-color:var(--tone)}
.hc.say{transform:scale(1.12);border-color:var(--tone)}
.pv{display:flex;align-items:flex-end;justify-content:center;gap:6px;flex-wrap:wrap;max-width:420px;min-height:150px}
.pv .ten{width:16px;height:150px;border-radius:4px;background-color:var(--tone);background-image:repeating-linear-gradient(to bottom,transparent 0 13px,rgba(255,255,255,.75) 13px 15px)}
.pv .ones{display:flex;flex-wrap:wrap-reverse;gap:3px;width:33px;margin-left:8px}
.pv .ones i{display:block;width:15px;height:15px;border-radius:3px;background:var(--sun)}

/* ---------- berhitung lanjutan: tambah besar, kurang, banding, urutan ---------- */
.pv.sm{min-height:0;gap:3px;max-width:none}
.pv.sm .ten{width:8px;height:60px;background-image:repeating-linear-gradient(to bottom,transparent 0 5px,rgba(255,255,255,.75) 5px 6px)}
.pv.sm .ones{gap:2px;width:14px;margin-left:3px}
.pv.sm .ones i{width:6px;height:6px;border-radius:1px}
.pvsum{display:flex;align-items:flex-end;justify-content:center;gap:14px;flex-wrap:wrap}
.pvsum>b,.duo>b{font-family:var(--f-display);font-size:2rem;align-self:center}
.subpic .gone s{text-decoration:none;position:relative;display:inline-block;opacity:.4}
.subpic .gone s::after{content:'';position:absolute;left:-6%;right:-6%;top:50%;height:3px;border-radius:2px;background:var(--bad);transform:rotate(-35deg)}
.tile .subpic{font-size:1.1rem;line-height:1.3}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.opts.two .opt{min-height:150px;gap:8px}
.opt .dots{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:110px}
.opt .dots i{width:10px;height:10px;border-radius:50%;background:var(--tone);display:block}
.qeq .blank,.seq .blank{display:inline-grid;place-items:center;min-width:1.6em;border:3px dashed var(--tone);border-radius:14px;color:var(--tone);padding:0 .15em}
.tile .w.cmp b{color:var(--tone)}
.seq{display:flex;gap:10px;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:2.6rem}
.seq b{display:grid;place-items:center;min-width:1.9em;padding:4px 10px;border:3px solid var(--line);border-radius:16px;background:var(--bg)}
.seq.sm{font-size:1.3rem;gap:4px}
.seq.sm b{min-width:1.7em;padding:2px 6px;border-width:2px;border-radius:10px}
.seq.sm b.mid{border-color:var(--tone);background:var(--tone-soft)}

/* ---------- jam ---------- */
.clock .face{fill:var(--surface);stroke:var(--ink);stroke-width:6}
.clock .tk{stroke:var(--muted);stroke-width:1.5}
.clock .tk5{stroke:var(--ink);stroke-width:3}
.clock text{font-family:var(--f-display);font-weight:800;font-size:19px;fill:var(--ink);text-anchor:middle}
.clock .hh{stroke:var(--coral);stroke-width:9;stroke-linecap:round}
.clock .mh{stroke:var(--sky);stroke-width:6;stroke-linecap:round}
.clock .pin{fill:var(--ink)}
.opt .clock{max-width:100%;height:auto}
.opt .option-caption{display:block;font-size:.85rem;font-weight:700;color:var(--muted)}
.art .emo .clock{width:1.6em;height:1.6em}

/* ---------- uang (gambar sederhana, bukan tiruan uang asli) ---------- */
.coin{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#d9dde6 35%,#a9b0bf 100%);border:3px solid #8a92a3;color:#2c3445;font-family:var(--f-display);box-shadow:inset 0 0 0 4px rgba(255,255,255,.35)}
.coin b{font-size:1.05rem;font-weight:800}
.coin.c500,.coin.c1000{background:radial-gradient(circle at 35% 30%,#fff7d6 0,#f1cf6b 40%,#c99a2e 100%);border-color:#a87b1c}
span.note{display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:space-between;width:120px;height:62px;padding:6px 10px;border-radius:8px;color:#fff;font-family:var(--f-display);background:var(--nc);border:2px solid rgba(0,0,0,.18);background-image:radial-gradient(circle at 22% 50%,rgba(255,255,255,.35) 0 16px,transparent 17px),linear-gradient(135deg,rgba(255,255,255,.18),rgba(0,0,0,.1))}
span.note b{font-size:1.15rem;font-weight:800;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.3)}
span.note small{font-size:.6rem;letter-spacing:.12em;font-weight:800;opacity:.9}
.note.n1000{--nc:#7a9a3a}.note.n2000{--nc:#7d8590}.note.n5000{--nc:#a0703c}.note.n10000{--nc:#7b4bb5}
.note.n20000{--nc:#2f8f55}.note.n50000{--nc:#2f6fb8}.note.n100000{--nc:#d2453f}
.money-pile{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;max-width:520px}
.money-pile>b{font-family:var(--f-display);font-size:1.6rem}
.money-art{display:flex;gap:10px;align-items:center}
.opt .txt.money{font-size:1.35rem}
.shop{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.shop .pic{font-size:3.4rem}
.shop .tag{font-family:var(--f-display);font-weight:800;font-size:1.4rem;background:var(--sun-soft);border:2px dashed var(--sun);border-radius:12px;padding:4px 12px}

/* ---------- memori ---------- */
.memory{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px;width:100%;max-width:min(560px,calc(var(--cols,3)*130px))}
.mcard{aspect-ratio:1;border:3px solid var(--line);border-radius:18px;background:var(--tone);display:grid;place-items:center;padding:6px;font-size:2.4rem;transition:transform .2s,background .2s,border-color .2s}
.mcard .mc-back{font-family:var(--f-display);font-weight:800;color:#fff;font-size:2rem}
.mcard .mc-face{display:none}
.mcard.up,.mcard.done{background:var(--surface);animation:mflip .22s ease-out}
@keyframes mflip{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mcard.up .mc-back,.mcard.done .mc-back{display:none}
.mcard.up .mc-face,.mcard.done .mc-face{display:block}
.mcard.done{border-color:var(--good);background:var(--leaf-soft)}
.mcard .vis{width:1.6em;height:1.6em;object-fit:contain}
.mem-art{align-items:center}
.mem-art .mc-back{display:grid;place-items:center;width:1.2em;height:1.2em;border-radius:12px;background:var(--tone);color:#fff;font-family:var(--f-display);font-size:.7em}

/* ---------- tarik garis ---------- */
.lines{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(56px,16vw,170px);width:100%;max-width:560px;touch-action:none;user-select:none;-webkit-user-select:none}
.lines-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.lcol,.rcol{display:flex;flex-direction:column;gap:12px}
.lnode{position:relative;display:grid;place-items:center;min-height:88px;background:var(--bg);border:3px solid var(--line);border-radius:20px;font-size:2.6rem;cursor:grab;transition:border-color .12s,background .12s}
.lnode .pic{font-size:inherit;pointer-events:none}
.lnode .vis{width:1.6em;height:1.6em;object-fit:contain}
.lnode .dot{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--tone);border:3px solid var(--surface);transform:translateY(-50%);box-shadow:0 0 0 2px var(--tone)}
.lnode.L .dot{right:-12px}
.lnode.R .dot{left:-12px}
.lnode.sel{border-color:var(--tone);background:var(--tone-soft)}
.lnode.done{border-color:var(--good);background:var(--leaf-soft);cursor:default}
.lnode.done .dot{background:var(--good);box-shadow:0 0 0 2px var(--good)}
.lnode.shake{border-color:var(--bad);animation:shake .35s}
.ln{stroke-width:6;stroke-linecap:round}
.ln.live{stroke:var(--tone);stroke-dasharray:1 12}
.ln.ok{stroke:var(--good)}
.ln.bad{stroke:var(--bad)}
.match-art{align-items:center}
.match-art .art-line{width:1.1em;height:4px;border-radius:2px;background:var(--tone)}
@media (max-width:640px){.lnode{min-height:76px;font-size:2.2rem}.coin{width:54px;height:54px}.note{width:104px;height:54px}}

/* ---------- ukuran ---------- */
.sz{display:inline-block;line-height:1}
.train{font-size:1.6rem;white-space:nowrap;letter-spacing:-.12em}
.tower{display:flex;flex-direction:column-reverse;align-items:center;font-size:1.15rem;line-height:1.05}
.tower i{font-style:normal;display:block}
.pile{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:110px;font-size:1.25rem;line-height:1.1}
.opts.stack .opt .train{font-size:1.9rem}
.size-duo{align-items:flex-end;gap:14px;font-size:1rem;min-height:72px}
.size-duo .tower{font-size:.85rem}
.size-duo .train{font-size:1rem}
.size-duo .pile{font-size:.95rem;max-width:70px}
.size-art{align-items:flex-end}

/* ---------- cerita ---------- */
.story{display:flex;flex-direction:column;gap:14px}
.story-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:720px;width:100%;margin-inline:auto;counter-reset:hal}
.spage{width:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:14px 18px;transition:border-color .15s,background .15s}
.spage .spic{grid-row:span 2;font-size:2.6rem;line-height:1;min-width:2.2em;text-align:center}
.spage .spic .vis{width:1.4em;height:1.4em}
.spage .stext{font-family:var(--f-display);font-weight:700;font-size:clamp(1.1rem,2.6vw,1.35rem);line-height:1.35}
.spage .str{color:var(--muted);font-weight:600;font-size:.92rem;margin-top:2px}
.spage.reading,.spage.say{border-color:var(--tone);background:var(--tone-soft)}
.story-art{align-items:center}
.opts.stack .opt .txt.sm{font-size:1.15rem}
.size-duo.col{flex-direction:column;align-items:flex-start;gap:4px;min-height:0}
.story>.maze-tools{width:100%;max-width:720px;margin-inline:auto}
.opt .sz{max-width:100%}

/* Huruf pertama kata & arti di kartu dan pilihan jawaban selalu kapital (Eye / Mata, Foot / Telapak kaki).
   Suku kata (ba, bi, bu) dan huruf kecil abc tidak ikut karena tidak berada di dalam .tiles. */
.tiles .tile .w::first-letter,.tiles .tile .m::first-letter,.side .w::first-letter,.side .m::first-letter,
.option-caption::first-letter,.opt .txt.sm::first-letter,.spage .stext::first-letter,.spage .str::first-letter{text-transform:uppercase}
.starcount .streak-mini{margin-top:4px;font-size:.75rem;font-weight:800;color:var(--ink);background:var(--sun-soft);border-radius:999px;padding:2px 10px;white-space:nowrap}

/* ---------- profil anak: hari beruntun, target harian, kemajuan per menu ---------- */
.me-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:16px 20px}
.me-card .ava{width:84px;height:84px;border-radius:50%;background:var(--sun-soft);object-fit:contain}
.me-who{flex:1;min-width:180px}
.me-who h2{font-size:1.5rem}
.me-who small{color:var(--muted);font-weight:700}
.me-streak{display:flex;flex-direction:column;align-items:center;background:var(--coral-soft);border-radius:18px;padding:8px 18px}
.me-streak b{font-family:var(--f-display);font-size:1.9rem;line-height:1.1}
.me-streak small{font-weight:800;font-size:.75rem;color:var(--muted)}
.goal-card .goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.goal-card .goal-top span{font-family:var(--f-display);font-weight:800;font-size:1.2rem}
.goal-dots{display:flex;gap:10px}
.goal-dots i{width:44px;height:44px;border-radius:14px;border:3px dashed var(--line);display:grid;place-items:center;font-style:normal;font-size:1.3rem}
.goal-dots i.on{border:3px solid var(--sun);background:var(--sun-soft)}
.goal-card p{margin:0;font-weight:700}
.week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;max-width:520px}
.wday{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:6px 2px}
.wday span{font-size:.75rem;font-weight:800;color:var(--muted)}
.wday b{font-size:1.3rem;line-height:1.2;color:var(--muted)}
.wday small{font-size:.7rem;font-weight:800;min-height:1em}
.wday.on{border-color:var(--sun);background:var(--sun-soft)}
.wday.goal{border-color:var(--good)}
.wday.today span{color:var(--ink)}
.cat-progress{display:flex;flex-direction:column;gap:8px}
.cprow{display:grid;grid-template-columns:minmax(110px,160px) 1fr auto;align-items:center;gap:12px;border:0;background:var(--bg);border-radius:14px;padding:10px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.cprow:hover{outline:2px solid var(--tone)}
.cprow .cname{font-weight:800}
.cprow .cbar{height:12px;border-radius:99px;background:var(--line);overflow:hidden}
.cprow .cbar i{display:block;height:100%;border-radius:99px;background:var(--tone)}
.cprow .cnum{font-weight:800;font-size:.85rem;white-space:nowrap}
.board-filters{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.board-filters .chips{display:flex;flex-wrap:wrap;gap:8px}
.board-filters .chip[aria-pressed="true"],.chips .chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
@media (max-width:640px){.cprow{grid-template-columns:1fr auto}.cprow .cbar{grid-column:1 / -1;order:3}.goal-dots i{width:38px;height:38px}}

/* ---------- Mewarnai ---------- */
.cpic{width:100%;height:auto;display:block}
.cpic [data-part]{fill:#fff;stroke:#1B2140;stroke-width:3;stroke-linejoin:round;cursor:pointer;transition:fill .15s}
.cpic [data-part]:hover{filter:brightness(.97)}
.cpic [data-part]:focus-visible{outline:none;stroke:var(--brand-blue);stroke-width:5}
.cpic g[data-part] > *{stroke:inherit}
.cpic .deco{fill:none;stroke:#1B2140;stroke-width:3;stroke-linecap:round;pointer-events:none}
.cpic .deco.dot{fill:#1B2140;stroke:none}
.cpic .pop{animation:cpop .25s}
@keyframes cpop{50%{opacity:.6}}
.color-art{width:100%;height:100%;display:grid;place-items:center;padding:6px}
.color-art .cpic{width:auto;height:100%;max-width:100%}
.color-art .cpic [data-part]{stroke-width:4}
.cpic-chips{gap:10px}
.pic-chip{width:74px;height:66px;padding:4px;border-radius:16px}
.pic-chip .thumb [data-part]{stroke-width:5;cursor:inherit}
.color-board{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start;background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:16px;width:100%}
.color-stage{background:#fff;border-radius:20px;padding:8px;border:2px dashed var(--line)}
.color-stage .cpic{max-height:56vh;margin:0 auto}
.color-side{display:flex;flex-direction:column;gap:14px}
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.swatch-btn{aspect-ratio:1;border-radius:50%;border:3px solid var(--line);background:var(--surface);padding:4px;position:relative;display:grid;place-items:center}
.swatch-btn i{position:absolute;inset:4px;border-radius:50%;background:var(--sw);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.swatch-btn span{position:relative;font-size:1.1rem}
.swatch-btn.eraser i{background:#fff;border:2px dashed #C7CEDD}
.swatch-btn[aria-checked="true"]{border-color:var(--ink);transform:scale(1.08);box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--sw)}
.color-tools{display:flex;gap:8px;flex-wrap:wrap}
.color-tools .btn{flex:1 1 120px;justify-content:center}
.color-now{font-weight:800;min-height:1.5em;color:var(--muted)}
.quiz-board{max-width:820px;margin-inline:auto;border:0;padding:0;background:transparent}
.ask .hl[style*="--hlc"]{color:var(--hlc);-webkit-text-stroke:.6px #1B2140;paint-order:stroke fill}
@media (max-width:760px){
  .color-board{grid-template-columns:1fr;padding:12px}
  .palette{grid-template-columns:repeat(6,1fr)}
  .color-stage .cpic{max-height:44vh}
}
@media (max-width:400px){.palette{grid-template-columns:repeat(4,1fr)}}

/* menu atas: 7 menu -> di layar sedang hanya ikon, label hanya untuk menu yang aktif */
@media (max-width:1500px) and (min-width:1181px){
  .tb-nav button{padding:9px 11px}
  .tb-nav button span{display:none}
  .tb-nav button[aria-current="page"] span{display:inline}
  .tb-nav button{position:relative}
}
@media (max-width:480px){.nav button{min-width:40px;padding:0 9px}.nav{gap:1px;padding:5px}}

/* Gambar orang badan penuh (keluarga) tinggi & ramping: tampilkan lebih besar supaya tidak tenggelam di kartu. */
.tile .pic .vis[src*="/keluarga/"]{height:2.7em;max-width:100%}
.opt .pic .vis[src*="/keluarga/"]{height:2.2em;max-width:none}
.mcard .vis[src*="/keluarga/"]{width:auto;height:2.4em}
/* Kata panjang (Grandparents, Younger brother) tidak keluar dari kartu. */
.tile .w.long{font-size:1.1rem}
/* Ukuran huruf kata panjang diatur main.js (fitWord) supaya kata utuh; ini cadangan bila JS belum jalan. */
.tile .w{overflow-wrap:break-word;hyphens:manual;max-width:100%}
/* Angka bergambar (vocab/angka): tinggi mengikuti ukuran huruf tempatnya */
.num-img{display:block;height:1.05em;width:auto;max-width:100%;margin:0 auto;object-fit:contain;pointer-events:none}
.hc .num-img{height:1.25em}
.opt .txt .num-img{height:1.15em}
@media (max-width:480px){.tiles .tile{padding:12px 6px}}

/* ---------- menulis: papan jalur tulisan tangan ---------- */
.pad .pad-fx{pointer-events:none}
.pad{max-height:46vh}
.pad-hw{background:#FFFDF6;border-style:solid}
:root[data-theme="dark"] .pad-hw{background:var(--bg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pad-hw{background:var(--bg)}}
.pad-status{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:800;font-size:1.05rem;border-radius:14px;padding:8px 14px;background:var(--bg);color:var(--muted)}
.pad-status:empty{visibility:hidden}
.pad-status.ok{background:var(--leaf-soft);color:var(--good)}
.pad-status.no{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}
.pad-status.info{background:var(--sky-soft);color:var(--ink)}
.pad-status .ico{font-size:1.3rem}
.pad-tools .btn{min-width:120px;justify-content:center}
.next-btn{margin-left:10px;padding:10px 22px;font-size:1.05rem;vertical-align:middle}
.feedback:has(.next-btn){display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
/* Kartu perasaan berlatar pastel: tampil lebih besar supaya ekspresi wajah jelas. */
.tile .pic .vis[src*="/perasaan/"]{width:2.6em;height:2.6em;max-width:none}
.opt .pic .vis[src*="/perasaan/"]{width:2.2em;height:2.2em;max-width:none}
.mcard .vis[src*="/perasaan/"]{width:2.2em;height:2.2em;border-radius:12px}

/* ---------- sampul ubin angka/huruf (pengganti teks polos "1 2 3") ---------- */
.tile-art{display:flex;align-items:center;justify-content:center;gap:7px;padding:0 8px;max-width:100%}
.tile-art .ta{--c1:#FF8A70;--c2:#FF5A3C;display:grid;place-items:center;min-width:1.55em;height:1.55em;padding:0 .18em;border-radius:.32em;font:800 clamp(1.5rem,2.6vw,2.05rem)/1 var(--f-display);color:#fff;
  background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:inset 0 -.12em 0 rgba(0,0,0,.16),inset 0 .1em 0 rgba(255,255,255,.35),0 .18em .35em rgba(27,33,64,.18);text-shadow:0 2px 0 rgba(0,0,0,.14)}
.tile-art .ta:nth-of-type(odd){transform:rotate(-4deg)}
.tile-art .ta:nth-of-type(even){transform:rotate(3deg) translateY(-3px)}
.tile-art .ta.c1{--c1:#6CC0FF;--c2:#2E86E8}
.tile-art .ta.c2{--c1:#FFD866;--c2:#FFAE12;color:#5A3A00;text-shadow:none}
.tile-art .ta.c3{--c1:#5FDB9B;--c2:#18A862}
.tile-art .ta.c4{--c1:#B794FF;--c2:#7C4DEB}
.tile-art .ta.wide{font-size:clamp(1.25rem,2.2vw,1.7rem)}
.tile-art .ta.blank{background:var(--surface);color:var(--tone);border:3px dashed var(--tone);box-shadow:none;text-shadow:none}
.tile-art .ta-op{font:800 clamp(1.4rem,2.4vw,1.9rem)/1 var(--f-display);color:var(--ink);font-style:normal}
.tile-art.many{gap:4px}
.tile-art.many .ta{font-size:clamp(1.15rem,2vw,1.55rem)}
.tile-art.trace .ta{background:var(--surface);color:var(--c2);border:3px dashed var(--c2);box-shadow:0 .15em .3em rgba(27,33,64,.12);text-shadow:none}
.tile-art.words{flex-direction:column;gap:6px}
.tile-art.words .ta{font-size:clamp(1rem,1.7vw,1.25rem);height:1.9em;padding:0 .7em;transform:none}
.tile-art.words .ta:nth-of-type(2){transform:translateX(18px) rotate(-2deg)}
/* Seluruh kotak kartu bisa diklik (gambar sampul tidak lagi menutupi tautan). */
.card-link::after{z-index:1}
.card .art{z-index:0}

/* ---------- ukuran (SVG) ---------- */
.sz-shape{display:block;filter:drop-shadow(0 3px 3px rgba(27,33,64,.15))}
.sz-pencil,.sz-tower{display:block;max-width:100%;height:auto;filter:drop-shadow(0 3px 3px rgba(27,33,64,.15))}
.sz-pile{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:96px}
.sz-pair{display:flex;align-items:flex-end;justify-content:center;gap:14px;min-height:96px;width:100%}
.sz-pair.sz-long{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.sz-pair.sz-many .sz-pile{max-width:72px}
.sz-learn{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.opts.sz-opts .opt{min-height:140px;align-content:end;padding-bottom:16px}
.opts.stack.sz-opts .opt{min-height:64px;justify-items:start;padding:12px 18px}
.sz-art{display:flex;align-items:flex-end;gap:8px}

/* ---------- pola, lompat hitung, ganjil-genap ---------- */
.pat{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.pat-i{display:block;filter:drop-shadow(0 3px 3px rgba(27,33,64,.15))}
.pat-blank{display:grid;place-items:center;width:46px;height:46px;border:3px dashed var(--tone);border-radius:12px;font:800 1.5rem var(--f-display);color:var(--tone);background:var(--surface)}
.pat-art .pat-blank{width:30px;height:30px;font-size:1rem}
.pat-learn{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pat-tile{gap:8px}
.pat-tile .pat-i{width:34px;height:34px}
.skip-block{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.skip-head{align-self:flex-start;border:0;background:var(--tone-soft);border-radius:999px;padding:8px 16px;font:800 1rem var(--f-body);color:var(--ink);cursor:pointer}
.skip-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.skip-n{aspect-ratio:auto;height:58px;color:#fff;border:0;background:linear-gradient(160deg,#FF8A70,#FF5A3C);box-shadow:inset 0 -4px 0 rgba(0,0,0,.14)}
.skip-n.c1{background:linear-gradient(160deg,#6CC0FF,#2E86E8)}
.skip-n.c2{background:linear-gradient(160deg,#FFD866,#FFAE12);color:#5A3A00}
.skip-n.c3{background:linear-gradient(160deg,#5FDB9B,#18A862)}
.skip-n.c4{background:linear-gradient(160deg,#B794FF,#7C4DEB)}
.oe-dots{display:flex;gap:4px;justify-content:center;min-height:36px;align-items:flex-start}
.oe-col{display:flex;flex-direction:column;gap:4px}
.oe-col i{width:13px;height:13px;border-radius:50%;background:var(--tone);display:block}
.oe-tile.odd .oe-col:last-child:has(i:only-child) i{background:var(--bad)}
.oe-tile.even .m{color:var(--good);font-weight:800}
.oe-tile.odd .m{color:var(--bad);font-weight:800}
.oe-q .oe-col i{width:22px;height:22px}
.oe-q .oe-dots{gap:8px}
.oe-q .oe-col{gap:8px}
.oe-q .oe-col:last-child:has(i:only-child) i{background:var(--bad)}
.group-head.clickable{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.group-head.clickable:hover{transform:translateY(-2px);border-color:var(--tone);box-shadow:0 14px 32px rgba(44,60,108,.14)}
.g-icon .vis[src*="icons/groups/"]{width:1.15em;height:1.15em;max-width:none;object-fit:contain}
.nw{white-space:nowrap}
.cpic .deco .dot{fill:#1B2140;stroke:none}
.sz-pair.sz-many{gap:26px;align-items:center}.sz-pair.sz-many .sz-pile{max-width:66px;padding:6px;border-radius:12px;background:var(--bg)}

/* ---------- labirin (taman) ---------- */
:root{--mz-grass:#7CCB5E;--mz-path:#FFF3D6;--mz-hedge:#2F8A3E;--mz-hedge-top:#4FB35A;--mz-start:#DCEEFD}
:root[data-theme="dark"]{--mz-grass:#1F6B47;--mz-path:#2C3458;--mz-hedge:#123F2A;--mz-hedge-top:#2F8A55;--mz-start:#1D3657}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mz-grass:#1F6B47;--mz-path:#2C3458;--mz-hedge:#123F2A;--mz-hedge-top:#2F8A55;--mz-start:#1D3657}}
.mz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mz-tools{display:flex;gap:8px;flex-wrap:wrap}
.mz-tools [aria-pressed="true"]{background:var(--leaf-soft);border-color:var(--good)}
.mz-goal-text{text-align:center;font-family:var(--f-display);font-size:clamp(1.1rem,2.6vw,1.45rem);margin:2px 0 -4px}
.mz{display:grid;grid-template-columns:minmax(0,560px) auto;gap:22px 34px;align-items:center;justify-content:center;width:100%}
.mz-board{display:flex;flex-direction:column;gap:8px;min-width:0}
.mz-hud{display:flex;justify-content:center;gap:10px}
.mz-hud span{background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:4px 14px;font-weight:800;font-variant-numeric:tabular-nums}
.mz-svg{width:100%;max-height:68vh;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;filter:drop-shadow(0 8px 16px rgba(27,33,64,.15))}
.mz-grass{fill:var(--mz-grass)}
.mz-path{fill:var(--mz-path)}
.mz-start{fill:var(--mz-start)}
.mz-hedge{fill:none;stroke:var(--mz-hedge);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.mz-hedge-top{fill:none;stroke:var(--mz-hedge-top);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform:translate(-.25px,-.35px)}
.mz-trail{fill:none;stroke:var(--tone);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 2.6;opacity:.85}
.mz-hint{fill:none;stroke:var(--good);stroke-width:1.2;stroke-dasharray:2 2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.mz-emoji{font-size:7.6px;text-anchor:middle;dominant-baseline:central}
.mz-star{font-size:4.6px;text-anchor:middle;dominant-baseline:central;transition:transform .3s,opacity .3s;transform-box:fill-box;transform-origin:center;animation:mzTwinkle 1.6s ease-in-out infinite}
.mz-star.taken{opacity:0;transform:scale(2.4) translateY(-2px);animation:none}
.mz-goal{transform-box:fill-box;transform-origin:center;animation:mzBob 1.4s ease-in-out infinite}
.mz-goal-glow{fill:var(--sun);opacity:.35;transform-box:fill-box;transform-origin:center;animation:mzGlow 1.4s ease-in-out infinite}
.mz-hero{transition:transform .085s linear}
.mz-hero text{transform-box:fill-box;transform-origin:center bottom}
.mz-hero.bump text{animation:mzBump .25s}
.mz.won .mz-hero text{animation:mzHop .45s 3}
.mz-conf{animation:mzConf .9s ease-out forwards}
@keyframes mzTwinkle{50%{transform:scale(.82)}}
@keyframes mzBob{50%{transform:translateY(-.8px) scale(1.06)}}
@keyframes mzGlow{50%{opacity:.6;transform:scale(1.15)}}
@keyframes mzBump{25%{transform:translateX(-.8px)}75%{transform:translateX(.8px)}}
@keyframes mzHop{50%{transform:translateY(-2.5px) scale(1.1)}}
@keyframes mzConf{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.mz-pad{display:grid;grid-template-columns:repeat(3,76px);grid-template-areas:". up ." "left down right";gap:10px;justify-content:center}
.mz-arrow{height:72px;border-radius:22px;border:0;background:var(--tone);color:#1B2140;font-size:1.5rem;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 5px 0 color-mix(in srgb,var(--tone) 60%,#1B2140);transition:transform .06s,box-shadow .06s}
.mz-arrow small{font-size:.72rem;font-weight:800;margin-top:4px}
.mz-arrow:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--tone) 60%,#1B2140)}
.mz-pad .a-up{grid-area:up}.mz-pad .a-left{grid-area:left}.mz-pad .a-down{grid-area:down}.mz-pad .a-right{grid-area:right}
.mz-win{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--leaf-soft);border-radius:20px;padding:14px;font-size:1.1rem}
.mz-win b{font-family:var(--f-display);font-size:1.4rem;color:var(--good)}
.mz-tips summary{cursor:pointer;font-weight:800;font-family:var(--f-display);font-size:1.1rem}
.mz-tips[open] summary{margin-bottom:6px}
@media (max-width:820px){
  .mz{grid-template-columns:1fr;gap:14px}
  .mz-svg{max-height:56vh;margin:0 auto}
  .mz-pad{grid-template-columns:repeat(3,72px)}
  .mz-arrow{height:64px}
}
@media (prefers-reduced-motion:reduce){.mz-star,.mz-goal,.mz-goal-glow{animation:none}}

/* judul pelajaran bahasa Inggris: Indonesia kecil di bawahnya */
.t-id{display:block;font-family:var(--f-body);font-weight:700;font-size:.78em;color:var(--muted);margin-top:2px;line-height:1.25}
.mhead h1 .t-id{font-size:.5em;margin-top:0}
.g-info h1 .t-id{font-size:.5em}
.mhead h1 .lvl{vertical-align:super}
.dots.tens{align-items:center}
.dots .ten-bar{display:block;width:44px;height:9px;border-radius:5px;background:var(--tone);margin-right:3px;position:relative}
.dots .ten-bar::after{content:"10";position:absolute;inset:-1px 0 0;font-size:8px;line-height:9px;text-align:center;color:#1B2140;font-weight:800}
.rowlabel small{font-weight:600;font-size:.8em}

/* ---------- Mewarnai: kuas, isi per bentuk, saran warna ---------- */
.cpic .deco.txt{fill:#1B2140;stroke:none;font:800 34px/1 Arial,sans-serif;text-anchor:middle}
.cpic .brush{pointer-events:none}
.cpic .brush-outline{fill:none;stroke:#1B2140;stroke-width:3;stroke-linejoin:round;pointer-events:none}
.color-stage.brushing svg{touch-action:none;cursor:crosshair}
.color-stage.brushing .cpic [data-part]:hover{filter:none}
.cl-tools{align-self:stretch;display:flex;margin:0}
.cl-tools button{flex:1;font-size:1rem}
.cl-sizes{display:flex;gap:8px;justify-content:center}
.cl-sizes[hidden]{display:none}
.cl-sizes button{width:48px;height:48px;border-radius:50%;border:3px solid var(--line);background:var(--surface);display:grid;place-items:center}
.cl-sizes button i{width:var(--d);height:var(--d);border-radius:50%;background:var(--ink)}
.cl-sizes button[aria-checked="true"]{border-color:var(--ink);background:var(--sun)}
.cl-hint-toggle{display:flex;align-items:center;gap:10px;font-weight:800;background:var(--bg);border:2px solid var(--line);border-radius:16px;padding:10px 14px;cursor:pointer}
.cl-hint-toggle input{width:22px;height:22px;accent-color:var(--brand-blue)}
.cl-example{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:16px;padding:8px 12px}
.cl-example[hidden]{display:none}
.cl-example small{font-weight:800;color:var(--muted)}
.cl-example .cpic{width:96px}
.cl-example .cpic [data-part]{stroke-width:5;cursor:default}
.cl-hints circle{stroke:#fff;stroke-width:2.5;cursor:pointer;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));animation:clhint 1.8s ease-in-out infinite}
@keyframes clhint{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.cl-hints circle{animation:none}}

/* ---------- Hitung gambar ---------- */
.cp-card{display:flex;flex-direction:column;gap:14px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:18px;width:100%}
.cp-ask,.fi-ask{font-family:var(--f-display);font-weight:800;font-size:1.35rem;text-align:center;margin:0;display:flex;flex-direction:column;gap:2px}
.cp-ask .tr,.fi-ask .tr{font-family:var(--f-body);font-size:.85rem;font-weight:600;color:var(--muted)}
.cp-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),auto);gap:10px 6px;width:100%;max-width:520px;margin:0 auto;padding:14px;border-radius:24px;background:color-mix(in srgb,var(--tone,var(--sun)) 16%,var(--surface));border:2px dashed var(--line)}
.cp-item{position:relative;border:0;background:transparent;padding:4px;aspect-ratio:1;display:grid;place-items:center;transform:translate(var(--dx),var(--dy)) rotate(var(--rot));border-radius:18px;transition:transform .15s}
.cp-item .pic{font-size:clamp(2rem,7vw,3.2rem);line-height:1;display:grid;place-items:center;width:100%;height:100%}
.cp-item .pic .vis{width:100%;height:100%;max-width:84px;max-height:84px;object-fit:contain}
.cp-item:active{transform:translate(var(--dx),var(--dy)) scale(.92)}
.cp-item.counted{background:color-mix(in srgb,var(--good) 18%,transparent);outline:3px solid var(--good)}
.cp-item.counted .pic{opacity:.75}
.cp-num{position:absolute;top:-6px;right:-6px;min-width:28px;height:28px;border-radius:14px;background:var(--good);color:#fff;font-weight:800;display:none;place-items:center;padding:0 6px;font-size:1rem;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.cp-item.counted .cp-num{display:grid;animation:cpop .25s}
.quiz .cp-board{max-width:480px}
.cp-result{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:1.5em;font-weight:800}
.cp-result span{font-family:var(--f-display);font-size:1.5rem}
.cp-result small{color:var(--muted)}
.cp-big{font-family:var(--f-display);font-size:3.4rem;line-height:1;color:var(--good)}
.cp-art{display:flex;align-items:center;gap:4px;font-size:2.4rem;flex-wrap:wrap;justify-content:center}
.cp-art .vis{width:1.4em;height:1.4em;object-fit:contain}
.cp-art b{width:100%;text-align:center;font-size:1rem;font-family:var(--f-display)}

/* ---------- Hitung jari ---------- */
.hands{display:inline-flex;gap:2px;align-items:flex-end;justify-content:center}
.hand{width:46px;height:auto}
.hand.flip{transform:scaleX(-1)}
.hand .fg,.hand .palm,.hand .wrist{fill:#F6C9A0;stroke:#C98B5E;stroke-width:2.2}
.hand .fg.up{fill:#F8D2AE}
.hand .fg.fold{fill:#EDB98C}
.hand .wrist{fill:#7FB4F5;stroke:#4C88D6}
.hands.big .hand{width:clamp(80px,22vw,120px)}
.tiles.fingers .tile .hand{width:50px}
.opts.hands-opts .opt .hand{width:clamp(36px,10vw,52px)}
.fg-art{display:flex;flex-direction:column;align-items:center;gap:2px}
.fg-art .hand{width:64px}
.fg-art b{font-family:var(--f-display);font-size:1.6rem}

/* ---------- Cari huruf (konsentrasi) ---------- */
.fi{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.fi-hud{display:flex;gap:14px;align-items:center;font-weight:800;font-size:1.1rem;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:6px 16px 6px 6px}
.fi-target{width:48px;height:48px;border-radius:50%;background:var(--sun);color:#1B2140;display:grid;place-items:center;font-family:var(--f-display);font-size:1.8rem;font-weight:800}
.fi-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;width:100%;max-width:calc(var(--n) * 76px)}
.fi-cell{aspect-ratio:1;border-radius:16px;border:3px solid var(--line);background:var(--surface);font-family:var(--f-display);font-weight:800;font-size:clamp(1.4rem,6vw,2.2rem);color:var(--ink);display:grid;place-items:center;transition:transform .1s}
.fi-cell:active{transform:scale(.92)}
.fi-cell.hit{background:var(--good);border-color:var(--good);color:#fff;animation:cpop .25s}
.fi-cell.miss{animation:fishake .35s;border-color:var(--bad)}
@keyframes fishake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fi.won .fi-grid{animation:cpop .4s}
.fi-result{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;min-height:1.5em}
.fi-result b{font-family:var(--f-display);font-size:1.5rem}
.fi-art{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;position:relative;font-family:var(--f-display);font-weight:800;font-size:1.5rem}
.fi-art i{font-style:normal;width:38px;height:38px;border-radius:10px;background:var(--surface);display:grid;place-items:center;border:2px solid var(--line)}
.fi-art i.on{background:var(--good);color:#fff;border-color:var(--good)}
.fi-art span{position:absolute;right:-14px;bottom:-12px;font-size:1.8rem}

/* ---------- ten frame (penjumlahan & pengurangan) ---------- */
.tf-learn{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tf-sum{display:flex;align-items:center;justify-content:center;gap:10px;min-height:68px}
.tf-sum>b{font:800 1.6rem var(--f-display);color:var(--ink)}
.tf-group{display:flex;flex-direction:column;gap:4px}
.tf{display:grid;grid-template-columns:repeat(5,15px);grid-template-rows:repeat(2,15px);gap:3px;padding:4px;background:var(--surface);border:2px solid var(--line);border-radius:8px}
.tf i{display:block;border-radius:50%;background:var(--bg)}
.tf i.on.a{background:radial-gradient(circle at 35% 30%,#FF9B87,#E5484D)}
.tf i.on.b{background:radial-gradient(circle at 35% 30%,#8FD0FF,#2E7BEF)}
.tf i.on.x{background:var(--bg);position:relative;box-shadow:inset 0 0 0 2px #E5484D;opacity:.85}
.tf i.on.x::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:#E5484D;transform:rotate(-45deg)}
.tf-sum.big{gap:16px}
.tf-sum.big .tf{grid-template-columns:repeat(5,30px);grid-template-rows:repeat(2,30px);gap:5px;padding:7px;border-radius:12px}
.tf-sum.big>b{font-size:2.4rem}
@media (max-width:640px){.tf-sum.big .tf{grid-template-columns:repeat(5,22px);grid-template-rows:repeat(2,22px)}}
.tf-learn{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}.tf-learn .tf{grid-template-columns:repeat(5,19px);grid-template-rows:repeat(2,19px)}
@media (max-width:640px){
  .cpic-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px;margin:0 -4px;-webkit-overflow-scrolling:touch}
  .cpic-chips .pic-chip{flex:0 0 auto}
}

/* ---------- cara menghitung, panduan, susunan titik ---------- */
.guide{background:var(--tone-soft);border-radius:20px;padding:16px 20px;margin-bottom:16px}
.guide h3{font-size:1.15rem;margin-bottom:8px}
.guide ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;font-weight:600}
.guide b{color:var(--ink)}
.guide .k-t{color:#2E7BEF;font-weight:800}.guide .k-o{color:#E8590C;font-weight:800}.guide .k-s{color:#18A862;font-weight:800}
.mrow-label{font:800 1.05rem var(--f-display);margin:18px 0 8px}
.math-learn{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.math-learn .tile{gap:8px;padding:14px 12px}
.math-learn .tile .w{font-size:1.5rem}
.steps{display:flex;flex-direction:column;gap:4px;width:100%}
.steps .st{display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:10px;padding:4px 10px;background:var(--bg);font-variant-numeric:tabular-nums}
.steps .st small{font-weight:800;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.steps .st b{font-family:var(--f-display);font-size:1.05rem}
.steps .st.tens{background:#DCEEFD}.steps .st.tens b{color:#1D63C9}
.steps .st.ones{background:#FFE8D6}.steps .st.ones b{color:#C2410C}
.steps .st.total{background:#D3F4E4}.steps .st.total b{color:#13824A}
.q-steps{max-width:340px;width:100%}
.darr{display:inline-grid;grid-template-columns:repeat(var(--c),9px);gap:3px}
.darr i{width:9px;height:9px;border-radius:50%;background:var(--tone);display:block}
.darr.big{grid-template-columns:repeat(var(--c),20px);gap:6px}
.darr.big i{width:20px;height:20px;background:radial-gradient(circle at 35% 30%,#8FD0FF,#2E7BEF)}
.share{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.share .plate{display:flex;flex-wrap:wrap;gap:3px;align-content:center;justify-content:center;width:46px;min-height:46px;padding:5px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.share .plate i{width:8px;height:8px;border-radius:50%;background:#E8590C;display:block}
.share.big .plate{width:78px;min-height:78px;gap:5px}
.share.big .plate i{width:14px;height:14px}
.loose{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:360px}
.loose i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFB27A,#E8590C);display:block}
.sqgrid{display:inline-grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;width:calc(var(--n) * 9px + (var(--n) - 1) * 2px)}
.sqgrid i{aspect-ratio:1;border-radius:2px;background:var(--tone);display:block}
.sqgrid.big{width:min(240px,calc(var(--n) * 26px));gap:4px}
.sqgrid.big i{border-radius:4px;background:linear-gradient(160deg,#B794FF,#7C4DEB)}
.table-chips{margin-bottom:6px}
.mtable[hidden]{display:none}
.opt .txt.expr{font-size:1.5rem}
.qeq.long{font-size:2rem}
.darr.cols{column-gap:7px}
.cmp-pics{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.cmp-pics.big .tf{grid-template-columns:repeat(5,22px);grid-template-rows:repeat(2,22px);gap:4px;padding:6px}.cmp-pics.big{gap:28px}.cmp-pics .tf-sum{min-height:0}
.cmp-pics{flex-wrap:nowrap;align-items:flex-start;gap:12px}.math-learn .cmp-pics .tf{grid-template-columns:repeat(5,12px);grid-template-rows:repeat(2,12px);gap:2px;padding:3px}

/* ---------- Gambar benda nyata (pics.js) ---------- */
.rpic{display:block;object-fit:contain;flex:none;filter:drop-shadow(0 3px 3px rgba(27,33,64,.16));user-select:none}
.rpic.emo{display:grid;place-items:center;line-height:1}
.pgroup{display:grid;grid-template-columns:repeat(var(--n),auto);gap:2px;justify-content:center;align-items:end}
.pg-i{animation:pgpop .38s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes pgpop{from{transform:scale(0) translateY(10px);opacity:0}}
@keyframes pgpop2{from{transform:scale(0) translateY(10px);opacity:0}}

/* ---------- Ukuran dengan benda nyata + animasi ---------- */
.sz-learn{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.sz-card{gap:8px;padding:16px 12px}
.sz-card .sz-pair{min-height:130px;gap:18px;align-items:flex-end}
.sz-pair.sz-long{flex-direction:column;align-items:flex-start;gap:10px;min-height:0}
.sz-pair.sz-many{align-items:center;gap:16px}
.sz-a,.sz-b{display:flex;align-items:flex-end;justify-content:center;max-width:100%}
.sz-pair svg,.sz-opt svg{display:block;max-width:100%;height:auto;max-height:180px;filter:drop-shadow(0 3px 3px rgba(27,33,64,.15))}
.sz-sent{display:flex;flex-direction:column;gap:1px;font-weight:800;font-size:1rem;line-height:1.3;text-align:center}
.sz-sent b:last-child{color:var(--muted)}
.sz-opt{display:flex;align-items:flex-end;justify-content:center;width:100%}
.opts.stack.sz-opts .sz-opt{justify-content:flex-start}
.sz-basket{display:inline-flex;padding:8px 8px 10px;background:#F7E7CC;border:3px solid #C99A5B;border-radius:12px 12px 24px 24px;box-shadow:inset 0 -6px 0 rgba(201,154,91,.35)}
.sz-art{display:flex;align-items:flex-end;gap:6px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sz-basket{background:#4A3A28;border-color:#8E6A3E}}
:root[data-theme="dark"] .sz-basket{background:#4A3A28;border-color:#8E6A3E}

/* gerak santai terus-menerus */
.sz-a > .rpic{animation:szbreathe 2.8s ease-in-out infinite;transform-origin:50% 100%}
.sz-b > .rpic{animation:szhop 1.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes szbreathe{50%{transform:scale(1.04,.97)}}
@keyframes szhop{0%,60%,100%{transform:translateY(0)}75%{transform:translateY(-6px)}}
.sz-wheel{animation:szspin 1.1s linear infinite}
@keyframes szspin{to{transform:rotate(360deg)}}
.sz-train{animation:szchug .5s ease-in-out infinite alternate}
@keyframes szchug{to{transform:translateY(-1.5px)}}
.sz-puff{animation:szpuff 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.sz-puff.p2{animation-delay:.9s}
@keyframes szpuff{from{transform:translate(0,8px) scale(.4);opacity:.9}to{transform:translate(-14px,-6px) scale(1.6);opacity:0}}
.sz-neck{animation:szsway 3.2s ease-in-out infinite}
@keyframes szsway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.sz-crown{animation:szsway 4s ease-in-out infinite}
.sz-win{fill:#FFE27A}
.sz-win.blink{animation:szwin 3s steps(1) infinite;animation-delay:var(--d)}
@keyframes szwin{50%{fill:#3A4466}}
.sz-tongue{animation:sztongue 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:0 50%}
@keyframes sztongue{0%,70%,100%{transform:scaleX(0)}80%,90%{transform:scaleX(1)}}

/* ketuk kartu: yang besar/panjang/tinggi "pamer", yang kecil mengecil sebentar */
.sz-card.play .sz-a{animation:szshow .8s cubic-bezier(.3,1.5,.5,1)}
.sz-card.play .sz-b{animation:szshy .8s ease-in-out}
.sz-card.play .pg-i{animation-name:pgpop2}
@keyframes szshow{40%{transform:scale(1.14)}}
@keyframes szshy{40%{transform:scale(.82)}}
.opt.ok .sz-opt{animation:szshow .8s cubic-bezier(.3,1.5,.5,1)}
.cnt-pics{display:flex;flex-wrap:wrap;justify-content:center;gap:1px;max-width:118px}
.tile .dots.tens .cnt-pics{max-width:72px}
.tile .dots .cnt-pics .rpic{width:22px;height:22px}

/* ---------- Cerita bergambar tambah & kurang ---------- */
.story-scene{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:20px;min-height:84px;
  background:linear-gradient(#DFF1FF,#EAF7EE);border:2px solid var(--line);max-width:100%}
.story-scene.ss-duck,.story-scene.ss-fish{background:linear-gradient(#DFF1FF,#BFE3FA)}
.story-scene.ss-car{background:linear-gradient(#EEF1F7 70%,#C9CFDB 70%)}
.story-scene.ss-apple,.story-scene.ss-cupcake{background:linear-gradient(#FFF6E5,#FCE9C8)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .story-scene{filter:brightness(.82)}}
:root[data-theme="dark"] .story-scene{filter:brightness(.82)}
.ss-op{font-family:var(--f-display);font-size:1.8rem;color:var(--ink)}
.ss-come .pg-i{animation:sscome .9s cubic-bezier(.25,1.2,.5,1) both;animation-delay:calc(.7s + var(--i) * 140ms)}
.ss-bird .ss-come .pg-i{animation-name:ssflyin}
@keyframes sscome{from{transform:translateX(90px);opacity:0}}
@keyframes ssflyin{from{transform:translate(70px,-50px) rotate(-12deg);opacity:0}}
.ss-go{animation:ssfly 1.2s ease-in both;animation-delay:calc(1s + var(--j) * 250ms)}
.ss-go.swim,.ss-go.drive{animation-name:ssswim}
.ss-go.eat{animation-name:sseat}
@keyframes ssfly{0%{transform:none;opacity:1}60%{transform:translate(26px,-46px) rotate(10deg);opacity:.6}100%{transform:none;opacity:.2;filter:grayscale(1)}}
@keyframes ssswim{0%{transform:none;opacity:1}60%{transform:translateX(60px);opacity:0}100%{transform:none;opacity:.2;filter:grayscale(1)}}
@keyframes sseat{0%{transform:none;opacity:1}30%{transform:scale(1.15)}70%{transform:scale(.3);opacity:.3}100%{transform:none;opacity:.2;filter:grayscale(1)}}
.ss-go .rpic{outline:2px dashed transparent}
.ss-learn{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.ss-learn .tile{gap:8px}
.quiz .story-scene{min-width:min(420px,100%)}
@media (prefers-reduced-motion:reduce){.ss-go{opacity:.2;filter:grayscale(1)}}
.pat .pat-blank{animation:patpulse 1.4s ease-in-out infinite}
@keyframes patpulse{50%{transform:scale(1.1);box-shadow:0 0 0 6px color-mix(in srgb,var(--tone) 25%,transparent)}}
/* Ganjil–genap dengan hewan berpasangan */
.oe-pics{flex-wrap:wrap;gap:4px 3px;max-width:126px;align-items:flex-start}
.oe-pics .oe-col{gap:1px;padding:3px 2px;border-radius:10px;background:color-mix(in srgb,var(--good) 16%,transparent)}
.oe-pics .oe-col.oe-alone{background:color-mix(in srgb,var(--bad) 16%,transparent);animation:oealone 1.6s ease-in-out infinite}
@keyframes oealone{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.oe-q .oe-pics{max-width:420px;gap:8px 6px}
.oe-q .oe-pics .oe-col{padding:5px 4px;gap:3px}
.ss-learn .story-scene{flex-wrap:nowrap;gap:8px;padding:10px}

/* ---------- lencana ---------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 10px;border-radius:18px;background:var(--bg);border:2px dashed var(--line);filter:grayscale(1);opacity:.75}
.badge-card.got{filter:none;opacity:1;border:2px solid var(--sun);background:linear-gradient(160deg,var(--sun-soft),var(--surface))}
.badge-card .bi{font-size:2.2rem;line-height:1.1}
.badge-card b{font-family:var(--f-display);font-size:.95rem;line-height:1.15}
.badge-card small{color:var(--muted);font-size:.72rem;font-weight:600}
.badge-card em{font-style:normal;font-weight:800;font-size:.75rem;color:var(--good)}
.badge-card:not(.got) em{color:var(--muted)}
.bprog{width:80%;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.bprog i{display:block;height:100%;background:var(--sun);border-radius:99px}
.qtopic{display:table;margin:0 auto 6px;padding:2px 10px;border-radius:99px;background:var(--tone-soft);font:800 .75rem var(--f-body);color:var(--muted)}

/* ---------- Lawan kata: gambar bergerak sesuai artinya ---------- */
.op-big{--a:opbig}.op-small{--a:opsmall}.op-tall{--a:optall}.op-short{--a:opshort}.op-hot{--a:ophot}.op-cold{--a:opcold}
.op-happy{--a:ophappy}.op-sad{--a:opsad}.op-day{--a:opday}.op-night{--a:opnight}.op-fast{--a:opfast}.op-slow{--a:opslow}
.op-up{--a:opup}.op-down{--a:opdown}.op-old{--a:opold}.op-young{--a:ophappy}.op-loud{--a:oploud}.op-quiet{--a:opquiet}
.op-awake{--a:ophappy}.op-asleep{--a:opasleep}.op-open{--a:opopen}.op-closed{--a:opclosed}.op-in{--a:opin}.op-out{--a:opout}
.op-light{--a:oplight}.op-heavy{--a:opheavy}.op-soft{--a:opsoft}.op-hard{--a:ophard}.op-sweet{--a:ophappy}.op-sour{--a:opsour}
.op-early{--a:opup}.op-late{--a:opdown}.op-wet{--a:opcold}.op-dry{--a:ophot}.op-full{--a:opbig}.op-empty{--a:opsmall}
.op-clean{--a:opday}.op-dirty{--a:opsad}.op-long{--a:optall}.op-new{--a:ophappy}.op-thick{--a:opbig}.op-thin{--a:opsmall}
.side .pic,.op-q .pic,.opt .pic{display:inline-block;transform-origin:50% 100%}
.side.play .pic,.opt.ok .pic[class*="op-"]{animation:var(--a,ophappy) 1.1s ease-in-out}
.op-q .pic.loop{animation:var(--a,ophappy) 1.8s ease-in-out infinite}
@keyframes opbig{50%{transform:scale(1.45)}}
@keyframes opsmall{50%{transform:scale(.55)}}
@keyframes optall{50%{transform:scaleY(1.5)}}
@keyframes opshort{50%{transform:scaleY(.6)}}
@keyframes ophot{0%,100%{transform:scale(1);filter:none}25%{transform:scale(1.12,.94);filter:drop-shadow(0 0 10px #FF8A1F)}50%{transform:scale(.95,1.08)}75%{transform:scale(1.1,.95);filter:drop-shadow(0 0 14px #FFD02E)}}
@keyframes opcold{0%,100%{transform:none}10%,30%,50%,70%,90%{transform:translateX(-3px)}20%,40%,60%,80%{transform:translateX(3px)}}
@keyframes ophappy{0%,100%{transform:none}30%{transform:translateY(-16px)}50%{transform:none}70%{transform:translateY(-8px)}}
@keyframes opsad{50%{transform:translateY(6px) rotate(-8deg);filter:saturate(.4)}}
@keyframes opday{50%{transform:rotate(180deg) scale(1.15);filter:drop-shadow(0 0 12px #FFD02E)}100%{transform:rotate(360deg)}}
@keyframes opnight{50%{transform:rotate(-15deg);filter:drop-shadow(0 0 10px #8BA7FF)}}
@keyframes opfast{0%{transform:none}40%{transform:translateX(46px);opacity:0}41%{transform:translateX(-46px);opacity:0}100%{transform:none;opacity:1}}
@keyframes opslow{0%,100%{transform:none}50%{transform:translateX(12px)}}
@keyframes opup{50%{transform:translateY(-26px)}}
@keyframes opdown{50%{transform:translateY(20px)}}
@keyframes opold{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes oploud{0%,100%{transform:none}20%,60%{transform:scale(1.3) rotate(-6deg)}40%,80%{transform:scale(1.3) rotate(6deg)}}
@keyframes opquiet{50%{transform:scale(.85);opacity:.35}}
@keyframes opasleep{0%,100%{transform:none}50%{transform:scale(1.06,.96) rotate(6deg)}}
@keyframes opopen{50%{transform:perspective(200px) rotateY(-55deg)}}
@keyframes opclosed{30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
@keyframes opin{0%{transform:none}40%{transform:translateY(12px) scale(.6);opacity:.3}100%{transform:none}}
@keyframes opout{40%{transform:translateY(-22px) scale(1.2)}}
@keyframes oplight{0%,100%{transform:none}50%{transform:translate(10px,-24px) rotate(18deg)}}
@keyframes opheavy{30%{transform:translateY(10px) scale(1.08,.86)}60%{transform:translateY(4px)}}
@keyframes opsoft{30%{transform:scale(1.25,.75)}60%{transform:scale(.9,1.12)}}
@keyframes ophard{20%,60%{transform:rotate(-4deg)}40%,80%{transform:rotate(4deg)}}
@keyframes opsour{25%{transform:scale(.85,1.1) rotate(-8deg)}75%{transform:scale(.85,1.1) rotate(8deg)}}

/* ---------- Warna + benda nyata ---------- */
.col-learn{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.col-tile{position:relative;overflow:hidden}
.col-things{display:flex;gap:2px;justify-content:center;margin-top:4px}
.col-tile::after{content:"";position:absolute;left:50%;top:38px;width:40px;height:40px;border-radius:50%;background:var(--c);opacity:0;transform:translate(-50%,-50%) scale(1);pointer-events:none}
.col-tile.play::after{animation:colsplash .8s ease-out}
.col-tile.play .col-things .pg-i{animation:ophappy .7s ease-in-out both;animation-delay:calc(var(--i) * 120ms)}
@keyframes colsplash{from{opacity:.55;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(7)}}
.col-q .rpic{animation:pgpop .5s cubic-bezier(.3,1.6,.5,1)}
.opt .swatch + .cap{margin-top:4px}

/* ---------- Kali & bagi dengan benda nyata ---------- */
.gboxes{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:100%}
.gbox{display:grid;grid-template-columns:repeat(var(--c),auto);gap:1px;padding:4px;border-radius:10px;background:#F7E7CC;border:2px solid #C99A5B;animation:pgpop .4s cubic-bezier(.3,1.6,.5,1) both}
.gbox .pg-i{animation-delay:calc(var(--i) * 90ms)}
.share.real .plate{display:flex;flex-wrap:wrap;gap:1px;justify-content:center;align-content:center;padding:6px;width:auto;min-width:46px;height:auto;min-height:46px;max-width:92px}
.deal{animation:deal .45s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 160ms)}
@keyframes deal{from{transform:translateY(-34px) scale(.4);opacity:0}}
.loose-pics{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;max-width:420px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .gbox{background:#4A3A28;border-color:#8E6A3E}}
:root[data-theme="dark"] .gbox{background:#4A3A28;border-color:#8E6A3E}

/* ---------- Banding: keranjang + buaya ---------- */
.cmp-scene{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.cmp-basket{display:inline-flex;padding:6px;background:#F7E7CC;border:3px solid #C99A5B;border-radius:10px 10px 20px 20px;min-width:52px;justify-content:center}
.cmp-basket .pgroup{max-width:132px}
.cmp-eq{font:800 2rem var(--f-display);color:var(--ink)}
.croc{flex:none}
.croc.flip{transform:scaleX(-1)}
.croc .jaw-top{transform-origin:40px 24px;animation:jawtop 1.6s ease-in-out infinite}
.croc .jaw-bot{transform-origin:40px 24px;animation:jawbot 1.6s ease-in-out infinite}
@keyframes jawtop{0%,60%,100%{transform:none}75%{transform:rotate(14deg)}}
@keyframes jawbot{0%,60%,100%{transform:none}75%{transform:rotate(-14deg)}}
.tile.play .croc{animation:szshow .7s}
.cmp-learn{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.opts.two .opt .cmp-basket{margin-bottom:4px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cmp-basket{background:#4A3A28;border-color:#8E6A3E}}
:root[data-theme="dark"] .cmp-basket{background:#4A3A28;border-color:#8E6A3E}

/* ---------- Lompat hitung: sepatu, tangan, katak melompat ---------- */
.sk-row{position:relative;display:flex;flex-wrap:wrap;gap:8px;padding-top:30px}
.sk-col{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;padding:0;border-radius:14px}
.sk-pic{display:flex;align-items:flex-end;justify-content:center;min-height:40px}
.sk-shoes{font-size:1.3rem;letter-spacing:-4px}
.hands.sk .hand{width:24px}
.sk-col.lit .skip-n{transform:scale(1.15);box-shadow:0 0 0 4px var(--sun)}
.sk-col.lit .sk-pic{animation:ophappy .6s}
.sk-frog{position:absolute;left:0;top:0;font-size:2rem;transform:translate(-50%,-70%);opacity:0;transition:left .5s ease-in-out,top .5s ease-in-out;pointer-events:none}
.sk-frog.on{opacity:1}
.sk-frog.hop{animation:frog .5s ease-in-out}
@keyframes frog{50%{transform:translate(-50%,-140%) rotate(-12deg)}}
.sk-seq{gap:8px}
.sk-q{display:flex;flex-direction:column;align-items:center;gap:4px}
.sk-q .hands.sk .hand{width:30px}

/* ---------- Urutan: kereta angka ---------- */
.ntrain{display:flex;align-items:flex-end;gap:4px;justify-content:center;animation:ntin 1s cubic-bezier(.2,.9,.3,1) both}
@keyframes ntin{from{transform:translateX(-60px);opacity:0}}
.ncar{position:relative;display:grid;place-items:center;min-width:58px;height:46px;padding:0 8px;border-radius:8px;background:#2E7BEF;color:#fff;margin-bottom:8px}
.ncar.c1{background:#FF8A1F}.ncar.c2{background:#22A85F}.ncar.c3{background:#8B5CF6}.ncar.c4{background:#FF7AB6}
.ncar b{font:800 1.6rem var(--f-display)}
.ncar i{position:absolute;bottom:-9px;width:16px;height:16px;border-radius:50%;background:#2B2B2F;border:3px solid #9AA3B2}
.ncar i:first-of-type{left:6px}.ncar i:last-of-type{right:6px}
.ncar.blank{background:var(--surface);color:var(--tone);border:3px dashed var(--tone);animation:patpulse 1.4s ease-in-out infinite}
.ncar.mid{box-shadow:0 0 0 4px var(--sun)}
.ntrain.sm .ncar{min-width:40px;height:34px}.ntrain.sm .ncar b{font-size:1.15rem}.ntrain.sm .nt-engine{width:44px;height:37px}
.ntrain.q .ncar{min-width:78px;height:60px}.ntrain.q .ncar b{font-size:2.1rem}.ntrain.q .nt-engine{width:76px;height:63px}
.sk-row{gap:10px}.sk-col .skip-n{min-width:54px;height:54px;padding:0 6px;display:grid;place-items:center;font-size:1.1rem}
.sk-seq{align-items:flex-end;gap:2px}
.sk-q{position:relative}
.sk-arc{font-style:normal;font-weight:800;font-size:.85rem;color:var(--tone);align-self:center;margin-bottom:28px;padding:0 2px;border-top:3px dashed var(--tone);border-radius:50% 50% 0 0;min-width:30px;text-align:center;padding-top:2px}
.sk-qfrog{position:absolute;left:50%;top:-34px;font-size:1.7rem;transform:translateX(-50%);animation:frog 1.4s ease-in-out infinite}

/* ---------- Jam: jarum berputar + kegiatan ---------- */
.clock .hh,.clock .mh{transform-origin:100px 100px;transform:rotate(var(--r,0deg))}
.clk-tile.play .hh,.clk-tile.play .mh{animation:clkspin 1.6s cubic-bezier(.3,.8,.3,1)}
@keyframes clkspin{from{transform:rotate(0deg)}}
.clk-learn{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.clk-do{display:flex;align-items:center;gap:6px;text-align:left;font-size:.85rem;font-weight:700;background:var(--bg);border-radius:12px;padding:6px 8px;width:100%}
.clk-do .tr{display:block;font-weight:600;color:var(--muted)}
.clk-emo{font-size:1.6rem;flex:none}
.clk-tile.play .clk-emo{animation:ophappy .8s .9s}

/* ---------- Kata letak: kucing & kardus ---------- */
.pscene{position:relative;display:block;width:150px;height:100px;margin:0 auto}
.pc-box{position:absolute;left:50px;bottom:6px;width:56px;height:42px}
.pc-box i{position:absolute;inset:0;border-radius:4px}
.pc-box .back{background:#B07A45;z-index:1}
.pc-box .front{background:linear-gradient(#D9A15B,#C48A4A);z-index:3;top:12px;border-top:3px solid #8E5E30}
.pc-box.b1{left:14px}.pc-box.b2{left:92px}
.pc-cat{position:absolute;z-index:2;left:58px;bottom:6px;animation:pccome .9s cubic-bezier(.3,1.2,.5,1) both}
.pc-cat .rpic{width:40px;height:40px}
@keyframes pccome{from{transform:translateX(-70px);opacity:0}}
.pc-cat.in{bottom:22px}
.pc-cat.on{bottom:46px;z-index:4}
.pc-cat.next{left:108px;z-index:4}
.pc-cat.behind{left:68px;bottom:40px;z-index:0}
.pc-cat.front{left:62px;bottom:0;z-index:5}
.pc-cat.between{left:56px;z-index:4}
.pc-cat.above{bottom:62px;z-index:4;animation:pccome .9s both,pcfloat 2s 1s ease-in-out infinite}
.pc-balloon{position:absolute;left:84px;top:-18px;font-size:1.5rem;animation:pcfloat 2s 1s ease-in-out infinite}
@keyframes pcfloat{50%{transform:translateY(-5px)}}
.pc-cat.outside{left:4px;z-index:4}
.pc-cat.near{left:104px;z-index:4}
.pc-cat.far{left:-30px;bottom:30px;z-index:4}
.pc-cat.far .rpic{width:24px;height:24px}
.pc-cat.around{z-index:4;bottom:20px;animation:pcaround 3s linear infinite}
@keyframes pcaround{0%{transform:translate(-56px,0);z-index:4}25%{transform:translate(0,14px)}50%{transform:translate(56px,0);z-index:0}75%{transform:translate(0,-30px);z-index:0}100%{transform:translate(-56px,0)}}
.pc-table{position:absolute;left:30px;bottom:6px;width:96px;height:62px}
.pc-table .top{position:absolute;left:0;right:0;top:0;height:10px;border-radius:5px;background:#8A5A33}
.pc-table .leg{position:absolute;top:8px;bottom:0;width:8px;background:#6E4527}
.pc-table .l{left:8px}.pc-table .r{right:8px}
.pc-cat.under{left:56px;z-index:4}
.pc-tunnel{position:absolute;left:40px;bottom:6px;width:76px;height:50px}
.pc-tunnel i{position:absolute;inset:0;border-radius:40px 40px 6px 6px}
.pc-tunnel .back{background:#5B6B95;z-index:1}
.pc-tunnel .front{z-index:3;border:9px solid #7C8DB5;border-bottom:0;background:transparent}
.pc-cat.through{z-index:2;animation:pcthrough 3s linear infinite}
@keyframes pcthrough{from{transform:translateX(-70px)}to{transform:translateX(80px)}}
.wl-scenes{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.wl-scenes .tile{gap:6px}
.wl-q .pscene{transform:scale(1.5);transform-origin:50% 100%;margin:46px auto 4px}
.pscene{overflow:visible}

/* ---------- Bilangan urutan: lomba lari ---------- */
.race{display:flex;align-items:flex-end;gap:1px;font-size:1.2rem;min-height:56px;justify-content:center}
.rc{position:relative;display:flex;flex-direction:column;align-items:center;animation:pccome .7s both;animation-delay:calc(var(--i) * 60ms)}
.rc .rpic{width:18px;height:18px}
.rc.on .rpic{width:32px;height:32px}
.rc.on{animation:pccome .7s both,ophappy 1.4s 1s ease-in-out infinite}
.rc b{position:absolute;top:-16px;background:var(--sun);color:#1B2140;border-radius:8px;padding:0 5px;font-size:.7rem;font-weight:800;white-space:nowrap}
.wl-q .race{transform:scale(1.4);margin:24px 0 10px}
.pc-cat.behind{left:86px;bottom:14px;z-index:0}
.pc-cat.front{left:60px;bottom:-2px}
.pc-cat.front .rpic{width:44px;height:44px}
.pc-box.right{left:96px}
.pc-cat.far{left:0;bottom:6px}
.pc-cat.far .rpic{width:40px;height:40px}
.rc .rpic{width:22px;height:22px}.rc.on .rpic{width:34px;height:34px}
.wl-scenes{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}

/* ---------- labirin bergambar (mazepic) ---------- */
.mp{display:flex;flex-direction:column;align-items:center;gap:14px}
.mp-board{position:relative;width:min(100%,460px,calc((100dvh - 150px) * 941 / 1672));border-radius:22px;overflow:hidden;box-shadow:var(--card-soft-shadow);user-select:none;-webkit-user-select:none}
.mp-board img{display:block;width:100%;height:100%;pointer-events:none}
.mp-board canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.mp-board.nudge{animation:mpnudge .35s}
.mp-board.won{outline:5px solid var(--good);outline-offset:-5px}
@keyframes mpnudge{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mp-pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-areas:". up ." "left down right";gap:8px;justify-content:center}
.mp-pad .a-up{grid-area:up}.mp-pad .a-left{grid-area:left}.mp-pad .a-down{grid-area:down}.mp-pad .a-right{grid-area:right}
.mp-pad .mz-arrow{height:56px;touch-action:none}
.mp-pick{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.mp-pick button{position:relative;flex:none;width:64px;aspect-ratio:941/1672;border-radius:12px;border:3px solid var(--line);padding:0;overflow:hidden;background:var(--surface);cursor:pointer}
.mp-pick button img{width:100%;height:100%;object-fit:cover;display:block}
.mp-pick button span{position:absolute;left:2px;bottom:0;font-size:1.1rem}
.mp-pick button[aria-selected="true"]{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.mz-goal-text .tr{display:block;font-family:var(--f-body,inherit);font-size:.8rem;color:var(--muted);font-weight:600}

/* ---------- makhluk hidup / benda tak hidup ---------- */
.lv-head{display:flex;align-items:baseline;gap:8px;font-size:1.25rem;color:var(--ink);margin-top:14px}
.lv-head small{font-size:.85rem;color:var(--muted);font-weight:700}
.lv-living{color:#13804B}.lv-nonliving{color:#6B5A44}
.lv-why{color:var(--muted);font-size:.9rem;margin:-2px 0 8px}
.lv-q .pic .vis{height:2.4em;max-width:4em}
.lv-opts .opt{flex-direction:column}
.lv-ico{font-size:2.6rem;line-height:1}
.lv-opts .cap{font-family:var(--f-display);font-weight:800;font-size:1.25rem}

/* ---------- merek DF EduNova ---------- */
.tb-brand img.tb-logo{width:auto;height:54px;max-width:none}
@media (max-width:640px){.tb-brand img.tb-logo{width:auto;height:40px}}
/* banner merek sudah berisi logo & tulisan: judul beranda disembunyikan (tetap terbaca pembaca layar) */
.hero-banner.branded .hero-copy h1,.hero-banner.branded .hero-copy p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-banner.branded .hero-copy{justify-content:flex-end}
.hero-banner.branded{padding-top:0}
.hero-banner.branded .hero-copy{position:absolute;left:0;right:0;bottom:118px;z-index:2;pointer-events:none}
.hero-banner.branded .hero-continue{pointer-events:auto}
.has-photo.branded + .featured{margin-top:-64px}
/* tablet & HP: tombol Lanjut di bawah gambar, tidak menutupi tokoh */
@media (max-width:1000px){
  .hero-banner.has-photo.branded{padding:0;gap:0;background:transparent}
  .hero-banner.branded .hero-copy{position:static;order:3;padding:10px 0 0}
  .has-photo.branded .hero-photo{width:100%;margin:0;border-radius:24px}
  .has-photo.branded + .featured{margin-top:12px}
}

/* ---------- reaksi kuis: maskot + pujian / penyemangat (assets/js/cheer.js) ---------- */
.cheer{position:fixed;left:50%;bottom:calc(32px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;pointer-events:none;
  display:flex;align-items:center;gap:14px;padding:12px 26px 12px 14px;border-radius:999px;max-width:calc(100% - 32px);
  background:var(--surface);color:var(--ink);border:4px solid var(--good);box-shadow:0 14px 40px rgba(17,21,42,.28);text-align:left}
.cheer.no{border-color:var(--sun);background:var(--sun-soft)}
.cheer.ok{background:var(--leaf-soft)}
.cheer img{width:72px;height:72px;flex:none;object-fit:contain}
.cheer .ch-text{display:flex;flex-direction:column;line-height:1.2}
.cheer b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.4rem,4.2vw,2rem)}
.cheer.ok b{color:var(--good)}
.cheer .ch-text span{font-weight:700;color:var(--muted);font-size:1rem}
.cheer.small{padding:8px 20px 8px 10px;gap:10px;border-width:3px}
.cheer.small img{width:48px;height:48px}
.cheer.small b{font-size:clamp(1.1rem,3.4vw,1.4rem)}
.cheer.in{animation:cheer-pop .45s cubic-bezier(.2,1.6,.4,1) both}
.cheer.in.no img{animation:cheer-nod .8s ease-in-out .2s 2}
.cheer.in.ok img{animation:cheer-jump .6s ease-out .1s 2}
.ch-burst{position:absolute;left:50px;top:50%;width:0;height:0}
.ch-burst i{position:absolute;font-style:normal;font-size:1.6rem;opacity:0;animation:cheer-fly .9s ease-out var(--d) both}
@keyframes cheer-pop{0%{opacity:0;transform:translate(-50%,40px) scale(.6)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes cheer-jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(-6deg)}}
@keyframes cheer-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(8deg)}}
@keyframes cheer-fly{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.1)}}
.quiz.wobble{animation:shake .4s}
@media (max-width:1060px){.cheer{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
@media (max-width:560px){.cheer{gap:10px;padding:8px 18px 8px 10px}.cheer img{width:56px;height:56px}.cheer .ch-text span{font-size:.9rem}}

/* ---------- mengeja, huruf hilang, susun kalimat ---------- */
.sp-word{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
.sp-word b{font-family:var(--f-display);font-weight:800;font-size:1.15rem;min-width:1.25em;padding:1px 3px;border-radius:7px;background:var(--tone-soft);color:var(--ink);line-height:1.3}
.sp-art{display:block;font-family:var(--f-display);font-weight:800;font-size:1.1rem;letter-spacing:.06em}
.sp-slots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:4px 0 14px}
.sp-slot{width:clamp(34px,10vw,52px);height:clamp(42px,12vw,60px);border-bottom:4px solid var(--tone);border-radius:10px;background:var(--surface);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,6vw,2.2rem);text-transform:lowercase}
.sp-slot.on{background:var(--tone-soft)}
.sp-slot.hint{color:var(--muted);opacity:.6}
.sp-keys,.st-keys{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto}
.sp-key,.st-key{min-width:52px;height:56px;padding:0 14px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:1.6rem;cursor:pointer;box-shadow:0 4px 0 var(--line);transition:transform .08s}
.st-key{font-size:1.15rem;height:48px}
.sp-key:active,.st-key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.sp-key:disabled,.st-key:disabled{opacity:.25;box-shadow:none}
.shake{animation:spshake .35s}
@keyframes spshake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.sp-gapword{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,8vw,3rem);letter-spacing:.12em;text-align:center}
.sp-gap{font-style:normal;color:var(--tone);border-bottom:4px dashed var(--tone);padding:0 .1em}
.st-line{min-height:56px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;padding:8px 12px;margin-bottom:14px;border-radius:16px;border:3px dashed var(--line);font-family:var(--f-display);font-weight:800;font-size:1.3rem}
.st-line span{background:var(--tone-soft);border-radius:10px;padding:2px 10px}
.st-learn{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.st-tile .st-w{font-size:1.15rem}
/* ---------- urutkan kegiatan ---------- */
.or-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,190px),1fr));gap:12px;counter-reset:s}
.or-step{position:relative}
.or-num{position:absolute;left:8px;top:8px;width:30px;height:30px;border-radius:50%;background:var(--tone);color:#1B2140;font-family:var(--f-display);font-weight:800;display:grid;place-items:center;z-index:1}
.or-step .pic .vis,.or-card .pic .vis{height:2.6em;max-width:100%}
.or-step .w{font-size:1rem}
.or-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;margin:0 auto}
.or-card{position:relative;flex-direction:column;gap:6px;padding:10px}
.or-card .cap{font-size:.9rem;font-weight:700}
.or-badge{position:absolute;top:6px;left:6px;background:var(--good);color:#fff;border-radius:999px;padding:2px 9px;font-size:.85rem}
/* ---------- kelompokkan, benar/salah ---------- */
.so-head{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:1.2rem;margin-top:14px}
.so-head small{color:var(--muted);font-weight:700;font-size:.85rem}
.so-gico .vis{height:1.6em;max-width:2.6em;border-radius:10px}
.so-opts .opt{flex-direction:column;gap:4px}
.so-opts .so-gpic .vis{height:2.2em;max-width:3.4em;border-radius:12px}
.so-opts .cap,.tf-opts .cap{font-family:var(--f-display);font-weight:800;font-size:1.1rem}
.tf-say{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,4vw,1.8rem);text-align:center}
.tf-ico{font-size:2.4rem;line-height:1;font-weight:800}
.tf-ico.yes{color:var(--good)}.tf-ico.no{color:var(--bad)}
.sp-slot{background:var(--bg);border:2px solid var(--line);border-bottom:4px solid var(--tone)}
.st-line{width:min(100%,560px);margin-left:auto;margin-right:auto}
.qstage .sp-slots,.qstage .st-line{margin-top:6px}
/* Urutkan angka (numorder.js): kotak jawaban diselingi tanda < / >, angka acak di bawahnya */
.no-dir{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;color:var(--muted);font-size:1.05rem}
.no-dir b{color:var(--tone)}
.no-slots{align-items:center;gap:6px}
.no-slot{width:auto;min-width:clamp(44px,13vw,64px);padding:0 6px;font-size:clamp(1.3rem,5vw,2rem)}
.no-sign{font:800 clamp(1.1rem,4vw,1.6rem)/1 var(--f-display);color:var(--muted);font-style:normal}
.no-slots.many{gap:3px}
.no-slots.many .no-slot{min-width:clamp(36px,10.5vw,58px);padding:0 3px;font-size:clamp(1.05rem,4.2vw,1.8rem)}
.no-key{min-width:64px}
.no-key.hint{border-color:var(--tone);animation:patpulse 1.4s ease-in-out infinite}
.no-tile{gap:4px}
.no-tile .no-down{color:var(--muted);font-size:.9rem;line-height:1}
.no-tile .no-slots{margin:0;gap:3px}
.no-tile .no-slot{min-width:0;height:auto;padding:2px 6px;font-size:1.05rem;border-width:2px;border-bottom-width:3px}
.no-tile .no-sign{font-size:.95rem}
.wk-ans .no-slots,.ex-solved .no-slots{margin:4px 0}
/* kartu bergambar (rank.js, abc.js kata) */
.no-keys.pics .no-key{display:flex;flex-direction:column;align-items:center;gap:2px;height:auto;min-width:78px;padding:8px 10px;font-size:1rem}
.no-keys.pics .no-key .pic .vis{height:2.6em;max-width:3.6em}
.no-keys.pics .no-key .cap{font-size:.85rem;font-weight:700;font-family:var(--f-body,inherit)}
.no-slots.pics .no-slot{min-width:clamp(46px,13vw,62px);height:auto;min-height:clamp(46px,13vw,62px);padding:3px;flex-direction:column;display:flex;align-items:center;justify-content:center}
.no-slots.pics .no-slot .pic .vis{height:clamp(30px,9vw,42px);max-width:100%}
.no-slots.pics .no-slot small{font-size:.62rem;line-height:1.1;font-weight:700}
.no-slots.pics.many .no-slot{min-width:clamp(40px,11.5vw,58px);min-height:clamp(40px,11.5vw,58px)}
/* urutan abjad (abc.js) */
.abc-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.abc-l{padding:8px 4px;gap:0}
.abc-l b{font:800 1.7rem/1 var(--f-display)}
.abc-l small{color:var(--muted);font-weight:700}
.abc-first{color:var(--tone);font-weight:800}
.guide .abc-strip,.rk-guide .or-steps{margin-top:12px}
.rk-guide .no-dir{margin-top:4px}
/* garis bilangan (numline.js): 11 garis kecil, label di bawah, panah di atas */
.gb{position:relative;height:92px;margin:6px 22px 0;min-width:0}
.gb-q{width:min(100%,620px);margin:0 auto}
.gb-learn{max-width:620px;margin:0 auto 8px}
.gb-bar{position:absolute;left:-14px;right:-14px;top:40px;height:4px;border-radius:4px;background:var(--ink)}
.gb-bar::before,.gb-bar::after{content:'';position:absolute;top:-6px;border:8px solid transparent}
.gb-bar::before{left:-10px;border-right-color:var(--ink)}.gb-bar::after{right:-10px;border-left-color:var(--ink)}
.gb-tick{position:absolute;left:calc(var(--k) * 10%);top:24px;transform:translateX(-50%);width:30px;height:64px;padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;color:var(--ink);font:inherit}
.gb-tick i{display:block;width:3px;height:22px;margin-top:8px;border-radius:2px;background:var(--ink)}
.gb-tick.major i{height:34px;margin-top:2px;width:4px}
.gb-tick span{margin-top:2px;font:800 clamp(.8rem,3.2vw,1.05rem)/1.1 var(--f-display);white-space:nowrap}
button.gb-tick{cursor:pointer;border-radius:10px}
button.gb-tick:hover i,button.gb-tick:focus-visible i{background:var(--tone)}
.gb-tick.ok i{background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 30%,transparent)}
.gb-tick.ok span{color:var(--good)}
.gb-tick.no i{background:var(--bad)}.gb-tick.no span{color:var(--bad)}
.gb-arrow{position:absolute;left:calc(var(--k) * 10%);top:0;transform:translateX(-50%);color:var(--tone);font-size:1.3rem;line-height:1;animation:gbbob 1.2s ease-in-out infinite}
@keyframes gbbob{50%{transform:translate(-50%,4px)}}
.ex-art .gb,.wk-art .gb,.wk-ans .gb,.ex-solved .gb{flex:1 1 100%;width:calc(100% - 44px);max-width:560px;margin-left:auto;margin-right:auto}
/* susun angka (digits.js) */
.dg-board{display:grid;grid-template-columns:repeat(var(--d),minmax(0,76px));gap:8px;justify-content:center;margin:6px auto 14px}
.dg-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.dg-col small{font-weight:700;color:var(--muted);font-size:.78rem}
.dg-slot{width:100%;aspect-ratio:1/1.15;border-radius:14px;border:3px dashed var(--tone);background:var(--surface);color:var(--ink);font:800 clamp(1.8rem,8vw,2.6rem)/1 var(--f-display);cursor:pointer}
.dg-slot.on{border-style:solid;background:var(--tone-soft)}
.dg-slot.hint{border-color:var(--good)}
.dg-slot:disabled{cursor:default}
.dg-board.shake{animation:spshake .35s}
.quiz .dg-ask{display:none}
.dg-ask{margin-top:6px}
.dg-tile .w{font:800 1.6rem var(--f-display)}
/* hitung cepat (speed.js): bilah waktu menyusut */
.hc-bar{width:min(100%,420px);height:10px;margin:8px auto 14px;border-radius:99px;background:var(--line);overflow:hidden}
.hc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--bad),var(--sun,#FFB020) 40%,var(--good));transform-origin:left;animation:hcbar linear forwards}
.hc-bar.stop i{animation-play-state:paused}
@keyframes hcbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.opts.hc-opts{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;margin:0 auto}
@media (min-width:700px){.opts.hc-opts{grid-template-columns:repeat(4,minmax(0,1fr));max-width:620px}}
.qobj.qbig .pic .vis{height:2em;max-width:4.5em}
@media (max-width:640px){.qobj.qbig .pic .vis{height:1.35em}.qobj.qbig{margin:-6px 0}.tf-say{font-size:1.15rem}}

/* ---------- label tingkat kelas SD ---------- */
.lvl-kelas1{background:#FFF1D6;color:#9A5B00}.lvl-kelas2{background:#FFE3DA;color:#B03A12}
.lvl-kelas3{background:#E3F0FF;color:#1D5FC2}.lvl-kelas4{background:#EFE4FF;color:#6B35C9}
:root[data-theme="dark"] .lvl-kelas1,:root[data-theme="dark"] .lvl-kelas2,:root[data-theme="dark"] .lvl-kelas3,:root[data-theme="dark"] .lvl-kelas4{background:#2A2F45;color:#FFD27A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lvl-kelas1,:root:not([data-theme="light"]) .lvl-kelas2,:root:not([data-theme="light"]) .lvl-kelas3,:root:not([data-theme="light"]) .lvl-kelas4{background:#2A2F45;color:#FFD27A}}

/* ---------- soal cerita ---------- */
.wp-q{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:640px;margin:0 auto}
.wp-text{font-size:clamp(1.05rem,2.6vw,1.3rem);line-height:1.55;text-align:center;background:var(--sun-soft,#FFF6DD);border-radius:16px;padding:12px 16px;color:var(--ink)}
.wp-text b{color:var(--title-blue,#1E3A8A)}
.wp-art{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.wp-op{font-family:var(--f-display);font-size:1.8rem}
.wp-learn{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.wp-card{gap:8px;text-align:left;align-items:stretch}
.wp-card .wp-text{font-size:1rem;text-align:left;padding:10px 12px}
.wp-key{font-size:.82rem;font-weight:700;color:var(--muted)}
.wp-eq,.wp-sol{font-family:var(--f-display);font-weight:800;font-size:1.25rem;color:var(--good);background:var(--leaf-soft,#E2F7EC);border-radius:12px;padding:4px 12px;align-self:center}
.wp-sol{display:inline-block;margin-left:8px}
.wp-ops .opt .txt{font-size:2.4rem}
.opt .txt.sm{font-size:1.25rem}
/* ---------- pecahan ---------- */
.frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-family:var(--f-display);font-weight:800;vertical-align:middle}
.frac b{border-bottom:3px solid currentColor;padding:0 .15em .05em}
.frac i{font-style:normal;padding-top:.05em}
.fr-q{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-family:var(--f-display);font-size:1.6rem;font-weight:800}
.fr-big{font-size:2.2rem}
.fr-learn .tile .w{font-size:1.6rem}
.fr-opts .opt{flex-direction:column;gap:6px}
.fr-opts .opt .txt{font-size:1.4rem}
.fr-art{gap:6px}
/* ---------- nilai tempat ---------- */
.pvb{display:inline-flex;align-items:flex-end;gap:4px;flex-wrap:wrap;justify-content:center;max-width:100%}
.pvb i{display:block;border-radius:3px}
.pvb .h{width:56px;height:56px;background-color:#4FB2FF;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:5.6px 5.6px;border:1px solid #1D6FD0}
.pvb .t{width:7px;height:56px;background-color:#FFB81F;background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px);background-size:7px 5.6px;border:1px solid #C98500}
.pvb .os{display:inline-grid;grid-template-columns:repeat(3,8px);gap:2px}
.pvb .o{width:8px;height:8px;background:#1FAE6C}
.pvt{display:flex;gap:4px;justify-content:center}
.pvt span{display:flex;flex-direction:column;align-items:center;background:var(--bg);border-radius:8px;padding:2px 6px}
.pvt small{font-size:.62rem;font-weight:700;color:var(--muted)}
.pvt b{font-family:var(--f-display);font-size:1.2rem}
.c-h{color:#1D6FD0}.c-t{color:#C98500}.c-o{color:#13804B}
.pv-num{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,9vw,3.6rem);letter-spacing:.06em;text-align:center}
.pv-num.sm{font-size:clamp(1.5rem,5vw,2.2rem);letter-spacing:0}
.pv-num u{text-decoration:none;color:var(--bad);border-bottom:5px solid var(--bad)}
.pv-q{display:flex;justify-content:center;max-width:520px;margin:0 auto}
.pv-learn .tile{gap:8px}
.pv-art .pvb .h{width:34px;height:34px;background-size:3.4px 3.4px}.pv-art .pvb .t{height:34px;width:5px}
.nl{display:block;width:min(100%,420px);min-width:min(76vw,320px);margin:0 auto;padding:30px 10px 0}
.nl-bar{position:relative;display:block;height:6px;background:var(--ink);border-radius:3px}
.nl-bar i{position:absolute;top:-30px;transform:translateX(-50%);font-style:normal}
.nl-bar i b{display:block;background:var(--bad);color:#fff;border-radius:8px;padding:1px 8px;font-family:var(--f-display)}
.nl-bar i::after{content:"";display:block;width:3px;height:22px;background:var(--bad);margin:0 auto}
.nl-ends{display:flex;justify-content:space-between;font-family:var(--f-display);font-size:1.2rem;margin-top:6px;gap:10px}
/* ---------- pengukuran ---------- */
.ruler{width:min(100%,520px);height:auto}
.ruler .rbody{fill:#FFE9A8;stroke:#C98500}
.ruler line{stroke:#5A3A00;stroke-width:1.2}
.ruler line.guide{stroke:var(--bad);stroke-dasharray:3 3;stroke-width:1.5}
.ruler text{font-size:13px;text-anchor:middle;fill:#5A3A00;font-weight:700}
.scale{width:190px;height:auto}
.scale .body{fill:#FF7A59}.scale .dial{fill:#fff}.scale .plate{fill:#9AA5B8}.scale .neck{fill:#9AA5B8}
.scale line{stroke:#333;stroke-width:2}.scale text{font-size:12px;text-anchor:middle;font-weight:700;fill:#333}
.scale .unit{font-size:14px}.scale .needle{stroke:#E5484D;stroke-width:3.5;stroke-linecap:round}.scale .pin{fill:#333}
.jug{width:150px;height:auto}
.jug .glass{fill:rgba(220,240,255,.6);stroke:#6B8CB5;stroke-width:3}.jug .water{fill:#4FB2FF;opacity:.75}
.jug line{stroke:#1D5FC2;stroke-width:2}.jug text{font-size:13px;font-weight:700;fill:#1D5FC2;text-anchor:end}.jug .unit{text-anchor:middle}
.jug .handle{fill:none;stroke:#6B8CB5;stroke-width:5}
.ms-q{display:flex;align-items:flex-end;justify-content:center;gap:10px}
.ms-q.wide{width:100%}
.ms-on{margin-bottom:150px;margin-right:-110px;z-index:1}
.ms-learn{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ms-learn figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px;flex:1 1 220px}
.ms-learn figure:first-child{flex-basis:100%}
.ms-art{font-size:2.2rem}
/* ---------- diagram ---------- */
.ch{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px 14px;width:min(100%,460px);margin:0 auto}
.ch-title{font-family:var(--f-display);font-size:1.05rem;text-align:center}
.pg-row{display:flex;align-items:center;gap:8px;border-bottom:1px dashed var(--line);padding:3px 0}
.pg-name{width:90px;flex:none;font-weight:700;font-size:.9rem}
.pg-icons{display:flex;flex-wrap:wrap;gap:2px}
.pg-half{width:13px;overflow:hidden;display:inline-block}
.ch-key{color:var(--muted);text-align:center}
.bars{width:100%;height:auto}
.bars line{stroke:var(--line);stroke-width:1}.bars text{font-size:12px;text-anchor:middle;fill:var(--muted);font-weight:700}
.bars .lbl{text-anchor:end;fill:var(--ink);font-size:13px}
.bars .b0{fill:#FF7A59}.bars .b1{fill:#FFB81F}.bars .b2{fill:#4FB2FF}.bars .b3{fill:#1FAE6C}
.ch-learn{display:flex;flex-wrap:wrap;gap:12px}
.ch-learn .ch{flex:1 1 300px}
.ch-note{text-align:center;color:var(--muted)}
/* ---------- luas & keliling ---------- */
.grid{max-width:100%;height:auto}
.grid line{stroke:#C7D0E0;stroke-width:1}
.grid .on{fill:#8FD0FF;stroke:#1D6FD0;stroke-width:1}
.grid.perim .on{fill:#FFE29A;stroke:#E5484D;stroke-width:2}
.grid .mirror{stroke:#E5484D;stroke-width:3;stroke-dasharray:6 4}
.ar-q,.ar-learn{display:flex;justify-content:center}
.ar-learn figure{margin:0;text-align:center}
.ar-opts .opt svg{width:100%;max-width:170px}
/* ---------- jam lanjut ---------- */
.clk-q{display:flex;justify-content:center}
.clk-two{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.clk-two figure{margin:0;text-align:center;font-weight:800}
.clk-two>b{font-size:2rem}
.tp-list{text-align:center;font-weight:700;line-height:1.8}
/* ---------- isian tata bahasa ---------- */
.st-w mark{background:var(--sun-soft,#FFF1C2);color:var(--title-blue,#1E3A8A);border-radius:6px;padding:0 4px}
.gf-gap{font-size:1em;padding:0 .6em}
.opt .txt.gf-opt{font-size:1.3rem;text-transform:none}
.pv-learn .tile{min-width:0;overflow:hidden}
@media (max-width:640px){.pvb .h{width:40px;height:40px;background-size:4px 4px}.pvb .t{height:40px;background-size:7px 4px}.pvt span{padding:2px 4px}}

/* ---------- mewarnai gambar sketsa (assets/js/games/sketch.js) ---------- */
.sk-art{width:100%;height:100%;display:grid;place-items:center;padding:6px;background:#fff;border-radius:14px}
.sk-art img{height:100%;width:auto;max-width:100%;object-fit:contain}
.sk-chip{background:#fff}
.sk-chip img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.sk-stage{display:grid;place-items:center;min-height:240px}
.sk-canvas{display:block;max-width:100%;max-height:64vh;width:auto;height:auto;margin:0 auto;cursor:pointer;touch-action:manipulation;border-radius:12px}
.sk-loading{color:#5A6386;font-weight:700}
.sk-palette{grid-template-columns:repeat(4,1fr)}
.quiz .sk-board{max-width:980px}
@media (max-width:820px){.sk-canvas{max-height:52vh}.sk-palette{grid-template-columns:repeat(8,1fr)}}
@media (max-width:400px){.sk-palette{grid-template-columns:repeat(6,1fr)}}

/* ---------- biodata anak ---------- */
fieldset.bio{border:2px solid var(--line);border-radius:16px;padding:10px 14px 14px;margin:4px 0;display:flex;flex-direction:column;gap:10px;text-align:left}
fieldset.bio legend{font-weight:800;padding:0 6px}
fieldset.bio legend small,.bio .field small{color:var(--muted);font-weight:600}
.bio .req{color:var(--bad)}
.bio .field>span.lbl{display:block}
.bio select,.bio input[type="date"]{width:100%;min-height:44px;border:2px solid var(--line);border-radius:12px;padding:6px 10px;font:inherit;background:var(--surface);color:var(--ink)}
.bio .field .bio-age{display:block;color:var(--good);font-weight:800;min-height:1.2em}
.bio-gender{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.bio-gender label{cursor:pointer;position:relative}
.bio-gender input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.bio-gender span{display:inline-block;border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700}
.bio-gender input:checked+span{border-color:var(--brand-blue);background:var(--sky-soft);color:var(--ink)}
.bio-gender input:focus-visible+span{outline:3px solid var(--sky)}
.bio-nudge{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--sun-soft,#FFF6DD);border:2px dashed var(--sun,#FFB81F);border-radius:18px;padding:12px 16px;margin:14px 0;font-weight:700}
.for-grade{margin-top:18px}
.art .sk-art{position:absolute;inset:0;padding:8px}
.art .sk-art img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);max-width:none;object-fit:contain}
.sk-palette{grid-template-columns:repeat(6,1fr);gap:6px}
.sk-palette .swatch-btn{border-width:2px;padding:3px}
.sk-palette .swatch-btn i{inset:3px}
.sk-custom{display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer;border:2px dashed var(--line);border-radius:14px;padding:6px 10px}
.sk-custom input{width:40px;height:34px;padding:0;border:0;background:none;cursor:pointer}
.sk-custom.on{border-style:solid;border-color:var(--ink);box-shadow:0 0 0 3px var(--sw)}
@media (max-width:820px){.sk-palette{grid-template-columns:repeat(8,1fr)}}
@media (max-width:400px){.sk-palette{grid-template-columns:repeat(6,1fr)}}

/* ---------- campur warna (assets/js/games/mix.js) ---------- */
.mx-blob{--c:#fff;display:inline-block;width:46px;height:46px;border-radius:50% 46% 52% 48%/48% 52% 46% 50%;background:var(--c);border:3px solid rgba(27,33,64,.18);box-shadow:inset -6px -8px 0 rgba(0,0,0,.08),inset 6px 6px 0 rgba(255,255,255,.35);flex:none;transition:background .35s}
.mx-blob.big{width:96px;height:96px}
.mx-blob.empty{border-style:dashed;box-shadow:none}
.mx-blob.q{display:inline-grid;place-items:center;background:var(--bg);border-style:dashed;font:800 1.6rem var(--f-display);color:var(--muted)}
.mx-blob.swirl{animation:mx-swirl .6s ease-out}
@keyframes mx-swirl{0%{transform:scale(.6) rotate(-90deg)}70%{transform:scale(1.08) rotate(8deg)}100%{transform:none}}
.mx-art,.mx-eq{display:flex;align-items:center;justify-content:center;gap:8px}
.mx-art i,.mx-eq i,.mx-bowl>i{font-style:normal;font:800 1.6rem var(--f-display);color:var(--muted)}
.mx-eq.big .mx-blob{width:72px;height:72px}
.mx-lab{display:flex;flex-direction:column;gap:16px;align-items:center}
.mx-bowl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:18px 22px;width:100%}
.mx-pot{--c:#fff;width:96px;height:96px;border-radius:50%;border:3px dashed var(--line);background:var(--c);font:800 2rem var(--f-display);color:var(--muted);transition:background .3s}
.mx-pot.on{border-style:solid;border-color:rgba(27,33,64,.18)}
.mx-result{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px}
.mx-name{font:800 1.3rem var(--f-display);min-height:1.6em;text-align:center}
.mx-name small{display:block;font:700 .9rem var(--f-body);color:var(--muted)}
.mx-paints{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;width:100%;max-width:820px}
.mx-paint{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line);background:var(--surface);border-radius:18px;padding:10px 4px}
.mx-paint b,.mx-opt b{font-weight:800}
.mx-paint small,.mx-opt small{color:var(--muted);font-size:.8rem}
.mx-paint:active{transform:scale(.95)}
.mx-recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;width:100%}
.mx-recipe{gap:6px}
.mx-recipe .mx-blob{width:34px;height:34px}
.mx-recipe .mx-id{font-size:.75rem}
.mx-opt{display:flex;flex-direction:column;align-items:center;gap:4px}
.mx-opt.row{flex-direction:row;gap:10px}
.mx-opt.row .mx-blob{width:38px;height:38px}
.mx-opt.row i{font-style:normal;font-weight:800;color:var(--muted)}
.mx-opt.row span:last-child{font-weight:800}
@media (max-width:640px){.mx-paints{grid-template-columns:repeat(4,minmax(0,1fr))}.mx-pot,.mx-blob.big{width:72px;height:72px}.mx-eq.big .mx-blob{width:54px;height:54px}}

/* ---------- poster belajar (assets/js/posters.js) ---------- */
.posters{display:flex;flex-direction:column;gap:8px}
.posters .rowlabel small{font-weight:600;font-size:.8em;margin-left:6px}
.poster-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.poster-thumb{flex:0 0 auto;width:150px;display:flex;flex-direction:column;gap:6px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:8px;text-align:center}
.poster-thumb img{width:100%;height:190px;object-fit:cover;object-position:top;border-radius:12px}
.poster-thumb span{font-weight:800;font-size:.85rem;line-height:1.2}
.poster-thumb:hover{border-color:var(--tone)}
.poster-view{position:fixed;inset:0;z-index:60;background:rgba(10,14,30,.86);display:grid;place-items:center;padding:16px;cursor:zoom-out}
.poster-view img{max-width:min(900px,100%);max-height:calc(100vh - 32px);object-fit:contain;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.poster-close{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:#1B2140;font-size:1.3rem;font-weight:800}

/* ---------- Listen and Colour dengan sketsa (assets/js/games/sketchlisten.js) ---------- */
.sl-parts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sl-parts .rowlabel{margin:0 4px 0 0}
.sl-part{font-weight:800}
.sl-part small{font-weight:600;color:var(--muted);margin-left:4px}
.sl-col{display:inline-flex;align-items:center;gap:6px}
.sl-col::before{content:'';width:.9em;height:.9em;border-radius:50%;background:var(--sw);border:2px solid rgba(27,33,64,.25)}

/* ---------- atur jam (assets/js/games/clockset.js) ---------- */
.cs-board{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:18px;width:100%}
.cs-wrap{display:grid;place-items:center}
.cs-clock{touch-action:none;cursor:grab;user-select:none}
.cs-clock:active{cursor:grabbing}
.cs-clock .hh,.cs-clock .mh{transition:transform .12s}
.cs-ctrl{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.cs-ctrl>div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cs-ctrl small{font-weight:800;color:var(--muted)}
.cs-ctrl span{display:flex;gap:6px}
.cs-ctrl .btn{min-width:54px;justify-content:center;padding:8px 12px}
.cs-read{display:flex;flex-direction:column;gap:6px;align-items:center;min-width:220px;text-align:center}
.cs-dig{font:800 3rem var(--f-display)}
.cs-en{font:800 1.3rem var(--f-display)}
.cs-id{color:var(--muted);font-weight:700}
.cs-q{display:flex;flex-direction:column;align-items:center}
.cs-check{min-width:160px;justify-content:center}
.cs-art{align-items:center}

/* ---------- toko (assets/js/games/shop.js) ---------- */
.sh-tag{display:inline-block;background:var(--sun);color:#1B2140;font:800 .95rem var(--f-display);padding:2px 10px;border-radius:999px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.sh-tag.big{font-size:1.4rem;padding:4px 16px}
.sh-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.sh-item .pic{font-size:5rem}
.sh-item .pic .vis{width:1.4em;height:1.4em}
.sh-art{flex-direction:column;align-items:center}
.sh-board{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.sh-pay{width:100%;display:flex;flex-direction:column;gap:12px}
.sh-tray{border:3px dashed var(--line);border-radius:22px;padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:8px;min-height:120px}
.sh-in{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;min-height:70px}
.sh-empty{color:var(--muted);font-weight:700}
.sh-sum{text-align:center;font-weight:800;font-size:1.15rem}
.sh-sum b{font-family:var(--f-display);font-size:1.5rem}
.sh-wallet{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:12px}
.sh-money{border:0;background:none;padding:2px;border-radius:12px;transition:transform .1s}
.sh-money:hover{transform:translateY(-3px)}
.sh-money:active{transform:scale(.94)}
.sh-money.in span.note{width:96px;height:50px}
.sh-money.in .coin{width:52px;height:52px}
.sh-go{min-width:180px;justify-content:center}
@media (max-width:560px){.sh-wallet span.note{width:92px;height:48px}.sh-wallet .coin{width:52px;height:52px}}

/* ---------- perapian tampilan (27 Okt 2026) ---------- */
/* Kartu grup: label sub-pelajaran terpotong rapi dengan "…" (sebelumnya terpotong tepi kartu). */
.g-subs{min-width:0;overflow:hidden}
.group-art{grid-template-columns:auto minmax(0,1fr)}
.group-art .g-subs{min-width:0;width:100%;max-width:100%}
.group-art .g-subs i{min-width:0;max-width:100%;flex:0 1 auto}
@media (max-width:560px){
  /* Lompat hitung: deret angka + panah tidak lagi melebihi layar HP */
  .seq.sk-seq{font-size:1.35rem;gap:2px;margin-top:30px;max-width:100%}
  .seq.sk-seq b{min-width:1.45em;padding:2px 4px;border-radius:10px}
  .seq.sk-seq .sk-arc{font-size:.62rem;min-width:22px;margin-bottom:22px}
  /* Angka sebelum & sesudah: kereta angka muat di kartu kecil */
  .ntrain.sm{gap:2px}
  .ntrain.sm .ncar{min-width:28px;height:28px;padding:0 3px;border-radius:6px}
  .ntrain.sm .ncar b{font-size:.95rem}
  .ntrain.sm .ncar i{width:11px;height:11px;bottom:-7px;border-width:2px}
  .ntrain.sm .nt-engine{width:30px;height:28px}
  .ntrain.q .ncar{min-width:54px;height:48px}
  .ntrain.q .ncar b{font-size:1.6rem}
  .ntrain.q .nt-engine{width:54px;height:46px}
  /* Masuk ruangan mana: 2 kolom supaya nama ruangan tidak terpotong */
  .opts.so-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .so-opts .cap{font-size:.95rem;overflow-wrap:anywhere}
}
/* Urutkan kegiatan: tiga gambar langkah muat di sampul kartu (sebelumnya gambar ke-3 terpotong). */
.art .emo.ord-art{gap:2px;width:100%;padding:0 6px;align-items:center;justify-content:center}
.art .emo.ord-art .vis{width:calc((100% - 34px) / 3);height:auto;max-width:none;aspect-ratio:1;object-fit:cover;border-radius:10px;flex:none}
.art .emo.ord-art .vs{font-size:1.1rem;width:14px;text-align:center;flex:none}
/* Petunjuk tab Belajar: kalimat Inggris + arti Indonesia kecil */
.hint small.tr{display:block;font-weight:600;font-size:.88em;color:var(--muted);margin-top:2px}
.feedback small.tr{display:block;font-weight:700;font-size:.85em;opacity:.85}
/* Suku kata bahasa Inggris: tiap suku kata berwarna + jumlah tepukan */
.syl-w{display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
.syl-w b{font-family:var(--f-display);font-weight:800;padding:0 4px;border-radius:8px}
.syl-w b.c0{color:#E5484D}.syl-w b.c1{color:#2E7BEF}.syl-w b.c2{color:#22A85F}.syl-w b.c3{color:#8B5CF6}.syl-w b.c4{color:#FF8A1F}
.syl-beats{font-size:.9rem;letter-spacing:2px}
.quiz.result h2 small.tr{display:block;font-family:var(--f-body);font-size:1rem;font-weight:700;color:var(--muted);margin-top:4px}
/* Arti Indonesia kecil di bawah teks Inggris (berlaku di semua tempat: panduan, kartu, judul diagram, dll.) */
small.tr{display:block;font-family:var(--f-body);font-size:.85em;font-weight:600;color:var(--muted);margin-top:2px;line-height:1.3}
button small.tr,.btn small.tr,.chip small.tr{display:inline;margin:0 0 0 6px;font-size:.8em;opacity:.85}
.btn.tone small.tr,.mic small.tr,.speak small.tr{color:inherit;opacity:.72}

/* ---------- kelas 4: bilangan besar, hitung bersusun, faktor, desimal, sudut, konversi ---------- */
.bn-chart{display:inline-flex;gap:4px;justify-content:center;flex-wrap:nowrap}
.bn-chart span{display:flex;flex-direction:column;align-items:center;border-radius:10px;padding:4px 6px;min-width:3.4em;background:var(--bg)}
.bn-chart small{font-size:.6rem;font-weight:800;color:var(--muted);line-height:1.1;text-align:center}
.bn-chart small em{display:block;font-style:normal;font-weight:600;opacity:.8}
.bn-chart b{font-family:var(--f-display);font-size:1.5rem;line-height:1.2}
.bn-chart .p0{background:var(--grape-soft)}.bn-chart .p1{background:var(--coral-soft)}.bn-chart .p2{background:var(--sun-soft)}.bn-chart .p3{background:var(--sky-soft)}.bn-chart .p4{background:var(--leaf-soft)}
.bn-q .bn-chart b{font-size:2.2rem}.bn-q .bn-chart span{min-width:4.4em;padding:6px 8px}
.bn-q{display:flex;justify-content:center}
.bn-art .bn-chart span{min-width:2.4em;padding:2px 4px}.bn-art .bn-chart small{display:none}.bn-art .bn-chart b{font-size:1.4rem}
.bn-learn{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.bn-words{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,4.5vw,1.8rem);text-align:center;line-height:1.25;max-width:560px;margin:0 auto}
.bn-words .tr{display:block;font-size:.95rem;margin-top:4px}

.cc{display:inline-grid;gap:2px;font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:1.15}
.cc-row{display:grid;grid-template-columns:repeat(var(--w),.8em);justify-items:center}
.cc-row i{font-style:normal;color:var(--tone,var(--coral))}
.cc-row b{font-weight:800}
.cc-row.ans{color:var(--good)}
.cc-q{grid-column:2/-1;justify-self:end;color:var(--tone,var(--coral));padding-right:.1em}
.cc-line{display:block;height:4px;border-radius:2px;background:var(--ink)}
.cc-learn .tile .cc{font-size:1.5rem}
.cc-learn{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cc-art .cc{font-size:1.15rem}
.ld{display:inline-flex;flex-direction:column;align-items:flex-end;font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:1.15}
.ld-top{color:var(--good);padding-right:.2em;min-height:1.15em}
.ld-body{display:flex;align-items:stretch}
.ld-d{padding-right:.25em}
.ld-n{border-top:4px solid var(--ink);border-left:4px solid var(--ink);border-top-left-radius:14px;padding:0 .2em 0 .35em}
.ld-grp{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;max-width:420px}
.ld-grp span{display:flex;flex-wrap:wrap;gap:3px;max-width:62px;padding:5px;border:2px dashed var(--sky);border-radius:12px}
.ld-grp span.left{border-color:var(--coral);background:var(--coral-soft)}
.ld-grp i{width:11px;height:11px;border-radius:50%;background:var(--sky)}
.ld-grp .left i{background:var(--coral)}
.cc-wrap .ld,.cc-wrap .cc{font-size:2.3rem}
.cc-wrap{display:flex;flex-direction:column;align-items:center}

.darr.sm{grid-template-columns:repeat(var(--c),7px);gap:2px}.darr.sm i{width:7px;height:7px}
.fc-pair{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin:0 6px}
.fc-pair small{font-weight:800;color:var(--muted)}
.fc-q{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.fc-art{display:flex;flex-direction:column;align-items:center;gap:6px}.fc-art-t{font-family:var(--f-display);font-weight:800;font-size:1.2rem}
.fc-lists{display:flex;flex-direction:column;gap:6px;align-items:center;font-weight:700;font-size:1.05rem;text-align:center}
.fc-lists span{background:var(--bg);border-radius:12px;padding:4px 12px}
.fc-learn .tile .m{font-size:.85rem}

.ang{max-width:100%;height:auto}
.ang-num text{font:700 9px var(--f-body);fill:#8A5A2B;text-anchor:middle}
.ang-q{display:flex;flex-direction:column;align-items:center;gap:4px}
.ang-opts .opt{padding:8px}
.ang-art{display:flex;gap:4px;align-items:flex-end}
.ang-learn .tile .w.sm,.cv-learn .tile .w.sm{font-size:1.1rem}

.dc-strip{display:inline-grid;grid-template-columns:repeat(10,22px);border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.dc-strip i{height:38px;border-right:1px solid var(--ink);background:var(--surface)}.dc-strip i:last-child{border-right:0}
.dc-strip i.on,.dc-grid i.on{background:var(--sky)}
.dc-grid{display:inline-grid;grid-template-columns:repeat(10,13px);grid-auto-rows:13px;gap:1px;background:var(--ink);border:2px solid var(--ink);border-radius:3px}
.dc-grid i{background:var(--surface)}
.dc-q{display:flex;justify-content:center}
.dc-q .dc-strip{grid-template-columns:repeat(10,30px)}.dc-q .dc-strip i{height:50px}
.dc-q .dc-grid{grid-template-columns:repeat(10,18px);grid-auto-rows:18px}
.dc-art{display:flex;flex-direction:column;align-items:center;gap:6px}.dc-art .dc-strip{grid-template-columns:repeat(10,12px)}.dc-art .dc-strip i{height:22px}
.dc-art-t{font-family:var(--f-display);font-weight:800;font-size:1.3rem}
.fr-sum{gap:8px}

.cv-q{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.cv-eq{font-family:var(--f-display);font-weight:800;font-size:clamp(1.4rem,5vw,2rem)}
.cv-art{display:flex;gap:8px}.cv-art-t{font-family:var(--f-display);font-weight:800;font-size:1.3rem;background:var(--surface);border-radius:12px;padding:4px 10px;line-height:1.1;text-align:center}
.cv-art-t small{font-size:.85rem}.cv-art-t.b{background:var(--sun-soft)}
@media (max-width:640px){
  .bn-chart span{min-width:2.9em;padding:3px 3px}.bn-chart small{font-size:.5rem}
  .bn-q .bn-chart span{min-width:3.2em}.bn-q .bn-chart b{font-size:1.7rem}
  .dc-q .dc-strip{grid-template-columns:repeat(10,24px)}.dc-q .dc-grid{grid-template-columns:repeat(10,15px);grid-auto-rows:15px}
}
.ang-learn{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.fc-learn{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dc-learn{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.dc-learn .dc-strip{grid-template-columns:repeat(10,20px)}
.bn-art .bn-chart{gap:2px}.bn-art .bn-chart span{min-width:1.5em;padding:2px 3px;border-radius:6px}.bn-art .bn-chart b{font-size:1.15rem}
.ang-art .ang{flex:0 0 auto;max-width:none}
.bn-num{font-family:var(--f-display);font-weight:800;font-size:2rem;letter-spacing:.04em;white-space:nowrap}
.bn-num .p0{color:var(--grape)}.bn-num .p1{color:var(--coral)}.bn-num .p2{color:#D99A00}.bn-num .p3{color:var(--sky)}.bn-num .p4{color:var(--leaf)}
.bn-num small{font-size:.6em;color:var(--muted)}
.bn-round{white-space:nowrap}.bn-round .bn-num{font-size:1.4rem}.bn-round small{font-size:1.2rem;font-weight:800}

/* ---------- contoh soal & cara mengerjakan ---------- */
.ex{background:var(--surface);border:2px solid var(--tone);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:12px;margin:18px 0}
.ex-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ex-head h3{font-size:1.25rem}
.ex-head h3 .tr{display:block;font-family:var(--f-body);font-weight:600}
.ex-count{font-family:var(--f-display);font-weight:800;background:var(--tone-soft);border-radius:999px;padding:2px 14px}
.ex-intro{margin:0;color:var(--muted);font-weight:600}
.ex-intro .tr{display:block}
.ex-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;background:var(--bg);border-radius:20px;padding:18px 12px}
.ex-card .opt{background:var(--surface)}
.ex-no{align-self:flex-start;font-weight:800;color:var(--tone);font-family:var(--f-display)}
.ex-no .tr{font-weight:600}
.ex-show small{display:block;font-size:.8rem;font-weight:700;opacity:.85}
.ex-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ex-nav .btn:disabled{opacity:.45}
#ex-how{width:100%}
.ex-steps{width:100%;max-width:620px;margin:8px auto 0;text-align:left;background:var(--surface);border:2px dashed var(--tone,var(--sky));border-radius:18px;padding:12px 16px;color:var(--ink);font-size:1rem;font-weight:600}
.ex-steps-h{display:block;font-family:var(--f-display);font-size:1.1rem;margin-bottom:4px}
.ex-steps-h .tr{font-family:var(--f-body)}
.ex-steps ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
.ex-steps li{line-height:1.45}
.ex-steps li .tr{display:block;font-size:.85rem}
.ex-art{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:6px 0 10px}
.feedback .ex-steps{font-size:1rem}
.ex-solved{display:flex;justify-content:center}
@media (max-width:640px){.ex{padding:12px}.ex-card{padding:14px 8px}}

/* ---------- percakapan: wajah tokoh ---------- */
.bubble .who img.vis{width:2.6rem;height:2.6rem;max-width:none;border-radius:50%;object-fit:cover;background:var(--tone-soft);border:2px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.dl-art{align-items:center}
.dl-art img.vis{width:4.6rem;height:4.6rem;max-width:none;border-radius:50%;object-fit:cover;background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.dl-art .vs{font-size:1.6rem}

/* ---------- bersusun: menyimpan & meminjam, kartu contoh soal ---------- */
.cw{display:inline-grid;gap:1px;font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:1.1}
.cw-row{display:grid;grid-template-columns:repeat(var(--w),.95em);justify-items:center;align-items:end}
.cw-row i{font-style:normal;color:var(--coral)}
.cw-row b{font-weight:800;position:relative}
.cw-row b s{text-decoration:none;color:var(--muted)}
.cw-row b s::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:3px;background:var(--bad);transform:rotate(-30deg)}
.cw-row.cw-note b{font-size:.55em;line-height:1.2;min-height:1.2em}
.cw-row.cw-note .carry{color:var(--sky)}
.cw-row.cw-note .lend{color:var(--bad)}
.cw-row.ans{color:var(--good)}
.cw-line{display:block;height:4px;border-radius:2px;background:var(--ink)}
.wk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:6px 0 18px}
.wk{background:var(--surface);border:2px solid var(--tone-soft,var(--line));border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.wk-q{font-family:var(--f-display);font-size:1.15rem;color:var(--tone,var(--ink))}
.wk-q .tr{display:block;font-family:var(--f-body)}
.wk-art{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:6px 0}
.wk ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;font-weight:600}
.wk li .tr{display:block;font-size:.84rem}
.trade-row{display:flex;justify-content:center;margin:4px 0}
.trade{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:1.3rem}
.trade .pv{display:inline-flex}
.trade-row{padding:8px 0}.trade .pv.sm{zoom:1.6}
.wk-auto{text-align:center;overflow:hidden}
.wk-auto ol{text-align:left}
.wk-auto .ask{font-size:1.1rem}
.wk-auto > *{max-width:100%}
.wk-ans{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--leaf-soft);border-radius:14px;padding:8px 10px}
.wk-ans > span:first-child{font-weight:800;color:var(--good)}
.wk-ans > span:first-child .tr{display:block}
.wk-opt{min-height:0;padding:6px 14px;pointer-events:none;background:var(--surface)}
.wk-opt .txt{font-size:1.5rem}
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:18px}
.cal-chip{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 6px;position:relative}
.cal-chip i{position:absolute;top:6px;left:8px;font-style:normal;font-weight:800;font-size:.8rem;color:var(--surface);background:var(--tone);border-radius:999px;min-width:1.5em;text-align:center}
.cal-chip b{font-family:var(--f-display);font-size:1.1rem;margin-top:8px}
.cal-chip small{color:var(--muted);font-weight:700;font-size:.8rem}
.cal-chip.wkend{background:var(--tone-soft);border-color:transparent}
.wk-auto .clock{max-width:150px;height:auto}.wk-ans .clock{max-width:110px}
/* kartu contoh soal sempit: gambar soal besar dikecilkan supaya muat */
.wk-auto .tf-sum.big .tf{grid-template-columns:repeat(5,18px);grid-template-rows:repeat(2,18px);gap:3px;padding:4px}
.wk-auto .tf-sum{flex-wrap:wrap}
.wk-auto .sk-seq{zoom:.7;flex-wrap:wrap;justify-content:center}.wk-auto .story-scene{zoom:.75}
.chips .chip.wide{display:inline-flex;align-items:center;gap:8px}
.chips .chip.wide .vis{width:2.1em;height:2.1em;max-width:none;margin:-6px 0 -6px -6px;border-radius:10px;object-fit:cover}
@media (max-width:640px){.sp-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;scroll-snap-type:x proximity}.sp-chips .chip{flex:none;scroll-snap-align:start}}

/* ---------- tablet & HP: baris geser punya jarak tepi, isi kartu tidak keluar ---------- */
.featured,.shelf-row{scroll-padding-inline:16px}
.card-top .pills{flex-wrap:wrap}
.card-top .pills{flex:1 1 auto;min-width:0}

/* ---------- tombol pasang aplikasi (PWA) ---------- */
.install-chip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:4px;background:var(--surface);border:2px solid var(--sky);border-radius:999px;padding:4px 4px 4px 6px;box-shadow:0 8px 24px rgba(27,33,64,.18);max-width:calc(100vw - 32px)}
.install-chip .ic-go{border:0;background:transparent;color:var(--ink);font:800 .95rem var(--f-body);padding:8px 10px;text-align:left}
.install-chip .x{border:0;background:var(--bg);color:var(--muted);width:32px;height:32px;border-radius:50%;font-weight:800;flex:none}
@media (min-width:1101px){.install-chip{bottom:24px}}
.install-chip{width:max-content}

/* ---------- mengeja: huruf selalu satu baris, mengecil untuk kata panjang ---------- */
.sp-word{flex-wrap:nowrap;gap:2px}
.sp-word b{min-width:0;padding:1px 3px;font-size:clamp(.72rem,calc(8.6rem / var(--n,5)),1.15rem)}

/* ---------- fonik (bunyi mirip) ---------- */
.ph-word{display:inline-flex;gap:3px;font-family:var(--f-display);font-weight:800;font-size:1.3rem;line-height:1.2}
.ph-word b{padding:0 3px;border-radius:7px;background:var(--surface)}
.ph-word b.vw{color:var(--coral);background:var(--coral-soft)}
.ph-word.xl{font-size:clamp(2.4rem,9vw,3.4rem);gap:6px}
.ph-word.xl b{padding:0 10px;border-radius:14px;background:var(--bg)}
.ph-word.xl b.vw{background:var(--coral-soft)}
.ph-word b.gap{border:3px dashed var(--coral);background:transparent}
.ph-word.opt-w{font-size:1.6rem}
.ph-vw{color:var(--coral)}
.ph-q{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.ph-q .pic.xl .vis{width:150px;height:150px}
.ph-q .pic .vis{width:90px;height:90px}
.ph-ear{font-size:4rem}
.ph-sets{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.ph-set{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:6px 4px 10px;background:var(--surface);border:2px solid var(--line);border-radius:20px}
.ph-frame{flex:none;font-family:var(--f-display);font-weight:800;font-size:1.4rem;min-width:3.2em;text-align:center;color:var(--muted)}
.ph-frame i{font-style:normal;color:var(--coral)}
.ph-tile{flex:none;min-width:104px;gap:4px;padding:8px 10px}
.ph-tile .pic.sm .vis{width:54px;height:54px}
.ph-tile .m{font-size:.75rem}
.ph-play{flex:none;white-space:nowrap}
.ph-art{display:flex;align-items:center;gap:6px}.ph-art .vis{width:56px;height:56px}.ph-art-w{font-family:var(--f-display);font-weight:800;font-size:1.6rem}
.opt .pic .vis{max-width:100%}
.mx-wheel-box{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:16px;margin-bottom:12px}
.mx-wheel{width:min(220px,60vw);height:auto;flex:none}
.mx-kinds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:520px;font-weight:600}
.mx-kinds li{display:block}
.mx-kinds li > span:last-child{display:flex;gap:6px;margin-top:4px}
.mx-kinds .mx-blob{width:28px;height:28px}
.ph-q .pic .vis,.ph-tile .pic .vis,.ph-art .vis{max-width:none}
.ph-q .pic{font-size:1rem}
.ph-set{flex-wrap:wrap;overflow:visible;padding:8px}
@media (max-width:640px){.ph-frame{width:100%;text-align:left;padding-left:6px}.ph-tile{min-width:88px}}
/* tombol "Lanjut" di banner bergambar: pojok kiri atas, tidak menutupi tokoh di tengah */
@media (min-width:1001px){
  .hero-banner.branded .hero-copy{top:22px;left:24px;right:auto;bottom:auto;align-items:flex-start;justify-content:flex-start}
}

/* ---------- Mandarin: menulis huruf (田字格) & kosakata ---------- */
[lang="zh"],.hz-char,.zh-w b,.hz-chip,.hz-art span,.zh-art span{font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC","Hiragino Sans GB","Heiti SC",sans-serif}
.hz-card{align-items:center}
.hz-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.hz-head .pic .vis{width:64px;height:64px;max-width:none}
.hz-char{font-size:3.4rem;font-weight:700;line-height:1;color:var(--tone)}
.hz-meta{display:flex;flex-direction:column;line-height:1.2}
.hz-meta b{font-size:1.5rem;font-family:var(--f-display)}
.hz-meta small{color:var(--muted);font-weight:700}
.hz-box{position:relative;width:min(300px,80vw);aspect-ratio:1;margin:0 auto;background:#FFFDF6;border-radius:16px}
.hz-grid{position:absolute;inset:0;width:100%;height:100%}
.hz-grid rect{fill:none;stroke:#E5484D;stroke-width:1.2;opacity:.75}
.hz-grid line{stroke:#E5484D;stroke-width:.6;stroke-dasharray:3 3;opacity:.55}
.hz-pad{position:relative;width:100%;height:100%;touch-action:none}
.hz-pad svg{display:block}
.hz-chip{font-size:1.5rem;min-width:52px}
.hz-art{display:flex;gap:6px}.hz-art span,.zh-art span{font-size:2.6rem;font-weight:700;color:var(--tone)}
.zh-art{display:flex;gap:10px}
.zh-learn{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.zh-learn.wide{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.zh-w{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.zh-w b{font-size:2.1rem;font-weight:700}
.zh-w small{font-family:var(--f-display);font-weight:800;color:var(--coral);font-size:1rem}
.zh-w.xl b{font-size:clamp(3rem,10vw,4.4rem)}
.zh-w.xl small{font-size:1.4rem}
.zh-tile .pic .vis{width:auto;height:2.4em;max-width:3.4em}
.zh-swatch{display:inline-block;width:56px;height:56px;border-radius:50%;border:3px solid rgba(27,33,64,.15)}
.zh-swatch.xl{width:120px;height:120px}
.zh-q{display:flex;justify-content:center;align-items:center;gap:16px}
.zh-q .pic.xl .vis{width:150px;height:150px;max-width:none}
.zh-opts .opt{min-height:96px}
.zh-opts .zh-w b{font-size:1.9rem}
.zh-py{color:var(--coral)!important;font-weight:800!important}
.st-w[lang="zh"]{font-size:1.5rem}
/* pinyin: huruf bertanda nada (ā á ǎ à ī ǚ) lengkap di Nunito */
.hz-meta b,.zh-w small,.zh-py,.hz-head .hz-meta small{font-family:var(--f-body);font-weight:800}

/* Saran sesuai kelas tepat di bawah banner: pelajaran pilihan tidak lagi menumpuk ke banner */
.hero-banner + .for-grade,.hero-banner + .bio-nudge{margin-top:22px}
.for-grade + .featured,.bio-nudge + .featured{margin-top:22px}

/* ---------- Mandarin: latihan bicara (zhspeak) ---------- */
.en-only .tr{display:none!important}
.zs-pic .pic.xl .vis{width:130px;height:130px;max-width:none}
.zs-word .zh-w.xl b{font-size:clamp(2.6rem,9vw,4rem)}
.zs-fb{font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC","Hiragino Sans GB","Heiti SC",sans-serif;font-size:2.1rem;letter-spacing:.08em}
.zs-ok,.guide b.zs-ok{color:var(--good)}
.zs-bad,.guide b.zs-bad{color:var(--bad)}
.sp-chips [lang="zh"]{font-size:1.3rem;font-weight:700}
/* Menulis di HP: pilihan huruf/kata satu baris yang bisa digeser, supaya papan tulis langsung terlihat */
@media (max-width:640px){
  .tr-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .tr-chips .chip{flex:0 0 auto}
}
/* Mandarin: arti bahasa Inggris di bawah perintah soal (bukan terjemahan Indonesia, jadi tidak ikut disembunyikan) */
.ask small.en{display:block;font-family:var(--f-body);font-size:.95rem;font-weight:700;color:var(--muted);margin-top:2px}
/* Uang kertas muat di kotak pilihan & kartu belajar di HP */
.opt span.note,.tile span.note{max-width:100%}
@media (max-width:560px){
  span.note{width:94px;height:50px;padding:4px 7px;background-image:radial-gradient(circle at 22% 50%,rgba(255,255,255,.35) 0 12px,transparent 13px),linear-gradient(135deg,rgba(255,255,255,.18),rgba(0,0,0,.1))}
  span.note b{font-size:.95rem}
  span.note small{font-size:.5rem}
}
/* Gambar lebar (mis. foto keluarga) tidak keluar dari kotak pilihan */
.opt img,.opt .vis{max-width:100%;object-fit:contain}
@media (max-width:560px){
  .opt span.note{width:100%}
  .opt .txt.sm{font-size:1.05rem;letter-spacing:-.01em}
}
/* Mengeja di HP: kotak kartu sempit (±90px), huruf kata panjang (pumpkin, cucumber) tetap muat satu baris */
@media (max-width:560px){
  .sp-word{gap:1px;max-width:100%}
  .sp-word b{padding:1px 1px;border-radius:5px;font-size:clamp(.5rem,calc(5rem / var(--n,5)),1.05rem)}
}
/* Misi Hari Ini + Latihan Hari Ini (beranda) */
.today{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.today-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.today-head h2{font-family:var(--f-display);font-size:clamp(1.2rem,3vw,1.5rem);margin:0}
.today-count{color:var(--muted);font-weight:800;font-size:.9rem}
.today-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.mission{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:20px;padding:14px 16px;font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
.mission:hover{transform:translateY(-2px);border-color:var(--tone,var(--sun))}
.mission .ms-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tone-soft,var(--sun-soft));font-size:1.5rem}
.mission .ms-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mission small{color:var(--muted);font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em}
.mission b{font-family:var(--f-display);font-size:1.05rem;line-height:1.2;overflow-wrap:break-word}
.mission em{font-style:normal;color:var(--muted);font-size:.85rem;font-weight:700}
.mission .go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tone,var(--sun));color:#1B2140}
.mission.review{--tone:var(--coral);--tone-soft:var(--coral-soft);border-style:dashed;border-color:var(--coral)}
.mission.done{opacity:.72}
.mission.done .go{background:var(--line)}
.pill.stale{background:var(--coral-soft);color:var(--ink)}
/* Latihan Hari Ini: asal pelajaran tiap soal */
.rv-from{align-self:center;font-size:.85rem;font-weight:800;color:var(--muted);background:var(--tone-soft);padding:4px 12px;border-radius:999px}
/* Tombol dengarkan petunjuk / perintah soal */
.read-aloud{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;margin-left:8px;vertical-align:middle;border:2px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer}
.read-aloud svg{width:18px;height:18px}
.hint .read-aloud{margin-left:auto}
@media (max-width:560px){.today-row{grid-template-columns:1fr}.mission{padding:12px 14px}}
.today + .featured,.today + .bio-nudge + .featured{margin-top:22px}
/* Kosakata: baca kata tanpa suara */
.vq-word{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,7vw,3rem);line-height:1.15;padding:12px 28px;border-radius:22px;background:var(--tone-soft,var(--sun-soft));color:var(--ink);max-width:100%;overflow-wrap:anywhere}
/* Kelompokkan: "mana yang termasuk ...?" */
.so-target{display:flex;align-items:center;gap:12px;max-width:100%;padding:10px 20px;border-radius:22px;background:var(--tone-soft,var(--sun-soft));font-family:var(--f-display);font-weight:800;font-size:1.3rem;text-align:left}
.so-target .so-gico{flex:none;font-size:2rem;line-height:1}
.so-target small{display:block;font-family:var(--f-body);font-size:.85rem;font-weight:700;color:var(--muted)}
/* Alasan jawaban sesudah menjawab */
.feedback .explain{display:block;max-width:520px;margin:10px auto 0;padding:10px 14px;border-radius:16px;background:var(--bg);border:2px solid var(--line);color:var(--ink);font-size:1rem;font-weight:700;line-height:1.4}
.feedback .explain small.tr{color:var(--muted);opacity:1;margin-top:2px}
.feedback .explain-row{display:block;width:100%}
.feedback:has(.next-btn) .explain-row{flex-basis:100%}
.feedback:has(.next-btn) .explain{margin-top:0}
/* tombol Lanjut tidak tertutup menu bawah di HP saat digulir ke sana */
.next-btn{scroll-margin-bottom:120px}
/* Tantangan (setelah 5 bintang) */
.ch-invite{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:20px;border:2px dashed var(--sun);background:var(--sun-soft);color:var(--ink)}
.ch-invite .ch-ico{flex:none;font-size:1.9rem;line-height:1}
.ch-invite .ch-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ch-invite .ch-txt b{font-family:var(--f-display);font-size:1.1rem}
.ch-invite .ch-txt small{color:var(--muted);font-weight:700}
.ch-invite .btn{flex:none}
.ch-badge{padding:4px 14px;border-radius:999px;background:var(--sun-soft);color:var(--ink);font-weight:800;font-size:.9rem;margin-bottom:-8px}
.ch-score{display:flex;flex-direction:column;align-items:center;gap:2px;margin:-6px 0 0}
.ch-score b{font-family:var(--f-display);font-size:2.6rem;line-height:1}
.ch-score span{color:var(--muted);font-weight:800}
/* Kuis Mingguan */
.mission.weekly{--tone:var(--grape);--tone-soft:var(--grape-soft)}
.wk-weak{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;max-width:560px}
.wk-weak small{width:100%;color:var(--muted);font-weight:800}
@media (max-width:560px){
  .ch-invite{flex-wrap:wrap}
  .ch-invite .btn{width:100%}
  .vq-word{padding:10px 18px}
  .so-target{font-size:1.1rem;padding:8px 14px}
  .feedback .explain{font-size:.95rem}
}
/* Jumlah misi 3–6: kartu di baris terakhir melebar, jadi tidak ada kartu yang tertinggal sendirian dengan ruang kosong.
   Kuis Mingguan selalu satu baris penuh di bawahnya. */
.today-row{display:flex;flex-wrap:wrap}
.today-row>.mission{flex:1 1 260px;min-width:0}
.today-row>.mission.weekly{flex-basis:100%}
/* Pemilih avatar bertab per kelompok (Teman, Anak, Hewan, Naga, ...) */
.avatar-picker{display:flex;flex-direction:column;gap:10px;min-width:0}
.avatar-tabs{display:flex;gap:8px;overflow-x:auto;contain:inline-size;padding:2px 2px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.avatar-tabs .chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:4px 12px 4px 4px;font-family:var(--f-body);border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-weight:800;font-size:.9rem;cursor:pointer}
.avatar-tabs .chip img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.avatar-tabs .chip[aria-selected="true"]{border-color:var(--brand-blue);background:var(--sky-soft)}
.avatar-grid[hidden]{display:none}
.avatar-opt img{border-radius:12px}
@media (min-width:700px){.avatar-tabs{flex-wrap:wrap;overflow:visible}}
/* Gambar karakter (assets/img/teman): kartu berlatar pastel, ditampilkan sedikit lebih besar */
.tile .pic .vis[src*="/teman/"]{height:2.6em;max-width:100%;border-radius:14px}
.opt .pic .vis[src*="/teman/"]{height:2.3em;max-width:none;border-radius:12px}
.qobj .pic .vis[src*="/teman/"]{height:2.2em;max-width:none;border-radius:16px}