:root {
    --nav: #1f1f1f;
    --nav-border: #333;
    --fr-yellow: #ffc71e;
    --fr-red: #ff3b30;
    --blue-coalition: #2f7cf6;
    --red-coalition: #e5362e;
    --neutral-coalition: #eab308;
    --card-head: #262626;
    --card-body: #ffffff;
    --card-label: #8b8b8b;
    --card-text: #1f1f1f;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    height: 100vh;
    overflow: hidden;
    background: #111;
}

/* TOP NAVIGATION */
.top-nav {
    height: 48px;
    background: var(--nav);
    border-bottom: 1px solid var(--nav-border);
    color: #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 2000;
    position: relative;
    gap: 16px;
}

.nav-brand {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--fr-yellow);
    letter-spacing: 1px;
    white-space: nowrap;
}
.nav-brand span { color: #fff; font-weight: 400; margin-left: 2px; }

.nav-controls {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.fr-select {
    background: #2b2b2b;
    color: #eee;
    border: 1px solid #444;
    padding: 6px 10px;
    border-radius: 4px;
    outline: none;
    font-family: inherit;
}

.filters {
    display: flex;
    gap: 14px;
    font-size: 0.85em;
    flex-wrap: wrap;
}
.filters label { display: flex; align-items: center; cursor: pointer; white-space: nowrap; }
.filters input { margin-right: 5px; accent-color: var(--fr-yellow); }
.filters .sep { padding-left: 14px; border-left: 1px solid #444; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.8em;
    white-space: nowrap;
}
.stats .live {
    background: var(--fr-yellow);
    color: #000;
    font-weight: 700;
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: 3px;
}

.nav-btn {
    background: transparent;
    color: #eee;
    border: 1px solid #444;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 500;
    white-space: nowrap;
}
.nav-btn:hover { background: #333; }

/* MAIN LAYOUT */
.main-container {
    height: calc(100vh - 49px);
    position: relative;
}

#map {
    position: absolute;
    inset: 0;
    background: #0d1b26;
}

#hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    background: rgba(20, 20, 20, 0.8);
    color: #ccc;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 14px;
    pointer-events: none;
}

/* SELECTED UNIT CARDS (FR24 multi view) */
#cards {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 260px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
#cards-bar, .fr-card { pointer-events: auto; }
#cards-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(31, 31, 31, 0.92);
    color: #ddd;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
}
#cards-bar.hidden { display: none; }
#cards-bar button {
    background: none;
    border: 1px solid #555;
    color: #ddd;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
}
#cards-bar button:hover { background: #333; }
#cards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 0;
    pointer-events: auto;
    scrollbar-width: thin;
}

.fr-card {
    background: var(--card-body);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
    font-size: 12px;
    color: var(--card-text);
}
.fr-card.lost { opacity: 0.55; }

.fr-card-head {
    background: var(--card-head);
    color: #fff;
    padding: 8px 10px 6px;
    position: relative;
    cursor: pointer;
}
.fr-card-title { display: flex; align-items: center; gap: 6px; padding-right: 22px; }
.fr-cs {
    color: var(--fr-yellow);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.badge {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: #444;
    color: #fff;
    white-space: nowrap;
}
.badge.type { background: #3a3a3a; border: 1px solid #555; }
.badge.coa-blue { background: var(--blue-coalition); }
.badge.coa-red { background: var(--red-coalition); }
.badge.coa-neutral { background: var(--neutral-coalition); color: #000; }
.badge.human { background: #1f9d55; }
.fr-sub { color: #bbb; font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-x {
    position: absolute;
    top: 5px;
    right: 6px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.fr-x:hover { color: #fff; }

.fr-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}
.fr-hero .big { font-size: 20px; font-weight: 700; line-height: 1.1; }
.fr-hero .cap { font-size: 9.5px; color: var(--card-label); text-transform: uppercase; letter-spacing: 0.5px; }
.fr-hero .mid { text-align: center; }
.fr-hero .right { text-align: right; }
.fr-hero svg { width: 34px; height: 34px; }

.fr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    padding: 8px 12px;
}
.fr-grid .cap { font-size: 9.5px; color: var(--card-label); text-transform: uppercase; letter-spacing: 0.5px; }
.fr-grid .val { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-grid .wide { grid-column: span 2; }

.fr-actions {
    display: flex;
    border-top: 1px solid #eee;
}
.fr-actions button {
    flex: 1;
    background: none;
    border: none;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
}
.fr-actions button + button { border-left: 1px solid #eee; }
.fr-actions button:hover { background: #f4f4f4; }
.fr-actions button.on { color: #000; background: var(--fr-yellow); }

/* MAP ICONS */
.icon-container { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.icon-selected { filter: drop-shadow(0 0 6px rgba(255, 59, 48, 0.9)) brightness(1.1); }

/* ship (kept from v0.2) */
.fill-blue { fill: var(--blue-coalition); }
.fill-red { fill: var(--red-coalition); }
.fill-neutral { fill: var(--neutral-coalition); }

/* FR24 style labels */
.leaflet-tooltip.fr-tip {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.leaflet-tooltip.fr-tip::before { display: none; }

.fr-label {
    background: rgba(18, 18, 18, 0.82);
    color: #fff;
    padding: 4px 7px;
    font-size: 10.5px;
    line-height: 1.3;
    border-radius: 3px;
    border-left: 3px solid #777;
    white-space: nowrap;
}
.fr-label b { font-weight: 700; font-size: 11px; }
.fr-label div { color: #ddd; }
.fr-label.coa-blue { border-left-color: var(--blue-coalition); }
.fr-label.coa-red { border-left-color: var(--red-coalition); }
.fr-label.coa-neutral { border-left-color: var(--neutral-coalition); }

/* selected: white callout above the red icon */
.fr-callout {
    position: relative;
    background: #fff;
    color: #111;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fr-callout::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom: 0;
    border-top-color: #fff;
}
.fr-callout .dot { width: 8px; height: 8px; border-radius: 50%; background: #777; }
.fr-callout .dot.coa-blue { background: var(--blue-coalition); }
.fr-callout .dot.coa-red { background: var(--red-coalition); }
.fr-callout .dot.coa-neutral { background: var(--neutral-coalition); }

/* narrow screens: keep the nav on one line */
@media (max-width: 1250px) {
    .nav-right .nav-btn { display: none; }
}
@media (max-width: 900px) {
    .filters label:not(.sep) { display: none; }
    .filters .sep { border-left: none; padding-left: 0; }
    #cards { width: 230px; }
    #hint { display: none; }
}
@media (max-width: 560px) {
    .nav-brand span, .stats { display: none; }
    #cards { width: calc(100% - 20px); bottom: auto; max-height: 45%; }
}

/* ── BLIND MODE (operation running: FLIGHT RADAR dark) ── */
#blind.banner {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1200;
    background: rgba(20, 8, 8, .92); color: #ffb4a8; border: 1px solid #a33a2c; border-radius: 4px;
    padding: 6px 14px; font: 12px Roboto, sans-serif; letter-spacing: .5px; pointer-events: none;
}
#blind.banner b { color: #ff6b57; letter-spacing: 2px; }
#blind.full {
    position: absolute; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, rgba(8, 10, 14, .97) 0 18px, rgba(14, 16, 22, .97) 18px 36px);
}
#blind .bx { max-width: 460px; margin: 16px; text-align: center; color: #c9d1d9; font-family: Roboto, sans-serif; }
#blind .k { font-size: 11px; letter-spacing: 4px; color: #6b7785; }
#blind h2 { margin: 10px 0 12px; font-size: 34px; letter-spacing: 8px; color: #ff6b57; }
#blind p { margin: 6px 0; font-size: 14px; line-height: 1.5; }
#blind p.n { color: #ffd38a; }
#blind p.s { color: #6b7785; font-size: 12px; }
body.blind-all #cards, body.blind-all #hint { display: none; }