:root{--sky-top:#4fa8e0;--sky-mid:#8bcdf0;--sky-bottom:#e3f5fc;--ink:#4a3220;--ink-soft:#6b5240;--apple:#e2432f;--apple-dark:#ad2a1c;--card:#fffaf0;--correct:#5f9a4a;--wrong:#c8402d;--display-font:"Zen Maru Gothic", system-ui, sans-serif;--body-font:"Inter", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:var(--body-font);background:#3f8fc2;color:var(--ink);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{position:relative;width:100%;height:100vh;height:100dvh;max-width:560px;margin:0 auto;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 40px #0004}.screen{display:none;flex-direction:column;height:100%;width:100%;position:relative}.screen.active{display:flex}.bg-sky{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-bottom) 100%);overflow:hidden}.ribbon{position:relative;display:inline-block;background:var(--card);color:var(--ink);font-family:var(--display-font);font-weight:700;padding:8px 26px;margin:2px 14px;border:2.5px solid var(--ink);clip-path:polygon(0% 50%,5% 0%,100% 0%,95% 50%,100% 100%,5% 100%);box-shadow:0 3px #0000001a}#screen-start{align-items:center;justify-content:center;text-align:center;padding:26px 22px}.start-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px}.start-hero{width:170px;height:auto;filter:drop-shadow(0 8px 10px #00000030)}.title{font-family:var(--display-font);font-weight:900;font-size:clamp(24px,6.6vw,30px);color:#2d3f1f;margin:2px 0 0;text-shadow:0 1px 0 #ffffff80}.subtitle{font-size:13.5px;color:#2d4a63;margin:0 0 4px}.rules{background:var(--card);border:2px solid #00000018;border-radius:18px;padding:16px 18px;text-align:left;font-size:13.5px;line-height:1.75;color:var(--ink-soft);max-width:380px;box-shadow:0 4px #0000000f}.rules b{color:var(--apple-dark)}.rules .reward-row{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:12.5px;flex-wrap:wrap}.btn-primary{font-family:var(--display-font);font-weight:700;font-size:18px;color:#fff8ec;background:linear-gradient(180deg,#ef6b52,var(--apple-dark));border:none;border-radius:999px;padding:14px 38px;margin-top:8px;box-shadow:0 6px #7a1f14,0 10px 16px #00000030;cursor:pointer;transition:transform .08s ease}.btn-primary:active{transform:translateY(4px);box-shadow:0 2px #7a1f14,0 4px 8px #00000030}.btn-primary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}#screen-game{height:100%}.hud{position:relative;z-index:2;display:flex;justify-content:space-between;padding:12px 18px;font-family:var(--display-font);font-size:14px;color:var(--ink)}.hud-pill{background:var(--card);border:2px solid #00000018;border-radius:999px;padding:6px 14px;display:flex;align-items:center;gap:6px;box-shadow:0 2px #0000000f}.hud-pill .num{font-size:16px;color:var(--apple-dark)}.orchard{position:relative;flex:1 1 auto;min-height:0;z-index:1;display:flex;flex-direction:column;align-items:center;overflow:visible}.tree-wrap{position:relative;width:100%;max-width:560px;flex:0 0 auto;margin:-6px auto 0}.tree-wrap img{width:100%;height:auto;display:block}.fall-zone{position:relative;width:100%;flex:1 1 auto;min-height:60px}.apple-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none}.apple{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:52px;z-index:3}.apple img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 8px #00000040)}.apple-label{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-3deg);background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:4px 8px;box-shadow:0 2px #00000026;text-align:center;min-width:64px}.apple-label .form{font-family:var(--display-font);font-weight:700;font-size:13px;color:var(--ink);line-height:1.15}.apple-label .meaning{font-family:var(--body-font);font-size:8px;color:var(--ink-soft);margin-top:1px}.apple.correct{animation:pop .5s ease forwards}.apple.wrong{animation:shake .45s ease}@keyframes pop{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.25);filter:brightness(1.15)}to{transform:translate(-50%,-50%) scale(.2);opacity:0}}@keyframes shake{0%,to{transform:translate(-50%,-50%) rotate(0)}20%{transform:translate(-58%,-50%) rotate(-8deg)}40%{transform:translate(-42%,-50%) rotate(8deg)}60%{transform:translate(-56%,-50%) rotate(-6deg)}80%{transform:translate(-44%,-50%) rotate(6deg)}}.mark{position:absolute;font-size:34px;z-index:4;pointer-events:none;animation:markFloat .8s ease forwards}@keyframes markFloat{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}to{opacity:0;transform:translate(-50%,-120%) scale(1)}}.baskets{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:4px 6px;padding:6px 10px calc(12px + env(safe-area-inset-bottom));align-items:end}@media (max-width:480px){.baskets{grid-template-columns:repeat(3,1fr);gap:10px 8px}}.basket{position:relative;border:none;cursor:pointer;padding:0;background:none;display:block;transition:transform .08s ease}.basket:active{transform:translateY(3px) scale(.97)}.basket:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:10px}.basket img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 5px #00000030);transition:filter .15s ease}.basket-label{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:2px 7px;font-family:var(--display-font);font-weight:700;font-size:12.5px;color:var(--ink);box-shadow:0 2px #00000020;white-space:nowrap}.basket.correct img{filter:drop-shadow(0 0 3px var(--correct)) drop-shadow(0 0 8px var(--correct))}.basket.wrong img{filter:drop-shadow(0 0 3px var(--wrong)) drop-shadow(0 0 8px var(--wrong))}.basket.correct,.basket.wrong{animation:bump .4s ease}@keyframes bump{0%,to{transform:scale(1)}40%{transform:scale(1.08)}}#screen-result{align-items:center;justify-content:center;text-align:center;padding:22px}.result-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px}.result-icon{max-width:78%;height:auto;filter:drop-shadow(0 8px 10px #00000030);animation:pop2 .6s ease}.result-icon.small{max-width:39%}@keyframes pop2{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}.result-desc{font-size:14px;color:#2d4a63;margin:2px 0 6px}.result-score{font-family:var(--display-font);font-weight:700;font-size:15px;color:var(--ink);background:var(--card);border:2px solid #00000018;border-radius:999px;padding:7px 20px}@media (prefers-reduced-motion: reduce){.apple,.mark,.basket{animation:none!important}}