/* Amazona Verse · «¿Cómo quieres jugar?» (portada con tarjetas; lógica en src/game/menu_modos.js)
   Tarjetas grandes (≥ 44 px) sobre la portada (#title), en una rejilla que cabe en 320 px de ancho (2 columnas) y se desplaza
   en pantallas bajas (la portada no desborda). Usa los tokens de tokens.css y el botón .btn.tile de ui.css. */
#title:has(#modos) { place-items: stretch center; }
#title:has(#modos) .title-main {
  box-sizing: border-box; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  justify-content: safe center; gap: var(--sp-3);
  padding: max(var(--sp-4), env(safe-area-inset-top, 0px)) max(var(--sp-4), env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 44px) max(var(--sp-4), env(safe-area-inset-left, 0px));
}
@supports not (justify-content: safe center) { #title:has(#modos) .title-main { justify-content: flex-start; } }
#title:has(#modos) .logo svg { width: min(520px, 78vw); }
#title:has(#modos) .title-hero { z-index: 0; width: min(34vh, 26vw); opacity: 0.95; }
#title:has(#modos) .title-foot { z-index: 0; }
/* En el móvil la rejilla se desplaza por encima del pie y su texto asoma entre las tarjetas (BE3): se oculta */
@media (max-width: 600px) { #title:has(#modos) .title-foot { display: none; } }

.modos { margin: 0; width: 100%; max-width: 780px; }
.modos-t { margin: 0 0 var(--sp-3); font: 700 var(--fs-2xl)/1.1 var(--font-display); color: #fff; text-shadow: 0 2px 0 rgba(27, 21, 80, 0.6), 0 6px 18px rgba(27, 21, 80, 0.5); }
.modos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: var(--sp-3); width: 100%; }
.modo {
  position: relative; min-height: 124px; min-width: 0; padding: var(--sp-3) var(--sp-2); gap: var(--sp-1);
  font-size: var(--fs-md); line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere;
  --btn-bg: rgba(16, 36, 28, 0.86); --btn-border: rgba(255, 255, 255, 0.22);
  animation: modo-in var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms);
  transition: transform var(--dur-2) var(--ease-pop), filter var(--dur-2);
}
.modo .modo-img { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); transition: transform var(--dur-2) var(--ease-pop); }
.modo b { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.modo small { font-size: var(--fs-sm); line-height: 1.2; color: var(--c-text-muted); font-weight: 500; }
.modo:hover, .modo:focus-visible { transform: translateY(-4px) scale(1.03); filter: brightness(1.08); }
.modo:hover .modo-img, .modo:focus-visible .modo-img { transform: scale(1.12) rotate(-4deg); }
.modo:active { transform: translateY(2px) scale(0.98); }
.modo.es-ultimo { --btn-border: var(--gold); animation: modo-in var(--dur-3) var(--ease-out) both, ring 2.4s ease-out 1.2s infinite; }
.modo .modo-ultimo {
  position: absolute; top: 4px; left: 4px; right: 4px; z-index: 1; box-sizing: border-box;
  white-space: normal; overflow-wrap: anywhere; text-align: center;
  font: 700 var(--fs-xs)/1.15 var(--font-body); letter-spacing: 0.02em; color: var(--c-primary-ink); background: var(--gold);
  padding: 4px 6px; border-radius: var(--r-pill); box-shadow: 0 2px 0 #b8903a;
}
.modo .modo-ultimo[hidden] { display: none; }
@keyframes modo-in { from { opacity: 0; transform: translateY(16px) scale(0.92); } }
@media (max-width: 400px) {
  .modos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .modo { min-height: 112px; padding: var(--sp-2) var(--sp-1); }
  .modo .modo-img { width: 44px; height: 44px; }
  .modo b { font-size: var(--fs-md); }
  .modos-t { font-size: var(--fs-xl); }
}
@media (max-width: 560px) {
  #title:has(#modos) .title-main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
  /* QA-148: right negativo la sacaba de la portada (240…398 a 375 px, 205…339 a 320 px). Cabe, con aire para el balanceo. */
  #title:has(#modos) .title-hero { right: 12px; bottom: 0; margin: 0; width: min(38vw, calc(100% - 24px)); max-height: 42vh; height: auto; opacity: 0.45; }
  #title:has(#modos) .title-hint { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #title:has(#modos) .logo svg { width: min(320px, 40vw); }
  .modos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modo { min-height: 96px; }
  .modo .modo-img { width: 36px; height: 36px; }
}
/* Capítulos (AV1): botón bajo las tarjetas que abre la pantalla «Capítulos» (#capitulos) */
.title-episodios { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.title-episodios .btn { min-height: 44px; }
/* Pantalla «Capítulos»: los 6 de la temporada con portada (SVG y color del capítulo), estado y Jugar; cabe en 320 px y se desplaza */
dialog.capitulos {
  box-sizing: border-box; width: min(640px, calc(100vw - 2 * var(--sp-3))); max-height: calc(100dvh - 2 * var(--sp-3));
  overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4); margin: auto;
}
dialog.capitulos::backdrop { background: rgba(10, 8, 30, 0.6); }
.capitulos-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.capitulos-head h2 { margin: 0; font: 700 var(--fs-2xl)/1.1 var(--font-display); }
.capitulos-head .btn.icon { min-width: 44px; min-height: 44px; }
.capitulos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.cap-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); border-radius: var(--r-panel, 18px); background: rgba(255, 255, 255, 0.06); border: 2px solid transparent;
}
.cap-item.es-actual { border-color: var(--gold); }
.cap-portada {
  position: relative; width: 72px; height: 72px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, var(--cap-a), var(--cap-b)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.cap-portada svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.cap-portada span { position: absolute; left: 6px; bottom: 2px; font: 700 var(--fs-xl)/1 var(--font-display); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.cap-item[data-estado="nuevo"]:not(.es-actual) .cap-portada { filter: saturate(0.75); }
.cap-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cap-info small { font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: 700; }
.cap-info b { font: 700 var(--fs-lg)/1.15 var(--font-display); overflow-wrap: anywhere; }
.cap-estado { align-self: flex-start; font: 700 var(--fs-xs)/1 var(--font-body); padding: 4px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); }
.cap-item[data-estado="terminado"] .cap-estado { background: var(--gold); color: var(--c-primary-ink); }
.cap-item[data-estado="en curso"] .cap-estado { background: var(--sky, #5ab7e8); color: #0b2238; }
.cap-jugar { min-height: 44px; white-space: nowrap; }
@media (max-width: 480px) {
  dialog.capitulos { padding: var(--sp-3); }
  .cap-item { grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-2); }
  .cap-portada { width: 56px; height: 56px; }
  .cap-jugar { grid-column: 1 / -1; width: 100%; }
}
/* Creador «corto» (primera vez desde el menú): nombre y plumaje; los accesorios se cambian luego en «Mi personaje» */
#creator.creator-corto :is(#p-slots, .creator-side > .lbl:not(#p-name-lbl), .creator-side > .note) { display: none; }
/* Vuelo libre: sin el panel de misiones ni la pista de teclas; el resto del HUD sigue */
html.modo-libre :is(#quest, #keyhint) { display: none !important; }
@media (prefers-reduced-motion: reduce) { .modo, .modo.es-ultimo { animation: none; } }