*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Trebuchet MS,Comic Sans MS,-apple-system,Segoe UI,sans-serif;background:#ee7b8e;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}#game-canvas,#fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#fx-canvas{pointer-events:none;z-index:5}#ui-root{position:absolute;inset:0;pointer-events:none;z-index:10}#ui-root button{pointer-events:auto;border:none;cursor:pointer;font-family:inherit}.hud-top-center{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}.hud-stars{display:flex;gap:6px}.star svg path{fill:#ffffff59;stroke:#fff9;stroke-width:1;transition:fill .25s}.star.lit svg path{fill:#ffd23e;stroke:#e8a400}.star.lit svg{filter:drop-shadow(0 3px 4px rgba(180,90,0,.35));animation:star-pop .45s cubic-bezier(.34,1.56,.64,1)}@keyframes star-pop{0%{transform:scale(.4) rotate(-18deg)}to{transform:scale(1) rotate(0)}}.level-badge{background:linear-gradient(180deg,#7fe25a,#4cbe3c);color:#fff;font-weight:800;font-size:20px;letter-spacing:1.5px;padding:8px 34px;border-radius:999px;border:3px solid rgba(255,255,255,.85);box-shadow:0 5px #3282288c,0 9px 16px #781e3c40;text-shadow:0 2px 0 rgba(40,110,30,.6)}.level-badge.slide-in{animation:badge-slide .6s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-slide{0%{transform:translateY(-90px) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.hud-top-right{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;display:flex;align-items:center;gap:10px}.coin-chip{display:flex;align-items:center;gap:7px;background:#ffffffeb;border-radius:999px;padding:6px 12px;font-weight:800;font-size:18px;color:#8c5a17;box-shadow:0 4px 10px #781e3c40}.coin-chip.pulse{animation:chip-pulse .35s ease}@keyframes chip-pulse{50%{transform:scale(1.22)}}.icon-btn{width:46px;height:46px;border-radius:50%;background:#ffffffeb;color:#e75480;font-size:24px;font-weight:800;box-shadow:0 4px #b4466e66,0 7px 12px #781e3c40;transition:transform .12s;display:flex;align-items:center;justify-content:center}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px #b4466e66}.target-card{position:absolute;left:0;top:24%;width:min(190px,26vw);background:#fff0f4eb;border-radius:0 28px 28px 0;padding:10px 10px 4px;box-shadow:0 10px 24px #8c1e4638}.target-canvas{width:100%;height:auto;display:block}.match-label{font-size:clamp(22px,3.2vw,34px);font-weight:800;color:#fff;text-shadow:0 3px 0 rgba(170,60,100,.45);padding:2px 0 8px 6px}.target-card.shake{animation:card-shake .4s ease}@keyframes card-shake{0%,to{transform:translate(0)}20%{transform:translate(-9px) rotate(-2deg)}40%{transform:translate(8px) rotate(2deg)}60%{transform:translate(-6px)}80%{transform:translate(5px)}}.bottom-bar{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:96vw}.flavor-row{display:flex;gap:clamp(10px,2.4vw,26px);flex-wrap:wrap;justify-content:center}.flavor-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}.flavor-btn{width:clamp(56px,8.5vw,84px);height:clamp(56px,8.5vw,84px);border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),transparent 42%),var(--fc);border:4px solid #ffffff;box-shadow:0 6px #96325a59,0 10px 18px #781e3c4d;transition:transform .12s}.flavor-btn:active{transform:translateY(4px) scale(.96)}.flavor-btn.selected{animation:sel-pulse 1s ease-in-out infinite;border-color:#fff6a8;box-shadow:0 6px #96325a59,0 0 0 5px #fff0828c,0 10px 20px #781e3c59}@keyframes sel-pulse{50%{transform:scale(1.09)}}.flavor-label{color:#fff;font-weight:800;font-size:clamp(12px,1.6vw,17px);text-shadow:0 2px 0 rgba(170,60,100,.5)}.topping-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.topping-btn{display:flex;align-items:center;gap:6px;background:#ffffffeb;border-radius:999px;padding:5px 14px 5px 6px;font-weight:800;font-size:13px;color:#b05077;box-shadow:0 4px #96325a4d,0 8px 12px #781e3c38;transition:transform .12s}.topping-btn canvas{width:30px;height:30px}.topping-btn:active{transform:translateY(3px)}.topping-btn.used{opacity:.45;filter:saturate(.4)}.done-btn{position:absolute;right:18px;bottom:calc(26px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#8be95f,#3fb63a);color:#fff;font-size:clamp(19px,2.6vw,26px);font-weight:900;letter-spacing:2px;padding:15px 34px;border-radius:999px;border:4px solid rgba(255,255,255,.9);box-shadow:0 7px #2878238c,0 12px 22px #781e3c4d;text-shadow:0 2px 0 rgba(40,110,30,.6);opacity:.45;transform:scale(.94);transition:opacity .25s,transform .25s}.done-btn.ready{opacity:1;transform:scale(1);animation:done-wiggle 2.4s ease-in-out infinite}@keyframes done-wiggle{0%,84%,to{transform:scale(1) rotate(0)}88%{transform:scale(1.06) rotate(-2deg)}94%{transform:scale(1.04) rotate(2deg)}}.done-btn:active{transform:translateY(4px) scale(.98)!important;box-shadow:0 2px #2878238c}.pour-hint{position:absolute;left:50%;bottom:33%;transform:translate(-50%);color:#fffffff2;background:#dc50828c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-weight:700;font-size:clamp(13px,1.9vw,17px);padding:8px 18px;border-radius:999px;animation:hint-bob 1.6s ease-in-out infinite;transition:opacity .3s;white-space:nowrap}.pour-hint.hidden{opacity:0}@keyframes hint-bob{50%{transform:translate(-50%) translateY(-7px)}}.level-toast{position:absolute;top:22%;left:50%;transform:translate(-50%) scale(.8);color:#fff;font-size:clamp(20px,3.4vw,34px);font-weight:900;text-shadow:0 3px 0 rgba(170,60,100,.5),0 8px 18px rgba(120,30,60,.4);opacity:0;pointer-events:none;white-space:nowrap}.level-toast.show{animation:toast-in 2.4s ease forwards}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) scale(.7) translateY(16px)}12%{opacity:1;transform:translate(-50%) scale(1.05) translateY(0)}20%{transform:translate(-50%) scale(1)}78%{opacity:1}to{opacity:0;transform:translate(-50%) scale(.98) translateY(-14px)}}.result-overlay{position:absolute;inset:0;background:#78143c6b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;transition:opacity .3s;pointer-events:auto;z-index:20}.result-overlay.hidden{opacity:0;pointer-events:none}.result-panel{background:linear-gradient(180deg,#fff7f9,#ffe3ee);border-radius:34px;padding:30px 46px 34px;text-align:center;box-shadow:0 24px 60px #500a2873,inset 0 2px #fff;border:5px solid rgba(255,255,255,.9);animation:panel-pop .55s cubic-bezier(.34,1.56,.64,1);max-width:88vw}.result-overlay.hidden .result-panel{animation:none}@keyframes panel-pop{0%{transform:scale(.55) translateY(60px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.result-title{font-size:clamp(26px,4vw,38px);font-weight:900;color:#e75480;text-shadow:0 2px 0 #ffffff}.result-stars{display:flex;justify-content:center;gap:10px;margin:12px 0 4px}.rstar svg path{fill:#b496aa40;stroke:#a0788c66;stroke-width:.8}.rstar{transform:scale(.85)}.rstar.earned{animation:rstar-pop .5s cubic-bezier(.34,1.7,.64,1) forwards}.rstar.earned svg path{fill:#ffd23e;stroke:#e8a400}.rstar.earned svg{filter:drop-shadow(0 4px 6px rgba(190,120,0,.45))}@keyframes rstar-pop{0%{transform:scale(.2) rotate(-30deg)}70%{transform:scale(1.25) rotate(6deg)}to{transform:scale(1) rotate(0)}}.result-score{font-size:clamp(40px,6vw,58px);font-weight:900;color:#ff8b1f;text-shadow:0 3px 0 #ffffff,0 8px 14px rgba(200,100,0,.25)}.result-coins{display:flex;justify-content:center;align-items:center;gap:6px;min-height:28px;font-size:22px;font-weight:900;color:#c8871c;margin-top:4px}.result-buttons{display:flex;gap:14px;justify-content:center;margin-top:20px}.panel-btn{font-size:19px;font-weight:900;letter-spacing:1px;padding:14px 30px;border-radius:999px;color:#fff;border:4px solid rgba(255,255,255,.9);transition:transform .12s;white-space:nowrap}.panel-btn:active{transform:translateY(3px) scale(.97)}.panel-btn.next{background:linear-gradient(180deg,#8be95f,#3fb63a);box-shadow:0 6px #2878238c;text-shadow:0 2px 0 rgba(40,110,30,.6)}.panel-btn.retry{background:linear-gradient(180deg,#ffa14e,#f07422);box-shadow:0 6px #aa500a8c;text-shadow:0 2px 0 rgba(170,80,10,.6)}button.bounce{animation:btn-bounce .3s ease}@keyframes btn-bounce{40%{transform:scale(.9)}}@media(max-width:760px){.target-card{top:calc(86px + env(safe-area-inset-top,0px));width:min(120px,31vw);border-radius:0 22px 22px 0}.match-label{padding-bottom:4px}.level-badge{font-size:16px;padding:6px 24px}.done-btn{right:10px;padding:12px 22px}.hud-stars svg{width:26px;height:26px}.hud-top-right{gap:6px;right:8px}.icon-btn{width:38px;height:38px;font-size:19px}.coin-chip{font-size:14px;padding:5px 9px}.coin-chip svg{width:17px;height:17px}.bottom-bar{left:calc(50% - 52px);max-width:calc(100vw - 118px)}}@media(max-height:560px){.target-card{width:110px}.bottom-bar{gap:6px}}