:root {
  --ink: #4A4139;
  --card: #FBF6EE;
  --accent: #E8967E;
  --soft: #F3C5B4;
  --shadow-sm: 0 2px 8px rgba(74, 65, 57, 0.08);
  --shadow-md: 0 8px 24px rgba(74, 65, 57, 0.16);
  --shadow-lg: 0 18px 50px rgba(74, 65, 57, 0.3);
  --transition-fast: 0.2s ease-out;
  --transition-normal: 0.5s ease-out;
}

/* ==================== Reset & Foundations ==================== */
* {
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #F4ECE3;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

#game {
  display: block;
  width: 100vw;
  height: 100dvh;
}

/* viñeteo cinematográfico sobre la escena 3D */
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 105% 90% at 50% 42%,
    transparent 52%, rgba(18, 16, 24, 0.14) 76%, rgba(18, 16, 24, 0.42) 100%);
}

/* ==================== HUD ====================
   Regla: el HUD no compite con la escena. Vive en los bordes, en gris, y se
   aparta solo. Lo que guía al jugador es el brillo de los objetos, no el texto. */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 6;
}

/* Etiqueta discreta del episodio, arriba a la izquierda */
#epLabel {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 250, 242, 0.55);
  text-shadow: 0 1px 6px rgba(20, 16, 26, 0.75);
  opacity: 0;
  transition: opacity 0.7s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#epLabel.show { opacity: 1; }
#epLabel b { font-weight: 700; margin-right: 8px; opacity: 0.85; }
#epLabel span { font-weight: 400; opacity: 0.75; }

/* Progreso: puntos, no emojis. Se rellenan al encontrar un recuerdo. */
#dots { display: flex; gap: 7px; align-items: center; }
#dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 250, 242, 0.22);
  box-shadow: 0 1px 4px rgba(20, 16, 26, 0.5);
  transition: background 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#dots i.on {
  background: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(232, 150, 126, 0.75);
}

#reset {
  pointer-events: auto;
  cursor: pointer;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(255, 250, 242, 0.1);
  color: rgba(255, 250, 242, 0.5);
  font-size: 15px; line-height: 1;
  font-family: inherit;
  opacity: 0.5;
  transition: opacity 0.3s, background 0.3s, transform 0.2s;
}
#reset:hover { opacity: 1; background: rgba(255, 250, 242, 0.2); }
#reset:active { transform: scale(0.88); }

/* ==================== Cartel de episodio ====================
   Aparece grande al empezar, se retira solo. Sustituye a la tarjeta modal. */
#titlecard {
  position: fixed;
  left: 0; right: 0; top: 34%;
  text-align: center;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
#titlecard.show { opacity: 1; transform: translateY(0); }
#titlecard b {
  display: block;
  font-size: 11.5px;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(20, 16, 26, 0.8);
}
#titlecard span {
  display: block;
  font-size: 34px;
  letter-spacing: 2px;
  color: rgba(255, 251, 244, 0.96);
  text-shadow: 0 3px 22px rgba(20, 16, 26, 0.85);
}

/* ==================== Subtítulo (recuerdos) ====================
   Abajo, como un subtítulo de cine. NUNCA tapa el centro de la habitación. */
#subtitle {
  position: fixed;
  left: 50%; bottom: calc(7dvh + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  width: min(88vw, 560px);
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 251, 244, 0.94);
  text-shadow: 0 2px 14px rgba(20, 16, 26, 0.95), 0 0 34px rgba(20, 16, 26, 0.8);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
  z-index: 6;
}
#subtitle.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#subtitle b { color: var(--soft); font-weight: 600; }

/* ==================== Pista contextual ====================
   Solo aparece si el jugador lleva rato sin avanzar. */
#hint {
  position: fixed;
  left: 50%; bottom: calc(2.6dvh + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content; max-width: 88vw;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  color: rgba(255, 250, 242, 0.5);
  text-shadow: 0 1px 8px rgba(20, 16, 26, 0.9);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  z-index: 6;
}
#hint.show { opacity: 1; }

/* Cronómetro del contrarreloj: discreto, bajo el HUD */
#level-timer {
  position: fixed !important;
  top: calc(52px + env(safe-area-inset-top, 0px)) !important;
  right: 16px !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: rgba(255, 250, 242, 0.75) !important;
  text-shadow: 0 2px 10px rgba(20, 16, 26, 0.9) !important;
  z-index: 6 !important;
}

/* Herramientas de desarrollo (solo en 2d.html) */
#dev { position: fixed; bottom: 10px; right: 10px; z-index: 20; }
#dev button {
  background: rgba(30, 26, 34, 0.6); color: rgba(255, 250, 242, 0.6);
  border: none; border-radius: 6px; padding: 5px 9px; font-size: 11px;
  cursor: pointer; font-family: inherit;
}
#level-selector {
  position: absolute; bottom: 34px; right: 0;
  background: rgba(24, 20, 28, 0.94); border-radius: 10px; padding: 8px;
  max-height: 60vh; overflow-y: auto; min-width: 190px;
}
#level-list { display: flex; flex-direction: column; gap: 3px; }
#level-list button {
  width: 100%; text-align: left; padding: 6px 8px;
  background: rgba(255, 255, 255, 0.07); color: #EFE7DC;
  border: none; border-radius: 5px; font-size: 11px; cursor: pointer;
  font-family: inherit;
}
#level-list button:hover { background: rgba(255, 255, 255, 0.16); }

/* ==================== Overlay & Cards ==================== */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44, 39, 33, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), backdrop-filter var(--transition-normal);
  z-index: 10;
}

#overlay.show {
  opacity: 1;
  pointer-events: auto;
}

#ocard {
  background: var(--card);
  border-radius: 24px;
  padding: 40px 32px 32px;
  max-width: min(88vw, 420px);
  text-align: center;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px);
  transition: transform var(--transition-normal);
  will-change: transform;
  animation: cardSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#overlay.show #ocard {
  transform: translateY(0);
}

@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#ocard .catface {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 14px;
  display: inline-block;
  animation: catBob 2s ease-in-out infinite;
}

@keyframes catBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

#ocard .kicker {
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 600;
  opacity: 0.9;
}

#ocard h1 {
  margin: 0 0 8px;
  font-size: 48px;
  letter-spacing: 12px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
}

#ocard h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 400;
  color: rgba(74, 65, 57, 0.8);
  letter-spacing: 1px;
}

#ocard p {
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(74, 65, 57, 0.82);
  font-style: italic;
  letter-spacing: 0.3px;
}

#obtn {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), #d97a63);
  color: #FFF;
  border: none;
  border-radius: 999px;
  padding: 13px 36px;
  font-size: 15px;
  font-family: inherit;
  letter-spacing: 1.2px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  text-transform: uppercase;
  will-change: transform, box-shadow;
  position: relative;
  overflow: hidden;
}

#obtn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

#obtn:hover:not(:active) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(232, 150, 126, 0.3);
}

#obtn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(74, 65, 57, 0.2);
}

#obtn:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==================== Responsive ==================== */
@media (max-width: 480px) {
  #hud {
    padding: 10px 12px;
    gap: 6px;
  }

  .pill {
    padding: 6px 12px;
    font-size: 12px;
  }

  #ocard {
    padding: 32px 24px 24px;
    max-width: 92vw;
  }

  #ocard h1 {
    font-size: 32px;
    letter-spacing: 6px;
  }

  #ocard h2 {
    font-size: 18px;
  }

  #memory {
    max-width: 90vw;
    padding: 16px 20px;
    font-size: 14px;
  }

  #hint {
    font-size: 11px;
  }
}

/* ==================== Timer Animation ==================== */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================== Aviso de actualización de la PWA ==================== */
#updateBar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 140%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  background: rgba(38, 34, 29, .92);
  color: #FBF6EE;
  font-family: inherit;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  max-width: min(92vw, 380px);
}
#updateBar.show { transform: translate(-50%, 0); }
#updateBar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#updateBar button {
  flex: none;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  background: #E8967E;
  color: #26221D;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
#updateBar button:active { transform: scale(.96); }