/* ============================================================
   UX round, September 2026. Loaded after everything else.
   ============================================================ */

/* ── Competition header ─────────────────────────────────────
   Back button and the actions (Rounds, Invite, Start) share the top
   line, the name sits under them as a left-aligned large title, and the
   chat and spectator link become labelled pills below it. The two
   markup rows dissolve (display: contents) so their four parts can be
   placed on one grid without moving any of the Jinja around. */
html body.theme-apple .competition-header.ch-header.card .card-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "back   actions"
        "info   info"
        "title  title"
        "links  links";
    column-gap: 12px;
    align-items: center;
}
html body.theme-apple .competition-header.ch-header .ch-row { display: contents !important; }
html body.theme-apple .competition-header.ch-header .ch-back { grid-area: back; }
html body.theme-apple .competition-header.ch-header .ch-actions {
    grid-area: actions;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
html body.theme-apple .competition-header.ch-header .ch-title {
    grid-area: title;
    justify-self: stretch !important;
    width: 100%;
    margin-top: 14px;
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: flex-start;
    min-width: 0;
}
html body.theme-apple .competition-header.ch-header .ch-title .d-flex { justify-content: flex-start !important; }
html body.theme-apple .competition-header.ch-header .ch-title > p { text-align: left; }
html body.theme-apple .competition-header.ch-header .ch-links {
    grid-area: links;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
html body.theme-apple .competition-header.ch-header .ch-links #groupChatBtn { order: -1; }
html body.theme-apple .competition-header.ch-header > .card-body > .text-muted,
html body.theme-apple .competition-header.ch-header > .card-body > .text-danger {
    grid-area: info;
    text-align: right;
    margin: 4px 0 0 !important;
}

/* Labelled pills, neutral grey like the Rounds button: they are
   shortcuts, not the main action on the page. */
html body.theme-apple .competition-header.ch-header .ch-links #copySpectatorBtn,
html body.theme-apple .competition-header.ch-header .ch-links #groupChatBtn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px;
    padding: 0 13px 0 11px;
    gap: 6px;
    border: none;
    border-radius: 999px;
    background: var(--ios-fill-subtle, rgba(120,120,128,0.12));
    background-color: rgba(120, 120, 128, 0.16);
    color: var(--ios-fg);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}
html body.theme-apple .competition-header.ch-header .ch-links #copySpectatorBtn svg,
html body.theme-apple .competition-header.ch-header .ch-links #copySpectatorBtn svg *,
html body.theme-apple .competition-header.ch-header .ch-links #groupChatBtn svg,
html body.theme-apple .competition-header.ch-header .ch-links #groupChatBtn svg * {
    color: var(--ios-fg);
    stroke: var(--ios-fg);
}
html body.theme-apple .competition-header.ch-header .ch-links #groupChatBtn svg {
    width: 15px;
    height: 15px;
    transform: none;
    stroke-width: 2.4;
}
html body.theme-apple .competition-header.ch-header .ch-links #copySpectatorBtn svg,
html body.theme-apple .competition-header.ch-header .ch-links #copySpectatorBtn svg * { stroke-width: 2.4; }
html body.theme-apple .competition-header.ch-header .ch-links #copySpectatorBtn:active,
html body.theme-apple .competition-header.ch-header .ch-links #groupChatBtn:active {
    transform: scale(0.95);
    background-color: rgba(120, 120, 128, 0.28);
}

/* ── Less blue ──────────────────────────────────────────────
   Blue means "you can tap this". Names, figures and labels that are
   information go back to the text colour, so the few blue things left
   (buttons, links, your own marker) stand out again. */

/* Leaderboard names: still links to the profile, but read as names */
html body.theme-apple .competition-leaderboard-table a.lb-player-link,
html body.theme-apple .competition-leaderboard-table a.lb-player-link:visited,
html body.theme-apple .competition-leaderboard-table a.lb-player-link:hover {
    color: var(--ios-fg) !important;
    font-weight: 500;
}
html body.theme-apple .competition-leaderboard-table a.lb-player-link.lb-player-self {
    font-weight: 700;
}

/* Overview: leader figures and progress are facts, not buttons */
html body.theme-apple .leader-value {
    color: var(--ios-fg);
    background: rgba(120, 120, 128, 0.16);
}
html body.theme-apple .overview-stat-item.progress-item {
    background: transparent;
    background-color: transparent;
}
html body.theme-apple .overview-stat-item.progress-item .stat-number,
html body.theme-apple .overview-stat-item .stat-number.progress-text {
    color: var(--ios-fg);
}

/* "A new round unlocks when..." note: quiet, no brand purple */
html body.theme-apple .match-card.round-unlock-note {
    background: transparent !important;
    border: 1px dashed var(--ios-separator, rgba(120, 120, 128, 0.3)) !important;
    border-radius: 12px;
    color: var(--ios-fg-2);
    box-shadow: none !important;
}
html body.theme-apple .match-card.round-unlock-note small { color: var(--ios-fg-2); }

/* ── Settings: plain link rows (from the old hamburger menu) ── */
html body.theme-apple a.ios-settings-row.ios-settings-link,
html body.theme-apple a.ios-settings-row.ios-settings-link:hover,
html body.theme-apple a.ios-settings-row.ios-settings-link:focus,
html body.theme-apple a.ios-settings-row.ios-settings-link:visited {
    color: var(--ios-fg);
    text-decoration: none;
    justify-content: space-between;
    background: transparent;
}
html body.theme-apple a.ios-settings-row.ios-settings-link:active {
    background: var(--ios-surface-press);
}
html body.theme-apple .ios-settings-chevron {
    width: 14px; height: 14px;
    color: var(--ios-fg-3);
    flex-shrink: 0;
}
html body.theme-apple .ios-settings-check {
    width: 18px; height: 18px;
    color: var(--ios-tint);
    flex-shrink: 0;
}

/* ── Profile: settings gear, mirror of the back button ── */
html body.theme-apple a.pp-settings {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    z-index: 2;
}
html body.theme-apple a.pp-settings svg { width: 18px; height: 18px; }

/* ── Wizard step 1: "What is the difference?" ── */
html body.theme-apple a.wizard-help-link,
html body.theme-apple a.wizard-help-link:hover,
html body.theme-apple a.wizard-help-link:visited {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
    color: var(--ios-tint);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
html body.theme-apple a.wizard-help-link:active { opacity: 0.6; }

/* ── FAQ answers: one voice ─────────────────────────────────
   Some answers had bold words and others none, and the bold stood out
   hard against grey body text. Running text is plain and in the normal
   text colour; only the lead-in of a numbered step stays bold. */
html body.theme-apple:not(.theme-dark) #faq-container .accordion-body,
html body.theme-apple:not(.theme-dark) #faq-container .accordion-body p,
html body.theme-apple:not(.theme-dark) #faq-container .accordion-body li {
    color: rgba(0, 0, 0, 0.82) !important;
}
html body.theme-apple #faq-container .accordion-body strong,
html body.theme-apple #faq-container .accordion-body b {
    font-weight: inherit;
    color: inherit;
}
html body.theme-apple #faq-container .accordion-body li > strong:first-child {
    font-weight: 600;
}

/* ── Messages list ──────────────────────────────────────────
   Rows inside one card had an 8px gap left over from when each was its
   own card, and a hairline too faint to see; the chevron sat above the
   date instead of beside it. */
html body.theme-apple .ios-msg-list .ios-msg-swipe { margin-bottom: 0; }
html body.theme-apple .ios-msg-list .ios-msg-swipe:not(:last-child) .ios-msg-row::after {
    content: '';
    position: absolute;
    left: 16px;
    bottom: 0;
    /* Something upstream zeroes `right`, which left the line 0px wide:
       that is why there never was a visible divider here. */
    width: calc(100% - 16px) !important;
    height: 1px;
    opacity: 1 !important;
    /* An old tap-ripple also lives on ::after of every chat link
       (_pages-extra.css) and hid the divider: undo all of it. */
    top: auto !important;
    border-radius: 0 !important;
    transform: none !important;
    background: rgba(60, 60, 67, 0.13);
}
html body.theme-apple.theme-dark .ios-msg-list .ios-msg-swipe:not(:last-child) .ios-msg-row::after {
    background: rgba(255, 255, 255, 0.10);
}
html body.theme-apple .ios-msg-row-chevron {
    align-self: flex-start;
    margin-top: 4px;
}

/* ── Home: "Mijn competities" lines up with "Afgelopen" ──
   It sat 20px further left than the Finished header and its bottom
   overlapped the first row of cards. Same inset, same breathing room. */
html body.theme-apple #my-competitions-header {
    padding-left: 36px;
    margin-bottom: 34px;
}

/* ── Profile: big photo, standing on the card's top edge ────
   180px, with about 60% of it above the card. The card moves down by the
   part that sticks out (113px of the 188px ring) and the photo pulls its
   own space back with a negative margin, so the layout below barely moves.
   The ring takes the page colour so the photo reads as cut out of the
   card edge. */
html body.theme-apple .pp-hero {
    overflow: visible;
    margin-top: calc(env(safe-area-inset-top, 0px) + 14px + 113px);
}
html body.theme-apple .pp-hero .pp-avatar-wrap {
    margin-top: -141px;             /* 28px card padding + 113px above the edge */
    background: var(--ios-bg);
}
html body.theme-apple .pp-hero .pp-avatar {
    width: 180px;
    height: 180px;
    border-color: var(--ios-bg);
}
html body.theme-apple .pp-hero .pp-avatar.pp-avatar-placeholder { font-size: 72px; }
@media (min-width: 992px) {
    html body.theme-apple .playtomic-profile > .pp-hero {
        margin-top: 113px;
        top: 197px;                 /* sticky: keep the photo clear of the top bar */
    }
    html body.theme-apple .playtomic-profile > .pp-hero .pp-avatar-wrap {
        margin-top: -149px;         /* 36px desktop card padding + 113px */
    }
}

/* ── Profile photo menu: iOS context menu under the photo ── */
.pp-photo-pop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(0, 0, 0, 0);
    transition: background 200ms ease;
}
.pp-photo-pop-backdrop.is-open { background: rgba(0, 0, 0, 0.18); }
.pp-photo-pop {
    position: fixed;
    z-index: 10050;
    width: 232px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(250, 250, 252, 0.86);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.pp-photo-pop.is-open { opacity: 1; transform: scale(1); }
.pp-photo-pop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
}
.pp-photo-pop-item + .pp-photo-pop-item { border-top: 0.5px solid rgba(60, 60, 67, 0.22); }
.pp-photo-pop-item:active { background: rgba(0, 0, 0, 0.08); }
.pp-photo-pop-item svg {
    width: 19px;
    height: 19px;
    stroke-width: 2;
    color: inherit;
    flex-shrink: 0;
    margin-left: 12px;
}
body.theme-dark .pp-photo-pop {
    background: rgba(44, 44, 46, 0.86);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
body.theme-dark .pp-photo-pop-item { color: #fff; }
body.theme-dark .pp-photo-pop-item + .pp-photo-pop-item { border-top-color: rgba(255, 255, 255, 0.14); }
body.theme-dark .pp-photo-pop-item:active { background: rgba(255, 255, 255, 0.1); }

/* The photo comes forward a little while its menu is open */
html body.theme-apple .pp-hero .pp-avatar-wrap:has(.pp-avatar-lifted) { z-index: 10045; }
html body.theme-apple .pp-hero .pp-avatar { transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
html body.theme-apple .pp-hero .pp-avatar.pp-avatar-lifted { transform: scale(1.05); }

/* ── Home "next match" card: three quiet lines ──
   A link colour rule in dark mode turned every line white, so the label
   and the competition name had no hierarchy left. */
html body.theme-apple a.ios-next .ios-next-label { color: var(--ios-tint) !important; font-weight: 600; }
html body.theme-apple a.ios-next.is-attention .ios-next-label { color: var(--ios-orange) !important; }
html body.theme-apple a.ios-next .ios-next-comp { color: var(--ios-fg-2) !important; font-weight: 400; }
html body.theme-apple a.ios-next .ios-next-when { color: var(--ios-fg) !important; }
html body.theme-apple a.ios-next .ios-next-teams { color: var(--ios-fg-2) !important; font-size: 15px; }
html body.theme-apple a.ios-next .ios-next-where[hidden] { display: none; }

/* ── Match cards ────────────────────────────────────────────
   Dark mode: the round badge ("R2") lost to a heavier light-mode rule and
   stayed a different blue from the "Gepland" badge beside it. */
html body.theme-apple.theme-dark .match-card .badge.rounds-badge,
html body.theme-apple.theme-dark .match-card .badge.bg-secondary.rounds-badge.rounds-badge--upcoming {
    background: rgba(10, 132, 255, 0.22) !important;
    background-color: rgba(10, 132, 255, 0.22) !important;
    color: #64B5FF !important;
}

/* The "&" between two names sat 1px under the first and 4px above the
   second. Same gap on both sides now. */
html body.theme-apple .match-card .team-players > .player-name {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.2;
}
html body.theme-apple .match-card .team-players > small {
    display: block;
    margin: 2px 0 !important;
    line-height: 1;
}

/* ── Landing: the weekly tagline is the headline ──
   The four lines are longer than the old three-word title, so a size
   that keeps the longest to about three lines on a phone. */
html body.theme-apple .apl-home-title {
    font-size: clamp(34px, 6.2vw, 56px);
    text-wrap: balance;
    max-width: 14ch;
    margin-left: auto;
    margin-right: auto;
}


/* ── Invite sheet: one line on who is added straight in ── */
html body.theme-apple .ios-invite-note {
    font-size: 13px; color: var(--ios-fg-2); text-align: center;
    margin: 2px auto 10px; max-width: 34ch; text-wrap: balance;
}


/* ── FAQ: the guided tour at the top ── */
html body.theme-apple .faq-tour {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: var(--ios-surface); border: 0.5px solid var(--ios-separator-soft);
    border-radius: 18px; padding: 14px 16px; margin: 0 0 16px;
}
html body.theme-apple .faq-tour-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body.theme-apple .faq-tour-text b { font-size: 16px; font-weight: 600; color: var(--ios-fg); }
html body.theme-apple .faq-tour-text span { font-size: 13.5px; color: var(--ios-fg-2); }
html body.theme-apple .faq-tour-btns { display: flex; gap: 8px; }
html body.theme-apple .faq-tour-btns a {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
    background: var(--ios-tint); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
html body.theme-apple .faq-tour-btns a + a { background: rgba(120,120,128,.16); color: var(--ios-fg); }
html body.theme-apple #faq-container .accordion-body a.faq-tour-link { color: var(--ios-tint) !important; font-weight: 500; text-decoration: none; }

/* ── Tab pages share the home screen's header ──────────────
   Matches and Messages are bottom-bar tabs now, so they open with the same
   large title, the same place for it and the same round grey buttons as
   Competitions, and no back button. */
html body.theme-apple .tab-header-wrap { max-width: 720px; margin-left: auto; margin-right: auto; }
html body.theme-apple .ios-messages-page .tab-header-wrap { margin-left: -16px; margin-right: -16px; }
html body.theme-apple .tab-header-btns { display: flex; gap: 8px; }
html body.theme-apple .tab-header-wrap .ios-icon-btn,
html body.theme-apple .tab-header-wrap .matches-filter-btn {
    width: 36px !important; height: 36px !important;
    border: none !important;
    background: var(--ios-fg-4) !important; background-color: var(--ios-fg-4) !important;
    color: var(--ios-fg) !important;
}
html body.theme-apple .tab-header-wrap .ios-icon-btn svg { width: 18px; height: 18px; }
html body.theme-apple .tab-header-wrap .matches-filter-btn.is-active {
    background: var(--ios-tint) !important; background-color: var(--ios-tint) !important; color: #fff !important;
}
html body.theme-apple .tab-header-wrap .ios-icon-btn svg,
html body.theme-apple .tab-header-wrap .ios-icon-btn svg * { stroke: currentColor !important; }

/* The three tabs share one frame, so switching between them only swaps the
   contents: title at the same height, first white container right under it,
   16px from the edge, same corners and edge. Competities sets the measure. */
html body.theme-apple #ios-dash .ios-stats { padding-left: 16px; padding-right: 16px; }
html body.theme-apple .tab-header-wrap + .container.my-4 { margin-top: 0 !important; padding-left: 16px; padding-right: 16px; }
html body.theme-apple .ios-messages-page .ios-empty-state,
html body.theme-apple .ios-messages-page .ios-msg-list {
    border-radius: var(--ios-radius-lg);
    border: 0.5px solid var(--ios-separator-soft);
    box-shadow: none;
}
html body.theme-apple .tab-header-wrap + .container.my-4 > .card:first-child { margin-top: 0 !important; }

/* Leaderboard faces: photo or initial in a 30px circle before the name,
   without making the rows any taller. */
html body.theme-apple .competition-leaderboard-table .lb-with-av {
    display: flex !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
html body.theme-apple .competition-leaderboard-table .lb-av {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ios-fg-4, rgba(120, 120, 128, 0.16));
    color: var(--ios-fg-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    /* Hangs 4px into the cell's own padding above and below, so the row
       keeps the height a line of text gave it. */
    margin: -4px 0;
}
html body.theme-apple .competition-leaderboard-table .lb-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "gast" after a guest's name: the leaderboard, match cards, anywhere.
   One look everywhere, the blue one. */
html body.theme-apple .lb-guest-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--ios-tint);
    background: rgba(10, 132, 255, 0.14);
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 4px;
    vertical-align: 1px;
    white-space: nowrap;
}

/* Unread count beside "Chats" in the desktop bar: the same small solid
   red pill as the count beside "Berichten", centred on the word. */
html body.theme-apple .navbar .nav-link .nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--ios-red, #ff3b30);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: 2px;
    font-variant-numeric: tabular-nums;
}

/* Under the leaderboard: how a dead heat was settled. */
html body.theme-apple .lb-tie-notes { margin: 10px 4px 0; }
html body.theme-apple .lb-tie-notes p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--ios-fg-3, #8e8e93); }

/* The winner's medal, once every match of the tournament is in. */
html body.theme-apple .lb-medal { font-size: 15px; line-height: 1; margin-left: 2px; }

/* ── Spacing tokens (8pt grid) ───────────────────────────────
   There were none; every block picked its own number. New work uses these. */
html body.theme-apple {
    --ep-space-1: 4px;
    --ep-space-2: 8px;
    --ep-space-3: 12px;
    --ep-space-4: 16px;
    --ep-space-5: 20px;
    /* The floating tab bar: 70px tall with a 12px gap under it. */
    --ep-tabbar-h: 82px;
    /* The page ends 16px above the tab bar, safe area included. Was a flat
       96px; the same idea, now from the tokens. */
    padding-bottom: calc(var(--ep-tabbar-h) + var(--ep-space-4) + var(--ep-safe-bottom, env(safe-area-inset-bottom, 0px)));
}

/* ── Competition screen: one 20px side margin, 16px between cards ──
   Header, tabs and cards each added their own inset on top of the page's
   11px, so they started at 28, 17 and 12. Now the page owns the margin and
   the parts sit flush on it. Scoped to the competition screen while it is
   the active tab slot, so other pages in the same container keep theirs. */
html body.theme-apple .container:has(> #tab-container > .tab-slot.active > .ch-header) {
    padding-left: var(--ep-space-5) !important;
    padding-right: var(--ep-space-5) !important;
}
html body.theme-apple .tab-slot:has(> .ch-header) > .ch-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
html body.theme-apple .tab-slot:has(> .ch-header) > .ch-header > .card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
html body.theme-apple .tab-slot:has(> .ch-header) #nav-tab {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Cards in the Matches tab: 20px inside, 16px apart. */
html body.theme-apple .tab-slot:has(> .ch-header) #matches-container > [class*="col-"] {
    margin-bottom: var(--ep-space-4) !important;
}
html body.theme-apple .tab-slot:has(> .ch-header) #matches-container > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
}
html body.theme-apple .tab-slot:has(> .ch-header) #one-day-timer-container {
    margin-top: 0 !important;
    margin-bottom: var(--ep-space-4) !important;
}
html body.theme-apple .tab-slot:has(> .ch-header) .matches-card-with-header > .card-body {
    padding: var(--ep-space-5) !important;
}
/* An empty card ends where its message ends: no extra space below. */
html body.theme-apple .tab-slot:has(> .ch-header) .matches-card-with-header .matches-empty-state:last-child {
    margin-bottom: 0 !important;
}
/* Filter buttons at the back button's size, title centred on them. */
html body.theme-apple .tab-slot:has(> .ch-header) .matches-card-filter-btn {
    /* !important: an inline style block pins every filter button at 34px. */
    width: 40px !important;
    height: 40px !important;
    top: var(--ep-space-5) !important;
    right: var(--ep-space-5) !important;
}
html body.theme-apple .tab-slot:has(> .ch-header) .matches-card-with-header .matches-card-title {
    line-height: 40px;
    padding: 0 48px;
}

/* Knock-out: what a match is played for, beside the round chip. The same
   pill as the round chip, in the pastel family of the host and member
   badges: green for a winning streak and the semi-finals, red for a losing
   streak, grey for the places further down, and gold for the final. */
body.theme-apple .match-card .badge.bracket-badge {
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 4px 6px !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 0;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}
/* The status, the round and the knock-out badge stay on one line, however
   narrow the phone: a badge wrapping under a badge reads as a mistake. */
body.theme-apple .match-card .match-badge-row {
    white-space: nowrap;
}
body.theme-apple .match-card .badge.bracket-badge--winners,
body.theme-apple .match-card .badge.bracket-badge--semi {
    background: rgba(52, 199, 89, 0.16) !important;
    color: #1F8A3B !important;
}
body.theme-apple .match-card .badge.bracket-badge--even {
    background: rgba(120, 120, 128, 0.14) !important;
    color: var(--ios-fg-2) !important;
}
/* The final: gold, with a slow sheen running across it. Two layers: the gold
   underneath stands still, and only the sheen on top moves. The sheen layer
   is transparent at both ends, so when the animation starts over it starts
   from a badge that looks exactly like the one it left: no jump. */
body.theme-apple .match-card .badge.bracket-badge--final {
    color: #5C3D00 !important;
    background-color: #E8B730 !important;
    /* background-image, not the shorthand: an !important shorthand would pin
       the position too, and an animation cannot move an !important value. */
    background-image:
        linear-gradient(105deg, transparent 0%, transparent 40%,
                        rgba(255, 248, 214, 0.9) 50%, transparent 60%, transparent 100%),
        linear-gradient(135deg, #F2CC5B 0%, #E2AE2A 55%, #D49B17 100%) !important;
    background-size: 300% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 100% 0, 0 0;
    box-shadow: 0 1px 3px rgba(185, 130, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    animation: bracket-final-sheen 3.6s linear infinite;
}
@keyframes bracket-final-sheen {
    0% { background-position: 100% 0, 0 0; }
    45% { background-position: 0% 0, 0 0; }
    100% { background-position: 0% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.theme-apple .match-card .badge.bracket-badge--final { animation: none; }
}

body.theme-apple .match-card .badge.bracket-badge--losers {
    background: rgba(255, 59, 48, 0.13) !important;
    color: #C4291F !important;
}
body.theme-apple .match-card .badge.bracket-badge--places {
    background: rgba(120, 120, 128, 0.14) !important;
    color: var(--ios-fg-2) !important;
}
body.theme-apple.theme-dark .match-card .badge.bracket-badge--winners,
body.theme-apple.theme-dark .match-card .badge.bracket-badge--semi {
    background: rgba(48, 209, 88, 0.20) !important;
    color: #5EDB7F !important;
}
body.theme-apple.theme-dark .match-card .badge.bracket-badge--losers {
    background: rgba(255, 69, 58, 0.20) !important;
    color: #FF7A70 !important;
}

/* Overview: "How does this tournament work?" -- the format's name, then a
   few short numbered sentences. */
body.theme-apple .how-it-works-card .how-it-works-body {
    padding: var(--ep-space-2, 8px) var(--ep-space-5, 20px) var(--ep-space-5, 20px);
}
body.theme-apple .how-it-works-card .how-it-works-format {
    display: inline-block;
    margin-bottom: var(--ep-space-3, 12px);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 122, 255, 0.12);
    color: var(--ios-tint);
    font-size: 12px;
    font-weight: 600;
}
body.theme-apple .how-it-works-card .how-it-works-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ios-fg);
    font-size: 15px;
    line-height: 1.45;
}
body.theme-apple .how-it-works-card .how-it-works-list li + li {
    margin-top: var(--ep-space-2, 8px);
}
body.theme-apple .how-it-works-card .how-it-works-list li::marker {
    color: var(--ios-fg-2);
    font-weight: 600;
}

/* ── "How it works" animation on the Overview (static/js/how-it-works-anim.js)
   The caption on top, so it is read without scrolling; under it the courts,
   just as tall as they need to be; the players' photos move between them.
   It replaces the written rules, which stay for reduced motion only. ── */
@media (prefers-reduced-motion: no-preference) {
    body.theme-apple .how-it-works-card.has-anim { display: none; }
}
body.theme-apple .hiw-anim { display: flex; justify-content: center; }
body.theme-apple .hiw-stage {
    position: relative;
    width: min(100%, 380px);
    overflow: hidden;
    border-radius: 24px;
    background: var(--ios-bg, #F2F2F7);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    padding: 16px 14px 12px;
}
body.theme-apple .hiw-caption {
    min-height: 52px;
    margin: 0 4px 12px;
    color: var(--ios-fg);
    font-family: Poppins, Inter, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.22;
    letter-spacing: -0.01em;
    opacity: 0;
}
body.theme-apple .hiw-caption.is-in { animation: hiw-caption-in 650ms cubic-bezier(.25,.8,.25,1) forwards; }
@keyframes hiw-caption-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

body.theme-apple .hiw-area { position: relative; }
body.theme-apple .hiw-title,
body.theme-apple .hiw-courts,
body.theme-apple .hiw-table {
    position: absolute;
    left: 0; right: 0; top: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 650ms ease;
}
body.theme-apple .hiw-courts { position: relative; }
body.theme-apple .hiw-stage.show-title .hiw-title,
body.theme-apple .hiw-stage.show-courts .hiw-courts,
body.theme-apple .hiw-stage.show-table .hiw-table { opacity: 1; }

body.theme-apple .hiw-title { display: flex; flex-direction: column; gap: 8px; padding: 18px 6px; }
body.theme-apple .hiw-playing { color: var(--ios-fg-2); font-size: 15px; font-weight: 500; }
body.theme-apple .hiw-name { color: var(--ios-fg); font-family: Poppins, Inter, -apple-system, sans-serif; font-weight: 600; font-size: 28px; line-height: 1.12; letter-spacing: -0.02em; }
body.theme-apple .hiw-format { align-self: flex-start; margin-top: 4px; padding: 5px 11px; border-radius: 999px; background: rgba(0,122,255,0.12); color: var(--ios-tint); font-size: 13px; font-weight: 600; }
body.theme-apple .hiw-facts { color: var(--ios-fg-2); font-size: 14px; }

body.theme-apple .hiw-courts { display: flex; flex-direction: column; gap: 8px; }
body.theme-apple .hiw-court {
    background: var(--ios-surface, #fff);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    border-radius: 16px;
    padding: 8px 12px 10px;
    transition: box-shadow 400ms ease, transform 400ms ease, opacity 400ms ease;
}
body.theme-apple .hiw-court.is-lit,
body.theme-apple .hiw-courts.is-all .hiw-court { box-shadow: 0 0 0 2px rgba(0,122,255,0.4); }
body.theme-apple .hiw-courts.is-all .hiw-court { animation: hiw-pulse 1.2s ease-in-out infinite; }
body.theme-apple .hiw-court.is-faded { opacity: 0.35; }
@keyframes hiw-pulse { 50% { transform: scale(1.015); } }
body.theme-apple .hiw-court-head { display: flex; align-items: center; justify-content: space-between; height: 18px; margin-bottom: 6px; }
body.theme-apple .hiw-court-name { color: var(--ios-fg-2); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
body.theme-apple .hiw-badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; opacity: 0; transition: opacity 500ms ease; }
body.theme-apple .hiw-badge.is-semi { opacity: 1; background: rgba(52,199,89,0.16); color: #1F8A3B; }
body.theme-apple .hiw-badge.is-date { opacity: 1; background: rgba(120,120,128,0.14); color: var(--ios-fg-2); }
body.theme-apple .hiw-badge.is-date.is-set { background: rgba(0,122,255,0.12); color: var(--ios-tint); }
body.theme-apple .hiw-badge.is-ok { opacity: 1; background: rgba(52,199,89,0.16); color: #1F8A3B; }
body.theme-apple .hiw-badge.is-final {
    opacity: 1;
    color: #5C3D00;
    background-color: #E8B730;
    background-image:
        linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,248,214,0.9) 50%, transparent 60%, transparent 100%),
        linear-gradient(135deg, #F2CC5B 0%, #E2AE2A 55%, #D49B17 100%);
    background-size: 300% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0, 0 0;
    animation: bracket-final-sheen 3.6s linear infinite;
}
body.theme-apple .hiw-court-row { display: flex; align-items: center; justify-content: space-between; }
body.theme-apple .hiw-court-row.is-singles { justify-content: space-around; }
body.theme-apple .hiw-slot { width: 44px; height: 44px; flex: 0 0 44px; }
body.theme-apple .hiw-mid { flex: 1 1 auto; display: flex; justify-content: center; }
body.theme-apple .hiw-vs { color: var(--ios-fg-3, #8e8e93); font-size: 12px; }
body.theme-apple .hiw-score {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ios-fg, #000);
    color: var(--ios-surface, #fff);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    animation: hiw-caption-in 300ms ease both;
}
body.theme-apple .hiw-bench {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px;
    border: 1.5px dashed rgba(120,120,128,0.35);
    border-radius: 16px;
}
body.theme-apple .hiw-bench-label { color: var(--ios-fg-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; }

body.theme-apple .hiw-table { display: flex; flex-direction: column; gap: 8px; }
body.theme-apple .hiw-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--ios-surface, #fff);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    border-radius: 14px;
    padding: 8px 14px;
}
body.theme-apple .hiw-rank { width: 14px; color: var(--ios-fg-2); font-weight: 600; font-size: 14px; }
body.theme-apple .hiw-row-name { flex: 1; color: var(--ios-fg); font-weight: 600; font-size: 15px; }
body.theme-apple .hiw-row-val { color: var(--ios-fg); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }

body.theme-apple .hiw-av {
    position: absolute;
    left: 0; top: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(120,120,128,0.18);
    color: var(--ios-fg-2);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 17px;
    box-shadow: 0 0 0 2px var(--ios-surface, #fff);
    transition: transform 1150ms cubic-bezier(.25,.8,.25,1), opacity 600ms ease, box-shadow 450ms ease, filter 450ms ease;
    z-index: 2;
}
body.theme-apple .hiw-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body.theme-apple .hiw-av.hiw-av-empty { background: rgba(120,120,128,0.10); }
/* Rings that read at a glance: solid colour, no pastel. */
body.theme-apple .hiw-av.is-won { box-shadow: 0 0 0 3px var(--ios-surface, #fff), 0 0 0 6px #34C759; }
body.theme-apple .hiw-av.is-lost { box-shadow: 0 0 0 3px var(--ios-surface, #fff), 0 0 0 6px #FF3B30; filter: saturate(0.6); }
body.theme-apple .hiw-av.is-me { box-shadow: 0 0 0 3px var(--ios-surface, #fff), 0 0 0 6px var(--ios-tint, #007AFF); }
body.theme-apple .hiw-av.is-dim { opacity: 0.25 !important; }
body.theme-apple .hiw-av.is-crown::after {
    content: "\1F451";
    position: absolute;
    top: -21px; left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    animation: hiw-crown 600ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes hiw-crown { from { opacity: 0; transform: translate(-50%, 8px) scale(0.6); } }

body.theme-apple .hiw-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; min-height: 34px; }
body.theme-apple .hiw-example { color: var(--ios-fg-3, #8e8e93); font-size: 11px; }
body.theme-apple .hiw-replay {
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--ios-tint);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}
body.theme-apple .hiw-stage.is-done .hiw-replay { opacity: 1; pointer-events: auto; }

/* The day itself, in the how-it-works animation: the match card, the push,
   the timer with its horn, the score going to the host. */
body.theme-apple .hiw-extra {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; align-items: flex-start; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 650ms ease;
}
body.theme-apple .hiw-stage.show-extra .hiw-extra { opacity: 1; }
body.theme-apple .hiw-extra > * { animation: hiw-caption-in 700ms cubic-bezier(.25,.8,.25,1) both; }
body.theme-apple .hiw-face {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%; overflow: hidden;
    background: rgba(120,120,128,0.18); color: var(--ios-fg-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px;
}
body.theme-apple .hiw-face img { width: 100%; height: 100%; object-fit: cover; }
body.theme-apple .hiw-face.is-host { background: rgba(175,82,222,0.16); color: #8E3AB8; }

body.theme-apple .hiw-mcard {
    width: 100%;
    background: var(--ios-surface, #fff);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    border-radius: 16px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
body.theme-apple .hiw-mcard-top { display: flex; align-items: center; justify-content: space-between; }
body.theme-apple .hiw-chip { padding: 3px 9px; border-radius: 999px; background: rgba(0,122,255,0.14); color: var(--ios-tint); font-size: 11px; font-weight: 600; }
body.theme-apple .hiw-court-pill { padding: 4px 10px; border-radius: 999px; background: rgba(0,122,255,0.14); color: var(--ios-tint); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; animation: hiw-pulse 1.2s ease-in-out 2; }
body.theme-apple .hiw-mcard-side { display: flex; align-items: center; gap: 6px; }
body.theme-apple .hiw-mcard-names { margin-left: 4px; color: var(--ios-fg); font-weight: 600; font-size: 14px; }
body.theme-apple .hiw-mcard-vs { color: var(--ios-fg-3, #8e8e93); font-size: 12px; padding-left: 4px; }

body.theme-apple .hiw-push {
    width: 100%;
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    animation: hiw-push-in 520ms cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes hiw-push-in { from { opacity: 0; transform: translateY(-24px) scale(0.96); } to { opacity: 1; transform: none; } }
body.theme-apple .hiw-push-icon { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 34px; }
body.theme-apple .hiw-push-text { flex: 1; min-width: 0; }
body.theme-apple .hiw-push-head { display: flex; justify-content: space-between; gap: 8px; }
body.theme-apple .hiw-push-title { color: #000; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-apple .hiw-push-now { color: rgba(60,60,67,0.6); font-size: 12px; }
body.theme-apple .hiw-push-body { color: #000; font-size: 13px; line-height: 1.3; margin-top: 2px; }

/* The timer scene is the app's own timer card: a white play-time tile with
   the clock in black, the round chip, the round blue horn button. When the
   horn goes, the button pulses in the app's blue; nothing red, no emoji. */
body.theme-apple .hiw-tcard {
    width: 100%;
    background: var(--ios-surface, #fff);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    border-radius: 16px; padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
body.theme-apple .hiw-ttiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.theme-apple .hiw-ttile {
    background: var(--ios-bg, #F2F2F7);
    border-radius: 14px; padding: 10px 8px; text-align: center;
    opacity: 0.45;
    box-shadow: 0 0 0 0 transparent;
    transition: opacity 700ms ease, box-shadow 700ms ease;
}
body.theme-apple .hiw-ttile.is-on { opacity: 1; box-shadow: 0 0 0 1.5px var(--ios-tint, #007AFF); }
body.theme-apple .hiw-tlabel { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--ios-fg); }
body.theme-apple .hiw-tclock { font-size: 30px; font-weight: 700; color: var(--ios-fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; }
body.theme-apple .hiw-tfoot { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
body.theme-apple .hiw-tround { padding: 3px 10px; border-radius: 999px; background: rgba(0,122,255,0.14); color: var(--ios-tint); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
body.theme-apple .hiw-thorn-wrap { display: flex; align-items: center; gap: 8px; }
body.theme-apple .hiw-thorn {
    position: relative;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid var(--ios-tint, #007AFF); color: var(--ios-tint, #007AFF);
    display: flex; align-items: center; justify-content: center;
    transition: background 400ms ease, color 400ms ease;
}
body.theme-apple .hiw-thorn-label { font-size: 12px; color: var(--ios-fg); }
body.theme-apple .hiw-day { width: 100%; display: flex; flex-direction: column; gap: 10px; }
body.theme-apple .hiw-day-under { display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.theme-apple .hiw-level {
    width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 10px 12px; border-radius: 14px;
    background: var(--ios-surface, #fff);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    animation: hiw-caption-in 700ms cubic-bezier(.2,.8,.2,1) both;
}
body.theme-apple .hiw-level .hiw-score { align-self: center; }
body.theme-apple .hiw-gp {
    padding: 5px 14px; border-radius: 999px;
    background: linear-gradient(90deg, #E8B931, #F5D76E);
    color: #5C4300; font-size: 13px; font-weight: 700;
    animation: hiw-caption-in 700ms 500ms cubic-bezier(.2,.8,.2,1) both;
}
body.theme-apple .hiw-stage.hiw-instant .hiw-level,
body.theme-apple .hiw-stage.hiw-instant .hiw-gp { animation: none !important; }
body.theme-apple .hiw-tcard.is-horn .hiw-thorn { background: var(--ios-tint, #007AFF); color: #fff; animation: hiw-pulse 0.6s ease-in-out 3; }
body.theme-apple .hiw-tcard.is-horn .hiw-thorn::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid var(--ios-tint, #007AFF);
    animation: hiw-ripple 1.1s ease-out 3;
}
@keyframes hiw-ripple { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }

/* The video bar: "Uitleg", the time, and a thin grey line that fills. The
   bar itself is taller than the line so a thumb can catch it. */
body.theme-apple .hiw-top { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 2px; }
body.theme-apple .hiw-label { color: var(--ios-fg-2); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
body.theme-apple .hiw-time { color: var(--ios-fg-3, #8e8e93); font-size: 11px; font-variant-numeric: tabular-nums; }
body.theme-apple .hiw-bar { position: relative; height: 18px; margin: 0 4px 6px; cursor: pointer; touch-action: none; display: flex; align-items: center; }
body.theme-apple .hiw-track { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(120,120,128,0.22); overflow: hidden; transition: height 150ms ease; }
body.theme-apple .hiw-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(60,60,67,0.55); }
body.theme-apple .hiw-stage.is-scrubbing .hiw-track { height: 6px; }

/* A tap shows a pause or play mark for a moment. */
body.theme-apple .hiw-pausemark {
    position: absolute; left: 50%; top: 50%;
    width: 56px; height: 56px; margin: -28px 0 0 -28px;
    border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; letter-spacing: -2px;
    opacity: 0; pointer-events: none; z-index: 5;
}
body.theme-apple .hiw-pausemark.is-on { animation: hiw-mark 700ms ease forwards; }
@keyframes hiw-mark { 0% { opacity: 0; transform: scale(0.8); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
body.theme-apple .hiw-stage.is-paused .hiw-time::after { content: "  \275A\275A"; }

/* While jumping to a moment (the start, or the bar), everything lands at
   once: no transitions, no entrance animations. */
body.theme-apple .hiw-stage.hiw-instant *,
body.theme-apple .hiw-stage.hiw-instant .hiw-av { transition: none !important; }
body.theme-apple .hiw-stage.hiw-instant .hiw-caption.is-in,
body.theme-apple .hiw-stage.hiw-instant .hiw-extra > *,
body.theme-apple .hiw-stage.hiw-instant .hiw-score,
body.theme-apple .hiw-stage.hiw-instant .hiw-bubble { animation: none !important; opacity: 1 !important; transform: none !important; }

body.theme-apple .hiw-tohost {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 10px;
}
body.theme-apple .hiw-tohost-who { display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.theme-apple .hiw-tohost-who .hiw-face { width: 52px; height: 52px; flex-basis: 52px; font-size: 20px; }
body.theme-apple .hiw-tohost-name { color: var(--ios-fg-2); font-size: 12px; font-weight: 600; }
body.theme-apple .hiw-bubble {
    padding: 8px 14px; border-radius: 18px;
    background: var(--ios-tint, #007AFF); color: #fff;
    font-weight: 700; font-size: 18px;
    animation: hiw-fly 1.6s cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes hiw-fly { 0% { opacity: 0; transform: translateX(-60px) scale(0.7); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateX(0) scale(1); } }

/* How-it-works: you. The app's blue self-dot on your own avatar, and your
   made-up result with its score, BOC and the send to the host. */
body.theme-apple .hiw-av.is-viewer::before {
    content: "";
    position: absolute; right: -1px; bottom: -1px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--ios-tint, #007AFF);
    box-shadow: 0 0 0 2px var(--ios-surface, #fff);
    z-index: 1;
}
body.theme-apple .hiw-mcard-names .self-dot { margin-left: 4px; }
body.theme-apple .hiw-mcard-pts { margin-left: auto; color: var(--ios-fg); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
body.theme-apple .hiw-court-pill.is-still { animation: none; }
body.theme-apple .hiw-boc {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 12px;
    background: rgba(120,120,128,0.08);
    transition: background 300ms ease, box-shadow 300ms ease;
}
body.theme-apple .hiw-boc-label { color: var(--ios-fg-2); font-size: 13px; font-weight: 600; }
body.theme-apple .hiw-boc-who { display: inline-flex; align-items: center; gap: 6px; }
body.theme-apple .hiw-boc-who .hiw-face { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; }
body.theme-apple .hiw-boc-n { color: var(--ios-fg); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
body.theme-apple .hiw-mcard.show-boc .hiw-boc { background: rgba(0,122,255,0.10); box-shadow: 0 0 0 1.5px var(--ios-tint, #007AFF); }
body.theme-apple .hiw-send { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
body.theme-apple .hiw-send-btn { padding: 7px 14px; border-radius: 999px; background: var(--ios-tint, #007AFF); color: #fff; font-size: 13px; font-weight: 600; }
body.theme-apple .hiw-send .hiw-face { width: 28px; height: 28px; flex-basis: 28px; font-size: 12px; }

/* The host switched BOC off: no BOC/BOCR columns on the leaderboard. */
body.theme-apple .no-boc .boc-col,
body.theme-apple .no-boc [data-stat="boc"],
body.theme-apple .no-boc [data-stat="bocr"] { display: none; }
body.theme-apple .hiw-send { justify-content: flex-start; }
body.theme-apple .hiw-send-text { color: var(--ios-fg-2); font-size: 13px; font-weight: 600; }
body.theme-apple .hiw-push-wrap { width: 100%; display: flex; flex-direction: column; gap: 12px; }
body.theme-apple .hiw-tip {
    padding: 8px 12px; border-radius: 12px;
    background: rgba(0,122,255,0.08); color: var(--ios-fg-2);
    font-size: 13px; font-weight: 500; line-height: 1.35;
    animation: hiw-caption-in 700ms 2200ms cubic-bezier(.25,.8,.25,1) both;
}
body.theme-apple .hiw-stage.hiw-instant .hiw-tip { animation: none !important; }
body.theme-apple .hiw-mcards { width: 100%; display: flex; flex-direction: column; gap: 10px; }
body.theme-apple .hiw-mcard.is-other { opacity: 0.6; }

/* Matches tab while it loads: the app's own thin blue spinner, grey text. */
body.theme-apple .matches-loading {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 48px 0 32px;
}
body.theme-apple .matches-loading-text { color: var(--ios-fg-2); font-size: 14px; }
/* Every "primary" spinner in the app: the same thin blue ring, never the
   old purple Bootstrap one. */
body.theme-apple .spinner-border.text-primary {
    width: 26px; height: 26px;
    border-width: 2.5px;
    color: var(--ios-tint) !important;
    border-color: rgba(0, 122, 255, 0.18);
    border-right-color: var(--ios-tint);
    border-top-color: var(--ios-tint);
    animation: ios-spinner-spin 0.85s linear infinite;
}

/* How-it-works: the share button, and the onboarding scenes (get the app,
   open the link, you are in, the host presses Start). */
body.theme-apple .hiw-top-right { display: inline-flex; align-items: center; gap: 10px; }
body.theme-apple .hiw-share {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border: 0; border-radius: 999px;
    background: rgba(0,122,255,0.12); color: var(--ios-tint, #007AFF);
    font-size: 12px; font-weight: 600;
}
body.theme-apple .hiw-ob { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; }
body.theme-apple .hiw-ob-icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
body.theme-apple .hiw-ob-title { color: var(--ios-fg); font-size: 20px; font-weight: 700; }
body.theme-apple .hiw-ob-stores { display: flex; gap: 8px; margin-top: 4px; }
body.theme-apple .hiw-ob-store {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 9px; border-radius: 10px;
    background: #000; color: #fff;
}
body.theme-apple .hiw-ob-store-icon { display: inline-flex; width: 20px; height: 20px; }
body.theme-apple .hiw-ob-store-text { display: flex; flex-direction: column; line-height: 1.1; }
body.theme-apple .hiw-ob-store-small { font-size: 9px; font-weight: 500; }
body.theme-apple .hiw-ob-store-big { font-size: 14px; font-weight: 600; }
body.theme-apple .hiw-ob-chat { width: 100%; position: relative; padding-top: 10px; }
body.theme-apple .hiw-ob-bubble {
    width: 86%; padding: 10px 12px; border-radius: 16px 16px 16px 4px;
    background: var(--ios-surface, #fff);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    display: flex; flex-direction: column; gap: 8px;
}
body.theme-apple .hiw-ob-bubble-text { color: var(--ios-fg); font-size: 15px; }
body.theme-apple .hiw-ob-link { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(120,120,128,0.10); }
body.theme-apple .hiw-ob-link-icon { width: 40px; height: 40px; border-radius: 9px; }
body.theme-apple .hiw-ob-link-title { color: var(--ios-fg); font-size: 14px; font-weight: 600; }
body.theme-apple .hiw-ob-link-url { color: var(--ios-tint, #007AFF); font-size: 13px; }
body.theme-apple .hiw-ob-tap {
    position: absolute; left: 34%; top: 92px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0,122,255,0.25); box-shadow: 0 0 0 2px rgba(0,122,255,0.6);
    animation: hiw-ob-tap 1.2s 900ms ease-out both;
}
@keyframes hiw-ob-tap { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.3); } }
body.theme-apple .hiw-ob-joined {
    width: 100%; padding: 16px; border-radius: 16px;
    background: var(--ios-surface, #fff);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
body.theme-apple .hiw-ob-joined-name { color: var(--ios-fg); font-size: 18px; font-weight: 700; }
body.theme-apple .hiw-ob-faces { display: flex; }
body.theme-apple .hiw-ob-faces .hiw-face { width: 38px; height: 38px; flex-basis: 38px; margin-right: -8px; box-shadow: 0 0 0 2px var(--ios-surface, #fff); }
body.theme-apple .hiw-ob-check {
    padding: 5px 12px; border-radius: 999px;
    background: rgba(52,199,89,0.14); color: #248A3D;
    font-size: 13px; font-weight: 600;
    animation: hiw-caption-in 450ms 600ms cubic-bezier(.2,.8,.2,1) both;
}
body.theme-apple .hiw-ob-start { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
body.theme-apple .hiw-ob-start-btn {
    padding: 10px 34px; border-radius: 999px;
    background: var(--ios-tint, #007AFF); color: #fff;
    font-size: 16px; font-weight: 600;
    animation: hiw-ob-press 600ms 400ms ease both;
}
@keyframes hiw-ob-press { 50% { transform: scale(0.92); opacity: 0.8; } }
body.theme-apple .hiw-ob-made { width: 100%; display: flex; flex-direction: column; gap: 8px; }
body.theme-apple .hiw-ob-made-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 14px;
    background: var(--ios-surface, #fff);
    border: 0.5px solid var(--ios-separator-soft, rgba(60,60,67,0.10));
    animation: hiw-caption-in 450ms cubic-bezier(.2,.8,.2,1) both;
}
body.theme-apple .hiw-ob-made-faces { display: flex; gap: 4px; }
body.theme-apple .hiw-ob-made-faces .hiw-face { width: 28px; height: 28px; flex-basis: 28px; }
body.theme-apple .hiw-stage.hiw-instant .hiw-ob-tap,
body.theme-apple .hiw-stage.hiw-instant .hiw-ob-check,
body.theme-apple .hiw-stage.hiw-instant .hiw-ob-start-btn,
body.theme-apple .hiw-stage.hiw-instant .hiw-ob-made-row { animation: none !important; }
body.theme-apple .hiw-stage.hiw-instant .hiw-ob-tap { opacity: 0; }

/* Share as video (how-it-works-video.js): a sheet with the 9:16 frame being
   recorded, a progress line, then Share / Save. */
html.hiwv-open, html.hiwv-open body { overflow: hidden; }
body.theme-apple .hiwv-sheet {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: flex-end; justify-content: center;
}
body.theme-apple .hiwv-panel {
    width: 100%; max-width: 480px; height: 100%;
    background: var(--ios-bg, #F2F2F7);
    border-radius: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    display: flex; flex-direction: column; gap: 12px;
}
body.theme-apple .hiwv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.theme-apple .hiwv-status { color: var(--ios-fg); font-size: 17px; font-weight: 600; }
body.theme-apple .hiwv-close { border: 0; background: none; color: var(--ios-tint, #007AFF); font-size: 17px; padding: 4px 0; }
body.theme-apple .hiwv-holder { flex: 1; min-height: 0; display: flex; justify-content: center; overflow: hidden; }
body.theme-apple .hiwv-frame {
    width: 360px; height: 640px; flex: 0 0 360px;
    transform-origin: top center;
    background: var(--ios-bg, #F2F2F7);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    padding: 22px 14px 14px;
    overflow: hidden;
}
body.theme-apple .hiwv-brand { display: flex; align-items: center; gap: 10px; margin: 0 6px 14px; }
body.theme-apple .hiwv-brand-icon { width: 40px; height: 40px; border-radius: 10px; }
body.theme-apple .hiwv-brand-name { color: var(--ios-fg); font-size: 17px; font-weight: 700; }
body.theme-apple .hiwv-brand-sub { color: var(--ios-fg-2); font-size: 13px; }
body.theme-apple .hiwv-anim { flex: 1; min-height: 0; }
body.theme-apple .hiwv-anim .hiw-stage { width: 100%; background: var(--ios-surface, #fff); }
body.theme-apple .hiwv-url { text-align: center; color: var(--ios-fg-3, #8e8e93); font-size: 12px; font-weight: 600; margin-top: 10px; }
body.theme-apple .hiwv-progress { height: 3px; border-radius: 2px; background: rgba(120,120,128,0.20); overflow: hidden; }
body.theme-apple .hiwv-progress-fill { height: 100%; width: 0; background: var(--ios-tint, #007AFF); }
body.theme-apple .hiwv-actions { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
body.theme-apple .hiwv-btn {
    display: block; width: 100%; padding: 13px; border: 0; border-radius: 14px;
    background: var(--ios-tint, #007AFF); color: #fff; text-align: center; text-decoration: none;
    font-size: 17px; font-weight: 600;
}
body.theme-apple .hiwv-btn.is-plain { background: rgba(0,122,255,0.12); color: var(--ios-tint, #007AFF); }
/* In the shared video: the thin progress bar under the brand. */
body.theme-apple .hiwv-vbar { height: 3px; margin: 0 6px 12px; border-radius: 3px; background: rgba(120,120,128,0.22); overflow: hidden; }
body.theme-apple .hiwv-vbar-fill { height: 100%; width: 0; background: rgba(60,60,67,0.55); border-radius: 3px; }
/* The store buttons pop one after the other: App Store, then Google Play. */
body.theme-apple .hiw-ob-store { animation: hiw-ob-pop 700ms 700ms cubic-bezier(.3,1.4,.5,1) both; }
body.theme-apple .hiw-ob-store + .hiw-ob-store { animation-delay: 1500ms; }
@keyframes hiw-ob-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
body.theme-apple .hiw-stage.hiw-instant .hiw-ob-store { animation: none !important; }