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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #000;
    color: #fff;
    overflow: hidden;
}

#space-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    touch-action: none; /* pinch/drag drive OrbitControls, not browser zoom/scroll */
}

#travel-streaks {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

#stellar-comparison {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.stellar-hologram {
    --core-size: 12px;
    --marker-size: 48px;
    position: absolute;
    width: var(--marker-size);
    height: var(--marker-size);
    transform: translate(-50%, -50%);
    color: #63d9ff;
    filter: drop-shadow(0 0 7px rgba(72, 198, 255, 0.72));
    will-change: left, top;
}

.hologram-core,
.hologram-reticle,
.hologram-beam {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hologram-core {
    width: var(--core-size);
    height: var(--core-size);
    min-width: 1px;
    min-height: 1px;
    border: 1px solid rgba(179, 239, 255, 0.9);
    border-radius: 50%;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(215, 249, 255, 0.72) 0,
            rgba(215, 249, 255, 0.72) 1px,
            rgba(29, 155, 224, 0.22) 2px,
            rgba(29, 155, 224, 0.05) 4px
        ),
        radial-gradient(circle at 36% 32%, rgba(235, 253, 255, 0.9), rgba(54, 186, 239, 0.28) 48%, rgba(0, 82, 160, 0.08) 72%);
    box-shadow:
        0 0 5px rgba(158, 235, 255, 0.92),
        0 0 18px rgba(48, 178, 255, 0.58),
        inset 0 0 12px rgba(202, 246, 255, 0.5);
    animation: hologram-flicker 2.8s steps(1, end) infinite;
}

.hologram-reticle {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(84, 202, 255, 0.5);
    border-radius: 50%;
    box-shadow:
        0 0 9px rgba(60, 187, 255, 0.28),
        inset 0 0 9px rgba(60, 187, 255, 0.18);
    animation: hologram-pulse 2.2s ease-in-out infinite;
}

.hologram-reticle::before,
.hologram-reticle::after {
    content: '';
    position: absolute;
    background: rgba(105, 218, 255, 0.55);
}

.hologram-reticle::before {
    left: 50%;
    top: -6px;
    width: 1px;
    height: calc(100% + 12px);
}

.hologram-reticle::after {
    left: -6px;
    top: 50%;
    width: calc(100% + 12px);
    height: 1px;
}

.hologram-beam {
    width: 72%;
    height: 145%;
    opacity: 0.24;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(68, 194, 255, 0.18) 18%,
        rgba(129, 226, 255, 0.48) 50%,
        rgba(68, 194, 255, 0.18) 82%,
        transparent
    );
    clip-path: polygon(28% 0, 72% 0, 100% 50%, 72% 100%, 28% 100%, 0 50%);
}

.hologram-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 9px);
    min-width: 112px;
    transform: translateX(-50%);
    padding: 4px 8px 5px;
    border: 1px solid rgba(70, 186, 255, 0.36);
    border-radius: 4px;
    background: rgba(0, 18, 38, 0.58);
    box-shadow: 0 0 12px rgba(31, 156, 255, 0.16);
    color: #8de3ff;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.hologram-name {
    display: block;
    color: #d5f7ff;
    font-weight: 700;
}

.hologram-ratio {
    display: block;
    margin-top: 3px;
    color: #52c7ff;
    font-size: 9px;
    letter-spacing: 0.08em;
}

@keyframes hologram-pulse {
    0%, 100% { opacity: 0.48; transform: translate(-50%, -50%) scale(0.94); }
    50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes hologram-flicker {
    0%, 91%, 94%, 100% { opacity: 0.82; }
    92% { opacity: 0.5; }
    93% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
    #travel-streaks {
        display: none;
    }

    .hologram-core,
    .hologram-reticle {
        animation: none;
    }
}

/* Mobile-only chrome (bottom nav, sheet headers) — hidden on desktop */
.mobile-only {
    display: none;
}

#mobile-nav {
    display: none;
}

#compare-arrows {
    display: none; /* mobile size-compare mode only; desktop uses the scroll wheel */
}

#ui-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

#sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: rgba(0, 5, 15, 0.9);
    backdrop-filter: blur(15px);
    border-right: 1px solid rgba(74, 158, 255, 0.3);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    z-index: 20;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#sidebar.collapsed {
    transform: translateX(-280px);
}

#sidebar-toggle {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 80px;
    background: rgba(0, 5, 15, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: #88aaff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
    outline: none;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
}

#sidebar-toggle:hover {
    background: rgba(74, 158, 255, 0.25);
    color: #fff;
    border-color: rgba(74, 158, 255, 0.6);
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.4);
}

#sidebar-toggle::after {
    content: '◀';
    font-size: 0.7rem;
    transition: transform 0.3s;
}

#sidebar.collapsed #sidebar-toggle::after {
    content: '▶';
}

.sort-btn {
    width: 100%;
    padding: 8px 12px;
    background: rgba(74, 158, 255, 0.15);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sort-btn:hover {
    background: rgba(74, 158, 255, 0.25);
    border-color: rgba(74, 158, 255, 0.5);
}

.sort-label {
    color: #88aaff;
}

#sort-mode {
    color: #4a9eff;
    font-weight: 600;
}

/* Old home button style removed */

#object-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

#object-list::-webkit-scrollbar {
    width: 6px;
}

#object-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

#object-list::-webkit-scrollbar-thumb {
    background: rgba(74, 158, 255, 0.4);
    border-radius: 3px;
}

.object-category {
    margin-bottom: 15px;
}

.category-header {
    font-size: 0.75rem;
    color: #88aaff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(74, 158, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    gap: 8px;
}

.category-header:hover {
    color: #4a9eff;
    background: rgba(74, 158, 255, 0.1);
}

.category-title {
    flex: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-title::after {
    content: '▼';
    font-size: 0.6rem;
    transition: transform 0.3s;
}

.category-header.collapsed .category-title::after {
    transform: rotate(-90deg);
}

.category-sort-btn {
    background: rgba(74, 158, 255, 0.15);
    border: 1px solid rgba(74, 158, 255, 0.25);
    border-radius: 4px;
    color: #4a9eff;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 3px 8px;
    transition: all 0.2s;
    text-transform: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.category-sort-btn:hover {
    background: rgba(74, 158, 255, 0.3);
    border-color: rgba(74, 158, 255, 0.5);
}

.category-items {
    padding: 5px 0;
}

.category-items.collapsed {
    display: none;
}

.object-item {
    padding: 8px 12px;
    margin: 3px 5px;
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(74, 158, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    color: #aaccff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.object-item:hover {
    background: rgba(74, 158, 255, 0.2);
    border-color: rgba(74, 158, 255, 0.4);
    color: #fff;
}

.object-item.active {
    background: rgba(74, 158, 255, 0.3);
    border-color: rgba(74, 158, 255, 0.8);
    color: #fff;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.2);
}

.object-item::before {
    content: '•';
    font-size: 1.5rem;
    line-height: 0;
}

.object-info {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
}

.object-distance {
    font-size: 0.7rem;
    color: #88aaff;
    opacity: 0.8;
}

.size-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #4a9eff, #9d4aff);
    transition: width 0.3s ease;
    opacity: 0.6;
}

.size-tag {
    font-size: 0.7rem;
    color: #4a9eff;
    font-weight: 600;
}

.object-item.star::before { color: #FFDD44; }
.object-item.planet::before { color: #4a9eff; }
.object-item.exoplanet::before { color: #6CC6FF; }
.object-item.moon::before { color: #AAAAAA; }
.object-item.blackhole::before { content: '◉'; color: #FF4400; }
.object-item.galaxy::before { content: '◯'; color: #FFEEDD; }
.object-item.nebula::before { content: '○'; color: #FFAA88; }
.object-item.cluster::before { content: '✦'; color: #AAAADD; }

#header {
    position: absolute;
    top: 20px;
    left: 300px; /* Moved right to clear sidebar */
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 25; /* higher than sidebar if needed, but sidebar is left:0 */
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#sidebar.collapsed ~ #header {
    left: 44px;
}

.header-row {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 20px;
    color: #4a9eff;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

@keyframes pulseBrightBorder {
    0% {
        border-color: rgba(74, 158, 255, 0.4);
        box-shadow: 0 0 0 rgba(74, 158, 255, 0);
    }
    50% {
        border-color: rgba(74, 158, 255, 1);
        box-shadow: 0 0 15px rgba(74, 158, 255, 0.8), inset 0 0 10px rgba(74, 158, 255, 0.5);
    }
    100% {
        border-color: rgba(74, 158, 255, 0.4);
        box-shadow: 0 0 0 rgba(74, 158, 255, 0);
    }
}

.pulse-border {
    animation: pulseBrightBorder 1.5s ease-in-out infinite;
}

.header-btn:hover {
    background: rgba(74, 158, 255, 0.2);
    border-color: rgba(74, 158, 255, 0.8);
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.3);
    color: #fff;
    transform: translateY(-2px);
}

.header-btn .icon {
    font-size: 1.1rem;
}

.header-btn .text {
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

#header h1 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 4px;
    /* Small caps: capitals full height, the rest shorter capitals, so
       FreakinSpace reads FREAKIN·SPACE (and FreakInSpace, on "you" links,
       FREAK·IN·SPACE) */
    font-variant-caps: small-caps;
    background: linear-gradient(135deg, #4a9eff 0%, #9d4aff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(74, 158, 255, 0.5);
    margin: 0;
}

#zoom-level {
    font-size: 0.9rem;
    color: #88aaff;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#controls-info {
    position: absolute;
    bottom: calc(30px + var(--settings-row-height, 40px)); /* clear of the settings row */
    left: 300px;
    z-index: 1002; /* opened on demand: over the time panel and settings row */
    pointer-events: auto;
    background: rgba(0, 10, 30, 0.7);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid rgba(74, 158, 255, 0.3);
    transform-origin: bottom left;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                transform 0.25s ease,
                visibility 0.25s ease;
}

#sidebar.collapsed ~ #controls-info {
    left: 44px;
}

#controls-info-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #88aaff;
    font-size: 18px;
    line-height: 22px;
    cursor: pointer;
}
#controls-info-close:hover,
#controls-info-close:focus-visible { color: #fff; background: rgba(74, 158, 255, 0.2); }

#controls-info.minimized {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    pointer-events: none;
}

#controls-info-button {
    position: absolute;
    bottom: 20px;
    left: 300px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    color: #d9eaff;
    font-size: 1.35rem;
    line-height: 1;
    background: rgba(0, 10, 30, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 158, 255, 0.45);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    z-index: 30;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
}

#controls-info-button[hidden] {
    display: none;
}

#controls-info-button:hover,
#controls-info-button:focus-visible {
    background: rgba(74, 158, 255, 0.28);
    border-color: rgba(124, 190, 255, 0.8);
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(74, 158, 255, 0.4);
    outline: none;
}

#sidebar.collapsed ~ #controls-info-button {
    left: 44px;
}

.control-hint {
    font-size: 0.85rem;
    color: #aaccff;
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#guide-line-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.key {
    background: rgba(74, 158, 255, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #fff;
    border: 1px solid rgba(74, 158, 255, 0.5);
    min-width: 50px;
    text-align: center;
}

#body-info {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 300px;
    max-height: calc(100dvh - 40px); /* long entries (e.g. Mars) scroll instead of running off-screen */
    overflow-y: auto;
    background: rgba(0, 10, 30, 0.9);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    border: 1px solid rgba(74, 158, 255, 0.4);
    padding: 25px;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#body-info.hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(20px);
    pointer-events: none;
}

/* Tucked (desktop): slid right so only a ~26px tab shows at the screen edge */
#body-info {
    clip-path: inset(0 0 0 0 round 15px);
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#body-info.tucked:not(.hidden) {
    transform: translateY(-50%) translateX(calc(100% - 4px)); /* right: 20px → 24px left on screen */
    /* Only a short tab shows (same size as the object list's), not a strip the
       panel's full height; the clip also limits where hovering reopens it */
    clip-path: inset(calc(50% - 40px) calc(100% - 24px) calc(50% - 40px) 0 round 8px 0 0 8px);
    cursor: pointer;
}
/* The tab itself: a mirror of the object list's #sidebar-toggle (same size,
   fill, border, corners and arrow), drawn over the clipped panel edge.
   Offset by the panel's 1px border so it fills the clip exactly. */
#body-info::before {
    content: '◀';
    position: absolute;
    left: -1px;
    top: calc(50% - 41px);
    width: 24px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 5, 15, 0.95);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #88aaff;
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s, color 0.3s, border-color 0.3s;
    pointer-events: none;
    z-index: 1;
}
#body-info.tucked:not(.hidden)::before { opacity: 1; }
#body-info.tucked:not(.hidden):hover::before {
    background: rgba(74, 158, 255, 0.25);
    color: #fff;
    border-color: rgba(74, 158, 255, 0.6);
}


.body-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 15px;
}

#body-info h2 {
    font-size: 1.5rem;
    color: #4a9eff;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#body-size-subtitle {
    font-size: 0.95rem;
    color: #aaccff;
    opacity: 0.85;
    font-weight: normal;
    display: none; /* Hidden by default on desktop */
}

#minimize-info {
    display: none; /* Hidden by default on desktop */
}

#body-details {
    font-size: 0.9rem;
    line-height: 1.6;
}

#body-details .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(74, 158, 255, 0.2);
}

#body-details .detail-label {
    color: #88aaff;
}

#body-details .detail-value {
    color: #fff;
    font-weight: 500;
}

#close-info {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #88aaff;
    font-size: 1.5rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

#close-info:hover {
    background: rgba(74, 158, 255, 0.3);
    color: #fff;
}

/* Hover magnifier: a scope beside the cursor with a live close-up (main.js
   copies the 3D view into .mag-view, clipped to a circle; just a ring around it).
   Size must match MAGNIFIER_PX in main.js */
#magnifier {
    position: fixed;
    left: 0;
    top: 0;
    width: 380px;
    height: 380px;
    pointer-events: none;
    z-index: 1000; /* over "You" and other labels; under the settings row (1001) */
    opacity: 0;
    transition: opacity 0.25s ease;
}
#magnifier.visible { opacity: 1; }
#magnifier .mag-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(160px at 50% 50%);
}
body.ui-hidden #magnifier { display: none; }
#magnifier .mag-ring {
    position: absolute;
    inset: calc(50% - 158px);
    border-radius: 50%;
    border: 2px solid rgba(110, 190, 255, 0.85);
    box-shadow: 0 0 18px rgba(74, 158, 255, 0.55), inset 0 0 28px rgba(74, 158, 255, 0.25);
}
#magnifier .mag-sweep {
    position: absolute;
    inset: calc(50% - 171px);
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(120, 200, 255, 0.0) 0deg, rgba(120, 200, 255, 0.55) 22deg, rgba(120, 200, 255, 0) 40deg,
        transparent 180deg, rgba(120, 200, 255, 0.0) 180deg, rgba(120, 200, 255, 0.45) 200deg, rgba(120, 200, 255, 0) 216deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 160px, #000 162px 168px, transparent 170px);
    mask: radial-gradient(circle, transparent 0 160px, #000 162px 168px, transparent 170px);
    animation: mag-spin 3.6s linear infinite;
}
@keyframes mag-spin { to { transform: rotate(360deg); } }
#magnifier .mag-reticle {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(140, 210, 255, 0.8), rgba(140, 210, 255, 0.8)) 50% 28px / 2px 22px no-repeat,
        linear-gradient(rgba(140, 210, 255, 0.8), rgba(140, 210, 255, 0.8)) 50% calc(100% - 28px) / 2px 22px no-repeat,
        linear-gradient(rgba(140, 210, 255, 0.8), rgba(140, 210, 255, 0.8)) 28px 50% / 22px 2px no-repeat,
        linear-gradient(rgba(140, 210, 255, 0.8), rgba(140, 210, 255, 0.8)) calc(100% - 28px) 50% / 22px 2px no-repeat;
}
#magnifier .mag-name,
#magnifier .mag-zoom {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font: 600 13px/1 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(170, 220, 255, 0.95);
    text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 10px rgba(74, 158, 255, 0.8);
}
#magnifier .mag-name { top: 6px; }
#magnifier .mag-zoom { bottom: 6px; letter-spacing: 0.08em; color: rgba(255, 210, 140, 0.95); }

#hover-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(0, 10, 30, 0.9);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    border: 1px solid rgba(74, 158, 255, 0.4);
    padding: 12px 16px;
    z-index: 1001; /* over the "You" label and arrow (1000) */
    transition: opacity 0.2s ease;
    max-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#hover-tooltip.hidden {
    opacity: 0;
    visibility: hidden;
}

#tooltip-name {
    font-size: 1rem;
    color: #4a9eff;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#tooltip-content {
    font-size: 0.8rem;
    color: #aaccff;
    line-height: 1.5;
}

#tooltip-content .tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 3px 0;
}

#tooltip-content .tooltip-label {
    color: #88aaff;
    font-size: 0.75rem;
}

#tooltip-content .tooltip-value {
    color: #fff;
    font-size: 0.75rem;
    text-align: right;
}

/* Orbit line hover effect */
.orbit-highlight {
    filter: drop-shadow(0 0 5px rgba(74, 158, 255, 0.8));
}

#scale-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    pointer-events: auto;
    text-align: right;
}

.scale-bar {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
    margin-bottom: 8px;
    margin-left: auto;
}

#scale-label {
    font-size: 0.8rem;
    color: #88aaff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#scale-toggle-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;          /* narrow windows: wrap; the time panel follows (--settings-row-height) */
    justify-content: center;
    width: max-content;
    max-width: calc(100vw - 40px);
    gap: 8px 10px;
    z-index: 1001; /* above the time panel and the floating "You" label, so popup menus open over them */
}

.toggle-btn {
    background: rgba(0, 10, 30, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 20px;
    padding: 9px 16px;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap; /* one line per button, so values like "On + Starlink" don't grow the row */
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none; /* For when used as anchor tag */
}

.toggle-btn:hover {
    background: rgba(74, 158, 255, 0.3);
    border-color: rgba(74, 158, 255, 0.6);
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
}

.toggle-label {
    color: #88aaff;
}

#scale-mode,
#camera-lock-mode,
#orbital-mode,
#show-stars-mode,
#home-indicator-mode,
#constellations-mode {
    color: #4a9eff;
    font-weight: 600;
}

#view-mode {
    color: #4a9eff;
    font-weight: 600;
}

/* Size comparison list item styles */
.object-details .size-bar {
    display: inline-block;
    height: 4px;
    background: linear-gradient(90deg, #4a9eff, #88aaff);
    border-radius: 2px;
    margin-left: 8px;
    vertical-align: middle;
    min-width: 5px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.5s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-text {
    font-size: 1.2rem;
    color: #4a9eff;
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: pulse 2s ease-in-out infinite;
}

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

#home-indicator {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#home-indicator.hidden {
    opacity: 0;
    visibility: hidden;
}

#home-arrow {
    font-size: 2.5rem;
    color: #4a9eff;
    text-shadow: 0 0 15px rgba(74, 158, 255, 1), 0 0 30px rgba(74, 158, 255, 0.5);
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(74, 158, 255, 0.8));
}

#home-label {
    pointer-events: auto; /* click to fly down to your location */
    cursor: pointer;
    font-size: 0.7rem;
    color: #4a9eff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    background: rgba(0, 10, 30, 0.9);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(74, 158, 255, 0.5);
    white-space: nowrap;
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.3);
}

/* Konami-code easter egg marker: same shape as the home arrow, pointed at Uranus. */
#miko-indicator {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#miko-indicator.hidden {
    opacity: 0;
    visibility: hidden;
}

#miko-arrow {
    font-size: 2.5rem;
    color: #ff5ad9;
    text-shadow: 0 0 15px rgba(255, 90, 217, 1), 0 0 30px rgba(255, 90, 217, 0.5);
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(255, 90, 217, 0.8));
}

#miko-label {
    font-size: 0.7rem;
    color: #ff5ad9;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    background: rgba(30, 0, 24, 0.9);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 90, 217, 0.5);
    white-space: nowrap;
    box-shadow: 0 0 15px rgba(255, 90, 217, 0.3);
}

#info-popup {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    animation: slideInRight 0.4s ease-out;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
}

#info-popup.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#info-popup-content {
    background: rgba(0, 20, 40, 0.95);
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 8px;
    padding: 20px 24px;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(74, 158, 255, 0.2);
    position: relative;
}

#info-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #88aaff;
    font-size: 1.5rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
}

#info-popup-close:hover {
    background: rgba(74, 158, 255, 0.2);
    color: #4a9eff;
}

#info-popup h3 {
    margin: 0 0 12px 0;
    color: #4a9eff;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#info-popup p {
    margin: 0 0 10px 0;
    color: #aaccff;
    font-size: 0.9rem;
    line-height: 1.5;
}

#info-popup p:last-child {
    margin-bottom: 0;
}

.info-contact {
    font-size: 0.85rem !important;
    color: #88aaff !important;
}

.info-contact a {
    color: #4a9eff;
    text-decoration: none;
    transition: color 0.2s;
}

.info-contact a:hover {
    color: #6bbfff;
    text-decoration: underline;
}

#info-button {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 20, 40, 0.9);
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 50%;
    color: #4a9eff;
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

#info-button:hover {
    background: rgba(74, 158, 255, 0.3);
    border-color: rgba(74, 158, 255, 0.6);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.4);
}

#info-button.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ── Timeline Panel ─────────────────────────────────────────────────── */

#timeline-panel {
    position: absolute;
    bottom: calc(30px + var(--settings-row-height, 40px)); /* 10px above the settings row (bottom: 20px) */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 10, 30, 0.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 16px;
    padding: 12px 18px 14px;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 480px;
    z-index: 30;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

#timeline-panel.hidden {
    display: none;
}

#tl-date-display {
    font-size: 0.9rem;
    color: #cce0ff;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

#timeline-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tl-btn {
    background: rgba(74, 158, 255, 0.15);
    border: 1px solid rgba(74, 158, 255, 0.35);
    border-radius: 8px;
    color: #cce0ff;
    font-size: 0.95rem;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 34px;
    text-align: center;
    line-height: 1.2;
}

.tl-btn:hover {
    background: rgba(74, 158, 255, 0.35);
    border-color: rgba(74, 158, 255, 0.7);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
}

.tl-play {
    background: rgba(74, 158, 255, 0.25);
    border-color: rgba(74, 158, 255, 0.6);
    font-size: 1.05rem;
    padding: 5px 14px;
    width: 46px; /* ▶ and ⏸ differ in width; keep the panel from shifting */
}

.tl-now-btn {
    font-size: 0.8rem;
    padding: 5px 12px;
}

.tl-step {
    font-size: 1.15rem;
    font-weight: 600;
    min-width: 38px;
}

#tl-presets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.tl-preset {
    font-size: 0.75rem;
    padding: 3px 9px;
    white-space: nowrap;
}

.tl-preset.active {
    background: rgba(255, 170, 136, 0.25);
    border-color: rgba(255, 170, 136, 0.8);
    color: #fff;
}

#tl-controls-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

#tl-speed-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.tl-slider-label {
    font-size: 0.75rem;
    color: #ffaa88;
    user-select: none;
    white-space: nowrap;
}

/* Fixed width, one line: a changing readout mustn't resize the panel mid-recording */
#tl-speed-label {
    white-space: nowrap;
    min-width: 6.6em; /* fits the longest readout, "-243 days/s" */
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#tl-speed-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 170, 136, 0.25);
    outline: none;
    cursor: pointer;
}

#tl-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffaa88;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 170, 136, 0.6);
    transition: transform 0.1s ease;
}

#tl-speed-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

#tl-speed-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffaa88;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(255, 170, 136, 0.6);
    transition: transform 0.1s ease;
}

#tl-speed-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}



#tl-date-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

#tl-date-picker {
    background: rgba(0, 10, 30, 0.7);
    border: 1px solid rgba(74, 158, 255, 0.35);
    border-radius: 8px;
    color: #cce0ff;
    font-size: 0.82rem;
    padding: 5px 8px;
    cursor: pointer;
    outline: none;
    color-scheme: dark;
}

#tl-date-picker:focus {
    border-color: rgba(74, 158, 255, 0.7);
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.2);
}

/* ── Mobile layout: bottom nav bar + slide-up sheets ────────────────────
   Applies to phones/small tablets in portrait, and short landscape phones.
   Keep this query in sync with MOBILE_LAYOUT_MQ in js/main.js. */
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    .mobile-only {
        display: flex;
    }

    /* Bottom navigation bar */
    #mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        background: rgba(0, 5, 15, 0.92);
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(74, 158, 255, 0.3);
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
        z-index: 60;
        pointer-events: auto;
    }

    .mnav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        border-radius: 8px;
        color: #88aaff;
        font-size: 0.6rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        padding: 4px 0;
        min-height: 48px;
        cursor: pointer;
    }

    .mnav-btn .mnav-icon {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .mnav-btn.active {
        color: #fff;
        background: rgba(74, 158, 255, 0.2);
    }

    .mnav-btn.hidden {
        display: none;
    }

    /* Info is a minor action: icon only, doesn't get an equal share of the bar */
    #mnav-info {
        flex: 0 0 44px;
    }

    #mnav-info .mnav-label {
        display: none;
    }

    /* Size-compare prev/next arrows at the screen edges */
    #compare-arrows:not(.hidden) {
        display: block;
    }

    .compare-arrow {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 72px;
        background: rgba(0, 10, 30, 0.6);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(74, 158, 255, 0.4);
        color: #88aaff;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 6px; /* optically center the chevron glyph */
    }

    #compare-prev {
        left: 0;
        border-left: none;
        border-radius: 0 12px 12px 0;
    }

    #compare-next {
        right: 0;
        border-right: none;
        border-radius: 12px 0 0 12px;
    }

    /* Shared sheet header (Objects / Settings) */
    .sheet-header {
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 12px 10px;
        border-bottom: 1px solid rgba(74, 158, 255, 0.2);
        flex-shrink: 0;
    }

    .sheet-title {
        color: #88aaff;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 0.8rem;
    }

    .sheet-close {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        color: #88aaff;
        font-size: 1.6rem;
        cursor: pointer;
    }

    /* Header — compact wordmark, no buttons (Home/Size Compare live in nav/settings) */
    #header,
    #sidebar.collapsed ~ #header {
        left: 12px;
        top: 10px;
        right: auto;
        align-items: flex-start;
        text-align: left;
    }

    #header h1 {
        font-size: 1.1rem;
        letter-spacing: 2px;
    }

    #zoom-level {
        font-size: 0.65rem;
        letter-spacing: 1px;
        margin-top: 2px;
    }

    .header-buttons {
        display: none;
    }

    #controls-info,
    #controls-info-button {
        display: none; /* keyboard/mouse hints don't apply on touch */
    }

    #hover-tooltip {
        display: none; /* no hover on touch; tap opens the info card instead */
    }

    #scale-indicator {
        bottom: auto;
        top: 12px;
        right: 12px;
    }

    .scale-bar {
        width: 70px;
    }

    #scale-label {
        font-size: 0.65rem;
    }

    /* Sidebar → full-width bottom sheet */
    #sidebar {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 70dvh;
        border-right: none;
        border-top: 1px solid rgba(74, 158, 255, 0.4);
        border-radius: 16px 16px 0 0;
        transform: translateY(0);
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
        z-index: 55;
    }

    #sidebar.collapsed {
        transform: translateY(110%);
    }

    #sidebar-toggle {
        display: none;
    }

    .object-item {
        padding: 12px;
        font-size: 0.9rem;
    }

    /* Toggle row → Settings bottom sheet (opened via nav) */
    #scale-toggle-container {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        transform: translateY(110%);
        flex-direction: column;
        flex-wrap: nowrap;   /* scrolling sheet; desktop's wrap would split it into columns */
        max-width: none;
        gap: 8px;
        background: rgba(0, 5, 15, 0.95);
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(74, 158, 255, 0.4);
        border-radius: 16px 16px 0 0;
        padding: 0 14px calc(70px + env(safe-area-inset-bottom));
        max-height: 80dvh;
        overflow-y: auto;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 55;
    }

    #scale-toggle-container.mobile-open {
        transform: translateY(0);
    }

    #scale-toggle-container .sheet-header {
        margin: 0 -14px 6px;
    }

    #scale-toggle-container .toggle-btn {
        width: 100%;
        justify-content: space-between;
        min-height: 48px;
        border-radius: 10px;
        font-size: 0.85rem;
        background: rgba(0, 20, 40, 0.6);
    }

    /* Timeline → sheet above the nav; compact by default, chevron expands */
    #timeline-panel {
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        bottom: calc(56px + env(safe-area-inset-bottom));
        transform: translateY(130%);
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        padding: 10px 12px;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 57;
    }

    #body-info:not(.hidden).minimized ~ #timeline-panel {
        bottom: calc(118px + env(safe-area-inset-bottom)) !important;
    }

    #timeline-panel.mobile-open {
        transform: translateY(0);
    }

    #timeline-panel.hidden {
        display: none;
    }

    #timeline-controls {
        gap: 3px !important;
    }

    #timeline-controls .tl-btn {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 4px 6px !important;
        font-size: 0.82rem !important;
    }

    #tl-controls-slider-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #tl-speed-slider-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 !important;
        min-width: 0 !important; /* let the slider shrink instead of overflowing the screen */
    }

    #tl-speed-slider {
        min-width: 0 !important;
        width: 100% !important;
    }

    #timeline-controls .tl-step,
    #timeline-controls .tl-play {
        min-width: 0 !important;
        width: auto !important;
    }

    .tl-slider-label {
        display: none !important; /* hide Reverse/Forward labels on mobile to save space */
    }

    #tl-speed-label {
        min-width: 52px !important;
        font-size: 0.72rem !important;
    }

    #tl-date-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    #tl-date-display {
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        margin-right: 2px !important;
    }

    .tl-date-btn {
        font-size: 0.76rem !important;
        padding: 4px 6px !important;
        min-height: 28px !important;
        white-space: nowrap !important;
    }

    .tl-now-btn {
        font-size: 0.76rem !important;
        padding: 4px 8px !important;
        min-height: 28px !important;
        white-space: nowrap !important;
    }

    /* Beta popup + info button */
    #info-popup {
        top: 12px;
        right: 12px;
        left: 12px;
        min-width: auto;
    }

    #info-popup-content {
        min-width: auto;
    }

    #info-button {
        top: auto;
        bottom: calc(64px + env(safe-area-inset-bottom));
        right: 12px;
        display: none; /* the nav Info button replaces the floating one on mobile */
    }
}

/* Portrait phones: body info card slides up above the nav bar */
@media (max-width: 768px) and (orientation: portrait), (max-width: 500px) {
    #body-info {
        top: auto;
        bottom: calc(64px + env(safe-area-inset-bottom));
        right: 12px;
        left: 12px;
        width: auto;
        max-height: 34dvh;
        overflow-y: auto;
        transform: translateY(0);
        margin: 0;
        padding: 14px 14px 12px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
        clip-path: none; /* the desktop tab clip would cut the card's shadow */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
        z-index: 56;
    }

    #body-info.hidden {
        opacity: 0;
        transform: translateY(140%);
        pointer-events: none;
    }

    #minimize-info {
        display: flex;
        position: absolute;
        top: 12px;
        right: 42px; /* positioned next to close-info at right: 12px */
        background: none;
        border: none;
        color: #88aaff;
        font-size: 0.8rem;
        cursor: pointer;
        width: 30px;
        height: 30px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s;
        z-index: 60;
    }

    .body-title-row {
        margin-bottom: 8px;
        align-items: center;
    }

    #body-info.minimized .body-title-row {
        margin-bottom: 0;
    }

    #body-info h2 {
        font-size: 1.1rem;
        margin-bottom: 0;
        padding-right: 65px; /* keep clear of both buttons */
    }

    #body-info.minimized {
        max-height: 44px; /* compact docked height showing just title line */
        padding: 10px 14px;
        overflow: hidden;
    }

    #body-info.minimized #body-details {
        opacity: 0;
        pointer-events: none;
        display: none !important;
    }

    #body-info.minimized #minimize-info {
        transform: rotate(180deg); /* point up to expand */
    }

    #body-info.minimized #body-size-subtitle {
        display: inline-block;
        font-size: 0.85rem;
        color: #aaccff;
        font-weight: normal;
        margin-left: 2px;
    }

    /* Stats as a compact 2-column grid instead of one full-width row each */
    #body-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
        line-height: 1.35;
    }

    #body-details .detail-row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1px;
        padding: 5px 9px;
        background: rgba(0, 20, 40, 0.5);
        border: 1px solid rgba(74, 158, 255, 0.15);
        border-radius: 8px;
    }

    #body-details .detail-label {
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #body-details .detail-value {
        font-size: 0.82rem;
        text-align: left;
    }

    /* Description / fun facts / scale comparison keep the full width */
    #body-details .detail-row.detail-block {
        grid-column: 1 / -1;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
    }
}

/* Short landscape phones: hide header, body info docks right */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    #header {
        display: none; /* maximize canvas space */
    }

    /* Move bottom buttons row to the right edge as a vertical sidebar */
    #mobile-nav {
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 64px !important;
        height: 100vh !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        border-top: none !important;
        border-left: 1px solid rgba(74, 158, 255, 0.3) !important;
        padding: calc(10px + env(safe-area-inset-top)) 4px 10px !important;
        gap: 6px !important;
    }

    .mnav-btn {
        width: 100% !important;
        flex: 0 0 auto !important;
        min-height: 50px !important;
    }

    /* Move body info card to the bottom and make it wide, clearing the right nav */
    #body-info {
        top: auto !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 76px !important; /* 64px nav + 12px margin */
        width: auto !important;
        max-height: 34dvh !important;
        transform: translateY(0) !important;
        overflow-y: auto;
        padding: 14px 14px 12px !important;
        clip-path: none !important;
        z-index: 56;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #body-info.hidden {
        opacity: 0 !important;
        transform: translateY(140%) !important;
        pointer-events: none !important;
    }

    #minimize-info {
        display: flex !important;
        position: absolute !important;
        top: 12px !important;
        right: 42px !important; /* next to close button */
        background: none !important;
        border: none !important;
        color: #88aaff !important;
        font-size: 0.8rem !important;
        cursor: pointer !important;
        width: 30px !important;
        height: 30px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        transform: none !important; /* normal vertical chevron */
        transition: all 0.2s !important;
        z-index: 60 !important;
    }

    /* Collapsed minimized bottom bar state in landscape mode */
    #body-info.minimized {
        max-height: 44px !important;
        padding: 10px 14px !important;
        overflow: hidden !important;
    }

    #body-info.minimized #body-details,
    #body-info.minimized #body-desc {
        opacity: 0 !important;
        pointer-events: none !important;
        display: none !important;
    }

    #body-info.minimized #minimize-info {
        transform: rotate(180deg) !important; /* point up to expand */
    }

    #body-info.minimized #body-size-subtitle {
        display: inline-block !important;
        font-size: 0.85rem !important;
        color: #aaccff !important;
        font-weight: normal !important;
        margin-left: 2px !important;
    }

    #body-info h2 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    #body-details {
        font-size: 0.8rem;
    }

    #body-details .detail-row {
        padding: 4px 0;
    }

    /* Shift next comparison arrow left so it doesn't overlap right nav bar */
    #compare-next {
        right: 64px !important;
    }

    /* Shift timeline panel left and adjust bottom spacing to clear right nav */
    #timeline-panel {
        right: 64px !important;
        width: calc(100% - 64px) !important;
        bottom: 0 !important;
        z-index: 57 !important;
    }

    #body-info:not(.hidden).minimized ~ #timeline-panel {
        bottom: 66px !important; /* 12px bottom + 44px minimized height + 10px spacing */
    }

    /* Shift beta popup left so it centers inside the remaining space */
    #info-popup {
        right: 76px !important;
    }

    #sidebar {
        height: auto;
        max-height: calc(100dvh - 60px);
    }

    #scale-toggle-container {
        right: 64px !important;
        width: calc(100% - 64px) !important;
        max-height: 100dvh !important;
        height: auto !important;
        padding: 0 14px 14px !important;
    }
}

/* Esri imagery credit, shown only while satellite tiles are on screen */
#imagery-attribution {
    position: fixed;
    right: 8px;
    bottom: 4px;
    z-index: 5;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    display: none;
}
#imagery-attribution.visible { display: block; }

/* Satellite data couldn't be downloaded (details in the button's tooltip) */
#satellites-toggle.has-warning::after {
    content: ' \26A0';
    color: #ffb347;
}

/* View orientation buttons, top left under the title (the right side is
   taken by the info card) */
#view-orientation {
    position: fixed;
    top: 110px;
    left: 20px;
    display: flex;
    gap: 8px;
    z-index: 40;
    pointer-events: auto;
}
#view-orientation button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 20, 40, 0.9);
    border: 1px solid rgba(74, 158, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
#view-orientation button:hover {
    border-color: rgba(74, 158, 255, 0.8);
    box-shadow: 0 0 12px rgba(74, 158, 255, 0.4);
}
#view-orientation button[hidden] { display: none; }
#compass-needle { transition: transform 0.08s linear; }
#compass-btn svg { flex-shrink: 0; }

@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    #view-orientation { left: 12px; top: 96px; }
}

/* Popup menus in the bottom settings row (e.g. Stars). Open upward on
   desktop; inline inside the mobile settings sheet. */
.popup-menu { position: relative; }
.popup-caret { font-size: 0.7rem; color: #88aaff; margin-left: 2px; transition: transform 0.2s; }
.popup-menu.open .popup-caret { transform: rotate(180deg); }
.popup-menu-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    padding: 10px 12px;
    background: rgba(0, 10, 30, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(74, 158, 255, 0.45);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    z-index: 60;
    text-align: left;
}
/* invisible bridge so the pointer can travel from the button to the panel */
.popup-menu-panel::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -10px; height: 10px;
}
.popup-menu.open .popup-menu-panel { display: block; }
.popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    color: #e6efff;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 6px;
}
.popup-row:hover { background: rgba(74, 158, 255, 0.15); }
.popup-action { width: 100%; background: none; border: 0; font: inherit; text-align: left; }
.popup-row input { accent-color: #4a9eff; margin: 0; }
.popup-hint { color: #88aaff; font-size: 0.72rem; }
.popup-heading {
    margin: 8px 4px 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(74, 158, 255, 0.25);
    color: #88aaff;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    .popup-menu-panel {
        position: static;
        transform: none;
        margin-top: 6px;
        min-width: 0;
        box-shadow: none;
    }
    .popup-menu-panel::after { display: none; }
    .popup-row { padding: 10px 6px; font-size: 0.95rem; } /* finger-sized */
}

.popup-row.disabled { opacity: 0.45; cursor: default; }
.popup-row.disabled:hover { background: none; }
.popup-note { display: block; padding: 2px 4px 4px; white-space: normal; max-width: 240px; }
.popup-note[hidden] { display: none; }

/* Scale menu */
.popup-heading-first { margin-top: 0; padding-top: 0; border-top: 0; }
.scale-panel { min-width: 280px; left: 0; transform: none; } /* leftmost button: open rightward so it isn't cut off */
#scale-slider { width: 100%; margin: 8px 0 2px; accent-color: #4a9eff; }
.popup-slider-row { flex-wrap: wrap; }
.popup-slider-row input[type="range"] { flex-basis: 100%; margin: 4px 0 0; accent-color: #4a9eff; }
.scale-slider-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: #88aaff; }
.scale-presets { display: flex; gap: 6px; margin: 10px 0 6px; }
.scale-presets .tl-btn { flex: 1; font-size: 0.78rem; padding: 4px 6px; }
.scale-preset.active {
    background: rgba(255, 170, 136, 0.25);
    border-color: rgba(255, 170, 136, 0.8);
    color: #fff;
}

/* H: hide the whole interface (clean screenshots / recordings) */
body.ui-hidden #ui-container {
    opacity: 0;
    transition: opacity 0.25s ease;
}
body.ui-hidden #ui-container,
body.ui-hidden #ui-container * {
    pointer-events: none !important;
}
#ui-hidden-hint {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(0, 10, 30, 0.7);
    border: 1px solid rgba(74, 158, 255, 0.3);
    color: #cfe3ff;
    font-size: 0.85rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#ui-hidden-hint.show { opacity: 1; }

/* Custom orbital editing hint sits on its own row in the settings tray. */
#custom-orbit-hint {
    flex-basis: 100%;
    order: 20;
    text-align: center;
    color: #b9d7f5;
    font-size: 0.75rem;
    padding: 4px 10px;
}
#tl-controls-slider-row button:disabled, #tl-speed-slider:disabled, #tl-presets button:disabled {
    opacity: 0.45;
    cursor: default;
}