/* ==========================================================================
   EL ESPEJO — Estilos principales
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --espejo-primary: #a0c4ff; /* Azul cristalino */
  --espejo-silver: #e0e0e0;
  --espejo-bg: #050510;
  --surface: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.1);
  --text: #f0f0f5;
  --text-dim: rgba(240,240,245,0.6);
  --world-accent: #a0c4ff;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #0a0a0f;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

.hero-setup {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.setup-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.2rem;
}

.setup-input option {
  background-color: #1a1a1f; /* Fondo oscuro sólido para las opciones */
  color: #fff;
}

.setup-input:focus {
  border-color: var(--espejo-primary);
  outline: none;
}

/* ── Fila edad + badge ── */
.age-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Ocultar flechas nativas del input[type=number] */
.age-input { flex: 1; -moz-appearance: textfield; }
.age-input::-webkit-outer-spin-button,
.age-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Badge base */
.age-tier-badge {
  flex-shrink: 0;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 10px; border-radius: 20px;
  white-space: nowrap;
  transition: all 0.3s ease;
  display: none; /* activado por JS */
}

/* Variantes por franja */
.age-tier-badge.tier-infantil {
  display: inline-block;
  background: rgba(160,196,255,0.15);
  border: 1px solid rgba(160,196,255,0.4);
  color: #a0c4ff;
}
.age-tier-badge.tier-juvenil {
  display: inline-block;
  background: rgba(100,200,120,0.15);
  border: 1px solid rgba(100,200,120,0.4);
  color: #7de89a;
}
.age-tier-badge.tier-teen {
  display: inline-block;
  background: rgba(255,165,60,0.15);
  border: 1px solid rgba(255,165,60,0.4);
  color: #ffa53c;
}
.age-tier-badge.tier-adulto {
  display: inline-block;
  background: rgba(160,196,255,0.1);
  border: 1px solid rgba(160,196,255,0.2);
  color: #a0c4ff;
}

/* ==========================================================================
   PANTALLA INTRO CINEMÁTICA
   ========================================================================== */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen.active { display: flex; }

#screen-intro {
  background: #020205; display: flex; flex-direction: column; overflow-y: auto;
}

.intro-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(160,196,255,0.15) 0%, rgba(5,5,15,1) 80%);
  animation: pulse-bg 8s infinite alternate;
}
@keyframes pulse-bg {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 1; }
}

.intro-particles {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: float-particles 60s linear infinite;
  opacity: 0.5;
}
@keyframes float-particles {
  0% { transform: translateY(0); }
  100% { transform: translateY(-500px); }
}

.intro-content {
  position: relative; z-index: 10;
  text-align: center; padding: 2rem 1.5rem;
  margin: auto; width: 100%; max-width: 450px;
  animation: fade-in-up 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.intro-logo { font-size: 3rem; margin-bottom: 0.5rem; filter: drop-shadow(0 0 15px rgba(160,196,255,0.4)); }
.intro-title {
  font-family: 'Cinzel', serif; 
  font-size: clamp(1.8rem, 12vw, 3.5rem); 
  font-weight: 900; letter-spacing: 0.05em;
  background: linear-gradient(135deg, #c8962a, #f0d080, #c8962a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1rem; filter: drop-shadow(0 4px 15px rgba(200,150,42,0.3));
  white-space: nowrap;
}
.intro-subtitle {
  font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.8);
  max-width: 400px; margin: 0 auto 2.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.intro-actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }

.btn-primary {
  background: linear-gradient(135deg, #fff, #a0c4ff);
  border: 1px solid #fff; border-radius: 30px;
  color: #050510; font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: bold;
  padding: 1rem 2rem; cursor: pointer; transition: all 0.3s;
  box-shadow: 0 4px 25px rgba(160,196,255,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(200,150,42,0.6); filter: brightness(1.1); }

/* ==========================================================================
   PANTALLA SELECCIÓN DE MUNDO
   ========================================================================== */
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 30px; color: var(--text-dim); font-size: 0.9rem;
  padding: 0.7rem 1.5rem; cursor: pointer; transition: all 0.3s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }

#screen-select { overflow-y: auto; background: #0a0a0f; }

.select-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(100,60,20,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(60,20,100,0.2) 0%, transparent 60%);
  pointer-events: none;
}

.select-content {
  position: relative; z-index: 1;
  padding: 2rem 1.5rem 3rem;
  max-width: 480px; margin: 0 auto;
  min-height: 100%;
  display: flex; flex-direction: column; gap: 2rem;
}

/* Logo */
.logo-wrap { text-align: center; padding-top: 1rem; }
.logo-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.logo-title {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem; font-weight: 900;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, #c8962a, #f0d080, #c8962a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.4rem; letter-spacing: 0.05em; margin-bottom: 1rem; }

.install-btn {
  background: rgba(200, 150, 42, 0.15);
  border: 1px solid var(--espejo-primary);
  color: var(--espejo-primary);
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  margin: 0 auto 1.5rem;
  display: none; /* Se activa por JS */
  align-items: center; justify-content: center;
  gap: 8px;
  transition: all 0.3s;
  animation: pulse-gold 2s infinite;
}
@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(200, 150, 42, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(200, 150, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 150, 42, 0); }
}
.install-btn:active { transform: scale(0.95); }

/* World Cards */
.worlds-grid { display: flex; flex-direction: column; gap: 1rem; }

.world-card {
  position: relative; border-radius: 16px; overflow: hidden;
  min-height: 220px; height: auto; cursor: pointer;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column;
}
.world-card:active { transform: scale(0.98); }
.world-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.6); transform: translateY(-2px); }

.world-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 6s ease;
}
.world-card:hover .world-bg { transform: scale(1.05); }

.castillo-bg {
  background: linear-gradient(135deg, #1a0f05 0%, #3d2010 40%, #0f0803 100%);
  background-size: cover; background-position: center;
}
.cyber-bg {
  background: linear-gradient(135deg, #020d1a 0%, #0a0020 50%, #1a000a 100%);
  background-size: cover; background-position: center;
}
.estancia-bg {
  background: linear-gradient(135deg, #0d0a05 0%, #1a1208 50%, #0a0805 100%);
  background-size: cover; background-position: center;
}
.principito-bg {
  background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4a 50%, #0a0a2e 100%);
  background-size: cover; background-position: center;
}


/* Overlay más fuerte: garantiza legibilidad del texto sobre cualquier fondo */
.world-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.15) 100%),
    linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
}

.world-content {
  position: relative; z-index: 1;
  padding: 3rem 1.4rem 1.4rem;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.4rem;
}

.world-badge {
  position: absolute; top: 1rem; left: 1.4rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(160,196,255,0.15); border: 1px solid rgba(160,196,255,0.4);
  color: #a0c4ff; backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.cyber-badge   { background: rgba(255,59,59,0.2);   border-color: rgba(255,59,59,0.5);   color: #ff8080; }
.terror-badge  { background: rgba(150,100,50,0.2);  border-color: rgba(150,100,50,0.5);  color: #d4b896; }
.poetry-badge  { background: rgba(160,196,255,0.2); border-color: rgba(160,196,255,0.5); color: #b8d4ff; }

.world-emoji { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
.world-name {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem; font-weight: bold;
  color: #fff; line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5);
}
.world-desc { font-size: 0.95rem; color: rgba(255,255,255,0.85); line-height: 1.55; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.world-stats {
  display: flex; gap: 0.8rem; flex-wrap: wrap;
  font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 0.2rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
   PANTALLA PREVIEW
   â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */
#screen-preview { 
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
}
#screen-preview.active { display: flex; }
.preview-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(20px) brightness(0.4);
  transform: scale(1.1);
}
.preview-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent, rgba(0,0,0,0.8));
}
.preview-content {
  position: relative; z-index: 10;
  max-width: 400px; width: 90%;
  padding: 3rem 2rem 2rem;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  text-align: center;
  animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.btn-close-preview {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: none; border: none; color: var(--text-dim);
  font-size: 1.2rem; cursor: pointer;
}

.preview-emoji { font-size: 4rem; margin-bottom: 1rem; }
.preview-title { font-family: 'Cinzel', serif; font-size: 2.2rem; margin-bottom: 0.5rem; }
.preview-content .world-badge { position: static; display: inline-block; margin-bottom: 1.5rem; font-size: 0.8rem; }

.preview-info { text-align: left; margin-bottom: 2rem; }
.preview-info h3 { font-size: 1rem; color: var(--espejo-primary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem; margin-top: 1.5rem; }
.preview-info p { font-size: 1.1rem; color: var(--text); line-height: 1.6; }
.preview-info ul { list-style: none; padding-left: 0.2rem; }
.preview-info li { font-size: 1rem; color: var(--text-dim); margin-bottom: 0.6rem; display: flex; gap: 0.6rem; }
.preview-info li::before { content: '✦'; color: var(--espejo-primary); }

.btn-start-game {
  width: 100%; padding: 1rem; border-radius: 12px;
  background: linear-gradient(135deg, #fff, #a0c4ff);
  border: none; color: #050510; font-family: 'Cinzel', serif;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.1em;
  cursor: pointer; transition: transform 0.2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.btn-start-game:active { transform: scale(0.96); }

/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
   PANTALLA JUEGO
   â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */
#screen-game { background: #0a0a0f; }

/* Imagen cinematic */
.scene-image {
  position: relative;
  flex: 0 0 250px; /* Altura fija para que no se mueva con el teclado */
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* En pantallas muy chicas (celulares en vertical) */
@media (max-height: 600px) {
  .scene-image { flex: 0 0 180px; }
}

.scene-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.scene-bg img {
  animation: kenburns 20s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.12) translate(-2%, -1%); }
}

.castillo-scene {
  background: radial-gradient(ellipse at 30% 60%, rgba(200,150,42,0.3) 0%, transparent 60%),
              linear-gradient(160deg, #0f0803 0%, #2d1a08 40%, #1a0f05 100%);
}
.cyber-scene {
  background: radial-gradient(ellipse at 70% 30%, rgba(255,59,59,0.4) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(0,100,200,0.2) 0%, transparent 50%),
              linear-gradient(160deg, #020810 0%, #001428 60%, #020d1a 100%);
}
.estancia-scene {
  background: radial-gradient(ellipse at 50% 50%, rgba(150,100,50,0.2) 0%, transparent 60%),
              linear-gradient(160deg, #080604 0%, #14100a 50%, #0d0a05 100%);
}
.principito-scene {
  background: radial-gradient(ellipse at 50% 50%, rgba(160,196,255,0.15) 0%, transparent 60%),
              linear-gradient(160deg, #05051a 0%, #0a0a2e 50%, #05051a 100%);
}
.marte-scene {
  background: linear-gradient(160deg, #4d1500 0%, #a33200 50%, #4d1500 100%);
}
.marte-bg {
  background-image: url('https://images.unsplash.com/photo-1614728894747-a83421e2b9c9?w=800&q=60');
}
.space-badge {
  background: linear-gradient(to right, #ff4500, #ff8c00) !important;
  color: white !important;
}
.alquimista-scene {
  background: linear-gradient(160deg, #5c4033 0%, #d4af37 50%, #5c4033 100%);
}
.alquimista-bg {
  background-image: url('https://images.unsplash.com/photo-1506466010722-395aa2bef877?w=800&q=60');
}
.fable-badge {
  background: linear-gradient(to right, #ffd700, #daa520) !important;
  color: #332b00 !important;
}

/* Partículas de ambiente (CSS puro) */
.scene-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 70%, rgba(255,200,100,0.3) 0%, transparent 100%);
  animation: particles 4s ease-in-out infinite alternate;
}
@keyframes particles {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

.scene-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.scene-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
  pointer-events: none; opacity: 0.5;
}

/* HUD */
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
  z-index: 10;
}
.btn-back {
  background: rgba(0,0,0,0.4); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 0.7rem; padding: 5px 10px;
  border-radius: 8px; cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.btn-back:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }

.hud-left { display: flex; align-items: center; gap: 0.8rem; }
.audio-controls { display: flex; align-items: center; gap: 0.4rem; }
.volume-slider-wrap {
  width: 0; overflow: hidden;
  transition: width 0.3s ease;
  display: flex; align-items: center;
}
.audio-controls:hover .volume-slider-wrap { width: 80px; margin: 0 8px; }

.voice-gender-wrap {
  width: 0; overflow: hidden;
  transition: width 0.3s ease;
  display: flex; align-items: center;
}
.audio-controls:hover .voice-gender-wrap { width: 110px; margin-left: 8px; }

.voice-gender-wrap select {
  background: rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 0.75rem; border-radius: 6px; padding: 6px;
  outline: none; width: 100%; font-weight: 500;
}

input[type=range] {
  -webkit-appearance: none; width: 100%; height: 4px;
  background: rgba(255,255,255,0.1); border-radius: 2px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  background: var(--espejo-primary); border-radius: 50%; cursor: pointer;
}

.btn-icon {
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
  color: var(--text-dim); width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; font-size: 1.3rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.btn-icon:hover { background: rgba(0,0,0,0.9); color: #fff; border-color: rgba(255,255,255,0.4); transform: scale(1.05); }
.btn-icon.active { background: rgba(200,150,42,0.7); border-color: rgba(200,150,42,0.9); color: #fff; box-shadow: 0 0 15px rgba(200,150,42,0.6); }

.world-label {
  font-family: 'Cinzel', serif; font-size: 0.78rem;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.hud-hp { text-align: right; }
.hud-hp { font-size: 0.8rem; color: #fff; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-shadow: 1px 1px 4px rgba(0,0,0,0.95); }
#hp-value { color: #fff; font-weight: 700; font-size: 1.3rem; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.hp-bar-wrap { width: 120px; height: 8px; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.6); }
.hp-bar { height: 100%; background: linear-gradient(90deg, #ff4444, #ff8c00, #44ff88); border-radius: 2px; transition: width 0.5s ease; }

/* Inventario */
.inventory-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.2rem 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  z-index: 10;
}
.inv-label { font-size: 0.75rem; font-weight: bold; letter-spacing: 0.15em; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); display: block; margin-bottom: 0.6rem; }
.inventory-list { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.inv-item {
  font-size: 0.9rem; padding: 6px 14px; font-weight: 500;
  background: rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}
.inv-item:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}
.inv-item.epic-find {
  background: linear-gradient(135deg, rgba(200, 150, 42, 0.4), rgba(255, 215, 0, 0.3));
  border-color: #ffd700;
  animation: epic-glow 2s infinite alternate;
}
@keyframes epic-glow {
  from { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
  to { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
}

/* Typing indicator */
.typing-indicator {
  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center;
  background: rgba(0,0,0,0.6); border-radius: 20px; padding: 8px 14px;
  z-index: 20;
}
.typing-indicator span {
  width: 6px; height: 6px; border-radius: 50%; background: #c8962a;
  animation: bounce 1.2s ease infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%            { transform: translateY(-6px); opacity: 1; }
}
.hidden { display: none !important; }

/* Panel narrativo */
.game-panel {
  flex: 1; display: flex; flex-direction: column;
  background: #0d0d12; overflow: hidden;
  border-top: 1px solid var(--border);
}

.narrative-area {
  flex: 1; overflow-y: auto; padding: 1.5rem 1rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-color: var(--espejo-primary) transparent;
  min-height: 0; /* Crucial para flexbox en móviles */
}
.narrative-area::-webkit-scrollbar { width: 3px; }
.narrative-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Mensajes */
.msg-narrator, .msg-player, .msg-system {
  animation: fadeInUp 0.35s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-narrator .bubble {
  display: inline-block;
  min-width: 60px;
  min-height: 40px;
  max-width: 90%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px 14px 14px 14px;
  padding: 1.1rem 1.4rem;
  font-size: 1.15rem; line-height: 1.7; color: var(--text);
  font-style: italic;
  letter-spacing: 0.05em; padding: 0.4rem 0;
}

/* Input */
.input-area {
  display: flex; align-items: flex-end; gap: 0.8rem;
  padding: 1.2rem 1rem 1.5rem;
  border-top: 1px solid var(--border);
}
.player-input {
  flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 14px; padding: 0.9rem 1.1rem;
  color: var(--text); font-family: 'Inter', sans-serif; font-size: 1.15rem;
  resize: none; outline: none; line-height: 1.4; max-height: 150px;
  transition: border-color 0.2s;
}
.player-input:focus { border-color: rgba(200,150,42,0.6); }
.player-input::placeholder { color: var(--text-dim); }

.mic-btn, .send-btn {
  width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}

.mic-btn {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 1.4rem;
}
.mic-btn.recording {
  background: rgba(255, 59, 59, 0.2);
  border-color: #ff3b3b;
  color: #ff3b3b;
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}
@keyframes pulse-mic {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
}

.send-btn {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #fff, #a0c4ff);
  border: none; color: #fff; font-size: 1rem; cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.send-btn:active { transform: scale(0.92); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.input-hint {
  font-size: 0.8rem; color: var(--text-dim);
  text-align: center; padding: 0.2rem 1rem 0.6rem;
}

/* Game Over */
.game-over {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  animation: fadeInUp 0.4s ease;
}
.game-over-content { text-align: center; padding: 2.5rem; max-width: 450px; }
.game-over-icon { font-size: 4rem; margin-bottom: 1.5rem; }
.game-over-content h2 {
  font-family: 'Cinzel', serif; font-size: 2rem; margin-bottom: 1rem;
  color: #fff;
}
.game-over-content p { color: var(--text-dim); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; }
.btn-restart, .btn-back-menu {
  display: block; width: 100%; padding: 1.1rem;
  border-radius: 14px; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 600;
  margin-bottom: 0.8rem; transition: all 0.2s;
}
.btn-restart { background: linear-gradient(135deg, #fff, #a0c4ff); color: #fff; }
.btn-back-menu { background: rgba(255,255,255,0.07); border: 1px solid var(--border); color: var(--text); }
.btn-restart:active, .btn-back-menu:active { transform: scale(0.96); }

/* Preview Buttons & Memory System */
.preview-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  margin-top: 1rem;
}

.btn-start-game {
  width: 100%;
  padding: 1.1rem;
  border-radius: 12px;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.07);
  color: #fff;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-continue {
  background: linear-gradient(135deg, #c8962a 0%, #a07820 100%) !important;
  border-color: #ffd700 !important;
  color: #0f0f15 !important;
  box-shadow: 0 4px 15px rgba(200, 150, 42, 0.3);
}

.btn-start-game:active { transform: scale(0.98); }
.btn-continue:hover { box-shadow: 0 6px 20px rgba(200, 150, 42, 0.5); }

/* â• â•  ADMIN LAB STYLES â• â•  */
	.admin-lab {
	  position: fixed; inset: 0; z-index: 2000;
	  background: rgba(0,0,0,0.85);
	  backdrop-filter: blur(15px);
	  display: flex; align-items: flex-start; justify-content: center;
	  padding: 1.5rem;
	  overflow-y: auto; /* Habilitar scroll en el contenedor principal */
	  -webkit-overflow-scrolling: touch;
	}
	.lab-content {
	  background: #1a1a24; border: 1px solid rgba(255,255,255,0.1);
	  padding: 2.5rem 2rem; border-radius: 24px; width: 100%; max-width: 500px;
	  position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	  margin-top: auto; margin-bottom: auto; /* Centrado vertical flexible */
	}
	@media (max-width: 480px) {
	  .admin-lab { padding: 1rem; }
	  .lab-content { padding: 2rem 1.2rem; border-radius: 16px; }
	}
.btn-close-lab {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: none; border: none; color: var(--text-dim);
  font-size: 1.2rem; cursor: pointer;
}
.lab-header { text-align: center; margin-bottom: 2rem; }
.lab-icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.lab-header h2 { font-family: 'Cinzel', serif; color: #fff; margin-bottom: 0.5rem; }
.lab-header p { color: var(--text-dim); font-size: 0.9rem; }
.lab-form { display: flex; flex-direction: column; gap: 1rem; }
.lab-form input {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  padding: 1rem; border-radius: 12px; color: #fff; font-size: 1rem;
}
.btn-generate {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff; border: none; padding: 1rem; border-radius: 12px;
  font-weight: bold; cursor: pointer; transition: transform 0.2s;
}
.btn-generate:active { transform: scale(0.96); }
.lab-status {
  margin-top: 1.5rem; text-align: center; font-size: 0.85rem; color: #a855f7;
  font-family: monospace;
}

.lab-cloud-section {
  margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem;
}
.lab-cloud-section h3 {
  font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.1em;
  margin-bottom: 1rem; text-align: center;
}
.lab-cloud-list {
  display: flex; flex-direction: column; gap: 0.6rem;
  max-height: 200px; overflow-y: auto; padding-right: 5px;
}
.admin-list-item {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.03); padding: 0.6rem 1rem; border-radius: 10px;
  font-size: 0.85rem; color: #fff;
}
.btn-delete-mini {
  background: rgba(255,68,68,0.15); border: 1px solid rgba(255,68,68,0.3);
  color: #ff6b6b; font-size: 0.65rem; padding: 4px 8px; border-radius: 6px;
  cursor: pointer; transition: all 0.2s;
}
.btn-delete-mini:hover { background: #ff4444; color: #fff; }

/* ── EFECTOS DE CLIMA v1.3.0 ── */
.scene-image.tormenta::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  animation: lightning 5s infinite;
  pointer-events: none;
}
@keyframes lightning {
  0%, 95%, 98% { background: rgba(255,255,255,0); }
  96%, 99% { background: rgba(255,255,255,0.3); }
}

.scene-image.lluvia_acida::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(transparent, transparent 20px, rgba(0, 255, 0, 0.05) 21px);
  animation: rain 0.2s linear infinite;
  pointer-events: none;
}
@keyframes rain {
  from { transform: translateY(-20px); }
  to { transform: translateY(0); }
}

.scene-image.niebla_espesa::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, transparent, rgba(255,255,255,0.1));
  filter: blur(10px);
  animation: fog 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fog {
  from { opacity: 0.3; transform: scale(1); }
  to { opacity: 0.7; transform: scale(1.2); }
}
/*
- [x] CRITICAL BUG #3: `hpMaxActual` TypeError in `worker.js`
- [x] Security: XSS protection in `app.js`
- [x] Performance: Service Worker cache refinement
- [x] Accessibility: ARIA labels in `index.html`
- [x] IA Quality: Gemini conversation format in `worker.js`
- [x] Cleanup: Encoding artifacts in `style.css`
*/

.scene-image.neon_glitch::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 0, 255, 0.05);
  mix-blend-mode: overlay;
  animation: glitch 0.5s steps(2) infinite;
  pointer-events: none;
}
@keyframes glitch {
  0% { clip-path: inset(10% 0 80% 0); transform: translate(-5px); }
  50% { clip-path: inset(50% 0 30% 0); transform: translate(5px); }
  100% { clip-path: inset(10% 0 80% 0); transform: translate(-5px); }
}

/* ══ HOGWARTS & NARNIA ══ */
.hogwarts-bg {
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1b69 50%, #0a051a 100%);
}
.hogwarts-scene {
  background: radial-gradient(ellipse at 50% 30%, rgba(155,89,182,0.4) 0%, transparent 60%),
              linear-gradient(160deg, #0d0520 0%, #1a0a38 50%, #0d0520 100%);
}
.magic-badge { background: rgba(155,89,182,0.2); border-color: rgba(155,89,182,0.5); color: #c39bd3; }

.narnia-bg {
  background: linear-gradient(135deg, #0a1a2e 0%, #1a3a5a 50%, #0a1a2e 100%);
}
.narnia-scene {
  background: radial-gradient(ellipse at 40% 40%, rgba(93,173,226,0.3) 0%, transparent 60%),
              linear-gradient(160deg, #050f1a 0%, #0d2035 50%, #050f1a 100%);
}
.narnia-badge { background: rgba(93,173,226,0.2); border-color: rgba(93,173,226,0.5); color: #85c1e9; }

/* ══ TURN COUNTER ══ */
.turn-counter {
  font-size: 0.7rem; color: rgba(255,255,255,0.5);
  font-family: 'Cinzel', serif; letter-spacing: 0.08em;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
  padding: 3px 10px; border-radius: 12px;
  align-self: flex-end;
}

/* ══ DIFFICULTY SELECTOR ══ */
.difficulty-selector {
  display: flex; gap: 0.6rem; margin-top: 0.5rem; margin-bottom: 1.2rem;
}
.diff-btn {
  flex: 1; padding: 0.7rem 0.4rem; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.05);
  color: var(--text-dim); font-size: 0.8rem; cursor: pointer;
  transition: all 0.2s; font-family: 'Inter', sans-serif;
}
.diff-btn.active { background: rgba(200,150,42,0.2); border-color: var(--espejo-primary); color: var(--espejo-primary); }
.diff-btn:active { transform: scale(0.95); }

/* ══ SHARE BUTTON ══ */
.btn-share {
  display: block; width: 100%; padding: 1rem;
  border-radius: 14px; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600;
  margin-bottom: 0.8rem; transition: all 0.2s;
  background: linear-gradient(135deg, #25D366, #128C7E); color: #fff;
}
.btn-share:active { transform: scale(0.96); }

/* ══ TOAST NOTIFICATION ══ */
.toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(30,30,40,0.95); border: 1px solid rgba(160,196,255,0.2);
  color: #fff; padding: 0.7rem 1.4rem; border-radius: 20px;
  font-size: 0.85rem; z-index: 9999;
  opacity: 0; transition: all 0.3s ease;
  backdrop-filter: blur(10px); white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ GENERIC MODALS ══ */
.modal {
  position: fixed; inset: 0; z-index: 9999 !important;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(15px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; opacity: 1; visibility: visible;
}
.modal.hidden { display: none !important; opacity: 0; visibility: hidden; }
.modal-content {
  background: #121215; border: 1px solid rgba(160,196,255,0.2);
  border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,1);
  position: relative; width: 100%; max-width: 500px;
  animation: modalAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalAppear {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ══ ACHIEVEMENTS MODAL ══ */
.achievements-modal {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(15px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.achievements-content {
  background: #1a1a24; border: 1px solid rgba(255,255,255,0.1);
  padding: 2rem 1.5rem; border-radius: 24px; width: 100%; max-width: 420px;
  position: relative; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.achievements-content h2 {
  font-family: 'Cinzel', serif; text-align: center; margin-bottom: 1.5rem;
  font-size: 1.4rem;
}
.btn-close-modal {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; color: var(--text-dim);
  font-size: 1.2rem; cursor: pointer;
}
.achievement-item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem; border-radius: 12px; margin-bottom: 0.6rem;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  transition: all 0.2s;
}
.achievement-item.unlocked { background: rgba(200,150,42,0.1); border-color: rgba(200,150,42,0.3); }
.achievement-icon { font-size: 1.8rem; width: 40px; text-align: center; flex-shrink: 0; }
.achievement-info { flex: 1; }
.achievement-name { font-size: 0.9rem; font-weight: 600; color: #fff; }
.achievement-desc { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }
.achievement-locked { filter: grayscale(1); opacity: 0.4; }

/* ══ ACHIEVEMENTS BUTTON (logo area) ══ */
.btn-achievements {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(200,150,42,0.1); border: 1px solid rgba(200,150,42,0.3);
  color: var(--espejo-primary); width: 40px; height: 40px;
  border-radius: 12px; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.btn-achievements:hover { background: rgba(160,196,255,0.15); }

/* ══ MODAL FAQ (GUÍA DEL VIAJERO) ══ */
.faq-content { text-align: left; max-width: 500px; padding: 2.5rem 2rem; max-height: 90vh; overflow-y: auto; }
.faq-header { text-align: center; margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
.faq-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.faq-header h2 { font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--espejo-primary); margin-bottom: 0.5rem; }
.faq-header p { font-size: 0.9rem; color: var(--text-dim); }

.faq-body { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.faq-item h3 { font-size: 1.05rem; color: #fff; margin-bottom: 0.4rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.faq-item h3::before { content: '🔸'; font-size: 0.7rem; color: var(--espejo-primary); }
.faq-item p { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.75); }

.faq-close-btn { width: 100%; display: block; }

/* ══ VOICE GENDER — SIEMPRE VISIBLE EN MÓVIL ══ */
@media (hover: none) {
  .voice-gender-wrap { width: 110px !important; margin-left: 6px !important; }
  .volume-slider-wrap { width: 70px !important; margin: 0 6px !important; }
}

/* ══════════════════════════════════════════════════
   LANDSCAPE MODE — FULL RESPONSIVE (v1.4.1)
   Activa cuando el celular está en horizontal Y la
   altura es menor a 520px (típico de phones en land)
   ══════════════════════════════════════════════════ */
@media (orientation: landscape) {

  /* ── PANTALLA 1: SELECCIÓN DE MUNDO ─────────────────
     En landscape las cards se muestran en grilla 2 col
     para aprovechar el ancho extra. */
  #screen-select { overflow-y: auto; }

  .select-content {
    padding: 1.5rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logo-wrap { padding-top: 0.5rem; }
  .logo-icon { font-size: 2rem; margin-bottom: 0.3rem; }
  .logo-title { font-size: 1.8rem; }
  .logo-sub { font-size: 0.7rem; margin-bottom: 0.5rem; }

  /* Grid responsiva estable para PC/Landscape */
  .worlds-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
  }
  @media (min-width: 1100px) {
    .worlds-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .world-card { min-height: 180px; padding: 1.5rem; }
  .world-name { font-size: 1.3rem; margin-bottom: 0.5rem; }
  .world-desc { font-size: 0.9rem; line-height: 1.5; opacity: 0.9; }
  .world-emoji { font-size: 2rem; margin-bottom: 0.5rem; }


  /* ── PANTALLA 2: PREVIEW ─────────────────────────────
     En landscape el modal puede ser más alto que la pantalla.
     Se vuelve scrollable y compacto. */
  #screen-preview {
    padding: 0.8rem;
    align-items: flex-start;
    overflow-y: auto;
  }

  .preview-content {
    padding: 2rem 1.5rem 1.5rem;
    width: 100%; max-width: 520px;
    margin: 0 auto;
    border-radius: 16px;
  }

  .preview-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }
  .preview-title { font-size: 1.6rem; margin-bottom: 0.3rem; }
  .preview-info h3 { margin-top: 1rem; }
  .preview-info p { font-size: 1rem; }
  .preview-info li { font-size: 0.9rem; margin-bottom: 0.4rem; }
  .difficulty-selector { gap: 0.5rem; }
  .diff-btn { padding: 0.5rem 0.3rem; font-size: 0.75rem; }


  /* ── PANTALLA 3: JUEGO — SPLIT SCREEN ───────────────
     El layout cambia de columna (portrait) a fila (landscape):
     [  Imagen (42%)  |  Narrativa + Input (58%)  ]         */
  #screen-game {
    flex-direction: row;
    height: 100dvh;
    overflow: hidden;
  }

  /* Columna izquierda: imagen cinematic */
  .scene-image {
    flex: 0 0 42%;
    height: 100dvh;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,0.06);
  }

  /* HUD compacto dentro de la imagen */
  .hud-top {
    padding: 0.5rem 0.7rem;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .hud-left { gap: 0.5rem; flex-wrap: wrap; }
  .audio-controls { gap: 0.25rem; }
  .btn-back { font-size: 0.6rem; padding: 3px 7px; }
  .btn-icon { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
  .world-label { font-size: 0.62rem; letter-spacing: 0.06em; }
  #hp-value { font-size: 1.05rem; }
  .hp-bar-wrap { width: 80px; height: 6px; }
  .turn-counter { font-size: 0.58rem; padding: 2px 6px; }

  /* Inventario: compacto en la base de la imagen */
  .inventory-panel { padding: 0.5rem 0.8rem 0.8rem; }
  .inv-label { font-size: 0.62rem; margin-bottom: 0.3rem; }
  .inventory-list { flex-wrap: nowrap; overflow-x: auto; }
  .inv-item { font-size: 0.75rem; padding: 4px 10px; white-space: nowrap; }

  /* Typing indicator: centrado en la imagen */
  .typing-indicator { bottom: 40px; }

  /* Columna derecha: panel narrativo */
  .game-panel {
    flex: 1;
    height: 100dvh;
    overflow: hidden;
    border-top: none;
    border-left: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
  }

  /* Área narrativa: más compacta */
  .narrative-area {
    padding: 0.8rem 0.9rem;
    gap: 0.9rem;
  }
  .msg-narrator .bubble {
    font-size: 1rem;
    padding: 0.9rem 1.1rem;
    line-height: 1.6;
  }
  .msg-narrator .sender { font-size: 0.7rem; margin-bottom: 0.3rem; }
  .msg-player .bubble { font-size: 0.95rem; padding: 0.7rem 1rem; }
  .msg-system .bubble { font-size: 0.75rem; }

  /* Input: compacto */
  .input-area { padding: 0.7rem 0.8rem 0.9rem; gap: 0.5rem; }
  .player-input { font-size: 0.95rem; padding: 0.7rem 0.9rem; }
  .mic-btn, .send-btn { width: 40px; height: 40px; }
  .input-hint { font-size: 0.68rem; padding: 0 0.8rem 0.4rem; }

  /* Game Over: adaptar al espacio */
  .game-over-content { padding: 1.5rem; }
  .game-over-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }
  .game-over-content h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
  .game-over-content p { font-size: 0.95rem; margin-bottom: 1.2rem; }
  .btn-restart, .btn-back-menu, .btn-share { padding: 0.8rem; font-size: 0.95rem; margin-bottom: 0.5rem; }

  /* ── PANTALLA 0: INTRO — LANDSCAPE ── */
  #screen-intro { flex-direction: row; }
  #screen-intro .intro-content {
    padding: 1.5rem 3rem;
    max-width: 900px;
    display: flex;
    align-items: center;
    gap: 3rem;
    text-align: left;
    margin: auto;
  }
  #screen-intro .intro-logo { font-size: 3rem; margin-bottom: 0; flex: 0 0 auto; }
  #screen-intro .intro-title { font-size: 2.5rem; margin-bottom: 0.5rem; text-align: left; }
  #screen-intro .intro-subtitle { font-size: 1rem; margin-bottom: 1.5rem; }
  #screen-intro .intro-actions { width: 100%; max-width: 300px; margin: 0; }
  #screen-intro .btn-intro { margin-bottom: 0.8rem; }
}

/* ══════════════════════════════════════════════════
   LANDSCAPE en tablets (ancho >= 768px)
   En tablets landscape usamos el split pero con
   proporciones más generosas (50/50)
   ══════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
  .scene-image { flex: 0 0 50%; }
  .worlds-grid { grid-template-columns: 1fr 1fr 1fr; }
  .world-card { min-height: 140px; }
  .narrative-area { padding: 1rem 1.2rem; }
  .msg-narrator .bubble { font-size: 1.05rem; }
}

/* --------------------------------------------------
   ESCRITORIO / PC — LAYOUT DEFINITIVO (min-width: 1024px)
   -------------------------------------------------- */
@media (min-width: 1024px) {
  /* Eliminamos la restricción de ancho de móvil */
  .select-content {
    max-width: 1200px !important;
    width: 95% !important;
    padding: 3rem 2rem;
  }

  .worlds-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    width: 100% !important;
    height: auto !important;
  }

  .world-card {
    min-height: 250px !important;
    height: auto !important;
    padding: 0 !important; /* El padding va en el content */
  }

  .world-content {
    height: auto !important;
    padding: 3.5rem 1.8rem 2rem !important;
    justify-content: flex-start !important;
  }

  .world-name { font-size: 1.6rem !important; }
  .world-desc { font-size: 1.05rem !important; line-height: 1.6 !important; }
  
  #screen-game { flex-direction: row; }
  .scene-image { flex: 0 0 50%; height: 100vh; }
  .game-panel { flex: 1; height: 100vh; }
}


/* -- Karaoke Effect -- */
.karaoke-sentence {
  display: inline;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.karaoke-sentence[style*='opacity: 1'] {
  opacity: 1;
}
\n
/* ══════════════════════════════════════ */
/* MI NOVELA — Historial de Entradas      */
/* ══════════════════════════════════════ */

.history-card {
  background: rgba(20, 20, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.history-card:hover {
  transform: translateY(-2px);
  background: rgba(30, 30, 40, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.history-emotion {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.history-date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.history-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.history-quote {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  margin: 0 0 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-style-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.history-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  margin-top: 3rem;
  line-height: 1.6;
}

.memorable-quote {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid #fff;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  position: relative;
  animation: fadeIn 1s ease-out;
}

.quote-mark {
  font-family: serif;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.2);
  line-height: 0;
  vertical-align: -0.4rem;
  margin: 0 0.2rem;
}