/* ── Reset & base ──────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: #04060a;
    color: #d0e8ff;
}

/* ── Custom scrollbars (game-native style) ──────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(2, 6, 22, 0.80);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 255, 0.35);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.60);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 180, 255, 0.35) rgba(2, 6, 22, 0.80);
}

/* ── Loading screen ─────────────────────────────────────────────────────── */
#loading {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(100, 180, 255, 0.7);
}

#dots {
    display: inline-block;
    width: 3ch;
    text-align: left;
}

/* ── PWA splash screen (shown while service worker pre-caches assets) ───── */
#pwa-splash {
    position: fixed;
    inset: 0;
    background: #04060a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.4s ease;
}

#pwa-splash.pwa-splash-fade {
    opacity: 0;
    pointer-events: none;
}

.pwa-splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    max-width: 400px;
    width: 90%;
}

.pwa-splash-logo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    filter:
        drop-shadow(0 0 10px rgba(80, 180, 255, 0.9))
        drop-shadow(0 0 28px rgba(40, 120, 255, 0.55));
    animation: titlePulse 4s ease-in-out infinite;
}

.pwa-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(0, 180, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(0, 180, 255, 0.18);
}

.pwa-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(0, 180, 255, 0.6), rgba(0, 229, 255, 0.9));
    border-radius: 2px;
    transition: width 0.25s ease;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.pwa-splash-status {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(100, 180, 255, 0.65);
    text-align: center;
}

.pwa-splash-pct {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: rgba(0, 229, 255, 0.55);
    text-align: center;
}

.pwa-refresh-btn {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #04060a;
    background: rgba(0, 229, 255, 0.85);
    border: none;
    padding: 10px 28px;
    cursor: pointer;
    border-radius: 2px;
    margin-top: 8px;
    transition: background 0.15s ease;
}

.pwa-refresh-btn:hover {
    background: #00e5ff;
}

/* ── Background image layer ─────────────────────────────────────────────── */
#menuBackground {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    z-index: 3;
}

#menuBackground.menu-bg-0 {
    background-image: url('../assets/images/main-menu-bg-0.webp');
}

#menuBackground.menu-bg-1 {
    background-image: url('../assets/images/main-menu-bg-1.webp');
}

/* ── System departure background ─────────────────────────────────────────────── */
#systemDepartureScreen.system-departure-bg {
    background-image: url('../assets/images/leave-system-bg.webp');
}

/* ── Star Chart loading overlay background ──────────────────────────────────── */
.sc-loading-overlay {
    background-image: url('../assets/images/hyperspace-bg.webp');
}

/* ── Star Chart selection screen background ─────────────────────────────────── */
.star-chart-bg {
    background-image: url('../assets/images/system-selection-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#gameBackground {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../assets/images/star-map-bg.webp');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* ── Canvas (sits above background, game scene renders here) ────────────── */
#theCanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 28px;
    left: 0;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
    z-index: 2;
}

/* ── Main menu overlay ──────────────────────────────────────────────────── */
#mainMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    pointer-events: none;
    z-index: 10;
}

/* ── Left panel ─────────────────────────────────────────────────────────── */
#menuPanel {
    width: 360px;
    min-width: 280px;
    background: linear-gradient(
        160deg,
        rgba(2, 6, 22, 0.33) 0%,
        rgba(4, 10, 34, 0.33) 55%,
        rgba(2, 6, 18, 0.33) 100%
    );
    border-right: 1px solid rgba(0, 180, 255, 0.22);
    box-shadow:
        6px 0 60px rgba(0, 60, 180, 0.22),
        inset -1px 0 0 rgba(0, 200, 255, 0.07);
    display: flex;
    flex-direction: column;
    padding: 52px 40px 32px 40px;
    pointer-events: all;
    backdrop-filter: blur(6px) brightness(0.9);
    -webkit-backdrop-filter: blur(6px) brightness(0.9);
}

/* ── Title block ────────────────────────────────────────────────────────── */
#gameTitle {
    margin-bottom: 40px;
}

.game-logo {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    filter:
        drop-shadow(0 0 8px rgba(80, 180, 255, 0.9))
        drop-shadow(0 0 22px rgba(40, 120, 255, 0.55));
    animation: titlePulse 4s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.80; }
}

/* ── Divider ────────────────────────────────────────────────────────────── */
.menu-divider {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 180, 255, 0.50) 25%,
        rgba(0, 220, 255, 0.65) 50%,
        rgba(0, 180, 255, 0.50) 75%,
        transparent
    );
    margin-bottom: 40px;
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.28);
}

/* ── Menu buttons ───────────────────────────────────────────────────────── */
#menuItems {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.menu-btn {
    background: transparent;
    border: none;
    border-left: 2px solid rgba(0, 160, 255, 0.30);
    color: rgba(155, 210, 255, 0.80);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.92rem;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    text-align: left;
    padding: 13px 18px;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        color 0.20s ease,
        border-left-color 0.20s ease,
        text-shadow 0.20s ease,
        background 0.20s ease,
        padding-left 0.16s ease;
    position: relative;
    outline: none;
}

.menu-btn:hover:not(:disabled) {
    color: #00e5ff;
    border-left-color: #00e5ff;
    padding-left: 26px;
    background: rgba(0, 180, 255, 0.07);
    text-shadow:
        0 0 8px rgba(0, 220, 255, 0.9),
        0 0 22px rgba(0, 160, 255, 0.5);
}

.menu-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.menu-btn:hover:not(:disabled)::before {
    content: '›';
    position: absolute;
    left: 7px;
    color: #00e5ff;
    text-shadow: 0 0 6px rgba(0, 220, 255, 0.8);
    animation: arrowBlink 0.8s step-end infinite;
}

@keyframes arrowBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Main menu profile row ───────────────────────────────────────────────── */
.menu-profile-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.menu-btn-profile {
    flex-shrink: 0;
}

.menu-pilot-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: #00e5ff;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
    padding-left: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ── Generation progress bar ───────────────────────────────────────────── */
#generationProgress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: center;
    padding: 0 4px;
}

/* ── Online account section ──────────────────────────────────────────────── */
#onlineAccountSection {
    margin-top: 6px;
}

.menu-account-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: rgba(0, 229, 255, 0.80);
    text-align: left;
    padding: 0 18px 4px;
}

.menu-account-unsigned {
    color: rgba(80, 130, 185, 0.60);
    font-style: italic;
}

.menu-account-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.menu-divider-slim {
    margin: 8px 0 4px;
    opacity: 0.5;
}

/* ── Version ────────────────────────────────────────────────────────────── */
#version {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    color: rgba(60, 110, 170, 0.50);
    text-align: right;
    margin-top: 12px;
}

/* ── API status badge ────────────────────────────────────────────────────── */
.api-status {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-align: right;
    margin-top: 4px;
    text-transform: uppercase;
}

.api-online {
    color: rgba(60, 200, 100, 0.65);
}

.api-offline {
    color: rgba(220, 80, 60, 0.70);
}

/* ── System view – top bar ──────────────────────────────────────────────── */
#systemTopBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: rgba(2, 6, 22, 0.85);
    border-bottom: 1px solid rgba(0, 180, 255, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    z-index: 3200;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
}

.top-btn {
    background: transparent;
    border: 1px solid rgba(0, 160, 255, 0.40);
    color: rgba(140, 200, 255, 0.90);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 14px;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
    white-space: nowrap;
}

.top-btn:hover {
    color: #00e5ff;
    border-color: #00e5ff;
    background: rgba(0, 180, 255, 0.09);
}

.top-strip-menu {
    position: relative;
    z-index: 4000;
}

.top-burger-btn {
    min-width: 44px;
    padding: 5px 10px;
    letter-spacing: 0.08em;
}


.system-name {
    color: rgba(200, 230, 255, 0.95);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.80rem;
    white-space: nowrap;
}

.system-meta {
    color: rgba(80, 140, 200, 0.70);
    letter-spacing: 0.10em;
    font-size: 0.68rem;
    white-space: nowrap;
}

.zoom-hint {
    color: rgba(60, 110, 170, 0.55);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* ── System view – planet panel ─────────────────────────────────────────── */
#planetPanel {
    position: fixed;
    top: 45px;
    left: 0;
    bottom: 29px;
    width: 240px;
    background: rgba(2, 6, 22, 0.82);
    border-right: 1px solid rgba(0, 180, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow-y: auto;
    z-index: 2200;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.70rem;
    padding: 12px 0 16px 0;
}

.panel-header {
    color: rgba(0, 180, 255, 0.75);
    letter-spacing: 0.30em;
    text-transform: uppercase;
    font-size: 0.62rem;
    padding: 0 14px 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-divider {
    height: 1px;
    background: rgba(0, 180, 255, 0.18);
    margin: 6px 0 8px 0;
}

.body-row {
    display: flex;
    flex-direction: column;
    padding: 4px 16px;
    border-left: 2px solid transparent;
    transition: border-left-color 0.15s, background 0.15s;
}

.body-row:hover {
    background: rgba(0, 180, 255, 0.06);
    border-left-color: rgba(0, 180, 255, 0.50);
}

.star-row {
    border-left-color: rgba(255, 200, 80, 0.40);
}

.moon-row {
    padding-left: 28px;
    opacity: 0.80;
}

.body-name {
    color: rgba(190, 220, 255, 0.90);
    letter-spacing: 0.10em;
}

.body-detail {
    color: rgba(80, 130, 185, 0.70);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

/* ── Planet view – top bar ──────────────────────────────────────────────── */
#planetTopBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: rgba(2, 6, 22, 0.85);
    border-bottom: 1px solid rgba(0, 229, 255, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    z-index: 3200;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
}

/* ── Planet panel – visit button ────────────────────────────────────────── */
.visit-btn {
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: rgba(0, 229, 255, 0.80);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.60rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2px 8px;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.visit-btn:hover {
    color: #00e5ff;
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.09);
}

/* ── Planet view – "…" dropdown menu ────────────────────────────────────── */
.pv-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: rgba(2, 6, 22, 0.94);
    border: 1px solid rgba(0, 229, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 4100;
    padding: 4px 0;
}

.pv-dropdown-right {
    left: auto;
    right: 0;
}

.pv-dropdown-item {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(190, 220, 255, 0.85);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-align: left;
    padding: 6px 14px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.pv-dropdown-item:hover {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.08);
}

.pv-dropdown-item-danger {
    color: rgba(255, 200, 60, 0.92);
}

.pv-dropdown-item-danger:hover {
    color: rgba(255, 220, 100, 0.98);
    background: rgba(255, 180, 0, 0.12);
}

.pv-empty-cargo {
    padding: 8px 16px;
    color: rgba(80, 130, 185, 0.55);
    font-size: 0.64rem;
    font-style: italic;
    letter-spacing: 0.06em;
}

/* ── Overlay toggle/menu buttons ───────────────────────────────────────── */
.overlay-panel-toggle,
.overlay-panel-menu {
    position: fixed;
    top: 52px;
    z-index: 21;
}

.overlay-panel-toggle-left {
    left: 16px;
}

.overlay-panel-menu-center {
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.overlay-flight-controls {
    position: fixed;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    z-index: 21;
    display: flex;
    gap: 8px;
}

/* ── Coordinate value styling in info panels ───────────────────────────── */
.info-coords {
    color: rgba(0, 229, 255, 0.85);
    font-size: 0.62rem;
}

/* ── Body info panel (left side, system & planet view) ──────────────────── */
.overlay-side-panel {
    position: fixed;
    top: 45px;
    bottom: 29px;
    width: 240px;
    background: rgba(2, 6, 22, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow-y: auto;
    z-index: 20;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.70rem;
    padding: 12px 0 16px 0;
}

.overlay-side-panel-left {
    left: 0;
    border-right: 1px solid rgba(0, 180, 255, 0.18);
}

.overlay-side-panel-right {
    right: 0;
    border-left: 1px solid rgba(0, 180, 255, 0.18);
}

.close-btn {
    background: transparent;
    border: none;
    color: rgba(80, 140, 200, 0.70);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    cursor: pointer;
    touch-action: manipulation;
    padding: 0 4px;
    transition: color 0.18s;
    line-height: 1;
}

.close-btn:hover {
    color: #00e5ff;
}

.info-name {
    padding: 4px 16px 8px 16px;
    color: rgba(200, 230, 255, 0.95);
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    font-weight: bold;
}

.info-type {
    display: block;
    color: rgba(0, 180, 255, 0.75);
    letter-spacing: 0.10em;
    font-size: 0.66rem;
    font-weight: normal;
    margin-top: 2px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 16px;
    border-left: 2px solid transparent;
}

.info-label {
    color: rgba(80, 130, 185, 0.70);
    letter-spacing: 0.08em;
    font-size: 0.64rem;
    text-transform: uppercase;
    min-width: 80px;
}

.info-value {
    color: rgba(190, 220, 255, 0.90);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-align: right;
}

.info-moon {
    padding: 2px 16px 2px 24px;
    color: rgba(140, 175, 215, 0.75);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
}

/* ── Body actions row (focus + visit buttons) ───────────────────────────── */
.body-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

/* ── Focus button ───────────────────────────────────────────────────────── */
.focus-btn {
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(0, 229, 255, 0.22);
    color: rgba(0, 229, 255, 0.60);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.60rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2px 8px;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.focus-btn:hover {
    color: #00e5ff;
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.07);
}

/* ── Focused body row highlight ─────────────────────────────────────────── */
.body-row-focused {
    border-left: 2px solid rgba(0, 229, 255, 0.80) !important;
    background: rgba(0, 180, 255, 0.10) !important;
}

/* ── Colony rows ────────────────────────────────────────────────────────── */
.colony-row {
    border-left-color: rgba(255, 140, 20, 0.30);
}

.colony-row .body-name {
    color: rgba(255, 160, 60, 0.90);
    letter-spacing: 0.08em;
}

/* ── Trade price colouring ──────────────────────────────────────────────── */
.price-low .info-value {
    color: rgba(80, 255, 120, 0.90);
}

.price-high .info-value {
    color: rgba(255, 150, 80, 0.90);
}

/* ── Colony info in planet view ─────────────────────────────────────────── */
.info-colony {
    padding: 5px 16px 2px 16px;
    color: rgba(255, 160, 60, 0.90);
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    font-weight: bold;
}

.info-colony-focused {
    background: rgba(255, 140, 20, 0.10);
    border-left: 2px solid rgba(255, 140, 20, 0.80);
    padding-left: 14px;
}

.colony-marker {
    margin-right: 4px;
    color: rgba(255, 140, 20, 0.90);
}

/* ── Colony screen ─────────────────────────────────────────────────────── */
#colonyScreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #04060a;
    z-index: 30;
    display: flex;
    flex-direction: column;
    font-family: 'Courier New', Courier, monospace;
}

/* ── Colony top bar ────────────────────────────────────────────────────── */
#colonyTopBar {
    position: relative;
    z-index: 3200;
    overflow: visible;
    height: 48px;
    min-height: 48px;
    background: rgba(2, 6, 22, 0.92);
    border-bottom: 1px solid rgba(0, 229, 255, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    font-size: 0.78rem;
}

/* On narrow screens keep the top bar a single row by hiding overflow items */
@media (max-width: 600px) {
    #colonyTopBar {
        height: auto;
        min-height: 44px;
        gap: 8px;
        padding: 0 10px;
        flex-wrap: nowrap;      /* no wrap — allow horizontal scroll instead */
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
    }
    #colonyTopBar::-webkit-scrollbar { display: none; }

    /* Hide the full stats block (Rep / Law / Credits) on narrow screens —
       credits are shown in the Market tab so this is not a loss of info */
    .colony-top-stats { display: none; }

    /* Shrink colony name so the bar fits 390px */
    #colonyTopBar .system-name {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 140px;
    }
}

.top-strip-dropdown {
    min-width: 240px;
}

.colony-screen-icon {
    color: rgba(255, 160, 60, 0.90);
    font-size: 1rem;
}

.colony-top-stats {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.colony-top-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.colony-top-label {
    font-size: 0.60rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(80, 140, 200, 0.70);
}

.colony-top-value {
    font-size: 0.68rem;
    letter-spacing: 0.10em;
    color: rgba(190, 220, 255, 0.90);
}

.colony-top-sep {
    color: rgba(0, 180, 255, 0.25);
    font-size: 0.70rem;
}

/* Reputation level colour tints */
.colony-rep-notorious { color: rgba(255, 80,  80,  0.90); }
.colony-rep-bad       { color: rgba(255, 150, 80,  0.90); }
.colony-rep-neutral   { color: rgba(190, 220, 255, 0.85); }
.colony-rep-respected { color: rgba(100, 220, 140, 0.90); }
.colony-rep-trusted   { color: rgba(60,  200, 255, 0.90); }
.colony-rep-renowned  { color: rgba(0,   229, 255, 1.00); text-shadow: 0 0 8px rgba(0, 229, 255, 0.45); }

.growth-trend-growing   { color: rgba(0, 255, 136, 0.90); }
.growth-trend-declining { color: rgba(255, 68, 68, 0.90); }
.growth-trend-stable    { color: rgba(190, 220, 255, 0.65); }

/* ── Colony tab bar ────────────────────────────────────────────────────── */
#colonyTabBar {
    position: relative;
    z-index: 2100;
    overflow: hidden;       /* clip overflowing scroll area so it can't intercept events outside bounds */
    /* Height and styling is now handled by .fctabbar-primary inside FcTabBar */
}


/* ── Colony background / content area ──────────────────────────────────── */
#colonyBackground {
    flex: 1;
    min-height: 0;          /* allow flex shrink below content size */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;    /* vertically centre the panel on large screens */
    justify-content: center;
    background-color: #04060a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease;
}

.colony-bg-visitor-orbital {
    background-image: url('../assets/images/colony-screen-visitor-orbital-bg.webp');
}

.colony-bg-visitor-planetary {
    background-image: url('../assets/images/colony-screen-visitor-planetary-bg.webp');
}

.colony-bg-visitor-mining {
    background-image: url('../assets/images/colony-screen-visitor-mining-bg.webp');
}

.colony-bg-visitor-agricultural {
    background-image: url('../assets/images/colony-screen-visitor-agricultural-bg.webp');
}

.colony-bg-visitor-industrial {
    background-image: url('../assets/images/colony-screen-visitor-industrial-bg.webp');
}

.colony-bg-visitor-hightech {
    background-image: url('../assets/images/colony-screen-visitor-hightech-bg.webp');
}

.colony-bg-visitor-iceharvesting {
    background-image: url('../assets/images/colony-screen-visitor-iceharvesting-bg.webp');
}

.colony-bg-visitor-refinery {
    background-image: url('../assets/images/colony-screen-visitor-refinery-bg.webp');
}

.colony-bg-visitor-extraction {
    background-image: url('../assets/images/colony-screen-visitor-extraction-bg.webp');
}

.colony-bg-visitor-tradehub {
    background-image: url('../assets/images/colony-screen-visitor-tradehub-bg.webp');
}

.colony-bg-market {
    background-image: url('../assets/images/colony-screen-marketplace-bg.webp');
}

.colony-bg-bar {
    background-image: url('../assets/images/colony-screen-bar-bg.webp');
}

/* ── Colony content panel (glass overlay) ──────────────────────────────── */
#colonyContent {
    position: relative;
    z-index: 2;
    width: min(580px, 96vw);
    /* Fixed height so all tabs (including Pub) take the same panel size
       regardless of content length. */
    height: 80vh;
    min-height: 340px;
    overflow-y: auto;
    background: rgba(2, 6, 22, 0.80);
    border: 1px solid rgba(0, 180, 255, 0.22);
    border-radius: 4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 0 40px rgba(0, 60, 180, 0.15),
        inset 0 0 30px rgba(0, 20, 60, 0.20);
    padding: 0;
}

/* ── Colony section blocks ─────────────────────────────────────────────── */
.colony-section {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 180, 255, 0.12);
}

.colony-section:last-child {
    border-bottom: none;
}

.colony-section-header {
    color: rgba(0, 229, 255, 0.85);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: 0.68rem;
    padding: 0 20px 10px 20px;
    text-shadow: 0 0 6px rgba(0, 180, 255, 0.3);
}

.colony-section-header-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.market-help-btn {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    padding: 4px 10px;
}

.colony-section-subheader {
    color: rgba(0, 200, 255, 0.65);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.62rem;
    padding: 8px 20px 6px 20px;
}

.colony-section-body {
    padding: 0 4px;
}

.colony-section-body .info-row {
    padding: 3px 20px;
}

.colony-section-body .info-label {
    min-width: 100px;
}

/* ── Market table ─────────────── moved to MarketTab.razor.css ────────── */

/* ── Pub section ───────────────────────────────────────────────────────── */
.bar-flavor {
    padding: 8px 20px 12px 20px;
    color: rgba(140, 170, 210, 0.65);
    font-size: 0.68rem;
    line-height: 1.6;
    letter-spacing: 0.06em;
    font-style: italic;
}

/* ── Pub dialogue UI ─────────────────────────────────────────────────────── */
.pub-entry-flavor {
    padding: 20px var(--fc-pad-x) 16px var(--fc-pad-x);
    color: rgba(130, 160, 210, 0.72);
    font-size: 0.70rem;
    line-height: 1.75;
    letter-spacing: 0.05em;
    font-style: italic;
    border-bottom: 1px solid rgba(0, 180, 255, 0.10);
}

.pub-nearby-voice {
    padding: 12px var(--fc-pad-x) 14px var(--fc-pad-x);
    color: rgba(180, 195, 220, 0.68);
    font-size: 0.69rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    font-style: italic;
    border-bottom: 1px solid rgba(0, 180, 255, 0.10);
}

.pub-nearby-label {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(80, 130, 180, 0.55);
    margin-bottom: 5px;
    font-style: normal;
}

.pub-bartender-section {
    padding: 14px var(--fc-pad-x) 16px var(--fc-pad-x);
    border-bottom: 1px solid rgba(0, 180, 255, 0.10);
}

.pub-bartender-label {
    font-size: 0.55rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.48);
    margin-bottom: 8px;
}

.pub-bartender-line {
    color: rgba(220, 232, 255, 0.86);
    font-size: 0.72rem;
    line-height: 1.65;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.pub-bartender-line:last-child {
    margin-bottom: 0;
}

.pub-dialog-choices {
    display: flex;
    gap: 0.8em;
    padding: 1.2em var(--fc-pad-x);
}

.pub-dialog-btn {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(0, 180, 255, 0.32);
    color: rgba(0, 229, 255, 0.82);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.8em 1.2em;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-align: center;
    min-height: 2.8em;
    box-sizing: border-box;
}

.pub-dialog-btn:hover {
    background: rgba(0, 180, 255, 0.10);
    border-color: rgba(0, 229, 255, 0.65);
    color: rgba(0, 229, 255, 1.0);
}

.pub-section-nav {
    padding: 1em var(--fc-pad-x) 1.2em var(--fc-pad-x);
    border-top: 1px solid rgba(0, 180, 255, 0.10);
}

.bar-drink-section {
    padding: 0 0 8px 0;
}

.bar-drink-row {
    display: flex;
    align-items: center;
    padding: 3px 20px;
    font-size: 0.70rem;
}

.bar-drink-col-name {
    flex: 2;
    color: rgba(200, 180, 140, 0.85);
    letter-spacing: 0.10em;
}

.bar-drink-col-price {
    flex: 1;
    text-align: right;
    color: rgba(200, 180, 140, 0.60);
    letter-spacing: 0.08em;
}

.bar-drink-col-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-left: 8px;
}

/* ── Pub gossip ────────────────────────────────────────────────────────── */
.bar-gossip-empty {
    padding: 8px 20px;
    color: rgba(120, 150, 190, 0.55);
    font-size: 0.68rem;
    font-style: italic;
    letter-spacing: 0.06em;
}

.bar-gossip-list {
    max-height: 280px;
    overflow-y: auto;
}

.bar-gossip-item {
    padding: 8px 16px;
    font-size: 0.70rem;
    line-height: 1.55;
    border-left: 3px solid transparent;
    margin: 4px 0;
    border-radius: 0 4px 4px 0;
    background: rgba(0, 20, 40, 0.35);
    transition: background 0.15s;
}

.bar-gossip-item:hover {
    background: rgba(0, 40, 80, 0.50);
}

.gossip-surplus {
    border-left-color: rgba(80, 255, 120, 0.40);
}

.gossip-demand {
    border-left-color: rgba(255, 150, 80, 0.40);
}

.gossip-quote {
    color: rgba(140, 170, 210, 0.65);
    font-style: italic;
    letter-spacing: 0.04em;
}

.gossip-colony {
    color: rgba(255, 160, 60, 0.90);
    font-weight: bold;
    letter-spacing: 0.08em;
}

.gossip-good {
    color: rgba(0, 229, 255, 0.85);
    font-weight: bold;
    letter-spacing: 0.08em;
}

.gossip-price {
    color: rgba(220, 230, 255, 0.95);
    font-weight: bold;
    letter-spacing: 0.08em;
}

.gossip-surplus .gossip-price {
    color: rgba(80, 255, 120, 0.90);
}

.gossip-demand .gossip-price {
    color: rgba(255, 150, 80, 0.90);
}

.gossip-timestamp {
    display: block;
    color: rgba(80, 130, 185, 0.55);
    font-size: 0.60rem;
    letter-spacing: 0.10em;
    margin-bottom: 2px;
}

/* ── Player status (top bar) ────────────────────────────────────────────── */
.player-status {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: rgba(0, 229, 255, 0.80);
    text-shadow: 0 0 6px rgba(0, 180, 255, 0.35);
    white-space: nowrap;
    padding: 0 12px;
}

/* ── Market trade columns ──── moved to MarketTab.razor.css ──────────────── */

/* ── Trade buttons ───────────────────────────────────────────────────────── */
.trade-btn {
    background: transparent;
    border: 1px solid rgba(0, 160, 255, 0.30);
    color: rgba(140, 200, 255, 0.80);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 7px;
    cursor: pointer;
    border-radius: 2px;
    touch-action: manipulation;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.trade-btn:hover:not(:disabled) {
    background: rgba(0, 180, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.70);
    color: #00e5ff;
}

.trade-btn:disabled {
    opacity: 0.28;
    cursor: default;
}

.trade-buy:hover:not(:disabled) {
    border-color: rgba(80, 255, 120, 0.70);
    color: rgba(80, 255, 120, 0.90);
}

.trade-sell:hover:not(:disabled) {
    border-color: rgba(255, 150, 80, 0.70);
    color: rgba(255, 150, 80, 0.90);
}

/* ── Hangar tab background ──────────────────────────────────────────────── */
.colony-bg-hangar {
    background-image: url('../assets/images/colony-screen-hangar-bg.webp');
}

/* (remaining hangar styles moved to HangarTab.razor.css) */

/* ── Shipyard tab background ────────────────────────────────────────────── */
.colony-bg-shipyard {
    background-image: url('../assets/images/colony-screen-shipyard-bg.webp');
}

.colony-bg-captains-quarters {
    background-image: url('../assets/images/colony-screen-quarters-bg.webp');
}

/* (remaining shipyard styles moved to ShipyardTab.razor.css) */

/* ── GST clock ───────────────────────────────────────────────────────────── */
.gst-clock {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: rgba(0, 229, 255, 0.65);
    text-shadow: 0 0 6px rgba(0, 180, 255, 0.25);
    white-space: nowrap;
    margin-left: auto;
}

.scenario-badge {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.56rem;
    letter-spacing: 0.12em;
    color: rgba(0, 229, 255, 0.80);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.40);
    white-space: nowrap;
    margin-left: 12px;
    padding: 2px 8px;
    border: 1px solid rgba(0, 180, 255, 0.30);
    border-radius: 2px;
    background: rgba(0, 12, 30, 0.50);
    text-transform: uppercase;
}

.gst-clock.menu-gst {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(60, 110, 170, 0.55);
    text-shadow: none;
    text-align: right;
    margin-top: 8px;
    margin-left: 0;
}

/* ── Planet view – surface click popup styles moved to Popup.razor.css / PopupButton.razor.css ── */

/* ── popup-body: generic body text block inside a Popup ChildContent ──────────
   Defined here (global) not in Popup.razor.css because ChildContent is rendered
   by the parent component and therefore does not carry the Popup's CSS-isolation
   scope attribute — scoped rules from Popup.razor.css would never match it.     */
.popup-body {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.70rem;
    line-height: 1.6;
    letter-spacing: 0.10em;
    color: rgba(190, 220, 255, 0.9);
    text-align: center;
    padding: 4px 6px 10px;
}

.popup-warning {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: rgba(255, 180, 60, 0.95);
    text-align: center;
    padding: 6px 8px;
    margin: 0 0 6px;
    border: 1px solid rgba(255, 150, 30, 0.4);
    border-radius: 4px;
    background: rgba(255, 120, 0, 0.08);
}

/* ── Market intelligence (ColonyInfoPanel) ──────────────────────────────── */
.market-live-tag {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    color: rgba(80, 255, 120, 0.80);
    text-shadow: 0 0 6px rgba(80, 255, 120, 0.30);
    margin-left: 8px;
    vertical-align: middle;
}

.market-stale-tag {
    font-size: 0.54rem;
    letter-spacing: 0.10em;
    color: rgba(140, 170, 210, 0.55);
    margin-left: 8px;
    vertical-align: middle;
    font-style: italic;
}

.market-unknown {
    font-style: italic;
    color: rgba(120, 150, 190, 0.50);
    letter-spacing: 0.06em;
}

.info-gossip {
    padding: 3px 16px 3px 10px;
    font-size: 0.60rem;
    letter-spacing: 0.08em;
    border-left: 2px solid transparent;
    margin-bottom: 2px;
    color: rgba(180, 210, 250, 0.75);
}

.info-gossip.gossip-surplus {
    border-left-color: rgba(80, 255, 120, 0.40);
}

.info-gossip.gossip-demand {
    border-left-color: rgba(255, 150, 80, 0.40);
}

/* ── Pub gossip "Show" button ────────────────────────────────────────────── */
.gossip-show-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.56rem;
    letter-spacing: 0.12em;
    color: rgba(0, 229, 255, 0.75);
    background: transparent;
    border: 1px solid rgba(0, 229, 255, 0.30);
    border-radius: 2px;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gossip-show-btn:hover {
    background: rgba(0, 229, 255, 0.10);
    border-color: rgba(0, 229, 255, 0.60);
    color: rgba(0, 229, 255, 1.0);
}

/* ── Contract board ─────────────────────────────────────────────────────── */
.pub-contract-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 8px 0;
}

.pub-contract-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 180, 255, 0.12);
    border-radius: 0;
    padding: 10px var(--fc-pad-x);
    transition: background 0.15s;
}

.pub-contract-card:last-child {
    border-bottom: none;
}

.pub-contract-card:hover {
    background: rgba(0, 180, 255, 0.04);
}

.pub-contract-desc {
    color: rgba(210, 230, 255, 0.92);
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.pub-contract-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.pub-contract-badge {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid rgba(0, 180, 255, 0.30);
    color: rgba(0, 229, 255, 0.70);
    background: rgba(0, 100, 180, 0.12);
}

.pub-contract-badge.badge-delivery {
    border-color: rgba(255, 180, 0, 0.35);
    color: rgba(255, 200, 80, 0.85);
    background: rgba(120, 60, 0, 0.15);
}

.pub-contract-badge.badge-supply {
    border-color: rgba(80, 255, 120, 0.30);
    color: rgba(100, 220, 140, 0.85);
    background: rgba(0, 80, 30, 0.15);
}

.pub-contract-badge.badge-illegal {
    border-color: rgba(255, 90, 120, 0.45);
    color: rgba(255, 120, 150, 0.92);
    background: rgba(120, 10, 35, 0.18);
}

.pub-contract-badge.badge-crash-site {
    border-color: rgba(255, 200, 40, 0.45);
    color: rgba(255, 220, 80, 0.92);
    background: rgba(100, 60, 0, 0.18);
}

.pub-contract-badge.badge-passenger {
    border-color: rgba(100, 220, 255, 0.40);
    color: rgba(140, 230, 255, 0.90);
    background: rgba(0, 60, 100, 0.16);
}

.pub-contract-badge.badge-vip {
    border-color: rgba(200, 160, 255, 0.50);
    color: rgba(220, 180, 255, 0.95);
    background: rgba(60, 0, 120, 0.20);
}

.pub-contract-badge.badge-escort {
    border-color: rgba(255, 180, 50, 0.50);
    color: rgba(255, 200, 80, 0.95);
    background: rgba(80, 40, 0, 0.20);
}

.pub-dialog-btn-cryo {
    border-color: rgba(100, 220, 200, 0.55);
    color: rgba(130, 240, 220, 0.95);
}

.pub-dialog-btn-cryo:hover {
    background: rgba(0, 120, 100, 0.25);
}

.pub-contract-expires {
    font-size: 0.60rem;
    color: rgba(100, 150, 200, 0.65);
    letter-spacing: 0.10em;
    flex: 1;
}

.pub-contract-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.pub-contract-accept {
    font-size: 0.60rem;
    padding: 3px 10px;
    letter-spacing: 0.14em;
}

/* Active-contract warning banner in pub */
.pub-contract-active-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 160, 40, 0.25);
    background: transparent;
    color: rgba(255, 200, 100, 0.85);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

/* ── Active contract panel (Hangar + ShipDetails) ────────────────────────── */
.contract-panel {
    background: rgba(0, 20, 50, 0.45);
    border: 1px solid rgba(0, 180, 255, 0.20);
    border-radius: 4px;
    padding: 10px 14px;
    margin: 4px 0;
}

.contract-panel-title {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.60);
    margin-bottom: 6px;
}

.contract-desc-text {
    color: rgba(210, 230, 255, 0.88);
    font-size: 0.70rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.contract-actions-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 180, 255, 0.12);
}

.contract-abandon-prompt {
    font-size: 0.64rem;
    color: rgba(255, 160, 80, 0.85);
    letter-spacing: 0.06em;
    align-self: center;
}

/* ── Crash-site scan banner (planet view) ───────────────────────────────── */
.crash-scan-banner {
    position: fixed;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(120, 80, 0, 0.75);
    border: 1px solid rgba(255, 200, 40, 0.55);
    color: rgba(255, 230, 100, 0.95);
    font-family: 'Courier New', monospace;
    font-size: 0.70rem;
    letter-spacing: 0.18em;
    padding: 5px 18px;
    border-radius: 3px;
    backdrop-filter: blur(6px);
    z-index: 1100;
    pointer-events: none;
}

.threat-scan-banner {
    bottom: 84px;
}

.threat-scan-banner-police {
    background: rgba(14, 38, 88, 0.80);
    border-color: rgba(255, 210, 70, 0.58);
    color: rgba(255, 235, 120, 0.96);
}

.threat-scan-banner-pirate {
    background: rgba(78, 12, 14, 0.84);
    border-color: rgba(255, 210, 70, 0.60);
    color: rgba(255, 235, 120, 0.96);
}

.threat-scan-banner-stacked {
    bottom: 116px;
}

/* ── Crash-site cargo list in popup ────────────────────────────────────── */
.crash-site-cargo-list {
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    color: rgba(255, 220, 80, 0.90);
    letter-spacing: 0.08em;
    line-height: 1.6;
    padding: 4px 0;
}

/* ── Hangar status bars / perf / maint / module / fab ── moved to HangarTab.razor.css ── */

/* ── Shipyard section toggle ────────────────────────────────────────────── */

/* Blueprint module-type group header (used instead of colony-section-header in shipyard) */
.sy-group-header {
    color: rgba(0, 200, 255, 0.75);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.62rem;
    padding: 6px 16px 4px 16px;
    border-bottom: 1px solid rgba(0, 180, 255, 0.12);
}

/* ── Shipyard ship stats grid ─── moved to ShipyardTab.razor.css ─────────── */

/* ── Shipyard blueprint rows ─── moved to ShipyardTab.razor.css ─────────── */

/* ── Landscape phone / tablet  (height ≤ 600 px) ──────────────────────── */
@media (orientation: landscape) and (max-height: 600px) {
    #menuPanel {
        padding: 16px 24px 12px 24px;
        overflow-y: auto;
    }

    #gameTitle {
        margin-bottom: 10px;
    }

    .game-logo {
        max-width: 200px;
    }

    .menu-divider {
        margin-bottom: 10px;
    }

    #menuItems {
        gap: 2px;
    }

    .menu-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .menu-pilot-name {
        font-size: 0.72rem;
    }

    #version,
    .menu-gst {
        font-size: 0.65rem;
        margin-top: 6px;
    }
}

/* ── Mobile / narrow viewport ─────────────────────────────────────────── */

/* Large PC screens: widen side panels for more info space */
@media (min-width: 1200px) {
    .overlay-side-panel,
    #planetPanel {
        width: 280px;
    }
}

/* System and planet top bars: allow flex-wrap so stats can move to second line */
@media (max-width: 600px) {
    #systemTopBar,
    #planetTopBar {
        flex-wrap: wrap;
        height: auto;
        min-height: 44px;
        padding: 6px 12px;
    }

    /* Hide decorative separators on narrow screens */
    .colony-top-sep,
    .system-top-sep {
        display: none;
    }
}

/* Colony content panel: full-width on mobile */
@media (max-width: 600px) {
    #colonyContent {
        width: 100vw;
        border-radius: 0;
        align-self: stretch; /* fill the full available height on mobile */
    }
}

/* Planet panel: become a compact bottom strip on mobile */
@media (max-width: 600px) {
    #planetPanel {
        left: 0;
        right: 0;
        width: 100%;
        max-height: 40vh;
        top: auto;
        bottom: 29px;
        border-right: none;
        border-top: 1px solid rgba(0, 180, 255, 0.25);
    }
}

/* Small viewport typography tweaks */
@media (max-width: 480px) {
    /* Colony tab bar already scrolls via .fctabbar overflow-x:auto
       but reduce font/padding for tighter tabs */
    .colony-section-header {
        font-size: 0.70rem;
        letter-spacing: 0.18em;
    }

    .colony-section-subheader {
        font-size: 0.58rem;
        letter-spacing: 0.14em;
    }

    /* GST clock: compact on very small screens */
    .gst-clock-long { display: none; }
    .gst-clock-short { display: inline; }
}