:root {
    --bg-color: #0a192f;
    --nav-bg: rgba(11, 19, 32, 0.7);
    --card-bg: rgba(17, 34, 64, 0.7);
    --border-color: rgba(100, 193, 255, 0.2);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-color: #2563eb;
}

/* Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 90px;
}
a,
button {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

body {
    font-family:
        "Inter",
        "Inter Fallback",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #10254a 0%, #0a192f 45%, #060f1f 100%);
    background-repeat: repeat, no-repeat;

    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}
body > nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    background-color: var(--nav-bg);
    background-image: linear-gradient(180deg, rgba(14, 25, 46, 0.88) 0%, rgba(11, 19, 32, 0.62) 100%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--border-color);
    border-image: linear-gradient(
            90deg,
            rgba(100, 193, 255, 0.05) 0%,
            rgba(96, 165, 250, 0.45) 50%,
            rgba(100, 193, 255, 0.05) 100%
        )
        1;
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.65);

    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}
.nav-toggle {
    display: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: "Poppins", "Poppins Fallback", "Franklin Gothic Medium", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -0.01em;
    user-select: none;
    text-decoration: none;
    color: var(--text-primary);
}

.logo:hover .logo-img {
    filter: drop-shadow(0 0 9px rgba(59, 130, 246, 0.6));
}

.logo-word {
    white-space: nowrap;
}

.text-accent {
    background: linear-gradient(160deg, #60a5fa 10%, #2563eb 65%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-img {
    height: 40px;
    width: auto;
    transition: filter 0.25s ease;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3.5rem;
    padding-bottom: 1.5rem;
    width: 100%;
}

.hero-title {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 3.1rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: 15ch;
    margin: 0.4rem auto 0;
    color: var(--text-primary);
    text-wrap: balance;
}

.tagline {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1.15rem;
    max-width: 54ch;
    margin: 1rem auto 0.45rem;
}

/* Hero buttons */
.cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.btn {
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: "Inter", "Inter Fallback", sans-serif;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition:
        transform 0.15s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:disabled,
.btn:disabled:hover {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary:disabled:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-primary {
    background: linear-gradient(160deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
    color: #ffffff;
    border: 1px solid rgba(96, 165, 250, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-primary:hover {
    background: linear-gradient(160deg, #4f8ef7 0%, #2f6ceb 55%, #2450dc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* must come after .btn so its padding wins the cascade */
.btn-pill {
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    font-size: 0.95rem;
}

.section-title {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
}

.section-subtitle {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.video-hold {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

/* 16:9 wrapper so the video scales with the screen */
.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    background-color: var(--card-bg);
}
.video-frame > iframe,
.video-frame > video,
.video-frame > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

footer {
    text-align: center;
    padding: 3.5rem 2rem 3rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

footer p {
    font-size: 0.8rem;
    line-height: 1.7;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
}

.socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.9rem;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.social-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.social-discord {
    background-color: #5865f2;
}
.social-discord:hover {
    box-shadow: 0 6px 18px rgba(88, 101, 242, 0.5);
}

.social-youtube {
    background-color: #ff0000;
}
.social-youtube:hover {
    box-shadow: 0 6px 18px rgba(255, 0, 0, 0.45);
}

/* Footer game row */

.footer-games {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem 1.8rem;
    max-width: 700px;
    margin: 0 auto 1.35rem;
}

.footer-games a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.55rem 0;
}

.footer-games a:hover {
    color: #93c5fd;
}

.footer-links {
    position: relative; /* anchors the divider below */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.75rem;
    max-width: 460px;
    margin: 0 auto 1.8rem;
    padding: 1.4rem 0 0;
}

.footer-links::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 240px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(96, 165, 250, 0),
        rgba(96, 165, 250, 0.32),
        rgba(96, 165, 250, 0)
    );
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    padding: 0.5rem 0;
}

.footer-links a:hover {
    color: var(--text-primary);
}

/* One shared grid for card layouts */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 5rem;
}
.pack-grid-inline {
    padding-bottom: 0;
    gap: 1rem;
}

/* Contact cards */
.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 260px;
    padding: 2rem 1.5rem 1.75rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.15s ease,
        border-color 0.2s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
}

.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #ffffff;
    margin-bottom: 1rem;
}

.contact-icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}
.contact-card h2 {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.contact-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0.5rem 0 1.5rem;
}
.contact-action {
    display: inline-block;
    margin-top: auto;
    padding: 0.55rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #ffffff;
}

.contact-discord .contact-icon,
.contact-discord .contact-action {
    background-color: #5865f2;
}
.contact-discord:hover {
    border-color: rgba(88, 101, 242, 0.65);
}

.contact-youtube .contact-icon,
.contact-youtube .contact-action {
    background-color: #ff0000;
}
.contact-youtube:hover {
    border-color: rgba(255, 0, 0, 0.55);
}

/* The nav folds into the menu button below 1061px, where the full row of
   links (and a logged-in name) no longer fits beside the logo. */
@media (max-width: 1060px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-primary);
        cursor: pointer;
    }

    .nav-toggle svg {
        width: 22px;
        height: 22px;
    }

    .nav-toggle .icon-close {
        display: none;
    }
    nav.nav-open .icon-menu {
        display: none;
    }
    nav.nav-open .icon-close {
        display: block;
    }
    .nav-actions {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.75rem 1rem 1rem;
        background-color: #09101c;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.6);
    }

    nav.nav-open .nav-actions {
        display: flex;
        animation: menu-drop 0.2s ease;
    }

    @keyframes menu-drop {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }
    }

    /* bigger tap targets */
    .nav-actions .nav-link {
        padding: 0.65rem 0.25rem;
        font-size: 1.05rem;
    }

    /* No hover underline on touch */
    .nav-actions .nav-link::after {
        display: none;
    }

    .nav-actions .btn-pill {
        text-align: center;
        margin-top: 0.35rem;
    }
}
/* Tablets: the open menu is a card under the button, not a full-width sheet. */
@media (min-width: 601px) and (max-width: 1060px) {
    .nav-actions {
        left: auto;
        right: 1.25rem;
        top: calc(100% + 0.5rem);
        width: 300px;
        border: 1px solid var(--border-color);
        border-radius: 16px;
    }
}
/* Phones */
@media (max-width: 600px) {
    body > nav {
        padding: 0.75rem 1rem;
    }
    .logo {
        font-size: 1.4rem;
    }
    .section-title {
        font-size: 1.75rem;
    }
}

/* Account button and menu (logged in) */
.nav-account {
    position: relative;
}
.nav-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 40px;
    padding: 0 0.7rem 0 0.3rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}
.nav-account-btn:hover,
.nav-account.is-open .nav-account-btn {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.08);
}
.nav-account-btn:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
}
.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(160deg, #2b5bd7, #173a8f);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.35);
    color: #ffffff;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}
.nav-account.is-supporter .nav-avatar {
    box-shadow:
        inset 0 0 0 1px rgba(147, 197, 253, 0.35),
        0 0 0 2px #0b1426,
        0 0 0 3.5px rgba(255, 215, 0, 0.7);
}
.nav-account-btn .nav-username {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-chev {
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}
.nav-account.is-open .nav-chev {
    transform: rotate(180deg);
}
.nav-account-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    width: 250px;
    padding: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #0a1222;
    box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        visibility 0s linear 0.16s;
}
.nav-account.is-open .nav-account-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}
.nav-menu-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.65rem 0.75rem;
}
.nav-menu-head .nav-avatar {
    width: 38px;
    height: 38px;
    font-size: 1rem;
}
.nav-menu-who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
}
.nav-menu-who .nav-username {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
}
.nav-menu-vigor {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0.15rem 0.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 11px;
    background: rgba(96, 165, 250, 0.07);
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.nav-menu-vigor[hidden] {
    display: none;
}
.nav-menu-vigor:hover {
    border-color: rgba(147, 197, 253, 0.55);
}
.nav-menu-vigor svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: #7cc0ff;
}
.nav-menu-vigor b {
    color: var(--text-primary);
    font-weight: 600;
}
.nav-menu-top {
    margin-left: auto;
    color: #93c5fd;
    font-size: 0.82rem;
    font-weight: 600;
}
.nav-menu-item {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}
.nav-menu-item:hover,
.nav-menu-item:focus-visible {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-primary);
    outline: none;
}
.nav-logout {
    margin-top: 0.3rem;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 9px 9px;
    padding-top: 0.75rem;
}

/* In the folded menu the account section shows open, at the top. */
@media (max-width: 1060px) {
    .nav-actions .nav-account {
        order: -1;
        margin-bottom: 0.35rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--border-color);
    }
    .nav-account-btn {
        display: none;
    }
    .nav-account-menu {
        position: static;
        width: auto;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .nav-menu-head {
        padding: 0.5rem 0.25rem 0.7rem;
    }
    .nav-menu-vigor {
        margin: 0 0 0.25rem;
    }
    .nav-menu-item {
        padding: 0.65rem 0.25rem;
        font-size: 1.05rem;
    }
    .nav-logout {
        margin-top: 0;
        border-top: 0;
        padding-top: 0.65rem;
    }
}

/* Vigor Station and supporter pages */

.nav-link {
    position: relative;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.35rem 0.1rem;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.page-head {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 0 2.5rem;
}

.page-title {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--accent-color);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .page-title {
        width: fit-content;
        padding-bottom: 0.08em;
        background: linear-gradient(100deg, #bfe0ff 0%, #6cb8ff 40%, #2f73e6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.page-subtitle {
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-size: 1.05rem;
}

/* 404 page */
.nf-head {
    padding-bottom: 2rem;
    text-align: center;
}
.nf-head .page-title {
    margin-left: auto;
    margin-right: auto;
}
.nf-code {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: clamp(5rem, 16vw, 8.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(160deg, #93c5fd 10%, #3b82f6 55%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 30px rgba(37, 99, 235, 0.35));
}
.nf-dialogue {
    max-width: 640px;
}
.nf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 2.25rem 0 3.5rem;
}
.nf-strip {
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .nf-actions {
        flex-direction: column;
        width: 100%;
    }
}

.back-link {
    display: inline-block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.back-link:hover {
    color: var(--accent-color);
}

.vigor-balance {
    display: none;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    margin-top: 1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.07);
    color: var(--text-secondary);
    font-size: 0.95rem;
}

html.has-session .vigor-balance {
    display: inline-flex;
    visibility: hidden;
}

html.has-session .vigor-balance.ready {
    visibility: visible;
}
html.has-session .vigor-balance[hidden],
.vigor-balance[hidden] {
    display: none;
}

.vigor-balance svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #7cc0ff;
}

.vigor-balance b {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Account page (profile.html) */
.acct-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: center;
    gap: 3rem;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 4.5rem 0 4rem;
}
.acct-hero-copy {
    position: relative;
}

/* Avatar */
.acct-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 1.4rem;
    border-radius: 50%;
    background: linear-gradient(160deg, #2b5bd7, #173a8f);
    box-shadow:
        inset 0 0 0 1px rgba(147, 197, 253, 0.4),
        0 14px 40px -12px rgba(59, 130, 246, 0.8);
    color: #ffffff;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
}
.acct-avatar::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(147, 197, 253, 0) 0deg, rgba(147, 197, 253, 0.9) 80deg, rgba(147, 197, 253, 0) 160deg, rgba(147, 197, 253, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    will-change: transform;
    animation: au-spin 6s linear infinite;
}
.acct-avatar::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid rgba(147, 197, 253, 0.18);
}
.acct-hero.is-supporter .acct-avatar::before {
    background: conic-gradient(from 0deg, rgba(255, 215, 0, 0) 0deg, #ffd700 80deg, rgba(255, 215, 0, 0) 160deg, rgba(255, 215, 0, 0) 360deg);
}
.acct-hero.is-supporter .acct-avatar::after {
    border-color: rgba(255, 215, 0, 0.3);
}

.acct-hello {
    color: var(--text-secondary);
    font-size: 1.2rem;
}
.acct-name {
    margin-top: 0.15rem;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #8fc7ff;
    overflow-wrap: anywhere;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .acct-name {
        width: fit-content;
        max-width: 100%;
        padding-bottom: 0.08em;
        background: linear-gradient(100deg, #e0f0ff 0%, #8fc7ff 35%, #3b82f6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .acct-hero.is-supporter .acct-name {
        background: linear-gradient(100deg, #fff6d1 0%, #ffd94d 45%, #e0a400 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
}
.acct-tier {
    margin-top: 0.7rem;
    color: var(--text-secondary);
    font-size: 1rem;
}
.acct-tier .nav-badge {
    font-size: 0.72rem;
    padding: 0.25rem 0.7rem;
}
.acct-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

/* Vigor vault */
.acct-vault {
    position: relative;
    padding: 2.4rem 2rem 2rem;
    border-radius: 24px;
    border: 1px solid rgba(96, 165, 250, 0.32);
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(59, 130, 246, 0.22), transparent 70%),
        linear-gradient(180deg, rgba(16, 30, 64, 0.92), rgba(7, 13, 32, 0.95));
    box-shadow:
        0 30px 70px -30px rgba(37, 99, 235, 0.7),
        inset 0 1px 0 rgba(191, 219, 254, 0.08);
    text-align: center;
    overflow: hidden;
}
.acct-vault::before {
    content: "";
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #60a5fa, transparent);
    opacity: 0.8;
}
.acct-vault-gem {
    position: relative;
    width: 92px;
    height: 101px;
    margin: 0 auto;
    animation: acct-float 5s ease-in-out infinite;
}
.acct-vault-gem::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 220px;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.42) 0%, rgba(59, 130, 246, 0) 65%);
    z-index: -1;
}
.acct-vault-gem svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 22px rgba(40, 107, 255, 0.55));
}
.acct-glint {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0, 95% 50%, 50% 100%, 5% 50%);
    overflow: hidden;
}
.acct-glint::before {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: translateX(-160%) skewX(-12deg);
    animation: acct-glint 4.5s ease-in-out infinite;
}
@keyframes acct-float {
    50% {
        transform: translateY(-8px);
    }
}
@keyframes acct-glint {
    0%, 55% {
        transform: translateX(-160%) skewX(-12deg);
    }
    80%, 100% {
        transform: translateX(320%) skewX(-12deg);
    }
}
.acct-vault-label {
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.acct-vault-num {
    margin-top: 0.2rem;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 3.3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.acct-vault-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 1.1rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    list-style: none;
}
.acct-vault-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
}
.acct-vault-facts li::before {
    content: "";
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / 13px 13px no-repeat;
}

.acct-core {
    position: relative;
    width: 200px;
    height: 150px;
    margin: -0.4rem auto 0;
}
.acct-core .acct-vault-gem {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -46px;
}
.acct-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 190px;
    margin: -95px 0 0 -95px;
    border-radius: 50%;
    border: 1px solid rgba(147, 197, 253, 0.22);
    transform: rotateX(74deg) rotateZ(0deg);
    animation: acct-orbit 9s linear infinite;
}
.acct-ring i {
    position: absolute;
    left: 50%;
    top: -4px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: #bfdbfe;
    box-shadow: 0 0 12px 3px rgba(96, 165, 250, 0.8);
}
.acct-ring-b {
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-color: rgba(147, 197, 253, 0.14);
    transform: rotateX(70deg) rotateY(-24deg) rotateZ(0deg);
    animation-name: acct-orbit-b;
    animation-duration: 6.5s;
    animation-direction: reverse;
}
.acct-ring-b i {
    width: 6px;
    height: 6px;
    margin-left: -3px;
    top: -3px;
}
@keyframes acct-orbit {
    to {
        transform: rotateX(74deg) rotateZ(360deg);
    }
}
@keyframes acct-orbit-b {
    to {
        transform: rotateX(70deg) rotateY(-24deg) rotateZ(360deg);
    }
}
.acct-pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 1.5px solid rgba(96, 165, 250, 0.55);
    opacity: 0;
    animation: acct-pulse 3.6s ease-out infinite;
}
.acct-pulse-b {
    animation-delay: 1.8s;
}
@keyframes acct-pulse {
    0% {
        opacity: 0.7;
        transform: scale(0.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}
.acct-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.acct-sparks i {
    position: absolute;
    left: var(--x);
    bottom: -6px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #bfdbfe;
    box-shadow: 0 0 8px rgba(147, 197, 253, 0.9);
    opacity: 0;
    animation: acct-spark var(--t) linear var(--d) infinite;
}
@keyframes acct-spark {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    15% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(-340px);
    }
}
.acct-vault > :not(.acct-sparks) {
    position: relative;
}
.acct-vault-num.is-done {
    animation: acct-num 0.9s ease-out;
}
@keyframes acct-num {
    0% {
        text-shadow: 0 0 0 rgba(147, 197, 253, 0);
    }
    35% {
        text-shadow: 0 0 28px rgba(147, 197, 253, 0.85);
    }
    100% {
        text-shadow: 0 0 0 rgba(147, 197, 253, 0);
    }
}
/* Low balance */
.acct-low {
    display: none;
    margin-top: 0.9rem;
    color: #fbbf24;
    font-size: 0.88rem;
    font-weight: 500;
}
.acct-vault.is-low .acct-low {
    display: block;
}
.acct-vault.is-low .acct-vault-num {
    color: #fde68a;
}
.acct-vault.is-low {
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: 0 30px 70px -30px rgba(245, 158, 11, 0.55);
}
.acct-vault.is-low::before {
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
}
.acct-vault.is-low .acct-pulse {
    border-color: rgba(251, 191, 36, 0.6);
}
.acct-core {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.acct-core.is-pop .acct-vault-gem svg {
    animation: acct-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes acct-pop {
    40% {
        transform: scale(1.18);
    }
}
.acct-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 14px 4px rgba(96, 165, 250, 0.95);
    pointer-events: none;
    animation: acct-burst 1s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}
.acct-burst.is-gem {
    width: 13px;
    height: 15px;
    margin: -7px 0 0 -6px;
    border-radius: 0;
    background: linear-gradient(180deg, #93c5fd, #2563eb);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    box-shadow: none;
}
@keyframes acct-burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.6);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r, 0deg));
    }
}

/* Quick packs */
.acct-packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.acct-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.8rem 0.4rem 0.7rem;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(5, 10, 28, 0.55);
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.2s ease,
        transform 0.15s ease,
        background-color 0.2s ease;
}
.acct-pack svg {
    width: 18px;
    height: 20px;
    margin-bottom: 0.2rem;
}
.acct-pack b {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
}
.acct-pack span {
    color: var(--text-secondary);
    font-size: 0.8rem;
}
/* The price and the "→ new balance" line swap on hover; a fixed height
   keeps the card from growing (the arrow comes from a taller system font). */
.acct-pack > span:not(.acct-pack-tag),
.acct-pack-after {
    height: 1.1rem;
    line-height: 1.1rem;
}
.acct-pack-after {
    display: none;
    color: #93c5fd;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
    .acct-pack:hover .acct-pack-after:not(:empty),
    .acct-pack:focus-visible .acct-pack-after:not(:empty) {
        display: block;
    }
    .acct-pack:hover:has(.acct-pack-after:not(:empty)) > span:not(.acct-pack-tag),
    .acct-pack:focus-visible:has(.acct-pack-after:not(:empty)) > span:not(.acct-pack-tag) {
        display: none;
    }
}
.acct-pack:hover {
    transform: translateY(-2px);
    border-color: rgba(147, 197, 253, 0.7);
    background: rgba(37, 99, 235, 0.14);
}
.acct-pack .acct-pack-tag {
    position: absolute;
    top: -8px;
    left: 50%;
    translate: -50% 0;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Supporter hero */
.acct-hero.is-supporter .au-a {
    background: radial-gradient(closest-side, rgba(234, 179, 8, 0.45), rgba(234, 179, 8, 0));
}
.acct-hero.is-supporter .au-c {
    background: radial-gradient(closest-side, rgba(251, 146, 60, 0.28), rgba(251, 146, 60, 0));
}
.acct-hero.is-supporter .au-ring {
    stroke: #fcd34d;
}
.acct-hero.is-supporter .au-ring circle[fill] {
    fill: #fde68a;
}

/* Reach up under the fixed top bar. */
.acct-hero .hero-aurora {
    top: -64px;
}
/* The back button sits above this hero, so the glow starts higher and fades in rather than ending
   in a hard edge. */
.sx-hero .hero-aurora {
    top: -170px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 72%, transparent 100%);
}

.acct-sec {
    padding-top: 4rem;
}
.acct-sec-last {
    padding-bottom: 5rem;
}

/* Membership card and perks */
.acct-member {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
}
.acct-cardside {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.acct-cardwrap {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    perspective: 1100px;
}
.acct-cardwrap:focus-visible {
    outline: none;
}
.acct-cardwrap:focus-visible .acct-holo {
    outline: 2px solid #93c5fd;
    outline-offset: 4px;
}
.acct-float {
    display: block;
    transform-style: preserve-3d;
    animation: acct-holo-float 7s ease-in-out infinite;
}
.acct-flip {
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1);
}
/* Mouse tilt (index.js wraps .acct-flip in .acct-tilt and sets --rx/--ry,
   and --gx/--gy for the shine) */
.acct-tilt {
    display: block;
    transform-style: preserve-3d;
    transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acct-cardwrap.is-tilting .acct-tilt {
    transition: transform 0.12s ease-out;
}
.acct-cardwrap.is-tilting .acct-float {
    animation-play-state: paused;
}
.acct-holo {
    --glare-tint: rgba(165, 205, 255, 0.22);
}
.acct-supporter .acct-holo,
.sx .acct-holo {
    --glare-tint: rgba(255, 226, 140, 0.3);
}
.acct-holo-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.28), transparent 42%),
        linear-gradient(
            115deg,
            transparent calc(var(--gx, 50%) - 32%),
            var(--glare-tint) var(--gx, 50%),
            transparent calc(var(--gx, 50%) + 32%)
        );
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
/* The back is turned around, so its shine runs the other way */
.acct-holo-back .acct-holo-glare {
    background:
        radial-gradient(circle at calc(100% - var(--gx, 50%)) var(--gy, 50%), rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(
            65deg,
            transparent calc(68% - var(--gx, 50%)),
            var(--glare-tint) calc(100% - var(--gx, 50%)),
            transparent calc(132% - var(--gx, 50%))
        );
}
.acct-cardwrap.is-tilting .acct-holo-glare {
    opacity: 1;
}

.acct-cardwrap.is-flipped .acct-flip {
    transform: rotateY(180deg);
}
.acct-flip > .acct-holo {
    grid-area: 1 / 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.acct-holo-back {
    transform: rotateY(180deg);
}
.acct-card-hint {
    margin-top: 1.1rem;
    color: #64748b;
    font-size: 0.8rem;
}
/* Card back */
.acct-holo-stripe {
    position: absolute;
    left: 0;
    right: 0;
    top: 14%;
    height: 19%;
    background: linear-gradient(180deg, #05070d, #11151f);
}
.acct-holo-sign {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 29%;
    height: 2.4rem;
    padding: 0 0.9rem;
    border-radius: 6px;
    background:
        repeating-linear-gradient(135deg, #e2e8f0 0 6px, #cbd5e1 6px 7px);
}
.acct-holo-sign i {
    color: #1e293b;
    font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acct-holo-back-text {
    position: relative;
    display: block;
    margin-top: 0.9rem;
    color: rgba(226, 232, 240, 0.75);
    font-size: 0.8rem;
    line-height: 1.5;
}
.acct-holo-url {
    position: relative;
    display: block;
    margin-top: auto;
    align-self: flex-end;
    color: rgba(226, 232, 240, 0.45);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}
.acct-supporter .acct-holo-back-text {
    color: rgba(255, 243, 196, 0.8);
}
.acct-holo {
    position: relative;
    aspect-ratio: 1.586;
    padding: 1.4rem 1.5rem;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(96, 165, 250, 0.35), transparent 55%),
        linear-gradient(135deg, #1b2c55 0%, #0d1631 55%, #0a1026 100%);
    border: 1px solid rgba(147, 197, 253, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.25),
        0 28px 50px -26px rgba(0, 0, 0, 0.7);
}
@keyframes acct-holo-float {
    0%, 100% {
        transform: rotateY(-14deg) rotateX(8deg) translateY(0);
    }
    50% {
        transform: rotateY(-8deg) rotateX(5deg) translateY(-8px);
    }
}
.acct-holo-foil {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, 0.025) 14px 15px),
        radial-gradient(70% 60% at 80% 15%, rgba(167, 139, 250, 0.16), transparent 70%),
        linear-gradient(115deg, transparent 35%, rgba(45, 212, 191, 0.1) 50%, transparent 65%);
    mix-blend-mode: screen;
    pointer-events: none;
}
.acct-holo-sheen {
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: 0;
    width: 35%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: translateX(-180%) rotate(8deg);
    animation: acct-sheen 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes acct-sheen {
    0%, 60% {
        transform: translateX(-180%) rotate(8deg);
    }
    85%, 100% {
        transform: translateX(420%) rotate(8deg);
    }
}
.acct-holo > :not(.acct-holo-foil):not(.acct-holo-sheen):not(.acct-holo-stripe):not(.acct-holo-glare) {
    position: relative;
}
.acct-holo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.acct-holo-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}
.acct-holo-crown {
    width: 30px;
    height: 30px;
    opacity: 0.35;
    filter: grayscale(1);
}
.acct-holo-chip {
    display: block;
    width: 46px;
    height: 34px;
    margin-top: 1.4rem;
    border-radius: 7px;
    background:
        linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.25) 31% 33%, transparent 34% 66%, rgba(0, 0, 0, 0.25) 67% 69%, transparent 70%),
        linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, 0.25) 46% 54%, transparent 55%),
        linear-gradient(135deg, #cbd5e1, #64748b);
    opacity: 0.8;
}
.acct-holo-name {
    display: block;
    margin-top: auto;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e2e8f0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acct-holo-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
}
.acct-holo-foot span {
    display: flex;
    flex-direction: column;
}
.acct-holo-r {
    text-align: right;
}
.acct-holo-foot small {
    color: rgba(226, 232, 240, 0.55);
    font-size: 0.68rem;
}
.acct-holo-foot b {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
}
/* Supporter card */
.acct-supporter .acct-holo {
    background:
        radial-gradient(110% 80% at 0% 0%, rgba(255, 228, 120, 0.4), transparent 60%),
        linear-gradient(135deg, #6b4f0e 0%, #3d2d07 48%, #241a04 100%);
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 200, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.25),
        0 28px 50px -26px rgba(0, 0, 0, 0.7),
        0 18px 60px -30px rgba(255, 200, 0, 0.5);
}
.acct-supporter .acct-holo-foil {
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 240, 180, 0.04) 14px 15px),
        radial-gradient(70% 60% at 80% 15%, rgba(255, 245, 200, 0.16), transparent 70%),
        linear-gradient(115deg, transparent 35%, rgba(255, 236, 160, 0.12) 50%, transparent 65%);
}
.acct-supporter .acct-holo-crown {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
}
.acct-supporter .acct-holo-chip {
    background:
        linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.25) 31% 33%, transparent 34% 66%, rgba(0, 0, 0, 0.25) 67% 69%, transparent 70%),
        linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, 0.25) 46% 54%, transparent 55%),
        linear-gradient(135deg, #fff1a8, #c99700);
}
.acct-supporter .acct-holo-name {
    color: #fff3c4;
}
.acct-supporter .acct-holo-foot b {
    color: #ffe066;
}

/* Perks */
.acct-perks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    list-style: none;
}
.acct-perk {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.12);
    background: linear-gradient(180deg, rgba(14, 24, 52, 0.85), rgba(7, 12, 30, 0.9));
    transition:
        border-color 0.25s ease,
        transform 0.2s ease;
}
.acct-perk:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.4);
}
.acct-perk-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: radial-gradient(circle at 35% 30%, #3a2d0a 0%, #1b1505 75%);
}
.acct-perk-tile svg {
    width: 21px;
    height: 21px;
}
.acct-perk-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.acct-perk-text b {
    color: var(--text-primary);
    font-size: 0.93rem;
    font-weight: 600;
}
.acct-perk-text span {
    margin-top: 0.1rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}
.acct-perk-state {
    display: none;
}
.acct-supporter .acct-perk-state {
    display: block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
    font-size: 0;
}
.acct-supporter .acct-perk {
    border-color: rgba(255, 215, 0, 0.22);
}
.acct-member-side .acct-gold {
    margin-top: 1.25rem;
}
.acct-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 52px;
    padding: 0 1.7rem 0 1.4rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe066, #ffd000);
    box-shadow: 0 10px 30px -10px rgba(255, 208, 0, 0.6);
    color: #1d1500;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease;
}
.acct-gold svg {
    width: 20px;
    height: 20px;
    filter: brightness(0.35);
}
.acct-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px -10px rgba(255, 208, 0, 0.8);
}
.acct-gold:focus-visible {
    outline: 2px solid #fde68a;
    outline-offset: 3px;
}
.acct-supporter .acct-gold {
    background: linear-gradient(180deg, #0b1836, #08112a);
    border: 1px solid rgba(255, 215, 0, 0.45);
    box-shadow: none;
    color: #ffffff;
}
.acct-supporter .acct-gold svg {
    filter: none;
}
.acct-supporter .acct-gold:hover {
    border-color: rgba(255, 215, 0, 0.85);
}

/* Account links */
.acct-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.55rem;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(14, 24, 52, 0.88), rgba(7, 12, 30, 0.92));
}
.acct-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 0.9rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease;
}
.acct-row:hover,
.acct-row:focus-visible {
    background: rgba(96, 165, 250, 0.08);
    outline: none;
}
.acct-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(37, 99, 235, 0.12);
    color: #60a5fa;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}
.acct-row-icon svg {
    width: 20px;
    height: 20px;
}
.acct-row-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.acct-row-name {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}
.acct-row-desc {
    margin-top: 0.1rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
}
.acct-chev {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #64748b;
    transition:
        transform 0.2s ease,
        color 0.2s ease;
}
.acct-row:hover .acct-chev {
    color: #93c5fd;
    transform: translateX(3px);
}
.acct-row-out:hover {
    background: rgba(248, 113, 113, 0.08);
}
.acct-row-out:hover .acct-row-icon {
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}
.acct-row-out:hover .acct-chev {
    color: #fca5a5;
}

/* Vigor calculator */
.acct-calc {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    padding: 2rem 2.1rem;
    border-radius: 24px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background:
        radial-gradient(70% 90% at 0% 0%, rgba(59, 130, 246, 0.2), transparent 60%),
        radial-gradient(60% 80% at 100% 100%, rgba(45, 212, 191, 0.1), transparent 60%),
        linear-gradient(180deg, rgba(14, 24, 52, 0.9), rgba(7, 12, 30, 0.93));
    box-shadow: 0 30px 70px -35px rgba(37, 99, 235, 0.6);
    overflow: hidden;
}
.acct-calc::before {
    content: "";
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #60a5fa, #2dd4bf, transparent);
    opacity: 0.8;
}
.acct-calc-k {
    display: block;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.acct-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0.7rem 0 1.4rem;
}
.acct-tier-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(5, 10, 28, 0.5);
    color: #94a3b8;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.acct-tier-btn b {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 600;
}
.acct-tier-btn small {
    font-size: 0.7rem;
    line-height: 1.3;
}
.acct-tier-btn:hover {
    border-color: rgba(147, 197, 253, 0.5);
}
.acct-tier-btn.is-on {
    border-color: #60a5fa;
    background: rgba(37, 99, 235, 0.2);
    color: #bfdbfe;
    transform: translateY(-2px);
}
.acct-tier-btn:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}
.acct-calc-k2 {
    margin-top: 0.2rem;
}
.acct-calc-big b.is-swap {
    animation: acct-bump 0.35s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.acct-range {
    margin-top: 0.75rem;
}
.acct-range-bar {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}
.acct-range-bar i {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #2dd4bf);
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.5);
}
.acct-range-bar::before,
.acct-range-bar::after {
    content: "";
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid #0b1430;
    background: #ffffff;
}
.acct-range-bar::before {
    left: -2px;
}
.acct-range-bar::after {
    right: -2px;
}
.acct-range-ends {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.74rem;
}
.acct-calc-big {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.3rem;
}
.acct-calc-big b {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, #e0f0ff, #8fc7ff 45%, #2dd4bf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.acct-calc-big span {
    color: #cbd5e1;
    font-size: 1.1rem;
    font-weight: 600;
}
.acct-calc-note {
    margin-top: 1rem;
    max-width: none;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.55;
}
.acct-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.acct-preset {
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(5, 10, 28, 0.5);
    color: #94a3b8;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.acct-preset:hover {
    color: #e2e8f0;
    border-color: rgba(147, 197, 253, 0.5);
}
.acct-preset.is-on {
    color: #ffffff;
    border-color: #60a5fa;
    background: rgba(37, 99, 235, 0.22);
    transform: translateY(-2px);
}
.acct-preset:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}
.acct-slider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.1rem;
}
.acct-slider input {
    --p: 8%;
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #2dd4bf) 0 0 / var(--p) 100% no-repeat, rgba(148, 163, 184, 0.16);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.acct-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid #0b1430;
    background: #ffffff;
    box-shadow: 0 0 0 3px #60a5fa, 0 0 16px rgba(96, 165, 250, 0.8);
    transition: transform 0.15s ease;
}
.acct-slider input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #0b1430;
    background: #ffffff;
    box-shadow: 0 0 0 3px #60a5fa, 0 0 16px rgba(96, 165, 250, 0.8);
}
.acct-slider input:active::-webkit-slider-thumb {
    transform: scale(1.18);
}
.acct-slider input:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 6px;
}
.acct-slider output {
    flex-shrink: 0;
    min-width: 9.5rem;
    color: #cbd5e1;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.acct-lasts {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.3rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    border: 1px solid rgba(45, 212, 191, 0.35);
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(5, 10, 28, 0.6));
}
.acct-lasts-text {
    display: flex;
    flex-direction: column;
}
.acct-lasts-text small {
    color: #94a3b8;
    font-size: 0.78rem;
}
.acct-lasts-text b {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
}
.acct-lasts.is-bump .acct-lasts-text b {
    animation: acct-bump 0.35s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes acct-bump {
    50% {
        transform: scale(1.06);
        color: #99f6e4;
    }
}
/* Hourglass; index.js shortens --g as the reply rate goes up */
.acct-hourglass {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 42px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 2h22M4 40h22M6 2c0 10 9 12 9 19S6 30 6 40M24 2c0 10-9 12-9 19s9 9 9 19'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: acct-flipglass var(--g, 4s) ease-in-out infinite;
}
.acct-hourglass::before,
.acct-hourglass::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 12px;
    translate: -50% 0;
    background: #2dd4bf;
    opacity: 0.85;
}
.acct-hourglass::before {
    top: 6px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: 50% 100%;
    animation: acct-sand-top var(--g, 4s) linear infinite;
}
.acct-hourglass::after {
    bottom: 5px;
    height: 10px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform-origin: 50% 100%;
    animation: acct-sand-bot var(--g, 4s) linear infinite;
}
.acct-hourglass i {
    position: absolute;
    left: 50%;
    top: 17px;
    width: 2px;
    height: 13px;
    margin-left: -1px;
    background: #2dd4bf;
    animation: acct-sand-fall var(--g, 4s) linear infinite;
}
@keyframes acct-sand-top {
    0% {
        transform: scaleY(1);
    }
    85%, 100% {
        transform: scaleY(0);
    }
}
@keyframes acct-sand-bot {
    0% {
        transform: scaleY(0);
    }
    85%, 100% {
        transform: scaleY(1);
    }
}
@keyframes acct-sand-fall {
    0%, 85% {
        opacity: 1;
    }
    88%, 100% {
        opacity: 0;
    }
}
@keyframes acct-flipglass {
    0%, 88% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(180deg);
    }
}
@media (max-width: 860px) {
    .acct-calc {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        padding: 1.6rem 1.4rem;
    }
    .acct-calc-big b {
        font-size: 1.9rem;
    }
    .acct-tier-btn small {
        display: none;
    }
}

/* Supporter welcome */
.acct-confetti {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    overflow: hidden;
}
.acct-confetti i {
    position: absolute;
    top: -20px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    animation: acct-fall var(--t) cubic-bezier(0.3, 0.4, 0.6, 1) var(--d) forwards;
}
@keyframes acct-fall {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        opacity: 0.9;
        transform: translate(var(--dx), 110vh) rotate(var(--r));
    }
}
.acct-welcome {
    position: fixed;
    left: 50%;
    top: 92px;
    z-index: 201;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    background: #1a1404;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.7), 0 0 30px -8px rgba(255, 215, 0, 0.5);
    color: #fff3c4;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    translate: -50% 0;
    animation: acct-welcome 4.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    pointer-events: none;
}
.acct-welcome svg {
    width: 20px;
    height: 20px;
}
@keyframes acct-welcome {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.9);
    }
    10%, 82% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .acct-hourglass,
    .acct-hourglass::before,
    .acct-hourglass::after,
    .acct-hourglass i,
    .acct-lasts.is-bump .acct-lasts-text b {
        animation: none;
    }
}

/* Supporter page (supporter.html) */
@property --sx-back-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
.sx .sx-back {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: fit-content;
    max-width: 100%;
    margin: 2rem 0 0 max(0px, calc((100% - 1040px) / 2));
    padding: 0.55rem 0.6rem 0.55rem 0.55rem;
    border-radius: 20px;
    border: 1px solid transparent;
    background:
        linear-gradient(160deg, rgba(22, 38, 82, 0.96), rgba(7, 12, 30, 0.97)) padding-box,
        conic-gradient(from var(--sx-back-a), rgba(96, 165, 250, 0.25), #60a5fa 18%, #a5f3fc 26%, rgba(96, 165, 250, 0.25) 40%, rgba(96, 165, 250, 0.25) 60%, #ffd94d 74%, rgba(96, 165, 250, 0.25) 88%) border-box;
    color: #f1f5f9;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 18px 40px -22px rgba(37, 99, 235, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: sx-back-spin 7s linear infinite;
    transition:
        transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1),
        box-shadow 0.35s ease;
}
@keyframes sx-back-spin {
    to {
        --sx-back-a: 360deg;
    }
}
.sx .sx-back:hover {
    transform: translateY(-3px);
    box-shadow:
        0 26px 50px -22px rgba(37, 99, 235, 1),
        0 0 0 4px rgba(96, 165, 250, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sx .sx-back:active {
    transform: translateY(-1px) scale(0.98);
}
.sx .sx-back:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
}
.sx-back-shine {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(147, 197, 253, 0.16) 50%, transparent 65%);
    transform: translateX(-110%);
    pointer-events: none;
}
.sx .sx-back:hover .sx-back-shine {
    transform: translateX(110%);
    transition: transform 0.8s ease;
}
.sx-back-arrow {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(160deg, #3b82f6, #1d4ed8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 8px 20px -8px rgba(37, 99, 235, 0.9);
}
.sx-back-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sx-back-gem {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 44px;
}
.sx-back-gem::before {
    content: "";
    position: absolute;
    inset: 4px -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.5), transparent 70%);
    animation: sx-back-glow 2.8s ease-in-out infinite;
}
@keyframes sx-back-glow {
    50% {
        opacity: 0.35;
        transform: scale(0.8);
    }
}
.sx-back-gem svg {
    position: relative;
    width: 24px;
    height: 27px;
    filter: drop-shadow(0 4px 10px rgba(59, 130, 246, 0.7));
    animation: sx-back-bob 3s ease-in-out infinite;
}
@keyframes sx-back-bob {
    50% {
        transform: translateY(-3px);
    }
}
.sx .sx-back:hover .sx-back-gem svg {
    animation: acct-gem-spin 0.8s ease, sx-back-bob 3s ease-in-out 0.8s infinite;
}
.sx-back-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-right: 0.4rem;
    line-height: 1.15;
}
.sx-back-text b {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}
.sx-back-text small {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 500;
}
.sx-back-bal {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.4rem;
    padding: 0.55rem 0.8rem;
    border-radius: 13px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    background: rgba(3, 8, 24, 0.6);
    font-variant-numeric: tabular-nums;
}
.sx-back-bal[hidden] {
    display: none;
}
.sx-back-bal svg {
    width: 14px;
    height: 16px;
}
.sx-back-bal b {
    color: #e2e8f0;
    font-size: 0.92rem;
    font-weight: 700;
}
@media (max-width: 600px) {
    .sx .sx-back {
        width: 100%;
    }
    .sx-back-bal {
        margin-left: auto;
    }
    .sx-back-gem {
        display: none;
    }
    .sx-back-text {
        white-space: nowrap;
    }
}
@media (max-width: 360px) {
    .sx-back-text small {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sx .sx-back,
    .sx-back-gem::before,
    .sx-back-gem svg,
    .sx .sx-back:hover .sx-back-gem svg {
        animation: none;
    }
}
.sx #alertHost:not(:empty) {
    margin-top: 1.25rem;
}
.sx #alertHost,
.sx .sup-lapsed {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}
.sx-hero {
    padding-top: 2.5rem;
}
.sx-hero .acct-name {
    font-size: 3.2rem;
}
.sx-hero .acct-tier {
    max-width: 44ch;
    font-size: 1.05rem;
    line-height: 1.6;
}
.sx-fine {
    max-width: 52ch;
    margin-top: 1rem;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.55;
    text-align: left;
}
.sx-fine a {
    color: #94a3b8;
}
.sx-cardside {
    position: relative;
    width: 100%;
    max-width: 420px;
    justify-self: end;
}
.sx .sx-foot,
.sx .sx-note {
    max-width: none;
    margin: 0.9rem 0 0;
    color: #cbd5e1;
    font-size: 0.9rem;
    text-align: left;
}
.sx .sx-note {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.82rem;
}
.sx-foot:empty,
.sx-note:empty {
    display: none;
}
.sx-sec {
    padding-top: 3.5rem;
}
.sx-perks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}
.sx-perks .acct-perk {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 1.05rem 1.1rem;
}
.sx-perks .acct-perk-text {
    flex: 1 1 0;
}
.sx-perks .acct-perk-state {
    margin-top: 0.4rem;
}
.sx-perk-btn {
    flex: 1 1 100%;
    margin-top: 0.75rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: rgba(255, 215, 0, 0.08);
    color: #fff3c4;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}
.sx-perk-btn:hover {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.16);
}
.sx-perk-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
/* Manage panel */
.sx .sx-head {
    max-width: 1040px;
    width: 100%;
    margin: 3.5rem auto 1rem;
}
.sx .sx-manage {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
}
.sx .sx-manage .sup-manage-strip {
    border-radius: 20px;
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(14, 24, 52, 0.88), rgba(7, 12, 30, 0.92));
}
/* Subscribe band */
.sx-band {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    width: 100%;
    max-width: 1040px;
    margin: 3.5rem auto 4.5rem;
    padding: 1.6rem 1.8rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    background:
        radial-gradient(70% 140% at 0% 0%, rgba(255, 215, 0, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(20, 17, 6, 0.9), rgba(9, 11, 20, 0.92));
    overflow: hidden;
}
.sx-band::before {
    content: "";
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    opacity: 0.6;
}
.sx-band-crown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: radial-gradient(circle at 35% 30%, #3a2d0a 0%, #1b1505 75%);
    box-shadow: 0 0 26px rgba(255, 215, 0, 0.28);
}
.sx-band-crown svg {
    width: 28px;
    height: 28px;
}
.sx-band-text {
    flex: 1;
    min-width: 0;
}
.sx-band-text h2 {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.sx-band-text p {
    margin-top: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.sx-band .acct-gold {
    flex-shrink: 0;
}
@media (max-width: 980px) {
    .sx-cardside {
        justify-self: start;
    }
    .sx-perks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .sx-hero .acct-name {
        font-size: 2.3rem;
    }
    .sx-perks {
        grid-template-columns: minmax(0, 1fr);
    }
    .sx-band {
        flex-wrap: wrap;
        padding: 1.4rem 1.3rem;
    }
    .sx-band .acct-gold {
        width: 100%;
        justify-content: center;
    }
}

/* Member view */
.sx [hidden] {
    display: none !important;
}
.sx .sx-vault {
    border-color: rgba(255, 215, 0, 0.35);
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 196, 0, 0.2), transparent 70%),
        linear-gradient(180deg, rgba(30, 24, 8, 0.92), rgba(9, 10, 22, 0.95));
    box-shadow:
        0 30px 70px -30px rgba(234, 179, 8, 0.55),
        inset 0 1px 0 rgba(255, 243, 196, 0.08);
}
.sx .sx-vault::before {
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
}
.sx .sx-vault .acct-ring {
    border-color: rgba(253, 224, 71, 0.28);
}
.sx .sx-vault .acct-ring-b {
    border-color: rgba(253, 224, 71, 0.16);
}
.sx .sx-vault .acct-ring i {
    background: #fff3c4;
    box-shadow: 0 0 12px 3px rgba(255, 215, 0, 0.8);
}
.sx .sx-vault .acct-pulse {
    border-color: rgba(255, 215, 0, 0.55);
}
.sx .sx-vault .acct-sparks i {
    background: #fff3c4;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
}
.sx-crown::before {
    background: radial-gradient(circle, rgba(255, 196, 0, 0.42) 0%, rgba(255, 196, 0, 0) 65%);
}
.sx-vault-title {
    margin-top: 0.1rem;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    background: linear-gradient(100deg, #fff6d1, #ffd94d 45%, #e0a400);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sx-crown svg {
    width: 84px;
    height: 84px;
    margin: 8px auto 0;
    filter: drop-shadow(0 10px 22px rgba(255, 196, 0, 0.55));
}
.sx-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding: 0.35rem 0.85rem 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, 0.35);
    background: rgba(22, 101, 52, 0.22);
    color: #4ade80;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}
.sx-status .sup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    animation: sx-blink 2.2s ease-in-out infinite;
}
@keyframes sx-blink {
    50% {
        opacity: 0.45;
    }
}
.sx-status.is-ending {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(146, 64, 14, 0.25);
}
.sx-status.is-problem {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(127, 29, 29, 0.28);
}
.sx-rows {
    display: grid;
    gap: 0.4rem;
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 215, 0, 0.16);
    list-style: none;
    text-align: left;
}
.sx-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.2rem;
}
.sx-row + .sx-row {
    border-top: 1px dashed rgba(148, 163, 184, 0.14);
}
.sx .sx-rows .sx-row {
    display: flex;
    margin: 0;
    padding: 0.55rem 0.2rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background: none;
    box-shadow: none;
}
.sx .sx-rows .sx-row:first-child {
    border-top: 0;
}
.sx-row-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: 0.15rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    background: rgba(255, 215, 0, 0.08);
}
.sx-row-ic svg {
    width: 16px;
    height: 16px;
}
.sx .sx-rows .sx-row {
    align-items: center;
    gap: 0.7rem;
}
.sx .sx-row .sup-stat-val {
    margin-left: auto;
}
.sx .sx-row .sup-stat-key {
    flex: none;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.sx-row .sup-stat-val {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 600;
    text-align: right;
}
.sx-row .sup-stat-price,
.sx .sx-plus {
    color: #ffe066 !important;
    font-weight: 700;
}
.sx-row .sup-stat-per {
    color: #94a3b8;
    font-weight: 500;
}
.sx .sx-vault .sx-foot,
.sx .sx-vault .sx-note {
    text-align: center;
}
.sx .sx-vault .sx-foot {
    margin-top: 1rem;
    color: #fde68a;
    font-size: 0.9rem;
}
.sx .sx-vault .sx-note:empty,
.sx .sx-vault .sx-foot:empty {
    display: none;
}
#my-perks .acct-member {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}
.sx .acct-cardside.sx-cardside {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sx .sx-flipcard .acct-holo-back {
    background:
        radial-gradient(120% 90% at 100% 100%, rgba(255, 215, 0, 0.25), transparent 55%),
        linear-gradient(135deg, #3a2f0b, #1c1606 60%, #2c2208);
    border-color: rgba(255, 215, 0, 0.45);
}
#my-perks .sx-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Pack prices */
.sx .sx-packs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
}
.sx-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem 0.8rem 1.3rem;
    border-radius: 20px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(59, 130, 246, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(14, 24, 52, 0.9), rgba(7, 12, 30, 0.94));
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.sx-pack:hover {
    transform: translateY(-5px);
    border-color: rgba(147, 197, 253, 0.7);
    box-shadow: 0 22px 44px -24px rgba(59, 130, 246, 0.9);
}
.sx-pack.is-gold {
    border-color: rgba(255, 215, 0, 0.4);
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(255, 196, 0, 0.18), transparent 70%),
        linear-gradient(180deg, rgba(30, 24, 8, 0.92), rgba(9, 10, 22, 0.95));
}
.sx-pack.is-gold:hover {
    border-color: rgba(255, 224, 102, 0.8);
    box-shadow: 0 22px 44px -24px rgba(234, 179, 8, 0.9);
}
.sx-pack-tag {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.sx-pack.is-gold .sx-pack-tag {
    background: linear-gradient(100deg, #ffe066, #e0a400);
    color: #1c1606;
}
.sx-pack svg {
    width: 34px;
    height: 37px;
    margin-bottom: 0.7rem;
    filter: drop-shadow(0 6px 14px rgba(59, 130, 246, 0.5));
}
.sx-pack.is-gold svg {
    filter: drop-shadow(0 6px 14px rgba(255, 196, 0, 0.5));
}
.sx-pack:hover svg {
    animation: acct-gem-spin 0.7s ease;
}
.sx-pack b {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}
.sx-pack small {
    color: #94a3b8;
    font-size: 0.8rem;
}
.sx-pack s {
    margin-top: 0.9rem;
    color: #64748b;
    font-size: 0.82rem;
}
.sx-pack-now {
    color: #ffffff;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}
.sx-pack em {
    margin-top: 0.45rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    color: #6ee7b7;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 600;
}
/* Closing note */
.sx-letter {
    display: flex;
    flex-direction: column;
}
.sx-letter .team-note {
    width: 100%;
    border-color: rgba(255, 215, 0, 0.22);
    background:
        radial-gradient(70% 90% at 0% 0%, rgba(255, 215, 0, 0.07), transparent 60%),
        rgba(8, 14, 32, 0.78);
}
.sx-letter .team-note .team-sign {
    color: #ffe066;
}
@media (max-width: 980px) {
    #my-perks .acct-member {
        grid-template-columns: minmax(0, 1fr);
    }
    .sx .sx-packs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1.4rem;
    }
}
@media (max-width: 600px) {
    #my-perks .sx-cardside {
        max-width: 340px;
        margin: 0 auto;
    }
    .sx-vault-title {
        font-size: 2.1rem;
    }
    .sx .sx-packs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sx .sx-pack.is-gold {
        grid-column: 1 / -1;
    }
    .sx .sx-row .sup-stat-val {
        font-size: 0.9rem;
        white-space: nowrap;
    }
    #my-perks .sx-perks {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sx-status .sup-dot {
        animation: none;
    }
}

/* Account and supporter animations */

.acct-avatar {
    animation: acct-in-avatar 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) 0.1s both;
}
.acct-hello {
    animation: acct-in-up 0.6s ease 0.35s both;
}
.acct-name {
    animation: acct-in-name 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}
.acct-tier {
    animation: acct-in-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 1s both;
}
.acct-cta {
    animation: acct-in-up 0.6s ease 1.15s both;
}
.acct-vault {
    animation: acct-in-vault 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both;
}
.acct-core {
    animation: acct-in-gem 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) 0.7s both;
}
.acct-packs .acct-pack {
    animation: acct-in-up 0.5s ease both;
}
.acct-packs .acct-pack:nth-child(1) {
    animation-delay: 1.2s;
}
.acct-packs .acct-pack:nth-child(2) {
    animation-delay: 1.3s;
}
.acct-packs .acct-pack:nth-child(3) {
    animation-delay: 1.4s;
}
@keyframes acct-in-avatar {
    from {
        opacity: 0;
        transform: scale(0.4) rotate(-25deg);
    }
}
@keyframes acct-in-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}
@keyframes acct-in-name {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        filter: blur(8px);
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
        transform: none;
    }
}
@keyframes acct-in-pop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
}
@keyframes acct-in-vault {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }
}
@keyframes acct-in-gem {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.6);
    }
}

/* Supporter crown on the avatar */
.acct-avatar-crown {
    position: absolute;
    top: -20px;
    right: -12px;
    width: 34px;
    height: 34px;
    display: none;
    filter: drop-shadow(0 4px 10px rgba(255, 215, 0, 0.55));
    transform: rotate(18deg);
    animation: acct-crown-bob 3.2s ease-in-out infinite;
}
.acct-hero.is-supporter .acct-avatar-crown {
    display: block;
}
@keyframes acct-crown-bob {
    0%, 100% {
        transform: rotate(18deg) translateY(0);
    }
    50% {
        transform: rotate(10deg) translateY(-4px);
    }
}

/* Gem combo */
.acct-combo {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 0.15s ease,
        transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
    pointer-events: none;
}
.acct-combo.is-on {
    opacity: 1;
    transform: scale(1);
}
.acct-combo.is-bump {
    animation: acct-combo-bump 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes acct-combo-bump {
    50% {
        transform: scale(1.35);
    }
}
.acct-core.is-frenzy .acct-vault-gem svg {
    animation: acct-frenzy 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes acct-frenzy {
    0% {
        transform: rotateY(0) scale(1);
    }
    50% {
        transform: rotateY(540deg) scale(1.3);
        filter: drop-shadow(0 0 30px rgba(147, 197, 253, 1)) brightness(1.4);
    }
    100% {
        transform: rotateY(720deg) scale(1);
    }
}
.acct-burst.is-gold {
    background: #fff3c4;
    box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.9);
}
.acct-shout {
    position: absolute;
    left: 50%;
    top: 78%;
    z-index: 5;
    translate: -50% 0;
    color: #ffffff;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(96, 165, 250, 0.9);
    pointer-events: none;
    animation: acct-shout 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes acct-shout {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.6);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }
    70% {
        opacity: 1;
        transform: translateY(-10px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-34px) scale(1);
    }
}

.acct-pack:hover svg {
    animation: acct-gem-spin 0.7s ease;
}
@keyframes acct-gem-spin {
    to {
        transform: rotateY(360deg);
    }
}

.acct-perk.visible .acct-perk-tile {
    animation: acct-tile-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
    animation-delay: calc(var(--reveal-delay, 0s) + 0.15s);
}
@keyframes acct-tile-pop {
    from {
        transform: scale(0.3) rotate(-30deg);
    }
}
/* Perk icon hovers, keyed by the icon so they work on every page that lists perks. */
:is(.acct-perk, .sup-perk, .sup-benefit):hover svg:has(> use) {
    animation: 0.7s ease;
}
:is(.acct-perk, .sup-perk, .sup-benefit):hover svg:has(> use[href="#ic-bolt"]) {
    animation-name: acct-p-bolt;
}
:is(.acct-perk, .sup-perk, .sup-benefit):hover svg:has(> use[href="#ic-crown"]) {
    animation-name: acct-p-crown;
}
:is(.acct-perk, .sup-perk, .sup-benefit):hover svg:has(> use[href="#ic-rocket"]) {
    animation-name: acct-p-rocket;
}
:is(.acct-perk, .sup-perk, .sup-benefit):hover svg:has(> use[href="#ic-chat"]) {
    animation-name: acct-p-chat;
}
:is(.acct-perk, .sup-perk, .sup-benefit):hover svg:has(> use[href="#ic-tag"]) {
    animation-name: acct-p-tag;
}
:is(.acct-perk, .sup-perk, .sup-benefit):hover svg:has(> use[href="#ic-wrench"]) {
    animation-name: acct-p-wrench;
}

/* Vigor Station banner crown and pack gems */
.vig-crest {
    animation: acct-tile-pop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s both;
}
.vig-banner:hover .vig-crest .sup-ic {
    animation: acct-p-crown 0.7s ease;
}
.card-grid .pack-card:hover .pack-diamond {
    animation: pack-gem-hop 0.8s cubic-bezier(0.3, 1.3, 0.5, 1);
}
@keyframes pack-gem-hop {
    0% {
        transform: translateY(0) rotateY(0);
    }
    40% {
        transform: translateY(-10px) rotateY(180deg);
        filter: drop-shadow(0 0 16px var(--pack-gem-glow)) brightness(1.4);
    }
    100% {
        transform: translateY(0) rotateY(360deg);
    }
}
@keyframes acct-p-bolt {
    20%, 60% {
        opacity: 0.3;
        transform: scale(1.2);
    }
    40%, 80% {
        opacity: 1;
        transform: scale(1.3);
        filter: drop-shadow(0 0 8px #ffd700);
    }
}
@keyframes acct-p-crown {
    25% {
        transform: rotate(-14deg) translateY(-3px);
    }
    55% {
        transform: rotate(12deg) translateY(-3px);
    }
    80% {
        transform: rotate(-5deg);
    }
}
@keyframes acct-p-rocket {
    40% {
        transform: translate(8px, -8px);
        opacity: 0;
    }
    41% {
        transform: translate(-8px, 8px);
        opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
@keyframes acct-p-chat {
    30% {
        transform: translateY(-6px) scale(1.1);
    }
    55% {
        transform: translateY(0) scale(0.95);
    }
    75% {
        transform: translateY(-2px);
    }
}
@keyframes acct-p-tag {
    25% {
        transform: rotate(-20deg);
    }
    55% {
        transform: rotate(14deg);
    }
    80% {
        transform: rotate(-6deg);
    }
}
@keyframes acct-p-wrench {
    30% {
        transform: rotate(-40deg);
    }
    65% {
        transform: rotate(25deg);
    }
}

.acct-row-icon svg {
    transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.acct-row:nth-child(1):hover .acct-row-icon svg {
    transform: rotate(-35deg);
}
.acct-row:nth-child(2):hover .acct-row-icon svg {
    transform: rotate(180deg);
}
.acct-row:nth-child(3):hover .acct-row-icon svg {
    transform: translateY(-3px) scale(1.1);
}
.acct-row:nth-child(4):hover .acct-row-icon svg {
    transform: translateX(-4px);
}

.acct-cardside {
    position: relative;
}
.acct-twinkles {
    position: absolute;
    inset: -20px;
    display: none;
    pointer-events: none;
}
.acct-supporter .acct-twinkles {
    display: block;
}
.acct-twinkles i {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff3c4;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 6px #ffd700);
    opacity: 0;
    animation: acct-twinkle 2.8s ease-in-out infinite;
}
.acct-twinkles i:nth-child(1) {
    left: 2%;
    top: 6%;
    animation-delay: 0s;
}
.acct-twinkles i:nth-child(2) {
    left: 88%;
    top: 2%;
    animation-delay: 0.6s;
    width: 10px;
    height: 10px;
}
.acct-twinkles i:nth-child(3) {
    left: 96%;
    top: 52%;
    animation-delay: 1.3s;
}
.acct-twinkles i:nth-child(4) {
    left: 6%;
    top: 70%;
    animation-delay: 1.9s;
    width: 10px;
    height: 10px;
}
.acct-twinkles i:nth-child(5) {
    left: 50%;
    top: -2%;
    animation-delay: 2.3s;
    width: 8px;
    height: 8px;
}
.acct-twinkles i:nth-child(6) {
    left: 72%;
    top: 78%;
    animation-delay: 1s;
    width: 9px;
    height: 9px;
}
@keyframes acct-twinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.2) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(90deg);
    }
}
.acct-holo-front::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 224, 102, 0.35), rgba(201, 151, 0, 0.15) 50%, rgba(255, 224, 102, 0.3));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.acct-cardwrap:hover .acct-holo-front::after {
    opacity: 1;
}
.acct-supporter .acct-holo-front::after {
    display: none;
}
.acct-cardwrap:active .acct-float {
    animation-play-state: paused;
}

@media (max-width: 980px) {
    .acct-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        padding-top: 3rem;
    }
    .acct-vault {
        width: 100%;
        max-width: 460px;
    }
    .acct-member {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
    }
    .acct-cardwrap {
        width: 100%;
        max-width: 400px;
    }
}
@media (max-width: 600px) {
    .acct-hero {
        padding: 2.25rem 0 2.75rem;
    }
    .acct-avatar {
        width: 68px;
        height: 68px;
        font-size: 1.7rem;
    }
    .acct-name {
        font-size: 2.6rem;
    }
    .acct-cta .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .acct-vault {
        padding: 2rem 1.4rem 1.6rem;
    }
    .acct-vault-num {
        font-size: 2.6rem;
    }
    .acct-perks,
    .acct-links {
        grid-template-columns: minmax(0, 1fr);
    }
    .acct-holo {
        padding: 1.1rem 1.2rem;
    }
    .acct-holo-name {
        font-size: 1.1rem;
    }
    .acct-sec {
        padding-top: 2.75rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .acct-avatar,
    .acct-hello,
    .acct-name,
    .acct-tier,
    .acct-cta,
    .acct-vault,
    .acct-core,
    .acct-packs .acct-pack,
    .acct-avatar-crown,
    .acct-twinkles i,
    .acct-perk.visible .acct-perk-tile,
    :is(.acct-perk, .sup-perk, .sup-benefit):hover svg:has(> use),
    .vig-crest,
    .vig-banner:hover .vig-crest .sup-ic,
    .card-grid .pack-card:hover .pack-diamond,
    .acct-pack:hover svg,
    .acct-core.is-frenzy .acct-vault-gem svg,
    .acct-shout {
        animation: none !important;
    }
    .acct-avatar::before,
    .acct-vault-gem,
    .acct-glint::before,
    .acct-ring,
    .acct-pulse,
    .acct-sparks i,
    .acct-float,
    .acct-holo-sheen,
    .acct-burst,
    .acct-core.is-pop .acct-vault-gem svg {
        animation: none;
    }
    .acct-flip {
        transition: none;
    }
    .acct-perk,
    .acct-chev {
        transition: none;
    }
}
html.is-scrolling .acct-vault-gem,
html.is-scrolling .acct-glint::before,
html.is-scrolling .acct-ring,
html.is-scrolling .acct-pulse,
html.is-scrolling .acct-sparks i,
html.is-scrolling .acct-float,
html.is-scrolling .acct-holo-sheen {
    animation-play-state: paused;
}

/* Vigor page banner */

html.sub-checking .banner-slot {
    visibility: hidden;
}

.banner-slot {
    width: 100%;
}

.pack-card {
    --pack-accent: #2563eb;
    --pack-face: #3b73ef;
    --pack-lit: #5d8cf4;
    --pack-lit-bot: #3670ee;
    --pack-press: #1e4fbc;

    --pack-edge: rgba(37, 99, 235, 0.28);
    --pack-tint: rgba(37, 99, 235, 0.1);
    --pack-glow: rgba(37, 99, 235, 0.45);
    --pack-gem-glow: rgba(37, 99, 235, 0.85);

    --pack-ink: #ffffff;
    --pack-ink-shadow: 0 1px 1px rgba(5, 8, 20, 0.35);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 190px;
    padding-top: 2.6rem;
    background: linear-gradient(180deg, #151b2e 0%, #0a0d16 100%);
    border: 1px solid var(--pack-edge);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.pack-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 11px 11px 0 0;
    background-color: var(--pack-accent);
    transition: background-color 0.15s ease;
    pointer-events: none;
}
.pack-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background-color: transparent;
    transition: background-color 0.15s ease;
    pointer-events: none;
    z-index: 1;
}

.pack-card:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 12px 34px var(--pack-glow);
}

.pack-card:hover::before {
    background-color: var(--pack-lit);
}

.pack-card:hover::after {
    background-color: var(--pack-tint);
}

.pack-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 4px 14px;
    border-radius: 999px;
    background-color: var(--pack-accent);
    color: #050814;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    box-shadow: 0 0 14px var(--pack-gem-glow);
}
.badge-gold {
    background-color: #ffd700;
    color: #191100;
}

.pack-diamond {
    display: block;
    width: 52px;
    height: 58px;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 7px var(--pack-gem-glow));
}
.is-counted .pack-diamond {
    animation: gem-glint 1s ease-out var(--reveal-delay, 0s) 1 both;
}
@keyframes gem-glint {
    0%,
    100% {
        transform: none;
        filter: drop-shadow(0 0 7px var(--pack-gem-glow));
    }
    35% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 16px var(--pack-gem-glow)) brightness(1.6);
    }
}
@media (prefers-reduced-motion: reduce) {
    .is-counted .pack-diamond {
        animation: none;
    }
}

.pack-amount {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.75rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #ffffff;
}

.pack-unit {
    color: var(--pack-accent);
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0.25rem 0 0.5rem;
}

.pack-price {
    margin-bottom: 1.5rem;
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 600;
}

/* Buy bar */

.pack-buy {
    position: relative;
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 0.7rem 0;
    overflow: hidden;
    text-align: center;
    font-weight: 700;
    color: var(--pack-ink);
    text-shadow: var(--pack-ink-shadow);
    background: linear-gradient(180deg, var(--pack-face) 0%, var(--pack-accent) 100%);
    border-radius: 0 0 11px 11px;
    transition:
        background 0.15s ease,
        padding 0.06s ease;
}
.pack-buy::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.26);
    transition: opacity 0.06s ease;
}

.pack-buy::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -55%;
    width: 55%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.34) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    pointer-events: none;
}

.pack-card:hover .pack-buy {
    background: linear-gradient(180deg, var(--pack-lit) 0%, var(--pack-accent) 30%, var(--pack-lit-bot) 100%);
}

.pack-card:hover .pack-buy::after {
    animation: pack-sheen 0.62s ease-in-out 1;
}

@keyframes pack-sheen {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 1;
        transform: translateX(283%);
    }
}
.pack-card:active .pack-buy {
    background: var(--pack-press);
    padding-top: calc(0.7rem + 1px);
    padding-bottom: calc(0.7rem - 1px);
}

.pack-card:active .pack-buy::before {
    opacity: 0.35;
}

.pack-popular {
    --pack-edge: rgba(96, 165, 250, 0.6);
}

/* Supporter prices: the full price struck through, then what they pay */
.pack-price.is-off {
    color: #fde68a;
}
.pack-price s {
    margin-right: 0.3rem;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Best-value pack */

.pack-gold {
    --pack-accent: #ffd700;
    --pack-face: #ffdb19;
    --pack-lit: #ffe241;
    --pack-lit-bot: #ffda14;
    --pack-press: #ccac00;

    --pack-edge: rgba(255, 215, 0, 0.4);
    --pack-tint: rgba(255, 215, 0, 0.1);
    --pack-glow: rgba(255, 215, 0, 0.45);
    --pack-gem-glow: rgba(255, 215, 0, 0.9);
    --pack-ink: #191100;
    --pack-ink-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .pack-card:hover {
        transform: none;
    }

    .pack-card:hover .pack-buy::after {
        animation: none;
    }
}
.fineprint {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 1.6rem 0 0;
    opacity: 0.8;
}
.fineprint a {
    color: #93c5fd;
    text-decoration: none;
    border-bottom: 1px solid rgba(147, 197, 253, 0.4);
}

.fineprint a:hover {
    color: #bfdbfe;
    border-bottom-color: #bfdbfe;
}

/* Account page */

.auth-section {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 4rem 0 5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 2.25rem 2rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
}
.auth-banner {
    display: none;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.auth-banner.show {
    display: flex;
}

.auth-banner.success {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

.auth-banner.error {
    background-color: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}
.auth-banner.info {
    background-color: rgba(37, 99, 235, 0.12);
    border-color: rgba(96, 165, 250, 0.4);
    color: #bfdbfe;
}

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

.auth-banner .banner-ok,
.auth-banner .banner-err {
    display: none;
}
.auth-banner.success .banner-ok {
    display: block;
}
.auth-banner.error .banner-err {
    display: block;
}

.auth-title {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.6rem;
    text-align: center;
}

.auth-subtitle {
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.95rem;
    margin: 0.4rem 0 1.5rem;
}

.auth-tabs {
    display: flex;
    background-color: rgba(9, 16, 28, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 1.75rem;
}

.auth-tabs[hidden] {
    display: none;
}

.auth-tab {
    flex: 1;
    padding: 0.55rem 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.auth-tab.active {
    background-color: var(--accent-color);
    color: #ffffff;
}

.form-field {
    margin-bottom: 1.1rem;
}

.form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.form-field input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background-color: rgba(9, 16, 28, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.95rem;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.form-field input:focus {
    outline: none;
    border-color: rgba(4, 100, 245, 0.8);
    background-color: rgba(15, 28, 56, 0.75);
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 2.8rem;
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    display: flex;
    padding: 0.3rem;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
}

.pw-toggle:hover {
    color: var(--text-primary);
}

.pw-toggle svg {
    width: 18px;
    height: 18px;
}
.pw-toggle .icon-eye-off {
    display: none;
}
.pw-toggle.showing .icon-eye {
    display: none;
}
.pw-toggle.showing .icon-eye-off {
    display: block;
}

.auth-link {
    display: block;
    text-align: center;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--accent-color);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
}

.form-consent {
    margin: 1.35rem 0 1.2rem;
    padding: 0.9rem 1rem 0.95rem;
    border-radius: 10px;
    background-color: rgba(9, 16, 28, 0.55);
    border: 1px solid var(--border-color);
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.55;
}
.consent-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.15rem 0 0;
    accent-color: var(--accent-color);
    cursor: pointer;
}

.consent-row input[type="checkbox"]:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 3px;
}

.consent-row a {
    color: #60a5fa;
    text-decoration: none;
    border-bottom: 1px solid rgba(96, 165, 250, 0.35);
}

.consent-row a:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}
.consent-note {
    margin: 0.6rem 0 0 1.7rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.5;
    opacity: 0.85;
}

.consent-note + .consent-note {
    margin-top: 0.4rem;
}

.consent-note a {
    color: #93c5fd;
    text-decoration: none;
    border-bottom: 1px solid rgba(147, 197, 253, 0.35);
}
.form-consent:has(input:user-invalid) {
    border-color: rgba(248, 113, 113, 0.55);
    background-color: rgba(248, 113, 113, 0.07);
}
.form-notice {
    display: none;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.form-notice.show {
    display: block;
}
.form-notice.error {
    color: #f87171;
}

.form-field input.invalid {
    border-color: #f87171;
}

.field-error {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.field-error:empty {
    display: none;
}

.auth-sent {
    text-align: center;
    padding-top: 0.4rem;
    animation: sent-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes sent-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.sent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1.3rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.07) 70%);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #4ade80;
    box-shadow:
        0 0 30px -8px rgba(34, 197, 94, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sent-icon svg {
    width: 30px;
    height: 30px;
}

.sent-title {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sent-title:focus {
    outline: none;
}

.sent-body {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0.55rem 0 0;
}

.sent-body strong {
    display: block;
    margin-top: 0.3rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sent-hint {
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.6;
    margin: 1.35rem 0 1.4rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background-color: rgba(9, 16, 28, 0.55);
    border: 1px solid var(--border-color);
}

.sent-hint a {
    color: #93c5fd;
    text-decoration: underline;
    text-decoration-color: rgba(147, 197, 253, 0.4);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.sent-hint a:hover {
    color: #bfdbfe;
    text-decoration-color: currentColor;
}

.sent-note {
    display: none;
    margin-top: 0.85rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4ade80;
}

.sent-note.show {
    display: block;
}
.sent-note.error {
    color: #f87171;
}

.sent-icon .icon-alert {
    display: none;
}
.auth-sent.is-error .sent-icon .icon-mail {
    display: none;
}
.auth-sent.is-error .sent-icon .icon-alert {
    display: block;
}

.auth-sent.is-error .sent-icon {
    background: radial-gradient(
        circle at 50% 35%,
        rgba(248, 113, 113, 0.2) 0%,
        rgba(248, 113, 113, 0.07) 70%
    );
    border-color: rgba(248, 113, 113, 0.45);
    color: #f87171;
    box-shadow:
        0 0 30px -8px rgba(248, 113, 113, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sent-failure .sent-body {
    margin: 0.55rem 0 1.4rem;
}

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

.sec {
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 3.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}

.sec.about {
    padding-top: 1.75rem;
}

.about::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 50%;
    width: 760px;
    max-width: 100%;
    height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.13) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* Section heading */

.about-head {
    text-align: center;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
    color: #93c5fd;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.about-head.head-left .eyebrow {
    padding-left: 1.05rem;
}

.about-head:not(.head-left) .eyebrow::before,
.about-head:not(.head-left) .eyebrow::after {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.about-head .section-subtitle {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.about-head.head-left {
    text-align: left;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.about-head.head-left .section-title {
    position: relative;
    text-align: left;
    font-size: 1.95rem;
}

.about-head.head-left .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.14em;
    bottom: 0.14em;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #60a5fa, #1d4ed8);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

.about-head.head-left .section-subtitle {
    text-align: left;
    max-width: 64ch;
    margin-left: 0;
    margin-right: 0;
}

.lede {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.lede p {
    color: #cbd5e1;
    font-size: 1.12rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.lede p:last-child {
    margin-bottom: 0;
}

.lede em {
    color: var(--text-primary);
    font-style: italic;
}

.lede a:not(.btn) {
    color: #60a5fa;
    text-decoration: none;
    border-bottom: 1px solid rgba(96, 165, 250, 0.35);
}

.lede a:not(.btn):hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

.dialogue {
    position: relative;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 1.6rem;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.32);
    background: linear-gradient(160deg, rgba(16, 33, 63, 0.92) 0%, rgba(8, 16, 33, 0.94) 100%);
    box-shadow: 0 22px 55px -26px rgba(37, 99, 235, 0.65);
    overflow: hidden;
}

.dialogue::after {
    content: "";
    position: absolute;
    top: -80px;
    left: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0) 70%);
    pointer-events: none;
}

.dialogue-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid rgba(96, 165, 250, 0.18);
}

.dialogue-scene {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.dialogue-lines {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-align: left;
}

.line-who {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.line p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.line-player {
    padding-left: 0.9rem;
    border-left: 2px solid rgba(148, 163, 184, 0.3);
}

.line-player .line-who {
    color: #94a3b8;
}
.line-player p {
    color: #94a3b8;
}

.line-npc {
    padding-left: 0.9rem;
    border-left: 2px solid rgba(96, 165, 250, 0.65);
}

.line-npc .line-who {
    color: #93c5fd;
}
.line-npc p {
    color: #e2e8f0;
}

/* Dialogue playback (index.js adds .is-queued, then reveals each line) */
.line {
    position: relative;
}
.dialogue.is-queued .line,
.dialogue.is-queued .dialogue-gap {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.45s ease,
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dialogue.is-queued .is-shown,
.dialogue.is-queued .line.is-typing {
    opacity: 1;
    transform: none;
}
.dialogue.is-queued .line p {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.dialogue.is-queued .line.is-shown p {
    opacity: 1;
}
.line-typing {
    position: absolute;
    left: 0.9rem;
    display: inline-flex;
    gap: 5px;
    color: var(--g-accent, #93c5fd);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.is-typing .line-typing {
    opacity: 1;
}
.line-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: line-dot 1s ease-in-out infinite;
}
.line-typing i:nth-child(2) {
    animation-delay: 0.15s;
}
.line-typing i:nth-child(3) {
    animation-delay: 0.3s;
}
@keyframes line-dot {
    0%,
    80%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.dialogue-gap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.4rem 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.dialogue-gap::before,
.dialogue-gap::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(96, 165, 250, 0),
        rgba(96, 165, 250, 0.35),
        rgba(96, 165, 250, 0)
    );
}

.dialogue-note {
    position: relative;
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(96, 165, 250, 0.18);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: left;
}

.block {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
}

.block-h {
    position: relative;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.1rem;
}

.block-h::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #60a5fa, #1d4ed8);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

.block-p {
    color: #cbd5e1;
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.block-p:last-child {
    margin-bottom: 0;
}

.block-p strong {
    color: var(--text-primary);
    font-weight: 600;
}

.block a:not(.btn) {
    color: #60a5fa;
    text-decoration: none;
    border-bottom: 1px solid rgba(96, 165, 250, 0.35);
}

.block a:not(.btn):hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

.sec code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 0.12em 0.4em;
    border-radius: 4px;
    background-color: rgba(4, 10, 20, 0.7);
    border: 1px solid var(--border-color);
    color: #93c5fd;
}
.compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
    align-items: start;
}

.compare-col {
    padding: 1.5rem 1.4rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
}

.compare-before {
    background: linear-gradient(180deg, rgba(19, 25, 38, 0.85) 0%, rgba(11, 16, 27, 0.85) 100%);
    border-color: rgba(148, 163, 184, 0.18);
}

.compare-after {
    background: linear-gradient(180deg, rgba(17, 38, 74, 0.85) 0%, rgba(10, 22, 47, 0.85) 100%);
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 34px -12px rgba(59, 130, 246, 0.55);
}

.compare-head {
    margin-bottom: 1rem;
}

.compare-tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.compare-before .compare-tag {
    background-color: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.compare-after .compare-tag {
    background-color: rgba(37, 99, 235, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.5);
    color: #bfdbfe;
}

.compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.compare-list li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: 0.7rem;
    font-size: 0.94rem;
    line-height: 1.6;
}

.compare-list li:last-child {
    margin-bottom: 0;
}

.compare-list li::before {
    position: absolute;
    left: 0;
    top: 0.08em;
    width: 1.15rem;
    height: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.compare-before .compare-list li {
    color: #94a3b8;
}

.compare-before .compare-list li::before {
    content: "\2715";
    background-color: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
}

.compare-after .compare-list li {
    color: #e2e8f0;
    font-weight: 500;
}

.compare-after .compare-list li::before {
    content: "\2713";
    background-color: rgba(59, 130, 246, 0.22);
    color: #93c5fd;
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 960px;
    width: 100%;
    margin-inline: auto;
}

.steps-4 {
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    margin-bottom: 1.9rem;
}

.step {
    position: relative;
    padding: 2.4rem 1.4rem 1.6rem;
    background: linear-gradient(180deg, rgba(17, 34, 64, 0.8) 0%, rgba(10, 20, 40, 0.8) 100%);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.15s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.step:hover {
    transform: translateY(-4px);
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 18px 38px -14px rgba(37, 99, 235, 0.5);
}

.step-num {
    position: absolute;
    top: -14px;
    left: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(160deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
    border: 1px solid rgba(147, 197, 253, 0.5);
    color: #ffffff;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.55);
}

.step-title {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.step p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.65;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.feature {
    position: relative;
    padding: 1.7rem 1.5rem 1.6rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(15, 28, 56, 0.72) 0%, rgba(9, 17, 34, 0.72) 100%);
    overflow: hidden;
    transition:
        transform 0.15s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.feature::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.feature:hover {
    transform: translateY(-4px);
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 18px 38px -16px rgba(37, 99, 235, 0.55);
}

.feature:hover::after {
    opacity: 1;
}
.feature h2,
.feature h3 {
    position: relative;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.55rem;
}

.feature p {
    position: relative;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.7;
}


/* Game list */

.legal-list {
    list-style: disc;
    margin: 0 0 1.1rem 1.35rem;
}

.legal-list li {
    color: #cbd5e1;
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 0.55rem;
    padding-left: 0.2rem;
}

.legal-list li:last-child {
    margin-bottom: 0;
}

.legal-list strong {
    color: var(--text-primary);
    font-weight: 600;
}

.legal-list a {
    color: #60a5fa;
    text-decoration: none;
    border-bottom: 1px solid rgba(96, 165, 250, 0.35);
}

.block-h + .block-p,
.block-p + .block-h,
.legal-list + .block-h {
    margin-top: 1.9rem;
}

.callout {
    position: relative;
    padding: 1.85rem 1.9rem;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: linear-gradient(145deg, rgba(23, 45, 88, 0.9) 0%, rgba(10, 20, 42, 0.92) 100%);
    box-shadow: 0 20px 50px -20px rgba(37, 99, 235, 0.55);
    overflow: hidden;
}

.callout::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0) 70%);
    pointer-events: none;
}

.callout p {
    position: relative;
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.callout strong {
    color: var(--text-primary);
    font-weight: 700;
}

.callout-cta {
    position: relative;
    margin-top: 0.5rem;
}

.faq {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: rgba(13, 24, 45, 0.7);
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.faq-item:hover {
    border-color: rgba(96, 165, 250, 0.45);
}

.faq-item[open] {
    background-color: rgba(17, 34, 64, 0.8);
    border-color: rgba(96, 165, 250, 0.5);
}

.faq-q {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1.05rem 3rem 1.05rem 1.3rem;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-q::-webkit-details-marker {
    display: none;
}
.faq-q::marker {
    content: "";
}

.faq-q::after {
    content: "";
    position: absolute;
    right: 1.35rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #60a5fa;
    border-bottom: 2px solid #60a5fa;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-q::after {
    transform: translateY(-30%) rotate(-135deg);
}

.faq-a {
    padding: 0 1.3rem 1.2rem;
}

.faq-a p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.faq-a a {
    color: #60a5fa;
    text-decoration: none;
    border-bottom: 1px solid rgba(96, 165, 250, 0.35);
}

.faq-a a:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

.cta-band {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 2rem auto 5rem;
    padding: 4.5rem 2rem 4.25rem;
    text-align: center;
    border-radius: 26px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(59, 130, 246, 0.22) 0%, rgba(8, 15, 36, 0) 60%),
        linear-gradient(180deg, rgba(12, 24, 54, 0.96) 0%, rgba(6, 12, 30, 0.97) 100%);
    box-shadow: none;
    overflow: hidden;
}

.cta-band::after {
    content: "";
    position: absolute;
    top: -140px;
    left: 50%;
    width: 520px;
    height: 300px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0) 70%);
    pointer-events: none;
    display: none;
}

.cta-band h2 {
    position: relative;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    margin-bottom: 0.7rem;
    letter-spacing: -0.02em;
    line-height: 1.12;
    background: linear-gradient(90deg, #6cb8ff 0%, #4f9bf7 45%, #2f73e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cta-band p {
    position: relative;
    max-width: 520px;
    margin: 0 auto 1.75rem;
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.7;
}

.cta-band-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

@media (max-width: 900px) {
    .steps-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phones */

@media (max-width: 600px) {
    main {
        padding: 0 1.25rem;
    }

    .sec {
        gap: 2.25rem;
        padding: 2.5rem 0;
    }

    .hero {
        padding-top: 2.5rem;
        padding-bottom: 1.25rem;
    }

    .sec.about {
        padding-top: 1.5rem;
    }

    .tagline {
        font-size: 1.05rem;
    }
    .lede {
        text-align: left;
    }

    .lede p {
        font-size: 1.02rem;
    }

    .dialogue {
        padding: 1.25rem 1.15rem 1.35rem;
    }

    .line p {
        font-size: 0.95rem;
    }

    .dialogue-gap {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }

    .block-h {
        font-size: 1.25rem;
    }
    .about-head.head-left .section-title {
        font-size: 1.5rem;
    }

    .steps,
    .features {
        grid-template-columns: 1fr;
    }

    .callout {
        padding: 1.5rem 1.3rem;
    }

    .faq-q {
        font-size: 0.95rem;
        padding-right: 2.6rem;
    }

    .cta-band {
        margin-bottom: 3.5rem;
    }

    .cta-band-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* View switch */

.supporter-member {
    display: none;
}
.sub-loading {
    display: none;
}

html.sub-checking .supporter-guest {
    display: none;
}
html.sub-checking .sub-loading {
    display: flex;
}

html.sub-active .supporter-guest {
    display: none;
}
html.sub-active .supporter-member {
    display: block;
}

.supporter-member,
.supporter-guest {
    width: 100%;
}

/* Checking spinner */

.sub-loading {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    min-height: 55vh;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.sub-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 215, 0, 0.2);
    border-top-color: #ffd700;
    animation: sub-spin 0.8s linear infinite;
}

@keyframes sub-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Member header */
#memberName {
    overflow-wrap: anywhere;
}
.nav-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background-color: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--text-secondary);
}

.nav-badge.tier-supporter {
    background-color: rgba(255, 215, 0, 0.14);
    border-color: rgba(255, 215, 0, 0.45);
    color: #ffd700;
}

/* Scroll reveal */

.reveal {
    opacity: 0;
}

.reveal.visible {
    opacity: 1;
    animation: reveal-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: var(--reveal-delay, 0s);
}

@keyframes reveal-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
    }
    .reveal.visible {
        animation: none;
    }
    html {
        scroll-behavior: auto;
    }
    .sub-spinner {
        animation: none;
        border-top-color: rgba(255, 215, 0, 0.5);
    }
}

:root {
    --sup-gold: #ffd700;
    --sup-gold-lite: #fff3c4;
    --sup-gold-deep: #c99700;

    --sup-card: rgba(12, 21, 44, 0.78);
    --sup-border: rgba(148, 163, 184, 0.16);

    --sup-text: #e6edf8;
    --sup-muted: #9ca3af;
    --sup-faint: #7686a3;
    --sup-hero-top: #151105;
    --sup-hero-bot: #0b0e16;
    --sup-price-top: #1e1a0d;
    --sup-price-bot: #0a0d16;

    /* Matches the app's MEMBER_WIDTH / COLUMN_WIDTH. */
    --sup-wide: 1030px;
}
.sup-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.sup-ic {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Shared */

.sup-back {
    display: inline-block;
    max-width: var(--sup-wide);
    width: 100%;
    margin: 2rem auto 1.25rem;
    color: var(--sup-muted);
    text-decoration: none;
    font-size: 0.95rem;
}

.sup-back:hover {
    color: var(--sup-gold);
}
.sup-section-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: var(--sup-wide);
    margin: 2.25rem auto 1.1rem;
}

.sup-section-head h2 {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sup-text);
    white-space: nowrap;
}

.sup-rule {
    flex: 1;
    height: 1px;
    border-radius: 1px;
    background: linear-gradient(to right, rgba(255, 215, 0, 0.35), rgba(255, 255, 255, 0.05));
}
.sup-alert[hidden],
.sup-lapsed[hidden],
.sup-confirm[hidden],
.sup-error[hidden],
.sup-btn[hidden] {
    display: none !important;
}

/* Buttons */

.sup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.62rem 1.4rem;
    border-radius: 11px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.sup-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sup-btn-gold {
    background-color: var(--sup-gold);
    color: #0a0800;
    box-shadow: 0 6px 22px rgba(255, 215, 0, 0.22);
}

.sup-btn-gold:hover:not(:disabled) {
    background-color: #ffe14d;
    box-shadow: 0 8px 26px rgba(255, 215, 0, 0.34);
}
.sup-btn-ghost {
    background-color: transparent;
    color: var(--sup-muted);
    border-color: rgba(255, 255, 255, 0.14);
}

.sup-btn-ghost:hover:not(:disabled) {
    background-color: rgba(255, 215, 0, 0.07);
    color: var(--sup-gold);
    border-color: rgba(255, 215, 0, 0.5);
}

.sup-btn-danger {
    background-color: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.55);
    color: #fca5a5;
}

.sup-btn-danger:hover:not(:disabled) {
    background-color: #f87171;
    border-color: #f87171;
    color: #1a0808;
}

/* Member view */

.sup-hero {
    position: relative;
    width: 100%;
    max-width: var(--sup-wide);
    margin: 0 auto;
    padding: 2.25rem 2.5rem 1.9rem;
    text-align: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, 0.28);
    background: linear-gradient(180deg, var(--sup-hero-top) 0%, var(--sup-hero-bot) 100%);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.sup-hero::before {
    content: "";
    position: absolute;
    top: -35%;
    left: 50%;
    width: 130%;
    height: 130%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0) 65%);
    pointer-events: none;
}

.sup-hero > * {
    position: relative;
}

/* Stat chips */

.sup-stat-gold {
    background-color: rgba(255, 215, 0, 0.06);
    border-color: rgba(255, 215, 0, 0.35);
}

.sup-stat-key {
    color: var(--sup-faint);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
}

.sup-stat-val {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--sup-text);
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sup-stat-price {
    color: var(--sup-gold);
    font-size: 1.06rem;
}

.sup-stat-per {
    color: var(--sup-muted);
    font-size: 0.75rem;
    font-weight: 400;
}
.sup-stat-status .sup-stat-val {
    align-items: center;
    gap: 0.45rem;
    color: #22c55e;
}

.sup-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.sup-stat-status.is-ending .sup-stat-val {
    color: #ffc400;
}
.sup-stat-status.is-problem .sup-stat-val {
    color: #f87171;
}

.sup-hero-foot {
    max-width: 560px;
    margin: 1.15rem auto 0;
    color: var(--sup-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.sup-hero-note {
    max-width: 560px;
    margin: 0.35rem auto 0;
    color: var(--sup-faint);
    font-size: 0.78rem;
    line-height: 1.6;
}

.sup-hero-foot:empty,
.sup-hero-note:empty {
    display: none;
}

/* Member view */

.sup-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    max-width: var(--sup-wide);
    margin: 0 auto 1.25rem;
    padding: 1.25rem 1.45rem;
    border-radius: 14px;
    border: 1px solid transparent;
    text-align: left;
}

.sup-alert .sup-ic {
    width: 22px;
    height: 22px;
    margin-top: 0.15rem;
}

.sup-alert h2 {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.sup-alert p {
    color: var(--sup-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.sup-alert .sup-btn {
    margin-top: 0.95rem;
}

.sup-alert-ending {
    background-color: #2a2109;
    border-color: rgba(255, 196, 0, 0.45);
}

.sup-alert-ending h2 {
    color: #ffd27d;
}

.sup-alert-pastdue {
    background-color: #2a1212;
    border-color: rgba(248, 113, 113, 0.45);
}

.sup-alert-pastdue h2 {
    color: #fca5a5;
}

.sup-alert-date {
    color: var(--sup-text);
    white-space: nowrap;
}

/* Member view */

.sup-perk {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.15rem 1rem;
    border-radius: 16px;
    background: linear-gradient(to bottom, #10151f, var(--sup-card));
    border: 1px solid var(--sup-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    transition:
        transform 0.14s ease,
        border-color 0.14s ease;
}

.sup-perk:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.45);
}


/* Member view */

.sup-manage {
    width: 100%;
    max-width: var(--sup-wide);
    margin: 0 auto 3rem;
}

.sup-manage-strip {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.4rem;
    border-radius: 16px;
    background-color: var(--sup-card);
    border: 1px solid var(--sup-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.sup-manage-text {
    flex: 1;
    min-width: 0;
}

.sup-manage-text h3 {
    color: var(--sup-text);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.sup-manage-text p {
    color: var(--sup-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.sup-manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}
.sup-confirm {
    margin-top: 0.85rem;
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(30, 41, 66, 0.75) 0%, rgba(12, 18, 32, 0.75) 100%);
    border: 1px solid var(--sup-border);
}

.sup-confirm p {
    color: var(--sup-muted);
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

.sup-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.sup-error {
    margin-top: 0.85rem;
    padding: 0.85rem 1.05rem;
    border-radius: 10px;
    background-color: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fca5a5;
    font-size: 0.85rem;
    line-height: 1.6;
}

.sup-fineprint {
    margin-top: 0.85rem;
    color: var(--sup-faint);
    font-size: 0.75rem;
    line-height: 1.6;
}

.sup-fineprint a {
    color: #93c5fd;
    text-decoration: none;
    border-bottom: 1px solid rgba(147, 197, 253, 0.4);
}

.sup-fineprint a:hover {
    color: #bfdbfe;
}

/* Guest view */

.sup-guest-head {
    width: 100%;
    max-width: var(--sup-wide);
    margin: 0 auto 2rem;
}

.sup-guest-head h1 {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sup-gold);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .sup-guest-head h1 {
        width: fit-content;
        padding-bottom: 0.08em;
        background: linear-gradient(100deg, #fff3c4 0%, #ffd700 45%, #c99700 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.sup-guest-head p {
    margin-top: 0.4rem;
    color: var(--sup-muted);
    font-size: 1.02rem;
}
.sup-lapsed {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    max-width: 620px;
    margin: 0 auto 2rem;
    padding: 1.15rem 1.35rem;
    border-radius: 14px;
    background-color: #131a2a;
    border: 1px solid rgba(30, 41, 59, 0.9);
    text-align: left;
}

.sup-lapsed .sup-ic {
    width: 22px;
    height: 22px;
    margin-top: 0.15rem;
}

.sup-lapsed h2 {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.05rem;
    color: #d7e2f2;
    margin-bottom: 0.35rem;
}

.sup-lapsed p {
    color: var(--sup-muted);
    font-size: 0.88rem;
    line-height: 1.65;
}

.sup-lapsed strong {
    color: var(--sup-text);
}

.sup-price {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2.5rem;
    padding: 1.9rem;
    text-align: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: linear-gradient(180deg, var(--sup-price-top) 0%, var(--sup-price-bot) 100%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.sup-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 230px;
    padding: 1.5rem 1.25rem;
    border-radius: 12px;
    background-color: var(--sup-card);
    border: 1px solid var(--sup-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    transition:
        transform 0.15s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.sup-benefit:hover {
    transform: translateY(-3px);
    background-color: rgba(38, 31, 10, 0.7);
    border-color: rgba(255, 215, 0, 0.5);
}

.sup-benefit h3 {
    margin: 0.9rem 0 0.4rem;
    color: var(--sup-text);
    font-size: 1rem;
    font-weight: 700;
}

.sup-benefit p {
    color: var(--sup-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* Subscribe */

.sup-subscribe {
    width: 100%;
    max-width: 620px;
    margin: 2.5rem auto 4rem;
    text-align: center;
}

.sup-subscribe .sup-fineprint {
    margin-top: 0.9rem;
    text-align: center;
}

/* Phones */

@media (max-width: 700px) {

    .sup-manage-strip {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .sup-manage-actions {
        justify-content: stretch;
    }

    .sup-manage-actions .sup-btn {
        flex: 1;
    }
}

@media (max-width: 600px) {
    .sup-hero {
        padding: 1.75rem 1.15rem 1.5rem;
    }

    .sup-guest-head h1 {
        font-size: 1.85rem;
    }

    .sup-alert,
    .sup-lapsed {
        padding: 1.1rem 1rem;
        gap: 0.8rem;
    }

    .sup-confirm-actions .sup-btn {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sup-perk,
    .sup-benefit {
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease;
    }

    .sup-perk:hover,
    .sup-benefit:hover {
        transform: none;
    }
}

.vig-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 3.5rem;
    padding: 1.6rem 1.85rem;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--sup-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition:
        transform 0.15s ease,
        border-color 0.2s ease;
}

.vig-banner.banner-guest {
    background: linear-gradient(180deg, var(--sup-price-top) 0%, var(--sup-price-bot) 100%);
}
.vig-banner.banner-member {
    background: linear-gradient(180deg, var(--sup-hero-top) 0%, var(--sup-hero-bot) 100%);
}

.vig-banner::before {
    content: "";
    position: absolute;
    top: -55%;
    left: -8%;
    width: 70%;
    height: 190%;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.11) 0%, rgba(255, 215, 0, 0) 65%);
    pointer-events: none;
}

.vig-banner > * {
    position: relative;
}

.vig-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 14px;
    background: linear-gradient(
        115deg,
        rgba(255, 215, 0, 0.3) 0%,
        rgba(255, 215, 0, 0.3) 34%,
        rgba(255, 215, 0, 0.95) 50%,
        rgba(255, 215, 0, 0.3) 66%,
        rgba(255, 215, 0, 0.3) 100%
    );
    background-size: 260% 100%;
    background-position: 0% 0;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.vig-banner:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.45);
}

.vig-banner:hover::after {
    opacity: 1;
    animation: vig-sweep 1.6s ease-in-out infinite alternate;
}

@keyframes vig-sweep {
    from {
        background-position: 0% 0;
    }
    to {
        background-position: 100% 0;
    }
}

/* Crest */

.vig-crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.45);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.banner-guest .vig-crest {
    background: radial-gradient(circle at 35% 30%, #3a2d0a 0%, #1b1505 70%);
}

.banner-member .vig-crest {
    background: radial-gradient(circle at 35% 30%, #2e2408 0%, #171204 70%);
}

.vig-crest .sup-ic {
    width: 31px;
    height: 31px;
}

/* Copy */

.vig-banner-text {
    flex: 1;
    min-width: 0;
}

.vig-eyebrow {
    color: rgba(255, 215, 0, 0.75);
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
}

.vig-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 0.4rem;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sup-text);
}
.vig-gold {
    background: linear-gradient(
        to bottom,
        var(--sup-gold-lite) 0%,
        var(--sup-gold) 55%,
        var(--sup-gold-deep) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#bannerName {
    overflow-wrap: anywhere;
}

.vig-sub {
    max-width: 60ch;
    margin-top: 0.45rem;
    color: var(--sup-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Chips */

.vig-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.95rem;
}

.vig-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.85rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--sup-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.vig-chip[hidden] {
    display: none;
}

.vig-chip-accent {
    background-color: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.35);
    color: var(--sup-gold);
}
.vig-chip-status {
    gap: 0.45rem;
    padding-left: 0.7rem;
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.28);
    color: #4ade80;
}

.vig-chip-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
}

.vig-chip-status.is-ending {
    background-color: rgba(255, 196, 0, 0.1);
    border-color: rgba(255, 196, 0, 0.3);
    color: #ffc400;
}

.vig-chip-status.is-problem {
    background-color: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.32);
    color: #f87171;
}

/* CTA pill */

.vig-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    padding: 0.68rem 1.25rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    background-color: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.55);
    color: var(--sup-gold);
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.2s ease,
        box-shadow 0.18s ease;
}

.vig-cta-arrow {
    width: 14px;
    height: 14px;
}
.vig-cta-filled {
    background-color: var(--sup-gold);
    border-color: var(--sup-gold);
    color: #191100;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.28);
}

.vig-banner:hover .vig-cta {
    transform: translateX(4px);
    background-color: var(--sup-gold);
    border-color: var(--sup-gold);
    color: #191100;
    box-shadow: 0 0 26px rgba(255, 215, 0, 0.4);
}

.vig-banner:hover .vig-cta-filled {
    background-color: #ffe14d;
    border-color: #ffe14d;
}

.banner-member {
    display: none;
}

html.sub-active .banner-guest {
    display: none;
}
html.sub-active .banner-member {
    display: flex;
}

/* Phones */

@media (max-width: 820px) {
    .vig-banner {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.4rem 1.3rem;
    }

    .vig-banner-text {
        /* the crest is 66px + the 1rem gap */
        flex-basis: calc(100% - 82px);
    }

    .vig-cta {
        width: 100%;
        justify-content: center;
    }

    .vig-banner:hover .vig-cta {
        transform: none;
    }
}

@media (max-width: 600px) {
    .vig-title {
        font-size: 1.35rem;
    }

    .vig-sub {
        font-size: 0.86rem;
    }

    .vig-crest {
        width: 52px;
        height: 52px;
    }

    .vig-crest .sup-ic {
        width: 25px;
        height: 25px;
    }

    .vig-banner-text {
        flex-basis: calc(100% - 68px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .vig-banner:hover {
        transform: none;
    }

    .vig-banner:hover::after {
        animation: none;
        background-position: 50% 0;
    }

    .vig-banner:hover .vig-cta {
        transform: none;
    }
}

.co-dialog {
    margin: auto;
    position: relative;
    width: min(92vw, 430px);
    max-height: 90vh;
    overflow: hidden auto;
    padding: 1.7rem 1.75rem 1.5rem;
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, #141005 0%, var(--sup-hero-bot) 100%);
    color: var(--sup-text);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
    text-align: left;
}

.co-dialog.co-quiet {
    border-color: rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, #101725 0%, #0a0d16 100%);
}

.co-dialog::backdrop {
    background: rgba(4, 8, 18, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.co-dialog[open] {
    animation: co-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes co-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
}

.co-mark[hidden],
.co-rows[hidden],
.co-perks[hidden],
.co-note[hidden],
.co-btn[hidden] {
    display: none !important;
}

/* Watermark */

.co-mark {
    position: absolute;
    top: -46px;
    right: -46px;
    width: 168px;
    opacity: 0.032;
    transform: rotate(12deg);
    filter: blur(0.4px);
    pointer-events: none;
}
.co-dialog > *:not(.co-mark) {
    position: relative;
}

/* Header row */

.co-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.co-eyebrow {
    color: rgba(255, 215, 0, 0.8);
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.26em;
}

.co-eyebrow-mut {
    color: var(--sup-faint);
}

.co-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sup-faint);
    cursor: pointer;
    flex-shrink: 0;
}

.co-close:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--sup-text);
}

.co-close svg {
    width: 15px;
    height: 15px;
}

/* Headline */

.co-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1.15rem;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-weight: 700;
}

.co-plus {
    color: var(--sup-gold);
    font-size: 1.9rem;
    line-height: 1;
}

.co-amount {
    font-size: 3.5rem;
    line-height: 0.92;
    color: #ffffff;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.co-unit {
    color: #60a5fa;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-left: 0.15rem;
}
.co-title-word {
    display: block;
}

/* The word form, for a subscription or a cancelled checkout. */
.co-word {
    font-size: 2.3rem;
    line-height: 1.05;
    color: #ffffff;
    letter-spacing: -0.02em;
    /* A long username has to break somewhere. */
    overflow-wrap: anywhere;
}
.co-word-gold {
    background: linear-gradient(
        to bottom,
        var(--sup-gold-lite) 0%,
        var(--sup-gold) 60%,
        var(--sup-gold-deep) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.co-title-small .co-word {
    font-size: 1.9rem;
}

.co-title-crown {
    display: inline-block;
    width: 29px;
    height: 29px;
    vertical-align: -0.14em;
    margin-right: 0.35rem;
    flex-shrink: 0;
}

.co-sub {
    max-width: 42ch;
    margin-top: 0.7rem;
    color: var(--sup-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

/* Receipt */

.co-rows {
    margin-top: 1.45rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.co-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.52rem 0;
    font-size: 0.84rem;
}

.co-row dt {
    color: var(--sup-faint);
}

.co-row dd {
    /* dd carries a 40px inline start margin by default. */
    margin: 0;
    color: var(--sup-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.co-row-total {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 215, 0, 0.28);
}

.co-row-total dt {
    color: var(--sup-muted);
    font-weight: 600;
}

.co-row-total dd {
    color: var(--sup-gold);
    font-weight: 700;
    font-size: 1.05rem;
}

/* Shown in the total cell while the credit is still landing. */
.co-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.22);
    border-top-color: var(--sup-gold);
    animation: sub-spin 0.8s linear infinite;
}

/* Perks */

.co-perks {
    list-style: none;
    margin-top: 1.3rem;
    padding: 0;
}

.co-perks li {
    position: relative;
    padding-left: 1.2rem;
    color: var(--sup-muted);
    font-size: 0.8rem;
    line-height: 1.95;
}

.co-perks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--sup-gold);
}

/* Shown when the purchase can't be confirmed yet */

.co-note {
    margin-top: 1.1rem;
    padding: 0.7rem 0.85rem;
    border-left: 2px solid rgba(255, 196, 0, 0.55);
    background-color: rgba(255, 196, 0, 0.06);
    color: #ffd27d;
    font-size: 0.78rem;
    line-height: 1.55;
}

/* Actions */

.co-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.6rem;
}

.co-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.3rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

.co-btn-gold {
    background-color: var(--sup-gold);
    color: #191100;
}

.co-btn-gold:hover {
    background-color: #ffe14d;
}

.co-btn-ghost {
    background-color: transparent;
    color: var(--sup-muted);
    border-color: rgba(255, 255, 255, 0.14);
}

.co-btn-ghost:hover {
    background-color: rgba(255, 215, 0, 0.07);
    color: var(--sup-gold);
    border-color: rgba(255, 215, 0, 0.5);
}

/* Phones */

@media (max-width: 600px) {
    .co-dialog {
        padding: 1.4rem 1.15rem 1.2rem;
    }

    .co-amount {
        font-size: 2.7rem;
    }

    .co-word {
        font-size: 1.8rem;
    }

    .co-title-small .co-word {
        font-size: 1.55rem;
    }

    .co-actions .co-btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .co-dialog[open] {
        animation: none;
    }

    .co-spinner {
        animation: none;
        border-top-color: rgba(255, 215, 0, 0.55);
    }
}

/* Support ticket page */
.tk-head {
    max-width: 680px;
}

.tk-section {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 0 5rem;
}

.tk-card {
    max-width: 680px;
    padding: 2rem 2rem 1.75rem;
}
#ticketCard {
    scroll-margin-top: 90px;
}

/* The auth gate */

html.tk-auth #ticketLocked {
    display: none;
}
html:not(.tk-auth) #ticketCard {
    display: none;
}

/* JS-driven, and it has to beat both rules above. */
#ticketCard[hidden],
#ticketSent[hidden],
#ticketLocked[hidden] {
    display: none !important;
}

/* Progress */

.tk-progress {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0 0 1.9rem;
    padding: 0;
    counter-reset: none;
}

.tk-progress-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
}
.tk-progress-step + .tk-progress-step::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 50%;
    left: -50%;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(100, 193, 255, 0.18);
    transition: background-color 0.25s ease;
}

.tk-progress-step.is-done + .tk-progress-step::before,
.tk-progress-step.is-current + .tk-progress-step::before {
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.tk-progress-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(9, 16, 28, 0.9);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.tk-progress-step.is-current .tk-progress-num {
    background: linear-gradient(160deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
    border-color: rgba(147, 197, 253, 0.5);
    color: #ffffff;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.5);
}
.tk-progress-step.is-done .tk-progress-num {
    background-color: rgba(37, 99, 235, 0.22);
    border-color: rgba(96, 165, 250, 0.55);
    color: #93c5fd;
}

.tk-progress-label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

.tk-progress-step.is-current .tk-progress-label {
    color: var(--text-primary);
    font-weight: 600;
}

/* Steps */

.tk-step {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.tk-legend {
    display: block;
    padding: 0;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tk-lede {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0.4rem 0 1.35rem;
}

/* Step 1 */

.tk-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 0.75rem;
}

.tk-cat {
    display: block;
    cursor: pointer;
}
.tk-cats > .tk-cat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.tk-cat input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.tk-cat-face {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    height: 100%;
    padding: 0.95rem 1rem;
    border-radius: 12px;
    background-color: rgba(9, 16, 28, 0.55);
    border: 1px solid var(--border-color);
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.14s ease;
}

.tk-cat:hover .tk-cat-face {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.5);
    background-color: rgba(15, 28, 56, 0.7);
}

.tk-cat input:focus-visible + .tk-cat-face {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}
.tk-cat input:checked + .tk-cat-face {
    border-color: rgba(96, 165, 250, 0.85);
    background-color: rgba(37, 99, 235, 0.14);
    box-shadow: 0 0 22px -6px rgba(59, 130, 246, 0.55);
}

.tk-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background-color: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.tk-cat input:checked + .tk-cat-face .tk-cat-icon {
    background-color: rgba(37, 99, 235, 0.3);
    border-color: rgba(147, 197, 253, 0.6);
    color: #bfdbfe;
}

.tk-ic {
    display: block;
    width: 20px;
    height: 20px;
}

.tk-cat-text {
    min-width: 0;
}

.tk-cat-name {
    display: block;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.tk-cat-desc {
    display: block;
    margin-top: 0.22rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
}

.tk-cat-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background-color: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    vertical-align: 0.1em;
}

/* Opened from a link that names this category (support?category=mod) */
.tk-cat.is-suggested .tk-cat-face {
    animation: tk-suggest 1.4s ease-out 0.4s 2;
}
@keyframes tk-suggest {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.55);
    }
    100% {
        box-shadow: 0 0 0 14px rgba(255, 215, 0, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tk-cat.is-suggested .tk-cat-face {
        animation: none;
    }
}
.tk-cat.is-locked {
    cursor: default;
}

.tk-cat.is-locked .tk-cat-face {
    opacity: 0.55;
    border-style: dashed;
}
.tk-cat.is-locked:hover .tk-cat-face {
    transform: none;
    border-color: var(--border-color);
    background-color: rgba(9, 16, 28, 0.55);
}

.tk-cat.is-locked .tk-cat-icon {
    color: var(--text-secondary);
    background-color: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.22);
}
.tk-cat.is-locked .tk-cat-badge {
    opacity: 1;
}

.tk-locked-hint {
    margin-top: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background-color: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: var(--text-secondary);
    font-size: 0.83rem;
    line-height: 1.6;
}

.tk-locked-hint[hidden] {
    display: none;
}

.tk-locked-hint strong {
    color: var(--text-primary);
}

.tk-locked-hint a {
    color: #ffd700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4);
}

.tk-locked-hint a:hover {
    border-bottom-color: #ffd700;
}

/* Step 2 / 3 */

.form-field textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background-color: rgba(9, 16, 28, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    resize: vertical;
    min-height: 150px;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.form-field textarea:focus {
    outline: none;
    border-color: rgba(4, 100, 245, 0.8);
    background-color: rgba(15, 28, 56, 0.75);
}

.form-field textarea.invalid {
    border-color: #f87171;
}

.form-field textarea::placeholder,
.form-field input::placeholder {
    color: var(--text-secondary);
    opacity: 0.55;
}
.tk-count {
    margin-top: 0.35rem;
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.tk-count.is-near {
    color: #ffd27d;
}
.tk-count.is-over {
    color: #f87171;
}

/* The category chip on step 3 */

.tk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    padding: 0.45rem 0.5rem 0.45rem 0.9rem;
    border-radius: 999px;
    background-color: rgba(9, 16, 28, 0.7);
    border: 1px solid var(--border-color);
    font-family: "Inter", "Inter Fallback", sans-serif;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.tk-chip:hover {
    border-color: rgba(96, 165, 250, 0.6);
    background-color: rgba(37, 99, 235, 0.1);
}

.tk-chip-label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.tk-chip-value {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.tk-chip-edit {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Actions */

.tk-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.tk-actions-end {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.tk-spacer {
    flex: 1;
}
.tk-actions .btn[hidden] {
    display: none !important;
}

.tk-draft {
    margin-top: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.76rem;
    opacity: 0.75;
}

.tk-draft[hidden] {
    display: none;
}

/* Phones */

@media (max-width: 600px) {
    .tk-card {
        padding: 1.5rem 1.15rem 1.35rem;
    }

    .tk-cats {
        grid-template-columns: minmax(0, 1fr);
    }
    .tk-cat-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tk-cat:hover .tk-cat-face {
        transform: none;
    }

    .tk-legend {
        font-size: 1.1rem;
    }
    .tk-progress-label {
        display: none;
    }

    .tk-progress {
        margin-bottom: 1.5rem;
    }
    .tk-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .tk-actions .btn {
        width: 100%;
        text-align: center;
    }

    .tk-spacer {
        display: none;
    }

    .tk-actions-end {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tk-cat:hover .tk-cat-face {
        transform: none;
    }
}

/* Support card (contact page) */

.contact-support .contact-icon,
.contact-support .contact-action {
    background: linear-gradient(160deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
}

.contact-support:hover {
    border-color: rgba(96, 165, 250, 0.65);
}

/* Footer */

.social-support {
    background: linear-gradient(160deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
}

.social-support:hover {
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5);
}

.game-page {
    --g-accent: #60a5fa;
    --g-deep: #2563eb;
    --g-glow: rgba(96, 165, 250, 0.3);
    --g-tint: rgba(96, 165, 250, 0.1);
    --g-edge: rgba(96, 165, 250, 0.35);
}

.game-page[data-game="skyrim"] {
    --g-accent: #7dd3fc;
    --g-deep: #38bdf8;
    --g-glow: rgba(56, 189, 248, 0.28);
    --g-tint: rgba(56, 189, 248, 0.09);
    --g-edge: rgba(125, 211, 252, 0.34);
}
.game-page[data-game="fallout-4"] {
    --g-accent: #6ee787;
    --g-deep: #22c55e;
    --g-glow: rgba(34, 197, 94, 0.26);
    --g-tint: rgba(34, 197, 94, 0.08);
    --g-edge: rgba(110, 231, 135, 0.32);
}
.game-page[data-game="hogwarts-legacy"] {
    --g-accent: #e0b34d;
    --g-deep: #c9a227;
    --g-glow: rgba(201, 162, 39, 0.28);
    --g-tint: rgba(201, 162, 39, 0.09);
    --g-edge: rgba(224, 179, 77, 0.32);
}
.game-page[data-game="bannerlord"] {
    --g-accent: #f59e5b;
    --g-deep: #ea7a26;
    --g-glow: rgba(234, 122, 38, 0.26);
    --g-tint: rgba(234, 122, 38, 0.09);
    --g-edge: rgba(245, 158, 91, 0.32);
}
.game-page[data-game="hearts-of-iron-4"] {
    --g-accent: #f26565;
    --g-deep: #dc2626;
    --g-glow: rgba(220, 38, 38, 0.26);
    --g-tint: rgba(220, 38, 38, 0.09);
    --g-edge: rgba(242, 101, 101, 0.32);
}

/* Hero */
.gp-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 4.5rem 2rem 3rem;
    text-align: center;
    overflow: hidden;
}

.gp-scene {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 420px;

    overflow: hidden;
    color: var(--g-accent);
    pointer-events: none;
    z-index: -2;
    -webkit-mask-image:
        linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%),
        linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image:
        linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%),
        linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.gp-scene svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Scene motion: one small, game-specific movement per scene. In the home
   page cards it waits for hover. */
.sc {
    transform-box: fill-box;
}
.sc-banner {
    transform-origin: 50% 0;
    animation: sc-sway 5.5s ease-in-out infinite;
}
.sc-banner.sc-d1 {
    animation-duration: 6.4s;
    animation-delay: -2s;
}
.sc-banner.sc-d2 {
    animation-duration: 4.8s;
    animation-delay: -1.1s;
}
.sc-banner.sc-d3 {
    animation-duration: 7s;
    animation-delay: -3.2s;
}
.sc-smoke {
    stroke-dasharray: 14 10;
    animation: sc-smoke 2.6s linear infinite;
}
.sc-fire {
    transform-origin: 50% 60%;
    animation: sc-fire 1.8s ease-in-out infinite;
}
.sc-aurora {
    animation: sc-drift 16s ease-in-out infinite alternate;
}
.sc-aurora.sc-d1 {
    animation-duration: 21s;
    animation-delay: -6s;
}
.sc-aurora.sc-d2 {
    animation-duration: 13s;
    animation-delay: -3s;
}
.sc-signal {
    animation: sc-signal 2.8s ease-out infinite;
}
.sc-signal.sc-d1 {
    animation-delay: 0.35s;
}
.sc-beacon {
    animation: sc-beacon 2.8s linear infinite;
}
.sc-flick {
    animation: sc-flick 6s linear infinite;
}
.sc-flick.sc-d0 {
    animation: sc-glow 4.5s ease-in-out infinite alternate;
}
.sc-flick.sc-d1 {
    animation-duration: 7.3s;
    animation-delay: -2s;
}
.sc-flick.sc-d2 {
    animation-duration: 5.1s;
    animation-delay: -4s;
}
.sc-flick.sc-d3 {
    animation-duration: 8.2s;
    animation-delay: -1s;
}
.sc-pennant {
    transform-origin: 0 50%;
    animation: sc-wave 3.2s ease-in-out infinite;
}
.sc-pennant.sc-d1 {
    animation-delay: -0.8s;
}
.sc-pennant.sc-d2 {
    animation-duration: 3.8s;
    animation-delay: -1.9s;
}
.sc-pennant.sc-d3 {
    animation-delay: -2.4s;
}
.gcard-art .sc {
    animation-play-state: paused;
}
.gcard:hover .gcard-art .sc,
.gcard:focus-visible .gcard-art .sc {
    animation-play-state: running;
}
@keyframes sc-sway {
    0%,
    100% {
        transform: skewX(-3deg);
    }
    50% {
        transform: skewX(3deg);
    }
}
@keyframes sc-smoke {
    to {
        stroke-dashoffset: -48;
    }
}
@keyframes sc-fire {
    0%,
    100% {
        opacity: 0.85;
        transform: scale(1);
    }
    30% {
        opacity: 1;
        transform: scale(1.08);
    }
    55% {
        opacity: 0.7;
        transform: scale(0.95);
    }
    80% {
        opacity: 0.95;
        transform: scale(1.04);
    }
}
@keyframes sc-drift {
    from {
        transform: translateX(-28px);
    }
    to {
        transform: translateX(28px);
    }
}
@keyframes sc-signal {
    0%,
    100% {
        opacity: 0.15;
    }
    18% {
        opacity: 1;
    }
    60% {
        opacity: 0.15;
    }
}
@keyframes sc-beacon {
    0%,
    10% {
        opacity: 0.95;
    }
    11%,
    100% {
        opacity: 0.15;
    }
}
@keyframes sc-flick {
    0%,
    47%,
    54%,
    100% {
        opacity: 1;
    }
    48% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.95;
    }
    52% {
        opacity: 0.55;
    }
    80% {
        opacity: 0.85;
    }
}
@keyframes sc-glow {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}
@keyframes sc-wave {
    0%,
    100% {
        transform: skewY(-5deg) scaleX(0.96);
    }
    50% {
        transform: skewY(5deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sc {
        animation: none !important;
    }
}

.gp-hero::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    width: 780px;
    max-width: 130%;
    height: 620px;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse 320px 260px at 50% 42%, var(--g-glow) 0%, transparent 70%),
        radial-gradient(ellipse 560px 420px at 50% 40%, var(--g-tint) 0%, transparent 72%);
    pointer-events: none;

    z-index: -1;
}

.gp-hero > *:not(.gp-scene) {
    position: relative;
}

/* Heroes that open with their label (no icon above it). */
.gp-scene + .gp-eyebrow,
.gp-scene + .gp-h1,
.gp-scene + .gp-credit {
    margin-top: 1.5rem;
}
/* On some pages the label sits inside the <h1> so the heading names the
   game. The h1 itself adds no styling; the spans keep their own. */
.gp-h1 {
    margin: 0;
    font: inherit;
}
.gp-h1 .gp-eyebrow {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.gp-h1 .gp-title {
    display: block;
}
.gp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
    color: var(--g-accent);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.gp-eyebrow::before,
.gp-eyebrow::after {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.gp-title {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 3.3rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 17ch;
    margin: 0 auto;
    color: var(--text-primary);
    text-wrap: balance;
}

/* Hero titles in each game's colours */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .gp-title {
        padding-bottom: 0.1em;
        background: linear-gradient(
            100deg,
            color-mix(in srgb, var(--g-accent) 30%, #fff) 0%,
            var(--g-accent) 48%,
            var(--g-deep) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.gp-lede {
    max-width: 58ch;
    margin: 1.15rem auto 0;
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.7;
}

.gp-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 2rem;
}
.gp-btn-game {
    background: linear-gradient(160deg, var(--g-accent) 0%, var(--g-deep) 100%);
    color: #0a1020;
    border: 1px solid var(--g-edge);
    box-shadow: 0 0 26px -6px var(--g-glow);
    font-weight: 700;
}

.gp-btn-game:hover {
    box-shadow: 0 0 38px -4px var(--g-glow);
}

/* Dialogue demo */

.game-page .dialogue {
    border-color: var(--g-edge);
    box-shadow: 0 26px 60px -30px var(--g-glow);
}

.game-page .dialogue::after {
    background: radial-gradient(circle, var(--g-glow) 0%, transparent 70%);
}

.game-page .line-npc {
    border-left-color: var(--g-accent);
}
.game-page .line-npc .line-who {
    color: var(--g-accent);
}
.game-page .dialogue-head {
    border-bottom-color: var(--g-edge);
}
.game-page .dialogue-note {
    border-top-color: var(--g-edge);
}

.gp-demo-cap {
    max-width: 720px;
    margin: 0.9rem auto 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: center;
    opacity: 0.85;
}

/* Clip slot */
.gp-clip {
    width: 100%;
    max-width: 820px;
    margin: 0 auto 1.6rem;
    container-type: inline-size;
}

.gp-clip-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 56.25cqw;
    padding: 1.5rem;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid var(--g-edge, var(--border-color));
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: 0 16px 44px -28px var(--g-glow, rgba(96, 165, 250, 0.3));
    background-image:
        radial-gradient(120% 90% at 50% 0%, var(--g-tint, rgba(96, 165, 250, 0.1)) 0%, transparent 70%),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 9px),
        linear-gradient(var(--g-accent, #93c5fd), var(--g-accent, #93c5fd)),
        linear-gradient(var(--g-accent, #93c5fd), var(--g-accent, #93c5fd)),
        linear-gradient(var(--g-accent, #93c5fd), var(--g-accent, #93c5fd)),
        linear-gradient(var(--g-accent, #93c5fd), var(--g-accent, #93c5fd)),
        linear-gradient(var(--g-accent, #93c5fd), var(--g-accent, #93c5fd)),
        linear-gradient(var(--g-accent, #93c5fd), var(--g-accent, #93c5fd)),
        linear-gradient(var(--g-accent, #93c5fd), var(--g-accent, #93c5fd)),
        linear-gradient(var(--g-accent, #93c5fd), var(--g-accent, #93c5fd));
    background-repeat:
        no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat;
    background-size:
        auto,
        auto,
        22px 1.5px,
        1.5px 22px,
        22px 1.5px,
        1.5px 22px,
        22px 1.5px,
        1.5px 22px,
        22px 1.5px,
        1.5px 22px;
    background-position:
        center top,
        0 0,
        left 18px top 18px,
        left 18px top 18px,
        right 18px top 18px,
        right 18px top 18px,
        left 18px bottom 18px,
        left 18px bottom 18px,
        right 18px bottom 18px,
        right 18px bottom 18px;
}
.gp-clip-frame::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 30px;
    margin-bottom: 0.15rem;
    background-color: var(--g-accent, #93c5fd);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    opacity: 0.9;
}
.gp-clip-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--g-accent, #93c5fd);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gp-clip-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: gp-clip-pulse 2.6s ease-out infinite;
}

@keyframes gp-clip-pulse {
    0% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: 1;
    }
    70% {
        box-shadow: 0 0 0 7px transparent;
        opacity: 0.65;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-clip-status::before {
        animation: none;
    }
}
.gp-clip-what {
    max-width: 44ch;
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: balance;
}
.gp-clip.is-filled .gp-clip-frame {
    display: block;
    padding: 0;
    height: 56.25cqw;
    min-height: 0;

    background-image: none;
    background-color: #000;
}

.gp-clip.is-filled .gp-clip-frame::before {
    content: none;
}

.gp-clip.is-filled .gp-clip-frame > * {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}
.video-frame.is-empty {
    border: 0;
    box-shadow: none;
    background-color: transparent;
    aspect-ratio: auto;
    container-type: inline-size;
}

@media (max-width: 600px) {
    .gp-clip-frame {
        padding: 1.1rem;
        gap: 0.55rem;
        background-size:
            auto,
            auto,
            16px 1.5px,
            1.5px 16px,
            16px 1.5px,
            1.5px 16px,
            16px 1.5px,
            1.5px 16px,
            16px 1.5px,
            1.5px 16px;
        background-position:
            center top,
            0 0,
            left 12px top 12px,
            left 12px top 12px,
            right 12px top 12px,
            right 12px top 12px,
            left 12px bottom 12px,
            left 12px bottom 12px,
            right 12px bottom 12px,
            right 12px bottom 12px;
    }
    .gp-clip-frame::before {
        width: 21px;
        height: 24px;
    }
    .gp-clip-status {
        font-size: 0.66rem;
        letter-spacing: 0.1em;
    }
    .gp-clip-what {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* pull the brackets in with the padding */
}

/* Requirements checklist */

.gp-reqs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.gp-req {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.95rem 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: rgba(9, 16, 28, 0.5);
}

.gp-req-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 0.1rem;
    border-radius: 50%;
    background-color: var(--g-tint);
    border: 1px solid var(--g-edge);
    color: var(--g-accent);
}

.gp-req-tick svg {
    width: 12px;
    height: 12px;
}

.gp-req-name {
    display: block;
    color: var(--text-primary);
    font-size: 0.93rem;
    font-weight: 600;
}

.gp-req-note {
    display: block;
    margin-top: 0.18rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.55;
}
.gp-req-warn .gp-req-tick {
    background-color: rgba(255, 196, 0, 0.12);
    border-color: rgba(255, 196, 0, 0.4);
    color: #ffc400;
}

/* Accented site components */

.game-page .about-head.head-left .section-title::before,
.game-page .block-h::before {
    background: linear-gradient(180deg, var(--g-accent), var(--g-deep));
    box-shadow: 0 0 10px var(--g-glow);
}

.game-page .eyebrow {
    color: var(--g-accent);
}

.game-page .step-num {
    background: linear-gradient(160deg, var(--g-accent) 0%, var(--g-deep) 100%);
    border-color: var(--g-edge);
    color: #0a1020;
    box-shadow: 0 0 16px var(--g-glow);
}

.game-page .step:hover,
.game-page .feature:hover {
    border-color: var(--g-edge);
    box-shadow: 0 18px 38px -16px var(--g-glow);
}

.game-page .feature::after {
    background: radial-gradient(circle, var(--g-glow) 0%, transparent 70%);
}

.game-page .faq-item:hover,
.game-page .faq-item[open] {
    border-color: var(--g-edge);
}

.game-page .faq-q::after {
    border-right-color: var(--g-accent);
    border-bottom-color: var(--g-accent);
}

.game-page .compare-after {
    border-color: var(--g-edge);
    box-shadow: 0 0 34px -12px var(--g-glow);
}

.game-page .compare-after .compare-tag {
    background-color: var(--g-tint);
    border-color: var(--g-edge);
    color: var(--g-accent);
}

.game-page .compare-after .compare-list li::before {
    background-color: var(--g-tint);
    color: var(--g-accent);
}

.game-page .callout {
    border-color: var(--g-edge);
    box-shadow: 0 20px 50px -22px var(--g-glow);
}

.game-page .callout::after {
    background: radial-gradient(circle, var(--g-glow) 0%, transparent 70%);
}

.game-page .cta-band {
    border-color: var(--g-edge);
    box-shadow: 0 26px 60px -30px var(--g-glow);
}

.game-page .cta-band::after {
    background: radial-gradient(ellipse at center, var(--g-glow) 0%, transparent 70%);
}

/* Other-games row */

.gp-others {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.gp-other {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background-color: rgba(9, 16, 28, 0.5);
    text-decoration: none;
    text-align: center;
    transition:
        transform 0.15s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.gp-other:hover {
    transform: translateY(-3px);
    border-color: var(--o-edge);
    background-color: var(--o-tint);
}

.gp-other svg {
    width: 26px;
    height: 26px;
    color: var(--o-accent);
}

.gp-other span {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.gp-other small {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

/* Phones */

@media (max-width: 700px) {
    .gp-hero {
        padding: 3rem 0 2rem;
    }
    .gp-title {
        font-size: 2.1rem;
        max-width: 100%;
    }
    .gp-lede {
        font-size: 1rem;
    }
    .gp-cta .btn {
        width: 100%;
        text-align: center;
    }

    .gp-others {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-other:hover {
        transform: none;
    }
}

/* In-page jump nav */

.gp-jump {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 0 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.gp-jump::-webkit-scrollbar {
    display: none;
}

.gp-jump a {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background-color: rgba(9, 16, 28, 0.6);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.gp-jump a:hover,
.gp-jump a:focus-visible {
    color: var(--g-accent);
    border-color: var(--g-edge);
    background-color: var(--g-tint);
}

/* History tab */

.game-page[data-game="history"] {
    --g-accent: #67d8c3;
    --g-deep: #2bb59c;
    --g-glow: rgba(43, 181, 156, 0.26);
    --g-tint: rgba(43, 181, 156, 0.09);
    --g-edge: rgba(103, 216, 195, 0.32);
}
.hist-reqs {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.hist-matchups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 0.9rem;
    width: 100%;
}

.hist-match {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.1rem 1.2rem 1.15rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(15, 28, 56, 0.72) 0%, rgba(9, 17, 34, 0.72) 100%);
}

.hist-match-who {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.hist-match-q {
    color: #cbd5e1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.6;
}
@media (max-width: 600px) {
    .hist-match:nth-child(n + 7) {
        display: none;
    }
}

.hist-match-q::before {
    content: "\201C";
}
.hist-match-q::after {
    content: "\201D";
}

.hist-match-tag {
    align-self: flex-start;
    margin-top: auto;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--g-edge, var(--border-color));
    background-color: var(--g-tint, rgba(37, 99, 235, 0.1));
    color: var(--g-accent, #93c5fd);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Medallions */
.medal {
    --m: #60a5fa;
    --ms: 64px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ms);
    height: var(--ms);
    border-radius: 50%;
    border: 2px solid var(--m);
    background: #10203d;
    background: radial-gradient(
        circle at 38% 30%,
        color-mix(in srgb, var(--m) 62%, #000) 0%,
        color-mix(in srgb, var(--m) 24%, #000) 85%
    );
    color: #f1f5f9;
    color: color-mix(in srgb, var(--m) 22%, #fff);
    font-family: Georgia, "Times New Roman", serif;
    font-size: calc(var(--ms) * 0.34);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px var(--medal-cut, #0b1a33);
}

.medal::after {
    content: "";
    position: absolute;
    inset: calc(var(--ms) * 0.085);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--m) 65%, #fff) 45%, transparent);
    pointer-events: none;
}
.medal-1 {
    font-size: calc(var(--ms) * 0.42);
}

.medal-stack {
    display: inline-flex;
    align-items: center;
}

.medal-stack .medal + .medal {
    margin-left: calc(var(--ms) * -0.22);
}
.hist-cast {
    margin-bottom: 1.5rem;
    --medal-cut: #0f2547;
}

.hist-cast .medal {
    --ms: 72px;
    animation: cast-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@media (max-width: 700px) {
    .hist-cast .medal {
        --ms: 52px;
    }
}
.hist-scene-head {
    justify-content: flex-start;
    gap: 1.1rem;
}

.hist-scene-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    padding-right: 1.1rem;
    border-right: 1px solid var(--g-edge);
}

.hist-scene-year {
    color: var(--g-accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.hist-scene-title {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    min-width: 0;
}
@media (max-width: 600px) {
    .hist-scene-head {
        flex-wrap: wrap;
        gap: 0.6rem;
    }
    .hist-scene-when {
        align-items: flex-start;
        padding-right: 0;
        border-right: 0;
    }
    .hist-scene-year {
        font-size: 2rem;
    }
    .hist-scene-title {
        flex-basis: 100%;
    }
}

.hist-match {
    --medal-cut: #0e1b37;
}
.hist-match .medal {
    --ms: 38px;
}
.hist-match .medal-stack .medal + .medal {
    margin-left: calc(var(--ms) * -0.1);
}
.hist-match .medal-stack {
    margin-bottom: 0.2rem;
}

/* Links in a section subtitle (the FAQ intro on history.html). */
.section-subtitle a {
    color: #60a5fa;
    text-decoration: none;
    border-bottom: 1px solid rgba(96, 165, 250, 0.35);
}

.game-page .section-subtitle a {
    color: var(--g-accent);
    border-bottom-color: var(--g-edge);
}
.gp-jump {
    justify-content: flex-start;
}

.gp-jump a:first-of-type {
    margin-left: auto;
}
.gp-jump a:last-of-type {
    margin-right: auto;
}

@keyframes cast-in {
    0% {
        opacity: 0;
        transform: translateY(-26px) scale(0.7) rotate(-14deg);
    }
    60% {
        opacity: 1;
        transform: translateY(4px) scale(1.04) rotate(3deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
.hist-cast .medal:nth-child(2) {
    animation-delay: 0.08s;
}
.hist-cast .medal:nth-child(3) {
    animation-delay: 0.16s;
}
.hist-cast .medal:nth-child(4) {
    animation-delay: 0.24s;
}
.hist-cast .medal:nth-child(5) {
    animation-delay: 0.32s;
}
.hist-cast .medal:nth-child(6) {
    animation-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
    .hist-cast .medal {
        animation: none;
    }
}

/* Today in the History tab */
.sec-today {
    padding-top: 1.25rem;
    gap: 1rem;
}

.today-title {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

#today-card {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.today-fallback {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.today {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.35rem 1.6rem;
    border-radius: 18px;
    border: 1px solid var(--g-edge);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--g-tint) 0%, transparent 60%),
        linear-gradient(180deg, rgba(15, 28, 56, 0.85) 0%, rgba(9, 17, 34, 0.85) 100%);
    box-shadow: 0 22px 50px -30px var(--g-glow);
}

.today-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5.2rem;
    padding-right: 1.4rem;
    border-right: 1px solid var(--g-edge);
}

.today-day {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--g-accent);
}

.today-month {
    margin-top: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.today-kind {
    color: var(--g-accent);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.today-head {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.today-text {
    margin-top: 0.35rem;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
}

.today-opener {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1.05rem;
}
.today-opener::before {
    content: "\201C";
}
.today-opener::after {
    content: "\201D";
}

.today-also {
    margin-top: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
}

.today-cast {
    --medal-cut: #0e1c3a;
}
.today-cast .medal {
    --ms: 58px;
}

@media (max-width: 640px) {
    .today {
        grid-template-columns: auto 1fr;
        gap: 1rem 1.1rem;
        padding: 1.1rem 1.15rem;
    }
    .today-date {
        min-width: 0;
        padding-right: 1rem;
    }
    .today-day {
        font-size: 2.4rem;
    }
    .today-cast {
        grid-column: 1 / -1;
    }
    .today-cast .medal {
        --ms: 46px;
    }
}

/* Scene tabs */
.scene-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: -1rem;
}

.scene-tabs[hidden] {
    display: none;
}

.scene-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 11.5rem;
    padding: 0.7rem 1.1rem 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background-color: rgba(9, 16, 28, 0.55);
    color: var(--text-secondary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.scene-tab:hover {
    border-color: var(--g-edge);
    color: var(--text-primary);
}

.scene-tab[aria-selected="true"] {
    border-color: var(--g-accent);
    background-color: var(--g-tint);
    color: var(--text-primary);
    box-shadow: 0 0 24px -10px var(--g-glow);
}

.scene-tab:focus-visible {
    outline: 2px solid var(--g-accent);
    outline-offset: 3px;
}

.scene-tab-year {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--g-accent);
}

.scene-tab-era,
.hist-scene-era {
    margin-left: 0.25em;
    font-size: 0.55em;
    letter-spacing: 0.04em;
}

.scene-tab-title {
    font-size: 0.85rem;
    font-weight: 600;
}

.scene-panel[hidden] {
    display: none;
}
.game-page .line-npc[style] {
    border-left-color: var(--who);
}
.game-page .line-npc[style] .line-who {
    color: var(--who);
}

.hist-scene-cast {
    margin-left: auto;
    --medal-cut: #0f203f;
}
.hist-scene-cast .medal {
    --ms: 40px;
}
.hist-scene-cast .medal + .medal {
    margin-left: calc(var(--ms) * -0.12);
}

@media (max-width: 600px) {
    .scene-tab {
        min-width: 0;
        flex: 1 1 30%;
        padding: 0.6rem 0.75rem;
    }
    .scene-tab-year {
        font-size: 1.15rem;
    }
    .scene-tab-title {
        font-size: 0.75rem;
    }
    .hist-scene-cast {
        display: none;
    }
}

/* Seat a table */
.table-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    width: 100%;
}

.seat-wall {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(15, 28, 56, 0.6) 0%, rgba(9, 17, 34, 0.6) 100%);
    --medal-cut: transparent;
}

.seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.25rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease,
        color 0.18s ease;
}

.seat .medal {
    --ms: 52px;
    box-shadow: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.seat-name {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.seat:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}
.seat:hover .medal {
    transform: translateY(-2px);
}
.seat:focus-visible {
    outline: 2px solid var(--g-accent);
    outline-offset: 2px;
}

.seat[aria-pressed="true"] {
    border-color: var(--g-edge);
    background-color: var(--g-tint);
    color: var(--text-primary);
}

.seat[aria-pressed="true"] .medal {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 3px #0c1a33,
        0 0 0 5px var(--m),
        0 8px 20px -6px var(--m);
}
.seat.is-full {
    opacity: 0.38;
}
.seat.is-full:hover {
    opacity: 0.7;
}

.table-panel {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 22rem;
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: 18px;
    border: 1px solid var(--g-edge);
    background:
        radial-gradient(110% 80% at 50% 0%, var(--g-tint) 0%, transparent 65%),
        linear-gradient(180deg, rgba(17, 34, 64, 0.9) 0%, rgba(9, 17, 34, 0.92) 100%);
    box-shadow: 0 26px 60px -32px var(--g-glow);
}

.table-seats {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.table-seats .medal {
    --ms: 74px;
    box-shadow: none;
}

.seat-empty {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1.5px dashed rgba(148, 163, 184, 0.35);
    background: rgba(9, 16, 28, 0.4);
}

@keyframes sit-down {
    0% {
        transform: translateY(-14px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
.medal.is-seated {
    animation: sit-down 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
@media (prefers-reduced-motion: reduce) {
    .medal.is-seated {
        animation: none;
    }
}

.table-kind {
    color: var(--g-accent);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.table-head {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    text-align: center;
    text-wrap: balance;
}

.table-note {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    text-align: center;
}

.table-q {
    margin-top: 0.5rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background-color: rgba(4, 10, 22, 0.45);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}
.table-q::before {
    content: "\201C";
}
.table-q::after {
    content: "\201D";
}

.table-q-src {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
}

.table-facts {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.table-facts li {
    position: relative;
    padding-left: 1.4rem;
    color: #cbd5e1;
    font-size: 0.86rem;
    line-height: 1.5;
}

.table-facts li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--text-secondary);
}

.table-facts .fact-scene::before {
    background-color: var(--g-accent);
    box-shadow: 0 0 8px var(--g-glow);
}
.table-facts .fact-near::before {
    background-color: #fcd34d;
}
.table-facts .fact-badge::before {
    width: 10px;
    height: 10px;
    left: 0.1rem;
    top: 0.35em;
    border-radius: 0;
    background-color: #e0b34d;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.table-facts strong {
    color: var(--text-primary);
    font-weight: 600;
}

.table-cost {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.table-clear {
    align-self: center;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    padding: 0.45rem 1.2rem;
}
.table-more {
    display: none;
}

@media (max-width: 860px) {
    .table-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }
    .table-panel {
        order: -1;
        top: 64px;
        z-index: 5;
        min-height: 0;
        gap: 0.35rem;
        padding: 0.85rem 1rem 0.95rem;
        background: linear-gradient(180deg, #11234a 0%, #0b1730 100%);
        box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.8);
    }
    .table-seats {
        margin-bottom: 0.2rem;
        gap: 0.45rem;
    }
    .table-seats .medal {
        --ms: 46px;
    }
    .seat-empty {
        width: 46px;
        height: 46px;
    }
    .table-kind {
        font-size: 0.75rem;
    }
    .table-head {
        font-size: 1rem;
    }
    .table-q {
        margin-top: 0.2rem;
        padding: 0.55rem 0.75rem;
        font-size: 0.95rem;
    }
    .table-panel .table-facts,
    .table-panel .table-q-src,
    .table-panel .table-cost,
    .table-panel .table-clear,
    .table-panel .table-note {
        display: none;
    }

    .table-more:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 1rem 1.1rem 1.1rem;
        border-radius: 16px;
        border: 1px solid var(--g-edge);
        background: linear-gradient(180deg, rgba(17, 34, 64, 0.85) 0%, rgba(9, 17, 34, 0.9) 100%);
    }
    .table-more .table-facts {
        margin: 0;
    }
    .table-more .table-cost {
        margin-top: 0;
    }

    .seat-wall {
        padding: 0.6rem;
        gap: 0.15rem;
    }
    .seat {
        padding: 0.45rem 0.1rem;
    }
    .seat-name {
        font-size: 0.66rem;
    }
    .seat .medal {
        --ms: 44px;
    }
}

/* Timeline */
.tl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    width: 100%;
    margin-bottom: -1.6rem;
}

.tl-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background-color: rgba(9, 16, 28, 0.6);
    color: var(--text-secondary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.tl-filter[style]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--m);
}

.tl-filter:hover {
    color: var(--text-primary);
    border-color: rgba(148, 163, 184, 0.45);
}
.tl-filter[aria-pressed="true"] {
    color: var(--text-primary);
    border-color: var(--m, var(--g-accent));
    background-color: rgba(255, 255, 255, 0.05);
}
.tl-filter:focus-visible {
    outline: 2px solid var(--g-accent);
    outline-offset: 2px;
}

.tl-count {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: -2rem;
}

.timeline {
    position: relative;
    width: 100%;
}

.tl-frame {
    width: 100%;
    overflow-x: auto;
    padding: 1rem 1rem 0.4rem;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(15, 28, 56, 0.6) 0%, rgba(9, 17, 34, 0.6) 100%);
    scrollbar-width: thin;
}

.tl-svg {
    display: block;
    width: 100%;
    min-width: 820px;
    height: auto;
}

.tl-grid {
    stroke: rgba(148, 163, 184, 0.1);
    stroke-width: 1;
}
.tl-grid-break {
    stroke: rgba(148, 163, 184, 0.28);
    stroke-dasharray: 3 4;
}
.tl-tick {
    fill: var(--text-secondary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 11px;
}

.tl-bar {
    cursor: pointer;
    transition:
        opacity 0.25s ease,
        filter 0.15s ease;
}
.tl-bar.is-dim {
    opacity: 0.1;
}
.tl-bar.is-hover {
    filter: brightness(1.35) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}
.tl-pending .tl-bar {
    transform: scaleX(0);
    transform-box: fill-box;
    transform-origin: left center;
}
.tl-drawn .tl-bar {
    transform-box: fill-box;
    transform-origin: left center;
    animation: tl-draw 0.6s cubic-bezier(0.3, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i) * 18ms);
}
@keyframes tl-draw {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.tl-tip {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 13rem;
    max-width: 17rem;
    padding: 0.6rem 0.85rem 0.6rem 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--g-edge);
    background-color: rgba(8, 15, 30, 0.97);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.7);
    transform: translate(-50%, calc(-100% - 10px));
    pointer-events: none;
    --medal-cut: transparent;
}
.tl-tip[hidden] {
    display: none;
}
.tl-tip .medal {
    --ms: 38px;
    box-shadow: none;
}
.tl-tip-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.tl-tip-text strong {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
}
.tl-tip-text span {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

/* Timeline eras, scrubber and overlap picker */
.tl-era {
    fill: rgba(148, 163, 184, 0.025);
}
.tl-era-alt {
    fill: rgba(103, 216, 195, 0.035);
}
.tl-era-label {
    fill: #64748b;
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tl-scrub {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.tl-scrub.is-on {
    opacity: 1;
}
.tl-scrub line {
    stroke: #fcd34d;
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
}
.tl-scrub circle {
    fill: #fcd34d;
    filter: drop-shadow(0 0 4px #fcd34d);
}
.tl-scrub rect {
    fill: rgba(8, 15, 30, 0.92);
    stroke: rgba(252, 211, 77, 0.6);
}
.tl-scrub text {
    fill: #fde68a;
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 11px;
    font-weight: 600;
}
.tl-svg.is-scrub .tl-bar:not(.is-alive) {
    opacity: 0.16;
}
.tl-svg.is-scrub .tl-bar.is-alive {
    filter: brightness(1.15) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}
.tl-svg.is-pair .tl-bar:not(.is-picked) {
    opacity: 0.1;
}
.tl-svg.is-pair .tl-bar.is-picked {
    filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}
.tl-facts {
    margin-top: -0.4rem;
}
.tl-facts-k {
    color: var(--text-primary);
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1rem;
    font-weight: 600;
}
.tl-fact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}
.tl-fact {
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(252, 211, 77, 0.25);
    background: rgba(5, 10, 28, 0.5);
    color: #cbd5e1;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tl-fact:hover {
    border-color: rgba(252, 211, 77, 0.6);
    color: #ffffff;
}
.tl-fact[aria-pressed="true"] {
    border-color: #fcd34d;
    background: rgba(252, 211, 77, 0.14);
    color: #fff3c4;
    transform: translateY(-2px);
}
.tl-fact:focus-visible {
    outline: 2px solid #fde68a;
    outline-offset: 2px;
}
.tl-fact-text {
    min-height: 3rem;
    margin-top: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    border-left: 3px solid #fcd34d;
    background: rgba(252, 211, 77, 0.06);
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.tl-hint {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: -1.8rem;
    opacity: 0.85;
}
.myth-h {
    margin-bottom: 0.6rem;
}
.myth-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    margin-top: -1rem;
    --medal-cut: transparent;
}

.myth-group {
    padding: 0.9rem 1rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(15, 28, 56, 0.6) 0%, rgba(9, 17, 34, 0.6) 100%);
    flex: 1 1 auto;
}
.myth-group-wide {
    flex-basis: 100%;
}

.myth-group-h {
    margin-bottom: 0.7rem;
    color: #a5b4fc;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
}
.myth-group-h span {
    color: var(--text-secondary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-weight: 500;
    margin-left: 0.2rem;
}

.myth-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.4rem;
}

.myth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 4.6rem;
}

.myth .medal {
    --ms: 42px;
    box-shadow: none;
}

.myth-name {
    color: #cbd5e1;
    font-size: 0.7rem;
    line-height: 1.25;
    text-align: center;
}

/* Name list */
.all-names .faq-q {
    color: var(--text-primary);
}

.all-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem 1.6rem;
    padding-top: 0.4rem;
}

.all-tab-h {
    margin-bottom: 0.35rem;
    color: var(--m);
    font-size: 0.85rem;
    font-weight: 700;
}
.all-tab-h span {
    color: var(--text-secondary);
    font-weight: 500;
    margin-left: 0.25rem;
}
.all-tab p {
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.65;
}

/* Codex badge strip */
.badge-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.badge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(224, 179, 77, 0.22);
    background: linear-gradient(180deg, rgba(30, 30, 40, 0.55) 0%, rgba(12, 16, 30, 0.7) 100%);
}

.badge-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid #e0b34d;
    background: radial-gradient(circle at 38% 30%, #6b5320 0%, #2a2009 85%);
}
.badge-star svg {
    width: 20px;
    height: 20px;
    fill: #f5d98b;
}

.badge-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.badge-text strong {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
}
.badge-text span {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Way of speaking */
.voices {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 1.5rem;
    align-items: center;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.voice-card {
    padding: 1.3rem 1.4rem;
    border-radius: 18px;
    border: 1px solid var(--g-edge);
    background: linear-gradient(180deg, rgba(17, 34, 64, 0.85) 0%, rgba(9, 17, 34, 0.9) 100%);
    --medal-cut: transparent;
}

.voice-who {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.voice-who .medal {
    --ms: 48px;
    box-shadow: none;
}
.voice-who strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.voice-q {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.voice-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background-color: rgba(9, 16, 28, 0.6);
    margin-bottom: 1rem;
}

.voice-btn {
    flex: 1 1 auto;
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.voice-btn[aria-pressed="true"] {
    background-color: var(--g-tint);
    color: var(--g-accent);
    box-shadow: inset 0 0 0 1px var(--g-edge);
}
.voice-btn:focus-visible {
    outline: 2px solid var(--g-accent);
    outline-offset: 2px;
}

.voice-text {
    min-height: 7.5rem;
}

@keyframes voice-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.voice-line {
    color: var(--text-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.6;
    animation: voice-in 0.3s ease both;
}
.voice-line[hidden] {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .voice-line {
        animation: none;
    }
}

.voice-cap {
    margin-top: 0.7rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

@media (max-width: 760px) {
    .voices {
        grid-template-columns: minmax(0, 1fr);
    }
}
.game-page[data-game="history"] .gp-clip:not(.is-filled) .gp-clip-frame {
    min-height: 0;
    padding: 1.4rem 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
}
.game-page[data-game="history"] .gp-clip:not(.is-filled) .gp-clip-frame::before {
    width: 18px;
    height: 21px;
    margin: 0;
}
.game-page[data-game="history"] .gp-clip:not(.is-filled) .gp-clip-what {
    font-size: 0.92rem;
}

/* Game page */
.gp-launch-note {
    max-width: 34rem;
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
}
.gp-launch-note[hidden] {
    display: none;
}
.gp-launch-note a {
    color: var(--g-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Game page */
.gp-costs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.7rem;
    width: 100%;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}
.gp-cost {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--g-edge, var(--border-color));
    background: linear-gradient(180deg, var(--g-tint, rgba(37, 99, 235, 0.08)) 0%, rgba(9, 16, 28, 0.5) 100%);
}
.gp-cost-what {
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.gp-cost-n {
    color: var(--text-primary);
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}
.gp-cost-price {
    color: var(--g-accent, #93c5fd);
    font-size: 0.9rem;
    font-weight: 600;
}
.gp-cost-foot {
    margin: 0.7rem 0 1.4rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.gp-ours-cta {
    align-self: flex-start;
    margin-top: 1.2rem;
}

/* Run the talks yourself */
.dip[hidden] {
    display: none;
}
.dip-head {
    flex-wrap: wrap;
}
.dip-meters {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
}
.dip-meter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.dip-meter-name {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.dip-pips {
    display: inline-flex;
    gap: 4px;
}
.dip-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--g-edge);
    background: transparent;
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}
.dip-pip.is-on {
    background: var(--g-accent);
    box-shadow: 0 0 8px var(--g-glow);
}
.dip-bar {
    position: relative;
    width: 84px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--g-edge);
    overflow: hidden;
}
.dip-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, var(--g-deep), var(--g-accent));
    transition: width 0.45s ease;
}

.dip-gap {
    margin: 0.3rem 0;
}
.dip-tag {
    display: inline-block;
    margin-left: 0.55rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 196, 0, 0.4);
    background-color: rgba(255, 196, 0, 0.1);
    color: #ffc400;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
}
.dip-in {
    animation: dip-in 0.35s ease both;
}
@keyframes dip-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.dip-dots {
    display: inline-flex;
    gap: 5px;
    padding: 0.55rem 0;
}
.dip-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--g-accent);
    opacity: 0.35;
    animation: dip-dot 0.9s ease-in-out infinite;
}
.dip-dots i:nth-child(2) {
    animation-delay: 0.15s;
}
.dip-dots i:nth-child(3) {
    animation-delay: 0.3s;
}
@keyframes dip-dot {
    0%,
    100% {
        opacity: 0.25;
    }
    50% {
        opacity: 1;
    }
}

.dip-prompt {
    position: relative;
    margin: 1.5rem 0 0.7rem;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
}
.dip-prompt[hidden],
.dip-choices[hidden],
.dip-result[hidden] {
    display: none;
}
.dip-choices {
    position: relative;
    display: grid;
    gap: 0.6rem;
}
.dip-choice {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: rgba(9, 16, 28, 0.55);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}
.dip-choice:hover {
    border-color: var(--g-edge);
    background-color: var(--g-tint);
    transform: translateY(-1px);
}
.dip-choice:focus-visible {
    outline: 2px solid var(--g-accent);
    outline-offset: 3px;
}
.dip-choice-label {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
}
.dip-choice-line {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}
.dip-result {
    position: relative;
    margin-top: 1.6rem;
    text-align: left;
}
.dip-treaty {
    position: relative;
    padding: 1.4rem 1.5rem 1.3rem;
    border-radius: 12px;
    border: 1px solid var(--g-edge);
    background:
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(242, 101, 101, 0.05) 31px 32px),
        linear-gradient(160deg, rgba(220, 38, 38, 0.1), rgba(9, 16, 28, 0.6));
    animation: dip-in 0.45s ease both;
}
.dip-treaty-kicker {
    color: var(--g-accent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.dip-treaty-title {
    margin: 0.35rem 0 0.9rem;
    padding-right: 3.5rem;
    color: var(--text-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 700;
}
.dip-treaty-terms {
    margin: 0;
    padding-left: 1.3rem;
    color: #cbd5e1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.98rem;
    line-height: 1.65;
}
.dip-treaty-terms li + li {
    margin-top: 0.35rem;
}
.dip-treaty-sigs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.4rem;
}
.dip-sig {
    flex: 1 1 160px;
    padding-top: 0.45rem;
    border-top: 1px solid var(--g-edge);
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}
.dip-seal {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fdd6d6 0%, var(--g-accent) 35%, var(--g-deep) 100%);
    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.18),
        0 6px 18px -4px var(--g-glow);
}
.dip-seal::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    border: 1.5px solid rgba(15, 8, 30, 0.35);
}
.dip-treaty-none {
    border-color: rgba(255, 196, 0, 0.32);
    background: rgba(255, 196, 0, 0.05);
}
.dip-treaty-none .dip-treaty-kicker {
    color: #ffc400;
}
.dip-treaty-why {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .dip-in,
    .dip-treaty,
    .dip-dots i {
        animation: none;
    }
    .dip-pip,
    .dip-bar-fill,
    .dip-choice {
        transition: none;
    }
}

/* Diplomacy AI (home section) */
.flagship {
    --g-accent: #f26565;
    --g-deep: #dc2626;
    --g-glow: rgba(220, 38, 38, 0.26);
    --g-tint: rgba(220, 38, 38, 0.09);
    --g-edge: rgba(242, 101, 101, 0.32);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 3.6rem 2rem 2.6rem;
    border-radius: 22px;
    border: 1px solid var(--g-edge);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(220, 38, 38, 0.16) 0%, rgba(9, 16, 33, 0) 60%),
        linear-gradient(180deg, rgba(14, 22, 48, 0.9) 0%, rgba(8, 14, 30, 0.95) 100%);
    box-shadow: 0 30px 70px -36px rgba(220, 38, 38, 0.6);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.flagship > *:not(.gp-scene) {
    position: relative;
}
.flagship .gp-scene {
    z-index: -1;
}

/* Diplomacy AI credit */
.flagship-kicker.flagship-presents {
    color: #cbd5e1;
    letter-spacing: 0.34em;
    font-weight: 600;
}
.flagship-kicker.flagship-presents::before,
.flagship-kicker.flagship-presents::after {
    width: 40px;
    background: var(--g-accent);
    opacity: 0.8;
}
.gp-credit {
    margin-bottom: 0.35rem;
    color: #cbd5e1;
    font-size: 1rem;
    letter-spacing: 0.01em;
}
.gp-credit b {
    color: var(--text-primary);
    font-weight: 600;
}
.gp-title-product {
    font-size: 4.4rem;
    line-height: 1;
    letter-spacing: -0.035em;
}
.gp-tagline {
    margin-top: 0.75rem;
    color: var(--text-primary);
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.flagship-kicker.flagship-presents + .flagship-title {
    letter-spacing: -0.01em;
}
.gcard-presents {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #cbd5e1;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gcard-presents::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--c);
}
@media (max-width: 600px) {
    .flagship-kicker.flagship-presents {
        letter-spacing: 0.24em;
    }
    .gp-title-product {
        font-size: clamp(2.4rem, 12vw, 3rem);
    }
    .gp-tagline {
        font-size: 1.2rem;
    }
}
.gcard-wide {
    grid-column: 1 / -1;
    min-height: 0;
}
.gcard-wide .gcard-art {
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
@media (min-width: 900px) {
    .gcard-wide .gcard-body {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        column-gap: 2rem;
        align-items: start;
        padding: 0 1.7rem 1.4rem;
    }
    .gcard-wide .gcard-top {
        grid-column: 1 / -1;
    }
    .gcard-wide .gcard-name,
    .gcard-wide .gcard-title,
    .gcard-wide .gcard-lede {
        grid-column: 1;
    }
    .gcard-wide .gcard-quote {
        grid-column: 2;
        grid-row: 2 / span 3;
        align-self: center;
        margin-top: 0;
    }
    .gcard-wide .gcard-foot {
        grid-column: 1 / -1;
    }
}
@media (max-width: 600px) {
    .gp-others > .gp-other:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}
.flagship-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--g-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.flagship-kicker::before,
.flagship-kicker::after {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}
.flagship-title {
    margin: 1.1rem 0 0;
    color: var(--text-primary);
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.flagship-for {
    margin-top: 0.35rem;
    color: var(--g-accent);
    font-size: 1.05rem;
    font-weight: 600;
}
.flagship-lede {
    max-width: 36rem;
    margin-top: 1.2rem;
    color: #cbd5e1;
    font-size: 1.02rem;
    line-height: 1.7;
}
.flagship-quote {
    max-width: 30rem;
    margin: 1.5rem 0 0;
    padding: 0.9rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--g-edge);
    background-color: rgba(8, 14, 30, 0.6);
}
.flagship-quote p:not(.flagship-quote-who) {
    color: var(--text-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.55;
}
.flagship-quote p:not(.flagship-quote-who)::before {
    content: "\201C";
}
.flagship-quote p:not(.flagship-quote-who)::after {
    content: "\201D";
}
.flagship-quote-who {
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.flagship-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 1.4rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}
.flagship-points li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
}
.flagship-points svg {
    width: 15px;
    height: 15px;
    color: var(--g-accent);
    flex-shrink: 0;
}
.flagship-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.8rem;
}
.flagship-note {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

@media (max-width: 600px) {
    .flagship {
        padding: 2.8rem 1.1rem 2rem;
        border-radius: 18px;
    }
    .flagship-points {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .flagship-actions .btn {
        width: 100%;
        text-align: center;
    }
}
.gp-other-flagship {
    position: relative;
    border-color: rgba(242, 101, 101, 0.42);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.12) 0%, rgba(9, 16, 28, 0.5) 100%);
}
.gp-other-flag {
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 0.6rem;
    border-radius: 0;
    background: #0a0d20;
    color: #cbd5e1;
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
}

/* HOI4 page */
.envoy-picks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    max-width: 720px;
    margin: 0 auto 1rem;
}
.envoy-picks[hidden] {
    display: none;
}
.envoy-pick {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: rgba(9, 16, 28, 0.55);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}
.envoy-pick:hover {
    border-color: var(--g-edge);
}
.envoy-pick[aria-pressed="true"] {
    border-color: var(--g-accent);
    background-color: var(--g-tint);
    box-shadow: 0 0 22px -10px var(--g-glow);
}
.envoy-pick:focus-visible {
    outline: 2px solid var(--g-accent);
    outline-offset: 3px;
}
.envoy-pick-name {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}
.envoy-pick-note {
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.envoy-line[hidden] {
    display: none;
}
.envoy-line:not([hidden]) {
    animation: dip-in 0.3s ease both;
}
@media (max-width: 600px) {
    .envoy-picks {
        grid-template-columns: 1fr;
    }
}

/* HOI4 sample */
.dip-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1rem;
}
.dip-copy {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}
.dip-copy-status {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
    .envoy-line:not([hidden]) {
        animation: none;
    }
}
.hs-twinkle {
    animation: hs-twinkle 4.2s ease-in-out infinite;
}
.hs-twinkle-2 {
    animation-duration: 5.6s;
    animation-delay: -2s;
}
.hs-twinkle-3 {
    animation-duration: 3.4s;
    animation-delay: -1s;
}
@keyframes hs-twinkle {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.08;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hs-twinkle {
        animation: none;
    }
}
@media (max-width: 600px) {
    .gp-eyebrow,
    .flagship-kicker {
        letter-spacing: 0.12em;
        font-size: 0.7rem;
    }
    .gp-eyebrow::before,
    .gp-eyebrow::after,
    .flagship-kicker::before,
    .flagship-kicker::after {
        display: none;
    }
    .about-head:not(.head-left) .eyebrow::before,
    .about-head:not(.head-left) .eyebrow::after {
        width: 18px;
    }
}

/* Home hero */
@property --h-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #7dd3fc;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero.hero-live {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 3.5rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 4.5rem 0 4.5rem;
    overflow: visible;
    transition: --h-accent 0.9s ease;
}

/* Home hero */
.hero-aurora {
    position: absolute;
    z-index: -1;
    top: -64px;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.hero-aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(6, 12, 34, 0.85) 0%,
        rgba(6, 12, 34, 0.4) 38%,
        rgba(6, 12, 34, 0) 60%
    );
}
.au-blob {
    position: absolute;
    border-radius: 50%;
}
.au-a {
    left: 52%;
    top: -18%;
    width: 760px;
    height: 620px;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.62), rgba(59, 130, 246, 0));
    animation: au-a 18s ease-in-out infinite;
}
.au-b {
    left: 66%;
    top: 38%;
    width: 640px;
    height: 560px;
    background: radial-gradient(closest-side, rgba(56, 189, 248, 0.42), rgba(56, 189, 248, 0));
    animation: au-b 22s ease-in-out infinite;
}
.au-c {
    left: 34%;
    top: 26%;
    width: 660px;
    height: 660px;
    background: radial-gradient(closest-side, rgba(129, 140, 248, 0.42), rgba(129, 140, 248, 0));
    animation: au-c 26s ease-in-out infinite;
}
.au-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(191, 219, 254, 0.16) 1px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(45% 60% at 70% 45%, #000 0%, transparent 100%);
    mask-image: radial-gradient(45% 60% at 70% 45%, #000 0%, transparent 100%);
}
@keyframes au-a {
    50% {
        transform: translate(-90px, 40px) rotate(18deg) scale(1.12);
    }
}
@keyframes au-b {
    50% {
        transform: translate(120px, -60px) scale(0.88);
    }
}
@keyframes au-c {
    50% {
        transform: translate(-60px, -50px) rotate(-14deg);
    }
}
.au-orbit {
    position: absolute;
    left: var(--orbit-x, calc(50% + 300px));
    top: var(--orbit-y, calc(50% + 20px));
    width: 880px;
    height: 880px;
    margin: -440px 0 0 -440px;
    overflow: visible;
    pointer-events: none;
}
.au-ring {
    transform-origin: 320px 320px;
}
@keyframes au-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .au-a {
        left: 20%;
        top: 30%;
    }
    .au-b {
        left: 40%;
        top: 60%;
    }
    .au-c {
        left: -20%;
        top: 0;
    }
    .hero-aurora::after {
        background: linear-gradient(180deg, rgba(6, 12, 34, 0.6) 0%, rgba(6, 12, 34, 0) 45%);
    }
    .au-dots {
        -webkit-mask-image: radial-gradient(70% 40% at 50% 70%, #000 0%, transparent 100%);
        mask-image: radial-gradient(70% 40% at 50% 70%, #000 0%, transparent 100%);
    }
}
@media (max-width: 980px) {
    .au-orbit {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .au-blob,
    .au-ring {
        animation: none;
    }
}

.hero-live .hero-copy {
    text-align: left;
}

.hero-live .hero-title {
    max-width: 14ch;
    margin: 0;
    background: linear-gradient(90deg, #6cb8ff 0%, #4f9bf7 45%, #2f73e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.06em;
    font-size: clamp(2.5rem, 4.6vw, 4.1rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero-live .tagline {
    max-width: 36ch;
    margin: 1.5rem 0 0;
    color: #c3cde0;
    font-size: 1.25rem;
    line-height: 1.6;
}

.hero-live .cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2.2rem;
}

/* Conversation window */
.convo {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--h-accent) 45%, transparent);
    background:
        radial-gradient(120% 70% at 0% 100%, color-mix(in srgb, var(--h-accent) 9%, transparent), transparent 60%),
        linear-gradient(175deg, rgba(12, 21, 42, 0.97) 0%, rgba(6, 11, 25, 0.98) 100%);
    box-shadow:
        0 40px 90px -40px color-mix(in srgb, var(--h-accent) 70%, transparent),
        0 18px 40px -20px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    overflow: hidden;
    text-align: left;
    transition: opacity 0.35s ease;
}

.convo.is-leaving {
    opacity: 0;
}

.convo-bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 5.6rem;
    padding: 2.4rem 1.2rem 0.85rem;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--h-accent) 25%, transparent);
    background:
        radial-gradient(90% 140% at 80% 0%, color-mix(in srgb, var(--h-accent) 26%, transparent), transparent 70%),
        color-mix(in srgb, var(--h-accent) 8%, #0a1430);
}
.convo-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(8, 14, 32, 0) 25%, rgba(8, 14, 32, 0.78) 100%);
    pointer-events: none;
}
.convo-bar > :not(.convo-scene) {
    position: relative;
    z-index: 2;
}
.convo-game {
    color: #ffffff;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.convo-who {
    min-width: 0;
    overflow: hidden;
    color: color-mix(in srgb, var(--h-accent) 55%, #cbd5e1);
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.convo-wave {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    margin-left: auto;
}
.convo-wave i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--h-accent);
    opacity: 0.35;
    transform: scaleY(0.25);
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}
.convo.is-speaking .convo-wave i {
    opacity: 1;
    animation: convo-wave 0.9s ease-in-out infinite;
}
.convo.is-speaking .convo-wave i:nth-child(2) {
    animation-delay: -0.6s;
}
.convo.is-speaking .convo-wave i:nth-child(3) {
    animation-delay: -0.3s;
}
.convo.is-speaking .convo-wave i:nth-child(4) {
    animation-delay: -0.75s;
}
.convo.is-speaking .convo-wave i:nth-child(5) {
    animation-delay: -0.15s;
}
@keyframes convo-wave {
    0%,
    100% {
        transform: scaleY(0.25);
    }
    50% {
        transform: scaleY(1);
    }
}
.convo-body {
    padding: 1.2rem 1.3rem 1.4rem;
    min-height: 26rem;
}
/* Two columns at this width make the window narrow, so the longest exchange
   needs more room. index.js sets the exact height once it runs. */
@media (min-width: 981px) and (max-width: 1120px) {
    .convo-body {
        min-height: 30.5rem;
    }
}

.convo-tag {
    margin-bottom: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
}
.convo-menu {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity 0.5s ease 0.6s;
}
.convo-menu li {
    position: relative;
    justify-self: start;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 0.92rem;
}
.convo-menu li::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: 50%;
    height: 1.5px;
    background: var(--h-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.convo-menu li:nth-child(2)::after {
    transition-delay: 0.1s;
}
.convo-menu li:nth-child(3)::after {
    transition-delay: 0.2s;
}
.convo-menu li:nth-child(4)::after {
    transition-delay: 0.3s;
}
.convo-n {
    color: var(--h-accent);
    font-weight: 700;
}

/* index.js: after the strike, the options fall out of the window
   (.is-dropping), then the menu and its label fold away (.is-dropped). */
.convo-menu,
.convo-body > .convo-tag:not(.convo-tag-now) {
    max-height: var(--menu-h, 20rem);
    transition:
        opacity 0.5s ease 0.6s,
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.convo-body > .convo-tag:not(.convo-tag-now) {
    --menu-h: 2rem;
}
.convo.is-dropped .convo-menu,
.convo.is-dropped .convo-body > .convo-tag:not(.convo-tag-now) {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.convo.is-dropping .convo-menu li {
    animation: convo-drop 0.8s cubic-bezier(0.5, 0, 0.85, 0.4) both;
}
.convo.is-dropping .convo-menu li:nth-child(1) {
    --spin: 7deg;
    --dx: 22px;
}
.convo.is-dropping .convo-menu li:nth-child(2) {
    --spin: -10deg;
    --dx: -16px;
    animation-delay: 0.07s;
}
.convo.is-dropping .convo-menu li:nth-child(3) {
    --spin: 12deg;
    --dx: 30px;
    animation-delay: 0.14s;
}
.convo.is-dropping .convo-menu li:nth-child(4) {
    --spin: -6deg;
    --dx: -26px;
    animation-delay: 0.21s;
}
@keyframes convo-drop {
    0% {
        transform: none;
        opacity: 1;
    }
    18% {
        transform: translateY(-5px) rotate(calc(var(--spin) * -0.25));
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), 340px) rotate(var(--spin));
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .convo.is-dropping .convo-menu li,
    .convo-line.is-shown {
        animation: none;
    }
}
.convo.is-struck .convo-menu li::after,
.convo.is-done .convo-menu li::after {
    transform: scaleX(1);
}
.convo.is-struck .convo-menu,
.convo.is-done .convo-menu {
    opacity: 0.4;
}
.convo-tag-now,
.convo-line {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}
.convo-tag-now {
    margin-top: 1.3rem;
    color: var(--h-accent);
}
.convo.is-struck .convo-tag-now,
.convo.is-done .convo-tag-now,
.convo-line.is-shown,
.convo.is-done .convo-line {
    opacity: 1;
    transform: none;
}

/* Lines take no room until they're said, so the conversation builds down
   the window (its height is fixed by index.js). */
.convo:not(.is-done) .convo-line:not(.is-shown) {
    display: none;
}
.convo-line.is-shown {
    animation: convo-line-in 0.35s ease both;
}
@keyframes convo-line-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}
/* RPG-style dialogue boxes: each line in its own frame with a name tab. */
.convo-body > .convo-tag-now {
    display: none;
}
.convo-line {
    position: relative;
    margin-top: 1.25rem;
    padding: 1.05rem 1rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--h-accent) 30%, transparent);
    border-radius: 12px;
    background: rgba(6, 12, 28, 0.7);
}
.convo-you {
    margin-left: 18%;
}
.convo-npc {
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    border-color: color-mix(in srgb, var(--h-accent) 60%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--h-accent) 10%, rgba(6, 12, 28, 0.85)), rgba(6, 12, 28, 0.85));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 30px -18px var(--h-accent);
}
.convo-label {
    position: absolute;
    top: -0.65rem;
    left: 0.8rem;
    padding: 0.12rem 0.55rem;
    border-radius: 6px;
    background: #1e293b;
    color: #cbd5e1;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.convo-npc .convo-label {
    background: var(--h-accent);
    color: #06101f;
}
.convo-text {
    color: #e2e8f0;
    font-size: 1rem;
    line-height: 1.6;
}
.convo-you .convo-text {
    color: #94a3b8;
}
/* The words fade in once the box is open (index.js adds .is-said). */
.convo:not(.is-done) .convo-line:not(.is-said) .convo-text {
    opacity: 0;
}
.convo-line .convo-text {
    transition: opacity 0.45s ease;
}
/* The "more" marker, on the last reply once the conversation has played out */
.convo.is-done .convo-npc:last-of-type .convo-text::after {
    content: "\25BE";
    position: absolute;
    right: 0.8rem;
    bottom: 0.35rem;
    color: var(--h-accent);
    font-size: 0.7rem;
    animation: convo-more 1.2s ease-in-out infinite;
}
@keyframes convo-more {
    50% {
        transform: translateY(2px);
        opacity: 0.6;
    }
}
@media (max-width: 600px) {
    .convo-you {
        margin-left: 10%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .convo.is-done .convo-npc:last-of-type .convo-text::after {
        animation: none;
    }
}


/* Game switcher */
.convo-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-top: 1rem;
    padding-left: 0.3rem;
}
.convo-pick {
    padding: 0.2rem 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}
.convo-pick:hover {
    color: var(--text-primary);
}
.convo-pick[aria-pressed="true"] {
    color: var(--pick);
}
.convo-pick:focus-visible {
    outline: 2px solid var(--pick);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (max-width: 980px) {
    .hero.hero-live {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        padding-top: 3rem;
    }
    .hero-live .hero-title {
        max-width: 14ch;
    }
}
@media (max-width: 600px) {
    .hero-live .hero-title {
        font-size: clamp(2.6rem, 12vw, 3.4rem);
    }
    .hero-live .cta-group {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .hero-live .cta-group .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .convo-body {
        min-height: 30rem;
        padding: 1rem 1rem 1.2rem;
    }
    .convo-who {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero.hero-live,
    .convo,
    .convo-menu,
    .convo-menu li::after,
    .convo-tag-now,
    .convo-line,
    .convo-wave i {
        transition: none;
    }
    .convo.is-speaking .convo-wave i {
        animation: none;
    }
}
.hero-live .convo-picks {
    position: relative;
    display: flex;
    width: fit-content;
    flex-wrap: nowrap;
    gap: 1.75rem;
    max-width: 100%;
    margin: 1.9rem 0 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.hero-live .convo-picks::-webkit-scrollbar {
    display: none;
}
.hero-live .convo-picks::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(148, 163, 184, 0.18);
}
/* The current game's underline doubles as the countdown to the next scene (.is-holding). */
.pick-glider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--pick, #7dd3fc);
    transition:
        transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1),
        width 0.45s cubic-bezier(0.3, 0.7, 0.2, 1),
        background-color 0.45s ease;
}
.pick-glider::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pick, #7dd3fc);
    transform: scaleX(0);
    transform-origin: left;
}
.hero-live.is-holding .pick-glider {
    background: color-mix(in srgb, var(--pick, #7dd3fc) 30%, transparent);
}
.hero-live.is-holding .pick-glider::after {
    animation: pick-fill 4.2s linear forwards;
}
.hero-live.is-paused .pick-glider::after {
    animation-play-state: paused;
}
@keyframes pick-fill {
    to {
        transform: scaleX(1);
    }
}

.hero-live .convo-pick {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 0.55rem 0 0.8rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: #a3b1c6;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    transition: color 0.2s ease;
}
.hero-live .convo-pick::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--pick);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.hero-live .convo-pick:hover {
    color: #f1f5f9;
}
.hero-live .convo-pick:not([aria-pressed="true"]):hover::after {
    opacity: 0.45;
}
.hero-live .convo-pick[aria-pressed="true"] {
    color: #ffffff;
}
.hero-live .convo-pick:focus-visible {
    outline: 2px solid var(--pick);
    outline-offset: 2px;
    border-radius: 4px;
}
.hero-live .cta-group {
    gap: 0.8rem 0.9rem;
}
@media (max-width: 600px) {
    .hero-live .convo-picks {
        width: auto;
        justify-content: space-between;
        gap: 0.75rem;
    }
    .hero-live .convo-pick {
        font-size: 0.86rem;
    }
    .hero-live .convo-picks.is-scrolling {
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000 18px,
            #000 calc(100% - 18px),
            transparent
        );
        mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pick-glider {
        transition: none;
    }
    .hero-live.is-holding .pick-glider {
        background: var(--pick, #7dd3fc);
    }
    .hero-live.is-holding .pick-glider::after {
        animation: none;
    }
}

/* Space */
body {
    background-color: #050a1c;
}

.space {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
}
.space-far {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Ccircle cx='207' cy='97' r='0.73' fill='%23ffffff' fill-opacity='0.28'/%3E%3Ccircle cx='234' cy='37' r='0.65' fill='%23e0e7ff' fill-opacity='0.27'/%3E%3Ccircle cx='268' cy='154' r='0.68' fill='%23ffffff' fill-opacity='0.28'/%3E%3Ccircle cx='606' cy='404' r='0.69' fill='%23e0e7ff' fill-opacity='0.28'/%3E%3Ccircle cx='32' cy='141' r='0.68' fill='%23e0e7ff' fill-opacity='0.31'/%3E%3Ccircle cx='92' cy='75' r='0.55' fill='%23dbeafe' fill-opacity='0.62'/%3E%3Ccircle cx='66' cy='366' r='0.49' fill='%23ffffff' fill-opacity='0.29'/%3E%3Ccircle cx='361' cy='396' r='0.65' fill='%23bfdbfe' fill-opacity='0.49'/%3E%3Ccircle cx='298' cy='591' r='0.58' fill='%23dbeafe' fill-opacity='0.36'/%3E%3Ccircle cx='447' cy='156' r='0.69' fill='%23bfdbfe' fill-opacity='0.49'/%3E%3Ccircle cx='467' cy='184' r='0.89' fill='%23e0e7ff' fill-opacity='0.30'/%3E%3Ccircle cx='106' cy='219' r='0.87' fill='%23ffffff' fill-opacity='0.44'/%3E%3Ccircle cx='489' cy='367' r='0.84' fill='%23bfdbfe' fill-opacity='0.39'/%3E%3Ccircle cx='380' cy='371' r='0.63' fill='%23bfdbfe' fill-opacity='0.63'/%3E%3Ccircle cx='303' cy='425' r='0.43' fill='%23e0e7ff' fill-opacity='0.57'/%3E%3Ccircle cx='182' cy='247' r='0.73' fill='%23e0e7ff' fill-opacity='0.26'/%3E%3Ccircle cx='227' cy='391' r='0.65' fill='%23bfdbfe' fill-opacity='0.35'/%3E%3Ccircle cx='83' cy='158' r='0.60' fill='%23ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='106' cy='257' r='0.54' fill='%23e0e7ff' fill-opacity='0.31'/%3E%3Ccircle cx='553' cy='178' r='0.61' fill='%23e0e7ff' fill-opacity='0.41'/%3E%3Ccircle cx='613' cy='97' r='0.49' fill='%23dbeafe' fill-opacity='0.35'/%3E%3Ccircle cx='8' cy='532' r='0.49' fill='%23dbeafe' fill-opacity='0.38'/%3E%3Ccircle cx='268' cy='236' r='0.68' fill='%23ffffff' fill-opacity='0.68'/%3E%3Ccircle cx='292' cy='557' r='0.88' fill='%23e0e7ff' fill-opacity='0.56'/%3E%3Ccircle cx='255' cy='252' r='0.64' fill='%23dbeafe' fill-opacity='0.43'/%3E%3Ccircle cx='43' cy='134' r='0.48' fill='%23ffffff' fill-opacity='0.40'/%3E%3Ccircle cx='66' cy='363' r='0.67' fill='%23ffffff' fill-opacity='0.68'/%3E%3Ccircle cx='45' cy='133' r='0.59' fill='%23bfdbfe' fill-opacity='0.54'/%3E%3Ccircle cx='385' cy='303' r='0.46' fill='%23e0e7ff' fill-opacity='0.47'/%3E%3Ccircle cx='307' cy='200' r='0.47' fill='%23bfdbfe' fill-opacity='0.59'/%3E%3Ccircle cx='306' cy='443' r='0.66' fill='%23bfdbfe' fill-opacity='0.34'/%3E%3Ccircle cx='94' cy='348' r='0.41' fill='%23ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='446' cy='167' r='0.58' fill='%23dbeafe' fill-opacity='0.33'/%3E%3Ccircle cx='341' cy='499' r='0.56' fill='%23dbeafe' fill-opacity='0.35'/%3E%3Ccircle cx='516' cy='524' r='0.77' fill='%23e0e7ff' fill-opacity='0.35'/%3E%3Ccircle cx='228' cy='19' r='0.41' fill='%23bfdbfe' fill-opacity='0.38'/%3E%3Ccircle cx='124' cy='387' r='0.57' fill='%23bfdbfe' fill-opacity='0.61'/%3E%3Ccircle cx='611' cy='233' r='0.51' fill='%23dbeafe' fill-opacity='0.35'/%3E%3Ccircle cx='216' cy='309' r='0.89' fill='%23ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='307' cy='418' r='0.80' fill='%23ffffff' fill-opacity='0.29'/%3E%3Ccircle cx='582' cy='501' r='0.78' fill='%23dbeafe' fill-opacity='0.47'/%3E%3Ccircle cx='278' cy='407' r='0.44' fill='%23e0e7ff' fill-opacity='0.68'/%3E%3Ccircle cx='296' cy='476' r='0.44' fill='%23dbeafe' fill-opacity='0.32'/%3E%3Ccircle cx='18' cy='378' r='0.63' fill='%23e0e7ff' fill-opacity='0.55'/%3E%3Ccircle cx='421' cy='224' r='0.67' fill='%23ffffff' fill-opacity='0.31'/%3E%3Ccircle cx='512' cy='465' r='0.45' fill='%23dbeafe' fill-opacity='0.59'/%3E%3Ccircle cx='278' cy='558' r='0.81' fill='%23bfdbfe' fill-opacity='0.34'/%3E%3Ccircle cx='136' cy='321' r='0.78' fill='%23e0e7ff' fill-opacity='0.40'/%3E%3Ccircle cx='534' cy='39' r='0.77' fill='%23e0e7ff' fill-opacity='0.65'/%3E%3Ccircle cx='529' cy='562' r='0.47' fill='%23ffffff' fill-opacity='0.32'/%3E%3Ccircle cx='559' cy='497' r='0.70' fill='%23dbeafe' fill-opacity='0.60'/%3E%3Ccircle cx='110' cy='303' r='0.76' fill='%23bfdbfe' fill-opacity='0.50'/%3E%3Ccircle cx='437' cy='340' r='0.64' fill='%23ffffff' fill-opacity='0.60'/%3E%3Ccircle cx='159' cy='177' r='0.79' fill='%23ffffff' fill-opacity='0.48'/%3E%3Ccircle cx='486' cy='584' r='0.62' fill='%23dbeafe' fill-opacity='0.53'/%3E%3Ccircle cx='443' cy='290' r='0.67' fill='%23dbeafe' fill-opacity='0.47'/%3E%3Ccircle cx='447' cy='561' r='0.87' fill='%23dbeafe' fill-opacity='0.37'/%3E%3Ccircle cx='538' cy='88' r='0.46' fill='%23ffffff' fill-opacity='0.45'/%3E%3Ccircle cx='430' cy='274' r='0.51' fill='%23ffffff' fill-opacity='0.39'/%3E%3Ccircle cx='574' cy='99' r='0.76' fill='%23dbeafe' fill-opacity='0.55'/%3E%3Ccircle cx='162' cy='88' r='0.63' fill='%23ffffff' fill-opacity='0.59'/%3E%3Ccircle cx='255' cy='312' r='0.89' fill='%23dbeafe' fill-opacity='0.62'/%3E%3Ccircle cx='452' cy='636' r='0.60' fill='%23bfdbfe' fill-opacity='0.44'/%3E%3Ccircle cx='204' cy='462' r='0.41' fill='%23e0e7ff' fill-opacity='0.50'/%3E%3Ccircle cx='450' cy='246' r='0.66' fill='%23ffffff' fill-opacity='0.38'/%3E%3Ccircle cx='72' cy='588' r='0.51' fill='%23ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='170' cy='25' r='0.79' fill='%23dbeafe' fill-opacity='0.37'/%3E%3Ccircle cx='525' cy='544' r='0.74' fill='%23e0e7ff' fill-opacity='0.68'/%3E%3Ccircle cx='96' cy='588' r='0.69' fill='%23ffffff' fill-opacity='0.57'/%3E%3Ccircle cx='179' cy='512' r='0.49' fill='%23bfdbfe' fill-opacity='0.65'/%3E%3Ccircle cx='601' cy='406' r='0.80' fill='%23dbeafe' fill-opacity='0.29'/%3E%3Ccircle cx='43' cy='552' r='0.63' fill='%23e0e7ff' fill-opacity='0.40'/%3E%3Ccircle cx='593' cy='171' r='0.46' fill='%23dbeafe' fill-opacity='0.49'/%3E%3Ccircle cx='600' cy='620' r='0.53' fill='%23bfdbfe' fill-opacity='0.33'/%3E%3Ccircle cx='402' cy='340' r='0.50' fill='%23dbeafe' fill-opacity='0.45'/%3E%3Ccircle cx='173' cy='514' r='0.90' fill='%23ffffff' fill-opacity='0.27'/%3E%3Ccircle cx='469' cy='353' r='0.49' fill='%23e0e7ff' fill-opacity='0.46'/%3E%3Ccircle cx='68' cy='524' r='0.62' fill='%23e0e7ff' fill-opacity='0.47'/%3E%3Ccircle cx='621' cy='197' r='0.51' fill='%23dbeafe' fill-opacity='0.35'/%3E%3Ccircle cx='533' cy='452' r='0.72' fill='%23bfdbfe' fill-opacity='0.43'/%3E%3Ccircle cx='628' cy='536' r='0.41' fill='%23bfdbfe' fill-opacity='0.53'/%3E%3Ccircle cx='276' cy='35' r='0.73' fill='%23bfdbfe' fill-opacity='0.42'/%3E%3Ccircle cx='383' cy='443' r='0.42' fill='%23bfdbfe' fill-opacity='0.33'/%3E%3Ccircle cx='285' cy='168' r='0.88' fill='%23bfdbfe' fill-opacity='0.69'/%3E%3Ccircle cx='156' cy='618' r='0.55' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='215' cy='54' r='0.54' fill='%23dbeafe' fill-opacity='0.55'/%3E%3Ccircle cx='323' cy='3' r='0.53' fill='%23e0e7ff' fill-opacity='0.29'/%3E%3Ccircle cx='376' cy='252' r='0.55' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='375' cy='339' r='0.78' fill='%23e0e7ff' fill-opacity='0.55'/%3E%3Ccircle cx='489' cy='461' r='0.65' fill='%23dbeafe' fill-opacity='0.38'/%3E%3C/svg%3E");
    animation: space-drift 240s linear infinite;
}
.space-mid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Ccircle cx='44' cy='835' r='1.35' fill='%23dbeafe' fill-opacity='0.70'/%3E%3Ccircle cx='910' cy='753' r='1.18' fill='%23ffffff' fill-opacity='0.78'/%3E%3Ccircle cx='826' cy='584' r='1.35' fill='%23dbeafe' fill-opacity='0.72'/%3E%3Ccircle cx='85' cy='42' r='1.22' fill='%23e0e7ff' fill-opacity='0.83'/%3E%3Ccircle cx='836' cy='559' r='1.21' fill='%23dbeafe' fill-opacity='0.70'/%3E%3Ccircle cx='489' cy='3' r='1.30' fill='%23ffffff' fill-opacity='0.75'/%3E%3Ccircle cx='659' cy='66' r='1.27' fill='%23ffffff' fill-opacity='0.55'/%3E%3Ccircle cx='846' cy='235' r='1.28' fill='%23e0e7ff' fill-opacity='0.54'/%3E%3Ccircle cx='494' cy='383' r='1.14' fill='%23ffffff' fill-opacity='0.72'/%3E%3Ccircle cx='617' cy='643' r='0.94' fill='%23bfdbfe' fill-opacity='0.51'/%3E%3Ccircle cx='652' cy='693' r='1.21' fill='%23e0e7ff' fill-opacity='0.50'/%3E%3Ccircle cx='61' cy='269' r='1.24' fill='%23e0e7ff' fill-opacity='0.73'/%3E%3Ccircle cx='291' cy='517' r='1.13' fill='%23ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='993' cy='549' r='1.06' fill='%23e0e7ff' fill-opacity='0.48'/%3E%3Ccircle cx='18' cy='459' r='1.31' fill='%23e0e7ff' fill-opacity='0.84'/%3E%3Ccircle cx='994' cy='387' r='1.36' fill='%23ffffff' fill-opacity='0.82'/%3E%3Ccircle cx='581' cy='142' r='1.16' fill='%23dbeafe' fill-opacity='0.83'/%3E%3Ccircle cx='603' cy='632' r='1.04' fill='%23bfdbfe' fill-opacity='0.50'/%3E%3Ccircle cx='231' cy='898' r='1.14' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='950' cy='682' r='1.10' fill='%23e0e7ff' fill-opacity='0.74'/%3E%3Ccircle cx='344' cy='316' r='1.32' fill='%23bfdbfe' fill-opacity='0.45'/%3E%3Ccircle cx='839' cy='120' r='1.36' fill='%23bfdbfe' fill-opacity='0.74'/%3E%3Ccircle cx='253' cy='65' r='1.10' fill='%23ffffff' fill-opacity='0.80'/%3E%3Ccircle cx='361' cy='428' r='1.04' fill='%23ffffff' fill-opacity='0.47'/%3E%3Ccircle cx='52' cy='662' r='1.22' fill='%23bfdbfe' fill-opacity='0.51'/%3E%3Ccircle cx='436' cy='316' r='1.29' fill='%23e0e7ff' fill-opacity='0.76'/%3E%3Ccircle cx='884' cy='812' r='1.22' fill='%23dbeafe' fill-opacity='0.82'/%3E%3Ccircle cx='720' cy='49' r='1.27' fill='%23dbeafe' fill-opacity='0.63'/%3E%3C/svg%3E");
    opacity: 0.9;
    animation: space-drift-mid 320s linear infinite;
}
.space-near {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23cfe3ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23cfe3ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='902' cy='401' r='6.6' fill='url%28%23g%29'/%3E%3Ccircle cx='902' cy='401' r='1.33' fill='%23dbeafe' fill-opacity='0.99'/%3E%3Ccircle cx='239' cy='581' r='7.3' fill='url%28%23g%29'/%3E%3Ccircle cx='239' cy='581' r='1.47' fill='%23bfdbfe' fill-opacity='0.85'/%3E%3Ccircle cx='569' cy='334' r='7.9' fill='url%28%23g%29'/%3E%3Ccircle cx='569' cy='334' r='1.59' fill='%23ffffff' fill-opacity='0.93'/%3E%3Ccircle cx='234' cy='226' r='7.1' fill='url%28%23g%29'/%3E%3Ccircle cx='234' cy='226' r='1.42' fill='%23e0e7ff' fill-opacity='0.98'/%3E%3Ccircle cx='771' cy='634' r='7.5' fill='url%28%23g%29'/%3E%3Ccircle cx='771' cy='634' r='1.50' fill='%23e0e7ff' fill-opacity='0.95'/%3E%3Ccircle cx='195' cy='269' r='6.8' fill='url%28%23g%29'/%3E%3Ccircle cx='195' cy='269' r='1.35' fill='%23ffffff' fill-opacity='0.87'/%3E%3Ccircle cx='447' cy='516' r='8.9' fill='url%28%23g%29'/%3E%3Ccircle cx='447' cy='516' r='1.79' fill='%23ffffff' fill-opacity='0.84'/%3E%3Ccircle cx='1050' cy='578' r='7.7' fill='url%28%23g%29'/%3E%3Ccircle cx='1050' cy='578' r='1.55' fill='%23e0e7ff' fill-opacity='0.90'/%3E%3Ccircle cx='378' cy='1053' r='8.0' fill='url%28%23g%29'/%3E%3Ccircle cx='378' cy='1053' r='1.60' fill='%23bfdbfe' fill-opacity='0.91'/%3E%3C/svg%3E");
    animation: space-twinkle 7s ease-in-out infinite;
}
@keyframes space-drift {
    to {
        transform: translateY(-640px);
    }
}
@keyframes space-drift-mid {
    to {
        transform: translateY(-1000px);
    }
}
@keyframes space-twinkle {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

.space-nebula {
    position: absolute;
    border-radius: 50%;
}
.space-meteor {
    top: 12%;
    left: 62%;
    width: 160px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(191, 219, 254, 0), rgba(224, 242, 254, 0.95));
    opacity: 0;
    transform: rotate(-18deg) translateX(0);
    animation: space-meteor 15s ease-in 4s infinite;
}
.space-meteor-2 {
    top: 34%;
    left: 18%;
    width: 110px;
    animation-duration: 23s;
    animation-delay: 11s;
}
@keyframes space-meteor {
    0% {
        opacity: 0;
        transform: rotate(-18deg) translateX(0);
    }
    1% {
        opacity: 1;
    }
    6% {
        opacity: 0;
        transform: rotate(-18deg) translateX(-420px);
    }
    100% {
        opacity: 0;
        transform: rotate(-18deg) translateX(-420px);
    }
}
.hero-aurora {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .space-far,
    .space-mid,
    .space-near,
    .space-nebula,
    .space-meteor {
        animation: none;
    }
    .space-meteor {
        display: none;
    }
}

/* Nav on scroll */
body > nav {
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
    view-transition-name: site-nav;
}
body > nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(96, 165, 250, 0) 0%,
        #60a5fa 30%,
        #a5b4fc 50%,
        #60a5fa 70%,
        rgba(96, 165, 250, 0) 100%
    );
    background-size: 100% 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
body > nav.is-scrolled {
    background-image: linear-gradient(180deg, rgba(7, 14, 34, 0.94) 0%, rgba(7, 14, 34, 0.86) 100%);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.8);
}
body > nav.is-scrolled::after {
    opacity: 0;
}

.nav-download {
    display: inline-flex;
    align-items: center;
    max-width: 0;
    padding: 0;
    margin-right: -1.25rem; /* takes back the row gap while it's hidden */
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: 999px;
    background: linear-gradient(180deg, #112552, #0a1634);
    color: #ffffff;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition:
        max-width 0.35s ease,
        padding 0.35s ease,
        margin 0.35s ease,
        opacity 0.25s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
    gap: 0.45rem;
    height: 40px;
    box-sizing: border-box;
    box-shadow: none;
}
.nav-download:hover {
    transform: none;
    background: linear-gradient(180deg, #1d3d86, #12285c);
    border-color: rgba(147, 197, 253, 0.85);
}
.nav-download svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #7cc0ff;
}
.nav-download:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
}
body > nav.show-download .nav-download {
    max-width: 170px;
    padding: 0 1.1rem 0 0.95rem;
    margin-right: 0;
    opacity: 1;
}
@media (max-width: 1199px) {
    .nav-download {
        display: none;
    }
}

/* Game strip */
.game-strip {
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw) 1rem;
    padding: 1.1rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(5, 10, 28, 0.35);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.strip-track {
    display: flex;
    width: max-content;
    animation: strip-run 40s linear infinite;
}
.game-strip:hover .strip-track,
.game-strip:focus-within .strip-track {
    animation-play-state: paused;
}
.strip-set {
    display: flex;
    gap: 3.5rem;
    padding-right: 3.5rem;
}
@keyframes strip-run {
    to {
        transform: translateX(-50%);
    }
}
.strip-item {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #cbd5e1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.strip-icon {
    width: 26px;
    height: 26px;
    color: var(--c);
    opacity: 0.85;
}
.strip-name {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
}
.strip-mod {
    color: #64748b;
    font-size: 0.85rem;
}
.strip-item:hover {
    color: #ffffff;
}
.strip-item:hover .strip-icon {
    opacity: 1;
}
.strip-item:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 6px;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .strip-track {
        animation: none;
        width: auto;
        justify-content: center;
        flex-wrap: wrap;
    }
    .strip-set[aria-hidden="true"] {
        display: none;
    }
    .strip-set {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.2rem 2.5rem;
        padding: 0 1rem;
    }
    .game-strip {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Bento */
.features.bento {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1rem;
}
.bento .bento-a {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}
.bento .feature {
    border-radius: 18px;
    padding: 1.8rem 1.7rem;
}
.bento-visual {
    position: relative;
    margin-top: 1.5rem;
}
.bento-a .bento-visual {
    margin: auto 0;
    padding-top: 1.6rem;
}

/* Bento: "We handle the technical part" */
.bv-cap {
    margin-bottom: 0.7rem;
    color: #64748b;
    font-size: 0.82rem;
}
.bv-steps {
    display: grid;
    gap: 0.45rem;
    list-style: none;
}
.bv-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.8rem;
    border-radius: 11px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(5, 10, 28, 0.5);
}
.bv-step-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}
.bv-step-ic svg {
    width: 15px;
    height: 15px;
}
.bv-step-text {
    position: relative;
    flex: 1;
    color: #cbd5e1;
    font-size: 0.86rem;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(248, 113, 113, 0);
}
.bv-skip {
    flex-shrink: 0;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #6ee7b7;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0;
    transform: translateX(8px);
}
.bv-done {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(52, 211, 153, 0.45);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(5, 10, 28, 0.6));
}
.bv-done-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #10b981;
    color: #04130d;
}
.bv-done-ic svg {
    width: 18px;
    height: 18px;
}
.bv-done-text {
    display: flex;
    flex-direction: column;
    color: #d1fae5;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
}
.bv-done-text {
    flex: 1;
    min-width: 0;
}
.bv-done-tag {
    align-self: flex-start;
    margin-top: 0.4rem;
    font-family: "Inter", "Inter Fallback", sans-serif;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #bfdbfe;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.bv-done-text b {
    color: #6ee7b7;
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
}
.bento-a.visible .bv-step-text {
    animation: bv-dim 10s ease infinite;
    animation-delay: calc(0.5s + var(--i) * 0.42s);
}
.bento-a.visible .bv-skip {
    animation: bv-skip 10s cubic-bezier(0.3, 1.6, 0.5, 1) infinite;
    animation-delay: calc(0.5s + var(--i) * 0.42s);
}
.bento-a.visible .bv-step-ic {
    animation: bv-ic 10s ease infinite;
    animation-delay: calc(0.5s + var(--i) * 0.42s);
}
.bento-a.visible .bv-done {
    animation: bv-done 10s cubic-bezier(0.3, 1.4, 0.5, 1) infinite;
}
@keyframes bv-dim {
    0%, 3% {
        color: #cbd5e1;
        text-decoration-color: rgba(248, 113, 113, 0);
    }
    8%, 82% {
        color: #64748b;
        text-decoration-color: #f87171;
    }
    90%, 100% {
        color: #cbd5e1;
        text-decoration-color: rgba(248, 113, 113, 0);
    }
}
@keyframes bv-skip {
    0%, 5% {
        opacity: 0;
        transform: translateX(8px) scale(0.8);
    }
    9%, 82% {
        opacity: 1;
        transform: none;
    }
    90%, 100% {
        opacity: 0;
        transform: translateX(8px) scale(0.8);
    }
}
@keyframes bv-ic {
    0%, 4% {
        filter: none;
        opacity: 1;
    }
    8%, 82% {
        filter: grayscale(1);
        opacity: 0.45;
    }
    90%, 100% {
        filter: none;
        opacity: 1;
    }
}
@keyframes bv-done {
    0%, 46% {
        opacity: 0.35;
        transform: scale(0.97);
        box-shadow: none;
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
        box-shadow: 0 0 40px -6px rgba(16, 185, 129, 0.7);
    }
    56%, 84% {
        opacity: 1;
        transform: none;
        box-shadow: 0 0 30px -10px rgba(16, 185, 129, 0.55);
    }
    92%, 100% {
        opacity: 0.35;
        transform: scale(0.97);
        box-shadow: none;
    }
}

/* "You only pay while you're talking": a running tally. The talking rows
   light up as chat bubbles and take a little Vigor off; the rest light up
   green and the number doesn't move. Driven by index.js (vigorTally). */
.bv-tally {
    margin-top: 1.3rem;
}
.bv-wallet {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.35);
    background:
        radial-gradient(80% 120% at 0% 50%, rgba(59, 130, 246, 0.22), transparent 70%),
        rgba(5, 10, 28, 0.6);
}
.bv-wallet-gem {
    flex-shrink: 0;
    width: 26px;
    height: 29px;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.75));
}
.bv-wallet.is-spend .bv-wallet-gem {
    animation: bv-gem-dip 0.5s ease;
}
@keyframes bv-gem-dip {
    40% {
        transform: scale(0.82) rotate(-8deg);
    }
}
.bv-wallet-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.bv-wallet-text small {
    color: #94a3b8;
    font-size: 0.74rem;
}
.bv-wallet-text b {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
.bv-wallet.is-spend .bv-wallet-text b {
    color: #93c5fd;
}
.bv-wallet-pops {
    position: absolute;
    right: 1rem;
    top: 50%;
    height: 0;
}
.bv-pop {
    position: absolute;
    right: 0;
    top: -0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    animation: bv-pop 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.bv-pop.is-free {
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(52, 211, 153, 0.45);
    color: #6ee7b7;
}
@keyframes bv-pop {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.7);
    }
    18% {
        opacity: 1;
        transform: translateY(0) scale(1.08);
    }
    70% {
        opacity: 1;
        transform: translateY(-4px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-16px);
    }
}

/* The line and the dots share whole-pixel positions (line centre 7px in,
   same as each dot's), so they stay lined up at any zoom level. */
.bv-tl {
    position: relative;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding-left: 21px;
    list-style: none;
}
.bv-tl::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.5), rgba(52, 211, 153, 0.35));
}
.bv-tl-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.6rem;
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(5, 10, 28, 0.45);
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.bv-tl-dot {
    position: absolute;
    left: -20px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: #0b1430;
    border: 2px solid #34d399;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.bv-tl-row.is-talk .bv-tl-dot {
    border-color: #60a5fa;
}
.bv-bubble {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.7rem;
    border-radius: 12px 12px 12px 4px;
    background: rgba(148, 163, 184, 0.1);
    color: #dbe3f1;
    font-size: 0.84rem;
    line-height: 1.4;
}
.bv-bubble.is-you {
    flex: 0 1 auto;
    border-radius: 12px 12px 4px 12px;
    background: rgba(37, 99, 235, 0.28);
    color: #e0ecff;
}
.bv-tl-row.is-talk:first-child {
    justify-content: flex-end;
}
.bv-tl-row.is-talk:first-child .bv-tl-tag {
    order: -1;
    margin-right: auto;
}
.bv-tl-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.22);
    color: #6ee7b7;
}
.bv-tl-ic svg {
    width: 14px;
    height: 14px;
}
.bv-tl-what {
    flex: 1;
    color: #cbd5e1;
    font-size: 0.86rem;
}
.bv-tl-tag {
    flex-shrink: 0;
    padding: 0.13rem 0.5rem;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.12);
    color: #6ee7b7;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.bv-tl-row.is-talk .bv-tl-tag {
    background: rgba(37, 99, 235, 0.25);
    color: #bfdbfe;
}
.bv-tl-row.is-lit {
    border-color: rgba(52, 211, 153, 0.55);
    background: rgba(16, 185, 129, 0.09);
}
.bv-tl-row.is-talk.is-lit {
    border-color: rgba(96, 165, 250, 0.7);
    background: rgba(37, 99, 235, 0.14);
}
.bv-tl-row.is-lit .bv-tl-dot {
    transform: scale(1.4);
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18), 0 0 14px #34d399;
}
.bv-tl-row.is-talk.is-lit .bv-tl-dot {
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2), 0 0 14px #60a5fa;
}
.bv-tl-row.is-lit .bv-tl-load svg {
    animation: au-spin 1s linear infinite;
}
.bv-tl-row.is-talk.is-lit .bv-tl-tag {
    background: #2563eb;
    color: #ffffff;
}

/* Bento: "The right model already picked" (index.js modelPick) */
.bv-pick {
    margin-top: 1.3rem;
}
.bv-gs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}
.bv-g {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.2rem 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(5, 10, 28, 0.5);
    color: #94a3b8;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.bv-g span {
    white-space: nowrap;
}
.bv-gicon {
    width: 24px;
    height: 24px;
    color: #64748b;
    transition:
        color 0.3s ease,
        transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.bv-g:hover {
    border-color: color-mix(in srgb, var(--c) 50%, transparent);
    color: #e2e8f0;
}
.bv-g.is-on {
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, rgba(5, 10, 28, 0.6));
    color: #ffffff;
    box-shadow: 0 8px 22px -10px var(--c);
    transform: translateY(-3px);
}
.bv-g.is-on .bv-gicon {
    color: var(--c);
    transform: scale(1.15);
}
.bv-tuned {
    margin-top: 0.8rem;
    padding: 0.85rem 0.95rem 0.95rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
    background:
        radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 65%),
        rgba(5, 10, 28, 0.6);
    transition: border-color 0.4s ease;
}
.bv-tuned-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.bv-tuned-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
}
.bv-tuned-text small {
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 500;
}
.bv-tuned-text small b {
    color: var(--c);
    font-weight: 700;
}
.bv-pick.is-go .bv-tuned-text > span {
    animation: bv-name 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes bv-name {
    from {
        opacity: 0.2;
        transform: translateY(6px);
    }
}
.bv-guide {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 12%, transparent);
    color: var(--c);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    transition:
        color 0.4s ease,
        background-color 0.4s ease;
}
.bv-guide svg {
    width: 13px;
    height: 13px;
}
.bv-bars {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
}
.bv-bar {
    display: grid;
    grid-template-columns: 4.6rem 1fr;
    align-items: center;
    gap: 0.6rem;
}
.bv-bar small {
    color: #94a3b8;
    font-size: 0.74rem;
}
.bv-bar i {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    overflow: hidden;
}
.bv-bar i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #0b1430), var(--c));
    box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent);
    transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 600px) {
    .bv-gs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.3rem;
    }
    .bv-g {
        font-size: 0.64rem;
    }
}
@media (max-width: 420px) {
    .bv-g span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bento-a.visible .bv-step-text,
    .bento-a.visible .bv-skip,
    .bento-a.visible .bv-step-ic,
    .bento-a.visible .bv-done,
    .bv-pick.is-go .bv-tuned-text > span,
    .bv-pop,
    .bv-wallet.is-spend .bv-wallet-gem {
        animation: none;
    }
    .bv-step-text {
        color: #64748b;
        text-decoration-color: #f87171;
    }
    .bv-skip {
        opacity: 1;
        transform: none;
    }
}
html.is-scrolling .bv-steps *,
html.is-scrolling .bv-done,
html.is-scrolling .bv-pop {
    animation-play-state: paused;
}

@media (max-width: 760px) {
    .features.bento {
        grid-template-columns: minmax(0, 1fr);
    }
    .bento .bento-a {
        grid-row: auto;
    }
}

/* Steps flow */
.steps-flow .step {
    padding-top: 1.4rem;
}
@media (min-width: 901px) {
    .steps-flow {
        --sf-c: #60a5fa;
        --sf-deep: #2563eb;
        --sf-tint: rgba(37, 99, 235, 0.22);
        --sf-glow: rgba(59, 130, 246, 0.45);
        padding-top: 48px;
    }
    .steps-flow .step-num {
        top: -48px;
        z-index: 2;
        width: 30px;
        height: 30px;
        border: 1.5px solid rgba(148, 163, 184, 0.3);
        background: #0b1426;
        color: #94a3b8;
        font-size: 0.85rem;
        box-shadow: none;
        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            color 0.35s ease,
            box-shadow 0.35s ease;
    }
    .steps-flow .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: -34px;
        left: calc(1.4rem + 38px);
        width: calc(100% + 1.25rem - 46px);
        height: 2px;
        border-radius: 2px;
        background:
            linear-gradient(90deg, var(--sf-c), var(--sf-deep)) left / 0% 100% no-repeat,
            rgba(148, 163, 184, 0.16);
        transition: background-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    .steps-flow.is-drawn .step-num {
        border-color: var(--sf-c);
        background: var(--sf-tint);
        color: var(--sf-c);
        box-shadow: 0 0 14px var(--sf-glow);
    }
    .steps-flow.is-drawn .step:not(:last-child)::after {
        background-size: 100% 100%, auto;
    }
    .steps-flow.is-drawn .step:nth-child(2) .step-num {
        transition-delay: 0.5s;
    }
    .steps-flow.is-drawn .step:nth-child(3) .step-num {
        transition-delay: 1s;
    }
    .steps-flow.is-drawn .step:nth-child(4) .step-num {
        transition-delay: 1.5s;
    }
    .steps-flow.is-drawn .step:nth-child(1)::after {
        transition-delay: 0.1s;
    }
    .steps-flow.is-drawn .step:nth-child(2)::after {
        transition-delay: 0.6s;
    }
    .steps-flow.is-drawn .step:nth-child(3)::after {
        transition-delay: 1.1s;
    }
    .steps-flow .step {
        transition: border-color 0.5s ease;
    }
    .steps-flow .step:hover {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .steps-flow .step-num,
    .steps-flow .step::after {
        transition: none !important;
    }
}

/* Closing panel */
.game-page .cta-band h2 {
    background: linear-gradient(90deg, #ffffff, var(--g-accent));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Voice waveform */
.voice {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    margin-top: 0.55rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.voice i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--h-accent, #7dd3fc);
    transform: scaleY(0.15);
    opacity: 0.85;
}
.convo-npc.is-speaking .voice {
    opacity: 1;
}
/* In the hero window the waveform sits on the bottom edge of the box
   while the line is spoken: a small tab on the bottom border, mirroring the
   name tab on top. It sits on the border, so the box never changes size, and
   it fades away when they stop talking. */
.convo-line .voice {
    position: absolute;
    left: 0.8rem;
    bottom: -0.7rem;
    height: 1.4rem;
    margin: 0;
    padding: 0.3rem 0.6rem;
    gap: 2px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--h-accent) 55%, transparent);
    background: #0a1328;
    box-shadow: 0 0 14px -4px var(--h-accent);
    pointer-events: none;
    transform: translateY(3px);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}
.convo-npc.is-speaking .voice {
    transform: none;
}
.convo-line .voice i {
    width: 2px;
}
.convo-npc.is-speaking {
    border-color: var(--h-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px color-mix(in srgb, var(--h-accent) 12%, transparent),
        0 14px 36px -16px var(--h-accent);
}
.convo-npc.is-speaking .voice i {
    animation: voice-bar var(--d) ease-in-out var(--o) infinite;
}
@keyframes voice-bar {
    0%,
    100% {
        transform: scaleY(0.15);
    }
    50% {
        transform: scaleY(var(--h));
    }
}

/* Compare slider */
.cmp {
    position: relative;
    width: 100%;
    max-width: 860px;
    height: 360px;
    margin: 0 auto;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    overflow: hidden;
    user-select: none;
}
.cmp-pane {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cmp-before {
    align-items: flex-start;
    background: linear-gradient(170deg, #12151d 0%, #0b0d13 100%);
    font-family: Georgia, "Times New Roman", serif;
}
.cmp-after {
    align-items: flex-end;
    text-align: left;
    background: linear-gradient(170deg, rgba(16, 33, 70, 0.98) 0%, rgba(7, 14, 32, 0.98) 100%);
    clip-path: inset(0 0 0 var(--split));
}
.cmp-after > * {
    width: min(100%, 26rem);
}
.cmp-tag {
    position: absolute;
    top: 1.1rem;
    left: 1.3rem;
    width: auto;
    color: #8a8f99;
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}
.cmp-tag-after {
    left: auto;
    right: 1.3rem;
    color: #93c5fd;
}
.cmp-who {
    margin-bottom: 0.8rem;
    color: #8a8f99;
    font-size: 0.9rem;
}
.cmp-after .cmp-who {
    color: #6ee787;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-weight: 600;
}
.cmp-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.cmp-menu li {
    color: #d6d1c4;
    font-size: 1.05rem;
}
.cmp-menu li span {
    color: #b9a46a;
}
.cmp-npc-canned {
    margin-top: 1rem;
    color: #8a8f99;
    font-style: italic;
}
.cmp-line {
    padding-left: 0.9rem;
    border-left: 2px solid rgba(148, 163, 184, 0.35);
    margin-top: 0.7rem;
}
.cmp-line span {
    display: block;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
}
.cmp-line p {
    color: #94a3b8;
    line-height: 1.6;
}
.cmp-npc {
    border-left-color: #6ee787;
}
.cmp-npc span {
    color: #6ee787;
}
.cmp-npc p {
    color: #e2e8f0;
}
.cmp-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(
        180deg,
        rgba(147, 197, 253, 0),
        #93c5fd 20%,
        #93c5fd 80%,
        rgba(147, 197, 253, 0)
    );
    pointer-events: none;
}
.cmp-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #2f6fe8;
}
.cmp-knob svg {
    width: 20px;
    height: 20px;
}
.cmp-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}
.cmp:has(.cmp-range:focus-visible) .cmp-knob {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}
@media (max-width: 700px) {
    .cmp {
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .cmp-pane {
        position: relative;
        inset: auto;
        padding: 3rem 1.2rem 1.6rem;
    }
    .cmp-after {
        clip-path: none;
        align-items: flex-start;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
    }
    .cmp-handle,
    .cmp-range {
        display: none;
    }
    .cmp-menu li {
        font-size: 0.98rem;
    }
}

/* Vigor */
.vigor-meter {
    position: relative;
    width: 100%;
    max-width: 1014px;
    height: 6px;
    margin: 0 auto 2.4rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
}
.vigor-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #2f6fe8, #5aa9fa 70%, #ffd700);
    transition: width 0.15s linear;
}
.vigor-head {
    position: absolute;
    right: -7px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(90, 169, 250, 0.3);
}
/* Page transitions */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: vt-out 0.22s ease both;
}
::view-transition-new(root) {
    animation: vt-in 0.34s ease both;
}
@keyframes vt-out {
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}
@keyframes vt-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .voice i {
        animation: none !important;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* Scroll states */

.nav-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: calc(var(--read, 0) * 100%);
    height: 2px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.2), #60a5fa 70%, #c7d2fe);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.55);
    pointer-events: none;
}
.game-page .nav-progress {
    background: linear-gradient(90deg, transparent, var(--g-accent) 70%, #fff);
    box-shadow: 0 0 10px var(--g-glow, var(--g-accent));
}

/* Card spotlight: index.js sets --mx / --my */
.spot {
    position: relative;
    isolation: isolate;
}
.spot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--spot, #60a5fa) 16%, transparent),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.spot:hover::before {
    opacity: 1;
}
.gcard.spot {
    --spot: var(--c);
}
.game-page .spot {
    --spot: var(--g-accent);
}
.gp-other.spot {
    --spot: var(--o-accent);
}
.flagship.spot::before {
    z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
    .spot::before {
        transition: none;
    }
}

html.alive .about-head {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.8s ease;
}
html.alive .is-in.about-head,
html.alive .is-in .about-head {
    opacity: 1;
    transform: none;
    filter: none;
}

html.alive .about-head .eyebrow::before,
html.alive .about-head .eyebrow::after {
    transform: scaleX(0);
    transition: transform 0.7s ease 0.35s;
}
html.alive .about-head .eyebrow::before {
    transform-origin: right;
}
html.alive .about-head .eyebrow::after {
    transform-origin: left;
}
html.alive .is-in .about-head .eyebrow::before,
html.alive .is-in .about-head .eyebrow::after {
    transform: scaleX(1);
}

html.alive .about-head.head-left .section-title::before {
    transform: scaleY(0);
    transform-origin: top;
    transition:
        transform 0.6s ease 0.3s,
        box-shadow 0.5s ease,
        filter 0.5s ease;
}
html.alive .is-in .about-head.head-left .section-title::before {
    transform: scaleY(1);
}
.is-current .about-head.head-left .section-title::before {
    box-shadow: 0 0 14px 2px rgba(96, 165, 250, 0.75);
    filter: brightness(1.35);
}
.is-current .about-head .eyebrow {
    text-shadow: 0 0 14px color-mix(in srgb, currentColor 60%, transparent);
}
.nav-link.is-active {
    color: var(--text-primary);
}
.nav-link.is-active::after {
    transform: scaleX(1);
}
.gp-jump a.is-active {
    color: var(--g-accent);
    border-color: var(--g-edge);
    background-color: var(--g-tint);
}

/* Game pages: sticky jump row (index.js moves .gp-jump-pill) */
.game-page .gp-jump {
    position: sticky;
    top: calc(var(--nav-h, 64px) + 10px);
    z-index: 40;
    width: fit-content;
    max-width: 100%;
    padding: 0.35rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}
.game-page .gp-jump.is-stuck {
    background-color: rgba(7, 13, 32, 0.82);
    border-color: var(--g-edge);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.game-page main section[id] {
    scroll-margin-top: calc(var(--nav-h, 64px) + 64px);
}
.gp-jump a {
    position: relative;
    z-index: 1;
}
.gp-jump-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 999px;
    border: 1px solid var(--g-edge);
    background-color: var(--g-tint);
    box-shadow: 0 0 18px -6px var(--g-glow);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.3s ease;
}
.gp-jump.has-pill a.is-active {
    border-color: transparent;
    background-color: transparent;
}

/* Hero scene layers rise in on load (index.js adds html.scene-rise). */
html.scene-rise .gp-hero .sc-layer {
    animation: sc-rise 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 0.14s) both;
}
@keyframes sc-rise {
    from {
        opacity: 0;
        transform: translateY(34px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Before/after compare (index.js adds .is-armed, then .is-played) */
.compare.is-armed .compare-before li {
    text-decoration: line-through;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    transition:
        color 0.4s ease,
        text-decoration-color 0.4s ease;
}
.compare.is-played .compare-before li {
    color: #7c8aa0;
    text-decoration-color: rgba(148, 163, 184, 0.6);
}
.compare.is-armed .compare-after li {
    opacity: 0;
    transform: translateX(-10px);
    transition:
        opacity 0.45s ease,
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.compare.is-played .compare-after li {
    opacity: 1;
    transform: none;
}
.compare.is-played .compare-before li:nth-child(2) {
    transition-delay: 0.3s;
}
.compare.is-played .compare-before li:nth-child(3) {
    transition-delay: 0.6s;
}
.compare.is-played .compare-before li:nth-child(4) {
    transition-delay: 0.9s;
}
.compare.is-played .compare-after li:nth-child(1) {
    transition-delay: 1s;
}
.compare.is-played .compare-after li:nth-child(2) {
    transition-delay: 1.3s;
}
.compare.is-played .compare-after li:nth-child(3) {
    transition-delay: 1.6s;
}
.compare.is-played .compare-after li:nth-child(4) {
    transition-delay: 1.9s;
}
.compare.is-played .compare-after li::before {
    animation: check-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.compare.is-played .compare-after li:nth-child(1)::before {
    animation-delay: 1.1s;
}
.compare.is-played .compare-after li:nth-child(2)::before {
    animation-delay: 1.4s;
}
.compare.is-played .compare-after li:nth-child(3)::before {
    animation-delay: 1.7s;
}
.compare.is-played .compare-after li:nth-child(4)::before {
    animation-delay: 2s;
}
@keyframes check-pop {
    from {
        transform: scale(0.3);
        box-shadow: 0 0 0 0 var(--g-glow, rgba(59, 130, 246, 0.4));
    }
    60% {
        transform: scale(1.2);
        box-shadow: 0 0 0 6px transparent;
    }
    to {
        transform: none;
    }
}

/* Setup steps on game pages */
.game-page .steps-flow {
    --sf-c: var(--g-accent);
    --sf-deep: var(--g-deep);
    --sf-tint: var(--g-tint);
    --sf-glow: var(--g-glow);
}

@media (prefers-reduced-motion: reduce) {
    .game-page .gp-jump,
    .gp-jump-pill {
        transition: none;
    }
    html.scene-rise .gp-hero .sc-layer {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.alive .about-head {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
    html.alive .about-head .eyebrow::before,
    html.alive .about-head .eyebrow::after,
    html.alive .about-head.head-left .section-title::before {
        transform: none;
        transition: none;
    }
}

/* Long sky */
.space {
    background:
        radial-gradient(120% 900px at 50% 0%, rgba(30, 58, 138, 0.4) 0%, rgba(5, 10, 28, 0) 70%),
        linear-gradient(180deg, #071233 0%, #050a1c 18%, #0a0a26 38%, #061a2a 58%, #0d0a24 78%, #04081a 100%);
}

.space-neb {
    position: absolute;
    border-radius: 50%;
    animation: none;
}
.space-neb-1 {
    left: -12%;
    top: 2%;
    width: 980px;
    height: 760px;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.2), transparent);
}
.space-neb-2 {
    right: -14%;
    top: 20%;
    width: 1100px;
    height: 900px;
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.2), transparent);
}
.space-neb-3 {
    left: -18%;
    top: 44%;
    width: 1200px;
    height: 950px;
    background: radial-gradient(closest-side, rgba(20, 184, 166, 0.16), transparent);
}
.space-neb-4 {
    right: -8%;
    top: 55%;
    width: 900px;
    height: 760px;
    background: radial-gradient(closest-side, rgba(14, 165, 233, 0.15), transparent);
}
.space-neb-5 {
    left: 10%;
    top: 72%;
    width: 1100px;
    height: 900px;
    background: radial-gradient(closest-side, rgba(217, 70, 239, 0.12), transparent);
}
.space-neb-6 {
    right: -10%;
    top: 90%;
    width: 1000px;
    height: 800px;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.16), transparent);
}
.space-band {
    position: absolute;
    left: -20%;
    right: -20%;
    top: 30%;
    height: 520px;
    transform: rotate(-12deg);
    background:
        radial-gradient(50% 50% at 50% 50%, rgba(191, 219, 254, 0.08), transparent 70%),
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(148, 163, 255, 0.06) 35%,
            rgba(224, 231, 255, 0.1) 50%,
            rgba(148, 163, 255, 0.06) 65%,
            transparent 100%
        );
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.space-planet {
    position: absolute;
    right: -36px;
    top: 51%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #6d8fd8 0%, #33467f 38%, #141a3a 70%, #090c20 100%);
    box-shadow: inset -18px -10px 40px rgba(2, 4, 14, 0.8);
    opacity: 0.55;
}
.space-planet-ring {
    position: absolute;
    left: -46%;
    top: 40%;
    width: 192%;
    height: 22%;
    border-radius: 50%;
    border: 2px solid rgba(165, 180, 252, 0.45);
    border-top-color: rgba(165, 180, 252, 0.12);
    transform: rotate(-16deg);
}
.space-meteor {
    position: fixed;
}

@media (max-width: 700px) {
    .space-planet {
        width: 90px;
        height: 90px;
        right: -10px;
    }
    .space-band {
        height: 360px;
    }
    .space-neb {
        width: 700px !important;
        height: 600px !important;
    }
}
@media (min-width: 1061px) {
    body > nav .nav-actions > a.btn-pill[href="contact"] {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        height: 40px;
        box-sizing: border-box;
        padding: 0 1.1rem 0 0.95rem;
        border-radius: 999px;
        border: 1px solid rgba(96, 165, 250, 0.45);
        background: linear-gradient(180deg, #0b1836, #08112a);
        box-shadow: none;
        color: #ffffff;
        font-family: "Poppins", "Poppins Fallback", sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        transition:
            border-color 0.2s ease,
            background-color 0.2s ease;
    }
    body > nav .nav-actions > a.btn-pill[href="contact"]::before {
        content: "";
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237cc0ff'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v.35A2 2 0 0 0 2.6 13.3v3A2 2 0 0 0 4.6 18.3h.9a1.2 1.2 0 0 0 1.2-1.2v-5.2a1.2 1.2 0 0 0-1.2-1.2h-.1A6.6 6.6 0 0 1 12 5a6.6 6.6 0 0 1 6.6 5.7h-.1a1.2 1.2 0 0 0-1.2 1.2v5.2a1.2 1.2 0 0 0 1.2 1.2h.3a2.2 2.2 0 0 1-2 1.3h-1.9a1.3 1.3 0 0 0 0 2.6h1.9a4.8 4.8 0 0 0 4.7-4A2 2 0 0 0 21.4 16.3v-3A2 2 0 0 0 20 11.35V11a8 8 0 0 0-8-8z'/%3E%3C/svg%3E")
            center / 16px 16px no-repeat;
    }
    body > nav .nav-actions > a.btn-pill[href="contact"]:hover {
        transform: none;
        border-color: rgba(147, 197, 253, 0.85);
        background: linear-gradient(180deg, #142a5c, #0d1d44);
    }
    body > nav .nav-actions > a.btn-pill[href="contact"]:focus-visible {
        outline: 2px solid #93c5fd;
        outline-offset: 3px;
    }
}

/* Hero buttons */
.hero-live .cta-group .hero-dl,
.hero-live .cta-group .hero-watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    height: 54px;
    box-sizing: border-box;
    padding: 0 1.65rem 0 1.4rem;
    border-radius: 999px;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #ffffff;
    text-decoration: none;
    box-shadow: none;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}
.hero-live .cta-group .hero-dl svg,
.hero-live .cta-group .hero-watch svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.hero-live .cta-group .hero-dl svg {
    color: #7cc0ff;
}
.hero-live .cta-group .hero-dl:hover {
    transform: translateY(-1px);
}
.hero-live .cta-group .hero-watch {
    border: 1px solid rgba(96, 165, 250, 0.45);
    background: linear-gradient(180deg, #0b1836, #08112a);
}
.hero-live .cta-group .hero-watch svg {
    width: 16px;
    height: 16px;
    color: #7cc0ff;
}
.hero-live .cta-group .hero-watch:hover {
    background: linear-gradient(180deg, #142a5c, #0d1d44);
    transform: translateY(-1px);
    border-color: rgba(147, 197, 253, 0.85);
}

.hero-live .cta-group .hero-dl:focus-visible,
.hero-live .cta-group .hero-watch:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .hero-live .cta-group .hero-dl,
    .hero-live .cta-group .hero-watch {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-live .cta-group .hero-dl:hover,
    .hero-live .cta-group .hero-watch:hover {
        transform: none;
    }
}

/* The hero's button pair, for the rest of the home page: .btn-edge has the
   moving light, .btn-still is the quiet one. */
.btn.btn-edge,
.btn.btn-still {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 50px;
    box-sizing: border-box;
    padding: 0 1.55rem 0 1.3rem;
    border-radius: 999px;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    color: #ffffff;
    box-shadow: none;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}
.btn.btn-edge svg,
.btn.btn-still svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: #7cc0ff;
}
.btn.btn-edge:hover {
    transform: translateY(-1px);
}
.btn.btn-still {
    border: 1px solid rgba(96, 165, 250, 0.45);
    background: linear-gradient(180deg, #0b1836, #08112a);
}
.btn.btn-still:hover {
    background: linear-gradient(180deg, #142a5c, #0d1d44);
    border-color: rgba(147, 197, 253, 0.85);
    transform: translateY(-1px);
}
.btn.btn-edge:focus-visible,
.btn.btn-still:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .btn.btn-edge:hover,
    .btn.btn-still:hover {
        transform: none;
    }
}

/* Hero backdrop scene and game link */
.convo-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    color: var(--h-accent);
    opacity: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, #000 45%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, #000 45%);
    transition: opacity 0.26s ease;
}
.convo-scene.is-swapping {
    opacity: 0;
}
.convo-scene svg {
    display: block;
    width: 100%;
    height: 100%;
}
.convo-bar,
.convo-body {
    position: relative;
    z-index: 1;
}
/* Home hero background: the blobs take the game's colour, with a soft stage
   light under the window. */
.hero-live .au-b {
    background: radial-gradient(closest-side, color-mix(in srgb, var(--h-accent) 40%, transparent), transparent);
}
.au-stage {
    position: absolute;
    left: calc(50% - 90px);
    top: 470px;
    width: 780px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--h-accent) 28%, transparent), transparent);
}
@media (max-width: 980px) {
    .au-stage {
        left: calc(50% - 390px);
        top: auto;
        bottom: 6%;
    }
}

.convo-go {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    width: fit-content;
    margin: 0.85rem 0.4rem 0 auto;
    color: var(--h-accent);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.convo-go svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.convo-go:hover {
    color: #ffffff;
}
.convo-go:hover svg {
    transform: translateX(3px);
}

/* FAQ answer links */
.faq-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}
.faq-link svg {
    width: 14px;
    height: 14px;
}
.faq-link:hover,
.faq-link:focus-visible {
    color: var(--g-accent, #93c5fd);
    border-color: var(--g-edge, rgba(96, 165, 250, 0.45));
}

/* "Send it to my PC" toast */
.send-toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 200;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: 0.75rem 1.1rem;
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 14px;
    background: rgba(8, 16, 38, 0.95);
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7);
    color: #f8fafc;
    font-size: 0.9rem;
    text-align: center;
    overflow-wrap: anywhere;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}
.send-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.about-head.head-left .section-title::before,
.block-h::before {
    display: none;
}
.sec-kicker {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--g-accent, #93c5fd);
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Star layers are screen-sized and fixed; index.js shifts them with the scroll, which is far
   cheaper than page-sized layers. */
.space-stars {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform, translate;
}
.space-far {
    height: calc(100vh + 1300px);
}
.space-mid {
    height: calc(100vh + 2000px);
}
.space-near {
    height: calc(100vh + 1400px);
}
#games .block {
    max-width: none;
}
#games .block > p {
    max-width: 820px;
}
.gcard-wide .gcard-art {
    height: 190px;
}
/* The card beside the big one matches its height; the scene takes the extra room, not a gap above
   the link. */
@media (min-width: 1101px) {
    .gcard-flagship + .gcard .gcard-art {
        height: 220px;
    }
}
@media (max-width: 640px) {
    .gcard-wide .gcard-art {
        height: 136px;
    }
}

.about-head.head-left.head-wide {
    max-width: none;
}
.about-head.head-left.head-wide .section-subtitle {
    max-width: 720px;
}

/* Decorative motion pauses while scrolling (index.js toggles html.is-scrolling). */
html.is-scrolling .hero-aurora *,
html.is-scrolling .space *:not(.space-meteor),
html.is-scrolling .strip-track,
html.is-scrolling .sc,
html.is-scrolling .hs-twinkle {
    animation-play-state: paused !important;
}
.au-blob {
    will-change: transform;
}

/* Rotate the whole svg so the rings are composited, not repainted each frame. */
.au-ring {
    animation: none;
}
.au-orbit {
    transform-origin: 50% 50%;
    will-change: transform;
    animation: au-spin 60s linear infinite;
}

.convo-scene .sc {
    animation-play-state: paused !important;
}

/* Edge light on the main buttons: a spinning layer under the button face, rather than an animated
   border that repaints every frame. */
.hero-live .cta-group .hero-dl,
.btn.btn-edge {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    background: rgba(96, 165, 250, 0.22);
}
.hero-live .cta-group .hero-dl {
    padding: 0 1.75rem 0 1.5rem;
}
.btn.btn-edge {
    padding: 0 1.65rem 0 1.4rem;
}
.hero-live .cta-group .hero-dl::before,
.btn.btn-edge::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 50%;
    width: calc(100% + 40px);
    aspect-ratio: 1;
    translate: -50% -50%;
    background: conic-gradient(
        rgba(96, 165, 250, 0),
        #8ec9ff 50deg,
        #ffffff 80deg,
        #8ec9ff 110deg,
        rgba(96, 165, 250, 0) 170deg,
        rgba(96, 165, 250, 0) 360deg
    );
    will-change: transform;
    animation: edge-spin 4s linear infinite;
}
.hero-live .cta-group .hero-dl::after,
.btn.btn-edge::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1.5px;
    border-radius: inherit;
    background: linear-gradient(180deg, #112552, #0a1634);
    transition: opacity 0.2s ease;
}
.hero-live .cta-group .hero-dl:hover,
.btn.btn-edge:hover {
    background: rgba(96, 165, 250, 0.35);
}
.hero-live .cta-group .hero-dl:hover::after,
.btn.btn-edge:hover::after {
    background: linear-gradient(180deg, #1d3d86, #12285c);
}
@keyframes edge-spin {
    to {
        transform: rotate(360deg);
    }
}
html.is-scrolling .hero-dl::before,
html.is-scrolling .btn-edge::before {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .au-orbit,
    .hero-live .cta-group .hero-dl::before,
    .btn.btn-edge::before {
        animation: none;
    }
}

/* index.js marks areas outside the viewport .is-offscreen */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
    animation-play-state: paused !important;
}

/* Game cards */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2.4rem;
}
.gcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 19rem;
    padding: 0;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--c) 22%, rgba(148, 163, 184, 0.14));
    background:
        radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--c) 11%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(14, 24, 52, 0.88), rgba(7, 12, 30, 0.92));
    color: var(--text-primary, #f8fafc);
    text-decoration: none;
    overflow: hidden;
    transition:
        border-color 0.25s ease,
        transform 0.2s ease;
}
.gcard::after {
    content: "";
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    top: 0;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--c), transparent);
    opacity: 0.55;
    transition: opacity 0.25s ease;
}
.block .game-grid a.gcard,
.block .game-grid a.gcard:hover {
    color: var(--text-primary, #f8fafc);
    border-bottom: 1px solid color-mix(in srgb, var(--c) 22%, rgba(148, 163, 184, 0.14));
}
.block .game-grid a.gcard:hover,
.block .game-grid a.gcard:focus-visible,
.gcard:hover,
.gcard:focus-visible {
    border-color: color-mix(in srgb, var(--c) 60%, transparent);
    transform: translateY(-3px);
}
.gcard:hover::after,
.gcard:focus-visible::after {
    opacity: 1;
}
.gcard:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 3px;
}

.gcard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}
.gcard-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
    background: color-mix(in srgb, var(--c) 14%, #0a1430);
    color: var(--c);
    flex-shrink: 0;
}
.gcard-icon {
    width: 30px;
    height: 30px;
}
.gcard-chip {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    color: color-mix(in srgb, var(--c) 80%, #ffffff);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.gcard-name {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.gcard-title {
    color: var(--c);
    font-size: 0.95rem;
    font-weight: 600;
}
.gcard-lede {
    max-width: 46ch;
    color: var(--text-secondary, #c3cde0);
    font-size: 0.98rem;
    line-height: 1.6;
}
.gcard-quote {
    position: relative;
    margin-top: 0.4rem;
    padding: 0.75rem 0.9rem;
    border-radius: 4px 14px 14px 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(5, 10, 28, 0.55);
    color: #dbe3f1;
    font-size: 0.9rem;
    line-height: 1.55;
}
.gcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: 0.88rem;
}
.gcard-mod {
    color: var(--text-secondary, #94a3b8);
    font-weight: 600;
}
.gcard-go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    color: #94a3b8;
    font-weight: 600;
    transition: color 0.2s ease;
}
.gcard-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.gcard:hover .gcard-go,
.gcard:focus-visible .gcard-go {
    color: var(--c);
}
.gcard:hover .gcard-arrow,
.gcard:focus-visible .gcard-arrow {
    transform: translateX(3px);
}
.gcard-flagship {
    grid-column: span 2;
    padding: 0;
    background:
        radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(20, 22, 58, 0.9), rgba(9, 10, 32, 0.94));
}
.gcard-flagship .gcard-name {
    font-size: 1.85rem;
}
.gcard-flagship .gcard-title {
    font-size: 1.05rem;
}
.gcard-flagship .gcard-quote {
    max-width: 52ch;
}

@media (max-width: 1100px) {
    .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .game-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .gcard-flagship {
        grid-column: auto;
    }
    .gcard {
        min-height: 0;
    }
    .gcard-flagship .gcard-name {
        font-size: 1.55rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gcard,
    .gcard-arrow {
        transition: none;
    }
    .gcard:hover,
    .gcard:focus-visible {
        transform: none;
    }
    .gcard:hover .gcard-arrow {
        transform: none;
    }
}
.gcard-art {
    position: relative;
    display: block;
    height: 132px;
    overflow: hidden;
    color: var(--c);
    background: radial-gradient(
        80% 120% at 50% 100%,
        color-mix(in srgb, var(--c) 14%, transparent),
        transparent 70%
    );
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.gcard-art svg {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gcard:hover .gcard-art svg,
.gcard:focus-visible .gcard-art svg {
    transform: scale(1.06);
}
.gcard-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    margin-top: -30px;
    padding: 0 1.4rem 1.2rem;
}
.gcard-chip {
    background: rgba(5, 10, 28, 0.7);
}
.gcard-who {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--c);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.gcard-flagship .gcard-art {
    height: 170px;
}
.gcard-flagship .gcard-body {
    padding: 0 1.7rem 1.4rem;
}
@media (max-width: 640px) {
    .gcard-art {
        height: 110px;
    }
    .gcard-flagship .gcard-art {
        height: 130px;
    }
    .gcard-flagship .gcard-body {
        padding: 0 1.4rem 1.2rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gcard-art svg {
        transition: none;
    }
    .gcard:hover .gcard-art svg {
        transform: none;
    }
}

/* Hero facts */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.05rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    color: #aab6cc;
    font-size: 0.88rem;
    font-weight: 500;
}
.hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}
.hero-facts svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.16);
    color: #7cc0ff;
}
.hero-facts a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-size 0.35s ease,
        color 0.2s ease;
    padding-bottom: 2px;
    background:
        linear-gradient(90deg, #7cc0ff, #a5b4fc) left bottom / 0% 1.5px no-repeat,
        linear-gradient(rgba(124, 192, 255, 0.35), rgba(124, 192, 255, 0.35)) left bottom / 100% 1px no-repeat;
}
.hero-facts a:hover,
.hero-facts a:focus-visible {
    color: #ffffff;
    background-size:
        100% 1.5px,
        100% 1px;
}
@media (prefers-reduced-motion: reduce) {
    .hero-facts a {
        transition: none;
    }
}
.hero-facts a:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
    border-radius: 4px;
}
@media (max-width: 600px) {
    .hero-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem 1rem;
    }
    .hero-facts li {
        white-space: normal;
    }
}
@media (max-width: 360px) {
    .hero-facts {
        gap: 0.6rem 0.7rem;
        font-size: 0.82rem;
    }
    .hero-facts li {
        gap: 0.35rem;
        white-space: nowrap;
    }
}

/* Home page sections */
.sec-statement .about-head {
    text-align: left;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.sec-statement .section-title {
    max-width: 15ch;
    margin: 0;
    text-align: left;
    font-size: clamp(2.5rem, 5.4vw, 4.3rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}
.sec-statement .lede {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    text-align: left;
}
.sec-statement .lede p {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.7;
}
@media (max-width: 760px) {
    .sec-statement .lede {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}
.cmp-heading {
    margin: 0;
    color: #94a3b8;
    font-family: "Inter", "Inter Fallback", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
}
.sec-letter {
    align-items: center;
}
.team-note {
    position: relative;
    max-width: 620px;
    padding: 2.4rem 2.5rem 2rem;
    border-radius: 6px 22px 22px 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(8, 14, 32, 0.72);
}
.team-hi {
    margin: 0 0 1rem;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #f8fafc;
}
.team-note p {
    margin: 0 0 0.9rem;
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
}
.team-note .team-sign {
    margin: 1.4rem 0 0;
    color: #f8fafc;
    font-family: "Poppins", "Poppins Fallback", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    font-style: italic;
}
.team-note .team-sign::before {
    content: "\2014\00a0";
    color: #64748b;
    font-style: normal;
}
@media (max-width: 600px) {
    .team-note {
        padding: 1.8rem 1.4rem 1.5rem;
    }
}
.team-note a {
    color: #93c5fd;
    text-decoration: underline;
    text-decoration-color: rgba(147, 197, 253, 0.4);
    text-underline-offset: 3px;
}
.team-note a:hover {
    color: #bfdbfe;
    text-decoration-color: #93c5fd;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.7rem 1.1rem;
    background: #11141b;
    color: #e9edf6;
    font:
        600 0.95rem/1 Inter,
        system-ui,
        sans-serif;
    text-decoration: none;
    border-radius: 0 0 10px 0;
}
.skip-link:focus {
    left: 0;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}