/* /Components/Layout/BareLayout.razor.rz.scp.css */
#blazor-error-ui[b-bbuwmvy537] {
    color-scheme: light only;
    background: #FCE6DE;
    color: #2A2522;
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 3000;
    font-weight: 600;
}

#blazor-error-ui .dismiss[b-bbuwmvy537] {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .55rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Blazor's circuit error banner (shown by blazor.web.js on an unhandled error). */
#blazor-error-ui[b-6z8t6zqodc] {
    color-scheme: light only;
    background: #FCE6DE;
    color: #2A2522;
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 3000;
    font-weight: 600;
}

#blazor-error-ui .dismiss[b-6z8t6zqodc] {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .55rem;
}

@media (max-width: 760px) {
    .pg-shell.is-immersive[b-6z8t6zqodc]  .pg-main {
        padding-bottom: 24px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4gxqqv2t7n],
.components-reconnect-repeated-attempt-visible[b-4gxqqv2t7n],
.components-reconnect-failed-visible[b-4gxqqv2t7n],
.components-pause-visible[b-4gxqqv2t7n],
.components-resume-failed-visible[b-4gxqqv2t7n],
.components-rejoining-animation[b-4gxqqv2t7n] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-4gxqqv2t7n],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-4gxqqv2t7n],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-4gxqqv2t7n],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-4gxqqv2t7n],
#components-reconnect-modal.components-reconnect-retrying[b-4gxqqv2t7n],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-4gxqqv2t7n],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-4gxqqv2t7n],
#components-reconnect-modal.components-reconnect-failed[b-4gxqqv2t7n],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-4gxqqv2t7n] {
    display: block;
}


#components-reconnect-modal[b-4gxqqv2t7n] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-4gxqqv2t7n 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-4gxqqv2t7n 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-4gxqqv2t7n 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-4gxqqv2t7n]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-4gxqqv2t7n 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-4gxqqv2t7n {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-4gxqqv2t7n {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-4gxqqv2t7n {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-4gxqqv2t7n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-4gxqqv2t7n] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-4gxqqv2t7n] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-4gxqqv2t7n] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-4gxqqv2t7n] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-4gxqqv2t7n] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-4gxqqv2t7n] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-4gxqqv2t7n 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-4gxqqv2t7n] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-4gxqqv2t7n {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dash[b-ayo99gv4yz] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 24px;
}

.dash-main[b-ayo99gv4yz],
.dash-side[b-ayo99gv4yz] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.dash-side[b-ayo99gv4yz] {
    padding-top: 4px;
}

.dash-jump[b-ayo99gv4yz] {
    position: relative;
    border-radius: 32px;
    background: var(--pg-coral);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    color: #2A2522;
}

.dash-jump-title[b-ayo99gv4yz] {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    max-width: 360px;
    color: #2A2522;
}

.dash-jump-actions[b-ayo99gv4yz] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.dash-jump-tile[b-ayo99gv4yz] {
    position: absolute;
    right: 28px;
    top: -18px;
    width: 120px;
    height: 130px;
    border-radius: 32px;
    transform: rotate(10deg);
}

.dash-recent[b-ayo99gv4yz],
.dash-ach[b-ayo99gv4yz] {
    flex: 1;
}

.dash-ach[b-ayo99gv4yz] {
    gap: 14px;
}

@media (max-width: 1000px) {
    .dash[b-ayo99gv4yz] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-side[b-ayo99gv4yz] {
        padding-top: 0;
    }
}

@media (max-width: 560px) {
    .dash-jump[b-ayo99gv4yz] {
        padding: 22px;
        border-radius: 30px;
    }

    .dash-jump-title[b-ayo99gv4yz] {
        font-size: 1.5rem;
        max-width: 200px;
    }

    .dash-jump-tile[b-ayo99gv4yz] {
        right: -6px;
        top: 20px;
    }

    .dash-jump-actions[b-ayo99gv4yz] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/Friends.razor.rz.scp.css */
.fr[b-y2is485q6z] {
    flex: 1;
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.fr-left[b-y2is485q6z] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fr-request[b-y2is485q6z] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.fr-list[b-y2is485q6z] {
    padding: 24px 26px;
    margin-top: 68px;
}

.fr-row[b-y2is485q6z] {
    padding: 14px 0;
}

.fr-menu[b-y2is485q6z] {
    position: relative;
}

.fr-more[b-y2is485q6z] {
    border: 0;
    background: transparent;
    color: var(--pg-placeholder);
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
}

.fr-more:hover[b-y2is485q6z] {
    background: var(--pg-sand);
    color: var(--pg-ink);
}

.fr-popover[b-y2is485q6z] {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    min-width: 200px;
    background: var(--pg-paper);
    border-radius: 16px;
    padding: 8px;
    box-shadow: var(--pg-shadow-modal);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fr-menu-item[b-y2is485q6z] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--pg-coral-ink);
    cursor: pointer;
    text-align: left;
}

.fr-menu-item:hover[b-y2is485q6z] {
    background: var(--pg-sand);
}

@media (max-width: 1000px) {
    .fr[b-y2is485q6z] {
        grid-template-columns: minmax(0, 1fr);
    }

    .fr-list[b-y2is485q6z] {
        margin-top: 0;
    }
}

@media (max-width: 760px) {
    .fr-list[b-y2is485q6z] {
        padding: 4px 16px;
    }

    .fr-row[b-y2is485q6z]  .pg-btn {
        padding: 8px 12px !important;
    }
}
/* /Components/Pages/Landing.razor.rz.scp.css */
.landing[b-ma14byxgke] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 0 32px 8px;
}

.landing-hero[b-ma14byxgke] {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    min-height: 480px;
}

.landing-copy[b-ma14byxgke] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.landing-body[b-ma14byxgke] {
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--pg-muted);
    max-width: 520px;
}

.landing-ctas[b-ma14byxgke] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.landing-art[b-ma14byxgke] {
    position: relative;
    height: 420px;
}

.landing-tile[b-ma14byxgke] {
    position: absolute;
    width: 170px;
    height: 180px;
    border-radius: 38px;
    box-sizing: border-box;
}

.landing-tile img[b-ma14byxgke] {
    height: 118px;
}

.landing-tile.is-target[b-ma14byxgke] {
    border: 4px dashed var(--pg-coral-ring);
}

.landing-tile.is-selected[b-ma14byxgke] {
    border: 4px solid var(--pg-ink);
    box-shadow: 0 18px 30px rgba(42, 37, 34, .18);
}

.landing-pill[b-ma14byxgke] {
    bottom: -16px;
    padding: 6px 14px;
    font-size: .9375rem;
}

.landing-modes[b-ma14byxgke] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.landing-mode[b-ma14byxgke] {
    background: var(--pg-paper);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--pg-ink);
    transition: filter .15s, transform .15s;
}

.landing-mode:hover[b-ma14byxgke] {
    color: var(--pg-ink);
    filter: brightness(.98);
    transform: translateY(-2px);
}

.landing-mode-title[b-ma14byxgke] {
    font-weight: 800;
    font-size: 1.1875rem;
}

.landing-mode-desc[b-ma14byxgke] {
    font-size: .875rem;
    color: var(--pg-muted);
    line-height: 1.4;
}

@media (max-width: 1100px) {
    .landing-modes[b-ma14byxgke] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .landing[b-ma14byxgke] {
        padding: 0;
    }

    .landing-hero[b-ma14byxgke] {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: 0;
    }

    .landing-art[b-ma14byxgke] {
        height: 340px;
        transform: scale(.8);
        transform-origin: top left;
        margin-bottom: -60px;
    }
}

@media (max-width: 520px) {
    .landing-modes[b-ma14byxgke] {
        grid-template-columns: 1fr;
    }

    .landing-art[b-ma14byxgke] {
        transform: scale(.62);
        margin-bottom: -130px;
    }
}
/* /Components/Pages/Leaderboard.razor.rz.scp.css */
.lb[b-w6vgnsp1iz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lb-head[b-w6vgnsp1iz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lb-head[b-w6vgnsp1iz]  .lb-scope {
    width: 240px;
}

.lb-grid[b-w6vgnsp1iz] {
    flex: 1;
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 24px;
}

.lb-podium[b-w6vgnsp1iz] {
    background: var(--pg-gold-tint);
    border-radius: 32px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    padding: 28px 24px 0;
    min-height: 360px;
}

.lb-place[b-w6vgnsp1iz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.lb-place[b-w6vgnsp1iz]  .lb-trophy {
    color: var(--pg-gold-trophy);
}

.lb-place-rating[b-w6vgnsp1iz] {
    font-size: .875rem;
    color: var(--pg-gold-sub);
}

.lb-plinth[b-w6vgnsp1iz] {
    width: 110px;
    border-radius: 22px 22px 0 0;
    background: var(--pg-paper);
    display: flex;
    justify-content: center;
    padding-top: 14px;
    box-sizing: border-box;
    font-size: 2.125rem;
    font-weight: 800;
}

.lb-plinth.place-1[b-w6vgnsp1iz] {
    height: 220px;
    background: #2A2522;
    color: #FBF6EE;
    font-size: 2.5rem;
}

.lb-plinth.place-2[b-w6vgnsp1iz] { height: 150px; }
.lb-plinth.place-3[b-w6vgnsp1iz] { height: 110px; }

.lb-table[b-w6vgnsp1iz] {
    padding: 10px 24px;
    min-width: 0;
}

.lb-row[b-w6vgnsp1iz] {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 100px 100px 100px;
    align-items: center;
    padding: 13px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--pg-divider);
}

.lb-row-head[b-w6vgnsp1iz] {
    padding: 12px 0;
    font-size: .8125rem;
    color: var(--pg-muted);
    font-weight: 600;
}

.lb-row .num[b-w6vgnsp1iz] {
    text-align: right;
}

.lb-player[b-w6vgnsp1iz] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lb-row-me[b-w6vgnsp1iz] {
    margin: auto -14px 14px;
    padding: 13px 14px;
    border-radius: 16px;
    border-bottom: 0;
    background: var(--pg-mint-tint);
}

@media (max-width: 1000px) {
    .lb-grid[b-w6vgnsp1iz] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lb-podium[b-w6vgnsp1iz] {
        min-height: 0;
        border-radius: 28px;
        padding: 18px 16px 0;
        gap: 10px;
    }

    .lb-plinth[b-w6vgnsp1iz] {
        width: 86px;
        font-size: 1.5rem;
        padding-top: 8px;
        border-radius: 18px 18px 0 0;
    }

    .lb-plinth.place-1[b-w6vgnsp1iz] { height: 104px; font-size: 1.75rem; }
    .lb-plinth.place-2[b-w6vgnsp1iz] { height: 70px; }
    .lb-plinth.place-3[b-w6vgnsp1iz] { height: 52px; }
}

@media (max-width: 640px) {
    .lb-head[b-w6vgnsp1iz]  .lb-scope {
        width: 100%;
    }

    .lb-table[b-w6vgnsp1iz] {
        padding: 4px 16px;
    }

    .lb-row[b-w6vgnsp1iz] {
        grid-template-columns: 34px minmax(0, 1fr) 54px 56px;
    }

    /* On phones the table keeps rank, player, win rate and rating, as in the mobile design. */
    .lb-row > :nth-child(4)[b-w6vgnsp1iz] {
        display: none;
    }

    .lb-row > :nth-child(3)[b-w6vgnsp1iz] {
        order: 5;
    }
}
/* /Components/Pages/Lobby.razor.rz.scp.css */
.lobby[b-mhwvv7suco] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
}

.lobby-main[b-mhwvv7suco] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.lobby-head[b-mhwvv7suco] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.lobby-modes[b-mhwvv7suco] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.lobby-mode[b-mhwvv7suco] {
    background: var(--pg-paper);
    border-radius: 26px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lobby-mode.is-searching[b-mhwvv7suco] {
    background: #2A2522;
    color: #FBF6EE;
}

.lobby-mode-title[b-mhwvv7suco] {
    font-size: 1.375rem;
    font-weight: 800;
    color: inherit;
}

.lobby-mode-desc[b-mhwvv7suco] {
    font-size: .875rem;
    color: var(--pg-muted);
    line-height: 1.4;
    flex: 1;
}

.lobby-mode.is-searching .lobby-mode-desc[b-mhwvv7suco] {
    color: #C9BFB3;
}

.lobby-mode[b-mhwvv7suco]  .lobby-icon-coral { color: var(--pg-coral-ink); }
.lobby-mode[b-mhwvv7suco]  .lobby-icon-gold { color: var(--pg-gold); }
.lobby-mode[b-mhwvv7suco]  .lobby-icon-mint { color: var(--pg-mint-ink); }

.lobby-find[b-mhwvv7suco] {
    margin-top: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 0;
    background: var(--pg-sand);
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
    text-align: center;
}

.lobby-find:hover:not(:disabled)[b-mhwvv7suco] { filter: brightness(.95); }
.lobby-find:disabled[b-mhwvv7suco] { color: var(--pg-dead-badge); cursor: default; }

.lobby-searching[b-mhwvv7suco] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    border-radius: 14px;
    background: #3A3430;
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
}

.lobby-searching span[b-mhwvv7suco] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.lobby-leave[b-mhwvv7suco] {
    padding: 6px 12px;
    border-radius: 10px;
    border: 0;
    background: #FBF6EE;
    color: #2A2522;
    font-weight: 600;
    font-size: .8125rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.lobby-private[b-mhwvv7suco] {
    flex: 1;
    padding: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.lobby-private-col[b-mhwvv7suco] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lobby-join[b-mhwvv7suco] {
    border-left: 1px solid var(--pg-divider);
    padding-left: 32px;
}

.lobby-friends[b-mhwvv7suco] {
    padding: 22px;
    gap: 4px;
    align-self: start;
}

.lobby-friend[b-mhwvv7suco] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.lobby-friend.is-faded[b-mhwvv7suco] {
    opacity: .55;
}

@media (max-width: 1100px) {
    .lobby[b-mhwvv7suco] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lobby-friends[b-mhwvv7suco] {
        align-self: stretch;
    }
}

@media (max-width: 760px) {
    .lobby-modes[b-mhwvv7suco] {
        grid-template-columns: 1fr;
    }

    .lobby-private[b-mhwvv7suco] {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 16px;
    }

    .lobby-join[b-mhwvv7suco] {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--pg-divider);
        padding-top: 20px;
    }
}
/* /Components/Pages/Me.razor.rz.scp.css */
.me[b-z4ocl6rgnc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.me-head[b-z4ocl6rgnc] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.me-name[b-z4ocl6rgnc] {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.me-grid[b-z4ocl6rgnc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: start;
}

.me-col[b-z4ocl6rgnc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.me-ach[b-z4ocl6rgnc] {
    padding: 16px 20px 20px;
    gap: 12px;
}

.me-ach-grid[b-z4ocl6rgnc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.me-ach-item[b-z4ocl6rgnc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.me-ach-item.is-locked[b-z4ocl6rgnc] {
    opacity: .45;
}

.me-ach-tile[b-z4ocl6rgnc] {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--pg-gold-tint);
    color: var(--pg-gold-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.me-ach-item.is-locked .me-ach-tile[b-z4ocl6rgnc] {
    background: var(--pg-sand);
    color: var(--pg-ink);
}

.me-ach-name[b-z4ocl6rgnc] {
    font-size: .6875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}

.me-history[b-z4ocl6rgnc] {
    padding: 16px 20px;
}

@media (max-width: 900px) {
    .me-grid[b-z4ocl6rgnc] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Online.razor.rz.scp.css */
/* Shares the play page's grid (B07 mirrors B04); these are the online-only pieces. */
.play-grid[b-ccrwr3laak] {
    flex: 1;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
}

.play-rail[b-ccrwr3laak] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.play-rail[b-ccrwr3laak]  .play-moves {
    flex: 1;
    min-height: 180px;
    padding: 20px 22px;
    gap: 10px;
    overflow: hidden;
}

.play-board-wrap[b-ccrwr3laak] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.play-board-wrap[b-ccrwr3laak]  .play-board {
    flex: 1;
    min-height: max(640px, calc(100vh - 120px));
}

.online-card[b-ccrwr3laak] {
    padding: 22px;
    gap: 14px;
}

.online-seat[b-ccrwr3laak] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: var(--pg-sand);
}

.online-seat.is-opp[b-ccrwr3laak] {
    background: var(--pg-coral-tint);
}

.online-seat-sub[b-ccrwr3laak] {
    font-size: .8125rem;
    color: var(--pg-coral-sub);
}

.play-head[b-ccrwr3laak] {
    display: none;
}

@media (max-width: 960px) {
    .play-grid[b-ccrwr3laak] {
        grid-template-columns: minmax(0, 1fr);
    }

    .play-rail[b-ccrwr3laak] {
        order: 2;
    }

    .play-board-wrap[b-ccrwr3laak]  .play-board {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .play-head[b-ccrwr3laak] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        height: 56px;
        margin-bottom: 8px;
    }

    .play-head-title[b-ccrwr3laak] {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
    }

    .play-board-wrap[b-ccrwr3laak]  .play-board {
        background: transparent;
        padding: 12px 0 18px;
        gap: 22px;
    }

    .play-board-wrap[b-ccrwr3laak]  .pg-status {
        background: var(--pg-paper);
    }

    .play-board-wrap[b-ccrwr3laak]  .pg-status.tone-split {
        background: var(--pg-mint-tint);
    }

    .play-board-wrap[b-ccrwr3laak]  .pg-status.tone-waiting {
        background: var(--pg-coral-tint);
    }
}
/* /Components/Pages/Play.razor.rz.scp.css */
.play-grid[b-rgg3ochza2] {
    flex: 1;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
}

.play-rail[b-rgg3ochza2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.play-match[b-rgg3ochza2] {
    padding: 22px;
    gap: 16px;
}

.play-match-title[b-rgg3ochza2] {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.play-option[b-rgg3ochza2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.play-rail[b-rgg3ochza2]  .play-moves {
    flex: 1;
    min-height: 200px;
    padding: 20px 22px;
    gap: 10px;
    overflow: hidden;
}

.play-board-wrap[b-rgg3ochza2] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.play-board-wrap[b-rgg3ochza2]  .play-board {
    flex: 1;
    min-height: max(640px, calc(100vh - 120px));
}

.play-head[b-rgg3ochza2] {
    display: none;
}

@media (max-width: 960px) {
    .play-grid[b-rgg3ochza2] {
        grid-template-columns: minmax(0, 1fr);
    }

    .play-rail[b-rgg3ochza2] {
        order: 2;
    }

    .play-board-wrap[b-rgg3ochza2]  .play-board {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    /* Phone layout from the mobile design: a back / title / restart header replaces the nav. */
    .play-head[b-rgg3ochza2] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        margin: 0 -2px 8px;
    }

    .play-head-title[b-rgg3ochza2] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .play-head[b-rgg3ochza2]  .pg-icon-btn {
        background: var(--pg-paper);
    }

    .play-board-wrap[b-rgg3ochza2]  .play-board {
        background: transparent;
        padding: 12px 0 18px;
        gap: 22px;
    }

    .play-board-wrap[b-rgg3ochza2]  .pg-status {
        background: var(--pg-paper);
    }

    .play-board-wrap[b-rgg3ochza2]  .pg-status.tone-split {
        background: var(--pg-mint-tint);
    }

    .play-board-wrap[b-rgg3ochza2]  .pg-status.tone-waiting {
        background: var(--pg-coral-tint);
    }
}

/* Four difficulty chips fit one row of the 320px rail. */
.play-option[b-rgg3ochza2]  .pg-chip {
    padding: 7px 11px;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.st[b-cj33koj34e] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.st-col[b-cj33koj34e] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.st-col-right[b-cj33koj34e] {
    padding-top: 68px;
}

.st-card[b-cj33koj34e] {
    padding: 10px 24px;
}

.st-card-title[b-cj33koj34e] {
    font-size: 1.25rem;
    font-weight: 800;
    padding: 14px 0 6px;
}

.st-row[b-cj33koj34e] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--pg-divider);
    color: var(--pg-ink);
    width: 100%;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    text-align: left;
    font: inherit;
}

.st-row:last-child[b-cj33koj34e] {
    border-bottom: 0;
}

.st-row-stack[b-cj33koj34e] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.st-link:hover[b-cj33koj34e] {
    color: var(--pg-ink);
}

.st-signout[b-cj33koj34e] {
    color: var(--pg-coral-ink);
    cursor: pointer;
}

.st-swatches[b-cj33koj34e] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.st-swatches span[b-cj33koj34e] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

@media (max-width: 900px) {
    .st[b-cj33koj34e] {
        grid-template-columns: minmax(0, 1fr);
    }

    .st-col-right[b-cj33koj34e] {
        padding-top: 0;
    }

    .st-card[b-cj33koj34e] {
        padding: 0 16px;
    }
}
/* /Components/Pages/Tutorial.razor.rz.scp.css */
.tut-exit[b-4ueisye4s2] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--pg-muted);
}

.tut-exit:hover[b-4ueisye4s2] {
    color: var(--pg-ink);
}

.tut[b-4ueisye4s2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 10px 20px 36px;
}

.tut-head[b-4ueisye4s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 760px;
    max-width: 100%;
    text-align: center;
}

.tut-progress[b-4ueisye4s2] {
    display: flex;
    gap: 6px;
    width: 100%;
}

.tut-progress span[b-4ueisye4s2] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--pg-line);
}

.tut-progress span.is-done[b-4ueisye4s2] {
    background: var(--pg-ink);
}

.tut-count[b-4ueisye4s2] {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pg-muted);
}

.tut-title[b-4ueisye4s2] {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.tut-body[b-4ueisye4s2] {
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--pg-muted);
    max-width: 620px;
}

.tut-stage[b-4ueisye4s2] {
    width: 900px;
    max-width: 100%;
    flex: 1;
    min-height: 340px;
    background: var(--pg-paper);
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    padding: 32px 20px;
    box-sizing: border-box;
}

.tut-op[b-4ueisye4s2] {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--pg-dead-badge);
}

.tut-row[b-4ueisye4s2] {
    display: flex;
    gap: 18px;
}

.tut-col[b-4ueisye4s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.tut-actions[b-4ueisye4s2] {
    width: 900px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tut-skip[b-4ueisye4s2] {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pg-muted);
}

.tut-skip:hover[b-4ueisye4s2] {
    color: var(--pg-ink);
}

@media (max-width: 760px) {
    .tut[b-4ueisye4s2] {
        gap: 18px;
        padding: 4px 20px 28px;
        align-items: stretch;
    }

    .tut-head[b-4ueisye4s2] {
        align-items: flex-start;
        text-align: left;
    }

    .tut-title[b-4ueisye4s2] {
        font-size: 2.125rem;
    }

    .tut-body[b-4ueisye4s2] {
        font-size: 1rem;
    }

    .tut-stage[b-4ueisye4s2] {
        border-radius: 32px;
        gap: 16px;
        flex-direction: column;
    }

    .tut-op[b-4ueisye4s2] {
        font-size: 2rem;
        line-height: 1;
    }

    .tut-skip[b-4ueisye4s2] {
        display: none;
    }

    .tut-actions .pg-btn:last-child[b-4ueisye4s2] {
        flex: 1;
    }
}
/* /Components/Shared/AuthShell.razor.rz.scp.css */
.auth[b-xlsr05mkvr] {
    flex: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

.auth-form-side[b-xlsr05mkvr] {
    display: flex;
    flex-direction: column;
    padding: 32px 40px;
}

.auth-form[b-xlsr05mkvr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 0;
}

.auth-panel[b-xlsr05mkvr] {
    margin: 20px;
    border-radius: 36px;
    background: var(--pg-coral);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    min-height: 560px;
}

.auth-tile[b-xlsr05mkvr] {
    position: absolute;
    width: 180px;
    height: 190px;
    border-radius: 40px;
}

.auth-panel-line[b-xlsr05mkvr] {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    max-width: 460px;
    color: #2A2522;
    position: relative;
}

@media (max-width: 900px) {
    .auth[b-xlsr05mkvr] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    /* Phone: the coral panel moves on top, as in the mobile sign-in screen. */
    .auth-panel[b-xlsr05mkvr] {
        order: -1;
        margin: 0;
        border-radius: 0 0 40px 40px;
        min-height: 0;
        height: 280px;
        padding: 24px;
    }

    .auth-panel-line[b-xlsr05mkvr] {
        display: none;
    }

    .auth-tile[b-xlsr05mkvr] {
        width: 130px;
        height: 140px;
        border-radius: 34px;
    }

    .auth-tile:first-child[b-xlsr05mkvr] {
        left: calc(50% - 140px) !important;
        top: 70px !important;
    }

    .auth-tile:nth-child(2)[b-xlsr05mkvr] {
        left: calc(50% + 8px) !important;
        top: 100px !important;
    }

    .auth-tile img[b-xlsr05mkvr] {
        height: 94px !important;
    }

    .auth-form-side[b-xlsr05mkvr] {
        padding: 22px 24px 34px;
    }

    .auth-form-side[b-xlsr05mkvr]  .pg-logo {
        display: none;
    }

    .auth-form[b-xlsr05mkvr] {
        justify-content: flex-start;
        gap: 14px;
        padding-top: 4px;
    }
}