/* ================================
   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.
================================ */

/* ================================
   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(0,0,0,0.08);
}

.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(0,0,0,0.06);
}

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

.player-rating {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #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(255,255,255,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(0,0,0,0.15);
}

.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(0,0,0,0.15);
}

/* ================================
   ⚽ 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(0, 0, 0, 0.15);

    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(255, 255, 255, 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(0,0,0,0.25);
}

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

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

    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.25);
}

.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(255,255,255,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;
}

/* Matchday badge */

.matchday-badge {
    display: inline-block;

    margin-bottom: 16px;

    padding: 10px 18px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #4c1d95,
        #7c3aed
    );

    color: white;

    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: white;
    font-size: 2rem;
    margin-bottom: 4px;
}

.manage-header p {
    color: rgba(255,255,255,.7);
    margin: 0;
}

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

.manage-sidebar,
.manage-content {
    background: rgba(18,22,30,.78);
    border: 1px solid rgba(255,255,255,.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: white;
    text-decoration: none;

    border-radius: 12px;

    transition: .2s;
}

.manage-nav-link:hover {
    background: rgba(255,255,255,.08);
}

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

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

.manage-card h3 {
    color: white;
    margin-bottom: 20px;
}

.manage-label {
    display: block;
    color: #bbb;
    margin-bottom: 6px;
    font-size: .9rem;
}

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

    border-radius: 10px;

    border: 1px solid rgba(255,255,255,.12);

    background: rgba(255,255,255,.06);

    color: white;
}

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

.manage-info {
    color: white;
    margin-bottom: 18px;
}

.manage-info strong {
    display: block;
    color: #999;
    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;
}

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

#europe-map-container .country {
    fill: #2B313C !important;
    stroke: #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: #42A5F5 !important;
    filter: drop-shadow(0 0 10px rgba(66,165,245,.9));
}

#europe-map-container .selected {
    fill: #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:white;

    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(212,175,55,.10), transparent 55%),
        linear-gradient(160deg, #16161a, #0a0a0c);
    border: 1px solid rgba(212,175,55,.3);
    border-radius: 12px;
    box-shadow:
        0 0 0 1px rgba(212,175,55,.06),
        0 12px 32px rgba(0,0,0,.55),
        0 0 24px rgba(212,175,55,.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: #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(212,175,55,.14) !important;
    color: #ffd76a !important;
}

.mud-popover .mud-menu-item .mud-icon-root,
.mud-popover .mud-menu-item-icon .mud-icon-root {
    color: #d4af37 !important;
    filter: drop-shadow(0 0 4px rgba(212,175,55,.45));
    transition: color .18s ease;
}

.mud-popover .mud-menu-item:hover .mud-icon-root {
    color: #ffd76a !important;
}

.mud-popover .mud-divider {
    border-color: rgba(212,175,55,.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: #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(212,175,55,.14) !important;
    color: #ffd76a !important;
}

.esm-header-menu-logout-btn .mud-icon-root {
    color: #d4af37 !important;
    filter: drop-shadow(0 0 4px rgba(212,175,55,.45));
}

.esm-header-menu-logout-btn:hover .mud-icon-root {
    color: #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: #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(212,175,55,.14);
    color: #ffd76a;
}

.esm-header-menu-link .mud-icon-root {
    color: #d4af37;
    filter: drop-shadow(0 0 4px rgba(212,175,55,.45));
}

.esm-header-menu-link:hover .mud-icon-root {
    color: #ffd76a;
}

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

.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(0, 0, 0, .6);
  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(11, 15, 13, .92);
  border: 1px solid rgba(224, 51, 47, .5);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}

.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: #e0332f; font-weight: 700;
}

.mv-redcard-name {
  font-family: 'Teko', sans-serif;
  font-size: 34px; line-height: 1.05; color: #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(0, 0, 0, .6);
}
.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(11, 15, 13, .78);
  border: 1px solid rgba(201, 242, 76, .28);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  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);
}

/* 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(11, 15, 13, .88);
  opacity: 1; transition: opacity .5s ease;
}
.mv-kickoff.mv-kickoff-hide { opacity: 0; pointer-events: none; }
.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); }