/* ================================================================== */
/*  SLAM LEGEND — estetica "arcade NBA Jam 90s" (neon retro)          */
/* ================================================================== */

:root {
  --bg0:      #120726;
  --bg1:      #1d0d45;
  --panel:    #1b0f3e;
  --panel-2:  #26155a;
  --panel-hi: #341c76;

  --ink:      #f4efff;
  --muted:    #b39fe0;
  --faint:    #7a68ad;

  --cyan:     #00eaff;
  --magenta:  #ff2e9a;
  --yellow:   #ffe11a;
  --orange:   #ff7a1a;
  --green:    #3bffb0;

  --line:     rgba(0, 234, 255, 0.22);
  --line-2:   rgba(255, 46, 154, 0.30);

  --shadow-c: 6px 6px 0 rgba(0, 234, 255, 0.55);
  --shadow-m: 6px 6px 0 rgba(255, 46, 154, 0.55);
  --shadow-k: 5px 5px 0 rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  background: var(--bg0);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Suelo synthwave en perspectiva */
.grid-floor {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 50% -15%, rgba(255, 46, 154, 0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(0, 234, 255, 0.14), transparent 55%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, #2a0f52 100%);
}
.grid-floor::after {
  content: '';
  position: absolute;
  left: -25%; right: -25%; bottom: 0; height: 46%;
  background-image:
    linear-gradient(90deg, rgba(0, 234, 255, 0.35) 1px, transparent 1px),
    linear-gradient(rgba(0, 234, 255, 0.30) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(180deg, transparent, #000 70%);
  opacity: 0.7;
}

/* Scanlines CRT */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.16) 3px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* --------------------------- Marquee ----------------------------- */
/* Boton de sonido (esquina) */
.sfx-btn {
  position: fixed; top: 14px; right: 14px; z-index: 60;
  width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 2px solid var(--line-2);
  font-size: 18px; line-height: 1; transition: transform 0.1s, background 0.15s;
}
.sfx-btn:hover { background: var(--panel-hi); transform: scale(1.06); }
.sfx-btn.off { opacity: 0.5; }

/* Selector de idioma ES|EN, a la izquierda del boton de sonido */
.lang-btn {
  position: fixed; top: 14px; right: 62px; z-index: 60;
  height: 40px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 2px solid var(--line-2);
  display: flex; align-items: center; gap: 3px;
  transition: transform 0.1s, background 0.15s;
}
.lang-btn:hover { background: var(--panel-hi); transform: scale(1.06); }
.lang-btn i {
  font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 9px;
  padding: 5px 5px; border-radius: 4px; color: var(--faint); letter-spacing: 0.5px;
}
.lang-btn i.on { background: var(--cyan); color: #0a0420; }

.marquee { text-align: center; padding: 26px 16px 8px; }
/* El hueco de la derecha reserva sitio a los botones fijos, para que el
   marcador ("INSERT COIN" / "GAME OVER") no se meta debajo. Va SOLO en la fila
   del titulo: aplicarlo a todo el marquee descentraba tambien el subtitulo.
   El extra del selector de idioma solo cuando ese boton esta a la vista. */
.marquee-inner { padding-right: 52px; }
body.con-idioma .marquee-inner { padding-right: 116px; }
.marquee-inner {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.m-ball { font-size: 30px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-7px) rotate(12deg); } }
.m-title {
  font-family: 'Bungee', cursive;
  font-size: clamp(30px, 7vw, 62px);
  letter-spacing: 2px;
  color: var(--cyan);
  text-shadow:
    3px 3px 0 var(--magenta),
    0 0 18px rgba(0, 234, 255, 0.55);
}
.m-title span { color: var(--yellow); text-shadow: 3px 3px 0 var(--orange), 0 0 18px rgba(255, 225, 26, 0.5); }
.m-coin {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--yellow);
  border: 2px solid var(--yellow);
  padding: 8px 10px;
  border-radius: 4px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }
.m-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--magenta);
  margin-top: 14px;
}

/* En pantallas anchas el marcador flota a la derecha, debajo de los botones
   fijos, en vez de ir dentro de la fila del titulo. Estando en el flujo, su
   ancho (mas el hueco reservado para los botones) empujaba "SLAM LEGEND" ~135px
   a la izquierda: lo que se centraba era el conjunto, no el titulo. En movil se
   queda como esta, porque alli cae en su propia linea y ya sale centrado. */
/* Vacio (portada) no ocupa sitio: asi el titulo queda centrado de verdad. */
.m-coin:empty { display: none; }

@media (min-width: 760px) {
  .marquee { position: relative; }
  .marquee-inner,
  body.con-idioma .marquee-inner { padding-right: 0; }
  /* Ya en partida ("PLAYER 1", "GAME OVER"), abajo a la derecha, a la altura
     del subtitulo: ahi el hueco libre es el mismo a cualquier ancho. Dentro de
     la fila del titulo su ancho descentraba "SLAM LEGEND" ~135px; anclado
     arriba se lo comia el titulo, que crece con el viewport (clamp). */
  .m-coin { position: absolute; right: 18px; bottom: 4px; }
}

/* --------------------------- Cabinet ----------------------------- */
.cabinet {
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px clamp(14px, 4vw, 34px) 60px;
}
/* En pantallas anchas se ensancha para que la trayectoria quepa entera: a
   1140px la tabla (860px de minimo, con la columna MIN) se quedaba corta y
   habia que arrastrarla de lado para ver %3 y %2 teniendo sitio de sobra. */
@media (min-width: 1320px) {
  .cabinet { max-width: 1360px; }
}

.setup-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
  align-items: start;
}

/* Panel base tipo cabina */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2.5px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  box-shadow: var(--shadow-k);
  position: relative;
}
.panel.mag { border-color: var(--line-2); }
.panel-h {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--cyan);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel.mag .panel-h { color: var(--magenta); }
.panel-h::before { content: '▚'; color: var(--yellow); }

/* ------------------------- Camiseta ------------------------------ */
.jersey-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.jersey { width: 100%; height: auto; filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.5)); }
.jersey .jersey-body { fill: #efe9ff; }
.jersey .jersey-trim { fill: var(--magenta); }
.jersey-name {
  font-family: 'Bungee', cursive;
  fill: #1a0f3a; font-size: 15px; letter-spacing: 0.5px;
  text-anchor: middle; text-transform: uppercase;
}
.jersey-num { font-family: 'Bungee', cursive; fill: #1a0f3a; font-size: 58px; text-anchor: middle; }

.fields { display: flex; flex-direction: column; gap: 12px; }
.field label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 6px;
}
.row-2 { display: grid; grid-template-columns: 1fr 70px; gap: 8px; }
input[type="text"], input[type="number"] {
  width: 100%;
  background: #100827;
  border: 2px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 9px 11px;
  text-align: center;
}
input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,234,255,0.2); }
input::placeholder { color: var(--faint); }

.toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.toggle button, .mini-btn {
  border: 2px solid var(--line);
  background: #140a30;
  color: var(--muted);
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s, color 0.15s, border-color 0.15s;
}
.toggle button.on { background: var(--cyan); color: #0a0420; border-color: var(--cyan); }
.toggle button:active, .mini-btn:active { transform: translate(2px, 2px); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: #0e0724;
  border: 1px solid var(--line);
  border-radius: 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 3px;
  background: var(--magenta); cursor: pointer;
  border: 2px solid #0a0420;
  box-shadow: 0 0 8px var(--magenta);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 3px;
  background: var(--magenta); cursor: pointer; border: 2px solid #0a0420;
}

/* ------------------------ Nacionalidad --------------------------- */
.search-box { position: relative; margin-bottom: 10px; }
.search-box input { text-align: left; padding-left: 34px; }
.search-box::before { content: '🔎'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0.7; }
.nat-list {
  max-height: 178px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding-right: 4px;
}
.nat-list::-webkit-scrollbar { width: 8px; }
.nat-list::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 4px; }
.nat-list::-webkit-scrollbar-track { background: #100827; }
.nat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 4px; cursor: pointer;
  border: 2px solid transparent;
}
.nat-item:hover { background: var(--panel-hi); }
.nat-item.on { background: rgba(0,234,255,0.14); border-color: var(--cyan); }
.nat-item .flag {
  width: 22px; height: 16px; border-radius: 2px; flex-shrink: 0;
  background: var(--panel-hi) center/cover no-repeat;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 0;   /* la bandera ya identifica el pais: sin letras encima */
}
.nat-item span.nm { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------- Cancha -------------------------------- */
.court {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #2a1560, #1a0d3f);
  border: 2px solid var(--line-2); border-radius: 5px; overflow: hidden;
}
.court svg.court-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.court-lines * { stroke: rgba(0, 234, 255, 0.45); stroke-width: 1.5; fill: none; }
.pos-chip {
  position: absolute; transform: translate(-50%, -50%);
  padding: 6px 9px; border-radius: 4px;
  background: #140a30; border: 2px solid var(--muted);
  color: var(--ink); font-family: 'Bungee', cursive; font-size: 10px;
  letter-spacing: 0.3px; cursor: pointer; white-space: nowrap;
  transition: transform 0.1s;
}
.pos-chip:hover { transform: translate(-50%, -50%) scale(1.08); border-color: var(--cyan); }
.pos-chip.on { background: var(--magenta); border-color: var(--magenta); color: #0a0420; box-shadow: 0 0 16px var(--magenta); }

/* ------------------- Estilo / Camino (cards) --------------------- */
.section-h {
  font-family: 'Bungee', cursive;
  font-size: clamp(18px, 3.4vw, 26px);
  letter-spacing: 1px;
  margin: 26px 0 14px;
  color: var(--ink);
  display: flex; align-items: center; gap: 12px;
}
.section-h .tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; color: #0a0420;
  background: var(--yellow); padding: 5px 8px; border-radius: 3px;
}
.section-h.cy .tag { background: var(--cyan); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}
.pick-card {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2.5px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-k);
  transition: transform 0.1s, box-shadow 0.12s, border-color 0.12s;
}
.pick-card:hover { transform: translate(-2px, -3px); box-shadow: var(--shadow-c); border-color: var(--cyan); }
.pick-card.on { border-color: var(--magenta); box-shadow: var(--shadow-m); transform: translate(-2px, -3px); }
.pick-card.on::before {
  content: 'PICKED';
  position: absolute; top: -11px; right: 12px;
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  background: var(--magenta); color: #0a0420; padding: 4px 7px; border-radius: 3px;
}
.pick-icon { font-size: 30px; margin-bottom: 10px; }
.pick-name {
  font-family: 'Bungee', cursive; font-size: 17px; line-height: 1.05; letter-spacing: 0.3px;
}
.pick-sub { color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; margin: 6px 0 10px; text-transform: uppercase; }
.pick-desc { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
.pick-mods { font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: 0.3px; }

/* --------------------------- Start bar --------------------------- */
.startbar {
  position: sticky; bottom: 0;
  margin-top: 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(18,7,38,0), var(--bg0) 45%);
  flex-wrap: wrap;
}
.readout {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; line-height: 1.9; color: var(--muted); flex: 1; min-width: 200px;
}
.readout b { color: var(--cyan); }
.readout .miss { color: var(--magenta); }

.btn-start {
  font-family: 'Bungee', cursive;
  font-size: 18px; letter-spacing: 1px;
  padding: 16px 30px;
  border: 3px solid var(--yellow);
  background: var(--magenta);
  color: #0a0420;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.55);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.btn-start:hover:not(:disabled) { filter: brightness(1.08); }
.btn-start:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 2px 2px 0 rgba(0,0,0,0.55); }
.btn-start:disabled { background: var(--panel-hi); border-color: var(--faint); color: var(--faint); cursor: not-allowed; box-shadow: 5px 5px 0 rgba(0,0,0,0.4); }

/* ----------------------- Placeholder fase ------------------------ */

/* ================================================================== */
/*  PORTADA · primera pantalla (intro.js), igual en movil y escritorio */
/* ================================================================== */
.portada {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding-top: 6px;
}
.pt-title {
  font-family: 'Bungee', cursive;
  font-size: clamp(26px, 6.4vw, 42px);
  line-height: 1.06;
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.pt-title span { color: var(--yellow); text-shadow: 3px 3px 0 var(--orange); }

/* Marco de la imagen: el SVG de reserva va debajo y la foto encima; si la
   foto no existe se auto-elimina (ver SIM.introFotoHTML) y queda el mural. */
.pt-hero {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 3px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-k), 0 0 34px rgba(255, 46, 154, 0.25);
  background: var(--panel);
}
.pt-arte, .pt-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* El recorte se come lo que sobra por ABAJO, no por el centro: una foto de
   jugadores lleva las caras en la mitad de arriba y un encuadre centrado les
   corta la cabeza. */
.pt-foto { object-position: 50% 8%; }
/* velo de neon: unifica cualquier foto con la paleta del juego */
.pt-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 7, 38, 0) 45%, rgba(18, 7, 38, 0.7) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 46, 154, 0.2), transparent 62%);
}

.pt-desc {
  color: var(--muted);
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto;
}

.pt-ritmo-h {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--cyan);
  margin-top: 4px;
}
.pt-ritmos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt-ritmo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 6px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}
.pt-ritmo:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--muted); }
.pt-ritmo.on {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #06121a;
  box-shadow: 0 0 18px rgba(0, 234, 255, 0.35);
}
.pt-ritmo .ptr-ic { font-size: 16px; line-height: 1; }
.pt-ritmo .ptr-nm { font-family: 'Bungee', cursive; font-size: 11px; letter-spacing: 0.5px; }
.pt-ritmo-x {
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.45;
  min-height: 36px;
  margin-top: -6px;
}

.portada .pt-go { width: 100%; }
/* El boton ES el INSERT COIN: rotulo de recreativa parpadeando encima de la
   accion de verdad. Por eso el marcador del marquee va vacio en la portada. */
.pt-go em {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  opacity: 0.72;
  animation: blink 1.1s steps(2) infinite;
}

.pt-legal {
  color: var(--faint);
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px dotted var(--faint);
  align-self: center;
  padding-bottom: 1px;
  margin-top: 2px;
}
.pt-legal:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.pt-hist {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--yellow);
  background: transparent;
  border: 2px solid var(--yellow);
  border-radius: 6px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.pt-hist:hover { background: rgba(255, 225, 26, 0.14); }

@media (max-width: 380px) {
  .pt-ritmo { border-radius: 10px; padding: 9px 4px; }
  .pt-ritmo .ptr-nm { font-size: 9px; }
}

/* ================================================================== */
/*  CREDITOS Y PRIVACIDAD  (creditos.html, pagina estatica aparte)     */
/* ================================================================== */
.legal { max-width: 720px; margin: 0 auto; }
.legal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 22px;
}
.legal-back { color: var(--cyan); text-decoration: none; font-weight: 700; font-size: 14px; }
.legal-back:hover { text-decoration: underline; }
.legal-lang {
  height: 34px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 2px solid var(--line-2);
  display: flex; align-items: center; gap: 3px;
}
.legal-lang i {
  font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 9px;
  padding: 5px; border-radius: 4px; color: var(--faint);
}
.legal-lang i.on { background: var(--cyan); color: #0a0420; }

.legal-h {
  font-family: 'Bungee', cursive; font-size: 26px; color: var(--yellow);
  margin: 30px 0 6px; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}
.legal-h:first-child { margin-top: 0; }
.legal h3 {
  font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--cyan);
  letter-spacing: 0.5px; margin: 22px 0 8px;
}
.legal p, .legal li { color: var(--muted); font-size: 14px; line-height: 1.65; }
.legal p { margin-bottom: 10px; }
.legal ul { margin: 0 0 12px 20px; }
.legal li { margin-bottom: 5px; }
.legal b { color: var(--ink); }
.legal a { color: var(--cyan); }
.legal code {
  font-family: 'Chakra Petch', monospace; font-size: 13px; color: var(--yellow);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 4px;
}
/* .legal p ya fija 14px: sin subir la especificidad, la fecha salia enorme */
.legal p.legal-fecha {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--faint);
  margin-top: 26px; letter-spacing: 1px;
}

/* ================================================================== */
/*  ELEGIR CLUB DE INICIO                                              */
/* ================================================================== */
.cc-h {
  font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--cyan);
  margin: 22px 0 12px; letter-spacing: 0.5px;
}
.cc-h.pais { color: var(--yellow); }

/* ================================================================== */
/*  PANTALLA DE CARRERA (FASE 1)                                       */
/* ================================================================== */
.fase-band {
  font-family: 'Bungee', cursive;
  font-size: clamp(16px, 3vw, 24px);
  letter-spacing: 1px;
  color: var(--ink);
  margin: 4px 0 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.fase-band .fase-tag {
  font-family: 'Press Start 2P', monospace; font-size: 11px;
  color: #0a0420; background: var(--yellow); padding: 6px 9px; border-radius: 3px;
}

.career-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
/* Sin esto, el min-width:auto de los items de grid impide que la columna baje
   del min-content de la tabla (860px) y toda la pantalla desborda a lo ancho:
   la trayectoria ya tiene su propio scroll horizontal, no debe empujar nada. */
.career-grid > * { min-width: 0; }

/* --- tarjeta jugador --- */
.pcard {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2.5px solid var(--line-2); border-radius: 6px;
  padding: 16px; box-shadow: var(--shadow-k);
}
.pcard-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ovr-badge {
  width: 74px; height: 74px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--magenta), #b3186b);
  border: 3px solid var(--yellow); border-radius: 8px;
  display: grid; place-items: center; line-height: 1;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.ovr-num { font-family: 'Bungee', cursive; font-size: 30px; color: #fff; }
.ovr-lb { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #ffe; margin-top: 3px; }
.ovr-num.flash { animation: ovrflash 0.6s ease; }
@keyframes ovrflash { 0% { color: var(--yellow); transform: scale(1.4); text-shadow: 0 0 18px var(--yellow); } 100% { color: #fff; transform: none; } }
.pcard-name { font-family: 'Bungee', cursive; font-size: 20px; line-height: 1; }
.pcard-meta { color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.flag-mini { width: 20px; height: 14px; border-radius: 2px; background: var(--panel-hi) center/cover no-repeat;
  font-size: 0; display: inline-grid; place-items: center; vertical-align: middle; }

.pcard-rows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pcard-rows > div { background: #100827; border: 1px solid var(--line); border-radius: 4px; padding: 8px 6px; text-align: center; min-width: 0; }
.pcard-rows b { display: block; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14px; color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-rows span { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--faint); letter-spacing: 0.5px; }

/* --- atributos (carta 2K/FIFA): desglose del OVR --- */
.attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.attr {
  position: relative; overflow: hidden;
  background: #100827; border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 6px 8px; text-align: center;
}
.attr b { display: block; font-family: 'Bungee', cursive; font-size: 16px; line-height: 1; }
.attr span {
  display: block; margin-top: 2px;
  font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--faint); letter-spacing: 0.5px;
}
/* barrita inferior: lectura de un vistazo sin tener que leer el numero */
.attr i { position: absolute; left: 0; bottom: 0; height: 3px; background: currentColor; opacity: 0.85; }
.attr.top   { color: #ff5c8a; border-color: rgba(255,92,138,0.5); }
.attr.alto  { color: var(--yellow); border-color: rgba(255,225,26,0.4); }
.attr.medio { color: var(--cyan); }
.attr.bajo  { color: var(--muted); }
.attr b { color: currentColor; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tile { background: #140a30; border: 2px solid var(--line); border-radius: 4px; padding: 9px 4px; text-align: center; }
.tile b { display: block; font-family: 'Bungee', cursive; font-size: 17px; color: var(--yellow); }
.tile span { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--muted); }

/* --- trayectoria --- */
.ttrack {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2.5px solid var(--line); border-radius: 6px; padding: 14px; box-shadow: var(--shadow-k);
}
.ttrack-h, .ttrack-h { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--cyan); margin-bottom: 12px; }
.ttrack-scroll {
  overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(0,234,255,0.3) transparent;
  margin: 0 -14px -14px -14px; padding: 0 14px 14px 14px;
  /* --ttrack-max lo fija SIM.carrera.ajustarTrayectoria() para igualar el cromo */
  max-height: var(--ttrack-max, 60vh);
  overscroll-behavior: contain;
}
.ttrack-scroll::-webkit-scrollbar { height: 6px; width: 8px; }
.ttrack-scroll::-webkit-scrollbar-track { background: transparent; }
.ttrack-scroll::-webkit-scrollbar-thumb { background: rgba(0,234,255,0.3); border-radius: 3px; }
.ttrack-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,234,255,0.55); }
table.traj { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 920px; }
/* Columna propia para los trofeos: pegados al nombre del club caian en una x
   distinta segun lo largo que fuera, y no habia forma de leerlos en vertical. */
table.traj .c-tro { width: 92px; text-align: left; white-space: nowrap; }
table.traj td.c-tro { padding-left: 2px; }
table.traj td.c-tro .row-tro { line-height: 1; }
table.traj th {
  font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--faint);
  text-align: center; padding: 6px 4px; border-bottom: 2px solid var(--line);
  /* cabecera fija al hacer scroll vertical dentro de la trayectoria */
  position: sticky; top: 0; z-index: 3; background: var(--panel-2);
}
table.traj th:nth-child(2) { text-align: left; }
table.traj td { text-align: center; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); font-weight: 600; vertical-align: middle; }
table.traj td.c-age { font-family: 'Bungee', cursive; color: var(--muted); font-size: 13px; }
table.traj td.c-club { text-align: left; }
table.traj td.c-club { text-align: left; white-space: nowrap; }
table.traj td.c-club b { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; }
/* la liga en su propia columna, detras de los trofeos */
table.traj .c-liga { text-align: left; white-space: nowrap; }
table.traj td.c-liga span { font-size: 10px; color: var(--faint); }
table.traj td.c-club span { font-size: 10px; color: var(--faint); }
table.traj td.c-ovr { font-family: 'Bungee', cursive; white-space: nowrap; }
table.traj td.c-ovr .ovr-v {
  font-family: 'Bungee', cursive; font-size: 15px;
  display: inline-block; min-width: 46px; text-align: center;
  padding: 3px 8px; border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.4);
}
/* medalla segun el OVR: oro 80+, plata 70-79, bronce <70 */
.ovr-oro    { color: #3a2500; background: linear-gradient(180deg, #ffe487, #f2b41a); }
.ovr-plata  { color: #1c2436; background: linear-gradient(180deg, #e5ecf5, #9fadc2); }
.ovr-bronce { color: #2e1800; background: linear-gradient(180deg, #e59b58, #b56a2c); }
table.traj td.c-ovr .up, table.traj td.c-ovr .dn {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 9px;
  padding: 1px 4px; border-radius: 3px; margin-left: 5px; vertical-align: 1px;
}
table.traj td.c-ovr .up { color: var(--green); background: rgba(59,255,176,0.14); }
table.traj td.c-ovr .dn { color: #ff6b6b; background: rgba(224,27,38,0.16); }
table.traj td.c-ovr .ovr-arrow { color: var(--muted); font-size: 11px; font-style: normal; }
/* Columnas fijas para que las medallas de OVR queden alineadas entre filas y
   el cambio caiga siempre en el mismo hueco, a la derecha. */
.ovr-cell {
  display: inline-grid; align-items: center;
  grid-template-columns: 46px 16px 46px 34px; gap: 3px;
}
.ovr-cell .ovr-v { width: 100%; min-width: 0; }
.ovr-cell .ovr-d { font-style: normal; text-align: left; }
.ovr-cell .up, .ovr-cell .dn { margin-left: 0; }
.row-tro { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; letter-spacing: 0; vertical-align: middle; }
table.traj td.c-club .rec { font-style: normal; color: var(--muted); font-weight: 700; }
table.traj tr.natrow td { border-top: 2px solid var(--line-2); background: rgba(255,46,154,0.06); padding-top: 12px; }
table.traj tr.natrow td.c-club b { color: var(--magenta); }
table.traj tr.just-in { animation: rowin 0.5s ease; }
@keyframes rowin { from { background: rgba(0,234,255,0.18); } to { background: transparent; } }

/* --- zona de accion --- */
.action { margin-top: 20px; display: flex; justify-content: center; }
.ar-btn {
  font-family: 'Bungee', cursive; font-size: 15px; letter-spacing: 0.5px;
  padding: 15px 24px; border-radius: 6px; cursor: pointer;
  border: 3px solid var(--yellow); background: var(--panel-hi); color: var(--ink);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
}
.ar-btn:hover { filter: brightness(1.1); }
.ar-btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
.ar-btn.big { font-size: 18px; padding: 18px 32px; }
.ar-btn.cyan { background: var(--cyan); color: #06121a; border-color: #fff; }
.ar-btn.mag { background: var(--magenta); color: #12040c; border-color: var(--yellow); }
.opt-fx { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 11px; opacity: 0.85; }

/* --- opcion de evento con ramas de PROBABILIDAD (barras con % por desenlace) --- */
.ar-btn.prob { background: var(--panel-hi); color: var(--ink); border-color: var(--line-2); align-items: stretch; min-width: 220px; }
.opt-prob { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.prob-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 5px 8px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,0.06); font-family: 'Chakra Petch', sans-serif; font-size: 11px;
}
.prob-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: rgba(255,255,255,0.14); border-radius: 4px;
}
.prob-bar b, .prob-bar em { position: relative; z-index: 1; font-style: normal; }
.prob-bar em { font-weight: 700; }
.prob-bar.bueno { color: var(--green); }
.prob-bar.bueno i { background: rgba(59,255,176,0.28); }
.prob-bar.malo { color: var(--red); }
.prob-bar.malo i { background: rgba(224,27,38,0.28); }

.decision, .event-card, .finfase {
  width: 100%; max-width: 560px; text-align: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 3px solid var(--line-2); border-radius: 8px; padding: 24px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
}
.decision-q { font-family: 'Bungee', cursive; font-size: 18px; margin-bottom: 18px; color: var(--ink); }
.decision-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.event-card.ancho { max-width: 760px; }
.event-card .evento-oferta { margin-top: 4px; }
.offer-card.prob .offer-club { font-size: 15px; margin-bottom: 10px; }
.offer-card.prob .opt-prob { margin-top: 0; }

.event-card { border-color: var(--yellow); }
/* OJO: las clases tono-* se construyen en JS ('tono-' + ev.tono), asi que un
   grep literal de "tono-malo" no las encuentra. No son CSS muerto. */
.event-card.tono-malo { border-color: var(--red); box-shadow: 6px 6px 0 rgba(0,0,0,0.5), 0 0 24px rgba(224,27,38,0.25); }
.event-card.tono-bueno { border-color: var(--green); box-shadow: 6px 6px 0 rgba(0,0,0,0.5), 0 0 24px rgba(59,255,176,0.22); }
.event-ic { font-size: 40px; margin-bottom: 6px; }

/* --- cinematica de sorteo de una opcion de probabilidad --- */
.event-card.sorteo { border-color: var(--magenta); box-shadow: 6px 6px 0 rgba(0,0,0,0.5), 0 0 26px rgba(255,0,168,0.28); }
.event-ic.spin { display: inline-block; animation: probspin 0.9s ease-in-out infinite; }
@keyframes probspin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
}
.sorteo-bars { max-width: 320px; margin: 6px auto 0; }
.sorteo-bars .prob-bar { animation: probpulse 0.9s ease-in-out infinite; }
.sorteo-bars .prob-bar:nth-child(2) { animation-delay: 0.3s; }
@keyframes probpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.event-tag { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--yellow); margin-bottom: 10px; animation: blink 1.1s steps(2) infinite; }
.event-t { font-family: 'Bungee', cursive; font-size: 22px; margin-bottom: 8px; color: var(--cyan); }
.tono-malo .event-tag { color: var(--red); }
.tono-bueno .event-tag { color: var(--green); }
.tono-malo .event-t { color: var(--red); }
.tono-bueno .event-t { color: var(--green); }
.event-x { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 20px; }

.finfase { border-color: var(--green); }
.finfase-h { font-family: 'Bungee', cursive; font-size: 26px; color: var(--green); margin-bottom: 10px; }
.finfase-x { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.finfase-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.finfase-stats > div { background: #140a30; border: 2px solid var(--line); border-radius: 5px; padding: 12px 6px; }
.finfase-stats b { display: block; font-family: 'Bungee', cursive; font-size: 20px; color: var(--yellow); }
.finfase-stats span { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--muted); }

/* --- Vitrina en la tarjeta (Fase 3) --- */
.vitrina {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.vitrina span {
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  background: #140a30; border: 2px solid var(--yellow); color: var(--yellow);
  padding: 6px 7px; border-radius: 4px; letter-spacing: 0.5px;
}

/* --- Mercado de fichajes --- */
.mercado { width: 100%; max-width: 720px; text-align: center; }
.mercado-h { font-family: 'Bungee', cursive; font-size: 22px; color: var(--cyan); margin-bottom: 6px; }
.mercado-x { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
/* auto-fit: el mercado puede sacar 3 o 4 tarjetas (la 4a, el resto del mundo) */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.offer-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2.5px solid var(--line); border-radius: 6px; padding: 14px 10px;
  cursor: pointer; box-shadow: var(--shadow-k); text-align: center;
  transition: transform 0.1s, box-shadow 0.12s, border-color 0.12s;
}
.offer-card:hover { transform: translate(-2px, -3px); box-shadow: var(--shadow-c); border-color: var(--cyan); }
.offer-card.stay { border-color: var(--line-2); }
.offer-card.stay:hover { box-shadow: var(--shadow-m); border-color: var(--magenta); }
.offer-card.draft { border-color: var(--yellow); background: linear-gradient(180deg, #2a2408, var(--panel)); }
.offer-card.draft:hover { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 214, 0, .18), var(--shadow-k); }
.offer-card.draft .offer-ic { font-size: 40px; margin: 4px auto 14px; }
.offer-card.norenueva { cursor: not-allowed; opacity: 0.72; filter: grayscale(0.6); border-color: var(--red, #ff3b6b); }
.offer-card.norenueva:hover { transform: none; box-shadow: var(--shadow-k); border-color: var(--red, #ff3b6b); }
.norenueva-tag {
  font-family: 'Press Start 2P', monospace; font-size: 7px; color: #0a0420;
  background: var(--red, #ff3b6b); padding: 5px 6px; border-radius: 3px;
  letter-spacing: 0; margin-top: 8px; display: inline-block;
}
.mercado.fin-ciclo .mercado-h { color: var(--red, #ff3b6b); }
.mercado.fin-ciclo .mercado-x b { color: var(--red, #ff3b6b); }
.offer-lead { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--faint); letter-spacing: 1px; margin-bottom: 10px; }
.offer-card .escudo { display: flex; margin: 4px auto 14px; }
.offer-club { font-family: 'Bungee', cursive; font-size: 16px; line-height: 1.05; margin-bottom: 8px; }
.offer-liga { font-size: 11px; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.offer-stars { color: var(--yellow); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; min-height: 20px; }
.offer-stars .contender {
  font-family: 'Press Start 2P', monospace; font-size: 7px; color: #0a0420;
  background: var(--green); padding: 3px 5px; border-radius: 3px; letter-spacing: 0; vertical-align: middle;
}
.offer-val { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 15px; color: var(--yellow); }

.pcard-rows .prest { color: var(--yellow); font-style: normal; letter-spacing: 1px; }

/* --- Escudos (img real o monograma de color) --- */
.escudo {
  --sz: 20px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--sz); height: var(--sz); flex: 0 0 auto; vertical-align: middle;
  border-radius: 5px; overflow: hidden;
  background: var(--eb, #333); border: 1.5px solid var(--er, #666);
}
.escudo b { font-family: 'Bungee', cursive; font-size: calc(var(--sz) * 0.34); color: #fff; line-height: 1; }
.escudo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0a0420; }
.escudo.sm { --sz: 20px; }
.escudo.md { --sz: 30px; }
.escudo.lg { --sz: 48px; border-radius: 7px; }
.escudo.xl { --sz: 72px; border-radius: 9px; border-width: 2.5px; }

/* --- Tooltip flotante (elementos con [data-tip]) --- */
.tip-box {
  position: fixed; z-index: 200; pointer-events: none;
  transform: translate(-50%, -100%);
  background: #0a0420; color: var(--ink);
  border: 2px solid var(--cyan); border-radius: 5px;
  padding: 6px 9px; max-width: 240px; white-space: nowrap;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.3px; box-shadow: 0 0 14px rgba(0, 234, 255, 0.35), 3px 3px 0 rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.1s;
}
.tip-box.on { opacity: 1; }
[data-tip] { cursor: help; }
.tro[data-tip], .escudo[data-tip] { cursor: default; }

/* --- Iconos de trofeo (img real o emoji) --- */
/* middle y no -0.2em: colgaban por debajo de la linea y en la trayectoria se
   veian descolgados respecto al nombre del club. */
.tro { position: relative; display: inline-block; width: 1.15em; height: 1.15em; vertical-align: middle; }
.tro i { font-style: normal; font-size: 1em; line-height: 1.15em; }
.tro i svg { width: 1.15em; height: 1.15em; display: block; }
.tro img { position: absolute; left: 0; top: 0; width: 1.15em; height: 1.15em; object-fit: contain; }

/* escudo dentro de la cabecera de tarjeta */
.pcard-top .escudo.lg { margin-left: auto; }
/* escudo en el draft */
.draft-teamrow { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 34px; }

.pcard-comps {
  font-size: 11px; color: var(--muted); line-height: 1.5;
  margin-bottom: 12px; padding: 8px 10px;
  background: #100827; border: 1px solid var(--line); border-radius: 4px;
}
.pcard-comps i {
  font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6.5px;
  color: var(--cyan); margin-right: 6px; letter-spacing: 0.5px;
}
/* Nivel de la competicion, bajo el nombre del jugador. Va en el cromo (no en
   "COMPITE EN", que se oculta en movil) porque la dificultad no se ve en
   ningun otro numero: solo en que anotas mas o menos. */
.nivel-liga {
  display: inline-block; margin-top: 5px;
  font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: 0.5px;
  padding: 3px 5px; border-radius: 3px; border: 1px solid currentColor;
}
.nivel-liga.n5 { color: #ff5c8a; }
.nivel-liga.n4 { color: var(--yellow); }
.nivel-liga.n3 { color: var(--cyan); }
.nivel-liga.n2 { color: var(--muted); }
.nivel-liga.n1 { color: var(--faint); }

.finfase.retiro { border-color: var(--magenta); }

/* --- Entrenamiento de pretemporada --- */
.entreno { width: 100%; max-width: 640px; text-align: center; }
.entreno-h { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--yellow); margin-bottom: 16px; line-height: 1.6; }
.entreno .ar-btn span.opt-fx { margin-top: 2px; }
/* boton "avanzar" con aspecto de decision secundaria, bajo los enfoques */
.entreno .avz {
  margin-top: 14px; border-color: var(--line-2);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel-2)); color: var(--muted);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45);
}
.entreno .avz:hover { color: var(--ink); border-color: var(--cyan); filter: none; }

/* --- Etiquetas de playoffs en la trayectoria --- */
.po { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6.5px; padding: 3px 5px; border-radius: 3px; margin-left: 6px; letter-spacing: 0.5px; vertical-align: middle; }
.po-camp { background: var(--yellow); color: #1a0f00; }
.po-sub  { background: #cfd6df; color: #14141a; }
.po-conf { background: rgba(0,234,255,0.18); color: var(--cyan); border: 1px solid var(--cyan); }

/* Mobile responsive */
@media (max-width: 620px) {
  /* Wizard */
  .wizard-screen { padding: 16px; }
  .wizard-body h2 { font-size: 18px; }
  .wiz-fields { gap: 10px; }
  .field-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .field input { padding: 8px; font-size: 13px; }

  /* Setup estilos */
  .wiz-estilos { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .pick-icon { font-size: 28px; margin-bottom: 6px; }
  .pick-name { font-size: 12px; }
  .pick-desc { font-size: 10px; }

  /* Ofertas en mobile: siguen en fila para que quepan junto a la trayectoria
     (apiladas ocupaban media pantalla y empujaban la tabla fuera de vista) */
  .offer-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  /* con 4 tarjetas (mercado con oferta del resto del mundo) van en 2x2 */
  .offer-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
  .offer-card { padding: 7px 4px; }
  .offer-lead { font-size: 5px; margin-bottom: 3px; }
  .offer-club { font-size: 11px; margin-bottom: 3px; line-height: 1.15; }
  .offer-liga { font-size: 8px; margin-bottom: 3px; }
  .offer-val { font-size: 11px; }
  .offer-card .escudo { width: 30px; height: 30px; margin: 2px auto 4px; }
  .offer-card .escudo svg, .offer-card .escudo img { width: 30px; height: 30px; }
  .offer-ic { font-size: 20px; }
  /* el prestigio se mantiene: es dato de la decision, no adorno. Compacto,
     que solo cuesta una linea baja. El sello CONTENDER si sobra: no cabe. */
  .offer-stars { font-size: 9px; margin-bottom: 3px; letter-spacing: -0.5px; }
  .contender { display: none; }

  /* Botones más pequeños */
  .btn-prev, .btn-next { font-size: 12px; padding: 10px; }
}

/* --- Draft (Fase 2) --- */
.draft-reveal { text-align: center; padding: 40px 20px 20px; }
.draft-kicker {
  font-family: 'Press Start 2P', monospace; font-size: 12px;
  color: var(--muted); letter-spacing: 2px; margin-bottom: 26px;
}
.draft-pick {
  font-family: 'Bungee', cursive;
  font-size: clamp(70px, 18vw, 150px); line-height: 0.9;
  color: var(--magenta);
  text-shadow: 5px 5px 0 var(--cyan), 0 0 40px rgba(255, 46, 154, 0.6);
  animation: pickpop 0.6s cubic-bezier(0.2, 0.9, 0.2, 1.4) both;
}
.draft-pick.undr { font-size: clamp(38px, 9vw, 74px); color: var(--yellow); text-shadow: 4px 4px 0 var(--red); }
@keyframes pickpop { 0% { opacity: 0; transform: scale(0.3) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
.draft-with {
  font-family: 'Press Start 2P', monospace; font-size: 10px;
  color: var(--faint); letter-spacing: 1px; margin: 18px 0 14px;
}
.draft-team {
  font-family: 'Bungee', cursive; font-size: clamp(22px, 5vw, 40px);
  color: var(--ink); margin-bottom: 34px;
  text-shadow: 0 0 18px rgba(0, 234, 255, 0.4);
  animation: pop 0.6s 0.25s cubic-bezier(0.2, 0.9, 0.2, 1.2) both;
}
.stash-note {
  margin-top: 16px; font-family: 'Press Start 2P', monospace;
  font-size: 8px; line-height: 1.7; color: var(--yellow);
}

@media (max-width: 780px) {
  .career-grid { grid-template-columns: 1fr; gap: 10px; }
  .finfase-stats { grid-template-columns: repeat(2, 1fr); }

  /* ---- CROMO COMPACTO ----
     Apilado, el cromo alto (~450px) se comia la pantalla y empujaba la
     trayectoria y la decision fuera de vista. Aqui se convierte en una banda:
     identidad arriba, datos y medias en filas bajas. Objetivo ~170px. */
  .pcard { padding: 10px 12px; }
  .pcard-top { gap: 10px; margin-bottom: 8px; }
  .ovr-badge { width: 54px; height: 54px; border-width: 2px; border-radius: 6px; }
  .ovr-num { font-size: 22px; }
  .ovr-lb { font-size: 5px; margin-top: 1px; }
  .pcard-name { font-size: 16px; }
  .pcard-meta { font-size: 11px; margin-top: 3px; }
  .pcard-top .escudo.lg { width: 40px; height: 40px; }
  .pcard-rows { gap: 6px; margin-bottom: 8px; }
  .pcard-rows > div { padding: 5px 4px; }
  .pcard-rows b { font-size: 12px; }
  .pcard-rows span { font-size: 5px; }

  /* medias de carrera: una sola fila que se desliza, en vez de 2x3 */
  .tiles {
    grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: minmax(52px, 1fr); gap: 5px;
    overflow-x: auto; scrollbar-width: none;
  }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { padding: 5px 3px; border-width: 1px; }
  .tile b { font-size: 13px; }
  .tile span { font-size: 5px; }

  /* "COMPITE EN ..." es contexto, no dato de la decision: fuera en movil */
  .pcard-comps { display: none; }
  /* vitrina en una sola fila deslizable, no en varias lineas */
  .vitrina {
    gap: 4px; margin-top: 6px; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  .vitrina::-webkit-scrollbar { display: none; }
  .vitrina span { font-size: 9px; padding: 2px 5px; flex-shrink: 0; }

  .ttrack { padding: 10px; }
  .ttrack-h { font-size: 9px; margin-bottom: 8px; }
  .ttrack-scroll { margin: 0 -10px -10px -10px; padding: 0 10px 10px 10px; }

  /* ---- FILAS COMPACTAS ----
     A 55px por temporada solo cabian 3 en pantalla. Apretando la tipografia,
     el relleno y la medalla de OVR se bajan a ~34px: casi el doble de
     temporadas a la vista, y la tabla estrecha menos scroll horizontal. */
  table.traj { font-size: 11px; min-width: 780px; }
  table.traj .c-tro { width: 74px; }
  table.traj th { font-size: 6px; padding: 4px 3px; }
  table.traj td { padding: 4px 3px; }
  table.traj td.c-age { font-size: 11px; }
  /* Todo en UNA linea: el club ocupaba dos (nombre arriba, liga debajo) y
     cada temporada pasa a leerse de un vistazo. Se usan hijos DIRECTOS para
     no tocar los iconos de trofeo, que viven dentro del <b>. */
  table.traj td.c-club > b { font-size: 11px; }
  table.traj td.c-liga span { font-size: 9px; }
  table.traj .escudo.sm { vertical-align: middle; }
  table.traj td.c-ovr .ovr-v {
    font-size: 11px; min-width: 30px; padding: 1px 5px; border-radius: 9px;
  }
  table.traj td.c-ovr .ovr-arrow { font-size: 9px; }
  .ovr-cell { grid-template-columns: 32px 12px 32px 28px; gap: 2px; }
  table.traj td.c-ovr .up, table.traj td.c-ovr .dn { font-size: 8px; margin-left: 3px; padding: 0 3px; }
  table.traj .escudo.sm { width: 16px; height: 16px; }
  .row-tro { font-size: 10px; letter-spacing: 0; }
  .po { font-size: 5px; padding: 2px 3px; margin-left: 4px; }

  .fase-band { font-size: 15px; margin: 2px 0 10px; }
  .fase-band .fase-tag { font-size: 9px; padding: 4px 6px; }
  .action { margin-top: 12px; }

  /* cabeceras de la decision: mas apretadas, para dejar sitio a la tabla */
  .mercado-h { font-size: 16px; margin-bottom: 3px; }
  .mercado-x { font-size: 11px; margin-bottom: 9px; line-height: 1.35; }
  .entreno-h { font-size: 9px; margin-bottom: 10px; line-height: 1.5; }

  /* los tres enfoques en UNA fila: apilados se comian 2 filas de tabla */
  .decision-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .decision-btns .ar-btn {
    font-size: 12px; padding: 9px 4px; border-width: 2px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5); gap: 2px;
  }
  .decision-btns .opt-fx { font-size: 9px; line-height: 1.2; }
  /* los eventos suelen traer 2 opciones: que ocupen media fila cada una */
  .decision-btns:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .decision-btns:has(> :only-child) { grid-template-columns: 1fr; }
  .entreno .avz { margin-top: 8px; font-size: 12px; padding: 9px 12px; }
}

/* ================================================================== */
/*  FASE 4 · LEGADO                                                    */
/* ================================================================== */
.legacy-wrap { max-width: 860px; margin: 0 auto; }

/* --- hitos --- */
.milestones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.ms-row {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2px solid var(--line); border-left: 5px solid var(--magenta);
  border-radius: 6px; padding: 14px 16px;
  animation: slidein 0.5s cubic-bezier(0.2, 0.9, 0.2, 1.2) both;
}
@keyframes slidein { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.ms-tag {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--red);
  width: 88px; flex-shrink: 0; line-height: 1.5;
}
.ms-main { flex: 1; }
.ms-label { font-family: 'Bungee', cursive; font-size: 16px; color: var(--ink); }
.ms-desc { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.ms-badge {
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: #0a0420; background: var(--yellow); padding: 6px 8px; border-radius: 3px;
  flex-shrink: 0;
}

/* --- tarjeta de legado --- */
.legacy-card {
  background:
    radial-gradient(600px 300px at 50% -10%, rgba(255, 46, 154, 0.18), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 3px solid var(--magenta);
  border-radius: 10px; padding: 30px clamp(18px, 4vw, 38px);
  box-shadow: 0 0 40px rgba(255, 46, 154, 0.25), 8px 8px 0 rgba(0,0,0,0.5);
  text-align: center;
  animation: pop 0.6s 0.2s cubic-bezier(0.2, 0.9, 0.2, 1.2) both;
}
.lg-name {
  font-family: 'Bungee', cursive; font-size: clamp(34px, 8vw, 62px); line-height: 0.95;
  color: var(--ink); text-shadow: 3px 3px 0 var(--magenta), 0 0 26px rgba(0,234,255,0.35);
}
.lg-tier {
  font-family: 'Press Start 2P', monospace; font-size: clamp(11px, 2.4vw, 15px);
  color: var(--cyan); margin: 14px 0 6px; letter-spacing: 1px;
}
.lg-hof {
  display: inline-block; margin: 8px 0 4px;
  font-family: 'Press Start 2P', monospace; font-size: 10px; color: #1a0f00;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  padding: 8px 12px; border-radius: 5px; letter-spacing: 0.5px;
  box-shadow: 0 0 18px rgba(255,225,26,0.4);
}
.lg-meta { color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 24px; }

.lg-score { display: flex; align-items: center; gap: 12px; margin: 0 auto 26px; max-width: 560px; }
.lg-score-lb { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--faint); white-space: nowrap; }
.lg-bar { flex: 1; height: 16px; background: #100827; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; }
.lg-bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--cyan));
  box-shadow: 0 0 14px rgba(255,225,26,0.5);
  animation: growbar 1s 0.4s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes growbar { from { width: 0 !important; } }
.lg-score-num { font-family: 'Bungee', cursive; font-size: 30px; color: var(--yellow); }
.lg-score-num span { font-size: 14px; color: var(--faint); }

.lg-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 26px; }
.lg-tiles > div { background: #140a30; border: 2px solid var(--line); border-radius: 6px; padding: 14px 6px; }
.lg-tiles b { display: block; font-family: 'Bungee', cursive; font-size: 22px; color: var(--cyan); }
.lg-tiles span { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--muted); }

.lg-acc-h, .lg-whatif-h { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--red); letter-spacing: 1px; margin-bottom: 8px; }
.lg-acc { font-family: 'Bungee', cursive; font-size: 16px; color: var(--yellow); margin-bottom: 22px; }
.lg-quote { font-style: italic; color: #d7d0ef; font-size: 15px; line-height: 1.6; max-width: 620px; margin: 0 auto 22px; }
.lg-whatif {
  background: rgba(224, 27, 38, 0.10); border: 2px solid var(--line-2);
  border-radius: 8px; padding: 16px; max-width: 620px; margin: 0 auto; text-align: left;
}
.lg-whatif > div:last-child { color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* --- resumen: seleccion, premios, clubes --- */
.lg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.lg-box {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2px solid var(--line); border-radius: 8px; padding: 16px; box-shadow: var(--shadow-k);
}
.lg-box.sel { border-color: var(--line-2); }
.lg-box-h { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--cyan); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.lg-box.sel .lg-box-h { color: var(--magenta); }
.lg-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lg-mini > div { background: #140a30; border: 1px solid var(--line); border-radius: 5px; padding: 8px 4px; text-align: center; }
.lg-mini b { display: block; font-family: 'Bungee', cursive; font-size: 18px; color: var(--yellow); }
.lg-mini span { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--muted); }
.lg-med { margin-top: 10px; }

/* medallero desglosado por competicion (JJOO / Mundial / Continental) */
.medallero { display: inline-flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.medcomp { font-size: 13px; white-space: nowrap; }
.medcomp i { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--muted); margin-right: 4px; letter-spacing: 0.5px; }
.lg-vacia { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--faint); text-align: center; padding: 18px 0; }
.lg-tros { display: flex; flex-wrap: wrap; gap: 12px; }
.lg-tro { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }

.lg-clubes {
  margin-top: 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2px solid var(--line); border-radius: 8px; padding: 16px; box-shadow: var(--shadow-k);
}
.lg-club { padding: 12px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.lg-club:last-child { border-bottom: none; }
.lg-club-cab { display: flex; align-items: center; gap: 12px; }
.lg-club-info { flex: 1; min-width: 0; }
.lg-club-info b { font-family: 'Bungee', cursive; font-size: 15px; }
.lg-club-info span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.lg-club-anios { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--faint); white-space: nowrap; }
/* Trofeos con NOMBRE y años: un emoji suelto no dice si ganaste el anillo,
   la liga o la copa. */
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 52px; }
.lg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,225,26,0.10); border: 1px solid rgba(255,225,26,0.30);
  border-radius: 20px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; color: var(--yellow); line-height: 1.3;
}
.lg-chip em { font-style: normal; color: var(--faint); font-size: 11px; letter-spacing: 0.3px; }
@media (max-width: 560px) {
  .lg-chips { margin-left: 0; gap: 5px; }
  .lg-chip { font-size: 11px; padding: 3px 8px; }
  .lg-chip em { font-size: 10px; }
  .lg-club-info span { font-size: 11px; }
}

.lg-money { font-family: 'Bungee', cursive; font-size: 15px; color: var(--green); margin-bottom: 8px; }
.lg-rec { font-family: 'Bungee', cursive; font-size: 14px; color: var(--cyan); margin-bottom: 20px; }

/* --- rival de generacion --- */
.lg-rival {
  margin-top: 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2px solid var(--line-2); border-radius: 8px; padding: 16px; box-shadow: var(--shadow-k);
}
.rival-grid { display: flex; align-items: center; justify-content: center; gap: 16px; }
.rival-col { flex: 1; max-width: 260px; text-align: center; background: #140a30; border: 2px solid var(--line); border-radius: 8px; padding: 14px; }
.rival-col.win { border-color: var(--green); box-shadow: 0 0 18px rgba(59,255,176,0.25); }
.rival-nom { font-family: 'Bungee', cursive; font-size: 18px; margin-bottom: 10px; }
.rival-stats { display: flex; justify-content: center; gap: 14px; }
.rival-stats span { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--muted); }
.rival-stats b { font-family: 'Bungee', cursive; font-size: 20px; color: var(--cyan); }
.rival-vs { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--magenta); }
.rival-verdict { text-align: center; margin-top: 14px; color: var(--ink); font-size: 14px; font-weight: 700; }
.row-les { font-size: 12px; }

.lg-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 620px) {
  .lg-tiles { grid-template-columns: repeat(3, 1fr); }
  .ms-tag { width: 66px; font-size: 7px; }
  .lg-score { flex-wrap: wrap; }
  .lg-duo { grid-template-columns: 1fr; }
}

/* --------------------------- Entrada ----------------------------- */
.screen { animation: pop 0.4s cubic-bezier(0.2, 0.9, 0.2, 1.2) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.98) translateY(12px); } to { opacity: 1; transform: none; } }

/* --------------------------- Responsive -------------------------- */
@media (max-width: 820px) {
  .setup-grid { grid-template-columns: 1fr; }
  .jersey-row { grid-template-columns: 120px 1fr; }
}
@media (max-width: 480px) {
  /* startbar solida para que el readout no se transparente sobre el contenido */
  .startbar {
    flex-direction: column;
    background: var(--bg0);
    border-top: 2px solid var(--line);
    padding: 12px 16px;
  }
  .btn-start { width: 100%; }
  .readout { text-align: center; min-width: 0; }
}

/* --- Cabecera en movil: que el titulo no choque con el boton de sonido --- */
@media (max-width: 560px) {
  .m-title { font-size: 24px; letter-spacing: 1px; }
  .m-title span { text-shadow: 2px 2px 0 var(--orange), 0 0 12px rgba(255, 225, 26, 0.5); }
  .m-ball { font-size: 24px; }
  .marquee { padding: 20px 12px 6px; }
  .marquee-inner { gap: 10px; padding-right: 44px; }
  body.con-idioma .marquee-inner { padding-right: 64px; }
  .sfx-btn { width: 34px; height: 34px; font-size: 15px; top: 10px; right: 10px; }
  .lang-btn { height: 34px; top: 10px; right: 50px; padding: 0 4px; }
  .lang-btn i { font-size: 8px; padding: 4px 4px; }
}

/* ================================================================== */
/*  HISTORIAL · Salon de la fama personal                              */
/* ================================================================== */
.hist-banner {
  display: block; width: 100%; max-width: 760px; margin: 0 auto 18px;
  font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px;
  color: var(--yellow); background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2px solid var(--yellow); border-radius: 6px; padding: 14px 16px;
  cursor: pointer; box-shadow: 4px 4px 0 rgba(0,0,0,0.45);
  transition: transform 0.08s, filter 0.15s;
}
.hist-banner:hover { filter: brightness(1.1); transform: translateY(-1px); }
.hist-banner .hb-n {
  background: var(--yellow); color: #0a0420; border-radius: 20px;
  padding: 2px 9px; margin-left: 6px; font-size: 10px;
}

.lg-saved {
  text-align: center; font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: var(--green); letter-spacing: 1px; margin: 10px 0 -4px;
}

.hist-top {
  text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 16px;
}
.hist-top b { color: var(--cyan); }

.hist-list { display: flex; flex-direction: column; gap: 10px; }
.hist-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2.5px solid var(--line); border-radius: 8px; padding: 12px 14px;
  box-shadow: var(--shadow-k); position: relative;
}
.hist-card:nth-child(1) { border-color: var(--yellow); }
.hist-card:nth-child(2) { border-color: #c9d2e0; }
.hist-card:nth-child(3) { border-color: var(--orange); }
.hc-rank {
  font-family: 'Bungee', cursive; font-size: 20px; min-width: 34px; text-align: center;
  color: var(--muted);
}
.hc-crest { width: 40px; flex: 0 0 40px; display: flex; justify-content: center; }
.hc-crest .escudo.sm { width: 36px; height: 36px; }
.hc-main { flex: 1; min-width: 0; }
.hc-name { font-family: 'Bungee', cursive; font-size: 17px; line-height: 1.1; }
.hc-name .hc-nac {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: #0a0420;
  background: var(--cyan); padding: 3px 5px; border-radius: 3px; vertical-align: 2px; margin-left: 4px;
}
.hc-tier { font-size: 11px; font-weight: 700; color: var(--magenta); text-transform: uppercase; letter-spacing: 1px; margin: 3px 0 6px; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hc-chip {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 11px;
  color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 20px;
}
.hc-chip.mvp { color: #0a0420; background: var(--yellow); border-color: var(--yellow); }
.hc-stats { display: flex; gap: 12px; }
.hc-stats > div { text-align: center; }
.hc-stats b { font-family: 'Bungee', cursive; font-size: 15px; color: var(--ink); display: block; }
.hc-stats span { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--faint); }
.hc-score {
  text-align: center; min-width: 52px;
  font-family: 'Bungee', cursive;
}
.hc-score b { font-size: 26px; color: var(--yellow); display: block; line-height: 1; }
.hc-score span { font-size: 9px; color: var(--faint); }
.hc-del {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 5px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--faint);
  font-size: 11px; line-height: 1; transition: background 0.12s, color 0.12s;
}
.hc-del:hover { background: rgba(224,27,38,0.18); color: #ff6b6b; border-color: #ff6b6b; }

.hist-empty { text-align: center; padding: 50px 20px; }
.hist-empty-ic { font-size: 46px; margin-bottom: 14px; opacity: 0.8; }
.hist-empty-t { font-family: 'Bungee', cursive; font-size: 20px; color: var(--muted); margin-bottom: 8px; }
.hist-empty-x { color: var(--faint); font-size: 13px; max-width: 360px; margin: 0 auto; }

.mini-btn.danger { color: #ff6b6b; border-color: rgba(224,27,38,0.4); }
.mini-btn.danger:hover { background: rgba(224,27,38,0.15); }

@media (max-width: 560px) {
  .hc-stats { display: none; }
  .hc-rank { font-size: 16px; min-width: 24px; }
  .hc-name { font-size: 15px; }
  .hc-score b { font-size: 22px; }
}

/* ================================================================== */
/*  CROMO · modal de vista previa                                      */
/* ================================================================== */
.cromo-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 2, 18, 0.85); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px;
  animation: cromoIn 0.25s ease both;
}
.cromo-modal.active { display: flex; }
@keyframes cromoIn { from { opacity: 0; } to { opacity: 1; } }
.cromo-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 96vh; }
.cromo-hint {
  font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 1px; color: var(--yellow);
}
.cromo-canvas-wrap { display: flex; justify-content: center; }
.cromo-canvas {
  width: auto; height: auto; max-width: min(430px, 88vw); max-height: 74vh;
  border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,0.6), 0 0 40px rgba(255,46,154,0.25);
  animation: cromoPop 0.4s cubic-bezier(0.2,0.9,0.2,1.3) both;
}
@keyframes cromoPop { from { opacity: 0; transform: scale(0.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
.cromo-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cromo-btns .ar-btn { font-size: 14px; padding: 12px 18px; }

/* ================================================================== */
/*  WIZARD MOBILE · multi-step setup                                  */
/* ================================================================== */
/* relative: es el ancla del banner de historial, que va absolute */
.wizard-screen { position: relative; padding: 20px; max-width: 600px; margin: 0 auto; }
/* el margen de arriba lo traia la cabecera "SLAM LEGEND" que habia aqui, que
   repetia el titulo del marquee: al quitarla, la barra se queda con su hueco */
.wizard-progress { width: 100%; height: 6px; background: rgba(255,46,154,0.18); border-radius: 3px; overflow: hidden; margin: 10px 0 24px; }
.wiz-bar { height: 100%; background: linear-gradient(90deg, var(--magenta), var(--cyan)); transition: width 0.3s ease; }

.wizard-body { min-height: 60vh; display: flex; flex-direction: column; gap: 20px; }
.wizard-body h2 { font-family: 'Bungee', cursive; font-size: 24px; margin-bottom: 12px; }

/* Jersey y campos */
.wiz-jersey-sec { text-align: center; margin: 0 0 24px; }
.wiz-jersey-sec .jersey { width: min(200px, 80vw); height: auto; }
.wiz-fields { display: flex; flex-direction: column; gap: 14px; }
.wizard-screen .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wizard-screen .field { display: flex; flex-direction: column; }
.wizard-screen .field label { font-size: 11px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.wizard-screen .field input { background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--ink); padding: 10px; border-radius: 4px; font-size: 14px; font-family: inherit; }
.wizard-screen .field input:focus { outline: none; border-color: var(--cyan); background: rgba(0,234,255,0.08); }

/* Búsqueda y grid de naciones */
.wiz-search { margin-bottom: 12px; }
.wiz-search input { width: 100%; padding: 12px; background: rgba(255,255,255,0.08); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-size: 14px; }
.wiz-nat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wiz-nat-grid .nat-item { display: flex; align-items: center; gap: 10px; padding: 12px; background: rgba(255,255,255,0.03); border: 2px solid transparent; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.wiz-nat-grid .nat-item:hover { background: rgba(255,255,255,0.06); border-color: var(--muted); }
.wiz-nat-grid .nat-item.on { background: rgba(255,46,154,0.18); border-color: var(--magenta); }
/* border y background-color se anulan a proposito: la regla de escritorio
   (.nat-item .flag) los trae y dibujaba un recuadro alrededor de la bandera. */
.wiz-nat-grid .flag {
  display: block; width: 40px; height: 30px; flex-shrink: 0; font-size: 0;
  border: 0; border-radius: 4px;
  background-color: transparent; background-size: cover;
  background-position: center; background-repeat: no-repeat;
}
.wiz-nat-grid .nm { font-size: 13px; flex: 1; }

/* Cancha y posiciones */
.wiz-court { position: relative; width: 100%; max-width: 320px; aspect-ratio: 160/120; background: #0a4d2a; border: 2px solid var(--green); border-radius: 6px; margin: 0 auto 20px; }
.wiz-court .court-lines { width: 100%; height: 100%; }
.wiz-court .pos-chip { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(0,234,255,0.15); border: 2px solid var(--cyan); color: var(--cyan); font-family: 'Bungee', cursive; font-size: 10px; letter-spacing: 0.5px; }
.wiz-court .pos-chip:hover { background: rgba(0,234,255,0.25); box-shadow: 0 0 12px rgba(0,234,255,0.4); }
.wiz-court .pos-chip.on { background: var(--cyan); border-color: var(--cyan); color: #06121a; box-shadow: 0 0 18px rgba(0,234,255,0.5); }

/* Estilos (pick cards) */
.wiz-estilos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.wiz-estilos .pick-card { padding: 12px; background: rgba(255,255,255,0.04); border: 2px solid var(--line); border-radius: 6px; cursor: pointer; text-align: center; transition: all 0.2s; }
.wiz-estilos .pick-card:hover { background: rgba(255,255,255,0.08); border-color: var(--yellow); transform: none; box-shadow: none; }
.wiz-estilos .pick-card.on { background: rgba(255,214,0,0.12); border-color: var(--yellow); transform: none; box-shadow: none; }
.wiz-estilos .pick-icon { font-size: 32px; margin-bottom: 8px; }
.wiz-estilos .pick-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.wiz-estilos .pick-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Toggles */
.toggle-h { display: flex; gap: 8px; }
.toggle-btn { flex: 1; padding: 8px; background: rgba(255,255,255,0.04); border: 2px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 12px; cursor: pointer; transition: all 0.2s; font-family: inherit; font-weight: 600; }
.toggle-btn:hover { background: rgba(255,255,255,0.08); }
.toggle-btn.on { background: var(--cyan); color: #06121a; border-color: var(--cyan); }

/* Acciones */
.wiz-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; }
.btn-prev, .btn-next { flex: 1; padding: 12px; border-radius: 6px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all 0.2s; font-family: inherit; border: 2px solid; }
.btn-prev { border-color: var(--line); background: transparent; color: var(--muted); }
.btn-prev:hover { border-color: var(--muted); background: rgba(255,255,255,0.06); }
.btn-next { background: var(--cyan); color: #06121a; border-color: var(--cyan); }
.btn-next:hover:not(:disabled) { box-shadow: 0 0 20px rgba(0,234,255,0.4); }
.btn-next:disabled { opacity: 0.5; cursor: not-allowed; }

/* Historia banner */
/* En el wizard va EN EL FLUJO, no absolute: flotando se solapaba con la
   cabecera "SLAM LEGEND" pasara lo que pasara con su ancho. Centrado y
   compacto, ocupa una linea y no puede pisar nada. */
.wizard-screen .hist-banner { position: static; width: fit-content; max-width: none; margin: 0 auto 12px; box-shadow: none; background: rgba(255,46,154,0.2); border: 2px solid var(--magenta); color: var(--magenta); padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer; z-index: 100; }
.wizard-screen .hist-banner:hover { background: rgba(255,46,154,0.35); }
.wizard-screen .hb-n { background: var(--magenta); color: #12040c; padding: 0 6px; border-radius: 10px; margin-left: 4px; }