:root {
  --fondo: #2a2a2a;
  --fondo-panel: #353535;
  --borde: #5a5a5a;
  --naranja: #f08a24;
  --dorado: #f2c14e;
  --verde: #3fae3f;
  --verde-oscuro: #257a25;
  --texto: #f4f4f4;
  --texto-suave: #cfcfcf;
  --fuente-pixel: "Press Start 2P", "Courier New", "Lucida Console", monospace;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #1c1c1c;
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

body { padding: 16px; }

a { color: inherit; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
}

img { display: block; max-width: 100%; height: auto; }

.frame {
  max-width: 860px;
  margin: 0 auto;
  background: var(--fondo);
  border: 4px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 0 0 6px #111;
  padding: 16px;
  overflow: hidden;
}

/* Cabecera */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.logo img { width: 120px; height: auto; }

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.btn-menu {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
  background: var(--fondo-panel);
  border: 2px solid var(--borde);
  border-radius: 6px;
  font-family: var(--fuente-pixel);
  font-size: 16px;
  text-decoration: none;
  color: var(--texto);
}

.btn-menu:hover { border-color: var(--naranja); }

/* Titular */
.hero { text-align: center; padding-top: 16px; }

.titulo {
  margin: 0 0 12px;
  font-family: var(--fuente-pixel);
  font-size: 22px;
  line-height: 1.5;
  color: var(--dorado);
  text-shadow: 3px 3px 0 #000;
}

.subtitulo {
  margin: 0 auto 20px;
  max-width: 600px;
  color: var(--texto-suave);
  font-size: 18px;
}

/* Estadios */
.estadios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.estadio {
  margin: 0;
  background: var(--fondo-panel);
  border: 4px solid var(--naranja);
  border-radius: 8px;
  padding: 8px;
}

.estadio img {
  width: 100%;
  border-radius: 4px;
}

.etiqueta {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  border: 2px solid #f4f4f4;
  border-radius: 6px;
  font-family: var(--fuente-pixel);
  font-size: 16px;
  line-height: 1.4;
  background: #222;
}

/* Botones de acción */
.acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin: 24px 0 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--fuente-pixel);
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 3px solid #000;
}

.btn-descarga {
  background: var(--verde);
  color: #fff;
  box-shadow: 0 4px 0 var(--verde-oscuro);
}

.btn-descarga:hover { background: #4cc04c; }

.btn-trailer {
  background: #1e1e1e;
  color: var(--texto);
  border-color: var(--texto-suave);
}

.btn-trailer:hover { border-color: var(--naranja); }

/* Secciones */
.titulo-seccion {
  margin: 32px 0 16px;
  text-align: center;
  font-family: var(--fuente-pixel);
  font-size: 18px;
  line-height: 1.5;
  color: var(--dorado);
}

.tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.tarjeta {
  background: var(--fondo-panel);
  border: 3px solid var(--dorado);
  border-radius: 8px;
  padding: 16px;
}

.tarjeta h3 {
  margin: 0 0 8px;
  font-family: var(--fuente-pixel);
  font-size: 16px;
  line-height: 1.5;
  color: var(--naranja);
}

.tarjeta p { margin: 0; color: var(--texto-suave); }

.extra, .descarga { margin-top: 8px; }

.lista {
  margin: 0;
  padding: 16px 16px 16px 36px;
  background: var(--fondo-panel);
  border: 2px solid var(--borde);
  border-radius: 8px;
  color: var(--texto-suave);
}

.lista li { margin-bottom: 8px; }
.lista li:last-child { margin-bottom: 0; }

.descarga {
  text-align: center;
  padding: 8px 0;
}

.descarga p { color: var(--texto-suave); margin: 0 0 16px; word-break: break-word; }

.descarga .btn { width: 100%; }

/* Pie */
.pie {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 2px solid var(--borde);
  text-align: center;
}

.redes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo-panel);
  color: var(--texto);
  text-decoration: none;
}

.redes a:hover { border-color: var(--naranja); color: var(--naranja); }


.copia {
  margin: 16px 0 0;
  font-size: 16px;
  color: var(--texto-suave);
}

/* Pantallas medianas y grandes */
@media (min-width: 640px) {
  .titulo { font-size: 28px; }
  .estadios { grid-template-columns: repeat(3, 1fr); }
  .acciones { flex-direction: row; justify-content: center; }
  .acciones .btn { width: auto; min-width: 280px; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .descarga .btn { width: auto; min-width: 280px; }
}

@media (max-width: 379px) {
  .titulo { font-size: 18px; }
}

/* Selector de idioma ES / CA / EN */
.idiomas { display: inline-flex; gap: 4px; margin-left: 8px; }
.idiomas button { min-height: 44px; min-width: 44px; padding: 0 10px; font: inherit; font-size: 16px;
  background: #2a2e33; color: #fff; border: 2px solid rgba(255,255,255,.5); border-radius: 4px; cursor: pointer; }
.idiomas button[aria-pressed="true"] { border-color: #ffb347; color: #ffb347; }

/* Capturas en las tarjetas de características */
.tarjeta img { display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 8px; }

/* Portada del juego (sin botones) */
.portada { display: block; width: 100%; height: auto; margin: 12px 0; border-radius: 6px; }

/* Banner con botones encima: trailer a la izquierda, Google Play a la derecha */
.banner { position: relative; }
.banner .btn { position: absolute; bottom: 12px; min-height: 48px; }
.banner .btn-trailer { left: 12px; }
.banner .btn-descarga { right: 12px; }
.pie-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pie-fila .copia a { color: inherit; }

/* Móvil: los botones salen debajo de la imagen, no encima */
@media (max-width: 640px) {
  .banner { display: flex; flex-direction: column; gap: 10px; }
  .banner .btn { position: static; width: 100%; }
}

/* Ligas online (ligas.html) */
.lg-cab { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lg-cab .btn-menu { font-size: 14px; }
.lg-titulo { margin: 8px 0 4px; font-family: var(--fuente-pixel); font-size: 20px; line-height: 1.5; color: var(--dorado); text-shadow: 3px 3px 0 #000; overflow-wrap: anywhere; }
.lg-intro, .lg-estado { color: var(--texto-suave); margin: 4px 0 12px; }
.lg-cod-grande, .lg-cod { font-family: var(--fuente-pixel); font-size: 12px; color: var(--naranja); margin: 0 0 4px; }
.lg-aviso { padding: 16px; background: var(--fondo-panel); border: 2px solid var(--borde); border-radius: 8px; text-align: center; }
.lg-error { border-color: #d9534f; }
.lg-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.lg-form label { flex-basis: 100%; color: var(--texto-suave); }
.lg-form input { flex: 1 1 140px; min-height: 48px; padding: 8px 12px; background: #1c1c1c; color: var(--texto); border: 2px solid var(--borde); border-radius: 6px; font-family: var(--fuente-pixel); font-size: 16px; text-transform: uppercase; }
.lg-form button { cursor: pointer; }
.lg-ligas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lg-liga { display: flex; flex-direction: column; gap: 2px; padding: 12px; text-decoration: none; background: var(--fondo-panel); border: 2px solid var(--borde); border-radius: 8px; }
.lg-liga:hover { border-color: var(--naranja); }
.lg-liga strong { font-size: 18px; overflow-wrap: anywhere; }
.lg-meta { color: var(--texto-suave); font-size: 15px; }
.lg-camp, .lg-campeon { color: var(--dorado); }
.lg-campeon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 14px; font-size: 20px; background: var(--fondo-panel); border: 4px solid var(--dorado); border-radius: 8px; }
.lg-campeon span { font-family: var(--fuente-pixel); font-size: 14px; }
.lg-campeon strong { color: var(--texto); }
.lg-chip { display: inline-block; flex: none; width: 18px; height: 18px; margin-right: 8px; border: 3px solid #fff; border-radius: 4px; vertical-align: -3px; }
.lg-eq { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.lg-scroll { overflow-x: auto; }
.lg-tabla { width: 100%; border-collapse: collapse; background: var(--fondo-panel); }
.lg-tabla th, .lg-tabla td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.lg-tabla th { font-family: var(--fuente-pixel); font-size: 12px; color: var(--dorado); }
.lg-tabla .izq { text-align: left; white-space: normal; }
.lg-tabla tbody tr:first-child td { color: var(--dorado); font-weight: bold; }
.lg-jor, .lg-club { margin: 8px 0; background: var(--fondo-panel); border: 2px solid var(--borde); border-radius: 8px; }
.lg-jor summary, .lg-club summary { padding: 12px; min-height: 48px; cursor: pointer; }
.lg-jor summary em { color: var(--texto-suave); font-style: normal; }
.lg-club { border-left: 10px solid var(--cp); border-color: var(--cs); border-left-color: var(--cp); }
.lg-club summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lg-rat { margin-left: auto; font-size: 13px; color: var(--texto-suave); }
.lg-part { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 8px; }
.lg-part li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px; background: #2a2a2a; border-radius: 6px; }
.lg-part li > .lg-eq:last-child { justify-content: flex-end; text-align: right; }
.lg-marc { font-family: var(--fuente-pixel); font-size: 14px; white-space: nowrap; text-align: center; }
.lg-marc b.g { color: var(--dorado); }
.lg-pend { color: var(--texto-suave); font-family: var(--fuente-texto); font-size: 14px; }
.lg-noticias { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-noticias li { padding: 8px 12px; background: var(--fondo-panel); border-left: 4px solid var(--naranja); border-radius: 4px; }
.lg-noticias time { color: var(--texto-suave); font-size: 13px; margin-right: 6px; }
.lg-roster { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 4px; }
.lg-roster li { display: grid; grid-template-columns: 60px 64px 44px 1fr auto; align-items: center; gap: 6px; padding: 6px 8px; background: #2a2a2a; border-radius: 4px; }
.lg-foto { display: block; image-rendering: pixelated; background: #1d1d1d; border-radius: 4px; }
.lg-roster li.tit { border-left: 4px solid var(--verde); }
.lg-pos { font-family: var(--fuente-pixel); font-size: 11px; color: var(--naranja); }
.lg-num { color: var(--texto-suave); font-size: 14px; }
.lg-nom small { color: var(--verde); }
.lg-est { color: var(--dorado); white-space: nowrap; letter-spacing: 1px; }
.lg-est i { font-style: normal; color: #555; }
.enlace-ligas { display: inline-block; margin-top: 4px; color: var(--texto-suave); font-size: 15px; }
@media (max-width: 480px) {
  .lg-titulo { font-size: 16px; }
  .lg-roster li { grid-template-columns: 48px 56px 1fr auto; }
  .lg-foto { width: 48px; height: auto; }
  .lg-num { display: none; }
  .lg-part li { grid-template-columns: 1fr; text-align: center; }
  .lg-part li > .lg-eq, .lg-part li > .lg-eq:last-child { justify-content: center; text-align: center; }
}
.lg-cab [hidden] { display: none; }