:root{--purple:#58358f;--dark:#3e226d;--yellow:#f8b42c;--cream:#fff9ec;--ink:#302544;--green:#42a866}*{box-sizing:border-box}html{background:var(--cream)}body{color:var(--ink);background:radial-gradient(circle at 8% 25%,#f8b42c1f 0 5px,transparent 6px),var(--cream);margin:0;font-family:Arial Rounded MT Bold,Trebuchet MS,Arial,sans-serif}button{font:inherit}.topbar{border-bottom:4px solid var(--yellow);background:#fff;justify-content:space-between;align-items:center;height:84px;padding:12px max(5vw,24px);display:flex}.brand-logo{object-fit:cover;width:182px;height:54px}.hud{align-items:center;gap:10px;display:flex}.score-pill,.level-pill{border-radius:999px;padding:10px 18px;font-weight:800}.score-pill{color:#fff;background:var(--purple);box-shadow:0 4px 0 var(--dark)}.score-pill span{color:#ffd565;font-size:1.25rem}.level-pill{color:var(--purple);border:2px solid #e9def3}.hero{color:#fff;background:linear-gradient(125deg,#4c2c80,#7754af);grid-template-columns:1.25fr .75fr;align-items:center;min-height:330px;padding:42px max(7vw,28px);display:grid;overflow:hidden}.hero-copy{max-width:680px}.eyebrow{color:var(--yellow);text-transform:uppercase;letter-spacing:.16em;margin:0 0 7px;font-size:.85rem;font-weight:900}.hero h1{letter-spacing:-.045em;margin:0;font-size:clamp(2.65rem,6vw,5rem);line-height:.95}.hero-copy>p:last-of-type{color:#f3edf9;max-width:620px;font-family:Arial,sans-serif;line-height:1.55}.level-route{gap:9px;margin-top:20px;display:flex}.level-route span{border:2px solid #ffffff59;border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.level-route .current{color:var(--dark);background:var(--yellow);border-color:var(--yellow)}.level-route .done{background:var(--green);border-color:var(--green)}.mascot-wrap{justify-content:center;align-self:end;height:285px;display:flex;position:relative}.mascot{object-fit:cover;object-position:center 36%;mix-blend-mode:screen;border-radius:110px 110px 30px 30px;width:230px;height:285px;transition:transform .2s}.reaction-yeah .mascot{animation:.45s celebrate}.reaction-brava .mascot{animation:.3s shake}.speech{z-index:2;color:var(--dark);background:#fff;border-radius:20px 20px 5px;padding:13px 17px;font-family:Arial,sans-serif;font-size:.85rem;position:absolute;top:4px;left:-45px;box-shadow:0 8px 25px #230f3f40}.game-shell{background:#fff;border:1px solid #eadff5;border-radius:30px;width:min(1120px,100% - 32px);margin:-18px auto 50px;padding:32px;position:relative;box-shadow:0 18px 60px #42246924}.level-banner{color:#fff;background:linear-gradient(100deg,var(--purple),#7653aa);border-radius:17px;align-items:center;gap:14px;margin:-12px 0 27px;padding:13px 16px;display:flex}.level-banner>span{color:var(--dark);background:var(--yellow);border-radius:9px;padding:7px 10px;font-size:.72rem;font-weight:900}.level-banner div{flex-direction:column;display:flex}.level-banner small{color:#e9dff2;font-family:Arial,sans-serif}.streak{background:#ffffff29;border-radius:999px;margin-left:auto;padding:8px 12px}.game-heading,.bin-heading{justify-content:space-between;align-items:end;gap:20px;display:flex}.step{color:var(--purple);text-transform:uppercase;letter-spacing:.12em;margin:0 0 5px;font-size:.76rem;font-weight:900}.game-shell h2{color:var(--dark);margin:0;font-size:clamp(1.35rem,3vw,2rem)}.reset-small{color:var(--purple);background:#f1eaf8;border:0;border-radius:12px;padding:9px 13px}.waste-tray{grid-template-columns:repeat(5,1fr);gap:12px;margin:23px 0 18px;display:grid}.waste-card{min-height:132px;color:var(--ink);background:#fffdfa;border:2px solid #eee6f6;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px 8px;font-size:.86rem;font-weight:800;transition:all .18s;display:flex;box-shadow:0 5px #e9dff2}.waste-card:hover,.waste-card.selected{border-color:var(--yellow);transform:translateY(-4px)}.waste-card.placed{opacity:.38;box-shadow:none;transform:none}.waste-emoji{background:#f6f0fb;border-radius:50%;place-items:center;width:65px;height:65px;font-size:2.4rem;display:grid}.placed .waste-emoji{color:var(--green);font-size:2rem}.feedback{min-height:66px;color:var(--purple);background:#f4eff8;border-radius:15px;justify-content:center;align-items:center;gap:12px;margin:12px 0 30px;padding:9px 18px;font-family:Arial,sans-serif;font-weight:700;display:flex}.feedback.success{color:#267544;background:#e7f6eb}.feedback.error{color:#9b541e;background:#fff0df}.feedback img{object-fit:cover;object-position:center 28%;background:#fff;border-radius:50%;width:52px;height:52px}.bin-heading{border-top:2px dashed #e8def1;padding-top:25px}.progress-count{color:var(--purple);background:#f1eaf8;border-radius:13px;padding:8px 12px}.bins{grid-template-columns:repeat(5,1fr);align-items:end;gap:12px;margin-top:22px;display:grid}.bin{background:0 0;border:0;padding:0 5px;transition:all .16s}.bin:hover{transform:translateY(-7px)}.bin-lid{background:var(--bin-color);border-radius:8px;width:94%;height:16px;margin:0 auto 4px;display:block;box-shadow:0 4px #00000024}.bin-body{color:#fff;background:var(--bin-color);border-radius:10px 10px 20px 20px;flex-direction:column;align-items:center;min-height:150px;padding:20px 8px 14px;display:flex;box-shadow:inset -10px 0 #00000014,0 8px #38234b1f}.recycle{font-family:Arial;font-size:2.7rem}.bin strong{text-transform:uppercase;margin-top:8px}.bin small{font-family:Arial}.paw-cursor{z-index:50;pointer-events:none;font-size:26px;position:fixed;translate:-8px -7px;rotate:-22deg}.finish-overlay{z-index:20;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#2f1f44bd;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.finish-card{border:5px solid var(--yellow);text-align:center;background:#fff;border-radius:32px;width:min(500px,100%);padding:28px 32px 32px;box-shadow:0 28px 90px #0005}.finish-card img{object-fit:cover;object-position:center 30%;border:5px solid #f0e8f7;border-radius:50%;width:150px;height:150px}.finish-card h2{color:var(--purple);margin:6px 0}.finish-card p{font-family:Arial;line-height:1.5}.result-badge{color:#80520b;background:#fff3c9;border-radius:12px;margin:18px 0;padding:10px;font-weight:800}.finish-card button{color:#fff;background:var(--purple);box-shadow:0 5px 0 var(--dark);border:0;border-radius:999px;padding:14px 24px}.confetti{color:var(--yellow);font-size:clamp(1.5rem,6vw,4rem);position:fixed;top:7%}footer{color:#6b5b77;justify-content:center;align-items:center;gap:22px;padding:24px;font-family:Arial;font-size:.88rem;display:flex}footer img{object-fit:cover;width:118px;height:40px}@keyframes celebrate{50%{transform:translateY(-12px)rotate(3deg)}}@keyframes shake{25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (hover:hover) and (pointer:fine){.game-shell,.game-shell button{cursor:none}}@media (width<=800px){.hero{grid-template-columns:1fr;min-height:430px;padding-top:35px}.hero-copy{text-align:center}.level-route{justify-content:center}.mascot-wrap{height:175px}.mascot{width:145px;height:175px}.speech{left:calc(50% - 160px)}.game-shell{padding:22px 17px}.waste-tray,.bins{grid-template-columns:repeat(3,1fr)}}@media (width<=520px){.topbar{height:72px;padding:10px 15px}.brand-logo{width:140px;height:42px}.level-pill{display:none}.score-pill{padding:8px 10px;font-size:.75rem}.hero{padding-inline:20px}.hero h1{font-size:2.65rem}.waste-tray,.bins{grid-template-columns:repeat(2,1fr)}.bins .bin:last-child{grid-column:1/-1;justify-self:center;width:50%}.level-banner small{font-size:.7rem}.streak{font-size:.65rem}.feedback{padding-inline:10px;font-size:.84rem}.finish-card{padding:24px 18px}footer{text-align:center;flex-direction:column;gap:5px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.mascot{opacity:1;mix-blend-mode:normal;filter:saturate(1.06)contrast(1.02);background:#fff;box-shadow:0 12px 30px #25123d33}.sound-toggle{cursor:pointer;background:#fff;border:2px solid #eadff3;border-radius:50%;place-items:center;width:44px;height:44px;font-size:1.15rem;transition:transform .15s,background .15s;display:grid}.sound-toggle:hover{background:#fff8e8;transform:scale(1.08)}.sound-toggle.muted{background:#f2edf6}@media (width<=520px){.sound-toggle{width:38px;height:38px;font-size:1rem}}@media (width>=801px){.topbar{height:66px;padding-block:8px}.brand-logo{width:150px;height:45px}.hero{min-height:238px;padding-top:24px;padding-bottom:22px}.hero h1{font-size:clamp(2.5rem,4.4vw,3.9rem)}.hero-copy>p:last-of-type{margin-block:10px;font-size:.96rem}.level-route{margin-top:12px}.level-route span{width:29px;height:29px}.mascot-wrap{height:210px}.mascot{width:172px;height:210px}.speech{padding:10px 13px;font-size:.76rem;left:-58px}.game-shell{border-radius:24px;width:min(1080px,100% - 40px);margin-top:-12px;padding:22px 26px 25px}.level-banner{margin-bottom:18px;padding-block:10px}.waste-tray{gap:10px;margin-block:15px 12px}.waste-card{min-height:102px;padding:8px 6px;font-size:.78rem}.waste-emoji{width:50px;height:50px;font-size:1.9rem}.feedback{min-height:54px;margin:8px 0 18px;padding-block:6px;font-size:.88rem}.feedback img{width:42px;height:42px}.bin-heading{padding-top:17px}.bins{gap:10px;margin-top:14px}.bin-body{min-height:112px;padding:13px 6px 10px}.bin-lid{height:12px}.recycle{font-size:2rem}.bin strong{margin-top:4px;font-size:.84rem}}