/* Static port of the liquid-glass-react rendering layers. */
.liquid-glass {
    --lg-radius: 32px;
    --lg-blur: 20px;
    --lg-saturation: 140%;
    --lg-shadow: 0 16px 70px rgba(0, 0, 0, 0.34);
    --lg-overlay: rgba(255, 255, 255, 0.08);
    --lg-border-angle: 135deg;
    --lg-border-a: 0.18;
    --lg-border-b: 0.48;
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--lg-radius) !important;
    background: transparent !important;
    box-shadow: var(--lg-shadow) !important;
    transform: var(--lg-base-transform, translateZ(0))
        translate3d(var(--lg-pull-x, 0px), var(--lg-pull-y, 0px), 0)
        scaleX(var(--lg-scale-x, 1))
        scaleY(var(--lg-scale-y, 1)) !important;
    transition:
        transform 0.2s ease-out,
        box-shadow 0.2s ease-out,
        background-color 0.2s ease-out !important;
    will-change: auto;
}

.liquid-glass.is-clickable {
    cursor: pointer;
}

.liquid-glass.is-lit,
.liquid-glass.is-hovered,
.liquid-glass.is-pressed {
    will-change: transform;
}

.liquid-glass.is-pressed {
    --lg-scale-x: 0.97;
    --lg-scale-y: 0.97;
}

.liquid-glass__warp,
.liquid-glass__shade,
.liquid-glass__border,
.liquid-glass__hover {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.liquid-glass__warp {
    z-index: 0;
    background: var(--lg-overlay);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
    filter: var(--lg-filter, none);
}

.liquid-glass__shade {
    z-index: 1;
    opacity: var(--lg-dark-opacity, 0);
    background: #000;
    mix-blend-mode: overlay;
}

.liquid-glass__border {
    z-index: 3;
    padding: 1.5px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.5) inset,
        0 1px 3px rgba(255, 255, 255, 0.24) inset,
        0 1px 4px rgba(0, 0, 0, 0.34);
    background:
        linear-gradient(
            var(--lg-border-angle),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, var(--lg-border-a)) 33%,
            rgba(255, 255, 255, var(--lg-border-b)) 66%,
            rgba(255, 255, 255, 0) 100%
        );
}

.liquid-glass__border--screen {
    mix-blend-mode: screen;
    opacity: 0.08;
}

.liquid-glass__border--overlay {
    mix-blend-mode: overlay;
    opacity: 0.16;
}

.liquid-glass__hover {
    z-index: 2;
    opacity: 0;
    mix-blend-mode: overlay;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 62%);
    transition: opacity 0.2s ease-out;
}

.liquid-glass.is-lit .liquid-glass__border--screen,
.liquid-glass.is-hovered .liquid-glass__border--screen {
    opacity: 0.28;
}

.liquid-glass.is-lit .liquid-glass__border--overlay,
.liquid-glass.is-hovered .liquid-glass__border--overlay {
    opacity: 0.78;
}

.liquid-glass.is-lit .liquid-glass__hover,
.liquid-glass.is-hovered .liquid-glass__hover {
    opacity: 0.42;
}

.liquid-glass.is-pressed .liquid-glass__hover {
    opacity: 0.72;
}

.liquid-glass__content {
    position: relative;
    z-index: 4;
    width: 100%;
}

.liquid-glass-button {
    --lg-radius: 100px;
    --lg-blur: 7px;
    --lg-saturation: 130%;
    --lg-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.liquid-glass-button > .liquid-glass__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
    width: auto;
}

.liquid-glass-card {
    --lg-radius: 32px;
    --lg-blur: 20px;
    --lg-saturation: 140%;
    --lg-shadow: 0 16px 70px rgba(0, 0, 0, 0.36);
}

.liquid-glass-nav {
    --lg-radius: 100px;
    --lg-blur: 13px;
    --lg-saturation: 150%;
    --lg-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
}

.liquid-glass-select {
    color: rgba(255, 255, 255, 0.9) !important;
}

.carousel-btn.liquid-glass::before {
    z-index: 5;
}

.liquid-glass-panel {
    --lg-radius: 32px;
    --lg-blur: 18px;
    --lg-saturation: 145%;
    --lg-overlay: rgba(10, 12, 14, 0.22);
}

.liquid-glass-panel .liquid-glass__hover {
    display: none;
}

.liquid-glass-panel .liquid-glass__border--screen {
    opacity: 0.06;
}

.liquid-glass-panel .liquid-glass__border--overlay {
    opacity: 0.1;
}

.liquid-glass-media {
    --lg-radius: 24px;
    --lg-blur: 10px;
    --lg-saturation: 132%;
}

body:not(.index-page) .top-nav.liquid-glass {
    --lg-radius: 32px;
    --lg-blur: 20px;
    --lg-saturation: 140%;
    --lg-shadow: 0 16px 70px rgba(0, 0, 0, 0.34);
    --lg-overlay:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.055) 42%,
            rgba(255, 255, 255, 0.085) 100%
        );
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    border: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: var(--lg-shadow) !important;
}

body:not(.index-page) .top-nav.liquid-glass > .liquid-glass__warp {
    opacity: 1;
}

body:not(.index-page) .top-nav.liquid-glass > .liquid-glass__shade {
    opacity: 0.08;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(0, 0, 0, 0.1) 68%,
            rgba(0, 0, 0, 0.18) 100%
        );
}

body:not(.index-page) .top-nav.liquid-glass > .liquid-glass__border--screen {
    opacity: 0.2;
}

body:not(.index-page) .top-nav.liquid-glass > .liquid-glass__border--overlay {
    opacity: 0.78;
}

body:not(.index-page) .top-nav.liquid-glass > .liquid-glass__hover {
    opacity: 0;
}

body:not(.index-page) .top-nav.liquid-glass > .liquid-glass__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
}

body:not(.index-page) .top-nav .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

body:not(.index-page) .top-nav a,
body:not(.index-page) .top-nav .theme-toggle,
body:not(.index-page) .top-nav .lang-select {
    min-height: 40px;
    border: 0 !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

body:not(.index-page) .top-nav .lang-select,
body:not(.index-page) .top-nav .theme-toggle {
    box-shadow: none !important;
}

body:not(.index-page) .top-nav a.liquid-glass-button,
body:not(.index-page) .top-nav .theme-toggle.liquid-glass-button {
    --lg-radius: 100px;
    --lg-blur: 7.2px;
    --lg-saturation: 130%;
    --lg-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

body:not(.index-page) .top-nav .lang-select {
    border-radius: 100px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
}

body:not(.index-page) .top-nav a:hover,
body:not(.index-page) .top-nav .theme-toggle:hover,
body:not(.index-page) .top-nav .lang-select:hover {
    background: transparent !important;
    color: #ffffff !important;
}

@media (max-width: 900px) and (orientation: portrait) {
    body:not(.index-page) .top-nav.liquid-glass {
        --lg-radius: 28px;
        top: max(12px, env(safe-area-inset-top)) !important;
        bottom: auto !important;
        width: min(88vw, 360px) !important;
        max-width: min(88vw, 360px) !important;
        padding: 8px 9px !important;
        gap: 6px !important;
        overflow: hidden;
    }

    body:not(.index-page) .top-nav.liquid-glass.mobile-bottom {
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    body:not(.index-page) .top-nav.liquid-glass > .liquid-glass__content {
        width: 100%;
        min-width: 0;
        gap: 6px;
        justify-content: space-between;
    }

    body:not(.index-page) .top-nav .nav-links {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1px 2px 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scroll-behavior: smooth;
    }

    body:not(.index-page) .top-nav .nav-links::-webkit-scrollbar {
        display: none;
    }

    body:not(.index-page) .top-nav a.liquid-glass-button {
        flex: 0 0 64px;
        min-width: 64px;
        min-height: 36px;
        padding: 8px 7px;
        font-size: 0.76rem;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        touch-action: pan-x;
    }

    body:not(.index-page) .top-nav .theme-toggle.liquid-glass-button {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    body:not(.index-page) .top-nav .lang-select {
        flex: 0 0 auto;
        max-width: 86px;
        min-height: 36px;
        padding: 8px 28px 8px 9px;
        font-size: 0.68rem;
        background-position:
            calc(100% - 16px) calc(50% - 2px),
            calc(100% - 11px) calc(50% - 2px);
    }
}

@media (max-width: 560px) {
    body:not(.index-page) .top-nav.liquid-glass {
        --lg-radius: 24px;
        width: min(90vw, 328px) !important;
        max-width: min(90vw, 328px) !important;
        padding: 7px 8px !important;
    }

    body:not(.index-page) .top-nav.liquid-glass > .liquid-glass__content {
        gap: 5px;
    }

    body:not(.index-page) .top-nav .nav-links {
        gap: 5px;
    }

    body:not(.index-page) .top-nav a.liquid-glass-button {
        flex-basis: 58px;
        min-width: 58px;
        min-height: 34px;
        padding: 8px 6px;
        font-size: 0.72rem;
    }

    body:not(.index-page) .top-nav .theme-toggle.liquid-glass-button {
        min-height: 34px;
        padding: 8px 9px;
        font-size: 0.68rem;
    }

    body:not(.index-page) .top-nav .lang-select {
        max-width: 80px;
        min-height: 34px;
        padding: 8px 26px 8px 8px;
        font-size: 0.64rem;
    }
}

body:not(.index-page) {
    --legacy-glass-border: rgba(255, 255, 255, 0.13);
    --legacy-glass-border-strong: rgba(255, 255, 255, 0.2);
    --legacy-glass-shadow: 0 18px 72px rgba(0, 0, 0, 0.32);
    --legacy-glass-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.2);
    --legacy-glass-light: rgba(255, 255, 255, 0.16);
    --legacy-glass-light-soft: rgba(255, 255, 255, 0.08);
}

body:not(.index-page) .liquid-glass {
    --lg-radius: 30px;
    --lg-blur: 18px;
    --lg-saturation: 148%;
    --lg-shadow: var(--legacy-glass-shadow);
    --lg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
}

body:not(.index-page) .liquid-glass-panel {
    --lg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
    --lg-shadow: var(--legacy-glass-shadow);
}

body:not(.index-page):not(.light-theme) .hero-panel.liquid-glass,
body:not(.index-page):not(.light-theme) .board.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(112, 145, 255, 0.15), rgba(255, 255, 255, 0.03));
}

body:not(.index-page):not(.light-theme) .section-panel.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(186, 140, 255, 0.14), rgba(255, 255, 255, 0.03));
}

body:not(.index-page):not(.light-theme) .feature-card.liquid-glass,
body:not(.index-page):not(.light-theme) .info-box.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(84, 193, 255, 0.11), rgba(255, 255, 255, 0.03));
}

body:not(.index-page):not(.light-theme) .about-card.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 176, 103, 0.11), rgba(255, 255, 255, 0.03));
}

body:not(.index-page):not(.light-theme) .gallery-card.liquid-glass,
body:not(.index-page):not(.light-theme) .shot-card.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
}

body:not(.index-page):not(.light-theme) .special-thanks-card.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 216, 145, 0.11), rgba(255, 255, 255, 0.03));
}

body:not(.index-page).light-theme .hero-panel.liquid-glass,
body:not(.index-page).light-theme .board.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(222, 235, 255, 0.12));
}

body:not(.index-page).light-theme .section-panel.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(242, 224, 255, 0.11));
}

body:not(.index-page).light-theme .feature-card.liquid-glass,
body:not(.index-page).light-theme .info-box.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(224, 246, 255, 0.11));
}

body:not(.index-page).light-theme .about-card.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 249, 236, 0.36), rgba(255, 228, 197, 0.12));
}

body:not(.index-page).light-theme .gallery-card.liquid-glass,
body:not(.index-page).light-theme .shot-card.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
}

body:not(.index-page).light-theme .special-thanks-card.liquid-glass {
    --lg-overlay: linear-gradient(180deg, rgba(255, 246, 217, 0.36), rgba(255, 231, 181, 0.14));
}

body:not(.index-page) .hero-panel.liquid-glass,
body:not(.index-page) .section-panel.liquid-glass,
body:not(.index-page) .feature-card.liquid-glass,
body:not(.index-page) .info-box.liquid-glass,
body:not(.index-page) .about-card.liquid-glass,
body:not(.index-page) .gallery-card.liquid-glass,
body:not(.index-page) .shot-card.liquid-glass,
body:not(.index-page) .special-thanks-card.liquid-glass,
body:not(.index-page) .card.liquid-glass,
body:not(.index-page) .panel.liquid-glass,
body:not(.index-page) .board.liquid-glass {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--legacy-glass-border) !important;
    border-radius: var(--lg-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--legacy-glass-shadow) !important;
}

body.index-page.android-browser .liquid-glass,
body.index-page.problematic-android-browser .liquid-glass {
    --lg-blur: 0px;
    --lg-saturation: 100%;
    --lg-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    transition: none !important;
    transform: var(--lg-base-transform, translateZ(0)) !important;
    will-change: auto !important;
}

body.index-page.android-browser .liquid-glass__warp,
body.index-page.problematic-android-browser .liquid-glass__warp {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(10, 11, 12, 0.8) !important;
}

body.index-page.android-browser .liquid-glass__hover,
body.index-page.problematic-android-browser .liquid-glass__hover {
    display: none !important;
}

body.index-page.android-browser .liquid-glass.is-lit,
body.index-page.android-browser .liquid-glass.is-hovered,
body.index-page.android-browser .liquid-glass.is-pressed,
body.index-page.problematic-android-browser .liquid-glass.is-lit,
body.index-page.problematic-android-browser .liquid-glass.is-hovered,
body.index-page.problematic-android-browser .liquid-glass.is-pressed {
    transform: var(--lg-base-transform, translateZ(0)) !important;
}

body:not(.index-page) .hero-panel.liquid-glass::before,
body:not(.index-page) .hero-panel.liquid-glass::after,
body:not(.index-page) .section-panel.liquid-glass::before,
body:not(.index-page) .section-panel.liquid-glass::after,
body:not(.index-page) .feature-card.liquid-glass::before,
body:not(.index-page) .feature-card.liquid-glass::after,
body:not(.index-page) .info-box.liquid-glass::before,
body:not(.index-page) .info-box.liquid-glass::after,
body:not(.index-page) .about-card.liquid-glass::before,
body:not(.index-page) .about-card.liquid-glass::after,
body:not(.index-page) .gallery-card.liquid-glass::before,
body:not(.index-page) .gallery-card.liquid-glass::after,
body:not(.index-page) .shot-card.liquid-glass::before,
body:not(.index-page) .shot-card.liquid-glass::after,
body:not(.index-page) .special-thanks-card.liquid-glass::before,
body:not(.index-page) .special-thanks-card.liquid-glass::after,
body:not(.index-page) .card.liquid-glass::before,
body:not(.index-page) .card.liquid-glass::after,
body:not(.index-page) .panel.liquid-glass::before,
body:not(.index-page) .panel.liquid-glass::after,
body:not(.index-page) .board.liquid-glass::before,
body:not(.index-page) .board.liquid-glass::after {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid-glass__warp {
        background: rgba(16, 18, 20, 0.74);
    }
}

@media (prefers-reduced-motion: reduce) {
    .liquid-glass {
        transform: none !important;
        transition: none !important;
    }
}

/* Neutralize the old site palettes so the liquid glass system owns the look. */
body.index-page {
    --bg: #050505 !important;
    --panel: transparent !important;
    --panel-strong: transparent !important;
    --panel-soft: transparent !important;
    --border: rgba(255, 255, 255, 0.12) !important;
    --text: #ffffff !important;
    --muted: rgba(255, 255, 255, 0.74) !important;
    --soft: rgba(255, 255, 255, 0.52) !important;
    --gold: #ffffff !important;
    --bg-color: #050505 !important;
    --accent-yellow: #ffffff !important;
    --accent-cyan: #ffffff !important;
    --accent-red: #ffffff !important;
    --bg-blue: transparent !important;
    --border-blue: rgba(255, 255, 255, 0.12) !important;
    --bg-purple: transparent !important;
    --border-purple: rgba(255, 255, 255, 0.12) !important;
    --text-main: #ffffff !important;
    --char-glow-a: transparent !important;
    --char-glow-b: transparent !important;
    --char-card-top: rgba(255, 255, 255, 0.08) !important;
    --char-card-bottom: rgba(255, 255, 255, 0.02) !important;
    --char-card-base: transparent !important;
    --char-card-border: rgba(255, 255, 255, 0.12) !important;
    --char-card-highlight: transparent !important;
    --char-visual-bg-top: rgba(255, 255, 255, 0.08) !important;
    --char-visual-bg-bottom: rgba(255, 255, 255, 0.02) !important;
    --char-visual-bg-base: transparent !important;
    --char-visual-border: rgba(255, 255, 255, 0.12) !important;
    --char-visual-inner: rgba(255, 255, 255, 0.08) !important;
    --char-tag-top: rgba(255, 255, 255, 0.16) !important;
    --char-tag-bottom: rgba(255, 255, 255, 0.08) !important;
    --char-tag-shadow: rgba(255, 255, 255, 0.08) !important;
    --char-en-stroke: rgba(255, 255, 255, 0.72) !important;
    --mini-accent: rgba(255, 255, 255, 0.44) !important;
}

body.index-page {
    color: #ffffff !important;
}

body.index-page .eyebrow,
body.index-page .section-kicker,
body.index-page .status-label,
body.index-page .status-note,
body.index-page .timeline-card strong,
body.index-page .timeline-card span,
body.index-page .mini-item strong,
body.index-page .mini-item span,
body.index-page .status-item strong,
body.index-page .status-item span,
body.index-page .hero-panel h3,
body.index-page .hero-panel p,
body.index-page .feature-card h3,
body.index-page .feature-card p,
body.index-page .info-box h3,
body.index-page .info-box p,
body.index-page .info-box li,
body.index-page .about-card h3,
body.index-page .about-card p,
body.index-page .about-card li,
body.index-page .gallery-card strong,
body.index-page .gallery-card span,
body.index-page .shot-label strong,
body.index-page .shot-label span,
body.index-page .support-panel-head,
body.index-page .sponsor-name,
body.index-page .sponsor-amount,
body.index-page .sponsor-chip,
body.index-page .subtitle,
body.index-page .tagline,
body.index-page .scroll-hint,
body.index-page .character-name,
body.index-page .character-lead,
body.index-page .character-desc,
body.index-page .character-note,
body.index-page .character-chip,
body.index-page .character-code,
body.index-page .about-mini strong,
body.index-page .about-mini span {
    color: rgba(255, 255, 255, 0.86) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42) !important;
}

body.index-page h1,
body.index-page h2,
body.index-page h3,
body.index-page .punk-font,
body.index-page .hero-title,
body.index-page .title-main,
body.index-page .section-title,
body.index-page .character-name {
    color: #ffffff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45) !important;
}

body.index-page .button,
body.index-page .button-primary,
body.index-page .button-secondary,
body.index-page .hero-link,
body.index-page .hero-link.primary,
body.index-page .hero-link.secondary,
body.index-page .theme-toggle,
body.index-page .top-nav,
body.index-page .top-nav a,
body.index-page .sponsor-chip,
body.index-page .carousel-btn,
body.index-page .mini-glass-box,
body.index-page .tag,
body.index-page .channel-panel a {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
}

body.index-page .card,
body.index-page .panel,
body.index-page .board,
body.index-page .status,
body.index-page .status-card,
body.index-page .status-item,
body.index-page .detail-card,
body.index-page .timeline-wrap,
body.index-page .timeline-card,
body.index-page .mini-card,
body.index-page .hero-panel,
body.index-page .section-panel,
body.index-page .feature-card,
body.index-page .info-box,
body.index-page .about-card,
body.index-page .gallery-card,
body.index-page .shot-card,
body.index-page .sponsor-card,
body.index-page .special-thanks-card,
body.index-page .about-mini,
body.index-page .character-card,
body.index-page .character-visual,
body.index-page .character-note,
body.index-page .character-chip,
body.index-page .character-code {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.index-page .button::before,
body.index-page .button::after,
body.index-page .hero-link::before,
body.index-page .hero-link::after,
body.index-page .hero-panel::before,
body.index-page .hero-panel::after,
body.index-page .feature-card::before,
body.index-page .feature-card::after,
body.index-page .info-box::before,
body.index-page .info-box::after,
body.index-page .about-card::before,
body.index-page .about-card::after,
body.index-page .gallery-card::before,
body.index-page .gallery-card::after,
body.index-page .shot-card::before,
body.index-page .shot-card::after,
body.index-page .sponsor-card::before,
body.index-page .sponsor-card::after,
body.index-page .special-thanks-card::before,
body.index-page .special-thanks-card::after,
body.index-page .about-mini::before,
body.index-page .about-mini::after,
body.index-page .character-card::before,
body.index-page .character-card::after,
body.index-page .character-visual::before,
body.index-page .character-visual::after {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

body.index-page .button:hover,
body.index-page .hero-link:hover,
body.index-page .top-nav a:hover,
body.index-page .theme-toggle:hover,
body.index-page .sponsor-chip:hover,
body.index-page .carousel-btn:hover {
    background: transparent !important;
    color: #ffffff !important;
}

body.index-page .rank-1,
body.index-page .rank-2,
body.index-page .rank-3,
body.index-page .chip-blue,
body.index-page .chip-purple,
body.index-page .chip-gold,
body.index-page .chip-red {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

body.index-page .lang-select {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Keep the index announcement typography tones while leaving surfaces glass-only. */
body.index-page {
    --gold: #d2b16a !important;
    --muted: rgba(255, 255, 255, 0.74) !important;
    --soft: rgba(255, 255, 255, 0.48) !important;
    --text: #ffffff !important;
}

body.index-page .eyebrow,
body.index-page .timeline-time,
body.index-page .side-label,
body.index-page .status-label,
body.index-page .status-note,
body.index-page .section-title,
body.index-page .detail-item strong,
body.index-page .mini-item strong {
    color: var(--gold) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42) !important;
}

body.index-page h1,
body.index-page h2,
body.index-page h3,
body.index-page .timeline-title,
body.index-page .status-item strong {
    color: #ffffff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45) !important;
}

body.index-page .intro,
body.index-page .card p,
body.index-page .detail-item p,
body.index-page .mini-item p,
body.index-page .timeline-copy,
body.index-page .side-copy,
body.index-page .support-copy,
body.index-page .signature,
body.index-page .status-item span {
    color: var(--muted) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.36) !important;
}

body.index-page .tag,
body.index-page .scroll-cue {
    color: rgba(255, 255, 255, 0.82) !important;
}

body.index-page .button-primary {
    color: #fff4dc !important;
}

body.index-page .button-secondary {
    color: #ffffff !important;
}

@media (max-width: 760px) {
    html {
        scroll-behavior: auto !important;
    }

    body.index-page {
        overflow-x: hidden !important;
    }

    body.index-page .bg,
    body.index-page #bg-video {
        filter: none !important;
        -webkit-filter: none !important;
    }

    body.index-page .overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42)) !important;
    }

    body.index-page h1 span,
    body.index-page .mobile-shell p,
    body.index-page .mobile-shell a,
    body.index-page .mobile-shell strong {
        overflow-wrap: anywhere !important;
    }

    body.index-page .mobile-shell,
    body.index-page .mobile-shell .screen,
    body.index-page .mobile-shell .panel,
    body.index-page .mobile-shell .panel-inner,
    body.index-page .mobile-shell .hero-layout,
    body.index-page .mobile-shell .hero-copy,
    body.index-page .mobile-shell .focus-grid,
    body.index-page .mobile-shell .detail-layout,
    body.index-page .mobile-shell .detail-main,
    body.index-page .mobile-shell .detail-side,
    body.index-page .mobile-shell .detail-grid,
    body.index-page .mobile-shell .timeline-grid,
    body.index-page .mobile-shell .card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.index-page .mobile-shell .screen {
        display: block !important;
        overflow-x: hidden !important;
    }

    body.index-page .mobile-shell .panel {
        width: calc(100vw - 32px) !important;
    }

    body.index-page .mobile-shell p,
    body.index-page .mobile-shell a,
    body.index-page .mobile-shell strong {
        word-break: break-word !important;
    }

    body.index-page .mobile-shell h1,
    body.index-page .mobile-shell h1 span,
    body.index-page .mobile-shell p,
    body.index-page .mobile-shell .button,
    body.index-page .mobile-shell .scroll-cue {
        max-width: calc(100vw - 72px) !important;
        white-space: normal !important;
    }

    body.index-page .mobile-shell {
        --panel: rgba(10, 11, 12, 0.74) !important;
        --panel-strong: rgba(8, 9, 10, 0.82) !important;
        --panel-soft: rgba(255, 255, 255, 0.035) !important;
        --border: rgba(255, 255, 255, 0.08) !important;
        --gold: #d2b16a !important;
        --text: #ffffff !important;
        --muted: rgba(255, 255, 255, 0.74) !important;
        --soft: rgba(255, 255, 255, 0.48) !important;
    }

    body.index-page .mobile-shell .panel {
        border: 1px solid var(--border) !important;
        border-radius: 28px !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important,
            rgba(10, 11, 12, 0.82) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
        backdrop-filter: blur(18px) saturate(155%) !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34) !important;
        overflow: hidden !important;
    }

    body.index-page .mobile-shell .liquid-glass {
        overflow: hidden !important;
        overflow: clip !important;
        clip-path: inset(0 round var(--lg-radius)) !important;
        -webkit-clip-path: inset(0 round var(--lg-radius)) !important;
        contain: paint !important;
    }

    body.index-page .mobile-shell .card,
    body.index-page .mobile-shell .panel,
    body.index-page .mobile-shell .board {
        overflow: hidden !important;
        overflow: clip !important;
        contain: paint !important;
    }

    body.index-page .mobile-shell .button {
        min-height: 50px !important;
        border-radius: 999px !important;
        font-weight: 800 !important;
        transform: none !important;
        box-shadow: none !important;
    }

    body.index-page .mobile-shell .button:hover {
        transform: none !important;
    }

    body.index-page .mobile-shell .button-primary {
        background: var(--gold) !important;
        border-color: transparent !important;
        color: #121212 !important;
    }

    body.index-page .mobile-shell .button-secondary {
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: var(--text) !important;
    }

    body.index-page .mobile-shell .tag {
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.03) !important;
        color: rgba(255, 255, 255, 0.82) !important;
    }

    body.index-page .mobile-shell .scroll-cue {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    body.index-page .mobile-shell .eyebrow::before,
    body.index-page .mobile-shell .timeline-card::before,
    body.index-page .mobile-shell .scroll-cue::after {
        background: rgba(210, 177, 106, 0.8) !important;
        box-shadow: none !important;
    }

    body.index-page .mobile-shell .button::before,
    body.index-page .mobile-shell .button::after,
    body.index-page .mobile-shell .card::before,
    body.index-page .mobile-shell .card::after {
        display: none !important;
    }

    body.index-page .scroll-cue {
        animation: none !important;
    }
}