/* ============================================================
   GALACTIC STRATEGY ENGINE – Industrial Metal UI System
   ============================================================ */
:root {
    --bg-deep: #0b0e11;
    --panel-bg: rgba(22, 26, 32, 0.94);
    --panel-face: #14181e;
    --glass-bg: #12161c;
    --panel-border: rgba(120, 140, 160, 0.28);
    --edge-cyan: #00f0ff;
    --cyan: #00f0ff;
    --amber: #fbbf24;
    --red: #ff3366;
    --green: #00ffaa;
    --magenta: #a855f7;
    --text-main: #e8eef2;
    --text-muted: #7a8b9a;
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --glow-cyan: 0 0 10px rgba(0, 240, 255, 0.22);
    --glow-amber: 0 0 10px rgba(251, 191, 36, 0.28);
    --glow-magenta: 0 0 12px rgba(168, 85, 247, 0.25);
    --metal-highlight: rgba(255, 255, 255, 0.06);
    --metal-inset: inset 0 1px 0 var(--metal-highlight), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
    --notch: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
html { touch-action: manipulation; }
button, .nav-btn, .btn-upgrade, .btn-rush, .btn-cancel, .btn-locked,
.btn-zoom, .audio-btn, .btn-icon-danger, .btn-attack, #mobile-menu-btn, .colony-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
body {
    background: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-body);
    height: 100vh; width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-image:
        radial-gradient(ellipse at 50% 30%, rgba(0, 240, 255, 0.04) 0%, transparent 55%),
        linear-gradient(180deg, #0b0e11 0%, #0f1318 100%);
    position: relative;
}

/* Soft hex-grid / plating overlay (replaces heavy CRT scanlines) */
body::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        radial-gradient(circle at 1px 1px, rgba(0, 240, 255, 0.04) 1px, transparent 0);
    background-size: 28px 28px, 28px 28px, 14px 14px;
}

/* --- Canvas Layer --- */
#webgl-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* --- HUD Overlay --- */
.hud-overlay {
    position: relative;
    z-index: 10;
    height: 100%; width: 100%;
    display: grid;
    grid-template-rows: 72px 1fr auto;
    grid-template-columns: 320px 1fr 340px;
    grid-template-areas:
        "header header header"
        "left   center right"
        "footer footer footer";
    padding: 16px; gap: 16px;
    pointer-events: none;
}
/* Collapse unused right track when planet panel is hidden (GALAXY / SYSTEM) */
.hud-overlay:has(#side-panel.hidden),
.hud-overlay.hud-galaxy {
    grid-template-columns: 320px 1fr;
    grid-template-areas:
        "header header"
        "left   center"
        "footer footer";
}
.hud-interactive { pointer-events: auto; }

/* --- Industrial panel frame (class name kept for markup compat) --- */
.glass-panel {
    background:
        linear-gradient(180deg, rgba(40, 46, 54, 0.35) 0%, transparent 28%),
        var(--panel-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    clip-path: polygon(
        var(--notch) 0,
        100% 0,
        100% calc(100% - var(--notch)),
        calc(100% - var(--notch)) 100%,
        0 100%,
        0 var(--notch)
    );
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), var(--metal-inset);
    position: relative;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.glass-panel::before {
    content: '';
    position: absolute;
    top: 0; left: var(--notch); right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--edge-cyan), transparent 70%);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 1;
}
.glass-panel::after {
    content: '';
    position: absolute;
    top: var(--notch); bottom: var(--notch); left: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--edge-cyan), transparent 80%);
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.25s;
}
.glass-panel:hover::before,
.glass-panel:hover::after { opacity: 0.9; }

/* --- Header --- */
.hud-header {
    grid-area: header;
    display: grid;
    grid-template-columns: minmax(200px, 1.1fr) minmax(280px, 1.6fr) minmax(180px, 0.9fr);
    align-items: center;
    gap: 12px 20px;
    padding: 8px 18px;
    min-height: 72px;
    overflow: hidden;
}
.hud-header::after {
    content: '';
    position: absolute;
    left: var(--notch); right: 12px; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.35), transparent 75%);
    pointer-events: none;
    opacity: 0.55;
}

.brand-zone {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.brand-mark {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(0, 240, 255, 0.28);
    background:
        linear-gradient(145deg, rgba(0, 240, 255, 0.1) 0%, transparent 55%),
        rgba(0, 0, 0, 0.35);
    box-shadow: var(--metal-inset);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.brand-icon {
    font-size: 1.15rem;
    color: var(--cyan);
    filter: drop-shadow(var(--glow-cyan));
}
.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.brand-kicker {
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--amber);
    line-height: 1.1;
}
.title-text {
    font-family: var(--font-head);
    font-size: clamp(0.78rem, 1.1vw, 1.05rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(90deg, #f4f8fb 0%, var(--cyan) 92%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    background: transparent;
    padding: 0;
    border: none;
}
.status-label { color: inherit; }
.status-dot {
    width: 5px; height: 5px;
    background: var(--cyan);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.55);
    animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

.resource-bar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    padding: 5px 10px;
    background:
        linear-gradient(180deg, rgba(40, 46, 54, 0.28) 0%, transparent 55%),
        rgba(0, 0, 0, 0.42);
    border-radius: 2px;
    border: 1px solid var(--panel-border);
    box-shadow: var(--metal-inset);
}
.resource-context {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding-right: 10px;
    border-right: 1px solid rgba(120, 140, 160, 0.22);
    min-width: 0;
    flex: 0 1 118px;
}
.resource-context-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.1;
}
.resource-context-name {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.resource-readout {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
}
.res-item {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 6px;
    border-radius: 2px;
    transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
    cursor: help;
    outline: none;
}
.res-item:hover,
.res-item:focus-visible {
    background: rgba(0, 240, 255, 0.05);
    border-color: rgba(0, 240, 255, 0.12);
}
.res-item:focus-visible {
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.35);
}
.res-item i {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
    color: var(--cyan);
    opacity: 0.9;
    filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.2));
}
.res-item.res-coins i,
.res-item.res-coins .value { color: var(--amber); }
.res-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}
.res-item .label {
    color: var(--text-muted);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
}
.res-figures {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
}
.res-item .value {
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    display: inline-block;
}
.res-item .cap {
    font-size: 0.58rem;
    color: var(--text-muted);
    font-weight: 500;
    opacity: 0.75;
    white-space: nowrap;
}
.res-item .cap::before { content: '/'; margin-right: 2px; }

.user-profile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}
.user-info {
    text-align: right;
    min-width: 0;
}
.username {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.user-level {
    font-size: 0.58rem;
    color: var(--amber);
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-top: 2px;
    opacity: 0.92;
}
.user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
    border-left: 1px solid rgba(120, 140, 160, 0.22);
}
.btn-icon-danger {
    background: rgba(255, 51, 102, 0.1);
    border: 1px solid rgba(255, 51, 102, 0.38);
    color: var(--red);
    width: 34px; height: 34px; min-width: 34px;
    border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-icon-danger:hover {
    background: rgba(255, 51, 102, 0.85);
    color: #fff;
    border-color: var(--red);
}

.btn-icon {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 240, 255, 0.28);
    color: var(--cyan);
    width: 34px; height: 34px; min-width: 34px;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-icon:hover {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.12);
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.admin-tab {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    padding: 8px 12px;
    min-height: 40px;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 1px;
}
.admin-tab.active,
.admin-tab:hover {
    color: #fff;
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.12);
}
.admin-panel-body { min-height: 180px; }
.admin-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.admin-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.admin-log-scroll {
    max-height: 45vh;
    overflow: auto;
    border: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.35);
    padding: 8px;
    user-select: text;
    -webkit-user-select: text;
}
.admin-log-scroll *,
.admin-log-file,
.admin-sql-note,
.admin-sql-note *,
.admin-sql-input,
.admin-sql-results,
.admin-sql-results * {
    user-select: text;
    -webkit-user-select: text;
}
.admin-log-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.admin-log-toolbar .admin-log-file { margin-bottom: 0; }
.admin-log-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-copy-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 0.72rem;
}
.admin-log-scroll.mono {
    font-family: "Share Tech Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    line-height: 1.35;
}
.admin-log-row {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 8px 4px;
    font-size: 0.75rem;
}
.admin-log-meta { color: var(--text-muted); font-size: 0.65rem; }
.admin-log-action {
    font-family: var(--font-head);
    letter-spacing: 0.5px;
    color: var(--cyan);
    margin: 2px 0;
}
.admin-log-details { color: var(--text-muted); word-break: break-word; }
.admin-log-file {
    font-family: var(--font-head);
    font-size: 0.7rem;
    color: var(--amber);
    margin-bottom: 6px;
}
.admin-log-line { white-space: pre-wrap; word-break: break-word; margin-bottom: 2px; }
.admin-sql-note {
    margin: 0;
    padding: 10px;
    max-height: 160px;
    overflow: auto;
    font-family: "Share Tech Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    line-height: 1.4;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-sql-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 180px;
    padding: 10px;
    font-family: "Share Tech Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #e8f0ff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    resize: vertical;
}
.admin-sql-results { margin-top: 12px; }
.admin-sql-result-block {
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.25);
}
.admin-sql-result-meta {
    font-size: 0.7rem;
    color: var(--cyan);
    margin-bottom: 6px;
    font-family: var(--font-head);
    letter-spacing: 0.5px;
}
.admin-sql-table-wrap {
    max-height: 220px;
    overflow: auto;
}
.admin-sql-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.65rem;
    font-family: "Share Tech Mono", ui-monospace, monospace;
}
.admin-sql-table th,
.admin-sql-table td {
    border: 1px solid rgba(255,255,255,0.08);
    padding: 4px 6px;
    text-align: left;
    color: var(--text-muted);
}
.admin-sql-table th { color: #fff; background: rgba(0, 240, 255, 0.08); }

.t-badge.allied { color: #7dffb3; border-color: rgba(125, 255, 179, 0.45); }
.t-badge.nap { color: #fbbf24; border-color: rgba(251, 191, 36, 0.45); }
.t-badge.war { color: #ff3366; border-color: rgba(255, 51, 102, 0.55); }

/* --- Left Column --- */
.hud-left {
    grid-area: left;
    display: flex; flex-direction: column; gap: 16px;
    overflow: hidden;
}
.btn-zoom {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid var(--panel-border);
    color: var(--cyan);
    font-family: var(--font-head); font-size: 0.7rem; font-weight: 600;
    border-radius: 2px; cursor: pointer; transition: all 0.2s;
    width: fit-content;
    position: relative;
}
.btn-zoom::before {
    content: '';
    position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px;
    background: var(--edge-cyan); opacity: 0.5; transition: opacity 0.2s;
}
.btn-zoom:hover {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--cyan);
    color: #fff;
    box-shadow: var(--glow-cyan);
}
.btn-zoom:hover::before { opacity: 1; }
.btn-zoom.hidden { display: none; }
/* Desktop: floating zoom shares left column cell above empire list */
#zoom-out-btn:not(.hidden) {
    grid-area: left;
    align-self: start;
    justify-self: start;
    z-index: 16;
}
body:has(#zoom-out-btn:not(.hidden)) .hud-left {
    padding-top: 46px;
}

.section-header {
    font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 1.5px;
    color: var(--text-muted); text-transform: uppercase;
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}

.colony-card {
    background: var(--panel-face);
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--amber);
    border-radius: 2px; padding: 10px 12px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 4px; position: relative;
    box-shadow: var(--metal-inset);
}
.colony-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.04), transparent 60%);
    opacity: 0; transition: opacity 0.3s;
}
.colony-card:hover::before { opacity: 1; }
.colony-card:hover {
    border-color: rgba(0, 240, 255, 0.45);
    transform: translateX(3px);
    box-shadow: var(--glow-cyan), var(--metal-inset);
}
.colony-card.active,
.colony-card.is-selected {
    border-color: rgba(0, 240, 255, 0.55);
    border-left-color: var(--cyan);
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.2), var(--glow-cyan), var(--metal-inset);
}
.colony-card.active .name,
.colony-card.is-selected .name {
    color: var(--cyan);
}
.colony-selected-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.55rem;
    color: #041018;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
    vertical-align: middle;
}
.colony-card .status-badge {
    font-size: 0.55rem; padding: 2px 10px; border-radius: 2px;
    background: rgba(0, 240, 255, 0.1); color: var(--cyan);
    border: 1px solid rgba(0, 240, 255, 0.25);
    margin-left: auto; text-transform: uppercase; letter-spacing: 0.5px;
}
.colony-card .status-badge.colony-hold-home {
    border-color: var(--amber); color: var(--amber);
    background: rgba(255, 176, 32, 0.12);
}
.colony-card .status-badge.colony-hold-colony {
    border-color: rgba(160, 200, 255, 0.45); color: #a8c8ff;
    background: rgba(120, 160, 255, 0.1);
}
.colony-thumb {
    width: 36px; height: 36px; border-radius: 2px;
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 240, 255, 0.15);
    flex-shrink: 0; position: relative; overflow: hidden;
    background: radial-gradient(circle at 30% 30%, #4caf50, #0d47a1);
}
.colony-details .name { font-weight: 700; font-size: 0.9rem; color: #fff; }
.colony-details .meta { font-size: 0.7rem; color: var(--text-muted); }
.colony-details .colony-owner-line { color: var(--cyan); opacity: 0.85; margin-top: 2px; }
.colony-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 8px;
    font-family: var(--font-head);
    font-size: 0.58rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 1px;
    cursor: pointer;
}
.colony-map-btn:hover {
    background: rgba(0, 240, 255, 0.18);
    color: #fff;
}

.audio-controls-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    border: 1px solid var(--panel-border);
}
.audio-controls-panel .audio-btn {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid var(--panel-border);
    color: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}
.audio-controls-panel .audio-btn:hover {
    background: rgba(0, 240, 255, 0.18);
    border-color: var(--cyan);
}
.audio-controls-panel input[type="range"] {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1px;
    outline: none;
}
.audio-controls-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cyan);
    cursor: pointer;
    box-shadow: 0 0 8px var(--cyan);
}

/* --- Right Column --- */
.hud-right {
    grid-area: right; padding: 16px;
    display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
}
.hud-right.hidden { display: none; }
.planet-status-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--panel-border); padding-bottom: 6px;
}
.timer-badge { font-family: var(--font-head); color: var(--amber); font-size: 0.8rem; }

.planet-actions {
    margin-top: 12px;
}
.planet-actions.hidden { display: none !important; }
.planet-attack-hint {
    margin: 8px 0 0;
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.planet-attack-hint strong {
    color: #e8f9ff;
    font-weight: 600;
}
.btn-attack {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    font-family: var(--font-head);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 51, 102, 0.18);
    border: 1px solid var(--red);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-attack:hover {
    background: rgba(255, 51, 102, 0.32);
    box-shadow: 0 0 12px rgba(255, 51, 102, 0.35);
}
.btn-attack i { color: var(--red); }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.data-item {
    background: rgba(0, 0, 0, 0.35);
    padding: 6px 10px;
    border-radius: 2px;
    border: 1px solid var(--panel-border);
    box-shadow: var(--metal-inset);
}
.data-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.data-value { font-weight: 700; font-size: 0.9rem; color: #fff; }

.ship-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ship-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 2px;
    border: 1px solid transparent;
    font-size: 0.8rem;
}
.ship-item i { width: 20px; color: var(--cyan); }

.fleet-item-detail {
    display: block;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 6px 8px; margin-bottom: 4px;
    background: rgba(0, 240, 255, 0.04);
    border-radius: 2px;
    border: 1px solid transparent;
    border-left: 2px solid var(--cyan);
    font-size: 0.75rem;
}
.fleet-item-detail:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.25);
}
.fleet-item-detail.selected {
    background: rgba(0, 240, 255, 0.14);
    border-color: var(--cyan);
}
.fleet-item-detail.cloaked-fleet {
    border-left-color: var(--magenta);
    background: rgba(168, 85, 247, 0.06);
}
.fleet-item-detail .fleet-mission { font-weight: bold; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fleet-item-detail .fleet-progress {
    margin-top: 4px; height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px; overflow: hidden;
}
.fleet-item-detail .fleet-progress .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--amber));
    transition: width 1s ease;
}
.fleet-status-pill {
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    background: rgba(0,0,0,0.35);
    white-space: nowrap;
}
.fleet-status-line {
    font-size: 10px;
    color: var(--cyan);
    margin-top: 2px;
}
.fleet-item-detail.fleet-returning {
    border-left-color: var(--amber);
}
.fleet-item-detail.fleet-returning .fleet-status-pill {
    color: var(--amber);
    border-color: rgba(251, 191, 36, 0.45);
}
.fleet-item-detail.fleet-returning .fleet-status-line { color: var(--amber); }
.fleet-item-detail.fleet-destroyed {
    border-left-color: var(--red);
    opacity: 0.85;
}
.fleet-item-detail.fleet-destroyed .fleet-status-pill {
    color: var(--red);
    border-color: rgba(255, 68, 68, 0.5);
}
.fleet-item-detail.fleet-destroyed .fleet-status-line { color: var(--red); }
.fleet-item-detail.fleet-arrived .fleet-status-pill {
    color: var(--green);
    border-color: rgba(52, 211, 153, 0.45);
}
.fleet-item-detail.fleet-arrived .fleet-status-line { color: var(--green); }
.fleet-item-detail.fleet-destroyed .fleet-progress .fill {
    background: linear-gradient(90deg, #662222, var(--red));
}
.fleet-item-detail.fleet-returning .fleet-progress .fill {
    background: linear-gradient(90deg, var(--amber), #fff3c4);
}

.battle-log-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 2px;
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    line-height: 16px;
    text-align: center;
    font-family: var(--font-head);
    z-index: 2;
}
#nav-battle-log { position: relative; }

/* --- Battle Logs page (full modal panel) --- */
.modal-battle-log .modal-content {
    max-width: 1200px;
    max-height: 92vh;
}
.modal-battle-log #modal-body {
    height: calc(90vh - 80px);
    max-height: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.battle-log-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    height: 100%;
}
.blog-strip {
    flex-shrink: 0;
}
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}
.blog-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 2px;
    cursor: pointer;
    min-height: 36px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.blog-filter-btn:hover {
    border-color: rgba(0, 240, 255, 0.4);
    color: var(--text-main);
}
.blog-filter-btn.active {
    border-color: var(--cyan);
    color: #fff;
    background: rgba(0, 240, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.15);
}
.blog-filter-count {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--amber);
    opacity: 0.9;
}
.blog-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 14px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
    min-height: 0;
    border-right: 1px solid rgba(0, 240, 255, 0.12);
    padding-right: 10px;
}
.blog-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(40, 46, 54, 0.35) 0%, transparent 40%),
        rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--panel-border);
    color: var(--text-main);
    padding: 10px 12px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.blog-card:hover {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(0, 240, 255, 0.06);
}
.blog-card.selected {
    border-color: var(--cyan);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.2), 0 0 16px rgba(0, 240, 255, 0.08);
    background: rgba(0, 240, 255, 0.1);
}
.blog-card.outcome-victory { border-left-color: var(--green); }
.blog-card.outcome-defeat { border-left-color: var(--red); }
.blog-card.outcome-aborted { border-left-color: var(--amber); }
.blog-card.outcome-draw { border-left-color: rgba(0, 240, 255, 0.45); }
.blog-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.blog-card-outcome {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 1px;
}
.blog-card.outcome-victory .blog-card-outcome { color: var(--green); }
.blog-card.outcome-defeat .blog-card-outcome { color: var(--red); }
.blog-card.outcome-aborted .blog-card-outcome { color: var(--amber); }
.blog-card.outcome-draw .blog-card-outcome { color: var(--cyan); }
.blog-card-role {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-family: var(--font-head);
}
.blog-card-planet {
    font-family: var(--font-head);
    font-size: 0.85rem;
    color: #fff;
    letter-spacing: 0.5px;
}
.blog-card-sides {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.blog-card-sides i {
    color: var(--amber);
    font-size: 0.55rem;
}
.blog-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.blog-card-loot {
    color: var(--amber);
    font-family: var(--font-head);
    letter-spacing: 0.3px;
}
.blog-empty,
.blog-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 36px 16px;
    color: var(--text-muted);
    border: 1px dashed rgba(0, 240, 255, 0.2);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    min-height: 180px;
}
.blog-empty i,
.blog-detail-empty i {
    font-size: 1.6rem;
    color: var(--cyan);
    opacity: 0.7;
}
.blog-empty strong {
    font-family: var(--font-head);
    color: var(--text-main);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.blog-empty p,
.blog-detail-empty p {
    margin: 0;
    max-width: 260px;
    font-size: 0.8rem;
    line-height: 1.4;
}
.blog-detail {
    overflow-y: auto;
    min-height: 0;
    padding-left: 2px;
}
.blog-inline-detail {
    gap: 12px;
}
.blog-inline-detail .aftermath-scan { display: none; }
.blog-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}
.blog-detail-actions .btn-upgrade {
    min-height: 40px;
}
.blog-card-locate {
    align-self: flex-start;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.35);
    color: var(--cyan);
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
    min-height: 28px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.blog-card-locate:hover {
    background: rgba(0, 240, 255, 0.18);
    border-color: var(--cyan);
    color: #fff;
}
.blog-locate-btn {
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.18), rgba(0, 0, 0, 0.35)) !important;
    border-color: rgba(0, 240, 255, 0.45) !important;
}
.player-link {
    color: var(--cyan);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 240, 255, 0.35);
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
.player-link:hover {
    color: #fff;
    border-bottom-color: var(--amber);
}
.aftermath-commander-name .player-link {
    font-family: var(--font-head);
    letter-spacing: 0.5px;
}
.map-planet-card.is-battle-focus {
    border-color: var(--amber) !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45), 0 0 14px rgba(251, 191, 36, 0.2);
}

@media (max-width: 860px) {
    .blog-layout {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .blog-list {
        border-right: none;
        border-bottom: 1px solid rgba(0, 240, 255, 0.12);
        padding-right: 0;
        padding-bottom: 10px;
        max-height: 42vh;
    }
    .modal-battle-log #modal-body {
        height: auto;
        max-height: calc(92vh - 70px);
        overflow-y: auto;
    }
    .battle-log-page {
        height: auto;
    }
}

.aftermath-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    animation: aftermath-enter 0.45s ease-out both;
}
@keyframes aftermath-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.aftermath-scan {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 240, 255, 0.03) 3px,
        rgba(0, 240, 255, 0.03) 4px
    );
    opacity: 0.55;
    animation: aftermath-scan-drift 8s linear infinite;
}
@keyframes aftermath-scan-drift {
    from { background-position: 0 0; }
    to { background-position: 0 48px; }
}
.aftermath-hero {
    position: relative;
    text-align: center;
    padding: 18px 16px 16px;
    border: 1px solid var(--panel-border);
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0, 240, 255, 0.12), transparent 55%),
        rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.aftermath-hero-glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 120%;
    background: radial-gradient(circle at 50% 40%, rgba(0, 240, 255, 0.18), transparent 55%);
    opacity: 0.8;
    animation: aftermath-pulse 2.8s ease-in-out infinite;
}
@keyframes aftermath-pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.04); }
}
.aftermath-victory .aftermath-hero {
    border-color: rgba(0, 255, 170, 0.4);
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0, 255, 170, 0.16), transparent 55%),
        rgba(0, 0, 0, 0.5);
}
.aftermath-defeat .aftermath-hero {
    border-color: rgba(255, 51, 102, 0.45);
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 51, 102, 0.16), transparent 55%),
        rgba(0, 0, 0, 0.5);
}
.aftermath-aborted .aftermath-hero {
    border-color: rgba(251, 191, 36, 0.4);
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(251, 191, 36, 0.14), transparent 55%),
        rgba(0, 0, 0, 0.5);
}
.aftermath-kicker {
    position: relative;
    font-family: var(--font-head);
    font-size: 0.58rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.aftermath-banner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-head);
    font-size: clamp(1.15rem, 2.5vw, 1.55rem);
    font-weight: 800;
    letter-spacing: 3px;
    padding: 8px 4px;
    color: var(--cyan);
}
.aftermath-victory .aftermath-banner { color: var(--green); text-shadow: 0 0 24px rgba(0, 255, 170, 0.35); }
.aftermath-defeat .aftermath-banner { color: var(--red); text-shadow: 0 0 24px rgba(255, 51, 102, 0.35); }
.aftermath-aborted .aftermath-banner { color: var(--amber); text-shadow: 0 0 20px rgba(251, 191, 36, 0.3); }
.aftermath-draw .aftermath-banner { color: var(--cyan); }
.aftermath-banner i { font-size: 0.9em; opacity: 0.9; }
.aftermath-planet {
    position: relative;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin-top: 4px;
}
.aftermath-meta-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.aftermath-meta-row i { color: var(--cyan); margin-right: 4px; }
.aftermath-role-chip {
    padding: 2px 10px;
    border: 1px solid rgba(0, 240, 255, 0.35);
    color: var(--cyan);
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.aftermath-duel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: stretch;
}
.aftermath-commander {
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.35);
}
.aftermath-commander.atk { border-left: 3px solid var(--red); }
.aftermath-commander.def { border-left: 3px solid var(--cyan); text-align: right; }
.aftermath-side-tag {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.aftermath-commander-name {
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    word-break: break-word;
}
.aftermath-vs {
    display: flex;
    align-items: center;
    justify-content: center;
}
.aftermath-vs span {
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--amber);
    border: 1px solid rgba(251, 191, 36, 0.4);
    padding: 8px 10px;
    background: rgba(251, 191, 36, 0.08);
}
.aftermath-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 8px;
}
.aftermath-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.aftermath-loss-card {
    padding: 12px;
    border: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.28);
}
.aftermath-losses {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aftermath-loss-row,
.aftermath-losses li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.82rem;
}
.aftermath-loss-row:last-child,
.aftermath-losses li:last-child { border-bottom: none; }
.aftermath-loss-ship {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}
.aftermath-loss-ship i { color: var(--cyan); width: 14px; text-align: center; }
.aftermath-losses strong,
.aftermath-loss-row strong { color: var(--red); font-family: var(--font-head); }
.aftermath-losses-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 6px 0;
    font-style: italic;
}
.aftermath-loot {
    position: relative;
    padding: 14px 16px;
    border: 1px solid rgba(0, 240, 255, 0.3);
    background:
        linear-gradient(135deg, rgba(0, 240, 255, 0.08), transparent 50%),
        rgba(0, 0, 0, 0.4);
}
.aftermath-loot.loot-won {
    border-color: rgba(0, 255, 170, 0.35);
    background:
        linear-gradient(135deg, rgba(0, 255, 170, 0.1), transparent 55%),
        rgba(0, 0, 0, 0.4);
}
.aftermath-loot.loot-lost {
    border-color: rgba(255, 51, 102, 0.4);
    background:
        linear-gradient(135deg, rgba(255, 51, 102, 0.1), transparent 55%),
        rgba(0, 0, 0, 0.4);
}
.aftermath-loot-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.aftermath-loot-none {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.aftermath-loot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.aftermath-loot-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0, 0, 0, 0.35);
}
.aftermath-loot-cell .loot-key {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.aftermath-loot-cell .loot-val {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cyan);
}
.aftermath-loot.loot-won .loot-val { color: var(--green); }
.aftermath-loot.loot-lost .loot-val { color: var(--red); }
.aftermath-intel {
    padding: 12px 14px;
    border: 1px dashed rgba(120, 140, 160, 0.35);
    background: rgba(0, 0, 0, 0.25);
}
.aftermath-summary {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.modal-aftermath .modal-content {
    max-width: 720px;
}
.modal-aftermath #modal-title {
    letter-spacing: 2px;
}
@media (max-width: 640px) {
    .aftermath-duel,
    .aftermath-columns,
    .aftermath-loot-grid {
        grid-template-columns: 1fr;
    }
    .aftermath-commander.def { text-align: left; }
    .aftermath-vs { padding: 4px 0; }
}

.fleet-transit-panel { display: flex; flex-direction: column; gap: 10px; }
.fleet-transit-mission {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-head);
    letter-spacing: 1px;
    font-size: 0.95rem;
}
.fleet-transit-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-main);
    font-size: 0.85rem;
}
.fleet-transit-route i { color: var(--cyan); }
.fleet-transit-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fleet-transit-meta .data-item:last-child { grid-column: 1 / -1; }
.fleet-transit-bar {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
    overflow: hidden;
}
.fleet-transit-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--amber));
}

.fleet-route-legend {
    position: fixed;
    /* Sit in map gutter above footer status row (dock + combined queues) */
    left: max(16px, calc(320px + 32px));
    bottom: max(168px, calc(env(safe-area-inset-bottom, 0px) + 11.5rem));
    z-index: 40;
    pointer-events: none;
    padding: 8px 10px;
    background: rgba(8, 12, 18, 0.82);
    border: 1px solid var(--panel-border);
    border-left: 2px solid var(--cyan);
    font-size: 0.72rem;
    color: var(--text-muted);
    min-width: 132px;
    max-width: 160px;
}
.fleet-route-legend-title {
    font-family: var(--font-head);
    letter-spacing: 1px;
    color: var(--text-main);
    margin-bottom: 6px;
    font-size: 0.7rem;
}
.fleet-route-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
}
.fleet-route-legend .swatch {
    width: 14px;
    height: 3px;
    display: inline-block;
}
.fleet-route-legend .swatch.attack { background: #ff3344; }
.fleet-route-legend .swatch.colonize { background: #34d399; }
.fleet-route-legend .swatch.reinforce { background: #fbbf24; }
.fleet-route-legend .swatch.transport { background: #60a5fa; }
.fleet-route-legend .swatch.mine { background: #f59e0b; }
.fleet-route-legend-hint {
    margin-top: 8px;
    font-size: 0.65rem;
    opacity: 0.75;
}

/* --- Footer --- */
.hud-footer {
    grid-area: footer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0 8px;
    min-height: 0;
}
.hud-footer-dock-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.dock-container {
    display: flex; gap: 6px; padding: 6px 12px; margin: 0 auto;
    flex-wrap: wrap;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    box-shadow: var(--metal-inset);
    position: relative;
}
.dock-container::before {
    content: '';
    position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--edge-cyan), transparent);
    opacity: 0.45;
}

/* Construction + Deployed Fleets share one footer row */
.hud-footer-status-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(1200px, 100%);
    margin: 0 auto;
    min-height: 0;
}
.status-sheet-handle {
    display: none;
}
.status-sheet-panels {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 0;
}
.construction-queue-bar,
.fleet-status-bar {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 6px 10px 8px;
    clip-path: none;
    border-radius: 2px;
    max-height: 148px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.construction-queue-title {
    color: #86efac;
}
.construction-queue-bar .fleet-status-bar-count {
    border-color: rgba(134, 239, 172, 0.35);
    color: #86efac;
    background: rgba(134, 239, 172, 0.08);
}
.construction-queue-chip {
    flex: 0 0 auto;
    min-width: 196px;
    max-width: 260px;
    text-align: left;
    padding: 8px 11px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    color: var(--text-main);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8rem;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.construction-queue-chip:hover {
    transform: translateY(-1px);
}
.construction-queue-chip.queue-building {
    border-color: rgba(134, 239, 172, 0.4);
}
.construction-queue-chip.queue-building:hover {
    border-color: rgba(134, 239, 172, 0.65);
    background: rgba(134, 239, 172, 0.08);
}
.construction-queue-chip.queue-shipyard {
    border-color: rgba(125, 211, 252, 0.4);
}
.construction-queue-chip.queue-shipyard:hover {
    border-color: rgba(125, 211, 252, 0.65);
    background: rgba(125, 211, 252, 0.08);
}
.construction-queue-chip .chip-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.construction-queue-chip .chip-planet {
    color: var(--text-muted);
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.construction-queue-chip .chip-target {
    margin-top: 3px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.construction-queue-chip .chip-meta {
    flex-shrink: 0;
    margin-top: 0;
    font-size: 0.78rem;
    font-family: var(--font-head);
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.construction-queue-chip.queue-building .chip-meta { color: #86efac; }
.construction-queue-chip.queue-shipyard .chip-meta { color: #7dd3fc; }
.construction-queue-chip .chip-progress {
    margin-top: 6px;
    height: 3px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.construction-queue-chip .chip-progress .fill {
    height: 100%;
    width: 0;
    transition: width 0.35s linear;
}
.construction-queue-chip.queue-building .chip-progress .fill {
    background: linear-gradient(90deg, #4ade80, #86efac);
}
.construction-queue-chip.queue-shipyard .chip-progress .fill {
    background: linear-gradient(90deg, var(--cyan), #7dd3fc);
}
.fleet-status-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}
.fleet-status-bar-title {
    font-family: var(--font-head);
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cyan);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.fleet-status-bar-count {
    font-family: var(--font-head);
    font-size: 0.65rem;
    min-width: 22px;
    text-align: center;
    padding: 2px 8px;
    border: 1px solid rgba(0, 240, 255, 0.35);
    color: var(--cyan);
    background: rgba(0, 240, 255, 0.08);
    flex-shrink: 0;
}
.fleet-status-strip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    min-height: 0;
    flex: 1 1 auto;
}
.fleet-status-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 8px 4px;
}
.fleet-status-chip {
    flex: 0 0 auto;
    min-width: 196px;
    max-width: 260px;
    text-align: left;
    padding: 8px 11px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    color: var(--text-main);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8rem;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.fleet-status-chip:hover {
    border-color: rgba(0, 240, 255, 0.45);
    background: rgba(0, 240, 255, 0.08);
    transform: translateY(-1px);
}
.fleet-status-chip.selected {
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.35);
}
.fleet-status-chip .chip-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.fleet-status-chip .chip-route {
    color: var(--text-muted);
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fleet-status-chip .chip-ships,
.fleet-item-detail .fleet-ships {
    margin-top: 3px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: var(--text-main);
}
.fleet-status-chip .chip-meta {
    margin-top: 4px;
    margin-bottom: 2px;
    font-size: 0.8rem;
    line-height: 1.35;
    font-family: var(--font-head);
    letter-spacing: 0.5px;
    color: var(--cyan);
    white-space: nowrap;
}
.fleet-status-chip .fleet-countdown,
.fleet-item-detail .fleet-countdown {
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.fleet-status-chip .chip-progress {
    margin-top: 6px;
    height: 3px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.fleet-status-chip .chip-progress .fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--cyan), #7dd3fc);
    transition: width 0.35s linear;
}
.fleet-status-chip.fleet-returning { border-color: rgba(251, 191, 36, 0.45); }
.fleet-status-chip.fleet-returning .chip-meta { color: var(--amber); }
.fleet-status-chip.fleet-returning .chip-progress .fill {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.fleet-status-chip.fleet-transit {
    border-color: rgba(0, 240, 255, 0.28);
}
@keyframes fleet-chip-exit {
    from {
        opacity: 1;
        transform: translateY(0) scaleX(1);
        max-width: 260px;
        min-width: 196px;
        padding-left: 11px;
        padding-right: 11px;
        margin-right: 0;
    }
    to {
        opacity: 0;
        transform: translateY(4px) scaleX(0.85);
        max-width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        margin-right: -8px;
        border-width: 0;
    }
}
.fleet-status-chip.fleet-chip-exit {
    pointer-events: none;
    overflow: hidden;
    animation: fleet-chip-exit 0.26s ease-in forwards;
}
.nav-btn {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    color: var(--text-main); padding: 10px 16px; border-radius: 2px;
    min-height: 48px; min-width: 48px;
    font-family: var(--font-head); font-size: 0.7rem; font-weight: 600; letter-spacing: 1px;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
    white-space: nowrap;
    position: relative;
}
.nav-btn:active { transform: scale(0.97); }
.nav-btn::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--edge-cyan);
    opacity: 0;
    transition: opacity 0.2s;
}
.nav-btn i { color: var(--cyan); }
.nav-btn:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.45);
    color: #fff;
    transform: translateY(-1px);
}
.nav-btn:hover::after { opacity: 0.8; }
.nav-btn.active {
    background: rgba(0, 240, 255, 0.18);
    color: #fff;
    border-color: var(--cyan);
}
.nav-btn.active::after { opacity: 1; }
.nav-btn.active i { color: var(--cyan); }
.nav-btn.primary {
    border-color: rgba(251, 191, 36, 0.4);
}
.nav-btn.primary i { color: var(--amber); }
.nav-btn.primary:hover {
    border-color: var(--amber);
    box-shadow: var(--glow-amber);
}
.nav-btn.primary::after {
    background: var(--amber);
}

.system-controls { display: flex; gap: 6px; padding: 4px 10px; align-items: center; }
.audio-btn {
    width: 32px; height: 32px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--panel-border);
    color: var(--text-muted); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.audio-btn:hover, .audio-btn.active {
    color: var(--cyan); border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.08);
}

/* --- Galaxy Map Nodes --- */
.galaxy-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
    width: 100%; max-width: 800px;
}
.system-node {
    background: var(--panel-face);
    border: 1px solid var(--panel-border);
    border-radius: 2px; padding: 12px 16px; text-align: center;
    cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; min-width: 80px;
    box-shadow: var(--metal-inset);
}
.system-node::before {
    content: ''; position: absolute; inset: -1px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), transparent 60%);
    opacity: 0; transition: opacity 0.3s;
}
.system-node:hover::before, .system-node.active::before { opacity: 1; }
.system-node:hover {
    border-color: var(--cyan);
    box-shadow: var(--glow-cyan), var(--metal-inset);
    transform: translateY(-2px);
}
.system-node .system-icon { font-size: 2rem; margin-bottom: 6px; transition: all 0.3s; }
.system-node .system-name { font-weight: 700; color: #fff; font-size: 0.8rem; font-family: var(--font-head); letter-spacing: 1px; }
.system-node .system-meta { font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; }
.system-node .owner-badge {
    display: inline-block; font-size: 0.5rem; padding: 2px 8px; border-radius: 2px;
    margin-top: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}

/* --- Modals --- */
.modal {
    position: fixed; inset: 0;
    background: rgba(8, 10, 14, 0.88);
    backdrop-filter: blur(6px); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.modal.drawer-ready { opacity: 1; }
.modal.drawer-open .modal-content {
    transform: translateY(0);
}
.modal.hidden { display: none !important; opacity: 0; }

/* Auth gate must stay fully visible when shown — drawer opacity starts at 0 */
#auth-modal:not(.hidden) {
    opacity: 1;
}
#auth-modal:not(.hidden) .modal-content {
    transform: translateY(0);
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    min-width: 260px;
    max-width: 420px;
    padding: 14px 16px;
    border-radius: 2px;
    background: var(--panel-bg);
    border: 1px solid rgba(0, 240, 255, 0.35);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.35;
    pointer-events: auto;
    box-shadow: var(--metal-inset), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.notification.success {
    border-color: rgba(0, 255, 170, 0.45);
    background: rgba(8, 28, 22, 0.95);
}
.notification.error {
    border-color: rgba(255, 51, 102, 0.5);
    background: rgba(32, 8, 14, 0.95);
}
.notification.info {
    border-color: rgba(0, 240, 255, 0.35);
}

.modal-content {
    width: 100%; height: 100%; max-width: 1200px; max-height: 90vh;
    padding: 30px; overflow-y: auto; position: relative;
    background:
        linear-gradient(180deg, rgba(40, 46, 54, 0.4) 0%, transparent 20%),
        var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    clip-path: polygon(
        14px 0,
        100% 0,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        0 100%,
        0 14px
    );
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), var(--metal-inset);
    transform: translateY(18px);
    transition: transform 0.22s ease;
}
.modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 14px; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--edge-cyan), transparent 65%);
    opacity: 0.7;
    pointer-events: none;
}
.modal-content .close-btn {
    position: sticky; top: 0; float: right;
    background: transparent; border: none; color: var(--red);
    font-size: 28px; cursor: pointer; z-index: 10; padding: 0 8px;
}
.modal-content .close-btn:hover { color: #fff; text-shadow: 0 0 12px var(--red); }
.modal-content h2 {
    font-family: var(--font-head); color: var(--cyan);
    margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px;
    display: flex; align-items: center; gap: 12px;
}

#auth-modal .modal-content.auth-card {
    max-width: 440px;
    height: auto;
    padding: 36px 32px 28px;
    position: relative;
    z-index: 1;
}
#auth-modal .auth-atmosphere {
    display: none;
}
#auth-modal .auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
#auth-modal .auth-brand-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 240, 255, 0.45);
    background:
        radial-gradient(circle at 40% 30%, rgba(0, 240, 255, 0.25), transparent 55%),
        rgba(0, 0, 0, 0.45);
    color: var(--cyan);
    font-size: 1.35rem;
    flex-shrink: 0;
}
#auth-modal .auth-brand-kicker {
    display: block;
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    color: var(--cyan);
}
#auth-modal .auth-brand-copy h2,
#auth-modal #auth-title {
    margin: 4px 0 0;
    font-family: var(--font-head);
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e8eef5;
    display: block;
}
#auth-modal input[type="text"],
#auth-modal input[type="password"],
#auth-modal input[type="email"] {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 240, 255, 0.28);
    border-radius: 2px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
#auth-modal input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.25); }
#auth-modal .auth-remember {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1.35;
}
#auth-modal .auth-remember input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--cyan);
}
#auth-modal .auth-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    padding: 12px 16px;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #041018;
    background: linear-gradient(180deg, #5ef0ff 0%, #00c8d8 55%, #009aa8 100%);
    border: 1px solid rgba(0, 240, 255, 0.85);
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#auth-modal .auth-submit:hover {
    filter: brightness(1.06);
}
#auth-modal .switch-link { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--text-muted); }
#auth-modal .switch-link a { color: var(--cyan); cursor: pointer; text-decoration: underline; }
#auth-modal .error-text { color: var(--red); text-align: center; margin-bottom: 10px; min-height: 20px; font-size: 0.85rem; }

/* Map tools panel — open by default on desktop */
.map-tools-toggle { display: none; }
.map-tools-panel {
    display: contents;
}

/* Shared facility / ship grids */
.facility-grid,
.holo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.modal-strip {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    box-shadow: var(--metal-inset);
}
.modal-strip .accent { color: var(--amber); font-weight: 700; }

.modal-lead {
    color: var(--text-muted);
    margin-bottom: 16px;
}
.modal-lead b { color: #fff; }

.panel-block {
    background: rgba(0, 0, 0, 0.35);
    padding: 16px;
    border-radius: 2px;
    border: 1px solid var(--panel-border);
    box-shadow: var(--metal-inset);
}

.industrial-input,
.industrial-select {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--panel-border);
    color: #fff;
    padding: 8px;
    border-radius: 2px;
    font-family: inherit;
    outline: none;
}
.industrial-select:focus,
.industrial-input:focus { border-color: var(--cyan); }

/* ============================================================
   INDUSTRIAL BUILDING / SHIP CARDS
   ============================================================ */
.building-card,
.ship-card {
    background: var(--panel-face);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), var(--metal-inset);
    overflow: hidden;
}
.building-card::before,
.ship-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.35), transparent);
    opacity: 0.45;
    transition: opacity 0.25s;
}
.building-card:hover,
.ship-card:hover {
    border-color: rgba(0, 240, 255, 0.5);
    box-shadow: var(--glow-cyan), var(--metal-inset);
    transform: translateY(-2px);
}
.building-card:hover::before,
.ship-card:hover::before { opacity: 1; }

.building-card .card-header,
.ship-card .ship-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 6px;
}
.building-card .card-title,
.ship-card .ship-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.building-card .card-title i,
.ship-card .ship-name i {
    color: var(--cyan);
}
.building-card .level-badge,
.ship-card .ship-badge {
    background: rgba(0, 240, 255, 0.08);
    color: var(--cyan);
    border: 1px solid rgba(0, 240, 255, 0.28);
    padding: 2px 10px;
    border-radius: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: var(--font-head);
    letter-spacing: 0.5px;
}
.building-card .level-badge.locked {
    color: var(--red);
    border-color: rgba(255, 51, 102, 0.4);
    background: rgba(255, 51, 102, 0.1);
}
.building-card .card-yield {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.building-card .card-yield .yield-value {
    color: var(--amber);
    font-weight: 700;
}

.card-visual {
    position: relative;
    width: 100%;
    height: 190px;
    background:
        radial-gradient(circle at 50% 42%, rgba(0, 240, 255, 0.06), transparent 55%),
        #080a0d;
    border-radius: 2px;
    border: 1px solid var(--panel-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 8px 24px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
}

.card-visual .building-art {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-visual .building-art-img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.card-visual .building-art-img.is-broken {
    display: none !important;
}
.card-visual .building-art.is-locked .building-art-img {
    filter: grayscale(0.45) brightness(0.55);
}
.card-visual .building-icon {
    font-size: 2.8rem;
    color: rgba(0, 240, 255, 0.25);
    transition: all 0.3s;
}
.card-visual .building-icon-fallback {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.card-visual .building-icon-fallback.is-visible {
    display: flex;
}
.building-card:not(.locked) .card-visual .building-icon {
    color: rgba(0, 240, 255, 0.45);
}

.card-visual .lock-overlay {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 6px,
            rgba(0, 0, 0, 0.28) 6px,
            rgba(0, 0, 0, 0.28) 12px
        ),
        rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
}
.lock-overlay i {
    font-size: 2rem;
    color: var(--red);
    filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.45));
}
.lock-overlay .lock-text {
    color: var(--red);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-head);
}

/* Cost status strip with LED dots */
.card-cost,
.b-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 10px;
    border-radius: 2px;
    border: 1px solid var(--panel-border);
    align-items: center;
}
.card-cost .cost-item,
.b-cost .cost-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.card-cost .cost-item::before,
.b-cost .cost-item::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
    flex-shrink: 0;
}
.card-cost .cost-item:has(.insufficient)::before,
.b-cost .cost-item:has(.insufficient)::before {
    background: var(--red);
    box-shadow: 0 0 6px var(--red);
}
.card-cost .cost-item i,
.b-cost .cost-item i {
    color: var(--cyan);
}
.card-cost .cost-item .insufficient {
    color: var(--red);
}

.card-actions {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.card-actions .btn-upgrade,
.card-actions .btn-rush,
.card-actions .btn-cancel,
.card-actions .btn-locked,
.btn-upgrade,
.btn-danger,
.btn-launch {
    flex: 1;
    padding: 10px 12px;
    min-height: 48px;
    border-radius: 2px;
    font-family: var(--font-head);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-upgrade:active,
.btn-rush:active,
.btn-cancel:active,
.nav-btn:active { transform: scale(0.97); }

.res-item .value.res-pulse {
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
    animation: res-tick 0.4s ease-out;
}
.res-item.res-coins .value.res-pulse {
    color: var(--amber);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}
@keyframes res-tick {
    0% { transform: translateY(1px); opacity: 0.75; }
    100% { transform: translateY(0); opacity: 1; }
}
.btn-upgrade {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.35);
    color: var(--cyan);
    position: relative;
}
.btn-upgrade::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--edge-cyan);
    opacity: 0;
    transition: opacity 0.2s;
}
.btn-upgrade:hover:not(:disabled):not([aria-disabled="true"]) {
    background: rgba(0, 240, 255, 0.2);
    color: #fff;
    border-color: var(--cyan);
}
.btn-upgrade:hover:not(:disabled):not([aria-disabled="true"])::after { opacity: 1; }
.btn-upgrade:disabled,
.btn-upgrade[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}
.btn-rush {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: var(--amber);
}
.btn-rush:hover {
    background: rgba(251, 191, 36, 0.25);
    color: #fff;
}
.btn-cancel,
.btn-danger {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
}
.btn-cancel:hover,
.btn-danger:hover {
    background: rgba(255, 51, 102, 0.12);
    border-color: rgba(255, 51, 102, 0.4);
    color: var(--red);
}
.btn-locked {
    background: rgba(255, 51, 102, 0.05);
    border: 1px solid rgba(255, 51, 102, 0.15);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}
.btn-launch {
    width: 100%;
    padding: 14px;
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid var(--cyan);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-top: 16px;
}
.btn-launch:hover:not(:disabled) {
    background: rgba(0, 240, 255, 0.22);
    box-shadow: var(--glow-cyan);
}
.btn-launch:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.card-queue,
.queue-container {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
}
.card-queue .queue-timer,
.queue-container .queue-timer {
    text-align: center;
    font-family: var(--font-head);
    color: var(--amber);
    font-size: 0.7rem;
    font-weight: 700;
}
.card-queue .queue-bar-bg,
.queue-container .queue-bar-bg {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    overflow: hidden;
    margin: 4px 0;
}
.card-queue .queue-bar-fill,
.queue-container .queue-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--amber), #fff3c4);
    width: 0%;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
    transition: width 0.5s linear;
    border-radius: 1px;
    animation: amber-pulse 1.4s ease-in-out infinite;
}
@keyframes amber-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
}

.colony-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--panel-face);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    padding: 12px 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: var(--metal-inset);
    position: relative;
}
.colony-summary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--edge-cyan), transparent);
    opacity: 0.5;
}
.colony-summary .metric {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}
.colony-summary .metric .label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}
.colony-summary .metric .value {
    font-weight: 700;
    color: #fff;
}
.colony-summary .metric .value.good { color: var(--green); }
.colony-summary .metric .value.warning { color: var(--amber); }
.colony-summary .metric .value.danger { color: var(--red); }
.colony-summary .status-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: pulse-dot 2.4s infinite;
    flex-shrink: 0;
}

.colony-summary .power-bar {
    flex: 1;
    min-width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
    overflow: hidden;
}
.colony-summary .power-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--green));
    width: 0%;
    border-radius: 1px;
    transition: width 0.5s;
}

/* Ship / fleet / merchant shared surfaces */
.ship-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 8px 0;
    background: rgba(0, 0, 0, 0.35);
    padding: 8px;
    border-radius: 2px;
    border: 1px solid var(--panel-border);
}
.ship-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.ship-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.quantity-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.quantity-control input[type="number"] {
    width: 70px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--panel-border);
    color: #fff;
    padding: 4px 8px;
    border-radius: 2px;
    font-family: var(--font-head);
    font-size: 0.85rem;
    text-align: center;
    outline: none;
}
.slipway-queue {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    padding: 12px;
    border: 1px solid var(--panel-border);
}
.queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.8rem;
}
.queue-item:last-child { border-bottom: none; }
.q-progress {
    font-size: 0.7rem;
    color: var(--amber);
    font-family: var(--font-head);
}

.target-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.target-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--panel-face);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
    box-shadow: var(--metal-inset);
}
.target-card:hover {
    border-color: rgba(0, 240, 255, 0.45);
    transform: translateX(2px);
}
.target-card .t-name { font-weight: 700; font-size: 0.9rem; color: #fff; }
.target-card .t-meta { font-size: 0.75rem; color: var(--text-muted); }
.target-card .t-badge {
    font-size: 0.6rem;
    padding: 3px 10px;
    border-radius: 2px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 240, 255, 0.1);
    color: var(--cyan);
    border: 1px solid rgba(0, 240, 255, 0.3);
    margin-left: auto;
}
.target-card .t-badge.hostile {
    color: var(--red);
    border-color: rgba(255, 51, 102, 0.4);
    background: rgba(255, 51, 102, 0.1);
}
.target-card .t-badge.owned {
    color: var(--green);
    border-color: rgba(0, 255, 170, 0.35);
    background: rgba(0, 255, 170, 0.08);
}

.slider-group { margin: 8px 0; }
.slider-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.slider-max {
    font-family: var(--font-head);
    font-size: 0.7rem;
    color: var(--cyan);
}
.slider-group input[type="range"] {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 6px;
}
.slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cyan);
    cursor: pointer;
    box-shadow: 0 0 8px var(--cyan);
}

.exchange-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.exchange-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.exchange-row label { min-width: 80px; color: var(--text-muted); }
.exchange-row select,
.exchange-row input {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid var(--panel-border);
    padding: 8px;
    border-radius: 2px;
    outline: none;
}
.exchange-row select:focus,
.exchange-row input:focus { border-color: var(--cyan); }

.payload-count {
    font-size: 0.7rem;
    color: var(--amber);
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 10px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

@media (max-width: 1180px) and (min-width: 769px) {
    .hud-header {
        grid-template-columns: minmax(170px, 0.95fr) minmax(260px, 1.5fr) minmax(150px, 0.85fr);
        gap: 10px 12px;
        padding: 8px 12px;
    }
    .brand-kicker { letter-spacing: 0.18em; }
    .resource-context { flex-basis: 96px; padding-right: 8px; }
    .resource-context-name { max-width: 110px; }
    .username { max-width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Phones: portrait ≤768 OR landscape short viewport (CSS width often >768) */
@media (max-width: 768px), (max-height: 520px) and (max-width: 1024px) {
    /* —— Auth: full-viewport game splash (not bottom drawer) —— */
    #auth-modal.auth-gate {
        align-items: stretch;
        justify-content: center;
        width: 100%;
        min-height: 100%;
        min-height: 100dvh;
        padding:
            max(16px, env(safe-area-inset-top, 0px))
            max(16px, env(safe-area-inset-right, 0px))
            max(16px, env(safe-area-inset-bottom, 0px))
            max(16px, env(safe-area-inset-left, 0px));
        background: #05080e;
        box-sizing: border-box;
    }
    #auth-modal.auth-gate .auth-atmosphere {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(ellipse 90% 55% at 50% -10%, rgba(0, 240, 255, 0.18), transparent 55%),
            radial-gradient(ellipse 70% 40% at 80% 90%, rgba(251, 191, 36, 0.08), transparent 50%),
            radial-gradient(circle at 20% 40%, rgba(0, 120, 180, 0.12), transparent 35%),
            #05080e;
    }
    #auth-modal.auth-gate .auth-atmosphere::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.55;
        background-image:
            radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.7), transparent),
            radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,0.45), transparent),
            radial-gradient(1.5px 1.5px at 44% 28%, rgba(0,240,255,0.8), transparent),
            radial-gradient(1px 1px at 61% 74%, rgba(255,255,255,0.5), transparent),
            radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,0.55), transparent),
            radial-gradient(1.5px 1.5px at 88% 58%, rgba(0,240,255,0.65), transparent),
            radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,0.4), transparent),
            radial-gradient(1px 1px at 52% 48%, rgba(255,255,255,0.35), transparent);
    }
    #auth-modal.auth-gate .modal-content.auth-card {
        transform: none !important;
        width: min(100%, 420px);
        max-width: 100%;
        max-height: none;
        margin: auto;
        border-radius: 4px;
        padding: 28px 22px 22px;
        border: 1px solid rgba(0, 240, 255, 0.35);
        background: rgba(10, 16, 24, 0.92);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.55);
    }
    #auth-modal.auth-gate .auth-brand-copy h2,
    #auth-modal.auth-gate #auth-title {
        font-size: 1.35rem;
        letter-spacing: 0.04em;
        line-height: 1.2;
    }
    #auth-modal.auth-gate input[type="text"],
    #auth-modal.auth-gate input[type="password"],
    #auth-modal.auth-gate input[type="email"] {
        min-height: 48px;
        font-size: 16px; /* avoid iOS zoom */
    }
    #auth-modal.auth-gate .auth-submit {
        min-height: 52px;
        font-size: 0.9rem;
    }

    /* Other modals: full-bleed bottom sheets with safe-area */
    .modal:not(#auth-modal) {
        align-items: flex-end;
        padding: 0;
    }
    .modal:not(#auth-modal) .modal-content {
        max-height: min(92dvh, 920px);
        height: auto;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        clip-path: none !important;
        transform: translateY(100%);
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal:not(#auth-modal).drawer-open .modal-content {
        transform: translateY(0);
    }
    .modal:not(#auth-modal) .modal-content h2 {
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        margin-bottom: 14px;
        padding-right: 36px;
    }
    .modal:not(#auth-modal) .modal-content .close-btn {
        font-size: 32px;
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .modal:not(#auth-modal) input,
    .modal:not(#auth-modal) select,
    .modal:not(#auth-modal) textarea,
    .modal:not(#auth-modal) .industrial-input,
    .modal:not(#auth-modal) .industrial-select,
    .deploy-ship-card input[type=number].deploy-ship-qty {
        min-height: 48px;
        font-size: 16px !important;
    }
    .facility-grid,
    .holo-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .building-card,
    .ship-card {
        padding: 12px;
    }
    .card-visual { height: 140px !important; }
    .btn-upgrade,
    .btn-rush,
    .btn-cancel,
    .btn-locked,
    .deploy-chip,
    .map-ctrl-btn {
        min-height: 48px;
    }
    .card-cost,
    .b-cost {
        gap: 8px;
    }
    #modal.modal-deploy .modal-content {
        max-width: 100% !important;
        width: 100% !important;
    }
    .deploy-theater-grid {
        grid-template-columns: 1fr !important;
    }
    .deploy-ships {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }
    .deploy-missions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .deploy-missions .deploy-mission {
        min-height: 48px;
        flex: 1 1 auto;
        padding: 10px 12px;
    }
    .deploy-actions {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .deploy-actions button {
        min-height: 48px;
        flex: 0 0 auto;
        width: 100%;
    }
    .deploy-mode-tabs {
        position: sticky;
        top: 0;
        z-index: 4;
    }
    .deploy-mode-tab {
        min-height: 42px;
    }
    .modal-battle-log .modal-content,
    .modal-settings .modal-content,
    .modal-profile .modal-content {
        max-width: 100% !important;
        width: 100% !important;
    }
    .battle-log-page {
        grid-template-columns: 1fr !important;
    }

    /* —— Map-first Android game shell —— */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    body.is-mobile,
    body.is-android-shell {
        overscroll-behavior: none;
        overflow-x: hidden;
    }
    .hud-overlay {
        --mobile-dock-h: 56px;
        --mobile-status-peek-h: 40px;
        --mobile-chrome-h: calc(var(--mobile-dock-h) + var(--mobile-status-peek-h) + env(safe-area-inset-bottom, 0px));
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas: "header" "center" "footer" !important;
        gap: 0;
        padding: 0;
        padding-top: env(safe-area-inset-top, 0px);
        height: 100dvh;
        max-height: 100dvh;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow: hidden;
    }
    .hud-overlay:has(#side-panel.hidden),
    .hud-overlay.hud-galaxy {
        grid-template-columns: 1fr !important;
        grid-template-areas: "header" "center" "footer" !important;
    }
    .hud-center {
        min-height: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }
    .hud-overlay.hud-galaxy .strategic-map:not(.hidden),
    body.is-mobile .strategic-map:not(.hidden),
    body.is-android-shell .strategic-map:not(.hidden) {
        flex: 1;
        min-height: 0;
        height: 100%;
    }

    /* Floating Zoom Out — never trapped in empire drawer */
    #zoom-out-btn:not(.hidden),
    body:has(#zoom-out-btn:not(.hidden)) .hud-left {
        padding-top: 0;
    }
    #zoom-out-btn:not(.hidden) {
        position: fixed !important;
        grid-area: unset !important;
        left: max(10px, env(safe-area-inset-left, 0px));
        top: auto;
        bottom: calc(148px + env(safe-area-inset-bottom, 0px));
        z-index: 42;
        min-height: 48px;
        min-width: 48px;
        padding: 12px 14px;
        gap: 8px;
        font-size: 0.65rem;
        border-radius: 8px;
        background: rgba(8, 14, 22, 0.92);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        align-items: center;
        justify-content: center;
    }

    /* Empire Navigator — full-height drawer + scrim (must share stacking context with drawer) */
    /* Do NOT put scrim on body::before — hud-overlay is z-index 10 and would sit under a body scrim,
       dimming the drawer and stealing planet taps. */
    .hud-overlay:has(#colonies-panel.open)::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(0, 0, 0, 0.5);
        pointer-events: auto;
    }
    /* Keep hamburger + empire drawer above the scrim */
    .hud-overlay:has(#colonies-panel.open) .hud-header {
        position: relative;
        z-index: 56;
    }
    .hud-overlay:has(#colonies-panel.open) #mobile-menu-btn {
        position: relative;
        z-index: 57;
    }
    .hud-left {
        display: none;
        position: fixed !important;
        top: 0;
        left: 0;
        width: min(320px, 92vw);
        height: 100dvh;
        max-height: 100dvh;
        padding:
            calc(12px + env(safe-area-inset-top, 0px))
            12px
            calc(12px + env(safe-area-inset-bottom, 0px))
            max(12px, env(safe-area-inset-left, 0px));
        background: rgba(8, 12, 18, 0.98);
        backdrop-filter: blur(10px);
        border-right: 1px solid rgba(0, 240, 255, 0.28);
        z-index: 55;
        transform: translateX(-105%);
        transition: transform 0.28s ease;
        overflow: hidden;
        clip-path: none !important;
        border-radius: 0 !important;
        gap: 10px;
        box-sizing: border-box;
        opacity: 1;
        filter: none;
        pointer-events: auto;
    }
    .hud-left.open {
        transform: translateX(0);
        display: flex !important;
        flex-direction: column;
    }
    .hud-left .glass-panel {
        clip-path: none;
        border-radius: 4px;
        opacity: 1;
        filter: none;
    }
    .hud-left .colony-card {
        min-height: 52px;
        padding: 12px;
        margin-bottom: 8px;
        position: relative;
        z-index: 1;
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 240, 255, 0.15);
    }
    .hud-left .colony-map-btn {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 0.65rem;
        pointer-events: auto;
    }
    .hud-left .audio-controls-panel {
        min-height: 48px;
        gap: 10px;
    }
    .hud-left .audio-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    /* Active Planet — bottom sheet above dock + status peek */
    .hud-right {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: calc(132px + env(safe-area-inset-bottom, 0px));
        top: auto;
        width: 100%;
        max-width: 100vw;
        max-height: min(42vh, 380px);
        z-index: 45;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 14px 14px;
        border-radius: 16px 16px 0 0 !important;
        clip-path: none !important;
        border: 1px solid rgba(0, 240, 255, 0.3);
        border-bottom: none;
        background: rgba(8, 14, 22, 0.97);
        box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.5);
        gap: 12px;
    }
    .hud-right::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 2px;
        background: rgba(0, 240, 255, 0.35);
        flex-shrink: 0;
    }
    .hud-right.hidden { display: none !important; }
    .hud-right .data-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .hud-right .btn-attack {
        min-height: 48px;
        font-size: 0.8rem;
    }
    .hud-right .ship-item {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    .hud-right .fleet-item-detail {
        min-height: 48px;
        padding: 10px;
    }

    /* Footer: compact status peek above evenly-fitted icon dock */
    .hud-footer {
        flex-direction: column-reverse;
        gap: 0;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(6, 10, 16, 0.98);
        border-top: 1px solid rgba(0, 240, 255, 0.22);
        z-index: 46;
        max-width: 100vw;
        width: 100%;
        overflow: visible;
        flex-shrink: 0;
    }
    .hud-footer-dock-row {
        padding: 2px 4px 4px;
        order: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }
    .dock-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        height: var(--mobile-dock-h);
        padding: 2px 8px;
        border-radius: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        box-sizing: border-box;
    }
    .dock-container::-webkit-scrollbar { display: none; }
    .dock-container::before { display: none; }
    .nav-btn {
        flex: 0 0 auto;
        width: 56px;
        min-width: 56px;
        max-width: none;
        height: 100%;
        min-height: 48px;
        padding: 4px 2px;
        font-size: 0.45rem;
        letter-spacing: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: 10px;
        box-sizing: border-box;
        scroll-snap-align: start;
        touch-action: manipulation;
    }
    .nav-btn span { display: none; }
    .nav-btn i { font-size: 1.2rem; line-height: 1; }
    .nav-btn.primary {
        width: 60px;
        min-width: 60px;
        border-color: rgba(251, 191, 36, 0.45);
    }
    .nav-btn.hidden { display: none !important; }
    .battle-log-badge {
        top: 2px;
        right: 2px;
        min-width: 14px;
        height: 14px;
        font-size: 0.5rem;
        padding: 0 3px;
    }

    /* Single compact status peek (2 summary cells); expands to full queues */
    .hud-footer-status-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: none;
        border-bottom: 1px solid rgba(0, 240, 255, 0.14);
        background: rgba(4, 8, 12, 0.92);
        max-height: var(--mobile-status-peek-h);
        transition: max-height 0.28s ease;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
    }
    .status-sheet-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10px;
        flex-shrink: 0;
        pointer-events: none;
    }
    .status-sheet-handle span {
        width: 36px;
        height: 3px;
        border-radius: 2px;
        background: rgba(0, 240, 255, 0.35);
    }
    .status-sheet-panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        min-height: 0;
        flex: 1 1 auto;
        width: 100%;
        overflow: hidden;
    }
    .construction-queue-bar,
    .fleet-status-bar {
        flex: none;
        width: auto;
        max-width: none;
        min-width: 0;
        max-height: none;
        height: auto;
        padding: 0 10px 6px;
        margin: 0;
        border-radius: 0;
        border: none;
        border-right: 1px solid rgba(0, 240, 255, 0.12);
        background: transparent !important;
        box-shadow: none !important;
        clip-path: none !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .fleet-status-bar { border-right: none; }
    .fleet-status-bar-head {
        min-height: 28px;
        padding: 0;
        gap: 6px;
    }
    .fleet-status-bar-title {
        font-size: 0.58rem;
        letter-spacing: 0.08em;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fleet-status-bar-title .status-title-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fleet-status-bar-count {
        font-size: 0.62rem;
        min-width: 20px;
        padding: 2px 6px;
    }
    /* Collapsed: hide chip strips — summary heads only (mobile) */
    body.is-mobile:not(.status-sheet-open) .hud-footer-status-row .fleet-status-strip,
    body.is-android-shell:not(.status-sheet-open) .hud-footer-status-row .fleet-status-strip {
        display: none !important;
    }
    .construction-queue-chip,
    .fleet-status-chip {
        min-width: 140px;
        max-width: 180px;
        font-size: 0.7rem;
        padding: 6px 8px;
        min-height: 0;
        scroll-snap-align: start;
    }
    .fleet-status-chip .chip-ships,
    .construction-queue-chip .chip-target {
        display: none; /* compact chips when expanded */
    }
    .fleet-status-empty {
        font-size: 0.7rem;
        padding: 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Expanded sheet */
    body.is-mobile.status-sheet-open .hud-overlay,
    body.is-android-shell.status-sheet-open .hud-overlay {
        --mobile-status-peek-h: min(38vh, 260px);
    }
    body.is-mobile.status-sheet-open .hud-footer-status-row,
    body.is-android-shell.status-sheet-open .hud-footer-status-row {
        max-height: var(--mobile-status-peek-h);
        overflow: hidden;
        cursor: default;
    }
    body.is-mobile.status-sheet-open .status-sheet-panels,
    body.is-android-shell.status-sheet-open .status-sheet-panels {
        grid-template-columns: 1fr;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        max-height: calc(var(--mobile-status-peek-h) - 10px);
    }
    body.is-mobile.status-sheet-open .construction-queue-bar,
    body.is-mobile.status-sheet-open .fleet-status-bar,
    body.is-android-shell.status-sheet-open .construction-queue-bar,
    body.is-android-shell.status-sheet-open .fleet-status-bar {
        border-right: none;
        border-bottom: 1px solid rgba(0, 240, 255, 0.1);
        padding: 6px 12px 8px;
        max-height: none;
    }
    body.is-mobile.status-sheet-open .fleet-status-strip,
    body.is-android-shell.status-sheet-open .fleet-status-strip {
        display: flex !important;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        max-height: none;
    }
    body.is-mobile.status-sheet-open .fleet-status-chip .chip-ships,
    body.is-mobile.status-sheet-open .construction-queue-chip .chip-target,
    body.is-android-shell.status-sheet-open .fleet-status-chip .chip-ships,
    body.is-android-shell.status-sheet-open .construction-queue-chip .chip-target {
        display: block;
    }

    /* Keep floating chrome clear of compact footer */
    #zoom-out-btn:not(.hidden) {
        bottom: calc(var(--mobile-chrome-h, 100px) + 12px) !important;
    }
    .hud-right {
        bottom: calc(var(--mobile-chrome-h, 100px) + 4px) !important;
        max-height: min(40vh, 360px);
    }
    .fleet-route-legend {
        display: none !important;
    }
    body.is-mobile.map-legend-open .fleet-route-legend:not(.hidden),
    body.is-android-shell.map-legend-open .fleet-route-legend:not(.hidden) {
        display: block !important;
        left: 12px;
        right: auto;
        bottom: calc(var(--mobile-chrome-h, 100px) + 12px);
        max-width: 150px;
        padding: 8px 10px;
        font-size: 0.7rem;
        z-index: 40;
    }

    /* —— Stacked compact status strip (no resource overlap) —— */
    .hud-header {
        display: grid !important;
        grid-template-columns: 44px minmax(0, auto) minmax(0, 1fr) auto;
        grid-template-areas:
            "menu brand colony profile"
            "res res res res";
        gap: 6px 8px;
        padding: 8px 10px;
        min-height: 0;
        overflow: visible;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        align-items: center;
    }
    #mobile-menu-btn,
    .header-menu-btn {
        grid-area: menu;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        margin: 0;
        flex-shrink: 0;
    }
    .brand-zone {
        grid-area: brand;
        gap: 8px;
        min-width: 0;
        max-width: 9.5rem;
    }
    .brand-mark { width: 32px; height: 32px; }
    .brand-icon { font-size: 0.9rem; }
    .brand-kicker {
        letter-spacing: 0.16em;
        font-size: 0.68rem;
        line-height: 1.1;
    }
    .title-text,
    .brand-zone .status-tag { display: none !important; }

    /* Resource bar dissolves into header grid: colony chip + 4-col strip */
    .resource-bar {
        display: contents;
        border: none;
        background: none;
        box-shadow: none;
        padding: 0;
        min-width: 0;
    }
    .resource-context {
        grid-area: colony;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        min-width: 0;
        max-width: 100%;
        padding: 4px 8px;
        border-right: none;
        border: 1px solid rgba(0, 240, 255, 0.18);
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.35);
        flex: none;
    }
    .resource-context-label {
        font-size: 0.48rem;
        letter-spacing: 0.1em;
    }
    .resource-context-name {
        max-width: none;
        width: 100%;
        font-size: 0.72rem;
    }
    .resource-readout {
        grid-area: res;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch;
        flex: none;
        width: 100%;
        min-width: 0;
        padding: 0;
    }
    .res-item {
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 6px 7px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(0, 240, 255, 0.16);
        border-radius: 2px;
    }
    .res-item i {
        width: 12px;
        font-size: 0.75rem;
    }
    .res-meta {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    .res-item .label {
        display: block !important;
        font-size: 0.48rem;
        letter-spacing: 0.06em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .res-figures {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    .res-item .value {
        display: block;
        width: 100%;
        max-width: 100%;
        font-size: clamp(0.62rem, 2.6vw, 0.82rem);
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }
    .res-item .cap { display: none !important; }

    .user-profile {
        grid-area: profile;
        gap: 6px;
        justify-content: flex-end;
        min-width: 0;
    }
    .user-info {
        text-align: right;
        min-width: 0;
    }
    .username {
        display: none;
    }
    .user-profile .user-level {
        display: inline-block !important;
        max-width: 4.8rem;
        padding: 4px 7px;
        margin: 0;
        font-size: 0.55rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid rgba(251, 191, 36, 0.35);
        border-radius: 2px;
        background: rgba(251, 191, 36, 0.08);
        vertical-align: middle;
    }
    .user-actions {
        padding-left: 0;
        border-left: none;
        gap: 4px;
        flex-shrink: 0;
    }
    .user-actions .btn-icon,
    .user-actions .btn-icon-danger {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    .card-visual { height: 150px; }
    .facility-grid, .holo-grid { grid-template-columns: 1fr; }

    /* Map HUD: region bar + tools toggle; panel collapses */
    .map-hud-top {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 8px;
        pointer-events: none;
        max-width: 100%;
        overflow: visible;
    }
    .map-hud-top > * { pointer-events: auto; }
    .map-region-bar {
        flex: 1 1 auto;
        min-height: 48px;
        min-width: 0;
        gap: 4px;
    }
    .map-region-meta { min-width: 0; }
    .map-region-kicker { display: none; }
    .map-region-label { font-size: 0.78rem; }
    .map-region-nav,
    .map-icon-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }
    .map-tools-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 48px;
        min-width: 48px;
        padding: 0 14px;
        flex-shrink: 0;
    }
    .map-tools-panel {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 60;
        flex-direction: column;
        gap: 10px;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        max-height: min(52vh, 420px);
        overflow-y: auto;
        background: rgba(8, 14, 22, 0.98);
        border: 1px solid rgba(0, 240, 255, 0.35);
        border-bottom: none;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55);
        pointer-events: auto;
    }
    .map-tools-panel::before {
        content: "";
        align-self: center;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 240, 255, 0.35);
        margin-bottom: 4px;
    }
    .strategic-map.map-tools-open .map-tools-panel {
        display: flex;
    }
    .map-tools-panel .map-jump-bar,
    .map-tools-panel .map-layer-toggles,
    .map-tools-panel .map-hud-actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }
    .map-tools-panel .map-layer-btn,
    .map-tools-panel .map-ctrl-btn,
    .map-tools-panel .map-jump-go {
        min-height: 48px;
        padding: 10px 12px;
        font-size: 0.7rem;
    }
    .map-tools-panel .map-jump-field input {
        min-height: 48px;
        width: 3.6rem;
        font-size: 16px;
    }
    .strategic-map-hud {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    .map-inspect {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        max-height: min(36vh, 280px);
        border-radius: 12px;
    }
    .map-inspect-actions .map-ctrl-btn {
        min-height: 48px;
        min-width: 48px;
    }

    /* Bottom nav — Android active underline */
    .nav-btn.is-active,
    .nav-btn.active-view {
        color: var(--cyan);
        background: rgba(0, 240, 255, 0.1);
    }
    .nav-btn.is-active::after,
    .nav-btn.active-view::after {
        content: "";
        position: absolute;
        left: 20%;
        right: 20%;
        bottom: 4px;
        height: 2px;
        background: var(--cyan);
        border-radius: 1px;
    }
    .dock-container .nav-btn { position: relative; }
}
@media (max-width: 480px) {
    .hud-overlay {
        --mobile-dock-h: 52px;
        --mobile-status-peek-h: 38px;
    }
    .nav-btn i { font-size: 1.15rem; }
    .hud-header {
        grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.1fr) auto;
        gap: 5px 6px;
        padding: 6px 8px;
    }
    .brand-zone { max-width: 7.5rem; }
    .brand-mark { display: none; }
    .user-actions .btn-icon,
    .user-actions .btn-icon-danger {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .res-item { padding: 5px 5px; gap: 4px; }
    .res-item .label { font-size: 0.42rem; }
    .res-item .value { font-size: 0.68rem; }
    .construction-queue-chip,
    .fleet-status-chip { min-width: 132px; max-width: 160px; font-size: 0.68rem; }
    .map-tools-toggle span { display: none; }
    .deploy-ship-grid,
    .deploy-ships {
        grid-template-columns: 1fr !important;
    }
    #zoom-out-btn:not(.hidden) span { display: none; }
    #zoom-out-btn:not(.hidden) {
        width: 48px;
        padding: 12px;
    }
}

/* Landscape phone: ultra-compact chrome so stage breathes */
@media (max-height: 520px) and (max-width: 1024px) {
    .hud-overlay {
        --mobile-dock-h: 48px;
        --mobile-status-peek-h: 34px;
    }
    .hud-header {
        padding: 4px 8px;
        gap: 4px 6px;
    }
    .res-item { padding: 4px 6px; }
    .res-item .label { display: none !important; }
    .resource-context-label { display: none; }
    .user-actions .btn-icon,
    .user-actions .btn-icon-danger,
    #mobile-menu-btn,
    .header-menu-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .nav-btn i { font-size: 1.05rem; }
    .status-sheet-handle { height: 8px; }
    body.is-mobile.status-sheet-open .hud-overlay,
    body.is-android-shell.status-sheet-open .hud-overlay {
        --mobile-status-peek-h: min(48vh, 220px);
    }
    #zoom-out-btn:not(.hidden) span { display: none; }
    #zoom-out-btn:not(.hidden) {
        min-height: 40px;
        padding: 8px 10px;
    }
    .map-region-bar { min-height: 40px; }
    .modal:not(#auth-modal) .modal-content {
        max-height: 85dvh;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

#mobile-menu-btn {
    display: none;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 240, 255, 0.28);
    color: var(--cyan);
    width: 34px; height: 34px; min-width: 34px;
    border-radius: 2px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
#mobile-menu-btn:hover {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.12);
}

/* JS phone shell (landscape >768px): force stacked header even if media lags */
body.is-mobile .hud-header,
body.is-android-shell .hud-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, auto) minmax(0, 1fr) auto;
    grid-template-areas:
        "menu brand colony profile"
        "res res res res";
    gap: 6px 8px;
    padding: 8px 10px;
    min-height: 0;
    overflow: visible;
    align-items: center;
}
body.is-mobile #mobile-menu-btn,
body.is-android-shell #mobile-menu-btn {
    grid-area: menu;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
body.is-mobile .brand-zone,
body.is-android-shell .brand-zone { grid-area: brand; max-width: 9.5rem; }
body.is-mobile .title-text,
body.is-mobile .brand-zone .status-tag,
body.is-android-shell .title-text,
body.is-android-shell .brand-zone .status-tag { display: none !important; }
body.is-mobile .resource-bar,
body.is-android-shell .resource-bar {
    display: contents;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
}
body.is-mobile .resource-context,
body.is-android-shell .resource-context {
    grid-area: colony;
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border-right: none;
    border: 1px solid rgba(0, 240, 255, 0.18);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
    flex: none;
}
body.is-mobile .resource-readout,
body.is-android-shell .resource-readout {
    grid-area: res;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
    flex: none;
}
body.is-mobile .res-item,
body.is-android-shell .res-item {
    flex: none;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 6px 7px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 240, 255, 0.16);
}
body.is-mobile .res-item .value,
body.is-android-shell .res-item .value {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.62rem, 2.6vw, 0.82rem);
}
body.is-mobile .res-item .cap,
body.is-android-shell .res-item .cap { display: none !important; }
body.is-mobile .user-profile,
body.is-android-shell .user-profile { grid-area: profile; }
body.is-mobile .username,
body.is-android-shell .username { display: none; }
body.is-mobile .user-profile .user-level,
body.is-android-shell .user-profile .user-level {
    display: inline-block !important;
    max-width: 4.8rem;
    padding: 4px 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
    font-size: 0.55rem;
}

/* Phone shell chrome (JS class) — dock / sheets / overflow */
body.is-mobile,
body.is-android-shell {
    overflow-x: hidden;
}
body.is-mobile .hud-overlay,
body.is-android-shell .hud-overlay {
    grid-template-columns: 1fr !important;
    grid-template-areas: "header" "center" "footer" !important;
    gap: 0;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}
body.is-mobile .hud-footer,
body.is-android-shell .hud-footer {
    flex-direction: column-reverse;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.is-mobile .dock-container .nav-btn span,
body.is-android-shell .dock-container .nav-btn span {
    display: none;
}
body.is-mobile .dock-container,
body.is-android-shell .dock-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
body.is-mobile .dock-container::-webkit-scrollbar,
body.is-android-shell .dock-container::-webkit-scrollbar {
    display: none;
}
body.is-mobile .nav-btn,
body.is-android-shell .nav-btn {
    flex: 0 0 auto !important;
    width: 56px;
    min-width: 56px;
    max-width: none;
    min-height: 48px;
    scroll-snap-align: start;
}
body.is-mobile .hud-footer-status-row .fleet-status-strip,
body.is-android-shell .hud-footer-status-row .fleet-status-strip {
    display: none !important;
}
body.is-mobile.status-sheet-open .hud-footer-status-row .fleet-status-strip,
body.is-android-shell.status-sheet-open .hud-footer-status-row .fleet-status-strip {
    display: flex !important;
}
body.is-mobile .status-sheet-handle,
body.is-android-shell .status-sheet-handle {
    display: flex;
}
body.is-mobile .fleet-route-legend,
body.is-android-shell .fleet-route-legend {
    display: none !important;
}
body.is-mobile #zoom-out-btn:not(.hidden),
body.is-android-shell #zoom-out-btn:not(.hidden) {
    position: fixed !important;
    grid-area: unset !important;
    z-index: 42;
}
body.is-mobile .modal:not(#auth-modal) .modal-content,
body.is-android-shell .modal:not(#auth-modal) .modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    clip-path: none !important;
}
body.is-mobile .facility-grid,
body.is-mobile .holo-grid,
body.is-android-shell .facility-grid,
body.is-android-shell .holo-grid {
    grid-template-columns: 1fr !important;
}

/* —— Mobile SYSTEM / PLANET: keep chrome, frame 3D in center (no overlay blocking) —— */
/* Map HUD not needed in 3D views */
body.is-mobile.view-system .strategic-map,
body.is-mobile.view-planet .strategic-map,
body.is-android-shell.view-system .strategic-map,
body.is-android-shell.view-planet .strategic-map,
body.is-mobile.view-system .fleet-route-legend,
body.is-mobile.view-planet .fleet-route-legend,
body.is-android-shell.view-system .fleet-route-legend,
body.is-android-shell.view-planet .fleet-route-legend {
    display: none !important;
}
/* Active Planet: thin peek above dock by default; tap to expand (does not cover globe center) */
body.is-mobile.view-planet .hud-right:not(.hidden),
body.is-android-shell.view-planet .hud-right:not(.hidden) {
    max-height: 56px;
    overflow: hidden;
    bottom: calc(var(--mobile-chrome-h, 100px) + 4px) !important;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
}
body.is-mobile.view-planet .hud-right:not(.hidden) > div:not(:first-child),
body.is-android-shell.view-planet .hud-right:not(.hidden) > div:not(:first-child),
body.is-mobile.view-planet .hud-right:not(.hidden) .data-grid,
body.is-android-shell.view-planet .hud-right:not(.hidden) .data-grid,
body.is-mobile.view-planet .hud-right:not(.hidden) .planet-actions,
body.is-android-shell.view-planet .hud-right:not(.hidden) .planet-actions {
    display: none !important;
}
body.is-mobile.view-planet.planet-sheet-open .hud-right:not(.hidden),
body.is-android-shell.view-planet.planet-sheet-open .hud-right:not(.hidden) {
    max-height: min(38vh, 300px);
    overflow-y: auto;
    cursor: default;
}
body.is-mobile.view-planet.planet-sheet-open .hud-right:not(.hidden) > div,
body.is-android-shell.view-planet.planet-sheet-open .hud-right:not(.hidden) > div,
body.is-mobile.view-planet.planet-sheet-open .hud-right:not(.hidden) .data-grid,
body.is-android-shell.view-planet.planet-sheet-open .hud-right:not(.hidden) .data-grid,
body.is-mobile.view-planet.planet-sheet-open .hud-right:not(.hidden) .planet-actions,
body.is-android-shell.view-planet.planet-sheet-open .hud-right:not(.hidden) .planet-actions {
    display: block !important;
}
body.is-mobile.view-planet.planet-sheet-open .hud-right:not(.hidden) .data-grid,
body.is-android-shell.view-planet.planet-sheet-open .hud-right:not(.hidden) .data-grid {
    display: grid !important;
}
/* Zoom Out: top-left corner, clear of globe + safe-area */
body.is-mobile.view-system #zoom-out-btn:not(.hidden),
body.is-mobile.view-planet #zoom-out-btn:not(.hidden),
body.is-android-shell.view-system #zoom-out-btn:not(.hidden),
body.is-android-shell.view-planet #zoom-out-btn:not(.hidden) {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
    bottom: auto !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    z-index: 42;
    min-width: 48px;
    min-height: 48px;
    padding: 12px 14px;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.45); border-radius: 1px; }
.hidden { display: none !important; }

/* Galaxy / planet / header resource hover tooltips */
#tooltip,
#res-tooltip {
    position: fixed;
    z-index: 1500;
    min-width: 180px;
    max-width: 280px;
    padding: 10px 12px;
    pointer-events: none;
    background: rgba(22, 26, 32, 0.94);
    border: 1px solid rgba(120, 140, 160, 0.28);
    border-radius: 2px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.85rem;
}
#tooltip::before,
#res-tooltip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--edge-cyan, #00f0ff), transparent 70%);
    opacity: 0.7;
}
#tooltip .tip-title,
#res-tooltip .tip-title {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--panel-border);
}
#res-tooltip.res-tip-coins .tip-title { color: var(--amber); }
#res-tooltip.res-tip-coins::before {
    background: linear-gradient(90deg, var(--amber), transparent 70%);
}
#res-tooltip .tip-body {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}
#tooltip .tip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 0.8rem;
}
#tooltip .tip-label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}
#tooltip .tip-value { color: #fff; font-weight: 700; }
#tooltip .tip-status-owned { color: var(--cyan); }
#tooltip .tip-status-mixed { color: var(--amber); }
#tooltip .tip-status-hostile { color: var(--red); }
#tooltip .tip-status-empty { color: var(--text-muted); }
#tooltip .tip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
#tooltip .tip-chip {
    font-size: 0.6rem;
    font-family: var(--font-head);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.35);
}

/* --- Strategic 2D galaxy map --- */
.hud-center {
    grid-area: center;
    position: relative;
    min-width: 0;
    min-height: 0;
    pointer-events: none;
}
.strategic-map {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: auto;
    border: 1px solid rgba(0, 240, 255, 0.18);
    border-radius: 2px;
    overflow: hidden;
    background: #05080f;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55);
}
.strategic-map.hidden { display: none !important; }
#strategic-map-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}
#webgl-canvas.map-hidden {
    opacity: 0;
    pointer-events: none;
}
.strategic-map-hud {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 10px;
    gap: 8px;
}
.map-hud-top {
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
}
/* Legacy Galaxy/Region mode theater — removed from markup; hide if stale HTML remains */
.map-mode-theater,
.map-mode-switch,
.map-mode-caption,
#map-mode-overview,
#map-mode-region {
    display: none !important;
}
.map-region-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background:
        linear-gradient(180deg, rgba(12, 20, 30, 0.94), rgba(8, 14, 22, 0.9));
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 2px;
    min-width: min(240px, 100%);
    box-shadow: inset 0 1px 0 rgba(0, 240, 255, 0.08);
}
.map-region-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 128px;
    padding: 0 6px;
    flex: 1 1 auto;
}
.map-region-kicker {
    font-family: var(--font-head);
    font-size: 0.5rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.map-region-label {
    font-family: var(--font-head);
    font-size: 0.84rem;
    letter-spacing: 0.7px;
    color: var(--amber);
    text-align: center;
    white-space: nowrap;
}
.map-region-nav:not(:disabled) {
    border-color: rgba(251, 191, 36, 0.45);
    color: var(--amber);
    background: rgba(251, 191, 36, 0.08);
}
.map-region-nav:not(:disabled):hover {
    background: rgba(251, 191, 36, 0.18);
    color: #fff;
}
.map-jump-bar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(8, 14, 22, 0.9);
    border: 1px solid rgba(0, 240, 255, 0.26);
    border-radius: 2px;
}
.map-jump-kicker {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 2px;
}
.map-jump-field {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
    font-family: var(--font-head);
    font-size: 0.62rem;
}
.map-jump-field input {
    width: 3.2rem;
    appearance: textfield;
    -moz-appearance: textfield;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 240, 255, 0.28);
    color: var(--cyan);
    font-family: var(--font-mono, Rajdhani, sans-serif);
    font-size: 0.72rem;
    padding: 5px 5px;
    border-radius: 1px;
}
.map-jump-field input::-webkit-outer-spin-button,
.map-jump-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.map-jump-bar .map-ctrl-btn,
.map-jump-go {
    padding: 6px 11px;
    font-size: 0.58rem;
    border-color: rgba(251, 191, 36, 0.5);
    color: var(--amber);
}
.map-minimap {
    display: none !important;
}
/* Broken overview redesign chrome — permanently suppressed */
.map-region-selector,
.map-region-picker,
.map-debug-badge {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.map-debug-badge.is-visible {
    display: none !important;
}
.map-minimap canvas {
    display: block;
    width: 148px;
    height: 148px;
    border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 2px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(0, 240, 255, 0.06), transparent 60%),
        rgba(6, 10, 16, 0.94);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 10px 28px rgba(0, 0, 0, 0.4),
        inset 0 0 24px rgba(0, 240, 255, 0.04);
    cursor: crosshair;
}
.map-minimap-label {
    display: block;
    margin-top: 5px;
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(0, 240, 255, 0.7);
    text-align: center;
}
.strategic-map.launch-cinematic {
    cursor: default;
}
.strategic-map.launch-cinematic #strategic-map-canvas {
    pointer-events: none;
}
.map-cinematic-skip {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 12;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-family: var(--font-head);
    font-size: 0.68rem;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #e8eef5;
    background: rgba(8, 14, 22, 0.92);
    border: 1px solid rgba(0, 240, 255, 0.45);
    border-radius: 2px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.map-cinematic-skip.hidden {
    display: none;
}
.map-cinematic-skip:hover {
    background: rgba(0, 240, 255, 0.16);
    color: #fff;
}
body.launch-cinematic-3d #webgl-canvas {
    pointer-events: none;
}
/* Free the viewport during launch cinematic — restore when class removed */
body.launch-cinematic-3d #side-panel,
body.launch-cinematic-3d #colonies-panel {
    display: none !important;
    pointer-events: none !important;
}
/* Hide dock + construction/fleet footer so ships aren't clipped into HUD clutter */
body.launch-cinematic-3d .hud-footer {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.launch-cine-caption {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 40;
    padding: 10px 20px;
    font-family: var(--font-ui, Rajdhani, sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(232, 238, 245, 0.95);
    background: rgba(8, 14, 22, 0.9);
    border: 1px solid rgba(0, 240, 255, 0.42);
    border-radius: 2px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.12);
}
.launch-cine-caption.hidden {
    display: none;
}
/* Brief soft cyan flash when fleet commits into hyperspace (~40% warp) */
body.launch-cine-warp-flash::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 35;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 58% 42%,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(0, 240, 255, 0.14) 28%,
        rgba(0, 240, 255, 0.04) 52%,
        transparent 72%
    );
    animation: launch-cine-flash-fade 320ms ease-out forwards;
}
@keyframes launch-cine-flash-fade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* —— Mobile attack theatre (temporary full-bleed during launch-cinematic-3d only) —— */
body.is-mobile.launch-cinematic-3d .hud-footer,
body.is-android-shell.launch-cinematic-3d .hud-footer,
body.is-mobile.launch-cinematic-3d .dock-container,
body.is-android-shell.launch-cinematic-3d .dock-container,
body.is-mobile.launch-cinematic-3d .hud-footer-status-row,
body.is-android-shell.launch-cinematic-3d .hud-footer-status-row,
body.is-mobile.launch-cinematic-3d .hud-right,
body.is-android-shell.launch-cinematic-3d .hud-right,
body.is-mobile.launch-cinematic-3d #zoom-out-btn,
body.is-android-shell.launch-cinematic-3d #zoom-out-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.is-mobile.launch-cinematic-3d .hud-header,
body.is-android-shell.launch-cinematic-3d .hud-header {
    opacity: 0.28 !important;
    pointer-events: none !important;
}
body.is-mobile.launch-cinematic-3d .hud-header .resource-bar,
body.is-android-shell.launch-cinematic-3d .hud-header .resource-bar {
    visibility: hidden !important;
}
body.is-mobile.launch-cinematic-3d #webgl-canvas,
body.is-android-shell.launch-cinematic-3d #webgl-canvas {
    inset: 0 !important;
}
body.is-mobile.launch-cinematic-3d .map-cinematic-skip,
body.is-android-shell.launch-cinematic-3d .map-cinematic-skip {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: auto;
    left: auto;
    z-index: 60;
    min-height: 48px;
    min-width: 48px;
    padding: 12px 16px;
    font-size: 0.75rem;
    border-radius: 8px;
}
body.is-mobile.launch-cinematic-3d .launch-cine-caption,
body.is-android-shell.launch-cinematic-3d .launch-cine-caption {
    left: 50%;
    right: auto;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    max-width: min(92vw, 420px);
    white-space: normal;
    text-align: center;
    font-family: var(--font-head, Orbitron, sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e8f9ff;
    border-color: rgba(0, 240, 255, 0.55);
    padding: 12px 16px;
    border-radius: 8px;
    line-height: 1.35;
}
body.is-mobile.launch-cine-warp-flash::after,
body.is-android-shell.launch-cine-warp-flash::after {
    background: radial-gradient(
        ellipse at 50% 42%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(0, 240, 255, 0.18) 26%,
        rgba(0, 240, 255, 0.06) 50%,
        transparent 74%
    );
}
.strategic-map.is-loading-region .map-region-bar .map-region-nav,
.map-region-nav:disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: wait;
}
.strategic-map.is-loading-region #strategic-map-canvas {
    opacity: 0.72;
    transition: opacity 0.15s ease;
}
.strategic-map.is-diving-region #strategic-map-canvas {
    filter: brightness(1.08) saturate(1.1);
    transition: filter 0.18s ease;
}
.map-icon-btn {
    appearance: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 240, 255, 0.32);
    background: rgba(0, 0, 0, 0.4);
    color: var(--cyan);
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.map-icon-btn:hover {
    background: rgba(0, 240, 255, 0.16);
    color: #fff;
}
.map-layer-toggles {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    background: rgba(8, 14, 22, 0.88);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 2px;
}
.map-layer-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-head);
    font-size: 0.58rem;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 7px 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 1px;
}
.map-layer-btn.is-on {
    color: #dff9ff;
    border-color: rgba(0, 240, 255, 0.3);
    background: rgba(0, 240, 255, 0.1);
}
.map-layer-btn[data-layer="belts"].is-on {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
}
.map-hud-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}
.map-ctrl-btn {
    pointer-events: auto;
    padding: 8px 13px;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--cyan);
    background:
        linear-gradient(180deg, rgba(12, 20, 30, 0.95), rgba(8, 14, 22, 0.9));
    border: 1px solid rgba(0, 240, 255, 0.38);
    border-radius: 2px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(0, 240, 255, 0.08);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.map-ctrl-btn:hover {
    background: rgba(0, 240, 255, 0.16);
    color: #fff;
    border-color: rgba(0, 240, 255, 0.55);
}
.map-ctrl-btn.primary {
    border-color: rgba(251, 191, 36, 0.5);
    color: var(--amber);
}
.map-inspect {
    pointer-events: auto;
    position: relative;
    z-index: 6;
    align-self: flex-start;
    width: min(360px, calc(100% - 8px));
    background: linear-gradient(165deg, rgba(10, 16, 24, 0.97), rgba(6, 10, 16, 0.95));
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-left: 2px solid var(--cyan);
    border-radius: 2px;
    padding: 10px 12px 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4);
    max-height: min(52vh, 460px);
    overflow: auto;
}
/* When a selection panel is open, lift the whole map above fixed Fleet tracks legend */
.strategic-map.has-inspect {
    z-index: 55;
}
body.map-inspect-open .fleet-route-legend {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.map-inspect.hidden { display: none !important; }
.map-inspect.is-belt { border-left-color: #f59e0b; }
.map-inspect.is-region { border-left-color: #7dd3fc; }
.map-inspect-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.map-inspect-kicker {
    font-family: var(--font-head);
    font-size: 0.52rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.map-inspect-title {
    font-family: var(--font-head);
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 0.4px;
}
.map-inspect-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.map-inspect-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.map-inspect-row strong {
    color: var(--text-main);
    font-family: var(--font-head);
    font-weight: 600;
}
.map-planet-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.map-planet-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    width: 100%;
}
.map-planet-card:hover {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(0, 240, 255, 0.08);
}
.map-planet-card .mp-name {
    font-family: var(--font-head);
    font-size: 0.78rem;
    color: #fff;
}
.map-planet-card .mp-meta {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.map-planet-card .mp-badge {
    font-family: var(--font-head);
    font-size: 0.58rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.15);
}
.map-planet-card .mp-badge.own { color: var(--cyan); border-color: rgba(0,240,255,0.35); }
.map-planet-card .mp-badge.empty { color: #86efac; border-color: rgba(134,239,172,0.35); }
.map-planet-card .mp-badge.hostile { color: #fb7185; border-color: rgba(251,113,133,0.35); }
.map-inspect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.map-inspect-actions .map-ctrl-btn {
    flex: 1 1 auto;
    min-width: 110px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 900px) {
    .map-hud-actions { margin-left: 0; }
    .map-inspect { width: min(100%, 360px); max-height: 38vh; }
}

/* --- Deploy Theater --- */
#modal.modal-deploy .modal-content {
    max-width: 760px;
    width: min(760px, 96vw);
}
.deploy-theater {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.deploy-theater-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 700px) {
    .deploy-theater-grid { grid-template-columns: 1fr; }
}
.deploy-card {
    background: linear-gradient(160deg, rgba(30, 40, 55, 0.55), rgba(10, 14, 22, 0.7));
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 2px;
    padding: 12px 14px;
    position: relative;
}
.deploy-card.origin { border-color: rgba(94, 240, 255, 0.45); }
.deploy-card.target { border-color: rgba(255, 51, 102, 0.35); }
.deploy-card-label {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.deploy-card-name {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.deploy-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.deploy-origin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.deploy-chip {
    padding: 6px 10px;
    font-size: 0.7rem;
    font-family: var(--font-head);
    letter-spacing: 0.4px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.35);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 2px;
}
.deploy-chip.active {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 240, 255, 0.12);
}
.deploy-missions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.deploy-mission {
    flex: 1;
    min-width: 90px;
    padding: 10px 12px;
    text-align: center;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.3);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 2px;
}
.deploy-mission.active {
    border-color: var(--amber);
    color: var(--amber);
    background: rgba(251, 191, 36, 0.12);
}
.deploy-ships {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 700px) {
    .deploy-ships { grid-template-columns: 1fr; }
}
.deploy-ship-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 240, 255, 0.14);
    border-radius: 2px;
}
.deploy-ship-card.empty { opacity: 0.45; }
.deploy-ship-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 0.7rem;
    color: var(--cyan);
}
.deploy-ship-head i { width: 18px; text-align: center; }
.deploy-ship-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.deploy-ship-card input[type=number].deploy-ship-qty {
    flex: 1;
    min-width: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 240, 255, 0.28);
    color: #fff;
    padding: 6px 8px;
    border-radius: 2px;
    font-family: var(--font-head);
    font-size: 0.85rem;
    text-align: right;
    outline: none;
    -moz-appearance: textfield;
}
.deploy-ship-card input[type=number].deploy-ship-qty::-webkit-outer-spin-button,
.deploy-ship-card input[type=number].deploy-ship-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.deploy-ship-card input[type=number].deploy-ship-qty:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.25);
}
.deploy-ship-card input[type=number].deploy-ship-qty:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.deploy-ship-max {
    flex-shrink: 0;
    padding: 5px 8px;
    font-family: var(--font-head);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 2px;
    cursor: pointer;
}
.deploy-ship-max:hover:not(:disabled) {
    background: rgba(0, 240, 255, 0.18);
}
.deploy-ship-max:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.deploy-ship-vals {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #fff;
}
.deploy-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 10px 12px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.18);
    font-size: 0.8rem;
}
.deploy-totals strong { color: var(--cyan); }
.deploy-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.deploy-actions .btn-launch,
.deploy-actions .btn-rtb { width: 100%; min-height: 44px; font-size: 0.72rem; }
.btn-rtb {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ff8fab;
    background: rgba(255, 51, 102, 0.12);
    border: 1px solid rgba(255, 51, 102, 0.45);
    border-radius: 2px;
    cursor: pointer;
}
.btn-rtb:hover:not(:disabled) {
    background: rgba(255, 51, 102, 0.22);
    color: #fff;
}
.btn-rtb:disabled { opacity: 0.4; cursor: not-allowed; }
.deploy-cloak {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--cyan);
}
.deploy-cloak input { width: auto; }

/* Hostile Deploy Theater: Raid vs RTB Duel tabs */
.deploy-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 6px;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 4px 0;
    background: linear-gradient(180deg, rgba(8, 14, 22, 0.98) 70%, rgba(8, 14, 22, 0.85));
}
.deploy-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 10px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 240, 255, 0.22);
    border-radius: 4px;
    cursor: pointer;
}
.deploy-mode-tab > i { font-size: 0.85rem; flex-shrink: 0; }
.deploy-mode-tab-rtb:not(.is-active) {
    color: #ff8fab;
    border-color: rgba(255, 51, 102, 0.4);
    background: rgba(255, 51, 102, 0.08);
}
.deploy-mode-tab:hover {
    color: #e8f9ff;
    border-color: rgba(0, 240, 255, 0.4);
}
.deploy-mode-tab-rtb:hover:not(.is-active) {
    color: #fff;
    border-color: rgba(255, 51, 102, 0.65);
    background: rgba(255, 51, 102, 0.16);
}
.deploy-mode-tab.is-active {
    color: #0b0e11;
    background: var(--cyan);
    border-color: var(--cyan);
}
.deploy-mode-tab.is-active[data-deploy-mode="rtb"] {
    color: #fff;
    background: rgba(255, 51, 102, 0.55);
    border-color: rgba(255, 51, 102, 0.75);
}
.deploy-mode-panel.hidden { display: none !important; }
.deploy-rtb-hint {
    margin: 0 0 8px;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-muted);
}

.deploy-rtb-turns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.deploy-rtb-turns.hidden { display: none !important; }
.rtb-turns-picker { display: flex; gap: 6px; }
.rtb-turns-btn {
    min-width: 40px;
    min-height: 34px;
    padding: 4px 8px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    color: #e8f9ff;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 240, 255, 0.28);
    border-radius: 6px;
    cursor: pointer;
}
.rtb-turns-btn.is-active {
    color: #0b0e11;
    background: var(--cyan);
    border-color: var(--cyan);
}

/* --- RTB 3D space battle stage --- */
.rtb-stage {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: block;
    background: #05080f;
    pointer-events: auto;
}
.rtb-stage.hidden { display: none !important; }
.rtb-battle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}
.rtb-stage-hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
}
.rtb-header {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(720px, 96vw);
    pointer-events: auto;
    padding: 5px 10px;
    background: rgba(8, 14, 22, 0.72);
    border: 1px solid rgba(0, 240, 255, 0.22);
    border-radius: 8px;
    backdrop-filter: blur(6px);
}
.rtb-battle-turn {
    font-family: var(--font-head);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--amber);
    white-space: nowrap;
}
.rtb-meta {
    color: #fff;
    font-size: 0.72rem;
    min-width: 0;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rtb-timer {
    font-family: var(--font-head);
    font-size: 0.95rem;
    color: var(--amber);
    min-width: 36px;
    text-align: center;
}
.rtb-timer.urgent { color: var(--red); animation: rtb-pulse 0.6s ease infinite alternate; }
@keyframes rtb-pulse { from { opacity: 1; } to { opacity: 0.55; } }
.rtb-skip, .rtb-resign {
    min-height: 34px;
    padding: 4px 10px !important;
    font-size: 0.65rem !important;
    margin: 0 !important;
    pointer-events: auto;
}
.rtb-hp-corner {
    position: absolute;
    top: calc(52px + env(safe-area-inset-top, 0px));
    width: min(200px, 38vw);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    align-items: center;
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: #fff;
    pointer-events: none;
}
.rtb-hp-corner.att { left: 10px; }
.rtb-hp-corner.def { right: 10px; }
.rtb-hp-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.rtb-hp-fill { height: 100%; width: 100%; transition: width 0.25s ease; }
.rtb-hp-fill.att { background: linear-gradient(90deg, #ff4466, #ff8899); }
.rtb-hp-fill.def { background: linear-gradient(90deg, #00c8e0, #00f0ff); }
.rtb-help {
    position: absolute;
    left: 50%;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #e8f9ff;
    padding: 6px 12px;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.28);
    border-radius: 999px;
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.rtb-log {
    position: absolute;
    left: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: min(280px, 70vw);
    max-height: 5.6em;
    overflow: auto;
    padding: 6px 8px;
    font-size: 0.65rem;
    line-height: 1.25;
    background: rgba(8, 14, 22, 0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-muted);
    pointer-events: auto;
}
.rtb-float-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.rtb-float-dmg {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 80, 120, 0.9), 0 1px 2px #000;
    animation: rtb-float-up 0.85s ease-out forwards;
    white-space: nowrap;
}
.rtb-float-dmg.kill { color: #ffcc66; font-size: 1.15rem; }
@keyframes rtb-float-up {
    from { opacity: 1; margin-top: 0; }
    to { opacity: 0; margin-top: -36px; }
}
.rtb-winner-banner {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    padding: 16px 28px;
    font-family: var(--font-head);
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(8, 14, 22, 0.88);
    border: 1px solid rgba(0, 240, 255, 0.45);
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.25);
    pointer-events: none;
    text-align: center;
}
.rtb-winner-banner.win { border-color: rgba(0, 240, 160, 0.55); color: #8fffd0; }
.rtb-winner-banner.loss { border-color: rgba(255, 51, 102, 0.55); color: #ff8fab; }
.rtb-winner-banner.hidden { display: none !important; }
.rtb-lobby-turns { color: var(--cyan); }

/* Hide main HUD chrome during RTB battle */
body.rtb-battle-active .hud-footer,
body.rtb-battle-active .dock-container,
body.rtb-battle-active .hud-footer-status-row,
body.rtb-battle-active #zoom-out-btn,
body.rtb-battle-active .hud-right {
    display: none !important;
}
.rtb-challenge-toast {
    position: fixed;
    bottom: 120px;
    right: 24px;
    z-index: 70;
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(12, 18, 28, 0.95);
    border: 1px solid rgba(255, 51, 102, 0.5);
    border-radius: 2px;
    pointer-events: auto;
}
.rtb-challenge-toast h4 {
    margin: 0 0 8px;
    font-family: var(--font-head);
    color: #ff8fab;
    font-size: 0.75rem;
    letter-spacing: 0.8px;
}
.rtb-challenge-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.rtb-lobby-chip {
    position: fixed;
    right: 16px;
    bottom: 120px;
    z-index: 72;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 14px;
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #e8f9ff;
    background: rgba(8, 14, 22, 0.95);
    border: 1px solid rgba(0, 240, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}
.rtb-lobby-chip.hidden { display: none !important; }
.rtb-lobby-chip:hover {
    background: rgba(0, 240, 255, 0.14);
}

/* --- RTB ship-select lobby --- */
.rtb-lobby-overlay {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 4, 10, 0.82);
}
.rtb-lobby-overlay.hidden { display: none !important; }
.rtb-lobby-panel {
    width: min(680px, 100%);
    max-height: 88vh;
    overflow: auto;
    padding: 12px 14px;
}
.rtb-lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.rtb-lobby-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.rtb-lobby-title {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--cyan);
}
.rtb-lobby-meta {
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: #fff;
}
.rtb-lobby-presence {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.rtb-online {
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 0.6px;
    padding: 1px 6px;
    border-radius: 2px;
}
.rtb-online.on {
    color: #7dffa3;
    border: 1px solid rgba(125, 255, 163, 0.35);
    background: rgba(125, 255, 163, 0.08);
}
.rtb-online.off {
    color: #ff8fab;
    border: 1px solid rgba(255, 51, 102, 0.35);
    background: rgba(255, 51, 102, 0.08);
}
.rtb-lobby-warn {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--amber);
}
.rtb-lobby-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 10px;
}
.rtb-lobby-col {
    padding: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.rtb-lobby-col-title {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 0.7px;
    color: var(--cyan);
    margin-bottom: 6px;
}
.rtb-lobby-col-title em {
    color: var(--amber);
    font-style: normal;
    margin-left: 6px;
}
.rtb-lobby-ship {
    display: grid;
    grid-template-columns: 1fr minmax(72px, 1.2fr) 32px;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 0.72rem;
    color: #fff;
}
.rtb-lobby-ship small { color: var(--text-muted); }
.rtb-lobby-ship input[type=range] { width: 100%; height: 18px; }
.rtb-lobby-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.rtb-lobby-actions .btn-launch,
.rtb-lobby-actions .btn-rtb {
    min-height: 38px;
    font-size: 0.68rem;
}
.rtb-lobby-opp-fleet {
    font-size: 0.85rem;
    color: #fff;
    margin-bottom: 10px;
}
.rtb-lobby-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
}
@media (max-width: 720px) {
    .rtb-lobby-grid { grid-template-columns: 1fr; }
    .rtb-header { gap: 6px; max-width: 98vw; }
    .rtb-meta { font-size: 0.65rem; max-width: 140px; }
    .rtb-log { max-height: 4.8em; width: min(260px, 78vw); }
    .rtb-help { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); font-size: 0.65rem; }
    .rtb-hp-corner { width: min(160px, 42vw); top: calc(58px + env(safe-area-inset-top, 0px)); }
}

body.is-mobile.rtb-battle-active .rtb-stage,
body.is-android-shell.rtb-battle-active .rtb-stage {
    padding: 0;
}
body.is-mobile.rtb-battle-active .hud-header,
body.is-android-shell.rtb-battle-active .hud-header {
    opacity: 0.2;
    pointer-events: none;
}
body.is-mobile .rtb-skip,
body.is-mobile .rtb-resign,
body.is-android-shell .rtb-skip,
body.is-android-shell .rtb-resign {
    min-height: 40px;
}

/* Phone shell — RTB lobby sheet + toast above dock */
body.is-mobile .rtb-challenge-toast,
body.is-android-shell .rtb-challenge-toast,
body.is-mobile .rtb-lobby-chip,
body.is-android-shell .rtb-lobby-chip {
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: calc(var(--mobile-chrome-h, 96px) + 12px + env(safe-area-inset-bottom, 0px));
}
body.is-mobile .rtb-lobby-overlay,
body.is-android-shell .rtb-lobby-overlay {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(2, 4, 10, 0.88);
}
body.is-mobile .rtb-lobby-panel,
body.is-android-shell .rtb-lobby-panel {
    width: 100%;
    max-height: min(92dvh, 920px);
    border-radius: 16px 16px 0 0;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.is-mobile .rtb-lobby-panel::before,
body.is-android-shell .rtb-lobby-panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 240, 255, 0.35);
    margin: 0 auto 12px;
}
body.is-mobile .rtb-lobby-grid,
body.is-android-shell .rtb-lobby-grid {
    grid-template-columns: 1fr;
}
body.is-mobile .rtb-lobby-actions .btn-launch,
body.is-mobile .rtb-lobby-actions .btn-rtb,
body.is-android-shell .rtb-lobby-actions .btn-launch,
body.is-android-shell .rtb-lobby-actions .btn-rtb,
body.is-mobile .rtb-lobby-cancel,
body.is-mobile .rtb-lobby-minimize,
body.is-android-shell .rtb-lobby-cancel,
body.is-android-shell .rtb-lobby-minimize {
    min-height: 48px;
}
body.is-mobile .rtb-lobby-ship,
body.is-android-shell .rtb-lobby-ship {
    grid-template-columns: 1fr;
    gap: 4px;
}
body.is-mobile .rtb-lobby-ship input[type=range],
body.is-android-shell .rtb-lobby-ship input[type=range] {
    min-height: 32px;
}

/* --- Settings / public profile dossier --- */
.modal-settings .modal-content,
.modal-profile .modal-content {
    max-width: 980px;
    max-height: 92vh;
}
.modal-settings #modal-body,
.modal-profile #modal-body {
    max-height: calc(90vh - 80px);
}
.settings-page,
.profile-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.settings-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    color: var(--text-muted);
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.settings-loading i { color: var(--cyan); }
.settings-layout {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 16px;
    align-items: start;
}
.settings-preview {
    background:
        linear-gradient(180deg, rgba(0, 240, 255, 0.08) 0%, transparent 42%),
        rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    padding: 18px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.settings-preview-name {
    font-family: var(--font-head);
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 1px;
}
.settings-preview-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 2px;
    border: 1px solid rgba(0, 240, 255, 0.4);
    background: rgba(0, 0, 0, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    font-size: 1.8rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.12), 0 0 18px rgba(0, 240, 255, 0.08);
}
.profile-avatar.avatar-lg {
    width: 96px;
    height: 96px;
    font-size: 2.4rem;
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}
.profile-stat-grid-wide {
    grid-template-columns: repeat(3, 1fr);
}
.profile-stat {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(120, 140, 160, 0.22);
    border-radius: 2px;
    padding: 8px;
    text-align: left;
}
.profile-stat .ps-label {
    display: block;
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.profile-stat strong {
    color: var(--amber);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
}
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--text-main);
}
.settings-field > span {
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cyan);
}
.settings-field em {
    font-style: normal;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.settings-field input,
.settings-field textarea,
.settings-field select {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 10px 12px;
    border-radius: 2px;
    outline: none;
}
.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.2);
}
.settings-field textarea {
    resize: vertical;
    min-height: 90px;
    user-select: text;
}
.settings-field input,
.settings-field textarea {
    user-select: text;
}
.avatar-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}
.avatar-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.avatar-preset i {
    font-size: 1.25rem;
    color: var(--cyan);
}
.avatar-preset:hover {
    border-color: rgba(0, 240, 255, 0.45);
    color: var(--text-main);
}
.avatar-preset.active {
    border-color: var(--cyan);
    background: rgba(0, 240, 255, 0.12);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.15);
}
.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.profile-hero {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 16px;
    background:
        linear-gradient(120deg, rgba(0, 240, 255, 0.1) 0%, transparent 45%),
        rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
}
.profile-hero-text { flex: 1; min-width: 0; }
.profile-display {
    font-family: var(--font-head);
    font-size: 1.35rem;
    letter-spacing: 1.5px;
    color: #fff;
}
.profile-title {
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--amber);
    margin-top: 4px;
    text-transform: uppercase;
}
.profile-handle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}
.profile-ally-row { margin-top: 8px; font-size: 0.85rem; }
.profile-ally-tag {
    font-family: var(--font-head);
    color: var(--cyan);
    letter-spacing: 1px;
}
.profile-ally-name { color: var(--text-main); }
.profile-ally-none { color: var(--text-muted); font-size: 0.8rem; }
.profile-motto {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-left: 2px solid var(--amber);
    color: var(--text-main);
    font-size: 0.95rem;
    font-style: italic;
    background: rgba(251, 191, 36, 0.06);
}
.profile-about .profile-bio {
    margin: 10px 0 0;
    line-height: 1.45;
    font-size: 0.95rem;
    color: var(--text-main);
    white-space: pre-wrap;
}
.profile-about .profile-bio.muted { color: var(--text-muted); }
.profile-actions { justify-content: flex-start; }

@media (max-width: 780px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
    .profile-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .profile-motto { text-align: left; }
    .profile-stat-grid-wide {
        grid-template-columns: 1fr 1fr;
    }
}