/* ==========================================================================
   LASA public site — same navy + crimson palette and Oswald/Poppins fonts as
   LASA.DataWebsite (wwwroot/app.css), laid out after a baseball club template (crimson info bar,
   navy nav with hanging logo, angled hero bands, white cards).
   ========================================================================== */
:root {
    --lasa-primary: #17225c;
    --lasa-primary-dark: #0f1740;
    --lasa-primary-darker: #0a0f2c;
    --lasa-primary-light: #e8eaf4;
    --lasa-primary-soft: #ccd1e8;
    --lasa-accent: #d31222;
    --lasa-accent-dark: #a90e1b;
    --lasa-accent-light: #fce8ea;
    --lasa-bg: #f4f5fa;
    --lasa-surface: #ffffff;
    --lasa-border: #e1e3ee;
    --lasa-text: #1b2033;
    --lasa-text-muted: #666c84;
    --lasa-success: #157f3c;
    --lasa-radius: 10px;
    --lasa-radius-sm: 6px;
    --lasa-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --lasa-shadow-md: 0 6px 20px rgba(23, 34, 92, 0.12);
    --lasa-shadow-lg: 0 20px 50px rgba(10, 15, 44, 0.28);
    --lasa-font-heading: 'Oswald', 'Segoe UI', sans-serif;
    --lasa-font-body: 'Poppins', 'Segoe UI', sans-serif;
    --site-width: 1320px;

    /* DevExpress accent (tabs, focus, checkboxes) repainted to the crimson accent. */
    --dxbl-accent-color-10: #fffafb;
    --dxbl-accent-color-20: #fce0e2;
    --dxbl-accent-color-30: #fac5c9;
    --dxbl-accent-color-40: #f8aab1;
    --dxbl-accent-color-50: #f58e96;
    --dxbl-accent-color-60: #f36f7a;
    --dxbl-accent-color-70: #f04e5c;
    --dxbl-accent-color-80: #ec2333;
    --dxbl-accent-color-90: var(--lasa-accent);
    --dxbl-accent-color-100: #c51120;
    --dxbl-accent-color-110: var(--lasa-accent-dark);
    --dxbl-accent-color-120: #940d18;
    --dxbl-accent-color-130: #7f0b14;
    --dxbl-accent-color-140: #690911;
    --dxbl-accent-color-150: #56070e;
    --dxbl-accent-color-160: #42060b;
    --dxbl-accent-color-170: #310408;
}

html, body { margin: 0; min-height: 100%; }
body {
    background: var(--lasa-bg);
    color: var(--lasa-text);
    font-family: var(--lasa-font-body);
    font-size: 0.92rem;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--lasa-font-heading); letter-spacing: 0.02em; }
h1:focus { outline: none; }
a { color: var(--lasa-primary); }
a:hover { color: var(--lasa-accent); }
.icon { flex: 0 0 auto; vertical-align: middle; }
.text-muted, .empty-note { color: var(--lasa-text-muted) !important; }
.empty-note { margin: 0; padding: 4px 0; }

/* --------------------------------------------------------------------------
   Top info bar + header (layout after the "Homerun" baseball club template:
   crimson info strip, then a navy bar with brand, season selector and menu)
   -------------------------------------------------------------------------- */

.topbar { background: var(--lasa-accent); color: #fff; font-size: 0.75rem; }
.topbar__inner {
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.topbar__inner > span { display: inline-flex; align-items: center; gap: 6px; }
.topbar__right { margin-left: auto; }

.site-header {
    background: var(--lasa-primary);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(10, 15, 44, 0.35);
}
.site-header__inner {
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 68px;
    position: relative;
}
/* Brand as in LASA.DataWebsite's top bar (.app-shell__brand): logo on a white rounded tile + name. */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: #fff;
    text-decoration: none;
}
.brand:hover { color: #fff; }
.brand__mark {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #fff;
    padding: 3px;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }
.brand__name { font-family: var(--lasa-font-heading); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.06em; }

/* Season selector (native select styled to sit on the navy bar) */
.season-select {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0 10px 0 12px;
    height: 38px;
    border-radius: var(--lasa-radius-sm);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}
.season-select:hover, .season-select:focus-within { background: rgba(255, 255, 255, 0.16); border-color: var(--lasa-accent); }
.season-select select {
    appearance: none;
    background: transparent;
    border: 0;
    color: #fff;
    font-family: var(--lasa-font-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-right: 18px;
    cursor: pointer;
    outline: none;
}
.season-select select option { color: var(--lasa-text); text-transform: none; }
.season-select::after {
    content: "";
    position: absolute;
    right: 12px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.main-nav { display: flex; align-items: center; justify-content: center; flex: 1; gap: 2px; }
.main-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    color: #fff;
    font-family: var(--lasa-font-heading);
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.main-nav__icon { display: none; }
.main-nav__link:hover { color: #ff6b76; }
.main-nav__link.active { color: var(--lasa-accent); text-shadow: 0 0 1px rgba(211, 18, 34, 0.4); }
.site-header .main-nav__link.active { color: #ff4d5a; }

.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; }

/* --------------------------------------------------------------------------
   Hero (Home) and page banner (inner pages): navy with an angled crimson band
   -------------------------------------------------------------------------- */
.hero, .page-banner {
    position: relative;
    margin-left: calc(50% - 50vw);
    width: 100vw;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.10) 0, transparent 40%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px),
        linear-gradient(120deg, var(--lasa-primary-darker) 0%, var(--lasa-primary) 55%, #24338a 100%);
}
.hero::after, .page-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    background: var(--lasa-accent);
    clip-path: polygon(0 0, 100% 45%, 100% 100%, 0 100%);
}
.hero::before, .page-banner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    background: var(--lasa-bg);
    clip-path: polygon(0 55%, 100% 100%, 0 100%);
    z-index: 1;
}
.hero::after { height: 90px; }
.hero::before { height: 90px; }
/* Home hero: the same glow, stripes and navy gradient as the banners, plus the LASA crest as a centred watermark.
   A background layer can't have its own opacity, so the crest sits under a "veil": the navy gradient again, at 84%.
   Where there's no crest, the veil over the base gradient gives exactly the original colours; over the crest, 16% of it
   shows through. The crest is square, so its size is a length (width = height), which lets it be centred exactly on
   --hero-crest-x (background-position percentages are relative to the section width minus the image width, so they can't centre it).
   The size is capped so it stays clear of the angled bands at the bottom. */
.hero {
    --hero-crest-size: clamp(240px, 24vw, 360px);
    --hero-crest-x: 30vw; /* the hero is exactly 100vw wide; a % here would be of (width - image width) */
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.10) 0, transparent 40%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px),
        linear-gradient(120deg, rgba(10, 15, 44, 0.84) 0%, rgba(23, 34, 92, 0.84) 55%, rgba(36, 51, 138, 0.84) 100%),
        url("../images/lasa-logo.svg") calc(var(--hero-crest-x) - var(--hero-crest-size) / 2) 38% / auto var(--hero-crest-size) no-repeat,
        linear-gradient(120deg, var(--lasa-primary-darker) 0%, var(--lasa-primary) 55%, #24338a 100%);
}
.page-banner::after, .page-banner::before { height: 56px; }

.hero__inner, .page-banner__inner {
    position: relative;
    z-index: 2;
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 0 16px;
}
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 110px;
}
.hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin: 14px 0 16px;
}
.hero p { max-width: 520px; color: rgba(255, 255, 255, 0.82); line-height: 1.6; margin: 0 0 24px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 24px; }

.page-banner__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 48px;
    padding-bottom: 76px;
}
.page-banner h1 { margin: 12px 0 0; font-size: clamp(1.8rem, 3.5vw, 2.6rem); text-transform: uppercase; line-height: 1.1; }
/* Filters shown on the navy page banner (Scores date, Schedule "show played") */
.banner-select, .banner-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: var(--lasa-radius-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 4px solid var(--lasa-accent);
    color: #fff;
    font-family: var(--lasa-font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}
.banner-select select {
    background: #fff;
    color: var(--lasa-text);
    border: 0;
    border-radius: 4px;
    padding: 6px 10px;
    font-family: var(--lasa-font-body);
    font-size: 0.85rem;
    min-width: 150px;
}
.banner-check input { width: 18px; height: 18px; accent-color: var(--lasa-accent); }

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--lasa-font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.accent-word { color: var(--lasa-accent); }
.hero .accent-word, .page-banner .accent-word { color: #ff4d5a; }
.accent-underline { box-shadow: inset 0 -0.28em 0 var(--lasa-accent); }

.btn-accent {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: var(--lasa-radius-sm);
    background: var(--lasa-accent);
    color: #fff;
    font-family: var(--lasa-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(211, 18, 34, 0.4);
}
.btn-accent:hover { background: var(--lasa-accent-dark); color: #fff; }
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-family: var(--lasa-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}
.btn-link:hover { color: #ff4d5a; }

/* Frosted "Latest Results" card on the hero */
.result-card {
    background: rgba(10, 15, 44, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--lasa-radius);
    backdrop-filter: blur(8px);
    padding: 18px 20px;
    box-shadow: 0 20px 50px rgba(10, 15, 44, 0.45);
}
.result-card__head { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.result-card__head strong { font-family: var(--lasa-font-heading); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.04em; }
.result-card__head span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }
.result-card__game {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.85rem;
}
.result-card__game:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.result-card__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.result-card__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-card__team.is-home { justify-content: flex-end; text-align: right; }
.result-card__team .is-winner { color: #fff; font-weight: 600; }
.result-card__score { font-family: var(--lasa-font-heading); font-size: 1.4rem; color: #fff; white-space: nowrap; }
.result-card__score small { color: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------------------
   Page structure
   -------------------------------------------------------------------------- */
.site-container { max-width: var(--site-width); margin: 0 auto 24px; padding: 0 16px; }
.site-container > .page-card:first-of-type, .site-container > .home-grid, .site-container > .page-banner + * { margin-top: 8px; }


.page-card {
    background: var(--lasa-surface);
    border: 1px solid var(--lasa-border);
    border-radius: var(--lasa-radius);
    box-shadow: var(--lasa-shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}
.page-card-body { padding: 16px; }
.page-card-body > p:last-child { margin-bottom: 0; }

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--lasa-border);
    background: var(--lasa-surface);
    position: relative;
}
.section-header::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background: var(--lasa-accent);
}
.section-header__titles { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.section-header h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--lasa-text);
}
.section-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--lasa-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(23, 34, 92, 0.25);
}
.section-header__subtitle { color: var(--lasa-text-muted); font-size: 0.85rem; }
.section-header__link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--lasa-font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lasa-accent);
    text-decoration: none;
}
.section-header__link:hover { color: var(--lasa-accent-dark); }
.subheading {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--lasa-primary);
    margin: 20px 0 10px;
}

/* Home: main column + sidebar, like a league front page */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }

/* --------------------------------------------------------------------------
   Team images
   -------------------------------------------------------------------------- */
.team-logo { object-fit: contain; background: #fff; border-radius: 4px; }
.team-logo.xs { width: 40px; height: 24px; }
.team-logo.sm { width: 56px; height: 32px; }
.team-logo.wide { width: 128px; height: 64px; }
.team-logo.lg { width: 96px; height: 96px; }

/* --------------------------------------------------------------------------
   Score cards (Home latest scores / next games)
   -------------------------------------------------------------------------- */
.score-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.score-card {
    border: 1px solid var(--lasa-border);
    border-radius: var(--lasa-radius-sm);
    padding: 10px 12px;
    background: var(--lasa-surface);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.score-card:hover { box-shadow: var(--lasa-shadow-md); border-color: var(--lasa-primary-soft); }
.score-card__status {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--lasa-primary);
    margin-bottom: 6px;
}
.badge-final { color: var(--lasa-accent); font-family: var(--lasa-font-heading); letter-spacing: 0.06em; }
.score-card__team { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--lasa-text-muted); }
.score-card__team.is-winner { color: var(--lasa-text); font-weight: 600; }
.score-card__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-card__rhe { font-size: 0.72rem; color: var(--lasa-text-muted); font-weight: 400; }
.score-card__runs { font-family: var(--lasa-font-heading); font-size: 1.35rem; min-width: 28px; text-align: right; }

.bye-teams { display: flex; flex-wrap: wrap; gap: 12px; }
.bye-team { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--lasa-border); border-radius: var(--lasa-radius-sm); }

/* --------------------------------------------------------------------------
   Tables (standings, leaders, compare)
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.stats-table th {
    font-family: var(--lasa-font-heading);
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lasa-text-muted);
    background: var(--lasa-primary-light);
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
}
.stats-table td { padding: 8px 10px; border-bottom: 1px solid var(--lasa-border); white-space: nowrap; }
.stats-table tbody tr:hover td { background: #fafbff; }
.stats-table .num { text-align: right; }
.stats-table .strong { font-weight: 700; color: var(--lasa-primary); }
.stats-table .pos { color: var(--lasa-text-muted); width: 32px; }
.stats-table .positive { color: var(--lasa-success); }
.stats-table .negative { color: var(--lasa-accent); }
.team-cell { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.table-legend { margin: 0; padding: 10px 16px; font-size: 0.75rem; color: var(--lasa-text-muted); }

.leaders-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.leaders-table td, .leaders-table th { padding: 10px; border-bottom: 1px solid var(--lasa-border); text-align: left; }
.leaders-table th { color: var(--lasa-primary); font-weight: 600; width: 40%; }
.leaders-table .category {
    font-family: var(--lasa-font-heading);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--lasa-primary);
}
.leaders-table .amount { text-align: right; font-family: var(--lasa-font-heading); font-size: 1.15rem; color: var(--lasa-accent); }

.birthday-list { list-style: none; padding: 0; margin: 0; }
.birthday-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--lasa-border); }
.birthday-list li:last-child { border-bottom: 0; }
.birthday-date {
    font-family: var(--lasa-font-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    background: var(--lasa-primary);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    min-width: 48px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   DevExpress grid / tabs to match
   -------------------------------------------------------------------------- */
.page-card .dxbl-grid { border: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.dxbl-grid-table { font-size: 0.88rem; }
.dxbl-grid-table thead th, .dxbl-grid .dxbl-grid-header-row th {
    font-family: var(--lasa-font-heading);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    color: var(--lasa-text-muted);
    background: var(--lasa-primary-light);
}
.dxbl-grid-group-row td { font-weight: 600; color: var(--lasa-primary); }


/* Teams page */
.team-row { display: flex; align-items: center; gap: 14px; }
.team-row strong { font-family: var(--lasa-font-heading); font-size: 1.05rem; color: var(--lasa-primary); text-transform: uppercase; }

/* Playoff */
.matchup { border: 1px solid var(--lasa-border); border-radius: var(--lasa-radius-sm); padding: 10px; margin-bottom: 8px; }
.matchup-teams { display: flex; align-items: center; justify-content: space-around; gap: 12px; }
.matchup-teams strong { font-family: var(--lasa-font-heading); color: var(--lasa-accent); }
.bracket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bracket h5 { font-size: 0.85rem; text-transform: uppercase; color: var(--lasa-primary); margin: 12px 0 6px 0; }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compare label { font-family: var(--lasa-font-heading); text-transform: uppercase; color: var(--lasa-primary); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { margin-top: 40px; background: var(--lasa-primary-dark); color: rgba(255, 255, 255, 0.8); border-top: 4px solid var(--lasa-accent); }
.site-footer__inner {
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 28px 16px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px;
}
.site-footer h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #fff; text-transform: uppercase; font-size: 0.9rem; }
.site-footer p { margin: 0; font-size: 0.85rem; line-height: 1.6; }
.site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer__brand img { width: 64px; height: 64px; }
.site-footer__brand strong { font-family: var(--lasa-font-heading); font-size: 1.4rem; color: #fff; letter-spacing: 0.06em; }
.site-footer__weather { background: var(--lasa-primary-darker); padding: 10px 16px; display: flex; justify-content: center; }
.site-footer__copyright { text-align: center; font-size: 0.75rem; padding: 12px 16px; background: var(--lasa-primary-darker); border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Blazor's unhandled-error bar */
#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: #222; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* --------------------------------------------------------------------------
   Home dashboard: standings + leaders side by side, styled after
   LASA.DataWebsite's dashboard (position badges, big numbers, grouped leaders)
   -------------------------------------------------------------------------- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}
.dashboard-grid .page-card { margin-bottom: 0; }

.standings-board { width: 100%; border-collapse: collapse; }
.standings-board thead th {
    font-family: var(--lasa-font-heading);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lasa-text-muted);
    padding: 0 6px 8px;
    text-align: center;
}
.standings-board thead th.standings-board__team { text-align: left; }
.standings-board td { padding: 7px 6px; border-top: 1px solid var(--lasa-border); text-align: center; }
.standings-board tbody tr { transition: background 0.15s; }
.standings-board tbody tr:hover { background: var(--lasa-primary-light); }
.standings-board__pos { width: 40px; }
.standings-board__team { text-align: left !important; }
.standings-board__name { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }
.standings-board__amount {
    font-family: var(--lasa-font-heading);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--lasa-primary);
    width: 44px;
}
.standings-board__amount.is-points { color: var(--lasa-accent); }
.standings-board__legend { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 0.75rem; color: var(--lasa-text-muted); }
.standings-board__legend .position { width: 14px; height: 14px; margin: 0; }

.position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--lasa-font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--lasa-text-muted);
}
.playoff-position { background: var(--lasa-primary); color: #fff; box-shadow: 0 2px 6px rgba(23, 34, 92, 0.3); }
.first-place { background: linear-gradient(135deg, #ffd84d, #e6a800); color: #3a2a00; box-shadow: 0 2px 8px rgba(230, 168, 0, 0.45); }

.leaders-list { display: flex; flex-direction: column; gap: 14px; }
.leaders-group { display: flex; flex-direction: column; }
.leaders-group__title {
    font-family: var(--lasa-font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lasa-accent);
    text-align: right;
}
.leader-row { display: flex; align-items: center; gap: 12px; padding: 2px 0; border-bottom: 1px solid var(--lasa-border); }
.leaders-group .leader-row:last-child {
    border-bottom: 1px solid var(--lasa-border);
}
.leader-row__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lasa-primary-light);
    color: var(--lasa-primary);
    font-family: var(--lasa-font-heading);
    font-size: 0.85rem;
}
.leader-cell { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.leader-cell__name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-cell__team { font-size: 0.75rem; color: var(--lasa-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.leader-row__amount {
    font-family: var(--lasa-font-heading);
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--lasa-primary);
    min-width: 48px;
    text-align: right;
}

/* --------------------------------------------------------------------------
   Loading overlay (ILoadingService / LoadingHost), same as LASA.DataWebsite.
   It fades in after 150ms so loads served from cache don't flash it.
   -------------------------------------------------------------------------- */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    animation: lasa-fade-in 0.2s ease 0.15s both;
}
.loading-overlay__panel {
    background: var(--lasa-surface);
    border-radius: 14px;
    padding: 1.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    box-shadow: var(--lasa-shadow-lg);
    min-width: 180px;
}
.loading-spinner {
    width: 34px;
    height: 34px;
    border: 3.5px solid var(--lasa-accent-light);
    border-top-color: var(--lasa-accent);
    border-radius: 50%;
    animation: lasa-spin 0.75s linear infinite;
}
.loading-overlay__text { font-weight: 700; color: var(--lasa-text); font-size: 0.9rem; }
@keyframes lasa-spin { to { transform: rotate(360deg); } }
@keyframes lasa-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   Player / team links and the Players + Teams pages
   -------------------------------------------------------------------------- */
.entity-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(23, 34, 92, 0.35); transition: color 0.15s, border-color 0.15s; }
.entity-link:hover { color: var(--lasa-accent); border-bottom-color: var(--lasa-accent); }
.hero .entity-link, .ticker .entity-link, .result-card .entity-link { border-bottom-color: rgba(255, 255, 255, 0.3); }
.hero .entity-link:hover, .result-card .entity-link:hover { color: #ff4d5a; }
a.result-card__score { text-decoration: none; }
a.result-card__score:hover { color: #ff4d5a; }

.banner-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.banner-select select.player-select { min-width: 240px; }

.stats-table tfoot td {
    font-weight: 700;
    background: var(--lasa-primary-light);
    color: var(--lasa-primary);
    border-top: 2px solid var(--lasa-primary);
    border-bottom: 0;
}

.stat-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 78px;
    padding: 10px 12px;
    border-radius: var(--lasa-radius-sm);
    background: var(--lasa-primary-light);
}
.stat-tile span { font-family: var(--lasa-font-heading); font-size: 1.5rem; font-weight: 600; color: var(--lasa-primary); line-height: 1.1; }
.stat-tile small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lasa-text-muted); }
.stat-tile.is-pitching { background: var(--lasa-accent-light); }
.stat-tile.is-pitching span { color: var(--lasa-accent); }

.player-hero, .team-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-top: 4px solid var(--lasa-accent);
}
.player-hero__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lasa-primary), #2b3d99);
    color: #fff;
    font-family: var(--lasa-font-heading);
    font-size: 2rem;
    box-shadow: 0 6px 16px rgba(23, 34, 92, 0.3);
}
.player-hero__info, .team-hero__info { flex: 1; min-width: 220px; }
.player-hero h2, .team-hero h2 { margin: 0 0 6px; font-size: 1.9rem; text-transform: uppercase; }
.player-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--lasa-text-muted); font-size: 0.85rem; }
.player-hero__meta strong { color: var(--lasa-text); }
.player-hero__team { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; text-transform: uppercase; }
.status-pill { padding: 2px 10px; border-radius: 999px; background: var(--lasa-border); color: var(--lasa-text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.status-pill.is-active { background: #e3f4e9; color: var(--lasa-success); }

.team-hero__staff { display: flex; flex-wrap: wrap; gap: 24px; }
.team-hero__staff span { display: flex; flex-direction: column; }
.team-hero__staff small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lasa-text-muted); }
.team-hero__staff strong { font-size: 0.95rem; }

.team-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.team-picker__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: var(--lasa-radius-sm);
    background: var(--lasa-surface);
    border: 1px solid var(--lasa-border);
    color: var(--lasa-text);
    font-family: var(--lasa-font-heading);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    box-shadow: var(--lasa-shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.team-picker__item:hover { border-color: var(--lasa-primary-soft); box-shadow: var(--lasa-shadow-md); color: var(--lasa-primary); }
.team-picker__item.is-active { border-color: var(--lasa-accent); background: var(--lasa-accent-light); color: var(--lasa-accent); }

/* --------------------------------------------------------------------------
   Rules, Meetings, Absences and Waiting List
   -------------------------------------------------------------------------- */
.banner-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(360px, 100%);
    padding: 8px 14px;
    border-radius: var(--lasa-radius-sm);
    background: #fff;
    border-left: 4px solid var(--lasa-accent);
    color: var(--lasa-text-muted);
    box-shadow: var(--lasa-shadow-md);
}
.banner-search input { flex: 1; border: 0; outline: none; font-family: var(--lasa-font-body); font-size: 0.9rem; color: var(--lasa-text); background: transparent; }

/* Rich text from the admin editor (RichText.ToSafeHtml) */
.rich-text { line-height: 1.6; color: var(--lasa-text); overflow-wrap: anywhere; }
.rich-text p { margin: 0 0 0.25em; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text table { border-collapse: collapse; margin: 0.5em 0; }
.rich-text td, .rich-text th { border: 1px solid var(--lasa-border); padding: 4px 10px; }
.rich-text a { color: var(--lasa-accent); }

.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rule-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--lasa-border); scroll-margin-top: 90px; }
.rule-item:first-child { padding-top: 0; }
.rule-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rule-item__number { flex: 0 0 auto; width: 38px; height: 38px; font-size: 1.05rem; }
.rule-item__body { flex: 1; min-width: 0; }
.rule-item__date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--lasa-primary-light);
    color: var(--lasa-primary);
    font-size: 0.72rem;
    font-weight: 600;
}

.meeting-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.meeting-timeline::before { content: ""; position: absolute; left: 39px; top: 8px; bottom: 8px; width: 3px; background: var(--lasa-primary-soft); }
.meeting-timeline__item { display: flex; gap: 20px; align-items: flex-start; position: relative; }
.meeting-date {
    flex: 0 0 auto;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    border-radius: var(--lasa-radius);
    background: var(--lasa-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(23, 34, 92, 0.3);
    position: relative;
    z-index: 1;
}
.meeting-date__month { font-family: var(--lasa-font-heading); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; color: #ff8a93; }
.meeting-date__day { font-family: var(--lasa-font-heading); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.meeting-date__year { font-size: 0.75rem; opacity: 0.8; }
.meeting-card { flex: 1; min-width: 0; border-left: 4px solid var(--lasa-accent); }

.absence-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.absence-summary__text { flex: 1; min-width: 260px; }
.absence-summary__text p { margin: 0 0 6px; color: var(--lasa-text-muted); }

.absence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; align-items: start; }
.absence-grid .page-card { margin-bottom: 0; }
.absence-team__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--lasa-primary);
}
.absence-team__header h3 { margin: 0; flex: 1; font-size: 1.1rem; text-transform: uppercase; color: var(--lasa-primary); }
.absence-team__total {
    min-width: 30px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--lasa-primary);
    color: #fff;
    font-family: var(--lasa-font-heading);
    text-align: center;
}
.absence-list { list-style: none; margin: 0; padding: 4px 16px 12px; }
.absence-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lasa-border); }
.absence-row:last-child { border-bottom: 0; }
.absence-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lasa-primary-light);
    color: var(--lasa-primary);
    font-family: var(--lasa-font-heading);
    font-weight: 600;
}
.absence-count.is-warning { background: #fff3d6; color: #b7791f; }
.absence-count.is-danger { background: var(--lasa-accent); color: #fff; box-shadow: 0 2px 8px rgba(211, 18, 34, 0.4); }
.absence-row__body { flex: 1; min-width: 0; }
.absence-row__name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.date-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.date-chip { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: var(--lasa-bg); border: 1px solid var(--lasa-border); color: var(--lasa-text-muted); }

.waiting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.waiting-grid .page-card { margin-bottom: 0; }
.waiting-category__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(120deg, var(--lasa-primary-darker), var(--lasa-primary));
    color: #fff;
}
.waiting-category__header h3 { margin: 0; flex: 1; font-size: 1.15rem; text-transform: uppercase; }
.waiting-category__header .accent-word { color: #ff4d5a; }
.category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--lasa-accent);
    font-family: var(--lasa-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}
.waiting-category__count { font-size: 0.78rem; opacity: 0.8; white-space: nowrap; }
.waiting-table { width: 100%; border-collapse: collapse; }
.waiting-table th {
    font-family: var(--lasa-font-heading);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lasa-text-muted);
    background: var(--lasa-primary-light);
    padding: 6px 10px;
    text-align: left;
}
.waiting-table td { padding: 10px; border-bottom: 1px solid var(--lasa-border); vertical-align: top; }
.waiting-table tbody tr:last-child td { border-bottom: 0; }
.waiting-table tbody tr:hover td { background: #fafbff; }
.waiting-table tr.is-injured td { background: #fff8f8; }
.waiting-table__order { width: 44px; text-align: center !important; }
.waiting-table__pos { width: 56px; text-align: center !important; }
.injured-position { background: var(--lasa-accent); color: #fff; box-shadow: 0 2px 6px rgba(211, 18, 34, 0.35); }
.waiting-player { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.waiting-player__name { font-weight: 600; font-size: 0.9rem; text-transform: uppercase; }
.waiting-player__nick { color: var(--lasa-text-muted); font-size: 0.82rem; }
.waiting-player__age {
    padding: 1px 8px; border-radius: 999px; background: var(--lasa-primary-light); color: var(--lasa-primary);
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.waiting-player__notes {
    margin: 6px 0 0;
    padding: 6px 10px;
    border-left: 3px solid var(--lasa-primary-soft);
    background: var(--lasa-bg);
    border-radius: 0 4px 4px 0;
    font-size: 0.8rem;
    color: var(--lasa-text-muted);
    font-style: italic;
}
.status-pill.is-injured { background: var(--lasa-accent-light); color: var(--lasa-accent); }
.position-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--lasa-primary-light);
    color: var(--lasa-primary);
    font-family: var(--lasa-font-heading);
    font-size: 0.78rem;
}
@media (max-width: 560px) {
    .meeting-timeline::before { display: none; }
    .meeting-timeline__item { flex-direction: column; gap: 8px; }
    .meeting-date { flex-direction: row; width: auto; gap: 8px; padding: 6px 12px; }
    .absence-grid, .waiting-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Scores: date strip, game cards with line score, box scores
   -------------------------------------------------------------------------- */
.date-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 18px;
    padding: 8px;
    background: var(--lasa-surface);
    border: 1px solid var(--lasa-border);
    border-radius: var(--lasa-radius);
    box-shadow: var(--lasa-shadow-sm);
}
.date-strip__days { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: thin; padding-bottom: 2px; }
.date-strip__arrow {
    flex: 0 0 auto;
    width: 34px;
    height: 44px;
    border: 0;
    border-radius: var(--lasa-radius-sm);
    background: var(--lasa-primary);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}
.date-strip__arrow:disabled { background: var(--lasa-border); cursor: default; }
.date-pill {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 66px;
    padding: 5px 10px;
    border: 1px solid var(--lasa-border);
    border-radius: var(--lasa-radius-sm);
    background: var(--lasa-surface);
    color: var(--lasa-text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.date-pill:hover { border-color: var(--lasa-primary-soft); background: var(--lasa-primary-light); }
.date-pill.is-active { background: var(--lasa-accent); border-color: var(--lasa-accent); color: #fff; box-shadow: 0 4px 10px rgba(211, 18, 34, 0.35); }
.date-pill__weekday { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.date-pill__day { font-family: var(--lasa-font-heading); font-size: 0.95rem; text-transform: uppercase; white-space: nowrap; }

.scoreboard-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.scoreboard-heading h2 { margin: 0; font-size: 1.5rem; text-transform: uppercase; }
.btn-outline {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--lasa-primary);
    border-radius: var(--lasa-radius-sm);
    background: transparent;
    color: var(--lasa-primary);
    font-family: var(--lasa-font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.btn-outline:hover { background: var(--lasa-primary); color: #fff; }

.scoreboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.scoreboard .page-card { margin-bottom: 0; }
.game-card { border-top: 4px solid var(--lasa-primary); transition: box-shadow 0.15s; }
.game-card:hover { box-shadow: var(--lasa-shadow-md); }
.game-card.is-open { grid-column: 1 / -1; border-top-color: var(--lasa-accent); }
.game-card__summary { padding: 12px 16px 0; }
.game-card.is-open .game-card__summary { max-width: 520px; }
.game-card__status { display: flex; align-items: center; gap: 14px; font-size: 0.75rem; color: var(--lasa-text-muted); text-transform: uppercase; margin-bottom: 6px; }
.game-card__status span { display: inline-flex; align-items: center; gap: 4px; }
.linescore { width: 100%; border-collapse: collapse; }
.linescore th { font-family: var(--lasa-font-heading); font-weight: 500; font-size: 0.72rem; color: var(--lasa-text-muted); padding: 0 8px 4px; }
.linescore td { padding: 7px 8px; border-top: 1px solid var(--lasa-border); color: var(--lasa-text-muted); }
.linescore .num { text-align: center; width: 44px; }
.linescore__team { display: flex; align-items: center; gap: 10px; }
.linescore__team > span { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; text-transform: uppercase; }
.linescore__team small { font-size: 0.65rem; font-weight: 400; color: var(--lasa-text-muted); letter-spacing: 0.05em; }
.linescore__runs { font-family: var(--lasa-font-heading); font-size: 1.5rem; }
.linescore tr.is-winner td { color: var(--lasa-text); }
.linescore tr.is-winner .linescore__runs { color: var(--lasa-accent); font-weight: 700; }
.game-card__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border: 0;
    border-top: 1px solid var(--lasa-border);
    background: transparent;
    color: var(--lasa-primary);
    font-family: var(--lasa-font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}
.game-card__toggle:hover { color: var(--lasa-accent); background: var(--lasa-primary-light); }
.game-card__chevron { font-size: 0.65rem; }
.game-card__box { border-top: 1px solid var(--lasa-border); background: #fbfbfe; }

.box-score { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px; }
.box-score__pitching, .box-score-notes { grid-column: 1 / -1; }
.box-score__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.95rem; text-transform: uppercase; color: var(--lasa-primary); }
.box-score-notes { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 8px 12px; background: var(--lasa-primary-light); border-radius: var(--lasa-radius-sm); font-size: 0.85rem; }
.box-table { background: var(--lasa-surface); font-size: 0.82rem; }
.box-table td, .box-table th { padding: 6px 8px; }
.box-table__player { display: flex; align-items: center; gap: 8px; }
/* Phones: tighter cells and a wrapping batter name, so every stat column (AB, R, H first) fits without scrolling. */
@media (max-width: 600px) {
    .box-score { gap: 12px; padding: 10px 6px; }
    .box-table { font-size: 0.72rem; }
    .box-table td, .box-table th { padding: 5px 3px; letter-spacing: 0; }
    .box-table th { font-size: 0.66rem; }
    .box-table td:first-child, .box-table th:first-child { padding-left: 4px; }
    .box-table td:not(.num) { white-space: normal; overflow-wrap: anywhere; }
    .box-table__player { gap: 4px; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
    .box-table .lineup-number { flex: none; width: 16px; height: 16px; font-size: 0.6rem; }
}
.lineup-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lasa-primary-light);
    color: var(--lasa-primary);
    font-size: 0.68rem;
    font-weight: 700;
}
.decision { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 4px; font-family: var(--lasa-font-heading); font-size: 0.78rem; text-align: center; color: #fff; }
.decision.is-win { background: var(--lasa-success); }
.decision.is-loss { background: var(--lasa-accent); }

/* --------------------------------------------------------------------------
   Stats: tabs, filters and the sortable leaderboard tables
   -------------------------------------------------------------------------- */
.stat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.stat-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--lasa-border);
    border-radius: 999px;
    background: var(--lasa-surface);
    color: var(--lasa-primary);
    font-family: var(--lasa-font-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: var(--lasa-shadow-sm);
    transition: background 0.15s, color 0.15s;
}
.stat-tab:hover { border-color: var(--lasa-primary-soft); }
.stat-tab.is-active { background: var(--lasa-primary); border-color: var(--lasa-primary); color: #fff; box-shadow: 0 4px 12px rgba(23, 34, 92, 0.3); }

.stats-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lasa-border); background: #fbfbfe; }
.stats-toolbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    padding: 7px 12px;
    border: 1px solid var(--lasa-border);
    border-radius: var(--lasa-radius-sm);
    background: #fff;
    color: var(--lasa-text-muted);
}
.stats-toolbar__search input { flex: 1; border: 0; outline: none; font-family: var(--lasa-font-body); font-size: 0.85rem; background: transparent; }
.stats-toolbar__select { display: flex; align-items: center; gap: 8px; font-family: var(--lasa-font-heading); font-size: 0.8rem; text-transform: uppercase; color: var(--lasa-primary); }
.stats-toolbar__select select { padding: 7px 10px; border: 1px solid var(--lasa-border); border-radius: var(--lasa-radius-sm); font-family: var(--lasa-font-body); font-size: 0.85rem; text-transform: none; }
.stats-toolbar__check { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }
.stats-toolbar__check input { width: 17px; height: 17px; accent-color: var(--lasa-accent); }
.stats-toolbar__count { margin-left: auto; font-size: 0.78rem; color: var(--lasa-text-muted); }

.leaderboard th.leaderboard__sortable { cursor: pointer; user-select: none; transition: color 0.15s; }
.leaderboard th.leaderboard__sortable:hover { color: var(--lasa-primary); }
.leaderboard th.is-sorted { color: var(--lasa-accent); background: var(--lasa-accent-light); }
.leaderboard td.is-sorted { background: #fff7f8; font-weight: 700; color: var(--lasa-accent); }
.leaderboard tbody tr:hover td.is-sorted { background: #ffeff1; }
.sort-arrow { font-size: 0.6rem; margin-left: 3px; }
.leaderboard__rank { width: 44px; }
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--lasa-font-heading);
    font-size: 0.8rem;
    color: var(--lasa-text-muted);
}
.rank-badge.is-top1 { background: linear-gradient(135deg, #ffd84d, #e6a800); color: #3a2a00; }
.rank-badge.is-top2 { background: linear-gradient(135deg, #e8ebf2, #b8bfcc); color: #2c3242; }
.rank-badge.is-top3 { background: linear-gradient(135deg, #f0c29a, #c9834a); color: #3d2410; }
.player-cell { display: flex; align-items: center; gap: 10px; }
.player-cell__text { display: flex; flex-direction: column; line-height: 1.25; }
.player-cell__text > a { font-weight: 600; }
.player-cell__text small { font-size: 0.7rem; text-transform: uppercase; color: var(--lasa-text-muted); letter-spacing: 0.03em; }

/* --------------------------------------------------------------------------
   Home: birthdays, bye teams, MVP race
   -------------------------------------------------------------------------- */
.birthday-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.birthday-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--lasa-border);
    border-radius: var(--lasa-radius-sm);
    background: linear-gradient(135deg, #fff, var(--lasa-primary-light));
}
.birthday-card.is-today { border-color: var(--lasa-accent); background: linear-gradient(135deg, #fff, var(--lasa-accent-light)); }
.birthday-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    padding: 4px 0;
    border-radius: 6px;
    background: var(--lasa-primary);
    color: #fff;
    line-height: 1.1;
}
.birthday-card__date span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: #ff8a93; }
.birthday-card__date strong { font-family: var(--lasa-font-heading); font-size: 1.3rem; }
.birthday-card__name { display: flex; flex-direction: column; flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; text-transform: uppercase; }
.birthday-card__name small { font-weight: 400; color: var(--lasa-text-muted); text-transform: none; }
.birthday-card__icon { color: var(--lasa-accent); }

.bye-teams { align-items: center; margin-top: 16px; }
.bye-teams__label {
    font-family: var(--lasa-font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--lasa-primary);
    padding: 4px 10px;
    border-radius: 4px;
}

.mvp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mvp-grid .subheading { display: flex; align-items: center; gap: 6px; margin-top: 0; }
.mvp-leader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: var(--lasa-radius);
    background: linear-gradient(120deg, var(--lasa-primary-darker), var(--lasa-primary) 70%, #2b3d99);
    color: #fff;
    box-shadow: var(--lasa-shadow-md);
}
.mvp-leader__crown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd84d, #e6a800);
    color: #3a2a00;
    flex: 0 0 auto;
}
.mvp-leader__info { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.mvp-leader__info small { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #ff8a93; }
.mvp-leader__info strong { font-family: var(--lasa-font-heading); font-size: 1.25rem; text-transform: uppercase; }
.mvp-leader__info span { font-size: 0.75rem; text-transform: uppercase; opacity: 0.8; }
.mvp-leader .entity-link { border-bottom-color: rgba(255, 255, 255, 0.3); }
.mvp-leader .entity-link:hover { color: #ff8a93; }
.mvp-leader__score { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mvp-leader__score span { font-family: var(--lasa-font-heading); font-size: 2.2rem; font-weight: 700; }
.mvp-leader__score small { font-size: 0.7rem; text-transform: uppercase; opacity: 0.75; }
.mvp-list { list-style: none; margin: 0; padding: 0; }
.mvp-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--lasa-border); }
.mvp-row:last-child { border-bottom: 0; }
.mvp-row__body { flex: 1; min-width: 0; }
.mvp-row__name { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 0.88rem; text-transform: uppercase; }
.mvp-row__name small { font-size: 0.68rem; font-weight: 400; color: var(--lasa-text-muted); }
.mvp-bar { height: 6px; margin-top: 4px; border-radius: 3px; background: var(--lasa-primary-light); overflow: hidden; }
.mvp-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--lasa-primary), var(--lasa-accent)); }
.mvp-row__score { font-family: var(--lasa-font-heading); font-size: 1.2rem; font-weight: 600; color: var(--lasa-primary); min-width: 40px; text-align: right; }

/* --------------------------------------------------------------------------
   Schedule: game days with both teams' logos
   -------------------------------------------------------------------------- */
.schedule-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 18px; }
.schedule-filters .stat-tabs { margin: 0; }
.schedule-empty__button { margin: 12px 0 0; }
.schedule-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.schedule-day { display: flex; gap: 20px; align-items: flex-start; }
.schedule-day.is-next .meeting-date { background: var(--lasa-accent); box-shadow: 0 4px 12px rgba(211, 18, 34, 0.35); }
.schedule-day.is-next .meeting-date__month { color: #fff; }
.schedule-card { flex: 1; min-width: 0; margin-bottom: 0; }
.schedule-day.is-next .schedule-card { border-color: var(--lasa-accent); box-shadow: 0 6px 20px rgba(211, 18, 34, 0.12); }
.schedule-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 2px solid var(--lasa-primary); }
.schedule-card__header h3 { margin: 0; flex: 1; font-size: 1.05rem; text-transform: uppercase; color: var(--lasa-primary); }
.schedule-card__header .text-muted { font-size: 0.78rem; }
a.status-pill { text-decoration: none; }
.status-pill.is-next { background: var(--lasa-accent); color: #fff; }
.schedule-games { list-style: none; margin: 0; padding: 0; }
.schedule-game {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 90px minmax(0, 1fr) 170px;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--lasa-border);
}
.schedule-game:last-child { border-bottom: 0; }
.schedule-game:hover { background: #fafbff; }
.schedule-game__time, .schedule-game__field { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--lasa-text-muted); text-transform: uppercase; }
.schedule-game__field { justify-content: flex-end; }
.schedule-game__team { display: flex; align-items: center; gap: 10px; font-weight: 600; text-transform: uppercase; font-size: 0.88rem; color: var(--lasa-text-muted); min-width: 0; }
.schedule-game__team.is-visitor { justify-content: flex-end; text-align: right; }
.schedule-game__team.is-winner { color: var(--lasa-text); }
.schedule-game__center { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.schedule-game__center strong { font-family: var(--lasa-font-heading); font-size: 1.15rem; color: var(--lasa-accent); white-space: nowrap; }
.schedule-game__center small { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lasa-text-muted); }
@media (max-width: 900px) {
    .mvp-grid { grid-template-columns: 1fr; }
    .schedule-game { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); }
    .schedule-game__time, .schedule-game__field { grid-column: span 3; justify-content: center; }
    .schedule-game__time { order: -1; }
}
@media (max-width: 560px) {
    .schedule-day { flex-direction: column; gap: 8px; }
    .schedule-day .meeting-date { flex-direction: row; width: auto; gap: 8px; padding: 6px 12px; }
    /* Phones: the uniform above the team name, so the whole name fits (wrapping if needed) instead of being cut off. */
    .schedule-game { gap: 8px; padding: 10px 12px; }
    .schedule-game__team, .schedule-game__team.is-visitor { flex-direction: column; justify-content: flex-start; gap: 4px; text-align: center; font-size: 0.8rem; line-height: 1.2; }
    .schedule-game__team.is-visitor .team-logo { order: -1; }
    .schedule-game__team .entity-link { max-width: 100%; overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Standings page: highlights, full table (desktop) and team cards (phones)
   -------------------------------------------------------------------------- */
.standings-highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 18px; }
.highlight-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--lasa-surface);
    border: 1px solid var(--lasa-border);
    border-top: 3px solid var(--lasa-primary);
    border-radius: var(--lasa-radius-sm);
    box-shadow: var(--lasa-shadow-sm);
    min-width: 0;
}
.highlight-card:first-child { border-top-color: #e6a800; }
.highlight-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--lasa-primary-light);
    color: var(--lasa-primary);
}
.highlight-card:first-child .highlight-card__icon { background: linear-gradient(135deg, #ffd84d, #e6a800); color: #3a2a00; }
.highlight-card__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.highlight-card__text small { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lasa-text-muted); }
.highlight-card__text strong { font-size: 0.85rem; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.highlight-card__value { font-family: var(--lasa-font-heading); font-size: 1rem; color: var(--lasa-accent); white-space: nowrap; }

.standings-full td { padding: 10px; vertical-align: middle; }
.standings-full th { padding: 10px; }
.standings-full .team-col { min-width: 220px; }
.standings-full__name { font-weight: 600; text-transform: uppercase; font-size: 0.9rem; }
.standings-full__points { font-family: var(--lasa-font-heading); font-size: 1.25rem; font-weight: 700; color: var(--lasa-primary); }
.standings-full tr.is-leader td { background: #fffaea; }
.standings-full tr.is-leader .standings-full__points { color: var(--lasa-accent); }
.standings-full tr.is-playoff td:first-child, .standings-full tr.is-leader td:first-child { box-shadow: inset 4px 0 0 var(--lasa-primary); }
.standings-full tr.is-leader td:first-child { box-shadow: inset 4px 0 0 #e6a800; }
.standings-full tbody tr:not(.playoff-line):hover td { background: var(--lasa-primary-light); }
.standings-full .position { margin: 0 auto; }
.non-playoff-position { background: var(--lasa-bg); border: 1px solid var(--lasa-border); }

.playoff-line td { padding: 0 !important; border-bottom: 0 !important; background: transparent !important; }
.playoff-line span, li.playoff-line span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--lasa-font-heading);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lasa-accent);
    padding: 4px 10px;
}
.playoff-line span::before, .playoff-line span::after { content: ""; flex: 1; border-top: 2px dashed var(--lasa-accent); opacity: 0.5; }

.diff-pill { display: inline-block; min-width: 42px; padding: 2px 8px; border-radius: 999px; background: var(--lasa-bg); color: var(--lasa-text-muted); font-weight: 600; font-size: 0.8rem; text-align: center; }
.diff-pill.is-positive { background: #e3f4e9; color: var(--lasa-success); }
.diff-pill.is-negative { background: var(--lasa-accent-light); color: var(--lasa-accent); }

.form-dots { display: inline-flex; align-items: center; gap: 3px; }
.form-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lasa-border); }
.form-dot.is-win { background: var(--lasa-success); }
.form-dot.is-loss { background: var(--lasa-accent); }
.form-dots__text { margin-left: 5px; font-size: 0.78rem; color: var(--lasa-text-muted); }

.legend-swatch { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 8px; border-radius: 2px; vertical-align: middle; }
.legend-swatch:first-child { margin-left: 0; }
.legend-swatch.is-first { background: #e6a800; }
.legend-swatch.is-playoff { background: var(--lasa-primary); }

/* Phones: one card per team instead of the wide table */
.standings-cards { display: none; list-style: none; margin: 0; padding: 8px 12px; }
.standings-card { padding: 12px 4px; border-bottom: 1px solid var(--lasa-border); }
.standings-card:last-child { border-bottom: 0; }
.standings-card.is-leader { background: linear-gradient(90deg, #fff8dc, transparent); border-radius: var(--lasa-radius-sm); padding-left: 8px; }
.standings-card__head { display: flex; align-items: center; gap: 10px; }
.standings-card__name { display: flex; flex-direction: column; flex: 1; min-width: 0; font-weight: 600; text-transform: uppercase; line-height: 1.2; }
.standings-card__name small { font-weight: 400; font-size: 0.72rem; color: var(--lasa-text-muted); text-transform: none; }
.standings-card__points { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.standings-card__points strong { font-family: var(--lasa-font-heading); font-size: 1.6rem; color: var(--lasa-primary); }
.standings-card.is-leader .standings-card__points strong { color: var(--lasa-accent); }
.standings-card__points small { font-size: 0.6rem; color: var(--lasa-text-muted); letter-spacing: 0.08em; }
.standings-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin: 10px 0 0 40px; }
.standings-card__stats div { display: flex; flex-direction: column; gap: 2px; }
.standings-card__stats dt { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lasa-text-muted); }
.standings-card__stats dd { margin: 0; font-size: 0.85rem; font-weight: 600; }

@media (max-width: 1000px) {
    .standings-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .standings-desktop { display: none; }
    .standings-cards { display: block; }
}
@media (max-width: 420px) {
    .standings-highlights { grid-template-columns: 1fr; }
    .standings-card__stats { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1320px) {
    .home-grid { grid-template-columns: 1fr; }
    .nav-toggle { display: block; order: 3; }
    .season-select { margin-left: auto; }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--lasa-primary-dark);
        border-top: 3px solid var(--lasa-accent);
        box-shadow: var(--lasa-shadow-md);
        padding: 8px 0 8px 0;
    }
    .main-nav.is-open { display: flex; }
    .main-nav__link { padding: 12px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .main-nav__icon { display: inline; }
    .main-nav__link.active { background: rgba(255, 255, 255, 0.05); }
}
@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; padding-top: 64px; }
    .box-score, .bracket, .compare { grid-template-columns: 1fr; }
    .scoreboard { grid-template-columns: 1fr; }
    .stats-toolbar__count { margin-left: 0; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
    .topbar__hours { display: none; }
}
@media (max-width: 560px) {
    .topbar__right { display: none; }
    .brand__name { display: none; }
    .season-select select { max-width: 150px; }
    .site-footer__inner { grid-template-columns: 1fr; }
    /* One column on phones: at 25% the crest would hang off the left edge, so centre it. */
    .hero { --hero-crest-size: min(72vw, 300px); --hero-crest-x: 50vw; }
}

/* ==========================================================================
   Sponsors carousel (SponsorCarousel, above the footer on every page)
   ========================================================================== */
.sponsors { margin-top: 40px; background: var(--lasa-surface); border-top: 1px solid var(--lasa-border); padding: 28px 0 32px; }
.sponsors + .site-footer { margin-top: 0; }
.sponsors__inner { max-width: var(--site-width); margin: 0 auto; padding: 0 16px; }
.sponsors__all {
    display: flex; align-items: center; gap: 4px; width: fit-content; margin: -10px auto 18px;
    color: var(--lasa-accent); font-size: 0.8rem; font-weight: 600; text-decoration: none;
}
.sponsors__all:hover { text-decoration: underline; }
.sponsors__title {
    margin: 0 0 18px; text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
    font-family: var(--lasa-font-heading); font-size: 1.5rem; color: var(--lasa-primary);
}
.sponsors__title .accent-word { color: var(--lasa-accent); }
.sponsors__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.sponsors__track {
    display: flex; width: max-content; margin: 0; padding: 4px 0; list-style: none;
    animation: sponsors-scroll var(--sponsors-duration, 30s) linear infinite;
}
.sponsors__viewport:hover .sponsors__track,
.sponsors__viewport:focus-within .sponsors__track { animation-play-state: paused; }
/* Right padding instead of gap, so both halves of the track are exactly the same width. */
.sponsors__item { flex: none; padding-right: 20px; }
.sponsors__item a {
    display: flex; align-items: center; justify-content: center; width: 180px; height: 96px; padding: 12px 16px;
    background: var(--lasa-surface); border: 1px solid var(--lasa-border); border-radius: var(--lasa-radius);
    box-shadow: var(--lasa-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sponsors__item a:hover,
.sponsors__item a:focus-visible { transform: translateY(-3px); box-shadow: var(--lasa-shadow-md); border-color: var(--lasa-primary-soft); }
.sponsors__item a:focus-visible { outline: 2px solid var(--lasa-accent); outline-offset: 2px; }
.sponsors__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

@keyframes sponsors-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .sponsors__viewport { -webkit-mask-image: none; mask-image: none; }
    .sponsors__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 16px; }
    .sponsors__item--copy { display: none; }
}
@media (max-width: 560px) {
    .sponsors__item { padding-right: 12px; }
    .sponsors__item a { width: 140px; height: 76px; padding: 10px 12px; }
}

/* ==========================================================================
   League message popup (MessagePopup, Home page)
   ========================================================================== */
.message-popup {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(10, 15, 44, 0.62); backdrop-filter: blur(3px);
    animation: message-popup-fade 0.2s ease-out;
}
.message-popup__dialog {
    display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(86vh, 760px);
    background: var(--lasa-surface); border-radius: var(--lasa-radius); box-shadow: var(--lasa-shadow-lg);
    overflow: hidden; animation: message-popup-rise 0.25s ease-out;
}
.message-popup__head {
    display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 20px;
    background: linear-gradient(120deg, var(--lasa-primary-darker) 0%, var(--lasa-primary) 70%, #24338a 100%);
    border-bottom: 4px solid var(--lasa-accent); color: #fff;
}
.message-popup__head h2 {
    flex: 1; margin: 0; font-family: var(--lasa-font-heading); font-size: 1.35rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.message-popup__head .accent-word { color: #ff4d5a; }
.message-popup__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 50%; background: var(--lasa-accent); color: #fff;
}
.message-popup__close {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.1); color: #fff; transition: background 0.15s ease;
}
.message-popup__close:hover { background: rgba(255, 255, 255, 0.22); }
.message-popup__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.message-popup__body { overflow-y: auto; padding: 20px 22px; }
.message-popup__item + .message-popup__item { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--lasa-border); }
.message-popup__until {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 3px 10px;
    border-radius: 999px; background: var(--lasa-primary-light); color: var(--lasa-primary);
    font-size: 0.78rem; font-weight: 600;
}
.message-popup__foot { display: flex; justify-content: flex-end; padding: 12px 22px 18px; border-top: 1px solid var(--lasa-border); }
.message-popup__foot .btn-accent { border: 0; cursor: pointer; }
.message-popup__foot .btn-accent:focus-visible { outline: 2px solid var(--lasa-primary); outline-offset: 2px; }

@keyframes message-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes message-popup-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .message-popup, .message-popup__dialog { animation: none; }
}
@media (max-width: 560px) {
    .message-popup__head h2 { font-size: 1.1rem; }
    .message-popup__body { padding: 16px; }
}

/* Hero "League Message" button (reopens MessagePopup): outlined white, same size as .btn-accent, with a pulsing
   crimson dot to say there's something to read. */
.btn-ghost {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--lasa-radius-sm);
    background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer;
    font-family: var(--lasa-font-heading); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.btn-ghost:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn-ghost::after {
    content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px;
    border-radius: 50%; background: #ff4d5a; box-shadow: 0 0 0 0 rgba(255, 77, 90, 0.7);
    animation: btn-ghost-pulse 1.8s ease-out infinite;
}
@keyframes btn-ghost-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 90, 0.7); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(255, 77, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-ghost::after { animation: none; }
}
/* The same outlined button as a plain link (Hall of Fame, Login): no "new message" dot. */
.btn-ghost--plain { text-decoration: none; }
.btn-ghost--plain:hover { color: #fff; }
.btn-ghost--plain::after { content: none; }

/* ==========================================================================
   Records page (Records.razor + RecordList)
   ========================================================================== */
.records-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; }
.records-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.records-col { min-width: 0; }
.records-col__title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding-bottom: 8px;
    font-family: var(--lasa-font-heading); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--lasa-primary); border-bottom: 2px solid var(--lasa-primary-light);
}
.records-col__title.is-negative { color: var(--lasa-accent-dark); border-bottom-color: var(--lasa-accent-light); }
.record-list + .records-col__title { margin-top: 28px; }

.record-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--lasa-border); }
.record-row:last-child { border-bottom: 0; }
.record-row__main { flex: 1; min-width: 0; }
.record-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: 0.9rem; color: var(--lasa-text); }
.record-row__qualifier {
    padding: 1px 8px; border-radius: 999px; background: var(--lasa-bg); border: 1px solid var(--lasa-border);
    color: var(--lasa-text-muted); font-size: 0.7rem; font-weight: 500;
}
.record-row__value {
    flex: none; min-width: 58px; padding: 6px 10px; border-radius: var(--lasa-radius-sm); text-align: center;
    font-family: var(--lasa-font-heading); font-size: 1.45rem; line-height: 1.1;
    background: var(--lasa-primary-light); color: var(--lasa-primary);
}
.record-row.is-negative .record-row__value { background: var(--lasa-accent-light); color: var(--lasa-accent-dark); }
.record-row__empty { margin-top: 4px; font-size: 0.8rem; font-style: italic; color: var(--lasa-text-muted); }

.record-holders { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.record-holder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.85rem; }
.record-holder__who { font-weight: 600; }
.record-holder__context { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; color: var(--lasa-text-muted); font-size: 0.8rem; }
.record-holder__season {
    padding: 0 7px; border-radius: 999px; background: var(--lasa-bg); color: var(--lasa-text-muted);
    font-size: 0.72rem; white-space: nowrap;
}
.record-row__more {
    margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--lasa-accent); font-size: 0.78rem; font-weight: 600;
}
.record-row__more:hover { text-decoration: underline; }
.record-row__more:focus-visible { outline: 2px solid var(--lasa-accent); outline-offset: 2px; }

@media (max-width: 1100px) {
    .records-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .records-grid, .records-grid--3 { grid-template-columns: 1fr; }
    .record-row__value { font-size: 1.25rem; min-width: 50px; }
}

/* ==========================================================================
   Sponsors page (Sponsor.razor): thank-you intro, then one card per sponsor
   ========================================================================== */
.sponsors-intro {
    display: flex; align-items: center; gap: 20px; margin-bottom: 28px; padding: 24px 28px;
    background: var(--lasa-surface); border: 1px solid var(--lasa-border); border-left: 5px solid var(--lasa-accent);
    border-radius: var(--lasa-radius); box-shadow: var(--lasa-shadow-sm);
}
.sponsors-intro__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 58px; height: 58px; border-radius: 50%; background: var(--lasa-primary); color: #fff;
    box-shadow: 0 0 0 6px var(--lasa-primary-light);
}
.sponsors-intro h2 {
    margin: 0 0 6px; font-family: var(--lasa-font-heading); font-size: 1.5rem;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--lasa-primary);
}
.sponsors-intro h2 .accent-word { color: var(--lasa-accent); }
.sponsors-intro p { margin: 0; max-width: 720px; color: var(--lasa-text-muted); line-height: 1.6; }
.sponsors-intro__count {
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; margin-left: auto;
    min-width: 110px; padding: 12px 18px; border-radius: var(--lasa-radius);
    background: linear-gradient(135deg, var(--lasa-primary-darker), var(--lasa-primary)); color: #fff;
}
.sponsors-intro__count strong { font-family: var(--lasa-font-heading); font-size: 2.2rem; line-height: 1; }
.sponsors-intro__count span { margin-top: 4px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }

/* auto-fit + a max width + centring: one or two sponsors sit in the middle instead of stretching or hugging the left. */
.sponsor-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 390px)); justify-content: center; gap: 26px;
}
.sponsor-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--lasa-surface); border: 1px solid var(--lasa-border); border-radius: 14px;
    box-shadow: var(--lasa-shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sponsor-card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 5px; z-index: 1;
    background: linear-gradient(90deg, var(--lasa-primary) 0%, var(--lasa-primary) 45%, var(--lasa-accent) 100%);
}
.sponsor-card:hover, .sponsor-card:focus-within { transform: translateY(-6px); box-shadow: var(--lasa-shadow-md); }

/* The logo's "stage": a soft white spotlight over the site's faint diagonal lines. */
.sponsor-card__stage {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: 34px 38px;
    background:
        radial-gradient(ellipse at 50% 45%, #fff 0%, rgba(255, 255, 255, 0.92) 45%, rgba(255, 255, 255, 0) 80%),
        repeating-linear-gradient(135deg, rgba(23, 34, 92, 0.05) 0 1px, transparent 1px 12px),
        var(--lasa-bg);
    border-bottom: 1px solid var(--lasa-border);
}
.sponsor-card__stage img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(16, 24, 40, 0.12)); transition: transform 0.35s ease;
}
.sponsor-card:hover .sponsor-card__stage img { transform: scale(1.06); }
.sponsor-card__stage:focus-visible { outline: 3px solid var(--lasa-accent); outline-offset: -3px; }

.sponsor-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; }
.sponsor-card__description { flex: 1; margin: 0 0 18px; color: var(--lasa-text); line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.sponsor-card__footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 14px; border-top: 1px dashed var(--lasa-border);
}
.sponsor-card__domain {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    color: var(--lasa-text-muted); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sponsor-card__domain .icon { flex: none; color: var(--lasa-primary); }
.sponsor-card__visit {
    display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 16px;
    border-radius: var(--lasa-radius-sm); background: var(--lasa-accent); color: #fff; text-decoration: none;
    font-family: var(--lasa-font-heading); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(211, 18, 34, 0.3); transition: background 0.15s ease;
}
.sponsor-card__visit:hover { background: var(--lasa-accent-dark); color: #fff; }
.sponsor-card__visit:focus-visible { outline: 2px solid var(--lasa-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .sponsor-card, .sponsor-card__stage img { transition: none; }
    .sponsor-card:hover, .sponsor-card:focus-within { transform: none; }
    .sponsor-card:hover .sponsor-card__stage img { transform: none; }
}
@media (max-width: 640px) {
    .sponsors-intro { flex-wrap: wrap; padding: 20px; }
    .sponsors-intro__count { flex-direction: row; gap: 8px; margin-left: 0; width: 100%; }
    .sponsors-intro__count strong { font-size: 1.6rem; }
    .sponsor-grid { grid-template-columns: 1fr; }
}
/* Sponsors page fixes: a fixed-height logo stage (a flex item's content size would override aspect-ratio), long
   descriptions clamped to 6 lines behind "Read more", and full-width columns once there are 3+ sponsors. */
.sponsor-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sponsor-grid--few { grid-template-columns: repeat(auto-fit, minmax(290px, 400px)); }
.sponsor-card__stage { aspect-ratio: auto; height: 210px; }
.sponsor-card__description.is-clamped {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.sponsor-card__description.is-clamped, .sponsor-card__description:has(+ .sponsor-card__more) { flex: none; margin-bottom: 8px; }
.sponsor-card__more {
    align-self: flex-start; margin: 0 0 16px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--lasa-accent); font-size: 0.82rem; font-weight: 600;
}
.sponsor-card__more:hover { text-decoration: underline; }
.sponsor-card__more:focus-visible { outline: 2px solid var(--lasa-accent); outline-offset: 2px; }
/* Keeps the footer row at the bottom of every card in a row, whatever the description length. */
.sponsor-card__footer { margin-top: auto; }
@media (max-width: 640px) {
    .sponsor-grid, .sponsor-grid--few { grid-template-columns: 1fr; }
    .sponsor-card__stage { height: 180px; }
}

/* ==========================================================================
   Contact Us (ContactUs.razor)
   ========================================================================== */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: start; }
.contact-info {
    position: sticky; top: 96px; padding: 28px; border-radius: var(--lasa-radius); color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.10) 0, transparent 45%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 14px),
        linear-gradient(150deg, var(--lasa-primary-darker) 0%, var(--lasa-primary) 60%, #24338a 100%);
    border-bottom: 5px solid var(--lasa-accent); box-shadow: var(--lasa-shadow-md);
}
.contact-info h2 { margin: 0 0 10px; font-family: var(--lasa-font-heading); font-size: 1.6rem; line-height: 1.15; text-transform: uppercase; }
.contact-info h2 .accent-word { color: #ff4d5a; }
.contact-info > p { margin: 0 0 22px; color: rgba(255, 255, 255, 0.8); line-height: 1.6; }
.contact-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-info__list li { display: flex; gap: 12px; align-items: flex-start; }
.contact-info__list strong { display: block; font-family: var(--lasa-font-heading); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; }
.contact-info__list span:not(.contact-info__icon) { font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); }
.contact-info__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 50%; background: var(--lasa-accent); color: #fff;
}

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-field > label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.85rem; color: var(--lasa-text); }
.contact-form .validation-message { margin-top: 5px; color: var(--lasa-accent-dark); font-size: 0.8rem; }
/* Honeypot: off-screen for people, still in the form for bots. */
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-editor { border-radius: var(--lasa-radius-sm); }

.contact-captcha__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact-captcha__image svg { display: block; max-width: 100%; height: auto; border: 1px solid var(--lasa-border); border-radius: 8px; }
.contact-captcha__refresh {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
    border: 1px solid var(--lasa-border); border-radius: 50%; background: var(--lasa-surface); color: var(--lasa-primary); cursor: pointer;
    transition: background 0.15s ease, transform 0.3s ease;
}
.contact-captcha__refresh:hover { background: var(--lasa-primary-light); transform: rotate(90deg); }
.contact-captcha__refresh:focus-visible { outline: 2px solid var(--lasa-accent); outline-offset: 2px; }
.contact-captcha__input { width: 210px; }
/* Only the typed code: the placeholder keeps normal text so it fits. */
.contact-captcha__input input:not(:placeholder-shown) { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; }

.contact-error {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--lasa-radius-sm);
    background: var(--lasa-accent-light); color: var(--lasa-accent-dark); font-size: 0.88rem;
}
.contact-form__actions { display: flex; justify-content: flex-end; }
.contact-submit { gap: 8px; border: 0; cursor: pointer; font-size: 1rem; }
.contact-submit:disabled { opacity: 0.6; cursor: progress; }

.contact-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 24px; }
.contact-success__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 14px;
    border-radius: 50%; background: var(--lasa-success); color: #fff; box-shadow: 0 0 0 8px rgba(21, 127, 60, 0.12);
}
.contact-success h2 { margin: 0 0 8px; font-family: var(--lasa-font-heading); font-size: 1.8rem; text-transform: uppercase; color: var(--lasa-primary); }
.contact-success > p { margin: 0 0 18px; max-width: 460px; color: var(--lasa-text-muted); line-height: 1.6; }
.contact-success__number {
    display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding: 14px 20px; max-width: 100%;
    border-radius: var(--lasa-radius); background: var(--lasa-primary-light); border-left: 4px solid var(--lasa-accent);
}
.contact-success__number span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lasa-text-muted); }
.contact-success__number code { font-size: 1.05rem; font-weight: 700; color: var(--lasa-primary); overflow-wrap: anywhere; }
.contact-success__note { display: flex; align-items: center; gap: 6px; margin: 0 0 20px !important; font-size: 0.88rem; }
.contact-success__note.is-warning { color: var(--lasa-accent-dark); }
.btn-ghost-dark {
    padding: 10px 20px; border: 1px solid var(--lasa-primary); border-radius: var(--lasa-radius-sm);
    background: transparent; color: var(--lasa-primary); cursor: pointer;
    font-family: var(--lasa-font-heading); text-transform: uppercase; letter-spacing: 0.05em;
}
.btn-ghost-dark:hover { background: var(--lasa-primary); color: #fff; }

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; }
    .contact-info { position: static; }
}
@media (max-width: 560px) {
    .contact-form__row { grid-template-columns: 1fr; }
    .contact-captcha__input { width: 100%; }
    .contact-submit { width: 100%; justify-content: center; }
}

/* ==========================================================================
   About Us (AboutUs.razor)
   ========================================================================== */
.tag-pill--light { background: var(--lasa-primary-light); color: var(--lasa-primary); border: 0; }

.about-summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 32px 36px; }
.about-summary__text h2 {
    margin: 14px 0 14px; font-family: var(--lasa-font-heading); font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.1; text-transform: uppercase; color: var(--lasa-primary);
}
.about-summary__text h2 .accent-word { color: var(--lasa-accent); }
.about-summary__text p { margin: 0 0 14px; color: var(--lasa-text); line-height: 1.75; }
.about-summary__text p:last-child { margin-bottom: 0; }
.about-summary__aside {
    display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 26px 22px;
    border-radius: var(--lasa-radius);
    background:
        radial-gradient(circle at 50% 30%, #fff 0, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0) 75%),
        repeating-linear-gradient(135deg, rgba(23, 34, 92, 0.05) 0 1px, transparent 1px 12px),
        var(--lasa-bg);
}
.about-summary__logo { width: min(190px, 60%); height: auto; filter: drop-shadow(0 10px 18px rgba(16, 24, 40, 0.18)); }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.about-stat {
    display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: var(--lasa-radius-sm);
    background: linear-gradient(135deg, var(--lasa-primary-darker), var(--lasa-primary)); color: #fff; text-align: center;
}
.about-stat strong { font-family: var(--lasa-font-heading); font-size: 1.7rem; line-height: 1; }
.about-stat span { margin-top: 5px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }

.about-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 24px; }
.about-value {
    padding: 22px 22px 20px; border-radius: var(--lasa-radius); background: var(--lasa-surface);
    border: 1px solid var(--lasa-border); border-top: 4px solid var(--lasa-accent); box-shadow: var(--lasa-shadow-sm);
}
.about-value__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 12px;
    border-radius: 50%; background: var(--lasa-primary-light); color: var(--lasa-primary);
}
.about-value h3 { margin: 0 0 6px; font-family: var(--lasa-font-heading); font-size: 1.2rem; text-transform: uppercase; color: var(--lasa-primary); }
.about-value p { margin: 0; color: var(--lasa-text-muted); line-height: 1.6; font-size: 0.92rem; }

/* People: a horizontal card each, two per row on wide screens. */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 22px; }
.member-card {
    display: flex; gap: 22px; align-items: flex-start; padding: 22px; border-radius: var(--lasa-radius);
    background: var(--lasa-surface); border: 1px solid var(--lasa-border); box-shadow: var(--lasa-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.member-card:hover { box-shadow: var(--lasa-shadow-md); transform: translateY(-3px); }
.member-card__photo {
    flex: none; width: 132px; height: 132px; padding: 4px; border-radius: 50%;
    background: conic-gradient(from 200deg, var(--lasa-accent), var(--lasa-primary), var(--lasa-accent));
}
.member-card__photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    border: 3px solid #fff; background: var(--lasa-bg);
}
.member-card__body { flex: 1; min-width: 0; }
.member-card__title {
    display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--lasa-accent-light);
    color: var(--lasa-accent-dark); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.member-card h3 { margin: 8px 0 8px; font-family: var(--lasa-font-heading); font-size: 1.45rem; text-transform: uppercase; color: var(--lasa-primary); }
.member-card__text { font-size: 0.93rem; }

.about-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
    margin-top: 8px; padding: 28px 32px; border-radius: var(--lasa-radius); color: #fff;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 14px),
        linear-gradient(120deg, var(--lasa-primary-darker) 0%, var(--lasa-primary) 60%, #24338a 100%);
    border-left: 6px solid var(--lasa-accent);
}
.about-cta h2 { margin: 0 0 6px; font-family: var(--lasa-font-heading); font-size: 1.6rem; text-transform: uppercase; }
.about-cta h2 .accent-word { color: #ff4d5a; }
.about-cta p { margin: 0; color: rgba(255, 255, 255, 0.8); }
.about-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* The hero's pulsing "new message" dot doesn't belong on this button. */
.about-cta .btn-ghost { text-decoration: none; }
.about-cta .btn-ghost::after { content: none; }

@media (prefers-reduced-motion: reduce) {
    .member-card { transition: none; }
    .member-card:hover { transform: none; }
}
@media (max-width: 1000px) {
    .about-summary { grid-template-columns: 1fr; }
    .member-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .about-values { grid-template-columns: 1fr; }
    .about-summary { padding: 22px; }
}
@media (max-width: 560px) {
    .member-card { flex-direction: column; align-items: center; text-align: center; }
    .member-card__body { text-align: left; }
    .member-card h3 { text-align: center; }
    .member-card__title { display: block; width: fit-content; margin: 0 auto; }
    .about-cta { padding: 22px; }
    .about-cta__actions { width: 100%; }
}

/* ==========================================================================
   Playoff: champions celebration (ChampionCelebration) and games by round
   ========================================================================== */
:root { --gold: #f7c948; --gold-light: #fff3b0; --gold-dark: #a8740a; --silver: #cfd6e4; --silver-dark: #7d879c; --bronze: #d9905a; --bronze-dark: #8a4f22; }

.team-logo.champion { width: 240px; height: 120px; }
.team-logo.podium { width: 150px; height: 75px; }

.champions {
    position: relative; overflow: hidden; margin-bottom: 24px; padding: 34px 20px 28px; text-align: center; color: #fff;
    border-radius: 16px; box-shadow: var(--lasa-shadow-lg);
    background:
        radial-gradient(ellipse at 50% 18%, rgba(247, 201, 72, 0.28) 0, rgba(247, 201, 72, 0) 45%),
        radial-gradient(ellipse at 50% 110%, rgba(211, 18, 34, 0.45) 0, rgba(211, 18, 34, 0) 55%),
        linear-gradient(160deg, var(--lasa-primary-darker) 0%, var(--lasa-primary) 55%, #24338a 100%);
    border-bottom: 5px solid var(--gold);
}
/* Spotlight rays turning slowly behind everything. */
.champions__rays {
    position: absolute; left: 50%; top: 22%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(255, 243, 176, 0.09) 0deg 7deg, transparent 7deg 20deg);
    -webkit-mask-image: radial-gradient(circle, #000 0, #000 18%, transparent 48%);
    mask-image: radial-gradient(circle, #000 0, #000 18%, transparent 48%);
    animation: champions-rays 60s linear infinite;
}
@keyframes champions-rays { to { transform: rotate(360deg); } }

.champions__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.champions__trophy { filter: drop-shadow(0 0 24px rgba(247, 201, 72, 0.55)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)); animation: champions-float 4s ease-in-out infinite; }
@keyframes champions-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.champions__season {
    margin-top: 10px; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(247, 201, 72, 0.55);
    color: var(--gold-light); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.champions__title {
    margin: 6px 0 14px; font-family: var(--lasa-font-heading); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: linear-gradient(100deg, var(--gold-dark) 0%, var(--gold) 25%, var(--gold-light) 45%, var(--gold) 65%, var(--gold-dark) 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: champions-shine 4.5s ease-in-out infinite;
}
@keyframes champions-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

.champions__team { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.champions__team .team-logo { padding: 6px; border-radius: 10px; box-shadow: 0 0 0 4px var(--gold), 0 14px 30px rgba(0, 0, 0, 0.35); }
.champions__name { font-family: var(--lasa-font-heading); font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; letter-spacing: 0.04em; }
.champions__name .entity-link { color: #fff; border-bottom-color: rgba(247, 201, 72, 0.6); }
.champions__name .entity-link:hover { color: var(--gold-light); }

.champions__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.champions__fact {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.82rem;
}
.champions__fact.is-gold { background: rgba(247, 201, 72, 0.18); border-color: rgba(247, 201, 72, 0.6); color: var(--gold-light); font-weight: 600; }
.champions__finals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.champions__finals li {
    display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 6px 12px; border-radius: 8px;
    background: rgba(10, 15, 44, 0.45); border: 1px solid rgba(255, 255, 255, 0.12);
}
.champions__finals span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.champions__finals strong { font-family: var(--lasa-font-heading); font-size: 1.15rem; letter-spacing: 0.04em; }

/* Podium: 2nd | 1st | 3rd, blocks rising in one after the other. */
.champions__podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; width: min(720px, 100%); margin: 30px auto 0; }
.podium-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.podium-col .team-logo { padding: 4px; border-radius: 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); opacity: 0; animation: podium-appear 0.5s ease-out forwards; }
.podium-col__name {
    margin: 8px 0 10px; max-width: 100%; font-family: var(--lasa-font-heading); font-size: 1rem; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: podium-appear 0.5s ease-out forwards;
}
.podium-col__name .entity-link { color: #fff; }
.podium-block {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; padding-top: 14px;
    border-radius: 10px 10px 0 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 -6px 24px rgba(0, 0, 0, 0.25);
    transform-origin: bottom; transform: scaleY(0); animation: podium-rise 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}
.podium-block__medal {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
    font-family: var(--lasa-font-heading); font-size: 1.5rem; color: #1b2033; background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.podium-block__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(27, 32, 51, 0.8); }
.podium-col--1 .podium-block { height: 170px; background: linear-gradient(180deg, var(--gold-light), var(--gold) 45%, var(--gold-dark)); animation-delay: 1.1s; }
.podium-col--2 .podium-block { height: 125px; background: linear-gradient(180deg, #f4f6fb, var(--silver) 45%, var(--silver-dark)); animation-delay: 0.65s; }
.podium-col--3 .podium-block { height: 95px; background: linear-gradient(180deg, #f6d2b3, var(--bronze) 45%, var(--bronze-dark)); animation-delay: 0.2s; }
.podium-col--1 .team-logo, .podium-col--1 .podium-col__name { animation-delay: 1.7s; }
.podium-col--2 .team-logo, .podium-col--2 .podium-col__name { animation-delay: 1.25s; }
.podium-col--3 .team-logo, .podium-col--3 .podium-col__name { animation-delay: 0.8s; }
.podium-col--1 .podium-block__medal { width: 56px; height: 56px; font-size: 1.9rem; }
@keyframes podium-rise { to { transform: scaleY(1); } }
@keyframes podium-appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.champions__replay {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; padding: 8px 18px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(247, 201, 72, 0.6); background: rgba(247, 201, 72, 0.12); color: var(--gold-light);
    font-family: var(--lasa-font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem;
}
.champions__replay:hover { background: rgba(247, 201, 72, 0.25); }
.champions__replay:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* Confetti: each piece falls twice, with its own position, colour, delay, speed, sway and spin, then it's gone. */
.champions__confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.confetti {
    position: absolute; top: -24px; left: var(--x); width: calc(10px * var(--size)); height: calc(14px * var(--size));
    background: var(--color); opacity: 0; border-radius: 2px;
    animation: confetti-fall var(--fall) cubic-bezier(0.25, 0.4, 0.5, 1) var(--delay) 2 both;
}
.confetti--strip { width: calc(5px * var(--size)); height: calc(20px * var(--size)); }
.confetti--circle { width: calc(9px * var(--size)); height: calc(9px * var(--size)); border-radius: 50%; }
@keyframes confetti-fall {
    0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
    25% { transform: translate3d(var(--sway), 25vh, 0) rotate(calc(var(--spin) * 0.25)); }
    50% { transform: translate3d(calc(var(--sway) * -1), 50vh, 0) rotate(calc(var(--spin) * 0.5)); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--sway), 95vh, 0) rotate(var(--spin)); }
}

/* Games by round (GameCard). */
.playoff-games__toolbar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.playoff-round {
    display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; font-family: var(--lasa-font-heading);
    font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lasa-primary);
}
.playoff-round::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--lasa-border), transparent); }
.game-card__round {
    padding: 2px 8px; border-radius: 999px; background: var(--lasa-primary); color: #fff !important;
    font-weight: 700; letter-spacing: 0.04em;
}
.game-card.is-decider { border-top-color: var(--gold); box-shadow: 0 0 0 1px rgba(247, 201, 72, 0.6), var(--lasa-shadow-md); }
.game-card.is-decider .game-card__round { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); color: #1b2033 !important; }

@media (prefers-reduced-motion: reduce) {
    .champions__rays, .champions__trophy, .champions__title { animation: none; }
    .champions__confetti:not(.is-replay) { display: none; }
    .podium-block { animation: none; transform: none; }
    .podium-col .team-logo, .podium-col__name { animation: none; opacity: 1; }
}
@media (max-width: 640px) {
    .champions { padding: 26px 12px 22px; }
    .team-logo.champion { width: 180px; height: 90px; }
    .team-logo.podium { width: 90px; height: 45px; }
    .champions__podium { gap: 6px; }
    .podium-col__name { font-size: 0.8rem; }
    .podium-col--1 .podium-block { height: 130px; }
    .podium-col--2 .podium-block { height: 96px; }
    .podium-col--3 .podium-block { height: 74px; }
    .podium-block__label { font-size: 0.58rem; letter-spacing: 0.04em; }
}

/* ==========================================================================
   Hall of Fame (HallOfFame.razor): a navy intro band, then a gallery of gold plaques.
   Uses the --gold tokens defined for the playoff champions.
   ========================================================================== */
.hof-intro {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px 32px;
    margin-bottom: 28px; padding: 30px 34px; border-radius: var(--lasa-radius); color: #fff;
    background:
        radial-gradient(circle at 12% 50%, rgba(247, 201, 72, 0.22), transparent 42%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 14px),
        linear-gradient(120deg, var(--lasa-primary-darker) 0%, var(--lasa-primary) 65%, #24338a 100%);
    border-bottom: 4px solid var(--gold);
    box-shadow: var(--lasa-shadow-md);
}
.hof-intro__crest {
    display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
    color: var(--gold); background: rgba(247, 201, 72, 0.1);
    box-shadow: inset 0 0 0 2px rgba(247, 201, 72, 0.55), 0 0 40px rgba(247, 201, 72, 0.25);
}
.hof-intro__eyebrow { color: var(--gold); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.hof-intro h2 {
    margin: 4px 0 8px; font-family: var(--lasa-font-heading); font-size: 2rem; text-transform: uppercase; letter-spacing: 0.02em;
    background: linear-gradient(100deg, #fff 0%, #fff 40%, var(--gold-light) 60%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hof-intro p { margin: 0; max-width: 680px; color: rgba(255, 255, 255, 0.82); line-height: 1.65; }
.hof-intro__count {
    display: flex; flex-direction: column; align-items: center; padding: 14px 24px; border-radius: var(--lasa-radius);
    border: 1px solid rgba(247, 201, 72, 0.5); background: rgba(247, 201, 72, 0.1);
}
.hof-intro__count strong { font-family: var(--lasa-font-heading); font-size: 2.6rem; line-height: 1; color: var(--gold); }
.hof-intro__count span { margin-top: 4px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }

.hof-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; color: var(--gold-dark); text-align: center; }
.hof-empty p { margin: 0; color: var(--lasa-text-muted); }

/* Plaques are centred and at most 380px wide, so one or two inductees still look deliberate. */
.hof-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; gap: 30px;
    margin-bottom: 12px;
}
.hof-plaque {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 44px 26px 26px; border-radius: 14px; color: #fff;
    background:
        radial-gradient(circle at 50% 22%, rgba(247, 201, 72, 0.2), transparent 55%),
        linear-gradient(170deg, #1d2a6e 0%, var(--lasa-primary) 45%, var(--lasa-primary-darker) 100%);
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 5px rgba(247, 201, 72, 0.14), var(--lasa-shadow-md);
    animation: hof-rise 0.7s ease-out both; animation-delay: calc(var(--i) * 0.12s);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* An engraved inner frame. */
.hof-plaque::before {
    content: ""; position: absolute; inset: 8px; border-radius: 9px; pointer-events: none;
    border: 1px solid rgba(247, 201, 72, 0.35);
}
/* The shine that sweeps across on hover. */
.hof-plaque::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 243, 176, 0.22), transparent);
    transform: skewX(-18deg);
}
.hof-plaque:hover { transform: translateY(-6px); box-shadow: 0 0 0 5px rgba(247, 201, 72, 0.28), 0 24px 50px rgba(10, 15, 44, 0.35); }
.hof-plaque:hover::after { animation: hof-shine 0.9s ease-out; }
@keyframes hof-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hof-shine { from { left: -60%; } to { left: 130%; } }

.hof-plaque__ribbon {
    position: absolute; top: 30px; right: -50px; width: 200px; padding: 5px 0; transform: rotate(40deg);
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
    color: var(--lasa-primary-darker); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.hof-plaque__portrait { position: relative; width: 210px; height: 210px; display: grid; place-items: center; }
.hof-plaque__laurel { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--gold); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.hof-plaque__stem { fill: none; stroke: var(--gold-dark); stroke-width: 2.2; stroke-linecap: round; }
.hof-plaque__photo {
    position: relative; width: 150px; height: 150px; padding: 4px; border-radius: 50%;
    background: conic-gradient(from 210deg, var(--gold-dark), var(--gold-light), var(--gold), var(--gold-dark), var(--gold-light), var(--gold-dark));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.hof-plaque__photo img,
.hof-plaque__initials { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--lasa-primary-darker); }
.hof-plaque__photo img { object-fit: cover; background: var(--lasa-primary-dark); }
.hof-plaque__initials {
    display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #24338a, var(--lasa-primary-darker));
    font-family: var(--lasa-font-heading); font-size: 3rem; color: var(--gold); letter-spacing: 0.04em;
}

.hof-plaque__stars { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; color: var(--gold); }
.hof-plaque__stars svg { fill: currentColor; }

.hof-plaque__name { margin: 0; font-family: var(--lasa-font-heading); font-size: 1.7rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.03em; }
.hof-plaque__name a { color: #fff; text-decoration: none; }
.hof-plaque__name a:hover { color: var(--gold-light); }
.hof-plaque__nickname {
    display: block; margin: 2px 0; font-family: var(--lasa-font-body); font-size: 1.15rem; font-style: italic; font-weight: 600;
    text-transform: none; letter-spacing: 0.02em; color: var(--gold);
}

.hof-plaque__divider { display: flex; align-items: center; gap: 10px; width: 70%; margin: 14px 0; }
.hof-plaque__divider::before,
.hof-plaque__divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hof-plaque__divider::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hof-plaque__divider span { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); }

.hof-plaque__quote {
    margin: 0 0 18px; padding: 0 8px; white-space: pre-line;
    color: rgba(255, 255, 255, 0.88); font-style: italic; line-height: 1.65; font-size: 0.95rem;
}
.hof-plaque__quote::before {
    content: "\201C"; display: block; height: 30px; font-family: Georgia, serif; font-size: 3.2rem; line-height: 1; color: var(--gold); opacity: 0.8;
}

.hof-plaque__stats {
    margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px;
    border: 1px solid rgba(247, 201, 72, 0.6); color: var(--gold-light); text-decoration: none;
    font-family: var(--lasa-font-heading); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em;
    transition: background 0.15s ease, color 0.15s ease;
}
.hof-plaque__stats:hover { background: var(--gold); color: var(--lasa-primary-darker); }
.hof-plaque__stats:focus-visible,
.hof-plaque__name a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .hof-plaque { animation: none; transition: none; }
    .hof-plaque:hover { transform: none; }
    .hof-plaque:hover::after { animation: none; }
}
@media (max-width: 760px) {
    .hof-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 20px; }
    .hof-intro h2 { font-size: 1.6rem; }
    .hof-intro__crest { width: 80px; height: 80px; }
    .hof-grid { grid-template-columns: minmax(0, 380px); }
}