.modal-backdrop.is-above-map {
    z-index: 36;
    position: fixed
}

.mountain-selector {
    z-index: 35;
    color: #fff;
    font-family: var(--font-body,"DM Sans",sans-serif);
    background: #8898df;
    position: fixed;
    inset: 0;
    overflow: hidden
}

.mountain-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden
}

.mountain-scene {
    aspect-ratio: 1672/941;
    width: max(100vw,177.68svh);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.mountain-scene picture,.mountain-scene img {
    width: 100%;
    height: 100%;
    display: block
}

.mountain-scene img {
    object-fit: cover
}

.mountain-header {
    z-index: 2;
    background: linear-gradient(#34467f55,#0000);
    align-items: center;
    gap: 24px;
    padding: 24px 30px;
    display: flex;
    position: relative
}

.mountain-header>svg {
    width: 165px;
    height: auto
}

.mountain-heading {
    letter-spacing: .24em;
    font-size: 15px;
    font-weight: 800
}

.mountain-back {
    color: #fff;
    letter-spacing: .08em;
    background: #132239b3;
    border: 1px solid #d9e4f766;
    border-radius: 30px;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 11px 18px 11px 14px;
    font-size: 12px;
    font-weight: 800;
    display: flex
}

.mountain-back:hover {
    background: #1c3152e6
}

.mountain-pin {
    --park: #78f0d3;
    color: #fff;
    text-align: left;
    opacity: .88;
    background: #142238d9;
    border: 2px solid #c4d9fa40;
    border-radius: 12px;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 7px 12px 7px 6px;
    transition: transform .18s,box-shadow .18s,background .18s,border-color .18s,opacity .18s;
    display: flex;
    position: absolute;
    transform: translate(-15%,-50%)scale(.94);
    box-shadow: 0 5px 25px #19275233
}

.mountain-pin:hover {
    opacity: 1;
    background: #1a2c48ee;
    border-color: #e6efffaa;
    transform: translate(-15%,-50%)scale(.98)
}

.mountain-pin.is-selected {
    opacity: 1;
    background: #1c3355f7;
    border-color: #fff;
    transform: translate(-15%,-50%)scale(1.06);
    box-shadow: 0 0 0 6px #ffffff38,0 10px 34px #0d1a3a88
}

.mountain-pin b {
    letter-spacing: .04em;
    font-size: 21px;
    font-style: italic;
    font-weight: 900;
    display: block
}

.mountain-pin small {
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 2px;
    font-size: 9px;
    display: block
}

.pin-copy {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.pin-counts {
    letter-spacing: .08em;
    color: #8e9fbb;
    white-space: nowrap;
    gap: 11px;
    font-size: 10px;
    font-weight: 800;
    display: flex
}

.pin-counts>span {
    align-items: center;
    gap: 5px;
    display: flex
}

.pin-counts .is-on {
    color: #fff
}

.live-dot {
    background: #43e08a;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: inline-block;
    box-shadow: 0 0 0 3px #43e08a33
}

.pin-number {
    border: 4px solid var(--park);
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 23px;
    font-style: italic;
    font-weight: 900;
    display: grid
}

.mountain-pin.is-selected .pin-number {
    background: var(--park);
    color: #0e1b2d
}

.pin-check {
    color: #0e1b2d;
    background: #fff;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 2px;
    display: grid
}

.pin-here {
    white-space: nowrap;
    color: #fff;
    letter-spacing: .1em;
    background: #ff633f;
    border-radius: 7px;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    position: absolute;
    bottom: calc(100% + 9px);
    left: 0;
    box-shadow: 0 4px 14px #b8321a55
}

.pin-here:after {
    content: "";
    border: 6px solid #0000;
    border-top-color: #ff633f;
    position: absolute;
    top: 100%;
    left: 20px
}

.pin-nordryggen {
    top: 53%;
    left: 17%
}

.pin-apex {
    --park: #ff865a;
    top: 18%;
    left: 82%
}

.mountain-card {
    z-index: 2;
    background: linear-gradient(140deg,#1b304bef,#0e1b2df7);
    border: 1px solid #b3c2de55;
    border-radius: 17px;
    width: 380px;
    padding: 22px;
    position: absolute;
    bottom: 30px;
    right: 30px;
    box-shadow: 0 15px 60px #14264b55
}

.mountain-card-title {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    display: flex
}

.mountain-card h1 {
    letter-spacing: -.03em;
    margin: 0;
    font-size: 46px;
    font-style: italic;
    font-weight: 900;
    line-height: 1
}

.mountain-card-title p {
    letter-spacing: .19em;
    text-transform: uppercase;
    color: #d2daed;
    margin: 8px 0 0;
    font-size: 11px;
    font-weight: 700
}

.mountain-badge {
    color: #d49bff;
    white-space: nowrap;
    border: 1px solid #bd78f9;
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 800
}

.card-nordryggen .mountain-badge {
    color: #94ecd9;
    border-color: #67d8c3
}

.mountain-description {
    color: #ebeff8;
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.5
}

.mountain-facts {
    border-top: 1px solid #a7badc38;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
    display: flex
}

.mountain-facts span {
    letter-spacing: .04em;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
    display: flex
}

.mountain-modes {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 16px 0 0;
    display: grid
}

.mountain-mode {
    color: #fff;
    text-align: left;
    background: #ffffff0d;
    border: 2px solid #b3c2de55;
    border-radius: 12px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 11px;
    transition: background .15s,border-color .15s,color .15s;
    display: flex;
    position: relative
}

.mountain-mode.is-solo {
    background: linear-gradient(135deg,#2560d840,#0e2a6b40);
    border-color: #5aa2ff70
}

.mountain-mode.is-live {
    background: linear-gradient(135deg,#7a33d640,#35106f40);
    border-color: #c77dff70
}

.mountain-mode:not([aria-pressed=true]):hover {
    filter: brightness(1.18);
    border-color: #e6efffaa
}

.mountain-mode.is-solo[aria-pressed=true] {
    background: radial-gradient(circle at 72% 18%,#5aa2ff 0%,#2560d8 46%,#0e2a6b 100%);
    border-color: #f7f6ef
}

.mountain-mode.is-live[aria-pressed=true] {
    background: radial-gradient(circle at 72% 18%,#c77dff 0%,#7a33d6 45%,#35106f 100%);
    border-color: #f7f6ef
}

.mountain-mode b {
    letter-spacing: .06em;
    font-size: 13px;
    font-weight: 900;
    display: block
}

.mountain-mode>svg:first-child {
    flex: none
}

.mode-mark {
    flex: none;
    margin-left: auto
}

.mountain-ride {
    color: #fff;
    background: #ff633f;
    border: 0;
    border-radius: 9px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding: 14px 18px;
    font-size: 17px;
    font-weight: 900;
    display: flex;
    box-shadow: 0 5px 20px #e33b2320
}

.mountain-ride:hover {
    background: #ff7858
}

.mountain-hint {
    letter-spacing: .18em;
    text-shadow: 0 1px 8px #183361;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    bottom: 28px;
    left: 30px
}

.mountain-selector button {
    cursor: pointer
}

.mountain-selector button:focus-visible {
    outline-offset: 3px;
    outline: 3px solid #ffd84d
}

@media (max-width: 1000px) {
    .mountain-header {
        gap:15px;
        padding: 18px
    }

    .mountain-header>svg {
        width: 120px
    }

    .mountain-heading {
        letter-spacing: .16em;
        font-size: 11px
    }

    .mountain-card {
        width: 320px;
        padding: 18px;
        bottom: 20px;
        right: 20px
    }

    .mountain-card h1 {
        font-size: 37px
    }

    .mountain-pin b {
        font-size: 17px
    }

    .mountain-pin small {
        font-size: 8px
    }

    .mountain-pin {
        gap: 7px;
        min-height: 52px;
        padding-right: 9px
    }

    .pin-number {
        width: 40px;
        height: 40px;
        font-size: 19px
    }

    .pin-apex {
        left: 77%
    }

    .mountain-mode {
        min-height: 40px;
        padding: 7px 10px
    }
}

@media (orientation: portrait) {
    .mountain-header {
        gap:12px;
        padding: 16px
    }

    .mountain-heading {
        letter-spacing: .13em;
        font-size: 10px
    }

    .mountain-header>svg {
        width: 92px
    }

    .mountain-heading {
        letter-spacing: .1em
    }

    .mountain-back {
        padding: 8px 12px 8px 9px;
        font-size: 11px
    }

    .mountain-back .back-to {
        display: none
    }

    .mountain-viewport {
        bottom: 300px
    }

    .mountain-scene {
        aspect-ratio: 941/1672;
        width: max(100vw,56.28svh - 168.84px)
    }

    .pin-nordryggen {
        top: 55%;
        left: 21%
    }

    .pin-apex {
        top: 26%;
        left: 62%;
        transform: translate(-45%,-50%)scale(.94)
    }

    .pin-apex:hover {
        transform: translate(-45%,-50%)scale(.98)
    }

    .pin-apex.is-selected {
        transform: translate(-45%,-50%)scale(1.06)
    }

    .mountain-card {
        width: 100%;
        padding: 14px 18px max(16px,env(safe-area-inset-bottom));
        border-radius: 23px 23px 0 0;
        bottom: 0;
        right: 0
    }

    .mountain-card h1 {
        font-size: 34px
    }

    .mountain-card-title p {
        margin-top: 5px;
        font-size: 9px
    }

    .mountain-description {
        display: none
    }

    .mountain-facts {
        gap: 10px;
        margin-top: 10px;
        padding-top: 10px
    }

    .mountain-facts span {
        font-size: 9px
    }

    .mountain-modes {
        margin: 12px 0 0
    }

    .mountain-ride {
        margin-top: 8px;
        padding: 12px 16px;
        font-size: 15px
    }

    .mountain-hint {
        display: none
    }
}

@media (max-height: 520px) and (orientation:landscape) {
    .mountain-header {
        padding:10px 18px
    }

    .mountain-heading {
        display: none
    }

    .mountain-card {
        width: 320px;
        padding: 13px;
        bottom: 12px;
        right: 12px
    }

    .mountain-card h1 {
        font-size: 30px
    }

    .mountain-description {
        display: none
    }

    .mountain-facts {
        gap: 8px;
        margin-top: 8px;
        padding-top: 9px
    }

    .mountain-facts span {
        font-size: 9px
    }

    .mountain-modes {
        grid-template-columns: auto 1fr;
        margin: 8px 0 0
    }

    .mountain-mode {
        min-height: 34px;
        padding: 5px 9px
    }

    .mountain-ride {
        margin-top: 6px;
        padding: 9px 12px;
        font-size: 13px
    }

    .pin-apex {
        top: 24%;
        left: 71%
    }

    .pin-nordryggen {
        top: 50%;
        left: 15%
    }

    .mountain-hint {
        font-size: 8px;
        bottom: 12px;
        left: 18px
    }
}

@media (prefers-reduced-motion:reduce) {
    .mountain-pin,.mountain-mode {
        transition: none
    }
}

.pin-shirakumo {
    --park: #badfe5;
    top: 25%;
    left: 41%
}

.card-shirakumo .mountain-badge {
    color: #173c38;
    background: #d0e9e3;
    border-color: #a4d3ce
}

.pin-shirakumo small {
    color: #c1e6ed
}

@media (orientation: portrait) {
    .pin-shirakumo {
        top:29%;
        left: 30%;
        transform: translate(-35%,-50%)scale(.94)
    }

    .pin-shirakumo:hover {
        transform: translate(-35%,-50%)scale(.98)
    }

    .pin-shirakumo.is-selected {
        transform: translate(-35%,-50%)scale(1.06)
    }

    .pin-apex {
        top: 40%;
        left: 78%
    }

    .pin-nordryggen {
        top: 56%;
        left: 18%
    }
}

@media (max-height: 520px) and (orientation:landscape) {
    .pin-shirakumo {
        top:30%;
        left: 40%
    }

    .mountain-selector .mountain-card.card-shirakumo h1 {
        font-size: 31px
    }
}

@media (max-width: 650px) and (max-height:740px) and (orientation:portrait) {
    .mountain-scene {
        top:0;
        transform: translate(-50%)
    }

    .pin-shirakumo {
        top: 21%
    }

    .pin-apex {
        top: 33%
    }

    .pin-nordryggen {
        top: 47%
    }
}

.mountain-mode:disabled {
    opacity: .45;
    cursor: not-allowed
}

.pin-duels {
    letter-spacing: .08em;
    color: #fff;
    white-space: nowrap;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    display: flex
}

.mountain-duels {
    z-index: 2;
    background: linear-gradient(140deg,#1b304bef,#0e1b2df7);
    border: 1px solid #b3c2de55;
    border-radius: 17px;
    width: 340px;
    padding: 14px 16px 16px;
    position: absolute;
    top: 96px;
    left: 30px;
    box-shadow: 0 15px 60px #14264b55
}

.mountain-duels-head {
    letter-spacing: .19em;
    color: #d2daed;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    display: flex
}

.mountain-duel {
    color: #fff;
    text-align: left;
    cursor: pointer;
    background: #0b1626aa;
    border: 1px solid #b3c2de44;
    border-radius: 12px;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
    padding: 10px 10px 10px 13px;
    transition: border-color .15s,translate .15s;
    display: grid
}

:is(.mountain-duel:hover,.mountain-duel:focus-visible) {
    border-color: #f7f6efaa;
    translate: 0 -1px
}

.mountain-duel-names {
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    display: flex;
    overflow: hidden
}

.mountain-duel-names b {
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .03em;
    font-size: 17px;
    font-style: italic;
    font-weight: 900;
    overflow: hidden
}

.mountain-duel-names small {
    letter-spacing: .12em;
    color: #8e9fbb;
    flex: none;
    font-size: 10px;
    font-weight: 800
}

.mountain-duel-eyes {
    color: #fff;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 800;
    display: flex
}

.mountain-duel-watch {
    color: #101418;
    letter-spacing: .08em;
    background: #f7f6ef;
    border-radius: 8px;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
    display: flex
}

@media (max-width: 1000px) {
    .mountain-duels {
        width:300px;
        top: 84px;
        left: 20px
    }
}

@media (orientation: portrait) {
    .mountain-duels {
        width:auto;
        padding: 10px 12px 12px;
        top: 68px;
        left: 12px;
        right: 12px
    }

    .mountain-duel {
        margin-top: 6px;
        padding: 8px 8px 8px 11px
    }

    .mountain-duel-names b {
        font-size: 15px
    }

    .mountain-selector:has(.duel-end) .mountain-duels {
        display: none
    }
}

@media (max-height: 520px) and (orientation:landscape) {
    .mountain-duels {
        width:280px;
        padding: 10px 12px;
        top: 56px;
        left: 18px
    }

    .mountain-duel {
        margin-top: 6px;
        padding: 7px 8px 7px 11px
    }
}

.pin-bigair {
    --park: #ff4562;
    top: 51%;
    left: 62%
}

.pin-bigair b {
    white-space: nowrap
}

.card-bigair .mountain-badge {
    color: #96233d;
    background: #ffe0e5;
    border-color: #f5abb8
}

@media (orientation: portrait) {
    .pin-bigair {
        top:72%;
        left: 67%;
        transform: translate(-50%,-50%)scale(.94)
    }

    .pin-bigair:hover {
        transform: translate(-50%,-50%)scale(.98)
    }

    .pin-bigair.is-selected {
        transform: translate(-50%,-50%)scale(1.06)
    }
}

@media (max-height: 520px) and (orientation:landscape) {
    .pin-bigair {
        top:67%;
        left: 39%
    }
}

.pin-forestline {
    --park: #91bfa1;
    top: 72%;
    left: 32%
}

.pin-forestline b {
    white-space: nowrap
}

.card-forestline .mountain-badge {
    color: #254832;
    background: #dbeadb
}

@media (orientation: portrait) {
    .pin-forestline {
        top:83%;
        left: 22%;
        transform: translate(-40%,-50%)scale(.88)
    }

    .pin-forestline:hover {
        transform: translate(-40%,-50%)scale(.92)
    }

    .pin-forestline.is-selected {
        transform: translate(-40%,-50%)scale(1)
    }
}

@media (max-width: 650px) and (max-height:740px) and (orientation:portrait) {
    .pin-forestline {
        top:35%
    }

    .pin-bigair {
        top: 58%
    }
}

@media (max-height: 520px) and (orientation:landscape) {
    .pin-forestline {
        top:76%;
        left: 15%
    }
}

.pin-halfpipe {
    --park: #7fb8e8;
    top: 66%;
    left: 50%
}

.pin-halfpipe b {
    white-space: nowrap
}

.card-halfpipe .mountain-badge {
    color: #1d4a73;
    background: #dcecf8;
    border-color: #a9cdea
}

@media (orientation: portrait) {
    .pin-halfpipe {
        top:64%;
        left: 48%;
        transform: translate(-40%,-50%)scale(.88)
    }

    .pin-halfpipe:hover {
        transform: translate(-40%,-50%)scale(.92)
    }

    .pin-halfpipe.is-selected {
        transform: translate(-40%,-50%)scale(1)
    }
}

@media (max-width: 650px) and (max-height:740px) and (orientation:portrait) {
    .pin-halfpipe {
        top:47%
    }
}

@media (max-height: 520px) and (orientation:landscape) {
    .pin-halfpipe {
        top:58%;
        left: 55%
    }
}

.mountain-rooms {
    margin-top: 12px
}

.mountain-rooms-head {
    letter-spacing: .14em;
    color: #c9d4ea;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 900
}

.mountain-room-list {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    gap: 5px;
    max-height: 142px;
    display: grid;
    overflow-y: auto
}

.mountain-room {
    color: #fff;
    text-align: left;
    cursor: pointer;
    background: #ffffff0d;
    border: 2px solid #b3c2de44;
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 32px;
    padding: 5px 11px;
    transition: background .15s,border-color .15s;
    display: flex
}

.mountain-room b {
    letter-spacing: .06em;
    font-size: 13px;
    font-weight: 900
}

.mountain-room span {
    font-variant-numeric: tabular-nums;
    color: #dfe6f4;
    margin-left: auto;
    font-size: 12px;
    font-weight: 800
}

.mountain-room em {
    letter-spacing: .08em;
    text-align: right;
    color: #c9d4ea;
    flex: none;
    min-width: 34px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900
}

.mountain-room>svg {
    flex: none;
    width: 34px
}

.mountain-room:hover:not(:disabled) {
    border-color: #f7f6efaa
}

.mountain-room.is-picked {
    background: radial-gradient(circle at 80% 20%,#c77dff66 0%,#7a33d688 60%,#3a157acc 100%);
    border-color: #f7f6ef
}

.mountain-room:disabled {
    opacity: .5;
    cursor: not-allowed
}

.mountain-room.is-party b {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

@media (max-height: 520px) and (orientation:landscape) {
    .mountain-rooms {
        margin-top:8px
    }

    .mountain-rooms-head {
        display: none
    }

    .mountain-room-list {
        max-height: 74px
    }

    .mountain-room {
        min-height: 28px;
        padding: 3px 10px
    }
}

@media (prefers-reduced-motion:reduce) {
    .mountain-room {
        transition: none
    }
}

@media (min-width: 651px) and (orientation:portrait) {
    .mountain-viewport {
        bottom:0
    }

    .mountain-scene {
        width: max(100vw,56.28svh)
    }

    .mountain-card {
        width: min(100%,600px);
        left: 50%;
        right: auto;
        translate: -50%
    }
}

.mountain-duel+.mountain-duels-head {
    margin-top: 12px
}

@media (max-width: 650px) and (orientation:portrait),(max-height:520px) and (orientation:landscape) {
    .mountain-duels.is-elsewhere .mountain-duel:nth-of-type(n+2),.mountain-duels.is-elsewhere .mountain-duels-head:nth-of-type(n+2) {
        display:none
    }
}

@media (max-width: 650px) and (max-height:800px) and (orientation:portrait) {
    .mountain-duels.is-elsewhere {
        display:none
    }
}

.game-shell .private-setup {
    --pass-panel: #141518;
    --pass-ink: #f2f2ee;
    --pass-on-ink: #111;
    --pass-hover: #fff;
    --pass-line: #ffffff1c;
    --pass-tile: #1b1c1f;
    --pass-quiet: #8d8d92;
    --pass-lift: #00000080;
    --pass-glow: 30%;
    background: var(--pass-panel);
    width: 620px;
    max-width: 100%;
    max-height: 95%;
    color: var(--pass-ink);
    box-shadow: inset 0 0 0 1px var(--pass-line),0 30px 80px #000000a6;
    border: 0;
    border-radius: 14px;
    margin: 0;
    padding: 24px 24px 22px;
    position: relative;
    overflow: hidden auto
}

.game-shell[data-menus=light] .private-setup {
    --pass-panel: #f8fafb;
    --pass-ink: #1d2127;
    --pass-on-ink: #fff;
    --pass-hover: #343a42;
    --pass-line: #d9dee3;
    --pass-tile: #f4f6f8;
    --pass-quiet: #68707a;
    --pass-lift: #0000002e;
    --pass-glow: 18%
}

.private-setup button {
    cursor: pointer
}

.private-setup button:focus-visible {
    outline: 2px solid var(--pass-ink);
    outline-offset: 3px
}

.ps-close {
    background: var(--pass-panel);
    width: 36px;
    height: 36px;
    color: var(--pass-ink);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border: 0;
    border-radius: 8px;
    place-items: center;
    padding: 0;
    transition: background .15s;
    display: grid;
    position: absolute;
    top: 18px;
    right: 18px
}

.ps-close:hover {
    background: var(--pass-tile)
}

.game-shell .private-setup h2 {
    font: 400 52px/1 var(--display);
    text-transform: uppercase;
    color: var(--pass-ink);
    margin: 0 52px 18px 0
}

.ps-label {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    color: var(--pass-quiet);
    margin: 0 0 8px
}

.ps-maps,.ps-teams {
    border: 0;
    min-width: 0;
    margin: 0;
    padding: 0
}

.ps-maps {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 18px;
    display: grid
}

.ps-teams {
    gap: 10px;
    display: grid
}

.ps-map {
    --hue: #6f8f98
}

.ps-map.is-apex {
    --hue: #2560d8
}

.ps-map.is-forestline {
    --hue: #2f9e5b
}

.ps-map.is-halfpipe {
    --hue: #17a6c4
}

.ps-map.is-bigair {
    --hue: #c3134a
}

.ps-map,.ps-team {
    color: var(--pass-ink);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border: 0;
    border-radius: 10px;
    transition: transform .15s,box-shadow .15s
}

.ps-map {
    height: 64px;
    font: 400 20px/1 var(--display);
    white-space: nowrap;
    text-overflow: ellipsis;
    background: linear-gradient(var(--hue),var(--hue)) 0 100%/100% 4px no-repeat,radial-gradient(ellipse 80% 70% at 50% 45%,color-mix(in srgb,var(--hue) var(--pass-glow),transparent) 0%,transparent 100%),var(--pass-tile);
    padding: 0 8px;
    overflow: hidden
}

.ps-team {
    background: var(--pass-tile);
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 14px;
    display: grid
}

.ps-map:hover,.ps-team:hover {
    box-shadow: inset 0 0 0 1px var(--pass-line),0 10px 20px var(--pass-lift);
    transform: translateY(-2px)
}

.ps-map[aria-pressed=true],.ps-team[aria-pressed=true] {
    box-shadow: inset 0 0 0 2px var(--pass-ink),0 8px 16px var(--pass-lift);
    transform: translateY(-3px)
}

.ps-pair {
    align-items: center;
    gap: 10px;
    min-width: 0;
    display: flex
}

.ps-team>.ps-pair:last-child {
    text-align: right;
    flex-direction: row-reverse
}

.ps-faces {
    flex: none;
    display: flex
}

.ps-face {
    background: var(--pass-panel);
    width: 40px;
    height: 40px;
    color: var(--pass-ink);
    font: 400 17px/1 var(--display);
    box-shadow: 0 0 0 2px var(--pass-tile);
    border-radius: 50%;
    place-items: center;
    display: grid;
    overflow: hidden
}

.ps-face+.ps-face {
    margin-left: -10px
}

.ps-face img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.ps-names {
    min-width: 0;
    font: 400 18px/1.05 var(--display);
    overflow-wrap: anywhere
}

.ps-vs {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    color: var(--pass-quiet);
    font-style: normal
}

.ps-start {
    background: var(--pass-ink);
    width: 100%;
    height: 56px;
    color: var(--pass-on-ink);
    font: 700 14px/1 var(--body);
    letter-spacing: .14em;
    border: 0;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0 20px 0 22px;
    transition: background .15s;
    display: flex
}

.ps-start:hover:not(:disabled) {
    background: var(--pass-hover)
}

.ps-start:disabled {
    opacity: .45;
    cursor: not-allowed
}

@media (max-width: 600px) {
    .game-shell .private-setup {
        padding:20px 14px 16px
    }

    .game-shell .private-setup h2 {
        margin-bottom: 14px;
        font-size: 40px
    }

    .ps-maps {
        grid-template-columns: repeat(2,minmax(0,1fr));
        margin-bottom: 14px
    }

    .ps-map {
        height: 52px;
        font-size: 18px
    }

    .ps-team {
        gap: 6px;
        min-height: 0;
        padding: 10px
    }

    .ps-pair {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .ps-team>.ps-pair:last-child {
        flex-direction: column;
        align-items: flex-end
    }

    .ps-face {
        width: 34px;
        height: 34px;
        font-size: 15px
    }

    .ps-names {
        font-size: 15px
    }

    .ps-start {
        height: 52px
    }
}

@media (prefers-reduced-motion:reduce) {
    .ps-map,.ps-team,.ps-start,.ps-close {
        transition: none
    }
}

.rank-chip {
    --rank: #d6d5cc;
    color: #f7f6ef;
    font-synthesis: none;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 100%;
    text-shadow: none;
    flex: none;
    align-items: center;
    gap: 7px;
    font: 700 12px/1.2 Barlow Condensed,sans-serif;
    display: inline-flex
}

.rank-emblem {
    width: var(--rank-size,32px);
    height: var(--rank-size,32px);
    vertical-align: middle;
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.rank-emblem>img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block
}

.rank-chip-copy {
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    display: inline-flex
}

.rank-chip-name {
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden
}

.rank-chip .rank-step {
    font: inherit;
    color: var(--rank);
    letter-spacing: 1px
}

.rank-chip-rating {
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    color: #bac7ce;
    flex: none;
    font: 600 13px/1.2 Barlow Condensed,sans-serif
}

.rank-chip-rating>span {
    letter-spacing: 1px;
    color: #8e9fa9;
    font-size: 10px
}

.rank-chip.is-card {
    letter-spacing: .9px;
    gap: 10px;
    font-size: 18px
}

.rank-chip.is-card .rank-chip-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
}

.rank-chip.is-card .rank-chip-rating {
    font-size: 16px
}

.rank-chip.is-card .rank-chip-rating>span {
    font-size: 11px
}

.rank-chip.is-contender,.rank-emblem.is-contender {
    --rank: #e58045
}

.rank-chip.is-challenger,.rank-emblem.is-challenger {
    --rank: #c9d5df
}

.rank-chip.is-pro,.rank-emblem.is-pro {
    --rank: #ffc52e
}

.rank-chip.is-elite,.rank-emblem.is-elite {
    --rank: #39cfff
}

.rank-chip.is-master,.rank-emblem.is-master {
    --rank: #b58aff
}

.rank-chip.is-champion,.rank-emblem.is-champion {
    --rank: #ff6260
}

.rank-chip.is-legend,.rank-emblem.is-legend {
    --rank: #e5c777
}

.rank-chip.is-placement {
    --rank: #b6bdb8;
    color: #b9c5cb;
    letter-spacing: 1px;
    gap: 5px;
    min-height: 32px
}

.rank-chip.is-placement b {
    font: inherit;
    color: #f7f6ef;
    font-variant-numeric: tabular-nums
}

.rank-ladder {
    color: #fff6e6;
    text-shadow: none;
    background: #17191b;
    border: 1px solid #ffffff30;
    border-radius: 8px;
    margin: 0 0 14px
}

.rank-ladder summary {
    cursor: pointer;
    letter-spacing: 1px;
    min-height: 44px;
    padding: 12px 14px;
    font: 700 15px/1.3 Barlow Condensed,sans-serif
}

.rank-ladder summary>span {
    float: right;
    color: #bdc1c6;
    padding-top: 3px;
    font-size: 11px
}

.rank-ladder summary:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #fff6e6
}

.rank-ladder>p {
    color: #c7c9cc;
    margin: 0;
    padding: 0 14px 14px;
    font: 400 12px/1.5 DM Sans,sans-serif
}

.rank-ladder-groups {
    grid-template-columns: repeat(auto-fit,minmax(145px,1fr));
    gap: 8px;
    margin: 0;
    padding: 0 12px 12px;
    list-style: none;
    display: grid
}

.rank-ladder-groups>li {
    text-align: center;
    background: #25272a;
    border: 1px solid #ffffff20;
    border-radius: 4px;
    padding: 12px 5px 8px
}

.rank-ladder-groups strong {
    letter-spacing: .6px;
    font: 700 16px/1.2 Barlow Condensed,sans-serif
}

.rank-ladder-steps {
    justify-content: center;
    gap: 3px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.rank-ladder-steps>li {
    border: 1px solid #0000;
    border-radius: 3px;
    flex-direction: column;
    flex: 1;
    align-items: center;
    gap: 7px;
    max-width: 66px;
    min-height: 78px;
    padding: 6px 2px;
    font: 700 12px/1 Barlow Condensed,sans-serif;
    display: flex
}

.rank-ladder-steps>li[aria-current=step] {
    background: #ffffff14;
    border-color: #fff6e6
}

.rank-ladder-steps .rank-emblem {
    width: 34px;
    height: 34px
}

.rank-ladder-points {
    color: #c7c9cc;
    white-space: nowrap;
    font: 500 9px/1.2 DM Sans,sans-serif
}

.rank-ladder-steps small {
    color: #c6ff3d;
    font: 700 9px/1 DM Sans,sans-serif
}

.duel-hud {
    z-index: 6;
    pointer-events: none;
    font-family: var(--body);
    color: #f7f6ef;
    --xg-ink: #050505;
    --xg-panel: #0a0a0aee;
    --xg-line: #ffffff1c;
    --xg-white: #f4f4f4;
    --xg-blue: #6ec6ea;
    --xg-blue-ink: #03161f;
    --xg-navy: #172f73;
    --xg-mute: #9aa6ab;
    --xg-num: "Barlow Condensed","DM Sans",sans-serif;
    position: absolute;
    inset: 0
}

.duel-hud button,.duel-hud a {
    pointer-events: auto
}

.duel-hud b,.duel-hud strong,.duel-hud h2,.duel-watch,.duel-to-beat,.duel-clock,.duel-posted-who,.duel-end-head,.duel-end-score,.duel-end-status,.duel-invite,.duel-sticker,.duel-vs-head,.duel-vs-format,.duel-vs-tag,.duel-athlete-run,.duel-athlete-target {
    font-family: "Knewave",var(--display);
    font-synthesis: none;
    letter-spacing: .02em;
    font-style: normal;
    font-weight: 400
}

.duel-photo {
    background: radial-gradient(circle at 50% 35%,#2b4a5c,#0d1a22);
    border-radius: 12px;
    position: relative;
    overflow: hidden
}

.duel-photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.duel-photo span {
    font: 400 64px/1 "Knewave",var(--display);
    color: #f7f6ef55;
    place-items: center;
    display: grid;
    position: absolute;
    inset: 0
}

.duel-sticker {
    color: #101418;
    background: #f7f6ef;
    border: 0;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    font-size: 24px;
    line-height: 1;
    transition: transform .15s,box-shadow .15s;
    display: inline-flex;
    rotate: -2deg;
    box-shadow: 0 0 0 3px #101418,7px 7px 0 3px #0000006b
}

.duel-sticker:hover:not(:disabled) {
    transform: translate(-2px,-2px);
    box-shadow: 0 0 0 3px #101418,9px 9px 0 3px #0000006b
}

.duel-sticker:disabled {
    opacity: .55;
    cursor: default
}

.duel-sticker kbd {
    font: 400 12px/1 "Knewave",var(--display);
    color: #f7f6ef;
    background: #101418;
    border-radius: 6px;
    padding: 4px 6px;
    rotate: 4deg
}

.duel-sticker.is-small {
    padding: 10px 14px;
    font-size: 18px;
    box-shadow: 0 0 0 2px #101418,5px 5px 0 2px #0000006b
}

.duel-bug {
    width: 344px;
    position: absolute;
    top: 30px;
    left: 47px
}

.duel-bug-top {
    align-items: stretch;
    display: flex
}

.duel-bug-tile {
    background: var(--xg-white);
    width: 82px;
    color: var(--xg-ink);
    flex-direction: column;
    flex: none;
    justify-content: center;
    align-items: center;
    padding: 8px 4px;
    display: flex
}

.duel-hud .duel-bug-tile b {
    font-size: 26px;
    line-height: 1;
    rotate: -3deg
}

.duel-bug-tile span {
    font: 700 14px/1 var(--xg-num);
    letter-spacing: .14em;
    margin-top: 4px
}

.duel-bug-tile small {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .12em;
    background: var(--xg-ink);
    color: var(--xg-white);
    margin-top: 5px;
    padding: 2px 5px 1px
}

.duel-bug-board {
    background: #0a0a0a;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.duel-bug-board li {
    grid-template-columns: 22px minmax(0,1fr) auto;
    align-items: stretch;
    height: 36px;
    padding-left: 10px;
    display: grid
}

.duel-bug-board li+li {
    border-top: 1px solid var(--xg-line)
}

.duel-bug-place {
    font: 700 17px/1 var(--xg-num);
    color: var(--xg-mute);
    align-items: center;
    display: flex
}

.duel-bug-who {
    white-space: nowrap;
    min-width: 0;
    font: 400 18px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    align-items: center;
    gap: 7px;
    display: flex;
    overflow: hidden
}

.duel-bug-board li.is-on .duel-bug-who:before {
    content: "";
    background: var(--xg-blue);
    border-radius: 50%;
    flex: none;
    width: 7px;
    height: 7px
}

.duel-bug-who small,.duel-athlete h2 small {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .12em;
    background: var(--xg-blue);
    color: var(--xg-blue-ink);
    padding: 2px 5px 1px
}

.duel-bug-best {
    background: var(--xg-blue);
    min-width: 100px;
    color: var(--xg-blue-ink);
    font: 700 24px/1 var(--xg-num);
    font-variant-numeric: tabular-nums;
    justify-content: flex-end;
    align-items: center;
    padding: 0 11px;
    display: flex
}

.duel-bug-board li+li .duel-bug-best {
    box-shadow: inset 0 1px #03161f26
}

.duel-bug-rider {
    background: var(--xg-ink);
    border-top: 2px solid var(--xg-blue);
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 9px 12px 8px;
    display: flex
}

.duel-hud .duel-bug-rider b {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 22px;
    line-height: 1;
    overflow: hidden
}

.duel-bug-rider span {
    font: 700 14px/1 var(--xg-num);
    letter-spacing: .14em
}

.duel-hud.is-present .duel-bug-rider,.duel-hud.is-count .duel-bug-rider,.game-shell.is-duel .run-heading,.game-shell.is-duel .live-roster {
    display: none
}

.game-shell.is-duel .wordmark {
    visibility: hidden
}

.game-shell.is-duel .live-chat {
    top: 244px
}

@media (min-width: 761px) {
    .game-shell.is-duel:has(.live-chat) .trick-feedback {
        text-align:right;
        width: min(440px,100vw - 498px);
        inset: max(33%,272px) 47px auto auto;
        transform: translate(0,0)
    }

    .game-shell.is-duel:has(.live-chat) .trick-feedback .trick-readout strong {
        transform-origin: 100% 60%;
        font-size: clamp(32px,3.5vw,48px)
    }
}

.game-shell.is-duel-intro .live-chat,.game-shell.is-duel-winner .live-chat,.game-shell.is-duel-over .live-chat {
    display: none
}

.duel-vs {
    background: radial-gradient(at 50% 55%,#0a121866 0%,#0a1218c4 70%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    animation: .5s both duel-fade;
    display: flex;
    position: absolute;
    inset: 0
}

.duel-vs-head {
    color: #f7f6efcc;
    margin: 0;
    font-size: 22px;
    animation: .5s .2s both duel-rise
}

.duel-vs-row {
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: clamp(18px,4vw,60px);
    width: min(880px,100% - 32px);
    display: grid
}

.duel-vs-card {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
    animation: .6s cubic-bezier(.2,.9,.25,1.15) .1s both duel-in-left;
    display: flex
}

.duel-vs-card:last-child {
    animation-name: duel-in-right
}

.duel-vs-sticker {
    aspect-ratio: 2/3;
    place-items: end center;
    max-width: 100%;
    height: clamp(160px,40vh,380px);
    display: grid;
    rotate: -3deg
}

.duel-vs-card:last-child .duel-vs-sticker {
    rotate: 3deg
}

.duel-vs-sticker img {
    filter: drop-shadow(8px 10px #0000006b);
    max-width: 100%;
    max-height: 100%
}

.duel-vs-sticker span {
    font: 400 72px/1 "Knewave",var(--display);
    color: #f7f6ef44;
    align-self: center
}

.duel-vs-card h2 {
    text-shadow: 0 4px 18px #000a;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28vw;
    margin: -6px 0 0;
    font-size: clamp(30px,3.8vw,54px);
    line-height: 1;
    overflow: hidden;
    rotate: -3deg
}

.duel-vs-tag {
    color: #101418;
    background: #f7f6ef;
    border-radius: 6px;
    padding: 4px 9px 3px;
    font-size: 14px
}

.duel-vs-mark {
    color: #f3c24d;
    -webkit-text-stroke: 3px #101418;
    text-shadow: 7px 7px #0000006b;
    font-size: clamp(70px,9vw,130px);
    line-height: 1;
    animation: .5s cubic-bezier(.2,.9,.25,1.4) .65s both duel-stamp;
    rotate: -8deg
}

.duel-vs-format {
    margin: 0;
    font-size: 24px;
    animation: .5s .9s both duel-rise
}

.duel-vs-record {
    font: 600 14px/1 var(--xg-num);
    letter-spacing: .08em;
    color: var(--xg-mute);
    font-variant-numeric: tabular-nums;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    animation: .5s .8s both duel-rise;
    display: inline-flex
}

.duel-hud .duel-vs-record b {
    font: 700 19px/1 var(--xg-num);
    color: var(--xg-white);
    letter-spacing: 0
}

.duel-vs-record b:not(:first-child) {
    margin-left: 8px
}

.duel-vs-card .rank-chip.duel-vs-rank {
    border-top: 1px solid #ffffff24;
    justify-content: center;
    width: 100%;
    padding: 10px 4px 0;
    animation: .5s .7s both duel-rise
}

.duel-athlete .rank-chip.duel-athlete-rank {
    font-size: 13px
}

.duel-athlete {
    background: var(--xg-ink);
    border-top: 2px solid var(--xg-blue);
    align-items: stretch;
    width: min(520px,100% - 94px);
    animation: .45s cubic-bezier(.2,.9,.25,1.1) both duel-in-left;
    display: flex;
    position: absolute;
    bottom: 64px;
    left: 47px
}

.duel-athlete .duel-photo {
    aspect-ratio: 640/520;
    background: radial-gradient(120% 90% at 50% 18%,#2a5f78 0%,#10283a 48%,#050505 100%);
    border-radius: 0;
    flex: none;
    width: 170px
}

.duel-athlete-text {
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
    display: flex
}

.duel-athlete h2 {
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 14px 16px 6px;
    font-size: 36px;
    line-height: 1.15;
    display: flex
}

.duel-athlete h2>span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.duel-athlete h2>small {
    flex: none
}

.duel-athlete-meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
    padding: 0 16px 10px;
    display: flex
}

.duel-athlete-meta:empty {
    display: none
}

.duel-athlete-record {
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .08em;
    color: var(--xg-mute);
    font-variant-numeric: tabular-nums;
    align-items: baseline;
    gap: 3px;
    margin-left: auto;
    display: inline-flex
}

.duel-hud .duel-athlete-record b {
    font: 700 18px/1 var(--xg-num);
    color: var(--xg-white);
    letter-spacing: 0
}

.duel-athlete-record b:not(:first-child) {
    margin-left: 6px
}

.duel-athlete-run {
    background: var(--xg-blue);
    color: var(--xg-blue-ink);
    font: 700 16px/1 var(--xg-num);
    letter-spacing: .16em;
    margin: 0;
    padding: 10px 16px 9px
}

.duel-athlete-target {
    background: var(--xg-navy);
    font: 700 22px/1 var(--xg-num);
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    margin: 0;
    padding: 12px 16px 11px
}

.duel-clock {
    background: var(--xg-panel);
    border-top: 2px solid var(--xg-blue);
    white-space: nowrap;
    align-items: baseline;
    gap: 12px;
    padding: 10px 20px 13px;
    animation: .3s both duel-drop;
    display: flex;
    position: absolute;
    top: 30px;
    left: 50%;
    overflow: hidden;
    translate: -50%
}

.duel-clock span {
    color: #f7f6efcc;
    font-size: 15px
}

.duel-hud .duel-clock b {
    min-width: .75em;
    font: 700 36px/1 var(--xg-num);
    text-align: center;
    font-variant-numeric: tabular-nums
}

.duel-clock i {
    background: var(--xg-blue);
    height: 3px;
    transition: width .12s linear;
    position: absolute;
    bottom: 0;
    left: 0
}

.duel-hud .duel-clock.is-go b {
    color: var(--xg-blue)
}

.duel-clock.is-go {
    animation: .2s both duel-drop,.3s .6s both duel-fade-out
}

.duel-clock.is-watching {
    top: 84px
}

.duel-hud .duel-clock.is-low b {
    color: var(--xg-blue)
}

.duel-clock.is-time {
    background: #0a0a0aa6;
    border-top-width: 1px;
    gap: 8px;
    padding: 5px 12px 7px
}

.duel-clock.is-time span {
    font-size: 13px
}

.duel-hud .duel-clock.is-time b {
    font-size: 24px
}

.duel-clock.is-time i {
    height: 2px
}

.duel-trouble {
    --trouble: var(--xg-blue);
    background: var(--xg-panel);
    border-top: 3px solid var(--trouble);
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 9px 12px;
    width: max-content;
    min-width: min(340px,100vw - 32px);
    max-width: calc(100vw - 32px);
    padding: 13px 18px 16px;
    animation: .25s both duel-drop;
    display: grid;
    position: absolute;
    top: 30px;
    left: 50%;
    overflow: hidden;
    translate: -50%;
    box-shadow: 0 12px 32px #0007
}

.duel-trouble.is-mine {
    --trouble: #ff5a5f
}

.duel-trouble.is-watching {
    top: 84px
}

.duel-trouble-who {
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--trouble);
    max-width: 14ch;
    color: var(--xg-ink);
    font: 700 15px/1 var(--xg-num);
    letter-spacing: .12em;
    justify-self: start;
    padding: 5px 8px 4px;
    overflow: hidden
}

.duel-hud .duel-trouble-what {
    white-space: nowrap;
    font-size: 23px;
    line-height: 1
}

.duel-hud .duel-trouble-left {
    font: 700 34px/1 var(--xg-num);
    font-variant-numeric: tabular-nums;
    color: var(--trouble);
    justify-self: start
}

.duel-trouble-then {
    font: 700 15px/1.25 var(--xg-num);
    letter-spacing: .08em
}

.duel-trouble i {
    background: var(--trouble);
    height: 3px;
    transition: width .12s linear;
    position: absolute;
    bottom: 0;
    left: 0
}

.menu-duel-pause {
    color: #f7f6ef;
    background: #ff5a5f24;
    border-left: 4px solid #ff5a5f;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 3px 14px;
    margin: 12px 0 0;
    padding: 12px 14px 13px;
    display: grid
}

.menu-duel-pause b {
    color: #ff5a5f;
    font-variant-numeric: tabular-nums;
    grid-row: 1/3;
    font: 700 34px/1 Barlow Condensed,DM Sans,sans-serif
}

.menu-duel-pause span {
    font: 400 19px/1.05 "Knewave",var(--display);
    text-transform: uppercase
}

.menu-duel-pause small {
    letter-spacing: .08em;
    font: 700 13px/1.2 Barlow Condensed,DM Sans,sans-serif
}

@media (min-width: 761px) and (max-width:1100px) {
    .duel-hud .duel-clock.is-time,.duel-hud .duel-trouble {
        left:403px;
        translate: none
    }

    .duel-hud .duel-trouble {
        max-width: calc(100vw - 419px)
    }
}

.duel-forfeit p {
    font: 400 20px/1.25 "Knewave",var(--display);
    letter-spacing: .02em;
    color: #f7f6ef;
    margin: -4px 0 22px
}

.duel-watch {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    background: #0a1218cc;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 16px;
    font-size: 16px;
    display: flex;
    position: absolute;
    top: 30px;
    left: 50%;
    translate: -50%
}

.duel-watch b {
    font-size: 18px
}

.duel-watch-camera {
    color: #f7f6efcc;
    border-left: 1px solid #ffffff2a;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding-left: 12px;
    font-size: 14px;
    display: inline-flex
}

.duel-watch-camera kbd,.duel-invite kbd {
    font: 400 12px/1 "Knewave",var(--display);
    color: #101418;
    background: #f7f6ef;
    border-radius: 5px;
    padding: 3px 6px
}

.duel-hud .duel-watch-score {
    font-family: "Knewave",var(--display);
    top: 72px;
    right: 47px
}

.duel-hud .duel-watch-score span {
    color: #f7f6efcc;
    font-size: 16px
}

.duel-hud .duel-watch-score strong {
    font-size: 46px;
    font-weight: 400
}

.duel-hud .duel-watch-score em,.duel-to-beat {
    color: #f7f6efcc;
    font-size: 18px;
    font-style: normal
}

.duel-hud .duel-watch-score em.is-ahead,.duel-to-beat.is-ahead {
    color: #f3c24d
}

.duel-to-beat {
    text-shadow: 0 2px 10px #214b5d66;
    margin: 0;
    position: absolute;
    top: 136px;
    right: 47px
}

.duel-hud .duel-watch-trick {
    text-align: left;
    width: min(560px,42vw);
    top: max(33%,272px);
    left: 47px;
    right: auto;
    transform: none
}

.duel-hud .duel-watch-trick .trick-readout strong {
    font-size: clamp(40px,4.4vw,66px)
}

.duel-posted {
    flex-direction: column;
    align-items: stretch;
    min-width: 320px;
    max-width: calc(100vw - 32px);
    animation: .4s cubic-bezier(.2,.9,.25,1.2) both duel-stamp;
    display: flex;
    position: absolute;
    top: 40%;
    left: 50%;
    translate: -50% -50%
}

.duel-posted-who {
    background: var(--xg-white);
    color: var(--xg-ink);
    text-align: center;
    margin: 0;
    padding: 10px 18px 9px;
    font-size: 20px
}

.duel-hud .duel-posted strong {
    background: var(--xg-blue);
    color: var(--xg-blue-ink);
    text-align: center;
    font: 700 clamp(64px,8vw,104px)/1 var(--xg-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 12px 26px 8px;
    display: block
}

.duel-hud .duel-posted.is-none strong {
    background: var(--xg-panel);
    color: var(--xg-mute)
}

.duel-posted-lead {
    background: var(--xg-navy);
    text-align: center;
    font: 700 20px/1 var(--xg-num);
    letter-spacing: .08em;
    margin: 0;
    padding: 11px 18px 10px
}

.duel-save {
    background: var(--xg-ink,#050505);
    color: var(--xg-white,#f4f4f4);
    font: 700 14px/1 var(--xg-num,"Barlow Condensed",sans-serif);
    letter-spacing: .14em;
    cursor: pointer;
    pointer-events: auto;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 8px;
    display: inline-flex
}

.duel-save:hover:not(:disabled) {
    background: #17242c
}

.duel-save.is-saved {
    color: var(--xg-blue,#6ec6ea);
    cursor: default
}

.duel-posted .duel-save {
    border-top: 1px solid var(--xg-line,#ffffff1c)
}

.duel-result-saves {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    animation: .4s .4s both duel-rise;
    display: flex
}

.duel-result-saves .duel-save {
    background: 0 0;
    box-shadow: inset 0 0 0 1px #ffffff47
}

.duel-result-saves .duel-save.is-watch {
    background: var(--xg-blue,#6ec6ea);
    color: var(--xg-blue-ink,#03161f);
    box-shadow: none
}

.duel-result-saves .duel-save.is-watch:hover {
    background: #8ad3f0
}

.duel-waiting {
    text-align: center;
    background: #0a1218e0;
    border-radius: 18px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 40px;
    display: flex;
    position: absolute;
    bottom: 64px;
    left: 47px
}

.duel-waiting p {
    font: 400 16px/1 "Knewave",var(--display);
    color: #f7f6efcc;
    margin: 0
}

.duel-waiting h2 {
    margin: 0;
    font-size: clamp(28px,3.4vw,44px);
    line-height: 1.05;
    rotate: -2deg
}

.duel-waiting .text-button {
    color: #f7f6efcc
}

.duel-dots {
    gap: 6px;
    display: inline-flex
}

.duel-dots i {
    background: #f7f6ef;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: 1.2s ease-in-out infinite duel-dot
}

.duel-dots i:nth-child(2) {
    animation-delay: .15s
}

.duel-dots i:nth-child(3) {
    animation-delay: .3s
}

.duel-result {
    z-index: 12;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    color: var(--xg-white,#f4f4f4);
    --xg-ink: #050505;
    --xg-panel: #0a0a0af2;
    --xg-line: #ffffff1c;
    --xg-white: #f4f4f4;
    --xg-blue: #6ec6ea;
    --xg-blue-ink: #03161f;
    --xg-navy: #172f73;
    --xg-mute: #9aa6ab;
    --xg-num: "Barlow Condensed","DM Sans",sans-serif;
    background: #050505b8;
    border: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px;
    animation: .35s both duel-fade;
    display: flex;
    position: absolute;
    inset: 0
}

.duel-result-board {
    background: var(--xg-panel);
    width: min(760px,100%);
    animation: .45s .1s both duel-rise
}

.duel-result-board header {
    background: var(--xg-white);
    color: var(--xg-ink);
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 9px;
    display: flex
}

.duel-result-board header b {
    font: 400 20px/1 "Knewave",var(--display);
    letter-spacing: .02em
}

.duel-result-board header span {
    font: 700 15px/1 var(--xg-num);
    letter-spacing: .16em
}

.duel-result-hero {
    border-top: 2px solid var(--xg-blue);
    align-items: stretch;
    display: flex
}

.duel-result-photo {
    aspect-ratio: 640/520;
    background: radial-gradient(120% 90% at 50% 18%,#2a5f78 0%,#10283a 48%,#050505 100%);
    border-radius: 0;
    flex: none;
    width: clamp(150px,30%,220px)
}

.duel-result.is-loss .duel-result-photo {
    filter: none
}

.duel-result-title {
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
    display: flex
}

.duel-result h1 {
    font: 400 clamp(52px,7.5vw,96px)/1 "Knewave",var(--display);
    letter-spacing: .01em;
    white-space: nowrap;
    margin: 0;
    padding: 16px 18px 12px
}

.duel-result.is-loss h1 {
    color: #c9d2d6
}

.duel-result-line {
    background: var(--xg-navy);
    font: 700 20px/1 var(--xg-num);
    letter-spacing: .1em;
    margin: 0;
    padding: 12px 18px 11px
}

.duel-result.is-win .duel-result-line {
    background: var(--xg-blue);
    color: var(--xg-blue-ink)
}

.duel-result-table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    width: 100%
}

.duel-result-table th {
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .14em;
    color: var(--xg-mute);
    text-align: right;
    padding: 9px 10px 6px
}

.duel-result-table th:last-child {
    padding-right: 14px
}

.duel-result-table td {
    border-top: 1px solid var(--xg-line);
    height: 42px;
    font: 700 18px/1 var(--xg-num);
    color: var(--xg-mute);
    text-align: right;
    white-space: nowrap;
    padding: 0 10px
}

.duel-result-table td.is-best {
    color: var(--xg-white)
}

.duel-result-table .duel-result-place {
    text-align: left;
    width: 34px;
    padding-left: 16px;
    font-size: 20px
}

.duel-result-table .duel-result-who {
    text-align: left;
    width: 100%;
    color: var(--xg-white);
    font: 400 20px/1 "Knewave",var(--display);
    letter-spacing: .02em
}

.duel-result-who small {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .12em;
    background: var(--xg-blue);
    color: var(--xg-blue-ink);
    vertical-align: 3px;
    margin-left: 8px;
    padding: 2px 5px 1px
}

.duel-result-table .duel-result-best {
    background: var(--xg-blue);
    min-width: 110px;
    color: var(--xg-blue-ink);
    padding-right: 14px;
    font-size: 24px
}

.duel-result-table tr+tr .duel-result-best {
    box-shadow: inset 0 1px #03161f26
}

.duel-result-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    animation: .4s .5s both duel-rise;
    display: flex
}

.duel-result-continue,.duel-result-rematch {
    background: var(--xg-white);
    color: var(--xg-ink);
    font: 700 18px/1 var(--xg-num);
    letter-spacing: .16em;
    cursor: pointer;
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 13px 18px 12px 20px;
    display: inline-flex
}

.duel-result-rematch {
    background: var(--xg-blue);
    color: var(--xg-blue-ink)
}

.duel-result-rematch:disabled {
    cursor: default;
    background: #6ec6ea66
}

.duel-result-votes {
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .06em;
    background: var(--xg-blue-ink);
    color: var(--xg-blue);
    padding: 3px 6px 2px
}

.duel-result-asked {
    background: var(--xg-panel);
    font: 700 16px/1 var(--xg-num);
    letter-spacing: .14em;
    color: var(--xg-white);
    margin: 0;
    padding: 8px 14px 7px;
    animation: .3s both duel-rise
}

.duel-result-asked.is-asked {
    background: var(--xg-blue);
    color: var(--xg-blue-ink)
}

.duel-result-continue:hover {
    background: #fff
}

.duel-result-rematch:hover:not(:disabled) {
    background: #8fd6f2
}

.duel-result-continue kbd,.duel-result-rematch kbd {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .1em;
    background: var(--xg-ink);
    color: var(--xg-white);
    padding: 3px 6px 2px
}

.duel-tick {
    --tick-up: #6ec6ea;
    --tick-up-ink: #03161f;
    --tick-down: #ff5a5f;
    --tick-down-ink: #1c0405;
    --tick-num: "Barlow Condensed","DM Sans",sans-serif;
    font: 700 17px/1 var(--tick-num);
    letter-spacing: .06em;
    color: #9aa6ab;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0 18px 12px;
    animation: .35s both duel-stamp;
    display: flex
}

.duel-tick-move {
    letter-spacing: .1em;
    align-items: center;
    gap: 3px;
    padding: 5px 9px 4px 6px;
    display: inline-flex
}

.duel-tick.is-win .duel-tick-move {
    background: var(--tick-up);
    color: var(--tick-up-ink)
}

.duel-tick.is-loss .duel-tick-move {
    background: var(--tick-down);
    color: var(--tick-down-ink)
}

.duel-tick.is-draw .duel-tick-move {
    color: #050505;
    background: #f4f4f4
}

.duel-tick-record {
    gap: 10px;
    display: inline-flex
}

.duel-tally b {
    font: 700 24px/1 var(--tick-num);
    letter-spacing: 0;
    color: #f4f4f4;
    margin-right: 2px;
    display: inline-block;
    position: relative
}

.duel-tally b.is-moved {
    vertical-align: bottom;
    overflow: hidden
}

.duel-tick.is-win .duel-tally b.is-moved {
    color: var(--tick-up)
}

.duel-tick.is-loss .duel-tally b.is-moved {
    color: var(--tick-down)
}

.duel-tally b.is-moved>span {
    animation: .4s .55s both duel-tick-in;
    display: inline-block
}

.duel-tally b.is-moved>i {
    text-align: center;
    color: #f4f4f4;
    font-style: normal;
    animation: .4s .4s both duel-tick-out;
    position: absolute;
    inset: 0
}

.duel-tick.is-compact {
    gap: 10px;
    padding: 0;
    font-size: 15px
}

.duel-rank-tick {
    --up: #6ec6ea;
    --down: #ff5a5f;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0;
    padding: 8px 18px 12px;
    animation: .35s both duel-rise;
    display: flex
}

.duel-rank-tick .rank-chip {
    gap: 9px;
    font-size: 16px
}

.duel-rank-tick .rank-emblem {
    width: 44px;
    height: 44px
}

.duel-rank-total {
    display: inline-block;
    position: relative
}

.duel-rank-total b {
    font: 700 32px/1 var(--xg-num);
    letter-spacing: 0;
    color: #f4f4f4;
    font-variant-numeric: tabular-nums;
    display: block
}

.duel-rank-total i {
    font: 700 17px/1 var(--xg-num);
    letter-spacing: .04em;
    white-space: nowrap;
    color: #f4f4f4;
    font-style: normal;
    animation: 1.7s ease-out .35s both duel-points-off;
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50%
}

.duel-rank-tick.is-win .duel-rank-total i {
    color: var(--up)
}

.duel-rank-tick.is-loss .duel-rank-total i {
    color: var(--down)
}

.duel-rank-tick.is-compact {
    gap: 8px;
    padding: 10px 0 0
}

.duel-rank-tick.is-compact .duel-rank-total b {
    font-size: 24px
}

.duel-rank-tick.is-compact .duel-rank-total i {
    font-size: 14px
}

@keyframes duel-points-off {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    22% {
        opacity: 1;
        transform: none
    }

    to {
        opacity: .8;
        transform: translateY(-3px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .duel-rank-tick,.duel-rank-tick * {
        animation: none!important
    }
}

.duel-safe {
    font: 700 16px/1.15 var(--xg-num);
    letter-spacing: .1em;
    color: #f4f4f4;
    text-transform: uppercase;
    align-items: center;
    gap: 7px;
    margin: 0;
    display: flex
}

.duel-safe svg {
    color: #6ec6ea;
    flex: none
}

.duel-safe.duel-result-safe {
    padding: 0 18px 12px;
    animation: .35s both duel-stamp
}

.duel-safe.is-compact {
    padding: 0;
    font-size: 14px
}

.duel-vs .duel-safe.duel-vs-safe {
    color: #f7f6ef;
    background: #101418d9;
    border-radius: 8px;
    padding: 8px 14px 7px;
    font-size: 19px;
    animation: .5s 1s both duel-rise;
    box-shadow: inset 0 0 0 1.5px #6ec6ea66
}

.duel-vs .duel-safe.duel-vs-safe svg {
    width: 19px;
    height: 19px
}

.duel-end .duel-sticker.is-next {
    white-space: nowrap;
    font-size: 19px
}

.duel-rank-moved {
    color: #101418;
    font: italic 800 14px/1 var(--display);
    letter-spacing: .6px;
    background: #c6ff3d;
    padding: 4px 8px 3px;
    animation: .45s cubic-bezier(.2,.9,.25,1.4) .7s both duel-stamp;
    rotate: -3deg;
    box-shadow: 0 0 0 2px #101418
}

.duel-rank-tick.is-loss .duel-rank-moved {
    background: #ff5a5f
}

.duel-tick.is-compact .duel-tally b {
    font-size: 20px
}

@keyframes duel-tick-out {
    to {
        opacity: 0;
        transform: translateY(-100%)
    }
}

@keyframes duel-tick-in {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .duel-tick,.duel-tick * {
        animation: none!important
    }

    .duel-tally b.is-moved>i {
        display: none
    }
}

.duel-end {
    z-index: 3;
    color: #f7f6ef;
    background: linear-gradient(140deg,#1b304bef,#0e1b2df7);
    border: 1px solid #b3c2de55;
    border-radius: 17px;
    flex-direction: column;
    gap: 10px;
    width: 320px;
    padding: 18px 20px;
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 30px;
    box-shadow: 0 15px 60px #14264b55
}

.duel-end.is-win {
    border-color: #f3c24d88
}

.duel-end-head {
    transform-origin: 0 70%;
    margin: 0;
    font-size: 26px;
    rotate: -2deg
}

.duel-end.is-win .duel-end-head {
    color: #f3c24d
}

.duel-end-score {
    gap: 6px;
    margin: 0;
    display: grid
}

.duel-end-score div {
    justify-content: space-between;
    gap: 12px;
    font-size: 18px;
    display: flex
}

.duel-end-score dt {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.duel-end-score dd {
    margin: 0
}

.duel-end-status {
    color: #f7f6efcc;
    margin: 0;
    font-size: 15px
}

.duel-end-status.is-asked {
    color: #f3c24d
}

.duel-end-actions {
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    display: flex
}

.duel-end .duel-sticker {
    flex: 1
}

.duel-end-lobby {
    color: #f7f6efcc;
    white-space: nowrap
}

.duel-invite {
    z-index: 9;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #f7f6ef;
    pointer-events: auto;
    white-space: nowrap;
    background: #0a1218e6;
    border-radius: 16px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 16px;
    animation: .35s cubic-bezier(.2,.9,.25,1.25) both duel-drop;
    display: flex;
    position: absolute;
    top: 26px;
    left: 50%;
    translate: -50%;
    box-shadow: 0 12px 40px #0007
}

.duel-invite>b,.duel-invite-badge {
    color: #101418;
    background: #f7f6ef;
    border-radius: 7px;
    padding: 4px 9px 3px;
    font-size: 16px;
    rotate: -3deg
}

.duel-invite.is-incoming {
    gap: 14px;
    padding: 12px 14px 12px 16px
}

.duel-invite-text {
    flex-direction: column;
    gap: 3px;
    display: flex
}

.duel-invite-text strong {
    font-size: 26px;
    line-height: 1
}

.duel-invite-text span {
    color: #f7f6efcc;
    font-size: 14px
}

.duel-invite-no {
    color: #f7f6ef;
    background: #ffffff1a;
    border: 0;
    border-radius: 10px;
    place-items: center;
    width: 34px;
    height: 34px;
    display: grid
}

.duel-invite-no:hover {
    background: #ffffff2e
}

.duel-invite-clock {
    text-align: center;
    color: #f7f6ef99;
    min-width: 26px;
    font-size: 18px
}

.duel-invite.is-note span {
    color: #f3c24d
}

@keyframes duel-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes duel-fade-out {
    to {
        opacity: 0
    }
}

@keyframes duel-rise {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes duel-in-left {
    0% {
        opacity: 0;
        transform: translate(-70px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes duel-in-right {
    0% {
        opacity: 0;
        transform: translate(70px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes duel-stamp {
    0% {
        opacity: 0;
        transform: scale(1.6)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes duel-drop {
    0% {
        opacity: 0;
        transform: translateY(-24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes duel-dot {
    0%,80%,to {
        opacity: .25;
        transform: scale(.8)
    }

    40% {
        opacity: 1;
        transform: none
    }
}

.duel-eyes {
    z-index: 6;
    pointer-events: none;
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    display: flex;
    position: absolute;
    top: 172px;
    left: 47px
}

.duel-eyes-count {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font: 700 18px/1 var(--xg-num);
    background: #0a1218cc;
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    padding: 8px 13px 8px 11px;
    display: flex
}

.duel-eyes-arrived {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font: 700 14px/1 var(--xg-num);
    letter-spacing: .08em;
    white-space: nowrap;
    background: #0a1218cc;
    border-radius: 999px;
    padding: 8px 13px;
    animation: .35s both duel-rise
}

@media (max-height: 500px) {
    .game-shell .duel-result {
        justify-content:flex-start;
        gap: 8px;
        padding: 8px 16px;
        overflow-y: auto
    }

    .game-shell .duel-result-board header {
        padding: 6px 14px 5px
    }

    .game-shell .duel-result-hero {
        flex-direction: row
    }

    .game-shell .duel-result-photo {
        aspect-ratio: 640/520;
        width: clamp(110px,18%,150px);
        height: auto
    }

    .game-shell .duel-result h1 {
        padding: 8px 14px 4px;
        font-size: 40px
    }

    .game-shell .duel-result-line {
        padding: 7px 14px 6px;
        font-size: 14px
    }

    .game-shell .duel-result-table th {
        padding: 5px 10px 3px
    }

    .game-shell .duel-result-table td {
        height: 32px
    }

    .game-shell .duel-result-saves {
        gap: 6px
    }

    .game-shell .duel-result-saves .duel-save {
        padding: 7px 10px 6px;
        font-size: 12px
    }

    .game-shell :is(.duel-result-continue,.duel-result-rematch) {
        padding: 9px 14px 8px;
        font-size: 15px
    }
}

@media (prefers-reduced-motion:reduce) {
    .duel-hud *,.duel-result,.duel-result *,.duel-invite {
        animation: none!important
    }
}

@media (max-width: 760px) {
    .duel-result-hero {
        flex-direction:column
    }

    .duel-result-photo {
        aspect-ratio: auto;
        width: 100%;
        height: min(30vh,200px)
    }

    .duel-result h1 {
        padding: 12px 14px 9px;
        font-size: clamp(40px,12vw,64px)
    }

    .duel-result-line {
        padding: 10px 14px 9px;
        font-size: 16px
    }

    .duel-result-table th {
        padding: 7px 6px 5px;
        font-size: 12px
    }

    .duel-result-table td {
        height: 38px;
        padding: 0 6px;
        font-size: 15px
    }

    .duel-result-table .duel-result-place {
        width: 22px;
        padding-left: 10px;
        font-size: 16px
    }

    .duel-result-table .duel-result-who {
        font-size: 16px
    }

    .duel-result-table .duel-result-best {
        min-width: 76px;
        padding-right: 10px;
        font-size: 19px
    }

    .duel-bug {
        width: min(300px,100% - 24px);
        top: 12px;
        left: 12px
    }

    .duel-eyes {
        top: 199px;
        left: 12px
    }

    .duel-eyes-count {
        padding: 6px 10px 6px 9px;
        font-size: 15px
    }

    .duel-eyes-arrived {
        padding: 6px 10px;
        font-size: 12px
    }

    .duel-bug-tile {
        width: 64px
    }

    .duel-hud .duel-bug-tile b {
        font-size: 21px
    }

    .duel-bug-board li {
        height: 32px
    }

    .duel-bug-who {
        font-size: 16px
    }

    .duel-bug-best {
        min-width: 84px;
        font-size: 21px
    }

    .duel-athlete {
        width: auto;
        inset: 90px 12px auto
    }

    .duel-athlete .duel-photo {
        width: 88px
    }

    .duel-athlete h2 {
        padding: 10px 12px 5px;
        font-size: 26px
    }

    .duel-athlete-meta {
        gap: 4px 10px;
        padding: 0 12px 8px
    }

    .duel-athlete .rank-chip.duel-athlete-rank {
        gap: 5px;
        font-size: 12px
    }

    .duel-athlete-rank .rank-emblem {
        width: 28px;
        height: 28px
    }

    .duel-athlete-run {
        padding: 8px 12px 7px;
        font-size: 14px
    }

    .duel-athlete-target {
        padding: 9px 12px 8px;
        font-size: 18px
    }

    .duel-watch,.duel-clock {
        font-size: 14px;
        top: auto;
        bottom: 96px
    }

    .duel-clock.is-watching {
        top: auto;
        bottom: 150px
    }

    .duel-hud .duel-clock.is-time {
        top: 157px;
        bottom: auto;
        left: 12px;
        translate: none
    }

    .duel-hud .duel-trouble {
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 11px 14px 14px;
        inset: 157px 12px auto;
        translate: none
    }

    .duel-hud .duel-trouble-what {
        white-space: normal;
        font-size: 19px
    }

    .duel-hud .duel-trouble-left {
        font-size: 28px
    }

    .duel-trouble-then {
        font-size: 14px
    }

    .duel-hud:has(.duel-trouble) .duel-watch-score {
        top: 264px
    }

    .duel-hud .duel-watch-score {
        top: 232px;
        right: 16px
    }

    .duel-hud .duel-watch-score strong {
        font-size: 32px
    }

    .duel-to-beat {
        font-size: 15px;
        top: 118px;
        right: 16px
    }

    .duel-hud .duel-watch-trick {
        width: calc(100% - 24px);
        top: 44%;
        left: 12px
    }

    .duel-vs-row {
        gap: 6px;
        width: calc(100% - 24px)
    }

    .duel-vs-mark {
        font-size: 40px
    }

    .duel-vs-sticker {
        width: 100%;
        max-width: 220px;
        height: auto
    }

    .duel-vs-card h2 {
        max-width: 34vw;
        font-size: 24px
    }

    .duel-vs-card .rank-chip.duel-vs-rank {
        letter-spacing: .4px;
        gap: 5px;
        padding-top: 8px;
        font-size: 14px
    }

    .duel-vs-rank .rank-emblem {
        width: 40px;
        height: 40px
    }

    .duel-vs-rank .rank-chip-rating {
        font-size: 14px
    }

    .duel-vs-record {
        font-size: 12px
    }

    .duel-hud .duel-vs-record b {
        font-size: 16px
    }

    .duel-end {
        width: auto;
        inset: 84px 12px auto
    }

    .duel-invite {
        max-width: calc(100% - 24px);
        top: auto;
        bottom: 20px
    }

    .game-shell.is-playing:not(.is-touch) .duel-invite {
        bottom: 84px
    }

    .duel-invite-text strong {
        font-size: 20px
    }

    .game-shell.is-duel .live-chat {
        top: auto
    }

    .game-shell.is-duel:not(.is-touch) .live-chat {
        top: 270px;
        bottom: auto
    }

    .game-shell.is-duel:not(.is-touch) .live-chat .chat-open {
        order: -1
    }

    .game-shell.is-duel:not(.is-touch) .live-chat .chat-log {
        max-height: 3.4em
    }

    .game-shell:is(.is-duel-present,.is-duel-count) .live-chat {
        display: none
    }
}

@media (max-width: 380px) {
    .duel-vs-card .rank-chip.duel-vs-rank {
        flex-direction:column;
        gap: 4px;
        font-size: 13px
    }

    .duel-vs-rank .rank-chip-copy {
        align-items: center;
        gap: 2px
    }
}

@media (max-height: 500px) {
    .duel-vs {
        gap:8px;
        padding: 10px 12px;
        overflow-y: auto
    }

    .duel-vs-head {
        font-size: 17px
    }

    .duel-vs-format {
        font-size: 18px
    }

    .duel-vs-card {
        gap: 6px
    }

    .duel-vs-sticker {
        width: auto;
        height: clamp(84px,32vh,138px)
    }

    .duel-vs-card h2 {
        font-size: 28px
    }

    .duel-vs-mark {
        font-size: 64px
    }

    .duel-vs-card .rank-chip.duel-vs-rank {
        gap: 7px;
        padding-top: 6px;
        font-size: 15px
    }

    .duel-vs-rank .rank-emblem {
        width: 40px;
        height: 40px
    }

    .duel-vs-rank .rank-chip-rating {
        font-size: 14px
    }

    .duel-vs .duel-safe.duel-vs-safe {
        padding: 5px 8px;
        font-size: 14px
    }
}

.live-duel {
    color: #f7f6ef;
    font: 400 12px/1 "Knewave",var(--display);
    letter-spacing: .03em;
    text-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    background: #0a121873;
    border: 1px solid #f7f6ef99;
    border-radius: 6px;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 3px 7px 2px;
    display: inline-flex
}

.live-duel:hover {
    color: #101418;
    background: #f7f6ef
}

.live-duel.is-anyone {
    color: #101418;
    background: #f7f6ef;
    border-color: #f7f6ef;
    padding: 4px 8px 3px;
    rotate: -2deg
}

.live-duel kbd,.results-1v1 kbd {
    color: #f7f6ef;
    font: 400 11px/1 "Knewave",var(--display);
    background: #101418;
    border-radius: 4px;
    padding: 1px 4px
}

.game-shell .results-1v1 {
    border-radius: var(--radius,6px);
    color: #f7f6ef;
    font: 400 24px/1 "Knewave",var(--display);
    letter-spacing: .03em;
    cursor: pointer;
    background: #0a121880;
    border: 2px solid #f7f6ef;
    align-self: stretch;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
    padding: 0 20px;
    display: inline-flex
}

.game-shell .results-1v1:hover {
    color: #101418;
    background: #f7f6ef
}

.game-shell .results-1v1 kbd {
    padding: 3px 6px;
    font-size: 13px
}

.duel-result-maps {
    border: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
    animation: .4s .5s both duel-rise;
    display: flex
}

.duel-result-maps button {
    color: #fff;
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .14em;
    cursor: pointer;
    background: #ffffff1f;
    border: 0;
    padding: 8px 12px 7px;
    transition: background .15s
}

.duel-result-maps button:hover {
    background: #fff3
}

.duel-result-maps button[aria-pressed=true] {
    background: var(--xg-white);
    color: var(--xg-ink)
}

.team-bug {
    width: 392px
}

.team-bug .duel-bug-board li {
    height: auto;
    min-height: 58px
}

.team-bug-riders {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 7px 0;
    display: flex
}

.team-bug-rider {
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    display: flex
}

.duel-hud .team-bug-rider b {
    text-overflow: ellipsis;
    min-width: 0;
    font: 400 16px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    overflow: hidden
}

.team-bug-rider.is-on b:before {
    content: "";
    background: var(--xg-blue);
    vertical-align: 2px;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    display: inline-block
}

.team-bug-rider small,.team-result-who small {
    font: 700 11px/1 var(--xg-num,"Barlow Condensed",sans-serif);
    letter-spacing: .12em;
    background: var(--xg-blue,#6ec6ea);
    color: var(--xg-blue-ink,#03161f);
    flex: none;
    padding: 2px 5px 1px
}

.team-bug-rider em {
    font: 700 15px/1 var(--xg-num);
    color: var(--xg-mute);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    padding: 0 10px 0 6px;
    font-style: normal
}

.team-hud .duel-vs-row {
    width: min(1120px,100% - 32px)
}

.team-vs-riders {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: clamp(8px,1.6vw,24px);
    width: 100%;
    display: grid
}

.team-vs-rider {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    display: flex;
    container-type: inline-size
}

.duel-hud .team-vs-sticker {
    height: clamp(150px,30vh,300px)
}

.team-vs-rider+.team-vs-rider .team-vs-sticker {
    rotate: 3deg
}

.duel-hud .team-vs-rider h2 {
    font-size: clamp(14px,calc(100cqi / var(--chars,8) * 1.4),var(--name-max,30px));
    line-height: var(--name-max,30px);
    max-width: 100%
}

@media (max-width: 1100px) {
    .team-vs-rider .rank-chip.duel-vs-rank {
        flex-direction:column;
        gap: 4px
    }

    .team-vs-rider .rank-chip.is-card .rank-chip-copy {
        align-items: center
    }

    .team-vs-rider .duel-vs-rank .rank-emblem {
        width: 42px;
        height: 42px
    }
}

.team-waiting .duel-vs-card,.team-waiting .duel-vs-head,.team-waiting .duel-vs-format {
    animation: none
}

.duel-vs-mark.is-waiting {
    opacity: .3;
    animation: none
}

.team-vs-shape img {
    opacity: .18;
    filter: brightness(0)invert()blur(.5px);
    transition: opacity .4s
}

.team-vs-rider.is-here .team-vs-shape img {
    opacity: .6
}

.team-vs-rider.is-coming h2 {
    opacity: .45
}

.team-wait-state {
    font: 700 13px/1 var(--xg-num,"Barlow Condensed",sans-serif);
    letter-spacing: .14em;
    color: #f7f6ef99;
    align-items: center;
    gap: 7px;
    display: inline-flex
}

.team-vs-rider.is-here .team-wait-state {
    color: #f7f6ef
}

.team-waiting .text-button {
    color: #f7f6efcc
}

.team-result-photos {
    flex: none;
    width: clamp(220px,40%,320px);
    display: flex
}

.team-result .team-result-photos .duel-result-photo {
    flex: 1;
    width: auto;
    min-width: 0
}

.team-result-table td {
    height: 66px
}

.team-result-who span,.team-result-runs span {
    display: block
}

.team-result-who span+span,.team-result-runs span+span {
    margin-top: 6px
}

.team-result-who small {
    vertical-align: 3px;
    margin-left: 8px
}

.team-result-runs {
    color: var(--xg-mute)
}

.game-shell:has(.team-hud) .duel-eyes {
    top: 224px
}

.game-shell:has(.team-hud) .live-chat {
    top: 272px
}

@media (max-width: 760px) {
    .team-bug {
        width:min(340px,100% - 24px)
    }

    .team-hud .duel-clock.is-time,.team-hud .duel-clock.is-away {
        top: 64px;
        left: 364px
    }

    .team-hud .duel-athlete {
        top: 142px
    }

    .team-hud .duel-posted {
        top: 200px;
        translate: -50%
    }

    .game-shell:has(.team-hud) .live-chat {
        top: auto
    }

    .game-shell:not(.is-touch):has(.team-hud) .live-chat {
        top: 200px;
        bottom: auto
    }

    .team-hud .duel-vs-format {
        text-align: center;
        font-size: 17px
    }

    .duel-hud .team-bug-rider b {
        font-size: 14px
    }

    .duel-hud .team-vs-sticker {
        width: auto;
        height: clamp(96px,17vh,150px)
    }

    .team-vs-rider {
        --name-max: 22px;
        gap: 6px
    }

    .team-vs-rider .duel-vs-rank .rank-emblem {
        width: 34px;
        height: 34px
    }

    .team-vs-rider .rank-chip.duel-vs-rank {
        padding-top: 6px;
        font-size: 13px
    }

    @media (orientation: portrait) {
        .team-hud .duel-vs {
            justify-content:safe center;
            gap: 10px;
            padding-bottom: 76px;
            overflow-y: auto
        }

        .team-hud .duel-vs-row {
            grid-template-columns: minmax(0,1fr);
            justify-items: center;
            gap: 2px
        }

        .team-hud .duel-vs-card {
            width: 100%
        }

        .team-hud .duel-vs-mark {
            font-size: 44px
        }

        .duel-hud .team-vs-sticker {
            height: clamp(84px,14vh,130px)
        }

        .team-vs-rider .rank-chip.duel-vs-rank {
            flex-direction: row;
            gap: 8px
        }

        .team-vs-rider .rank-chip.is-card .rank-chip-copy {
            align-items: flex-start
        }
    }

    @media (orientation: portrait) and (max-height:720px) {
        .team-hud .duel-vs {
            gap:6px;
            padding-top: 44px;
            padding-bottom: 64px
        }

        .team-hud .duel-vs-head {
            font-size: 15px
        }

        .team-hud .duel-vs-format {
            font-size: 14px
        }

        .team-hud .duel-vs-mark {
            font-size: 36px
        }

        .team-hud .duel-vs-tag {
            padding: 3px 7px 2px;
            font-size: 12px
        }

        .duel-hud .team-vs-sticker {
            height: clamp(64px,11vh,90px)
        }

        .team-vs-rider {
            --name-max: 18px;
            gap: 3px
        }

        .team-vs-rider .rank-chip.duel-vs-rank {
            gap: 6px;
            padding-top: 4px;
            font-size: 12px
        }

        .team-vs-rider .rank-chip.is-card .rank-chip-copy {
            gap: 1px
        }

        .team-vs-rider .rank-chip.is-card .rank-chip-rating {
            font-size: 12px
        }

        .team-vs-rider .duel-vs-rank .rank-emblem {
            width: 26px;
            height: 26px
        }
    }

    .team-result-photos {
        width: 100%
    }

    .team-result .team-result-photos .duel-result-photo {
        height: min(26vh,170px)
    }

    .team-result-table td {
        height: 56px
    }
}

@media (max-height: 500px) {
    .team-hud .duel-vs {
        gap:6px
    }

    .team-hud .duel-vs-card {
        gap: 4px
    }

    .team-hud .duel-vs-mark {
        font-size: 52px
    }

    .duel-hud .team-vs-sticker {
        width: auto;
        height: clamp(60px,24vh,104px)
    }

    .team-vs-rider {
        --name-max: 20px;
        gap: 3px
    }

    .team-vs-rider .rank-chip.duel-vs-rank {
        flex-direction: row;
        gap: 6px;
        padding-top: 4px;
        font-size: 12px
    }

    .team-vs-rider .rank-chip.is-card .rank-chip-copy {
        align-items: flex-start;
        gap: 2px
    }

    .team-vs-rider .duel-vs-rank .rank-emblem {
        width: 28px;
        height: 28px
    }

    .team-vs-rider .rank-chip.is-card .rank-chip-rating {
        font-size: 12px
    }

    .team-vs-rider .duel-vs-record {
        font-size: 11px
    }

    .duel-hud .team-vs-rider .duel-vs-record b {
        font-size: 14px
    }

    .team-hud .duel-vs-tag {
        padding: 3px 7px 2px;
        font-size: 12px
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell.is-touch.is-duel .team-bug {
        left:var(--tc-left,16px);
        top: var(--tc-top,10px);
        transform-origin: 0 0;
        width: 392px;
        scale: .74
    }

    .game-shell.is-touch .team-bug .duel-bug-tile {
        width: 82px
    }

    .game-shell.is-touch .team-bug .duel-bug-tile b {
        font-size: 26px
    }

    .game-shell.is-touch .team-bug .duel-bug-best {
        min-width: 100px;
        font-size: 24px
    }

    .game-shell.is-touch .team-bug .team-bug-rider b {
        font-size: 16px
    }

    .game-shell.is-touch.is-duel .team-hud :is(.duel-clock,.duel-posted) {
        left: calc(var(--tc-left,16px) + 300px);
        right: auto;
        translate: none
    }

    .game-shell.is-touch.is-duel .team-hud .duel-clock {
        top: var(--tc-top,10px);
        transform-origin: 0 0;
        gap: 9px;
        padding: 8px 14px 10px;
        bottom: auto;
        scale: .8
    }

    .game-shell.is-touch .team-hud .duel-clock b {
        font-size: 30px
    }

    .game-shell.is-touch.is-duel .team-hud .duel-posted {
        transform-origin: 0;
        top: 40%;
        translate: 0 -50%;
        scale: .8
    }

    .game-shell.is-touch.is-duel .team-hud .duel-watch {
        top: auto;
        left: 50%;
        bottom: var(--tc-low,10px);
        translate: -50%
    }

    .game-shell.is-touch.is-duel .team-hud .duel-watch-score {
        top: calc(var(--tc-top,10px) + 46px);
        right: var(--tc-right,16px)
    }

    .game-shell.is-touch.is-duel:has(.team-hud) .live-chat {
        left: var(--tc-left,16px);
        top: calc(var(--tc-top,10px) + 150px);
        bottom: auto
    }

    .game-shell.is-touch.is-duel .team-hud .duel-athlete {
        top: auto;
        left: 50%;
        right: auto;
        bottom: var(--tc-low,10px);
        transform-origin: 50% 100%;
        width: 520px;
        translate: -50%;
        scale: .75
    }

    .game-shell.is-touch .team-hud .duel-athlete .duel-photo {
        width: 170px
    }

    .game-shell.is-touch .team-hud .duel-athlete h2 {
        padding: 14px 16px 12px;
        font-size: 40px
    }

    .game-shell.is-touch .team-hud .duel-athlete-run {
        padding: 10px 16px 9px;
        font-size: 16px
    }

    .game-shell.is-touch .team-hud .duel-athlete-target {
        padding: 12px 16px 11px;
        font-size: 22px
    }

    .game-shell.is-touch .team-result {
        justify-content: flex-start;
        gap: 10px;
        padding: 10px;
        overflow-y: auto
    }

    .game-shell.is-touch .team-result .duel-result-board header {
        padding: 7px 14px 6px
    }

    .game-shell.is-touch .team-result .duel-result-hero {
        flex-direction: row
    }

    .game-shell.is-touch .team-result .team-result-photos {
        width: clamp(150px,28%,220px)
    }

    .game-shell.is-touch .team-result .team-result-photos .duel-result-photo {
        aspect-ratio: 640/520;
        height: auto
    }

    .game-shell.is-touch .team-result h1 {
        padding: 10px 14px 6px;
        font-size: 46px
    }

    .game-shell.is-touch .team-result .duel-result-line {
        padding: 8px 14px 7px;
        font-size: 15px
    }

    .game-shell.is-touch .team-result-table th {
        padding: 6px 10px 4px
    }

    .game-shell.is-touch .team-result-table td {
        height: 48px
    }

    .game-shell.is-touch .team-result-who span+span,.game-shell.is-touch .team-result-runs span+span {
        margin-top: 3px
    }

    .game-shell.is-touch .team-result .duel-result-continue {
        padding: 10px 16px 9px
    }
}

.team-forgiven {
    font: 800 12px/1.3 var(--body);
    letter-spacing: .1em;
    color: #f7f6ef;
    opacity: .85;
    margin: 8px 0 0
}

.team-alone {
    z-index: 9;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #f7f6ef;
    text-align: center;
    pointer-events: auto;
    background: #0a1218eb;
    border-radius: 18px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(440px,100vw - 32px);
    padding: 20px 22px 18px;
    animation: .35s cubic-bezier(.2,.9,.25,1.25) both duel-drop;
    display: flex;
    position: absolute;
    top: 68%;
    left: 50%;
    translate: -50% -50%;
    box-shadow: 0 16px 48px #0008
}

.team-alone-who {
    font: 700 14px/1 var(--xg-num,"Barlow Condensed",sans-serif);
    letter-spacing: .16em;
    color: #ff5a5f;
    margin: 0
}

.duel-hud .team-alone h2 {
    font: 400 30px/1.05 "Knewave",var(--display);
    letter-spacing: .02em;
    margin: 2px 0 0
}

.team-alone-then {
    font: 700 13px/1.3 var(--xg-num,"Barlow Condensed",sans-serif);
    letter-spacing: .08em;
    opacity: .8;
    margin: 0 0 10px
}

.team-alone-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    display: flex
}

.duel-hud .team-alone-actions button {
    color: #f7f6ef;
    font: 700 15px/1 var(--xg-num,"Barlow Condensed",sans-serif);
    letter-spacing: .14em;
    cursor: pointer;
    background: #f7f6ef1f;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 11px;
    display: inline-flex
}

.duel-hud .team-alone-actions .team-alone-stay {
    color: #03161f;
    background: #f7f6ef
}

.team-alone.is-out .team-alone-who {
    color: #f7f6ef99
}

.team-bug-rider.is-out b {
    opacity: .45;
    text-decoration: line-through
}

.team-bug-rider small.team-left-tag {
    color: #1a0406;
    background: #ff5a5f
}

.team-again-line {
    text-align: center;
    font: 700 13px/1.3 var(--xg-num);
    letter-spacing: .14em;
    color: #fff;
    text-shadow: 0 1px 3px #000c;
    margin: 0 0 10px;
    animation: .4s .5s both duel-rise
}

.team-again-line.is-starting {
    color: #101418;
    text-shadow: none;
    background: #c6ff3d;
    justify-self: center;
    padding: 12px 18px 11px
}

.team-athlete-photos {
    flex: none;
    display: flex
}

.team-athlete-photos .duel-photo+.duel-photo {
    margin-left: 2px
}

.duel-athlete .team-athlete-photos .duel-photo {
    width: 118px
}

@media (max-width: 620px) {
    .duel-athlete .team-athlete-photos .duel-photo {
        width:58px
    }
}

.train-hud {
    z-index: 7
}

.train-bug .duel-bug-board li.is-you {
    background: #f3c24d1f;
    box-shadow: inset 3px 0 #f3c24d
}

.train-bug .duel-bug-board li:first-child .duel-bug-place {
    color: #f3c24d
}

.train-bug .duel-bug-tile small {
    white-space: normal;
    text-align: center;
    max-width: 76px;
    line-height: 1.15
}

.train-count {
    pointer-events: none;
    position: absolute;
    top: 38%;
    left: 50%;
    translate: -50% -50%
}

.train-hud .train-count b {
    color: #f7f6ef;
    -webkit-text-stroke: 4px #101418;
    text-shadow: 9px 9px #0000006b;
    font-size: clamp(110px,16vw,210px);
    line-height: 1;
    animation: .9s cubic-bezier(.2,.9,.25,1.4) both train-pop;
    display: block;
    rotate: -6deg
}

.train-hud .train-count.is-go b {
    color: #6ec6ea;
    animation: .9s cubic-bezier(.2,.9,.25,1.4) both train-pop,.3s .9s both duel-fade-out
}

@keyframes train-pop {
    0% {
        opacity: 0;
        scale: 1.6
    }

    25% {
        opacity: 1;
        scale: 1
    }

    85% {
        opacity: 1;
        scale: .96
    }

    to {
        opacity: .85;
        scale: .92
    }
}

.train-banner {
    text-align: center;
    background: #0a0a0ad9;
    border-top: 3px solid #6ec6ea;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 30px 18px;
    animation: .4s both duel-rise;
    display: flex;
    position: absolute;
    top: 16%;
    left: 50%;
    translate: -50%
}

.train-banner-kicker {
    font: 700 14px/1 var(--xg-num);
    letter-spacing: .16em;
    color: #f7f6efcc
}

.train-banner h2 {
    margin: 0;
    font-size: clamp(44px,6vw,76px);
    line-height: 1;
    rotate: -3deg
}

.train-banner p {
    font: 700 18px/1 var(--xg-num);
    letter-spacing: .1em;
    margin: 4px 0 0
}

.train-hud .train-banner p b {
    font: 700 22px/1 var(--xg-num);
    color: #6ec6ea
}

.train-clock span {
    font: 700 15px/1 var(--xg-num);
    letter-spacing: .14em
}

.train-waiting {
    text-align: center;
    background: #0a0a0ae0;
    border-top: 3px solid #f3c24d;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 260px;
    padding: 14px 26px 16px;
    animation: .35s both duel-rise;
    display: flex;
    position: absolute;
    bottom: 9%;
    left: 50%;
    translate: -50%
}

.train-waiting>span {
    font: 700 14px/1 var(--xg-num);
    letter-spacing: .16em;
    color: #f7f6efcc
}

.train-hud .train-waiting b {
    font: 700 48px/1 var(--xg-num);
    font-variant-numeric: tabular-nums;
    color: #f7f6ef
}

.train-waiting em {
    font: 400 18px/1 "Knewave",var(--display);
    color: #f3c24d;
    font-style: normal
}

.train-waiting small {
    color: #03161f;
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .12em;
    background: #6ec6ea;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 5px 10px 4px;
    display: inline-flex
}

.train-results {
    pointer-events: auto;
    background: #0a0a0ae6;
    border-top: 3px solid #6ec6ea;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(460px,100vw - 32px);
    padding: 20px 24px 22px;
    animation: .35s both duel-rise;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%
}

.train-results ol {
    width: 100%;
    margin: 4px 0 0;
    padding: 0;
    list-style: none
}

.train-results li {
    grid-template-columns: 30px minmax(0,1fr) auto;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    display: grid
}

.train-results li+li {
    border-top: 1px solid #ffffff1c
}

.train-results li span {
    font: 700 17px/1 var(--xg-num);
    color: var(--xg-mute)
}

.train-results li:first-child span {
    color: #f3c24d
}

.train-hud .train-results li b {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    overflow: hidden
}

.train-results li em {
    font: 700 22px/1 var(--xg-num);
    font-variant-numeric: tabular-nums;
    font-style: normal
}

.train-results li.is-you {
    background: #f3c24d1f;
    box-shadow: inset 3px 0 #f3c24d
}

.train-total {
    font: 700 18px/1 var(--xg-num);
    letter-spacing: .1em;
    margin: 4px 0 0
}

.train-hud .train-total b {
    color: #f3c24d;
    font-size: 22px
}

.train-next {
    font: 700 16px/1 var(--xg-num);
    letter-spacing: .12em;
    color: #f7f6efcc;
    margin: 2px 0 0
}

.train-hud .train-next b {
    color: #6ec6ea;
    font-size: 18px
}

.train-hud .train-out {
    margin: 0;
    font-size: 52px;
    line-height: 1;
    rotate: -3deg
}

.train-next-map {
    text-align: center;
    background: #0a1218f2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: flex;
    position: absolute;
    inset: 0
}

.train-next-map>span {
    font: 700 16px/1 var(--xg-num);
    letter-spacing: .18em;
    color: #f7f6efcc
}

.train-next-map h2 {
    color: #f7f6ef;
    text-shadow: 8px 8px #0000006b;
    margin: 0;
    font-size: clamp(60px,10vw,128px);
    line-height: 1;
    animation: 1s cubic-bezier(.2,.9,.25,1.4) both train-pop;
    rotate: -4deg
}

.train-next-map p {
    font: 700 18px/1 var(--xg-num);
    letter-spacing: .14em;
    color: #6ec6ea;
    margin: 0
}

.train-next-map p.is-wrong {
    color: #ff8a7e
}

.train-joining-actions {
    pointer-events: auto;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    display: flex
}

.train-podium {
    pointer-events: auto;
    background: radial-gradient(at 50% 55%,#0a121866 0%,#0a1218d9 70%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    animation: .5s both duel-fade;
    display: flex;
    position: absolute;
    inset: 0
}

.train-steps {
    align-items: flex-end;
    gap: clamp(10px,2.5vw,28px);
    display: flex
}

.train-step {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: clamp(120px,17vw,200px);
    display: flex
}

.train-step-rider {
    aspect-ratio: 2/3;
    place-items: end center;
    width: 100%;
    display: grid
}

.train-step-rider img {
    filter: drop-shadow(6px 8px #0000006b);
    max-width: 100%;
    max-height: 100%
}

.train-step-rider span {
    font: 400 64px/1 "Knewave",var(--display);
    color: #f7f6ef44;
    align-self: center
}

.train-hud .train-step b {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 22px;
    line-height: 1;
    overflow: hidden
}

.train-step em {
    font: 700 20px/1 var(--xg-num);
    font-variant-numeric: tabular-nums;
    color: #f7f6efcc;
    font-style: normal
}

.train-step-block {
    width: 100%;
    font: 400 44px/1 "Knewave",var(--display);
    color: #101418;
    background: #c9d0d4;
    place-items: center;
    display: grid;
    box-shadow: inset 0 3px #ffffff80
}

.train-step.is-1 .train-step-block {
    background: #f3c24d;
    height: 110px
}

.train-step.is-3 .train-step-block {
    background: #c98a52;
    height: 56px
}

.train-step.is-1 .train-step-rider {
    width: 115%
}

.train-prize {
    color: #101418;
    font: 400 18px/1 "Knewave",var(--display);
    background: #f3c24d;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    padding: 8px 14px 7px;
    display: inline-flex;
    rotate: -2deg
}

.train-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
    display: flex
}

.train-leave ul {
    font: 700 16px/1 var(--xg-num,"Barlow Condensed",sans-serif);
    letter-spacing: .12em;
    gap: 6px;
    margin: 6px 0 12px;
    padding: 0;
    list-style: none;
    display: grid
}

.train-leave .train-actions {
    justify-content: flex-start
}

.game-shell.is-train .run-heading,.game-shell.is-train .live-roster {
    display: none
}

.game-shell.is-train .wordmark {
    visibility: hidden
}

.game-shell.is-train .live-chat {
    top: 300px
}

@media (max-width: 760px) {
    .train-bug {
        width:min(300px,100vw - 24px);
        top: 12px;
        left: 12px
    }

    .train-banner {
        padding: 12px 18px 14px;
        top: 22%
    }
}

.train-cut {
    font: 700 16px/1 var(--xg-num);
    letter-spacing: .14em;
    color: #f7f6efcc;
    margin: 4px 0 0
}

.train-hud .train-verdict {
    font: 400 22px/1 "Knewave",var(--display);
    margin: 2px 0 0;
    padding: 7px 14px 6px;
    rotate: -2deg
}

.train-verdict.is-through {
    color: #03161f;
    background: #6ec6ea
}

.train-verdict.is-cut {
    color: #101418;
    background: #f7f6ef
}

.train-bug .duel-bug-board li.is-out {
    opacity: .55
}

.train-bug .duel-bug-who small.is-out {
    color: #101418;
    background: #f7f6ef
}

.train-waiting.is-cut {
    border-top-color: #f7f6ef
}

.train-waiting.is-cut>span {
    font-size: 13px
}

.train-rule {
    pointer-events: auto;
    color: #f7f6ef;
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .12em;
    cursor: pointer;
    background: #0a0a0a;
    border: 2px solid #f7f6ef66;
    margin-top: 8px;
    padding: 7px 12px 6px
}

.train-rule:hover {
    border-color: #f7f6ef
}

.train-compare {
    font: 700 14px/1.3 var(--xg-num);
    letter-spacing: .1em;
    color: #f7f6efcc;
    text-align: center;
    max-width: min(620px,100vw - 32px);
    margin: 0
}

.train-bug-foot {
    justify-content: center;
    gap: 14px;
    flex-direction: row!important
}

.train-watchers {
    color: #6ec6ea;
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.train-watch {
    pointer-events: auto;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: .3s both duel-rise;
    display: flex;
    position: absolute;
    bottom: 8%;
    left: 50%;
    translate: -50%
}

.train-watch-out {
    color: #101418;
    font: 700 14px/1 var(--xg-num);
    letter-spacing: .14em;
    background: #f7f6ef;
    padding: 5px 10px 4px
}

.train-watch-who {
    align-items: center;
    gap: 6px;
    display: flex
}

.train-watch-who>span {
    font: 700 15px/1 var(--xg-num);
    letter-spacing: .14em;
    background: #0a0a0ae6;
    border-top: 3px solid #6ec6ea;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 8px;
    display: inline-flex
}

.train-hud .train-watch-who b {
    font: 400 22px/1 "Knewave",var(--display);
    letter-spacing: .02em
}

.train-watch-who button {
    color: #101418;
    cursor: pointer;
    background: #f7f6ef;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 40px;
    height: 40px;
    display: grid;
    box-shadow: 0 0 0 2px #101418,4px 4px 0 2px #0000006b
}

.train-watch-who button:hover {
    transform: translate(-1px,-1px)
}

.train-watch small {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .14em;
    color: #f7f6efcc
}

.train-hud .train-watch-who .train-watch-of {
    color: #6ec6ea;
    font-size: 13px
}

.train-watch-cams {
    background: #0a0a0ae6;
    border: 0;
    border-radius: 999px;
    min-width: 0;
    margin: 0;
    padding: 3px;
    display: flex;
    box-shadow: inset 0 0 0 1px #ffffff26
}

.train-hud .train-watch-cams button {
    color: #f7f6ef;
    height: 30px;
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .12em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    display: inline-flex
}

.train-hud .train-watch-cams button[aria-pressed=true] {
    color: #101418;
    background: #f7f6ef
}

.train-hud .train-watch-cams button:not([aria-pressed=true]):hover {
    background: #ffffff1f
}

.train-follow {
    pointer-events: auto;
    background: #0a0a0ae6;
    border-top: 3px solid #6ec6ea;
    flex-direction: column;
    width: 236px;
    max-height: min(52vh,560px);
    animation: .3s both duel-rise;
    display: flex;
    position: absolute;
    top: 84px;
    right: 46px
}

.train-follow-head {
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .14em;
    color: #f7f6ef;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 9px 12px 7px;
    display: flex
}

.train-follow-head b {
    color: #6ec6ea;
    margin-left: 4px
}

.train-follow-head small {
    font: 700 11px/1 var(--xg-num);
    letter-spacing: .1em;
    color: #f7f6efcc
}

.train-follow ol {
    overscroll-behavior: contain;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-y: auto
}

.train-hud .train-follow button {
    color: #f7f6ef;
    width: 100%;
    height: 30px;
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .08em;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    grid-template-columns: 16px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    display: grid
}

.train-hud .train-follow button b {
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 16px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    overflow: hidden
}

.train-hud .train-follow button:not(:disabled):hover {
    background: #ffffff1f
}

.train-hud .train-follow button[aria-pressed=true] {
    color: #101418;
    background: #f7f6ef
}

.train-hud .train-follow button:disabled {
    cursor: default;
    opacity: .45
}

.train-follow-n {
    color: #6ec6ea
}

.train-follow button[aria-pressed=true] .train-follow-n {
    color: #101418
}

.train-follow-live {
    font-variant-numeric: tabular-nums
}

@media (max-width: 760px) {
    .train-follow {
        display:none
    }
}

.train-hud.has-table.has-watch .train-table {
    overscroll-behavior: contain;
    max-height: calc(92% - 206px);
    top: auto;
    bottom: calc(8% + 150px);
    overflow-y: auto;
    translate: -50%
}

.train-hud.is-run.has-table.has-watch .train-clock {
    visibility: hidden
}

.train-table {
    background: #0a0a0ae6;
    border-top: 3px solid #6ec6ea;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(640px,100vw - 32px);
    max-height: calc(100vh - 150px);
    padding: 16px 22px 18px;
    animation: .3s both duel-rise;
    display: flex;
    position: absolute;
    top: 52%;
    left: 50%;
    overflow: hidden;
    translate: -50% -50%
}

.train-table-head {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    display: flex
}

.train-table-mine {
    font: 700 16px/1 var(--xg-num);
    letter-spacing: .12em;
    color: #f7f6efcc;
    margin: 0
}

.train-hud .train-table-mine b {
    font: 700 26px/1 var(--xg-num);
    color: #f3c24d;
    letter-spacing: 0
}

.train-table table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    width: 100%
}

.train-table th {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .14em;
    color: var(--xg-mute);
    text-align: right;
    padding: 0 8px 6px
}

.train-table th:nth-child(-n+2),.train-table td:nth-child(-n+2) {
    text-align: left
}

.train-table td {
    height: 30px;
    font: 700 20px/1 var(--xg-num);
    text-align: right;
    border-top: 1px solid #ffffff1c;
    padding: 0 8px
}

.train-table td:first-child {
    width: 34px;
    color: var(--xg-mute)
}

.train-table tr:first-child td:first-child {
    color: #f3c24d
}

.train-hud .train-table td b {
    font-size: 19px;
    line-height: 1
}

.train-table td small {
    font: 700 11px/1 var(--xg-num);
    letter-spacing: .12em;
    color: #03161f;
    vertical-align: 2px;
    background: #6ec6ea;
    margin-left: 7px;
    padding: 2px 5px 1px
}

.train-table td small.is-out {
    color: #101418;
    background: #f7f6ef
}

.train-table td:last-child {
    color: #6ec6ea
}

.train-table tr.is-you td {
    background: #f3c24d1f
}

.train-table tr.is-you td:first-child {
    box-shadow: inset 3px 0 #f3c24d
}

.train-table tr.is-out {
    opacity: .5
}

.train-table tr.is-on td:nth-child(2) b:before {
    content: "";
    vertical-align: 3px;
    background: #6ec6ea;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    display: inline-block
}

@media (max-height: 620px) {
    .train-table td {
        height:24px;
        font-size: 17px
    }

    .train-hud .train-table td b {
        font-size: 16px
    }
}

.train-intro {
    background: linear-gradient(115deg,#05070af2 0%,#0a1420f0 60%,#0d1d33f0 100%);
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 4vh clamp(16px,5vw,80px);
    animation: .5s both duel-fade;
    display: flex;
    position: absolute;
    inset: 0
}

.train-intro:before {
    content: "";
    pointer-events: none;
    border: 2px solid #6ec6ea55;
    border-radius: 28px;
    position: absolute;
    inset: 6% 4%
}

.train-intro-head {
    align-items: center;
    gap: 22px;
    display: flex
}

.train-intro-mark {
    color: #101418;
    font: 400 26px/1 "Knewave",var(--display);
    background: #f7f6ef;
    flex: none;
    padding: 12px 14px 10px;
    rotate: -4deg;
    box-shadow: 6px 6px #0000006b
}

.train-intro-head h2 {
    color: #f7f6ef;
    letter-spacing: .01em;
    margin: 0;
    font-size: clamp(40px,6vw,84px);
    line-height: .95
}

.train-intro-head p {
    flex-wrap: wrap;
    gap: 18px;
    margin: 8px 0 0;
    display: flex
}

.train-hud .train-intro-head p b {
    font: 700 clamp(16px,1.8vw,24px)/1 var(--xg-num);
    letter-spacing: .12em;
    color: #6ec6ea;
    font-style: italic
}

.train-intro-riders {
    justify-content: center;
    gap: clamp(10px,2vw,28px);
    display: flex
}

.train-intro-rider {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: clamp(130px,16vw,220px);
    animation: .5s both duel-rise;
    display: flex
}

.train-intro-rider:nth-child(2) {
    animation-delay: .1s
}

.train-intro-rider:nth-child(3) {
    animation-delay: .2s
}

.train-intro-rider:nth-child(4) {
    animation-delay: .3s
}

.train-intro-rider:nth-child(5) {
    animation-delay: .4s
}

.train-intro-photo {
    aspect-ratio: 3/4;
    background: radial-gradient(circle at 50% 30%,#2b4a5c,#0d1a22);
    border-radius: 12px;
    place-items: end center;
    width: 100%;
    display: grid;
    overflow: hidden
}

.train-intro-photo img {
    object-fit: cover;
    object-position: 50% 12%;
    width: 100%;
    height: 100%
}

.train-intro-photo span {
    font: 400 72px/1 "Knewave",var(--display);
    color: #f7f6ef44;
    align-self: center
}

.train-intro-seed {
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .14em;
    color: #6ec6ea;
    border-left: 3px solid #6ec6ea;
    margin-top: 6px;
    padding-left: 10px
}

.train-hud .train-intro-rider b {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f7f6ef;
    max-width: 100%;
    padding-left: 10px;
    font-size: clamp(22px,2.4vw,34px);
    line-height: 1;
    overflow: hidden
}

.train-intro-rider em {
    font: 700 16px/1 var(--xg-num);
    color: #f7f6efcc;
    font-variant-numeric: tabular-nums;
    padding-left: 10px;
    font-style: normal
}

.train-intro-rider.is-you .train-intro-photo {
    box-shadow: 0 0 0 3px #f3c24d
}

.train-intro .train-next {
    align-self: center
}

@media (max-width: 760px) {
    .train-intro-riders {
        flex-wrap:wrap
    }

    .train-intro-head {
        flex-direction: column;
        align-items: flex-start
    }
}

.train-table tr.is-more td {
    height: 26px;
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .14em;
    color: var(--xg-mute);
    text-align: left;
    padding-left: 50px
}

.train-table tr.is-more svg {
    vertical-align: -2px
}

.train-podium {
    gap: 10px;
    padding: 16px 0
}

.train-step {
    width: clamp(110px,14vw,170px)
}

.train-step.is-1 .train-step-block {
    height: 84px
}

.train-step.is-2 .train-step-block {
    height: 60px
}

.train-step.is-3 .train-step-block {
    height: 44px
}

.train-step-block {
    font-size: 36px
}

.train-step-rider {
    max-height: min(30vh,240px)
}

.train-intro.is-event {
    background: linear-gradient(#05070ad9 0%,#05070a8c 30%,#0000 46% 52%,#05070aa6 68%,#05070ae6 100%);
    justify-content: space-between;
    gap: 12px;
    padding: 5vh clamp(16px,4vw,64px) 4vh
}

.train-intro.is-event:before {
    display: none
}

.train-format {
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.train-format li {
    background: #0a0a0ad9;
    border-top: 3px solid #6ec6ea;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 7px 8px;
    animation: .4s both duel-rise;
    display: flex
}

.train-format li:nth-child(2) {
    animation-delay: .1s
}

.train-format li:nth-child(3) {
    animation-delay: .2s
}

.train-format li:nth-child(4) {
    animation-delay: .3s
}

.train-format li>span {
    color: #101418;
    width: 28px;
    height: 28px;
    font: 400 18px/1 "Knewave",var(--display);
    background: #f7f6ef;
    place-items: center;
    display: grid
}

.train-hud .train-format li b {
    font: 400 21px/1 "Knewave",var(--display);
    color: #f7f6ef;
    letter-spacing: .02em
}

.train-format li em {
    font: 700 15px/1 var(--xg-num);
    letter-spacing: .12em;
    color: #6ec6ea;
    font-style: normal
}

.train-format li.is-final {
    border-top-color: #f3c24d
}

.train-format li.is-final em {
    color: #f3c24d
}

.train-roster {
    grid-template-columns: repeat(10,minmax(0,1fr));
    align-self: center;
    gap: 10px 12px;
    width: min(100%,1060px);
    display: grid
}

.train-roster-rider {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    animation: .4s both duel-rise;
    display: flex;
    position: relative
}

.train-roster-photo {
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 30%,#2b4a5c,#0d1a22);
    border-radius: 10px;
    place-items: end center;
    width: 100%;
    max-width: 96px;
    display: grid;
    overflow: hidden
}

.train-roster-photo img {
    object-fit: cover;
    object-position: 50% 12%;
    width: 100%;
    height: 100%
}

.train-roster-photo span {
    font: 400 40px/1 "Knewave",var(--display);
    color: #f7f6ef44;
    align-self: center
}

.train-hud .train-roster-rider b {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font: 400 15px/1 "Knewave",var(--display);
    color: #f7f6ef;
    letter-spacing: .02em;
    overflow: hidden
}

.train-roster-rider small {
    color: #101418;
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .1em;
    background: #f3c24d;
    padding: 2px 5px 1px;
    position: absolute;
    top: 4px;
    right: 4px
}

.train-roster-rider.is-you .train-roster-photo {
    box-shadow: 0 0 0 3px #f3c24d
}

.train-roster.is-many {
    grid-template-columns: repeat(15,minmax(0,1fr));
    gap: 8px
}

.train-roster.is-many .train-roster-photo {
    max-width: 64px
}

.train-hud .train-roster.is-many .train-roster-rider b {
    font-size: 12px
}

@media (max-width: 760px) {
    .train-roster {
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap: 8px
    }

    .train-roster.is-many {
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

    .train-format li b {
        font-size: 17px
    }
}

@media (max-height: 620px) {
    .train-roster-photo {
        max-width:64px
    }
}

.game-shell.is-train-intro .music-player {
    visibility: hidden
}

.game-shell.is-train-intro .live-chat {
    z-index: 9;
    top: auto;
    bottom: 22px
}

.game-shell.is-train-intro .chat-log {
    max-height: calc(1.45em + 12px)
}

.game-shell.is-train-intro .chat-open {
    display: none
}

.game-shell.is-train-over .live-chat {
    z-index: 9
}

.train-podium-stay {
    font: 700 14px/1 var(--xg-num);
    letter-spacing: .14em;
    color: #f7f6efcc;
    margin: 0
}

.train-podium-stay b {
    color: #f7f6ef
}

.train-table tr.is-below td {
    color: #f7f6ef80;
    background: #0a0d10b3
}

.train-table tr.is-below td:last-child {
    color: #6ec6ea80
}

.train-table tr.is-below.is-you td {
    color: #f7f6efb3;
    background: #3a2f12b3
}

.train-table tr.train-cut-row td {
    border-top: 0;
    height: 24px;
    padding: 0
}

.train-table tr.train-cut-row span {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .16em;
    color: #ff8a7e;
    white-space: nowrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.train-table tr.train-cut-row span:before,.train-table tr.train-cut-row span:after {
    content: "";
    background: #ff8a7e;
    flex: 1;
    height: 2px
}

.train-table tr.is-gap td {
    height: 20px;
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .14em;
    color: var(--xg-mute);
    text-align: left;
    border-top: 0;
    padding-left: 50px
}

.train-hud .train-verdict.is-top {
    margin: 2px 0 4px;
    padding: 8px 16px 7px;
    font-size: 26px
}

.train-verdict.is-top.is-cut {
    color: #1a0806;
    background: #ff8a7e
}

.train-bug .duel-bug-board li.is-below {
    opacity: .42
}

.train-bug .duel-bug-board li.is-below.is-you {
    opacity: .7
}

.train-banner.is-spectating h2 {
    color: #f7f6ef
}

.train-banner .train-banner-note {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .16em;
    color: #f7f6efcc;
    margin-top: 2px
}

.train-podium.is-heat {
    justify-content: safe center;
    gap: 12px;
    overflow-y: auto
}

.train-format li.is-on {
    border-top-color: #f7f6ef
}

.train-heat-top {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px 18px;
    width: min(560px,100vw - 32px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.train-heat-top li {
    font: 700 15px/1 var(--xg-num);
    letter-spacing: .08em;
    color: #f7f6efcc;
    background: #0a0a0ad9;
    grid-template-columns: 28px minmax(0,1fr) auto 18px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 5px;
    display: grid
}

.train-heat-top li>span {
    color: #f7f6ef
}

.train-hud .train-heat-top li b {
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 18px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    color: #f7f6ef;
    overflow: hidden
}

.train-heat-top li em {
    font-variant-numeric: tabular-nums;
    font-style: normal
}

.train-heat-top li i {
    color: #6ec6ea;
    font-style: normal
}

.train-heat-top li.is-through {
    border-left: 3px solid #6ec6ea
}

.train-heat-top li.is-you {
    color: #101418;
    background: #f7f6ef
}

.train-hud .train-heat-top li.is-you b,.train-heat-top li.is-you>span {
    color: #101418
}

.train-bracket {
    background: #0a0a0ae6;
    border-top: 3px solid #6ec6ea;
    align-items: stretch;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px;
    display: flex;
    overflow-x: auto
}

.train-bracket-final {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.train-bracket-round {
    grid-template-rows: auto 1fr;
    grid-template-columns: auto auto;
    gap: 8px 12px;
    display: grid
}

.train-bracket-round>.train-bracket-label {
    grid-area: 1/1
}

.train-bracket-round>.train-bracket-heats {
    grid-area: 2/1
}

.train-bracket-round:after {
    content: "→";
    font: 400 22px/1 "Knewave",var(--display);
    color: #6ec6ea;
    grid-area: 1/2/span 2;
    align-self: center
}

.train-bracket-label {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .14em;
    color: #6ec6ea
}

.train-bracket-heats {
    grid-template-columns: repeat(var(--heat-cols,5),minmax(96px,1fr));
    gap: 6px;
    display: grid
}

.train-bracket-heat {
    font: 700 12px/1.2 var(--xg-num);
    letter-spacing: .06em;
    color: #f7f6efcc;
    background: #ffffff12;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    display: flex
}

.train-hud .train-bracket-heat b {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .14em;
    color: #f7f6ef
}

.train-bracket-heat ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.train-bracket-heat li {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.train-bracket-heat em {
    color: #f7f6ef99;
    font-style: normal
}

.train-bracket-heat.is-over {
    box-shadow: inset 3px 0 #6ec6ea
}

.train-bracket-heat.is-here {
    color: #101418;
    background: #f7f6ef
}

.train-hud .train-bracket-heat.is-here b {
    color: #101418
}

.train-bracket-final {
    background: #ffffff12;
    border-top: 3px solid #f3c24d;
    justify-content: center;
    min-width: 110px;
    padding: 8px 12px
}

.train-bracket-final .train-bracket-label {
    color: #f3c24d
}

.train-hud .train-bracket-final b {
    font: 400 20px/1 "Knewave",var(--display);
    color: #f7f6ef
}

@media (max-width: 760px) {
    .train-heat-top {
        grid-template-columns:1fr
    }

    .train-bracket-heats {
        grid-template-columns: repeat(3,minmax(84px,1fr))
    }
}

@media (max-height: 500px) {
    .train-podium.is-heat {
        gap:8px;
        padding: 8px 0
    }

    .train-heat-top {
        display: none
    }

    .train-bracket {
        padding: 8px 10px
    }

    .train-bracket-heat {
        padding: 4px 6px
    }
}

.train-table:has(.train-bracket) {
    width: min(980px,100vw - 32px);
    overflow-y: auto
}

.train-table .train-bracket {
    background: 0 0;
    border-top: 1px solid #ffffff1c;
    max-width: 100%;
    padding: 8px 0 0
}

.rd-train-slot {
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    display: flex
}

.bc-shell .bc-ride .rd-train {
    isolation: isolate;
    color: #fff;
    background: radial-gradient(circle at 72% 18%,#4a6488 0%,#1c2a40 46%,#080b12 100%);
    border-radius: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 152px;
    padding: 42px 14px 14px;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #ffffff2e,0 8px 22px #0007
}

.rd-train:before {
    content: "";
    z-index: -1;
    background: radial-gradient(circle,#00000059 1.3px,#0000 1.8px) 0 0/8px 8px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(20deg,#000 0%,#0000 55%);
    mask-image: linear-gradient(20deg,#000 0%,#0000 55%)
}

.rd-train:after {
    content: "";
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg,#ffffff2e 0%,#0000 34%);
    position: absolute;
    inset: 0
}

.bc-shell .bc-ride .rd-train.is-live {
    background: radial-gradient(circle at 72% 18%,#ff6b7a 0%,#c4243f 44%,#4c0716 100%)
}

.bc-shell .bc-ride .rd-train.is-finished {
    background: radial-gradient(circle at 74% 30%,#ffd84a 0%,#d79a1c 40%,#4a2c06 100%)
}

.rd-train-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    transform: rotate(-5deg)
}

.rd-train-tag.is-live {
    color: #c4243f;
    background: #fff
}

.rd-train-tag i {
    background: #e8203d;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    animation: 1.2s ease-in-out infinite rd-train-blink
}

@keyframes rd-train-blink {
    50% {
        opacity: .25
    }
}

.rd-train-prize {
    position: absolute;
    top: 10px;
    right: 10px;
    transform: rotate(5deg)
}

.game-shell .rd-train-label {
    font: 400 15px/1 var(--display);
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 2px 2px #00000080
}

.game-shell .rd-train-big {
    font: 400 48px/.95 var(--display);
    letter-spacing: .02em;
    color: #fff;
    text-shadow: 3px 3px #0000009e;
    white-space: nowrap;
    display: block
}

.game-shell .rd-train-big.is-words {
    font-size: 34px;
    line-height: 1
}

.game-shell .rd-train-big.is-name {
    text-overflow: ellipsis;
    max-width: 58%;
    font-size: 38px;
    overflow: hidden
}

.game-shell .rd-train-foot {
    font: 400 14px/1.1 var(--display);
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 2px 2px #00000080
}

.rd-train-row {
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    display: flex
}

.rd-train-row>div {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.rd-train-when {
    text-align: right;
    align-items: flex-end
}

.game-shell .rd-train-when b {
    font: 400 26px/1 var(--display);
    letter-spacing: .02em;
    color: #fff;
    text-shadow: 2px 2px #0000009e;
    white-space: nowrap
}

.game-shell .bc-shell .bc-ride .rd-train-go {
    color: #101418;
    height: 44px;
    font: 400 22px/1 var(--display);
    letter-spacing: .03em;
    cursor: pointer;
    background: #f7f6ef;
    border: 0;
    border-radius: 10px;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 0 14px 0 16px;
    transition: transform .15s,box-shadow .15s,background .15s;
    display: inline-flex;
    box-shadow: 0 0 0 2px #101418,5px 5px 0 2px #0000006b
}

.game-shell .bc-shell .bc-ride .rd-train-go:hover {
    background: #fff;
    transform: translate(-2px,-2px);
    box-shadow: 0 0 0 2px #101418,7px 7px 0 2px #0000006b
}

.game-shell .bc-shell .bc-ride .rd-train-go:active {
    transform: translate(2px,2px);
    box-shadow: 0 0 0 2px #101418,2px 2px 0 2px #0000006b
}

.game-shell .bc-shell .bc-ride .rd-train-go.is-quiet {
    height: 38px;
    font-size: 19px
}

.rd-train-act {
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    display: flex
}

.game-shell .rd-train-pill {
    color: #101418;
    font: 400 18px/1 var(--display);
    letter-spacing: .03em;
    background: #f7f6ef;
    border-radius: 8px;
    align-items: center;
    gap: 6px;
    padding: 8px 11px 7px;
    display: inline-flex;
    transform: rotate(-2deg);
    box-shadow: 0 0 0 2px #101418
}

.game-shell .rd-train-pill.is-in {
    background: #c6ff3d
}

.game-shell .bc-shell .bc-ride .rd-train-text {
    color: #fff;
    font: 700 13px/1 var(--body);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-underline-offset: 3px;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 4px 0;
    text-decoration: underline
}

.game-shell .bc-shell .bc-ride .rd-train-text:hover {
    text-decoration-thickness: 2px
}

.rd-train-winner {
    z-index: -1;
    filter: drop-shadow(5px 6px #0000006b);
    pointer-events: none;
    width: auto;
    height: 118%;
    max-height: 190px;
    position: absolute;
    bottom: -14px;
    right: -6px;
    transform: rotate(-3deg)
}

.rd-train-test {
    align-items: center;
    gap: 12px;
    padding: 0 4px;
    display: flex
}

.game-shell .rd-train-test span {
    font: 400 13px/1 var(--display);
    letter-spacing: .06em;
    color: #fff;
    opacity: .85
}

.game-shell .bc-shell .bc-ride .rd-train-test button {
    color: #fff;
    font: 700 12px/1 var(--body);
    letter-spacing: .08em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 3px;
    padding: 3px 0;
    display: inline-flex
}

.game-shell .bc-shell .bc-ride .rd-train-test button:hover {
    text-decoration: underline
}

.train-confirm p {
    font: 700 16px/1.2 var(--body);
    letter-spacing: .06em;
    margin: 0 0 6px
}

.train-results-card ol {
    max-height: min(52vh,460px);
    margin: 4px 0 8px;
    padding: 0;
    list-style: none;
    overflow: auto
}

.train-results-card li {
    grid-template-columns: 30px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 8px;
    display: grid
}

.train-results-card li+li {
    border-top: 1px solid #ffffff1c
}

.train-results-card li span {
    font: 700 17px/1 var(--body);
    color: #ffffffb3
}

.train-results-card li:first-child span {
    color: #f3c24d
}

.train-results-card li b {
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 18px/1 var(--display);
    letter-spacing: .02em;
    overflow: hidden
}

.train-results-card li em {
    font: 700 12px/1 var(--body);
    letter-spacing: .08em;
    color: #fffc;
    font-style: normal
}

.train-results-card li i {
    font: 700 17px/1 var(--body);
    font-variant-numeric: tabular-nums;
    font-style: normal
}

.train-results-card li.is-you {
    background: #f3c24d1f;
    box-shadow: inset 3px 0 #f3c24d
}

@media (max-width: 1060px) {
    .rd-train-slot {
        order:1;
        margin-bottom: 16px
    }
}

@media (min-width: 1061px) and (max-height:850px) {
    .bc-shell .bc-ride .rd-train {
        min-height:136px;
        padding-top: 38px
    }

    .game-shell .rd-train-big {
        font-size: 42px
    }
}

.train-joining {
    z-index: 90;
    color: #fff;
    text-align: center;
    pointer-events: none;
    background: #0a0a0ae6;
    border-top: 3px solid #ff6b7a;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 28px 18px;
    animation: .35s both train-joining-in;
    display: flex;
    position: fixed;
    top: 18%;
    left: 50%;
    translate: -50%
}

.game-shell .train-joining span {
    letter-spacing: .16em;
    font: 700 14px/1 Barlow Condensed,DM Sans,sans-serif
}

.game-shell .train-joining b {
    font: 400 42px/1 var(--display);
    letter-spacing: .02em;
    rotate: -3deg
}

@keyframes train-joining-in {
    0% {
        opacity: 0;
        translate: -50% 12px
    }
}

.rd-cup-lock {
    flex-direction: column;
    gap: 7px;
    width: 100%;
    margin-top: 6px;
    display: flex
}

.rd-cup-lock .rd-train-label {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.rd-cup-meter {
    align-items: center;
    gap: 10px;
    width: 100%;
    display: flex
}

.rd-cup-bar {
    background: #00000059;
    border-radius: 7px;
    flex: 1;
    height: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 2px #101418,inset 0 1px #ffffff1f
}

.rd-cup-bar i {
    background: #f7f6ef;
    border-radius: 7px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset 0 -3px #0000002e
}

.game-shell .rd-cup-meter b {
    font: 400 20px/1 var(--display);
    letter-spacing: .02em;
    color: #fff;
    text-shadow: 2px 2px #00000080;
    white-space: nowrap
}

.game-shell .rd-cup-ok {
    align-self: flex-start;
    margin-top: 6px
}

.cup-call-stack {
    z-index: 9;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(560px,100% - 24px);
    display: flex;
    position: absolute;
    top: 22px;
    left: 50%;
    translate: -50%
}

.cup-call-stack>* {
    pointer-events: auto
}

.cup-card {
    -webkit-backdrop-filter: blur(14px);
    color: #f7f6ef;
    width: 100%;
    font-family: var(--body);
    background: #0b0f13d6;
    border: 1px solid #ffffff1f;
    border-radius: 14px;
    align-items: center;
    gap: 16px;
    padding: 12px 14px 12px 18px;
    display: flex;
    box-shadow: 0 10px 28px #0000004d
}

.cup-card.is-in {
    box-shadow: inset 3px 0 #f7f6ef,0 10px 28px #0000004d
}

.cup-card.is-no {
    box-shadow: inset 3px 0 #ff8a7e,0 10px 28px #0000004d
}

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

.cup-card-kicker {
    font: 700 11px/1 var(--body);
    letter-spacing: .18em;
    color: #f7f6efcc;
    align-items: center;
    gap: 7px;
    display: flex
}

.cup-card strong {
    font: 600 19px/1.2 var(--body);
    letter-spacing: -.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
    gap: 6px;
    display: flex;
    overflow: hidden
}

.cup-card-line {
    font: 500 13px/1.3 var(--body);
    color: #f7f6efd9;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.cup-live-dot {
    background: #ff5a5f;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    animation: 1.6s ease-in-out infinite cup-live;
    box-shadow: 0 0 0 3px #ff5a5f33
}

@keyframes cup-live {
    50% {
        opacity: .35
    }
}

@media (prefers-reduced-motion:reduce) {
    .cup-live-dot {
        animation: none
    }
}

.game-shell .cup-act {
    color: #0b0f13;
    height: 36px;
    font: 700 14px/1 var(--body);
    cursor: pointer;
    background: #f7f6ef;
    border: 0;
    border-radius: 999px;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    transition: background .15s,transform .15s;
    display: inline-flex
}

.game-shell .cup-act:hover {
    background: #fff
}

.game-shell .cup-act:active {
    transform: scale(.97)
}

.game-shell .cup-act:disabled {
    opacity: .45;
    cursor: default
}

.game-shell .cup-link {
    color: #f7f6ef;
    font: 600 13px/1 var(--body);
    text-underline-offset: 3px;
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex: none;
    padding: 6px 2px;
    text-decoration: underline
}

.game-shell .cup-link:hover {
    text-decoration-thickness: 2px
}

.cup-admin {
    -webkit-backdrop-filter: blur(14px);
    background: #0b0f13d6;
    border: 1px solid #ffffff1f;
    border-radius: 14px;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 8px 12px;
    display: flex
}

@media (max-width: 760px) {
    .cup-call-stack {
        top:12px
    }

    .cup-card strong {
        font-size: 17px
    }
}

.rd-play>.cup-card {
    margin-bottom: 10px
}

.game-shell .pause-card.cup-setup {
    width: 600px;
    padding: 26px 30px 18px
}

.game-shell .cup-setup h2 {
    margin: 8px 0 12px
}

.cup-setup-row {
    border-top: 1px solid #ffffff21;
    padding: 10px 0
}

.cup-setup-row.is-inline {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    display: flex
}

.cup-setup-row h3 {
    font: 400 18px/1.1 var(--display);
    letter-spacing: .03em;
    color: #fff;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0 0 8px;
    display: flex
}

.cup-setup-row.is-inline h3 {
    margin: 0
}

.cup-setup-row h3 small {
    font: 700 12px/1.2 var(--body);
    letter-spacing: .06em;
    color: #fff
}

.cup-setup-chips {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.game-shell .cup-setup-chips button {
    color: #fff;
    height: 36px;
    font: 400 15px/1 var(--display);
    letter-spacing: .03em;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    transition: transform .15s,box-shadow .15s;
    display: inline-flex;
    box-shadow: inset 0 0 0 2px #ffffff40
}

.game-shell .cup-setup-chips button:hover {
    box-shadow: inset 0 0 0 2px #fff
}

.game-shell .cup-setup-chips button[aria-pressed=true] {
    color: #101418;
    background: #f7f6ef;
    box-shadow: 0 0 0 2px #101418,4px 4px 0 2px #0000006b
}

.cup-setup-chips b {
    color: #f7f6ef;
    width: 21px;
    height: 21px;
    font: 800 12px/1 var(--body);
    background: #101418;
    border-radius: 50%;
    place-items: center;
    display: grid
}

.cup-setup-format {
    min-height: 17px;
    font: 700 13px/1.3 var(--body);
    letter-spacing: .03em;
    color: #fff;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 10px 0 0;
    display: flex
}

.cup-setup-format span+span:before {
    content: "→";
    opacity: .7;
    margin: 0 9px
}

.cup-setup-format b {
    color: #fff;
    font-weight: 800
}

.cup-setup-stepper {
    align-items: center;
    gap: 6px;
    display: flex
}

.game-shell .cup-setup-stepper button {
    color: #fff;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    box-shadow: inset 0 0 0 2px #ffffff40
}

.game-shell .cup-setup-stepper button:hover:not(:disabled) {
    box-shadow: inset 0 0 0 2px #fff
}

.game-shell .cup-setup-stepper button:disabled {
    opacity: .35;
    cursor: default
}

.cup-setup-stepper output {
    text-align: center;
    min-width: 46px;
    font: 400 27px/1 var(--display)
}

.cup-setup-range {
    gap: 12px;
    display: flex
}

.cup-setup-range label {
    cursor: text;
    border-radius: 8px;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 42px;
    padding: 0 13px;
    display: flex;
    box-shadow: inset 0 0 0 2px #ffffff40
}

.cup-setup-range label:focus-within {
    box-shadow: inset 0 0 0 2px #f7f6ef
}

.cup-setup-range span {
    font: 400 15px/1 var(--display);
    letter-spacing: .03em
}

.cup-setup-range input {
    color: #fff;
    width: 100%;
    min-width: 0;
    font: 700 19px/1 var(--body);
    text-align: right;
    -webkit-user-select: text;
    user-select: text;
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1;
    padding: 0
}

.cup-setup-range input::placeholder {
    color: #ffffffa6
}

.cup-setup-range em {
    font: 700 15px/1 var(--body);
    font-style: normal
}

.cup-setup-range input:placeholder-shown+em {
    visibility: hidden
}

.cup-setup-hint {
    font: 700 13px/1.3 var(--body);
    letter-spacing: .05em;
    color: #fff;
    margin: 8px 0 0
}

.cup-setup-hint.is-wrong {
    color: #ff8a7e
}

.game-shell .cup-setup .primary-button {
    height: 54px;
    margin: 12px 0 10px
}

.game-shell .cup-setup .primary-button:disabled {
    opacity: .45;
    cursor: default;
    transform: none
}

.cup-setup-note {
    text-align: center;
    font: 700 12px/1.3 var(--body);
    letter-spacing: .06em;
    color: #fff;
    margin: 0
}

@media (max-width: 620px) {
    .cup-setup-row.is-inline {
        flex-wrap:wrap
    }

    .cup-setup-range {
        flex-direction: column;
        gap: 8px
    }
}

@media (max-height: 700px) {
    .game-shell .pause-card.cup-setup {
        padding:16px 24px 12px
    }

    .game-shell .cup-setup h2 {
        margin: 2px 0 6px;
        font-size: 30px
    }

    .cup-setup-row {
        padding: 7px 0
    }

    .cup-setup-row h3 {
        margin-bottom: 6px
    }

    .game-shell .cup-setup-chips button {
        height: 32px
    }

    .cup-setup-range label {
        height: 38px
    }

    .game-shell .cup-setup-stepper button {
        width: 34px;
        height: 34px
    }

    .game-shell .cup-setup .primary-button {
        height: 46px;
        margin: 8px 0 6px
    }
}

fieldset.cup-setup-chips {
    border: 0;
    min-width: 0;
    margin: 0;
    padding: 0
}

.game-shell .cup-setup-chips.is-players button {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 74px;
    height: 54px;
    padding: 0 12px
}

.game-shell .cup-setup-chips.is-players button b {
    width: auto;
    height: auto;
    color: inherit;
    font: 400 21px/1 var(--display);
    background: 0 0;
    border-radius: 0;
    display: block
}

.game-shell .cup-setup-chips.is-players button small {
    font: 700 11px/1 var(--body);
    letter-spacing: .08em;
    opacity: .85
}

@media (max-height: 620px) {
    .game-shell .cup-setup-chips.is-players button {
        min-width:64px;
        height: 46px
    }
}

.cup-top {
    flex-direction: column;
    gap: 3px;
    margin: 5px 0 3px;
    padding: 0;
    list-style: none;
    display: flex
}

.cup-top li {
    font: 600 14px/1.25 var(--body);
    grid-template-columns: 16px minmax(0,1fr) auto;
    align-items: baseline;
    gap: 9px;
    display: grid
}

.cup-top b {
    font: 800 13px/1 var(--body);
    text-align: center;
    color: #f7f6efcc
}

.cup-top li.is-1 b {
    color: #f3c24d
}

.cup-top li.is-2 b {
    color: #d6dbe0
}

.cup-top li.is-3 b {
    color: #e0a46c
}

.cup-top span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.cup-top em {
    font: 600 13px/1 var(--body);
    font-variant-numeric: tabular-nums;
    color: #f7f6efd9;
    font-style: normal
}

.game-shell .cup-results {
    --xg-line: #ffffff1c;
    --xg-white: #f4f4f4;
    --xg-blue: #6ec6ea;
    --xg-blue-ink: #03161f;
    --xg-mute: #9aa6ab;
    --xg-num: "Barlow Condensed","DM Sans",sans-serif;
    border: 0;
    border-top: 4px solid var(--xg-blue);
    width: 640px;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 48px);
    color: var(--xg-white);
    background: #0a0a0af2;
    border-radius: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 80px #000a
}

.cup-board-head {
    border-bottom: 1px solid var(--xg-line);
    flex: none;
    padding: 18px 66px 14px 22px;
    position: relative
}

.cup-board-kicker {
    font: 700 13px/1 var(--xg-num);
    letter-spacing: .18em;
    color: var(--xg-blue);
    display: block
}

.game-shell .cup-results h2 {
    font: 400 36px/.95 "Knewave",var(--display);
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--xg-white);
    margin: 8px 0 10px;
    transform: none
}

.cup-board-meta {
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    display: flex
}

.cup-board-meta span,.game-shell .cup-board-you {
    font: 700 14px/1 var(--xg-num);
    letter-spacing: .12em;
    color: var(--xg-white);
    background: #ffffff12;
    align-items: baseline;
    gap: 5px;
    padding: 5px 8px 4px;
    display: inline-flex
}

.cup-board-meta b {
    color: var(--xg-blue);
    font-weight: 700
}

.game-shell .cup-board-you {
    color: #101418;
    cursor: pointer;
    background: #f3c24d;
    border: 0
}

.game-shell .cup-board-you b {
    color: #101418
}

.game-shell .cup-board-close {
    z-index: 2;
    width: 40px;
    height: 40px;
    color: var(--xg-white);
    cursor: pointer;
    background: #ffffff14;
    border: 0;
    place-items: center;
    display: grid;
    position: absolute;
    top: 14px;
    right: 14px
}

.game-shell .cup-board-close:hover {
    background: #ffffff29
}

.cup-board-body {
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    overflow-y: auto
}

.cup-board-cols {
    z-index: 1;
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .16em;
    color: var(--xg-mute);
    background: #0a0a0a;
    grid-template-columns: 64px minmax(0,1fr) auto;
    gap: 12px;
    padding: 10px 22px 8px;
    display: grid;
    position: sticky;
    top: 0
}

.cup-board-cols span:last-child {
    text-align: right
}

.cup-board-rows {
    margin: 0;
    padding: 0 0 6px;
    list-style: none
}

.cup-board-rows li {
    border-top: 1px solid var(--xg-line);
    grid-template-columns: 64px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 22px;
    display: grid
}

.cup-board-rows li:nth-child(2n) {
    background: #ffffff06
}

.cup-board-rows b {
    font: 700 20px/1 var(--xg-num);
    font-variant-numeric: tabular-nums;
    color: var(--xg-white)
}

.cup-board-rows span {
    align-items: center;
    gap: 8px;
    min-width: 0;
    display: flex
}

.cup-board-rows strong {
    font: 400 19px/1.1 "Knewave",var(--display);
    letter-spacing: .02em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.cup-board-rows small {
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .12em;
    color: var(--xg-blue);
    background: #6ec6ea26;
    flex: none;
    padding: 3px 6px 2px
}

.cup-board-rows small.is-you {
    background: var(--xg-blue);
    color: var(--xg-blue-ink)
}

.cup-board-rows em {
    font: 700 20px/1 var(--xg-num);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--xg-white);
    font-style: normal
}

.cup-board-rows li:is(.is-1,.is-2,.is-3) {
    min-height: 56px
}

.cup-board-rows li:is(.is-1,.is-2,.is-3) b {
    color: #101418;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 28px;
    display: grid
}

.cup-board-rows li.is-1 b {
    background: #f3c24d
}

.cup-board-rows li.is-2 b {
    background: #d6dbe0
}

.cup-board-rows li.is-3 b {
    background: #e0a46c
}

.cup-board-rows li.is-1 {
    background: linear-gradient(90deg,#f3c24d2e,#0000 60%)
}

.cup-board-rows li.is-2 {
    background: linear-gradient(90deg,#d6dbe024,#0000 60%)
}

.cup-board-rows li.is-3 {
    background: linear-gradient(90deg,#e0a46c24,#0000 60%)
}

.cup-board-rows li:is(.is-1,.is-2,.is-3) strong {
    font-size: 25px
}

.cup-board-rows li:is(.is-1,.is-2,.is-3) em {
    font-size: 26px
}

.cup-board-rows li.is-you {
    background: #f3c24d1f;
    box-shadow: inset 4px 0 #f3c24d
}

.cup-board-note {
    font: 700 16px/1.3 var(--xg-num);
    letter-spacing: .12em;
    color: var(--xg-white);
    margin: 0;
    padding: 22px
}

.cup-board-foot {
    border-top: 1px solid var(--xg-line);
    flex: none;
    padding: 12px 22px 16px
}

.game-shell .cup-board-more {
    color: #101418;
    width: 100%;
    height: 46px;
    font: italic 800 20px/1 var(--display);
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
    background: #f7f6ef;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    box-shadow: 0 0 0 2px #101418,5px 5px 0 2px #0000006b
}

.game-shell .cup-board-more kbd {
    color: #f7f6ef;
    font: 700 12px/1 var(--xg-num);
    letter-spacing: .12em;
    background: #101418;
    border-radius: 4px;
    padding: 3px 6px 2px
}

@media (max-height: 620px) {
    .cup-board-head {
        padding:12px 60px 10px 18px
    }

    .game-shell .cup-results h2 {
        margin: 6px 0 8px;
        font-size: 28px
    }

    .cup-board-rows li:is(.is-1,.is-2,.is-3) {
        min-height: 46px
    }

    .cup-board-rows li:is(.is-1,.is-2,.is-3) b {
        width: 36px;
        height: 36px;
        font-size: 22px
    }

    .game-shell .cup-board-more {
        height: 40px;
        font-size: 17px
    }
}

.cup-tile {
    isolation: isolate;
    color: #fff;
    background: radial-gradient(circle at 80% 16%,#46e6d2 0%,#0f8b93 40%,#06283a 100%);
    border-radius: 16px;
    width: 100%;
    margin: 0 0 12px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #ffffff2e,0 8px 22px #0007
}

.cup-tile:before {
    content: "";
    z-index: -1;
    background: radial-gradient(circle,#00000059 1.3px,#0000 1.8px) 0 0/8px 8px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(20deg,#000 0%,#0000 55%);
    mask-image: linear-gradient(20deg,#000 0%,#0000 55%)
}

.cup-tile:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(135deg,#ffffff38 0%,#0000 34%);
    position: absolute;
    inset: 0
}

.cup-tile .rd-tag.cup-tile-tag {
    z-index: 1;
    text-transform: uppercase;
    font-size: 12px;
    position: absolute;
    top: 11px;
    left: 12px;
    transform: rotate(-4deg)
}

.cup-tile.is-in .rd-tag.cup-tile-tag {
    background: #c6ff3d
}

.cup-tile-dot {
    background: #ff3b4a;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 2px #ff3b4a55
}

.cup-tile-in {
    z-index: 1;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    min-height: 136px;
    padding: 44px 14px 13px 16px;
    display: flex;
    position: relative
}

.cup-tile-text {
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    display: flex
}

.cup-tile-title {
    max-width: 100%;
    font: italic 800 31px/.92 var(--display);
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 2px 2px #0000009e;
    margin: 0;
    display: block;
    overflow: hidden
}

.cup-tile-sub {
    font: italic 800 15px/1 var(--display);
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #f7f6ef;
    text-shadow: 1px 1px #0000008a;
    margin-top: 6px;
    display: block
}

.cup-tile-meta {
    font: 800 11px/1.25 var(--body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f2fbff;
    margin-top: 7px;
    display: block
}

.game-shell .cup-tile-btn {
    color: #101418;
    font: italic 800 19px/1 var(--display);
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
    background: #f7f6ef;
    border: 0;
    border-radius: 10px;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 9px;
    transition: transform .15s,box-shadow .15s;
    display: inline-flex;
    box-shadow: 0 0 0 2px #101418,4px 4px 0 2px #0000006b
}

.game-shell .cup-tile-btn:hover {
    transform: translate(-1px,-1px);
    box-shadow: 0 0 0 2px #101418,5px 5px 0 2px #0000006b
}

.game-shell .cup-tile-btn:active {
    transform: translate(1px,1px);
    box-shadow: 0 0 0 2px #101418,2px 2px 0 2px #0000006b
}

.game-shell .cup-tile-btn:disabled {
    opacity: .65;
    cursor: default;
    transform: none
}

.game-shell .cup-tile-btn.is-small {
    padding: 8px 11px 7px;
    font-size: 15px
}

.game-shell .cup-tile-btn.is-quiet {
    color: #fff;
    background: #ffffff26;
    padding: 8px 11px 7px;
    font-size: 14px;
    box-shadow: inset 0 0 0 2px #ffffff59
}

.cup-tile-path {
    font: italic 800 12px/1 var(--display);
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    display: flex
}

.cup-tile-dots {
    gap: 3px;
    display: flex
}

.cup-tile-dots i {
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: inset 0 0 0 1.5px #f7f6ef
}

.cup-tile-dots i.is-done {
    background: #f7f6ef
}

.cup-tile-dots.is-many {
    gap: 2px
}

.cup-tile-dots.is-many i {
    width: 6px;
    height: 6px
}

.cup-tile-next {
    background: #ffffff26;
    border-radius: 5px;
    padding: 3px 5px 2px
}

.cup-tile-next.is-on {
    color: #101418;
    background: #f7f6ef
}

.cup-tile-seats {
    background: #ffffff2e;
    border-radius: 5px;
    width: 190px;
    max-width: 100%;
    height: 9px;
    margin-top: 9px;
    position: relative;
    overflow: hidden
}

.cup-tile-seats i {
    background: #c6ff3d;
    border-radius: 5px;
    position: absolute;
    inset: 0 auto 0 0
}

.cup-tile-pod {
    z-index: 1;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: end;
    gap: 6px;
    margin: 0;
    padding: 46px 14px 0;
    list-style: none;
    display: grid;
    position: relative
}

.cup-tile-pod li {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    display: flex
}

.cup-tile-pod em {
    max-width: 100%;
    font: italic 800 13px/1 var(--display);
    letter-spacing: .2px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 1px 1px #0000009e;
    overflow: hidden
}

.cup-tile-pod .is-1 em {
    font-size: 16px
}

.cup-tile-pod span {
    color: #101418;
    width: 100%;
    font: italic 800 22px/1 var(--display);
    border-radius: 6px 6px 0 0;
    place-items: center;
    display: grid;
    box-shadow: inset 0 2px #ffffff80
}

.cup-tile-pod .is-1 span {
    background: #ecc65a;
    height: 48px;
    font-size: 28px
}

.cup-tile-pod .is-2 span {
    background: #d6dbe0;
    height: 36px
}

.cup-tile-pod .is-3 span {
    background: #c6915c;
    height: 28px
}

.cup-tile-foot {
    z-index: 1;
    background: #06283acc;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 12px 16px;
    display: flex;
    position: relative;
    box-shadow: inset 0 1px #ffffff26
}

.cup-tile-foot .cup-tile-meta {
    margin: 0
}

@media (max-height: 560px) {
    .cup-tile-in {
        min-height:0;
        padding: 36px 12px 10px 14px
    }

    .cup-tile-title {
        font-size: 24px
    }

    .cup-tile-sub {
        font-size: 13px
    }

    .cup-tile-pod {
        padding-top: 38px
    }

    .cup-tile-pod .is-1 span {
        height: 36px;
        font-size: 22px
    }

    .cup-tile-pod .is-2 span {
        height: 28px
    }

    .cup-tile-pod .is-3 span {
        height: 22px
    }

    .game-shell .cup-tile-btn {
        padding: 8px 11px 7px;
        font-size: 15px
    }
}

.cup-tile-foot.is-admin {
    background: #031c28e6
}

.cup-tile-admin {
    align-items: center;
    gap: 8px;
    display: flex
}

.match-stack {
    z-index: 9;
    pointer-events: none;
    --m-cream: #f7f6ef;
    --m-ink: #101418;
    --m-glass: #0a1218eb;
    --m-blue: #6ec6ea;
    --m-blue-ink: #03161f;
    --m-gold: #f3c24d;
    --m-num: "Barlow Condensed","DM Sans",sans-serif;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(600px,100% - 24px);
    display: flex;
    position: absolute;
    top: 22px;
    left: 50%;
    translate: -50%
}

.match-stack.is-below {
    top: calc(34px + var(--cup-call-h,82px))
}

.match-stack>* {
    pointer-events: auto
}

.match-stack button,.match-list button {
    cursor: pointer
}

.match-badge {
    color: #101418;
    font: 400 17px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    background: #f7f6ef;
    border-radius: 8px;
    flex: none;
    padding: 5px 9px 4px;
    rotate: -4deg;
    box-shadow: 3px 3px #0000005c
}

.match-badge.is-1v1 {
    color: #03161f;
    background: #6ec6ea
}

.match-x {
    color: #f7f6ef;
    background: #ffffff1a;
    border: 0;
    border-radius: 10px;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    display: grid
}

.match-x:hover {
    background: #ffffff2e
}

.match-clock {
    text-align: right;
    color: #f7f6ef99;
    font-variant-numeric: tabular-nums;
    flex: none;
    min-width: 24px;
    font: 700 20px/1 Barlow Condensed,DM Sans,sans-serif
}

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

.match-text strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 28px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    overflow: hidden
}

.match-text span {
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 14px/1 "Knewave",var(--display);
    letter-spacing: .03em;
    color: #f7f6efc4;
    overflow: hidden
}

.match-act {
    color: #101418;
    font: 400 21px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    white-space: nowrap;
    background: #f7f6ef;
    border: 0;
    border-radius: 12px;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    transition: transform .15s;
    display: inline-flex;
    rotate: -2deg;
    box-shadow: 0 0 0 2px #101418,5px 5px 0 2px #0000006b
}

.match-act:hover:not(:disabled) {
    transform: translate(-1px,-1px)
}

.match-act:disabled {
    opacity: .6;
    cursor: default
}

.match-act kbd {
    font: 400 12px/1 "Knewave",var(--display);
    color: #f7f6ef;
    background: #101418;
    border-radius: 6px;
    padding: 4px 6px;
    rotate: 4deg
}

.match-toast {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #f7f6ef;
    background: #0a1218eb;
    border: 1px solid #ffffff12;
    border-radius: 18px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 14px 15px 16px;
    animation: .35s cubic-bezier(.2,.9,.25,1.25) both match-drop;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 48px #0009
}

@keyframes match-drop {
    0% {
        opacity: 0;
        transform: translateY(-18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.match-mine {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #f7f6ef;
    white-space: nowrap;
    background: #0a1218eb;
    border-radius: 16px;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    padding: 10px 12px 10px 14px;
    display: flex;
    box-shadow: 0 12px 40px #0008
}

.match-mine strong {
    text-overflow: ellipsis;
    font: 400 20px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    overflow: hidden
}

.match-mine.is-going strong {
    color: #6ec6ea
}

.match-note {
    color: #f3c24d;
    font: 400 16px/1 "Knewave",var(--display);
    letter-spacing: .03em;
    background: #0a1218e6;
    border-radius: 999px;
    padding: 8px 14px
}

.match-pill {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #f7f6ef;
    white-space: nowrap;
    background: #0a1218eb;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 16px;
    display: flex;
    box-shadow: 0 10px 30px #0007
}

.match-pill:hover {
    background: #13232ef0
}

.match-pill>span:first-child {
    font: 400 16px/1 "Knewave",var(--display);
    letter-spacing: .03em
}

.match-pill>b {
    color: #101418;
    background: #f3c24d;
    border-radius: 999px;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font: 700 15px/1 Barlow Condensed,DM Sans,sans-serif;
    display: grid
}

.match-chev {
    color: #f7f6efb0;
    font: 700 13px/1 DM Sans,sans-serif
}

.match-backdrop {
    z-index: 11;
    cursor: default;
    background: #0a121866;
    border: 0;
    padding: 0;
    animation: .2s both match-fade;
    position: absolute;
    inset: 0
}

@keyframes match-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.match-list {
    z-index: 12;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #f7f6ef;
    background: #0a1218f2;
    border: 1px solid #ffffff14;
    border-radius: 20px;
    outline: 0;
    width: min(640px,100% - 24px);
    max-height: calc(100dvh - 44px);
    margin: 0;
    padding: 18px 18px 16px;
    animation: .3s both match-drop;
    position: absolute;
    top: 22px;
    left: 50%;
    overflow-y: auto;
    translate: -50%;
    box-shadow: 0 20px 60px #000a
}

.match-list header {
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    display: flex
}

.match-list h2 {
    font: 400 30px/1 "Knewave",var(--display);
    letter-spacing: .02em;
    margin: 0;
    rotate: -1.5deg
}

.match-list header span {
    letter-spacing: .14em;
    color: #f7f6efb0;
    white-space: nowrap;
    margin-left: auto;
    font: 700 15px/1 Barlow Condensed,DM Sans,sans-serif
}

.match-row {
    border-top: 1px solid #ffffff14;
    align-items: center;
    gap: 13px;
    padding: 11px 4px 11px 2px;
    display: flex
}

.match-row .match-text strong {
    font-size: 21px
}

.match-row .match-text span {
    color: #f7f6efb3;
    font-size: 13px
}

.match-row.is-yours .match-text strong {
    color: #6ec6ea
}

.match-row .match-act {
    padding: 9px 14px;
    font-size: 18px
}

.match-empty {
    font: 400 18px/1 "Knewave",var(--display);
    color: #f7f6efb3;
    text-align: center;
    border-top: 1px solid #ffffff14;
    margin: 0;
    padding: 18px 4px
}

.match-list footer {
    border-top: 1px solid #ffffff14;
    gap: 12px;
    margin-top: 12px;
    padding-top: 14px;
    display: flex
}

.match-act.is-big {
    flex: 1;
    padding: 14px 16px;
    font-size: 22px
}

@media (max-width: 760px) {
    .match-stack,.match-stack.is-below {
        width:auto;
        top: 8px;
        left: 12px;
        right: 170px;
        translate: none
    }

    .match-stack.is-below {
        top: calc(20px + var(--cup-call-h,82px))
    }

    .match-stack:has(.match-toast) :is(.match-note,.match-pill,.match-undo) {
        display: none
    }

    .match-toast {
        gap: 10px;
        padding: 11px 10px 13px 12px
    }

    .match-text strong {
        font-size: 23px
    }

    .match-text span {
        font-size: 12px
    }

    .match-act {
        padding: 9px 12px;
        font-size: 18px
    }

    .match-act kbd {
        display: none
    }

    .match-mine {
        gap: 10px
    }

    .match-mine strong {
        font-size: 17px
    }

    .match-list {
        border-radius: 22px 22px 0 0;
        width: 100%;
        max-height: 85dvh;
        padding: 16px 14px 22px;
        top: auto;
        bottom: 0
    }

    .match-list h2 {
        font-size: 26px
    }

    .match-row .match-text strong {
        font-size: 18px
    }

    .match-act.is-big {
        font-size: 19px
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell.is-touch .match-stack {
        left:calc(var(--tc-left,16px) + 96px);
        right: calc(var(--tc-right,16px) + 231px);
        gap: 6px;
        width: auto;
        top: 8px;
        translate: none
    }

    .game-shell.is-touch .match-stack.is-below {
        display: none
    }

    .game-shell.is-touch .match-stack:has(.match-toast) :is(.match-note,.match-pill,.match-undo) {
        display: none
    }

    .game-shell.is-touch .match-toast {
        border-radius: 14px;
        gap: 8px;
        padding: 7px 8px 9px 10px
    }

    .game-shell.is-touch .match-text {
        gap: 3px
    }

    .game-shell.is-touch .match-text strong {
        font-size: 19px
    }

    .game-shell.is-touch .match-text span {
        font-size: 11px
    }

    .game-shell.is-touch .match-badge {
        padding: 4px 7px 3px;
        font-size: 14px
    }

    .game-shell.is-touch .match-act {
        padding: 7px 11px;
        font-size: 16px
    }

    .game-shell.is-touch .match-act kbd {
        display: none
    }

    .game-shell.is-touch .match-x {
        width: 30px;
        height: 30px
    }

    .game-shell.is-touch .match-clock {
        min-width: 18px;
        font-size: 16px
    }

    .game-shell.is-touch .match-mine {
        border-radius: 14px;
        gap: 8px;
        max-width: 100%;
        padding: 6px 8px 6px 10px
    }

    .game-shell.is-touch .match-mine strong {
        font-size: 16px
    }

    .game-shell.is-touch .match-pill {
        gap: 7px;
        padding: 5px 8px 5px 12px
    }

    .game-shell.is-touch .match-pill>span:first-child {
        font-size: 13px
    }

    .game-shell.is-touch .match-note {
        padding: 5px 10px;
        font-size: 13px
    }
}

@media (prefers-reduced-motion:reduce) {
    .match-toast,.match-list,.match-backdrop {
        animation: none
    }
}

.match-pill-open {
    letter-spacing: .12em;
    color: #f7f6efd0;
    font: 700 13px/1 DM Sans,sans-serif
}

.match-mute {
    color: #f7f6efb8
}

.match-pill-key {
    font: 400 12px/1 "Knewave",var(--display);
    color: #101418;
    background: #f7f6ef;
    border-radius: 5px;
    padding: 3px 6px
}

.match-undo {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #f7f6ef;
    letter-spacing: .1em;
    white-space: nowrap;
    background: #0a1218eb;
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 14px;
    font: 700 13px/1 DM Sans,sans-serif;
    display: flex;
    box-shadow: 0 10px 30px #0007
}

.match-undo button {
    color: #101418;
    font: 400 14px/1 "Knewave",var(--display);
    letter-spacing: .03em;
    background: #f7f6ef;
    border: 0;
    border-radius: 999px;
    padding: 7px 12px
}

.idle-banner {
    z-index: 80;
    top: calc(env(safe-area-inset-top,0px) + 18px);
    box-sizing: border-box;
    color: #f3f3e9;
    max-width: calc(100vw - 32px);
    font: 600 12px/1.3 var(--body);
    letter-spacing: .04em;
    text-align: center;
    pointer-events: none;
    background: #0b1419eb;
    border-radius: 999px;
    padding: 9px 16px 8px;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 0 1px #ffffff1f,0 8px 22px #0007
}

.idle-banner b,.idle-clock b {
    font: italic 800 16px/1 var(--display);
    letter-spacing: .3px;
    color: #fa8958;
    font-variant-numeric: tabular-nums
}

.idle-clock {
    font: 600 10px/1.3 var(--body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #afc4ce
}

.idle-clock.is-soon {
    color: #f3f3e9
}

.idle-card p {
    color: #c6d7dc;
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.55
}

@media (max-width: 620px) {
    .idle-banner {
        font-size:11px
    }
}

.bc-tab-ride .bc-lobby-content {
    flex-direction: column;
    display: flex
}

.bc-tab-ride .bc-shade {
    background: radial-gradient(36% 60% at 50% 58%,#0b1f28b8 0%,#0b1f2866 55%,#0000 100%),linear-gradient(90deg,#071a23e6 0%,#0b232eb0 24%,#10293660 62%,#142e3740 100%),linear-gradient(#08222d80,#0000 20% 76%,#071b28ce)
}

@media (min-width: 1061px),(orientation:landscape) and (min-width:761px),(orientation:landscape) and (max-height:500px) {
    .bc-ready.bc-tab-ride .bc-shade {
        background:linear-gradient(#081a24e6 0%,#081a24b3 11%,#081a2459 19%,#0000 30%),linear-gradient(#0000 78%,#081a2440 88%,#081a24b3 100%),radial-gradient(30% 46% at 50% 60%,#0b1f2840 0%,#0000 100%)
    }
}

.bc-shell .bc-ride {
    flex: 1;
    grid-template-columns: minmax(240px,290px) minmax(0,1fr) minmax(320px,370px);
    gap: 28px;
    max-width: none;
    min-height: 0;
    display: grid;
    position: relative
}

.rd-side {
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding-top: 6px;
    display: flex
}

.rd-side .bc-kicker {
    margin-bottom: 2px
}

.bc-shell .bc-ride .rd-tile {
    isolation: isolate;
    color: #fff;
    text-align: left;
    cursor: pointer;
    background: radial-gradient(circle at 72% 18%,#5aa2ff 0%,#2560d8 46%,#0e2a6b 100%);
    border: 0;
    border-radius: 16px;
    width: 100%;
    padding: 0;
    transition: transform .2s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #ffffff2e,0 8px 22px #0007
}

.bc-shell .bc-ride .rd-tile:hover {
    box-shadow: 0 0 0 3px #f7f6ef,6px 6px 0 3px var(--bc-orange),0 8px 22px #0007;
    transform: translateY(-3px)rotate(-.6deg)
}

.bc-shell .bc-ride .rd-tile:focus-visible {
    outline-offset: 6px;
    outline: 2px solid #fff
}

.rd-news-tile {
    height: 156px
}

.rd-news-tile img {
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.rd-news-tile:after {
    content: "";
    z-index: -1;
    background: linear-gradient(#0000 30%,#000000b8 100%);
    position: absolute;
    inset: 0
}

.bc-shell .bc-ride .rd-season-tile {
    background: radial-gradient(circle at 26% 40%,#ffc75a 0%,#f08a1c 45%,#7a3408 100%);
    height: 118px
}

.rd-season-tile img {
    filter: drop-shadow(0 10px 12px #000a);
    width: 48%;
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%)rotate(-8deg)
}

.rd-tile .rd-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    transform: rotate(-5deg)
}

.rd-season-tile .rd-tag {
    left: auto;
    right: 10px;
    transform: rotate(5deg)
}

.rd-tile-copy {
    padding: 26px 13px 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.rd-season-tile .rd-tile-copy {
    background: 0 0;
    right: 40%
}

.rd-tile-copy small {
    font: 800 9px var(--body);
    letter-spacing: 1.3px;
    text-transform: uppercase;
    opacity: .85;
    display: block
}

.rd-tile-copy b {
    font: italic 800 21px/.95 var(--display);
    letter-spacing: .3px;
    text-transform: uppercase;
    text-shadow: 2px 2px #0000009e;
    margin-top: 5px;
    display: block
}

.bc-shell .bc-ride .rd-tier-tile {
    background: radial-gradient(circle at 72% 18%,#3fe0a6 0%,#13956a 46%,#063b28 100%);
    height: 104px
}

.rd-tier {
    text-shadow: 2px 2px #0000009e;
    align-items: baseline;
    gap: 4px;
    display: flex;
    position: absolute;
    top: 8px;
    right: 13px
}

.rd-tier small {
    font: 800 12px var(--body);
    letter-spacing: 1.2px
}

.rd-tier b {
    font: italic 800 36px/1 var(--display);
    letter-spacing: .5px
}

.rd-tier-bar {
    background: #0000004d;
    border-radius: 4px;
    height: 8px;
    position: absolute;
    bottom: 34px;
    left: 13px;
    right: 13px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #ffffff24
}

.rd-tier-bar i {
    border-radius: inherit;
    background: #f7f6ef;
    height: 100%;
    transition: width .4s;
    display: block
}

.rd-tier-next {
    font: 400 14px/1 var(--display);
    letter-spacing: .05em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 1px 1px #00000080;
    position: absolute;
    bottom: 11px;
    left: 13px;
    right: 13px;
    overflow: hidden
}

.rd-stage {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding-bottom: 4px;
    display: flex;
    position: relative
}

.rd-stage:before {
    content: "";
    z-index: -1;
    aspect-ratio: 1;
    pointer-events: none;
    background: repeating-conic-gradient(#f7f6ef1c 0deg 6deg,#0000 6deg 18deg);
    width: min(100vh,160%);
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-mask-image: radial-gradient(circle,#000 6%,#0000 58%);
    mask-image: radial-gradient(circle,#000 6%,#0000 58%)
}

.bc-shell .bc-ride .rd-riders {
    pointer-events: none;
    position: absolute;
    inset: 0
}

.rd-one {
    margin: 0;
    position: absolute
}

.rd-one img {
    width: 100%;
    height: 100%;
    animation: .45s ease-out both rd-in;
    display: block
}

.rd-one.is-away img {
    opacity: .75;
    filter: grayscale(.85)brightness(.85)
}

.rd-one.is-fill img {
    opacity: .2;
    filter: brightness(0)invert()blur(.5px)
}

.rd-name .rd-invite {
    color: #101418;
    font: 800 .82em/1 var(--body);
    letter-spacing: .12em;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    text-shadow: none;
    background: #f7f6ef;
    border: 0;
    border-radius: 999px;
    margin-top: .5em;
    padding: .6em 1.1em;
    box-shadow: 0 2px 10px #0006
}

.rd-name .rd-invite:hover {
    background: #fff
}

.rd-name .rd-invite:focus-visible {
    outline-offset: 3px;
    outline: 2px solid #f7f6ef
}

@media (max-width: 620px),(max-height:760px) {
    .rd-name .rd-invite {
        display:none
    }
}

.rd-shadow {
    filter: blur(3px);
    background: radial-gradient(closest-side,#000000a6,#0000);
    border-radius: 50%;
    position: absolute;
    translate: -50% -55%
}

.rd-name {
    z-index: 9;
    color: #f7f6ef;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 8px #000c;
    flex-direction: column;
    align-items: center;
    gap: .4em;
    display: flex;
    position: absolute;
    translate: -50%
}

.rd-name b {
    max-width: var(--room,none);
    font: 700 1em/1 var(--body);
    letter-spacing: .16em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    overflow: hidden
}

.rd-name small {
    font: 600 .8em/1 var(--body);
    letter-spacing: .16em;
    opacity: .72
}

@keyframes rd-in {
    0% {
        opacity: 0
    }
}

.bc-shell .bc-ride .rd-pass {
    z-index: 1;
    color: #101418;
    width: min(100%,380px);
    font-size: inherit;
    letter-spacing: 0;
    background: #f7f6ef;
    border-radius: 10px;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "head head""name link";
    align-items: end;
    gap: 7px 14px;
    margin: 0;
    padding: 11px 66px 12px 32px;
    display: grid;
    position: relative;
    transform: rotate(-1.2deg);
    box-shadow: 0 0 0 2px #101418,4px 4px 0 2px #0000004d
}

.bc-shell .bc-ride .rd-pass:before {
    content: "";
    background: #112830;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    position: absolute;
    top: 50%;
    left: 12px;
    box-shadow: inset 0 0 0 2px #101418
}

.rd-barcode {
    background: repeating-linear-gradient(90deg,#101418 0 2px,#0000 2px 4px,#101418 4px 5px,#0000 5px 8px,#101418 8px 11px,#0000 11px 12px);
    width: 38px;
    position: absolute;
    top: 11px;
    bottom: 11px;
    right: 14px
}

.rd-pass-head {
    font: italic 800 13px/1 var(--display);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    grid-area: head
}

.rd-pass-head small {
    font: 800 9px var(--body);
    letter-spacing: 1.2px;
    color: #5b6a70;
    margin-left: 6px
}

.bc-shell .bc-ride .rd-pass-name {
    grid-area: name;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    display: flex
}

.bc-shell .bc-ride .rd-pass-name small {
    font: 800 9px var(--body);
    letter-spacing: 1.3px;
    color: #5b6a70
}

.bc-shell .bc-ride .rd-pass input,.bc-shell .bc-ride .rd-pass-name b {
    color: #101418;
    width: 100%;
    min-width: 0;
    font: italic 800 22px/1 var(--display);
    letter-spacing: .4px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    border-bottom: 2px dashed #10141855;
    border-radius: 0;
    flex: 1;
    margin: 0;
    padding: 2px 0 3px;
    overflow: hidden
}

.bc-shell .bc-ride .rd-pass-name b {
    border-bottom: 0
}

.bc-shell .bc-ride .rd-pass input::placeholder {
    color: #10141866
}

.bc-shell .bc-ride .rd-pass>button {
    color: #101418;
    font: 800 11px var(--body);
    letter-spacing: .8px;
    text-transform: uppercase;
    background: 0 0;
    border: 0;
    grid-area: link;
    align-items: center;
    gap: 4px;
    padding: 0 0 5px;
    display: flex
}

.bc-shell .bc-ride .rd-pass>button:hover {
    color: #b8471a
}

.rd-play {
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
    margin-bottom: -71px;
    display: flex
}

.rd-play>:is(.rd-modes,.rd-start,.rd-queue) {
    flex-shrink: 0
}

.rd-ban {
    color: #f7f6ef;
    background: #101418eb;
    border-radius: 14px;
    align-self: flex-end;
    gap: 4px;
    width: calc(50% - 6px);
    margin-bottom: 4px;
    padding: 10px 12px 11px;
    display: grid;
    box-shadow: inset 0 0 0 2px #ff6b6e,0 8px 22px #0007
}

.rd-ban-head {
    font: 800 10px/1.2 var(--body);
    letter-spacing: .1em;
    color: #ff9a9c;
    align-items: center;
    gap: 6px;
    display: flex
}

.rd-ban b {
    font: italic 400 24px/1.05 var(--display);
    letter-spacing: .4px
}

.rd-ban small {
    font-size: 12px;
    line-height: 1.3
}

.bc-shell .bc-ride .rd-modes {
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.bc-shell .bc-ride .rd-modes>button.rd-mode {
    isolation: isolate;
    background: var(--mode);
    color: #fff;
    text-align: left;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 16px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0;
    height: 108px;
    padding: 12px 12px 11px;
    transition: transform .2s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #ffffff2e,0 8px 22px #0007
}

.bc-shell .bc-ride .rd-mode.is-solo {
    --mode: radial-gradient(circle at 72% 18%,#5aa2ff 0%,#2560d8 46%,#0e2a6b 100%)
}

.bc-shell .bc-ride .rd-mode.is-live {
    --mode: radial-gradient(circle at 72% 18%,#c77dff 0%,#7a33d6 45%,#35106f 100%)
}

.bc-shell .bc-ride .rd-modes>button.rd-mode:hover {
    background: var(--mode);
    transform: translateY(-3px)rotate(-.6deg)
}

.bc-shell .bc-ride .rd-modes>button.rd-mode.is-selected {
    box-shadow: 0 0 0 3px #f7f6ef,6px 6px 0 3px var(--bc-orange),0 8px 22px #0007
}

.bc-shell .bc-ride .rd-modes>button.rd-mode:disabled {
    opacity: .55;
    filter: saturate(.45);
    transform: none
}

.bc-shell .bc-ride .rd-modes>button.rd-mode:focus-visible {
    outline-offset: 6px;
    outline: 2px solid #fff
}

.rd-rays {
    z-index: -1;
    aspect-ratio: 1;
    background: repeating-conic-gradient(#ffffff17 0deg 6deg,#0000 6deg 18deg);
    width: 260%;
    position: absolute;
    top: 16%;
    left: 78%;
    transform: translate(-50%,-50%);
    -webkit-mask-image: radial-gradient(circle,#000 8%,#0000 52%);
    mask-image: radial-gradient(circle,#000 8%,#0000 52%)
}

.rd-mode:before,.rd-tile:before {
    content: "";
    z-index: -1;
    background: radial-gradient(circle,#00000059 1.3px,#0000 1.8px) 0 0/8px 8px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(20deg,#000 0%,#0000 55%);
    mask-image: linear-gradient(20deg,#000 0%,#0000 55%)
}

.rd-mode:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(135deg,#ffffff38 0%,#0000 34%);
    position: absolute;
    inset: 0
}

.bc-shell .bc-ride .rd-icon {
    filter: drop-shadow(2px 2px #0000006b);
    position: absolute;
    top: 12px;
    left: 12px
}

.bc-shell .bc-ride .rd-mode-name b {
    font: italic 800 23px/.95 var(--display);
    letter-spacing: .3px;
    text-transform: uppercase;
    text-shadow: 2px 2px #0000009e;
    margin: 0;
    display: block
}

.bc-shell .bc-ride .rd-mode-name small {
    color: #eef2ff;
    opacity: .9;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.3;
    display: block
}

.bc-shell .bc-ride .rd-start {
    background: var(--bc-orange);
    color: #101418;
    height: 78px;
    min-height: 0;
    font: italic 800 42px/1 var(--display);
    letter-spacing: .5px;
    text-transform: uppercase;
    border: 0;
    border-radius: 14px;
    padding: 0 20px 0 26px;
    transition: transform .15s,box-shadow .15s,background .15s;
    box-shadow: 0 0 0 3px #101418,7px 7px 0 3px #0000006b
}

.bc-shell .bc-ride .rd-start:hover {
    background: #ff9d71;
    transform: translate(-2px,-2px);
    box-shadow: 0 0 0 3px #101418,9px 9px 0 3px #0000006b
}

.bc-shell .bc-ride .rd-start:active {
    transform: translate(2px,2px);
    box-shadow: 0 0 0 3px #101418,3px 3px 0 3px #0000006b
}

.bc-shell .bc-ride .rd-start:disabled {
    opacity: .6;
    transform: none
}

.bc-shell .bc-ride .rd-start kbd {
    color: #101418;
    font: 800 9px 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
}

.rd-tag {
    color: #101418;
    font: italic 800 13px/1 var(--display);
    letter-spacing: .6px;
    white-space: nowrap;
    background: #f7f6ef;
    border-radius: 6px;
    align-items: center;
    gap: 4px;
    padding: 4px 7px 3px;
    display: inline-flex;
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000004d
}

.rd-mode .rd-tag {
    font-size: 12px;
    position: absolute;
    top: 10px;
    right: 10px;
    transform: rotate(5deg)
}

.rd-tag.is-picked {
    background: #c6ff3d
}

.rd-tag.is-locked,.rd-tag.is-prize {
    background: #ffd84a
}

.rd-news-tile.has-new .rd-tag {
    background: var(--bc-orange)
}

.bc-shell .bc-ride .rd-modes>button.rd-mode.is-ranked {
    grid-column: 1/-1;
    justify-content: center;
    height: 76px;
    padding-left: 50px
}

.bc-shell .bc-ride .rd-mode.is-ranked {
    --mode: radial-gradient(circle at 82% 20%,#ff6b81 0%,#d1173f 45%,#4f0718 100%)
}

.bc-shell .bc-ride .rd-mode.is-ranked .rd-icon {
    top: 50%;
    left: 16px;
    transform: translateY(-50%)
}

.bc-shell .bc-ride .rd-mode.is-ranked .rd-tag {
    top: 50%;
    transform: translateY(-50%)rotate(5deg)
}

.bc-shell .bc-ride .rd-modes>button.rd-mode.is-ranked.has-sizes {
    grid-row: 2;
    padding-right: 160px
}

.bc-shell .bc-ride .rd-ranked-sizes {
    z-index: 1;
    border: 0;
    grid-area: 2/1/auto/-1;
    place-self: center end;
    gap: 6px;
    min-width: 0;
    margin: 0 12px 0 0;
    padding: 0;
    display: flex
}

.bc-shell .bc-ride .rd-ranked-size {
    color: #f7f6ef;
    min-width: 66px;
    height: 48px;
    font: italic 800 19px/1 var(--display);
    letter-spacing: .3px;
    cursor: pointer;
    background: #0000004d;
    border: 0;
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    transition: transform .15s;
    display: flex;
    box-shadow: inset 0 0 0 2px #f7f6ef66
}

.bc-shell .bc-ride .rd-ranked-size small {
    font: 800 8.5px/1 var(--body);
    letter-spacing: .08em;
    white-space: nowrap;
    color: inherit;
    opacity: .85;
    margin-top: 4px;
    font-style: normal
}

.bc-shell .bc-ride .rd-ranked-size:hover {
    background: #00000073;
    transform: translateY(-1px)
}

.bc-shell .bc-ride .rd-ranked-size.is-on {
    color: #101418;
    background: #c6ff3d;
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000004d
}

.bc-shell .bc-ride .rd-ranked-size.is-on:hover {
    background: #d4ff6b
}

.bc-shell .bc-ride .rd-ranked-size:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none
}

.bc-shell .bc-ride .rd-ranked-size:focus-visible {
    outline-offset: 3px;
    outline: 2px solid #f7f6ef
}

.bc-shell .bc-ride .rd-modes>button.rd-mode.is-closed {
    opacity: .5;
    filter: saturate(.35)
}

.rd-queue {
    color: #101418;
    background: #f7f6ef;
    border-radius: 14px;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "head cancel""big cancel""line cancel";
    align-content: center;
    column-gap: 12px;
    height: 78px;
    padding: 0 14px 0 24px;
    display: grid;
    box-shadow: 0 0 0 3px #101418,7px 7px 0 3px #0000006b
}

.rd-queue-head {
    font: 800 11px/1 var(--body);
    letter-spacing: .12em;
    grid-area: head;
    align-items: center;
    gap: 6px;
    display: flex
}

.rd-queue-dot {
    background: #d1173f;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: 1s ease-in-out infinite rd-queue-pulse
}

.rd-queue-big {
    font: italic 800 32px/1 var(--display);
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
    grid-area: big;
    margin: 3px 0 2px;
    overflow: hidden
}

.rd-queue-line {
    font: 800 11px/1.2 var(--body);
    letter-spacing: .06em;
    white-space: nowrap;
    text-overflow: ellipsis;
    grid-area: line;
    overflow: hidden
}

.rd-queue-cancel {
    color: #f7f6ef;
    height: 46px;
    font: italic 800 19px/1 var(--display);
    letter-spacing: .5px;
    text-transform: uppercase;
    background: #101418;
    border: 0;
    border-radius: 10px;
    grid-area: cancel;
    align-self: center;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    display: flex
}

.rd-queue-cancel:hover {
    background: #2d333b
}

.rd-queue-cancel:focus-visible {
    outline-offset: 3px;
    outline: 2px solid #101418
}

.rd-queue.is-found {
    background: #c6ff3d;
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "head""big""line"
}

.rd-queue-note {
    font: 800 12px/1.3 var(--body);
    letter-spacing: .06em;
    color: #f7f6ef;
    text-shadow: 0 1px 3px #000c;
    margin: 0 0 -6px;
    display: block
}

@keyframes rd-queue-pulse {
    50% {
        opacity: .2
    }
}

@media (prefers-reduced-motion:reduce) {
    .rd-queue-dot,.rd-one img {
        animation: none
    }
}

@media (min-width: 1061px) and (max-height:850px),(min-width:761px) and (orientation:landscape) and (min-height:501px) and (max-height:850px) {
    .rd-news-tile {
        height:128px
    }

    .bc-shell .bc-ride .rd-season-tile {
        height: 100px
    }

    .bc-shell .bc-ride .rd-tier-tile {
        height: 92px
    }

    .rd-tier b {
        font-size: 32px
    }

    .bc-shell .bc-ride .rd-modes>button.rd-mode {
        height: 94px
    }

    .bc-shell .bc-ride .rd-modes>button.rd-mode.is-ranked {
        height: 64px
    }

    .bc-shell .bc-ride .rd-start {
        height: 66px;
        font-size: 36px
    }

    .rd-queue {
        height: 66px
    }

    .rd-queue-big {
        font-size: 27px
    }

    .rd-play {
        gap: 12px;
        margin-bottom: -47px
    }
}

@media (min-width: 1061px) and (max-height:640px),(min-width:761px) and (orientation:landscape) and (min-height:501px) and (max-height:640px) {
    .rd-news-tile {
        height:104px
    }

    .bc-shell .bc-ride .rd-season-tile {
        height: 84px
    }

    .bc-shell .bc-ride .rd-tier-tile {
        height: 80px
    }

    .rd-tier b {
        font-size: 28px
    }

    .rd-tier-bar {
        bottom: 30px
    }

    .rd-tier-next {
        font-size: 13px;
        bottom: 9px
    }
}

@media (min-width: 1061px) and (max-height:600px) {
    .rd-play {
        margin-bottom:-66px
    }
}

@media (min-width: 1061px),(min-width:761px) and (orientation:landscape) and (min-height:501px) {
    .bc-shell .bc-ride {
        grid-template-rows:auto minmax(0,1fr);
        grid-template-columns: minmax(320px,370px) minmax(0,1fr);
        row-gap: 14px
    }

    .bc-shell .bc-ride .rd-stage {
        grid-area: 1/2/span 2;
        margin-right: -6.5vw
    }

    .bc-shell .bc-ride .rd-side {
        grid-area: 1/1;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        display: grid
    }

    .bc-shell .bc-ride .rd-side>:not(.rd-news-tile,.rd-season-tile) {
        grid-column: 1/-1
    }

    .bc-shell .bc-ride .rd-play {
        grid-area: 2/1
    }

    .bc-ready.bc-tab-ride .bc-footer {
        justify-content: flex-end
    }

    .bc-ready.bc-tab-ride .bc-footer-left {
        align-items: center;
        gap: 18px;
        display: flex
    }

    .bc-ready.bc-tab-ride .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-ready.bc-tab-ride .bc-discord>span {
        font: inherit;
        letter-spacing: 0;
        font-size: 12px
    }

    .bc-ready.bc-tab-ride .bc-discord:hover {
        color: #fff;
        background: 0 0
    }

    .bc-ready.bc-tab-ride .bc-discord>svg:last-child {
        display: none
    }

    .bc-shell .bc-ride .rd-news-tile,.bc-shell .bc-ride .rd-season-tile {
        height: 112px
    }

    .bc-shell .bc-ride .rd-side .rd-tile-copy {
        padding: 20px 11px 10px
    }

    .bc-shell .bc-ride .rd-side .rd-tile-copy b {
        font-size: 16px
    }
}

@media (min-width: 1061px) and (max-height:760px),(min-width:761px) and (orientation:landscape) and (min-height:501px) and (max-height:760px) {
    .bc-shell .bc-ride .rd-side>.rd-news-tile,.bc-shell .bc-ride .rd-side>.rd-season-tile {
        display:none
    }

    .bc-shell .bc-ride .rd-tier-tile {
        height: 76px
    }

    .bc-shell .bc-ride .rd-modes>button.rd-mode:not(.is-ranked) {
        height: 84px
    }

    .bc-shell .bc-ride .rd-start {
        height: 64px;
        font-size: 36px
    }
}

@media (min-width: 1061px) and (max-height:600px),(min-width:761px) and (orientation:landscape) and (min-height:501px) and (max-height:600px) {
    .bc-shell .bc-ride .rd-side>.rd-tier-tile {
        display:none
    }
}

@media (min-width: 1061px) and (max-height:900px),(min-width:761px) and (orientation:landscape) and (min-height:501px) and (max-height:900px) {
    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-side>:is(.rd-news-tile,.rd-season-tile) {
        display:none
    }
}

@media (min-width: 1061px) and (max-height:700px),(min-width:761px) and (orientation:landscape) and (min-height:501px) and (max-height:700px) {
    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-side>.rd-tier-tile {
        display:none
    }
}

.bc-shell .bc-ride .rd-pass {
    display: none
}

@media (min-width: 1061px) {
    .is-intro:has(.bc-ready) .topbar {
        pointer-events:none
    }

    .is-intro:has(.bc-ready) .topbar .wordmark {
        opacity: 0
    }

    .is-intro:has(.bc-ready) .topbar .top-actions {
        pointer-events: auto
    }

    .bc-ready .bc-lobby-content {
        padding-top: 34px
    }

    .bc-ready .bc-tabs {
        width: max-content;
        max-width: none
    }
}

@media (max-width: 1060px) {
    .is-intro:has(.bc-ready) .topbar .wordmark {
        clip-path:inset(50%);
        white-space: nowrap;
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden
    }

    .is-intro:has(.bc-ready) .topbar .top-actions {
        margin-left: auto
    }
}

@media (min-width: 1061px) and (max-width:1400px) {
    .bc-ready .bc-tabs button>svg,.bc-ready .bc-tabs .bc-pow-mark {
        display:none
    }
}

@media (min-width: 1061px) and (max-width:1180px) {
    .bc-ready .bc-tabs {
        --tab-gap:16px
    }
}

@media (max-width: 620px) {
    .bc-shell .bc-ride .rd-modes>button.rd-mode.is-ranked {
        height:64px
    }

    .rd-queue {
        height: 64px;
        padding-left: 16px
    }

    .rd-queue-big {
        font-size: 25px
    }

    .rd-queue-cancel {
        height: 40px;
        padding: 0 12px;
        font-size: 16px
    }

    .bc-shell .bc-ride .rd-modes {
        gap: 10px
    }

    .bc-shell .bc-ride .rd-mode-name b {
        font-size: 21px
    }

    .bc-shell .bc-ride .rd-pass {
        padding: 10px 58px 11px 30px
    }

    .bc-shell .bc-ride .rd-pass input,.bc-shell .bc-ride .rd-pass-name b {
        font-size: 19px
    }

    .bc-shell .bc-ride .rd-start {
        height: 60px;
        font-size: 30px
    }
}

@media (min-width: 761px) and (max-width:1060px) and (orientation:landscape) and (min-height:501px) {
    .bc-shell.bc-tab-ride .bc-lobby-content {
        padding-top:4px;
        overflow: visible
    }

    .bc-shell.bc-tab-ride .bc-tabs {
        margin-bottom: 18px
    }

    .bc-shell .bc-ride .rd-play {
        margin-bottom: 0
    }

    .bc-shell .bc-ride .rd-play>.rd-train-slot {
        order: 0;
        margin-bottom: 0
    }
}

@media (min-width: 761px) and (max-width:1060px) and (orientation:landscape) and (min-height:501px) and (max-height:860px) {
    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-side>.rd-tier-tile {
        display:none
    }
}

@media (max-width: 1060px) and (orientation:portrait),(max-width:760px) and (min-height:501px) {
    .bc-ready.bc-tab-ride .bc-shade {
        background:linear-gradient(#081a24e6 0%,#081a24a6 12%,#0000 30%),linear-gradient(#0000 40%,#081a24b3 66%,#081a24eb 100%)
    }

    .bc-tab-ride .bc-tabs {
        flex: none
    }

    .bc-shell .bc-ride {
        flex: 1 0 auto;
        grid-template-rows: minmax(240px,1fr) auto;
        grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
        gap: 16px 22px;
        max-width: none
    }

    .bc-shell .bc-ride .rd-stage {
        grid-area: 1/1/auto/-1
    }

    .bc-shell .bc-ride .rd-riders {
        bottom: 10px
    }

    .bc-shell .bc-ride .rd-side {
        grid-area: 2/1;
        grid-template-columns: 1fr 1fr;
        align-content: end;
        gap: 10px;
        padding: 0;
        display: grid
    }

    .bc-shell .bc-ride .rd-side>:not(.rd-news-tile,.rd-season-tile) {
        grid-column: 1/-1
    }

    .bc-shell .bc-ride .rd-play {
        grid-area: 2/2;
        gap: 12px;
        margin: 0
    }

    .bc-shell .bc-ride .rd-tier-tile {
        height: 92px
    }

    .bc-shell .bc-ride .rd-news-tile,.bc-shell .bc-ride .rd-season-tile {
        height: 112px
    }

    .bc-shell .bc-ride .rd-side .rd-tile-copy {
        padding: 20px 11px 10px
    }

    .bc-shell .bc-ride .rd-side .rd-tile-copy b {
        font-size: 16px
    }

    .bc-shell .bc-ride .rd-modes>button.rd-mode:not(.is-ranked) {
        height: 96px
    }

    .bc-shell .bc-ride .rd-modes>button.rd-mode.is-ranked {
        height: 64px
    }

    .bc-shell .bc-ride .rd-mode-name b {
        font-size: 21px
    }

    .bc-shell .bc-ride .rd-start {
        height: 66px;
        font-size: 36px
    }

    .rd-queue {
        height: 66px
    }

    .bc-shell .bc-ride .rd-play>:is(.cup-tile,.rd-train-slot) {
        order: 0;
        margin: 0
    }
}

@media (min-width: 701px) and (max-width:1060px) and (orientation:portrait),(min-width:701px) and (max-width:760px) and (min-height:501px) {
    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-side {
        display:none
    }

    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-play {
        grid-column: 1/-1;
        grid-template-rows: repeat(4,auto);
        grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
        align-content: end;
        gap: 0 22px;
        display: grid
    }

    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-play>* {
        grid-column: 2;
        margin-top: 12px
    }

    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-play>:is(.cup-tile,.rd-train-slot) {
        grid-area: 1/1/-1;
        align-self: end;
        margin: 0
    }

    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-play>.rd-modes {
        margin-top: 0
    }
}

@media (max-width: 700px) and (orientation:portrait),(max-width:700px) and (min-height:501px) {
    .bc-shell .bc-ride {
        flex-direction:column;
        gap: 12px;
        display: flex
    }

    .bc-shell .bc-ride .rd-stage {
        flex: auto;
        order: 1;
        min-height: 0;
        container-type: size
    }

    .bc-shell .bc-ride .rd-play {
        order: 2;
        gap: 10px
    }

    .bc-shell .bc-ride .rd-side {
        order: 3;
        align-content: start;
        height: 0;
        min-height: 0;
        margin-top: 6px
    }

    .bc-shell .bc-ride .rd-side:after {
        content: "";
        grid-column: 1/-1;
        height: 6px
    }

    .bc-shell .bc-ride .rd-modes>button.rd-mode:not(.is-ranked) {
        height: 80px
    }

    .bc-shell .bc-ride .rd-modes>button.rd-mode.is-ranked {
        height: 58px
    }

    .bc-shell .bc-ride .rd-start {
        height: 60px;
        font-size: 30px
    }

    .rd-queue {
        height: 60px
    }
}

@container (height<=90px) {
    .bc-shell .bc-ride .rd-riders {
        display: none
    }
}

@media (max-width: 700px) and (orientation:portrait),(max-width:700px) and (min-height:501px) {
    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-modes>button.rd-mode:not(.is-ranked) {
        height:72px
    }

    .bc-shell .bc-ride:has(.rd-play :is(.cup-tile,.rd-train)) .rd-modes>button.rd-mode.is-ranked {
        height: 52px
    }
}

@media (max-width: 620px) and (orientation:portrait),(max-width:620px) and (min-height:501px) {
    .bc-shell.bc-tab-ride .bc-lobby-content {
        bottom:calc(52px + env(safe-area-inset-bottom,0px))
    }

    .bc-shell.bc-tab-ride .bc-tabs {
        margin-bottom: 12px
    }

    .bc-ready.bc-tab-ride .bc-footer {
        bottom: max(10px,env(safe-area-inset-bottom,0px))
    }

    .bc-ready.bc-tab-ride .bc-footer-left {
        align-items: flex-start;
        gap: 14px;
        display: flex
    }

    .bc-ready.bc-tab-ride .bc-discord {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        color: #b9ced1;
        background: 0 0;
        border: 0;
        flex: none;
        gap: 6px;
        min-height: 0;
        padding: 0
    }

    .bc-ready.bc-tab-ride .bc-discord>span {
        font: inherit;
        letter-spacing: 0;
        font-size: 11px
    }

    .bc-ready.bc-tab-ride .bc-discord>svg:last-child {
        display: none
    }

    .bc-ready.bc-tab-ride .bc-site-links {
        flex-wrap: wrap;
        gap: 2px 13px
    }

    .bc-ready.bc-tab-ride .bc-site-links a {
        padding: 1px 0
    }
}

.rd-noscript {
    color: #d3e1e5;
    margin: 0;
    font-size: 13px;
    line-height: 1.5
}

.rd-noscript a {
    color: #fa8958
}

@media (max-height: 760px),(max-width:700px) {
    .bc-shell .bc-ride .rd-ranked-size {
        min-width:56px;
        height: 40px;
        font-size: 16px
    }

    .bc-shell .bc-ride .rd-ranked-size small {
        font-size: 7.5px
    }

    .bc-shell .bc-ride .rd-modes>button.rd-mode.is-ranked.has-sizes {
        padding-right: 134px
    }
}

.bc-shell .bc-ride .rd-modes>button.rd-mode.is-ranked.is-placed {
    height: auto;
    min-height: 76px;
    padding-left: 66px
}

.bc-shell .bc-ride .rd-mode.is-ranked.is-placed .rd-mode-name {
    min-width: 0;
    padding-right: 50px
}

.bc-shell .bc-ride .rd-mode.is-ranked .rd-icon.rd-rank-emblem {
    width: 44px;
    height: 44px;
    left: 12px
}

.bc-shell .bc-ride .rd-mode-name .rd-rank-next {
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    font-weight: 800
}

.bc-shell .bc-ride .rd-mode.is-private {
    --mode: radial-gradient(circle at 82% 20%,#43e3c8 0%,#0e8a80 45%,#032e2c 100%)
}

.bc-shell .bc-ride .rd-modes>button.rd-mode.is-private {
    padding-right: 108px
}

.bc-shell .bc-ride .rd-mode.is-private .rd-mode-name {
    min-width: 0;
    max-width: 100%
}

.bc-shell .bc-ride .rd-mode.is-private .rd-mode-name small {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.bc-shell .bc-ride .rd-mode.is-private .rd-mode-name small+small {
    margin-top: 2px
}

.rd-queue.is-private {
    background: #43e3c8
}

.bc-pow {
    scrollbar-width: none;
    flex-direction: column;
    min-width: 0;
    height: calc(100% - 70px);
    display: flex;
    overflow-y: auto
}

.bc-pow>* {
    flex: none
}

.bc-shell .bc-pow h1 {
    color: var(--pass-ink);
    font-size: clamp(44px,4.2vw,72px);
    rotate: none
}

.bc-shell .bc-pow h1 em {
    color: var(--pass-ink)
}

.bc-pow {
    --card-bg: var(--pass-panel);
    --card-ink: var(--pass-ink);
    --card-line: var(--pass-line);
    --card-tile: var(--pass-tile);
    --card-btn: var(--pass-ink);
    --card-btn-ink: var(--pass-on-ink);
    --card-btn-hover: var(--pass-hover)
}

.pw-status {
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border-radius: 10px;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin: 14px 0 30px;
    padding: 16px 20px;
    display: flex
}

.pw-have {
    align-items: center;
    gap: 12px;
    margin: 0;
    display: flex
}

.pw-have span {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.pw-have small {
    font: 700 12px/1 var(--body);
    letter-spacing: .12em
}

.pw-have b {
    font: 700 26px/1 var(--body);
    letter-spacing: .02em
}

.pw-what {
    font: 400 15px/1.45 var(--body);
    color: var(--card-copy);
    margin: 0
}

.bc-pow .pp-list {
    flex: 1 0 auto;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: clamp(12px,1.4vw,24px);
    max-height: 560px;
    margin: 0
}

.bc-pow .pp-pack {
    background: radial-gradient(circle at 50% 38%,#7cc4ff26,transparent 60%),var(--card-tile);
    padding: clamp(30px,4.5vh,52px) clamp(14px,1.6vw,28px) clamp(14px,1.6vw,28px)
}

.bc-pow .pp-pack .pow-icon {
    width: clamp(72px,14vh,150px);
    height: auto;
    margin: auto 0 clamp(10px,1.8vh,20px)
}

.bc-pow .pp-pack b {
    gap: clamp(7px,1vh,10px);
    margin-bottom: 22px;
    font-size: clamp(42px,6.6vh,78px)
}

.bc-pow .pp-pack b small {
    font-size: clamp(13px,1.5vh,16px)
}

.bc-pow .pp-pack>span {
    border-radius: 10px;
    margin-top: auto;
    padding: clamp(15px,2.1vh,22px) 0;
    font-size: clamp(18px,2.1vh,23px)
}

.bc-pow .pp-pack:disabled {
    cursor: default;
    opacity: .6;
    transform: none
}

.bc-pow .pp-pack:focus-visible {
    outline: 2px solid var(--pass-ink);
    outline-offset: 3px
}

.bc-pow .pp-tag {
    padding: 6px 12px;
    font-size: 13px;
    top: -12px
}

.bc-pow .gu-terms {
    text-align: left;
    margin-top: 22px
}

.bc-pow .gu-terms a {
    color: inherit
}

@media (min-width: 621px) and (min-height:501px) and (max-height:800px) {
    .bc-shell .bc-pow h1 {
        margin:4px 0 10px;
        font-size: 48px
    }

    .pw-status {
        margin: 6px 0 16px;
        padding: 12px 18px
    }

    .bc-pow .pp-pack {
        padding-top: 24px
    }

    .bc-pow .pp-pack .pow-icon {
        width: clamp(52px,10vh,150px)
    }

    .bc-pow .pp-pack b {
        margin-bottom: 14px;
        font-size: clamp(34px,5.6vh,78px)
    }

    .bc-pow .pp-pack>span {
        padding: 12px 0
    }

    .bc-pow .gu-terms {
        margin-top: 12px
    }
}

@media (max-width: 620px) {
    .bc-pow {
        height:auto;
        display: block;
        overflow: visible
    }

    .pw-status {
        margin: 10px 0 22px;
        padding: 14px 16px
    }

    .bc-pow .pp-list {
        grid-template-columns: 1fr;
        max-height: none
    }

    .bc-pow .pp-pack {
        flex-direction: row;
        gap: 12px;
        padding: 16px
    }

    .bc-pow .pp-pack .pow-icon {
        width: 40px;
        height: 40px;
        margin: 0
    }

    .bc-pow .pp-pack b {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        margin: 0 auto 0 0;
        font-size: 28px
    }

    .bc-pow .pp-pack>span {
        align-self: center;
        margin: 0;
        padding: 12px 18px;
        font-size: 16px
    }

    .bc-pow .pp-tag {
        left: auto;
        right: 14px;
        transform: none
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell .bc-shell .bc-pow {
        flex:1;
        height: auto;
        min-height: 0
    }

    .bc-pow .pp-list {
        flex: none
    }

    .pw-status {
        margin: 8px 0 18px;
        padding: 10px 16px
    }

    .pw-have b {
        font-size: 22px
    }

    .bc-pow .pp-pack {
        padding: 22px 12px 12px
    }

    .bc-pow .pp-pack .pow-icon {
        width: 44px;
        height: 44px;
        margin: 0 0 4px
    }

    .bc-pow .pp-pack b {
        margin: 0;
        font-size: 30px
    }

    .bc-pow .pp-pack>span {
        margin-top: 12px;
        padding: 11px 0;
        font-size: 16px
    }
}

@media (prefers-reduced-motion:reduce) {
    .bc-pow .pp-pack {
        transition: none
    }
}

.bc-shell .bc-replays.rp {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--pass-line) transparent;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: calc(100% - 70px);
    color: var(--pass-ink);
    flex-direction: column;
    display: flex;
    overflow-y: auto;
    container: rp/inline-size
}

.rp>* {
    flex: none
}

.rp button:focus-visible {
    outline: 2px solid var(--pass-ink);
    outline-offset: 2px
}

.rp-head {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 14px 24px;
    display: grid
}

.bc-shell .bc-replays.rp h1 {
    color: var(--pass-ink);
    margin: 0;
    font-size: clamp(44px,4.2vw,72px);
    rotate: none
}

.bc-shell .bc-replays.rp h1 em {
    color: var(--pass-ink)
}

.rp-meta {
    font: 700 12px/1.3 var(--body);
    letter-spacing: .14em;
    text-align: right;
    margin: 0 0 4px
}

.rp-kinds {
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border-radius: 12px;
    grid-column: 1/-1;
    justify-self: start;
    gap: 4px;
    padding: 4px;
    display: flex
}

.rp-kinds button {
    min-width: 136px;
    height: 40px;
    color: var(--pass-quiet);
    font: 700 13px/1 var(--body);
    letter-spacing: .14em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    padding: 0 20px;
    transition: background .15s,color .15s
}

.rp-kinds button:hover {
    color: var(--pass-ink)
}

.rp-kinds button[aria-selected=true] {
    background: var(--pass-ink);
    color: var(--pass-on-ink)
}

.rp-last {
    background: var(--pass-ink);
    width: 100%;
    color: var(--pass-on-ink);
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px 20px;
    transition: background .15s;
    display: flex
}

.rp-last:hover {
    background: var(--pass-hover)
}

.rp-last>span {
    flex-direction: column;
    flex: 1;
    gap: 6px;
    min-width: 0;
    display: flex
}

.rp-last b {
    font: 400 26px/1 var(--display)
}

.rp-last small {
    font: 700 12px/1.2 var(--body);
    letter-spacing: .14em;
    opacity: .7
}

.rp-section {
    margin-top: 26px
}

.rp-section h2 {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    color: var(--pass-quiet);
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    display: flex
}

.rp-section h2 span {
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    color: var(--pass-ink);
    font-variant-numeric: tabular-nums;
    border-radius: 99px;
    padding: 4px 8px
}

.rp-grid {
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.rp-card {
    background: var(--pass-panel);
    min-width: 0;
    box-shadow: inset 0 0 0 1px var(--pass-line);
    border-radius: 14px;
    transition: box-shadow .15s;
    position: relative;
    overflow: hidden
}

.rp-card:hover {
    box-shadow: inset 0 0 0 1.5px var(--pass-ink)
}

.rp-watch {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    display: flex
}

.rp-watch:disabled {
    cursor: progress
}

.rp-shot {
    aspect-ratio: 16/9;
    background: var(--pass-tile);
    display: block;
    position: relative;
    overflow: hidden
}

.rp-shot img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .3s;
    display: block
}

.rp-card:hover .rp-shot img {
    transform: scale(1.03)
}

.rp-tag,.rp-time {
    color: #f2f2ee;
    font: 800 11px/1 var(--body);
    letter-spacing: .12em;
    background: #0e0f11c7;
    border-radius: 6px;
    padding: 5px 8px;
    position: absolute
}

.rp-tag {
    top: 10px;
    left: 10px
}

.rp-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    bottom: 10px;
    right: 10px
}

.rp-play {
    color: #111;
    opacity: 0;
    background: #f2f2eeeb;
    border-radius: 50%;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: auto;
    transition: opacity .15s,transform .15s;
    display: grid;
    position: absolute;
    inset: 0;
    transform: scale(.9)
}

:is(.rp-card:hover .rp-play,.rp-watch:focus-visible .rp-play) {
    opacity: 1;
    transform: none
}

.rp-copy {
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 14px 16px 16px;
    display: flex
}

.rp-copy b {
    font: 800 22px/1 var(--body);
    font-variant-numeric: tabular-nums;
    align-items: baseline;
    gap: 5px;
    display: flex
}

.rp-copy b small {
    font: 700 11px/1 var(--body);
    letter-spacing: .12em;
    color: var(--pass-quiet)
}

.rp-where {
    font: 700 12px/1.3 var(--body);
    letter-spacing: .1em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.rp-copy>small {
    font: 600 12px/1.3 var(--body);
    letter-spacing: .08em;
    color: var(--pass-quiet);
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.rp-delete {
    color: #f2f2ee;
    cursor: pointer;
    background: #0e0f11b8;
    border: 0;
    border-radius: 9px;
    place-items: center;
    width: 36px;
    height: 36px;
    transition: background .15s;
    display: grid;
    position: absolute;
    top: 8px;
    right: 8px
}

:is(.rp-delete:hover,.rp-delete:focus-visible) {
    background: var(--pass-alert);
    color: #fff
}

.rp-card.is-asking {
    min-height: 100%;
    box-shadow: inset 0 0 0 1.5px var(--pass-alert);
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    animation: .18s cubic-bezier(.2,.8,.3,1) rp-ask;
    display: flex
}

.rp-card.is-asking fieldset {
    border: 0;
    min-width: 0;
    margin: 0;
    padding: 0
}

.rp-ask {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    display: flex
}

.rp-ask b {
    font: 400 24px/1.05 var(--display)
}

.rp-ask small {
    font: 700 11px/1.3 var(--body);
    letter-spacing: .1em;
    color: var(--pass-quiet);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.rp-choice {
    gap: 8px;
    margin-top: 16px;
    display: flex
}

.rp-choice button {
    height: 42px;
    font: 700 12px/1 var(--body);
    letter-spacing: .12em;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 7px;
    display: inline-flex
}

.rp-keep {
    background: var(--pass-tile);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    color: var(--pass-ink)
}

.rp-keep:hover {
    box-shadow: inset 0 0 0 1.5px var(--pass-ink)
}

.rp-confirm {
    color: #fff;
    background: #d93f45
}

.rp-confirm:hover {
    background: #e5484d
}

.rp-card.is-leaving {
    pointer-events: none;
    animation: .2s ease-in forwards rp-out
}

@keyframes rp-ask {
    0% {
        opacity: .4;
        transform: scale(.98)
    }
}

@keyframes rp-out {
    to {
        opacity: 0;
        transform: scale(.96)
    }
}

.rp-hint {
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    font: 500 14px/1.45 var(--body);
    color: var(--pass-quiet);
    border-radius: 12px;
    margin: 0;
    padding: 18px 20px
}

.rp-empty {
    background: var(--pass-panel);
    box-shadow: inset 0 0 0 1px var(--pass-line);
    font: 500 14px/1.45 var(--body);
    color: var(--pass-quiet);
    border-radius: 12px;
    margin-top: 22px;
    padding: 28px 24px
}

.rp-empty>svg {
    color: var(--pass-ink);
    margin-bottom: 14px;
    display: block
}

.rp-empty b {
    font: 400 34px/1 var(--display);
    color: var(--pass-ink);
    margin-bottom: 8px;
    display: block
}

.rp-empty p {
    margin: 0 0 16px
}

.rp-empty button {
    background: var(--pass-ink);
    height: 42px;
    color: var(--pass-on-ink);
    font: 700 13px/1 var(--body);
    letter-spacing: .14em;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    display: inline-flex
}

.rp-empty button:hover {
    background: var(--pass-hover)
}

.rp-error {
    font: 600 13px/1.4 var(--body);
    color: var(--pass-alert);
    margin: 16px 0 0
}

@container rp (width<=560px) {
    .rp-meta {
        text-align: left;
        grid-area: 2/1/auto/-1;
        margin: 0
    }

    .rp-kinds {
        justify-self: stretch
    }

    .rp-kinds button {
        flex: 1;
        min-width: 0;
        padding: 0 10px
    }

    .rp-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 10px
    }

    .rp-watch {
        flex-direction: row;
        align-items: stretch
    }

    .rp-shot {
        aspect-ratio: auto;
        flex: 0 0 128px;
        min-height: 76px
    }

    .rp-tag {
        padding: 4px 6px;
        font-size: 10px;
        top: 6px;
        left: 6px
    }

    .rp-time {
        padding: 4px 6px;
        font-size: 10px;
        bottom: 6px;
        right: 6px
    }

    .rp-play {
        display: none
    }

    .rp-copy {
        justify-content: center;
        gap: 5px;
        padding: 10px 48px 10px 14px
    }

    .rp-copy b {
        font-size: 19px
    }

    .rp-delete {
        color: var(--pass-quiet);
        background: 0 0;
        top: 50%;
        right: 6px;
        transform: translateY(-50%)
    }

    .rp-last b {
        font-size: 22px
    }
}

@media (max-width: 620px) {
    .bc-shell .bc-replays.rp {
        height:auto;
        overflow: visible
    }

    .bc-tab-replays .bc-lobby-content {
        bottom: max(12px,env(safe-area-inset-bottom))
    }

    .bc-shell .bc-replays.rp h1 {
        font-size: clamp(34px,10vw,48px)
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell .bc-shell .bc-replays.rp {
        flex:1;
        height: auto;
        min-height: 0;
        overflow-y: auto
    }

    .bc-shell .bc-replays.rp h1 {
        font-size: 28px
    }

    .rp-head {
        grid-template-columns: auto auto minmax(0,1fr);
        align-items: center;
        gap: 8px 14px
    }

    .rp-kinds {
        grid-area: 1/2;
        padding: 3px
    }

    .rp-kinds button {
        min-width: 0;
        height: 32px;
        padding: 0 14px;
        font-size: 12px
    }

    .rp-meta {
        grid-area: 1/3;
        margin: 0;
        font-size: 11px
    }

    .rp-last {
        margin-top: 10px;
        padding: 10px 14px
    }

    .rp-last b {
        font-size: 20px
    }

    .rp-section {
        margin-top: 14px
    }

    .rp-section h2 {
        margin-bottom: 8px
    }

    .rp-grid {
        grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
        gap: 10px
    }

    .rp-copy {
        gap: 5px;
        padding: 10px 12px 12px
    }

    .rp-copy b {
        font-size: 18px
    }

    .rp-empty {
        margin-top: 10px;
        padding: 18px
    }

    .rp-empty b {
        font-size: 26px
    }
}

@media (prefers-reduced-motion:reduce) {
    .rp-card,.rp-card *,.rp-card.is-asking,.rp-card.is-leaving {
        transition: none;
        animation: none
    }

    .rp-card.is-leaving {
        opacity: 0
    }
}

.game-shell {
    --pc-w: clamp(330px,22vw,500px)
}

.party-chat {
    color: var(--card-ink);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
    font-size: clamp(14px,.36vw + 9.4px,18px)
}

.pc-panel {
    border: 1px solid var(--card-line);
    background: var(--card-glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    flex-direction: column;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px #00000059
}

.party-chat.is-dock {
    z-index: 6;
    width: var(--pc-w);
    flex-direction: column;
    max-height: calc(100% - 184px);
    display: flex;
    position: absolute;
    bottom: 72px;
    right: 6.5%
}

.party-chat.is-dock .pc-panel {
    max-height: 100%
}

.party-chat.is-dock .pc-log {
    min-height: 6em;
    max-height: 24em
}

.game-shell:has(.party-chat.is-dock) .bc-shell.bc-tab-ride .bc-ride .rd-stage {
    margin-right: calc(var(--pc-w) + 24px)
}

.party-chat.is-pill {
    z-index: 6;
    max-width: min(var(--pc-w),calc(100% - 13%));
    border: 1px solid var(--card-line);
    background: var(--card-glass);
    height: 2.9em;
    color: var(--card-ink);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 999px;
    align-items: center;
    gap: .55em;
    padding: 0 1em;
    transition: background .15s;
    display: flex;
    position: absolute;
    bottom: 60px;
    right: 6.5%;
    box-shadow: 0 12px 30px #00000040
}

.party-chat.is-pill:hover {
    background: var(--card-bg)
}

.party-chat.is-pill>b {
    font: 700 .74em/1 var(--body);
    letter-spacing: .12em;
    flex: none
}

.pc-last {
    min-width: 0;
    color: var(--card-copy);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: .88em;
    overflow: hidden
}

.pc-last b {
    color: var(--card-ink);
    font-weight: 600
}

.pc-badge {
    background: var(--card-alert);
    min-width: 1.45em;
    height: 1.45em;
    color: var(--card-bg);
    font: 700 .78em/1.45em var(--body);
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-radius: 1em;
    flex: none;
    padding: 0 .4em;
    font-style: normal
}

.party-chat.is-sheet {
    z-index: 20;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    color: var(--card-ink);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    display: flex;
    position: absolute;
    inset: 0
}

.pc-scrim {
    background: var(--card-scrim);
    cursor: default;
    border: 0;
    padding: 0;
    animation: .2s ease-out pc-fade;
    position: absolute;
    inset: 0
}

.party-chat.is-sheet .pc-panel {
    width: 100%;
    max-width: 680px;
    height: min(80dvh,720px);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    animation: .26s cubic-bezier(.2,.8,.3,1) pc-up
}

@media (min-width: 1061px),(min-width:761px) and (orientation:landscape) and (min-height:501px) {
    .party-chat.is-sheet {
        justify-content:flex-end;
        align-items: flex-start;
        padding: 96px 6.5% 72px
    }

    .party-chat.is-sheet .pc-scrim {
        background: 0 0
    }

    .party-chat.is-sheet .pc-panel {
        width: var(--pc-w);
        border: 1px solid var(--card-line);
        background: var(--card-glass);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-radius: 18px;
        height: min(680px,100%);
        padding: 0;
        animation: .22s cubic-bezier(.2,.8,.3,1) pc-drop
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .party-chat.is-sheet {
        justify-content:flex-end;
        align-items: stretch;
        padding: 0
    }

    .party-chat.is-sheet .pc-scrim {
        background: var(--card-scrim)
    }

    .party-chat.is-sheet .pc-panel {
        border: 0;
        border-left: 1px solid var(--card-line);
        width: min(440px,56vw);
        height: auto;
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
        background: var(--card-bg);
        border-radius: 0;
        animation: .24s cubic-bezier(.2,.8,.3,1) pc-in
    }

    .party-chat .pc-head {
        padding-top: max(.6em,env(safe-area-inset-top))
    }
}

.game-shell[data-soft-keyboard] .party-chat.is-sheet {
    top: var(--keyboard-view-top);
    height: var(--keyboard-view-height);
    position: fixed;
    bottom: auto
}

.game-shell[data-soft-keyboard] .party-chat.is-sheet .pc-panel {
    border-radius: 0;
    height: 100%;
    max-height: none;
    padding-bottom: 0
}

.game-shell[data-soft-keyboard] .party-chat.is-dock {
    top: calc(var(--keyboard-view-top) + 8px);
    max-height: calc(var(--keyboard-view-height) - 16px);
    position: fixed;
    bottom: auto
}

.game-shell[data-soft-keyboard] .party-chat :is(.pc-quick,.pc-crew) {
    display: none
}

.pc-head {
    border-bottom: 1px solid var(--card-line);
    flex-wrap: wrap;
    flex: none;
    align-items: center;
    gap: .15em .5em;
    padding: .75em .6em .6em 1em;
    display: flex
}

.pc-head-icon {
    color: var(--card-quiet);
    flex: none
}

.pc-head h2 {
    min-width: 0;
    color: var(--card-ink);
    font: 400 1.3em/1 var(--display);
    letter-spacing: .01em;
    flex: 1;
    margin: 0
}

.pc-crew {
    width: 100%;
    color: var(--card-quiet);
    font: 600 .72em/1.3 var(--body);
    letter-spacing: .1em;
    text-transform: uppercase;
    flex-wrap: wrap;
    order: 9;
    gap: .25em .8em;
    margin: .1em 0 0 1.75em;
    display: flex
}

.pc-crew span {
    align-items: center;
    gap: .4em;
    display: inline-flex
}

.pc-crew span:before {
    content: "";
    width: .55em;
    height: .55em;
    box-shadow: inset 0 0 0 1.5px var(--card-quiet);
    border-radius: 50%
}

.pc-crew span.is-here:before {
    background: var(--card-ok);
    box-shadow: none
}

.pc-crew:empty {
    display: none
}

.pc-icon {
    width: 2.3em;
    height: 2.3em;
    color: var(--card-quiet);
    background: 0 0;
    border: 0;
    border-radius: .6em;
    flex: none;
    place-items: center;
    padding: 0;
    transition: background .15s,color .15s;
    display: grid
}

.pc-icon:hover,.pc-icon[aria-pressed=true] {
    background: var(--card-tile);
    color: var(--card-ink)
}

.pc-log {
    overflow-anchor: none;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--card-line) transparent;
    -webkit-user-select: text;
    user-select: text;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: .5em .9em .7em;
    list-style: none;
    display: flex;
    overflow-y: auto
}

.pc-msg {
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-start;
    max-width: 100%;
    margin-top: .18em;
    display: flex
}

.pc-log>li:first-child {
    margin-top: auto
}

.pc-msg.is-first {
    margin-top: .7em
}

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

.pc-name {
    color: var(--card-quiet);
    font: 700 .7em/1.2 var(--body);
    letter-spacing: .1em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    margin: 0 0 .2em .9em;
    padding: 0
}

.pc-name:hover,.pc-name[aria-expanded=true] {
    color: var(--card-ink)
}

.pc-bubble {
    background: color-mix(in srgb,var(--card-ink) 13%,transparent);
    max-width: 84%;
    color: var(--card-ink);
    overflow-wrap: anywhere;
    border-radius: 1.15em;
    padding: .45em .85em .5em;
    font-size: .95em;
    line-height: 1.32
}

.is-them.is-last .pc-bubble {
    border-bottom-left-radius: .35em
}

.is-me .pc-bubble {
    background: var(--card-btn);
    color: var(--card-btn-ink)
}

.is-me.is-last .pc-bubble {
    border-bottom-right-radius: .35em
}

.pc-bubble.is-emoji {
    background: 0 0;
    padding: 0 .1em;
    font-size: 2em;
    line-height: 1.1
}

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

.pc-empty {
    color: var(--card-quiet);
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: .3em;
    margin: auto;
    padding: 1.4em .5em;
    font-size: .88em;
    display: flex
}

.pc-empty b {
    color: var(--card-ink);
    font-size: 1.12em;
    font-weight: 600
}

.pc-notice {
    max-width: 92%;
    color: var(--card-alert);
    text-align: center;
    align-self: center;
    margin: .8em 0 .1em;
    font-size: .78em;
    line-height: 1.35
}

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

.pc-quick::-webkit-scrollbar {
    display: none
}

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

.pc-quick button {
    background: color-mix(in srgb,var(--card-ink) 10%,transparent);
    height: 2.15em;
    color: var(--card-ink);
    font: 600 .82em/1 var(--body);
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    flex: none;
    padding: 0 .85em;
    transition: background .15s
}

.pc-quick button:hover {
    background: color-mix(in srgb,var(--card-ink) 18%,transparent)
}

.pc-compose {
    flex: none;
    align-items: center;
    gap: .5em;
    margin: 0;
    padding: .6em .9em .8em;
    display: flex;
    position: relative
}

.pc-compose input {
    background: color-mix(in srgb,var(--card-ink) 7%,transparent);
    min-width: 0;
    height: 2.75em;
    box-shadow: inset 0 0 0 1px var(--card-line);
    color: var(--card-ink);
    font: 500 1em/1 var(--body);
    -webkit-user-select: text;
    user-select: text;
    border: 0;
    border-radius: 999px;
    outline: none;
    flex: 1;
    padding: 0 3.1em 0 1em
}

.pc-compose input::placeholder {
    color: var(--card-quiet)
}

.pc-compose input:focus {
    box-shadow: inset 0 0 0 2px var(--card-ink)
}

.pc-send {
    background: var(--card-btn);
    width: 2.15em;
    height: 2.15em;
    color: var(--card-btn-ink);
    border: 0;
    border-radius: 50%;
    place-items: center;
    padding: 0;
    transition: opacity .15s,transform .15s;
    display: grid;
    position: absolute;
    right: 1.25em
}

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

.pc-count {
    color: var(--card-alert);
    font-variant-numeric: tabular-nums;
    font-size: .72em;
    position: absolute;
    right: 3.7em
}

.pc-hint {
    color: var(--card-quiet);
    align-items: center;
    gap: .5em;
    margin: 0;
    font-size: .88em;
    display: flex
}

.pc-hint button {
    color: var(--card-ink);
    font: 600 1em/1 var(--body);
    background: 0 0;
    border: 0;
    padding: 0;
    text-decoration: underline
}

.party-chat button:focus-visible {
    outline: 2px solid var(--card-ink);
    outline-offset: 2px
}

.party-chat .pc-compose input:focus-visible {
    outline: none
}

.pc-settings {
    flex: 1;
    min-height: 0;
    padding: .9em 1em 1em;
    overflow-y: auto
}

.pc-settings fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.pc-settings legend,.pc-settings-head {
    color: var(--card-quiet);
    font: 700 .7em/1 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 .5em;
    padding: 0
}

.pc-settings-head {
    margin-top: 1.2em
}

.pc-segmented {
    background: var(--card-tile);
    border-radius: .8em;
    gap: .25em;
    padding: .25em;
    display: flex
}

.pc-segmented button {
    height: 2.3em;
    color: var(--card-quiet);
    font: 700 .78em/1 var(--body);
    letter-spacing: .06em;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    border-radius: .6em;
    flex: 1;
    padding: 0 .5em
}

.pc-segmented button[aria-pressed=true] {
    background: var(--card-btn);
    color: var(--card-btn-ink)
}

.pc-settings ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.pc-settings li {
    border-bottom: 1px solid var(--card-line);
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    min-height: 2.6em;
    display: flex
}

.pc-settings li button {
    background: var(--card-tile);
    color: var(--card-ink);
    font: 600 .8em/1 var(--body);
    border: 0;
    border-radius: .6em;
    padding: .4em .8em
}

.pc-settings-empty {
    color: var(--card-quiet);
    margin: 0;
    font-size: .9em
}

.pc-settings-foot {
    color: var(--card-quiet);
    margin: 1.2em 0 0;
    font-size: .78em;
    line-height: 1.4
}

.party-chat .pocket-sheet {
    z-index: 3;
    flex-direction: column;
    justify-content: flex-end;
    padding: .6em;
    display: flex;
    position: absolute;
    inset: 0
}

.party-chat .sheet-scrim {
    background: var(--card-scrim);
    cursor: default;
    border: 0;
    padding: 0;
    animation: .2s ease-out pc-fade;
    position: absolute;
    inset: 0
}

.party-chat .sheet-body {
    flex-direction: column;
    gap: .45em;
    animation: .24s cubic-bezier(.2,.8,.3,1) pc-up;
    display: flex;
    position: relative
}

.party-chat .sheet-group {
    background: var(--card-bg);
    min-width: 0;
    box-shadow: inset 0 0 0 1px var(--card-line);
    border: 0;
    border-radius: .9em;
    flex-direction: column;
    margin: 0;
    padding: 0;
    display: flex;
    overflow: hidden
}

.party-chat .sheet-group legend {
    float: left;
    width: 100%;
    color: var(--card-quiet);
    font: 700 .74em/1.2 var(--body);
    letter-spacing: .08em;
    text-align: center;
    padding: .7em 1em
}

.party-chat .sheet-group button {
    height: 2.9em;
    color: var(--card-ink);
    font: 600 .92em/1 var(--body);
    box-shadow: inset 0 1px 0 var(--card-line);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: .5em;
    padding: 0;
    display: flex
}

.party-chat .sheet-group button:hover,.party-chat .sheet-cancel:hover {
    background: var(--card-tile)
}

.party-chat .sheet-group .is-destructive {
    color: var(--card-alert)
}

.party-chat .sheet-cancel {
    background: var(--card-bg);
    height: 2.9em;
    box-shadow: inset 0 0 0 1px var(--card-line);
    color: var(--card-ink);
    font: 700 .92em/1 var(--body);
    border: 0;
    border-radius: .9em
}

.party-chat-peek {
    z-index: 19;
    top: calc(env(safe-area-inset-top) + 150px);
    border: 1px solid var(--card-line);
    background: var(--card-glass);
    max-width: min(92vw,460px);
    color: var(--card-ink);
    font: 500 15px/1.25 var(--body);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 999px;
    align-items: center;
    gap: .55em;
    padding: .7em 1.1em;
    animation: .3s cubic-bezier(.2,.8,.3,1) pc-peek;
    display: flex;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 14px 34px #00000059
}

.party-chat-peek>svg {
    color: var(--card-quiet);
    flex: none
}

.party-chat-peek b {
    flex: none;
    font-weight: 700
}

.party-chat-peek span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

@media (orientation: landscape) and (max-height:500px) {
    .party-chat-peek {
        top:calc(env(safe-area-inset-top) + 88px);
        font-size: 14px
    }
}

@media (min-width: 1061px) {
    .party-chat-peek {
        top:104px
    }
}

@keyframes pc-up {
    0% {
        opacity: .6;
        transform: translateY(28px)
    }
}

@keyframes pc-in {
    0% {
        opacity: .6;
        transform: translate(28px)
    }
}

@keyframes pc-drop {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }
}

@keyframes pc-fade {
    0% {
        opacity: 0
    }
}

@keyframes pc-peek {
    0% {
        opacity: 0;
        transform: translate(-50%,-12px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .party-chat .pc-panel,.party-chat .pc-scrim,.party-chat .sheet-body,.party-chat-peek {
        animation: none
    }
}

.lb {
    --lb-panel: #141518;
    --lb-tile: #1b1c1f;
    --lb-ink: #f2f2ee;
    --lb-on-ink: #111;
    --lb-hover: #fff;
    --lb-line: #ffffff1c;
    --lb-quiet: #8d8d92;
    --lb-alert: #ff7b7b;
    --lb-good: #86e0a2;
    --lb-you: #ffffff0f;
    --lb-tint: 16%;
    --lb-gold: #e9b949;
    --lb-silver: #c3cad2;
    --lb-bronze: #d08f5d;
    min-height: 0;
    color: var(--lb-ink);
    font-family: var(--body);
    flex-direction: column;
    flex: 1;
    display: flex;
    container: lb/inline-size
}

.bc-shell .lb {
    --lb-panel: var(--pass-panel);
    --lb-tile: var(--pass-tile);
    --lb-ink: var(--pass-ink);
    --lb-on-ink: var(--pass-on-ink);
    --lb-hover: var(--pass-hover);
    --lb-line: var(--pass-line);
    --lb-quiet: var(--pass-quiet);
    --lb-alert: var(--pass-alert);
    --lb-tint: var(--pass-tint)
}

.game-shell[data-menus=light] .bc-shell .lb {
    --lb-good: #17803d;
    --lb-you: #1d21270b
}

.lb button:focus-visible {
    outline: 2px solid var(--lb-ink);
    outline-offset: 2px
}

.lb-head {
    flex: none;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 14px 24px;
    display: grid
}

.bc-shell .lb h1 {
    color: var(--lb-ink);
    margin: 0;
    font-size: clamp(44px,4.2vw,72px);
    rotate: none
}

.bc-shell .lb h1 em {
    color: var(--lb-ink)
}

.lb-meta {
    font: 700 12px/1.3 var(--body);
    letter-spacing: .14em;
    text-align: right;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin: 0 0 4px;
    display: flex
}

.lb-what {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px .7em;
    display: flex
}

.lb-what>span+span:before {
    content: "·";
    margin-right: .7em
}

.lb-refresh {
    background: var(--lb-panel);
    width: 36px;
    height: 36px;
    box-shadow: inset 0 0 0 1px var(--lb-line);
    color: var(--lb-ink);
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    flex: none;
    place-items: center;
    display: grid
}

.lb-refresh:hover:not(:disabled) {
    background: var(--lb-tile)
}

.lb-refresh:disabled {
    opacity: .45;
    cursor: default
}

.lb-halves {
    background: var(--lb-panel);
    box-shadow: inset 0 0 0 1px var(--lb-line);
    border-radius: 12px;
    grid-column: 1/-1;
    justify-self: start;
    gap: 4px;
    padding: 4px;
    display: flex
}

.lb-halves button {
    min-width: 136px;
    height: 40px;
    color: var(--lb-quiet);
    font: 700 13px/1 var(--body);
    letter-spacing: .14em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    padding: 0 20px;
    transition: background .15s,color .15s
}

.lb-halves button:hover {
    color: var(--lb-ink)
}

.lb-halves button[aria-selected=true] {
    background: var(--lb-ink);
    color: var(--lb-on-ink)
}

.lb-body {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lb-line) transparent;
    flex-direction: column;
    flex: 1;
    gap: 16px;
    min-height: 0;
    margin-top: 18px;
    display: flex;
    overflow-y: auto
}

.lb-body>* {
    flex: none
}

.lb-side {
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    display: flex
}

.lb-main {
    min-width: 0;
    padding-bottom: 12px;
    container: lbmain/inline-size
}

.lb-picks {
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 6px;
    min-width: 0;
    padding: 1px;
    display: flex;
    overflow-x: auto
}

.lb-picks::-webkit-scrollbar {
    display: none
}

.lb-picks button {
    background: var(--lb-panel);
    height: 40px;
    box-shadow: inset 0 0 0 1px var(--lb-line);
    color: var(--lb-ink);
    font: 700 13px/1 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    scroll-snap-align: start;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    flex: none;
    align-items: center;
    padding: 0 15px;
    transition: background .15s;
    display: flex
}

.lb-picks button:hover {
    background: var(--lb-tile)
}

.lb-picks button[aria-selected=true] {
    background: var(--lb-ink);
    color: var(--lb-on-ink);
    box-shadow: none
}

.lb-seasons {
    background: var(--lb-panel);
    box-shadow: inset 0 0 0 1px var(--lb-line);
    border: 0;
    border-radius: 11px;
    gap: 4px;
    margin: 0;
    padding: 4px;
    display: flex
}

.lb-seasons button {
    height: 34px;
    color: var(--lb-quiet);
    font: 700 12px/1 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex: 1;
    padding: 0 12px
}

.lb-seasons button:hover:not(:disabled) {
    color: var(--lb-ink)
}

.lb-seasons button[aria-pressed=true] {
    color: var(--lb-ink);
    box-shadow: inset 0 0 0 1.5px var(--lb-ink)
}

.lb-seasons button:disabled {
    opacity: .4;
    cursor: default
}

.lb-you {
    background: var(--lb-panel);
    box-shadow: inset 0 0 0 1px var(--lb-line);
    border-radius: 12px;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
    display: flex
}

.lb-you>small {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    color: var(--lb-quiet)
}

.lb-you>p {
    font: 500 14px/1.45 var(--body);
    color: var(--lb-quiet);
    margin: 0
}

.lb-you-place {
    align-items: baseline;
    gap: 10px;
    margin: 2px 0 0;
    display: flex
}

.lb-you-place b {
    font: 400 52px/1 var(--display)
}

.lb-you-place span {
    font: 700 12px/1 var(--body);
    letter-spacing: .14em;
    color: var(--lb-quiet);
    font-variant-numeric: tabular-nums
}

.lb-you dl {
    gap: 6px;
    margin: 4px 0 0;
    display: grid
}

.lb-you dl>div {
    border-top: 1px solid var(--lb-line);
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 7px;
    display: flex
}

.lb-you dt {
    font: 700 11px/1.2 var(--body);
    letter-spacing: .14em;
    color: var(--lb-quiet)
}

.lb-you dd {
    font: 700 15px/1.2 var(--body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin: 0
}

.lb-you :is(.lb-pow-chip,.lb-no-prize) {
    place-self: flex-start start
}

.lb-you-rank {
    align-items: center;
    gap: 12px;
    min-width: 0;
    display: flex
}

.lb-you-rank>span {
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    display: flex
}

.lb-you-rank b {
    font: 400 26px/1 var(--display)
}

.lb-you-rank b+span {
    font: 700 13px/1 var(--body);
    letter-spacing: .1em;
    color: var(--lb-quiet);
    font-variant-numeric: tabular-nums
}

.lb-step-bar {
    background: var(--lb-line);
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 3px;
    width: 100%;
    height: 6px;
    display: block;
    overflow: hidden
}

.lb-step-bar::-webkit-progress-bar {
    background: var(--lb-line);
    border-radius: 3px
}

.lb-step-bar::-webkit-progress-value {
    background: var(--lb-ink);
    border-radius: 3px
}

.lb-step-bar::-moz-progress-bar {
    background: var(--lb-ink);
    border-radius: 3px
}

.lb-you-next {
    font: 700 12px/1.2 var(--body);
    letter-spacing: .12em;
    margin: 0
}

.lb-rule {
    font: 500 13px/1.5 var(--body);
    color: var(--lb-quiet);
    margin: 0;
    padding: 0 4px
}

.lb-proof {
    background: var(--lb-panel);
    box-shadow: inset 0 0 0 1px var(--lb-line);
    font: 600 13px/1.4 var(--body);
    color: var(--lb-quiet);
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    display: flex
}

.lb-proof.is-verified {
    color: var(--lb-good)
}

.lb-proof.is-refused {
    color: var(--lb-alert)
}

.lb-proof.is-held {
    color: var(--lb-ink)
}

.lb-podium {
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: end;
    gap: 14px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: grid
}

.lb-step {
    --medal: var(--lb-silver);
    background: var(--lb-panel);
    min-width: 0;
    min-height: 212px;
    box-shadow: inset 0 0 0 1px var(--lb-line);
    text-align: center;
    border-radius: 14px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 46px 14px 16px;
    display: flex;
    position: relative
}

.lb-step.is-place-1 {
    --medal: var(--lb-gold);
    order: 2;
    min-height: 242px
}

.lb-step.is-place-2 {
    order: 1
}

.lb-step.is-place-3 {
    --medal: var(--lb-bronze);
    order: 3
}

.lb-step.is-standard {
    --hue: #6f8f98
}

.lb-step.is-rare {
    --hue: #2560d8
}

.lb-step.is-epic {
    --hue: #7a33d6
}

.lb-step.is-legendary {
    --hue: #f08a1c
}

.lb-step.is-mythic {
    --hue: #c3134a
}

.lb-step:is(.is-standard,.is-rare,.is-epic,.is-legendary,.is-mythic) {
    background: linear-gradient(var(--hue),var(--hue)) 0 100%/100% 4px no-repeat,color-mix(in srgb,var(--hue) var(--lb-tint),var(--lb-panel))
}

.lb-step.is-you {
    box-shadow: inset 0 0 0 2px var(--lb-ink)
}

.lb-medal {
    background: var(--medal);
    color: #15171a;
    font: 800 11px/1 var(--body);
    letter-spacing: .12em;
    border-radius: 7px;
    padding: 5px 9px;
    position: absolute;
    top: 14px;
    left: 14px
}

.lb-step>img {
    aspect-ratio: 1;
    object-fit: contain;
    width: min(60%,120px);
    height: auto;
    margin: auto 0 4px
}

.lb-step.is-place-1>img {
    width: min(68%,150px)
}

.lb-step .pow-icon {
    width: min(42%,84px);
    margin: auto 0 8px
}

.lb-step.is-place-1 .pow-icon {
    width: min(50%,104px)
}

.lb-step .rank-emblem {
    aspect-ratio: 1;
    width: clamp(56px,42%,96px);
    height: auto;
    margin: auto 0 6px
}

.lb-step.is-place-1 .rank-emblem {
    width: clamp(64px,50%,120px)
}

.lb-step .lb-name {
    max-width: 100%;
    font: 700 15px/1.25 var(--body);
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex
}

.lb-step .lb-score {
    font: 800 26px/1 var(--body);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    align-items: baseline;
    gap: 5px;
    display: flex
}

.lb-step.is-place-1 .lb-score {
    font-size: 30px
}

.lb-step .lb-score small {
    font: 700 12px/1 var(--body);
    letter-spacing: .1em;
    color: var(--lb-quiet)
}

.lb-prize {
    max-width: 100%;
    font: 700 11px/1.35 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lb-quiet)
}

.lb-step .lb-watch {
    margin-top: 8px
}

.lb-cols,.lb-row {
    grid-template-columns: 48px minmax(0,1fr) 72px minmax(96px,auto) 104px;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    display: grid
}

.lb-cols.no-watch,.lb-list.no-watch .lb-row {
    grid-template-columns: 48px minmax(0,1fr) 72px minmax(96px,auto)
}

.lb-cols.is-ranked,.lb-list.is-ranked .lb-row {
    grid-template-columns: 48px minmax(0,1fr) minmax(150px,210px) 96px minmax(72px,auto)
}

.lb-cols {
    font: 700 11px/1 var(--body);
    letter-spacing: .14em;
    color: var(--lb-quiet);
    padding-bottom: 9px
}

.lb-cols>span:nth-child(4),.lb-cols.is-ranked>span:nth-child(5) {
    text-align: right
}

.lb-list {
    background: var(--lb-panel);
    box-shadow: inset 0 0 0 1px var(--lb-line);
    border-radius: 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

.lb-row {
    border-top: 1px solid var(--lb-line);
    min-height: 54px;
    transition: background .12s
}

.lb-row:first-child {
    border-top: 0;
    border-radius: 12px 12px 0 0
}

.lb-row:last-child {
    border-radius: 0 0 12px 12px
}

.lb-row:only-child {
    border-radius: 12px
}

.lb-row:hover {
    background: var(--lb-you)
}

.lb-row.is-you {
    background: var(--lb-you);
    box-shadow: inset 3px 0 0 var(--lb-ink)
}

.lb-rank {
    font: 700 15px/1 var(--body);
    font-variant-numeric: tabular-nums;
    color: var(--lb-quiet)
}

.lb-row.is-you .lb-rank {
    color: var(--lb-ink)
}

.lb-row .lb-name {
    min-width: 0;
    font: 600 15px/1.2 var(--body);
    align-items: center;
    gap: 8px;
    display: flex
}

.lb-handle {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.lb-name small {
    background: var(--lb-ink);
    color: var(--lb-on-ink);
    font: 800 10px/1 var(--body);
    letter-spacing: .1em;
    border-radius: 5px;
    flex: none;
    padding: 3px 6px
}

.lb-row time {
    font: 500 14px/1 var(--body);
    font-variant-numeric: tabular-nums;
    color: var(--lb-quiet)
}

.lb-row .lb-score {
    text-align: right;
    font: 800 17px/1 var(--body);
    font-variant-numeric: tabular-nums
}

.lb-row .lb-record {
    font: 600 14px/1 var(--body);
    font-variant-numeric: tabular-nums;
    color: var(--lb-quiet);
    white-space: nowrap
}

.lb-watch {
    height: 32px;
    box-shadow: inset 0 0 0 1px var(--lb-line);
    color: var(--lb-ink);
    font: 700 11px/1 var(--body);
    letter-spacing: .12em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    justify-content: center;
    justify-self: end;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    transition: background .15s,color .15s;
    display: inline-flex
}

.lb-watch:hover:not(:disabled) {
    background: var(--lb-ink);
    color: var(--lb-on-ink);
    box-shadow: none
}

.lb-watch:disabled {
    opacity: .5;
    cursor: default
}

.lb-pow-chip,.lb-no-prize {
    background: var(--lb-tile);
    box-shadow: inset 0 0 0 1px var(--lb-line);
    color: var(--lb-ink);
    font: 700 12px/1 var(--body);
    font-variant-numeric: tabular-nums;
    white-space: pre;
    border-radius: 99px;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 4px;
    font-style: normal;
    display: inline-flex
}

.lb-pow-chip .pow-icon {
    width: 16px;
    height: 16px
}

.lb-no-prize {
    color: var(--lb-quiet);
    letter-spacing: .08em;
    padding: 4px 8px;
    font-size: 11px
}

.lb-tier .rank-chip {
    max-width: 100%
}

.lb-gap {
    text-align: center;
    color: var(--lb-quiet);
    letter-spacing: 4px;
    margin: 6px 0
}

.lb-foot {
    font: 700 11px/1.2 var(--body);
    letter-spacing: .14em;
    color: var(--lb-quiet);
    text-align: right;
    margin: 14px 2px 0
}

.lb-empty {
    background: var(--lb-panel);
    box-shadow: inset 0 0 0 1px var(--lb-line);
    font: 500 14px/1.45 var(--body);
    color: var(--lb-quiet);
    border-radius: 12px;
    margin: 0;
    padding: 28px 24px
}

.lb-empty b {
    font: 400 34px/1 var(--display);
    color: var(--lb-ink);
    margin-bottom: 8px;
    display: block
}

.lb-empty p {
    margin: 0 0 16px
}

.lb-empty p:last-child {
    margin: 0
}

.lb-empty button {
    background: var(--lb-ink);
    height: 42px;
    color: var(--lb-on-ink);
    font: 700 13px/1 var(--body);
    letter-spacing: .14em;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    display: inline-flex
}

.lb-empty button:hover {
    background: var(--lb-hover)
}

.lb-error {
    font: 600 13px/1.4 var(--body);
    color: var(--lb-alert);
    margin: 14px 0 0
}

.lb .rank-chip {
    color: var(--lb-ink);
    font: 700 12px/1.2 var(--body);
    letter-spacing: .1em
}

.lb .rank-chip.is-placement {
    color: var(--lb-quiet)
}

.lb .rank-chip.is-placement b {
    color: var(--lb-ink)
}

.lb .rank-chip-rating {
    color: var(--lb-quiet)
}

.game-shell[data-menus=light] .bc-shell .lb .rank-step {
    color: color-mix(in srgb,var(--rank) 62%,#000)
}

.lb .rank-ladder {
    background: var(--lb-panel);
    box-shadow: inset 0 0 0 1px var(--lb-line);
    color: var(--lb-ink);
    border: 0;
    border-radius: 12px;
    margin: 0
}

.lb .rank-ladder summary {
    font: 700 12px/1.3 var(--body);
    letter-spacing: .14em;
    padding: 14px 16px
}

.lb .rank-ladder summary>span {
    color: var(--lb-quiet);
    padding-top: 1px
}

.lb .rank-ladder summary:focus-visible {
    outline-color: var(--lb-ink)
}

.lb .rank-ladder>p,.lb .rank-ladder-points {
    color: var(--lb-quiet)
}

.lb .rank-ladder-groups>li {
    border-color: var(--lb-line);
    background: var(--lb-tile)
}

.lb .rank-ladder-groups strong {
    font: 700 12px/1.2 var(--body);
    letter-spacing: .14em
}

.lb .rank-ladder-steps>li {
    font: 700 12px/1 var(--body)
}

.lb .rank-ladder-steps>li[aria-current=step] {
    border-color: var(--lb-ink);
    background: var(--lb-you)
}

.lb .rank-ladder-steps small {
    color: var(--lb-ink)
}

@container lb (width>=900px) {
    .lb-body {
        grid-template-rows: minmax(0,1fr);
        grid-template-columns: clamp(250px,22%,310px) minmax(0,1fr);
        gap: 28px;
        display: grid;
        overflow: hidden
    }

    .lb-side,.lb-main {
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--lb-line) transparent;
        min-height: 0;
        overflow-y: auto
    }

    .lb-side {
        padding: 1px
    }

    .lb-main {
        padding: 1px 6px 12px 1px
    }

    .lb-picks {
        flex-direction: column;
        overflow: visible
    }

    .lb-picks button {
        height: 46px;
        padding: 0 16px
    }
}

@container lb (width<=899px) {
    .lb-side {
        display: contents
    }

    .lb-side>* {
        flex: none
    }

    .lb-picks {
        order: 1
    }

    .lb-seasons {
        order: 2;
        align-self: flex-start;
        width: min(100%,380px)
    }

    .lb-you {
        order: 3
    }

    .lb-main {
        order: 4
    }

    .lb-rule,.lb .rank-ladder {
        order: 5
    }

    .lb-you {
        grid-template-columns: auto minmax(0,1fr);
        align-items: center;
        gap: 10px 18px;
        display: grid
    }

    .lb-you>small,.lb-you>p,.lb-you : is(.lb-pow-chip,.lb-no-prize),.lb-you .rank-chip,.lb-step-bar,.lb-you-next {
        grid-column:1/-1
    }

    .lb-you dl {
        grid-area: 2/2;
        justify-content: flex-end;
        gap: 22px;
        margin: 0;
        display: flex
    }

    .lb-you dl>div {
        border: 0;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        padding: 0
    }

    .lb-you.is-ranked {
        align-items: stretch;
        display: flex
    }

    .lb-you.is-ranked dl {
        border-top: 1px solid var(--lb-line);
        justify-content: space-between;
        margin: 4px 0 0;
        padding-top: 10px
    }

    .lb-you.is-ranked dl>div {
        align-items: flex-start
    }
}

@container lb (width<=560px) {
    .lb-meta {
        text-align: left;
        grid-area: 2/1/auto/-1;
        justify-content: space-between;
        margin: 0
    }

    .lb-what {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px
    }

    .lb-what>span+span {
        color: var(--lb-quiet)
    }

    .lb-what>span+span: before {
        content:none
    }

    .lb-halves {
        justify-self: stretch
    }

    .lb-halves button {
        flex: 1;
        min-width: 0;
        padding: 0 10px
    }

    .lb-you-place b {
        font-size: 44px
    }

    .lb-you dl {
        gap: 16px
    }

    .lb-podium {
        gap: 8px
    }

    .lb-step {
        min-height: 178px;
        padding: 38px 6px 12px
    }

    .lb-step.is-place-1 {
        min-height: 202px
    }

    .lb-medal {
        top: 10px;
        left: 50%;
        transform: translate(-50%)
    }

    .lb-step .lb-name {
        font-size: 13px
    }

    .lb-step .lb-name small {
        display: none
    }

    .lb-step .lb-score {
        font-size: 18px
    }

    .lb-step.is-place-1 .lb-score {
        font-size: 21px
    }

    .lb-step .lb-score small {
        font-size: 10px
    }

    .lb-prize {
        letter-spacing: .08em;
        font-size: 10px
    }

    .lb-step .lb-watch {
        padding: 0 10px
    }

    .lb-cols {
        display: none
    }

    .lb-row {
        grid-template-columns: 30px minmax(0,1fr) auto 36px;
        gap: 10px;
        padding: 0 12px
    }

    .lb-list.no-watch .lb-row {
        grid-template-columns: 30px minmax(0,1fr) auto
    }

    .lb-list.is-ranked .lb-row {
        grid-template-columns: 30px minmax(0,1fr) auto auto
    }

    .lb-row time,.lb-row .lb-record,.lb-tier .rank-chip-copy,.lb-no-prize-more,.lb-prize-more {
        display: none
    }

    .lb-row .lb-name {
        font-size: 14px
    }

    .lb-row .lb-score {
        font-size: 16px
    }

    .lb-row .lb-watch {
        width: 36px;
        padding: 0
    }

    .lb-row .lb-watch span {
        display: none
    }
}

.bc-board {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: calc(100% - 70px);
    display: flex
}

@media (min-width: 621px) {
    .bc-shell.bc-tab-board .bc-lobby-content {
        padding-bottom:36px
    }
}

.online-card.is-board {
    background: linear-gradient(160deg,#141c21fa,#090e11fa)
}

.lb.is-window .lb-body {
    overflow: visible
}

.lb.is-window .lb-head {
    grid-template-columns: minmax(0,1fr) auto
}

@media (max-width: 620px) {
    .bc-shell .bc-board {
        height:auto
    }

    .bc-tab-board .bc-lobby-content {
        bottom: max(12px,env(safe-area-inset-bottom))
    }

    .bc-shell .lb h1 {
        font-size: clamp(34px,10vw,48px)
    }

    .lb-body {
        overflow: visible
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .game-shell .bc-shell .bc-board {
        flex:1;
        height: auto;
        min-height: 0
    }

    .bc-shell .lb h1 {
        font-size: 28px
    }

    .lb-head {
        grid-template-columns: auto auto minmax(0,1fr);
        align-items: center;
        gap: 8px 14px
    }

    .lb-halves {
        grid-area: 1/2;
        padding: 3px
    }

    .lb-halves button {
        min-width: 0;
        height: 32px;
        padding: 0 14px;
        font-size: 12px
    }

    .lb-meta {
        grid-area: 1/3;
        gap: 10px;
        margin: 0;
        font-size: 11px
    }

    .lb-what {
        flex-direction: column;
        align-items: flex-end;
        gap: 3px
    }

    .lb-what>span+span {
        color: var(--lb-quiet)
    }

    .lb-what>span+span:before {
        content: none
    }

    .lb-refresh {
        width: 32px;
        height: 32px
    }

    .lb-body {
        margin-top: 10px;
        overflow-y: auto
    }

    .lb-podium {
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px
    }

    .lb-step,.lb-step.is-place-1 {
        text-align: left;
        grid-template-columns: 40px minmax(0,1fr) auto;
        grid-template-areas: "pic name watch""pic score watch""pic prize watch";
        align-items: center;
        gap: 2px 10px;
        min-height: 0;
        padding: 30px 10px 10px;
        display: grid
    }

    .lb-step>img,.lb-step .pow-icon,.lb-step .rank-emblem,.lb-step.is-place-1>img,.lb-step.is-place-1 .pow-icon,.lb-step.is-place-1 .rank-emblem {
        grid-area: pic;
        width: 40px;
        height: 40px;
        margin: 0
    }

    .lb-step .lb-name {
        grid-area: name;
        justify-content: flex-start;
        font-size: 13px
    }

    .lb-step .lb-score,.lb-step.is-place-1 .lb-score {
        grid-area: score;
        font-size: 18px
    }

    .lb-step .lb-prize {
        letter-spacing: .08em;
        grid-area: prize;
        font-size: 10px
    }

    .lb-step .lb-watch {
        grid-area: watch;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0
    }

    .lb-step .lb-watch span {
        display: none
    }

    .lb-medal {
        top: 8px;
        left: 10px;
        transform: none
    }

    .lb-row {
        min-height: 42px
    }

    .lb-you-place b {
        font-size: 36px
    }

    @container lb (width>=600px) {
        .lb-body {
            grid-template-rows: minmax(0,1fr);
            grid-template-columns: minmax(190px,27%) minmax(0,1fr);
            gap: 14px;
            display: grid;
            overflow: hidden
        }

        .lb-side {
            overscroll-behavior: contain;
            scrollbar-width: thin;
            flex-direction: column;
            gap: 8px;
            min-height: 0;
            padding: 1px;
            display: flex;
            overflow-y: auto
        }

        .lb-main {
            overscroll-behavior: contain;
            scrollbar-width: thin;
            min-height: 0;
            padding: 1px 4px 8px 1px;
            overflow-y: auto
        }

        .lb-picks {
            flex-direction: column;
            gap: 4px;
            overflow: visible
        }

        .lb-picks button {
            height: 34px;
            padding: 0 12px;
            font-size: 12px
        }

        .lb-seasons button {
            height: 28px;
            font-size: 11px
        }

        .lb-you,.lb-you.is-ranked {
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
            padding: 12px 14px;
            display: flex
        }

        .lb-you dl,.lb-you.is-ranked dl {
            border: 0;
            gap: 4px;
            margin: 2px 0 0;
            padding: 0;
            display: grid
        }

        .lb-you dl>div,.lb-you.is-ranked dl>div {
            border-top: 1px solid var(--lb-line);
            flex-direction: row;
            justify-content: space-between;
            align-items: baseline;
            gap: 10px;
            padding-top: 5px
        }

        .lb-you-rank b {
            font-size: 20px
        }

        .lb-rule {
            font-size: 12px
        }
    }

    .lb-tier .rank-chip-copy {
        display: none
    }

    .lb-cols.is-ranked,.lb-list.is-ranked .lb-row {
        grid-template-columns: 40px minmax(0,1fr) 36px 92px minmax(64px,auto)
    }

    @container lbmain (width<=520px) {
        .lb-step,.lb-step.is-place-1 {
            grid-template-columns: minmax(0,1fr) auto;
            grid-template-areas: "name watch""score watch";
            padding: 28px 8px 8px
        }

        .lb-step>img,.lb-step .pow-icon,.lb-step .rank-emblem,.lb-step .lb-prize {
            display: none
        }

        .lb-step .lb-score,.lb-step.is-place-1 .lb-score {
            font-size: 16px
        }

        .lb-step .lb-score small {
            display: none
        }
    }
}

@container lbmain (width<=520px) {
    .lb-cols {
        display: none
    }

    .lb-row {
        grid-template-columns: 30px minmax(0,1fr) auto 36px;
        gap: 10px;
        padding: 0 12px
    }

    .lb-list.no-watch .lb-row {
        grid-template-columns: 30px minmax(0,1fr) auto
    }

    .lb-list.is-ranked .lb-row {
        grid-template-columns: 30px minmax(0,1fr) auto auto
    }

    .lb-row time,.lb-row .lb-record,.lb-tier .rank-chip-copy {
        display: none
    }

    .lb-row .lb-watch {
        width: 36px;
        padding: 0
    }

    .lb-row .lb-watch span {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .lb :is(.lb-halves,.lb-picks,.lb-watch,.lb-row) *,.lb-row {
        transition: none
    }
}

.settings-card.is-controls {
    width: 640px
}

.controls-panel {
    flex-direction: column;
    display: flex
}

.controls-panel .ctl-tabs {
    align-self: flex-start;
    margin-bottom: 18px
}

.controls-panel .ctl-tabs label {
    height: 38px;
    padding: 0 16px
}

.controls-panel .ctl-tabs span {
    align-items: center;
    gap: 8px;
    display: flex
}

.ctl-head {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
    display: flex
}

.ctl-head .settings-note {
    max-width: 430px
}

.ctl-head .settings-button {
    height: 30px;
    padding: 0 12px;
    font-size: 9px
}

.ctl-section {
    flex-direction: column;
    margin-top: 14px;
    display: flex
}

.ctl-section>.settings-label {
    padding-bottom: 8px
}

.ctl-row {
    border-top: 1px solid #f0f7ff1c;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    transition: background .15s;
    display: flex
}

.ctl-row.is-lit {
    background: linear-gradient(90deg,#ff7a4312,#0000 70%)
}

.ctl-copy {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    display: flex
}

.ctl-copy span {
    color: #e6f0f3;
    font-size: 13px;
    font-weight: 600
}

.ctl-copy small {
    color: #9fb6c0;
    font-size: 11px;
    line-height: 1.4
}

.ctl-binds {
    flex: none;
    align-items: center;
    gap: 6px;
    display: flex
}

.ctl-chip {
    color: #f4f9fa;
    min-width: 44px;
    height: 32px;
    font: 800 11px/1 var(--body);
    letter-spacing: .8px;
    white-space: nowrap;
    background: #203d49;
    border: 1px solid #e1f1ff3d;
    border-bottom-width: 2px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    transition: border-color .15s,background .15s,color .15s;
    display: inline-flex
}

button.ctl-chip:hover {
    border-color: var(--accent)
}

button.ctl-chip:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #ff935f
}

.ctl-chip.is-empty {
    color: #9fb6c0;
    background: 0 0;
    border-style: dashed;
    border-bottom-width: 1px;
    font-size: 14px;
    font-weight: 600
}

.ctl-chip.is-fixed {
    color: #7f99a4;
    letter-spacing: 1px;
    cursor: default;
    background: 0 0;
    border-color: #e1f1ff1f;
    font-size: 9px
}

.ctl-chip.is-waiting {
    border-color: var(--accent);
    color: #ffb08d;
    letter-spacing: 1.2px;
    background: #ff7a431f;
    font-size: 9px;
    animation: 1.1s ease-in-out infinite ctl-wait
}

@keyframes ctl-wait {
    50% {
        background: #ff7a4338
    }
}

@media (prefers-reduced-motion:reduce) {
    .ctl-chip.is-waiting {
        animation: none
    }
}

.ctl-glyph {
    font: 800 11px/1 var(--body);
    letter-spacing: .6px
}

.ctl-glyph.is-face {
    border: 1.5px solid;
    border-radius: 50%;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 10px;
    display: grid
}

.ctl-notice {
    color: #ffc2a4;
    min-height: 18px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.5
}

.ctl-notice:empty {
    min-height: 0;
    margin-top: 0
}

.ctl-saved {
    border-top: 1px solid #f0f7ff24;
    margin-top: 14px;
    padding-top: 14px
}

.ctl-hint {
    text-align: center;
    margin: 2px 0 4px
}

.ctl-pad-status {
    color: #9fb6c0;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 12px;
    display: flex
}

.ctl-pad-status b {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e6f0f3;
    font-size: 13px;
    overflow: hidden
}

.ctl-dot {
    background: #5a7480;
    border-radius: 50%;
    flex: none;
    width: 8px;
    height: 8px
}

.ctl-dot.is-on {
    background: #72d4a8;
    box-shadow: 0 0 0 4px #72d4a826
}

.ctl-style {
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 12px 0 4px;
    display: flex
}

.ctl-guide {
    border-top: 1px solid #f0f7ff1c;
    border-bottom: 1px solid #f0f7ff1c;
    margin: 12px 0 2px
}

.ctl-guide-head {
    color: #9fb6c0;
    background: 0 0;
    border: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    display: flex
}

.ctl-guide-head:hover {
    color: #fff
}

.ctl-guide-head svg {
    transition: transform .18s
}

.ctl-guide.is-open .ctl-guide-head svg {
    transform: rotate(180deg)
}

.ctl-guide-body {
    flex-direction: column;
    gap: 14px;
    padding: 2px 0 16px;
    display: flex
}

.ctl-guide-body .settings-segment {
    align-self: flex-start
}

.ctl-steps {
    counter-reset: step;
    flex-direction: column;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.ctl-steps li {
    counter-increment: step;
    flex-direction: column;
    gap: 4px;
    padding-left: 36px;
    display: flex;
    position: relative
}

.ctl-steps li:before {
    content: counter(step);
    width: 23px;
    height: 23px;
    color: var(--accent);
    font: 800 11px/1 var(--body);
    border: 1px solid #ff7a4366;
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: absolute;
    top: -2px;
    left: 0
}

.ctl-steps li>b {
    color: #e6f0f3;
    font-size: 13px
}

.ctl-steps span {
    color: #9fb6c0;
    font-size: 12px;
    line-height: 1.55
}

.ctl-steps span b {
    color: #dcebef
}

.pad-diagram {
    width: 100%;
    height: auto;
    margin: 4px 0 0;
    display: block;
    overflow: visible
}

.pad-body {
    fill: #1d3a46;
    stroke: #e1f1ff42;
    stroke-width: 1.5px
}

.pad-detail {
    fill: #17303d;
    stroke: #e1f1ff2e;
    stroke-width: 1.2px
}

.pad-control circle,.pad-control rect {
    fill: #17303d;
    stroke: #e1f1ff5c;
    stroke-width: 1.3px;
    transition: fill 80ms,stroke .15s
}

.pad-control .pad-stick-top {
    fill: #203d49;
    stroke: #e1f1ff2e
}

.pad-control text {
    fill: #dcebef;
    font: 800 10px var(--body);
    letter-spacing: .4px;
    pointer-events: none
}

.pad-control.is-lit circle,.pad-control.is-lit rect {
    stroke: var(--accent);
    stroke-width: 2px
}

.pad-control.is-held circle,.pad-control.is-held rect {
    fill: var(--accent);
    stroke: var(--accent)
}

.pad-control.is-held text {
    fill: #17313b
}

.pad-diagram.is-picking .pad-control {
    cursor: pointer
}

.pad-diagram.is-picking .pad-control:hover circle,.pad-diagram.is-picking .pad-control:hover rect {
    stroke: var(--accent);
    stroke-width: 2px
}

.pad-control:focus-visible {
    outline: none
}

:is(.pad-control:focus-visible circle,.pad-control:focus-visible rect) {
    stroke: #ff935f;
    stroke-width: 2.5px
}

.pad-callout polyline {
    fill: none;
    stroke: #a9c0ca4d;
    stroke-width: 1px
}

.pad-callout text {
    fill: #b9ccd3;
    font: 600 11px var(--body);
    letter-spacing: .2px
}

.pad-callout.is-lit polyline {
    stroke: var(--accent)
}

.pad-callout.is-lit text {
    fill: #fff
}

@media (max-width: 760px) {
    .ctl-row {
        gap:10px
    }

    .ctl-copy small {
        display: none
    }

    .ctl-chip {
        min-width: 38px;
        height: 30px;
        padding: 0 8px
    }

    .ctl-head,.ctl-style {
        flex-wrap: wrap
    }

    .pad-callout text {
        font-size: 14px
    }
}

.settings-card {
    width: 480px
}

.settings-card:focus {
    outline: none
}

.settings-card h2 {
    margin-bottom: 22px
}

.settings-row {
    border-top: 1px solid #f0f7ff24;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 17px 0;
    display: flex
}

.settings-row:last-of-type {
    border-bottom: 1px solid #f0f7ff24
}

.settings-copy {
    flex-direction: column;
    flex: 1;
    gap: 6px;
    min-width: 0;
    display: flex
}

.settings-label {
    letter-spacing: 1.8px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 700
}

.settings-value {
    font: italic 800 28px/1 var(--display);
    letter-spacing: .3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 2px;
    overflow: hidden
}

.settings-value.is-guest {
    color: #9fb6c0
}

.settings-email {
    color: #e6f0f3;
    overflow-wrap: anywhere;
    font-size: 14px
}

.settings-note {
    color: #9fb6c0;
    margin: 0;
    font-size: 12px;
    line-height: 1.5
}

.settings-note.is-bad {
    color: #f2b49a
}

.settings-button {
    color: #deecf2;
    letter-spacing: 1.2px;
    background: #203d49;
    border: 1px solid #e1f1ff30;
    flex: none;
    height: 38px;
    padding: 0 16px;
    font-size: 10px;
    font-weight: 800;
    transition: border-color .18s,color .18s,background .18s
}

.settings-button:hover {
    border-color: var(--accent);
    color: #fff
}

.settings-button.is-light {
    color: #17313b;
    background: #dcebef;
    border-color: #dcebef
}

.settings-button.is-light:hover {
    background: #fff
}

.settings-button:disabled {
    cursor: default;
    opacity: .4
}

.gamertag-form {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 10px;
    margin-top: 2px;
    display: grid
}

.gamertag-form input,.settings-form input {
    color: #fff;
    min-width: 0;
    height: 46px;
    font: 14px var(--body);
    -webkit-user-select: text;
    user-select: text;
    background: #203d49;
    border: 1px solid #e1f1ff30;
    border-radius: 0;
    outline: none;
    padding: 0 13px
}

.gamertag-form input {
    font-size: 16px;
    font-weight: 600
}

.gamertag-form input:focus,.settings-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px #ff956666
}

.gamertag-form input[aria-invalid=true],.settings-form input[aria-invalid=true] {
    border-color: #f7764299
}

.gamertag-form .settings-button {
    height: 46px
}

.gamertag-form small {
    color: #c6d7dc;
    grid-column: 1/-1;
    font-size: 13px;
    line-height: 1.45
}

.gamertag-form small.is-ok {
    color: #a9dbc9
}

.gamertag-form small.is-bad {
    color: #f2b49a
}

.gamertag-form .text-button {
    grid-column: 1/-1;
    justify-self: start;
    padding: 4px 0;
    font-size: 12px
}

.settings-form {
    flex-direction: column;
    gap: 14px;
    display: flex
}

.settings-form>p {
    color: #c6d7dc;
    margin: -10px 0 4px;
    font-size: 14px;
    line-height: 1.55
}

.settings-form label {
    letter-spacing: 1.8px;
    color: #9fb6c0;
    flex-direction: column;
    gap: 7px;
    font-size: 9px;
    font-weight: 700;
    display: flex
}

.settings-form .primary-button {
    max-width: none;
    height: 56px;
    margin: 6px 0 0
}

.settings-form>p.settings-terms {
    color: #c6d7dc;
    margin: -4px 0 0;
    font-size: 12px;
    line-height: 1.5
}

.settings-terms a {
    color: #f7f6ef;
    text-underline-offset: 3px
}

.settings-links {
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    display: flex
}

.settings-links button {
    color: #c6d7dc;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #a9c0ca65;
    padding: 5px 0;
    font-size: 12px
}

.settings-links button:hover {
    color: #fff;
    border-color: #fff
}

.settings-links button:disabled {
    opacity: .45;
    color: #c6d7dc;
    cursor: default;
    border-color: #a9c0ca65
}

.settings-feedback {
    color: #bce0d4;
    background: #72bba811;
    border: 1px solid #72bba84d;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 11px 13px;
    font-size: 12px;
    line-height: 1.5;
    display: flex
}

.settings-feedback.is-error {
    color: #f2b49a;
    background: #f776420d;
    border-color: #f7764252
}

.settings-feedback svg {
    flex: none
}

.settings-sign-out {
    color: #9fb6c0;
    margin-top: 6px
}

.settings-back {
    margin-top: 10px
}

.settings-card .settings-done {
    margin: 24px 0 0
}

.modal-backdrop.settings-preview {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(90deg,#0b2533c4 0%,#0b25335c 40%,#0000 68%);
    justify-content: flex-start;
    padding-left: max(24px,6vw)
}

@media (max-width: 760px) {
    .modal-backdrop.settings-preview {
        background:#0b253333;
        justify-content: center;
        padding-left: 13px
    }
}

.settings-camera {
    flex-direction: column;
    align-items: stretch;
    gap: 10px
}

.settings-camera-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.settings-camera-head .settings-button {
    height: 30px;
    padding: 0 12px;
    font-size: 9px
}

.settings-slider {
    letter-spacing: 1.6px;
    color: #9fb6c0;
    grid-template-columns: 78px 1fr 52px;
    align-items: center;
    gap: 12px;
    font-size: 9px;
    font-weight: 700;
    display: grid
}

.settings-slider output {
    font: italic 800 17px/1 var(--display);
    letter-spacing: .3px;
    color: #e6f0f3;
    justify-self: end
}

.settings-slider input {
    --fill: 50%;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: 0 0;
    width: 100%;
    height: 22px;
    margin: 0
}

.settings-slider input::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,var(--accent) var(--fill),#203d49 var(--fill));
    border: 1px solid #e1f1ff30;
    height: 6px
}

.settings-slider input::-moz-range-track {
    background: linear-gradient(90deg,var(--accent) var(--fill),#203d49 var(--fill));
    border: 1px solid #e1f1ff30;
    height: 6px
}

.settings-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #deecf2;
    border: 0;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    box-shadow: 0 0 0 3px #17313b
}

.settings-slider input::-moz-range-thumb {
    background: #deecf2;
    border: 0;
    border-radius: 0;
    width: 18px;
    height: 18px;
    box-shadow: 0 0 0 3px #17313b
}

.settings-slider input:focus-visible {
    outline-offset: 4px;
    outline: 2px solid #ff935f
}

@media (max-width: 760px) {
    .settings-value {
        font-size:24px
    }

    .settings-row {
        gap: 14px
    }

    .settings-slider {
        grid-template-columns: 66px 1fr 48px;
        gap: 10px
    }
}

.settings-segment {
    background: #203d49;
    border: 1px solid #e1f1ff30;
    flex: none;
    margin: 0;
    padding: 0;
    display: flex
}

.settings-segment label {
    cursor: pointer;
    color: #9fb6c0;
    letter-spacing: 1.1px;
    place-items: center;
    height: 34px;
    padding: 0 11px;
    font-size: 10px;
    font-weight: 800;
    transition: background .18s,color .18s;
    display: grid;
    position: relative
}

.settings-segment input {
    opacity: 0;
    cursor: pointer;
    margin: 0;
    position: absolute;
    inset: 0
}

.settings-segment label:hover {
    color: #fff
}

.settings-segment label.is-on {
    background: var(--accent);
    color: #17313b
}

.settings-segment label:has(input:focus-visible) {
    outline-offset: 2px;
    outline: 2px solid #ff935f
}

@media (max-width: 420px) {
    .settings-choice {
        flex-wrap:wrap
    }

    .settings-segment {
        width: 100%
    }

    .settings-segment label {
        flex: 1
    }
}

.settings-switch-row fieldset {
    grid-column: 2/span 2;
    justify-self: start;
    margin: 0;
    padding: 0
}

.settings-tabs {
    scrollbar-width: none;
    border-bottom: 1px solid #ffffff1f;
    gap: 6px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    display: flex;
    overflow-x: auto
}

.settings-tabs::-webkit-scrollbar {
    display: none
}

.settings-tabs button {
    color: #fff;
    height: 34px;
    font: 400 14px/1 var(--display);
    letter-spacing: .03em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex: 1 0 auto;
    padding: 0 10px;
    box-shadow: inset 0 0 0 2px #ffffff40
}

.settings-tabs button:hover {
    box-shadow: inset 0 0 0 2px #fff
}

.settings-tabs button.is-on {
    color: #101418;
    background: #f7f6ef;
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000006b
}

.settings-tabs button:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #f7f6ef
}

.settings-page {
    flex-direction: column;
    display: flex
}

.settings-page>:first-child {
    border-top: 0;
    padding-top: 0
}

.settings-card.is-tabbed {
    flex-direction: column;
    width: 560px;
    height: min(720px,100dvh - 48px);
    display: flex
}

.settings-card.is-tabbed.is-controls {
    width: 640px
}

.settings-card.is-tabbed .settings-page {
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    margin-right: -10px;
    padding-right: 10px;
    overflow-y: auto
}

.settings-card.is-tabbed .settings-tabs,.settings-card.is-tabbed h2,.settings-card.is-tabbed .settings-done {
    flex: none
}

@media (max-width: 760px) {
    .settings-card.is-tabbed,.settings-card.is-tabbed.is-controls {
        width:auto
    }
}

.game-shell .pause-card .text-button.settings-delete {
    color: #9fb6c0;
    border-top: 1px solid #f7f6ef26;
    width: 100%;
    margin-top: 26px;
    padding-top: 18px;
    font-size: 16px
}

.game-shell .pause-card .text-button.settings-delete:hover {
    color: #ff453a;
    transform: none
}

.game-shell .settings-card h2.is-danger {
    color: #ff453a
}

.settings-delete-page>p {
    color: #e3edf1;
    margin: 0;
    font-size: 15px;
    line-height: 1.5
}

.settings-delete-page>p b {
    color: #fff;
    overflow-wrap: anywhere
}

.settings-delete-page ul {
    color: #e3edf1;
    flex-direction: column;
    gap: 6px;
    margin: -4px 0 0;
    padding: 0 0 0 20px;
    font-size: 15px;
    line-height: 1.35;
    display: flex
}

.settings-delete-page li::marker {
    color: #ff453a
}

.settings-delete-page>p.settings-delete-warning {
    color: #ff453a;
    font-weight: 700
}

.settings-form.settings-delete-page label {
    letter-spacing: .08em;
    color: #f7f6ef;
    font-size: 13px
}

.settings-delete-page input:focus {
    border-color: #ff453a;
    box-shadow: 0 0 0 1px #ff453a66
}

.settings-delete-actions {
    flex-wrap: wrap;
    gap: 10px;
    display: flex
}

.game-shell .settings-delete-page .settings-button.is-back {
    color: #f7f6ef;
    background: 0 0;
    transform: none;
    box-shadow: inset 0 0 0 2px #f7f6ef80
}

.game-shell .settings-delete-page .settings-button.is-back:hover {
    background: #ffffff14
}

.game-shell .settings-delete-page .settings-button.is-delete {
    color: #fff;
    background: #ff453a
}

.game-shell .settings-delete-page .settings-button.is-delete:hover:not(:disabled) {
    background: #ff6b61
}

.settings-delete-page .primary-button {
    max-width: none;
    height: 56px;
    margin: 6px 0 0
}

.settings-confirm-card.is-danger {
    box-shadow: inset 0 0 0 2px #ff453a
}

.settings-confirm-card.is-danger b {
    color: #ff453a
}

.settings-confirm-card {
    border-radius: 10px;
    flex-direction: column;
    grid-column: 1/-1;
    gap: 8px;
    padding: 14px 16px;
    display: flex;
    box-shadow: inset 0 0 0 2px #f7f6ef59
}

.settings-confirm-card b {
    font: 400 20px/1.1 var(--display);
    letter-spacing: .02em;
    overflow-wrap: anywhere
}

.settings-confirm-card span {
    color: #e3edf1;
    font-size: 14px;
    line-height: 1.45
}

.settings-confirm-card div {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    display: flex
}

.game-shell .settings-confirm-card .settings-button.is-back {
    color: #f7f6ef;
    background: 0 0;
    transform: none;
    box-shadow: inset 0 0 0 2px #f7f6ef80
}

.game-shell .settings-confirm-card .settings-button.is-back:hover {
    background: #ffffff14
}

.settings-form>p.settings-name-status {
    color: #c6d7dc;
    margin: -8px 0 0;
    font-size: 13px;
    line-height: 1.45
}

.settings-form>p.settings-name-status.is-ok {
    color: #a9dbc9
}

.settings-form>p.settings-name-status.is-bad {
    color: #f2b49a
}

.game-menu-trigger {
    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: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 12px;
    display: flex;
    position: relative
}

.game-menu-trigger>span {
    font: 600 12px var(--body);
    letter-spacing: .09em
}

.game-menu-trigger kbd {
    opacity: .65;
    min-width: 29px;
    height: 20px;
    font-size: 8px
}

.game-menu-trigger:hover {
    background: #263c47;
    border-color: #f7f6ef
}

.game-menu-trigger i {
    background: #ffb66d;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    top: -3px;
    right: -3px;
    box-shadow: 0 0 0 3px #132531
}

.game-menu-backdrop {
    z-index: 14;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: #06111963;
    justify-content: flex-end;
    display: flex;
    position: absolute;
    inset: 0
}

dialog.game-menu {
    overscroll-behavior: contain;
    color: #f7f6ef;
    background: #122632;
    border: 0;
    border-left: 1px solid #ffffff26;
    flex-direction: column;
    width: min(410px,100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 32px 28px 22px;
    animation: .18s ease-out game-menu-in;
    display: flex;
    position: relative;
    inset: auto;
    overflow-y: auto;
    box-shadow: -20px 0 80px #0003
}

.game-menu:focus {
    outline: none
}

.game-menu-heading {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 27px;
    display: flex
}

.game-menu-heading p {
    font: 600 10px var(--body);
    letter-spacing: .13em;
    color: #aac0cc;
    margin: 0 0 9px
}

.game-menu-heading h2 {
    font: 800 italic 40px/1 var(--display);
    letter-spacing: .02em;
    margin: 0
}

.game-menu-close {
    width: 40px;
    height: 40px;
    color: inherit;
    background: 0 0;
    border: 1px solid #ffffff30;
    border-radius: 50%;
    place-items: center;
    display: grid
}

.game-menu-close:hover {
    background: #ffffff16
}

.game-menu-resume {
    color: #142632;
    text-align: left;
    background: #f7f6ef;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 12px;
    padding: 18px 17px;
    display: flex
}

.game-menu-resume>span {
    font: 700 13px var(--body);
    flex: 1
}

.game-menu-resume kbd {
    color: #142632;
    background: 0 0;
    border-color: #14263240;
    font-size: 8px
}

.game-menu-resume:hover {
    background: #e0ecf0
}

.game-menu-live {
    color: #aac0cc;
    font: 400 11px/1.5 var(--body);
    margin: 10px 0 0
}

.game-menu-links {
    border-block:1px solid #ffffff20;margin-top: 21px;
    padding: 9px 0
}

.game-menu-links>button {
    width: 100%;
    color: inherit;
    text-align: left;
    background: 0 0;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 14px;
    padding: 16px 10px;
    display: flex
}

.game-menu-links>button:hover,.game-menu-session>button:hover {
    background: #ffffff0d
}

.game-menu-links>button>span {
    flex-direction: column;
    flex: 1;
    gap: 5px;
    display: flex
}

.game-menu-links b {
    font: 600 14px var(--body);
    align-items: center;
    gap: 8px;
    display: flex
}

.game-menu-links small {
    color: #aac0cc;
    font: 400 11px var(--body)
}

.game-menu-links em {
    color: #142632;
    min-width: 19px;
    height: 19px;
    font: 700 10px var(--body);
    background: #ffb66d;
    border-radius: 50px;
    place-items: center;
    padding: 0 5px;
    display: grid
}

.game-menu-links>button>svg:last-child {
    color: #91aebd
}

.game-menu-session {
    padding: 16px 0
}

.game-menu-session>button {
    text-align: left;
    color: #dbe6ec;
    width: 100%;
    font: 500 13px var(--body);
    background: 0 0;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 13px;
    padding: 13px 10px;
    display: flex
}

.game-menu-session>button:last-child {
    color: #ffbd99
}

.game-menu-utilities {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: auto;
    padding-top: 22px;
    display: grid
}

.game-menu-utilities button {
    color: #bdced8;
    min-height: 43px;
    font: 500 10px var(--body);
    background: 0 0;
    border: 1px solid #ffffff25;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 9px 7px;
    display: flex
}

.game-menu-utilities button:hover {
    color: #fff;
    border-color: #bdced8
}

.menu-back {
    color: #bfd0dc;
    font: 500 11px var(--body);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    padding: 4px 0;
    display: inline-flex
}

.menu-back:hover {
    color: #fff
}

.game-menu-support {
    flex-wrap: wrap;
    grid-column: 1/-1;
    gap: 4px 18px;
    margin-top: 8px;
    display: flex
}

.game-menu-support a {
    color: #bdced8;
    min-height: 32px;
    font: 500 12px var(--body);
    text-underline-offset: 3px;
    align-items: center;
    display: inline-flex
}

@keyframes game-menu-in {
    0% {
        opacity: 0;
        transform: translate(18px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    dialog.game-menu {
        animation: none
    }
}

@media (max-width: 620px) {
    dialog.game-menu {
        padding:24px 22px 18px
    }

    .game-menu-trigger kbd {
        display: none
    }

    .game-menu-trigger {
        min-height: 38px
    }

    .game-menu-heading {
        margin-bottom: 22px
    }
}

@media (max-height: 650px) {
    dialog.game-menu {
        padding-top:20px
    }

    .game-menu-heading {
        margin-bottom: 18px
    }

    .game-menu-links {
        margin-top: 13px
    }

    .game-menu-links>button {
        padding-block:11px}

    .game-menu-session {
        padding: 9px 0
    }

    .game-menu-session>button {
        padding-block:10px}

    .game-menu-utilities {
        padding-top: 14px
    }
}

.update-notice {
    z-index: 9;
    color: #e7eff1;
    max-width: min(440px,100% - 40px);
    font: 500 13px/1.35 var(--body);
    background: #0f2833f2;
    border: 1px solid #c4d8dc33;
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    animation: .35s cubic-bezier(.2,.9,.3,1.2) update-in;
    display: flex;
    position: fixed;
    bottom: 104px;
    left: max(20px,6.5%);
    box-shadow: 0 14px 34px #0209,inset 0 1px #ffffff14
}

.update-notice.is-must {
    border-color: #fa895899
}

.update-reload {
    color: #101418;
    font: italic 800 15px/1 var(--display);
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
    background: #fa8958;
    border: 0;
    border-radius: 8px;
    flex: none;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    text-decoration: none;
    display: inline-flex;
    box-shadow: 0 0 0 2px #101418,3px 3px 0 2px #0000005c
}

.update-reload:hover {
    background: #ff9d71
}

.update-reload:focus-visible {
    outline-offset: 3px;
    outline: 2px solid #f5f3e9
}

.update-close {
    color: #9fb5bc;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    display: grid
}

.update-close:hover {
    color: #f5f3e9;
    background: #ffffff14
}

.update-close:focus-visible {
    outline: 2px solid #f5f3e9
}

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

@media (max-width: 620px) {
    .update-notice {
        max-width:none;
        bottom: 84px;
        left: 14px;
        right: 14px
    }
}

@media (prefers-reduced-motion:reduce) {
    .update-notice {
        animation: none
    }
}

.perf-notice {
    bottom: 164px
}

@media (max-width: 620px) {
    .perf-notice {
        bottom:144px
    }
}

.top-friends {
    color: #f7f6ef;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #101e27b8;
    border: 1px solid #ffffff4a;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 11px;
    display: flex;
    position: relative
}

.top-friends:hover {
    background: #263c47;
    border-color: #f7f6ef
}

.top-friends b {
    font: 400 21px/1 var(--display);
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums
}

.friends-dot {
    background: #ff5d6c;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    position: absolute;
    top: -3px;
    right: -3px;
    box-shadow: 0 0 0 2px #101418
}

@media (max-width: 760px) {
    .top-friends {
        gap:5px;
        min-width: 38px;
        min-height: 38px;
        padding: 0 9px
    }

    .top-friends b {
        font-size: 17px
    }
}

@media (orientation: landscape) and (max-height:500px) {
    .top-friends {
        gap:5px;
        min-width: 34px;
        min-height: 34px;
        padding: 0 8px
    }

    .top-friends b {
        font-size: 17px
    }
}

.game-shell .modal-backdrop:has(>.friends-card) {
    background: var(--card-backdrop)
}

.game-shell dialog.pause-card.friends-card {
    overscroll-behavior: contain;
    border: 1px solid var(--card-line);
    background: var(--card-bg);
    width: min(520px,100vw - 24px);
    max-height: min(86vh,760px);
    color: var(--card-ink);
    scrollbar-width: thin;
    scrollbar-color: var(--card-line) transparent;
    border-radius: 18px;
    padding: 24px 24px 18px;
    overflow: auto;
    box-shadow: 0 30px 80px #00000073
}

.game-shell .friends-card h2 {
    letter-spacing: .01em;
    color: var(--card-ink);
    margin: 0 0 16px;
    font-size: 34px;
    rotate: none
}

.game-shell .friends-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;
    top: 18px;
    right: 18px
}

.game-shell .friends-card>.close-button:hover {
    background: var(--card-tile)
}

.game-shell .friends-card .menu-back {
    color: var(--card-quiet);
    font: 600 12px/1 var(--body);
    letter-spacing: .06em;
    border-radius: 8px;
    transition: color .15s
}

.game-shell .friends-card .menu-back:hover {
    color: var(--card-ink)
}

.game-shell .friends-card :is(button,input):focus-visible {
    outline: 2px solid var(--card-ink);
    outline-offset: 2px
}

.friends-card .friends-find {
    margin-top: 0
}

.friends-search {
    background: var(--card-tile);
    height: 44px;
    box-shadow: inset 0 0 0 1px var(--card-line);
    color: var(--card-quiet);
    border-radius: 12px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    display: flex
}

.friends-search:focus-within {
    box-shadow: inset 0 0 0 2px var(--card-ink)
}

.friends-search input {
    min-width: 0;
    height: 100%;
    color: var(--card-ink);
    font: 500 15px/1 var(--body);
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1
}

.friends-search input::placeholder {
    color: var(--card-quiet)
}

.friends-said {
    color: var(--card-ink);
    font: 700 11px/1.3 var(--body);
    letter-spacing: .1em;
    margin: 8px 2px 0;
    display: block
}

.friends-tabs {
    background: var(--card-tile);
    border-radius: 12px;
    gap: 4px;
    margin: 14px 0 2px;
    padding: 4px;
    display: flex
}

.friends-tabs button {
    min-width: 0;
    height: 36px;
    color: var(--card-quiet);
    font: 700 12px/1 var(--body);
    letter-spacing: .12em;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    transition: background .15s,color .15s;
    display: inline-flex
}

.friends-tabs button:hover {
    color: var(--card-ink)
}

.friends-tabs button[aria-selected=true] {
    background: var(--card-btn);
    color: var(--card-btn-ink)
}

.friends-tabs b {
    background: var(--card-track);
    min-width: 20px;
    height: 18px;
    color: inherit;
    font: 700 11px/18px var(--body);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    border-radius: 9px;
    padding: 0 6px
}

.friends-tabs b.is-new {
    background: var(--card-alert);
    color: var(--card-bg)
}

.friends-card section {
    margin-top: 14px
}

.friends-kicker {
    color: var(--card-quiet);
    font: 700 11px/1 var(--body);
    letter-spacing: .14em;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    display: flex
}

.friends-kicker b {
    background: var(--card-tile);
    min-width: 20px;
    height: 18px;
    color: var(--card-ink);
    font: 700 11px/18px var(--body);
    letter-spacing: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-radius: 9px;
    padding: 0 6px
}

.friends-activity {
    margin-top: 8px
}

.friends-activity h3 {
    color: var(--card-quiet);
    font: 600 10px/1.4 var(--body);
    letter-spacing: .12em;
    align-items: center;
    gap: 6px;
    margin: 0 2px 2px;
    display: flex
}

.friends-activity h3 span {
    color: var(--card-ink);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums
}

.friends-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.friends-list.is-found {
    margin-top: 8px
}

.friends-list li {
    border-bottom: 1px solid var(--card-line);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 4px;
    display: flex
}

.friends-list li:last-child {
    border-bottom: 0
}

.friends-list li.is-off {
    opacity: .6
}

.friends-list li.is-away {
    opacity: .85
}

.friends-avatar {
    background: var(--card-tile);
    width: 32px;
    height: 32px;
    color: var(--card-ink);
    font: 400 15px/1 var(--display);
    box-shadow: inset 0 0 0 1px var(--card-line);
    border-radius: 50%;
    flex: 0 0 32px;
    place-items: center;
    display: grid;
    position: relative
}

.friends-avatar:is(.is-on,.is-away):after {
    content: "";
    background: var(--card-ok);
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 2px var(--card-bg);
    border-radius: 50%;
    position: absolute;
    bottom: -1px;
    right: -1px
}

.friends-avatar.is-away:after {
    background: var(--card-bg);
    box-shadow: inset 0 0 0 2px var(--card-quiet),0 0 0 2px var(--card-bg)
}

.friends-text {
    flex: 1;
    gap: 3px;
    min-width: 0;
    display: grid
}

.friends-name {
    color: var(--card-ink);
    font: 600 15px/1.15 var(--body);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.friends-list li>.friends-name {
    flex: 1;
    min-width: 0
}

.friends-text small {
    color: var(--card-quiet);
    font: 700 10px/1.25 var(--body);
    letter-spacing: .1em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.friends-list li.is-on .friends-text small {
    color: var(--card-copy)
}

.friends-acts {
    flex: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    display: flex
}

.friends-action {
    background: var(--card-tile);
    height: 30px;
    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: 8px;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    transition: background .15s;
    display: inline-flex
}

.friends-action:hover:not(:disabled) {
    background: var(--card-tile-hover)
}

.friends-action:disabled {
    opacity: .55
}

.friends-action svg {
    width: 14px;
    height: 14px
}

.friends-action.is-primary {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    box-shadow: none
}

.friends-action.is-primary:hover:not(:disabled) {
    background: var(--card-btn-hover)
}

.friends-action.is-destructive,.friends-action.is-destructive:hover:not(:disabled) {
    background: var(--card-alert);
    color: var(--card-bg);
    box-shadow: none
}

.friends-pill {
    height: 26px;
    box-shadow: inset 0 0 0 1px var(--card-line);
    color: var(--card-quiet);
    font: 700 10px/1 var(--body);
    letter-spacing: .1em;
    border-radius: 13px;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    display: inline-flex
}

.friends-more {
    width: 30px;
    height: 30px;
    color: var(--card-quiet);
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex: none;
    place-items: center;
    transition: background .15s,color .15s;
    display: grid
}

.friends-more:hover {
    background: var(--card-tile);
    color: var(--card-ink)
}

.friends-show-all {
    background: var(--card-tile);
    width: 100%;
    height: 36px;
    color: var(--card-ink);
    font: 700 11px/1 var(--body);
    letter-spacing: .12em;
    border: 0;
    border-radius: 9px;
    margin-top: 6px;
    transition: background .15s;
    display: block
}

.friends-show-all:hover {
    background: var(--card-tile-hover)
}

.game-shell.is-touch .friends-action {
    height: 36px
}

.game-shell.is-touch .friends-more {
    width: 36px;
    height: 36px
}

.friends-list li.is-picking {
    flex-wrap: wrap;
    row-gap: 8px
}

.friends-maps {
    border: 0;
    flex: 0 0 100%;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0 0 4px 42px;
    display: grid
}

.friends-maps .friends-action {
    white-space: nowrap;
    justify-content: center;
    min-width: 0
}

@media (max-width: 760px) {
    .friends-maps {
        padding-left:0
    }
}

.friends-card .friends-party {
    background: var(--card-tile);
    box-shadow: inset 0 0 0 1px var(--card-line);
    border-radius: 14px;
    margin: 0 0 14px;
    padding: 10px 12px
}

.friends-party .friends-avatar {
    background: var(--card-bg)
}

.friends-party-where {
    color: var(--card-copy);
    font: 700 11px/1.3 var(--body);
    letter-spacing: .1em;
    margin: 0 0 2px
}

.friends-party-private {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    display: flex
}

.friends-party-private span {
    color: var(--card-copy);
    font: 700 11px/1.3 var(--body);
    letter-spacing: .1em
}

.friends-switch {
    background: var(--card-bg);
    min-width: 64px;
    height: 28px;
    color: var(--card-quiet);
    box-shadow: inset 0 0 0 1px var(--card-line);
    font: 700 10px/1 var(--body);
    letter-spacing: .12em;
    cursor: pointer;
    border: 0;
    border-radius: 14px;
    flex-direction: row-reverse;
    flex: none;
    align-items: center;
    gap: 7px;
    padding: 0 10px 0 4px;
    display: inline-flex
}

.friends-switch:after {
    content: "";
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px var(--card-quiet);
    border-radius: 50%;
    margin-right: auto
}

.friends-switch[aria-checked=true] {
    background: var(--card-btn);
    color: var(--card-btn-ink);
    box-shadow: none;
    flex-direction: row;
    padding: 0 4px 0 10px
}

.friends-switch[aria-checked=true]:after {
    background: var(--card-btn-ink);
    box-shadow: none;
    margin: 0 0 0 auto
}

.friends-switch:hover {
    box-shadow: inset 0 0 0 1px var(--card-ink)
}

.friends-switch[aria-checked=true]:hover {
    background: var(--card-btn-hover)
}

.friends-switch:focus-visible {
    outline: 2px solid var(--card-ink);
    outline-offset: 2px
}

.game-shell.is-touch .friends-switch {
    border-radius: 18px;
    height: 36px
}

.game-shell.is-touch .friends-switch:after {
    width: 26px;
    height: 26px
}

.friends-crown {
    color: #f3c24d;
    flex: none
}

.friends-party-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    display: flex
}

.party-move .party-stay {
    height: 34px
}

.friends-quiet {
    color: var(--card-quiet);
    font: 600 13px/1.4 var(--body);
    margin: 6px 2px
}

.friends-quiet.is-empty {
    margin-top: 16px
}

@media (min-width: 761px) {
    .game-shell.is-intro .friend-challenge {
        top:146px;
        left: auto;
        right: 6.5%;
        translate: none
    }
}

main.game-shell.is-map .friend-challenge.duel-invite {
    z-index: 36;
    inset: 99px auto auto 50%;
    translate: -50%
}

@media (max-width: 1000px) {
    main.game-shell.is-map .friend-challenge.duel-invite {
        top:87px
    }
}

@media (orientation: portrait) {
    main.game-shell.is-map .friend-challenge.duel-invite {
        top:80px
    }
}

@media (max-height: 520px) and (orientation:landscape) {
    main.game-shell.is-map .friend-challenge.duel-invite {
        top:70px
    }
}

.friend-challenge.is-note b {
    place-items: center;
    display: inline-grid
}

@media (max-width: 760px) {
    .game-shell dialog.pause-card.friends-card {
        max-height:calc(100dvh - 24px);
        padding: 20px 16px 14px
    }

    .game-shell .friends-card h2 {
        font-size: 30px
    }

    .game-shell .friends-card>.close-button {
        top: 12px;
        right: 12px
    }

    .friends-list li {
        flex-wrap: wrap;
        gap: 6px 8px;
        padding-left: 46px;
        position: relative
    }

    .friends-list li>.friends-avatar {
        position: absolute;
        top: 8px;
        left: 4px
    }

    .friends-text {
        flex: 96px
    }

    .friends-party .friends-list li:not(:has(.friends-action)) {
        flex-wrap: nowrap
    }

    .friends-party .friends-list li:not(:has(.friends-action)) .friends-text {
        flex-basis: auto
    }

    .friend-challenge.duel-invite.is-incoming {
        white-space: normal;
        gap: 8px;
        max-width: none;
        padding: 10px 10px 10px 12px;
        left: 12px;
        right: 12px;
        translate: none
    }

    .friend-challenge.is-incoming .duel-invite-text {
        flex: 1;
        min-width: 0
    }

    .friend-challenge.is-incoming .duel-invite-text span {
        font-size: 12px
    }

    .friend-challenge.is-incoming .duel-sticker.is-small {
        flex: none;
        padding: 8px 10px;
        font-size: 15px
    }

    .friend-challenge.is-incoming .duel-invite-clock {
        min-width: 16px;
        font-size: 15px
    }
}