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

body {
    overflow: hidden;
    background: #050510;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #fff;
}

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#version-tag {
    position: fixed;
    bottom: 8px;
    right: 12px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(5, 217, 232, 0.35);
    letter-spacing: 0.05em;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
}

#hard-refresh {
    position: fixed;
    bottom: 6px;
    right: 70px;
    font-size: 12px;
    background: rgba(5, 217, 232, 0.1);
    color: rgba(5, 217, 232, 0.5);
    border: 1px solid rgba(5, 217, 232, 0.2);
    border-radius: 3px;
    padding: 1px 6px;
    cursor: pointer;
    z-index: 9999;
    font-family: 'Courier New', monospace;
    transition: all 0.2s;
}
#hard-refresh:hover {
    background: rgba(5, 217, 232, 0.25);
    color: rgba(5, 217, 232, 0.9);
    border-color: rgba(5, 217, 232, 0.5);
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #050510 0%, #0d0520 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 1000;
    transition: opacity 0.8s ease;
}

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

#loading span {
    font-size: 0.85rem;
    letter-spacing: 0.3rem;
    color: rgba(5, 217, 232, 0.5);
    text-transform: lowercase;
}

.loader {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(157, 78, 221, 0.2);
    border-top-color: rgba(255, 42, 109, 0.7);
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── DOM HUD Overlay ───────────────────────────── */

#hud-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none;
    font-family: 'Courier New', monospace;
    transition: opacity 0.3s ease;
}
#hud-overlay.hidden { opacity: 0; }

/* ── Instructions (bottom-left) ── */

.hud-instructions {
    position: absolute;
    bottom: 24px; left: 24px;
    font-size: 11px;
    line-height: 1.7;
    color: rgba(5, 217, 232, 0.45);
}
.hud-instructions kbd {
    display: inline-block;
    min-width: 16px;
    padding: 1px 5px;
    border: 1px solid rgba(5, 217, 232, 0.25);
    border-radius: 3px;
    font-family: inherit;
    font-size: 10px;
    text-align: center;
    color: rgba(5, 217, 232, 0.65);
    background: rgba(5, 217, 232, 0.06);
    margin-right: 2px;
}

/* ── Speed gauge (above gimbal, bottom-right) ── */

.hud-speed {
    position: absolute;
    bottom: 116px; right: 24px;
    width: 80px;
    text-align: center;
}
.hud-speed__val {
    font-size: 22px;
    font-weight: bold;
    color: rgba(5, 217, 232, 0.75);
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(5, 217, 232, 0.3);
}
.hud-speed__unit {
    font-size: 9px;
    color: rgba(5, 217, 232, 0.4);
    margin-top: -2px;
}

/* ── Gimbal (bottom-right) ── */

.hud-gimbal {
    position: absolute;
    bottom: 24px; right: 24px;
    width: 80px; height: 80px;
    perspective: 200px;
}
.hud-gimbal__ring {
    position: absolute;
    top: 50%; left: 50%;
    border: 1px solid rgba(5, 217, 232, 0.35);
    border-radius: 50%;
    transform-style: preserve-3d;
}
.hud-gimbal__ring--yaw {
    width: 70px; height: 70px;
    margin: -35px 0 0 -35px;
}
.hud-gimbal__ring--pitch {
    width: 54px; height: 54px;
    margin: -27px 0 0 -27px;
    border-color: rgba(255, 42, 109, 0.3);
}
.hud-gimbal__ring--roll {
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border-color: rgba(157, 78, 221, 0.35);
}
.hud-gimbal__dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: rgba(5, 217, 232, 0.8);
}

/* ── Throttle slider (right side) ── */

.hud-throttle {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 160px;
    pointer-events: none;
}
.hud-throttle__track {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 100%;
    background: rgba(5, 217, 232, 0.1);
    border: 1px solid rgba(5, 217, 232, 0.2);
    border-radius: 3px;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
}
.hud-throttle__fill {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(5, 217, 232, 0.6), rgba(255, 42, 109, 0.6));
    border-radius: 2px;
    transition: height 0.05s linear;
}
.hud-throttle__thumb {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 18px; height: 6px;
    background: rgba(5, 217, 232, 0.7);
    border: 1px solid rgba(5, 217, 232, 0.5);
    border-radius: 2px;
    pointer-events: auto;
    cursor: grab;
}
.hud-throttle__thumb:active { cursor: grabbing; }
.hud-throttle__label {
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    font-size: 9px;
    color: rgba(5, 217, 232, 0.4);
    white-space: nowrap;
}

/* ── Multiplier (below throttle) ── */

.hud-multiplier {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(calc(-50% + 110px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: auto;
}
.hud-multiplier__btn {
    width: 24px; height: 18px;
    background: rgba(5, 217, 232, 0.08);
    border: 1px solid rgba(5, 217, 232, 0.25);
    border-radius: 3px;
    color: rgba(5, 217, 232, 0.6);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hud-multiplier__btn:hover {
    background: rgba(5, 217, 232, 0.15);
    color: rgba(5, 217, 232, 0.9);
}
.hud-multiplier__val {
    font-size: 11px;
    color: rgba(5, 217, 232, 0.6);
    padding: 2px 0;
    min-width: 24px;
    text-align: center;
}

/* ── Title Screen ────────────────────────────── */

#title-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    font-family: 'Courier New', monospace;
    transition: opacity 0.6s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#title-screen.hidden {
    opacity: 0;
    pointer-events: none;
}
#title-screen h1 {
    font-size: 6rem;
    font-weight: bold;
    letter-spacing: 0.4rem;
    color: #05d9e8;
    text-shadow:
        0 0 10px rgba(5, 217, 232, 0.8),
        0 0 40px rgba(5, 217, 232, 0.4),
        0 0 80px rgba(255, 42, 109, 0.3),
        0 0 120px rgba(157, 78, 221, 0.2);
    margin-bottom: 2rem;
}

/* ── Title splash (idle state) ── */

.title-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: splash-fadein 1.5s ease-out both;
}
.title-splash.hidden {
    display: none;
}
.title-splash h1 {
    animation: splash-logo-enter 1.5s ease-out both, logo-breathe 4s ease-in-out 1.5s infinite, logo-glitch 8s step-end 3s infinite;
}

@keyframes splash-fadein {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1.0); }
}
@keyframes splash-logo-enter {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1.0); }
}
@keyframes logo-breathe {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(5, 217, 232, 0.8),
            0 0 40px rgba(5, 217, 232, 0.4),
            0 0 80px rgba(255, 42, 109, 0.3),
            0 0 120px rgba(157, 78, 221, 0.2);
    }
    50% {
        text-shadow:
            0 0 15px rgba(5, 217, 232, 1.0),
            0 0 50px rgba(5, 217, 232, 0.6),
            0 0 100px rgba(255, 42, 109, 0.45),
            0 0 140px rgba(157, 78, 221, 0.3);
    }
}
@keyframes logo-glitch {
    0%, 2.5% {
        text-shadow:
            2px 0 rgba(255, 42, 109, 0.7),
            -2px 0 rgba(5, 217, 232, 0.7),
            0 0 10px rgba(5, 217, 232, 0.8),
            0 0 40px rgba(5, 217, 232, 0.4);
    }
    2.5%, 100% {
        text-shadow:
            0 0 10px rgba(5, 217, 232, 0.8),
            0 0 40px rgba(5, 217, 232, 0.4),
            0 0 80px rgba(255, 42, 109, 0.3),
            0 0 120px rgba(157, 78, 221, 0.2);
    }
}

.title-splash__prompt {
    font-size: 0.75rem;
    letter-spacing: 0.4rem;
    color: rgba(5, 217, 232, 0.5);
    animation: splash-prompt-blink 2s ease-in-out infinite;
    margin-top: -0.5rem;
}
@keyframes splash-prompt-blink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.1; }
}

/* ── Splash fade-out ── */
.title-splash.fade-out {
    animation: splash-fadeout 0.4s ease-out forwards;
}
@keyframes splash-fadeout {
    to { opacity: 0; transform: scale(1.02); }
}

/* ── Title menu (console-style) ── */

.title-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.title-menu.hidden {
    display: none;
}
.title-menu__item {
    font-size: 1rem;
    letter-spacing: 0.3rem;
    color: rgba(5, 217, 232, 0.35);
    cursor: pointer;
    padding: 4px 20px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(8px);
}
.title-menu__item.stagger-in {
    animation: menu-stagger-in 0.35s ease-out forwards;
}
@keyframes menu-stagger-in {
    to { opacity: 1; transform: translateY(0); }
}
.title-menu__item.active {
    color: rgba(5, 217, 232, 0.9);
    text-shadow: 0 0 10px rgba(5, 217, 232, 0.5);
    animation: menu-stagger-in 0.35s ease-out forwards, blink-prompt 1.2s ease-in-out 0.35s infinite;
}
.title-menu__item:hover {
    color: rgba(5, 217, 232, 0.7);
}

/* ── Menu fade-out (for warp transition) ── */
.title-menu.fade-out {
    animation: menu-fadeout 0.2s ease-out forwards;
}
@keyframes menu-fadeout {
    to { opacity: 0; }
}

/* ── Title settings panel ── */

.title-settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.title-settings.hidden {
    display: none;
}
.title-settings.slide-in-right {
    animation: slide-in-from-right 0.3s ease-out forwards;
}
.title-menu.slide-out-left {
    animation: slide-out-to-left 0.3s ease-out forwards;
}
.title-settings.slide-out-right {
    animation: slide-out-to-right 0.3s ease-out forwards;
}
.title-menu.slide-in-left {
    animation: slide-in-from-left 0.3s ease-out forwards;
}

@keyframes slide-out-to-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40px); }
}
@keyframes slide-in-from-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-to-right {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}
@keyframes slide-in-from-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.title-settings__item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    color: rgba(5, 217, 232, 0.35);
    cursor: pointer;
    padding: 4px 16px;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.title-settings__item.active {
    color: rgba(5, 217, 232, 0.9);
    text-shadow: 0 0 8px rgba(5, 217, 232, 0.4);
}
.title-settings__val {
    font-weight: bold;
    min-width: 70px;
    text-align: center;
}
.title-settings__cycle {
    font-size: 0.8rem;
    color: rgba(5, 217, 232, 0.25);
    user-select: none;
    cursor: pointer;
}
.title-settings__item.active .title-settings__cycle {
    color: rgba(5, 217, 232, 0.5);
}
.title-settings__val.on {
    color: #00f5ff;
    text-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
}
/* ── Cockpit preview tile ── */

.title-settings__preview {
    display: flex;
    justify-content: center;
    margin: 4px 0 8px;
}
.title-settings__cockpit-canvas,
.title-settings__ship-canvas {
    width: 180px;
    height: 110px;
    border: 1px solid rgba(5, 217, 232, 0.15);
    border-radius: 4px;
    background: #050510;
}

.title-settings__back {
    font-size: 0.75rem;
    letter-spacing: 0.2rem;
    color: rgba(5, 217, 232, 0.3);
    cursor: pointer;
    margin-top: 8px;
    -webkit-tap-highlight-color: transparent;
}
.title-settings__back:hover {
    color: rgba(5, 217, 232, 0.6);
}

@keyframes blink-prompt {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* ── Mobile: title ── */
@media (max-width: 600px) {
    #title-screen h1 {
        font-size: 3rem;
        letter-spacing: 0.2rem;
    }
    .title-splash__prompt {
        font-size: 0.6rem;
        letter-spacing: 0.25rem;
    }
    .title-menu__item {
        font-size: 0.85rem;
    }
    .title-settings__item {
        font-size: 0.8rem;
    }
}

/* ── Select Screens (shared tile / side-scroll — Explore + Play + Arcade) ── */

#explore-select-screen,
#play-select-screen,
#arcade-select-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
#explore-select-screen.hidden,
#play-select-screen.hidden,
#arcade-select-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.es-header, .ps-header, .as-header {
    font-size: 0.85rem;
    letter-spacing: 0.4rem;
    color: rgba(5, 217, 232, 0.45);
    margin-bottom: 28px;
    text-transform: uppercase;
}

.es-strip-wrap, .ps-strip-wrap, .as-strip-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.es-strip, .ps-strip, .as-strip {
    display: flex;
    gap: 20px;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
    padding: 30px 0;
    justify-content: center;
}

.es-tile, .ps-tile, .as-tile {
    flex-shrink: 0;
    width: 180px;
    height: 220px;
    border: 1px solid rgba(5, 217, 232, 0.15);
    border-radius: 6px;
    background: rgba(5, 5, 20, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    transition:
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        opacity 0.3s ease;
    transform: scale(0.88);
    opacity: 0.5;
}
.es-tile:hover, .ps-tile:hover, .as-tile:hover {
    opacity: 0.7;
}
.es-tile.active, .ps-tile.active, .as-tile.active {
    transform: scale(1.08);
    opacity: 1;
    border-color: rgba(5, 217, 232, 0.6);
    box-shadow:
        0 0 20px rgba(5, 217, 232, 0.2),
        0 0 60px rgba(5, 217, 232, 0.08),
        inset 0 0 30px rgba(5, 217, 232, 0.05);
}

.es-tile__preview, .ps-tile__preview, .as-tile__preview {
    width: 100%;
    height: 140px;
    position: relative;
    overflow: hidden;
}
.es-tile__preview canvas, .ps-tile__preview canvas, .as-tile__preview canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.es-tile__label, .ps-tile__label, .as-tile__label {
    padding: 10px 8px;
    text-align: center;
    width: 100%;
}
.es-tile__name, .ps-tile__name, .as-tile__name {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    color: #05d9e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.es-tile__index, .ps-tile__index, .as-tile__index {
    font-size: 0.55rem;
    color: rgba(5, 217, 232, 0.3);
    margin-top: 2px;
}
.es-tile.active .es-tile__name,
.ps-tile.active .ps-tile__name,
.as-tile.active .as-tile__name {
    text-shadow: 0 0 8px currentColor;
}

.es-detail, .ps-detail, .as-detail {
    text-align: center;
    margin-top: 20px;
    min-height: 50px;
}
.es-detail__name, .ps-detail__name, .as-detail__name {
    font-size: 1.6rem;
    font-weight: bold;
    color: #05d9e8;
    text-shadow:
        0 0 12px rgba(5, 217, 232, 0.5),
        0 0 30px rgba(5, 217, 232, 0.15);
    letter-spacing: 0.2rem;
    transition: color 0.3s ease;
}
.es-detail__desc, .ps-detail__desc, .as-detail__desc {
    font-size: 0.8rem;
    color: rgba(255, 42, 109, 0.65);
    margin-top: 6px;
    max-width: 460px;
    line-height: 1.5;
}

.es-nav-hints, .ps-nav-hints, .as-nav-hints {
    font-size: 0.65rem;
    color: rgba(5, 217, 232, 0.25);
    letter-spacing: 0.15rem;
    margin-top: 24px;
}

@media (max-width: 600px) {
    .es-header, .ps-header, .as-header { font-size: 0.7rem; margin-bottom: 16px; }
    .es-strip, .ps-strip, .as-strip { gap: 12px; padding: 20px 0; }
    .es-tile, .ps-tile, .as-tile { width: 130px; height: 170px; }
    .es-tile__preview, .ps-tile__preview, .as-tile__preview { height: 100px; }
    .es-tile__label, .ps-tile__label, .as-tile__label { padding: 8px 6px; }
    .es-tile__name, .ps-tile__name, .as-tile__name { font-size: 0.65rem; }
    .es-tile__index, .ps-tile__index, .as-tile__index { font-size: 0.5rem; }
    .es-detail__name, .ps-detail__name, .as-detail__name { font-size: 1.1rem; }
    .es-detail__desc, .ps-detail__desc, .as-detail__desc { font-size: 0.7rem; max-width: 300px; }
    .es-nav-hints, .ps-nav-hints, .as-nav-hints { font-size: 0.55rem; margin-top: 16px; }
}

/* ── Mode HUD (game modes) ──────────────────── */

.mode-progress {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.25rem;
    color: rgba(0, 245, 255, 0.85);
    text-shadow:
        0 0 8px rgba(0, 245, 255, 0.5),
        0 0 20px rgba(0, 245, 255, 0.2);
    pointer-events: none;
    white-space: nowrap;
}

.mode-complete {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 25;
    font-family: 'Courier New', monospace;
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.3rem;
    color: #00f5ff;
    text-shadow:
        0 0 12px rgba(0, 245, 255, 0.8),
        0 0 40px rgba(0, 245, 255, 0.4),
        0 0 80px rgba(157, 78, 221, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

.mode-complete.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 600px) {
    .mode-progress {
        font-size: 0.85rem;
        top: 18px;
    }
    .mode-complete {
        font-size: 1.5rem;
        letter-spacing: 0.15rem;
    }
}

/* ── Visualizer Settings Panel ────────────────── */

.viz-settings {
    position: fixed;
    top: 0; right: 0;
    width: 280px; height: 100%;
    z-index: 110;
    background: rgba(5, 5, 20, 0.85);
    border-left: 1px solid rgba(5, 217, 232, 0.15);
    font-family: 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    gap: 8px;
    overflow-y: auto;
    transition: transform 0.35s ease, opacity 0.35s ease;
    transform: translateX(0);
}
.viz-settings.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.viz-settings.auto-hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.viz-settings__header {
    font-size: 0.75rem;
    letter-spacing: 0.4rem;
    color: rgba(5, 217, 232, 0.4);
    text-align: center;
    margin-bottom: 12px;
}
.viz-settings__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    color: rgba(5, 217, 232, 0.3);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 3px;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.viz-settings__item.active {
    color: rgba(5, 217, 232, 0.9);
    background: rgba(5, 217, 232, 0.06);
    text-shadow: 0 0 8px rgba(5, 217, 232, 0.3);
}
.viz-settings__label {
    flex: 1;
    white-space: nowrap;
}
.viz-settings__val {
    font-weight: bold;
    min-width: 60px;
    text-align: center;
    font-size: 0.75rem;
}
.viz-settings__val.on {
    color: #00f5ff;
    text-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
}
.viz-settings__cycle {
    font-size: 0.7rem;
    color: rgba(5, 217, 232, 0.2);
    user-select: none;
    cursor: pointer;
    padding: 2px;
}
.viz-settings__item.active .viz-settings__cycle {
    color: rgba(5, 217, 232, 0.45);
}
.viz-settings__back {
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
    color: rgba(5, 217, 232, 0.3);
    cursor: pointer;
    margin-top: auto;
    padding: 8px 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.viz-settings__back:hover {
    color: rgba(5, 217, 232, 0.6);
}

@media (max-width: 600px) {
    .viz-settings {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(5, 217, 232, 0.15);
    }
    .viz-settings__item {
        font-size: 0.75rem;
    }
}

/* ── Observatory Settings Panel ──────────────── */

.obs-settings {
    position: fixed;
    top: 0; right: 0;
    width: 280px; height: 100%;
    z-index: 110;
    background: rgba(5, 5, 20, 0.85);
    border-left: 1px solid rgba(5, 217, 232, 0.15);
    font-family: 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    gap: 8px;
    overflow-y: auto;
    transition: transform 0.35s ease, opacity 0.35s ease;
    transform: translateX(0);
}
.obs-settings.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.obs-settings__header {
    font-size: 0.75rem;
    letter-spacing: 0.4rem;
    color: rgba(5, 217, 232, 0.4);
    text-align: center;
    margin-bottom: 12px;
}
.obs-settings__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    color: rgba(5, 217, 232, 0.3);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 3px;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.obs-settings__item.active {
    color: rgba(5, 217, 232, 0.9);
    background: rgba(5, 217, 232, 0.06);
    text-shadow: 0 0 8px rgba(5, 217, 232, 0.3);
}
.obs-settings__label {
    flex: 1;
    white-space: nowrap;
}
.obs-settings__val {
    font-weight: bold;
    min-width: 60px;
    text-align: center;
    font-size: 0.75rem;
}
.obs-settings__val.on {
    color: #00f5ff;
    text-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
}
.obs-settings__cycle {
    font-size: 0.7rem;
    color: rgba(5, 217, 232, 0.2);
    user-select: none;
    cursor: pointer;
    padding: 2px;
}
.obs-settings__item.active .obs-settings__cycle {
    color: rgba(5, 217, 232, 0.45);
}
.obs-settings__back {
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
    color: rgba(5, 217, 232, 0.3);
    cursor: pointer;
    margin-top: auto;
    padding: 8px 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.obs-settings__back:hover {
    color: rgba(5, 217, 232, 0.6);
}

@media (max-width: 600px) {
    .obs-settings {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(5, 217, 232, 0.15);
    }
    .obs-settings__item {
        font-size: 0.75rem;
    }
}

/* Soft vignette */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(5, 5, 20, 0.4) 100%
    );
    pointer-events: none;
    z-index: 50;
}

/* ── Cruise HUD ─────────────────────────────────────── */

.cruise-hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 15;
}

.cruise-hud__name {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.15);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    user-select: none;
}

.cruise-hud__glow {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px 20px rgba(100, 180, 255, 0.03);
    transition: opacity 0.3s;
    opacity: 0;
}