:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#172033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#172033;--muted:#637188;--panel:#ffffffe0;--panel-strong:#fffffff5;--stroke:#1c28461f;--shadow:0 14px 40px #1524412e;--red:#ff335f;--green:#0aa36c;--yellow:#ffcf48;--blue:#1b91ff;background:#ffcf48;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}button:focus-visible,canvas:focus-visible{outline-offset:3px;outline:3px solid #1b91ffb3}.app{background:#ffcf48;width:100%;min-width:320px;height:100%;position:relative;overflow:hidden}.game-shell{width:100%;height:100%;position:absolute;inset:0}.game-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.hud{z-index:5;pointer-events:none;grid-template-columns:minmax(170px,1fr) auto minmax(260px,1fr);align-items:start;gap:12px;display:grid;position:absolute;top:16px;left:16px;right:16px}.hud-cluster{border:1px solid var(--stroke);background:var(--panel);min-height:56px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:auto;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;display:flex}.hud-score{flex-wrap:wrap;justify-self:start}.hud-score strong{font-size:28px;line-height:1}.hud-label,.hud-sub{color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:800}.hud-sub{width:100%}.hud-center{justify-self:center}.timer{border-right:1px solid var(--stroke);justify-content:center;align-items:baseline;gap:3px;min-width:70px;padding-right:12px;display:flex}.timer span{color:#11223d;font-size:32px;font-weight:950;line-height:1}.timer small{color:var(--muted);font-weight:800}.hearts{color:var(--red);align-items:center;gap:4px;display:flex}.heart-off{color:#1720333d}.combo{color:#fff375;text-align:center;background:#172033;border-radius:8px;place-items:center;min-width:72px;padding:6px 10px;display:grid;box-shadow:inset 0 -3px #ffffff1f}.combo span{color:#fff;text-transform:uppercase;font-size:10px;font-weight:950;line-height:1}.combo strong{color:#fff375;font-size:22px;font-weight:950;line-height:1}.hud-controls{justify-self:end}.gesture-pill{color:#20344d;white-space:nowrap;text-overflow:ellipsis;background:#eef7ff;border-radius:8px;align-items:center;gap:8px;min-width:178px;max-width:240px;padding:8px 10px;font-size:13px;font-weight:850;display:flex;overflow:hidden}.gesture-pill.is-ready{color:#c9184a;background:#ffeaf0}.icon-button,.pill-button,.primary-button,.secondary-button,.ghost-button{cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:42px;font-weight:900;transition:transform .13s,filter .13s,background-color .13s;display:inline-flex}.icon-button:hover,.pill-button:hover,.primary-button:hover,.secondary-button:hover,.ghost-button:hover{filter:brightness(1.03);transform:translateY(-1px)}.icon-button:active,.pill-button:active,.primary-button:active,.secondary-button:active,.ghost-button:active{transform:translateY(0)}.icon-button{width:42px;color:var(--ink);border:1px solid var(--stroke);background:#fff}.icon-button.large{width:48px;min-height:48px}.pill-button{color:var(--ink);border:1px solid var(--stroke);background:#fff;padding:0 14px}.pill-button.is-active{color:#fff;background:#172033}.debug-strip{color:#eff8ff;pointer-events:none;background:#172033c7;border-radius:8px;grid-column:1/-1;justify-self:center;padding:7px 10px;font-size:12px;font-weight:800}.webcam-panel{z-index:5;border:1px solid var(--stroke);background:var(--panel);width:208px;box-shadow:var(--shadow);border-radius:8px;position:absolute;bottom:16px;right:16px;overflow:hidden}.webcam-frame{aspect-ratio:16/10;background:#172033;position:relative}.webcam-video,.webcam-landmarks{width:100%;height:100%;position:absolute;inset:0}.webcam-video{object-fit:cover;transform:scaleX(-1)}.webcam-landmarks{opacity:0;pointer-events:none}.webcam-landmarks.is-visible{opacity:1}.webcam-placeholder{color:#dbe8ff;place-items:center;font-size:13px;font-weight:900;display:grid;position:absolute;inset:0}.webcam-status{color:var(--muted);align-items:center;gap:7px;padding:8px 10px;font-size:12px;font-weight:900;display:flex}.status-dot{background:#9aa8bb;border-radius:50%;width:9px;height:9px}.status-dot.is-live{background:#18c37e;box-shadow:0 0 0 4px #18c37e2e}.hand-warning,.toast-warning{z-index:6;color:#fff;opacity:0;pointer-events:none;background:#172033d1;border-radius:8px;padding:10px 14px;font-weight:900;transition:opacity .16s,transform .16s;position:absolute;bottom:26px;left:50%;transform:translate(-50%)translateY(16px)}.hand-warning[data-visible=true],.toast-warning{opacity:1;transform:translate(-50%)translateY(0)}.toast-warning{text-align:center;max-width:min(520px,100vw - 32px);bottom:82px}.start-screen{z-index:10;text-align:center;background:radial-gradient(circle at 18% 18%,#ffffffe6,#fff0 24%),radial-gradient(circle at 82% 24%,#82eeffb3,#82eeff00 22%),linear-gradient(#fff7cd,#ffed7e),repeating-linear-gradient(135deg,#ffffff4d 0 14px,#fff0 14px 46px);flex-direction:column;justify-content:center;align-items:center;gap:clamp(16px,3vh,28px);padding:6vh clamp(18px,4vw,56px);display:flex;position:absolute;inset:0;overflow:hidden}.start-screen button,.start-screen h1,.start-screen .tagline,.start-screen .instructions,.start-stats strong{font-family:Trebuchet MS,Arial Rounded MT Bold,Inter,ui-sans-serif,system-ui,sans-serif}.start-copy{z-index:2;flex-direction:column;align-items:center;max-width:760px;display:flex;position:relative}.eyebrow{color:#c9184a;text-transform:uppercase;margin:0 0 8px;font-size:13px;font-weight:950}.start-copy h1{color:#13213a;text-align:center;text-wrap:balance;text-shadow:0 5px #ffffffbd,0 14px 28px #2c436633;max-width:740px;margin:0;font-size:clamp(42px,8vh,88px);font-weight:950;line-height:.96}.tagline{color:#0f704b;text-align:center;margin:16px 0 0;font-size:26px;font-weight:950;line-height:1.15}.instructions{color:#344157;text-align:center;max-width:640px;margin:18px 0 0;font-size:18px;font-weight:750;line-height:1.45}.start-actions,.game-over-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;display:flex}.primary-button,.secondary-button,.ghost-button{text-align:center;min-height:50px;padding:0 20px;font-size:15px}.primary-button{color:#fff;background:#ff335f;box-shadow:0 5px #b91645,0 16px 30px #ff335f47}.primary-button:disabled{cursor:wait;opacity:.72}.secondary-button{color:#172033;border:1px solid var(--stroke);background:#fff7d8;box-shadow:0 5px #e3b927,0 14px 26px #614b101f}.ghost-button{color:#172033;background:#ffffff85;border:1px solid #1720331a;box-shadow:0 5px #2a354e29}.camera-error{color:#7a1f2d;text-align:center;background:#ffffffb8;border-radius:8px;max-width:620px;margin:14px 0 0;padding:10px 12px;font-weight:800}.start-stats{z-index:2;flex-wrap:wrap;justify-content:center;gap:10px;width:min(860px,100%);display:flex;position:relative}.start-stats>div,.start-stats>button{border:1px solid var(--stroke);background:var(--panel-strong);min-width:180px;box-shadow:var(--shadow);text-align:center;border-radius:8px;flex:180px;padding:14px}.start-stats>button{color:inherit;cursor:pointer}.start-stats span,.result-grid span{color:var(--muted);text-transform:uppercase;margin-bottom:5px;font-size:12px;font-weight:900;display:block}.start-stats strong,.result-grid strong{color:#172033;font-size:23px}.start-stats .about-game{background:#eafff5;flex-basis:300px;place-items:center;gap:5px;display:grid}.start-stats .about-game strong{font-size:18px;line-height:1.2}.home-fruit-canvas{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;inset:0}.game-over{z-index:12;border:1px solid var(--stroke);text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffffff0;border-radius:8px;width:min(760px,100vw - 32px);max-height:calc(100vh - 32px);padding:26px;position:absolute;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%);box-shadow:0 22px 70px #0d182d47}.game-over-backdrop{z-index:11;-webkit-backdrop-filter:blur(5px)saturate(.75);backdrop-filter:blur(5px)saturate(.75);background:radial-gradient(circle at 50% 30%,#ffffff61,#0000 34%),#121b2e8a;position:absolute;inset:0}.game-over h2,.how-to-play h2{color:#172033;margin:0;font-size:34px;line-height:1}.final-score{color:#ff335f;margin-top:10px;font-size:64px;font-weight:950;line-height:1}.final-sub{color:var(--muted);margin:6px 0 0;font-weight:850}.result-grid{text-align:left;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:20px;display:grid}.result-grid>div{border:1px solid var(--stroke);background:var(--panel-strong);border-radius:8px;min-width:0;padding:12px 10px;overflow:hidden;box-shadow:0 8px 20px #0d182d1f}.result-grid strong{white-space:nowrap;text-overflow:ellipsis;font-size:clamp(18px,4vw,24px);display:block;overflow:hidden}.game-over-actions{justify-content:center}.primary-button.compact{min-height:42px;padding:0 16px}.save-score-panel{text-align:left;background:#fff7d8;border:1px solid #1720331f;border-radius:8px;gap:12px;margin-top:18px;padding:14px;display:grid}.save-score-copy{color:#172033;align-items:center;gap:10px;display:flex}.save-score-copy svg{color:#ff9f1c;flex:none}.save-score-copy strong,.save-score-copy span{display:block}.save-score-copy strong{font-size:18px;font-weight:950}.save-score-copy span{color:#59677d;margin-top:2px;font-size:13px;font-weight:800}.save-score-form{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.save-score-form input{color:#172033;min-width:0;height:42px;font:inherit;background:#fff;border:2px solid #1720331f;border-radius:8px;padding:0 12px;font-weight:850}.save-score-form input:focus{border-color:#1b91ff;outline:3px solid #1b91ff3d}.leaderboard-board{text-align:left;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}.leaderboard-column{background:#fff;border:1px solid #1720331a;border-radius:8px;min-width:0;padding:12px}.leaderboard-column.is-active{background:#eafff5;box-shadow:inset 0 0 0 2px #0aa36c2e}.leaderboard-column h3{color:#172033;align-items:center;gap:7px;margin:0 0 10px;font-size:15px;font-weight:950;display:flex}.leaderboard-column ol{gap:7px;margin:0;padding:0;list-style:none;display:grid}.leaderboard-column li{background:#ffcf4829;border-radius:8px;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:7px;padding:8px;display:grid}.leaderboard-column .rank{color:#ff335f;font-size:12px;font-weight:950}.leaderboard-column .player{color:#273349;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:900;overflow:hidden}.leaderboard-column li strong{color:#172033;font-size:14px;font-weight:950}.empty-leaderboard{color:#718097;text-align:center;margin:0;padding:16px 8px;font-weight:850}.modal-backdrop{z-index:20;background:#10192a6b;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.how-to-play,.about-modal{background:#fffdf5;border-radius:8px;width:min(760px,100%);max-height:min(760px,100vh - 32px);padding:24px;position:relative;overflow:auto;box-shadow:0 22px 70px #0d182d52}.about-modal{text-align:center;width:min(480px,100%)}.modal-close{position:absolute;top:14px;right:14px}.play-demo{gap:10px;margin-top:18px;display:grid}.how-demo-canvas{background:#8ee7f2;border:1px solid #1720331f;border-radius:8px;width:100%;height:230px;display:block}.demo-replay{border:1px solid var(--stroke);min-height:38px;color:var(--ink);cursor:pointer;background:#fff;border-radius:8px;justify-self:center;align-items:center;gap:7px;padding:0 14px;font-weight:900;display:inline-flex}.how-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px;display:grid}.how-step{background:#fff;border:1px solid #1720331a;border-radius:8px;min-width:0;padding:12px;box-shadow:0 8px 22px #0d182d14}.step-number{color:#172033;background:#ffcf48;border-radius:50%;place-items:center;width:30px;height:30px;margin-bottom:8px;font-weight:950;display:grid}.how-step strong{color:#172033;font-size:16px;display:block}.how-step p{color:#526177;margin:7px 0 0;font-size:13px;font-weight:750;line-height:1.35}.about-badge{color:#fff;background:#ff335f;border-radius:50%;place-items:center;width:58px;height:58px;margin:0 auto 12px;display:grid;box-shadow:0 10px 22px #ff335f42}.about-maker{color:#0f704b;text-align:center;margin:12px 0 0;font-size:20px;font-weight:950}.about-text{color:#526177;max-width:360px;margin:10px auto 0;font-weight:750;line-height:1.45}@media (width<=960px){.hud{grid-template-columns:1fr;align-items:stretch}.hud-score,.hud-center,.hud-controls{justify-self:stretch}.hud-controls{flex-wrap:wrap}.gesture-pill{flex:1;min-width:170px}.webcam-panel{width:170px}.start-screen{justify-content:center;overflow-y:auto}.start-stats{width:min(680px,100%)}.how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.home-fruit-canvas{opacity:.8}}@media (width<=640px){html,body,#root{overflow:auto}.app{min-height:100%}.hud{gap:8px;top:10px;left:10px;right:10px}.hud-cluster{min-height:48px;padding:8px}.hud-score strong,.timer span{font-size:24px}.combo{min-width:62px}.combo strong{font-size:18px}.webcam-panel{width:142px;bottom:10px;right:10px}.webcam-status{font-size:11px}.hand-warning{text-align:center;width:calc(100vw - 24px);bottom:154px}.start-screen{padding:84px 16px 22px}.start-copy h1{font-size:46px}.tagline{font-size:21px}.instructions{font-size:16px}.primary-button,.secondary-button,.ghost-button{width:100%}.start-stats,.result-grid{grid-template-columns:1fr 1fr;display:grid}.start-stats .about-game{grid-column:1/-1}.home-fruit-canvas{opacity:.62}.game-over{padding:20px}.final-score{font-size:52px}.leaderboard-board,.save-score-form{grid-template-columns:1fr}.how-to-play,.about-modal{padding:20px}.how-demo-canvas{height:190px}.how-steps{grid-template-columns:1fr}}