/* ============================================================
   REGRESSION FIXES — 2026-07-13 batch
   Consolidates CSS fixes for issues that surfaced after the
   modular refactor + tab-container SPA + chat rework.
   Kept in _session-fixes.css so they load last and win.
   ============================================================ */

/* ── 1) Bottom nav position — floating-nav.css was deleted during
   the cleanup and no one added `position: fixed` back to the theme
   file. Result: the pill sat wherever the flex flow put it (weird
   spot mid-page). Restore fixed-viewport pinning. ── */
body.theme-apple .mobile-navbar.bottom-nav-floating,
html body.theme-apple nav.mobile-navbar.bottom-nav-floating {
    position: fixed !important;
    z-index: 1040;
}

/* ── 2) Hamburger toggler — square Bootstrap border around the
   3 lines was ugly, user wants just the lines. ── */
body.theme-apple .navbar-toggler,
body.theme-apple #floating-header .navbar-toggler,
body.theme-apple #floating-header button.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    padding: 8px 10px !important;
}
body.theme-apple .navbar-toggler:hover,
body.theme-apple .navbar-toggler:focus,
body.theme-apple .navbar-toggler:active {
    background: rgba(0, 0, 0, 0.04) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 8px !important;
}

/* ── 3) Content top margin — pages inside the new tab-container
   didn't inherit the mt-2/pt-5 breathing space, so content brushed
   under the notch. Force a min top offset on the tab-slot itself so
   every page has the "onder de notch" clearance the user wants back. ── */
body.theme-apple #tab-container > .tab-slot.active {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}
/* ...but not on chat pages (they use their own full-viewport layout). */
body.theme-apple.chat-active #tab-container > .tab-slot.active {
    padding-top: 0 !important;
}

/* ── 4) Dark-mode hamburger dropdown — white bg + white text = unreadable.
   Force a dark surface + light text so it matches the rest of dark mode. ── */
body.theme-apple.theme-dark #floating-header.menu-open .dropdown-menu,
body.theme-apple.theme-dark .navbar-collapse.show,
body.theme-apple.theme-dark #floating-header .navbar-collapse.show {
    background: #1C1C1E !important;
    background-color: #1C1C1E !important;
    border: 0.5px solid rgba(255, 255, 255, 0.10) !important;
    color: #F2F2F7 !important;
}
body.theme-apple.theme-dark #floating-header .navbar-collapse.show a,
body.theme-apple.theme-dark #floating-header .navbar-collapse.show .nav-link,
body.theme-apple.theme-dark #floating-header .navbar-collapse.show .dropdown-item {
    color: #F2F2F7 !important;
}
body.theme-apple.theme-dark #floating-header .navbar-collapse.show a:hover,
body.theme-apple.theme-dark #floating-header .navbar-collapse.show .nav-link:hover,
body.theme-apple.theme-dark #floating-header .navbar-collapse.show .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF !important;
}

/* ── 5) Top nav fade-on-scroll — verify the trigger. Force the
   `#ios-top-cover` visible when the scroll-detection JS marks the
   header as scrolled. Already defined in tokens/dark-mode but the
   :has() selector doesn't work in older Safari — add a class-based
   fallback on the html element the JS also sets. ── */
html.header-scrolled body.theme-apple #ios-top-cover,
body.theme-apple #floating-header.header-scrolled ~ #ios-top-cover {
    opacity: 1;
}

/* ── 5b) Icons in navbar (hamburger, logo, bell) fade WITH the header
   when scrolled — user reported the cover works but icons stayed
   visible. Apply the same opacity fade so the whole navbar disappears
   as a unit when the user scrolls, then re-appears on scroll-up. ── */
body.theme-apple #floating-header {
    transition: opacity 0.22s ease;
}
body.theme-apple #floating-header.header-scrolled .navbar-toggler,
body.theme-apple #floating-header.header-scrolled .navbar-brand,
body.theme-apple #floating-header.header-scrolled #mobile-notification-bell,
body.theme-apple #floating-header.header-scrolled #navbar-notification-bell,
body.theme-apple #floating-header.header-scrolled .navbar-brand > *,
body.theme-apple #floating-header.header-scrolled > .container-fluid > *,
body.theme-apple #floating-header.header-scrolled > .container > * {
    opacity: 0 !important;
    transition: opacity 0.22s ease;
    pointer-events: none;
}
body.theme-apple #floating-header .navbar-toggler,
body.theme-apple #floating-header .navbar-brand,
body.theme-apple #floating-header #mobile-notification-bell,
body.theme-apple #floating-header #navbar-notification-bell {
    transition: opacity 0.22s ease;
}
/* Keep the menu-open state exempted — user is interacting with the nav */
body.theme-apple #floating-header.menu-open .navbar-toggler,
body.theme-apple #floating-header.menu-open .navbar-brand,
body.theme-apple #floating-header.menu-open #mobile-notification-bell,
body.theme-apple #floating-header.menu-open #navbar-notification-bell {
    opacity: 1 !important;
    pointer-events: auto;
}

/* ============================================================
   GROUP B — Cards + badges polish (2026-07-13)
   ============================================================ */

/* ── 6) Competition cards — more vertical breathing room. The
   current padding was so tight the header text almost touched the
   dots menu. Bumps the top/bottom padding without changing width. ── */
body.theme-apple #competitions-row .competition-card,
body.theme-apple #competitions-row .card.competition-card {
    padding: 18px 16px 18px 16px !important;
    min-height: 128px;
}
body.theme-apple #competitions-row .competition-card .card-body {
    padding: 0 !important;
}

/* ── 7) Three-dots menu — closer to the corner. Was 8px inset,
   user wants it "meer in de hoek" (still inside the rounded corner
   though). 4px feels right — visually hugging the corner without
   clipping. ── */
body.theme-apple #competitions-row .competition-card-menu {
    top: 4px !important;
    right: 4px !important;
}
body.theme-apple #competitions-row .competition-card-menu .dropdown-toggle,
body.theme-apple #competitions-row .competition-card-menu .btn-link {
    width: 28px !important;
    height: 28px !important;
    padding: 2px !important;
}

/* ── 8) Upcoming / Completed / Round badges — Apple-style soft-tint
   pills: light blue background + darker blue text. Replaces the
   amber "upcoming" + solid-blue "round" that looked mismatched. ── */
body.theme-apple .upcoming-badge,
body.theme-apple .badge.upcoming-badge,
body.theme-apple .badge.bg-warning.upcoming-badge,
body.theme-apple .badge.bg-primary.upcoming-badge,
body.theme-apple .badge.bg-secondary.upcoming-badge,
body.theme-apple .match-card .badge.upcoming-badge,
body.theme-apple .rounds-badge,
body.theme-apple .badge.rounds-badge,
body.theme-apple .badge.bg-secondary.rounds-badge,
body.theme-apple .rounds-badge.rounds-badge--upcoming,
body.theme-apple .badge.rounds-badge--upcoming,
body.theme-apple .badge.bg-secondary.rounds-badge.rounds-badge--upcoming,
body.theme-apple .match-card .rounds-badge {
    background: rgba(0, 122, 255, 0.14) !important;
    background-color: rgba(0, 122, 255, 0.14) !important;
    color: var(--ios-tint) !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.02em;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}

/* Completed & Confirmed / Validating — same soft-blue Apple pill as
   the "upcoming" badge. Bootstrap's .bg-success/.bg-info/.bg-warning
   are all normalised to the iOS-tint soft blue so the badge row reads
   as one clean design system (per user's request 2026-07-13). */
body.theme-apple .completed-badge,
body.theme-apple .badge.completed-badge,
body.theme-apple .badge.bg-success.completed-badge,
body.theme-apple .badge.bg-info.completed-badge,
body.theme-apple .badge.bg-warning.completed-badge,
body.theme-apple .match-card .badge.completed-badge,
body.theme-apple .match-card .badge.bg-success,
body.theme-apple .match-card .badge.bg-info,
body.theme-apple .accordion-button .badge.bg-success.completed-badge {
    background: rgba(0, 122, 255, 0.14) !important;
    background-color: rgba(0, 122, 255, 0.14) !important;
    color: var(--ios-tint) !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.02em;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}
body.theme-apple.theme-dark .completed-badge,
body.theme-apple.theme-dark .badge.completed-badge,
body.theme-apple.theme-dark .match-card .badge.bg-success,
body.theme-apple.theme-dark .match-card .badge.bg-info,
/* Higher-specificity overrides — dark-mode.css line 2509 defines
   `html body.theme-apple.theme-dark .badge.completed-badge` in green;
   we need to beat it with `html body.theme-apple.theme-dark ...`. */
html body.theme-apple.theme-dark .badge.completed-badge,
html body.theme-apple.theme-dark .badge.bg-success.completed-badge,
html body.theme-apple.theme-dark .badge.bg-info.completed-badge,
html body.theme-apple.theme-dark .badge.bg-warning.completed-badge,
html body.theme-apple.theme-dark .match-card .badge.bg-success,
html body.theme-apple.theme-dark .match-card .badge.bg-info,
html body.theme-apple.theme-dark .accordion-button .badge.bg-success.completed-badge {
    background: rgba(10, 132, 255, 0.22) !important;
    background-color: rgba(10, 132, 255, 0.22) !important;
    color: #64B5FF !important;
}

/* ── 9) Court/Baan badge — same size, same soft-blue pill, positioned
   in the top-right of match cards like the other status badges. ── */
body.theme-apple .court-badge,
body.theme-apple .badge.court-badge,
body.theme-apple .court-badge-container .badge {
    background: rgba(0, 122, 255, 0.14) !important;
    background-color: rgba(0, 122, 255, 0.14) !important;
    color: var(--ios-tint) !important;
    border: none !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.02em;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
}
body.theme-apple .court-badge-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

/* ── Dark-mode variants for badges ── */
body.theme-apple.theme-dark .upcoming-badge,
body.theme-apple.theme-dark .badge.upcoming-badge,
body.theme-apple.theme-dark .rounds-badge,
body.theme-apple.theme-dark .badge.rounds-badge,
body.theme-apple.theme-dark .court-badge,
body.theme-apple.theme-dark .court-badge-container .badge {
    background: rgba(10, 132, 255, 0.22) !important;
    background-color: rgba(10, 132, 255, 0.22) !important;
    color: #64B5FF !important;
}
body.theme-apple.theme-dark .completed-badge,
body.theme-apple.theme-dark .badge.completed-badge {
    background: rgba(52, 199, 89, 0.22) !important;
    background-color: rgba(52, 199, 89, 0.22) !important;
    color: #6FE87F !important;
}
/* ── Tournament page accordion badges (item 11) — same treatment
   as the match-card badges above so dark-mode reads cleanly. ── */
body.theme-apple.theme-dark .accordion-button .badge.upcoming-badge,
body.theme-apple.theme-dark .accordion-button .badge.completed-badge {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* ============================================================
   GROUP C — Modals (centered + blurry backdrop + visible X)
   ============================================================ */

/* Center ALL modals vertically + horizontally. Bootstrap's default
   modal is top-aligned on mobile — we force centered on every device. */
body.theme-apple .modal-dialog,
body.theme-apple .modal .modal-dialog {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    padding: 20px 12px;
    box-sizing: border-box;
}
/* No transform reset here.
   The centring in _pages.css is left:50% / top:50% plus
   translate(-50%, -50%). Forcing translate(0,0) !important removed half of
   that pair, so the dialog's top-left corner landed on the centre of the
   screen and every modal sat low and to the right. Whatever this was
   guarding against, it broke the thing it sits next to. */
/* Compensate for the outer flex so the content sits inside the padding */
body.theme-apple .modal .modal-content {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 18px !important;
    border: 0.5px solid var(--ios-separator-soft) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20) !important;
    overflow: hidden;
}

/* Blurry backdrop — much stronger than Bootstrap default so the
   modal really "pops" and the background feels blurred out. */
body.theme-apple .modal-backdrop.show,
body.theme-apple .modal-backdrop {
    background: rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    opacity: 1 !important;
}

/* Close X — always visible, contrast-adaptive.
   Bootstrap's `.btn-close` is a background-image dark X on light bg;
   invert it and add a hover backdrop-tint so it's always readable. */
body.theme-apple .modal-content .btn-close,
body.theme-apple .modal .btn-close {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.05) !important;
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.75)' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transition: background-color 0.15s ease;
}
body.theme-apple .modal-content .btn-close:hover,
body.theme-apple .modal-content .btn-close:focus {
    background-color: rgba(0, 0, 0, 0.10) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* iOS default modal spacing — Bootstrap ships 1rem which reads cramped
   on iOS. Bumping the outer padding gives text room to breathe. Modal-
   specific overrides (higher specificity via #id) win, so this stays
   opt-out for anything already tuned. */
body.theme-apple .modal-content > .modal-header {
    padding: var(--ep-space-4) var(--ep-space-6) var(--ep-space-3);
    border-bottom: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
}
body.theme-apple .modal-content > .modal-body {
    padding: var(--ep-space-4) var(--ep-space-6);
}
body.theme-apple .modal-content > .modal-footer {
    padding: var(--ep-space-3) var(--ep-space-6) var(--ep-space-5);
    padding-bottom: max(var(--ep-space-5), env(safe-area-inset-bottom, 20px));
    border-top: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    gap: 10px;
}

/* Dark-mode X — light stroke on dark chip */
body.theme-apple.theme-dark .modal-content .btn-close,
body.theme-apple.theme-dark .modal .btn-close {
    background-color: rgba(255, 255, 255, 0.10) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
}
body.theme-apple.theme-dark .modal-content .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

/* ── Record Score modal — clean iOS sheet for both light + dark ── */
body.theme-apple #recordScoreModal .modal-content {
    background: var(--ios-surface) !important;
    color: var(--ios-fg) !important;
}
body.theme-apple #recordScoreModal .modal-header {
    background: transparent !important;
    border-bottom: 0.5px solid var(--ios-separator-soft) !important;
    padding: 16px 20px !important;
}
body.theme-apple #recordScoreModal .modal-title {
    color: var(--ios-fg) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
body.theme-apple #recordScoreModal .modal-body {
    background: transparent !important;
    padding: 18px 20px !important;
    color: var(--ios-fg) !important;
}
body.theme-apple #recordScoreModal .modal-body label,
body.theme-apple #recordScoreModal .modal-body .form-label,
body.theme-apple #recordScoreModal .modal-body .team-label,
body.theme-apple #recordScoreModal .modal-body .team-name {
    color: var(--ios-fg) !important;
    font-weight: 600;
    font-size: 14px;
}
body.theme-apple #recordScoreModal .modal-body .text-muted,
body.theme-apple #recordScoreModal .modal-body small,
body.theme-apple #recordScoreModal .modal-body .form-text {
    color: var(--ios-fg-2) !important;
}
body.theme-apple #recordScoreModal input[type="number"] {
    background: var(--ios-bg) !important;
    color: var(--ios-fg) !important;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    text-align: center !important;
    padding: 12px 8px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease;
}
body.theme-apple #recordScoreModal input[type="number"]:focus {
    border-color: var(--ios-tint) !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--ios-bg) !important;
}
body.theme-apple #recordScoreModal .modal-footer {
    background: transparent !important;
    border-top: 0.5px solid var(--ios-separator-soft) !important;
    padding: 14px 20px !important;
    gap: 10px;
}
body.theme-apple #recordScoreModal .modal-footer .btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 11px 18px !important;
    box-shadow: none !important;
}
body.theme-apple #recordScoreModal .modal-footer .btn-primary {
    background: var(--ios-tint) !important;
    border: none !important;
    color: #fff !important;
}
body.theme-apple #recordScoreModal .modal-footer .btn-secondary,
body.theme-apple #recordScoreModal .modal-footer .btn-light {
    background: var(--ios-tint-soft) !important;
    border: none !important;
    color: var(--ios-tint) !important;
}
body.theme-apple.theme-dark #recordScoreModal .modal-content {
    background: #1C1C1E !important;
    color: #F2F2F7 !important;
}
body.theme-apple.theme-dark #recordScoreModal input[type="number"] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #F2F2F7 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
body.theme-apple.theme-dark #recordScoreModal input[type="number"]:focus {
    border-color: #64B5FF !important;
    background: rgba(255, 255, 255, 0.10) !important;
}
body.theme-apple.theme-dark #recordScoreModal .modal-body label,
body.theme-apple.theme-dark #recordScoreModal .modal-body .team-name {
    color: #F2F2F7 !important;
}
body.theme-apple.theme-dark #recordScoreModal .modal-header,
body.theme-apple.theme-dark #recordScoreModal .modal-footer {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ============================================================
   Competition card drag & drop — iOS-style visuals
   ============================================================ */
/* Source card while it's being dragged → ghost is the clone, so dim the
   original to feel like it "lifted" off the grid. */
body.theme-apple .competition-link.card-drag-source,
body.theme-apple .folder-card.card-drag-source {
    opacity: 0.34 !important;
    transition: opacity 140ms ease !important;
}

/* Drop target → scale up, iOS-blue glow ring AND darken the card so the
   "drop here to create a folder" affordance is unmistakable, iOS-style. */
body.theme-apple .competition-link.drop-target-active .card,
body.theme-apple .folder-card.drop-target-active .card,
body.theme-apple .folder-card.drop-target-active {
    transform: scale(1.04) !important;
    box-shadow:
        0 0 0 3px var(--ios-tint),
        0 14px 32px rgba(0, 122, 255, 0.28) !important;
    transition:
        transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 140ms ease,
        filter 140ms ease,
        background-color 140ms ease !important;
}
/* Drop target — both competition AND folder use the SAME visual so the
   user reads "this is droppable" the same way regardless of target type.
   The ACTION differs (folder = move into; competition = create folder
   containing both) but the affordance looks identical. */
body.theme-apple .competition-link.drop-target-active .card,
body.theme-apple .folder-card.drop-target-active .card,
body.theme-apple .folder-card.drop-target-active {
    filter: brightness(0.88) !important;
    -webkit-filter: brightness(0.88) !important;
    background: inherit !important;
    background-color: inherit !important;
}

/* While ANY drag is in progress, suppress hover/active scaling on other
   cards so the visual focus stays on the source + target. */
body.theme-apple.card-drag-active .competition-card:not(.card-drag-source):not(.drop-target-active *) {
    transform: none !important;
}
body.theme-apple.card-drag-active {
    cursor: grabbing !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Dark-mode tweaks: glow is brighter blue + uses dark-mode tint */
body.theme-apple.theme-dark .competition-link.drop-target-active .card,
body.theme-apple.theme-dark .folder-card.drop-target-active .card,
body.theme-apple.theme-dark .folder-card.drop-target-active {
    box-shadow:
        0 0 0 3px #0A84FF,
        0 14px 32px rgba(10, 132, 255, 0.40) !important;
}
/* Dark: brightness goes the OTHER way — lighten slightly so the card
   stands out against the near-black page bg (cards there are #1C1C1E).
   Same for folders so they match competitions. */
body.theme-apple.theme-dark .competition-link.drop-target-active .card,
body.theme-apple.theme-dark .folder-card.drop-target-active .card,
body.theme-apple.theme-dark .folder-card.drop-target-active {
    filter: brightness(1.35) !important;
    -webkit-filter: brightness(1.35) !important;
    background: inherit !important;
    background-color: inherit !important;
}

/* The ghost element itself (cloned card following the pointer) */
.card-drag-ghost {
    /* All visual styling is applied inline via JS for portability. The
       class is just a hook for any per-page tweaks. */
    cursor: grabbing !important;
}

/* ============================================================
   iOS-style folder-name prompt — replaces window.prompt() so
   the "Create folder" dialog matches the app's design language.
   Spawned by static/js/card-drag-drop.js when a card is dropped
   onto another competition card.
   ============================================================ */
.ios-folder-prompt-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.ios-folder-prompt-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* iOS UIAlertController-style card — frosted glass, soft shadow, large
   rounded radius, content stacked vertically with a hairline-separated
   button row at the bottom. */
.ios-folder-prompt-card {
    width: 100%;
    max-width: 296px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    border-radius: 14px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", sans-serif;
    color: #000000;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.32),
        0 6px 18px rgba(0, 0, 0, 0.14);
    transform: scale(0.94) translateY(10px);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-user-select: none;
    user-select: none;
}
.ios-folder-prompt-backdrop.open .ios-folder-prompt-card {
    transform: scale(1) translateY(0);
}

/* Folder glyph at top — iOS-blue, subtle */
.ios-folder-prompt-icon {
    display: flex;
    justify-content: center;
    padding: 22px 0 6px;
    color: #007AFF;
}
.ios-folder-prompt-icon svg {
    width: 36px;
    height: 36px;
    display: block;
}

.ios-folder-prompt-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    padding: 6px 22px 4px;
    line-height: 1.2;
}
.ios-folder-prompt-sub {
    font-size: 13px;
    color: rgba(60, 60, 67, 0.62);
    text-align: center;
    padding: 0 22px 14px;
    line-height: 1.38;
}
.ios-folder-prompt-input {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 18px;
    box-sizing: border-box;
    font-size: 16px;
    padding: 10px 13px;
    border: 0.5px solid rgba(60, 60, 67, 0.20);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.92);
    color: #000000;
    outline: none;
    -webkit-user-select: text !important;
    user-select: text !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.ios-folder-prompt-input::placeholder {
    color: rgba(60, 60, 67, 0.40);
}
.ios-folder-prompt-input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
    background: #FFFFFF;
}

/* Button row — flat, hairline-separated, full-bleed; the iOS native alert
   pattern (no rounded pill buttons, no gap between them) */
.ios-folder-prompt-actions {
    display: flex;
    border-top: 0.5px solid rgba(60, 60, 67, 0.20);
    margin: 0;
}
.ios-folder-prompt-btn {
    flex: 1 1 0;
    background: transparent;
    border: none;
    padding: 12px 0;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: #007AFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 100ms ease;
    -webkit-user-select: none;
    user-select: none;
}
.ios-folder-prompt-btn + .ios-folder-prompt-btn {
    border-left: 0.5px solid rgba(60, 60, 67, 0.20);
}
.ios-folder-prompt-btn.cancel {
    font-weight: 400;
}
.ios-folder-prompt-btn.confirm {
    font-weight: 600;
}
.ios-folder-prompt-btn:hover,
.ios-folder-prompt-btn:active {
    background: rgba(0, 122, 255, 0.06);
}

/* ── Dark mode ── */
.theme-dark .ios-folder-prompt-card,
body.theme-apple.theme-dark ~ * .ios-folder-prompt-card,
body.theme-apple.theme-dark .ios-folder-prompt-card,
html body.theme-apple.theme-dark .ios-folder-prompt-card {
    background: rgba(44, 44, 46, 0.82);
    color: #FFFFFF;
}
.theme-dark .ios-folder-prompt-sub,
body.theme-apple.theme-dark .ios-folder-prompt-sub {
    color: rgba(235, 235, 245, 0.58);
}
.theme-dark .ios-folder-prompt-input,
body.theme-apple.theme-dark .ios-folder-prompt-input {
    background: rgba(30, 30, 32, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}
.theme-dark .ios-folder-prompt-input::placeholder,
body.theme-apple.theme-dark .ios-folder-prompt-input::placeholder {
    color: rgba(235, 235, 245, 0.38);
}
.theme-dark .ios-folder-prompt-input:focus,
body.theme-apple.theme-dark .ios-folder-prompt-input:focus {
    border-color: #0A84FF;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.22);
    background: #1C1C1E;
}
.theme-dark .ios-folder-prompt-icon,
body.theme-apple.theme-dark .ios-folder-prompt-icon {
    color: #0A84FF;
}
.theme-dark .ios-folder-prompt-actions,
body.theme-apple.theme-dark .ios-folder-prompt-actions {
    border-top-color: rgba(255, 255, 255, 0.10);
}
.theme-dark .ios-folder-prompt-btn,
body.theme-apple.theme-dark .ios-folder-prompt-btn {
    color: #0A84FF;
}
.theme-dark .ios-folder-prompt-btn + .ios-folder-prompt-btn,
body.theme-apple.theme-dark .ios-folder-prompt-btn + .ios-folder-prompt-btn {
    border-left-color: rgba(255, 255, 255, 0.10);
}
.theme-dark .ios-folder-prompt-btn:hover,
.theme-dark .ios-folder-prompt-btn:active,
body.theme-apple.theme-dark .ios-folder-prompt-btn:hover,
body.theme-apple.theme-dark .ios-folder-prompt-btn:active {
    background: rgba(10, 132, 255, 0.14);
}
.theme-dark .ios-folder-prompt-input:focus {
    border-color: #0A84FF;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.28);
}
.theme-dark .ios-folder-prompt-btn.cancel {
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
}
.theme-dark .ios-folder-prompt-btn.cancel:hover,
.theme-dark .ios-folder-prompt-btn.cancel:active {
    background: rgba(255, 255, 255, 0.16);
}
.theme-dark .ios-folder-prompt-btn.confirm {
    background: #0A84FF;
}
.theme-dark .ios-folder-prompt-btn.confirm:hover,
.theme-dark .ios-folder-prompt-btn.confirm:active {
    background: #0066CC;
}

/* ============================================================
   Kill iOS Safari's native long-press preview on competition /
   folder cards. The grey-rectangle popup is iOS showing a link
   preview — it races our drag handler and hijacks the gesture.
   ============================================================ */
body.theme-apple .competition-link,
body.theme-apple .competition-link *,
body.theme-apple .folder-card,
body.theme-apple .folder-card * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
/* Re-enable user-select on text-input fields inside any modal that
   sits over these cards (the iOS folder prompt input) — the wildcard
   above is greedy. */
body.theme-apple input,
body.theme-apple textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* ============================================================
   Dropdown items — active/focus states in iOS blue.
   Bootstrap defaults `--bs-dropdown-link-active-bg` to their
   brand purple/blue which clashes with the iOS tint used
   everywhere else. Match the app's accent.
   ============================================================ */
body.theme-apple .dropdown-item.active,
body.theme-apple .dropdown-item:active,
body.theme-apple .dropdown-item:focus,
html body.theme-apple .dropdown-item.active,
html body.theme-apple .dropdown-item:active {
    background: var(--ios-tint-soft) !important;
    background-color: var(--ios-tint-soft) !important;
    color: var(--ios-tint) !important;
}
body.theme-apple .dropdown-item.active:hover,
body.theme-apple .dropdown-item:active:hover {
    background: rgba(0, 122, 255, 0.22) !important;
    color: var(--ios-tint) !important;
}

/* ============================================================
   CHAT PAGE — hide bottom nav on mobile.
   The chat input bar lives at the bottom of the viewport; the
   bottom nav overlaps it and steals taps. Both `.chat-active` on
   body AND `.chat-active-html` on html are set by chat.html JS.
   ============================================================ */
body.theme-apple.chat-active .mobile-navbar,
html.chat-active-html body.theme-apple .mobile-navbar,
body.theme-apple.chat-active .bottom-nav-floating,
html.chat-active-html body.theme-apple .bottom-nav-floating {
    display: none !important;
}

/* ============================================================
   PHOTO/INFO ACTION-SHEET MODAL — dark-mode contrast.
   `.photo-menu-content` in templates/profile/view.html hardcodes
   `background: rgba(17, 24, 39, 0.95)` which fights the theme:
     - light mode → dark navy card on light body, dark text = unreadable
     - dark mode → same dark navy card, occasionally showing as
       light in some renders because the inline style is picked up
       inconsistently.
   Override with iOS surface tokens so it swaps cleanly per theme.
   ============================================================ */
body.theme-apple .photo-menu-content {
    background: var(--ios-surface, #FFFFFF) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
    color: var(--ios-fg) !important;
}
body.theme-apple.theme-dark .photo-menu-content,
html body.theme-apple.theme-dark .photo-menu-content {
    background: #1C1C1E !important;
    border-top-color: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
}
/* Option rows — iOS list-cell */
body.theme-apple .photo-menu-option {
    background: transparent !important;
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
    color: var(--ios-fg) !important;
}
body.theme-apple .photo-menu-option:hover,
body.theme-apple .photo-menu-option:active {
    background: rgba(0, 0, 0, 0.04) !important;
    transform: none !important;
}
body.theme-apple.theme-dark .photo-menu-option {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
}
body.theme-apple.theme-dark .photo-menu-option:hover,
body.theme-apple.theme-dark .photo-menu-option:active {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* Cancel = iOS red destructive */
body.theme-apple .photo-menu-option.photo-menu-cancel {
    background: transparent !important;
    color: #FF3B30 !important;
    border-color: rgba(255, 59, 48, 0.30) !important;
}
body.theme-apple.theme-dark .photo-menu-option.photo-menu-cancel {
    color: #FF453A !important;
    border-color: rgba(255, 69, 58, 0.35) !important;
}

/* ============================================================
   FLASH MESSAGES — iOS toast pill.
   Was rendered inline at the top of `.container.mt-2.pt-5`, which
   put it visually behind the fixed top nav's icons. Detach it into
   a floating toast that sits just above the bottom nav, styled
   like the iOS system Copied-!-style pill: iOS blue background,
   white text, subtle shadow, auto-fades after ~4s.
   ============================================================ */
body.theme-apple .flash-messages-container {
    position: fixed !important;
    left: 50% !important;
    /* Right above the bottom nav (~80px tall) + safe area. */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    z-index: 1080 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: min(90vw, 360px) !important;
    width: max-content !important;
    pointer-events: none !important;
    /* Auto-fade after ~4s (hold 3s, fade 1s). */
    animation: iosToastFade 4.5s ease-in forwards;
}
@keyframes iosToastFade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
    8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(4px);
           visibility: hidden; pointer-events: none; }
}
body.theme-apple .flash-messages-container .alert {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--ios-tint, #007AFF) !important;
    background-color: var(--ios-tint, #007AFF) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.35),
                0 2px 6px rgba(0, 0, 0, 0.10) !important;
    margin-bottom: 6px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
}
/* Error / warning variants — red, still pill-shaped */
body.theme-apple .flash-messages-container .alert-danger,
body.theme-apple .flash-messages-container .alert-error {
    background: #FF3B30 !important;
    box-shadow: 0 8px 24px rgba(255, 59, 48, 0.35),
                0 2px 6px rgba(0, 0, 0, 0.10) !important;
}
body.theme-apple .flash-messages-container .alert-warning {
    background: #FF9500 !important;
    box-shadow: 0 8px 24px rgba(255, 149, 0, 0.35),
                0 2px 6px rgba(0, 0, 0, 0.10) !important;
}

/* ============================================================
   Team-name ampersand — separator between two partner names.
   The default `&` glyph reads chunky and same-weight as the
   names. Ligature it to a lighter, muted iOS-secondary tone so
   "Rick & Robert" scans as one label with a subtle join.
   ============================================================ */
body.theme-apple .team-amp,
body.theme-apple .team-name .team-amp,
body.theme-apple .match-card .team-amp {
    color: var(--ios-fg-3, #8e8e93);
    font-weight: 400;
    margin: 0 2px;
    letter-spacing: 0;
    /* Slight visual balance — some fonts hang the ampersand low */
    vertical-align: baseline;
}
body.theme-apple.theme-dark .team-amp {
    color: rgba(255, 255, 255, 0.55);
}

/* Fixed-pairs leaderboard: partner-name links + "Paired" / "Waiting to
   be paired" section headings. Legacy CSS used white-on-dark colours
   (#fcfcfc80) that are unreadable on the iOS light surface. */
body.theme-apple .team-link.text-decoration-none.text-truncate,
body.theme-apple .team-link.text-decoration-none.text-truncate:visited,
body.theme-apple .team-link span,
body.theme-apple .pairing-section-heading {
    color: var(--ios-fg, #000) !important;
}
body.theme-apple .team-link.text-decoration-none.text-truncate:hover {
    color: var(--ios-tint, #007AFF) !important;
}
body.theme-apple.theme-dark .team-link.text-decoration-none.text-truncate,
body.theme-apple.theme-dark .team-link.text-decoration-none.text-truncate:visited,
body.theme-apple.theme-dark .team-link span,
body.theme-apple.theme-dark .pairing-section-heading {
    color: rgba(255, 255, 255, 0.92) !important;
}
/* Give the truncated partner names a hair of breathing room from the
   next column so the last letter doesn't sit flush against it. */
body.theme-apple .fixed-pairs-leaderboard .team-pair {
    padding-right: 8px !important;
}
/* In the vertical (upcoming-match) stacked layout the `&` glyph hugs
   the name ABOVE it because most sans-serif ampersands sit on the
   x-height baseline. Nudge it down a hair so it visually centers
   between the two names. Applied only to the stacked variant so the
   horizontal `& ` between names in completed match cards stays put. */
body.theme-apple .team-amp.team-amp-stacked {
    margin-top: 4px !important;
    margin-bottom: -2px !important;
    line-height: 1 !important;
    transform: translateY(1px);
}

/* ============================================================
   COMPETITION CARD — polish layout so badges sit bottom-right and
   the title never gets its second line clipped.
   ============================================================ */
/* Card body becomes a flex column so the .competition-bottom-row
   (badge row) can be pinned to the bottom via margin-top:auto. */
body.theme-apple .competition-card,
body.theme-apple .competition-card > .card-body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
body.theme-apple .competition-card > .card-body {
    flex: 1 1 auto !important;
    padding: 12px !important;
}

/* Title: 2-line clamp via -webkit-line-clamp so wrapped lines are
   never chopped mid-height. Nuke the inline `max-height: 1.9rem`
   from the JS renderer with !important. */
body.theme-apple .competition-card .card-title,
body.theme-apple .competition-card .competition-card-title,
body.theme-apple .competition-card h5.competition-card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
    max-height: none !important;
    /* Reserve space for both lines so the bottom row stays where it
       lands regardless of title length. */
    min-height: calc(1.25em * 2) !important;
    margin-bottom: 6px !important;
    word-break: break-word !important;
}

/* Bottom row = date left, badge right, pinned to card bottom. */
body.theme-apple .competition-card .competition-bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: auto !important;   /* pushes to bottom of flex column */
    padding-top: 6px !important;
}
body.theme-apple .competition-card .competition-bottom-row .badge-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    /* Ensure the badge sits inline in the bottom row, not absolutely
       positioned (an older .badge-container rule had bottom:10px). */
    position: static !important;
    bottom: auto !important;
    right: auto !important;
}

/* ============================================================
   BOTTOM NAV — instant tap response.
   `touch-action: manipulation` disables browser double-tap zoom
   detection so the click/pointerup fires with zero delay.
   Also opt-in to hardware compositing so press-feedback repaints
   don't block the main thread.
   ============================================================ */
body.theme-apple .mobile-nav-item,
body.theme-apple .mobile-navbar .mobile-nav-item {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
/* INSTANT press feedback — no transition, so the pixel change lands
   the same frame as pointerdown. A 60ms fade felt sluggish. */
body.theme-apple .mobile-nav-item.is-pressing {
    opacity: 0.55 !important;
    transition: none !important;
}

/* Cached tab-slots stay in DOM but display:none — that alone is
   enough to prevent inactive-slot content from bleeding through.
   Deliberately NO `isolation: isolate` or `overflow: hidden` on
   #tab-container: those broke Bootstrap modals rendered inside
   .tab-slot (backdrop showed, dialog disappeared into the isolated
   stacking context). Modals need to sit at the top-level stacking
   context to render above everything. */
body.theme-apple #tab-container {
    position: relative;
}
body.theme-apple #tab-container > .tab-slot {
    display: none !important;
}
body.theme-apple #tab-container > .tab-slot.active {
    display: block !important;
}

/* Dark-mode variant */
body.theme-apple.theme-dark .dropdown-item.active,
body.theme-apple.theme-dark .dropdown-item:active,
body.theme-apple.theme-dark .dropdown-item:focus {
    background: rgba(10, 132, 255, 0.22) !important;
    background-color: rgba(10, 132, 255, 0.22) !important;
    color: #0A84FF !important;
}
body.theme-apple.theme-dark .dropdown-item.active:hover,
body.theme-apple.theme-dark .dropdown-item:active:hover {
    background: rgba(10, 132, 255, 0.32) !important;
    color: #0A84FF !important;
}

/* ============================================================
   FAQ PAGE — dark-mode readability fixes.
   The inline `<style>` block in templates/faq.html hardcodes
   light-mode colours with `!important` (`.faq-section-heading`,
   accordion borders, nav-link text). Those bleed into dark mode
   making section titles like "Casual Competition" and
   "Technical & Support" unreadable on dark bg. Override with
   the same `!important` + higher specificity to win the cascade.
   ============================================================ */
html body.theme-apple.theme-dark #faq-container .faq-section-heading {
    color: rgba(255, 255, 255, 0.60) !important;
}
/* Segmented tab (Compact nav pills) — inactive tab text */
html body.theme-apple.theme-dark #faq-container #nav-tab.compact-nav-pills .nav-link,
html body.theme-apple.theme-dark #faq-container .nav.compact-nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.65) !important;
}
html body.theme-apple.theme-dark #faq-container #nav-tab.compact-nav-pills .nav-link.active,
html body.theme-apple.theme-dark #faq-container .nav.compact-nav-pills .nav-link.active {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.10) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20) !important;
}
html body.theme-apple.theme-dark #faq-container #nav-tab.compact-nav-pills,
html body.theme-apple.theme-dark #faq-container .nav.compact-nav-pills {
    background: rgba(255, 255, 255, 0.05) !important;
}
/* Hairline dividers — light values are invisible on dark. Bump to
   the same soft-white we use elsewhere in dark mode. */
html body.theme-apple.theme-dark #faq-container .accordion-button:not(.collapsed) {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
html body.theme-apple.theme-dark #faq-container .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
html body.theme-apple.theme-dark #faq-container #nav-tab .nav-link:hover {
    border-color: rgba(255, 255, 255, 0.10) !important;
}
/* Accordion body text (answers) — Bootstrap defaults resolve OK,
   but some inline `<strong>` labels inherit dark grey. Force iOS
   white text for the whole accordion body chain. */
html body.theme-apple.theme-dark #faq-container .accordion-body,
html body.theme-apple.theme-dark #faq-container .accordion-body p,
html body.theme-apple.theme-dark #faq-container .accordion-body li,
html body.theme-apple.theme-dark #faq-container .accordion-body strong {
    color: rgba(255, 255, 255, 0.92) !important;
}
/* Card outer border — light rgba(60,60,67,0.10) is invisible */
html body.theme-apple.theme-dark #faq-container .card,
html body.theme-apple.theme-dark #faq-container .accordion-item {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   1) MATCH-CARD ACTION BUTTONS — always on ONE row.
   Planner / Chat / Venue / Score wrapped to a 2nd row because
   `.match-actions-grid` defaulted to `flex-wrap: wrap` and
   the buttons in matches/list.html sit as DIRECT children
   (no `.match-action-item` wrapper), so the previous fix
   didn't hit that template. This targets both structures.
   ============================================================ */
body.theme-apple .match-actions-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100% !important;
}
/* Wrapped children (upcoming.html) */
body.theme-apple .match-actions-grid > .match-action-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
/* Direct-child buttons (matches/list.html — used in competition view) */
body.theme-apple .match-actions-grid > .btn,
body.theme-apple .match-actions-grid > .button-match-action,
body.theme-apple .match-actions-grid > a.btn,
body.theme-apple .match-actions-grid > button.btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}
/* Narrow phones (< 380px): scale the round buttons down slightly */
@media (max-width: 380px) {
    body.theme-apple .match-action-item .btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
    }
    body.theme-apple .match-action-label {
        font-size: 0.7rem !important;
    }
    body.theme-apple .match-actions-grid > .btn {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.2rem !important;
    }
}

/* ============================================================
   2) AVAILABILITY FORM — subtle selected state.
   User wants: keep original Bootstrap form-check layout;
   ONLY thing that should change when a time-slot is checked
   is the container border → iOS blue with rounded corners.
   The checkbox fill (blue) is already handled by the inline
   styles in direct_form.html. No background tint, no text
   colour change, no layout shift.
   ============================================================ */
body.theme-apple .time-slots .form-check:has(input:checked),
body.theme-apple .date-card .form-check:has(input:checked) {
    border: 1.5px solid var(--ios-tint, #007AFF) !important;
    border-radius: 12px !important;
    background: transparent !important;
}

/* ============================================================
   3) "CHECK MY CALENDAR" BUTTON — readable contrast.
   Was iOS-tint background + pure white text — user reports it as
   hard to read. Swap for the iOS soft-blue chip pattern used
   elsewhere in the app: light-blue tint background, iOS-blue text.
   ============================================================ */
body.theme-apple .ios-calendar-btn,
body.theme-apple button.ios-calendar-btn,
body.theme-apple #calendar-check-btn {
    background: var(--ios-tint-soft, rgba(0, 122, 255, 0.14)) !important;
    background-color: var(--ios-tint-soft, rgba(0, 122, 255, 0.14)) !important;
    color: var(--ios-tint, #007AFF) !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 122, 255, 0.22) !important;
}
body.theme-apple .ios-calendar-btn:hover,
body.theme-apple #calendar-check-btn:hover {
    background: rgba(0, 122, 255, 0.22) !important;
    background-color: rgba(0, 122, 255, 0.22) !important;
    color: var(--ios-tint, #007AFF) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.theme-apple .ios-calendar-btn svg,
body.theme-apple #calendar-check-btn svg {
    color: var(--ios-tint, #007AFF) !important;
    stroke: var(--ios-tint, #007AFF) !important;
}
/* Dark mode: use iOS's dark-mode blue tint */
body.theme-apple.theme-dark .ios-calendar-btn,
body.theme-apple.theme-dark #calendar-check-btn {
    background: rgba(10, 132, 255, 0.20) !important;
    color: #0A84FF !important;
    border-color: rgba(10, 132, 255, 0.30) !important;
}
body.theme-apple.theme-dark .ios-calendar-btn svg,
body.theme-apple.theme-dark #calendar-check-btn svg {
    color: #0A84FF !important;
    stroke: #0A84FF !important;
}

/* ============================================================
   4) CHAT PAGE — full-screen (native WhatsApp app pattern).
   Force the chat surface to fill the ENTIRE viewport on every
   device, always. Input pinned to bottom via flex column;
   messages area is the only scroll region.

   Previous CSS only matched `.container.mt-2.pt-2` but base.html
   uses `pt-5`, so on desktop the chat-page collapsed to content
   height and appeared as a small floating block at the top.

   We force full-viewport via position:fixed on chat-page itself,
   so it doesn't depend on any parent's height chain.
   ============================================================ */
html body.theme-apple.chat-active .chat-page,
html.chat-active-html body.theme-apple .chat-page {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
html body.theme-apple.chat-active .chat-container,
html.chat-active-html body.theme-apple .chat-container {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* Messages area is the ONLY scrolling region — flex:1 fills the
   space between header and input regardless of message count. */
html body.theme-apple.chat-active .chat-messages,
html.chat-active-html body.theme-apple .chat-messages {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* Text bubbles capped so lines stay readable on very wide screens. */
body.theme-apple .message {
    max-width: min(78%, 520px) !important;
}
body.theme-apple .message .msg-img,
body.theme-apple .message .msg-audio {
    max-width: 100% !important;
}

/* ============================================================
   5) RECORD SCORE MODAL — iOS clean redesign.
   Was overflowing horizontally on narrow screens (grid columns
   2fr 1fr 1fr 1fr + long team names + 3 number inputs blew past
   viewport). Rebuild the whole modal chrome as a compact iOS
   sheet: fixed 420px dialog centered, scrollable body, clean
   inputs, iOS blue save pill.
   ============================================================ */
/* Dialog: cap width so desktop doesn't stretch, allow scroll
   inside if content is tall (BOC/BOCR + 3 sets). */
body.theme-apple #recordScoreModal .modal-dialog {
    max-width: 420px !important;
    width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 24px) !important;
}
body.theme-apple #recordScoreModal .modal-content {
    max-height: calc(100dvh - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}
body.theme-apple #recordScoreModal form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
body.theme-apple #recordScoreModal form > div[style*="padding"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem 1.25rem !important;
}
body.theme-apple #recordScoreModal .rsm-footer {
    flex-shrink: 0 !important;
}

/* Header — larger, centered, close btn on right */
body.theme-apple #recordScoreModal .rsm-header {
    padding: 1rem 1.25rem 0.75rem !important;
    border-bottom: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
}
body.theme-apple #recordScoreModal .rsm-title {
    font-size: 17px !important;
    font-weight: 600 !important;
}

/* Score section — iOS-card with tight iOS padding */
body.theme-apple #recordScoreModal .score-section,
body.theme-apple #recordScoreModal .stats-section {
    background: var(--ios-surface, #FFFFFF) !important;
    background-color: var(--ios-surface, #FFFFFF) !important;
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    box-shadow: none !important;
}
body.theme-apple #recordScoreModal .stats-section {
    margin-top: 12px !important;
}

/* ── Score grid rebuilt: label column shrinks, inputs stay fixed ── */
body.theme-apple #recordScoreModal .score-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
body.theme-apple #recordScoreModal .score-row {
    display: grid !important;
    /* Player name column shrinks (min 0), score cells are fixed 44px */
    grid-template-columns: minmax(0, 1fr) repeat(3, 44px) !important;
    gap: 6px !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
}
/* Games-only tournament: only 2 columns */
body.theme-apple #recordScoreModal #games-scoring-section .score-row {
    grid-template-columns: minmax(0, 1fr) 64px !important;
}
body.theme-apple #recordScoreModal .score-row.header {
    color: var(--ios-fg-3, #8e8e93) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    padding-bottom: 2px !important;
}
body.theme-apple #recordScoreModal .score-cell {
    padding: 0 !important;
    min-width: 0 !important;
}
body.theme-apple #recordScoreModal .player-names,
body.theme-apple #recordScoreModal .player-name {
    color: var(--ios-fg) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Number inputs — iOS-style rounded squares */
body.theme-apple #recordScoreModal .score-input,
body.theme-apple #recordScoreModal .stat-input {
    width: 100% !important;
    height: 40px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    background: var(--ios-bg, #F2F2F7) !important;
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
    border-radius: 10px !important;
    color: var(--ios-fg) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}
body.theme-apple #recordScoreModal .score-input:focus,
body.theme-apple #recordScoreModal .stat-input:focus {
    background: #FFFFFF !important;
    border-color: var(--ios-tint, #007AFF) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
    outline: none !important;
}
/* Games-only tournament: single wider input */
body.theme-apple #recordScoreModal .games-input {
    height: 44px !important;
    font-size: 19px !important;
}

/* ── Stats section (BOC / BOCR) — player rows ── */
body.theme-apple #recordScoreModal .stats-section h6 {
    color: var(--ios-fg-3, #8e8e93) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}
body.theme-apple #recordScoreModal .player-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 56px 56px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 4px 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
}
body.theme-apple #recordScoreModal .player-row.header {
    color: var(--ios-fg-3, #8e8e93) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    padding-bottom: 2px !important;
    margin-bottom: 4px !important;
}
body.theme-apple #recordScoreModal .player-row.header .rsm-stat-help {
    display: inline-block !important;
    margin: 0 !important;
    color: var(--ios-tint, #007AFF) !important;
    width: 12px !important;
    height: 12px !important;
    vertical-align: middle !important;
}
/* Header row: names left, BOC/BOCR label+icon inline centered above input */
body.theme-apple #recordScoreModal .stats-section .player-row.header > div:first-child,
body.theme-apple #recordScoreModal .stats-section .player-row .player-name {
    text-align: left !important;
}
body.theme-apple #recordScoreModal .stats-section .player-row.header > div.text-center {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
}
/* Sets/games score section: player-names column left-aligned too */
body.theme-apple #recordScoreModal .score-section .score-row .player-names,
body.theme-apple #recordScoreModal .score-section .score-row.header > .score-cell:first-child {
    text-align: left !important;
}

/* While a BOC/BOCR info modal is open: hide the parent score modal + its
   backdrop so the user only sees the centered explanation. */
body #recordScoreModal.rsm-hidden-under-info {
    visibility: hidden !important;
}
body .modal-backdrop.rsm-backdrop-hidden {
    opacity: 0 !important;
}

/* BOC / BOCR info sub-modals: extra body readability + iOS pill button.
   Padding + borders come from the global iOS modal spacing above. */
body.theme-apple #bocInfoModal .modal-body,
body.theme-apple #bocrInfoModal .modal-body {
    line-height: 1.5 !important;
    font-size: 15px !important;
}
body.theme-apple #bocInfoModal .modal-footer .btn,
body.theme-apple #bocrInfoModal .modal-footer .btn {
    flex: 1 1 0 !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    background: var(--ios-tint, #007AFF) !important;
    color: #fff !important;
    border: none !important;
}

/* ── Info callout ── */
body.theme-apple #recordScoreModal .rsm-info-callout {
    background: var(--ios-tint-soft, rgba(0,122,255,0.14)) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: var(--ios-fg) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/* ── Footer buttons — iOS pills ── */
body.theme-apple #recordScoreModal .rsm-footer {
    padding: 12px 20px 20px !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    border-top: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
    background: var(--ios-surface, #FFFFFF) !important;
}
body.theme-apple #recordScoreModal .rsm-footer .d-flex {
    gap: 10px !important;
}
body.theme-apple #recordScoreModal .rsm-cancel,
body.theme-apple #recordScoreModal .rsm-save {
    flex: 1 1 0 !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    transition: transform 0.1s ease, background 0.15s ease !important;
}
body.theme-apple #recordScoreModal .rsm-cancel {
    background: var(--ios-bg, #F2F2F7) !important;
    color: var(--ios-fg) !important;
}
body.theme-apple #recordScoreModal .rsm-cancel:hover,
body.theme-apple #recordScoreModal .rsm-cancel:active {
    background: rgba(0,0,0,0.06) !important;
}
body.theme-apple #recordScoreModal .rsm-save {
    background: var(--ios-tint, #007AFF) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25) !important;
}
body.theme-apple #recordScoreModal .rsm-save:hover,
body.theme-apple #recordScoreModal .rsm-save:active {
    background: var(--ios-tint-press, #0062CC) !important;
    transform: translateY(-1px) !important;
}
body.theme-apple #recordScoreModal .rsm-save .btn-spinner {
    color: #FFFFFF !important;
}

/* Dark-mode adjustments */
body.theme-apple.theme-dark #recordScoreModal .modal-content {
    background: #1C1C1E !important;
}
body.theme-apple.theme-dark #recordScoreModal .score-section,
body.theme-apple.theme-dark #recordScoreModal .stats-section {
    background: #2C2C2E !important;
    border-color: rgba(255,255,255,0.08) !important;
}
body.theme-apple.theme-dark #recordScoreModal .score-input,
body.theme-apple.theme-dark #recordScoreModal .stat-input {
    background: #1C1C1E !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #FFFFFF !important;
}
body.theme-apple.theme-dark #recordScoreModal .rsm-cancel {
    background: rgba(255,255,255,0.10) !important;
    color: #FFFFFF !important;
}
body.theme-apple.theme-dark #recordScoreModal .rsm-footer {
    background: #1C1C1E !important;
}

/* ============================================================
   STICKY PROPOSE CONTAINER — deliberately NOT styled here.
   The bar is built in JavaScript in direct_form.html, and every
   declaration in that cssText carries !important. An inline
   !important outranks every stylesheet rule, !important or not,
   at any specificity — so a dark-mode block here could never
   apply, however many ids were stacked in front of it. That is
   why the bar stayed light in dark mode.
   It now reads its colours from the theme tokens
   (--ios-surface, --ios-bg-2, --ios-fg, --ios-separator-soft,
   --ios-tint, --ios-tint-soft, --ios-tint-muted), which the
   dark-mode block redefines, so the inline styles follow the
   theme by themselves. Change those colours in the template.
   ============================================================ */

/* ============================================================
   6) MATCH CARD — restore iOS rounded corners.
   The `<div class="match-card mb-3 p-3 border rounded">` picked
   up Bootstrap `.border` (border: 1px solid #dee2e6) + `.rounded`
   (border-radius: 0.25rem = 4px) and those raw utility values
   were overriding the iOS 14px radius on some devices. Force
   the iOS-native 14px + our soft separator border with !important.
   ============================================================ */
body.theme-apple .match-card,
body.theme-apple .match-card.mb-3,
body.theme-apple .match-card.mb-3.p-3.border.rounded,
body.theme-apple div.match-card.border.rounded,
body.theme-apple #matches .match-card,
body.theme-apple #matches-list-container .match-card,
body.theme-apple #upcoming-matches-container .match-card,
body.theme-apple #completed-matches .match-card,
body.theme-apple #scheduled-matches-container .match-card {
    border-radius: 14px !important;
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
    background: var(--ios-surface, #FFFFFF) !important;
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none !important;
    overflow: hidden !important;
}

/* ============================================================
   7a) BOC / BOCR — the ACTUAL culprit was in matches-list.js.
   Completed match cards on the competition view are rendered
   CLIENT-SIDE by matches-list.js — not by matches/list.html —
   with `.boxscore-container` > `.boxscore-header` +
   `.boxscore-row` structure. No CSS existed for the header/row
   grid, so BOC / BOCR / player names stacked vertically.
   Force a proper 3-column grid here.
   ============================================================ */
body.theme-apple .boxscore-container,
body.theme-apple .match-card .boxscore-container {
    /* Blend into the match card — no separate tinted panel, just a
       subtle top divider like the score section above it. */
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-top: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
    border-radius: 0 !important;
    padding: 10px 0 0 0 !important;
    margin-top: 12px !important;
    color: var(--ios-fg) !important;
}
/* Header row grid columns match the row below. The JS sets
   `data-cols` = 2 (name + BOC only), 3 (name + BOC + BOCR), or
   1 (name only — degenerate). Header divs are pushed to the
   right-hand stat columns so their labels sit directly above
   the values. */
body.theme-apple .boxscore-container .boxscore-header {
    display: grid !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 0 4px 0 !important;
    border-bottom: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
    margin-bottom: 4px !important;
}
body.theme-apple .boxscore-container[data-cols="2"] .boxscore-header {
    grid-template-columns: minmax(0, 1fr) 56px !important;
}
body.theme-apple .boxscore-container[data-cols="3"] .boxscore-header {
    grid-template-columns: minmax(0, 1fr) 56px 56px !important;
}
/* Push single stat header into column 2 (below is the stat column) */
body.theme-apple .boxscore-container[data-cols="2"] .boxscore-header .boxscore-stat-header {
    grid-column: 2 / 3 !important;
}
/* Two stat headers → columns 2 & 3 */
body.theme-apple .boxscore-container[data-cols="3"] .boxscore-header .boxscore-stat-header:nth-child(1) {
    grid-column: 2 / 3 !important;
}
body.theme-apple .boxscore-container[data-cols="3"] .boxscore-header .boxscore-stat-header:nth-child(2) {
    grid-column: 3 / 4 !important;
}
body.theme-apple .boxscore-container .boxscore-stat-header {
    color: var(--ios-fg-3, #8e8e93) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Data row grid — columns match the header + data-cols attr */
body.theme-apple .boxscore-container .boxscore-row {
    display: grid !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 0 !important;
    border-top: 0.5px solid transparent !important;
}
body.theme-apple .boxscore-container[data-cols="2"] .boxscore-row {
    grid-template-columns: minmax(0, 1fr) 56px !important;
}
body.theme-apple .boxscore-container[data-cols="3"] .boxscore-row {
    grid-template-columns: minmax(0, 1fr) 56px 56px !important;
}
body.theme-apple .boxscore-container .boxscore-row + .boxscore-row {
    border-top-color: var(--ios-separator-soft, rgba(60,60,67,0.10)) !important;
}
body.theme-apple .boxscore-container .boxscore-player-name {
    color: var(--ios-fg) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.theme-apple .boxscore-container .boxscore-stat {
    color: var(--ios-fg) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.theme-apple .boxscore-container .boxscore-stat.stat-zero {
    color: var(--ios-fg-3, #8e8e93) !important;
    font-weight: 400 !important;
}
/* Dark mode — divider colours only, still no separate background */
body.theme-apple.theme-dark .boxscore-container {
    background: transparent !important;
    border-top-color: rgba(255,255,255,0.10) !important;
}
body.theme-apple.theme-dark .boxscore-container .boxscore-header {
    border-bottom-color: rgba(255,255,255,0.10) !important;
}
body.theme-apple.theme-dark .boxscore-container .boxscore-row + .boxscore-row {
    border-top-color: rgba(255,255,255,0.08) !important;
}
body.theme-apple.theme-dark .boxscore-container .boxscore-stat-header {
    color: rgba(255,255,255,0.60) !important;
}
body.theme-apple.theme-dark .boxscore-container .boxscore-player-name,
body.theme-apple.theme-dark .boxscore-container .boxscore-stat {
    color: rgba(255,255,255,0.95) !important;
}
body.theme-apple.theme-dark .boxscore-container .boxscore-stat.stat-zero {
    color: rgba(255,255,255,0.45) !important;
}

/* ============================================================
   8) BUTTON LOADING STATE — hide inner icons + text while a
   button is in `.is-loading` (or has `.btn-spinner:not(.d-none)`
   visible) so only the spinner shows. Prevents the "half-visible
   feather icons under the spinner" glitch when the user submits
   a score.
   ============================================================ */
body.theme-apple .btn.is-loading,
body.theme-apple button[aria-busy="true"] {
    pointer-events: none !important;
    opacity: 0.85 !important;
    position: relative !important;
}
body.theme-apple .btn.is-loading > *:not(.spinner-border):not(.btn-spinner),
body.theme-apple button[aria-busy="true"] > *:not(.spinner-border):not(.btn-spinner) {
    visibility: hidden !important;
}
/* record-score-modal.js toggles `.btn-spinner.d-none` — when it's
   visible (d-none removed) the button's text/icon should hide. */
body.theme-apple .btn:has(.btn-spinner:not(.d-none)) .btn-text {
    visibility: hidden !important;
}
body.theme-apple .btn:has(.btn-spinner:not(.d-none)) {
    position: relative !important;
    pointer-events: none !important;
}
body.theme-apple .btn .btn-spinner:not(.d-none) {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   TIMER RESYNCING — the moment after the app wakes up.
   iOS freezes JavaScript while the app is away, so the clock on
   screen is the one it fell asleep on and the real time arrives
   from the server a beat later. Without a sign of that, the stale
   value reads as the truth and then jumps for no visible reason.
   Dimmed and quietly pulsing says "this is not settled yet"
   without shouting; the digits stay readable throughout.
   ============================================================ */
body.theme-apple .timer-resyncing {
    opacity: 0.45;
    animation: ep-timer-resync 1.1s ease-in-out infinite;
}

@keyframes ep-timer-resync {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.75; }
}

/* Someone who has asked for less motion gets the dimming only. */
@media (prefers-reduced-motion: reduce) {
    body.theme-apple .timer-resyncing {
        animation: none;
        opacity: 0.5;
    }
}

/* ============================================================
   No hover-lift on touch screens.

   Cards rise 4px on :hover as a desktop cursor affordance. A finger
   cannot hover, but iOS applies the :hover state on tap and leaves it
   stuck there -- so tapping anywhere on a card, or landing next to a
   small control like the watch card's close button, made the whole
   container jump. Nothing in a native app moves because you touched
   the surface it sits on.

   (hover: none) is the media feature for exactly this: a primary input
   that cannot hover. Desktop keeps its lift. The deliberate press-down
   scale on interactive cards in _base.css is untouched -- pressing
   something that IS a button may respond; a container may not.
   ============================================================ */
@media (hover: none) {
    .card:hover,
    .card:active,
    .match-item:hover,
    .player-card:hover,
    .competition-card:hover,
    .competition-card:active,
    .folder-card-inner:hover,
    .chat-link-item:hover,
    .match-chat-link:hover,
    .all-chats-item:hover,
    [href*="/chat"]:hover,
    .chat-item:hover,
    .add-to-homescreen-btn:hover,
    body.theme-apple .pp-avatar:hover {
        transform: none !important;
    }
}