/* ============================================================
   Squadron V2 — Editorial design tokens
   ============================================================ */
:root {
    --v2-bg: #0e0e10;
    --v2-bg-elev: #16161a;
    --v2-bg-card: #1b1b20;
    --v2-bg-card-hi: #23232a;
    --v2-border: rgba(255, 255, 255, 0.05);
    --v2-border-hi: rgba(255, 255, 255, 0.1);
    --v2-text: #f4efe6;
    --v2-text-dim: #9a968d;
    --v2-text-mute: #5e5b55;
    --v2-accent: #ff5b2a;
    --v2-amber: #f4b53f;
    --v2-jade: #3fb28a;
    --v2-rose: #e8506e;

    --v2-font-display: 'Space Grotesk', system-ui, sans-serif;
    --v2-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --v2-font-body: 'Inter', system-ui, sans-serif;
}

/* ============================================================
   V2 surface — applied to the team page contents and the picker
   drawer body so they share the editorial canvas.
   ============================================================ */
.v2-surface {
    background: var(--v2-bg);
    color: var(--v2-text);
    font-family: var(--v2-font-body);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'tnum';
}

.v2-mono { font-family: var(--v2-font-mono); }
.v2-display { font-family: var(--v2-font-display); letter-spacing: -0.02em; }
.v2-no-scrollbar::-webkit-scrollbar { display: none; }
.v2-no-scrollbar { scrollbar-width: none; }

/* ============================================================
   Editorial header — used for the team page hero AND the picker
   ============================================================ */
.v2-page-notice {
    margin: 16px 20px 0;
    padding: 10px 12px;
    border: 1px solid var(--v2-border-hi);
    border-left: 3px solid var(--v2-amber);
    border-radius: 4px;
    background: var(--v2-bg-elev);
    color: var(--v2-text-dim);
    font-family: var(--v2-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.v2-header {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--v2-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.v2-header-kicker {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-accent);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.v2-header-title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 26px;
    color: var(--v2-text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.v2-header-pill {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--v2-border-hi);
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================================
   Squad page — populated state
   ============================================================ */
.v2-squad-hero { padding: 20px 20px 16px; }
.v2-squad-points {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.v2-squad-points .num {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 66px;
    color: var(--v2-text);
    letter-spacing: -0.04em;
    line-height: 0.9;
}
.v2-squad-points .delta {
    font-family: var(--v2-font-mono);
    font-size: 13px;
    color: var(--v2-accent);
    font-weight: 600;
}
.v2-squad-caption {
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.v2-info-btn {
    background: transparent;
    border: 0;
    padding: 0 0 0 6px;
    margin: 0;
    color: var(--v2-text-mute);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}
.v2-info-btn:hover { color: var(--v2-text); }
.v2-scoring-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--v2-text-dim);
}
.v2-scoring-note strong { color: var(--v2-text); font-weight: 600; }

.v2-stat-strip {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--v2-bg-card);
    border-radius: 8px;
    border: 1px solid var(--v2-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.v2-stat-strip .cell { min-width: 0; }
.v2-stat-strip .divider { width: 1px; height: 28px; background: var(--v2-border-hi); }
.v2-stat-strip .label {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.v2-stat-strip .value {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--v2-text);
}
.v2-stat-strip .value.accent { color: var(--v2-accent); }

.v2-squad-list { padding: 0 20px 24px; }
.v2-squad-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--v2-border-hi);
}
.v2-squad-list-head .title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--v2-text);
}
.v2-squad-list-head .formation {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-dim);
    letter-spacing: 0.1em;
}

.v2-squad-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--v2-border);
}
.v2-squad-row .crest {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--v2-bg-card);
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
}
.v2-squad-row .name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.v2-squad-row .name {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--v2-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-squad-row .meta {
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    margin-top: 2px;
}
.v2-squad-row .pts-cell { text-align: right; }
.v2-squad-row .pts-cell .pts {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--v2-text);
    line-height: 1;
}
.v2-squad-row.is-captain .pts-cell .pts { color: var(--v2-accent); }
.v2-squad-row .pts-cell .pts-sub {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-mute);
    margin-top: 2px;
}

.v2-cap-badge,
.v2-vc-badge {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}
.v2-cap-badge { background: var(--v2-accent); color: var(--v2-bg); }
.v2-vc-badge { border: 1px solid var(--v2-border-hi); color: var(--v2-text-dim); font-size: 10px; }

/* Transfer markers on the team page: "OUT NEXT" on a player leaving next round
   (still scoring this round), "IN NEXT" on a player joining next round. */
.v2-transfer-badge {
    font-family: var(--v2-font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.v2-transfer-badge.is-out {
    color: var(--v2-amber);
    background: rgba(244, 181, 63, 0.12);
    border: 1px solid rgba(244, 181, 63, 0.35);
}
.v2-transfer-badge.is-in {
    color: var(--v2-text-dim);
    border: 1px solid var(--v2-border-hi);
}
/* Players joining next round: toned down, no current-round points. */
.v2-squad-row.is-incoming { opacity: 0.5; }
.v2-squad-row .pts-cell .pts.pts-muted { color: var(--v2-text-mute); }
/* Divider heading before the "joining next round" players. */
.v2-squad-sub-head {
    font-family: var(--v2-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    padding: 12px 0 2px;
}

/* ============================================================
   Squad page — empty state (editorial hero)
   ============================================================ */
.v2-empty {
    padding: 24px 20px 28px;
    display: flex;
    flex-direction: column;
}
.v2-empty .kicker {
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-accent);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.v2-empty .head {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 46px;
    color: var(--v2-text);
    letter-spacing: -0.035em;
    line-height: 0.96;
}
.v2-empty .head em {
    color: var(--v2-accent);
    font-style: italic;
    font-weight: 700;
}
.v2-empty .lede {
    margin-top: 16px;
    font-size: 15px;
    color: var(--v2-text-dim);
    line-height: 1.55;
    max-width: 320px;
}
.v2-empty-foot {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--v2-border-hi);
    display: flex;
    justify-content: space-between;
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.v2-empty-foot strong {
    color: var(--v2-text);
    font-weight: 600;
}

/* ============================================================
   Primary CTA (Pick team / Continue)
   ============================================================ */
.v2-cta {
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 14px 18px;
    border-radius: 8px;
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    line-height: 1;
}
.v2-cta:disabled { opacity: 0.45; cursor: not-allowed; }
.v2-cta-accent { background: var(--v2-accent); color: var(--v2-bg); }
.v2-cta-paper { background: var(--v2-text); color: var(--v2-bg); }
.v2-cta-paper .v2-cta-aux { color: var(--v2-accent); }
.v2-cta .v2-cta-aux { font-family: var(--v2-font-display); font-weight: 700; }
.v2-cta-row {
    margin: 16px 0 8px;
}

/* ============================================================
   Picker drawer — full editorial picker inside wa-drawer
   ============================================================ */
.custom-drawer {
    --size: 92vh;
    --wa-color-surface-raised: var(--v2-bg);
    --wa-color-surface-border: var(--v2-border-hi);
}
.custom-drawer::part(panel) {
    background: var(--v2-bg);
    color: var(--v2-text);
    font-family: var(--v2-font-body);
}
.custom-drawer::part(close-button) {
    color: var(--v2-text);
}
.custom-drawer::part(footer) {
    border-color: var(--v2-border-hi);
    background: var(--v2-bg);
}
.custom-drawer::part(header) { display: none; }
.custom-drawer::part(body) { padding: 0; }
.custom-drawer::part(footer) { padding: 12px 20px 24px; }

.v2-picker {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* Clip (not hide) horizontal overflow from children — `overflow: clip`
       avoids creating a scroll-containing block, which would otherwise break
       `position: sticky` on `.v2-picker-foot`. */
    overflow-x: clip;
    min-width: 0;
}

.v2-budget {
    padding: 14px 20px 12px;
}
.v2-budget-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.v2-budget-label {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.v2-budget-value {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 30px;
    color: var(--v2-text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.v2-budget-value .max {
    color: var(--v2-text-dim);
    font-size: 18px;
    font-weight: 500;
}
.v2-budget-value .cur {
    color: var(--v2-text-dim);
    font-size: 20px;
    font-weight: 500;
    margin-right: 2px;
}
.v2-budget-value.over { color: var(--v2-rose); }
.v2-slot-row {
    text-align: right;
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--v2-text);
}
.v2-slot-row span.lab {
    color: var(--v2-text-dim);
    font-size: 14px;
    font-weight: 500;
    margin-right: 2px;
}
.v2-slot-row .sep {
    color: var(--v2-text-mute);
    margin: 0 2px;
}
.v2-budget-bar {
    height: 2px;
    background: var(--v2-bg-card);
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}
.v2-budget-bar > .fill {
    height: 100%;
    background: var(--v2-accent);
    width: 0%;
    transition: width 120ms linear;
}
.v2-budget-bar > .fill.over { background: var(--v2-rose); }

@media (max-width: 540px) {
    .v2-budget-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .v2-budget-row .v2-budget-label { text-align: left !important; }
    .v2-slot-row { text-align: left; }
}

.v2-transfer-readout {
    margin-top: 8px;
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.v2-transfer-readout.is-spent { color: var(--v2-accent); }
.v2-transfer-readout.is-over { color: var(--v2-rose); }

.v2-search {
    margin: 0 20px 12px;
    background: var(--v2-bg-card);
    border: 1px solid var(--v2-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.v2-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--v2-text);
    font-family: var(--v2-font-body);
    /* 16px (not 15px) — anything below 16px triggers iOS Safari's
       auto-zoom on focus, which is visually jarring. */
    font-size: 16px;
    flex: 1;
    min-width: 0;
}
.v2-search input::placeholder { color: var(--v2-text-mute); }
.v2-search .icon { color: var(--v2-text-dim); font-size: 15px; }
/* Hide the browser's native search clear button — we render our own. */
.v2-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.v2-search-clear {
    background: transparent;
    border: none;
    color: var(--v2-text-dim);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
    display: grid;
    place-items: center;
    border-radius: 4px;
}
.v2-search-clear:hover { color: var(--v2-text); }
.v2-search input:placeholder-shown ~ .v2-search-clear { display: none; }

.v2-filter-rail {
    display: flex;
    gap: 6px;
    padding: 0 20px 14px;
    overflow-x: auto;
}
.v2-chip {
    background: transparent;
    color: var(--v2-text);
    border: 1px solid var(--v2-border-hi);
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--v2-font-display);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 80ms linear, color 80ms linear, border-color 80ms linear;
}
.v2-chip .count {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    opacity: 0.7;
    font-weight: 500;
    pointer-events: none;
}
.v2-chip.is-active {
    background: var(--v2-text);
    color: var(--v2-bg);
    border-color: var(--v2-text);
}

.v2-sort-row {
    display: flex;
    justify-content: space-between;
    padding: 0 20px 8px;
    margin-bottom: 0;
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--v2-border-hi);
    padding-bottom: 8px;
}
.v2-sort-row .cols {
    display: flex;
    gap: 24px;
}
.v2-sort-row .cols .active { color: var(--v2-text); }

.v2-picker-list {
    padding: 0 20px 12px;
    /* Don't let the browser try to "anchor" scroll position by compensating
       when a row above the viewport collapses — scroll-anchoring on a 1100-row
       list interacts badly with rapid hide/show on iOS. */
    overflow-anchor: none;
}

.v2-error-banner {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #f5b27a;
    background: rgba(245, 178, 122, 0.12);
    border: 1px solid rgba(245, 178, 122, 0.35);
}
.v2-player-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--v2-border);
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    transition: background-color 100ms linear;
    /* `content-visibility: auto` lets the browser skip layout/paint for any
       row that's not currently in (or near) the viewport. With ~1100 rows
       this turns each row hide from "reflow everything downstream" into
       "reflow the visible window only", which is exactly what was making
       top-to-bottom unpicks progressively slow. The intrinsic-size hint
       keeps scroll position stable while rows are skipped. */
    content-visibility: auto;
    contain-intrinsic-size: auto 64px;
}
.v2-player-row.is-selected {
    /* Solid color (was `linear-gradient`) — gradients spin up a compositor
       layer per row, and rapid toggling on/off backs up the iOS compositor. */
    background-color: rgba(255, 91, 42, 0.12);
    box-shadow: inset 3px 0 0 var(--v2-accent);
}
.v2-player-row.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Admin-disabled players ("out" of the tournament): locked, can't be added. */
.v2-player-row.is-unavailable {
    opacity: 0.45;
    cursor: not-allowed;
}
.v2-player-row.is-unavailable .v2-add-btn { display: none; }
.v2-out-chip {
    font-family: var(--v2-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    color: #f5b27a;
    background: rgba(245, 178, 122, 0.14);
}
.v2-player-row .crest {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--v2-bg-card);
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
}
.v2-player-row .name-block { min-width: 0; }
.v2-player-row .name {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--v2-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-player-row .sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.v2-pos-chip {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-dim);
    letter-spacing: 0.1em;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid var(--v2-border-hi);
}
.v2-player-row .team-name {
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
}
.v2-player-row .stats {
    display: flex;
    gap: 24px;
    font-family: var(--v2-font-mono);
    font-size: 13px;
    color: var(--v2-text);
}
.v2-player-row .stats .price { width: 32px; text-align: right; }
.v2-player-row .stats .pts {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 16px;
    width: 32px;
    text-align: right;
}
.v2-player-row.is-selected .stats .pts { color: var(--v2-accent); }
.v2-add-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: transparent;
    border: 1.5px solid var(--v2-border-hi);
    color: var(--v2-text-dim);
    font-size: 14px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
    cursor: pointer;
}
.v2-add-btn::before { content: "＋"; }
.v2-player-row.is-selected .v2-add-btn {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: var(--v2-bg);
}
.v2-player-row.is-selected .v2-add-btn::before { content: "✓"; }

.v2-cap-toggles {
    grid-column: 1 / -1;
    display: none;
    gap: 6px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed var(--v2-border-hi);
    align-items: center;
}
.v2-player-row.is-selected .v2-cap-toggles { display: flex; }
.v2-cap-toggles .label {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 4px;
}
.v2-cap-toggle {
    width: 32px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--v2-border-hi);
    color: var(--v2-text-dim);
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}
.v2-cap-toggle.vc { font-size: 13px; }
.v2-cap-toggle.is-on.c {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: var(--v2-bg);
}
.v2-cap-toggle.is-on.vc {
    color: var(--v2-accent);
    border-color: var(--v2-accent);
}

.v2-empty-list {
    padding: 40px 20px;
    text-align: center;
    color: var(--v2-text-dim);
    font-family: var(--v2-font-body);
    font-size: 15px;
}

.v2-picker-foot {
    position: sticky;
    bottom: 0;
    padding: 12px 20px 24px;
    background: linear-gradient(180deg, transparent, var(--v2-bg) 30%);
}

/* ============================================================
   App chrome — global header + tab nav
   ============================================================ */
.v2-app-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--v2-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.v2-app-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.v2-app-brand .mark {
    font-size: 20px;
    line-height: 1;
}
.v2-app-brand .name {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--v2-text);
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--v2-border-hi);
    border-radius: 4px;
    font-family: var(--v2-font-mono);
    font-size: 13px;
    color: var(--v2-text-dim);
    text-decoration: none;
    letter-spacing: 0.04em;
}
.v2-user-pill .who { color: var(--v2-text); }
.v2-user-pill .pts { color: var(--v2-accent); font-weight: 600; }

.v2-app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.v2-user-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--v2-border-hi);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    color: var(--v2-text);
    background: transparent;
    transition: border-color 80ms linear;
}
.v2-user-flag.is-empty {
    color: var(--v2-text-dim);
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 18px;
}
.v2-user-flag:hover { border-color: var(--v2-accent); }

.v2-user-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--v2-border-hi);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    color: var(--v2-text-dim);
    background: transparent;
    transition: border-color 80ms linear, color 80ms linear;
}
.v2-user-settings:hover {
    border-color: var(--v2-accent);
    color: var(--v2-text);
}

.v2-app-nav {
    display: flex;
    padding: 0 20px;
    border-bottom: 1px solid var(--v2-border);
    gap: 24px;
}
.v2-nav-link {
    padding: 14px 0 12px;
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--v2-text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    line-height: 1;
}
.v2-nav-link.up-current {
    color: var(--v2-text);
    border-bottom-color: var(--v2-accent);
    font-weight: 700;
}

.v2-page-shell {
    padding: 0 20px 32px;
}
.v2-page-shell > .v2-header {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   Fixtures
   ============================================================ */
.v2-fixture {
    padding: 16px 0;
    border-bottom: 1px solid var(--v2-border);
}
.v2-fixture:first-child { border-top: 1px solid var(--v2-border-hi); }
.v2-fixture-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.v2-fixture-meta .stage { color: var(--v2-text-mute); }
.v2-fixture-team {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}
.v2-fixture-team .crest {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--v2-bg-card);
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
}
.v2-fixture-team .name {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--v2-text);
}
.v2-fixture-team .code {
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    margin-top: 2px;
    letter-spacing: 0.1em;
}

/* ============================================================
   Ranks (highscores)
   ============================================================ */
.v2-rank-hero {
    margin-bottom: 24px;
    padding: 18px 20px;
    background: var(--v2-bg-card);
    border-radius: 12px;
    border: 1px solid var(--v2-border-hi);
    display: flex;
    align-items: center;
    gap: 16px;
}
.v2-rank-hero .crown {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--v2-accent);
    color: var(--v2-bg);
    display: grid;
    place-items: center;
    font-family: var(--v2-font-display);
    font-weight: 800;
    font-size: 24px;
    flex-shrink: 0;
}
.v2-rank-hero .who { min-width: 0; flex: 1; }
.v2-rank-hero .label {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-accent);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.v2-rank-hero .name {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--v2-text);
    letter-spacing: -0.02em;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-rank-hero .pts {
    text-align: right;
    flex-shrink: 0;
}
.v2-rank-hero .pts .num {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 30px;
    color: var(--v2-accent);
    letter-spacing: -0.02em;
    line-height: 1;
}
.v2-rank-hero .pts .sub {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-dim);
    letter-spacing: 0.1em;
    margin-top: 4px;
    text-transform: uppercase;
}

.v2-rank-list-head {
    display: flex;
    justify-content: space-between;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--v2-border-hi);
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.v2-rank-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--v2-border);
}
.v2-rank-row.is-you {
    background: linear-gradient(90deg, rgba(255, 91, 42, 0.06), transparent);
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}
.v2-rank-row .rank {
    font-family: var(--v2-font-mono);
    font-size: 13px;
    color: var(--v2-text-dim);
    font-weight: 600;
}
.v2-rank-row.is-you .rank { color: var(--v2-accent); }
.v2-rank-row .name {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--v2-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-rank-row .name,
.v2-rank-hero .name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.v2-rank-flag {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}
.v2-rank-hero .v2-rank-flag { font-size: 20px; }
.v2-rank-bot {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
}
.v2-rank-hero .v2-rank-bot {
    font-size: 20px;
    transform: translateY(-2px);
}
.v2-rank-row .you-tag {
    color: var(--v2-accent);
    margin-left: 6px;
    font-family: var(--v2-font-mono);
    font-size: 12px;
    font-weight: 500;
}
.v2-rank-row .pts {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--v2-text);
    text-align: right;
}

/* ============================================================
   Global rank card (league page) — the viewer's standing across
   the whole game, with anonymous neighbours. Names are never
   shown for players outside the viewer's leagues.
   ============================================================ */
.v2-global-note {
    color: var(--v2-text-dim);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
}
.v2-global-rank {
    margin-top: 4px;
    padding: 16px 20px 4px;
    border: 1px solid var(--v2-border);
    border-radius: 14px;
    background: var(--v2-surface-2, rgba(255, 255, 255, 0.02));
}
.v2-global-rank-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
}
.v2-global-rank-head .label {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-global-rank-head .value {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--v2-text);
}
.v2-global-rank-head .value .of {
    color: var(--v2-text-dim);
    font-weight: 500;
    font-size: 15px;
}
.v2-global-rank-list .v2-rank-row:last-child { border-bottom: none; }
.v2-rank-anon {
    font-family: var(--v2-font-mono);
    color: var(--v2-text-dim);
    letter-spacing: 0.18em;
}
/* Separator between the top-3 block and your own window when ranks are
   skipped in between. */
.v2-rank-ellipsis {
    text-align: center;
    color: var(--v2-text-dim);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.2em;
    padding: 8px 0;
}

/* ============================================================
   Recent points drawer
   ============================================================ */
.v2-points-list { padding: 8px 4px 24px; }
.v2-points-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--v2-border);
}
.v2-points-row .when {
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.v2-points-row .name {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--v2-text);
    line-height: 1.1;
}
.v2-points-row .reason {
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
    margin-top: 3px;
}
.v2-points-row .pts {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--v2-text);
}
.v2-points-row .pts.pos { color: var(--v2-accent); }
.v2-points-row .pts.neg { color: var(--v2-rose); }

.v2-empty-block {
    padding: 48px 24px;
    text-align: center;
    color: var(--v2-text-dim);
    font-family: var(--v2-font-body);
    font-size: 15px;
}

/* ============================================================
   Country setup
   ============================================================ */
.v2-country-intro {
    font-family: var(--v2-font-body);
    font-size: 15px;
    color: var(--v2-text-dim);
    line-height: 1.5;
    max-width: 360px;
    margin: 12px 0 18px;
}
.v2-country-locked {
    margin: 14px 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--v2-border-hi);
    border-radius: 8px;
    background: var(--v2-bg-card);
    font-family: var(--v2-font-body);
    font-size: 15px;
    color: var(--v2-text-dim);
    line-height: 1.5;
}
.v2-country-locked strong {
    font-family: var(--v2-font-display);
    color: var(--v2-accent);
    margin-right: 4px;
}
.v2-team-grid.is-locked .v2-team-cell {
    cursor: default;
    opacity: 0.55;
}
.v2-team-grid.is-locked .v2-team-cell.is-on {
    opacity: 1;
}
/* Wrapping flex layout with explicit tile dimensions — CSS Grid's track
   sizing was still letting long-named cells grow past their siblings even
   with min-width: 0. Flexbox + flex-basis is rigid by construction. */
.v2-team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding-bottom: 96px;
}
.v2-team-cell {
    /* `flex: 1 1 104px` lets cells grow up to fill the row evenly, then
       `max-width: 140px` caps the growth so a sparse last row doesn't
       balloon. Every cell in any row ends up the same width. */
    flex: 1 1 104px;
    max-width: 140px;
    height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid var(--v2-border-hi);
    background: var(--v2-bg-card);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 80ms linear, background-color 80ms linear;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
}
.v2-team-cell:hover { background: var(--v2-bg-card-hi); }
.v2-team-cell.is-on {
    border-color: var(--v2-accent);
    background: rgba(255, 91, 42, 0.1);
}
.v2-team-cell .flag {
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
}
.v2-team-cell .name {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 11px;
    color: var(--v2-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    width: 100%;
    min-width: 0;
}
.v2-team-cell .code { display: none; }
.v2-country-foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 20px 24px;
    background: linear-gradient(180deg, transparent, var(--v2-bg) 30%);
}
.v2-country-foot .v2-cta {
    max-width: 480px;
    margin: 0 auto;
}

/* ============================================================
   Mini-leagues
   ============================================================ */
.v2-league-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.v2-league-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border: 1px solid var(--v2-border-hi);
    border-radius: 14px;
    background: var(--v2-bg-card);
    text-decoration: none;
    color: var(--v2-text);
    transition: background-color 80ms linear, border-color 80ms linear;
}
.v2-league-card:hover {
    background: var(--v2-bg-card-hi);
    border-color: var(--v2-text-mute);
}
.v2-league-card-name {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 17px;
}
.v2-league-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--v2-text-dim);
}
.v2-league-card-meta .open {
    color: var(--v2-accent);
    font-family: var(--v2-font-display);
    font-weight: 600;
}

.v2-league-create {
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--v2-border-hi);
    border-radius: 14px;
    background: var(--v2-bg-elev);
}
.v2-league-create-label {
    display: block;
    font-family: var(--v2-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-text-dim);
    margin-bottom: 10px;
}
.v2-league-create-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.v2-league-create-input {
    width: 100%;
    background: var(--v2-bg);
    border: 1px solid var(--v2-border-hi);
    color: var(--v2-text);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: var(--v2-font-display);
    font-size: 15px;
    outline: none;
}
.v2-league-create-input:focus {
    border-color: var(--v2-accent);
}
.v2-league-create-row .v2-cta {
    width: 100%;
}

.v2-league-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.v2-chip-ghost {
    border-style: dashed;
    color: var(--v2-text-dim);
    text-decoration: none;
}
.v2-chip-ghost:hover {
    border-color: var(--v2-accent);
    color: var(--v2-accent);
}
/* The "Global" scope pill in the league switcher — text-decoration reset
   because it's an <a>, unlike the button chips. Accent when active. */
.v2-chip-global { text-decoration: none; }
.v2-chip-global.is-active {
    background: var(--v2-accent);
    color: var(--v2-bg);
    border-color: var(--v2-accent);
}

.v2-league-invite {
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid var(--v2-border-hi);
    border-radius: 14px;
    background: var(--v2-bg-card);
}
.v2-league-invite-label {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-text-dim);
    margin-bottom: 8px;
}
.v2-league-invite-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 1px dashed var(--v2-text-mute);
    border-radius: 999px;
    background: transparent;
    color: var(--v2-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 80ms linear;
}
.v2-league-invite-pill:hover { border-color: var(--v2-accent); }
.v2-league-invite-pill .url {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--v2-font-mono);
    font-size: 13px;
    color: var(--v2-text-dim);
}
.v2-league-invite-pill .aux {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--v2-accent);
}

.v2-league-join-blurb {
    margin: 8px 0 24px;
    color: var(--v2-text-dim);
    line-height: 1.5;
}
.v2-league-join-form .v2-cta {
    max-width: 480px;
    margin: 0 auto;
}

/* ============================================================
   Login / landing — unauthenticated, standalone (no app header)
   ============================================================ */
.v2-login-body {
    min-height: 100vh;
    background:
        radial-gradient(80% 60% at 85% -10%, rgba(255, 91, 42, 0.12), transparent 60%),
        radial-gradient(60% 50% at -10% 110%, rgba(63, 178, 138, 0.08), transparent 60%),
        var(--v2-bg);
}
.v2-login-shell {
    max-width: 460px;
    margin: 0 auto;
    padding: 40px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.v2-login-hero {
    padding-bottom: 4px;
}
.v2-login-kicker {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--v2-accent);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.v2-login-title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--v2-text);
    margin: 0;
}
.v2-login-title em {
    color: var(--v2-accent);
    font-style: italic;
    font-weight: 700;
}
.v2-login-lede {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--v2-text-dim);
    max-width: 360px;
}
.v2-login-error {
    border: 1px solid rgba(232, 80, 110, 0.35);
    background: rgba(232, 80, 110, 0.08);
    color: var(--v2-rose);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
}
.v2-login-card {
    background: var(--v2-bg-card);
    border: 1px solid var(--v2-border-hi);
    border-radius: 12px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.v2-login-card-dev {
    border-style: dashed;
    border-color: rgba(244, 181, 63, 0.35);
}
.v2-login-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.v2-login-card-kicker {
    font-family: var(--v2-font-mono);
    font-size: 10px;
    color: var(--v2-text-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.v2-login-card-dev .v2-login-card-kicker {
    color: var(--v2-amber);
}
.v2-login-card-title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--v2-text);
    letter-spacing: -0.01em;
}
.v2-login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.v2-login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v2-login-field-label {
    font-family: var(--v2-font-mono);
    font-size: 10px;
    color: var(--v2-text-mute);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.v2-login-field-hint {
    color: var(--v2-text-mute);
    text-transform: none;
    letter-spacing: 0.04em;
    font-weight: 400;
}
.v2-login-input {
    background: var(--v2-bg);
    border: 1px solid var(--v2-border-hi);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--v2-text);
    font-family: var(--v2-font-body);
    /* 16px so iOS Safari doesn't auto-zoom the page when the field gains focus. */
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 120ms ease, background 120ms ease;
}
.v2-login-input::placeholder {
    color: var(--v2-text-mute);
}
.v2-login-input:focus {
    outline: none;
    border-color: var(--v2-accent);
    background: var(--v2-bg-card-hi);
}
.v2-login-fineprint {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    line-height: 1.55;
    color: var(--v2-text-mute);
    letter-spacing: 0.04em;
    margin: 0;
}
.v2-login-email {
    color: var(--v2-text);
    font-weight: 600;
}

.v2-login-rules {
    background: var(--v2-bg-elev);
    border: 1px solid var(--v2-border);
    border-radius: 12px;
    padding: 16px 18px 14px;
}
.v2-login-rules-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.v2-login-rules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
}
.v2-login-rule {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--v2-border);
}
.v2-login-rule:nth-child(1),
.v2-login-rule:nth-child(2) {
    border-top: none;
}
.v2-login-rule:nth-child(odd) {
    padding-right: 12px;
}
.v2-login-rule:nth-child(even) {
    padding-left: 12px;
    border-left: 1px solid var(--v2-border);
}
.v2-login-rule dt {
    font-size: 13px;
    color: var(--v2-text-dim);
    margin: 0;
}
.v2-login-rule dd {
    margin: 0;
    font-family: var(--v2-font-mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.v2-login-rule dd.pos { color: var(--v2-jade); }
.v2-login-rule dd.neg { color: var(--v2-rose); }

.v2-login-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
}
.v2-login-meta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}
.v2-login-meta > div + div {
    padding-left: 16px;
    border-left: 1px solid var(--v2-border);
}
.v2-login-meta dt {
    font-family: var(--v2-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v2-text-mute);
    margin: 0;
}
.v2-login-meta dd {
    margin: 0;
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--v2-text);
}

.v2-login-foot {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 8px;
    font-family: var(--v2-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-text-mute);
}
.v2-login-foot-dot { color: var(--v2-accent); }

@media (min-width: 720px) {
    .v2-login-shell {
        max-width: 520px;
        padding-top: 64px;
    }
    .v2-login-title {
        font-size: 60px;
    }
}

/* ============================================================
   Decorative wireframe soccer-ball (homepage + empty team page)
   ============================================================ */
.v2-ball {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 4px auto 18px;
    pointer-events: none;
    overflow: hidden;
}
/* Force a 1:1 box via the padding-top trick — more reliable across browsers
   than aspect-ratio when combined with absolutely-positioned children. */
.v2-ball::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.v2-ball::after {
    content: "";
    position: absolute;
    inset: 12% 12% auto 12%;
    height: 12%;
    background: radial-gradient(closest-side, rgba(255, 91, 42, 0.22), transparent 70%);
    filter: blur(8px);
    z-index: -1;
}
.v2-ball-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.v2-empty .v2-ball,
.v2-login-hero .v2-ball {
    margin-top: -4px;
}
@media (min-width: 720px) {
    .v2-ball { max-width: 360px; }
}

/* ============================================================
   Webawesome / FOUC bits (kept from prior file)
   ============================================================ */
:not(:defined) { visibility: hidden; }

wa-button::part(label) {
    font-family: var(--v2-font-display), system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

wa-button[variant="brand"]::part(base) {
    font-family: var(--v2-font-display), system-ui, sans-serif;
    border: none;
    background-color: var(--v2-accent);
    color: var(--v2-bg);
}