/* Inicio (home). Raíz de la pantalla: .screen.ui.s-home (spec 8.1). Aquí va también el aspecto de sus
   ventanas (Misiones y Buzón, spec 9.1 y 9.2), que se abren fuera de la pantalla: .modal.mdl > .mdl-*.
   Componentes comunes (botones, tarjetas, pastillas…): base.css, sección 4. */

/* ---- Rejilla: 4 columnas, alto libre hasta 456 y centrada en vertical ---------------------------- */
.s-home .home-body {
  display: grid; grid-template-columns: minmax(0,164fr) minmax(0,296fr) minmax(0,204fr) minmax(0,120fr); grid-template-rows: minmax(0, 1fr);
  gap: 12px; padding: 12px; width: 100%; max-width: 1180px; max-height: 456px; margin: auto;
}
.s-home .hcol { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.s-home .hcol > * { flex: 1 1 0; min-height: 0; }
/* La entrada escalonada no retiene transform al acabar: así el hover y el :active de las tarjetas siguen vivos */
.s-home .stagger > * { animation-fill-mode: backwards; }

/* ---- Tarjetas de la izquierda y de la derecha: título arriba, arte recortado y pie abajo ---------- */
.s-home .tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; padding: 12px; overflow: hidden; }
.s-home .tile .ttl { position: relative; z-index: 2; display: block; font-size: 20px; }
.s-home .tile .foot { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* Ruleta diaria: la rueda asoma por la derecha y gira despacio; el puntero, quieto, la señala */
.s-home .wheel-tile .wbox { position: absolute; z-index: 1; top: 50%; right: calc(-52px * var(--art-k)); width: calc(132px * var(--art-k)); height: calc(132px * var(--art-k)); margin-top: calc(-66px * var(--art-k)); }
.s-home .wheel-tile .wimg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); animation: spin-slow 22s linear infinite; }
.s-home .wheel-tile .pin { position: absolute; left: -8px; top: 50%; width: 17px; height: 15px; margin-top: -7.5px; background: linear-gradient(180deg, #ff8a78, #e2301f 55%, #a8150b); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.s-home .wheel-tile .pill { font-size: 10.5px; padding: 0 8px; }

/* Caja de victoria: el cofre flota; los hitos van en el pie */
.s-home .vbox-tile .vimg { position: absolute; z-index: 1; top: 50%; right: -20px; width: calc(96px * var(--art-k)); height: calc(96px * var(--art-k)); margin-top: calc(-58px * var(--art-k)); filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); animation: bob 2.6s ease-in-out infinite; }
.s-home .vbox-tile .vprog { display: flex; align-items: center; gap: 8px; width: 100%; }
.s-home .vbox-tile .vnum { margin-left: auto; font-size: 16px; color: var(--tx-2); }
.s-home .vbox-tile .vprog[hidden], .s-home .tile .btn[hidden], .s-home .tile .pill[hidden] { display: none; }
/* Llena: aro dorado fijo y un halo que late con la opacidad (no se anima box-shadow) */
.ui .vbox-tile.ready { box-shadow: inset 0 0 0 2px var(--gold-2), inset 0 1px 0 var(--sf-hi), var(--sh-card); }
.ui .vbox-tile.ready::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 60% 45%, rgba(255,200,60,.35), rgba(255,200,60,0) 70%); animation: glow-o 1.4s ease-in-out infinite alternate; }
.s-home .vbox-tile.ready .vimg { animation: bob 1s ease-in-out infinite, wiggle-soft 1s ease-in-out infinite; }

/* ---- 1 contra 1: la mesa bajo una lámpara ---------------------------------------------------------- */
.s-home .big-tile { display: flex; flex-direction: column; align-items: center; padding: 0; }
.s-home .big-tile .lamp {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 58%, rgba(255,236,190,.20), rgba(255,236,190,0) 70%),
    conic-gradient(from 180deg at 50% -6%, rgba(255,240,200,0) 0 160deg, rgba(255,240,200,.09) 170deg 190deg, rgba(255,240,200,0) 200deg);
}
.s-home .big-tile .hd { position: relative; z-index: 2; align-self: stretch; margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
/* 1fr auto 1fr: la sede va centrada salvo que la pastilla no quepa en su mitad; alto fijo (sin salto
   cuando llega la cifra) */
.s-home .big-tile .toprow { align-self: stretch; height: 17px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 0 10px; }
.s-home .big-tile .live { justify-self: start; height: 17px; padding: 0 6px; letter-spacing: .4px; white-space: nowrap; }
.s-home .big-tile .vname { color: var(--gold-1); opacity: .9; white-space: nowrap; }
.s-home .big-tile .vline { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.s-home .big-tile .vline img { width: 14px; height: 14px; margin-left: 2px; }
.s-home .big-tile .vline .ty-num { font-size: 14px; }
.s-home .big-tile .vline .ty-num:not(.c-gold) { color: #fff; }
.s-home .big-tile .vline .sep { margin: 0 4px; font-style: normal; color: var(--tx-4); }
.s-home .big-tile .persp { position: relative; z-index: 1; flex: 1 1 auto; width: 100%; min-height: 90px; margin: 0 0 66px; perspective: 520px; perspective-origin: 50% 0%; }
.s-home .big-tile .timg {
  position: absolute; left: 50%; top: 50%; width: min(78%, calc(330px * var(--art-k))); margin-top: -18%;
  transform: translateX(-50%) rotateX(46deg); transform-origin: 50% 0; filter: drop-shadow(0 18px 14px rgba(0,0,0,.7));
}
.s-home .big-tile .timg[src=""] { visibility: hidden; }
#stage[data-h="l"] .s-home .big-tile .timg { width: 84%; margin-top: -20%; transform: translateX(-50%) rotateX(42deg); }
#stage[data-h="xl"] .s-home .big-tile .timg { width: 86%; margin-top: -23%; transform: translateX(-50%) rotateX(36deg); }
/* JUGAR: centrado con márgenes (su :active y .pulse usan transform) */
.s-home .big-tile .play { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; width: 200px; margin: 0 auto; }

/* ---- Modos ----------------------------------------------------------------------------------------- */
.s-home .mode { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 10px; }
.s-home .mode .mico { position: relative; flex: none; width: calc(56px * var(--art-k)); height: calc(56px * var(--art-k)); }
.s-home .mode .mico .halo { left: -14px; top: -14px; right: -14px; bottom: -14px; }
.s-home .mode .mico img { position: absolute; }
.s-home .mode .m-trophy { left: -2%; top: -4%; width: 104%; height: 104%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.s-home .mode .m-b1 { left: 0; top: 7%; width: 64%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.s-home .mode .m-b2 { left: 32%; top: 30%; width: 64%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.s-home .mode .m-cue { left: -40%; top: 62%; width: 150%; height: 3px; transform: rotate(-38deg) scaleY(1.6); filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.s-home .mode .m-b0 { left: 38%; top: 6%; width: 58%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.s-home .mode .mtx { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.s-home .mode .ty-h3 { font-size: 22px; white-space: nowrap; }
.s-home .mode .ty-body { line-height: 1.25; }

/* ---- Pase de temporada ----------------------------------------------------------------------------- */
.s-home .pass-tile .ttl { font-size: 23px; line-height: .95; text-shadow: 0 0 10px rgba(255,90,230,.8), 0 2px 0 rgba(40,0,60,.6); }
.s-home .pass-tile .cueglow { left: 6px; top: 12px; width: 120px; height: 84px; --gc: rgba(255,90,230,.45); }
.s-home .pass-tile .pscue { position: absolute; z-index: 1; left: -8px; top: calc(40px * var(--art-k)); width: 180px; height: 5px; transform: rotate(-24deg); filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,80,230,.55)); }
.s-home .pass-tile .foot { flex-direction: column; align-items: stretch; gap: 5px; }
.s-home .pass-tile .plv { font-size: 16px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(40,0,60,.6); }
.s-home .pass-tile .plv .of { margin-left: 1px; font-size: 13px; color: #f3c8ff; }
.s-home .pass-tile .pleft { display: flex; align-items: center; gap: 4px; margin-top: 1px; color: #e9c8ff; }
.s-home .pass-tile .pleft svg { flex: none; }
/* Brillo que cruza el pase (transform, un solo nodo) */
.s-home .pass-tile::after { content: ''; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 80%); transform: translateX(-120%); animation: shimmer 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes shimmer { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }

/* ---- Misiones -------------------------------------------------------------------------------------- */
.s-home .miss-tile { display: flex; flex-direction: column; }
.s-home .miss-tile .ttl { font-size: 21px; }
.s-home .miss-tile .msq { margin-top: 10px; }
/* a más alto, los cuadros van al centro del hueco (no pegados al título con la tarjeta vacía debajo) */
#stage[data-h="l"] .s-home .miss-tile .msq, #stage[data-h="xl"] .s-home .miss-tile .msq { margin: auto 0; }
.s-home .miss-tile .when { margin-top: auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.s-home .miss-tile .when svg { flex: none; }

/* ---- Sin conexión: pastilla roja centrada, 8 px por encima de la barra de navegación ---------------- */
.s-home .offline-note { position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(62px + var(--sab-l, 0px)); width: max-content; max-width: 90%; margin: 0 auto; }

/* ---- Ventanas de Misiones (480) y Buzón (440) ------------------------------------------------------ */
.mdl-missions { width: 480px; max-width: 100%; }
.mdl-mail { width: 440px; max-width: 100%; }
.mdl-missions .mlist, .mdl-mail .mlist { display: flex; flex-direction: column; gap: 8px; }
.mdl-mail .mlist.is-empty { overflow: visible; }
.mdl-mail .mlist { max-height: 250px; overflow-y: auto; overflow-x: hidden; margin: -4px -6px; padding: 4px 6px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.mdl-home .mrow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; flex: none; }
.mdl-home .mrow .mtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mdl-home .mrow .mtxt b { font: 800 13px/1.2 var(--f-ui); color: #fff; }
.mdl-home .mrow .bar { height: 6px; }
.mdl-home .mrow .mmeta { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.mdl-home .mrow .mmeta img { width: 12px; height: 12px; }
.mdl-home .mrow .sep { margin: 0 3px; font-style: normal; color: var(--tx-4); }
.mdl-home .mrow .btn, .mdl-home .mrow .pill { flex: none; }
.mdl-home .mfoot { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 12px 0 0; text-align: center; }
.mdl-home .mfoot svg { flex: none; }
.mdl-home .mic { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--tx-3); }
.mdl-home .mic.rw { color: var(--gold-2); }
.mdl-home .mrw { flex: none; display: flex; align-items: center; gap: 4px; }
.mdl-home .mrw img { width: 24px; height: 24px; }
.mdl-home .mrw img.mbox { width: 34px; height: 34px; margin: -6px 0; }
.mdl-home .mrw .ty-num { font-size: 16px; color: #fff; }
.mdl-home .mbig { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--tx-3); }
.mdl-home .empty-st.sm { padding: 18px 10px 8px; }
.mdl-home .empty-st.sm .empty-art .halo { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
/* Más alto (l/xl): el cofre de victoria crece menos y baja, para no tapar el título */
#stage[data-h="l"] .s-home .vbox-tile .vimg, #stage[data-h="xl"] .s-home .vbox-tile .vimg { top: auto; bottom: 26px; right: -24px; width: 104px; height: 104px; margin-top: 0; }