/* Home layout only. Loaded after feature styles so new modes can keep their
   own artwork without changing the space available to labels and controls. */
.card.main-menu{max-width:1200px;padding:16px}
.main-menu .page-content{
 display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
 grid-template-rows:64px 120px minmax(0,1fr) 52px;
 grid-template-areas:"header header" "play squad" "play tools" "footer footer";
 gap:12px;padding:4px;
}
.main-menu .menu-header{min-height:0;padding-bottom:8px;gap:16px}
.main-menu .club-brand{flex:1;min-height:0}
.main-menu .menu-logo{height:56px;max-width:100%;filter:none}
.main-menu .club-wallet{max-width:52%;gap:8px}
.main-menu .club-wallet>span{min-width:0;padding:8px;grid-template-columns:24px minmax(0,1fr)}
.main-menu .club-wallet b{font-size:14px;overflow-wrap:anywhere}
.main-menu .menu-play,.main-menu.has-active-run .menu-play{min-height:0;gap:10px}
.main-menu .modes{grid-template-rows:minmax(80px,2fr) repeat(2,minmax(52px,1fr));gap:10px}
.main-menu .modes>button{padding:10px;gap:8px}
.main-menu .mode b{font-size:18px;line-height:1.15;overflow-wrap:normal}
.main-menu .mode small{font-size:12px;line-height:1.25}
.main-menu .mode-symbol{flex:none;width:32px;height:32px}
.main-menu .mode-symbol .menu-icon{width:24px;height:24px}
.main-menu .mode-hero b{font-size:clamp(24px,2.5vw,34px)}
.main-menu #mContinue{min-height:48px;padding:8px 12px;font-size:17px;line-height:1.15}
.main-menu #mContinue small{font-size:12px;margin-top:3px}
.main-menu .menu-squad{padding:10px;gap:6px;min-height:0}
.main-menu .squad-caption .eyebrow{display:none}
.main-menu .squad-caption b{font-size:18px}
.main-menu .squad-caption small{font-size:11px}
.main-menu .squad-faces .pix{width:40px!important;height:40px!important}
.main-menu .home-player>small{font-size:11px}
.main-menu .menu-tools{min-height:0;gap:8px;justify-content:stretch}
.main-menu .menu-shortcuts{
 grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,minmax(52px,1fr));gap:8px;
}
.main-menu .menu-shortcuts>:is(#mGacha,#mShop,#mMarket,#mQuick,#mSound,#mSaves){grid-column:span 2}
.main-menu .menu-shortcuts>:is(#mTeam,#mBonds,#mGallery){grid-column:span 2}   /* 0.36: con Vínculos, tres filas de tres */
.main-menu .menu-shortcuts .ghost.big{
 min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:8px 6px;gap:5px;text-align:center;font-size:17px;line-height:1.15;
}
.main-menu .menu-shortcuts .ghost.big>span{max-width:100%;min-width:0;overflow-wrap:normal}
.main-menu .menu-shortcuts .menu-icon,.main-menu #mGacha .scout-icon{width:28px;height:28px;flex:none;margin:0}
.main-menu #mMarket>.pxi{height:28px}
.main-menu .menu-shortcuts small{display:none}
.main-menu .menu-shortcuts>:is(#mTeam,#mGallery){background:#294a76;border-color:#87c8dd}
.main-menu .menu-utility{display:flex;flex:none;gap:6px;min-height:44px;justify-content:space-between}
.main-menu .menu-utility>:is(button,a){min-width:0;min-height:44px;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:4px;font-size:12px;line-height:1.2;border-radius:0}
.main-menu #mDiscord{white-space:normal;text-align:center;font-size:12px;min-height:44px;padding:4px}
.main-menu #mAbandon,.main-menu #mGift{font-size:12px;min-height:44px;padding:4px}
.main-menu .local-label{display:none}
.main-menu .menu-footer{gap:10px;padding-top:6px;min-height:0}
.main-menu #mNews{min-height:44px;padding:6px;font-size:13px;border-radius:0}
.main-menu #mSync{min-height:44px;gap:8px;padding:4px;min-width:0}
.main-menu #mSync>span{font-size:13px;line-height:1.15}
.main-menu #mSync small{font-size:11px;margin-top:2px}
.main-menu #ver{min-height:0;font-size:10px;white-space:nowrap;align-self:center;padding:0}
.main-menu :is(button,a):focus-visible{outline:3px solid #8be9f1;outline-offset:1px}

/* A narrow desktop panel needs the same room for words as a phone. */
@media (min-width:800px) and (max-width:1050px){
 .main-menu .page-content{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:56px 102px minmax(0,1fr) 48px;gap:10px}
 .main-menu .menu-logo{height:48px}
 .main-menu .menu-squad{padding:8px}
 .main-menu .squad-faces .pix{width:32px!important;height:32px!important}
 .main-menu .mode b{font-size:16px}
 .main-menu .mode-hero b{font-size:26px}
 .main-menu .mode small{font-size:11px}
 .main-menu .menu-shortcuts .ghost.big{font-size:15px;padding:6px 4px;gap:4px}
}

/* Portrait: three comfortable shortcut rows instead of five tiny tiles across. */
@media (max-width:799px) and (min-height:501px){
 .card.main-menu{max-width:620px;padding:10px}
 .main-menu .page-content{
  grid-template-columns:minmax(0,1fr);grid-template-rows:50px 70px minmax(200px,1fr) 242px 50px;
  grid-template-areas:"header" "squad" "play" "tools" "footer";gap:8px;
 }
 .main-menu .menu-header{gap:8px;padding-bottom:5px}
 .main-menu .menu-logo{height:46px}
 .main-menu .club-wallet{gap:4px}
 .main-menu .club-wallet>span{grid-template-columns:16px minmax(0,1fr);grid-template-rows:auto;padding:5px;gap:4px}
 .main-menu .club-wallet .menu-icon{width:16px;height:16px}
 .main-menu .club-wallet b{font-size:12px}
 .main-menu .club-wallet small{display:none}
 .main-menu .menu-squad{display:flex;flex-direction:row;align-items:center;padding:6px;gap:6px}
 .main-menu .squad-caption b{font-size:15px}
 .main-menu .squad-caption small{font-size:10px}
 .main-menu .squad-faces{flex:0 0 54%;gap:3px}
 .main-menu .squad-faces .pix{width:30px!important;height:30px!important}
 .main-menu .home-player>small{font-size:10px}
 .main-menu .modes{grid-template-rows:minmax(68px,1.8fr) repeat(2,minmax(44px,1fr));gap:6px}
 .main-menu .modes>button{padding:6px;gap:6px}
 .main-menu .mode b{font-size:15px}
 .main-menu .mode small{display:none}
 .main-menu .mode-hero b{font-size:23px}
 .main-menu .modes>button.mode-hero{padding:8px 9px 18px}
 .main-menu .hero-kicker{display:none}
 .main-menu .hero-enter{font-size:16px;right:6px;bottom:16px}
 .main-menu .mode-symbol{width:26px;height:26px}
 .main-menu .mode-symbol .menu-icon{width:20px;height:20px}
 .main-menu #mContinue{min-height:44px;font-size:14px;padding:5px 8px}
 .main-menu #mContinue small{font-size:11px}
 .main-menu .menu-tools,.main-menu .menu-shortcuts{gap:6px}
 .main-menu .menu-shortcuts{grid-template-rows:repeat(3,minmax(52px,1fr))}
 .main-menu .menu-shortcuts .ghost.big{font-size:15px;padding:4px;gap:3px}
 .main-menu .menu-shortcuts .menu-icon,.main-menu #mGacha .scout-icon{width:22px;height:22px}
 .main-menu #mMarket>.pxi{height:22px}
 .main-menu .menu-footer{gap:6px;padding-top:4px}
 .main-menu #mNews{font-size:11px;padding:4px;gap:4px}
 .main-menu #mSync{gap:4px;padding:2px}
 .main-menu #mSync>.menu-icon{width:18px;height:18px}
 .main-menu #mSync>span{font-size:11px}
 .main-menu #mSync small{font-size:10px}
 .main-menu #ver{font-size:9px}
}
@media (max-width:799px) and (min-height:501px) and (max-height:740px){
 .main-menu .page-content{grid-template-rows:46px minmax(176px,1fr) 226px 48px;grid-template-areas:"header" "play" "tools" "footer";gap:6px}
 .main-menu .menu-squad{display:none}
 .main-menu .menu-logo{height:42px}
 .main-menu .mode-hero b,.main-menu.has-active-run .mode-hero b{font-size:20px}
 .main-menu .mode b{font-size:14px}
 .main-menu .menu-shortcuts .ghost.big{font-size:14px}
}

/* Landscape phone: retain 44 px actions and use the width for the two groups. */
@media (max-height:500px) and (min-width:600px){
 .card.main-menu{max-width:1200px;padding:6px 10px}
 .main-menu .page-content{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) 46px;grid-template-areas:"header header" "play tools" "footer footer";gap:6px 12px}
 .main-menu .menu-logo{height:38px}   /* 38 px: lo mínimo para que el logo se lea (F29) */
 .main-menu .menu-squad{display:none}
 .main-menu .menu-header{padding-bottom:3px}
 .main-menu .modes{grid-template-rows:minmax(44px,1fr) repeat(2,minmax(44px,1fr));gap:5px}
 .main-menu .menu-play,.main-menu.has-active-run .menu-play{gap:5px}
 .main-menu .modes>button{padding:5px;min-height:44px;gap:6px}
 .main-menu .modes>button.mode-hero{padding:5px 8px 10px}
 .main-menu .mode b{font-size:15px}
 .main-menu .mode-hero b{font-size:20px}
 .main-menu .mode small,.main-menu .hero-kicker,.main-menu .hero-enter{display:none}
 .main-menu .mode-symbol{width:24px;height:24px}
 .main-menu .mode-symbol .menu-icon{width:20px;height:20px}
 .main-menu #mContinue{min-height:44px;padding:4px 8px;font-size:14px}
 .main-menu #mContinue small{display:none}
 .main-menu .menu-tools,.main-menu .menu-shortcuts{gap:5px}
 .main-menu .menu-shortcuts{grid-template-rows:repeat(3,minmax(44px,1fr))}
 .main-menu .menu-shortcuts .ghost.big{min-height:44px;flex-direction:row;font-size:14px;gap:5px;padding:4px;justify-content:center;text-align:center}
 .main-menu .menu-shortcuts .menu-icon,.main-menu #mGacha .scout-icon{width:20px;height:20px}
 .main-menu #mMarket>.pxi{height:20px}
 .main-menu .menu-footer{padding-top:2px}
 .main-menu #mSync small{display:block}
}

/* Varias partidas a la vez (0.35.8): el «En curso» de cada modo y lo pendiente de cobrar en el Mercado se ven en todos los tamaños,
   aunque se escondan los demás subtítulos (también los que pagination.css deja solo para lectores de pantalla). En un móvil alto
   (más de 740 px) caben además los subtítulos de los modos; en uno bajo y en horizontal, el «En curso» sin el nombre del intento y, en
   Historia y Rogue (su título ya ocupa dos líneas en inglés), sin el partido */
.main-menu .mode small:has(.run-on),.main-menu .menu-shortcuts small.mk-due{display:block;position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.main-menu .run-on{color:#ffd06b}
.main-menu .menu-shortcuts small.mk-due{font-size:12px;color:#ffd06b}
@media (max-width:799px) and (min-height:741px){
 .main-menu .mode small{display:block;font-size:11px;line-height:1.2}
}
@media (max-width:799px) and (max-height:740px),(max-height:500px) and (min-width:600px){
 .main-menu .mode .run-name,.main-menu .mode-hero .run-step{display:none}
 .main-menu .mode small:has(.run-on){font-size:11px;line-height:1.15}
}

/* Online en el menú principal (0.38): la tercera fila de modos pasa a tres casillas (Cadenas, Infinito, Online) sin añadir filas, para que
   Historia y Rogue no pierdan altura. Rejilla de 6 columnas: los demás modos ocupan media fila. En esas tres casillas, más estrechas, solo
   se ve el título (y el «En curso» sin el nombre); en móviles estrechos, sin el icono */
.main-menu .modes{grid-template-columns:repeat(6,minmax(0,1fr))}
.main-menu .modes>:is(#mStory,#mRogue,#mCareer,#mSpecial){grid-column:span 3}   /* con id: pasa por encima de #mCareer{grid-column:auto} de theme.css */
.main-menu .modes>:is(#mChain,#mInf,#mOnline){grid-column:span 2}
.main-menu .modes>:is(#mChain,#mInf,#mOnline) small:not(:has(.run-on)),.main-menu .modes>:is(#mChain,#mInf) .run-name{display:none}
.main-menu .modes>#mOnline{border-color:var(--ui-cyan,#5ad1e6)}
@media (max-width:420px){
 .main-menu .modes>:is(#mChain,#mInf,#mOnline){gap:0;padding-left:4px;padding-right:4px;justify-content:center}
 .main-menu .modes>:is(#mChain,#mInf,#mOnline) .mode-symbol{display:none}
}