/* ══════════════════════════════════════════════
   HOME VIEW  (css/home-view.css)
   Pantalla de inicio — hero = carrusel coverflow de cartas + bento
   jerárquico de accesos (tarjeta Tablero la más grande), estilo de
   tarjeta oscuro/floaty con glow (inspiración: Raycast).
   Estética de referencia: pestaña Cartas (system-ui, oscuro neutro,
   chips translúcidos). Sin Nunito ni botón azul; los acentos por
   apartado son glows decorativos sutiles sobre base neutra.

   TANDA 1: esqueleto + carrusel interactivo. Los visuales internos de
   las tarjetas son ESTÁTICOS (se animan en tandas posteriores).
══════════════════════════════════════════════ */
/* top:0 (no 48px) → el degradado cubre TODO el alto, también detrás de la barra
   flotante, para que el fondo sea uniforme (sin la franja de la barra fija). */
#view-home {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9050;
  background: radial-gradient(ellipse 130% 95% at 50% -8%, #1a1a28 0%, #121219 48%, #0f0f15 100%);
  color: #e7e7ef;
  font-family: system-ui, sans-serif;
  overflow-y: auto; overflow-x: hidden;
  display: block;
  -webkit-font-smoothing: antialiased;
}
/* padding-top deja sitio a la barra flotante (top:16 + alto 48 + aire). */
.home-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 84px 28px 36px;
  box-sizing: border-box;
}

/* ── Hero: cabecera + carrusel forman un header 50/50 ───── */
.home-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  align-items: center; margin-bottom: 20px;
}
.home-hero-head { align-self: center; }
.home-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  padding: 5px 11px; border-radius: 999px;
}
.home-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #6ad5b0; box-shadow: 0 0 8px #6ad5b0;
}
.home-title {
  margin: 13px 0 0; font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.025em;
  background: linear-gradient(176deg, #ffffff 0%, #c4c4d4 78%, #9b9bb0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-tagline {
  margin: 11px 0 0; font-size: clamp(13.5px, 1.5vw, 16px);
  color: rgba(255,255,255,0.56); line-height: 1.55; max-width: 52ch;
}

/* ── Carrusel coverflow infinito (hero) ─────────────────── */
.home-reel {
  position: relative; height: 270px; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.home-reel-strip {
  position: absolute; inset: 0;
  cursor: grab; touch-action: pan-y;
}
.home-reel-strip:active { cursor: grabbing; }
.home-reel-card {
  position: absolute; top: 50%; left: 0; margin-top: -105px;
  width: 150px; height: 210px; border-radius: 11px; overflow: hidden;
  background: #1c1c26;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  will-change: transform, opacity;
}
.home-reel-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
/* brillo holo lento y CONTINUO (desfasado por carta vía --hd) */
.home-reel-card::after {
  content: ''; position: absolute; inset: -30%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.14) 50%, transparent 58%);
  mix-blend-mode: screen; pointer-events: none;
  transform: translateX(-120%);
  animation: home-holo 6s ease-in-out infinite;
  animation-delay: var(--hd, 0s);
}
/* carta central: realce */
.home-reel-card.is-center {
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 22px 50px rgba(0,0,0,0.66), 0 0 30px rgba(120,150,255,0.14);
}
@keyframes home-holo { 0% { transform: translateX(-120%); } 55%,100% { transform: translateX(120%); } }

/* ── Carrusel de accesos (estilo Raycast: tarjetas verticales) ──────────
   Fila horizontal de tarjetas con mismo formato/aspect ratio. La de la
   derecha se desvanece (máscara) a modo de carrusel; flechas abajo mueven. */
.home-carousel-wrap { position: relative; }
.home-carousel {
  position: relative; overflow: hidden; cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  /* full-bleed por AMBOS lados: el carrusel llega a los dos bordes de la pantalla.
     El fade (mask) cubre la zona FUERA de la columna de contenido (--car-edge =
     offset de la columna, lo fija carApply), simétrico izq/dcha → las tarjetas se
     desvanecen al salir por cualquier lado y la zona clara es la columna central. */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--car-edge, 9%), #000 calc(100% - var(--car-edge, 9%)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--car-edge, 9%), #000 calc(100% - var(--car-edge, 9%)), transparent 100%);
}
.home-carousel-track {
  display: flex; gap: 22px; align-items: stretch;
  /* la 1ª/última tarjeta arrancan justo en la columna de contenido (zona clara) */
  padding: 18px var(--car-edge, 4px) 30px;
  transition: transform .52s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.home-carousel-track.dragging { transition: none; cursor: grabbing; }
.home-carousel-track.dragging .home-tile { cursor: grabbing; }
/* Tarjeta vertical liquid glass (translúcida + blur + glow de acento) */
.home-tile {
  position: relative; overflow: hidden;
  flex: 0 0 auto; width: 332px; aspect-ratio: 7 / 10;
  display: flex; flex-direction: column;
  border-radius: 24px; padding: 22px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(125% 78% at 50% 118%, color-mix(in srgb, var(--accent, #888) 42%, transparent), transparent 72%),
    linear-gradient(168deg, color-mix(in srgb, var(--accent, #888) 20%, transparent), color-mix(in srgb, var(--accent, #888) 4%, transparent) 58%),
    rgba(18,18,26,0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
          backdrop-filter: blur(22px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -40px 80px -40px color-mix(in srgb, var(--accent, #888) 40%, transparent),
    0 24px 60px rgba(0,0,0,0.42);
  transition: transform .26s cubic-bezier(.2,.7,.3,1),
              border-color .26s ease, box-shadow .26s ease;
}
.home-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -40px 80px -40px color-mix(in srgb, var(--accent, #888) 55%, transparent),
    0 32px 72px rgba(0,0,0,0.52);
}
.home-tile:active { transform: translateY(-3px) scale(0.992); }
.home-tile:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 3px; }
/* sheen superior tipo cristal */
.home-tile::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 50% at 50% -10%, rgba(255,255,255,0.12), transparent 60%);
}

.home-tile--board { --accent: #4dabff; }
.home-tile--cards { --accent: #6ad5b0; }
.home-tile--mazos { --accent: #c2a0ff; }
.home-tile--draft { --accent: #ffb86b; }
.home-tile--tier  { --accent: #d65f5f; }

/* ── Flechas del carrusel: SOBRE el carrusel, en el borde del fade (izq/dcha),
   centradas verticalmente; se OCULTAN (no disabled) en los topes ── */
.home-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  display: inline-grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(28,28,38,0.55); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85); cursor: pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.42);
  transition: background .2s ease, color .2s ease, transform .15s ease, opacity .2s ease;
}
/* Fuera de la columna de contenido, casi al borde de la pantalla (zona del fade):
   restamos el offset de la columna (--car-edge) para llegar al borde del viewport. */
.home-carousel-arrow--prev { left: calc(14px - var(--car-edge, 0px)); }
.home-carousel-arrow--next { right: calc(14px - var(--car-edge, 0px)); }
.home-carousel-arrow svg { width: 20px; height: 20px; }
.home-carousel-arrow:hover { background: rgba(46,46,60,0.72); color: #fff; }
.home-carousel-arrow:active { transform: translateY(-50%) scale(0.92); }
.home-carousel-arrow[hidden] { display: none; }

.home-tile-top {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 9px;
}
/* el título va junto al icono; la flecha se empuja al borde derecho */
.home-tile-top h3 { margin: 0; }
.home-tile-arrow { margin-left: auto; }
.home-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.92);
}
.home-tile-icon svg { width: 20px; height: 20px; }
/* botón-flecha redondo (estilo Raycast), decorativo dentro de la tile clicable */
.home-tile-arrow {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.home-tile-arrow svg { width: 14px; height: 14px; }
.home-tile:hover .home-tile-arrow { background: rgba(255,255,255,0.14); color: #fff; transform: translateX(2px); }

.home-tile h3 {
  margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #f4f4fa;
}
.home-tile p {
  margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.6);
}

/* ── Visuales de cada tarjeta (llenan la mitad inferior, anclados abajo) ── */
.home-mini {
  flex: 1 1 auto; margin-top: auto; padding-top: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* Tarjeta Cartas: 1 ejemplo con FILTROS REALES (clases .cv-* de cards-view), en
   DOS FILAS, grandes y FIJOS; resultados reales en UNA fila de cartas grandes.
   Búsqueda/HP = espejo de sus estilos por id. */
.home-mini-cards {
  position: relative; overflow: hidden; width: 100%;
  gap: 18px; justify-content: flex-start; align-items: stretch;   /* filtros ARRIBA */
}
/* bloque de filtro en DOS FILAS (COSTE/BÚSQUEDA), ancho casi completo.
   display:flex es CLAVE para BÚSQUEDA (no es .cv-num-block) → el gap funciona. */
.home-mini-cards .hmc-block {
  display: flex; flex-direction: column; align-items: stretch; gap: 13px;
  width: 100%; box-sizing: border-box; padding: 15px 17px;
}
.home-mini-cards .hmc-block-top { display: flex; align-items: center; gap: 12px; }
/* HP en UNA sola fila (pill que abraza el contenido, no se estira) */
.home-mini-cards .hmc-block-row { align-self: flex-start; padding: 9px 15px; gap: 11px; }
/* BÚSQUEDA: caja + botón, independientes y bien separados, alineados a la izquierda */
.home-mini-cards .hmc-block--search { border: none; background: none; padding: 0; gap: 24px; align-items: flex-start; }
/* fila de orbes (abajo) — orbes grandes */
.home-mini-cards .hmc-cost-slots { display: flex; gap: 9px; align-items: center; }
.home-mini-cards .cv-cost-slot { width: 46px !important; height: 46px !important; }
.home-mini-cards .cv-cost-slot.filled img { width: 32px !important; height: 32px !important; }
.home-mini-cards .cv-cost-slot.hmc-drop { animation: hmc-orbdrop .26s cubic-bezier(.34,1.56,.64,1); }
@keyframes hmc-orbdrop { 0% { transform: translateY(-12px) scale(.7); } 100% { transform: none; } }
/* operadores y etiqueta más grandes */
.home-mini-cards .cv-op-btn { padding: 7px 13px !important; font-size: 15px !important; }
.home-mini-cards .cv-num-label { font-size: 12px; }
/* valor HP grande (en línea) */
.home-mini-cards .hmc-hpinput {
  width: 64px; background: transparent; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.2); border-radius: 0;
  color: #fff; padding: 2px 6px; font-size: 19px; font-weight: 700;
  text-align: center; font-family: system-ui, sans-serif; outline: none;
}
/* caja de búsqueda: más ALTA y más ESTRECHA (abraza el texto, no ancho completo) */
.home-mini-cards .hmc-searchbox {
  display: inline-flex; align-items: center; gap: 10px; width: auto; min-width: 150px;
  align-self: flex-start; box-sizing: border-box;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px; padding: 14px 18px;
}
.home-mini-cards .hmc-searchbox svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.5; color: #fff; }
.home-mini-cards .hmc-searchtext { color: #f0f0f0; font-size: 16px; font-family: system-ui, sans-serif; white-space: nowrap; }
.home-mini-cards .hmc-caret { width: 2px; height: 18px; background: rgba(255,255,255,0.65); animation: hmc-blink 1s step-end infinite; }
@keyframes hmc-blink { 50% { opacity: 0; } }
/* botón de línea evolutiva: MÁS GRANDE (no diminuto) y separado de la barra */
.home-mini-cards .hmc-evochip {
  align-self: flex-start; padding: 10px 16px !important; font-size: 14px !important; border-radius: 11px !important;
}
.home-mini-cards .hmc-evochip.active { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); color: #fff; }
/* resultados: UNA fila de cartas GRANDES (tamaño del activo del Tablero), FIJAS a la izquierda */
/* contenedor de resultados: posiciona dos capas para el crossfade */
.home-mini-cards .hmc-results {
  position: relative; overflow: hidden;
  min-height: calc(var(--hmc-card-w, 86px) * 512 / 367);
  /* la carta que no cabe se DESVANECE en el borde derecho (sin corte brusco) */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 82%, transparent 100%);
}
/* capa de cartas (UNA fila, cartas GRANDES, fijas a la izquierda); crossfade por opacidad */
.home-mini-cards .hmc-layer {
  position: absolute; inset: 0;
  display: flex; flex-wrap: nowrap; gap: 9px; justify-content: flex-start; align-items: center;
  opacity: 0; transition: opacity .22s ease;
}
.home-mini-cards .hmc-layer img {
  width: var(--hmc-card-w, 86px); aspect-ratio: 367 / 512;
  border-radius: 7px; object-fit: cover; display: block;
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 6px 16px rgba(0,0,0,0.5); background: #1c1c26;
}

.home-mini-fan { position: relative; flex: 1 1 auto; min-height: 168px; }
.home-mini-fan img {
  position: absolute; bottom: 0; left: 50%;
  width: 96px; aspect-ratio: 367 / 512; transform-origin: bottom center;
  border-radius: 6px; object-fit: cover; display: block;
  border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 5px 12px rgba(0,0,0,0.45); background: #1c1c26;
}

/* ── Mini-tablero (tarjeta Tablero): CLON del tablero real ─────────────
   home-view.js clona #zone-p1 (mazo/estadio/activo/banca colocados por el
   CSS REAL del tablero) y lo escala aquí. La TARJETA es el fondo (sin panel
   propio). Animación = la real del tablero (cardEntry al jugar al Activo). */
/* La tarjeta Tablero recorta en su borde inferior (la mano clipa ahí). */
.home-tile--board { padding-bottom: 0; }
.home-mini-board {
  position: relative; overflow: visible; pointer-events: none;
  flex: 1 1 auto; min-height: 300px; margin-top: 6px;
}
.hmb-stage {
  position: absolute; top: 0; left: 50%; transform-origin: top center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hmb-center { margin: 0 !important; }
.hmb-hand { position: relative; width: 300px; height: 128px; }
.hmb-hand .hmb-hcard { width: 84px; height: 118px; }

/* ── Mini-draft (tarjeta Draft): componentes REALES del draft ──────────
   home-view.js reutiliza .dr-option/.dr-stack/.st-top (carta de oferta) y
   .dr-slot (huecos del mazo); aquí solo se redimensionan para la tarjeta.
   El vuelo y el rebote de aterrizaje son los mismos del draft (en JS). */
.home-mini-draft {
  position: relative; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 24px;  /* toda la UI abajo, lejos del texto */
  flex: 1 1 auto; padding: 8px 0 8px;     /* margen inferior mínimo */
}
/* 2 elecciones GRANDES en fila (alto = activo del mini-tablero, vía --hmd-w) */
.home-mini-draft .hmd-options {
  display: flex; gap: 18px; justify-content: center; align-items: flex-end;
}
.home-mini-draft .hmd-option { width: var(--hmd-w, 96px); max-width: none; }
/* DOS filas de huecos (vibra de mazo completo) */
.home-mini-draft .hmd-bar {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.home-mini-draft .hmd-row {
  display: flex; flex-wrap: nowrap; gap: 7px; justify-content: center;
}
.home-mini-draft .dr-slot { width: 40px; border-radius: 6px; }

/* ── Mini-mazos (tarjeta Mazos): 4 stacks de mejores mazos meta ──────────
   Reutiliza el efecto REAL .mz-stack de «Mis Mazos» (mazos-view.css). */
.home-mini-mazos {
  display: grid; grid-template-columns: repeat(2, auto);
  gap: 18px; justify-content: center; align-content: end;
  width: 100%; padding: 4px 0 8px; pointer-events: none;
}
.home-mini-mazos .mz-stack { width: 94px; margin-bottom: 0; }

/* ── Mini-tierlist (tarjeta Tierlist): tierlist REAL cropada (solo S y F) +
   pool de EX que se deslizan a una tier. Reutiliza .tl-row/.tl-row-label/
   .tl-row-cards (tierlist-view.css). ── */
.home-mini-tier {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 14px;
  flex: 1 1 auto; width: 100%; padding: 6px 16px 14px; pointer-events: none;
}
.home-mini-tier .htl-board {
  width: 100%; border-radius: 12px; overflow: hidden;
  background: rgba(18,18,27,0.66); border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
}
/* Altura FIJA = una sola fila de carta (no crece ni envuelve al rankear) */
.home-mini-tier .htl-row { height: calc(var(--htl-h, 56px) + 12px); min-height: 0; }
.home-mini-tier .tl-row-label { flex: 0 0 56px; font-size: 24px; }
/* Resultados: una fila, fijos a la IZQUIERDA con margen, overflow a la derecha
   con desvanecido (nunca a 2 filas) */
.home-mini-tier .tl-row-cards {
  flex-wrap: nowrap; justify-content: flex-start; align-items: center;
  gap: 5px; padding: 0 0 0 10px; overflow: hidden; min-height: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
}
.home-mini-tier .htl-card {
  width: var(--htl-w, 40px); height: var(--htl-h, 56px); flex: 0 0 auto;
  border-radius: 4px; object-fit: cover; background: rgba(255,255,255,0.04);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* Pool: fijo a la IZQUIERDA con margen (no recentra al rankear) + altura
   RESERVADA (var --htl-h) → la tierlist NO se mueve al vaciarse el pool. */
.home-mini-tier .htl-pool {
  display: flex; gap: 6px; justify-content: flex-start; align-items: flex-start;
  flex-wrap: nowrap; width: 100%; padding-left: 10px;
  min-height: var(--htl-h, 56px);
}
.htl-fly { border-radius: 4px; object-fit: cover; box-shadow: 0 5px 14px rgba(0,0,0,0.6); }

/* ── Sección "qué es esto" ─────────────────────────────── */
.home-tile--about { padding: 22px 24px; }
.home-about-title {
  margin: 0 0 8px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.home-about-text {
  margin: 0; font-size: 14.5px; line-height: 1.62; color: rgba(255,255,255,0.66); max-width: 76ch;
}

/* ── Footer ────────────────────────────────────────────── */

/* ── Responsive (base; ajustes finos de móvil = responsive.css, Tanda 5) ──
   Breakpoint unificado del proyecto = 720px. */
@media (max-width: 720px) {
  .home-wrap { padding: 78px 16px 44px; }
  .home-hero { grid-template-columns: 1fr; gap: 14px; }
  .home-reel { height: 230px; }
  /* el carrusel pasa a 1 tarjeta-y-pico por vista (deslizable) */
  .home-tile { width: 78vw; max-width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-reel-card::after { animation: none; }
  .home-carousel-track { transition: none; }
}