/* Fútbol — estadio de noche: césped a rayas, líneas de cal y marcador electrónico. */

:root {
  --bg: #0c2a17;
  --fondo:
    radial-gradient(900px 420px at 50% -120px, rgba(255, 255, 255, .16), transparent),
    repeating-linear-gradient(90deg, #0f3a1f 0 90px, #0d331b 90px 180px),
    #0d331b;
  --surface: #0f1a26;       /* azul pizarra: se distingue del césped */
  --surface-2: #1a2a3b;
  --borde: rgba(255, 255, 255, .14);
  --texto: #f2f7f2;
  --suave: #9dbba5;
  --acento: #c6ff3d;
  --grad: linear-gradient(180deg, #d4ff5c, #9fdc12);
  --sobre-acento: #0b2410;
  --ok: #1faa59;
  --sobre-ok: #fff;
  --casi: #f5c518;
  --sobre-casi: #2b2100;
  --mal: #b8263a;
  --sobre-mal: #fff;
  --r: 12px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Anton', 'Inter', sans-serif;
  --cab-bg: #050b07;
  --led: #ffcc00;
}

/* Cabecera: marcador del estadio */
.top { border-bottom: 3px solid var(--acento); }
.top .logo { color: #fff; }
.top .logo b { background: none; color: var(--acento); -webkit-text-fill-color: var(--acento); }
.top .tema-link { font-family: 'Anton', sans-serif; color: var(--led); letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 10px rgba(255, 204, 0, .5); }
.top .nav a.on { box-shadow: inset 0 -2px 0 var(--acento); }

h1.titulo { text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.tarjeta, .modal { background: #0f1a26; border: 1px solid rgba(198, 255, 61, .35); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.btn { text-transform: uppercase; letter-spacing: .5px; }
.campo input { background: #0f1a26; border: 2px solid rgba(198, 255, 61, .35); }
.sugerencias { background: #0f1a26; }
.sugerencias li img { border-radius: 50%; }

.fb-hero { position: relative; text-align: center; padding: 28px 0 32px; }
/* Círculo central de cal */
.fb-hero::before { content: ''; position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 255, .22); border-radius: 50%; z-index: -1; }
.fb-hero h1 { font: 400 clamp(64px, 15vw, 120px)/.9 var(--font-d); text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.fb-hero h1 span + span { color: var(--acento); }
.fb-hero p { color: var(--suave); margin-top: 12px; }
.juego { background: #0f1a26; border: 2px solid rgba(198, 255, 61, .45); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.juego:hover { border-color: var(--acento); }
.juego .cuerpo b { font: 400 28px/1 var(--font-d); text-transform: uppercase; letter-spacing: 1px; }
.juego .muestra { background: repeating-linear-gradient(90deg, #14502b 0 40px, #11472a 40px 80px); border-bottom: 3px solid rgba(255, 255, 255, .6); }

.bandera { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.foto { border-radius: 50%; object-fit: cover; object-position: top; background: #1b4d2c; }

/* ── Clásico ── */
.tabla-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; }
.tabla-clasico { display: grid; grid-template-columns: 1.8fr repeat(6, 1fr); gap: 6px; min-width: 800px; }
.tabla-clasico .cab { font-size: 11px; font-weight: 700; color: var(--suave); text-align: center; text-transform: uppercase; letter-spacing: .5px; padding-bottom: 4px; border-bottom: 2px solid var(--borde); }
.tabla-clasico .fila { display: contents; }
.celda { min-height: 68px; padding: 6px; border-radius: 10px; display: grid; place-items: center; text-align: center; font-weight: 700; font-size: 13px; line-height: 1.2; }
.celda.ok { background: var(--ok); color: var(--sobre-ok); }
.celda.casi { background: var(--casi); color: var(--sobre-casi); }
.celda.mal { background: var(--mal); color: var(--sobre-mal); }
.celda.jug { display: flex; gap: 8px; justify-content: flex-start; background: var(--surface); border: 1px solid var(--borde); text-align: left; }
.celda.jug.ok { border: 2px solid var(--ok); }
.celda.jug img { width: 48px; height: 48px; flex-shrink: 0; }
.celda .bandera { display: block; margin: 0 auto 4px; width: 28px; height: 19px; }
.fila.nueva .celda { animation: girar .45s both; animation-delay: calc(var(--i, 0) * .16s); }
.leyenda { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--suave); margin: -8px 0 16px; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

/* ── Trayectoria: línea de clubes ── */
.carrera { list-style: none; position: relative; display: grid; gap: 8px; margin-bottom: 16px; padding-left: 26px; }
.carrera::before { content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 3px; background: repeating-linear-gradient(180deg, var(--acento) 0 8px, transparent 8px 14px); }
.carrera li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--borde); font-weight: 700; }
.carrera li::before { content: ''; position: absolute; left: -23px; width: 13px; height: 13px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px #0d331b; }
.carrera li small { color: var(--suave); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carrera li .cesion { font-size: 10px; font-weight: 700; color: var(--led); border: 1px solid var(--led); border-radius: 4px; padding: 1px 4px; margin-left: 6px; }
.carrera li.oculto { color: var(--suave); font-style: italic; border-style: dashed; }
.pistas { display: grid; gap: 8px; margin-bottom: 16px; }
.pista { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px dashed var(--borde); font-size: 14px; }
.pista b { color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; min-width: 96px; }
.pista.bloqueada { color: var(--suave); font-style: italic; }
.intentos { list-style: none; display: grid; gap: 6px; margin-top: 16px; }
.intentos li { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; font-weight: 600; background: var(--mal); color: var(--sobre-mal); }
.intentos li.ok { background: var(--ok); }
.intentos li img { width: 36px; height: 36px; }

/* ── Grid ── */
.grid-fb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 560px; margin: 0 auto 16px; }
.grid-fb .criterio { display: grid; place-items: center; text-align: center; padding: 6px; min-height: 64px; border-radius: 10px; background: #05140a; border: 1px solid var(--borde); font: 400 14px/1.1 var(--font-d); text-transform: uppercase; letter-spacing: .5px; color: var(--led); }
.grid-fb .criterio .bandera { width: 34px; height: 23px; display: block; margin: 0 auto 4px; }
.grid-fb .criterio small { display: block; font: 600 10px/1 var(--font); color: var(--suave); letter-spacing: 0; text-transform: none; margin-bottom: 3px; }
.grid-fb .esquina { background: none; border: 0; }
.grid-fb .casilla {
  aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; padding: 4px; text-align: center;
  background: rgba(255, 255, 255, .06); border: 2px dashed rgba(255, 255, 255, .25); color: var(--suave); font-size: 11px; font-weight: 700; cursor: pointer;
}
.grid-fb .casilla:hover:not(.llena) { border-color: var(--acento); color: var(--acento); }
.grid-fb .casilla.sel { border: 2px solid var(--acento); background: rgba(198, 255, 61, .12); color: var(--acento); }
.grid-fb .casilla.llena { cursor: default; border: 2px solid var(--ok); background: rgba(31, 170, 89, .25); color: var(--texto); }
.grid-fb .casilla img { width: 58%; aspect-ratio: 1; margin-bottom: 3px; }
.grid-fb .casilla span { display: block; font-size: 10px; line-height: 1.1; }
.marcador-grid { display: flex; justify-content: center; gap: 18px; margin-bottom: 14px; font: 400 18px/1 var(--font-d); letter-spacing: 1px; text-transform: uppercase; }
.marcador-grid b { color: var(--led); font-weight: 400; }

/* ── Top 10 ── */
.top10-titulo { text-align: center; font: 400 24px/1.15 var(--font-d); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.top10-titulo span { color: var(--acento); }
.top10-sub { text-align: center; color: var(--suave); font-size: 13px; margin-bottom: 14px; }
.vidas { text-align: center; font-size: 22px; letter-spacing: 4px; margin-bottom: 12px; }
.top10 { list-style: none; display: grid; gap: 5px; margin-bottom: 16px; counter-reset: pos; }
.top10 li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--borde); font-weight: 700; }
.top10 li::before { counter-increment: pos; content: counter(pos); display: grid; place-items: center; height: 36px; border-radius: 8px; background: #05140a; color: var(--led); font: 400 18px/1 var(--font-d); }
.top10 li .quien { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top10 li .quien img.foto { width: 32px; height: 32px; }
.top10 li.hueco .quien { color: var(--suave); font-weight: 600; letter-spacing: 3px; }
.top10 li.acierto { border-color: var(--ok); background: rgba(31, 170, 89, .22); }
.top10 li.revelado { opacity: .7; }
.top10 li b { font-variant-numeric: tabular-nums; color: var(--acento); }

.solucion { display: flex; gap: 14px; align-items: center; text-align: left; }
.solucion img { width: 84px; height: 84px; flex-shrink: 0; }
.solucion b { font: 400 26px/1 var(--font-d); text-transform: uppercase; display: block; }

/* Escudos de los clubes */
/* Círculo blanco detrás: algunos escudos son oscuros (Tottenham) y no se verían sobre el fondo */
.escudo { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: 8px; padding: 2px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.escudo.grande { display: block; width: 30px; height: 30px; margin: 0 auto 4px; }
.grid-fb .criterio .escudo { display: block; width: 32px; height: 32px; margin: 0 auto 4px; }
.carrera li > span { display: flex; align-items: center; }