:root {
      --ink:#334155;
      --purple:#7771da;
      --green:#45b98b;
      --coral:#ff7f87;
      --yellow:#ffe49b;
      /* ===== Token tema (dipakai body & elemen inline agar bisa berganti gelap/terang) ===== */
      --sky-top:#c5eaff; --sky-mid:#e2f8f0; --sky-bottom:#f4fbe2;
      --surface:#ffffff; --surface-soft:rgba(255,255,255,.92); --surface-warm:linear-gradient(160deg,#fffdf3,#f0f6ff);
      --ink-strong:#4f4a9b; --ink-body:#526174; --ink-faint:#8a93ad;
      --border-glow:#ffffff; --card-shadow:rgba(76,91,125,.16);
    }
    :root[data-theme="dark"] {
      --surface:#242c4a; --surface-soft:rgba(36,44,74,.92); --surface-warm:linear-gradient(160deg,#2a3358,#232b4c);
      --ink-strong:#eef0ff; --ink-body:#c3cbe8; --ink-faint:#8c96c2;
      --border-glow:#4a5384; --card-shadow:rgba(0,0,4,.45);
    }
    /* ===== Langit per-pemandangan (data-scene). Mode Gelap TIDAK lagi
       mengubah langit — pemandangan dipilih terpisah lewat "Ganti Latar". ===== */
    :root[data-scene="senja"]{ --sky-top:#ffd6a0; --sky-mid:#ff9e86; --sky-bottom:#ffe0c2; }
    :root[data-scene="malam"]{ --sky-top:#141a3d; --sky-mid:#1b2340; --sky-bottom:#101527; }
    :root[data-scene="pantai"]{ --sky-top:#bfefff; --sky-mid:#dff6ff; --sky-bottom:#ffe9b8; }
    :root[data-scene="laut"]{ --sky-top:#3fb2d9; --sky-mid:#1f7fae; --sky-bottom:#0a4f7a; }
    :root[data-scene="angkasa"]{ --sky-top:#1b1140; --sky-mid:#120b30; --sky-bottom:#0a0620; }
    *{box-sizing:border-box}
    html,body{width:100%;min-height:100%;margin:0}
    body{font-family:"Baloo 2","DM Sans",sans-serif;color:var(--ink);overflow-x:hidden}
    button,canvas{touch-action:manipulation}
    #traceCanvas{touch-action:none}
    button:focus-visible,canvas:focus-visible{outline:4px solid #5b7cfa;outline-offset:4px}
    .app-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-height:calc(100 * var(--vh,1vh));overflow:hidden}
    /* Gudang simbol SVG (definisi <symbol>/<defs>). JANGAN pakai display:none:
       di Chrome/Safari itu memutus rujukan paint-server (gradien fill=url(#...))
       dari <use> di SVG lain, sehingga aset gradien jadi berongga/tak berwarna.
       Sembunyikan dengan ukuran-nol tapi tetap di render tree supaya gradien resolve. */
    .svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

    /* ===== Pemandangan latar ===== */
    .scenery{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
    .sun{position:absolute;right:6%;top:34px;width:92px;height:92px;border-radius:50%;
      background:radial-gradient(circle,#fff3b0 30%,#ffd76b 70%);
      box-shadow:0 0 55px 22px rgba(255,214,100,.55);animation:sunPulse 6s ease-in-out infinite}
    @keyframes sunPulse{50%{transform:scale(1.07)}}
    /* ===== Visibilitas properti per-pemandangan ==========================
       Tiap elemen di .scenery diberi data-scenes="..." (daftar scene tempat ia
       muncul). Default disembunyikan; hanya yang cocok scene aktif yang tampil.
       Menambah tema baru = cukup cantumkan namanya di data-scenes elemen +
       tambah satu selektor di daftar bawah ini. Terpisah dari Mode Gelap. */
    .scenery [data-scenes]{display:none}
    :root[data-scene="pagi"]    .scenery [data-scenes~="pagi"],
    :root[data-scene="senja"]   .scenery [data-scenes~="senja"],
    :root[data-scene="malam"]   .scenery [data-scenes~="malam"],
    :root[data-scene="pantai"]  .scenery [data-scenes~="pantai"],
    :root[data-scene="laut"]    .scenery [data-scenes~="laut"],
    :root[data-scene="angkasa"] .scenery [data-scenes~="angkasa"]{display:block}
    .moon{position:absolute;right:8%;top:34px;width:78px;height:auto;filter:drop-shadow(0 0 26px rgba(180,200,255,.55));animation:moonGlow 6s ease-in-out infinite}
    @keyframes moonGlow{50%{transform:scale(1.06) rotate(-4deg)}}
    .star-field{position:absolute;inset:0}
    .night-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.8);animation:starTwinkle 3.4s ease-in-out infinite}
    @keyframes starTwinkle{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
    /* left:-160px statis (bukan dianimasikan); pergerakan lewat transform saja
       (compositor-only) supaya tidak memicu reflow tiap frame selama animasi
       infinite ini berjalan terus di semua layar — penting untuk perangkat low-end. */
    .cloud{position:absolute;left:-160px;height:auto;filter:drop-shadow(0 6px 8px rgba(90,120,160,.14));opacity:.95;animation:cloudDrift linear infinite;will-change:transform}
    .cloud.c1{top:9%;width:150px;animation-duration:70s}
    .cloud.c2{top:20%;width:104px;animation-duration:95s;animation-delay:-30s}
    .cloud.c3{top:4%;width:84px;animation-duration:120s;animation-delay:-70s}
    @keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(calc(105vw + 160px))}}
    .bird{position:absolute;top:12%;left:-70px;width:46px;height:auto;animation:birdFly 42s linear infinite;animation-delay:-6s;will-change:transform}
    @keyframes birdFly{
      0%{transform:translate(0,0)}
      25%{transform:translate(calc(26.5vw + 17.5px),-26px)}
      50%{transform:translate(calc(53vw + 35px),8px)}
      75%{transform:translate(calc(79.5vw + 52.5px),-20px)}
      100%{transform:translate(calc(106vw + 70px),0)}
    }
    .butterfly{position:absolute;width:36px;height:auto;animation:flutter 14s ease-in-out infinite}
    .butterfly.b1{left:12%;bottom:160px}
    .butterfly.b2{right:16%;bottom:120px;width:30px;animation-delay:-7s;animation-duration:17s}
    @keyframes flutter{0%,100%{transform:translate(0,0) rotate(-10deg)}25%{transform:translate(44px,-38px) rotate(10deg)}50%{transform:translate(96px,6px) rotate(-8deg)}75%{transform:translate(38px,40px) rotate(8deg)}}
    .hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:250px}
    @keyframes floaty{50%{transform:translateY(-14px) rotate(4deg)}}
    .scene-obj{position:absolute;height:auto;filter:drop-shadow(0 5px 5px rgba(60,90,60,.14))}
    .tree{bottom:120px;width:78px;transform-origin:bottom center;animation:sway 5s ease-in-out infinite}
    .tree.t1{left:5%;bottom:130px;width:86px}
    .tree.t2{left:15%;bottom:112px;width:62px;animation-delay:-2.2s}
    .tree.t3{right:9%;bottom:128px;width:80px;animation-delay:-3s}
    .tree.t4{right:21%;bottom:110px;width:60px;animation-delay:-1.2s}
    .school{left:50%;bottom:118px;transform:translateX(-50%);width:112px}
    .bush{width:70px;bottom:76px}
    .bush.bs1{left:33%}
    .bush.bs2{right:37%;bottom:66px;width:56px}
    .grass{width:48px;bottom:70px}
    .grass.gr1{left:26%}
    .grass.gr2{right:29%;bottom:64px;width:40px}
    .balloon{position:absolute;width:46px;height:auto;animation:balloonFloat 18s ease-in-out infinite}
    .balloon.bl1{left:78%;top:20%}
    .balloon.bl2{left:9%;top:30%;width:38px;animation-delay:-9s}
    @keyframes balloonFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-30px) rotate(4deg)}}

    /* ===== Properti PANTAI ===== */
    .sea{position:absolute;left:0;right:0;bottom:96px;height:120px;background:linear-gradient(180deg,#5ec6ef,#2f9ed4);box-shadow:inset 0 6px 0 rgba(255,255,255,.28)}
    .sea:after{content:"";position:absolute;left:0;right:0;top:-7px;height:14px;background:radial-gradient(circle at 12px 10px,transparent 8px,#8fe0ff 9px) repeat-x;background-size:26px 14px;opacity:.7}
    .sand{position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,#ffe6a8,#f6d189)}
    .palm{position:absolute;width:88px;bottom:150px}
    .palm.pm1{left:6%}
    .palm.pm2{right:8%;bottom:140px;width:70px;transform:scaleX(-1)}
    .shell{position:absolute;width:44px;bottom:34px;left:24%}
    /* ===== Properti BAWAH LAUT ===== */
    .fish{position:absolute;left:-90px;width:74px;height:auto;animation:swim 26s linear infinite;will-change:transform}
    .fish.f1{top:26%;animation-duration:30s}
    .fish.f2{top:48%;width:54px;animation-duration:38s;animation-delay:-12s}
    .fish.f3{top:66%;left:auto;right:-90px;width:44px;animation-duration:33s;animation-delay:-22s;transform:scaleX(-1)}
    @keyframes swim{0%{transform:translate(0,0)}50%{transform:translate(calc(53vw + 45px),-18px)}100%{transform:translate(calc(106vw + 90px),0)}}
    .fish.f3{animation-name:swimR}
    /* Cermin (scaleX(-1)) diletakkan PALING AKHIR agar tidak membalik arah
       translateX — sudah diuji empiris: translateX(-x) scaleX(-1) tetap bergerak
       ke kiri sejauh x, sedangkan scaleX(-1) translateX(x) akan terbalik arah. */
    @keyframes swimR{
      0%{transform:translateX(0) translateY(0) scaleX(-1)}
      50%{transform:translateX(calc(-53vw - 45px)) translateY(16px) scaleX(-1)}
      100%{transform:translateX(calc(-106vw - 90px)) translateY(0) scaleX(-1)}
    }
    .bubbles{position:absolute;width:34px;height:auto;opacity:.8;animation:bubbleRise 9s ease-in infinite}
    .bubbles.bu1{left:20%;bottom:0}
    .bubbles.bu2{right:26%;bottom:0;width:26px;animation-delay:-4s;animation-duration:11s}
    @keyframes bubbleRise{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-88vh);opacity:0}}
    .seaweed{position:absolute;width:46px;bottom:0;transform-origin:bottom center;animation:weedWave 5s ease-in-out infinite}
    .seaweed.sw1{left:12%}
    .seaweed.sw2{left:22%;width:36px;animation-delay:-2s}
    .coral{position:absolute;width:96px;bottom:0;right:10%}
    @keyframes weedWave{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
    .starfish{position:absolute;width:52px;bottom:10px;right:26%}
    /* ===== Properti LUAR ANGKASA ===== */
    .planet{position:absolute;width:96px;height:auto;left:9%;top:20%;animation:sunPulse 9s ease-in-out infinite}
    .saturn{position:absolute;width:120px;height:auto;right:8%;top:14%;animation:floaty 8s ease-in-out infinite}
    .rocket{position:absolute;width:60px;height:auto;left:16%;bottom:16%;animation:rocketBob 4.5s ease-in-out infinite}
    @keyframes rocketBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(4deg)}}

    /* ===== Ikon besar Benar / Salah (sesuai flowchart, diperbesar, dimeriahkan,
       dan durasinya diperlambat supaya anak SD sempat fokus melihatnya) ===== */
    #bigMark{position:fixed;inset:0;z-index:75;display:grid;place-items:center;pointer-events:none}
    .mark-stage{display:flex;flex-direction:column;align-items:center;gap:24px}
    .mark-badge{position:relative;display:grid;place-items:center;width:230px;height:230px;border:13px solid #fff;border-radius:50%;opacity:0;transform:scale(.2)}
    .mark-badge svg{width:112px;height:112px;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;fill:none;position:relative;z-index:2}
    .mark-badge.correct{background:#45b98b;color:#45b98b;box-shadow:0 24px 65px rgba(41,150,105,.55)}
    .mark-badge.wrong{background:#ef6671;color:#ef6671;box-shadow:0 24px 65px rgba(216,74,90,.55)}
    .mark-ring{position:absolute;inset:0;border-radius:50%;border:7px solid currentColor;opacity:0}
    .mark-badge.correct.play{animation:markPopCorrect 2.2s cubic-bezier(.3,1.7,.4,1) both}
    .mark-badge.correct.play .mark-ring.r1{animation:ringPulse 1.3s ease-out .05s both}
    .mark-badge.correct.play .mark-ring.r2{animation:ringPulse 1.3s ease-out .32s both}
    @keyframes markPopCorrect{
      0%{opacity:0;transform:scale(.15) rotate(-22deg)}
      16%{opacity:1;transform:scale(1.28) rotate(7deg)}
      26%{transform:scale(.9) rotate(-4deg)}
      34%{transform:scale(1.1) rotate(3deg)}
      42%{transform:scale(.98) rotate(0deg)}
      48%{opacity:1;transform:scale(1.04)}
      90%{opacity:1;transform:scale(1)}
      100%{opacity:0;transform:scale(1.3)}
    }
    @keyframes ringPulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
    .mark-badge.wrong.play{animation:markShakeWrong 1.9s cubic-bezier(.36,.07,.19,.97) both}
    @keyframes markShakeWrong{
      0%{opacity:0;transform:scale(.3) translateX(0)}
      12%{opacity:1;transform:scale(1.08) translateX(0)}
      22%{transform:scale(1) translateX(-16px) rotate(-7deg)}
      32%{transform:scale(1) translateX(14px) rotate(6deg)}
      42%{transform:scale(1) translateX(-10px) rotate(-4deg)}
      52%{transform:scale(1) translateX(6px) rotate(2deg)}
      60%{opacity:1;transform:scale(1) translateX(0) rotate(0)}
      92%{opacity:1;transform:scale(1) translateX(0) rotate(0)}
      100%{opacity:0;transform:scale(1.12) translateX(0)}
    }
    .mark-badge.play svg path{stroke-dasharray:160;stroke-dashoffset:160;animation:markDraw .5s ease .14s forwards}
    @keyframes markDraw{to{stroke-dashoffset:0}}
    .mark-spark{position:fixed;z-index:76;pointer-events:none;font-size:30px;animation:markSparkBurst 1.4s ease-out forwards}
    @keyframes markSparkBurst{0%{transform:translate(-50%,-50%) scale(.3) rotate(0deg);opacity:0}12%{opacity:1}100%{transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) scale(1.15) rotate(var(--mr));opacity:0}}
    /* Kata apresiasi besar, tampil bersamaan & di dekat lencana besar */
    .mark-caption{opacity:0;max-width:min(88vw,560px);text-align:center;font-weight:900;font-size:32px;line-height:1.2;padding:12px 28px;border-radius:26px;background:#fff;box-shadow:0 18px 42px rgba(51,65,85,.25)}
    .mark-caption.correct{color:#1f9d67}
    .mark-caption.wrong{color:#c94b5c}
    .mark-caption.show{animation:captionPop linear both}
    @keyframes captionPop{
      0%{opacity:0;transform:translateY(18px) scale(.8)}
      10%{opacity:1;transform:translateY(0) scale(1.08)}
      18%{transform:scale(1)}
      88%{opacity:1;transform:scale(1)}
      100%{opacity:0;transform:translateY(-10px) scale(.94)}
    }
    @media(max-width:640px){
      .mark-badge{width:170px;height:170px;border-width:10px}
      .mark-badge svg{width:82px;height:82px;stroke-width:10}
      .mark-spark{font-size:24px}
      .mark-caption{font-size:23px;padding:10px 20px}
    }

    /* ===== Karakter anak laki-laki & perempuan ===== */
    /* Idle "hidup": bounce dengan squash-and-stretch (kaki tetap menapak),
       lambaian yang melambai lalu ISTIRAHAT (bukan metronom), dan tiap anak
       di-desync (durasi berbeda) supaya tidak bergerak seragam. */
    .kid{display:inline-block;transform-origin:center bottom;animation:kidBounce 2.6s ease-in-out infinite}
    .kid.delay{animation-duration:3.1s;animation-delay:-1.1s}
    .kid .wave-arm{transform-origin:top center;animation:kidWave 3s ease-in-out infinite}
    .kid.delay .wave-arm{animation-duration:3.4s;animation-delay:-.6s}
    .kid .eye{transform-origin:center;animation:blink 4.6s ease-in-out infinite}
    .kid.delay .eye{animation-duration:5.3s}
    @keyframes kidBounce{
      0%,100%{transform:translateY(0) scale(1,1)}
      18%{transform:translateY(0) scale(1.03,.97)}
      48%{transform:translateY(-13px) scale(.98,1.03)}
      74%{transform:translateY(0) scale(1.02,.98)}
    }
    @keyframes kidWave{
      0%,66%,100%{transform:rotate(0deg)}
      8%{transform:rotate(-50deg)}
      18%{transform:rotate(-33deg)}
      28%{transform:rotate(-50deg)}
      38%{transform:rotate(-34deg)}
      48%{transform:rotate(-48deg)}
      58%{transform:rotate(-8deg)}
    }
    /* Secondary motion: kuncir Sari bergoyang halus mengikuti gerak badan */
    .kid .pigtail{animation:pigSway 2.7s ease-in-out infinite}
    .kid .pigtail.pig-r{animation-delay:-.35s}
    @keyframes pigSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
    /* Anak-anak merayakan di pojok layar Selesai: lompat "hore" berulang */
    .finish-kid{position:absolute;top:6px;width:66px;z-index:2;pointer-events:none}
    .finish-kid.fk-l{left:4px}
    .finish-kid.fk-r{right:4px}
    .finish-kid .kid{width:100%;height:auto;transform-origin:center bottom;animation:cheerHop 1s ease-in-out infinite}
    .finish-kid.fk-r .kid{animation-delay:-.5s}
    @keyframes cheerHop{0%,100%{transform:translateY(0) scale(1,1) rotate(-4deg)}45%{transform:translateY(-16px) scale(.97,1.05) rotate(4deg)}72%{transform:translateY(0) scale(1.04,.96) rotate(-1deg)}}
    @media(max-width:430px){.finish-kid{width:54px}}
    /* Tangan kiri (yang tadinya diam) kini mengayun halus dari bahu */
    .kid .arm-idle{animation:armSway 3.2s ease-in-out infinite}
    .kid.delay .arm-idle{animation-duration:2.7s;animation-delay:-.8s}
    @keyframes armSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(8deg)}}
    /* Mata melirik halus sesekali (kedua mata bergerak serempak) */
    .kid .eye-look{animation:eyeLook 7s ease-in-out infinite}
    @keyframes eyeLook{0%,54%,100%{transform:translateX(0)}62%,71%{transform:translateX(1.8px)}79%,88%{transform:translateX(-1.8px)}}
    /* Mulut: sebagian besar tersenyum, sesekali membuka "hore" */
    .kid .mouth-happy{opacity:0;animation:mouthHappy 6.5s ease-in-out infinite}
    .kid .mouth-line{animation:mouthLine 6.5s ease-in-out infinite}
    .kid.delay .mouth-happy,.kid.delay .mouth-line{animation-duration:7.3s;animation-delay:-2s}
    @keyframes mouthHappy{0%,80%,100%{opacity:0}85%,95%{opacity:1}}
    @keyframes mouthLine{0%,80%,100%{opacity:1}85%,95%{opacity:0}}
    .cast{gap:6px}
    .cast svg{width:clamp(74px,25vw,152px);height:auto}
    .pop-in{opacity:0;animation:popIn .75s cubic-bezier(.3,1.6,.4,1) forwards}
    .pop-in.d1{animation-delay:.15s}
    .pop-in.d2{animation-delay:.3s}
    .pop-in.d3{animation-delay:.45s}
    .pop-in.d4{animation-delay:.6s}
    @keyframes popIn{from{opacity:0;transform:scale(.2) translateY(34px)}to{opacity:1;transform:none}}
    .screen{width:100%;flex:1 1 auto;padding:22px}
    .hidden-screen{display:none!important}
    .screen-enter{animation:screenIn .45s cubic-bezier(.22,1,.36,1) both}
    @keyframes screenIn{from{opacity:0;transform:translateY(26px) scale(.97)}}
    /* ===== Tirai transisi antar layar (curtain wipe) ===== */
    #pageWipe{position:fixed;inset:0;z-index:72;pointer-events:none;display:grid;grid-template-rows:1fr 1fr;overflow:hidden;visibility:hidden}
    #pageWipe.cover,#pageWipe.revealing{visibility:visible}
    .wipe-panel{overflow:hidden;will-change:transform}
    .wipe-top{background:linear-gradient(135deg,#8079e6,#a77ce8);transform:translateY(-101%);box-shadow:0 12px 30px rgba(60,50,120,.3)}
    .wipe-bottom{background:linear-gradient(135deg,#45b98b,#4fb6c7);transform:translateY(101%);display:grid;place-items:start center;box-shadow:0 -12px 30px rgba(30,90,80,.3)}
    #pageWipe.cover .wipe-top,#pageWipe.cover .wipe-bottom{transform:translateY(0);transition:none}
    #pageWipe.revealing .wipe-top{transform:translateY(-101%);transition:transform .52s cubic-bezier(.76,0,.24,1)}
    #pageWipe.revealing .wipe-bottom{transform:translateY(101%);transition:transform .52s cubic-bezier(.76,0,.24,1)}
    .wipe-spark{font-size:38px;margin-top:-19px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));animation:wipeSpark .9s ease-in-out infinite}
    @keyframes wipeSpark{0%,100%{transform:scale(1) rotate(-8deg)}50%{transform:scale(1.25) rotate(10deg)}}
    .soft-card{border:3px solid rgba(255,255,255,.9);box-shadow:0 22px 55px rgba(76,91,125,.16);backdrop-filter:blur(8px)}
    .main-button{min-height:52px;box-shadow:0 7px 0 rgba(51,65,85,.17);transition:.16s ease;cursor:pointer}
    .main-button:hover{transform:translateY(-2px);filter:saturate(1.08)}
    .main-button:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(51,65,85,.17)}
    .main-button:disabled{cursor:not-allowed;opacity:.48;filter:grayscale(.35);transform:none}
    .main-button.squish{animation:squish .32s ease}
    @keyframes squish{35%{transform:scale(.9,1.08)}70%{transform:scale(1.05,.94)}}
    .game-card{position:relative;overflow:hidden;border:3px solid rgba(255,255,255,.9);transition:.22s ease}
    .game-card:hover{transform:translateY(-6px) rotate(-.3deg);box-shadow:0 20px 35px rgba(76,91,125,.16)}
    .game-card:after{content:"";position:absolute;right:-25px;top:-25px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.32)}
    .game-icon{display:grid;place-items:center;width:76px;height:76px;border:4px solid #fff;border-radius:24px;font-size:38px;box-shadow:0 9px 20px rgba(51,65,85,.12);transform:rotate(-4deg);animation:iconWiggle 3.6s ease-in-out infinite}
    @keyframes iconWiggle{50%{transform:rotate(4deg) translateY(-5px)}}
    .code-chip{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 9px;border:2px solid #fff;border-radius:999px;font-weight:900;font-size:13px;box-shadow:0 3px 0 rgba(51,65,85,.1)}
    .animated-letter{display:inline-flex;align-items:center;gap:1px;font-weight:900;font-size:32px;letter-spacing:-.14em;transform:rotate(-7deg);transform-origin:center bottom}
    .animated-letter span{display:inline-block;text-shadow:1px 2px 0 rgba(51,65,85,.1);animation:letterBounce 1.8s ease-in-out infinite}
    .animated-letter .letter-a{color:#ed3d83;transform:rotate(-5deg)}
    .animated-letter .letter-b{color:#f29a16;animation-delay:.12s;transform:rotate(4deg)}
    .animated-letter .letter-c{color:#27ae60;animation-delay:.24s;transform:rotate(-3deg)}
    .animated-number{display:inline-flex;align-items:center;gap:1px;font-weight:900;font-size:32px;letter-spacing:-.12em;transform:rotate(-5deg);transform-origin:center bottom}
    .animated-number span{display:inline-block;text-shadow:1px 2px 0 rgba(51,65,85,.1);animation:letterBounce 1.8s ease-in-out infinite}
    .animated-number .number-one{color:#ed3d83;transform:rotate(-5deg)}
    .animated-number .number-two{color:#f29a16;animation-delay:.12s;transform:rotate(4deg)}
    .animated-number .number-three{color:#27ae60;animation-delay:.24s;transform:rotate(-3deg)}
    @keyframes letterBounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-7px) rotate(5deg)}60%{transform:translateY(0) rotate(-2deg)}75%{transform:translateY(-3px) rotate(2deg)}}
    .progress-track{height:18px;border:3px solid #fff;background:#fff;box-shadow:inset 0 2px 6px rgba(51,65,85,.12)}
    .progress-fill{position:relative;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#5ccfaa,#72c8ff,#a88bea);transition:width .5s ease;overflow:hidden}
    .progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);animation:shimmer 2.2s linear infinite}
    @keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
    .canvas-wrap{position:relative;width:min(100%,610px);margin:auto;overflow:hidden;border:4px solid #fff;border-radius:34px;aspect-ratio:4/3;background:linear-gradient(rgba(121,158,255,.09) 2px,transparent 2px),linear-gradient(90deg,rgba(121,158,255,.09) 2px,transparent 2px),#fff;background-size:32px 32px;box-shadow:0 18px 35px rgba(76,91,125,.14)}
    #traceCanvas{display:block;width:100%;height:100%;cursor:crosshair}
    .start-bubble{position:absolute;display:grid;place-items:center;width:54px;height:54px;margin:-27px 0 0 -27px;pointer-events:none;border:4px solid #fff;border-radius:50%;background:#fff3c4;box-shadow:0 6px 15px rgba(240,170,60,.4);font-size:26px;opacity:0}
    .start-bubble.demo{animation:scribbleDemo 2.4s ease-in-out 1 both}
    @keyframes scribbleDemo{
      0%{transform:translate(calc(var(--dx,34px) * -1),calc(var(--dy,-4px) * -1)) rotate(-20deg) scale(.8);opacity:0}
      10%{opacity:1;transform:translate(calc(var(--dx,34px) * -1),calc(var(--dy,-4px) * -1)) rotate(-20deg) scale(1)}
      28%{transform:translate(calc(var(--dx,34px) * .65),calc(var(--dy,10px) * .6)) rotate(16deg) scale(1)}
      46%{transform:translate(calc(var(--dx,34px) * -.75),var(--dy,16px)) rotate(-16deg) scale(1)}
      64%{transform:translate(calc(var(--dx,34px) * .7),calc(var(--dy,10px) * -1)) rotate(14deg) scale(1)}
      82%{transform:translate(calc(var(--dx,34px) * -.45),calc(var(--dy,4px) * .4)) rotate(-10deg) scale(1);opacity:1}
      100%{transform:translate(0,0) rotate(0deg) scale(.75);opacity:0}
    }
    .feedback{min-height:56px;padding:12px 16px;border:2px solid rgba(255,255,255,.9);border-radius:19px;font-weight:800;font-size:16px;animation:feedbackIn .3s ease both}
    .feedback[hidden]{display:none}
    .feedback.f-ready{background:#e9f5ff;color:#35647e}
    .feedback.f-drawing{background:#fff2bf;color:#745d16}
    .feedback.f-wrong{background:#ffd9e5;color:#813f58}
    .feedback.f-correct{background:#c9f3df;color:#27674f;font-weight:900;font-size:17px}
    @keyframes feedbackIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
    .picture-stage{display:grid;place-items:center;min-height:250px;overflow:hidden;border:4px solid #fff;border-radius:30px;background:radial-gradient(circle,#fff,#ebf1ff);box-shadow:inset 0 0 40px rgba(89,91,160,.08)}
    .art-svg{width:min(76%,330px);height:220px;overflow:visible;color:#46566b;transition:.45s ease}
    .art-svg *{vector-effect:non-scaling-stroke}
    /* Siluet: filter brightness(0) menembus shadow-DOM <use> (selektor .shape
       tidak bisa), jadi bayangan andal jadi hitam di semua browser. */
    .silhouette{filter:brightness(0) opacity(.88);transition:filter .5s ease}
    .silhouette.revealed{filter:drop-shadow(0 7px 5px rgba(51,65,85,.20));animation:silReveal .65s cubic-bezier(.3,1.5,.4,1)}
    @keyframes silReveal{0%{transform:scale(.85)}55%{transform:scale(1.08)}100%{transform:scale(1)}}
    .answer-option{min-height:170px;overflow:hidden;border:4px solid #fff;border-radius:24px;background:#fff;box-shadow:0 9px 0 rgba(51,65,85,.11);transition:.16s ease;cursor:pointer}
    .answer-option:hover{transform:translateY(-4px)}
    .answer-option .art-svg{width:100%;height:135px;padding:10px;filter:drop-shadow(0 6px 4px rgba(51,65,85,.20))}
    .answer-option.wrong{border-color:#ef6671;background:#ffe1e4;animation:shake .38s ease}
    .answer-option.correct{border-color:#45b98b;background:#d7f6e8;animation:pop .55s ease}
    .answer-option.hint-pulse,.quiz-option.hint-pulse,.num-bubble.hint-pulse{animation:hintPulse 1.1s ease-in-out infinite;border-color:#ffd16b}
    @keyframes hintPulse{50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(255,209,107,.45)}}
    @keyframes shake{25%{transform:translateX(-8px) rotate(-1deg)}75%{transform:translateX(8px) rotate(1deg)}}
    @keyframes pop{50%{transform:scale(1.06)}}
    .object-name{min-height:58px;border-radius:20px;background:#c9f3df;color:#27674f;font-weight:900;font-size:21px;animation:pop .5s ease}
    .confetti{position:absolute;top:-20px;z-index:30;width:12px;height:20px;border-radius:5px;pointer-events:none;animation:fall 1.7s ease-in forwards}
    @keyframes fall{to{transform:translateY(700px) rotate(620deg);opacity:0}}
    .celebration{display:grid;place-items:center;width:140px;height:140px;margin:auto;border:8px solid #fff;border-radius:50%;box-shadow:0 16px 40px rgba(86,72,133,.2);animation:celebrate 1.4s ease-in-out infinite}
    @keyframes celebrate{50%{transform:rotate(4deg) scale(1.06)}}

    /* ===== KUIS (mesin permainan pilihan) ===== */
    .quiz-visual{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-height:150px;padding:18px;border:4px solid #fff;border-radius:28px;background:radial-gradient(circle,#fff,#f1f5ff);box-shadow:inset 0 0 40px rgba(89,91,160,.07);font-size:56px;line-height:1.15}
    .quiz-visual span{display:inline-block;opacity:0;animation:popIn .5s cubic-bezier(.3,1.6,.4,1) forwards}
    .quiz-word{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}
    .quiz-word span{display:grid;place-items:center;min-width:44px;height:54px;padding:0 6px;border-radius:12px;background:#eef1fb;color:#4f4a9b;font-weight:900;font-size:31px;animation:popIn .45s cubic-bezier(.3,1.6,.4,1) both}
    .quiz-word .word-blank{background:#fff7d6;border-bottom:5px dashed #f2a516;color:#b98a10}
    .quiz-word .word-filled{background:#d7f6e8;border-bottom:5px solid #45b98b;color:#1f9d67;animation:pop .55s ease}
    .quiz-option{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 16px;border:4px solid #fff;border-radius:22px;background:#fff;box-shadow:0 8px 0 rgba(51,65,85,.11);font-weight:800;font-size:16px;text-align:left;color:#3c4963;transition:.16s ease;cursor:pointer}
    .quiz-option:hover{transform:translateY(-3px)}
    .quiz-option .opt-emoji{font-size:30px;flex:none}
    .quiz-option.letter{justify-content:center;min-height:88px;font-size:40px;font-weight:900;color:#4f4a9b;text-align:center}
    .quiz-option.wrong{border-color:#ef6671;background:#ffe1e4;animation:shake .38s ease}
    .quiz-option.correct{border-color:#45b98b;background:#d7f6e8;animation:pop .55s ease}
    .quiz-option:disabled{cursor:not-allowed;opacity:.75}
    /* Tersorot: sudah disentuh sekali (didengar), menunggu sentuhan kedua untuk memilih */
    .quiz-option.armed{border-color:#7771da;color:#4f4a9b;animation:armedPulse 1.1s ease-in-out infinite}
    .quiz-option.armed:after{content:"👆";position:absolute;top:-12px;right:-8px;font-size:22px;animation:armedNudge 1s ease-in-out infinite}
    .quiz-option{position:relative}
    @keyframes armedPulse{0%,100%{box-shadow:0 0 0 4px rgba(119,113,218,.3),0 8px 0 rgba(51,65,85,.11)}50%{box-shadow:0 0 0 9px rgba(119,113,218,.18),0 8px 0 rgba(51,65,85,.11)}}
    @keyframes armedNudge{50%{transform:translateY(-4px)}}
    [data-theme="dark"] .quiz-option.armed{color:#c3b9ff}
    .quiz-reveal{border:3px solid #fff;border-radius:20px;background:#fff7d6;color:#7a5c12;font-weight:900;font-size:20px;padding:12px 18px;animation:pop .55s ease}

    /* ===== MENGURUTKAN BILANGAN ===== */
    .order-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
    .order-slot{display:grid;place-items:center;width:62px;height:62px;border:4px dashed #b9c6dd;border-radius:50%;background:rgba(255,255,255,.65);font-weight:900;font-size:27px;color:#b9c6dd}
    .order-slot.filled{border:4px solid #fff;background:#45b98b;color:#fff;animation:pop .5s ease;box-shadow:0 6px 0 rgba(41,150,105,.35)}
    .order-bubbles{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;min-height:120px;padding:18px;border:4px solid #fff;border-radius:28px;background:radial-gradient(circle,#fff,#f1f5ff);box-shadow:inset 0 0 40px rgba(89,91,160,.07)}
    .num-bubble{display:grid;place-items:center;width:78px;height:78px;border:5px solid #fff;border-radius:50%;color:#fff;font-weight:900;font-size:33px;box-shadow:0 8px 0 rgba(51,65,85,.16);cursor:pointer;transition:.15s ease;animation:bubbleFloat 3s ease-in-out infinite}
    .num-bubble:hover{transform:scale(1.08)}
    @keyframes bubbleFloat{50%{transform:translateY(-9px)}}
    .num-bubble.wrong{animation:shake .38s ease}
    .num-bubble.popped{animation:bubblePop .45s ease forwards;pointer-events:none}
    @keyframes bubblePop{45%{transform:scale(1.25)}100%{transform:scale(0);opacity:0}}

    /* ===== Ledakan bintang & skor melayang ===== */
    .burst-star{position:fixed;z-index:92;pointer-events:none;font-size:22px;animation:burst .85s ease-out forwards}
    @keyframes burst{to{transform:translate(var(--bx),var(--by)) scale(.3) rotate(220deg);opacity:0}}
    .score-float{position:fixed;z-index:95;pointer-events:none;font-weight:900;font-size:24px;color:#f59e0b;text-shadow:0 2px 0 #fff,0 4px 10px rgba(0,0,0,.12);animation:scoreRise 1.05s ease-out forwards}
    @keyframes scoreRise{to{transform:translateY(-52px) scale(1.15);opacity:0}}

    /* ============ MASKOT: CERI SI PENSIL ============ */
    .mascot{display:inline-block;animation:mascotBounce 2.8s ease-in-out infinite;transform-origin:center bottom}
    @keyframes mascotBounce{0%,100%{transform:translateY(0) scale(1,1) rotate(0deg)}25%{transform:translateY(0) scale(1.02,.98) rotate(-1deg)}55%{transform:translateY(-8px) scale(.99,1.02) rotate(1.5deg)}80%{transform:translateY(0) scale(1.01,.99) rotate(.5deg)}}
    .mascot .eye{transform-origin:center;animation:blink 4.2s ease-in-out infinite}
    .mascot .eye-look{animation:eyeLook 7.5s ease-in-out infinite}
    @keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
    .mascot .arm-l,.mascot .arm-r{transform-origin:top center}
    /* Idle: lengan mengayun halus (otomatis ditimpa saat melambai/bersorak) */
    .mascot .arm-l{animation:ceriArmL 3.1s ease-in-out infinite}
    .mascot .arm-r{animation:ceriArmR 3.4s ease-in-out infinite}
    @keyframes ceriArmL{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}
    @keyframes ceriArmR{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-5deg)}}
    .mascot.wave .arm-r{animation:waveArm 1s ease-in-out infinite}
    @keyframes waveArm{50%{transform:rotate(-55deg)}}
    .mascot.happy{animation:mascotJump .7s cubic-bezier(.28,1.6,.4,1) 2}
    @keyframes mascotJump{40%{transform:translateY(-26px) rotate(-5deg)}70%{transform:translateY(0) scale(1.06,.92)}}
    .mascot.happy .arm-l{animation:cheerL .7s ease 2}
    .mascot.happy .arm-r{animation:cheerR .7s ease 2}
    @keyframes cheerL{50%{transform:rotate(60deg)}}
    @keyframes cheerR{50%{transform:rotate(-60deg)}}
    .mascot.sad{animation:mascotTilt 1s ease 1}
    @keyframes mascotTilt{50%{transform:rotate(-7deg) translateY(3px)}}
    .mascot .mouth-open{opacity:0}
    .mascot.talking .mouth-open{opacity:1;animation:mouthTalk .28s steps(2) infinite}
    .mascot.talking .mouth-smile{opacity:0}
    @keyframes mouthTalk{50%{transform:scaleY(.35)}}

    /* Mini maskot yang menemani saat bermain */
    #miniMascot{position:fixed;left:14px;bottom:10px;z-index:60;display:none;pointer-events:none}
    #miniMascot.visible{display:block}
    .speech-bubble{position:absolute;left:78px;bottom:70px;min-width:170px;max-width:250px;padding:10px 14px;border:3px solid #fff;border-radius:18px 18px 18px 4px;background:#fffdf3;box-shadow:0 10px 25px rgba(76,91,125,.2);font-weight:800;font-size:14px;color:#4f4a9b;opacity:0;transform:translateY(8px) scale(.9);transition:.3s ease;transform-origin:bottom left}
    .speech-bubble.show{opacity:1;transform:none}

    /* Overlay doa / pengantar */
    #introOverlay{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:20px;background:rgba(79,74,155,.45);backdrop-filter:blur(6px)}
    #introOverlay.visible{display:grid}
    .intro-card{position:relative;width:100%;max-width:430px;border:4px solid #fff;border-radius:34px;background:linear-gradient(160deg,#fffdf3,#f0f6ff);box-shadow:0 30px 70px rgba(40,35,90,.35);padding:30px 26px;text-align:center;animation:screenIn .45s cubic-bezier(.22,1,.36,1) both}
    /* Tombol tutup (X) di pojok overlay — jalan keluar selain tombol utama */
    /* 48px (bukan 40px): target sentuh anak butuh ruang lebih lega dari standar
       dewasa (min. 44px) karena motorik halus mereka belum sepresisi orang dewasa. */
    .overlay-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:48px;height:48px;border:3px solid #fff;border-radius:50%;background:#fff;color:#8a93ad;box-shadow:0 5px 0 rgba(51,65,85,.12);cursor:pointer;transition:.15s ease}
    .overlay-close:hover{transform:rotate(90deg) scale(1.06);color:#ef6671}
    .overlay-close:active{transform:rotate(90deg) scale(.94)}
    .overlay-close .ui-ico{width:20px;height:20px}

    /* Rak stiker & animasi stiker terbang */
    .sticker-shelf{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-height:230px;overflow-y:auto}
    .sticker-chip{display:grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border:3px solid #fff;border-radius:15px;background:#fff7d6;font-weight:900;font-size:19px;color:#7a5c12;box-shadow:0 5px 0 rgba(51,65,85,.12);animation:pop .5s ease}
    .sticker-chip.locked{background:rgba(120,130,160,.14);color:#9aa3bd;border-color:rgba(255,255,255,.6);box-shadow:none;animation:none}
    .fly-sticker{position:fixed;z-index:90;display:grid;place-items:center;width:52px;height:52px;border:3px solid #fff;border-radius:16px;background:#ffe49b;font-weight:900;font-size:24px;color:#6b4e0e;box-shadow:0 8px 20px rgba(51,65,85,.25);pointer-events:none}
    #stickerBadge{position:relative}
    #stickerBadge.pulse,#scoreChip.pulse{animation:pop .5s ease}

    /* ===== Chip beruntun (streak): membangun antisipasi menuju bonus ===== */
    /* display:none (bukan cuma opacity:0) saat tersembunyi -- versi lama pakai
       opacity/transform saja sehingga kotak kosongnya tetap memakan ruang di
       baris header (bug: terlihat ada celah kosong padahal tidak sedang main). */
    .streak-chip{display:none;align-items:center;gap:4px;border-radius:16px;border:2px solid #fff;
      padding:8px 12px;font-weight:900;box-shadow:0 4px 0 rgba(180,70,20,.25);color:#fff;
      background:linear-gradient(135deg,#ffb648,#ff8a3d)}
    .streak-chip.show{display:inline-flex}
    .streak-chip.pop{animation:streakPop .42s cubic-bezier(.3,1.7,.4,1)}
    @keyframes streakPop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-6deg)}70%{transform:scale(.95) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
    .streak-chip .streak-flame{font-size:16px;display:inline-block;animation:flameFlicker 1.1s ease-in-out infinite}
    @keyframes flameFlicker{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12) rotate(3deg)}}
    /* Tingkat 2 (streak >= 6): lebih terang & besar */
    .streak-chip.tier2{background:linear-gradient(135deg,#ff8a3d,#ff5f5f);box-shadow:0 5px 0 rgba(180,40,20,.3)}
    .streak-chip.tier2 .streak-flame{font-size:18px}
    /* Tingkat 3 (streak >= 9): paling meriah */
    .streak-chip.tier3{background:linear-gradient(135deg,#ff5f5f,#c65fff);box-shadow:0 6px 0 rgba(120,20,150,.3)}
    .streak-chip.tier3 .streak-flame{font-size:20px;animation-duration:.7s}
    /* Padam saat beruntun putus (jawaban salah) */
    .streak-chip.snuff{animation:streakSnuff .5s ease both}
    @keyframes streakSnuff{0%{transform:scale(1);opacity:1;filter:grayscale(0)}50%{transform:scale(.85);filter:grayscale(.6)}100%{transform:scale(.4);opacity:0;filter:grayscale(1)}}

    /* Chip Pengaturan: dulu putih polos (bg-white) sehingga tenggelam di
       sebelah chip skor/tas yang berwarna -- kini diberi tona ungu lembut
       senada warna brand supaya bobot visualnya setara. Warna teks juga
       mengatur warna ikon gear lewat currentColor (svg tak lagi override sendiri). */
    .settings-btn{background:#eceafd;color:#5b4fcf}
    [data-theme="dark"] .settings-btn{background:#332e5c;color:#c9c3ff}

    .stars-live{font-size:17px;letter-spacing:1px}

    /* ===== Komponen seragam antar layar game ===== */
    .ui-ico{width:1.35em;height:1.35em;flex:none;vertical-align:-.28em}
    .ui-ico.big{width:1.6em;height:1.6em}
    .icon-btn{display:grid;place-items:center;width:50px;height:50px;border:3px solid #fff;border-radius:18px;background:#fff;color:#5b6b8c;box-shadow:0 6px 0 rgba(51,65,85,.14);transition:.15s ease;cursor:pointer}
    .icon-btn .ui-ico{width:24px;height:24px}
    .icon-btn:hover{transform:translateY(-2px)}
    .icon-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(51,65,85,.14)}
    .game-chip{display:inline-flex;align-items:center;gap:8px;border:3px solid #fff;border-radius:999px;background:#fff;padding:8px 14px;font-weight:800;font-size:14px;color:#5b6b8c;box-shadow:0 5px 0 rgba(51,65,85,.08)}
    .listen-btn{display:inline-flex;align-items:center;gap:8px;border:3px solid #fff;border-radius:999px;background:#fff3c4;color:#8a6a12;padding:9px 18px;font-weight:800;font-size:15px;box-shadow:0 5px 0 rgba(180,140,20,.2);cursor:pointer;transition:.15s ease}
    .listen-btn:hover{transform:translateY(-2px)}
    .listen-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(180,140,20,.2)}
    .listen-btn .ui-ico{width:21px;height:21px}
    .listen-btn.speaking{animation:listenPulse .9s ease-in-out infinite}
    @keyframes listenPulse{50%{background:#ffe49b;transform:scale(1.04)}}
    .game-chip .chip-ico{font-size:18px}
    .attention{animation:bounceHint 1.1s ease-in-out infinite}
    @keyframes bounceHint{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
    .screen-enter .game-card{opacity:0;animation:cardIn .55s cubic-bezier(.3,1.4,.4,1) forwards}
    .screen-enter .game-card:nth-child(2){animation-delay:.07s}
    .screen-enter .game-card:nth-child(3){animation-delay:.14s}
    .screen-enter .game-card:nth-child(4){animation-delay:.21s}
    .screen-enter .game-card:nth-child(5){animation-delay:.28s}
    .screen-enter .game-card:nth-child(6){animation-delay:.35s}
    @keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1}}

    /* ===== Dekorasi latar tambahan ===== */
    .rainbow{position:absolute;left:3%;bottom:130px;width:184px;height:auto;opacity:.55}
    .flower{position:absolute;bottom:18px;width:40px;height:auto;transform-origin:bottom center;animation:sway 4s ease-in-out infinite}
    .flower.fl1{left:7%}
    .flower.fl2{left:24%;animation-delay:-2s;width:32px}
    .flower.fl3{right:9%;animation-delay:-1s}
    .flower.fl4{right:27%;animation-delay:-3s;width:32px}
    @keyframes sway{50%{transform:rotate(10deg)}}
    .sparkle{position:absolute;width:26px;height:auto;opacity:0;animation:twinkle 3.6s ease-in-out infinite}
    .sparkle.sp1{left:20%;top:16%}
    .sparkle.sp2{right:28%;top:9%;animation-delay:-1.2s}
    .sparkle.sp3{left:44%;top:24%;animation-delay:-2.4s}
    @keyframes twinkle{0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}50%{opacity:.95;transform:scale(1.15) rotate(25deg)}}

    /* ===== Bintang finish muncul satu per satu ===== */
    .finish-star{display:inline-block;margin:0 5px;font-size:46px;opacity:0;transform:scale(.2)}
    .finish-star.on{animation:starPop .6s cubic-bezier(.3,1.8,.4,1) forwards}
    .finish-star.off{opacity:.22;transform:none;filter:grayscale(1)}
    @keyframes starPop{60%{transform:scale(1.35) rotate(12deg)}100%{opacity:1;transform:scale(1)}}

    /* ===== Judul pelangi bergerak ===== */
    .title-rainbow{background:linear-gradient(90deg,#7771da,#ec6aa0,#f2a516,#45b98b,#55add8,#7771da);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbowShift 7s linear infinite}
    @keyframes rainbowShift{to{background-position:300% 0}}
    .confetti.emoji{width:auto;height:auto;background:transparent!important;font-size:18px}

    /* ===== Chat: Ngobrol dengan Ceri ===== */
    .chat-fab{position:fixed;right:16px;bottom:16px;z-index:66;display:none;align-items:center;gap:9px;border:3px solid #fff;border-radius:999px;background:linear-gradient(135deg,#7c74e0,#a77ce8);color:#fff;padding:12px 20px;font-weight:900;font-size:15px;box-shadow:0 12px 26px rgba(119,113,218,.42);cursor:pointer;animation:fabPulse 2.6s ease-in-out infinite}
    .chat-fab.show{display:inline-flex}
    .chat-fab:hover{transform:translateY(-3px)}
    @keyframes fabPulse{50%{transform:scale(1.05)}}
    .chat-ava{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;border:3px solid #fff;background:linear-gradient(160deg,#fff,#eef1ff);box-shadow:0 5px 14px rgba(76,91,125,.15);overflow:hidden}
    .chat-log{display:flex;flex-direction:column;gap:12px;padding:8px 4px;min-height:300px;max-height:52vh;overflow-y:auto}
    .msg{display:flex;align-items:flex-end;gap:8px;max-width:86%}
    .msg.pop{animation:msgIn .38s cubic-bezier(.3,1.5,.4,1) both}
    @keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.88)}}
    .msg.ceri{align-self:flex-start}
    .msg.me{align-self:flex-end;flex-direction:row-reverse}
    .msg .m-ava{width:38px;height:38px;flex:none;border-radius:50%;border:2px solid #fff;background:#fff;overflow:hidden;box-shadow:0 3px 8px rgba(76,91,125,.15)}
    .bubble-c{padding:11px 15px;border-radius:20px 20px 20px 6px;background:#fff;border:2px solid #edf0fb;box-shadow:0 5px 14px rgba(76,91,125,.1);font-weight:700;color:#3c4963;font-size:15.5px;line-height:1.35}
    .bubble-m{padding:11px 15px;border-radius:20px 20px 6px 20px;background:linear-gradient(135deg,#7c74e0,#9b7ce8);color:#fff;font-weight:800;font-size:15.5px;box-shadow:0 6px 16px rgba(119,113,218,.32)}
    .typing{display:inline-flex;gap:5px;padding:15px 16px;background:#fff;border:2px solid #edf0fb;border-radius:20px 20px 20px 6px}
    .typing i{width:8px;height:8px;border-radius:50%;background:#b9c2d8;animation:typingDot 1s infinite}
    .typing i:nth-child(2){animation-delay:.16s}
    .typing i:nth-child(3){animation-delay:.32s}
    @keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-7px);opacity:1}}
    .quick-replies{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;min-height:52px}
    .qr{border:3px solid #fff;border-radius:999px;background:#fff;padding:11px 17px;font-weight:800;font-size:15px;color:#4f4a9b;box-shadow:0 5px 0 rgba(51,65,85,.12);cursor:pointer;transition:.15s ease;animation:msgIn .3s ease both}
    .qr:hover{transform:translateY(-2px)}
    .qr:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(51,65,85,.12)}

    /* ===== Panduan (tutorial cara main) ===== */
    #guideOverlay{position:fixed;inset:0;z-index:82;display:none;place-items:center;padding:20px;background:rgba(79,74,155,.45);backdrop-filter:blur(6px)}
    #guideOverlay.visible{display:grid}
    .guide-card{position:relative;width:100%;max-width:420px;border:4px solid #fff;border-radius:34px;background:linear-gradient(160deg,#fffdf3,#f0f6ff);box-shadow:0 30px 70px rgba(40,35,90,.35);padding:28px 24px;text-align:center;animation:screenIn .45s cubic-bezier(.22,1,.36,1) both}
    .guide-demo{display:grid;place-items:center;height:96px;font-size:52px}
    .guide-demo .g-hand{display:inline-block;animation:guideDragDemo 1.8s ease-in-out infinite}
    @keyframes guideDragDemo{0%,100%{transform:translate(-26px,10px) rotate(-8deg)}50%{transform:translate(26px,-10px) rotate(8deg)}}
    .guide-demo .g-tap{display:inline-block;animation:guideTapDemo 1.1s ease-in-out infinite}
    @keyframes guideTapDemo{0%,100%{transform:scale(1)}30%{transform:scale(.82)}45%{transform:scale(1.05)}}
    .guide-demo .g-count{display:inline-flex;gap:6px}
    .guide-demo .g-count span{animation:guideCountDemo 1.5s ease-in-out infinite}
    .guide-demo .g-count span:nth-child(2){animation-delay:.2s}
    .guide-demo .g-count span:nth-child(3){animation-delay:.4s}
    @keyframes guideCountDemo{0%,60%,100%{transform:scale(1);opacity:.55}20%{transform:scale(1.35);opacity:1}}
    .help-btn{display:inline-flex;align-items:center;gap:7px;border:3px solid #fff;border-radius:16px;background:#fff3c4;color:#8a6a12;padding:9px 14px;font-weight:800;font-size:14px;box-shadow:0 5px 0 rgba(180,140,20,.18);cursor:pointer;transition:.15s ease}
    .help-btn:hover{transform:translateY(-2px)}
    .help-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(180,140,20,.18)}

    /* ===== Menu Pengaturan (dropdown, merapikan navbar) ===== */
    .settings-wrap{position:relative}
    .settings-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:75;display:none;flex-direction:column;gap:6px;min-width:226px;padding:12px;border:3px solid var(--border-glow);border-radius:22px;background:var(--surface);box-shadow:0 22px 48px var(--card-shadow);transform-origin:top right;animation:menuPop .22s cubic-bezier(.3,1.4,.4,1)}
    .settings-menu.open{display:flex}
    @keyframes menuPop{from{opacity:0;transform:translateY(-8px) scale(.95)}}
    .settings-menu .menu-item{display:flex;align-items:center;gap:11px;width:100%;justify-content:flex-start;text-align:left;border-radius:15px;background:var(--surface-soft);border:2px solid transparent;padding:12px 14px;font-weight:800;font-size:15px;color:var(--ink-body);cursor:pointer;transition:.13s ease}
    .settings-menu .menu-item:hover{background:#eef1fb;transform:translateX(2px)}
    .settings-menu .menu-item:active{transform:scale(.98)}
    .settings-menu .menu-item .ui-ico{width:22px;height:22px;color:#5b6b8c;flex:none}
    .settings-menu .menu-item .mi-emoji{font-size:20px;line-height:1;flex:none}
    .settings-menu .menu-item.mi-active{background:#fff0c2;color:#8a6a12;border-color:#ffd16b}
    .settings-menu .menu-item.mi-active .ui-ico{color:#c9862a}
    [data-theme="dark"] .settings-menu .menu-item{background:#2c3559;color:var(--ink-body)}
    [data-theme="dark"] .settings-menu .menu-item:hover{background:#343e69}
    [data-theme="dark"] .settings-menu .menu-item .ui-ico{color:var(--ink-faint)}
    [data-theme="dark"] .settings-menu .menu-item.mi-active{background:#4a3f1e;color:#ffd98a}

    /* ===== Drag & drop: ubin susun/pasang (dragmatch, benda, urut) ===== */
    .drag-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
    .draggable-tile{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
    .draggable-tile:active{cursor:grabbing}
    .draggable-tile.picked{outline:4px solid #ffd16b;outline-offset:3px;animation:pickedBounce .5s ease-in-out infinite alternate;box-shadow:0 0 0 8px rgba(255,209,107,.35)}
    @keyframes pickedBounce{to{transform:translateY(-6px)}}
    .draggable-tile.drag-source-hidden{opacity:.28;filter:grayscale(.4)}
    .draggable-tile.placed{opacity:0;transform:scale(.5);pointer-events:none}
    .drag-ghost{opacity:.96;box-shadow:0 18px 34px rgba(51,65,85,.32)!important;transition:none!important}
    .drop-target{transition:.18s ease}
    .drop-target.drag-over,.drop-target.picked-target{transform:scale(1.06);box-shadow:0 0 0 8px rgba(99,202,165,.4)!important;border-color:#63caa5!important}
    .drop-card{display:grid;place-items:center;min-height:170px;border:4px dashed #b9c6dd;border-radius:28px;background:rgba(255,255,255,.6);font-size:64px;transition:.18s ease}
    .drop-card.filled{border-style:solid;border-color:#45b98b;background:#d7f6e8}
    /* Bentuk geometris SVG (game Geometri) — pengganti emoji agar konsisten & premium */
    .shape-svg{width:42px;height:42px;flex:none;filter:drop-shadow(0 4px 3px rgba(51,65,85,.22))}
    .drop-card .shape-svg{width:98px;height:98px}
    /* Objek berhitung SVG (buah/benda) — pengganti emoji di game berhitung */
    .obj-svg{width:46px;height:46px;flex:none;filter:drop-shadow(0 3px 2px rgba(51,65,85,.2))}
    .count-chip .obj-svg{width:48px;height:48px}
    .quiz-visual .obj-svg{width:50px;height:50px}
    .quiz-option .obj-svg{width:34px;height:34px}
    .quiz-word .word-blank.drop-target{cursor:pointer}
    .quiz-word .word-blank.drag-over,.quiz-word .word-blank.picked-target{transform:scale(1.15);box-shadow:0 0 0 6px rgba(99,202,165,.4)}
    .drag-hint-label{display:flex;justify-content:center;margin-top:6px}
    .drag-hint-label span{border-radius:999px;background:#eef1fb;color:#5b5aa8;font-weight:800;font-size:12.5px;padding:5px 12px}

    /* ===== Hitung interaktif (count engine) ===== */
    .count-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;min-height:150px;padding:18px;border:4px solid #fff;border-radius:28px;background:radial-gradient(circle,#fff,#f1f5ff);box-shadow:inset 0 0 40px rgba(89,91,160,.07)}
    .count-op{font-size:44px;color:#8a93ad;flex:none}
    .count-chip{position:relative;display:grid;place-items:center;width:64px;height:64px;font-size:38px;border-radius:20px;cursor:pointer;transition:.15s ease;animation:popIn .4s cubic-bezier(.3,1.6,.4,1) both}
    .count-chip:hover{transform:translateY(-3px)}
    .count-chip.counted{background:#fff3c4;box-shadow:0 0 0 4px #ffd16b inset}
    .count-chip.removed{opacity:.25;filter:grayscale(1)}
    .count-chip .count-badge{position:absolute;top:-11px;right:-9px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#45b98b;color:#fff;font-size:14px;font-weight:900;border:2px solid #fff;box-shadow:0 3px 6px rgba(0,0,0,.18);animation:pop .4s ease}
    .count-total{margin-top:10px;text-align:center;font-weight:900;font-size:20px;color:#4f4a9b}
    .count-answer-hint{text-align:center;font-weight:800;font-size:14px;color:#8a93ad;margin-top:4px}

    /* ===== Mode Gelap =====
       Kartu kategori berwarna di menu utama SENGAJA dibiarkan seperti semula —
       kartu pastel dengan tinta gelapnya sendiri tetap kontras & enak dilihat
       di atas latar gelap (seperti stiker berwarna), tidak perlu diubah.
       Yang diubah di sini hanya permukaan netral: latar layar, kartu game,
       tombol putih, dan teks judul/isi generik. */
    :root[data-theme="dark"]{ --ink:#c3cbe8 }
    [data-theme="dark"] .intro-card,[data-theme="dark"] .guide-card{background:var(--surface-warm)}
    [data-theme="dark"] .speech-bubble{background:var(--surface-warm);color:var(--ink-strong)}
    [data-theme="dark"] .bg-white,[data-theme="dark"] .bg-white\/90,[data-theme="dark"] .bg-white\/85{
      background:var(--surface)!important;
    }
    [data-theme="dark"] .border-white{border-color:var(--border-glow)!important}
    [data-theme="dark"] .text-indigo-900,[data-theme="dark"] #quizGameName,[data-theme="dark"] #traceGameName{color:var(--ink-strong)!important}
    [data-theme="dark"] .text-slate-400{color:#7d87ad!important}
    [data-theme="dark"] .text-slate-500,[data-theme="dark"] .text-slate-600,[data-theme="dark"] .text-slate-700{color:var(--ink-body)!important}
    [data-theme="dark"] .icon-btn,[data-theme="dark"] .game-chip,[data-theme="dark"] .overlay-close{background:var(--surface);color:var(--ink-body);border-color:var(--border-glow)}
    [data-theme="dark"] .mark-caption{background:var(--surface)}
    [data-theme="dark"] .listen-btn,[data-theme="dark"] .help-btn{background:#3a3350;color:#ffd98a;border-color:var(--border-glow)}
    [data-theme="dark"] .answer-option,[data-theme="dark"] .quiz-option,[data-theme="dark"] .code-chip{
      background:var(--surface)!important;color:var(--ink-body);border-color:var(--border-glow)!important;
    }
    [data-theme="dark"] .quiz-option{color:var(--ink-body)}
    [data-theme="dark"] .quiz-visual,[data-theme="dark"] .count-row,[data-theme="dark"] .picture-stage{
      background:radial-gradient(circle,var(--surface),#1a2036);border-color:var(--border-glow)
    }
    [data-theme="dark"] .canvas-wrap{background:linear-gradient(rgba(121,158,255,.09) 2px,transparent 2px),linear-gradient(90deg,rgba(121,158,255,.09) 2px,transparent 2px),var(--surface);border-color:var(--border-glow)}
    [data-theme="dark"] .quiz-word .word-blank{background:#3a3350;border-bottom-color:#ffb03b;color:#ffd98a}
    [data-theme="dark"] .order-slot{background:rgba(255,255,255,.08);border-color:#4a5384;color:#6f7ab0}
    [data-theme="dark"] .drop-card{background:rgba(255,255,255,.06);border-color:#4a5384}
    /* Di mode gelap, bayangan hitam tak terlihat di atas kartu gelap — buat
       siluet pucat bercahaya, seperti bayangan tersorot cahaya bulan */
    [data-theme="dark"] .silhouette{filter:brightness(0) invert(.78)}
    [data-theme="dark"] .silhouette.revealed{filter:none}
    [data-theme="dark"] .chat-ava,[data-theme="dark"] .msg .m-ava,[data-theme="dark"] .bubble-c,[data-theme="dark"] .typing,[data-theme="dark"] .qr{
      background:var(--surface)!important;color:var(--ink-body);border-color:var(--border-glow)
    }
    [data-theme="dark"] .sticker-chip{background:#3a3350;color:#ffd98a;border-color:var(--border-glow)}
    /* .sticker-chip.locked punya spesifisitas SAMA dengan aturan di atas, jadi
       tanpa override eksplisit ini urutan sumber membuat stiker terkunci ikut
       memakai warna terang milik stiker yang sudah didapat — keduanya jadi tak
       terbedakan ("nyaru") di Mode Gelap. */
    [data-theme="dark"] .sticker-chip.locked{background:rgba(255,255,255,.07);color:var(--ink-faint);border-color:var(--border-glow)}
    [data-theme="dark"] .progress-track{background:var(--surface);border-color:var(--border-glow)}
    [data-theme="dark"] .game-card:after{background:rgba(255,255,255,.1)}
    [data-theme="dark"] .num-bubble,[data-theme="dark"] .count-chip.counted{border-color:var(--border-glow)}
    [data-theme="dark"] .stars-live,[data-theme="dark"] #countHintLine,[data-theme="dark"] .count-answer-hint{color:var(--ink-faint)}
    [data-theme="dark"] ::selection{background:#4a5384;color:#fff}
    /* Peredupan lembut untuk pemandangan malam (dipilih via data-scene, bukan Mode Gelap) */
    [data-scene="malam"] .cloud{opacity:.4;filter:brightness(.62)}
    [data-scene="malam"] .balloon,[data-scene="malam"] .flower,[data-scene="malam"] .tree,[data-scene="malam"] .bush,[data-scene="malam"] .school,[data-scene="malam"] .grass{filter:brightness(.68) saturate(.85)}

    /* ===== Profil anak: chip header + layar pemilih "Siapa Main?" ===== */
    #profileChip{display:none;align-items:center;gap:8px;border:2px solid #fff;border-radius:18px;background:var(--surface);padding:6px 12px 6px 8px;font-weight:800;color:var(--ink-body);box-shadow:0 5px 0 rgba(51,65,85,.13);cursor:pointer;transition:.16s ease}
    #profileChip.show{display:inline-flex}
    #profileChip:hover{transform:translateY(-2px)}
    #profileChip .p-ava{font-size:22px;line-height:1}
    #profileChip .p-name{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .who-card{display:flex;flex-direction:column;align-items:center;gap:10px;width:138px;padding:20px 12px;border:4px solid #fff;border-radius:28px;background:var(--surface);box-shadow:0 9px 0 rgba(51,65,85,.13);cursor:pointer;transition:.16s ease}
    .who-card:hover{transform:translateY(-4px)}
    .who-card .who-ava{font-size:54px;line-height:1}
    .who-card .who-name{font-weight:900;color:var(--ink-strong);font-size:17px;max-width:114px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .who-card.who-add{border-style:dashed;border-color:#b9c6dd;background:transparent;color:var(--ink-faint)}
    .who-card.who-add .who-name{color:var(--ink-faint)}
    .who-avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:430px;margin:20px auto 0}
    .who-avatar{font-size:32px;padding:8px 0;border:3px solid transparent;border-radius:18px;background:var(--surface);box-shadow:0 3px 0 rgba(51,65,85,.1);cursor:pointer;transition:.14s ease}
    .who-avatar.sel{border-color:#45b98b;background:#d7f6e8;transform:scale(1.1)}
    .who-name-input{width:min(100%,340px);margin:8px auto 0;display:block;text-align:center;font-family:inherit;font-weight:800;font-size:20px;color:var(--ink-strong);border:3px solid #cdd7ea;border-radius:18px;padding:12px 16px;background:var(--surface)}
    .who-name-input:focus{outline:none;border-color:#7771da}
    /* #whoScreen dipusatkan Flexbox HANYA pada ruang di bawah header, sehingga
       titik tengahnya bergeser ke bawah sebesar setengah tinggi header —
       makin terlihat di sini karena kartunya kecil (cuma 2-3 avatar) dan
       banyak ruang kosong di sekitarnya. --header-h diukur nyata lewat JS
       (syncHeaderOffset()), lalu kartu digeser naik separuhnya supaya benar-
       benar di tengah LAYAR, bukan cuma di tengah sisa ruang di bawah header.
       clamp() menjaga agar geseran tidak berlebihan di layar pendek/mobile. */
    #whoScreen > main{margin-top:clamp(-70px, calc(var(--header-h, 0px) * -0.5), 0px)}

    /* ===== Gamifikasi: banner harian (streak + tujuan) & lencana ===== */
    .daily-banner{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 20px;justify-content:center}
    @media(min-width:768px){.daily-banner{justify-content:flex-start}}
    .daily-pill{display:inline-flex;align-items:center;gap:6px;border-radius:16px;background:var(--surface);border:2px solid #fff;box-shadow:0 4px 0 rgba(51,65,85,.1);padding:8px 14px;font-weight:800;color:var(--ink-body);font-size:14px}
    .daily-pill b{color:#f2760c}
    .badge-shelf{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
    .badge-chip{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff6da;border:2px solid #fff;box-shadow:0 3px 0 rgba(51,65,85,.1);font-size:24px;cursor:default}
    .badge-chip.locked{background:rgba(120,130,160,.14);filter:grayscale(.35);opacity:.55;font-size:18px}
    .finish-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
    .finish-badge{display:inline-flex;align-items:center;gap:6px;border-radius:16px;background:#fff3c9;color:#7a5410;font-weight:900;padding:8px 16px;font-size:15px;box-shadow:0 6px 16px rgba(242,165,22,.25)}
    [data-theme="dark"] .badge-chip{background:#3a3350}
    /* Sama seperti sticker-chip.locked di atas: tanpa ini, lencana terkunci
       memakai bg gelap yang sama dengan lencana yang sudah didapat, membuat
       ikon 🔒 (yang sudah diredupkan opacity+grayscale) nyaris tak terlihat. */
    [data-theme="dark"] .badge-chip.locked{background:rgba(255,255,255,.06);opacity:.7}
    [data-theme="dark"] .finish-badge{background:#3a3350;color:#ffd98a}
    .finish-practice{margin-top:16px;padding:14px 16px;border-radius:20px;background:#fff7e6;border:2px solid #ffe1a8}
    .practice-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
    .practice-chip{display:inline-flex;align-items:center;border-radius:12px;background:#fff;border:2px solid #ffd98a;color:#8a5a10;font-weight:800;font-size:13px;padding:5px 10px}
    [data-theme="dark"] .finish-practice{background:#332d1e;border-color:#5c4a24}
    [data-theme="dark"] .practice-chip{background:#3a3350;color:#ffd98a;border-color:#5c4a24}

    /* ===== Sub-menu: progres kategori, penanda selesai & sorotan berikutnya ===== */
    .sub-progress-track{height:14px;border-radius:999px;background:var(--surface);border:2px solid #fff;overflow:hidden;box-shadow:inset 0 2px 4px rgba(51,65,85,.12)}
    .sub-progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#45b98b,#82c9ff);transition:width .5s cubic-bezier(.22,1,.36,1)}
    .game-card{position:relative}
    .game-card.done{opacity:.9}
    .done-badge{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#45b98b;color:#fff;font-weight:900;font-size:20px;box-shadow:0 4px 0 rgba(41,150,105,.4)}
    .game-card.suggested{outline:4px solid #45b98b;outline-offset:2px;box-shadow:0 0 0 6px rgba(69,185,139,.18)}
    .next-tag{display:inline-block;margin-top:10px;border-radius:12px;background:#45b98b;color:#fff;font-weight:900;font-size:12px;padding:4px 10px;box-shadow:0 3px 0 rgba(41,150,105,.35)}
    /* Tombol "Lanjutkan" di menu utama */
    .resume-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2px 0 18px}
    .resume-btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:18px;background:linear-gradient(120deg,#7771da,#55add8);color:#fff;font-weight:900;font-size:15px;padding:12px 18px;box-shadow:0 7px 0 rgba(51,65,85,.18);cursor:pointer;transition:.16s ease}
    .resume-btn:hover{transform:translateY(-2px)}
    .resume-btn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(51,65,85,.18)}

    /* ===== Area Orang Tua / Guru: gerbang, panel, istirahat ===== */
    #gateOverlay,#parentOverlay{position:fixed;inset:0;z-index:84;display:none;place-items:center;padding:20px;background:rgba(79,74,155,.5);backdrop-filter:blur(6px);overflow-y:auto}
    #restOverlay{position:fixed;inset:0;z-index:88;display:none;place-items:center;padding:20px;background:rgba(40,35,90,.72);backdrop-filter:blur(8px)}
    /* Pemilih latar: backdrop lebih tipis agar perubahan pemandangan terlihat langsung di belakang. */
    #sceneOverlay{position:fixed;inset:0;z-index:84;display:none;place-items:center;padding:20px;background:rgba(40,35,90,.28);overflow-y:auto}
    #gateOverlay.visible,#parentOverlay.visible,#restOverlay.visible,#sceneOverlay.visible{display:grid}
    /* ===== Pemilih Latar ===== */
    .scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
    .scene-tile{position:relative;border:3px solid transparent;border-radius:18px;padding:0;background:var(--surface);box-shadow:0 5px 0 rgba(51,65,85,.12);cursor:pointer;overflow:hidden;transition:.14s ease}
    .scene-tile:hover{transform:translateY(-2px)}
    .scene-tile:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(51,65,85,.12)}
    .scene-tile.sel{border-color:#45b98b;box-shadow:0 0 0 4px rgba(69,185,139,.22),0 5px 0 rgba(51,65,85,.12)}
    .scene-swatch{height:64px;display:grid;place-items:center;font-size:30px}
    .scene-tile .st-name{display:block;padding:7px 6px;font-size:12.5px;font-weight:900;color:var(--ink-body);text-align:center;background:var(--surface)}
    .scene-tile.locked{cursor:not-allowed}
    .scene-tile.locked .scene-swatch{filter:grayscale(.7) brightness(.9)}
    /* Overlay hanya menutupi area GAMBAR (tinggi swatch), bukan seluruh tile —
       supaya nama latar di bawahnya tetap terbaca jelas. */
    .scene-lock{position:absolute;top:0;left:0;right:0;height:64px;display:grid;place-items:center;gap:4px;background:rgba(28,23,58,.55);color:#fff;font-weight:900}
    .scene-lock .lk-ico{width:26px;height:26px;color:#fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
    .scene-lock .lk-need{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:900;background:rgba(0,0,0,.36);border-radius:11px;padding:2px 8px}
    .scene-lock .lk-bag{width:14px;height:14px;flex:none}
    .inline-bag{width:1.25em;height:1.25em;vertical-align:-.28em}
    .scene-cur{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#45b98b;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900;box-shadow:0 2px 0 rgba(41,150,105,.4)}
    .scene-hint{min-height:20px;margin-top:12px;text-align:center;font-size:13.5px;font-weight:800;color:#c0384a}
    .scene-hint.scene-hint-info{color:var(--ink-faint)}
    [data-theme="dark"] .scene-tile,[data-theme="dark"] .scene-tile .st-name{background:#2c3559;color:var(--ink-body)}
    .parent-card{position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;border:4px solid #fff;border-radius:30px;background:var(--surface);box-shadow:0 30px 70px rgba(40,35,90,.35);padding:26px 22px;text-align:left;animation:screenIn .4s cubic-bezier(.22,1,.36,1) both}
    .parent-section{margin-top:18px;padding-top:16px;border-top:2px solid rgba(120,130,160,.16)}
    .parent-h{font-size:15px;font-weight:900;color:var(--ink-strong);margin-bottom:10px}
    .report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .report-stat{background:var(--surface-soft);border:2px solid rgba(120,130,160,.16);border-radius:14px;padding:10px 12px;font-weight:700;color:var(--ink-faint);font-size:13px}
    .report-stat b{display:block;font-size:19px;color:var(--ink-strong)}
    .report-weak{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
    .report-weak .w-chip{display:inline-flex;align-items:center;gap:4px;background:#fff0f1;color:#b23b4a;border-radius:12px;padding:5px 10px;font-weight:800;font-size:13px}
    .report-weak .w-none{color:#1f9d67;font-weight:800;font-size:13px}
    .setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-weight:800;color:var(--ink-body)}
    .switch{position:relative;width:52px;height:30px;border-radius:999px;background:#c9d2e6;border:none;cursor:pointer;transition:.2s ease;flex:none}
    .switch[aria-checked="true"]{background:#45b98b}
    .switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s ease}
    .switch[aria-checked="true"] .knob{left:25px}
    .time-buttons{display:flex;flex-wrap:wrap;gap:8px}
    .time-btn{border:2px solid #cdd7ea;background:var(--surface);color:var(--ink-body);border-radius:14px;padding:8px 14px;font-weight:800;font-size:14px;cursor:pointer;transition:.14s ease}
    .time-btn.sel{border-color:#7771da;background:#efe9ff;color:#4f4a9b}
    .danger-btn{border:2px solid #f0b3ba;background:#fff0f1;color:#c0384a;border-radius:14px;padding:10px 16px;font-weight:900;font-size:14px;cursor:pointer}
    .danger-btn.danger-strong{background:#ffe1e4;border-color:#ef9aa4}
    .voice-status{margin-top:6px;font-size:12.5px;font-weight:700;line-height:1.5;border-radius:12px;padding:8px 12px}
    .voice-status.ok{color:#1f7d55;background:rgba(69,185,139,.12)}
    .voice-status.warn{color:#9a5a00;background:rgba(242,165,22,.14)}
    [data-theme="dark"] .voice-status.ok{color:#7fe0b6}
    [data-theme="dark"] .voice-status.warn{color:#ffd98a}
    [data-theme="dark"] .report-weak .w-chip{background:#3a2833}
    [data-theme="dark"] .time-btn.sel{background:#332d54;color:#c3b9ff}
    [data-theme="dark"] .danger-btn{background:#3a2833;color:#ffb3bd;border-color:#5c3742}

    @media(max-width:640px){
      .report-grid{grid-template-columns:repeat(2,1fr)}
      .who-card{width:120px;padding:16px 10px}
      .who-card .who-ava{font-size:46px}
      .who-avatar-grid{grid-template-columns:repeat(4,1fr);max-width:300px}
      header .main-button{min-height:44px;padding:8px 12px;font-size:12px;gap:6px}
      header .main-button .ui-ico{width:18px;height:18px}
      #scoreChip,#stickerBadge{padding:6px 10px;font-size:13px}
      .screen{padding:13px}.canvas-wrap{border-radius:24px}.picture-stage{min-height:205px}
      .art-svg{height:175px}.answer-option{min-height:125px}.answer-option .art-svg{height:100px;padding:5px}
      .speech-bubble{left:66px;max-width:190px;font-size:13px}
      .quiz-visual{font-size:44px;min-height:120px}
      .num-bubble{width:66px;height:66px;font-size:28px}
      .order-slot{width:52px;height:52px;font-size:23px}
      .drop-card{min-height:130px;font-size:48px}
      .count-chip{width:52px;height:52px;font-size:30px}
      .count-op{font-size:34px}
    }
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}