/* ===== LOCAL FONTS ===== */
/* DynaPuff */
@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/dynapuff-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/dynapuff-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/dynapuff-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/dynapuff-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/dynapuff-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/dynapuff-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Patrick Hand */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/patrickhand-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/patrickhand-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/patrickhand-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg-sky: #e8f0e8;
    --bg-sky-light: #f0f5ef;
    --bg-card: rgba(240, 245, 235, 0.85);
    --bg-card-solid: #eef3ea;
    --bg-glass: rgba(255, 255, 255, 0.45);
    --bg-glass-strong: rgba(255, 255, 255, 0.65);

    --green-pale: #d4e4c8;
    --green-soft: #b8d4a0;
    --green-mid: #8ebb70;
    --green-accent: #6ca850;
    --green-dark: #4a7a38;

    --mint: #c8e0d0;
    --sage: #a8c8a0;
    --lavender: #d8d0e8;
    --lavender-light: #e8e0f0;
    --peach: #f0dcd0;
    --cream: #f8f4e8;
    --gold: #d4a843;
    --gold-light: #e8c860;
    --pink-soft: #e8c0c0;

    --text-dark: #3a3a3a;
    --text-mid: #5a5a5a;
    --text-light: #8a8a8a;
    --text-white: #ffffff;

    --shadow-soft: 0 4px 20px rgba(100, 140, 80, 0.15);
    --shadow-card: 0 8px 32px rgba(100, 140, 80, 0.12);
    --shadow-glow: 0 0 40px rgba(168, 200, 160, 0.4);

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-pill: 50px;

    --font-display: 'DynaPuff', cursive;
    --font-body: 'Patrick Hand', cursive;
    --font-handwritten: 'Patrick Hand', cursive;
    --font-cloud: 'DynaPuff', cursive;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: linear-gradient(180deg,
        #dce8d4 0%,
        #e4eedc 15%,
        #e8f0e8 30%,
        #eaf2f0 50%,
        #e0e8f0 70%,
        #d8e0ec 85%,
        #d0d8e8 100%
    );
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(212, 228, 200, 0.3);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--green-soft), var(--mint));
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--green-mid), var(--green-soft));
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--green-soft) rgba(212, 228, 200, 0.3);
}

#starCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0.98;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: saturate(1.14) brightness(1.08);
}

.meteor-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.ambient-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.ambient-star {
    position: absolute;
    border-radius: 50%;
    will-change: opacity, transform;
    animation: ambientTwinkle var(--dur, 3s) ease-in-out var(--del, 0s) infinite both;
}

@keyframes ambientTwinkle {
    0%, 100% { opacity: 0.05; transform: scale(0.5); }
    50% { opacity: var(--peak, 0.7); transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-star {
        animation: none;
        opacity: calc(var(--peak, 0.5) * 0.6);
        transform: scale(0.8);
    }
}

body.performance-lite .ambient-star {
    will-change: auto;
    animation-duration: calc(var(--dur, 3s) * 1.5);
}

.floating-planets {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.planet {
    position: absolute;
    border-radius: 50%;
    opacity: 0.42;
    transform: translate3d(0, 0, 0);
    transform-origin: center;
    will-change: transform;
    filter: saturate(1.1) brightness(1.05);
    mix-blend-mode: screen;
    box-shadow:
        0 0 22px rgba(255, 255, 255, 0.14),
        0 0 42px rgba(208, 224, 216, 0.12);
}

.planet-1 {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 35% 35%, #f0dcd0, #d8c0b0);
    top: 8%;
    right: 12%;
    animation: floatSlow 18s ease-in-out infinite;
    box-shadow:
        0 0 28px rgba(244, 226, 214, 0.18),
        inset -8px -4px 0 rgba(0,0,0,0.08);
}
.planet-1::after {
    content: '';
    position: absolute;
    width: 98px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(216, 192, 176, 0.6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
}

.planet-2 {
    width: 48px;
    height: 48px;
    background: radial-gradient(circle at 35% 35%, #d8d0e8, #c0b8d8);
    top: 25%;
    left: 6%;
    animation: floatSlow 22s ease-in-out infinite reverse;
    box-shadow:
        0 0 20px rgba(222, 216, 244, 0.15),
        inset -5px -3px 0 rgba(0,0,0,0.06);
}

.planet-3 {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle at 35% 35%, #c8e0d8, #a8c8c0);
    bottom: 30%;
    right: 8%;
    animation: floatSlow 15s ease-in-out infinite;
    box-shadow:
        0 0 24px rgba(209, 235, 226, 0.17),
        inset -6px -3px 0 rgba(0,0,0,0.07);
}

.planet-4 {
    width: 38px;
    height: 38px;
    background: radial-gradient(circle at 35% 35%, #e8e0c0, #d0c8a0);
    top: 55%;
    left: 4%;
    animation: floatSlow 20s ease-in-out infinite reverse;
    box-shadow: 0 0 18px rgba(240, 233, 196, 0.14);
}

.planet-5 {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 35% 35%, #d0e0d0, #b8d0b0);
    bottom: 10%;
    left: 15%;
    animation: floatSlow 25s ease-in-out infinite;
    box-shadow:
        0 0 22px rgba(215, 233, 210, 0.15),
        inset -5px -3px 0 rgba(0,0,0,0.06);
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 30px;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--green-dark);
}

.nav-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(168, 200, 160, 0.4);
    box-shadow: 0 2px 8px rgba(100, 140, 80, 0.15);
}

.nav-sparkle {
    color: var(--gold);
    font-size: 0.9rem;
    animation: sparkleRotate 3s ease-in-out infinite;
}

.nav-links {
    display: flex;
    gap: 6px;
}

.nav-link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-mid);
    text-decoration: none;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: var(--green-dark);
    background: rgba(168, 200, 160, 0.25);
    border-color: rgba(168, 200, 160, 0.4);
}

.nav-link.active {
    color: var(--green-dark);
    background: rgba(168, 200, 160, 0.3);
    border-color: var(--green-soft);
}

.section {
    position: relative;
    height: auto;
    min-height: 100vh;
    max-height: none;
    padding: 80px 40px 60px;
    z-index: 2;
    overflow: visible;
    scroll-margin-top: 64px;
}

.section > .section-title,
.section > .home-content,
.section > .story-chapters,
.section > .story-showcase,
.section > .game-layout,
.section > .token-showcase,
.section > .token-grid,
.section > .footer {
    position: relative;
    z-index: 4;
}

.cloud {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.cloud-top-left {
    top: 60px;
    left: -60px;
    width: 300px;
    height: 100px;
}
.cloud-top-left::before {
    width: 160px;
    height: 80px;
    top: 0;
    left: 40px;
    background: rgba(255, 255, 255, 0.45);
    filter: blur(20px);
}
.cloud-top-left::after {
    width: 200px;
    height: 60px;
    top: 20px;
    left: 0;
    background: rgba(255, 255, 255, 0.35);
    filter: blur(25px);
}

.cloud-top-right {
    top: 100px;
    right: -40px;
    width: 280px;
    height: 90px;
}
.cloud-top-right::before {
    width: 180px;
    height: 70px;
    top: 0;
    right: 20px;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(22px);
}
.cloud-top-right::after {
    width: 140px;
    height: 50px;
    top: 15px;
    right: 60px;
    background: rgba(255, 255, 255, 0.3);
    filter: blur(18px);
}

.cloud-bottom {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 120px;
}
.cloud-bottom::before {
    width: 100%;
    height: 80px;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    filter: blur(30px);
    border-radius: 50% 50% 0 0;
}
.cloud-bottom::after {
    width: 60%;
    height: 60px;
    bottom: 10px;
    left: 20%;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(25px);
    border-radius: 50%;
}

.cloud-story-left,
.cloud-story-right,
.cloud-game-left,
.cloud-game-right,
.cloud-token-left,
.cloud-token-right {
    width: 250px;
    height: 80px;
}

.cloud-story-left { top: 120px; left: -50px; }
.cloud-story-right { top: 40%; right: -60px; }
.cloud-game-left { top: 80px; left: -40px; }
.cloud-game-right { bottom: 100px; right: -50px; }
.cloud-token-left { top: 100px; left: -60px; }
.cloud-token-right { top: 50%; right: -40px; }

.cloud-story-left::before,
.cloud-story-right::before,
.cloud-game-left::before,
.cloud-game-right::before,
.cloud-token-left::before,
.cloud-token-right::before {
    width: 160px;
    height: 60px;
    top: 0;
    left: 20px;
    background: rgba(255, 255, 255, 0.35);
    filter: blur(20px);
}

.cloud-story-left::after,
.cloud-story-right::after,
.cloud-game-left::after,
.cloud-game-right::after,
.cloud-token-left::after,
.cloud-token-right::after {
    width: 120px;
    height: 40px;
    top: 10px;
    left: 40px;
    background: rgba(255, 255, 255, 0.25);
    filter: blur(18px);
}

.section-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    overflow: visible;
    background: url('assets/bg1.webp') center center / cover no-repeat;
    isolation: isolate;
    z-index: 5;
}



.section-home::before {
    content: '';
    position: absolute;
    inset: 4% 7% 10%;
    background: url('assets/bg1.webp') center center / cover no-repeat;
    filter: blur(42px) saturate(1.05);
    opacity: 0.72;
    transform: scale(1.08);
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.76) 34%, rgba(0, 0, 0, 0.32) 58%, transparent 80%);
    mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.76) 34%, rgba(0, 0, 0, 0.32) 58%, transparent 80%);
}

.section-home::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -5%;
    width: 110%;
    height: 150px;
    background: url('assets/clouds1.webp') center center / 100% 100% no-repeat;
    z-index: 10;
    pointer-events: none;
    opacity: 1;
}

.section-seam-cloud {
    position: absolute;
    left: -5%;
    width: 110%;
    height: 170px;
    background:
        url('assets/clouds1.webp') center 56% / 112% 140% no-repeat,
        url('assets/clouds1.webp') center 40% / 116% 130% no-repeat;
    pointer-events: none;
    opacity: 1;
    overflow: visible;
    transform: translateZ(0);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.88) 16%, black 50%, rgba(0, 0, 0, 0.92) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.88) 16%, black 50%, rgba(0, 0, 0, 0.92) 84%, transparent 100%);
}

.section-seam-cloud-bottom {
    bottom: -60px;
    z-index: 10;
}

.section-seam-cloud-top {
    top: -60px;
    z-index: 5;
}

.section-seam-cloud-bridge {
    position: relative;
    top: auto;
    bottom: auto;
    left: -5%;
    width: 110%;
    margin: -60px 0 -110px;
    z-index: 6;
}

.section-home .home-content {
    max-height: calc(100vh - 126px);
}

.section-home .cloud {
    z-index: 1;
}

.home-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(44px, 5vw, 76px);
    max-width: 1220px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.home-text {
    flex: 1;
    max-width: 620px;
    position: relative;
    padding: clamp(38px, 4.6vw, 56px);
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.98) 0 12%, rgba(255, 255, 255, 0) 13%),
        radial-gradient(circle at 84% 15%, rgba(255, 250, 232, 0.78) 0 9%, rgba(255, 255, 255, 0) 10%),
        radial-gradient(circle at 26% 82%, rgba(232, 244, 226, 0.66) 0 12%, rgba(255, 255, 255, 0) 13%),
        radial-gradient(circle at 82% 74%, rgba(216, 236, 198, 0.48) 0 14%, rgba(255, 255, 255, 0) 15%),
        radial-gradient(circle at 54% 52%, rgba(255, 255, 255, 0.74) 0 18%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 243, 0.82) 52%, rgba(237, 247, 232, 0.78));
    border-radius: 72px 84px 76px 92px / 62px 64px 94px 88px;
    border: 1px solid rgba(255, 255, 255, 0.96);
    box-shadow:
        0 32px 68px rgba(101, 137, 84, 0.18),
        0 0 110px rgba(255, 255, 255, 0.68),
        0 0 160px rgba(210, 231, 193, 0.22),
        inset 0 2px 0 rgba(255, 255, 255, 0.98),
        inset 0 -18px 32px rgba(208, 228, 193, 0.22);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    isolation: isolate;
    overflow: visible;
    animation: heroCloudFloat 7s ease-in-out infinite, heroCloudGlow 9s ease-in-out infinite;
}

.home-text::before,
.home-text::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    z-index: -1;
    pointer-events: none;
}

.home-text::before {
    width: 212px;
    height: 118px;
    top: -34px;
    left: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        72px -10px 0 16px rgba(255, 255, 255, 0.95),
        146px 8px 0 -2px rgba(255, 255, 255, 0.88),
        198px 26px 0 -14px rgba(248, 252, 245, 0.8),
        18px 36px 36px rgba(255, 255, 255, 0.52);
    filter: blur(1.5px);
    opacity: 0.98;
}

.home-text::after {
    width: 236px;
    height: 128px;
    right: 20px;
    bottom: -40px;
    background: rgba(248, 251, 244, 0.9);
    box-shadow:
        -70px 10px 0 12px rgba(255, 255, 255, 0.88),
        -146px -6px 0 -2px rgba(235, 246, 228, 0.82),
        -198px 18px 0 -18px rgba(255, 255, 255, 0.75),
        0 22px 34px rgba(204, 224, 190, 0.34);
    filter: blur(1.5px);
    opacity: 0.98;
}

@keyframes heroCloudFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.01); }
}

@keyframes heroCloudGlow {
    0%, 100% {
        box-shadow:
            0 32px 68px rgba(101, 137, 84, 0.18),
            0 0 110px rgba(255, 255, 255, 0.68),
            0 0 160px rgba(210, 231, 193, 0.22),
            inset 0 2px 0 rgba(255, 255, 255, 0.98),
            inset 0 -18px 32px rgba(208, 228, 193, 0.22);
    }
    50% {
        box-shadow:
            0 38px 84px rgba(101, 137, 84, 0.2),
            0 0 132px rgba(255, 255, 255, 0.78),
            0 0 188px rgba(231, 215, 140, 0.18),
            inset 0 2px 0 rgba(255, 255, 255, 0.98),
            inset 0 -22px 38px rgba(208, 228, 193, 0.26);
    }
}

.home-title {
    font-family: var(--font-cloud);
    font-size: clamp(3.8rem, 6vw, 4.9rem);
    font-weight: 700;
    line-height: 0.94;
    color: var(--text-dark);
    margin-bottom: 24px;
    letter-spacing: -0.035em;
    text-shadow:
        0 10px 30px rgba(255, 255, 255, 0.52),
        0 3px 0 rgba(255, 255, 255, 0.86);
    animation: titleFadeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.home-title-kicker {
    display: inline-block;
    padding: 0.04em 0.14em 0.14em;
    color: #3f4b3e;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 250, 240, 0.6));
    border-radius: 999px;
    box-shadow:
        0 8px 24px rgba(255, 255, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.title-highlight {
    display: inline-block;
    font-family: var(--font-cloud);
    font-size: clamp(5rem, 7vw, 6.4rem);
    font-weight: 700;
    letter-spacing: -0.012em;
    color: #8fcf74;
    background: linear-gradient(135deg, #4f9d49 0%, #83ca4d 30%, #ddb03a 58%, #6abd68 82%, #4b944b 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 0 transparent;
    animation: titleShimmer 4s ease-in-out infinite, titleScale 1s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    filter:
        drop-shadow(0 10px 22px rgba(70, 118, 55, 0.22))
        drop-shadow(0 0 10px rgba(223, 174, 52, 0.12));
    position: relative;
    line-height: 0.88;
    transform-origin: left center;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px rgba(255, 255, 255, 0.12);
}

.title-highlight::after {
    content: '✦';
    position: absolute;
    top: 0;
    right: -18px;
    font-size: 1rem;
    -webkit-text-fill-color: var(--gold);
    animation: sparkleRotate 2.5s ease-in-out infinite;
}

@keyframes titleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes titleScale {
    from { opacity: 0; transform: scale(0.7) translateY(15px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes titleFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.home-subtitle {
    font-size: clamp(1.18rem, 1.5vw, 1.36rem);
    line-height: 1.64;
    color: var(--text-mid);
    margin-bottom: 0;
    font-weight: 500;
    font-family: var(--font-handwritten);
    letter-spacing: 0.02em;
    animation: subtitleFadeIn 1s 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    width: 100%;
    max-width: 100%;
    padding: 18px 22px 17px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(244, 250, 239, 0.24));
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 12px 24px rgba(192, 214, 178, 0.12);
    text-wrap: pretty;
}

.home-subtitle em,
.home-subtitle strong {
    color: var(--green-dark);
    font-style: normal;
}

.home-subtitle strong {
    white-space: nowrap;
}

.home-meta-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 32px;
}

.hero-ca-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(244, 250, 239, 0.28)),
        radial-gradient(circle at 14% 22%, rgba(234, 245, 236, 0.46) 0 14%, rgba(255, 255, 255, 0) 36%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 12px 24px rgba(192, 214, 178, 0.14);
    color: var(--text-dark);
    text-align: left;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    animation: subtitleFadeIn 1s 0.72s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero-ca-card:hover,
.hero-ca-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(168, 200, 160, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 16px 30px rgba(192, 214, 178, 0.18),
        0 0 0 4px rgba(214, 233, 197, 0.16);
    outline: none;
}

.hero-ca-card.is-copied {
    border-color: rgba(126, 180, 95, 0.62);
    background:
        linear-gradient(180deg, rgba(245, 252, 241, 0.74), rgba(236, 247, 228, 0.42)),
        radial-gradient(circle at 14% 22%, rgba(214, 235, 198, 0.54) 0 14%, rgba(255, 255, 255, 0) 36%);
}

.hero-ca-label {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--green-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-ca-value {
    display: block;
    max-width: 100%;
    font-family: Consolas, 'SFMono-Regular', 'Liberation Mono', Menlo, monospace;
    font-size: clamp(0.77rem, 0.88vw, 0.9rem);
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #456248;
    white-space: nowrap;
    word-break: normal;
    overflow: visible;
}

@keyframes subtitleFadeIn {
    from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.home-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(148px, 1fr));
    gap: 14px;
    width: 100%;
    animation: buttonsFadeIn 0.8s 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.home-buttons .btn {
    position: relative;
    overflow: hidden;
    justify-content: center;
    min-width: 0;
    min-height: 72px;
    padding: 16px 20px;
    border-width: 1px;
    font-size: 1.03rem;
    gap: 12px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    box-shadow:
        0 14px 28px rgba(112, 146, 96, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.home-buttons .btn-label {
    min-width: auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.home-buttons .btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-20deg);
    transition: none;
    animation: btnShine 4s ease-in-out infinite;
}

.home-buttons .btn:nth-child(2)::before { animation-delay: 1.3s; }
.home-buttons .btn:nth-child(3)::before { animation-delay: 2.6s; }

@keyframes btnShine {
    0%, 75%, 100% { left: -60%; }
    50% { left: 120%; }
}

@keyframes buttonsFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.btn-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.service-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 18px rgba(97, 126, 81, 0.14);
    flex-shrink: 0;
}

.service-badge-link {
    width: 30px;
    height: 30px;
}

.service-badge-chart {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.service-logo {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.service-badge-x {
    background: rgba(255, 255, 255, 0.78);
}

.service-logo-x {
    width: 18px;
    height: 18px;
    color: #1f2522;
}

.service-badge-link .service-logo {
    width: 18px;
    height: 18px;
}

.service-logo-on-dark {
    filter: brightness(0) invert(1);
}

.btn-primary {
    background: linear-gradient(135deg, var(--green-soft), var(--green-mid));
    color: white;
    box-shadow: 0 4px 15px rgba(108, 168, 80, 0.3);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(108, 168, 80, 0.4);
}

.btn-secondary {
    background: var(--bg-glass-strong);
    color: var(--text-dark);
    border-color: rgba(168, 200, 160, 0.5);
    backdrop-filter: blur(10px);
}
.btn-secondary:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--green-soft);
}

.btn-tertiary {
    background: var(--bg-glass);
    color: var(--text-mid);
    border-color: rgba(200, 200, 200, 0.4);
    backdrop-filter: blur(10px);
}
.btn-tertiary:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--green-soft);
    color: var(--green-dark);
}

.btn-home-service {
    color: var(--green-dark);
    box-shadow:
        0 14px 28px rgba(112, 146, 96, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.btn-home-service:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 20px 38px rgba(112, 146, 96, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.btn-home-pump {
    background: linear-gradient(135deg, rgba(204, 234, 169, 0.98), rgba(146, 197, 117, 0.96));
    border-color: rgba(132, 179, 111, 0.52);
}

.btn-home-twitter {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(233, 240, 230, 0.86));
    border-color: rgba(191, 207, 184, 0.62);
    color: var(--text-dark);
}

.btn-home-dex {
    background: linear-gradient(135deg, rgba(236, 229, 248, 0.96), rgba(204, 230, 219, 0.92));
    border-color: rgba(184, 203, 209, 0.66);
}

.home-portrait {
    position: relative;
    flex-shrink: 0;
}

.home-portrait::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 7%;
    width: 52%;
    height: 18%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(230, 244, 190, 0.42) 0%, rgba(206, 233, 176, 0.2) 38%, rgba(206, 233, 176, 0) 72%);
    filter: blur(18px);
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
}

.home-portrait::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 40px;
    background: radial-gradient(ellipse, rgba(168, 200, 160, 0.5) 0%, rgba(168, 200, 160, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(12px);
    z-index: 0;
    animation: glowFloor 3s ease-in-out infinite;
}

@keyframes glowFloor {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.1); }
}

.portrait-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 224, 208, 0.6) 0%, rgba(200, 224, 208, 0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: glowPulse 4s ease-in-out infinite;
    z-index: 0;
}

.portrait-img {
    position: relative;
    width: auto;
    height: 85vh;
    max-height: 700px;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 10px 30px rgba(100, 140, 80, 0.2));
    animation: floatGentle 6s ease-in-out infinite;
}

.portrait-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    color: var(--gold);
    font-size: 1rem;
    animation: sparkleFloat 3s ease-in-out infinite;
}
.s1 { top: 10%; left: -10%; animation-delay: 0s; font-size: 1.2rem; }
.s2 { top: 5%; right: 5%; animation-delay: 0.5s; font-size: 0.8rem; }
.s3 { top: 40%; left: -15%; animation-delay: 1s; }
.s4 { top: 60%; right: -5%; animation-delay: 1.5s; font-size: 1.1rem; }
.s5 { bottom: 20%; left: 5%; animation-delay: 2s; font-size: 0.9rem; }
.s6 { bottom: 10%; right: 15%; animation-delay: 2.5s; }

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 5;
    animation: fadeInUp 1s 1.5s both;
}

.scroll-indicator span {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--text-light);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--text-light);
    border-bottom: 2px solid var(--text-light);
    transform: rotate(45deg);
    animation: scrollBounce 2s ease-in-out infinite;
}

.section-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-dark);
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.title-star {
    color: var(--gold);
    font-size: 1.2rem;
    vertical-align: middle;
    animation: sparkleRotate 3s ease-in-out infinite;
}

.section-story {
    --story-section-bg-image: url('assets/bg2-1.webp');
    --story-progress-shell-border: rgba(255, 255, 255, 0.88);
    --story-progress-shell-bg:
        linear-gradient(152deg, rgba(255, 255, 255, 0.82), rgba(243, 249, 240, 0.54)),
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.76) 0 12%, rgba(255, 255, 255, 0) 34%);
    --story-progress-shell-shadow:
        0 14px 24px rgba(161, 180, 151, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    --story-progress-divider: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(171, 205, 149, 0.72) 18%, rgba(144, 188, 126, 0.52) 82%, rgba(255, 255, 255, 0));
    --story-progress-step-border: rgba(255, 255, 255, 0.92);
    --story-progress-step-bg:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 244, 0.86)),
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 24%);
    --story-progress-step-shadow:
        0 8px 16px rgba(170, 192, 152, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    --story-progress-step-color: #61715f;
    --story-progress-step-active-border: rgba(230, 244, 220, 0.98);
    --story-progress-step-active-bg:
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(236, 249, 229, 0.92)),
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.98) 0 10%, rgba(255, 255, 255, 0) 24%),
        linear-gradient(112deg, rgba(210, 235, 193, 0.22), rgba(255, 255, 255, 0) 56%);
    --story-progress-step-active-shadow:
        0 10px 18px rgba(160, 189, 144, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    --story-progress-index-bg:
        linear-gradient(180deg, rgba(233, 246, 225, 0.92), rgba(207, 231, 192, 0.7)),
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.94) 0 12%, rgba(255, 255, 255, 0) 30%);
    --story-progress-index-color: #5a8a3f;
    --story-progress-index-shadow:
        0 8px 18px rgba(173, 199, 157, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --story-progress-index-active-bg:
        linear-gradient(180deg, rgba(235, 248, 228, 0.98), rgba(200, 230, 182, 0.78)),
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.98) 0 12%, rgba(255, 255, 255, 0) 30%);
    --story-progress-index-active-color: #528038;
    --story-progress-index-active-shadow:
        0 10px 20px rgba(162, 192, 145, 0.24),
        0 0 18px rgba(255, 255, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    --story-progress-copy-color: #5d6d5d;
    --story-progress-focus: rgba(124, 176, 92, 0.34);
    position: relative;
    isolation: isolate;
    z-index: 4;
    contain: layout style;
    min-height: calc(100vh + 120px);
    min-height: calc(100dvh + 120px);
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
    overflow-y: visible;
    padding-top: 206px;
    padding-bottom: 162px;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.9) 0 10%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 14% 20%, rgba(234, 245, 236, 0.48) 0 11%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 84% 22%, rgba(229, 220, 248, 0.34) 0 13%, rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 22% 76%, rgba(247, 232, 189, 0.16) 0 10%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 80% 72%, rgba(219, 232, 244, 0.2) 0 10%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 16%),
        linear-gradient(180deg,
            rgba(249, 252, 248, 0.84) 0%,
            rgba(239, 247, 242, 0.72) 18%,
            rgba(232, 242, 236, 0.56) 36%,
            rgba(236, 230, 246, 0.48) 58%,
            rgba(224, 238, 230, 0.54) 78%,
            rgba(229, 238, 244, 0.32) 100%
        ),
        linear-gradient(120deg,
            rgba(233, 243, 232, 0.28) 0%,
            rgba(255, 255, 255, 0) 36%,
            rgba(232, 225, 244, 0.24) 68%,
            rgba(229, 238, 244, 0.14) 100%
        ),
        var(--story-section-bg-image) center center / cover no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(182, 206, 189, 0.36),
        inset 0 40px 60px rgba(255, 255, 255, 0.18);
}

.section-story[data-story-active-index="1"] {
    --story-section-bg-image: url('assets/bg2-2.webp');
    --story-progress-shell-border: rgba(255, 255, 255, 0.9);
    --story-progress-shell-bg:
        linear-gradient(152deg, rgba(255, 255, 255, 0.82), rgba(245, 239, 252, 0.62)),
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.76) 0 12%, rgba(255, 255, 255, 0) 34%);
    --story-progress-shell-shadow:
        0 14px 24px rgba(173, 160, 204, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    --story-progress-divider: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(197, 181, 236, 0.78) 18%, rgba(161, 135, 226, 0.62) 82%, rgba(255, 255, 255, 0));
    --story-progress-step-border: rgba(255, 255, 255, 0.94);
    --story-progress-step-bg:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 252, 0.88)),
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 24%);
    --story-progress-step-shadow:
        0 8px 16px rgba(184, 169, 219, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    --story-progress-step-color: #6d6480;
    --story-progress-step-active-border: rgba(235, 226, 250, 0.98);
    --story-progress-step-active-bg:
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(238, 230, 250, 0.94)),
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.98) 0 10%, rgba(255, 255, 255, 0) 24%),
        linear-gradient(112deg, rgba(203, 183, 242, 0.2), rgba(255, 255, 255, 0) 56%);
    --story-progress-step-active-shadow:
        0 10px 18px rgba(174, 156, 214, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    --story-progress-index-bg:
        linear-gradient(180deg, rgba(238, 232, 249, 0.94), rgba(213, 197, 241, 0.76)),
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.94) 0 12%, rgba(255, 255, 255, 0) 30%);
    --story-progress-index-color: #7a61b0;
    --story-progress-index-shadow:
        0 8px 18px rgba(185, 171, 220, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --story-progress-index-active-bg:
        linear-gradient(180deg, rgba(242, 236, 252, 0.98), rgba(205, 184, 241, 0.82)),
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.98) 0 12%, rgba(255, 255, 255, 0) 30%);
    --story-progress-index-active-color: #6d53aa;
    --story-progress-index-active-shadow:
        0 10px 20px rgba(179, 161, 223, 0.24),
        0 0 18px rgba(255, 255, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    --story-progress-copy-color: #685f79;
    --story-progress-focus: rgba(150, 120, 220, 0.34);
}

@media (min-width: 900px) {
    .section-story {
        min-height: calc(100vh + 120px);
        min-height: calc(100dvh + 120px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: clamp(186px, calc(12vh + 90px), 218px);
        padding-bottom: clamp(148px, 4vh + 120px, 162px);
    }

    .section-story .section-title {
        font-size: clamp(2.75rem, 4.2vw, 4rem);
        margin-bottom: 16px;
    }

    .section-story .story-intro {
        width: min(100%, 700px);
        margin: 0 auto 24px;
        padding: 14px 24px;
        font-size: clamp(0.96rem, 1.15vw, 1.12rem);
        line-height: 1.42;
    }

    .section-story .story-chapters {
        max-width: 1160px;
        gap: clamp(20px, 2.2vw, 28px);
    }

    .section-story .story-chapters::before {
        top: 8%;
        bottom: 8%;
    }

    .section-story .chapter::before {
        top: 24px;
    }

    .section-story .chapter-card {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 24px 24px 22px;
        border-radius: 78px 126px 84px 138px / 70px 76px 120px 102px;
    }

    .section-story .chapter-card.reverse {
        flex-direction: row-reverse;
        border-radius: 138px 82px 126px 86px / 106px 72px 84px 132px;
    }

    .section-story .chapter-image-wrap {
        width: min(46%, 260px);
        height: clamp(210px, 27vh, 250px);
        border-radius: 36px 62px 42px 76px / 30px 38px 64px 72px;
    }

    .section-story .chapter-image-wrap::after {
        left: 14%;
        right: 14%;
        bottom: -24px;
        height: 64px;
    }

    .section-story .chapter-number {
        top: 14px;
        left: 14px;
        min-width: 44px;
        padding: 9px 14px;
        font-size: 0.78rem;
    }

    .section-story .chapter-text {
        min-width: 0;
        gap: 10px;
    }

    .section-story .chapter-title {
        font-size: clamp(1.82rem, 2.45vw, 2.3rem);
        margin-bottom: 0;
    }

    .section-story .chapter-text p {
        max-width: 36ch;
        font-size: clamp(0.95rem, 0.96vw, 1rem);
        line-height: 1.58;
    }
}

.section-story::before,
.section-story::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    transform: translateZ(0);
}

.section-story::before {
    width: 520px;
    height: 520px;
    top: 96px;
    left: max(-180px, -11vw);
    background:
        radial-gradient(circle at 36% 38%, rgba(255, 255, 255, 0.88) 0, rgba(255, 255, 255, 0.56) 24%, rgba(223, 240, 226, 0.36) 46%, rgba(255, 255, 255, 0) 74%),
        radial-gradient(circle at 62% 64%, rgba(250, 231, 188, 0.16) 0, rgba(255, 255, 255, 0) 46%);
    filter: blur(8px);
    opacity: 0.82;
}

.section-story::after {
    width: 540px;
    height: 540px;
    right: max(-180px, -11vw);
    bottom: -28px;
    background:
        radial-gradient(circle at 44% 44%, rgba(226, 237, 214, 0.62) 0, rgba(226, 237, 214, 0.24) 32%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle at 68% 34%, rgba(224, 216, 247, 0.36) 0, rgba(255, 255, 255, 0) 40%);
    filter: blur(10px);
    opacity: 0.78;
}

.section-story .section-title {
    font-family: var(--font-cloud);
    font-size: clamp(2.9rem, 4.6vw, 4.4rem);
    letter-spacing: -0.04em;
    margin-bottom: 16px;
    text-shadow:
        0 12px 32px rgba(255, 255, 255, 0.62),
        0 3px 0 rgba(255, 255, 255, 0.72);
}

.section-story .section-title.section-title-image {
    position: absolute;
    top: clamp(212px, calc(11vh + 120px), 252px);
    right: clamp(22px, 5vw, 68px);
    z-index: 5;
    margin: 0;
    transform: rotate(15deg);
    transform-origin: top right;
    pointer-events: none;
}

.story-atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.story-deco,
.story-ring {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.story-deco {
    opacity: 0.22;
    mix-blend-mode: screen;
    filter: drop-shadow(0 18px 36px rgba(255, 255, 255, 0.22));
}

.story-deco-stardust {
    top: 18%;
    left: clamp(8px, 2vw, 26px);
    width: clamp(84px, 10vw, 138px);
    transform: rotate(-18deg);
    animation: floatGentle 12s ease-in-out infinite;
}

.story-deco-planet {
    right: clamp(24px, 3vw, 56px);
    bottom: 16%;
    width: clamp(102px, 11vw, 154px);
    opacity: 0.18;
    transform: rotate(12deg);
    animation: floatGentle 14s ease-in-out infinite reverse;
}

.story-deco-cloud {
    top: 8%;
    right: clamp(140px, 16vw, 240px);
    width: clamp(126px, 14vw, 194px);
    opacity: 0.16;
    animation: floatGentle 16s ease-in-out infinite;
}

.story-deco-planets {
    left: clamp(24px, 3vw, 52px);
    bottom: 12%;
    width: clamp(150px, 17vw, 244px);
    opacity: 0.16;
    transform: rotate(-10deg);
    animation: floatGentle 15s ease-in-out infinite reverse;
}

.story-deco-ufo {
    top: 16%;
    right: clamp(34px, 5vw, 92px);
    width: clamp(88px, 9vw, 138px);
    opacity: 0.15;
    transform: rotate(10deg);
    animation: floatGentle 11s ease-in-out infinite;
}

.story-ring {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 0.38;
}

.story-ring-left {
    top: 22%;
    left: clamp(-28px, -1vw, -12px);
    width: clamp(138px, 14vw, 196px);
    height: clamp(46px, 4.2vw, 66px);
    transform: rotate(-16deg);
    box-shadow: 0 0 24px rgba(222, 239, 209, 0.18);
}

.story-ring-right {
    right: clamp(-18px, -0.8vw, -8px);
    bottom: 22%;
    width: clamp(168px, 17vw, 244px);
    height: clamp(58px, 5.2vw, 82px);
    transform: rotate(14deg);
    box-shadow: 0 0 26px rgba(223, 216, 244, 0.18);
}

.story-title-switch {
    position: relative;
    display: block;
    width: clamp(220px, 25vw, 390px);
    aspect-ratio: 1341 / 453;
}

.story-title-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    filter:
        drop-shadow(0 14px 30px rgba(255, 255, 255, 0.32))
        drop-shadow(0 10px 24px rgba(180, 198, 164, 0.18));
}

.story-title-image-variant {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 320ms ease;
    will-change: opacity;
}

.story-title-image-1 {
    opacity: 1;
}

.section-story[data-story-active-index="1"] .story-title-image-1 {
    opacity: 0;
}

.section-story[data-story-active-index="1"] .story-title-image-2 {
    opacity: 1;
}

.story-chapters {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(34px, 3.8vw, 56px);
    position: relative;
    isolation: isolate;
    z-index: 2;
    contain: layout paint;
}

.story-chapters::before {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 14%;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(201, 220, 185, 0.92), rgba(231, 214, 176, 0.7), rgba(255, 255, 255, 0));
    box-shadow: 0 0 28px rgba(216, 195, 121, 0.28);
    opacity: 0.72;
}

.story-chapters::after {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    top: 16%;
    bottom: 10%;
    border-radius: 999px;
    background:
        radial-gradient(circle at 24% 44%, rgba(220, 239, 214, 0.44) 0, rgba(255, 255, 255, 0) 40%),
        radial-gradient(circle at 76% 44%, rgba(225, 219, 247, 0.42) 0, rgba(255, 255, 255, 0) 40%),
        radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.78) 0, rgba(255, 255, 255, 0) 56%);
    filter: blur(18px);
    opacity: 0.62;
    pointer-events: none;
    z-index: -1;
    will-change: transform;
    transform: translateZ(0);
}

.chapter {
    position: relative;
    z-index: 1;
    contain: layout paint;
}

.chapter::before {
    content: '';
    position: absolute;
    top: 34px;
    right: -28px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.98), rgba(235, 212, 126, 0.94) 58%, rgba(224, 188, 90, 0.12) 76%, rgba(255, 255, 255, 0) 77%);
    box-shadow:
        0 0 16px rgba(235, 212, 126, 0.52),
        0 0 30px rgba(255, 255, 255, 0.42);
}

.chapter:nth-child(even)::before {
    left: -28px;
    right: auto;
    background: radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.98), rgba(200, 192, 255, 0.92) 56%, rgba(173, 163, 231, 0.16) 76%, rgba(255, 255, 255, 0) 77%);
    box-shadow:
        0 0 16px rgba(200, 192, 255, 0.5),
        0 0 28px rgba(255, 255, 255, 0.36);
}

.chapter-card {
    --chapter-accent: rgba(220, 239, 205, 0.56);
    --chapter-shadow: rgba(120, 156, 105, 0.12);
    --chapter-shadow-soft: rgba(170, 195, 149, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    min-height: 100%;
    padding: 34px 34px 30px;
    background:
        linear-gradient(152deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 242, 0.92) 36%, rgba(237, 247, 236, 0.82) 64%, rgba(233, 243, 232, 0.7) 100%),
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 18%),
        radial-gradient(circle at 84% 80%, var(--chapter-accent) 0 16%, rgba(255, 255, 255, 0) 32%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 86px 138px 92px 148px / 82px 88px 132px 118px;
    box-shadow:
        0 24px 44px var(--chapter-shadow),
        0 12px 24px var(--chapter-shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -16px 24px rgba(215, 234, 205, 0.1);
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
    overflow: visible;
    isolation: isolate;
    contain: layout paint;
}

.chapter-card > * {
    position: relative;
    z-index: 1;
}

.chapter-card > .chapter-satellite {
    position: absolute;
    z-index: 0;
}

.chapter-card::before,
.chapter-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.chapter-card::before {
    inset: 2px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0) 56%),
        radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.94) 0 7%, rgba(255, 255, 255, 0) 22%),
        linear-gradient(125deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.12) 72%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.92;
}

.chapter-card::after {
    width: 172px;
    height: 172px;
    top: -38px;
    right: 24px;
    border-radius: 42% 58% 62% 38% / 48% 40% 60% 52%;
    background: radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.92) 0, var(--chapter-accent) 48%, rgba(255, 255, 255, 0) 74%);
    opacity: 0.72;
}

.chapter:nth-child(even) .chapter-card {
    --chapter-accent: rgba(221, 214, 247, 0.6);
    --chapter-shadow: rgba(128, 138, 188, 0.12);
    --chapter-shadow-soft: rgba(180, 175, 222, 0.08);
    background:
        linear-gradient(152deg, rgba(255, 255, 255, 0.98), rgba(244, 245, 255, 0.92) 34%, rgba(238, 239, 253, 0.82) 62%, rgba(235, 237, 250, 0.72) 100%),
        radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 18%),
        radial-gradient(circle at 16% 82%, var(--chapter-accent) 0 16%, rgba(255, 255, 255, 0) 32%);
    border-radius: 148px 84px 138px 92px / 112px 78px 98px 144px;
    box-shadow:
        0 24px 44px var(--chapter-shadow),
        0 12px 24px var(--chapter-shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -16px 24px rgba(220, 221, 245, 0.1);
}

.chapter:nth-child(even) .chapter-card::after {
    right: auto;
    left: 24px;
    border-radius: 58% 42% 38% 62% / 42% 52% 48% 58%;
}

.chapter-satellite {
    border: 1px solid rgba(255, 255, 255, 0.76);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 250, 238, 0.78)),
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.92) 0 9%, rgba(255, 255, 255, 0) 22%);
    box-shadow:
        0 14px 28px rgba(176, 198, 161, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.chapter-satellite-top {
    top: -18px;
    left: 42px;
    width: 132px;
    height: 56px;
    border-radius: 999px 999px 42px 999px;
    transform: rotate(-7deg);
}

.chapter-satellite-bottom {
    right: 54px;
    bottom: -20px;
    width: 172px;
    height: 66px;
    border-radius: 999px 54px 999px 999px;
    transform: rotate(6deg);
}

.chapter:nth-child(even) .chapter-satellite {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 242, 255, 0.8)),
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.92) 0 9%, rgba(255, 255, 255, 0) 22%);
    box-shadow:
        0 14px 28px rgba(185, 181, 221, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.chapter:nth-child(even) .chapter-satellite-top {
    left: auto;
    right: 42px;
    border-radius: 999px 999px 999px 42px;
    transform: rotate(7deg);
}

.chapter:nth-child(even) .chapter-satellite-bottom {
    left: 52px;
    right: auto;
    border-radius: 54px 999px 999px 999px;
    transform: rotate(-6deg);
}

.chapter-card:hover {
    box-shadow:
        0 28px 52px rgba(115, 152, 102, 0.16),
        0 14px 28px rgba(186, 209, 168, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.98);
}

.chapter:nth-child(odd) .chapter-card:hover {
    transform: translateY(-4px);
}

.chapter:nth-child(even) .chapter-card:hover {
    transform: translateY(-4px);
}

.chapter-card.reverse {
    flex-direction: column;
}

.chapter-image-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: clamp(280px, 30vw, 340px);
    border-radius: 40px 68px 48px 82px / 34px 42px 72px 78px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.08)),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.84) 0 7%, rgba(255, 255, 255, 0) 18%);
    box-shadow:
        0 18px 34px rgba(112, 148, 97, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transform: rotate(-3.5deg);
    transition: transform 0.55s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.chapter:nth-child(even) .chapter-image-wrap {
    border-radius: 72px 42px 78px 50px / 44px 34px 82px 58px;
    transform: rotate(3.5deg);
    box-shadow:
        0 18px 34px rgba(126, 132, 190, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.chapter-image-wrap::before,
.chapter-image-wrap::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.chapter-image-wrap::before {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.14) 74%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.92) 0 8%, rgba(255, 255, 255, 0) 18%);
}

.chapter-image-wrap::after {
    left: 12%;
    right: 12%;
    bottom: -34px;
    height: 94px;
    background: radial-gradient(circle at 50% 0, rgba(240, 249, 236, 0.98) 0, rgba(240, 249, 236, 0) 72%);
}

.chapter-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.65s ease, filter 0.45s ease;
    filter: saturate(1.06) contrast(1.03) brightness(1.01);
}

.chapter-card:hover .chapter-image-wrap {
    transform: rotate(0deg) translateY(-1px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.96);
}

.chapter-card:hover .chapter-img {
    transform: scale(1.04) translateY(-2px);
    filter: saturate(1.09) contrast(1.04) brightness(1.02);
}

.chapter-number {
    position: absolute;
    top: 16px;
    left: 16px;
    min-width: 48px;
    padding: 10px 15px;
    border-radius: 999px 999px 999px 20px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 236, 0.88)),
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9) 0 10%, rgba(255, 255, 255, 0) 24%);
    color: #5a7c46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.18em;
    box-shadow:
        0 10px 20px rgba(117, 149, 102, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    z-index: 2;
}

.chapter:nth-child(even) .chapter-number {
    color: #7169aa;
    border-radius: 20px 999px 999px 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 239, 255, 0.9)),
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9) 0 10%, rgba(255, 255, 255, 0) 24%);
    box-shadow:
        0 10px 20px rgba(129, 128, 189, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.chapter-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.chapter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chapter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 249, 236, 0.72)),
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.92) 0 8%, rgba(255, 255, 255, 0) 20%);
    box-shadow:
        0 8px 18px rgba(166, 192, 147, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    color: #65894b;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chapter:nth-child(even) .chapter-chip {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 241, 255, 0.76)),
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.92) 0 8%, rgba(255, 255, 255, 0) 20%);
    box-shadow:
        0 8px 18px rgba(186, 181, 221, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    color: #7770b2;
}

.chapter-title {
    font-family: var(--font-cloud);
    font-size: clamp(2.05rem, 3vw, 2.7rem);
    font-weight: 700;
    color: #4f8136;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    display: inline-block;
    background-image: linear-gradient(180deg, #6aa24c 0%, #4e8436 58%, #7aa356 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 26px rgba(255, 255, 255, 0.46);
}

.chapter:nth-child(even) .chapter-title {
    color: #6d67a5;
    background-image: linear-gradient(180deg, #8b83d0 0%, #6e67aa 58%, #a195df 100%);
}

.chapter-text p {
    max-width: 34ch;
    font-size: 1.05rem;
    line-height: 1.76;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px 34px 26px 38px / 20px 28px 34px 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.62) 0 7%, rgba(255, 255, 255, 0) 18%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 18px rgba(183, 205, 167, 0.08);
    color: #56635e;
    text-wrap: pretty;
}

.chapter:nth-child(even) .chapter-text p {
    border-radius: 34px 24px 38px 26px / 28px 20px 24px 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(250, 248, 255, 0.26)),
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.62) 0 7%, rgba(255, 255, 255, 0) 18%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 18px rgba(193, 188, 223, 0.08);
}

.chapter-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.96rem;
    line-height: 1.4;
    color: #6b7f70;
}

.chapter-note::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(232, 203, 111, 0.92) 60%, rgba(232, 203, 111, 0) 78%);
    box-shadow: 0 0 14px rgba(232, 203, 111, 0.34);
}

.chapter:nth-child(even) .chapter-note::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(191, 183, 255, 0.92) 60%, rgba(191, 183, 255, 0) 78%);
    box-shadow: 0 0 14px rgba(191, 183, 255, 0.34);
}

.chapter-text em {
    color: var(--green-accent);
    font-style: italic;
}

.section-story .section-title.section-title-image {
    position: absolute;
    top: clamp(212px, calc(11vh + 120px), 252px);
    right: clamp(22px, 5vw, 68px);
    z-index: 5;
    margin: 0;
    transform: rotate(15deg);
    transform-origin: top right;
    pointer-events: none;
}

.story-showcase {
    position: relative;
    z-index: 4;
    width: min(100%, 1260px);
    margin: 0 auto;
    padding: clamp(22px, 2.2vw, 34px) clamp(30px, 2.6vw, 38px) clamp(22px, 2.2vw, 32px);
    padding-right: clamp(156px, 14vw, 214px);
    border-radius: 46px 78px 54px 86px / 42px 56px 74px 62px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(251, 253, 250, 0.86) 18%, rgba(241, 248, 242, 0.74) 42%, rgba(240, 238, 252, 0.72) 72%, rgba(233, 241, 245, 0.78) 100%),
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 88% 18%, rgba(247, 232, 189, 0.22) 0 10%, rgba(255, 255, 255, 0) 28%),
        radial-gradient(circle at 80% 84%, rgba(226, 219, 247, 0.26) 0 14%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(112deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 52%, rgba(255, 255, 255, 0) 74%);
    box-shadow:
        0 34px 78px rgba(131, 163, 120, 0.18),
        0 16px 32px rgba(193, 188, 223, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -24px 36px rgba(218, 232, 211, 0.14);
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s ease;
}

.story-showcase::before,
.story-showcase::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.story-showcase::before {
    inset: -12% auto auto -12%;
    width: clamp(220px, 24vw, 360px);
    height: clamp(220px, 24vw, 360px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 42%, rgba(224, 240, 216, 0.82) 0, rgba(224, 240, 216, 0.24) 46%, rgba(255, 255, 255, 0) 76%),
        radial-gradient(circle at 62% 32%, rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0) 30%);
    filter: blur(4px);
    animation: storyAuroraPulse 18s ease-in-out infinite;
}

.story-showcase::after {
    top: auto;
    right: -8%;
    bottom: -16%;
    width: clamp(240px, 26vw, 380px);
    height: clamp(240px, 26vw, 380px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 40%, rgba(228, 220, 250, 0.8) 0, rgba(228, 220, 250, 0.24) 46%, rgba(255, 255, 255, 0) 76%),
        radial-gradient(circle at 56% 28%, rgba(249, 233, 196, 0.2) 0, rgba(255, 255, 255, 0) 26%);
    filter: blur(8px);
    animation: storyAuroraPulse 20s ease-in-out infinite reverse;
}

.story-showcase-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.story-showcase-decor::before,
.story-showcase-decor::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.story-showcase-decor::before {
    inset: 14px 16px;
    border-radius: 36px 64px 44px 72px / 34px 44px 60px 50px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    opacity: 0.8;
}

.story-showcase-decor::after {
    top: -28%;
    right: 12%;
    width: 34%;
    height: 154%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    filter: blur(10px);
    opacity: 0.42;
    transform: rotate(18deg) translateZ(0);
    will-change: transform;
    animation: storySheenDrift 15s ease-in-out infinite;
}

.story-showcase-planet,
.story-showcase-ufo,
.story-showcase-stardust,
.story-showcase-orbit {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.story-showcase-planet,
.story-showcase-ufo,
.story-showcase-stardust {
    opacity: 0.2;
}

.story-showcase-planet-left {
    left: clamp(-22px, -1vw, -8px);
    bottom: 4%;
    width: clamp(136px, 15vw, 228px);
    transform: rotate(-12deg);
    animation: floatGentle 16s ease-in-out infinite;
}

.story-showcase-planet-right {
    top: 8%;
    right: clamp(92px, 10vw, 152px);
    width: clamp(102px, 10vw, 152px);
    height: auto;
    aspect-ratio: 305 / 193;
    object-fit: contain;
    opacity: 0.16;
    transform: rotate(16deg);
    animation: floatGentle 14s ease-in-out infinite reverse;
}

.story-showcase-ufo {
    right: clamp(24px, 3vw, 48px);
    top: 18%;
    width: clamp(84px, 8vw, 126px);
    opacity: 0.15;
    animation: floatGentle 12s ease-in-out infinite;
}

.story-showcase-stardust {
    left: clamp(32px, 3vw, 56px);
    top: 14%;
    width: clamp(94px, 10vw, 144px);
    opacity: 0.18;
    transform: rotate(-16deg);
    animation: floatGentle 18s ease-in-out infinite reverse;
}

.story-showcase-orbit {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    opacity: 0.42;
}

.story-showcase-orbit-a {
    left: clamp(-32px, -1vw, -12px);
    top: 24%;
    width: clamp(164px, 16vw, 242px);
    height: clamp(56px, 5vw, 84px);
    transform: rotate(-12deg);
}

.story-showcase-orbit-b {
    right: clamp(28px, 3vw, 52px);
    bottom: 16%;
    width: clamp(154px, 15vw, 228px);
    height: clamp(52px, 4.6vw, 74px);
    transform: rotate(14deg);
}

.story-progress {
    position: absolute;
    top: 50%;
    right: clamp(18px, 1.8vw, 26px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 12px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.58) 0, rgba(255, 255, 255, 0) 52%);
    box-shadow:
        0 18px 34px rgba(166, 184, 154, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -10px 24px rgba(255, 255, 255, 0.12);
    z-index: 4;
}

.story-progress::before {
    content: '';
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 50%;
    width: 1px;
    background: var(--story-progress-divider);
    opacity: 0.46;
    transform: translateX(-50%);
}

.story-progress-step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px 8px 9px;
    border-radius: 24px;
    border: 1px solid var(--story-progress-step-border);
    background: var(--story-progress-step-bg);
    box-shadow: var(--story-progress-step-shadow);
    color: var(--story-progress-step-color);
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}

.story-progress-step::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -34%;
    width: 52%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0));
    opacity: 0;
    transform: skewX(-24deg);
    transition: opacity 0.24s ease, transform 0.5s ease;
}

.story-progress-step:focus-visible {
    outline: 2px solid var(--story-progress-focus);
    outline-offset: 3px;
}

.story-progress-step.is-active {
    background: var(--story-progress-step-active-bg);
    border-color: var(--story-progress-step-active-border);
    box-shadow: var(--story-progress-step-active-shadow);
}

.story-progress-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--story-progress-index-bg);
    color: var(--story-progress-index-color);
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: var(--story-progress-index-shadow);
    transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}

.story-progress-step.is-active .story-progress-index {
    background: var(--story-progress-index-active-bg);
    color: var(--story-progress-index-active-color);
    box-shadow: var(--story-progress-index-active-shadow);
}

.story-progress-copy {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--story-progress-copy-color);
}

.story-scroll {
    position: relative;
    z-index: 2;
    block-size: min(68vh, 640px);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.story-scroll::-webkit-scrollbar {
    display: none;
}

.story-scene {
    position: relative;
    min-block-size: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(28px, 3.2vw, 56px);
    padding: clamp(10px, 1vw, 18px) 0;
    scroll-snap-align: start;
}

.story-scene-art {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(26px, 3vw, 42px) clamp(16px, 2vw, 28px);
}

.story-scene-frame {
    position: relative;
    width: min(100%, 440px);
    aspect-ratio: 0.88;
    border-radius: 62px 146px 76px 158px / 84px 62px 142px 116px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.96);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.1) 34%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(135deg, rgba(243, 248, 238, 0.2), rgba(255, 255, 255, 0) 36%, rgba(233, 224, 187, 0.24) 100%);
    box-shadow:
        0 22px 34px rgba(122, 158, 104, 0.11),
        0 12px 24px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 0 0 8px rgba(255, 255, 255, 0.08);
    transform: rotate(-5deg) translateZ(0);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-scene-2 .story-scene-frame {
    border-radius: 156px 82px 144px 94px / 118px 68px 92px 148px;
    box-shadow:
        0 22px 34px rgba(136, 138, 198, 0.11),
        0 12px 24px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 0 0 8px rgba(245, 243, 255, 0.08);
    transform: rotate(5deg) translateZ(0);
}

.story-scene-frame::before,
.story-scene-frame::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.story-scene-frame::before {
    inset: 11px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.46);
    background:
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.32) 0 5%, rgba(255, 255, 255, 0) 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 32%);
    box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.story-scene-frame::after {
    top: 24px;
    right: -18px;
    width: 124px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 239, 0.82) 46%, rgba(233, 224, 187, 0.62)),
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.92) 0 12%, rgba(255, 255, 255, 0) 30%);
    box-shadow:
        0 10px 22px rgba(177, 193, 154, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    transform: rotate(28deg);
}

.story-scene-2 .story-scene-frame::before {
    border-color: rgba(242, 239, 255, 0.52);
    box-shadow:
        inset 0 0 0 5px rgba(246, 244, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.story-scene-2 .story-scene-frame::after {
    top: auto;
    right: auto;
    left: -18px;
    bottom: 30px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 242, 255, 0.84) 46%, rgba(205, 197, 244, 0.64)),
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.92) 0 12%, rgba(255, 255, 255, 0) 30%);
    box-shadow:
        0 8px 18px rgba(178, 173, 215, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    transform: rotate(-28deg);
}

.story-scene-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.045) translateZ(0);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-scene-aura,
.story-scene-orbit {
    position: absolute;
    pointer-events: none;
}

.story-scene-aura {
    width: clamp(180px, 22vw, 320px);
    height: clamp(180px, 22vw, 320px);
    border-radius: 50%;
    z-index: 0;
    display: block;
    opacity: 0.88;
    filter: blur(10px);
    will-change: transform;
    animation: storyAuroraPulse 16s ease-in-out infinite;
}

.story-scene-aura-1 {
    left: 4%;
    top: 8%;
    background: radial-gradient(circle, rgba(225, 240, 215, 0.72) 0, rgba(225, 240, 215, 0.16) 46%, rgba(255, 255, 255, 0) 74%);
}

.story-scene-aura-2 {
    right: 4%;
    top: 12%;
    background: radial-gradient(circle, rgba(226, 219, 247, 0.72) 0, rgba(226, 219, 247, 0.16) 46%, rgba(255, 255, 255, 0) 74%);
}

.story-scene-orbit {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.44);
    opacity: 0.48;
    z-index: 0;
}

.story-scene-orbit-1 {
    right: 0;
    bottom: 12%;
    width: clamp(120px, 14vw, 204px);
    height: clamp(42px, 4.2vw, 70px);
    transform: rotate(-14deg);
}

.story-scene-orbit-2 {
    left: 6%;
    bottom: 10%;
    width: clamp(130px, 15vw, 214px);
    height: clamp(46px, 4.4vw, 72px);
    transform: rotate(16deg);
}

.story-scene-badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(243, 250, 239, 0.76)),
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 24%);
    box-shadow:
        0 12px 24px rgba(176, 199, 158, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    color: #637561;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.story-scene-badge-1 {
    left: clamp(4px, 1vw, 12px);
    bottom: 4%;
}

.story-scene-badge-2 {
    right: clamp(4px, 1vw, 12px);
    bottom: 4%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(244, 241, 255, 0.76)),
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 24%);
    box-shadow:
        0 12px 24px rgba(185, 182, 222, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    color: #746da9;
}

.story-scene-copy {
    display: flex;
    align-items: center;
    min-height: 100%;
}

.story-scene-copy-shell {
    position: relative;
    width: 100%;
    padding: clamp(32px, 3vw, 44px);
    border-radius: 52px 96px 60px 116px / 58px 62px 108px 88px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 245, 0.88) 38%, rgba(239, 247, 241, 0.76) 100%),
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.94) 0 8%, rgba(255, 255, 255, 0) 20%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.16) 68%, rgba(255, 255, 255, 0) 92%);
    box-shadow:
        0 26px 46px rgba(137, 168, 125, 0.16),
        0 10px 18px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    overflow: hidden;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-scene-copy-shell::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 34%);
    pointer-events: none;
    opacity: 0.82;
}

.story-scene-copy-shell::after {
    content: '';
    position: absolute;
    top: -38px;
    right: -12px;
    width: 164px;
    height: 164px;
    border-radius: 44% 56% 62% 38% / 42% 44% 56% 58%;
    background: radial-gradient(circle at 38% 34%, rgba(221, 239, 214, 0.56) 0, rgba(221, 239, 214, 0.16) 46%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.story-scene-2 .story-scene-copy-shell {
    border-radius: 112px 58px 100px 68px / 92px 58px 70px 108px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(248, 247, 255, 0.88) 38%, rgba(242, 241, 253, 0.78) 100%),
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.94) 0 8%, rgba(255, 255, 255, 0) 20%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.16) 68%, rgba(255, 255, 255, 0) 92%);
    box-shadow:
        0 26px 46px rgba(152, 150, 198, 0.16),
        0 10px 18px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.story-scene-2 .story-scene-copy-shell::before {
    border-color: rgba(244, 241, 255, 0.36);
}

.story-scene-2 .story-scene-copy-shell::after {
    right: auto;
    left: -12px;
    background: radial-gradient(circle at 38% 34%, rgba(226, 219, 247, 0.58) 0, rgba(226, 219, 247, 0.16) 46%, rgba(255, 255, 255, 0) 72%);
}

.story-scene-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 236, 0.84)),
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 24%);
    box-shadow:
        0 10px 20px rgba(170, 192, 152, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    color: #5d8a43;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.story-scene-2 .story-scene-kicker {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 242, 255, 0.84)),
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.96) 0 10%, rgba(255, 255, 255, 0) 24%);
    box-shadow:
        0 10px 20px rgba(185, 181, 222, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    color: #7770b2;
}

.story-scene-title {
    margin: 20px 0 18px;
    font-family: var(--font-cloud);
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: #507f38;
    background-image: linear-gradient(180deg, #71ab4f 0%, #4f8538 60%, #8ab665 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 14px 30px rgba(255, 255, 255, 0.52),
        0 3px 0 rgba(255, 255, 255, 0.28);
}

.story-scene-2 .story-scene-title {
    color: #746daa;
    background-image: linear-gradient(180deg, #948ce0 0%, #736cac 60%, #aaa0ea 100%);
}

.story-scene-text {
    margin: 0;
    font-size: clamp(1.04rem, 1.12vw, 1.18rem);
    line-height: 1.84;
    color: #4f5e57;
    text-wrap: pretty;
}

.story-scene-note {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 24px 30px 26px 34px / 22px 28px 30px 24px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.24)),
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.72) 0 8%, rgba(255, 255, 255, 0) 18%),
        linear-gradient(110deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.14) 84%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 18px rgba(183, 205, 167, 0.1);
    color: #67766e;
    font-size: 0.98rem;
    line-height: 1.45;
    transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.story-scene-note::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(232, 203, 111, 0.92) 60%, rgba(232, 203, 111, 0) 78%);
    box-shadow: 0 0 14px rgba(232, 203, 111, 0.34);
}

.story-scene-2 .story-scene-note::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(191, 183, 255, 0.92) 60%, rgba(191, 183, 255, 0) 78%);
    box-shadow: 0 0 14px rgba(191, 183, 255, 0.34);
}

@media (hover: hover) and (pointer: fine) {
    .story-showcase:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.98);
        box-shadow:
            0 38px 84px rgba(131, 163, 120, 0.2),
            0 18px 36px rgba(193, 188, 223, 0.14),
            0 0 0 1px rgba(255, 255, 255, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.98),
            inset 0 -24px 36px rgba(218, 232, 211, 0.16);
    }

    .story-progress-step:hover,
    .story-progress-step:focus-visible {
        transform: translateX(-4px);
        border-color: rgba(255, 255, 255, 0.98);
        box-shadow:
            0 18px 30px rgba(170, 192, 152, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
    }

    .story-progress-step:hover::after,
    .story-progress-step:focus-visible::after,
    .story-progress-step.is-active::after {
        opacity: 0.75;
        transform: translateX(160%) skewX(-24deg);
    }

    .story-scene:hover .story-scene-frame {
        transform: rotate(-3deg) translateY(-8px) scale(1.01);
        box-shadow:
            0 28px 42px rgba(122, 158, 104, 0.14),
            0 14px 28px rgba(255, 255, 255, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.96),
            inset 0 0 0 8px rgba(255, 255, 255, 0.1);
    }

    .story-scene-2:hover .story-scene-frame {
        transform: rotate(3deg) translateY(-8px) scale(1.01);
        box-shadow:
            0 28px 42px rgba(136, 138, 198, 0.14),
            0 14px 28px rgba(255, 255, 255, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.96),
            inset 0 0 0 8px rgba(245, 243, 255, 0.1);
    }

    .story-scene:hover .story-scene-copy-shell {
        transform: translateY(-6px);
        box-shadow:
            0 30px 50px rgba(137, 168, 125, 0.18),
            0 12px 24px rgba(255, 255, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .story-scene-2:hover .story-scene-copy-shell {
        box-shadow:
            0 30px 50px rgba(152, 150, 198, 0.18),
            0 12px 24px rgba(255, 255, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .story-scene:hover .story-scene-image {
        transform: scale(1.08);
        filter: saturate(1.12) contrast(1.05) brightness(1.04);
    }

    .story-scene:hover .story-scene-note {
        transform: translateX(4px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.92),
            0 12px 22px rgba(183, 205, 167, 0.12);
    }
}

body.performance-lite .story-showcase,
body.performance-lite .story-scene-frame,
body.performance-lite .story-scene-copy-shell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 18px 34px rgba(136, 166, 125, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body.performance-lite .story-progress {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 14px 28px rgba(136, 166, 125, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

body.performance-lite .story-showcase-planet,
body.performance-lite .story-showcase-ufo,
body.performance-lite .story-showcase-stardust,
body.performance-lite .story-showcase-orbit,
body.performance-lite .story-scene-aura {
    animation: none !important;
    filter: none !important;
}

body.performance-lite .story-showcase::before,
body.performance-lite .story-showcase::after,
body.performance-lite .story-showcase-decor::after {
    animation: none !important;
    filter: none !important;
}

body.performance-lite .story-showcase,
body.performance-lite .story-progress-step,
body.performance-lite .story-scene-frame,
body.performance-lite .story-scene-copy-shell,
body.performance-lite .story-scene-image,
body.performance-lite .story-scene-note {
    transition: none !important;
}

@media (max-width: 980px) {
    .story-showcase {
        padding: clamp(18px, 3vw, 24px);
        padding-right: clamp(18px, 3vw, 24px);
        border-radius: 32px 42px 36px 48px / 30px 36px 44px 38px;
    }

    .story-progress {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        margin: 0 auto 16px;
        padding: 10px 12px;
        border-radius: 999px;
    }

    .story-progress::before {
        display: none;
    }

    .story-progress-copy {
        display: none;
    }

    .story-scroll {
        block-size: min(74vh, 760px);
    }

    .story-scene {
        grid-template-columns: 1fr;
        align-content: start;
        gap: 18px;
        padding: 8px 0 12px;
    }

    .story-scene-art {
        min-height: auto;
        padding: 10px 8px 0;
    }

    .story-scene-frame {
        width: min(100%, 304px);
        aspect-ratio: 0.9;
    }

    .story-scene-copy-shell {
        padding: 24px 20px;
        border-radius: 34px 56px 40px 64px / 36px 44px 56px 50px;
    }

    .story-scene-2 .story-scene-copy-shell {
        border-radius: 60px 34px 54px 40px / 50px 30px 34px 60px;
    }

    .story-scene-title {
        margin: 14px 0 12px;
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .story-scene-text {
        font-size: 0.98rem;
        line-height: 1.68;
    }

    .story-scene-note {
        margin-top: 16px;
        padding: 11px 14px;
        font-size: 0.86rem;
    }

    .story-scene-badge {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 0.68rem;
    }

    .story-showcase-ufo,
    .story-showcase-orbit-b {
        display: none;
    }
}

@media (max-width: 620px) {
    .section-story .section-title.section-title-image {
        top: 142px;
        right: 10px;
    }

    .story-showcase {
        padding: 16px 14px 18px;
        border-radius: 24px 32px 28px 36px / 24px 28px 36px 32px;
    }

    .story-scroll {
        block-size: auto;
        max-height: none;
        overflow: visible;
        scroll-snap-type: none;
    }

    .story-scene {
        min-block-size: auto;
        padding: 0;
    }

    .story-scene + .story-scene {
        margin-top: 18px;
    }

    .story-progress {
        width: fit-content;
        max-width: 100%;
        gap: 8px;
        margin-bottom: 12px;
        padding: 7px;
    }

    .story-progress-step {
        min-height: 38px;
        padding: 6px 10px;
        border-radius: 18px;
    }

    .story-progress-index {
        width: 26px;
        height: 26px;
        font-size: 0.74rem;
    }

    .story-scene-badge,
    .story-showcase-stardust,
    .story-showcase-orbit-a {
        display: none;
    }

    .story-showcase-planet-left {
        width: 118px;
        bottom: 6%;
        opacity: 0.12;
    }

    .story-showcase-planet-right {
        width: 94px;
        height: auto;
        top: 10%;
        right: 10px;
        opacity: 0.12;
    }

    .story-title-switch {
        width: min(46vw, 176px);
    }
}

/* Story plaque refresh */
.story-showcase {
    width: min(100%, 1288px);
    padding: clamp(28px, 2.8vw, 40px);
    padding-right: clamp(164px, 15vw, 228px);
    border-radius: 58px 74px 68px 96px / 52px 64px 88px 74px;
    border: 1px solid rgba(255, 255, 255, 0.84);
    background:
        radial-gradient(circle at 12% 18%, rgba(205, 236, 194, 0.58) 0 14%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 86% 18%, rgba(252, 237, 191, 0.36) 0 11%, rgba(255, 255, 255, 0) 28%),
        radial-gradient(circle at 82% 84%, rgba(219, 212, 255, 0.46) 0 16%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(134deg, rgba(252, 255, 251, 0.97) 0%, rgba(243, 248, 241, 0.92) 30%, rgba(236, 244, 247, 0.84) 62%, rgba(241, 238, 252, 0.9) 100%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(255, 255, 255, 0) 1px 28px);
    box-shadow:
        0 44px 98px rgba(141, 173, 131, 0.2),
        0 18px 38px rgba(196, 188, 229, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -28px 44px rgba(210, 229, 210, 0.18);
    backdrop-filter: blur(24px) saturate(1.12);
    -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.story-showcase::before {
    inset: -16% auto auto -8%;
    width: clamp(300px, 32vw, 480px);
    height: clamp(300px, 32vw, 480px);
    background:
        radial-gradient(circle at 46% 44%, rgba(214, 243, 203, 0.92) 0, rgba(214, 243, 203, 0.28) 42%, rgba(255, 255, 255, 0) 74%),
        radial-gradient(circle at 68% 30%, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 28%);
    filter: blur(18px);
    opacity: 0.92;
}

.story-showcase::after {
    right: -10%;
    bottom: -18%;
    width: clamp(320px, 34vw, 500px);
    height: clamp(320px, 34vw, 500px);
    background:
        radial-gradient(circle at 42% 40%, rgba(225, 215, 255, 0.88) 0, rgba(225, 215, 255, 0.24) 42%, rgba(255, 255, 255, 0) 74%),
        radial-gradient(circle at 62% 26%, rgba(252, 236, 190, 0.28) 0, rgba(255, 255, 255, 0) 24%);
    filter: blur(22px);
    opacity: 0.88;
}

.story-showcase-decor::before {
    inset: 18px;
    border-radius: 46px 64px 58px 84px / 40px 52px 74px 60px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.24) 0 4%, rgba(255, 255, 255, 0) 14%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    opacity: 0.92;
}

.story-showcase-decor::after {
    top: -34%;
    right: -4%;
    width: 56%;
    height: 170%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0) 100%);
    filter: blur(20px);
    opacity: 0.56;
}

.story-progress {
    right: clamp(20px, 2vw, 30px);
    gap: 14px;
    padding: 18px 14px;
    border-radius: 34px;
    border-color: rgba(255, 255, 255, 0.86);
    background:
        linear-gradient(152deg, rgba(255, 255, 255, 0.78), rgba(242, 248, 241, 0.46)),
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.78) 0 12%, rgba(255, 255, 255, 0) 34%);
    box-shadow:
        0 24px 40px rgba(161, 180, 151, 0.18),
        0 10px 18px rgba(255, 255, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -10px 22px rgba(255, 255, 255, 0.12);
}

.story-progress::before {
    width: 2px;
    opacity: 0.54;
}

.story-progress-step {
    min-height: 56px;
    padding: 9px 16px 9px 10px;
    border-radius: 999px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 242, 0.82)),
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.98) 0 12%, rgba(255, 255, 255, 0) 28%);
    box-shadow:
        0 16px 26px rgba(170, 192, 152, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    color: #5b6b61;
}

.story-progress-step.is-active {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(236, 248, 230, 0.92)),
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.98) 0 12%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(90deg, rgba(214, 236, 196, 0.2), rgba(255, 255, 255, 0) 60%);
    box-shadow:
        0 20px 32px rgba(160, 189, 144, 0.22),
        0 0 28px rgba(255, 255, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.story-progress-index {
    width: 36px;
    height: 36px;
    box-shadow:
        0 10px 20px rgba(173, 199, 157, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.story-progress-copy {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--story-progress-copy-color);
}

.story-scene-frame {
    width: min(100%, 420px);
    border-radius: 42px 60px 50px 70px / 38px 48px 66px 54px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(140deg, rgba(245, 249, 241, 0.26), rgba(255, 255, 255, 0) 46%, rgba(235, 225, 190, 0.24) 100%);
    box-shadow:
        0 28px 44px rgba(122, 158, 104, 0.14),
        0 14px 30px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 0 0 10px rgba(255, 255, 255, 0.08);
    transform: rotate(-2.5deg) translateZ(0);
}

.story-scene-2 .story-scene-frame {
    border-radius: 68px 44px 72px 52px / 58px 36px 46px 74px;
    box-shadow:
        0 28px 44px rgba(136, 138, 198, 0.14),
        0 14px 30px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 0 0 10px rgba(245, 243, 255, 0.08);
    transform: rotate(2.5deg) translateZ(0);
}

.story-scene-copy-shell {
    padding: clamp(34px, 3.2vw, 48px);
    border-radius: 44px 54px 52px 58px / 42px 48px 62px 54px;
    background:
        linear-gradient(154deg, rgba(255, 255, 255, 0.99), rgba(244, 250, 243, 0.92) 36%, rgba(234, 244, 238, 0.82) 100%),
        radial-gradient(circle at 88% 16%, rgba(214, 236, 197, 0.28) 0 12%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(118deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.14) 72%, rgba(255, 255, 255, 0) 100%);
    box-shadow:
        0 34px 56px rgba(131, 164, 118, 0.18),
        0 12px 24px rgba(255, 255, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.story-scene-2 .story-scene-copy-shell {
    border-radius: 54px 44px 58px 50px / 50px 40px 46px 60px;
    background:
        linear-gradient(154deg, rgba(255, 255, 255, 0.99), rgba(247, 245, 255, 0.92) 36%, rgba(239, 238, 252, 0.84) 100%),
        radial-gradient(circle at 12% 18%, rgba(223, 216, 255, 0.28) 0 12%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(118deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.14) 72%, rgba(255, 255, 255, 0) 100%);
    box-shadow:
        0 34px 56px rgba(150, 147, 198, 0.18),
        0 12px 24px rgba(255, 255, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.story-scene-note {
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.42)),
        linear-gradient(90deg, rgba(255, 245, 206, 0.18), rgba(255, 255, 255, 0) 68%);
}

@media (hover: hover) and (pointer: fine) {
    .story-showcase:hover {
        transform: translateY(-6px) scale(1.004);
        box-shadow:
            0 54px 112px rgba(141, 173, 131, 0.24),
            0 22px 44px rgba(196, 188, 229, 0.18),
            0 0 0 1px rgba(255, 255, 255, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.98),
            inset 0 -28px 44px rgba(210, 229, 210, 0.22);
    }

    .story-scene:hover .story-scene-frame {
        transform: rotate(-1deg) translateY(-10px) scale(1.015);
    }

    .story-scene-2:hover .story-scene-frame {
        transform: rotate(1deg) translateY(-10px) scale(1.015);
    }

    .story-scene:hover .story-scene-copy-shell {
        transform: translateY(-8px);
    }
}

body.performance-lite .story-showcase,
body.performance-lite .story-scene-frame,
body.performance-lite .story-scene-copy-shell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.performance-lite .story-progress {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.performance-lite .story-showcase::before,
body.performance-lite .story-showcase::after,
body.performance-lite .story-showcase-decor::after {
    filter: none !important;
}

@media (max-width: 980px) {
    .story-showcase {
        padding: 22px 20px 24px;
        border-radius: 34px 40px 42px 48px / 30px 36px 46px 40px;
    }

    .story-progress {
        padding: 10px 12px;
        border-radius: 999px;
    }

    .story-scene-frame {
        width: min(100%, 312px);
        border-radius: 30px 40px 34px 44px / 28px 34px 40px 36px;
    }

    .story-scene-copy-shell,
    .story-scene-2 .story-scene-copy-shell {
        padding: 24px 22px;
        border-radius: 30px 34px 38px 40px / 28px 32px 40px 34px;
    }
}

@media (max-width: 620px) {
    .story-showcase {
        padding: 18px 14px 20px;
        border-radius: 28px 30px 34px 36px / 24px 26px 34px 30px;
    }

    .story-showcase-decor::before {
        inset: 10px;
        border-radius: 22px 24px 28px 30px / 20px 22px 28px 24px;
    }

    .story-progress {
        padding: 8px;
        border-radius: 22px;
    }

    .story-progress-step {
        min-height: 40px;
        padding: 6px 10px;
    }

    .story-progress-index {
        width: 28px;
        height: 28px;
    }

    .story-scene-frame {
        width: min(100%, 280px);
    }

    .story-scene-copy-shell,
    .story-scene-2 .story-scene-copy-shell {
        padding: 20px 16px;
        border-radius: 26px 28px 30px 32px / 24px 26px 30px 28px;
    }
}

/* Story performance fix */
.section-story .story-showcase {
    contain: layout paint style;
    background:
        linear-gradient(135deg, rgba(252, 255, 251, 0.98), rgba(243, 248, 241, 0.94) 42%, rgba(240, 239, 249, 0.92) 100%);
    box-shadow:
        0 24px 52px rgba(141, 173, 131, 0.12),
        0 10px 22px rgba(196, 188, 229, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.section-story .story-progress,
.section-story .story-progress-step,
.section-story .story-scene-frame,
.section-story .story-scene-copy-shell,
.section-story .story-scene-note {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.section-story .story-showcase,
.section-story .story-progress-step,
.section-story .story-scene-frame,
.section-story .story-scene-copy-shell,
.section-story .story-scene-image,
.section-story .story-scene-note {
    transition: none !important;
}

.section-story .story-showcase::before,
.section-story .story-showcase::after,
.section-story .story-showcase-decor::after,
.section-story .story-scene-aura,
.section-story .story-scene-orbit,
.section-story .story-showcase-ufo,
.section-story .story-showcase-stardust,
.section-story .story-showcase-orbit {
    display: none !important;
}

.section-story .story-showcase-planet {
    animation: none !important;
    filter: none !important;
    opacity: 0.08;
}

.section-story .story-showcase-decor::before {
    inset: 14px;
    opacity: 0.52;
    box-shadow: none;
}

.section-story .story-progress {
    border-color: var(--story-progress-shell-border);
    background: var(--story-progress-shell-bg);
    box-shadow: var(--story-progress-shell-shadow);
}

.section-story .story-progress-step {
    border-color: var(--story-progress-step-border);
    background: var(--story-progress-step-bg);
    box-shadow: var(--story-progress-step-shadow);
    color: var(--story-progress-step-color);
}

.section-story .story-progress-step.is-active {
    border-color: var(--story-progress-step-active-border);
    background: var(--story-progress-step-active-bg);
    box-shadow: var(--story-progress-step-active-shadow);
}

.section-story .story-scroll {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.section-story .story-scene {
    contain: layout paint;
}

.section-story .story-scene-frame,
.section-story .story-scene-2 .story-scene-frame {
    box-shadow:
        0 16px 28px rgba(122, 158, 104, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transform: none !important;
}

.section-story .story-scene-image {
    transform: none !important;
    filter: saturate(1.02) contrast(1.01) brightness(1.01);
}

.section-story .story-scene-copy-shell,
.section-story .story-scene-2 .story-scene-copy-shell {
    box-shadow:
        0 18px 30px rgba(131, 164, 118, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.section-story .story-scene-note {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.82);
}

@media (hover: hover) and (pointer: fine) {
    .section-story .story-showcase:hover,
    .section-story .story-progress-step:hover,
    .section-story .story-progress-step:focus-visible,
    .section-story .story-scene:hover .story-scene-frame,
    .section-story .story-scene-2:hover .story-scene-frame,
    .section-story .story-scene:hover .story-scene-copy-shell,
    .section-story .story-scene:hover .story-scene-image,
    .section-story .story-scene:hover .story-scene-note {
        transform: none !important;
    }
}

@media (max-width: 980px) {
    .section-story .story-showcase {
        padding: 20px 18px 22px;
    }
}

@media (max-width: 620px) {
    .section-story .story-showcase {
        padding: 16px 14px 18px;
    }

    .section-story .story-showcase-decor::before {
        inset: 10px;
    }
}

.section-game {
    position: relative;
    isolation: isolate;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.9) 0 10%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 14% 20%, rgba(234, 245, 236, 0.48) 0 11%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 84% 22%, rgba(229, 220, 248, 0.34) 0 13%, rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 22% 76%, rgba(247, 232, 189, 0.16) 0 10%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 80% 72%, rgba(219, 232, 244, 0.2) 0 10%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 16%),
        linear-gradient(180deg,
            rgba(249, 252, 248, 0.84) 0%,
            rgba(239, 247, 242, 0.72) 18%,
            rgba(232, 242, 236, 0.56) 36%,
            rgba(236, 230, 246, 0.48) 58%,
            rgba(224, 238, 230, 0.54) 78%,
            rgba(229, 238, 244, 0.32) 100%
        ),
        linear-gradient(120deg,
            rgba(233, 243, 232, 0.28) 0%,
            rgba(255, 255, 255, 0) 36%,
            rgba(232, 225, 244, 0.24) 68%,
            rgba(229, 238, 244, 0.14) 100%
        ),
        url('assets/bg3.webp') center center / cover no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(182, 206, 189, 0.36),
        inset 0 40px 60px rgba(255, 255, 255, 0.18);
}

.section-game::before,
.section-token::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(92vw, 1180px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.96) 16%,
        rgba(199, 221, 205, 0.78) 50%,
        rgba(255, 255, 255, 0.96) 84%,
        rgba(255, 255, 255, 0)
    );
    box-shadow: 0 0 26px rgba(214, 226, 200, 0.48);
    pointer-events: none;
    z-index: 1;
}

.section-game::after,
.section-token::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 132px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 0;
}

.game-subtitle {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.game-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-card);
    z-index: 2;
    background: var(--bg-glass-strong);
}

#gameCanvas {
    display: block;
    background: linear-gradient(180deg, #dce8d4, #c8d8bc);
    border-radius: var(--radius-lg);
}

.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 232, 212, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: opacity 0.4s ease;
}

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

.game-start-text {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--green-dark);
    animation: glowPulse 2s ease-in-out infinite;
}

.game-score {
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--green-dark);
    background: var(--bg-glass-strong);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.section-token {
    position: relative;
    isolation: isolate;
    z-index: 4;
    min-height: calc(100vh + 60px);
    min-height: calc(100dvh + 60px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(14px, 1.8vh, 22px);
    padding-top: clamp(232px, calc(8.8vh + 150px), 258px);
    padding-bottom: clamp(76px, 6.8vh + 20px, 112px);
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.84) 0 10%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 14% 20%, rgba(226, 244, 236, 0.4) 0 11%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 84% 22%, rgba(229, 220, 248, 0.3) 0 13%, rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 22% 76%, rgba(247, 232, 189, 0.18) 0 10%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 80% 72%, rgba(219, 232, 244, 0.18) 0 10%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 16%),
        linear-gradient(180deg,
            rgba(248, 249, 252, 0.72) 0%,
            rgba(239, 236, 248, 0.56) 42%,
            rgba(231, 240, 247, 0.64) 100%
        ),
        linear-gradient(125deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 34%, rgba(220, 231, 242, 0.18) 100%),
        url('assets/bg4.webp') center center / cover no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        inset 0 -1px 0 rgba(196, 194, 221, 0.36);
}

.section-token .section-title {
    margin: 0 auto;
    max-width: min(100%, 520px);
    font-size: clamp(1.82rem, 2.75vw, 2.48rem);
    line-height: 1;
    padding-top: 0;
    text-wrap: balance;
    z-index: 6;
}

.section-token .section-title.section-title-image.token-section-title {
    position: absolute;
    top: clamp(-48px, -3.2vw, -28px);
    right: clamp(-36px, -2.4vw, -16px);
    z-index: 5;
    margin: 0;
    width: min(100%, 360px);
    max-width: min(100%, 360px);
    padding: 0;
    transform: rotate(15deg);
    transform-origin: top right;
    pointer-events: none;
}

.token-title-image {
    display: block;
    width: 100%;
    height: auto;
    filter:
        drop-shadow(0 16px 34px rgba(255, 255, 255, 0.38))
        drop-shadow(0 12px 28px rgba(184, 201, 167, 0.18));
}

.section-token .token-showcase {
    flex: 0 1 auto;
}

.section-token .token-showcase-chart-only {
    margin-top: 270px;
}

.token-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.token-icon,
.token-inline-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.token-icon-fill {
    fill: currentColor;
    stroke: none;
}

.token-showcase {
    width: min(100%, 1220px);
    margin: 200px auto 0;
    flex: 0 0 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    gap: clamp(14px, 1.6vw, 20px);
    align-items: stretch;
    position: relative;
    z-index: 4;
}

.token-showcase-chart-only {
    width: min(100%, 1220px);
    grid-template-columns: minmax(0, 1fr);
    margin-top: 270px;
    align-items: start;
}

.token-showcase-chart-only .token-chart-card {
    grid-column: 1 / -1;
    max-width: min(100%, 1180px);
    margin: 0 auto;
}

.token-chart-stage {
    position: relative;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: visible;
    isolation: isolate;
}

.token-service-swarm {
    position: absolute;
    inset: clamp(28px, 4vh, 54px) 0 0;
    pointer-events: none;
    z-index: 3;
}

.token-service-badge {
    --token-badge-rotate: 0deg;
    --token-drift-x: 12px;
    --token-drift-y: -14px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(112px, 10vw, 164px);
    aspect-ratio: 1;
    padding: 0;
    border-radius: 0;
    pointer-events: auto;
    background: none;
    border: 0;
    box-shadow: none;
    transform: translate3d(0, 0, 0) rotate(var(--token-badge-rotate));
    text-decoration: none;
    transition:
        opacity 220ms ease,
        filter 220ms ease;
    animation: tokenServiceDrift var(--token-drift-duration, 14s) ease-in-out infinite;
}

.token-service-badge::before {
    content: none;
}

.token-service-badge:hover,
.token-service-badge:focus-visible {
    opacity: 1;
    filter: drop-shadow(0 16px 28px rgba(103, 122, 149, 0.22));
    outline: none;
}

.token-service-badge-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter:
        drop-shadow(0 18px 28px rgba(111, 131, 154, 0.18))
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.28));
    transition: transform 220ms ease;
}

.token-service-badge:hover .token-service-badge-image,
.token-service-badge:focus-visible .token-service-badge-image {
    transform: scale(1.06);
}

.token-service-badge-x {
    top: 10%;
    right: clamp(-34px, -1.8vw, -12px);
    --token-badge-rotate: -8deg;
    --token-drift-x: 12px;
    --token-drift-y: -10px;
    --token-drift-duration: 13s;
}

.token-service-badge-pump {
    left: clamp(-42px, -2.2vw, -18px);
    top: 42%;
    bottom: auto;
    width: clamp(126px, 11.5vw, 178px);
    --token-badge-rotate: -12deg;
    --token-drift-x: -12px;
    --token-drift-y: 16px;
    --token-drift-duration: 15s;
}

.token-service-badge-dex {
    right: clamp(-38px, -2vw, -14px);
    top: 70%;
    bottom: auto;
    width: clamp(124px, 11vw, 172px);
    --token-badge-rotate: 10deg;
    --token-drift-x: 12px;
    --token-drift-y: -12px;
    --token-drift-duration: 14s;
}

.token-shape {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    mix-blend-mode: screen;
}

.token-shape::before,
.token-shape::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.token-shape-orbit {
    top: clamp(-18px, -0.8vw, -8px);
    right: clamp(84px, 8vw, 148px);
    width: clamp(148px, 14vw, 214px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.34);
    opacity: 0.38;
    transform: rotate(-16deg);
    box-shadow:
        inset 0 0 0 1px rgba(225, 220, 243, 0.12),
        0 0 34px rgba(224, 218, 244, 0.14);
    animation: floatGentle 11s ease-in-out infinite;
}

.token-shape-orbit::before {
    inset: 14%;
    border-radius: 50%;
    border: 1px dashed rgba(246, 230, 188, 0.26);
}

.token-shape-orbit::after {
    top: 16%;
    right: 10%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(246, 230, 188, 0.18) 55%, rgba(255, 255, 255, 0) 72%);
    box-shadow: 0 0 18px rgba(247, 233, 190, 0.3);
}

.token-shape-petal {
    left: clamp(-42px, -2vw, -18px);
    bottom: clamp(128px, 15vh, 192px);
    width: clamp(160px, 18vw, 248px);
    height: clamp(52px, 5.6vw, 82px);
    border-radius: 999px;
    opacity: 0.24;
    transform: rotate(-14deg);
    border: 1px solid rgba(255, 255, 255, 0.28);
    background:
        linear-gradient(90deg, rgba(213, 233, 224, 0.54), rgba(255, 255, 255, 0.08) 36%, rgba(225, 216, 245, 0.44) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 16px 34px rgba(199, 215, 229, 0.12);
    animation: floatGentle 13s ease-in-out infinite reverse;
}

.token-shape-petal::before {
    inset: 10px 18px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
}

.token-shape-petal::after {
    top: 50%;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(246, 231, 186, 0.46), rgba(255, 255, 255, 0) 72%);
}

.token-shape-halo {
    right: clamp(-18px, -1vw, -6px);
    bottom: clamp(138px, 14vh, 196px);
    width: clamp(78px, 7vw, 116px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.22;
    background:
        radial-gradient(circle at 38% 36%, rgba(255, 255, 255, 0.92), rgba(220, 239, 230, 0.42) 22%, rgba(255, 255, 255, 0) 66%);
    box-shadow:
        0 0 28px rgba(218, 236, 229, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    animation: floatGentle 9s ease-in-out infinite;
}

.token-chart-deco {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0.2;
    filter:
        drop-shadow(0 10px 28px rgba(255, 255, 255, 0.16))
        drop-shadow(0 0 18px rgba(230, 238, 196, 0.18));
    mix-blend-mode: screen;
}

.token-chart-deco-stardust {
    top: clamp(58px, 8vh, 96px);
    right: clamp(34px, 3.8vw, 68px);
    width: clamp(108px, 10vw, 164px);
    animation: floatGentle 8s ease-in-out infinite;
}

.token-chart-deco-cloud {
    left: clamp(38px, 3.4vw, 64px);
    bottom: clamp(52px, 9vh, 112px);
    width: clamp(124px, 11vw, 178px);
    opacity: 0.17;
    animation: floatGentle 9s ease-in-out infinite reverse;
}

.token-chart-deco-planet {
    right: clamp(86px, 8vw, 154px);
    bottom: clamp(86px, 12vh, 148px);
    width: clamp(116px, 10.5vw, 176px);
    opacity: 0.14;
    animation: floatGentle 10s ease-in-out infinite;
}

.token-chart-figure {
    position: absolute;
    left: clamp(-168px, -10vw, -112px);
    top: clamp(-86px, -7vw, -42px);
    width: clamp(250px, 22vw, 360px);
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0.98;
    transform: rotate(-5deg);
    transform-origin: center top;
    filter:
        drop-shadow(0 18px 40px rgba(108, 138, 122, 0.22))
        drop-shadow(0 0 42px rgba(239, 247, 190, 0.24));
}

.token-main-card,
.token-chart-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 34px;
    padding: clamp(18px, 2vw, 28px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 26px 60px rgba(110, 126, 155, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.token-main-card {
    display: grid;
    align-content: start;
    gap: clamp(12px, 1.2vh, 16px);
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 219, 168, 0.24), rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 0% 100%, rgba(207, 228, 202, 0.24), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 248, 253, 0.68));
}

.token-chart-card {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.3vh, 16px);
    background:
        radial-gradient(circle at 0% 0%, rgba(213, 226, 255, 0.24), rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 100% 100%, rgba(248, 232, 186, 0.2), rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, rgba(252, 253, 255, 0.82), rgba(245, 241, 252, 0.7));
}

.token-chart-card-solo {
    position: relative;
    z-index: 2;
    overflow: visible;
    width: min(100%, 1180px);
    height: auto;
    padding: clamp(10px, 1.15vw, 14px);
    gap: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(233, 241, 255, 0.24), rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 100% 100%, rgba(248, 232, 186, 0.2), rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(253, 254, 255, 0.76), rgba(246, 242, 252, 0.68)),
        url('assets/bg4.webp') center center / cover no-repeat;
}

.token-main-card::before,
.token-chart-card::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(8px);
    opacity: 0.9;
}

.token-main-card::before {
    right: -90px;
    top: -90px;
    background: radial-gradient(circle, rgba(241, 218, 165, 0.44), rgba(255, 255, 255, 0) 70%);
}

.token-chart-card::before {
    left: -100px;
    bottom: -110px;
    background: radial-gradient(circle, rgba(213, 225, 247, 0.52), rgba(255, 255, 255, 0) 72%);
}

.token-main-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.token-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.token-brand-mark {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(226, 239, 225, 0.84)),
        rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow:
        0 18px 30px rgba(120, 150, 113, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.token-brand-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(118, 146, 102, 0.16));
}

.token-brand-copy {
    min-width: 0;
}

.token-kicker {
    display: inline-block;
    margin-bottom: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.82);
    color: #627568;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.token-brand-copy h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.95rem);
    line-height: 1.05;
    color: #4a5f54;
}

.token-brand-copy p {
    margin: 8px 0 0;
    max-width: 50ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6b716f;
}

.token-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-start;
}

.token-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.82);
    color: #53655a;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow: 0 10px 24px rgba(127, 152, 130, 0.08);
}

.token-status-pill-soft {
    background: rgba(242, 237, 250, 0.84);
    color: #6b6790;
}

.token-ca-panel,
.token-links-panel,
.token-community-bar {
    position: relative;
    z-index: 1;
    padding: 16px 18px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46)),
        rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 30px rgba(116, 136, 156, 0.08);
}

.token-ca-panel,
.token-links-panel {
    display: grid;
    gap: 12px;
}

.token-panel-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    min-width: 0;
}

.token-panel-heading-compact {
    margin-bottom: 0;
}

.token-ca-panel .token-panel-heading,
.token-links-panel .token-panel-heading {
    margin-bottom: 0;
}

.token-icon-box {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1), rgba(233, 241, 248, 0.94));
    color: #596d61;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 10px 22px rgba(134, 153, 175, 0.14);
    flex-shrink: 0;
}

.token-panel-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: #506457;
}

.token-panel-copy {
    margin: 2px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #7b8488;
}

.ca-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.ca-wrapper code {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    background: rgba(244, 248, 245, 0.86);
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(198, 217, 205, 0.72);
    word-break: break-all;
    color: #5f6762;
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #8fc07d 0%, #68aa8d 100%);
    color: #ffffff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 0 14px 26px rgba(108, 155, 128, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px rgba(108, 155, 128, 0.28);
    filter: saturate(1.06);
}

.copy-btn-label {
    line-height: 1;
}

.token-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.token-link-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 12px 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.72);
    text-decoration: none;
    color: inherit;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    box-shadow: 0 10px 22px rgba(112, 134, 156, 0.08);
}

.token-link-card:hover {
    transform: translateY(-3px);
    border-color: rgba(167, 193, 164, 0.72);
    box-shadow: 0 16px 28px rgba(112, 134, 156, 0.12);
}

.token-link-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 242, 247, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 10px 18px rgba(120, 145, 160, 0.14);
}

.token-link-icon svg,
.token-link-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.token-link-icon-x {
    color: #1f2522;
}

.token-link-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.token-link-title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.12;
    color: #53655a;
}

.token-link-subtitle {
    font-size: 0.76rem;
    line-height: 1.32;
    color: #80898d;
}

.token-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    position: relative;
    z-index: 1;
}

.token-stat-card {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 112px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 22px rgba(113, 135, 157, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.token-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(113, 135, 157, 0.12);
}

.token-stat-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1), rgba(237, 242, 248, 0.92));
    color: #5d6d64;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 10px 18px rgba(132, 153, 172, 0.14);
}

.token-stat-card-burn .token-stat-icon {
    color: #b57a4f;
}

.token-stat-label {
    display: block;
    font-size: 0.72rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a9295;
}

.token-stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    color: #506457;
    font-size: clamp(0.94rem, 1vw, 1.08rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.footer {
    position: relative;
    z-index: 2;
}

.token-community-bar {
    display: grid;
    align-content: start;
    gap: 14px;
}

.token-community-bar .community-buttons {
    display: flex;
    width: 100%;
    justify-content: stretch;
}

.token-community-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 18px;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

.chart-container {
    margin-bottom: 0;
    flex: 1 1 auto;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 34%),
        linear-gradient(145deg, rgba(244, 249, 243, 0.7), rgba(238, 234, 248, 0.58) 54%, rgba(246, 233, 197, 0.52) 100%),
        rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.68);
    height: 70vh;
    min-height: clamp(280px, 40vh, 420px);
    position: relative;
    isolation: isolate;
    z-index: 1;
    box-shadow: 0 18px 34px rgba(110, 133, 156, 0.1);
}

.chart-container:not(.is-embedded) {
    cursor: pointer;
}

.token-chart-card-solo .chart-container {
    min-height: clamp(420px, 64vh, 720px);
}

.chart-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(215, 232, 210, 0.2), rgba(255, 255, 255, 0) 32%, rgba(230, 220, 246, 0.22) 66%, rgba(247, 228, 186, 0.2) 100%),
        radial-gradient(circle at 78% 18%, rgba(228, 220, 245, 0.2), rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 16% 82%, rgba(221, 237, 228, 0.18), rgba(255, 255, 255, 0) 36%);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.chart-container.is-embedded::before {
    opacity: 0.96;
}

.chart-loading {
    min-height: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.96rem;
    color: #7f8a8a;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 60%),
        linear-gradient(145deg, rgba(248, 250, 246, 0.58), rgba(232, 238, 247, 0.36) 58%, rgba(244, 233, 205, 0.34));
}

.chart-loading.is-error {
    color: #8b6a6a;
}

.chart-embed-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #f7f7f2;
    position: relative;
    z-index: 1;
}

.chart-container.is-embedded .chart-embed-frame {
    filter: sepia(0.1) saturate(0.82) hue-rotate(-16deg) brightness(1.02) contrast(0.93);
}

.btn-chart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 12px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #8fb57d 0%, #6da57c 100%);
    color: white;
    font-size: 0.9rem;
    box-shadow: 0 16px 28px rgba(108, 149, 116, 0.2);
}

.btn-chart:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(108, 149, 116, 0.24);
}

.token-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.token-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(191, 203, 223, 0.34);
}

.token-footer-copy {
    display: grid;
    gap: 4px;
}

.footer p {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98rem;
    color: #63727a;
}

.footer-small {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 0.76rem !important;
    color: #8a9499 !important;
}

.footer-logo {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 20px rgba(115, 138, 156, 0.12);
}

@media (max-width: 1100px) {
    .token-showcase {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .token-showcase-chart-only {
        width: min(100%, 920px);
        margin-top: 270px;
    }

    .token-chart-figure {
        left: clamp(-128px, -16vw, -72px);
        top: clamp(-64px, -9vw, -26px);
        width: clamp(190px, 28vw, 270px);
    }

    .token-shape-orbit {
        top: -12px;
        right: clamp(52px, 8vw, 112px);
        width: clamp(126px, 16vw, 178px);
    }

    .token-shape-petal {
        left: -26px;
        bottom: clamp(112px, 14vh, 164px);
        width: clamp(138px, 18vw, 194px);
    }

    .token-shape-halo {
        right: -8px;
        bottom: clamp(118px, 12vh, 158px);
        width: clamp(64px, 8vw, 92px);
    }

    .token-chart-deco-stardust {
        top: 54px;
        right: 26px;
        width: clamp(88px, 12vw, 136px);
    }

    .token-chart-deco-cloud {
        left: 24px;
        bottom: 68px;
        width: clamp(102px, 14vw, 150px);
    }

    .token-chart-deco-planet {
        right: 62px;
        bottom: 108px;
        width: clamp(94px, 13vw, 146px);
    }
}

@media (min-width: 1101px) {
    .section-token {
        padding-top: 242px;
        padding-bottom: 84px;
        gap: 16px;
    }

    .section-token .section-title {
        margin-bottom: 0;
    }

    .token-main-card {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
        grid-template-areas:
            "header header"
            "ca ca"
            "links links"
            "stats community";
        align-items: stretch;
    }

    .token-main-header { grid-area: header; }

    .token-ca-panel { grid-area: ca; }

    .token-links-panel { grid-area: links; }

    .token-stats-grid { grid-area: stats; }

    .token-community-bar {
        grid-area: community;
        padding: 14px 16px;
    }

    .token-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .token-stat-card {
        min-height: 110px;
        padding: 12px;
        gap: 6px;
    }

    .token-stat-label {
        font-size: 0.66rem;
    }

    .token-stat-value {
        font-size: 0.96rem;
    }

    .token-links-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }

    .token-panel-heading-compact {
        margin-bottom: 2px;
    }
}

@media (max-width: 820px) {
    .section-token {
        justify-content: flex-start;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 238px;
        padding-bottom: 76px;
    }

    .token-main-header,
    .token-community-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .token-status-row,
    .token-community-bar .community-buttons {
        justify-content: flex-start;
    }

    .ca-wrapper {
        grid-template-columns: 1fr;
    }

    .copy-btn,
    .token-community-btn {
        width: 100%;
    }

    .token-links-grid,
    .token-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .token-service-swarm {
        inset: 24px 0 0;
    }

    .token-service-badge {
        width: clamp(88px, 20vw, 122px);
    }

    .token-service-badge-x {
        top: 12%;
        right: -8px;
    }

    .token-service-badge-pump {
        left: -12px;
        top: 44%;
        bottom: auto;
    }

    .token-service-badge-dex {
        right: -10px;
        top: 70%;
        bottom: auto;
    }

    .token-footer {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .section-token .section-title {
        font-size: clamp(1.82rem, 8vw, 2.2rem);
    }

    .section-token .section-title.section-title-image.token-section-title {
        top: -24px;
        right: -10px;
        width: min(100%, 238px);
        max-width: min(100%, 238px);
        transform: rotate(11deg);
    }

    .token-main-card,
    .token-chart-card,
    .token-ca-panel,
    .token-links-panel,
    .token-community-bar {
        border-radius: 28px;
    }

    .token-main-card,
    .token-chart-card {
        padding: 16px;
    }

    .token-service-swarm {
        inset: 18px 0 0;
    }

    .token-service-badge {
        width: clamp(76px, 22vw, 96px);
    }

    .token-service-badge-x {
        top: 14%;
        right: -4px;
    }

    .token-service-badge-pump {
        left: -6px;
        top: 45%;
        bottom: auto;
    }

    .token-service-badge-dex {
        right: -6px;
        top: 69%;
        bottom: auto;
    }

    .token-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .token-links-grid,
    .token-stats-grid {
        grid-template-columns: 1fr;
    }

    .token-link-card {
        min-height: 74px;
    }

    .chart-container {
        height: 300px;
        min-height: 300px;
    }

    .token-chart-card-solo {
        padding: 10px;
    }

    .token-chart-card-solo .chart-container {
        min-height: min(64vh, 540px);
    }

    .token-chart-figure {
        left: -74px;
        top: -30px;
        width: 168px;
        transform: rotate(-4deg);
        opacity: 0.92;
    }

    .token-shape-orbit {
        top: -10px;
        right: 42px;
        width: 118px;
        opacity: 0.24;
    }

    .token-shape-petal {
        left: -18px;
        bottom: 112px;
        width: 126px;
        height: 42px;
        opacity: 0.16;
    }

    .token-shape-halo {
        right: -6px;
        bottom: 112px;
        width: 58px;
        opacity: 0.16;
    }

    .token-chart-deco-stardust,
    .token-chart-deco-cloud,
    .token-chart-deco-planet {
        opacity: 0.12;
    }

    .token-chart-deco-stardust {
        top: 44px;
        right: 16px;
        width: 72px;
    }

    .token-chart-deco-cloud {
        left: 14px;
        bottom: 52px;
        width: 88px;
    }

    .token-chart-deco-planet {
        right: 34px;
        bottom: 92px;
        width: 82px;
    }

    .btn-chart {
        padding-inline: 14px;
    }
}

@media (min-width: 821px) and (max-height: 1000px) {
    .section-token {
        min-height: calc(100vh + 4px);
        min-height: calc(100dvh + 4px);
        padding-top: 34px;
        padding-bottom: 60px;
        gap: 12px;
    }

    .section-token .section-title {
        margin-bottom: 0;
        max-width: 460px;
        font-size: clamp(1.42rem, 1.86vw, 1.76rem);
    }

    .token-main-card,
    .token-chart-card {
        padding: 11px 12px;
    }

    .token-chart-card-solo {
        padding: 10px;
    }

    .token-main-card {
        gap: 5px;
    }

    .token-showcase {
        gap: 12px;
    }

    .token-brand-mark {
        width: 54px;
        height: 54px;
        border-radius: 18px;
    }

    .token-brand-logo {
        width: 38px;
        height: 38px;
    }

    .token-kicker {
        margin-bottom: 3px;
        padding: 4px 9px;
        font-size: 0.66rem;
    }

    .token-brand-copy h3 {
        font-size: clamp(1.14rem, 1.36vw, 1.42rem);
    }

    .token-brand-copy p {
        margin-top: 4px;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .token-status-pill {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 0.72rem;
    }

    .token-ca-panel,
    .token-links-panel,
    .token-community-bar {
        padding: 10px 12px;
    }

    .token-panel-heading {
        gap: 10px;
        margin-bottom: 10px;
    }

    .token-icon-box {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }

    .token-panel-eyebrow {
        font-size: 0.82rem;
    }

    .token-panel-copy {
        font-size: 0.74rem;
        line-height: 1.32;
    }

    .ca-wrapper {
        gap: 10px;
    }

    .ca-wrapper code {
        padding: 11px 14px;
        font-size: 0.72rem;
        line-height: 1.32;
    }

    .copy-btn {
        min-height: 42px;
        padding: 0 16px;
        gap: 8px;
        font-size: 0.82rem;
    }

    .token-links-grid,
    .token-stats-grid {
        gap: 5px;
    }

    .token-link-card {
        min-height: 58px;
        padding: 8px 10px;
        gap: 8px;
    }

    .token-link-icon {
        width: 36px;
        height: 36px;
    }

    .token-link-title {
        font-size: 0.8rem;
    }

    .token-link-subtitle {
        display: none;
    }

    .token-stat-card {
        min-height: 72px;
        padding: 8px;
        gap: 4px;
    }

    .token-stat-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    .token-stat-label {
        font-size: 0.56rem;
    }

    .token-stat-value {
        font-size: 0.78rem;
        line-height: 1.14;
    }

    .token-community-bar {
        gap: 10px;
    }

    .token-community-btn {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 0.82rem;
    }

    .chart-container {
        min-height: clamp(200px, 28vh, 300px);
    }

    .token-chart-card-solo .chart-container {
        min-height: clamp(380px, 58vh, 620px);
    }

    .token-chart-figure {
        left: clamp(-138px, -10vw, -92px);
        top: clamp(-74px, -8vw, -36px);
        width: clamp(210px, 20vw, 300px);
    }

    .token-shape-orbit {
        top: -12px;
        right: clamp(62px, 8vw, 118px);
        width: clamp(132px, 12vw, 176px);
        opacity: 0.3;
    }

    .token-shape-petal {
        left: clamp(-28px, -1vw, -10px);
        bottom: clamp(98px, 10vh, 138px);
        width: clamp(140px, 14vw, 190px);
        height: clamp(44px, 4.5vw, 64px);
    }

    .token-shape-halo {
        right: clamp(-12px, -1vw, -2px);
        bottom: clamp(104px, 10vh, 148px);
        width: clamp(62px, 6vw, 88px);
    }

    .token-chart-deco-stardust {
        top: 48px;
        right: 24px;
        width: clamp(92px, 9vw, 140px);
    }

    .token-chart-deco-cloud {
        left: 20px;
        bottom: 64px;
        width: clamp(108px, 10vw, 152px);
    }

    .token-chart-deco-planet {
        right: 56px;
        bottom: 110px;
        width: clamp(92px, 9.5vw, 144px);
    }
}

.game-wrapper {
    max-width: 600px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.game-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.game-overlay-logo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 15px rgba(100, 140, 80, 0.2);
    animation: floatGentle 3s ease-in-out infinite;
}

.game-start-hint {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-light);
}

.game-hud {
    display: flex;
    justify-content: space-around;
    padding: 14px 20px;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin-top: -2px;
}

.hud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hud-icon {
    font-size: 1.3rem;
}

.hud-label {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hud-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green-dark);
}

.game-garden {
    margin-top: 16px;
    min-height: 80px;
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.garden-empty {
    width: 100%;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--text-light);
    padding: 10px;
}

.garden-plant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
    border: 2px solid rgba(168, 200, 160, 0.3);
    animation: plantGrow 0.5s ease-out both;
    transition: transform 0.2s ease;
}

.garden-plant:hover {
    transform: scale(1.1);
}

.plant-emoji {
    font-size: 1.5rem;
}

.plant-name {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-mid);
    text-align: center;
    max-width: 70px;
}

.plant-rare {
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-actions {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    justify-content: center;
}

.btn-plant {
    background: linear-gradient(135deg, var(--green-soft), var(--green-mid));
    color: white;
    font-size: 0.85rem;
    padding: 10px 20px;
}

.btn-plant:disabled,
.btn-rare:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

.btn-rare {
    background: linear-gradient(135deg, var(--lavender), #c0a8d8);
    color: white;
    font-size: 0.85rem;
    padding: 10px 20px;
}

.btn-rare:not(:disabled):hover,
.btn-plant:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(100, 140, 80, 0.25);
}

.community-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-mid);
    margin-bottom: 16px;
}

.community-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 8px 16px;
}

@keyframes plantGrow {
    from {
        opacity: 0;
        transform: scale(0.3) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.section-game {
    --game-tone-filter: none;
    height: auto;
    min-height: calc(100vh + 200px);
    min-height: calc(100dvh + 200px);
    max-height: none;
    overflow: visible;
    align-items: center;
    justify-content: flex-start;
    padding-top: clamp(152px, calc(5vh + 100px), 164px);
    padding-bottom: clamp(192px, 5vh + 140px, 204px);
}

.section-game > .cloud,
.section-game > .section-title,
.section-game > .game-layout,
.section-game .game-section-title {
    filter: var(--game-tone-filter);
}

.section-game .section-title {
    font-size: clamp(2rem, 3.1vw, 2.5rem);
    margin-bottom: clamp(12px, 2vh, 20px);
}

.section-game .section-title.section-title-image.game-section-title {
    position: absolute;
    top: clamp(-48px, -3.2vw, -28px);
    right: clamp(-36px, -2.4vw, -16px);
    z-index: 5;
    margin: 0;
    width: min(100%, 360px);
    max-width: min(100%, 360px);
    padding: 0;
    transform: rotate(15deg);
    transform-origin: top right;
    pointer-events: none;
}

.game-title-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    filter:
        drop-shadow(0 16px 32px rgba(255, 255, 255, 0.34))
        drop-shadow(0 12px 26px rgba(167, 191, 156, 0.18));
}

.game-subtitle {
    max-width: 760px;
    margin: 0 auto 20px;
    font-size: 1.02rem;
    line-height: 1.8;
}

.game-intro {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto 26px;
}

.game-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 30px rgba(100, 140, 80, 0.1);
    backdrop-filter: blur(14px);
    color: var(--text-mid);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
}

.game-pill-icon {
    font-size: 1rem;
}

.game-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 1.8vh, 16px);
    max-width: 1120px;
    width: 100%;
    margin: 100px auto 0;
    align-items: center;
    justify-items: center;
    overflow: visible;
}

.game-main,
.game-side {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.5vh, 14px);
    width: 100%;
    min-width: 0;
    align-items: center;
}

.game-playfield {
    display: grid;
    grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
    gap: clamp(12px, 1.6vw, 18px);
    align-items: center;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.game-container {
    position: relative;
    align-self: center;
    width: 100%;
    min-width: 0;
    overflow: visible;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.3)),
        radial-gradient(circle at top, rgba(232, 243, 226, 0.95), rgba(201, 223, 201, 0.85));
    box-shadow:
        0 24px 60px rgba(109, 146, 98, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#gameCanvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
}

.game-overlay {
    background: linear-gradient(180deg, rgba(234, 242, 229, 0.9), rgba(216, 231, 214, 0.88));
    backdrop-filter: blur(10px);
}

.game-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(320px, calc(100% - clamp(20px, 3vw, 32px)));
    max-width: 100%;
    padding: clamp(14px, 2.2vw, 20px);
    text-align: center;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    box-shadow: 0 20px 40px rgba(118, 152, 102, 0.14);
}

.game-overlay-logo {
    width: clamp(92px, 9vw, 118px);
    height: clamp(92px, 9vw, 118px);
    border-radius: 20px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 16px 30px rgba(114, 151, 96, 0.18);
}

.game-start-text {
    font-size: clamp(1.18rem, 1.8vw, 1.38rem);
    line-height: 1.25;
    margin: 0;
    max-width: 100%;
    animation: none;
}

.game-start-hint {
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 250px;
    margin: 0;
}

.game-start-button {
    min-width: 164px;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, rgba(195, 222, 160, 0.98), rgba(238, 225, 154, 0.98));
    color: var(--green-dark);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(116, 151, 96, 0.16);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.game-start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(116, 151, 96, 0.2);
}

.game-hud {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-self: center;
    align-content: start;
    height: fit-content;
    padding: 0;
    background: transparent;
    border: 0;
    margin: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hud-item {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    align-items: center;
    justify-content: start;
    gap: 3px 10px;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 24px rgba(108, 144, 96, 0.1);
    text-align: left;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.hud-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(108, 144, 96, 0.14);
}

.hud-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1), rgba(236, 246, 229, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 8px 18px rgba(197, 223, 178, 0.28);
    font-size: 1rem;
}

.hud-icon-img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: none;
}

.hud-label {
    grid-area: label;
    align-self: end;
    font-size: 0.68rem;
    line-height: 1.1;
}

.hud-value {
    grid-area: value;
    align-self: start;
    font-size: 1.12rem;
    line-height: 1;
}

.game-assist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.game-card-guide {
    padding: 18px 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 243, 252, 0.44)),
        rgba(255, 255, 255, 0.4);
}

.game-status-text {
    margin: 0;
}

.recipe-list {
    display: grid;
    gap: 10px;
}

.recipe-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.68);
}

.recipe-item-name {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--green-dark);
}

.recipe-item-cost {
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: right;
    color: var(--text-light);
}

.game-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
    width: min(100%, 1048px);
    margin-inline: auto;
}

.game-action {
    min-height: 82px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(100, 140, 80, 0.14);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    text-align: left;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, filter 0.22s ease;
}

.game-action-title {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 28px;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
}

.game-action-title-img {
    display: block;
    width: auto;
    max-width: min(100%, 196px);
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(76, 105, 67, 0.16));
}

.game-action-cost {
    font-size: 0.66rem;
    line-height: 1.35;
    opacity: 0.88;
}

.game-action-state {
    font-size: 0.66rem;
    line-height: 1.35;
    opacity: 0.95;
}

.action-plant {
    background: linear-gradient(145deg, #92c07a, #7cb293);
    color: #fffefb;
}

.action-boost {
    background: linear-gradient(145deg, #f2dfa3, #ddd0ee);
    color: #544d4d;
}

.action-rare {
    background: linear-gradient(145deg, #d7c5ed, #b8d3bc);
    color: #4f4b4b;
}

.game-action.is-ready {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 36px rgba(115, 149, 95, 0.2);
}

.game-action.is-locked {
    filter: saturate(0.88);
}

.game-action:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

.game-action:not(:disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(100, 140, 80, 0.22);
}

.game-card {
    padding: 20px;
    width: 100%;
    min-width: 0;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42)),
        rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow:
        0 18px 40px rgba(105, 144, 94, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.game-card-mood {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(244, 239, 253, 0.4)),
        rgba(255, 255, 255, 0.4);
}

.game-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.game-card-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--green-dark);
}

.game-card-badge {
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: rgba(218, 230, 196, 0.72);
    border: 1px solid rgba(183, 206, 156, 0.56);
    color: var(--green-dark);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.game-card-text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-mid);
}

.game-card-note {
    margin-top: 12px;
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--text-light);
}

.game-card-collection {
    min-height: 100%;
}

.game-card-collection .game-card-header {
    margin-bottom: 12px;
}

.game-card-collection .game-card-text {
    max-width: 72ch;
}

.mood-portrait {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 26px;
    background: radial-gradient(circle at center, rgba(218, 231, 201, 0.62), rgba(255, 255, 255, 0.28));
}

.mood-portrait-img {
    width: min(100%, 190px);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 26px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 16px 28px rgba(110, 142, 94, 0.16);
}

.game-garden {
    margin-top: 0;
    min-height: 180px;
    max-height: none;
    padding: 6px 2px 2px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    overflow: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 181, 138, 0.72) rgba(255, 255, 255, 0.22);
}

.game-garden::-webkit-scrollbar {
    width: 8px;
}

.game-garden::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.game-garden::-webkit-scrollbar-thumb {
    background: rgba(155, 181, 138, 0.72);
    border-radius: 999px;
}

.garden-empty {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(170, 199, 147, 0.5);
}

.garden-entry {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 24px rgba(110, 144, 96, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.garden-entry.is-entering {
    animation: plantGrow 0.55s ease-out both;
}

.garden-entry.is-rare {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(232, 224, 244, 0.64));
}

.garden-entry:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(110, 144, 96, 0.12);
}

.garden-entry-emoji {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(216, 232, 205, 0.62));
    font-size: 1.8rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.garden-entry-image {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 6px 10px rgba(128, 154, 116, 0.22));
}

.garden-entry-body {
    min-width: 0;
}

.garden-entry-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.garden-entry-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--green-dark);
}

.garden-entry-tag {
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: rgba(248, 237, 187, 0.66);
    color: #8d6e20;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.garden-stage {
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: var(--text-light);
}

.garden-progress {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(171, 194, 154, 0.24);
}

.garden-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #c4df9f, #f3dc97, #cbbceb);
    box-shadow: 0 0 12px rgba(245, 220, 151, 0.45);
    transition: width 0.35s ease;
}

.garden-progress-label {
    margin-top: 6px;
    font-size: 0.73rem;
    color: var(--text-light);
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.56s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.56s 0.12s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.56s 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-delay.visible {
    opacity: 1;
    transform: translateY(0);
}

.chapter-1.reveal { transition-delay: 0s; }
.chapter-2.reveal { transition-delay: 0.15s; }
.chapter-3.reveal { transition-delay: 0.3s; }
.chapter-4.reveal { transition-delay: 0.45s; }

@keyframes floatSlow {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(8px, -12px, 0);
    }
    50% {
        transform: translate3d(-5px, -20px, 0);
    }
    75% {
        transform: translate3d(10px, -8px, 0);
    }
}

@keyframes floatGentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes tokenServiceDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--token-badge-rotate));
    }
    50% {
        transform: translate3d(var(--token-drift-x), var(--token-drift-y), 0) rotate(calc(var(--token-badge-rotate) + 6deg));
    }
}

@keyframes storyAuroraPulse {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 0.84;
    }
    50% {
        transform: scale(1.08) translate3d(10px, -8px, 0);
        opacity: 1;
    }
}

@keyframes storySheenDrift {
    0%, 100% {
        transform: rotate(18deg) translate3d(0, 0, 0);
        opacity: 0.28;
    }
    50% {
        transform: rotate(24deg) translate3d(-18px, 10px, 0);
        opacity: 0.46;
    }
}

@media (prefers-reduced-motion: reduce) {
    .planet,
    .token-shape-orbit,
    .token-shape-petal,
    .token-shape-halo,
    .story-showcase::before,
    .story-showcase::after,
    .story-showcase-decor::after,
    .story-scene-aura {
        animation: none !important;
    }

    .story-showcase,
    .story-progress-step,
    .story-scene-frame,
    .story-scene-copy-shell,
    .story-scene-image,
    .story-scene-note {
        transition: none !important;
    }
}


.section-game,
.section-token {
    content-visibility: auto;
    contain-intrinsic-size: auto 100vh;
}

.section-story {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

body.performance-lite .nav,
body.performance-lite .home-text,
body.performance-lite .chapter-card,
body.performance-lite .token-card,
body.performance-lite .hud-item,
body.performance-lite .game-action,
body.performance-lite .hero-ca-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.performance-lite .home-text {
    animation: none !important;
    box-shadow:
        0 24px 44px rgba(101, 137, 84, 0.14),
        0 0 64px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -12px 22px rgba(208, 228, 193, 0.18);
}

body.performance-lite .section-home::before {
    filter: blur(24px) saturate(1.02);
    opacity: 0.6;
}

body.performance-lite .planet,
body.performance-lite .nav-sparkle,
body.performance-lite .title-star,
body.performance-lite .sparkle,
body.performance-lite .scroll-indicator,
body.performance-lite .title-highlight {
    animation: none !important;
}

body.performance-lite #starCanvas {
    opacity: 0.82;
    filter: none;
}

body.performance-lite .section-story::before,
body.performance-lite .section-story::after,
body.performance-lite .story-chapters::after,
body.performance-lite .chapter-card::after {
    filter: none !important;
}

body.performance-lite .story-deco,
body.performance-lite .story-ring {
    animation: none !important;
    filter: none !important;
}

body.performance-lite .chapter-card {
    box-shadow:
        0 16px 32px rgba(120, 156, 105, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

body.performance-lite .chapter-card,
body.performance-lite .chapter-image-wrap,
body.performance-lite .chapter-img {
    transition: none !important;
}

body.performance-lite .chapter-card:hover,
body.performance-lite .chapter-card:hover .chapter-image-wrap,
body.performance-lite .chapter-card:hover .chapter-img {
    transform: none !important;
}

body.performance-lite .planet {
    mix-blend-mode: normal;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes sparkleRotate {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
    50% { transform: rotate(180deg) scale(1.2); opacity: 0.6; }
}

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-15px) scale(1.3); opacity: 1; }
}

@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.4; }
    50% { transform: rotate(45deg) translateY(8px); opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 768px) {
    .section {
        padding: 70px 20px 40px;
    }

    .home-content {
        flex-direction: column-reverse;
        gap: 26px;
        text-align: center;
    }

    .home-text {
        max-width: min(100%, 640px);
        padding: 28px 24px;
        border-radius: 52px 58px 50px 64px / 42px 44px 58px 54px;
    }

    .home-text::before {
        width: 146px;
        height: 82px;
        top: -20px;
        left: 18px;
        box-shadow:
            44px -2px 0 10px rgba(255, 255, 255, 0.88),
            94px 8px 0 -4px rgba(255, 255, 255, 0.8);
    }

    .home-text::after {
        width: 156px;
        height: 88px;
        right: 18px;
        bottom: -22px;
        box-shadow:
            -46px 6px 0 8px rgba(255, 255, 255, 0.82),
            -92px -2px 0 -8px rgba(231, 243, 223, 0.74);
    }

    .home-title {
        font-size: clamp(2.7rem, 8vw, 3.5rem);
    }

    .title-highlight {
        font-size: clamp(3.6rem, 11vw, 4.8rem);
    }

    .home-subtitle {
        max-width: none;
        padding: 16px 16px 14px;
        border-radius: 24px;
    }

    .home-meta-row {
        gap: 14px;
        margin-bottom: 24px;
    }

    .hero-ca-card {
        width: 100%;
        padding: 16px 16px 14px;
        border-radius: 24px;
    }

    .hero-ca-value {
        font-size: 0.9rem;
    }

    .home-buttons {
        width: min(100%, 440px);
        justify-content: center;
        grid-template-columns: 1fr;
    }

    .home-buttons .btn {
        min-height: 68px;
        font-size: 1rem;
    }

    .portrait-img {
        height: 40vh;
        max-height: 300px;
    }

    .portrait-glow {
        width: 240px;
        height: 240px;
    }

    .chapter-card,
    .chapter-card.reverse {
        flex-direction: row;
        align-items: center;
        padding: 16px;
        gap: 14px;
        border-radius: 48px 82px 54px 92px / 44px 48px 80px 66px;
    }

    .chapter-card.reverse {
        flex-direction: row-reverse;
        border-radius: 90px 52px 84px 56px / 70px 42px 52px 88px;
    }

    .chapter-image-wrap {
        width: clamp(118px, 34vw, 138px);
        height: 148px;
        flex: 0 0 clamp(118px, 34vw, 138px);
        border-radius: 24px 34px 28px 38px / 22px 24px 36px 40px;
    }

    .chapter-satellite-top {
        top: -12px;
        left: 24px;
        width: 88px;
        height: 38px;
    }

    .chapter-satellite-bottom {
        right: 28px;
        bottom: -14px;
        width: 114px;
        height: 46px;
    }

    .chapter:nth-child(even) .chapter-satellite-top {
        right: 24px;
    }

    .chapter:nth-child(even) .chapter-satellite-bottom {
        left: 28px;
    }

    .section-story {
        min-height: calc(100vh + 120px);
        min-height: calc(100dvh + 120px);
        justify-content: center;
        padding: 172px 18px 144px;
    }

    .section-token {
        min-height: calc(100vh + 60px);
        min-height: calc(100dvh + 60px);
        padding-bottom: 60px;
    }

    .section-story::before {
        width: 300px;
        height: 300px;
        top: 110px;
        left: -96px;
    }

    .section-story::after {
        width: 340px;
        height: 340px;
        right: -112px;
        bottom: -18px;
    }

    .section-story .section-title {
        font-size: clamp(2.4rem, 8.4vw, 3.2rem);
        margin-bottom: 10px;
    }

    .story-title-switch {
        width: min(46vw, 176px);
    }

    .story-deco-cloud,
    .story-ring-right,
    .story-deco-ufo {
        display: none;
    }

    .story-chapters {
        max-width: 640px;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .story-chapters::after {
        left: 2%;
        right: 2%;
        top: 14%;
        bottom: 8%;
        filter: blur(22px);
        opacity: 0.72;
    }

    .story-chapters::before,
    .chapter::before {
        display: none;
    }

    .chapter-title {
        font-size: clamp(1.35rem, 5.2vw, 1.8rem);
    }

    .chapter-text p {
        max-width: none;
        font-size: 0.85rem;
        line-height: 1.48;
        padding: 10px 12px;
        border-radius: 18px;
    }

    .chapter-text {
        gap: 6px;
    }

    .chapter-meta {
        gap: 6px;
    }

    .chapter-chip {
        min-height: 26px;
        padding: 6px 10px;
        font-size: 0.64rem;
    }

    .chapter-note {
        font-size: 0.8rem;
    }

    .chapter-number {
        top: 10px;
        left: 10px;
        min-width: 34px;
        padding: 6px 10px;
        font-size: 0.68rem;
    }

    .token-grid {
        grid-template-columns: 1fr;
    }

    .token-card-chart {
        grid-column: 1;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-link {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .section-title {
        font-size: 2rem;
    }

    #gameCanvas {
        width: 100%;
        height: auto;
    }

    .game-container {
        width: 100%;
        max-width: 480px;
    }

    .game-wrapper {
        width: 100%;
    }

    .game-hud {
        flex-wrap: wrap;
        gap: 8px;
    }

    .game-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .section-game {
        min-height: calc(100vh + 200px);
        min-height: calc(100dvh + 200px);
        padding-bottom: 200px;
    }
}

@media (max-width: 480px) {
    .home-title {
        font-size: 2.3rem;
    }

    .title-highlight {
        font-size: 3.4rem;
    }

    .home-subtitle {
        font-size: 1.04rem;
        line-height: 1.65;
        padding: 14px 14px 12px;
    }

    .hero-ca-card {
        padding: 14px 14px 12px;
    }

    .hero-ca-label {
        font-size: 0.8rem;
    }

    .hero-ca-value {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .home-buttons .btn {
        min-height: 62px;
        padding: 14px 16px;
        font-size: 0.96rem;
    }

    .home-buttons .btn-label {
        white-space: normal;
    }

    .nav {
        padding: 10px 12px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .nav-logo {
        font-size: 1.08rem;
        min-width: 0;
    }

    .nav-links {
        justify-content: flex-end;
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .nav-link {
        padding: 6px 10px;
        font-size: 0.76rem;
    }

    .btn {
        padding: 10px 18px;
        font-size: 0.85rem;
    }

    .portrait-img {
        height: 35vh;
        max-height: 250px;
    }
}

@media (max-width: 1080px) {
    .game-layout {
        grid-template-columns: 1fr;
    }

    .game-assist {
        grid-template-columns: 1fr;
    }

    .game-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-side .game-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .section-game {
        padding-top: 168px;
        padding-bottom: 168px;
        padding-left: 16px;
        padding-right: 16px;
        justify-content: flex-start;
    }

    .section-game .section-title {
        margin-bottom: 10px;
    }

    .game-playfield {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .game-container {
        max-width: 100%;
    }

    .game-intro {
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .game-pill {
        width: 100%;
        justify-content: flex-start;
        padding: 11px 16px;
    }

    .game-assist {
        grid-template-columns: 1fr;
    }

    .game-hud {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .game-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .game-side {
        display: grid;
        grid-template-columns: 1fr;
    }

    .game-card,
    .game-overlay-content {
        border-radius: 24px;
    }

    .game-container,
    #gameCanvas {
        border-radius: 26px;
    }

    .game-start-text {
        font-size: clamp(1.02rem, 4vw, 1.2rem);
    }

    .game-start-hint {
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .hud-item {
        min-height: 60px;
        padding: 10px 12px;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 3px 9px;
        border-radius: 16px;
    }

    .hud-icon {
        width: 36px;
        height: 36px;
    }

    .hud-icon-img {
        width: 20px;
        height: 20px;
    }

    .hud-label {
        font-size: 0.66rem;
    }

    .hud-value {
        font-size: 1.04rem;
    }

    .game-action {
        min-height: 72px;
        padding: 10px;
        align-items: center;
        text-align: center;
    }

    .game-action-title {
        justify-content: center;
        min-height: 28px;
    }

    .game-action-title-img {
        height: 28px;
        max-width: 100%;
    }

    .game-action-cost,
    .game-action-state {
        display: -webkit-box;
        overflow: hidden;
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .game-card-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .game-card-badge {
        white-space: normal;
    }

    .recipe-item {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .section-game {
        padding-top: 170px;
        padding-bottom: 164px;
        padding-left: 14px;
        padding-right: 14px;
        justify-content: flex-start;
    }

    .section-game .section-title {
        font-size: clamp(1.82rem, 8.4vw, 2.1rem);
        margin-bottom: 8px;
    }

    .section-game .section-title.section-title-image.game-section-title {
        top: -24px;
        right: -10px;
        width: min(100%, 238px);
        max-width: min(100%, 238px);
        transform: rotate(11deg);
    }

    .game-layout,
    .game-main,
    .game-side,
    .game-assist,
    .game-playfield {
        gap: 10px;
    }

    .game-subtitle {
        margin-bottom: 16px;
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .game-overlay-logo {
        width: 84px;
        height: 84px;
    }

    .game-card,
    .game-overlay-content {
        padding: 16px;
    }

    .recipe-item,
    .game-card-header,
    .garden-entry-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .recipe-item-cost {
        text-align: left;
    }

    .game-overlay-content {
        width: min(280px, calc(100% - 20px));
        gap: 8px;
        padding: 12px 10px;
    }

    .game-start-text {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .game-start-hint {
        max-width: 100%;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .game-start-button {
        min-width: 0;
        padding: 9px 16px;
        font-size: 0.86rem;
    }

    .game-hud {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .game-actions {
        gap: 6px;
    }

    .hud-item {
        min-height: 56px;
        padding: 8px 10px;
        border-radius: 14px;
    }

    .hud-icon {
        width: 34px;
        height: 34px;
        font-size: 0.96rem;
    }

    .hud-icon-img {
        width: 18px;
        height: 18px;
    }

    .hud-label {
        font-size: 0.62rem;
    }

    .hud-value {
        font-size: 0.96rem;
    }

    .game-start-button,
    .game-action {
        width: 100%;
    }

    .game-action {
        min-height: 70px;
        padding: 10px 8px;
    }

    .game-action-title {
        min-height: 26px;
        font-size: 0.88rem;
    }

    .game-action-title-img {
        max-width: 100%;
        height: 24px;
    }

    .game-action-cost,
    .game-action-state {
        font-size: 0.62rem;
        line-height: 1.25;
    }

    .game-garden {
        min-height: 148px;
        max-height: none;
    }

    .garden-entry {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .garden-entry-emoji {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .garden-entry-image {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 360px) {
    .game-card,
    .game-overlay-content {
        padding: 12px;
    }

    .game-hud {
        grid-template-columns: 1fr;
    }

    .game-actions {
        grid-template-columns: 1fr;
    }

    .game-action-state {
        -webkit-line-clamp: 3;
    }
}

@media (max-height: 860px) and (min-width: 769px) {
    .section-game {
        padding-top: 174px;
        padding-bottom: 164px;
    }

    .section-game .section-title {
        margin-bottom: 18px;
    }
}

/* Story carousel sync with OCTO approach */
.story-scroll {
    position: relative;
    block-size: clamp(580px, 70vh, 720px);
    overflow: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
    touch-action: manipulation;
}

.story-scene {
    position: absolute;
    inset: 0;
    min-block-size: auto;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 16%, 0) scale(0.96);
    transition:
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 360ms ease;
    will-change: transform, opacity;
}

.section-story-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.section-story-shape-set {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.section-story[data-story-active-index="0"] .section-story-shape-set-gre,
.section-story[data-story-active-index="1"] .section-story-shape-set-pur {
    opacity: 1;
}

.section-story-shape {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    max-width: min(16vw, 216px);
    opacity: 0.72;
    filter: drop-shadow(0 14px 24px rgba(255, 255, 255, 0.16));
    transform: translate3d(0, 0, 0) rotate(var(--shape-rot, 0deg));
    user-select: none;
    will-change: transform;
    animation: storyShowcaseShapeFloat var(--shape-duration, 9s) ease-in-out infinite;
    animation-delay: var(--shape-delay, 0s);
}

.section-story-shape-left-top {
    --shape-rot: -8deg;
    --shape-y: -14px;
    --shape-x: 10px;
    top: clamp(252px, calc(18vh + 120px), 334px);
    left: clamp(8px, 1.4vw, 28px);
}

.section-story-shape-left-mid {
    --shape-rot: -10deg;
    --shape-y: 16px;
    --shape-x: 8px;
    top: 42%;
    left: clamp(-6px, 0.6vw, 16px);
}

.section-story-shape-left-bottom {
    --shape-rot: 7deg;
    --shape-y: -18px;
    --shape-x: 11px;
    bottom: clamp(172px, calc(9vh + 90px), 216px);
    left: clamp(0px, 0.8vw, 22px);
}

.section-story-shape-right-top {
    --shape-rot: 11deg;
    --shape-y: -16px;
    --shape-x: -9px;
    top: clamp(260px, calc(20vh + 120px), 348px);
    right: clamp(12px, 1.6vw, 32px);
}

.section-story-shape-right-bottom {
    --shape-rot: 6deg;
    --shape-y: 16px;
    --shape-x: -12px;
    bottom: clamp(178px, calc(10vh + 90px), 224px);
    right: clamp(6px, 1.2vw, 24px);
}

.section-story-shape-gre {
    filter: drop-shadow(0 18px 28px rgba(162, 207, 141, 0.22));
}

.section-story-shape-pur {
    filter: drop-shadow(0 18px 28px rgba(187, 176, 235, 0.24));
}

.section-story-shape-set-gre .section-story-shape-left-top {
    --shape-duration: 8.8s;
    --shape-delay: -1.1s;
    max-width: min(8vw, 104px);
}

.section-story-shape-set-gre .section-story-shape-left-mid {
    --shape-duration: 10.6s;
    --shape-delay: -3.2s;
    max-width: min(11vw, 154px);
}

.section-story-shape-set-gre .section-story-shape-left-bottom {
    --shape-duration: 11.8s;
    --shape-delay: -5.4s;
    max-width: min(14vw, 214px);
}

.section-story-shape-set-gre .section-story-shape-right-top {
    --shape-duration: 9.6s;
    --shape-delay: -2s;
    max-width: min(13vw, 184px);
}

.section-story-shape-set-gre .section-story-shape-right-bottom {
    --shape-duration: 10.2s;
    --shape-delay: -4.8s;
    max-width: min(11vw, 154px);
}

.section-story-shape-set-pur .section-story-shape-left-top {
    --shape-duration: 9.4s;
    --shape-delay: -0.8s;
    top: clamp(262px, calc(19vh + 120px), 356px);
    left: clamp(-4px, 0.4vw, 14px);
    max-width: min(13vw, 176px);
}

.section-story-shape-set-pur .section-story-shape-left-mid {
    --shape-duration: 11s;
    --shape-delay: -3.4s;
    top: 40%;
    max-width: min(12vw, 166px);
}

.section-story-shape-set-pur .section-story-shape-left-bottom {
    --shape-duration: 10.8s;
    --shape-delay: -5.1s;
    bottom: clamp(180px, calc(10vh + 90px), 228px);
    max-width: min(13vw, 178px);
}

.section-story-shape-set-pur .section-story-shape-right-top {
    --shape-duration: 9.8s;
    --shape-delay: -2.2s;
    top: clamp(302px, calc(24vh + 120px), 396px);
    right: clamp(0px, 0.8vw, 18px);
    max-width: min(15vw, 204px);
}

.section-story-shape-set-pur .section-story-shape-right-bottom {
    --shape-duration: 11.4s;
    --shape-delay: -4.3s;
    bottom: clamp(176px, calc(9vh + 90px), 222px);
    right: clamp(4px, 1vw, 22px);
    max-width: min(12vw, 170px);
}

@keyframes storyShowcaseShapeFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rot, 0deg));
    }
    50% {
        transform: translate3d(var(--shape-x, 0px), var(--shape-y, 0px), 0) rotate(calc(var(--shape-rot, 0deg) + 4deg));
    }
}

.story-scene.is-before {
    opacity: 0.08;
    transform: translate3d(0, -14%, 0) scale(0.94);
    z-index: 1;
}

.story-scene.is-after {
    opacity: 0.08;
    transform: translate3d(0, 14%, 0) scale(0.94);
    z-index: 1;
}

.story-scene.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 3;
}

.story-scene + .story-scene {
    margin-top: 0;
}

body.performance-lite .story-scene {
    transition:
        transform 220ms ease,
        opacity 180ms ease;
}

@media (max-width: 980px) {
    .story-scroll {
        block-size: clamp(640px, 76vh, 840px);
    }

    .section-story-shape {
        max-width: min(16vw, 126px);
        opacity: 0.68;
    }

    .section-story-shape-left-top {
        top: 256px;
    }

    .section-story-shape-right-top,
    .section-story-shape-right-bottom {
        right: clamp(0px, 0.6vw, 12px);
    }

    .story-scene.is-before {
        transform: translate3d(0, -10%, 0) scale(0.96);
    }

    .story-scene.is-after {
        transform: translate3d(0, 10%, 0) scale(0.96);
    }
}

@media (max-width: 620px) {
    .story-scroll {
        block-size: clamp(620px, 84vh, 900px);
        overflow: hidden;
    }

    .section-story-shape-left-mid,
    .section-story-shape-right-bottom {
        display: none;
    }

    .section-story-shape {
        max-width: min(22vw, 92px);
        opacity: 0.5;
    }

    .section-story-shape-left-top,
    .section-story-shape-left-bottom {
        left: -4px;
    }

    .section-story-shape-left-top {
        top: 236px;
    }

    .section-story-shape-left-bottom {
        bottom: 166px;
    }

    .section-story-shape-right-top {
        top: 244px;
        right: -6px;
    }

    .section-story-shape-set-pur .section-story-shape-right-top {
        top: 276px;
    }

    .story-scene {
        inset: 0;
        transform: translate3d(0, 8%, 0) scale(0.99);
    }

    .story-scene.is-before {
        transform: translate3d(0, -6%, 0) scale(0.98);
    }

    .story-scene.is-after {
        transform: translate3d(0, 6%, 0) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-scene,
    .section-story-shape {
        transition: none;
        animation: none;
    }
}