/* ==========================================================
   LAIREN HOME — MOBILE HOTFIX 2026-10-14
   Scope: HOME only. Desktop (>=769px) remains untouched.
   Fixes:
   - Featured meta cards after HF desktop markup migration.
   - Top Mazos horizontal overflow on phones.
   - Mobile width containment.
   ========================================================== */

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  #home-page,
  #home-page > section,
  #home-page .container,
  #home-page .home-bottom-grid,
  #home-page .top-decks,
  #home-page .competitive-activity {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ----------------------------------------------------------
     4 DESTACADOS — restore the missing mobile styles for hf-*
     ---------------------------------------------------------- */
  #home-page .meta-summary .meta-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    height: auto !important;
  }

  #home-page .meta-summary .hf-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
    width: 100% !important;
    height: 146px !important;
    min-height: 146px !important;
    overflow: hidden !important;
    border-radius: 11px !important;
    background:
      radial-gradient(circle at 88% 35%, rgba(var(--accent-rgb), .10), transparent 34%),
      linear-gradient(145deg, rgba(5, 23, 40, .96), rgba(2, 12, 22, .99) 74%) !important;
  }

  #home-page .meta-summary .hf-card-info {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 10px 6px 10px 13px !important;
  }

  #home-page .meta-summary .hf-card-heading {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #d9e7ef !important;
    font-size: 9.4px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #home-page .meta-summary .hf-heading-icon {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--accent) !important;
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .34));
  }

  #home-page .meta-summary .hf-heading-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #home-page .meta-summary .hf-heading-icon--bars svg,
  #home-page .meta-summary .hf-heading-icon--star svg {
    fill: currentColor !important;
    stroke: none !important;
  }

  #home-page .meta-summary .hf-card h3 {
    margin: 7px 0 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #home-page .meta-summary .hf-card-metrics {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 8px !important;
  }

  #home-page .meta-summary .hf-card-metric {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    color: #d6e0e6 !important;
    font-size: 8.7px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #home-page .meta-summary .hf-card-metric--accent {
    color: #78ffd0 !important;
    font-weight: 750 !important;
  }

  #home-page .meta-summary .hf-metric-icon {
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--accent) !important;
  }

  #home-page .meta-summary .hf-metric-icon--trophy {
    color: #ffc72a !important;
  }

  #home-page .meta-summary .hf-metric-icon svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #home-page .meta-summary .hf-metric-icon--bars svg {
    fill: currentColor !important;
    stroke: none !important;
  }

  #home-page .meta-summary .hf-card-figure {
    position: relative !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 9px 7px 0 !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 83px !important;
    height: 124px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--accent-rgb), .86) !important;
    border-radius: 7px !important;
    /* Fallback móvil para destacados sin art_path propio.
       Si el backend entrega arte real, el style inline lo reemplaza. */
    background-image:
      linear-gradient(180deg, rgba(0, 8, 15, .02), rgba(0, 8, 15, .14)),
      url('/static/img/home/hero-bg.webp');
    background-repeat: no-repeat !important;
    background-size: auto 245px !important;
    box-shadow: inset 0 0 15px rgba(var(--accent-rgb), .06), 0 5px 14px rgba(0, 0, 0, .23) !important;
  }

  #home-page .meta-summary .hf-card-image--winner { background-position: 17% 48% !important; }
  #home-page .meta-summary .hf-card-image--played { background-position: 43% 44% !important; }
  #home-page .meta-summary .hf-card-image--growth { background-position: 29% 48% !important; }
  #home-page .meta-summary .hf-card-image--performance { background-position: 15% 46% !important; }

  #home-page .meta-summary .hf-card-arrow {
    position: absolute !important;
    z-index: 3 !important;
    right: 7px !important;
    bottom: 7px !important;
    display: grid !important;
    place-items: center !important;
    width: 21px !important;
    height: 21px !important;
    color: #fff !important;
    background: rgba(3, 14, 24, .92) !important;
    border: 1px solid rgba(var(--accent-rgb), .95) !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  /* ----------------------------------------------------------
     TOP MAZOS — two-line mobile rows; no horizontal overflow
     ---------------------------------------------------------- */
  #home-page .top-decks .ranking-header {
    display: none !important;
  }

  #home-page .top-decks .ranking-table {
    display: grid !important;
    grid-template-rows: none !important;
    gap: 5px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    border-top: 0 !important;
  }

  #home-page .top-decks .ranking-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto auto 12px !important;
    grid-template-areas:
      "rank deck deck wr arrow"
      "rank matches record share trend" !important;
    grid-template-rows: 26px 20px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    height: auto !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
    padding: 5px 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(58, 126, 173, .18) !important;
    border-radius: 7px !important;
    background: linear-gradient(90deg, rgba(40, 141, 200, .055), rgba(3, 15, 25, .34)) !important;
  }

  #home-page .top-decks .ranking-row:nth-child(2) {
    background: linear-gradient(90deg, rgba(40, 200, 245, .10), rgba(3, 15, 25, .34)) !important;
  }

  #home-page .top-decks .rank-number {
    grid-area: rank;
    align-self: center !important;
    font-size: 12px !important;
  }

  #home-page .top-decks .deck-name {
    grid-area: deck;
    min-width: 0 !important;
    gap: 5px !important;
  }

  #home-page .top-decks .deck-emblem {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
  }

  #home-page .top-decks .deck-name strong {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 11.2px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #home-page .top-decks .metric-text {
    align-self: center !important;
    min-width: 0 !important;
    font-size: 8.8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #home-page .top-decks .metric-text--matches { grid-area: matches; }
  #home-page .top-decks .metric-text--record { grid-area: record; }
  #home-page .top-decks .metric-text--wr {
    grid-area: wr;
    justify-self: end !important;
  }
  #home-page .top-decks .metric-text--share { grid-area: share; }
  #home-page .top-decks .ranking-trend {
    grid-area: trend;
    justify-self: end !important;
  }

  #home-page .top-decks .metric-text--matches::before {
    content: "PJ ";
    color: #688294;
    font-size: 7px;
    font-weight: 800;
  }

  #home-page .top-decks .metric-text--record::before {
    content: "G/E/P ";
    color: #688294;
    font-size: 7px;
    font-weight: 800;
  }

  #home-page .top-decks .metric-text--share::before {
    content: "Meta ";
    color: #688294;
    font-size: 7px;
    font-weight: 800;
  }

  #home-page .top-decks .wr-pill {
    min-width: 40px !important;
    height: 20px !important;
    padding-inline: 5px !important;
    font-size: 9px !important;
  }

  #home-page .top-decks .ranking-arrow {
    grid-area: arrow;
    align-self: center !important;
    justify-self: end !important;
    font-size: 15px !important;
  }

  #home-page .top-decks .home-panel-header {
    gap: 8px !important;
  }

  #home-page .top-decks .home-panel-link {
    font-size: 8.5px !important;
  }
}

@media (max-width: 430px) {
  #home-page .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    height: 140px !important;
    min-height: 140px !important;
  }

  #home-page .meta-summary .hf-card-info {
    padding-left: 12px !important;
  }

  #home-page .meta-summary .hf-card-heading {
    font-size: 9px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    font-size: 14.2px !important;
  }

  #home-page .meta-summary .hf-card-metric {
    font-size: 8.3px !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 77px !important;
    height: 118px !important;
  }

  #home-page .top-decks .ranking-row {
    grid-template-columns: 20px minmax(0, 1fr) auto auto 10px !important;
    column-gap: 4px !important;
    padding-inline: 5px !important;
  }

  #home-page .top-decks .deck-name strong {
    font-size: 10.7px !important;
  }

  #home-page .top-decks .metric-text {
    font-size: 8.2px !important;
  }

  #home-page .top-decks .wr-pill {
    min-width: 38px !important;
    font-size: 8.6px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V2 · 2026-10-17
   Objetivo:
   - Priorizar información útil en el primer viewport.
   - Hero compacto sin texto diminuto.
   - KPIs en una sola franja.
   - Carta más usada compacta.
   - 4 destacados en grilla 2 x 2.
   Desktop queda intacto.
   ========================================================== */
@media (max-width: 768px) {
  #home-page {
    padding-top: 0 !important;
  }

  #home-page > .hero,
  #home-page > .meta-summary {
    margin-bottom: 7px !important;
  }

  /* HERO: menos presentación, más información. */
  #home-page .hero-shell {
    gap: 7px !important;
    padding: 7px 9px 9px !important;
  }

  #home-page .hero-main {
    padding: 4px 0 0 !important;
  }

  #home-page .hero-copy {
    padding: 0 3px !important;
  }

  #home-page .hero-title {
    margin: 0 !important;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: .92 !important;
    letter-spacing: -.035em !important;
  }

  #home-page .hero-title span,
  #home-page .hero-title strong {
    display: block !important;
    margin-left: 0 !important;
  }

  /* En teléfono esta frase consume alto sin aportar información operativa. */
  #home-page .hero-subtitle {
    display: none !important;
  }

  /* 4 KPIs en una sola franja compacta. */
  #home-page .hero-indicators {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 8px auto 0 !important;
  }

  #home-page .hero-indicator {
    min-height: 43px !important;
    gap: 0 !important;
    justify-content: center !important;
    padding: 5px 3px !important;
    border-radius: 7px !important;
    text-align: center !important;
  }

  #home-page .hero-indicator-icon {
    display: none !important;
  }

  #home-page .hero-indicator > div {
    width: 100% !important;
  }

  #home-page .hero-indicator dt {
    min-height: 11px !important;
    overflow: visible !important;
    font-size: 0 !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-overflow: clip !important;
  }

  #home-page .hero-indicator dt::after {
    display: block;
    color: #aebdc9;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
  }

  #home-page .hero-indicator--tournaments dt::after { content: "Torneos"; }
  #home-page .hero-indicator--participations dt::after { content: "Particip."; }
  #home-page .hero-indicator--archetypes dt::after { content: "Arquetipos"; }
  #home-page .hero-indicator--provinces dt::after { content: "Provincias"; }

  #home-page .hero-indicator dd {
    margin-top: 4px !important;
    font-size: 18px !important;
    line-height: .95 !important;
  }

  /* Carta más usada: sigue siendo protagonista, pero sin comerse media pantalla. */
  #home-page .hero-card-most-played {
    width: 100% !important;
    min-height: 126px !important;
    height: 126px !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    border-radius: 10px !important;
  }

  #home-page .hero-card-leaders .hero-card-body {
    padding: 9px 7px 8px 12px !important;
  }

  #home-page .hero-card-leaders .hero-card-eyebrow {
    font-size: 8.4px !important;
    line-height: 1 !important;
  }

  #home-page .hero-card-leaders .hero-card-body h2 {
    min-height: 0 !important;
    max-height: 29px !important;
    margin-top: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.08 !important;
  }

  #home-page .hero-card-leaders .hero-card-value {
    margin-top: 5px !important;
    font-size: 25px !important;
    line-height: .96 !important;
  }

  #home-page .hero-card-leaders .hero-card-caption {
    margin-top: 2px !important;
    font-size: 9px !important;
  }

  #home-page .hero-card-metrics {
    gap: 3px !important;
    margin-top: 6px !important;
    font-size: 9.2px !important;
    line-height: 1.05 !important;
  }

  #home-page .hero-card-metrics strong {
    font-size: 9.8px !important;
  }

  #home-page .hero-card-leaders .hero-card-art {
    margin: 7px 8px 7px 0 !important;
    border-radius: 7px !important;
  }

  #home-page .hero-card-zone-dots {
    right: 9px !important;
    bottom: 6px !important;
  }

  /* 4 destacados: dos columnas, dos filas.
     No achicar letra: ocultamos la tercera métrica secundaria. */
  #home-page .meta-summary .meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    height: auto !important;
  }

  #home-page .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 52px !important;
    height: 112px !important;
    min-height: 112px !important;
    border-radius: 9px !important;
  }

  #home-page .meta-summary .hf-card-info {
    justify-content: center !important;
    padding: 7px 3px 7px 8px !important;
  }

  #home-page .meta-summary .hf-card-heading {
    min-height: 20px !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: visible !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    white-space: normal !important;
  }

  #home-page .meta-summary .hf-heading-icon {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
  }

  #home-page .meta-summary .hf-heading-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    display: -webkit-box !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 4px 0 0 !important;
    overflow: hidden !important;
    font-size: 13.2px !important;
    line-height: 1.06 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #home-page .meta-summary .hf-card-metrics {
    gap: 3px !important;
    margin-top: 5px !important;
  }

  #home-page .meta-summary .hf-card-metric {
    gap: 4px !important;
    overflow: hidden !important;
    font-size: 9.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #home-page .meta-summary .hf-card-metric:nth-child(n+3) {
    display: none !important;
  }

  #home-page .meta-summary .hf-metric-icon {
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
  }

  #home-page .meta-summary .hf-metric-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  #home-page .meta-summary .hf-card-figure {
    padding: 7px 5px 7px 0 !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 46px !important;
    height: 88px !important;
    min-height: 88px !important;
    border-radius: 6px !important;
    background-size: auto 175px !important;
  }

  #home-page .meta-summary .hf-card-arrow {
    right: 3px !important;
    bottom: 5px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 390px) {
  #home-page .hero-title {
    font-size: 27px !important;
  }

  #home-page .hero-indicator dt::after {
    font-size: 8.5px !important;
  }

  #home-page .hero-indicator dd {
    font-size: 17px !important;
  }

  #home-page .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }

  #home-page .meta-summary .hf-card-info {
    padding-left: 7px !important;
  }

  #home-page .meta-summary .hf-card-heading {
    font-size: 9.5px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    font-size: 12.5px !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 41px !important;
    height: 84px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V3 · 2026-10-17
   - 4 destacados 2x2 con las 3 métricas visibles.
   - Torneos destacados antes de Top Mazos, en formato compacto.
   - Top Mazos como filas compactas de dos líneas.
   ========================================================== */
@media (max-width: 768px) {

  /* ----------------------------------------------------------
     4 DESTACADOS — recuperar tercera métrica sin achicar texto
     ---------------------------------------------------------- */
  #home-page .meta-summary .hf-card {
    height: 124px !important;
    min-height: 124px !important;
  }

  #home-page .meta-summary .hf-card-info {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    min-height: 27px !important;
    max-height: 27px !important;
    font-size: 13px !important;
  }

  #home-page .meta-summary .hf-card-metrics {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-top: 5px !important;
  }

  #home-page .meta-summary .hf-card-metric,
  #home-page .meta-summary .hf-card-metric:nth-child(n+3) {
    display: flex !important;
    min-height: 13px !important;
    font-size: 9.4px !important;
    line-height: 1.05 !important;
  }

  #home-page .meta-summary .hf-card-image {
    height: 99px !important;
    min-height: 99px !important;
  }

  /* ----------------------------------------------------------
     ORDEN MÓVIL — destacados -> torneos -> top mazos
     ---------------------------------------------------------- */
  #home-page .home-bottom-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #home-page .competitive-activity {
    order: 1 !important;
  }

  #home-page .top-decks {
    order: 2 !important;
  }

  /* ----------------------------------------------------------
     TORNEOS — lista horizontal compacta por torneo
     ---------------------------------------------------------- */
  #home-page .competitive-activity > .container {
    padding: 8px !important;
  }

  #home-page .competitive-activity .home-panel-header {
    height: 26px !important;
    min-height: 26px !important;
    margin-bottom: 5px !important;
  }

  #home-page .competitive-activity .home-panel-title-wrap h2 {
    font-size: 14px !important;
  }

  #home-page .competitive-activity .home-panel-link {
    font-size: 9px !important;
  }

  #home-page .competitive-activity .activity-carousel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 92px !important;
    gap: 6px !important;
    height: auto !important;
    overflow: visible !important;
  }

  #home-page .competitive-activity .activity-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;
    border-radius: 8px !important;
  }

  #home-page .competitive-activity .activity-card-media {
    min-height: 0 !important;
    height: 100% !important;
    border-right: 1px solid rgba(251,191,36,.26) !important;
    border-bottom: 0 !important;
  }

  #home-page .competitive-activity .event-type {
    top: 5px !important;
    left: 5px !important;
    max-width: 62px !important;
    padding: 3px 4px 2px !important;
    font-size: 6.8px !important;
  }

  #home-page .competitive-activity .activity-card-body {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 7px 9px !important;
  }

  #home-page .competitive-activity .activity-card h3 {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 11.8px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #home-page .competitive-activity .event-facts {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #home-page .competitive-activity .event-fact {
    gap: 3px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 8.8px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #home-page .competitive-activity .event-fact-icon {
    width: 10px !important;
    height: 10px !important;
    flex-basis: 10px !important;
  }

  #home-page .competitive-activity .event-result {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #home-page .competitive-activity .event-result-copy {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  #home-page .competitive-activity .event-result small {
    margin: 0 !important;
    font-size: 7.8px !important;
  }

  #home-page .competitive-activity .event-result strong {
    min-width: 0 !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
  }

  #home-page .competitive-activity .event-result span {
    margin: 0 !important;
    color: #82b9d4 !important;
    font-size: 8px !important;
  }

  #home-page .competitive-activity .event-result-symbol {
    display: none !important;
  }

  /* ----------------------------------------------------------
     TOP MAZOS — cada mazo completo en una fila compacta 2 líneas
     ---------------------------------------------------------- */
  #home-page .top-decks > .container {
    padding: 8px !important;
  }

  #home-page .top-decks .home-panel-header {
    height: 26px !important;
    min-height: 26px !important;
    margin-bottom: 5px !important;
  }

  #home-page .top-decks .home-panel-title-wrap h2 {
    font-size: 14px !important;
  }

  #home-page .top-decks .ranking-table {
    display: grid !important;
    gap: 5px !important;
    width: 100% !important;
    height: auto !important;
  }

  #home-page .top-decks .ranking-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto auto auto 12px !important;
    grid-template-areas:
      "rank deck deck deck wr arrow"
      "rank matches record share trend trend" !important;
    grid-template-rows: 24px 17px !important;
    align-items: center !important;
    min-height: 51px !important;
    height: 51px !important;
    padding: 4px 7px !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    border-radius: 7px !important;
  }

  #home-page .top-decks .rank-number {
    font-size: 12px !important;
  }

  #home-page .top-decks .deck-name {
    min-width: 0 !important;
    gap: 6px !important;
  }

  #home-page .top-decks .deck-emblem {
    flex: 0 0 23px !important;
    width: 23px !important;
    height: 23px !important;
  }

  #home-page .top-decks .deck-name strong {
    font-size: 11.6px !important;
  }

  #home-page .top-decks .metric-text {
    font-size: 8.8px !important;
    line-height: 1 !important;
  }

  #home-page .top-decks .metric-text--matches::before,
  #home-page .top-decks .metric-text--record::before,
  #home-page .top-decks .metric-text--share::before {
    font-size: 7.5px !important;
  }

  #home-page .top-decks .wr-pill {
    min-width: 42px !important;
    height: 20px !important;
    font-size: 9.4px !important;
  }

  #home-page .top-decks .ranking-arrow {
    font-size: 16px !important;
  }
}

@media (max-width: 390px) {
  #home-page .meta-summary .hf-card {
    height: 121px !important;
    min-height: 121px !important;
  }

  #home-page .meta-summary .hf-card-metric,
  #home-page .meta-summary .hf-card-metric:nth-child(n+3) {
    font-size: 9px !important;
  }

  #home-page .competitive-activity .activity-card {
    grid-template-columns: 66px minmax(0, 1fr) !important;
  }

  #home-page .competitive-activity .event-facts {
    gap: 5px !important;
  }

  #home-page .competitive-activity .event-fact {
    font-size: 8.3px !important;
  }

  #home-page .top-decks .ranking-row {
    grid-template-columns: 20px minmax(0, 1fr) auto auto auto 10px !important;
    column-gap: 4px !important;
    padding-inline: 5px !important;
  }

  #home-page .top-decks .deck-name strong {
    font-size: 11px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V4 · 2026-10-17
   Objetivo: que el bloque de torneos cierre completo en el
   viewport móvil en lugar de quedar cortado a mitad.
   ========================================================== */
@media (max-width: 768px) {
  #home-page .competitive-activity > .container {
    padding: 7px !important;
  }

  #home-page .competitive-activity .home-panel-header {
    height: 24px !important;
    min-height: 24px !important;
    margin-bottom: 4px !important;
  }

  #home-page .competitive-activity .home-panel-title-wrap {
    gap: 5px !important;
  }

  #home-page .competitive-activity .home-panel-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }

  #home-page .competitive-activity .home-panel-title-wrap h2 {
    font-size: 13px !important;
  }

  #home-page .competitive-activity .home-panel-link {
    font-size: 8.8px !important;
  }

  #home-page .competitive-activity .activity-carousel {
    grid-auto-rows: 70px !important;
    gap: 5px !important;
  }

  #home-page .competitive-activity .activity-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    height: 70px !important;
    min-height: 70px !important;
  }

  #home-page .competitive-activity .event-type {
    top: 4px !important;
    left: 4px !important;
    max-width: 50px !important;
    padding: 2px 3px !important;
    font-size: 6.5px !important;
  }

  #home-page .competitive-activity .activity-card-body {
    grid-template-rows: 14px 14px 14px !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 5px 7px !important;
  }

  #home-page .competitive-activity .activity-card h3 {
    font-size: 10.4px !important;
    line-height: 14px !important;
  }

  #home-page .competitive-activity .event-facts {
    grid-template-columns: auto auto minmax(0,1fr) !important;
    gap: 6px !important;
  }

  #home-page .competitive-activity .event-fact {
    font-size: 7.9px !important;
    line-height: 14px !important;
  }

  #home-page .competitive-activity .event-fact-icon {
    width: 9px !important;
    height: 9px !important;
    flex-basis: 9px !important;
  }

  #home-page .competitive-activity .event-result-copy {
    grid-template-columns: auto minmax(0,1fr) auto !important;
    gap: 4px !important;
  }

  #home-page .competitive-activity .event-result small {
    font-size: 7px !important;
    line-height: 14px !important;
  }

  #home-page .competitive-activity .event-result strong {
    font-size: 8.2px !important;
    line-height: 14px !important;
  }

  #home-page .competitive-activity .event-result span {
    font-size: 7.4px !important;
    line-height: 14px !important;
  }
}

@media (max-width: 390px) {
  #home-page .competitive-activity .activity-card {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }

  #home-page .competitive-activity .event-facts {
    gap: 4px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V5 · 2026-10-17
   El primer viewport termina después de los 4 destacados.
   Torneos/Top Mazos empiezan recién al primer scroll.
   ========================================================== */
.home-mobile-fold-spacer {
  display: none;
}

@media (max-width: 768px) {
  #home-page .home-mobile-fold-spacer {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    pointer-events: none !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 0 !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V6 · 2026-10-17
   Primera pantalla = HERO + carta + 4 destacados completos.
   Sin espaciador artificial. El alto real se distribuye entre
   HERO y destacados. Después: Top Mazos y luego Torneos.
   ========================================================== */
@media (max-width: 768px) {
  /* Anular el espaciador experimental anterior. */
  #home-page .home-mobile-fold-spacer {
    display: none !important;
    height: 0 !important;
  }

  /* Repartir el alto útil del viewport real:
     45% HERO + 55% destacados, descontando header/gap. */
  #home-page > .hero {
    min-height: calc(45dvh - 27px) !important;
    height: calc(45dvh - 27px) !important;
    overflow: hidden !important;
  }

  #home-page > .hero .hero-shell {
    min-height: 100% !important;
    height: 100% !important;
  }

  /* Recuperar una aclaración útil que habíamos quitado. */
  #home-page .hero-subtitle {
    display: block !important;
    max-width: 96% !important;
    margin: 6px auto 0 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }

  #home-page .hero-indicators {
    margin-top: 7px !important;
  }

  #home-page .hero-card-most-played {
    min-height: 136px !important;
    height: 136px !important;
  }

  /* Los 4 destacados ocupan el resto del primer viewport.
     Se estiran, no se achica la tipografía. */
  #home-page > .meta-summary {
    min-height: calc(55dvh - 32px) !important;
    height: calc(55dvh - 32px) !important;
    overflow: hidden !important;
  }

  #home-page > .meta-summary > .container {
    height: 100% !important;
  }

  #home-page .meta-summary .meta-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #home-page .meta-summary .hf-card {
    height: 100% !important;
    min-height: 0 !important;
  }

  #home-page .meta-summary .hf-card-image {
    height: calc(100% - 14px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Orden pedido: primero Top Mazos, después Torneos. */
  #home-page .top-decks {
    order: 1 !important;
  }

  #home-page .competitive-activity {
    order: 2 !important;
  }
}

@media (max-width: 390px) {
  #home-page .hero-subtitle {
    font-size: 10px !important;
  }

  #home-page .hero-card-most-played {
    min-height: 132px !important;
    height: 132px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V7 · 2026-10-17
   Destacados en una sola columna: 4 tarjetas horizontales.
   Mantiene las 3 métricas y aprovecha mejor el ancho móvil.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .meta-summary {
    min-height: calc(55dvh - 32px) !important;
    height: calc(55dvh - 32px) !important;
  }

  #home-page .meta-summary .meta-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #home-page .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 9px !important;
  }

  #home-page .meta-summary .hf-card-info {
    min-width: 0 !important;
    justify-content: center !important;
    padding: 5px 5px 5px 10px !important;
  }

  #home-page .meta-summary .hf-card-heading {
    min-height: 18px !important;
    gap: 5px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #home-page .meta-summary .hf-heading-icon {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
  }

  #home-page .meta-summary .hf-heading-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 3px 0 0 !important;
    overflow: hidden !important;
    font-size: 14.2px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #home-page .meta-summary .hf-card-metrics {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 3px 10px !important;
    margin-top: 5px !important;
    min-width: 0 !important;
  }

  #home-page .meta-summary .hf-card-metric,
  #home-page .meta-summary .hf-card-metric:nth-child(n+3) {
    display: flex !important;
    min-width: 0 !important;
    min-height: 12px !important;
    font-size: 9.4px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #home-page .meta-summary .hf-card-metric:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  #home-page .meta-summary .hf-metric-icon {
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
  }

  #home-page .meta-summary .hf-metric-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  #home-page .meta-summary .hf-card-figure {
    padding: 5px 6px 5px 0 !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 74px !important;
    height: calc(100% - 10px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 6px !important;
    background-size: auto 190px !important;
  }

  #home-page .meta-summary .hf-card-arrow {
    right: 4px !important;
    bottom: 5px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 390px) {
  #home-page .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 74px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    font-size: 13.5px !important;
  }

  #home-page .meta-summary .hf-card-metric,
  #home-page .meta-summary .hf-card-metric:nth-child(n+3) {
    font-size: 9px !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 66px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V8 · 2026-10-17
   - Sin hueco entre carta principal y destacados.
   - 3 métricas de cada destacado en vertical.
   - Se elimina el subtítulo móvil para recuperar espacio.
   - Destacados apilados con alto compacto y natural.
   ========================================================== */
@media (max-width: 768px) {
  /* El HERO vuelve a medir por contenido: elimina el hueco negro
     que generaba el reparto fijo por vh. */
  #home-page > .hero {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #home-page > .hero .hero-shell {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 7px !important;
    padding-bottom: 7px !important;
  }

  #home-page .hero-main {
    padding-bottom: 0 !important;
  }

  /* En móvil priorizamos datos sobre texto institucional. */
  #home-page .hero-subtitle {
    display: none !important;
  }

  #home-page .hero-card-most-played {
    margin-top: 0 !important;
  }

  /* Destacados: alto natural, sin reparto artificial del viewport. */
  #home-page > .meta-summary {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  #home-page > .meta-summary > .container {
    height: auto !important;
  }

  #home-page .meta-summary .meta-grid {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 6px !important;
  }

  #home-page .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    height: 126px !important;
    min-height: 126px !important;
  }

  #home-page .meta-summary .hf-card-info {
    justify-content: center !important;
    padding: 7px 6px 7px 10px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    margin-top: 3px !important;
    font-size: 14.2px !important;
  }

  /* Las 3 métricas vuelven a una columna, una debajo de la otra. */
  #home-page .meta-summary .hf-card-metrics {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    margin-top: 7px !important;
  }

  #home-page .meta-summary .hf-card-metric,
  #home-page .meta-summary .hf-card-metric:nth-child(n+3),
  #home-page .meta-summary .hf-card-metric:nth-child(3) {
    display: flex !important;
    grid-column: auto !important;
    min-height: 13px !important;
    font-size: 9.7px !important;
    line-height: 1.05 !important;
  }

  #home-page .meta-summary .hf-card-figure {
    padding: 6px 6px 6px 0 !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 80px !important;
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
  }
}

@media (max-width: 390px) {
  #home-page .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 80px !important;
    height: 124px !important;
    min-height: 124px !important;
  }

  #home-page .meta-summary .hf-card-metric,
  #home-page .meta-summary .hf-card-metric:nth-child(n+3),
  #home-page .meta-summary .hf-card-metric:nth-child(3) {
    font-size: 9.2px !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 72px !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V9 · 2026-10-17
   Ajuste real al primer viewport:
   HERO + carta + 4 destacados completos. La altura de los
   destacados usa el espacio restante del teléfono.
   ========================================================== */
@media (max-width: 768px) {
  /* Ganar un poco de alto arriba sin perder legibilidad. */
  #home-page .hero-shell {
    gap: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  #home-page .hero-main {
    padding-top: 2px !important;
  }

  #home-page .hero-title {
    font-size: clamp(26px, 7.5vw, 32px) !important;
    line-height: .90 !important;
  }

  #home-page .hero-indicators {
    margin-top: 6px !important;
  }

  #home-page .hero-indicator {
    min-height: 39px !important;
    padding-block: 4px !important;
  }

  #home-page .hero-indicator dd {
    font-size: 17px !important;
  }

  #home-page .hero-card-most-played {
    min-height: 124px !important;
    height: 124px !important;
  }

  #home-page .hero-card-leaders .hero-card-body {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  /* El bloque ocupa exactamente lo que queda hasta el borde
     inferior del primer viewport. */
  #home-page > .meta-summary {
    height: var(--home-mobile-meta-h, 430px) !important;
    min-height: var(--home-mobile-meta-h, 430px) !important;
    max-height: var(--home-mobile-meta-h, 430px) !important;
    overflow: hidden !important;
  }

  #home-page > .meta-summary > .container,
  #home-page .meta-summary .meta-grid {
    height: 100% !important;
    min-height: 0 !important;
  }

  #home-page .meta-summary .meta-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #home-page .meta-summary .hf-card {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  #home-page .meta-summary .hf-card-info {
    padding: 5px 5px 5px 9px !important;
  }

  #home-page .meta-summary .hf-card-heading {
    min-height: 16px !important;
    font-size: 10.2px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    margin-top: 2px !important;
    font-size: 13.8px !important;
    line-height: 1 !important;
  }

  #home-page .meta-summary .hf-card-metrics {
    gap: 3px !important;
    margin-top: 5px !important;
  }

  #home-page .meta-summary .hf-card-metric,
  #home-page .meta-summary .hf-card-metric:nth-child(n+3),
  #home-page .meta-summary .hf-card-metric:nth-child(3) {
    min-height: 12px !important;
    font-size: 9.4px !important;
    line-height: 1 !important;
  }

  #home-page .meta-summary .hf-card-figure {
    padding: 5px 5px 5px 0 !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 72px !important;
    height: calc(100% - 10px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* El siguiente bloque empieza recién fuera del primer viewport. */
  #home-page > .home-bottom-grid {
    margin-top: 6px !important;
  }
}

@media (max-width: 390px) {
  #home-page .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }

  #home-page .meta-summary .hf-card h3 {
    font-size: 13.2px !important;
  }

  #home-page .meta-summary .hf-card-metric,
  #home-page .meta-summary .hf-card-metric:nth-child(n+3),
  #home-page .meta-summary .hf-card-metric:nth-child(3) {
    font-size: 9px !important;
  }

  #home-page .meta-summary .hf-card-image {
    width: 66px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE COMPACT V10 · 2026-10-17
   Cierre fino del primer viewport: la cuarta tarjeta termina
   al borde inferior y Top Mazos empieza recién al hacer scroll.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .meta-summary {
    margin-bottom: 0 !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 8px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V13 · 2026-10-17
   Estructural: HERO + carta + 4 destacados forman un bloque
   de exactamente un viewport visible debajo del header.
   Top Mazos queda físicamente fuera de ese bloque.
   ========================================================== */

/* En escritorio el wrapper no crea caja: preserva el grid original. */
@media (min-width: 769px) {
  #home-page > .home-mobile-fold {
    display: contents !important;
  }

  /* Estos dos eran hijos directos antes del wrapper. */
  #home-page > .home-mobile-fold > .hero,
  #home-page > .home-mobile-fold > .meta-summary {
    margin-bottom: var(--home-gap);
  }
}

@media (min-width: 1101px) {
  #home-page > .home-mobile-fold > .hero,
  #home-page > .home-mobile-fold > .meta-summary {
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 768px) {
  #home-page {
    padding-top: 0 !important;
  }

  #home-page > .home-mobile-fold {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    height: calc(100dvh - 52px) !important;
    min-height: calc(100dvh - 52px) !important;
    max-height: calc(100dvh - 52px) !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > .hero {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > .meta-summary {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > .meta-summary > .container,
  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    height: 100% !important;
    min-height: 0 !important;
  }

  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-info {
    min-height: 0 !important;
    justify-content: center !important;
    padding: 5px 5px 5px 9px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-metrics {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-top: 5px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-metric,
  #home-page > .home-mobile-fold .meta-summary .hf-card-metric:nth-child(n+3),
  #home-page > .home-mobile-fold .meta-summary .hf-card-metric:nth-child(3) {
    display: flex !important;
    grid-column: auto !important;
    min-height: 12px !important;
    font-size: 9.4px !important;
    line-height: 1 !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-figure {
    min-height: 0 !important;
    padding: 5px 5px 5px 0 !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    width: 72px !important;
    height: calc(100% - 10px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* El contenido siguiente empieza recién después del primer viewport. */
  #home-page > .home-bottom-grid {
    margin-top: 8px !important;
  }
}

@media (max-width: 390px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    width: 66px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V14 · 2026-10-17
   Ajuste final sobre teléfono real:
   el primer bloque gana 34px y los reparte entre las 4 tarjetas.
   No agrega hueco; Top Mazos empieza completamente debajo.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold {
    height: calc(100dvh - 18px) !important;
    min-height: calc(100dvh - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
  }

  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    gap: 5px !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 8px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V15 · 2026-10-17
   El alto ya no depende de vh/dvh de Chrome: se calcula con
   window.innerHeight y la posición real del bloque.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold {
    height: var(--home-mobile-fold-h, calc(100vh - 52px)) !important;
    min-height: var(--home-mobile-fold-h, calc(100vh - 52px)) !important;
    max-height: var(--home-mobile-fold-h, calc(100vh - 52px)) !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 8px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V16 · 2026-10-17
   Ajuste visual sobre el teléfono real:
   los 62px extra no son hueco; se reparten entre las cuatro
   tarjetas para que Top Mazos quede completamente fuera.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    align-content: stretch !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card {
    align-self: stretch !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 10px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V17 · 2026-10-17
   Ajuste geométrico real: Top Mazos se usa como límite.
   Los píxeles que sobran/faltan se distribuyen entre las 4
   tarjetas, sin huecos y sin depender de vh/dvh.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #home-page > .home-mobile-fold > .hero {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 7px !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > .meta-summary {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #home-page > .home-mobile-fold > .meta-summary > .container,
  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    height: auto !important;
    min-height: 0 !important;
  }

  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 5px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: var(--home-mobile-card-h, 104px) !important;
    min-height: var(--home-mobile-card-h, 104px) !important;
    max-height: none !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: calc(100% - 10px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 0 !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V18 · 2026-10-17
   Margen de seguridad visual: Top Mazos comienza 36px debajo
   del borde visible. Esos 36px se reparten entre las 4 tarjetas,
   por lo que no aparece ningún hueco artificial.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    transition: height .08s linear !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V19 · 2026-10-17
   Corrección determinística para el teléfono real:
   sin JS de medición; las 4 tarjetas ganan altura real y
   Top Mazos queda completamente después del primer scroll.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #home-page > .home-mobile-fold > .hero {
    margin-bottom: 7px !important;
  }

  #home-page > .home-mobile-fold > .meta-summary {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 5px !important;
    height: auto !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 10px !important;
  }
}

@media (max-width: 390px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V20 · 2026-10-17
   Ajuste visual final sobre la captura real del teléfono:
   +6px por tarjeta (24px totales), suficientes para absorber
   el espacio donde asomaba Top Mazos sin cortar la 4ª tarjeta.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 10px !important;
  }
}

@media (max-width: 390px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V21 · 2026-10-17
   Ajuste sobre captura real: +6px adicionales por tarjeta.
   Top Mazos queda fuera del primer viewport sin dejar hueco.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 12px !important;
  }
}

@media (max-width: 390px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V22 · 2026-10-17
   Solución estructural definitiva:
   HEADER (52px) + bloque inicial = 100svh exactos.
   Dentro del bloque, HERO ocupa lo suyo y las 4 tarjetas
   comparten TODO el alto restante. Top Mazos queda después.
   ========================================================== */
@media (max-width: 768px) {
  #home-page {
    padding-top: 0 !important;
  }

  #home-page > .home-mobile-fold {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: calc(100svh - 52px) !important;
    min-height: calc(100svh - 52px) !important;
    max-height: calc(100svh - 52px) !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > .hero {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > .meta-summary {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > .meta-summary > .container,
  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    height: 100% !important;
    min-height: 0 !important;
  }

  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: calc(100% - 10px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 10px !important;
  }
}

@media (max-width: 390px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE FIRST FOLD V23 · 2026-10-17
   Solución simple sobre el teléfono real:
   - vuelve el subtítulo "Estadísticas, mazos..."
   - se elimina el encorsetado fijo de 100svh
   - se conservan las 4 tarjetas completas
   - Top Mazos queda después del primer scroll
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #home-page > .home-mobile-fold > .hero {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 7px !important;
    overflow: hidden !important;
  }

  #home-page .hero-subtitle {
    display: block !important;
    margin: 6px 12px 0 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  #home-page > .home-mobile-fold > .meta-summary {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #home-page > .home-mobile-fold > .meta-summary > .container,
  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    height: auto !important;
    min-height: 0 !important;
  }

  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 5px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
  }

  #home-page > .home-bottom-grid {
    margin-top: 14px !important;
  }
}

@media (max-width: 390px) {
  #home-page .hero-subtitle {
    font-size: 10px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
  }
}


/* ==========================================================
   LAIREN HOME — MOBILE WIDTH ALIGN V24 · 2026-10-17
   Top Mazos y Torneos usan exactamente el mismo ancho externo
   que las tarjetas destacadas. Evita el doble gutter del
   .container anidado dentro de .home-bottom-grid.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-bottom-grid {
    width: min(calc(100% - (var(--home-gutter) * 2)), var(--home-max)) !important;
    margin-inline: auto !important;
  }

  #home-page > .home-bottom-grid > section {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  #home-page > .home-bottom-grid > section > .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  #home-page .top-decks > .container,
  #home-page .competitive-activity > .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  #home-page .top-decks .ranking-table,
  #home-page .competitive-activity .activity-carousel {
    width: 100% !important;
    max-width: none !important;
  }
}


/* ==========================================================
   LAIREN HOME — TOP MAZOS MOBILE V25 · 2026-10-17
   Misma lectura que MAZOS: identidad arriba y todos los datos
   secundarios juntos en una sola línea compacta.
   ========================================================== */
#home-page .top-decks .ranking-meta-line{
  display:contents;
}

@media (max-width: 768px) {
  #home-page .top-decks .ranking-row{
    display:grid !important;
    grid-template-columns:24px minmax(0,1fr) auto 12px !important;
    grid-template-areas:
      "rank deck wr arrow"
      "rank meta meta meta" !important;
    grid-template-rows:27px 18px !important;
    min-height:57px !important;
    height:57px !important;
    padding:5px 8px !important;
    column-gap:7px !important;
    row-gap:2px !important;
  }

  #home-page .top-decks .rank-number{
    grid-area:rank !important;
    align-self:center !important;
    font-size:12px !important;
  }

  #home-page .top-decks .deck-name{
    grid-area:deck !important;
    min-width:0 !important;
    gap:6px !important;
  }

  #home-page .top-decks .deck-emblem{
    flex:0 0 25px !important;
    width:25px !important;
    height:25px !important;
  }

  #home-page .top-decks .deck-name strong{
    font-size:11.5px !important;
  }

  #home-page .top-decks .metric-text--wr{
    grid-area:wr !important;
    justify-self:end !important;
  }

  #home-page .top-decks .ranking-arrow{
    grid-area:arrow !important;
    align-self:center !important;
    justify-self:end !important;
  }

  #home-page .top-decks .ranking-meta-line{
    grid-area:meta !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  #home-page .top-decks .ranking-meta-line > .metric-text{
    flex:0 0 auto !important;
    min-width:0 !important;
    font-size:9.2px !important;
    line-height:1 !important;
  }

  #home-page .top-decks .ranking-meta-line > .metric-text + .metric-text{
    margin-left:7px !important;
    padding-left:7px !important;
    border-left:1px solid rgba(117,151,176,.24) !important;
  }

  #home-page .top-decks .ranking-meta-line .ranking-trend{
    margin-left:auto !important;
    padding-left:7px !important;
  }

  #home-page .top-decks .metric-text--matches::before{
    content:"PJ " !important;
    font-size:8px !important;
  }

  #home-page .top-decks .metric-text--record::before{
    content:"G/E/P " !important;
    font-size:8px !important;
  }

  #home-page .top-decks .metric-text--share::before{
    content:"Meta " !important;
    font-size:8px !important;
  }
}


/* ==========================================================
   HOME MOBILE V27 — cuatro destacados con margen inferior visible
   La altura restante se reparte entre las cuatro tarjetas.
   Conserva el subtitulo y los tres indicadores de cada una.
   ========================================================== */
@media (max-width: 768px) {
  #home-page > .home-mobile-fold {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    padding-bottom: 12px !important;
    height: calc(100svh - 52px) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > .hero {
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #home-page > .home-mobile-fold > .meta-summary,
  #home-page > .home-mobile-fold > .meta-summary > .container {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 5px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-info {
    min-height: 0 !important;
    justify-content: center !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card h3 {
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 3px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-metrics {
    gap: 2px !important;
    margin-top: 4px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-figure {
    min-height: 0 !important;
    padding-block: 5px !important;
  }

  #home-page > .home-mobile-fold .meta-summary .hf-card-image {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 390px) {
  #home-page > .home-mobile-fold .meta-summary .hf-card {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }
}

/* En pantallas especialmente bajas, permitir scroll normal en
   lugar de recortar la información de las tarjetas. */
@media (max-width: 768px) and (max-height: 640px) {
  #home-page > .home-mobile-fold {
    height: auto !important;
    overflow: visible !important;
  }
  #home-page > .home-mobile-fold .meta-summary .meta-grid {
    grid-template-rows: repeat(4, minmax(112px, auto)) !important;
  }
}


/* ==========================================================
   HOME DESKTOP V28 — restaurar geometria anterior de HOME.
   El wrapper .home-mobile-fold es transparente (display:contents),
   pero los selectores originales #home-page > .hero/.meta-summary
   ya no alcanzan a sus hijos. Replicar el tamano de los 3 renglones
   sin modificar imagenes, fondos, posicion de arte ni estilos mobile.
   ========================================================== */
@media (min-width: 1101px) {
  #home-page > .home-mobile-fold {
    display: contents !important;
  }

  #home-page > .home-mobile-fold > .hero,
  #home-page > .home-mobile-fold > .meta-summary {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Hero a sangre como antes del wrapper, mismo asset y encuadre. */
  #home-page > .home-mobile-fold > .hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* Los cuatro destacados deben usar exclusivamente el ancho
     disponible de la grilla y respetar ambos gutters laterales. */
  #home-page > .home-mobile-fold > .meta-summary {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }
}


/* ==========================================================
   HOME TOP MAZOS V32 — etiquetas HTML y filas consistentes.
   Solo HOME en telefono; escritorio mantiene sus estilos.
   ========================================================== */

/* En tablet/escritorio el ranking sigue siendo una tabla:
   los labels nuevos son exclusivos de la tarjeta mobile. */
@media (min-width: 769px) {
  #home-page .top-decks .wr-label,
  #home-page .top-decks .mobile-stat-label {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #home-page .top-decks .ranking-table {
    display: grid !important;
    grid-template-rows: none !important;
    gap: 6px !important;
    height: auto !important;
    width: 100% !important;
  }

  #home-page .top-decks .ranking-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 62px 12px !important;
    grid-template-areas:
      "rank deck wr arrow"
      "meta meta meta meta" !important;
    grid-template-rows: 39px 24px !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
    min-height: 78px !important;
    height: auto !important;
    padding: 6px 9px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #home-page .top-decks .ranking-row > .rank-number {
    grid-area: rank !important;
    align-self: center !important;
  }

  #home-page .top-decks .ranking-row > .deck-name {
    grid-area: deck !important;
    min-width: 0 !important;
  }

  #home-page .top-decks .ranking-row > .deck-name strong {
    font-size: 12.5px !important;
  }

  #home-page .top-decks .ranking-row > .metric-text--wr {
    grid-area: wr !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #home-page .top-decks .ranking-row .metric-text--wr::before {
    content: none !important;
    display: none !important;
  }

  #home-page .top-decks .ranking-row .wr-label {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #adc7d6 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #home-page .top-decks .ranking-row .wr-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 56px !important;
    height: 22px !important;
    padding: 0 5px !important;
    font-size: 11.2px !important;
  }

  #home-page .top-decks .ranking-row > .ranking-arrow {
    grid-area: arrow !important;
    justify-self: end !important;
    align-self: center !important;
  }

  /* La segunda linea es un bloque de cuatro grupos independientes
     que se reparten el ancho; no hereda columnas del ranking desktop. */
  #home-page .top-decks .ranking-row > .ranking-meta-line {
    grid-area: meta !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    gap: 8px !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  #home-page .top-decks .ranking-row > .ranking-meta-line > .metric-text {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  /* Desactivar los labels generados por las versiones antiguas. */
  #home-page .top-decks .ranking-row .ranking-meta-line > .metric-text::before {
    content: none !important;
    display: none !important;
  }

  #home-page .top-decks .ranking-row .ranking-meta-line .mobile-stat-label {
    display: inline !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #9cb8c9 !important;
    font: inherit !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #home-page .top-decks .ranking-row .ranking-meta-line .mobile-stat-value {
    display: inline !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  #home-page .top-decks .ranking-row .ranking-meta-line .ranking-trend {
    grid-area: auto !important;
    justify-self: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 390px) {
  #home-page .top-decks .ranking-row {
    grid-template-columns: 20px minmax(0, 1fr) 58px 10px !important;
    column-gap: 4px !important;
    padding-inline: 6px !important;
  }

  #home-page .top-decks .ranking-row > .ranking-meta-line {
    gap: 5px !important;
    padding: 0 !important;
  }

  #home-page .top-decks .ranking-row > .ranking-meta-line > .metric-text {
    gap: 3px !important;
    font-size: 10px !important;
  }

  #home-page .top-decks .ranking-row .wr-pill {
    min-width: 52px !important;
  }
}


/* ==========================================================
   HOME MOBILE V33 — legibilidad de Top Mazos y Torneos.
   Unicamente <=768px; no toca hero, destacados ni footer.
   ========================================================== */
@media (max-width: 768px) {
  /* TOP MAZOS: dos renglones; WinRate arriba del valor. */
  #home-page .top-decks .ranking-row {
    grid-template-columns: 23px minmax(0,1fr) 64px 12px !important;
    grid-template-areas: "rank deck wr arrow" "meta meta meta meta" !important;
    grid-template-rows: 42px 27px !important;
    min-height: 83px !important;
    height: auto !important;
    column-gap: 7px !important;
    row-gap: 4px !important;
    padding: 6px 10px !important;
  }

  #home-page .top-decks .ranking-row .deck-name {
    min-width: 0 !important;
    gap: 7px !important;
  }

  #home-page .top-decks .ranking-row .deck-name strong {
    font-size: 12.8px !important;
  }

  #home-page .top-decks .ranking-row .deck-emblem {
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
  }

  /* Asegurar la visibilidad de la iconografia oficial existente.
     Usa las mismas imagenes locales /static/img/tribes/*.png. */
  #home-page .top-decks .ranking-row .deck-emblem .mu-archetype-symbol img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 14px !important;
    height: 19px !important;
    object-fit: contain !important;
    filter: brightness(1.3) contrast(1.15) drop-shadow(0 0 2px rgba(255,255,255,.18)) !important;
  }

  #home-page .top-decks .ranking-row .deck-emblem .mu-archetype-badge[data-tribe-count="1"] .mu-archetype-symbol img {
    width: 20px !important;
    height: 20px !important;
  }

  #home-page .top-decks .ranking-row > .metric-text--wr {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    min-width: 0 !important;
    gap: 4px !important;
  }

  /* Titulo visible incluso con la plantilla previa que no tiene
     el span .wr-label. No duplicarlo cuando este presente. */
  #home-page .top-decks .ranking-row .metric-text--wr::before {
    content: "WinRate" !important;
    display: block !important;
    color: #a8c6d8 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  #home-page .top-decks .ranking-row .wr-label {
    display: none !important;
  }

  #home-page .top-decks .ranking-row .wr-pill {
    min-width: 58px !important;
    height: 22px !important;
    font-size: 11.5px !important;
  }

  /* La segunda linea ocupa TODO el ancho y mantiene
     cuatro grupos separados y del mismo tamano tipografico. */
  #home-page .top-decks .ranking-row > .ranking-meta-line {
    grid-area: meta !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
    padding: 0 1px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #home-page .top-decks .ranking-row > .ranking-meta-line > .metric-text {
    display: inline-flex !important;
    align-items: baseline !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 11.2px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #home-page .top-decks .ranking-row > .ranking-meta-line > .metric-text::before {
    display: none !important;
    content: none !important;
  }

  #home-page .top-decks .ranking-row .mobile-stat-label,
  #home-page .top-decks .ranking-row .mobile-stat-value {
    display: inline-block !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  #home-page .top-decks .ranking-row .mobile-stat-label {
    color: #b1c9d7 !important;
    font-weight: 800 !important;
  }

  #home-page .top-decks .ranking-row .mobile-stat-value {
    color: #edf7fb !important;
    font-weight: 800 !important;
  }

  #home-page .top-decks .ranking-row .ranking-trend {
    grid-area: auto !important;
    margin-left: 0 !important;
  }

  #home-page .top-decks .ranking-row .ranking-trend.positive .mobile-stat-value {
    color: #17e99a !important;
  }

  #home-page .top-decks .ranking-row .ranking-trend.negative .mobile-stat-value {
    color: #ff5867 !important;
  }

  /* TORNEOS: tarjetas algo mas altas para agrandar la informacion
     sin cortar el nombre del ganador ni su arquetipo. */
  #home-page .competitive-activity .activity-carousel {
    grid-auto-rows: 94px !important;
    gap: 7px !important;
  }

  #home-page .competitive-activity .activity-card {
    grid-template-columns: 68px minmax(0,1fr) !important;
    grid-template-rows: 1fr !important;
    height: 94px !important;
    min-height: 94px !important;
  }

  #home-page .competitive-activity .activity-card-body {
    display: grid !important;
    grid-template-rows: minmax(16px,auto) 16px minmax(26px,auto) !important;
    align-content: center !important;
    row-gap: 5px !important;
    padding: 6px 9px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #home-page .competitive-activity .activity-card h3 {
    min-height: 0 !important;
    font-size: 12.3px !important;
    line-height: 1.18 !important;
  }

  #home-page .competitive-activity .event-facts {
    display: grid !important;
    grid-template-columns: auto auto minmax(0,1fr) !important;
    gap: 6px !important;
  }

  #home-page .competitive-activity .event-fact {
    font-size: 9px !important;
    line-height: 16px !important;
  }

  #home-page .competitive-activity .event-fact-icon {
    width: 11px !important;
    height: 11px !important;
    flex-basis: 11px !important;
  }

  #home-page .competitive-activity .event-result {
    display: block !important;
    min-width: 0 !important;
  }

  /* Ganador y mazo utilizado en renglones diferenciados:
     el nombre del arquetipo ya no queda diminuto a la derecha. */
  #home-page .competitive-activity .event-result-copy {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    grid-template-rows: 13px 13px !important;
    align-items: center !important;
    gap: 2px 6px !important;
    min-width: 0 !important;
  }

  #home-page .competitive-activity .event-result small {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: 9px !important;
    line-height: 13px !important;
  }

  #home-page .competitive-activity .event-result strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    font-size: 10.5px !important;
    line-height: 13px !important;
  }

  #home-page .competitive-activity .event-result span {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #9fd1ea !important;
    font-size: 10.7px !important;
    font-weight: 800 !important;
    line-height: 13px !important;
  }
}

@media (max-width: 390px) {
  #home-page .top-decks .ranking-row {
    grid-template-columns: 20px minmax(0,1fr) 60px 11px !important;
    padding-inline: 7px !important;
    column-gap: 5px !important;
  }

  #home-page .top-decks .ranking-row > .ranking-meta-line {
    gap: 4px !important;
    padding: 0 !important;
  }

  #home-page .top-decks .ranking-row > .ranking-meta-line > .metric-text {
    gap: 4px !important;
    font-size: 10.2px !important;
  }

  #home-page .competitive-activity .activity-card h3 {
    font-size: 11.8px !important;
  }

  #home-page .competitive-activity .event-fact {
    font-size: 8.4px !important;
  }
}


/* ==========================================================
   HOME DESKTOP V35 — texto legible y margen derecho real.
   Solo desktop (>=1101px); la HOME movil queda intacta.
   HERO: no se modifican imagen, geometria ni encuadre.
   ========================================================== */
@media (min-width: 1101px) {
  /* Reservar aire al borde derecho para los dos renglones de
     tarjetas sin crear scroll horizontal ni desplazar el hero. */
  #home-page > .home-mobile-fold > section.meta-summary,
  #home-page > .home-bottom-grid {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-width: 0 !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary > .container,
  #home-page > .home-mobile-fold > section.meta-summary .meta-grid,
  #home-page > .home-bottom-grid > section,
  #home-page > .home-bottom-grid > section > .container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary .meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #home-page > .home-bottom-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #home-page > .home-bottom-grid .activity-carousel {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #home-page > .home-bottom-grid .activity-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Cuatro destacados: titulo y metricas legibles a 1366px. */
  #home-page .meta-summary .hf-card-heading {
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  #home-page .meta-summary .hf-card h3 {
    font-size: 17px !important;
    height: 20px !important;
    min-height: 20px !important;
    line-height: 20px !important;
  }

  #home-page .meta-summary .hf-card-metric {
    font-size: 10.5px !important;
    font-weight: 650 !important;
    line-height: 15px !important;
  }

  /* Top Mazos: respetar 8 filas sin microtipografia. */
  #home-page .home-bottom-grid .home-panel-title-wrap h2 {
    font-size: 15.5px !important;
  }

  #home-page .home-bottom-grid .home-panel-link {
    font-size: 10.8px !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-header {
    font-size: 10.2px !important;
  }

  #home-page .home-bottom-grid .top-decks .rank-number {
    font-size: 13px !important;
  }

  #home-page .home-bottom-grid .top-decks .deck-name strong {
    font-size: 12.4px !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text,
  #home-page .home-bottom-grid .top-decks .ranking-trend {
    font-size: 11.2px !important;
  }

  /* Torneos: ampliar titulos, hechos y ganador, conservando 4 tarjetas. */
  #home-page .home-bottom-grid .competitive-activity .event-type {
    font-size: 8.3px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-card h3 {
    font-size: 11.8px !important;
    line-height: 1.14 !important;
    min-height: 37px !important;
    -webkit-line-clamp: 3 !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-card-media {
    min-height: 0 !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-card {
    grid-template-rows: 60px minmax(0, 1fr) !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-fact {
    font-size: 9.6px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-result small {
    font-size: 8px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-result strong {
    font-size: 10.2px !important;
    line-height: 1.12 !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-result span {
    font-size: 9px !important;
    line-height: 1.12 !important;
  }
}


/* ==========================================================
   HOME DESKTOP V36 — tres renglones sin superposicion.
   No altera estilos de telefono. Imagen: carta real de LAIREN
   "Faro de la eternidad", ya disponible en static/img.
   ========================================================== */
@media (min-width: 1101px) {
  #home-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, .88fr) minmax(0, .71fr) minmax(0, 1.67fr) !important;
    row-gap: 9px !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold {
    display: contents !important;
  }

  #home-page > .home-mobile-fold > .hero {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    position: relative !important;
    z-index: 0 !important;
  }

  /* Fondo de una carta auténtica del juego, sin personaje genérico. */
  #home-page > .home-mobile-fold > .hero::before {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background-image:
      linear-gradient(90deg, rgba(2, 9, 19, .18) 0%, rgba(2, 9, 19, .55) 23%, rgba(3, 11, 22, .90) 43%, #04101f 77%),
      url('/static/img/home/cards/side-leader.webp') !important;
    background-size: 100% 100%, 470px auto !important;
    background-position: center, 1% 39% !important;
    background-repeat: no-repeat !important;
    filter: none !important;
  }

  #home-page > .home-mobile-fold > .hero::after {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    background: radial-gradient(circle at 53% 18%, rgba(0, 167, 255, .10), transparent 31%) !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    z-index: 1 !important;
    align-self: stretch !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 10px !important;
    overflow: hidden !important;
  }

  /* Anula un viejo translateY(-8px) que montaba tarjetas sobre hero. */
  #home-page > .home-mobile-fold > section.meta-summary > .container,
  #home-page > .home-mobile-fold > section.meta-summary .meta-grid {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary .meta-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary .hf-card {
    min-height: 0 !important;
    height: 100% !important;
  }

  #home-page > .home-bottom-grid {
    grid-column: 1 !important;
    grid-row: 3 !important;
    position: relative !important;
    z-index: 1 !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 10px !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  body:has(#home-page) > footer.site-footer,
  body:has(#home-page) footer.site-footer {
    display: none !important;
  }

  /* Ampliar la miniatura de carta del HERO, equilibrar porcentajes. */
  #home-page .hero-card-leaders.hero-card-most-played {
    width: 274px !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }

  #home-page .hero-card-leaders .hero-card-leader-panel {
    grid-template-columns: minmax(0, 1fr) 45% !important;
  }

  #home-page .hero-card-leaders .hero-card-body {
    padding: 10px 3px 7px 12px !important;
  }

  #home-page .hero-card-leaders .hero-card-art {
    margin: 5px 6px 5px 0 !important;
  }

  #home-page .hero-card-leaders .hero-card-eyebrow {
    font-size: 8.2px !important;
    line-height: 1.08 !important;
  }

  #home-page .hero-card-leaders .hero-card-body h2 {
    font-size: 13px !important;
    line-height: 1.05 !important;
    margin-top: 4px !important;
    min-height: 26px !important;
    max-height: 29px !important;
  }

  #home-page .hero-card-leaders .hero-card-value {
    font-size: 20px !important;
    line-height: 1 !important;
    margin-top: 4px !important;
  }

  #home-page .hero-card-leaders .hero-card-caption {
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  #home-page .hero-card-leaders .hero-card-metrics {
    gap: 3px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin-top: 6px !important;
  }

  #home-page .hero-card-leaders .hero-card-metrics strong {
    font-size: 9.6px !important;
  }

  /* Corregir el orden de columnas en Top Mazos:
     WR estaba ocupando la columna de Partidas. */
  #home-page .home-bottom-grid .top-decks .ranking-header,
  #home-page .home-bottom-grid .top-decks .ranking-row {
    grid-template-columns:
      22px minmax(118px,1fr) 47px 74px 54px 65px 58px 11px !important;
    column-gap: 5px !important;
    padding-inline: 6px !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row > .ranking-meta-line {
    display: contents !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row > .metric-text--wr {
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row .metric-text--matches {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row .metric-text--record {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row .metric-text--share {
    grid-column: 6 !important;
    grid-row: 1 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row .ranking-trend {
    grid-column: 7 !important;
    grid-row: 1 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row > .ranking-arrow {
    grid-column: 8 !important;
    grid-row: 1 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-header {
    font-size: 10.3px !important;
  }

  #home-page .home-bottom-grid .top-decks .deck-name strong {
    font-size: 13px !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text,
  #home-page .home-bottom-grid .top-decks .ranking-trend {
    font-size: 11.4px !important;
  }

  /* Dar espacio vertical real a las 4 tarjetas de torneos. */
  #home-page .home-bottom-grid .competitive-activity .activity-card-body {
    padding: 4px 6px 5px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-card h3 {
    min-height: 34px !important;
    font-size: 12px !important;
    line-height: 1.13 !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-facts {
    margin-top: 4px !important;
    gap: 3px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-fact {
    font-size: 9.9px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-result strong {
    font-size: 10.5px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-result span {
    font-size: 9.5px !important;
  }
}