/*
 * Native platform demo shell.
 *
 * The theme CSS below is intentionally tiny: the rich visual contract comes
 * from client/platform/styles/{tokens,base}.css and client/platform/themes/*.
 * This file only reconciles native same-document SPAs with that demo shell.
 */

html {
    font-size: 16px;
    background: #0f172a;
}

.native-demo-nav {
    /*
     * Native standalone chrome is injected into pages whose own modules may
     * reset html/body font-size. The shared demo nav uses rems in base.css,
     * so all native standalone pages now share its canonical 16px root.
     */
    /*
     * Stacking layer for the open dropdown submenu. `.demo-game-nav`
     * (base.css) is `position: sticky; z-index: 50`, which forms a
     * stacking context; the bare `.demo-nav` header is `position: static`, so
     * an open submenu (absolutely positioned, z-index 30) would otherwise share
     * the ROOT stacking context with the game sub-nav and paint BEHIND it. We
     * promote the whole nav header to its own layer above the game sub-nav so
     * every floating menu it spawns stacks cleanly over the CASH GAMES /
     * TOURNAMENTS strip — the real cause, not a big number on the panel itself.
     */
    position: relative;
    z-index: 60;
    padding: 12px 16px;
    font-family: var(--demo-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
}

.native-demo-nav .demo-nav__inner {
    gap: 8px 12px;
}

.native-demo-nav .demo-nav__links,
.native-demo-nav .demo-nav__links.is-open {
    margin-top: 8px;
}

.native-demo-nav .demo-nav__brand,
.native-demo-nav .demo-nav__brand-text {
    font-family: var(--demo-font-display);
    font-size: 17.6px;
    font-weight: 700;
    line-height: 26.4px;
    letter-spacing: normal;
}

.native-demo-nav .demo-nav__links a {
    font-family: var(--demo-font-body);
    font-size: 15.2px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    padding: 12px 8px;
}

.native-demo-nav .demo-nav__item--dropdown {
    position: relative;
}

.native-demo-nav .demo-nav__dropdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: stretch;
    border-bottom: 1px solid var(--demo-border);
}

.native-demo-nav .demo-nav__dropdown-row > a {
    border-bottom: none;
}

.native-demo-nav .demo-nav__dropdown-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 44px;
    border: 0;
    border-left: 1px solid var(--demo-border);
    background: transparent;
    color: var(--demo-fg);
    cursor: pointer;
}

.native-demo-nav .demo-nav__dropdown-toggle:focus-visible {
    outline: 2px solid var(--demo-accent);
    outline-offset: -2px;
}

.native-demo-nav .demo-nav__dropdown-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}

.native-demo-nav .demo-nav__dropdown-toggle[aria-expanded="true"] .demo-nav__dropdown-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

.native-demo-nav .demo-nav__submenu {
    display: none;
}

.native-demo-nav .demo-nav__submenu.is-open {
    display: grid;
}

.native-demo-nav .demo-nav__submenu a {
    padding-left: 22px;
}

.native-demo-nav .demo-nav__user,
.native-demo-nav .native-demo-nav__logout-button {
    font-family: var(--demo-font-body);
    font-size: 14.4px;
    line-height: 1.5;
    letter-spacing: normal;
}

.native-demo-nav .demo-nav__user {
    gap: 12px;
}

.native-demo-nav .native-demo-nav__greeting {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    white-space: nowrap;
}

/* The compact rank chip owns its own sizing (.pe-rank-badge--nav in
 * rank.css); the shell only needs to align the wrapper with the greeting. */
.native-demo-nav .native-demo-nav__rank {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* ---- Social icon cluster (Wave 1) ---------------------------------------
 * Groups the notifications / messages / private-tables triggers into one
 * icon-only rail, fenced from the page-nav and separated from identity by a
 * hairline divider. The triggers keep their own classes + data-* (the drawer
 * scripts own them); this only restyles them inside the cluster. Theme-driven
 * via the always-emitted --demo-* tokens. Zero footprint when no trigger is
 * visible (social gated off, or before the drawer scripts hydrate). */
.native-demo-nav .demo-nav__social {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--demo-border);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 5%, transparent);
}

.native-demo-nav .demo-nav__social:not(:has(button:not([hidden]))) {
    display: none;
}

.native-demo-nav .demo-nav__social:not(:has(button:not([hidden]))) + .demo-nav__social-divider {
    display: none;
}

.native-demo-nav .demo-nav__social-divider {
    width: 1px;
    align-self: stretch;
    min-height: 24px;
    margin: 0 2px;
    background: var(--demo-border);
}

/* icon-only treatment: drop the pill padding/border/label, keep a 40px round
 * hit target. aria-label on each button preserves the accessible name. */
.native-demo-nav .demo-nav__social .pe-notifications-trigger,
.native-demo-nav .demo-nav__social .pe-dm-trigger,
.native-demo-nav .demo-nav__social .pe-private-tables-trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 999px;
    justify-content: center;
}

.native-demo-nav .demo-nav__social .pe-notifications-trigger__label,
.native-demo-nav .demo-nav__social .pe-dm-trigger__label,
.native-demo-nav .demo-nav__social .pe-private-tables-trigger__label {
    display: none;
}

/* unread counters re-anchored to the icon corner instead of trailing the label */
.native-demo-nav .demo-nav__social .pe-notifications-trigger__badge,
.native-demo-nav .demo-nav__social .pe-dm-trigger__badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-shadow: 0 0 0 2px var(--demo-card-bg);
}

.native-demo-nav .demo-nav__balance {
    gap: 5.6px;
    padding: 4px 9.6px;
}

.native-demo-nav .demo-nav__balance-icon {
    font-size: 16px;
}

.native-demo-nav .native-demo-nav__logout-button {
    padding: 9.6px 19.2px;
}

.native-demo-nav__logo {
    width: auto;
    max-width: 160px;
    height: 30px;
    max-height: 30px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.native-demo-nav__logout {
    margin: 0;
}

.native-demo-nav__logout-button {
    white-space: nowrap;
}

.native-demo-main {
    width: 100%;
}

.native-demo-page__header {
    margin-bottom: 1.25rem;
}

.native-demo-page__header p {
    margin-top: 0.4rem;
}

.native-demo-module {
    width: 100%;
}

body.demo-site[data-lobby-mode="standalone"].lobby-template .lobby-shell {
    max-width: none;
    width: 100%;
}

body.demo-site[data-lobby-mode="standalone"].lobby-template .lobby-tables {
    max-width: 1500px;
}

body.demo-site[data-lobby-mode="standalone"],
body.demo-site[data-player-history-mode="standalone"],
body.demo-site[data-player-profile-mode="standalone"],
body.demo-site[data-leaderboard-mode="standalone"],
body.demo-site[data-daily-rewards-mode="standalone"],
body.demo-site[data-mtt-mode="standalone"],
body.demo-site[data-sng-mode="standalone"],
body.demo-site[data-spg-mode="standalone"] {
    background: var(--demo-bg);
    color: var(--demo-fg);
    font-family: var(--demo-font-body);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.demo-site[data-lobby-mode="standalone"].lobby-template--midnight-pro {
    font-size: 16px;
}

body.demo-site[data-lobby-mode="standalone"] .demo-game-nav {
    font-family: var(--demo-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
}

body.demo-site[data-lobby-mode="standalone"] .demo-game-nav__scroll {
    gap: 12px;
    padding: 4px 16px;
}

body.demo-site[data-lobby-mode="standalone"] .demo-game-nav__group {
    gap: 6.4px;
}

body.demo-site[data-lobby-mode="standalone"] .demo-game-nav__divider {
    margin: 0 4px;
}

body.demo-site[data-lobby-mode="standalone"] .demo-game-nav__item {
    font-family: var(--demo-font-body);
    gap: 5.6px;
    padding: 6.4px 9.6px;
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
}

body.demo-site[data-player-history-mode="standalone"] #player-history-app,
body.demo-site[data-player-profile-mode="standalone"] #player-profile-app,
body.demo-site[data-leaderboard-mode="standalone"] #leaderboard-app,
body.demo-site[data-daily-rewards-mode="standalone"] .pe-dr,
body.demo-site[data-mtt-mode="standalone"] .pe-mtt,
body.demo-site[data-sng-mode="standalone"] .pe-sng,
body.demo-site[data-spg-mode="standalone"] .pe-spg {
    background: transparent;
    color: var(--pe-player-fg);
    font-family: var(--demo-font-body);
    line-height: 1.4;
}

body.demo-site[data-player-history-mode="standalone"] #player-history-app {
    padding: 0;
    max-width: none;
    margin: 0;
}

body.demo-site[data-player-profile-mode="standalone"] #player-profile-app {
    padding: 0;
    max-width: none;
    margin: 0;
}

body.demo-site[data-leaderboard-mode="standalone"] #leaderboard-app .lb-page {
    padding-top: 0;
    max-width: none;
    width: 100%;
    margin: 0;
}

body.demo-site[data-daily-rewards-mode="standalone"] .pe-dr,
body.demo-site[data-mtt-mode="standalone"] .pe-mtt,
body.demo-site[data-sng-mode="standalone"] .pe-sng,
body.demo-site[data-spg-mode="standalone"] .pe-spg {
    padding: 0;
    max-width: none;
    margin: 0;
}

body.demo-site[data-mtt-mode="standalone"] .mtt-head,
body.demo-site[data-sng-mode="standalone"] .sng-head,
body.demo-site[data-spg-mode="standalone"] .spg-head {
    display: none;
}

body.demo-site[data-mtt-mode="standalone"] .mtt-shell,
body.demo-site[data-sng-mode="standalone"] .sng-shell,
body.demo-site[data-spg-mode="standalone"] .spg-shell {
    gap: 12px;
}

body.demo-site[data-player-history-mode="standalone"] #player-history-app a,
body.demo-site[data-player-profile-mode="standalone"] #player-profile-app a,
body.demo-site[data-leaderboard-mode="standalone"] #leaderboard-app a,
body.demo-site[data-daily-rewards-mode="standalone"] .pe-dr a,
body.demo-site[data-mtt-mode="standalone"] .pe-mtt a,
body.demo-site[data-sng-mode="standalone"] .pe-sng a,
body.demo-site[data-spg-mode="standalone"] .pe-spg a {
    color: inherit;
}

body.demo-site[data-player-history-mode="standalone"] #player-history-app input,
body.demo-site[data-player-history-mode="standalone"] #player-history-app select,
body.demo-site[data-player-history-mode="standalone"] #player-history-app textarea,
body.demo-site[data-player-history-mode="standalone"] #player-history-app button,
body.demo-site[data-player-profile-mode="standalone"] #player-profile-app input,
body.demo-site[data-player-profile-mode="standalone"] #player-profile-app select,
body.demo-site[data-player-profile-mode="standalone"] #player-profile-app textarea,
body.demo-site[data-player-profile-mode="standalone"] #player-profile-app button,
body.demo-site[data-leaderboard-mode="standalone"] #leaderboard-app input,
body.demo-site[data-leaderboard-mode="standalone"] #leaderboard-app select,
body.demo-site[data-leaderboard-mode="standalone"] #leaderboard-app textarea,
body.demo-site[data-leaderboard-mode="standalone"] #leaderboard-app button,
body.demo-site[data-daily-rewards-mode="standalone"] .pe-dr input,
body.demo-site[data-daily-rewards-mode="standalone"] .pe-dr select,
body.demo-site[data-daily-rewards-mode="standalone"] .pe-dr textarea,
body.demo-site[data-daily-rewards-mode="standalone"] .pe-dr button,
body.demo-site[data-mtt-mode="standalone"] .pe-mtt input,
body.demo-site[data-mtt-mode="standalone"] .pe-mtt select,
body.demo-site[data-mtt-mode="standalone"] .pe-mtt textarea,
body.demo-site[data-mtt-mode="standalone"] .pe-mtt button,
body.demo-site[data-sng-mode="standalone"] .pe-sng input,
body.demo-site[data-sng-mode="standalone"] .pe-sng select,
body.demo-site[data-sng-mode="standalone"] .pe-sng textarea,
body.demo-site[data-sng-mode="standalone"] .pe-sng button,
body.demo-site[data-spg-mode="standalone"] .pe-spg input,
body.demo-site[data-spg-mode="standalone"] .pe-spg select,
body.demo-site[data-spg-mode="standalone"] .pe-spg textarea,
body.demo-site[data-spg-mode="standalone"] .pe-spg button {
    font: inherit;
}

body.demo-site[data-daily-rewards-mode="standalone"] .dr-claim,
body.demo-site[data-mtt-mode="standalone"] .mtt-refresh,
body.demo-site[data-mtt-mode="standalone"] .mtt-btn,
body.demo-site[data-sng-mode="standalone"] .sng-refresh,
body.demo-site[data-sng-mode="standalone"] .sng-btn,
body.demo-site[data-spg-mode="standalone"] .spg-refresh,
body.demo-site[data-spg-mode="standalone"] .spg-btn {
    text-decoration: none;
    appearance: none;
}

body.demo-site[data-daily-rewards-mode="standalone"] .dr-day,
body.demo-site[data-mtt-mode="standalone"] .mtt-card,
body.demo-site[data-sng-mode="standalone"] .sng-card,
body.demo-site[data-sng-mode="standalone"] .sng-modal,
body.demo-site[data-spg-mode="standalone"] .spg-card {
    box-sizing: border-box;
}

body.demo-site[data-sng-mode="standalone"] .sng-modal-overlay {
    box-sizing: border-box;
    color: var(--pe-player-fg);
    font-family: var(--demo-font-body);
}

@media (max-width: 600px) {
    body.demo-site[data-player-history-mode="standalone"] #player-history-app {
        padding: 0;
    }
}

@media (max-width: 767px) {
    .native-demo-nav .demo-nav__links.is-open ~ .demo-nav__user {
        padding: 12px 8px;
    }
}

@media (min-width: 768px) {
    .native-demo-nav {
        padding: 16px 24px;
    }

    .native-demo-nav .demo-nav__links,
    .native-demo-nav .demo-nav__links.is-open {
        gap: 8px 16px;
        margin: 0 24px;
    }

    .native-demo-nav .demo-nav__links a {
        padding: 8px 4px;
    }

    .native-demo-nav .demo-nav__dropdown-row {
        display: flex;
        align-items: center;
        border-bottom: none;
    }

    .native-demo-nav .demo-nav__dropdown-row > a {
        flex: 1 1 auto;
    }

    .native-demo-nav .demo-nav__dropdown-toggle {
        min-width: 28px;
        min-height: 36px;
        padding: 0 4px;
        border-left: none;
    }

    .native-demo-nav .demo-nav__submenu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 30;
        min-width: 190px;
        padding: 6px;
        border: 1px solid var(--demo-border);
        border-radius: var(--demo-radius);
        background: var(--demo-card-bg);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    }

    /*
     * Hover-intent bridge: an invisible strip spanning the 8px gap between the
     * parent row and the floating panel so the pointer never leaves the
     * dropdown's :hover region in transit (kills open/close flicker). Only
     * rendered while the panel is shown, so it never blocks clicks at rest.
     */
    .native-demo-nav .demo-nav__submenu::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
    }

    .native-demo-nav .demo-nav__submenu--align-end {
        right: 0;
        left: auto;
    }

    .native-demo-nav .demo-nav__submenu a {
        padding: 9px 10px;
        border-bottom: none;
        border-radius: calc(var(--demo-radius) - 2px);
        white-space: nowrap;
        transition: background-color 150ms ease, color 150ms ease;
    }

    .native-demo-nav .demo-nav__submenu a:hover,
    .native-demo-nav .demo-nav__submenu a:focus-visible {
        background: var(--demo-bg);
        color: var(--demo-accent);
    }

    .native-demo-nav .demo-nav__submenu a[aria-current="page"] {
        background: var(--demo-bg);
        color: var(--demo-accent);
        font-weight: 600;
    }

    /*
     * Keyboard open: focusing the parent link, the toggle, or any submenu item
     * reveals the panel (any pointer type). The nav script's Esc handler blurs
     * the focused control so :focus-within releases and the panel closes.
     */
    .native-demo-nav .demo-nav__item--dropdown:focus-within > .demo-nav__submenu {
        display: grid;
    }

    .native-demo-nav .demo-nav__item--dropdown:focus-within .demo-nav__dropdown-chevron {
        transform: rotate(225deg) translate(-2px, -2px);
    }
}

/*
 * Pointer-driven open: hover reveals the panel only on devices with a true
 * hover-capable fine pointer, so touch / hybrid screens fall through to the
 * tap-toggle (data-platform-dropdown-toggle) JS instead of fighting it.
 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .native-demo-nav .demo-nav__item--dropdown:hover > .demo-nav__submenu {
        display: grid;
    }

    .native-demo-nav .demo-nav__item--dropdown:hover .demo-nav__dropdown-chevron {
        transform: rotate(225deg) translate(-2px, -2px);
    }
}

/* ==========================================================================
 * Mobile native-like shell (VS Code Ship 1) — MOBILE ONLY.
 *
 * Below the 768px breakpoint the platform stops being "a responsive website
 * with a hamburger" and becomes an app: a slim top bar (logo + balance + rank
 * chip), a fixed bottom tab bar (4 primary tabs + "More"), and an off-canvas
 * "More" sheet that hosts the relocated nav links + identity +
 * Sign out. Desktop (>=768px) is byte-identical to before: every element below
 * is display:none by default and the `.demo-nav__drawer` wrapper is
 * `display:contents`, so links + user keep flowing inline in the top bar.
 *
 * The triggers/forms owned by the drawer scripts + the logout JS are NOT
 * duplicated — the single `.demo-nav__user` logout form is physically relocated
 * into the sheet via CSS, never re-emitted.
 * ====================================================================== */

/* Desktop default: drawer transparent to layout, mobile chrome absent. */
.native-demo-nav .demo-nav__drawer {
    display: contents;
}

.native-demo-nav .demo-nav__drawer .native-more__links {
    display: none;
}

.native-demo-nav__mini,
.native-tabbar,
.native-demo-nav__backdrop,
.native-more__handle,
.native-more__head {
    display: none;
}

/* More-sheet rank card: hidden by default. On desktop the drawer is
 * display:contents, so the card must never surface in the inline top-bar
 * identity cluster — it is painted only inside the off-canvas "More" sheet
 * (mobile rules below). */
.native-demo-nav .demo-nav__rank-card {
    display: none;
}

@media (max-width: 767px) {
    /* ---- Slim top bar : logo (left) + balance + rank chip (right) -------- */
    .native-demo-nav {
        /* Deterministic bottom tab-bar height (chrome only, excl. safe-area).
           Tab min-height 56px + 1px border-top. Inherited by both the tab bar
           and the "More" sheet so the sheet can clear the bar exactly. */
        --native-tabbar-height: 57px;
        padding: 8px 14px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    .native-demo-nav .demo-nav__inner {
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        margin-top: 0;
    }

    .native-demo-nav .demo-nav__links,
    .native-demo-nav .demo-nav__links.is-open {
        margin-top: 0;
    }

    .native-demo-nav .demo-nav__brand {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* No hamburger in app mode. */
    .native-demo-nav .demo-nav__toggle {
        display: none;
    }

    .native-demo-nav__mini {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    .native-demo-nav__mini .demo-nav__balance {
        padding: 4px 9px;
    }

    /* ---- Off-canvas "More" sheet (the relocated drawer) ----------------- */
    .native-demo-nav .demo-nav__drawer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        max-height: 88vh;
        max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
        margin: 0;
        /* Clear the full tab-bar footprint (height + safe-area) plus a 16px
           breath so the last item ("Sign out") is never hidden under the bar. */
        padding: 6px 16px calc(var(--native-tabbar-height, 57px) + 16px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        background: var(--demo-card-bg);
        border-top: 1px solid var(--demo-border);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .42);
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-bottom: calc(var(--native-tabbar-height, 57px) + 16px + env(safe-area-inset-bottom, 0px));
        transform: translateY(102%);
        transition: transform 280ms cubic-bezier(.22, .61, .36, 1);
    }

    .native-demo-nav .demo-nav__drawer:not(.is-open) {
        pointer-events: none;
    }

    .native-demo-nav .demo-nav__drawer.is-open {
        transform: translateY(0);
    }

    /* Sheet chrome (only painted here). */
    .native-more__handle {
        display: block;
        flex: 0 0 auto;
        width: 40px;
        height: 4px;
        margin: 4px auto 12px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--demo-fg) 22%, transparent);
    }

    .native-more__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 4px;
    }

    .native-more__title {
        font-family: var(--demo-font-display);
        font-size: 16px;
        font-weight: 700;
        color: var(--demo-fg);
    }

    .native-more__close {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--demo-border);
        border-radius: 999px;
        background: transparent;
        color: var(--demo-fg);
        cursor: pointer;
    }

    .native-more__close svg {
        width: 20px;
        height: 20px;
    }

    .native-more__close:focus-visible {
        outline: 2px solid var(--demo-accent);
        outline-offset: 2px;
    }

    /* Links list inside the sheet (override base.css mobile display:none). */
    .native-demo-nav .demo-nav__drawer .demo-nav__links,
    .native-demo-nav .demo-nav__drawer .demo-nav__links.is-open {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        border-top: none;
        order: 0;
    }

    .native-demo-nav .demo-nav__drawer #native-demo-nav-links {
        display: none;
    }

    .native-demo-nav .demo-nav__drawer .native-more__links {
        display: flex;
    }

    .native-demo-nav .demo-nav__drawer .native-more__item {
        appearance: none;
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        gap: 14px;
        padding: 12px 2px;
        border: 0;
        border-bottom: 1px solid var(--demo-border);
        border-radius: 0;
        background: none;
        color: var(--demo-fg);
        font: inherit;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .native-demo-nav .demo-nav__drawer .native-more__social.pe-notifications-trigger,
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-dm-trigger,
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-private-tables-trigger {
        flex-direction: row;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 48px;
        justify-content: flex-start;
        gap: 14px;
        padding: 12px 2px;
        border: 0;
        border-bottom: 1px solid var(--demo-border);
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--demo-fg);
        font-weight: inherit;
        line-height: normal;
        transform: none;
    }

    .native-demo-nav .demo-nav__drawer .native-more__social.pe-notifications-trigger:hover,
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-dm-trigger:hover,
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-private-tables-trigger:hover,
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-notifications-trigger[aria-expanded="true"],
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-dm-trigger[aria-expanded="true"],
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-private-tables-trigger[aria-expanded="true"] {
        background: none;
        border-color: var(--demo-border);
    }

    .native-demo-nav .demo-nav__drawer .native-more__social.pe-notifications-trigger:active,
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-dm-trigger:active,
    .native-demo-nav .demo-nav__drawer .native-more__social.pe-private-tables-trigger:active {
        transform: none;
    }

    .native-demo-nav .demo-nav__drawer .native-more__item[aria-current="page"] {
        color: var(--demo-accent);
    }

    .native-demo-nav .demo-nav__drawer .native-more__icon {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        color: currentColor;
    }

    .native-demo-nav .demo-nav__drawer .native-more__icon svg {
        display: block;
        width: 22px;
        height: 22px;
    }

    .native-demo-nav .demo-nav__drawer .native-more__label {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        line-height: 1.4;
    }

    .native-demo-nav .demo-nav__drawer .native-more__action .pe-notifications-trigger__badge,
    .native-demo-nav .demo-nav__drawer .native-more__action .pe-dm-trigger__badge {
        position: static;
        top: auto;
        right: auto;
        flex: 0 0 auto;
        margin-left: auto;
        box-shadow: none;
    }

    /* Identity / Sign out block inside the sheet (override base mobile rule
     * that hides `.demo-nav__user`). No top divider — the nav list already
     * carries its own separators, and the rank card / Sign out read as their
     * own blocks, so a second full-width line above them is redundant. */
    .native-demo-nav .demo-nav__drawer .demo-nav__user {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        order: 1;
        margin-top: 8px;
        padding-top: 12px;
    }

    /* The top-bar mini owns the balance on mobile — drop the duplicate here. */
    .native-demo-nav .demo-nav__drawer .demo-nav__balance {
        display: none;
    }

    /* Desktop keeps the fixed social cluster; mobile gets social as placeable
     * modules in `.native-more__links` / `.native-tabbar` instead. */
    .native-demo-nav .demo-nav__drawer .demo-nav__social {
        display: none;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__social-divider {
        display: none;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-notifications-trigger,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-dm-trigger,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-private-tables-trigger {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 48px;
        justify-content: flex-start;
        gap: 14px;
        padding: 12px 2px;
        border: 0;
        border-bottom: 1px solid var(--demo-border);
        border-radius: 0;
        background: none;
        color: var(--demo-fg);
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-notifications-trigger__icon,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-dm-trigger__icon,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-private-tables-trigger__icon {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-notifications-trigger__icon svg,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-dm-trigger__icon svg,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-private-tables-trigger__icon svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-notifications-trigger__label,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-dm-trigger__label,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-private-tables-trigger__label {
        display: inline-block;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        font-size: 15px;
        line-height: 1.4;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-notifications-trigger__badge,
    .native-demo-nav .demo-nav__drawer .demo-nav__social .pe-dm-trigger__badge {
        position: static;
        top: auto;
        right: auto;
        flex: 0 0 auto;
        margin-left: auto;
        box-shadow: none;
    }

    .native-tabbar__tab .pe-notifications-trigger__badge,
    .native-tabbar__tab .pe-dm-trigger__badge {
        top: 6px;
        right: 18%;
    }

    /* The "Hi, <name>" greeting + its rank chip is dropped from the sheet: the
     * rank card already surfaces the rank, and removing this line lets Sign out
     * sit cleanly below the card. (Desktop top-bar greeting is unaffected — this
     * rule is mobile-only.) */
    .native-demo-nav .demo-nav__drawer .native-demo-nav__greeting {
        display: none;
    }

    .native-demo-nav .demo-nav__drawer .native-demo-nav__logout {
        flex: 1 1 100%;
    }

    /* Sign out reads as a prominent filled CTA in the sheet — same themed
     * button color the lobby Join CTAs use (--demo-button-bg / --demo-button-fg,
     * driven per theme by --pe-platform-button-*), falling back to the nav
     * accent so it always stands out whatever the active theme. */
    .native-demo-nav .demo-nav__drawer .native-demo-nav__logout-button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        border: 0;
        border-radius: var(--demo-radius, 12px);
        background: var(--demo-button-bg, var(--demo-accent, #e7b94e));
        color: var(--demo-button-fg, var(--demo-bg, #0b1411));
        font-weight: 700;
        transition: filter 150ms ease;
    }

    .native-demo-nav .demo-nav__drawer .native-demo-nav__logout-button:hover {
        filter: brightness(1.08);
        text-decoration: none;
    }

    .native-demo-nav .demo-nav__drawer .native-demo-nav__logout-button:focus-visible {
        outline: 2px solid var(--demo-fg, #fff);
        outline-offset: 2px;
    }

    /* ---- Backdrop ------------------------------------------------------- */
    .native-demo-nav__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        transition: opacity 240ms ease;
    }

    .native-demo-nav__backdrop[hidden] {
        display: none;
    }

    .native-demo-nav__backdrop.is-open {
        opacity: 1;
    }

    /* ---- Fixed bottom tab bar ------------------------------------------- */
    .native-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        box-sizing: border-box;
        /* Deterministic height (chrome + safe-area) so the "More" sheet can
           reference it for clearance. Matches the natural 56px tab + 1px border
           and stays stable for 3/4/5 tabs (tab count changes width, not height). */
        min-height: calc(var(--native-tabbar-height, 57px) + env(safe-area-inset-bottom, 0px));
        background: var(--demo-card-bg);
        border-top: 1px solid var(--demo-border);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 16px rgba(0, 0, 0, .18);
    }

    .native-tabbar__tab {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 56px;
        padding: 8px 4px 6px;
        border: 0;
        background: transparent;
        text-decoration: none;
        cursor: pointer;
        font-family: var(--demo-font-body);
        color: color-mix(in srgb, var(--demo-fg) 58%, transparent);
        transition: color 160ms ease;
    }

    .native-tabbar .native-tabbar__social.pe-notifications-trigger,
    .native-tabbar .native-tabbar__social.pe-dm-trigger,
    .native-tabbar .native-tabbar__social.pe-private-tables-trigger {
        flex-direction: column;
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 56px;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px 6px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: color-mix(in srgb, var(--demo-fg) 58%, transparent);
        font-family: var(--demo-font-body);
        font-weight: inherit;
        line-height: normal;
        transform: none;
    }

    .native-tabbar .native-tabbar__social.pe-notifications-trigger:hover,
    .native-tabbar .native-tabbar__social.pe-dm-trigger:hover,
    .native-tabbar .native-tabbar__social.pe-private-tables-trigger:hover,
    .native-tabbar .native-tabbar__social.pe-notifications-trigger[aria-expanded="true"],
    .native-tabbar .native-tabbar__social.pe-dm-trigger[aria-expanded="true"],
    .native-tabbar .native-tabbar__social.pe-private-tables-trigger[aria-expanded="true"] {
        background: transparent;
        border-color: transparent;
    }

    .native-tabbar .native-tabbar__social.pe-notifications-trigger:active,
    .native-tabbar .native-tabbar__social.pe-dm-trigger:active,
    .native-tabbar .native-tabbar__social.pe-private-tables-trigger:active {
        transform: none;
    }

    .native-tabbar__icon {
        display: inline-flex;
        width: 24px;
        height: 24px;
    }

    .native-tabbar .native-tabbar__social .native-tabbar__icon {
        display: inline-flex;
        width: 24px;
        height: 24px;
    }

    .native-tabbar__icon svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .native-tabbar .native-tabbar__social .native-tabbar__icon svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .native-tabbar__label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .01em;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .native-tabbar .native-tabbar__social .native-tabbar__label {
        display: block;
        max-width: 100%;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.05;
    }

    /* Active tab : accent colour + a short top indicator bar. */
    .native-tabbar__tab[aria-current="page"],
    .native-tabbar__more[aria-expanded="true"] {
        color: var(--demo-accent);
    }

    .native-tabbar__tab[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--demo-accent);
    }

    .native-tabbar__tab:focus-visible {
        outline: 2px solid var(--demo-accent);
        outline-offset: -3px;
        border-radius: 8px;
    }

    /* ---- Content clearance so the page never hides under the tab bar ---- */
    body.demo-site {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    body.demo-site.pe-more-open {
        overflow: hidden;
    }

    /* ---- Rank card (mobile "More" sheet only) --------------------------
     * Glass card cohesive with the dark sheet, tinted by the tier accent
     * (--pe-rank-tier-accent, set inline per tier). Reuses the .pe-rank-badge
     * medallion (rank.css) for tier + division/provisional; adds a big rating,
     * peak/games KPIs and a progress/placement bar. Sits at the TOP of the
     * identity block (order:-1) so it reads above "Hi, <name>" + Sign out. */
    .native-demo-nav .demo-nav__drawer .demo-nav__rank-card {
        order: -1;
        flex: 1 1 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0 0 2px;
        padding: 14px;
        box-sizing: border-box;
        border: 1px solid color-mix(in srgb, var(--pe-rank-tier-accent, var(--demo-accent)) 36%, var(--demo-border));
        border-radius: 16px;
        background:
            radial-gradient(135% 120% at 0% 0%, color-mix(in srgb, var(--pe-rank-tier-accent, var(--demo-accent)) 18%, transparent), transparent 58%),
            color-mix(in srgb, var(--demo-fg) 5%, var(--demo-card-bg));
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--demo-fg) 9%, transparent);
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-eyebrow {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--demo-fg) 60%, transparent);
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-flag {
        padding: 2px 9px;
        border-radius: 999px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--pe-rank-tier-accent, var(--demo-accent));
        background: color-mix(in srgb, var(--pe-rank-tier-accent, var(--demo-accent)) 16%, transparent);
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-main {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Keep the reused medallion from stretching in the flex row. */
    .native-demo-nav .demo-nav__drawer .demo-nav__rank-main .pe-rank-badge {
        flex: 0 1 auto;
        min-width: 0;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-rating {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-left: auto;
        line-height: 1;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-rating-val {
        font-size: 26px;
        font-weight: 800;
        color: var(--demo-fg);
        font-variant-numeric: tabular-nums;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-rating-cap {
        margin-top: 4px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--demo-fg) 54%, transparent);
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-kpis {
        display: flex;
        gap: 18px;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-kpis span {
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-kpis b {
        font-size: 14px;
        font-weight: 700;
        color: var(--demo-fg);
        font-variant-numeric: tabular-nums;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-kpis small {
        font-size: 11px;
        color: color-mix(in srgb, var(--demo-fg) 54%, transparent);
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-progress {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-bar {
        height: 7px;
        border-radius: 999px;
        overflow: hidden;
        background: color-mix(in srgb, var(--demo-fg) 12%, transparent);
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-fill {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--pe-rank-tier-accent, var(--demo-accent)) 65%, transparent),
            var(--pe-rank-tier-accent, var(--demo-accent)));
        box-shadow: 0 0 10px color-mix(in srgb, var(--pe-rank-tier-accent, var(--demo-accent)) 50%, transparent);
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-note {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: color-mix(in srgb, var(--demo-fg) 68%, transparent);
        font-variant-numeric: tabular-nums;
    }

    .native-demo-nav .demo-nav__drawer .demo-nav__rank-note--max {
        color: var(--pe-rank-tier-accent, var(--demo-accent));
    }
}

/* ==========================================================================
 * Social panels → native bottom-sheets (MOBILE ONLY).
 * Notifications inbox / Messages + Private-tables drawers render as desktop
 * popups (their own CSS); below 768px they become "More"-style bottom-sheets:
 * fixed, slide up, rounded top, internal scroll, stopping ABOVE the always-
 * visible tab bar. Every rule is prefixed `body.demo-site` to out-specify the
 * per-panel CSS (loaded after this file). Desktop (>=768px) untouched. Reuses
 * the More vocabulary: --native-tabbar-height, slide-up, padding-bottom
 * clearance, z-index below the tab bar (z:3), dim backdrop.
 * ====================================================================== */

@keyframes peSocialSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes peSocialBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 767px) {
    /* The tab-bar height token lives on .native-demo-nav; mirror it on the body
       so the social sheets (siblings appended to <body>) can read it for the
       same clearance maths the More sheet uses. */
    body.demo-site {
        --native-tabbar-height: 57px;
    }

    /* ---- Notifications inbox → bottom-sheet ----------------------------- */
    body.demo-site .pe-notifications-inbox:not([hidden]) {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: auto;
        max-width: none;
        max-height: 88vh;
        max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
        border: 1px solid var(--pe-notifications-border);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: calc(var(--native-tabbar-height, 57px) + 16px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .42);
        scroll-padding-bottom: calc(var(--native-tabbar-height, 57px) + 16px + env(safe-area-inset-bottom, 0px));
    }

    /* Notifications backdrop (added by notifications.js for tap-outside close,
       mirroring the More backdrop). Hidden by default; only ever painted on
       mobile while the inbox is open. */
    .pe-notifications-backdrop {
        display: none;
    }

    body.demo-site .pe-notifications-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(0, 0, 0, .5);
    }

    /* ---- Messages + Private-tables drawers → bottom-sheet --------------- */
    /* Container: pin to the bottom (was a full-screen inset:0 grid). It no
       longer covers the page/tab bar — the panel inside becomes the sheet. */
    body.demo-site .pe-dm-drawer:not([hidden]),
    body.demo-site .pe-private-tables-drawer:not([hidden]) {
        inset: auto 0 0 0;
        z-index: 2;
        display: block;
        height: auto;
        max-height: 88vh;
        max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
        pointer-events: none;
    }

    /* Reuse the existing scrim as a dim backdrop behind the sheet (it already
       carries a close handler). position:fixed lets it escape the now
       bottom-anchored container and cover the viewport below the sheet; the tab
       bar (z:3) paints above it, so the bar stays visible + tappable. */
    body.demo-site .pe-dm-drawer:not([hidden]) .pe-dm-drawer__scrim,
    body.demo-site .pe-private-tables-drawer:not([hidden]) .pe-private-tables-drawer__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: auto;
        background: rgba(0, 0, 0, .5);
        backdrop-filter: none;
    }

    body.demo-site .pe-dm-drawer:not([hidden]) .pe-dm-drawer__panel,
    body.demo-site .pe-private-tables-drawer:not([hidden]) .pe-private-tables-drawer__panel {
        position: relative;
        z-index: 2;
        pointer-events: auto;
        height: auto;
        max-height: 88vh;
        max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
        border-left: 0;
        border-top: 1px solid var(--pe-dm-border);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .42);
        padding-bottom: calc(var(--native-tabbar-height, 57px) + 16px + env(safe-area-inset-bottom, 0px));
    }

    body.demo-site .pe-private-tables-drawer:not([hidden]) .pe-private-tables-drawer__panel {
        border-top-color: var(--pe-pt-border);
    }

    /* Messages thread view: drop the redundant "Back + <name>" sub-header on
       mobile (the "Messages" head + its X close stay; re-tap Messages to reopen
       the list). Friends-view subhead keeps its Back — no tab equivalent. */
    body.demo-site .pe-dm-drawer [data-pe-dm-thread-view] .pe-dm-drawer__subhead {
        display: none;
    }

    /* ---- Bottom-bar active state + tactile feedback -------------------- */
    /* The social tab whose sheet is open lights up exactly like the current
       page tab (accent + short top indicator). aria-expanded is toggled by the
       drawer scripts, so the styling itself needs no extra JS. */
    body.demo-site .native-tabbar .native-tabbar__social[aria-expanded="true"] {
        color: var(--demo-accent);
    }

    body.demo-site .native-tabbar .native-tabbar__social[aria-expanded="true"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--demo-accent);
    }

    /* While a social sheet is open the active state MOVES to its tab: dim the
       current-page tab so exactly one tab reads active. On close
       (pe-sheet-open removed by the scripts) the page tab lights back up. */
    body.demo-site.pe-sheet-open .native-tabbar__tab[aria-current="page"] {
        color: color-mix(in srgb, var(--demo-fg) 58%, transparent);
    }

    body.demo-site.pe-sheet-open .native-tabbar__tab[aria-current="page"]::before {
        display: none;
    }

    /* Lock the page behind the open sheet (matches the More sheet). */
    body.demo-site.pe-sheet-open {
        overflow: hidden;
    }

    /* Tactile press feedback on every tab. A background tint works for both the
       page-link tabs and the social/More buttons (which suppress transform). */
    body.demo-site .native-tabbar__tab:active {
        background: color-mix(in srgb, var(--demo-fg) 9%, transparent);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /* Slide the sheet up from the bottom on open (replaces the desktop
       fade/translateX entries, which this out-specifies). */
    body.demo-site .pe-notifications-inbox:not([hidden]) {
        transform-origin: bottom center;
        animation: peSocialSheetUp 280ms cubic-bezier(.22, .61, .36, 1) both;
    }

    body.demo-site .pe-dm-drawer:not([hidden]) .pe-dm-drawer__panel,
    body.demo-site .pe-private-tables-drawer:not([hidden]) .pe-private-tables-drawer__panel {
        animation: peSocialSheetUp 280ms cubic-bezier(.22, .61, .36, 1) both;
    }

    body.demo-site .pe-dm-drawer:not([hidden]) .pe-dm-drawer__scrim,
    body.demo-site .pe-private-tables-drawer:not([hidden]) .pe-private-tables-drawer__scrim,
    body.demo-site .pe-notifications-backdrop:not([hidden]) {
        animation: peSocialBackdropIn 220ms ease both;
    }
}