@charset "UTF-8";
/* CSS Documento — SOLO específico del juego de memoria */

/* ================================
   Juego — contenedor
================================ */
.game-slot { display:flex; flex-direction:column; align-items:center; }

.contenedor-juego {
  width:100%; max-width:500px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 5px 20px rgba(0,0,0,.1);
  margin:0 auto 20px auto;
  position:relative; overflow:hidden;
  padding:10px;
}

/* Ocultar SIEMPRE el header interno */
#cabeceraJuego { display:none !important; }

/* ================================
   Área de juego + piecera
================================ */
.area-juego { padding:15px; }
.tablero-contenedor { width:100%; height:auto; }
.tablero {
  display:grid; gap:10px; width:100%;
}
.tablero.nivel-facil   { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); aspect-ratio:1/1; }
.tablero.nivel-medio   { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(5,1fr); aspect-ratio:4/5; }
.tablero.nivel-dificil { grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(6,1fr); aspect-ratio:5/6; }

.piecera {
  background: var(--brand);
  color:#fff;
  padding:15px;
  text-align:center;
}
.temporizador { font-size:20px; font-weight:700; }

/* ================================
   Cartas
================================ */
.carta {
  width:100%; max-width:100%;
  aspect-ratio:1/1;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .5s;
  cursor:pointer;
}
.carta.volteada { transform:rotateY(180deg); }
.carta.emparejada { pointer-events:none; }

.cara {
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:5px;
  backface-visibility:hidden;
}
.cara.trasera { background:#f0f0f0 url('https://www.juegosdememoriagratis.com/memoria/images/dorso.png') center/contain no-repeat; }
.cara.delantera { background-size:cover; background-position:center; transform:rotateY(180deg); }

.carta.emparejada .cara.delantera {
  visibility: visible !important;
  opacity: 0.3 !important; /* 30% alpha */
}
.carta.emparejada .cara.trasera {
  opacity: 0 !important;   /* oculta el dorso */
}

/* ================================
   Pantalla de inicio (carátula)
================================ */
.juego-shell { position: relative; border-radius:10px; overflow:hidden; }

.juego-shell > .pantalla-inicio {
  position: absolute; inset: 0;
  z-index: 9999;
  background: var(--brand);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:clamp(12px,2.5vw,24px);
  padding:clamp(12px,3vw,28px);
}
.pantalla-inicio img {
  max-width:min(80%,380px); height:auto;
  border:4px solid #fff; border-radius:10px;
  box-shadow:2px 5px 10px rgba(0,0,0,.25);
}
.juegoTitulo {
  color:#fff; text-transform:uppercase; font-weight:700;
  font-size:clamp(26px,3.2vw + 8px,36px);
  line-height:1.2; margin:0; text-align:center;
}
.juegoNivel {
  color:#fff; font-weight:700;
  font-size:clamp(18px,2.2vw + 6px,24px);
  line-height:1.25; margin:0; opacity:.95; text-align:center;
}

/* Botón JUGAR */
.boton {
  background:#ff9900; color:#fff; border:none; border-radius:12px;
  font-size:1.6rem; line-height:1.25;
  padding:14px 28px;
  cursor:pointer;
  transition:transform .06s, background-color .2s;
  margin:15px;
  font-family:var(--font-display);
  font-weight:700;
}
.boton:hover { background:#cc7a00; }
.boton:active { transform:translateY(1px) scale(.995); }

.oculto { display:none !important; }

/* ================================
   Mensaje final
================================ */
.mensaje-final {
  position:absolute; z-index:10000;
  inset:10px;
  background:rgba(0,0,0,.8);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; border-radius:10px;
}
.mensaje-final h2 { font-size:clamp(26px,3vw + 8px,36px); margin-bottom:20px; }
.mensaje-final p { font-size:clamp(18px,2vw + 6px,24px); margin-bottom:30px; }

/* ================================
   Responsivo
================================ */
@media (max-width:540px) {
  .contenedor-juego { max-width:95vw; padding:8px; }
  .tablero { gap:6px; }
  .boton { font-size:1.4rem; padding:12px 24px; }
}
@media (max-width:500px) {
  .contenido-informativo { padding:20px 15px; }
  .contenido-informativo h1,
  .contenido-informativo h2 { font-size:1.5em; }
  .contenido-informativo p { font-size:1.35rem; }
}
@media (max-width:420px) {
  .contenedor-juego { max-width:100%; }
  .boton { font-size:1.2rem; padding:10px 20px; }
}
@media (max-width:640px){
  .page{ padding-left:16px; padding-right:16px; }
  .game-slot{ align-items: stretch; }
  .contenedor-juego{
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}


/* Estado cargando en el botón JUGAR */
.boton[disabled] {
  opacity: .6;
  cursor: not-allowed;
  position: relative;
}

.boton[disabled]::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 3px solid rgba(255,255,255,.4);
  border-top: 3px solid #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}