/* ============================================
   MILITARY MINIGAME STYLES
   Shared scaffolding for every branch minigame set. Only the accent
   palette changes per branch; the layout is identical so all four
   still read as one industry.
     .mil-af   Air Force    — jet blue
     .mil-cg   Coast Guard  — racing-stripe orange over navy
     .mil-army Army         — OD green and gold
     .mil-usmc Marine Corps — scarlet and gold
     .mil-energy    Energy    — electric blue
     .mil-logistics Logistics — hazard amber
     .mil-navy Navy         — navy blue and gold
     .mil-space Space Force — deep space and cyan
     .mil-seal Navy SEAL    — trident gold on black
   ============================================ */

.mil-game {
    --mil-accent: #4FA3E3;
    --mil-accent-dark: #1F5C8B;
    --mil-panel: rgba(17, 28, 43, 0.92);
    --mil-panel-soft: rgba(28, 44, 65, 0.85);
    --mil-line: rgba(94, 140, 190, 0.45);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px;
    max-width: 760px;
    margin: 0 auto;
    color: #E9F1FA;
    font-family: 'Poppins', sans-serif;
}

.mil-game.mil-cg {
    --mil-accent: #F26A21;
    --mil-accent-dark: #A8410F;
    --mil-panel: rgba(12, 27, 45, 0.94);
    --mil-panel-soft: rgba(20, 41, 66, 0.88);
    --mil-line: rgba(242, 106, 33, 0.38);
}

.mil-game.mil-army {
    --mil-accent: #C8B560;
    --mil-accent-dark: #6E6A2E;
    --mil-panel: rgba(28, 33, 24, 0.94);
    --mil-panel-soft: rgba(45, 52, 37, 0.9);
    --mil-line: rgba(200, 181, 96, 0.36);
}

.mil-game.mil-usmc {
    --mil-accent: #D9B44A;
    --mil-accent-dark: #8C1D2C;
    --mil-panel: rgba(31, 15, 18, 0.94);
    --mil-panel-soft: rgba(52, 24, 28, 0.9);
    --mil-line: rgba(217, 180, 74, 0.38);
}

/* Energy and Logistics reuse the same scaffolding — see MilitaryCore.js.
   Accents match their existing energy.css / logistics.css palettes so the
   older standalone games in those careers still look related. */
.mil-game.mil-energy {
    --mil-accent: #4CC2FF;
    --mil-accent-dark: #1B6C96;
    --mil-panel: rgba(13, 27, 38, 0.94);
    --mil-panel-soft: rgba(22, 41, 56, 0.88);
    --mil-line: rgba(76, 194, 255, 0.34);
}

.mil-game.mil-logistics {
    --mil-accent: #FFB020;
    --mil-accent-dark: #9A6608;
    --mil-panel: rgba(26, 24, 18, 0.94);
    --mil-panel-soft: rgba(43, 39, 28, 0.9);
    --mil-line: rgba(255, 176, 32, 0.34);
}

/* ---------- header ---------- */
.mil-game .mil-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    max-width: 600px;
    background: var(--mil-panel);
    border: 1px solid var(--mil-line);
    border-radius: 12px;
    padding: 10px 18px;
}

.mil-game .mil-timer { font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.mil-game .mil-time-low { color: #FF5252; animation: mil-pulse 0.6s infinite alternate; }

@keyframes mil-pulse { from { opacity: 1; } to { opacity: 0.4; } }

.mil-game .mil-heading {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--mil-accent);
    text-align: center;
}

.mil-game .mil-progress { font-weight: 600; color: var(--mil-accent); white-space: nowrap; }

/* ---------- brief + feedback ---------- */
.mil-game .mil-brief {
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 620px;
    margin: 0;
}

.mil-game .mil-brief strong { color: var(--mil-accent); }

.mil-game .mil-atc {
    color: var(--mil-accent);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.mil-game .mil-callsign {
    letter-spacing: 0.28em;
    font-size: 1.15rem;
}

.mil-game .mil-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.mil-game .mil-feedback {
    min-height: 30px;
    font-weight: 600;
    font-size: 0.96rem;
    line-height: 1.45;
    text-align: center;
    max-width: 620px;
}

.mil-game .mil-feedback.success { color: #4ADE80; }
.mil-game .mil-feedback.error { color: #FF7B72; }

/* ---------- cards ---------- */
.mil-game .mil-card {
    width: 100%;
    max-width: 560px;
    background: var(--mil-panel-soft);
    border: 1px solid var(--mil-line);
    border-left: 4px solid var(--mil-accent);
    border-radius: 10px;
    padding: 14px 18px;
}

.mil-game .mil-card-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mil-accent);
    margin-bottom: 6px;
}

.mil-game .mil-card-text { margin: 0; font-size: 1rem; line-height: 1.55; }

.mil-game .mil-metar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.mil-game .mil-metar-grid div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
    padding-bottom: 4px;
}

.mil-game .mil-metar-grid span { color: #A9C0D8; font-size: 0.88rem; }

/* ---------- buttons ---------- */
.mil-game .mil-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.mil-game .mil-btn {
    border: none;
    border-radius: 11px;
    padding: 13px 26px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    color: #0E1A28;
    background: linear-gradient(135deg, var(--mil-accent), var(--mil-accent-dark));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.1s, filter 0.15s;
}

.mil-game .mil-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.mil-game .mil-btn:disabled { opacity: 0.55; cursor: default; }

.mil-game .mil-btn.ok { background: linear-gradient(135deg, #3FA45D, #26703F); color: #fff; }
.mil-game .mil-btn.warn { background: linear-gradient(135deg, #C9483B, #8E2F26); color: #fff; }
.mil-game .mil-btn.hold { background: linear-gradient(135deg, #D8A32B, #96701A); color: #1A2436; }
.mil-game .mil-btn.correct { outline: 3px solid #4ADE80; }
.mil-game .mil-btn.wrong { outline: 3px solid #FF7B72; }

.mil-game .mil-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
    max-width: 560px;
}

.mil-game .mil-options-column { flex-direction: column; }

.mil-game .mil-option {
    background: var(--mil-panel-soft);
    border: 2px solid var(--mil-line);
    color: #E9F1FA;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 0.96rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-align: center;
}

.mil-game .mil-option:hover:not(:disabled) {
    background: rgba(79, 163, 227, 0.18);
    transform: translateY(-1px);
}

.mil-game .mil-option:disabled { cursor: default; }
.mil-game .mil-option.correct { border-color: #4ADE80; background: rgba(74, 222, 128, 0.2); }
.mil-game .mil-option.wrong { border-color: #FF7B72; background: rgba(255, 123, 114, 0.2); }
.mil-game .mil-option.used { border-color: var(--mil-accent); opacity: 0.55; }

/* ---------- chips (phonetic / taxiways) ---------- */
.mil-game .mil-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    max-width: 560px;
}

.mil-game .mil-chip {
    background: var(--mil-panel-soft);
    border: 2px solid var(--mil-line);
    color: #E9F1FA;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}

.mil-game .mil-chip:hover:not(:disabled) { background: rgba(79, 163, 227, 0.2); }
.mil-game .mil-chip.used { border-color: var(--mil-accent); opacity: 0.5; }
.mil-game .mil-chip.wrong { border-color: #FF7B72; background: rgba(255, 123, 114, 0.22); }
.mil-game .mil-chip.stop { border-color: #E4B23C; }

.mil-game .mil-readback {
    width: 100%;
    max-width: 560px;
    background: #0A1420;
    border: 1px solid var(--mil-line);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.98rem;
    letter-spacing: 0.05em;
    color: #7FE7A8;
    text-align: center;
    min-height: 44px;
}

/* ---------- radar scope ---------- */
.mil-game .mil-scope {
    position: relative;
    width: 340px;
    height: 340px;
    max-width: 88vw;
    max-height: 88vw;
    border-radius: 50%;
    background: radial-gradient(circle, #0B2018 0%, #061109 75%);
    border: 3px solid #2F7A4E;
    overflow: hidden;
}

.mil-game .mil-scope-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(76, 200, 120, 0.28);
    border-radius: 50%;
}

.mil-game .mil-scope-ring.r1 { width: 33%; height: 33%; }
.mil-game .mil-scope-ring.r2 { width: 66%; height: 66%; }
.mil-game .mil-scope-ring.r3 { width: 99%; height: 99%; }

.mil-game .mil-scope-sweep {
    position: absolute;
    top: 0; left: 50%;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    background: conic-gradient(from 0deg, rgba(76, 220, 130, 0.28), rgba(76, 220, 130, 0) 40%);
    animation: mil-sweep 3.2s linear infinite;
    pointer-events: none;
}

@keyframes mil-sweep { to { transform: rotate(360deg); } }

.mil-game .mil-blip {
    position: absolute;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px;
}

.mil-game .mil-blip-dot {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: #6BF29A;
    box-shadow: 0 0 8px #6BF29A;
}

.mil-game .mil-blip-code {
    font-family: 'Courier New', monospace;
    font-size: 0.66rem;
    color: #8CFFB4;
    white-space: nowrap;
}

.mil-game .mil-blip.correct .mil-blip-dot { background: #FFD54F; box-shadow: 0 0 10px #FFD54F; }
.mil-game .mil-blip.wrong .mil-blip-dot { background: #FF7B72; box-shadow: 0 0 10px #FF7B72; }

/* ---------- load plan table ---------- */
.mil-game .mil-table {
    width: 100%;
    max-width: 500px;
    border-collapse: collapse;
    background: var(--mil-panel-soft);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.92rem;
}

.mil-game .mil-table th,
.mil-game .mil-table td {
    padding: 8px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mil-game .mil-table th {
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mil-accent);
}

.mil-game .mil-row-new td { color: #FFD54F; font-weight: 700; }

/* ---------- torque flange ---------- */
.mil-game .mil-flange {
    position: relative;
    width: 300px;
    height: 300px;
    max-width: 82vw;
    max-height: 82vw;
}

.mil-game .mil-flange-face {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #6E7884, #3A424D 70%);
    border: 6px solid #262C35;
}

.mil-game .mil-bolt {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #9AA5B1;
    background: #4A535F;
    color: #F0F4F8;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
}

.mil-game .mil-bolt:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.1); }
.mil-game .mil-bolt.used { background: #3FA45D; border-color: #7FE7A8; }
.mil-game .mil-bolt.wrong { background: #C9483B; border-color: #FF7B72; }

/* ---------- satellite dish ---------- */
.mil-game .mil-dish {
    width: 100%;
    max-width: 480px;
    background: var(--mil-panel-soft);
    border: 1px solid var(--mil-line);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.mil-game .mil-signal-label {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mil-accent);
}

.mil-game .mil-signal-bar {
    height: 16px;
    background: #0A1420;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--mil-line);
}

.mil-game .mil-signal-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #8E4B2E, #D8A32B);
    transition: width 0.08s linear;
}

.mil-game .mil-signal-fill.locked { background: linear-gradient(90deg, #3FA45D, #7FE7A8); }

.mil-game .mil-slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.92rem;
}

.mil-game .mil-slider-row input[type="range"] { width: 100%; accent-color: var(--mil-accent); }

/* ---------- PT pace ---------- */
.mil-game .mil-pace {
    display: flex;
    gap: 24px;
    align-items: stretch;
    background: var(--mil-panel-soft);
    border: 1px solid var(--mil-line);
    border-radius: 12px;
    padding: 16px 22px;
}

.mil-game .mil-pace-track {
    position: relative;
    width: 60px;
    height: 210px;
    background: #0A1420;
    border: 1px solid var(--mil-line);
    border-radius: 8px;
    overflow: hidden;
}

.mil-game .mil-pace-band {
    position: absolute;
    left: 0; right: 0;
    background: rgba(63, 164, 93, 0.32);
    border-top: 1px solid #4ADE80;
    border-bottom: 1px solid #4ADE80;
}

.mil-game .mil-pace-needle {
    position: absolute;
    left: 4px; right: 4px;
    height: 8px;
    border-radius: 3px;
    background: #FF7B72;
    transition: bottom 0.09s linear;
}

.mil-game .mil-pace-needle.good { background: #4ADE80; }

.mil-game .mil-pace-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.mil-game .mil-pace-readout { font-size: 0.95rem; }
.mil-game .mil-pace-readout strong { color: var(--mil-accent); font-size: 1.2rem; }
.mil-game .mil-pace-btn { padding: 18px 30px; font-size: 1.1rem; }

/* ---------- buoys ---------- */
.mil-game .mil-buoy-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.mil-game .mil-buoy {
    width: 90px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset -10px 0 18px rgba(0, 0, 0, 0.35);
}

.mil-game .mil-buoy.red { background: #C9302C; }
.mil-game .mil-buoy.green { background: #2E8B57; }
/* Nun buoys are conical, cans are cylindrical — the shape is half the ID. */
.mil-game .mil-buoy.nun { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mil-game .mil-buoy.can { border-radius: 6px; }

.mil-game .mil-buoy-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin-top: 24px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.mil-game .mil-buoy.can .mil-buoy-num { margin-top: 0; }
.mil-game .mil-buoy-caption { font-size: 0.9rem; color: #A9C0D8; }

/* ---------- boarding checklist ---------- */
.mil-game .mil-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 560px;
}

.mil-game .mil-check-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    background: var(--mil-panel-soft);
    border: 2px solid var(--mil-line);
    border-radius: 9px;
    padding: 10px 16px;
    cursor: pointer;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    color: #E9F1FA;
    transition: background 0.15s;
}

.mil-game .mil-check-item:hover:not(:disabled) { background: rgba(242, 106, 33, 0.15); }
.mil-game .mil-check-item.correct { border-color: #4ADE80; background: rgba(74, 222, 128, 0.18); }
.mil-game .mil-check-item.wrong { border-color: #FF7B72; background: rgba(255, 123, 114, 0.18); }
.mil-game .mil-check-label { font-weight: 700; font-size: 0.96rem; }
.mil-game .mil-check-detail { font-size: 0.86rem; color: #A9C0D8; }

/* ---------- hoist swell ---------- */
.mil-game .mil-swell {
    position: relative;
    width: 200px;
    height: 260px;
    background: linear-gradient(180deg, #0C2740, #061829);
    border: 2px solid var(--mil-line);
    border-radius: 10px;
    overflow: hidden;
}

.mil-game .mil-swell-window {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: rgba(63, 164, 93, 0.3);
    border-bottom: 2px solid #4ADE80;
}

.mil-game .mil-swell-boat {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50%;
    font-size: 2.2rem;
    line-height: 1;
}

/* ---------- tide / depth ---------- */
.mil-game .mil-depth {
    width: 100%;
    max-width: 420px;
    background: var(--mil-panel-soft);
    border: 1px solid var(--mil-line);
    border-radius: 10px;
    padding: 12px 18px;
}

.mil-game .mil-depth-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    font-size: 0.95rem;
}

.mil-game .mil-depth-row span { color: #A9C0D8; }
.mil-game .mil-depth-row.total { border-bottom: none; font-weight: 700; color: var(--mil-accent); }
.mil-game .mil-depth-row.total span { color: var(--mil-accent); }

/* ---------- damage control flooding ---------- */
.mil-game .mil-flood {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 110px;
    background: #0A1420;
    border: 2px solid var(--mil-line);
    border-radius: 10px;
    overflow: hidden;
}

.mil-game .mil-flood-water {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(56, 132, 196, 0.85), rgba(20, 70, 120, 0.95));
    transition: height 0.2s linear;
}

.mil-game .mil-flood-water.critical {
    background: linear-gradient(180deg, rgba(201, 72, 59, 0.85), rgba(120, 30, 24, 0.95));
}

.mil-game .mil-flood-label {
    position: absolute;
    top: 8px; left: 0; right: 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* ---------- zeroing target (Army) ---------- */
.mil-game .mil-target {
    position: relative;
    width: 260px;
    height: 260px;
    max-width: 78vw;
    max-height: 78vw;
    border-radius: 50%;
    background: radial-gradient(circle, #F2EFE6 0%, #DED9C9 72%, #C8C2AF 100%);
    border: 3px solid var(--mil-line);
}

.mil-game .mil-target-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(40, 44, 34, 0.45);
    border-radius: 50%;
}

.mil-game .mil-target-ring.r1 { width: 26%; height: 26%; background: rgba(40, 44, 34, 0.75); }
.mil-game .mil-target-ring.r2 { width: 56%; height: 56%; }
.mil-game .mil-target-ring.r3 { width: 84%; height: 84%; }

.mil-game .mil-target-cross {
    position: absolute;
    background: rgba(40, 44, 34, 0.35);
}

.mil-game .mil-target-cross.v { left: 50%; top: 0; bottom: 0; width: 1px; }
.mil-game .mil-target-cross.h { top: 50%; left: 0; right: 0; height: 1px; }

.mil-game .mil-shot {
    position: absolute;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: #1B1F16;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* ---------- obstacle course lane (Army) ---------- */
.mil-game .mil-lane {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 54px;
    background: linear-gradient(180deg, #2A3122, #1A1F16);
    border: 2px solid var(--mil-line);
    border-radius: 10px;
    overflow: hidden;
}

.mil-game .mil-lane-zone {
    position: absolute;
    top: 0; bottom: 0;
    background: rgba(63, 164, 93, 0.34);
    border-left: 2px solid #4ADE80;
    border-right: 2px solid #4ADE80;
}

.mil-game .mil-lane-marker {
    position: absolute;
    top: 6px; bottom: 6px;
    width: 8px;
    margin-left: -4px;
    border-radius: 4px;
    background: var(--mil-accent);
    box-shadow: 0 0 10px var(--mil-accent);
}

/* ---------- call for fire (Army) ---------- */
.mil-game .mil-fire-scope {
    position: relative;
    width: 300px;
    height: 240px;
    max-width: 88vw;
    background: radial-gradient(ellipse at 50% 60%, #2F3A24, #171C12);
    border: 2px solid var(--mil-line);
    border-radius: 10px;
    overflow: hidden;
}

/* The observer-target line: corrections are called along and across it. */
.mil-game .mil-fire-ot {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(180deg, rgba(200,181,96,.5) 0 6px, transparent 6px 12px);
}

.mil-game .mil-fire-target,
.mil-game .mil-fire-impact {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
}

.mil-game .mil-fire-target {
    left: 50%; top: 50%;
    background: none;
    border: 3px solid #E8534A;
}

.mil-game .mil-fire-impact {
    background: #E8C33A;
    box-shadow: 0 0 14px rgba(232, 195, 58, 0.8);
}

.mil-game .mil-fire-legend {
    position: absolute;
    left: 8px; bottom: 6px;
    display: flex;
    gap: 14px;
    font-size: 0.72rem;
    color: #C6D2B8;
}

.mil-game .mil-fire-legend .dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 4px;
}

.mil-game .mil-fire-legend .dot.target { border: 2px solid #E8534A; }
.mil-game .mil-fire-legend .dot.impact { background: #E8C33A; }

/* ---------- rifle sight picture (Marines) ---------- */
.mil-game .mil-sight {
    position: relative;
    width: 230px;
    height: 250px;
    max-width: 74vw;
    background: radial-gradient(circle at 50% 45%, #4A5340, #20261A 78%);
    border: 3px solid var(--mil-line);
    border-radius: 50% / 46%;
    overflow: hidden;
}

.mil-game .mil-sight-pause {
    position: absolute;
    left: 0; right: 0;
    background: rgba(63, 164, 93, 0.3);
    border-top: 2px solid #4ADE80;
    border-bottom: 2px solid #4ADE80;
}

.mil-game .mil-sight-target {
    position: absolute;
    left: 50%; top: 50%;
    width: 54px; height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: #16190F;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.mil-game .mil-sight-reticle {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
}

.mil-game .mil-sight-post {
    position: absolute;
    left: 50%;
    top: -14px;
    width: 6px;
    height: 28px;
    margin-left: -3px;
    background: #0E1109;
    border-radius: 2px;
}

/* ---------- combat load (Marines) ---------- */
.mil-game .mil-load-bar {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 26px;
    background: #12160D;
    border: 1px solid var(--mil-line);
    border-radius: 999px;
    overflow: hidden;
}

.mil-game .mil-load-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mil-accent-dark), var(--mil-accent));
    transition: width 0.15s;
}

.mil-game .mil-load-fill.over { background: linear-gradient(90deg, #8C1D2C, #E8534A); }

.mil-game .mil-load-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.mil-game .mil-check-item.packed { border-color: var(--mil-accent); }
.mil-game .mil-check-item:disabled { opacity: 0.75; cursor: default; }

/* ---------- grid map (Marines) ----------
   The map sheet reserves a margin down the left and along the bottom for the
   printed grid-line numbers; .mil-grid-field is the plotting area itself, so
   every line/label/objective position is a clean percentage of it. */
.mil-game .mil-grid-map {
    position: relative;
    width: 300px;
    height: 296px;
    max-width: 88vw;
    box-sizing: border-box;
    padding: 6px 8px 24px 30px;
    background: linear-gradient(160deg, #E7E0C8, #D3CBAE);
    border: 3px solid var(--mil-line);
    border-radius: 6px;
}

.mil-game .mil-grid-field {
    position: relative;
    width: 100%;
    height: 100%;
}

.mil-game .mil-grid-line { position: absolute; background: rgba(60, 70, 45, 0.45); }
.mil-game .mil-grid-line.v { top: 0; bottom: 0; width: 1px; }
.mil-game .mil-grid-line.h { left: 0; right: 0; height: 1px; }

/* Printed grid-line numbers — eastings along the bottom, northings up the
   left. Without these the map is decorative and there is nothing to read. */
.mil-game .mil-grid-num {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    color: #4A5230;
    pointer-events: none;
}

.mil-game .mil-grid-num.easting {
    bottom: -18px;
    transform: translateX(-50%);
}

.mil-game .mil-grid-num.northing {
    left: -26px;
    transform: translateY(50%);
}

.mil-game .mil-grid-obj {
    position: absolute;
    width: 13px; height: 13px;
    margin: 0 0 -6.5px -6.5px;
    border-radius: 50%;
    background: #C0392B;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3);
}

.mil-game .mil-grid-label {
    position: absolute;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #4A5230;
}

.mil-game .mil-grid-label {
    background: rgba(231, 224, 200, 0.82);
    padding: 1px 4px;
    border-radius: 3px;
}

.mil-game .mil-grid-label.north { right: 5px; top: 5px; }
.mil-game .mil-grid-label.east { right: 5px; top: 20px; }

.mil-game .mil-option.mono { font-family: 'Courier New', monospace; letter-spacing: 0.06em; }

/* ---------- close order drill (Marines) ---------- */
.mil-game .mil-drill {
    width: 100%;
    max-width: 460px;
    background: var(--mil-panel-soft);
    border: 1px solid var(--mil-line);
    border-radius: 12px;
    padding: 26px 20px;
    text-align: center;
}

.mil-game .mil-drill-call {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #C9D2BC;
}

.mil-game .mil-drill-call.exec {
    color: var(--mil-accent);
    text-shadow: 0 0 18px var(--mil-accent);
}

.mil-game .mil-drill-hint {
    margin-top: 8px;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #97A288;
}

/* ---------- the Crucible (Marines) ---------- */
.mil-game .mil-crucible {
    width: 100%;
    max-width: 470px;
    background: var(--mil-panel-soft);
    border: 1px solid var(--mil-line);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mil-game .mil-crucible-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.94rem;
}

.mil-game .mil-crucible-stat > span { color: #A9B49A; }

.mil-game .mil-energy-bar {
    flex: 1;
    height: 14px;
    background: #12160D;
    border: 1px solid var(--mil-line);
    border-radius: 999px;
    overflow: hidden;
}

.mil-game .mil-energy-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mil-accent-dark), var(--mil-accent));
    transition: width 0.2s;
}

.mil-game .mil-energy-fill.low { background: linear-gradient(90deg, #8C1D2C, #E8534A); }

/* ---------- teach-first intro screen ---------- */
.mil-game .mil-intro {
    width: 100%;
    max-width: 640px;
    background: var(--mil-panel-soft);
    border: 1px solid var(--mil-line);
    border-radius: 14px;
    padding: 22px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mil-game .mil-intro-title {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 800;
    text-align: center;
    color: var(--mil-accent);
}

.mil-game .mil-intro-text {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.6;
}

.mil-game .mil-intro-text strong { color: var(--mil-accent); }

.mil-game .mil-intro-formula {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #F4F7FA;
    background: rgba(0, 0, 0, 0.32);
    border: 1px dashed var(--mil-line);
    border-radius: 10px;
    padding: 12px 10px;
}

.mil-game .mil-intro-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Hanging indent rather than flex: a rule body containing inline markup
   (<strong>, <em>) would otherwise be split into separate flex items and
   each fragment would wrap in its own narrow column. */
.mil-game .mil-intro-rule {
    display: block;
    /* Wide enough for the longest badge label in the game ("CO under 100"),
       so the coloured pill always contains its own text and the wrapped
       lines still align in one column. */
    padding-left: 118px;
    text-indent: -118px;
    font-size: 0.93rem;
    line-height: 1.5;
}

.mil-game .mil-intro-rule .tag {
    display: inline-block;
    /* min-width, not width: a label longer than the box used to overflow
       its own colour. It pads short labels to a common column instead. */
    min-width: 96px;
    margin-right: 10px;
    text-indent: 0;
    vertical-align: baseline;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    color: #0E1A28;
}

.mil-game .mil-intro-rule .tag.go { background: #4ADE80; }
.mil-game .mil-intro-rule .tag.delay { background: #E8C33A; }
.mil-game .mil-intro-rule .tag.nogo { background: #FF7B72; }

.mil-game .mil-intro-example {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--mil-line);
    border-radius: 10px;
    padding: 12px 16px;
}

.mil-game .mil-intro-example-title {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mil-accent);
    margin-bottom: 6px;
}

.mil-game .mil-intro-tip {
    font-size: 0.9rem;
    color: #C7D4E2;
}

.mil-game .mil-intro-start {
    align-self: center;
    margin-top: 4px;
}

/* ---------- continue gate after a wrong answer ---------- */
.mil-game .mil-continue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
}

.mil-game .mil-btn.continue {
    background: linear-gradient(135deg, var(--mil-accent), var(--mil-accent-dark));
    color: #0E1A28;
    padding: 11px 30px;
}

.mil-game .mil-continue-hint {
    font-size: 0.79rem;
    color: #A9BDD4;
    letter-spacing: 0.02em;
}

/* ---------- phone sizing ---------- */
@media (max-width: 820px) {
    .mil-game { padding: 12px; gap: 10px; }
    .mil-game .mil-header { padding: 8px 12px; font-size: 0.88rem; }
    .mil-game .mil-heading { font-size: 0.7rem; }
    .mil-game .mil-brief { font-size: 0.9rem; }
    .mil-game .mil-btn { padding: 12px 18px; font-size: 0.94rem; }
    .mil-game .mil-option { padding: 11px 14px; font-size: 0.9rem; }
    .mil-game .mil-metar-grid { grid-template-columns: 1fr; }
    .mil-game .mil-pace { gap: 14px; padding: 12px; }
    .mil-game .mil-pace-track { width: 46px; height: 170px; }
    .mil-game .mil-bolt { width: 36px; height: 36px; font-size: 0.85rem; }
    .mil-game .mil-drill-call { font-size: 1.4rem; }
    .mil-game .mil-lane { height: 44px; }
    .mil-game .mil-crucible-stat { font-size: 0.86rem; }
    .mil-game .mil-intro { padding: 16px 16px 18px; }
    .mil-game .mil-intro-title { font-size: 1.12rem; }
    .mil-game .mil-intro-text { font-size: 0.9rem; }
    .mil-game .mil-intro-formula { font-size: 0.9rem; }
}

/* ============================================================
   NAVY · SPACE FORCE · NAVY SEAL
   Themes, and the components their games introduce.
   ============================================================ */

/* ---------- themes ---------- */

.mil-game.mil-navy {
    --mil-accent: #E2C46B;
    --mil-accent-dark: #1B2A4A;
    --mil-panel: rgba(10, 20, 38, 0.95);
    --mil-panel-soft: rgba(19, 34, 60, 0.9);
    --mil-line: rgba(226, 196, 107, 0.36);
}

.mil-game.mil-space {
    --mil-accent: #6FD3FF;
    --mil-accent-dark: #1D4E70;
    --mil-panel: rgba(8, 11, 22, 0.96);
    --mil-panel-soft: rgba(17, 23, 43, 0.92);
    --mil-line: rgba(111, 211, 255, 0.32);
}

.mil-game.mil-seal {
    --mil-accent: #C9A227;
    --mil-accent-dark: #10222E;
    --mil-panel: rgba(9, 18, 25, 0.96);
    --mil-panel-soft: rgba(16, 32, 43, 0.92);
    --mil-line: rgba(201, 162, 39, 0.34);
}

/* ---------- Navy: flooding boundary ---------- */

.mil-game .mil-ship-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mil-game .mil-deck-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mil-game .mil-deck-label {
    flex: 0 0 88px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--mil-accent);
    text-align: right;
}

.mil-game .mil-deck-cells {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.mil-game .mil-compartment {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 5px;
    border: 2px solid var(--mil-line);
    border-radius: 7px;
    background: var(--mil-panel-soft);
    color: #E9F1FA;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.14s ease;
}

.mil-game .mil-compartment:hover:not(:disabled) { border-color: var(--mil-accent); }
.mil-game .mil-comp-name { font-size: 0.76rem; font-weight: 600; line-height: 1.2; }
.mil-game .mil-comp-frame { font-size: 0.66rem; color: #9FB3CC; }

.mil-game .mil-compartment.sealed {
    border-color: #4ADE80;
    background: rgba(74, 222, 128, 0.18);
}

.mil-game .mil-compartment.flooded {
    border-color: #4FA3E3;
    background: repeating-linear-gradient(135deg,
        rgba(31, 92, 139, 0.85) 0 8px, rgba(20, 62, 96, 0.85) 8px 16px);
    cursor: default;
}

/* ---------- Navy: reactor readout ---------- */

.mil-game .mil-plant-readout {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid var(--mil-line);
    border-radius: 8px;
    background: var(--mil-panel-soft);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--mil-accent);
    text-align: center;
}

/* ---------- Navy: flight deck jerseys ---------- */

.mil-game .mil-jerseys {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    width: 100%;
}

.mil-game .mil-jersey {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 2px solid var(--mil-line);
    border-radius: 10px;
    background: var(--mil-panel-soft);
    color: #E9F1FA;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.14s ease;
}

.mil-game .mil-jersey:hover:not(:disabled) { transform: translateY(-2px); }
.mil-game .mil-jersey.correct { border-color: #4ADE80; background: rgba(74, 222, 128, 0.18); }
.mil-game .mil-jersey.wrong { border-color: #FF7B72; background: rgba(255, 123, 114, 0.18); }

.mil-game .mil-jersey-swatch {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.35);
}

.mil-game .mil-jersey-name { font-weight: 700; font-size: 0.92rem; }

/* ---------- Navy: flag hoist ---------- */

.mil-game .mil-hoist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 26px;
    border: 2px solid var(--mil-accent);
    border-radius: 10px;
    background: var(--mil-panel-soft);
}

.mil-game .mil-hoist-flag {
    font-family: 'Courier New', monospace;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mil-accent);
}

.mil-game .mil-hoist-name { font-size: 0.9rem; letter-spacing: 0.16em; color: #A9C0D8; }

/* ---------- Navy: underway replenishment ---------- */

.mil-game .mil-unrep { width: 100%; }

.mil-game .mil-unrep-oiler {
    padding: 8px 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--mil-accent);
    border-bottom: 3px solid var(--mil-accent-dark);
}

.mil-game .mil-unrep-track {
    position: relative;
    height: 68px;
    margin: 12px 0 8px;
    border: 1px solid var(--mil-line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(20, 44, 74, 0.9), rgba(10, 24, 44, 0.9));
    overflow: hidden;
}

.mil-game .mil-unrep-band {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20%;
    width: 45%;
    background: rgba(74, 222, 128, 0.18);
    border-left: 2px solid rgba(74, 222, 128, 0.55);
    border-right: 2px solid rgba(74, 222, 128, 0.55);
}

.mil-game .mil-unrep-ship {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    font-size: 1.5rem;
    color: var(--mil-accent);
    transition: left 0.1s linear;
}

.mil-game .mil-unrep-readout {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    color: #A9C0D8;
}

.mil-game .mil-unrep-readout .good,
.mil-game .mil-beach-readout .good { color: #4ADE80; font-weight: 700; }
.mil-game .mil-unrep-readout .bad,
.mil-game .mil-beach-readout .bad { color: #FF7B72; font-weight: 700; }

/* ---------- Space Force: sky plot ---------- */

.mil-game .mil-skyplot {
    position: relative;
    width: 280px;
    height: 280px;
    max-width: 82vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18, 34, 56, 0.95) 0%, rgba(6, 12, 24, 0.98) 100%);
    border: 2px solid var(--mil-line);
}

.mil-game .mil-sky-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(111, 211, 255, 0.22);
    border-radius: 50%;
}

.mil-game .mil-sky-ring.r1 { width: 33%; height: 33%; }
.mil-game .mil-sky-ring.r2 { width: 66%; height: 66%; }
.mil-game .mil-sky-ring.r3 { width: 92%; height: 92%; }

.mil-game .mil-sky-card {
    position: absolute;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7C93AE;
}

.mil-game .mil-sky-card.n { top: 4px; left: 50%; transform: translateX(-50%); }
.mil-game .mil-sky-card.s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.mil-game .mil-sky-card.e { right: 6px; top: 50%; transform: translateY(-50%); }
.mil-game .mil-sky-card.w { left: 6px; top: 50%; transform: translateY(-50%); }

.mil-game .mil-sky-sat {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 40px;
    height: 26px;
    border-radius: 5px;
    background: rgba(111, 211, 255, 0.2);
    border: 1px solid var(--mil-accent);
    font-size: 0.62rem;
    font-weight: 700;
    color: #DFF3FF;
}

/* ---------- Space Force: launch window table ---------- */

.mil-game .mil-window-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mil-game .mil-window-head,
.mil-game .mil-window-row {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr 1.5fr 1.4fr;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    text-align: left;
}

.mil-game .mil-window-head {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8FA6BF;
}

.mil-game .mil-window-row {
    border: 2px solid var(--mil-line);
    border-radius: 8px;
    background: var(--mil-panel-soft);
    color: #E9F1FA;
    font-family: inherit;
    font-size: 0.84rem;
    cursor: pointer;
    transition: all 0.14s ease;
}

.mil-game .mil-window-row:hover:not(:disabled) { border-color: var(--mil-accent); }
.mil-game .mil-window-row.correct { border-color: #4ADE80; background: rgba(74, 222, 128, 0.16); }
.mil-game .mil-window-row.wrong { border-color: #FF7B72; background: rgba(255, 123, 114, 0.16); }
.mil-game .mil-window-row .go { color: #4ADE80; font-weight: 600; }
.mil-game .mil-window-row .nogo { color: #FF9B94; font-weight: 600; }
.mil-game .mono { font-family: 'Courier New', monospace; letter-spacing: 0.06em; }

/* ---------- Space Force: spectrum ---------- */

.mil-game .mil-spectrum {
    position: relative;
    width: 100%;
    height: 110px;
    border: 1px solid var(--mil-line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(10, 20, 36, 0.95), rgba(5, 10, 20, 0.98));
    overflow: hidden;
}

.mil-game .mil-spectrum-floor {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 16px;
    background: rgba(111, 211, 255, 0.16);
}

.mil-game .mil-spectrum-carrier {
    position: absolute;
    left: 42%;
    bottom: 0;
    width: 16%;
    height: 76%;
    background: linear-gradient(180deg, rgba(111, 211, 255, 0.85), rgba(111, 211, 255, 0.25));
    border-radius: 4px 4px 0 0;
}

.mil-game .mil-spectrum-noise {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 34%;
    background: repeating-linear-gradient(90deg,
        rgba(255, 123, 114, 0.35) 0 3px, transparent 3px 9px);
}

.mil-game .mil-spectrum-label {
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: #7C93AE;
}

/* ---------- Space Force: pass timeline ---------- */

.mil-game .mil-pass-timeline {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mil-game .mil-pass-row {
    display: grid;
    grid-template-columns: 92px 1fr 36px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 2px solid var(--mil-line);
    border-radius: 8px;
    background: var(--mil-panel-soft);
    color: #E9F1FA;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.14s ease;
}

.mil-game .mil-pass-row.on { border-color: var(--mil-accent); background: rgba(111, 211, 255, 0.16); }
.mil-game .mil-pass-sat { font-size: 0.8rem; font-weight: 700; text-align: left; }
.mil-game .mil-pass-pri { font-size: 0.74rem; color: #8FA6BF; }

.mil-game .mil-pass-track {
    position: relative;
    display: block;
    height: 26px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
}

.mil-game .mil-pass-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--mil-accent-dark), var(--mil-accent));
    color: #04121C;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}

/* ---------- SEAL: surf passage ---------- */

.mil-game .mil-surf {
    position: relative;
    width: 100%;
    height: 220px;
    border: 1px solid var(--mil-line);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(12, 34, 48, 0.95), rgba(6, 18, 28, 0.98));
    overflow: hidden;
}

.mil-game .mil-surf-lull {
    position: absolute;
    left: 0; right: 0;
    background: rgba(74, 222, 128, 0.18);
    border-top: 2px solid rgba(74, 222, 128, 0.6);
}

.mil-game .mil-surf-line {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: rgba(201, 162, 39, 0.3);
}

.mil-game .mil-surf-boat {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    line-height: 1;
}

/* ---------- SEAL: beach recon ---------- */

.mil-game .mil-recon {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mil-game .mil-recon-lane {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 2px solid var(--mil-line);
    border-radius: 9px;
    background: var(--mil-panel-soft);
    color: #E9F1FA;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.14s ease;
}

.mil-game .mil-recon-lane:hover:not(:disabled) { border-color: var(--mil-accent); }
.mil-game .mil-recon-lane.correct { border-color: #4ADE80; background: rgba(74, 222, 128, 0.16); }
.mil-game .mil-recon-lane.wrong { border-color: #FF7B72; background: rgba(255, 123, 114, 0.16); }

.mil-game .mil-recon-name {
    flex: 0 0 90px;
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-align: left;
}

.mil-game .mil-recon-soundings { display: flex; gap: 6px; flex-wrap: wrap; }

.mil-game .mil-sounding {
    min-width: 40px;
    padding: 5px 6px;
    border-radius: 5px;
    background: rgba(111, 160, 200, 0.18);
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

.mil-game .mil-sounding.shoal { background: rgba(255, 123, 114, 0.28); color: #FFD9D6; }

/* ---------- SEAL: over the beach ---------- */

.mil-game .mil-beach { width: 100%; }

.mil-game .mil-beach-sand {
    position: relative;
    height: 210px;
    border: 1px solid var(--mil-line);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(38, 34, 22, 0.92), rgba(14, 24, 30, 0.96));
    overflow: hidden;
}

.mil-game .mil-beach-beam {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 68px;
    margin-left: -34px;
    background: linear-gradient(90deg,
        rgba(255, 236, 170, 0) 0%, rgba(255, 236, 170, 0.42) 50%, rgba(255, 236, 170, 0) 100%);
}

.mil-game .mil-beach-swimmer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    line-height: 1;
    transition: bottom 0.05s linear;
}

.mil-game .mil-beach-readout {
    margin-top: 10px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    color: #A9C0D8;
}

@media (max-width: 560px) {
    .mil-game .mil-deck-label { flex-basis: 60px; font-size: 0.66rem; }
    .mil-game .mil-comp-name { font-size: 0.66rem; }
    .mil-game .mil-window-head,
    .mil-game .mil-window-row { grid-template-columns: 0.9fr 1.2fr 1.2fr 1.1fr; font-size: 0.72rem; }
    .mil-game .mil-recon-name { flex-basis: 70px; font-size: 0.74rem; }
    .mil-game .mil-pass-row { grid-template-columns: 74px 1fr 30px; }
}