:root{
  --cream:#FFF6E5; --cream-2:#FCEBC8; --ink:#2B2118; --ink-2:#6B5A48;
  --red:#F25C54; --red-2:#FFD1CC; --green:#2F7D4F; --green-2:#4FB477; --mint:#DDF4EC;
  --orange:#FF8A3D; --orange-2:#FFD3A8; --sun:#FFC83D;
  --blue:#3A9BC9; --blue-2:#D3EEFA; --purple:#7A5CE0; --purple-2:#ECE6FF; --pink:#F06C9B; --pink-2:#FFE3EC;
  --r:28px; --shadow:0 6px 0 var(--ink);
  --font-d:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-b:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font-b);color:var(--ink);background:var(--cream);font-size:18px;line-height:1.7;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px;border-radius:12px}

/* top bar */
.topbar{position:fixed;inset:12px 12px auto;z-index:50;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;background:rgba(255,246,229,.92);backdrop-filter:blur(10px);border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--font-d);font-size:22px;white-space:nowrap}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--font-d);font-size:18px;text-decoration:none;padding:6px 14px;border-radius:999px;white-space:nowrap;transition:background .2s}
.nav a:hover,.nav a.active{background:var(--sun)}
.sound-toggle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--green-2);color:#fff;border:3px solid var(--ink);flex:none}
.sound-toggle[aria-pressed="false"]{background:#bbb}
.sound-toggle[aria-pressed="false"] .wave{opacity:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-d);font-size:20px;padding:10px 22px;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:0 5px 0 var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn-big{font-size:26px;padding:14px 32px;background:var(--red);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn-sun{background:var(--sun);color:var(--ink);text-shadow:none}
.btn-ghost{background:rgba(255,255,255,.9)}
.btn-round{width:64px;height:64px;padding:0;border-radius:50%;background:var(--sun)}
.btn[disabled]{opacity:.45;pointer-events:none}
.speak.talking{background:var(--green-2);color:#fff}

/* hero */
.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center}
.hero-scene{position:absolute;inset:0;z-index:0}
.layer{position:absolute;will-change:transform;transition:transform .25s ease-out}
.layer img{filter:drop-shadow(0 14px 14px rgba(0,0,0,.18))}
.l-bg{inset:-6%}
.l-bg img{width:100%;height:100%;object-fit:cover;filter:none}
.l-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(255,246,229,.7),rgba(255,246,229,0) 55%),linear-gradient(transparent 72%,var(--cream))}
.hello{cursor:pointer}
.l-kid{right:4%;bottom:2%;width:min(19vw,270px)}
.l-o1{left:7%;top:15%;width:min(11vw,150px)}
.l-o2{right:3%;top:12%;width:min(9vw,130px)}
.l-o3{left:2%;top:48%;width:min(12vw,160px)}
.l-o4{right:27%;bottom:6%;width:min(8vw,110px)}
.l-o5{left:18%;bottom:5%;width:min(6.5vw,90px)}
.l-o6{left:33%;bottom:3%;width:min(8vw,110px)}
.float{animation:float 4.4s ease-in-out infinite}
.float.d2{animation-delay:-1.2s;animation-duration:5s}
.float.d3{animation-delay:-2.4s;animation-duration:4.8s}
.float.d4{animation-delay:-.6s;animation-duration:3.8s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.5deg)}}
.boing{animation:boing .6s cubic-bezier(.3,1.6,.5,1)!important}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.18,.86)}55%{transform:scale(.92,1.12)}80%{transform:scale(1.05,.97)}100%{transform:scale(1)}}

.hero-copy{position:relative;z-index:5;text-align:center;padding:120px 20px 30vh;max-width:820px}
.hero-kicker{display:inline-block;font-family:var(--font-d);font-size:24px;color:var(--red);background:rgba(255,246,229,.92);border:3px solid var(--ink);border-radius:999px;padding:2px 18px;margin-bottom:14px}
.title-3d{font-family:var(--font-d);font-weight:400;font-size:clamp(68px,13vw,156px);line-height:1;color:#FF7A70;letter-spacing:.04em;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
  text-shadow:0 2px 0 #E2453D,0 4px 0 #E2453D,0 6px 0 #C93A33,0 8px 0 #B2312B,0 10px 0 var(--ink),0 18px 24px rgba(0,0,0,.25);
  animation:titleIn 1s cubic-bezier(.2,1.6,.4,1) both;transform-origin:50% 80%}
@keyframes titleIn{from{transform:scale(.4) rotateX(60deg);opacity:0}to{transform:none;opacity:1}}
.hero-sub{font-size:22px;margin:18px auto 24px;max-width:28em;font-weight:600;text-shadow:0 1px 0 #fff,0 0 14px #fff,0 0 6px #fff}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hint{display:inline-block;margin-top:16px;font-size:16px;font-weight:700;background:rgba(255,246,229,.92);border-radius:999px;padding:4px 16px}
.say-bubble{position:fixed;z-index:60;pointer-events:none;font-family:var(--font-d);font-size:20px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:6px 14px;box-shadow:0 4px 0 var(--ink);max-width:260px;transform:translate(-50%,-110%);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}

/* sections */
.sec{position:relative;padding:clamp(64px,9vw,120px) clamp(16px,4vw,48px)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 40px}
.sec-head h2{font-family:var(--font-d);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1.15;margin:12px 0 10px}
.sec-head p{font-size:19px;color:var(--ink-2)}
.chip{display:inline-block;font-family:var(--font-d);font-size:18px;padding:4px 16px;border-radius:999px;background:var(--green-2);color:#fff;border:3px solid var(--ink)}
.chip-red{background:var(--red)}.chip-orange{background:var(--orange)}.chip-blue{background:var(--blue)}.chip-purple{background:var(--purple)}.chip-pink{background:var(--pink)}

/* friend cards */
.sec-friends{background:linear-gradient(var(--cream),var(--red-2) 60%,var(--pink-2))}
.cards{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px}
.card{perspective:1100px;height:440px;transition:opacity .3s,transform .3s}
.card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.card.flip .card-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 8px 0 var(--ink);overflow:hidden;cursor:pointer}
.front{display:flex;flex-direction:column;background:var(--c,#FFD3A8)}
.front .pic{flex:1;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.8),rgba(255,255,255,0) 65%);position:relative}
.front .pic img{max-height:240px;object-fit:contain;transition:transform .3s;filter:drop-shadow(0 12px 10px rgba(0,0,0,.2))}
.card:hover .front .pic img{transform:scale(1.07) rotate(-3deg)}
.front .big{position:absolute;left:12px;top:12px;font-family:var(--font-d);font-size:15px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:2px 10px;line-height:1.4;max-width:70%}
.front .big b{color:var(--red);font-size:20px}
.front .nm{background:#fff;border-top:4px solid var(--ink);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.front .nm b{font-family:var(--font-d);font-weight:400;font-size:32px;line-height:1.1}
.tag{font-size:14px;font-weight:700;padding:3px 10px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap;background:var(--sun)}
.back{transform:rotateY(180deg);background:#fff;padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px}
.back h3{font-family:var(--font-d);font-weight:400;font-size:28px;line-height:1.2;display:flex;align-items:center;gap:8px}
.back h3 img{width:40px;height:40px;object-fit:contain}
.facts{display:grid;gap:7px;font-size:15.5px;line-height:1.5}
.facts div{display:grid;grid-template-columns:64px 1fr;gap:8px}
.facts dt{font-weight:800;color:var(--red)}
.facts .habit dt{color:var(--green)}
.back-actions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.mini{font-size:15px;font-weight:800;padding:6px 12px;border-radius:999px;border:3px solid var(--ink);background:var(--sun);display:inline-flex;align-items:center;gap:6px}
.mini.fx{background:var(--red-2)}

/* journey */
.sec-journey{background:linear-gradient(var(--pink-2),#FFE9D6)}
.journey{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.j-stage{position:relative;border:4px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 0 var(--ink);background:#FFD9C7;min-height:560px;display:grid;place-items:center}
.j-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.j-body{position:relative;height:530px;width:auto;max-width:100%;overflow:visible}
.part{transition:opacity .5s,filter .5s;opacity:.5}
.part.seen{opacity:.75}
.part.on{opacity:1;filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 4px #FFC83D)}
.j-token{transition:transform .2s}
.tok-poop{opacity:0}
.j-token.poop .tok-rice{opacity:0}.j-token.poop .tok-poop{opacity:1}
.j-token.mush .tok-rice{filter:saturate(.6) hue-rotate(-15deg)}
.sparks circle{fill:#FFC83D;stroke:#2B2118;stroke-width:1.5}
.j-card{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--ink);padding:26px;display:flex;flex-direction:column;gap:10px}
.j-card.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.j-card .n{font-family:var(--font-d);font-size:16px;background:var(--orange);color:#fff;border-radius:999px;padding:2px 12px;align-self:flex-start;border:2px solid var(--ink)}
.j-card h3{font-family:var(--font-d);font-weight:400;font-size:clamp(30px,3.6vw,42px);line-height:1.2}
.j-card .j-pic{width:150px;height:150px;object-fit:contain;align-self:center;filter:drop-shadow(0 10px 8px rgba(0,0,0,.18));animation:bob 3s ease-in-out infinite}
.j-card p{font-size:18px}
.j-card .tip{margin-top:auto;background:var(--mint);border:3px dashed var(--green-2);border-radius:18px;padding:10px 14px;font-weight:700;font-size:16px;margin-top:auto}
.j-card .tip::before{content:"好习惯：";color:var(--green)}
.j-controls{max-width:1150px;margin:26px auto 0;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.dots{display:flex;gap:8px;margin-right:auto}
.dots i{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.dots i.on{background:var(--orange)}

/* habits */
.sec-habits{background:linear-gradient(#FFE9D6,var(--blue-2))}
.habit-banner{position:relative;max-width:1150px;margin:0 auto 34px;border:4px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 0 var(--ink)}
.habit-banner img{width:100%;aspect-ratio:16/6;object-fit:cover}
.star-count{position:absolute;right:16px;bottom:16px;font-family:var(--font-d);font-size:24px;background:#fff;border:4px solid var(--ink);border-radius:999px;padding:6px 20px;box-shadow:0 5px 0 var(--ink)}
.star-count b{color:var(--orange);font-family:var(--font-b);font-weight:800;font-size:28px}
.star-count.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.habits{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.habit{position:relative;background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 8px 0 var(--ink);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;transition:transform .3s}
.habit .hpic{width:118px;height:118px;object-fit:contain;align-self:center;filter:drop-shadow(0 10px 8px rgba(0,0,0,.18));transition:transform .3s}
.habit:hover .hpic{transform:scale(1.08) rotate(-4deg)}
.habit h3{font-family:var(--font-d);font-weight:400;font-size:28px;line-height:1.2}
.habit .num{display:inline-block;font-weight:800;color:var(--ink);background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:0 10px;font-size:15px;align-self:flex-start}
.habit p{font-size:16px;line-height:1.6}
.habit-actions{display:flex;gap:8px;margin-top:auto;padding-top:8px;align-items:center;flex-wrap:wrap}
.star-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-size:17px;padding:5px 14px 5px 8px;border:3px solid var(--ink);border-radius:999px;background:var(--cream)}
.star-btn svg{width:28px;height:28px;transition:transform .4s cubic-bezier(.2,1.8,.4,1)}
.star-btn svg path{fill:#fff;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;transition:fill .3s}
.star-btn[aria-pressed="true"]{background:#FFF0A8}
.star-btn[aria-pressed="true"] svg{transform:rotate(144deg) scale(1.15)}
.star-btn[aria-pressed="true"] svg path{fill:var(--sun)}
.habit.done{background:#FFFBEA}

.wash{max-width:1150px;margin:40px auto 0;background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--ink);padding:26px}
.wash-head{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;margin-bottom:22px}
.wash-pic{width:150px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.18))}
.wash h3{font-family:var(--font-d);font-weight:400;font-size:38px;line-height:1.2}
.wash p b{color:var(--blue);font-size:1.15em}
.wash-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.wash-steps{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.wash-steps li{position:relative;border:3px solid var(--ink);border-radius:20px;background:var(--blue-2);padding:12px 8px 10px;text-align:center;transition:transform .3s,background .3s}
.wash-steps .k{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 6px;border-radius:50%;background:#fff;border:3px solid var(--ink);font-family:var(--font-d);font-size:28px}
.wash-steps .s{font-size:14px;line-height:1.45;font-weight:600}
.wash-steps i{position:absolute;top:6px;left:8px;font-style:normal;font-weight:800;font-size:13px;color:var(--ink-2)}
.wash-steps li.on{background:var(--sun);transform:translateY(-8px) scale(1.04)}
.wash-steps li.on .k{animation:scrub .5s ease-in-out infinite alternate}
.wash-steps li.ok{background:#C8F0D6}
@keyframes scrub{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}

/* senses */
.sec-senses{background:linear-gradient(var(--blue-2),var(--purple-2))}
.senses{max-width:1150px;margin:0 auto}
.sense-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.stab{display:flex;flex-direction:column;align-items:center;gap:2px;width:112px;padding:8px 6px 6px;border:3px solid var(--ink);border-radius:22px;background:#fff;box-shadow:0 5px 0 var(--ink);font-family:var(--font-d);font-size:20px;transition:transform .15s}
.stab img{width:64px;height:64px;object-fit:contain}
.stab:hover{transform:translateY(-3px)}
.stab[aria-selected="true"]{background:var(--purple);color:#fff;transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.sense-stage{position:relative;border:4px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 0 var(--ink);min-height:460px}
.sense-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sense-char{position:absolute;left:6%;bottom:6%;width:min(32%,320px);filter:drop-shadow(0 16px 14px rgba(0,0,0,.25));animation:bob 3s ease-in-out infinite}
.sense-char.swap{animation:swapIn .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes swapIn{from{transform:scale(.3) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
.sense-card{position:absolute;right:3%;top:6%;bottom:6%;width:min(52%,520px);background:rgba(255,255,255,.96);border:4px solid var(--ink);border-radius:var(--r);padding:20px 24px;box-shadow:0 6px 0 var(--ink);display:flex;flex-direction:column;gap:8px;overflow:auto}
.sense-card.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.sense-card h3{font-family:var(--font-d);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.2}
.sense-card h3 small{font-size:.55em;color:var(--purple);margin-left:6px}
.sense-card p{font-size:17px}
.sense-card .try{background:var(--purple-2);border-radius:16px;padding:8px 14px;font-weight:700;font-size:16px}
.sense-card .try::before{content:"试一试：";color:var(--purple)}
.sense-card .tip{background:var(--mint);border-radius:16px;padding:8px 14px;font-weight:700;font-size:16px}
.sense-card .tip::before{content:"保护它：";color:var(--green)}
.sense-card .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.taste-row{display:flex;gap:6px;flex-wrap:wrap}
.taste-row span{font-family:var(--font-d);font-size:18px;border:2px solid var(--ink);border-radius:999px;padding:0 12px;background:#fff}

/* games */
.sec-games{background:linear-gradient(var(--purple-2),var(--pink-2))}
.game-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.gtab{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:22px;padding:8px 18px 8px 10px;border:3px solid var(--ink);border-radius:20px;background:#fff;box-shadow:0 5px 0 var(--ink);transition:transform .15s}
.gimg{width:38px;height:38px;object-fit:contain}
.gtab.on{background:var(--pink);color:#fff;transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.game{display:none;max-width:940px;margin:0 auto;background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--ink);padding:24px}
.game.on{display:block;animation:pop .4s cubic-bezier(.2,1.5,.4,1)}
.g-tip{font-size:19px;font-weight:700;text-align:center;margin-bottom:16px}
.g-row{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.score{font-family:var(--font-d);font-size:22px}
.score b{color:var(--orange);font-size:28px;font-weight:800;font-family:var(--font-b)}

/* brush */
.brush-wrap{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center}
.brush-timer{position:relative;width:180px;aspect-ratio:1}
.brush-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:#FFF6E5;stroke:#F3E3C4;stroke-width:12}
.ring{fill:none;stroke:var(--green-2);stroke-width:12;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:0;transition:stroke-dashoffset .3s linear,opacity .3s}
.brush-time{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.brush-time b{font-family:var(--font-b);font-weight:800;font-size:40px;line-height:1}
.brush-time small{font-family:var(--font-d);font-size:16px;color:var(--ink-2);margin-top:4px;max-width:120px}
.mouth{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;aspect-ratio:400/260;cursor:none}
.mouth-svg{width:100%;height:100%}
.zone-glow{position:absolute;width:44%;height:42%;border-radius:30px;border:4px dashed #fff;background:rgba(255,255,255,.15);opacity:0;transition:all .4s;pointer-events:none}
.zone-glow.on{opacity:1}
.germs{position:absolute;inset:0}
.germ{position:absolute;width:15%;transform:translate(-50%,-50%);pointer-events:none;transition:transform .15s,opacity .3s}
.germ img{width:100%;animation:wiggle 1.4s ease-in-out infinite}
.germ.hit{transform:translate(-50%,-50%) scale(.8) rotate(12deg)}
.germ.bye{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(-4px)}}
.bubble-pop{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.9);border:2px solid #9CD7F0;pointer-events:none;animation:bub .8s ease-out forwards}
@keyframes bub{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.brush-cursor{position:absolute;width:16%;pointer-events:none;transform:translate(-30%,-70%) rotate(-30deg);opacity:0;transition:opacity .2s;z-index:3}
.mouth.active .brush-cursor{opacity:1}
.brush-over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,246,229,.5);border-radius:40px;z-index:4;cursor:default}
.brush-over.hide{display:none}
.brush-over .done-msg{font-family:var(--font-d);font-size:30px;text-align:center;background:#fff;border:4px solid var(--ink);border-radius:24px;padding:12px 22px;box-shadow:0 6px 0 var(--ink);margin-bottom:14px}
.brush-over>div{display:flex;flex-direction:column;align-items:center}
.mouth.sparkle .mouth-svg{animation:shine 1s ease-in-out 2}
@keyframes shine{50%{filter:brightness(1.15) drop-shadow(0 0 16px #fff)}}

/* plate */
.plate-stage{display:grid;grid-template-columns:1fr 220px 1fr;gap:18px;align-items:center}
.bin{position:relative;min-height:280px;border:4px solid var(--ink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;transition:transform .2s,box-shadow .2s;aspect-ratio:1}
.bin-plate{background:radial-gradient(circle,#fff 52%,#E6F6EC 53%,#E6F6EC 70%,#fff 71%);box-shadow:0 8px 0 var(--ink)}
.bin-snack{border-radius:28px;background:repeating-linear-gradient(45deg,#FFE3EC 0 16px,#FFD1DE 16px 32px);box-shadow:0 8px 0 var(--ink);aspect-ratio:auto}
.bin-title{font-family:var(--font-d);font-size:24px;line-height:1.1;text-align:center;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:4px 12px}
.bin-title small{display:block;font-size:15px;color:var(--ink-2)}
.bin-items{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:220px}
.bin-items img{width:38px;height:38px;object-fit:contain;animation:pop .4s}
.bin.over,.bin.ready{transform:scale(1.05);box-shadow:0 0 0 6px var(--sun),0 8px 0 var(--ink)}
.bin.yes{animation:roarB .5s}
.bin.no{animation:no .5s}
@keyframes roarB{40%{transform:scale(1.1) rotate(-2deg)}}
@keyframes no{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-12px)}40%,80%{transform:translateX(12px)}}
.plate-food-wrap{text-align:center}
.plate-food{width:180px;height:180px;margin:0 auto;border:4px dashed var(--ink-2);border-radius:28px;display:grid;place-items:center;background:var(--cream);touch-action:none;cursor:grab;transition:box-shadow .2s}
.plate-food.sel{box-shadow:0 0 0 6px var(--sun);border-style:solid}
.plate-food img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.2));pointer-events:none}
.plate-food.enter img{animation:swapIn .5s cubic-bezier(.2,1.5,.4,1)}
.plate-name{font-family:var(--font-d);font-size:28px;margin-top:8px}
.drag-ghost{position:fixed;z-index:90;width:120px;height:120px;pointer-events:none;transform:translate(-50%,-50%) rotate(-6deg);filter:drop-shadow(0 12px 10px rgba(0,0,0,.3))}
.drag-ghost img{width:100%;height:100%;object-fit:contain}

/* puzzle */
.puzzle{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.pz-body{position:relative;max-width:clamp(240px,calc((100vh - 170px)*.525),360px);margin:0 auto;width:100%}
.pz-body>img{width:100%}
.pz-zone{position:absolute;transform:translate(-50%,-50%);border:4px dashed var(--ink);border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;transition:transform .2s,background .2s}
.pz-zone.ready{background:rgba(255,200,61,.55);transform:translate(-50%,-50%) scale(1.08)}
.pz-zone.over{background:rgba(255,200,61,.8)}
.pz-zone.filled{border-style:solid;border-color:transparent;background:transparent}
.pz-zone img{width:118%;max-width:none;animation:snap .5s cubic-bezier(.2,1.6,.4,1);filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
@keyframes snap{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}
.pz-zone.no{animation:noZ .5s}
@keyframes noZ{0%,100%{transform:translate(-50%,-50%)}25%,75%{transform:translate(calc(-50% - 8px),-50%)}50%{transform:translate(calc(-50% + 8px),-50%)}}
.pz-tray{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pz-piece{display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid var(--ink);border-radius:22px;background:var(--cream);box-shadow:0 5px 0 var(--ink);padding:10px 6px 8px;font-family:var(--font-d);font-size:20px;touch-action:none;transition:transform .15s,opacity .3s}
.pz-piece img{width:84px;height:84px;object-fit:contain;pointer-events:none}
.pz-piece.sel{background:var(--sun);transform:translateY(-4px)}
.pz-piece.used{opacity:.25;pointer-events:none}
.pz-piece.dragging{opacity:.4}

/* memory */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:clamp(300px,calc(100vh - 230px),640px);margin:0 auto}
.mcard{aspect-ratio:3/4;perspective:700px}
.mcard .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.mcard.open .in,.mcard.done .in{transform:rotateY(180deg)}
.mcard .f,.mcard .b{position:absolute;inset:0;border:4px solid var(--ink);border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.mcard .f{background:repeating-linear-gradient(45deg,var(--pink) 0 14px,#F58BB1 14px 28px)}
.mcard .f::after{content:"?";font-family:var(--font-d);font-size:44px;color:#fff;-webkit-text-stroke:2px var(--ink)}
.mcard .b{transform:rotateY(180deg);background:var(--cream);padding:8px}
.mcard .b{overflow:hidden}
.mcard .b img{width:100%;height:100%;min-height:0;object-fit:contain}
.mcard.done .b{background:#FFF0A8}

.confetti{position:fixed;width:12px;height:16px;top:0;z-index:99;pointer-events:none;border-radius:3px}

/* footer */
.foot{background:var(--red);color:#fff;text-align:center;padding:60px 20px 44px;position:relative;margin-top:40px}
.foot-kid{width:140px;margin:-150px auto 8px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.25))}
.foot p{font-family:var(--font-d);font-size:24px}
.foot .note{font-family:var(--font-b);font-size:16px;font-weight:700;max-width:560px;margin:14px auto 0;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:20px;padding:12px 18px;box-shadow:0 5px 0 var(--ink);line-height:1.6}
.foot .small{font-family:var(--font-b);font-size:14px;opacity:.92;max-width:520px;margin:14px auto 0}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,200px);visibility:hidden;z-index:80;background:var(--ink);color:#fff;font-family:var(--font-d);font-size:22px;padding:10px 22px;border-radius:999px;transition:transform .4s cubic-bezier(.2,1.5,.4,1);white-space:nowrap}
.toast.show{transform:translate(-50%,0);visibility:visible}
@keyframes pop{from{transform:scale(.92) rotateX(20deg)}to{transform:none}}

.reveal{opacity:0;transform:translateY(40px) rotateX(12deg);transition:opacity .8s,transform .8s cubic-bezier(.2,1,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:980px){
  .habits{grid-template-columns:repeat(2,1fr)}
  .wash-steps{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .nav{display:none}
  .topbar{padding-right:8px}
  .sound-toggle{margin-left:auto}
  .journey{grid-template-columns:1fr}
  .j-stage{min-height:0;aspect-ratio:auto;padding:10px 0}
  .j-body{height:auto;width:min(78%,340px)}
  .sense-stage{min-height:0;display:flex;flex-direction:column}
  .sense-bg{position:relative;aspect-ratio:16/9;height:auto}
  .sense-char{width:38%;left:auto;right:4%;top:2%;bottom:auto}
  .sense-card{position:relative;inset:auto;width:auto;border:0;border-top:4px solid var(--ink);border-radius:0;box-shadow:none}
  .brush-wrap{grid-template-columns:1fr;justify-items:center}
  .brush-timer{width:140px}
  .brush-time b{font-size:32px}
  .mouth{width:100%}
  .plate-stage{grid-template-columns:1fr 1fr;grid-template-areas:"food food" "good treat"}
  .plate-food-wrap{grid-area:food}.bin-plate{grid-area:good}.bin-snack{grid-area:treat}
  .bin{min-height:0}
  .puzzle{grid-template-columns:1fr}
  .pz-body{max-width:clamp(200px,calc((100vh - 300px)*.525),240px)}
  .pz-tray{grid-template-columns:repeat(5,1fr);gap:6px}
  .pz-piece{font-size:14px;padding:6px 2px;border-radius:16px}
  .pz-piece img{width:52px;height:52px}
}
@media (max-width:560px){
  body{font-size:17px}
  .l-kid{right:-2%;width:44vw;bottom:2%}
  .l-o1{left:3%;top:11%;width:22vw}
  .l-o2{right:3%;top:10%;width:20vw}
  .l-o3{left:-3%;top:auto;bottom:24%;width:24vw}
  .l-o4{right:auto;left:40%;bottom:4%;width:17vw}
  .l-o5{left:2%;bottom:4%;width:17vw}
  .l-o6{right:-2%;top:auto;bottom:34%;width:19vw}
  .hero-copy{padding-bottom:36vh}
  .hero-sub{font-size:18px}
  .btn-big{font-size:22px;padding:12px 24px}
  .card{height:450px}
  .habits{grid-template-columns:1fr}
  .habit-banner img{aspect-ratio:16/9}
  .star-count{font-size:18px;right:10px;bottom:10px;padding:4px 14px}
  .star-count b{font-size:22px}
  .wash{padding:18px}
  .wash-head{grid-template-columns:1fr;text-align:center}
  .wash-pic{width:120px;margin:0 auto}
  .wash-actions{justify-content:center}
  .wash-steps{grid-template-columns:repeat(2,1fr)}
  .wash-steps li:last-child{grid-column:span 2}
  .stab{width:62px;font-size:16px;padding:6px 2px 4px;border-radius:16px}
  .stab img{width:42px;height:42px}
  .sense-tabs{gap:6px}
  .sense-card{padding:16px}
  .game{padding:18px 12px}
  .gtab{font-size:18px;padding:6px 12px 6px 8px}
  .gimg{width:30px;height:30px}
  .mem-grid{gap:8px}
  .bin-title{font-size:18px;padding:3px 8px}
  .bin-title small{font-size:13px}
  .bin{padding:10px}
  .bin-items img{width:26px;height:26px}
  .plate-food{width:140px;height:140px}
  .j-controls{gap:10px}
  .j-controls .dots{width:100%;justify-content:center;margin:0}
  .j-card{padding:18px}
  .toast{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* bilingual */
.lang-toggle{display:flex;gap:2px;padding:3px;border:3px solid var(--ink,#2B2118);border-radius:999px;background:#fff;flex:none;margin-left:auto}
.lang-toggle button{font-family:var(--font-d,inherit);font-size:14px;padding:4px 10px;border-radius:999px;border:0;background:transparent;cursor:pointer;color:inherit}
.lang-toggle button.on{background:var(--sun,#FFC83D)}
.lang-toggle-float{position:fixed;top:14px;right:14px;z-index:80;margin:0;box-shadow:0 4px 0 rgba(0,0,0,.35)}
html.lang-en .zh{display:none!important}
html.lang-zh .en,html:not(.lang-en) .en{display:none!important}
html.lang-en .en{display:initial!important}
html.lang-zh .zh,html:not(.lang-en) .zh{display:initial!important}