/* GM Sports interface. This stylesheet is intentionally loaded after the legacy
   screens so shared controls and existing routes use the same design system. */
:root {
  --bg: var(--surface-bg);
  --panel: var(--surface-panel);
  --panel-2: var(--surface-card);
  --line: var(--surface-border);
  --accent: var(--color-accent);
  --accent-light: var(--color-accent-light);
  --accent-ink: var(--color-accent-ink);
  --good: var(--color-pos);
  --bad: var(--color-neg);
  --bad-text: var(--color-neg-text);
  --warn: var(--color-warn);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-lg);
  --modern-edge: var(--surface-border-strong);
  --modern-shadow: var(--shadow-md);
  --menu-wood: #4a3520;
  --menu-wood-hi: #5a4227;
  --menu-edge: #a8843f;
  --menu-ink: #f6e7c8;
}
.modern-shell {
  max-width: 1920px;
  padding: var(--space-4) var(--space-8) var(--space-8);
  gap: var(--space-4);
}
.modern-shell header.topbar {
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--modern-edge);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: var(--modern-shadow);
}
.modern-shell .club-identity { min-width: 0; gap: var(--space-3); }
.modern-shell .topbar-left .brand { flex: none; }
.modern-shell .club-details { min-width: 0; }
.modern-shell .club-details .club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modern-shell .club-chips { gap: var(--space-2); }
.modern-shell .club-chips .chip { padding: var(--space-1) var(--space-2); border-color: var(--modern-edge); }
.modern-shell .user-links { gap: var(--space-3); }
.modern-shell .user-links a { display: inline-flex; align-items: center; min-height: 44px; }
.modern-shell .mainmenu {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-1);
  border: 1px solid var(--modern-edge);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: none;
  z-index: 20;
}
.modern-shell .menu-logo { display: none; }
.modern-shell .menu-tile,
.modern-shell .menu-group.current .menu-tile {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-1) var(--space-3);
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; box-shadow: none; text-shadow: none;
  transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modern-shell .menu-group.current .menu-tile { background: var(--row-hl); border-color: var(--accent); }
.modern-shell .menu-tile:hover { background: var(--panel-2); transform: none; filter: none; }
.modern-shell .menu-tile:active { transform: scale(0.97); }
.modern-shell .menu-tile img { width: 32px; height: 32px; margin: 0; filter: none; }
.modern-shell .menu-title { font-size: 0.875rem; text-shadow: none; }
.modern-shell .caret { display: inline; }
.modern-shell .tile-count { display: inline-block; right: -8px; }
.modern-shell .tile-count[hidden] { display: none; }
.modern-shell .menu-list,
.modern-shell .menu-group.current .menu-list { display: none; }
.modern-shell .menu-group.open .menu-list {
  display: grid; position: absolute; top: calc(100% + 8px); left: 0; right: auto;
  width: 256px; min-width: 0; max-width: calc(100vw - 32px); max-height: min(70dvh, 480px); overflow-y: auto;
  margin: 0; padding: var(--space-2); background: var(--bg);
  border: 1px solid var(--modern-edge); border-radius: 12px; box-shadow: var(--modern-shadow);
}
.modern-shell .menu-group:nth-child(n+4).open .menu-list { left: auto; right: 0; }
.modern-shell .menu-list li { padding: 0; text-indent: 0; }
.modern-shell .menu-list li::before { content: none; }
.modern-shell .menu-list a,
.modern-shell .menu-group.current .menu-list a,
.modern-shell .menu-group.open .menu-list a {
  display: flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3);
  border-radius: 8px; color: var(--text); text-shadow: none;
}
.modern-shell .menu-list a:hover { background: var(--panel-2); text-decoration: none; }
.modern-shell .menu-list a.active { background: var(--row-hl); box-shadow: inset 3px 0 var(--accent); }
.modern-shell .board { background: var(--panel); border: 1px solid var(--modern-edge); border-radius: 16px; box-shadow: var(--modern-shadow); padding: var(--space-6); }
.modern-shell .main > h1:first-child { margin-bottom: var(--space-6); }
.modern-shell .site-footer { padding-block: var(--space-4); }

.auth-split {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  place-items: stretch; gap: clamp(16px, 2vw, 30px);
  max-width: 1660px; margin: auto;
  padding: clamp(16px, 3.5dvh, 36px) clamp(18px, 3vw, 52px);
  align-items: stretch; position: relative; isolation: isolate;
}
.auth-split::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 7% 75%, rgba(42, 118, 87, 0.24), transparent 43%),
    radial-gradient(ellipse at 94% 12%, rgba(52, 95, 111, 0.27), transparent 48%),
    linear-gradient(rgba(5, 14, 24, 0.89), rgba(5, 14, 24, 0.93)),
    url('/assets/torcida-guache.webp') center / cover;
}
.auth-atmosphere {
  display: flex; flex-direction: column; justify-content: end;
  position: relative; min-width: 0;
  min-height: min(740px, 85dvh); padding: clamp(24px, 3vw, 52px);
  border: 1px solid var(--modern-edge); border-radius: 16px;
  background: linear-gradient(0deg, var(--bg) 0%, transparent 100%), url('/assets/torcida-guache.webp') center / cover;
  box-shadow: var(--modern-shadow);
}
.auth-kicker { color: var(--accent-light); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.1em; }
.login-music-toggle {
  position: absolute; top: clamp(28px, 5dvh, 56px); right: clamp(28px, 4vw, 70px); z-index: 1;
  display: grid; place-items: center; width: 42px; height: 42px; padding: 9px;
  border: 1px solid rgba(205, 255, 175, 0.5); border-radius: 12px;
  color: var(--accent-light); background: rgba(8, 26, 34, 0.76);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); cursor: pointer;
}
.login-music-toggle svg { width: 22px; height: 22px; }
.login-music-toggle .sound-muted { display: none; }
.login-music-toggle[data-playing="false"] .sound-muted { display: initial; }
.login-music-toggle[data-playing="false"] .sound-waves { display: none; }
.login-music-toggle:hover { background: rgba(39, 77, 65, 0.94); }
.login-music-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.auth-atmosphere h1 { margin: var(--space-4) 0; max-width: 12ch; font-size: clamp(2rem, 1.3333rem + 3.3333vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.auth-atmosphere p { max-width: 42ch; }
.auth-pillars { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.auth-pillars span { padding: var(--space-1) var(--space-3); border: 1px solid var(--modern-edge); border-radius: 8px; background: var(--bg); color: var(--muted); }
.auth-split .auth-form-card {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: none; min-height: 100%; justify-self: stretch;
  padding: var(--space-8); border: 1px solid var(--modern-edge);
  border-radius: 16px; background: var(--bg); box-shadow: var(--modern-shadow);
}
.auth-split .brand-large .logo-plate { --logo-h: 80px; }
.auth-split .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.auth-split .tabs button { min-height: 44px; padding: var(--space-2); }
.auth-split form { display: grid; gap: var(--space-3); }
.auth-split .field { margin: 0; }
.auth-split .field input { width: 100%; min-height: 48px; }
.auth-split .error:empty, .auth-split form > .muted:empty { display: none; }
.auth-split .btn.primary { min-height: 48px; }

/* Persistent filter labels need their own track after the transfer-desk integration. */
.gm-filter-panel .field { flex: 1 1 128px; min-width: 0; max-width: min(100%, 22rem); margin: 0; }
.gm-filter-panel .field > span { display: block; font-size: 0.75rem; color: var(--gm-muted); }
.gm-filter-panel .field :is(input, select) { width: 100%; min-width: 0; height: 44px; min-height: 44px; box-sizing: border-box; font-size: 1rem; line-height: 1.2; }
.gm-filter-panel .field > span { margin-bottom: 4px; }
.gm-filter-panel:has(> .field) { align-items: end; }
/* The scouting filters: the heading on its own row, so the six fields share the full width and their texts ("Todas as posições") fit. */
.gm-scout-filters { flex-wrap: wrap; grid-template-columns: minmax(0, 1fr); }   /* (phones: the panel is a grid, heading above the fields) */
.gm-scout-filters > .gm-results-heading { flex: 1 1 100%; }
.gm-scout-filters > .market-filters { flex: 1 1 100%; }
@media (max-width: 520px) { .gm-scout-filters .field:has(> select) { flex: 1 1 100%; } }   /* a phone: the two comboboxes get a whole row, so "Todas as posições" fits */
.gm-metric-label { white-space: normal; }

@media (max-width: 1100px) {
  .modern-shell { padding-inline: var(--space-4); }
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: var(--space-4); padding: var(--space-4); }
}
@media (max-width: 760px) {
  .modern-shell { padding: var(--space-2) var(--space-2) calc(96px + env(safe-area-inset-bottom)); gap: var(--space-3); }
  .modern-shell .mainmenu { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 40; }
  /* The bar: light wood with a gold edge, big touch targets (64 px), 34 px icons and 13 px labels. */
  .modern-shell .mainmenu { gap: var(--space-1); padding: var(--space-1); background: var(--menu-wood); border: 1px solid var(--menu-edge); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); }
  .modern-shell .menu-tile, .modern-shell .menu-group.current .menu-tile { position: relative; flex-direction: column; gap: 2px; min-height: 64px; padding: var(--space-1); border-radius: 12px; color: var(--menu-ink); }
  .modern-shell .menu-tile:hover { background: var(--menu-wood-hi); }
  .modern-shell .menu-tile img { width: 34px; height: 34px; }
  .modern-shell .menu-title { position: static; font-size: 0.8125rem; line-height: 1.15; color: var(--menu-ink); }
  .modern-shell .caret { display: none; }
  /* The current section and the one that is open: the painted tile texture under a dark wash (text stays above 5:1) and a gold edge. */
  .modern-shell .menu-group.current .menu-tile, .modern-shell .menu-group.open .menu-tile {
    background: linear-gradient(rgba(58, 38, 16, 0.66), rgba(58, 38, 16, 0.66)), url("/assets/tex-tile-active.jpg") center / cover; border-color: var(--accent); }
  .modern-shell .menu-group.current .menu-title, .modern-shell .menu-group.open .menu-title { color: #fff6dc; }
  .modern-shell .tile-count { top: 2px; right: 6px; }
  /* The open list: a sheet above the bar, as wide as the bar (anchored to it, not to the tile), rounded, edged and shadowed against the page. */
  .modern-shell .menu-group { position: static; }
  .modern-shell .menu-group:nth-child(n).open .menu-list {
    top: auto; bottom: calc(100% + 12px); left: 0; right: 0; width: auto; max-width: none; gap: 2px; padding: var(--space-2);
    background: var(--menu-wood); border: 1px solid var(--menu-edge); border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 -4px 12px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.6); }
  .modern-shell .menu-group.open .menu-list a { min-height: 52px; padding: 12px 20px; border-radius: 10px; font-size: 1.15rem; line-height: 1.3; color: var(--menu-ink); }
  .modern-shell .menu-group.open .menu-list a:hover { background: var(--menu-wood-hi); }
  .modern-shell .menu-group.open .menu-list a.active {
    background: linear-gradient(rgba(58, 38, 16, 0.66), rgba(58, 38, 16, 0.66)), url("/assets/tex-tile-active.jpg") center / cover; box-shadow: inset 4px 0 var(--accent); color: #fff6dc; font-weight: 700; }
  .modern-shell .board { padding: var(--space-4); }
  .modern-shell header.topbar { gap: var(--space-2); padding: var(--space-2); }
  .modern-shell .club-identity { flex: 1 1 0; }   /* the logo and the club share the first row; the name is cut with an ellipsis, never wrapped */
  .modern-shell .topbar-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .modern-shell .user-links { flex-wrap: wrap; gap: var(--space-2); }
  .auth-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .auth-atmosphere { min-height: 240px; padding: var(--space-6); }
  .auth-atmosphere h1 { max-width: 18ch; }
  .auth-pillars { display: none; }
  .auth-split .auth-form-card { min-height: auto; padding: var(--space-6); }
  .login-music-toggle { top: 28px; right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .modern-shell .menu-tile { transition: none; }
}

/* Lightweight game feedback, without layout shifts or blocking navigation. */
@keyframes gm-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gm-pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .modern-shell .board > .main > :is(.dashboard, .gm-view, .card, section) { animation: gm-arrive 190ms ease-out both; }
  .modern-shell .menu-group.open .menu-list, .gm-audio-settings:not([hidden]) { animation: gm-pop 140ms ease-out both; }
  .modern-shell :is(.btn, .menu-tile, .gm-tab-rail a, .chip) { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }
}
.gm-audio-control { position: fixed; right: 18px; bottom: 18px; z-index: 65; font: 500 13px/1.4 system-ui, sans-serif; color: #eff8fb; }
/* The login has its own single music/mute button; game sound settings return after entry. */
body:has(.auth-split) .gm-audio-control { display: none; }
.gm-audio-toggle { min-height: 42px; border: 1px solid #4b6d78; border-radius: 100px; padding: 8px 14px; color: var(--color-accent-light); background: #182e3b; cursor: pointer; box-shadow: 0 8px 28px #0006; }
.gm-audio-toggle:focus-visible, .gm-audio-settings :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.gm-audio-settings { position: absolute; right: 0; bottom: calc(100% + 8px); width: 238px; max-width: calc(100vw - 24px); display: grid; gap: 12px; padding: 16px; background: #172a39; border: 1px solid #466171; border-radius: 14px; box-shadow: 0 16px 35px #0009; }
.gm-audio-settings[hidden] { display: none; }
.gm-audio-settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gm-audio-settings input[type=range] { width: 100px; accent-color: var(--color-accent); }
.gm-audio-settings input[type=checkbox] { flex: 0 0 22px; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; border-radius: 5px; accent-color: var(--color-accent); }
.gm-audio-settings small { color: var(--muted); }
@media (max-width: 760px) {
  .gm-audio-control { right: 12px; bottom: calc(89px + env(safe-area-inset-bottom)); }
  .gm-audio-toggle { padding: 7px 11px; min-height: 38px; }
  .gm-audio-settings { max-height: min(50dvh, 260px); overflow-y: auto; }
}

/* Rating glyphs have intrinsic width even when a table is horizontally scrollable. */
.stars { display: inline-flex; align-items: center; width: max-content; max-width: none; letter-spacing: 0; line-height: 1; vertical-align: middle; }
.stars > span { flex: 0 0 auto; }
.stars .half { margin-right: 0; }
.dash-squad .table-wrap { overflow-x: auto; }
@media (max-width: 760px) {
  .dash-squad table { width: 100%; min-width: 0; table-layout: fixed; }
  .dash-squad :is(th, td):nth-child(n+4) { display: none; }
  .dash-squad :is(th, td) { padding: 9px 5px; }
  .dash-squad :is(th, td):first-child { width: 50%; min-width: 0; text-align: left; }
  .dash-squad :is(th, td):nth-child(2) { width: 18%; }
  .dash-squad :is(th, td):nth-child(3) { width: 32%; white-space: nowrap; }
  .dash-squad td:first-child .person { display: flex; width: 100%; }
  .dash-squad td:first-child .person a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-squad td:nth-child(2) .pos { min-width: 0; padding-inline: 4px; font-size: 0.78rem; }
  .dash-squad .stars { font-size: clamp(0.65rem, 2.8vw, 0.85rem); }
  .squad-table .stars { font-size: 0.82em; }
}

/* Stadium at night: dark, crisp surfaces with a single vivid action colour. */
html { background: var(--bg); scroll-padding-top: 1rem; }
body {
  color: var(--text);
  background: radial-gradient(ellipse 70% 36rem at 90% -12%, rgba(50, 140, 109, 0.19), transparent 75%),
    radial-gradient(ellipse 55% 34rem at -12% 27%, rgba(35, 77, 120, 0.19), transparent 74%),
    var(--bg);
  background-attachment: scroll;
  overflow-x: clip;
}
::selection { color: var(--accent-ink); background: var(--accent); }
h1, h2, h3 { letter-spacing: -0.025em; }
h1 { font-weight: 790; }
h2 { font-weight: 740; }
h3 { font-weight: 720; }
a { color: var(--accent-light); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
.muted { color: var(--muted); }
.modern-shell {
  width: min(100%, 1660px);
  padding: clamp(12px, 1.7vw, 28px) clamp(12px, 2.1vw, 36px) 32px;
  gap: 14px;
}
.modern-shell header.topbar {
  border: 1px solid var(--modern-edge);
  border-radius: 18px;
  background: linear-gradient(125deg, #182b39, #101c2a 58%, #122333);
  box-shadow: var(--modern-shadow);
  padding: 12px clamp(12px, 1.8vw, 28px);
  gap: 12px 18px;
  min-width: 0;
}
.modern-shell .club-identity { gap: 12px; }
.modern-shell .club-identity .brand {
  border-right: 1px solid var(--modern-edge);
  padding-right: 14px;
}
.modern-shell .club-identity .brand .logo-plate { --logo-h: 40px; }
.logo-plate {
  border: 1px solid #3a5367;
  border-radius: 13px;
  background: #eaf3e5;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}
.modern-shell header.topbar .club {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.3rem);
  color: var(--text);
  letter-spacing: -0.03em;
}
.modern-shell .club-chips .chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border: 1px solid #365161;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(4, 15, 26, 0.38);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.modern-shell .club-chips .chip b { color: var(--accent-light); font-weight: 800; }
.modern-shell .user-links a {
  border: 1px solid transparent;
  padding: 6px 9px;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 650;
}
.modern-shell .user-links a:is(:hover, .active) {
  color: var(--text);
  background: #294252;
  border-color: #38596a;
}
.modern-shell .search { min-width: 0; }
.modern-shell .search input {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 11px;
  background: #0b1725;
  border-color: #395365;
}
.modern-shell .search-results {
  background: #152536;
  border-color: var(--modern-edge);
  border-radius: 12px;
  box-shadow: var(--modern-shadow);
}
.modern-shell .search-option { min-height: 48px; }
.modern-shell .search-option:is(:hover, .active) {
  background: #2b4855;
  outline-color: var(--accent);
}
@media (min-width: 1100px) {
  .modern-shell header.topbar {
    grid-template-columns: minmax(0, 1.1fr) minmax(12rem, 19rem) minmax(0, 1.4fr);
  }
}
.modern-shell .mainmenu {
  margin: 0;
  padding: 6px;
  gap: 6px;
  border: 1px solid var(--modern-edge);
  border-radius: 16px;
  background: #142331;
  box-shadow: var(--modern-shadow);
}
.modern-shell .menu-tile,
.modern-shell .menu-group.current .menu-tile {
  position: relative;
  min-height: 64px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  text-shadow: none;
}
.modern-shell .menu-tile:is(:hover, :focus-visible) {
  color: var(--text);
  background: #25394a;
}
.modern-shell .menu-group.current .menu-tile,
.modern-shell .menu-group.open .menu-tile {
  color: var(--accent-light);
  border-color: #40604a;
  background: linear-gradient(130deg, #284633, #1b3b40);
}
.modern-shell .menu-group.current .menu-tile::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}
.modern-shell .menu-tile img { width: 36px; height: 36px; object-fit: contain; }
.modern-shell .menu-title {
  font-size: 0.92rem;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.modern-shell .caret { color: var(--accent); }
.modern-shell .tile-count { right: 4px; top: 2px; }
.modern-shell .menu-group.open .menu-list {
  width: max(260px, 100%);
  max-width: calc(100vw - 28px);
  padding: 8px;
  border: 1px solid #41596a;
  border-radius: 14px;
  background: #1a2b3b;
  box-shadow: 0 22px 54px rgba(0, 6, 14, 0.52);
}
.modern-shell .menu-list a,
.modern-shell .menu-group.current .menu-list a,
.modern-shell .menu-group.open .menu-list a {
  color: var(--text);
  padding: 11px 13px;
  border-radius: 9px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  font-size: 0.94rem;
}
.modern-shell .menu-list a:is(:hover, :focus-visible) { background: #2b4555; color: white; }
.modern-shell .menu-list a.active {
  background: #263e3b;
  color: var(--accent-light);
  box-shadow: inset 3px 0 0 var(--accent);
}
.modern-shell .board {
  padding: clamp(16px, 2.5vw, 36px);
  background: linear-gradient(158deg, rgba(21, 36, 51, 0.95), rgba(12, 23, 35, 0.98));
  border: 1px solid var(--modern-edge);
  border-radius: 20px;
  box-shadow: var(--modern-shadow);
}
.modern-shell .main { min-width: 0; }
.modern-shell .main > h1:first-child,
.modern-shell .main > .gm-view > h1:first-child {
  margin-bottom: clamp(16px, 2vw, 28px);
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.8rem);
  color: var(--text);
  letter-spacing: -0.045em;
}
.card, .gm-data-panel, .gm-filter-panel {
  border: 1px solid var(--modern-edge);
  border-radius: 16px;
  background: linear-gradient(150deg, #192b3c, #122130);
  box-shadow: 0 4px 18px rgba(0, 6, 12, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
.card { padding: clamp(14px, 1.6vw, 24px); }
.card > .topbar { margin-bottom: 16px; align-items: baseline; gap: 8px 12px; }
.card > .topbar h2 { margin: 0; font-size: clamp(1.1rem, 1rem + 0.65vw, 1.55rem); }
.badge, .chip {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #263949;
}
.badge.good { border-color: #31675c; color: #9be9c4; background: #193a36; }
.badge.bad { border-color: #85535c; color: #ffb2bb; background: #472c39; }
.badge.warn { border-color: #80643e; color: #ffcf7b; background: #473b30; }
.btn, .btn.ghost {
  border: 1px solid #40596c;
  border-radius: 11px;
  min-height: 44px;
  background: #253c4e;
  background-image: none;
  box-shadow: none;
  color: #edf6fa;
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.25;
  text-shadow: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn:is(:hover, :focus-visible) { background: #325166; border-color: #7494a5; filter: none; }
.btn:active:not(:disabled) { transform: translateY(1px); filter: none; }
.btn.primary, .gm-view .btn.primary {
  background: var(--accent);
  background-image: none;
  border-color: #d1fa83;
  color: var(--accent-ink);
  text-shadow: none;
  box-shadow: 0 5px 14px rgba(148, 209, 55, 0.13);
}
.btn.primary:is(:hover, :focus-visible), .gm-view .btn.primary:is(:hover, :focus-visible) {
  background: #d0ff72;
  border-color: #edffce;
  color: var(--accent-ink);
}
.btn.danger { border-color: #c36b7b; background: #913c50; color: #fff; text-shadow: none; }
.btn:disabled { opacity: 0.52; box-shadow: none; }
input, select, textarea {
  background: #0e1c2a;
  border: 1px solid #3a5366;
  color: var(--text);
  border-radius: 10px;
  min-width: 0;
}
input::placeholder, textarea::placeholder { color: #a0b3c0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); }
.tabs button, .tabs a.tab, .gm-view .tabs button, .gm-view .tabs a.tab {
  min-height: 44px;
  background: #1c3040;
  border: 1px solid #375164;
  border-radius: 10px;
  color: var(--muted);
  padding: 9px 14px;
  font-size: 0.94rem;
  font-weight: 740;
  text-shadow: none;
}
.tabs :is(button, a.tab).active, .gm-view .tabs :is(button, a.tab).active {
  background: #2a4638;
  border-color: #608957;
  color: var(--accent-light);
  box-shadow: inset 0 0 0 1px rgba(184, 243, 75, 0.1);
}
.tabs :is(button, a.tab):hover { border-color: var(--accent); color: var(--text); }
.lang-switch { background: #172837; border-color: #3c5365; border-radius: 10px; }
.lang-btn[aria-pressed="true"] { background: #35533c; color: var(--accent-light); }
.table-wrap, .gm-view .table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #30485a;
  border-radius: 12px;
  background: #10202f;
  scrollbar-color: #507080 #122332;
}
th, .gm-view th {
  background: #203748;
  color: #c3d6df;
  border-bottom: 1px solid #385163;
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.03em;
}
td, .gm-view td { border-bottom: 1px solid #294051; }
tbody tr:nth-child(odd) td { background: var(--row); }
tbody tr:nth-child(even) td { background: var(--row-2); }
tbody tr:hover td, .gm-view tbody tr:hover td { background: #294353; }
tbody tr.me td { background: var(--row-hl); }
tbody tr.me td:first-child { box-shadow: inset 3px 0 var(--accent); }
.site-footer, .modern-shell .site-footer {
  border-radius: 12px;
  background: #122231;
  border: 1px solid #2d4657;
  padding: 8px 14px;
  color: var(--muted);
  font-size: 0.78rem;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

/* Football operations dashboard. */
.dashboard { gap: clamp(12px, 1.3vw, 20px); }
.dashboard > .dash-matchday {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  padding: clamp(20px, 3vw, 42px);
  border: 1px solid #506f5a;
  border-radius: 18px;
  background: linear-gradient(100deg, #102731 0%, rgba(13, 38, 39, 0.94) 38%, rgba(8, 22, 30, 0.67) 100%),
    url('/assets/estadio-ilustrado.jpg') center 48% / cover;
  box-shadow: inset 4px 0 0 var(--accent), 0 12px 32px rgba(0, 0, 0, 0.17);
}
.dashboard .next-match-head { gap: 10px; margin-bottom: 20px; }
.dashboard .next-match-head h2 {
  flex: 1 1 100%;
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.15rem);
  font-weight: 820;
  letter-spacing: -0.04em;
}
.dashboard .next-match-head .badge {
  border-color: #5d7957;
  background: rgba(16, 47, 36, 0.88);
  color: var(--accent-light);
  font-weight: 800;
}
.dashboard .next-match-head .muted { font-size: 0.86rem; }
.dashboard .next-match-when {
  border: 1px solid #4b7563;
  border-radius: 9px;
  padding: 6px 12px;
  background: rgba(9, 28, 32, 0.85);
  color: #e4f5ef;
  font-size: 0.88rem;
}
.dashboard .next-match-teams { padding: 18px 0 24px; gap: clamp(8px, 2vw, 28px); }
.dashboard .next-team {
  min-width: 0;
  font-size: clamp(1rem, 0.7rem + 1.1vw, 1.65rem);
  font-weight: 820;
  line-height: 1.3;
}
.dashboard .next-team .team-with-crest { gap: 12px; }
.dashboard .next-team .muted { color: #c1d0d6; }
.dashboard .next-vs {
  align-self: center;
  border: 1px solid #54736b;
  background: #173c3b;
  color: var(--accent-light);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}
.dashboard .next-match-actions { justify-content: flex-start; }
.dashboard .next-match-actions .btn { padding: 12px 20px; }
.dashboard > .dash-metrics { gap: 12px; }
.dashboard .stat-card {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: 15px;
  border-color: #355063;
}
.dashboard .stat-card::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
.dashboard .stat-card:nth-child(2)::before { background: var(--pos-def); }
.dashboard .stat-card:nth-child(3)::before { background: var(--color-warn); }
.dashboard .stat-header { gap: 10px; }
.dashboard .stat-header h3 {
  color: #c7d9e0;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.dashboard .stat { color: var(--text); font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.4rem); letter-spacing: -0.05em; }
.dashboard .stat small { color: var(--muted); font-size: 0.78rem; letter-spacing: normal; }
.dashboard .stat-footer { font-size: 0.82rem; line-height: 1.45; }
.dashboard .dash-news, .dashboard .dash-squad, .dashboard .dash-matches > .card { border-radius: 16px; }
.dashboard .news-item {
  border-bottom: 1px solid #2b4455;
  border-radius: 0;
  padding: 12px 8px;
}
.dashboard .news-item:last-child { border-bottom: 0; }
.dashboard .result-row {
  border: 1px solid #2e4858;
  border-radius: 10px;
  background: #102130;
  min-height: 60px;
  padding: 10px;
}
.dashboard .result-row:hover { border-color: #507489; background: #1c3444; }
/* The rows are a table: one column as wide as the card (never as wide as its content) and the same inner columns in every row, so every row has exactly the same width and the badges
   and the matchups (names, crests and score around one centre) line up from row to row. Played: result · competition · matchup; upcoming: round · matchup. On a phone the matchup
   takes a line of its own under the badges. */
/* A small inset on both sides of the two lists (the same in both cards, so the rows keep one width): the rows no longer touch the inner edge of the card. The hover/focus highlight is on the row itself, so it stays inside the inset. */
.dashboard .results { --results-inset: 2px; grid-template-columns: minmax(0, 1fr); padding-inline: var(--results-inset); }
.dashboard .results .result-row { box-sizing: border-box; width: 100%; min-width: 0; }
.dashboard .results.played .result-row { display: grid; grid-template-columns: 1.75rem 5.5rem minmax(0, 1fr); column-gap: 10px; }
/* Upcoming uses the SAME three columns as played, the round badge spanning the first two (result + competition), so the matchup starts at the same x in both cards and the score / x sit on one vertical axis. */
.dashboard .results.upcoming .result-row { display: grid; grid-template-columns: 1.75rem 5.5rem minmax(0, 1fr); column-gap: 10px; }
.dashboard .results.upcoming .result-row > .round-when { grid-column: 1 / 3; }
.dashboard .result-row > .badge { justify-self: start; }
/* Round badge and kickoff: side by side when they fit, the date under the badge when the column is narrow (desktop); rows of both cards keep one height so the two lists line up. */
.round-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.round-kickoff { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard .results .result-row { min-height: 84px; }
.dashboard .result-teams { min-width: 0; }
@media (max-width: 640px) {
  .dashboard .results.played .result-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .dashboard .results.upcoming .result-row { grid-template-columns: auto minmax(0, 1fr); }
  .dashboard .results.upcoming .result-row > .round-when { grid-column: auto; }
  .dashboard .result-row > .result-teams { grid-column: 1 / -1; }
}
/* Played rows: the date of the match under the result and competition badges (the same two columns the round badge spans in the upcoming card); the matchup keeps column 3 and is centred across both lines, so the score and the x stay on one axis. */
.dashboard .results.played .result-row { row-gap: 0; }
.dashboard .results.played .result-row > .round-kickoff { grid-column: 1 / 3; grid-row: 2; margin-top: 4px; }
.dashboard .results.played .result-row > .result-teams { grid-row: 1 / 3; }
@media (max-width: 640px) {
  .dashboard .results.played .result-row > .round-kickoff { grid-column: 3; grid-row: 1; margin: 0; }
  .dashboard .results.played .result-row > .result-teams { grid-row: 2; }
}
.dashboard .result-mid { font-weight: 800; }
.dashboard .placar-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 44px;
  border: 1px solid #456b70;
  border-radius: 7px;
  background: #244448;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dashboard .dash-squad .table-wrap { margin-top: 12px; }
.dashboard .dash-squad th, .dashboard .dash-squad td { padding-block: 13px; }
.start-card { border-color: #5b8052; background: #1b3534; }
.me-name { color: var(--accent-light); }

/* The advanced squad, transfer market and other GM screens share this skin. */
.gm-view {
  --gm-gold: var(--color-accent);
  --gm-ink: var(--text);
  --gm-muted: var(--muted);
  --gm-hairline: var(--surface-border);
  --gm-keeper: var(--pos-gk);
}
.gm-hero {
  border-color: #3c6c62;
  border-radius: 18px;
  background: linear-gradient(100deg, rgba(13, 38, 46, 0.98), rgba(12, 33, 41, 0.88) 54%, rgba(7, 29, 39, 0.52)),
    url('/assets/torcida-guache.webp') center 44% / cover;
}
.gm-eyebrow, .gm-section-index { color: var(--accent); }
.gm-metric {
  border-color: #3c5d67;
  background: rgba(8, 27, 39, 0.82);
  border-radius: 11px;
}
.gm-data-panel, .gm-filter-panel, .gm-market-stats > .card, .gm-market-stats.market-strip {
  background: linear-gradient(145deg, #192b3c, #10202e);
  border-color: #355062;
  border-radius: 15px;
}
.gm-view .tabs button, .gm-view .tabs a.tab { background: #1d3140; }
.gm-view .tabs :is(button, a.tab).active { background: #2a4638; border-color: #6b925b; color: var(--accent-light); }
.gm-view th { background: #1c3444; }
.gm-view td { border-color: #2b4555; }
.gm-tab-rail {
  background: #172938;
  border-color: #3a5364;
  box-shadow: var(--modern-shadow);
}
.gm-filter-panel :is(input, select) { background: #0e1c2a; color: var(--text); }
.gm-count-pill { border-color: #557e52; background: #213c35; }
.gm-market-stats .stat { color: var(--accent-light); }
.gm-hero-shortcut { color: var(--accent-light); }

/* Overlays should remain usable on narrow screens and visually match the app. */
.drawer, .modal {
  background: linear-gradient(155deg, #1a2c3c, #101d2a);
  border-color: #4a6575;
  box-shadow: 0 24px 64px rgba(0, 5, 12, 0.52);
  color: var(--text);
  overscroll-behavior: contain;
}
.drawer { width: min(460px, 100vw); padding: clamp(16px, 2vw, 28px); z-index: 46; }
.modal { border-width: 1px; border-radius: 18px; padding: clamp(18px, 2.2vw, 28px); max-height: calc(100dvh - 24px); }
.backdrop { z-index: 45; background: rgba(1, 9, 17, 0.72); backdrop-filter: blur(3px); }
.modal-backdrop { z-index: 59; }
.toast {
  border: 1px solid #4a6c7e;
  border-left: 4px solid var(--good);
  background: #203649;
  color: var(--text);
  border-radius: 12px;
  box-shadow: var(--modern-shadow);
}
.drawer-sep { border-top: 1px solid #395061; }
.outcome-badge.win { background: #22574c; color: #a3f4cf; }
.outcome-badge.draw { background: #635031; color: #ffe3a5; }
.outcome-badge.loss { background: #6b3444; color: #ffb3be; }

/* Login and registration are part of the same product. */
.auth-split { min-height: 100dvh; }
.auth-atmosphere {
  border-radius: 22px;
  border-color: #3d655c;
  background: linear-gradient(0deg, rgba(6, 21, 31, 0.99), rgba(6, 21, 31, 0.3) 90%),
    linear-gradient(90deg, rgba(8, 43, 42, 0.45), transparent),
    url('/assets/torcida-guache.webp') center / cover;
}
.auth-kicker { color: var(--accent-light); }
.auth-atmosphere h1 { font-weight: 850; letter-spacing: -0.055em; }
.auth-atmosphere p { color: #d4e5e6; }
.auth-pillars span { background: rgba(11, 35, 41, 0.82); border-color: #507468; color: var(--text); }

/* A living illustrated stadium: subtle crowd sections, waving cloth and moving floodlights.
   Only decorative layers move; the original painting stays sharp and all text stays still. */
.auth-atmosphere { overflow: hidden; isolation: isolate; }
.auth-stadium-motion { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.auth-crowd-wave {
  position: absolute; inset: -5px;
  background: url('/assets/torcida-guache.webp') center / cover;
  opacity: 0.38; will-change: transform;
}
.auth-crowd-wave.wave-upper {
  -webkit-mask-image: linear-gradient(to bottom, transparent 7%, #000 16%, #000 28%, transparent 39%);
  mask-image: linear-gradient(to bottom, transparent 7%, #000 16%, #000 28%, transparent 39%);
  animation: gm-crowd-sway 2.7s ease-in-out infinite alternate;
}
.auth-crowd-wave.wave-middle {
  -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 44%, #000 55%, transparent 66%);
  mask-image: linear-gradient(to bottom, transparent 35%, #000 44%, #000 55%, transparent 66%);
  animation: gm-crowd-sway 2.15s ease-in-out -0.9s infinite alternate-reverse;
}
.auth-crowd-wave.wave-lower {
  -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 70%, #000 83%, transparent 91%);
  mask-image: linear-gradient(to bottom, transparent 60%, #000 70%, #000 83%, transparent 91%);
  animation: gm-crowd-sway 2.35s ease-in-out -1.7s infinite alternate;
}
.auth-stadium-light {
  position: absolute; top: -28%; width: 34%; height: 115%; opacity: 0.28;
  background: linear-gradient(90deg, transparent, rgba(182, 240, 229, 0.18) 50%, transparent);
  filter: blur(22px); mix-blend-mode: screen;
  animation: gm-stadium-lights 9s ease-in-out infinite alternate;
}
.auth-stadium-light.light-left { left: -30%; transform: rotate(17deg); }
.auth-stadium-light.light-right { right: -34%; transform: rotate(-17deg); animation-delay: -4.6s; }
.auth-goal-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 30%, rgba(192, 255, 95, .4), transparent 65%); pointer-events: none; }
.auth-cheer .auth-goal-flash { animation: gm-goal-flash 1.2s ease-out forwards; }
.auth-goal .auth-goal-flash { animation: gm-goal-flash 0.8s ease-out forwards; }
.auth-cheer .auth-crowd-wave, .auth-goal .auth-crowd-wave { animation-duration: 0.5s; opacity: 0.56; }
.auth-hero-content {
  position: relative; z-index: 1; width: 100%; min-height: 100%; display: flex;
  flex-direction: column; justify-content: space-between; gap: 24px;
  text-shadow: 0 2px 16px rgba(0, 9, 18, 0.8);
}
.auth-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.auth-live-mark {
  display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px;
  border: 1px solid rgba(199, 255, 161, 0.32); border-radius: 999px;
  background: rgba(7, 28, 38, 0.76); color: #ebf8e8;
  letter-spacing: .1em; text-transform: uppercase; font-size: .67rem; font-weight: 750;
  white-space: nowrap;
}
.auth-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); animation: gm-live-pulse 2s ease-in-out infinite; }
.auth-hero-eyebrow { display: inline-block; margin-bottom: 6px; color: var(--color-accent-light); font-size: .75rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.auth-atmosphere .auth-hero-bottom h1 { margin: 5px 0 18px; max-width: 14ch; }
.auth-hero-bottom > p { margin: 0; line-height: 1.45; font-size: clamp(.92rem, 1.1vw, 1.12rem); }
.auth-feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: clamp(18px, 3vh, 28px); }
.auth-feature {
  display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 12px 10px;
  border: 1px solid rgba(168, 223, 209, 0.34); border-radius: 11px;
  background: linear-gradient(160deg, rgba(11, 39, 49, .87), rgba(11, 31, 41, .76));
  backdrop-filter: blur(6px); box-shadow: 0 9px 18px rgba(0, 9, 13, .2);
  animation: gm-feature-arrive .7s ease-out both;
}
.auth-feature:nth-child(2) { animation-delay: .14s; }
.auth-feature:nth-child(3) { animation-delay: .28s; }
.auth-feature-number { font-size: .73rem; color: var(--color-accent); font-weight: 900; letter-spacing: .02em; padding-top: 2px; }
.auth-feature-copy { display: grid; gap: 4px; min-width: 0; }
.auth-feature strong { font-size: clamp(.77rem, .94vw, .92rem); line-height: 1.2; color: #fff; }
.auth-feature small { font-size: .76rem; line-height: 1.36; color: #c9dce2; }
@keyframes gm-crowd-sway { from { transform: translate3d(-1px, 2px, 0) rotate(-.16deg); } to { transform: translate3d(2px, -3px, 0) rotate(.16deg); } }
@keyframes gm-stadium-lights { from { translate: -13% 0; opacity: .12; } to { translate: 48% 0; opacity: .45; } }
@keyframes gm-live-pulse { 50% { opacity: .45; box-shadow: 0 0 3px var(--color-accent); } }
@keyframes gm-goal-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gm-feature-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) {
  .auth-feature { padding: 10px 8px; gap: 6px; }
  .auth-feature small { font-size: .7rem; }
}
@media (max-width: 760px) {
  .auth-atmosphere .auth-feature-list { display: none; }
  .auth-atmosphere { min-height: 278px; }
  .auth-hero-top { align-items: flex-start; flex-direction: column; gap: 9px; }
  .auth-live-mark { font-size: .58rem; padding: 5px 7px; }
  .auth-hero-content { gap: 16px; }
  .auth-atmosphere .auth-hero-bottom h1 { font-size: clamp(1.7rem, 6vw, 2.75rem); max-width: 20ch; margin-bottom: 8px; }
  .auth-hero-bottom > p { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-stadium-motion *, .auth-hero-content * { animation: none !important; transition: none !important; }
}
.auth-split .auth-form-card {
  background: #142332;
  border-color: #365363;
  border-radius: 20px;
  padding: clamp(20px, 3vw, 44px);
}
.auth-split .brand-large .logo-plate { border-color: #537069; }
.auth-split .tabs { gap: 8px; }
.auth-split .tabs button { border-radius: 10px; }
.auth-split .field { color: #c3d5de; }
.auth-split form { gap: 14px; }
.auth-split .field input { background: #0b1927; }

/* The animated stadium surrounds both panels. The showcase is a rotating
   set of game highlights, while the approved stadium-night badge anchors login. */
.auth-split::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(4, 13, 23, .76), rgba(4, 13, 23, .65) 46%, rgba(4, 13, 23, .8)),
    linear-gradient(0deg, rgba(4, 14, 23, .88), transparent 42%, rgba(4, 14, 23, .52)),
    url('/assets/torcida-guache.webp') center / cover;
}
.auth-stadium-motion {
  position: fixed; inset: 0; z-index: -1; opacity: .52;
}
.auth-stadium-motion::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%, transparent 20%, rgba(3, 11, 19, .5) 100%);
}
.auth-atmosphere {
  background: linear-gradient(152deg, rgba(12, 40, 49, .65), rgba(6, 19, 32, .94));
  border-color: rgba(119, 176, 153, .45);
  backdrop-filter: blur(10px);
}
.auth-split .auth-form-card {
  position: relative; z-index: 1;
  background: linear-gradient(150deg, rgba(21, 38, 55, .96), rgba(12, 28, 44, .93));
  border-color: rgba(100, 147, 166, .45);
  backdrop-filter: blur(12px);
  gap: clamp(6px, .9dvh, 11px);
}
.auth-split .auth-form-card > .muted,
.auth-split .auth-form-card > .lang-switch { margin-block: 0; }
.auth-stadium-brand { align-self: center; display: grid; place-items: center; margin-bottom: 1px; }
.auth-stadium-brand img {
  display: block; width: clamp(100px, 10vw, 130px); height: clamp(112px, 11.25vw, 146px);
  border-radius: 13px; object-fit: contain; box-shadow: 0 9px 30px rgba(2, 11, 20, .35);
}
.auth-carousel { display: flex; flex-direction: column; gap: clamp(15px, 2.5dvh, 28px); width: 100%; }
.auth-carousel-head { max-width: 580px; }
.auth-carousel-head h1 {
  margin: 6px 0 10px; max-width: 13ch;
  font-size: clamp(2rem, 3.35vw, 3.85rem); line-height: 1.04;
  font-weight: 850; letter-spacing: -.052em;
}
.auth-carousel-head > p { margin: 0; max-width: 46ch; line-height: 1.47; }
.auth-carousel-viewport { position: relative; width: 100%; height: clamp(310px, 36dvh, 380px); overflow: hidden; }
.auth-carousel-slide {
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(120px, 48%) minmax(0, 1fr);
  padding: clamp(15px, 2vw, 24px); border-radius: 19px;
  background: linear-gradient(145deg, rgba(20, 52, 59, .92), rgba(7, 26, 40, .96));
  border: 1px solid rgba(147, 205, 172, .35);
  box-shadow: inset 0 1px 0 rgba(221, 255, 223, .08), 0 12px 32px rgba(0, 7, 14, .26);
  opacity: 0; visibility: hidden; transform: translateX(22px) scale(.985);
  transition: opacity .55s ease, transform .55s ease, visibility .55s;
}
.auth-carousel-slide[data-active="true"] { opacity: 1; visibility: visible; transform: none; z-index: 1; }
.auth-carousel-art { display: grid; place-items: center; min-height: 0; overflow: hidden; }
.auth-carousel-art img { display: block; width: min(100%, 440px); height: 100%; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0, 9, 14, .5)); }
.auth-slide-copy { align-self: end; display: grid; gap: 6px; min-width: 0; }
.auth-slide-number { color: var(--color-accent); font-size: .72rem; font-weight: 800; letter-spacing: .17em; }
.auth-slide-copy h2 { margin: 0; font-size: clamp(1.25rem, 1.95vw, 1.95rem); line-height: 1.12; letter-spacing: -.03em; color: #fff; }
.auth-slide-copy p { margin: 0; max-width: 48ch; font-size: clamp(.8rem, 1.04vw, .98rem); line-height: 1.45; color: #d0e4e2; }
.auth-slide-tag { margin-top: 4px; font-size: .68rem; color: #c7f782; font-weight: 800; letter-spacing: .12em; }
.auth-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 15px; }
.auth-carousel-arrow {
  display: grid; place-items: center; height: 36px; width: 36px; border-radius: 11px;
  border: 1px solid rgba(164, 218, 184, .35); color: #e0f6df; background: rgba(5, 24, 34, .75);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.auth-carousel-arrow:hover { background: rgba(73, 124, 95, .55); }
.auth-carousel-dots { display: flex; gap: 9px; align-items: center; }
.auth-carousel-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(206, 246, 184, .6); background: rgba(206, 246, 184, .2);
  transition: width .2s ease, background .2s ease;
}
.auth-carousel-dot[aria-current="true"] { width: 29px; background: var(--color-accent); border-color: var(--color-accent); }
.auth-carousel-arrow:focus-visible, .auth-carousel-dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.auth-social-icons { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 3px; }
.auth-social-icon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(163, 207, 197, .27); border-radius: 10px;
  color: #a6c9c8; background: rgba(6, 25, 37, .54);
}
.auth-social-symbol, .auth-social-symbol svg { display: block; height: 17px; width: 17px; }
.auth-split .login-music-toggle { top: clamp(27px, 5dvh, 54px); right: clamp(27px, 3.8vw, 68px); z-index: 3; }
@media (max-width: 760px) {
  .auth-atmosphere { min-height: 510px; padding: clamp(20px, 4vw, 32px); }
  .auth-hero-content { gap: 19px; }
  .auth-carousel-viewport { height: 285px; }
  .auth-carousel-slide { grid-template-rows: 120px minmax(0, 1fr); }
  .auth-carousel-head h1 { font-size: clamp(1.85rem, 6vw, 2.7rem); }
  .auth-slide-copy h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); }
  .auth-split .auth-form-card { padding: 26px 22px; }
  .auth-split .login-music-toggle { top: 25px; right: 24px; }
}
@media (max-width: 440px) {
  .auth-atmosphere { min-height: 492px; padding: 17px 15px; }
  .auth-carousel { gap: 12px; }
  .auth-carousel-viewport { height: 280px; }
  .auth-carousel-slide { padding: 14px; grid-template-rows: 110px minmax(0, 1fr); }
  .auth-carousel-head h1 { font-size: clamp(1.8rem, 8vw, 2.25rem); }
  .auth-carousel-head > p { font-size: .81rem; }
  .auth-slide-copy p { font-size: .78rem; }
  .auth-slide-tag { letter-spacing: .06em; }
  .auth-stadium-brand img { width: 102px; height: 115px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-carousel-slide, .auth-carousel-dot { transition: none; }
}

/* Immersive Stadium: the original animated supporters belong to the showcase.
   The darker tactical treatment keeps headlines and controls legible. */
.auth-atmosphere .auth-crowd-wave.wave-upper { animation: gm-supporters-rise 2.4s ease-in-out infinite alternate; }
.auth-atmosphere .auth-crowd-wave.wave-middle { animation: gm-supporters-rise 2.05s ease-in-out -.7s infinite alternate-reverse; }
.auth-atmosphere .auth-crowd-wave.wave-lower { animation: gm-supporters-rise 2.75s ease-in-out -1.3s infinite alternate; }
@keyframes gm-supporters-rise {
  from { transform: translate3d(-5px, 5px, 0) scale(1.008); }
  to { transform: translate3d(5px, -9px, 0) scale(1.018); }
}
.auth-split {
  grid-template-columns: minmax(0, 1.16fr) minmax(350px, .84fr);
  gap: clamp(14px, 1.5vw, 24px);
}
.auth-atmosphere {
  isolation: isolate;
  padding: clamp(22px, 2.7vw, 42px);
  background: linear-gradient(180deg, rgba(5, 18, 28, .25), rgba(5, 19, 30, .86) 90%),
    url('/assets/torcida-guache.webp') center / cover;
}
.auth-atmosphere .auth-stadium-motion {
  position: absolute; inset: 0; z-index: 0; opacity: .84;
}
.auth-atmosphere .auth-stadium-motion::after {
  background: linear-gradient(180deg, rgba(3, 13, 24, .25), rgba(3, 13, 24, .64) 53%, rgba(3, 13, 24, .90));
}
.auth-atmosphere .auth-hero-content { z-index: 1; }
.auth-carousel { flex: 1; justify-content: end; gap: clamp(14px, 2dvh, 24px); }
.auth-carousel-head { max-width: 670px; }
.auth-carousel-head h1 { max-width: 14ch; font-size: clamp(2.4rem, 4.15vw, 5rem); }
.auth-carousel-viewport { height: clamp(350px, 43dvh, 480px); }
.auth-carousel-slide {
  grid-template-rows: minmax(165px, 56%) minmax(0, 1fr);
  background: linear-gradient(155deg, rgba(8, 35, 44, .91), rgba(5, 18, 31, .94));
  border-color: rgba(178, 240, 147, .35);
  box-shadow: inset 0 1px 0 rgba(220, 255, 190, .13), 0 16px 44px rgba(0, 7, 14, .34);
}
.auth-carousel-art img { width: min(100%, 540px); }
.auth-slide-copy h2 { font-size: clamp(1.5rem, 2.35vw, 2.3rem); }
.auth-split .auth-form-card { padding: clamp(26px, 3.25vw, 52px); }
.auth-stadium-brand img {
  width: clamp(124px, 12vw, 168px); height: clamp(132px, 12.8vw, 184px);
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 9px 20px rgba(0, 0, 0, .35));
}
@media (max-width: 1100px) and (min-width: 761px) {
  .auth-split { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); }
  .auth-carousel-viewport { height: 375px; }
}
@media (max-width: 760px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-atmosphere { min-height: 540px; }
  .auth-carousel-viewport { height: 295px; }
  .auth-carousel-slide { grid-template-rows: 130px minmax(0, 1fr); }
  .auth-carousel-head h1 { font-size: clamp(1.9rem, 6.5vw, 2.85rem); }
  .auth-stadium-brand img { width: 126px; height: 140px; }
}
@media (max-width: 440px) {
  .auth-atmosphere { min-height: 510px; }
  .auth-carousel-viewport { height: 280px; }
  .auth-carousel-slide { grid-template-rows: 115px minmax(0, 1fr); }
}

/* Match the guided tour to the stadium theme and keep its controls comfortable to tap. */
.tutorial-card {
  background: linear-gradient(150deg, #1b3041 0%, #0d1b29 100%);
  border: 1px solid #496679;
  border-radius: 18px;
  box-shadow: 0 22px 56px rgba(0, 5, 12, 0.76);
  padding: 18px 20px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
.tutorial-card.centered {
  box-shadow: 0 0 0 9999px rgba(3, 11, 20, 0.77), 0 24px 60px rgba(0, 5, 12, 0.85);
}
.tutorial-spotlight { box-shadow: 0 0 0 9999px rgba(3, 11, 20, 0.77); }
.tutorial-spotlight-ring {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(184, 243, 75, 0.5), inset 0 0 10px rgba(184, 243, 75, 0.16);
}
.tutorial-header { border-color: #375265; }
.tutorial-header-left { min-width: 0; flex-wrap: wrap; }
.tutorial-step-badge { background: #233e38; border-color: #557961; color: var(--accent-light); }
.tutorial-title { color: #f0f7fa; font-size: clamp(1.1rem, 3vw, 1.3rem); }
.tutorial-text { color: #c3d5de; }
.tutorial-close-btn { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 10px; }
.tutorial-progress-bar { flex-wrap: wrap; gap: 0; }
.tutorial-dot { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 0; background: transparent; box-shadow: none; }
.tutorial-dot::before { content: ''; width: 9px; height: 9px; border: 1px solid #7390a0; border-radius: 50%; background: #2a4150; }
.tutorial-dot.active { background: transparent; box-shadow: none; transform: none; }
.tutorial-dot.active::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 9px rgba(184, 243, 75, 0.6); transform: scale(1.25); }
.tutorial-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-radius: 8px; }
.tutorial-footer { border-color: #375265; }
.tutorial-footer .btn { min-height: 44px; }

/* Long club and player names must shrink within profile cards. */
.club-head, .profile-head { max-width: 100%; }
.club-head > div, .profile-head > div { min-width: 0; }
.club-head :is(h1, h2), .profile-head :is(h1, h2) { overflow-wrap: anywhere; }
.club-head p, .profile-head p { overflow-wrap: anywhere; }
.scoreboard { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); }
.scoreboard > * { min-width: 0; }
.scoreboard .team { min-width: 0; }
.scoreboard .team a { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.scoreboard > :nth-child(2) { overflow-wrap: anywhere; }
.lineups > .card { min-width: 0; }
.lineups h2 { overflow-wrap: anywhere; }

/* Responsive tracks must fit a 320px phone, including long localized labels. */
@media (max-width: 1180px) {
  .dashboard > .dash-matchday { grid-column: 1 / -1; }
  .dashboard > .dash-metrics { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard > .dash-news, .dashboard > .dash-matches { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .modern-shell header.topbar { display: flex; flex-wrap: wrap; }
  .modern-shell header.topbar > .club-identity { flex: 1 1 auto; }
  .modern-shell header.topbar > .search { flex: 1 1 100%; max-width: none; order: 2; }
  .modern-shell header.topbar > .topbar-actions { flex: 1 1 auto; order: 3; }
  .modern-shell header.topbar > .admin-controls { order: 4; }
  .dashboard > .dash-matches { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { background: var(--bg); }
  .modern-shell { padding: 8px 8px calc(100px + env(safe-area-inset-bottom)); gap: 9px; }
  .modern-shell header.topbar { padding: 10px; border-radius: 13px; gap: 10px; }
  .modern-shell .club-identity { flex-basis: 100%; max-width: 100%; }
  .modern-shell .club-identity .brand { padding-right: 9px; }
  .modern-shell .club-identity .brand .logo-plate { --logo-h: 30px; }
  .modern-shell header.topbar > .search { order: 2; flex-basis: 100%; }
  .modern-shell header.topbar > .topbar-actions { order: 3; width: 100%; justify-content: space-between; gap: 6px; }
  .modern-shell .topbar-actions .club-chips { flex-wrap: wrap; min-width: 0; }
  .modern-shell .club-chips .chip { font-size: 0.72rem; padding: 5px 7px; }
  .modern-shell .user-links { flex-wrap: wrap; }
  .modern-shell .user-links a { min-height: 44px; padding: 10px 7px; font-size: 0.8rem; }
  .modern-shell .board { border-radius: 14px; padding: 14px 12px; }
  .modern-shell .mainmenu {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    border-radius: 16px;
    padding: 5px;
    gap: 3px;
    background: #162837;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.62);
  }
  .modern-shell .menu-tile, .modern-shell .menu-group.current .menu-tile {
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    min-height: 62px;
    padding: 6px 2px;
    border-radius: 10px;
  }
  .modern-shell .menu-tile img { width: 25px; height: 25px; }
  .modern-shell .menu-title { font-size: clamp(0.63rem, 1.85vw, 0.76rem); line-height: 1.08; overflow-wrap: anywhere; }
  .modern-shell .menu-group.current .menu-tile::after { left: 8px; right: 8px; }
  .modern-shell .menu-group.open .menu-list {
    top: auto;
    bottom: calc(100% + 12px);
    width: min(270px, calc(100vw - 22px));
    max-height: min(64dvh, 440px);
  }
  .dashboard { gap: 12px; }
  .dashboard > .dash-matchday { min-height: 290px; padding: 20px 15px; }
  .dashboard .next-match-teams { gap: 8px; }
  .dashboard .next-vs { width: 36px; height: 36px; font-size: 0.73rem; }
  .dashboard .next-team { font-size: clamp(0.9rem, 2.9vw, 1.25rem); }
  .dashboard > .dash-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard .stat-card { padding: 14px 12px; }
  .dashboard .stat { font-size: clamp(1.25rem, 3.4vw, 1.7rem); overflow-wrap: anywhere; }
  .dashboard .stat-header { display: flex; flex-wrap: wrap; }
  .dashboard > .dash-matches { grid-template-columns: minmax(0, 1fr); }
  .gm-hero { padding: 20px 16px; }
  .auth-split { padding: 10px; gap: 12px; }
  .auth-atmosphere { min-height: 205px; padding: 24px 18px; border-radius: 16px; }
  .auth-split .auth-form-card { border-radius: 16px; padding: 20px 16px; }
  .site-footer { grid-template-columns: 1fr auto 1fr; padding-inline: 4px; gap: 5px; }
  .site-footer a { font-size: 0.75rem; overflow-wrap: anywhere; }
  #toasts { left: 10px; right: 10px; bottom: calc(90px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  .drawer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .modal { max-width: calc(100vw - 20px); }
  .tutorial-card,
  .tutorial-card.centered {
    bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    max-height: min(56dvh, calc(100dvh - 122px - env(safe-area-inset-bottom)));
    border-radius: 14px;
    padding: 12px 14px;
    gap: 8px;
  }
  .tutorial-footer { gap: 6px; }
}
@media (max-width: 560px) {
  .scoreboard { gap: 8px; padding: 14px 8px; }
  .scoreboard .team { font-size: clamp(0.82rem, 3.3vw, 1rem); line-height: 1.3; }
  .scoreboard .score { font-size: clamp(1.5rem, 6vw, 2rem); letter-spacing: 0; }
  .scoreboard .tactics-value { font-size: 0.78rem; }
  .scoreboard > :nth-child(2) .muted { font-size: 0.72rem; }
  .profile-head { gap: 10px; }
  .profile-head h1, .club-head h1 { font-size: clamp(1.25rem, 5vw, 1.85rem); }
  .dashboard > .dash-metrics { grid-template-columns: minmax(0, 1fr); }
  .dashboard .stat-card { padding: 16px 18px; }
  .dashboard .stat-header { display: flex; }
  .dashboard .next-match-head { margin-bottom: 10px; }
  .dashboard .next-match-teams { padding-block: 12px 18px; }
  .dashboard .next-team .team-with-crest { gap: 6px; }
  .dashboard .result-row { padding: 9px 7px; }
  .dashboard .rt-mark-home { margin-left: 5px; }
  .dashboard .rt-mark-away { margin-right: 5px; }
  .dashboard .result-mid { margin-inline: 4px; }
  .dashboard .result-teams { font-size: 0.84rem; }
  .gm-view .tabs { max-width: 100%; }
  .gm-tab-rail .tabs a.tab { font-size: 0.78rem; }
  .gm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-metric { padding: 10px; }
  .gm-filter-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .club-head { gap: 10px; }
  .club-head .crest-xl { --s: 72px; }
  .profile-head .avatar-busto { --avatar-size: 76px !important; }
  .scoreboard .crest-lg { --s: 62px; }
  .scoreboard .match-date { font-size: 0.72rem; }
}
/* Trophies beside the club's name: one picture each, named on hover (trophies.mjs). */
.club-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.club-name-row h1 { margin: 0; }
.club-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.club-line .club { min-width: 0; }
.topbar .trophy-row .trophy { width: 18px; height: 18px; }
.trophy-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.trophy { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); transition: transform 0.15s ease; }
/* On the club page the trophies are the point: much larger than the top bar's small ones. */
.club-name-row .trophy { width: 96px; height: 96px; }
.trophy:hover, .trophy:focus-visible { transform: translateY(-2px) scale(1.1); }
@media (max-width: 560px) {
  .club-name-row { gap: 6px; }
  .trophy { width: 24px; height: 24px; }
  .club-name-row .trophy { width: 72px; height: 72px; }
}
@media (max-width: 380px) {
  .modern-shell .menu-title { font-size: 0.6rem; }
  .modern-shell .club-chips .chip { font-size: 0.67rem; }
  .modern-shell .board { padding: 12px 10px; }
  .dashboard .next-team { font-size: 0.88rem; }
  .dashboard .next-vs { width: 30px; height: 30px; }
  .dashboard .result-teams { font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final overrides: the compact mobile menus must win over the legacy sizes above. */
.modern-shell .menu-group.open .menu-list {
  width: max-content;
  min-width: min(190px, calc(100vw - 24px));
  max-width: min(232px, calc(100vw - 24px));
  padding: 5px;
}
.modern-shell .menu-list a,
.modern-shell .menu-group.current .menu-list a,
.modern-shell .menu-group.open .menu-list a {
  min-height: 40px;
  padding: 8px 11px;
  font-size: 0.875rem;
  line-height: 1.25;
}
/* Desktop: the drop-down is exactly as wide as the tile that opens it. */
@media (min-width: 761px) {
  .modern-shell .menu-group.open .menu-list { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; }
}
@media (max-width: 760px) {
  .modern-shell .menu-group.open .menu-list {
    max-height: min(58dvh, 360px);
    overflow-y: auto;
  }
}

/* Approved concept 01: Immersive Stadium, with a restrained tactical carousel.
   Scoped to the login route so the legacy auth, account and game screens are safe. */
.auth.auth-split.auth-immersive {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: 0;
  place-items: stretch;
  align-items: stretch;
  max-width: 1640px;
  width: 100%;
  min-height: 100dvh;
  height: auto;
  padding: 0;
  margin: 0 auto;
  background: #081722;
  border: 1px solid #2c4852;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}
.auth-immersive::before { display: none; }
.auth-immersive .auth-atmosphere {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  min-height: 100%;
  width: 100%;
  padding: clamp(26px, 3vw, 44px) clamp(25px, 3.2vw, 51px) clamp(22px, 2.5vw, 34px);
  background:
    radial-gradient(circle at 65% 37%, rgba(165, 208, 75, .13), transparent 48%),
    linear-gradient(90deg, rgba(7, 24, 33, .72), transparent 65%),
    linear-gradient(180deg, rgba(7, 22, 34, .33) 0%, rgba(9, 32, 47, .69) 40%, #05121d 95%),
    url('/assets/auth-immersive-supporters.jpg') center 29% / cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.auth-immersive .auth-stadium-motion { position: absolute; inset: 0; z-index: 0; opacity: .72; }
.auth-immersive .auth-stadium-motion::after { background: linear-gradient(180deg, transparent 0%, rgba(5, 18, 27, .13) 51%, rgba(6, 21, 32, .6) 94%); }
.auth-immersive .auth-crowd-wave { opacity: .35; }
.auth-immersive .auth-crowd-wave { background: url('/assets/auth-immersive-supporters.jpg') center 29% / cover; }
.auth-immersive .auth-hero-content {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  justify-content: initial;
  gap: 0;
  text-shadow: 0 2px 22px rgba(0, 5, 13, .5);
}
.auth-immersive .auth-hero-top { flex-wrap: wrap; gap: 10px; }
.auth-immersive .auth-kicker { color: #eef9e6; font-size: clamp(.72rem, .88vw, .92rem); font-weight: 900; letter-spacing: .10em; }
.auth-immersive .auth-kicker-divider { color: #9cafa8; margin: 0 5px; }
.auth-immersive .auth-live-mark { border-color: #487165; background: #09232acc; padding: 8px 13px; }
.auth-immersive .auth-showcase-hero { margin: clamp(55px, 9vh, 91px) 0 clamp(18px, 3vh, 36px); }
.auth-immersive .auth-showcase-hero > .auth-hero-eyebrow { color: var(--color-accent); font-size: .72rem; }
.auth-immersive .auth-atmosphere .auth-showcase-hero h1 {
  max-width: none;
  margin: 22px 0 15px;
  color: #fcfdff;
  font-size: clamp(3.45rem, 5.05vw, 6rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .99;
  text-wrap: nowrap;
}
.auth-immersive .auth-showcase-hero h1 span { color: var(--color-accent); }
.auth-immersive .auth-showcase-hero p { color: #d8e5eb; font-size: clamp(.98rem, 1.25vw, 1.14rem); line-height: 1.5; max-width: 41ch; margin: 0; }
.auth-immersive .auth-carousel { flex: 0 0 auto; margin-top: auto; gap: 15px; min-height: 0; justify-content: initial; }
.auth-immersive .auth-carousel-viewport { height: clamp(260px, 32dvh, 283px); min-height: 0; }
.auth-immersive .auth-carousel-slide {
  grid-template-columns: minmax(0, 47%) minmax(0, 53%);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  align-items: stretch;
  /* Clip the artwork's square background to the card's rounded border. */
  overflow: hidden;
  background: linear-gradient(110deg, rgba(8, 35, 46, .97), rgba(20, 50, 62, .92));
  border: 1px solid rgba(143, 194, 172, .40);
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0, 6, 15, .27);
}
.auth-immersive .auth-slide-copy { align-self: center; gap: clamp(7px, 1.25vh, 12px); padding: 27px 20px 27px 27px; }
.auth-immersive .auth-slide-number { font-size: .68rem; letter-spacing: .12em; }
.auth-immersive .auth-slide-copy h2 { font-size: clamp(1.5rem, 1.84vw, 1.95rem); line-height: 1.1; letter-spacing: -.05em; }
.auth-immersive .auth-slide-copy p { font-size: clamp(.78rem, .86vw, .89rem); line-height: 1.55; color: #c8dcdf; }
.auth-immersive .auth-slide-tag { color: #c8ec9c; font-size: .68rem; margin-top: 9px; letter-spacing: .04em; }
.auth-immersive .auth-slide-detail { color: #a8c8c1; font-size: .66rem; line-height: 1.4; font-weight: 700; letter-spacing: .02em; }
.auth-immersive .auth-carousel-art { height: 100%; position: relative; align-items: center; justify-items: center; background: radial-gradient(circle at 44% 53%, #2e6d4e66, transparent 62%), linear-gradient(135deg, #102d33, #071b26); }
.auth-immersive .auth-carousel-art img { width: 100%; max-height: 100%; object-fit: contain; }
.auth-immersive .auth-pitch {
  width: min(95%, 305px);
  height: min(79%, 215px);
  position: relative;
  border: 1px solid #92b69a;
  background: repeating-linear-gradient(0deg, #205a48 0 20%, #194b42 20% 40%);
  transform: perspective(430px) rotateX(28deg) rotateZ(-12deg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
  overflow: visible;
}
.auth-immersive .auth-pitch-outline { position: absolute; inset: 7%; border: 2px solid #84ac92; opacity: .68; }
.auth-immersive .auth-pitch-midline { position: absolute; inset: 7% 50%; border-left: 2px solid #84ac92; opacity: .7; }
.auth-immersive .auth-pitch-center { position: absolute; width: 24%; aspect-ratio: 1; border: 2px solid #84ac92; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .75; }
.auth-immersive .auth-pitch-box { position: absolute; top: 28%; height: 44%; width: 18%; border: 2px solid #84ac92; opacity: .65; }
.auth-immersive .auth-pitch-box.box-left { left: 7%; border-left: 0; }
.auth-immersive .auth-pitch-box.box-right { right: 7%; border-right: 0; }
.auth-immersive .auth-player-dot { position: absolute; transform: translate(-50%, -50%); width: clamp(9px, 1.05vw, 14px); aspect-ratio: 1; border: 2px solid #132e2f; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 2px #a9f14833; }
.auth-immersive .auth-player-dot.alternate { background: #d5ad5c; }
.auth-immersive .auth-tactical-chip {
  position: absolute; bottom: 8%; right: 5%; display: grid; gap: 4px;
  background: #0b202dea; border: 1px solid #517469; border-radius: 9px;
  padding: 9px 13px; box-shadow: 0 8px 25px #0006;
}
.auth-immersive .auth-tactical-chip small { color: var(--color-accent); font-size: .58rem; letter-spacing: .10em; font-weight: 800; }
.auth-immersive .auth-tactical-chip strong { color: #f1f8ed; font-size: .9rem; }
.auth-immersive .auth-carousel-controls { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 46px; }
.auth-immersive .auth-carousel-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 555px; gap: 12px; }
.auth-immersive .auth-carousel-chapter {
  display: flex; flex-direction: column; gap: 4px; justify-content: center; align-items: flex-start;
  min-width: 0; min-height: 44px; padding: 4px 10px 4px 12px;
  background: transparent; border: 0; border-left: 2px solid #65807b88;
  border-radius: 0; color: #bbc8ca; cursor: pointer; text-align: left;
}
.auth-immersive .auth-carousel-chapter[aria-current="true"] { border-left-color: var(--color-accent); color: #f6ffed; }
.auth-immersive .auth-carousel-chapter span { color: var(--color-accent); font-size: .72rem; }
.auth-immersive .auth-carousel-chapter strong { font-size: clamp(.58rem, .72vw, .70rem); line-height: 1.25; font-weight: 750; text-transform: uppercase; }
.auth-immersive .auth-carousel-arrows { display: flex; gap: 8px; }
.auth-immersive .auth-carousel-arrow { flex: 0 0 35px; width: 35px; height: 35px; border-radius: 9px; font-size: 1.45rem; }
.auth-immersive .auth-carousel-arrow:focus-visible, .auth-immersive .auth-carousel-chapter:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.auth-immersive .auth-form-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100%;
  width: 100%;
  max-width: none;
  padding: clamp(25px, 2.25vw, 38px) clamp(28px, 3.8vw, 65px) 28px;
  gap: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: radial-gradient(circle at 98% 3%, rgba(134, 225, 59, .07), transparent 40%), linear-gradient(140deg, #152a39 0%, #102431 65%, #0a1b27 100%);
}
.auth-immersive .auth-form-header { display: flex; align-items: center; min-height: 62px; }
.auth-immersive .auth-brand-inline { display: flex; align-items: center; gap: 16px; min-width: 0; }
.auth-immersive .auth-stadium-brand { display: block; flex: 0 0 auto; width: 60px; height: 60px; margin: 0; object-fit: contain; filter: drop-shadow(0 4px 10px #0008); }
.auth-immersive .auth-brand-copy { display: grid; gap: 3px; }
.auth-immersive .auth-brand-copy strong { color: #f7faf2; font-size: clamp(1.25rem, 1.65vw, 1.75rem); font-weight: 900; letter-spacing: .04em; }
.auth-immersive .auth-brand-copy small { color: #c8d5d6; font-size: .62rem; letter-spacing: .14em; font-weight: 750; }
.auth-immersive .auth-login-heading { margin: clamp(25px, 4.4dvh, 45px) 0 0; }
.auth-immersive .auth-login-heading .auth-hero-eyebrow { color: var(--color-accent); font-size: .66rem; }
.auth-immersive .auth-login-heading .auth-live-dot { display: inline-block; margin-right: 8px; }
.auth-immersive .auth-login-heading h2 { color: #fff; font-size: clamp(2.65rem, 2.85vw, 3.1rem); line-height: 1.05; letter-spacing: -.045em; font-weight: 900; margin: 13px 0 11px; }
.auth-immersive .auth-login-heading h2 span { color: #fff; }
.auth-immersive .auth-login-heading p { max-width: 38ch; color: #acc2cf; font-size: clamp(.85rem, 1.05vw, 1rem); line-height: 1.5; margin: 0; }
.auth-immersive .tabs { margin: clamp(20px, 3dvh, 27px) 0 0; gap: 8px; }
.auth-immersive .tabs button { min-height: 44px; font-size: .95rem; border-radius: 8px; background: #1d3344; border-color: #36536a; color: #c6d6de; }
.auth-immersive .tabs button.active { background: #29483e; border-color: #699d59; color: #d9fc91; }
.auth-immersive form { margin-top: 17px; gap: clamp(8px, 1dvh, 11px); }
.auth-immersive .field { color: #c0d4dc; font-size: .84rem; }
.auth-immersive .field input { min-height: 51px; background: #091827; border: 1px solid #375064; border-radius: 7px; color: #fff; padding: 10px 13px; }
.auth-immersive .field input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.auth-immersive form > p[style*="text-align"] { text-align: right !important; margin: -3px 0 0; min-height: 18px; }
.auth-immersive form a { color: #d5f6a3; }
.auth-immersive .btn.primary { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); min-height: 54px; font-weight: 850; margin-top: 0; }
.auth-immersive .auth-register-prompt { text-align: center; font-size: .83rem; margin: 0; color: #a9bbc6; }
.auth-immersive .auth-form-spacer { flex: 1 1 auto; min-height: 12px; }
.auth-immersive .auth-community { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #385064; padding: 14px 0 12px; }
.auth-immersive .auth-community-copy { display: grid; gap: 6px; }
.auth-immersive .auth-community-copy strong { font-size: .73rem; color: #e4f3e6; letter-spacing: .10em; }
.auth-immersive .auth-community-copy span { font-size: .76rem; color: #9db6c1; }
.auth-immersive .auth-social-icons { margin: 0; flex-wrap: nowrap; gap: 7px; }
.auth-immersive .auth-social-icon { width: 34px; height: 34px; border-color: #3a5666; border-radius: 8px; }
.auth-immersive .auth-form-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.auth-immersive .auth-footer-links { display: flex; gap: 8px; align-items: center; font-size: .81rem; margin: 0; }
.auth-immersive .auth-footer-links a { color: #bed5c1; }
.auth-immersive .auth-form-footer .lang-switch { margin: 0; }
.auth-immersive > .login-music-toggle {
  right: clamp(19px, 2.7vw, 45px); top: clamp(20px, 2.7vw, 47px);
  display: grid; place-items: center; width: 37px; height: 37px;
  padding: 0; line-height: 0; border-radius: 9px;
}
.auth-immersive > .login-music-toggle svg {
  display: block; width: 20px; height: 20px; margin: 0; transform: translateX(1px);
}
.auth-immersive .auth-mobile-gateway,
.auth-immersive .auth-mobile-back { display: none; }

@media (max-width: 1150px) and (min-width: 801px) {
  .auth.auth-split.auth-immersive { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); }
  .auth-immersive .auth-atmosphere { padding-inline: 26px; }
  .auth-immersive .auth-atmosphere .auth-showcase-hero h1 { font-size: clamp(2.8rem, 5.4vw, 4.4rem); }
  .auth-immersive .auth-carousel-slide { padding: 18px; }
  .auth-immersive .auth-slide-copy h2 { font-size: 1.45rem; }
  .auth-immersive .auth-form-card { padding-inline: 26px; }
  .auth-immersive .auth-community { flex-wrap: wrap; }
}
@media (max-width: 800px) {
  /* The mobile journey has two panes in one DOM, so music never remounts. */
  .auth.auth-split.auth-immersive {
    display: block; width: 100%; max-width: none; min-height: 100dvh;
    margin: 0; padding: 0; border: 0; overflow: hidden;
  }
  .auth-immersive[data-mobile-view="showcase"] .auth-form-card,
  .auth-immersive[data-mobile-view="form"] .auth-atmosphere { display: none; }
  .auth-immersive .auth-atmosphere {
    width: 100%; min-height: 100dvh; height: auto;
    padding: calc(25px + env(safe-area-inset-top, 0px))
      clamp(18px, 5vw, 42px) calc(23px + env(safe-area-inset-bottom, 0px));
    background-position: center, center, center, 54% center;
  }
  .auth-immersive .auth-hero-content { min-height: calc(100dvh - 75px); }
  .auth-immersive .auth-hero-top {
    display: flex; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 0; min-height: 38px;
    padding-right: 50px;
  }
  /* The journey badge repeats the hero message and crowds the mobile header. */
  .auth-immersive .auth-hero-top .auth-live-mark { display: none; }
  .auth-immersive .auth-mobile-gateway {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch; gap: 10px;
    margin-top: 12px; padding-right: 0;
  }
  .auth-immersive .auth-mobile-gateway button {
    flex: 1 1 0; min-width: 0; min-height: 43px; padding: 9px 12px;
    border: 1px solid #7dac62; border-radius: 9px; font-size: .9rem;
    font-weight: 800; cursor: pointer;
  }
  .auth-immersive .auth-mobile-signin { background: var(--color-accent); color: var(--color-accent-ink); }
  .auth-immersive .auth-mobile-signup { background: #142f35dc; color: #effedb; }
  .auth-immersive .auth-mobile-gateway button:focus-visible,
  .auth-immersive .auth-mobile-back:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 3px;
  }
  .auth-immersive .auth-showcase-hero {
    margin: clamp(24px, 4dvh, 39px) 0 clamp(18px, 3dvh, 28px);
  }
  .auth-immersive .auth-atmosphere .auth-showcase-hero h1 {
    font-size: clamp(2.7rem, 8.5vw, 5.1rem);
    white-space: normal; text-wrap: balance;
  }
  .auth-immersive .auth-carousel { margin-top: auto; gap: 12px; }
  /* Keep the entire in-game preview visible; place compact copy underneath it. */
  .auth-immersive .auth-carousel-viewport { height: clamp(405px, 48dvh, 450px); }
  .auth-immersive .auth-carousel-slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 59%) minmax(0, 41%);
  }
  .auth-immersive .auth-carousel-art {
    grid-column: 1; grid-row: 1;
    padding: 8px 8px 0;
  }
  .auth-immersive .auth-carousel-art img {
    width: 100%; height: 100%; max-height: 100%; object-fit: contain;
  }
  .auth-immersive .auth-slide-copy {
    grid-column: 1; grid-row: 2; align-self: stretch; align-content: center;
    padding: 9px 16px 10px; gap: 4px;
  }
  .auth-immersive .auth-slide-copy h2 { font-size: clamp(1.12rem, 3.35vw, 1.4rem); line-height: 1.08; }
  .auth-immersive .auth-slide-copy p { font-size: .74rem; line-height: 1.3; }
  .auth-immersive .auth-slide-detail { display: none; }
  .auth-immersive .auth-slide-tag { margin-top: 0; line-height: 1.2; }
  .auth-immersive .auth-carousel-controls { gap: 8px; }
  .auth-immersive .auth-carousel-chapters { gap: 4px; }
  .auth-immersive .auth-carousel-chapter { padding-inline: 8px 4px; }
  .auth-immersive .auth-carousel-chapter strong { font-size: clamp(.55rem, 1.5vw, .7rem); }
  .auth-immersive .auth-carousel-arrows { gap: 5px; }
  .auth-immersive .auth-carousel-arrow { flex-basis: 32px; width: 32px; height: 32px; }
  .auth-immersive .auth-form-card {
    min-height: 100dvh; width: 100%;
    padding: calc(85px + env(safe-area-inset-top, 0px))
      clamp(20px, 6vw, 52px) calc(26px + env(safe-area-inset-bottom, 0px));
  }
  .auth-immersive .auth-mobile-back {
    display: inline-flex; align-items: center; width: fit-content;
    position: absolute; top: calc(27px + env(safe-area-inset-top, 0px)); left: clamp(20px, 6vw, 52px);
    border: 0; background: transparent; color: #cef994;
    font-size: .85rem; font-weight: 750; cursor: pointer; padding: 7px 0;
  }
  .auth-immersive .auth-login-heading { margin-top: clamp(22px, 4dvh, 38px); }
  .auth-immersive > .login-music-toggle {
    position: absolute; top: calc(22px + env(safe-area-inset-top, 0px));
    right: calc(19px + env(safe-area-inset-right, 0px));
    width: 38px; height: 38px;
  }
}
@media (max-width: 530px) {
  .auth-immersive .auth-atmosphere {
    padding-inline: 18px;
    padding-top: calc(22px + env(safe-area-inset-top, 0px));
  }
  .auth-immersive .auth-hero-top .auth-kicker { font-size: clamp(.59rem, 2.7vw, .67rem); letter-spacing: .08em; }
  .auth-immersive .auth-live-mark { font-size: .56rem; }
  .auth-immersive .auth-mobile-gateway { margin-top: 10px; }
  .auth-immersive .auth-mobile-gateway button { max-width: none; }
  .auth-immersive .auth-showcase-hero { margin: clamp(23px, 3.7dvh, 33px) 0 19px; }
  .auth-immersive .auth-atmosphere .auth-showcase-hero h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .auth-immersive .auth-showcase-hero p { font-size: .85rem; }
  .auth-immersive .auth-carousel-viewport { height: clamp(405px, 48dvh, 450px); }
  .auth-immersive .auth-slide-copy { padding: 8px 14px 9px; gap: 3px; }
  .auth-immersive .auth-slide-number { font-size: .61rem; }
  .auth-immersive .auth-slide-tag { font-size: .60rem; }
  .auth-immersive .auth-carousel-chapter { gap: 3px; }
  .auth-immersive .auth-carousel-chapter span { font-size: .64rem; }
  .auth-immersive .auth-carousel-chapter strong { font-size: .56rem; }
  .auth-immersive .auth-form-card {
    padding-top: calc(82px + env(safe-area-inset-top, 0px));
    padding-inline: 19px;
  }
  .auth-immersive .auth-brand-inline { gap: 10px; }
  .auth-immersive .auth-stadium-brand { height: 52px; width: 52px; }
  .auth-immersive .auth-brand-copy strong { font-size: 1.2rem; }
  .auth-immersive .auth-brand-copy small { font-size: .52rem; }
  .auth-immersive .auth-login-heading h2 { font-size: clamp(2.3rem, 9vw, 3.1rem); }
  .auth-immersive .auth-community { flex-wrap: wrap; }
  .auth-immersive > .login-music-toggle { width: 35px; height: 35px; }
}