/* ============================================================
   ACL — Página de ACL ONE (acl-one.html, la pinta js/aclone.js)
   Va con las variables de la web (--primary, --border...): con el tema
   Season 2 salen moradas, como el resto.
   ============================================================ */

/* ---------- Pestañas ----------
   Pegadas bajo el menú al bajar; en el móvil se deslizan de lado. */
.a1-tabs {
  position: sticky; top: var(--nav-h, 64px); z-index: 20;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 28px; padding: 6px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 10px;
}
.a1-tabs::-webkit-scrollbar { display: none; }
.a1-tabs a {
  flex: none; padding: 10px 16px; border-radius: 7px; white-space: nowrap;
  font: 700 0.82rem var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; transition: background .15s ease, color .15s ease;
}
.a1-tabs a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.a1-tabs a.is-on { color: #fff; background: var(--primary); }

/* ---------- Cabeceras de bloque ---------- */
.a1-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 36px 0 14px; }
.a1-vista > .a1-head:first-child, .a1-dos > div > .a1-head:first-child { margin-top: 0; }
.a1-head .kicker { margin-bottom: 4px; }
.a1-head h2 { margin: 0; font-size: 1.35rem; }
.a1-ver { font-size: 0.85rem; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.a1-ver:hover { text-decoration: underline; }
.a1-volver { display: inline-block; margin-bottom: 16px; font-size: 0.88rem; color: var(--text-3); text-decoration: none; }
.a1-volver:hover { color: var(--text); }
.a1-nada { color: var(--text-3); font-size: 0.92rem; margin: 0 0 10px; }
.a1-nota { color: var(--text-3); font-size: 0.86rem; line-height: 1.55; margin: 14px 0 0; }

.a1-dos { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; margin-top: 32px; }
@media (max-width: 900px) { .a1-dos { grid-template-columns: 1fr; } }

/* ---------- Resumen ---------- */
.a1-resumen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .a1-resumen { grid-template-columns: 1fr; } }
.a1-estado-liga { padding: 22px 24px; margin: 0; border-left: 3px solid var(--primary); }
.a1-estado-liga h3 { margin: 4px 0 8px; font-size: 1.6rem; }
.a1-estado-liga p { margin: 0; color: var(--text-2); }
.a1-estado-liga__k { font: 700 0.72rem var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary) !important; }
.a1-estado-liga__j { font-size: 1.05rem; }
.a1-estado-liga__j i, .a1-semana__j i { font-style: normal; color: var(--text-3); margin: 0 4px; }
.a1-estado-liga .a1-evento { margin-top: 12px; }
.a1-escudos {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: center;
  padding: 14px; border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .2));
}
.a1-escudos a { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; border-radius: 8px; transition: background .15s ease, transform .15s ease; }
.a1-escudos a:hover { background: rgba(255, 255, 255, .05); transform: translateY(-2px); }
.a1-escudos img { max-width: 100%; max-height: 100%; object-fit: contain; }
.a1-escudos b { font-family: var(--font-display); color: var(--text-3); }
.a1-formato-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.a1-formato-grid .card { margin: 0; padding: 18px; }
.a1-formato-grid b { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.a1-formato-grid p { margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.55; }

/* ---------- Un partido en una línea ---------- */
.a1-jornada { margin-bottom: 16px; }
.a1-jornada__t { margin: 0 0 8px; font: 700 0.75rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.a1-jornada__t b { color: var(--text); }
.a1-jornada__t small { margin-left: 8px; letter-spacing: 0.04em; text-transform: none; font-weight: 500; }
.a1-jornada__mapas { color: var(--text-3); }
.a1-jornada--fila { margin-bottom: 10px; }
.a1-partido {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 6px; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; background: rgba(255, 255, 255, .02);
  transition: border-color .15s ease, background .15s ease;
}
.a1-partido:hover { border-color: var(--primary); background: rgba(255, 255, 255, .04); }
.a1-lado { min-width: 0; opacity: .9; }
.a1-lado--der { display: flex; justify-content: flex-end; }
.a1-partido--jugado .a1-lado { opacity: .55; }
.a1-partido--jugado .a1-lado--gana { opacity: 1; }
.a1-eq { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 700 0.95rem var(--font-display); text-transform: uppercase; }
.a1-eq__esc { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 30px; flex: none; }
.a1-eq__esc img { max-width: 100%; max-height: 100%; object-fit: contain; }
.a1-eq__esc b { font-size: 0.7rem; color: var(--text-3); }
.a1-eq__tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a1-vs { font: 600 0.72rem var(--font-body); color: var(--text-3); padding: 0 8px; }
.a1-marcador { font: 800 1.2rem var(--font-display); padding: 2px 12px; border-radius: 5px; background: var(--surface-2); }
.a1-marcador i { font-style: normal; color: var(--text-3); margin: 0 4px; }
.a1-estado { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 3px 8px; border: 1px dashed var(--border-strong); border-radius: 999px; }
.a1-estado--disputa { color: #E5484D; border-color: rgba(229, 72, 77, .5); }
.a1-estado--hora { text-transform: none; letter-spacing: 0; border-style: solid; color: var(--text-2); }

/* ---------- Clasificación ---------- */
.a1-tabla { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.a1-fila {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px 36px 36px 74px 46px 50px;
  align-items: center; gap: 8px; padding: 10px 16px; text-decoration: none; color: var(--text-2);
  border-top: 1px solid var(--border); font-size: 0.92rem;
}
.a1-tabla--corta .a1-fila { grid-template-columns: 30px minmax(0, 1fr) 34px 30px 30px 46px; }
.a1-fila > span:nth-child(n+3) { text-align: center; }
a.a1-fila:hover { background: rgba(255, 255, 255, .03); }
.a1-fila--cab { border-top: 0; background: var(--surface-2); font: 700 0.7rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.a1-fila:nth-child(2) .a1-pos { color: var(--primary); }
.a1-pos { font: 800 1rem var(--font-display); }
.a1-club-celda { display: flex; align-items: center; gap: 10px; min-width: 0; }
.a1-club-txt { display: flex; flex-direction: column; min-width: 0; }
.a1-club-txt b { color: var(--text); font-family: var(--font-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a1-club-txt small { color: var(--text-3); font-size: 0.72rem; letter-spacing: 0.08em; }
.a1-v { color: var(--win); }
.a1-d { color: #E5484D; }
.a1-pts { font: 800 1.05rem var(--font-display); color: var(--text); }
@media (max-width: 640px) {
  .a1-fila { grid-template-columns: 26px minmax(0, 1fr) 30px 28px 28px 38px 44px; padding: 10px 10px; gap: 6px; }
  .a1-fila .a1-col-mapas { display: none; }
  .a1-club-txt small { display: none; }
}

/* ---------- Equipos oficiales: un banner debajo de otro ----------
   Con imagen (assets/img/aclone/banners/<tag>.jpg) se ve la imagen; sin
   ella, uno generado con el escudo y el nombre. Debajo, una tira con su
   posición y "Ver club". */
.a1-banners { display: grid; gap: 18px; }
.a1-banner {
  position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  background: radial-gradient(ellipse 60% 120% at 15% 50%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%),
              linear-gradient(110deg, var(--surface) 0%, var(--bg) 100%);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.a1-banner:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 14px 40px color-mix(in srgb, var(--primary) 18%, transparent); }
/* Más bajo que la imagen (2,67:1): se recorta arriba y abajo, y el logo,
   que en todos va centrado en vertical, se queda entero */
.a1-banner__img { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; object-position: center; }
@media (max-width: 640px) { .a1-banner__img { aspect-ratio: 3 / 1; } }
.a1-banner--img .a1-banner__gen { display: none; }
.a1-banner__gen { display: flex; align-items: center; gap: 26px; padding: 26px 30px; min-height: 160px; }
.a1-banner__esc { display: flex; align-items: center; justify-content: center; width: 150px; height: 120px; flex: none; }
.a1-banner__esc img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--primary) 40%, transparent)); }
.a1-banner__esc b { font: 800 2rem var(--font-display); color: var(--text-3); }
.a1-banner__nombre { display: flex; flex-direction: column; min-width: 0; }
.a1-banner__nombre b { font: 800 clamp(1.4rem, 4vw, 2.4rem)/1.05 var(--font-display); text-transform: uppercase; }
.a1-banner__nombre small { margin-top: 6px; font: 700 0.85rem var(--font-body); letter-spacing: 0.2em; color: var(--text-3); }
.a1-banner__pie {
  display: flex; align-items: center; gap: 18px; padding: 10px 18px;
  border-top: 1px solid var(--border); background: rgba(0, 0, 0, .35); font-size: 0.88rem; color: var(--text-2);
}
.a1-banner__pie .tnum:first-child { font: 800 1rem var(--font-display); color: var(--primary); }
.a1-banner__ir { margin-left: auto; font-weight: 700; color: var(--text); }
@media (max-width: 560px) {
  .a1-banner__gen { gap: 16px; padding: 18px; min-height: 120px; }
  .a1-banner__esc { width: 100px; height: 80px; }
}

/* ---------- Ficha de un club ---------- */
.a1-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 640px) { .a1-stats { grid-template-columns: repeat(2, 1fr); } }
.a1-stats > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.a1-stats b { display: block; font: 800 1.5rem var(--font-display); }
.a1-stats span { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.a1-plantilla { display: grid; gap: 8px; margin-bottom: 14px; }
.a1-jug {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 7px; text-decoration: none; color: var(--text);
}
.a1-jug:hover { border-color: var(--primary); }
.a1-jug b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a1-jug small { color: var(--text-3); font-size: 0.78rem; }

/* ---------- Cartas de jugador: filtros y un bloque por club ---------- */
.a1-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }
.a1-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 9px; min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 4px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  font: 700 13px/1 var(--font-body); letter-spacing: .06em;
  transition: border-color .16s, background .16s, color .16s;
}
.a1-filtro img { width: 20px; height: 20px; object-fit: contain; }
.a1-filtro:hover { border-color: var(--primary); color: var(--text); }
.a1-filtro[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.a1-filtro:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.a1-cartas { margin-bottom: 44px; }
.a1-cartas[hidden] { display: none; }
.a1-cartas__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; text-decoration: none; color: var(--text); }
.a1-cartas__cab .a1-eq__esc { width: 34px; height: 34px; }
.a1-cartas__cab h3 { margin: 0; font: 800 1.5rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.a1-cartas__cab:hover h3 { color: var(--primary); }
.a1-cartas__n { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.a1-cartas__cab::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 55%, transparent), transparent); }
.a1-cartas__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
@media (max-width: 520px) { .a1-cartas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.a1-cartas .carta-wrap { display: block; text-decoration: none; color: inherit; }
.a1-cartas .carta-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

/* ---------- Calendario: semana a semana, como el cartel ---------- */
.a1-semanas { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.a1-semana { border-top: 1px solid var(--border); }
.a1-semana:first-child { border-top: 0; }
.a1-cal-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.a1-cal-barra .a1-nota { margin: 0; }
.a1-semana__mas { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 112px; font-size: .78rem; letter-spacing: .04em; color: var(--text-3); white-space: nowrap; }
.a1-semana__mas svg { width: 18px; height: 18px; color: var(--text-2); transition: transform .2s; }
.a1-semana > summary:hover .a1-semana__mas, .a1-semana > summary:hover .a1-semana__mas svg { color: var(--primary); }
.a1-semana[open] .a1-semana__mas svg { transform: rotate(180deg); color: var(--primary); }
.a1-semana > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.a1-semana > summary, .a1-semana--vacia {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 16px;
  padding: 14px 20px; list-style: none; cursor: pointer;
}
.a1-semana--vacia { cursor: default; }
.a1-semana > summary::-webkit-details-marker { display: none; }
.a1-semana > summary:hover { background: rgba(255, 255, 255, .03); }
.a1-semana[open] > summary { background: rgba(255, 255, 255, .03); }
.a1-semana__fechas { font-weight: 600; color: var(--text); }
.a1-semana__j { color: var(--text-2); }
.a1-semana__j b { color: var(--text); }
.a1-sin { color: var(--text-3); }
.a1-semana__ev { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.a1-semana__ev small { color: var(--text-2); }
.a1-semana__cuerpo { padding: 6px 20px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; }
/* Semana de una sola jornada: sus 5 partidos en dos columnas, como las de dos */
.a1-semana__cuerpo > .a1-jornada:only-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-content: start; }
@media (max-width: 700px) { .a1-semana__cuerpo > .a1-jornada:only-child { grid-template-columns: minmax(0, 1fr); } }
.a1-semana__cuerpo > .a1-jornada:only-child > .a1-jornada__t { grid-column: 1 / -1; }
.a1-semana--hoy { box-shadow: inset 3px 0 0 var(--primary); }
.a1-semana--hoy .a1-semana__fechas::after { content: "•"; margin-left: 8px; color: var(--primary); }
.a1-semana--inaugural { background: linear-gradient(90deg, transparent 30%, rgba(61, 220, 132, .07)); }
.a1-semana--minor { background: linear-gradient(90deg, transparent 30%, rgba(77, 163, 255, .08)); }
.a1-semana--major { background: linear-gradient(90deg, transparent 30%, rgba(168, 85, 247, .14)); }
.a1-semana--paron { background: rgba(77, 163, 255, .05); }
@media (max-width: 700px) {
  .a1-semana > summary, .a1-semana--vacia { grid-template-columns: 1fr auto; padding: 12px 14px; row-gap: 6px; }
  .a1-semana__ev { grid-column: 1 / -1; justify-content: flex-start; }
  .a1-semana__ev:empty { display: none; }
  .a1-semana__j { grid-column: 1; }
  .a1-semana__mas { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  .a1-semana--vacia .a1-semana__mas { display: none; }
  .a1-cal-barra { flex-wrap: wrap; }
  .a1-semana__cuerpo { padding: 6px 12px 12px; }
}

/* Etiqueta de evento, con el color del cartel */
.a1-evento {
  display: inline-flex; padding: 3px 10px; border-radius: 999px; border: 1px solid;
  font: 700 0.72rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
}
.a1-evento--inaugural { color: var(--win); border-color: rgba(61, 220, 132, .45); background: rgba(61, 220, 132, .08); }
.a1-evento--minor { color: var(--accent-blue); border-color: rgba(77, 163, 255, .45); background: rgba(77, 163, 255, .08); }
.a1-evento--major { color: #C99BFF; border-color: rgba(168, 85, 247, .55); background: rgba(168, 85, 247, .12); }
.a1-evento--paron { color: #9CC9FF; border-color: rgba(77, 163, 255, .35); background: none; }

/* ---------- Un partido ---------- */
.a1-match { padding: 22px 24px; margin: 0; }
.a1-match__k { margin: 0 0 16px; text-align: center; font: 700 0.75rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.a1-match__eqs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.a1-match__eq { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; color: var(--text); }
.a1-match__esc { display: flex; align-items: center; justify-content: center; width: 124px; height: 100px; }
.a1-match__eq b { font: 800 1.15rem var(--font-display); text-transform: uppercase; }
.a1-match__eq small { color: var(--text-3); font-size: 0.78rem; }
.a1-match__marcador { font: 800 2.6rem var(--font-display); }
.a1-match__marcador i { font-style: normal; color: var(--text-3); margin: 0 8px; }
.a1-match__vs { font: 700 1rem var(--font-body); color: var(--text-3); }
@media (max-width: 560px) { .a1-match__esc { width: 84px; height: 68px; } .a1-match__marcador { font-size: 2rem; } }
.a1-mapas { list-style: none; counter-reset: mapa; margin: 0; padding: 0; display: grid; gap: 6px; }
.a1-mapas li {
  counter-increment: mapa; display: grid; grid-template-columns: 34px 160px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 7px;
}
.a1-mapas li::before { content: counter(mapa); font: 800 1rem var(--font-display); color: var(--primary); }
.a1-mapas__modo { color: var(--text-3); font-size: 0.85rem; }
@media (max-width: 560px) { .a1-mapas li { grid-template-columns: 26px minmax(0, 1fr) auto; } .a1-mapas__modo { display: none; } }
.a1-bloque { margin: 0; padding: 16px 18px; }
.a1-bloque p { margin: 0 0 10px; color: var(--text-2); }
.a1-bloque p:last-child { margin-bottom: 0; }
.a1-ok { color: var(--win) !important; font-weight: 600; }
.a1-mal { color: #E5484D !important; font-weight: 600; }
.a1-proponer input { padding: 8px 10px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px; font: inherit; }
.a1-sel { margin-top: 4px; }
.a1-sel__ayuda { font-size: 0.86rem; }
.a1-sel__fila { display: grid; grid-template-columns: minmax(0, 1fr) 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.a1-sel__fila--off { opacity: .4; }
.a1-sel__n small { color: var(--text-3); margin-left: 4px; }
.a1-sel__btn {
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font: 700 0.85rem var(--font-display); text-transform: uppercase;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border-strong);
}
.a1-sel__btn.is-on { color: #fff; background: var(--primary); border-color: var(--primary); }
.a1-sel__btn:disabled { cursor: default; }
.a1-admin { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.a1-admin summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text-3); }
.a1-editor-mapas { display: grid; gap: 8px; margin-top: 10px; }
.a1-editor-mapas label { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 0.88rem; color: var(--text-2); }
.a1-editor-mapas select { padding: 7px 10px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px; }
.a1-editor-mapas .btn { justify-self: start; margin-top: 4px; }

/* ---------- Banco de pruebas (solo en local) ---------- */
.a1-banco { margin-bottom: 18px; padding: 10px 14px; border: 1px dashed #B8860B; border-radius: 8px; background: rgba(184, 134, 11, .08); font-size: 0.88rem; }
.a1-banco summary { cursor: pointer; font-weight: 700; color: #E0B040; }
.a1-banco__cuerpo { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 10px; }
.a1-banco label { display: flex; align-items: center; gap: 8px; }
.a1-banco select { padding: 6px 8px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px; }

/* Cuánto llevamos de liga (Resumen) */
.a1-progreso { height: 6px; margin: 20px 0 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.a1-progreso span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.a1-estado-liga .a1-progreso__t { font-size: 0.85rem; color: var(--text-3); }
.a1-estado-liga .a1-progreso__t b { color: var(--text); }

/* ---------- Chat del enfrentamiento ---------- */
.a1-chat { margin: 0; padding: 0; overflow: hidden; }
.a1-chat__lista { max-height: 380px; overflow-y: auto; padding: 14px 18px; display: grid; gap: 12px; }
.a1-msg__cab { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; font-size: 0.85rem; }
.a1-msg__cab b { color: var(--text); }
.a1-msg__eq { padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 3px; font: 700 0.68rem var(--font-body); letter-spacing: 0.06em; color: var(--text-2); }
.a1-msg__eq--staff { color: var(--primary); border-color: var(--primary); }
.a1-msg time { margin-left: auto; font-size: 0.75rem; color: var(--text-3); }
.a1-msg__txt { margin: 0; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.a1-msg--staff .a1-msg__txt { color: var(--text); }
.a1-chat__form { display: flex; gap: 10px; align-items: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.a1-chat__form textarea {
  flex: 1; min-width: 0; resize: vertical; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;
}

/* Aviso: mientras la liga esté cerrada, esto solo lo ve el staff */
.a1-staff { margin: 0 0 14px; padding: 8px 12px; border-left: 3px solid var(--primary); background: var(--primary-dim); font-size: 0.88rem; color: var(--text-2); }
.a1-staff--error { border-left-color: #E5484D; background: rgba(229, 72, 77, .08); }

/* ---------- Cabecera con el emblema de ACL ONE ----------
   La imagen (assets/img/s2/acl-one-panel.jpg) va a la derecha y se funde
   con el fondo por la izquierda y por abajo (máscara), así no se le ve el
   borde. Sustituye a la A fantasma y al resplandor de las demás páginas. */
html body.rd .page-head.page-head--aclone { min-height: 360px; }
html body.rd .page-head.page-head--aclone::before { display: none; }
html body.rd .page-head.page-head--aclone::after {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; right: 0; left: auto; width: min(660px, 50%); height: auto;
  opacity: 1; transform: none;                 /* la A fantasma general va al 7 % y desplazada */
  background: url("../assets/img/s2/acl-one-panel.jpg") center 42% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 30%);
  mask-composite: intersect;
}
@media (max-width: 760px) {
  /* En el móvil el texto ocupa todo el ancho: el emblema se queda detrás, apagado */
  html body.rd .page-head.page-head--aclone::after { right: -10%; width: 75%; opacity: .3; }
}

/* ---------- Clasificación: zona del Major y líder ---------- */
.a1-corte {
  display: flex; align-items: center; gap: 12px; padding: 6px 16px;
  border-top: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.a1-corte i { font-style: normal; color: var(--primary); font-weight: 700; }
.a1-corte span { font: 700 0.68rem var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); }
.a1-lider { display: block; width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 60%, transparent)); }

/* ---------- Cabecera del partido: los dos banners de fondo ---------- */
.a1-match { position: relative; overflow: hidden; isolation: isolate; }
.a1-match__fondo { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: 1fr 1fr; }
/* Se ve la ilustración del banner (su parte derecha), no el logo que lleva
   a la izquierda: el escudo de verdad ya va encima */
.a1-match__fondo > span { position: relative; overflow: hidden; }   /* cada banner en su mitad */
.a1-match__fondo img {
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
  transform: scale(1.4); transform-origin: right center; opacity: .45;
}
/* Oscurecido hacia el centro, donde van el marcador y los nombres */
.a1-match__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 90% at 50% 50%, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 45%, transparent));
}
.a1-match__eq b, .a1-match__marcador, .a1-match__k { text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

/* Mapas del partido: los banners de .map-banner (como en los retos) y, a la
   derecha, quién ganó cada mapa */
.a1-map { display: flex; align-items: center; justify-content: space-between; }
.a1-map__gana {
  display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; padding: 6px 12px;
  border-radius: 6px; background: rgba(0, 0, 0, .6); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
}
.a1-map__gana small { font: 700 0.65rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

/* ---------- La carta (copiada de cartas-major.html: si cambia allí, cambiarla aquí) ---------- */
.carta-wrap { perspective: 900px; }
.carta {
  --cha: 9%;                       /* el chaflán de las esquinas */
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 5 / 7;
  padding: 1px;
  background: linear-gradient(160deg, rgba(201, 155, 255, .75), rgba(91, 33, 182, .35) 40%, rgba(168, 85, 247, .6));
  clip-path: polygon(0 0, calc(100% - var(--cha)) 0, 100% calc(var(--cha) * .714), 100% 100%, var(--cha) 100%, 0 calc(100% - var(--cha) * .714));
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .3s;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
  will-change: transform;
}
.carta.is-viva { transition: transform .08s linear, filter .3s; }
.carta:hover { filter: drop-shadow(0 22px 40px rgba(124, 58, 237, .35)); }
.carta--top { background: linear-gradient(160deg, #F2E6FF, #A855F7 35%, #3B0F7A 60%, #E9D5FF); }

.carta__in {
  position: relative; height: 100%; overflow: hidden;
  background: #0b0713;
  clip-path: inherit;
}

/* Capa 1: el soldado, muy desenfocado, llena la carta */
.carta__fondo, .carta__sujeto {
  position: absolute; inset: 0;
  background-image: var(--arte);
  background-size: var(--tam, cover);
  background-repeat: no-repeat;
  background-position: var(--pos, 50% 20%);
  transform: scaleX(var(--giro, 1));
}
.carta__fondo {
  inset: -12%;
  filter: grayscale(1) contrast(1.4) brightness(.42) blur(8px);
}
/* Capa 2: el mismo soldado, apenas desenfocado y recortado en el centro:
   da la profundidad de campo de los retratos de los menús de CoD */
.carta__sujeto {
  filter: grayscale(1) contrast(1.6) brightness(.8) blur(1.2px);
  -webkit-mask-image: radial-gradient(ellipse 62% 50% at 50% 34%, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse 62% 50% at 50% 34%, #000 40%, transparent 80%);
  transition: filter .4s;
}
.carta:hover .carta__sujeto { filter: grayscale(1) contrast(1.6) brightness(.95) blur(.3px); }

/* Capa 3: el tinte morado del cartel (sobre gris, "color" lo deja duotono) */
.carta__tinte {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(201, 155, 255, .55), transparent 70%),
    linear-gradient(180deg, #7C3AED, #4C1D95 55%, #1E0B3A);
  mix-blend-mode: color;
}
/* Capa 4: focos, oscuridad abajo para leer el texto, viñeta */
.carta__luz {
  position: absolute; inset: 0;
  background:
    linear-gradient(104deg, transparent 30%, rgba(201, 155, 255, .10) 38%, transparent 46%),
    radial-gradient(ellipse 70% 30% at 50% 0, rgba(168, 85, 247, .35), transparent 70%),
    linear-gradient(180deg, rgba(7, 5, 12, .15) 0%, transparent 30%, rgba(7, 5, 12, .55) 55%, #07050c 84%),
    radial-gradient(ellipse 110% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55));
}
/* Capa 5: grano y líneas de pantalla, muy flojos */
.carta__grano {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: .55;
}
/* Capa 6: el brillo que sigue al ratón */
.carta__brillo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(233, 213, 255, .28), transparent 45%);
  mix-blend-mode: screen;
  transition: opacity .3s;
}
.carta:hover .carta__brillo { opacity: 1; }

/* Esquinas de visor */
.carta__in::before, .carta__in::after {
  content: ""; position: absolute; z-index: 3; width: 9cqw; height: 9cqw;
  border: 1px solid rgba(201, 155, 255, .5); pointer-events: none;
}
.carta__in::before { right: 2.6cqw; bottom: 2.6cqw; width: 6cqw; height: 6cqw; border-left: 0; border-top: 0; }
.carta__in::after  { left: 5cqw; top: 5cqw; border-right: 0; border-bottom: 0; opacity: 0; }

/* Arriba: escudo pequeño a la izquierda, sello del Major a la derecha */
.carta__escudo {
  position: absolute; z-index: 4; top: 5.5cqw; left: 5.5cqw;
  width: 17cqw; height: 17cqw; display: grid; place-items: center;
  background: rgba(11, 7, 19, .62);
  border: 1px solid rgba(201, 155, 255, .35);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
  backdrop-filter: blur(4px);
}
.carta__escudo img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.carta__escudo b { font: 800 5.5cqw/1 "Saira Condensed", sans-serif; color: #fff; letter-spacing: .02em; }
.carta__sello {
  position: absolute; z-index: 4; top: 6.5cqw; right: 11cqw; text-align: right;
  font: 700 3.6cqw/1.25 "Chakra Petch", sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(233, 213, 255, .8);
}
.carta__sello span { display: block; color: #A855F7; }

/* Abajo: ID, equipo y K/D */
.carta__info { position: absolute; z-index: 4; left: 7cqw; right: 7cqw; bottom: 7cqw; }
.carta__etq {
  display: flex; align-items: center; gap: 2.5cqw; margin-bottom: 1.6cqw;
  font: 700 3.4cqw/1 "Chakra Petch", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #A855F7;
}
.carta__etq::before { content: ""; width: 6cqw; height: 1px; background: currentColor; }
.carta__id {
  margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 800 var(--id-tam, 12.5cqw)/.95 "Saira Condensed", sans-serif;
  color: #fff; letter-spacing: .01em; text-transform: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}
.carta__equipo {
  margin: 1.8cqw 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 600 3.9cqw/1.2 "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #B9A6D6;
}
/* Los cuatro datos: K/D en HP, SND y CTF, y objetivos por mapa */
.carta__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw;
  margin: 3.4cqw 0 0; padding: 3.2cqw 0 0;
  border-top: 1px solid rgba(168, 85, 247, .35);
}
.carta__stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw;
  padding: 2.2cqw 2.6cqw;
  background: rgba(30, 16, 52, .55);
  border: 1px solid rgba(168, 85, 247, .22);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 90% 100%, 0 100%);
}
.carta__stat dt { font: 700 3.1cqw/1.1 "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #A855F7; white-space: nowrap; }
.carta__stat dd { margin: 0; font: 800 8.6cqw/.9 "Saira Condensed", sans-serif; color: #F2EEF8; }
.carta__stat--obj { background: rgba(91, 33, 182, .45); border-color: rgba(201, 155, 255, .55); }
.carta__stat--obj dt { color: #E9D5FF; }
.carta__stat--obj dd {
  background: linear-gradient(180deg, #fff 0%, #E4E0EC 45%, #9C95AA 55%, #F4F1F8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, .6));
}

/* El mejor K/D de cada equipo: corona y marco plateado */
.carta--top .carta__in::after { opacity: 1; }
.carta__corona { display: none; width: 5cqw; height: 5cqw; margin-left: auto; color: #E9D5FF; }
.carta--top .carta__corona { display: block; }

@media (prefers-reduced-motion: reduce) {
  .carta, .carta.is-viva { transition: none; transform: none; }
}
/* Quien aún no ha jugado: la carta sale apagada, con rayas en vez de números */
.carta--sin .carta__sujeto, .carta--sin .carta__fondo { opacity: .55; }
.carta--sin .carta__stat dd { color: #6E6386; }
.carta--sin .carta__stat--obj { background: rgba(30, 16, 52, .55); border-color: rgba(168, 85, 247, .22); }
.carta--sin .carta__stat--obj dd { background: none; -webkit-text-fill-color: #6E6386; filter: none; }
/* Antes de la liga nadie ha jugado: el soldado no se apaga, solo las rayas */
.a1-cartas .carta--sin .carta__sujeto, .a1-cartas .carta--sin .carta__fondo { opacity: 1; }

/* ---------- Mapas sin desvelar (hasta el lunes de su semana) ---------- */
.a1-candado { width: 13px; height: 13px; flex: none; vertical-align: -2px; margin-right: 5px; color: var(--primary); }
.a1-jornada__mapas--ocultos { display: inline-flex; align-items: center; font-style: italic; }
.a1-desvelo {
  display: flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 10px 14px;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, transparent); color: var(--text-2); font-size: .88rem;
}
.a1-desvelo .a1-candado { width: 16px; height: 16px; }
.a1-map--oculto {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 12px, transparent 12px 24px), var(--surface);
  border-style: dashed;
}
.a1-map--oculto > .a1-candado { width: 26px; height: 26px; margin: 0 22px 0 0; opacity: .7; }
.a1-map__tapado { letter-spacing: .12em; color: var(--text-3); filter: blur(3px); user-select: none; }