/* Pantalla de inicio. El cielo lo dibuja Phaser; este archivo coloca el menú.
   Los PNG de assets/interfaz son decorativos y sus textos son HTML accesible. */
#menu {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow-y: auto;
  padding: clamp(16px, 3vh, 32px) 20px;
  color: #fff0bd;
  background: linear-gradient(180deg, #102b482b, #102b4800 40%, #102b4829);
}

.inicio-composicion {
  flex: 0 0 auto;
  width: min(760px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.inicio-encabezado { width: 100%; margin-bottom: 14px; }
.inicio-titulo { width: 100%; margin: 0; }
.inicio-titulo:focus { outline: none; }
.inicio-logo {
  display: block;
  width: min(720px, 100%);
  height: clamp(112px, 26vh, 238px);
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px #10263c66);
  animation: inicio-aparecer 650ms ease-out both;
}
.inicio-invitacion {
  display: inline-block;
  max-width: 100%;
  margin: 10px 0 0;
  color: #193b4a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .15px;
  text-shadow: 0 1px 1px #fff7dc80;
  animation: inicio-aparecer 550ms ease-out 100ms both;
}

.inicio-opciones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  width: min(560px, 72vh, 100%);
}
.inicio-boton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 5 / 1;
  min-height: 68px;
  padding: 14px 11%;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: #fff0bb;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 180ms ease, transform 140ms ease;
  animation: inicio-aparecer 550ms ease-out 180ms both;
}
.inicio-boton:nth-child(2) { animation-delay: 280ms; }
.inicio-boton:nth-child(3) { animation-delay: 380ms; }
.inicio-boton:nth-child(4) { animation-delay: 480ms; }

/* Una pasada de luz sobre los bordes y medallones; el centro del texto
   queda fuera de la máscara. Solo aparece al señalar o enfocar un botón. */
.inicio-boton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 42%, #fff4ca70 49%, #fffbe2a3 51%, transparent 58%);
  background-size: 260% 100%;
  background-position: 140% 0;
  mask-image:
    linear-gradient(to right, #000 0% 17%, transparent 23% 77%, #000 83% 100%),
    linear-gradient(to bottom, #000 0% 20%, transparent 27% 73%, #000 80% 100%);
}
.inicio-boton:is(:hover, :focus-visible)::after {
  animation: inicio-reflejo 1200ms ease-out 1;
}
.inicio-marco {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
  display: block;
  width: 100%;
  height: auto;
  /* El PNG conserva su proporción: su placa está entre y≈190 y y≈548.
     Se ocultan los márgenes transparentes, sin aplastar los adornos. */
  transform: translateY(-48%);
  pointer-events: none;
  filter: drop-shadow(0 5px 7px #10263c73);
  transition: filter 220ms ease;
}
.inicio-boton-textos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-shadow: 0 2px 2px #152133, 0 0 8px #182132;
}
.inicio-boton-nombre {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .1px;
  transition: color 180ms ease;
}
.inicio-boton-dias {
  color: #f3e5be;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
.inicio-boton:is(:hover, :focus-visible) .inicio-marco { filter: brightness(1.1) drop-shadow(0 5px 8px #10263c99); }
.inicio-boton:is(:hover, :focus-visible) .inicio-boton-nombre { color: #fff9db; }
.inicio-boton:focus-visible {
  outline: 3px solid #fff0ad;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px #133555ab;
  /* El teclado puede usar los botones desde el primer instante. */
  opacity: 1 !important;
}
.inicio-boton:active { transform: translateY(1px); }
.inicio-pie {
  margin-top: 17px;
  font-family: Georgia, "Times New Roman", serif;
  color: #193b4a;
  font-size: 16px;
  line-height: 1.4;
  text-shadow: 0 1px 1px #fff7dc80;
  animation: inicio-aparecer 550ms ease-out 480ms both;
}
.inicio-creditos {
  max-width: 100%;
  margin-top: 7px;
  color: #244551;
  font-size: 11px;
  line-height: 1.5;
  text-wrap: balance;
  text-shadow: 0 1px 2px #fff7dca6;
}
.inicio-ia { max-width: 600px; margin-top: 4px; }
.inicio-ia a { color: inherit; text-underline-offset: 3px; }
.inicio-ia a:focus-visible { outline: 2px solid #244551; outline-offset: 3px; }

/* El progreso es una invitación tranquila, sin puntuaciones ni rachas. */
.inicio-continuar {
  width: min(480px, 100%);
  margin: 0 0 16px;
  padding: 12px 20px 13px;
  border: 1px solid #d9c78a99;
  border-radius: 15px;
  background: linear-gradient(150deg, #fff7deed, #e9ddbedf);
  color: #263e44;
  box-shadow: 0 5px 22px #1837481c, inset 0 1px #fff9e7d9;
  backdrop-filter: blur(10px);
}
.inicio-guardado {
  margin: 0 0 5px;
  color: #65542f;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.inicio-resumen { margin: 0; font-family: Georgia, serif; font-size: 18px; line-height: 1.3; }
.inicio-detalle { margin: 5px 0 0; font-size: 12px; line-height: 1.45; }
.inicio-acciones { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 10px; flex-wrap: wrap; }
.inicio-reanudar {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid #987337;
  border-radius: 9px;
  background: linear-gradient(#f3e4b2, #dec68c);
  color: #352e1d;
  box-shadow: 0 2px 5px #57471c19;
  font-size: 14px;
  font-weight: 600;
}
.inicio-reanudar:hover { background: #f6e9c2; }
.inicio-reiniciar {
  min-height: 40px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: #4d503d;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.inicio-reanudar:focus-visible, .inicio-reiniciar:focus-visible { outline: 2px solid #3e5661; outline-offset: 4px; }
.inicio-hoy { color: #fff5c7; font-weight: 750; letter-spacing: 1px; }
#menu.con-sesion .inicio-logo { height: clamp(92px, 15vh, 145px); }
#menu.con-sesion .inicio-opciones { width: min(480px, 61vh, 100%); gap: 7px; }
#menu.con-sesion .inicio-boton { min-height: 65px; }
#menu.con-sesion .inicio-pie { margin-top: 12px; }

@media (max-width: 560px) {
  #menu.con-sesion { padding-top: 62px; }
  #menu.con-sesion .inicio-opciones { width: 100%; }
  #menu.con-sesion .inicio-logo { height: 105px; }
  .inicio-continuar { padding: 12px 14px; }
  .inicio-resumen { font-size: 17px; }
  .inicio-acciones { gap: 7px 13px; }
}
@media (max-height: 650px) and (min-width: 561px) {
  #menu.con-sesion .inicio-logo { height: 82px; }
  #menu.con-sesion .inicio-continuar { margin-bottom: 10px; padding-block: 9px; }
  #menu.con-sesion .inicio-opciones { width: min(430px, 65vh, 100%); gap: 5px; }
}

/* Solo cambia la opacidad: el menú no se desplaza ni cambia de tamaño. */
@keyframes inicio-aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes inicio-reflejo {
  0% { opacity: 0; background-position: 140% 0; }
  20% { opacity: .5; }
  80% { opacity: .35; }
  100% { opacity: 0; background-position: -40% 0; }
}

@media (max-width: 560px) {
  #menu { padding: 25px 13px; }
  .inicio-logo { width: 100%; height: clamp(115px, 21vh, 165px); }
  .inicio-encabezado { margin-bottom: 16px; }
  .inicio-invitacion { font-size: 14px; letter-spacing: 0; margin-top: 8px; }
  .inicio-opciones { width: 100%; gap: 11px; }
  .inicio-boton { min-height: 73px; padding: 12px 9%; }
  .inicio-boton-nombre { font-size: clamp(17px, 4.8vw, 19px); }
  .inicio-boton-dias { font-size: 9px; letter-spacing: 1px; }
  .inicio-boton-textos { gap: 4px; }
  .inicio-pie { font-size: 15px; margin-top: 20px; }
}

/* Mantiene todo el menú visible también en pantallas de portátil bajas. */
@media (min-height: 651px) and (max-height: 820px) and (min-width: 561px) {
  .inicio-logo { height: 22vh; }
  .inicio-opciones { width: min(560px, 68vh, 100%); }
}

@media (max-height: 650px) and (min-width: 561px) {
  #menu { padding: 12px 20px; }
  .inicio-logo { height: 105px; }
  .inicio-encabezado { margin-bottom: 9px; }
  .inicio-invitacion { margin-top: 4px; font-size: 13px; }
  .inicio-opciones { width: min(480px, 72vh, 100%); gap: 5px; }
  .inicio-boton { min-height: 65px; padding: 10px 9%; }
  .inicio-boton-nombre { font-size: 21px; }
  .inicio-boton-dias { font-size: 9px; }
  .inicio-boton-textos { gap: 3px; }
  .inicio-pie { margin-top: 10px; font-size: 14px; }
}

/* Las transiciones responden al ratón/teclado; nunca mueven texto continuamente. */
@media (prefers-reduced-motion: reduce) {
  .inicio-boton, .inicio-marco, .inicio-boton-nombre {
    transition: none;
  }
  .inicio-boton:active { transform: none; }
  .inicio-logo, .inicio-invitacion, .inicio-boton, .inicio-pie {
  /* Conserva el reloj de entrada: al perder el foco no vuelve a empezar. */
  opacity: 1 !important;
  }
  .inicio-boton::after, .inicio-boton:is(:hover, :focus-visible)::after {
    animation: none;
    opacity: 0;
  }
}