*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:Avenir Next,Helvetica Neue,PingFang TC,sans-serif;background:#bfe7ff}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 48%,rgba(49,58,91,.13) 100%),linear-gradient(180deg,rgba(255,255,255,.18),transparent 22%,rgba(255,201,87,.08))}canvas{touch-action:none}.ui-panel{position:fixed;top:16px;left:16px;z-index:10;display:flex;flex-direction:column;gap:10px;padding:16px;width:240px;background:#fff5dcd6;border:2px solid rgba(255,200,87,.9);border-radius:14px;color:#2f2b25;box-shadow:0 12px #4c37221f,0 22px 50px #2c435638;-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15)}.ui-panel h2{font-size:15px;font-weight:800;letter-spacing:0}.ui-panel.is-collapsed{width:auto;padding:0;gap:6px;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.panel-toggle{width:100%;padding:10px 14px;border:2px solid #7a4f25;border-radius:10px;background:#ffc857;color:#2c1b12;box-shadow:0 4px #7a4f25,0 16px 34px #2c435633;cursor:pointer;font:inherit;font-size:13px;font-weight:800}.panel-toggle:hover{background:#ff8f70}.ui-panel label{font-size:12px;color:#69573e}.ui-panel input:not([type=file]),.ui-panel select,.ui-panel .upload-btn{width:100%;padding:8px 10px;font-size:13px;border-radius:8px;border:2px solid rgba(76,55,34,.16);background:#fffaf0;color:#2f2b25;cursor:pointer}.ui-panel .upload-btn{text-align:center;background:#ff8f70;border:2px solid #7a4f25;color:#2c1b12;font-weight:800;box-shadow:0 4px #7a4f25;transition:background .15s ease}.ui-panel .upload-btn:hover{background:#ffc857}.ui-panel .upload-btn.secondary{background:#9ed6d1}.ui-panel .upload-btn.danger{background:#555;color:#fff4d8}.ui-panel .upload-btn:disabled{cursor:wait;opacity:.72}.sync-status{min-height:14px;font-size:11px;line-height:1.3;color:#69573e}.admin-login{display:flex;flex-direction:column;gap:8px}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#69573e}.admin-row button{padding:5px 8px;border:2px solid rgba(76,55,34,.2);border-radius:8px;background:#fffaf0;color:#2f2b25;cursor:pointer;font:inherit;font-size:12px;font-weight:700}.login-error{font-size:11px;line-height:1.3;color:#a93824}.ui-panel input[type=file]{display:none}.music-control{position:fixed;top:16px;right:16px;z-index:12}.music-button{padding:10px 14px;min-width:88px;border:2px solid #7a4f25;border-radius:10px;background:#ffc857;color:#2c1b12;box-shadow:0 4px #7a4f25,0 16px 34px #2c435633;cursor:pointer;font:inherit;font-size:13px;font-weight:800}.music-button:hover{background:#ff8f70}.lock-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;background:#0000008c;cursor:pointer}.lock-overlay h1{font-size:28px;font-weight:700}.lock-overlay p{font-size:14px;color:#c8c8d0}.crosshair{position:fixed;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ffffffb3;z-index:5;pointer-events:none}.joystick-base{position:fixed;bottom:90px;left:30px;width:130px;height:130px;border-radius:50%;background:#fff5dc70;border:3px solid rgba(255,200,87,.78);box-shadow:0 14px 40px #2c43563d;z-index:15;touch-action:none;display:flex;align-items:center;justify-content:center}.joystick-knob{width:60px;height:60px;border-radius:50%;background:#ff8f70eb;border:3px solid #fff4d8;box-shadow:inset 0 -6px #7a4f252e;pointer-events:none}.zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#1f253abd;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:24px}.zoom-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw;max-height:88vh}.zoom-img{max-width:88vw;max-height:74vh;border-radius:8px;box-shadow:0 18px #0000002e,0 28px 70px #0000007a;border:8px solid #fff4d8}.zoom-placeholder{width:min(70vw,480px);height:min(50vh,360px);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#ffffffe6;font-size:18px;border:8px solid #fff4d8;box-shadow:0 18px #0000002e,0 28px 70px #0000007a}.zoom-caption{color:#fff;font-size:15px;letter-spacing:0;font-weight:700}.zoom-close{padding:10px 22px;font-size:14px;color:#2c1b12;background:#ffc857;border:2px solid #7a4f25;border-radius:24px;cursor:pointer;font-weight:800}.zoom-close:hover{background:#ff8f70}@media (max-width: 640px){.ui-panel{top:10px;left:10px;width:min(220px,calc(100vw - 20px));padding:12px}.ui-panel.is-collapsed{width:auto;padding:0}.music-control{top:10px;right:10px}.music-button{min-width:74px;padding:8px 10px;font-size:12px}}