* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
  touch-action: manipulation;
  -webkit-text-size-adjust: none;
}

/* ══════════════════════════════════════════════
   VARIABLE DE POSICIÓN DEL TABLERO
   Cambia --board-offset-y para subir o bajar
   el tablero completo. Valor negativo = sube.
   Ejemplos: -80px | -120px | -160px | -200px
══════════════════════════════════════════════ */
:root {
  --board-offset-y: -120px;
}

/* ── CONTENEDOR RAÍZ ESCALABLE ── */
#root-scale {
  width: 1080px;
  height: 1920px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  background-image: url('assets/fondo.webp');
  background-size: cover;
  background-position: center;
}

/* ── PANTALLAS ── */
.screen {
  position: absolute;
  top: 0; left: 0;
  width: 1080px;
  height: 1920px;
  display: none;
}

.screen.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── PANTALLA DE ESPERA ── */
#screen-idle {
  cursor: pointer;
}

#screen-idle img.bg-full {
  position: absolute;
  top: 0; left: 0;
  width: 1080px;
  height: 1920px;
  object-fit: cover;
}

#screen-idle .logo-center {
  position: relative;
  z-index: 2;
  width: 480px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.4));
}

/* ── PANTALLA DE JUEGO ── */
#screen-game {
  background-image: url('assets/fondo.webp');
  background-size: cover;
  background-position: center;
}

/* ── TABLERO ──
   Centrado horizontalmente y ajustado verticalmente
   con --board-offset-y para no tapar el slogan. ── */
#board {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + var(--board-offset-y)));
  display: grid;
  grid-template-columns: repeat(3, 300px);
  grid-template-rows: repeat(3, 530px);
  gap: 20px;
}

/* ── OVERLAY reto-activo ── */
.reto-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  cursor: pointer;
}

.reto-overlay.hidden {
  display: none;
}

/* Indicador "toca para continuar" */
.reto-overlay::after {
  content: 'Toca en cualquier parte para continuar';
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 600;
  padding: 22px 56px;
  border-radius: 60px;
  white-space: nowrap;
  animation: pulse-hint 2s ease-in-out infinite;
}

@keyframes pulse-hint {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1);    }
  50%       { opacity: 1;    transform: translateX(-50%) scale(1.03); }
}

/* ── CARTA ── */
/* ── CARTA — flip con scaleX (compatible con transform en ancestros) ── */
.card {
  width: 300px;
  height: 530px;
  position: relative;
  cursor: pointer;
}

/* Las dos caras se superponen */
.card-face {
  position: absolute;
  inset: 0;
  transition: opacity 0s, transform 0.45s ease;
  backface-visibility: hidden;
}

/* Estado inicial: reverso visible, frente oculto */
.card-back  { transform: scaleX(1);  opacity: 1; z-index: 2; }
.card-front { transform: scaleX(0);  opacity: 1; z-index: 1; }

/* Punto medio del flip: reverso se aplana y desaparece */
.card.flipped .card-back  { transform: scaleX(0); z-index: 1; }
/* Frente aparece desde scaleX(0) → scaleX(1) con delay para salir después */
.card.flipped .card-front {
  transform: scaleX(1);
  z-index: 2;
  transition: opacity 0s, transform 0.45s ease 0.45s;
}

.card-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.card:not(.flipped) .card-back:hover {
  filter: brightness(1.08);
}

/* Aparición inicial */
@keyframes card-appear {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.card.appear {
  animation: card-appear 0.38s ease both;
}

/* ── HINT EN CARTA VOLTEADA ──
   Aparece debajo de la carta activa cuando el reto está visible.
   El jugador toca cualquier parte de la pantalla para continuar. ── */
.card.reto-hint::after {
  content: 'Toca la pantalla para continuar';
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  padding: 16px 40px;
  border-radius: 50px;
  white-space: nowrap;
  pointer-events: none;
  animation: pulse-hint 2s ease-in-out infinite;
  z-index: 10;
}

@keyframes pulse-hint {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1);    }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.04); }
}

/* ── PANEL OPERADOR ── */
#operator-panel {
  position: absolute;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.90);
  display: flex;
  align-items: center;
  justify-content: center;
}

#operator-panel.hidden {
  display: none;
}

.op-box {
  background: #fff;
  border-radius: 32px;
  padding: 72px 80px;
  width: 820px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}

.op-box h2 {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 52px;
  font-weight: 700;
  text-align: center;
  color: #111;
}

.op-box label {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 32px;
  color: #555;
  font-weight: 500;
}

.op-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.op-row input[type="number"] {
  width: 180px;
  padding: 20px 16px;
  font-size: 44px;
  font-weight: 700;
  background: #f5f5f5;
  border: 2px solid #ddd;
  border-radius: 14px;
  color: #111;
  text-align: center;
  outline: none;
}

.op-row input[type="number"]:focus { border-color: #e30613; }
.op-row span { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 32px; color: #999; }
.op-divider  { height: 1px; background: #eee; }

.op-btn {
  width: 100%;
  padding: 32px;
  border: none;
  border-radius: 16px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}

.op-btn:active    { transform: scale(0.98); filter: brightness(0.9); }
.op-btn.primary   { background: #e30613; color: #fff; }
.op-btn.secondary { background: #f0f0f0; color: #555; }
.op-btn.danger    { background: #fff0f0; color: #cc0000; border: 1px solid #ffcccc; }

/* ── ZONA 5-TAPS (esquina superior izquierda) ── */
#op-tap-zone {
  position: absolute;
  top: 0; left: 0;
  width: 150px;
  height: 150px;
  z-index: 900;
}

/* ═══════════════════════════════════════════════════════════════
   MINI MEMORAMA — modal overlay
═══════════════════════════════════════════════════════════════ */

#memorama-modal {
  position: absolute;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
}

#memorama-modal.mem-visible { opacity: 1; }
#memorama-modal.mem-salida  { opacity: 0; }

#mem-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
}

/* ── HUD / Timer ── */
#mem-hud {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 960px;
}

#mem-timer-bar {
  flex: 1;
  height: 16px;
  background: rgba(255,255,255,0.25);
  border-radius: 8px;
  overflow: hidden;
}

#mem-timer-fill {
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  transition: width 1s linear, background 0.5s;
}

#mem-timer-text {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  min-width: 68px;
  text-align: right;
}

/* ── Tablero 3×3 — mismas dimensiones que el juego principal ── */
#mem-board {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  grid-template-rows: repeat(3, 530px);
  gap: 20px;
}

.mem-slot {
  width: 300px;
  height: 530px;
}

/* Logo en el centro */
#mem-center-logo {
  width: 300px;
  height: 530px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mem-center-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ── Carta mini — mismas dimensiones, mismo flip scaleX ── */
.mem-card {
  width: 300px;
  height: 530px;
  position: relative;
  cursor: pointer;
}

.mem-face {
  position: absolute;
  inset: 0;
  transition: transform 0.45s ease;
}

.mem-back  { transform: scaleX(1); z-index: 2; }
.mem-front { transform: scaleX(0); z-index: 1; }

.mem-card.mem-flipped .mem-back  { transform: scaleX(0); z-index: 1; }
.mem-card.mem-flipped .mem-front {
  transform: scaleX(1);
  z-index: 2;
  transition: transform 0.45s ease 0.45s;
}

.mem-card.mem-matched {
  pointer-events: none;
  opacity: 0.7;
}

.mem-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.mem-card:not(.mem-flipped) .mem-back:hover {
  filter: brightness(1.08);
}

@keyframes mem-appear {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.mem-card {
  animation: mem-appear 0.38s ease both;
}

/* ── Pantalla de resultado (ganó / perdió) ── */
#mem-resultado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.80);
  animation: mem-appear 0.4s ease both;
  z-index: 20;
}

#mem-resultado.hidden { display: none; }

#mem-resultado-img {
  width: 960px;
  height: auto;
  max-height: 1800px;
  object-fit: contain;
  pointer-events: none;
}