.info-page {
    --ink: #111;
    --copy: #2c2c2e;
    --quiet: #555;
    --line: #e3e3e6;
    --soft: #f5f5f7;
    color: var(--ink);
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    font-family: var(--body);
    -webkit-user-select: text;
    user-select: text;
    scroll-behavior: smooth;
    background: #fff;
    line-height: 1.7;
    position: fixed;
    inset: 0;
    overflow-y: auto
}

.info-page a {
    color: var(--ink);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px
}

.info-page a:hover {
    text-decoration-thickness: 2px
}

.info-header,.info-footer,.info-main {
    width: min(1180px,90%);
    margin: auto
}

.info-header {
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    display: flex
}

.info-brand {
    align-items: center;
    text-decoration: none;
    display: inline-flex
}

.info-brand .steez8-mark {
    width: 122px;
    height: 27px;
    color: var(--ink)
}

.info-header nav,.info-footer nav {
    align-items: center;
    gap: 26px;
    font-size: 15px;
    display: flex
}

.info-header nav>a:not(.info-play),.info-footer nav a {
    color: var(--ink);
    text-decoration: none
}

.info-header nav>a:not(.info-play):hover,.info-footer nav a:hover {
    text-decoration: underline
}

.info-play {
    border: 1px solid var(--ink);
    background: var(--ink);
    white-space: nowrap;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 700;
    transition: background .15s,color .15s;
    display: inline-flex;
    color: #fff!important;
    text-decoration: none!important
}

.info-play:hover {
    background: #2c2c2e
}

.info-play span {
    transition: transform .15s
}

.info-play:hover span {
    transform: translate(3px)
}

.info-lead {
    padding: 72px 0 48px;
    position: relative
}

.info-lead-copy {
    z-index: 1;
    max-width: 780px;
    position: relative
}

.info-lead.has-art {
    align-items: center;
    min-height: clamp(420px,52vw,640px);
    padding: 24px 0 40px;
    display: flex
}

.info-lead.has-art .info-lead-copy {
    max-width: min(560px,52%)
}

.info-lead-art {
    pointer-events: none;
    width: min(100%,1180px);
    position: absolute;
    inset: 0 0 0 auto
}

.info-lead-art img {
    object-fit: contain;
    object-position: right bottom;
    filter: brightness(1.03);
    width: 100%;
    height: 100%
}

.info-eyebrow {
    color: var(--ink);
    letter-spacing: .18em;
    font-size: 12px;
    font-weight: 700;
    display: block
}

.info-lead h1 {
    font: 400 clamp(52px,7vw,100px)/.96 var(--display);
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 20px 0 22px
}

.info-lead-copy>p {
    color: var(--copy);
    margin: 0;
    font-size: clamp(18px,1.8vw,21px);
    line-height: 1.6
}

.info-main>section {
    border-top: 1px solid var(--line);
    max-width: 860px;
    padding: 40px 0
}

.info-main h2 {
    font: 400 clamp(30px,3.2vw,40px)/1.05 var(--display);
    text-transform: uppercase;
    margin: 0 0 16px
}

.info-main h3 {
    margin: 0 0 6px;
    font-size: 19px
}

.info-main p,.info-main li,.info-main dd {
    color: var(--copy);
    font-size: 17px
}

.info-main p {
    margin: 0 0 14px
}

.info-art {
    margin: 0 0 32px
}

.info-art img {
    object-fit: cover;
    background: var(--soft);
    border-radius: 16px;
    width: 100%;
    height: auto;
    max-height: 520px
}

.info-art figcaption {
    color: var(--quiet);
    margin-top: 8px;
    font-size: 14px
}

.info-grid {
    border-top: 1px solid var(--line);
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    margin: 0;
    padding: 8px 0 24px;
    display: grid
}

.info-grid section {
    border-top: 1px solid var(--line);
    padding: 28px 0 8px
}

.info-grid section:nth-child(-n+2) {
    border-top: 0
}

.info-facts {
    border-top: 1px solid var(--line);
    gap: 0;
    margin: 8px 0 18px;
    display: grid
}

.info-facts>div {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 190px 1fr;
    gap: 25px;
    padding: 15px 0;
    display: grid
}

.info-facts dt {
    font-size: 16px;
    font-weight: 700
}

.info-facts dd {
    margin: 0
}

.info-steps {
    padding-left: 26px
}

.info-steps li {
    padding: 0 0 16px 10px
}

.info-steps strong {
    color: var(--ink)
}

.info-table-wrap {
    overflow-x: auto
}

.info-main table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    font-size: 16px
}

.info-main caption {
    text-align: left;
    color: var(--quiet);
    margin-bottom: 14px;
    font-size: 14px
}

.info-main th,.info-main td {
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    padding: 17px 15px 17px 0
}

.info-main td p {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.65
}

.info-main kbd {
    white-space: nowrap;
    font: 700 14px/1.2 var(--body);
    color: var(--ink);
    border: 1px solid var(--ink);
    background: #fff;
    border-bottom-width: 2px;
    border-radius: 7px;
    padding: 4px 8px;
    display: inline-block
}

.info-main .info-cta {
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: 24px;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: none;
    margin: 48px 0 8px;
    padding: 52px clamp(24px,5vw,64px);
    display: flex
}

.info-main .info-cta h2 {
    color: #fff;
    margin: 0
}

.info-cta .info-play {
    background: #fff;
    border-color: #fff;
    color: var(--ink)!important
}

.info-cta .info-play:hover {
    background: #e8e8ed
}

.info-footer {
    border-top: 1px solid var(--line);
    justify-content: space-between;
    gap: 32px;
    padding: 36px 0 48px;
    display: flex
}

.info-footer-brand .steez8-mark {
    width: 104px;
    height: 23px
}

.info-footer p {
    color: var(--quiet);
    margin: 8px 0 0;
    font-size: 15px
}

.info-footer nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 24px;
    max-width: 620px
}

.info-track-list {
    padding: 0;
    list-style: none
}

.info-track-list li {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    gap: 24px;
    padding: 13px 0;
    display: flex
}

.info-track-list span {
    color: var(--quiet);
    font-size: 15px
}

.info-skip {
    z-index: 100;
    background: var(--ink);
    padding: 12px;
    position: fixed;
    top: 12px;
    left: 12px;
    transform: translateY(-200%);
    color: #fff!important
}

.info-skip:focus {
    transform: none
}

.info-page a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px
}

.info-cta a:focus-visible {
    outline-color: #fff
}

.info-page .scoring-guide p {
    color: var(--copy)
}

.info-page .scoring-guide .scoring-lead,.info-page .scoring-ladder strong,.info-page .grab-ladder b,.info-page .score-example>b,.info-page .scoring-guide b,.info-page .scoring-step h3 {
    color: var(--ink)
}

.info-page .scoring-step {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px
}

.info-page .scoring-ladder>div {
    border: 1px solid var(--ink);
    background: #fff;
    border-radius: 12px;
    padding: 14px 12px
}

.info-page .scoring-ladder span,.info-page .score-example>span {
    color: var(--ink);
    font-size: 13px
}

.info-page .score-example>small {
    color: var(--copy);
    font-size: 15px
}

.info-page .grab-ladder span {
    border-color: var(--ink);
    color: var(--ink);
    border-radius: 8px;
    font-size: 12px
}

.info-page .score-example {
    background: var(--soft);
    border-left-color: var(--ink);
    border-radius: 0 12px 12px 0
}

.info-page .scoring-help,.info-page .scoring-help>summary,.info-page .scoring-extras summary {
    color: var(--ink);
    border-color: var(--line)
}

.info-page .scoring-extras li {
    color: var(--copy)
}

@media (max-width: 820px) {
    .info-header nav>a[href=\/updates] {
        display:none
    }

    .info-lead.has-art .info-lead-copy {
        max-width: 58%
    }
}

@media (max-width: 650px) {
    .info-header {
        padding:16px 0
    }

    .info-header nav {
        gap: 14px;
        font-size: 14px
    }

    .info-header nav>a:first-child,.info-header nav>a[href=\/download] {
        display: none
    }

    .info-brand .steez8-mark {
        width: 100px;
        height: 22px
    }

    .info-play {
        height: 42px;
        padding: 0 16px;
        font-size: 14px
    }

    .info-lead {
        padding: 40px 0 28px
    }

    .info-lead.has-art {
        flex-direction: column-reverse;
        align-items: stretch;
        min-height: 0;
        padding: 12px 0 28px
    }

    .info-lead.has-art .info-lead-copy {
        max-width: none
    }

    .info-lead-art {
        width: auto;
        height: min(46vh,340px);
        margin: 0 0 20px;
        position: static
    }

    .info-lead-art img {
        object-position: center bottom
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .info-grid section:nth-child(2) {
        border-top: 1px solid var(--line)
    }

    .info-facts>div {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .info-main>section {
        padding: 28px 0
    }

    .info-main .info-cta {
        border-radius: 18px;
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 24px
    }

    .info-main th,.info-main td {
        padding-right: 10px
    }

    .info-track-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0
    }

    .info-footer {
        flex-direction: column
    }

    .info-footer nav {
        justify-content: flex-start;
        font-size: 15px
    }
}

@media (prefers-reduced-motion:reduce) {
    .info-page {
        scroll-behavior: auto
    }
}

.info-page {
    padding-left: env(safe-area-inset-left,0px);
    padding-right: env(safe-area-inset-right,0px);
    padding-bottom: env(safe-area-inset-bottom,0px)
}

@font-face {
    font-family: Barlow Condensed;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(/_next/static/media/barlow-condensed-latin-600-normal.DepVgxBB.woff2)format("woff2"),url(/_next/static/media/barlow-condensed-latin-600-normal.BFJEwTuo.woff)format("woff")
}

@font-face {
    font-family: Barlow Condensed;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(/_next/static/media/barlow-condensed-latin-700-normal.v1xN8_Wq.woff2)format("woff2"),url(/_next/static/media/barlow-condensed-latin-700-normal.Dmwat-ge.woff)format("woff")
}

@font-face {
    font-family: Barlow Condensed;
    font-style: italic;
    font-display: swap;
    font-weight: 800;
    src: url(/_next/static/media/barlow-condensed-latin-800-italic.Cnej2eWp.woff2)format("woff2"),url(/_next/static/media/barlow-condensed-latin-800-italic.B5BpsPSY.woff)format("woff")
}

@font-face {
    font-family: DM Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(/_next/static/media/dm-sans-latin-400-normal.CW0RaeGs.woff2)format("woff2"),url(/_next/static/media/dm-sans-latin-400-normal.BwCSEQnW.woff)format("woff")
}

@font-face {
    font-family: DM Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url(/_next/static/media/dm-sans-latin-500-normal.B9HHJjqV.woff2)format("woff2"),url(/_next/static/media/dm-sans-latin-500-normal.Dr3UlScf.woff)format("woff")
}

@font-face {
    font-family: DM Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(/_next/static/media/dm-sans-latin-600-normal.Aqo67rzb.woff2)format("woff2"),url(/_next/static/media/dm-sans-latin-600-normal.BmdmIIQ2.woff)format("woff")
}

@font-face {
    font-family: DM Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(/_next/static/media/dm-sans-latin-700-normal.DvUfVpUG.woff2)format("woff2"),url(/_next/static/media/dm-sans-latin-700-normal.CUSSCpQX.woff)format("woff")
}

:root {
    --ink: #f3f5ef;
    --accent: #ff7a43;
    --muted: #f1f7f796;
    --display: "Barlow Condensed",Impact,sans-serif;
    --body: "DM Sans",Arial,sans-serif;
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark
}

* {
    box-sizing: border-box
}

html,body {
    background: #102b35;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden
}

body {
    font-family: var(--body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-size: 16px
}

button,select {
    font: inherit
}

button {
    cursor: pointer
}

:is(button:focus-visible,select:focus-visible) {
    outline-offset: 5px;
    outline: 2px solid #ff935f
}

button:disabled {
    cursor: wait;
    opacity: .7
}

button,a,select {
    -webkit-tap-highlight-color: transparent
}

button {
    color: inherit
}

svg {
    flex-shrink: 0
}

.game-shell {
    isolation: isolate;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    height: 100dvh;
    min-height: 420px;
    position: relative;
    overflow: hidden
}

.world-canvas {
    z-index: -3;
    position: absolute;
    inset: 0
}

.world-canvas canvas {
    width: 100%;
    height: 100%;
    display: block
}

.cinematic-shade {
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(#0f202a6e,#0000 22% 63%,#0d222ba8);
    position: absolute;
    inset: 0
}

.is-intro .cinematic-shade {
    background: linear-gradient(90deg,#0d1d26d9 0%,#11252f91 29%,#142b3612 62%),linear-gradient(#142a3638,#0000 25% 75%,#10212a7a)
}

.film-grain {
    z-index: 8;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.55' d='M0 0h200v200H0z'/%3E%3C/svg%3E");
    position: absolute;
    inset: 0
}

.topbar {
    z-index: 4;
    justify-content: space-between;
    align-items: center;
    height: 101px;
    padding: 0 46px;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.wordmark {
    align-items: center;
    gap: 10px;
    display: flex
}

h1.wordmark {
    font: inherit;
    margin: 0
}

.wordmark>span {
    font-family: var(--display);
    letter-spacing: .9px;
    font-size: 29px;
    font-style: italic;
    font-weight: 800
}

.brand-dot {
    font: 10px var(--body);
    vertical-align: top;
    margin-left: 4px;
    line-height: 28px
}

.location-label {
    letter-spacing: 1.8px;
    color: #f0f5f2;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.live-dot {
    background: #ff915e;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    box-shadow: 0 0 9px #ffb27a99
}

.slash {
    color: #ffffff5c;
    padding: 0 1px
}

.location-n {
    color: #ffffff8a;
    margin-left: 9px;
    font-size: 10px
}

.top-actions {
    gap: 9px;
    display: flex
}

.icon-button {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #15334413;
    border: 1px solid #f0f6ff38;
    border-radius: 50%;
    place-items: center;
    width: 39px;
    height: 39px;
    transition: background .18s,transform .18s;
    display: grid
}

.icon-button:hover {
    background: #fff2;
    transform: translateY(-2px)
}

.intro-panel {
    width: 460px;
    max-width: 46vw;
    position: absolute;
    top: 20.3%;
    left: 7.4%
}

.eyebrow {
    letter-spacing: 2px;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    display: flex
}

.orange-square {
    background: var(--accent);
    color: #23363d;
    letter-spacing: 0;
    padding: 5px 6px;
    font-size: 10px
}

.small-divider {
    background: #b2c2ca;
    width: 15px;
    height: 1px;
    margin: 0 3px
}

.intro-panel h1 {
    font-family: var(--display);
    letter-spacing: -1.5px;
    text-transform: uppercase;
    margin: 26px 0 24px;
    font-size: clamp(96px,9.3vw,153px);
    font-style: italic;
    font-weight: 800;
    line-height: .86
}

.intro-panel h1 span {
    color: var(--accent)
}

.intro-copy {
    color: #e6edefd4;
    margin: 0 0 27px;
    font-size: 15px;
    line-height: 1.7
}

.mountain-stats {
    gap: 0;
    margin-bottom: 34px;
    display: flex
}

.mountain-stats>div {
    border-left: 1px solid #cfebf431;
    flex-direction: column;
    gap: 7px;
    padding: 0 24px;
    display: flex
}

.mountain-stats>div:first-child {
    border-left: 0;
    padding-left: 0
}

.mountain-stats b {
    font-family: var(--display);
    letter-spacing: .4px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1
}

.mountain-stats b small {
    font-family: var(--body);
    color: #e6edf1b5;
    margin-left: 3px;
    font-size: 11px;
    font-weight: 500
}

.mountain-stats span {
    letter-spacing: 1.5px;
    color: #ecf1f1a3;
    font-size: 9px
}

.primary-button {
    background: var(--accent);
    color: #17313b;
    letter-spacing: .8px;
    border: 0;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 372px;
    height: 64px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 800;
    transition: background .2s,transform .2s;
    display: flex;
    box-shadow: 0 8px 28px #0c29311a
}

.primary-button>span:first-of-type {
    text-align: left;
    flex: 1
}

.primary-button:hover {
    background: #ff9467;
    transform: translateY(-2px)
}

.primary-button:active {
    transform: translateY(0)
}

.start-caption {
    color: #cfdee5a3;
    letter-spacing: 1.2px;
    white-space: nowrap;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    font-size: 9px;
    display: flex
}

.start-caption>span:last-child:not(:first-child) {
    letter-spacing: 0;
    color: #c7d7df87;
    margin-left: 5px;
    font-size: 9px
}

.enter-key {
    text-align: center;
    border: 1px solid #d3e7ed58;
    border-radius: 3px;
    min-width: 20px;
    height: 17px;
    padding: 1px 4px;
    font-size: 10px
}

.conditions {
    filter: drop-shadow(0 1px 8px #18354133);
    width: 166px;
    position: absolute;
    top: 43%;
    right: 46px
}

.conditions>.eyebrow {
    letter-spacing: 1.7px;
    color: #f6faffd0;
    white-space: nowrap;
    margin-bottom: 17px;
    font-size: 8px
}

.conditions>div:not(.conditions-rule) {
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    display: flex
}

.conditions b {
    font-family: var(--display);
    min-width: 42px;
    font-size: 27px;
    font-weight: 600;
    line-height: 1
}

.conditions b small {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 400
}

.conditions div>span {
    letter-spacing: .7px;
    white-space: nowrap;
    font-size: 8px
}

.conditions-rule {
    background: #f6feff4a;
    height: 1px;
    margin: 23px 0 18px
}

.conditions p {
    letter-spacing: 1px;
    justify-content: space-between;
    font-size: 8px;
    display: flex
}

.conditions p span {
    opacity: .5
}

.intro-bottom {
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 46px;
    right: 46px
}

.key-hints {
    color: #f2f6f3ba;
    gap: 24px;
    font-size: 11px;
    display: flex
}

.key-hints>span,.playing-hints>span {
    align-items: center;
    gap: 5px;
    display: flex
}

kbd {
    font-family: var(--body);
    color: #fff;
    background: #132d3930;
    border: 1px solid #e0f5ff59;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    min-width: 21px;
    height: 22px;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 500;
    display: inline-flex
}

.key-hints>span kbd:last-of-type {
    margin-right: 3px
}

.build-note {
    letter-spacing: 1.7px;
    color: #f2f6f3b0;
    align-items: center;
    gap: 9px;
    font-size: 9px;
    display: flex
}

.loading-spinner {
    border: 2px solid #16394630;
    border-top-color: #163946;
    border-radius: 50%;
    width: 19px;
    height: 19px;
    animation: 1s linear infinite spin
}

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

.run-heading {
    text-shadow: 0 2px 10px #214b5d66;
    position: absolute;
    top: 130px;
    left: 47px
}

.run-heading .eyebrow {
    letter-spacing: 1.8px;
    font-size: 9px
}

.run-heading h2 {
    font-family: var(--display);
    letter-spacing: .4px;
    margin: 6px 0 0;
    font-size: 32px;
    font-weight: 700
}

.score-display {
    text-align: right;
    text-shadow: 0 2px 10px #214b5d66;
    flex-direction: column;
    display: flex;
    position: absolute;
    top: 130px;
    right: 47px
}

.score-display>span {
    letter-spacing: 2px;
    font-size: 9px
}

.score-display strong {
    font-family: var(--display);
    font-variant-numeric: tabular-nums;
    font-size: 51px;
    font-weight: 600;
    line-height: 1.12
}

.score-display small {
    letter-spacing: 1px;
    opacity: .75;
    font-size: 9px
}

.map-panel {
    color: #fff;
    filter: drop-shadow(0 2px 5px #15374766);
    flex-direction: column;
    align-items: center;
    width: 118px;
    display: flex;
    position: absolute;
    top: 43%;
    right: 43px
}

.map-panel .eyebrow {
    letter-spacing: 1.5px;
    font-size: 9px
}

.course-map {
    width: 90px;
    height: 226px;
    margin: 13px 0 5px
}

.map-altitude {
    font-family: var(--display);
    letter-spacing: .4px;
    font-size: 23px;
    font-weight: 600
}

.map-altitude small {
    font-family: var(--body);
    margin-left: 3px;
    font-size: 8px
}

.map-distance {
    letter-spacing: 1.2px;
    opacity: .8;
    margin-top: 6px;
    font-size: 8px
}

.speed-hud {
    text-shadow: 0 2px 7px #0b2d3a44;
    width: 151px;
    position: absolute;
    bottom: 59px;
    left: 47px
}

.speed-hud>.eyebrow {
    font-size: 9px
}

.speed-number {
    font-family: var(--display);
    letter-spacing: -3px;
    font-variant-numeric: tabular-nums;
    align-items: baseline;
    gap: 9px;
    font-size: 98px;
    font-weight: 600;
    line-height: .98;
    display: flex
}

.speed-number>span {
    font-family: var(--body);
    letter-spacing: 1px;
    font-size: 10px;
    font-weight: 500
}

.speed-track {
    background: #e4f8ff41;
    height: 3px;
    margin-top: 13px
}

.speed-track>span {
    background: var(--accent);
    height: 100%;
    transition: width .3s;
    display: block
}

.run-time {
    justify-content: space-between;
    align-items: center;
    margin-top: 17px;
    display: flex
}

.run-time>span {
    letter-spacing: 1.4px;
    opacity: .7;
    font-size: 9px
}

.run-time b {
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 500
}

.trick-feedback {
    text-align: center;
    pointer-events: none;
    text-shadow: 0 3px 18px #14374b88;
    width: 70%;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%)
}

.trick-feedback>.eyebrow {
    color: var(--accent);
    justify-content: center;
    font-size: 10px
}

.trick-feedback strong {
    font-family: var(--display);
    letter-spacing: .3px;
    margin: 4px 0 8px;
    font-size: 52px;
    font-style: italic;
    font-weight: 800;
    line-height: 1.12;
    display: block
}

.trick-feedback strong.landed-trick {
    font-size: 32px
}

.trick-feedback b {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 600
}

.playing-hints {
    color: #eff9ffe3;
    gap: 23px;
    font-size: 10px;
    display: flex;
    position: absolute;
    bottom: 29px;
    left: 50%;
    transform: translate(-50%)
}

.playing-hints kbd {
    background: #203d474f;
    height: 20px;
    font-size: 8px
}

.course-progress {
    background: #d5e2e833;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.course-progress span {
    background: var(--accent);
    height: 100%;
    transition: width .1s;
    display: block
}

.charge-bar {
    background: #e3f3f96e;
    width: 130px;
    height: 4px;
    position: absolute;
    bottom: 26%;
    left: 50%;
    transform: translate(-50%)
}

.charge-bar>span {
    background: var(--accent);
    height: 100%;
    display: block
}

.charge-bar b {
    text-align: center;
    letter-spacing: 1.8px;
    margin-top: 8px;
    font-size: 8px;
    font-weight: 500;
    display: block
}

.lift-card {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #163441d9;
    border: 1px solid #a4c1cb2e;
    gap: 21px;
    width: 430px;
    max-width: 70%;
    padding: 25px 29px 25px 25px;
    display: flex;
    position: absolute;
    bottom: 60px;
    left: 47px
}

.lift-icon {
    color: var(--accent);
    padding-top: 4px
}

.lift-copy {
    flex: 1
}

.lift-copy>.eyebrow {
    letter-spacing: 1.3px;
    opacity: .7;
    font-size: 8px
}

.lift-card h3 {
    margin: 9px 0 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

.lift-progress>span {
    background: var(--accent);
    height: 100%;
    transition: width .3s;
    display: block
}

.lift-meta {
    letter-spacing: 1px;
    justify-content: space-between;
    margin-top: 13px;
    font-size: 8px;
    display: flex
}

.lift-meta>span {
    opacity: .65;
    align-items: center;
    gap: 8px;
    display: flex
}

.lift-meta>b {
    color: var(--accent);
    font-weight: 600
}

.ready-card {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #173340e8;
    border: 1px solid #abc8d32b;
    max-width: 365px;
    padding: 25px;
    position: absolute;
    bottom: 65px;
    left: 47px
}

.ready-card>.eyebrow {
    color: var(--accent);
    font-size: 9px
}

.ready-card h3 {
    font-family: var(--display);
    margin: 10px 0;
    font-size: 32px
}

.ready-card p {
    color: #d1dce1;
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.7
}

.ready-card .primary-button {
    height: 55px
}

.ready-card .start-caption {
    justify-content: center
}

.finish-card {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #132e3ce8;
    border: 1px solid #bed5df38;
    width: 450px;
    max-width: 90%;
    padding: 34px;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.finish-card>.eyebrow {
    color: var(--accent);
    justify-content: space-between;
    font-size: 10px
}

.final-score {
    font-family: var(--display);
    align-items: baseline;
    gap: 14px;
    margin: 20px 0;
    font-size: 88px;
    font-weight: 600;
    line-height: 1.1;
    display: flex
}

.final-score>span {
    font: 10px var(--body);
    letter-spacing: 1px;
    opacity: .6
}

.result-grid {
    border-top: 1px solid #abc5d231;
    grid-template-columns: 1fr 1fr;
    gap: 21px;
    margin-bottom: 29px;
    padding-top: 20px;
    display: grid
}

.result-grid>div {
    flex-direction: column;
    gap: 5px;
    display: flex
}

.result-grid span {
    letter-spacing: 1.4px;
    opacity: .6;
    font-size: 9px
}

.result-grid b {
    font-family: var(--display);
    font-size: 27px;
    font-weight: 600
}

.result-grid small {
    font: 9px var(--body);
    opacity: .7
}

.finish-card .primary-button {
    max-width: none
}

.finish-card p {
    text-align: center;
    color: #bed3de;
    margin: 18px 0 0;
    font-size: 11px
}

.modal-backdrop {
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    z-index: 10;
    background: #0b253375;
    justify-content: center;
    align-items: center;
    padding: 24px;
    display: flex;
    position: absolute;
    inset: 0
}

.pause-card,.help-card {
    background: #17303d;
    border: 1px solid #b4ccd42e;
    width: 460px;
    max-width: 100%;
    max-height: 95%;
    padding: 36px;
    position: relative;
    overflow: auto;
    box-shadow: 0 20px 100px #07171f33
}

.pause-card>.eyebrow,.help-card>.eyebrow {
    color: var(--accent);
    font-size: 10px
}

.pause-card h2,.help-card h2 {
    font-family: var(--display);
    margin: 12px 0 27px;
    font-size: 45px;
    font-style: italic;
    font-weight: 800;
    line-height: 1
}

.pause-card .primary-button {
    max-width: none;
    margin-bottom: 15px
}

.text-button {
    color: #d0dfe7;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    font-size: 13px;
    display: flex
}

.text-button:hover {
    color: var(--accent)
}

.help-card {
    width: 575px;
    padding: 35px 39px
}

.close-button {
    color: #d5e6ed;
    background: 0 0;
    border: 0;
    padding: 5px;
    position: absolute;
    top: 23px;
    right: 23px
}

.control-list {
    flex-direction: column;
    display: flex
}

.control-list>div {
    border-bottom: 1px solid #abc4d118;
    align-items: center;
    gap: 23px;
    padding: 10px 0;
    display: flex
}

.control-list kbd {
    flex-shrink: 0;
    min-width: 71px;
    height: 30px;
    font-size: 10px
}

.control-list>div>div {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.control-list b {
    font-size: 12px;
    font-weight: 500
}

.control-list span {
    color: #c1d4df8c;
    font-size: 10px;
    line-height: 1.5
}

.control-tip {
    color: var(--accent);
    align-items: center;
    gap: 14px;
    margin: 19px 0;
    display: flex
}

.control-tip p {
    color: #dce8e4b0;
    margin: 0;
    font-size: 11px;
    line-height: 1.7
}

.help-card .primary-button {
    max-width: none;
    height: 54px;
    font-size: 11px
}

.error-banner {
    z-index: 30;
    background: #17313f;
    border: 1px solid #ff926280;
    align-items: center;
    gap: 24px;
    width: max-content;
    max-width: 90%;
    padding: 18px 21px;
    font-size: 14px;
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 9px 30px #0003
}

.error-banner button {
    background: 0 0;
    border: 0;
    align-items: center;
    display: flex
}

@media (min-width: 1650px) {
    .intro-panel {
        top:22%;
        left: 9%
    }

    .intro-panel h1 {
        font-size: 163px
    }

    .intro-copy {
        font-size: 17px
    }

    .mountain-stats {
        margin-bottom: 40px
    }

    .conditions {
        right: 65px
    }

    .intro-bottom {
        bottom: 40px
    }
}

@media (max-height: 760px) and (min-width:761px) {
    .topbar {
        height:80px
    }

    .intro-panel {
        top: 18%;
        left: 7%
    }

    .intro-panel h1 {
        margin: 20px 0 18px;
        font-size: clamp(83px,8.4vw,117px)
    }

    .intro-copy {
        margin-bottom: 20px
    }

    .mountain-stats {
        margin-bottom: 24px
    }

    .primary-button {
        height: 56px
    }

    .intro-bottom {
        bottom: 23px
    }

    .conditions {
        top: 37%
    }

    .run-heading,.score-display {
        top: 100px
    }

    .map-panel {
        top: 35%
    }

    .course-map {
        height: 180px
    }

    .help-card {
        padding: 26px 35px
    }

    .help-card h2 {
        margin-bottom: 16px;
        font-size: 37px
    }

    .control-list>div {
        padding: 7px 0
    }

    .control-tip {
        margin: 12px 0
    }
}

@media (max-width: 1050px) {
    .location-label {
        display:none
    }

    .intro-panel {
        max-width: 53vw;
        left: 6%
    }

    .conditions {
        width: 145px;
        right: 30px
    }

    .conditions>.eyebrow,.conditions div>span {
        font-size: 7px
    }

    .topbar {
        padding: 0 30px
    }

    .intro-bottom {
        left: 30px;
        right: 30px
    }

    .key-hints {
        gap: 14px
    }

    .run-heading,.speed-hud,.lift-card,.ready-card {
        left: 30px
    }

    .map-panel {
        right: 25px
    }

    .score-display {
        right: 30px
    }
}

@media (max-width: 760px) {
    .topbar {
        height:78px;
        padding: 0 22px
    }

    .wordmark>span {
        font-size: 25px
    }

    .wordmark>svg {
        width: 23px
    }

    .top-actions {
        gap: 6px
    }

    .icon-button {
        width: 34px;
        height: 34px
    }

    .fullscreen-button {
        display: none
    }

    .intro-panel {
        width: 350px;
        max-width: 90vw;
        top: 21%;
        left: 25px
    }

    .intro-panel h1 {
        margin-top: 22px;
        margin-bottom: 22px;
        font-size: 105px
    }

    .intro-copy {
        margin-bottom: 25px;
        font-size: 13px
    }

    .eyebrow {
        letter-spacing: 1.7px;
        font-size: 9px
    }

    .mountain-stats b {
        font-size: 28px
    }

    .mountain-stats>div {
        padding: 0 19px
    }

    .mountain-stats span {
        font-size: 8px
    }

    .mountain-stats {
        margin-bottom: 29px
    }

    .primary-button {
        max-width: 326px;
        height: 57px;
        font-size: 11px
    }

    .intro-panel .start-caption>span:last-child,.conditions {
        display: none
    }

    .intro-bottom {
        bottom: 25px;
        left: 25px;
        right: 25px
    }

    .key-hints {
        flex-wrap: wrap;
        gap: 10px 13px;
        max-width: 90%;
        font-size: 10px
    }

    .key-hints>span:last-child,.build-note {
        display: none
    }

    .is-intro .cinematic-shade {
        background: linear-gradient(90deg,#0d202ace,#162e3b64 76%,#183b491a),linear-gradient(#122c3c3b,#0000 75%,#15303c6e)
    }

    .run-heading {
        top: 99px;
        left: 23px
    }

    .run-heading>.eyebrow {
        font-size: 8px
    }

    .run-heading h2 {
        font-size: 26px
    }

    .score-display {
        top: 98px;
        right: 23px
    }

    .score-display>span {
        font-size: 7px
    }

    .score-display strong {
        font-size: 35px
    }

    .score-display small {
        display: none
    }

    .map-panel {
        width: 80px;
        top: 30%;
        right: 13px
    }

    .map-panel>.eyebrow {
        font-size: 7px
    }

    .course-map {
        width: 65px;
        height: 154px
    }

    .map-altitude {
        font-size: 21px
    }

    .map-distance {
        letter-spacing: .5px;
        font-size: 7px
    }

    .speed-hud {
        width: 108px;
        bottom: 121px;
        left: 24px
    }

    .speed-number {
        font-size: 72px
    }

    .speed-number>span {
        font-size: 8px
    }

    .run-time {
        margin-top: 12px
    }

    .run-time>span {
        font-size: 7px
    }

    .run-time b {
        font-size: 13px
    }

    .playing-hints {
        display: none
    }

    .trick-feedback {
        width: 78%;
        top: 25%;
        left: 46%
    }

    .trick-feedback strong {
        font-size: 35px
    }

    .trick-feedback strong.landed-trick {
        font-size: 23px
    }

    .trick-feedback>.eyebrow {
        font-size: 8px
    }

    .trick-feedback b {
        font-size: 25px
    }

    .lift-card {
        gap: 16px;
        width: 390px;
        max-width: calc(100% - 44px);
        padding: 20px;
        bottom: 35px;
        left: 22px
    }

    .lift-card h3 {
        font-size: 14px
    }

    .lift-copy>.eyebrow {
        font-size: 7px
    }

    .ready-card {
        width: 340px;
        max-width: calc(100% - 44px);
        padding: 22px;
        bottom: 30px;
        left: 22px
    }

    .ready-card .primary-button {
        max-width: none
    }

    .ready-card p {
        font-size: 12px
    }

    .help-card {
        padding: 28px 22px
    }

    .help-card h2 {
        font-size: 36px
    }

    .control-list>div {
        gap: 14px
    }

    .control-list kbd {
        min-width: 63px
    }

    .control-list b {
        font-size: 11px
    }

    .control-list span {
        font-size: 9px
    }

    .help-card .primary-button,.control-tip p {
        font-size: 10px
    }

    .close-button {
        top: 16px;
        right: 15px
    }

    .finish-card {
        width: 365px;
        padding: 26px;
        top: 54%
    }

    .final-score {
        font-size: 73px
    }

    .finish-card .primary-button {
        font-size: 10px
    }

    .charge-bar {
        bottom: 28%
    }

    .pause-card {
        padding: 28px
    }

    .pause-card h2 {
        font-size: 38px
    }

    .pause-card .primary-button {
        max-width: none
    }
}

@media (max-height: 630px) {
    .intro-panel {
        top:21%
    }

    .intro-panel h1 {
        margin: 15px 0;
        font-size: 79px
    }

    .intro-copy {
        margin-bottom: 15px
    }

    .mountain-stats {
        margin-bottom: 18px
    }

    .mountain-stats b {
        font-size: 25px
    }

    .primary-button {
        height: 49px
    }

    .start-caption {
        margin-top: 10px
    }

    .intro-bottom {
        bottom: 17px
    }

    .run-heading,.score-display {
        top: 84px
    }

    .map-panel {
        top: 34%
    }

    .course-map {
        height: 135px
    }

    .help-card h2 {
        margin: 8px 0 12px
    }

    .control-list>div {
        padding: 6px 0
    }

    .control-list span {
        display: none
    }

    .help-card .control-tip p {
        font-size: 10px
    }

    .modal-backdrop {
        padding: 13px
    }

    .finish-card {
        padding: 20px
    }

    .final-score {
        margin: 10px 0;
        font-size: 60px
    }

    .result-grid {
        gap: 12px;
        margin-bottom: 18px;
        padding-top: 13px
    }

    .ready-card {
        padding: 20px;
        bottom: 25px
    }

    .ready-card h3 {
        margin: 7px 0;
        font-size: 28px
    }

    .ready-card p {
        margin-bottom: 15px
    }
}

@media (pointer: coarse) and (min-width:761px) {
    .playing-hints {
        display:none
    }
}

@media (prefers-reduced-motion:reduce) {
    *,:before,:after {
        scroll-behavior: auto!important;
        transition: none!important
    }

    .film-grain {
        display: none
    }
}

.conditions {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #183a49a6;
    border-top: 1px solid #d4e9f54d;
    width: 205px;
    padding: 18px 20px
}

.conditions>.eyebrow {
    letter-spacing: 1.3px;
    font-size: 9px
}

.conditions div>span {
    font-size: 9px
}

.conditions p {
    letter-spacing: .5px;
    font-size: 9px
}

.intro-copy {
    font-size: 16px
}

.primary-button {
    font-size: 13px
}

.key-hints {
    font-size: 12px
}

.start-caption {
    font-size: 10px
}

.control-list b {
    font-size: 13px
}

.control-list span {
    font-size: 11px
}

.control-tip p,.help-card .primary-button {
    font-size: 12px
}

dialog {
    color: var(--ink);
    margin: 0
}

.pause-card,.help-card {
    position: relative
}

.close-button {
    z-index: 2
}

.close-button svg {
    display: block
}

.close-button:after {
    content: "";
    position: absolute;
    inset: -6px
}

@media (max-width: 760px) {
    .primary-button {
        font-size:11px
    }

    .intro-copy {
        font-size: 14px
    }

    .key-hints {
        font-size: 10px
    }

    .control-list b {
        font-size: 12px
    }

    .control-list span {
        font-size: 10px
    }

    .control-tip p {
        font-size: 11px
    }

    .help-card .primary-button {
        font-size: 10px
    }
}

.fast-travel {
    color: #f4f9fa;
    letter-spacing: 1px;
    cursor: pointer;
    background: #ecf7fb10;
    border: 1px solid #adc9d55c;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 23px;
    padding: 13px 14px;
    font-size: 10px;
    font-weight: 600;
    display: flex
}

.fast-travel:hover {
    color: #152c36;
    background: #f77642;
    border-color: #f77642
}

.fast-travel>span {
    text-align: left;
    flex: 1
}

.fast-travel kbd {
    min-width: 22px;
    height: 22px;
    font-size: 10px
}

.lift-exit-note {
    opacity: .65;
    margin-top: 11px;
    font-size: 10px;
    line-height: 1.5;
    display: block
}

.air-metrics {
    letter-spacing: 1px;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-size: 10px;
    display: flex
}

.air-metrics b {
    color: var(--accent);
    font-size: 10px
}

.playing-hints>span:first-child {
    gap: 7px
}

@media (max-width: 760px) {
    .speed-hud {
        bottom:145px
    }

    .fast-travel {
        padding: 11px 10px;
        font-size: 9px
    }

    .lift-card {
        bottom: 24px
    }

    .lift-card h3 {
        margin-bottom: 17px
    }
}

.is-finished .run-heading {
    display: none
}

.run-results {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: linear-gradient(125deg,#142d38f7,#1a3845ef);
    border: 1px solid #cce3eb38;
    width: min(790px,100% - 56px);
    max-height: calc(100dvh - 110px);
    padding: 30px 36px 26px;
    animation: .55s ease-out results-in;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: auto;
    transform: translate(-50%,-46%);
    box-shadow: 0 24px 90px #06182450
}

.results-overline {
    letter-spacing: 1.6px;
    color: #c8d9df8f;
    justify-content: space-between;
    gap: 16px;
    font-size: 9px;
    display: flex
}

.results-overline>span:first-child {
    color: #b7dad1;
    align-items: center;
    gap: 8px;
    display: flex
}

.results-title {
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 13px 0 24px;
    display: flex
}

.results-title h1 {
    font: italic 800 48px/.94 var(--display);
    letter-spacing: .5px;
    margin: 0
}

.result-medal {
    color: #edc793;
    letter-spacing: 1.4px;
    border: 1px solid #edc79345;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    font-size: 9px;
    display: flex
}

.results-main {
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: 34px;
    display: grid
}

.results-total>.eyebrow {
    letter-spacing: 2px;
    color: #bdd0d8b0;
    font-size: 9px
}

.results-total>strong {
    font: 700 clamp(65px,7.5vw,105px)/1 var(--display);
    letter-spacing: -1.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin: 5px 0 6px;
    display: block
}

.results-status {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.record-badge {
    letter-spacing: 1.1px;
    color: #93adb7;
    align-items: center;
    gap: 7px;
    height: 32px;
    margin-top: 12px;
    font-size: 8px;
    display: flex
}

.record-badge b {
    font-size: 12px;
    font-weight: 500
}

.record-badge.is-record {
    color: #ff9b6d
}

.score-ledger>div:not(.ledger-rule) {
    opacity: .38;
    border-bottom: 1px solid #d9eaf015;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 11px 0;
    transition: opacity .25s;
    display: flex
}

.score-ledger>div.is-added {
    opacity: 1
}

.score-ledger span {
    font-size: 12px
}

.score-ledger small {
    color: #a4bdc7;
    margin-top: 4px;
    font-size: 9px;
    display: block
}

.score-ledger b {
    font: 600 25px var(--display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.ledger-rule {
    transform-origin: 0;
    background: #ff9865;
    height: 2px;
    transition: transform .4s;
    transform: scaleX(0)
}

.is-counted .ledger-rule {
    transform: scaleX(1)
}

.run-metrics {
    border-top: 1px solid #cbe3ec30;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    margin-top: 27px;
    padding-top: 20px;
    display: grid
}

.run-metrics>div {
    flex-direction: column;
    gap: 5px;
    display: flex
}

.run-metrics span {
    letter-spacing: 1.4px;
    color: #9eb8c4;
    font-size: 8px
}

.run-metrics b {
    font: 600 26px var(--display)
}

.run-metrics small {
    font: 8px var(--body);
    color: #bdcfd8;
    margin-left: 3px
}

.signature-trick {
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    padding: 15px 0;
    font-size: 10px;
    display: flex
}

.signature-trick>span {
    letter-spacing: 1px;
    color: #99b2bf;
    font-size: 8px
}

.signature-trick>b {
    flex: 1;
    font-weight: 500
}

.signature-trick>strong {
    font: 600 19px var(--display);
    color: #e6bda5
}

.results-footer {
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 9px;
    display: flex
}

.results-footer .primary-button {
    max-width: 330px;
    height: 53px;
    font-size: 11px
}

.results-footer p {
    color: #afc4ce;
    margin: 0;
    font-size: 10px;
    line-height: 1.7
}

.tally-skip {
    color: #bfd0d8;
    letter-spacing: 1.4px;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #a3bac780;
    padding: 7px 0;
    font-size: 9px
}

.tally-skip:hover {
    color: #fff
}

.is-playing .cinematic-shade {
    background: linear-gradient(#0f263447,#0000 21% 70%,#0d222b6b)
}

.is-playing .film-grain {
    opacity: .017
}

@keyframes results-in {
    0% {
        opacity: 0;
        transform: translate(-50%,-43%)
    }

    to {
        opacity: 1;
        transform: translate(-50%,-46%)
    }
}

.results-footer .primary-button kbd {
    color: #f7f6ef;
    font: 400 13px/1 "Knewave",var(--display);
    background: #101418;
    border: 0;
    border-radius: 4px;
    padding: 3px 6px
}

@media (max-width: 760px) {
    .run-results {
        width:calc(100% - 32px);
        max-height: calc(100dvh - 102px);
        padding: 23px 21px;
        animation: none;
        top: 85px;
        transform: translate(-50%)
    }

    .results-overline {
        letter-spacing: .8px;
        font-size: 8px
    }

    .results-overline>span:last-child {
        display: none
    }

    .results-title {
        gap: 8px;
        margin: 17px 0 22px
    }

    .results-title h1 {
        font-size: 39px
    }

    .result-medal {
        padding: 7px;
        font-size: 8px
    }

    .results-main {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .results-total>strong {
        font-size: 85px
    }

    .results-total {
        position: relative
    }

    .record-badge {
        height: 22px;
        margin-top: 3px
    }

    .score-ledger>div:not(.ledger-rule) {
        padding: 9px 0
    }

    .score-ledger b {
        font-size: 23px
    }

    .run-metrics {
        gap: 8px;
        margin-top: 19px;
        padding-top: 16px
    }

    .run-metrics span {
        letter-spacing: .6px;
        font-size: 7px
    }

    .run-metrics b {
        font-size: 24px
    }

    .run-metrics small {
        font-size: 7px
    }

    .signature-trick {
        flex-wrap: wrap;
        gap: 7px 12px;
        margin-top: 7px;
        padding: 12px 0;
        font-size: 9px
    }

    .signature-trick>span {
        flex-basis: 100%
    }

    .results-footer {
        gap: 12px;
        margin-top: 3px
    }

    .results-footer .primary-button {
        gap: 10px;
        max-width: none;
        height: 49px;
        padding: 0 14px;
        font-size: 10px
    }

    .results-footer p {
        display: none
    }

    .tally-skip {
        min-width: 64px;
        font-size: 8px
    }

    .results-status {
        font-size: 9px
    }
}

@media (max-height: 660px) and (min-width:761px) {
    .run-results {
        max-height:calc(100dvh - 93px);
        padding: 20px 28px;
        transform: translate(-50%,-44%)
    }

    .results-title {
        margin: 10px 0 14px
    }

    .results-title h1 {
        font-size: 40px
    }

    .results-total>strong {
        font-size: 85px
    }

    .score-ledger>div:not(.ledger-rule) {
        padding: 8px 0
    }

    .run-metrics {
        margin-top: 18px;
        padding-top: 14px
    }

    .signature-trick {
        margin-top: 4px;
        padding: 10px 0
    }

    .results-footer {
        margin-top: 5px
    }
}

@media (prefers-reduced-motion:reduce) {
    .run-results {
        animation: none
    }

    .ledger-rule,.score-ledger>div {
        transition: none
    }
}

.replay-hud {
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0
}

.is-review .cinematic-shade {
    opacity: .2
}

.replay-cameras {
    min-inline-size: 0;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: auto;
    background: #112834ed;
    border: 1px solid #a4c1cb42;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: min(470px,92%);
    margin: 0;
    padding: 8px;
    display: grid;
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translate(-50%)
}

.replay-cameras button {
    color: #f0f8ff;
    text-align: left;
    background: #ffffff06;
    border: 1px solid #0000;
    border-radius: 3px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 16px 12px;
    display: flex
}

.replay-cameras button:hover {
    background: #ffffff12
}

.replay-cameras button[aria-pressed=true] {
    border-color: var(--accent);
    background: #ff7a4318
}

.replay-cameras strong {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 22px
}

.replay-cameras small {
    color: #bdcfd6;
    font-size: 10px;
    line-height: 1.5
}

.replay-hud.is-cinematic .replay-title {
    display: none
}

.replay-bar .replay-camera-button {
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap
}

@media (max-width: 600px) {
    .replay-cameras {
        bottom:130px
    }

    .replay-bar .replay-camera-button {
        gap: 3px;
        font-size: 8px
    }

    .replay-bar .replay-camera-button svg {
        display: none
    }

    .clip-panel.clip-options {
        max-height: calc(100dvh - 155px);
        bottom: 128px;
        overflow: auto
    }
}

@media (max-height: 500px) {
    .replay-cameras {
        grid-template-columns:repeat(4,minmax(0,1fr));
        width: min(760px,92%)
    }
}

.replay-title {
    text-shadow: 0 2px 10px #214b5d66;
    flex-direction: column;
    gap: 6px;
    display: flex;
    position: absolute;
    top: 130px;
    left: 47px
}

.replay-title .eyebrow {
    letter-spacing: 1.8px;
    color: var(--accent);
    font-size: 9px
}

.replay-title strong {
    font-family: var(--display);
    letter-spacing: .4px;
    font-size: 32px;
    font-weight: 700
}

.replay-title small {
    letter-spacing: 1.2px;
    opacity: .8;
    font-size: 10px
}

.replay-notice {
    text-align: center;
    text-shadow: 0 3px 18px #14374b88;
    width: 70%;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%)
}

.replay-notice strong {
    font-family: var(--display);
    font-size: 40px;
    font-style: italic;
    font-weight: 800;
    line-height: 1.1
}

.replay-bar {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: auto;
    background: #163441d9;
    border: 1px solid #a4c1cb2e;
    align-items: center;
    gap: 10px;
    width: min(720px,92%);
    padding: 10px 14px;
    display: flex;
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translate(-50%)
}

.replay-bar button {
    letter-spacing: 1px;
    color: #fff;
    background: #ffffff12;
    border: 1px solid #effaff30;
    border-radius: 4px;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    display: flex
}

.replay-bar input[type=range] {
    accent-color: var(--accent);
    flex: 1;
    min-width: 80px
}

.replay-time {
    font-variant-numeric: tabular-nums;
    text-align: center;
    min-width: 38px;
    font-size: 12px
}

.replay-keys {
    color: #eff9ffb0;
    white-space: nowrap;
    gap: 18px;
    font-size: 9px;
    display: flex;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translate(-50%)
}

.replay-keys kbd {
    min-width: 18px;
    height: 18px;
    margin-right: 4px;
    font-size: 8px
}

.saved-replays {
    border-top: 1px solid #f0f7ff24;
    flex-direction: column;
    margin-top: 13px;
    padding-top: 12px;
    display: flex
}

.saved-replays>span {
    letter-spacing: 1.8px;
    color: var(--accent);
    margin-bottom: 4px;
    font-size: 9px
}

.saved-replays .text-button {
    padding: 9px 0;
    font-size: 12px
}

.saved-replays .text-button small {
    opacity: .6;
    margin-left: auto;
    font-size: 10px
}

@media (max-width: 760px) {
    .replay-title {
        top:99px;
        left: 23px
    }

    .replay-title strong {
        font-size: 24px
    }

    .replay-notice strong {
        font-size: 26px
    }

    .replay-keys {
        display: none
    }

    .replay-bar {
        gap: 6px;
        padding: 8px;
        bottom: 18px
    }

    .replay-bar button {
        padding: 0 8px
    }
}

.world-canvas.is-exporting canvas {
    object-fit: contain;
    background: #0b1a22
}

.world-canvas.is-flying {
    touch-action: none;
    cursor: grab
}

.world-canvas.is-flying:active {
    cursor: grabbing
}

.replay-free {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: auto;
    background: #163441d9;
    border: 1px solid #a4c1cb2e;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    margin: 0;
    padding: 8px 10px;
    display: flex;
    position: absolute;
    top: 130px;
    right: 47px
}

.replay-free .eyebrow {
    letter-spacing: 1.8px;
    color: var(--accent);
    margin-right: 2px;
    font-size: 9px
}

.replay-free button {
    letter-spacing: 1px;
    color: #fff;
    white-space: nowrap;
    background: #ffffff12;
    border: 1px solid #effaff30;
    border-radius: 4px;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    display: flex
}

.replay-free button:hover {
    background: #fff3
}

.replay-free button[aria-pressed=true] {
    background: var(--accent);
    color: #17313b;
    border-color: var(--accent)
}

@media (max-width: 760px) {
    .replay-free {
        padding:6px;
        top: 99px;
        right: 16px
    }

    .replay-free .eyebrow {
        display: none
    }

    .replay-free button {
        height: 32px;
        padding: 0 8px;
        font-size: 9px
    }
}

@media (max-height: 500px) {
    .replay-free {
        top:12px;
        right: 16px
    }
}

.replay-zoom {
    border-right: 1px solid #effaff26;
    align-items: center;
    gap: 4px;
    margin-right: 2px;
    padding-right: 4px;
    display: flex
}

.replay-free .replay-zoom button {
    justify-content: center;
    width: 34px;
    padding: 0
}

.replay-zoom output {
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    color: #fff;
    min-width: 44px;
    font-size: 11px;
    font-weight: 600
}

@media (max-width: 760px) {
    .replay-free {
        flex-wrap:wrap;
        justify-content: flex-end;
        max-width: calc(100% - 32px)
    }

    .replay-free .replay-zoom button {
        width: 32px
    }

    .replay-zoom output {
        min-width: 38px;
        font-size: 10px
    }
}

.replay-fly {
    pointer-events: none;
    --tc-scale: 1;
    --tc-side-left: 16px;
    --tc-bottom: 12px;
    position: absolute;
    inset: 0
}

.replay-fly .replay-fly-stick {
    pointer-events: auto;
    touch-action: none;
    width: 112px;
    height: 112px;
    bottom: 150px;
    left: 24px
}

.replay-fly .tc-knob {
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px
}

.replay-fly-lift {
    pointer-events: auto;
    touch-action: none;
    flex-direction: column;
    gap: 10px;
    display: flex;
    position: absolute;
    bottom: 150px;
    right: 24px
}

.replay-fly-lift button {
    color: #f7f6ef;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background: #10141866;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 54px;
    height: 54px;
    display: grid;
    box-shadow: inset 0 0 0 2px #f7f6efcc
}

.replay-fly-lift button:active {
    color: #101418;
    background: #f7f6ef
}

@media (max-height: 500px) {
    .replay-fly .replay-fly-stick {
        width:100px;
        height: 100px;
        bottom: 84px
    }

    .replay-fly-lift {
        flex-direction: row;
        bottom: 84px
    }
}

.replay-edit {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: auto;
    background: #163441d9;
    border: 1px solid #a4c1cb2e;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 14px;
    display: flex;
    position: absolute;
    top: 130px;
    left: 47px
}

.replay-edit .eyebrow {
    letter-spacing: 1.8px;
    color: var(--accent);
    font-size: 9px
}

.replay-edit strong {
    font-family: var(--display);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 400
}

.replay-edit button {
    color: #fff;
    background: #ffffff12;
    border: 1px solid #effaff30;
    border-radius: 4px;
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid
}

.replay-edit button:hover {
    background: #fff3
}

@media (max-width: 760px) {
    .replay-edit {
        top:99px;
        left: 16px
    }
}

@media (max-height: 500px) {
    .replay-edit {
        top:12px;
        left: 16px
    }
}

.clip-panel {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: auto;
    background: #163441e6;
    border: 1px solid #a4c1cb2e;
    flex-direction: column;
    gap: 12px;
    width: min(540px,92%);
    padding: 22px 24px;
    display: flex;
    position: absolute;
    bottom: 112px;
    left: 50%;
    transform: translate(-50%)
}

.clip-panel .eyebrow {
    color: var(--accent);
    letter-spacing: 1.8px;
    font-size: 9px
}

.clip-panel p {
    color: #d1dce1;
    margin: 0;
    font-size: 11px;
    line-height: 1.6
}

.clip-panel .text-button {
    padding: 6px 0;
    font-size: 12px
}

.clip-progress strong {
    font-family: var(--display);
    font-variant-numeric: tabular-nums;
    font-size: 34px;
    font-weight: 700
}

.clip-bar {
    background: #e4f8ff41;
    height: 3px
}

.clip-bar>span {
    background: var(--accent);
    height: 100%;
    transition: width .2s;
    display: block
}

.clip-choice {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.clip-choice button {
    letter-spacing: 1px;
    color: #fff;
    background: #ffffff12;
    border: 1px solid #effaff30;
    border-radius: 4px;
    flex: 1;
    min-width: 140px;
    height: 38px;
    font-size: 10px;
    font-weight: 600
}

.clip-choice button.is-on,.replay-bar button.is-on {
    background: var(--accent);
    color: #17313b;
    border-color: var(--accent)
}

.clip-actions {
    align-items: center;
    gap: 12px;
    display: flex
}

.clip-actions .primary-button {
    color: #17313b;
    flex: 1;
    width: auto;
    height: 48px;
    font-size: 12px;
    text-decoration: none
}

@media (max-width: 760px) {
    .clip-panel {
        padding:16px;
        bottom: 84px
    }

    .clip-progress strong {
        font-size: 26px
    }
}

@media (max-height: 520px) {
    .clip-panel.clip-options {
        max-height:calc(100dvh - 136px);
        overflow: auto
    }
}

.live-chip {
    letter-spacing: 1.6px;
    color: #f0f5f2;
    text-shadow: 0 2px 10px #214b5d66;
    flex-direction: column;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    position: absolute;
    top: 176px;
    left: 47px
}

.live-chip>span {
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.live-chip small {
    letter-spacing: .8px;
    opacity: .75;
    max-width: 260px;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.5
}

.live-dot.connecting,.live-dot.error {
    background: #ffd166;
    box-shadow: 0 0 9px #ffd16699
}

.live-dot.full,.live-dot.off,.live-dot.replaced {
    box-shadow: none;
    background: #fff6
}

@media (max-width: 760px) {
    .live-chip {
        font-size:8px;
        top: 138px;
        left: 23px
    }

    .live-chip small {
        display: none
    }
}

.title-screen .mountain-stats {
    margin: 26px 0 0
}

.title-screen .start-caption {
    margin-top: 12px
}

.loading-panel {
    max-width: 372px;
    margin: 0;
    display: block
}

.loading-row {
    letter-spacing: 1.6px;
    justify-content: space-between;
    margin-bottom: 9px;
    font-size: 10px;
    font-weight: 600;
    display: flex
}

.loading-bar {
    background: #e3f3f96e;
    height: 4px
}

.loading-bar>span {
    background: var(--accent);
    height: 100%;
    transition: width .25s;
    display: block
}

.loading-tip {
    color: #dfe9ecc4;
    align-items: flex-start;
    gap: 10px;
    min-height: 40px;
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.6;
    display: flex
}

.loading-tip kbd {
    flex-shrink: 0;
    margin-top: 2px
}

.mode-cards {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    display: grid
}

.mode-card {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-align: left;
    color: inherit;
    cursor: pointer;
    background: #15334199;
    border: 1px solid #a4c1cb2e;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 20px;
    transition: transform .18s,border-color .18s,background .18s;
    display: flex
}

.mode-card:hover:not(:disabled) {
    border-color: var(--accent);
    background: #173a48b3;
    transform: translateY(-3px)
}

.mode-card:disabled {
    opacity: .55;
    cursor: default
}

.mode-card .mode-pop {
    letter-spacing: 1.5px;
    color: var(--accent);
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex
}

.mode-card b {
    font-family: var(--display);
    letter-spacing: .3px;
    font-size: 27px;
    font-style: italic;
    font-weight: 800;
    line-height: 1
}

.mode-card small {
    color: #dfe9ecc4;
    font-size: 11px;
    line-height: 1.55
}

.rider-name {
    letter-spacing: 1.6px;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    font-size: 10px;
    font-weight: 600;
    display: flex
}

.rider-name input {
    color: #fff;
    max-width: 220px;
    height: 36px;
    font: inherit;
    letter-spacing: .4px;
    background: #15334199;
    border: 1px solid #a4c1cb2e;
    flex: 1;
    padding: 0 12px;
    font-size: 13px
}

.rider-name input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px
}

.rider-name b {
    letter-spacing: .3px;
    font-size: 13px
}

@media (max-width: 760px) {
    .mode-cards {
        grid-template-columns:1fr;
        gap: 8px
    }

    .mode-card {
        padding: 14px
    }

    .mode-card b {
        font-size: 22px
    }

    .title-screen .mountain-stats {
        margin-top: 18px
    }
}

.loading-bar.is-indeterminate {
    position: relative;
    overflow: hidden
}

.loading-bar.is-indeterminate>span {
    width: 34%;
    animation: 1.4s ease-in-out infinite loading-sweep;
    position: absolute;
    top: 0;
    left: 0
}

@keyframes loading-sweep {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(300%)
    }
}

.live-roster {
    text-shadow: 0 2px 10px #214b5d66;
    color: #f0f5f2;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    max-width: 280px;
    display: flex;
    position: absolute;
    top: 200px;
    right: 47px
}

.roster-head {
    letter-spacing: 1.6px;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex
}

.live-roster ul {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.live-roster li {
    align-items: baseline;
    gap: 10px;
    font-size: 11px;
    display: flex
}

.live-roster li b {
    font-weight: 600
}

.live-roster li span {
    letter-spacing: 1.3px;
    opacity: .7;
    font-size: 8px
}

.live-roster li em {
    font-variant-numeric: tabular-nums;
    color: #ffd9a3;
    font-size: 11px;
    font-style: normal
}

.live-roster li .crown {
    color: #f5c542;
    filter: drop-shadow(0 0 4px #f5c54299);
    align-self: center
}

.live-roster li.is-record span {
    color: #ffd166;
    opacity: 1;
    font-weight: 700;
    animation: .9s ease-in-out infinite alternate record-pulse
}

@keyframes record-pulse {
    0% {
        opacity: .55
    }

    to {
        opacity: 1
    }
}

.mode-card .mode-names {
    opacity: .6;
    font-size: 10px
}

@media (max-height: 760px) and (min-width:761px) {
    .live-roster {
        top:160px
    }
}

@media (max-width: 760px) {
    .live-roster {
        max-width:180px;
        top: 150px;
        right: 23px
    }

    .live-roster li span {
        display: none
    }

    .roster-head {
        font-size: 8px
    }
}

.trick-feedback,.replay-notice {
    width: min(440px,100% - 48px)
}

.trick-readout {
    overflow-wrap: anywhere;
    min-width: 0
}

.trick-feedback .trick-readout strong,.replay-notice .trick-readout strong {
    max-width: 100%;
    margin: 5px 0;
    font-size: clamp(25px,3.1vw,38px);
    line-height: 1.08;
    display: block
}

.trick-meta,.trick-detail {
    letter-spacing: 1px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    display: block
}

.trick-meta {
    color: #ffb78e
}

.trick-detail {
    color: #e2eef3;
    letter-spacing: .6px
}

.trick-trail {
    color: #fff;
    text-shadow: 0 1px 4px #102633;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    display: block;
    overflow: hidden
}

.score-factors {
    letter-spacing: .4px;
    text-shadow: none;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin: 7px 0;
    font-size: 9px;
    font-weight: 700;
    display: flex
}

.score-factors span {
    color: #ffe0b9;
    background: #102a38c9;
    border: 1px solid #e6f5ff30;
    border-radius: 3px;
    padding: 3px 6px
}

.scoring-help {
    border-top: 1px solid #c4d8dc26;
    margin: 20px 0;
    padding-top: 16px
}

.scoring-help>summary {
    cursor: pointer;
    color: #f7f6ef;
    font: 700 15px var(--body);
    padding: 0 0 12px
}

.scoring-guide {
    text-align: left;
    font-size: 14px;
    line-height: 1.5
}

.scoring-guide p {
    color: #e9f1f4;
    margin: 8px 0 0;
    font-size: 14px
}

.scoring-guide b {
    color: #fff
}

.scoring-steps {
    gap: 10px;
    margin: 14px 0;
    padding: 0;
    list-style: none;
    display: grid
}

.scoring-step {
    background: #0b263280;
    border: 1px solid #c4d8dc30;
    border-radius: 10px;
    padding: 12px 14px
}

.scoring-step h3 {
    font: 400 21px/1.1 "Knewave",var(--display);
    color: #f7f6ef;
    letter-spacing: .02em;
    margin: 0
}

.scoring-step .scoring-ladder {
    margin: 10px 0 2px
}

.scoring-guide .scoring-lead {
    color: #fff;
    font-weight: 600
}

.scoring-ladder {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin: 14px 0;
    display: grid
}

.scoring-ladder>div {
    background: #0b263280;
    border: 1px solid #c4d8dc30;
    border-radius: 5px;
    flex-direction: column;
    gap: 4px;
    padding: 12px 8px;
    display: flex
}

.scoring-ladder span {
    letter-spacing: 1px;
    color: #f7f6ef;
    font-size: 13px;
    font-weight: 700
}

.scoring-ladder strong {
    font: 700 32px/1 var(--display);
    color: #fff
}

.scoring-ladder small {
    color: #b1ccd7;
    font-size: 10px
}

.grab-ladder {
    flex-wrap: wrap;
    gap: 7px;
    display: flex
}

.grab-ladder span {
    color: #dce8ed;
    border: 1px solid #ffb78e40;
    border-radius: 4px;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    font-size: 10px;
    display: flex
}

.grab-ladder b {
    color: #ffb78e
}

.score-example {
    background: #123c4480;
    border-left: 3px solid #f7f6ef;
    border-radius: 0 10px 10px 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 7px;
    margin: 15px 0;
    padding: 12px 14px;
    display: flex
}

.score-example>span {
    letter-spacing: .6px;
    color: #f7f6ef;
    font-size: 13px;
    font-weight: 700
}

.score-example>b {
    color: #fff;
    font-size: 19px
}

.score-example>small {
    color: #e9f1f4;
    flex-basis: 100%;
    font-size: 14px
}

.scoring-extras summary {
    cursor: pointer;
    color: #f7f6ef;
    font-size: 14px;
    font-weight: 700
}

.scoring-extras ul {
    margin: 10px 0;
    padding-left: 18px
}

.scoring-extras li {
    color: #e9f1f4;
    margin: 8px 0;
    font-size: 14px
}

.info-main .scoring-guide p {
    font-size: 16px
}

.info-main .scoring-extras li {
    font-size: 15px
}

.trick-history {
    pointer-events: auto;
    text-align: left;
    max-width: 400px;
    margin: 9px auto 0;
    font-size: 11px;
    font-style: normal;
    position: relative
}

.trick-history summary {
    text-align: center;
    cursor: pointer;
    color: #d2e6ef;
    letter-spacing: .7px;
    font-size: 10px
}

.trick-history ol {
    background: #102633ee;
    border: 1px solid #c3e6ee30;
    border-radius: 8px;
    max-height: 180px;
    margin: 8px 0;
    padding: 14px 18px 14px 36px;
    line-height: 1.7;
    overflow: auto
}

.replay-title small {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(430px,100vw - 48px);
    overflow: hidden
}

@media (min-width: 900px) and (min-height:700px) {
    .trick-feedback,.replay-notice {
        text-align:left;
        width: 370px;
        top: auto;
        bottom: 270px;
        left: 47px;
        transform: none
    }

    .trick-feedback>.eyebrow {
        justify-content: flex-start
    }

    .trick-history summary {
        text-align: left
    }
}

@media (max-width: 600px) {
    .trick-feedback,.replay-notice {
        width:min(340px,100% - 40px);
        left: 50%
    }

    .trick-meta,.trick-detail {
        font-size: 9px
    }

    .replay-bar {
        grid-template-columns: 36px repeat(3,minmax(0,1fr)) 36px 36px;
        display: grid
    }

    .replay-bar input[type=range] {
        grid-area: 1/2/auto/6;
        width: 100%;
        min-width: 0;
        margin: 0
    }

    .replay-bar .replay-time {
        grid-row: 1
    }

    .replay-bar .replay-time:first-of-type {
        grid-column: 1
    }

    .replay-bar .replay-time:nth-of-type(2) {
        text-align: right;
        grid-column: 6
    }

    .replay-bar button {
        grid-row: 2;
        justify-content: center;
        min-width: 0;
        padding: 0 6px
    }

    .replay-bar button:first-of-type {
        grid-column: 1
    }

    .replay-bar button:nth-of-type(2) {
        grid-column: 2
    }

    .replay-bar button:nth-of-type(3) {
        grid-column: 3
    }

    .replay-bar button:nth-of-type(4) {
        grid-column: 4
    }

    .replay-bar button:nth-of-type(5) {
        grid-column: 5
    }

    .replay-bar button:nth-of-type(6) {
        grid-column: 6
    }
}

.is-finished .cinematic-shade {
    background: linear-gradient(90deg,#07121c08 20%,#07121c30 43%,#07121ce8 60%,#07121cf5)
}

.is-finished .run-results {
    width: 46%;
    max-width: 680px;
    max-height: calc(100dvh - 100px);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: 0 0;
    border: 0;
    padding: 22px 24px;
    animation: .45s ease-out interview-score;
    top: 50%;
    left: auto;
    right: 3.5%;
    transform: translateY(-48%)
}

.is-finished .results-title h1 {
    font-size: clamp(35px,4vw,59px)
}

.is-finished .results-main {
    grid-template-columns: 1fr 1.05fr;
    gap: 24px
}

.is-finished .results-total>strong {
    font-size: clamp(65px,7vw,100px)
}

.is-finished .results-overline>span:last-child {
    display: none
}

.is-finished .results-online-actions {
    gap: 10px
}

@keyframes interview-score {
    0% {
        opacity: 0;
        translate: 0 10px
    }

    to {
        opacity: 1;
        translate: 0
    }
}

@media (min-width: 761px) and (max-width:1100px) {
    .is-finished .run-results {
        width:48%;
        padding: 20px 12px;
        right: 2%
    }

    .is-finished .results-main {
        gap: 15px
    }

    .is-finished .results-title h1 {
        font-size: 36px
    }

    .is-finished .result-medal {
        padding: 7px;
        font-size: 8px
    }

    .is-finished .score-ledger small {
        font-size: 8px
    }

    .is-finished .results-total>strong {
        font-size: 72px
    }
}

@media (max-width: 760px),(max-aspect-ratio:5/4) {
    .is-finished .cinematic-shade {
        background:linear-gradient(#0000 12%,#07121c20 33%,#07121cf2 45%,#07121c 70%)
    }

    .is-finished .run-results {
        width: 100%;
        max-width: none;
        max-height: 58%;
        padding: 12px 22px 24px;
        animation: none;
        inset: 42% 0 0;
        transform: none
    }

    .is-finished .results-title {
        margin: 8px 0 12px
    }

    .is-finished .results-title h1 {
        font-size: 37px
    }

    .is-finished .results-main {
        grid-template-columns: .9fr 1.1fr;
        gap: 18px
    }

    .is-finished .results-total>strong {
        font-size: 66px
    }

    .is-finished .score-ledger small {
        display: none
    }

    .is-finished .score-ledger span {
        font-size: 10px
    }

    .is-finished .score-ledger b {
        font-size: 21px
    }

    .is-finished .run-metrics {
        margin-top: 12px;
        padding-top: 12px
    }
}

@media (prefers-reduced-motion:reduce) {
    .is-finished .run-results {
        animation: none
    }
}

.music-player {
    z-index: 9;
    --track-color: #eda26d;
    --pk-font: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"DM Sans",sans-serif;
    --pk-label: #f5f5f7;
    --pk-label2: #ebebf599;
    --pk-label3: #ebebf55c;
    --pk-fill: #7676803d;
    --pk-fill2: #7676805c;
    --pk-line: #ffffff1a;
    --pk-group: #1c1c1e;
    --pk-tint: #ff9d6e;
    --pk-red: #ff453a;
    --pk-gold: #ffd60a;
    width: 270px;
    font-size: 12px;
    position: absolute;
    bottom: 35px;
    right: 46px
}

.music-player[inert] {
    visibility: hidden
}

.music-player button {
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-family: inherit;
    display: flex
}

.music-player input {
    accent-color: var(--track-color);
    cursor: pointer;
    min-width: 0
}

:is(.music-player input:focus-visible,.music-player a:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px
}

.music-player .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.music-tray {
    font-family: var(--pk-font);
    -webkit-font-smoothing: antialiased;
    background: linear-gradient(165deg,#f5f6f7,#e2e5e7 55%,#d5d9dc);
    border: 1px solid #ffffffd0;
    border-radius: 19px;
    align-items: center;
    gap: 8px;
    padding: 6px 7px 6px 6px;
    display: flex;
    position: relative;
    box-shadow: inset 0 1px #fff,inset 0 -1px #0000000f,0 10px 28px #06182a47,0 1px 3px #06182a26
}

.music-player.is-open .music-tray {
    display: none
}

.music-tray .music-open {
    min-width: 0;
    height: 46px;
    color: var(--pk-label);
    text-align: left;
    background: #0c0d0f;
    border-radius: 13px;
    flex: 1;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 12px 0 7px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px #0000005c,inset 0 0 0 1px #ffffff0f
}

.music-tray .music-open:hover {
    background: #15171a
}

.tray-text {
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    display: flex
}

.tray-text b {
    letter-spacing: -.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden
}

.tray-text small {
    color: var(--pk-label2);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10.5px;
    overflow: hidden
}

.tray-progress {
    background: #ffffff24;
    border-radius: 1px;
    height: 2px;
    position: absolute;
    bottom: 5px;
    left: 46px;
    right: 12px;
    overflow: hidden
}

.tray-wheel {
    background: radial-gradient(circle at 50% 30%,#fdfdfd,#eef0f1 72%);
    border-radius: 50%;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    position: relative;
    box-shadow: 0 1px 1px #00000014,0 3px 8px #0000000f,inset 0 0 0 1px #0000000b
}

.music-tray .tray-play {
    color: #5c6267;
    background: linear-gradient(#e8eaec,#f7f8f9);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 14px;
    left: 14px;
    box-shadow: inset 0 0 0 1px #0000000f,0 1px #fff
}

.music-tray .tray-previous,.music-tray .tray-next {
    color: #8b9095;
    width: 14px;
    height: 48px;
    position: absolute;
    top: 0
}

.music-tray .tray-previous {
    border-radius: 24px 0 0 24px;
    padding-left: 2px;
    left: 0
}

.music-tray .tray-next {
    border-radius: 0 24px 24px 0;
    padding-right: 2px;
    right: 0
}

.music-tray .tray-play:hover,.music-tray .tray-previous:hover,.music-tray .tray-next:hover {
    color: #2f3438
}

.music-tray .tray-chat {
    background: var(--pk-red);
    color: #fff;
    border-radius: 11px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    top: -8px;
    right: -7px;
    box-shadow: 0 0 0 2px #f2f3f4,0 2px 6px #0000004d
}

.music-tray .tray-chat:hover {
    background: #ff6259
}

.tray-progress i {
    background: var(--track-color);
    height: 100%;
    transition: width .3s linear;
    display: block
}

.top-pocket {
    anchor-name: --pocket;
    color: #f7f6ef;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #101e27b8;
    border: 1px solid #ffffff4a;
    border-radius: 6px;
    place-items: center;
    width: 40px;
    min-height: 40px;
    padding: 0;
    display: grid;
    position: relative
}

.top-pocket:hover,.top-pocket[aria-expanded=true] {
    background: #263c47;
    border-color: #f7f6ef
}

.top-pocket-bars {
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    display: flex
}

.top-pocket-bars i {
    transform-origin: 50% 100%;
    background: currentColor;
    border-radius: 1.5px;
    width: 3px;
    height: 16px;
    animation: 1.2s ease-in-out infinite alternate top-pocket-bar;
    transform: scaleY(.32)
}

.top-pocket-bars i:nth-child(2) {
    animation-delay: -.45s
}

.top-pocket-bars i:nth-child(3) {
    animation-delay: -.8s
}

.top-pocket-bars i:nth-child(4) {
    animation-delay: -.25s
}

@keyframes top-pocket-bar {
    to {
        transform: scaleY(1)
    }
}

@media (max-width: 760px) {
    .top-pocket {
        width:38px;
        min-height: 38px
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .top-pocket {
        width:34px;
        min-height: 34px
    }
}

@media (prefers-reduced-motion:reduce) {
    .top-pocket-bars i {
        animation: none;
        transform: scaleY(.56)
    }

    .top-pocket-bars i:nth-child(2n) {
        transform: scaleY(.88)
    }
}

.pocket-device {
    transform-origin: 50% 100%;
    scrollbar-width: none;
    width: 100%;
    max-height: calc(100dvh - 90px);
    font-family: var(--pk-font);
    -webkit-font-smoothing: antialiased;
    background: linear-gradient(165deg,#f5f6f7,#e2e5e7 55%,#d5d9dc);
    border: 1px solid #ffffffd0;
    border-radius: 30px;
    padding: 10px 10px 0;
    animation: .26s cubic-bezier(.2,.8,.3,1) pocket-in;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: auto;
    box-shadow: inset 0 1px #fff,inset 0 -1px #0000000f,0 24px 60px #06182a5c,0 2px 6px #06182a24
}

.pocket-device button:focus-visible {
    outline: 2px solid var(--pk-tint);
    outline-offset: 1px
}

.pocket-screen {
    isolation: isolate;
    height: 232px;
    color: var(--pk-label);
    background: #0c0d0f;
    border-radius: 20px;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px #0000005c,inset 0 0 0 1px #ffffff0f
}

.music-player.is-chat .pocket-screen,.music-player.is-riders .pocket-screen {
    height: 304px
}

.pocket-top {
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
    padding: 9px 9px 7px;
    display: flex
}

.pocket-top-title {
    letter-spacing: -.01em;
    flex: 1;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    font-size: 13px;
    font-weight: 600;
    display: flex
}

.pocket-device .pocket-close {
    background: var(--pk-fill);
    width: 24px;
    height: 24px;
    color: var(--pk-label2);
    border-radius: 50%;
    flex-shrink: 0
}

.pocket-device .pocket-close:hover {
    color: var(--pk-label);
    background: var(--pk-fill2)
}

.pocket-segmented {
    background: var(--pk-fill);
    border-radius: 9px;
    flex: 1;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    min-width: 0;
    padding: 2px;
    display: grid;
    position: relative
}

.pocket-segmented:before {
    content: "";
    width: calc((100% - 4px) / var(--n,3));
    transform: translateX(calc(var(--i,0) * 100%));
    background: #636366;
    border-radius: 7px;
    transition: transform .28s cubic-bezier(.3,.8,.3,1);
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    box-shadow: 0 3px 8px #0000001f,0 3px 1px #0000000a
}

.pocket-device .pocket-segmented button {
    height: 26px;
    color: var(--pk-label2);
    white-space: nowrap;
    border-radius: 7px;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: color .2s;
    position: relative
}

.pocket-device .pocket-segmented button:hover,.pocket-device .pocket-segmented button[aria-pressed=true] {
    color: var(--pk-label)
}

.pocket-segmented small {
    color: var(--pk-label2);
    font-size: 11px;
    font-weight: 500
}

.pocket-badge {
    background: var(--pk-red);
    color: #fff;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex
}

.pocket-nav {
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 12px 6px 5px;
    display: flex
}

.pocket-channels {
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0 10px 4px;
    display: flex
}

.pocket-device .pocket-channels button,.pocket-channels>span {
    height: 24px;
    color: var(--pk-label2);
    white-space: nowrap;
    border-radius: 12px;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    display: inline-flex
}

.pocket-device .pocket-channels button:hover {
    color: var(--pk-label)
}

.pocket-device .pocket-channels button[aria-pressed=true] {
    background: var(--pk-fill2);
    color: var(--pk-label)
}

.pocket-channels>span {
    color: var(--pk-label);
    padding-left: 4px
}

.pocket-channels small {
    color: var(--pk-label2);
    font-size: 11px;
    font-weight: 500
}

.pocket-channels+.pocket-chat-log {
    margin-top: 0;
    -webkit-mask-image: linear-gradient(#0000,#000 8px);
    mask-image: linear-gradient(#0000,#000 8px)
}

.pocket-nav>span {
    min-width: 0;
    color: var(--pk-label2);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden
}

.pocket-device .nav-back {
    height: 26px;
    color: var(--pk-tint);
    white-space: nowrap;
    padding: 0 4px 0 0;
    font-size: 13px
}

.pocket-device .nav-back:hover {
    opacity: .75
}

.pocket-now {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 4px 14px 8px;
    display: flex;
    position: relative
}

.pocket-now:before {
    content: "";
    z-index: -1;
    background: radial-gradient(closest-side,var(--track-color),transparent);
    opacity: .3;
    pointer-events: none;
    height: 220px;
    position: absolute;
    top: -70px;
    left: -30%;
    right: -30%
}

.now-head {
    align-items: center;
    gap: 12px;
    display: flex
}

.mixtape-art {
    background: linear-gradient(155deg,var(--track-color) 5%,#476974 94%);
    border-radius: 13px;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 22px #00000080
}

.mixtape-art span {
    font: 700 27px var(--display);
    color: #14313c;
    position: absolute;
    top: 6px;
    left: 9px
}

.mixtape-art:before,.mixtape-art:after {
    content: "";
    clip-path: polygon(0 100%,55% 0,100% 100%);
    background: #edf2e0;
    width: 110%;
    height: 63%;
    position: absolute;
    bottom: -6%;
    left: -16%;
    transform: rotate(-6deg)
}

.mixtape-art:after {
    background: #789696;
    width: 80%;
    height: 50%;
    bottom: -3%;
    left: 38%
}

.mixtape-art.is-mini {
    border-radius: 7px;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 6px #0006
}

.mixtape-art.is-mini span {
    font-size: 11px;
    top: 2px;
    left: 4px
}

.now-meta {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.now-meta small {
    color: var(--track-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden
}

.now-meta strong {
    letter-spacing: -.015em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    overflow: hidden
}

.now-meta>span {
    color: var(--pk-label2);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    overflow: hidden
}

.now-seek {
    margin-top: 16px
}

.pocket-time {
    color: var(--pk-label3);
    font-variant-numeric: tabular-nums;
    grid-template-columns: 1fr auto 1fr;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 500;
    display: grid
}

.pocket-time span:nth-child(2) {
    color: var(--pk-label2)
}

.pocket-time span:last-child {
    text-align: right
}

.pocket-volume {
    color: var(--pk-label2);
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    display: flex
}

.now-foot {
    color: var(--pk-label3);
    justify-content: space-between;
    align-items: center;
    margin: auto -6px 0;
    font-size: 11px;
    display: flex
}

.pocket-device .now-foot button {
    height: 26px;
    color: var(--pk-label2);
    border-radius: 13px;
    gap: 5px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500
}

.pocket-device .now-foot button:hover {
    color: var(--pk-label);
    background: var(--pk-fill)
}

.pocket-range {
    -webkit-appearance: none;
    appearance: none;
    --p: 0%;
    background: 0 0;
    width: 100%;
    height: 16px;
    margin: 0;
    display: block
}

.pocket-range::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,#f5f5f7e6 var(--p),#ffffff2e var(--p));
    border-radius: 2px;
    height: 4px
}

.pocket-range::-moz-range-track {
    background: #ffffff2e;
    border-radius: 2px;
    height: 4px
}

.pocket-range::-moz-range-progress {
    background: #f5f5f7e6;
    border-radius: 2px;
    height: 4px
}

.pocket-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
    background: #fff;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    margin-top: -3.5px;
    transition: opacity .15s;
    box-shadow: 0 1px 4px #0008
}

.pocket-range::-moz-range-thumb {
    opacity: 0;
    background: #fff;
    border: 0;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    transition: opacity .15s;
    box-shadow: 0 1px 4px #0008
}

.pocket-range:hover::-webkit-slider-thumb {
    opacity: 1
}

.pocket-range:focus-visible::-webkit-slider-thumb {
    opacity: 1
}

.pocket-range:active::-webkit-slider-thumb {
    opacity: 1
}

.pocket-range:hover::-moz-range-thumb {
    opacity: 1
}

.pocket-range:focus-visible::-moz-range-thumb {
    opacity: 1
}

.pocket-range:active::-moz-range-thumb {
    opacity: 1
}

.pocket-range:disabled {
    cursor: default;
    opacity: .55
}

.pocket-list,.pocket-riders {
    background: var(--pk-group);
    scrollbar-width: none;
    overscroll-behavior: contain;
    --inset: 56px;
    border-radius: 12px;
    flex: 1;
    min-height: 0;
    margin: 0 8px 8px;
    padding: 0;
    list-style: none;
    overflow-y: auto
}

.pocket-list li,.pocket-riders li {
    position: relative
}

.pocket-list li+li:before,.pocket-riders li+li:before {
    content: "";
    z-index: 1;
    top: 0;
    left: var(--inset);
    background: var(--pk-line);
    pointer-events: none;
    height: 1px;
    position: absolute;
    right: 0
}

.pocket-device .pocket-list button {
    text-align: left;
    width: 100%;
    min-height: 48px;
    color: var(--pk-label);
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 10px
}

.pocket-device .pocket-list button:hover,.pocket-device .rider-row:hover,.pocket-device .rider-row[aria-expanded=true] {
    background: #ffffff0d
}

.row-text {
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
    display: flex
}

.row-text b {
    letter-spacing: -.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden
}

.row-text small {
    color: var(--pk-label2);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    overflow: hidden
}

.row-chevron {
    color: var(--pk-label3)
}

.pocket-list [aria-pressed=true] b,.pocket-list [aria-current] b {
    color: var(--track-color)
}

.pocket-list.is-songs {
    --inset: 40px
}

.pocket-device .pocket-list.is-songs button {
    min-height: 38px;
    padding-top: 4px;
    padding-bottom: 4px
}

.row-number {
    text-align: center;
    width: 20px;
    color: var(--pk-label3);
    font-variant-numeric: tabular-nums;
    font-size: 12px
}

.equalizer {
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 20px;
    height: 14px;
    display: flex
}

.equalizer i {
    background: var(--track-color);
    border-radius: 1px;
    width: 2.5px;
    height: 4px
}

.is-sounding .equalizer i {
    animation: .7s ease-in-out infinite alternate eq-bar
}

.is-sounding .equalizer i:nth-child(2) {
    animation-delay: -.3s
}

.is-sounding .equalizer i:nth-child(3) {
    animation-delay: -.5s
}

.album-cover {
    background: linear-gradient(155deg,var(--album-color),#233e54);
    color: #102d36;
    width: 36px;
    height: 36px;
    font: italic 800 22px/.95 var(--display);
    isolation: isolate;
    border-radius: 8px;
    flex: none;
    padding: 4px;
    position: relative;
    overflow: hidden
}

.album-cover:after,.album-cover i {
    content: "";
    z-index: -1;
    clip-path: polygon(0 94%,40% 42%,59% 68%,82% 35%,100% 75%,100% 100%,0 100%);
    background: #173743;
    display: block;
    position: absolute;
    inset: 0
}

.album-cover i {
    background: #f4f1df66;
    transform: translate(16px,10px)
}

.music-credits {
    min-height: 0;
    color: var(--pk-label2);
    -webkit-user-select: text;
    user-select: text;
    scrollbar-width: none;
    flex: 1;
    padding: 0 14px 12px;
    font-size: 11px;
    line-height: 1.5;
    overflow-y: auto
}

.music-credits p {
    margin: 0 0 9px
}

.music-credits a {
    color: var(--pk-tint);
    text-decoration: none
}

.music-credits a:hover {
    text-decoration: underline
}

.music-credits p>a:first-child {
    color: var(--pk-label);
    font-weight: 600
}

.music-credits span {
    color: var(--pk-label3);
    font-size: 10px;
    display: block
}

.music-credits span.is-inline {
    font-size: inherit;
    color: inherit;
    display: inline
}

.pocket-chat-log {
    overflow-anchor: none;
    scrollbar-width: none;
    overscroll-behavior: contain;
    -webkit-user-select: text;
    user-select: text;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: -8px 0 0;
    padding: 10px 10px 8px;
    list-style: none;
    display: flex;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(#0000,#000 12px);
    mask-image: linear-gradient(#0000,#000 12px)
}

.pocket-chat-log>li {
    flex-direction: column;
    flex-shrink: 0;
    max-width: 100%;
    display: flex
}

.msg {
    align-items: flex-start;
    margin-top: 2px
}

.msg.is-first {
    margin-top: 8px
}

.msg.is-me {
    align-items: flex-end
}

.pocket-device .msg-name {
    color: var(--pk-label2);
    margin: 0 0 2px 11px;
    font-size: 10px;
    font-weight: 500
}

.pocket-device .msg-name:hover,.pocket-device .msg-name[aria-expanded=true] {
    color: var(--pk-tint)
}

.bubble {
    overflow-wrap: anywhere;
    background: #2c2c2e;
    border-radius: 17px;
    max-width: 84%;
    padding: 6px 11px 7px;
    font-size: 12.5px;
    line-height: 1.3
}

.is-them.is-last .bubble {
    border-bottom-left-radius: 5px
}

.is-me .bubble {
    color: #101418;
    background: #f7f6ef
}

.is-me.is-last .bubble {
    border-bottom-right-radius: 5px
}

.bubble.is-emoji {
    background: 0 0;
    padding: 0 2px;
    font-size: 30px;
    line-height: 1.1
}

.msg-notice {
    text-align: center;
    max-width: 92%;
    color: var(--pk-label3);
    align-self: center;
    margin: 9px 0 1px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35
}

.pocket-chat-log>li.msg-notice {
    display: block
}

.msg-notice {
    color: var(--pk-gold)
}

.pocket-chat-log>li.chat-empty {
    text-align: center;
    color: var(--pk-label2);
    align-items: center;
    gap: 3px;
    margin: auto;
    padding: 0 14px;
    font-size: 11px;
    line-height: 1.4
}

.chat-empty b {
    color: var(--pk-label);
    font-size: 13px;
    font-weight: 600
}

.pocket-compose {
    border-top: 1px solid var(--pk-line);
    background: #141517;
    flex-direction: column;
    flex-shrink: 0;
    gap: 6px;
    padding: 7px 8px 9px;
    display: flex
}

.compose-quick {
    scrollbar-width: none;
    overscroll-behavior: contain;
    border: 0;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    overflow-x: auto
}

.compose-quick[data-more=true] {
    -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 26px),#0000);
    mask-image: linear-gradient(90deg,#000 calc(100% - 26px),#0000)
}

.pocket-device .compose-quick button {
    background: var(--pk-fill);
    height: 24px;
    color: var(--pk-label);
    white-space: nowrap;
    border-radius: 12px;
    flex-shrink: 0;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500
}

.pocket-device .compose-quick button:hover {
    background: var(--pk-fill2)
}

.compose-row {
    align-items: center;
    gap: 6px;
    display: flex
}

.pocket-device .compose-settings {
    background: var(--pk-fill);
    width: 30px;
    height: 30px;
    color: var(--pk-label2);
    border-radius: 50%;
    flex-shrink: 0
}

.pocket-device .compose-settings:hover {
    color: var(--pk-label);
    background: var(--pk-fill2)
}

.compose-field {
    flex: 1;
    align-items: center;
    min-width: 0;
    display: flex;
    position: relative
}

.compose-field input {
    min-width: 0;
    height: 30px;
    color: var(--pk-label);
    font: 13px var(--pk-font);
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    background: #0c0d0f;
    border: 1px solid #ffffff26;
    border-radius: 15px;
    outline: none;
    flex: 1;
    padding: 0 34px 0 12px
}

.compose-field input:focus-visible {
    outline: none
}

.compose-field input::placeholder {
    color: var(--pk-label3)
}

.compose-field input:focus {
    border-color: #ffffff4d
}

.pocket-device .compose-send {
    background: var(--pk-tint);
    color: #231208;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    transition: opacity .15s,transform .15s;
    position: absolute;
    right: 3px
}

.pocket-device .compose-send:disabled {
    opacity: 0;
    pointer-events: none;
    transform: scale(.6)
}

.chat-count {
    font-variant-numeric: tabular-nums;
    color: var(--pk-gold);
    font-size: 10px;
    position: absolute;
    right: 32px
}

.compose-row .chat-hint {
    color: var(--pk-label2);
    flex: 1;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    display: flex
}

.pocket-device .chat-hint button {
    color: var(--pk-tint);
    font-size: 11px
}

.pocket-settings {
    scrollbar-width: none;
    flex: 1;
    min-height: 0;
    padding: 0 10px 10px;
    overflow-y: auto
}

.settings-field {
    border: 0;
    min-width: 0;
    margin: 0;
    padding: 0
}

.settings-head {
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pk-label2);
    margin: 6px 0 5px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 500;
    display: block
}

legend.settings-head {
    float: left;
    width: 100%
}

.settings-field .pocket-segmented {
    clear: both
}

.pocket-device .pocket-settings .pocket-segmented button {
    font-size: 11px
}

.pocket-settings p.settings-head {
    margin-top: 14px
}

.settings-group {
    background: var(--pk-group);
    border-radius: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden
}

.settings-group li {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 4px 0 12px;
    font-size: 12px;
    display: flex
}

.settings-group li+li {
    box-shadow: inset 0 1px 0 var(--pk-line)
}

.settings-group span {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden
}

.pocket-device .settings-group button {
    height: 30px;
    color: var(--pk-tint);
    padding: 0 8px;
    font-size: 12px
}

.settings-empty {
    background: var(--pk-group);
    color: var(--pk-label3);
    border-radius: 10px;
    margin: 0;
    padding: 10px 12px;
    font-size: 12px
}

.settings-foot {
    color: var(--pk-label3);
    margin: 7px 6px 0;
    font-size: 10px;
    line-height: 1.4
}

.pocket-section {
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pk-label2);
    flex-shrink: 0;
    justify-content: space-between;
    margin: 0;
    padding: 1px 18px 6px;
    font-size: 10px;
    font-weight: 500;
    display: flex
}

.pocket-riders {
    --inset: 50px
}

.rider-row {
    text-align: left;
    width: 100%;
    min-height: 46px;
    color: var(--pk-label);
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    display: flex
}

.pocket-device button.rider-row {
    justify-content: flex-start;
    padding: 6px 12px 6px 10px
}

.pocket-avatar {
    background: var(--avatar);
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    box-shadow: inset 0 0 0 1px #ffffff26
}

.rider-text {
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
    display: flex
}

.rider-text b {
    letter-spacing: -.01em;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    display: flex
}

.rider-text b>span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.rider-text small {
    color: var(--pk-label2);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    overflow: hidden
}

.rider-row em {
    color: var(--pk-label2);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-style: normal;
    font-weight: 500
}

.pocket-riders .crown {
    color: var(--pk-gold);
    flex-shrink: 0
}

.pocket-riders .is-record small {
    color: var(--pk-gold)
}

.pocket-sheet {
    z-index: 3;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
    display: flex;
    position: absolute;
    inset: 0
}

.pocket-device .sheet-scrim {
    cursor: default;
    background: #000000a6;
    animation: .2s ease-out sheet-fade;
    position: absolute;
    inset: 0
}

.sheet-body {
    flex-direction: column;
    gap: 7px;
    animation: .26s cubic-bezier(.2,.8,.3,1) sheet-up;
    display: flex;
    position: relative
}

.sheet-group {
    background: #2c2c2e;
    border: 0;
    border-radius: 13px;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    overflow: hidden
}

.sheet-group legend {
    float: left;
    text-align: center;
    width: 100%;
    color: var(--pk-label2);
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden
}

.pocket-device .sheet-group button {
    height: 40px;
    color: var(--pk-tint);
    box-shadow: inset 0 1px 0 var(--pk-line);
    gap: 7px;
    font-size: 14px
}

.pocket-device .sheet-group button:hover,.pocket-device .sheet-cancel:hover {
    background: #3a3a3c
}

.pocket-device .sheet-group .is-destructive {
    color: var(--pk-red)
}

.pocket-device .sheet-cancel {
    height: 40px;
    color: var(--pk-tint);
    background: #2c2c2e;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 600
}

.pocket-wheel {
    color: #8b9095;
    background: radial-gradient(circle at 50% 30%,#fdfdfd,#eef0f1 72%);
    border-radius: 50%;
    width: 126px;
    height: 126px;
    margin: 15px auto 17px;
    position: relative;
    box-shadow: 0 1px 1px #00000014,0 5px 12px #0000000f,inset 0 0 0 1px #0000000b
}

.pocket-wheel>button,.pocket-wheel>span {
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    display: flex;
    position: absolute
}

.pocket-device .pocket-wheel>button:hover {
    color: #3b4045
}

.pocket-wheel .wheel-menu {
    letter-spacing: .08em;
    font-size: 9px;
    font-weight: 700;
    top: 2px;
    left: 43px
}

.pocket-wheel .wheel-previous {
    top: 43px;
    left: 2px
}

.pocket-wheel .wheel-next {
    top: 43px;
    right: 2px
}

.pocket-device .pocket-wheel .wheel-play {
    color: #5c6267;
    background: linear-gradient(#e8eaec,#f7f8f9);
    width: 44px;
    height: 44px;
    top: 41px;
    left: 41px;
    box-shadow: inset 0 0 0 1px #0000000f,0 1px #fff
}

.pocket-wheel .wheel-repeat {
    color: #a3a8ac;
    bottom: 2px;
    left: 43px
}

.pocket-wheel .wheel-repeat[aria-pressed=true] {
    color: #5c6267
}

.pocket-wheel.is-quick>button {
    text-align: center;
    white-space: normal;
    color: #80868b;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.1
}

.pocket-wheel .wheel-quick-0,.pocket-wheel .wheel-quick-3 {
    border-radius: 19px;
    width: 58px;
    height: 38px;
    left: 34px
}

.pocket-wheel .wheel-quick-0 {
    top: 2px
}

.pocket-wheel .wheel-quick-3 {
    bottom: 2px
}

.pocket-wheel .wheel-quick-1,.pocket-wheel .wheel-quick-2 {
    border-radius: 20px;
    width: 40px;
    height: 48px;
    top: 39px
}

.pocket-wheel .wheel-quick-1 {
    left: 1px
}

.pocket-wheel .wheel-quick-2 {
    right: 1px
}

.pocket-device .pocket-wheel.is-quick .wheel-play {
    color: var(--accent)
}

.pocket-device .pocket-wheel.is-quick .wheel-play:disabled {
    color: #a3a9ad;
    opacity: 1;
    cursor: default
}

.music-error {
    color: #eabda4;
    font: 11px/1.5 var(--pk-font);
    background: #193641;
    border: 1px solid #cb886956;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    padding: 10px;
    display: flex
}

.music-error button {
    flex-shrink: 0;
    width: 25px;
    height: 25px
}

.run-heading h2 {
    letter-spacing: .5px;
    font-size: 29px
}

.run-heading {
    opacity: .87
}

.speed-hud {
    bottom: 36px
}

.speed-hud>.eyebrow {
    letter-spacing: 1.3px;
    font-size: 8px
}

.speed-number {
    font-size: 80px
}

.run-time {
    margin-top: 13px
}

.map-panel {
    opacity: .86
}

.map-altitude {
    font-size: 25px
}

.lift-card {
    border-radius: 9px;
    width: 410px;
    bottom: 36px
}

.lift-card h3 {
    margin: 0 0 21px;
    font-size: 17px
}

.lift-meta {
    font-size: 10px
}

.fast-travel {
    border-radius: 4px;
    font-size: 10px
}

.help-card .primary-button {
    margin-top: 23px
}

.conditions {
    border-radius: 8px
}

.conditions div:last-child {
    border-bottom: 0
}

@keyframes pocket-in {
    0% {
        opacity: 0;
        transform: translateY(14px)scale(.9)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes eq-bar {
    to {
        height: 13px
    }
}

@keyframes sheet-up {
    0% {
        opacity: 0;
        transform: translateY(26px)
    }
}

@keyframes sheet-fade {
    0% {
        opacity: 0
    }
}

@media (max-width: 1050px) {
    .music-player {
        width:250px;
        bottom: 28px;
        right: 30px
    }

    .intro-panel h1 {
        font-size: clamp(76px,10vw,113px)
    }
}

@media (max-width: 760px) {
    .music-player {
        width:auto;
        bottom: 23px;
        right: 19px
    }

    .music-tray {
        border-radius: 17px;
        gap: 6px;
        padding: 5px
    }

    .music-tray .music-open {
        border-radius: 11px;
        flex: none;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0
    }

    .tray-text {
        display: none
    }

    .mixtape-art.is-mini {
        width: 30px;
        height: 30px
    }

    .tray-progress {
        bottom: 3px;
        left: 6px;
        right: 6px
    }

    .tray-wheel {
        width: 40px;
        height: 40px
    }

    .music-tray .tray-play {
        top: 10px;
        left: 10px
    }

    .music-tray .tray-previous,.music-tray .tray-next {
        display: none
    }

    .intro-panel h1 {
        font-size: 83px
    }

    .speed-hud {
        bottom: 147px
    }

    .speed-number {
        font-size: 68px
    }

    .run-heading h2 {
        font-size: 24px
    }

    .is-lift .music-player {
        bottom: 23px
    }

    .lift-card {
        bottom: 105px
    }

    .map-altitude {
        font-size: 21px
    }
}

@media (max-height: 630px) {
    .music-player {
        bottom:19px
    }

    .pocket-device {
        max-height: calc(100dvh - 40px)
    }

    .intro-panel h1 {
        font-size: 70px
    }

    .intro-panel {
        top: 21%
    }

    .intro-copy {
        margin-bottom: 17px
    }

    .speed-hud {
        bottom: 28px
    }

    .pocket-wheel {
        margin-top: 11px;
        margin-bottom: 11px
    }

    .is-playing .music-player {
        bottom: 115px
    }

    .is-playing .speed-hud {
        bottom: 120px
    }
}

@media (pointer: coarse) and (min-width:761px) {
    .is-playing .music-player {
        bottom:106px
    }
}

@media (max-width: 760px) {
    .is-playing .music-player {
        bottom:23px;
        left: 24px;
        right: auto
    }

    .is-lift .music-player {
        inset: 66px auto auto 24px
    }
}

@media (prefers-reduced-motion:reduce) {
    .pocket-device,.equalizer i,.sheet-body,.pocket-device .sheet-scrim {
        animation: none!important
    }

    .pocket-segmented:before {
        transition: none
    }
}

.intro-panel {
    width: 510px;
    max-width: 58vw
}

.intro-panel h1>span {
    white-space: nowrap
}

.intro-panel h1 {
    font-size: clamp(78px,8.6vw,134px)
}

@media (max-width: 760px) {
    .intro-panel {
        width:calc(100% - 48px);
        max-width: calc(100% - 48px)
    }

    .intro-panel h1 {
        font-size: clamp(62px,16vw,99px)
    }
}

@media (max-height: 680px) {
    .intro-panel h1 {
        margin:17px 0;
        font-size: clamp(60px,8vw,86px)
    }

    .intro-panel {
        top: 20%
    }
}

.help-card {
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.help-card h2,.help-card>.primary-button {
    flex-shrink: 0
}

.help-card .control-list {
    scrollbar-width: thin;
    scrollbar-color: #63818c #17303d;
    min-height: 0;
    overflow-y: auto
}

.control-list>div {
    flex-shrink: 0
}

@media (max-width: 760px) {
    .music-player.is-open .pocket-device {
        width:auto;
        max-height: calc(100dvh - 16px);
        position: fixed;
        inset: 8px 8px auto
    }

    .music-player.is-chat .pocket-screen,.music-player.is-riders .pocket-screen {
        height: min(304px,44dvh)
    }

    .game-shell:has(.music-player.is-open) .live-chat {
        display: none
    }
}

@media (max-height: 520px) and (min-width:761px) {
    .music-player.is-open .pocket-device {
        width:270px;
        max-height: none;
        position: fixed;
        inset: 8px 16px 8px auto
    }

    .music-player .pocket-screen,.music-player.is-chat .pocket-screen,.music-player.is-riders .pocket-screen {
        height: calc(100dvh - 180px)
    }

    .music-player.is-open:is(.is-chat,.is-riders) .pocket-device {
        width: min(560px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
        right: max(16px,env(safe-area-inset-right));
        align-items: center;
        gap: 10px;
        padding: 8px;
        display: flex;
        overflow: hidden
    }

    .music-player.is-open:is(.is-chat,.is-riders) .pocket-screen {
        flex: 1;
        align-self: stretch;
        min-width: 0;
        height: auto
    }

    .music-player.is-open:is(.is-chat,.is-riders) .pocket-wheel {
        flex: none;
        margin: 0 6px 0 2px
    }
}

@media (min-width: 1800px) and (min-height:950px) {
    .game-shell:not(.is-intro) .music-player {
        zoom:1.22
    }

    .live-chat {
        zoom:1.2}
}

@media (min-width: 2300px) and (min-height:1250px) {
    .game-shell:not(.is-intro) .music-player {
        zoom:1.45
    }

    .live-chat {
        zoom:1.4}
}

.pocket-challenge {
    background: var(--pk-group);
    color: var(--pk-label);
    font: 600 14px/1.2 var(--pk-font);
    text-align: left;
    border: 0;
    border-radius: 12px;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    margin: 0 8px 8px;
    padding: 9px 12px;
    display: flex
}

.pocket-challenge:hover {
    background: #2c2c2e
}

.pocket-challenge b,.sheet-group button.is-challenge svg {
    flex-shrink: 0
}

.pocket-challenge b {
    color: #101418;
    font: 400 13px/1 "Knewave",var(--display);
    background: #f7f6ef;
    border-radius: 6px;
    padding: 3px 7px 2px;
    rotate: -3deg
}

.sheet-group button.is-challenge,.sheet-group button.is-friend {
    color: var(--pk-label)
}

.online-card {
    color: #edf6f7;
    -webkit-user-select: text;
    user-select: text;
    background: linear-gradient(145deg,#173542fa,#102a36fa);
    border: 1px solid #c9e5ef35;
    width: min(660px,100% - 48px);
    max-height: min(760px,100dvh - 48px);
    margin: auto;
    padding: 0;
    position: relative;
    overflow: auto;
    box-shadow: 0 28px 120px #03131d8a
}

.online-card::backdrop {
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    background: #071c2885
}

.online-head {
    border-bottom: 1px solid #c5dfe91f;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 34px 22px;
    display: flex
}

.online-head h2 {
    font: italic 800 43px/.9 var(--display);
    letter-spacing: .5px;
    margin: 8px 0 0
}

.online-kicker {
    letter-spacing: 1.8px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    line-height: 1
}

.online-head .close-button {
    margin: -8px -10px 0 0;
    position: relative
}

.board-panel {
    min-height: 322px;
    padding: 27px 34px 32px
}

.refresh-button {
    color: #dce9ed;
    background: #d8edf311;
    border: 1px solid #d5e9f22c;
    place-items: center;
    width: 34px;
    height: 34px;
    display: grid
}

.refresh-button:hover {
    color: var(--accent);
    background: #d8edf31d
}

.refresh-button:disabled svg {
    animation: 1s linear infinite online-spin
}

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

.board-list {
    border-collapse: collapse;
    border-top: 1px solid #c2dbe627;
    width: 100%;
    display: block
}

.board-list thead,.board-list tbody {
    display: block
}

.board-row {
    border-bottom: 1px solid #c2dbe619;
    grid-template-columns: 55px minmax(130px,1fr) 74px 96px;
    align-items: center;
    min-height: 47px;
    font-size: 12px;
    display: grid
}

.board-row>td,.board-row>th {
    text-align: left;
    padding: 0;
    font-weight: 400
}

.board-row>td:first-child {
    font: 600 17px var(--display);
    color: #8ea8b3
}

.board-crown {
    color: #f5c542;
    vertical-align: -2px;
    filter: drop-shadow(0 0 4px #f5c54299);
    margin-right: 6px
}

.board-row>td:nth-child(2) {
    text-overflow: ellipsis;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    display: flex;
    overflow: hidden
}

.board-row>td:nth-child(2) small {
    background: var(--accent);
    color: #16323c;
    letter-spacing: .8px;
    padding: 3px 5px;
    font-size: 7px
}

.board-row>td:nth-child(3) {
    font-variant-numeric: tabular-nums;
    color: #9eb5bf;
    font-size: 10px
}

.board-row>td:last-child {
    text-align: right;
    font: 600 23px var(--display);
    font-variant-numeric: tabular-nums
}

.board-row.is-you>td:first-child,.board-row.is-you>td:last-child {
    color: #ff9b6d
}

.board-labels {
    color: #829ba6;
    letter-spacing: 1.2px;
    min-height: 31px;
    font-size: 7px
}

.board-labels>th:last-child {
    text-align: right
}

.results-online-actions {
    align-items: center;
    gap: 14px;
    margin-top: 11px;
    display: flex
}

.results-online-actions button {
    color: #d7e6eb;
    letter-spacing: 1px;
    background: #ffffff0a;
    border: 1px solid #d6e7ed32;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    font-size: 8px;
    font-weight: 700;
    display: flex
}

.results-online-actions button:hover {
    color: #fff;
    background: #f7764212;
    border-color: #ff9b6d
}

.results-online-actions button:disabled {
    cursor: default;
    color: #98b0ba
}

.results-online-actions .is-saved {
    color: #a9dbc9;
    border-color: #73bba44b
}

.results-online-actions .is-refused {
    color: #f3a98b;
    border-color: #f3a98b4b
}

.results-online-actions .is-held {
    color: #f7f6ef;
    border-color: #f7f6ef4b
}

.results-proof {
    color: #a9c2cb;
    letter-spacing: .3px;
    margin: 9px 0 0;
    font-size: 10px;
    line-height: 1.4
}

.results-proof.is-refused {
    color: #f3a98b
}

.results-proof.is-held {
    color: #f7f6ef
}

@media (max-width: 760px) {
    .online-card {
        width:calc(100% - 24px);
        max-height: calc(100dvh - 24px)
    }

    .online-head {
        padding: 24px 22px 19px
    }

    .online-head h2 {
        font-size: 36px
    }

    .board-panel {
        padding: 22px 20px 25px
    }

    .board-row {
        grid-template-columns: 42px minmax(100px,1fr) 55px 74px
    }

    .board-row>td:last-child {
        font-size: 19px
    }

    .board-row>td:nth-child(3) {
        font-size: 9px
    }

    .results-online-actions {
        flex-wrap: wrap
    }

    .results-online-actions button {
        height: 31px;
        padding: 0 9px
    }
}

.board-seasons {
    border: 0;
    gap: 6px;
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    display: flex
}

.board-seasons button {
    color: #9fb6c0;
    letter-spacing: 1.3px;
    cursor: pointer;
    background: 0 0;
    border: 1px solid #c5dfe933;
    border-radius: 999px;
    height: 30px;
    padding: 0 13px;
    font-size: 10px;
    font-weight: 800
}

.board-seasons button:hover {
    color: #fff;
    border-color: #c5dfe966
}

.board-seasons button[aria-pressed=true] {
    color: #101418;
    background: #f7f6ef;
    border-color: #f7f6ef
}

.board-prizes {
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: grid
}

.board-prizes li {
    background: radial-gradient(circle at 50% 38%,#ffffff1a,#0000 70%),#0b2637;
    border: 1px solid #c2dbe624;
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px 9px;
    display: flex;
    position: relative
}

.board-prizes b {
    color: #101418;
    font: italic 800 11px/1 var(--display);
    letter-spacing: .4px;
    background: #ffd84a;
    border-radius: 5px;
    padding: 3px 6px 2px;
    position: absolute;
    top: 7px;
    left: 7px;
    transform: rotate(-6deg);
    box-shadow: 0 0 0 1.5px #101418
}

.board-prizes .is-place-2 b {
    background: #dfe4ea
}

.board-prizes .is-place-3 b {
    background: #e7a86f
}

.board-prizes img {
    object-fit: contain;
    filter: drop-shadow(0 6px 8px #0009);
    width: 64px;
    height: 64px
}

.board-prizes span {
    font: italic 800 13px/1.1 var(--display);
    letter-spacing: .3px;
    text-transform: uppercase;
    text-align: center
}

.board-proof {
    color: #afc5ce;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 12px;
    font-size: 11px;
    display: flex
}

.board-proof.is-verified {
    color: #8ee6a6
}

.board-proof.is-refused {
    color: #ffb38f
}

.board-me {
    letter-spacing: 1.2px;
    color: #afc5ce;
    align-items: baseline;
    gap: 6px;
    margin: -6px 0 14px;
    font-size: 11px;
    font-weight: 700;
    display: flex
}

.board-me b {
    font: 600 20px var(--display);
    letter-spacing: .3px;
    color: #ff9b6d
}

.board-me span {
    color: #6f8f98;
    margin: 0 4px
}

.board-gap {
    min-height: 26px
}

.board-gap td {
    text-align: center;
    color: #6f8f98;
    letter-spacing: 6px;
    grid-column: 1/-1
}

.bc-shell {
    z-index: 2;
    color: #f3f3e9;
    --bc-muted: #b0c4c8;
    --bc-line: #d5e8e524;
    --bc-orange: #fa8958;
    background: #112830;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.bc-art,.bc-art img,.bc-art-placeholder,.bc-shade {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.bc-art {
    overflow: clip
}

.bc-art-placeholder {
    filter: blur(2px);
    background-position: 76% 46%;
    background-size: cover;
    transform: scale(1.035)
}

.bc-art img {
    object-fit: cover;
    object-position: 65% 46%;
    opacity: 0;
    filter: saturate(.85);
    transition: opacity 1.5s
}

.bc-art img.is-current {
    opacity: 1
}

.bc-shade {
    background: linear-gradient(90deg,#071a23f0 0%,#0b232ed9 27%,#10293660 60%,#142e3710 100%),linear-gradient(#08222d80,#0000 20% 76%,#071b28ce)
}

.bc-lobby-content,.bc-load-content {
    z-index: 1;
    width: 87%;
    height: 100%;
    margin-left: 6.5%;
    padding-top: 112px;
    padding-bottom: 104px;
    position: relative
}

.bc-tabs {
    --tab-gap: 24px;
    gap: var(--tab-gap);
    border-bottom: 1px solid var(--bc-line);
    max-width: 540px;
    height: 47px;
    margin-bottom: 32px;
    display: flex
}

.bc-tabs button {
    color: var(--bc-muted);
    letter-spacing: .4px;
    background: 0 0;
    border: 0;
    border-bottom: 2px solid #0000;
    align-items: center;
    gap: 9px;
    padding: 0 2px 17px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    position: relative
}

.bc-tabs button[aria-current] {
    color: #fff;
    border-bottom-color: var(--bc-orange)
}

.bc-tabs button:after {
    content: "";
    top: -10px;
    bottom: 0;
    left: calc(var(--tab-gap) / -2);
    right: calc(var(--tab-gap) / -2);
    position: absolute
}

@media (max-width: 1060px) {
    .bc-tabs {
        scrollbar-width:none;
        max-width: none;
        overflow: auto hidden
    }

    .bc-tabs::-webkit-scrollbar {
        display: none
    }

    .bc-tabs button {
        flex: none
    }
}

@media (max-width: 1000px) {
    .bc-tabs button>svg,.bc-tabs .bc-pow-mark {
        display:none
    }
}

.bc-tabs small {
    background: #f5f6ed19;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 10px
}

.bc-panel {
    animation: .45s both bc-enter
}

.bc-kicker {
    letter-spacing: 2.3px;
    color: #b3c9cc;
    font-size: 10px;
    font-weight: 600
}

.bc-shell h1 {
    font-family: var(--display);
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 20px 0 16px;
    font-size: clamp(66px,6.2vw,105px);
    font-weight: 800;
    line-height: .9
}

.bc-shell h1 em {
    color: var(--bc-orange);
    font-style: italic
}

.bc-intro {
    color: var(--bc-muted);
    margin: 0 0 27px;
    font-size: 13px;
    line-height: 1.6
}

.bc-ride {
    max-width: 440px
}

.bc-modes {
    border: 0;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: grid
}

.bc-modes>button {
    text-align: left;
    border: 1px solid var(--bc-line);
    color: #f4f3eb;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background: #0b263779;
    border-radius: 5px;
    align-items: center;
    gap: 14px;
    padding: 18px;
    transition: background .2s,border-color .2s;
    display: flex
}

.bc-modes>button:hover {
    background: #27434dd6;
    border-color: #d5e8e570
}

.bc-modes>button.is-selected {
    border-color: var(--bc-orange);
    background: #32515a80
}

.bc-modes>button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.bc-mode-icon {
    color: #bed0d2;
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid
}

.bc-modes b {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    display: block
}

.bc-modes small {
    color: var(--bc-muted);
    font-size: 11px;
    display: block
}

.bc-modes i {
    letter-spacing: 1px;
    color: #a4d8c6;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 8px;
    font-style: normal
}

.bc-radio {
    border: 1px solid #bed0d270;
    border-radius: 50%;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: auto;
    display: grid
}

.is-selected .bc-radio {
    background: var(--bc-orange);
    border-color: var(--bc-orange);
    color: #112831
}

.bc-identity {
    color: var(--bc-muted);
    letter-spacing: 1.1px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 9px;
    display: flex
}

.bc-identity label {
    align-items: center;
    gap: 14px;
    min-width: 0;
    display: flex
}

.bc-identity input {
    border: 0;
    border-bottom: 1px solid var(--bc-line);
    color: #fff;
    width: 140px;
    font: 13px var(--body);
    outline-offset: 5px;
    background: 0 0;
    border-radius: 0;
    padding: 6px 0
}

.bc-identity>span b {
    color: #fff;
    letter-spacing: 0;
    margin-left: 10px;
    font-size: 13px;
    display: inline-block
}

.bc-identity>button {
    color: #d6e0de;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    display: flex
}

.bc-start {
    background: var(--bc-orange);
    color: #132b34;
    letter-spacing: 1.3px;
    border: 1px solid #0000;
    border-radius: 3px;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 60px;
    padding: 0 23px;
    font-size: 12px;
    font-weight: 800;
    transition: background .2s,transform .2s;
    display: flex
}

.bc-start:hover {
    background: #ff9d71;
    transform: translateY(-2px)
}

.bc-start>span {
    margin-right: auto
}

.bc-start kbd {
    font: 8px var(--body);
    letter-spacing: .6px;
    border: 1px solid #20343a50;
    border-radius: 3px;
    padding: 4px
}

.bc-footer {
    z-index: 2;
    letter-spacing: 1.6px;
    color: #ceddda;
    pointer-events: none;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 9px;
    display: flex;
    position: absolute;
    bottom: 33px;
    left: 6.5%;
    right: 6.5%
}

.bc-footer a,.bc-footer button {
    pointer-events: auto
}

.bc-footer>span b {
    color: #9fb7bd;
    margin-left: 20px;
    font-size: 8px;
    font-weight: 400
}

.bc-shot-selector {
    align-items: center;
    gap: 5px;
    display: flex
}

.bc-shot-selector>span {
    color: #c0d2d5;
    min-width: 115px;
    margin-left: 13px;
    font-size: 8px
}

.bc-shot-selector button {
    background: 0 0;
    border: 0;
    padding: 10px 3px
}

.bc-shot-selector button span {
    background: #d0e0e850;
    width: 23px;
    height: 2px;
    display: block
}

.bc-shot-selector button[aria-pressed=true] span {
    background: var(--bc-orange)
}

.bc-load-content {
    flex-direction: column;
    justify-content: center;
    max-width: 680px;
    padding-top: 140px;
    padding-bottom: 100px;
    display: flex
}

.bc-load-content h1 {
    max-width: 660px;
    margin-top: 25px;
    font-size: clamp(76px,7.6vw,132px);
    line-height: .95
}

.bc-loading-bottom {
    max-width: 470px;
    margin-top: 70px
}

.bc-progress-copy {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    display: flex
}

.bc-progress-copy strong {
    color: #e3e8e2;
    font-size: 11px;
    font-weight: 500
}

.bc-progress {
    background: #c9dfe22d;
    height: 3px;
    margin-top: 17px;
    overflow: hidden
}

.bc-progress>span {
    background: var(--bc-orange);
    height: 100%;
    transition: width .35s;
    display: block
}

.bc-progress.is-indeterminate>span {
    width: 25%;
    animation: 1.6s ease-in-out infinite bc-progress
}

.bc-load-tip {
    color: #abc3c9;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.6
}

.bc-locker {
    height: calc(100% - 70px);
    display: flex;
    position: relative
}

.bc-locker-controls {
    z-index: 1;
    flex-shrink: 0;
    width: 365px;
    position: relative
}

.bc-locker h1 {
    font-size: clamp(64px,5.3vw,86px)
}

.bc-swatches {
    border: 0;
    min-width: 0;
    margin: 0 0 19px;
    padding: 0
}

.bc-swatches legend {
    text-transform: uppercase;
    letter-spacing: 1.3px;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 11px;
    font-size: 10px;
    display: flex
}

.bc-swatches legend span {
    color: var(--bc-muted);
    text-transform: none;
    letter-spacing: .3px;
    font-size: 9px
}

.bc-swatches>div {
    gap: 12px;
    display: flex
}

.bc-swatches button {
    background: var(--swatch);
    color: #fff;
    text-shadow: 0 1px 2px #000;
    border: 3px solid #122e38;
    border-radius: 50%;
    outline: 1px solid #ffffff26;
    place-items: center;
    width: 36px;
    height: 36px;
    display: grid
}

.bc-swatches button[aria-pressed=true] {
    outline: 2px solid #f58c61
}

.bc-swatches button:focus-visible {
    outline-offset: 4px;
    outline: 2px solid #fff
}

.bc-local-note {
    color: #afc5c8;
    align-items: center;
    gap: 7px;
    margin: 22px 0;
    font-size: 10px;
    line-height: 1.6;
    display: flex
}

.bc-account-lock {
    max-width: 340px;
    margin-top: 25px
}

.bc-account-lock>svg {
    color: #9bc9c8
}

.bc-account-lock h2 {
    margin: 16px 0 8px;
    font-size: 24px
}

.bc-account-lock p {
    color: #b9cfd3;
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 1.5
}

.bc-locker-controls {
    scrollbar-width: thin;
    scrollbar-color: #64828b transparent;
    max-height: 100%;
    padding: 4px 8px 8px 4px;
    overflow: hidden auto
}

.bc-rider-stage {
    background: radial-gradient(at 52% 63%,#153844cc 0%,#173f4870 40%,#0000 72%);
    min-height: 360px;
    position: absolute;
    inset: -65px 0 -5px 34%
}

.bc-rider-canvas {
    touch-action: none;
    cursor: grab;
    width: 100%;
    height: 100%
}

.bc-rider-canvas:active {
    cursor: grabbing
}

.bc-rider-canvas canvas {
    display: block
}

.bc-rotate-hint {
    letter-spacing: 2px;
    color: #a6c1c6;
    white-space: nowrap;
    align-items: center;
    gap: 12px;
    font-size: 8px;
    display: flex;
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translate(-50%)
}

.bc-rotate-hint button {
    color: #dbe9e9;
    background: #112a3580;
    border: 1px solid #bad2da44;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 17px
}

.bc-preview-status {
    color: #c7d5d8;
    text-align: center;
    font-size: 12px;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%)
}

.bc-sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.is-intro:has(.bc-shell) .topbar {
    height: 95px;
    padding: 0 6.5%
}

.is-intro:has(.bc-shell) .music-tray {
    display: none
}

.is-intro:has(.bc-shell) .music-player {
    width: 270px;
    inset: 78px 6.5% auto auto
}

@supports (anchor-name:--pocket) {
    .is-intro: has(.bc-shell):has(.top-pocket) .music-player {
        position-anchor:--pocket;
        position-try-fallbacks: flip-inline;
        top: calc(anchor(bottom) + 10px);
        left: anchor(left);
        right: auto
    }
}

@media (min-width: 761px) and (min-height:521px) {
    .is-intro:has(.bc-shell) .music-player .pocket-device {
        transform-origin:20px 0;
        max-height: calc(100dvh - 96px);
        top: 0;
        bottom: auto
    }
}

@keyframes bc-enter {
    0% {
        opacity: 0;
        transform: translateY(9px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes bc-progress {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(500%)
    }
}

@media (min-width: 1000px) and (max-height:850px) {
    .bc-lobby-content {
        padding-top:95px;
        padding-bottom: 80px
    }

    .bc-tabs {
        height: 38px;
        margin-bottom: 22px
    }

    .bc-tabs button {
        padding-bottom: 12px
    }

    .bc-shell h1 {
        margin: 15px 0;
        font-size: 75px
    }

    .bc-intro {
        margin-bottom: 18px
    }

    .bc-modes>button {
        padding: 13px
    }

    .bc-identity {
        margin: 13px 0
    }

    .bc-start {
        height: 53px
    }

    .bc-swatches {
        margin-bottom: 14px
    }

    .bc-locker h1 {
        font-size: 66px
    }

    .bc-local-note {
        margin: 15px 0
    }
}

@media (max-width: 900px) {
    .bc-art img {
        object-position:70% 50%
    }

    .bc-shade {
        background: linear-gradient(90deg,#081e2aed,#0b2634bb 50%,#0f2a3550),linear-gradient(#0000,#0c2436b0)
    }

    .bc-lobby-content {
        width: 88%;
        margin-left: 6%
    }

    .bc-ride {
        max-width: 410px
    }

    .bc-footer>span b {
        display: none
    }

    .bc-locker-controls {
        width: 300px
    }

    .bc-rider-stage {
        left: 32%;
        right: -8%
    }

    .bc-swatches>div {
        gap: 9px
    }

    .bc-swatches button {
        width: 33px;
        height: 33px
    }

    .bc-shot-selector>span {
        display: none
    }

    .bc-intro {
        max-width: 330px
    }
}

@media (max-width: 620px) {
    .bc-lobby-content {
        scrollbar-width:none;
        padding-top: 95px;
        padding-bottom: 85px;
        overflow-y: auto
    }

    .bc-tabs {
        --tab-gap: 27px;
        scrollbar-width: none;
        margin-bottom: 27px;
        overflow-x: auto
    }

    .bc-tabs::-webkit-scrollbar {
        display: none
    }

    .bc-tabs button {
        flex: none;
        font-size: 12px
    }

    .bc-shell h1 {
        font-size: 68px
    }

    .bc-ride {
        max-width: none
    }

    .bc-intro {
        font-size: 12px
    }

    .bc-modes>button {
        padding: 15px
    }

    .bc-art img {
        object-position: 72% center
    }

    .bc-shade {
        background: linear-gradient(90deg,#081d2bf2,#0c2934bb),linear-gradient(#0000,#081c29)
    }

    .bc-footer {
        font-size: 8px;
        bottom: 23px
    }

    .is-intro:has(.bc-shell) .topbar {
        height: 82px;
        padding: 0 6%
    }

    .is-intro:has(.bc-shell) .wordmark>span {
        font-size: 24px
    }

    .is-intro:has(.bc-shell) .wordmark>svg {
        width: 21px
    }

    .is-intro:has(.bc-shell) .top-actions {
        gap: 5px
    }

    .is-intro:has(.bc-shell) .icon-button {
        width: 32px;
        height: 32px
    }

    .bc-load-content {
        width: 86%;
        margin-left: 7%;
        padding-top: 100px
    }

    .bc-load-content h1 {
        font-size: 80px
    }

    .bc-loading-bottom {
        margin-top: 50px
    }

    .bc-locker {
        flex-direction: column;
        height: auto;
        display: flex
    }

    .bc-locker-controls {
        width: 100%
    }

    .bc-locker h1 {
        font-size: 60px
    }

    .bc-rider-stage {
        order: -1;
        height: 400px;
        min-height: 300px;
        margin-top: -30px;
        margin-bottom: 14px;
        position: relative;
        inset: auto
    }

    .bc-locker-controls h1,.bc-locker-controls>.bc-kicker {
        display: none
    }

    .bc-swatches button {
        width: 38px;
        height: 38px
    }

    .bc-swatches>div {
        gap: 15px
    }

    .bc-local-note {
        font-size: 9px
    }
}

@media (max-height: 600px) and (min-width:621px) {
    .bc-lobby-content {
        padding-top:85px;
        overflow-y: auto
    }

    .bc-tabs {
        margin-bottom: 15px
    }

    .bc-shell h1 {
        font-size: 60px
    }

    .bc-footer {
        bottom: 14px
    }

    .bc-rider-stage {
        position: fixed;
        inset: 90px 3% 65px 43%
    }

    .bc-load-content h1 {
        font-size: 78px
    }

    .bc-loading-bottom {
        margin-top: 20px
    }
}

@media (prefers-reduced-motion:reduce) {
    .bc-shell * {
        transition: none!important;
        animation: none!important
    }
}

@media (max-width: 620px) {
    .bc-lobby-content {
        height:auto;
        padding: 0;
        position: absolute;
        top: 95px;
        bottom: 116px
    }

    .bc-tabs {
        z-index: 3;
        background: #102a35f5;
        padding-top: 5px;
        position: sticky;
        top: 0
    }

    .bc-rider-stage {
        height: 335px;
        min-height: 300px
    }

    .bc-footer {
        z-index: 2
    }

    .bc-locker-controls {
        max-height: none;
        overflow: visible
    }
}

.bc-art img:not(.bc-art-preview) {
    transition: opacity .8s
}

.bc-footer-left {
    gap: 12px;
    display: grid
}

.bc-footer-left>span b {
    color: #9fb7bd;
    margin-left: 20px;
    font-size: 8px;
    font-weight: 400
}

.bc-discord {
    color: #f7f6ef;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #101e27b8;
    border: 1px solid #ffffff4a;
    border-radius: 6px;
    justify-self: start;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 12px;
    text-decoration: none;
    display: inline-flex
}

.bc-discord>span {
    font: 600 12px var(--body);
    letter-spacing: .09em
}

.bc-discord>svg:first-child {
    color: #fff
}

.bc-discord:hover {
    background: #263c47;
    border-color: #f7f6ef
}

.bc-discord:focus-visible {
    outline-offset: 3px;
    outline: 2px solid #f7f6ef
}

.bc-tab-locker .bc-footer,.bc-tab-shop .bc-footer,.bc-tab-pass .bc-footer,.bc-tab-pow .bc-footer,.bc-tab-board .bc-footer,.bc-tab-replays .bc-footer,.bc-tab-updates .bc-footer {
    display: none
}

@media (min-width: 621px) and (max-width:1060px) and (min-height:501px) {
    .bc-tab-ride .bc-lobby-content {
        scrollbar-width:none;
        height: auto;
        padding: 17px 0 8px;
        position: absolute;
        top: 95px;
        bottom: 72px;
        overflow-y: auto
    }

    .bc-footer-left {
        align-items: center;
        gap: 18px;
        display: flex
    }

    .bc-discord {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        color: #b9ced1;
        background: 0 0;
        border: 0;
        gap: 6px;
        min-height: 0;
        padding: 3px 0
    }

    .bc-discord>span {
        font: inherit;
        letter-spacing: 0;
        font-size: 12px
    }

    .bc-discord:hover {
        color: #fff;
        background: 0 0
    }

    .bc-discord>svg:last-child {
        display: none
    }
}

.bc-site-links {
    letter-spacing: .2px;
    gap: 16px;
    font-size: 10px;
    display: flex
}

.bc-site-links a {
    color: #b9ced1;
    padding: 3px 0;
    text-decoration: none
}

.bc-site-links a:hover {
    color: #fff
}

.bc-site-links a:focus-visible {
    outline-offset: 5px;
    outline: 2px solid #fa8958
}

.bc-shot-selector button:disabled {
    opacity: .3;
    cursor: default
}

.bc-retry {
    color: #f5f3e9;
    background: #163945;
    border: 1px solid #c2d9dd70;
    border-radius: 3px;
    padding: 10px 16px;
    font-size: 12px;
    display: inline-flex
}

.bc-load-content>.bc-intro {
    max-width: 400px;
    margin-top: 4px
}

.bc-loading-bottom {
    margin-top: 38px
}

.bc-load-content noscript a {
    color: #fa8958
}

@media (max-width: 900px) {
    .bc-footer-left>span b {
        display:none
    }
}

@media (max-width: 620px) {
    .bc-footer {
        bottom:17px
    }

    .bc-footer-left {
        gap: 8px
    }

    .bc-site-links {
        gap: 12px;
        font-size: 9px
    }

    .bc-load-content h1 {
        font-size: clamp(52px,15vw,80px)
    }

    .bc-load-content {
        padding-bottom: 115px
    }

    .bc-loading-bottom {
        margin-top: 24px
    }
}

@media (prefers-reduced-motion:reduce) {
    .bc-art img:not(.bc-art-preview) {
        transition: none
    }
}

.bc-progress.is-error>span {
    opacity: .35;
    width: 100%;
    animation: none
}

.bc-progress.is-error {
    background: #c9dfe21a
}

@media (max-width: 620px) and (orientation:portrait) {
    .bc-shell .bc-art img {
        object-position:center center
    }
}

:root {
    --label-size: 12px;
    --ui-size: 14px;
    --muted: #c0ced0
}

.steez8-mark {
    color: #f3f5ef;
    width: 134px;
    height: 30px;
    display: block
}

.topbar .wordmark.is-app {
    visibility: hidden
}

.bc-shell .bc-kicker,.online-kicker,.eyebrow {
    font-size: var(--label-size);
    letter-spacing: .1em;
    font-weight: 600
}

.bc-shell h1 {
    letter-spacing: -.025em;
    margin: 18px 0 30px;
    font-style: italic;
    font-weight: 800;
    line-height: .96
}

.bc-shell .bc-ride h1 {
    font-size: clamp(76px,8vw,126px)
}

.bc-shell .bc-locker h1 {
    margin-bottom: 25px;
    font-size: clamp(54px,5.3vw,80px)
}

.bc-shell .bc-load-content h1 {
    font-size: clamp(90px,10vw,160px)
}

.bc-shell .bc-intro,.bc-shell .bc-load-tip {
    max-width: 390px;
    font-size: 14px;
    line-height: 1.55
}

.bc-shell .bc-tabs button {
    letter-spacing: 0;
    font-size: 15px
}

.bc-shell .bc-modes b {
    letter-spacing: -.02em;
    margin-bottom: 0;
    font-size: 18px
}

.bc-shell .bc-modes small {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5
}

.bc-shell .bc-start,.primary-button,.online-submit {
    letter-spacing: .035em;
    font-size: 15px;
    font-weight: 700
}

.bc-shell .bc-start {
    border-radius: 2px;
    min-height: 54px
}

.bc-shell .bc-identity {
    letter-spacing: .05em;
    margin: 24px 0;
    font-size: 11px
}

.bc-shell .bc-identity input,.bc-shell .bc-identity>button {
    font-size: 14px
}

.bc-shell .bc-swatches legend {
    letter-spacing: .06em;
    font-size: 12px
}

.bc-shell .bc-swatches legend span,.bc-shell .bc-local-note {
    font-size: 12px
}

.bc-shell .bc-site-links {
    letter-spacing: 0;
    gap: 18px;
    font-size: 12px
}

.bc-shell .bc-progress-copy {
    letter-spacing: .06em;
    font-size: 12px
}

.bc-shell .bc-progress-copy strong {
    font-variant-numeric: tabular-nums;
    font-size: 13px
}

.bc-shell .bc-footer-left>span {
    letter-spacing: .06em;
    font-size: 11px
}

.bc-shell .bc-footer-left>span b {
    font-size: 10px
}

.game-shell .control-list b {
    letter-spacing: 0;
    font-size: 15px;
    line-height: 1.4
}

.game-shell .control-list span {
    letter-spacing: 0;
    color: #bed0d5;
    font-size: 13px;
    line-height: 1.55
}

.game-shell kbd {
    letter-spacing: 0;
    font-size: 11px
}

.game-shell .control-list kbd {
    white-space: nowrap;
    min-width: 86px
}

.game-shell .text-button {
    letter-spacing: 0;
    font-size: 14px;
    line-height: 1.4
}

.game-shell .results-status,.game-shell .clip-panel p,.game-shell .online-empty {
    font-size: 14px;
    line-height: 1.55
}

.game-shell .run-heading .eyebrow,.game-shell .score-display>span,.game-shell .speed-hud>.eyebrow {
    letter-spacing: .08em;
    font-size: 11px
}

.game-shell .score-display strong,.game-shell .speed-number,.game-shell .results-total strong,.game-shell .board-row {
    font-variant-numeric: tabular-nums
}

.game-shell .map-distance,.game-shell .live-roster li span {
    letter-spacing: .045em;
    font-size: 10px
}

.game-shell .help-card {
    scrollbar-width: thin;
    max-height: 85dvh;
    overflow: auto
}

.game-shell .help-card h2,.game-shell .pause-card h2,.game-shell .online-head h2 {
    letter-spacing: -.02em
}

@media (max-width: 620px) {
    .is-intro:has(.bc-shell) .wordmark>svg.steez8-mark {
        width:108px;
        height: 26px
    }

    .bc-shell .bc-ride h1 {
        margin: 16px 0 24px;
        font-size: 72px
    }

    .bc-shell .bc-tabs {
        --tab-gap: 14px;
        margin-bottom: 20px
    }

    .bc-shell .bc-tabs button {
        font-size: 14px
    }

    .bc-shell .bc-site-links {
        gap: 13px;
        font-size: 11px
    }

    .bc-shell .bc-identity {
        margin: 19px 0
    }

    .bc-shell .bc-start {
        height: 54px
    }

    .game-shell .touch-controls {
        gap: 8px
    }

    .game-shell .touch-controls>div:last-child {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 250px
    }

    .game-shell .touch-controls button {
        min-width: 44px;
        min-height: 44px;
        font-size: 11px
    }
}

@media (max-height: 700px) and (min-width:621px) {
    .bc-shell .bc-ride h1 {
        margin:14px 0 20px;
        font-size: 76px
    }

    .bc-shell .bc-identity {
        margin: 16px 0
    }

    .bc-shell .bc-modes>button {
        padding: 12px 16px
    }

    .bc-shell .bc-load-content h1 {
        font-size: 92px
    }
}

@media (max-width: 380px) {
    .bc-shell .bc-tabs {
        --tab-gap:10px
    }

    .bc-shell .bc-tabs button {
        font-size: 13px
    }
}

.bc-shell .lk-panel {
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    padding: 4px 8px 0 4px;
    display: flex;
    overflow: hidden
}

.lk-view {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    animation: .3s cubic-bezier(.2,.8,.2,1) both lk-back;
    display: flex
}

.lk-detail {
    animation-name: lk-push
}

.lk-head {
    flex: none
}

.bc-shell .lk-head h1 {
    margin: 14px 0 22px
}

.lk-scroll {
    scrollbar-width: thin;
    scrollbar-color: #64828b transparent;
    flex: 1;
    min-height: 0;
    margin: 0 -8px 0 -4px;
    padding: 3px 8px 14px 4px;
    overflow: hidden auto
}

@media (min-width: 621px) {
    .bc-tab-locker .bc-lobby-content {
        padding-bottom:max(24px,env(safe-area-inset-bottom));
        flex-direction: column;
        display: flex;
        overflow: hidden
    }

    .bc-tab-locker .bc-tabs {
        flex: none
    }

    .bc-tab-locker .bc-locker {
        flex: 1;
        height: auto;
        min-height: 0
    }
}

.lk-footer {
    border-top: 1px solid var(--bc-line);
    flex: none;
    gap: 10px;
    padding: 14px 0 8px;
    display: flex
}

.lk-footer .bc-start {
    border-radius: 12px;
    height: 56px
}

.lk-back {
    color: #cfe0e2;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    align-items: center;
    gap: 3px;
    margin-left: -8px;
    padding: 7px 11px 7px 4px;
    font-size: 13px;
    font-weight: 600;
    transition: background .18s,color .18s;
    display: inline-flex
}

.lk-back:hover {
    color: #fff;
    background: #ffffff12
}

.lk-field {
    border: 0;
    min-width: 0;
    margin: 0 0 26px;
    padding: 0
}

.lk-field legend {
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #dfe9e8;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    margin-bottom: 13px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    display: flex
}

.lk-field legend b {
    letter-spacing: .2px;
    text-transform: none;
    color: var(--bc-muted);
    font-size: 12px;
    font-weight: 500
}

.lk-swatches {
    grid-template-columns: repeat(auto-fill,minmax(50px,1fr));
    gap: 14px 10px;
    display: grid
}

.lk-swatches button {
    background: var(--swatch);
    color: #fff;
    border: 0;
    border-radius: 50%;
    justify-self: center;
    place-items: center;
    width: 48px;
    height: 48px;
    transition: transform .15s,box-shadow .15s;
    display: grid;
    box-shadow: inset 0 0 0 1px #ffffff38,0 3px 10px #0006
}

.lk-swatches button:hover {
    transform: scale(1.07)
}

.lk-swatches button[aria-pressed=true] {
    box-shadow: inset 0 0 0 1px #ffffff38,0 0 0 3px #0c2430,0 0 0 5px var(--bc-orange)
}

.lk-swatches button.is-pale {
    color: #132b34
}

.lk-swatches button:focus-visible {
    outline-offset: 7px;
    outline: 2px solid #fff
}

.lk-segment {
    border: 1px solid var(--bc-line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #0b2637b8;
    border-radius: 13px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    display: grid
}

.lk-segment button {
    color: #c9d9dc;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    transition: background .18s,color .18s,box-shadow .18s
}

.lk-segment button:hover {
    color: #fff;
    background: #ffffff0d
}

.lk-segment button[aria-pressed=true] {
    color: #132b34;
    background: #f3f3e9;
    box-shadow: 0 2px 8px #0006
}

.lk-segment button:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #fff
}

.lk-save {
    letter-spacing: 1.3px;
    border: 1px solid #0000;
    border-radius: 12px;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 56px;
    font-size: 12px;
    font-weight: 800;
    transition: background .25s,color .25s,border-color .25s,transform .15s;
    display: flex
}

.lk-save.is-dirty {
    background: var(--bc-orange);
    color: #132b34
}

.lk-save.is-dirty:hover {
    background: #ff9d71;
    transform: translateY(-1px)
}

.lk-save.is-saved {
    border-color: var(--bc-line);
    color: #a9c4c8;
    cursor: default;
    background: #16343fb3
}

.lk-save.is-fresh {
    color: #05281a;
    background: #34c27a;
    border-color: #0000;
    animation: .5s cubic-bezier(.2,1.6,.4,1) lk-saved
}

@keyframes lk-push {
    0% {
        opacity: 0;
        transform: translate(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes lk-back {
    0% {
        opacity: 0;
        transform: translate(-12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes lk-saved {
    0% {
        transform: scale(.95)
    }

    55% {
        transform: scale(1.035)
    }

    to {
        transform: scale(1)
    }
}

.lk-items {
    grid-template-columns: repeat(auto-fill,minmax(92px,1fr));
    gap: 10px;
    display: grid
}

.lk-item {
    aspect-ratio: 1/1.12;
    background: linear-gradient(145deg,#ffffff18,transparent 65%),var(--rarity);
    color: #fff;
    text-align: left;
    border: 0;
    border-radius: 14px;
    padding: 0;
    transition: transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .15s;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #ffffff2e,0 6px 18px #0006;
    container-type: inline-size
}

.lk-item.is-standard,.lk-slot.is-standard,.lk-unlock.is-standard,.sh-card.is-standard,.sh-info.is-standard,.sh-contents li.is-standard,.nfy-tile.is-standard {
    --rarity: radial-gradient(circle at 50% 34%,#6f8f98 0%,#3b5a64 48%,#1c343d 100%);
    --edge: #a9c1c7
}

.lk-item.is-rare,.lk-slot.is-rare,.lk-unlock.is-rare,.sh-card.is-rare,.sh-info.is-rare,.sh-contents li.is-rare,.nfy-tile.is-rare {
    --rarity: radial-gradient(circle at 50% 34%,#5aa2ff 0%,#2560d8 46%,#0e2a6b 100%);
    --edge: #8cc0ff
}

.lk-item.is-epic,.lk-slot.is-epic,.lk-unlock.is-epic,.sh-card.is-epic,.sh-info.is-epic,.sh-contents li.is-epic,.nfy-tile.is-epic {
    --rarity: radial-gradient(circle at 50% 34%,#c77dff 0%,#7a33d6 45%,#35106f 100%);
    --edge: #dcaaff
}

.lk-item.is-legendary,.lk-slot.is-legendary,.lk-unlock.is-legendary,.sh-card.is-legendary,.sh-info.is-legendary,.sh-contents li.is-legendary,.nfy-tile.is-legendary {
    --rarity: radial-gradient(circle at 50% 34%,#ffc75a 0%,#f08a1c 45%,#7a3408 100%);
    --edge: #ffd486
}

.lk-item.is-mythic,.lk-slot.is-mythic,.lk-unlock.is-mythic,.sh-card.is-mythic,.sh-info.is-mythic,.sh-contents li.is-mythic,.nfy-tile.is-mythic {
    --rarity: radial-gradient(circle at 50% 34%,#ff5f7e 0%,#c3134a 45%,#3d0620 100%);
    --edge: #ffcf6e
}

.lk-item.is-mythic {
    background: linear-gradient(115deg,transparent 30%,#ffe7a870 45%,transparent 60%) 120% 0/250% 100% no-repeat,linear-gradient(135deg,#ffffff30 0%,transparent 38%),repeating-conic-gradient(from 0deg at 50% 38%,#ffffff14 0deg 5deg,transparent 5deg 15deg),var(--rarity);
    animation: 3.2s ease-in-out infinite lk-sheen
}

@keyframes lk-sheen {
    0% {
        background-position: 120% 0,0 0,0 0,0 0
    }

    60%,to {
        background-position: -60% 0,0 0,0 0,0 0
    }
}

.lk-item:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle,#00000052 1.2px,#0000 1.7px) 0 0/7px 7px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(25deg,#000 5%,#0000 60%);
    mask-image: linear-gradient(25deg,#000 5%,#0000 60%)
}

.lk-item:after {
    content: "";
    background: var(--edge);
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.lk-item img {
    object-fit: contain;
    filter: drop-shadow(0 8px 10px #0008);
    width: 84%;
    height: 66%;
    transition: transform .2s;
    position: absolute;
    top: 4%;
    left: 8%
}

.lk-item:hover {
    transform: translateY(-2px)rotate(-.8deg)
}

.lk-item:hover img {
    transform: scale(1.05)rotate(-3deg)
}

.lk-item[aria-pressed=true] {
    box-shadow: 0 0 0 3px #f7f6ef,5px 5px 0 3px var(--bc-orange),0 6px 18px #0006
}

.lk-item:focus-visible {
    outline-offset: 6px;
    outline: 2px solid #fff
}

.lk-item-label {
    background: linear-gradient(#0000,#0000009c);
    padding: 18px 8px 7px;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0
}

.lk-item-label small {
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--edge);
    font-size: 9px;
    font-weight: 800;
    display: block
}

.lk-item-label em {
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #d7e6ebb3;
    margin-top: 2px;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    display: block
}

.lk-item-label b {
    font: 400 clamp(13px,14.5cqi,17px)/1.02 var(--display);
    letter-spacing: .3px;
    text-transform: uppercase;
    -webkit-line-clamp: 2;
    text-shadow: 1.5px 1.5px #00000094;
    -webkit-box-orient: vertical;
    margin-top: 1px;
    display: -webkit-box;
    overflow: hidden
}

.lk-item-badge {
    background: var(--bc-orange);
    color: #101418;
    border-radius: 50%;
    place-items: center;
    width: 24px;
    height: 24px;
    display: grid;
    position: absolute;
    top: 7px;
    right: 7px;
    transform: rotate(-8deg);
    box-shadow: 0 0 0 2px #101418,2px 2px 0 2px #0000004d
}

.lk-shop-tile {
    box-shadow: none;
    color: #dbe7e8;
    letter-spacing: .3px;
    text-align: center;
    background: repeating-linear-gradient(-45deg,#ffffff08 0 8px,#0000 8px 16px);
    border: 2px dashed #ffffff40;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    display: flex
}

.lk-shop-tile:before,.lk-shop-tile:after {
    content: none
}

.lk-shop-tile svg {
    color: var(--bc-orange)
}

.lk-shop-tile:hover {
    border-color: var(--bc-orange);
    color: #fff
}

.lk-unlock {
    border: 1px solid var(--bc-line);
    background: #0b2637b8;
    border-radius: 12px;
    margin-top: 14px;
    padding: 14px;
    display: block
}

.lk-unlock p {
    color: #e6eeee;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
    display: flex
}

.lk-unlock p>svg {
    flex: none
}

.lk-unlock b {
    color: #fff
}

.lk-unlock.is-secret {
    background: linear-gradient(135deg,#3d062070,#0b2637b8);
    border-color: #ff5f7e59
}

.lk-unlock.is-secret p {
    margin: 0
}

.lk-unlock small {
    color: var(--bc-muted);
    margin-top: 8px;
    font-size: 11px;
    display: block
}

.lk-save.is-locked {
    color: #dcc4ff;
    cursor: not-allowed;
    background: #2a1d3fcc;
    border-color: #b467ff66
}

@media (min-width: 621px) and (max-height:860px) {
    .bc-shell .lk-head h1 {
        margin:8px 0 14px;
        font-size: 54px
    }

    .lk-field {
        margin-bottom: 20px
    }

    .lk-swatches {
        gap: 12px 10px
    }

    .lk-footer {
        padding: 12px 0 6px
    }
}

@media (max-width: 620px) {
    .bc-tab-locker .bc-lobby-content,.bc-tab-shop .bc-lobby-content,.bc-tab-pass .bc-lobby-content {
        flex-direction:column;
        display: flex;
        overflow: hidden
    }

    .bc-tab-locker .bc-tabs,.bc-tab-shop .bc-tabs,.bc-tab-pass .bc-tabs {
        flex: none
    }

    .bc-shell .bc-locker {
        flex: 1;
        height: auto;
        min-height: 0
    }

    .bc-shell .bc-locker .bc-rider-stage {
        flex: 0 0 40%;
        height: auto;
        min-height: 190px;
        margin: -14px 0 4px
    }

    .bc-shell .lk-panel {
        flex: 1;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 0
    }

    .bc-shell .lk-panel .lk-head .bc-kicker,.bc-shell .lk-panel .lk-home h1,.bc-shell .lk-panel .lk-view:not(.lk-home):not(.lk-detail) h1 {
        display: none
    }

    .bc-tab-locker .bc-lobby-content,.bc-tab-shop .bc-lobby-content,.bc-tab-pass .bc-lobby-content {
        bottom: max(12px,env(safe-area-inset-bottom))
    }

    .bc-shell .lk-detail .lk-head {
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
        display: flex
    }

    .bc-shell .lk-detail .lk-head h1 {
        flex: 1;
        order: 2;
        min-width: 0
    }

    .bc-shell .lk-detail .lk-head .lk-saved {
        order: 3
    }

    .bc-shell .bc-locker-controls .lk-detail h1 {
        margin: 0;
        font-size: 28px;
        display: block
    }

    .lk-swatches {
        grid-template-columns: repeat(auto-fill,minmax(46px,1fr))
    }

    .lk-swatches button {
        width: 44px;
        height: 44px
    }

    .lk-field {
        margin-bottom: 20px
    }

    .lk-footer {
        padding: 10px 0 4px
    }

    .lk-save,.lk-footer .bc-start {
        height: 52px
    }
}

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

.lk-head h1 {
    grid-column: 1/-1;
    min-width: 0
}

.lk-head .lk-back {
    grid-column: 1;
    justify-self: start
}

.lk-saved {
    color: #dfe9e8;
    font: 400 14px/1 var(--display);
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    background: #ffffff12;
    border-radius: 999px;
    grid-area: 1/2;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 12px 6px;
    transition: background .3s,color .3s;
    display: inline-flex;
    box-shadow: inset 0 0 0 1px #ffffff24
}

.lk-saved.is-checking {
    color: #b0c4c8
}

.lk-saved.is-fresh {
    background: var(--bc-orange);
    color: #101418;
    animation: .45s cubic-bezier(.2,1.6,.4,1) lk-pop;
    transform: rotate(-4deg);
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000004d
}

@keyframes lk-pop {
    0% {
        transform: scale(.6)rotate(-4deg)
    }

    60% {
        transform: scale(1.14)rotate(-4deg)
    }

    to {
        transform: scale(1)rotate(-4deg)
    }
}

.lk-group+.lk-group {
    margin-top: 22px
}

.lk-group-head {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    display: flex
}

.lk-group-title {
    font: 400 16px/1 var(--display);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #dfe9e8;
    margin: 0
}

.lk-group-head .lk-saved {
    padding: 4px 8px
}

.lk-slots {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.lk-slots-ski-gear {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.lk-ride {
    margin: 0 0 10px
}

.lk-ride button {
    min-height: 48px;
    font: 400 15px/1 var(--display);
    letter-spacing: 1px
}

.lk-slot {
    aspect-ratio: 1/1.06;
    background: linear-gradient(145deg,#ffffff18,transparent 65%),var(--rarity);
    color: #fff;
    text-align: left;
    border: 0;
    border-radius: 10px;
    width: 100%;
    padding: 0;
    transition: transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .15s;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #ffffff2e,0 6px 18px #0006;
    container-type: inline-size
}

.lk-slot:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle,#00000052 1.2px,#0000 1.7px) 0 0/7px 7px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(25deg,#000 5%,#0000 60%);
    mask-image: linear-gradient(25deg,#000 5%,#0000 60%)
}

.lk-slot:after {
    content: "";
    background: var(--edge);
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.lk-slot img {
    object-fit: contain;
    filter: drop-shadow(0 8px 10px #0008);
    width: 82%;
    height: 64%;
    transition: transform .2s;
    position: absolute;
    top: 5%;
    left: 9%
}

.lk-slot:hover {
    transform: translateY(-2px)rotate(-.8deg)
}

.lk-slot:hover img {
    transform: scale(1.05)rotate(-3deg)
}

.lk-slot:active {
    transform: scale(.97)
}

.lk-slot:focus-visible {
    outline-offset: 5px;
    outline: 2px solid #fff
}

.lk-slot-swatch {
    aspect-ratio: 1;
    background: var(--swatch);
    border-radius: 50%;
    width: 46%;
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translate(-50%);
    box-shadow: inset 0 0 0 2px #ffffff4d,0 8px 16px #0007
}

.lk-slot-chip {
    background: var(--swatch);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 9px;
    right: 9px;
    box-shadow: 0 0 0 2px #101418,2px 2px 0 2px #0000004d
}

.lk-slot-label {
    background: linear-gradient(#0000,#0000009c);
    padding: 18px 9px 8px;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0
}

.lk-slot-label small {
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--edge);
    font-size: 10px;
    font-weight: 800;
    display: block
}

.lk-slot-label b {
    font: 400 clamp(13px,13.5cqi,18px)/1.02 var(--display);
    letter-spacing: .3px;
    text-transform: uppercase;
    -webkit-line-clamp: 2;
    text-shadow: 1.5px 1.5px #00000094;
    -webkit-box-orient: vertical;
    margin-top: 2px;
    display: -webkit-box;
    overflow: hidden
}

.lk-hidden {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.lk-item.is-locked {
    filter: grayscale(.7)brightness(.75);
    cursor: not-allowed
}

.lk-item.is-locked:hover {
    transform: none
}

.bc-shell .lk-head h1 {
    font-style: normal;
    font-weight: 400
}

.lk-slot:before {
    opacity: .22
}

.lk-slot-label b,.lk-item-label b {
    letter-spacing: .02em;
    text-shadow: 0 1px 3px #0009;
    line-height: 1.15
}

.lk-segment {
    background: 0 0;
    border: 0;
    gap: 6px;
    padding: 0
}

.lk-segment button {
    font: 400 14px/1.25 var(--display);
    box-shadow: inset 0 0 0 1px #ffffff45
}

.lk-segment button[aria-pressed=true] {
    background: var(--bc-orange);
    color: #101418;
    box-shadow: 0 0 0 2px #101418,3px 3px #0005
}

.lk-saved {
    font: 500 11px/1.2 var(--body);
    letter-spacing: .03em;
    text-transform: none
}

.lk-field:is(output) {
    font: 400 12px/1.55 var(--body);
    color: var(--bc-muted);
    display: block
}

.bc-locker .bc-rider-stage {
    background: radial-gradient(at 52% 58%,#858d9224,#0000 68%)
}

.bc-tab-locker .bc-art {
    opacity: .48
}

.bc-tab-locker .bc-shade {
    background: linear-gradient(90deg,#101c24f5 15%,#17212ab8 60%,#17212a85)
}

.sh-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4px 20px;
    display: flex
}

.sh-title {
    align-items: center;
    gap: 16px;
    display: flex
}

.bc-shell .sh-head h1 {
    color: var(--pass-ink);
    margin: 14px 0 18px;
    rotate: none
}

.bc-shell .sh-head h1 em {
    color: var(--pass-ink)
}

.sh-best {
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pass-ink);
    border-radius: 8px;
    margin: 0;
    padding: 8px 12px
}

.sh-clock {
    font: 700 12px/1 var(--body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pass-quiet);
    align-items: baseline;
    gap: 10px;
    margin: 0 2px 22px;
    display: flex
}

.sh-clock b {
    font: 700 22px/1 var(--body);
    letter-spacing: .04em;
    color: var(--pass-ink);
    font-variant-numeric: tabular-nums
}

.sh-state {
    font: 700 13px/1.4 var(--body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pass-quiet);
    align-items: center;
    gap: 12px;
    margin: 24px 2px;
    display: flex
}

.sh-state .text-button {
    color: var(--pass-ink);
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.sh-browse {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: calc(100% - 70px);
    display: flex
}

@media (max-width: 620px) {
    .bc-tab-shop .bc-lobby-content:has(.sh-browse) {
        overscroll-behavior:contain;
        display: block;
        overflow-y: auto
    }

    .bc-shell .sh-browse {
        height: auto;
        display: block
    }

    .bc-shell .sh-browse .sh-scroll {
        margin: 0;
        padding: 0 0 16px;
        overflow: visible
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell .bc-shell .sh-browse {
        overscroll-behavior:contain;
        overflow-y: auto
    }

    .game-shell .bc-shell .sh-browse .sh-scroll {
        flex: none;
        margin: 0;
        padding: 0 0 12px;
        overflow: visible
    }
}

.pow-web-note {
    font: 600 13px/1.4 var(--body);
    letter-spacing: .02em;
    color: var(--pass-quiet,#9fb6c0);
    text-align: center;
    margin: 10px 0 0
}

.sh-browse .sh-scroll {
    padding-right: 12px
}

.sh-section {
    font: 700 15px/1 var(--body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pass-ink);
    align-items: baseline;
    gap: 12px;
    margin: 28px 0 12px;
    display: flex
}

section:first-of-type>.sh-section,.sh-scroll>.sh-section:first-child {
    margin-top: 4px
}

.sh-section small {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pass-quiet)
}

.sh-section:after {
    content: "";
    background: var(--pass-line);
    flex: 1;
    align-self: center;
    height: 1px
}

.sh-section.is-event span {
    font: 400 26px/1 var(--display);
    letter-spacing: .03em
}

.sh-grid {
    grid-template-columns: repeat(auto-fill,minmax(170px,1fr));
    grid-auto-flow: dense;
    gap: 12px;
    display: grid
}

.sh-card {
    aspect-ratio: 1/1.16;
    width: 100%;
    min-width: 0;
    color: var(--pass-ink);
    text-align: left;
    cursor: pointer;
    background: linear-gradient(var(--hue,transparent),var(--hue,transparent)) 0 100%/100% 4px no-repeat,radial-gradient(ellipse 70% 58% at 50% 42%,color-mix(in srgb,var(--hue,var(--pass-tile)) var(--shop-glow,34%),transparent) 0%,transparent 100%),var(--pass-tile);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border: 0;
    border-radius: 10px;
    flex-direction: column;
    padding: 0;
    transition: transform .15s,box-shadow .15s;
    display: flex;
    position: relative;
    overflow: hidden
}

.game-shell[data-menus=light] .sh-card {
    --shop-glow: 22%
}

.sh-card:hover {
    box-shadow: inset 0 0 0 1px var(--pass-line),0 10px 20px var(--pass-lift);
    transform: translateY(-2px)
}

.sh-card:focus-visible {
    outline: 2px solid var(--pass-ink);
    outline-offset: -6px
}

.sh-art {
    flex: 1 1 0;
    min-height: 0;
    margin: 44px 14px 8px;
    position: relative
}

.sh-art>img {
    object-fit: contain;
    filter: drop-shadow(0 6px 8px #00000038);
    width: 100%;
    height: 100%;
    transition: transform .25s;
    position: absolute;
    inset: 0
}

.sh-card:hover .sh-art>img {
    transform: scale(1.04)
}

.sh-pack {
    display: flex;
    position: absolute;
    inset: 0
}

.sh-pack img {
    object-fit: contain;
    filter: drop-shadow(0 6px 8px #00000038);
    flex: 1;
    min-width: 0;
    height: 100%
}

.sh-pack img+img {
    margin-left: -14%
}

.sh-tag {
    z-index: 1;
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    font: 700 14px/1 var(--body);
    letter-spacing: .03em;
    color: var(--pass-ink);
    white-space: nowrap;
    border-radius: 7px;
    align-items: center;
    gap: 5px;
    padding: 6px 9px 6px 8px;
    display: inline-flex;
    position: absolute;
    top: 10px;
    left: 10px
}

.sh-tag small {
    letter-spacing: .14em;
    color: var(--pass-quiet);
    margin-left: 2px;
    font-size: 10px
}

.sh-tag.is-owned {
    background: var(--pass-ink);
    color: var(--pass-on-ink);
    box-shadow: none
}

.sh-tag.is-secret {
    letter-spacing: .14em;
    font-size: 11px
}

.sh-tag img.pow-icon {
    filter: none;
    width: 18px;
    height: 18px
}

.sh-new {
    z-index: 1;
    background: var(--pass-ink);
    color: var(--pass-on-ink);
    font: 700 11px/1 var(--body);
    letter-spacing: .16em;
    border-radius: 7px;
    padding: 6px 8px;
    position: absolute;
    top: 10px;
    right: 10px
}

.sh-name {
    flex-direction: column;
    flex: none;
    gap: 5px;
    min-width: 0;
    padding: 0 12px 15px;
    display: flex
}

.sh-name small {
    font: 700 11px/1 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--hue-ink,var(--pass-quiet));
    overflow: hidden
}

.sh-name b {
    font: 400 22px/1 var(--display);
    letter-spacing: .02em;
    text-transform: uppercase;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.sh-name em {
    font: 700 11px/1.2 var(--body);
    letter-spacing: .06em;
    color: var(--pass-quiet);
    font-style: normal
}

.sh-meter {
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.sh-meter span {
    background: var(--pass-ink);
    height: 100%;
    display: block
}

.sh-meter:not(.is-locked) {
    display: none
}

.sh-card.is-wide {
    aspect-ratio: 1.78;
    background: linear-gradient(var(--hue,transparent),var(--hue,transparent)) 0 100%/100% 4px no-repeat,radial-gradient(ellipse 52% 70% at 68% 46%,color-mix(in srgb,var(--hue,var(--pass-tile)) var(--shop-glow,34%),transparent) 0%,transparent 100%),var(--pass-tile);
    grid-template: ".art"1fr"name art"/minmax(0,42%) minmax(0,1fr);
    grid-column: span 2;
    display: grid
}

.sh-card.is-wide .sh-art {
    grid-area: art;
    margin: 20px 18px 18px 0
}

.sh-card.is-wide .sh-name {
    grid-area: name;
    padding: 0 14px 17px
}

.sh-card.is-wide .sh-name b {
    font-size: 28px
}

.sh-set {
    background: linear-gradient(var(--hue),var(--hue)) 0 100%/100% 4px no-repeat,radial-gradient(ellipse 58% 78% at 70% 44%,color-mix(in srgb,var(--set) 62%,transparent) 0%,transparent 100%),color-mix(in srgb,var(--set) 18%,var(--pass-tile))
}

.game-shell[data-menus=light] .sh-set {
    background: linear-gradient(var(--hue),var(--hue)) 0 100%/100% 4px no-repeat,radial-gradient(ellipse 58% 78% at 70% 44%,color-mix(in srgb,var(--set) 46%,transparent) 0%,transparent 100%),color-mix(in srgb,var(--set) 14%,var(--pass-tile))
}

.sh-set-art {
    grid-area: art;
    margin: 8px 4px 10px 0;
    position: relative
}

.sh-set-art img {
    object-fit: contain;
    filter: drop-shadow(0 8px 10px #0000004d);
    transition: transform .25s;
    position: absolute
}

.sh-set-art .is-board {
    width: 44%;
    height: 124%;
    top: -12%;
    right: -8%;
    transform: rotate(10deg)
}

.sh-set-art .is-top {
    width: 54%;
    height: 76%;
    top: 0;
    left: 8%
}

.sh-set-art .is-pants {
    width: 34%;
    height: 72%;
    top: 28%;
    left: 48%
}

.sh-set-art .is-helmet {
    width: 34%;
    height: 44%;
    bottom: -2%;
    left: 0
}

.sh-set:hover .sh-set-art .is-board {
    transform: rotate(9deg)translateY(-3px)
}

.sh-set:hover .sh-set-art .is-helmet {
    transform: translateY(-3px)
}

.sh-set .sh-name small {
    color: var(--pass-ink);
    opacity: .8
}

.sh-set .sh-name b {
    font-size: 30px
}

.sh-card.is-page {
    aspect-ratio: auto;
    cursor: default;
    height: clamp(240px,40vh,340px)
}

.sh-card.is-page:hover {
    box-shadow: inset 0 0 0 1px var(--pass-line);
    transform: none
}

.sh-card.is-page .sh-art {
    margin: 52px 28px 10px
}

.sh-card.is-page .sh-name b {
    font-size: 34px
}

.sh-card.is-page.is-pack {
    height: clamp(200px,28vh,300px)
}

.sh-card.is-page.is-pack .sh-art {
    margin: 48px 20px 10px
}

.sh-page-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 6px 0 14px;
    display: flex
}

.sh-contents {
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.sh-contents li {
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border-radius: 10px;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    display: grid
}

.sh-contents img {
    object-fit: contain;
    background: color-mix(in srgb,var(--hue,var(--pass-tile)) var(--pass-tint),var(--pass-tile));
    border-radius: 8px;
    width: 52px;
    height: 52px;
    padding: 4px
}

.sh-contents b {
    font: 400 17px/1 var(--display);
    letter-spacing: .02em;
    text-transform: uppercase;
    display: block
}

.sh-contents small {
    font: 700 11px/1 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hue-ink,var(--pass-quiet));
    margin-top: 4px;
    display: block
}

.sh-set-head {
    background: radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--set) 60%,transparent) 0%,transparent 70%),color-mix(in srgb,var(--set) 24%,var(--pass-panel));
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border-radius: 12px;
    padding: 16px 18px 14px
}

.sh-set-head small {
    font: 700 12px/1.3 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .82
}

.bc-shell .sh-set-head h2 {
    font: 400 clamp(34px,3vw,46px)/1 var(--display);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pass-ink);
    margin: 8px 0 0
}

.sh-look {
    background: linear-gradient(var(--hue),var(--hue)) 0 100%/100% 3px no-repeat,var(--pass-panel);
    width: 100%;
    box-shadow: inset 0 0 0 1px var(--pass-line);
    color: var(--pass-ink);
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas: "art words""art price";
    align-items: center;
    gap: 6px 14px;
    margin: 12px 0 0;
    padding: 10px 16px 10px 10px;
    display: grid
}

.sh-look.is-picked,.sh-pieces button.is-picked {
    box-shadow: inset 0 0 0 2px var(--pass-ink)
}

.sh-look:focus-visible {
    outline: 2px solid var(--pass-ink);
    outline-offset: 2px
}

.sh-pieces button:focus-visible {
    outline: 2px solid var(--pass-ink);
    outline-offset: 2px
}

.sh-look-art {
    grid-area: art;
    padding-left: 4px;
    display: flex
}

.sh-look-art img {
    object-fit: contain;
    filter: drop-shadow(0 4px 6px #0003);
    width: 52px;
    height: 60px
}

.sh-look-art img+img {
    margin-left: -18px
}

.sh-look.is-full .sh-look-art img+img {
    margin-left: -30px
}

.sh-look-words {
    flex-direction: column;
    grid-area: words;
    gap: 6px;
    min-width: 0;
    display: flex
}

.sh-look-words small {
    font: 700 11px/1.2 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pass-quiet)
}

.sh-look-words b {
    font: 400 24px/1 var(--display);
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.sh-look-price {
    font: 700 14px/1 var(--body);
    letter-spacing: .06em;
    white-space: nowrap;
    flex-wrap: wrap;
    grid-area: price;
    align-items: baseline;
    gap: 4px 10px;
    display: flex
}

.sh-look-price s {
    font: 700 13px/1 var(--body);
    color: var(--pass-quiet)
}

.sh-look-price b {
    font: 700 22px/1 var(--body);
    letter-spacing: .02em;
    align-items: center;
    gap: 5px;
    display: inline-flex
}

.sh-look-price small {
    font: 700 11px/1 var(--body);
    letter-spacing: .14em;
    color: var(--hue-ink,var(--pass-ink))
}

.sh-look-price img.pow-icon {
    filter: none
}

.sh-pieces-head {
    font: 700 12px/1 var(--body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pass-quiet);
    margin: 22px 2px 10px
}

.sh-pieces {
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.sh-pieces button {
    background: linear-gradient(90deg,var(--hue),var(--hue)) 0 0/3px 100% no-repeat,var(--pass-panel);
    width: 100%;
    min-width: 0;
    box-shadow: inset 0 0 0 1px var(--pass-line);
    color: var(--pass-ink);
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    grid-template-columns: 44px minmax(0,1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 6px 12px 6px 6px;
    display: grid
}

.sh-pieces button:hover {
    background: linear-gradient(90deg,var(--hue),var(--hue)) 0 0/3px 100% no-repeat,var(--pass-tile)
}

.sh-pieces img {
    object-fit: contain;
    filter: drop-shadow(0 4px 5px #0003);
    width: 44px;
    height: 44px
}

.sh-pieces span {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    display: flex
}

.sh-pieces b {
    font: 400 16px/1 var(--display);
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.sh-pieces small {
    font: 700 10px/1 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--hue-ink,var(--pass-quiet));
    overflow: hidden
}

.sh-pieces em {
    font: 700 13px/1 var(--body);
    letter-spacing: .04em;
    color: var(--pass-ink);
    align-items: center;
    gap: 4px;
    font-style: normal;
    display: inline-flex
}

.sh-pieces em img.pow-icon {
    filter: none;
    grid-row: auto;
    width: 15px;
    height: 15px
}

.bc-shell.bc-tab-shop .lk-back {
    color: var(--pass-ink)
}

.bc-shell.bc-tab-shop .lk-back:hover {
    background: var(--pass-tile);
    color: var(--pass-ink)
}

.bc-shell.bc-tab-shop .lk-footer {
    border-top-color: var(--pass-line)
}

.bc-shell.bc-tab-shop .lk-scroll {
    scrollbar-color: var(--pass-quiet) transparent
}

.sh-footer {
    flex-wrap: wrap
}

.sh-footer .lk-save,.sh-footer .bc-start {
    flex: 1;
    max-width: none
}

.bc-shell.bc-tab-shop .sh-footer .bc-start {
    background: var(--pass-ink);
    height: 58px;
    color: var(--pass-on-ink);
    font: 700 13px/1.15 var(--body);
    letter-spacing: .12em;
    text-align: left;
    box-shadow: none;
    border: 0;
    border-radius: 10px;
    gap: 12px
}

.bc-shell.bc-tab-shop .sh-footer .bc-start:hover {
    background: var(--pass-hover);
    transform: none
}

.bc-shell.bc-tab-shop .sh-footer .bc-start small {
    white-space: nowrap
}

.sh-footer .bc-start small {
    letter-spacing: .06em;
    margin-left: auto;
    font-size: 13px;
    font-weight: 700
}

.sh-footer .bc-start small+svg {
    margin-left: 10px
}

.sh-footer .sh-buy small {
    opacity: 1;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 14px;
    display: inline-flex
}

.sh-footer .sh-buy small img.pow-icon {
    filter: none
}

.bc-shell.bc-tab-shop .sh-footer .sh-buy.is-armed {
    background: var(--pass-panel);
    color: var(--pass-ink);
    box-shadow: inset 0 0 0 2px var(--pass-ink)
}

.bc-shell.bc-tab-shop .sh-footer .lk-save {
    height: 58px;
    font: 700 13px var(--body);
    letter-spacing: .14em;
    border-radius: 10px
}

.bc-shell.bc-tab-shop .sh-footer .lk-save.is-dirty {
    background: var(--pass-ink);
    color: var(--pass-on-ink)
}

.bc-shell.bc-tab-shop .sh-footer .lk-save.is-saved,.lk-save.sh-not-for-sale {
    background: var(--pass-panel);
    border-color: var(--pass-line);
    color: var(--pass-ink);
    cursor: default;
    opacity: 1
}

.lk-save.sh-not-for-sale span {
    white-space: normal;
    text-align: center
}

.sh-problem {
    font: 700 13px/1.2 var(--body);
    letter-spacing: .08em;
    color: var(--pass-alert);
    flex-basis: 100%;
    margin: 0 0 8px
}

.bc-shell.bc-tab-shop .sh-footer .sh-return {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    color: var(--pass-ink)
}

.bc-shell.bc-tab-shop .sh-footer .sh-return.is-armed {
    color: var(--pass-alert)
}

.bc-shell.bc-tab-shop .sh-footer .sh-return small {
    background: var(--pass-tile);
    color: var(--pass-ink)
}

.pow-icon {
    vertical-align: -.2em;
    object-fit: contain;
    filter: drop-shadow(0 1px #10141859);
    flex: none;
    display: inline-block
}

@media (max-width: 620px) {
    .sh-grid {
        grid-template-columns:1fr 1fr;
        gap: 10px
    }

    .sh-section {
        margin: 20px 0 10px
    }

    .sh-clock {
        margin: 0 2px 14px
    }

    .sh-card.is-wide {
        aspect-ratio: 1.6
    }

    .sh-card.is-wide .sh-name b {
        font-size: 22px
    }

    .sh-set .sh-name b {
        font-size: 24px
    }

    .sh-name b {
        font-size: 19px
    }

    .sh-card.is-page {
        height: 250px
    }

    .sh-pieces {
        grid-template-columns: 1fr
    }
}

.game-shell {
    --card-bg: #141518;
    --card-ink: #f2f2ee;
    --card-copy: #c9c9c4;
    --card-line: #ffffff1c;
    --card-tile: #1d1e22;
    --card-btn: #f2f2ee;
    --card-btn-ink: #111;
    --card-btn-hover: #fff;
    --card-alert: #ff7b7b;
    --card-backdrop: #000000a6;
    --card-quiet: #8d8d92;
    --card-tile-hover: #27282d;
    --card-track: #ffffff29;
    --card-ok: #7fd6a4;
    --card-glass: #141518db;
    --card-scrim: #0006
}

.game-shell[data-menus=light] {
    --card-bg: #f6f8f9;
    --card-ink: #1d2127;
    --card-copy: #3b424b;
    --card-line: #d9dee3;
    --card-tile: #e9edf0;
    --card-btn: #1d2127;
    --card-btn-ink: #fff;
    --card-btn-hover: #343a42;
    --card-alert: #c4122f;
    --card-backdrop: #0b0d1066;
    --card-quiet: #68707a;
    --card-tile-hover: #dde2e6;
    --card-track: #1d212729;
    --card-ok: #1d7a48;
    --card-glass: #f6f8f9e6;
    --card-scrim: #0b0d104d
}

.modal-backdrop:has(>:is(.pow-packs,.grown-up-card,.gift-card)) {
    background: var(--card-backdrop)
}

.game-shell :is(.pow-packs,.grown-up-card,.gift-card) :is(button,a):focus-visible {
    outline-color: var(--card-ink)
}

.game-shell dialog.pause-card:is(.pow-packs,.grown-up-card,.gift-card) {
    border: 1px solid var(--card-line);
    background: var(--card-bg);
    width: min(540px,100% - 32px);
    color: var(--card-ink);
    border-radius: 18px;
    padding: 28px 28px 22px;
    box-shadow: 0 24px 60px #00000040
}

.game-shell dialog.pause-card.grown-up-card {
    width: min(440px,100% - 32px)
}

.game-shell :is(.pow-packs,.grown-up-card,.gift-card) h2 {
    letter-spacing: .01em;
    color: var(--card-ink);
    margin: 0;
    font-size: 40px;
    rotate: none
}

.game-shell :is(.pow-packs,.grown-up-card,.gift-card) .close-button {
    color: var(--card-ink);
    top: 22px;
    right: 20px
}

.gu-item {
    background: var(--card-tile);
    border-radius: 12px;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 14px;
    margin: 18px 0 20px;
    padding: 10px 16px 10px 10px;
    display: grid
}

.gu-icons {
    background: var(--card-bg);
    background: linear-gradient(var(--hue,transparent),var(--hue,transparent)) 0 100%/100% 3px no-repeat,color-mix(in srgb,var(--hue,var(--card-bg)) 14%,var(--card-bg));
    border-radius: 10px;
    width: 64px;
    height: 64px;
    display: block;
    position: relative;
    overflow: hidden
}

.gu-icons img {
    object-fit: contain;
    width: 52px;
    height: 52px;
    position: absolute;
    inset: 6px
}

.gu-item.is-pack .gu-icons img {
    width: 38px;
    height: 38px
}

.gu-item.is-pack .gu-icons img:first-child {
    inset: 4px auto auto 4px
}

.gu-item.is-pack .gu-icons img:last-child {
    inset: auto 4px 4px auto
}

.sh-card .sh-pack {
    width: 84%;
    height: 72%;
    display: flex;
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.sh-card .sh-pack img {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 100%;
    position: static;
    transform: none
}

.sh-card .sh-pack img+img {
    margin-left: -14%
}

.sh-card:hover .sh-pack img {
    transform: scale(1.04)rotate(-3deg)
}

.gu-item span {
    min-width: 0
}

.gu-item small {
    font: 700 12px/1 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hue-ink,var(--card-copy));
    display: block
}

.gu-item b {
    font: 400 22px/1 var(--display);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--card-ink);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 6px;
    display: -webkit-box;
    overflow: hidden
}

.gu-item strong {
    font: 700 22px/1 var(--body);
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--card-ink)
}

.grown-up-card.is-paid .gu-item strong {
    background: var(--card-btn);
    width: 40px;
    height: 40px;
    color: var(--card-btn-ink);
    border-radius: 50%;
    place-items: center;
    display: grid
}

.gu-code {
    width: min(240px,100%);
    box-shadow: 0 0 0 1px var(--card-line);
    background: #fff;
    border-radius: 14px;
    margin: 0 auto 14px;
    padding: 12px;
    position: relative
}

.qr-code {
    width: 100%;
    height: auto;
    display: block
}

.gu-test {
    color: #101418;
    font: 700 12px/1 var(--body);
    letter-spacing: .08em;
    background: #ffd84a;
    border-radius: 999px;
    padding: 5px 9px;
    position: absolute;
    top: -10px;
    right: -10px
}

.gu-state {
    font: 700 13px/1.3 var(--body);
    letter-spacing: .12em;
    text-align: center;
    color: var(--card-ink);
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    display: flex
}

.gu-state i {
    background: var(--card-copy);
    border-radius: 50%;
    width: 9px;
    height: 9px;
    animation: 1.4s ease-in-out infinite gu-wait
}

.gu-state.is-failed {
    color: var(--card-alert)
}

@keyframes gu-wait {
    50% {
        opacity: .25;
        transform: scale(.7)
    }
}

@media (prefers-reduced-motion:reduce) {
    .gu-state i {
        animation: none
    }
}

.game-shell .grown-up-card .primary-button {
    background: var(--card-btn);
    max-width: none;
    height: 54px;
    color: var(--card-btn-ink);
    font: 700 14px/1 var(--body);
    letter-spacing: .14em;
    box-shadow: none;
    border-radius: 10px;
    justify-content: center;
    gap: 10px;
    margin: 0
}

.game-shell .grown-up-card .primary-button:hover {
    background: var(--card-btn-hover);
    transform: none
}

.game-shell .grown-up-card .primary-button .enter-key {
    opacity: .55;
    border-color: currentColor
}

a.primary-button.gu-open {
    text-decoration: none
}

.gu-terms {
    font: 400 12px/1.5 var(--body);
    letter-spacing: 0;
    text-align: center;
    color: var(--card-copy);
    margin: 14px 0 0
}

.gu-terms a {
    color: inherit
}

.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) {
    --pass-page: #0e0f11;
    --pass-panel: #141518;
    --pass-ink: #f2f2ee;
    --pass-on-ink: #111;
    --pass-hover: #fff;
    --pass-line: #ffffff1c;
    --pass-tile: #1b1c1f;
    --pass-empty: #131417;
    --pass-track: #ffffff1f;
    --pass-quiet: #8d8d92;
    --pass-alert: #ff7b7b;
    --pass-tint: 16%;
    --pass-lift: #00000080;
    --pass-art: .35;
    --pass-shade: linear-gradient(180deg,#0e0f1199 0%,#0e0f11e0 22%,#0e0f11 46%);
    background: var(--pass-page);
    color: var(--pass-ink)
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) {
    --pass-page: #e3e8ec;
    --pass-panel: #f8fafb;
    --pass-ink: #1d2127;
    --pass-on-ink: #fff;
    --pass-hover: #343a42;
    --pass-line: #d9dee3;
    --pass-tile: #f4f6f8;
    --pass-empty: #ebeff2;
    --pass-track: #d9dee3;
    --pass-quiet: #68707a;
    --pass-alert: #c4122f;
    --pass-tint: 9%;
    --pass-lift: #0000002e;
    --pass-art: 1;
    --pass-shade: linear-gradient(180deg,#e3e8ec80 0%,#e3e8eccc 20%,#e3e8eceb 38%,#e3e8ecf5 60%)
}

.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-art {
    opacity: var(--pass-art)
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-art img {
    filter: saturate(.75)brightness(.97)
}

.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-shade {
    background: var(--pass-shade)
}

.bc-pass>:is(.pass-nav,.pass-foot) button:focus-visible {
    outline-color: var(--pass-ink)
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs {
    border-bottom-color: var(--pass-line)
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs button {
    color: var(--pass-quiet)
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs button:hover,.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs button[aria-current] {
    color: var(--pass-ink)
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs button[aria-current] {
    border-bottom-color: var(--pass-ink)
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs small {
    color: var(--pass-ink);
    background: #1d212714
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs small.bc-new {
    background: var(--pass-ink);
    color: var(--pass-on-ink)
}

.game-shell[data-menus=light] .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs button:focus-visible {
    outline-color: var(--pass-ink)
}

.game-shell[data-menus=light]:has(.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates)) .topbar .steez8-mark {
    color: #1d2127
}

.game-shell[data-menus=light]:has(.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates)) :is(.top-pocket,.top-friends,.game-menu-trigger,.top-wallet) {
    color: #1d2127;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #f8fafbeb;
    border-color: #1d212726
}

:is(.game-shell[data-menus=light]:has(.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates)) :is(.top-pocket,.top-friends,.game-menu-trigger):hover,.game-shell[data-menus=light]:has(.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates)) .top-pocket[aria-expanded=true]) {
    background: #fff;
    border-color: #1d2127
}

.game-shell[data-menus=light]:has(.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates)) .top-get-pow {
    color: #fff;
    background: #1d2127
}

.game-shell[data-menus=light]:has(.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates)) .top-get-pow:hover {
    background: #343a42
}

.game-shell[data-menus=light]:has(.bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates)) .topbar button:focus-visible {
    outline-color: #1d2127
}

.bc-pass {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: calc(100% - 70px);
    display: flex
}

.pass-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 16px;
    display: flex
}

.pass-head h1 {
    margin: 0
}

.bc-shell .bc-pass h1 {
    color: var(--pass-ink);
    font-size: clamp(44px,4.2vw,72px);
    rotate: none
}

.bc-shell .bc-pass h1 em {
    color: var(--pass-ink)
}

.pass-sub {
    font: 700 13px/1.2 var(--body);
    letter-spacing: .16em;
    color: var(--pass-ink);
    margin: 0
}

.pass-status {
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
    display: flex
}

.pass-level,.pass-today {
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border-radius: 10px
}

.pass-level {
    flex: 1;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding: 14px 20px;
    display: flex
}

.pass-tier {
    flex: none;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    display: flex
}

.pass-tier small {
    font: 700 12px var(--body);
    letter-spacing: .14em
}

.pass-tier b {
    font: 400 50px/1 var(--display)
}

.pass-level-bar {
    flex: 1;
    min-width: 0
}

.pass-progress {
    background: var(--pass-track);
    border-radius: 4px;
    height: 8px;
    overflow: hidden
}

.pass-progress span {
    border-radius: inherit;
    background: var(--pass-ink);
    height: 100%;
    transition: width .4s;
    display: block
}

.pass-level-bar p {
    font: 700 14px/1.2 var(--body);
    letter-spacing: .1em;
    margin: 9px 0 0
}

.pass-today {
    flex-direction: column;
    flex: none;
    justify-content: center;
    gap: 4px;
    min-width: 250px;
    padding: 14px 20px;
    display: flex
}

.pass-today b {
    font: 700 22px/1 var(--body);
    letter-spacing: .04em
}

.pass-today span {
    font: 700 12px/1.2 var(--body);
    letter-spacing: .12em
}

.pass-today.is-full {
    box-shadow: inset 0 0 0 1.5px var(--pass-ink)
}

.pass-nav {
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    display: flex
}

.pass-nav p {
    font: 700 12px var(--body);
    letter-spacing: .14em;
    align-items: center;
    gap: 6px;
    margin: 0 auto 0 0;
    display: flex
}

.pass-nav-lock {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.pass-nav button {
    background: var(--pass-panel);
    min-width: 36px;
    height: 36px;
    color: var(--pass-ink);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    font: 700 12px var(--body);
    letter-spacing: .12em;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    display: inline-flex
}

.pass-nav button:hover {
    background: var(--pass-tile)
}

.pass-nav .pass-mine {
    background: var(--pass-ink);
    color: var(--pass-on-ink);
    box-shadow: none
}

.pass-nav .pass-mine:hover {
    background: var(--pass-hover)
}

.pass-board {
    --tile: clamp(56px,calc((100cqh - 60px) / 2),184px);
    flex: 1 1 0;
    gap: 14px;
    min-height: 150px;
    margin-top: 10px;
    display: flex;
    container-type: size
}

.pass-rows {
    flex-direction: column;
    flex: none;
    gap: 10px;
    padding-top: 34px;
    display: flex
}

.pass-rows span {
    height: var(--tile);
    font: 700 13px var(--body);
    letter-spacing: .16em;
    align-items: center;
    gap: 6px;
    display: flex
}

.pass-track {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    flex: 1;
    gap: 10px;
    min-width: 0;
    padding: 0 0 10px;
    display: flex;
    overflow-x: auto
}

.pass-track::-webkit-scrollbar {
    display: none
}

.pass-col {
    flex: 0 0 var(--tile);
    scroll-snap-align: start;
    flex-direction: column;
    gap: 10px;
    display: flex
}

.pass-col>* {
    flex: none
}

.pass-num {
    height: 24px;
    font: 700 13px/24px var(--body);
    letter-spacing: .08em;
    text-align: center;
    color: var(--pass-quiet);
    white-space: nowrap;
    border-radius: 6px
}

.pass-col.is-reached .pass-num {
    color: var(--pass-ink)
}

.pass-col.is-now .pass-num {
    background: var(--pass-ink);
    color: var(--pass-on-ink)
}

:is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-standard {
    --hue: #6f8f98;
    --hue-ink: #a9b6bb
}

:is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-rare {
    --hue: #2560d8;
    --hue-ink: #7fb0ff
}

:is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-epic {
    --hue: #7a33d6;
    --hue-ink: #c99bff
}

:is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-legendary {
    --hue: #f08a1c;
    --hue-ink: #ffb45c
}

:is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-mythic {
    --hue: #c3134a;
    --hue-ink: #ff7d9c
}

.game-shell[data-menus=light] :is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-standard {
    --hue-ink: #4f6b73
}

.game-shell[data-menus=light] :is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-rare {
    --hue-ink: #2560d8
}

.game-shell[data-menus=light] :is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-epic {
    --hue-ink: #7a33d6
}

.game-shell[data-menus=light] :is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-legendary {
    --hue-ink: #b8600a
}

.game-shell[data-menus=light] :is(.pass-reward,.pass-preview,.gu-item,.sh-card,.sh-look,.sh-pieces button,.sh-contents li,.sh-set-head).is-mythic {
    --hue-ink: #c3134a
}

.pass-reward,.pass-preview-art {
    background: var(--pass-tile);
    background: linear-gradient(var(--hue,transparent),var(--hue,transparent)) 0 100%/100% 4px no-repeat,color-mix(in srgb,var(--hue,var(--pass-tile)) var(--pass-tint),var(--pass-tile))
}

.pass-reward {
    width: var(--tile);
    height: var(--tile);
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 8px;
    transition: transform .15s,box-shadow .15s;
    position: relative
}

.pass-reward:hover {
    transform: translateY(-2px)
}

.pass-col.is-now .pass-reward:not(.is-empty) {
    box-shadow: inset 0 0 0 2px var(--pass-ink)
}

.pass-reward.is-picked {
    box-shadow: inset 0 0 0 2px var(--pass-ink),0 8px 16px var(--pass-lift);
    transform: translateY(-3px)
}

.pass-reward:focus-visible {
    outline: 2px solid var(--pass-ink);
    outline-offset: -6px
}

.pass-reward img {
    object-fit: contain;
    filter: drop-shadow(0 5px 7px #0003);
    width: 100%;
    height: 100%;
    display: block
}

.pass-pow {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: 100%;
    display: flex
}

.pass-reward .pass-pow img.pow-icon {
    filter: none;
    width: 28%;
    height: 28%
}

.pass-pow b {
    font: 700 24px/1 var(--body);
    letter-spacing: .02em
}

.pass-reward.is-empty {
    background: var(--pass-empty);
    cursor: default
}

.pass-reward.is-empty:hover {
    transform: none
}

.pass-mark {
    background: var(--pass-panel);
    color: var(--pass-ink);
    box-shadow: 0 0 0 1px var(--pass-line);
    border-radius: 50%;
    padding: 3px;
    position: absolute;
    top: 7px;
    right: 7px
}

.pass-reward.is-given .pass-mark {
    background: var(--pass-ink);
    color: var(--pass-on-ink);
    box-shadow: none
}

.pass-foot {
    border-top: 1px solid var(--pass-line);
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: auto;
    padding: 14px 0 8px;
    display: flex
}

.pass-preview {
    flex: 300px;
    align-items: center;
    gap: 16px;
    min-width: 0;
    display: flex
}

.pass-preview-art {
    border-radius: 8px;
    flex: none;
    place-items: center;
    width: 88px;
    height: 88px;
    padding: 7px;
    display: grid
}

.pass-preview-art img {
    object-fit: contain;
    filter: drop-shadow(0 5px 7px #0003);
    width: 100%;
    height: 100%
}

.pass-preview.is-pow .pass-preview-art img {
    filter: none;
    width: 58%;
    height: 58%
}

.pass-preview-words {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    display: flex
}

.pass-preview-words small,.pass-preview-words i {
    font: 700 12px var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-style: normal
}

.pass-preview-words i {
    color: var(--hue-ink,var(--pass-ink))
}

.pass-preview-words b {
    font: 400 30px/1.05 var(--display);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.pass-actions {
    flex-wrap: wrap;
    flex: 440px;
    align-items: center;
    gap: 10px;
    display: flex
}

.bc-shell .pass-foot .bc-start {
    background: var(--pass-ink);
    height: 58px;
    color: var(--pass-on-ink);
    font: 700 14px var(--body);
    letter-spacing: .14em;
    border: 0;
    border-radius: 10px;
    flex: 1
}

.bc-shell .pass-foot .bc-start:hover {
    background: var(--pass-hover);
    transform: none
}

.bc-shell .pass-foot .bc-start>span,.pass-foot .bc-start small {
    white-space: nowrap
}

.bc-shell .pass-foot .pass-buy {
    flex-grow: 1.5
}

.pass-foot .bc-start small {
    letter-spacing: .06em;
    margin-left: auto;
    font-size: 13px;
    font-weight: 700
}

.pass-foot .bc-start small+svg {
    margin-left: 10px
}

.pass-owned {
    height: 58px;
    box-shadow: inset 0 0 0 1px var(--pass-line);
    font: 700 13px var(--body);
    letter-spacing: .14em;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    display: inline-flex
}

@media (max-width: 820px) {
    .bc-pass {
        overflow:hidden auto
    }

    .pass-status {
        flex-direction: column;
        gap: 8px;
        margin-top: 10px
    }

    .pass-level,.pass-today {
        padding: 10px 14px
    }

    .pass-level {
        gap: 14px
    }

    .pass-today {
        min-width: 0
    }

    .pass-today b {
        font-size: 20px
    }

    .pass-level-bar p {
        letter-spacing: .06em;
        font-size: 12px
    }

    .pass-nav {
        margin-top: 10px
    }

    .pass-nav-lock {
        display: none
    }

    .pass-board {
        --tile: 78px;
        flex: none;
        container-type: normal
    }

    .pass-rows span {
        font-size: 12px
    }

    .pass-tier b {
        font-size: 40px
    }

    .pass-preview {
        flex-basis: 100%;
        gap: 12px
    }

    .pass-preview-art {
        width: 56px;
        height: 56px
    }

    .pass-preview-words b {
        font-size: 22px
    }

    .bc-shell .pass-foot .bc-start,.pass-owned {
        height: 50px
    }
}

@media (max-width: 620px) {
    .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-tabs {
        background:var(--pass-page)
    }

    .bc-shell:is(.bc-tab-pass,.bc-tab-shop,.bc-tab-pow,.bc-tab-board,.bc-tab-replays,.bc-tab-updates) .bc-shade {
        background: linear-gradient(180deg,transparent 0%,var(--pass-page) 11%)
    }
}

@media (max-width: 480px) {
    .pass-actions .bc-start {
        flex-basis:100%
    }
}

.top-wallet {
    color: #f7f6ef;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #101e27b8;
    border: 1px solid #ffffff4a;
    border-radius: 6px;
    align-items: stretch;
    min-height: 40px;
    display: flex;
    overflow: hidden
}

.top-pow {
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 12px 0 9px;
    display: flex
}

.top-pow b {
    font: 400 21px/1 var(--display);
    letter-spacing: .02em;
    white-space: nowrap
}

.top-get-pow {
    color: #101418;
    font: 400 15px/1 var(--display);
    letter-spacing: .04em;
    white-space: nowrap;
    cursor: pointer;
    background: #f7f6ef;
    border: 0;
    align-items: center;
    gap: 5px;
    padding: 0 13px 0 11px;
    display: inline-flex
}

.top-get-pow:hover {
    background: #fff
}

@media (max-width: 760px) {
    .top-wallet {
        min-height:38px
    }

    .top-pow {
        gap: 4px;
        padding: 0 8px 0 6px
    }

    .top-pow .pow-icon {
        width: 19px;
        height: 19px
    }

    .top-pow b {
        font-size: 17px
    }

    .top-get-pow {
        padding: 0 9px;
        font-size: 13px
    }

    .top-get-pow svg {
        display: none
    }
}

@media (max-width: 540px) {
    .top-actions:has(.top-wallet) .game-menu-trigger {
        padding:0 10px
    }

    .top-actions:has(.top-wallet) .game-menu-trigger>span {
        display: none
    }
}

@media (max-width: 480px) {
    .is-intro:has(.bc-shell) .topbar:has(.top-wallet) .wordmark {
        clip-path:inset(50%);
        white-space: nowrap;
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden
    }

    .is-intro:has(.bc-shell) .topbar:has(.top-wallet) .top-actions {
        margin-left: auto
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .top-wallet {
        max-width:176px;
        min-height: 34px
    }

    .top-pow {
        gap: 4px;
        padding: 0 8px 0 6px
    }

    .top-pow .pow-icon {
        width: 19px;
        height: 19px
    }

    .top-pow b {
        font-size: 17px
    }

    .top-get-pow {
        padding: 0 9px;
        font-size: 13px
    }

    .top-get-pow svg {
        display: none
    }
}

@media (min-width: 1061px) {
    .top-wallet {
        max-width:236px
    }
}

.sh-get small {
    letter-spacing: 1px;
    margin-left: auto;
    font-size: 13px;
    font-weight: 800
}

.sh-footer .sh-ride {
    order: -1;
    margin: 0 0 8px
}

.sh-get small+svg {
    margin-left: 8px
}

.pp-list {
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 0 0 18px;
    display: grid
}

.pp-what {
    font: 400 15px/1.45 var(--body);
    color: var(--card-copy);
    margin: 10px 0 18px
}

.pp-have {
    font: 700 13px/1 var(--body);
    letter-spacing: .1em;
    color: var(--card-copy);
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    display: flex
}

.pp-have b {
    font: 700 20px/1 var(--body);
    letter-spacing: .02em;
    color: var(--card-ink)
}

.pp-goal {
    background: var(--card-tile);
    border-radius: 12px;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding: 12px 16px 12px 12px;
    display: grid
}

.pp-goal-icon {
    background: var(--card-bg);
    border-radius: 10px;
    place-items: center;
    width: 52px;
    height: 52px;
    display: grid
}

.pp-goal-icon img {
    object-fit: contain;
    width: 40px;
    height: 40px
}

.pp-goal-name {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.pp-goal-name b {
    font: 700 15px/1.2 var(--body);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.pp-goal-name small {
    font: 700 13px/1 var(--body);
    letter-spacing: .04em;
    color: var(--card-copy);
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.pp-goal-need {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    display: flex
}

.pp-goal-need small {
    font: 700 12px/1 var(--body);
    letter-spacing: .1em;
    color: var(--card-copy)
}

.pp-goal-need b {
    font: 700 20px/1 var(--body);
    letter-spacing: .02em;
    white-space: nowrap
}

.pp-pack {
    border: 1px solid var(--card-line);
    background: var(--card-tile);
    color: var(--card-ink);
    cursor: pointer;
    border-radius: 14px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px 10px 10px;
    transition: transform .15s,border-color .15s;
    display: flex;
    position: relative
}

.pp-pack:hover {
    border-color: var(--card-ink);
    transform: translateY(-2px)
}

.pp-pack.is-covers {
    border: 2px solid var(--card-ink)
}

.pp-pack .pow-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 4px
}

.pp-pack b {
    font: 700 28px/1 var(--body);
    letter-spacing: .01em;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    display: flex
}

.pp-pack b small {
    letter-spacing: .14em;
    color: var(--card-copy);
    font-size: 12px
}

.pp-pack>span {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    font: 700 15px/1 var(--body);
    letter-spacing: .06em;
    text-align: center;
    white-space: nowrap;
    border-radius: 9px;
    align-self: stretch;
    margin-top: 12px;
    padding: 10px 0
}

.pp-tag {
    background: var(--card-ink);
    color: var(--card-bg);
    font: 700 12px/1 var(--body);
    letter-spacing: .1em;
    white-space: nowrap;
    border-radius: 999px;
    padding: 5px 10px;
    font-style: normal;
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translate(-50%)
}

.pp-tag.is-bonus {
    background: var(--card-bg);
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line)
}

.game-shell .pow-packs .gu-terms {
    margin: 0
}

.gu-item.is-pow .gu-icons {
    background: var(--card-bg);
    place-items: center;
    display: grid
}

.gu-item.is-pow .gu-icons img.pow-icon {
    width: 40px;
    height: 40px;
    position: static
}

.sh-footer .sh-buy small i,.pass-foot .pass-buy small i {
    opacity: .8;
    margin-left: 4px;
    font-size: 12px;
    font-style: normal
}

.pass-foot .pass-buy small {
    align-items: center;
    gap: 5px;
    display: inline-flex
}

.bc-shell .pass-foot .pass-buy.is-armed {
    background: var(--pass-panel);
    color: var(--pass-ink);
    box-shadow: inset 0 0 0 2px var(--pass-ink)
}

.pass-foot .pass-buy:disabled {
    cursor: default;
    opacity: .75
}

.pass-foot .sh-problem {
    font: 700 13px/1.2 var(--body);
    letter-spacing: .08em;
    color: var(--pass-alert);
    flex-basis: 100%;
    margin: 0
}

.sh-footer .sh-return {
    color: #f7f6ef;
    font: 400 15px/1 var(--display);
    letter-spacing: .04em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-basis: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 0;
    display: flex
}

.sh-footer .sh-return small {
    letter-spacing: .06em;
    background: #ffffff1f;
    border-radius: 4px;
    margin-left: 4px;
    padding: 3px 6px 2px;
    font-size: 11px
}

.sh-footer .sh-return.is-armed {
    color: #c6ff3d
}

@media (max-width: 520px) {
    .game-shell dialog.pause-card:is(.pow-packs,.grown-up-card,.gift-card) {
        padding:24px 18px 18px
    }

    .pp-list {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .pp-pack {
        flex-direction: row;
        gap: 12px;
        padding: 14px
    }

    .pp-pack .pow-icon {
        width: 32px;
        height: 32px;
        margin: 0
    }

    .pp-pack b {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        margin-right: auto;
        font-size: 24px
    }

    .pp-pack>span {
        align-self: center;
        margin: 0;
        padding: 10px 16px
    }

    .pp-tag {
        left: auto;
        right: 14px;
        transform: none
    }

    .game-shell :is(.pow-packs,.grown-up-card,.gift-card) h2 {
        font-size: 32px
    }

    .pp-goal {
        grid-template-columns: 44px 1fr
    }

    .pp-goal-icon {
        width: 44px;
        height: 44px
    }

    .pp-goal-need {
        flex-direction: row;
        grid-column: 1/-1;
        justify-content: space-between;
        align-items: baseline
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell dialog.pause-card:is(.pow-packs,.grown-up-card,.gift-card) {
        max-height:calc(100% - 16px);
        padding: 16px 20px 14px
    }

    .game-shell :is(.pow-packs,.grown-up-card,.gift-card) h2 {
        font-size: 28px
    }

    .game-shell :is(.pow-packs,.grown-up-card,.gift-card) .close-button {
        top: 12px;
        right: 14px
    }

    .pp-what {
        display: none
    }

    .pp-goal,.pp-have {
        margin: 10px 0 12px
    }

    .pp-goal {
        padding: 8px 12px 8px 8px
    }

    .pp-goal-icon {
        width: 40px;
        height: 40px
    }

    .pp-goal-icon img {
        width: 32px;
        height: 32px
    }

    .pp-list {
        margin: 0 0 10px
    }

    .pp-pack {
        padding: 16px 8px 8px
    }

    .pp-pack .pow-icon {
        width: 28px;
        height: 28px;
        margin: 0
    }

    .pp-pack b {
        font-size: 22px
    }

    .pp-pack>span {
        margin-top: 8px;
        padding: 8px 0
    }

    .gu-item {
        grid-template-columns: 44px 1fr auto;
        margin: 10px 0 12px;
        padding: 6px 12px 6px 6px
    }

    .gu-icons {
        width: 44px;
        height: 44px
    }

    .gu-icons img {
        width: 36px;
        height: 36px;
        inset: 4px
    }

    .game-shell dialog.pause-card.grown-up-card.is-ready {
        grid-template-columns: 150px 1fr;
        grid-template-areas: "title title""code item""code state""code open""code terms";
        align-content: start;
        column-gap: 18px;
        width: min(580px,100% - 32px);
        display: grid
    }

    .grown-up-card.is-ready h2 {
        grid-area: title
    }

    .grown-up-card.is-ready .gu-item {
        grid-area: item;
        margin: 10px 0 8px
    }

    .grown-up-card.is-ready .gu-code {
        grid-area: code;
        align-self: start;
        width: 150px;
        margin: 10px 0 0;
        padding: 8px
    }

    .grown-up-card.is-ready .gu-state {
        grid-area: state;
        justify-content: flex-start;
        margin: 0 0 8px
    }

    .game-shell .grown-up-card.is-ready .gu-open {
        grid-area: open;
        height: 44px
    }

    .grown-up-card.is-ready .gu-terms {
        text-align: left;
        grid-area: terms;
        margin: 8px 0 0
    }
}

.results-xp,.results-tier {
    color: #f7f6ef;
    height: 30px;
    font: 400 15px/1 var(--display);
    letter-spacing: .04em;
    background: #101418;
    border-radius: 7px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    display: inline-flex;
    box-shadow: 0 0 0 2px #8e8e93,3px 3px 0 2px #0000004d
}

.results-xp {
    transform: rotate(-4deg)
}

.results-tier {
    transform: rotate(2deg)
}

.results-tier.is-up {
    color: #101418;
    background: #c6ff3d;
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000004d
}

.results-tier small {
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    font-size: 13px;
    display: inline-flex
}

.results-tier small span {
    align-items: center;
    gap: 3px;
    display: inline-flex
}

.results-tier img.pow-icon {
    filter: none
}

.new-for-you {
    width: min(460px,100% - 32px)
}

.game-shell .new-for-you h2 {
    margin: 10px 0 22px;
    font-size: 44px
}

.nfy-big {
    color: #f7f6ef;
    font: 400 54px/1 var(--display);
    letter-spacing: .02em;
    background: #101418;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 18px 16px 15px;
    display: flex;
    transform: rotate(-1.5deg);
    box-shadow: 0 0 0 2px #8e8e93,3px 3px 0 2px #0000004d
}

.nfy-tiles {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 10px;
    margin: 0 0 18px;
    display: flex
}

.nfy-tile {
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: calc(33.3333% - 6.66667px);
    min-width: 0;
    display: flex
}

.nfy-art {
    aspect-ratio: 1;
    background: var(--rarity);
    border-radius: 14px;
    place-items: center;
    width: 100%;
    display: grid;
    box-shadow: inset 0 0 0 1px #ffffff2e,0 6px 16px #0006
}

.nfy-art img {
    object-fit: contain;
    width: 84%;
    height: 84%
}

.nfy-tile b {
    color: #f7f6ef;
    max-width: 100%;
    font: 400 15px/1.1 var(--display);
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.nfy-tile.is-pow .nfy-art {
    background: #101418;
    box-shadow: 0 0 0 2px #8e8e93,3px 3px 0 2px #0000004d
}

.nfy-tile.is-pow .nfy-art img.pow-icon {
    width: 48%;
    height: 48%
}

.nfy-tile.is-more {
    aspect-ratio: 1;
    background: #ffffff14;
    border-radius: 14px;
    justify-content: center;
    box-shadow: inset 0 0 0 1px #ffffff2e
}

.nfy-tile.is-more b {
    font-size: 32px
}

.nfy-line {
    color: #f7f6ef;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.45
}

.nfy-steps {
    justify-content: center;
    gap: 7px;
    display: flex
}

.nfy-steps i {
    background: #ffffff40;
    border-radius: 50%;
    width: 7px;
    height: 7px
}

.nfy-steps i.is-now {
    background: #f7f6ef
}

@media (max-width: 620px) {
    .nfy-tile b {
        -webkit-line-clamp:3;
        font-size: 13px
    }

    .nfy-big {
        font-size: 42px
    }

    .game-shell .new-for-you h2 {
        font-size: 38px
    }
}

.game-shell dialog.pause-card.gift-card {
    overscroll-behavior: contain;
    width: min(480px,100% - 32px);
    max-height: calc(100% - 24px);
    overflow-y: auto
}

.gift-card .gu-item strong {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.gift-card .primary-button,.gift-card .primary-button:disabled {
    background: var(--card-btn);
    width: 100%;
    max-width: none;
    height: 54px;
    color: var(--card-btn-ink);
    font: 700 14px/1 var(--body);
    letter-spacing: .12em;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    display: flex
}

.gift-card .primary-button:hover:not(:disabled) {
    background: var(--card-btn-hover);
    transform: none
}

.gift-card .primary-button:disabled {
    opacity: .55;
    cursor: default
}

.gift-card .primary-button small {
    font: 700 14px/1 var(--body);
    letter-spacing: .04em;
    align-items: center;
    gap: 5px;
    display: inline-flex
}

.gift-card .gu-state .text-button {
    color: inherit;
    font: inherit;
    margin-left: 8px;
    text-decoration: underline
}

.gf-head {
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 10px;
    display: flex
}

.gf-head b {
    font: 700 13px/1 var(--body);
    letter-spacing: .14em;
    color: var(--card-ink)
}

.gf-head small {
    font: 700 12px/1 var(--body);
    letter-spacing: .1em;
    color: var(--card-copy)
}

.gf-none {
    font: 400 15px/1.45 var(--body);
    color: var(--card-copy);
    margin: 0 0 4px
}

.gf-list {
    gap: 6px;
    max-height: min(300px,38vh);
    margin: 0;
    padding: 0 2px 0 0;
    list-style: none;
    display: grid;
    overflow-y: auto
}

.gf-friend {
    border: 1px solid var(--card-line);
    background: var(--card-tile);
    width: 100%;
    min-height: 48px;
    color: var(--card-ink);
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 12px;
    transition: border-color .15s;
    display: grid
}

.gf-friend:hover:not(:disabled),.gf-friend.is-picked {
    border-color: var(--card-ink)
}

.gf-friend b {
    font: 700 15px/1.2 var(--body);
    letter-spacing: .04em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.gf-friend em {
    font: 700 12px/1 var(--body);
    letter-spacing: .1em;
    white-space: nowrap;
    color: var(--card-copy);
    font-style: normal
}

.gf-friend.is-not-now {
    cursor: default;
    opacity: .62
}

.gf-tick {
    border: 2px solid var(--card-line);
    border-radius: 50%;
    place-items: center;
    width: 22px;
    height: 22px;
    display: grid
}

.gf-friend.is-picked .gf-tick {
    border-color: var(--card-btn);
    background: var(--card-btn);
    color: var(--card-btn-ink)
}

.gf-sent {
    font: 700 14px/1.4 var(--body);
    letter-spacing: .12em;
    text-align: center;
    color: var(--card-ink);
    margin: 0 0 4px;
    display: block
}

.sh-footer .sh-gift svg {
    flex: none
}

@media (max-height: 520px) {
    .gf-list {
        max-height:28vh
    }

    .gift-card .gu-item {
        margin: 12px 0 14px
    }
}

@media (max-width: 440px) {
    .gift-card .gu-item {
        grid-template-columns:48px 1fr auto;
        gap: 10px;
        padding: 8px 12px 8px 8px
    }

    .gift-card .gu-icons {
        width: 48px;
        height: 48px
    }

    .gift-card .gu-icons img {
        width: 38px;
        height: 38px;
        inset: 5px
    }

    .gift-card .gu-item b {
        font-size: 19px
    }

    .gift-card .gu-item strong {
        font-size: 17px
    }

    .gift-card .primary-button,.gift-card .primary-button:disabled {
        letter-spacing: .1em;
        font-size: 13px
    }
}

.bc-shell .pass-foot .pass-gift {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    color: var(--pass-ink);
    flex-basis: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 0 0;
    display: inline-flex
}

.bc-loading .bc-art img {
    filter: none;
    object-position: var(--art-focus,65%) top
}

.bc-loading .bc-art-placeholder {
    filter: blur(2px)
}

.bc-loading .bc-shade {
    background: linear-gradient(90deg,#0718229c 0%,#07182238 43%,#0000 72%),linear-gradient(#06131d20,#0000 15% 57%,#06131d9c 83%,#06131dea 100%)
}

.bc-shell.bc-loading .bc-load-content {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 6.5%;
    display: flex;
    position: absolute;
    inset: 0
}

.bc-load-identity {
    filter: drop-shadow(0 2px 24px #03202a33);
    width: min(45vw,660px);
    margin-top: -90px
}

.bc-shell.bc-loading .bc-load-identity h1 {
    margin: 0;
    line-height: 0
}

.bc-load-identity .steez8-mark {
    width: 100%;
    height: auto;
    overflow: visible
}

.bc-shell.bc-loading .bc-loading-bottom {
    max-width: none;
    margin: 0;
    position: absolute;
    bottom: 72px;
    left: 6.5%;
    right: 6.5%
}

.bc-shell.bc-loading .bc-progress-copy {
    letter-spacing: .18em;
    color: #e7eef0;
    align-items: baseline;
    font-size: 10px
}

.bc-shell.bc-loading .bc-progress-copy strong {
    font-family: var(--display);
    letter-spacing: .015em;
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    line-height: 1
}

.bc-progress-copy strong small {
    font-family: var(--body);
    color: #cbdadd;
    margin-left: 3px;
    font-size: 12px
}

.bc-progress-copy strong .bc-loading-pulse {
    font-family: var(--body);
    letter-spacing: .18em;
    font-size: 10px
}

.bc-loading .bc-progress {
    background: #f1f7fa38;
    height: 2px;
    margin-top: 14px
}

.bc-loading .bc-progress>span {
    background: #ffac81;
    box-shadow: 0 0 14px #ffa07180
}

.bc-load-note {
    align-items: flex-start;
    gap: 24px;
    min-height: 38px;
    padding-top: 14px;
    display: flex;
    position: relative
}

.bc-shell.bc-loading .bc-load-tip {
    color: #d2e0e5;
    max-width: 650px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5
}

.bc-loading .bc-retry {
    white-space: nowrap;
    background: #07192388;
    flex-shrink: 0;
    margin-top: -3px;
    padding: 6px 12px;
    font-size: 11px
}

.is-intro:has(.bc-loading) .topbar .wordmark {
    visibility: hidden
}

.is-intro:has(.bc-loading) .top-actions {
    display: none
}

.is-intro:has(.bc-loading) .music-player {
    display: none
}

@media (min-width: 1800px) {
    .bc-load-identity {
        width:47vw;
        max-width: 860px
    }
}

@media (max-width: 900px) {
    .bc-load-identity {
        width:53vw
    }
}

@media (max-width: 620px) {
    .bc-loading .bc-art img {
        object-position:var(--art-mobile-focus,70%) 40%
    }

    .bc-loading .bc-shade {
        background: linear-gradient(#06131d38,#06131d10 35%,#06131dcd 77%,#06131dfc 100%),linear-gradient(90deg,#07182228,#0000)
    }

    .bc-shell.bc-loading .bc-load-content {
        justify-content: flex-end;
        padding: 0 7%
    }

    .bc-load-identity {
        filter: drop-shadow(0 2px 16px #00172580);
        width: 100%;
        margin: 0 0 220px
    }

    .bc-shell.bc-loading .bc-loading-bottom {
        bottom: 48px;
        left: 7%;
        right: 7%
    }

    .bc-shell.bc-loading .bc-progress-copy {
        letter-spacing: .1em;
        font-size: 9px
    }

    .bc-shell.bc-loading .bc-progress-copy strong {
        font-size: 28px
    }

    .bc-shell.bc-loading .bc-load-tip {
        max-width: none;
        font-size: 11px
    }

    .bc-load-note {
        flex-wrap: wrap;
        gap: 8px;
        min-height: 52px;
        padding-top: 12px
    }
}

@media (max-height: 620px) and (min-width:621px) {
    .bc-load-identity {
        width:min(43vw,460px);
        margin-top: -75px
    }

    .bc-shell.bc-loading .bc-loading-bottom {
        bottom: 40px
    }

    .bc-load-note {
        min-height: 28px;
        padding-top: 9px
    }
}

@media (max-height: 700px) and (max-width:620px) {
    .bc-load-identity {
        margin-bottom:205px
    }
}

[data-loading-art-theme=light] .bc-loading {
    color: #111;
    background: #fff
}

[data-loading-art-theme=light] .bc-loading .bc-shade {
    background: 0 0
}

[data-loading-art-theme=light] .bc-loading .bc-art img {
    object-fit: contain;
    object-position: right center;
    transition: none
}

[data-loading-art-theme=light] .bc-loading .bc-art-placeholder {
    filter: none;
    background-color: #fff;
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    transform: none
}

[data-loading-art-theme=light] .bc-loading .bc-load-identity {
    filter: none
}

[data-loading-art-theme=light] .bc-loading .steez8-mark {
    color: #111
}

[data-loading-art-theme=light] .bc-loading .steez8-mark path {
    fill: currentColor
}

[data-loading-art-theme=light] .bc-shell.bc-loading .bc-loading-bottom {
    width: 44%;
    max-width: 660px;
    right: auto
}

[data-loading-art-theme=light] .bc-shell.bc-loading .bc-progress-copy,[data-loading-art-theme=light] .bc-shell.bc-loading .bc-load-tip,[data-loading-art-theme=light] .bc-loading .bc-progress-copy strong small {
    color: #505050
}

[data-loading-art-theme=light] .bc-shell.bc-loading .bc-progress-copy strong {
    color: #111
}

[data-loading-art-theme=light] .bc-loading .bc-progress {
    background: #1112
}

[data-loading-art-theme=light] .bc-loading .bc-progress>span {
    box-shadow: none;
    background: #111
}

[data-loading-art-theme=light] .bc-loading .bc-retry {
    color: #111;
    background: #fff;
    border-color: #777
}

[data-loading-art-theme=light] .is-intro:has(.bc-loading) .topbar .icon-button {
    color: #111;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fffd;
    border-color: #1113
}

[data-loading-art-theme=light] .is-intro:has(.bc-loading) .topbar .icon-button:hover {
    background: #eee
}

@media (max-width: 620px) and (orientation:portrait) {
    [data-loading-art-theme=light] .bc-loading .bc-art img,[data-loading-art-theme=light] .bc-loading .bc-art-placeholder {
        object-position:center center;
        background-position: 50%;
        background-size: contain;
        height: calc(100% - 290px);
        top: 20px
    }

    [data-loading-art-theme=light] .bc-loading .bc-art-placeholder {
        background-image: var(--cork7-startup-portrait-preview)!important
    }

    [data-loading-art-theme=light] .bc-loading .bc-load-identity {
        margin-bottom: 185px
    }

    [data-loading-art-theme=light] .bc-shell.bc-loading .bc-loading-bottom {
        width: auto;
        max-width: none;
        bottom: 32px;
        right: 7%
    }
}

.pn {
    --pn-panel: #141518;
    --pn-tile: #1b1c1f;
    --pn-ink: #f2f2ee;
    --pn-on-ink: #111;
    --pn-hover: #fff;
    --pn-copy: #c9c9cc;
    --pn-quiet: #8d8d92;
    --pn-line: #ffffff1c;
    min-width: 0;
    color: var(--pn-ink);
    flex-direction: column;
    gap: 30px;
    display: flex;
    container: pn/inline-size
}

.bc-shell .pn {
    --pn-panel: var(--pass-panel);
    --pn-tile: var(--pass-tile);
    --pn-ink: var(--pass-ink);
    --pn-on-ink: var(--pass-on-ink);
    --pn-hover: var(--pass-hover);
    --pn-quiet: var(--pass-quiet);
    --pn-line: var(--pass-line);
    --pn-copy: color-mix(in srgb,var(--pass-ink) 80%,transparent)
}

.info-page .pn {
    --pn-panel: #fff;
    --pn-tile: var(--soft);
    --pn-ink: var(--ink);
    --pn-on-ink: #fff;
    --pn-hover: #2c2c2e;
    --pn-copy: var(--copy);
    --pn-quiet: var(--quiet);
    --pn-line: var(--line)
}

:is(.pn button:focus-visible,.pn a:focus-visible) {
    outline: 2px solid var(--pn-ink);
    outline-offset: 2px
}

.pn-hero,.pn-card {
    background: var(--pn-panel);
    min-width: 0;
    box-shadow: inset 0 0 0 1px var(--pn-line);
    border-radius: 14px;
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.pn-hero {
    border-radius: 16px
}

.pn-media {
    aspect-ratio: 8/3;
    background: var(--pn-tile);
    color: var(--pn-quiet);
    place-items: center;
    display: grid;
    position: relative;
    overflow: hidden
}

.pn-media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.pn-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px 18px;
    display: flex
}

.pn-hero .pn-copy {
    gap: 12px;
    padding: 22px 26px 26px
}

.pn-kicker {
    font: 700 12px/1.2 var(--body);
    letter-spacing: .14em;
    color: var(--pn-quiet)
}

.pn .pn-hero h2 {
    font: 400 clamp(30px,3vw,46px)/1 var(--display);
    color: var(--pn-ink);
    margin: 0
}

.pn-card h4 {
    font: 400 22px/1.05 var(--display);
    color: var(--pn-ink);
    margin: 0
}

.pn .pn-copy p {
    font: 400 15px/1.55 var(--body);
    color: var(--pn-copy);
    margin: 0
}

.pn .pn-hero .pn-copy p {
    max-width: 68ch;
    font-size: 16px
}

.pn-card:not(.is-open) .pn-copy p {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.pn-highlights {
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.pn .pn-highlights li {
    background: var(--pn-tile);
    box-shadow: inset 0 0 0 1px var(--pn-line);
    color: var(--pn-ink);
    font: 700 11px/1 var(--body);
    letter-spacing: .1em;
    border-radius: 99px;
    padding: 6px 10px
}

.pn-more {
    color: var(--pn-ink);
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    text-decoration: underline;
    -webkit-text-decoration-color: var(--pn-line);
    text-decoration-color: var(--pn-line);
    text-underline-offset: 5px;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 4px 0
}

.pn-more:hover {
    text-decoration-color: currentColor
}

.pn-link {
    background: var(--pn-ink);
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 9px;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    text-decoration: none;
    transition: background .15s;
    display: inline-flex;
    color: var(--pn-on-ink)!important
}

.pn-link:hover {
    background: var(--pn-hover)
}

.pn-month h3 {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    color: var(--pn-quiet);
    margin: 0 0 12px
}

.pn-grid {
    grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
    align-items: start;
    gap: 16px;
    display: grid
}

.pn-card.is-open {
    box-shadow: inset 0 0 0 1.5px var(--pn-ink)
}

.pn-older {
    background: var(--pn-panel);
    width: 100%;
    height: 50px;
    box-shadow: inset 0 0 0 1px var(--pn-line);
    color: var(--pn-ink);
    font: 700 13px/1 var(--body);
    letter-spacing: .14em;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: flex
}

.pn-older:hover {
    box-shadow: inset 0 0 0 1.5px var(--pn-ink)
}

.pn-older small {
    color: var(--pn-quiet);
    font-size: 11px
}

@container pn (width>=980px) {
    .pn-hero {
        grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
        display: grid
    }

    .pn-hero .pn-media {
        aspect-ratio: auto;
        min-height: 100%
    }

    .pn-hero .pn-copy {
        justify-content: center;
        padding: 30px 34px
    }
}

@container pn (width<=560px) {
    .pn {
        gap: 22px
    }

    .pn-hero .pn-copy {
        padding: 16px 16px 18px
    }

    .pn .pn-hero h2 {
        font-size: 30px
    }

    .pn .pn-hero .pn-copy p {
        font-size: 15px
    }

    .pn-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 10px
    }

    .pn-card {
        grid-template-columns: 104px minmax(0,1fr);
        display: grid
    }

    .pn-card .pn-media {
        aspect-ratio: auto;
        min-height: 100%
    }

    .pn-card .pn-copy {
        gap: 6px;
        padding: 12px 14px
    }

    .pn-card h4 {
        font-size: 19px
    }

    .pn .pn-card .pn-copy p {
        font-size: 14px
    }

    .pn-card:not(.is-open) .pn-copy p {
        -webkit-line-clamp: 3
    }
}

.bc-shell .bc-updates {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--pass-line) transparent;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: calc(100% - 70px);
    display: flex;
    overflow-y: auto
}

.bc-updates>* {
    flex: none
}

.bc-shell .bc-updates h1 {
    color: var(--pass-ink);
    margin: 0 0 20px;
    font-size: clamp(44px,4.2vw,72px);
    rotate: none
}

.bc-shell .bc-updates h1 em {
    color: var(--pass-ink)
}

.bc-updates .pn {
    padding-bottom: 16px
}

@media (max-width: 620px) {
    .bc-shell .bc-updates {
        height:auto;
        overflow: visible
    }

    .bc-tab-updates .bc-lobby-content {
        bottom: max(12px,env(safe-area-inset-bottom))
    }

    .bc-shell .bc-updates h1 {
        margin-bottom: 14px;
        font-size: clamp(34px,10vw,48px)
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell .bc-shell .bc-updates {
        flex:1;
        height: auto;
        min-height: 0;
        overflow-y: auto
    }

    .game-shell .bc-shell .bc-updates h1 {
        margin: 2px 0 10px;
        font-size: 28px
    }

    .bc-updates .pn {
        gap: 18px
    }

    .bc-updates .pn-hero {
        grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
        display: grid
    }

    .bc-updates .pn-hero .pn-media {
        aspect-ratio: auto;
        min-height: 100%
    }

    .bc-updates .pn-hero .pn-copy {
        gap: 8px;
        padding: 14px 16px
    }

    .bc-updates .pn .pn-hero h2 {
        font-size: 24px
    }

    .bc-updates .pn .pn-hero .pn-copy p {
        font-size: 13px;
        line-height: 1.45
    }

    .bc-updates .pn-grid {
        grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
        gap: 10px
    }

    .bc-updates .pn-card {
        display: flex
    }

    .bc-updates .pn-card .pn-media {
        aspect-ratio: 8/3;
        min-height: 0
    }

    .bc-updates .pn-card .pn-copy {
        gap: 6px;
        padding: 10px 12px 12px
    }

    .bc-updates .pn-card h4 {
        font-size: 18px
    }

    .bc-updates .pn .pn-card .pn-copy p {
        font-size: 13px
    }
}

.bc-tabs small.bc-new {
    background: var(--bc-orange);
    color: #17313b;
    letter-spacing: .6px;
    font-weight: 800
}

.bc-news {
    border: 1px solid var(--bc-line);
    color: var(--bc-muted);
    letter-spacing: .6px;
    background: 0 0;
    border-radius: 3px;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 9px 13px;
    font-size: 11px;
    display: inline-flex
}

.bc-news b {
    color: #fff;
    letter-spacing: 0;
    font-weight: 600
}

.bc-news:hover {
    border-color: var(--bc-orange);
    color: #fff
}

.bc-news.has-new:before {
    content: "";
    background: var(--bc-orange);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 8px var(--bc-orange);
    border-radius: 50%
}

@media (max-width: 760px) {
    .bc-tabs {
        --tab-gap:16px;
        max-width: none
    }

    .bc-tabs button {
        gap: 6px;
        font-size: 12px
    }

    .bc-tabs button>svg {
        display: none
    }

    .bc-news {
        margin-top: 14px
    }
}

@media (prefers-reduced-motion:reduce) {
    .pn-link {
        transition: none
    }
}

.live-chat {
    z-index: 7;
    pointer-events: none;
    color: #f0f5f2;
    width: min(380px,100% - 94px);
    font-family: var(--body);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    display: flex;
    position: absolute;
    top: 196px;
    left: 47px
}

.live-chat button,.live-chat select,.live-chat input,.live-chat form {
    pointer-events: auto
}

.chat-log {
    overflow-anchor: none;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c9e3e580 transparent;
    pointer-events: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    max-height: calc(5.8em + 52px);
    margin: 0;
    padding: 0 5px 0 0;
    font-size: 12px;
    list-style: none;
    display: flex;
    overflow-y: auto
}

.chat-log:focus-visible {
    outline-offset: 4px;
    border-radius: 3px;
    outline: 1px solid #c9e3e580
}

.chat-log li {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-shadow: 0 1px 3px #0b1b2299;
    background: #10262f8c;
    border-radius: 3px;
    flex: none;
    align-items: baseline;
    gap: 7px;
    max-width: 100%;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.45;
    display: flex;
    position: relative
}

.chat-name {
    color: #8fd8cc;
    background: 0 0;
    border: 0;
    flex: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700
}

.chat-log li.is-self {
    color: #101418;
    text-shadow: none;
    background: #f7f6efeb;
    box-shadow: 0 0 0 1px #10141866
}

.chat-log li.is-self .chat-name {
    color: #101418
}

.chat-text {
    overflow-wrap: anywhere;
    min-width: 0
}

.chat-log li.chat-notice {
    color: #ffd9a3;
    background: #2a1f10cc;
    font-style: italic
}

.chat-log li.is-party .chat-name {
    color: #cdbdff
}

.chat-log li.is-party .chat-name svg {
    vertical-align: -1px;
    margin-right: 4px
}

.chat-log li.is-party.is-self {
    box-shadow: inset 3px 0 #9d86f0,0 0 0 1px #10141866
}

.chat-log li.is-party.is-self .chat-name {
    color: #4a3a8c
}

.live-chat .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.chat-label {
    font: 700 11px/1 var(--body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f7f6ef;
    text-shadow: 0 1px 3px #0b1b22cc
}

.chat-log.is-watching {
    max-height: calc(3.6em + 30px)
}

.chat-log.is-watching li:not(.is-self) {
    background: #10262f66
}

.chat-open {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #dfeaee;
    letter-spacing: .6px;
    cursor: pointer;
    background: #10262fb3;
    border: 1px solid #d7ebf238;
    border-radius: 3px;
    order: -1;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex
}

.chat-open:hover {
    color: #fff;
    border-color: #ff9566
}

.chat-open kbd {
    color: #b9cdd4;
    border: 1px solid #d7ebf250;
    border-radius: 3px;
    padding: 0 5px;
    font-family: inherit;
    font-size: 10px
}

@media (max-height: 760px) and (min-width:761px) {
    .live-chat {
        top:166px
    }
}

@media (max-width: 760px) {
    .live-chat {
        width:min(240px,100% - 135px);
        top: auto;
        bottom: 285px;
        left: 24px
    }

    .chat-open {
        order: 0
    }

    .chat-log,.chat-log li {
        font-size: 11px
    }

    .chat-open kbd {
        display: none
    }

    .game-shell:is(.is-playing,.is-lift):not(.is-duel,.is-touch) .live-chat {
        top: 132px;
        bottom: auto
    }

    .game-shell:is(.is-playing,.is-lift):not(.is-duel,.is-touch) .live-chat .chat-open {
        order: -1
    }

    .game-shell:is(.is-playing,.is-lift):not(.is-duel,.is-touch) .live-chat .chat-log {
        max-height: 3.4em
    }
}

.mod-state {
    color: #55656c
}

.mod-state button,.mod-head button {
    color: #101418;
    cursor: pointer;
    background: 0 0;
    border: 1px solid #1014184d;
    border-radius: 3px;
    margin-left: 8px;
    padding: 4px 10px
}

.mod-console {
    grid-template-columns: minmax(0,1fr) 300px;
    align-items: start;
    gap: 34px 40px;
    display: grid
}

.mod-side {
    background: #10141805;
    border: 1px solid #10141822;
    border-radius: 4px;
    max-height: calc(100vh - 32px);
    padding: 4px 18px 12px;
    position: sticky;
    top: 16px;
    overflow: auto
}

.mod-jump {
    color: #b3401a;
    white-space: nowrap;
    margin-left: auto;
    font-size: 14px;
    display: none
}

.mod-tag {
    color: #9c3412;
    background: #f7764226;
    border-radius: 3px;
    margin-left: 10px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block
}

.mod-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.mod-error {
    color: #b3401a
}

.mod-shop-link {
    margin: 0 0 30px
}

.mod-shop-link a {
    color: #fff;
    background: #101418;
    border: 1px solid #101418;
    border-radius: 12px;
    align-items: center;
    height: 46px;
    padding: 0 20px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex
}

.mod-shop-link a:hover {
    background: #2c2c2e
}

.mod-report {
    background: #10141805;
    border: 1px solid #10141822;
    border-radius: 4px;
    margin: 14px 0;
    padding: 16px 18px
}

.mod-report p {
    margin: 0 0 8px
}

.mod-meta {
    color: #55656c;
    font-size: 13px
}

.mod-accused {
    color: #b3401a
}

.mod-lines {
    background: #0b1b22;
    border-radius: 3px;
    max-height: 320px;
    margin: 10px 0 14px;
    padding: 10px 12px;
    font-size: 13px;
    list-style: none;
    overflow: auto
}

.mod-lines li {
    color: #9fb6be;
    grid-template-columns: auto auto 1fr;
    gap: 10px;
    padding: 3px 0;
    display: grid
}

.mod-lines li.is-reported {
    color: #ffe0cf
}

.mod-lines li.is-reported b {
    color: #ffb38e
}

.mod-lines li.is-severe {
    color: #fff;
    background: #c2452d40;
    border-radius: 2px;
    margin: 0 -6px;
    padding: 3px 6px
}

.mod-report.is-quiet {
    opacity: .55
}

.mod-report.is-quiet:hover,.mod-report.is-quiet:focus-within {
    opacity: 1
}

.mod-weight {
    color: #55656c;
    background: #10141812;
    border-radius: 3px;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block
}

.mod-weight.is-w3 {
    color: #fff;
    background: #c2452d
}

.mod-weight.is-w2 {
    color: #9c3412;
    background: #f7764226
}

.mod-context {
    margin: -4px 0 14px;
    font-size: 13px
}

.mod-context summary {
    cursor: pointer;
    color: #55656c
}

.mod-context section {
    margin-top: 10px
}

.mod-context .mod-lines {
    margin: 6px 0 0
}

.mod-lines time {
    color: #6f8a93;
    white-space: nowrap;
    font-size: 11px
}

.mod-lines span {
    overflow-wrap: anywhere
}

.mod-actions {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.mod-actions button,.mod-bans button {
    color: #e8f1f5;
    cursor: pointer;
    background: #12303b;
    border: 1px solid #d7ebf250;
    border-radius: 3px;
    padding: 6px 12px;
    font-size: 13px
}

.mod-actions button:disabled,.mod-bans button:disabled {
    opacity: .5;
    cursor: wait
}

.mod-actions .is-danger {
    color: #ffc3aa;
    border-color: #f7764299
}

.mod-bans {
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mod-bans li {
    border-left: 2px solid #0000;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 2px 10px;
    padding: 8px 0 8px 10px;
    display: grid
}

.mod-bans li b {
    overflow-wrap: anywhere
}

.mod-bans li span {
    color: #55656c;
    grid-column: 1;
    font-size: 13px;
    line-height: 1.5
}

.mod-bans li button {
    grid-area: 1/2/span 3
}

.mod-bans li.is-new {
    background: #c2452d14;
    border-left-color: #c2452d
}

.mod-ban-names {
    border-bottom: 1px solid #10141822;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 6px;
    padding-bottom: 16px;
    display: flex
}

.mod-ban-names textarea {
    box-sizing: border-box;
    resize: vertical;
    color: #e8f1f5;
    width: 100%;
    font: 14px/1.5 var(--body);
    background: #0b1b22;
    border: 1px solid #d7ebf250;
    border-radius: 3px;
    padding: 8px 10px
}

.mod-reasons {
    border: 0;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    display: flex
}

.mod-reasons label {
    cursor: pointer
}

.mod-reasons input {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.mod-reasons span {
    color: #101418;
    border: 1px solid #1014184d;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 13px;
    display: inline-block
}

.mod-reasons label.is-on span {
    color: #f7f6ef;
    background: #101418;
    border-color: #101418
}

.mod-ban-result {
    color: #101418;
    margin: 0;
    font-size: 14px;
    display: block
}

.mod-tabs {
    gap: 6px;
    margin: 14px 0 10px;
    display: flex
}

.mod-tabs button,.mod-filters button {
    color: #101418;
    cursor: pointer;
    background: 0 0;
    border: 1px solid #1014184d;
    border-radius: 3px;
    padding: 5px 12px;
    font-size: 13px
}

.mod-tabs button[aria-pressed=true],.mod-filters button[aria-pressed=true] {
    color: #f7f6ef;
    background: #101418;
    border-color: #101418
}

.mod-filters {
    border: 0;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
    display: flex
}

button.mod-accused {
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 700
}

.mod-filters button.is-severe {
    border-color: #c2452d99
}

.mod-keys {
    color: #55656c;
    margin: 0 0 6px;
    font-size: 12px
}

.mod-keys kbd {
    font: inherit;
    color: #101418;
    border: 1px solid #1014184d;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 11px
}

.mod-report p.mod-advice {
    color: #101418;
    background: #10141808;
    border-left: 3px solid #101418;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 4px 0 0;
    padding: 8px 12px;
    font-size: 14px;
    display: flex
}

.mod-advice b {
    background: #10141814;
    border-radius: 3px;
    padding: 1px 8px;
    font-size: 12px;
    display: inline-block
}

.mod-advice span {
    color: #2c3a40;
    flex-basis: 100%
}

.mod-advice.is-severe {
    border-left-color: #c2452d
}

.mod-advice.is-severe b {
    color: #fff;
    background: #c2452d
}

.mod-report p.mod-advice.is-mild {
    color: #55656c;
    border-left-color: #10141833
}

.mod-report p.mod-advice.is-unread {
    color: #55656c;
    border-left: 3px dashed #10141855;
    font-style: italic
}

.mod-lines li.is-evidence {
    padding-left: 9px;
    box-shadow: inset 3px 0 #f7f6ef
}

.mod-report {
    cursor: default
}

.mod-report.is-current {
    border-color: #101418;
    box-shadow: 0 0 0 1px #101418
}

.mod-report.is-quiet.is-current {
    opacity: 1
}

.mod-actions .is-suggested {
    font-weight: 700;
    box-shadow: 0 0 0 2px #f7f6ef,0 0 0 4px #101418
}

.mod-actions .is-danger.is-suggested {
    box-shadow: 0 0 0 2px #f7f6ef,0 0 0 4px #c2452d
}

.mod-tag.is-done {
    color: #55656c;
    background: #10141812
}

.mod-reporters {
    border-bottom: 1px solid #10141822;
    margin-bottom: 6px;
    padding-bottom: 12px
}

.mod-reporters ul {
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mod-reporters li {
    flex-direction: column;
    font-size: 14px;
    display: flex
}

.mod-reporters li span {
    color: #55656c;
    font-size: 13px
}

.mod-asked {
    border-bottom: 1px solid #10141822;
    margin-bottom: 6px;
    padding-bottom: 12px
}

.mod-bans li.is-asked {
    background: #c2452d0d;
    border-left-color: #c2452d
}

.mod-agent {
    color: #101418;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 6px 0 0;
    font-size: 14px;
    display: flex
}

.mod-agent button {
    color: #101418;
    cursor: pointer;
    background: 0 0;
    border: 1px solid #1014184d;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 13px
}

.mod-agent button.is-danger {
    color: #c2452d;
    border-color: #c2452d
}

.mod-agent.is-paused {
    color: #c2452d;
    font-weight: 700
}

.mod-guard {
    border-bottom: 1px solid #10141822;
    margin: 0 0 44px;
    padding-bottom: 30px
}

.mod-guard-lists {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 24px 40px;
    margin-top: 26px;
    display: grid
}

.mod-bans li .mod-tag {
    grid-area: 1/2/span 3;
    align-self: center;
    margin: 0
}

.mod-ban-names input {
    box-sizing: border-box;
    color: #e8f1f5;
    width: 100%;
    font: 14px/1.5 var(--body);
    background: #0b1b22;
    border: 1px solid #d7ebf250;
    border-radius: 3px;
    padding: 8px 10px
}

.mod-ban-names .mod-reasons input {
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0
}

@media (max-width: 900px) {
    .mod-console {
        grid-template-columns:1fr
    }

    .mod-side {
        max-height: none;
        position: static
    }

    .mod-jump {
        display: inline
    }

    .mod-guard-lists {
        grid-template-columns: 1fr
    }
}

.live-panel {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    display: flex
}

.live-head {
    letter-spacing: 1.4px;
    white-space: nowrap;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex
}

.live-head .crown {
    color: #f5c542;
    filter: drop-shadow(0 0 4px #f5c54299)
}

.live-head .pill-record {
    color: #ffd166;
    letter-spacing: 1px;
    animation: .9s ease-in-out infinite alternate record-pulse
}

.live-expand {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #f0f5f2;
    font: inherit;
    letter-spacing: 1.2px;
    cursor: pointer;
    text-shadow: none;
    background: #10262f8c;
    border: 1px solid #d7ebf238;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-size: 9px;
    display: none
}

.live-panel.is-expanded .live-expand {
    display: inline-flex
}

.live-panel:has(ul[data-scrolling=true]) .live-expand {
    display: inline-flex
}

.live-expand:hover,.live-panel.is-expanded .live-expand {
    border-color: #ff9566
}

.live-expand kbd {
    letter-spacing: 0;
    color: #b9cdd4;
    background: 0 0;
    border: 1px solid #d7ebf250;
    border-radius: 3px;
    min-width: 0;
    height: auto;
    padding: 0 4px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 600
}

.live-panel ul {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #ff956699 transparent;
    background: #10262f8c;
    border-radius: 6px;
    max-height: min(150px,43vh - 210px);
    padding: 8px 11px;
    overflow-y: auto
}

.live-panel li {
    flex-shrink: 0
}

.live-panel ul[data-scrolling=true]:not([data-end=true]) {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 24px),#0000);
    mask-image: linear-gradient(#000 calc(100% - 24px),#0000)
}

.live-panel.is-expanded ul {
    background: #10262fd9;
    max-height: calc(100dvh - 330px)
}

@media (max-height: 760px) and (min-width:761px) {
    .live-panel ul {
        max-height:max(40px,35vh - 172px)
    }
}

@media (max-width: 760px) {
    .live-expand kbd {
        display:none
    }

    .live-panel ul {
        max-height: clamp(40px,30vh - 150px,92px)
    }

    .live-panel.is-expanded ul {
        max-height: calc(100dvh - 280px)
    }
}

.game-shell.is-playing .topbar,.game-shell.is-lift .topbar {
    pointer-events: none;
    height: 64px
}

.game-shell.is-playing .wordmark,.game-shell.is-lift .wordmark {
    visibility: hidden
}

.top-actions {
    pointer-events: auto;
    align-items: center
}

.game-shell.is-playing .run-heading,.game-shell.is-lift .run-heading {
    top: 34px
}

.game-shell.is-playing .score-display {
    top: 72px
}

.game-shell.is-playing .live-roster,.game-shell.is-lift .live-roster {
    top: 150px
}

.game-shell.is-playing .live-chat,.game-shell.is-lift .live-chat {
    top: 98px
}

@media (max-height: 760px) and (min-width:761px) {
    .game-shell.is-playing .run-heading,.game-shell.is-lift .run-heading {
        top:28px
    }

    .game-shell.is-playing .score-display {
        top: 64px
    }

    .game-shell.is-playing .live-roster,.game-shell.is-lift .live-roster {
        top: 136px
    }

    .game-shell.is-playing .live-chat,.game-shell.is-lift .live-chat {
        top: 88px
    }
}

@media (max-width: 760px) {
    .game-shell.is-playing .topbar,.game-shell.is-lift .topbar {
        height:56px
    }

    .game-shell.is-playing .run-heading,.game-shell.is-lift .run-heading {
        top: 26px
    }

    .game-shell.is-playing .score-display {
        top: 62px
    }

    .game-shell.is-playing .live-roster,.game-shell.is-lift .live-roster {
        top: 116px
    }

    .game-shell.is-playing .live-chat,.game-shell.is-lift .live-chat {
        top: auto
    }
}

@media (max-height: 630px) {
    .game-shell.is-playing .run-heading,.game-shell.is-lift .run-heading {
        top:24px
    }

    .game-shell.is-playing .score-display {
        top: 56px
    }
}

@media (max-width: 760px) {
    .game-shell.is-lift .live-chat {
        bottom:300px
    }
}

.restart-ring {
    pointer-events: none;
    text-shadow: 0 2px 7px #0b2d3a44;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: .18s ease-out restart-ring-in;
    display: flex;
    position: absolute;
    bottom: 92px;
    left: 50%;
    transform: translate(-50%)
}

.restart-ring progress {
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.restart-dial {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #14333e8c;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    position: relative
}

.restart-dial svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg)
}

.restart-dial circle {
    fill: none;
    stroke: #e3f3f94d;
    stroke-width: 3px
}

.restart-dial circle+circle {
    stroke: var(--accent);
    stroke-linecap: round;
    animation: linear forwards restart-fill
}

@keyframes restart-fill {
    to {
        stroke-dashoffset: 0
    }
}

.restart-dial b {
    font-family: var(--display);
    font-variant-numeric: tabular-nums;
    place-items: center;
    font-size: 27px;
    font-weight: 600;
    display: grid;
    position: absolute;
    inset: 0
}

.restart-ring>span {
    letter-spacing: 1.8px;
    white-space: nowrap;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 500;
    display: flex
}

.restart-ring kbd {
    min-width: 18px;
    height: 18px;
    font-size: 8px
}

@keyframes restart-ring-in {
    0% {
        opacity: 0;
        transform: translate(-50%)scale(.92)
    }
}

@media (prefers-reduced-motion:reduce) {
    .restart-ring {
        animation: none
    }
}

@media (max-width: 760px) {
    .restart-ring {
        bottom:150px
    }
}

@media (pointer: fine) and (min-width:761px) {
    .game-shell.is-playing .map-panel,.game-shell.is-lift .map-panel {
        width:84px;
        inset: auto auto 30px 43px
    }

    .game-shell.is-playing .course-map,.game-shell.is-lift .course-map {
        width: 60px;
        height: 150px;
        margin: 8px 0 4px
    }

    .game-shell.is-playing .music-player,.game-shell.is-lift .music-player {
        bottom: 34px;
        left: 146px;
        right: auto
    }

    .game-shell.is-playing .speed-hud {
        text-align: right;
        left: auto;
        right: 47px
    }

    .game-shell.is-playing .speed-number,.game-shell.is-playing .run-time {
        justify-content: flex-end
    }

    .game-shell.is-lift .lift-card {
        left: 50%;
        transform: translate(-50%)
    }

    .game-shell.is-playing .trick-feedback {
        text-align: left;
        width: min(560px,42vw);
        inset: max(33%,272px) auto auto 47px;
        transform: none
    }

    .game-shell.is-playing .trick-feedback .trick-readout strong {
        transform-origin: 0 60%;
        font-size: clamp(46px,5vw,76px);
        line-height: 1.05
    }

    .game-shell.is-playing .trick-feedback>b {
        font-size: clamp(32px,3vw,44px)
    }
}

@font-face {
    font-family: Knewave;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/_next/static/media/knewave-latin-400.EYWwrqDs.woff2)format("woff2");
    unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

.trick-feedback .trick-readout strong,.replay-notice .trick-readout strong,.trick-feedback>b {
    font-family: "Knewave",var(--display);
    font-synthesis: none;
    letter-spacing: .01em;
    font-style: normal;
    font-weight: 400
}

.trick-feedback .trick-readout strong,.replay-notice .trick-readout strong {
    transform-origin: 50% 60%;
    font-size: clamp(29px,3.6vw,44px);
    line-height: 1.05;
    rotate: -3deg
}

@media (min-width: 900px) and (min-height:700px) {
    .trick-feedback .trick-readout strong,.replay-notice .trick-readout strong {
        transform-origin:0 60%
    }
}

.trick-feedback .score-factors {
    vertical-align: baseline;
    font: 400 clamp(15px,1.6vw,24px)/1 "Knewave",var(--display);
    font-synthesis: none;
    letter-spacing: .02em;
    text-shadow: inherit;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 0 18px;
    animation: .3s cubic-bezier(.2,.8,.25,1.3) .12s both points-in;
    display: inline-flex
}

.trick-feedback .score-factors span {
    color: #fff;
    background: 0 0;
    border: 0;
    border-radius: 0;
    padding: 0
}

.trick-feedback .landing-effect,.replay-notice .landing-effect {
    font: 400 clamp(15px,1.6vw,24px)/1 "Knewave",var(--display);
    font-synthesis: none;
    letter-spacing: .02em;
    color: #fff;
    text-shadow: inherit;
    margin: 6px 0 0;
    animation: .3s cubic-bezier(.2,.8,.25,1.3) .18s both points-in;
    display: block
}

.trick-feedback .landing-effect b,.replay-notice .landing-effect b {
    margin-left: .3em;
    font-weight: 400
}

.trick-feedback .landing-effect.is-gain b,.replay-notice .landing-effect.is-gain b {
    color: #a8f0bf
}

.trick-feedback .landing-effect.is-loss b,.replay-notice .landing-effect.is-loss b,.trick-feedback>b.is-loss {
    color: #ff8b82
}

.trick-feedback.is-banked .landing-effect {
    animation: .2s ease-out both bank-fade
}

@media (max-width: 760px) {
    .trick-feedback .score-factors {
        justify-content:center;
        gap: 4px 12px;
        margin: 6px 0 0;
        display: flex
    }
}

.trick-feedback .trick-readout strong {
    animation: .24s cubic-bezier(.2,.8,.25,1.15) both trick-in
}

.trick-feedback>b {
    animation: .3s cubic-bezier(.2,.8,.25,1.3) 50ms both points-in;
    display: inline-block
}

@keyframes trick-in {
    0% {
        opacity: 0;
        transform: translate(-28px)scale(.94)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes points-in {
    0% {
        opacity: 0;
        transform: translateY(10px)scale(.7)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.trick-feedback.is-landed .trick-readout strong {
    animation: .26s cubic-bezier(.2,.8,.25,1.2) both trick-stamp
}

.trick-feedback.is-landed>b {
    animation: .26s cubic-bezier(.2,.8,.25,1.2) 40ms both trick-stamp
}

.trick-feedback.is-banked>b {
    opacity: 0;
    animation: none
}

.trick-feedback.is-banked .score-factors {
    animation: .2s ease-out both bank-fade
}

@keyframes trick-stamp {
    0% {
        transform: scale(1.1)
    }

    to {
        transform: none
    }
}

@keyframes bank-fade {
    to {
        opacity: 0
    }
}

.points-flying {
    pointer-events: none;
    font-family: "Knewave",var(--display);
    font-synthesis: none;
    letter-spacing: .01em;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 3px 18px #14374b88;
    transform-origin: 100%;
    will-change: transform,opacity;
    margin: 0;
    font-weight: 400;
    position: fixed
}

.score-display strong {
    transform-origin: 100%
}

@media (prefers-reduced-motion:reduce) {
    .trick-feedback .trick-readout strong,.trick-feedback>b,.trick-feedback .score-factors,.trick-feedback .landing-effect,.trick-feedback.is-landed .trick-readout strong,.trick-feedback.is-landed>b {
        animation: none
    }
}

.run-heading h2,.score-display,.speed-hud,.map-altitude,.map-distance,.charge-bar b,.restart-ring>span {
    font-family: "Knewave",var(--display);
    font-synthesis: none;
    font-style: normal;
    font-weight: 400
}

.fig {
    text-align: center;
    width: .58em;
    font-style: normal;
    display: inline-block
}

.speed-number,.score-display strong,.run-time b,.air-metrics,.map-altitude,.map-distance {
    white-space: nowrap
}

.run-heading h2 {
    letter-spacing: .02em;
    font-size: 28px;
    font-weight: 400
}

.game-shell .score-display>span,.game-shell .speed-hud>.eyebrow {
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 400
}

.score-display strong {
    font-variant-numeric: normal;
    font-family: inherit;
    font-size: 46px;
    font-weight: 400
}

.speed-number {
    letter-spacing: 0;
    font-variant-numeric: normal;
    font-family: inherit;
    font-size: 84px;
    font-weight: 400
}

.speed-number>b {
    font-weight: inherit
}

.speed-number>span {
    letter-spacing: .06em;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400
}

.run-time b {
    letter-spacing: .02em;
    font-size: 18px;
    font-weight: 400
}

.air-metrics,.air-metrics b {
    letter-spacing: .04em;
    font-size: 14px
}

.map-altitude {
    letter-spacing: .02em;
    font-size: 21px;
    font-weight: 400
}

.map-altitude small {
    font-family: inherit;
    font-size: 12px
}

.game-shell .map-distance {
    letter-spacing: .04em;
    font-size: 12px
}

.charge-bar b,.restart-ring>span {
    letter-spacing: .06em;
    font-size: 13px;
    font-weight: 400
}

@media (max-width: 760px) {
    .run-heading h2 {
        font-size:23px
    }

    .game-shell .score-display>span {
        font-size: 12px
    }

    .score-display strong {
        font-size: 32px
    }

    .speed-number {
        font-size: 62px
    }

    .speed-number>span {
        font-size: 12px
    }

    .run-time b {
        font-size: 15px
    }

    .map-altitude {
        font-size: 19px
    }

    .game-shell .map-distance {
        letter-spacing: .02em;
        font-size: 12px
    }
}

.stats-overlay {
    z-index: 12;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #e9f1f2;
    font: 600 11px/1.35 var(--body);
    letter-spacing: .6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-shadow: 0 1px 2px #0008;
    background: #0a1a21a6;
    border: 1px solid #ffffff1f;
    border-radius: 8px;
    padding: 5px 11px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translate(-50%)
}

.stats-overlay b {
    font-weight: 750
}

.stats-overlay .stats-dot {
    color: #fff6;
    margin: 0 6px
}

.stats-overlay.is-full {
    padding: 8px 12px
}

.stats-overlay dl {
    grid-template-columns: repeat(3,auto);
    gap: 3px 14px;
    margin: 0;
    display: grid
}

.stats-overlay dl div {
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    display: flex
}

.stats-overlay dt {
    letter-spacing: 1.2px;
    color: #ffffff8c;
    font-size: 9px
}

.stats-overlay dd {
    text-overflow: ellipsis;
    max-width: 130px;
    margin: 0;
    overflow: hidden
}

.stats-overlay .stats-offline {
    grid-column: span 2
}

.stats-overlay .stats-wide {
    grid-column: 1/-1
}

.stats-overlay .stats-wide dd {
    max-width: 300px
}

.stats-overlay .is-good {
    color: #7dffb2
}

.stats-overlay .is-ok {
    color: #ffd66b
}

.stats-overlay .is-bad {
    color: #ff7a6b
}

@media (max-width: 620px) {
    .stats-overlay {
        padding:4px 9px;
        font-size: 10px;
        top: 8px
    }

    .stats-overlay.is-full {
        padding: 4px 9px
    }

    .stats-overlay dl {
        grid-template-columns: repeat(2,auto);
        gap: 2px 12px
    }

    .stats-overlay .is-extra {
        display: none
    }

    .stats-overlay .stats-offline {
        grid-column: span 2
    }

    .stats-overlay .stats-wide {
        display: none
    }
}

:root {
    --display: "Knewave",Impact,sans-serif;
    font-synthesis: none
}

.bc-shell h1,.pause-card h2,.help-card h2,.online-head h2 {
    font-family: var(--display);
    letter-spacing: .01em;
    text-transform: uppercase;
    transform-origin: 0 70%;
    font-style: normal;
    font-weight: 400;
    rotate: -3deg
}

.bc-shell h1 em {
    font-style: normal
}

.sh-title h1 {
    white-space: nowrap;
    font-size: clamp(38px,3.5vw,54px)
}

.bc-tabs button {
    font-family: var(--display);
    letter-spacing: .02em;
    font-size: 17px;
    font-weight: 400
}

.bc-tabs small.bc-new {
    font-family: var(--display);
    font-weight: 400
}

.primary-button,.online-submit,.bc-shell .bc-start,.lk-save {
    font-family: var(--display);
    letter-spacing: .04em;
    font-style: normal;
    font-weight: 400
}

.game-shell .bc-shell .bc-ride .rd-start {
    font: 400 30px/1 var(--display);
    letter-spacing: .02em;
    white-space: nowrap
}

.game-shell .rd-tag {
    font: 400 13px/1 var(--display);
    letter-spacing: .03em
}

.bc-shell h1 em,.game-shell .lb h1 em,.game-shell .lb-row.is-you .lb-rank,.pause-card>.eyebrow,.help-card>.eyebrow,.finish-card>.eyebrow,.ready-card>.eyebrow,.replay-title .eyebrow,.clip-panel .eyebrow,.saved-replays>span,.mode-card .mode-pop,.control-tip,.air-metrics b,.intro-panel h1 span,.record-badge.is-record,.online-kicker,.board-me b,.board-row.is-you>td:first-child,.board-row.is-you>td:last-child,.lk-shop-tile svg,.scoring-help>summary,.grab-ladder b,.scoring-extras summary,.lift-meta>b,.game-shell .idle-banner b,.game-shell .idle-clock b,.game-shell .ctl-steps li:before {
    color: #fff
}

.lift-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow: 0 3px 18px #14374b88;
    background: 0 0;
    border: 0;
    gap: 0;
    width: 360px;
    padding: 0
}

.lift-icon {
    display: none
}

.lift-copy h3 {
    font: 400 34px/1 var(--display);
    letter-spacing: .02em;
    text-transform: uppercase;
    transform-origin: 0 70%;
    margin: 0 0 12px;
    rotate: -3deg
}

.lift-progress {
    background: #ffffff47;
    height: 4px
}

.lift-meta {
    font: 400 20px/1 var(--display);
    letter-spacing: .02em;
    margin-top: 10px
}

.lift-meta>b {
    font-weight: 400
}

.fast-travel {
    background: var(--accent);
    color: #101418;
    font: 400 24px/1 var(--display);
    letter-spacing: .02em;
    text-shadow: none;
    border: 0;
    border-radius: 14px;
    margin-top: 18px;
    padding: 14px 16px 14px 20px;
    transition: transform .15s,box-shadow .15s,background .15s;
    box-shadow: 0 0 0 3px #101418,7px 7px 0 3px #0000006b
}

.fast-travel:hover {
    color: #101418;
    background: #ff9d71;
    border: 0;
    transform: translate(-2px,-2px);
    box-shadow: 0 0 0 3px #101418,9px 9px 0 3px #0000006b
}

.fast-travel:active {
    transform: translate(2px,2px);
    box-shadow: 0 0 0 3px #101418,3px 3px 0 3px #0000006b
}

.fast-travel kbd {
    color: #101418;
    min-width: 0;
    height: auto;
    font: 800 10px var(--body);
    letter-spacing: 1px;
    background: #f7f6ef;
    border: 0;
    border-radius: 5px;
    padding: 4px 6px 3px;
    transform: rotate(-4deg);
    box-shadow: 0 0 0 2px #101418
}

.game-shell .settings-label {
    font: 400 17px/1.1 var(--display);
    letter-spacing: .03em;
    color: #fff
}

.game-shell .settings-value.is-guest {
    color: #fff
}

.game-shell .settings-button,.game-shell .settings-camera-head .settings-button {
    color: #101418;
    height: 34px;
    font: 400 15px/1 var(--display);
    letter-spacing: .04em;
    background: #f7f6ef;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    transition: transform .15s,box-shadow .15s;
    box-shadow: 0 0 0 2px #101418,4px 4px 0 2px #0000006b
}

.game-shell .settings-button:hover,.game-shell .settings-button.is-light {
    color: #101418;
    background: #fff;
    transform: translate(-1px,-1px);
    box-shadow: 0 0 0 2px #101418,5px 5px 0 2px #0000006b
}

.game-shell .settings-segment label {
    font: 400 15px/1 var(--display);
    letter-spacing: .03em
}

.game-shell .settings-slider {
    font: 400 15px/1 var(--display);
    letter-spacing: .03em;
    color: #fff
}

:root,.bc-shell,.game-shell .lb {
    --accent: #f7f6ef;
    --bc-orange: #f7f6ef;
    --lb-orange: #f7f6ef
}

button:focus-visible {
    outline-color: #f7f6ef
}

select:focus-visible {
    outline-color: #f7f6ef
}

.bc-site-links a:focus-visible {
    outline-color: #f7f6ef
}

.game-shell button.ctl-chip:focus-visible {
    outline-color: #f7f6ef
}

.game-shell .settings-slider input:focus-visible {
    outline-color: #f7f6ef
}

.game-shell .settings-segment label:has(input:focus-visible) {
    outline-color: #f7f6ef
}

.bc-swatches button[aria-pressed=true] {
    outline-color: #f7f6ef
}

.primary-button:hover,.bc-start:hover,.game-shell .bc-shell .bc-ride .rd-start:hover,.lk-save.is-dirty:hover,.game-shell .update-reload:hover,.fast-travel:hover {
    background: #fff
}

.fast-travel:hover {
    border: 0
}

.chat-open:hover,.live-expand:hover,.live-panel.is-expanded .live-expand,.more-button[aria-expanded=true],.results-online-actions button:hover {
    border-color: #f7f6ef
}

.results-online-actions button:hover {
    background: #ffffff12
}

.game-shell .ctl-row.is-lit {
    background: linear-gradient(90deg,#ffffff14,#0000 70%)
}

.game-shell .ctl-chip.is-waiting {
    color: #fff;
    background: #ffffff1f
}

.game-shell .ctl-steps li:before {
    border-color: #fff6
}

.replay-cameras button[aria-pressed=true] {
    background: #ffffff1a
}

.replay-bar button:hover {
    background: #fff3
}

.game-shell .lb-row.is-you {
    background: linear-gradient(90deg,#ffffff26,#0b1419cc 70%)
}

.board-row.is-you {
    background: #ffffff0d
}

.live-dot {
    background: #f7f6ef;
    box-shadow: 0 0 9px #ffffff80
}

.ledger-rule {
    background: #f7f6ef
}

.mode-card.is-live {
    border-color: #fff5
}

.bc-loading .bc-progress>span {
    background: #101418
}

.game-shell .pin-here {
    color: #101418;
    background: #f7f6ef
}

.game-shell .pin-here:after {
    border-top-color: #f7f6ef
}

.game-shell .mountain-ride {
    color: #101418;
    background: #f7f6ef
}

.game-shell .mountain-ride:hover {
    background: #fff
}

.game-shell .update-notice.is-must {
    border-color: #fff9
}

.game-shell .update-reload {
    background: #f7f6ef
}

.game-shell .settings-segment {
    background: 0 0;
    border: 0;
    gap: 8px
}

.game-shell .settings-segment label {
    color: #fff;
    border-radius: 8px;
    height: 34px;
    padding: 0 13px;
    box-shadow: inset 0 0 0 2px #ffffff40
}

.game-shell .settings-segment label:hover {
    box-shadow: inset 0 0 0 2px #fff
}

.game-shell .settings-segment label.is-on {
    color: #101418;
    background: #f7f6ef;
    box-shadow: 0 0 0 2px #101418,4px 4px 0 2px #0000006b
}

.game-shell .settings-slider input::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,#f7f6ef var(--fill),#ffffff26 var(--fill));
    border: 0;
    border-radius: 999px;
    height: 8px;
    box-shadow: 0 0 0 2px #101418
}

.game-shell .settings-slider input::-moz-range-track {
    background: linear-gradient(90deg,#f7f6ef var(--fill),#ffffff26 var(--fill));
    border: 0;
    border-radius: 999px;
    height: 8px;
    box-shadow: 0 0 0 2px #101418
}

.game-shell .settings-slider input::-webkit-slider-thumb {
    background: #f7f6ef;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    margin-top: -7px;
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000006b
}

.game-shell .settings-slider input::-moz-range-thumb {
    background: #f7f6ef;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000006b
}

.game-shell .gamertag-form input,.game-shell .settings-form input {
    border: 2px solid #ffffff40;
    border-radius: 8px
}

.game-shell .gamertag-form input:focus,.game-shell .settings-form input:focus {
    box-shadow: none;
    border-color: #f7f6ef
}

.game-shell .pause-card .text-button {
    color: #fff;
    font: 400 20px/1.2 var(--display);
    letter-spacing: .03em;
    gap: 12px;
    padding: 9px 0;
    transition: transform .15s
}

.game-shell .pause-card .text-button:hover {
    color: #fff;
    transform: translate(3px)
}

.game-shell .control-list b,.game-shell .scoring-help>summary {
    font: 400 17px/1.2 var(--display);
    letter-spacing: .03em
}

.game-shell kbd {
    color: #101418;
    background: #f7f6ef;
    border: 0;
    border-radius: 5px;
    font-weight: 800;
    box-shadow: 0 0 0 2px #101418
}

.game-shell .mountain-heading {
    font: 400 20px/1 var(--display);
    letter-spacing: .04em
}

.game-shell .mountain-card h1 {
    font: 400 44px/1 var(--display);
    letter-spacing: .01em;
    transform-origin: 0 70%;
    rotate: -3deg
}

.game-shell .mountain-badge,.game-shell .mountain-choices button,.game-shell .mountain-facts,.game-shell .mountain-back,.game-shell .pin-copy b,.game-shell .pin-number,.game-shell .pin-here {
    font-family: var(--display);
    letter-spacing: .03em;
    font-weight: 400
}

.game-shell .mountain-mode b {
    font: 400 17px/1 var(--display);
    letter-spacing: .03em
}

.game-shell .mountain-room b {
    font: 400 15px/1 var(--display);
    letter-spacing: .03em
}

.game-shell .mountain-ride {
    font: 400 24px/1 var(--display);
    letter-spacing: .02em
}

.game-shell .results-online-actions button,.game-shell .replay-bar button,.game-shell .replay-free button {
    font: 400 14px/1 var(--display);
    letter-spacing: .04em
}

.game-shell :is(.game-menu,.settings-card,.help-card,.replay-hud) :is(button,a,summary):focus-visible {
    outline-color: var(--card-ink)
}

.game-shell :is(.game-menu,.settings-card,.help-card) kbd {
    background: var(--card-tile);
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line);
    border: 0;
    border-radius: 6px;
    font-weight: 700
}

.game-shell .game-menu-trigger i {
    background: var(--card-alert)
}

.game-shell .game-menu-backdrop {
    background: var(--card-scrim)
}

.game-shell dialog.game-menu {
    border-left: 1px solid var(--card-line);
    background: var(--card-bg);
    color: var(--card-ink);
    box-shadow: -24px 0 60px #00000059
}

.game-shell .game-menu-heading p {
    font: 700 11px/1 var(--body);
    letter-spacing: .16em;
    color: var(--card-quiet)
}

.game-shell .game-menu-heading h2 {
    letter-spacing: .01em;
    color: var(--card-ink);
    font-style: normal;
    font-weight: 400
}

.game-shell .game-menu-close {
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line);
    border: 0;
    border-radius: 10px;
    transition: background .15s
}

.game-shell .game-menu-close:hover {
    background: var(--card-tile)
}

.game-shell .game-menu-resume {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    border-radius: 12px;
    transition: background .15s
}

.game-shell .game-menu-resume:hover {
    background: var(--card-btn-hover)
}

.game-shell .game-menu-resume>span {
    font: 700 13px/1 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase
}

.game-shell .game-menu .game-menu-resume kbd {
    color: inherit;
    opacity: .5;
    background: 0 0;
    box-shadow: inset 0 0 0 1px
}

.game-shell .game-menu-live {
    color: var(--card-quiet)
}

.game-shell .game-menu-links {
    border-color: var(--card-line)
}

.game-shell .game-menu-links>button,.game-shell .game-menu-session>button {
    color: var(--card-ink);
    border-radius: 10px;
    transition: background .15s
}

.game-shell .game-menu-links>button:hover,.game-shell .game-menu-session>button:hover {
    background: var(--card-tile)
}

.game-shell .game-menu-links b {
    font: 600 15px/1.2 var(--body)
}

.game-shell .game-menu-links small {
    font: 400 12px/1.3 var(--body);
    color: var(--card-quiet)
}

.game-shell .game-menu-links em {
    background: var(--card-alert);
    color: var(--card-bg)
}

.game-shell .game-menu-links>button>svg:last-child {
    color: var(--card-quiet)
}

.game-shell .game-menu-session>button {
    font: 500 14px/1.2 var(--body)
}

.game-shell .game-menu-session>button:last-child {
    color: var(--card-alert)
}

.game-shell .game-menu-utilities button {
    color: var(--card-copy);
    box-shadow: inset 0 0 0 1px var(--card-line);
    font: 600 11px/1.2 var(--body);
    letter-spacing: .06em;
    border: 0;
    border-radius: 10px;
    transition: color .15s,box-shadow .15s
}

.game-shell .game-menu-utilities button:hover {
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-ink)
}

.game-shell .game-menu-support a {
    color: var(--card-quiet)
}

.game-shell .game-menu-support a:hover {
    color: var(--card-ink)
}

.game-shell .modal-backdrop:not(.settings-preview):has(>:is(.settings-card,.help-card)) {
    background: var(--card-backdrop)
}

.game-shell .modal-backdrop.settings-preview {
    background: linear-gradient(90deg,#000000b8 0%,#00000059 40%,#0000 68%)
}

@media (max-width: 760px) {
    .game-shell .modal-backdrop.settings-preview {
        background:#00000040
    }
}

.game-shell .pause-card.settings-card,.game-shell .help-card {
    border: 1px solid var(--card-line);
    background: var(--card-bg);
    color: var(--card-ink);
    scrollbar-color: var(--card-line) transparent;
    border-radius: 18px;
    box-shadow: 0 30px 80px #00000073
}

.game-shell :is(.settings-card,.help-card) h2 {
    font-family: var(--display);
    letter-spacing: .01em;
    color: var(--card-ink);
    font-style: normal;
    font-weight: 400;
    rotate: none
}

.game-shell .pause-card.settings-card h2.is-danger {
    color: var(--card-alert)
}

.game-shell .settings-card>.close-button {
    width: 40px;
    height: 40px;
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line);
    border-radius: 10px;
    place-items: center;
    padding: 0;
    transition: background .15s;
    display: grid
}

.game-shell .settings-card>.close-button:hover {
    background: var(--card-tile)
}

.game-shell :is(.settings-card,.help-card) .menu-back {
    color: var(--card-quiet);
    font: 600 12px/1 var(--body);
    letter-spacing: .06em;
    border-radius: 8px;
    transition: color .15s
}

.game-shell :is(.settings-card,.help-card) .menu-back:hover {
    color: var(--card-ink)
}

.game-shell :is(.settings-card,.help-card) .menu-back:focus-visible {
    outline-offset: 3px
}

.game-shell :is(.settings-card,.help-card) .menu-back,.game-shell .settings-card .settings-camera>.settings-segment {
    align-self: flex-start
}

.game-shell .settings-done {
    height: 56px
}

.game-shell .settings-card .settings-tabs {
    background: var(--card-tile);
    border: 0;
    border-radius: 12px;
    gap: 4px;
    padding: 4px
}

.game-shell.is-touch .settings-card .settings-tabs {
    padding: 4px
}

.game-shell .settings-card .settings-tabs button {
    color: var(--card-quiet);
    box-shadow: none;
    font: 700 12px/1 var(--body);
    letter-spacing: .12em;
    border-radius: 9px;
    transition: background .15s,color .15s
}

.game-shell .settings-card .settings-tabs button:hover {
    color: var(--card-ink);
    box-shadow: none
}

.game-shell .settings-card .settings-tabs button.is-on {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    box-shadow: none
}

@media (max-width: 560px) {
    .game-shell .settings-card .settings-tabs {
        flex-wrap:wrap;
        overflow: visible
    }

    .game-shell .settings-card .settings-tabs button {
        letter-spacing: .08em;
        padding: 0 8px
    }

    .game-shell .controls-panel .ctl-tabs {
        flex-wrap: wrap
    }

    .game-shell .controls-panel .ctl-tabs svg {
        display: none
    }
}

.game-shell .settings-card .settings-row,.game-shell .settings-card .settings-row:last-of-type {
    border-color: var(--card-line)
}

.game-shell .settings-card .settings-label {
    font: 700 12px/1.25 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--card-ink)
}

.game-shell .settings-card .settings-note {
    color: var(--card-quiet)
}

.game-shell .settings-card .settings-note.is-bad {
    color: var(--card-alert)
}

.game-shell .settings-card .settings-value {
    color: var(--card-ink);
    font-style: normal;
    font-weight: 400
}

.game-shell .settings-card .settings-value.is-guest {
    color: var(--card-quiet)
}

.game-shell .settings-card .settings-email {
    color: var(--card-copy)
}

.game-shell .settings-card .settings-button {
    background: var(--card-tile);
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line);
    font: 700 11px/1 var(--body);
    letter-spacing: .12em;
    border: 0;
    border-radius: 9px;
    transition: background .15s;
    transform: none
}

.game-shell .settings-card .settings-button:hover:not(:disabled) {
    background: var(--card-tile-hover);
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line);
    transform: none
}

.game-shell .settings-card .settings-button.is-light {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    box-shadow: none
}

.game-shell .settings-card .settings-button.is-light:hover:not(:disabled) {
    background: var(--card-btn-hover);
    color: var(--card-btn-ink);
    box-shadow: none
}

.game-shell .settings-card .settings-segment {
    background: var(--card-tile);
    border: 0;
    border-radius: 11px;
    gap: 2px;
    padding: 3px
}

.game-shell .settings-card .settings-segment label {
    height: 32px;
    color: var(--card-quiet);
    box-shadow: none;
    font: 700 11px/1 var(--body);
    letter-spacing: .1em;
    border-radius: 8px;
    padding: 0 12px;
    transition: background .15s,color .15s
}

.game-shell .settings-card .settings-segment label:hover {
    color: var(--card-ink);
    box-shadow: none
}

.game-shell .settings-card .settings-segment label.is-on {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    box-shadow: none
}

.game-shell .settings-card .settings-segment label:has(input:focus-visible) {
    outline: 2px solid var(--card-ink);
    outline-offset: 2px
}

.game-shell .settings-card .settings-slider {
    font: 700 11px/1.2 var(--body);
    letter-spacing: .12em;
    color: var(--card-quiet)
}

.game-shell .settings-card .settings-slider output {
    font: 700 13px/1 var(--body);
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color: var(--card-ink)
}

.game-shell .settings-card .settings-slider input::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,var(--card-ink) var(--fill),var(--card-track) var(--fill));
    height: 4px;
    box-shadow: none;
    border: 0;
    border-radius: 999px
}

.game-shell .settings-card .settings-slider input::-moz-range-track {
    background: linear-gradient(90deg,var(--card-ink) var(--fill),var(--card-track) var(--fill));
    height: 4px;
    box-shadow: none;
    border: 0;
    border-radius: 999px
}

.game-shell .settings-card .settings-slider input::-webkit-slider-thumb {
    background: var(--card-ink);
    width: 18px;
    height: 18px;
    box-shadow: 0 0 0 4px var(--card-bg);
    border: 0;
    border-radius: 50%;
    margin-top: -7px
}

.game-shell .settings-card .settings-slider input::-moz-range-thumb {
    background: var(--card-ink);
    width: 18px;
    height: 18px;
    box-shadow: 0 0 0 4px var(--card-bg);
    border: 0;
    border-radius: 50%
}

.game-shell .settings-card .settings-slider input:focus-visible {
    outline: 2px solid var(--card-ink);
    outline-offset: 4px
}

.game-shell .settings-card :is(.gamertag-form,.settings-form) input {
    border: 1px solid var(--card-line);
    background: var(--card-tile);
    color: var(--card-ink);
    border-radius: 10px
}

.game-shell .settings-card :is(.gamertag-form,.settings-form) input:focus {
    border-color: var(--card-ink);
    box-shadow: none
}

.game-shell .settings-card :is(.gamertag-form,.settings-form) input[aria-invalid=true] {
    border-color: var(--card-alert)
}

.game-shell .settings-card .settings-form label {
    font: 700 11px/1.2 var(--body);
    letter-spacing: .14em;
    color: var(--card-quiet)
}

.game-shell .settings-card .settings-form>p,.game-shell .settings-card .gamertag-form small {
    color: var(--card-copy)
}

.game-shell .settings-card .settings-terms a {
    color: var(--card-ink)
}

.game-shell .settings-card .gamertag-form small.is-ok,.game-shell .settings-card .settings-form>p.settings-name-status.is-ok {
    color: var(--card-ok)
}

.game-shell .settings-card .gamertag-form small.is-bad,.game-shell .settings-card .settings-form>p.settings-name-status.is-bad {
    color: var(--card-alert)
}

.game-shell .settings-card .settings-links button {
    border-color: var(--card-line);
    color: var(--card-copy)
}

.game-shell .settings-card .settings-links button:hover {
    border-color: var(--card-ink);
    color: var(--card-ink)
}

.game-shell .settings-card .settings-feedback {
    background: var(--card-tile);
    color: var(--card-ink);
    box-shadow: inset 3px 0 0 var(--card-ok);
    border: 0;
    border-radius: 10px
}

.game-shell .settings-card .settings-feedback.is-error {
    box-shadow: inset 3px 0 0 var(--card-alert)
}

.game-shell .settings-card .settings-confirm-card {
    background: var(--card-tile);
    box-shadow: inset 0 0 0 1px var(--card-line)
}

.game-shell .settings-card .settings-confirm-card span {
    color: var(--card-copy)
}

.game-shell .settings-card .settings-confirm-card.is-danger {
    box-shadow: inset 0 0 0 2px var(--card-alert)
}

.game-shell .settings-card .settings-confirm-card.is-danger b {
    color: var(--card-alert)
}

.game-shell .pause-card.settings-card .settings-button.is-back {
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line);
    background: 0 0
}

.game-shell .pause-card.settings-card .settings-button.is-back:hover:not(:disabled) {
    background: var(--card-tile)
}

.game-shell .pause-card.settings-card .settings-button.is-delete {
    color: #fff;
    box-shadow: none;
    background: #d92d20
}

.game-shell .pause-card.settings-card .settings-button.is-delete:hover:not(:disabled) {
    color: #fff;
    background: #e5483c
}

.game-shell .settings-card .settings-form.settings-delete-page label {
    color: var(--card-ink)
}

.game-shell .settings-card .settings-form.settings-delete-page input:focus {
    border-color: var(--card-alert)
}

.game-shell .settings-card .settings-delete-page>p,.game-shell .settings-card .settings-delete-page ul {
    color: var(--card-copy)
}

.game-shell .settings-card .settings-delete-page>p b {
    color: var(--card-ink)
}

.game-shell .settings-card .settings-delete-page>p.settings-delete-warning {
    color: var(--card-alert)
}

.game-shell .settings-card .settings-delete-page li::marker {
    color: var(--card-alert)
}

.game-shell :is(.settings-card,.help-card) .text-button {
    color: var(--card-ink);
    font: 600 13px/1.2 var(--body);
    letter-spacing: .04em;
    transition: opacity .15s;
    transform: none
}

.game-shell :is(.settings-card,.help-card) .text-button:hover {
    color: var(--card-ink);
    opacity: .7;
    transform: none
}

.game-shell .settings-card .text-button.settings-sign-out {
    color: var(--card-copy)
}

.game-shell .pause-card.settings-card .text-button.settings-delete {
    border-top-color: var(--card-line);
    color: var(--card-quiet);
    font-size: 13px
}

.game-shell .pause-card.settings-card .text-button.settings-delete:hover {
    color: var(--card-alert);
    opacity: 1
}

.game-shell :is(.settings-card,.help-card) .primary-button {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    box-shadow: none;
    font-family: var(--body);
    letter-spacing: .14em;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    transition: background .15s;
    transform: none
}

.game-shell :is(.settings-card,.help-card) .primary-button:hover:not(:disabled) {
    background: var(--card-btn-hover);
    transform: none
}

.game-shell .settings-card .primary-button .enter-key {
    opacity: .5;
    border-color: currentColor
}

.game-shell .controls-panel .ctl-row {
    border-top-color: var(--card-line)
}

.game-shell .controls-panel .ctl-row.is-lit {
    background: linear-gradient(90deg,var(--card-tile),transparent 70%)
}

.game-shell .controls-panel .ctl-copy span {
    color: var(--card-ink)
}

.game-shell .controls-panel .ctl-copy small {
    color: var(--card-quiet)
}

.game-shell .controls-panel .ctl-chip {
    border: 1px solid var(--card-line);
    background: var(--card-tile);
    color: var(--card-ink);
    border-bottom-width: 2px;
    border-radius: 7px
}

.game-shell .controls-panel button.ctl-chip:hover {
    border-color: var(--card-ink)
}

.game-shell .controls-panel .ctl-chip.is-empty {
    color: var(--card-quiet);
    background: 0 0;
    border-style: dashed;
    border-bottom-width: 1px
}

.game-shell .controls-panel .ctl-chip.is-fixed {
    color: var(--card-quiet);
    background: 0 0
}

.game-shell .controls-panel .ctl-chip.is-waiting {
    border-color: var(--card-ink);
    background: var(--card-tile-hover);
    color: var(--card-ink);
    animation-name: ctl-wait-ink
}

@keyframes ctl-wait-ink {
    50% {
        background: var(--card-tile)
    }
}

.game-shell .controls-panel .ctl-notice {
    color: var(--card-copy)
}

.game-shell .controls-panel .ctl-saved {
    border-top-color: var(--card-line)
}

.game-shell .controls-panel .ctl-pad-status {
    color: var(--card-quiet)
}

.game-shell .controls-panel .ctl-pad-status b {
    color: var(--card-ink)
}

.game-shell .controls-panel .ctl-dot {
    background: var(--card-quiet)
}

.game-shell .controls-panel .ctl-dot.is-on {
    background: var(--card-ok);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--card-ok) 20%,transparent)
}

.game-shell .controls-panel .ctl-guide {
    border-color: var(--card-line)
}

.game-shell .controls-panel .ctl-guide-head {
    color: var(--card-quiet)
}

.game-shell .controls-panel .ctl-guide-head:hover {
    color: var(--card-ink)
}

.game-shell .controls-panel .ctl-steps li:before {
    border-color: var(--card-line);
    color: var(--card-ink)
}

.game-shell .controls-panel .ctl-steps li>b,.game-shell .controls-panel .ctl-steps span b {
    color: var(--card-ink)
}

.game-shell .controls-panel .ctl-steps span {
    color: var(--card-quiet)
}

.game-shell .controls-panel .pad-body {
    fill: var(--card-tile);
    stroke: var(--card-line)
}

.game-shell .controls-panel .pad-detail {
    fill: var(--card-bg);
    stroke: var(--card-line)
}

.game-shell .controls-panel .pad-control circle,.game-shell .controls-panel .pad-control rect {
    fill: var(--card-bg);
    stroke: var(--card-quiet)
}

.game-shell .controls-panel .pad-control .pad-stick-top {
    fill: var(--card-tile);
    stroke: var(--card-line)
}

.game-shell .controls-panel .pad-control text {
    fill: var(--card-ink)
}

.game-shell .controls-panel .pad-control.is-lit :is(circle,rect),.game-shell .controls-panel .pad-diagram.is-picking .pad-control:hover :is(circle,rect) {
    stroke: var(--card-ink)
}

.game-shell .controls-panel .pad-control:focus-visible :is(circle,rect) {
    stroke: var(--card-ink)
}

.game-shell .controls-panel .pad-control.is-held :is(circle,rect) {
    fill: var(--card-ink);
    stroke: var(--card-ink)
}

.game-shell .controls-panel .pad-control.is-held text {
    fill: var(--card-bg)
}

.game-shell .controls-panel .pad-callout polyline {
    stroke: var(--card-line)
}

.game-shell .controls-panel .pad-callout text {
    fill: var(--card-quiet)
}

.game-shell .controls-panel .pad-callout.is-lit polyline {
    stroke: var(--card-ink)
}

.game-shell .controls-panel .pad-callout.is-lit text {
    fill: var(--card-ink)
}

.game-shell :is(.help-card,.settings-card) .control-list>div {
    border-bottom-color: var(--card-line)
}

.game-shell :is(.help-card,.settings-card) .control-list b {
    font: 600 14px/1.35 var(--body);
    letter-spacing: 0;
    color: var(--card-ink)
}

.game-shell :is(.help-card,.settings-card) .control-list span {
    color: var(--card-quiet)
}

.game-shell .help-card .scoring-help {
    border-top-color: var(--card-line)
}

.game-shell .help-card .scoring-help>summary {
    font: 700 12px/1.2 var(--body);
    letter-spacing: .14em;
    color: var(--card-ink)
}

.game-shell .help-card .scoring-guide p,.game-shell .help-card .scoring-extras li,.game-shell .help-card .score-example>small {
    color: var(--card-copy)
}

.game-shell .help-card .scoring-guide b,.game-shell .help-card .scoring-guide .scoring-lead,.game-shell .help-card .scoring-step h3,.game-shell .help-card .scoring-ladder span,.game-shell .help-card .scoring-ladder strong,.game-shell .help-card .score-example>span,.game-shell .help-card .score-example>b,.game-shell .help-card .scoring-extras summary,.game-shell .help-card .grab-ladder b {
    color: var(--card-ink)
}

.game-shell .help-card .scoring-step,.game-shell .help-card .scoring-ladder>div {
    border-color: var(--card-line);
    background: var(--card-tile)
}

.game-shell .help-card .scoring-ladder small {
    color: var(--card-quiet)
}

.game-shell .help-card .score-example {
    border-left-color: var(--card-ink);
    background: var(--card-tile)
}

.game-shell .help-card .grab-ladder span {
    border-color: var(--card-line);
    color: var(--card-copy);
    border-radius: 8px
}

.game-shell .replay-hud :is(.replay-bar,.replay-free,.replay-edit,.replay-cameras,.clip-panel) {
    background: var(--card-glass);
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line),0 18px 50px #00000040;
    -webkit-backdrop-filter: blur(18px);
    border: 0;
    border-radius: 14px
}

.game-shell .replay-hud :is(.replay-bar,.replay-free,.replay-edit) button {
    color: var(--card-ink);
    font: 700 11px/1 var(--body);
    letter-spacing: .12em;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    transition: background .15s,color .15s
}

.game-shell .replay-hud :is(.replay-bar,.replay-free,.replay-edit) button:hover {
    background: var(--card-tile)
}

.game-shell .replay-hud :is(.replay-bar,.replay-free,.replay-edit) button:is(.is-on,[aria-pressed=true],[aria-expanded=true]) {
    background: var(--card-btn);
    color: var(--card-btn-ink)
}

.game-shell .replay-hud .replay-time {
    font: 600 12px/1 var(--body);
    font-variant-numeric: tabular-nums;
    color: var(--card-copy)
}

.game-shell .replay-hud .replay-bar input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: 0 0;
    height: 24px;
    margin: 0
}

.game-shell .replay-hud .replay-bar input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,var(--card-ink) var(--fill,0%),var(--card-track) var(--fill,0%));
    border-radius: 999px;
    height: 4px
}

.game-shell .replay-hud .replay-bar input[type=range]::-moz-range-track {
    background: linear-gradient(90deg,var(--card-ink) var(--fill,0%),var(--card-track) var(--fill,0%));
    border-radius: 999px;
    height: 4px
}

.game-shell .replay-hud .replay-bar input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--card-ink);
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 3px var(--card-bg);
    border: 0;
    border-radius: 50%;
    margin-top: -5px
}

.game-shell .replay-hud .replay-bar input[type=range]::-moz-range-thumb {
    background: var(--card-ink);
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 3px var(--card-bg);
    border: 0;
    border-radius: 50%
}

.game-shell .replay-hud .replay-bar input[type=range]:focus-visible {
    outline: 2px solid var(--card-ink);
    outline-offset: 2px
}

.game-shell .replay-hud :is(.replay-free,.replay-edit,.clip-panel) .eyebrow {
    font: 700 10px/1 var(--body);
    letter-spacing: .16em;
    color: var(--card-quiet)
}

.game-shell .replay-hud .replay-zoom {
    border-right-color: var(--card-line)
}

.game-shell .replay-hud .replay-zoom output {
    font: 700 12px/1 var(--body);
    color: var(--card-ink)
}

.game-shell .replay-hud .replay-edit strong {
    font: 700 15px/1 var(--body);
    letter-spacing: .04em
}

.game-shell .replay-hud .replay-cameras button {
    color: var(--card-ink);
    background: 0 0;
    border: 0;
    border-radius: 10px;
    transition: background .15s,box-shadow .15s
}

.game-shell .replay-hud .replay-cameras button:hover {
    background: var(--card-tile)
}

.game-shell .replay-hud .replay-cameras button[aria-pressed=true] {
    background: var(--card-tile);
    box-shadow: inset 0 0 0 2px var(--card-ink)
}

.game-shell .replay-hud .replay-cameras strong {
    letter-spacing: .02em;
    font-size: 20px;
    font-weight: 400
}

.game-shell .replay-hud .replay-cameras small {
    color: var(--card-quiet)
}

.game-shell .replay-hud .clip-panel p {
    color: var(--card-copy)
}

.game-shell .replay-hud .clip-progress strong {
    font: 700 28px/1 var(--body);
    font-variant-numeric: tabular-nums
}

.game-shell .replay-hud .clip-bar {
    background: var(--card-track);
    border-radius: 999px
}

.game-shell .replay-hud .clip-bar>span {
    border-radius: inherit;
    background: var(--card-ink)
}

.game-shell .replay-hud .clip-choice button {
    background: var(--card-tile);
    color: var(--card-ink);
    box-shadow: inset 0 0 0 1px var(--card-line);
    font: 700 11px/1 var(--body);
    letter-spacing: .1em;
    border: 0;
    border-radius: 9px;
    transition: background .15s
}

.game-shell .replay-hud .clip-choice button:hover {
    background: var(--card-tile-hover)
}

.game-shell .replay-hud .clip-choice button.is-on {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    box-shadow: none
}

.game-shell .replay-hud .clip-actions .primary-button {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    box-shadow: none;
    font-family: var(--body);
    letter-spacing: .14em;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    transform: none
}

.game-shell .replay-hud .clip-actions .primary-button:hover {
    background: var(--card-btn-hover);
    transform: none
}

.game-shell .replay-hud .clip-panel .text-button {
    color: var(--card-copy)
}

.game-shell .replay-hud .clip-panel .text-button:hover {
    color: var(--card-ink)
}

.game-shell .replay-hud .replay-title {
    text-shadow: 0 1px 3px #00000080,0 2px 14px #0006
}

.game-shell .replay-hud .replay-keys {
    color: #fff;
    text-shadow: 0 1px 3px #000000b3,0 0 12px #00000080
}

.game-shell .replay-hud .replay-keys kbd {
    color: #fff;
    text-shadow: none;
    background: #0000004d;
    border: 0;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #ffffff40
}

@media (max-width: 600px) {
    .game-shell .replay-hud .replay-bar button {
        letter-spacing:.08em;
        font-size: 10px
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell .replay-hud :is(.replay-free,.replay-edit) {
        top:52px
    }
}

.game-shell .replay-hud.is-bare>:not(.replay-show) {
    visibility: hidden;
    pointer-events: none
}

.game-shell:has(.replay-hud.is-bare) :is(.topbar,.stats-overlay,.music-player) {
    visibility: hidden;
    pointer-events: none
}

.replay-show {
    color: #fff;
    height: 36px;
    font: 700 11px/1 var(--body);
    letter-spacing: .12em;
    pointer-events: auto;
    background: #0000008c;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 14px;
    animation: 3.2s ease-in forwards replay-show-fade;
    display: flex;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%)
}

.replay-show kbd {
    color: #fff;
    min-width: 20px;
    height: 20px;
    box-shadow: none;
    background: #ffffff26;
    border: 0;
    border-radius: 5px;
    font-size: 9px
}

:is(.replay-show:hover,.replay-show:focus-visible) {
    opacity: 1;
    animation: none
}

.replay-show.is-touch {
    height: auto;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom,0px));
    -webkit-tap-highlight-color: transparent;
    background: 0 0;
    border-radius: 0;
    justify-content: center;
    align-items: flex-end;
    animation: none;
    inset: 0;
    transform: none
}

.replay-show.is-touch>span {
    background: #0000008c;
    border-radius: 999px;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    animation: 3.2s ease-in forwards replay-show-fade;
    display: flex
}

@keyframes replay-show-fade {
    0%,70% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .replay-show,.replay-show.is-touch>span {
        opacity: .6;
        animation: none
    }
}

.touch-layer {
    z-index: 6;
    pointer-events: none;
    --tc-side: max(14px,calc(env(safe-area-inset-right,0px) - 30px));
    --tc-side-left: max(14px,calc(env(safe-area-inset-left,0px) - 30px));
    --tc-bottom: max(12px,env(safe-area-inset-bottom,0px));
    position: absolute;
    inset: 0
}

.tc-stick-zone,.tc-pad {
    pointer-events: auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.tc-stick-zone {
    width: 44%;
    position: absolute;
    top: 32%;
    bottom: 0;
    left: 0
}

.tc-stick {
    left: calc(var(--tc-side-left) + 30px);
    bottom: calc(var(--tc-bottom) + 22px);
    width: calc(124px * var(--tc-scale));
    height: calc(124px * var(--tc-scale));
    opacity: .7;
    background: #10141866;
    border-radius: 50%;
    transition: transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s;
    position: absolute;
    box-shadow: inset 0 0 0 2px #f7f6efcc
}

.tc-stick.is-active {
    opacity: 1;
    transition: none
}

.tc-knob {
    width: calc(58px * var(--tc-scale));
    height: calc(58px * var(--tc-scale));
    margin: calc(-29px * var(--tc-scale)) 0 0 calc(-29px * var(--tc-scale));
    background: #f7f6ef;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000006b
}

.tc-stick:not(.is-active) .tc-knob {
    transition: transform .2s cubic-bezier(.2,.8,.2,1)
}

.tc-arrow {
    width: calc(10px * var(--tc-scale));
    height: calc(10px * var(--tc-scale));
    border: 3px solid #f7f6ef8c;
    border-width: 3px 3px 0 0;
    border-radius: 1px;
    position: absolute
}

.tc-arrow.is-up {
    left: 50%;
    top: calc(11px * var(--tc-scale));
    transform: translate(-50%)rotate(-45deg)
}

.tc-arrow.is-down {
    left: 50%;
    bottom: calc(11px * var(--tc-scale));
    transform: translate(-50%)rotate(135deg)
}

.tc-arrow.is-left {
    top: 50%;
    left: calc(11px * var(--tc-scale));
    transform: translateY(-50%)rotate(-135deg)
}

.tc-arrow.is-right {
    top: 50%;
    right: calc(11px * var(--tc-scale));
    transform: translateY(-50%)rotate(45deg)
}

.tc-stick[data-lean=tuck] .tc-arrow.is-up,.tc-stick[data-lean=brake] .tc-arrow.is-down {
    border-color: #f7f6ef
}

.tc-pad {
    right: var(--tc-side);
    bottom: var(--tc-bottom);
    width: calc(320px * var(--tc-scale));
    height: calc(224px * var(--tc-scale));
    position: absolute
}

.tc-button {
    color: #f7f6ef;
    font: 400 calc(15px * var(--tc-scale))/1 var(--display);
    letter-spacing: .03em;
    text-shadow: 0 1px 3px #0000004d;
    background: #10141873;
    border: 0;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    transition: transform 70ms,background 70ms,opacity .2s;
    display: flex;
    position: absolute;
    box-shadow: inset 0 0 0 2px #f7f6efd9
}

.tc-button span {
    pointer-events: none
}

.tc-button.is-down {
    color: #101418;
    text-shadow: none;
    background: #f7f6ef;
    transform: scale(.93);
    box-shadow: 0 0 0 2px #101418
}

.tc-button.is-pop {
    font-size: calc(24px * var(--tc-scale))
}

.tc-button.is-mute {
    font-size: calc(17px * var(--tc-scale))
}

.tc-button.is-minor,.tc-button.is-butter {
    font-size: calc(13px * var(--tc-scale))
}

.tc-button.is-minor {
    opacity: .85
}

.tc-button.is-pop:before {
    content: "";
    inset: calc(-8px * var(--tc-scale));
    background: conic-gradient(#f7f6ef calc(var(--charge,0) * 1turn),#0000 0);
    border-radius: 50%;
    position: absolute;
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px));
    mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px))
}

.touch-layer:not(.is-air) .tc-button.is-air-only:not(.is-down),.touch-layer.is-air:not(.is-rail) .tc-button.is-pop:not(.is-down) {
    opacity: .5
}

.touch-layer.is-air .tc-button.is-air-only:not(.is-minor) {
    box-shadow: inset 0 0 0 3px #f7f6ef
}

@media (prefers-reduced-motion:reduce) {
    .tc-stick,.tc-knob,.tc-button {
        transition: none!important
    }
}

@media (max-height: 500px) {
    .game-shell {
        min-height:0
    }
}

.game-shell.is-touch {
    --tc-top: max(10px,env(safe-area-inset-top,0px));
    --tc-left: max(16px,calc(env(safe-area-inset-left,0px) - 20px));
    --tc-right: max(16px,calc(env(safe-area-inset-right,0px) - 20px));
    --tc-low: max(10px,env(safe-area-inset-bottom,0px))
}

.game-shell.is-touch.is-playing .run-heading {
    left: var(--tc-left);
    top: var(--tc-top)
}

.game-shell.is-touch.is-playing .run-heading h2 {
    margin: 0;
    font-size: 22px
}

.game-shell.is-touch:is(.is-playing,.is-lift) .music-player {
    top: var(--tc-top);
    right: calc(var(--tc-right) + 142px);
    bottom: auto;
    left: auto
}

.game-shell.is-touch.is-playing .score-display {
    top: calc(var(--tc-top) + 46px);
    right: var(--tc-right)
}

.game-shell.is-touch.is-playing .speed-hud {
    left: var(--tc-left);
    right: auto;
    top: calc(var(--tc-top) + 34px);
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    display: flex;
    bottom: auto;
    transform: none
}

.game-shell.is-touch.is-playing .speed-hud>.eyebrow,.game-shell.is-touch.is-playing .speed-track,.game-shell.is-touch.is-playing .air-metrics {
    display: none
}

.game-shell.is-touch.is-playing .speed-number {
    justify-content: flex-start;
    font-size: 40px;
    line-height: 1
}

.game-shell.is-touch.is-playing .speed-number>span {
    font-size: 12px
}

.game-shell.is-touch.is-playing .run-time {
    justify-content: flex-start;
    margin-top: 2px
}

.game-shell.is-touch.is-playing .run-time b {
    font-size: 13px
}

.game-shell.is-touch.is-playing .trick-feedback {
    top: max(19%,calc(var(--tc-top) + 54px))
}

.game-shell.is-touch:is(.is-playing,.is-lift) .map-panel {
    top: calc(var(--tc-top) + 104px);
    bottom: auto;
    right: var(--tc-right);
    left: auto
}

@media (max-height: 560px) {
    .game-shell.is-touch:is(.is-playing,.is-lift) .map-panel {
        display:none
    }
}

.game-shell.is-touch.is-playing .course-progress {
    height: 4px
}

.game-shell.is-touch :is(button,.game-menu-trigger,.fast-travel,.restart-ring,.results-online-actions,.replay-hud,.duel-watch-camera) kbd:not(.controls-panel kbd) {
    display: none
}

.game-shell.is-touch.is-lift .lift-card {
    left: max(16px,env(safe-area-inset-left,0px));
    bottom: max(16px,calc(env(safe-area-inset-bottom,0px) + 8px))
}

.turn-phone {
    display: none
}

@media (orientation: portrait) and (max-width:700px) {
    .turn-phone {
        z-index:40;
        color: #f7f6ef;
        text-align: center;
        background: #101418e6;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 14px;
        padding: 24px;
        display: flex;
        position: absolute;
        inset: 0
    }

    .turn-phone svg {
        animation: 2.4s cubic-bezier(.6,0,.2,1) infinite turn-phone
    }

    .turn-phone b {
        font: 400 30px/1 var(--display);
        letter-spacing: .02em;
        rotate: -3deg
    }

    .turn-phone span {
        font: 600 15px/1.4 var(--body);
        color: #f7f6efbf
    }
}

@keyframes turn-phone {
    0%,20% {
        transform: rotate(0)
    }

    55%,to {
        transform: rotate(-90deg)
    }
}

@media (prefers-reduced-motion:reduce) {
    .turn-phone svg {
        animation: none;
        transform: rotate(-90deg)
    }
}

.game-shell.is-touch .replay-keys {
    display: none
}

.game-shell.is-touch .replay-title {
    left: max(23px,env(safe-area-inset-left,0px))
}

.game-shell.is-touch.is-playing .live-chat {
    left: var(--tc-left);
    top: calc(var(--tc-top) + 96px);
    width: min(260px,38vw);
    bottom: auto
}

.game-shell.is-touch .live-chat .chat-open {
    order: -1
}

.game-shell.is-touch .live-chat .chat-log {
    pointer-events: none;
    max-height: 4.6em
}

.game-shell.is-touch.is-duel.is-playing :is(.run-heading,.speed-hud) {
    display: none
}

.game-shell.is-touch.is-duel .duel-bug {
    left: var(--tc-left);
    top: var(--tc-top)
}

.game-shell.is-touch.is-duel.is-playing .live-chat {
    top: calc(var(--tc-top) + 150px)
}

.game-shell.is-touch.is-duel .duel-to-beat {
    right: var(--tc-right);
    top: calc(var(--tc-top) + 128px)
}

.game-shell.is-touch :is(.duel-athlete,.duel-eyes,.duel-to-beat,.duel-posted) {
    pointer-events: none
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell {
        --safe-l:max(16px,env(safe-area-inset-left,0px));
        --safe-r: max(16px,env(safe-area-inset-right,0px));
        --safe-b: max(8px,env(safe-area-inset-bottom,0px))
    }

    .game-shell .topbar {
        height: 44px;
        padding: 0 var(--safe-r) 0 var(--safe-l)
    }

    .game-shell.is-intro:has(.bc-shell) .topbar {
        height: 44px;
        padding: 0 var(--safe-r) 0 var(--safe-l)
    }

    .game-shell .topbar .steez8-mark {
        width: 92px;
        height: 21px
    }

    .game-shell .topbar .wordmark {
        margin-top: -2px
    }

    .game-shell .game-menu-trigger {
        min-height: 34px;
        padding: 0 10px
    }

    .game-shell.is-touch .game-menu-trigger kbd {
        display: none
    }

    .game-shell .bc-shell .bc-lobby-content {
        margin: 0 0 0 var(--safe-l);
        width: calc(100% - var(--safe-l) - var(--safe-r));
        height: 100%;
        padding: 46px 0 calc(var(--safe-b) + 4px);
        flex-direction: column;
        display: flex;
        top: 0;
        bottom: auto;
        overflow: hidden
    }

    .game-shell .bc-shell .bc-tabs {
        --tab-gap: 18px;
        scrollbar-width: none;
        flex: none;
        max-width: none;
        height: 34px;
        margin: 0 0 10px;
        overflow-x: auto
    }

    .game-shell .bc-shell .bc-tabs button {
        flex: none;
        gap: 6px;
        padding: 0 1px 8px;
        font-size: 15px
    }

    .game-shell .bc-shell .bc-tabs button svg {
        width: 15px;
        height: 15px
    }

    .game-shell .bc-shell .bc-footer {
        display: none
    }

    .game-shell .music-player {
        width: auto
    }

    .game-shell .music-tray {
        border-radius: 14px;
        gap: 5px;
        padding: 3px
    }

    .game-shell .music-tray .music-open {
        border-radius: 10px;
        flex: none;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0
    }

    .game-shell .tray-text {
        display: none
    }

    .game-shell .mixtape-art.is-mini {
        width: 26px;
        height: 26px
    }

    .game-shell .tray-progress {
        bottom: 2px;
        left: 6px;
        right: 6px
    }

    .game-shell .tray-wheel {
        width: 34px;
        height: 34px
    }

    .game-shell .music-tray .tray-play {
        top: 7px;
        left: 7px
    }

    .game-shell .music-tray .tray-previous,.game-shell .music-tray .tray-next {
        display: none
    }

    .game-shell .bc-shell .bc-ride {
        flex: 1;
        grid-template-rows: minmax(0,1fr);
        grid-template-columns: minmax(150px,200px) minmax(0,1fr) minmax(236px,272px);
        gap: 14px;
        max-width: none;
        min-height: 0;
        display: grid
    }

    @media (max-width: 639px) {
        .game-shell .bc-shell .bc-ride {
            grid-template-columns:minmax(0,1fr) 0 minmax(236px,272px)
        }
    }

    .game-shell .bc-shell .bc-ride .rd-side {
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        padding: 0;
        display: flex
    }

    .game-shell .bc-shell .bc-ride .rd-stage {
        min-height: 0;
        display: flex
    }

    .game-shell .bc-shell .bc-ride .rd-play {
        scrollbar-width: thin;
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
        min-height: 0;
        margin: 0;
        padding: 4px 3px;
        display: flex;
        overflow-y: auto
    }

    .game-shell .bc-shell .bc-ride .rd-play>* {
        flex-shrink: 0
    }

    .game-shell .bc-shell .bc-ride .rd-play>:first-child {
        margin-top: auto
    }

    .game-shell .bc-shell .bc-ride .rd-stage:before,.game-shell .bc-shell .bc-ride .rd-riders {
        display: block
    }

    .game-shell .bc-shell .bc-ride .rd-tier-tile {
        flex: none;
        height: 76px;
        margin: 0
    }

    .game-shell .bc-shell .bc-ride .rd-tier b {
        font-size: 30px
    }

    .game-shell .bc-shell .bc-ride .rd-tier small:first-child,.game-shell .bc-shell .bc-ride .rd-tag-season {
        display: none
    }

    .game-shell .bc-shell .bc-ride .rd-tier-bar {
        height: 7px;
        bottom: 31px
    }

    .game-shell .bc-shell .bc-ride .rd-tier-next {
        font-size: 13px;
        bottom: 10px
    }

    .game-shell .bc-shell .bc-ride .rd-news-tile {
        flex: 1.35;
        height: auto;
        min-height: 0;
        margin: 0
    }

    .game-shell .bc-shell .bc-ride .rd-season-tile {
        flex: 1;
        height: auto;
        min-height: 0;
        margin: 0
    }

    .game-shell .bc-shell .bc-ride .rd-tile-copy {
        padding: 18px 11px 9px
    }

    .game-shell .bc-shell .bc-ride .rd-tile-copy b {
        font-size: 16px
    }

    .game-shell .bc-shell .bc-ride .rd-modes>button.rd-mode {
        height: 86px
    }

    .game-shell .bc-shell .bc-ride .rd-mode-name b {
        font-size: 19px
    }

    .game-shell .bc-shell .bc-ride .rd-mode-name small {
        font-size: 10px
    }

    .game-shell .bc-shell .bc-ride .rd-pass {
        width: min(100%,300px);
        margin: 0;
        padding: 8px 54px 9px 28px
    }

    .game-shell .bc-shell .bc-ride .rd-pass input,.game-shell .bc-shell .bc-ride .rd-pass-name b {
        font-size: 18px
    }

    .game-shell .bc-shell .bc-ride .rd-start {
        height: 60px;
        font-size: 32px
    }

    .game-shell.is-touch .bc-shell .bc-ride .rd-start kbd {
        display: none
    }

    .game-shell dialog.game-menu {
        width: min(640px,100%);
        padding: 12px calc(var(--safe-r) + 4px) calc(var(--safe-b) + 6px) 22px;
        grid-template-columns: 1fr 1fr;
        align-content: start;
        column-gap: 18px;
        display: grid
    }

    .game-shell .game-menu-heading,.game-shell .game-menu-resume,.game-shell .game-menu-live,.game-shell .game-menu-utilities {
        grid-column: 1/-1
    }

    .game-shell dialog.game-menu:not(:has(.game-menu-session:not(:empty))) .game-menu-links {
        grid-column: 1/-1
    }

    .game-shell .game-menu-session:empty {
        display: none
    }

    .game-shell .game-menu-heading {
        margin-bottom: 10px
    }

    .game-shell .game-menu-heading p {
        margin-bottom: 3px
    }

    .game-shell .game-menu-heading h2 {
        font-size: 30px
    }

    .game-shell .game-menu-resume {
        margin-bottom: 4px;
        padding: 11px 15px
    }

    .game-shell .game-menu-links>button {
        padding-top: 8px;
        padding-bottom: 8px
    }

    .game-shell .game-menu-session {
        padding: 4px 0
    }

    .game-shell .game-menu-session>button {
        padding: 9px 10px
    }

    .game-shell .game-menu-utilities {
        padding-top: 8px
    }

    .game-shell .help-card {
        width: min(700px,100%);
        max-height: 100%;
        padding: 12px 22px 10px
    }

    .game-shell .modal-backdrop:has(.help-card) {
        padding: 8px var(--safe-r) var(--safe-b) var(--safe-l)
    }

    .game-shell .help-card h2 {
        margin: 2px 0 8px;
        font-size: 28px
    }

    .game-shell .help-card .menu-back {
        margin: 0
    }

    .game-shell .help-card .control-list {
        flex: none;
        grid-template-columns: 1fr 1fr;
        column-gap: 22px;
        display: grid;
        overflow: visible
    }

    .game-shell .help-card .control-list>div {
        gap: 12px;
        padding: 5px 0
    }

    .game-shell .help-card .control-list kbd {
        min-width: 72px;
        height: 26px
    }

    .game-shell .help-card .control-list span {
        font-size: 11px;
        line-height: 1.3;
        display: block
    }

    .game-shell .help-card .scoring-help {
        margin: 6px 0 0
    }

    .game-shell .help-card .help-change {
        padding: 6px 0 0
    }

    .game-shell .modal-backdrop:has(.settings-card) {
        padding: 6px var(--safe-r) var(--safe-b) var(--safe-l)
    }

    .game-shell .settings-card,.game-shell .settings-card.is-tabbed,.game-shell .settings-card.is-tabbed.is-controls {
        width: min(720px,100%);
        height: 100%;
        max-height: 100%;
        padding: 10px 22px
    }

    .game-shell .settings-card .menu-back {
        margin: 0
    }

    .game-shell .settings-card h2,.game-shell .settings-card.is-tabbed h2 {
        margin: 0 0 8px;
        font-size: 26px
    }

    .game-shell .settings-card .settings-form {
        gap: 9px
    }

    .game-shell .settings-card .settings-form .primary-button {
        height: 50px;
        margin: 2px 0 0
    }

    .game-shell .settings-card .settings-form.is-create {
        grid-template-columns: 1fr 1fr;
        gap: 7px 12px;
        display: grid
    }

    .game-shell .settings-card .settings-form.is-create>* {
        grid-column: 1/-1
    }

    .game-shell .settings-card .settings-form.is-create>.settings-pass {
        grid-column: auto
    }

    .game-shell .settings-card .settings-form.is-create>p:first-child {
        display: none
    }

    .game-shell .settings-card .settings-form.is-create input {
        height: 40px
    }

    .game-shell .settings-card .settings-form.is-create>p.settings-name-status {
        margin: -3px 0 0
    }

    .game-shell .settings-card .settings-tabs {
        margin-bottom: 8px
    }

    .game-shell .settings-card .settings-tabs label,.game-shell .settings-card .settings-tabs button {
        height: 30px;
        font-size: 13px
    }

    .game-shell .settings-card .settings-done {
        height: 42px;
        margin: 8px 0 0
    }

    .game-shell.is-touch .settings-card .enter-key,.game-shell.is-touch .game-menu .enter-key {
        display: none
    }

    .game-shell.is-finished .run-results {
        top: 46px;
        bottom: var(--safe-b);
        right: var(--safe-r);
        flex-direction: column;
        width: min(560px,57%);
        max-height: none;
        padding: 4px 2px 0;
        animation: none;
        display: flex;
        left: auto;
        overflow: hidden;
        transform: none
    }

    .game-shell.is-finished .results-title {
        flex: none;
        margin: 0 0 4px
    }

    .game-shell.is-finished .results-title h1 {
        font-size: 30px
    }

    .game-shell.is-finished .result-medal {
        padding: 5px 7px
    }

    .game-shell.is-finished .results-main {
        flex: none;
        grid-template-columns: .8fr 1.2fr;
        gap: 14px
    }

    .game-shell.is-finished .results-total>strong {
        margin: 2px 0;
        font-size: 56px
    }

    .game-shell.is-finished .score-ledger>div:not(.ledger-rule) {
        padding: 2px 0
    }

    .game-shell.is-finished .score-ledger span {
        font-size: 12px
    }

    .game-shell.is-finished .score-ledger b {
        font-size: 19px;
        line-height: 1.15
    }

    .game-shell.is-finished .results-total>.eyebrow {
        font-size: 9px
    }

    .game-shell.is-finished .score-ledger small,.game-shell.is-finished .run-metrics {
        display: none
    }

    .game-shell.is-finished .signature-trick {
        flex: none;
        margin: 4px 0 0;
        padding: 6px 0
    }

    .game-shell.is-finished .results-footer {
        flex: none;
        margin-top: auto;
        padding-top: 6px
    }

    .game-shell.is-finished .results-footer .primary-button {
        height: 44px
    }

    .game-shell.is-finished .results-online-actions {
        gap: 6px;
        margin-top: 6px
    }

    .game-shell.is-finished .results-online-actions button {
        height: 32px;
        padding: 0 9px
    }

    .game-shell .clip-panel {
        bottom: calc(var(--safe-b) + 74px);
        width: min(620px,calc(100% - var(--safe-l) - var(--safe-r)));
        gap: 7px;
        padding: 10px 16px
    }

    .game-shell .clip-panel.clip-options {
        max-height: calc(100% - var(--safe-b) - 80px);
        top: auto;
        overflow: auto
    }

    .game-shell .clip-panel>strong {
        font-size: 16px
    }

    .game-shell .clip-choice {
        gap: 6px
    }

    .game-shell .clip-choice button {
        min-width: 0;
        height: 30px;
        font-size: 10px
    }

    .game-shell .clip-actions .primary-button {
        height: 40px
    }

    .game-shell .clip-panel.clip-options>p {
        display: none
    }

    .game-shell .bc-shell .bc-pass,.game-shell .bc-shell .sh-browse {
        flex: 1;
        height: auto;
        min-height: 0
    }

    .game-shell .bc-shell .bc-pass h1 {
        margin: 2px 0;
        font-size: 28px
    }

    .game-shell .bc-shell .pass-sub {
        letter-spacing: .12em;
        font-size: 12px
    }

    .game-shell .bc-shell .pass-status {
        gap: 8px;
        margin-top: 6px
    }

    .game-shell .bc-shell .pass-level,.game-shell .bc-shell .pass-today {
        padding: 4px 12px
    }

    .game-shell .bc-shell .pass-level {
        gap: 12px
    }

    .game-shell .bc-shell .pass-tier b {
        font-size: 28px
    }

    .game-shell .bc-shell .pass-progress {
        height: 8px
    }

    .game-shell .bc-shell .pass-level-bar p {
        letter-spacing: .06em;
        margin-top: 4px;
        font-size: 12px
    }

    .game-shell .bc-shell .pass-today {
        min-width: 0
    }

    .game-shell .bc-shell .pass-today b {
        font-size: 18px
    }

    .game-shell .bc-shell .pass-today span {
        letter-spacing: .06em;
        font-size: 12px
    }

    .game-shell .bc-shell .pass-nav {
        display: none
    }

    .game-shell .bc-shell .pass-board {
        --tile: 58px;
        flex: none;
        gap: 8px;
        min-height: 0;
        margin-top: 6px;
        container-type: normal
    }

    .game-shell .bc-shell .pass-rows {
        gap: 6px;
        padding-top: 22px
    }

    .game-shell .bc-shell .pass-rows span {
        font-size: 12px
    }

    .game-shell .bc-shell .pass-track {
        gap: 6px;
        padding-bottom: 4px
    }

    .game-shell .bc-shell .pass-col {
        gap: 6px
    }

    .game-shell .bc-shell .pass-num {
        height: 16px;
        font-size: 12px;
        line-height: 16px
    }

    .game-shell .bc-shell .pass-reward {
        border-radius: 6px;
        padding: 4px
    }

    .game-shell .bc-shell .pass-pow {
        gap: 2px
    }

    .game-shell .bc-shell .pass-pow b {
        font-size: 15px
    }

    .game-shell .bc-shell .pass-mark {
        padding: 2px;
        top: 3px;
        right: 3px
    }

    .game-shell .bc-shell .pass-preview-art {
        border-radius: 6px;
        width: 38px;
        height: 38px;
        padding: 3px
    }

    .game-shell .bc-shell .pass-preview-words i {
        display: none
    }

    .game-shell .bc-shell .pass-preview-words b {
        font-size: 18px
    }

    .game-shell .bc-shell .pass-preview-words small {
        letter-spacing: .08em;
        font-size: 12px
    }

    .game-shell .bc-shell .pass-foot {
        gap: 8px 12px;
        padding: 8px 0 0
    }

    .game-shell .bc-shell .pass-foot .bc-start,.game-shell .bc-shell .pass-owned {
        letter-spacing: .08em;
        height: 44px;
        padding: 0 14px;
        font-size: 12px
    }

    .game-shell .bc-shell .pass-foot .bc-start small {
        font-size: 12px
    }
}

.game-shell.is-touch :is(input[type=text],input[type=email],input[type=password],input[type=search],input:not([type]),textarea) {
    -webkit-user-select: text;
    user-select: text;
    scroll-margin-block: 12px;
    font-size: 16px
}

.game-shell.is-touch button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation
}

.game-shell.is-touch :is(.settings-page,.lk-scroll,.pocket-chat-log) {
    overscroll-behavior: contain
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell.is-touch .game-menu {
        gap:0 14px;
        width: min(560px,100%);
        padding-top: 10px;
        padding-bottom: 8px
    }

    .game-shell.is-touch .game-menu-heading {
        margin-bottom: 6px
    }

    .game-shell.is-touch .game-menu-heading h2 {
        font-size: 24px
    }

    .game-shell.is-touch .game-menu-heading p {
        margin-bottom: 3px
    }

    .game-shell.is-touch .game-menu-resume {
        min-height: 44px;
        padding: 11px 14px
    }

    .game-shell.is-touch .game-menu-links {
        margin-top: 8px;
        padding: 2px 0
    }

    .game-shell.is-touch .game-menu-links>button {
        min-height: 44px;
        padding: 8px
    }

    .game-shell.is-touch .game-menu-links small {
        display: none
    }

    .game-shell.is-touch .game-menu-utilities {
        padding-top: 6px
    }

    .game-shell.is-touch .game-menu-support {
        margin-top: 2px
    }

    .game-shell.is-touch .settings-card {
        max-width: 600px;
        padding: 10px 18px
    }

    .game-shell.is-touch .settings-card h2 {
        margin: 0 40px 8px 0;
        font-size: 24px
    }

    .game-shell.is-touch .settings-tabs {
        margin-bottom: 10px;
        padding-bottom: 8px
    }

    .game-shell.is-touch .settings-row {
        padding-block:10px}

    .game-shell.is-touch .settings-done {
        height: 44px;
        margin-top: 10px
    }

    .game-shell.is-touch .settings-card .menu-back {
        min-height: 28px;
        margin-bottom: 6px
    }

    .game-shell.is-touch .settings-card .settings-form input,.game-shell.is-touch .settings-card .settings-form .primary-button {
        height: 44px
    }
}

.game-shell[data-soft-keyboard] :is(.modal-backdrop,.game-menu-backdrop) {
    top: var(--keyboard-view-top);
    height: var(--keyboard-view-height);
    padding: 6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));
    align-items: flex-start;
    position: fixed;
    bottom: auto
}

.game-shell[data-soft-keyboard] .settings-card {
    overscroll-behavior: contain;
    width: min(600px,100%);
    height: auto;
    max-height: 100%;
    padding: 10px 16px;
    overflow-y: auto
}

.game-shell[data-soft-keyboard] .settings-card.is-tabbed {
    height: 100%
}

.game-shell[data-soft-keyboard] .settings-card h2 {
    margin: 0 38px 8px 0;
    font-size: 22px
}

.game-shell[data-soft-keyboard] .settings-form {
    gap: 8px
}

.game-shell[data-soft-keyboard] .settings-form>p:first-child:not(.settings-terms) {
    display: none
}

.game-shell[data-soft-keyboard] .settings-form input {
    height: 44px
}

.game-shell[data-soft-keyboard] .touch-layer {
    visibility: hidden;
    pointer-events: none
}

.game-shell[data-soft-keyboard] .music-player.is-open .pocket-device {
    top: calc(var(--keyboard-view-top) + 4px);
    bottom: auto;
    left: auto;
    right: max(8px,env(safe-area-inset-right));
    width: min(480px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px));
    height: calc(var(--keyboard-view-height) - 8px);
    flex-direction: column;
    max-height: none;
    padding: 6px;
    animation: none;
    display: flex;
    position: fixed
}

.game-shell[data-soft-keyboard] .music-player.is-open .pocket-wheel {
    display: none
}

.game-shell[data-soft-keyboard] .music-player.is-open .pocket-screen {
    flex: 1;
    height: auto;
    min-height: 0
}

.game-shell[data-soft-keyboard] .pocket-compose {
    padding: 4px 8px
}

.game-shell[data-soft-keyboard] .pocket-compose input {
    min-height: 40px
}

.game-shell[data-soft-keyboard] .pocket-top {
    padding: 0 4px 2px
}

.game-shell[data-soft-keyboard] .pocket-chat-log {
    margin-top: 0;
    padding: 0 8px 2px;
    -webkit-mask-image: none;
    mask-image: none
}

.game-shell[data-soft-keyboard] .pocket-chat-log .msg.is-first {
    margin-top: 2px
}

.game-shell.is-touch :is(.modal-backdrop,.game-menu-backdrop) {
    -webkit-backdrop-filter: none
}

.game-shell.is-touch .settings-card>.close-button {
    min-width: 44px;
    min-height: 44px;
    top: 8px;
    right: 8px
}

.game-shell.is-touch :is(.pocket-close,.compose-settings,.compose-send) {
    min-width: 32px;
    min-height: 32px
}

.game-shell[data-soft-keyboard] .compose-quick {
    display: none
}

.error-banner .graphics-retry {
    white-space: nowrap;
    border: 1px solid;
    min-height: 44px;
    padding: 8px 12px
}

.game-shell.is-touch .error-banner {
    bottom: max(12px,env(safe-area-inset-bottom));
    max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px);
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    font-size: 13px
}

.game-shell.is-touch .error-banner>span {
    flex: 220px
}

.game-shell.is-touch .error-banner>button {
    min-width: 44px;
    min-height: 44px
}

/* Keep the STEEZ8 identity visible in Basecamp. */
@media(min-width:481px){.game-shell.is-intro .topbar .wordmark{clip-path:none;width:auto;height:auto;position:static;overflow:visible}}

/* The lobby soundtrack and its music toggle are disabled. */
.top-pocket{display:none!important}