/* ================================
   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;
}