/* =========================================================
   playerStats.css — A juego con playerStats.js
   - Filtros arriba centrados
   - Vista 1: tabla de equipos ( #viewTeams )
   - Vista 2: detalle ( #viewTeamDetail )
     • Sidebar izq (#playerSidebarList)
     • Radar izq (.radar-card > #radarChart)
     • Card der (#statsCard, estructura .fut-card__*)
     • Meta abajo a lo ancho (.meta-row)
   ========================================================= */
:root{
  --bg:#081224;
  --card:#0f1a30;
  --card-2:#0c1628;
  --border:#1f2a44;
  --text:#e6ebff;
  --muted:#a8b3cf;
  --accent:#3d5afe;
  --accent-2:#41d1ff;

  /* Tamaño/pos del “escudo” de la card FUT */
  --shield-scale: 1;
  --shield-top: 0%;
  --shield-hud-top: 9%;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
}

.hidden{ display:none !important; }

/* =========================
   Header + Filtros (centrados)
   ========================= */
header.page-header{
  display:flex; align-items:center; justify-content:center;
  gap:14px; padding:16px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(1000px 450px at 50% -10%, rgba(61,90,254,.12), transparent 60%),
    linear-gradient(180deg, #0e1730, #0b1327 60%, #0a1226);
}
header.page-header h1{
  margin:0; font-size:1.15rem; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,#fff,#cfe1ff 55%,#7aa8ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.06);
}

.filters{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.75rem; padding:10px 12px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}
.filters label{ font-size:.86rem; color:var(--muted); }
.filters select{
  background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:.65rem;
  padding:.5rem .75rem; min-width:220px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.filters select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(61,90,254,.25);
}
.filters button{
  background:transparent; color:var(--text);
  border:1px solid var(--border); border-radius:.65rem;
  padding:.5rem .75rem; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.filters button:hover{
  transform:translateY(-1px);
  border-color:var(--accent); box-shadow:0 8px 24px rgba(61,90,254,.2);
}

main.panel{ width:100%; max-width:1200px; margin:0 auto; padding:16px; }

/* =========================
   VISTA 1 — Tabla de equipos (#viewTeams)
   ========================= */
#viewTeams .teams-table-wrap{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:12px;
  overflow:hidden; margin-top:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
table.teams-table{ width:100%; border-collapse:collapse; }
.teams-table thead th{
  background:#0c1628; color:#cfd7ef; text-align:left;
  padding:10px 12px; font-weight:700; letter-spacing:.02em;
  border-bottom:1px solid var(--border);
}
.teams-table td{ padding:10px 12px; border-bottom:1px solid var(--border); }
.teams-table tr:hover{ background:#0b1528; }
.clickable{ cursor:pointer; }
.team-cell{ display:flex; align-items:center; gap:10px; }
.team-cell img{
  width:36px; height:36px; object-fit:cover; border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
}
#teamsEmpty{ padding:14px; color:var(--muted); }

/* =========================
   VISTA 2 — Detalle (#viewTeamDetail)
   ========================= */
#viewTeamDetail .team-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; margin:12px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}
#viewTeamDetail .team-header .left{ display:flex; align-items:center; gap:10px; }
#viewTeamDetail .team-header img{
  width:44px; height:44px; border-radius:10px; object-fit:cover;
  border:1px solid rgba(255,255,255,.08);
}
#viewTeamDetail .team-name{ font-weight:800; }
#viewTeamDetail .team-global{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; padding:.42rem .8rem; border-radius:999px; font-weight:800;
  background:linear-gradient(135deg, #2ecc71, #1faa59); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 0 6px rgba(255,255,255,.15);
}

/* Layout de vista 2: sidebar izq + derecha */
#viewTeamDetail .layout{
  display:grid; grid-template-columns: 300px 1fr; gap:14px; align-items:start;
}

/* ===== Sidebar de jugadores */
#playerSidebarList{
  list-style:none; margin:0; padding:10px;
  background:linear-gradient(180deg, #0f1125, #0c1224);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 32px rgba(31,95,209,.18);
  display:flex; flex-direction:column; gap:8px;

  max-height: clamp(340px, 72vh, 860px);  /* scrolleable sin desbordar */
  overflow-y:auto;
}
.mini-player{
  display:flex; align-items:center; gap:10px;
  padding:8px; background:var(--card);
  border:1px solid rgba(255,255,255,.06); border-radius:10px;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
}
.mini-player:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.mini-player.active{ background:rgba(79,142,247,.18); border-color:rgba(79,142,247,.35); }
.mini-player img{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
}
.mini-player .info{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.mini-player .name{
  font-size:.92rem; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mini-player .sub{ font-size:.7rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.position-tag{
  display:inline-block; padding:.18rem .45rem; border-radius:6px;
  font-weight:800; font-size:.62rem; line-height:1;
  border:1px solid rgba(0,0,0,.15);
}
.position-GK{ background:#e67e22; color:#0b1220; }
.position-D { background:#27ae60; color:#fff; }
.position-M { background:#f1c40f; color:#0b1220; }
.position-FW{ background:#3498db; color:#fff; }

/* Scrollbar sutil (webkit) */
#playerSidebarList::-webkit-scrollbar{ width:10px; }
#playerSidebarList::-webkit-scrollbar-track{ background:#0b1220; border-radius:10px; }
#playerSidebarList::-webkit-scrollbar-thumb{ background:#1a2440; border-radius:10px; }
#playerSidebarList::-webkit-scrollbar-thumb:hover{ background:#223055; }

/* ===== Columna derecha: radar + card + meta */
.right-col{
  display:grid;
  grid-template-columns: minmax(0,1fr) 20rem;     /* card fija a 20rem */
  grid-template-areas:
    "radar card"
    "meta  meta";
  gap:14px; align-items:start;
}

/* Radar (izquierda) */
.radar-card{
  grid-area: radar;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:14px;
  padding:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  min-height:320px;
}
#radarChart{ width:100%; height:100%; }

/* Card FUT (derecha) — usa #statsCard y estructura .fut-card__* generada por JS */
#statsCard{
  grid-area: card;
  position:relative;
  width:20rem; min-height:27rem; margin:0;

  background-color:transparent !important;
  background-image:url('../img/bg_shield.png?v=6'), url('/img/bg_shield.png?v=6') !important;
  background-repeat:no-repeat, no-repeat !important;
  background-size: calc(100% * var(--shield-scale)) auto, calc(100% * var(--shield-scale)) auto !important;
  background-position: center var(--shield-top), center var(--shield-top) !important;

  border:0; border-radius:16px; box-shadow:none !important; overflow:visible;
}
#statsCard > .fut-card__header,
#statsCard > .fut-card__body,
#statsCard > .fut-card__stats-grid{
  width: calc(100% * var(--shield-scale));
  margin-left:auto; margin-right:auto;
}

/* HUD (rating/pos) */
.fut-card__header{
  position:absolute; left:0; right:0; top: var(--shield-hud-top);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4px; background:transparent !important;
  z-index:3; pointer-events:none;
}
.fut-card__rating,
.fut-card__position{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; text-align:center; font-weight:800;
  color:#0b1220; background:#f5f7fb;
  border-radius:10px; padding:2px 8px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.fut-card__rating{ font-size:1.2rem; }
.fut-card__position{ font-size:.95rem; }

/* Cuerpo */
.fut-card__body{
  position:relative; display:flex; flex-direction:column; align-items:center;
  margin-top: var(--shield-body-offset);
  text-align:center; background:transparent !important; z-index:2;
}
.fut-card__photo{
  width:108px; height:108px; border-radius:50%;
  object-fit:cover; border:4px solid #fff; background:#fff;
  display:block; margin:0 auto 10px;
}
.fut-card__number{
  position: relative; z-index:3; margin-top:-2rem; margin-bottom:8px;
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f5f7fb; color:#0b1220; font-weight:800; font-size:1rem; letter-spacing:.5px;
  border:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.fut-card__name{ margin:0 0 6px 0; font-size:1.15rem; font-weight:800; letter-spacing:.5px; color:#111; }

/* Stats internas (grid) */
.fut-card__stats-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; list-style:none; padding:12px 0 16px; margin:6px auto 0;
  background:transparent !important;
}
.fut-card-container{
  background:#fff !important; color:#111;
  border-radius:10px; padding:10px 8px; display:flex; flex-direction:column; gap:4px;
  text-align:center; font-size:12px; font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.15); transition:transform .18s ease;
}
.fut-card-container:hover{ transform:translateY(-2px); }
.fut-card-container .stat-key{ font-size:.68rem; text-transform:uppercase; color:#4b5563; }
.fut-card-container .stat-value{ font-size:.98rem; color:#0b1220; }

/* Meta — a lo ancho bajo radar + card */
.meta-row{
  grid-area: meta;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:14px; margin-top:2px;
}
.meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:12px;
  padding:.7rem .9rem;
  box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}
.meta .label{ color:var(--muted); font-weight:600; letter-spacing:.2px; }
.meta .value{ font-weight:800; letter-spacing:.25px; }

/* =========================
   Leyendas (ids que alterna el JS)
   ========================= */
.table-legend{
  margin-top:14px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px;
}
.table-legend strong{ color:#fff; }
.table-legend ul{ margin:.4rem 0 0 .9rem; padding:0; color:var(--muted); }

/* =========================
   Responsive
   ========================= */
@media (max-width: 1100px){
  #viewTeamDetail .layout{ grid-template-columns: 280px 1fr; }
}

@media (max-width: 980px){
  #viewTeamDetail .layout{
    grid-template-columns: 1fr;  /* sidebar arriba */
  }
  #playerSidebarList{
    flex-direction:row;
    overflow-x:auto; overflow-y:hidden;
    max-height:none; padding:8px 10px;
  }
  .mini-player{ min-width:220px; }

  .right-col{
    grid-template-columns: 1fr;        /* radar y card apilados */
    grid-template-areas:
      "radar"
      "card"
      "meta";
  }
  #statsCard{
    width:100%;
    min-height:24rem;
    background-size: calc(95% * var(--shield-scale)) auto !important;
  }
}

/* =========================
   Variables base y reset
   ========================= */
:root{
  --bg:#0b1220;
  --card:#111a2b;
  --text:#f5f7fb;
  --muted:#a8b3cf;
  --accent:#22c55e;
  --border:#1f2a44;
  --accent-blue:#3d5afe;

  /* ===== Escudo dentro de la card =====
     La card es ~30% más grande que el escudo ⇒ escudo ≈ 77% del ancho */
  --shield-scale: 1;        /* ancho relativo del escudo vs. la card */
  --shield-top: 0%;            /* desplaza el escudo verticalmente */
  --shield-hud-top: 9%;        /* posición del HUD (rating/pos) */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  min-height:100vh;
}

/* =========================
   Botón de filtros (fixed)
   ========================= */
.filter-trigger{
  position:fixed;
  top:14px; left:14px;
  z-index:1200;
}
.filter-trigger button{
  background:linear-gradient(135deg,#4f8ef7,#1f5fd1);
  border:none;
  padding:.55rem .9rem;
  border-radius:8px;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(31,95,209,.25);
  transition:filter .15s, transform .15s;
}
.filter-trigger button:hover{ filter:brightness(1.07); }

/* =========================
   Modal de filtros
   ========================= */
.modal{
  position:fixed; inset:0;
  background:rgba(15,17,24,.85);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  z-index:1100;
}
.modal.hidden{ display:none; }
.modal-content{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  width:100%; max-width:740px;
  overflow:hidden;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.modal-header h2{ margin:0; font-size:1.1rem; }
.modal-header button{
  background:transparent; border:none; color:var(--muted);
  font-size:1.4rem; cursor:pointer; padding:4px 6px; border-radius:8px;
}
.modal-body{ padding:14px 16px; display:flex; flex-direction:column; gap:.75rem; }

/* Combobox torneo */
#torneoSelect{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  padding:.5rem .75rem;
  border-radius:.6rem;
  outline:none;
  min-width:220px;
  transition:border-color .15s, box-shadow .15s;
}
#torneoSelect:focus{
  border-color:var(--accent-blue);
  box-shadow:0 0 0 3px rgba(61,90,254,.25);
}

.teams-table-wrapper h3{ margin:6px 0 8px; font-size:.95rem; color:var(--muted); }

/* Tabla de equipos dentro del modal */
.teams-table{
  width:100%; border-collapse:collapse; background:#0f1a30;
  border-radius:10px; overflow:hidden;
}
.teams-table thead th{
  text-align:left; padding:10px 12px; font-size:.74rem; letter-spacing:.02em;
  color:var(--muted); background:#0f1a30; border-bottom:1px solid var(--border);
}
.teams-table tbody td{ padding:10px 12px; border-bottom:1px solid var(--border); }
.teams-table tbody tr{ cursor:pointer; transition:background .15s; }
.teams-table tbody tr:hover{ background:rgba(255,255,255,.04); }
.team-logo-small{ width:32px; height:32px; object-fit:cover; border-radius:6px; }

/* Badges */
.stat-badge{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:700; font-size:.72rem;
}
.stat-rojo{ background:#e74c3c; }
.stat-naranja{ background:#e67e22; }
.stat-amarillo{ background:#f1c40f; color:#111; }
.stat-verde{ background:#2ecc71; }

/* =========================
   Sidebar (lista de jugadores)
   ========================= */
.player-sidebar-list{
  position:fixed;
  top:72px; left:12px;
  width:240px;
  height:calc(100vh - 84px);
  overflow-y:auto;
  background:#0f1125;
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow:0 12px 32px rgba(31,95,209,.18);
  z-index:900;
}

/* Ítem de jugador en el sidebar */
.mini-player{
  display:flex; align-items:center; gap:10px;
  padding:8px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  cursor:pointer; transition:background .15s, transform .1s;
}
.mini-player:hover{ background:rgba(255,255,255,.05); }
.mini-player.active{ background:rgba(79,142,247,.18); }
.mini-player img{
  width:36px; height:36px; border-radius:50%; object-fit:cover;
}
.mini-player .info{ flex:1; display:flex; flex-direction:column; gap:3px; }
.mini-player .name{ font-size:.88rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-player .sub{ font-size:.68rem; color:var(--muted); display:flex; align-items:center; gap:6px; }

/* Etiqueta de posición en la lista lateral (alto contraste) */
.position-tag{
  display:inline-block; padding:.18rem .45rem; border-radius:6px;
  font-weight:700; font-size:.62rem; line-height:1;
  border:1px solid rgba(0,0,0,.15);
}
.position-GK{ background:#e67e22; color:#0b1220; }
.position-D { background:#27ae60; color:#fff; }
.position-M { background:#f1c40f; color:#0b1220; }
.position-FW{ background:#3498db; color:#fff; }

/* =========================
   Contenedor principal
   ========================= */
main.panel{
  padding:14px 16px 16px 270px; /* deja espacio para la sidebar fija */
  max-width:1200px; margin:0 auto;
}

/* Encabezado del equipo */
.team-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:12px;
  margin-bottom:12px;
}
.team-header.hidden{ display:none !important; }
.team-header .left{ display:flex; align-items:center; gap:.75rem; }
.team-header img{ width:36px; height:36px; border-radius:6px; object-fit:cover; }
.team-name{ font-size:1.05rem; font-weight:600; }

/* Badge Global del equipo más vistoso */
.team-global{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px;
  background:linear-gradient(135deg,#2ecc71,#1faa59);
  color:#fff;
  padding:.4rem .75rem;
  border-radius:999px;
  font-weight:800; font-size:.95rem;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 0 6px rgba(255,255,255,.15);
}

/* =========================
   Detalle del jugador
   ========================= */
.player-detail{ display:flex; flex-direction:column; gap:1rem; }

/* Radar + tarjeta lado a lado */
.stats-details-container{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start;
}

/* Radar */
.radar-container{
  flex:1; min-width:300px; min-height:320px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
#radarChart{ width:100%; height:100%; }

/* =========================
   Tarjeta de stats con ESCUDO centrado
   ========================= */

.stats-card{
  position:relative;
  width:20rem;                   /* card (contenedor) */
  min-height:27rem;
  margin:0;

  /* Fondo: escudo centrado y más pequeño que la card */
  background-color:transparent !important;
  background-image:url('../img/bg_shield.png?v=6'), url('/img/bg_shield.png?v=6') !important;
  background-repeat:no-repeat, no-repeat !important;
  background-size: calc(100% * var(--shield-scale)) auto, calc(100% * var(--shield-scale)) auto !important;
  background-position: center var(--shield-top), center var(--shield-top) !important;

  border:0; border-radius:16px;
  box-shadow:none !important;
  overflow:visible;
}

/* Alinea el ancho útil al del escudo */
.stats-card > .fut-card__header,
.stats-card > .fut-card__body,
.stats-card > .fut-card__stats-grid{
  width: calc(100% * var(--shield-scale));
  margin-left:auto;
  margin-right:auto;
}

/* HUD (global/pos) dentro del escudo */
.fut-card__header{
  position:absolute;
  left:0; right:0;
  top: var(--shield-hud-top);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4px;
  background:transparent !important;
  z-index:3;
  pointer-events:none;
}

.fut-card__rating,
.fut-card__position{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; text-align:center;
  font-weight:800;
  color:#0b1220; background:#f5f7fb;
  border-radius:10px; padding:2px 8px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.fut-card__rating{ font-size:1.2rem; }
.fut-card__position{ font-size:.95rem; }

/* Cuerpo centrado y separado del HUD */
.fut-card__body{
  position:relative;
  margin-top: var(--shield-body-offset);  /* baja la foto hacia el centro del escudo */
  text-align:center;
  background:transparent !important;
  z-index:2;
}

.fut-card__photo{
  width:108px; height:108px; border-radius:50%;
  object-fit:cover; border:4px solid #fff; background:#fff;
  display:block; margin:0 auto 10px;
}

/* ===== Número del jugador en un círculo, centrado bajo la foto ===== */

/* Centra vertical/horizontalmente el contenido dentro del cuerpo de la card */
.fut-card__body{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Globo con el número (#10, 9, etc.) justo debajo de la foto */
.fut-card__number{
  position: relative;
  z-index: 3;                 /* encima del escudo */
  margin-top: -2rem;          /* solapa un poco la base de la foto */
  margin-bottom: 8px;         /* espacio antes del nombre */

  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #f5f7fb;        /* combina con los badges del HUD */
  color: #0b1220;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .5px;

  border: 2px solid #fff;     /* aro blanco como la foto */
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.fut-card__name{
  margin:0 0 6px 0; font-size:1.15rem; font-weight:800; letter-spacing:.5px; color:#111;
}

/* Grilla de stats (incluye la grilla meta añadida por JS) */
.fut-card__stats-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; list-style:none; padding:12px 0 16px; margin:6px auto 0;
  background:transparent !important;
}
.fut-card-container{
  background:#fff !important; color:#111;
  border-radius:10px; padding:10px 8px; display:flex; flex-direction:column; gap:4px;
  text-align:center; font-size:12px; font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.15); transition:transform .18s ease;
}
.fut-card-container:hover{ transform:translateY(-2px); }
.fut-card-container .stat-key{ font-size:.68rem; text-transform:uppercase; color:#4b5563; }
.fut-card-container .stat-value{ font-size:.98rem; color:#0b1220; }

/* =========================
   Tabla meta (goles/asis/tarjetas) – por si la usas fuera del escudo
   ========================= */
.table-meta{
  display:flex; gap:1.25rem; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:.75rem 1rem;
}
.table-meta div{ font-size:.9rem; color:var(--text); }

/* =========================
   Responsive
   ========================= */
@media (max-width: 1100px){
  main.panel{ padding-left:250px; }
  .player-sidebar-list{ width:230px; }
}
@media (max-width: 900px){
  main.panel{ padding-left:16px; margin-left:260px; }
}
@media (max-width: 720px){
  .player-sidebar-list{
    position:fixed; top:64px; left:0;
    width:100%; height:220px;
    border-left:none; border-right:none; border-radius:0;
    padding:8px 12px;
    display:flex; flex-direction:row; gap:8px;
    overflow-x:auto; overflow-y:hidden;
  }
  main.panel{ padding:14px 12px; margin-left:0; }
  .stats-details-container{ flex-direction:column; }
  .stats-card{
    width:100%;
    min-height:24rem;
    background-size: calc(95% * var(--shield-scale)) auto !important;
  }
}

.tabs{
  display:flex; align-items:center; gap:.5rem;
  background:var(--card,#0f1a30);
  border:1px solid var(--border,#1f2a44);
  border-radius:12px; padding:8px;
}
.tabs-left{display:flex; align-items:center; gap:.6rem;}
.brand-logo{height:28px; width:auto; border-radius:6px; display:block;}
.brand-name{
  color:var(--text,#e6ebff); font-weight:700; letter-spacing:.2px; font-size:.95rem;
  white-space:nowrap;
}

.tabs-right{display:flex; align-items:center; gap:.5rem;}
.tabs-home{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid var(--border,#1f2a44);
  background:linear-gradient(180deg, #111a2b, #0b1528);
  border-radius:10px; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tabs-home svg{width:20px; height:20px; color:var(--text,#e6ebff);}
.tabs-home:hover{
  border-color:var(--accent-blue,#3d5afe);
  box-shadow:0 10px 26px rgba(61,90,254,.25), inset 0 1px 0 rgba(255,255,255,.04);
  transform:translateY(-1px);
}