/* Estética "estadio de noche": paneles azules con borde claro y contorno marino, botones de colores
   con brillo y relieve, títulos gruesos con contorno y el estadio iluminado de fondo.
   Solo cambia el aspecto: se carga después de los estilos de cada pantalla y antes de mobile.css. */

:root {
  --bg: #0b2463;
  --panel: #12358a;
  --panel-2: #1b4cb4;
  --line: rgba(110, 190, 255, 0.35);
  --muted: #b4c8f0;

  --stroke: #071a45;        /* contorno grueso de paneles, botones y textos */
  --rim: #63c2ff;           /* borde claro de los paneles */
  --panel-top: #1f56c3;
  --panel-bot: #10306f;
  --tile: #0d2a6e;          /* huecos interiores (filas, casillas) */
  --gold: #ffd23f;

  /* Contorno de texto: grueso para títulos y botones, fino para textos pequeños */
  --ink: 0 3px 0 var(--stroke), 2px 0 0 var(--stroke), -2px 0 0 var(--stroke), 0 -2px 0 var(--stroke),
    1.5px 1.5px 0 var(--stroke), -1.5px 1.5px 0 var(--stroke), 1.5px -1.5px 0 var(--stroke), -1.5px -1.5px 0 var(--stroke);
  --ink-thin: 0 1.5px 0 var(--stroke), 1px 0 0 var(--stroke), -1px 0 0 var(--stroke), 0 -1px 0 var(--stroke);
}

/* ---------- Fondo: estadio de noche con focos (azul hasta abajo, sin césped) ---------- */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 9% 5%, #fff 0, rgba(200, 230, 255, 0.75) 0.8%, rgba(120, 190, 255, 0.22) 5%, transparent 15%),
    radial-gradient(circle at 91% 5%, #fff 0, rgba(200, 230, 255, 0.75) 0.8%, rgba(120, 190, 255, 0.22) 5%, transparent 15%),
    radial-gradient(circle at 27% 2%, rgba(255, 255, 255, 0.7) 0, rgba(150, 210, 255, 0.16) 3.5%, transparent 9%),
    radial-gradient(circle at 73% 2%, rgba(255, 255, 255, 0.7) 0, rgba(150, 210, 255, 0.16) 3.5%, transparent 9%),
    radial-gradient(ellipse 85% 60% at 50% 36%, rgba(80, 160, 255, 0.5), transparent 70%),
    linear-gradient(180deg, #0a1f57 0%, #12348a 40%, #1750b0 75%, #1a5cc4 100%);
  background-attachment: fixed;
}
/* Las pantallas dejan ver el estadio (el Estadio, los Ojeadores y el Mercado tienen su propia escena) */
.league, .squad, .gym, .team-view, .help, .match, .economy, .medical, .tactics { background: transparent; }
.market {
  background:
    linear-gradient(rgba(120, 200, 255, 0.07) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(120, 200, 255, 0.07) 1px, transparent 1px) 0 0 / 40px 100%,
    radial-gradient(ellipse at 50% 45%, rgba(40, 110, 230, 0.85), rgba(8, 26, 80, 0.97) 75%);
}

/* ---------- Títulos ---------- */
.screen h2, .modal__head h2 { color: #fff; text-shadow: var(--ink); }
.screen h3, .screen h4 { text-shadow: var(--ink-thin); }

/* ---------- Paneles ---------- */
.league__table, .league__side section, .squad__table, .gym__list, .info-card, .team-league__games,
.help__index, .help__content, .match__board, .match__feed, .match__side section, .match__empty,
.eco-card, .medical__body > section, .bench, .playoff-block, .season-end, .home-card, .cal-card, .stats-card,
.search-card, .staff-card {
  border: 3px solid var(--stroke);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  box-shadow: inset 0 0 0 3px var(--rim), inset 0 6px 0 3px rgba(255, 255, 255, 0.1), 0 5px 0 rgba(3, 10, 35, 0.55);
}
.league__side h3, .match__feed h3, .match__side h3, .eco-card h3, .info-card h3, .medical__body h3,
.team-league__games h3, .playoff-block h3, .home-card h3, .cal-card h3, .stats-card h3, .search-card h3, .staff-card h3 {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: var(--ink);
}
/* Huecos interiores (como las casillas de "Misión diaria") */
.patient, .kit, .eco-move, .fixtures li, .mstat__bar, .eco-bar__track, .report__match {
  border-radius: 12px;
}
.patient, .kit { background: var(--tile); box-shadow: inset 0 0 0 2px rgba(99, 194, 255, 0.35); }
.fixtures li { background: rgba(7, 26, 69, 0.45); }

/* Tablas */
.standings th, .squad-table th, .help-table th {
  background: var(--tile);
  color: #dbe7ff;
  text-shadow: var(--ink-thin);
  border-bottom: 2px solid var(--stroke);
}
.standings td, .squad-table td { border-top-color: rgba(99, 194, 255, 0.14); }
.standings tr.is-me td, .squad-table tr.is-me td {
  background: linear-gradient(90deg, rgba(255, 162, 31, 0.45), rgba(255, 210, 63, 0.18));
}
.rank { border: 2px solid var(--stroke); text-shadow: var(--ink-thin); }

/* ---------- Botones con brillo y relieve ---------- */
.btn {
  border: 3px solid #0b3a10;
  border-radius: 16px;
  color: #fff;
  text-shadow: 0 2px 0 #0b3a10, 1px 0 0 #0b3a10, -1px 0 0 #0b3a10, 0 -1px 0 #0b3a10;
  background: linear-gradient(180deg, #9af57a 0%, #4fd043 42%, #2ca72a 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 5px 0 #0b3a10;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 1px 0 #0b3a10; }
.btn--ghost {
  border-color: #0a2152;
  text-shadow: 0 2px 0 #0a2152, 1px 0 0 #0a2152, -1px 0 0 #0a2152, 0 -1px 0 #0a2152;
  background: linear-gradient(180deg, #78d6ff 0%, #2f92f2 45%, #1c62d2 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 5px 0 #0a2152;
}
.btn--ghost:active:not(:disabled) { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 1px 0 #0a2152; }
.btn--danger {
  border-color: #4f0710;
  text-shadow: 0 2px 0 #4f0710, 1px 0 0 #4f0710, -1px 0 0 #4f0710, 0 -1px 0 #4f0710;
  background: linear-gradient(180deg, #ff9a9a 0%, #f2414a 45%, #c11b27 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 5px 0 #4f0710;
}
/* Botón estrella (como "TAP TO OPEN"): pujar en el mercado */
.btn-bid {
  border: 4px solid #5a2a00;
  background: linear-gradient(180deg, #ffe07a 0%, #ffab2a 45%, #f07800 100%);
  text-shadow: var(--ink);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.55), inset 0 -5px 0 rgba(0, 0, 0, 0.18), 0 6px 0 #5a2a00, 0 0 26px rgba(255, 170, 40, 0.45);
}
.btn-bid b { color: #fff; }

/* Pestañas, flechas y baldosas pequeñas: azules; la activa, naranja */
.tab, .league__nav, .link-btn, .modal__close, .bench__nav, .group-picker select {
  border: 3px solid var(--stroke);
  background: linear-gradient(180deg, #5cc4ff, #2479e0 55%, #1858c0);
  color: #fff;
  text-shadow: var(--ink-thin);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 0 var(--stroke);
}
.tab.is-active {
  background: linear-gradient(180deg, #ffe07a, #ffab2a 50%, #f07800);
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #5a2a00;
  border-color: #5a2a00;
}
.tab:hover:not(.is-active), .league__nav:hover:not(:disabled) { filter: brightness(1.1); }
.league__nav:disabled { opacity: 0.45; }
.group-picker select { font-family: var(--font-display); font-weight: 400; }
.group-picker select option { background: var(--panel); }

/* Chips y etiquetas */
.chip {
  border: 2px solid var(--stroke);
  background: var(--tile);
  box-shadow: inset 0 0 0 2px rgba(99, 194, 255, 0.45);
  font-weight: 700;
}
.tag, .zone { border: 2px solid var(--stroke); text-shadow: none; }

/* ---------- HUD ---------- */
.hud {
  background: linear-gradient(180deg, #2163d6, #123a96 60%, #0d2c78);
  border-bottom: 3px solid var(--stroke);
  box-shadow: inset 0 -3px 0 rgba(99, 194, 255, 0.35), 0 4px 0 rgba(0, 0, 0, 0.3);
}
/* Escudo del club */
.crest {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%);
  background: linear-gradient(160deg, #6cc8ff, #2a7ae6 45%, #143f9e);
  box-shadow: none;
}
.hud__left .crest { filter: drop-shadow(2px 0 0 var(--stroke)) drop-shadow(-2px 0 0 var(--stroke)) drop-shadow(0 2px 0 var(--stroke)) drop-shadow(0 -2px 0 var(--stroke)); }
/* Nombre del club en su caja */
.hud__info {
  padding: 3px 10px 4px;
  border: 2px solid var(--stroke);
  border-radius: 12px;
  background: linear-gradient(180deg, #123a8e, #0b2463);
  box-shadow: inset 0 0 0 2px rgba(99, 194, 255, 0.45);
}
.hud__club { text-transform: uppercase; text-shadow: var(--ink-thin); }
.hud__sub { color: #cfe0ff; }
.badge--level { border: 2px solid var(--stroke); }
.hud__division { border: 2px solid var(--stroke); background: var(--tile); color: #8fe3ff; }
/* Saldo: cifra dorada con contorno */
.hud__center {
  border: 3px solid var(--stroke);
  background: linear-gradient(180deg, #123a8e, #0b2463);
  box-shadow: inset 0 0 0 2px rgba(99, 194, 255, 0.45), 0 3px 0 rgba(0, 0, 0, 0.3);
}
.balance { color: var(--gold); text-shadow: var(--ink); }
/* Próximo partido / pitido inicial */
.kickoff {
  align-items: center;
  padding: 3px 12px;
  border: 3px solid var(--stroke);
  border-radius: 14px;
  background: linear-gradient(180deg, #123a8e, #0b2463);
  box-shadow: inset 0 0 0 2px rgba(99, 194, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.3);
}
.kickoff small { color: #fff; font-weight: 600; text-shadow: var(--ink-thin); }
.kickoff b { color: var(--gold); text-shadow: var(--ink); }
.rival__vs { color: #ffd23f; text-shadow: var(--ink-thin); }
.rival__name { font-weight: 700; text-shadow: var(--ink-thin); }
.rival__crest { border: 2px solid var(--stroke); background: var(--tile); }
/* Ayuda: baldosa cuadrada (como "Mensajes") */
.help-btn {
  border: 3px solid var(--stroke);
  border-radius: 12px;
  color: #fff;
  text-shadow: var(--ink-thin);
}
.help-btn {
  background: linear-gradient(180deg, #78d6ff, #2f92f2 50%, #1c62d2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--stroke);
}
.help-btn:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--stroke); }

/* ---------- Menú izquierdo y submenú: baldosas de color (como la barra de la imagen) ---------- */
/* Color de cada apartado; el submenú toma el del apartado en el que estás */
.tone-orange { --tile-a: #ffd36a; --tile-b: #ff9a1f; --tile-c: #f07400; --tile-edge: #5a2a00; }
.tone-blue { --tile-a: #78d6ff; --tile-b: #2f92f2; --tile-c: #1c62d2; --tile-edge: #0a2152; }
.tone-green { --tile-a: #9af57a; --tile-b: #4fd043; --tile-c: #2ca72a; --tile-edge: #0b3a10; }
.tone-purple { --tile-a: #d29bff; --tile-b: #9a55f2; --tile-c: #6f2fcc; --tile-edge: #2a0d55; }
.tone-pink { --tile-a: #ff9fd6; --tile-b: #f04aa8; --tile-c: #c22a80; --tile-edge: #520a32; }

.sidebar, .subnav { background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); }
.sidebar { border-right: 3px solid var(--stroke); box-shadow: inset -3px 0 0 var(--rim), 6px 0 18px rgba(0, 0, 0, 0.3); }
.subnav { border-top: 3px solid var(--stroke); box-shadow: inset 0 3px 0 var(--rim), 0 -6px 18px rgba(0, 0, 0, 0.3); }
.sidebar__link, .subnav__link {
  --tile-a: #78d6ff;
  --tile-b: #2f92f2;
  --tile-c: #1c62d2;
  --tile-edge: #0a2152;
  border: 3px solid var(--tile-edge);
  background: linear-gradient(180deg, var(--tile-a), var(--tile-b) 50%, var(--tile-c));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--tile-edge);
  color: #fff;
  text-shadow: 0 2px 0 var(--tile-edge), 1px 0 0 var(--tile-edge), -1px 0 0 var(--tile-edge), 0 -1px 0 var(--tile-edge);
}
.sidebar__link.tone-orange { --tile-a: #ffd36a; --tile-b: #ff9a1f; --tile-c: #f07400; --tile-edge: #5a2a00; }
.sidebar__link.tone-blue { --tile-a: #78d6ff; --tile-b: #2f92f2; --tile-c: #1c62d2; --tile-edge: #0a2152; }
.sidebar__link.tone-green { --tile-a: #9af57a; --tile-b: #4fd043; --tile-c: #2ca72a; --tile-edge: #0b3a10; }
.sidebar__link.tone-purple { --tile-a: #d29bff; --tile-b: #9a55f2; --tile-c: #6f2fcc; --tile-edge: #2a0d55; }
.sidebar__link.tone-pink { --tile-a: #ff9fd6; --tile-b: #f04aa8; --tile-c: #c22a80; --tile-edge: #520a32; }
/* En el submenú, las pestañas que no estás viendo van algo apagadas */
.subnav__link:not(.is-active) { filter: saturate(0.75) brightness(0.88); }
.sidebar__link:hover, .subnav__link:hover { filter: brightness(1.1); }
.sidebar__link.is-active, .subnav__link.is-active {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--tile-edge), 0 0 0 3px var(--gold), 0 0 16px rgba(255, 210, 63, 0.6);
}
.sidebar__badge { border: 2px solid var(--stroke); box-shadow: none; line-height: 13px; }

/* ---------- Ventanas, avisos y cuadros ---------- */
.modal {
  border: 4px solid var(--stroke);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  box-shadow: inset 0 0 0 4px var(--rim), inset 0 8px 0 4px rgba(255, 255, 255, 0.1), 0 8px 0 rgba(3, 10, 35, 0.7), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.modal__head h2 { text-transform: uppercase; }
.modal__close { width: 34px; height: 34px; border-radius: 10px; }
.toast {
  border: 3px solid var(--stroke);
  background: linear-gradient(180deg, #1b4cb4, #10306f);
  text-shadow: var(--ink-thin);
}
.report__match { background: var(--tile); box-shadow: inset 0 0 0 2px rgba(99, 194, 255, 0.4); }

/* ---------- Alineación ---------- */
.pitch { border: 4px solid var(--stroke); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35), 0 6px 0 rgba(3, 10, 35, 0.55); }
.drawer__tab { border: 3px solid var(--stroke); border-right: 0; }
.slot__label { border: 2px solid var(--stroke); }

/* ---------- Partido, Economía y Botiquines ---------- */
.match__score b, .eco-balance, .kit__stock { text-shadow: var(--ink); }
.match__clock b { color: #fff; text-shadow: var(--ink-thin); }
.match__pitch { border: 3px solid var(--stroke); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35); }
.match__timeline { border: 2px solid var(--stroke); height: 10px; background: var(--tile); }
.eco-balance { border: 3px solid var(--stroke); background: linear-gradient(180deg, #123a8e, #0b2463); color: var(--gold); }
.eco-balance.neg { color: #ff8a90; }
.league__progress { border: 2px solid var(--stroke); height: 10px; background: var(--tile); }

/* ---------- Ayuda ---------- */
.help__topic.is-active {
  border: 2px solid #5a2a00;
  background: linear-gradient(180deg, #ffe07a, #ffab2a 50%, #f07800);
  color: #fff;
  text-shadow: var(--ink-thin);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #5a2a00;
}

/* ---------- HUD en pantallas medianas: textos cortos para que quepan en la caja del club ---------- */
@media (max-width: 1440px) {
  .hud__sub .only-wide { display: none; }
  .hud__sub .only-compact { display: inline; }
}

/* ---------- Cartas de jugador: como los botones (brillo, relieve y contorno grueso) ----------
   Cada rareza tiene su tono: claro arriba (--rar-a), medio (--rar-b), oscuro abajo (--rar-c) y el
   contorno (--rar-edge). Números y nombre en blanco con contorno, como los títulos. */
.card {
  --rar-a: #ffcf8a;
  --rar-b: #e98a3a;
  --rar-c: #b4561c;
  --rar-edge: #4a1e04;
  --card-ink: 0 0.07em 0 var(--rar-edge), 0.05em 0 0 var(--rar-edge), -0.05em 0 0 var(--rar-edge), 0 -0.05em 0 var(--rar-edge),
    0.04em 0.04em 0 var(--rar-edge), -0.04em 0.04em 0 var(--rar-edge);
  border: calc(var(--card-h) * 0.022) solid var(--rar-edge);
  color: #fff;
}
/* Bronce, Plata y Oro: brillo arriba y relieve abajo (Platino, Diamante y el reverso tienen su fondo) */
.card--bronze, .card--silver, .card--gold {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.5), transparent 52%),
    linear-gradient(180deg, var(--rar-a) 0%, var(--rar-b) 45%, var(--rar-c) 100%);
  box-shadow:
    inset 0 calc(var(--card-h) * 0.025) 0 rgba(255, 255, 255, 0.45),
    inset 0 calc(var(--card-h) * -0.03) 0 rgba(0, 0, 0, 0.18),
    0 calc(var(--card-h) * 0.035) 0 var(--rar-edge),
    0 calc(var(--card-h) * 0.06) calc(var(--card-h) * 0.08) rgba(0, 0, 0, 0.3);
}
.card--bronze { --rar-a: #ffcf8a; --rar-b: #e98a3a; --rar-c: #b4561c; --rar-edge: #4a1e04; }
.card--silver { --rar-a: #f4f8ff; --rar-b: #b6c6de; --rar-c: #7488ad; --rar-edge: #222f4d; }
.card--gold { --rar-a: #fff4a8; --rar-b: #ffcb2b; --rar-c: #e08f00; --rar-edge: #563600; }
.card--platinum {
  --rar-edge: #061442;
  border-color: var(--rar-edge);
  box-shadow:
    inset 0 0 0 calc(var(--card-h) * 0.02) #a9d2ff,
    0 0 calc(var(--card-h) * 0.1) rgba(70, 150, 255, 0.85),
    0 calc(var(--card-h) * 0.035) 0 var(--rar-edge);
}
.card--diamond { --rar-edge: #1a0b45; border-color: var(--rar-edge); }
.card--platinum, .card--diamond { text-shadow: none; }
.card--platinum .card__rarity, .card--diamond .card__rarity { font-size: 0.85em; letter-spacing: 0; }

/* Número grande, posición y potencial con contorno */
.card__level, .card__pos, .card__rarity, .card__age, .card__stats { text-shadow: var(--card-ink); }
.card__level { font-size: 2.4em; }
.card__pos { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; }
.card__photo { filter: drop-shadow(0 calc(var(--card-h) * 0.02) 0 rgba(0, 0, 0, 0.35)); }
/* Nombre en una franja oscura, como las cabeceras de los paneles */
.card__name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar-edge) 75%, #fff 10%), var(--rar-edge));
  border-top: calc(var(--card-h) * 0.012) solid rgba(255, 255, 255, 0.35);
  text-shadow: 0 0.07em 0 #000a;
}
.card__meta { background: rgba(0, 0, 0, 0.12); }
.card__rarity { opacity: 1; }
.card__age.is-old { text-shadow: none; box-shadow: 0 0 0 0.12em var(--rar-edge); }
.card__pts {
  border: calc(var(--card-h) * 0.012) solid var(--rar-edge);
  background: linear-gradient(180deg, #123a8e, #0b2463);
  color: var(--gold);
  text-shadow: 0 0.06em 0 #000a;
}
/* Carta grande: las 6 estadísticas en blanco con contorno; la que entrena, en verde */
.card--full .card__name {
  width: 100%;
  padding: 2% 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar-edge) 75%, #fff 10%), var(--rar-edge));
  color: #fff;
  border-bottom: 0;
}
.card__stats .is-focus { color: #7dffb0; }
.card--diamond .card__name, .card--platinum .card__name { background: rgba(4, 10, 40, 0.75); }
/* Reverso (carta por descubrir) */
.card--back {
  border-color: #3a2a00;
  box-shadow: inset 0 0 0 calc(var(--card-h) * 0.02) var(--yellow), 0 calc(var(--card-h) * 0.035) 0 #3a2a00, 0 0 30px rgba(255, 210, 63, 0.5);
}
.card--back .card__back-mark, .card--back .card__back-label { text-shadow: 0 0.06em 0 #3a2a00, 0 0 18px var(--yellow); }

/* =========================================================================================
   GUÍA DE ESTILO "PEGATINA": la regla final para toda la web
   - Forma: rectángulos muy redondeados (píldora en el submenú) con trazo exterior grueso oscuro.
   - Volumen: colores saturados con degradado vertical (claro arriba → oscuro abajo), franja de
     brillo blanco en el borde superior interno (plástico) y sombra plana debajo.
   - Texto: sans-serif muy gruesa, MAYÚSCULAS, blanco o amarillo, con contorno oscuro y sombra plana.
   - Iconos: dentro del botón, a la izquierda o encima del texto.
   - Jerarquía: la acción principal es más grande, verde brillante con texto amarillo.
   ========================================================================================= */
:root {
  --outline: #061433;                 /* trazo exterior de todo lo "pegatina" */
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 46%, transparent 47%);
  --txt-ink: 0 3px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 -2px 0 var(--outline),
    2px 2px 0 var(--outline), -2px 2px 0 var(--outline), 2px -2px 0 var(--outline), -2px -2px 0 var(--outline);
}

/* ---------- Tipografía de botones, pestañas, menús y títulos ---------- */
.screen h2, .modal__head h2, .home-card h3,
.cal-card h3, .stats-card h3, .search-card h3, .staff-card h3, .eco-card h3, .league__side h3,
.match__feed h3, .match__side h3, .info-card h3, .medical__body h3, .playoff-block h3, .help__content h2,
.kickoff small, .chip, .zone {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn, .btn-bid, .tab, .sidebar__label, .subnav__label, .league__nav, .link-btn {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  text-shadow: var(--txt-ink);
}
.screen h2, .modal__head h2 { color: #fff; text-shadow: var(--txt-ink); }

/* ---------- Forma y volumen: botones de plástico ---------- */
.btn, .tab, .league__nav, .link-btn, .modal__close, .bench__nav, .help-btn, .sidebar__link, .subnav__link {
  position: relative;
  border: 3px solid var(--outline);
  /* franja de brillo (arriba) + degradado del color (claro → oscuro) */
  background-image: var(--gloss), linear-gradient(180deg, var(--c-a, #78d6ff) 0%, var(--c-b, #2f92f2) 50%, var(--c-c, #1c62d2) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 4px 0 var(--outline);
}
.btn:active:not(:disabled), .tab:active, .league__nav:active:not(:disabled), .sidebar__link:active, .subnav__link:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 0 var(--outline);
}
.btn { border-radius: 18px; --c-a: #a8ff7c; --c-b: #4fd043; --c-c: #239a22; }       /* verde: acción */
.btn--ghost { --c-a: #8ae0ff; --c-b: #2f92f2; --c-c: #1858c0; }                       /* azul: secundaria */
.btn--danger { --c-a: #ffa3a3; --c-b: #f2414a; --c-c: #b3141f; }                      /* rojo: peligro */
.tab, .league__nav, .link-btn, .modal__close, .bench__nav, .help-btn { --c-a: #8ae0ff; --c-b: #2f92f2; --c-c: #1858c0; }
.tab { border-radius: 999px; }
.tab.is-active { --c-a: #fff07a; --c-b: #ffb92a; --c-c: #f07800; border-color: var(--outline); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 0 var(--outline); }
.tab.is-active, .btn--hero { color: #fff; }
.league__nav, .modal__close, .help-btn { border-radius: 14px; }

/* ---------- Menú izquierdo: baldosas con el icono encima del texto ---------- */
.sidebar__link {
  border-radius: 20px;
  background-image: var(--gloss), linear-gradient(180deg, var(--tile-a) 0%, var(--tile-b) 50%, var(--tile-c) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 4px 0 var(--outline);
}
.sidebar__link.is-active {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 0 var(--outline), 0 0 0 3px var(--gold), 0 0 18px rgba(255, 210, 63, 0.65);
}
.sidebar__icon, .subnav__icon { filter: drop-shadow(0 2px 0 rgba(6, 20, 51, 0.7)); }

/* ---------- Submenú inferior: píldoras con el icono a la izquierda ---------- */
.subnav__link {
  border-radius: 999px;
  background-image: var(--gloss), linear-gradient(180deg, var(--tile-a) 0%, var(--tile-b) 50%, var(--tile-c) 100%);
}
.subnav__link.is-active {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 0 var(--outline), 0 0 0 3px var(--gold), 0 0 18px rgba(255, 210, 63, 0.65);
}

/* ---------- Jerarquía: la acción principal es grande, verde y con texto amarillo ---------- */
.btn--hero, .btn-bid {
  --c-a: #b6ff7a; --c-b: #3fdc3a; --c-c: #179a1c;
  border: 4px solid var(--outline);
  border-radius: 22px;
  padding: 0.55em 1.5em;
  font-size: clamp(1.15rem, 2.6vh, 1.6rem);
  color: var(--gold);
  background-image: var(--gloss), linear-gradient(180deg, var(--c-a) 0%, var(--c-b) 50%, var(--c-c) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 var(--outline),
    0 0 24px rgba(80, 230, 70, 0.45);
}
.btn-bid { color: #fff; }
.btn-bid > span { color: var(--gold); }
.btn--hero:hover, .btn-bid:hover:not(:disabled) { filter: brightness(1.08) saturate(1.1); }
.home-card--primary .home-card__go { align-self: stretch; text-align: center; }

/* ---------- Paneles y pegatinas pequeñas ---------- */
.league__table, .league__side section, .squad__table, .gym__list, .info-card, .team-league__games,
.help__index, .help__content, .match__board, .match__feed, .match__side section, .match__empty,
.eco-card, .medical__body > section, .bench, .playoff-block, .season-end, .home-card, .cal-card, .stats-card,
.search-card, .staff-card, .modal {
  border-color: var(--outline);
  border-radius: 24px;
}
.chip, .tag, .zone, .hud__division, .badge--level { border-color: var(--outline); border-radius: 999px; }
.chip { font-family: var(--font-display); font-weight: 400; text-shadow: 0 2px 0 var(--outline); }
/* Pujar: la acción principal del Mercado, la más grande y con pulso verde */
.btn-bid {
  padding: 0.3em clamp(30px, 5.5vw, 64px) 0.35em;
  font-size: clamp(22px, 5.2vh, 36px);
  line-height: 1.05;
  animation: bid-pulse-green 1.6s ease-in-out infinite;
}
@keyframes bid-pulse-green {
  50% {
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 var(--outline),
      0 0 40px rgba(80, 230, 70, 0.85);
  }
}
.btn-bid:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), 0 2px 0 var(--outline); }
/* Ya vas ganando: amarillo, sin pulso */
.btn-bid:disabled { --c-a: #fff07a; --c-b: #ffb92a; --c-c: #f07800; animation: none; filter: none; }

/* ---------- Botones del menú y del submenú al estilo de la referencia ----------
   Contorno del tono oscuro del propio botón, franja clara arriba, icono plano dentro (trazo oscuro y
   relleno claro del mismo tono, ver ui/icons.js) encima del texto, y texto blanco con contorno. */
.sidebar__link, .subnav__link {
  border-color: var(--tile-edge);
  border-width: 3px;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, var(--tile-a) 0%, var(--tile-b) 50%, var(--tile-c) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 0 var(--tile-edge);
}
.sidebar__link.is-active, .subnav__link.is-active {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 var(--tile-edge), 0 0 0 3px var(--gold), 0 0 16px rgba(255, 210, 63, 0.6);
}
.sidebar__label, .subnav__label {
  text-transform: none;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 0 var(--tile-edge), 1.5px 0 0 var(--tile-edge), -1.5px 0 0 var(--tile-edge), 0 -1.5px 0 var(--tile-edge),
    1.5px 1.5px 0 var(--tile-edge), -1.5px 1.5px 0 var(--tile-edge), 1.5px -1.5px 0 var(--tile-edge), -1.5px -1.5px 0 var(--tile-edge);
}
.sidebar__icon, .subnav__icon { filter: none; line-height: 0; }
.ico {
  width: 1em;
  height: 1em;
  overflow: visible;
  fill: none;
  stroke: var(--tile-edge);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.18));
}
.ico .f { fill: color-mix(in srgb, var(--tile-a) 70%, #fff 30%); }
.sidebar__link { justify-content: center; gap: 3px; padding: 8px 4px 9px; }
/* Texto del menú izquierdo más grande */
.sidebar__label { font-size: clamp(15px, 1.5vw, 20px); }
/* Texto del submenú de abajo más grande */
.subnav__label { font-size: clamp(16px, 1.6vw, 22px); }
.subnav__icon { font-size: clamp(22px, 3.6vh, 30px); }
.sidebar__link .sidebar__icon { font-size: clamp(26px, 4.6vh, 36px); }
.subnav__icon { font-size: clamp(20px, 3.2vh, 26px); }
.sidebar__link:hover .sidebar__icon, .sidebar__link.is-active .sidebar__icon { transform: scale(1.08); }
.sidebar__icon { transition: transform 0.15s; }

/* ---------- Todos los botones al estilo de la referencia ----------
   Contorno y contorno del texto del tono oscuro de su propio color; texto con mayúscula inicial. */
.btn { --c-edge: #0b4a12; }
.btn--ghost, .tab, .league__nav, .link-btn, .modal__close, .bench__nav, .help-btn { --c-edge: #0a2152; }
.btn--danger { --c-edge: #4f0710; }
.tab.is-active, .btn-bid:disabled { --c-edge: #5a2a00; }
.btn--hero, .btn-bid { --c-edge: #0b4a12; }
.btn, .btn-bid, .tab, .league__nav, .link-btn, .modal__close, .bench__nav, .help-btn {
  border-color: var(--c-edge);
  text-transform: none;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 var(--c-edge), 1.5px 0 0 var(--c-edge), -1.5px 0 0 var(--c-edge), 0 -1.5px 0 var(--c-edge),
    1.5px 1.5px 0 var(--c-edge), -1.5px 1.5px 0 var(--c-edge), 1.5px -1.5px 0 var(--c-edge), -1.5px -1.5px 0 var(--c-edge);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, var(--c-a, #78d6ff) 0%, var(--c-b, #2f92f2) 50%, var(--c-c, #1c62d2) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 0 var(--c-edge);
}
.tab.is-active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 var(--c-edge); }
.btn--hero, .btn-bid {
  border-width: 4px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 5px 0 var(--c-edge),
    0 0 24px rgba(80, 230, 70, 0.45);
}
.btn-bid:disabled { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 5px 0 var(--c-edge); }

/* ---------- Ayuda: índice agrupado como el menú ---------- */
.help__group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 4px 2px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 2px 0 var(--tile-edge), 1px 0 0 var(--tile-edge), -1px 0 0 var(--tile-edge), 0 -1px 0 var(--tile-edge);
}
.help__group .ico { width: 22px; height: 22px; }
.help__group::after { content: ''; flex: 1; height: 3px; border-radius: 2px; background: var(--tile-b); opacity: 0.7; }
@media (max-height: 500px) and (orientation: landscape), (max-width: 900px) {
  .help__group span, .help__group::after { display: none; }
  .help__group { justify-content: center; margin: 6px 0 0; }
}

/* ---------- Submenú sin iconos: solo el nombre (y el número de avisos a su lado) ---------- */
.subnav__link { gap: 6px; }
.sidebar__badge.subnav__badge { position: static; flex: none; }

/* Botón de vender en la Plantilla: pequeño, para no robar protagonismo a la tabla */
.squad-sell { padding: 0.25em 0.7em; font-size: 0.78rem; white-space: nowrap; }

/* ---------- Menú izquierdo: los cinco botones se reparten toda la altura visible ---------- */
.sidebar { overflow: hidden; }
.sidebar__nav { flex: 1; min-height: 0; }
.sidebar__nav li { flex: 1 1 0; min-height: 0; display: flex; }
.sidebar__link { flex: 1; min-height: 0; }
.sidebar__link .sidebar__icon { font-size: clamp(26px, 6vh, 46px); }
.sidebar__label { font-size: clamp(15px, min(1.6vw, 3vh), 22px); }
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar__link .sidebar__icon { font-size: clamp(18px, 6vh, 26px); }
  .sidebar__label { font-size: 10px; }
}

/* Herramientas de prueba dentro de la Ayuda */

/* ---------- Ayuda: sin índice lateral; secciones en el submenú de abajo y temas en pestañas ---------- */
.help { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; }
.help:not(:has(.help__tabs)) { grid-template-rows: minmax(0, 1fr); }
.help__tabs { flex-wrap: wrap; gap: 8px; }
.help__tabs .tab { text-decoration: none; }
/* El botón "?" marcado mientras estás en la Ayuda */
.help-btn.is-active {
  --c-a: #fff07a; --c-b: #ffb92a; --c-c: #f07800; --c-edge: #5a2a00;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 var(--c-edge), 0 0 0 3px var(--gold), 0 0 14px rgba(255, 210, 63, 0.7);
}
/* Submenú con muchos botones (la Ayuda): nombres en dos líneas si no caben */
.subnav--many { gap: 6px; }
.subnav--many .subnav__link { padding-left: 4px; padding-right: 4px; }
.subnav--many .subnav__label { white-space: normal; text-align: center; line-height: 1.05; font-size: clamp(13px, 1.3vw, 19px); }
@media (max-height: 500px) and (orientation: landscape) { .subnav--many .subnav__label { font-size: 11px; } }
@media (orientation: portrait) and (max-width: 820px) {
  .subnav--many { gap: 3px; padding-left: 4px; padding-right: 4px; }
  .subnav--many .subnav__link { padding: 4px 1px; }
  .subnav--many .subnav__label { font-size: 10px; letter-spacing: 0; overflow-wrap: anywhere; }
}


/* ---------- Menú principal: botones cuadrados (el lado se ajusta a la pantalla) ---------- */
.sidebar { --gap: 8px; --side-btn: min(calc(var(--side-w) - 16px), calc((100dvh - var(--hud-h) - 20px - 4 * var(--gap)) / 5)); }
.sidebar__nav { flex: none; justify-content: center; align-items: center; gap: var(--gap); }
.sidebar__nav li { flex: none; width: var(--side-btn); height: var(--side-btn); }
.sidebar__link { width: 100%; height: 100%; aspect-ratio: 1; }
.sidebar { align-items: center; }
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar { --gap: 4px; --side-btn: min(calc(var(--side-w) - 8px), calc((100dvh - var(--hud-h) - 8px - 4 * var(--gap)) / 5)); }
}
@media (orientation: portrait) and (max-width: 820px) {
  .sidebar { --gap: 5px; --side-btn: calc((100vw - 12px - 4 * var(--gap)) / 5); flex-direction: row; justify-content: center; }
  .sidebar__nav { flex-direction: row; justify-content: center; }
}

/* ---------- Letra más grande en los menús (izquierdo/inferior y submenú) ---------- */
.sidebar__label { font-size: clamp(18px, min(1.95vw, 3.6vh), 26px); }
.subnav__label { font-size: clamp(18px, 1.9vw, 26px); }
.subnav--many .subnav__label { font-size: clamp(15px, 1.55vw, 22px); }

/* ---------- Submenú de abajo con iconos del color del botón, encima del texto (también en la Ayuda) ---------- */
:root { --nav-h: clamp(64px, 11.5vh, 84px); }
.subnav__link { flex-direction: column; justify-content: center; gap: 1px; padding-top: 3px; padding-bottom: 4px; }
.subnav__icon { display: grid; place-items: center; flex: none; font-size: clamp(22px, 3.8vh, 32px); line-height: 0; }
.subnav__label { line-height: 1.05; }

/* Barra superior: solo el club (izquierda) y la ayuda (derecha) */
.hud { display: flex; justify-content: space-between; align-items: center; }
.hud__right { margin-left: auto; }

/* Submenús de abajo: cada botón y su icono con el color del botón de su apartado en el menú de la izquierda.
   El de la Ayuda va todo en azul (tone-blue en su submenú). */
.subnav.tone-orange .subnav__link { --tile-a: #ffd36a; --tile-b: #ff9a1f; --tile-c: #f07400; --tile-edge: #5a2a00; }
.subnav.tone-blue .subnav__link { --tile-a: #78d6ff; --tile-b: #2f92f2; --tile-c: #1c62d2; --tile-edge: #0a2152; }
.subnav.tone-green .subnav__link { --tile-a: #9af57a; --tile-b: #4fd043; --tile-c: #2ca72a; --tile-edge: #0b3a10; }
.subnav.tone-purple .subnav__link { --tile-a: #d29bff; --tile-b: #9a55f2; --tile-c: #6f2fcc; --tile-edge: #2a0d55; }
.subnav.tone-pink .subnav__link { --tile-a: #ff9fd6; --tile-b: #f04aa8; --tile-c: #c22a80; --tile-edge: #520a32; }

/* ---------- Botones con icono: la estética de la referencia ----------
   Rectángulo redondeado (no píldora) con contorno grueso del tono oscuro del botón, franja clara arriba,
   relleno naranja/azul/… liso y sombra dura debajo. El menú de la izquierda mantiene su forma cuadrada. */
.subnav .subnav__link { border-radius: 16px; }
:is(.hud, .cal__head) .hud-btn, .hud .help-btn {
  --tile-edge: #0a2152;
  border: 3px solid var(--tile-edge);
  border-radius: 12px;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, #78d6ff 0%, #2f92f2 50%, #1c62d2 100%);
  background-color: transparent;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 0 var(--tile-edge);
}
/* Herramientas: gris azulado, para que no destaque como la ayuda */
:is(.hud, .cal__head) .hud-btn { --tile-edge: #121c3d; background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, #a9b8dd 0%, #6f82b4 50%, #4a5d92 100%); }
:is(.hud, .cal__head) .hud-btn:active, .hud .help-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 1px 0 var(--tile-edge); }
:is(.hud, .cal__head) .hud-btn:hover { filter: brightness(1.1); }

/* ---------- Icono "pegatina" que sobresale por arriba del botón, como en la referencia ----------
   Trazo casi negro y grueso, relleno crema y un acento del color del botón (techo de la casa, balón…).
   El icono sube por encima del borde del botón y el texto queda abajo. */
.sidebar__link, .subnav__link { overflow: visible; justify-content: flex-start; }
.ico {
  stroke: color-mix(in srgb, var(--tile-edge) 40%, #000);
  stroke-width: 1.7;
  filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.25));
}
.ico .f { fill: color-mix(in srgb, var(--tile-a) 38%, #fff); }
.ico .a { fill: color-mix(in srgb, var(--tile-b) 82%, #a33000); }
.sidebar__label, .subnav__label { margin-top: auto; }
/* Brillo pequeño en la esquina superior izquierda */
.sidebar__link::after, .subnav__link::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(-30deg);
  pointer-events: none;
}

/* Menú izquierdo: el icono ocupa media baldosa y sobresale */
.sidebar { --gap: 12px; padding-top: 10px; --side-btn: min(calc(var(--side-w) - 16px), calc((100dvh - var(--hud-h) - 30px - 4 * var(--gap)) / 5)); }
.sidebar__link { padding: 8px 3px 8px; }
.sidebar__link .sidebar__icon { font-size: calc(var(--side-btn) * 0.5); margin-top: 0; line-height: 1; }
.sidebar__link:hover .sidebar__icon, .sidebar__link.is-active .sidebar__icon { transform: scale(1.06); }

/* Submenú de abajo: icono grande saliendo por arriba */
:root { --nav-h: clamp(78px, 13.5vh, 96px); }
.subnav { padding-top: 6px; }
.subnav__link { padding: 6px 6px 5px; }
.subnav .subnav__icon { font-size: clamp(30px, 5.4vh, 44px); margin-top: 0; line-height: 1; }

/* ---------- Resto de botones: igual que los del menú (sin icono) ----------
   Rectángulo redondeado, contorno grueso del tono oscuro, franja clara arriba, sombra dura debajo,
   brillo pequeño en la esquina y texto blanco con contorno. */
.btn { border-radius: 11px; }
.btn--hero, .btn-bid { border-radius: 16px; }
.tab { border-radius: 10px; }
.league__nav, .bench__nav, .modal__close, .help-btn, .link-btn { border-radius: 10px; }
.btn, .btn-bid, .tab, .league__nav, .link-btn, .modal__close, .bench__nav, .help-btn { position: relative; }
.btn::after, .btn-bid::after, .tab::after, .league__nav::after, .link-btn::after, .modal__close::after, .bench__nav::after, .help-btn::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 7px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(-30deg);
  pointer-events: none;
}
.btn--hero::after, .btn-bid::after { left: 12px; top: 6px; width: 12px; height: 6px; }
.league__nav::after, .modal__close::after, .bench__nav::after, .help-btn::after { left: 5px; top: 3px; width: 5px; height: 3px; }
.btn:disabled::after { opacity: 0.4; }

/* Botones de Inicio: el icono del apartado al que llevan, delante del texto */
.btn__ico { display: inline-grid; place-items: center; flex: none; margin-right: 0.45em; font-size: 1.35em; line-height: 0; }
.btn .ico, .btn__ico .ico { --tile-edge: var(--c-edge, #0a2152); --tile-a: var(--c-a, #78d6ff); --tile-b: var(--c-b, #2f92f2); }
.home-card__go { display: inline-flex; align-items: center; justify-content: center; }

/* Barra superior: tienda (naranja) y usuario (morado), con icono plano */
.hud .hud-btn--shop { --tile-edge: #5a2a00; background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, #ffd36a 0%, #ff9a1f 50%, #f07400 100%); }
.hud .hud-btn--user { --tile-edge: #2a0d55; background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, #d29bff 0%, #9a55f2 50%, #6f2fcc 100%); }
/* Cambiar de club: rosa, como el apartado Club, al lado del nombre del club */
.hud .hud-btn--switch { --tile-edge: #520a32; --tile-a: #ffd9ee; font-size: 22px; background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, #ff9fd6 0%, #f04aa8 50%, #c22a80 100%); }
/* Herramientas: verde */
:is(.hud, .cal__head) .hud-btn--tools { --tile-edge: #0b3a10; background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, #9af57a 0%, #4fd043 50%, #2ca72a 100%); }
.hud .hud-btn--shop, .hud .hud-btn--user { --tile-a: #ffe3b0; font-size: 22px; }
.hud .hud-btn--user { --tile-a: #ead2ff; }
.hud-btn .ico { width: 1em; height: 1em; }
/* Brillo pequeño arriba a la izquierda, como en el resto de botones */
:is(.hud, .cal__head) .hud-btn, .hud .help-btn { position: relative; }
:is(.hud, .cal__head) .hud-btn::after, .hud .help-btn::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 3px;
  width: 6px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(-30deg);
  pointer-events: none;
}
:is(.hud, .cal__head) .hud-btn--tools { font-size: 22px; }


/* Ventana de clubes */
.club-slots { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.club-slot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid var(--stroke, #061433); border-radius: 14px; background: rgba(255, 255, 255, 0.07); }
.club-slot.is-current { border-color: var(--gold, #ffd23f); background: rgba(255, 210, 63, 0.12); }
.club-slot.is-empty { border-style: dashed; opacity: 0.9; }
.club-slot__crest { display: grid; place-items: center; flex: none; width: 48px; height: 48px; font-size: 28px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.club-slot__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.club-slot__info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-slot__info small { color: #cfe0ff; }
.club-crests { display: flex; flex-wrap: wrap; gap: 8px; }
.club-crest { width: 44px; height: 44px; font-size: 24px; border: 3px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, 0.1); cursor: pointer; }
.club-crest.is-active { border-color: var(--gold, #ffd23f); background: rgba(255, 210, 63, 0.2); }
.field input[type='text'] { padding: 10px 12px; border: 3px solid var(--stroke, #061433); border-radius: 10px; background: rgba(0, 0, 0, 0.3); color: #fff; font: inherit; font-size: 1rem; }

/* Etiquetas de los menús: con overflow oculto (para los puntos suspensivos) la altura de línea justa cortaba la parte baja
   de las letras (q, p, y) y la sombra del texto. Más altura de línea y un margen abajo lo evitan. */
.sidebar .sidebar__label, .subnav .subnav__label { flex: none; line-height: 1.35; padding: 1px 2px 4px; box-sizing: content-box; }

/* Pestañas de la Ayuda: como los botones del menú de abajo (degradado azul, borde grueso, apagadas
   si no las estás viendo, brillo al pasar el ratón y aro dorado en la activa) */
.help__tabs .tab {
  --tile-a: #78d6ff; --tile-b: #2f92f2; --tile-c: #1c62d2; --tile-edge: #0a2152;
  border: 3px solid var(--tile-edge);
  border-radius: 14px;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, var(--tile-a) 0%, var(--tile-b) 50%, var(--tile-c) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--tile-edge);
  color: #fff;
  text-shadow: 0 2px 0 var(--tile-edge), 1px 0 0 var(--tile-edge), -1px 0 0 var(--tile-edge), 0 -1px 0 var(--tile-edge);
  font-family: var(--font-display);
  font-weight: 400;
  filter: saturate(0.75) brightness(0.88);
}
.help__tabs .tab:hover:not(.is-active) { filter: brightness(1.1); }
.help__tabs .tab.is-active {
  filter: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--tile-edge), 0 0 0 3px var(--gold), 0 0 16px rgba(255, 210, 63, 0.6);
}
.help__tabs .tab { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 10px 5px; line-height: 1.1; text-align: center; }
.help__tabs .tab__icon { display: grid; place-items: center; flex: none; font-size: 1.6em; line-height: 0; margin: 0; }
.help__tabs .tab__icon .ico { stroke-width: 2; }
.tag--gold { text-shadow: var(--ink-thin); }

/* Herramientas de prueba: arriba a la derecha del Calendario */
.cal__head .hud-btn--tools { width: 40px; height: 40px; min-width: 40px; margin-left: auto; font-size: 22px; display: grid; place-items: center; padding: 0; cursor: pointer; }

/* Escudo y nombre del club: una sola pieza, un botón azul oscuro como los del menú superior */
.hud__left .hud__team {
  --tile-edge: #061433;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 37px;
  box-sizing: border-box;
  padding: 3px 14px 3px 8px;
  border: 3px solid var(--tile-edge);
  border-radius: 12px;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.22) 44%, transparent 45%),
    linear-gradient(180deg, #2f5fc4 0%, #1a3d96 50%, #0f2870 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 3px 0 var(--tile-edge);
}
.hud__left .hud__team::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 3px;
  width: 7px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(-30deg);
  pointer-events: none;
}
.hud__left .hud__team .crest {
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
  font-size: 22px;
  line-height: 1;
}
.hud__left .hud__team .crest::after { content: none; }
.hud__left .hud__team .hud__info { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hud__left .hud__team { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hud__left .hud__team:hover { filter: brightness(1.1); }
.hud__left .hud__team:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 0 var(--tile-edge); }

/* ---------- Deslizadores (input range): pista con relieve y pomo de plástico, como los botones ---------- */
input[type='range'] {
  --fill: 0%;                         /* % ya recorrido: lo actualiza main.js al mover el deslizador */
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  accent-color: #4fd043;
}
input[type='range']:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 999px; }
input[type='range']::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: 14px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: linear-gradient(180deg, #a8ff7c, #4fd043 50%, #239a22) 0 0 / var(--fill) 100% no-repeat, rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.12);
}
input[type='range']::-moz-range-track {
  box-sizing: border-box;
  height: 14px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.12);
}
input[type='range']::-moz-range-progress { height: 8px; border-radius: 999px; background: linear-gradient(180deg, #a8ff7c, #4fd043 50%, #239a22); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin-top: -9px;                   /* centra el pomo sobre la pista */
  border: 3px solid var(--outline);
  border-radius: 50%;
  background-image: var(--gloss), linear-gradient(180deg, #8ae0ff 0%, #2f92f2 50%, #1858c0 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 3px 0 var(--outline);
}
input[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 3px solid var(--outline);
  border-radius: 50%;
  background-image: var(--gloss), linear-gradient(180deg, #8ae0ff 0%, #2f92f2 50%, #1858c0 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 3px 0 var(--outline);
}
input[type='range']:active::-webkit-slider-thumb { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 0 var(--outline); }
input[type='range']:active::-moz-range-thumb { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 0 var(--outline); }

/* ---------- Selectores (desplegables): botón azul de plástico con flecha, como las pestañas ---------- */
select, .group-picker select, .search-filters__group select {
  -webkit-appearance: none;
  appearance: none;
  height: 34px;
  padding: 0 34px 0 14px;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.5 8 11l5-5.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px,
    var(--gloss),
    linear-gradient(180deg, #8ae0ff 0%, #2f92f2 50%, #1858c0 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  text-shadow: var(--txt-ink, 0 2px 0 var(--outline));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 4px 0 var(--outline);
  cursor: pointer;
}
select:hover { filter: brightness(1.08); }
select:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 1px 0 var(--outline); }
select:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
select option { background: #16206a; color: #fff; font-family: var(--font-display); }

/* Elegir el país de la liga al crear un club */
.club-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 4px 0; }
.club-country {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 8px 6px;
  border: 3px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; cursor: pointer;
}
.club-country.is-active { border-color: var(--gold, #ffd23f); background: rgba(255, 210, 63, 0.2); }
.club-country__flag { display: grid; place-items: center; font-size: 26px; line-height: 1; }
.club-country__flag .emoji { width: 1em; height: 1em; }
.club-country b { font-size: 0.9rem; }
.club-country small { color: #cfe0ff; font-size: 0.7rem; text-align: center; }
.club-slot__flag .emoji { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.auth__card--wide { width: min(520px, 100%); }

/* Tarjetas amarilla y roja dibujadas (los emojis 🟨🟥 no salen en Windows antiguos) */
.card-y, .card-r { display: inline-block; width: 0.68em; height: 0.95em; margin: 0 0.12em; border-radius: 2px; vertical-align: -0.12em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); }
.card-y { background: #ffd23f; }
.card-r { background: #ff3b3b; }

/* Resultado de un amistoso: cada equipo con su país, división y grupo */
.friendly { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 6px 0 10px; text-align: center; }
.friendly__team { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.friendly__team > span { font-weight: 700; overflow-wrap: anywhere; }
.friendly__team small { color: #cfe0ff; font-size: 0.78rem; line-height: 1.25; }
.friendly__team .emoji { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.friendly__score { font-size: 1.8rem; font-family: var(--font-display, inherit); white-space: nowrap; }
@media (max-width: 520px) { .friendly { grid-template-columns: 1fr; gap: 4px; } .friendly__score { order: 0; } }

/* Marcador del partido: nombre del equipo con su país, división y grupo debajo (amistosos) */
.match__who { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.match__origin { color: #cfe0ff; font-size: 0.72rem; font-weight: 400; line-height: 1.2; }
.match__origin .emoji { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.match__team--away .match__who { align-items: flex-end; }

/* Fuerza de cada equipo en el marcador del partido */
.match__power { color: var(--yellow); font-size: 0.78rem; font-weight: 600; line-height: 1.2; }
.match__power b { font-size: 1.05em; }