@font-face {
        font-family: 'Suisse Intl S Alt';
        src: url('SuisseIntlSAlt-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @keyframes ripple20 {
        0% {
            transform: scale(1);
            opacity: 0.5;
        }

        100% {
            transform: scale(1.6);
            opacity: 0;
        }
    }

    @property --ring-angle {
        syntax: '<angle>';
        inherits: false;
        initial-value: 0deg;
    }

    @keyframes ringSpin {
        to {
            --ring-angle: 360deg;
        }
    }

    @keyframes rainbowShift {
        0% {
            background-position: 0% 50%;
        }

        100% {
            background-position: 200% 50%;
        }
    }

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

    html,
    body {
        height: 100%;
        overflow: hidden;
        background: #000;
        overscroll-behavior: none;
    }

    body {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-weight: 500;
        -webkit-font-smoothing: antialiased;
        user-select: none;
        -webkit-user-select: none;
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    body.fonts-ready {
        opacity: 1;
    }

    /* --- Placeholder shimmer — "fill me in" beam --- */
    @keyframes placeholderShimmer {
        0% {
            background-position: 150% center;
        }

        100% {
            background-position: -50% center;
        }
    }

    .shimmer-placeholder {
        position: absolute;
        top: 0;
        left: 24px;
        right: 24px;
        bottom: 0;
        display: flex;
        align-items: center;
        pointer-events: none;
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: -0.32px;
        background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0.45) 30%,
                rgba(255, 255, 255, 0.75) 50%,
                rgba(255, 255, 255, 0.45) 70%,
                rgba(255, 255, 255, 0.2) 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: placeholderShimmer 3.5s linear infinite;
        transition: opacity 0.2s ease;
    }

    .shimmer-placeholder.hidden {
        opacity: 0;
    }

    /* --- Screens --- */
    .screen {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        color: #fff;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        isolation: isolate;
    }

    .screen.active {
        opacity: 1;
        pointer-events: all;
    }

    /* --- Round Indicator (e.g. "1/5") --- */
    .round-indicator {
        position: absolute;
        top: 30px;
        left: 30px;
        z-index: 10;
        font-family: inherit;
        font-weight: 500;
        font-size: 12px;
        line-height: 19px;
        user-select: none;
        -webkit-user-select: none;
        letter-spacing: 1.92px;
        color: #fff;
    }

    /* --- Picker channel label (HUE/SATURATION/BRIGHTNESS) --- */
    #picker-channel-label {
        position: absolute;
        bottom: 30px;
        left: 143px;
        z-index: 10;
        font-family: inherit;
        font-weight: 500;
        font-size: 12px;
        line-height: 19px;
        user-select: none;
        -webkit-user-select: none;
        letter-spacing: 1.92px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        opacity: 0;
        transition: opacity 0.15s ease;
        pointer-events: none;
    }

    /* --- Watermark --- */
    .watermark {
        position: absolute;
        z-index: 10;
        font-size: 14px;
        color: #fff;
        opacity: 0.5;
        letter-spacing: -0.56px;
        line-height: 1;
        pointer-events: none;
    }

    #memorize-wm {
        right: 30px;
        bottom: 30px;
    }

    #picker-wm {
        right: 30px;
        top: 30px;
    }

    /* --- Go Button (circle) --- */
    .go-btn {
        position: absolute;
        bottom: 30px;
        right: 30px;
        z-index: 10;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-weight: 500;
        font-size: 12px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease;
        padding: 0;
    }

    @media (hover: hover) {
        .go-btn:hover {
            transform: scale(1.02);
        }
    }

    .go-btn:active {
        transform: scale(0.97);
    }

    .go-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Text variant of go button (challenge join A/B test) */
    .go-btn.go-text {
        width: auto;
        height: 64px;
        border-radius: 58px;
        left: 30px;
        right: 30px;
        padding: 0 24px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.32px;
    }

    .go-btn.go-text svg {
        display: none;
    }

    /* --- Intro Screen --- */
    #intro-screen {
        background: #000;
        justify-content: flex-start;
        padding: 0;
    }

    #intro-title {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(92px, 22vw);
        font-weight: 500;
        /* letter-spacing: -5.52px; */
        line-height: 1;
        color: #fff;
        margin: 30px 0 0 30px;
    }

    #intro-body {
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.42px;
        color: #adadad;
        margin: auto 0 calc(307px + env(safe-area-inset-bottom, 0px)) 30px;
        max-width: 338px;
    }

    #intro-body p {
        margin-bottom: 17px;
    }

    #intro-body p:last-child {
        margin-bottom: 0;
    }

    #intro-mode-label {
        position: absolute;
        bottom: calc(209px + env(safe-area-inset-bottom, 0px));
        left: 30px;
        margin: 0;
        font-size: 21px;
        letter-spacing: -0.42px;
    }

    #intro-credit {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 31px 30px calc(38px + env(safe-area-inset-bottom, 0px));
        font-size: 11px;
        font-weight: 500;
        letter-spacing: -0.22px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: color 1.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #intro-credit::before {
        content: '';
        position: absolute;
        top: 0;
        left: 30px;
        right: 30px;
        height: 1px;
        background: rgba(255, 255, 255, 0.15);
    }

    #intro-credit .credit-version {
        color: rgba(255, 255, 255, 0.8);
    }

    #intro-credit svg:not(.new-pill) {
        display: none;
    }

    #intro-credit .new-pill {
        width: 30px;
        height: 15px;
        vertical-align: -4px !important;
    }

    @media (hover: hover) {
        #intro-credit:hover {
            color: #fff;
        }

        #desktop-credit:hover .credit-rainbow {
            background: linear-gradient(90deg, #ff6b6b, #a29bfe, #54a0ff, #7c3aed, #ff6b6b, #a29bfe, #54a0ff, #7c3aed);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: rainbowShift 0.625s ease-in-out infinite alternate;
        }
    }

    /* (total screen go-btn removed — see #total-actions) */
    /* --- Intro mode buttons (solo / multiplayer / toggle) --- */
    .intro-mode-btns {
        position: absolute;
        bottom: calc(124px + env(safe-area-inset-bottom, 0px));
        left: 30px;
        right: 30px;
        z-index: 10;
        display: flex;
        gap: 20px;
        align-items: center;
    }

    /* Toggle sits inline, pushed to far right */
    .intro-mode-btns .mode-toggle {
        position: static;
        font-size: 21px;
        letter-spacing: -0.42px;
        min-height: 64px;
    }

    .intro-mode-btns .mode-toggle svg {
        width: 36px;
        height: 36px;
    }

    .intro-mode-btn {
        /* width: 64px; */
        height: 64px;
        border-radius: 10px;
        flex-shrink: 0;
        aspect-ratio: 1;
        background: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
		white-space: nowrap;
        color: #000;
        position: relative;
        overflow: visible;
        z-index: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    }

    .intro-mode-btn svg {
        width: 29px;
        height: 29px;
        position: relative;
        z-index: 2;
    }

    #intro-solo:hover,
    #intro-multi:hover {
        /* color: #fff; */
        transform: scale(1.04);
    }

    .intro-mode-btn {
        --ring-dur: 10s;
    }

    /* .intro-mode-btn::after { */
        /* content: ''; */
        /* position: absolute; */
        /* inset: 0; */
        /* border-radius: 50%; */
        /* background: conic-gradient(from var(--ring-angle), #ff6b6b, #fdcb6e, #55efc4, #00cec9, #6c5ce7, #fd79a8, #ff6b6b); */
        /* pointer-events: none; */
        /* opacity: 0; */
        /* animation: ringSpin var(--ring-dur) linear infinite; */
        /* transition: opacity 0.35s ease; */
        /* z-index: 1; */
    /* } */

    /* .intro-mode-btn:hover::after { */
        /* opacity: 1; */
    /* } */

    .intro-mode-btn:active {
        transform: scale(0.94) !important;
    }

    /* --- Challenge intro screen --- */
    #challenge-intro-screen {
        background: #000;
        justify-content: flex-start;
        padding: 0;
    }

    #ci-close {
        position: absolute;
        top: 49px;
        right: 30px;
        z-index: 20;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    @media (hover: hover) {
        #ci-close:hover {
            transform: scale(1.08);
            background: rgba(255, 255, 255, 0.25);
        }
    }

    #ci-close:active {
        transform: scale(0.94);
    }

    #ci-close svg {
        width: 26px;
        height: 26px;
    }

    #challenge-title {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(82px, 19vw);
        font-weight: 500;
        letter-spacing: -4.92px;
        line-height: 1;
        color: #fff;
        margin: 30px 100px 0 30px;
    }

    #challenge-body {
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.42px;
        color: #adadad;
        margin: 13px 0 0 30px;
        max-width: 338px;
    }

    #challenge-body p {
        margin-bottom: 0;
    }

    #challenge-body .challenger-name {
        color: #fff;
    }

    #ci-name-row {
        margin: 48px 30px auto;
    }

    #ci-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        border: 2px solid #fff;
        border-radius: 58px;
        width: 100%;
        box-sizing: border-box;
        height: 65px;
        padding: 0 24px;
    }

    #challenge-name-input {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: -0.32px;
        line-height: 18px;
        height: auto;
        background: transparent;
        border: none;
        color: #fff;
        min-width: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        outline: none;
        caret-color: #fff;
        user-select: text;
        -webkit-user-select: text;
        box-sizing: border-box;
    }

    #challenge-name-input::placeholder {
        color: rgba(255, 255, 255, 0);
        letter-spacing: -0.32px;
    }

    /* --- Post-game name prompt (skip-name A/B test) --- */
    #name-prompt-overlay {
        background: rgba(0, 0, 0, 0.92);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #name-prompt-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 30px;
        width: 100%;
        box-sizing: border-box;
    }

    #name-prompt-text {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: -0.3px;
        margin: 0 0 24px;
    }

    #np-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        border: 2px solid #fff;
        border-radius: 58px;
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
        height: 65px;
        padding: 0 24px;
    }

    #name-prompt-input {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: -0.32px;
        background: transparent;
        border: none;
        color: #fff;
        width: 100%;
        padding: 0;
        margin: 0;
        outline: none;
        caret-color: #fff;
    }

    #name-prompt-input::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }

    #name-prompt-go {
        margin-top: 24px;
        width: 65px;
        height: 65px;
        flex-shrink: 0;
    }

    /* --- Challenge setup screen (Frame 36) --- */
    #challenge-setup-screen {
        background: #000;
        justify-content: flex-start;
        padding: 0;
    }

    #cs-close {
        position: absolute;
        top: 49px;
        right: 30px;
        z-index: 20;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    @media (hover: hover) {
        #cs-close:hover {
            transform: scale(1.08);
            background: rgba(255, 255, 255, 0.25);
        }
    }

    #cs-close:active {
        transform: scale(0.94);
    }

    #cs-close svg {
        width: 26px;
        height: 26px;
    }

    #challenge-setup-title {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(82px, 13vw);
        font-weight: 500;
        letter-spacing: -4.92px;
        line-height: 1;
        color: #fff;
        margin: 30px 100px 0 30px;
    }

    #challenge-setup-body {
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.42px;
        color: #adadad;
        margin: 17px 0 0 30px;
        max-width: 338px;
    }

    #challenge-setup-body p {
        margin-bottom: 18px;
    }

    #challenge-setup-body p:last-child {
        margin-bottom: 0;
    }

    #cs-name-row {
        margin: 48px 30px auto;
    }

    #cs-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        border: 2px solid #fff;
        border-radius: 58px;
        width: 100%;
        box-sizing: border-box;
        height: 65px;
        padding: 0 24px;
    }

    #cs-name-input {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: -0.32px;
        line-height: 18px;
        height: auto;
        background: transparent;
        border: none;
        color: #fff;
        min-width: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        outline: none;
        caret-color: #fff;
        user-select: text;
        -webkit-user-select: text;
        box-sizing: border-box;
    }

    #cs-name-input::placeholder {
        color: rgba(255, 255, 255, 0);
        letter-spacing: -0.32px;
    }

    /* Blinking I-beam cursor (hidden in pill input mode) */
    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    .cs-cursor {
        display: none;
    }

    .cs-cursor.hidden {
        display: none;
    }

    /* --- Link section (anchored to bottom) --- */
    #cs-link-section {
        margin-top: auto;
        padding: 0 30px 90px;
    }

    #cs-link-label {
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: -0.24px;
        color: #adadad;
        margin-bottom: 10px;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    #cs-link-row {
        display: none;
    }

    #cs-link-text {
        flex: 1;
        font-size: 12px;
        font-weight: 500;
        color: #b3b3b3;
        letter-spacing: -0.24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        user-select: text;
        -webkit-user-select: text;
    }

    #cs-link-text.flash,
    .cr-link-text.flash {
        color: #fff;
        transition: color 0.35s ease-out;
    }

    /* Rainbow shimmer on copy */
    @keyframes linkColorCycle {
        0% {
            color: #b3b3b3;
        }

        10% {
            color: #ff6b6b;
        }

        25% {
            color: #fdcb6e;
        }

        40% {
            color: #55efc4;
        }

        55% {
            color: #00cec9;
        }

        70% {
            color: #6c5ce7;
        }

        85% {
            color: #fd79a8;
        }

        100% {
            color: #b3b3b3;
        }
    }

    #cs-link-text.rainbow,
    .cr-link-text.rainbow {
        animation: linkColorCycle 1.2s ease forwards;
    }

    #cs-copy-btn {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
        transition: opacity 0.15s;
        flex-shrink: 0;
    }

    #cs-copy-btn:hover {
        opacity: 1;
    }

    #cs-copy-btn svg {
        width: 16px;
        height: 16px;
    }

    /* --- Three-step flow: name → share → play --- */

    /* Step 1 (default): link section hidden, go arrow visible */
    #cs-link-section {
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    /* Step 2 (.cs-created): link section slides in */
    #challenge-setup-screen.cs-created #cs-link-section {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    #challenge-setup-screen.cs-created #cs-name-row {
        opacity: 0.3;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* After copying, label fades out, button stays */
    #challenge-setup-screen.cs-copied #cs-link-label {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Bottom action container for challenge setup */
    #cs-actions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 30px calc(34px + env(safe-area-inset-bottom, 0px));
    }

    #cs-share-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 64px;
        background: #fff;
        color: #000;
        border: none;
        border-radius: 58px;
        font-family: inherit;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.32px;
        cursor: pointer;
        transition: transform 0.15s ease, background 0.3s ease, color 0.3s ease;
    }

    @media (hover: hover) {
        #cs-share-btn:not(.copied):hover {
            transform: scale(1.02);
        }
    }

    #cs-share-btn:active {
        transform: scale(0.97);
    }

    #cs-share-btn svg {
        width: 16px;
        height: 16px;
        transition: opacity 0.2s ease;
    }

    /* Copied state: green confirmation */
    #cs-share-btn.copied {
        background: #14b861;
        color: #fff;
    }

    /* Ready-to-play state */
    #cs-share-btn.ready {
        background: #fff;
        color: #000;
    }

    /* --- Challenge result screen (adaptive: waiting / 2p / 3+) --- */
    #challenge-result-screen {
        background: #000;
        justify-content: flex-start;
        padding: 0;
        overflow: hidden;
    }

    #cr-scroll {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #cr-scroll::-webkit-scrollbar {
        display: none;
    }

    #cr-bottom {
        flex-shrink: 0;
        position: relative;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #cr-bottom-fade {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 150px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.35) 55%, #000 100%);
        pointer-events: none;
        z-index: 1;
    }

    #cr-close {
        position: absolute;
        top: 49px;
        right: 30px;
        z-index: 20;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    @media (hover: hover) {
        #cr-close:hover {
            transform: scale(1.08);
            background: rgba(255, 255, 255, 0.25);
        }
    }

    #cr-close:active {
        transform: scale(0.94);
    }

    #cr-close svg {
        width: 26px;
        height: 26px;
    }

    #cr-title {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(92px, 18vw);
        font-weight: 500;
        letter-spacing: -5.52px;
        line-height: 1;
        color: #fff;
        margin: 30px 0 0 30px;
        max-width: 400px;
    }

    #cr-description {
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.42px;
        color: #fff;
        margin: 17px 0 12px 30px;
        max-width: 338px;
    }

    /* --- 2-player layout --- */
    .cr-2p {
        margin: 23px 0 0 30px;
        flex: 1;
        padding-bottom: 8px;
        padding-right: 30px;
    }

    .cr-2p-entry {
        margin-bottom: 30px;
    }

    .cr-2p-entry:last-child {
        margin-bottom: 0;
    }

    /* Hero entry (player 1) */
    .cr-2p-entry.cr-hero .cr-2p-label {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.32px;
        line-height: 1.2;
        margin-bottom: 0;
    }

    .cr-2p-entry.cr-hero .cr-2p-score {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(82px, 16vw);
        font-weight: 500;
        letter-spacing: -4.92px;
        line-height: 1;
        color: #fff;
    }

    .cr-2p-entry.cr-hero .cr-2p-swatches {
        margin-top: 28px;
    }

    /* Compact entry (player 2+) */
    .cr-2p-entry.cr-compact .cr-2p-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .cr-2p-entry.cr-compact .cr-2p-label {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.36px;
        line-height: 1.2;
    }

    .cr-2p-entry.cr-compact .cr-2p-score {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -1.08px;
        line-height: 1;
        color: #fff;
    }

    .cr-2p-label .winner-tag {
        color: #14b861;
    }

    .cr-2p-label .loser-tag {
        color: #c72525;
    }

    .cr-2p-label .tie-tag {
        color: #ffe100;
    }

    .cr-2p-label .name-tag {
        color: #fff;
    }

    .cr-2p-score .cr-max {
        opacity: 0.5;
    }

    .cr-2p-swatches {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        margin-top: 12px;
    }

    /* --- 3+ ranked list (Frame 33) --- */
    #cr-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.15);
        margin: 16px 30px 0;
        display: none;
    }

    #cr-list-wrapper {
        margin-top: 24px;
    }

    #cr-list {
        padding: 0 30px 120px;
    }

    .cr-row {
        display: flex;
        align-items: baseline;
        padding: 9px 0;
        position: relative;
    }

    .cr-row-rank {
        font-family: inherit;
        font-size: 14px;
        font-variant-numeric: tabular-nums;
        color: #808080;
        width: 18px;
        text-align: right;
        letter-spacing: -0.28px;
        line-height: 17px;
    }

    .cr-row-name {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        color: #fff;
        flex: 1;
        line-height: 17px;
        margin-left: 18px;
    }

    .cr-row-score {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        color: #fff;
        text-align: right;
        line-height: 17px;
        font-variant-numeric: tabular-nums;
    }

    .cr-row.cr-first .cr-row-rank,
    .cr-row.cr-first .cr-row-name,
    .cr-row.cr-first .cr-row-score {
        color: #14b861;
    }

    .cr-row.cr-highlight .cr-row-name,
    .cr-row.cr-highlight .cr-row-score {
        color: #ffe100;
    }

    @keyframes nameShimmer {
        0% {
            background-position: 150% center;
        }

        100% {
            background-position: -50% center;
        }
    }

    .shimmer-flash {
        background: linear-gradient(90deg,
                #fff 0%,
                rgba(255, 255, 255, 0.35) 45%,
                #fff 50%,
                rgba(255, 255, 255, 0.35) 55%,
                #fff 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: nameShimmer 0.8s ease-in-out 1 forwards;
    }

    .shimmer-flash * {
        -webkit-text-fill-color: transparent !important;
    }

    .shimmer-flash .cr-max {
        opacity: 1 !important;
    }

    /* --- Card entries (2+ players with swatches) --- */
    .cr-card {
        margin-bottom: 30px;
    }

    .cr-card:last-child {
        margin-bottom: 0;
    }

    .cr-card-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .cr-card-name {
        font-size: 21px;
        font-weight: 500;
        letter-spacing: -0.42px;
        line-height: 1.2;
        color: #fff;
    }

    .cr-card-score {
        font-size: 21px;
        font-weight: 500;
        letter-spacing: -1.26px;
        line-height: 1;
        color: #fff;
        white-space: nowrap;
    }

    .cr-card-score .cr-max {
        opacity: 0.5;
    }

    .cr-card-first .cr-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cr-card-first .cr-card-score {
        font-size: min(82px, 16vw);
        letter-spacing: -4.92px;
        margin-top: 4px;
    }

    .cr-card-first .cr-2p-swatches {
        margin-top: 28px;
    }

    .cr-card-first {
        padding-bottom: 38px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* --- Waiting state (1 player) — compact layout matching 2p --- */
    #cr-waiting {
        margin: clamp(40px, 10vh, 100px) 30px 0;
        display: none;
    }

    #cr-waiting-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    #cr-waiting-name {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.36px;
        color: #fff;
    }

    #cr-waiting-score {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -1.08px;
        line-height: 1;
        color: #fff;
    }

    #cr-waiting-score .cr-max {
        opacity: 0.5;
    }

    #cr-waiting-swatches {
        margin-top: 12px;
    }

    /* --- Spacer pushes action button to bottom when content is short --- */
    #cr-spacer {
        flex: 1;
    }

    #cr-helper {
        padding: 0 30px 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.32px;
        color: #adadad;
        text-align: center;
    }

    /* --- Bottom action button (pill CTA) on challenge result screen --- */
    #cr-actions {
        flex-shrink: 0;
        padding: 20px 30px 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #cr-actions.visible {
        opacity: 1;
        transform: translateY(0);
    }

    #cr-action-primary {
        position: relative;
        width: 100%;
        height: 64px;
        border-radius: 58px;
        background: #fff;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.32px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: background 0.35s ease, color 0.35s ease, transform 0.15s ease;
    }

    @media (hover: hover) {
        #cr-action-primary:not(.copied):hover {
            opacity: 0.9;
        }
    }

    #cr-action-primary:active {
        transform: scale(0.97);
    }

    #cr-action-primary svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        transition: opacity 0.25s ease;
    }

    #cr-action-primary .cr-icon-copy,
    #cr-action-primary .cr-icon-check {
        display: none;
    }

    #cr-action-primary .cr-icon-copy {
        display: block;
    }

    #cr-action-primary.copied .cr-icon-copy {
        display: none;
    }

    #cr-action-primary.copied .cr-icon-check {
        display: block;
    }

    /* Gold CTA for 3+ player state */
    #cr-action-primary.cr-gold {
        background: #ffe103;
        color: #000;
    }

    /* Copied state: green confirmation */
    #cr-action-primary.copied {
        background: #14b861;
        color: #fff;
    }

    #cr-action-primary.copied::before {
        display: none;
    }

    /* --- Spicy name dialog --- */
    #spicy-overlay {
        position: fixed;
        inset: 0;
        z-index: 500;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        padding: 30px;
    }

    #spicy-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    #spicy-box {
        max-width: 320px;
        width: 100%;
        text-align: left;
    }

    #spicy-msg {
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: -0.36px;
        color: #adadad;
        margin-bottom: 28px;
    }

    #spicy-actions {
        display: flex;
        gap: 10px;
    }

    .spicy-btn {
        flex: 1;
        padding: 14px 0;
        border-radius: 99px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        cursor: pointer;
        border: none;
        transition: transform 0.12s, background 0.15s;
    }

    .spicy-btn:hover {
        transform: scale(1.03);
    }

    .spicy-btn:active {
        transform: scale(0.97);
    }

    #spicy-change {
        background: #fff;
        color: #000;
    }

    #spicy-keep {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    /* --- Countdown Screen (ready/set/go) --- */
    #countdown-screen {
        padding: 0;
        background: #000;
        transition: background-color 0.45s ease;
    }

    #countdown-word {
        position: absolute;
        right: 16px;
        top: 6px;
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(92px, 18vw);
        font-weight: 500;
        letter-spacing: -2.76px;
        line-height: 1;
        text-align: right;
        transition: opacity 0.15s ease;
    }

    /* --- Memorize Screen --- */
    #memorize-screen {
        padding: 0;
    }

    #memorize-color {
        position: absolute;
        inset: 0;
    }

    #timer-value {
        position: absolute;
        right: 16px;
        top: 6px;
        z-index: 2;
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(92px, 18vw);
        font-weight: 500;
        letter-spacing: -2.76px;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        text-align: right;
        color: #fff;
    }

    #timer-int {
        display: inline-block;
        position: relative;
    }

    #timer-dec {
        display: inline-block;
        opacity: 0.52;
    }

    @keyframes numSlideOut {
        0% {
            transform: translateY(0);
            filter: blur(0);
            opacity: 1;
        }

        100% {
            transform: translateY(22%);
            filter: blur(4px);
            opacity: 0;
        }
    }

    @keyframes numSlideIn {
        0% {
            transform: translateY(-22%);
            filter: blur(4px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            filter: blur(0);
            opacity: 1;
        }
    }

    .num-out {
        animation: numSlideOut 0.12s ease-in forwards;
    }

    .num-in {
        animation: numSlideIn 0.15s ease-out forwards;
    }

    @keyframes descFadeIn {
        0% {
            opacity: 0;
            transform: translateY(-8px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .desc-animate {
        animation: descFadeIn 0.4s ease-out forwards;
    }

    .num-out-fast {
        animation: numSlideOut 0.06s ease-in forwards;
    }

    .num-in-fast {
        animation: numSlideIn 0.07s ease-out forwards;
    }

    .score-int,
    .score-dot,
    .score-dec {
        display: inline-block;
    }

    .score-slash {
        display: inline-block;
        opacity: 0.5;
    }

    .score-max {
        display: inline-block;
        opacity: 0.5;
    }

    #timer-label {
        position: absolute;
        right: 16px;
        top: min(92px, 18vw);
        z-index: 2;
        font-size: 12px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: -0.24px;
        text-align: right;
        color: #fff;
    }

    /* --- Fade Overlay --- */
    #fade-overlay {
        position: fixed;
        inset: 0;
        background: #000;
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transition: opacity 1s ease;
    }

    #fade-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    #fade-overlay.fast {
        transition: opacity 0.4s ease;
    }

    /* --- Picker Screen --- */
    #picker-screen {
        padding: 0;
    }

    #picker-bg {
        position: absolute;
        inset: 0;
        transition: background 0.08s;
    }

    .strip-container {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 120px;
        z-index: 5;
        display: flex;
        opacity: 0;
        transform: translateX(-100%);
        transition: opacity 0.5s ease-out 0.05s, transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s;
    }

    #picker-screen.active .strip-container {
        opacity: 1;
        transform: translateX(0);
    }

    .strip {
        flex: 1;
        position: relative;
        cursor: pointer;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }

    .strip-handle {
        position: absolute;
        left: 50%;
        width: 25px;
        height: 25px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: #fff;
        border: none;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        cursor: grab;
        z-index: 2;
        transition: top 0.05s linear;
    }

    .strip-handle:active {
        cursor: grabbing;
    }

    #picker-label {
        position: absolute;
        left: 143px;
        bottom: 62px;
        z-index: 5;
        font-size: 12px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: -0.24px;
        opacity: 0.5;
        transition: color 0.15s;
    }

    #picker-values {
        position: absolute;
        left: 143px;
        bottom: 44px;
        z-index: 5;
        font-size: 12px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: -0.24px;
        transition: color 0.15s;
    }

    #picker-round {
        left: 143px;
    }

    #picker-info {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s;
    }

    #picker-screen.active #picker-info {
        opacity: 1;
        transform: translateY(0);
    }

    #picker-go {
        opacity: 0;
        transition: opacity 0.3s ease 0.35s, transform 0.15s ease;
    }

    #picker-screen.active #picker-go {
        opacity: 1;
    }

    /* --- Results Screen --- */
    #result-screen {
        padding: 0;
    }

    .result-half {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 30px 14px;
    }

    .result-label {
        font-size: 12px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: -0.24px;
        opacity: 0.5;
    }

    .result-hsb {
        font-size: 12px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: -0.24px;
    }

    #result-score {
        position: absolute;
        right: 30px;
        top: 30px;
        z-index: 5;
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(92px, 18vw);
        font-weight: 500;
        letter-spacing: -2.76px;
        line-height: 1;
        text-align: right;
    }

    #result-feedback {
        position: absolute;
        right: 30px;
        top: calc(30px + min(92px, 18vw) + 4px);
        z-index: 5;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.36px;
        text-align: right;
        max-width: min(340px, 75vw);
        text-wrap: balance;
    }

    /* --- Total Screen --- */
    #total-screen {
        background: #000;
        justify-content: flex-start;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
        scrollbar-width: none;
    }

    #total-screen::-webkit-scrollbar {
        display: none;
    }

    #total-title {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(92px, 18vw);
        font-weight: 500;
        letter-spacing: -5.52px;
        line-height: 1;
        color: #fff;
        margin: 30px 0 0 30px;
    }

    #total-rank-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin: 32px 30px 0;
    }

    #total-score {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: 21px;
        font-weight: 500;
        letter-spacing: -0.42px;
        line-height: 1.2;
        color: #fff;
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
    }

    #total-description {
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.42px;
        color: #fff;
        margin: 17px 0 0 30px;
        max-width: 338px;
    }

    #challenge-credit,
    #challenge-setup-credit {
        display: none;
    }

    /* --- Ranking text (on total screen) --- */
    #total-ranking {
        margin: 0;
        max-width: none;
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.42px;
        color: #fff;
    }

    #total-ranking:empty {
        visibility: hidden;
        min-height: 26px;
    }

    #total-ranking .rank-name {
        font-weight: 500;
    }

    #total-ranking .rank-num {
        color: #ffe103;
    }

    /* --- Unified fade-in (triggered by .reveal on #total-screen) --- */
    #total-rank-row,
    #total-swatches,
    #total-initials-row,
    #total-actions,
    #ad-results {
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    #total-description {
        opacity: 0;
    }

    #total-screen.reveal #total-rank-row,
    #total-screen.reveal #total-swatches,
    #total-screen.reveal #total-initials-row,
    #total-screen.reveal #total-actions,
    #total-screen.reveal #ad-results {
        opacity: 1;
    }

    /* --- Color swatches on total screen --- */
    #total-swatches {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        margin: 14px 30px 0 30px;
    }

    .swatch-card {
        position: relative;
        aspect-ratio: 1;
        overflow: hidden;
        perspective: 300px;
    }

    .swatch-target {
        position: absolute;
        inset: 0;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    .swatch-player {
        position: absolute;
        inset: 0;
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    .swatch-score {
        position: absolute;
        top: 4px;
        left: 6px;
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.32px;
        z-index: 2;
    }

    .fold-swatches .swatch-player {
        clip-path: none;
    }

    .fold-swatches .swatch-target {
        z-index: 1;
        backface-visibility: hidden;
        transform: rotate3d(-1, 1, 0, 180deg);
    }

    .fold-swatches .swatch-target.fold-reveal {
        transform: rotate3d(-1, 1, 0, 0deg);
        transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.36, 1);
    }

    .fold-swatches .swatch-score {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .fold-swatches .swatch-score.score-visible {
        opacity: 1;
    }

    /* --- Solo initials input --- */
    #total-initials-row {
        margin: 36px 30px 0;
        position: relative;
    }

    #total-initials {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.32px;
        color: #fff;
        background: none;
        border: 2px solid #fff;
        border-radius: 58px;
        width: 100%;
        height: 65px;
        padding: 0 24px;
        box-sizing: border-box;
        outline: none;
        caret-color: #fff;
    }

    #total-initials::placeholder {
        color: rgba(255, 255, 255, 0);
        letter-spacing: -0.32px;
    }

    #total-initials:focus {
        border-color: rgba(255, 255, 255, 0.8);
    }

    /* --- Close button on total screen --- */
    #total-close {
        display: flex;
        position: absolute;
        top: 49px;
        right: 30px;
        z-index: 20;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #fff;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    #total-close svg {
        width: 26px;
        height: 26px;
    }

    @media (hover: hover) {
        #total-close:hover {
            transform: scale(1.08);
            background: rgba(255, 255, 255, 0.25);
        }
    }

    #total-close:active {
        transform: scale(0.94);
    }

    /* --- Top gradient fade on total screen (masks content behind close button) --- */
    #total-fade-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 130px;
        z-index: 19;
        background: linear-gradient(to bottom,
                #000 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #total-fade-top.visible {
        opacity: 1;
    }

    /* --- Helper text (appears after CTA action) --- */
    #total-helper {
        margin: 12px 30px 0;
        min-height: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.32px;
        color: #adadad;
        text-align: center;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #total-helper:empty {
        display: none;
    }

    #total-helper.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* --- Bottom action button (pill CTA) on total screen --- */
    #total-actions {
        margin: 19px 30px 0;
        display: flex;
        flex-direction: column;
    }

    #total-challenge-btn {
        width: 100%;
        height: 64px;
        border-radius: 58px;
        background: #fff;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.32px;
        color: #000;
        transition: transform 0.15s ease, background 0.3s ease, color 0.3s ease;
    }

    @media (hover: hover) {
        #total-challenge-btn:not(.copied):hover {
            opacity: 0.9;
        }
    }

    #total-challenge-btn:active {
        transform: scale(0.97);
    }

    #total-challenge-btn:disabled {
        opacity: 0.5;
        cursor: default;
    }

    #total-challenge-btn.copied {
        background: #14b861;
        color: #fff;
        opacity: 1;
    }

    /* --- Leaderboard Screen --- */
    #leaderboard-screen {
        background: #000;
        justify-content: flex-start;
        padding: 0;
    }

    #lb-header {
        padding: 30px 30px 0 30px;
    }

    #lb-title {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(50px, 12vw);
        font-weight: 500;
        letter-spacing: -3px;
        line-height: 1;
        color: #fff;
    }

    #lb-close {
        position: absolute;
        top: 49px;
        right: 30px;
        z-index: 20;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        border-radius: 50%;
        width: 58px;
        height: 58px;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    @media (hover: hover) {
        #lb-close:hover {
            transform: scale(1.08);
            background: rgba(255, 255, 255, 0.25);
        }
    }

    #lb-close:active {
        transform: scale(0.94);
    }

    #lb-close svg {
        width: 26px;
        height: 26px;
    }

    #lb-count {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        color: #adadad;
        padding: 10px 30px 0;
        line-height: 17px;
        min-height: 27px;
    }

    #lb-mode-tabs {
        display: flex;
        gap: 20px;
        margin: 16px 30px 0;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        position: relative;
    }

    .lb-tab {
        font-family: inherit;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: -0.28px;
        color: #808080;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: color 0.2s ease;
        position: relative;
    }

    .lb-tab.active {
        color: #fff;
    }

    .lb-tab.active::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        height: 1px;
        background: #fff;
    }

    #lb-list-wrapper {
        flex: 1;
        min-height: 0;
        position: relative;
        overflow: hidden;
    }

    #lb-list {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        padding: 12px 30px 80px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
        transition: opacity 0.25s ease;
    }

    #lb-list::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    #lb-list.lb-slide-left {
        animation: lbSlideLeft 0.28s ease both;
    }

    #lb-list.lb-slide-right {
        animation: lbSlideRight 0.28s ease both;
    }

    @keyframes lbSlideLeft {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        40% {
            transform: translateX(-60px);
            opacity: 0;
        }

        41% {
            transform: translateX(60px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes lbSlideRight {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        40% {
            transform: translateX(60px);
            opacity: 0;
        }

        41% {
            transform: translateX(-60px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Top gradient fade for scrolled list */
    .lb-fade-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        z-index: 2;
        background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .lb-fade-top.visible {
        opacity: 1;
    }

    /* Bottom gradient fade — ease-in curve matching Figma */
    .lb-fade-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        z-index: 2;
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.08) 30%,
                rgba(0, 0, 0, 0.35) 55%,
                rgba(0, 0, 0, 0.7) 75%,
                #000 100%);
        pointer-events: none;
        border-radius: 0 0 16px 16px;
    }

    .lb-row {
        display: flex;
        align-items: baseline;
        padding: 9px 0;
        position: relative;
    }

    .lb-rank {
        font-family: inherit;
        font-weight: 400;
        font-size: 14px;
        color: #808080;
        width: 18px;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.28px;
        line-height: 17px;
        text-align: right;
    }

    .lb-name {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        color: #fff;
        flex: 1;
        line-height: 17px;
        margin-left: 18px;
    }

    .lb-score {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.28px;
        text-align: right;
        line-height: 17px;
    }

    .lb-empty {
        text-align: center;
        padding: 60px 30px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.35);
        font-weight: 500;
    }

    /* Leaderboard loader — Rainbow Ring */
    .lb-loader {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 80px 0;
    }

    .lb-loader .rainbow-ring {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        position: relative;
    }

    .lb-loader .rainbow-ring::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(#ff6b6b, #fdcb6e, #00cec9, #6c5ce7, #ff6b6b);
        animation: lb-ring-spin 1s linear infinite;
        mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    }

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

    /* Leaderboard button (on intro screen, sits at bottom-right near credit) */
    .lb-btn {
        position: absolute;
        bottom: calc(30px + env(safe-area-inset-bottom, 0px));
        right: 30px;
        z-index: 10;
        background: none;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.6);
        transition: transform 0.15s ease, color 0.2s ease;
    }

    .lb-btn:hover {
        transform: scale(1.08);
        color: #fff;
    }

    .lb-btn:active {
        transform: scale(0.95);
    }

    .lb-btn svg {
        width: 24px;
        height: 24px;
    }

    /* --- Daily screens --- */
    #daily-intro,
    #daily-results,
    #daily-played {
        background: #000;
        justify-content: flex-start;
        padding: 0;
    }

    .daily-date {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.36px;
        line-height: 1.2;
        color: #fff;
        margin: 30px 0 0 30px;
    }

    .daily-date-dim {
        color: rgba(255, 255, 255, 0.5);
    }

    .daily-title {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(92px, 22vw);
        font-weight: 500;
        letter-spacing: -5.52px;
        line-height: 0.97;
        color: #fff;
        margin: 8px 0 0 30px;
    }

    .daily-body {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.36px;
        color: #adadad;
        margin: 20px 0 0 30px;
        max-width: 315px;
    }

    .daily-body p {
        margin-bottom: 22px;
    }

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

    .daily-body-muted {
        color: #606060;
    }

    .daily-score {
        font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
        font-size: min(92px, 22vw);
        font-weight: 500;
        letter-spacing: -5.52px;
        line-height: 0.97;
        color: #fff;
        margin: 8px 0 0 30px;
    }

    .daily-score-dim {
        color: rgba(255, 255, 255, 0.5);
    }

    .daily-desc {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.36px;
        color: #adadad;
        margin: 20px 0 0 30px;
        max-width: 315px;
        min-height: 1.2em;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .daily-desc.visible {
        opacity: 1;
    }

    .daily-color-grid {
        display: flex;
        margin: 20px 30px 0;
        overflow: hidden;
    }

    .daily-color-cell {
        position: relative;
        flex: 1 1 0;
        aspect-ratio: 1;
        perspective: 500px;
    }

    .daily-color-cell .cell-target {
        position: absolute;
        inset: -1px;
    }

    .daily-color-cell .di-card {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .daily-color-cell .di-card.di-flipped {
        transform: rotateY(180deg);
    }

    .daily-color-cell .di-face {
        position: absolute;
        inset: -1px;
        backface-visibility: hidden;
    }

    .daily-color-cell .di-back {
        transform: rotateY(180deg);
    }

    .daily-color-cell .cell-pick {
        position: absolute;
        inset: -1px;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    .daily-color-cell .cell-score-label {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.36px;
        line-height: 1.2;
        opacity: 0.7;
    }

    .daily-color-cell .cell-score-label.dark {
        color: #000;
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    }

    .daily-color-cell .cell-score-label.light {
        color: #fff;
        text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    }

    @keyframes cellReveal {
        0% {
            opacity: 0;
            transform: scale(0.7) rotate(-4deg);
        }

        60% {
            opacity: 1;
            transform: scale(1.04) rotate(1deg);
        }

        100% {
            opacity: 1;
            transform: scale(1) rotate(0);
        }
    }

    .daily-color-cell.animating {
        opacity: 0;
        animation: cellReveal 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .daily-countdown {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        margin-bottom: 10px;
        font-variant-numeric: tabular-nums;
    }

    .daily-date .daily-countdown-inline {
        display: none;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        color: inherit;
        font-variant-numeric: tabular-nums;
    }

    .daily-countdown-mobile {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        margin-bottom: 10px;
        font-variant-numeric: tabular-nums;
    }

    .daily-share-preview {
        width: 100%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 14px 16px;
        margin-top: 20px;
        margin-bottom: 16px;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.6);
        white-space: pre-line;
        text-align: left;
    }

    .daily-share-preview {
        cursor: pointer;
        transition: background 0.2s ease;
    }

    @media (hover: hover) {
        .daily-share-preview:hover {
            background: rgba(255, 255, 255, 0.1);
        }
    }

    .daily-share-preview:active {
        background: rgba(255, 255, 255, 0.12);
    }

    .daily-share-preview .stc-title {
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
    }

    .daily-share-preview .stc-score {
        font-size: 16px;
    }

    .daily-share-preview .stc-link {
        color: rgba(255, 255, 255, 0.3);
        font-size: 14px;
    }

    .daily-friend-score {
        display: none;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 12px;
    }

    .daily-friend-score.visible {
        display: block;
    }

    .daily-actions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 30px calc(40px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .daily-actions.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .daily-primary-btn {
        width: 100%;
        height: 54px;
        border-radius: 8px;
        background: #fff;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.3px;
        color: #000;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

    @media (hover: hover) {
        .daily-primary-btn:hover {
            opacity: 0.9;
        }
    }

    .daily-primary-btn:active {
        transform: scale(0.97);
    }

    .daily-primary-btn.copied {
        background: #1db954;
        color: #fff;
        transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease;
    }

    .daily-primary-btn.share-ready {
        background: transparent;
        color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
    }

    @media (hover: hover) {
        .daily-primary-btn.share-ready:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.05);
        }
    }

    .daily-secondary-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.2px;
        color: rgba(255, 255, 255, 0.4);
        padding: 14px 20px;
        border-radius: 8px;
        transition: color 0.15s ease, background 0.15s ease;
    }

    @media (hover: hover) {
        .daily-secondary-btn:hover {
            color: rgba(255, 255, 255, 0.7);
            background: rgba(255, 255, 255, 0.05);
        }
    }

    .daily-actions-intro {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    .daily-credit {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        align-items: center;
        gap: 8px;
        padding: 0 30px calc(14px + env(safe-area-inset-bottom, 0px));
        font-size: 11px;
        font-weight: 500;
        letter-spacing: -0.22px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .daily-credit svg {
        width: 21px;
        height: 14px;
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.6);
    }

    .daily-credit .credit-version {
        color: rgba(255, 255, 255, 0.8);
    }

    #daily-close,
    #dr-close,
    #dp-close {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 20;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #fff;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    #daily-close svg,
    #dr-close svg,
    #dp-close svg {
        width: 14px;
        height: 14px;
    }

    @media (hover: hover) {

        #daily-close:hover,
        #dr-close:hover,
        #dp-close:hover {
            transform: scale(1.08);
            background: rgba(255, 255, 255, 0.25);
        }
    }

    #daily-close:active,
    #dr-close:active,
    #dp-close:active {
        transform: scale(0.94);
    }

    /* --- Daily button ring (Turbo Spin + IG stories gap) --- */
    .daily-ring-wrap #intro-daily::after {
        display: none;
    }

    .daily-ring-wrap #intro-daily:hover {
        transform: none;
        color: #000;
    }

    .daily-ring-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        isolation: isolate;
        min-width: 64px;
        min-height: 64px;
        transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .daily-ring-wrap::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: conic-gradient(from var(--ring-angle), #ff6b6b, #fdcb6e, #55efc4, #00cec9, #6c5ce7, #fd79a8, #ff6b6b);
        pointer-events: none;
        z-index: -2;
        animation: fadeInRing 0.4s ease-out 0.3s both, ringSpin 2s linear infinite;
        transition: opacity 0.35s ease, filter 0.35s ease, inset 0.35s ease;
    }

    .daily-ring-wrap::after {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        background: #000;
        pointer-events: none;
        z-index: -1;
        transition: opacity 0.35s ease, inset 0.35s ease;
    }

    @keyframes fadeInRing {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @media (hover: hover) {
        .daily-ring-wrap:hover {
            transform: scale(1.18);
            filter: drop-shadow(0 0 28px rgba(108, 92, 231, 0.7)) drop-shadow(0 0 10px rgba(255, 107, 107, 0.4));
        }

        .daily-ring-wrap:hover::before {
            animation: ringSpin 0.5s linear infinite;
            inset: -14px;
        }

        .daily-ring-wrap:hover::after {
            inset: -10px;
        }
    }

    .daily-ring-wrap:active {
        transform: scale(0.94) !important;
    }

    /* Daily played state */
    .daily-ring-wrap.played::before,
    .daily-ring-wrap.played::after {
        display: none !important;
    }

    .daily-ring-wrap.played:hover {
        transform: none;
        filter: none;
    }

    .daily-ring-wrap.played #intro-daily {
        background: #505050;
        color: #bbb;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .daily-ring-wrap.played #intro-daily:hover {
        transform: scale(1.02);
    }

    /* Daily reveal animation */
    @keyframes dailyRevealRing {
        0% {
            transform: scale(0);
            opacity: 0;
        }

        55% {
            transform: scale(1.25);
            opacity: 1;
        }

        80% {
            transform: scale(0.92);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes dailyRevealBtn {
        0% {
            transform: scale(1);
            background: #1a1a1a;
            color: #555;
        }

        30% {
            transform: scale(1.15);
            background: #fff;
            color: #000;
        }

        50% {
            transform: scale(0.92);
        }

        70% {
            transform: scale(1.06);
        }

        100% {
            transform: scale(1);
            background: #fff;
            color: #000;
        }
    }

    @keyframes dailyRevealGlow {
        0% {
            filter: none;
        }

        30% {
            filter: drop-shadow(0 0 40px rgba(108, 92, 231, 0.9)) drop-shadow(0 0 20px rgba(255, 107, 107, 0.6));
        }

        100% {
            filter: none;
        }
    }

    @keyframes dailyRevealBurst {
        0% {
            box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.6);
        }

        40% {
            box-shadow: 0 0 0 30px rgba(108, 92, 231, 0);
        }

        100% {
            box-shadow: 0 0 0 30px rgba(108, 92, 231, 0);
        }
    }

    .daily-ring-wrap.revealing {
        animation: dailyRevealGlow 1.5s ease-out both, dailyRevealBurst 1.2s ease-out both;
        pointer-events: none;
    }

    .daily-ring-wrap.revealing::before {
        opacity: 1;
        animation: dailyRevealRing 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both, ringSpin 2s linear infinite;
    }

    .daily-ring-wrap.revealing::after {
        opacity: 1;
        animation: dailyRevealRing 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .daily-ring-wrap.revealing #intro-daily {
        animation: dailyRevealBtn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .daily-rank-badge {
        font-size: 14px;
        font-weight: 600;
        color: #4ade80;
        letter-spacing: -0.3px;
        margin: 16px 0 0 30px;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .daily-rank-badge.visible {
        opacity: 1;
    }

    /* --- Mode Toggle --- */
    .mode-toggle {
        position: absolute;
        bottom: 30px;
        left: 30px;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        font-family: inherit;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: -0.28px;
        color: rgba(255, 255, 255, 0.5);
        transition: color 0.2s;
    }

    .mode-toggle:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    .mode-toggle svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    /* Toggle knob animation */
    .toggle-knob {
        transition: transform 0.35s ease-in-out;
    }

    .mode-toggle.easy .toggle-knob {
        transform: translateX(-8px);
    }

    /* Violent spring slam when snapping to hard */
    @keyframes springRight {
        0% {
            transform: translateX(-8px);
        }

        18% {
            transform: translateX(5px);
        }

        32% {
            transform: translateX(-3.5px);
        }

        46% {
            transform: translateX(2.5px);
        }

        58% {
            transform: translateX(-1.5px);
        }

        70% {
            transform: translateX(1px);
        }

        82% {
            transform: translateX(-0.4px);
        }

        100% {
            transform: translateX(0);
        }
    }

    .toggle-knob.spring {
        animation: springRight 0.55s cubic-bezier(0.12, 0, 0.2, 1) forwards;
        transition: none !important;
    }

    /* --- Horizontal shake — panel --- */
    @keyframes earthquake {
        0% {
            transform: translateX(0);
            filter: none;
        }

        3% {
            transform: translateX(-3px);
            filter: url(#mblur-1);
        }

        6% {
            transform: translateX(5.5px);
            filter: url(#mblur-2);
        }

        9% {
            transform: translateX(-6px);
            filter: url(#mblur-2);
        }

        12% {
            transform: translateX(5px);
            filter: url(#mblur-2);
        }

        16% {
            transform: translateX(-4px);
            filter: url(#mblur-1);
        }

        20% {
            transform: translateX(4px);
            filter: url(#mblur-1);
        }

        25% {
            transform: translateX(-3.5px);
            filter: url(#mblur-1);
        }

        30% {
            transform: translateX(2.5px);
            filter: none;
        }

        38% {
            transform: translateX(-2px);
            filter: none;
        }

        46% {
            transform: translateX(1.5px);
            filter: none;
        }

        55% {
            transform: translateX(-1px);
            filter: none;
        }

        66% {
            transform: translateX(0.6px);
            filter: none;
        }

        78% {
            transform: translateX(-0.3px);
            filter: none;
        }

        90% {
            transform: translateX(0.1px);
            filter: none;
        }

        100% {
            transform: translateX(0);
            filter: none;
        }
    }

    /* --- Elastic counter-motion for content (lagged, springy, long tail) --- */
    @keyframes elasticContent {
        0% {
            transform: translateX(0);
            filter: none;
        }

        6% {
            transform: translateX(0);
            filter: none;
        }

        9% {
            transform: translateX(3.5px);
            filter: url(#mblur-1);
        }

        12% {
            transform: translateX(7px);
            filter: url(#mblur-2);
        }

        15% {
            transform: translateX(-1.5px);
            filter: url(#mblur-1);
        }

        18% {
            transform: translateX(-7.5px);
            filter: url(#mblur-2);
        }

        21% {
            transform: translateX(1px);
            filter: url(#mblur-1);
        }

        24% {
            transform: translateX(6.5px);
            filter: url(#mblur-2);
        }

        27% {
            transform: translateX(0px);
            filter: url(#mblur-1);
        }

        31% {
            transform: translateX(-5px);
            filter: none;
        }

        37% {
            transform: translateX(4px);
            filter: none;
        }

        43% {
            transform: translateX(-3px);
            filter: none;
        }

        /* — panel has stopped by here, content keeps drifting — */
        52% {
            transform: translateX(2.2px);
            filter: none;
        }

        60% {
            transform: translateX(-1.5px);
            filter: none;
        }

        68% {
            transform: translateX(1px);
            filter: none;
        }

        76% {
            transform: translateX(-0.7px);
            filter: none;
        }

        84% {
            transform: translateX(0.4px);
            filter: none;
        }

        92% {
            transform: translateX(-0.15px);
            filter: none;
        }

        100% {
            transform: translateX(0);
            filter: none;
        }
    }

    /* --- Delayed elastic for buttons (energy takes time to reach them) --- */
    @keyframes elasticContentLate {
        0% {
            transform: translateX(0);
            filter: none;
        }

        12% {
            transform: translateX(0);
            filter: none;
        }

        15% {
            transform: translateX(2px);
            filter: url(#mblur-1);
        }

        18% {
            transform: translateX(6px);
            filter: url(#mblur-2);
        }

        21% {
            transform: translateX(-1px);
            filter: url(#mblur-1);
        }

        24% {
            transform: translateX(-6.5px);
            filter: url(#mblur-2);
        }

        27% {
            transform: translateX(0.5px);
            filter: url(#mblur-1);
        }

        30% {
            transform: translateX(5.5px);
            filter: url(#mblur-1);
        }

        34% {
            transform: translateX(0px);
            filter: none;
        }

        40% {
            transform: translateX(-4px);
            filter: none;
        }

        47% {
            transform: translateX(3px);
            filter: none;
        }

        54% {
            transform: translateX(-2px);
            filter: none;
        }

        62% {
            transform: translateX(1.5px);
            filter: none;
        }

        70% {
            transform: translateX(-1px);
            filter: none;
        }

        80% {
            transform: translateX(0.5px);
            filter: none;
        }

        90% {
            transform: translateX(-0.2px);
            filter: none;
        }

        100% {
            transform: translateX(0);
            filter: none;
        }
    }

    /* RGB chromatic aberration on text during shake */
    @keyframes rgbSplit {
        0% {
            text-shadow: none;
        }

        3% {
            text-shadow: -6px 1px rgba(255, 0, 0, 0.9), 6px -1px rgba(0, 80, 255, 0.9);
        }

        7% {
            text-shadow: 8px -1.5px rgba(255, 0, 0, 0.95), -3px 1px rgba(0, 255, 60, 0.7), -7px 0.5px rgba(0, 80, 255, 0.95);
        }

        12% {
            text-shadow: -9px 1px rgba(255, 0, 0, 1), 4px -1px rgba(0, 255, 60, 0.6), 8px 1.5px rgba(0, 80, 255, 0.95);
        }

        16% {
            text-shadow: 7px 1.5px rgba(255, 0, 0, 0.9), -6px -1px rgba(0, 80, 255, 0.9);
        }

        21% {
            text-shadow: -5px -1px rgba(255, 0, 0, 0.8), 2.5px 0.5px rgba(0, 255, 60, 0.5), 5px -0.5px rgba(0, 80, 255, 0.8);
        }

        28% {
            text-shadow: 4px 0.5px rgba(255, 0, 0, 0.65), -3.5px 0 rgba(0, 80, 255, 0.65);
        }

        38% {
            text-shadow: -2.5px 0 rgba(255, 0, 0, 0.4), 1.5px 0 rgba(0, 255, 60, 0.2), 2.5px 0 rgba(0, 80, 255, 0.4);
        }

        52% {
            text-shadow: 1.2px 0 rgba(255, 0, 0, 0.2), -1.2px 0 rgba(0, 80, 255, 0.2);
        }

        70% {
            text-shadow: -0.5px 0 rgba(255, 0, 0, 0.06), 0.5px 0 rgba(0, 80, 255, 0.06);
        }

        100% {
            text-shadow: none;
        }
    }

    /* Apply RGB split to text inside shaking screens — staggered timing */
    #game-container.shaking .screen.active h1 {
        animation: rgbSplit 0.55s ease-out forwards;
        animation-delay: 0s;
    }

    #game-container.shaking .screen.active h2,
    #game-container.shaking .screen.active p,
    #game-container.shaking .screen.active span {
        animation: rgbSplit 0.55s ease-out forwards;
        animation-delay: 0.04s;
    }

    #game-container.shaking .screen.active .mode-toggle {
        animation: rgbSplit 0.55s ease-out forwards, elasticContentLate 0.95s cubic-bezier(0.22, 0, 0.36, 1) forwards;
        animation-delay: 0.08s, 0s;
    }

    #game-container.shaking .screen.active .go-btn {
        animation: rgbSplit 0.55s ease-out forwards, elasticContentLate 0.95s cubic-bezier(0.22, 0, 0.36, 1) forwards;
        animation-delay: 0.14s, 0s;
    }

    /* Shake on mobile: animate the active screen directly (not the container,
       which has no dimensions and would break position:fixed children). */
    #game-container.shaking .screen.active {
        animation: earthquake 0.55s ease-out forwards;
    }

    /* --- Desktop-only elements (hidden on mobile) --- */
    #dialed-logo {
        display: none;
        text-decoration: none;
        color: #000;
        transition: color 0.2s ease;
    }

    #version-nav {
        display: none;
    }

    /* --- Dark mode toggle (hidden on mobile) --- */
    #dark-mode-toggle {
        display: none;
    }

    /* --- Desktop mute toggle (hidden on mobile) --- */
    #desktop-mute-toggle {
        display: none;
    }

    /* --- Mute toggle (hidden on mobile per Frame 56) --- */
    #mute-toggle {
        display: none;
    }

    /* ============================== */
    /* --- DESKTOP (min 768px) ---    */
    /* ============================== */
    @media (min-width: 768px) {

        html,
        body {
            background: #fff;
            overflow: auto;
            overscroll-behavior: auto;
        }

        html {
            transition: background-color 0.5s ease;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            position: relative;
            transition: background-color 0.5s ease;
        }

        /* Card-edge padding — single variable for easy tuning */
        :root {
            --cp: 30px;
        }

        /* Game container — adaptive card */
        #game-container {
            width: 50vw;
            min-height: 390px;
            max-height: min(650px, 80vh);
            position: relative;
            flex-shrink: 0;
            border-radius: 16px;
            background: #000;
            box-shadow:
                0px 4px 16px 0px rgba(0, 0, 0, 0.35),
                0px 34px 44px 0px rgba(0, 0, 0, 0.17);
            overflow: hidden;
            transition: height 0.35s ease;
        }

        /* All screens absolute within the card */
        .screen {
            position: absolute;
            inset: 0;
        }

        /* Daily hover: persistent vibration loop */
        @keyframes dailyVibrate {
            0% {
                transform: translateX(0);
            }

            12% {
                transform: translateX(-1.5px);
            }

            25% {
                transform: translateX(2px);
            }

            37% {
                transform: translateX(-2px);
            }

            50% {
                transform: translateX(1.5px);
            }

            62% {
                transform: translateX(-1px);
            }

            75% {
                transform: translateX(1.5px);
            }

            87% {
                transform: translateX(-1px);
            }

            100% {
                transform: translateX(0);
            }
        }

        #game-container.daily-vibrating {
            animation: dailyVibrate 0.1s linear infinite;
        }

        #game-container.daily-vibrating .screen.active {
            animation: dailyVibrate 0.12s linear infinite reverse;
        }

        /* Desktop shake: container shakes, screens get elastic counter-motion */
        #game-container.shaking {
            animation: earthquake 0.55s ease-out forwards;
        }

        #game-container.shaking .screen.active {
            animation: elasticContent 0.85s cubic-bezier(0.22, 0, 0.36, 1) forwards;
        }

        #game-container.shaking .screen {
            animation: elasticContent 0.85s cubic-bezier(0.22, 0, 0.36, 1) forwards;
        }

        /* Desktop: buttons fire later — energy propagates down */
        #game-container.shaking .screen.active .go-btn {
            animation: rgbSplit 0.55s ease-out forwards, elasticContentLate 0.95s cubic-bezier(0.22, 0, 0.36, 1) forwards;
            animation-delay: 0.14s, 0s;
        }

        #game-container.shaking .screen.active .mode-toggle {
            animation: rgbSplit 0.55s ease-out forwards, elasticContentLate 0.95s cubic-bezier(0.22, 0, 0.36, 1) forwards;
            animation-delay: 0.08s, 0s;
        }

        /* Fade overlay scoped to card */
        #fade-overlay {
            position: absolute;
            border-radius: 16px;
        }

        /* --- Intro desktop --- */
        #intro-title {
            font-size: 3vw;
            margin: var(--cp) 0 0 var(--cp);
        }

        #intro-body {
            margin: 16px var(--cp) 0 var(--cp);
            color: #adadad;
            font-size: 14px;
            line-height: 17px;
            letter-spacing: -0.28px;
            max-width: 318px;
        }

        #intro-mode-label {
            position: static;
            margin-top: 20px;
            font-size: 14px;
            letter-spacing: -0.28px;
        }

        /* intro body paragraphs all visible on desktop */
        #intro-credit {
            display: none;
        }

        #challenge-credit {
            display: none;
        }

        #challenge-setup-credit {
            display: none;
        }

        #challenge-result-credit {
            display: none;
        }

        /* --- Desktop toggle --- */
        .mode-toggle {
            bottom: var(--cp);
            left: var(--cp);
            font-size: 12px;
            letter-spacing: -0.24px;
        }

        /* --- All desktop buttons: right cp, bottom cp --- */
        .go-btn {
            right: var(--cp);
            bottom: var(--cp);
        }

        #intro-screen .go-btn {
            bottom: var(--cp);
            width: 50px;
            height: 50px;
        }

        #intro-screen .go-btn svg {
            width: 24px;
            height: 24px;
        }

        /* --- Intro mode buttons desktop --- */
        .intro-mode-btns {
            bottom: var(--cp);
            left: var(--cp);
            right: auto;
            gap: 20px;
        }

        .intro-mode-btns .mode-toggle {
            font-size: 14px;
            letter-spacing: -0.28px;
            min-height: 64px;
            margin-left: 0;
        }

        .intro-mode-btns .mode-toggle svg {
            width: 29px;
            height: 29px;
        }

        /* --- Challenge intro desktop (Frame 34) --- */
        #challenge-title {
            font-size: 92px;
            margin: var(--cp) 0 0 var(--cp);
        }

        #challenge-body {
            margin: 8px 0 0 var(--cp);
            max-width: 420px;
            font-size: 18px;
        }

        #ci-name-row {
            margin: auto var(--cp) 114px;
        }

        #ci-input-wrap {
            min-width: 220px;
        }

        #challenge-name-input {
            font-size: 16px;
        }

        #ci-close {
            top: var(--cp);
            right: var(--cp);
            width: auto;
            height: auto;
            background: none;
            border-radius: 0;
        }

        #ci-close svg {
            width: 20px;
            height: 20px;
        }

        #challenge-intro-screen .go-btn {
            bottom: var(--cp);
            right: var(--cp);
        }

        #challenge-intro-screen .go-btn.go-text {
            left: var(--cp);
            right: var(--cp);
        }

        /* --- Challenge setup desktop --- */
        #cs-close {
            top: var(--cp);
            right: var(--cp);
            width: auto;
            height: auto;
            background: none;
            border-radius: 0;
        }

        #cs-close svg {
            width: 20px;
            height: 20px;
        }

        #challenge-setup-title {
            font-size: 72px;
            letter-spacing: -4.32px;
            margin: var(--cp) 0 0 var(--cp);
        }

        #challenge-setup-body {
            margin: 8px 0 0 var(--cp);
            max-width: 340px;
            font-size: 18px;
        }

        #cs-name-row {
            margin: auto var(--cp) 112px;
            transform: none;
        }

        #cs-input-wrap {
            min-width: 220px;
        }

        #cs-name-input {
            font-size: 16px;
        }

        #cs-actions {
            left: var(--cp);
            right: var(--cp);
            padding: 0 0 var(--cp);
        }

        /* --- Challenge result desktop --- */
        #cr-close {
            top: var(--cp);
            right: var(--cp);
            width: auto;
            height: auto;
            background: none;
            border-radius: 0;
        }

        #cr-close svg {
            width: 20px;
            height: 20px;
        }

        #cr-title {
            font-size: 42px;
            letter-spacing: -2.52px;
            margin: 20px 0 0 31px;
        }

        #cr-description {
            margin: 8px 0 22px var(--cp);
            max-width: 320px;
            font-size: 14px;
            line-height: 16px;
            letter-spacing: -0.28px;
        }

        .cr-2p {
            margin: 16px 0 0 var(--cp);
            padding-bottom: 0;
            padding-right: var(--cp);
        }

        .cr-2p-entry {
            margin-bottom: 20px;
        }

        .cr-2p-entry.cr-hero .cr-2p-score {
            font-size: 52px;
            letter-spacing: -3.12px;
        }

        /* Card entries desktop */
        .cr-card {
            margin-bottom: 20px;
        }

        .cr-card-name {
            font-size: 18px;
            letter-spacing: -0.36px;
        }

        .cr-card-score {
            font-size: 18px;
            letter-spacing: -1.08px;
        }

        .cr-card-first .cr-card-score {
            font-size: 52px;
            letter-spacing: -3.12px;
        }

        #cr-list {
            padding: 0 var(--cp) 80px;
        }

        #cr-list-wrapper {
            margin-top: 12px;
        }

        #cr-waiting {
            margin: 16px var(--cp) 0;
        }

        #cr-helper {
            font-size: 14px;
            letter-spacing: -0.28px;
            max-width: 338px;
            margin: 0 auto;
        }

        #cr-bottom {
            padding-bottom: 0;
        }

        #cr-bottom-fade {
            height: 100px;
        }

        #cr-actions {
            padding: 0 var(--cp) var(--cp);
            gap: 6px;
        }

        #cr-actions #cr-action-primary {
            height: 52px;
            font-size: 14px;
        }

        /* --- Desktop picker handles --- */
        .strip-handle {
            width: 18px;
            height: 18px;
        }

        /* --- Round indicator desktop overrides --- */
        .round-indicator {
            top: var(--cp);
            left: var(--cp);
        }

        #picker-round {
            left: 150px;
        }

        #picker-channel-label {
            left: 150px;
            bottom: var(--cp);
        }

        /* --- Watermark desktop --- */
        #memorize-wm {
            right: var(--cp);
            bottom: var(--cp);
        }

        #picker-wm {
            right: var(--cp);
            top: var(--cp);
        }

        /* --- Countdown desktop --- */
        #countdown-word {
            font-size: 92px;
            right: var(--cp);
            top: var(--cp);
        }

        /* --- Memorize desktop --- */
        #timer-value {
            font-size: 92px;
            right: var(--cp);
            top: var(--cp);
        }

        #timer-label {
            top: calc(var(--cp) + 87px);
            right: var(--cp);
        }

        /* --- Picker desktop --- */
        #picker-label {
            left: 150px;
        }

        #picker-values {
            left: 150px;
        }

        /* --- Result desktop --- */
        #result-score {
            font-size: 92px;
            right: var(--cp);
            top: var(--cp);
        }

        #result-feedback {
            top: calc(var(--cp) + 92px);
            right: var(--cp);
            max-width: 280px;
            line-height: 1.2;
        }

        .result-half {
            padding: 0 var(--cp) var(--cp);
        }

        .result-label {
            margin-bottom: -5px;
        }

        /* --- Total desktop --- */
        #total-title {
            display: none;
        }

        #total-rank-row {
            order: 1;
            margin: var(--cp) var(--cp) 0;
        }

        #total-ranking {
            font-size: 18px;
            letter-spacing: -0.36px;
            min-height: 22px;
        }

        #total-score {
            font-size: 18px;
            letter-spacing: -0.36px;
        }

        #total-description {
            order: 2;
            margin: 4px 0 0 var(--cp);
            max-width: 320px;
            font-size: 14px;
            line-height: 16px;
            letter-spacing: -0.28px;
        }

        #total-swatches {
            order: 3;
            margin: 24px var(--cp) 0 var(--cp);
        }

        #total-initials-row {
            order: 4;
            position: absolute;
            bottom: var(--cp);
            left: var(--cp);
            width: 133px;
            margin: 0;
        }

        #total-initials {
            height: 52px;
            font-size: 16px;
        }

        /* --- Total actions desktop --- */
        #total-actions {
            order: 5;
            position: absolute;
            left: auto;
            right: var(--cp);
            bottom: 0;
            width: 263px;
            margin: 0;
            padding: 0 0 var(--cp);
        }

        #total-actions #total-challenge-btn {
            height: 52px;
            font-size: 14px;
        }

        #total-close {
            top: var(--cp);
            right: var(--cp);
            width: auto;
            height: auto;
            background: none;
            border-radius: 0;
        }

        #total-close svg {
            width: 20px;
            height: 20px;
        }

        /* --- Daily desktop --- */
        .daily-date {
            margin: var(--cp) 0 0 var(--cp);
            font-size: 14px;
            letter-spacing: -0.28px;
        }

        .daily-title {
            margin: 6px 0 0 var(--cp);
            font-size: 72px;
            letter-spacing: -2.16px;
        }

        .daily-body {
            margin: 10px 0 0 var(--cp);
            max-width: 320px;
            font-size: 14px;
            line-height: 17px;
            letter-spacing: -0.28px;
        }

        .daily-body p {
            margin-bottom: 10px;
        }

        .daily-score {
            margin: 6px 0 0 var(--cp);
            font-size: 72px;
            letter-spacing: -2.16px;
        }

        .daily-desc {
            margin: 10px 0 0 var(--cp);
            max-width: 320px;
            font-size: 14px;
            line-height: 17px;
            letter-spacing: -0.28px;
        }

        .daily-color-grid {
            margin: 12px var(--cp) 0;
        }

        .daily-color-cell .cell-score-label {
            font-size: 12px;
            top: 6px;
            left: 6px;
        }

        .daily-countdown {
            font-size: 12px;
            margin-bottom: 8px;
        }

        .daily-date .daily-countdown-inline {
            display: inline;
        }

        .daily-countdown-mobile {
            display: none;
        }

        .daily-share-preview {
            margin-top: 16px;
            margin-bottom: 12px;
            padding: 12px 14px;
            font-size: 14px;
        }

        .daily-share-preview .stc-score {
            font-size: 15px;
        }

        .daily-actions {
            left: var(--cp);
            right: var(--cp);
            padding: 0 0 calc(var(--cp) + 4px);
            gap: 0;
        }

        .daily-actions-intro {
            padding-bottom: var(--cp);
        }

        .daily-actions .daily-primary-btn {
            height: 46px;
            font-size: 13px;
        }

        .daily-actions .daily-secondary-btn {
            padding: 12px 16px;
            font-size: 12px;
        }

        #daily-close,
        #dr-close,
        #dp-close {
            top: var(--cp);
            right: var(--cp);
        }

        .daily-credit {
            display: none;
        }

        #total-helper {
            position: static;
            order: 4;
            margin: 12px 0 0 var(--cp);
            font-size: 13px;
            line-height: 16px;
            letter-spacing: -0.26px;
            text-align: left;
            max-width: 320px;
        }

        /* --- Leaderboard button desktop --- */
        .lb-btn {
            bottom: var(--cp);
            right: 13px;
            width: 64px;
            height: 64px;
            color: #808080;
        }

        .lb-btn svg {
            width: 29px;
            height: 29px;
        }

        /* --- Leaderboard desktop --- */
        #lb-header {
            padding: var(--cp) var(--cp) 0 var(--cp);
        }

        #lb-count {
            padding: 6px var(--cp) 0;
        }

        #lb-mode-tabs {
            margin: 12px var(--cp) 0;
        }

        #lb-list {
            padding: 12px var(--cp) 80px;
        }

        .lb-fade-bottom {
            border-radius: 0 0 16px 16px;
        }

        #lb-close {
            top: var(--cp);
            right: var(--cp);
            width: auto;
            height: auto;
            background: none;
            border-radius: 0;
        }

        #lb-close svg {
            width: 20px;
            height: 20px;
        }

        /* Desktop close buttons: bare X, no circle */
        #ci-close:hover,
        #cs-close:hover,
        #cr-close:hover,
        #total-close:hover,
        #lb-close:hover {
            background: none;
            transform: none;
            opacity: 0.5;
        }

        #ci-close:active,
        #cs-close:active,
        #cr-close:active,
        #total-close:active,
        #lb-close:active {
            transform: none;
            opacity: 0.3;
        }

        /* --- Dialed logo: pinned top-left (desktop) --- */
        #dialed-logo {
            display: block;
            position: fixed;
            top: 21px;
            left: 26px;
            font-family: 'Suisse Intl S Alt', -apple-system, 'Inter', system-ui, sans-serif;
            font-size: 21px;
            font-weight: 500;
            letter-spacing: -0.84px;
            line-height: 1;
            color: #000;
            z-index: 10;
            cursor: pointer;
        }

        /* --- Desktop credit line: pinned bottom-left --- */
        #version-nav {
            display: block;
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 10;
        }

        .version-link {
            display: none;
        }

        #version-label {
            white-space: nowrap;
            font-size: 9px;
            font-weight: 500;
            letter-spacing: -0.18px;
            line-height: 24px;
            color: #000;
        }

        #desktop-credit {
            display: inline;
            pointer-events: auto;
            color: inherit;
            text-decoration: none;
            transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        #version-tooltip {
            display: none;
        }

        body.dark-mode #version-label {
            color: #cacaca;
        }

        /* --- Mute toggle (hide in-screen version on desktop) --- */
        #mute-toggle {
            display: none;
        }

        /* --- Desktop mute toggle (fixed, left of dark mode icon) --- */
        #desktop-mute-toggle {
            display: block;
            position: fixed;
            bottom: 30px;
            right: 70px;
            width: 24px;
            height: 24px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: #000;
            transition: color 0.5s ease, transform 0.15s ease;
        }

        #desktop-mute-toggle svg {
            width: 24px;
            height: 24px;
        }

        #desktop-mute-toggle:hover {
            transform: scale(1.12);
        }

        #desktop-mute-toggle:active {
            transform: scale(0.92);
        }

        body.dark-mode #desktop-mute-toggle {
            color: #cacaca;
        }

        /* --- Dark mode toggle (desktop) --- */
        #dark-mode-toggle {
            display: block;
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 24px;
            height: 24px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: #000;
            transition: color 0.5s ease, transform 0.15s ease;
        }

        #dark-mode-toggle:hover {
            transform: scale(1.12);
        }

        #dark-mode-toggle:active {
            transform: scale(0.92);
        }

        #dark-mode-toggle svg {
            position: absolute;
            inset: 0;
            width: 24px;
            height: 24px;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        #dark-mode-toggle .icon-moon {
            opacity: 0;
            transform: scale(0);
        }

        #dark-mode-toggle .icon-sun {
            opacity: 1;
            transform: scale(1);
        }

        /* --- Dark mode active --- */
        html.dark-mode,
        body.dark-mode {
            background: #2f2f2f;
        }

        body.dark-mode #dialed-logo {
            color: #cacaca;
        }

        body.dark-mode #dark-mode-toggle {
            color: #cacaca;
        }

        /* rainbow toast works on any background — no dark-mode override needed */
    }

    /* --- Ad containers (hidden until _ADS_LIVE = true) --- */
    .ad-slot {
        display: none;
    }

    .ad-slot.ad-live {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ad-slot-results {
        margin: auto 30px 0;
        min-height: 50px;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .ad-slot-results.ad-loaded {
        opacity: 1;
    }

    .ad-slot-leaderboard {
        margin: 0 30px;
        padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
    }

    .ad-slot-desktop {
        max-width: 100%;
        margin: 34px auto 0;
    }

    @media (max-width: 767px) {
        .ad-slot-desktop {
            display: none !important;
        }
    }

    @media (min-width: 768px) {
        .ad-slot-results {
            margin: auto var(--cp) 0;
            order: 6;
        }

        .ad-slot-leaderboard {
            margin: 12px var(--cp) 0;
        }
    }