/* ════════════════════════════════════════════════════════════════════════
   ENTITY PAGES — Jugador · Selección · Club
   Estilo SSSD arcade consistente con el resto del sitio.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   MATCH PAGE — /partido/{slug}/
   ════════════════════════════════════════════════════════════════════════ */
/* Grid layout 2-col para body del partido:
   - .bd-match-card--full ocupa las 2 columnas (pronóstico hero + h2h footer)
   - .bd-match-card--col ocupa 1 columna (comparison + forma reciente lado a lado) */
.bd-match-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}
.bd-match-body .bd-match-card--full { grid-column: 1 / -1; }
.bd-match-body .bd-match-card--col  { grid-column: span 1; }
@media (max-width: 900px) {
    .bd-match-body { grid-template-columns: 1fr; }
    .bd-match-body .bd-match-card--col { grid-column: 1 / -1; }
}

.bd-match-banner { padding: 1.3rem 1.4rem; }
.bd-match-banner-info { width: 100%; }
.bd-match-banner-meta {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    color: var(--sss-yellow, #FFDC1F);
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}
.bd-match-vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
.bd-match-team {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #fff;
}
.bd-match-team img {
    width: 72px; height: 72px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.4));
}
.bd-match-team-name {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.85rem;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 0 #0d1f6b;
    line-height: 1.2;
}
.bd-match-vs-center {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.bd-match-vs-label {
    font-family: var(--display, 'Press Start 2P');
    font-size: 1.5rem;
    color: var(--sss-yellow, #FFDC1F);
    text-shadow: 3px 3px 0 #0d1f6b;
    letter-spacing: 3px;
}
.bd-match-countdown {
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.85rem;
    color: #fff;
    background: rgba(0,0,0,0.3);
    padding: 4px 10px;
    border-radius: 4px;
    border: 2px solid var(--sss-yellow, #FFDC1F);
    box-shadow: 2px 2px 0 #0d1f6b;
}
.bd-match-score {
    display: flex; gap: 0.6rem;
    font-family: var(--display, 'Press Start 2P');
    font-size: 2rem;
    color: var(--sss-yellow, #FFDC1F);
    text-shadow: 3px 3px 0 #0d1f6b;
}
.bd-match-score-sep { color: #fff; }

/* PREDICCIÓN — barras de probabilidad */
.bd-match-pred-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 1.5rem;
    margin-top: 0.8rem;
}
@media (max-width: 768px) {
    .bd-match-pred-layout { grid-template-columns: 1fr; }
}
.bd-match-pred-bars {
    display: flex; flex-direction: column;
    gap: 0.8rem;
}
.bd-match-pred-bar-label {
    display: flex; justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
    color: #111827;
    font-size: 0.95rem;
}
.bd-match-pred-pct {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.75rem;
    color: var(--sss-cobalt, #1939B7);
}
.bd-match-pred-bar-track {
    height: 22px;
    background: rgba(17, 24, 39, 0.08);
    border: 2px solid #111827;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.bd-match-pred-bar-fill {
    height: 100%;
    transition: width 0.5s ease;
}
.bd-match-pred-bar-home { background: linear-gradient(90deg, var(--sss-cobalt, #1939B7) 0%, #4163d0 100%); }
.bd-match-pred-bar-draw { background: linear-gradient(90deg, #777 0%, #999 100%); }
.bd-match-pred-bar-away { background: linear-gradient(90deg, var(--sss-pink, #FF4FCB) 0%, #ff7fda 100%); }
.bd-match-pred-side {
    display: flex; flex-direction: column;
    gap: 0.8rem;
}
.bd-match-pred-winner {
    background: linear-gradient(180deg, var(--sss-yellow, #FFDC1F) 0%, #f5b800 100%);
    border: 2px solid #111827;
    border-radius: 6px;
    box-shadow: 2px 2px 0 #111827;
    padding: 0.7rem 0.9rem;
    text-align: center;
}
.bd-match-pred-winner-label {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    color: var(--sss-cobalt, #1939B7);
    margin-bottom: 0.3rem;
}
.bd-match-pred-winner-name {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.85rem;
    color: var(--sss-cobalt, #1939B7);
    margin-bottom: 0.2rem;
}
.bd-match-pred-winner-comment {
    font-size: 0.75rem;
    color: rgba(13, 31, 107, 0.8);
}
.bd-match-pred-goals, .bd-match-pred-ou {
    background: #fff;
    border: 2px solid #111827;
    border-radius: 6px;
    box-shadow: 2px 2px 0 #111827;
    padding: 0.6rem 0.9rem;
    text-align: center;
}
.bd-match-pred-goals-label, .bd-match-pred-ou-label {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.5rem;
    color: rgba(17, 24, 39, 0.7);
    display: block;
    margin-bottom: 0.3rem;
}
.bd-match-pred-goals-row {
    display: flex; justify-content: center;
    gap: 0.5rem;
    font-family: var(--display, 'Press Start 2P');
    font-size: 1.1rem;
    color: var(--sss-cobalt, #1939B7);
}
.bd-match-pred-goals-sep { color: rgba(17,24,39,0.4); }
.bd-match-pred-ou-val {
    font-family: var(--display, 'Press Start 2P');
    font-size: 1rem;
    color: var(--sss-pink, #FF4FCB);
}
.bd-match-advice {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 220, 31, 0.15);
    border-left: 3px solid var(--sss-yellow, #FFDC1F);
    border-radius: 4px;
    font-size: 0.9rem;
    color: #111827;
}

/* COMPARACIÓN — legend con teams + dimension label arriba + barra única split */
.bd-match-comp-legend {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 2px dashed rgba(17, 24, 39, 0.15);
}
.bd-match-comp-team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.7rem;
    line-height: 1.2;
}
.bd-match-comp-team-home {
    justify-content: flex-end;
    color: var(--sss-cobalt, #1939B7);
    text-align: right;
}
.bd-match-comp-team-away {
    justify-content: flex-start;
    color: var(--sss-pink, #FF4FCB);
    text-align: left;
}
.bd-match-comp-team img {
    width: 24px; height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.bd-match-comp-vs {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    color: rgba(17, 24, 39, 0.5);
    letter-spacing: 1px;
}

.bd-match-comparison {
    display: flex; flex-direction: column;
    gap: 1rem;
}
.bd-match-comp-row {
    display: flex; flex-direction: column;
    gap: 0.35rem;
}
.bd-match-comp-dim {
    font-size: 0.8rem;
    color: #111827;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.3px;
}
.bd-match-comp-bar {
    display: flex;
    height: 28px;
    border: 2px solid #111827;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 2px 2px 0 #111827;
    background: rgba(17, 24, 39, 0.04);
}
.bd-match-comp-bar-home,
.bd-match-comp-bar-away {
    display: flex;
    align-items: center;
    transition: width 0.5s ease;
    overflow: hidden;
    white-space: nowrap;
}
.bd-match-comp-bar-home {
    background: linear-gradient(90deg, var(--sss-cobalt, #1939B7) 0%, #4163d0 100%);
    justify-content: flex-start;
    padding-left: 8px;
}
.bd-match-comp-bar-away {
    background: linear-gradient(90deg, #ff7fda 0%, var(--sss-pink, #FF4FCB) 100%);
    justify-content: flex-end;
    padding-right: 8px;
}
.bd-match-comp-bar-home span,
.bd-match-comp-bar-away span {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.6rem;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}

/* REORDEN del body para que las cards aparezcan en pares correctos:
   Row 1: Pronóstico + Últimos 10 partidos
   Row 2: Comparación + H2H
   Usamos `order` CSS para reposicionar sin tocar el HTML */
.bd-match-body { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

/* FORMA RECIENTE */
.bd-match-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 0.7rem;
}
@media (max-width: 700px) {
    .bd-match-form-layout { grid-template-columns: 1fr; }
}
.bd-match-form-letters {
    display: flex; gap: 4px;
    margin: 0.5rem 0 1rem 0;
}
.bd-match-form-letter {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.6rem;
    color: #fff;
    border: 2px solid #111827;
    border-radius: 3px;
    box-shadow: 1px 1px 0 #111827;
}
.bd-match-form-letter-win  { background: #2ecc71; }
.bd-match-form-letter-draw { background: #999; }
.bd-match-form-letter-lose { background: #e74c3c; }
.bd-match-form-letter-other{ background: #ccc; color: #333; }

/* Empty state cuando data aún no está disponible */
.bd-match-empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(17, 24, 39, 0.04);
    border: 2px dashed rgba(17, 24, 39, 0.2);
    border-radius: 8px;
    margin-top: 0.6rem;
}
.bd-match-empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}
.bd-match-empty-state p { margin: 0.3rem 0; }
.bd-match-empty-state strong {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.65rem;
    color: var(--sss-pink, #FF4FCB);
    letter-spacing: 1px;
}

/* Lista compacta últimos 5 partidos */
.bd-match-recent-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.bd-match-recent-row {
    display: grid;
    grid-template-columns: 22px 18px 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px dashed rgba(17, 24, 39, 0.1);
    font-size: 0.8rem;
}
.bd-match-recent-row:last-child { border-bottom: none; }
.bd-match-recent-result {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display, 'Press Start 2P'); font-size: 0.55rem;
    border: 2px solid #111827; border-radius: 3px;
    color: #fff;
}
.bd-match-recent-opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-match-recent-score { font-family: var(--body, 'JetBrains Mono'); font-weight: 700; color: #111827; }

/* Venue + Coaches */
.bd-match-venue-info {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.8rem;
    margin-top: 0.5rem;
    align-items: center;
}
@media (max-width: 480px) {
    .bd-match-venue-info { grid-template-columns: 1fr; }
}
.bd-match-venue-img {
    width: 100%; height: 80px;
    object-fit: cover;
    border: 2px solid #111827; border-radius: 6px;
    box-shadow: 2px 2px 0 #111827;
}
.bd-match-coaches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 1.2rem;
}
@media (max-width: 480px) { .bd-match-coaches { grid-template-columns: 1fr; } }
.bd-match-coach {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 0.7rem;
    padding: 0.6rem;
    background: rgba(17, 24, 39, 0.04);
    border: 2px solid #111827; border-radius: 6px;
    box-shadow: 2px 2px 0 #111827;
}
.bd-match-coach-photo {
    width: 50px; height: 50px;
    border: 2px solid #111827; border-radius: 4px;
    object-fit: cover;
    background: #faf3e3;
}
.bd-match-coach-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.bd-match-coach-team {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.5rem;
    color: var(--sss-pink, #FF4FCB);
    letter-spacing: 1px;
}
.bd-match-coach-name {
    font-weight: 700; color: #111827;
    font-size: 0.95rem;
    margin: 0.15rem 0;
}
.bd-match-coach-meta { font-size: 0.75rem; }

/* Lineups */
.bd-match-lineups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 0.7rem;
}
@media (max-width: 600px) { .bd-match-lineups-grid { grid-template-columns: 1fr; } }
.bd-match-lineup-list {
    list-style: none; margin: 0.3rem 0 0; padding: 0;
}
.bd-match-lineup-list li {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px dashed rgba(17, 24, 39, 0.08);
    font-size: 0.85rem;
}
.bd-match-lineup-list li:last-child { border-bottom: none; }
.bd-match-lineup-num {
    background: var(--sss-yellow, #FFDC1F);
    color: var(--sss-cobalt, #1939B7);
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    padding: 3px 5px;
    border-radius: 3px;
    text-align: center;
}
.bd-match-lineup-subs li { opacity: 0.75; }

/* Events */
.bd-match-events-list { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.bd-match-event {
    display: grid;
    grid-template-columns: 50px auto auto 1fr;
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px dashed rgba(17, 24, 39, 0.1);
    font-size: 0.88rem;
}
.bd-match-event-min {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.6rem;
    color: var(--sss-cobalt, #1939B7);
}
.bd-match-event-icon { font-size: 1.1rem; }
.bd-match-event-team {
    font-weight: 600;
    color: rgba(17, 24, 39, 0.7);
    font-size: 0.85rem;
}

/* Statistics */
.bd-match-stats-list { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.bd-match-stat-row {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    gap: 0.8rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(17, 24, 39, 0.1);
    font-size: 0.9rem;
}
.bd-match-stat-val-home {
    text-align: right;
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.7rem;
    color: var(--sss-cobalt, #1939B7);
}
.bd-match-stat-val-away {
    text-align: left;
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.7rem;
    color: var(--sss-pink, #FF4FCB);
}
.bd-match-stat-label { text-align: center; color: #111827; }

/* ════════════════════════════════════════════════════════════════════════
   TRADING CARD ARCADE — coleccionable estilo Panini retro pixel
   Wrapper navy → fondo lavanda con pattern pixel → header pink/orange con
   número + posición → marco beige con foto pixelart → banner amarillo con
   nombre (h1) → grid 2×2 stats. SIN "Dato Barti" ni branding bottom.
   ════════════════════════════════════════════════════════════════════════ */
.bd-pl-card-arcade {
    background: linear-gradient(180deg, #1939B7 0%, #0d1f6b 100%);
    border: 4px solid #0d1f6b;
    border-radius: 20px;
    padding: 10px;
    box-shadow:
        4px 4px 0 #0d1f6b,
        0 0 0 2px rgba(255,255,255,0.08) inset;
    max-width: 290px;
    width: 100%;
    flex-shrink: 0;
    position: relative;
}
.bd-pl-card-arcade-inner {
    background:
        /* Sparkles dispersos (vintage Panini feel) */
        radial-gradient(circle 1px at 12% 18%, rgba(255,255,255,0.85) 50%, transparent 51%),
        radial-gradient(circle 1px at 32% 62%, rgba(255,255,255,0.6) 50%, transparent 51%),
        radial-gradient(circle 1px at 78% 30%, rgba(255,255,255,0.75) 50%, transparent 51%),
        radial-gradient(circle 1px at 88% 78%, rgba(255,255,255,0.5) 50%, transparent 51%),
        radial-gradient(circle 1px at 22% 88%, rgba(255,255,255,0.65) 50%, transparent 51%),
        radial-gradient(circle 1px at 65% 12%, rgba(255,255,255,0.7) 50%, transparent 51%),
        radial-gradient(circle 1px at 48% 45%, rgba(255,255,255,0.4) 50%, transparent 51%),
        /* Pixel cross-hatch diagonal */
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.08) 0 2px,
            transparent 2px 5px),
        repeating-linear-gradient(-45deg,
            rgba(0,0,0,0.06) 0 2px,
            transparent 2px 5px),
        /* Gradient vertical con profundidad — oscuro arriba a violeta claro abajo */
        linear-gradient(180deg,
            #3d1f6e 0%,
            #5a3a98 25%,
            #8a6abe 55%,
            #a682d4 75%,
            #6a4ba0 100%);
    border-radius: 12px;
    padding: 8px;
    position: relative;
    overflow: hidden;
}
/* Header: número + posición sobre gradiente pink → orange.
   Usamos grid 1fr 1fr para alinear horizontalmente sin issues de baseline
   de Press Start 2P, y display:flex con align-items:center en cada celda
   para garantizar centro vertical perfecto. */
.bd-pl-card-arcade-h {
    background: linear-gradient(90deg, #ff5e8c 0%, #ff8b6e 100%);
    border: 2px solid #0d1f6b;
    border-radius: 8px;
    padding: 8px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.bd-pl-card-arcade-number,
.bd-pl-card-arcade-pos {
    font-family: var(--display, 'Press Start 2P', monospace);
    font-size: 1.4rem;
    color: var(--sss-yellow, #FFDC1F);
    text-shadow: 2px 2px 0 #0d1f6b;
    line-height: 1;
    font-weight: normal;
    display: flex;
    align-items: center;
}
.bd-pl-card-arcade-number { justify-content: flex-start; }
.bd-pl-card-arcade-pos {
    font-size: 1.2rem;
    justify-content: flex-end;
}
/* Marco foto: fondo cream tipo trading card vintage */
.bd-pl-card-arcade-photo {
    background: #faf3e3;
    border: 2px solid #0d1f6b;
    border-radius: 8px;
    margin-top: 8px;
    padding: 6px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.bd-pl-card-arcade-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.bd-pl-card-arcade-photo-empty {
    font-size: 4rem;
    color: #ccc;
}
/* Banner amarillo con nombre (h1 semántico) — superpuesto al marco foto */
.bd-pl-card-arcade-name {
    background: linear-gradient(180deg, #FFDC1F 0%, #f5b800 100%);
    color: #1939B7;
    border: 2px solid #0d1f6b;
    border-radius: 8px;
    text-align: center;
    margin: -14px 12px 6px;
    padding: 7px 8px;
    font-family: var(--display, 'Press Start 2P', monospace);
    font-size: 0.85rem;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Grid 2×2 stats con íconos */
.bd-pl-card-arcade-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 4px;
}
.bd-pl-card-arcade-stat {
    background: #fafafa;
    border: 2px solid #0d1f6b;
    border-radius: 6px;
    padding: 5px 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
}
.bd-pl-card-arcade-stat-ico {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.bd-pl-card-arcade-stat-val {
    font-family: var(--display, 'Press Start 2P', monospace);
    font-size: 0.6rem;
    color: #1939B7;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .bd-pl-card-arcade {
        max-width: 250px;
        margin: 0 auto;
    }
    .bd-pl-card-arcade-name {
        font-size: 0.7rem;
    }
    .bd-pl-card-arcade-number,
    .bd-pl-card-arcade-pos {
        font-size: 1.1rem;
    }
}

/* ════════ VARIANTE COMPACT — para grids de plantel (4-6 por fila) ════════
   Sin stats, borde y sombra más finos, header con alineación corregida,
   nombre amarillo con margen balanceado (sin overlap negativo). */
.bd-pl-card-arcade--compact {
    max-width: 180px;
    border: 3px solid #0d1f6b;                /* más fino que base 4px */
    border-radius: 14px;
    padding: 6px;
    box-shadow: 2px 2px 0 #0d1f6b, 0 0 0 1px rgba(255,255,255,0.08) inset;
    text-decoration: none;
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bd-pl-card-arcade--compact:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #0d1f6b;
}
/* Inner como flex column con gap uniforme → todos los elementos quedan
   perfectamente espaciados, sin overlaps ni asimetrías. */
.bd-pl-card-arcade--compact .bd-pl-card-arcade-inner {
    border-radius: 8px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 7px;                                 /* mismo espacio entre todos */
}
/* Header: grid 2 col para forzar alineación vertical baseline-free */
.bd-pl-card-arcade--compact .bd-pl-card-arcade-h {
    padding: 6px 10px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border-width: 2px;
    margin: 0;
}
.bd-pl-card-arcade--compact .bd-pl-card-arcade-number {
    font-size: 0.85rem;
    text-shadow: 1px 1px 0 #0d1f6b;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.bd-pl-card-arcade--compact .bd-pl-card-arcade-pos {
    font-size: 0.75rem;
    text-shadow: 1px 1px 0 #0d1f6b;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.bd-pl-card-arcade--compact .bd-pl-card-arcade-photo {
    padding: 4px;
    border-radius: 5px;
    border-width: 2px;
    margin: 0;                                /* gap maneja todo */
}
/* Nombre amarillo: sin margins, el gap del inner lo posiciona */
.bd-pl-card-arcade--compact .bd-pl-card-arcade-name {
    font-size: 0.62rem;
    padding: 6px 6px;
    margin: 0;                                /* gap maneja todo */
    border-radius: 5px;
    border-width: 2px;
    text-align: center;
}
/* Stats ocultos en compact */
.bd-pl-card-arcade--compact .bd-pl-card-arcade-stats {
    display: none;
}

/* Grid container para múltiples trading cards en fila */
.bd-ent-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
    justify-items: center;
}
@media (max-width: 480px) {
    .bd-ent-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
    }
    .bd-pl-card-arcade--compact {
        max-width: 150px;
    }
}

/* ════════ MATCH CARDS — diseño limpio sin cajitas innecesarias ════════
   - Borde NEGRO (no azul)
   - Fondo blanco simple
   - Date sin caja amarilla, solo texto cobalto
   - Teams VERTICAL (home arriba, VS centro, away abajo) → nombres completos
   - VS solo texto rosa SSSD, sin caja
   Scoped a .bd-entity-outer para no leak. */
.bd-entity-outer .bd-team-fix-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.2rem;                                     /* gap generoso entre cards */
    margin-top: 0.8rem;
}
.bd-entity-outer .bd-cal-match {
    background: #ffffff;
    border: 2px solid #111827;                       /* negro real (no azul) */
    border-radius: 10px;
    box-shadow: 3px 3px 0 #111827;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
/* Header: date arriba, venue abajo (sin truncar) */
.bd-entity-outer .bd-cal-match-h {
    display: flex;
    flex-direction: column;
    align-items: center;                             /* CENTRADO */
    gap: 0.35rem;
    padding-bottom: 0.7rem;
    border-bottom: 1.5px dashed rgba(17, 24, 39, 0.18);
    text-align: center;
}
.bd-entity-outer .bd-cal-match-time {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    color: var(--sss-pink, #FF4FCB);                 /* magenta SSSD, sin caja */
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
}
.bd-entity-outer .bd-cal-match-round {
    font-size: 0.78rem;
    color: rgba(17, 24, 39, 0.7);
    text-align: center;
    white-space: normal;                              /* SIN truncar — wrap si hace falta */
    line-height: 1.2;
}
/* Teams: VERTICAL para que los nombres se vean enteros */
.bd-entity-outer .bd-cal-match-teams {
    display: grid;
    grid-template-areas:
        "home"
        "vs"
        "away";
    gap: 0.4rem;
    align-items: center;
}
.bd-entity-outer .bd-cal-match-team-home { grid-area: home; }
.bd-entity-outer .bd-cal-match-team-away { grid-area: away; }
.bd-entity-outer .bd-cal-match-vs        { grid-area: vs; }
.bd-entity-outer .bd-cal-match-team {
    display: flex;
    align-items: center;
    justify-content: center;                         /* CENTRADO horizontal */
    gap: 0.6rem;
    font-size: 1rem;
    color: #111827;
}
.bd-entity-outer .bd-cal-match-team strong {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
    /* SIN truncar — nombres completos */
}
.bd-entity-outer .bd-cal-match-team img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
}
/* VS: solo texto, sin caja, sin border, sin nada */
.bd-entity-outer .bd-cal-match-vs {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.6rem;
    color: var(--sss-pink, #FF4FCB);
    text-align: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    text-shadow: none;
    letter-spacing: 2px;
    opacity: 0.85;
}

/* ════════ RIVALES DEL GRUPO — cards más grandes con tipografía generosa ════ */
.bd-entity-outer .bd-ent-rivals.bd-ent-players-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
    margin-top: 0.8rem;
}
.bd-entity-outer .bd-ent-rivals .bd-ent-pl-card {
    padding: 1.1rem 1.2rem;
    gap: 1rem;
    border: 2px solid #111827;                       /* negro real */
    box-shadow: 3px 3px 0 #111827;
    border-radius: 10px;
}
.bd-entity-outer .bd-ent-rivals .bd-ent-pl-card img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.bd-entity-outer .bd-ent-rivals .bd-ent-pl-name {
    font-size: 1.15rem;                              /* nombre país GRANDE */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111827;
    overflow: visible;                               /* sin truncar */
    white-space: normal;
    line-height: 1.15;
    margin-bottom: 0.25rem;
}
.bd-entity-outer .bd-ent-rivals .bd-ent-pl-stats {
    font-size: 0.85rem;
    color: rgba(17, 24, 39, 0.8);
    white-space: nowrap;                              /* sin wrap feo */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ════════ BANNER + TABS = UNA SOLA CAJA ════════
   El wrapper .bd-ent-bantabs tiene TODO el visual (border, shadow, background,
   gradients). Banner y tabs adentro son solo contenido sin estilo de caja.
   Esto elimina cualquier seam visible y la sombra es 100% continua. */
.bd-ent-bantabs {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(255,220,31,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 100%, rgba(255,79,203,0.14) 0%, transparent 50%),
        rgba(20, 44, 145, 0.82);
    border: 3px solid var(--line);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 4px 4px 0 var(--line);
    overflow: hidden;
    position: relative;
}
.bd-ent-bantabs::before {
    /* Scanlines arcade — sobre todo el wrapper, continuas banner→tabs */
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(0deg,
        transparent 0, transparent 35px,
        rgba(255,255,255,0.020) 35px, rgba(255,255,255,0.020) 36px);
    pointer-events: none;
    z-index: 1;
}

/* Banner y tabs DENTRO del wrapper — sin bordes ni sombras propias */
.bd-ent-bantabs > .bd-ent-banner,
.bd-ent-bantabs > .bd-ent-tabs {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    position: relative;
    z-index: 2;          /* arriba de las scanlines */
}

/* Banner solo: padding + color de texto */
.bd-ent-banner {
    padding: 0.9rem 1.4rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* ── VARIANTE: banner compacto (menos alto) ──
   Útil para entidades cuando el logo grande del club hace de héroe. */
.bd-ent-banner-compact {
    padding: 0.45rem 1.1rem;
}
.bd-ent-banner-compact .bd-ent-banner-title {
    font-size: 1.05rem;
    margin-bottom: 0.1rem;
    line-height: 1.15;
}
.bd-ent-banner-compact .bd-ent-banner-sub {
    font-size: 0.72rem;
    margin: 0;
}
.bd-ent-banner-compact .bd-ent-banner-eyebrow {
    font-size: 0.6rem;
    margin-bottom: 0.15rem;
}

/* ── VARIANTE: logo gigante de fondo al NIVEL DEL WRAPPER (banner + tabs) ──
   .bd-ent-bantabs-bg-logo se monta como hijo directo de .bd-ent-bantabs y se
   extiende detrás del banner Y los tabs. Ocupa ~1/3 derecho, asomado/cortado
   por el borde derecho, y se desvanece hacia la izquierda con mask gradient. */
.bd-ent-bantabs.has-bg-logo {
    min-height: 90px;
}
.bd-ent-bantabs-bg-logo {
    position: absolute;
    top: -20px;
    bottom: -20px;
    right: 10px;
    width: 44%;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    opacity: 0.42;
    /* Fade del 0% (izq) → 100% (der). */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
    pointer-events: none;
    z-index: 1;                              /* detrás del banner Y los tabs */
    image-rendering: pixelated;
    filter: contrast(1.15) saturate(1.15);
}
/* Banner y tabs por encima del logo de fondo */
.bd-ent-bantabs.has-bg-logo > .bd-ent-banner,
.bd-ent-bantabs.has-bg-logo > .bd-ent-tabs {
    position: relative;
    z-index: 2;
}
/* VARIANTE: bandera de país (rectangular horizontal, no cuadrada como logo).
   - A tope al borde derecho (right: 0).
   - background-size: cover llena toda el área.
   - image-rendering: pixelated → al escalar la w320 a ~700px queda pixelart. */
.bd-ent-bantabs-bg-flag {
    width: 50%;
    right: 0;                                /* a tope al borde derecho */
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    image-rendering: pixelated;              /* estética pixelart SSSD */
    image-rendering: crisp-edges;            /* fallback Firefox */
    filter: saturate(1.25) contrast(1.05);
}

/* VARIANTE: banner con título XL (sin eyebrow → más espacio para el nombre).
   Centramos verticalmente el bloque entero (título + sub) respecto al banner. */
.bd-ent-banner-xl {
    /* Padding asimétrico: la fuente Press Start 2P se renderiza alta en su
       caja de línea, dejando espacio visual abajo. Compensamos con más
       padding-top que padding-bottom → texto queda ópticamente centrado. */
    padding-top: 0.85rem;
    padding-bottom: 0.55rem;
}
.bd-ent-banner-xl .bd-ent-banner-inner {
    align-items: center;
    min-height: 0;                           /* sin forzar altura extra */
}
.bd-ent-banner-xl .bd-ent-banner-info {
    display: flex;
    flex-direction: column;
    justify-content: center;                 /* centra título+sub como bloque */
    gap: 0.25rem;
}
.bd-ent-banner-xl .bd-ent-banner-title {
    font-size: 1.9rem;
    line-height: 1;                          /* line-height = 1 → sin gap visual top/bottom */
    margin: 0;                               /* sin margen heredado de h1 */
    letter-spacing: 0.5px;
}
.bd-ent-banner-xl .bd-ent-banner-sub {
    font-size: 0.82rem;
    line-height: 1.2;
    margin: 0;                               /* sin margen heredado de p */
}
@media (max-width: 640px) {
    .bd-ent-banner-xl .bd-ent-banner-title {
        font-size: 1.4rem;
    }
}

/* Responsive: en pantallas chicas el logo se achica para no comerse el texto */
@media (max-width: 640px) {
    .bd-ent-bantabs-bg-logo {
        width: 45%;
        opacity: 0.4;
    }
    .bd-ent-bantabs-bg-flag {
        width: 55%;
        opacity: 0.45;
    }
}
/* (scanlines del banner se movieron a .bd-ent-bantabs::before) */
.bd-ent-banner-inner {
    display: flex;
    gap: 1rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.bd-ent-banner-logo {
    width: 70px; height: 70px;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    border: 3px solid var(--sss-yellow, #FFDC1F);
    object-fit: contain;
    image-rendering: pixelated;
}
.bd-ent-banner-info { flex: 1; }
.bd-ent-banner-eyebrow {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    color: var(--sss-yellow, #FFDC1F);
    letter-spacing: 2px;
    margin-bottom: 0.4rem;
    display: inline-block;
    text-shadow: 2px 2px 0 var(--line);
}
.bd-ent-banner-title {
    font-family: var(--display, 'Press Start 2P');
    font-size: 1.3rem;
    line-height: 1.3;
    margin: 0 0 0.3rem;
    color: #fff;
    text-shadow: 3px 3px 0 var(--sss-pink, #FF4FCB);
}
.bd-ent-banner-sub {
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.85rem;
    margin: 0;
    color: rgba(255,255,255,0.92);
}
.bd-ent-banner-sub a { color: var(--sss-yellow); text-decoration: underline; }

/* Tabs (dentro del wrapper .bd-ent-bantabs) — solo layout, sin estilo de caja */
.bd-ent-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0.4rem;
    overflow-x: auto;
}
.bd-ent-tab {
    flex: 1;
    min-width: 140px;
    padding: 0.7rem 0.9rem;
    background: rgba(255,255,255,0.85);    /* tab semi-transparente */
    border: 2px solid var(--line);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: var(--line);
    margin: 0.15rem;
    transition: all 0.1s;
    box-shadow: 2px 2px 0 var(--line);
    text-transform: uppercase;
}
.bd-ent-tab:hover {
    background: var(--sss-yellow, #FFDC1F);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--line);
}
.bd-ent-tab.is-active {
    /* Cobalt SUAVE (semi-transparente) — no intenso como en el Mundial */
    background:
        linear-gradient(135deg, rgba(13,31,107,0.88), rgba(25,57,183,0.82));
    color: var(--sss-yellow);
    border-color: var(--sss-cobalt-d);
    box-shadow: inset 2px 2px 0 rgba(0,0,0,0.25), 2px 2px 0 var(--line);
    text-shadow: 2px 2px 0 rgba(199,19,122,0.85);
}

/* Mostrar/ocultar tab content */
.bd-ent-tab-content { display: none; }
.bd-ent-tab-content.is-active { display: block; }


.bd-entity-outer {
    max-width: var(--container-max, 1400px);
    margin: 0 auto;
    padding: 1rem var(--container-pad, 1.5rem) 3rem;
    display: flex; flex-direction: column; gap: 1.2rem;
}

/* ════════ HERO ════════ */
.bd-ent-hero {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(255,220,31,0.16) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(255,79,203,0.20) 0%, transparent 55%),
        linear-gradient(135deg, var(--sss-cobalt-d, #0D1F6B), var(--sss-cobalt, #1939B7));
    border: 3px solid var(--line);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 4px 4px 0 var(--line);
    padding: 1.4rem 1.6rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.bd-ent-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(0deg,
        transparent 0, transparent 35px,
        rgba(255,255,255,0.025) 35px, rgba(255,255,255,0.025) 36px);
    pointer-events: none;
}
.bd-ent-hero-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem; align-items: center;
    position: relative; z-index: 1;
}

.bd-ent-photo {
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 4px solid var(--sss-yellow, #FFDC1F);
    object-fit: cover;
    background: var(--sss-cobalt-d);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
    /* Pixel-art look (SSSD vibe) — sin blur, mosaico crisp */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: contrast(1.05) saturate(1.1);
}
/* Foto PROCESADA estilo FIFA card (fondo color camiseta del jugador) */
.bd-ent-photo-wrap {
    width: 160px; height: 160px;
    border-radius: 12px;            /* card rectangular suave, no círculo */
    border: 5px solid var(--sss-yellow, #FFDC1F);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: var(--sss-cobalt-d);
}
.bd-ent-photo-trans {
    width: 100%; height: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    object-fit: cover;
    object-position: center 20%;     /* foco en la cara */
    filter: contrast(1.08) saturate(1.15);
    image-rendering: pixelated;
}
.bd-ent-pl-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.bd-ent-photo-logo {
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    object-fit: contain;
}

.bd-ent-eyebrow {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    color: var(--sss-yellow, #FFDC1F);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 0 var(--line);
}
.bd-ent-name {
    font-family: var(--display, 'Press Start 2P');
    font-size: 1.4rem; line-height: 1.4;
    margin: 0 0 0.4rem;
    color: #fff;
    text-shadow: 3px 3px 0 var(--sss-pink, #FF4FCB);
}
.bd-ent-sub {
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.85rem;
    margin: 0;
    color: rgba(255,255,255,0.92);
    line-height: 1.5;
}
.bd-ent-sub a {
    color: var(--sss-yellow, #FFDC1F);
    text-decoration: underline;
}
.bd-ent-career {
    font-size: 0.75rem;
    margin: 0.3rem 0 0;
    color: rgba(255,255,255,0.7);
    font-family: var(--body, 'JetBrains Mono');
}

/* KPIs */
.bd-ent-kpis {
    display: flex;
    gap: 0.7rem;
}
.bd-ent-kpi {
    background: #ffffff;
    border: 2px solid #111827;                       /* negro real */
    border-radius: 6px;
    padding: 0.8rem 1rem;
    text-align: center;
    min-width: 90px;
    box-shadow: 2px 2px 0 #111827;
}
.bd-ent-kpi .val {
    font-family: var(--display, 'Press Start 2P');
    font-size: 1.1rem;
    color: var(--sss-cobalt, #1939B7);                /* cobalto SSSD */
    display: block;
    line-height: 1;
    margin-bottom: 0.35rem;
}
.bd-ent-kpi .lbl {
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.6rem;
    color: rgba(17, 24, 39, 0.7);                     /* dark text legible */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ════════ BODY ════════ */
.bd-ent-body {
    display: flex; flex-direction: column;
    gap: 1.8rem;                                  /* MÁS espacio entre cards principales */
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD GRUPO — Super-card con tabla left + calendario right
   ════════════════════════════════════════════════════════════════════════ */

/* Card compact: menos padding vertical entre textos */
.bd-ent-card.bd-ent-card--compact { padding: 1.1rem 1.3rem; }
.bd-ent-card-title {
    margin: 0 0 0.35rem 0;
    line-height: 1.2;
}
.bd-ent-card-sub {
    margin: 0 0 0.9rem 0;
    font-size: 0.9rem;
    line-height: 1.3;
    color: rgba(17, 24, 39, 0.75);
}

/* Layout 2 cols: tabla+destacados / calendario */
.bd-grupo-card { padding: 1.2rem 1.3rem; }
.bd-grupo-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
    gap: 1.2rem;
    margin-top: 0.6rem;
}
@media (max-width: 768px) {
    .bd-grupo-layout { grid-template-columns: 1fr; }
}
.bd-grupo-left, .bd-grupo-right {
    display: flex; flex-direction: column;
    gap: 1.4rem;                                  /* separación entre secciones */
}
.bd-grupo-section {
    display: flex; flex-direction: column;
    gap: 0.5rem;
}
/* KPIs en grid 4 cols (en el dashboard reducido) */
.bd-ent-kpis--grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.bd-ent-kpis--grid .bd-ent-kpi {
    min-width: 0;
    padding: 0.6rem 0.5rem;
}
.bd-ent-kpis--grid .bd-ent-kpi .val {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.bd-ent-kpis--grid .bd-ent-kpi .lbl {
    font-size: 0.52rem;
}
@media (max-width: 500px) {
    .bd-ent-kpis--grid { grid-template-columns: repeat(4, 1fr); }
}
.bd-grupo-h3 {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.7rem;
    color: var(--sss-pink, #FF4FCB);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* TABLA DEL GRUPO */
.bd-grupo-table-wrap {
    background: #ffffff;
    border: 2px solid #111827;
    border-radius: 8px;
    box-shadow: 2px 2px 0 #111827;
    padding: 0.8rem 0.9rem;
}
.bd-grupo-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.78rem;
}
.bd-grupo-table thead th {
    text-align: left;
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.5rem;
    color: rgba(17, 24, 39, 0.6);
    padding: 0.3rem 0.4rem;
    border-bottom: 1.5px solid rgba(17, 24, 39, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bd-grupo-table tbody td {
    padding: 0.45rem 0.4rem;
    border-bottom: 1px dashed rgba(17, 24, 39, 0.08);
    color: #111827;
    line-height: 1.1;
}
.bd-grupo-table tbody tr:last-child td { border-bottom: none; }
.bd-grupo-table-self td {
    background: rgba(255, 220, 31, 0.18);          /* highlight equipo actual amarillo suave */
    font-weight: 700;
}
.bd-grupo-team-link {
    display: inline-flex; align-items: center;
    gap: 0.45rem;
    color: #111827; text-decoration: none;
    white-space: nowrap;
}
.bd-grupo-team-link:hover { color: var(--sss-cobalt, #1939B7); }
.bd-grupo-team-link img {
    image-rendering: pixelated;
    flex-shrink: 0;
    object-fit: contain;
}

/* JUGADORES DESTACADOS — lista vertical compacta */
.bd-grupo-featured-wrap { /* sin border, se ve más limpio */ }
.bd-grupo-featured-list {
    display: flex; flex-direction: column;
    gap: 0.45rem;
}
.bd-grupo-featured {
    display: flex; align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    background: #ffffff;
    border: 2px solid #111827;
    border-radius: 8px;
    box-shadow: 2px 2px 0 #111827;
    text-decoration: none;
    color: #111827;
    transition: transform 0.12s ease;
}
.bd-grupo-featured:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #111827;
}
.bd-grupo-featured img {
    width: 38px; height: 38px;
    object-fit: cover;
    border-radius: 5px;
    image-rendering: pixelated;
    flex-shrink: 0;
    background: #faf3e3;
}
.bd-grupo-featured-empty {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    background: rgba(17,24,39,0.08);
    border-radius: 5px;
    flex-shrink: 0;
}
.bd-grupo-featured-info {
    display: flex; flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.bd-grupo-featured-name {
    font-weight: 700;
    font-size: 0.88rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #111827;
}
.bd-grupo-featured-stats {
    font-size: 0.72rem;
    color: rgba(17, 24, 39, 0.7);
    font-family: var(--body, 'JetBrains Mono');
}

/* CALENDARIO TIPO LISTA — cada partido es una row compacta */
.bd-grupo-fix-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 0.5rem;
}
.bd-grupo-fix-row {
    background: #ffffff;
    border: 2px solid #111827;
    border-radius: 8px;
    box-shadow: 2px 2px 0 #111827;
    padding: 0.6rem 0.9rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "when teams"
        "when venue";
    gap: 0.2rem 0.9rem;
    align-items: center;
}
.bd-grupo-fix-row.is-finished { opacity: 0.85; }
.bd-grupo-fix-row { padding: 0; min-height: 60px; display: flex; align-items: stretch; }
.bd-grupo-fix-link {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-areas:
        "when teams"
        "when venue";
    gap: 0.3rem 1rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    flex: 1;
    width: 100%;
}
.bd-grupo-fix-link:hover {
    background: rgba(255, 220, 31, 0.12);
}
.bd-grupo-fix-link .bd-grupo-fix-when { grid-area: when; }
.bd-grupo-fix-link .bd-grupo-fix-teams { grid-area: teams; }
.bd-grupo-fix-link .bd-grupo-fix-venue { grid-area: venue; }
.bd-grupo-fix-when {
    grid-area: when;
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1.5px dashed rgba(17,24,39,0.15);
    padding-right: 0.9rem;
    min-width: 75px;
}
.bd-grupo-fix-date {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    color: var(--sss-pink, #FF4FCB);
    line-height: 1.1;
    text-align: center;
}
.bd-grupo-fix-time {
    font-size: 0.75rem;
    color: rgba(17,24,39,0.7);
    margin-top: 0.2rem;
}
.bd-grupo-fix-teams {
    grid-area: teams;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #111827;
}
.bd-grupo-fix-home, .bd-grupo-fix-away {
    display: flex; align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.bd-grupo-fix-home {
    justify-content: flex-end;
    text-align: right;
}
.bd-grupo-fix-home img { order: 2; }
.bd-grupo-fix-away img { order: 0; }
.bd-grupo-fix-home img, .bd-grupo-fix-away img {
    image-rendering: pixelated;
    object-fit: contain;
    flex-shrink: 0;
}
.bd-grupo-fix-home span, .bd-grupo-fix-away span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.bd-grupo-fix-vs {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.5rem;
    color: rgba(17,24,39,0.4);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.bd-grupo-fix-score {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.75rem;
    color: var(--sss-cobalt, #1939B7);
    padding: 2px 7px;
    background: rgba(25, 57, 183, 0.1);
    border-radius: 4px;
}
.bd-grupo-fix-venue {
    grid-area: venue;
    font-size: 0.7rem;
    color: rgba(17,24,39,0.55);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bd-ent-card {
    /* Multi-layer: gradient azul suave con accents sutiles de cobalto + lavanda */
    background:
        radial-gradient(ellipse 70% 60% at 10% 0%, rgba(25, 57, 183, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 100%, rgba(106, 75, 160, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #eef3ff 0%, #d8e3f4 100%);
    backdrop-filter: blur(3px);
    border: 3px solid var(--line);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 4px 4px 0 var(--line);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
/* Scanlines sutiles sobre el card (consistente con banner SSSD) */
.bd-ent-card::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(0deg,
        transparent 0, transparent 38px,
        rgba(13, 31, 107, 0.03) 38px, rgba(13, 31, 107, 0.03) 39px);
    pointer-events: none;
    z-index: 0;
}
.bd-ent-card > * { position: relative; z-index: 1; }
.bd-ent-card h2 {
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: var(--sss-pink-d, #C7137A);
    margin: 0 0 0.8rem;
    text-transform: uppercase;
}
.bd-ent-card h3 {
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.95rem;
    color: var(--sss-cobalt, #1939B7);
    margin: 1rem 0 0.6rem;
}
.bd-ent-card p {
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--line);
    margin: 0 0 0.8rem;
}

/* Tablas */
.bd-ent-table-wrap {
    overflow-x: auto;
    margin: 0 -0.5rem;
}
.bd-ent-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.8rem;
}
.bd-ent-table thead th {
    text-align: left;
    padding: 0.6rem;
    background: var(--sss-cobalt, #1939B7);
    color: #fff;
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.6rem;
    letter-spacing: 1px;
}
.bd-ent-table tbody td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px dashed var(--line-soft, rgba(0,0,0,0.12));
}
.bd-ent-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
.bd-ent-table tbody tr:hover { background: rgba(255,220,31,0.12); }
.bd-ent-table td a {
    color: var(--sss-cobalt, #1939B7);
    font-weight: 600;
}

/* Lista de trofeos */
.bd-ent-list {
    list-style: none; padding: 0; margin: 0;
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.85rem;
}
.bd-ent-list li {
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--line-soft, rgba(0,0,0,0.12));
}
.bd-muted { color: rgba(0,0,0,0.5); font-size: 0.8em; }

/* Grid 2 cols (trofeos: campeón / subcampeón) */
.bd-ent-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Timeline transfers */
.bd-ent-timeline {
    list-style: none; padding: 0; margin: 0;
    font-family: var(--body, 'JetBrains Mono');
    font-size: 0.85rem;
}
.bd-ent-timeline li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--line-soft, rgba(0,0,0,0.12));
    align-items: center;
}
.bd-ent-tl-date {
    font-family: var(--display);
    font-size: 0.55rem;
    color: var(--sss-cobalt);
    letter-spacing: 1px;
    white-space: nowrap;
}
.bd-ent-tl-arrow strong { color: var(--sss-pink-d, #C7137A); margin: 0 0.4rem; }
.bd-ent-tl-type {
    font-size: 0.7rem;
    color: var(--sss-yellow-d, #E5A800);
    background: rgba(255,220,31,0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}

/* Grid de jugadores (selección y club) */
.bd-ent-players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.7rem;
    margin-top: 1rem;
}
.bd-ent-pl-card {
    display: flex; gap: 0.7rem;
    align-items: center;
    padding: 0.7rem;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    color: var(--line);
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 2px 2px 0 var(--line);
}
.bd-ent-pl-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--line);
    text-decoration: none;
}
.bd-ent-pl-card img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sss-cobalt);
    background: var(--sss-cobalt-d);
    flex-shrink: 0;
}
.bd-ent-pl-photo-empty {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--sss-cobalt);
    color: var(--sss-yellow);
    font-size: 1.5rem;
    flex-shrink: 0;
}
.bd-ent-pl-info {
    display: flex; flex-direction: column;
    flex: 1; min-width: 0;
}
.bd-ent-pl-name {
    font-weight: 700;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--body, 'JetBrains Mono');
}
.bd-ent-pl-number {
    display: inline-block;
    background: var(--sss-yellow, #FFDC1F);
    color: var(--sss-cobalt, #1939B7);
    font-family: var(--display, 'Press Start 2P');
    font-size: 0.55rem;
    padding: 2px 4px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: 2px;
}
.bd-ent-pl-meta {
    font-size: 0.7rem;
    color: rgba(0,0,0,0.55);
    font-family: var(--body, 'JetBrains Mono');
}
.bd-ent-pl-stats {
    font-size: 0.7rem;
    color: var(--sss-cobalt, #1939B7);
    font-family: var(--body, 'JetBrains Mono');
}
.bd-ent-pl-stats strong { color: var(--sss-pink-d, #C7137A); }

/* Footer source */
.bd-ent-source {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(0,0,0,0.5);
    margin: 1rem 0 0;
    font-family: var(--body, 'JetBrains Mono');
}
.bd-ent-source a {
    color: var(--sss-cobalt, #1939B7);
}

/* Responsive */
@media (max-width: 720px) {
    .bd-ent-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .bd-ent-photo { margin: 0 auto; }
    .bd-ent-kpis { justify-content: center; flex-wrap: wrap; }
    .bd-ent-grid-2 { grid-template-columns: 1fr; }
    .bd-ent-name { font-size: 1rem; }
    .bd-ent-timeline li { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Dark mode */
body.bd-dark .bd-ent-card { background: #15102a; color: #f0eaff; }
body.bd-dark .bd-ent-card p { color: rgba(255,255,255,0.85); }
body.bd-dark .bd-ent-pl-card { background: #211a3d; color: #fff; }
body.bd-dark .bd-ent-pl-name { color: #fff; }
body.bd-dark .bd-ent-list li { border-color: rgba(255,255,255,0.1); }
body.bd-dark .bd-ent-table tbody td { border-color: rgba(255,255,255,0.1); }
body.bd-dark .bd-ent-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }

/* ════════════════════════════════════════════════════════════════════════
   HISTORIA CENTENARIA — bloque H2H all-time desde 1872
   ════════════════════════════════════════════════════════════════════════ */
.bd-match-hist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.2rem 0;
}
.bd-match-hist-stat {
    background: #f3f4f6;
    border: 2px solid #111827;
    border-radius: 6px;
    padding: 0.9rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.bd-match-hist-stat-num {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    color: var(--sss-cobalt, #1939B7);
    letter-spacing: 0.5px;
}
.bd-match-hist-stat-lbl {
    font-size: 0.72rem;
    color: #4b5563;
    line-height: 1.3;
}
.bd-match-hist-stat-wc {
    background: linear-gradient(135deg, #fff7d6 0%, #ffdc1f 100%);
    border-color: #b8860b;
}
.bd-match-hist-stat-wc .bd-match-hist-stat-num { color: #7a5800; }
.bd-match-hist-stat-wc .bd-match-hist-stat-lbl { color: #5a4000; font-weight: 600; }
.bd-match-hist-subtitle {
    margin: 1.4rem 0 0.6rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    color: var(--sss-pink, #FF4FCB);
    letter-spacing: 0.5px;
}
body.bd-dark .bd-match-hist-stat { background: #1f1a3a; color: #fff; border-color: #4b5563; }
body.bd-dark .bd-match-hist-stat-lbl { color: #cbd5e1; }
body.bd-dark .bd-match-hist-stat-num { color: var(--sss-yellow, #FFDC1F); }

/* ════════════════════════════════════════════════════════════════════════
   HISTORIA MUNDIALISTA — sección /seleccion/{pais}/
   ════════════════════════════════════════════════════════════════════════ */
.bd-team-history { margin-top: 1.6rem; }
.bd-team-hist-kpis { margin: 1rem 0 1.4rem; }

.bd-team-hist-trophy {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.3rem;
    background: linear-gradient(135deg, #FFDC1F 0%, #f5b800 100%);
    border: 3px solid #7a5800;
    border-radius: 8px;
    margin: 1.2rem 0;
    color: #2a1f00;
    font-size: 1.05rem;
}
.bd-team-hist-trophy-emoji { font-size: 2.5rem; line-height: 1; }
.bd-team-hist-trophy-sub { display: block; font-size: 0.85rem; color: #5a4000; margin-top: 0.2rem; }
.bd-team-hist-trophy-sub2 {
    background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 100%);
    border-color: #4b5563;
    color: #1f2937;
}

.bd-team-hist-subtitle {
    margin: 1.6rem 0 0.7rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.82rem;
    color: var(--sss-pink, #FF4FCB);
    letter-spacing: 0.5px;
}

.bd-team-hist-timeline {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-bottom: 1rem;
}
.bd-team-hist-year {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    background: #e5e7eb;
    border: 1.5px solid #111827;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: #1f2937;
    font-weight: 600;
}
.bd-team-hist-year.is-champ { background: linear-gradient(135deg, #ffe87a 0%, #ffc107 100%); color: #5a3500; border-color: #b8860b; }
.bd-team-hist-year.is-ru    { background: linear-gradient(135deg, #f3f4f6 0%, #cbd5e1 100%); color: #1f2937; }
.bd-team-hist-year.is-3rd   { background: linear-gradient(135deg, #fbbf77 0%, #f59e0b 100%); color: #5a3500; }

.bd-team-hist-scorers {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}
.bd-team-hist-scorers li {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.9rem;
    background: #f9fafb;
    border-left: 4px solid var(--sss-cobalt, #1939B7);
    border-radius: 0 4px 4px 0;
}
.bd-team-hist-scorers li:first-child { border-left-color: #FFDC1F; }
.bd-team-hist-scorer-rank {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: var(--sss-cobalt, #1939B7);
}
.bd-team-hist-scorer-name { font-weight: 600; }
.bd-team-hist-scorer-stat { font-size: 0.82rem; color: #4b5563; }
.bd-team-hist-scorer-stat strong { color: var(--sss-pink, #FF4FCB); }

.bd-team-hist-marks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.bd-team-hist-mark {
    padding: 0.7rem 0.9rem;
    background: #f3f4f6;
    border-radius: 6px;
    border: 1.5px solid #d1d5db;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.bd-team-hist-mark-lbl {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.bd-team-hist-mark-val { font-size: 0.95rem; }
.bd-team-hist-mark-val em { font-size: 0.82rem; color: #6b7280; font-style: normal; }
.bd-team-hist-source { font-size: 0.72rem; opacity: 0.7; margin-top: 1.4rem; }

body.bd-dark .bd-team-hist-year { background: #1f1a3a; color: #fff; border-color: #4b5563; }
body.bd-dark .bd-team-hist-scorers li { background: #1f1a3a; color: #fff; }
body.bd-dark .bd-team-hist-scorer-stat { color: #cbd5e1; }
body.bd-dark .bd-team-hist-mark { background: #1f1a3a; border-color: #4b5563; }
body.bd-dark .bd-team-hist-mark-lbl { color: #94a3b8; }

/* ════════════════════════════════════════════════════════════════════════
   PÁGINA /mundial-2026/historia/
   ════════════════════════════════════════════════════════════════════════ */
.bd-history-outer { padding-bottom: 2rem; }

.bd-hist-podium {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin-top: 1rem;
}
.bd-hist-podium-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    background: #f3f4f6;
    border-radius: 6px;
    border-left: 4px solid #6b7280;
}
.bd-hist-podium-row.is-gold   { background: linear-gradient(90deg, #fff7d6 0%, #ffe87a 100%); border-left-color: #b8860b; }
.bd-hist-podium-row.is-silver { background: linear-gradient(90deg, #f3f4f6 0%, #cbd5e1 100%); border-left-color: #6b7280; }
.bd-hist-podium-row.is-bronze { background: linear-gradient(90deg, #fbd5a4 0%, #f59e0b 100%); border-left-color: #92400e; }
.bd-hist-podium-rank {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem; text-align: center;
    color: var(--sss-cobalt, #1939B7);
}
.bd-hist-podium-row.is-gold .bd-hist-podium-rank { color: #5a3500; }
.bd-hist-podium-country { font-size: 1.05rem; font-weight: 600; }
.bd-hist-podium-titles { font-size: 0.9rem; }
.bd-hist-podium-titles strong {
    font-family: 'Press Start 2P', monospace;
    color: var(--sss-pink, #FF4FCB);
    font-size: 0.9rem;
}

.bd-hist-editions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.bd-hist-edition {
    background: #fff;
    border: 2px solid #111827;
    border-radius: 8px;
    overflow: hidden;
}
.bd-hist-edition-head {
    background: linear-gradient(135deg, var(--sss-cobalt, #1939B7) 0%, #4F46E5 100%);
    color: #fff;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    justify-content: space-between;
}
.bd-hist-edition-year {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.05rem;
    color: #FFDC1F;
}
.bd-hist-edition-host { font-size: 0.85rem; opacity: 0.95; }
.bd-hist-edition-body { padding: 0.7rem 1rem; }
.bd-hist-edition-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.8rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.bd-hist-edition-row:last-child { border-bottom: none; }
.bd-hist-edition-lbl { font-size: 0.8rem; color: #4b5563; }
.bd-hist-edition-val { font-size: 0.92rem; text-align: right; }
.bd-hist-edition-val em { color: var(--sss-pink, #FF4FCB); font-style: normal; font-weight: 600; }
.bd-hist-edition-row-top { background: #fffbeb; margin: 0.3rem -1rem; padding: 0.5rem 1rem; border: none; }
.bd-hist-edition-row-meta { font-size: 0.8rem; opacity: 0.7; }

body.bd-dark .bd-hist-podium-row { background: #1f1a3a; color: #fff; }
body.bd-dark .bd-hist-edition { background: #1f1a3a; color: #fff; border-color: #4b5563; }
body.bd-dark .bd-hist-edition-lbl { color: #cbd5e1; }
body.bd-dark .bd-hist-edition-row { border-color: rgba(255,255,255,0.08); }
body.bd-dark .bd-hist-edition-row-top { background: rgba(255,220,31,0.08); }

/* ════════════════════════════════════════════════════════════════════════
   CANCHITA PIXEL-ART para alineaciones del partido
   ════════════════════════════════════════════════════════════════════════ */
/* Split SSSD: roster home | CANCHA centro | roster away, fila completa */
.bd-match-pitch-split {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2.6fr minmax(180px, 1fr);
    gap: 1rem;
    margin: 0 0 1.4rem;
    align-items: start;
    grid-column: 1 / -1;
}
.bd-match-pitch-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: flex-start;
    align-items: stretch;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    /* Empuja la cancha 4px para que el aro negro exterior (box-shadow) coincida
       con la línea de arriba de las cards de roster (que usan border 4px) */
    padding-top: 4px;
}

.bd-match-pitch-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0;
}
.bd-match-pitch {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 25 / 12; /* más horizontal: ensancha sin crecer en alto */
    background:
      repeating-linear-gradient(0deg, #15803d 0, #15803d 28px, #166534 28px, #166534 56px);
    border: 4px solid #fff;
    border-radius: 6px;
    box-shadow:
      inset 0 0 0 2px #0f3a1f,
      0 0 0 4px #111827,
      0 4px 14px rgba(0,0,0,0.35);
    overflow: hidden;
    image-rendering: pixelated;
}
/* Línea media */
/* Línea media VERTICAL (horizontal pitch) */
.bd-match-pitch-mid {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 3px;
    background: #fff;
    transform: translateX(-1.5px);
    box-shadow: 0 0 0 1px #0f3a1f;
}
/* Círculo central */
.bd-match-pitch-circle {
    position: absolute;
    top: 50%; left: 50%;
    width: 22%;
    aspect-ratio: 1;
    border: 3px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px #0f3a1f;
}
/* Áreas grandes (penalty box) */
/* Áreas grandes (penalty box) — verticales en los bordes izquierdo/derecho */
.bd-match-pitch-box {
    position: absolute;
    top: 22%;
    height: 56%;
    width: 14%;
    border: 3px solid #fff;
    box-shadow: inset 0 0 0 1px #0f3a1f;
}
.bd-match-pitch-box-top { left: 0; border-left: none; }   /* portería izquierda (home) */
.bd-match-pitch-box-bot { right: 0; border-right: none; } /* portería derecha (away) */
/* Áreas chicas (6-yard box) */
.bd-match-pitch-pen {
    position: absolute;
    top: 36%;
    height: 28%;
    width: 6%;
    border: 3px solid #fff;
    box-shadow: inset 0 0 0 1px #0f3a1f;
}
.bd-match-pitch-pen-top { left: 0; border-left: none; }
.bd-match-pitch-pen-bot { right: 0; border-right: none; }

/* Tokens de jugadores */
.bd-match-pitch-player {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 2;
    cursor: help;
    transition: transform 0.18s ease;
}
.bd-match-pitch-player:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 5; }
.bd-match-pitch-num {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #fff;
    border: 3px solid #111827;
    border-radius: 50%;
    box-shadow: 0 2px 0 #111827, 0 3px 6px rgba(0,0,0,0.35);
    background: var(--sss-cobalt, #1939B7);
    line-height: 1;
}
.bd-match-pitch-player.is-away .bd-match-pitch-num { background: var(--sss-pink, #FF4FCB); }
.bd-match-pitch-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(0,0,0,0.4);
    padding: 1px 4px;
    border-radius: 2px;
    text-align: center;
}

/* Legend bajo la cancha */
.bd-match-pitch-legend {
    display: flex; justify-content: space-around;
    gap: 1rem;
    padding: 0.5rem;
    background: #f3f4f6;
    border-radius: 6px;
}
.bd-match-pitch-legend-team { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.bd-match-pitch-legend-team.is-home strong { color: var(--sss-cobalt, #1939B7); }
.bd-match-pitch-legend-team.is-away strong { color: var(--sss-pink, #FF4FCB); }

/* Info bar bajo la cancha: SIN card de fondo, elementos sueltos */
.bd-match-pitch-info {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 1rem;
    padding: 0.6rem 0.4rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    align-items: center;
}

/* Lados DT */
.bd-match-pitch-info-side {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.bd-match-pitch-info-side.is-away {
    justify-content: flex-end;
    text-align: right;
}
.bd-match-pitch-info-side.is-home { text-align: left; }

.bd-match-pitch-info-coach {
    width: 72px; height: 72px;
    object-fit: cover;
    border: 3px solid #111827;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    background: #f3f4f6;
}
.bd-match-pitch-info-coach-empty {
    display: grid; place-items: center;
    font-size: 2rem;
    color: #9ca3af;
}

/* Centro: estadio — foto arriba + texto debajo */
.bd-match-pitch-info-venue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0;
}

.bd-match-pitch-info-venue-img {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 3px solid #111827;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    background: #f3f4f6;
}
.bd-match-pitch-info-venue-empty {
    display: grid; place-items: center;
    font-size: 2.4rem;
    color: #9ca3af;
}
.bd-match-pitch-info-venue-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
    min-width: 0;
    width: 100%;
}

/* Texto DT */
.bd-match-pitch-info-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    line-height: 1.2;
}
.bd-match-pitch-info-side.is-away .bd-match-pitch-info-text { align-items: flex-end; }

.bd-match-pitch-info-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #6b7280;        /* gris neutro — NO rosado */
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.bd-dark .bd-match-pitch-info-label { color: var(--sss-cyan); }

.bd-match-pitch-info-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
body.bd-dark .bd-match-pitch-info-name { color: #fff; }

.bd-match-pitch-info-formation {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.68rem;
    color: var(--sss-cobalt, #1939B7);
    letter-spacing: 0.05em;
    margin-top: 0.1rem;
}
body.bd-dark .bd-match-pitch-info-formation { color: var(--sss-yellow); }

.bd-match-pitch-info-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
body.bd-dark .bd-match-pitch-info-sub { color: #cbd5e1; }

@media (max-width: 720px) {
    .bd-match-pitch-info { grid-template-columns: 1fr; gap: 0.7rem; padding: 0.7rem; }
    .bd-match-pitch-info-venue { border: none; padding: 0; }
    .bd-match-pitch-info-coach { width: 56px; height: 56px; }
}

/* ═══ ROSTER SSSD (lateral con caritas) ═══ */
.bd-match-roster {
    background: var(--bg-card, #fff);
    border: 4px solid #111827;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.4);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.bd-dark .bd-match-roster { background: #1f1a3a; color: #fff; }

.bd-match-roster-head {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    background: linear-gradient(180deg, var(--sss-cobalt, #1939B7), #0D1F6B);
    color: var(--sss-yellow, #FFDC1F);
    border-bottom: 3px solid #111827;
    text-shadow: 1.5px 1.5px 0 var(--sss-pink-d, #C7137A);
}
.bd-match-roster-head img { border: 1.5px solid #FFDC1F; border-radius: 2px; flex-shrink: 0; }
.bd-match-roster-team {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bd-match-roster-form {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.bd-match-roster-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.bd-match-roster-list li { border-bottom: 1px dashed rgba(0,0,0,0.08); }
.bd-match-roster-list li:last-child { border-bottom: none; }
body.bd-dark .bd-match-roster-list li { border-bottom-color: rgba(255,255,255,0.08); }

/* Subsección "Suplentes" */
.bd-match-roster-subs {
    border-top: 2px solid #111827;
    background: rgba(0,0,0,0.03);
}
body.bd-dark .bd-match-roster-subs { background: rgba(255,255,255,0.04); }
.bd-match-roster-subs-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #6b7280;
    letter-spacing: 0.08em;
    margin: 0;
    padding: 0.5rem 0.55rem 0.35rem;
    text-transform: uppercase;
}
body.bd-dark .bd-match-roster-subs-title { color: var(--sss-cyan); }
.bd-match-roster-list-subs .bd-match-roster-row { opacity: 0.85; }
.bd-match-roster-list-subs .bd-match-roster-row:hover { opacity: 1; }
.bd-match-roster-coach {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--sss-pink, #FF4FCB);
    padding: 0.4rem 0.55rem 0.55rem;
    border-top: 1px dashed rgba(0,0,0,0.1);
    font-weight: 600;
}
body.bd-dark .bd-match-roster-coach { border-top-color: rgba(255,255,255,0.1); }

.bd-match-roster-row {
    appearance: none;
    background: transparent;
    border: none;
    width: 100%;
    display: grid;
    /* face | num | name | badge (fijo, fits 2 emojis) | rating (fijo, derecha) */
    grid-template-columns: 28px 32px 1fr 36px 34px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.5rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    font: inherit;
}
.bd-match-roster-row:hover { background: rgba(255,220,31,0.18); }
.bd-match-roster-row.is-selected {
    background: linear-gradient(90deg, var(--sss-yellow, #FFDC1F), rgba(255,220,31,0.3));
    box-shadow: inset 0 0 0 2px #111827;
}

/* Tints según mood (banda sutil en el fondo del row) */
.bd-match-roster-row.is-mood-goal   { background: linear-gradient(90deg, rgba(255,220,31,0.35), transparent); }
.bd-match-roster-row.is-mood-red    { background: linear-gradient(90deg, rgba(239,68,68,0.25), transparent); }
.bd-match-roster-row.is-mood-assist { background: linear-gradient(90deg, rgba(168,85,247,0.18), transparent); }
.bd-match-roster-row.is-mood-idle   { opacity: 0.65; }

/* Caritas SSSD — animadas */
.bd-match-roster-face {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
    animation: bd-face-bounce 1.8s ease-in-out infinite;
    animation-delay: calc(var(--row-idx, 0) * -0.13s);
    transform-origin: center bottom;
}
@keyframes bd-face-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
@keyframes bd-face-jump {
    0%   { transform: translateY(0)   scale(1); }
    25%  { transform: translateY(-10px) scale(1.25); }
    55%  { transform: translateY(0)    scale(1.1); }
    100% { transform: translateY(0)   scale(1); }
}
@keyframes bd-face-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    25%      { transform: translateX(-2px) rotate(-6deg); }
    75%      { transform: translateX(2px)  rotate(6deg); }
}
@keyframes bd-face-cheer {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%      { transform: translateY(-5px) rotate(-8deg); }
    75%      { transform: translateY(-5px) rotate(8deg); }
}
.bd-match-roster-face.is-goal { animation: bd-face-cheer 0.9s ease-in-out infinite; filter: drop-shadow(0 0 4px #FFDC1F); }
.bd-match-roster-face.is-red  { animation: bd-face-shake 0.55s ease-in-out infinite; }
.bd-match-roster-face.is-yellow { animation-duration: 1.1s; }
.bd-match-roster-face.is-sad  { animation: none; opacity: 0.75; transform: translateY(2px); }
.bd-match-roster-face.is-idle { animation: none; opacity: 0.5; }
.bd-match-roster-face.is-assist { animation-duration: 1.2s; filter: drop-shadow(0 0 3px #a855f7); }
.bd-match-roster-row.is-selected .bd-match-roster-face { animation: bd-face-jump 0.5s ease-out 1; }

.bd-match-roster-num {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.58rem;
    color: #6b7280;
}
body.bd-dark .bd-match-roster-num { color: #cbd5e1; }
.bd-match-roster-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--ink, #111827);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.bd-dark .bd-match-roster-name { color: #fff; }
.bd-match-roster-badge {
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: -1px; /* junta dos emojis para que quepan en 36px */
    text-align: right;
    white-space: nowrap;
}
.bd-match-roster-rating {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--sss-cobalt, #1939B7);
    text-align: right;
    justify-self: end;
}
.bd-match-roster-rating.is-good { color: #15803d; }
.bd-match-roster-rating.is-bad  { color: #b91c1c; }
body.bd-dark .bd-match-roster-rating { color: var(--sss-yellow); }

/* ═══ CARD JUGADOR (legacy, mantengo CSS por compatibilidad) ═══ */
.bd-match-player-card {
    background: var(--bg-card, #fff);
    border: 4px solid #111827;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 0;
    align-self: stretch;
}
body.bd-dark .bd-match-player-card { background: #1f1a3a; color: #fff; }

/* Empty state */
.bd-match-player-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9ca3af;
    padding: 1.5rem;
}
.bd-match-player-empty-icon { font-size: 3rem; margin-bottom: 0.6rem; opacity: 0.5; }
.bd-match-player-empty-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    color: var(--sss-cobalt, #1939B7);
    margin-bottom: 0.3rem;
    line-height: 1.4;
}
.bd-match-player-empty-sub { font-size: 0.85rem; color: #6b7280; }

/* Player loaded state */
.bd-match-player-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}
.bd-match-player-num {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, var(--sss-cobalt, #1939B7), #0D1F6B);
    color: var(--sss-yellow, #FFDC1F);
    font-family: 'Press Start 2P', monospace;
    font-size: 1.3rem;
    border-radius: 8px;
    border: 3px solid #111827;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    text-shadow: 1.5px 1.5px 0 #C7137A;
    flex-shrink: 0;
}
.bd-match-player-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.bd-match-player-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.95rem;
    color: var(--ink, #111827);
    margin: 0;
    line-height: 1.2;
    overflow-wrap: break-word;
}
body.bd-dark .bd-match-player-name { color: #fff; }
.bd-match-player-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #6b7280;
}
.bd-match-player-meta img { width: 16px; height: 16px; object-fit: contain; }
.bd-match-player-pos {
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    color: var(--sss-pink, #FF4FCB);
}

/* Stats grid */
.bd-match-player-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.bd-match-player-stat {
    background: #f3f4f6;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
body.bd-dark .bd-match-player-stat { background: #2a2350; border-color: rgba(255,255,255,0.1); }
.bd-match-player-stat-label {
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bd-match-player-stat-value {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: var(--sss-cobalt, #1939B7);
}
body.bd-dark .bd-match-player-stat-value { color: var(--sss-yellow); }
.bd-match-player-stat.is-rating .bd-match-player-stat-value {
    font-size: 1.1rem;
}
.bd-match-player-stat.is-good .bd-match-player-stat-value { color: #15803d; }
.bd-match-player-stat.is-bad .bd-match-player-stat-value { color: #b91c1c; }

/* Botón cancha = jugador interactivo */
.bd-match-pitch-player {
    appearance: none;
    cursor: pointer;
    font: inherit;
    background: transparent;
    border: none;
    padding: 0;
}
/* Selección: aro AMARILLO circular SÓLO en el círculo del número (no cuadrado) */
.bd-match-pitch-player.is-selected {
    z-index: 10;
}
.bd-match-pitch-player.is-selected .bd-match-pitch-num {
    box-shadow:
        0 0 0 4px var(--sss-yellow, #FFDC1F),
        0 0 0 6px #111827,
        0 2px 0 #111827,
        0 4px 10px rgba(0,0,0,0.4);
    transform: scale(1.05);
}

@media (max-width: 720px) {
    .bd-match-pitch-split { grid-template-columns: 1fr; }
    .bd-match-player-card { min-height: 200px; }
}

/* Banca */
.bd-match-bench-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-top: 1.4rem;
}
@media (max-width: 720px) { .bd-match-bench-grid { grid-template-columns: 1fr; } }
.bd-match-bench-title {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.78rem;
    color: var(--sss-pink, #FF4FCB);
    letter-spacing: 0.3px;
    margin: 0 0 0.5rem;
}
.bd-match-bench-coach { font-family: inherit; font-size: 0.7rem; color: #6b7280; margin-left: auto; }
.bd-match-bench-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.25rem; }
.bd-match-bench-list li {
    display: grid;
    grid-template-columns: 36px 1fr 30px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.55rem;
    background: #f9fafb;
    border-left: 3px solid #e5e7eb;
    border-radius: 0 4px 4px 0;
    font-size: 0.84rem;
}
.bd-match-bench-num { font-family: 'Press Start 2P', monospace; font-size: 0.65rem; color: var(--sss-cobalt, #1939B7); }

/* Player stats tabla */
.bd-match-player-stats-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.8rem;
}
@media (max-width: 900px) { .bd-match-player-stats-wrap { grid-template-columns: 1fr; } }
/* Override: dentro del wrap, cada bloque de team es vertical (h4 ARRIBA + tabla DEBAJO) */
.bd-match-player-stats-wrap .bd-match-player-stats {
    display: block;
}
.bd-match-player-stats-team {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.82rem;
    color: var(--sss-cobalt, #1939B7);
    letter-spacing: 0.04em;
    margin: 0 0 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #111827;
}
body.bd-dark .bd-match-player-stats-team { color: var(--sss-yellow); border-bottom-color: rgba(255,255,255,0.2); }
.bd-match-player-stats-flag {
    width: 36px;
    height: 24px;
    object-fit: cover;
    border: 2px solid #111827;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
    background: #fff;
}

/* ═══ TITULOS DE CARDS DEL TAB EN-VIVO / DATOS — centrados ═══ */
.bd-match-body .bd-ent-card-title { text-align: center; }

/* ═══ HEADER DE ESTADÍSTICAS DEL PARTIDO ═══ */
.bd-match-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.4rem 0.7rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #111827;
}
.bd-match-stats-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.bd-match-stats-side.is-home { justify-content: flex-start; }
.bd-match-stats-side.is-away { justify-content: flex-end; }
.bd-match-stats-flag {
    width: 34px;
    height: 22px;
    object-fit: cover;
    border: 2px solid #111827;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
    background: #fff;
}
.bd-match-stats-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.72rem;
    color: var(--ink, #111827);
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.bd-dark .bd-match-stats-name { color: #fff; }
.bd-match-stats-side.is-home .bd-match-stats-name { color: var(--sss-cobalt, #1939B7); }
.bd-match-stats-side.is-away .bd-match-stats-name { color: var(--sss-pink, #FF4FCB); }
.bd-match-player-stats-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bd-match-player-stats-table th, .bd-match-player-stats-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid #e5e7eb; text-align: center; }
.bd-match-player-stats-table th { background: var(--sss-cobalt, #1939B7); color: #fff; font-family: 'Press Start 2P', monospace; font-size: 0.6rem; }
.bd-match-player-stats-table td:nth-child(2) { text-align: left; }
.bd-match-rating { display: inline-block; padding: 2px 8px; border-radius: 3px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.bd-match-rating.is-high { background: #10b981; color: #fff; }
.bd-match-rating.is-mid { background: #FFDC1F; color: #5a3500; }
.bd-match-rating.is-low { background: #ef4444; color: #fff; }

body.bd-dark .bd-match-pitch-legend { background: #1f1a3a; color: #fff; }
body.bd-dark .bd-match-bench-list li { background: #1f1a3a; color: #fff; border-left-color: #4b5563; }
body.bd-dark .bd-match-player-stats-table td { border-color: rgba(255,255,255,0.08); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   MATCH HERO V2 — compacto, países gigantes, banderas a los lados
   ════════════════════════════════════════════════════════════════════════ */
/* Wrapper hero+tabs */
.bd-match-bantabs {
    position: relative;
    border: 4px solid #111827;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    margin-bottom: 0;
    background: #1939B7;
}

/* Banderas de fondo en degradé: cubren ~40% de cada lado, sin cruzar el centro */
.bd-match-bg-flag {
    position: absolute;
    top: 0;
    width: 42%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    opacity: 0.7;
    z-index: 0;
}
.bd-match-bg-home {
    left: 0;
    background-position: left center;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 100%);
}
.bd-match-bg-away {
    right: 0;
    background-position: right center;
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 100%);
            mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 100%);
}

/* Hero V3 — ULTRA compacto pero con un toque más de aire vertical */
.bd-match-hero-v3 {
    position: relative;
    color: #fff;
    padding: 0.75rem 1rem 0.85rem;
    background: linear-gradient(135deg, #1939B7 0%, #4F46E5 100%);
    border-bottom: 3px solid #111827;
    z-index: 1;
    overflow: hidden;
}
/* Wrapper del contenido del hero (encima de banderas) */
.bd-match-hero-v3 > .bd-match-hero-meta-top,
.bd-match-hero-v3 > .bd-match-hero-row {
    position: relative;
    z-index: 2;
}

/* Fecha arriba sola, centrada */
.bd-match-hero-meta-top {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: #fff;
    opacity: 0.88;
    letter-spacing: 0.03em;
    text-align: center;
    margin-bottom: 0.5rem; /* iguala el gap score↔FINAL */
    line-height: 1.2;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

/* Fila principal: home · center · away */
.bd-match-hero-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.9rem;
    /* Sube TODO el bloque (flag + país + score + país + flag) en conjunto.
       Flag y país siguen perfectamente alineados entre sí. */
    transform: translateY(-6px);
}
.bd-match-hero-side {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: #fff;
    transition: transform 0.18s ease;
    min-width: 0;
    justify-content: center;
}
.bd-match-hero-side:hover { transform: scale(1.03); color: #fff; }

/* Banderas más grandes */
.bd-match-hero-flag-small {
    width: 64px;
    height: 44px;
    object-fit: cover;
    border: 2px solid #111827;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    background: #fff;
    /* Sube la bandera para que su centro vertical coincida con el centro
       visual del nombre del país (Press Start 2P + text-shadow inferior) */
    transform: translateY(-3px);
}
.bd-match-hero-country {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.1rem, 3vw, 1.7rem);
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.05;
    color: #fff;
    text-shadow: 3px 3px 0 #111827;
    text-transform: uppercase;
}

/* Centro: score + FINAL debajo (centrado vertical del bloque entero) */
.bd-match-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    padding: 0 0.4rem;
    position: relative;
}
/* FINAL flota debajo del score con el mismo gap que tiene la fecha sobre el score */
.bd-match-hero-center .bd-match-hero-status-text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0.25rem);
    margin-top: 0;
    white-space: nowrap;
}
.bd-match-hero-score {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    display: flex; gap: 0.55rem; align-items: center;
    color: #FFDC1F;
    text-shadow: 3px 3px 0 #111827;
    line-height: 1;
}
.bd-match-hero-sep { opacity: 0.6; }
.bd-match-hero-vs {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    color: #FFDC1F;
    text-shadow: 3px 3px 0 #111827;
    letter-spacing: 0.1em;
    line-height: 1;
}
.bd-match-hero-status-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: #FFDC1F;
    letter-spacing: 0.18em;
    text-shadow: 2px 2px 0 #111827;
    margin-top: 0.05rem;
}

@media (max-width: 720px) {
    .bd-match-hero-v3 { padding: 0.35rem 0.6rem 0.5rem; }
    .bd-match-hero-flag-small { width: 44px; height: 30px; }
    .bd-match-hero-row { gap: 0.4rem; }
    .bd-match-hero-side { gap: 0.4rem; }
    .bd-match-hero-meta-top { font-size: 0.62rem; }
    .bd-match-hero-status-text { font-size: 0.55rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   MATCH TABS — sticky bajo el banner, estilo pegado
   ════════════════════════════════════════════════════════════════════════ */
.bd-match-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #111827;
    border: none;
    border-radius: 0;
    margin: 0;
}
/* Inactivo: blanco crema con texto cobalto, efecto botón SSSD (sombras inset) */
.bd-match-tab {
    appearance: none;
    background: linear-gradient(180deg, #ffffff 0%, #e9eef7 100%);
    color: var(--sss-cobalt, #1939B7);
    border: none;
    border-right: 2px solid #111827;
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.4px;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}
.bd-match-tab:last-child { border-right: none; }
.bd-match-tab:hover {
    background: linear-gradient(180deg, #ffffff 0%, #fff3a8 100%);
    color: var(--sss-cobalt-d, #0D1F6B);
}
/* Activo: placa SSSD cobalto con texto amarillo y sombra rosa, igual que pestañas Mundial */
.bd-match-tab.is-active {
    background: linear-gradient(180deg,
                var(--sss-cobalt, #1939B7) 0%,
                var(--sss-cobalt-d, #0D1F6B) 100%);
    color: var(--sss-yellow, #FFDC1F);
    text-shadow: 1.5px 1.5px 0 var(--sss-pink-d, #C7137A);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 31, 0.35),
        inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}
.bd-match-tab.is-active:hover {
    background: linear-gradient(180deg,
                var(--sss-cobalt, #1939B7) 0%,
                var(--sss-cobalt-d, #0D1F6B) 100%);
    color: var(--sss-yellow, #FFDC1F);
}
/* Emoji icon — Press Start 2P se posiciona en la mitad superior del em-box;
   subimos el emoji para que su centro visual quede a la altura del centro
   visual del texto pixel. */
.bd-match-tab-icon {
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-3px);
}

/* Visibilidad de cards según data-active-tab */
.bd-match-body[data-active-tab="live"] .bd-ent-card[data-tab="data"] { display: none; }
.bd-match-body[data-active-tab="data"] .bd-ent-card[data-tab="live"] { display: none; }