/* Phone and tablet presentation. Loaded last by Layout.astro so it layers over the shared and
   page styles without editing them; desktop (>=1151px) is untouched except for the touch rules
   at the top, which only apply to devices without hover.

   Breakpoints: phone < 768px (tab bar + sheets), tablet 768-1150px (existing collapsed nav).
   See DESIGN.md "Mobile shell" for the rationale. */

:root {
    --m-gutter: 16px;
    --m-topbar: 56px;
    --m-tabbar: 60px;
    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-safe-left: env(safe-area-inset-left, 0px);
    --m-safe-right: env(safe-area-inset-right, 0px);
    --m-surface: rgba(255, 255, 255, 0.05);
    --m-hairline: color-mix(in srgb, var(--player-one, #08D9D6) 18%, transparent);
    --m-stroke: color-mix(in srgb, var(--player-one, #08D9D6) 30%, transparent);
    /* Emil-style curves: quick out for entering, a touch slower in-out for sheets. */
    --m-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --m-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Touch, every size ---------- */
html {
    -webkit-tap-highlight-color: transparent;
}

a, button, input, select, textarea, label, [role="button"] {
    touch-action: manipulation; /* no double-tap zoom delay */
}

/* Hover lifts and glows are for pointers. On touch they stick after a tap, so drop them and give
   a press response instead. */
@media (hover: none) {
    .race-card:hover, .race-item:hover, .feature-card:hover, .stat-card:hover, .fx-card:hover,
    .btn:hover, .cp-btn:hover, .btn-action:hover, .profile-btn:hover, .site-navbar__toggle:hover,
    .section-card:hover, .game-card:hover, .library-card:hover, .user-card:hover, .rival-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .btn:active, .cp-btn:active, .btn-action:active, .profile-btn:active, .tabbar__item:active,
    .sheet__tile:active, .sheet__row:active, .checkpoint-item:active, .race-card:active, .race-item:active {
        transform: scale(0.97);
        transition: transform 0.12s var(--m-ease-out);
    }
}

/* Text that only makes sense with room for it. */
@media (max-width: 767px) {
    .hide-phone {
        display: none;
    }
}

/* ---------- Phone shell parts are hidden on larger screens ---------- */
.tabbar, .sheet, .site-navbar__mobile-search, .overflow-more {
    display: none;
}

/* Visible keyboard focus on the new parts (and the old nav links, which had none). */
.tabbar__item:focus-visible, .sheet__tile:focus-visible, .sheet__row:focus-visible,
.sheet__me:focus-visible, .sheet__cancel:focus-visible, .site-navbar__icon-btn:focus-visible {
    outline: 2px solid var(--player-one, #08D9D6);
    outline-offset: 2px;
}

/* ======================================================================================
   Phones
   ====================================================================================== */
@media (max-width: 767px) {
    /* Safety net: nothing horizontal widens the page. Overflowing content is still fixed at the
       source (page rules below); this stops one stray element zooming the whole page out. */
    html,
    body {
        overflow-x: clip;
    }

    body.has-tabbar {
        padding-bottom: calc(var(--m-tabbar) + var(--m-safe-bottom));
    }

    body.sheet-open {
        overflow: hidden;
    }

    /* ---------- Top bar: logo, search, messages, bell ---------- */
    .site-navbar {
        position: sticky;
        top: 0;
        padding: var(--m-safe-top) 0 0;
        background: color-mix(in srgb, var(--primary-black, #252A34) 92%, transparent);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        backdrop-filter: saturate(140%) blur(14px);
        border-bottom: 1px solid var(--m-hairline);
    }

    .site-navbar__inner {
        height: var(--m-topbar);
        padding: 0 calc(var(--m-gutter) - 4px) 0 calc(var(--m-gutter) + var(--m-safe-left));
        gap: 4px;
    }

    .site-navbar__brand {
        margin-right: auto;
    }

    .site-navbar__logo {
        height: 30px;
    }

    .site-navbar__toggle {
        display: none !important;
    }

    /* The collapsed-menu panel becomes an inline row holding just Messages and the bell; links,
       search and the profile button live in the tab bar and More sheet. */
    .site-navbar__links,
    .site-navbar__links.is-open {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 0;
        min-width: 0;
        border: 0;
        border-radius: 0;
        background: none !important;
        box-shadow: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        visibility: visible;
        transition: none;
    }

    .site-navbar__link,
    .site-navbar__search,
    .nav-profile {
        display: none !important;
    }

    .site-navbar__icon-btn,
    .nav-bell__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--primary-text, #f7f7f7);
        font-size: 1.2rem;
        text-decoration: none;
        position: relative;
    }

    .site-navbar__icon-btn svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .nav-bell__button:active,
    .site-navbar__icon-btn:active {
        background: var(--m-surface);
    }

    .nav-bell__count {
        position: absolute;
        top: 4px;
        right: 2px;
        margin: 0;
        min-width: 18px;
        height: 18px;
        font-size: 0.68rem;
        box-shadow: 0 0 0 2px var(--primary-black, #252A34);
    }

    /* Bell list: a full-width panel under the top bar instead of a 340px dropdown. */
    .nav-bell__menu {
        position: fixed;
        top: calc(var(--m-topbar) + var(--m-safe-top) + 6px);
        left: 8px;
        right: 8px;
        width: auto;
        max-height: min(70vh, calc(100dvh - var(--m-topbar) - var(--m-tabbar) - var(--m-safe-top) - var(--m-safe-bottom) - 24px));
        margin: 0;
        padding: 6px;
        border-radius: 16px;
        overscroll-behavior: contain;
        transform-origin: top right;
        animation: m-pop 0.2s var(--m-ease-out);
    }

    .nav-bell__item {
        padding: 12px;
        font-size: 0.95rem;
    }

    .nav-bell__empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 28px 12px;
        text-align: center;
    }

    .nav-bell__empty span {
        font-size: 1.8rem;
    }

    .nav-bell__empty a {
        color: var(--player-one, #08D9D6);
        font-weight: 600;
        font-size: 0.9rem;
    }

    .site-navbar__mobile-search {
        display: inline-flex;
    }

    /* ---------- Tab bar ---------- */
    .tabbar {
        position: fixed;
        z-index: 1300;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: calc(var(--m-tabbar) + var(--m-safe-bottom));
        padding: 0 var(--m-safe-right) var(--m-safe-bottom) var(--m-safe-left);
        background: color-mix(in srgb, var(--primary-black, #252A34) 94%, transparent);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        backdrop-filter: saturate(140%) blur(14px);
        border-top: 1px solid var(--m-hairline);
    }

    .tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        padding: 6px 0 4px;
        border: 0;
        background: none;
        font: inherit;
        color: rgba(247, 247, 247, 0.62);
        text-decoration: none;
        cursor: pointer;
        position: relative;
    }

    .tabbar__icon {
        position: relative;
        display: grid;
        place-items: center;
        width: 52px;
        height: 30px;
        border-radius: 999px;
        transition: background-color 0.2s var(--m-ease-out);
    }

    .tabbar__icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tabbar__label {
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.01em;
    }

    .tabbar__item.is-active {
        color: var(--player-one, #08D9D6);
    }

    .tabbar__item.is-active .tabbar__icon {
        background: color-mix(in srgb, var(--player-one, #08D9D6) 14%, transparent);
    }

    .tabbar__item.is-active svg {
        stroke-width: 2.1;
    }

    .tabbar__badge {
        position: absolute;
        top: -3px;
        left: 30px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--player-two, #FF2E63);
        color: #fff;
        font-size: 0.66rem;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 0 0 2px var(--primary-black, #252A34);
    }

    .tabbar__badge[hidden] {
        display: none;
    }

    /* More tab: a dot, not a number (the count is on the Messages tile inside). */
    #tabMoreBadge {
        min-width: 10px;
        width: 10px;
        height: 10px;
        padding: 0;
        top: 1px;
        left: 34px;
        font-size: 0;
    }

    /* While typing, the keyboard covers the bottom of the screen; the tab bar would ride on top
       of it on Android. nav.js adds this class while a text field has focus. */
    body.keyboard-open .tabbar {
        display: none;
    }

    body.keyboard-open.has-tabbar {
        padding-bottom: 0;
    }

    /* ---------- Bottom sheets ---------- */
    .sheet {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2800;
    }

    .sheet[hidden] {
        display: none;
    }

    .sheet__scrim {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        transition: opacity 0.24s var(--m-ease-out);
    }

    .sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: calc(100dvh - var(--m-safe-top) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px calc(var(--m-gutter) + var(--m-safe-right)) calc(var(--m-gutter) + var(--m-safe-bottom)) calc(var(--m-gutter) + var(--m-safe-left));
        border-radius: 20px 20px 0 0;
        background: var(--primary-black, #252A34);
        border-top: 1px solid var(--m-stroke);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
        transform: translateY(100%);
        transition: transform 0.3s var(--m-ease-drawer);
        outline: none;
    }

    .sheet.is-open .sheet__scrim {
        opacity: 1;
    }

    .sheet.is-open .sheet__panel {
        transform: translateY(0);
    }

    .sheet__grabber {
        width: 40px;
        height: 5px;
        margin: 2px auto 12px;
        border-radius: 999px;
        background: rgba(247, 247, 247, 0.25);
    }

    .sheet__title {
        margin: 0 4px 10px;
        font-size: 0.85rem;
        font-weight: 600;
        opacity: 0.7;
    }

    .sheet__me {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 14px;
        background: var(--m-surface);
        border: 1px solid var(--m-hairline);
        color: inherit;
        text-decoration: none;
    }

    .sheet__me-avatar {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--player-one, #08D9D6), var(--player-two, #FF2E63));
    }

    .sheet__me-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sheet__me-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
    }

    .sheet__me-name {
        font-weight: 700;
        font-size: 1.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sheet__me-sub {
        font-size: 0.85rem;
        opacity: 0.65;
    }

    .sheet__chevron {
        font-size: 1.5rem;
        opacity: 0.5;
    }

    .sheet__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }

    .sheet__tile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 78px;
        padding: 10px 4px;
        border-radius: 14px;
        background: var(--m-surface);
        color: inherit;
        text-decoration: none;
        text-align: center;
    }

    .sheet__tile.is-active {
        background: color-mix(in srgb, var(--player-one, #08D9D6) 14%, transparent);
        color: var(--player-one, #08D9D6);
    }

    .sheet__tile-icon {
        font-size: 1.45rem;
        line-height: 1;
    }

    .sheet__tile-label {
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .sheet__tile-badge {
        top: 8px;
        left: auto;
        right: 10px;
    }

    .sheet__list {
        display: flex;
        flex-direction: column;
        border-radius: 14px;
        overflow: hidden;
        background: var(--m-surface);
    }

    .sheet__row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 0 16px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: none;
        color: inherit;
        font: inherit;
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .sheet__row:last-child {
        border-bottom: 0;
    }

    .sheet__row > span {
        width: 1.5rem;
        text-align: center;
    }

    .sheet__row--danger {
        color: color-mix(in srgb, var(--player-two, #FF2E63) 80%, #fff);
    }

    .sheet__cancel {
        width: 100%;
        min-height: 50px;
        margin-top: 10px;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.08);
        color: inherit;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    /* Third-party floating widgets (Ko-fi on Settings) sit above the tab bar, not under it. */
    body.has-tabbar .floatingchat-container-wrap,
    body.has-tabbar .floatingchat-container-wrap-mobi,
    body.has-tabbar .floating-chat-kofi-popup-iframe {
        bottom: calc(var(--m-tabbar) + var(--m-safe-bottom) + 8px) !important;
    }

    /* ---------- Toasts and dialogs ---------- */
    .cp-toasts {
        left: var(--m-gutter);
        right: var(--m-gutter);
        bottom: calc(var(--m-tabbar) + var(--m-safe-bottom) + 12px);
        max-width: none;
        align-items: stretch;
    }

    body:not(.has-tabbar) .cp-toasts {
        bottom: calc(var(--m-safe-bottom) + 16px);
    }

    /* Confirm/prompt dialogs become bottom sheets: reachable with a thumb, and the destructive
       button sits away from where the opener was tapped. */
    .cp-dialog-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .cp-dialog {
        width: 100%;
        max-height: calc(100dvh - var(--m-safe-top) - 24px);
        overflow-y: auto;
        padding: 22px calc(var(--m-gutter) + 4px) calc(var(--m-gutter) + var(--m-safe-bottom));
        border-radius: 20px 20px 0 0;
        border-width: 1px 0 0;
        animation: m-rise 0.3s var(--m-ease-drawer);
    }

    .cp-dialog__actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .cp-dialog__actions .cp-btn {
        width: 100%;
        min-height: 48px;
    }

    /* Page-level modals (.modal > .modal-content on race pages) get the same sheet treatment. */
    .modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal .modal-content {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--m-safe-top) - 24px);
        overflow-y: auto;
        margin: 0 !important;
        padding: 22px calc(var(--m-gutter) + 4px) calc(var(--m-gutter) + var(--m-safe-bottom)) !important;
        border-radius: 20px 20px 0 0 !important;
        animation: m-rise 0.3s var(--m-ease-drawer);
    }

    /* ---------- Page frame ---------- */
    .container,
    .page-container,
    main {
        padding-left: calc(var(--m-gutter) + var(--m-safe-left)) !important;
        padding-right: calc(var(--m-gutter) + var(--m-safe-right)) !important;
        padding-top: 16px !important;
        padding-bottom: 24px !important;
    }

    /* Nested: the outer container already pads. */
    .container .container,
    main .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    h1 {
        font-size: clamp(1.5rem, 6.5vw, 1.85rem);
        line-height: 1.2;
        letter-spacing: -0.01em;
    }

    h2 {
        font-size: clamp(1.2rem, 5vw, 1.4rem);
        line-height: 1.3;
    }

    p {
        font-size: 1rem;
    }

    /* Hero headers (the Gradient Frame) are a big block on a phone: tighten them. */
    header,
    .fx-titlebar,
    .fx-hero,
    .page-header,
    .profile-header {
        padding: 18px 16px !important;
        margin-bottom: 16px !important;
        border-radius: 16px !important;
        text-align: left;
    }

    header p,
    .fx-titlebar p {
        font-size: 0.95rem;
        opacity: 0.8;
    }

    .fx-titlebar h1,
    .fx-hero h1 {
        font-size: clamp(1.5rem, 6.5vw, 1.85rem) !important;
    }

    .section-card,
    .fx-panel,
    .section,
    .stat-card,
    .settings-card,
    .profile-card,
    .activity-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .section-title,
    .fx-panel > h2,
    .fx-panel__title {
        font-size: 1.15rem !important;
    }

    /* One column for every shared grid; minmax(240px) tracks overflow a 320px screen. */
    .content-grid,
    .feature-grid,
    .card-grid,
    .races-grid,
    .settings-grid,
    .rival-list,
    .message-columns,
    .card-row,
    .race-content {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .stats-grid,
    .progress-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    img, video, canvas, iframe {
        max-width: 100%;
    }

    /* Wide tables scroll inside their own box instead of pushing the page sideways. */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- Controls ---------- */
    .btn,
    .cp-btn,
    .btn-action,
    button.btn-primary,
    button.btn-secondary {
        min-height: 44px;
    }

    /* 16px stops iOS zooming into focused fields. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px;
    }

    .race-actions .btn,
    .race-actions .view-rival-btn {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        justify-content: center;
    }

    .race-actions .is-overflowed {
        display: none !important;
    }

    .overflow-more:not([hidden]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* Tabs (profile/community style) scroll sideways rather than wrapping into a pile. */
    .tabs,
    .fx-tabs,
    .profile-tabs,
    .community-tabs {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }

    .tabs::-webkit-scrollbar,
    .fx-tabs::-webkit-scrollbar,
    .profile-tabs::-webkit-scrollbar,
    .community-tabs::-webkit-scrollbar {
        display: none;
    }

    .tabs > *,
    .fx-tabs > *,
    .profile-tabs > *,
    .community-tabs > * {
        flex: none;
        scroll-snap-align: start;
        min-height: 44px;
    }

    .empty-state {
        padding: 32px 16px !important;
    }

    .empty-state-icon {
        font-size: 3rem !important;
    }

    /* ---------- Footer: compact, above the tab bar ---------- */
    footer {
        padding-left: var(--m-gutter) !important;
        padding-right: var(--m-gutter) !important;
        font-size: 0.85rem;
    }
}

/* ======================================================================================
   Phones: shared patterns
   ====================================================================================== */
@media (max-width: 767px) {
    /* Compact stat tiles. Desktop shows 4 big cards; on a phone that's two screens of scrolling
       before any content, so they become a dense 2x2 (icon, figure, label). */
    .stats-grid,
    .stats-overview,
    .race-stats,
    .fx-stats,
    .profile-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    :is(.stats-grid, .stats-overview, .race-stats, .fx-stats, .profile-stats-row) > :is(.stat-card, .stat-box, .stat-item, .fx-stat) {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "icon value" "icon label";
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
        min-height: 0;
        padding: 12px !important;
        border-radius: 12px !important;
        border-width: 1px !important;
        text-align: left !important;
    }

    :is(.stats-grid, .stats-overview, .race-stats, .fx-stats) .stat-icon {
        grid-area: icon;
        font-size: 1.4rem !important;
        margin: 0 !important;
    }

    :is(.stats-grid, .stats-overview, .race-stats, .fx-stats, .profile-stats-row) .stat-value {
        grid-area: value;
        font-size: 1.35rem !important;
        line-height: 1.15;
        margin: 0 !important;
    }

    :is(.stats-grid, .stats-overview, .race-stats, .fx-stats, .profile-stats-row) .stat-label {
        grid-area: label;
        font-size: 0.78rem !important;
        line-height: 1.25;
        opacity: 0.7;
        margin: 0 !important;
    }

    /* Tiles without an icon: the figure and label stack in one column. */
    :is(.stats-grid, .stats-overview, .race-stats, .fx-stats, .profile-stats-row) > :not(:has(.stat-icon)) {
        grid-template-columns: 1fr;
        grid-template-areas: "value" "label";
    }

    /* Inline text links and footer links: give them a finger-sized hit area without moving the
       text (padding plus an equal negative margin). */
    .fx-inline-link,
    .view-all,
    footer a {
        display: inline-block;
        padding: 10px 6px;
        margin: -10px -6px;
    }

    footer a {
        margin: -4px -6px;
        padding: 4px 6px;
        min-height: 32px;
        line-height: 24px;
    }
}

/* ---------- Active race (/checklist) ---------- */
@media (max-width: 767px) {
    [data-page="checklist"] .race-header {
        padding: 16px !important;
        margin-bottom: 12px;
        border-radius: 16px;
    }

    [data-page="checklist"] .race-header::before {
        border-radius: 16px;
    }

    [data-page="checklist"] .race-title-section {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
        margin-bottom: 12px;
    }

    [data-page="checklist"] .race-title {
        font-size: 1.45rem !important;
        line-height: 1.2;
        margin-bottom: 2px;
        overflow-wrap: anywhere;
    }

    [data-page="checklist"] .race-game {
        font-size: 0.95rem;
    }

    /* Two by two: Invite, Timer, View rival, More. */
    [data-page="checklist"] .race-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    [data-page="checklist"] .race-actions > :is(.btn, .view-rival-btn) {
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 0.92rem;
        justify-content: center;
        border-radius: 14px;
        box-shadow: none;
    }

    [data-page="checklist"] .view-rival-btn span {
        white-space: nowrap;
    }

    [data-page="checklist"] .timer-display {
        font-size: 1.9rem;
        margin: 4px 0 12px;
        letter-spacing: 0.04em;
        font-variant-numeric: tabular-nums;
    }

    [data-page="checklist"] .race-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    /* "3/8 objectives" sits on the progress bar below, so the total tile goes. */
    [data-page="checklist"] .race-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    [data-page="checklist"] .race-stats .stat-box:nth-child(2) {
        display: none !important;
    }

    [data-page="checklist"] .race-stats .stat-box {
        grid-template-columns: 1fr;
        grid-template-areas: "value" "label";
        padding: 8px 4px !important;
        text-align: center !important;
    }

    [data-page="checklist"] .race-stats .stat-value {
        font-size: 1.1rem !important;
    }

    [data-page="checklist"] .race-stats .stat-label {
        font-size: 0.68rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Standings first, then the checklist, then chat and the rest. */
    [data-page="checklist"] .race-content > div:not(.section-card) {
        display: contents;
    }

    [data-page="checklist"] .participants-section { order: 1; }
    [data-page="checklist"] .race-content > .section-card:first-child { order: 2; }
    [data-page="checklist"] .race-chat { order: 3; }
    [data-page="checklist"] .race-content > div > .section-card:last-child { order: 4; }

    [data-page="checklist"] .race-content > div > .section-card {
        margin: 0 !important;
    }

    [data-page="checklist"] .section-header {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px !important;
    }

    [data-page="checklist"] .section-title {
        font-size: 1.15rem !important;
        flex: 1 1 100%;
    }

    [data-page="checklist"] .section-header > .btn {
        white-space: nowrap;
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
        padding: 8px 12px;
        font-size: 0.92rem;
    }

    [data-page="checklist"] .section-header > .btn.hidden {
        display: none;
    }

    /* Compact standings: one row per player. */
    [data-page="checklist"] .participants-section .section-header {
        margin-bottom: 8px !important;
    }

    [data-page="checklist"] .participant-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
    }

    [data-page="checklist"] .participant-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 !important;
    }

    [data-page="checklist"] .participant-avatar-large {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        font-size: 1rem !important;
    }

    [data-page="checklist"] .participant-info {
        flex: 1;
        min-width: 0;
    }

    [data-page="checklist"] .participant-name {
        font-size: 0.98rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [data-page="checklist"] .participant-status {
        font-size: 0.78rem !important;
    }

    [data-page="checklist"] .participant-progress .progress-label {
        margin-bottom: 4px;
    }

    [data-page="checklist"] .participant-progress .stat-value {
        font-size: 0.95rem !important;
        margin: 0;
    }

    /* Deaths get a label on phones (desktop shows a bare number). */
    [data-page="checklist"] .participant-progress .stat-value:first-child::before {
        content: '💀 ';
        font-size: 0.8em;
    }

    [data-page="checklist"] .rival-view-btn {
        min-width: 44px;
        min-height: 44px;
    }

    [data-page="checklist"] .progress-overview {
        margin-bottom: 12px !important;
    }

    [data-page="checklist"] .progress-bar-container .progress-bar {
        height: 18px;
    }

    [data-page="checklist"] .progress-fill {
        font-size: 0.75rem;
    }

    /* The checklist scrolls with the page: a 500px inner scroller inside a scrolling page is a
       trap for thumbs. */
    [data-page="checklist"] .checkpoint-list {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    [data-page="checklist"] .checkpoint-item {
        min-height: 58px;
        padding: 12px !important;
        gap: 12px !important;
        margin-bottom: 8px !important;
        border-width: 1px !important;
        border-radius: 12px !important;
    }

    [data-page="checklist"] .checkpoint-item.completed {
        opacity: 1;
        background: color-mix(in srgb, var(--player-one) 8%, transparent);
    }

    [data-page="checklist"] .checkpoint-item.completed .checkpoint-content {
        opacity: 0.6;
    }

    [data-page="checklist"] .custom-checkbox {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
    }

    [data-page="checklist"] .custom-checkbox::after {
        left: 9px !important;
        top: 4px !important;
    }

    [data-page="checklist"] .checkpoint-name {
        font-size: 1rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    [data-page="checklist"] .icon-btn {
        width: 40px !important;
        height: 40px !important;
    }

    [data-page="checklist"] .add-checkpoint-form .form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    [data-page="checklist"] .race-chat__form {
        gap: 8px;
    }

    [data-page="checklist"] .race-chat__form .btn {
        flex: none;
    }

    /* Rival's checklist overlay: full screen on a phone. */
    [data-page="checklist"] .rival-checklist-container {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh;
        max-height: none !important;
        border-radius: 0 !important;
        padding-top: calc(16px + var(--m-safe-top)) !important;
        padding-bottom: calc(16px + var(--m-safe-bottom)) !important;
    }
}

/* Anywhere touch is the input: the whole checkpoint row toggles it, not just the 24px box.
   The label's hit area is stretched over the row; edit/delete stay above it. */
@media (hover: none), (max-width: 767px) {
    [data-page="checklist"] .checkpoint-item {
        position: relative;
        cursor: pointer;
    }

    [data-page="checklist"] .checkpoint-item .checkbox-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }

    [data-page="checklist"] .checkpoint-item .checkpoint-actions {
        position: relative;
        z-index: 1;
    }
}

/* ---------- Dashboard ---------- */
@media (max-width: 767px) {
    /* What you're racing comes before weekly chores. */
    [data-page="dashboard"] .container {
        display: flex;
        flex-direction: column;
    }

    [data-page="dashboard"] .welcome-section { order: 1; }
    [data-page="dashboard"] .onboarding-card { order: 2; }
    [data-page="dashboard"] .status-bar { order: 3; }
    [data-page="dashboard"] .stats-grid { order: 4; }
    [data-page="dashboard"] .content-grid { order: 5; }
    [data-page="dashboard"] .challenges-card { order: 6; }
    [data-page="dashboard"] .fx-completion { order: 7; }

    [data-page="dashboard"] .welcome-section {
        padding: 18px 16px !important;
        margin-bottom: 12px !important;
        border-radius: 16px !important;
    }

    [data-page="dashboard"] .welcome-content {
        gap: 14px !important;
    }

    [data-page="dashboard"] .welcome-text h1 {
        font-size: 1.5rem !important;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    [data-page="dashboard"] .welcome-text p {
        font-size: 0.95rem;
        opacity: 0.85;
    }

    [data-page="dashboard"] .welcome-content > a,
    [data-page="dashboard"] .btn-create-race {
        display: block;
        width: 100%;
        text-decoration: none;
    }

    [data-page="dashboard"] .btn-create-race {
        min-height: 48px;
        padding: 12px 20px !important;
    }

    [data-page="dashboard"] .challenges-card,
    [data-page="dashboard"] .onboarding-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
        border-radius: 14px !important;
    }

    [data-page="dashboard"] .challenges-header h2,
    [data-page="dashboard"] .onboarding-header h2 {
        font-size: 1.1rem !important;
    }

    [data-page="dashboard"] .challenges-list {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    [data-page="dashboard"] .challenge {
        padding: 12px !important;
    }

    [data-page="dashboard"] .challenge-claim {
        min-height: 44px;
    }

    [data-page="dashboard"] .content-grid {
        margin-bottom: 12px;
    }

    [data-page="dashboard"] .content-grid > div[style] {
        gap: 12px !important;
    }

    [data-page="dashboard"] .section-header h2 {
        font-size: 1.15rem !important;
    }

    [data-page="dashboard"] .race-item {
        padding: 14px !important;
    }

    [data-page="dashboard"] .race-item .race-title {
        font-size: 1.05rem !important;
    }
}

/* ---------- My Races ---------- */
@media (max-width: 767px) {
    [data-page="races"] .page-header {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 12px !important;
    }

    [data-page="races"] .page-title-section {
        flex: 1 1 100%;
    }

    [data-page="races"] .page-header .btn,
    [data-page="races"] .page-header a {
        width: 100%;
        justify-content: center;
    }

    [data-page="races"] .stats-overview {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    [data-page="races"] .stats-overview > .stat-card {
        grid-template-columns: 1fr;
        grid-template-areas: "icon" "value" "label";
        justify-items: center;
        text-align: center !important;
        padding: 10px 4px !important;
    }

    [data-page="races"] .stats-overview .stat-icon {
        font-size: 1.1rem !important;
    }

    [data-page="races"] .stats-overview .stat-value {
        font-size: 1.15rem !important;
    }

    [data-page="races"] .stats-overview .stat-label {
        font-size: 0.68rem !important;
        text-align: center;
    }

    [data-page="races"] .filters-bar {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }
}

/* ---------- Library ---------- */
@media (max-width: 767px) {
    [data-page="library"] .library-row {
        padding-left: 0;
        padding-right: 0;
        column-gap: 12px !important;
    }

    [data-page="library"] .library-row__name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 1rem;
        line-height: 1.3;
    }

    [data-page="library"] .library-row__facts {
        display: flex;
        flex-wrap: wrap;
        gap: 0 10px;
        font-size: 0.8rem;
    }

    [data-page="library"] .library-row__facts span + span::before {
        content: '·';
        margin-right: 10px;
        opacity: 0.6;
    }

    [data-page="library"] .library-icon-btn {
        min-width: 40px;
        min-height: 40px;
    }

    [data-page="library"] .library-row__status {
        min-height: 40px !important;
    }
}

/* ---------- Achievements ---------- */
@media (max-width: 767px) {
    [data-page="achievements"] .achievements-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    [data-page="achievements"] .achievements-stats > .stat-card {
        grid-template-columns: 1fr;
        grid-template-areas: "value" "label";
        text-align: center !important;
        padding: 10px 4px !important;
    }

    [data-page="achievements"] .achievements-stats .stat-label {
        font-size: 0.7rem !important;
    }

    [data-page="achievements"] .achievements-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    /* Category filter: a sticky row of chips instead of a tall sidebar before any content.
       Horizontal scroll is the right call here: it's a short, scannable set of filters. */
    [data-page="achievements"] .sidebar {
        align-items: center;
        height: auto !important;
        position: sticky !important;
        top: calc(var(--m-topbar) + var(--m-safe-top));
        z-index: 5;
        display: flex;
        gap: 8px;
        min-width: 0;
        width: auto;
        margin: 0 calc(-1 * var(--m-gutter));
        padding: 10px var(--m-gutter) !important;
        overflow-x: auto;
        scrollbar-width: none;
        border: 0 !important;
        border-radius: 0 !important;
        background: color-mix(in srgb, var(--primary-black) 94%, transparent) !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    [data-page="achievements"] .sidebar::-webkit-scrollbar {
        display: none;
    }

    [data-page="achievements"] .sidebar-title {
        display: none;
    }

    /* The category list is wrapped in a plain div; its chips join the same row. */
    [data-page="achievements"] .sidebar > div:not([class]) {
        display: contents;
    }

    [data-page="achievements"] .filter-item {
        flex: none;
        width: auto !important;
        min-height: 40px;
        margin: 0 !important;
        padding: 8px 14px !important;
        border-radius: 999px !important;
        gap: 6px;
        white-space: nowrap;
        font-size: 0.9rem;
    }

    [data-page="achievements"] .filter-count {
        margin-left: 4px;
    }

    [data-page="achievements"] .category-header {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    [data-page="achievements"] .category-title {
        font-size: 1.25rem !important;
    }

    [data-page="achievements"] .achievements-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    [data-page="achievements"] .achievement {
        padding: 14px !important;
        gap: 12px;
    }

    [data-page="achievements"] .achievement-icon {
        font-size: 2rem !important;
    }
}

/* ---------- Leaderboards ---------- */
@media (max-width: 767px) {
    [data-page="leaderboards"] .page-header {
        text-align: left;
    }

    /* Podium side by side, like a podium: 2nd, 1st (raised), 3rd. */
    [data-page="leaderboards"] .podium-section {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    [data-page="leaderboards"] .podium-card {
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 12px 6px !important;
        border-radius: 14px !important;
        text-align: center;
    }

    [data-page="leaderboards"] .podium-second { order: 1 !important; }
    [data-page="leaderboards"] .podium-first { order: 2 !important; padding-top: 20px !important; padding-bottom: 20px !important; }
    [data-page="leaderboards"] .podium-third { order: 3 !important; }

    [data-page="leaderboards"] .podium-card > :first-child {
        font-size: 1.5rem !important;
        margin-bottom: 4px !important;
    }

    [data-page="leaderboards"] .podium-avatar {
        width: 48px !important;
        height: 48px !important;
        margin: 0 auto 6px !important;
        font-size: 1.1rem !important;
    }

    [data-page="leaderboards"] .podium-first .podium-avatar {
        width: 58px !important;
        height: 58px !important;
    }

    [data-page="leaderboards"] .podium-name {
        font-size: 0.85rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [data-page="leaderboards"] .podium-score {
        font-size: 1.05rem !important;
    }

    [data-page="leaderboards"] .leaderboard-table {
        padding: 0 !important;
        border-radius: 14px !important;
        overflow: hidden;
    }

    [data-page="leaderboards"] .table-row {
        grid-template-columns: 36px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        min-height: 56px;
    }

    /* Race tabs have Races / Wins / XP: on a phone, XP is the one that ranks you. */
    [data-page="leaderboards"] .table-row > .stat-cell:nth-child(3):not(:last-child),
    [data-page="leaderboards"] .table-row > .stat-cell:nth-child(4):not(:last-child) {
        display: none !important;
    }

    [data-page="leaderboards"] .table-row > .stat-cell:nth-child(5) {
        display: block !important;
    }

    [data-page="leaderboards"] .table-row > .stat-cell:nth-child(3):last-child {
        grid-column: auto !important;
    }

    [data-page="leaderboards"] .player-cell {
        min-width: 0;
        gap: 10px !important;
    }

    [data-page="leaderboards"] .player-cell > :last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    [data-page="leaderboards"] .player-avatar {
        width: 34px !important;
        height: 34px !important;
        flex: none;
    }

    [data-page="leaderboards"] .rank-cell {
        font-size: 1rem !important;
    }

    [data-page="leaderboards"] .stat-cell {
        font-size: 0.95rem !important;
        text-align: right !important;
    }

    [data-page="leaderboards"] .filters-section {
        justify-content: stretch;
    }

    [data-page="leaderboards"] .filters-section select {
        width: 100%;
    }
}

/* ---------- Settings: list → section ---------- */
.settings-back {
    display: none;
}

@media (max-width: 767px) {
    [data-page="settings"] .settings-layout {
        display: block !important;
    }

    /* The list. */
    [data-page="settings"] .settings-sidebar {
        display: none !important;
    }

    body.settings-home[data-page="settings"] .settings-sidebar {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 14px !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-hairline) !important;
    }

    body.settings-home[data-page="settings"] .sidebar-item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 54px;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        background: none !important;
        color: var(--primary-text) !important;
        font-weight: 500;
        white-space: nowrap;
    }

    body.settings-home[data-page="settings"] .sidebar-item:last-child {
        border-bottom: 0 !important;
    }

    body.settings-home[data-page="settings"] .sidebar-item::after {
        content: '›';
        margin-left: auto;
        font-size: 1.4rem;
        opacity: 0.4;
    }

    body.settings-home[data-page="settings"] .settings-content {
        display: none !important;
    }

    /* A section. */
    [data-page="settings"]:not(.settings-home) .page-header {
        display: none;
    }

    [data-page="settings"] .settings-back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
        margin: -4px 0 8px -6px;
        padding: 0 8px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--player-one);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    [data-page="settings"] .settings-back span {
        font-size: 1.6rem;
        line-height: 1;
        margin-top: -3px;
    }

    [data-page="settings"] .settings-content {
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    [data-page="settings"] .settings-section {
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    [data-page="settings"] .settings-section .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 6px;
    }

    [data-page="settings"] .section-description {
        font-size: 0.95rem;
        opacity: 0.8;
    }

    [data-page="settings"] .setting-item {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px !important;
    }

    [data-page="settings"] .fx-setting {
        gap: 12px;
    }

    [data-page="settings"] .save-overlay {
        bottom: calc(var(--m-tabbar) + var(--m-safe-bottom) + 12px) !important;
        left: var(--m-gutter) !important;
        right: var(--m-gutter) !important;
    }
}

/* ---------- Race results ---------- */
@media (max-width: 767px) {
    [data-page="raceresults"] .results-header {
        padding: 20px 16px !important;
        margin-bottom: 12px !important;
        border-radius: 16px !important;
    }

    [data-page="raceresults"] .trophy-icon {
        font-size: 3.2rem !important;
        margin-bottom: 4px !important;
    }

    [data-page="raceresults"] .results-title {
        font-size: 1.6rem !important;
        line-height: 1.15;
        margin-bottom: 6px !important;
    }

    [data-page="raceresults"] .results-subtitle {
        font-size: 1.02rem !important;
    }

    [data-page="raceresults"] .race-info {
        font-size: 0.88rem !important;
        margin-top: 6px !important;
    }

    [data-page="raceresults"] .race-stats-summary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    [data-page="raceresults"] .summary-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "icon value" "icon label";
        align-items: center;
        column-gap: 10px;
        padding: 12px !important;
        border-radius: 12px !important;
        text-align: left !important;
    }

    [data-page="raceresults"] .summary-icon {
        grid-area: icon;
        font-size: 1.4rem !important;
        margin: 0 !important;
    }

    [data-page="raceresults"] .summary-value {
        grid-area: value;
        font-size: 1.2rem !important;
        margin: 0 !important;
        line-height: 1.2;
    }

    [data-page="raceresults"] .summary-label {
        grid-area: label;
        font-size: 0.76rem !important;
    }

    /* Places side by side, winner raised in the middle. */
    [data-page="raceresults"] .podium-container {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-flow: column;
        align-items: end;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    [data-page="raceresults"] .podium-place {
        min-width: 0;
        margin: 0 !important;
        padding: 14px 8px !important;
        border-radius: 14px !important;
    }

    [data-page="raceresults"] .podium-second { order: 1; }
    [data-page="raceresults"] .podium-first { order: 2; padding-top: 22px !important; }
    [data-page="raceresults"] .podium-third { order: 3; }

    [data-page="raceresults"] .place-number {
        font-size: 1.8rem !important;
        margin-bottom: 4px !important;
    }

    [data-page="raceresults"] .podium-avatar {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.5rem !important;
        margin: 0 auto 8px !important;
    }

    [data-page="raceresults"] .podium-name {
        font-size: 0.98rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [data-page="raceresults"] .podium-stats {
        padding: 8px !important;
        margin-top: 8px !important;
    }

    [data-page="raceresults"] .podium-stats .stat-row {
        font-size: 0.78rem !important;
        gap: 4px;
    }

    [data-page="raceresults"] .all-participants {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    [data-page="raceresults"] .action-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
    }

    [data-page="raceresults"] .action-buttons .btn {
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 10px 12px !important;
        font-size: 0.92rem !important;
        border-radius: 14px !important;
    }

    [data-page="raceresults"] .action-buttons .btn[hidden] {
        display: none;
    }
}

/* ---------- Small phones (iPhone SE / 320-360px) ---------- */
@media (max-width: 360px) {
    :root {
        --m-gutter: 12px;
    }

    .tabbar__label {
        font-size: 0.68rem;
    }

    .tabbar__icon {
        width: 46px;
    }

    .sheet__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-page="checklist"] .race-actions > :is(.btn, .view-rival-btn) {
        font-size: 0.86rem;
        padding: 8px 8px;
        white-space: nowrap;
    }

    .stats-grid,
    .progress-grid {
        gap: 8px !important;
    }
}

/* ---------- Tablet: keep the collapsed nav, but make its panel touch-sized ---------- */
@media (min-width: 768px) and (max-width: 1150px) {
    .site-navbar__links {
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-navbar__link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Active race: actions as a tidy grid instead of a column of full-width pills, all four
       stats on one row. */
    [data-page="checklist"] .race-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        width: 100%;
    }

    [data-page="checklist"] .race-actions > :is(.btn, .view-rival-btn) {
        width: 100%;
        min-height: 46px;
        justify-content: center;
    }

    [data-page="checklist"] .race-actions > [hidden] {
        display: none !important;
    }

    [data-page="checklist"] .race-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    [data-page="checklist"] .timer-display {
        font-size: 2.4rem;
        margin: 12px 0;
    }
}

@keyframes m-rise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes m-pop {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sheet__panel,
    .sheet__scrim,
    .tabbar__icon,
    .nav-bell__menu,
    .cp-dialog,
    .modal .modal-content {
        transition: none !important;
        animation: none !important;
    }
}