/* ---------- 全局重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}
body {
    background: #0b0e14;
    font-family: 'Segoe UI', 'Roboto', system-ui, sans-serif;
    color: #d0d9e8;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #1a1f2a;
}
::-webkit-scrollbar-thumb {
    background: #3a4a5e;
    border-radius: 4px;
}

/* ---------- 顶栏 ---------- */
#topbar {
    background: #131a24;
    border-bottom: 1px solid #2a3444;
    padding: 6px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 52px;
}
#topbar .brand {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    color: #b0d0ff;
    text-shadow: 0 0 12px #1a4a8a55;
    margin-right: 10px;
}
#topbar .brand span {
    color: #f0b060;
}
.mode-group {
    display: flex;
    gap: 6px;
    background: #0e141e;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #1f2b3a;
}
.mode-btn {
    background: transparent;
    border: none;
    color: #8899b0;
    padding: 5px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.mode-btn:hover {
    color: #c0d0e8;
    background: #1f2b3a;
}
.mode-btn.active {
    background: #1e3a5f;
    color: #fff;
    box-shadow: 0 0 16px #1e5a9f44;
}
#topbar .spacer {
    flex: 1;
}
#topbar .stats-badge {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #8a9bb0;
}
#topbar .stats-badge .val {
    color: #d0e0f0;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}
.warn-led {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    background: #2a5a2a;
    box-shadow: 0 0 6px #2a5a2a88;
    transition: 0.3s;
}
.warn-led.warning {
    background: #f0a030;
    box-shadow: 0 0 16px #f0a030aa;
}
.warn-led.error {
    background: #e04040;
    box-shadow: 0 0 20px #e04040cc;
    animation: blink 0.6s infinite alternate;
}
@keyframes blink {
    0% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}

/* ---------- 主体 ---------- */
#main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 左侧面板 */
#left-panel {
    width: 260px;
    min-width: 200px;
    background: #10161f;
    border-right: 1px solid #1f2b3a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
#left-panel .panel-tabs {
    display: flex;
    background: #0a0f16;
    border-bottom: 1px solid #1a2430;
}
#left-panel .panel-tabs button {
    flex: 1;
    background: transparent;
    border: none;
    color: #6a7e96;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: 0.2s;
}
#left-panel .panel-tabs button.active {
    color: #b0d0ff;
    border-bottom-color: #3a7abf;
    background: #0e1622;
}
#left-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
}
.module-category {
    font-size: 11px;
    text-transform: uppercase;
    color: #4a5e76;
    letter-spacing: 1px;
    margin: 12px 0 6px 4px;
    border-bottom: 1px solid #1a2430;
    padding-bottom: 4px;
}
.module-item {
    background: #161e2b;
    border: 1px solid #1f2b3a;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 5px;
    font-size: 13px;
    cursor: grab;
    transition: 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.module-item:hover {
    background: #1e2a3e;
    border-color: #2a4a6a;
    transform: translateX(2px);
}
.module-item .icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
}
.module-item .name {
    flex: 1;
    font-weight: 500;
}
.module-item .badge {
    font-size: 10px;
    background: #0a121e;
    padding: 1px 8px;
    border-radius: 10px;
    color: #6a8aaa;
}

/* 工作台 (Canvas) */
#canvas-wrap {
    flex: 1;
    background: #0c111a;
    position: relative;
    overflow: hidden;
}
#canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #0c111a;
    cursor: crosshair;
}
#canvas-wrap .overlay-label {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #2a3a50;
    background: #0a121ecc;
    padding: 4px 18px;
    border-radius: 20px;
    pointer-events: none;
    border: 1px solid #1a2a3a;
}

/* 第三人称操控准星（屏幕中心） */
#combat-crosshair {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 20;
}
#combat-crosshair .ch-c {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
#combat-crosshair .c-h {
    left: -14px;
    top: -1.5px;
    width: 28px;
    height: 3px;
    border-radius: 1px;
}
#combat-crosshair .c-v {
    left: -1.5px;
    top: -14px;
    width: 3px;
    height: 28px;
    border-radius: 1px;
}
#combat-crosshair .ch-dots {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}
/* 瞄准方向圆圈（白色空心环，指示射击方向） */
#combat-crosshair .ch-circle-aim {
    position: absolute;
    left: -8px;
    top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: transparent;
    pointer-events: none;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}
/* 真实弹着点小十字（醒目橙色，叠在白色上方） */
#combat-crosshair .ch-cross-impact {
    position: absolute;
    left: -10px;
    top: -10px;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: left 0.05s, top 0.05s;
}
#combat-crosshair .ch-cross-impact .ch-c {
    position: absolute;
    background: #ff7744;
    box-shadow: 0 0 4px rgba(255, 120, 60, 0.95);
}
#combat-crosshair .ch-cross-impact .ch-c:first-child {
    left: 8px; top: -1px; width: 4px; height: 2px;
}
#combat-crosshair .ch-cross-impact .ch-c:last-child {
    left: -1px; top: 8px; width: 2px; height: 4px;
}
/* 命中锁定状态：橙十字放大发光 */
#combat-crosshair .ch-cross-impact.locked {
    left: -14px;
    top: -14px;
    width: 28px;
    height: 28px;
}
#combat-crosshair .ch-cross-impact.locked .ch-c {
    background: #ffaa44;
    box-shadow: 0 0 10px rgba(255, 170, 68, 1), 0 0 20px rgba(255, 100, 30, 0.6);
}
#combat-crosshair .ch-cross-impact.locked .ch-c:first-child {
    left: 10px; top: 0; width: 8px; height: 3px;
}
#combat-crosshair .ch-cross-impact.locked .ch-c:last-child {
    left: 0; top: 10px; width: 3px; height: 8px;
}

/* ==================== 2D 锁定圆环叠加层 ==================== */
#lock-overlay {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: left 0.08s linear, top 0.08s linear;
}
.lock-ring {
    position: absolute;
    left: -50px;
    top: -50px;
    width: 100px;
    height: 100px;
    border: 2px dashed rgba(70, 255, 138, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(70, 255, 138, 0.5), inset 0 0 8px rgba(70, 255, 138, 0.1);
    animation: lockRingRotate 4s linear infinite;
}
.lock-ring-inner {
    position: absolute;
    left: -30px;
    top: -30px;
    width: 60px;
    height: 60px;
    border: 1px dashed rgba(70, 255, 138, 0.45);
    border-radius: 50%;
    animation: lockRingRotate 6s linear infinite reverse;
}
.lock-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(70, 255, 138, 0.85);
    border-style: solid;
    border-width: 0;
}
.lock-c-tl { top: -4px; left: -4px; border-top-width: 2px; border-left-width: 2px; }
.lock-c-tr { top: -4px; right: -4px; border-top-width: 2px; border-right-width: 2px; }
.lock-c-bl { bottom: -4px; left: -4px; border-bottom-width: 2px; border-left-width: 2px; }
.lock-c-br { bottom: -4px; right: -4px; border-bottom-width: 2px; border-right-width: 2px; }
@keyframes lockRingRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 右侧面板 */
#right-panel {
    width: 280px;
    min-width: 200px;
    background: #10161f;
    border-left: 1px solid #1f2b3a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
#right-panel .param-section {
    padding: 10px 12px;
    border-bottom: 1px solid #1a2430;
}
#right-panel .param-section h4 {
    font-size: 12px;
    color: #4a5e76;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
#right-panel .param-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 2px 0;
    border-bottom: 1px solid #0e1622;
}
#right-panel .param-row .label {
    color: #6a7e96;
}
#right-panel .param-row .value {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #c0d8f0;
}
/* 属性面板（检查器） */
#inspector {
    padding: 10px 12px;
    border-bottom: 1px solid #1a2430;
    background: #0c1219;
    flex-shrink: 0;
}
#inspector .insp-title {
    font-size: 12px;
    color: #f0d040;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#inspector .insp-type-badge {
    font-size: 10px;
    color: #8a9ab0;
    background: #1a2430;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: none;
    letter-spacing: 0;
}
#inspector .insp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 12px;
}
#inspector .insp-row label {
    color: #6a7e96;
    flex: 0 0 auto;
    margin-right: 8px;
}
#inspector .insp-row input[type="number"],
#inspector .insp-row input[type="text"] {
    width: 80px;
    background: #0e1622;
    border: 1px solid #1f2b3a;
    color: #c0d8f0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 3px;
    text-align: right;
}
#inspector .insp-row input:focus {
    outline: none;
    border-color: #3a7abf;
    background: #131e2e;
}
#inspector .insp-row input[type="checkbox"] {
    margin-left: 6px;
    cursor: pointer;
}
#inspector .insp-group {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #1a2430;
}
#inspector .insp-group-title {
    font-size: 10px;
    color: #5a6e86;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
#inspector .insp-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
#inspector .insp-actions button {
    flex: 1;
    background: #1a2a3e;
    border: 1px solid #2a4a6a;
    color: #b0c8e0;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: 0.2s;
}
#inspector .insp-actions button:hover {
    background: #2a4a6a;
    border-color: #4a8aba;
}
#inspector .insp-actions button.danger {
    background: #3a1a1a;
    border-color: #6a2a2a;
    color: #f0a0a0;
}
#inspector .insp-actions button.danger:hover {
    background: #5a2a2a;
    border-color: #8a3a3a;
}
#inspector .insp-hint {
    font-size: 10px;
    color: #5a6e86;
    margin-top: 6px;
    line-height: 1.4;
}
/* 日志头部（标题 + 复制/清空按钮） */
.log-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: #8a9bb0;
    background: #0e141e;
    border-top: 1px solid #1a2430;
    user-select: none;
}
.log-header span {
    flex: 1;
}
#log-container {
    flex: 1;
    overflow-y: auto;
    padding: 6px 12px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    background: #080d16;
    border-top: 1px solid #1a2430;
    min-height: 80px;
    user-select: text;   /* 日志支持选中复制 */
    cursor: text;
}
#log-container .log-entry {
    padding: 3px 0;
    border-bottom: 1px solid #0e1622;
    color: #8a9ab0;
    line-height: 1.4;
}
#log-container .log-entry .highlight {
    color: #f0b060;
}
#log-container .log-entry .damage {
    color: #f06060;
}
#log-container .log-entry .hit {
    color: #60d0a0;
}

/* ---------- 响应式微调 ---------- */
@media (max-width: 900px) {
    #left-panel {
        width: 200px;
        min-width: 140px;
    }
    #right-panel {
        width: 220px;
        min-width: 140px;
    }
}
@media (max-width: 700px) {
    #left-panel,
    #right-panel {
        display: none;
    }
    #topbar .stats-badge {
        display: none;
    }
}

/* ---------- 小工具 ---------- */
.btn-sm {
    background: #1a2a3e;
    border: 1px solid #2a4a6a;
    color: #b0c8e0;
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-sm:hover {
    background: #2a4a6a;
    border-color: #4a8aba;
}
.btn-sm.primary {
    background: #1a4a7a;
    border-color: #3a7abf;
    color: #fff;
}
.btn-sm.primary:hover {
    background: #2a5a9a;
}
.snap-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #8a9bb0;
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #1f2b3a;
    background: #0e141e;
    transition: 0.2s;
}
.snap-toggle:hover {
    background: #1a2430;
    border-color: #2a4a6a;
}
.snap-toggle input {
    cursor: pointer;
    accent-color: #3a7abf;
}
.flex-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.mt-1 {
    margin-top: 6px;
}
.mb-1 {
    margin-bottom: 6px;
}
.text-muted {
    color: #5a6e86;
    font-size: 12px;
}
.text-accent {
    color: #70b0f0;
}
.text-warn {
    color: #f0a030;
}
.text-danger {
    color: #f06060;
}
.font-mono {
    font-family: 'Courier New', monospace;
}

/* ===== 实战模式 V2.0 ===== */

/* ---------- 单位库 ---------- */
.lib-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
}
.lib-item {
    background: #161e2b;
    border: 1px solid #1f2b3a;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 5px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lib-item:hover {
    background: #1e2a3e;
    border-color: #2a4a6a;
    transform: translateX(2px);
}
.lib-item .name {
    flex: 1;
    font-weight: 500;
}

/* ---------- 放置确认弹层 ---------- */
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-box {
    background: #10161f;
    border: 1px solid #1f2b3a;
    border-radius: 8px;
    padding: 16px;
    width: 300px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.modal-title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #d0d9e8;
}
.modal-row {
    margin-bottom: 10px;
}
.modal-row label {
    display: block;
    margin-bottom: 4px;
    color: #6a7e96;
    font-size: 12px;
}
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.faction-btn {
    border: 1px solid transparent;
    background: #1a2430;
    color: #8a9ab0;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
}
.faction-btn:hover {
    background: #22304a;
    color: #c0d8f0;
}
.faction-btn.f-red.active {
    border-color: #e04040;
    color: #f06060;
    background: #2a1a1a;
}
.faction-btn.f-blue.active {
    border-color: #3a7abf;
    color: #70b0f0;
    background: #1a2a3e;
}
.faction-btn.f-neutral.active {
    border-color: #8899b0;
    color: #b0c0d0;
    background: #22303c;
}

/* ---------- 战场列表 ---------- */
.bl-list {
    max-height: 220px;
    overflow-y: auto;
}
.bl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: 0.15s;
    border-radius: 4px;
}
.bl-row:hover {
    background: #1a2430;
}
.bl-row.selected {
    background: #1e3a5f;
}
.f-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.f-dot.red {
    background: #e04040;
}
.f-dot.blue {
    background: #3a7abf;
}
.f-dot.neutral {
    background: #8899b0;
}
.bl-name {
    flex: 1;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hp-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
}
.hp-fill {
    height: 100%;
    background: #60d0a0;
    transition: width 0.2s;
}
.hp-fill.low {
    background: #f06060;
}
.hp-fill.mid {
    background: #f0d040;
}
.badge-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.badge-status.reloading {
    background: #a05010;
    color: #ffd0a0;
}
.badge-status.empty {
    background: #a02020;
    color: #ffd0d0;
}
.badge-status.dead {
    background: #3a3a3a;
    color: #e0e0e0;
}
.badge-status.ready {
    background: rgba(80, 200, 120, 0.25);
    color: #a0e0b0;
}
.badge-status.ai {
    background: rgba(80, 140, 220, 0.25);
    color: #a0c8f0;
}

/* ---------- 战斗控制区 ---------- */
.combat-controls {
    padding: 8px 0;
}
.btn-group {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}
.btn-rate {
    flex: 1;
    padding: 4px 0;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #8a9ab0;
    cursor: pointer;
    transition: 0.2s;
}
.btn-rate:hover {
    background: #1a2430;
    color: #c0d8f0;
}
.btn-rate.active {
    background: #1a4a7a;
    border-color: #f0b060;
    color: #fff;
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    font-size: 11px;
}
.stats-grid .st-label {
    color: #6a7e96;
}
.stats-grid .st-value {
    text-align: right;
    color: #c0d8f0;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* ---------- 装填进度条 ---------- */
.reload-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}
.reload-fill {
    height: 100%;
    background: #ffb020;
}

/* ---------- 战场缩略图（实战模式） ---------- */
#minimap-panel {
    position: fixed;
    left: 275px;
    top: 67px;
    z-index: 60;
    width: 296px;
    background: rgba(16, 24, 34, 0.92);
    border: 1px solid rgba(120, 180, 255, 0.35);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.minimap-title {
    color: #9fc3e8;
    font-size: 12px;
    padding: 2px 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.minimap-canvas-wrap {
    position: relative;
}
#minimap-canvas {
    width: 280px;
    height: 280px;
    display: block;
    border-radius: 4px;
    background: #1a2a1a;
    cursor: grab;
    touch-action: none;
}
#minimap-canvas.dragging-unit {
    cursor: grabbing;
}
.minimap-controls {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.minimap-controls button {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid rgba(120, 180, 255, 0.4);
    background: rgba(20, 32, 48, 0.85);
    color: #bcd8f5;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.minimap-controls button:hover {
    background: rgba(40, 70, 110, 0.9);
}
.minimap-hint {
    color: #7a8aa0;
    font-size: 10px;
    padding: 5px 4px 0;
}
/* 地图选择按钮 */
#map-selector { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.map-btn {
    background: #1a2430;
    border: 1px solid #2a3a4a;
    color: #8ab;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}
.map-btn:hover { border-color: #4a8abf; color: #adf; }
.map-btn.active { background: #1e3a5a; border-color: #4a90e2; color: #cde; }
/* 「开始战斗」按钮：实战模式待开始状态显示（调整部署后启动模拟） */
.minimap-start {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 0;
    border: 1px solid rgba(120, 200, 255, 0.5);
    border-radius: 6px;
    background: linear-gradient(180deg, #1e5a9f, #16426f);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(30, 110, 220, 0.45);
    transition: 0.2s;
}
.minimap-start:hover {
    background: linear-gradient(180deg, #2a6ab8, #1c4f85);
    box-shadow: 0 0 22px rgba(40, 140, 255, 0.65);
}

/* ---------- 全屏部署地图（实战待开始：地图铺满整个屏幕，避免误操作单位） ---------- */
#minimap-panel.fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    z-index: 90;
    background: rgba(8, 13, 22, 0.97);
    border: none;
    border-radius: 0;
    padding: 16px 24px 96px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#minimap-panel.fullscreen .minimap-title {
    font-size: 15px;
    letter-spacing: 1px;
}
#minimap-panel.fullscreen .minimap-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    min-height: 0;
}
#minimap-panel.fullscreen #minimap-canvas {
    border: 1px solid rgba(120, 180, 255, 0.4);
    box-shadow: 0 0 40px rgba(30, 110, 220, 0.25);
}
#minimap-panel.fullscreen .minimap-controls {
    position: fixed;
    left: 28px;
    right: auto;
    bottom: 92px;
    flex-direction: row;
    gap: 6px;
}
#minimap-panel.fullscreen .minimap-controls button {
    width: 44px;
    height: 44px;
    font-size: 20px;
}
#minimap-panel.fullscreen .minimap-hint {
    position: fixed;
    left: 50%;
    bottom: 98px;
    transform: translateX(-50%);
    width: auto;
    font-size: 13px;
    padding: 0;
}
/* 开始战斗按钮：全屏部署界面固定在右下角 */
#minimap-panel.fullscreen .minimap-start {
    position: fixed;
    right: 36px;
    bottom: 30px;
    width: 220px;
    margin: 0;
    padding: 15px 0;
    font-size: 18px;
    border-radius: 10px;
    z-index: 91;
}
/* 全屏部署地图：返回按钮（左下角，与开始战斗分置两端避免误触） */
#minimap-panel.fullscreen .minimap-back {
    left: 36px;
    right: auto;
    width: 170px;
    background: linear-gradient(180deg, #5a3a2a, #3a241a);
    border-color: rgba(255, 170, 100, 0.5);
    box-shadow: 0 0 14px rgba(220, 120, 40, 0.35);
}
#minimap-panel.fullscreen .minimap-back:hover {
    background: linear-gradient(180deg, #6a4a3a, #4a2e22);
    box-shadow: 0 0 22px rgba(240, 150, 60, 0.55);
}

/* ---------- 战斗结算弹层 ---------- */
#battle-end-modal .battle-end-box {
    width: min(90vw, 340px);
    text-align: center;
}
#battle-end-modal .modal-title {
    font-size: 20px;
    color: #f0d040;
}
#battle-end-modal .battle-end-stats {
    margin-top: 10px;
    font-size: 13px;
    color: #8a9bb0;
}

/* ==================== 移动端适配（战争雷霆移动版风格） ==================== */
/* 设备检测通过 JS 给 <body> 加 .mobile 类；触控层仅在移动端出现 */

/* --- 顶栏压缩 --- */
body.mobile #topbar {
    padding: 3px 6px;
    gap: 4px;
    height: 44px;
    flex-wrap: nowrap;
    overflow: hidden;
}
body.mobile #topbar .brand {
    font-size: 11px;
    white-space: nowrap;
}
body.mobile #topbar .stats-badge,
body.mobile #topbar .snap-toggle,
body.mobile #topbar #btn-save,
body.mobile #topbar #btn-load,
body.mobile #topbar #btn-share,
body.mobile #topbar #btn-clear {
    display: none !important;
}
body.mobile .mode-group {
    gap: 2px;
}
body.mobile .mode-btn {
    padding: 5px 6px;
    font-size: 10px;
    min-width: 0;
}

/* --- 面板抽屉（默认隐藏，点 ☰ 滑出） --- */
#btn-menu-toggle {
    display: none;
}
body.mobile #btn-menu-toggle {
    display: inline-block;
    font-size: 16px;
    padding: 5px 10px;
}
/* 手机端不显示右侧参数面板（参数/检查器/日志/战斗控制） */
body.mobile #right-panel {
    display: none !important;
}
/* 手机端模块选择改在屏幕底部横向滑动栏，隐藏左侧抽屉面板与 ☰ 按钮 */
body.mobile #left-panel {
    display: none !important;
}
body.mobile #btn-menu-toggle {
    display: none !important;
}
body.mobile #right-panel .param-section,
body.mobile #right-panel .insp-row,
body.mobile #right-panel .log-header {
    flex-shrink: 0;
}
body.mobile #log-container {
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
}
body.mobile #right-panel .combat-controls .btn-group {
    flex-wrap: wrap;
}
body.mobile .btn-sm,
body.mobile .btn-rate {
    min-height: 34px;
    font-size: 12px;
}

/* --- 手机端底部模块栏（横向滑动：模块/预设/单位） --- */
#mobile-module-bar {
    display: none;
}
body.mobile #mobile-module-bar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    background: rgba(10, 16, 24, 0.97);
    border-top: 1px solid #2a3444;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}
.mob-bar-tabs {
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: #0a0f16;
    border-bottom: 1px solid #1a2430;
}
.mob-bar-tabs button {
    flex: 1;
    background: transparent;
    border: none;
    color: #6a7e96;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 0;
    border-radius: 6px;
    cursor: pointer;
}
.mob-bar-tabs button.active {
    color: #b0d0ff;
    background: #1e3a5f;
}
.mob-bar-scroll {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 10px;
    min-height: 66px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mob-bar-scroll::-webkit-scrollbar {
    display: none;
}
.mob-bar-cat {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-size: 10px;
    color: #4a5e76;
    letter-spacing: 1px;
    padding: 0 4px;
    white-space: nowrap;
}
.mob-bar-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    min-height: 56px;
    background: #161e2b;
    border: 1px solid #1f2b3a;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 6px;
    box-sizing: border-box;
}
.mob-bar-item:active {
    background: #1e3a5f;
    border-color: #3a7abf;
}
.mob-bar-item .icon {
    font-size: 18px;
    line-height: 1;
}
.mob-bar-item .name {
    font-size: 10px;
    color: #b0c0d8;
    text-align: center;
    line-height: 1.2;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mob-bar-item.wide {
    width: auto;
    padding: 0 14px;
    flex-direction: row;
    gap: 6px;
}

/* --- 手机端操作反馈 Toast（右面板日志已隐藏） --- */
#mobile-toast {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    max-width: 86vw;
    padding: 8px 14px;
    border-radius: 18px;
    background: rgba(10, 18, 28, 0.92);
    border: 1px solid #2a4a6a;
    color: #c0d8f0;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
    text-align: center;
}
#mobile-toast.mtoast-warn {
    border-color: #a07020;
    color: #f0b060;
}
#mobile-toast.mtoast-damage {
    border-color: #8a3030;
    color: #f08080;
}
#mobile-toast.mtoast-hit {
    border-color: #2a7a5a;
    color: #80e0b0;
}

/* --- 战斗反馈浮层（屏幕上方中间：击穿/命中/警告 kill-feed 式提示） --- */
#combat-feedback {
    position: fixed;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    max-width: 70vw;
}
.combat-fb {
    padding: 7px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(12, 18, 28, 0.88);
    border: 1px solid #2a4a6a;
    color: #c0d8f0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    animation: fbIn 0.22s ease-out;
    transition: opacity 0.3s, transform 0.3s;
    text-align: center;
    white-space: nowrap;
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combat-fb.hit {
    border-color: #2a7a5a;
    color: #80e0b0;
}
.combat-fb.damage {
    border-color: #8a3030;
    color: #ff8f80;
}
.combat-fb.warn {
    border-color: #a07020;
    color: #f0c060;
}
.combat-fb.out {
    opacity: 0;
    transform: translateY(-10px);
}
@keyframes fbIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

/* --- 触控层（左摇杆 + 右侧滑动瞄准 + 右下开火 + 左上退出） --- */
#touch-ui {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}
body.mobile #touch-ui.show {
    display: block;
}
#touch-look-zone {
    position: absolute;
    top: 44px;
    right: 0;
    bottom: 0;
    left: 42%;
    pointer-events: auto;
    touch-action: none;
}
#touch-stick-zone {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42%;
    height: 56%;
    pointer-events: auto;
    touch-action: none;
}
#touch-stick-base {
    position: absolute;
    left: 28px;
    bottom: 120px; /* 避开底部模块栏 */
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.22);
    box-sizing: border-box;
}
#touch-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-sizing: border-box;
}
#touch-fire {
    position: absolute;
    right: 24px;
    bottom: 120px; /* 避开底部模块栏 */
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid rgba(255, 130, 70, 0.85);
    background: radial-gradient(circle, rgba(255, 90, 45, 0.6), rgba(150, 35, 8, 0.35));
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
    touch-action: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
#touch-fire:active {
    transform: scale(0.94);
}
#touch-exit {
    position: absolute;
    top: 52px;
    right: 10px;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(18, 26, 38, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 13px;
    pointer-events: auto;
    touch-action: none;
}
#touch-pause {
    position: absolute;
    top: 52px;
    right: 64px;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(18, 26, 38, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 13px;
    pointer-events: auto;
    touch-action: none;
}
#touch-pause:active,
#touch-exit:active {
    transform: scale(0.94);
}
#touch-hint {
    position: absolute;
    left: 50%;
    top: 52px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    background: rgba(10, 18, 28, 0.45);
    padding: 4px 12px;
    border-radius: 12px;
    pointer-events: none;
    white-space: nowrap;
}

/* --- 移动端全局触摸手感 --- */
body.mobile {
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    overflow: hidden;
}
body.mobile canvas {
    touch-action: none;
}
body.mobile #canvas-wrap .overlay-label {
    font-size: 10px;
}
body.mobile .minimap-hint,
body.mobile .insp-hint {
    font-size: 10px;
}

/* --- 移动端弹层 / 单位选项卡 / 放置确认 --- */
body.mobile .modal-box {
    width: 92vw;
    max-height: 86vh;
    overflow-y: auto;
}
body.mobile .faction-btn,
body.mobile .modal-row button {
    min-height: 40px;
    font-size: 14px;
}
body.mobile #unit-menu button {
    min-height: 40px;
    font-size: 14px;
}
body.mobile #unit-menu-title {
    max-width: 60vw;
    font-size: 12px;
}
body.mobile .insp-row input,
body.mobile .insp-row select {
    font-size: 14px;
    min-height: 32px;
}

/* --- 手机版模块放置提示条（点击模块后出现在画布顶部，点 ✕ 取消） --- */
#module-place-bar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: none;
    align-items: center;
    gap: 10px;
    max-width: 94vw;
    background: rgba(10, 18, 28, 0.92);
    border: 1px solid #2a4a6a;
    border-radius: 22px;
    padding: 6px 8px 6px 16px;
    font-size: 13px;
    color: #c0d8f0;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
#module-place-bar .btn-sm {
    min-height: 30px;
    padding: 2px 12px;
    font-size: 12px;
}
body.mobile #module-place-bar {
    font-size: 12px;
}

/* --- 移动端：模块列表/单位库间距优化（避免拥挤） --- */
body.mobile .panel-content {
    padding: 10px;
    padding-bottom: 40px; /* 底部留白，避免最后一项贴边 */
}
body.mobile .module-item,
body.mobile .lib-item {
    padding: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    border-radius: 8px;
    min-height: 48px;
    cursor: pointer;
}
body.mobile .module-item:active,
body.mobile .lib-item:active {
    background: #1e3a5f;
    border-color: #3a7abf;
    transform: scale(0.98);
}
body.mobile .module-category {
    font-size: 12px;
    margin: 14px 0 8px 4px;
    padding-bottom: 6px;
}
body.mobile .module-item .icon {
    font-size: 20px;
    width: 30px;
}
body.mobile .module-item .badge {
    font-size: 11px;
    padding: 2px 8px;
}
body.mobile .lib-actions {
    padding: 8px 2px;
}
body.mobile .lib-actions .btn-sm {
    min-height: 40px;
    font-size: 13px;
    width: 100%;
}

/* --- 移动端面板抽屉遮罩：面板打开时半透明覆盖画布，点击关闭（避免左右面板叠放） --- */
#panel-backdrop {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.35);
    display: none;
}

/* --- 窄屏兜底（不依赖 JS 检测 body.mobile）：宽度 <900px 时同样显示 ☰ 并启用抽屉面板 --- */
@media (max-width: 900px) {
    #btn-menu-toggle {
        display: inline-block;
        font-size: 16px;
        padding: 5px 10px;
    }
    #right-panel {
        display: none !important; /* 窄屏不显示右侧参数面板 */
    }
    #left-panel {
        position: fixed;
        top: 44px;
        bottom: 0;
        left: 0;
        width: min(80vw, 340px);
        max-width: 80vw;
        z-index: 60;
        transition: transform 0.25s ease;
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.55);
        transform: translateX(-105%);
    }
    #left-panel.open {
        transform: translateX(0);
    }
    .panel-content {
        padding: 10px;
        padding-bottom: 40px;
    }
    .module-item,
    .lib-item {
        padding: 12px;
        margin-bottom: 8px;
        font-size: 14px;
        border-radius: 8px;
        min-height: 48px;
        cursor: pointer;
    }
    .module-item .icon {
        font-size: 20px;
        width: 30px;
    }
    .module-category {
        font-size: 12px;
        margin: 14px 0 8px 4px;
        padding-bottom: 6px;
    }
}

/* ==================== 主菜单 ==================== */
#main-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0e14;
}
.main-menu-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, #1a2a44 0%, #0a0e14 70%);
    pointer-events: none;
}
.main-menu-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 480px;
    width: 90%;
}
.main-menu-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}
.main-menu-logo {
    font-size: 52px;
    filter: drop-shadow(0 0 20px rgba(30, 120, 220, 0.6));
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(30, 120, 220, 0.6)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 32px rgba(30, 140, 255, 0.8)); }
}
.main-menu-title-main {
    font-size: 26px;
    font-weight: 700;
    color: #d0e8ff;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(30, 120, 220, 0.5);
}
.main-menu-title-sub {
    font-size: 11px;
    color: #5a7a9a;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 4px;
}
.main-menu-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 32px;
    padding: 12px 20px;
    background: rgba(20, 30, 48, 0.7);
    border-radius: 12px;
    border: 1px solid #1f2b3a;
    font-size: 14px;
    color: #8a9bb0;
}
.main-menu-stats b {
    color: #7ce0ff;
    font-family: 'Courier New', monospace;
}
.main-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.menu-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #162030 0%, #1a2840 100%);
    border: 1px solid #2a4a6a;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    color: inherit;
}
.menu-btn:hover {
    background: linear-gradient(135deg, #1e3050 0%, #243860 100%);
    border-color: #3a7abf;
    transform: translateX(4px);
    box-shadow: 0 0 20px rgba(30, 100, 200, 0.25);
}
.menu-btn:active {
    transform: translateX(2px);
}
.main-btn-icon {
    font-size: 28px;
    width: 40px;
    text-align: center;
}
.main-btn-text {
    font-size: 18px;
    font-weight: 700;
    color: #d0e8ff;
}
.main-btn-desc {
    font-size: 11px;
    color: #5a7a9a;
    margin-top: 2px;
}
.main-menu-footer {
    margin-top: 28px;
    font-size: 11px;
    color: #3a5a7a;
    letter-spacing: 1px;
}

/* ==================== 科技树 ==================== */
.tt-line-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #4a6a8a;
    letter-spacing: 1px;
    margin: 10px 0 6px 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #1a2430;
}
.techtree-panel {
    border-left: 3px solid transparent;
    padding-left: 8px;
    margin-bottom: 8px;
}
.tt-node {
    background: #161e2b;
    border: 1px solid #1f2b3a;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.tt-node:hover:not(.tt-locked):not(.tt-unlocked-used) {
    background: #1e2a3e;
    border-color: #2a4a6a;
}
.tt-node.tt-unlocked {
    border-color: #2a6a4a;
    background: #162a1e;
}
.tt-node.tt-unlocked:hover {
    border-color: #3a9a5a;
}
.tt-node.tt-locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: #121820;
}
.tt-node.tt-current {
    border-color: #f0b060;
    background: #2a2010;
    box-shadow: 0 0 12px rgba(240, 176, 96, 0.2);
}
.tt-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tt-node-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}
.tt-node-name {
    font-size: 13px;
    font-weight: 600;
    color: #d0e0f0;
    flex: 1;
}
.tt-node-desc {
    font-size: 10px;
    color: #5a7a9a;
    margin-top: 2px;
}
.tt-node-cost {
    font-size: 11px;
    color: #7ce0ff;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}
.tt-node-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.tt-node-status.unlocked { background: rgba(40, 160, 80, 0.2); color: #80e0b0; }
.tt-node-status.locked { background: rgba(160, 80, 40, 0.2); color: #f0a060; }
.tt-node-status.available { background: rgba(240, 176, 96, 0.2); color: #f0c060; }
.tt-connector {
    text-align: center;
    color: #2a4a6a;
    font-size: 12px;
    padding: 2px 0;
}
.tt-req {
    font-size: 10px;
    color: #6a5a4a;
    margin-top: 4px;
    font-style: italic;
}
.tt-research-bar {
    background: #121820;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid #1f2b3a;
}
.tt-research-bar .tt-rb-label {
    font-size: 11px;
    color: #5a7a9a;
    margin-bottom: 4px;
}
.tt-research-bar .tt-rb-value {
    font-size: 16px;
    font-weight: 700;
    color: #7ce0ff;
    font-family: 'Courier New', monospace;
}
.tt-research-bar .tt-rb-progress {
    height: 4px;
    background: #1a2430;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.tt-research-bar .tt-rb-fill {
    height: 100%;
    background: linear-gradient(90deg, #1e5a9f, #7ce0ff);
    border-radius: 2px;
    transition: width 0.3s;
}

/* ==================== 支援点数 & 战术菜单 ==================== */
#support-points-badge {
    animation: supportGlow 2s ease-in-out infinite;
}
@keyframes supportGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.tactical-section {
    border-top: 1px solid #1a2430;
}
.tactical-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}
.tactical-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #162030;
    border: 1px solid #2a4a6a;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    color: inherit;
    text-align: left;
}
.tactical-btn:hover:not(:disabled) {
    background: #1e3050;
    border-color: #3a7abf;
}
.tactical-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.tac-icon { font-size: 16px; }
.tac-name { flex: 1; font-size: 12px; font-weight: 600; color: #b0d0ff; }
.tac-cost { font-size: 11px; color: #f0b060; font-family: 'Courier New', monospace; }
.tactical-btn.tac-confirm {
    background: linear-gradient(135deg, #1a4a2a, #2a6a3a);
    border-color: #40c060;
    color: #80ffaa;
}
.tactical-btn.tac-confirm:hover:not(:disabled) {
    background: linear-gradient(135deg, #2a6a3a, #3a8a4a);
    border-color: #60e080;
}
.tactical-btn.tac-cancel {
    background: linear-gradient(135deg, #4a1a1a, #6a2a2a);
    border-color: #c04040;
    color: #ffa0a0;
}
.tactical-btn.tac-cancel:hover:not(:disabled) {
    background: linear-gradient(135deg, #6a2a2a, #8a3a3a);
    border-color: #e06060;
}

/* ==================== 载具选择弹层 ==================== */
.vehicle-select-box {
    width: min(90vw, 420px);
}
.vehicle-select-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: #0e141e;
    padding: 4px;
    border-radius: 8px;
}
.vst-btn {
    flex: 1;
    padding: 6px 0;
    background: transparent;
    border: none;
    color: #6a7e96;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}
.vst-btn.active {
    background: #1e3a5f;
    color: #b0d0ff;
}
.vehicle-select-list {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 8px;
}
.vs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #161e2b;
    border: 1px solid #1f2b3a;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.15s;
}
.vs-item:hover {
    background: #1e2a3e;
    border-color: #2a4a6a;
}
.vs-item.vs-selected {
    border-color: #3a7abf;
    background: #1a3050;
}
.vs-item.vs-unlocked { border-color: #2a6a4a; }
.vs-item.vs-locked { opacity: 0.5; cursor: not-allowed; }
.vs-icon { font-size: 22px; width: 30px; text-align: center; }
.vs-name { flex: 1; font-size: 13px; font-weight: 600; color: #d0e0f0; }
.vs-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.vs-badge.unlocked { background: rgba(40, 160, 80, 0.2); color: #80e0b0; }
.vs-badge.locked { background: rgba(160, 80, 40, 0.2); color: #f0a060; }

/* ==================== 战后结算 ==================== */
.settlement-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.settlement-item {
    background: rgba(20, 30, 48, 0.6);
    border: 1px solid #1f2b3a;
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
}
.s-label {
    display: block;
    font-size: 10px;
    color: #5a7a9a;
    margin-bottom: 4px;
}
.s-val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #d0e8ff;
    font-family: 'Courier New', monospace;
}
.set-unlock-msg {
    padding: 10px 14px;
    background: rgba(40, 80, 40, 0.3);
    border: 1px solid #3a7a4a;
    border-radius: 8px;
    color: #80e0b0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    animation: unlockPop 0.4s ease-out;
}
@keyframes unlockPop {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.set-unlock-msg .unlock-icon { font-size: 24px; display: block; margin-bottom: 4px; }

/* ==================== HUD 支援点数显示 ==================== */
#support-points-hud {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: none;
    align-items: center;
    gap: 12px;
    background: rgba(10, 16, 24, 0.92);
    border: 1px solid #2a4a6a;
    border-radius: 24px;
    padding: 8px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#support-hud-bar-wrap {
    width: 160px;
    height: 8px;
    background: #1a2430;
    border-radius: 4px;
    overflow: hidden;
}
#support-hud-bar {
    height: 100%;
    background: linear-gradient(90deg, #1e5a9f, #7ce0ff);
    border-radius: 4px;
    transition: width 0.3s;
    width: 0%;
}
#support-hud-val {
    font-size: 13px;
    font-weight: 700;
    color: #7ce0ff;
    font-family: 'Courier New', monospace;
    min-width: 60px;
    text-align: center;
}
#support-hud-ready {
    font-size: 11px;
    color: #f0c060;
    padding: 2px 8px;
    background: rgba(240, 176, 96, 0.15);
    border-radius: 4px;
    border: 1px solid #a07020;
    animation: supportReady 1.5s ease-in-out infinite;
}
@keyframes supportReady {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 载具状态 HUD（战斗时显示在屏幕下方） */
#vehicle-hud {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: none;
    align-items: center;
    gap: 16px;
    background: rgba(10, 16, 24, 0.88);
    border: 1px solid #2a4a6a;
    border-radius: 12px;
    padding: 6px 16px;
    font-size: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.hud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.hud-label { font-size: 9px; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.5px; }
.hud-value { font-size: 14px; font-weight: 700; color: #d0e8ff; font-family: 'Courier New', monospace; }
.hud-bar-wrap { width: 80px; height: 6px; background: #1a2430; border-radius: 3px; overflow: hidden; }
.hud-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.hud-bar-hp .hud-bar-fill { background: linear-gradient(90deg, #e05050, #f0a030, #40c060); }
.hud-bar-ammo .hud-bar-fill { background: linear-gradient(90deg, #f0b060, #e0a040); }

/* ==================== 弹道瞄准 HUD ==================== */
#ballistic-aim-hud {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(10, 20, 30, 0.94);
    border: 1px solid #3a7aff;
    border-radius: 12px;
    padding: 8px 18px;
    box-shadow: 0 0 20px rgba(58, 122, 255, 0.3);
}
.ba-mode-label {
    font-size: 11px;
    font-weight: 700;
    color: #7cb8ff;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ba-info {
    font-size: 12px;
    color: #8ab0d0;
    font-family: 'Courier New', monospace;
}
.ba-status {
    font-size: 11px;
    font-weight: 600;
}
.ba-timer {
    font-size: 11px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

/* ==================== 炮火覆盖瞄准 HUD ==================== */
#artillery-aim-hud {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 54;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: rgba(40, 20, 10, 0.94);
    border: 1px solid #f08030;
    border-radius: 12px;
    padding: 8px 18px;
    box-shadow: 0 0 20px rgba(240, 128, 48, 0.35);
}
.aa-mode-label {
    font-size: 11px;
    font-weight: 700;
    color: #ff9040;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.aa-info {
    font-size: 12px;
    color: #d0a080;
    font-family: 'Courier New', monospace;
}
.aa-status {
    font-size: 10px;
    color: #a07050;
    font-weight: 500;
}

/* ==================== 开发者模式 ==================== */
.dev-mode-btn {
    margin-top: 14px;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e1e3a, #151530);
    border: 1px solid #4a4a8a;
    border-radius: 8px;
    color: #9999dd;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
    box-shadow: inset 0 0 20px rgba(70, 70, 150, 0.12), 0 0 10px rgba(70, 70, 160, 0.2);
    animation: devBtnPulse 3s ease-in-out infinite;
}
@keyframes devBtnPulse {
    0%, 100% { box-shadow: inset 0 0 20px rgba(70, 70, 150, 0.12), 0 0 10px rgba(70, 70, 160, 0.2); }
    50% { box-shadow: inset 0 0 25px rgba(90, 90, 180, 0.2), 0 0 22px rgba(90, 90, 200, 0.4); }
}
.dev-mode-btn:hover {
    border-color: #8888ff;
    color: #bbbbff;
    background: linear-gradient(135deg, #2a2a50, #1e1e40);
    box-shadow: 0 0 24px rgba(120, 120, 255, 0.5), inset 0 0 25px rgba(90, 90, 200, 0.25);
    transform: scale(1.02);
    animation: none;
}
.dev-mode-btn:active {
    transform: scale(0.98);
}
.dev-modal-box {
    width: 380px;
    border-color: #2a3a5a;
    background: linear-gradient(180deg, #0d1520, #10161f);
}
.dev-modal-body {
    padding: 4px 0 12px;
}
.dev-hint {
    font-size: 12px;
    color: #5a7a9a;
    margin-bottom: 10px;
    text-align: center;
}
.dev-password-input {
    width: 100%;
    padding: 10px 12px;
    background: #0a0f18;
    border: 1px solid #2a3a5a;
    border-radius: 6px;
    color: #c0d0e0;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    outline: none;
    transition: border-color 0.2s;
}
.dev-password-input:focus {
    border-color: #4a8af0;
}
.dev-status {
    margin-top: 10px;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 4px;
    text-align: center;
}
.dev-status.error {
    background: #2a1010;
    color: #ff6060;
    border: 1px solid #4a2020;
}
.dev-status.success {
    background: #102a18;
    color: #60ff90;
    border: 1px solid #204a30;
}
.dev-result {
    margin-top: 10px;
    padding: 10px;
    background: #0d1a10;
    border: 1px solid #1a3a20;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}
.dev-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}