*{margin:0;padding:0;box-sizing:border-box}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html,body{width:100%;height:100%;overflow-x:hidden;position:fixed;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body{background-color:#f5f5f5;color:#333;margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%;height:100%;display:flex;flex-direction:column}.App{text-align:center;font-family:sans-serif;width:100%;max-width:100%;overflow-x:hidden;margin:0;padding:0;position:relative}main{padding:0;margin:0;display:flex;flex-direction:column;align-items:center;width:100%}.game-container{position:relative;width:100%;max-width:400px;margin:55px auto 0;display:flex;flex-direction:column;align-items:center}.score-board{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;margin-bottom:10px;padding:0 10px}.score-group,.button-group{display:flex;gap:15px}.score-display,.high-score-display{white-space:nowrap;background-color:#282c34cc;color:#fff;padding:4px 12px;border-radius:15px}.next-fruit{position:absolute;top:80px;left:50%;transform:translate(-50%);font-size:.9rem;font-weight:700;color:#333;background-color:#ffffffb3;padding:2px 8px;border-radius:10px;z-index:10}.game-over-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:20;border-radius:10px}.game-over-content{background-color:#fff;padding:20px;border-radius:10px;text-align:center;width:80%;max-width:300px;box-shadow:0 4px 8px #0003}.game-over-content h2{color:#e74c3c;margin-top:0;margin-bottom:15px}.game-over-content p{margin:10px 0;font-size:1.1rem}.restart-button{margin-top:15px;padding:10px 20px;background-color:#3498db;color:#fff;border:none;border-radius:5px;font-size:1rem;cursor:pointer;transition:background-color .3s}.restart-button:hover{background-color:#2980b9}.replay-button,.photo-button{padding:4px 12px;font-size:.9rem;background-color:#3498db;color:#fff;border:none;border-radius:15px;cursor:pointer;min-width:80px;outline:none}.replay-button:hover,.photo-button:hover{background-color:#2980b9}.replay-button:focus,.photo-button:focus{outline:none;box-shadow:0 0 0 2px #3498db66}.upload-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;padding:65px 20px 20px;text-align:center;background-color:#f0f8ff;color:#333;margin:0;position:fixed;top:0;left:0;right:0;bottom:0;box-sizing:border-box;overflow-y:auto;z-index:50}.upload-title{color:#3f6f9f;margin-top:0;margin-bottom:15px}.file-input-container{position:relative;display:inline-block;margin:15px 0}.file-input{position:absolute;left:-9999px;opacity:0;width:.1px;height:.1px}.file-input-label{display:inline-block;padding:10px 20px;background-color:#3498db;color:#fff;border-radius:15px;cursor:pointer;font-size:1rem;text-align:center;transition:background-color .3s}.file-input-label:hover{background-color:#2980b9}.file-input-text{margin-top:8px;font-size:.9rem;color:#666}.preview-list{margin:10px 0}.preview-image{width:60px;height:60px;border-radius:50%;margin:4px;border:2px solid #3f6f9f}.start-button{padding:8px 16px;font-size:1rem;background-color:#3498db;color:#fff;border:none;border-radius:15px;cursor:pointer;margin:15px 0}.start-button:disabled{opacity:.5;cursor:not-allowed}.start-button:hover:not(:disabled){background-color:#2980b9}.canvas-container{width:100%;max-width:400px;margin:0 auto;touch-action:none;position:relative;border-radius:10px;overflow:hidden}.upload-instructions{margin-top:16px}.upload-instruction-main{margin-bottom:16px}.upload-instruction-details{font-size:.9rem;color:#555;line-height:1.4;text-align:left;padding-left:10px}.upload-instruction-details p{margin:6px 0;display:flex;align-items:center}.instruction-point{color:#3f6f9f;font-weight:700;margin-right:6px;display:inline-block;width:18px;height:18px;background-color:#3f6f9f;color:#fff;border-radius:50%;text-align:center;line-height:18px;font-size:12px}.fruit-mapping-container{margin-top:20px;width:100%;max-width:500px}.mapping-title{font-size:1.2rem;color:#3f6f9f;margin-bottom:12px;text-align:center}.fruit-mapping-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 10px;margin-bottom:20px}.fruit-mapping-item{cursor:grab;transition:opacity .2s;position:relative;width:70px;height:70px;margin-bottom:10px;-webkit-user-select:none;user-select:none;touch-action:none}.fruit-mapping-item.dragging{opacity:.4}.mapping-image{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #3f6f9f}.fruit-label{position:absolute;bottom:-5px;right:-5px;background-color:#3f6f9f;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;box-shadow:0 1px 3px #0000004d}.fruit-number{display:inline-block;line-height:1}.mapping-instructions{text-align:center;margin-bottom:1rem;color:#666;font-size:.9rem}@media (max-width: 768px){.fruit-mapping-item{margin:5px}}@media (max-width: 480px){.fruit-mapping-list{gap:8px;padding:0 5px;margin-bottom:20px}.fruit-mapping-item{width:60px;height:60px}}@media (max-width: 480px){main{padding:5px 0}.score-group,.button-group{gap:8px}.score-display,.high-score-display{font-size:.9rem;padding:4px 8px}.game-over-content{padding:15px}.game-over-content h2{font-size:1.3rem}.game-over-content p{font-size:1rem}.restart-button{padding:8px 16px;font-size:.9rem}.reset-button{padding:8px 12px;font-size:.8rem;margin-left:5px}}.reset-button{padding:10px 20px;font-size:.9rem;background-color:#78909c;color:#fff;border:none;border-radius:15px;cursor:pointer;margin-left:10px;outline:none}.reset-button:hover{background-color:#607d8b}.reset-button:focus{outline:none;box-shadow:0 0 0 2px #78909c66}.hamburger-icon{position:absolute;top:50%;right:15px;transform:translateY(-50%);width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:transparent;border:none;z-index:501;cursor:pointer}.hamburger-icon span{display:block;width:26px;height:3px;margin:3px 0;background:#fff;border-radius:2px;transition:.3s}.hamburger-icon.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}.hamburger-icon.open span:nth-child(2){opacity:0}.hamburger-icon.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.side-menu{position:fixed;top:0;left:0;width:220px;height:100vh;background:#f0f8ff;box-shadow:2px 0 8px #00000014;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:502;padding-top:60px;display:flex;flex-direction:column}.side-menu.open{transform:translate(0)}.side-menu nav ul{list-style:none;padding:0;margin:0}.side-menu .menu-btn{display:block;width:100%;padding:14px 24px;background:none;border:none;text-align:left;font-size:1.1rem;color:#234;cursor:pointer;border-bottom:1px solid #e0e0e0;transition:background .2s;outline:none;text-decoration:none}.side-menu .menu-btn:hover{background:#e6f0fa}.menu-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000026;z-index:501}.game-header{background-color:#282c34;padding:10px 0;color:#fff;width:100%;position:fixed;top:0;left:0;text-align:center;z-index:500;height:45px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.game-header h1{margin:0;font-size:1.5rem}@media (max-width: 480px){.game-header{padding:8px 0;height:40px}.game-header h1{font-size:1.3rem}.hamburger-icon{right:10px}}@media (max-width: 480px){.upload-container,.game-container{margin-top:50px}}