.neon-rally-page {
    --rr-ink: #f3f7f5;
    --rr-muted: #9baab2;
    --rr-panel: rgba(14, 21, 30, 0.94);
    --rr-edge: rgba(146, 173, 184, 0.18);
    --rr-mint: #37efc1;
    --rr-orange: #ffac58;
    background:
        radial-gradient(ellipse at 76% 14%, rgba(25, 150, 130, 0.14), transparent 38rem),
        #0b1119;
    color: var(--rr-ink);
}

.neon-rally-page .rr-main {
    width: min(1120px, 100%);
    min-height: 72vh;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem);
}

.neon-rally-page [hidden] {
    display: none !important;
}

.rr-screen[hidden],
.rr-race-result[hidden],
.rr-countdown[hidden],
.rr-join-form[hidden] {
    display: none !important;
}

.rr-menu-art,
.rr-card,
.rr-race-screen {
    overflow: hidden;
    border: 1px solid var(--rr-edge);
    border-radius: 24px;
    background: var(--rr-panel);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.26);
}

.rr-menu-art {
    position: relative;
    display: flex;
    min-height: 355px;
    align-items: center;
    padding: clamp(1.5rem, 5vw, 4rem);
    background: linear-gradient(110deg, rgba(9, 16, 25, 0.96) 12%, rgba(10, 18, 25, 0.76) 53%, rgba(10, 18, 25, 0.1));
}

.rr-menu-art > img {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 auto;
    width: 63%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.84;
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}

.rr-menu-copy {
    position: relative;
    z-index: 1;
    width: min(570px, 75%);
}

.rr-eyebrow {
    margin: 0 0 0.7rem;
    color: var(--rr-mint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.rr-menu-copy h1 {
    margin: 0;
    color: var(--rr-ink);
    font-size: clamp(3.3rem, 8vw, 6.6rem);
    font-weight: 950;
    letter-spacing: -0.085em;
    line-height: 0.78;
}

.rr-beta-badge {
    display: inline-block;
    padding: 0.42em 0.58em;
    border: 1px solid rgba(255, 224, 110, 0.6);
    border-radius: 999px;
    background: rgba(255, 224, 110, 0.12);
    color: #ffe06e;
    font-size: 0.13em;
    letter-spacing: 0.09em;
    line-height: 1;
    vertical-align: middle;
}

.rr-menu-copy > p:not(.rr-eyebrow) {
    max-width: 420px;
    margin: 1.5rem 0;
    color: #d0d8da;
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.5;
}

.rr-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.rr-feature-tags span {
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(55, 239, 193, 0.25);
    border-radius: 999px;
    background: rgba(7, 20, 23, 0.7);
    color: #dffcf4;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.rr-card {
    padding: clamp(1.2rem, 3vw, 2rem);
}

.rr-menu-card {
    margin-top: 1rem;
}

.rr-muted {
    color: var(--rr-muted);
    line-height: 1.5;
}

.rr-action-row,
.rr-invite-buttons,
.rr-transfer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.rr-action-row .btn,
.rr-invite-buttons .btn,
.rr-transfer-row .btn,
.rr-race-result .btn,
.rr-leave-race {
    min-height: 44px;
}

.rr-join-form {
    display: grid;
    gap: 0.6rem;
    max-width: 470px;
    margin-top: 1.2rem;
}

.rr-join-form label,
.rr-host-controls label {
    color: #d8e0e2;
    font-size: 0.9rem;
    font-weight: 700;
}

.rr-join-form input,
.rr-transfer-row select,
.rr-host-controls select {
    min-width: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--rr-edge);
    border-radius: 10px;
    background: #101923;
    color: var(--rr-ink);
    font: inherit;
}

.rr-join-form input {
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.rr-error {
    min-height: 1.2rem;
    margin: 0.65rem 0 0;
    color: #ff9888;
    font-size: 0.88rem;
    opacity: 0;
}

.rr-error.is-visible {
    opacity: 1;
}

.rr-lobby-heading,
.rr-race-topbar,
.rr-invite-panel,
.rr-race-topbar > div,
.rr-boost > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.rr-lobby-heading h1,
.rr-lobby-columns h2,
.rr-standings h2 {
    margin: 0;
    color: var(--rr-ink);
}

.rr-lobby-heading h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.rr-status-pill {
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(55, 239, 193, 0.3);
    border-radius: 999px;
    background: rgba(55, 239, 193, 0.08);
    color: var(--rr-mint);
    font-size: 0.8rem;
    font-weight: 750;
}

.rr-invite-panel {
    margin: 1.5rem 0;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--rr-edge);
    border-radius: 16px;
    background: rgba(5, 12, 19, 0.6);
}

.rr-invite-panel > div:first-child {
    display: grid;
    gap: 0.5rem;
}

.rr-invite-panel > div:first-child > span {
    color: var(--rr-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.rr-invite-panel > div:first-child > strong {
    color: var(--rr-ink);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    letter-spacing: 0.16em;
}

.rr-invite-buttons {
    margin-top: 0.3rem;
}

.rr-invite-buttons .btn {
    font-size: 0.82rem;
}

.rr-qr {
    flex: 0 0 auto;
    padding: 0.3rem;
    border-radius: 8px;
    background: white;
}

.rr-lobby-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.8fr);
    gap: 1.8rem;
}

.rr-lobby-columns h2,
.rr-standings h2 {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    font-size: 1.05rem;
}

.rr-lobby-columns h2 span {
    color: var(--rr-muted);
    font-size: 0.8rem;
}

.rr-map-summary {
    margin: 1.1rem 0 0.75rem;
    color: var(--rr-muted);
    font-size: 0.88rem;
}

.rr-map-summary strong,
.rr-race-map-name {
    color: var(--rr-mint);
    font-weight: 800;
}

.rr-driver-list,
#rrStandings {
    display: grid;
    gap: 0.55rem;
}

.rr-driver-row,
.rr-standing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--rr-edge);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.rr-driver-name,
.rr-standing-name {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.65rem;
    color: var(--rr-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rr-car-swatch {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 3px;
    box-shadow: 0 0 12px currentColor;
}

.rr-driver-badge {
    color: var(--rr-mint);
    font-size: 0.72rem;
    font-weight: 750;
}

.rr-host-controls {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--rr-edge);
    border-radius: 14px;
    background: rgba(4, 11, 18, 0.52);
}

.rr-host-controls input[type="range"] {
    width: 100%;
    accent-color: var(--rr-mint);
}

.rr-host-controls select {
    width: 100%;
}

.rr-host-controls .rr-muted {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
}

.rr-transfer-row select {
    flex: 1;
}

.rr-lobby-actions {
    margin-top: 1.2rem;
}

.rr-race-screen {
    padding: clamp(0.8rem, 2vw, 1.4rem);
}

.rr-race-topbar {
    min-height: 56px;
    margin-bottom: 0.8rem;
}

.rr-race-topbar .rr-eyebrow {
    margin-bottom: 0.1rem;
}

.rr-race-map-name {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

.rr-race-topbar strong {
    color: var(--rr-ink);
}

.rr-race-code,
.rr-race-lap {
    display: grid;
    gap: 0.16rem;
    color: var(--rr-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: right;
}

.rr-race-code strong,
.rr-race-lap strong {
    color: var(--rr-ink);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.rr-canvas-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(180, 202, 198, 0.18);
    border-radius: 14px;
    background: #132018;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.45);
}

#rrTrack {
    display: block;
    width: 100%;
    height: auto;
}

.rr-countdown {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(4, 9, 13, 0.28);
    color: white;
    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 950;
    text-shadow: 0 0 32px rgba(55, 239, 193, 0.75);
}

.rr-collision-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 5px solid transparent;
}

.rr-collision-flash.is-active {
    animation: rr-flash 0.55s ease-out;
}

@keyframes rr-flash {
    0% { border-color: rgba(255, 116, 79, 0.9); }
    100% { border-color: transparent; }
}

.rr-race-result {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.65rem;
    padding: 1.5rem;
    background: rgba(6, 13, 20, 0.84);
    text-align: center;
    backdrop-filter: blur(7px);
}

.rr-race-result h2 {
    margin: 0;
    color: white;
    font-size: clamp(2rem, 6vw, 4.4rem);
    font-weight: 950;
    letter-spacing: -0.05em;
}

.rr-race-result > p:not(.rr-eyebrow) {
    margin: 0 0 0.65rem;
    color: #c3d0d2;
}

.rr-hud {
    display: grid;
    grid-template-columns: auto minmax(110px, 1fr) auto minmax(190px, 1.3fr);
    align-items: center;
    gap: 1.1rem;
    padding: 0.9rem 0.4rem;
}

.rr-speed {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.rr-speed strong {
    color: var(--rr-mint);
    font-size: 2.1rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rr-speed span,
.rr-boost span {
    color: var(--rr-muted);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.rr-boost > div:first-child {
    margin-bottom: 0.38rem;
}

.rr-boost strong {
    color: var(--rr-ink);
    font-size: 0.78rem;
}

.rr-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: #25323a;
}

.rr-meter i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #06a88e, #54f4c4);
    box-shadow: 0 0 12px rgba(55, 239, 193, 0.7);
    transition: width 0.12s linear;
}

.rr-collision-count {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 0.4rem;
}

.rr-collision-count span {
    grid-row: span 2;
    color: var(--rr-orange);
    font-size: 1.5rem;
}

.rr-collision-count strong {
    color: var(--rr-ink);
    font-size: 1rem;
}

.rr-collision-count small {
    color: var(--rr-muted);
    font-size: 0.63rem;
}

.rr-controls-hint {
    color: var(--rr-muted);
    font-size: 0.76rem;
    text-align: right;
}

.rr-touch-controls {
    display: none;
}

.rr-standings {
    padding-top: 0.2rem;
}

.rr-standing-row {
    padding: 0.55rem 0.75rem;
}

.rr-standing-place {
    min-width: 1.6rem;
    color: var(--rr-mint);
    font-weight: 900;
}

.rr-standing-meta {
    color: var(--rr-muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

.rr-leave-race {
    margin-top: 1rem;
}

.rr-action-row .btn:focus-visible,
.rr-invite-buttons .btn:focus-visible,
.rr-transfer-row .btn:focus-visible,
.rr-join-form input:focus-visible,
.rr-transfer-row select:focus-visible,
.rr-host-controls select:focus-visible {
    outline: 2px solid var(--rr-mint);
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .rr-menu-art {
        min-height: 330px;
    }

    .rr-menu-art > img {
        width: 100%;
        opacity: 0.42;
        mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
    }

    .rr-menu-copy {
        width: 100%;
    }

    .rr-lobby-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .rr-invite-panel {
        align-items: flex-start;
    }

    .rr-qr {
        display: none;
    }

    .rr-hud {
        grid-template-columns: auto minmax(100px, 1fr) auto;
        gap: 0.75rem;
    }

    .rr-controls-hint {
        grid-column: 1 / -1;
        text-align: left;
    }

    .rr-touch-controls {
        display: grid;
        grid-template-columns: minmax(112px, 0.85fr) minmax(0, 1.15fr);
        align-items: center;
        gap: clamp(0.5rem, 3vw, 1.25rem);
        padding: 0.7rem 0 1rem;
    }

    .rr-steering-control {
        display: grid;
        justify-items: center;
        gap: 0.4rem;
        color: var(--rr-muted);
        font-size: 0.65rem;
        font-weight: 850;
        letter-spacing: 0.12em;
        user-select: none;
        -webkit-user-select: none;
    }

    .rr-steering-pad {
        position: relative;
        width: clamp(104px, 29vw, 142px);
        aspect-ratio: 1;
        overflow: hidden;
        border: 1px solid rgba(170, 197, 204, 0.25);
        border-radius: 50%;
        background:
            radial-gradient(circle, rgba(55, 239, 193, 0.12) 0 34%, transparent 35%),
            radial-gradient(circle, transparent 0 63%, rgba(170, 197, 204, 0.12) 64% 65%, transparent 66%),
            linear-gradient(145deg, #1b2a33, #101820);
        box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.36), 0 8px 20px rgba(0, 0, 0, 0.18);
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .rr-steering-pad:focus-visible {
        outline: 2px solid var(--rr-mint);
        outline-offset: 3px;
    }

    .rr-steering-center,
    .rr-steering-thumb {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        border-radius: 50%;
        pointer-events: none;
    }

    .rr-steering-center {
        width: 6px;
        height: 6px;
        background: rgba(216, 234, 231, 0.48);
        transform: translate(-50%, -50%);
    }

    .rr-steering-thumb {
        width: 40%;
        height: 40%;
        border: 1px solid rgba(112, 255, 216, 0.65);
        background: radial-gradient(circle at 35% 30%, #69f8d1, #169b83 78%);
        box-shadow: 0 0 20px rgba(55, 239, 193, 0.3), inset 0 1px 4px rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: box-shadow 0.12s ease;
    }

    .rr-steering-pad.is-active .rr-steering-thumb {
        box-shadow: 0 0 24px rgba(55, 239, 193, 0.58), inset 0 1px 4px rgba(255, 255, 255, 0.35);
    }

    .rr-pedal-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .rr-pedal-controls button {
        min-width: 0;
        min-height: 58px;
        border: 1px solid var(--rr-edge);
        border-radius: 14px;
        background: linear-gradient(150deg, #1b2b36, #111a22);
        color: var(--rr-ink);
        font-size: clamp(0.58rem, 2.5vw, 0.72rem);
        font-weight: 850;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        transition: transform 0.08s ease, background-color 0.08s ease, border-color 0.08s ease;
    }

    .rr-pedal-controls button:active,
    .rr-pedal-controls button.is-active {
        transform: translateY(2px) scale(0.97);
        background: #253b44;
        border-color: rgba(55, 239, 193, 0.45);
    }

    .rr-pedal-controls button[data-control="accelerate"] {
        border-color: rgba(55, 239, 193, 0.45);
        color: var(--rr-mint);
    }

    .rr-pedal-controls button[data-control="boost"] {
        border-color: rgba(255, 202, 88, 0.45);
        color: #ffca58;
        font-size: 1.15rem;
    }
}

@media (max-width: 440px) {
    .rr-menu-copy h1 {
        font-size: 3.1rem;
    }

    .rr-action-row > .btn,
    .rr-invite-buttons > .btn {
        flex: 1 1 100%;
    }

    .rr-race-topbar {
        gap: 0.5rem;
    }

    .rr-race-topbar strong {
        font-size: 0.84rem;
    }

    .rr-speed strong {
        font-size: 1.6rem;
    }

    .rr-pedal-controls {
        gap: 0.3rem;
    }

    .rr-pedal-controls button {
        min-height: 54px;
        padding: 0.25rem;
    }
}