/* CSS diferido de football-club-manager.html (sync57): estilos de pantallas que solo se abren con un toque (Mercado de fichajes, Desafios, Estadisticas de minijuegos).
   Se carga sin bloquear el primer pintado (<link rel="preload" ... onload>); las .overlay estan ocultas por la regla base que sigue inline en el HTML.
   Ver docs/LEEME-RENDIMIENTO-WEB.txt. */
/* ---------------- transfer market (fichajes) ---------------- */
.market-card{
  display:flex; flex-direction:column; gap:10px; background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--line-strong); border-radius:18px; padding:12px 14px; margin-bottom:10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}
.market-card-top{ display:flex; align-items:center; gap:12px; }
.market-buy-btn{ flex:none; border-radius:12px; padding:10px 12px; font-size:12px; white-space:nowrap; }
.market-buy-btn:disabled{ opacity:0.45; cursor:default; }
/* Pedido explícito del usuario ("mostrar un mensaje explicativo" al intentar fichar sin plata):
   el botón de fichar de una tarjeta que no se puede pagar ya NO lleva el atributo `disabled`
   (un botón disabled no dispara click en el navegador, así que tocarlo antes no hacía nada) —
   se le sacó `disabled` y ahora se ve gris solo vía esta clase, para poder seguir recibiendo el
   click y abrir #notEnoughMoneyOverlay desde buyPlayer(). Mismo look que .market-buy-btn:disabled. */
.market-buy-btn.unaffordable{ opacity:0.45; }
/* Contract-length picker — shared between the fichaje card and the renewal sheet. Only shown
   once contracts are active; before that, fichajes stay a single flat price like today. */
.market-contract-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:2px; border-top:1px solid var(--line); }
.mc-label{ font-size:10px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em; font-weight:700; }
.mc-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.mc-chip{
  border:1px solid var(--line-strong); background:var(--panel-3); color:var(--ink-dim); border-radius:999px;
  padding:5px 11px; font-size:11px; font-weight:700; cursor:pointer;
}
.mc-chip.active{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }
.mc-chip:active{ opacity:0.75; }

/* ---- market filters ("Filtros" de fichajes) ----
   A collapsible panel above the candidate list: price range, "solo los que puedo pagar",
   age range, and a min–max range per habilidad (Ataque/Defensa/Pase/Energía). Collapsed by
   default so the sheet still opens straight onto the candidate list like before — filters
   are opt-in extra power, not a wall you have to get through first. */
.market-filters-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--panel-3); border:1px solid var(--line-strong); border-radius:12px;
  padding:10px 12px; margin-bottom:10px; cursor:pointer; color:var(--ink); font-family:'Inter',sans-serif;
}
.market-filters-toggle .mf-toggle-label{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; }
.market-filters-toggle .mf-count{
  font-size:10.5px; font-weight:700; color:var(--turf); background:var(--turf-soft);
  border-radius:999px; padding:2px 8px;
}
.market-filters-toggle .mf-chevron{ transition: transform .2s ease; flex:none; color:var(--ink-dim); }
.market-filters-toggle.open .mf-chevron{ transform: rotate(180deg); }
.market-filters{
  display:none; background:var(--panel-3); border:1px solid var(--line-strong); border-radius:14px;
  padding:14px; margin-bottom:12px;
}
.market-filters.open{ display:block; }
.mf-row{ margin-bottom:14px; }
.mf-row:last-of-type{ margin-bottom:0; }
.mf-range-inputs{ display:flex; align-items:center; gap:8px; }
.mf-input{
  width:100%; background:var(--panel); border:1px solid var(--line-strong); border-radius:10px;
  padding:9px 10px; color:var(--ink); font-size:13px; font-family:'Inter',sans-serif; min-width:0;
}
.mf-input::placeholder{ color:var(--ink-dimmer); }
/* iOS Safari hace zoom automatico al enfocar cualquier campo con font-size < 16px (y el zoom queda
   puesto aunque se cierre el teclado, tapando parte del listado). Los filtros de Precio y Edad del
   Mercado usan 13px, asi que en iOS se suben a 16px. @supports(-webkit-touch-callout) solo lo cumple
   WebKit de iPhone/iPad: en escritorio y Android el tamano se mantiene en 13px. */
@supports (-webkit-touch-callout: none){
  .mf-input{ font-size:16px; }
}
.mf-dash{ color:var(--ink-dimmer); font-weight:700; flex:none; }
.mf-checkbox{
  display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink); font-weight:600;
  margin-bottom:14px; cursor:pointer;
}
.mf-checkbox input[type="checkbox"]{ width:18px; height:18px; flex:none; accent-color:var(--turf); cursor:pointer; }
.mf-skill-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; margin-bottom:14px; }
.mf-skill-grid .field-label{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.mf-skill-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
/* Dual-range slider for the 0-100 skill filters (Ataque/Defensa/Pase/Energía) — two native
   range inputs stacked on top of each other (classic "two thumbs" trick): each input spans
   the full width with a transparent track, and pointer-events is disabled on the input itself
   so only its thumb (re-enabled individually below) is actually clickable/draggable. A
   separate .mf-slider-track/.mf-slider-range pair underneath draws the visible bar + the
   highlighted selected range between the two thumbs. */
.mf-slider{ position:relative; height:20px; margin:0 2px; }
.mf-slider-track{
  position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px;
  border-radius:2px; background:var(--line-strong);
}
.mf-slider-range{
  position:absolute; top:50%; height:4px; margin-top:-2px; border-radius:2px;
  background:var(--mf-fill, var(--turf));
}
.mf-thumb{
  position:absolute; left:0; top:0; width:100%; height:20px; margin:0;
  background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none;
}
.mf-thumb::-webkit-slider-runnable-track{ -webkit-appearance:none; background:transparent; height:20px; }
.mf-thumb::-moz-range-track{ background:transparent; height:20px; border:none; }
.mf-thumb::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%;
  background:var(--mf-fill, var(--turf)); border:2px solid var(--panel);
  box-shadow:0 2px 6px rgba(0,0,0,0.4); cursor:pointer; margin-top:0;
}
.mf-thumb::-moz-range-thumb{
  pointer-events:auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--panel);
  background:var(--mf-fill, var(--turf)); box-shadow:0 2px 6px rgba(0,0,0,0.4); cursor:pointer;
}
.mf-slider-values{
  display:flex; justify-content:center; align-items:center; gap:6px; margin-top:6px;
  font-family:'Teko',sans-serif; font-size:15px; color:var(--ink); letter-spacing:0.02em;
}
.mf-slider-values .mf-dash{ font-size:12px; }
.mf-clear-btn{ font-size:12px; padding:9px 12px; }
.mf-empty{
  text-align:center; padding:24px 12px; color:var(--ink-dim); font-size:12.5px; line-height:1.5;
}

/* ---- challenges ("Desafíos") screen ---- */
.challenge-card{
  display:flex; flex-direction:column; gap:8px; background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--line-strong); border-radius:18px; padding:12px 14px; margin-bottom:10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}
.challenge-card-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.challenge-name-row{ display:flex; align-items:center; gap:6px; }
.challenge-name{ font-weight:800; font-size:13.5px; }
.challenge-medal{ flex:none; display:flex; }
.challenge-medal svg{ display:block; }
/* Ícono de minijuego en la tarjeta de Estadísticas (pedido explícito del usuario: "mostrar el
   icono de cada minijuego junto al nombre") — misma tile chica con el color propio del juego al
   22% de fondo que ya usa .all-game-row .g-icon, solo que más chica para convivir con el resto
   de .challenge-name-row (que hasta ahora solo alojaba .challenge-medal en las tarjetas de
   Desafíos). */
.stats-game-icon{
  width:22px; height:22px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center;
}
.challenge-tier{ font-size:10.5px; color:var(--ink-dim); font-weight:700; white-space:nowrap; }
.challenge-bar{ height:7px; border-radius:999px; background:var(--panel-3); overflow:hidden; }
.challenge-bar > div{ height:100%; background: linear-gradient(90deg, #818cf8, #a78bfa); border-radius:999px; transition:width .3s ease; }
.challenge-card-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.challenge-progress{ font-size:11px; color:var(--ink-dim); }
.challenge-claim-btn{ flex:none; border-radius:12px; padding:8px 12px; font-size:11.5px; white-space:nowrap; }
/* Botón "Reiniciar récord" en la tarjeta de cada minijuego dentro de Estadísticas — pedido
   explícito del usuario tras la herramienta de diagnóstico de puntajes: pisar a 0 el
   Récord/Promedio de UN minijuego puntual, sin tocar el resto del progreso. Mismo idioma de
   tap-to-arm que .p-sell-btn.armed/.tech-staff-release-btn.armed (un primer toque arma la
   confirmación, un segundo la ejecuta) — se justifica un solo toque de confirmación en vez del
   wizard de doble confirmación de "Blanquear cuenta" porque el alcance acá es mucho más
   acotado (un solo minijuego, nada del plantel ni el resto del club). */
.reset-record-btn{
  align-self:flex-end; margin-top:2px; border-radius:10px; padding:6px 10px; font-size:10.5px; font-weight:700;
  background:var(--panel-3); color:var(--ink-dim); border:1px solid var(--line-strong); cursor:pointer; white-space:nowrap;
}
.reset-record-btn:active{ opacity:0.7; }
.reset-record-btn.armed{ background: var(--red-soft); border-color: rgba(255,68,99,0.5); color:#ffb9c4; }
/* Previsualización de premio — pedido explícito del usuario: "al obtener una recompensa poder
   saber antes de reclamarla si vas a obtener habilidad o dinero". Hoy TODO premio da las dos
   cosas juntas (ver CHALLENGE_REWARDS/LEAGUE_ACHIEVEMENT_REWARDS — nunca una sola), así que en
   vez de rediseñar el sistema de premios esto simplemente muestra el desglose exacto (monto +
   boost) del próximo tramo reclamable, sin sorpresas al tocar "Reclamar". Ver rewardPreviewHtml(). */
.challenge-reward-preview{ display:flex; align-items:center; gap:10px; margin-top:3px; }
.reward-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--ink); }
.reward-chip svg{ display:block; flex:none; }

/* ---- Logros: category headers (Desafíos / Logros de Liga / Logros de Plantel) — a small
   icon + title + subtitle strip above each category's card list, themed with its own accent
   color via the --accent/--accent-soft custom properties set by the .achv-cat-* modifier below,
   so the 3 categories read as distinct groups at a glance instead of one long list broken up
   only by plain divider text (per user request to "resaltar más las categorías"). */
.achv-category{
  display:flex; align-items:flex-start; gap:10px;
  margin:18px 0 10px; padding:10px 12px 10px 11px;
  border-radius:14px; border:1px solid var(--line-strong); border-left:3px solid var(--accent);
  background:var(--panel-2);
}
.achv-category:first-child{ margin-top:4px; }
.achv-category-icon{
  flex:none; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.achv-category-icon svg{ display:block; }
.achv-category-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.achv-category-title{ font-weight:800; font-size:13.5px; color:var(--ink); }
.achv-category-sub{ font-size:11px; color:var(--ink-dim); line-height:1.35; }
.achv-cat-challenges{ --accent:var(--turf); --accent-soft:rgba(37,224,127,0.16); }
.achv-cat-league{ --accent:var(--gold); --accent-soft:rgba(255,187,46,0.16); }
.achv-cat-squad{ --accent:var(--safe); --accent-soft:rgba(127,214,255,0.16); }

/* ---- Subcategorías dentro de Desafíos / Logros de Liga (v150): <details open> con título, contador de tramos y un punto si hay premios por
   reclamar. Abiertas por defecto; el usuario las puede plegar (se recuerda mientras la pantalla siga abierta). */
.achv-group{ margin:0 0 10px; }
.achv-group > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px 4px 6px;
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim);
}
.achv-group > summary::-webkit-details-marker{ display:none; }
.achv-group > summary::before{
  content:''; flex:none; width:7px; height:7px; border-right:2px solid var(--ink-dim); border-bottom:2px solid var(--ink-dim);
  transform:rotate(45deg); transition:transform .15s ease; margin:-3px 2px 0 1px;
}
.achv-group:not([open]) > summary::before{ transform:rotate(-45deg); margin:0 2px 0 1px; }
.achv-group-count{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--ink-dimmer); letter-spacing:0; }
.achv-group-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(255,187,46,0.18); }
.achv-group > summary:focus-visible{ outline:2px solid var(--turf); outline-offset:2px; border-radius:6px; }
.challenge-pk-modes{ display:flex; flex-wrap:wrap; gap:4px 10px; }
.challenge-pk-modes span{ white-space:nowrap; }
.challenge-pk-modes .is-done{ color:var(--turf); font-weight:700; }

/* ---- Dirigente: próximos Desafíos en la hoja de objetivos (v150) ---- */
.dir-ch-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); margin:16px 2px 2px; }
.dir-ch-sub{ font-size:11.5px; color:var(--ink-dimmer); margin:0 2px 8px; line-height:1.4; }

/* ---- Logros: fila de 3 anillos de progreso (Desafíos / Logros de Liga / Logros de Plantel) —
   pedido explícito del usuario: "una estadística general visual de los desafíos completados"
   que "te impulse a querer llegar al 100 o compararte fácilmente con otro jugador". Un anillo
   por categoría (no uno combinado) para que cada categoría se pueda leer/comparar por separado.
   % = tramos reclamados sobre el total posible en Desafíos/Logros de Liga; Logros de Plantel no
   tiene tramos, así que usa su propia noción de "completitud" — ver
   computeSquadAchievementsProgressPct(). Mismo componente SVG (viewBox 64x64, r=26,
   circunferencia 163.36) que ya usa keeper-formation.html para su anillo de tiempo, reescalado
   más chico para caber 3 en fila, coloreado con el MISMO --accent que la cabecera de esa
   categoría (.achv-cat-*) más abajo, para que se lea como parte del mismo grupo visual. Ver
   renderAchievementProgressRings(). */
.achv-progress-heading{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); margin:2px 0 8px; }
.achv-progress-row{ display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; }
.achv-progress-ring{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--panel-2); border:1px solid var(--line-strong); border-radius:14px; padding:8px 4px 9px; }
.achv-progress-ring .ring-svg{ width:52px; height:52px; }
.achv-progress-ring .ring-track{ fill:none; stroke:rgba(255,255,255,0.08); stroke-width:6; }
.achv-progress-ring .ring-fill{ fill:none; stroke-width:6; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1); }
.achv-progress-ring .ring-num{ font-size:14px; fill:var(--ink); font-family:'Teko', sans-serif; }
.achv-progress-ring-label{ font-size:9.5px; font-weight:800; color:var(--ink-dim); text-align:center; line-height:1.2; }

/* ---- Logros de Plantel: "Obtención de arquero" — a 3-item checklist instead of the
   value/threshold progress bar Desafíos/Logros de Liga use, since this achievement is a
   one-time unlock gated on 3 conditions rather than a stacking counter. Still sits inside the
   shared .challenge-card shell for visual consistency with the other two categories. */
.squad-ach-checklist{ display:flex; flex-direction:column; gap:7px; margin:2px 0 4px; }
.squad-ach-check-item{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-dim); }
.squad-ach-check-item.is-done{ color:var(--ink); }
.squad-ach-check-icon{ flex:none; width:16px; height:16px; display:flex; }
.squad-ach-check-icon svg{ display:block; }

/* ---- "Convocados a la selección": detalle de progreso y acciones faltantes por puesto (pedido
   explícito del usuario: "dar más detalle en cómo conseguir jugadores de selección, mostrando
   progreso y acciones faltantes por posición") — se despliega debajo de cada fila del checklist
   que todavía no tiene un convocado activo. Las primeras 2 líneas son condiciones con progreso
   real (plantel al tope / liderazgo de la temporada recién cerrada, reusa .squad-ach-check-item
   vía squadAchChecklistItem()); las de abajo son las acciones de minijuego que pueden otorgar el
   cupo en vivo — no tienen un estado done/pendiente propio (se resuelven al instante dentro del
   minijuego, no queda un progreso guardado), así que se listan aparte con un bullet neutro en
   vez de un círculo de check, para no sugerir un progreso que en realidad no se acumula. Ver
   selectionPositionDetailHtml(). */
.squad-ach-position-detail{ display:flex; flex-direction:column; gap:5px; margin:-2px 0 4px 24px; padding:8px 10px; border-radius:10px; background:var(--panel-3); }
.squad-ach-position-action{ display:flex; align-items:flex-start; gap:8px; font-size:10.5px; color:var(--ink-dim); line-height:1.35; }
.squad-ach-position-action-dot{ flex:none; width:5px; height:5px; margin-top:5.5px; border-radius:50%; background:var(--ink-dimmer); }

/* ---- estadísticas de minijuegos screen ---- */
.overall-score-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--gold); border-radius:18px; padding:16px; margin-bottom:14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}
.overall-score-num{ font-family:'Teko',sans-serif; font-size:44px; line-height:1; color:var(--gold); }
.overall-score-label{ font-size:11.5px; color:var(--ink-dim); max-width:220px; }
.stats-modes{ display:flex; gap:10px; }
.stats-mode-col{ flex:1; min-width:0; }
.stats-mode-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); margin-bottom:4px; }
.stats-row-mini{ font-size:11.5px; display:flex; justify-content:space-between; gap:6px; padding:1.5px 0; }
.stats-row-mini span:last-child{ font-weight:700; }
/* Ranking mundial (ver LEEME-RANKING-MUNDIAL.txt) — fila de aviso ("activá la nube"/"todavía no
   jugaste este modo") en vez de un valor: texto simple, sin el layout de dos columnas de
   .stats-row-mini normal (nada que alinear a la derecha). */
.stats-rank-hint{ font-size:11px; font-style:italic; color:var(--ink-dim); margin-top:3px; justify-content:flex-start; }
/* Grilla de 3 columnas (Entrenamiento/Competencia/Amistosos) para las tarjetas de cada minijuego
   en Estadísticas — pedido explícito del usuario: "para que entre en pantalla, lo mejor sea
   sacar la repetición del nombre de la fila en cada columna en pantallas mobile". A propósito
   son clases NUEVAS (no se tocan .stats-modes/.stats-mode-col/.stats-row-mini de arriba): esas
   las sigue usando renderCareerCard() (tarjeta de "Tabla Histórica", sin relación con esto) tal
   cual estaban, sin cambios. */
.stats-grid{ display:grid; grid-template-columns: minmax(0,1.15fr) repeat(3, minmax(0,1fr)); column-gap:6px; row-gap:3px; align-items:center; margin-top:2px; }
.stats-grid-headcell{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-dim); text-align:center; padding-bottom:4px; border-bottom:1px solid var(--line); margin-bottom:2px; }
.stats-grid-label{ font-size:11px; color:var(--ink-dim); }
.stats-grid-val{ font-size:11.5px; font-weight:700; text-align:center; }
.stats-grid-val.is-muted{ font-weight:400; color:var(--ink-dim); font-size:13px; }
.stats-grid-hint{ grid-column: 1 / -1; font-size:10.5px; font-style:italic; color:var(--ink-dim); text-align:left; padding:3px 0 0; }

/* ---- Ranking Mundial (NUEVO) — pedido explícito del usuario: "Ranking Mundial... 4 [luego 6]
   rankings que involucre[n] Entrenamientos, Competencias... y Promedios[/Records]... aparecerá
   arriba resaltado tu ubicación y por debajo el listado de los primeros 100... nombre de
   equipo, nombre de usuario y puntaje... un lugar donde se vean las [6] posiciones sin tener la
   necesidad de entrar a cada detalle." Ver computeWorldRankings()/renderWorldRankingSummary()/
   renderWorldRankingDetail() más abajo. La tarjeta resumen (.wr-summary-*) vive arriba de todo
   en Estadísticas, con las 6 categorías de un vistazo; cada una abre #worldRankingOverlay con
   el detalle completo (tu fila resaltada arriba + top 100 abajo). */
.wr-summary-card{
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--turf); border-radius:18px; padding:14px; margin-bottom:14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}
/* Ranking por tipo de minijuego (ver computeTypeRankings()/renderTypeRankCard()): reusa la tarjeta
   .wr-summary-card y la grilla .stats-grid de cada minijuego; solo agrega el encabezado de cada tipo. */
.type-rank-block{ border-top:1px solid var(--line); padding-top:10px; margin-top:10px; }
.type-rank-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.type-rank-name{ font-weight:800; font-size:12.5px; }
.type-rank-count{ font-size:10.5px; color:var(--ink-dim); }
.stats-grid-sublabel{ padding-left:8px; font-size:10.5px; }
/* Con 3 modos + etiqueta, en 390px "ENTRENAMIENTO"/"INTERNACIONALES" se pisaban: columna de etiqueta más angosta y encabezados más chicos solo en esta tarjeta. */
.type-rank-block .stats-grid{ grid-template-columns: minmax(0,.78fr) repeat(3, minmax(0,1fr)); column-gap:3px; }
.type-rank-block .stats-grid-headcell{ font-size:7.5px; letter-spacing:0; overflow:hidden; text-overflow:clip; white-space:nowrap; }
.type-rank-block .stats-grid-label{ font-size:10.5px; }

/* ---- Vestuario ("Premios diarios") — calendario 28 celdas + ruleta + festejo ---- */
.vst-sheet{ --vst-bronce:#cd8b4a; --vst-plata:#c4ceda; --vst-oro:var(--gold); }
.vst-status{ font-size:14px; font-weight:700; line-height:1.35; margin:2px 0 10px; color:var(--ink); }
.vst-status.is-ready{ color:var(--gold); }
.vst-status.is-locked{ color:var(--ink-dim); }
#btnVstClaim{ margin:0 0 12px; font-size:15px; padding:13px 16px; }
#btnVstClaim[hidden]{ display:none; }
.vst-meta{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-dim); font-weight:700; margin-bottom:8px; }
.vst-meta b{ color:var(--ink); }
.vst-board-toggle{ display:flex; gap:6px; margin-bottom:8px; }
.vst-board-toggle button{ flex:1; border:1px solid var(--line-strong); background:var(--panel-3); color:var(--ink-dim); border-radius:10px; padding:7px 0; font-size:12px; font-weight:800; cursor:pointer; }
.vst-board-toggle button.active{ color:var(--ink); border-color:var(--turf); background:var(--turf-soft); }
.vst-board{ position:relative; border-radius:16px; padding:14px 12px; margin-bottom:10px; }
/* Cancha (v113, alineada en v115): foto de una cancha vista desde arriba (assets/rewards/board-pitch.webp) en lugar de las franjas y lineas dibujadas
   con CSS. Desde v115 la foto esta deformada a proposito (separable, por tramos) para que el borde exterior de la cancha quede JUSTO afuera de las
   celdas y el area grande, el area chica y la linea de mitad de cancha caigan en los espacios entre celdas (a ~25%, 50% y 75%). Por eso se dibuja con
   un margen de 6px x 7px (el relleno del padding del tablero, menos el medio espacio entre celdas) y no estirada a todo el tablero; el color liso de
   atras cubre ese margen. El sombreado interior y el blur suave detras de cada celda evitan que las lineas blancas compitan con los numeros.
   Los numeros van de arriba hacia abajo y de izquierda a derecha, por columnas, de defensa a ataque (ver cellLayout() en shared/daily-rewards.js). */
.vst-board.is-pitch{
  background: url('../assets/rewards/board-pitch-v2.webp') 6px 7px/calc(100% - 12px) calc(100% - 14px) no-repeat, #1a4a26;
  border:1px solid var(--line-strong);
  box-shadow: inset 0 0 36px rgba(0,0,0,0.45);
}
.vst-board.is-pitch .vst-grid{ position:relative; }
.vst-board.is-pitch .vst-cell{ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.vst-board.is-pitch .vst-cell.is-future{ opacity:0.8; }
.vst-board.is-pitch .vst-cell:not(.is-done):not(.is-lost):not(.is-ready){ background:rgba(8,12,17,0.55); }
/* Arco (v112): foto de un arco con red (assets/rewards/board-arch-net.webp, oscura y sin detalle fuerte para que no compita con las celdas). Los
   postes y el travesano ya vienen en la foto, asi que se saco el marco blanco dibujado con CSS (se superponia mal con los de la imagen). La foto
   se estira al 100% x 100% del tablero para que los postes queden siempre en los bordes; el sombreado interior oscurece los extremos y el blur
   suave detras de cada celda evita que la malla pise los numeros. El fondo y el borde de las celdas de cada estado siguen siendo los de siempre. */
.vst-board.is-arch{
  background: #0b1016 url('../assets/rewards/board-arch-net.webp') 0 0/100% 100% no-repeat;
  border:1px solid var(--line-strong); padding-top:22px;
  box-shadow: inset 0 0 36px rgba(0,0,0,0.55);
}
.vst-board.is-arch .vst-grid{ padding:10px 8px 0; }
.vst-board.is-arch .vst-cell{ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.vst-board.is-arch .vst-cell.is-future{ opacity:0.8; }
.vst-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.vst-cell{
  position:relative; aspect-ratio: 1 / 0.74; border-radius:12px; border:2px solid var(--vst-tier, var(--line-strong));
  background:rgba(8,12,17,0.72); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-family:'Teko',sans-serif; line-height:1; overflow:hidden;
}
.vst-cell .vst-num{ font-size:20px; font-weight:600; opacity:0.9; }
.vst-cell .vst-ico{ font-size:19px; line-height:1; font-family:inherit; }
.vst-cell.t-bronce{ --vst-tier:var(--vst-bronce); }
.vst-cell.t-plata{ --vst-tier:var(--vst-plata); }
.vst-cell.t-oro{ --vst-tier:var(--vst-oro); }
.vst-cell.is-milestone{ border-width:3px; box-shadow:0 0 0 2px rgba(255,255,255,0.12), 0 0 14px color-mix(in srgb, var(--vst-tier) 55%, transparent); }
.vst-cell.is-milestone::after{ content:'★'; position:absolute; top:2px; right:5px; font-size:11px; color:var(--vst-tier); }
.vst-cell.is-future{ opacity:0.55; }
.vst-cell.is-done{ background:color-mix(in srgb, var(--vst-tier) 22%, rgba(8,12,17,0.8)); }
.vst-cell.is-done .vst-num{ font-size:12px; opacity:0.75; }
.vst-cell.is-lost{ background:rgba(255,68,99,0.14); border-style:dashed; }
.vst-cell.is-lost .vst-ico{ color:var(--red); }
.vst-cell.is-next{ opacity:1; animation:vstPulse 1.6s ease-in-out infinite; }
.vst-cell.is-ready{ animation:vstPulse 1s ease-in-out infinite; background:color-mix(in srgb, var(--vst-tier) 30%, rgba(8,12,17,0.8)); }
.vst-cell.is-ready{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vst-cell.is-ready:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.vst-cell.is-today::before{ content:''; position:absolute; inset:2px; border-radius:9px; border:2px solid var(--ink); opacity:0.85; }
@keyframes vstPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--vst-tier) 70%, transparent); } 50%{ box-shadow:0 0 0 6px transparent; } }
.vst-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--ink-dim); margin-bottom:8px; }
.vst-legend span{ display:inline-flex; align-items:center; gap:5px; }
.vst-legend i{ width:11px; height:11px; border-radius:3px; border:2px solid var(--c); display:inline-block; }
.vst-rules{ font-size:12px; color:var(--ink-dim); line-height:1.5; margin:4px 0 0; }
.vst-tabs{ display:flex; gap:6px; margin:0 0 10px; }
.vst-tabs button{ flex:1; border:1px solid var(--line-strong); background:var(--panel-3); color:var(--ink-dim); border-radius:10px; padding:9px 0; font-size:13px; font-weight:800; cursor:pointer; }
.vst-tabs button[aria-selected="true"]{ color:var(--ink); border-color:var(--turf); background:var(--turf-soft); }
.vst-tab-count{ display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:var(--gold); color:#1a1200; font-size:11px; line-height:18px; }
.vst-tab-count[hidden]{ display:none; }
.vst-panel[hidden]{ display:none; }
.vst-locker-intro{ font-size:12.5px; color:var(--ink-dim); line-height:1.45; margin:0 0 10px; }
.vst-locker-caps{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.vst-locker-caps span{ font-size:12px; font-weight:800; color:var(--ink-dim); border:1px solid var(--line-strong); border-radius:999px; padding:3px 9px; background:var(--panel-3); }
.vst-locker-caps span.is-full{ color:var(--gold); border-color:var(--gold); }
.vst-locker-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.vst-item{ display:flex; align-items:center; gap:10px; border:1px solid var(--line-strong); border-left:4px solid var(--vst-tier, var(--line-strong)); border-radius:12px; background:var(--panel-2); padding:10px 12px; }
.vst-item.t-bronce{ --vst-tier:var(--vst-bronce); }
.vst-item.t-plata{ --vst-tier:var(--vst-plata); }
.vst-item.t-oro{ --vst-tier:var(--vst-oro); }
.vst-item-ico{ font-size:26px; line-height:1; }
.vst-item-txt{ flex:1; min-width:0; }
.vst-item-name{ font-size:14px; font-weight:800; color:var(--ink); line-height:1.25; }
.vst-item-sub{ font-size:11.5px; color:var(--ink-dim); line-height:1.3; margin-top:2px; }
.vst-item .btn{ padding:8px 14px; font-size:12px; }
.vst-locker-empty{ font-size:13px; color:var(--ink-dim); text-align:center; padding:18px 8px; border:1px dashed var(--line-strong); border-radius:12px; }
.vst-pick-stats{ display:flex; gap:6px; margin-top:8px; }
.vst-pick-stats .btn{ flex:1; padding:7px 2px; font-size:11.5px; }
.vst-pick-stats .btn:disabled{ opacity:0.4; }

/* Ruleta + festejo */
.overlay.vst-reveal{ z-index:90; align-items:center; background:rgba(4,6,9,0.9); }
.vst-reveal-inner{ width:100%; max-width:460px; padding:18px; text-align:center; }
.vst-roulette-title{ font-family:'Teko',sans-serif; font-size:30px; text-transform:uppercase; letter-spacing:0.04em; color:var(--gold); margin-bottom:12px; }
.vst-tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.vst-tile{ border:2px solid var(--line-strong); border-radius:14px; background:var(--panel-2); padding:10px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; transition:transform .08s ease, border-color .08s ease, background .08s ease; }
.vst-tile .vst-tile-ico{ font-size:28px; line-height:1; }
.vst-tile .vst-tile-name{ font-size:10.5px; font-weight:700; color:var(--ink-dim); line-height:1.15; min-height:24px; display:flex; align-items:center; }
.vst-tile.is-lit{ border-color:var(--gold); background:var(--gold-soft); transform:scale(1.07); }
.vst-tile.is-lit .vst-tile-name{ color:var(--ink); }
.vst-tile.is-winner{ border-color:var(--turf); background:var(--turf-soft); transform:scale(1.12); }
.vst-celebrate{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 8px 6px; overflow:visible; }
.vst-celebrate[hidden]{ display:none; }
.vst-cel-flash{ position:absolute; inset:-60px -30px; background:radial-gradient(circle at 50% 40%, rgba(255,187,46,0.45), rgba(255,187,46,0.1) 55%, transparent 78%); pointer-events:none; }
.vst-cel-scrim{ display:none; }
.vst-cel-text{
  position:relative; font-family:'Teko',sans-serif; font-weight:700; font-size:min(20vw,88px); line-height:1; color:#eef5fb; text-transform:uppercase; letter-spacing:0.02em;
  text-shadow:0 0 26px rgba(255,187,46,0.9), 0 0 64px rgba(255,187,46,0.6);
  animation:vstTextPop .9s cubic-bezier(.2,1.4,.4,1) both;
}
.vst-reveal-inner.has-banner{ max-width:min(760px, 96vw); }
.vst-cel-banner{ position:relative; width:100%; aspect-ratio:5 / 1; overflow:hidden; border-radius:14px; border:2px solid var(--gold); background:#0b1730; box-shadow:0 10px 36px rgba(0,0,0,0.55), 0 0 34px rgba(255,187,46,0.35); animation:vstTextPop 1s .12s cubic-bezier(.2,1.4,.4,1) both; }
.vst-cel-banner[hidden], .vst-cel-banner.is-broken{ display:none; }
.vst-cel-banner{ container-type:inline-size; }
/* Titulos HTML sobre la imagen (shared/reward-banner.js): tamaño en cqw del banner, se achican solos si no entran. */
.vst-ov{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.vst-ov-b{ position:absolute; display:flex; flex-direction:column; font-family:'Teko',sans-serif; text-transform:uppercase; line-height:.92; text-shadow:0 .05em .16em rgba(0,0,0,.55); }
.vst-ov-b[data-a="l"]{ align-items:flex-start; text-align:left; }
.vst-ov-b[data-a="c"]{ align-items:center; text-align:center; }
.vst-ov-b[data-a="r"]{ align-items:flex-end; text-align:right; }
.vst-ov-l{ display:block; white-space:nowrap; }
.vst-cel-banner picture{ display:block; width:100%; height:100%; }
.vst-cel-banner img{ display:block; width:100%; height:100%; object-fit:cover; }
.vst-cel-banner[data-shape="mid"]{ max-width:520px; }
.vst-cel-banner[data-shape="tall"]{ width:auto; height:min(44vh, 460px); max-width:100%; }
.vst-cel-icon[hidden]{ display:none; }
.vst-cel-icon{ position:relative; font-size:68px; line-height:1; animation:vstTextPop 1s .12s cubic-bezier(.2,1.4,.4,1) both; }
.vst-cel-sub{ position:relative; font-size:20px; font-weight:800; color:#eef5fb; text-shadow:0 2px 10px rgba(0,0,0,0.65); animation:vstFadeUp .6s .35s both; }
.vst-cel-detail{ position:relative; font-size:13px; font-weight:600; color:rgba(238,245,251,0.8); margin-bottom:10px; animation:vstFadeUp .6s .5s both; }
.vst-celebrate .btn{ position:relative; padding:12px 34px; font-size:15px; animation:vstFadeUp .6s .65s both; }
.vst-confetti{ position:absolute; width:8px; height:8px; border-radius:2px; top:40%; left:50%; opacity:0; animation:vstConfetti 1.3s ease-out forwards; pointer-events:none; }
@keyframes vstTextPop{ 0%{ transform:scale(0.3) rotate(-6deg); opacity:0; } 55%{ transform:scale(1.18) rotate(2deg); opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes vstFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes vstConfetti{ 0%{ transform:translate(-50%,-50%) translate(0,0) rotate(0); opacity:1; } 100%{ transform:translate(-50%,-50%) translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .vst-cell.is-next, .vst-cell.is-ready{ animation:none; }
  .vst-cel-text, .vst-cel-icon, .vst-cel-banner, .vst-cel-sub, .vst-cel-detail, .vst-celebrate .btn{ animation:none; }
  .vst-confetti{ display:none; }
}