:root{--primary-dark: #262626;--accent-cyan: #26C6DA;--text-light: #ffffff;--text-dim: #cccccc;--panel-bg: rgba(38, 38, 38, .95);--shadow-dark: rgba(0, 0, 0, .8)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--primary-dark);color:var(--text-light);overflow:hidden}#app{width:100%;height:100%;position:relative}#canvas{display:block;width:100%;height:100%;cursor:crosshair;outline:none;border:none}#canvas:focus{outline:none}.hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.controls-hint{position:absolute;top:20px;left:20px;background:var(--panel-bg);padding:15px 20px;border-radius:8px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:opacity .5s ease}.controls-hint.fade-out{opacity:0}.desktop-hint,.mobile-hint{display:none}.controls-hint p{font-size:14px;color:var(--text-dim);margin:0}.virtual-joystick{position:absolute;bottom:30px;left:30px;width:120px;height:120px;pointer-events:auto;display:none;touch-action:none}.joystick-base{width:100%;height:100%;border:3px solid var(--accent-cyan);border-radius:50%;background:#26c6da1a;position:relative}.joystick-handle{width:40px;height:40px;background:var(--accent-cyan);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 10px var(--shadow-dark);transition:all .1s ease}.compliance-panel{position:absolute;top:0;right:-400px;width:400px;height:100%;background:var(--panel-bg);backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,.1);transition:right .3s ease;z-index:200;pointer-events:auto}.compliance-panel.open{right:0}.panel-content{padding:30px;height:100%;overflow-y:auto}.close-btn{position:absolute;top:20px;right:20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--text-light);font-size:24px;cursor:pointer;width:35px;height:35px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;pointer-events:auto;z-index:1000}.close-btn:hover{background-color:#fff3;border-color:#fff6;transform:scale(1.1)}.panel-content h2{color:var(--accent-cyan);margin-bottom:30px;font-size:24px}.info-grid{display:flex;flex-direction:column;gap:20px}.info-item{display:flex;flex-direction:column;gap:5px}.info-item label{font-weight:600;color:var(--accent-cyan);font-size:14px;text-transform:uppercase;letter-spacing:.5px}.info-item span{color:var(--text-light);font-size:16px;line-height:1.4}.info-section{margin-top:30px;padding-top:20px;border-top:1px solid rgba(38,198,218,.3)}.info-section h3{color:var(--accent-cyan);margin-bottom:20px;font-size:20px}.vision-grid{display:grid;grid-template-columns:1fr;gap:20px}.vision-item{background:#26c6da1a;padding:15px;border-radius:8px;border-left:3px solid var(--accent-cyan)}.vision-item h4{color:var(--accent-cyan);margin-bottom:8px;font-size:16px}.vision-item p{color:var(--text-dim);font-size:14px;line-height:1.4;margin:0}.loading{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-dark);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .5s ease}.loading.hidden{opacity:0;pointer-events:none}.loading-content{text-align:center}.spinner{width:60px;height:60px;border:3px solid rgba(38,198,218,.3);border-top:3px solid var(--accent-cyan);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-content p{color:var(--text-dim);font-size:18px}@media (max-width: 768px){.controls-hint{top:10px;left:10px;right:10px;padding:12px 16px}.mobile-hint{display:block!important}.desktop-hint{display:none!important}.virtual-joystick{display:block}.compliance-panel{width:100%;right:-100%}.panel-content{padding:20px}}@media (min-width: 769px){.desktop-hint{display:block!important}.mobile-hint{display:none!important}}.guidance-system{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel-bg);backdrop-filter:blur(20px);border:1px solid rgba(38,198,218,.3);border-radius:12px;padding:30px;max-width:500px;text-align:center;z-index:500;display:none}.guidance-system.active{display:block}.guidance-content h3{color:var(--accent-cyan);margin-bottom:15px;font-size:24px}.guidance-content p{color:var(--text-light);margin-bottom:20px;line-height:1.5}.guidance-progress{display:flex;align-items:center;gap:15px;margin-bottom:20px}.progress-bar{flex:1;height:6px;background:#fff3;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-cyan),#00e5ff);width:12.5%;transition:width .3s ease}.progress-text{color:var(--text-dim);font-size:14px;white-space:nowrap}.guidance-btn{background:var(--accent-cyan);color:var(--primary-dark);border:none;padding:12px 24px;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s ease;position:relative;z-index:501;pointer-events:auto}.guidance-btn:hover{background:#1eb8c4;transform:translateY(-1px)}.zone-info{position:absolute;bottom:20px;left:20px;right:20px;background:var(--panel-bg);backdrop-filter:blur(15px);border:1px solid rgba(38,198,218,.3);border-radius:12px;padding:20px;transform:translateY(100%);transition:transform .3s ease;z-index:300;pointer-events:auto}.zone-info.active{transform:translateY(0)}.zone-content{position:relative}.zone-content h3{color:var(--accent-cyan);margin-bottom:10px;font-size:20px}.zone-content p{color:var(--text-light);margin-bottom:15px;line-height:1.4}.zone-features{display:flex;flex-wrap:wrap;gap:8px}.zone-feature{background:#26c6da33;color:var(--accent-cyan);padding:4px 12px;border-radius:12px;font-size:12px;border:1px solid rgba(38,198,218,.3)}.mini-map{position:absolute;bottom:20px;right:20px;background:var(--panel-bg);backdrop-filter:blur(10px);border:2px solid rgba(38,198,218,.5);border-radius:50%;padding:15px;z-index:200;width:180px;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}#mini-map-canvas{border-radius:50%;background:#00000080;border:2px solid rgba(38,198,218,.3)}.mini-map-legend{margin-top:10px;font-size:9px;text-align:center;width:100%}.legend-item{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:3px;color:var(--text-dim);font-weight:700}.legend-dot{width:8px;height:8px;border-radius:50%}.legend-dot.player{background:#0f0}.legend-dot.zone{background:var(--accent-cyan)}.legend-dot.special{background:#ff6b00}.interaction-indicator{position:absolute;background:var(--accent-cyan);color:var(--primary-dark);padding:8px 12px;border-radius:20px;font-size:14px;font-weight:600;pointer-events:none;z-index:1000;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@media (prefers-reduced-motion: reduce){.spinner,.interaction-indicator{animation:none}*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width: 768px){.guidance-system{left:10px;right:10px;transform:translate(0) translateY(-50%);padding:20px}.zone-info{left:10px;right:10px}.mini-map{bottom:10px;right:10px;padding:12px;width:140px;height:140px}#mini-map-canvas{width:100px;height:100px}.mini-map-legend{font-size:8px;margin-top:6px}}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.interaction-indicator{animation:fadeIn .3s ease-in-out}