:root{--bg-sand:#f1f5f9;--panel-bg:rgba(255,255,255,.82);--panel-border:rgba(203,213,225,.85);--panel-shadow:0 10px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04);--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--tactical-orange:#ea580c;--tactical-orange-glow:rgba(234,88,12,.25);--tactical-blue:#0284c7;--tactical-green:#16a34a;--tactical-red:#dc2626;--accent-gold:#d97706;--accent-slate:#334155;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono:"Consolas", "Roboto Mono", "Courier New", monospace}*{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-sans);background-color:var(--bg-sand);color:var(--text-primary);overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.tactical-header{z-index:20;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:14px;left:18px;right:18px}.tactical-brand{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);pointer-events:auto;border-radius:8px;align-items:center;gap:12px;padding:8px 16px;display:flex}.brand-badge{background:var(--tactical-orange);color:#fff;letter-spacing:1px;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:800}.brand-title h1{letter-spacing:.8px;color:var(--text-primary);font-size:15px;font-weight:800;line-height:1.2}.brand-title .sub{letter-spacing:1.2px;color:var(--text-muted);font-size:9px;font-weight:700}.tactical-stats{pointer-events:auto;align-items:center;gap:10px;display:flex}.stat-pill{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:6px;flex-direction:column;align-items:flex-end;padding:6px 14px;display:flex}.stat-label{color:var(--text-secondary);letter-spacing:.5px;font-size:9px;font-weight:700}.stat-val{font-family:var(--font-mono);color:var(--text-primary);font-size:14px;font-weight:800}.stat-val.highlight{color:var(--tactical-orange)}.header-btn{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);color:var(--text-primary);cursor:pointer;box-shadow:var(--panel-shadow);border-radius:6px;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:700;transition:all .2s;display:flex}.header-btn:hover{border-color:var(--tactical-blue);color:var(--tactical-blue);background:#fff}.panel-left{z-index:10;pointer-events:none;width:250px;position:absolute;top:76px;left:18px}.panel-right{z-index:10;pointer-events:none;width:260px;position:absolute;top:76px;right:18px}.tactical-card{background:var(--panel-bg);-webkit-backdrop-filter:blur(14px);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);pointer-events:auto;border-radius:8px;padding:12px 14px}.mt-2{margin-top:10px}.card-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.card-title{letter-spacing:.5px;color:var(--text-secondary);font-size:11px;font-weight:800}.card-badge{color:#334155;font-size:9px;font-weight:700;font-family:var(--font-mono);background:#e2e8f0;border-radius:4px;padding:2px 6px}.card-badge.green{color:#15803d;background:#dcfce7}.card-tag{color:var(--tactical-blue);font-size:9px;font-weight:700;font-family:var(--font-mono)}.speedometer-box{align-items:baseline;gap:6px;margin:4px 0 8px;display:flex}.speed-number{font-family:var(--font-mono);color:var(--text-primary);font-size:38px;font-weight:900;line-height:1}.speed-unit{color:var(--text-secondary);letter-spacing:1px;font-size:11px;font-weight:800}.power-bars{flex-direction:column;gap:6px;display:flex}.bar-info{color:var(--text-secondary);font-size:10px;font-family:var(--font-mono);justify-content:space-between;margin-bottom:2px;display:flex}.progress-bar-bg{background:#e2e8f0;border-radius:3px;width:100%;height:6px;overflow:hidden}.progress-bar-bg.large{border-radius:5px;height:10px}.progress-fill{background:var(--tactical-blue);border-radius:3px;height:100%;transition:width .1s linear}.progress-fill.reload-fill{background:linear-gradient(90deg,#10b981,#059669)}.card-divider{background:var(--panel-border);height:1px;margin:10px 0}.attitude-grid{grid-template-columns:1fr 1fr;gap:6px 12px;display:grid}.attitude-item{flex-direction:column;display:flex}.att-label{color:var(--text-muted);font-size:9px}.att-val{font-family:var(--font-mono);color:var(--text-primary);font-size:13px;font-weight:800}.radar-box{background:#f8fafc;border:2px solid #cbd5e1;border-radius:50%;width:140px;height:140px;margin:4px auto;position:relative;overflow:hidden;box-shadow:inset 0 0 15px rgba(0,0,0,.05)}#radar-canvas{position:absolute;top:0;left:0}.radar-sweep{pointer-events:none;background:conic-gradient(rgba(2,132,199,0) 270deg,rgba(2,132,199,.25) 360deg);border-radius:50%;width:100%;height:100%;animation:3s linear infinite radar-spin;position:absolute;top:0;left:0}@keyframes radar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.radar-legend{color:var(--text-secondary);justify-content:center;align-items:center;margin-top:6px;font-size:9px;display:flex}.dot{border-radius:50%;width:6px;height:6px;margin-right:3px;display:inline-block}.tank-dot{background:var(--tactical-blue)}.target-dot{background:var(--tactical-red)}.bound-dot{background:var(--tactical-orange)}.ml-2{margin-left:8px}.ammo-selection{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;display:grid}.ammo-btn{border:1px solid var(--panel-border);cursor:pointer;background:#fff;border-radius:6px;padding:8px;transition:all .2s}.ammo-btn:hover{border-color:var(--tactical-orange)}.ammo-btn.active{border-color:var(--tactical-orange);box-shadow:0 0 0 1px var(--tactical-orange);background:#fff7ed}.ammo-type{font-family:var(--font-mono);color:var(--text-primary);font-size:13px;font-weight:800}.ammo-desc{color:var(--text-secondary);margin-top:2px;font-size:8px}.reload-progress-wrap{margin-bottom:12px}.reload-label-row{color:var(--text-secondary);justify-content:space-between;margin-bottom:4px;font-size:10px;font-weight:700;display:flex}.view-title{color:var(--text-secondary);margin-bottom:6px;font-size:10px;font-weight:700}.view-btn-group{grid-template-columns:1fr 1fr;gap:6px;display:grid}.view-btn{border:1px solid var(--panel-border);color:var(--text-secondary);cursor:pointer;background:#fff;border-radius:6px;padding:6px;font-size:11px;font-weight:700;transition:all .15s}.view-btn:hover{color:var(--text-primary);background:#f1f5f9}.view-btn.active{background:var(--tactical-blue);color:#fff;border-color:var(--tactical-blue)}.key-guide-list{flex-direction:column;gap:4px;list-style:none;display:flex}.key-guide-list li{color:var(--text-secondary);align-items:center;gap:4px;font-size:10px;display:flex}kbd{font-family:var(--font-mono);color:#1e293b;background:#e2e8f0;border:1px solid #cbd5e1;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700;display:inline-block;box-shadow:0 1px #94a3b8}.tactical-controls-bar{z-index:20;pointer-events:none;justify-content:space-between;align-items:flex-end;display:flex;position:absolute;bottom:14px;left:18px;right:18px}.control-cluster{background:var(--panel-bg);-webkit-backdrop-filter:blur(14px);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);pointer-events:auto;border-radius:10px;padding:10px 14px}.cluster-label{color:var(--text-secondary);text-align:center;letter-spacing:.5px;margin-bottom:8px;font-size:10px;font-weight:800}.dpad-container{flex-direction:column;align-items:center;gap:4px;display:flex}.dpad-mid{gap:4px;display:flex}.dpad-btn{border:1px solid var(--panel-border);width:68px;height:44px;color:var(--text-primary);cursor:pointer;background:#fff;border-radius:6px;justify-content:center;align-items:center;font-size:12px;font-weight:800;transition:all .1s;display:flex;box-shadow:0 2px 4px rgba(0,0,0,.05)}.dpad-btn:active,.dpad-btn.pressed{box-shadow:none;background:#e2e8f0;transform:translateY(2px)}.dpad-brake{color:var(--tactical-red);background:#fef2f2;border-color:#fca5a5}.dpad-brake:active,.dpad-brake.pressed{background:#fee2e2}.mid-cluster{gap:10px;display:flex}.action-btn{border:1px solid var(--panel-border);cursor:pointer;box-shadow:var(--panel-shadow);background:#fff;border-radius:8px;flex-direction:column;align-items:center;gap:3px;min-width:76px;padding:10px 14px;transition:all .15s;display:flex}.action-btn:hover{border-color:var(--tactical-blue);background:#f8fafc}.action-btn:active{transform:scale(.97)}.btn-icon{font-size:18px}.btn-text{color:var(--text-primary);font-size:10px;font-weight:800}.btn-hotkey{font-size:8px;font-family:var(--font-mono);color:var(--text-muted)}.turret-control-row{align-items:center;gap:14px;display:flex}.turret-steer-grid{flex-direction:column;align-items:center;gap:4px;display:flex}.steer-mid{gap:4px;display:flex}.steer-btn{border:1px solid var(--panel-border);width:62px;height:38px;color:var(--text-primary);cursor:pointer;background:#fff;border-radius:6px;font-size:11px;font-weight:800;transition:all .1s}.steer-btn:active,.steer-btn.pressed{background:#e2e8f0;transform:translateY(2px)}.fire-trigger-btn{cursor:pointer;background:linear-gradient(135deg,#f97316,#dc2626);border:none;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;transition:all .1s;display:flex;position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(220,38,38,.4),inset 0 2px 4px rgba(255,255,255,.4)}.fire-pulse-ring{border:2px dashed rgba(234,88,12,.8);border-radius:50%;animation:8s linear infinite fire-ring-spin;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px}@keyframes fire-ring-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fire-inner{color:#fff;z-index:2;flex-direction:column;align-items:center;display:flex}.fire-icon{font-size:24px;line-height:1}.fire-label{letter-spacing:1.5px;text-shadow:0 1px 3px rgba(0,0,0,.3);font-size:17px;font-weight:900}.fire-sub{letter-spacing:.8px;opacity:.9;font-size:7px;font-weight:700}.fire-trigger-btn:active,.fire-trigger-btn.pressed{background:linear-gradient(135deg,#ea580c,#b91c1c);transform:scale(.93);box-shadow:0 2px 10px rgba(220,38,38,.6)}#gunner-sight{z-index:5;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}#gunner-sight.hidden{display:none}.sight-crosshair{border:1px solid rgba(234,88,12,.5);border-radius:50%;width:320px;height:320px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sight-crosshair:before,.sight-crosshair:after{content:"";background:rgba(234,88,12,.85);position:absolute}.sight-crosshair:before{width:1.5px;top:0;bottom:0;left:50%;transform:translate(-50%)}.sight-crosshair:after{height:1.5px;top:50%;left:0;right:0;transform:translateY(-50%)}.sight-range-readout{font-family:var(--font-mono);color:#ea580c;background:rgba(255,255,255,.85);border:1px solid rgba(234,88,12,.4);border-radius:4px;padding:4px 10px;font-size:15px;font-weight:800;position:absolute;top:52%;left:54%}.thermal-vignette{width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 120px rgba(15,23,42,.4)}.boundary-alert{color:#fff;z-index:50;pointer-events:none;background:rgba(220,38,38,.95);border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:12px 24px;animation:1s infinite alternate alert-blink;display:flex;position:absolute;top:90px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px rgba(220,38,38,.4)}.boundary-alert.hidden{display:none}.alert-title{letter-spacing:1px;font-size:15px;font-weight:900}.alert-desc{opacity:.9;font-size:12px}.alert-distance{font-family:var(--font-mono);background:rgba(0,0,0,.25);border-radius:4px;margin-top:4px;padding:2px 8px;font-size:13px;font-weight:800}@keyframes alert-blink{0%{opacity:.85;transform:translate(-50%)scale(.98)}to{opacity:1;transform:translate(-50%)scale(1.02)}}#hit-feedback-container{z-index:40;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:25%;left:50%;transform:translate(-50%,-50%)}.hit-toast{border:2px solid var(--tactical-orange);color:var(--tactical-orange);font-family:var(--font-mono);letter-spacing:1px;background:rgba(255,255,255,.92);border-radius:6px;padding:8px 18px;font-size:16px;font-weight:900;animation:1.6s cubic-bezier(.16,1,.3,1) forwards hit-float-up;box-shadow:0 8px 25px rgba(234,88,12,.3)}@keyframes hit-float-up{0%{opacity:0;transform:translateY(20px)scale(.8)}20%{opacity:1;transform:translateY(0)scale(1.1)}80%{opacity:1;transform:translateY(-20px)scale(1)}to{opacity:0;transform:translateY(-50px)scale(.9)}}.audio-hint-overlay{-webkit-backdrop-filter:blur(8px);z-index:100;background:rgba(15,23,42,.65);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.audio-hint-overlay.hidden{display:none}.audio-hint-modal{text-align:center;border:1px solid var(--panel-border);background:#fff;border-radius:12px;max-width:440px;padding:28px 36px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.hint-shield{margin-bottom:12px;font-size:42px}.audio-hint-modal h2{color:var(--text-primary);margin-bottom:10px;font-size:20px;font-weight:900}.audio-hint-modal p{color:var(--text-secondary);margin-bottom:22px;font-size:13px;line-height:1.6}.launch-btn{background:linear-gradient(135deg, var(--tactical-orange), #c2410c);color:#fff;letter-spacing:1px;cursor:pointer;border:none;border-radius:8px;padding:12px 32px;font-size:14px;font-weight:800;transition:all .2s;box-shadow:0 10px 20px -5px rgba(234,88,12,.5)}.launch-btn:hover{transform:translateY(-2px);box-shadow:0 15px 25px -5px rgba(234,88,12,.6)}@media (max-width:900px){.panel-left,.panel-right,.tactical-brand .sub{display:none}}