:root{color-scheme:light;font-family:Inter,ui-rounded,SF Pro Rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f2d8bd;--panel: rgba(255, 255, 255, .9);--ink: #364256;--soft-shadow: 0 14px 30px rgba(94, 60, 31, .18)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#f2d8bd}#game-canvas{display:block;width:100%;height:100%;touch-action:none}#ui-root{position:fixed;inset:0;pointer-events:none}.hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;color:var(--ink)}.top-ui{display:grid;grid-template-columns:72px minmax(170px,260px) 72px;align-items:start;justify-content:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 0}.icon-stack{display:flex;gap:8px;pointer-events:auto}.icon-btn{width:42px;height:42px;border:0;border-radius:50%;background:#ffffffd1;box-shadow:var(--soft-shadow),inset 0 1px #ffffffe6;color:#4c5568;font-size:22px;font-weight:900;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.icon-btn:active{transform:translateY(2px) scale(.96)}.icon-btn.is-muted{color:#8e6470}.target-card{min-height:138px;border-radius:22px;background:var(--panel);box-shadow:var(--soft-shadow),inset 0 1px #ffffffe6;padding:10px 12px 12px;pointer-events:auto;text-align:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:box-shadow .24s ease,transform .24s ease}.target-card.complete-glow{box-shadow:0 0 0 4px #ffdd6f59,0 18px 36px #f6ad4e47;transform:translateY(2px)}.level-label{font-size:19px;font-weight:900;letter-spacing:0}.target-preview{height:80px;display:grid;place-items:center}.target-preview canvas{width:76px;height:76px;filter:drop-shadow(0 8px 8px rgba(54,66,86,.16))}.progress-text{font-size:12px;font-weight:800;color:#5d6679}.progress-bar{width:100%;height:9px;margin-top:6px;overflow:hidden;border-radius:999px;background:#4b566b1f}.progress-bar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#59c7ff,#8c78ff,#ff8bc4,#ffd85d);transition:width .15s ease}.tutorial{position:absolute;top:160px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(92vw,520px);pointer-events:none}.tutorial span{border-radius:999px;background:#ffffffd1;padding:8px 12px;box-shadow:0 8px 20px #4533241f;color:#576174;font-size:12px;font-weight:800;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hidden{display:none!important}.jar-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,4vw,26px);padding:0 16px max(18px,env(safe-area-inset-bottom));pointer-events:auto}.jar{position:relative;width:clamp(58px,13vw,78px);height:clamp(76px,16vw,96px);border:0;background:transparent;cursor:pointer;transform:translateY(0);transition:transform .18s cubic-bezier(.2,1.4,.32,1),filter .18s ease}.jar.selected{transform:translateY(-13px);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--paint) 55%,white))}.jar-glass{position:absolute;inset:12px 8px 4px;border-radius:18px 18px 16px 16px;background:linear-gradient(110deg,#ffffffb3,#ffffff38);box-shadow:inset 0 0 0 2px #ffffffa8,inset 0 -8px 16px #3f4a5c14,0 14px 18px #48301e29;overflow:hidden}.jar-rim{position:absolute;left:8px;right:8px;top:5px;height:12px;border-radius:50%;background:#ffffffe6;box-shadow:inset 0 -2px 4px #5762781f;z-index:2}.jar-paint{position:absolute;left:4px;right:4px;bottom:4px;height:58%;border-radius:45% 45% 13px 13px;background:radial-gradient(circle at 34% 18%,rgba(255,255,255,.55),transparent 28%),var(--paint)}.jar-shine{position:absolute;top:18px;left:13px;width:9px;height:36px;border-radius:999px;background:#ffffff8c;transform:rotate(11deg)}.jar-check{position:absolute;right:2px;top:0;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff;color:#3aa56d;font-weight:1000;opacity:0;transform:scale(.7);box-shadow:0 6px 12px #423a2e29;transition:opacity .15s ease,transform .15s ease}.jar.selected .jar-check{opacity:1;transform:scale(1)}.modal{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#3b2d2338;pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-panel{width:min(92vw,430px);max-height:min(76vh,580px);overflow:auto;border-radius:26px;background:#fffffff0;box-shadow:0 30px 70px #3d2c1e42;padding:24px;text-align:center}.modal-panel h2{margin:0 0 8px;color:#303b4e;font-size:28px;line-height:1.05}.modal-panel p{margin:6px 0;color:#697286;font-weight:800}.reward{color:#a15a18!important}.modal-actions{display:flex;justify-content:center;gap:10px;margin-top:18px}.modal-actions button,.level-grid button{border:0;border-radius:16px;background:#f1f4fb;color:#344052;box-shadow:inset 0 -2px #535b7014;cursor:pointer;font-weight:900}.modal-actions button{min-width:62px;min-height:46px;padding:0 18px;font-size:17px}.modal-actions button:last-child{background:linear-gradient(135deg,#ffd85d,#ff8bc4)}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.level-grid button{min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:19px}.level-grid span{color:#748095;font-size:10px;text-transform:uppercase}.toast{position:fixed;left:50%;bottom:132px;transform:translate(-50%,10px);border-radius:999px;background:#2b3342d6;color:#fff;padding:10px 16px;font-size:13px;font-weight:800;opacity:0;transition:opacity .16s ease,transform .16s ease;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%)}@media(max-width:560px){.top-ui{grid-template-columns:54px minmax(162px,228px) 54px;gap:8px;padding-left:9px;padding-right:9px}.icon-stack{flex-direction:column}.icon-btn{width:39px;height:39px;font-size:20px}.target-card{min-height:128px;padding:9px 10px;border-radius:20px}.target-preview{height:72px}.target-preview canvas{width:68px;height:68px}.tutorial{top:148px}.tutorial span{padding:7px 10px;font-size:11px}.jar-row{gap:9px}.level-grid{grid-template-columns:repeat(3,1fr)}}@media(max-height:650px){.target-card{min-height:108px}.target-preview{height:56px}.target-preview canvas{width:54px;height:54px}.tutorial{display:none}.jar{width:54px;height:70px}}