/* =========================================================
   La Isla del Código Vivo — estilos
   ========================================================= */

:root {
  --morado: #6b3fa0;
  --morado-osc: #46286b;
  --dorado: #f4b740;
  --verde: #36c46b;
  --rojo: #e0506a;
  --azul: #2bb3d4;
  --texto: #2a1a44;
  --panel-bg: #1c1430;
}

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

html, body {
  height: 100%;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  background: #0c0a16;
  color: #fff;
  overflow: hidden;
}

/* ---------- Sistema de pantallas ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.screen.active { display: flex; }

/* ---------- Escenario con imagen 16:9 ---------- */
.stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  overflow: hidden;
}
/* Si la pantalla es muy baja, limitamos por altura */
@media (max-aspect-ratio: 16/9) { .stage { width: auto; height: 100%; max-height: 720px; } }

/* ---------- Botones grandes ---------- */
.big-btn {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(180deg, #8a52c9, var(--morado-osc));
  border: 3px solid var(--dorado);
  border-radius: 14px;
  padding: 18px 54px;
  font-size: clamp(18px, 3.2vw, 30px);
  cursor: pointer;
  box-shadow: 0 6px 0 #2c1a45, 0 10px 24px rgba(0,0,0,.45);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.big-btn:hover { filter: brightness(1.08); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2c1a45; }
.big-btn.small { padding: 12px 26px; font-size: clamp(15px, 2.2vw, 20px); }

/* Botón EMPEZAR colocado sobre la zona del botón del arte */
.stage-inicio #btn-empezar {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  min-width: 42%;
}
.stage-inicio #btn-empezar:active { transform: translateX(-50%) translateY(4px); }

/* ---------- Hotspots del mapa ---------- */
.hotspot {
  position: absolute;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.hotspot:hover {
  background: rgba(244,183,64,.18);
  border-color: rgba(244,183,64,.85);
  box-shadow: 0 0 22px rgba(244,183,64,.55) inset;
}
.hotspot.completado:hover { background: rgba(54,196,107,.18); border-color: rgba(54,196,107,.9); }

/* ---------- Insignias de estado sobre el mapa ---------- */
#badges { position: absolute; inset: 0; pointer-events: none; }
.badge {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(22px, 3.2vw, 40px);
  height: clamp(22px, 3.2vw, 40px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(13px, 2vw, 22px);
  font-weight: 900;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.badge.done { background: var(--verde); color: #fff; }
.badge.done { animation: pop .35s ease; }
@keyframes pop { 0% { transform: translate(-50%,-50%) scale(0); } 70% { transform: translate(-50%,-50%) scale(1.25); } 100% { transform: translate(-50%,-50%) scale(1); } }

/* ---------- Barra de herramientas del mapa ---------- */
.map-toolbar {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.ghost-btn {
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: rgba(20,12,40,.72);
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: clamp(12px, 1.8vw, 16px);
  cursor: pointer;
  backdrop-filter: blur(3px);
}
.ghost-btn:hover { background: rgba(224,80,106,.85); border-color: #fff; }
.progreso-texto {
  font-weight: 900;
  font-size: clamp(13px, 2vw, 18px);
  background: rgba(20,12,40,.72);
  border: 2px solid var(--dorado);
  border-radius: 10px;
  padding: 8px 14px;
  backdrop-filter: blur(3px);
}

/* ---------- Panel de prueba ---------- */
.panel {
  width: 100%;
  max-width: 820px;
  max-height: 94vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #241a3e, var(--panel-bg));
  border: 3px solid var(--dorado);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.volver-btn {
  font-family: inherit;
  font-weight: 700;
  color: var(--dorado);
  background: transparent;
  border: 2px solid var(--dorado);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  margin-bottom: 16px;
}
.volver-btn:hover { background: rgba(244,183,64,.15); }
.panel h1 { font-size: clamp(22px, 4vw, 34px); margin-bottom: 8px; color: var(--dorado); }
.prueba-desc { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.5; color: #e7ddff; margin-bottom: 18px; }
.bloque { margin-top: 10px; }
.instruccion { color: #d9ccff; margin-bottom: 12px; }

.codigo-row { display: flex; gap: 10px; flex-wrap: wrap; }
#input-codigo {
  flex: 1 1 220px;
  font-family: inherit;
  font-size: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid #5a4a82;
  background: #120c22;
  color: #fff;
}
#input-codigo:focus { outline: none; border-color: var(--dorado); }
.codigo-msg { margin-top: 12px; font-weight: 700; min-height: 22px; }
.codigo-msg.ok { color: var(--verde); }
.codigo-msg.err { color: var(--rojo); }

.bloque-completado {
  text-align: center;
  margin-top: 18px;
  padding: 22px;
  background: rgba(54,196,107,.15);
  border: 2px solid var(--verde);
  border-radius: 14px;
}
.check-grande { font-size: 52px; color: var(--verde); display: block; }
.bloque-completado p { font-size: 22px; font-weight: 800; margin-top: 6px; }

/* ---------- Pantalla final ---------- */
.final-actions {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Utilidades ---------- */
.hidden { display: none !important; }

/* =========================================================
   Minijuegos
   ========================================================= */
.game-msg { text-align: center; font-weight: 800; font-size: 18px; min-height: 24px; margin: 12px 0; }
.game-msg.ok { color: var(--verde); }
.game-msg.err { color: var(--rojo); }
.game-actions { text-align: center; margin-top: 14px; }

/* --- Acueducto (tuberías) --- */
.pipe-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; }
.pipe-io { font-size: clamp(16px, 3vw, 24px); font-weight: 900; }
.pipe-in { color: #5fe0ff; }
.pipe-out { color: var(--dorado); }
.pipe-grid { display: grid; gap: 5px; justify-content: center; }
.pipe-cell {
  width: clamp(40px, 9vw, 62px);
  height: clamp(40px, 9vw, 62px);
  background: #120c22;
  border: 2px solid #46396f;
  border-radius: 9px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: clamp(22px, 5.5vw, 36px);
  color: #8fb3d6;
  user-select: none;
  transition: transform .1s, background .15s, color .15s;
}
.pipe-cell:hover { background: #1c1338; transform: scale(1.05); }
.pipe-cell.io { border-color: var(--dorado); }
.pipe-cell.flow { background: #15384a; color: #5fe0ff; box-shadow: 0 0 14px rgba(95,224,255,.55) inset; }

/* --- Memory --- */
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 380px; margin: 0 auto; }
.mem-card {
  aspect-ratio: 1;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, #8a52c9, var(--morado-osc));
  font-size: clamp(22px, 7vw, 38px);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: transparent;
  transition: transform .2s;
}
.mem-card.flip { background: #efe6ff; color: var(--texto); transform: rotateY(0deg); }
.mem-card.matched { background: var(--verde); color: #fff; cursor: default; }

/* --- Enigma --- */
.enigma-q { font-size: 19px; line-height: 1.5; margin-bottom: 16px; color: #ece3ff; }
.enigma-opts { display: grid; gap: 10px; }
.enigma-opt {
  font-family: inherit;
  font-size: 17px;
  text-align: left;
  padding: 13px 16px;
  border-radius: 12px;
  border: 2px solid #5a4a82;
  background: #160f2b;
  color: #fff;
  cursor: pointer;
}
.enigma-opt:hover { border-color: var(--dorado); background: #1d1540; }
.enigma-opt.good { border-color: var(--verde); background: rgba(54,196,107,.25); }
.enigma-opt.bad { border-color: var(--rojo); background: rgba(224,80,106,.25); }

/* --- Secuencias (Simon) --- */
.seq-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 420px; margin: 0 auto; }
.seq-pad {
  aspect-ratio: 1;
  border-radius: 16px;
  border: 3px solid rgba(255,255,255,.25);
  cursor: pointer;
  opacity: .5;
  transition: opacity .1s, transform .1s, box-shadow .1s;
}
.seq-pad.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 28px rgba(255,255,255,.75); }
.seq-pad.c0 { background: #e0506a; }
.seq-pad.c1 { background: #36c46b; }
.seq-pad.c2 { background: #2bb3d4; }
.seq-pad.c3 { background: #f4b740; }
.seq-pad.c4 { background: #9b59f6; }
.seq-pad.c5 { background: #ff8c3b; }
.seq-info { text-align: center; font-weight: 800; margin: 10px 0; }