.top-decks{min-width:0}
.top-decks>.container{height:100%}
.ranking-table{height:calc(100% - 37px);display:grid;grid-template-rows:25px repeat(5,minmax(0,1fr));border-top:1px solid rgba(58,126,173,.25)}
.ranking-header,.ranking-row{display:grid;grid-template-columns:36px minmax(150px,1.65fr) .72fr .56fr .65fr 24px;gap:8px;align-items:center;padding-inline:8px}
.ranking-header{color:#839aab;font-size:7.8px;font-weight:850}
.ranking-row{min-height:0;border-top:1px solid rgba(58,126,173,.18);color:#cbd8e2;font-size:10px;background:linear-gradient(90deg,rgba(40,141,200,.045),transparent 58%)}
.ranking-row:nth-child(2){background:linear-gradient(90deg,rgba(40,200,245,.10),transparent 70%)}
.ranking-row:hover{background:rgba(44,156,219,.10)}
.rank-number{color:#38c7ff;font-size:12px;font-weight:950}
.deck-name{min-width:0;display:flex;align-items:center;gap:8px}
.deck-emblem{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;color:#3cc8ff;background:rgba(60,200,255,.08);border:1px solid rgba(60,200,255,.34);font-size:10px;box-shadow:inset 0 0 12px rgba(60,200,255,.07)}
.deck-name strong{overflow:hidden;color:#f8fbfd;font-size:11.3px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.metric-pill{display:inline-flex;width:max-content;padding:3px 7px;border-radius:5px;font-size:8.6px;font-weight:900}
.metric-pill--perf{color:#cbfff1;background:rgba(38,222,171,.10);border:1px solid rgba(38,222,171,.25)}
.metric-text{color:#d8e5ed;font-size:9.2px;font-weight:850}.metric-text--share{color:#afd3e5}.ranking-arrow{color:#4dc9ff;font-size:18px;text-align:center}

@media(max-width:1100px){.top-decks>.container{height:auto;min-height:255px}.ranking-table{height:auto;grid-template-rows:24px repeat(5,44px)}}
@media(max-width:600px){.ranking-header,.ranking-row{grid-template-columns:25px minmax(108px,1.45fr) .72fr .56fr .65fr 18px;gap:3px;padding-inline:4px}.deck-name{gap:4px}.deck-emblem{width:21px;height:21px}.metric-pill{padding-inline:4px}.ranking-arrow{font-size:14px}}

/* HOME ONE SCREEN — desktop */
@media (min-width:1101px){
  .top-decks,
  .top-decks>.container{height:100%;min-height:0;overflow:hidden}

  .ranking-table{
    height:calc(100% - 27px);
    min-height:0;
    grid-template-rows:19px repeat(5,minmax(0,1fr));
  }

  .ranking-header,
  .ranking-row{
    grid-template-columns:29px minmax(118px,1.6fr) .70fr .54fr .62fr 18px;
    gap:5px;
    padding-inline:5px;
  }

  .ranking-header{font-size:6.7px}
  .ranking-row{font-size:8.6px}
  .rank-number{font-size:10px}
  .deck-name{gap:5px}
  .deck-emblem{width:22px;height:22px;border-radius:5px;font-size:8px}
  .deck-name strong{font-size:9.4px}
  .metric-pill{padding:2px 5px;font-size:7.4px}
  .metric-text{font-size:7.8px}
  .ranking-arrow{font-size:14px}
}


/* ==========================================================
   TOP MAZOS — 50/50 + MÁS DATOS + LETRA REALMENTE LEGIBLE
   ========================================================== */

@media (min-width:1101px){

  /* Las dos mitades inferiores coinciden exactamente */
  #home-page .home-bottom-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
    align-items:stretch !important;
  }

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

  /* Cabecera + cinco filas: sin huecos exagerados */
  .top-decks .ranking-table{
    height:calc(100% - 27px) !important;
    display:grid !important;
    grid-template-rows:22px repeat(5,minmax(0,1fr)) !important;
  }

  /* Más columnas, pero compactas horizontalmente */
  .top-decks .ranking-header,
  .top-decks .ranking-row{
    grid-template-columns:
      26px
      minmax(142px,1.45fr)
      .78fr
      .54fr
      .62fr
      .66fr
      18px !important;

    gap:3px !important;
    padding-inline:5px !important;
  }

  /* Ya no usar la micro-tipografía anterior */
  .top-decks .ranking-header{
    font-size:9px !important;
    font-weight:850 !important;
    line-height:1 !important;
    color:#92a8b9 !important;
  }

  .top-decks .ranking-row{
    font-size:10.7px !important;
    line-height:1.05 !important;
    padding-block:1px !important;
  }

  .top-decks .rank-number{
    font-size:12px !important;
    font-weight:950 !important;
  }

  .top-decks .deck-name{
    gap:6px !important;
  }

  .top-decks .deck-name strong{
    font-size:11.6px !important;
    font-weight:900 !important;
    line-height:1.05 !important;
  }

  /* Símbolo de arquetipo más visible */
  .top-decks .deck-emblem{
    width:27px !important;
    height:27px !important;
    flex:0 0 27px !important;
    border-radius:6px !important;
  }

  .top-decks .deck-emblem .top-deck-identity{
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px !important;
  }

  .top-decks .deck-emblem .top-deck-identity img{
    width:13px !important;
    height:18px !important;
    object-fit:contain !important;
    filter:brightness(1.15) contrast(1.15) saturate(1.08)
           drop-shadow(0 1px 1px rgba(0,0,0,.7));
  }

  .top-decks .deck-emblem .top-deck-identity img:only-child{
    width:19px !important;
    height:19px !important;
  }

  /* Métricas más grandes y con menos aire entre columnas */
  .top-decks .metric-pill{
    padding:3px 6px !important;
    font-size:9.4px !important;
    line-height:1 !important;
  }

  .top-decks .metric-text{
    font-size:9.8px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  .top-decks .ranking-trend{
    white-space:nowrap !important;
    font-weight:900 !important;
  }

  .top-decks .ranking-trend.positive{
    color:#17e99a !important;
  }

  .top-decks .ranking-trend.negative{
    color:#ff4d5e !important;
  }

  .top-decks .ranking-arrow{
    font-size:17px !important;
  }
}

/* A 1366x768 mantener el aumento: sólo una reducción mínima */
@media (min-width:1101px) and (max-height:700px){
  .top-decks .ranking-header{font-size:8.7px !important;}
  .top-decks .ranking-row{font-size:10.3px !important;}
  .top-decks .deck-name strong{font-size:11.2px !important;}
  .top-decks .metric-pill{font-size:9.1px !important;}
  .top-decks .metric-text{font-size:9.5px !important;}
}


/* ==========================================================
   TOP MAZOS V2 — COMPACTO HORIZONTAL + LETRA GRANDE DE VERDAD
   ========================================================== */

@media (min-width:1101px){

  /* Mantener las dos mitades exactamente iguales */
  #home-page .home-bottom-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }

  /* Cinco filas sin agrandar la sección exterior */
  #home-page .home-bottom-grid .top-decks .ranking-table{
    height:calc(100% - 28px) !important;
    grid-template-rows:24px repeat(5,minmax(0,1fr)) !important;
  }

  /* Columnas MUCHO más juntas; nada de repartirlas por todo el ancho */
  #home-page .home-bottom-grid .top-decks .ranking-header,
  #home-page .home-bottom-grid .top-decks .ranking-row{
    grid-template-columns:
      24px
      182px
      56px
      72px
      50px
      62px
      66px
      16px !important;

    column-gap:4px !important;
    padding-left:7px !important;
    padding-right:5px !important;
    justify-content:start !important;
  }

  /* Header claramente legible */
  #home-page .home-bottom-grid .top-decks .ranking-header{
    font-size:10.2px !important;
    font-weight:850 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  /* Filas claramente más grandes */
  #home-page .home-bottom-grid .top-decks .ranking-row{
    font-size:11.4px !important;
    line-height:1 !important;
    padding-block:1px !important;
  }

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

  #home-page .home-bottom-grid .top-decks .deck-name{
    gap:6px !important;
  }

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

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

  /* Datos grandes: Partidas / Performance / WR / Meta / Tendencia */
  #home-page .home-bottom-grid .top-decks .metric-pill{
    padding:3px 6px !important;
    font-size:10.6px !important;
    line-height:1 !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text{
    font-size:10.9px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text--matches{
    color:#e5eef4 !important;
    font-weight:850 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-trend{
    font-size:10.7px !important;
    font-weight:900 !important;
  }

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

/* En viewport 1366x768 NO volver a micro-tipografía */
@media (min-width:1101px) and (max-height:700px){
  #home-page .home-bottom-grid .top-decks .ranking-header{
    font-size:9.8px !important;
  }

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

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

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

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


/* ==========================================================
   TOP MAZOS — ORDENAR POR RANK DESDE EL #
   ========================================================== */

.ranking-sort{
  appearance:none;
  border:0;
  margin:0;
  padding:0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:18px;
  height:18px;

  background:transparent;
  color:inherit;

  font:inherit;
  font-weight:inherit;
  line-height:1;

  cursor:pointer;
}

.ranking-sort:hover,
.ranking-sort:focus-visible{
  color:#35c9ff;
  text-shadow:0 0 8px rgba(53,201,255,.45);
}

.ranking-sort.is-active{
  color:#35c9ff;
}


/* ==========================================================
   TOP MAZOS V3 — 8 FILAS / ESTILO HOME FINAL
   # · Mazo · Partidas · G/E/P · Winrate · Popularidad · Tendencia
   ========================================================== */

@media (min-width:1101px){

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

  #home-page .home-bottom-grid .top-decks,
  #home-page .home-bottom-grid .top-decks > .container{
    min-width:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
  }

  /* Header + 8 filas dentro del alto actual, sin micro-tipografía. */
  #home-page .home-bottom-grid .top-decks .ranking-table{
    height:calc(100% - 28px) !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:23px repeat(8,minmax(0,1fr)) !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-header,
  #home-page .home-bottom-grid .top-decks .ranking-row{
    grid-template-columns:
      22px
      minmax(150px,1.55fr)
      50px
      72px
      54px
      68px
      64px
      14px !important;

    column-gap:4px !important;
    padding-left:7px !important;
    padding-right:5px !important;
    justify-content:start !important;
    align-items:center !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-header{
    font-size:9.4px !important;
    font-weight:850 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    color:#92a8b9 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row{
    min-height:0 !important;
    padding-block:0 !important;
    font-size:10.5px !important;
    line-height:1 !important;
  }

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

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

  #home-page .home-bottom-grid .top-decks .deck-name strong{
    font-size:11.3px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

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

  #home-page .home-bottom-grid .top-decks .deck-emblem .top-deck-identity{
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px !important;
  }

  #home-page .home-bottom-grid .top-decks .deck-emblem .top-deck-identity img{
    width:12px !important;
    height:16px !important;
    object-fit:contain !important;
  }

  #home-page .home-bottom-grid .top-decks .deck-emblem .top-deck-identity img:only-child{
    width:17px !important;
    height:17px !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text{
    font-size:10.2px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text--matches{
    color:#eef7fb !important;
    font-weight:900 !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text--record{
    display:flex !important;
    align-items:center !important;
    gap:3px !important;
    color:#e7f1f7 !important;
    font-variant-numeric:tabular-nums;
  }

  #home-page .home-bottom-grid .top-decks .record-sep{
    color:#5f7889 !important;
    font-weight:700 !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text--wr{
    color:#f6fbfd !important;
    font-weight:900 !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text--share{
    color:#b8d7e7 !important;
    font-weight:850 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-trend{
    font-size:10px !important;
    font-weight:900 !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-trend.positive{
    color:#17e99a !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-trend.negative{
    color:#ff4d5e !important;
  }

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

/* Pantallas de poca altura: sólo una reducción mínima para conservar 8 filas. */
@media (min-width:1101px) and (max-height:700px){
  #home-page .home-bottom-grid .top-decks .ranking-header{
    font-size:9px !important;
  }

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

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

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

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

/* Tablet/mobile: mostrar las mismas 8 filas y permitir que la tabla respire. */
@media (max-width:1100px){
  .top-decks > .container{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .top-decks .ranking-table{
    height:auto !important;
    grid-template-rows:24px repeat(8,40px) !important;
  }

  .top-decks .ranking-header,
  .top-decks .ranking-row{
    grid-template-columns:
      24px
      minmax(135px,1.45fr)
      48px
      68px
      54px
      64px
      62px
      16px !important;
    column-gap:4px !important;
  }
}

/* ==========================================================
   TOP MAZOS V5 — 8 FIJOS / SIN PAGINACIÓN / WR COLOR / INFO
   ========================================================== */

.top-decks .wr-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:19px;
  padding:0 6px;
  border-radius:5px;
  font-size:10px;
  font-weight:950;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.top-decks .wr-pill.wr-green{
  color:#d8fff0;
  background:rgba(18,196,116,.26);
  border:1px solid rgba(31,228,142,.62);
  box-shadow:inset 0 0 8px rgba(31,228,142,.08);
}

.top-decks .wr-pill.wr-yellow{
  color:#fff7c6;
  background:rgba(211,171,24,.24);
  border:1px solid rgba(241,202,42,.60);
}

.top-decks .wr-pill.wr-orange{
  color:#ffe0bd;
  background:rgba(226,107,25,.24);
  border:1px solid rgba(244,130,38,.64);
}

.top-decks .wr-pill.wr-red{
  color:#ffd5ca;
  background:rgba(204,65,33,.28);
  border:1px solid rgba(239,84,47,.66);
}

/* Link más legible */
#home-page .top-decks .home-panel-link{
  font-size:10.5px !important;
  font-weight:900 !important;
  letter-spacing:.01em;
}

/* Info / explicación del ranking */
.ranking-info{
  position:relative;
  display:inline-flex;
  align-items:center;
  z-index:20;
}

.ranking-info summary{
  list-style:none;
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border:1px solid rgba(73,198,255,.52);
  border-radius:50%;
  background:rgba(73,198,255,.08);
  color:#62d2ff;
  font-size:10px;
  font-weight:950;
  line-height:1;
  cursor:pointer;
  user-select:none;
}

.ranking-info summary::-webkit-details-marker{display:none}

.ranking-info[open] summary{
  color:#fff;
  border-color:#62d2ff;
  background:rgba(73,198,255,.20);
  box-shadow:0 0 10px rgba(73,198,255,.18);
}

.ranking-info-popover{
  position:absolute;
  z-index:80;
  top:24px;
  left:0;
  width:min(330px,calc(100vw - 36px));
  padding:11px 12px;
  border:1px solid rgba(73,198,255,.38);
  border-radius:8px;
  background:#071522;
  color:#b9cad6;
  box-shadow:0 14px 35px rgba(0,0,0,.58);
  font-size:10px;
  font-weight:650;
  line-height:1.35;
}

.ranking-info-popover strong{
  display:block;
  margin-bottom:6px;
  color:#f5fbff;
  font-size:11px;
}

.ranking-info-popover p{margin:5px 0}

.ranking-info-formula{
  margin:7px 0;
  padding:6px 7px;
  border:1px solid rgba(73,198,255,.22);
  border-radius:6px;
  background:rgba(73,198,255,.06);
  color:#6ed6ff;
  font-weight:850;
  white-space:normal;
}

.ranking-info-note{color:#8fa8b8}

/* El espacio antes usado por paginación vuelve a las 8 filas */
@media (min-width:1101px){
  #home-page .home-bottom-grid .top-decks .ranking-table{
    height:calc(100% - 28px) !important;
    grid-template-rows:22px repeat(8,minmax(0,1fr)) !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row{
    padding-block:2px !important;
  }

  #home-page .home-bottom-grid .top-decks .wr-pill{
    min-width:40px;
    height:18px;
    padding-inline:5px;
    font-size:9.5px;
  }
}

@media (max-width:1100px){
  #home-page .top-decks .home-panel-link{
    font-size:9px !important;
  }

  .ranking-info-popover{
    left:-28px;
  }
}


/* Explicación simplificada + tendencia más visible */
.ranking-info--home .ranking-info-popover{
  width:min(300px,calc(100vw - 36px));
}
#home-page .top-decks .ranking-trend.positive{color:#20e99a !important}
#home-page .top-decks .ranking-trend.negative{color:#ff5867 !important}