/* Futebol Agenda 3.3.
   PRODUCT.md and DESIGN.md define the current product contract. Lovable concept
   files are historical references. This layer owns canonical component polish. */

@layer components {
:root {
    /* One conventional desktop measure shared by the header, navigation,
       every route panel and the footer. */
    /* Match the canonical desktop rail used by palmeiras.rodrigolanna.com.br. */
    --content-max-width: 1180px;
    --content-page-gutter: 24px;
    --content-page-gutter-mobile: 16px;
    --content-page-gutter-compact: 12px;
    --content-banner-overlap: 22px;
    --content-banner-overlap-compact: 18px;
    --section-gap: 24px;
    --section-gap-compact: 16px;
    --content-stack-gap: 16px;
    --content-stack-gap-compact: 12px;
    --mobile-product-nav-clearance: 96px;
    /* One geometry for every interactive filter: rounded rectangle, not pill. */
    --filter-control-radius: var(--radius-control);
    --filter-control-height: var(--target-min);
    --filter-control-height-compact: var(--target-min);
    --filter-control-padding: 7px 13px;
    --filter-control-padding-compact: 6px 12px;
    --filter-control-font-size: 0.78rem;
    --filter-control-font-weight: 700;
    --filter-control-line-height: 1;
    --club-filter-crest-size: 24px;
    --filter-grid-min-width: 144px;
}

html {
    scroll-behavior: smooth;
    /* Keep centered content fixed when switching between short and long tabs. */
    scrollbar-gutter: stable;
}

body {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand) 3.2%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(0deg, color-mix(in srgb, var(--brand) 2.6%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--bg);
    color: var(--text);
    font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    padding-bottom: 32px;
}

/* Web/PWA keeps the themed banner below a physical top cutout. Native shells
   already receive platform-managed safe-area insets and must not double them. */
body.product-app:not(.native-shell) {
    padding-top: env(safe-area-inset-top, 0px);
}

body.dark,
html.dark body {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand) 3%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(0deg, color-mix(in srgb, var(--brand) 2.4%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--bg);
}

h1,
h2,
h3,
h4,
.card-title,
.cal-title,
.stat-value,
.hero-score,
.cd-val,
.club-score {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-score,
.cd-val,
.stat-value,
.club-score,
.cal-match-score,
.match-detail-score,
.prob-value {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

button,
select,
a,
summary {
    transition:
        color var(--motion),
        background-color var(--motion),
        border-color var(--motion),
        transform var(--motion),
        box-shadow var(--motion);
}

.header {
    min-height: 180px;
    /* Track the .container gutter so banner content aligns with app content.
       Container = min(1180px, 100% - 48px) centered → gutter each side. */
    padding:
        24px
        max(
            var(--content-page-gutter),
            calc((100% - var(--content-max-width)) / 2)
        )
        34px;
    background:
        linear-gradient(115deg, rgba(201, 154, 61, 0.16), transparent 34%),
        linear-gradient(135deg, var(--brand-header-a) 0%, var(--brand-header-b) 54%, var(--brand-header-c) 100%);
}

.header::before {
    background:
        linear-gradient(90deg, rgba(255, 253, 243, 0.07) 1px, transparent 1px) 0 0 / 68px 68px,
        linear-gradient(0deg, rgba(255, 253, 243, 0.055) 1px, transparent 1px) 0 0 / 68px 68px;
    opacity: 0.5;
}

.header::after {
    width: 420px;
    height: 420px;
    right: -170px;
    top: -245px;
    border-color: rgba(255, 253, 243, 0.15);
}

.header-content {
    max-width: var(--content-max-width);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto 38px;
    align-items: center;
    column-gap: 10px;
    row-gap: 14px;
}

.header-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    grid-column: 1;
    grid-row: 1;
}

.header-global-actions {
    grid-column: 2 / 4;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
}

.header .team-scope-control {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    gap: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.header .team-scope-control button {
    position: relative;
    flex: 0 0 auto;
    min-height: var(--target-min);
    border-radius: 0;
    background: transparent;
    color: rgba(255, 253, 243, 0.76);
    padding: 7px 0 11px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.header .team-scope-control button::before {
    content: "";
    position: absolute;
    inset: 0;
}

.header .team-scope-control button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--motion);
}

.header .team-scope-control button:hover {
    color: var(--ivory);
}

.header .team-scope-control button.active {
    background: transparent;
    color: var(--ivory);
}

.header .team-scope-control button.active::after {
    transform: scaleX(1);
}

.header .quick-preference-actions {
    grid-column: 2;
    grid-row: 1;
    gap: 4px;
    margin-left: 0;
}

.header .header-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 4px;
}

.header .utility-icon-action,
.header .theme-toggle,
.header .refresh-btn {
    width: var(--target-min);
    height: var(--target-min);
    min-width: var(--target-min);
    min-height: var(--target-min);
    flex: 0 0 var(--target-min);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: rgba(255, 253, 243, 0.82);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        color var(--motion),
        border-color var(--motion),
        transform var(--motion);
}

.header .utility-icon-action:hover,
.header .theme-toggle:hover,
.header .refresh-btn:hover {
    border-color: rgba(255, 253, 243, 0.34);
    background: rgba(255, 253, 243, 0.12);
    color: #fffdf3;
}

.header .utility-icon-action:focus-visible,
.header .utility-icon-action:focus-within,
.header .theme-toggle:focus-visible,
.header .refresh-btn:focus-visible {
    border-color: var(--focus);
    background: rgba(255, 253, 243, 0.12);
    color: #fffdf3;
}

.header .utility-icon-action.active {
    border-color: rgba(255, 253, 243, 0.34);
    background: rgba(255, 253, 243, 0.12);
    color: #fffdf3;
}

.header .notification-toggle,
.header .notification-toggle:hover,
.header .notification-toggle:focus-visible,
.header .notification-toggle:focus-within {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.header .notification-toggle[aria-pressed="true"],
.header .notification-toggle[aria-pressed="true"]:hover,
.header .notification-toggle[aria-pressed="true"]:focus-visible,
.header .notification-toggle[aria-pressed="true"]:focus-within {
    color: var(--gold);
}

.header .utility-icon-action svg,
.header .theme-toggle svg,
.header .refresh-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header .notification-toggle .notification-icon-active {
    display: none;
}

.header .notification-toggle .notification-icon-silenced {
    display: block;
}

.header .notification-toggle[aria-pressed="true"] .notification-icon-active {
    display: block;
}

.header .notification-toggle[aria-pressed="true"] .notification-icon-silenced {
    display: none;
}

.header .notification-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.logo {
    width: 56px;
    height: 56px;
    border-radius: 0;
    box-shadow: none;
}

.logo:hover {
    transform: translateY(-1px);
    box-shadow: none;
}

.logo img {
    object-fit: contain;
}

.header-text h1 {
    color: var(--ivory);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.subtitle {
    margin-top: 4px;
    color: rgba(255, 253, 243, 0.74);
    font-size: 0.82rem;
    font-weight: 500;
}

.container,
.footer {
    width: min(
        var(--content-max-width),
        calc(100% - (2 * var(--content-page-gutter)))
    );
}

.container {
    margin-top: calc(-1 * var(--content-banner-overlap));
}

.android-app-promo {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 36px;
    align-items: center;
    gap: 14px;
    margin: 0 0 var(--content-stack-gap);
    border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
    border-radius: var(--radius-card);
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--gold) 13%, transparent), transparent 42%),
        var(--bg-card);
    padding: 12px 14px;
    box-shadow: var(--shadow-tight);
}

.android-app-promo[hidden],
body.native-shell .android-app-promo {
    display: none;
}

.android-app-promo::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    content: "";
    background: var(--gold);
    pointer-events: none;
}

.android-app-promo-icon {
    width: 52px;
    height: 52px;
    display: block;
    border-radius: 14px;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--ink) 18%, transparent);
}

.android-app-promo-copy {
    min-width: 0;
}

.android-app-promo-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.android-app-promo-copy p {
    max-width: 620px;
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.42;
    font-weight: 500;
}

.android-app-promo-action {
    display: block;
    border: 0;
    background: transparent;
    padding: 0;
    text-decoration: none;
    line-height: 0;
}

.android-app-promo-action:hover {
    transform: translateY(-1px);
}

.android-app-promo-action:focus-visible {
    border-radius: var(--radius-control);
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.android-app-promo-badge {
    width: 148px;
    height: auto;
    display: block;
}

.android-app-promo-dismiss {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    cursor: pointer;
}

.android-app-promo-dismiss:hover {
    border-color: var(--line);
    background: var(--bg-soft);
    color: var(--ink);
}

.android-app-promo-dismiss svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.data-quality-advisory {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin: 0 0 var(--content-stack-gap);
    border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
    border-radius: var(--radius-card);
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent 44%),
        var(--bg-card);
    padding: 13px 16px;
    box-shadow: var(--shadow-tight);
}

.data-quality-advisory[hidden] {
    display: none;
}

.data-quality-advisory::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    content: "";
    background: var(--gold);
}

.data-quality-advisory-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--gold) 14%, var(--bg-card));
    color: var(--warning-text, #8a4b00);
}

.data-quality-advisory-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.data-quality-advisory-copy {
    min-width: 0;
}

.data-quality-advisory-copy > span {
    display: block;
    margin-bottom: 2px;
    color: var(--warning-text, #8a4b00);
    font-size: 0.65rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.data-quality-advisory-copy strong {
    display: block;
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.data-quality-advisory-copy p {
    margin: 3px 0 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.42;
    font-weight: 500;
}

.agenda-focus {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 16px;
    row-gap: 12px;
    margin: 0 0 var(--content-stack-gap);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 36%),
        var(--bg-card);
    padding: 16px 18px;
    box-shadow: var(--shadow-tight);
}

.agenda-focus[hidden] {
    display: none;
}

.agenda-focus::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 22%, transparent) 62%, transparent);
    pointer-events: none;
}

.agenda-focus-mark {
    grid-column: 1;
    grid-row: 1;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--gold) 10%, var(--bg-card));
    color: var(--gold-strong);
}

.agenda-focus-mark svg,
.agenda-focus-actions svg,
.agenda-focus-dismiss svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agenda-focus-dismiss {
    width: var(--target-min);
    height: var(--target-min);
    display: grid;
    place-items: center;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    cursor: pointer;
    transition:
        background var(--motion),
        border-color var(--motion),
        color var(--motion);
}

.agenda-focus-dismiss:hover {
    border-color: var(--line);
    background: var(--bg-soft);
    color: var(--ink);
}

.agenda-focus-dismiss svg {
    width: 18px;
    height: 18px;
}

.agenda-focus-copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.agenda-focus-copy > span {
    display: block;
    margin-bottom: 3px;
    color: var(--gold-strong);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agenda-focus-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.14rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.agenda-focus-copy p {
    max-width: 720px;
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 500;
}

.agenda-focus-actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2 / 3;
    grid-row: 2;
    justify-content: flex-start;
    gap: 8px;
}

.agenda-focus-actions .ds-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
}

.agenda-focus-actions .ds-action svg {
    width: 17px;
    height: 17px;
}

.agenda-focus-actions [aria-disabled="true"] {
    border-color: var(--line);
    background: var(--bg-soft);
    color: var(--text-muted);
    pointer-events: none;
}

body[data-notification-state="active"] .agenda-notify-action {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--bg-card));
    color: var(--success);
}

.hero-hub {
    margin-bottom: var(--content-stack-gap);
    border: 1px solid rgba(255, 253, 243, 0.16);
    border-radius: var(--radius-card);
    /* Stretch the single grid row to fill min-height so .hero-bottom's darker
       background reaches the bottom edge of the banner. */
    grid-template-rows: 1fr;
    background:
        linear-gradient(90deg, rgba(255, 253, 243, 0.05) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(0deg, rgba(255, 253, 243, 0.045) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(135deg, var(--brand-hero-a) 0%, var(--brand-hero-b) 58%, var(--brand-hero-c) 100%);
    box-shadow: var(--shadow);
}

.hero-hub::before {
    opacity: 0.2;
}

.hero-card {
    min-width: 0;
    max-width: 100%;
    padding: 24px 28px 20px;
    gap: 18px;
}

.hero-comp,
.competition-code,
.competition-status,
.match-result,
.cal-match-status,
.club-kicker,
.countdown-label,
.form-label,
.stat-label,
.match-detail-stat span,
.match-detail-meta span {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-comp {
    width: fit-content;
    border: 1px solid rgba(255, 253, 243, 0.25);
    border-radius: var(--radius-control);
    background: rgba(255, 253, 243, 0.10);
    color: #f2cf7a;
    padding: 6px 10px;
}

.hero-teams {
    gap: 20px;
}

.hero-team img,
.hero-team .team-marker {
    width: 72px;
    height: 72px;
}

.hero-team-name {
    color: var(--ivory);
    font-size: 1rem;
    font-weight: 700;
}

.hero-vs {
    color: rgba(255, 253, 243, 0.72);
    font-weight: 500;
}

.hero-score {
    color: var(--ivory);
    font-size: 2.5rem;
    font-weight: 900;
}

.hero-meta {
    color: rgba(255, 253, 243, 0.72);
    font-size: 0.78rem;
    font-weight: 500;
}

.hero-meta-date {
    color: var(--ivory);
    font-weight: 700;
}

.hero-meta-pill {
    border-radius: var(--radius-control);
    background: rgba(255, 253, 243, 0.08);
    border: 1px solid rgba(255, 253, 243, 0.12);
}

.hero-meta-pill.uncertainty-low {
    border-style: dashed;
    border-color: rgba(255, 253, 243, 0.22);
    background: rgba(255, 253, 243, 0.04);
    color: rgba(255, 253, 243, 0.64);
}

.hero-bottom {
    min-width: 0;
    max-width: 100%;
    border-top-color: rgba(255, 253, 243, 0.13);
    background: var(--surface-hero-countdown);
    padding: 16px 28px;
}

.hero-countdown,
.hero-context,
.hero-record,
.countdown-digits,
.hero-record-title,
.hero-record-stats,
.hero-icon-actions {
    min-width: 0;
    max-width: 100%;
}

.countdown-label,
.form-label {
    color: rgba(255, 253, 243, 0.62);
}

.countdown-digits {
    gap: 8px;
}

.cd-unit {
    min-width: 68px;
    border: 1px solid rgba(255, 253, 243, 0.14);
    border-radius: var(--radius-control);
    background: rgba(255, 253, 243, 0.08);
    padding: 8px 12px;
}

.cd-val {
    color: var(--ivory);
    font-size: 1.45rem;
    font-weight: 900;
}

.cd-lbl {
    color: rgba(255, 253, 243, 0.6);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-dot,
.form-badge {
    border-radius: var(--radius-control);
    font-weight: 700;
}

.main-layout {
    grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
    gap: 20px;
}

.calendar-hub {
    top: 16px;
}

.card,
.club-home-panel,
.club-match-board,
.competition-card,
.standings-section,
.stats-summary,
.chart-container,
.prediction-card,
.match-details-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-tight);
}

.card,
.club-home-panel {
    padding: 20px;
}

/* Desktop: standings-campaign becomes a transparent wrapper again -
   inner sections reclaim their individual card borders. */
@media (min-width: 721px) {
    .standings-section,
    .standings-match-group,
    .stats-summary {
        padding: 16px;
    }

    .standings-match-group {
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        box-shadow: var(--shadow-tight);
    }

    #standings > .standings-campaign {
        border: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .standings-campaign > .standings-section,
    .standings-campaign .standings-match-group {
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        box-shadow: var(--shadow-tight);
        padding: 16px;
    }
}

.club-home-panel {
    background: var(--bg-card);
}

.card-title,
.club-board-head h2 {
    margin-top: 0;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 700;
}

.cal-title {
    margin: 0;
}

.club-board-head h3,
.club-snapshot-head h3,
.section-head h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

.club-board-head p,
.club-snapshot-head p,
.competition-hub-head p,
.section-head p {
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.5;
}

.route-page-head {
    grid-template-columns: minmax(0, 1fr);
}

.route-page-head > .route-heading-copy,
.route-page-head > .route-heading-actions {
    width: 100%;
    min-width: 0;
}

.route-page-head > .route-heading-copy {
    grid-column: 1 / -1;
}

.route-page-head > .route-heading-actions {
    grid-column: 1 / -1;
}

.history-head {
    position: relative;
}

.history-head > .route-heading-copy {
    box-sizing: border-box;
    padding-right: 104px;
}

.route-page-head > .history-export-actions {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    justify-content: flex-end;
}

.history-export-actions .ds-action {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.history-export-actions .ds-action:disabled {
    border: 0;
    background: transparent;
}

.history-export-actions .ds-action:not(:disabled):hover {
    background: var(--bg-soft);
    color: var(--ink);
}

#news-status {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 6px;
}

.news-status-separator {
    color: var(--line-strong);
}

.news-status-update {
    color: var(--text-secondary);
    white-space: nowrap;
}

.club-kicker {
    color: var(--gold-strong);
}

.tabs {
    gap: 4px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    padding: 4px;
    box-shadow: none;
}

.tab-btn,
.comp-legend-item,
.standings-filter,
.ds-action,
.match-filter,
.competition-card-action,
.footer-btn,
.retry-btn {
    min-height: var(--target-min);
    border: 1px solid var(--control-neutral-border);
    border-radius: var(--radius-control);
    background: var(--control-neutral-bg);
    color: var(--control-neutral-text);
    font-size: 0.8rem;
    font-weight: 600;
}

.ds-action,
.footer-btn,
.retry-btn,
.club-required-state button {
    min-height: var(--component-action-height);
    padding: var(--component-action-padding);
    font-size: var(--component-action-font-size);
    font-weight: var(--component-action-font-weight);
    line-height: var(--component-action-line-height);
}

.tab-btn:hover,
.comp-legend-item:hover,
.standings-filter:hover,
.ds-action:hover,
.match-filter:hover,
.competition-card-action:hover,
.footer-btn:hover {
    border-color: var(--control-neutral-border-strong);
    background: var(--control-neutral-bg-hover);
    color: var(--control-neutral-text);
}

.tab-btn:active,
.comp-legend-item:active,
.standings-filter:active,
.ds-action:active,
.match-filter:active,
.competition-card-action:active,
.footer-btn:active {
    background: var(--control-neutral-bg-pressed);
}

.tab-btn.active,
.comp-legend-item.active,
.standings-filter.active,
.ds-action.primary,
.match-filter.active,
.retry-btn {
    border-color: var(--control-neutral-selected-bg);
    background: var(--control-neutral-selected-bg);
    color: var(--control-neutral-selected-text);
}

.tab-btn.active:hover,
.comp-legend-item.active:hover,
.standings-filter.active:hover,
.ds-action.primary:hover,
.match-filter.active:hover,
.retry-btn:hover {
    border-color: var(--control-neutral-selected-bg-hover);
    background: var(--control-neutral-selected-bg-hover);
    color: var(--control-neutral-selected-text);
}

.tab-btn:focus-visible,
.comp-legend-item:focus-visible,
.standings-filter:focus-visible,
.ds-action:focus-visible,
.match-filter:focus-visible,
.competition-card-action:focus-visible,
.footer-btn:focus-visible,
.retry-btn:focus-visible {
    outline-color: var(--control-neutral-focus);
}

.ds-action:disabled,
.ds-action.primary:disabled,
.comp-legend-item:disabled,
.standings-filter:disabled,
.match-filter:disabled,
.competition-card-action:disabled,
.footer-btn:disabled,
.retry-btn:disabled {
    border-color: var(--control-neutral-disabled-border);
    background: var(--control-neutral-disabled-bg);
    color: var(--control-neutral-disabled-text);
    cursor: not-allowed;
    opacity: 1;
}

.comp-legend {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--filter-grid-min-width), 1fr));
    gap: 6px;
    margin-bottom: 16px;
}

.comp-legend-item {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    border-radius: var(--radius-control);
    padding: 8px 10px;
    white-space: normal;
    text-align: left;
}

.comp-legend-item[hidden] {
    display: none;
}

.comp-legend-dot {
    width: 7px;
    height: 7px;
    background: var(--comp-other);
    box-shadow: none;
}

.comp-legend-item[data-comp="BSA"] .comp-legend-dot {
    background: var(--comp-bsa);
}

.comp-legend-item[data-comp="CLI"] .comp-legend-dot {
    background: var(--comp-cli);
}

.comp-legend-item[data-comp="COPA"] .comp-legend-dot {
    background: var(--comp-copa);
}

.comp-legend-item[data-comp="CPA"] .comp-legend-dot {
    background: var(--comp-paulista);
}

.comp-legend-item[data-comp="BFA1"] .comp-legend-dot,
.comp-legend-item[data-comp="PAULISTA_F"] .comp-legend-dot,
.comp-legend-item[data-comp="COPA_F"] .comp-legend-dot,
.comp-legend-item[data-comp="SUPERCOPA_F"] .comp-legend-dot,
.comp-legend-item[data-comp="LADIES_CUP_F"] .comp-legend-dot,
.comp-legend-item[data-comp="COPA_PAULISTA_F"] .comp-legend-dot,
.comp-legend-item[data-comp="LIBERTADORES_F"] .comp-legend-dot {
    background: var(--violet);
}

.cal-title {
    font-size: 1.12rem;
    font-weight: 700;
}

.cal-title::before {
    width: 4px;
    height: 32px;
    border-radius: 2px;
}

.cal-title select,
.calendar-nav span {
    font-weight: 700;
}

.cal-title select {
    height: var(--component-field-height);
    min-height: var(--component-field-height);
    padding: var(--component-field-padding);
    font-size: var(--component-field-font-size);
    line-height: var(--component-field-line-height);
}

.cal-nav-btn {
    width: 44px;
    height: 44px;
    border-color: var(--control-neutral-border);
    border-radius: var(--radius-control);
    background: var(--control-neutral-bg);
    color: var(--control-neutral-text);
    font-weight: 500;
}

.cal-nav-btn:hover {
    border-color: var(--control-neutral-border-strong);
    background: var(--control-neutral-bg-hover);
    color: var(--control-neutral-text);
}

.cal-nav-btn:active {
    background: var(--control-neutral-bg-pressed);
}

.cal-nav-btn:focus-visible {
    outline-color: var(--control-neutral-focus);
}

.cal-nav-btn:disabled {
    border-color: var(--control-neutral-disabled-border);
    background: var(--control-neutral-disabled-bg);
    color: var(--control-neutral-disabled-text);
    cursor: not-allowed;
    opacity: 1;
}

.calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    overflow-x: visible;
}

.cal-head {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 500;
}

.cal-day {
    min-height: 44px;
    border-radius: var(--radius-control);
    font-weight: 500;
}

.cal-day-num {
    font-weight: 700;
}

.cal-day.has-match {
    background: color-mix(in srgb, var(--brand-soft) 72%, var(--bg-card));
}

.cal-day.selected {
    color: var(--ivory);
}

.cal-score,
.cal-overflow {
    border-radius: 3px;
    font-weight: 700;
}

.club-snapshot-grid {
    gap: 12px;
}

.match-preview-list,
.match-list {
    gap: 8px;
    border-radius: var(--radius-card);
}

.match-preview-card,
.match-row,
.cal-match,
.competition-match {
    border-color: var(--line);
    border-left-width: 3px;
    border-radius: var(--radius-card);
    background: var(--bg-card);
    box-shadow: none;
}

.match-preview-summary,
.match-row-summary,
.competition-match-summary {
    min-height: 72px;
    padding: 12px;
}

.competition-match.empty-line {
    min-height: 72px;
    box-sizing: border-box;
    border-left-color: var(--brand);
    padding: 12px;
    text-align: left;
}

.competition-match.empty-line strong {
    color: var(--text-secondary);
}

.competition-match.empty-line small {
    color: var(--text-muted);
    letter-spacing: 0;
    text-transform: none;
}

.match-preview-date strong,
.match-date strong {
    font-weight: 700;
}

.match-preview-date span,
.match-date span,
.match-meta {
    color: var(--text-secondary);
    font-weight: 500;
}

.match-preview-teams span,
.match-team,
.cal-match-team-name {
    font-weight: 600;
}

.match-preview-teams strong,
.club-score,
.cal-match-score {
    border-radius: var(--radius-control);
    background: var(--bg-soft);
    font-weight: 900;
}

.match-result,
.cal-match-status {
    border-radius: 3px;
    font-weight: 600;
}

.competition-status {
    border-radius: 3px;
    font-weight: 600;
}

.cal-match-status.pending {
    color: var(--gold-strong);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.competition-status.uncertainty-high {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid currentColor;
    background: color-mix(in srgb, var(--gold) 20%, var(--bg-card));
    color: var(--gold-strong);
}

.competition-status.uncertainty-high::before {
    content: "!";
    display: inline-grid;
    width: 14px;
    height: 14px;
    place-items: center;
    border-radius: 50%;
    background: var(--gold-strong);
    color: var(--bg-card);
    font-size: 0.58rem;
    line-height: 1;
    font-weight: 900;
}

.cal-expanded-empty {
    padding-bottom: 12px;
}

.cal-expanded-empty p {
    margin: 0;
    padding: 4px 14px 8px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.competition-grid {
    gap: 12px;
}

.competition-card {
    padding: 16px;
}

.competition-card h3,
.competition-record strong,
.standings-row .pts {
    font-weight: 700;
}

.competition-card h3 {
    margin-top: 0;
}

.competition-record div,
.stat-box,
.prob-box,
.match-detail-stat,
.match-detail-score {
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--bg-card));
}

.stat-value,
.prob-value {
    font-weight: 900;
}

.stat-label,
.prob-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.standings-table,
.standings-row,
.news-item {
    border-color: var(--line);
}

.standings-row {
    min-height: 48px;
}

.standings-row.is-favorite {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 var(--brand);
}

.news-item {
    border-radius: var(--radius-card);
    background: var(--bg-card);
    box-shadow: none;
}

.news-item-title,
.news-item h3 {
    font-weight: 700;
}

.news-item-meta,
.news-item p {
    color: var(--text-secondary);
    font-weight: 400;
}

.skeleton-card,
.empty,
.error-state {
    border-radius: var(--radius-card);
    background: var(--bg-soft);
    color: var(--text-secondary);
    font-weight: 500;
    box-shadow: none;
}

.empty-state-illustrated {
    display: grid;
    min-height: 124px;
    align-content: center;
    justify-items: center;
    gap: 12px;
}

.empty-state-icon,
.error-icon {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg-card);
}

.empty-state-icon {
    margin-bottom: 0;
    color: var(--text-secondary);
}

.empty-state-icon::before {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 2px;
    height: 6px;
    background: var(--gold);
    box-shadow: 7px 0 var(--gold);
    content: "";
    transform: translateX(-4.5px);
}

.empty-state-icon svg,
.error-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.error-icon {
    background: color-mix(in srgb, var(--loss) 10%, var(--bg-card));
    color: var(--loss);
}

.empty-state-copy {
    max-width: 42ch;
    text-wrap: balance;
}

#news-list > .empty {
    grid-column: 1 / -1;
}

.club-required-state {
    display: grid;
    grid-template:
        "icon title" auto
        "icon message" auto
        "icon action" auto
        / auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    column-gap: 14px;
    row-gap: 4px;
    min-height: 0;
    padding: 24px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    text-align: left;
}

.calendar-grid > .preference-required-state {
    grid-column: 1 / -1;
}

.club-required-state-icon {
    display: grid;
    grid-area: icon;
    align-self: start;
    width: 44px;
    height: 44px;
    margin-top: 2px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--gold) 9%, transparent);
    color: var(--gold);
}

.club-required-state-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-width: 1.5;
}

.club-required-state strong {
    grid-area: title;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.3;
}

.club-required-state p {
    grid-area: message;
    max-width: 34rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.5;
}

.club-required-state button {
    grid-area: action;
    min-height: 44px;
    margin: 8px 0 0;
    padding: 10px 16px;
    border: 1px solid var(--control-neutral-selected-bg);
    border-radius: var(--radius-control);
    background: var(--control-neutral-selected-bg);
    color: var(--control-neutral-selected-text);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.club-required-state button:hover,
.club-required-state button:focus-visible {
    border-color: var(--control-neutral-selected-bg-hover);
    background: var(--control-neutral-selected-bg-hover);
    color: var(--control-neutral-selected-text);
}

.club-required-state button:focus-visible {
    outline-color: var(--control-neutral-focus);
}

@media (max-width: 520px) {
    .club-required-state {
        padding: 22px 4px;
    }

    .club-required-state button {
        width: 100%;
    }
}

.skeleton-line {
    border-radius: 3px;
}

.prediction-badge,
.prediction-factor {
    border-radius: var(--radius-control);
    font-weight: 600;
}

.footer {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 400;
}

.footer a {
    min-height: var(--target-min);
    display: inline-flex;
    align-items: center;
    padding-inline: 3px;
}

.toast {
    border-radius: 10px;
    background: var(--toast-success-surface);
    color: var(--toast-success-text);
    font-weight: 600;
    box-shadow: var(--toast-shadow);
}

body.native-shell {
    /* Leave breathing room above the native bottom bar so the calendar
       subscription buttons don't crowd the mobile menu. The bar's own
       height is reserved natively via safeAreaInset; this padding is the
       visible gap between the footer and that bar. */
    padding-bottom: 48px;
}

body.native-shell .header {
    min-height: 166px;
}

body.native-shell .header-content {
    max-width: 440px;
}

body.native-shell .header-actions {
    display: none;
}

@media (max-width: 1080px) {
    .agenda-focus-actions {
        grid-column: 2 / 3;
    }

    .hero-hub {
        grid-template-columns: minmax(0, 1fr);
    }

    .main-layout {
        grid-template-columns: 1fr;
    }

    /* Two-row mobile layout: size rows to content, not 1fr. */
    .hero-hub {
        grid-template-rows: auto auto;
    }

    .calendar-hub {
        position: static;
    }

    /* Every stacked agenda layout gets its spacing from the parent grid.
       Keeping a card margin here would double the calendar-to-feed gap. */
    .agenda-content-grid .calendar-hub > .card {
        margin-bottom: 0;
    }
}

@media (max-width: 720px) {
    body {
        font-size: 15px;
        line-height: 1.55;
        padding-bottom: 20px;
    }

    .header {
        min-height: 166px;
        /* Mirror the canonical 16px mobile content rail. */
        padding: 18px max(
            var(--content-page-gutter-mobile),
            calc((100% - 440px) / 2)
        ) 28px;
    }

    .header-content {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto 38px;
        column-gap: 8px;
        row-gap: 14px;
    }

    .header-brand {
        gap: 12px;
    }

    .header-global-actions {
        grid-column: 2;
        grid-row: 1;
        gap: 6px;
    }

    .logo {
        width: 48px;
        height: 48px;
    }

    .header-text h1 {
        font-size: 1.25rem;
    }

    .subtitle {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .container,
    .footer {
        width: min(100% - 16px, 440px);
    }

    .container {
        margin-top: calc(-1 * var(--content-banner-overlap-compact));
    }

    .android-app-promo {
        grid-template-columns: 44px minmax(0, 1fr) 36px;
        gap: 10px;
        margin-bottom: var(--content-stack-gap-compact);
        padding: 12px;
    }

    .android-app-promo-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .android-app-promo-copy h2 {
        font-size: 0.9rem;
    }

    .android-app-promo-copy p {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .android-app-promo-action {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .android-app-promo-dismiss {
        grid-column: 3;
        grid-row: 1;
    }

    .data-quality-advisory {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        margin-bottom: var(--content-stack-gap-compact);
        padding: 12px;
    }

    .data-quality-advisory-icon {
        width: 38px;
        height: 38px;
    }

    .data-quality-advisory-copy strong {
        font-size: 0.92rem;
    }

    .data-quality-advisory-copy p {
        font-size: 0.76rem;
        line-height: 1.38;
    }

    .agenda-focus {
        grid-template-columns: 40px minmax(0, 1fr) 44px;
        gap: 12px;
        margin-bottom: var(--content-stack-gap-compact);
        padding: 14px;
    }

    .agenda-focus-mark {
        width: 40px;
        height: 40px;
    }

    .agenda-focus-copy h2 {
        font-size: 1rem;
    }

    .agenda-focus-copy p {
        font-size: 0.74rem;
    }

    .agenda-focus-actions {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: 1fr 1fr;
    }

    .agenda-focus-actions .ds-action {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .agenda-focus-actions .ds-action:first-child {
        grid-column: 1 / -1;
    }

    .header .team-scope-control {
        grid-column: 1;
        grid-row: 2;
        gap: 24px;
    }

    .header .team-scope-control button {
        min-height: var(--target-min);
        padding: 7px 0 11px;
    }

    .header .quick-preference-actions {
        grid-column: 2;
        grid-row: 2;
        gap: 2px;
    }

    .header .header-actions {
        grid-column: 2;
        grid-row: 1;
        gap: 2px;
    }

    .hero-hub {
        margin-bottom: var(--content-stack-gap-compact);
    }

    .hero-card {
        padding: 18px 14px 16px;
        gap: 16px;
    }

    .hero-teams {
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
        gap: 8px;
    }

    .hero-team img,
    .hero-team .team-marker {
        width: 52px;
        height: 52px;
        min-width: 52px;
        flex-basis: 52px;
    }

    .hero-team-name {
        font-size: 0.9rem;
    }

    .hero-score {
        font-size: 2rem;
    }

    .hero-meta {
        gap: 6px;
        font-size: 0.72rem;
    }

    .hero-bottom {
        padding: 14px;
    }

    .countdown-digits {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .cd-sep {
        display: none;
    }

    .cd-unit {
        min-width: 0;
        padding: 7px 4px;
    }

    .cd-val {
        font-size: 1.28rem;
    }

    .card,
    .club-home-panel {
        padding: 16px;
    }

    .card-title,
    .club-board-head h2 {
        font-size: 1.18rem;
    }

    .club-snapshot-grid {
        grid-template-columns: 1fr;
    }

    .club-board-head,
    .section-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .club-actions {
        justify-content: flex-start;
    }

    .tabs {
        margin-inline: 0;
    }

    .tab-btn,
    .comp-legend-item,
    .standings-filter,
    .ds-action,
    .match-filter,
    .competition-card-action,
    .footer-btn,
    .retry-btn,
    .cal-nav-btn {
        min-height: 44px;
    }

    .comp-legend {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .comp-legend::-webkit-scrollbar {
        display: none;
    }

    .comp-legend-item {
        flex: 0 0 auto;
    }

    .calendar-grid {
        column-gap: 1px;
        row-gap: 3px;
    }

    .cal-day {
        aspect-ratio: auto;
        min-height: 48px;
        padding: 6px 2px 4px;
    }

    .match-preview-summary,
    .match-row-summary {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .match-preview-teams,
    .match-teams {
        grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
        gap: 6px;
    }

    .footer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.native-shell .header {
        min-height: 166px;
        padding-top: 16px;
    }

    body.native-shell .container {
        margin-top: calc(-1 * var(--content-banner-overlap-compact));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Phone-width containment: keep the document inside the visual viewport while
   preserving horizontal scrolling only inside intentional filter/tab rails. */
html,
body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.header-content,
.header-text,
.container,
.footer,
.tab-content,
.calendar-hub,
.hero-hub,
.card,
.competition-hub,
.club-home-shell {
    min-width: 0;
    max-width: 100%;
}

.tabs,
.comp-legend,
.standings-filter-group,
.team-filter-pills,
.match-filter-group {
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-inline: contain;
}

@media (max-width: 720px) {
    body.native-shell .header-content {
        padding-right: 0;
    }

    .container,
    .footer {
        width: min(
            440px,
            calc(100% - (2 * var(--content-page-gutter-mobile)))
        );
    }
}

@media (max-width: 360px) {
    .header {
        /* Compact phones retain the 12px page gutter from the spacing system. */
        padding-inline: var(--content-page-gutter-compact);
    }

    .header-content {
        column-gap: 4px;
    }

    .logo {
        width: 44px;
        height: 44px;
    }

    .header-text h1 {
        font-size: 1.05rem;
    }

    .subtitle {
        font-size: 0.68rem;
    }

    .header .team-scope-control {
        gap: 18px;
    }

    .header .team-scope-control button {
        font-size: 0.76rem;
    }

    .container,
    .footer {
        width: min(
            440px,
            calc(100% - (2 * var(--content-page-gutter-compact)))
        );
    }
}

/* Classification table
   Keep the information table-driven at every viewport. Club identity stays
   anchored while the complete statistical record remains horizontally
   available on compact screens. */
.standings-team-snapshot {
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) minmax(0, 2fr);
    gap: 8px;
    align-items: stretch;
    margin-bottom: 14px;
}

.standings-team-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--bg-card));
    padding: 12px 14px;
}

.standings-team-identity img {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    object-fit: contain;
    background: transparent;
}

.standings-team-identity div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.standings-team-identity span {
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 700;
}

.standings-team-identity strong {
    color: var(--brand);
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 900;
}

.standings-key-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.standings-key-stats div {
    display: grid;
    min-width: 0;
    min-height: 68px;
    align-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--bg-card));
    padding: 10px 8px;
    text-align: center;
}

.standings-key-stats dt {
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.2;
    font-weight: 700;
}

.standings-key-stats dd {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 900;
}

.standings-key-stats .positive,
.standings-data-table .positive {
    color: var(--win);
}

.standings-key-stats .negative,
.standings-data-table .negative {
    color: var(--loss);
}

.standings-zone-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 700;
}

.standings-zone-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.standings-zone-legend .standings-zone-title {
    color: var(--ink);
    font-weight: 900;
}

.standings-zone-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line-strong);
}

.standings-zone-dot.libertadores,
.standings-zone-dot.knockout {
    background: #2d7db8;
}

.standings-zone-dot.sudamericana {
    background: var(--gold);
}

.standings-zone-dot.relegation {
    background: var(--loss);
}

.standings-scroll-hint {
    display: none;
}

.standings-table-shell {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    scrollbar-color: var(--brand) color-mix(in srgb, var(--brand-soft) 58%, var(--bg-card));
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.standings-table-shell:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.standings-data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.standings-data-table th,
.standings-data-table td {
    height: 50px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-card);
    padding: 0 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.standings-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 40px;
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--bg-card));
    color: var(--text-muted);
    font-size: 0.66rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.standings-data-table abbr {
    border: 0;
    text-decoration: none;
    cursor: help;
}

.standings-data-table tbody tr:last-child th,
.standings-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.standings-data-table .standing-position-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 52px;
    color: var(--brand);
    font-weight: 900;
}

.standings-data-table tbody .standing-position-cell::before {
    content: "";
    position: absolute;
    inset: 8px auto 8px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
}

.standings-data-table .zone-libertadores .standing-position-cell,
.standings-data-table .zone-knockout .standing-position-cell {
    color: #2d7db8;
}

.standings-data-table .zone-libertadores .standing-position-cell::before,
.standings-data-table .zone-knockout .standing-position-cell::before {
    background: #2d7db8;
}

.standings-data-table .zone-sudamericana .standing-position-cell {
    color: var(--gold-strong);
}

.standings-data-table .zone-sudamericana .standing-position-cell::before {
    background: var(--gold);
}

.standings-data-table .zone-relegation .standing-position-cell {
    color: var(--loss);
}

.standings-data-table .zone-relegation .standing-position-cell::before {
    background: var(--loss);
}

.standings-data-table .standing-club-cell {
    position: sticky;
    left: 52px;
    z-index: 2;
    width: 232px;
    overflow: hidden;
    text-align: left;
}

.standings-data-table thead .standing-position-cell,
.standings-data-table thead .standing-club-cell {
    z-index: 4;
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--bg-card));
}

.standings-data-table tbody .standing-club-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}

.standings-data-table .standing-club-cell::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 1px;
    background: var(--line);
}

.standings-data-table .standing-club-cell img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
    background: transparent;
}

.standings-data-table .standing-club-cell span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.standings-data-table .standing-points-cell {
    width: 58px;
    color: var(--brand);
    font-size: 0.86rem;
    font-weight: 900;
}

.standings-data-table tbody tr.is-favorite th,
.standings-data-table tbody tr.is-favorite td {
    border-top: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
    border-bottom-color: color-mix(in srgb, var(--brand) 28%, transparent);
    background: color-mix(in srgb, var(--brand-soft) 84%, var(--bg-card));
}

.standings-data-table tbody tr.is-favorite .standing-club-cell,
.standings-data-table tbody tr.is-favorite .standing-points-cell {
    color: var(--brand);
    font-weight: 900;
}

@media (hover: hover) and (pointer: fine) {
    .standings-data-table tbody tr:hover th,
    .standings-data-table tbody tr:hover td {
        background: color-mix(in srgb, var(--control-accent-soft) 48%, var(--bg-card));
    }
}

@media (max-width: 720px) {
    .standings-team-snapshot {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .standings-key-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .standings-team-identity img {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .standings-key-stats div {
        min-height: 58px;
        padding: 8px 6px;
    }

    .standings-key-stats dt {
        font-size: 0.62rem;
    }

    .standings-key-stats dd {
        font-size: 0.9rem;
    }

    .standings-zone-legend {
        gap: 7px 12px;
        margin-bottom: 8px;
    }

    .standings-zone-legend .standings-zone-title {
        width: 100%;
    }

    .standings-scroll-hint {
        display: block;
        margin: 0 0 7px;
        color: var(--text-muted);
        font-size: 0.65rem;
        line-height: 1.25;
        font-weight: 700;
    }

    .standings-data-table {
        min-width: 704px;
    }

    .standings-data-table th,
    .standings-data-table td {
        height: 48px;
        padding-inline: 8px;
    }

    .standings-data-table .standing-position-cell {
        width: 44px;
    }

    .standings-data-table .standing-club-cell {
        left: 44px;
        width: 164px;
    }

    .standings-data-table tbody .standing-club-cell {
        gap: 8px;
        font-size: 0.78rem;
    }

    .standings-data-table .standing-club-cell img {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .standings-data-table .standing-points-cell {
        width: 50px;
    }
}

@media (max-width: 360px) {
    .standings-data-table .standing-club-cell {
        width: 150px;
    }
}

/* Futebol Agenda Lab Web navigation. Wide, compact, and touch layouts all
   consume this one visual treatment; breakpoints only change placement and
   destination count. Native shells keep their own navigation. */
body:not(.native-shell) .tabs {
    isolation: isolate;
    gap: 4px;
    border-color: var(--surface-product-nav-border);
    background:
        linear-gradient(
            135deg,
            var(--surface-product-nav-a) 0%,
            var(--surface-product-nav-b) 52%,
            var(--surface-product-nav-c) 100%
        );
    padding: 4px;
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        border-color var(--motion),
        box-shadow var(--motion);
}

body:not(.native-shell) .tabs::before,
body:not(.native-shell) .tabs::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

body:not(.native-shell) .tabs::before {
    top: 4px;
    bottom: 4px;
    left: 50%;
    width: 1px;
    background: var(--surface-product-nav-line);
    transform: translateX(-0.5px);
}

body:not(.native-shell) .tabs::after {
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 1px solid var(--surface-product-nav-line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

body:not(.native-shell) .tab-btn {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: var(--target-min);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--surface-product-nav-text-muted);
    box-shadow: inset -1px 0 var(--surface-product-nav-divider);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition:
        background-color var(--motion),
        border-color var(--motion),
        color var(--motion),
        transform var(--motion);
}

body:not(.native-shell) .tab-btn::after {
    content: none;
}

body:not(.native-shell) .tab-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: block;
}

body:not(.native-shell) .tab-btn:hover {
    background: var(--surface-product-nav-hover);
    color: var(--surface-product-nav-text);
}

body:not(.native-shell) .tab-btn:not(.active):active {
    background: var(--surface-product-nav-pressed);
}

body:not(.native-shell) .tab-btn.active {
    border-color: var(--surface-product-nav-active);
    background: var(--surface-product-nav-active);
    color: var(--surface-product-nav-active-text);
    box-shadow: none;
    font-weight: 700;
}

body:not(.native-shell) .tab-btn.active:hover,
body:not(.native-shell) .tab-btn.active:active {
    border-color: var(--surface-product-nav-active-hover);
    background: var(--surface-product-nav-active-hover);
    color: var(--surface-product-nav-active-text);
}

body:not(.native-shell) .tab-btn.active::after {
    content: "";
    position: absolute;
    right: auto;
    bottom: 4px;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--surface-product-nav-focus);
    transform: translateX(-50%);
}

body:not(.native-shell) .tab-btn:focus-visible {
    z-index: 2;
    outline: 2px solid var(--surface-product-nav-focus);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    body:not(.native-shell) .tabs {
        position: sticky;
        top: max(12px, env(safe-area-inset-top, 0px));
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        box-shadow: none;
    }

    body:not(.native-shell) .tab-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 10px;
        font-size: 0.77rem;
    }

    body:not(.native-shell) .tabs.is-floating {
        box-shadow: var(--shadow-product-nav-floating);
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.native-shell) .tabs {
        transition: none;
    }
}

/* Touch Web/PWA uses the same product-navigation system as desktop, adapted to
   the persistent four-destination bottom rail in portrait and landscape. */
@media (hover: none) and (pointer: coarse) {
    body.product-app:not(.native-shell) {
        /* Keep the complete footer and final route content above the fixed
           Web/PWA navigation, including the device home-indicator area. */
        padding-bottom: calc(
            var(--mobile-product-nav-clearance)
            + env(safe-area-inset-bottom, 0px)
        );
    }

    body:not(.native-shell) .tabs {
        position: fixed;
        z-index: 50;
        right: max(10px, env(safe-area-inset-right, 0px));
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        left: max(10px, env(safe-area-inset-left, 0px));
        width: min(calc(100% - 20px), 420px);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-radius: 12px;
        box-shadow: var(--shadow-product-nav-floating);
    }

    body:not(.native-shell) .tab-btn {
        min-height: var(--target-min);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        font-size: 0.6rem;
    }

    body:not(.native-shell) .tab-label {
        display: inline;
    }

    body:not(.native-shell) .tabs .tab-desktop-only {
        display: none;
    }
}

/* A narrow desktop window should retain desktop navigation. The phone-style
   bottom rail is reserved for touch-first Web/PWA contexts. */
@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
    body:not(.native-shell) {
        padding-bottom: 20px;
    }

    body:not(.native-shell) .tabs {
        position: sticky;
        z-index: 60;
        inset: auto;
        top: max(12px, env(safe-area-inset-top, 0px));
        width: auto;
        margin: 0 0 16px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border-radius: var(--radius-card);
        box-shadow: none;
    }

    body:not(.native-shell) .tab-btn {
        display: flex;
        flex: initial;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 6px;
        font-size: 0.77rem;
    }

    body:not(.native-shell) .tab-label,
    body:not(.native-shell) .tabs .tab-desktop-only {
        display: inline !important;
    }
}

@media (max-width: 520px) and (hover: hover) and (pointer: fine) {
    body:not(.native-shell) .tab-btn {
        flex-direction: column;
        gap: 3px;
        padding-inline: 2px;
        font-size: 0.61rem;
    }
}

/* Mobile spacing system: 16px page gutters and panel padding, with 12px
   component gaps. Compact phones keep 12px gutters and 14px panel padding. */
.standings-filter-group[hidden] {
    display: none;
}

.route-filter-controls {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;
    justify-items: start;
}

.route-filter-controls:has(> .team-filter-host:only-child[hidden]) {
    display: none;
}

.route-filter-controls .team-filter-host {
    width: 100%;
    margin: 0;
}

.route-filter-controls .team-filter-bar {
    grid-template-columns: minmax(0, 1fr);
    justify-content: flex-start;
}

.route-filter-panel {
    min-width: 0;
    display: grid;
    gap: 0;
}

.route-filter-section {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.route-filter-title {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 800;
}

.route-filter-section:has(> .team-filter-host[hidden]),
.route-filter-section:has(> .standings-filter-group[hidden]),
.news-route-filter-panel:has(.team-filter-host[hidden]) {
    display: none;
}

.standings-club-filter-section:not(:has(> .team-filter-host[hidden]))
    + .standings-competition-filter-section {
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

@media (min-width: 721px) {
    .club-feature-card:has(> .route-filter-panel) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
        column-gap: 14px;
        align-items: start;
    }

    .club-feature-card > .route-filter-panel {
        margin: 0 0 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .club-feature-card > :is(#standings, #news-list) {
        grid-column: 1 / -1;
    }
}

.standings-filter-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--filter-grid-min-width), 1fr));
    gap: 8px;
}

.standings-filter {
    width: 100%;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}

@media (max-width: 720px) {
    .container,
    .footer {
        width: min(
            440px,
            calc(100% - (2 * var(--content-page-gutter-mobile)))
        );
    }

    .main-layout,
    .club-home-shell {
        gap: 16px;
    }

    .tabs,
    .card {
        margin-bottom: var(--section-gap-compact);
    }

    .hero-hub {
        margin-bottom: var(--content-stack-gap-compact);
    }

    /* Calendar filters wrap inside the panel instead of implying that the
       document itself continues beyond the phone viewport. */
    .comp-legend {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }

    .comp-legend-item {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        white-space: normal;
        line-height: 1.2;
        text-align: left;
    }

    /* Data routes use one responsive surface model: an open stack while
       loading or showing content, and one unified card when preferences are
       required. This keeps Tabelas, Estatísticas and Notícias aligned. */
    .club-feature-card {
        border: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .club-feature-card > .route-surface-head {
        margin: 0 0 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        padding: 16px;
        box-shadow: var(--shadow-tight);
    }

    .club-feature-card > .route-filter-panel,
    .statistics-controls-card.route-filter-panel {
        margin: 0 0 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        padding: 16px;
        box-shadow: var(--shadow-tight);
    }

    .statistics-controls-card.route-filter-panel {
        margin-bottom: 0;
    }

    .club-feature-card.club-required-card {
        gap: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        padding: 16px;
        box-shadow: var(--shadow-tight);
    }

    .club-feature-card.club-required-card > .route-surface-head {
        margin: 0 0 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .club-feature-card .route-heading-copy {
        display: grid;
        gap: 5px;
    }

    .club-feature-card .route-heading-copy > :is(h2, p) {
        margin: 0;
    }

    .club-feature-card.club-required-card .route-heading-actions {
        display: none;
    }

    .club-feature-card.club-required-card > .route-filter-panel {
        display: none;
    }

    .club-feature-card.club-required-card > :is(
        #standings,
        #team-stats,
        #news-list
    ) {
        gap: 0;
        margin-top: 0;
    }

    .standings-filter-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .standings-filter {
        width: 100%;
        min-width: 0;
        padding: 9px 8px;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
    }

    #standings {
        display: grid;
        gap: 12px;
        min-width: 0;
    }

    #standings > .standings-section,
    #standings > .empty,
    #standings > .error-state {
        min-width: 0;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        padding: 16px;
        box-shadow: var(--shadow-tight);
    }

    /* .standings-campaign is the single card on mobile - inner sections
       are separated by border-top dividers, not individual cards. */
    #standings > .standings-campaign {
        min-width: 0;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        padding: 16px;
        box-shadow: var(--shadow-tight);
    }

    /* Suppress individual section borders inside the campaign card on mobile */
    .standings-campaign > .standings-section,
    .standings-campaign .standings-match-group {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    #standings > .standings-section + .standings-section {
        margin-top: 0;
        border-top: 1px solid var(--line);
        padding-top: 16px;
    }

    .stats-summary {
        padding: 16px;
    }

    .club-feature-card.club-required-card .club-required-state {
        min-height: 0;
        gap: 8px;
        padding: 24px 20px;
    }

    .club-feature-card.club-required-card .club-required-state button {
        margin-top: 0;
    }

    :is(#standings, #team-stats, #news-list) > :is(
        .empty,
        .error-state,
        .statistics-loading,
        .statistics-no-data
    ) {
        min-width: 0;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        padding: 16px;
        box-shadow: var(--shadow-tight);
    }

    #news-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 12px;
    }

    #news-list .news-item {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        margin-top: 0;
        padding: 10px;
    }

    #news-list .news-thumbnail {
        width: 88px;
    }
}

@media (max-width: 360px) {
    .container,
    .footer {
        width: min(
            440px,
            calc(100% - (2 * var(--content-page-gutter-compact)))
        );
    }

    #news-list .news-item {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
    }

    #news-list .news-thumbnail {
        width: 78px;
    }

    .card,
    .club-home-panel,
    .club-feature-card.club-required-card,
    .club-feature-card > .route-surface-head,
    #standings > .standings-section,
    #standings > .standings-campaign,
    #standings > .empty,
    #standings > .error-state,
    .stats-summary {
        padding: 14px;
    }

    .club-feature-card.club-required-card .club-required-state {
        padding-inline: 16px;
    }

    /* Keep the calendar's closing edge aligned with the 16px mobile rhythm,
       even when compact phones reduce the panel's side padding. */
    #calendar-hub > .card {
        padding-bottom: 16px;
    }
}

/* ===== Club Selector ===== */
.club-selector-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--target-min);
    padding: 5px 10px 5px 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.10);
    color: #fffdf3;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: border-color var(--motion), background var(--motion), transform var(--motion);
}

.club-selector-badge:hover,
.club-selector-badge:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.club-badge-crest {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    padding: 2px;
}

html[data-theme="neutral"] .club-badge-crest {
    border: 1px solid color-mix(in srgb, #10231a 42%, var(--line));
    background: #10231a;
    padding: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 253, 243, 0.12);
}

.club-selector-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: color-mix(in srgb, var(--brand-strong) 72%, transparent);
    backdrop-filter: blur(12px) saturate(0.82);
    animation: club-overlay-in 180ms ease-out both;
}

.club-selector-overlay[hidden] { display: none; }

.club-selector-open {
    overflow: hidden;
}

.club-selector-modal {
    position: relative;
    width: min(100%, 660px);
    max-height: calc(100dvh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid color-mix(in srgb, var(--line-strong) 80%, transparent);
    border-radius: var(--radius-modal);
    background:
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--brand-soft) 74%, transparent), transparent 34%),
        var(--bg-card);
    box-shadow: var(--shadow-modal);
    text-align: left;
    animation: club-modal-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.club-selector-modal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--line-strong);
}

/* ===== Routed account and preferences ===== */
.header .header-account-button {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    justify-self: end;
    border: 1px solid rgba(255, 253, 243, 0.34);
    border-radius: 50%;
    background: rgba(255, 253, 243, 0.10);
    color: var(--ivory);
    padding: 3px;
    cursor: pointer;
    transition: border-color var(--motion), background var(--motion), transform var(--motion);
}

.header .header-global-actions .header-account-button {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
}

.header .header-account-button:hover {
    border-color: rgba(255, 253, 243, 0.56);
    background: rgba(255, 253, 243, 0.18);
    transform: translateY(-1px);
}

.header .header-account-button:focus-visible {
    border-color: var(--focus);
    background: rgba(255, 253, 243, 0.18);
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.header-account-avatar {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: inherit;
    background: rgba(255, 253, 243, 0.12);
}

.header-account-avatar svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

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

.preferences-route {
    width: 100%;
}

.preferences-page {
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    /* Match the desktop inset used by the other full-width route cards. */
    padding: 20px;
    box-shadow: var(--shadow-card);
}

.preferences-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.preferences-heading h2 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    letter-spacing: -0.035em;
}

.preferences-heading h2:focus {
    outline: none;
}

.preferences-eyebrow {
    color: var(--brand);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.preferences-back {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink);
    cursor: pointer;
}

.preferences-back svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.preference-section-heading svg,
.club-preference-row > svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.preferences-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
    gap: 22px;
    align-items: start;
}

.preferences-account.account-panel {
    position: sticky;
    top: 78px;
    grid-template-columns: 1fr;
    justify-items: center;
    margin: 0;
    padding: 26px 22px;
    text-align: center;
}

.preferences-account .account-avatar {
    width: 76px;
    height: 76px;
    background: var(--brand-soft);
}

.preferences-account .account-avatar svg {
    width: 38px;
    height: 38px;
}

.preferences-account .account-copy > p {
    max-width: 340px;
}

.preferences-account .account-action {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
}

.preferences-account .account-signed-in {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 16px;
}

.preferences-account .account-identity {
    text-align: center;
}

.preferences-account .account-profile-form {
    text-align: left;
}

.preferences-account .account-sign-out {
    grid-column: 1;
    grid-row: auto;
    color: var(--danger, #a5332e);
}

.preferences-account .account-session-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.preferences-account .account-linked-provider {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: stretch;
    padding: 12px;
}

.preferences-account .account-linked-provider[hidden] {
    display: none;
}

.preferences-account .account-linked-provider > div:first-child {
    min-width: 0;
    width: 100%;
    justify-items: center;
    text-align: center;
}

.preferences-account .account-linked-provider .ds-action,
.preferences-account .google-provider-start,
.preferences-account .google-link-sign-in {
    width: 100%;
    max-width: none;
    margin-left: 0;
    justify-content: center;
}

.preferences-account .account-linked-provider.is-linking {
    align-items: stretch;
}

.preferences-account .account-provider-unlink {
    border-color: color-mix(in srgb, var(--danger, #a5332e) 42%, var(--line));
    background: transparent;
    color: var(--danger, #a5332e);
}

.preferences-account .account-provider-unlink:hover {
    background: color-mix(in srgb, var(--danger, #a5332e) 8%, transparent);
}

.preferences-account .account-provider-confirmation {
    width: 100%;
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--danger, #a5332e) 28%, var(--line));
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--danger, #a5332e) 5%, var(--bg-card));
    padding: 12px;
    text-align: left;
}

.preferences-account .account-provider-confirmation[hidden] {
    display: none;
}

.preferences-account .account-provider-confirmation > span {
    color: var(--text);
    font-size: 0.72rem;
    line-height: 1.45;
}

.preferences-account .account-provider-confirmation > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.preferences-account .account-provider-confirmation .danger {
    border-color: var(--danger, #a5332e);
    background: var(--danger, #a5332e);
    color: #fff;
}

.preferences-account .account-provider-confirmation .ds-action:disabled,
.preferences-account .account-provider-unlink:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.preferences-account .account-session-actions > button,
.account-delete-actions > button {
    min-height: var(--target-min);
    border-radius: var(--radius-control);
}

.preferences-account .account-delete-open {
    border: 1px solid color-mix(in srgb, var(--danger, #a5332e) 45%, var(--line));
    background: transparent;
    color: var(--danger, #a5332e);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.preferences-account .account-delete-open:hover {
    background: color-mix(in srgb, var(--danger, #a5332e) 8%, transparent);
}

.account-delete-dialog {
    width: min(520px, calc(100vw - 32px));
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 24px 64px rgb(0 0 0 / 24%);
}

.account-delete-dialog::backdrop {
    background: rgb(10 18 14 / 62%);
}

.account-delete-content {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.account-delete-content h2,
.account-delete-content p {
    margin: 0;
}

.account-delete-content > label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 600;
}

.account-delete-content input {
    min-height: var(--target-min);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: 8px 12px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
}

.account-delete-content input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 24%, transparent);
    outline-offset: 1px;
}

.account-delete-status {
    min-height: 1.3em;
    color: var(--danger, #a5332e);
    font-size: 0.82rem;
}

.account-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.account-delete-actions .danger {
    border-color: var(--danger, #a5332e);
    background: var(--danger, #a5332e);
    color: #fff;
}

.account-delete-actions .danger:disabled,
.preferences-account .account-delete-open:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.preferences-sections {
    display: grid;
    gap: 12px;
}

.preference-section.settings-section {
    padding: 0;
    overflow: hidden;
    background: var(--bg-card);
}

.preference-section-heading {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 13px 16px;
    color: var(--brand);
}

.preference-section-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.9rem;
}

.preference-section > p,
.preference-section > label,
.preference-section > .settings-actions,
.preference-section > .settings-status,
.preference-section > .settings-link,
.theme-preference {
    margin-right: 16px;
    margin-left: 16px;
}

.preference-section > .settings-link {
    width: calc(100% - 32px);
    height: 52px;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.preference-section > p {
    margin-top: 12px;
}

.notification-permission-alert {
    margin: 12px 16px 0;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line));
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--gold) 10%, var(--bg-card));
    padding: 12px;
    color: var(--text);
}

.notification-permission-alert[hidden] {
    display: none;
}

.notification-permission-alert > svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-permission-alert strong {
    display: block;
    color: var(--ink);
    font-size: 0.78rem;
}

.notification-permission-alert p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.notification-permission-alert .ds-action {
    min-height: 40px;
    margin-top: 10px;
}

.preference-section > .settings-actions[hidden] {
    display: none;
}

.preference-section > .settings-status,
.preference-section > .settings-link:last-child {
    margin-bottom: 16px;
}

.club-preference-row,
.followed-clubs-row {
    width: 100%;
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    padding: 12px 16px;
    text-align: left;
    font: inherit;
}

.club-preference-row {
    cursor: pointer;
}

.club-preference-row:hover,
.club-preference-row:focus-visible {
    background: var(--bg-soft);
}

.club-preference-row span,
.followed-clubs-row span {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.club-preference-row small,
.followed-clubs-row small {
    color: var(--text-muted);
    font-size: 0.64rem;
}

.club-preference-row strong {
    display: flex;
    align-items: center;
    gap: 8px;
}

.followed-clubs-row strong {
    color: var(--text);
    font-size: 0.76rem;
}

.content-preferences-form {
    display: grid;
    gap: 16px;
    padding: 18px 16px 16px;
}

.content-preferences-heading {
    display: grid;
    gap: 3px;
}

.content-preferences-heading strong {
    color: var(--ink);
    font-size: 0.84rem;
}

.content-preferences-heading small,
.content-preferences-help {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.45;
}

.content-preferences-form fieldset {
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

.content-preferences-form legend {
    margin-bottom: 8px;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 800;
}

.preference-choice-grid,
.preference-option-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.preference-choice-grid label,
.preference-option-list label {
    min-height: var(--target-min);
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg-soft);
    color: var(--text);
    padding: 9px 11px;
    cursor: pointer;
    font-size: 0.73rem;
    font-weight: 700;
}

.preference-choice-grid label:has(input:checked),
.preference-option-list label:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand) 58%, var(--line));
    background: var(--brand-soft);
    color: var(--ink);
}

.preference-choice-grid input,
.preference-option-list input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--brand);
}

.content-club-search {
    display: block;
    margin-bottom: 8px;
}

.content-club-search input {
    width: 100%;
    min-height: var(--target-min);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg-card);
    color: var(--text);
    padding: 9px 12px;
    font: inherit;
    font-size: 0.75rem;
}

.content-club-search input:focus {
    border-color: var(--brand);
    outline: 3px solid color-mix(in srgb, var(--brand) 16%, transparent);
}

#contentClubOptions {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
    scrollbar-gutter: stable;
}

#contentClubOptions .club-crest-option {
    position: relative;
    min-height: 56px;
    aspect-ratio: 1;
    justify-content: center;
    padding: 8px;
}

#contentClubOptions .club-crest-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#contentClubOptions .club-crest-option::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    background: var(--line-strong);
    box-shadow: 0 0 0 1px var(--line);
    transition: background var(--motion), box-shadow var(--motion);
}

#contentClubOptions .club-crest-option:has(input:checked)::after {
    background: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 28%, transparent);
}

#contentClubOptions .club-crest-option:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--brand) 20%, transparent);
    outline-offset: 2px;
}

.club-option-crest {
    width: 38px;
    height: 38px;
    object-fit: contain;
    transition: transform var(--motion);
}

#contentClubOptions .club-crest-option:hover .club-option-crest {
    transform: scale(1.06);
}

#contentClubOptions .club-none-option {
    flex-direction: column;
    gap: 1px;
}

#contentClubOptions .club-none-option .club-option-crest {
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, #2f312e 42%, var(--line));
    border-radius: 50%;
    background: #2f312e;
    padding: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 253, 243, 0.12);
}

.club-none-copy {
    color: var(--text);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
}

.preference-option-list label[hidden] {
    display: none;
}

.content-preferences-help {
    display: block;
    margin-top: 7px;
}

.content-preferences-form > .settings-actions {
    margin: 0;
}

.content-preferences-form > .settings-status {
    min-height: 1.1em;
    margin: -5px 0 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.45;
}

@media (max-width: 520px) {
    .preference-option-list {
        grid-template-columns: 1fr;
    }

    #contentClubOptions {
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    }
}

.theme-preference {
    border: 0;
    padding: 0 0 14px;
}

.theme-preference legend {
    padding-top: 12px;
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 800;
}

.theme-preference > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 8px;
    border: 1px solid var(--control-neutral-border);
    border-radius: var(--radius-control);
    background: var(--control-neutral-bg);
    padding: 3px;
}

.theme-preference button {
    min-height: var(--target-min);
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    background: transparent;
    color: var(--control-neutral-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
}

.theme-preference button.active,
.theme-preference button[aria-pressed="true"] {
    background: var(--control-neutral-selected-bg);
    color: var(--control-neutral-selected-text);
    box-shadow: var(--shadow-control);
}

.theme-preference button:hover {
    background: var(--control-neutral-bg-hover);
    color: var(--control-neutral-text);
}

.theme-preference button.active:hover,
.theme-preference button[aria-pressed="true"]:hover {
    background: var(--control-neutral-selected-bg-hover);
    color: var(--control-neutral-selected-text);
}

.theme-preference button:focus-visible {
    outline-color: var(--control-neutral-focus);
}

.preference-switch-row {
    justify-content: space-between;
    padding-block: 10px;
}

.preference-switch-row > span {
    display: grid;
    gap: 2px;
}

.preference-switch-row strong {
    color: var(--ink);
    font-size: 0.78rem;
}

.preference-switch-row small {
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 500;
}

.preference-switch-row input,
.preference-section input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

body[data-active-tab="preferencias"] .tabs .tab-btn.active {
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

@media (max-width: 900px) {
    .preferences-layout {
        grid-template-columns: 1fr;
    }

    .preferences-account.account-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .header .header-account-button {
        grid-column: 2;
        grid-row: 1;
        width: 46px;
        height: 46px;
    }

    .preferences-page {
        padding: 16px 12px;
    }

    .preferences-heading {
        margin-bottom: 16px;
    }

    .preferences-eyebrow {
        display: none;
    }

    .preferences-heading h2 {
        font-size: 1.18rem;
    }

    .preferences-account.account-panel {
        padding: 22px 16px;
    }

    .preference-section > .settings-actions {
        display: grid;
    }

}

.club-selector-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.club-selector-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.club-selector-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.club-selector-close {
    display: inline-grid;
    flex: 0 0 auto;
    width: var(--target-min);
    height: var(--target-min);
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-card) 86%, var(--control-accent-soft));
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--motion), color var(--motion), transform var(--motion);
}

.club-selector-close[hidden] {
    display: none;
}

.club-selector-close:hover,
.club-selector-close:focus-visible {
    border-color: var(--control-accent);
    color: var(--control-accent);
    transform: rotate(4deg);
}

.club-selector-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.club-selector-subtitle {
    max-width: 54ch;
    margin: 14px 0 26px;
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.55;
}

.club-selector-search {
    display: block;
    margin: 0 0 16px;
}

.club-selector-search input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--bg-card);
    color: var(--text);
    padding: 10px 13px;
    font: inherit;
    font-size: 0.78rem;
}

.club-selector-search input:focus {
    border-color: var(--brand);
    outline: 3px solid color-mix(in srgb, var(--brand) 16%, transparent);
}

.club-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.club-card[hidden] {
    display: none;
}

.club-card {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    min-height: 106px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ivory) 55%, transparent) inset;
    transition: border-color var(--motion), box-shadow var(--motion), transform var(--motion), background var(--motion);
}

.club-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--line-strong);
    transform: scaleY(0.45);
    transition: transform var(--motion);
}

.club-card:hover,
.club-card:focus-visible {
    border-color: var(--line-strong);
    background: var(--bg-soft);
    box-shadow: var(--shadow-tight);
    transform: translateY(-2px);
}

.club-card:hover::after,
.club-card:focus-visible::after,
.club-card.active::after {
    background: var(--action-bg);
    transform: scaleY(1);
}

.club-card.active {
    border-color: var(--action-bg);
    background: var(--bg-soft);
}

.club-card-crest-wrap {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--ivory);
}

.club-card-crest {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.club-card-neutral .club-card-crest-wrap {
    border-color: var(--line-strong);
    background: #2f312e;
    box-shadow: inset 0 0 0 1px rgba(255, 253, 243, 0.12);
}

.club-card-neutral .club-card-crest {
    width: 42px;
    height: 42px;
}

.club-card-copy {
    min-width: 0;
}

.club-card-name {
    display: block;
    margin-bottom: 3px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.club-card-full {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.club-card-check {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: transparent;
}

.club-card.active .club-card-check {
    border-color: var(--action-bg);
    background: var(--action-bg);
    color: var(--action-text);
}

.club-card-check svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.club-selector-note {
    margin: 20px 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-align: center;
}

/* Per-club statistics
   Every statistics-enabled selected club uses the same complete analytical
   surface. Affiliation remains visible in the club rail without changing depth. */
.statistics-page {
    min-width: 0;
    display: grid;
    gap: 0;
    --statistics-card-padding: 16px;
    --statistics-grid-gap: 16px;
    --statistics-icon-size: 20px;
    --statistics-result-win: var(--win);
    --statistics-result-draw: var(--gold-strong);
    --statistics-result-loss: var(--loss);
}

html.dark .statistics-page {
    --statistics-result-win: #67d39a;
    --statistics-result-draw: #e0bb74;
    --statistics-result-loss: #ee6b63;
}

.statistics-controls-card {
    min-width: 0;
    margin-bottom: 0;
}

#team-stats {
    min-width: 0;
    display: grid;
    gap: var(--content-stack-gap);
}

.statistics-controls-card .stats-team-filter {
    margin-bottom: 16px;
}

.statistics-controls-card .statistics-filters {
    margin: 0;
}

@media (min-width: 721px) {
    .statistics-page > #team-stats > .statistics-controls-card {
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }
}

.statistics-loading {
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    padding: 32px;
}

/* Shared club scope control for surfaces where merged data would otherwise be
   ambiguous. Games keep their existing club identity inside each match row. */
.team-filter-host[hidden] {
    display: none;
}

.team-filter-host {
    margin: -2px 0 16px;
}

.team-filter-bar {
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: center;
}

.standings-team-filter .team-filter-pills {
    width: 100%;
}

.team-filter-label {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 700;
}

.team-filter-pills {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--filter-grid-min-width), 1fr));
    flex: 1 1 auto;
    gap: 8px;
    overflow: visible;
    padding: 0;
}

.comp-legend-item,
.competition-card-action,
.team-filter-pill,
.standings-filter,
.statistics-filter-field select,
.statistics-period-filter button,
.history-filters select,
.history-filters button {
    min-height: var(--filter-control-height);
    padding: var(--filter-control-padding);
    font-size: var(--filter-control-font-size);
    line-height: var(--filter-control-line-height);
    font-weight: var(--filter-control-font-weight);
}

.team-filter-pill {
    width: 100%;
    min-width: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--control-neutral-border);
    border-radius: var(--filter-control-radius);
    background: var(--control-neutral-bg);
    color: var(--control-neutral-text);
    white-space: nowrap;
    cursor: pointer;
}

.team-filter-pill img {
    width: var(--club-filter-crest-size);
    height: var(--club-filter-crest-size);
    object-fit: contain;
}

.team-filter-pill:hover {
    border-color: var(--control-neutral-border-strong);
    background: var(--control-neutral-bg-hover);
    color: var(--control-neutral-text);
}

.team-filter-pill.is-selected {
    border-color: var(--control-neutral-selected-bg);
    background: var(--control-neutral-selected-bg);
    color: var(--control-neutral-selected-text);
}

.team-filter-pill.is-selected:hover {
    border-color: var(--control-neutral-selected-bg-hover);
    background: var(--control-neutral-selected-bg-hover);
}

.team-filter-pill:focus-visible {
    outline: 2px solid var(--control-neutral-focus);
    outline-offset: 2px;
}

.stats-team-filter {
    margin: 0 0 16px;
    padding-inline: 0;
}

.stats-team-filter .team-filter-label {
    display: none;
}

.stats-team-filter .team-filter-pills {
    display: grid;
    gap: 8px;
    padding: 0;
}

.stats-team-filter .team-filter-pill-copy {
    gap: 3px;
}

.stats-team-filter .team-filter-pill-copy strong {
    font-size: 0.78rem;
}

.stats-team-filter .team-filter-pill-copy small {
    font-size: 0.6rem;
}

.stats-team-filter .team-filter-pill.is-selected .team-filter-pill-copy strong,
.stats-team-filter .team-filter-pill.is-selected .team-filter-pill-copy small {
    color: var(--control-neutral-selected-text);
}

.stats-team-filter .team-filter-pill.is-selected .team-filter-pill-copy small.is-supported {
    color: var(--gold);
}

.team-filter-pill-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
    text-align: left;
}

.team-filter-pill-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.15;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-filter-pill-copy small {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 600;
}

.team-filter-pill-copy small svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stats-team-filter .team-filter-pill-copy small.is-supported {
    color: var(--gold-strong);
}

.stats-team-filter .team-filter-pill-copy small.is-supported svg {
    fill: currentColor;
    stroke: currentColor;
}

.statistics-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: end;
    margin: 0 0 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.statistics-filter-field,
.statistics-period-filter {
    min-width: 0;
    display: grid;
    gap: 4px;
    margin: 0;
    border: 0;
    padding: 0;
}

.statistics-filter-field > span,
.statistics-period-label {
    min-height: 16px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 16px;
    font-weight: 700;
}

.statistics-filter-field select {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--filter-control-radius);
    background: var(--bg-card);
    color: var(--text);
    padding-right: 36px;
}

.statistics-period-filter > div {
    min-width: 0;
    min-height: var(--filter-control-height);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.statistics-period-filter button {
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--filter-control-radius);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
}

.statistics-period-filter button:hover {
    background: var(--bg-soft);
    color: var(--ink);
}

.statistics-period-filter button:focus-visible {
    outline: 2px solid var(--control-neutral-focus);
    outline-offset: 2px;
}

.statistics-period-filter button[aria-pressed="true"] {
    background: var(--control-neutral-selected-bg);
    color: var(--control-neutral-selected-text);
}

/* Canonical filter geometry across Agenda, Tabelas, Estatísticas, Histórico
   and Notícias. Individual surfaces may vary layout, never silhouette. */
.comp-legend-item,
.competition-card-action,
.standings-filter,
.match-filter,
.team-filter-pill,
.statistics-period-filter button,
.history-filters select,
.history-filters button {
    border-radius: var(--filter-control-radius);
}

.history-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.history-filters button {
    width: 100%;
}

@media (max-width: 720px) {
    .history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .history-filters {
        grid-template-columns: minmax(0, 1fr);
    }
}

.statistics-club-view {
    display: grid;
    gap: var(--statistics-grid-gap);
}

.statistics-summary-panel {
    padding: var(--statistics-card-padding);
}

.statistics-club-view-heading {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 0 16px;
}

.statistics-club-view-heading h2 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.25;
    font-weight: 800;
}

.statistics-club-view-heading p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

.statistics-section {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    padding: var(--statistics-card-padding);
    box-shadow: var(--shadow-tight);
}

.statistics-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.statistics-section-heading h3,
.statistics-momentum-layout h4,
.statistics-probability-panel h4,
.statistics-factor-panel h4 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 800;
}

.statistics-section-heading h3 span {
    color: var(--gold-strong);
}

.statistics-section-heading p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.4;
}

.statistics-metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.statistics-metric {
    min-width: 0;
    min-height: 136px;
    display: grid;
    grid-template-rows:
        1.75rem
        var(--statistics-icon-size)
        1.75rem
        0.85rem;
    row-gap: 6px;
    align-content: center;
    justify-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg-card);
    padding: 12px 8px;
    text-align: center;
}

.statistics-metric .statistics-metric-label {
    min-height: 2.4em;
    display: grid;
    place-items: end center;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 600;
}

.statistics-metric-icon {
    width: var(--statistics-icon-size);
    height: var(--statistics-icon-size);
    display: grid;
    place-items: center;
    margin-top: 0;
    color: var(--text-secondary);
}

.statistics-metric-icon svg {
    width: var(--statistics-icon-size);
    height: var(--statistics-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.statistics-metric-icon.is-field svg,
.statistics-metric-icon.is-balance svg {
    width: 19px;
    height: 19px;
}

.statistics-metric strong {
    align-self: center;
    margin-top: 0;
    color: var(--ink);
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.statistics-metric small {
    align-self: center;
    margin-top: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.25;
    font-weight: 600;
}

.statistics-metric small.is-win {
    color: var(--win);
    font-weight: 800;
}

.statistics-record-detail {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.statistics-record-detail .win {
    color: var(--win);
}

.statistics-record-detail .draw {
    color: var(--gold-strong);
}

.statistics-record-detail .loss {
    color: var(--loss);
}

.statistics-metric.is-win strong {
    color: var(--win);
}

.statistics-metric.is-loss strong {
    color: var(--loss);
}

.statistics-momentum-layout,
.statistics-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--statistics-grid-gap);
    align-items: stretch;
}

.statistics-moment-panel,
.statistics-performance-panel {
    min-width: 0;
}

.statistics-analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--statistics-grid-gap);
}

.statistics-form-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.statistics-form-item {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 34px minmax(40px, 1fr) auto auto;
    gap: 6px;
    justify-items: center;
    align-content: start;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg-soft);
    padding: 9px 6px;
    text-align: center;
}

.statistics-form-item time,
.statistics-form-item small {
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.25;
    font-weight: 600;
}

.statistics-form-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.statistics-form-item > div {
    min-width: 0;
}

.statistics-form-item strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.statistics-form-item b {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.statistics-form-item > span {
    min-width: 24px;
    min-height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-control);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
    font-weight: 900;
}

.statistics-form-item.win > span {
    background: var(--win);
}

.statistics-form-item.draw > span {
    background: var(--draw);
}

.statistics-form-item.loss > span {
    background: var(--loss);
}

.statistics-form-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 0.62rem;
    line-height: 1;
}

.statistics-form-legend span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.statistics-form-legend i {
    min-width: 18px;
    min-height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 5px;
    color: #fff;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 900;
}

.statistics-form-legend i.win {
    background: var(--win);
}

.statistics-form-legend i.draw {
    background: var(--gold-strong);
}

.statistics-form-legend i.loss {
    background: var(--loss);
}

.statistics-form-list.is-compact {
    grid-template-columns: 1fr;
    gap: 6px;
}

.statistics-form-list.is-compact .statistics-form-item {
    min-height: 50px;
    grid-template-columns: 46px 28px minmax(0, 1fr) 54px 28px;
    grid-template-rows: auto;
    gap: 9px;
    align-items: center;
    justify-items: start;
    padding: 8px 10px;
    text-align: left;
}

.statistics-form-list.is-compact .statistics-form-item img {
    width: 26px;
    height: 26px;
}

.statistics-form-list.is-compact .statistics-form-item strong {
    font-size: 0.76rem;
    -webkit-line-clamp: 1;
}

.statistics-form-list.is-compact .statistics-form-item b {
    justify-self: end;
}

.statistics-form-list.is-compact .statistics-form-item > span {
    justify-self: end;
}

.statistics-chart-container {
    position: relative;
    min-height: 250px;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
}

.statistics-chart-heading {
    align-items: end;
}

.statistics-chart-result-legend {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.64rem;
    line-height: 1;
    font-weight: 700;
}

.statistics-chart-result-legend span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    white-space: nowrap;
}

.statistics-chart-result-legend i {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent);
}

.statistics-chart-result-legend i.win {
    color: var(--statistics-result-win);
    background: var(--statistics-result-win);
}

.statistics-chart-result-legend i.draw {
    color: var(--statistics-result-draw);
    background: var(--statistics-result-draw);
}

.statistics-chart-result-legend i.loss {
    color: var(--statistics-result-loss);
    background: var(--statistics-result-loss);
}

.statistics-chart-container canvas {
    width: 100% !important;
    height: 240px !important;
}

.statistics-chart-container .statistics-empty-inline {
    min-height: 220px;
    place-items: center;
}

.statistics-chart-container .statistics-empty-inline:not([hidden]) {
    display: grid;
}

.statistics-rate-list {
    display: grid;
    gap: 13px;
}

.statistics-rate-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(130px, 0.9fr) minmax(80px, 1fr) 48px;
    gap: 12px;
    align-items: center;
}

.statistics-rate-row > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.statistics-rate-row strong {
    color: var(--text);
    font-size: 0.74rem;
    line-height: 1.2;
    font-weight: 700;
}

.statistics-rate-row small {
    color: var(--text-muted);
    font-size: 0.62rem;
    line-height: 1.25;
}

.statistics-rate-row > span {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-soft);
}

.statistics-rate-row > span i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--action-bg);
}

.statistics-rate-row > b {
    color: var(--ink);
    text-align: right;
    font-size: 0.76rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.statistics-rate-row.is-average {
    grid-template-columns: minmax(0, 1fr) 58px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.statistics-comparison-table,
.statistics-competition-table {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.statistics-comparison-row,
.statistics-competition-row {
    min-height: 44px;
    display: grid;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--line);
    padding: 7px 9px;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.statistics-comparison-row {
    grid-template-columns: minmax(54px, 1.4fr) repeat(6, minmax(22px, 0.55fr)) minmax(42px, 0.8fr);
}

.statistics-competition-row {
    grid-template-columns: minmax(150px, 2fr) repeat(6, minmax(30px, 0.55fr)) minmax(48px, 0.8fr);
}

.statistics-comparison-row:first-child,
.statistics-competition-row:first-child {
    border-top: 0;
}

.statistics-comparison-row.is-header,
.statistics-competition-row.is-header {
    min-height: 36px;
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
}

.statistics-comparison-row strong,
.statistics-competition-row strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.statistics-comparison-row span,
.statistics-comparison-row b,
.statistics-competition-row span,
.statistics-competition-row b {
    text-align: center;
}

.statistics-comparison-row b,
.statistics-competition-row b {
    color: var(--win);
    font-weight: 900;
}

.statistics-projection-section {
    border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}

.statistics-projection-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.statistics-projection-match-card {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 16px;
    border-right: 1px solid var(--line);
    padding-right: 24px;
}

.statistics-projection-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 132px;
    margin: 0;
}

.statistics-projection-match > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.statistics-projection-match > div:last-child {
    text-align: center;
}

.statistics-projection-match img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.statistics-projection-match strong {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.statistics-projection-match > b {
    color: var(--text-muted);
    text-align: center;
}

.statistics-projection-meta {
    min-width: 0;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.statistics-projection-meta > span {
    min-width: 0;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.35;
    font-weight: 600;
}

.statistics-projection-meta-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.statistics-projection-content {
    min-width: 0;
}

.statistics-projection-loading,
.statistics-projection-unavailable {
    border-radius: var(--radius-control);
    background: var(--bg-soft);
    color: var(--text-secondary);
    padding: 18px;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.statistics-projection-unavailable strong {
    color: var(--ink);
}

.statistics-projection-unavailable p {
    margin: 5px 0 0;
}

.statistics-projection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.statistics-probability-panel,
.statistics-factor-panel {
    min-width: 0;
}

.statistics-probability-panel h4,
.statistics-factor-panel h4 {
    margin-bottom: 12px;
    font-size: 0.78rem;
}

.statistics-probability-bar {
    min-height: 40px;
    display: flex;
    overflow: hidden;
    border-radius: var(--radius-control);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.statistics-probability-bar span {
    min-width: 30px;
    display: grid;
    place-items: center;
}

.statistics-probability-bar .win {
    background: var(--win);
}

.statistics-probability-bar .draw {
    background: var(--draw);
}

.statistics-probability-bar .loss {
    background: var(--loss);
}

.statistics-probability-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.62rem;
    text-align: center;
}

.statistics-likely-score {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.statistics-likely-score span {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
}

.statistics-likely-score strong {
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.statistics-factor-panel {
    display: grid;
    align-content: start;
    gap: 12px;
}

.statistics-factor-panel > div {
    min-height: 44px;
    display: grid;
    grid-template-columns: var(--statistics-icon-size) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.statistics-factor-panel > div:last-child {
    border-bottom: 0;
}

.statistics-factor-panel > div > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.statistics-factor-icon {
    width: var(--statistics-icon-size);
    height: var(--statistics-icon-size);
    display: grid;
    place-items: center;
    margin-top: 1px;
    color: var(--text-muted);
}

.statistics-factor-icon svg {
    width: var(--statistics-icon-size);
    height: var(--statistics-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.statistics-factor-panel strong {
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 700;
}

.statistics-factor-panel small {
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-style: normal;
    line-height: 1.35;
}

.statistics-method {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg-soft);
}

.statistics-method summary {
    min-height: var(--target-min);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.statistics-method summary::-webkit-details-marker {
    display: none;
}

.statistics-disclosure-icon {
    width: var(--statistics-icon-size);
    height: var(--statistics-icon-size);
    flex: 0 0 var(--statistics-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--motion);
}

.statistics-method[open] .statistics-disclosure-icon {
    transform: rotate(180deg);
}

.statistics-method p {
    margin: 0;
    border-top: 1px solid var(--line);
    padding: 12px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1.5;
}

.statistics-disclaimer {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.4;
    text-align: center;
}

.statistics-no-data {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-soft);
    padding: 36px 20px;
    text-align: center;
}

.statistics-no-data strong {
    color: var(--ink);
}

.statistics-no-data p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.statistics-empty-inline {
    color: var(--text-muted);
    padding: 20px;
    font-size: 0.74rem;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 900px) {
    .statistics-filters {
        grid-template-columns: 1fr;
    }

    .statistics-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .statistics-momentum-layout,
    .statistics-analysis-grid {
        grid-template-columns: 1fr;
    }

    .statistics-projection-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .statistics-projection-match-card {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-right: 0;
        padding-bottom: 18px;
    }
}

@media (max-width: 620px) {
    #team-stats {
        gap: var(--content-stack-gap-compact);
    }

    .statistics-club-view-heading h2 {
        font-size: 1.1rem;
    }

    .team-filter-bar {
        display: grid;
        gap: 6px;
    }

    .team-filter-pills {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        margin-inline: 0;
        padding: 0;
    }

    .team-filter-pill {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .comp-legend-item,
    .competition-card-action,
    .team-filter-pill,
    .standings-filter,
    .statistics-filter-field select,
    .statistics-period-filter button,
    .history-filters select,
    .history-filters button {
        min-height: var(--filter-control-height-compact);
        padding: var(--filter-control-padding-compact);
    }

    .statistics-period-filter > div {
        min-height: var(--filter-control-height-compact);
    }

    .stats-team-filter .team-filter-pills {
        margin-inline: 0;
    }

    .statistics-filters {
        gap: 12px;
        margin-top: 8px;
        margin-bottom: 16px;
        padding: 0;
    }

    .statistics-summary-panel {
        padding: 16px;
    }

    .statistics-section {
        padding: 16px;
    }

    .statistics-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .statistics-metric {
        min-height: 124px;
    }

    .statistics-metric strong {
        font-size: 1.5rem;
    }

    .statistics-form-list,
    .statistics-form-list.is-compact {
        grid-template-columns: 1fr;
    }

    .statistics-form-item,
    .statistics-form-list.is-compact .statistics-form-item {
        min-height: 54px;
        grid-template-columns: 42px 28px minmax(0, 1fr) 52px 28px;
        grid-template-rows: auto;
        gap: 8px;
        align-items: center;
        justify-items: start;
        padding: 8px 9px;
        text-align: left;
    }

    .statistics-form-item img,
    .statistics-form-list.is-compact .statistics-form-item img {
        width: 26px;
        height: 26px;
    }

    .statistics-form-item strong,
    .statistics-form-list.is-compact .statistics-form-item strong {
        font-size: 0.72rem;
        -webkit-line-clamp: 1;
    }

    .statistics-form-item b,
    .statistics-form-item > span {
        justify-self: end;
    }

    .statistics-form-item small {
        font-size: 0.64rem;
    }

    .statistics-chart-container,
    .statistics-chart-container .statistics-empty-inline {
        min-height: 220px;
    }

    .statistics-chart-heading {
        display: grid;
        gap: 10px;
    }

    .statistics-chart-result-legend {
        gap: 10px;
    }

    .statistics-chart-container canvas {
        height: 205px !important;
    }

    .statistics-rate-row {
        grid-template-columns: minmax(110px, 0.9fr) minmax(60px, 1fr) 42px;
        gap: 8px;
    }

    .statistics-comparison-table,
    .statistics-competition-table {
        overflow-x: auto;
    }

    .statistics-comparison-row,
    .statistics-competition-row {
        gap: 3px;
        padding-inline: 6px;
        font-size: 0.68rem;
    }

    .statistics-comparison-row {
        min-width: 520px;
        grid-template-columns: minmax(44px, 1.4fr) repeat(6, minmax(19px, 0.55fr)) minmax(36px, 0.8fr);
    }

    .statistics-competition-row {
        min-width: 620px;
        grid-template-columns: minmax(92px, 2fr) repeat(6, minmax(20px, 0.55fr)) minmax(38px, 0.8fr);
    }

    .statistics-comparison-row.is-header,
    .statistics-competition-row.is-header {
        font-size: 0.6rem;
    }

    .statistics-projection-match {
        gap: 7px;
    }

    .statistics-projection-match img {
        width: 42px;
        height: 42px;
    }

    .statistics-projection-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}

@keyframes club-overlay-in {
    from { opacity: 0; }
}

@keyframes club-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
}

@media (max-width: 620px) {
    .club-selector-overlay {
        align-items: end;
        padding: 12px;
    }

    .club-selector-modal {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 28px 20px calc(22px + env(safe-area-inset-bottom));
        border-radius: var(--radius-modal);
    }

    .club-selector-grid {
        grid-template-columns: 1fr;
    }

    .club-card {
        min-height: 92px;
        padding: 14px 16px;
    }
}

@media (max-width: 360px) {
    .container,
    .footer {
        width: min(
            440px,
            calc(100% - (2 * var(--content-page-gutter-compact)))
        );
    }

    #calendar-hub > .card {
        padding-inline: 0;
    }

    #calendar-hub .cal-header,
    #calendar-hub .comp-legend,
    #calendar-hub .calendar-nav,
    #calendar-hub #calendar-expanded {
        margin-inline: 12px;
    }

    #calendar-hub .calendar-grid {
        gap: 0;
    }
}

/* Compact sports metadata remains dense, but never drops into unreadable
   caption sizes or low-contrast text on branded surfaces. */
.product-disclosure {
    color: rgba(255, 253, 243, 0.82);
    font-size: 0.7rem;
}

.hero-team-role {
    color: rgba(255, 253, 243, 0.82);
    font-size: 0.65rem;
}

.hero-record-stats span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.625rem;
}

.match-team-role,
.cal-match-team-role {
    font-size: 0.625rem;
}

.match-meta {
    font-size: 0.65rem;
}

@media (max-width: 720px) {
    .cal-score {
        font-size: 0.625rem;
    }
}

@media (max-width: 520px) and (hover: hover) and (pointer: fine) {
    body:not(.native-shell) .tab-btn {
        font-size: 0.65rem;
    }
}

/* A rotated touch phone keeps the touch interaction model, but its content
   should consume the available landscape width instead of retaining the
   portrait 440px measure. Header and content use the same safe-area gutters. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .header {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .container,
    .footer {
        width: auto;
        margin-left: max(16px, env(safe-area-inset-left, 0px));
        margin-right: max(16px, env(safe-area-inset-right, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-selector-overlay,
    .club-selector-modal {
        animation: none;
    }
}
}