/* =========================================================
   Zero Gravity Galaxy CSS - Ver 1.1
   Team-POCs
   front-page.css
========================================================= */


/* =========================================================
   1. TOP専用リセット
========================================================= */
html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    overflow: hidden;
    background-color: var(--bg-deep);
}


/* =========================================================
   2. 宇宙空間と背景
========================================================= */
.galaxy-universe-root {
    position: fixed;
    inset: 0;
    z-index: 10;
    background-color: var(--bg-deep);
}

.galaxy-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1600px;
}

.galaxy-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 20% 80%, rgba(0, 45, 30, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 30, 90, 0.5) 0%, transparent 50%),
        radial-gradient(circle at center, rgba(0, 68, 255, 0.15) 0%, transparent 80%);
}


/* =========================================================
   3. 背景マニフェスト
========================================================= */
.galaxy-manifesto {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 3vw;
}

.manifesto-line {
    width: min(92vw, 1600px);
    white-space: normal;
    text-align: center;
    font-size: clamp(16px, 2vw, 38px);
    line-height: 1.75;
    letter-spacing: 0.06em;
    color: rgba(180, 220, 255, 0.03);
    transform: rotate(-2deg);
    filter: blur(0.15px);
    text-shadow:
        0 0 4px rgba(0, 242, 255, 0.07),
        0 0 10px rgba(0, 120, 255, 0.05);
}


/* =========================================================
   4. 中心核（Atom）
========================================================= */
#galaxy-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    z-index: 100;
    transform: translate(-50%, -50%);
    animation: corePulse3D 20s ease-in-out infinite;
}

#galaxy-core svg {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes corePulse3D {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1) rotateX(0deg) rotateY(0deg);
    }

    30% {
        transform: translate(-50%, -52%) scale(1.08) rotateX(10deg) rotateY(25deg);
    }

    65% {
        transform: translate(-50%, -48%) scale(0.96) rotateX(-8deg) rotateY(-20deg);
    }
}


/* =========================================================
   5. 軌道
========================================================= */
.galaxy-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2.5px solid rgba(0, 242, 255, 0.18);
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.15);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: 20;
    animation-play-state: paused;
}

body:hover .galaxy-orbit {
    animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
    .galaxy-orbit {
        animation: none;
    }
}

.orbit-shape {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-style: preserve-3d;
}

.orbit-inner {
    width: 650px;
    height: 650px;
    animation: orbitSpinInner 95s linear infinite;
}

.orbit-inner .orbit-shape {
    animation: orbitBreatheInner 17s ease-in-out infinite;
}

.orbit-outer {
    width: 1050px;
    height: 1050px;
    animation: orbitSpinOuter 110s linear infinite;
}

.orbit-outer .orbit-shape {
    animation: orbitBreatheOuter 26s ease-in-out infinite;
}

@keyframes orbitSpinInner {
    0% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateY(45deg) rotateZ(0deg);
    }

    20% {
        transform: translate(-50%, -50%) rotateX(82deg) rotateY(10deg) rotateZ(70deg);
    }

    40% {
        transform: translate(-50%, -50%) rotateX(60deg) rotateY(-35deg) rotateZ(150deg);
    }

    60% {
        transform: translate(-50%, -50%) rotateX(78deg) rotateY(20deg) rotateZ(230deg);
    }

    80% {
        transform: translate(-50%, -50%) rotateX(72deg) rotateY(50deg) rotateZ(310deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateY(45deg) rotateZ(360deg);
    }
}

@keyframes orbitSpinOuter {
    0% {
        transform: translate(-50%, -50%) rotateX(65deg) rotateY(-45deg) rotateZ(0deg);
    }

    20% {
        transform: translate(-50%, -50%) rotateX(80deg) rotateY(-10deg) rotateZ(-80deg);
    }

    40% {
        transform: translate(-50%, -50%) rotateX(90deg) rotateY(15deg) rotateZ(-160deg);
    }

    60% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateY(-30deg) rotateZ(-240deg);
    }

    80% {
        transform: translate(-50%, -50%) rotateX(75deg) rotateY(-55deg) rotateZ(-320deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(65deg) rotateY(-45deg) rotateZ(-360deg);
    }
}

@keyframes orbitBreatheInner {
    0%,
    100% {
        transform: scaleX(1) scaleY(0.88);
    }

    25% {
        transform: scaleX(1.04) scaleY(0.84);
    }

    55% {
        transform: scaleX(0.94) scaleY(0.92);
    }

    80% {
        transform: scaleX(1.02) scaleY(0.86);
    }
}

@keyframes orbitBreatheOuter {
    0%,
    100% {
        transform: scaleX(1) scaleY(0.86);
    }

    30% {
        transform: scaleX(0.93) scaleY(0.92);
    }

    60% {
        transform: scaleX(1.06) scaleY(0.82);
    }

    85% {
        transform: scaleX(0.97) scaleY(0.89);
    }
}


/* =========================================================
   7. 無重力Grid
========================================================= */
.zero-g-grid {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;
    animation: zeroGDelayFadeIn 0.9s ease 1.2s both;
}

@keyframes zeroGDelayFadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    1% {
        visibility: visible;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

/* =========================================================
   Fixed Page Card
========================================================= */
.zero-g-item {
    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 230px;
    min-height: 92px;
    padding: 15px 22px;
    box-sizing: border-box;

    color: rgba(235, 246, 255, 0.94);
    text-decoration: none;

    pointer-events: auto;

    border: 1px solid rgba(205, 76, 130, 0.46);
    border-radius: 2px;

    background:
        radial-gradient(circle at 12% 18%, rgba(255, 90, 150, 0.16), transparent 42%),
        linear-gradient(135deg, rgba(10, 10, 34, 0.9), rgba(0, 24, 58, 0.72));

    box-shadow:
        0 0 18px rgba(205, 76, 130, 0.18),
        0 0 46px rgba(0, 120, 255, 0.14),
        inset 0 0 18px rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(8px);

    animation: zeroGFloat 30s ease-in-out infinite;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease,
        filter 0.35s ease;
}

.zero-g-item::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 46%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 90, 150, 0.92),
            rgba(0, 242, 255, 0.55),
            rgba(255, 255, 255, 0)
        );

    box-shadow:
        0 0 10px rgba(255, 90, 150, 0.38),
        0 0 24px rgba(0, 242, 255, 0.16);
}

.zero-g-item::after {
    content: "→";

    position: absolute;
    right: 18px;
    bottom: 12px;

    font-size: 1rem;
    line-height: 1;

    color: rgba(255, 140, 180, 0.82);

    text-shadow:
        0 0 8px rgba(255, 90, 150, 0.38),
        0 0 18px rgba(0, 242, 255, 0.12);
}

.zero-g-item__jp {
    display: block;

    margin: 0 0 8px;

    font-size: clamp(18px, 1.35vw, 24px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.94);

    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.14),
        0 0 22px rgba(255, 90, 150, 0.12);
}

.zero-g-item__en {
    display: block;

    max-width: calc(100% - 32px);

    font-family: var(--font-display);
    font-size: 0.72rem;
    line-height: 1.35;
    letter-spacing: 0.16em;

    color: rgba(255, 150, 190, 0.78);

    text-transform: uppercase;
}

.zero-g-kicker {
    display: none;
}

.zero-g-item strong {
    display: block;
}

.zero-g-item:nth-child(2n) {
    animation-duration: 28s;
}

.zero-g-item:nth-child(3n) {
    animation-duration: 34s;
}

.zero-g-slot-1  { top: 8%;  left: 7%; }
.zero-g-slot-2  { top: 16%; right: 9%; }
.zero-g-slot-3  { top: 32%; left: 3%; }
.zero-g-slot-4  { top: 47%; right: 5%; }
.zero-g-slot-5  { bottom: 12%; left: 10%; }
.zero-g-slot-6  { bottom: 8%; right: 14%; }
.zero-g-slot-7  { top: 6%; left: 38%; }
.zero-g-slot-8  { bottom: 5%; left: 39%; }
.zero-g-slot-9  { top: 25%; right: 24%; }
.zero-g-slot-10 { bottom: 27%; left: 22%; }
.zero-g-slot-11 { top: 56%; left: 5%; }
.zero-g-slot-12 { top: 62%; right: 27%; }

@keyframes zeroGFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotateZ(0deg);
    }

    35% {
        transform: translate3d(8px, -10px, 0) rotateZ(1deg);
    }

    70% {
        transform: translate3d(-6px, 8px, 0) rotateZ(-0.8deg);
    }
}

.zero-g-item:hover {
    animation-play-state: paused;

    filter: saturate(1.18);

    transform: translate3d(0, -6px, 0) scale(1.04) rotateZ(0deg);

    z-index: 500;
}


/* =========================================================
   7-1. Zero-G Theme : Rose Pink
   slots: 1 / 4 / 7 / 10
========================================================= */
.zero-g-slot-1,
.zero-g-slot-4,
.zero-g-slot-7,
.zero-g-slot-10 {
    border-color: rgba(205, 76, 130, 0.46);

    background:
        radial-gradient(circle at 12% 18%, rgba(255, 90, 150, 0.16), transparent 42%),
        linear-gradient(135deg, rgba(10, 10, 34, 0.9), rgba(0, 24, 58, 0.72));

    box-shadow:
        0 0 18px rgba(205, 76, 130, 0.18),
        0 0 46px rgba(0, 120, 255, 0.14),
        inset 0 0 18px rgba(255, 255, 255, 0.035);
}

.zero-g-slot-1::before,
.zero-g-slot-4::before,
.zero-g-slot-7::before,
.zero-g-slot-10::before {
    background:
        linear-gradient(
            90deg,
            rgba(255, 90, 150, 0.92),
            rgba(0, 242, 255, 0.55),
            rgba(255, 255, 255, 0)
        );

    box-shadow:
        0 0 10px rgba(255, 90, 150, 0.38),
        0 0 24px rgba(0, 242, 255, 0.16);
}

.zero-g-slot-1::after,
.zero-g-slot-4::after,
.zero-g-slot-7::after,
.zero-g-slot-10::after {
    color: rgba(255, 140, 180, 0.82);

    text-shadow:
        0 0 8px rgba(255, 90, 150, 0.38),
        0 0 18px rgba(0, 242, 255, 0.12);
}

.zero-g-slot-1 .zero-g-item__en,
.zero-g-slot-4 .zero-g-item__en,
.zero-g-slot-7 .zero-g-item__en,
.zero-g-slot-10 .zero-g-item__en {
    color: rgba(255, 150, 190, 0.78);
}

.zero-g-slot-1:hover,
.zero-g-slot-4:hover,
.zero-g-slot-7:hover,
.zero-g-slot-10:hover {
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 90, 150, 0.24), transparent 42%),
        linear-gradient(135deg, rgba(28, 10, 42, 0.96), rgba(0, 36, 92, 0.8));

    border-color: rgba(255, 105, 165, 0.72);

    box-shadow:
        0 0 22px rgba(255, 90, 150, 0.34),
        0 0 58px rgba(0, 242, 255, 0.18),
        inset 0 0 22px rgba(255, 255, 255, 0.05);
}


/* =========================================================
   7-2. Zero-G Theme : Harry Green
   slots: 2 / 5 / 8 / 11
========================================================= */
.zero-g-slot-2,
.zero-g-slot-5,
.zero-g-slot-8,
.zero-g-slot-11 {
    border-color: rgba(150, 220, 118, 0.46);

    background:
        radial-gradient(circle at 12% 18%, rgba(174, 255, 128, 0.15), transparent 42%),
        linear-gradient(135deg, rgba(8, 22, 18, 0.92), rgba(0, 42, 34, 0.74));

    box-shadow:
        0 0 18px rgba(160, 255, 130, 0.16),
        0 0 44px rgba(60, 210, 140, 0.13),
        inset 0 0 18px rgba(255, 255, 255, 0.032);
}

.zero-g-slot-2::before,
.zero-g-slot-5::before,
.zero-g-slot-8::before,
.zero-g-slot-11::before {
    background:
        linear-gradient(
            90deg,
            rgba(184, 255, 128, 0.9),
            rgba(96, 230, 160, 0.54),
            rgba(255, 255, 255, 0)
        );

    box-shadow:
        0 0 10px rgba(184, 255, 128, 0.34),
        0 0 24px rgba(96, 230, 160, 0.14);
}

.zero-g-slot-2::after,
.zero-g-slot-5::after,
.zero-g-slot-8::after,
.zero-g-slot-11::after {
    color: rgba(200, 255, 164, 0.84);

    text-shadow:
        0 0 8px rgba(174, 255, 128, 0.36),
        0 0 18px rgba(96, 230, 160, 0.12);
}

.zero-g-slot-2 .zero-g-item__en,
.zero-g-slot-5 .zero-g-item__en,
.zero-g-slot-8 .zero-g-item__en,
.zero-g-slot-11 .zero-g-item__en {
    color: rgba(210, 255, 190, 0.78);
}

.zero-g-slot-2:hover,
.zero-g-slot-5:hover,
.zero-g-slot-8:hover,
.zero-g-slot-11:hover {
    background:
        radial-gradient(circle at 14% 18%, rgba(174, 255, 128, 0.23), transparent 42%),
        linear-gradient(135deg, rgba(8, 34, 22, 0.96), rgba(0, 58, 46, 0.82));

    border-color: rgba(184, 255, 128, 0.72);

    box-shadow:
        0 0 22px rgba(174, 255, 128, 0.3),
        0 0 56px rgba(96, 230, 160, 0.18),
        inset 0 0 22px rgba(255, 255, 255, 0.045);
}


/* =========================================================
   7-3. Zero-G Theme : Vivi Violet
   slots: 3 / 6 / 9 / 12
========================================================= */
.zero-g-slot-3,
.zero-g-slot-6,
.zero-g-slot-9,
.zero-g-slot-12 {
    border-color: rgba(176, 132, 255, 0.46);

    background:
        radial-gradient(circle at 12% 18%, rgba(192, 140, 255, 0.15), transparent 42%),
        linear-gradient(135deg, rgba(18, 12, 42, 0.92), rgba(32, 20, 68, 0.74));

    box-shadow:
        0 0 18px rgba(184, 120, 255, 0.17),
        0 0 44px rgba(120, 110, 255, 0.13),
        inset 0 0 18px rgba(255, 255, 255, 0.032);
}

.zero-g-slot-3::before,
.zero-g-slot-6::before,
.zero-g-slot-9::before,
.zero-g-slot-12::before {
    background:
        linear-gradient(
            90deg,
            rgba(204, 150, 255, 0.9),
            rgba(150, 178, 255, 0.5),
            rgba(255, 255, 255, 0)
        );

    box-shadow:
        0 0 10px rgba(204, 150, 255, 0.34),
        0 0 24px rgba(150, 178, 255, 0.14);
}

.zero-g-slot-3::after,
.zero-g-slot-6::after,
.zero-g-slot-9::after,
.zero-g-slot-12::after {
    color: rgba(220, 190, 255, 0.84);

    text-shadow:
        0 0 8px rgba(192, 140, 255, 0.36),
        0 0 18px rgba(150, 178, 255, 0.12);
}

.zero-g-slot-3 .zero-g-item__en,
.zero-g-slot-6 .zero-g-item__en,
.zero-g-slot-9 .zero-g-item__en,
.zero-g-slot-12 .zero-g-item__en {
    color: rgba(224, 198, 255, 0.78);
}

.zero-g-slot-3:hover,
.zero-g-slot-6:hover,
.zero-g-slot-9:hover,
.zero-g-slot-12:hover {
    background:
        radial-gradient(circle at 14% 18%, rgba(192, 140, 255, 0.23), transparent 42%),
        linear-gradient(135deg, rgba(28, 14, 58, 0.96), rgba(42, 26, 86, 0.82));

    border-color: rgba(204, 150, 255, 0.72);

    box-shadow:
        0 0 22px rgba(192, 140, 255, 0.3),
        0 0 56px rgba(150, 178, 255, 0.18),
        inset 0 0 22px rgba(255, 255, 255, 0.045);
}


/* =========================================================
   8. 彗星リンク：四方八方
========================================================= */
.comet-link {
    position: absolute;
    width: 180px;
    height: 1px;
    pointer-events: auto;
    text-decoration: none;
    color: rgba(220, 255, 255, 0.92);
    background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.85), transparent);
    box-shadow: 0 0 18px rgba(0, 242, 255, 0.35);
    z-index: 75;
    transition:
        box-shadow 0.35s ease,
        filter 0.35s ease,
        opacity 0.35s ease;
}

.comet-link::before {
    content: "";
    position: absolute;
    right: 12%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(220, 255, 255, 0.95);
    box-shadow:
        0 0 12px rgba(0, 242, 255, 0.9),
        0 0 26px rgba(0, 120, 255, 0.45);
    transform: translateY(-50%);
}

.comet-link span {
    position: absolute;
    top: -1.7rem;
    right: 0;
    font-size: 0.85rem;
    font-family: var(--font-display);
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.comet-link:hover {
    animation-play-state: paused;

    filter:
        saturate(1.48)
        brightness(1.08);

    transform: scale(1.045);

    box-shadow:
        0 0 10px rgba(255, 120, 180, 0.28),
        0 0 18px rgba(255, 210, 120, 0.22),
        0 0 28px rgba(0, 242, 255, 0.62),
        0 0 72px rgba(0, 120, 255, 0.34);
}

/* Prism Flash */
.comet-link:hover::after {
    content: "";

    position: absolute;
    inset: -8px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 120, 180, 0.00) 0%,
            rgba(255, 120, 180, 0.16) 18%,
            rgba(255, 210, 120, 0.14) 38%,
            rgba(120, 255, 255, 0.18) 62%,
            rgba(120, 180, 255, 0.14) 82%,
            rgba(255, 120, 180, 0.00) 100%
        );

    filter: blur(10px);

    opacity: 0;

    animation: prismCatchFlash 0.9s ease forwards;

    pointer-events: none;
}

@keyframes prismCatchFlash {

    0% {
        opacity: 0;
        transform: scaleX(0.72);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scaleX(1.18);
    }
}

.comet-link-1 {
    top: 23%;
    left: -14%;
    animation: cometDriftOne 18s linear infinite;
}

.comet-link-2 {
    bottom: 28%;
    right: -14%;
    animation: cometDriftTwo 20s linear infinite;
}

.comet-link-2 span {
    display: inline-block;
    transform: rotate(-180deg) translateY(-180%);
    transform-origin: center;
}

.comet-link-3 {
    bottom: 10%;
    left: -18%;
    animation: cometDriftThree 31s linear infinite;
}

.comet-link-4 {
    top: 8%;
    right: -18%;
    animation: cometDriftFour 23s linear infinite;
}

.comet-link-4 span {
    display: inline-block;
    transform: rotate(180deg) translateY(-180%);
    transform-origin: center;
}

.comet-link-5 {
    top: -12%;
    left: 10%;
    animation: cometDriftFive 29s linear infinite;
}

.comet-link-6 {
    bottom: -12%;
    left: 20%;
    animation: cometDriftSix 18s linear infinite;
}

.comet-link-6 span {
    display: inline-block;
    transform: translateY(180%);
    transform-origin: center;
}

@keyframes cometDriftOne {
    0% {
        transform: translateX(0) rotate(1deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    100% {
        transform: translate(132vw, 30vh) rotate(1deg);
        opacity: 0;
    }
}

@keyframes cometDriftTwo {
    0% {
        transform: translate(0, 0) rotate(198deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translate(-132vw, -40vh) rotate(198deg);
        opacity: 0;
    }
}

@keyframes cometDriftThree {
    0% {
        transform: translate(0, 0) rotate(-28deg);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    100% {
        transform: translate(132vw, -58vh) rotate(-28deg);
        opacity: 0;
    }
}

@keyframes cometDriftFour {
    0% {
        transform: translate(0, 0) rotate(160deg);
        opacity: 0;
    }

    9% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    100% {
        transform: translate(-132vw, 62vh) rotate(160deg);
        opacity: 0;
    }
}

@keyframes cometDriftFive {
    0% {
        transform: translate(0, 0) rotate(35deg);
        opacity: 0;
    }

    11% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    100% {
        transform: translate(80vw, 80vh) rotate(35deg);
        opacity: 0;
    }
}

@keyframes cometDriftSix {
    0% {
        transform: translate(0, 0) rotate(-60deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    100% {
        transform: translate(60vw, -132vh) rotate(-60deg);
        opacity: 0;
    }
}

/* =========================================================
   9. Mission Log Runway - FINAL
========================================================= */
.mission-log-runway {
    position: absolute;
    right: 5vw;
    bottom: 12vh;
    z-index: 70;

    width: min(380px, 36vw);
    pointer-events: auto;
}

.mission-log-runway-head {
    margin-bottom: 10px;
    transform: translateY(24px);

    font-family: var(--font-title);
    font-size: 1.05rem;
    letter-spacing: 0.22em;

    color: rgba(220, 245, 255, 0.9);
    text-align: right;

    text-shadow:
        0 0 10px rgba(220, 245, 255, 0.9),
        0 0 24px rgba(0, 242, 255, 0.6),
        0 0 60px rgba(0, 120, 255, 0.35);
}

.mission-log-stage {
    position: relative;
    height: 200px;
}

.mission-log-card {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 100%;
    padding: 16px 18px;
    box-sizing: border-box;

    color: rgba(224, 242, 255, 0.92);
    text-decoration: none;

    border-radius: 2px;
    backdrop-filter: blur(6px);

    opacity: 0;
    transform-origin: center bottom;

    animation: missionLogRunway 24s ease-in-out infinite;

    --mission-star: 224, 242, 255;
}

.mission-log-card::before {
    content: "";
    position: absolute;
    right: 4%;
    top: 18%;

    width: 6px;
    height: 6px;
    border-radius: 50%;

    background: rgba(var(--mission-star), 1);

    box-shadow:
        0 0 8px rgba(var(--mission-star), 0.95),
        0 0 18px rgba(var(--mission-star), 0.75),
        0 0 36px rgba(var(--mission-star), 0.42);

    transform: translate(50%, -50%);
    pointer-events: none;
}

.mission-log-card-1 {
    z-index: 40;
    animation-delay: 0s;

    --mission-star: 255, 220, 120;

    border: 1px solid rgba(255, 210, 120, 0.85);

    background:
        radial-gradient(circle at 20% 20%, rgba(255, 200, 120, 0.18), transparent 40%),
        linear-gradient(135deg, rgba(20, 14, 6, 0.92), rgba(60, 40, 10, 0.75));

    box-shadow:
        0 0 26px rgba(255, 210, 120, 0.6),
        0 0 80px rgba(255, 180, 60, 0.25),
        inset 0 0 26px rgba(255, 200, 120, 0.12);
}

.mission-log-card-2 {
    z-index: 30;
    animation-delay: 6s;

    --mission-star: 180, 255, 255;

    border: 1px solid rgba(0, 242, 255, 0.55);

    background:
        radial-gradient(circle at 30% 30%, rgba(0, 242, 255, 0.12), transparent 40%),
        linear-gradient(135deg, rgba(0, 18, 44, 0.9), rgba(0, 40, 90, 0.65));

    box-shadow:
        0 0 20px rgba(0, 242, 255, 0.4),
        0 0 60px rgba(0, 120, 255, 0.2),
        inset 0 0 20px rgba(0, 242, 255, 0.08);
}

.mission-log-card-3 {
    z-index: 20;
    animation-delay: 12s;

    --mission-star: 140, 220, 255;

    border: 1px solid rgba(0, 180, 255, 0.35);

    background:
        linear-gradient(135deg, rgba(0, 16, 38, 0.88), rgba(0, 30, 70, 0.6));

    box-shadow:
        0 0 16px rgba(0, 180, 255, 0.28),
        inset 0 0 14px rgba(0, 180, 255, 0.05);
}

.mission-log-card-4 {
    z-index: 10;
    animation-delay: 18s;

    --mission-star: 120, 180, 255;

    border: 1px solid rgba(120, 180, 255, 0.2);

    background:
        linear-gradient(135deg, rgba(0, 14, 32, 0.82), rgba(0, 20, 50, 0.5));

    box-shadow:
        0 0 12px rgba(120, 180, 255, 0.18);
}

.mission-log-date {
    display: block;
    margin-bottom: 8px;

    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.16em;

    color: rgba(255, 210, 120, 0.95);
}

.mission-log-title {
    display: block;

    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.14em;
    line-height: 1.45;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-shadow:
        0 0 8px rgba(224, 242, 255, 0.45),
        0 0 22px rgba(0, 242, 255, 0.22);
}

@keyframes missionLogRunway {
    0% {
        opacity: 0;
        z-index: 80;
        transform: translate(40px, -25px) scale(0.92);
    }

    8% {
        opacity: 1;
        z-index: 80;
        transform: translate(0, -50px) scale(1.05);
    }

    25% {
        opacity: 1;
        transform: translate(0, -50px) scale(1.05);
    }

    40% {
        opacity: 0.75;
        z-index: 20;
        transform: translate(-18px, -12px) scale(0.94);
    }

    70% {
        opacity: 0.45;
        z-index: 10;
        transform: translate(-36px, 8px) scale(0.88);
    }

    100% {
        opacity: 0;
        transform: translate(-52px, 20px) scale(0.82);
    }
}

/* =========================================================
   9-1. Top Important Notice
========================================================= */
.top-important-notice {
    position: absolute;
    left: 40%;
    bottom: 5vh;
    z-index: 72;

    width: min(450px, 26vw);

    pointer-events: auto;
}

.top-important-notice__inner {
    padding: 12px 14px 13px;

    display: block;

    background:
        linear-gradient(180deg,
            rgba(7, 11, 24, 0.62) 0%,
            rgba(6, 9, 20, 0.48) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 2px solid rgba(212, 175, 55, 0.58);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(6px);
}

.top-important-notice__label {
    margin: 0 0 4px;

    font-family: var(--font-title);
    font-size: 0.58rem;
    line-height: 1.3;
    letter-spacing: 0.16em;
    color: rgba(212, 175, 55, 0.88);
}

.top-important-notice__body {
    min-width: 0;
}

.top-important-notice__jp {
    display: none;
}

.top-important-notice__title {
    margin: 0;

    font-size: 0.74rem;
    line-height: 1.48;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.top-important-notice__title a {
    display: block;

    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.top-important-notice__title a:hover {
    color: rgba(232, 210, 142, 0.96);
}

.top-important-notice__date {
    display: none;
}

.top-important-notice__link {
    display: none;
}

.top-important-notice__link a {
    color: rgba(232, 210, 142, 0.92);
    text-decoration: none;
}

/* =========================================================
   10. 触れる宇宙：共通リアクション
========================================================= */
.zero-g-item:hover,
.celestial-card:hover,
.comet-link:hover {
    cursor: pointer;
}

.zero-g-item:focus-visible,
.celestial-card:focus-visible,
.comet-link:focus-visible {
    outline: 2px solid rgba(180, 255, 255, 0.9);
    outline-offset: 4px;
}

/* =========================================================
   11. Responsive
========================================================= */
@media (min-width: 769px) {
    .galaxy-manifesto {
        padding: 2vw 4vw;
    }

    .manifesto-line {
        width: 96vw;
        max-width: none;
        font-size: clamp(20px, 1.75vw, 38px);
        line-height: 2.35;
        letter-spacing: 0.09em;
    }
}

@media (max-width: 768px) {
    #galaxy-core {
        width: 130px;
    }

    .orbit-inner {
        width: 420px;
        height: 420px;
    }

    .orbit-outer {
        width: 680px;
        height: 680px;
    }

    .celestial-card {
        width: 170px;
        padding: 0.9rem;
        font-size: 0.82rem;
    }

    .zero-g-item {
        width: 176px;
        min-height: 68px;
        padding: 12px 16px;
    }

    .zero-g-item__jp {
        margin-bottom: 5px;
        font-size: 0.95rem;
        letter-spacing: 0.06em;
    }

    .zero-g-item__en {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .zero-g-item::after {
        right: 14px;
        bottom: 10px;
        font-size: 0.86rem;
    }

    .zero-g-slot-1 {
        top: 12%;
        left: 5%;
    }

    .zero-g-slot-2 {
        top: 17%;
        right: 3%;
    }

    .zero-g-slot-3 {
        top: 23%;
        left: 4%;
    }

    .zero-g-slot-4 {
        top: 28%;
        right: 5%;
    }

    .zero-g-slot-5 {
        bottom: 56%;
        left: 6%;
    }

    .zero-g-slot-6 {
        bottom: 13%;
        right: 8%;
    }

    .zero-g-slot-7,
    .zero-g-slot-8,
    .zero-g-slot-9,
    .zero-g-slot-10,
    .zero-g-slot-11,
    .zero-g-slot-12 {
        display: none;
    }

    .comet-link {
        width: 120px;
    }

    .comet-link span {
        font-size: 0.66rem;
    }

    .galaxy-manifesto {
        padding: 8vh 6vw;
        align-items: center;
    }

    .manifesto-line {
        width: 88vw;
        font-size: clamp(13px, 3.6vw, 18px);
        line-height: 2.15;
        letter-spacing: 0.04em;
        transform: rotate(-2deg);
    }

    .mission-log-runway {
        right: 5vw;
        bottom: 10vh;
        width: min(300px, 78vw);
    }

    .mission-log-runway-head {
        font-size: 0.78rem;
    }

    .mission-log-stage {
        height: 160px;
    }

    .mission-log-title {
        font-size: 0.82rem;
    }

    .top-important-notice {
        top: 12px;
        left: 12px;
        right: 12px;
        bottom: auto;

        width: auto;
    }

    .top-important-notice__inner {
        padding: 7px 10px;

        background: rgba(6, 9, 20, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 2px solid rgba(212, 175, 55, 0.5);

        box-shadow: none;
        backdrop-filter: blur(4px);
    }

    .top-important-notice__label {
        margin: 0 0 2px;

        font-size: 0.5rem;
        line-height: 1.2;
        letter-spacing: 0.12em;
    }

    .top-important-notice__title {
        font-size: 0.64rem;
        line-height: 1.35;
        letter-spacing: 0.01em;
    }

    .top-important-notice__title a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
    }
}