:root {
    --color-bg-start: #020024;
    --color-bg-mid: #090979;
    --color-bg-end: #002d3a;
    --color-player: #00e5ff;
    --color-planet-1: #b8865a;
    --color-planet-2: #9d7ba8;
    --color-planet-3: #7aa88a;
    --color-earth-ocean: #1e3a8a;
    --color-earth-land: #2d5016;
    --color-item: #ffffff;
    --color-text: #ffffff;
    --color-particle: #ffeb3b;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
    background: #000000;
    color: var(--color-text);
}

/* Space background — static layers only, no per-star animation */
#space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
    background:
        radial-gradient(ellipse 90% 55% at 10% 88%, rgba(78, 28, 102, 0.36) 0%, transparent 58%),
        radial-gradient(ellipse 72% 48% at 94% 6%, rgba(16, 58, 96, 0.32) 0%, transparent 55%),
        radial-gradient(ellipse 50% 36% at 62% 72%, rgba(20, 70, 88, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, #070710 0%, #010104 74%);
}

/* Soft Milky Way band */
#space-background::before {
    content: '';
    position: absolute;
    inset: -28%;
    background: linear-gradient(122deg,
        transparent 30%,
        rgba(170, 185, 230, 0.03) 43%,
        rgba(230, 236, 255, 0.09) 50%,
        rgba(170, 185, 230, 0.03) 57%,
        transparent 70%);
    filter: blur(12px);
}

/* Distant edge-on galaxy */
#space-background::after {
    content: '';
    position: absolute;
    width: 58vw;
    height: 16vw;
    min-height: 72px;
    right: -8%;
    top: 9%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 244, 220, 0.2) 0%,
        rgba(190, 172, 255, 0.07) 30%,
        rgba(60, 80, 130, 0.04) 55%,
        transparent 72%);
    transform: rotate(-26deg);
    filter: blur(7px);
}

.space-galaxy {
    position: absolute;
    width: 42vw;
    height: 12vw;
    min-height: 56px;
    left: -10%;
    bottom: 18%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(200, 230, 255, 0.14) 0%,
        rgba(90, 140, 190, 0.06) 34%,
        transparent 70%);
    transform: rotate(18deg);
    filter: blur(8px);
}

.space-stars {
    position: absolute;
    width: 1px;
    height: 1px;
    left: 0;
    top: 0;
    background: transparent;
    border-radius: 50%;
    pointer-events: none;
}

#game-container {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight on mobile */
    z-index: 1;
    transition: transform 0.1s ease-out;
}

/* Screen shake effect */
#game-container.shake {
    animation: screen-shake 0.3s ease-out;
}

@keyframes screen-shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate(-3px, -3px);
    }
    20%, 40%, 60%, 80% {
        transform: translate(3px, 3px);
    }
}

#game-world {
    position: absolute;
    /* We will center the world, so 0,0 is the middle of the screen */
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth camera movement */
    will-change: transform;
}

.planet-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    will-change: transform;
    z-index: 3;
}

.planet {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 50%;
    will-change: transform;
    transform-origin: center center;
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.1),
        inset -8px -8px 25px rgba(0, 0, 0, 0.35),
        inset 8px 8px 25px rgba(255, 255, 255, 0.08);
    /* Thêm overflow: hidden để giữ marker bên trong */
    overflow: hidden;
    /* Add texture with fewer radial gradients for better performance */
    background-image: 
        radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.2) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 35%);
    background-blend-mode: multiply, multiply, screen;
    /* Reduce color fidelity - desaturate and reduce contrast */
    filter: saturate(0.6) brightness(0.85) contrast(0.9);
}

/* Thêm marker để hiển thị vòng quay */
.planet::before {
    content: '';
    position: absolute;
    width: 30%; /* 30% kích thước hành tinh */
    height: 30%; /* 30% kích thước hành tinh */
    background: rgba(0, 0, 0, 0.3); /* Đốm đen (miệng núi lửa) */
    border-radius: 50%;
    /* Đặt lệch tâm */
    top: 20%;
    left: 20%;
    box-shadow: 
        inset 0 0 10px rgba(0, 0, 0, 0.7),
        inset 2px 2px 5px rgba(255, 255, 255, 0.1),
        0 0 5px rgba(0, 0, 0, 0.5);
}

/* Additional crater marker */
.planet::after {
    content: '';
    position: absolute;
    width: 15%;
    height: 15%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    top: 65%;
    right: 25%;
    box-shadow: 
        inset 0 0 8px rgba(0, 0, 0, 0.6),
        inset 1px 1px 3px rgba(255, 255, 255, 0.08);
}

/* Planet craters - deep impact craters (simplified for performance) */
.planet-crater {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.25) 40%, transparent 70%);
    box-shadow: 
        inset 0 0 12px rgba(0, 0, 0, 0.7),
        inset 2px 2px 6px rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    transform: translateZ(0); /* GPU acceleration */
}

/* Planet highlights - raised areas/ridges (simplified for performance) */
.planet-highlight {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 80%);
    box-shadow: 
        inset -2px -2px 6px rgba(0, 0, 0, 0.25),
        inset 2px 2px 6px rgba(255, 255, 255, 0.15);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    transform: translateZ(0); /* GPU acceleration */
}

/* Earth — oceans, fixed landmasses, ice caps (overrides generic crater markers) */
.planet-earth {
    background-color: #0b3d8c !important;
    background-image:
        radial-gradient(ellipse at 50% 3%, rgba(245, 250, 255, 0.95) 0%, rgba(245, 250, 255, 0.35) 8%, transparent 14%),
        radial-gradient(ellipse at 50% 98%, rgba(230, 245, 255, 0.82) 0%, transparent 12%),
        radial-gradient(ellipse 24% 40% at 23% 44%, rgba(52, 122, 48, 0.95) 0%, rgba(52, 122, 48, 0.5) 46%, transparent 70%),
        radial-gradient(ellipse 17% 34% at 51% 50%, rgba(72, 128, 46, 0.92) 0%, transparent 66%),
        radial-gradient(ellipse 26% 22% at 76% 36%, rgba(48, 108, 50, 0.9) 0%, transparent 64%),
        radial-gradient(ellipse 11% 8% at 80% 70%, rgba(92, 132, 48, 0.82) 0%, transparent 72%),
        radial-gradient(circle at 32% 28%, rgba(70, 160, 220, 0.45) 0%, transparent 38%),
        radial-gradient(circle at 68% 72%, #082456 0%, #0b3d8c 48%, #061832 100%);
    background-blend-mode: normal;
    filter: saturate(1.2) brightness(1.06) contrast(1.08) !important;
    box-shadow:
        0 0 26px rgba(56, 150, 230, 0.32),
        inset -10px -8px 22px rgba(0, 12, 40, 0.42),
        inset 6px 6px 16px rgba(160, 220, 255, 0.16);
}
.planet-earth::before {
    width: 36%;
    height: 15%;
    top: 0;
    left: 32%;
    background: radial-gradient(ellipse, rgba(245, 250, 255, 0.92) 0%, transparent 76%);
    box-shadow: none;
}
.planet-earth::after {
    width: 34%;
    height: 14%;
    top: auto;
    right: auto;
    bottom: 0;
    left: 33%;
    background: radial-gradient(ellipse, rgba(230, 245, 255, 0.78) 0%, transparent 76%);
    box-shadow: none;
}

.earth-atmosphere {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle,
        transparent 64%,
        rgba(120, 200, 255, 0.28) 76%,
        rgba(80, 160, 255, 0.08) 88%,
        transparent 100%);
}

.earth-cloud {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 52%, transparent 76%);
}

/* Rocky rust — Mars / Mercury / Ceres / Io */
.planet-rocky {
    background-color: #c45a32;
    background-image:
        radial-gradient(circle at 32% 28%, #e07a4a 0%, transparent 38%),
        radial-gradient(circle at 72% 62%, rgba(90, 36, 22, 0.55) 0%, transparent 42%),
        radial-gradient(circle at 50% 50%, #8b3a22 0%, #5a2416 100%);
    background-blend-mode: normal, multiply, normal;
    filter: saturate(1.15) brightness(1.05) contrast(1.08);
    box-shadow:
        0 0 20px rgba(196, 90, 50, 0.28),
        inset -8px -8px 22px rgba(0, 0, 0, 0.35),
        inset 6px 6px 18px rgba(255, 180, 140, 0.12);
}
.planet-rocky::before {
    width: 30%;
    height: 16%;
    top: 5%;
    left: 35%;
    background: rgba(255, 244, 230, 0.72);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.35);
}

/* Warm gas bands — Jupiter */
.planet-gas {
    background-color: #c4924a;
    background-image:
        repeating-linear-gradient(
            180deg,
            #e6c07a 0%,
            #d4a056 10%,
            #a86b32 18%,
            #c99250 26%,
            #8b4e22 34%,
            #e0b86a 42%,
            #c4924a 50%
        ),
        radial-gradient(circle at 26% 26%, rgba(255, 255, 255, 0.16) 0%, transparent 40%);
    background-blend-mode: normal, screen;
    filter: saturate(1.18) brightness(1.06) contrast(1.08);
    box-shadow:
        0 0 22px rgba(196, 146, 74, 0.28),
        inset -8px -8px 22px rgba(0, 0, 0, 0.3),
        inset 6px 6px 16px rgba(255, 220, 160, 0.12);
}
.planet-gas::before {
    width: 24%;
    height: 16%;
    top: 40%;
    left: 56%;
    background: radial-gradient(circle, #d45a38 0%, #a83a22 70%, transparent 100%);
    box-shadow: 0 0 8px rgba(212, 90, 56, 0.45);
}
.planet-gas::after {
    width: 18%;
    height: 8%;
    top: 22%;
    right: 28%;
    background: rgba(255, 230, 180, 0.2);
}

/* Cold gas — Uranus / Neptune */
.planet-gas-cold {
    background-color: #2f7f9a;
    background-image:
        repeating-linear-gradient(
            180deg,
            #5ec4d4 0%,
            #3d9aad 12%,
            #2a6f8f 22%,
            #7ed4e0 32%,
            #1a4a6a 42%,
            #3d9aad 52%
        ),
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.2) 0%, transparent 42%);
    background-blend-mode: normal, screen;
    filter: saturate(1.2) brightness(1.08) contrast(1.05);
    box-shadow:
        0 0 22px rgba(61, 154, 173, 0.32),
        inset -8px -8px 22px rgba(0, 0, 0, 0.3),
        inset 6px 6px 16px rgba(180, 240, 255, 0.12);
}
.planet-gas-cold::before,
.planet-gas-cold::after {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

/* Ice moons and dwarf worlds */
.planet-ice {
    background-color: #9ec8d6;
    background-image:
        radial-gradient(circle at 30% 26%, #f4fbff 0%, #c5e4f0 32%, transparent 48%),
        radial-gradient(circle at 70% 68%, rgba(70, 110, 128, 0.35) 0%, transparent 46%),
        linear-gradient(160deg, #d8eef5 0%, #8eb8c8 55%, #5a8494 100%);
    background-blend-mode: screen, multiply, normal;
    filter: saturate(0.9) brightness(1.14) contrast(1.04);
    box-shadow:
        0 0 20px rgba(197, 228, 240, 0.3),
        inset -8px -8px 20px rgba(30, 50, 60, 0.28),
        inset 6px 6px 14px rgba(255, 255, 255, 0.2);
}
.planet-ice::before {
    background: rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4);
}
.planet-ice::after {
    background: rgba(90, 130, 145, 0.28);
}

.planet-crater-ice {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28) 0%, rgba(90, 130, 145, 0.2) 50%, transparent 70%);
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2);
}

/* Toxic haze — Venus, Titan, exoplanets */
.planet-toxic {
    background-color: #8a9a3a;
    background-image:
        radial-gradient(circle at 38% 32%, #d4d060 0%, transparent 40%),
        radial-gradient(circle at 68% 70%, rgba(60, 70, 20, 0.45) 0%, transparent 48%),
        linear-gradient(150deg, #c4c44a 0%, #8a9a3a 45%, #4a5a20 100%);
    background-blend-mode: screen, multiply, normal;
    filter: saturate(1.22) brightness(1.04) contrast(1.06);
    box-shadow:
        0 0 24px rgba(180, 200, 60, 0.28),
        inset -8px -8px 22px rgba(0, 0, 0, 0.32),
        inset 6px 6px 16px rgba(220, 230, 120, 0.12);
}
.planet-toxic::before {
    background: rgba(255, 230, 120, 0.28);
    box-shadow: 0 0 10px rgba(210, 200, 80, 0.25);
}
.planet-toxic::after {
    background: rgba(70, 80, 20, 0.3);
}

/* Saturn body + decorative rings (rings are siblings, not in hitbox) */
.planet-ringed {
    background-color: #d4b06a;
    background-image:
        repeating-linear-gradient(
            180deg,
            #f0d89a 0%,
            #d4b06a 12%,
            #b8864a 22%,
            #e8d090 32%,
            #c9a056 42%,
            #d4b06a 52%
        ),
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.18) 0%, transparent 40%);
    background-blend-mode: normal, screen;
    filter: saturate(1.2) brightness(1.08) contrast(1.06);
    box-shadow:
        0 0 22px rgba(212, 176, 106, 0.32),
        inset -8px -8px 22px rgba(0, 0, 0, 0.28),
        inset 6px 6px 16px rgba(255, 230, 180, 0.14);
    z-index: 1;
}
.planet-ringed::before,
.planet-ringed::after {
    background: rgba(255, 230, 180, 0.18);
    box-shadow: none;
}

.planet-rings {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    box-sizing: border-box;
    background: transparent;
    border: 7px solid rgba(232, 210, 160, 0.42);
    border-top-color: rgba(240, 220, 170, 0.62);
    border-bottom-color: rgba(170, 140, 80, 0.38);
    box-shadow:
        0 0 0 3px rgba(210, 180, 120, 0.16),
        inset 0 0 0 3px rgba(255, 230, 180, 0.12);
    transform: rotate(-16deg);
}

/* Kept for any leftover nodes; land is painted in .planet-earth now */
.earth-continent {
    display: none;
}

#player {
    position: absolute;
    width: 24px;
    height: 24px;
    /* Center the SVG */
    margin-left: -12px;
    margin-top: -12px;
    will-change: transform;
    transform-origin: 50% 50%;
    z-index: 10;
}

#player-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 5px var(--color-player));
}

.orbit-item {
    position: absolute;
    width: 20px;
    height: 20px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    will-change: transform;
    z-index: 5;
    pointer-events: none;
}

.orbit-item-svg {
    width: 20px;
    height: 20px;
    display: block;
    animation: orbit-item-pulse 1.6s ease-in-out infinite;
}

.orbit-item-slowMotion .orbit-item-svg {
    filter: drop-shadow(0 0 5px rgba(255, 107, 107, 0.95));
}

.orbit-item-indicator .orbit-item-svg {
    filter: drop-shadow(0 0 5px rgba(255, 230, 109, 0.95));
}

.orbit-item-gravity .orbit-item-svg {
    filter: drop-shadow(0 0 5px rgba(155, 89, 182, 0.95));
}

@keyframes orbit-item-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* Inventory Container */
#inventory-container {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    pointer-events: none;
}

#inventory-items {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.inventory-item {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background: rgba(4, 12, 20, 0.78);
    border: 1px solid rgba(0, 229, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.12);
    clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
}

.inventory-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.inventory-item:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.inventory-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.inventory-icon-svg {
    width: 20px;
    height: 20px;
    color: currentColor;
}

.inventory-counter {
    position: absolute;
    top: -5px;
    right: -5px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    font-size: 0.7rem;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.inventory-item-slowMotion {
    border-color: rgba(255, 107, 107, 0.6);
}

.inventory-item-slowMotion:hover {
    border-color: rgba(255, 107, 107, 0.9);
    background: rgba(255, 107, 107, 0.2);
}

.inventory-item-indicator {
    border-color: rgba(255, 230, 109, 0.6);
}

.inventory-item-indicator:hover {
    border-color: rgba(255, 230, 109, 0.9);
    background: rgba(255, 230, 109, 0.2);
}

.inventory-item-gravity {
    border-color: rgba(155, 89, 182, 0.6);
}

.inventory-item-gravity:hover {
    border-color: rgba(155, 89, 182, 0.9);
    background: rgba(155, 89, 182, 0.2);
}

/* Active Items Display */
#active-items-display {
    position: absolute;
    top: 72px;
    left: 10px;
    z-index: 120;
    pointer-events: none;
}

#active-items-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.active-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(4, 12, 20, 0.8);
    padding: 5px 10px;
    border-radius: 2px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    font-size: 0.7rem;
    letter-spacing: 0.6px;
    color: white;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
    min-width: 118px;
}

.active-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.active-item-icon svg {
    width: 14px;
    height: 14px;
    color: currentColor;
}

.active-item-name {
    flex: 1;
    font-weight: 500;
    font-size: 0.75rem;
}

.active-item-timer {
    font-weight: bold;
    color: #00e5ff;
    min-width: 28px;
    text-align: right;
    font-size: 0.8rem;
}

.active-item-slowMotion {
    border-color: rgba(255, 107, 107, 0.6);
}

.active-item-indicator {
    border-color: rgba(255, 230, 109, 0.6);
}

.active-item-gravity {
    border-color: rgba(155, 89, 182, 0.6);
}

/* Prediction Line */
.prediction-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 230, 109, 0.8) 0%, rgba(255, 230, 109, 0.3) 100%);
    box-shadow: 0 0 5px rgba(255, 230, 109, 0.5);
    pointer-events: none;
    z-index: 4;
    transform-origin: 0 50%;
}

/* Moon - Earth's natural satellite */
.moon {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    background-color: #8b9096;
    background-image:
        radial-gradient(circle at 26% 24%, rgba(255, 255, 255, 0.38) 0%, transparent 36%),
        radial-gradient(ellipse at 38% 52%, rgba(70, 74, 80, 0.55) 0%, transparent 42%),
        radial-gradient(circle at 78% 72%, rgba(0, 0, 0, 0.48) 0%, transparent 52%),
        radial-gradient(circle at 48% 46%, #c5c8cc 0%, #8b9096 48%, #4a4e54 100%);
    background-blend-mode: screen, multiply, multiply, normal;
    box-shadow:
        0 0 12px rgba(200, 210, 220, 0.22),
        inset -7px -6px 14px rgba(0, 0, 0, 0.55),
        inset 5px 4px 10px rgba(255, 255, 255, 0.2);
    will-change: transform;
    z-index: 6;
    transform: translateZ(0);
    filter: saturate(0.75) contrast(1.18) brightness(1.02);
}

.moon::before {
    content: '';
    position: absolute;
    width: 46%;
    height: 38%;
    left: 18%;
    top: 40%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 40% 40%, rgba(55, 58, 64, 0.7) 0%, rgba(55, 58, 64, 0.25) 62%, transparent 78%);
    pointer-events: none;
}

.moon::after {
    content: '';
    position: absolute;
    width: 22%;
    height: 22%;
    right: 18%;
    top: 16%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(210, 214, 218, 0.35) 0%, rgba(40, 42, 46, 0.45) 55%, transparent 72%);
    box-shadow: 0 0 0 4px rgba(190, 196, 202, 0.08);
    pointer-events: none;
}

.moon-crater {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 32% 30%, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.18) 48%, transparent 72%);
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.12);
}

.moon-highland {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
}

.particle {
    position: absolute;
    background: var(--color-particle);
    border-radius: 50%;
    animation: particle-effect 0.7s ease-out forwards;
    will-change: transform, opacity;
    z-index: 20;
}

/* Engine trail — cyan wash that fades with life */
.smoke-trail {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(200, 255, 255, 0.95) 0%,
        rgba(0, 229, 255, 0.55) 32%,
        rgba(0, 160, 210, 0.16) 62%,
        transparent 80%);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.35);
    pointer-events: none;
    z-index: 8;
    will-change: transform, opacity;
    transform: translateZ(0); /* GPU acceleration */
    backface-visibility: hidden;
}

/* Particle animation: burst out and fade */
@keyframes particle-effect {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0) translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

/* UI Layer */
#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.play-hud {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 110;
}

.hud-bar {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
}

.hud-chip {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 10px 6px;
    background: rgba(4, 12, 20, 0.72);
    border: 1px solid rgba(0, 229, 255, 0.32);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.12);
    clip-path: polygon(8% 0, 92% 0, 100% 22%, 100% 78%, 92% 100%, 8% 100%, 0 78%, 0 22%);
}

.hud-chip-score {
    flex: 1.15;
    align-items: center;
    text-align: center;
}

.hud-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: rgba(0, 229, 255, 0.75);
}

#score-display {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
    color: #e8ffff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
    transition: transform 0.1s ease;
}

#planet-name-display {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-player);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#combo-display {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #ffe66d;
    text-shadow: 0 0 10px rgba(255, 230, 109, 0.55);
    animation: combo-pulse 0.45s ease-out;
}

@keyframes combo-pulse {
    0% { transform: scale(0.85); opacity: 0; }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}

#pause-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--color-player);
    background: rgba(0, 229, 255, 0.1);
    color: var(--color-player);
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
    clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
}

#pause-button:active {
    background: var(--color-player);
    color: #041018;
}

#pause-button svg {
    width: 18px;
    height: 18px;
}

.menu-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: all;
    z-index: 300;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(0, 229, 255, 0.1) 0%, transparent 46%),
        rgba(2, 6, 12, 0.78);
}

.menu-overlay-over {
    background:
        radial-gradient(ellipse at 50% 38%, rgba(255, 82, 82, 0.12) 0%, transparent 46%),
        rgba(8, 2, 6, 0.8);
}

.menu-card {
    position: relative;
    width: min(86vw, 320px);
    overflow: hidden;
    padding: 26px 18px 16px;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(8, 20, 32, 0.96) 0%, rgba(2, 6, 12, 0.98) 100%);
    border: 1px solid var(--color-player);
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.18);
    clip-path: polygon(8% 0, 92% 0, 100% 10%, 100% 90%, 92% 100%, 8% 100%, 0 90%, 0 10%);
}

.menu-card-over {
    border-color: #ff6b6b;
    box-shadow: 0 0 28px rgba(255, 82, 82, 0.2);
}

.menu-orbit {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 160px;
    height: 160px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 255, 0.16);
    box-shadow:
        0 0 0 12px rgba(0, 229, 255, 0.04),
        0 0 0 26px rgba(0, 229, 255, 0.03);
    pointer-events: none;
}

.menu-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.55));
}

.menu-kicker {
    position: relative;
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #7ee8ff;
}

.menu-card-over .menu-kicker {
    color: #ffb4b4;
}

.menu-card h1 {
    position: relative;
    margin: 0 0 12px;
    font-size: clamp(26px, 8vw, 34px);
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 0.95;
    color: var(--color-player);
    text-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}

.menu-card-over h1 {
    color: #ff6b6b;
    text-shadow: 0 0 14px rgba(255, 82, 82, 0.35);
}

.how-to {
    position: relative;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.how-to li {
    font-size: 11px;
    letter-spacing: 1px;
    color: #c5d4dc;
}

.how-to strong {
    color: var(--color-player);
}

.menu-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 0 0 14px;
}

.menu-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 72px;
}

.menu-stat span {
    font-size: 9px;
    letter-spacing: 1.6px;
    color: rgba(0, 229, 255, 0.7);
}

.menu-card-over .menu-stat span {
    color: rgba(255, 180, 180, 0.75);
}

.menu-stat strong {
    font-size: 22px;
    color: #fff;
}

.brand-credit {
    margin: 12px 0 0;
    font-size: 10px;
    letter-spacing: 0.4px;
    color: rgba(197, 208, 214, 0.45);
}

.music-credit {
    margin: 4px 0 0;
    font-size: 9px;
    letter-spacing: 0.3px;
    color: rgba(197, 208, 214, 0.38);
}

.relic-legend {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 14px;
}

.relic-slow { color: #ff6b6b; }
.relic-aim { color: #ffe66d; }
.relic-pull { color: #c39be8; }

#menu-best-score {
    margin: 10px 0 0;
    font-size: 10px;
    letter-spacing: 1.6px;
    color: rgba(0, 229, 255, 0.7);
}

#audio-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-top: 10px;
}

#main-menu-screen #audio-controls .audio-toggle-btn {
    width: auto;
    flex: 1 1 0;
    max-width: 46%;
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 1px;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    box-shadow: none;
}

#main-menu-screen #audio-controls .audio-toggle-btn.off {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.38);
}

#main-menu-screen #audio-controls .audio-toggle-btn:active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: none;
}

#main-menu-screen #audio-controls .audio-icon {
    width: 13px;
    height: 13px;
}

.audio-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 7px 12px;
    border: 1px solid var(--color-player);
    background: rgba(0, 229, 255, 0.08);
    color: var(--color-player);
    cursor: pointer;
}

.audio-toggle-btn.off {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.45);
}

.menu-audio-fab {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.menu-audio-fab-left {
    right: auto;
    left: 14px;
}

.audio-icon {
    width: 16px;
    height: 16px;
}

.audio-label {
    white-space: nowrap;
}

.menu-card button,
#start-button,
#resume-button,
#pause-menu-button,
#retry-button {
    width: 100%;
    margin-top: 0;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    border: 1px solid var(--color-player);
    background: transparent;
    color: var(--color-player);
    cursor: pointer;
}

#pause-menu-button,
.btn-ghost {
    margin-top: 8px;
    border-color: rgba(255, 255, 255, 0.28);
    color: #d7e4ea;
}

#retry-button,
.menu-card-over button:not(.btn-ghost) {
    border-color: #ff6b6b;
    color: #ff8a80;
}

.menu-card button:active,
#start-button:active,
#resume-button:active {
    background: var(--color-player);
    color: #041018;
    box-shadow: 0 0 16px var(--color-player);
}

#retry-button:active {
    background: #ff6b6b;
    color: #2a0606;
    box-shadow: 0 0 16px #ff6b6b;
}

#pause-menu-button:active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: none;
}

#game-over-screen {
    display: none;
}

/* Landing Quality Indicator */
.landing-quality {
    font-family: 'Arial', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    user-select: none;
    animation: landing-quality-pulse 0.5s ease-out;
}

@keyframes landing-quality-pulse {
    0% {
        transform: translateX(-50%) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) scale(1.3);
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}