:root {
    --bg-ink: #050e11;
    --bg-earth: #1d1207;
    --bg-moss: #0c2f25;
    --title-bright: #f3ffef;
    --title-warm: #ffd08f;
    --title-cool: #9effe5;
    --forest-fill: rgba(7, 20, 22, 0.9);
    --font-display: "Manrope", "Avenir Next", "Trebuchet MS", sans-serif;
    --font-body: "Space Grotesk", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at 10% 12%, rgba(118, 255, 210, 0.18), transparent 45%),
        radial-gradient(circle at 86% 6%, rgba(255, 117, 50, 0.2), transparent 42%),
        linear-gradient(160deg, var(--bg-ink), var(--bg-earth) 52%, var(--bg-moss));
    font-family: var(--font-body);
    overflow: hidden;
}

body::before,
body::after {
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 460ms ease;
    z-index: 1;
}

body::before {
    background:
        radial-gradient(circle at 20% 40%, rgba(170, 250, 206, 0.24), transparent 46%),
        radial-gradient(circle at 78% 66%, rgba(255, 172, 120, 0.18), transparent 42%),
        repeating-radial-gradient(
            circle at 50% 55%,
            transparent 0 36px,
            rgba(188, 240, 210, 0.08) 36px 38px,
            transparent 38px 76px
        );
    filter: blur(0.5px);
}

body::after {
    background:
        repeating-linear-gradient(
            118deg,
            transparent 0 14px,
            rgba(184, 241, 206, 0.07) 14px 15px,
            transparent 15px 32px
        ),
        repeating-linear-gradient(
            -52deg,
            transparent 0 17px,
            rgba(254, 182, 120, 0.06) 17px 18px,
            transparent 18px 38px
        );
    mix-blend-mode: screen;
}

body.egg-mycelium::before,
body.egg-mycelium::after {
    opacity: 1;
}

#spore-field {
    inset: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.color-drift {
    position: fixed;
    inset: -28vmax;
    z-index: 0;
    pointer-events: none;
    background:
        conic-gradient(
            from 220deg at 50% 50%,
            rgba(255, 111, 60, 0.2),
            rgba(118, 255, 210, 0.16),
            rgba(201, 249, 128, 0.17),
            rgba(255, 111, 60, 0.2)
        );
    filter: blur(56px) saturate(118%);
    animation: drift-rotate 26s linear infinite;
}

.shell {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    min-height: 100vh;
    padding: clamp(0.9rem, 3vw, 2.4rem) clamp(0.9rem, 3.4vw, 3.8rem);
    position: relative;
    text-align: left;
    z-index: 3;
}

h1 {
    --title-fit: 1;
    --breath-cycle: 23.6s;
    --glow-cycle: 26.4s;
    color: var(--title-bright);
    display: inline-flex;
    flex-wrap: nowrap;
    font-family: var(--font-display);
    font-size: calc(clamp(1.16rem, 6.05vw, 6.45rem) * var(--title-fit));
    font-weight: 900;
    font-variation-settings: "wght" 900;
    -webkit-text-stroke: 0.012em rgba(243, 255, 239, 0.28);
    letter-spacing: clamp(0.014rem, 0.13vw, 0.085rem);
    line-height: 0.98;
    margin: 0;
    max-width: calc(100vw - 1.8rem);
    overflow: visible;
    white-space: nowrap;
    text-rendering: geometricPrecision;
    text-transform: uppercase;
    text-shadow:
        0 0 0.5rem rgba(158, 255, 229, 0.26),
        0 0 1.2rem rgba(255, 184, 118, 0.18);
    animation:
        title-breathe var(--breath-cycle) cubic-bezier(0.27, 0.65, 0.34, 1) infinite,
        title-glow var(--glow-cycle) ease-in-out infinite;
}

#hero-title .word {
    display: inline-flex;
    transform-origin: 50% 62%;
    will-change: transform;
    animation: word-breathe var(--breath-cycle) cubic-bezier(0.27, 0.65, 0.34, 1) infinite;
    animation-delay: calc(var(--w) * -1.22s);
}

#hero-title .glyph {
    display: inline-block;
    transform-origin: 50% 65%;
    will-change: transform;
    animation: letter-breathe calc(var(--breath-cycle) * 0.98) cubic-bezier(0.27, 0.65, 0.34, 1) infinite;
    animation-delay: calc((var(--w) * -1.22s) + (var(--ci) * -0.2s));
}

#hero-title .gap {
    width: 0.24em;
}

.forest {
    bottom: 0;
    height: clamp(220px, 33vh, 330px);
    left: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 4;
    pointer-events: auto;
}

.forest::before {
    background: linear-gradient(180deg, rgba(151, 205, 174, 0.08), rgba(151, 205, 174, 0));
    content: "";
    height: 15%;
    inset: 0 0 auto;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.forest * {
    pointer-events: none;
}

.forest-layer,
.forest-ground,
.forest-mist {
    inset: 0;
    position: absolute;
}

.forest-layer-back {
    filter: blur(0.5px);
    opacity: 0.32;
    transform: translateY(68px) scale(0.95);
}

.forest-layer-mid {
    opacity: 0.52;
    transform: translateY(44px) scale(0.98);
}

.forest-layer-front {
    opacity: 0.78;
    transform: translateY(18px);
}

.forest-ground {
    left: -8vw;
    width: 116vw;
}

.forest-ground-back {
    background:
        linear-gradient(180deg, rgba(56, 87, 69, 0.26), rgba(8, 20, 23, 0.58)),
        radial-gradient(circle at 20% 30%, rgba(145, 194, 166, 0.08), transparent 48%);
    bottom: -2px;
    clip-path: polygon(0 76%, 8% 71%, 19% 79%, 29% 72%, 40% 80%, 50% 74%, 61% 81%, 72% 73%, 83% 80%, 93% 72%, 100% 77%, 100% 100%, 0 100%);
    height: 20%;
}

.forest-mist {
    background:
        linear-gradient(180deg, rgba(169, 216, 191, 0.08), rgba(169, 216, 191, 0)),
        radial-gradient(circle at 32% 36%, rgba(167, 213, 192, 0.06), transparent 56%);
    bottom: 7%;
    filter: blur(1px);
    height: 16%;
    z-index: 3;
}

.forest-ground-front {
    background:
        linear-gradient(180deg, rgba(22, 43, 38, 0.88), rgba(5, 15, 18, 0.98)),
        radial-gradient(circle at 74% 36%, rgba(108, 166, 132, 0.09), transparent 44%);
    bottom: -2px;
    clip-path: polygon(0 82%, 8% 77%, 20% 85%, 31% 78%, 43% 87%, 53% 79%, 66% 87%, 78% 78%, 89% 84%, 100% 79%, 100% 100%, 0 100%);
    height: 18%;
    z-index: 4;
}

.fungus {
    --x: 50;
    --scale: 1;
    --tilt: 0deg;
    --bottom: 0px;
    --cap-a: #ceb497;
    --cap-b: #8f6d56;
    --cap-c: #5f4738;
    --stem-a: #c6ceb7;
    --stem-b: #7a8775;
    --ring: rgba(190, 185, 160, 0.72);
    --gill-a: rgba(196, 181, 160, 0.82);
    --gill-b: rgba(118, 95, 80, 0.66);
    --stem-h: 78px;
    --stem-w: 17px;
    --cap-w: 54px;
    --cap-h: 52px;
    --ring-y: 74px;
    --gill-w: 44px;
    --gill-h: 16px;
    --gill-y: 57px;
    --cap-y: 60px;
    --shadow-w: 46px;
    --shadow-a: 0.26;
    --stem-shadow: rgba(72, 102, 84, 0.24);
    --ring-opacity: 0.22;
    bottom: var(--bottom);
    height: calc(var(--stem-h) + var(--cap-h) + 30px);
    left: calc(var(--x) * 1%);
    opacity: 0.9;
    position: absolute;
    transform: translateX(-50%) scale(var(--scale)) rotate(var(--tilt));
    transform-origin: 50% 100%;
    width: calc(var(--cap-w) + 12px);
}

.fungus::before {
    content: "";
    background: rgba(2, 9, 10, 0.42);
    border-radius: 50%;
    bottom: 4px;
    filter: blur(1.4px);
    height: 10px;
    left: 50%;
    opacity: var(--shadow-a);
    position: absolute;
    transform: translateX(-50%);
    width: var(--shadow-w);
}

.fungus-stem {
    background: linear-gradient(145deg, var(--stem-a), var(--stem-b));
    border-radius: 46% 46% 30% 30% / 60% 60% 32% 32%;
    bottom: 10px;
    box-shadow:
        inset -4px 0 0 var(--stem-shadow),
        0 1px 2px rgba(0, 0, 0, 0.2);
    height: var(--stem-h);
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: var(--stem-w);
}

.fungus-stem::after {
    background: linear-gradient(180deg, rgba(255, 255, 244, 0.22), rgba(255, 255, 244, 0));
    border-radius: 999px;
    content: "";
    inset: 8px 32% 12px;
    position: absolute;
}

.fungus-ring {
    background: var(--ring);
    border-radius: 999px;
    bottom: var(--ring-y);
    height: 6px;
    left: 50%;
    opacity: var(--ring-opacity);
    position: absolute;
    transform: translateX(-50%);
    width: calc(var(--stem-w) + 2px);
}

.fungus-cap {
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 246, 216, 0.16), transparent 34%),
        linear-gradient(160deg, var(--cap-a), var(--cap-b) 57%, var(--cap-c));
    border-radius: 58% 58% 46% 46% / 78% 78% 30% 30%;
    bottom: var(--cap-y);
    box-shadow:
        inset 0 -7px 9px rgba(64, 35, 24, 0.22),
        0 2px 4px rgba(0, 0, 0, 0.18);
    height: var(--cap-h);
    left: 50%;
    overflow: hidden;
    position: absolute;
    transform: translateX(-50%);
    width: var(--cap-w);
}

.fungus-cap::before {
    background: linear-gradient(180deg, rgba(255, 250, 233, 0.08), rgba(255, 250, 233, 0));
    content: "";
    inset: 0;
    opacity: 0.4;
    position: absolute;
}

.fungus-cap::after {
    background:
        radial-gradient(circle at 40% 52%, rgba(255, 233, 190, 0.12), transparent 18%);
    content: "";
    inset: 0;
    position: absolute;
}

.fungus-gills {
    background:
        linear-gradient(180deg, var(--gill-a), var(--gill-b)),
        repeating-linear-gradient(
            90deg,
            rgba(118, 92, 72, 0.54),
            rgba(118, 92, 72, 0.54) 1px,
            transparent 1px,
            transparent 4px
        );
    border-radius: 50% 50% 44% 44% / 70% 70% 30% 30%;
    bottom: var(--gill-y);
    height: var(--gill-h);
    left: 50%;
    opacity: 0.9;
    position: absolute;
    transform: translateX(-50%);
    width: var(--gill-w);
}

.fungus.species-flat {
    --cap-h: 38px;
    --cap-w: 52px;
    --gill-w: 42px;
}

.fungus.species-flat .fungus-cap {
    border-radius: 62% 62% 38% 38% / 68% 68% 32% 32%;
}

.fungus.species-bell .fungus-cap {
    border-radius: 52% 52% 50% 50% / 84% 84% 28% 28%;
}

.fungus.species-bell {
    --cap-h: 48px;
    --cap-w: 40px;
    --gill-w: 30px;
}

.fungus.species-cluster {
    --cap-h: 32px;
    --cap-w: 30px;
    --gill-w: 24px;
    --stem-w: 9px;
    width: 46px;
}

.fungus.species-cluster .fungus-cap {
    border-radius: 54% 54% 46% 46% / 72% 72% 32% 32%;
}

.fungus.species-cluster .fungus-cap::before {
    background:
        radial-gradient(ellipse at 20% 68%, rgba(255, 235, 202, 0.34), transparent 60%),
        radial-gradient(ellipse at 78% 61%, rgba(255, 230, 194, 0.3), transparent 58%);
    opacity: 0.72;
}

.fungus.species-cluster::after {
    background:
        radial-gradient(circle at 25% 66%, rgba(180, 151, 126, 0.35), transparent 42%),
        radial-gradient(circle at 72% 61%, rgba(121, 95, 79, 0.31), transparent 43%);
    content: "";
    inset: 0;
    opacity: 0.32;
    pointer-events: none;
    position: absolute;
}

.fungus.species-cup {
    --cap-h: 30px;
    --cap-w: 40px;
    --gill-h: 10px;
    --gill-w: 28px;
    --stem-h: 54px;
    --ring-y: 50px;
    --gill-y: 41px;
    --cap-y: 44px;
    --shadow-w: 31px;
}

.fungus.species-cup .fungus-cap {
    border-radius: 56% 56% 42% 42% / 60% 60% 40% 40%;
}

body.game-open {
    overflow: hidden;
}

.secret-game-overlay {
    background:
        radial-gradient(circle at 24% 22%, rgba(113, 255, 205, 0.18), transparent 42%),
        radial-gradient(circle at 82% 18%, rgba(255, 152, 102, 0.18), transparent 44%),
        linear-gradient(170deg, rgba(2, 8, 10, 0.97), rgba(7, 18, 20, 0.98));
    display: none;
    inset: 0;
    position: fixed;
    z-index: 80;
}

.secret-game-overlay.active {
    display: block;
}

.secret-game-canvas {
    display: block;
    height: 100%;
    touch-action: none;
    width: 100%;
}

.secret-game-hud {
    background: rgba(9, 23, 26, 0.54);
    border: 1px solid rgba(174, 225, 198, 0.22);
    border-radius: 999px;
    box-shadow: 0 0.3rem 1.2rem rgba(0, 0, 0, 0.28);
    color: rgba(233, 255, 241, 0.84);
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 1.9vw, 0.96rem);
    font-weight: 600;
    left: 50%;
    letter-spacing: 0.08em;
    pointer-events: none;
    position: absolute;
    text-shadow: 0 0 0.7rem rgba(130, 255, 214, 0.24);
    text-transform: uppercase;
    top: 0.9rem;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.45rem 0.88rem;
}

body.egg-prism .color-drift {
    animation:
        drift-rotate 18s linear infinite,
        prism-hue 6.8s linear infinite;
    filter: blur(58px) saturate(148%);
}

body.egg-prism h1 {
    color: #f8ffea;
}

body.egg-prism #hero-title .glyph {
    animation-duration: 6.2s;
}

body.egg-fungi .forest {
    filter: saturate(1.22) brightness(1.08);
}

body.egg-fungi .fungus-cap {
    box-shadow:
        inset 0 -8px 10px rgba(64, 35, 24, 0.22),
        0 3px 8px rgba(220, 255, 206, 0.2);
}

body.egg-fungi .fungus-gills {
    opacity: 1;
    filter: brightness(1.06);
}

body.egg-fungi .fungus-ring {
    background: rgba(223, 222, 183, 0.88);
}

body.egg-phase h1 {
    letter-spacing: clamp(0.04rem, 0.42vw, 0.28rem);
}

body.egg-phase #hero-title .glyph {
    animation-duration: 5.9s;
    animation-timing-function: cubic-bezier(0.21, 0.61, 0.4, 1.05);
}

body.egg-still .color-drift {
    animation-duration: 42s;
    filter: blur(52px) saturate(102%);
}

body.egg-constellation #spore-field {
    mix-blend-mode: screen;
}

body.egg-moon h1 {
    color: #ecfff4;
    text-shadow:
        0 0 0.34rem rgba(187, 255, 228, 0.2),
        0 0 0.84rem rgba(159, 200, 255, 0.18);
}

@keyframes drift-rotate {
    from {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes prism-hue {
    from {
        filter: blur(58px) saturate(148%) hue-rotate(0deg);
    }
    to {
        filter: blur(58px) saturate(148%) hue-rotate(360deg);
    }
}

@keyframes title-breathe {
    0%,
    100% {
        transform: translateY(0.012em) scale(1.038, 1.014);
    }
    20% {
        transform: translateY(-0.055em) scale(1.072, 1.002);
    }
    46% {
        transform: translateY(0.042em) scale(1.024, 1.048);
    }
    72% {
        transform: translateY(-0.032em) scale(1.08, 1.004);
    }
    90% {
        transform: translateY(0.024em) scale(1.03, 1.033);
    }
}

@keyframes title-glow {
    0%,
    100% {
        text-shadow:
            0 0 0.46rem rgba(158, 255, 229, 0.22),
            0 0 1.1rem rgba(255, 184, 118, 0.16);
    }
    50% {
        text-shadow:
            0 0 0.74rem rgba(158, 255, 229, 0.34),
            0 0 1.72rem rgba(255, 184, 118, 0.28);
    }
}

@keyframes word-breathe {
    0%,
    100% {
        transform: translateY(0) scale(1.01, 1.003);
    }
    28% {
        transform: translateY(-0.044em) scale(1.042, 0.99);
    }
    58% {
        transform: translateY(0.03em) scale(1.002, 1.028);
    }
    80% {
        transform: translateY(-0.024em) scale(1.034, 0.998);
    }
}

@keyframes letter-breathe {
    0%,
    100% {
        transform: translateY(0) scale(1.005, 1.002) rotate(0deg);
    }
    24% {
        transform: translateY(-0.026em) scale(1.03, 0.993) rotate(-0.25deg);
    }
    48% {
        transform: translateY(0.02em) scale(0.998, 1.022) rotate(0.22deg);
    }
    72% {
        transform: translateY(-0.017em) scale(1.025, 0.998) rotate(-0.17deg);
    }
}

@media (max-width: 860px) {
    .shell {
        justify-content: center;
        text-align: center;
    }

    h1 {
        font-size: clamp(1.9rem, 15.5vw, 8.4rem);
        letter-spacing: clamp(0.015rem, 0.12vw, 0.08rem);
        line-height: 0.9;
    }

    #hero-title {
        align-items: center;
        display: inline-flex;
        flex-direction: column;
        row-gap: 0.02em;
        white-space: normal;
    }

    #hero-title .word {
        display: block;
    }

    #hero-title .gap {
        display: none;
        width: 0;
    }

    .forest {
        height: clamp(190px, 30vh, 250px);
    }

    .forest-layer-back {
        transform: translateY(56px) scale(0.95);
    }

    .forest-layer-mid {
        transform: translateY(38px) scale(0.98);
    }

    .forest-layer-front {
        transform: translateY(14px);
    }

    .secret-game-hud {
        font-size: clamp(0.66rem, 2.8vw, 0.82rem);
        max-width: calc(100vw - 1rem);
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (prefers-reduced-motion: reduce) {
    .color-drift,
    h1,
    #hero-title .word,
    #hero-title .glyph,
    body.egg-prism .color-drift {
        animation: none;
    }

    body::before,
    body::after {
        display: none;
    }

    #spore-field {
        display: none;
    }
}