*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#eee;overflow:hidden}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}#canvas-container canvas{display:block}.ui-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;display:flex;flex-direction:column;padding:1rem;padding-top:max(1rem,env(safe-area-inset-top));padding-bottom:max(1rem,env(safe-area-inset-bottom));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}.ui-overlay>*{pointer-events:auto}.hud{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.level-info{display:flex;align-items:center;gap:.75rem}.level-info button{padding:.5rem .75rem;border:none;border-radius:6px;background:#16213ee6;color:#eee;cursor:pointer;font-size:.85rem;transition:background .2s;min-height:44px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.level-info button:hover{background:#1a4980e6}#level-indicator{font-size:.9rem;color:#aaa;background:#16213e99;padding:.4rem .75rem;border-radius:4px}.controls{display:flex;gap:.5rem}.controls button{padding:.5rem .75rem;border:none;border-radius:6px;background:#16213ee6;color:#eee;cursor:pointer;font-size:.85rem;transition:background .2s;min-height:44px;min-width:44px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.controls button:hover:not(:disabled){background:#1a4980e6}.controls button:disabled{opacity:.5;cursor:not-allowed}.camera-controls{position:absolute;right:max(1rem,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.5rem}.camera-controls button{padding:.5rem .75rem;border:none;border-radius:4px;background:#16213ee6;color:#eee;cursor:pointer;font-size:.8rem;transition:background .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);min-width:48px;min-height:48px}.camera-controls button:hover{background:#1a4980e6}.camera-controls button:active{background:#0f3460e6;transform:scale(.95)}.aspect-legend{display:flex;justify-content:center;gap:.75rem;margin-top:auto;flex-wrap:wrap}.aspect-item{display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;background:#16213ecc;border-radius:20px;cursor:pointer;transition:all .2s;border:2px solid transparent;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.aspect-item:hover{background:#1a4980e6;transform:scale(1.05)}.aspect-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 6px currentColor}.aspect-name{font-size:.85rem;font-weight:500}.aspect-status{display:none}.aspect-item.completed{background:linear-gradient(135deg,#4caf504d,#16213ee6);border-color:#4caf50}.aspect-item.completed .aspect-dot{box-shadow:0 0 8px #4caf50,inset 0 0 4px #ffffff80}.aspect-item.active{border-color:var(--aspect-color, #fff);box-shadow:0 0 12px var(--aspect-color, rgba(255, 255, 255, .3))}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:100;pointer-events:auto}.overlay.hidden{display:none}.overlay-content{background:#16213e;padding:2rem 3rem;border-radius:12px;text-align:center}.overlay-content h2{margin-bottom:.5rem;color:#4caf50}.overlay-content p{margin-bottom:1.5rem;color:#aaa}.overlay-content button{padding:.75rem 2rem;border:none;border-radius:6px;background:#4caf50;color:#fff;font-size:1rem;cursor:pointer;transition:background .2s;min-height:48px}.overlay-content button:hover{background:#45a049}.help-content{text-align:left;max-width:400px}.help-content h2{text-align:center;margin-bottom:1rem}.help-content ul{margin:1rem 0;padding-left:1.5rem}.help-content li{margin-bottom:.5rem;line-height:1.4}.help-content .help-tip{font-size:.85rem;color:#888;font-style:italic;margin-top:1rem}.help-content button{display:block;margin:1.5rem auto 0}.win-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.win-buttons button{min-width:100px}#btn-next-level{background:#2196f3}#btn-next-level:hover{background:#1976d2}#btn-level-select-win{background:#607d8b}#btn-level-select-win:hover{background:#455a64}.level-select-content{max-width:320px;width:calc(100vw - 2rem);padding:1.5rem}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0}.level-btn{aspect-ratio:1;border:2px solid #334455;border-radius:8px;background:#16213ee6;color:#eee;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.4rem}.level-btn:hover:not(.locked){background:#1a4980e6;border-color:#4caf50;transform:scale(1.05)}.level-btn.completed{border-color:#4caf50;background:linear-gradient(135deg,#4caf504d,#16213ee6)}.level-btn.current{border-color:#2196f3;box-shadow:0 0 10px #2196f380}.level-btn.locked{opacity:.4;cursor:not-allowed}.level-number{font-size:1.1rem}.level-status{font-size:.6rem;margin-top:2px}.level-btn.completed .level-status:after{content:"✓";color:#4caf50}.level-btn.locked .level-status:after{content:"🔒"}#btn-help{font-weight:700;font-size:1.1rem;width:48px}.tooltip{position:fixed;background:#f44;color:#fff;padding:.5rem 1rem;border-radius:4px;font-size:.85rem;pointer-events:none;z-index:50;transform:translate(-50%,-100%);margin-top:-10px}.tooltip.hidden{display:none}@media (max-width: 600px){.ui-overlay{padding:.5rem;padding-top:max(.5rem,env(safe-area-inset-top));padding-bottom:max(.5rem,env(safe-area-inset-bottom));padding-left:max(.5rem,env(safe-area-inset-left));padding-right:max(.5rem,env(safe-area-inset-right))}.hud{flex-wrap:wrap;gap:.4rem}.level-info{gap:.4rem}.level-info button{padding:.4rem .6rem;font-size:.75rem;min-height:38px}#level-indicator{font-size:.75rem;padding:.3rem .5rem}.controls{gap:.3rem}.controls button{padding:.4rem .5rem;font-size:.7rem;min-height:38px;min-width:38px}#btn-help{width:38px;font-size:1rem}.camera-controls{right:max(.5rem,env(safe-area-inset-right));gap:.25rem}.camera-controls button{padding:.4rem .5rem;font-size:.7rem;min-width:40px;min-height:40px}.aspect-legend{gap:.5rem}.aspect-item{padding:.4rem .6rem}.aspect-name{font-size:.75rem}.aspect-dot{width:12px;height:12px}.level-select-content{padding:1.25rem;max-width:280px}.level-select-content h2{font-size:1.2rem;margin-bottom:.5rem}.level-grid{gap:.5rem}.level-btn{font-size:1rem;min-width:40px;min-height:40px}.level-number{font-size:1rem}.level-status{font-size:.5rem}}@media (max-width: 380px){.hud{gap:.3rem}.level-info button{padding:.3rem .5rem;font-size:.7rem}#level-indicator{font-size:.7rem;padding:.25rem .4rem}.controls button{padding:.3rem .4rem;font-size:.65rem;min-height:36px;min-width:36px}#btn-help{width:36px}.aspect-item{padding:.3rem .5rem}.aspect-name{font-size:.7rem}.aspect-dot{width:10px;height:10px}.level-select-content{padding:1rem;max-width:260px;width:calc(100vw - 1.5rem)}.level-select-content h2{font-size:1.1rem}.level-grid{gap:.4rem;margin:.75rem 0}.level-btn{font-size:.9rem;min-width:36px;min-height:36px;padding:.3rem;border-radius:6px}.level-number{font-size:.9rem}#btn-close-level-select{padding:.6rem 1.5rem;font-size:.9rem}}