/* ================================
   GLOBAL LAYOUT
================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

/* CUSTOM FONT */

@font-face {
    font-family: 'GreatVibes-Regular';

    src: url('/fonts/GreatVibes-Regular.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DSEG7-Classic';

    src: url('/fonts/DSEG7Classic-Bold.woff2') format('woff2');

    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

    background-image: url('images/background.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;

    background-color: #f4f6f9;
}

/* optional overlay for readability (recommended) */
body::before {
    display: none;
}


/* make sure app content sits above overlay */
#app, .page, main {
    position: relative;
    z-index: 1;
}


/* ================================
   TOP APP BAR
   NOTE: the old repeating-stripe background override that used to
   live here has been removed — MainLayout.razor.css now owns the App
   Bar's styling entirely via the scoped `.esm-header` class. Having
   BOTH this global, unscoped `.mud-appbar` rule AND the scoped one
   fighting over the exact same element is what caused the striped
   background to bleed through on part of the bar (each stylesheet was
   winning in different spots depending on how MudBlazor's internal
   DOM structure applied them). If the App Bar ever needs a global
   (not page-specific) style tweak again, it belongs in
   Components/Layout/MainLayout.razor.css, not here.
================================ */

/* ================================
   NAME LINKS
   A club, player or manager name that opens its page. Looks like the
   text around it until hovered, so tables and cards keep their colours.
================================ */
a.gl-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.gl-link:hover,
a.gl-link:focus-visible {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

/* ================================
   DASHBOARD
================================ */

.dashboard-container {
    padding: 2rem;
    max-width: 1200px;
    margin: auto;
}

.hero {
    text-align: center;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.hero p {
    color: #666;
}

/* STATS GRID */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

/* CARD BASE */
.card {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(var(--gl-shadow-rgb),calc(0.08 * var(--gl-shadow-k)));
}

.big-number {
    font-size: 2rem;
    font-weight: bold;
    margin: 0.5rem 0;
}

.muted {
    color: #777;
    font-size: 0.9rem;
}

/* ACTION BUTTONS */
.action-card button {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.btn {
    background: #1e88e5;
    color: white;
}

.btn.secondary {
    background: #555;
}

/* ================================
   TEAM + PLAYER GRIDS
================================ */

.section-title {
    margin: 2rem 0 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.team-grid,
.player-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.team-card,
.player-card {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(var(--gl-shadow-rgb),calc(0.06 * var(--gl-shadow-k)));
}

.team-name,
.player-name {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.player-rating {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--gl-t-1e88e5);
}

/* ================================
   NAV MENU
================================ */

.nav-item {
    margin: 0;
}

.nav-link {
    padding: 6px 10px;
    border-radius: 8px;
    margin: 1px 6px;
    line-height: 1.2;
}

.nav-link:hover {
    background: rgba(var(--gl-ink-rgb),0.08);
}

/* ================================
   HOME PAGE
================================ */

.home-container {
    padding: 2rem;
    max-width: 1000px;
    margin: auto;
}

.hero {
    text-align: center;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}

.hero p {
    color: #666;
}

/* STATUS CARDS */
.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.status-card {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);

    padding: 1.5rem;

    border-radius: 16px;

    text-align: center;

    color: #1a1a1a;

    box-shadow:
        0 10px 25px rgba(var(--gl-shadow-rgb),calc(0.15 * var(--gl-shadow-k)));
}

.big {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

/* ACTIONS */
.actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.btn-primary,
.btn-secondary {
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
}

.btn-primary {
    background: #1e88e5;
    color: white;
}

.btn-secondary {
    background: #444;
    color: white;
}

/* INFO BOX */
.info-box {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);

    padding: 1.5rem;

    border-radius: 16px;

    margin-top: 2rem;

    color: #1a1a1a;

    box-shadow:
        0 10px 25px rgba(var(--gl-shadow-rgb),calc(0.15 * var(--gl-shadow-k)));
}

/* ================================
   ⚽ MATCH DAY TILES
================================ */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 2rem;
}

.match-tile {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);
    border-radius: 16px;
    padding: 14px;
    min-height: 180px;

    box-shadow: 0 10px 25px rgba(var(--gl-shadow-rgb),calc(0.15 * var(--gl-shadow-k)));

    display: flex;
    flex-direction: column;
    color: #1a1a1a;
}

.tile-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
    text-transform: capitalize;
}

.match-line {
    background: rgba(var(--gl-ink-rgb),0.35);
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.fixture-home,
.fixture-away {
    flex: 1;
    text-align: center;
}

.fixture-home a,
.fixture-away a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
}

.fixture-home a:hover,
.fixture-away a:hover {
    text-decoration: underline;
}

.fixture-score {
    min-width: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.no-match {
    opacity: 0.7;
    font-style: italic;
    font-size: 13px;
}

.match-tile.today {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(var(--gl-shadow-rgb),calc(0.25 * var(--gl-shadow-k)));
}

/* ================================
   ELITE LEAGUE TABLE
================================ */

.league-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;

    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(var(--gl-shadow-rgb),calc(0.25 * var(--gl-shadow-k)));
}

.league-table th {
    background: linear-gradient(
        135deg,
        #4c1d95,
        #6d28d9,
        #7c3aed
    );

    color: white;

    padding: 14px;

    text-align: center;

    font-weight: 600;

    border: none;
}

.league-table td {
    padding: 12px;

    text-align: center;

    color: white;

    background: rgba(45, 27, 78, 0.92);

    border-bottom: 1px solid rgba(var(--gl-ink-rgb),0.08);
}

.league-table tbody tr:hover td {
    background: rgba(90, 55, 150, 0.95);

    transition: 0.15s ease-in-out;
}

/* Champion */

.position-1 td {
    background: linear-gradient(
        135deg,
        #ffd700,
        #f4c430
    ) !important;

    color: #111 !important;

    font-weight: bold;
}

/* Champions League */

.position-2 td {
    background: rgba(0, 180, 90, 0.95) !important;

    font-weight: bold;
}

.position-3 td {
    background: rgba(0, 150, 75, 0.95) !important;

    font-weight: bold;
}

/* Relegation */

.relegation td {
    background: rgba(180, 30, 30, 0.95) !important;
}

/* Team column */

.league-table td:nth-child(2) {
    text-align: left;

    font-weight: 600;

    padding-left: 18px;
}

/* Points column */

.league-table td:last-child {
    font-size: 1.05rem;
    font-weight: bold;
}


body.player-profile-active {
    background-image: none !important;
    background-color: #000 !important;
}

.form-floating > label {
    color: #555 !important;
}

.form-control {
    color: #333 !important;
}

/* ================================
   RESPONSIVE GRIDS
================================ */

@media (max-width: 900px) {
    .stats-grid,
    .team-grid,
    .player-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .status-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tile-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-width: 480px) {
    .stats-grid,
    .team-grid,
    .player-grid,
    .status-grid {
        grid-template-columns: 1fr;
    }

    .tile-grid {
        grid-template-columns: 1fr;
    }
}
/* ================================
   ACCOUNT SETTINGS
================================ */

.manage-page {
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 25px;
}

.manage-header {
    margin-bottom: 25px;
}

.manage-header h1 {
    color: var(--gl-ink);
    font-size: 2rem;
    margin-bottom: 4px;
}

.manage-header p {
    color: rgba(var(--gl-ink-rgb),.7);
    margin: 0;
}

.manage-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
}

.manage-sidebar,
.manage-content {
    background: rgba(var(--gl-dk-12161e-rgb),.78);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    padding: 24px;
}

.manage-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.manage-nav li + li {
    margin-top: 10px;
}

.manage-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    color: var(--gl-ink);
    text-decoration: none;

    border-radius: 12px;

    transition: .2s;
}

.manage-nav-link:hover {
    background: rgba(var(--gl-ink-rgb),.08);
}

.manage-nav-link.active {
    background: #1e88e5;
}

.manage-card {
    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}

.manage-card h3 {
    color: var(--gl-ink);
    margin-bottom: 20px;
}

.manage-label {
    display: block;
    color: var(--gl-n-bbbbbb);
    margin-bottom: 6px;
    font-size: .9rem;
}

.manage-input {
    width: 100%;
    padding: 12px 14px;

    border-radius: 10px;

    border: 1px solid rgba(var(--gl-ink-rgb),.12);

    background: rgba(var(--gl-ink-rgb),.06);

    color: var(--gl-ink);
}

.manage-input:focus {
    outline: none;
    border-color: #1e88e5;
}

.manage-info {
    color: var(--gl-ink);
    margin-bottom: 18px;
}

.manage-info strong {
    display: block;
    color: var(--gl-n-999999);
    font-size: .85rem;
}

.manage-button {
    background: #1e88e5;
    color: white;

    border: none;

    border-radius: 10px;

    padding: 12px 22px;

    cursor: pointer;

    transition: .2s;
}

.manage-button:hover {
    background: #1976d2;
}

/* ===========================
   EUROPE MAP
=========================== */

#europe-map-container svg {
    width: 100%;
    height: auto;
}

/* /claim-club (ClaimClub.razor) is a full-bleed page with its own top bar:
   MainLayout hides the app bar there, so drop the space reserved for it,
   and paint the body dark so no light strip shows below the page. */
.mud-main-content:has(.cc-page) {
    padding-top: 0 !important;
}

.mud-main-content:has(.cc-page) > article.content {
    padding-bottom: 0 !important;
}

body:has(.cc-page) {
    background: #0a0e15;
}

/* The contract desk is a full-screen overlay: the page behind it stays put. */
body:has(.cc-desk) {
    overflow: hidden;
}

/* On phones the fixed footer (logo + social icons) ate a big slice of the
   screen on every step of the claim flow; new managers don't need it yet. */
@media (max-width: 720px) {
    body:has(.cc-page) .esm-footer {
        display: none;
    }
}

#europe-map-container path {
    transition: fill .2s ease,
                filter .2s ease,
                transform .2s ease;
}

#europe-map-container .country {
    fill: #2B313C !important;
    stroke: var(--gl-t-58616c) !important;
    stroke-width: 1.2;
}

#europe-map-container .disabled {
    fill: #232932 !important;
}

#europe-map-container .playable {
    cursor: pointer;
}

#europe-map-container .playable:hover {
    fill: var(--gl-t-42a5f5) !important;
    filter: drop-shadow(0 0 10px rgba(66,165,245,.9));
}

#europe-map-container .selected {
    fill: var(--gl-t-39d98a) !important;
    filter: drop-shadow(0 0 12px rgba(57,217,138,.9));
}
.league-selection-page{

    padding:40px;

    min-height:100vh;

}

.league-selection-page h3{

    color:var(--gl-ink);

    font-weight:700;

}

/* ================================
   USER MENU DROPDOWN
   Global (not MainLayout.razor.css) — MudMenu's popover content
   renders through a portal that scoped CSS (even ::deep) doesn't
   reliably reach, since the scope-attribute selector Blazor compiles
   ::deep down to depends on real DOM ancestry, which portaling breaks.
================================ */

.mud-popover:has(.mud-menu-item) {
    background:
        radial-gradient(140% 120% at 15% -10%, rgba(var(--gl-gold-tint-rgb),.10), transparent 55%),
        linear-gradient(160deg, var(--gl-dk-16161a), var(--gl-dk-0a0a0c));
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    border-radius: 12px;
    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.06),
        0 12px 32px rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k))),
        0 0 24px rgba(var(--gl-gold-glow-rgb),.1);
    padding: 6px;
    overflow: hidden;
}

/* The scrollbar wasn't from the popover itself, or even one level in
   — it's nested deeper inside MudBlazor's own internal popover
   wrapper structure. Targeting every descendant rather than guessing
   the exact depth; safe since overflow-x:hidden only removes the
   ability to scroll horizontally, it doesn't clip content that
   already fits within the popover's width. */
.mud-popover:has(.mud-menu-item),
.mud-popover:has(.mud-menu-item) * {
    overflow-x: hidden !important;
}

.mud-popover .mud-menu-item {
    background: transparent !important;
    color: var(--gl-n-f2f2f2) !important;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 12px 18px;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease;
}

.mud-popover .mud-menu-item:hover {
    background: rgba(var(--gl-gold-tint-rgb),.14) !important;
    color: var(--gl-t-ffd76a) !important;
}

.mud-popover .mud-menu-item .mud-icon-root,
.mud-popover .mud-menu-item-icon .mud-icon-root {
    color: var(--gl-gold-text) !important;
    filter: drop-shadow(0 0 4px rgba(var(--gl-gold-glow-rgb),.45));
    transition: color .18s ease;
}

.mud-popover .mud-menu-item:hover .mud-icon-root {
    color: var(--gl-t-ffd76a) !important;
}

.mud-popover .mud-divider {
    border-color: rgba(var(--gl-gold-line-rgb),.22) !important;
    margin: 4px 10px !important;
}

/* Logout — same treatment as the two MudMenuItem rows above, so all
   three read as one consistent set instead of Logout looking like a
   separate solid block. Lives here (global) for the same portal
   reason as everything else in this section. */
.esm-header-menu-logout-btn {
    background: transparent !important;
    color: var(--gl-n-f2f2f2) !important;
    font-weight: 600;
    letter-spacing: .02em;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    border-radius: 8px;
    min-height: 56px; /* matches MudMenuItem's actual rendered height */
    transition: background .18s ease, color .18s ease;
}

.esm-header-menu-logout-btn:hover {
    background: rgba(var(--gl-gold-tint-rgb),.14) !important;
    color: var(--gl-t-ffd76a) !important;
}

.esm-header-menu-logout-btn .mud-icon-root {
    color: var(--gl-gold-text) !important;
    filter: drop-shadow(0 0 4px rgba(var(--gl-gold-glow-rgb),.45));
}

.esm-header-menu-logout-btn:hover .mud-icon-root {
    color: var(--gl-t-ffd76a) !important;
}

/* "Manage Account" is a raw <a> (not a MudMenuItem — see
   UserAccountMenu.razor for why), so it needs its own matching style
   to look identical to the User Profile / Logout rows either side of
   it. */
.esm-header-menu-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px; /* matches MudMenuItem's actual rendered height, confirmed via DevTools */

    padding: 12px 18px;
    border-radius: 8px;

    background: transparent;
    color: var(--gl-n-f2f2f2);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .02em;
    font-size: 0.875rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;

    transition: background .18s ease, color .18s ease;
}

.esm-header-menu-link:hover {
    background: rgba(var(--gl-gold-tint-rgb),.14);
    color: var(--gl-t-ffd76a);
}

.esm-header-menu-link .mud-icon-root {
    color: var(--gl-gold-text);
    filter: drop-shadow(0 0 4px rgba(var(--gl-gold-glow-rgb),.45));
}

.esm-header-menu-link:hover .mud-icon-root {
    color: var(--gl-t-ffd76a);
}

/* Language choice in the account menu: phones and narrow windows only,
   where the app bar has no room for the language button (hidden there in
   theme.css). */
.esm-header-menu-lang {
    display: none;
}

.esm-header-menu-lang button.esm-header-menu-link {
    justify-content: flex-start; /* buttons in the app bar get centred content */
    border: 0;
    cursor: pointer;
    text-align: left;
}

.esm-header-menu-lang .esm-header-menu-link img {
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.esm-header-menu-lang .esm-header-menu-link.is-active {
    cursor: default;
    color: var(--gl-gold-text);
}

.esm-header-menu-check {
    margin-left: auto;
    padding-left: 12px;
    color: var(--gl-gold-text);
}

@media (max-width: 900px) {
    .esm-header-menu-lang {
        display: block;
    }
}

/* ================================
   MANAGE ACCOUNT — DANGER VARIANTS
   Delete Account lives here (Account/Manage/DeleteAccount.razor +
   ManageNavMenu.razor), reusing the existing .manage-nav-link /
   .manage-button base classes with a red-tinted modifier so it reads
   as distinct from the routine Manager/Password sections around it.
================================ */

.manage-nav-link-danger {
    color: var(--gl-t-ff8a80) !important;
}

.manage-nav-link-danger:hover {
    background: rgba(244,67,54,.12) !important;
}

.manage-nav-link-danger.active {
    background: rgba(244,67,54,.22) !important;
}

.manage-button-danger {
    background: #b23c34 !important;
}

.manage-button-danger:hover {
    background: #c94a41 !important;
}

/* ================================
   MATCH VISUALIZER
   Styles for the 2D top-down match visualizer (MatchVisualizer.razor,
   wwwroot/js/matchVisualizerRenderer.js). All classes are prefixed
   `mv-` specifically to avoid colliding with anything above.
================================ */

.mv-root {
  --mv-pitch-a: #164a2d;
  --mv-pitch-b: #123f27;
  --mv-line: rgba(255, 255, 255, .85);
  --mv-home: #2447d8;
  --mv-home-trim: #dfe6ff;
  --mv-away: #e0a12c;
  --mv-away-trim: #241a06;
  --mv-panel: #0b0f0dee;
  --mv-accent: #c9f24c;
  --mv-ink: #e9efe9;
  --mv-dim: #8ea18f;

  max-width: 1040px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  color: var(--mv-ink);
}

.mv-scoreboard {
  background: var(--mv-panel);
  border: 1px solid rgba(201, 242, 76, .18);
  border-radius: 10px;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.mv-scoreboard::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mv-accent), transparent);
}

.mv-team-col {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.mv-team-col-home { align-items: flex-start; }
.mv-team-col-away { align-items: flex-end; }

.mv-team {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Teko', sans-serif; font-size: 26px; letter-spacing: .5px; font-weight: 600;
}
.mv-team.mv-away { justify-content: flex-end; }
.mv-dot-swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.mv-team.mv-home .mv-dot-swatch { background: var(--mv-home); box-shadow: 0 0 0 2px var(--mv-home-trim) inset; }
.mv-team.mv-away .mv-dot-swatch { background: var(--mv-away); box-shadow: 0 0 0 2px var(--mv-away-trim) inset; }

/* Goalscorers/assists, listed below each team's name — populated
   progressively as Goal beats arrive (see renderGoals in the renderer),
   in scoring order, matching how everything else on this scoreboard
   develops live rather than dumping the final state up front. */
.mv-goals {
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'Inter', sans-serif;
}
.mv-team-col-away .mv-goals { align-items: flex-end; text-align: right; }
.mv-goal-entry { font-size: 12px; }
.mv-goal-player { color: var(--mv-ink); font-weight: 600; }
.mv-goal-minute { color: var(--mv-accent); margin-left: 6px; }
.mv-goal-assist { color: var(--mv-dim); font-size: 11px; margin-top: 1px; }

.mv-mid-block { text-align: center; min-width: 170px; }
.mv-score { font-family: 'Teko', sans-serif; font-size: 44px; line-height: 1; letter-spacing: 1px; font-weight: 700; }
.mv-clock { font-family: 'Teko', sans-serif; font-size: 15px; letter-spacing: 2px; color: var(--mv-accent); margin-top: 2px; }
.mv-zone-label { font-size: 10px; letter-spacing: 1.5px; color: var(--mv-dim); text-transform: uppercase; margin-top: 2px; }

.mv-stats-row {
  display: flex; justify-content: space-between; padding: 6px 22px 10px;
  font-size: 11px; color: var(--mv-dim); letter-spacing: .5px;
}
.mv-stats-row b { color: var(--mv-ink); font-weight: 600; }

.mv-pitch-wrap { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(201, 242, 76, .18); }
.mv-pitch-wrap > svg {
  display: block; width: 100%; height: auto;
  background: repeating-linear-gradient(90deg, var(--mv-pitch-a) 0 60px, var(--mv-pitch-b) 60px 120px);
}

.mv-ticker {
  margin-top: 10px; background: var(--mv-panel); border: 1px solid rgba(201, 242, 76, .18);
  border-radius: 10px; padding: 10px 16px; height: 190px; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
}
.mv-ticker-item {
  display: flex; gap: 10px; align-items: baseline; font-size: 13px; opacity: 0;
  animation: mv-slide-in .5s ease forwards;
}
.mv-ticker-item .mv-tmin { font-family: 'Teko', sans-serif; color: var(--mv-accent); font-size: 16px; width: 34px; flex: none; }
.mv-ticker-item.mv-goal { color: var(--mv-accent); font-weight: 600; }
@keyframes mv-slide-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

.mv-controls { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.mv-controls button {
  background: transparent; border: 1px solid rgba(201, 242, 76, .35); color: var(--mv-ink);
  padding: 7px 16px; border-radius: 20px; font-family: 'Inter', sans-serif; font-size: 12px;
  letter-spacing: .5px; cursor: pointer; transition: .15s;
}
.mv-controls button:hover { background: rgba(201, 242, 76, .12); }
.mv-controls button.mv-active { background: var(--mv-accent); color: #0b1a10; border-color: var(--mv-accent); font-weight: 600; }

/* Phones: the scoreboard's middle block kept a 170px minimum and 26px team
   names, which pushed "Turin United" / "Valencia Titans" into the score. */
@media (max-width: 600px) {
  .mv-scoreboard { padding: 10px 12px; gap: 8px; }
  .mv-mid-block { min-width: 0; }
  .mv-team { font-size: 18px; gap: 6px; line-height: 1.05; }
  .mv-team > span:not(.mv-dot-swatch) { min-width: 0; overflow-wrap: anywhere; }
  .mv-dot-swatch { width: 10px; height: 10px; }
  .mv-score { font-size: 34px; white-space: nowrap; }
  .mv-clock { font-size: 13px; }
  .mv-zone-label { font-size: 9px; letter-spacing: 1px; }
  .mv-goal-entry { font-size: 11px; }
  .mv-stats-row { padding: 4px 4px 8px; font-size: 10px; letter-spacing: 0; gap: 8px; }
  .mv-stats-row > div { flex: 1; }
  .mv-stats-row > div:nth-child(2) { text-align: center; }
  .mv-stats-row > div:last-child { text-align: right; }
  .mv-ticker { height: 150px; padding: 8px 12px; }
  .mv-ticker-item { font-size: 12px; }
  .mv-controls button { padding: 6px 12px; }
}

.mv-goal-flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(201, 242, 76, .35), transparent 60%);
}
.mv-goal-banner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%) scale(.85);
  font-family: 'Teko', sans-serif; font-size: 64px; font-weight: 700; letter-spacing: 3px;
  color: var(--mv-accent); text-shadow: 0 2px 18px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-text-shadow-k)));
  opacity: 0; pointer-events: none;
}

/* Shown in place of the players/ball during a no-highlight gap in play —
   see the timeskip beats in matchBeatGenerator.js. */
/* Sending-off overlay — v3 only. The card is shown large with the offender
   named, because a red card deleting a dot silently threw away the most
   dramatic moment in a match. */
.mv-redcard {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.7) rotate(-16deg);
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 26px; border-radius: 10px;
  background: rgba(var(--gl-dk-0b0f0d-rgb),.92);
  border: 1px solid rgba(224, 51, 47, .5);
  box-shadow: 0 10px 40px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-shadow-k)));
}

.mv-redcard-card {
  width: 46px; height: 64px; border-radius: 4px;
  background: linear-gradient(160deg, #f0413c, #c0201c);
  box-shadow: 0 3px 14px rgba(224, 51, 47, .55);
}

.mv-redcard-label {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gl-t-e0332f); font-weight: 700;
}

.mv-redcard-name {
  font-family: 'Teko', sans-serif;
  font-size: 34px; line-height: 1.05; color: var(--gl-n-e9efe9);
}

.mv-timeskip-banner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.mv-timeskip-clock {
  font-family: 'Teko', sans-serif; font-size: 72px; font-weight: 700; letter-spacing: 2px;
  color: var(--mv-accent); text-shadow: 0 2px 18px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-text-shadow-k)));
}
.mv-timeskip-label {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--mv-dim); margin-top: 4px;
}

/* v3 highlight mode's jump-cut. Shown while the reel skips the minutes between
   two highlights: the play fades down behind this and the clock sweeps up to
   the minute the next chance starts from, so the gap reads as time passing
   rather than as the clock glitching from 2' to 9' between two frames.
   Deliberately its own rules rather than reusing .mv-timeskip-* above: that one
   belongs to the legacy v2 visualizer, is full-screen sized for a pitch with no
   play on it at all, and still has to keep working unchanged. */
.mv-cut {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 24px 11px; border-radius: 999px;
  background: rgba(var(--gl-dk-0b0f0d-rgb),.78);
  border: 1px solid rgba(201, 242, 76, .28);
  box-shadow: 0 8px 30px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.mv-cut-clock {
  font-family: 'Teko', sans-serif; font-size: 40px; line-height: 1; font-weight: 700;
  letter-spacing: 2px; color: var(--mv-accent);
  /* Fixed width so the pill doesn't twitch as the sweep goes 9' -> 10'. */
  min-width: 66px; text-align: center;
}
.mv-cut-label {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--mv-dim);
}

/* Broadcast ("3D") view: a canvas drawn by broadcast.js in place of the
   top-down SVG. Which one shows is decided by data-view on .mv-root. */
.mv-broadcast {
  display: none; position: relative; z-index: 0; overflow: hidden;
  width: 100%; aspect-ratio: 16 / 9; background: var(--gl-dk-0b111b);
}
.mv-root[data-view="3d"] .mv-broadcast { display: block; }
/* Its layers (broadcast.js), stacked: WebGL stands, 2D pitch, WebGL
   players, the light, 2D captions on top. */
.mv-broadcast > * {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
/* Floodlight haze is light added to the picture ('lighter' on a canvas). */
.mv-bc-haze { mix-blend-mode: screen; mix-blend-mode: plus-lighter; }
.mv-bc-rainhaze {
  background: linear-gradient(rgba(150,160,178,.12), rgba(150,160,178,.05) 50%, rgba(150,160,178,.03));
}
.mv-root[data-view="3d"] .mv-pitch-wrap > svg { display: none; }
.mv-controls { flex-wrap: wrap; }

/* Full-screen toggle, top-right of the pitch. .mv-fs is set both in real
   browser full screen and in the pinned-over-the-page fallback (iPhone). */
.mv-fs-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; padding: 6px; display: flex;
  border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(var(--gl-dk-0b0f0d-rgb),.7); color: var(--gl-ink);
  opacity: .75; transition: opacity .2s ease, background .2s ease;
}
.mv-fs-btn:hover, .mv-fs-btn:focus-visible { opacity: 1; background: rgba(var(--gl-dk-0b0f0d-rgb),.9); }
.mv-fs-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mv-fs-btn .mv-fs-exit, .mv-fs .mv-fs-btn .mv-fs-enter { display: none; }
.mv-fs .mv-fs-btn .mv-fs-exit { display: block; }
.mv-pitch-wrap.mv-fs {
  position: fixed; inset: 0; z-index: 2000;
  border: 0; border-radius: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
/* Letterboxed to fit the screen, whichever way round it is. */
.mv-pitch-wrap.mv-fs .mv-broadcast { width: min(100vw, calc(100dvh * 16 / 9)); }
.mv-pitch-wrap.mv-fs > svg { width: min(100vw, calc(100dvh * 1000 / 650)); }
/* The control bar, moved over the bottom of the picture while full screen. */
.mv-pitch-wrap.mv-fs .mv-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0;
  padding: 40px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  transition: opacity .3s ease;
}
.mv-pitch-wrap.mv-fs .mv-controls button:not(.mv-active) { background: rgba(var(--gl-dk-0b0f0d-rgb),.6); }
.mv-pitch-wrap.mv-fs .mv-fs-btn { transition: opacity .3s ease, background .2s ease; }
.mv-pitch-wrap.mv-fs.mv-fs-idle { cursor: none; }
.mv-pitch-wrap.mv-fs.mv-fs-idle .mv-controls,
.mv-pitch-wrap.mv-fs.mv-fs-idle .mv-fs-btn { opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  .mv-fs-btn { top: 5px; right: 5px; width: 26px; height: 26px; padding: 4px; }
}

/* TV score bug, top-left of the pitch: "TUR 2 - 1 VAL | 55:23". Makes way
   for the replay caption, which uses the same corner. */
.mv-bug {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: flex; align-items: stretch;
  font-family: 'Teko', sans-serif; font-size: 20px; line-height: 1; font-weight: 600;
  letter-spacing: 1px; color: var(--gl-ink);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));
  pointer-events: none; transition: opacity .25s ease;
}
.mv-bug > span { display: flex; align-items: center; padding: 5px 9px 3px; }
.mv-bug-team { gap: 7px; background: rgba(var(--gl-dk-0b0f0d-rgb),.86); min-width: 58px; }
.mv-bug-home { justify-content: flex-start; }
.mv-bug-away { justify-content: flex-end; }
.mv-bug-team i { width: 4px; align-self: stretch; margin: -5px 0 -3px; }
.mv-bug-home i { background: var(--mv-home); margin-left: -9px; }
.mv-bug-away i { background: var(--mv-away); margin-right: -9px; }
.mv-bug-score { background: #f4f6f2; color: #0b0f0d; font-weight: 700; min-width: 46px; justify-content: center; }
.mv-bug-clock {
  background: var(--mv-accent); color: #0b0f0d; font-weight: 700;
  font-variant-numeric: tabular-nums; min-width: 52px; justify-content: center;
}
.mv-pitch-wrap:has(.mv-reel-caption.mv-show) .mv-bug { opacity: 0; }
@media (max-width: 600px) {
  .mv-bug { top: 5px; left: 5px; font-size: 12px; letter-spacing: .5px; border-radius: 3px; }
  .mv-bug > span { padding: 2px 4px 1px; }
  .mv-bug-team { min-width: 0; gap: 3px; }
  .mv-bug-team i { width: 3px; margin: -2px 0 -1px; }
  .mv-bug-home i { margin-left: -4px; }
  .mv-bug-away i { margin-right: -4px; }
  .mv-bug-score { min-width: 26px; }
  .mv-bug-clock { min-width: 32px; }
}

/* Short call from the referee's whistle: OFFSIDE, FOUL, HALF-TIME,
   PENALTY. Same family as the goal banner, smaller and not the goal colour,
   so it never competes with a goal. */
.mv-callout {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.85);
  padding: 4px 22px 2px; border-radius: 8px;
  background: rgba(var(--gl-dk-0b0f0d-rgb),.78); border: 1px solid rgba(var(--gl-ink-rgb),.18);
  font-family: 'Teko', sans-serif; font-size: 34px; letter-spacing: 3px; line-height: 1.1;
  color: var(--mv-ink); text-shadow: 0 2px 10px rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-text-shadow-k)));
  opacity: 0; pointer-events: none; white-space: nowrap;
}

/* Goal replays after full time: a caption naming the goal, and a card at the
   end offering to watch them again. */
.mv-reel-caption {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px);
  padding: 6px 12px; border-radius: 8px;
  background: rgba(var(--gl-dk-0b0f0d-rgb),.82); border: 1px solid rgba(201, 242, 76, .3);
  font-size: 13px; color: var(--mv-ink);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.mv-reel-caption.mv-show { opacity: 1; }
.mv-reel-badge {
  font-family: 'Teko', sans-serif; font-size: 18px; letter-spacing: 2px; line-height: 1;
  color: #0b1a10; background: var(--mv-accent); padding: 2px 7px 0; border-radius: 4px;
}
.mv-reel-count { color: var(--mv-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.mv-reel-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-reel-end {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 28px; border-radius: 12px;
  background: rgba(var(--gl-dk-0b0f0d-rgb),.9); border: 1px solid rgba(201, 242, 76, .3);
  box-shadow: 0 10px 40px rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k)));
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.mv-reel-end.mv-show { opacity: 1; pointer-events: auto; }
.mv-reel-end-title {
  font-family: 'Teko', sans-serif; font-size: 30px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--mv-ink); line-height: 1;
}
.mv-reel-end button {
  background: var(--mv-accent); color: #0b1a10; border: 0; border-radius: 20px;
  padding: 8px 18px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mv-controls button.mv-goals-btn { border-color: var(--mv-accent); color: var(--mv-accent); }
.mv-controls button[hidden] { display: none; }
@media (max-width: 600px) {
  .mv-callout { font-size: 24px; padding: 3px 14px 1px; }
  .mv-reel-caption { font-size: 11px; gap: 6px; padding: 4px 8px; }
  .mv-reel-count { display: none; }
  .mv-reel-end { padding: 12px 16px; }
  .mv-reel-end-title { font-size: 22px; }
}

/* Pre-kickoff lineup overlay — shown over the pitch for a few seconds before
   play begins, instead of the match starting instantly on page load. Fades
   out once kickoff actually happens (see KICKOFF_DELAY_MS in renderer.js). */
.mv-kickoff {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px;
  background: rgba(var(--gl-dk-0b0f0d-rgb),.88);
  opacity: 1; transition: opacity .5s ease;
}
.mv-kickoff.mv-kickoff-hide { opacity: 0; pointer-events: none; }

/* Rain (weather.js). The broadcast view draws its own rain on the canvas;
   the top-down view gets a CSS shower over a darker pitch, and the score
   bug a rain icon in both. */
.mv-bug-weather {
  background: rgba(var(--gl-dk-0b0f0d-rgb),.86); color: var(--gl-t-d6e2f5); padding: 0 7px !important;
}
.mv-bug-weather[hidden] { display: none !important; }
.mv-bug-weather svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.mv-bug-weather .mv-rain-lines { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mv-root[data-weather="rain"][data-view="2d"] .mv-pitch-wrap > svg { filter: brightness(.82) saturate(.85); }
.mv-root[data-weather="rain"][data-view="2d"] .mv-pitch-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    repeating-linear-gradient(105deg, transparent 0 22px, rgba(210, 222, 240, .22) 22px 23px, transparent 23px 47px),
    repeating-linear-gradient(105deg, transparent 0 13px, rgba(210, 222, 240, .12) 13px 14px, transparent 14px 31px);
  background-size: 100% 180px, 100% 120px;
  animation: mv-rain-fall .45s linear infinite;
}
@keyframes mv-rain-fall { to { background-position: -48px 180px, -32px 120px; } }
@media (prefers-reduced-motion: reduce) {
  .mv-root[data-weather="rain"][data-view="2d"] .mv-pitch-wrap::after { animation: none; }
}

/* Commentary as a film-style subtitle over the bottom of the picture
   (renderer.js showSubtitle), one sentence at a time. It replaces the
   scrolling ticker panel that used to sit under the pitch. */
.mv-ticker { display: none; }
.mv-subtitle {
  position: absolute; left: 50%; bottom: 5.5%; z-index: 2;
  width: max-content; max-width: 78%;
  transform: translate(-50%, 6px); text-align: center;
  opacity: 0; transition: opacity .35s ease, transform .35s ease, bottom .3s ease;
  pointer-events: none;
}
.mv-subtitle.mv-show { opacity: 1; transform: translate(-50%, 0); }
.mv-subtitle span {
  display: inline; padding: 0.2em 0.55em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: rgba(0, 0, 0, .62); border-radius: 4px;
  font: 600 clamp(12px, 1.75cqi, 28px) / 1.55 Inter, system-ui, sans-serif;
  color: var(--gl-ink); text-shadow: 0 1px 2px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-text-shadow-k)));
}
.mv-subtitle.mv-subtitle-goal span { color: var(--mv-accent); }
@container (max-width: 520px) {
  .mv-subtitle { max-width: 94%; bottom: 4%; }
  .mv-subtitle span { font-size: 11px; line-height: 1.5; }
}
/* Clear of the controls bar while it's showing in full screen. */
.mv-pitch-wrap.mv-fs:not(.mv-fs-idle) .mv-subtitle { bottom: calc(5.5% + 64px); }

/* TV graphics (renderer.js): lower thirds for goals, yellow cards and
   substitutions; a possession bar under the score bug; the half-time
   stats card. Sized off the pitch's width (container units). */
.mv-lower {
  position: absolute; left: 2.2cqi; bottom: calc(5.5% + 4.2cqi); z-index: 3;
  display: flex; align-items: stretch; max-width: 46cqi;
  background: rgba(var(--gl-dk-090d0b-rgb),.86); border-radius: 0.5cqi; overflow: hidden;
  box-shadow: 0 0.5cqi 1.6cqi rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));
  border-left: 0.6cqi solid var(--mv-home);
  opacity: 0; transform: translateX(-4cqi); pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1), bottom .3s ease;
}
.mv-lower.mv-lower-away { border-left-color: var(--mv-away); }
.mv-lower.mv-show { opacity: 1; transform: none; }
.mv-lower-media {
  flex: none; width: 7.2cqi; display: grid; place-items: end center; overflow: hidden;
  background: linear-gradient(160deg, rgba(var(--gl-ink-rgb),.12), rgba(var(--gl-ink-rgb),.02));
}
.mv-lower-media img { width: 100%; height: auto; display: block; }
.mv-lower-card {
  align-self: center; width: 2.6cqi; aspect-ratio: 3 / 4; border-radius: 0.3cqi;
  background: #f2c744; box-shadow: 0 0.2cqi 0.6cqi rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k))); transform: rotate(-8deg);
}
.mv-lower-red .mv-lower-card { background: #e0332f; }
.mv-lower-text { padding: 0.9cqi 1.6cqi 1cqi 1.3cqi; min-width: 0; }
.mv-lower-kicker {
  font: 700 clamp(9px, 1.15cqi, 15px) / 1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mv-accent); white-space: pre;
}
.mv-lower-yellow .mv-lower-kicker { color: var(--gl-t-f2c744); }
.mv-lower-name {
  font-family: 'Teko', sans-serif; font-weight: 600; font-size: clamp(16px, 3cqi, 40px); line-height: 1;
  color: var(--gl-ink); margin-top: 0.3cqi; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-lower-detail {
  font: 500 clamp(9px, 1.15cqi, 15px) / 1.3 Inter, sans-serif; color: rgba(var(--gl-ink-rgb),.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-pitch-wrap.mv-fs:not(.mv-fs-idle) .mv-lower { bottom: calc(5.5% + 4.2cqi + 64px); }

.mv-possbar {
  position: absolute; left: 10px; top: calc(10px + 2.4em); z-index: 1; width: 23cqi; min-width: 170px;
  padding: 0.5cqi 0.9cqi 0.7cqi; border-radius: 4px; background: rgba(var(--gl-dk-0b0f0d-rgb),.86);
  font: 600 clamp(9px, 1.05cqi, 14px) / 1.2 Inter, sans-serif; color: var(--gl-ink);
  opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
.mv-possbar.mv-show { opacity: 1; transform: none; }
.mv-possbar-label { font-size: .85em; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--gl-ink-rgb),.7); margin-bottom: 0.3cqi; }
.mv-possbar-row { display: flex; align-items: center; gap: 0.7cqi; }
.mv-possbar-track { flex: 1; height: 0.7cqi; min-height: 5px; border-radius: 99px; background: var(--mv-away); overflow: hidden; }
.mv-possbar-fill { height: 100%; background: var(--mv-home); transition: width .6s ease; }
.mv-possbar-pct { font-variant-numeric: tabular-nums; min-width: 2.6em; }
.mv-possbar-pct:last-child { text-align: right; }

.mv-htstats {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 44cqi; min-width: 260px;
  padding: 1.6cqi 2cqi 1.8cqi; border-radius: 0.8cqi;
  background: rgba(var(--gl-dk-080c0a-rgb),.84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 1cqi 3cqi rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k)));
  color: var(--gl-ink); pointer-events: none;
  opacity: 0; transform: translate(-50%, -46%); transition: opacity .45s ease, transform .45s ease;
}
.mv-htstats.mv-show { opacity: 1; transform: translate(-50%, -50%); }
.mv-ht-head { text-align: center; margin-bottom: 1.2cqi; }
.mv-ht-title { font: 700 clamp(9px, 1.15cqi, 15px) / 1.2 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--mv-accent); }
.mv-ht-score {
  display: flex; justify-content: center; align-items: baseline; gap: 1.4cqi; margin-top: 0.4cqi;
  font-family: 'Teko', sans-serif; font-size: clamp(14px, 2.4cqi, 32px); line-height: 1.1;
}
.mv-ht-score span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-ht-score span:first-child { text-align: right; }
.mv-ht-score b { font-size: 1.4em; font-weight: 700; }
.mv-ht-row { display: flex; align-items: center; gap: 1.2cqi; padding: 0.55cqi 0; border-top: 1px solid rgba(var(--gl-ink-rgb),.08); }
.mv-ht-val { width: 4.5cqi; min-width: 30px; text-align: center; font: 700 clamp(11px, 1.5cqi, 20px) / 1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.mv-ht-mid { flex: 1; }
.mv-ht-label { text-align: center; font: 500 clamp(9px, 1.1cqi, 14px) / 1.3 Inter, sans-serif; color: rgba(var(--gl-ink-rgb),.75); }
.mv-ht-bar { display: flex; gap: 2px; height: 0.45cqi; min-height: 3px; margin-top: 0.35cqi; }
.mv-ht-bar i { display: block; border-radius: 99px; flex-basis: 0; }
.mv-ht-bar-home { background: var(--mv-home); }
.mv-ht-bar-away { background: var(--mv-away); }
@container (max-width: 520px) {
  .mv-lower { max-width: 70cqi; }
  .mv-lower-media { width: 11cqi; }
  .mv-htstats { width: 86cqi; min-width: 0; }
}

/* Line-up graphic during the walkout (renderer.js renderLineupCard): a
   translucent panel per team at either side, the walkout visible between.
   Sized off the pitch's own width (container units) so it scales with the
   player, full screen included. */
.mv-pitch-wrap { container-type: inline-size; }
.mv-lineups {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2.2cqi;
  opacity: 0; transition: opacity .6s ease;
}
.mv-lineups.mv-show { opacity: 1; }
.mv-lu-team {
  width: 25cqi; padding: 1cqi 1.1cqi 1.2cqi;
  background: rgba(var(--gl-dk-060a08-rgb),.58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: 0.8cqi; border-top: 0.35cqi solid var(--mv-home);
  box-shadow: 0 0.6cqi 2cqi rgba(var(--gl-shadow-rgb),calc(.35 * var(--gl-shadow-k)));
  transform: translateX(-3cqi); transition: transform .6s ease;
}
.mv-lu-team.mv-lu-away { border-top-color: var(--mv-away); transform: translateX(3cqi); }
.mv-lineups.mv-show .mv-lu-team { transform: none; }
.mv-lu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqi; margin-bottom: 0.8cqi; }
.mv-lu-name {
  font-family: 'Teko', sans-serif; font-weight: 600; font-size: clamp(11px, 1.9cqi, 26px);
  line-height: 1; color: var(--gl-ink); letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mv-lu-formation {
  flex: none; font-family: 'Teko', sans-serif; font-size: clamp(10px, 1.6cqi, 22px); line-height: 1;
  color: var(--mv-accent);
}
.mv-lu-pitch {
  position: relative; aspect-ratio: 68 / 100;
  border: 1px solid rgba(var(--gl-ink-rgb),.45); border-radius: 2px;
  background: linear-gradient(rgba(46, 125, 60, .32), rgba(30, 95, 45, .32));
}
.mv-lu-halfway { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(var(--gl-ink-rgb),.35); }
.mv-lu-circle {
  position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border: 1px solid rgba(var(--gl-ink-rgb),.35); border-radius: 50%;
}
.mv-lu-box { position: absolute; left: 22%; right: 22%; height: 14%; border: 1px solid rgba(var(--gl-ink-rgb),.35); }
.mv-lu-box-top { top: -1px; border-top: 0; }
.mv-lu-box-bottom { bottom: -1px; border-bottom: 0; }
.mv-lu-player {
  position: absolute; transform: translate(-50%, -30%);
  display: flex; flex-direction: column; align-items: center; gap: 0.15cqi;
}
.mv-lu-dot {
  width: clamp(12px, 2.1cqi, 30px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 clamp(7px, 1cqi, 14px) / 1 Inter, sans-serif;
  background: var(--mv-home); color: var(--mv-home-trim);
  border: 2px solid var(--mv-home-trim); box-shadow: 0 1px 3px rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k)));
}
.mv-lu-away .mv-lu-dot { background: var(--mv-away); color: var(--mv-away-trim); border-color: var(--mv-away-trim); }
.mv-lu-home .mv-lu-gk .mv-lu-dot { background: var(--mv-home-gk); color: #0d1310; border-color: var(--mv-home); }
.mv-lu-away .mv-lu-gk .mv-lu-dot { background: var(--mv-away-gk); color: #0d1310; border-color: var(--mv-away); }
.mv-lu-player-name {
  font: 600 clamp(7px, 1.05cqi, 14px) / 1.1 Inter, sans-serif; color: var(--gl-ink);
  text-shadow: 0 1px 2px rgba(var(--gl-shadow-rgb),calc(.9 * var(--gl-text-shadow-k))), 0 0 3px rgba(var(--gl-shadow-rgb),calc(.7 * var(--gl-text-shadow-k)));
  white-space: nowrap; max-width: 7.5cqi; overflow: hidden; text-overflow: ellipsis;
}
/* On a phone there's no room for names: numbers on the dots only. */
@container (max-width: 520px) {
  .mv-lu-player-name { display: none; }
  .mv-lu-team { width: 28cqi; }
}
.mv-kickoff-label {
  font-family: 'Teko', sans-serif; font-size: 22px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--mv-accent);
}
.mv-kickoff-teams {
  display: flex; gap: 40px; width: 100%; max-width: 520px; justify-content: space-between;
}
.mv-kickoff-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mv-kickoff-col:last-child { text-align: right; align-items: flex-end; }
.mv-kickoff-team-name {
  font-family: 'Teko', sans-serif; font-size: 20px; letter-spacing: .5px; font-weight: 600;
  color: var(--mv-ink);
}
.mv-kickoff-group { display: flex; flex-direction: column; gap: 2px; }
.mv-kickoff-group-label {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--mv-dim);
  margin-top: 4px;
}
.mv-kickoff-player { font-size: 12px; color: var(--mv-ink); }
/* =========================
   NAV: VIP items (NavMenu.razor). Global rather than NavMenu's scoped
   CSS on purpose, see the comment at the VIP Features group there.
   ========================= */
.nav-crown {
    margin-left: 6px;
    font-size: .72em;
    vertical-align: 1px;
}

.mud-nav-group.nav-vip-group > .mud-nav-link,
.mud-nav-item.nav-vip-item .mud-nav-link:not(.active):not(.mud-selected),
.mud-nav-item.nav-vip-membership .mud-nav-link:not(.active):not(.mud-selected) {
    color: var(--gl-t-f0cf6b) !important;
}

.mud-nav-group.nav-vip-group > .mud-nav-link .mud-nav-link-icon,
.mud-nav-item.nav-vip-membership .mud-nav-link:not(.active):not(.mud-selected) .mud-icon-root {
    color: var(--gl-gold-text) !important;
}

.mud-nav-item.nav-vip-membership .mud-nav-link {
    font-weight: 700;
}

/* =========================
   FORUM: VIP gold name (ForumThreadView / ForumCategoryView). Global so
   both pages share it. Everyone else's name is plain white, so the gold
   actually means something.
   ========================= */
.forum-name-vip {
    background: linear-gradient(90deg, #b8902a 0%, #f6dc8a 25%, #fff3c4 40%, #d4af37 60%, #f6dc8a 80%, #b8902a 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 800;
    animation: forum-name-shine 5s linear infinite;
}

.forum-name-crown {
    margin-right: 4px;
    font-size: .85em;
}

@keyframes forum-name-shine {
    to { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .forum-name-vip { animation: none; }
}

/* On the cream post body the light gold would wash out: a deeper gold. */
.forum-post-author-inline.forum-name-vip {
    background-image: linear-gradient(90deg, #6b4e0e 0%, #b8902a 30%, #e2bd4f 45%, #8a6416 65%, #b8902a 85%, #6b4e0e 100%);
}

/* Nav drawer footer clearance. The fixed .esm-footer (MainLayout, z-index
   1300) sits over the bottom of the full-height drawer, so without this the
   last nav item (Admin) is hidden behind it, and when the menu exactly fits
   there's nothing to scroll to reveal it.
   - Global on purpose: the same rule as a scoped ::deep in
     MainLayout.razor.css never matched the MudDrawer.
   - On the nav menu, not the drawer: .mud-drawer-content has max-height:100%
     and the menu overflows it, so padding on .mud-drawer only shrank that box
     without adding any scroll room. Padding the menu makes the scrolled
     content itself taller.
   - Top-level menu only (direct child of .mud-drawer-content): every
     MudNavGroup renders its own nested .mud-navmenu, and padding those
     left a blank 64px gap under each expanded group's last item.
   Footer is 56px (48px under 700px wide); 8px extra so the last item doesn't
   sit flush against it. */
.mud-drawer.esm-nav-drawer .mud-drawer-content > .mud-navmenu {
    padding-bottom: 64px;
}

@media (max-width: 700px) {
    .mud-drawer.esm-nav-drawer .mud-drawer-content > .mud-navmenu {
        padding-bottom: 56px;
    }
}

/* Cookie consent banner (markup in App.razor, behaviour in js/consent.js).
   Global because it lives outside every component. Sits above MainLayout's
   fixed footer (56px tall, z-index 1300). Accept and Decline share one size
   and style weight on purpose: declining must be as easy as accepting. */
.gl-consent {
    position: fixed;
    left: 50%;
    bottom: 72px;
    transform: translateX(-50%);
    z-index: 1400;
    width: min(640px, calc(100% - 32px));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--gl-dk-15151a);
    color: rgba(var(--gl-ink-rgb),0.88);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.35);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(var(--gl-shadow-rgb),calc(0.5 * var(--gl-shadow-k)));
    font-size: 0.88rem;
    line-height: 1.45;
}

.gl-consent[hidden] {
    display: none;
}

.gl-consent-text {
    margin: 0;
    flex: 1;
}

.gl-consent-text a {
    color: var(--gl-gold-text);
    white-space: nowrap;
}

.gl-consent-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.gl-consent-btn {
    min-width: 96px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--gl-gold-line);
    background: transparent;
    color: var(--gl-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.gl-consent-btn-accept {
    background: var(--gl-gold);
    color: var(--gl-on-gold-000000);
}

@media (max-width: 560px) {
    .gl-consent {
        flex-direction: column;
        align-items: stretch;
        bottom: 60px;
    }

    .gl-consent-buttons .gl-consent-btn {
        flex: 1;
    }
}

/* "Cookie settings" links (MainLayout footer, privacy policy) are buttons that
   call glConsent.reopen(); styled to read as links. */
.gl-cookie-settings-link {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Terms / Privacy links beside it in the MainLayout footer. */
.gl-footer-legal-link {
    color: inherit;
    text-decoration: underline;
}

/* =====================================================================
   Formerly css/design-system.css, merged in here so it isn't its own render-blocking
   request. It keeps the exact place it had in the cascade (it used to
   load right after the file above), so order still matters: keep it at
   the end of this file.
   ===================================================================== */

/* ==========================================
   ELITE SOCCER MANAGER DESIGN SYSTEM
   ========================================== */

/* =========================
   MUDBLAZOR NAV DRAWER THEME
   ========================= */

:root {
    --mud-palette-drawer-background: black !important;
    --mud-palette-drawer-text: white !important;
    --mud-palette-drawer-icon: white !important;
}


/* =========================
   PANELS
   ========================= */

.esm-panel,
.esm-panel-wide {

    width: 100%;

    margin: 0 auto;

    background: rgba(var(--gl-dk-0f0f0f-rgb),0.88);

    border: 1px solid rgba(var(--gl-ink-rgb),.10);

    border-radius: 16px;

    padding: 40px;

    box-shadow: 0 0 30px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));
}

.esm-panel {
    max-width: 700px;
}

.esm-panel-wide {
    max-width: 1700px;
}

/* =========================
   TITLES
   ========================= */

.esm-title {
    color: var(--gl-ink);

    text-align: center;

    font-size: 2.3rem;

    font-weight: bold;

    margin-bottom: 40px;
}

.esm-section-title {
    color: var(--gl-ink);

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 20px;
}


/* =========================
   LABELS
   ========================= */

.esm-label {
    display: block;

    color: var(--gl-ink);

    font-weight: 600;

    margin-bottom: 8px;
}


/* =========================
   HELP TEXT
   ========================= */

.esm-help-text {
    color: rgba(var(--gl-ink-rgb),.75);

    font-size: .9rem;

    line-height: 1.5;
}


/* =========================
   INPUTS
   ========================= */

.esm-input,
.form-control,
.form-select {
    color: #333;

    background: white;

    border-radius: 8px;
}


/* =========================
   PRIMARY BUTTON
   ========================= */

.esm-button-primary {
    width: 100%;

    margin-top: 20px;

    padding: 14px;

    border: none;

    border-radius: 10px;

    background: var(--gl-gold);

    color: var(--gl-on-gold-000000);

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

    transition: .2s;
}

.esm-button-primary:hover {
    background: #e6c75a;
}


/* =========================
   SECONDARY BUTTON
   ========================= */

.esm-button-secondary {
    padding: 14px 24px;

    border: 1px solid rgba(var(--gl-ink-rgb),.20);

    border-radius: 10px;

    background: rgba(var(--gl-ink-rgb),.08);

    color: var(--gl-ink);

    cursor: pointer;

    transition: .2s;
}

.esm-button-secondary:hover {
    background: rgba(var(--gl-ink-rgb),.15);
}


/* =========================
   TABLES
   ========================= */

.esm-table {
    width: 100%;

    color: var(--gl-ink);

    border-collapse: collapse;
}

.esm-table th {
    color: var(--gl-gold-text);

    font-weight: bold;

    padding: 12px;
}

.esm-table td {
    padding: 10px 12px;

    border-top: 1px solid rgba(var(--gl-ink-rgb),.08);
}


/* =========================
   CARDS
   ========================= */

.esm-card {
    background: rgba(var(--gl-dk-0f0f0f-rgb),.88);

    border: 1px solid rgba(var(--gl-ink-rgb),.10);

    border-radius: 14px;

    padding: 24px;

    color: var(--gl-ink);
}
/* =========================
   DASHBOARD TILE
   ========================= */

.esm-dashboard-tile {

    background: rgba(var(--gl-dk-0f0f0f-rgb),.88);

    border: 1px solid rgba(var(--gl-ink-rgb),.10);

    border-radius: 16px;

    padding: 30px;

    text-align: center;

    color: var(--gl-ink);

    box-shadow: 0 0 30px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));

    transition: .2s;
}

.esm-dashboard-tile:hover {

    transform: translateY(-2px);

    border-color: rgba(var(--gl-gold-line-rgb),.35);

    box-shadow: 0 8px 35px rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k)));
}

.esm-dashboard-title {

    font-size: 1.3rem;

    font-weight: 600;

    margin-bottom: 25px;
}

.esm-dashboard-value {

    font-size: 3rem;

    font-weight: bold;
}

/* =========================
   DASHBOARD TILE
   ========================= */

.esm-dashboard-tile {

    background: rgba(var(--gl-dk-0f0f0f-rgb),.88);

    border: 1px solid rgba(var(--gl-ink-rgb),.10);

    border-radius: 16px;

    padding: 30px;

    color: var(--gl-ink);

    text-align: center;

    box-shadow: 0 0 30px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));

    transition: .2s;
}

.esm-dashboard-tile:hover {

    transform: translateY(-2px);

    border-color: rgba(var(--gl-gold-line-rgb),.35);

    box-shadow: 0 8px 35px rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k)));
}

.esm-dashboard-title {

    color: var(--gl-ink);

    font-size: 1.3rem;

    font-weight: 600;

    margin-bottom: 20px;
}

.esm-dashboard-value {

    color: var(--gl-ink);

    font-size: 3rem;

    font-weight: bold;
}

/* ================================
   PUBLIC HOMEPAGE ("/")
   New SEO-facing marketing page. Sits directly on the global body
   background (images/background.png, set in app.css) — no background
   of its own needed. Reuses existing esm-card/esm-section-title/
   esm-help-text/esm-button-primary/esm-button-secondary throughout;
   only the layout-specific classes below are new. Color values match
   the rest of this file (gold #d4af37, panel bg rgba(15,15,15,.88))
   rather than introducing CSS variables that don't exist elsewhere
   in this project.
   ================================ */

.esm-landing-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
}

.esm-landing-logo {
    height: 40px;
    width: auto;
}

.esm-hero-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 32px;
    text-align: center;

    background: rgba(var(--gl-dk-0f0f0f-rgb),0.88);
    border: 1px solid rgba(var(--gl-ink-rgb),.10);
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));
}

.esm-hero-subtitle {
    color: var(--gl-gold-text);
    font-weight: 600;
    letter-spacing: .02em;
    margin-top: 8px;
}

.esm-hero-text {
    color: rgba(var(--gl-ink-rgb),.85);
    margin: 20px auto 32px;
    max-width: 52ch;
    line-height: 1.6;
}

.esm-hero-cta {
    display: inline-block;
    width: auto;
    padding: 14px 32px;
}

.esm-hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
}

.esm-hero-buttons .esm-hero-cta {
    margin-top: 0;
}

.esm-feature-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 32px;
    text-align: center;
}

.esm-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
    text-align: left;
}

.esm-feature-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 16px;
    border: 1px solid rgba(var(--gl-ink-rgb),.10);
}

.esm-feature-card h3 {
    color: var(--gl-ink);
    margin-bottom: 8px;
}

.esm-mobile-showcase {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 32px;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    gap: 48px;
}

.esm-mobile-showcase-text {
    text-align: left;

    padding: 40px 44px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: rgba(var(--gl-dk-0f0f0f-rgb),0.88);
    border: 1px solid rgba(var(--gl-ink-rgb),.10);
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));
}

.esm-mobile-showcase-text .esm-section-title {
    margin-bottom: 16px;
}

.esm-mobile-showcase-text .esm-help-text {
    max-width: 44ch;
    margin-bottom: 28px;
}

.esm-app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.esm-app-badge-pill {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 999px;
    color: var(--gl-gold-text);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.esm-phone-frame {
    width: 220px;
    flex-shrink: 0;
}

.esm-phone-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.esm-cta-banner {
    text-align: center;
    padding: 64px 32px;
    background: rgba(var(--gl-dk-0f0f0f-rgb),0.88);
    border-top: 1px solid rgba(var(--gl-ink-rgb),.10);
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.10);
}

.esm-cta-banner .esm-hero-cta {
    margin-top: 20px;
}

/* Links centred on top, copyright centred underneath. Side by side
   (space-between) only worked while there were three or four links. */
.esm-landing-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 32px;
}

/* The links must be allowed to wrap: the public pages carry 8-9 footer
   links, and on one unwrappable line everything past the first few ran off
   the right edge of a phone screen. Phones get a two-column grid below. */
.esm-landing-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
}

.esm-landing-footer a {
    color: rgba(var(--gl-ink-rgb),.75);
    text-decoration: none;
}

.esm-landing-footer a:hover {
    color: var(--gl-gold-text);
}

/* esm-feature-carousel-mobile-wrap is hidden by default (desktop) —
   only the ≤640px media query below turns it on, alongside hiding the
   desktop grid. This MUST come before that media query in the file:
   both rules have identical specificity, so when both apply (on an
   actual mobile viewport) the one later in source order wins — having
   this "hidden" rule declared AFTER the media query, as it originally
   was, meant it always won regardless of viewport, keeping the
   carousel invisible even on mobile. */
.esm-feature-carousel-mobile-wrap {
    display: none;
}

@media (max-width: 640px) {
    .esm-landing-nav,
    .esm-feature-section,
    .esm-cta-banner,
    .esm-landing-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .esm-hero-content {
        padding: 32px 20px;
    }

    /* Scroll cue — signals "there's a short bit more below," rather
       than the page reading as if it might scroll forever. Pure CSS
       pseudo-element (no new markup needed): appends after the hero
       card's existing content (CTA button, login link), so it just
       reads as a small bouncing arrow sitting under them. */
    .esm-hero-content::after {
        content: "↓";
        display: block;
        margin-top: 20px;
        font-size: 1.5rem;
        color: rgba(var(--gl-gold-text-rgb),.6);
        animation: esm-scroll-cue-bounce 1.6s ease-in-out infinite;
    }

    @keyframes esm-scroll-cue-bounce {
        0%, 100% { transform: translateY(0); opacity: .6; }
        50% { transform: translateY(6px); opacity: 1; }
    }

    /* Real MudCarousel replaces the hand-rolled CSS scroll-snap
       carousel that didn't behave reliably (stuck swiping, off-center
       snapping) — the desktop grid is simply hidden here and the
       carousel (already interactive-only via its own render-mode
       island in Home.razor) shown in its place. */
    .esm-feature-section {
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .esm-feature-section .esm-section-title {
        padding: 0 20px;
    }

    .esm-feature-grid-desktop {
        display: none;
    }

    .esm-feature-carousel-mobile-wrap {
        display: block;
        margin-top: 24px;
        margin-left: -12px;
    }

    /* The "already on your phone" app pitch is the least useful
       section for someone who is, in fact, already on their phone —
       cutting it removes the other major scroll chunk entirely
       rather than just trimming it. */
    .esm-mobile-showcase {
        display: none;
    }

    .esm-cta-banner {
        padding: 40px 20px;
    }

    .esm-landing-footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding-top: 32px;
        padding-bottom: 32px;
        border-top: 1px solid rgba(var(--gl-ink-rgb),.10);
    }

    /* Two even columns of links, each a full-height tap target, instead of
       a ragged centred wrap where line lengths depend on the language. */
    .esm-landing-footer-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        width: 100%;
        max-width: 360px;
    }

    /* text-wrap: balance splits a two-word label evenly over two lines;
       single long words (Dutch "Gebruiksvoorwaarden") are never broken. */
    .esm-landing-footer-links a {
        display: block;
        padding: 10px 0;
        font-size: 0.9rem;
        text-wrap: balance;
    }

    .esm-landing-footer .esm-help-text {
        font-size: 0.85rem;
    }
}

/* ================================
   MOBILE FEATURE CAROUSEL (MudCarousel)
   Matches the dark/gold theme — MudCarousel's own default styling is
   MudBlazor's generic light theme, which would look completely out of
   place here otherwise.
   ================================ */

.mobile-feature-carousel {
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Our own Previous/Next arrows and dots (MobileFeatureCarousel.razor
   explains why they replace MudCarousel's built-in ones), placed where
   those sat. Colours are forced: icon buttons default to Color.Inherit,
   which on this page (LandingLayout, not MainLayout — may not carry the
   same dark MudThemeProvider setup the rest of the app does) can resolve
   to a dark/invisible color against this dark background. */
.mobile-feature-carousel-wrap {
    position: relative;
}

.mobile-feature-carousel-arrow {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    opacity: 0.75;
    color: var(--gl-gold-text) !important;
}

.mobile-feature-carousel-arrow .mud-icon-root {
    color: var(--gl-gold-text) !important;
}

.mobile-feature-carousel-prev {
    left: 4px;
}

.mobile-feature-carousel-next {
    right: 4px;
}

.mobile-feature-carousel-dots {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 3;
}

.mobile-feature-carousel-dot .mud-icon-root {
    font-size: 0.75rem !important;
    color: rgba(var(--gl-gold-text-rgb),.35) !important;
}

.mobile-feature-carousel-dot.current .mud-icon-root {
    color: var(--gl-gold-text) !important;
}

.mobile-carousel-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    box-sizing: border-box;
}

.mobile-carousel-card img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    background: rgba(0,0,0,.3);
    border-radius: 10px;
    margin-bottom: 16px;
}

.mobile-carousel-card h3 {
    color: var(--gl-ink);
    margin-bottom: 8px;
}

/* Dark full-page surface for anonymous/marketing pages.
   Home.razor has its own near-identical `.landing-page` in Home.razor.css,
   but that file is SCOPED — it only applies to Home. Any other page reusing
   the class name silently gets no background at all, which on a dark theme
   means white text on white: invisible. This is the global equivalent, for
   the search landing pages (/soccer-manager-game, /how-to-play) and any
   future marketing page.

   Differs from `.landing-page` in one respect on purpose: align-items is
   stretch rather than center, so full-width <section> blocks lay out
   normally instead of collapsing to their content width. Individual
   sections set their own max-width where they need one. */
.esm-landing-surface {
    width: 100%;
    min-height: 100vh;

    /* The background-COLOR is load-bearing, not decoration. The image is
       `fixed` + `no-repeat`, so on a page taller than the viewport it paints
       one viewport's worth and leaves the rest showing whatever ancestor is
       behind — which is light (rgb(244,246,249)). All the text on these
       pages is white, so without this colour the body copy renders at a
       1.08:1 contrast ratio, i.e. invisible. Measured, not guessed. */
    background-color: var(--gl-dk-0f0f0f);
    background-image: url('/images/landingpagenologo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 40px 16px;

    position: relative;
    overflow-x: hidden;
}

.esm-landing-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* Everything above the ::before scrim. */
.esm-landing-surface > * {
    position: relative;
    z-index: 5;
}

@media (max-width: 480px) {
    .esm-landing-surface {
        padding: 24px 12px;
    }
}

/* ================================
   MANUAL DOCUMENTATION PAGES (/manual, /manual/{slug})
   Shared globally rather than as ~20 nearly-identical *.razor.css files —
   one topic page and the hub are structurally the same article/index shape,
   so the layout lives here once. Page-specific content is markup only.
   Mirrors HowToPlay.razor.css's article treatment (72ch measure, same
   list/shot/cta spacing) so the manual reads as part of the same site.
   ================================ */

.manual-logo {
    height: 48px;
    width: auto;
}

/* Every manual page's wrapper carries `man-page` alongside
   esm-landing-surface (see ManualIndex.razor and each topic page). Row +
   space-between (the esm-landing-footer default) only reads cleanly on a
   page with a hard max-width that leaves room to breathe; these pages'
   link row alone gets close enough to full width that the copyright line
   ends up jammed against "Terms of Service" with no visible gap. Stacking
   it, same fix HowToPlay/About/SoccerManagerGame each apply locally. */
.man-page .esm-landing-footer {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.manual-article {
    max-width: 72ch;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
}

.manual-lede {
    margin-bottom: 2.5rem;
}

.manual-article h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    text-align: left;
}

.manual-list {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.manual-list li {
    margin-bottom: 0.6rem;
}

.manual-shot {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75rem 0;
    border-radius: 12px;
}

.manual-cta {
    margin-top: 3rem;
}

/* "More in the Manual" cross-link block, rendered at the bottom of every
   topic page by ManualCrossLinks.razor. */
.manual-crosslinks {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.10);
}

.manual-crosslinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 1rem;
}

.manual-crosslinks-grid a {
    display: block;
    padding: 14px 16px;
    border: 1px solid rgba(var(--gl-ink-rgb),.10);
    border-radius: 10px;
    color: rgba(var(--gl-ink-rgb),.85);
    text-decoration: none;
    font-size: .9rem;
    transition: .2s;
}

.manual-crosslinks-grid a:hover {
    border-color: rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
}

.manual-back-link {
    margin-top: 1.5rem;
    text-align: center;
}

/* Hub page (/manual) — a wider surface than a single article, since it's
   an index of category groups rather than a read top-to-bottom piece. */
.manual-hub {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
}

.manual-hub-lede {
    max-width: 68ch;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.manual-category {
    margin-top: 2.75rem;
}

.manual-category-title {
    color: var(--gl-ink);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
}

.manual-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.manual-topic-card {
    display: block;
    padding: 20px;
    background: rgba(var(--gl-dk-0f0f0f-rgb),0.88);
    border: 1px solid rgba(var(--gl-ink-rgb),.10);
    border-radius: 14px;
    text-decoration: none;
    transition: .2s;
}

.manual-topic-card:hover {
    border-color: rgba(var(--gl-gold-line-rgb),.4);
    transform: translateY(-2px);
}

.manual-topic-card h3 {
    color: var(--gl-ink);
    font-size: 1rem;
    margin-bottom: 6px;
}

.manual-topic-card p {
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: .85rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 640px) {
    .manual-article,
    .manual-hub {
        padding: 1.75rem 1rem 1rem;
    }

    .manual-article h2 {
        margin-top: 2rem;
    }
}

/* ==========================================
   PINNED-PAGE SCROLL REGION
   A page that wants ITS OWN scrollable region bounded to the viewport,
   instead of the whole document scrolling — e.g. a dense data table with
   a sticky header/frozen column, where those need a scroll container
   that's actually clipped to the visible viewport to stick against.
   Without this, a page can grow taller than the viewport (its own inner
   list included), so the BROWSER adds its own outer scrollbar too —
   position:sticky then sticks relative to the inner box, which most
   users scroll straight past via the outer one, so nothing ever visibly
   sticks. Apply `.esm-pinned-page` to the page's root wrapper and
   `.esm-pinned-page-scroll` to the one child that should scroll (put
   any non-scrolling header/toolbar content as earlier siblings, outside
   the scroll child).

   64px = the app bar's actual rendered height (MainLayout.razor.css's
   own CSS claims 96px via `!important`, but a MudBlazor selector
   specificity issue means that override doesn't actually win — 64px is
   what really renders, confirmed live rather than trusted from the
   source). "64px" (second one) = the fixed .esm-footer's clearance
   value. If a page's own wrapper adds further padding/margin around
   the element carrying `.esm-pinned-page` (e.g. Squad/Training's shared
   `.manager-settings-page { padding: 30px }`), that page needs to
   account for it locally — see Squad.razor.css/Training.razor.css for
   the pattern (chain both classes to override `height` with the extra
   amount subtracted too).

   Desktop/tablet only (>= 901px): below that, these tables already
   degrade to a simpler/stacked layout, and pinning a scroll region on
   phones would fight the full-page-scroll phones are built for.

   ALSO requires >= 820px of actual viewport height. The height calc
   above only reserves room for the app bar + footer — every other
   thing a page stacks above `.esm-pinned-page-scroll` (title, stat
   cards, filter bar, sticky table head) still eats directly into
   whatever's left, with no floor. On a short-enough browser window
   (a laptop's real usable height after browser chrome + OS taskbar is
   often well under the 1200px the screen's resolution suggests) that
   leftover collapses to zero: every player row ends up scrolled out of
   a sliver-sized box, and since the box is so small its scrollbar is
   easy to miss entirely — reads as "no players, and no scrollbar" even
   though the data and the scroll region are technically both there.
   Below this height, fall back to the same plain full-page scroll the
   phone layout already relies on instead of risking that collapse.
   ========================================== */
@media (min-width: 901px) and (min-height: 820px) {
    .esm-pinned-page {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 64px - 64px);
        overflow: hidden;
    }

    .esm-pinned-page-scroll {
        flex: 1;
        min-height: 0; /* lets a flex child actually shrink below its content size, instead of overflowing its parent — required for the overflow below to ever engage */
        overflow: auto;
    }
}