/* ==========================================================================
   El Camino DT — La ceremonia del sorteo del club (`scripts/sorteo-club.js`)
   --------------------------------------------------------------------------
   La forma del sorteo del modo selección —presentación, bombo, lo tuyo— con
   el fondo de foto real (bolilleros, Unsplash, en alta) y el color del club.
   Sirve de pantalla entera (`sorteo.html`) y de capa (`dialog.szc--capa`,
   en Torneos). Todo con prefijo `szc`: `.sorteo` es del modo selección.
   ========================================================================== */

.szc {
  --club-a: var(--accent);
  --club-b: var(--accent);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6) var(--sp-5);
  color: var(--text-primary);
  overflow: hidden;
}

/* LA PANTALLA ENTERA: ocupa lo que deja la cabecera. */
body.szc-cuerpo { display: flex; flex-direction: column; height: var(--alto-ventana, 100dvh); overflow: hidden; }
main.szc { flex: 1 1 0; min-height: 0; width: 100%; max-width: none; margin: 0; }

/* LA CAPA: un `<dialog>` a pantalla completa. */
dialog.szc--capa {
  /* `auto` con los cuatro bordes en cero, y no `100vw`: la raíz lleva zoom en
     el escritorio y un `vw` se queda corto contra la ventana. */
  position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; border: 0; background: #08090c;
  animation: szc-entra 320ms var(--ease) both;
}
dialog.szc--capa::backdrop { background: rgb(0 0 0 / 0.7); }
.szc--fuera { animation: szc-sale 260ms var(--ease) both; }
@keyframes szc-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Lo de ADENTRO de un cuadro entra sin desplazarse: el cuadro tiene scroll
   propio, y 10 px de viaje lo desbordaban mientras duraba la entrada — al
   recargar se asomaba una barra por un segundo (8/10/2026). */
@keyframes szc-asoma { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes szc-sale { to { opacity: 0; } }

/* EL FONDO: las fotos se funden con un acercamiento lento, bajo un velo con
   el color del club. */
.szc__fondo { position: absolute; inset: 0; z-index: -1; background: #08090c; }
.szc__foto {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06); transition: opacity 1600ms var(--ease);
}
.szc__foto--on { opacity: 1; animation: szc-acerca 14s linear both; }
@keyframes szc-acerca { from { transform: scale(1.06); } to { transform: scale(1.14); } }
.szc__fondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgb(8 10 14 / 0.62), rgb(8 10 14 / 0.9) 75%),
    linear-gradient(160deg, color-mix(in srgb, var(--club-a) 30%, transparent), transparent 55%),
    linear-gradient(340deg, color-mix(in srgb, var(--club-b) 18%, transparent), transparent 50%);
  backdrop-filter: saturate(0.75);
}

.szc__x {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.18); background: rgb(8 10 14 / 0.6); color: #fff; cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.szc__x:hover { background: rgb(255 255 255 / 0.16); transform: scale(1.05); }
.szc__x svg { width: 20px; height: 20px; }

/* LOS CUADROS */
.szc__cuadro {
  width: min(1240px, 100%); max-height: 100%; min-height: 0; overflow: auto;
  display: grid; justify-items: center; align-content: center; gap: var(--sp-4); text-align: center;
  animation: szc-entra 420ms var(--ease) both; scrollbar-width: thin;
}
.szc__cuadro[hidden] { display: none; }
.szc__logo:empty { display: none; }
.szc__logo img, .szc__logo svg { height: 104px; width: auto; filter: drop-shadow(0 8px 24px rgb(0 0 0 / 0.5)); }
.szc__ante {
  margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent-texto, var(--accent));
}
.szc__titulo {
  margin: 0; font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: 0.9; font-weight: 800;
  font-stretch: var(--wd-condensed); text-transform: uppercase; text-wrap: balance;
  text-shadow: 0 6px 30px rgb(0 0 0 / 0.55);
}
.szc__datos { margin: 0; font-size: var(--fs-lg); color: var(--text-secondary); }
.szc__datos--nota { font-size: var(--fs-md); max-width: 46rem; }

.szc__favs { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--sp-4); margin-top: var(--sp-4); }
.szc__tu, .szc__cands {
  border-radius: var(--r-lg, 14px); background: rgb(14 16 22 / 0.64);
  border: 1px solid rgb(255 255 255 / 0.1); backdrop-filter: blur(10px);
  animation: szc-asoma 480ms var(--ease) 120ms both;
}
.szc__tu small, .szc__cands > small, .szc__cinta > small, .szc__clasico small, .szc__tuyos h3 {
  display: block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}

/* Tu club: el escudo grande sobre su color, el puesto por fuerza y el clásico. */
.szc__tu {
  display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-4); text-align: left;
  border-color: color-mix(in srgb, var(--club-a) 60%, rgb(255 255 255 / 0.2));
  background: linear-gradient(135deg, color-mix(in srgb, var(--club-a) 34%, rgb(14 16 22 / 0.7)), rgb(14 16 22 / 0.72) 62%);
}
.szc__tu-esc { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 0.12), transparent 70%); }
.szc__tu-esc .szc__esc { filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.5)); }
.szc__tu b { display: block; margin: 2px 0 var(--sp-2); font-size: var(--fs-2xl, 2rem); font-weight: 800; font-stretch: var(--wd-condensed); line-height: 1; }
.szc__tu-dato { display: flex; align-items: center; gap: var(--sp-2); margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.szc__tu-dato strong { color: var(--text-primary); }

/* Los candidatos: cuatro fichas con el puesto, el escudo grande y la barra de fuerza. */
.szc__cands { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.szc__cands ol { display: flex; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.szc__cand {
  position: relative; display: grid; justify-items: center; align-content: start; gap: var(--sp-2); width: 8.4rem;
  padding: var(--sp-3) var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.06);
  animation: szc-asoma 460ms var(--ease) both; animation-delay: calc(var(--k) * 90ms + 220ms);
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.szc__cand:hover { transform: translateY(-3px); background: rgb(255 255 255 / 0.08); }
.szc__cand--mia { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.szc__cand em {
  position: absolute; top: 6px; left: 8px; font-style: normal; font-size: var(--fs-2xs); font-weight: 800;
  color: var(--accent-texto, var(--accent));
}
.szc__cand .szc__esc { filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.5)); }
.szc__cand b { font-size: var(--fs-md); line-height: 1.15; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.szc__barra { display: block; width: 100%; height: 4px; margin-top: auto; border-radius: 2px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.szc__barra i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: szc-llena 900ms var(--ease) both; animation-delay: calc(var(--k) * 90ms + 500ms); }
@keyframes szc-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* LA CINTA: todos los escudos del bombo pasando despacio, debajo. */
.szc__cinta { width: min(100%, 980px); display: grid; gap: var(--sp-2); margin-top: var(--sp-3); animation: szc-asoma 480ms var(--ease) 420ms both; }
.szc__cinta-ventana { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.szc__cinta-pista { display: flex; gap: var(--sp-3); width: max-content; animation: szc-cinta 70s linear infinite; }
@keyframes szc-cinta { to { transform: translateX(-50%); } }
.szc__cinta-bola {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff, #d9dde4 70%, #aeb4bf); box-shadow: 0 3px 8px rgb(0 0 0 / 0.45);
}
.szc__cinta-bola--mia { box-shadow: 0 0 0 3px var(--accent), 0 3px 8px rgb(0 0 0 / 0.45); }
.szc__esc { object-fit: contain; flex: none; }
.szc__esc--sin { display: inline-block; border-radius: 50%; background: rgb(255 255 255 / 0.1); }

/* EL SORTEO */
.szc__sorteo { justify-items: stretch; align-content: start; text-align: left; height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.szc__mesa-tit {
  display: flex; align-items: baseline; gap: var(--sp-4); margin: 0;
  font-size: var(--fs-2xl, 2rem); font-weight: 800; font-stretch: var(--wd-condensed); text-transform: uppercase;
}
.szc__mesa-tit small { font-size: var(--fs-md); font-weight: 600; text-transform: none; color: var(--text-secondary); }
.szc__mesa { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr); gap: var(--sp-5); min-height: 0; }
.szc__lado { display: grid; align-content: start; justify-items: center; gap: var(--sp-4); min-height: 0; }

/* El bombo: un tambor de vidrio con los escudos adentro, que flotan. */
.szc__bombo { width: min(100%, 400px); aspect-ratio: 1; position: relative; }
.szc__tambor {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.22), transparent 26%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.1) 68%, rgb(255 255 255 / 0.2) 70%, transparent 71%);
  box-shadow: inset 0 0 40px rgb(255 255 255 / 0.08), 0 24px 60px rgb(0 0 0 / 0.5);
  border: 2px solid rgb(255 255 255 / 0.22);
}
.szc__bola {
  position: absolute; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9dde4 70%, #aeb4bf);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.45);
  animation: szc-flota 2.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.szc__bola .szc__esc { width: 42px !important; height: 42px !important; }
@keyframes szc-flota { 0% { translate: -3px -4px; rotate: -8deg; } 50% { translate: 4px 2px; rotate: 5deg; } 100% { translate: -1px 5px; rotate: -3deg; } }
.szc__bola--mia { box-shadow: 0 0 0 3px var(--accent), 0 3px 10px rgb(0 0 0 / 0.5); }
.szc__bola--fuera { opacity: 0; transform: scale(0.4); }
.szc__vuela {
  position: fixed; z-index: 4; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d9dde4 70%, #aeb4bf);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.5); pointer-events: none;
  transition: transform 560ms cubic-bezier(.3,.7,.2,1), opacity 560ms ease-in;
}

/* Lo que acaba de salir, en grande debajo del bombo. */
.szc__canto { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; min-height: 7.5rem; }
.szc__canto-n {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e6e8ec 60%, #b9bec8); color: #0b0c10;
  font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 8px 22px rgb(0 0 0 / 0.5);
}
.szc__canto-n--sale { animation: szc-sale-bola 460ms cubic-bezier(.16,1,.3,1) both; }
@keyframes szc-sale-bola { from { transform: scale(0.3) translateY(-30px); } to { transform: none; } }
.szc__canto-t { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--text-secondary); }
.szc__canto-t b { color: var(--text-primary); font-size: var(--fs-lg); }
.szc__canto-t i { font-style: normal; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto, var(--accent)); margin-left: 4px; }

/* La escalera: un renglón por bolilla. */
.szc__escalera {
  display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg, 14px);
  background: rgb(14 16 22 / 0.66); border: 1px solid rgb(255 255 255 / 0.08); backdrop-filter: blur(12px);
}
.szc__esc-cab, .szc__fila { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; gap: var(--sp-3); }
.szc__esc-cab { padding-bottom: var(--sp-2); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.szc__esc-cab b { font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.szc__esc-cab b:first-child { text-align: right; }
.szc__esc-cab span { text-align: center; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.szc__escalera ol { display: grid; grid-template-rows: repeat(var(--n), minmax(40px, 1fr)); margin: 0; padding: var(--sp-2) 0 0; list-style: none; overflow: auto; scrollbar-width: thin; }
.szc__fila { position: relative; }
.szc__eje { position: relative; display: grid; place-items: center; height: 100%; }
.szc__eje::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgb(255 255 255 / 0.12); }
.szc__eje i {
  position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-style: normal; font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
  background: #171a21; border: 1px solid rgb(255 255 255 / 0.14); color: var(--text-muted);
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.szc__fila--llena .szc__eje::before { background: rgb(255 255 255 / 0.4); }
.szc__fila--llena .szc__eje i { background: #fff; color: #0b0c10; border-color: #fff; }
.szc__hueco { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; min-height: 38px; font-size: var(--fs-md); }
/* Los nombres no se cortan: con puntos suspensivos «Gimnasia y Esgrima La
   Plata» y «… de Mendoza» quedaban iguales. En dos renglones se leen. */
.szc__hueco b, .szc__tuyos b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; line-height: 1.15; font-weight: 600; }
.szc__hueco--a { justify-content: flex-start; flex-direction: row-reverse; text-align: right; }
.szc__hueco--mio b { color: var(--accent-texto, var(--accent)); }
.szc__hueco--mio { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.szc__llega { animation: szc-llega 620ms var(--ease) both; }
@keyframes szc-llega { 0% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: 1; } }

/* POR GRUPOS: los bombos y los grupos. */
.szc__bombos { display: grid; gap: var(--sp-2); width: 100%; }
.szc__pote { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: rgb(14 16 22 / 0.6); border: 1px solid rgb(255 255 255 / 0.08); }
.szc__pote > span { display: block; margin-bottom: 6px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.szc__pote > div { display: flex; flex-wrap: wrap; gap: 6px; }
.szc__bola--pote { position: relative; margin: 0; width: 44px; height: 44px; animation: none; }
.szc__bola--pote .szc__esc { width: 32px !important; height: 32px !important; }
.szc__grupos { display: grid; grid-template-columns: repeat(min(var(--g), 4), minmax(0, 1fr)); gap: var(--sp-3); align-content: start; overflow: auto; min-height: 0; }
.szc__grupo { padding: var(--sp-3); border-radius: var(--r-md); background: rgb(14 16 22 / 0.66); border: 1px solid rgb(255 255 255 / 0.08); backdrop-filter: blur(10px); }
.szc__grupo h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto, var(--accent)); }
.szc__grupo ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.szc__grupo .szc__hueco { padding: 2px var(--sp-2); border-radius: 6px; background: rgb(0 0 0 / 0.35); }
.szc__grupo .szc__hueco--mio { box-shadow: inset 0 0 0 2px var(--accent); }

/* LO TUYO: el clásico cara a cara, las fichas y el resto con su barra. */
.szc__vs { gap: var(--sp-5); }
.szc__vs-lados { display: flex; align-items: center; gap: var(--sp-3); }
.szc__vs-lados .szc__esc { filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.5)); }
.szc__vs-lados i { font-style: normal; font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.szc__cand small { color: var(--text-muted); font-size: var(--fs-xs); margin-top: -4px; }
.szc__cands--rivales .szc__cand { width: 11rem; }
.szc__tuyos li > span { display: grid; gap: 6px; min-width: 0; flex: 1; }
.szc__tuyos .szc__barra { height: 3px; }
.szc__tuyos li > em { flex: none; width: 1.4rem; font-style: normal; font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.szc__tuyos li.szc__tuyo--mio { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--club-a) 22%, rgb(14 16 22 / 0.7)); }
.szc__tuyos li.szc__tuyo--mio b, .szc__tuyos li.szc__tuyo--mio > em { color: var(--accent-texto, var(--accent)); }

.szc__tuyo { align-content: center; }
.szc__clasico {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg, 14px); width: min(42rem, 100%);
  background: rgb(14 16 22 / 0.7); border: 1px solid color-mix(in srgb, var(--club-a) 50%, rgb(255 255 255 / 0.18));
  backdrop-filter: blur(10px); animation: szc-asoma 420ms var(--ease) 120ms both;
}
.szc__clasico span { display: grid; gap: 2px; }
.szc__clasico b { font-size: var(--fs-2xl, 2rem); font-weight: 800; }
.szc__clasico em { font-style: normal; color: var(--text-secondary); font-size: var(--fs-sm); }
.szc__tuyos { width: 100%; }
.szc__tuyos h3 { margin: 0 0 var(--sp-3); display: flex; justify-content: center; gap: var(--sp-2); }
.szc__tuyos h3 small { color: var(--text-secondary); }
.szc__tuyos ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.szc__tuyos li {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: rgb(14 16 22 / 0.62); border: 1px solid rgb(255 255 255 / 0.07); text-align: left;
  animation: szc-asoma 380ms var(--ease) both; animation-delay: calc(var(--k) * 40ms + 200ms);
}
.szc__tuyos b { font-size: var(--fs-md); }
.szc__rivales { display: grid; grid-template-columns: repeat(3, minmax(0, 16rem)); justify-content: center; gap: var(--sp-5); margin: var(--sp-3) 0; padding: 0; list-style: none; }
.szc__rivales li {
  display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg, 14px);
  background: rgb(14 16 22 / 0.7); border: 1px solid rgb(255 255 255 / 0.09); backdrop-filter: blur(10px);
  animation: szc-asoma 420ms var(--ease) both; animation-delay: calc(var(--k) * 120ms + 150ms);
}
.szc__rivales b { font-size: var(--fs-xl, 1.5rem); line-height: 1.15; }
.szc__rivales small { color: var(--text-muted); }

.szc__pie { display: flex; gap: var(--sp-3); justify-content: center; }
.szc__pie .action { min-width: 12rem; justify-content: center; }
.szc__pie [hidden] { display: none; }

/* EL TELÉFONO */
@media (max-width: 760px) {
  .szc { padding: var(--sp-4) var(--sp-4) var(--sp-4); }
  .szc__logo img, .szc__logo svg { height: 72px; }
  .szc__tu { padding: var(--sp-3); gap: var(--sp-3); width: 100%; }
  .szc__tu-esc { width: 72px; height: 72px; }
  .szc__tu-esc .szc__esc { width: 60px !important; height: 60px !important; }
  .szc__tu b { font-size: var(--fs-xl, 1.5rem); }
  .szc__cands { width: 100%; padding: var(--sp-3); }
  .szc__cands ol { gap: var(--sp-2); }
  .szc__cand { width: auto; flex: 1; padding: var(--sp-3) 4px var(--sp-2); }
  .szc__cand .szc__esc { width: 48px !important; height: 48px !important; }
  .szc__cand b { font-size: var(--fs-2xs); }
  .szc__cinta-bola { width: 40px; height: 40px; }
  .szc__cinta-bola .szc__esc { width: 28px !important; height: 28px !important; }
  .szc__mesa { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-3); }
  .szc__mesa--pares .szc__lado { grid-template-columns: 132px minmax(0, 1fr); align-items: center; justify-items: start; }
  .szc__mesa--pares .szc__bombo { width: 132px; }
  .szc__mesa--pares .szc__bola { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .szc__mesa--pares .szc__bola .szc__esc { width: 19px !important; height: 19px !important; }
  .szc__vuela { width: 34px; height: 34px; }
  .szc__vuela .szc__esc { width: 24px !important; height: 24px !important; }
  .szc__hueco { min-height: 30px; }
  .szc__hueco .szc__esc { width: 24px !important; height: 24px !important; }
  .szc__escalera ol { grid-template-rows: repeat(var(--n), minmax(32px, 1fr)); }
  .szc__canto { justify-items: start; text-align: left; min-height: 0; grid-template-columns: auto 1fr; align-items: center; }
  .szc__canto-n { width: 44px; height: 44px; font-size: 1.2rem; }
  .szc__canto-t, .szc__canto-t b { font-size: var(--fs-sm); }
  .szc__mesa--grupos .szc__bombos { display: none; }
  .szc__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szc__escalera { padding: var(--sp-2); }
  .szc__esc-cab, .szc__fila { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: var(--sp-2); }
  .szc__esc-cab span { font-size: 0; }
  .szc__hueco { font-size: var(--fs-xs); gap: var(--sp-2); }
  .szc__rivales { grid-template-columns: 1fr; gap: var(--sp-2); }
  .szc__rivales li { grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding: var(--sp-3); text-align: left; }
  .szc__rivales li img { width: 56px !important; height: 56px !important; grid-row: span 2; }
  .szc__rivales b { font-size: var(--fs-lg); }
  .szc__clasico { padding: var(--sp-3); gap: var(--sp-3); }
  .szc__clasico img { width: 52px !important; height: 52px !important; }
  .szc__tuyos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szc__tuyos li img { width: 36px !important; height: 36px !important; }
  .szc__tuyos b { font-size: var(--fs-sm); }
  .szc__clasico b { font-size: var(--fs-lg); }
  .szc__pie { width: 100%; }
  .szc__pie .action { min-width: 0; flex: 1; }
}

/* LA CABECERA DE `sorteo.html` EN EL TELÉFONO (lo que hacía `sorteo.css`,
   28/9/2026): «Volver a elegir club», la marca y la fecha no entran juntos en
   375. La marca no se parte y la fecha baja a su renglón, alineada a la
   derecha, con alto propio para que no quede recortada. */
@media (max-width: 520px) {
  .szc-cuerpo .chrome .marca { flex: none; white-space: nowrap; }
  .szc-cuerpo .chrome__row--primary { flex-wrap: wrap; row-gap: var(--sp-1); height: auto; overflow: visible; padding-bottom: var(--sp-2); }
  .szc-cuerpo .chrome__row--primary > [data-f='dia'] { flex-basis: 100%; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .szc__cuadro, .szc__tuyos li, .szc__rivales li, .szc__clasico, .szc__tambor, .szc__bola, .szc__foto--on, dialog.szc--capa,
  .szc__tu, .szc__cands, .szc__cand, .szc__barra i, .szc__cinta, .szc__cinta-pista { animation: none; }
}

/* «Volver a elegir club», a la izquierda de la marca, con el mismo aire que el
   «Volver» de la pantalla de firma. Desde la segunda temporada no se dibuja
   (ver `sorteo.js`): el `display` le ganaría al atributo `hidden` sin la
   primera línea. */
.sorteo__volver[hidden] { display: none; }
.sorteo__volver { display: inline-flex; align-items: center; gap: var(--sp-3); margin-right: var(--sp-5); font-size: var(--fs-sm); }

/* LA FASE LIGA Y LAS LLAVES (8/10/2026): la localía de cada rival, y los
   ocho rivales de la fase liga en dos filas de cuatro. */
.szc__sede {
  flex: none; margin-left: auto; padding: 1px 7px; border-radius: 999px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); background: rgb(255 255 255 / 0.08);
}
.szc__cand .szc__sede { margin: 0; }
.szc__cands--liga ol { display: grid; grid-template-columns: repeat(4, minmax(0, 9.5rem)); justify-content: center; }
.szc__cands--liga .szc__cand { width: auto; }
@media (max-width: 760px) {
  .szc__cands--liga ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.szc__grupos--liga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.szc__grupos--liga .szc__hueco { min-height: 40px; }

/* ==========================================================================
   LA MESA DE LOS GRUPOS, COMO EN LA TELE (9/10/2026): la pantalla gigante del
   escenario con los bombos en columnas y los grupos en tarjetas, y el zócalo
   que canta cada bolilla. El color sale del torneo (`data-tema`).
   ========================================================================== */
.szc { --tv-a: #0a1a4a; --tv-b: #12307a; --tv-luz: #6ea8ff; --tv-tinta: #dfe9ff; }
.szc[data-tema='oro'] { --tv-a: #120d02; --tv-b: #3a2a06; --tv-luz: #f2c14e; --tv-tinta: #fff3d1; }
.szc[data-tema='verde'] { --tv-a: #04140f; --tv-b: #0b3a2a; --tv-luz: #3edc9a; --tv-tinta: #dcfff0; }
.szc[data-tema='azul'] { --tv-a: #050c2e; --tv-b: #0d2266; --tv-luz: #5fa8ff; --tv-tinta: #e2edff; }

.szc__mesa.szc__tv { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--sp-3); min-height: 0; height: 100%; }
.szc__pantalla {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr); align-items: start; gap: var(--sp-4); min-height: 0; overflow: auto;
  padding: var(--sp-4); border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--tv-luz) 26%, transparent), transparent 60%),
    linear-gradient(180deg, var(--tv-b), var(--tv-a));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tv-luz) 35%, transparent), 0 30px 80px rgb(0 0 0 / 0.55), 0 0 60px color-mix(in srgb, var(--tv-luz) 18%, transparent);
}
/* La trama de la pantalla LED y el barrido de luz. */
.szc__pantalla::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px); }
.szc__pantalla::after { content: ''; position: absolute; inset: -20% -40%; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 0.07) 50%, transparent 60%); animation: szc-barrido 6s linear infinite; }
@keyframes szc-barrido { from { transform: translateX(-30%); } to { transform: translateX(30%); } }

.szc__bombos-tv { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--b), minmax(0, 1fr)); gap: 6px; min-height: 0; align-content: start; }
.szc__pote-tv { min-width: 0; display: grid; align-content: start; gap: 4px; }
.szc__pote-tv h4 { margin: 0; padding: 5px 6px; border-radius: 6px; text-align: center; font-size: var(--fs-2xs); font-weight: 900; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--tv-a); background: var(--tv-luz); }
.szc__pote-tv ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.szc__bola--fila { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 6px; border-radius: 4px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); font-size: 11px; font-weight: 700; color: var(--tv-tinta); text-transform: uppercase; letter-spacing: 0.02em; transition: opacity 260ms ease, filter 260ms ease; position: static; transform: none; animation: none; }
.szc__bola--fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szc__bola--fila.szc__bola--mia { box-shadow: inset 0 0 0 1.5px var(--accent); }
.szc__bola--fila.szc__bola--fuera { opacity: 0.28; filter: grayscale(1); }

.szc__tv .szc__grupos { position: relative; z-index: 1; grid-template-columns: repeat(min(var(--g), 4), minmax(0, 1fr)); gap: 8px; overflow: visible; }
.szc__tv .szc__grupo { padding: 0; border-radius: 8px; overflow: hidden; background: rgb(0 0 0 / 0.32); border: 1px solid color-mix(in srgb, var(--tv-luz) 30%, transparent); backdrop-filter: none; }
.szc__tv .szc__grupo h3 { margin: 0; padding: 5px 8px; font-size: var(--fs-xs); font-weight: 900; color: var(--tv-a); background: linear-gradient(90deg, var(--tv-luz), color-mix(in srgb, var(--tv-luz) 60%, #fff)); }
.szc__tv .szc__grupo ol { gap: 0; }
.szc__tv .szc__hueco { min-height: 28px; gap: 6px; padding: 2px 8px; border-radius: 0; background: transparent; border-top: 1px solid rgb(255 255 255 / 0.06); font-size: 12px; color: var(--tv-tinta); text-transform: uppercase; font-weight: 700; }
.szc__tv .szc__hueco b { -webkit-line-clamp: 1; font-weight: 800; }
.szc__tv .szc__hueco .szc__esc { width: 20px !important; height: 20px !important; flex: none; }
.szc__hueco-n { font-style: normal; font-size: 10px; color: color-mix(in srgb, var(--tv-tinta) 40%, transparent); }
.szc__tv .szc__hueco--mio { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.szc__tv .szc__llega { animation: szc-llega-tv 600ms cubic-bezier(.16,1,.3,1); }
@keyframes szc-llega-tv { from { background: color-mix(in srgb, var(--tv-luz) 45%, transparent); } }

/* EL ZÓCALO de la transmisión. */
.szc__zocalo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: 10px 18px 10px 10px; border-radius: 14px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.88)); color: #0b0d14; box-shadow: 0 12px 40px rgb(0 0 0 / 0.45); border-left: 6px solid var(--tv-luz); }
.szc__zocalo--mio { border-left-color: var(--accent); box-shadow: 0 12px 40px rgb(0 0 0 / 0.45), 0 0 0 3px var(--accent); }
.szc__zocalo-bola { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9dde6 70%); box-shadow: inset 0 -4px 8px rgb(0 0 0 / 0.15), 0 4px 12px rgb(0 0 0 / 0.25); }
.szc__zocalo-bola--sale { animation: szc-bolilla 520ms cubic-bezier(.16,1,.3,1) both; }
@keyframes szc-bolilla { from { transform: scale(0.4) rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } }
.szc__zocalo-txt small { display: block; font-size: var(--fs-2xs); font-weight: 900; letter-spacing: var(--tracking-label); text-transform: uppercase; color: color-mix(in srgb, var(--tv-b) 80%, #000); }
.szc__zocalo .szc__canto-t { color: #0b0d14; font-size: var(--fs-lg); }
.szc__zocalo .szc__canto-t b { color: #0b0d14; font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; font-stretch: var(--wd-condensed); }
.szc__zocalo .szc__canto-t i { color: #0b0d14; background: var(--tv-luz); padding: 2px 8px; border-radius: 4px; margin-left: 8px; font-size: var(--fs-xs); vertical-align: 3px; }
.szc__zocalo-logo { display: grid; place-items: center; height: 44px; }
.szc__zocalo-logo img, .szc__zocalo-logo svg { max-height: 44px; width: auto; }

@media (prefers-reduced-motion: reduce) { .szc__pantalla::after, .szc__zocalo-bola--sale { animation: none; } }
@media (max-width: 900px) {
  .szc__pantalla { grid-template-columns: minmax(0, 1fr); }
  .szc__bombos-tv { display: none; }
  .szc__tv .szc__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szc__zocalo .szc__canto-t b { font-size: var(--fs-md); }
}
/* La fila del bombo no es una bolilla: se le sacan la forma y el tamaño. */
.szc__tv .szc__bola.szc__bola--fila { position: static; display: flex; width: auto; height: auto; margin: 0; border-radius: 4px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); rotate: none; translate: none; transform: none; }
.szc__tv .szc__bola--fila .szc__esc { width: 18px !important; height: 18px !important; flex: none; }
.szc__tv .szc__bola--fila.szc__bola--fuera { opacity: 0.28; filter: grayscale(1); transform: none; }
.szc__tv .szc__bola--fila.szc__bola--mia { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* La pantalla toma su alto y se centra: sin un hueco vacío debajo. */
.szc__mesa.szc__tv { grid-template-rows: auto auto; align-content: center; }
.szc__pantalla { max-height: calc(100vh / var(--escala-sitio, 1) - 15rem); }
.szc__tv .szc__hueco { min-height: 32px; font-size: 13px; }
.szc__tv .szc__hueco .szc__esc { width: 22px !important; height: 22px !important; }
.szc__tv .szc__grupo h3 { font-size: var(--fs-sm); padding: 6px 10px; }
.szc__bola--fila { font-size: 12px; padding: 4px 6px; }
/* Más grande: la pantalla del escenario es lo que se mira. */
@media (min-width: 901px) {
  .szc__pantalla { padding: var(--sp-5); gap: var(--sp-5); }
  .szc__tv .szc__hueco { min-height: 42px; font-size: 15px; gap: 8px; padding: 4px 10px; }
  .szc__tv .szc__hueco .szc__esc { width: 28px !important; height: 28px !important; }
  .szc__tv .szc__grupo h3 { font-size: var(--fs-md); padding: 8px 12px; }
  .szc__tv .szc__grupos { gap: 12px; }
  .szc__bombos-tv { gap: 8px; }
  .szc__tv .szc__bola.szc__bola--fila { font-size: 13px; padding: 7px 8px; gap: 8px; }
  .szc__tv .szc__bola--fila .szc__esc { width: 22px !important; height: 22px !important; }
  .szc__pote-tv h4 { font-size: var(--fs-xs); padding: 7px 6px; }
  .szc__pote-tv ol { gap: 5px; }
  .szc__zocalo { padding: 14px 24px 14px 14px; }
  .szc__zocalo-bola { width: 68px; height: 68px; }
  .szc__zocalo .szc__canto-t b { font-size: var(--fs-2xl); }
}
/* La cabecera del escenario con el logo oficial del torneo, en su placa. */
.szc__tv-cab { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid color-mix(in srgb, var(--tv-luz) 30%, transparent); }
.szc__tv-logo { display: grid; place-items: center; width: 92px; height: 92px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.4), 0 0 0 3px color-mix(in srgb, var(--tv-luz) 50%, transparent); }
.szc__tv-logo img { width: 100%; height: 100%; object-fit: contain; }
.szc__tv-cab small { display: block; font-size: var(--fs-xs); font-weight: 900; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--tv-luz); }
.szc__tv-cab b { display: block; font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 900; font-stretch: var(--wd-condensed); line-height: 1; text-transform: uppercase; color: var(--tv-tinta); }
.szc__tv-datos { font-size: var(--fs-sm); font-weight: 700; color: color-mix(in srgb, var(--tv-tinta) 70%, transparent); }
.szc__intro .szc__logo img { width: 128px; height: 128px; object-fit: contain; }
@media (max-width: 900px) { .szc__tv-logo { width: 60px; height: 60px; } .szc__tv-datos { display: none; } }
/* LA COPA, GRANDE, en la cabecera del escenario (9/10/2026). */
.szc__tv-copa { display: grid; place-items: center; height: 116px; margin: -10px 0 0; }
.szc__copa-img { height: 100%; width: auto; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--tv-luz) 55%, transparent)) drop-shadow(0 10px 18px rgb(0 0 0 / 0.5)); animation: szc-copa 4s ease-in-out infinite; }
@keyframes szc-copa { 50% { transform: translateY(-4px); filter: drop-shadow(0 0 34px color-mix(in srgb, var(--tv-luz) 75%, transparent)) drop-shadow(0 14px 22px rgb(0 0 0 / 0.5)); } }
.szc__intro .szc__logo { width: 180px; height: 180px; padding: 14px; border-radius: 24px; background: #fff; display: grid; place-items: center; }
.szc__intro .szc__logo img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .szc__copa-img { animation: none; } }

/* MÁS GRANDE (9/10/2026, «más grande porfa»): el sorteo usa todo el ancho. */
@media (min-width: 901px) {
  .szc__sorteo { width: min(1720px, 96vw); max-width: none; justify-self: center; }
  .szc__tv-logo { width: 116px; height: 116px; }
  .szc__tv-cab b { font-size: clamp(2rem, 3.2vw, 3.2rem); }
  .szc__tv .szc__hueco { min-height: 48px; font-size: 17px; }
  .szc__tv .szc__hueco .szc__esc { width: 32px !important; height: 32px !important; }
  .szc__tv .szc__grupo h3 { font-size: var(--fs-lg); padding: 9px 14px; }
  .szc__tv .szc__bola.szc__bola--fila { font-size: 14px; padding: 9px 10px; }
  .szc__tv .szc__bola--fila .szc__esc { width: 24px !important; height: 24px !important; }
  .szc__pote-tv h4 { font-size: var(--fs-sm); padding: 9px 6px; }
  .szc__zocalo .szc__canto-t b { font-size: 2.2rem; }
  .szc__zocalo-bola { width: 76px; height: 76px; }
}

/* Los datos de cada rival en su ficha. */
.szc__cand--rival { align-content: start; }
.szc__rival-datos { display: grid; gap: 4px; width: 100%; margin: 6px 0 4px; font-size: var(--fs-xs); }
.szc__rival-datos div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; background: rgb(255 255 255 / 0.05); }
.szc__rival-datos dt { color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-2xs); }
.szc__rival-datos dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-primary); text-align: right; }
.szc__rival-datos dd span { color: var(--accent-texto, var(--accent)); }
/* Las fichas de los rivales, anchas, con cada dato en dos renglones. */
.szc__cands--rivales .szc__cand.szc__cand--rival { width: 15.5rem; padding: 14px 14px 12px; min-width: 0; }
.szc__rival-datos div { display: grid; justify-content: stretch; gap: 1px; padding: 6px 10px; text-align: left; }
.szc__rival-datos dd { text-align: left; white-space: normal; overflow: visible; font-size: var(--fs-sm); line-height: 1.25; }

/* ==========================================================================
   TU GRUPO, CON MAGIA (9/10/2026)
   ========================================================================== */
.szc__tuyo { position: relative; }
.szc__gloria { position: absolute; inset: -6vh 0 auto; height: 70vh; display: grid; place-items: center; pointer-events: none; z-index: 0; overflow: hidden; }
.szc__rayos { position: absolute; width: 140vh; height: 140vh; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tv-luz) 18%, transparent) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); animation: szc-rayos 40s linear infinite; }
@keyframes szc-rayos { to { transform: rotate(360deg); } }
.szc__gloria-copa { position: relative; height: 62vh; opacity: 0.22; animation: szc-gloria 1.6s cubic-bezier(.16,1,.3,1) both; }
.szc__gloria-copa img { height: 100%; width: auto; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--tv-luz) 70%, transparent)); }
@keyframes szc-gloria { from { opacity: 0; transform: scale(0.8) translateY(30px); } }
.szc__tuyo > :not(.szc__gloria) { position: relative; z-index: 1; }
.szc__titulo--grupo { background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--tv-luz) 80%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px color-mix(in srgb, var(--tv-luz) 45%, transparent)); animation: szc-titulo 900ms cubic-bezier(.16,1,.3,1) both; }
@keyframes szc-titulo { from { opacity: 0; letter-spacing: 0.3em; filter: blur(8px); } }

/* Tu club, con su color y el grupo entero. */
.szc__tu--grupo { align-items: flex-start; background: linear-gradient(145deg, color-mix(in srgb, var(--club-a, var(--accent)) 70%, #000), color-mix(in srgb, var(--club-b, var(--club-a, #333)) 40%, #000) 70%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 20px 50px rgb(0 0 0 / 0.5); animation: szc-carta 700ms cubic-bezier(.16,1,.3,1) both; }
.szc__tu--grupo .szc__tu-esc img { filter: drop-shadow(0 10px 24px rgb(0 0 0 / 0.5)); animation: szc-flota-esc 5s ease-in-out infinite; }
.szc__tu-grupo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.szc__tu-grupo li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgb(0 0 0 / 0.25); font-size: var(--fs-sm); font-weight: 700; }
.szc__tu-grupo li i { font-style: normal; width: 1.2em; color: rgb(255 255 255 / 0.6); }
.szc__tu-grupo li.es-mio { background: rgb(255 255 255 / 0.16); box-shadow: inset 3px 0 0 var(--accent); }

/* Cada rival: los colores de su club arriba, entra de a uno girando. */
.szc__cand--rival { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: rgb(14 16 22 / 0.78);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 40px rgb(0 0 0 / 0.45);
  animation: szc-carta 760ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(350ms + var(--k, 0) * 180ms); transform-origin: 50% 100%; }
.szc__cand--rival::before { content: ''; position: absolute; inset: 0 0 auto; height: 46%; background: linear-gradient(160deg, var(--club-a, #444), color-mix(in srgb, var(--club-b, var(--club-a, #444)) 60%, transparent)); opacity: 0.55; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
.szc__cand--rival > * { position: relative; }
.szc__cand--rival img { filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.55)); }
@media (hover: hover) { .szc__cand--rival { transition: transform 260ms cubic-bezier(.16,1,.3,1); } .szc__cand--rival:hover { transform: translateY(-6px); } }
@keyframes szc-carta { from { opacity: 0; transform: perspective(900px) rotateY(-70deg) translateY(24px); } }
@keyframes szc-flota-esc { 50% { transform: translateY(-6px); } }
.szc__cand--rival .szc__barra i { animation: szc-barra 1.2s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(900ms + var(--k, 0) * 180ms); transform-origin: left; }
@keyframes szc-barra { from { transform: scaleX(0); } }
.szc__rival-cruces { order: 9; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 8px; }
.szc__rival-cruces span { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; text-align: center; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: rgb(255 255 255 / 0.05); }
.szc__rival-cruces span b { font-size: var(--fs-sm); letter-spacing: 0; color: var(--text-primary); text-transform: none; }
.szc__rival-cruces span[data-sede='L'] { box-shadow: inset 0 -2px 0 var(--accent); }
@media (prefers-reduced-motion: reduce) { .szc__rayos, .szc__gloria-copa, .szc__titulo--grupo, .szc__tu--grupo, .szc__cand--rival, .szc__cand--rival .szc__barra i, .szc__tu--grupo .szc__tu-esc img { animation: none; } }
.szc__tuyo { overflow-x: clip; overflow-y: auto; }
.szc__gloria { inset: 0 0 auto; }
.szc__gloria-copa { opacity: 0.34; }
.szc__favs--grupo { align-items: flex-start; }
.szc__tu--grupo { align-self: flex-start; }

/* ==========================================================================
   EL ESTUDIO DE TELEVISIÓN (9/10/2026, «el fondo del bingo no está muy bueno,
   pongamos algo acorde» y «más grande, más televisivo»): sin fotos. El fondo
   es un escenario hecho acá —reflectores que barren desde arriba, el piso que
   refleja la luz, el color del torneo— y una mosca de transmisión arriba.
   ========================================================================== */
.szc:not([data-tema]) { --tv-a: #07080c; --tv-b: color-mix(in srgb, var(--club-a, #1b2440) 45%, #07080c); --tv-luz: var(--accent); --tv-tinta: #eef1f8; }
.szc__fondo { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tv-b) 90%, #fff 4%), var(--tv-a) 70%); overflow: hidden; }
.szc__fondo::after { background: radial-gradient(ellipse 70% 45% at 50% 38%, transparent, rgb(0 0 0 / 0.55) 80%); }
.szc__haz { position: absolute; top: -10%; width: 34vw; height: 120%; transform-origin: 50% 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tv-luz) 40%, transparent), transparent 75%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(10px); opacity: 0.35; mix-blend-mode: screen; }
.szc__haz--1 { left: 8%; animation: szc-barre 9s ease-in-out infinite alternate; }
.szc__haz--2 { left: 33%; opacity: 0.22; animation: szc-barre 12s ease-in-out -4s infinite alternate-reverse; }
.szc__haz--3 { right: 8%; animation: szc-barre 10s ease-in-out -2s infinite alternate-reverse; }
@keyframes szc-barre { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.szc__piso { position: absolute; inset: auto -10% -6% -10%; height: 42%; background:
    radial-gradient(ellipse 50% 40% at 50% 0%, color-mix(in srgb, var(--tv-luz) 30%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 80px),
    linear-gradient(180deg, transparent, rgb(0 0 0 / 0.6));
  transform: perspective(600px) rotateX(58deg); transform-origin: 50% 0; }

/* La mosca de transmisión, arriba a la izquierda. */
.szc__mosca { position: absolute; top: 18px; left: 22px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 8px; background: rgb(0 0 0 / 0.55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); backdrop-filter: blur(6px); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; }
.szc__mosca i { font-style: normal; padding: 3px 8px; border-radius: 4px; background: #e2232a; animation: szc-vivo 1.6s ease-in-out infinite; }
@keyframes szc-vivo { 50% { opacity: 0.55; } }
.szc__mosca small { font-size: inherit; font-weight: 600; color: rgb(255 255 255 / 0.65); }
.szc--capa .szc__mesa-tit { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .szc__haz, .szc__mosca i { animation: none; } }

/* TU GRUPO, MÁS GRANDE Y DE TELE. */
@media (min-width: 1000px) {
  .szc__titulo--grupo { font-size: clamp(5rem, 9vw, 9rem); line-height: 0.9; }
  .szc__tuyo .szc__ante { font-size: var(--fs-md); }
  .szc__favs--grupo { gap: 18px; margin-top: 28px; }
  .szc__tu--grupo { padding: 22px; min-width: 22rem; }
  .szc__tu--grupo .szc__tu-esc img { width: 140px !important; height: 140px !important; }
  .szc__tu--grupo b { font-size: var(--fs-2xl); }
  .szc__tu-grupo li { font-size: var(--fs-md); padding: 8px 10px; }
  .szc__tu-grupo li img { width: 28px !important; height: 28px !important; }
  .szc__cands--rivales .szc__cand.szc__cand--rival { width: 19rem; padding: 18px 16px 14px; }
  .szc__cand--rival > img { width: 120px !important; height: 120px !important; }
  .szc__cand--rival > b { font-size: var(--fs-xl); }
  .szc__rival-datos { font-size: var(--fs-sm); }
  .szc__rival-datos dd { font-size: var(--fs-md); }
  .szc__rival-cruces span b { font-size: var(--fs-md); }
  .szc__tuyo .szc__datos--nota { font-size: var(--fs-md); margin-top: 18px; }
}
@media (min-width: 1000px) {
  .szc__favs--grupo { flex-wrap: nowrap; }
  .szc__titulo--grupo { font-size: clamp(4.5rem, 7vw, 7.5rem); }
  .szc__cands--rivales .szc__cand.szc__cand--rival { width: 17rem; }
  .szc__tu--grupo { min-width: 19rem; }
}
/* El halo que rescata un escudo oscuro (`--halo-filtro`, app.css) va PRIMERO;
   la sombra, después. Sin esto la sombra pisaba el halo y el escudo de Mineiro
   desaparecía. En los grandes, el halo más grueso. */
.szc__cand--rival > img, .szc__tu--grupo .szc__tu-esc img { --halo: 1.6px; filter: var(--halo-filtro, drop-shadow(0 0 0 transparent)) drop-shadow(0 8px 18px rgb(0 0 0 / 0.55)); }

/* APROVECHAR LA PANTALLA (9/10/2026): el bloque de arriba ocupa el ancho, las
   fichas de los rivales se reparten el espacio, y abajo el camino en el grupo. */
@media (min-width: 1000px) {
  .szc__tuyo { align-content: center; }
  .szc__favs--grupo { width: min(1720px, 94vw); flex-wrap: nowrap; align-items: stretch; }
  .szc__tu--grupo { flex: 0 0 24%; min-width: 0; flex-direction: column; align-items: stretch; text-align: left; }
  .szc__tu--grupo .szc__tu-esc { align-self: center; }
  .szc__tu--grupo .szc__tu-esc img { width: 170px !important; height: 170px !important; }
  .szc__favs--grupo .szc__cands--rivales { flex: 1 1 auto; min-width: 0; }
  .szc__favs--grupo .szc__cands--rivales ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .szc__cands--rivales .szc__cand.szc__cand--rival { width: auto; }
  .szc__cand--rival > img { width: 150px !important; height: 150px !important; }
  .szc__cand--rival > b { font-size: var(--fs-2xl); }
}
.szc__camino { width: min(1720px, 94vw); margin: 22px auto 0; }
.szc__camino h3 { margin: 0 0 10px; text-align: center; font-size: var(--fs-xs); font-weight: 900; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--tv-luz, var(--accent)); }
.szc__camino ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.szc__camino li { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px; text-align: center; background: rgb(14 16 22 / 0.78); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); animation: szc-carta 640ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(1100ms + var(--k, 0) * 110ms); }
.szc__camino li small { font-size: var(--fs-2xs); font-weight: 900; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.szc__camino li b { font-size: var(--fs-md); }
.szc__camino li span { font-size: var(--fs-sm); color: var(--text-secondary); }
.szc__camino li em { font-style: normal; font-size: var(--fs-2xs); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / 0.08); }
.szc__camino li[data-sede='L'] em { background: var(--accent); color: var(--text-on-accent, #111); }
@media (max-width: 999px) { .szc__camino ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .szc__camino li { animation: none; } }
/* La pantalla de tu grupo usa el ancho de la ventana, no los 1240 del cuadro. */
.szc__cuadro.szc__tuyo { width: min(1760px, 96vw); }
.szc__favs--grupo, .szc__camino { width: 100%; }
.szc__intro .szc__logo:empty, .szc__tv-logo:empty { display: none; }
.szc__intro .szc__logo:empty, .szc__tv-logo:empty { display: none; }
/* Como en la tele: la bolilla gira tapada antes de abrirse. */
.szc__zocalo-bola--gira { animation: szc-gira 0.5s linear infinite; }
@keyframes szc-gira { to { transform: rotate(360deg); } }
.szc__bola-tapa { font-size: 1.6rem; font-weight: 900; color: var(--tv-b, #333); }
.szc__zocalo--espera .szc__canto-t b { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .szc__zocalo-bola--gira { animation: none; } }
/* La fase liga: ocho rivales en dos filas de cuatro, sin cruces repetidos
   (cada rival se juega una vez) y fichas más compactas. */
.szc__camino ol { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
@media (min-width: 1000px) {
  .szc__favs--liga .szc__cands--ocho ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .szc__cands--ocho .szc__cand--rival > img { width: 84px !important; height: 84px !important; }
  .szc__cands--ocho .szc__cand--rival > b { font-size: var(--fs-lg); }
  .szc__cands--ocho .szc__rival-datos { grid-template-columns: 1fr 1fr; }
  .szc__cands--ocho .szc__rival-datos div:last-child { grid-column: 1 / -1; }
  .szc__cands--ocho .szc__cand.szc__cand--rival { padding: 12px 12px 10px; }
}
.szc__cands--ocho .szc__rival-cruces { display: none; }
@media (max-width: 999px) { .szc__camino ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* La fase liga trae más: el título cede alto para que entre sin desplazar. */
@media (min-width: 1000px) {
  .szc__tuyo:has(.szc__favs--liga) .szc__titulo--grupo { font-size: clamp(3rem, 4.6vw, 4.8rem); }
  .szc__tuyo:has(.szc__favs--liga) .szc__camino { margin-top: 14px; }
  .szc__tuyo:has(.szc__favs--liga) .szc__camino li { padding: 8px 6px; }
}
/* El cierre del sorteo: el zócalo en el color del torneo y el botón que late. */
.szc__zocalo--fin { background: linear-gradient(90deg, var(--tv-luz), color-mix(in srgb, var(--tv-luz) 70%, #fff)); }
.szc__zocalo--fin .szc__zocalo-bola { display: none; }
.szc__seguir--late { animation: szc-late 1.4s ease-in-out infinite; }
@keyframes szc-late { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .szc__seguir--late { animation: none; } }

/* EN EL TELÉFONO (9/10/2026, lo vio la sesión de Marketing a 430 px): la
   copa de la cabecera se comía el ancho y partía «SORTEO DE LA FASE LIGA» en
   una palabra por renglón y el nombre del torneo en «CHA PIONS LEA JE»; los
   grupos G y H quedaban cortados abajo; «Visitante» cortaba los nombres; y la
   mosca pisaba la cruz. La copa pasa al fondo de la cabecera, la pantalla se
   corre por dentro, la sede se dice con una letra y la mosca deja lugar. */
@media (max-width: 900px) {
  .szc__tv-cab { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); overflow: hidden; }
  .szc__tv-cab > :not(.szc__tv-copa) { position: relative; z-index: 1; }
  .szc__tv-copa { position: absolute; right: -8px; top: 50%; translate: 0 -50%; height: 96px; margin: 0; opacity: 0.35; pointer-events: none; z-index: 0; }
  .szc__tv-cab small { font-size: var(--fs-2xs); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .szc__tv-cab b { font-size: clamp(1.25rem, 6.4vw, 1.8rem); overflow-wrap: normal; word-break: keep-all; }
  .szc__pantalla { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; max-height: calc(100dvh / var(--escala-sitio, 1) - 13rem); }
  .szc__pantalla::after { inset: 0 -40%; }
  .szc__tv .szc__hueco { font-size: 12px; gap: 5px; padding: 2px 6px; }
  .szc__tv .szc__hueco b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .szc__tv .szc__hueco .szc__sede { flex: none; min-width: 1.6em; text-align: center; padding-inline: 4px; }
  .szc__tv .szc__hueco .szc__sede-largo { display: none; }
  .szc__tv .szc__hueco .szc__sede-corto { display: inline; }
  .szc__mosca { top: 12px; left: 12px; right: 64px; padding-right: 10px; }
  .szc__mosca small { display: none; }
}

.szc__sede-corto { display: none; }

/* DESDE LA TRIBUNA (9/10/2026): tu club no está en el bombo; la tarjeta lo
   dice apagada, sin el brillo de un participante. */
.szc__tu--tribuna { opacity: 0.82; filter: saturate(0.6); }
.szc__tu--tribuna .szc__tu-esc { opacity: 0.7; }