/* HUB desplazable y legible (último en cargar: pisa las capas anteriores del menú).
   Se desliza hacia abajo; cada ítem es una tarjeta grande con título y descripción legibles. Nada menor a 14 px. */
#mainmenu-screen.hub-screen{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:28px; scroll-snap-type:none; }
#mainmenu-screen .hub-top{ flex:none; position:sticky; top:0; z-index:5; padding:4px 0 6px; background:linear-gradient(180deg,#120a07 70%,rgba(18,10,7,0)); }
#mainmenu-screen .hub-main{ display:block; flex:none; min-height:0; width:100%; max-width:1000px; }
#mainmenu-screen .hub-modes{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:10px; align-items:stretch; margin-bottom:6px; }
#mainmenu-screen .hub-play{ min-height:150px; }
#mainmenu-screen .hub-endless-row{ display:flex; flex-direction:column; gap:8px; }
#mainmenu-screen .hub-endless, #mainmenu-screen .hub-endless-rank{ min-height:64px; }
.hub-sections{ display:block; padding:2px 0 8px; }
.hub-section-title{ margin:14px 2px 8px; font-family:var(--ui-font-brand, var(--ui-font)); font-size:16px; letter-spacing:.08em; color:var(--ui-gold,#ffd479); text-shadow:2px 2px 0 #000; display:flex; align-items:center; gap:10px; }
.hub-section-title::after{ content:""; flex:1; height:3px; background:linear-gradient(90deg,var(--ui-line-hi,#c8a45a),transparent); }
.hub-row{ display:grid; gap:10px; }
.hub-row-modes{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.hub-row-explore{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
#mainmenu-screen .hub-tile{ min-height:84px; padding:10px 14px; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; text-align:left; overflow:hidden; }
#mainmenu-screen .hub-tile-ico{ flex:none; width:48px; height:48px; margin:0; font-size:1.6rem; }
#mainmenu-screen .hub-tile-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
#mainmenu-screen .hub-tile-title{ font-size:20px; line-height:1.15; white-space:normal; overflow:visible; letter-spacing:.02em; }
#mainmenu-screen .hub-tile-sub{ display:block; font-size:15px; line-height:1.25; color:var(--ui-ink,#e8dcc6); opacity:.9; }
#mainmenu-screen .hub-tile:not(.hub-tile-wide){ flex-wrap:wrap; }
#mainmenu-screen .hub-tile:not(.hub-tile-wide) .hub-tile-title, #mainmenu-screen .hub-tile:not(.hub-tile-wide) .hub-tile-sub{ flex:1 1 calc(100% - 64px); }
#mainmenu-screen .hub-tile-wide{ min-height:104px; border-width:3px; border-color:var(--ui-accent,#ff9a3c); background:linear-gradient(160deg,#2a1a30,#120a18); }
#mainmenu-screen .hub-tile-wide .hub-tile-title{ font-size:22px; color:#fff1d6; }
#mainmenu-screen .hub-tile-wide .hub-tile-ico{ width:60px; height:60px; font-size:2rem; }
#mainmenu-screen .hub-tile.hidden{ display:none; }
#mainmenu-screen .hub-tile-badge, #mainmenu-screen .hub-tile-offer{ font-size:13px; padding:1px 6px; }
#mainmenu-screen .hub-brand{ font-size:18px; }
#mainmenu-screen .hub-profile-name{ font-size:16px; } #mainmenu-screen .hub-profile-lvl{ font-size:14px; } #mainmenu-screen .hub-gold{ font-size:16px; }
#mainmenu-screen .hub-play-kicker{ font-size:15px; } #mainmenu-screen .hub-play-champ{ font-size:15px; } #mainmenu-screen .hub-play-arena{ font-size:18px; }
@media (max-height:520px){
  #mainmenu-screen .hub-modes{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  #mainmenu-screen .hub-play{ min-height:130px; }
  #mainmenu-screen .hub-play-title{ font-size:1.9rem; }
  .hub-row-modes{ grid-template-columns:1fr 1fr; }
  .hub-row-explore{ grid-template-columns:1fr 1fr 1fr; }
  #mainmenu-screen .hub-tile{ min-height:72px; }
  #mainmenu-screen .hub-tile-wide{ min-height:92px; }
  #mainmenu-screen .hub-tile-ico{ width:44px; height:44px; }
  #mainmenu-screen .hub-tile-title{ font-size:18px; }
  #mainmenu-screen .hub-tile-sub{ font-size:14px; }
}
@media (max-width:600px){ .hub-row-modes, .hub-row-explore{ grid-template-columns:1fr; } #mainmenu-screen .hub-modes{ grid-template-columns:1fr; } }
#mainmenu-screen .hub-sections #mainmenu-quests-btn{ position:relative; top:auto; right:auto; margin:0; z-index:auto; min-height:84px; }
#mainmenu-screen .hub-top{ background:#120a07; box-shadow:0 6px 8px -4px rgba(0,0,0,.7); }
/* piso de legibilidad: nada menor a 14 px en el hub */
#mainmenu-screen #alpha-onboarding, #mainmenu-screen #alpha-onboarding *{ font-size:14px; line-height:1.3; }
#mainmenu-screen #alpha-onboarding button{ min-height:44px; padding:8px 12px; }
#mainmenu-screen .hub-endless-lock, #mainmenu-screen #hub-endless-lock, #mainmenu-screen .ui-tag{ font-size:14px; }
#mainmenu-screen .hub-endless-sub{ font-size:14px; } #mainmenu-screen .hub-endless-rank-txt{ font-size:15px; }

/* ---------- UNA SOLA PANTALLA en celular acostado (844x390, 667x375) ----------
   JUGAR, los modos competitivos y Códice / Guardianes / Tienda / Multijugador se ven juntos, sin deslizar.
   La grilla reparte el alto que queda debajo de la cabecera (fr), así que se adapta a cada alto; si en un
   aparato rarísimo no entra, el hub sigue deslizándose (min-height) y la cabecera queda fija.
     fila 1-2: JUGAR (2 columnas)  |  Guerra de Cristales / Coliseo
     fila 3:   Códice · Guardianes · Tienda · Multijugador (· Desafíos)
     fila 4:   Horda Infinita · Ranking · Entrenamiento */
@media (max-height:520px) and (min-width:560px){
  #mainmenu-screen.hub-screen{ gap:0; padding-top:0; padding-bottom:8px; }
  #mainmenu-screen .hub-top{ flex:none; position:sticky; top:0; z-index:5; margin:0 0 6px; padding:4px 0 6px; background:#120a07; box-shadow:0 5px 6px -3px rgba(0,0,0,.8); }
  #mainmenu-screen .hub-profile{ min-height:44px; }
  #mainmenu-screen .hub-main{ flex:1 1 auto; display:grid; min-height:296px; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:1.45fr 1.45fr 1fr .9fr; gap:8px; }
  #mainmenu-screen .hub-modes, #mainmenu-screen .hub-sections, #mainmenu-screen .hub-row-modes, #mainmenu-screen .hub-endless-row{ display:contents; }
  #mainmenu-screen .hub-section-title{ display:none; }
  #mainmenu-screen .hub-play{ grid-column:1 / 3; grid-row:1 / 3; min-height:0; margin:0; }
  #mainmenu-screen #hub-crystal-btn{ grid-column:3 / 5; grid-row:1; }
  #mainmenu-screen #hub-coliseum-btn{ grid-column:3 / 5; grid-row:2; }
  #mainmenu-screen .hub-row-explore{ display:grid; grid-column:1 / -1; grid-row:3; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; }
  #mainmenu-screen #hub-endless-btn{ grid-column:1 / 3; grid-row:4; min-height:0; }
  #mainmenu-screen #hub-endless-rank-btn{ grid-column:3; grid-row:4; min-height:0; }
  #mainmenu-screen #alpha-onboarding{ grid-column:4; grid-row:4; display:flex; align-items:stretch; padding:0; border:0; background:none; min-height:0; }
  #mainmenu-screen #alpha-onboarding details{ display:none; }
  #mainmenu-screen #alpha-onboarding [data-train]{ flex:1; min-height:0; font-size:14px; line-height:1.15; padding:2px 6px; text-wrap:balance; } /* 2 renglones parejos ("ARENA DE / ENTRENAMIENTO · 3 min"), no "…· 3" + "min" huérfano */
  #mainmenu-screen .hub-tile, #mainmenu-screen .hub-tile-wide, #mainmenu-screen .hub-sections #mainmenu-quests-btn{ min-height:0; }
  #mainmenu-screen .hub-tile-wide{ border-width:3px; padding:6px 12px; }
  #mainmenu-screen .hub-tile-wide .hub-tile-ico{ width:48px; height:48px; font-size:1.6rem; }
  #mainmenu-screen .hub-tile-wide .hub-tile-title{ font-size:20px; }
  #mainmenu-screen .hub-row-explore .hub-tile{ padding:4px 8px; gap:8px; flex-wrap:nowrap; }
  #mainmenu-screen .hub-row-explore .hub-tile-ico{ width:30px; height:30px; font-size:1.1rem; }
  #mainmenu-screen .hub-row-explore .hub-tile-title{ flex:1 1 auto; min-width:0; font-size:16px; white-space:normal; letter-spacing:0; }
  #mainmenu-screen .hub-row-explore .hub-tile-sub{ display:none; }
  #mainmenu-screen .hub-row-explore .hub-tile-badge, #mainmenu-screen .hub-row-explore .hub-tile-offer{ top:2px; right:2px; bottom:auto; left:auto; width:auto; height:auto; min-width:0; min-height:0; font-size:14px; line-height:1.15; padding:0 4px; }
  #mainmenu-screen .hub-row-explore #hub-badge-offer{ top:auto; bottom:2px; }
  @media (max-width:720px){
    #mainmenu-screen .hub-row-explore .hub-tile{ justify-content:center; padding:2px 3px; }
    #mainmenu-screen .hub-row-explore .hub-tile-ico{ display:none; }
    #mainmenu-screen .hub-row-explore .hub-tile-title{ flex:0 1 auto; font-size:14px; text-align:center; }
  }
  #mainmenu-screen .hub-endless{ padding:2px 12px; }
  #mainmenu-screen .hub-endless-rank{ padding:2px 6px; }
  #mainmenu-screen .hub-play-anim{ width:min(34vh,130px); height:min(34vh,130px); }
  /* los avisos bajan debajo de la cabecera: no tapan ⚙, ⏏ ni el logo */
  body:has(#mainmenu-screen:not(.hidden)) #toast-stack{ top:calc(64px + env(safe-area-inset-top,0px)); }
}

/* Modos de postgame bloqueados (js/ui/hub.js: renderPostgameTiles): se ven apagados pero la condición se lee entera */
#mainmenu-screen .hub-tile.locked{ filter:grayscale(.55) brightness(.9); border-style:dashed; }
#mainmenu-screen .hub-tile.locked .hub-tile-sub{ color:var(--hud-gold,#ffcf5c); white-space:normal; font-size:14px; line-height:1.2; }