/* ══════════════════════════════════════
   Hornet Leader — Weathered Steel Deck
   ══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Body: brushed steel with grime ─── */
body {
    font-family: 'Barlow', sans-serif;
    line-height: 1.5;
    color: #c0bdb8;
    min-height: 100vh;
    background-color: #3b3d3a;
    background-image:
        /* scratches */
        repeating-linear-gradient(87deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px),
        repeating-linear-gradient(93deg, transparent, transparent 80px, rgba(0,0,0,0.015) 80px, rgba(0,0,0,0.015) 81px),
        /* non-skid texture dots */
        radial-gradient(circle 1px at 4px 4px, rgba(0,0,0,0.06) 1px, transparent 1px),
        radial-gradient(circle 1px at 12px 12px, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 16px 16px, 16px 16px;
}

/* ─── Screens ─── */
.screen { display: none; max-width: 1400px; margin: 0 auto; padding: 0 16px 2rem; }
.screen.active { display: block; }
#setup-screen { max-width: 900px; }

/* ─── Header: heavy top plate ─── */
header {
    padding: 1rem 0;
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    background:
        linear-gradient(180deg, #52554e 0%, #474a45 40%, #3e413c 100%);
    border-top: 2px solid #5a5d58;
    border-bottom: 3px solid #8b7a2e;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 3px 8px rgba(0,0,0,0.5);
    position: relative;
}
/* rivet dots on header */
header::before, header::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #6a6d68, #3a3d38);
    box-shadow:
        0 1px 1px rgba(0,0,0,0.5),
        inset 0 1px 1px rgba(255,255,255,0.15),
        16px 0 0 0 #3a3d38, 16px 0 0 0 rgba(0,0,0,0.01);
}
header::before { left: 16px; box-shadow: 0 1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15), 16px 0 0 #4a4d48; }
header::after { right: 16px; box-shadow: 0 1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15), -16px 0 0 #4a4d48; }

header h1 {
    font-family: 'Bebas Neue', sans-serif;
    color: #e8e4dc;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-shadow: 1px 2px 3px rgba(0,0,0,0.6);
}
.subtitle {
    font-family: 'Barlow Condensed', sans-serif;
    color: #8a8880;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.header-actions { display: flex; gap: 0.5rem; }

/* ─── Rivet mixin via class ─── */
.riveted {
    position: relative;
}
.riveted::before {
    content: '';
    position: absolute;
    top: 8px; left: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #5e615c, #3a3d38);
    box-shadow:
        0 1px 1px rgba(0,0,0,0.5),
        inset 0 0.5px 0.5px rgba(255,255,255,0.12);
}
.riveted::after {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #5e615c, #3a3d38);
    box-shadow:
        0 1px 1px rgba(0,0,0,0.5),
        inset 0 0.5px 0.5px rgba(255,255,255,0.12);
}

/* ─── Buttons: stamped metal ─── */
.btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4em 1.1em;
    border: 1px solid #5a5d58;
    border-radius: 2px;
    background: linear-gradient(180deg, #56594f, #484b44);
    color: #d0cdc5;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.btn:hover { background: linear-gradient(180deg, #62655c, #56594f); color: #fff; border-color: #8b7a2e; }
.btn-primary {
    background: linear-gradient(180deg, #9e8520, #7a6818);
    border-color: #8b7a2e;
    color: #1a1a18;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover { background: linear-gradient(180deg, #b09525, #8b7a1e); }
.btn-danger { background: linear-gradient(180deg, #6a2520, #501a18); border-color: #8a3030; color: #e0a0a0; }
.btn-danger:hover { background: linear-gradient(180deg, #7a3028, #5a2020); }
.btn-small { font-size: 0.75rem; padding: 0.3em 0.7em; }
.day-actions .btn:disabled {
    pointer-events: none;
    color: #666;
    border-color: #444;
    background: #333;
}
.btn-icon { padding: 0.2em 0.5em; font-size: 0.8rem; min-width: 24px; }

/* ─── Forms ─── */
.setup-form {
    background:
        linear-gradient(180deg, #4a4d48, #43463f);
    padding: 1.5rem;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    border: 1px solid #5a5d55;
    border-top: 3px solid #8b7a2e;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 3px 10px rgba(0,0,0,0.4);
}
.form-group { margin-bottom: 1rem; }
.setup-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.setup-row .form-group { flex: 1; min-width: 150px; }

label {
    display: block;
    margin-bottom: 0.3rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    color: #8a8880;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

select, input[type="number"], input[type="text"] {
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    padding: 0.45em;
    background: #2a2c28;
    color: #d0cdc5;
    border: 1px solid #4a4d48;
    border-radius: 2px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}
.setup-form select, .setup-form input { width: 100%; }
select:focus, input:focus { outline: none; border-color: #8b7a2e; box-shadow: inset 0 2px 4px rgba(0,0,0,0.35), 0 0 0 2px rgba(139,122,46,0.2); }

/* Scenario info tags */
.sc-meta {
    display: block;
    margin: 0.3rem 0;
    color: #a0a098;
}
.sc-tag-group {
    margin-top: 0.4rem;
}
.sc-tag-label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8a8880;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.sc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.sc-tag {
    font-size: 0.78rem;
    padding: 0.15em 0.5em;
    border-radius: 2px;
    font-weight: 600;
}
.sc-tag-ac {
    background: #3a3d38;
    border: 1px solid #5a5d55;
    color: #c8b040;
}
.sc-tag-wp {
    background: #38343a;
    border: 1px solid #55505a;
    color: #a0a0c0;
}

.scenario-info, .length-info {
    background: #2a2c28;
    padding: 0.7rem 1rem;
    border-radius: 2px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #a0a098;
    border-left: 3px solid #8b7a2e;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}

/* ─── Aircraft Selection ─── */
.aircraft-options { padding: 0.5rem 0; }
.aircraft-table { width: auto; font-size: 0.85rem; }
.aircraft-table td { padding: 0.3rem 0.6rem; border-bottom: 1px solid #3a3d38; white-space: nowrap; }
.aircraft-table tr:hover td { background: rgba(139,122,46,0.08); cursor: pointer; }
.ac-check { width: 2rem; text-align: center; }
.ac-check input[type="checkbox"] { accent-color: #8b7a2e; cursor: pointer; }
.ac-designation { font-weight: 700; color: #e0ddd5; }
.ac-name { color: #8a8880; }
.ac-pilots { color: #8a8880; text-align: right; font-size: 0.8rem; }
.ac-so { text-align: right; font-size: 0.8rem; min-width: 3em; }
.aircraft-so-cost { font-weight: 700; }
.aircraft-so-cost.so-gain { color: #6aaa5a; }
.aircraft-so-cost.so-pay { color: #c06050; }

/* ─── Campaign Options ─── */
#campaign-options-area {
    padding: 0.3rem 0;
}
#campaign-options-area label.rule-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: #c0bdb8;
    cursor: pointer;
    margin-bottom: 0.2rem;
    white-space: nowrap;
}
#campaign-options-area label.rule-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    flex-shrink: 0;
}

/* ─── Difficulty Rules ─── */
#difficulty-rules-area {
    padding: 0.5rem 0;
}
.diff-level-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.diff-level-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #c8b040;
    min-width: 10em;
}
.diff-level-select {
    width: auto !important;
    min-width: 140px;
}
.diff-rules-box {
    background: #2a2c28;
    border: 1px solid #4a4d48;
    border-left: 3px solid #8b7a2e;
    border-radius: 2px;
    padding: 0.6rem 1rem;
    margin-top: 0.4rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}
.diff-rules-box-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #8a8880;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}
.diff-rules-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.diff-rule-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #c0bdb8;
    cursor: pointer;
    padding: 0.25rem 0;
}
.diff-rule-item input[type="checkbox"] {
    accent-color: #8b7a2e;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.diff-rule-item.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.diff-rule-name {
    font-weight: 700;
    white-space: nowrap;
}
.diff-rule-desc {
    color: #8a8880;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Active rules badges in campaign view */
.active-rules {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.rule-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15em 0.5em;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rule-badge-disadvantage {
    background: #4a2e2e;
    border: 1px solid #6a4040;
    color: #e09080;
}
.rule-badge-advantage {
    background: #2e4a2e;
    border: 1px solid #406a40;
    color: #80d080;
}
.rule-badge-info {
    background: #2e3a4a;
    border: 1px solid #40506a;
    color: #80a0d0;
}

/* ─── Hidden ─── */
.hidden { display: none !important; }

/* ─── Dashboard 2-column layout ─── */
#dashboard-screen main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 1100px) {
    #dashboard-screen main {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* ─── Sections: welded steel panels ─── */
.section-campaign, .section-squadron {
    background:
        linear-gradient(180deg, #4a4d48, #43463f);
    border-radius: 2px;
    padding: 1rem 1.2rem;
    border: 1px solid #5a5d55;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 3px 10px rgba(0,0,0,0.4);
    position: relative;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #8b7a2e;
}
.section-header .section-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.section-title {
    font-family: 'Bebas Neue', sans-serif;
    color: #e8e4dc;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #8b7a2e;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ─── Campaign Stats ─── */
.campaign-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
}
.stat-item { color: #8a8880; }
.so-badge, .vp-badge {
    font-family: 'Barlow Condensed', sans-serif;
    padding: 0.2em 0.7em;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.so-badge { background: linear-gradient(180deg, #3a4a35, #2e3e2a); border: 1px solid #5a7a50; color: #8fc88f; }
.deck-badge { background: linear-gradient(180deg, #3a3a35, #2e2e2a); border: 1px solid #6a6a50; color: #c8c088; font-family: 'Barlow Condensed', sans-serif; padding: 0.2em 0.7em; border-radius: 2px; font-weight: 700; font-size: 0.85rem; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.vp-badge { background: linear-gradient(180deg, #3a3a4a, #2e2e3e); border: 1px solid #5a5a7a; color: #8f8fc8; }

/* ═══ Mission Day Blocks: deck plates ═══ */
.mission-day {
    background: #3a3d38;
    border: 1px solid #52554e;
    border-left: 4px solid #6a6d65;
    border-radius: 2px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    position: relative;
}
/* weld seam on top */
.mission-day::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.08) 80%, transparent);
}
.mission-day.resolved { border-left-color: #6aaa5a; }
.mission-day.day-locked {
    opacity: 0.5;
}
.mission-day.day-locked::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255,255,255,0.04) 4px,
        rgba(255,255,255,0.04) 8px
    );
    pointer-events: none;
    z-index: 10;
}

.day-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    background: linear-gradient(180deg, #4e514a, #45483f);
    border-bottom: 1px solid #52554e;
    flex-wrap: wrap;
}
.day-num {
    font-family: 'Bebas Neue', sans-serif;
    color: #c8b040;
    font-size: 1.15rem;
    min-width: 3.5em;
    padding-bottom: 0.1em;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ─── Field label+input ─── */
.tgt-field { display: flex; flex-direction: column; gap: 2px; }
.tgt-field-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6rem;
    color: #7a7870;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}
.tgt-field input, .tgt-field select {
    width: 60px;
    font-size: 0.82rem;
    padding: 0.2em 0.35em;
    background: #2a2d26;
    border: 1px solid #4a4e42;
    border-radius: 3px;
    color: #d0cca0;
}
.tgt-field input:focus, .tgt-field select:focus {
    border-color: #8a8e70;
    outline: none;
}
.tgt-field select[data-tfield="targetNumber"] { width: 100px; }
.day-actions { margin-left: auto; display: flex; gap: 0.3rem; }
.btn-downtime { background: #5a4a1a; color: #e8c840; border-color: #8b7a2e; }

/* ─── Targets ─── */
.day-targets { padding: 0.3rem 0.6rem 0.5rem; }

/* Target Card Block */
.target-block {
    border: 1px solid #4a4e42;
    border-radius: 6px;
    background: #30332c;
    overflow: hidden;
}
.target-block + .target-block { margin-top: 0.5rem; }
.target-block.target-resolved { opacity: 0.5; }

/* 1) Header bar */
.tc-header {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #4a4d44, #3e413a);
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid #555850;
}
.tc-type {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1a1c18;
    background: #c8b040;
    padding: 0.1rem 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.tc-title {
    flex: 1;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    color: #e8e0c0;
    letter-spacing: 0.03em;
}
.tc-header-actions {
    display: flex; gap: 0.3rem; align-items: center;
}

/* 2) Traits */
.tc-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid #3a3d35;
}
.target-trait-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    background: #2a2d26;
    border: 1px solid #555850;
    color: #b0ac98;
    white-space: nowrap;
    position: relative;
}
.target-trait-tag.has-tooltip { cursor: help; border-bottom-style: dashed; }
.target-trait-tag.has-tooltip:hover { background: #3e4139; color: #d0ccb8; }
#trait-tooltip {
    position: fixed; z-index: 9999;
    max-width: min(320px, 90vw);
    white-space: pre-line; font-size: 0.75rem; font-weight: 400; line-height: 1.45;
    padding: 0.5rem 0.7rem; border-radius: 4px;
    background: #1a1c18; border: 1px solid #5a5d55; color: #d0cec4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); pointer-events: none; display: none;
}

/* 3) Stats grid */
.tc-stats {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid #3a3d35;
}
.tc-stat-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 3.5rem;
    padding: 0.2rem 0.5rem;
    background: #282b24;
    border: 1px solid #43463f;
    border-radius: 4px;
}
.tc-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6rem; color: #7a7870;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 0.15rem;
}
.tc-stat-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem; color: #d0cca0;
    line-height: 1;
}
.tc-daynight {
    display: flex; align-items: center; justify-content: center;
    min-width: 5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}
.tc-daynight.day {
    background: rgba(200,180,80,0.15);
    border: 1px solid #8b7a2e;
    color: #e8c840;
}
.tc-daynight.night {
    background: rgba(60,80,140,0.25);
    border: 1px solid #3a5080;
    color: #80a0d0;
}
.tc-daynight:hover { filter: brightness(1.15); }
.tc-daynight.no-night {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.tc-stat-select {
    font-size: 0.78rem; padding: 0.15em 0.3em;
    background: #2a2d26; border: 1px solid #4a4e42;
    border-radius: 3px; color: #d0cca0;
}
.tc-stat-select:focus { border-color: #8a8e70; outline: none; }
.tc-stat-wp { border-color: #8b7a2e; }
.tc-stat-wp .tc-stat-label { color: #c8b040; }
.tc-stat-wp .tc-stat-value { color: #e8c840; }
.tc-stat-hits { border-color: #a04030; }
.tc-stat-hits .tc-stat-label { color: #c06050; }
.tc-stat-hits .tc-stat-value { color: #e06050; }

/* 4) Reward boxes */
.tc-rewards {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
}
.tc-reward-box {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: 0.35rem 0.3rem;
    border-radius: 4px;
    border: 1px solid #43463f;
    background: #282b24;
    min-width: 0;
}
.tc-reward-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6rem; color: #7a7870;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 0.1rem;
}
.tc-reward-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem; line-height: 1;
}
.tc-reward-vp .tc-reward-value { color: #e8c840; }
.tc-reward-recon .tc-reward-value { color: #60a0e0; }
.tc-reward-intel .tc-reward-value { color: #a080d0; }
.tc-reward-infra .tc-reward-value { color: #50c878; }
.tc-reward-vp { border-color: #6a6020; }
.tc-reward-recon { border-color: #2a5080; }
.tc-reward-intel { border-color: #503870; }
.tc-reward-infra { border-color: #286040; }

/* Badges (reused in draw modal etc.) */
.wp-badge {
    font-size: 0.72rem; font-weight: 700;
    color: #e8c840; background: rgba(139,122,46,0.2);
    border: 1px solid #8b7a2e; border-radius: 3px;
    padding: 0.1rem 0.4rem; white-space: nowrap;
}
.free-so-badge {
    font-size: 0.72rem; font-weight: 700;
    color: #50c878; background: rgba(50,140,80,0.2);
    border: 1px solid #328c50; border-radius: 3px;
    padding: 0.1rem 0.4rem; white-space: nowrap;
}
.hits-badge {
    font-size: 0.72rem; font-weight: 700;
    color: #e06050; background: rgba(180,60,50,0.2);
    border: 1px solid #a04030; border-radius: 3px;
    padding: 0.1rem 0.4rem; white-space: nowrap;
}

/* Resolve / Remove */
.target-resolve {
    display: flex; gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    align-items: center;
}
.target-remove {
    font-size: 0.7rem; padding: 0.1em 0.4em;
    color: #8a8880; background: none;
    border: 1px solid #5a5d55; border-radius: 2px; cursor: pointer;
}
.target-remove:hover { color: #c06050; border-color: #c06050; }

/* ─── Assigned Pilots ─── */
.target-pilots {
    padding: 0.15rem 0.7rem;
    border-top: 1px solid #3a3d35;
}
.assigned-pilot-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.3rem 0.4rem;
    font-size: 0.82rem;
    border-bottom: 1px solid #3a3d38;
}
.ap-col { flex-shrink: 0; }
.ap-col-fl { width: 1.2rem; text-align: center; margin-right: 0.6rem; }
.ap-col-name { width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-col-ac { width: 4.5rem; font-size: 0.75rem; color: #a0a890; margin-right: 1.2rem; }
.ap-col-stxp {
    width: 7.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ap-col-sa {
    width: 5.5rem;
    display: flex;
    align-items: center;
    gap: 2px;
}
.ap-col-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    align-items: flex-end;
}
.ap-actions-row {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.ap-stxp-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
}
.ap-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6rem;
    color: #8a8880;
    text-transform: uppercase;
    width: 1.4rem;
    flex-shrink: 0;
}
.ap-stat-val {
    font-weight: 700;
    min-width: 1.5rem;
    text-align: center;
    font-size: 0.72rem;
}
.ap-sa-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: #90b0d0;
    margin-right: 2px;
}
.ap-sa-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #90b0d0;
    min-width: 1.8rem;
    text-align: center;
}
.assigned-pilot-row.shot-down { opacity: 0.35; text-decoration: line-through; }

/* ─── Random Target Selection Overlay ─── */
.assigned-pilot-row.random-target-overlay {
    position: relative;
}
.assigned-pilot-row.random-target-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 60, 60, 0.18);
    border: 2px solid rgba(255, 80, 80, 0.6);
    border-radius: 3px;
    pointer-events: none;
    animation: randomPulse 1.2s ease-in-out infinite;
}
@keyframes randomPulse {
    0%, 100% { background: rgba(255, 60, 60, 0.18); }
    50% { background: rgba(255, 60, 60, 0.32); }
}

/* ─── Stress Tag (S/U) ─── */
.stress-tag {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0 0.25em;
    margin-left: 0.3em;
    border-radius: 2px;
    vertical-align: middle;
    line-height: 1.3;
}
.stress-tag-shaken {
    color: #1a1a00;
    background: #e0c040;
}
.stress-tag-unfit {
    color: #fff;
    background: #c03030;
}

/* ─── Damage / Jettison ─── */
.btn-damage {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    padding: 0.2em 0.5em;
    background: #3a2a10;
    border: 1px solid #6a5028;
    color: #c0a060;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
}
.btn-damage:hover { background: #4a3518; border-color: #b09040; color: #e0c080; }
.btn-damage.active { background: #5a3810; border-color: #c0a040; color: #ffd060; }

/* ─── Evade Button ─── */
.btn-evade {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    padding: 0.2em 0.5em;
    background: #1a2a3a;
    border: 1px solid #2a5a7a;
    color: #70b0d0;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
}
.btn-evade:hover { background: #253a4a; border-color: #4a8aba; color: #a0d8f8; }

/* ──��� Evade Modal ─── */
.evade-modal {
    background: #2a2d26;
    border: 2px solid #5a5e50;
    border-radius: 8px;
    width: min(90vw, 340px);
    padding: 1.5rem;
    text-align: center;
}
.evade-header {
    margin-bottom: 0.6rem;
}
.evade-pilot-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    color: #e0ddd5;
    margin-right: 0.5rem;
}
.evade-pilot-ac {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    color: #8a8880;
}
.evade-desc {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9rem;
    color: #c0a060;
    margin-bottom: 1.2rem;
    letter-spacing: 0.05em;
}
.evade-dice-area {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.evade-die {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1c16;
    border: 2px solid #5a5e50;
    border-radius: 6px;
    transition: border-color 0.3s, background 0.3s, transform 0.15s;
}
.evade-die-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    color: #e0ddd5;
    line-height: 1;
}
.evade-die-spin {
    animation: evadeDieSpin 0.08s linear;
}
@keyframes evadeDieSpin {
    0% { transform: rotateX(0deg) scale(1); }
    50% { transform: rotateX(90deg) scale(0.9); }
    100% { transform: rotateX(0deg) scale(1); }
}
.evade-die-highlight {
    border-color: #50ff50;
    background: #1a2a1a;
    box-shadow: 0 0 12px rgba(80, 255, 80, 0.3);
}
.evade-die-highlight .evade-die-val {
    color: #50ff50;
    text-shadow: 0 0 8px rgba(80, 255, 80, 0.5);
}
.evade-result {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    color: #a0d8a0;
    margin-top: 0.5rem;
}
.evade-result strong {
    font-size: 1.3rem;
    color: #50ff50;
}
.evade-modal-actions {
    margin-top: 1.2rem;
    text-align: center;
}

/* ─── Jettison per-item overlay ─── */
.loadout-item.jettisoned {
    position: relative;
    opacity: 0.6;
}
.loadout-item.jettisoned::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(180, 100, 30, 0.25);
    border: 1px dashed rgba(200, 140, 50, 0.6);
    border-radius: 3px;
    pointer-events: none;
}
.jettison-item-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffc040;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
    white-space: nowrap;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 1;
}

.ap-name { font-weight: 700; color: #e0ddd5; min-width: 5em; }
.ap-aircraft { color: #7a7870; font-style: italic; min-width: 6em; }
.ap-stress-section, .ap-xp-section { display: flex; align-items: center; gap: 0.3rem; }
.ap-stress-label, .ap-xp-label {
    font-family: 'Barlow Condensed', sans-serif;
    color: #7a7870;
    font-size: 0.72rem;
    min-width: 3.5em;
    text-transform: uppercase;
}
.ap-stress-mission { display: flex; align-items: center; gap: 3px; color: #c06050; font-weight: 700; font-size: 0.82rem; }
.ap-xp-mission { display: flex; align-items: center; gap: 3px; color: #6098c0; font-weight: 700; font-size: 0.82rem; }
.ap-ms-val, .ap-xp-val { min-width: 1.5em; text-align: center; }
.ap-arrow { width: 18px; height: 18px; font-size: 0.5rem; }
.ap-actions { margin-left: auto; }

.btn-shotdown {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    padding: 0.2em 0.5em;
    background: #4a2520;
    border: 1px solid #6a3828;
    color: #c09080;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
}
.btn-shotdown:hover { background: #5a2e25; border-color: #c06050; color: #e0a090; }
.btn-shotdown.active { background: #6a2820; border-color: #c06050; color: #ff7060; }

/* ─── Assignment Panel ─── */
.assign-panel {
    padding: 0.4rem 0.8rem 0.4rem 2rem;
    margin-left: 1rem;
    background: #35383a;
    border-left: 2px solid #8b7a2e;
    margin-bottom: 0.3rem;
}
.assign-table { font-size: 0.8rem; }
.assign-table th { padding: 0.3rem 0.5rem; font-size: 0.68rem; background: #3e413c; }
.assign-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid #3a3d38; }
.assign-check-cell { text-align: center; width: 2rem; }
.assign-check-cell input[type="checkbox"] { accent-color: #8b7a2e; cursor: pointer; }
.assign-row-disabled { opacity: 0.3; }
.assign-row-disabled .btn-replacement { opacity: 1; position: relative; z-index: 1; }
.assign-row-disabled:has(.btn-replacement) { opacity: 0.6; }
.assign-row-deployed { opacity: 0.4; }
.assign-row-deployed td:last-child { color: #c8b040; font-style: italic; }
.assign-row-selected td { background: rgba(139,122,46,0.08); }
.assign-table tr:hover td { background: rgba(139,122,46,0.1); }
.assign-limit-info { font-size: 0.75rem; color: #c8b040; padding: 0.3rem 0; font-weight: 600; }
.assign-btn-row { display: flex; gap: 0.4rem; padding: 0.5rem 0; justify-content: flex-end; }

/* ─── Day Resolve ─── */
.day-resolve {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    border-top: 1px solid #52554e;
    align-items: center;
    flex-wrap: wrap;
}
.result-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3em 0.7em;
    border: 1px solid #5a5d55;
    border-radius: 2px;
    background: #3a3d38;
    color: #8a8880;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.15s;
}
.result-btn:hover { border-color: #aaa; color: #ddd; }
.result-btn.selected { font-weight: 700; }
.result-btn[data-result="Destroyed"].selected { background: #2e4a2e; border-color: #6aaa5a; color: #8fd88f; }
.result-btn[data-result="Damaged"].selected { background: #4a4a2e; border-color: #8b7a2e; color: #d8c850; }
.result-btn[data-result="Failed"].selected { background: #4a2e2e; border-color: #a06050; color: #e08070; }
.resolve-btn { margin-left: auto; }
.day-resolved-badge {
    margin-left: auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.82rem;
    color: #6aaa5a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ═══ Squadron Table ═══ */
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th {
    background: linear-gradient(180deg, #4e514a, #45483f);
    color: #c8b040;
    padding: 0.45rem 0.6rem;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    border-bottom: 2px solid #8b7a2e;
}
td { padding: 0.5rem 0.8rem; border-bottom: 1px solid #43463f; vertical-align: middle; text-align: center; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ─── Carrier Board ─── */
.carrier-board {
    position: relative;
    display: inline-block;
    width: 100%;
    grid-column: 1 / -1;
}
/* Page-level zoom for zone transition animation */
html {
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform-origin: 0 0;
}
html.zone-page-zoom {
    transform: scale(var(--zone-zoom, 2));
    transform-origin: var(--zone-zoom-x, 0px) var(--zone-zoom-y, 0px);
}
.carrier-board .carrier-img {
    display: block;
    width: 100%;
    border-radius: 6px;
}
.carrier-credit {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    pointer-events: none;
}
.carrier-marker {
    pointer-events: none;
    object-fit: contain;
    border: 2px solid #000;
    border-radius: 6px;
    filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.6));
}
.carrier-pilot-marker {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Barlow Condensed', sans-serif;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.6);
    aspect-ratio: 1 / 1;
}
.cpm-name {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 4px;
    line-height: 1.2;
}
.cpm-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 2px 4px;
}
.cpm-aircraft {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ddd;
    line-height: 1.2;
}
.cpm-status {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
}
/* Diamond marker: clipped bg + text overlay */
.carrier-diamond-wrapper {
    pointer-events: none;
    overflow: visible;
    border: none;
    filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.6));
}
.carrier-diamond-border {
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carrier-diamond-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: rotate(-45deg) scale(1.42);
}
.carrier-diamond-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}
.carrier-diamond-overlay .cpm-name {
    align-self: center;
    text-align: center;
    font-size: 1.0rem;
}
.carrier-diamond-overlay .cpm-aircraft {
    font-size: 0.85rem;
    margin-top: 3px;
}
.carrier-diamond-overlay .cpm-status {
    align-self: center;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 5px;
}
.carrier-usn .cpm-name { font-size: 1.0rem; }
.carrier-usn .cpm-status { font-size: 0.85rem; }
.cpm-status.cpm-okay { color: #88cc88; }
.cpm-status.cpm-shaken { color: #ffd740; }
.cpm-status.cpm-unfit { color: #ff4444; }
.cpm-unfit-overlay {
    position: relative;
}
.cpm-unfit-overlay::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(180, 30, 30, 0.4);
    border-radius: inherit;
}
.cpm-mission-label {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.0rem;
    font-weight: 700;
    white-space: pre-line;
    border-radius: inherit;
    z-index: 1;
}
.carrier-diamond-wrapper > .cpm-mission-label {
    top: -18%; left: -18%;
    width: 136%; height: 136%;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border-radius: 0;
}
.cpm-mission-shotdown {
    background: rgba(120, 10, 10, 0.75);
    color: #ffaaaa;
}

/* ─── Zone Transition Animations ─── */
.carrier-marker.marker-flip-secure {
    animation: flipSecure 0.8s ease-in-out forwards;
    transform-style: preserve-3d;
}
@keyframes flipSecure {
    0%   { transform: perspective(400px) rotateY(0deg) scale(1); }
    40%  { transform: perspective(400px) rotateY(90deg) scale(1.2); }
    50%  { transform: perspective(400px) rotateY(90deg) scale(1.2); }
    100% { transform: perspective(400px) rotateY(0deg) scale(1); }
}
.carrier-marker.marker-drop-active {
    animation: dropBounce 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes dropBounce {
    0%   { transform: translateY(-200%) scale(0.3); opacity: 0; }
    40%  { transform: translateY(10%) scale(1.15); opacity: 1; }
    55%  { transform: translateY(-8%) scale(0.95); }
    70%  { transform: translateY(4%) scale(1.05); }
    85%  { transform: translateY(-2%) scale(0.98); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.zone-transition-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9998;
    pointer-events: all;
    background: transparent;
}

/* ─── Band Secure Modal ─── */
.debrief-band-secure {
    text-align: center;
    padding: 0.8rem 1.5rem;
    margin: 0.5rem 1rem;
    border: 1px solid #5a6040;
    border-radius: 6px;
    background: rgba(80, 100, 50, 0.15);
}
.debrief-band-secure h3 {
    color: #e0c050;
    margin-bottom: 0.4rem;
}
.band-secure-list {
    list-style: none;
    display: inline-block;
    text-align: left;
    padding: 0.5rem 0;
    margin: 0;
}
.band-secure-list li {
    padding: 0.2rem 0;
    color: #a0c890;
}
.band-secure-list li::before {
    content: '\2714 ';
    color: #6ac040;
}
/* ─── Victory Modal ─── */
.victory-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: #e8c840;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}
.victory-rank {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    margin: 0.3rem 0;
}
.victory-rank-en {
    font-size: 1rem;
    color: #8a8e7a;
    margin-bottom: 0.8rem;
}
.victory-great { color: #ffd700; }
.victory-good { color: #60c060; }
.victory-adequate { color: #6098c0; }
.victory-poor { color: #c08040; }
.victory-dismal { color: #c04040; }
.victory-vp {
    font-size: 1.2rem;
    color: #c0bdb8;
    margin: 0.5rem 0;
}
.victory-scenario {
    font-size: 0.85rem;
    color: #8a8e7a;
}

/* ─── Campaign Result Box (inline) ─── */
.campaign-result-box {
    margin-top: 1rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, #2a2e25 60%, #3a3e30);
    border: 2px solid #e8c840;
    border-radius: 8px;
    text-align: center;
}
.campaign-result-box.campaign-result-fail {
    border-color: #c04040;
}
.campaign-result-icon {
    font-size: 2rem;
    margin-bottom: 0.3rem;
}
.campaign-result-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    color: #e8c840;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}
.campaign-result-fail .campaign-result-title {
    color: #c04040;
}
.campaign-result-rank {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    margin: 0.2rem 0;
}
.campaign-result-rank-en {
    font-size: 0.85rem;
    color: #8a8e7a;
    margin-bottom: 0.5rem;
}
.campaign-result-vp {
    font-size: 1.1rem;
    color: #c0bdb8;
    margin: 0.3rem 0;
}
.campaign-result-scenario {
    font-size: 0.8rem;
    color: #8a8e7a;
}

.band-secure-expand {
    margin-top: 0.6rem;
    color: #e0c050;
    font-weight: 600;
}

#squadron-table { table-layout: fixed; }
#squadron-table th:nth-child(1) { width: 14%; }
#squadron-table th:nth-child(2) { width: 16%; }
#squadron-table th:nth-child(3) { width: 12%; }
#squadron-table th:nth-child(4) { width: 10%; }
#squadron-table th:nth-child(5) { width: 18%; }
#squadron-table th:nth-child(6) { width: 22%; }
#squadron-table th:nth-child(7) { width: 8%; }
#squadron-table td { overflow: hidden; text-overflow: ellipsis; }

tr.pilot-unfit td { background: rgba(192, 60, 50, 0.1) !important; }
tr.pilot-unfit { position: relative; }

/* ─── Rank Cells ─── */
.rank-newbie  { color: #c8b060; text-align: center; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; }
.rank-green   { color: #80b880; text-align: center; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; }
.rank-average { color: #7888c0; text-align: center; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; }
.rank-skilled { color: #c08078; text-align: center; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; }
.rank-veteran { color: #a878c0; text-align: center; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; }
.rank-ace     { color: #e8c840; text-align: center; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; }

/* ─── Status ─── */
.status-okay  { color: #6aaa5a; font-weight: 700; }
.status-shaken { color: #d8c040; font-weight: 700; }
.status-unfit  { color: #c06050; font-weight: 700; text-decoration: line-through; }

.pilot-name { font-weight: 700; color: #e0ddd5; }
.pilot-aircraft { color: #8a8880; }

/* ─── XP Bar ─── */
.xp-bar-wrap { position: relative; min-width: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.xp-bar-track { width: 100%; height: 10px; background: #2a2c28; border-radius: 2px; overflow: hidden; border: 1px solid #4a4d48; }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, #7a6818, #c8b040); border-radius: 1px; transition: width 0.2s; }
.xp-bar-label { font-size: 0.72rem; color: #6098c0; line-height: 1; }

/* ─── Arrow Controls ─── */
.inline-control { display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    padding: 0; margin: 0;
    border: 1px solid #5a5d55;
    border-radius: 2px;
    background: linear-gradient(180deg, #56594f, #484b44);
    color: #8a8880;
    font-size: 0.55rem;
    cursor: pointer;
    line-height: 1;
    transition: all 0.1s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.arrow-btn:hover { background: linear-gradient(180deg, #62655c, #56594f); color: #e0ddd5; border-color: #8b7a2e; }
.arrow-up:hover { background: linear-gradient(180deg, #6a3530, #5a2520); border-color: #c06050; color: #e0a090; }
.arrow-down:hover { background: linear-gradient(180deg, #356a35, #255a25); border-color: #6aaa5a; color: #a0e0a0; }

.stress-val { font-weight: 700; font-size: 1rem; min-width: 1.2em; text-align: center; color: #e0ddd5; }
.stress-max { color: #8a8880; font-size: 0.82rem; }
.cooldown-val { text-align: center; color: #6098c0; font-weight: 600; }

.rank-cell { cursor: pointer; user-select: none; }
.rank-cell:hover { filter: brightness(1.2); }

/* ═══ Recon / Intel / Infra Track ═══ */
.track-panel { display: flex; gap: 0.8rem; margin-top: 1rem; flex-wrap: wrap; }
.track-box {
    flex: 1;
    min-width: 100px;
    background: linear-gradient(180deg, #45483f, #3e413c);
    border: 1px solid #52554e;
    border-radius: 2px;
    padding: 0.5rem 0.6rem;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 4px rgba(0,0,0,0.3);
    position: relative;
}
/* tiny rust spot */
.track-recon::after {
    content: '';
    position: absolute;
    bottom: 3px; right: 5px;
    width: 10px; height: 6px;
    background: radial-gradient(ellipse, rgba(140,80,30,0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.track-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.2rem;
}
.track-vp .track-label { color: #e8c840; }
.track-vp .track-input { color: #e8c840; }
.track-input-readonly {
    background: #2a2c28;
    border: 1px solid #4a4d48;
    border-radius: 2px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.35);
}
.track-recon .track-label { color: #60a0e0; }
.track-intel .track-label { color: #a080d0; }
.track-infra .track-label { color: #50c878; }

.track-input {
    width: 100%;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    padding: 0.1em;
    background: #2a2c28;
    border: 1px solid #4a4d48;
    border-radius: 2px;
    color: #e0ddd5;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.35);
}
.track-recon .track-input { color: #60a0e0; }
.track-intel .track-input { color: #a080d0; }
.track-infra .track-input { color: #50c878; }

/* ═══ SAR ═══ */
.sar-section {
    padding: 0.5rem 0.8rem;
    background: #3d3535;
    border-top: 1px solid #5a4040;
}
.sar-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    color: #d08050;
    margin-bottom: 0.4rem;
    letter-spacing: 0.1em;
}
.sar-pilot-panel {
    background: #453838;
    border: 1px solid #5a4040;
    border-radius: 2px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.4rem;
}
.sar-pilot-name { font-weight: 700; color: #d0cdc5; margin-bottom: 0.3rem; font-size: 0.85rem; }
.sar-fields {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ─── SAR unified box ─── */
.sar-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 7rem;
    padding: 0.35rem 0.6rem;
    background: #282b24;
    border: 1px solid #43463f;
    border-radius: 4px;
}
.sar-box-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6rem;
    color: #7a7870;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.15rem;
    text-align: center;
    white-space: nowrap;
}
.sar-box-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: #d0cca0;
    line-height: 1;
    white-space: nowrap;
}

/* Location: clickable, color by state */
.sar-box[data-role="loc"] {
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s;
}
.sar-box[data-role="loc"]:hover { filter: brightness(1.15); }
.sar-box.loc-target  { border-color: #4a8a4a; }
.sar-box.loc-target  .sar-box-label { color: #4a8a4a; }
.sar-box.loc-target  .sar-box-value { color: #6aaa5a; }
.sar-box.loc-approach { border-color: #8b7a2e; }
.sar-box.loc-approach .sar-box-label { color: #8b7a2e; }
.sar-box.loc-approach .sar-box-value { color: #e8c840; }
.sar-box.loc-return  { border-color: #3a6090; }
.sar-box.loc-return  .sar-box-label { color: #3a6090; }
.sar-box.loc-return  .sar-box-value { color: #60a0e0; }

/* WP penalty: red accent */
.sar-box-wp { border-color: #6a3030; }
.sar-box-wp .sar-box-label { color: #c06050; }
.sar-box-wp .sar-box-value { color: #e06050; }

/* AtG: stepper */
.sar-box-stepper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sar-step-btn {
    background: none;
    border: 1px solid #43463f;
    border-radius: 3px;
    color: #8a8e7a;
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    cursor: pointer;
    line-height: 1;
}
.sar-step-btn:hover { color: #d0cca0; border-color: #8a8e70; }

/* AtG: tooltip on label only */
.sar-box-atg .sar-box-label[data-tooltip] {
    cursor: help;
    border-bottom: 1px dashed #7a7870;
}

/* SAR roll button alignment */
.sar-roll-btn { align-self: center; }
.sar-done-row { padding: 0.3rem 0; font-size: 0.82rem; border-bottom: 1px solid #453838; }
.sar-result-label { font-weight: 700; }
.sar-quick { color: #6aaa5a; }
.sar-fire { color: #d8c040; }
.sar-mia { color: #c06050; }

/* ═══ Saved Campaigns ═══ */
.saved-campaigns { margin-top: 2rem; }
.saved-campaigns h2 {
    font-family: 'Bebas Neue', sans-serif;
    color: #8a8880;
    font-size: 1rem;
    margin-bottom: 0.8rem;
    letter-spacing: 0.1em;
}
.saved-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #4a4d48, #43463f);
    padding: 0.6rem 1rem;
    border-radius: 2px;
    margin-bottom: 0.4rem;
    border: 1px solid #52554e;
    border-left: 4px solid #8b7a2e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.saved-item-info { flex: 1; }
.saved-item-name { font-weight: 700; color: #e0ddd5; }
.saved-item-detail { font-size: 0.78rem; color: #8a8880; }
.saved-item-actions { display: flex; gap: 0.4rem; }

/* ═══ Generate Group ═══ */
.generate-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ═══ Manual Pilot Selection ═══ */
.manual-panel {
    margin-top: 1rem;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 1rem;
}
.manual-panel h3 {
    font-family: 'Bebas Neue', sans-serif;
    color: #d0cdc5;
    font-size: 1rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
}
.manual-slot-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.manual-rank-badge {
    display: inline-block;
    min-width: 70px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: #c0bdb8;
}
.manual-pilot-select {
    flex: 1;
    padding: 0.3em 0.5em;
    font-size: 0.85rem;
    background: #2a2c28;
    color: #c0bdb8;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
}
.manual-pilot-select option:disabled {
    color: #555;
}
.manual-actions {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.5rem;
}
.manual-actions .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.manual-so-info {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: #a0a0a0;
    font-weight: 600;
}
.manual-so-info .so-pay { color: #e07050; }
.manual-so-info .so-gain { color: #6aaa5a; }

.import-export-bar {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

/* ═══ Responsive ═══ */
@media (max-width: 700px) {
    table { font-size: 0.78rem; }
    th, td { padding: 0.3rem 0.4rem; }
    header h1 { font-size: 1.5rem; }
    .campaign-stats { font-size: 0.78rem; gap: 0.5rem; }
    .day-header { font-size: 0.78rem; }
    .track-input { font-size: 2.2rem; }
}

.no-stats { opacity: 0.4; font-style: italic; }

/* ═══ USMC Band Progress ═══ */
.band-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.8rem;
    background: rgba(40, 42, 38, 0.6);
    border: 1px solid #555;
    border-radius: 3px;
    flex-wrap: wrap;
}
.band-progress-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    margin-right: 0.3rem;
}
.band-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 2px;
    letter-spacing: 0.03em;
}
.band-badge small {
    font-weight: 400;
    opacity: 0.8;
    margin: 0 0.15em;
}
.band-badge em {
    font-style: normal;
    font-size: 0.68rem;
    opacity: 0.9;
}
.band-secured {
    background: #2e4a2e;
    border: 1px solid #406a40;
    color: #80d080;
}
.band-active {
    background: #4a4a2e;
    border: 1px solid #6a6a40;
    color: #d0d080;
}
.band-locked {
    background: #3a3a3a;
    border: 1px solid #555;
    color: #777;
}
.band-indicator {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: #d0d080;
    margin-left: 0.3em;
    white-space: nowrap;
}

/* ═══ AV-8B Nap of the Earth ═══ */
.noe-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1em 0.4em;
    border-radius: 2px;
    background: #3a4a2e;
    border: 1px solid #506a3a;
    color: #a0c880;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.3em;
    cursor: help;
}
.noe-reminder {
    font-size: 0.75rem;
    color: #a0c880;
    padding: 0.3rem 0.5rem;
    margin-top: 0.3rem;
    background: rgba(58, 74, 46, 0.3);
    border-left: 2px solid #506a3a;
}

/* ─── Overkill Modal ─── */
.overkill-modal {
    background: #2a2d26;
    border: 2px solid #e8c840;
    border-radius: 8px;
    width: min(90vw, 380px);
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.overkill-modal h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    color: #e8c840;
    margin: 0 0 0.6rem;
}
.overkill-modal p {
    color: #d0cca0;
    font-size: 0.9rem;
    margin: 0.3rem 0;
}
.overkill-bonus {
    color: #50c878 !important;
    font-size: 0.95rem !important;
    margin-top: 0.5rem !important;
}
.overkill-modal-actions {
    display: flex; gap: 0.5rem; justify-content: center;
    margin-top: 1.2rem;
}
.overkill-modal-actions .btn { min-width: 6rem; }

/* ─── Debriefing Modal ─── */
.debrief-modal {
    background: #2a2d26;
    border: 2px solid #6a6d60;
    border-radius: 8px;
    width: min(95vw, 480px);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    cursor: pointer;
}
.debrief-header {
    text-align: center;
    padding: 1.2rem 1rem 0.6rem;
    border-bottom: 1px solid #43463f;
}
.debrief-header h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    color: #e8c840;
    margin: 0 0 0.2rem;
    letter-spacing: 0.05em;
}
.debrief-header .debrief-sub {
    font-size: 0.8rem;
    color: #8a8e7a;
}
.debrief-targets {
    padding: 0.8rem 1rem;
}
.debrief-target {
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #3a3d35;
}
.debrief-target:last-child { border-bottom: none; margin-bottom: 0; }
.debrief-target-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.debrief-target-type {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.68rem; font-weight: 700;
    color: #1a1c18; background: #c8b040;
    padding: 0.05rem 0.4rem; border-radius: 2px;
    text-transform: uppercase;
}
.debrief-target-name {
    font-weight: 600; color: #d0cca0; font-size: 0.9rem;
}
.debrief-result {
    font-size: 0.82rem; font-weight: 700;
    padding: 0.1rem 0.5rem; border-radius: 3px;
    margin-left: auto;
}
.debrief-result.destroyed { color: #5cb85c; background: rgba(92,184,92,0.12); }
.debrief-result.damaged { color: #e8c840; background: rgba(232,200,64,0.12); }
.debrief-result.failed { color: #c06050; background: rgba(192,96,80,0.12); }
.debrief-pilots {
    padding-left: 0.5rem;
    font-size: 0.8rem;
    color: #a0a890;
}
.debrief-pilot-line {
    padding: 0.1rem 0;
}
.debrief-pilot-line.shot-down { color: #c06050; }
.debrief-pilot-line.rescued { color: #e8c840; }
.debrief-summary {
    padding: 0.8rem 1rem;
    border-top: 1px solid #43463f;
    display: flex; gap: 1rem; justify-content: center;
}
.debrief-stat {
    text-align: center;
}
.debrief-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6rem; color: #7a7870;
    text-transform: uppercase;
}
.debrief-stat-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem; line-height: 1;
}
.debrief-stat-vp .debrief-stat-value { color: #e8c840; }
.debrief-stat-destroyed .debrief-stat-value { color: #5cb85c; }
.debrief-stat-shotdown .debrief-stat-value { color: #c06050; }
.debrief-imp-section {
    padding: 0.5rem 1rem;
    border-top: 1px solid #43463f;
}
.debrief-imp-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem; font-weight: 700;
    color: #c06050; text-transform: uppercase;
    letter-spacing: 0.04em; margin-bottom: 0.3rem;
}
.debrief-imp-line {
    font-size: 0.78rem; color: #a0a890;
    padding: 0.1rem 0;
}
.debrief-imp-num { color: #e8c840; font-weight: 700; }
.debrief-imp-text { color: #c06050; }
.debrief-hint {
    text-align: center;
    font-size: 0.7rem;
    color: #5a5e50;
    padding: 0.5rem;
}

/* ─── Collapsed Mission Day ─── */
.mission-day.collapsed .day-targets,
.mission-day.collapsed .day-resolve,
.mission-day.collapsed .target-resolve,
.mission-day.collapsed .target-pilots,
.mission-day.collapsed .assign-panel,
.mission-day.collapsed .day-resolved-badge-wrap,
.mission-day.collapsed .sar-section {
    display: none;
}
.mission-day.collapsed .day-header {
    cursor: pointer;
    opacity: 0.7;
}
.mission-day.collapsed .day-header:hover {
    opacity: 1;
}
.day-collapse-indicator {
    font-size: 0.7rem;
    color: #8a8e7a;
    margin-left: auto;
    padding: 0 0.3rem;
}

/* ─── Improvements Panel ─── */
.improvements-panel {
    margin-top: 0.6rem;
    border-top: 1px solid #43463f;
    padding-top: 0.5rem;
}
.improvements-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: #c06050;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}
.improvements-list {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.imp-item {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem;
    padding: 0.25rem 0.4rem;
    background: rgba(180,60,50,0.08);
    border-left: 2px solid #a04030;
    border-radius: 2px;
}
.imp-item-num {
    font-family: 'Bebas Neue', sans-serif;
    color: #e8c840; min-width: 1.8rem;
}
.imp-item-name {
    font-weight: 600; color: #d0cca0; min-width: 5rem;
}
.imp-item-text {
    color: #b0a890; flex: 1;
}

/* ─── Discard Improvement Modal ─── */
.discard-imp-modal {
    background: #2a2d26;
    border: 2px solid #5a5e50;
    border-radius: 8px;
    width: min(95vw, 520px);
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.discard-imp-header {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #43463f;
}
.discard-imp-header h3 {
    margin: 0; font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem; color: #d0c890; flex: 1;
}
.discard-imp-info { font-size: 0.8rem; color: #a0a890; }
.discard-imp-cards {
    flex: 1; overflow-y: auto; padding: 0.6rem 1rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.discard-imp-card {
    display: flex; align-items: center; gap: 0.6rem;
    background: #353830;
    border: 1px solid #4a4e42;
    border-radius: 5px;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.discard-imp-card:hover { border-color: #8a8e70; }
.discard-imp-card.selected {
    border-color: #e06050;
    background: rgba(224,96,80,0.12);
}
.discard-imp-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem; color: #e8c840; min-width: 2rem;
}
.discard-imp-name {
    font-weight: 600; color: #d0cca0; font-size: 0.85rem; min-width: 6rem;
}
.discard-imp-text {
    font-size: 0.78rem; color: #a0a890; flex: 1;
}
.discard-imp-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    padding: 0.6rem 1rem;
    border-top: 1px solid #43463f;
}

/* ─── Campaign Fail Modal ─── */
.fail-modal {
    background: #2a2d26;
    border: 2px solid #a04030;
    border-radius: 8px;
    width: min(90vw, 420px);
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.fail-modal-icon {
    font-size: 3rem;
    color: #e06050;
    margin-bottom: 0.5rem;
}
.fail-modal h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: #e06050;
    margin: 0 0 0.8rem;
}
.fail-modal p {
    color: #d0cca0;
    font-size: 0.9rem;
    margin: 0.3rem 0;
}
.fail-modal-sub {
    color: #8a8e7a !important;
    font-size: 0.8rem !important;
    margin-top: 0.6rem !important;
}
.fail-modal-actions {
    margin-top: 1rem;
}

/* ─── Target Draw Modal ─── */
.draw-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.draw-modal {
    background: #2a2d26;
    border: 2px solid #5a5e50;
    border-radius: 8px;
    width: min(95vw, 640px);
    max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.draw-modal-header {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #43463f;
}
.draw-modal-header h3 {
    margin: 0; font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem; color: #d0c890; flex: 1;
}
.draw-recon-info {
    font-size: 0.8rem; color: #a0a890;
}
.draw-modal-close {
    background: none; border: none; color: #888;
    font-size: 1.5rem; cursor: pointer; padding: 0 0.3rem;
}
.draw-modal-close:hover { color: #fff; }
.draw-cards-container {
    flex: 1; overflow-y: auto; padding: 0.6rem 1rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.draw-card {
    background: #353830;
    border: 1px solid #4a4e42;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.draw-card:hover { border-color: #8a8e70; }
.draw-card.selected-primary {
    border-color: #e8c840;
    background: rgba(232,200,64,0.1);
}
.draw-card.selected-secondary {
    border-color: #60a0e0;
    background: rgba(96,160,224,0.1);
}
.draw-card.scramble-forced {
    border-color: #e06050;
    background: rgba(224,96,80,0.12);
}
.draw-card-header {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.draw-card-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem; color: #e8c840;
    min-width: 2rem;
}
.draw-card-name {
    font-weight: 600; color: #d0cca0; font-size: 0.9rem; flex: 1;
}
.draw-card-hits {
    font-size: 0.75rem; color: #e06050; font-weight: 700;
}
.draw-card-detail {
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem;
    font-size: 0.78rem; color: #9a9e8a;
    margin-bottom: 0.3rem;
}
.draw-card-detail span { white-space: nowrap; }
.draw-card-traits {
    display: flex; flex-wrap: wrap; gap: 0.25rem;
}
.draw-card-traits .target-trait-tag {
    font-size: 0.72rem;
}
.draw-section-divider {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #c06050;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0 0.2rem;
    margin-top: 0.3rem;
    border-top: 1px dashed #5a3030;
}
.draw-card-improvement {
    font-size: 0.72rem;
    color: #c06050;
    background: rgba(180,60,50,0.1);
    border-left: 2px solid #a04030;
    padding: 0.2rem 0.5rem;
    margin-top: 0.2rem;
    border-radius: 2px;
}
.draw-card-label {
    font-size: 0.68rem; font-weight: 700; text-align: center;
    margin-top: 0.3rem;
}
.draw-card-label.primary { color: #e8c840; }
.draw-card-label.secondary { color: #60a0e0; }
.draw-card-label.scramble { color: #e06050; }
.draw-card-stopped {
    text-align: center;
    font-size: 0.8rem; color: #e06050; font-weight: 600;
    padding: 0.4rem; border-top: 1px dashed #5a3030;
}
.draw-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    padding: 0.6rem 1rem;
    border-top: 1px solid #43463f;
}
.draw-actions .btn { min-width: 5rem; }

/* ─── Replacement Pilot ─── */
.mia-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-recover, .btn-replacement {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    padding: 0.25em 0.6em;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
    border: 1px solid;
}
.btn-recover {
    background: #1e4a3a;
    border-color: #2a7a5a;
    color: #80d0a0;
}
.btn-recover:hover { background: #256a4a; border-color: #40a070; color: #a0f0c0; }
.btn-replacement {
    background: #1e3a5a;
    border-color: #2a5a8a;
    color: #90b8d8;
}
.btn-replacement:hover { background: #254a6a; border-color: #4a8aba; color: #b0d8f8; }
.replacement-tried {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    color: #808070;
    font-style: italic;
}
.mia-replace-cell {
    text-align: center;
}
.replacement-modal {
    background: #2a2d26;
    border: 2px solid #5a5e50;
    border-radius: 8px;
    width: min(90vw, 420px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.replacement-modal-body {
    padding: 1rem;
}
.replacement-modal-body h3 {
    margin: 0 0 0.6rem 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: #c8c0a0;
}
.replacement-mia {
    color: #c08080;
    margin: 0 0 0.6rem 0;
    font-size: 0.85rem;
}
.replacement-result {
    background: #1e201a;
    border: 1px solid #3a3d35;
    border-radius: 4px;
    padding: 0.6rem;
}
.replacement-result p {
    margin: 0.2rem 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9rem;
    color: #c0c8b0;
}
.replacement-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.6rem 1rem;
    border-top: 1px solid #43463f;
}

/* ─── SA Column ─── */
.sa-val {
    text-align: center;
    font-weight: 700;
    color: #90b0d0;
    font-size: 0.85rem;
}

/* ─── SA & Flight Leader ─── */
.ap-sa {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    padding: 0.1em 0.35em;
    background: rgba(40, 60, 100, 0.4);
    border: 1px solid #4a6a9a;
    border-radius: 2px;
    color: #90b0d0;
    font-weight: 700;
}
.flight-leader-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    padding: 0.1em 0.4em;
    background: rgba(100, 80, 20, 0.5);
    border: 1px solid #c0a040;
    border-radius: 2px;
    color: #ffd060;
    font-weight: 700;
    cursor: pointer;
}
.flight-leader-badge:hover { background: rgba(120, 100, 30, 0.6); border-color: #e0c060; }

/* Flight Leader Modal */
.flight-leader-modal {
    background: #2a2d26;
    border: 2px solid #5a5e50;
    border-radius: 8px;
    width: min(90vw, 420px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.flight-leader-modal-body {
    padding: 1rem;
}
.flight-leader-modal-body h3 {
    margin: 0 0 0.4rem 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: #c8c0a0;
}
.flight-leader-modal-body p {
    font-size: 0.8rem;
    color: #a0a890;
    margin: 0 0 0.6rem 0;
}
.fl-candidates {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.fl-candidate {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: #1e201a;
    border: 1px solid #3a3d35;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.fl-candidate:hover { border-color: #c0a040; background: #2a2a1e; }
.fl-name { font-weight: 700; color: #d0cec4; font-size: 0.9rem; }
.fl-aircraft { color: #a0a890; font-size: 0.8rem; }
.fl-rank { font-size: 0.8rem; }
.fl-sa {
    margin-left: auto;
    font-weight: 700;
    color: #f0d060;
    font-size: 0.9rem;
    background: rgba(100, 80, 20, 0.4);
    padding: 0.15em 0.5em;
    border-radius: 3px;
    border: 1px solid #a08a30;
}

/* ─── Night Draw Box ─── */
.tc-night-draw {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a2a;
    border: 1px solid #4a4a6a;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    min-width: 3.5rem;
    transition: border-color 0.15s;
}
.tc-night-draw:hover { border-color: #7a7aaa; }
.tc-night-draw.night-draw-shake {
    animation: nightShake 0.4s ease;
}
@keyframes nightShake {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-6px); }
    30%  { transform: translateX(5px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.night-draw-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.55rem;
    color: #7a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.night-draw-result {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: #c0c0f0;
    line-height: 1.1;
}

/* ─── Random Target Dice Box ─── */
.tc-random-dice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #3a0a0a;
    border: 1px solid #cc3333;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    min-width: 3.5rem;
    margin-left: auto;
    transition: border-color 0.15s;
}
.tc-random-dice:hover { border-color: #ff4444; }
.random-dice-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.55rem;
    color: #dd6666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.random-dice-result {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    color: #ff5555;
    line-height: 1.1;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
/* When random box exists, enemy dice sits next to it */
.tc-random-dice + .tc-enemy-dice { margin-left: 0.4rem; }

/* ─── Enemy Dice Box ─── */
.tc-enemy-dice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #3a0a0a;
    border: 1px solid #cc3333;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    min-width: 3.5rem;
    margin-left: auto;
    transition: border-color 0.15s;
}
.tc-enemy-dice:hover { border-color: #ff4444; }
.tc-enemy-dice.enemy-dice-shake {
    animation: nightShake 0.4s ease;
}
.enemy-dice-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.55rem;
    color: #dd6666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.enemy-dice-result {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: #ff5555;
    line-height: 1.1;
}
.enemy-dice-modifier {
    position: absolute;
    bottom: 2px; right: 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}
.enemy-dice-modifier.mod-positive { color: #50ff50; }
.enemy-dice-modifier.mod-negative { color: #ff4040; }

/* ─── Achieved Hits Input ─── */
.tc-stat-achieved {
    border-color: #6a5a2a;
}
.achieved-hits-input {
    width: 2.5rem;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #f0d060;
    background: #1a1c16;
    border: 1px solid #5a5e50;
    border-radius: 3px;
    padding: 0.1em 0.2em;
}
.achieved-hits-input:focus {
    outline: none;
    border-color: #f0d060;
}

/* ─── Armament Button ─── */
.btn-armament {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    padding: 0.2em 0.5em;
    background: #1e3a5a;
    border: 1px solid #2a5a8a;
    color: #90b8d8;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
}
.btn-armament:hover { background: #254a6a; border-color: #4a8aba; color: #b0d8f8; }

/* ─── Intense Stress Button ─── */
.btn-intense {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    padding: 0.2em 0.5em;
    background: #4a3520;
    border: 1px solid #6a5528;
    color: #c0a070;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
}
.btn-intense:hover { background: #5a4025; border-color: #a08040; color: #e0c090; }
.btn-intense.active { background: #6a4820; border-color: #c0a040; color: #ffd060; }
.loadout-modifier {
    position: absolute;
    bottom: 2px; right: 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    z-index: 2;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}
.loadout-modifier.mod-positive { color: #50ff50; }
.loadout-modifier.mod-negative { color: #ff4040; }
.loadout-modifier.mod-zero { color: #999; }
.loadout-bonus-note {
    width: 100%;
    font-size: 0.6rem;
    color: #7a7a6a;
    padding: 2px 0 0 0;
    font-style: italic;
}

/* ─── Dogfight Penalty Badge ─── */
.dogfight-penalty {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2em 0.7em;
    border-radius: 3px;
    cursor: help;
    white-space: nowrap;
}
.df-level-1 { background: #4a4a1a; border: 1px solid #8a8a30; color: #dddd55; }
.df-level-2 { background: #4a3a1a; border: 1px solid #8a6a20; color: #ddaa33; }
.df-level-3 { background: #4a1a1a; border: 1px solid #8a3030; color: #ff5555; }

/* ─── Armament Modal ─── */
.armament-modal {
    background: #2a2d26;
    border: 2px solid #5a5e50;
    border-radius: 8px;
    width: min(95vw, 900px);
    max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.armament-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #43463f;
}
.armament-modal-header h3 {
    margin: 0; font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem; color: #c8c0a0; letter-spacing: 0.05em;
}
.armament-wp-info {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem; color: #f0d060; font-weight: 700;
}
.armament-modal-body {
    display: flex; gap: 0.5rem;
    padding: 0.6rem;
    overflow-y: auto; flex: 1;
    min-height: 300px;
}
.armament-panel {
    flex: 1;
    background: #1e201a;
    border: 1px solid #3a3d35;
    border-radius: 4px;
    padding: 0.5rem;
}
.armament-panel h4 {
    margin: 0 0 0.4rem 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem; color: #a0a890;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid #3a3d35;
    padding-bottom: 0.3rem;
}
.armament-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.armament-item {
    position: relative;
    width: 72px;
    background: #2a2d26;
    border: 1px solid #4a4d45;
    border-radius: 3px;
    padding: 3px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, opacity 0.15s;
}
.armament-item:hover { border-color: #8a8d80; }
.armament-item.selected { border-color: #5a8a3a; background: #2a3a20; }
.armament-item.disabled {
    cursor: not-allowed; opacity: 0.5;
}
.armament-item.disabled::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(180, 40, 40, 0.3);
    border-radius: 3px;
    pointer-events: none;
}
.armament-item img {
    width: 100%; height: auto;
    display: block;
    image-rendering: pixelated;
}
.armament-label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6rem; color: #c0c8b0;
    line-height: 1.1;
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.armament-wp-cost {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.55rem; color: #f0d060;
}
.armament-so-cost {
    color: #f08050;
    font-size: 0.85rem;
}
.armament-item.special {
    border-color: #7a6a30;
}
.armament-item.special .armament-wp-cost {
    color: #f0a030;
}
/* JDAM toggle */
.jdam-toggle {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.4rem;
    background: #2a2a1e;
    border: 1px solid #5a5a30;
    border-radius: 4px;
}
.jdam-active {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    color: #f0d060;
    font-weight: 700;
}
.btn-jdam {
    background: #4a3a10 !important;
    border-color: #8a7a30 !important;
    color: #f0d060 !important;
}
.btn-jdam:hover { background: #5a4a18 !important; border-color: #c0a040 !important; }
.jdam-deactivate-btn {
    font-size: 0.65rem !important;
    padding: 0.1em 0.4em !important;
    opacity: 0.6;
}
.jdam-deactivate-btn:hover { opacity: 1; }

.armament-modal-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    padding: 0.6rem 1rem;
    border-top: 1px solid #43463f;
}

/* ─── Loadout Row ─── */
.loadout-row {
    display: flex; flex-wrap: wrap; gap: 3px;
    padding: 3px 0 3px 2rem;
    margin-left: 0.5rem;
    border-left: 2px solid #3a4a5a;
    background: rgba(30, 50, 70, 0.15);
}
.loadout-item {
    position: relative;
    display: inline-block;
    width: 72px; height: 72px;
    border: 1px solid #4a5a6a;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}
.loadout-item img.loadout-icon {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.loadout-item.spent {
    cursor: default;
}
.loadout-item.spent::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.7);
}
.loadout-spent-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: #ffcc00;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 1;
    pointer-events: none;
}

/* ─── Status Transition Animations ─── */
@keyframes statusShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-4px) rotate(-1deg); }
    20% { transform: translateX(4px) rotate(1deg); }
    30% { transform: translateX(-4px) rotate(-0.5deg); }
    40% { transform: translateX(4px) rotate(0.5deg); }
    50% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}
@keyframes statusFadeOut {
    0%   { opacity: 1; transform: scale(1); }
    30%  { opacity: 0.8; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(0.3); }
}
.marker-status-shake {
    animation: statusShake 0.6s ease-in-out;
}
.marker-status-fadeout {
    animation: statusFadeOut 0.8s ease-in forwards;
}
.marker-status-moving {
    transition: top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
                left 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
                width 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
                height 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ─── Target Detail Hover Panel ─── */
#target-detail-panel {
    position: fixed;
    z-index: 1200;
    width: 280px;
    background: #1e201a;
    border: 1px solid #6a6e5a;
    border-radius: 6px;
    padding: 0.7rem 0.8rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    pointer-events: none;
    font-size: 0.78rem;
    color: #d0ccc0;
    animation: tdpFadeIn 0.12s ease-out;
}
@keyframes tdpFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}
.tdp-header {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid #4a4e40;
}
.tdp-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    color: #8a8a70;
}
.tdp-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    color: #f0e8c0;
    letter-spacing: 0.03em;
}
.tdp-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}
.tdp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #282b24;
    border: 1px solid #43463f;
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
}
.tdp-section {
    margin-top: 0.45rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #3a3d35;
}
.tdp-sec-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    color: #9a9880;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}
.tdp-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.tdp-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.62rem;
    color: #8a8880;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tdp-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    color: #e8e4c8;
    line-height: 1;
}
.tdp-sub {
    font-size: 0.65rem;
    color: #c08060;
}
.tdp-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.tdp-trait {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.68rem;
    background: #3a3d2e;
    border: 1px solid #5a5e48;
    color: #d0c880;
    padding: 0.1em 0.4em;
    border-radius: 2px;
}
.tdp-text {
    font-size: 0.72rem;
    color: #c0bcb0;
    line-height: 1.35;
}
.tdp-night {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    color: #8090c0;
    letter-spacing: 0.05em;
}
.tdp-campaign .tdp-text { color: #c8b070; }

.tc-title-hover {
    cursor: help;
    border-bottom: 1px dotted rgba(200, 180, 120, 0.4);
}
.tc-title-hover:hover {
    border-bottom-color: rgba(240, 220, 160, 0.8);
}