:root {
  /* Paleta de Colores */
  --color-primary: #007aff; 
  --color-success: #34c759; 
  --color-warning: #ffcc00; 
  --color-danger: #ff3b30; 
  --color-accent: #FFC82C;     
  --color-buy: #00A350;        
  --color-buy-text: #ffffff;
  
  /* FONDO AZUL PETRÓLEO / OSCURO */
  --bg-main: #34495E; 
  --bg-gradient: linear-gradient(180deg, #34495E 0%, #2C3E50 100%);
  
  --card-bg: #ffffff;
  --text-main: #1c1c1e; 
  --text-muted: #6c6c70; 

  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.1);
  --radius-large: 24px;
  --radius-medium: 16px;
  --radius-pill: 999px;
  --badge-red: var(--color-danger);
  --banner-height: 40px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

html, body {
  height: 100%;
}

body {
  background: var(--bg-gradient); 
  background-attachment: fixed; 
  color: var(--text-main);
  
  /* CONFIGURACIÓN DE CANVAS */
  height: 100vh;       /* Altura total de la ventana */
  width: 100vw;        /* Ancho total de la ventana */
  overflow: hidden;    /* BLOQUEA cualquier scroll fuera de la app */
  
  display: flex;
  align-items: center; /* Centra la app verticalmente */
  justify-content: center; /* Centra la app horizontalmente */
}

.app-shell {
  /* MEDIDAS EXACTAS IPHONE 14 PRO MAX */
  width: 100%;
  max-width: 430px; 
  height: 100%;
  max-height: 932px; 
  
  /* Comportamiento de App */
  display: flex;
  flex-direction: column;
  background: transparent; 
  position: relative;
  
  /* Scroll interno (solo si el contenido no cabe) */
  overflow-y: auto; 
  overflow-x: hidden;
  
  /* Estética para visualizar el borde en PC */
  box-shadow: 0 0 50px rgba(0,0,0,0.5); /* Sombra para separarlo del fondo */
}

main {
  flex: 1;
  padding: 50px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.screen {
  display: none;
  flex: 1;
}

.screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* --- HOME SCREEN --- */

.home-title {
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
  letter-spacing: -0.5px;
  
  background: none;
  -webkit-text-fill-color: initial;
  color: #ffffff; 
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.home-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-top: 0; 
}

.deck-select-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.5px;
  background: none;
  -webkit-text-fill-color: initial;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.remove-ads-btn {
  border-radius: var(--radius-pill);
  border: none;
  padding: 8px 14px;
  background: var(--color-accent); 
  color: var(--text-main); 
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 200, 44, 0.4);
}

.deck-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 0;
  margin-bottom: 10px;
}

.deck-button {
  min-height: 140px;
  border-radius: var(--radius-medium);
  border: none;
  padding: 20px;
  display: flex;
  align-items: flex-end; 
  justify-content: space-between;
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  overflow: hidden;
  position: relative;
}

.deck-button:active {
  transform: scale(0.985);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.deck-bg {
  position: absolute;
  inset: 5px;
  border-radius: 12px;
  opacity: 0.75;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.deck-button:hover .deck-bg {
    opacity: 0.6; 
}

/* Rutas de banners */
.deck-bg-tradicional { background-image: url("img/banners/tradicional.jpg"); }
.deck-bg-baby { background-image: url("img/banners/baby.jpg"); }
.deck-bg-navidad { background-image: url("img/banners/navidad.jpg"); }

.deck-button-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5); 
  padding: 6px 10px;
  border-radius: 6px;
}

.deck-button-main span.title {
  font-size: 15px;
  font-weight: 700; 
  color: #ffffff;
  text-shadow: none;
}

.deck-pill {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-warning);
  color: var(--text-main);
  font-weight: 600;
  position: relative;
  z-index: 1;
}

/* Caja de Compra */
.home-buy-box {
  margin-top: 35px; 
  padding: 0px;
  border-radius: 0;
  background: transparent; 
  box-shadow: none;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.home-buy-box p {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
  width: 100%;
}

.home-buy-box button {
  width: auto;
  min-width: 200px;
  align-self: center;
  
  border-radius: var(--radius-pill);
  border: none;
  padding: 6px 24px;
  background: var(--color-success);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(52, 199, 89, 0.4);
}

.home-buy-box button svg {
  width: 20px;  /* Tamaño del icono */
  height: 20px;
  stroke-width: 2.5px; /* Un poco más grueso para que se note bien */
  margin-right: 6px; /* Espacio entre el icono y el texto */
}

/* --- GAME SCREEN (NUEVOS ESTILOS SEGÚN BOCETO) --- */

/* 1. Header del Juego */
.game-header-row {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 10px;
  min-height: 48px;
}

.game-header-row h2 {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.icon-button {
  /* 1. CONTORNO GRIS (Igual que botón sonido) */
  border: 1px solid rgba(255, 255, 255, 0.3); 
  
  background: rgba(255, 255, 255, 0.15);
  
  /* 2. AUMENTO DE TAMAÑO (De 44px a 48px) */
  width: 48px;
  height: 48px;
  font-size: 24px; /* Icono ligeramente más grande */
  
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  backdrop-filter: blur(4px);
  transition: transform 0.1s;
  
  /* Sombra suave para que resalte */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.icon-button:active { 
  transform: scale(0.96); 
}

/* Regla específica para posicionar el botón Home a la derecha */
.game-header-row .icon-button {
  position: absolute; /* Lo saca del flujo normal */
  right: 0;           /* Lo pega a la derecha */
  top: 50%;
  transform: translateY(-50%); /* Lo centra verticalmente exacto */
  margin: 0;          /* Asegura que no tenga márgenes extraños */
}

/* 2. Temporizador Centrado */
.timer-container {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

#intervalSelect {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

#intervalSelect option { color: #000; }

/* 3. Miniaturas */
.history-strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
  min-height: 80px; /* Aumentado para que quepan las nuevas miniaturas */
  padding: 0;
  border: none;
}

.history-thumb {
  /* AUMENTO DE TAMAÑO */
  width: 65px;  /* Antes 55px */
  height: 85px; /* Antes 80px */
  
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.2);
  overflow: hidden;
  position: relative;
}

.history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: var(--badge-red);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 4px;
}

/* 4. Área Central (Carta + Sonido) */
.card-area-container {
  position: relative;
  flex: 1; 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.card-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-frame {
  background: #ffffff; /* Marco Blanco */
  border-radius: 24px; /* El marco SÍ lleva redondeo */
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  
  /* 1. REDUCCIÓN DE TAMAÑO */
  width: 85%;       /* Reducido del 90% */
  max-width: 300px; /* Reducido de 340px a 300px */
  
  aspect-ratio: 2 / 3;
  
  /* 4. MARGEN BLANCO PROPORCIONAL */
  padding: 16px; /* Espacio igual en todos los lados entre el borde blanco y la imagen */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Limpieza del contenedor interno */
.card-inner {
  width: 100%;
  height: 100%;
  
  /* 3. ELIMINAR FONDO GRIS Y REDONDEO */
  background: transparent; 
  border-radius: 0; 
  
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Ajuste de la imagen */
.card-inner img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* Llena el espacio disponible */
  
  /* 2. ELIMINAR REDONDEO DE LA IMAGEN */
  border-radius: 15px; 
  
  display: block;
}

.card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  color: #888;
  font-weight: 700;
}

/* Botón de Sonido Flotante */
.sound-floating-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.1s;
}
.sound-floating-btn:active { transform: scale(0.96); }

/* 5. Controles Inferiores */
.controls-bottom {
  /* ALINEACIÓN: Usamos el mismo ancho máximo que la carta (300px) */
  /* para que los botones laterales se alineen con los bordes de la carta */
  width: 100%;
  max-width: 300px; /* Igual que .card-frame */
  margin-left: auto; /* Centrar el bloque de controles */
  margin-right: auto;
  
  display: flex;
  justify-content: space-between; /* Distribuye: Izq - Centro - Der */
  align-items: center; /* Alineados al centro verticalmente */
  
  margin-top: 35px; /* Espacio extra para separarlos de la carta */
  padding-bottom: 10px;
}

.control-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* Aseguramos que los contenedores no sean demasiado anchos */
  width: 60px; 
}

.circle-btn {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  transition: transform 0.1s;
}

.circle-btn:active {
  transform: scale(0.95);
}

/* Botones Pequeños (Barajar / Siguiente) */
.circle-btn.small {
  width: 50px;
  height: 50px;
  font-size: 26px;
  background: #ffffff;
  color: var(--color-primary);
  
  /* Borde Gris Suave (Visible sobre fondo blanco) */
  border: 1px solid rgba(0, 0, 0, 0.15); 
}

/* Botón Grande (Play) */
.circle-btn.large {
  width: 75px;
  height: 75px;
  font-size: 40px;
  background: var(--color-success);
  color: #ffffff;
  margin-bottom: 5px;
  
  /* Borde Blanco Semitransparente (Igual que Home/Sonido) */
  border: 1px solid rgba(255, 255, 255, 0.3); 
}

.label {
  font-size: 12px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap; /* Evita que el texto se rompa */
}

.status-text {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  text-align: center;
  margin-top: 4px;
  min-height: 18px;
}

/* Anuncios */
.ad-banner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--banner-height);
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  z-index: 20;
}

.ad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ad-overlay-inner {
  width: 90%;
  max-width: 360px;
  background: #1c1c1e;
  border-radius: var(--radius-medium);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}

.ad-overlay-header {
  padding: 10px 15px;
  background: #2c2c2e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.ad-overlay-close {
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
}

.ad-overlay-body {
  padding: 40px 20px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}

/* Protección Imágenes */
.protected-img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.img-protect {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  pointer-events: all;
}

/* ========================================= */
/* OPTIMIZACIÓN PARA CELULARES (Responsive)  */
/* ========================================= */

@media (max-width: 400px) {
  
  /* 1. Ajuste de Textos Generales */
  * {
    font-size: 100%; /* Regresamos al tamaño normal, 105% es mucho para cel */
  }

  main {
    padding: 12px; /* Menos margen a los lados para ganar espacio */
    gap: 10px;     /* Menos espacio entre elementos verticales */
  }

  /* 2. Ajuste Pantalla INICIO */
  .home-title {
    font-size: 28px; /* Título más pequeño */
  }
  
  .deck-button {
    min-height: 120px; /* Banners un poco menos altos */
    padding: 15px;
  }
  
  .deck-button-main span.title {
    font-size: 18px; /* Texto de banners más chico para que no se corte */
  }

  /* 3. Ajuste Pantalla JUEGO */
  
  /* Reducir la Carta */
  .card-frame {
    max-width: 260px; /* Más angosta para dar aire */
    padding: 10px;
  }
  
  /* Reducir Botones de Control (Esto es lo que se ve amontonado) */
  .controls-bottom {
    max-width: 100%; /* Usar todo el ancho disponible */
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 20px; /* Menos separación con la carta */
  }

  .circle-btn.large {
    width: 65px;  /* De 75px a 65px */
    height: 65px;
    font-size: 28px;
  }

  .circle-btn.small {
    width: 45px;  /* De 50px a 45px */
    height: 45px;
    font-size: 20px;
  }
  
  /* Ajustar etiquetas de texto debajo de botones */
  .label {
    font-size: 11px;
  }
  
  /* Botón Flotante de Sonido */
  .sound-floating-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    right: -5px; /* Lo pegamos más al borde */
  }
  
  /* Historial más compacto */
  .history-strip {
    min-height: 60px;
    margin-bottom: 10px;
  }
  
  .history-thumb {
    width: 40px;
    height: 60px;
  }
}

/* Ajuste para iPhones (el área de abajo del gesto de inicio) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app-shell {
    padding-bottom: calc(var(--banner-height) + env(safe-area-inset-bottom) + 10px);
  }
}