/* ============================================================
   ASIN - ESTILOS DE MISIONES (VERSIÓN ÉPICA - 8 AÑOS)
   ============================================================ */

/* --- MISIÓN 1: Puente Láser Antivirus --- */
.path-container { padding: 1rem; background: linear-gradient(135deg, #0f0f1a, #16213e); border-radius: 12px; min-height: 300px; box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.1); }
.switch-path, .m1-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 1rem; }
.m1-row { display: flex; gap: 10px; flex-direction: column; }

/* Baldosas estilo láser cibernético */
.switch-tile, .m1-tile {
  background: #1a1a2e;
  border: 2px solid #00f0ff; /* Neón cyan hacker */
  box-shadow: 0 0 10px #00f0ff55, inset 0 0 10px #00f0ff55;
  border-radius: 10px;
  padding: 14px 8px;
  cursor: pointer;
  font-size: 0.75rem;
  color: #fff;
  text-align: center;
  transition: all 0.2s ease-out;
  min-height: 80px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', Courier, monospace; /* Toque de computadora */
  font-weight: bold;
}
.switch-tile:hover, .m1-tile:hover { 
  background: rgba(0, 240, 255, 0.1); 
  box-shadow: 0 0 20px #00f0ff, inset 0 0 20px #00f0ff;
  transform: scale(1.05); 
}

/* Acierto: Escudo de energía */
.switch-tile.correct, .m1-tile.correct { 
  background: rgba(0, 255, 0, 0.2) !important; 
  border-color: #00ff00; 
  box-shadow: 0 0 25px #00ff00, inset 0 0 15px #00ff00;
  animation: shieldPing 0.5s ease-out;
}

/* Error: Explosión digital */
.switch-tile.incorrect, .m1-tile.shake-fall { 
  animation: digitalExplosion 0.8s forwards;
  pointer-events: none;
}
.switch-tile.disabled, .m1-tile.disabled { opacity: 0.4; pointer-events: none; filter: grayscale(100%); }

@keyframes shieldPing {
  0% { transform: scale(1); box-shadow: 0 0 0px #00ff00; }
  50% { transform: scale(1.1); box-shadow: 0 0 40px #00ff00; }
  100% { transform: scale(1); box-shadow: 0 0 25px #00ff00; }
}
@keyframes digitalExplosion {
  0% { transform: translate(0) scale(1); background: #ff0000; filter: contrast(200%); border-color: #ff0000; }
  20% { transform: translate(-10px, 10px) skewX(20deg); box-shadow: 0 0 30px #ff0000; }
  40% { transform: translate(10px, -10px) skewX(-20deg); opacity: 0.8; }
  100% { transform: translateY(200px) scale(0) rotate(45deg); opacity: 0; filter: blur(5px); }
}

.question-panel { background: rgba(0, 240, 255, 0.05); border-radius: 10px; padding: 1rem; margin-top: 1rem; border: 1px solid rgba(0, 240, 255, 0.2); }
.question-text { color: #00f0ff; font-size: 1rem; margin-bottom: 1rem; text-shadow: 0 0 5px #00f0ff88; }
.answer-options { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.answer-btn { padding: 10px 20px; border-radius: 20px; border: 2px solid #00f0ff; background: transparent; color: #fff; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
.answer-btn:hover { background: #00f0ff; color: #000; font-weight: bold; box-shadow: 0 0 15px #00f0ff; }


/* --- MISIÓN 2: Visión Nocturna y Lentes --- */
.m2-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .m2-layout { grid-template-columns: 1fr; } }
.m2-label { font-size: 0.8rem; color: #aaa; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 1px; }

/* Cuarto oscuro con linterna */
.m2-room { 
  background: rgba(255,255,255,0.05); border-radius: 12px; padding: 1rem; border: 1px solid rgba(255,255,255,0.1); 
  position: relative; overflow: hidden; /* Necesario para la linterna */
}
.m2-room.dark-mode { background: #050505; border-color: #222; }
.flashlight-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; /* Crucial para poder hacer clic en las piezas */
  background: radial-gradient(circle 120px at var(--x, 50%) var(--y, 50%), transparent 0%, rgba(0,0,0,0.98) 100%);
  z-index: 10; transition: background 0.1s ease;
}

.m2-objects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; z-index: 2; }
.m2-object {
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.2); border-radius: 10px;
  padding: 12px 6px; text-align: center; cursor: pointer; transition: all 0.2s; font-size: 1.6rem;
}
.m2-object p { font-size: 0.65rem; color: #ccc; margin: 4px 0 0; }
.m2-object:hover { border-color: #00f0ff; background: rgba(0,240,255,0.1); transform: scale(1.1); box-shadow: 0 0 15px #00f0ff55; }
.m2-object.is-piece { border-color: #4A90E2; background: rgba(74,144,226,0.15); }
.m2-object.placed { opacity: 0.3; pointer-events: none; filter: grayscale(100%); }

.m2-glasses-panel { display: flex; flex-direction: column; align-items: center; z-index: 2; position: relative; }
.m2-glasses-frame { width: 100%; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 1rem; border: 1px solid rgba(255,255,255,0.1); }
.m2-slot {
  background: rgba(255,255,255,0.06); border: 2px dashed rgba(255,255,255,0.3); border-radius: 10px;
  padding: 14px 8px; text-align: center; min-height: 60px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; cursor: pointer; margin: 6px 0; font-size: 0.75rem; color: #aaa;
}
.m2-slots-row { display: flex; gap: 8px; }
.m2-slots-row .m2-slot { flex: 1; }
.m2-slot.filled { border-style: solid; border-color: #00ff00; background: rgba(0,255,0,0.15); box-shadow: 0 0 10px rgba(0,255,0,0.4); }
.m2-slot.filled .slot-label { display: none; }
.m2-slot .slot-emoji { font-size: 1.8rem; animation: revealPop 0.4s ease-out; }
.slot-label { font-size: 0.7rem; }
.m2-piece-info {
  margin-top: 0.75rem; background: rgba(0,240,255,0.1); border: 1px solid #00f0ff; border-radius: 10px;
  padding: 0.75rem; width: 100%; min-height: 60px; text-align: center; font-size: 0.8rem; color: #fff; text-shadow: 0 0 5px #00f0ff88;
}
.m2-piece-name { font-size: 1rem; font-weight: bold; color: #fff; margin-bottom: 4px; }

.m2-reveal { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.revealed-char { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #00ff00; box-shadow: 0 0 20px #00ff00; }
@keyframes revealPop { from { filter: blur(10px); transform: scale(0.5) rotate(-20deg); } to { filter: blur(0); transform: scale(1) rotate(0); } }


/* --- MISIÓN 3: Portal de Talentos (Arcade) --- */
.m3-team-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 700px) { .m3-team-cards { grid-template-columns: 1fr; } }
.m3-char-card {
  background: rgba(255,255,255,0.06); border-radius: 12px; padding: 1rem; text-align: center;
  border: 2px solid rgba(255,255,255,0.1); transition: all 0.3s;
}
.m3-char-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.m3-char-card img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; border: 2px solid #fff; }
.m3-char-name { font-weight: bold; color: #fff; font-size: 0.95rem; }
.m3-char-condition { font-size: 0.7rem; color: #aaa; margin-bottom: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.1); display: inline-block; }
.m3-char-talent { font-size: 0.75rem; color: #ccc; margin: 3px 0; padding: 3px 8px; background: rgba(255,255,255,0.07); border-radius: 6px; }
.m3-char-role { font-size: 0.72rem; font-style: italic; color: #00f0ff; margin-top: 6px; text-shadow: 0 0 5px #00f0ff55; }

.m3-player-talents { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; padding: 1rem 0; }
.talent-btn {
  padding: 8px 16px; border-radius: 20px; border: 2px solid rgba(255,255,255,0.3); background: transparent; color: #fff; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;
}
.talent-btn.selected { border-color: #00f0ff; background: rgba(0,240,255,0.2); box-shadow: 0 0 10px #00f0ff; }
.talent-btn:hover { border-color: #00f0ff; transform: scale(1.05); }

.m3-game-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 0.75rem; background: rgba(0,0,0,0.3); border-radius: 10px; border: 1px solid #333; }
.m3-roles { display: flex; gap: 6px; flex-wrap: wrap; }
.role-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: bold; }
.julieta-role { background: rgba(233,30,99,0.2); color: #F06292; border: 1px solid #F06292; }
.vicente-role { background: rgba(33,150,243,0.2); color: #64B5F6; border: 1px solid #64B5F6; }
.andrea-role { background: rgba(156,39,176,0.2); color: #BA68C8; border: 1px solid #BA68C8; }

.m3-timer-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 120px; color: #fff; font-size: 0.85rem; font-family: monospace; font-weight: bold; }
.m3-timer-bar { flex: 1; height: 12px; background: rgba(255,0,0,0.2); border-radius: 6px; overflow: hidden; border: 1px solid #ff0000; box-shadow: inset 0 0 5px #000; }
.m3-timer-fill { height: 100%; background: #00ff00; border-radius: 4px; transition: width 1s linear, background 0.5s; box-shadow: 0 0 10px #00ff00; }
.m3-progress { color: #fff; font-size: 0.85rem; }

.m3-game-area { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
@media (max-width: 700px) { .m3-game-area { grid-template-columns: 1fr; } }

.m3-julieta-says { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mini-char { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #E91E63; box-shadow: 0 0 10px #E91E63; }
.speech-bubble { background: rgba(233,30,99,0.2); border: 1px solid #E91E63; border-radius: 10px; padding: 8px 12px; font-size: 0.8rem; color: #fff; text-align: center; text-shadow: 0 0 3px #E91E63; }

/* Cofre y Animación Arcade */
.m3-chest { background: #111; border-radius: 12px; padding: 0.75rem; border: 2px solid #ff9800; box-shadow: 0 0 15px rgba(255, 152, 0, 0.4); position: relative; overflow: hidden; }
.chest-label, .board-label { font-size: 0.75rem; color: #ffd700; text-align: center; margin-bottom: 8px; font-weight: bold; text-transform: uppercase; }
.m3-gems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gem-option {
  font-size: 1.8rem; text-align: center; padding: 8px; background: rgba(255,255,255,0.06); border-radius: 50%; /* Más redondos para el arcade */
  cursor: pointer; border: 2px solid transparent; transition: transform 0.1s; transform: scale(0); /* Escondidas por defecto */
}
.gem-option.pop-up { transform: scale(1.1); animation: gemWiggle 1s infinite; border: 2px dashed #00f0ff; background: rgba(0, 240, 255, 0.1); }
@keyframes gemWiggle { 0%, 100% { transform: translateY(0) scale(1.1); } 50% { transform: translateY(-5px) scale(1.2); } }

.gem-option:hover { border-color: #ffd700; background: rgba(255, 215, 0, 0.2); }
.gem-option.correct-gem { animation: gemPop 0.4s ease; border-color: #00ff00; background: rgba(0,255,0,0.3); }
.gem-option.wrong-gem { animation: shake 0.4s ease; border-color: #f44336; background: rgba(244,67,54,0.3); filter: grayscale(100%); }

.m3-board { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 0.75rem; border: 1px solid rgba(255,255,255,0.1); }
.m3-board-slots { display: flex; flex-direction: column; gap: 8px; }
.board-slot {
  padding: 10px; background: rgba(0,0,0,0.5); border: 2px dashed #555; border-radius: 8px;
  text-align: center; font-size: 0.8rem; color: #777; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.board-slot.filled { border-style: solid; border-color: #00ff00; color: #00ff00; background: rgba(0,255,0,0.1); font-weight: bold; text-shadow: 0 0 5px #00ff00; }


/* --- MISIÓN 4: Código Secreto (Hacker Terminal) --- */
.m4-quiz-layout { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; }
@media (max-width: 700px) { .m4-quiz-layout { grid-template-columns: 1fr; } }
.m4-panel-label { font-size: 0.8rem; color: #00f0ff; margin-bottom: 8px; text-align: center; font-family: monospace; }
.m4-symbols-panel { background: rgba(0, 240, 255, 0.05); border-radius: 12px; padding: 0.75rem; border: 1px solid #00f0ff; box-shadow: inset 0 0 10px rgba(0,240,255,0.2); }
.m4-symbols-collected { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 60px; }
.m4-symbol {
  width: 40px; height: 40px; background: rgba(0, 240, 255, 0.2); border: 2px solid #00f0ff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; text-shadow: 0 0 5px #fff;
  animation: symbolAppear 0.4s ease; box-shadow: 0 0 10px #00f0ff;
}
@keyframes symbolAppear { from { transform: scale(0) rotate(-45deg); opacity:0; } to { transform: scale(1) rotate(0); opacity:1; } }

.m4-question-box { background: #0a0a14; border-radius: 12px; padding: 1rem; border: 1px solid #4A90E2; box-shadow: 0 0 20px rgba(74, 144, 226, 0.2); }
.m4-q-num { font-size: 0.85rem; color: #00ff00; margin-bottom: 8px; font-family: monospace; text-transform: uppercase; }
.m4-q-text { font-size: 1.1rem; color: #fff; margin-bottom: 1rem; line-height: 1.5; font-weight: bold; }
.m4-options { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.m4-opt-btn {
  flex: 1; min-width: 120px; padding: 14px; border-radius: 8px; border: 2px solid #555;
  background: #111; color: #ccc; cursor: pointer; font-size: 0.9rem; text-align: center; transition: all 0.2s; font-family: monospace;
}
.m4-opt-btn:hover { border-color: #00f0ff; background: rgba(0, 240, 255, 0.1); color: #fff; box-shadow: 0 0 15px rgba(0,240,255,0.4); }
.m4-opt-btn.correct { border-color: #00ff00; background: rgba(0, 255, 0, 0.2); color: #00ff00; text-shadow: 0 0 5px #00ff00; box-shadow: 0 0 15px #00ff00; }
.m4-opt-btn.incorrect { border-color: #ff0000; background: rgba(255, 0, 0, 0.2); color: #ff0000; box-shadow: 0 0 15px #ff0000; animation: shake 0.4s; }
.m4-feedback { margin-top: 0.75rem; padding: 0.75rem; border-radius: 8px; background: rgba(0,255,0,0.1); border: 1px dashed #00ff00; color: #00ff00; font-size: 0.85rem; font-family: monospace; }

.m4-decoder { text-align: center; padding: 1rem; background: #050505; border-radius: 12px; border: 2px solid #333; }
.m4-symbol-key { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 1.5rem; }
.m4-key-item {
  background: #111; border: 1px solid #4A90E2; border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; color: #fff; display: flex; align-items: center; gap: 8px; box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
}
.m4-key-sym { font-size: 1.2rem; color: #00f0ff; }
.m4-key-arrow { color: #555; }
.m4-key-letter { font-weight: bold; color: #00ff00; font-size: 1.2rem; font-family: monospace; }

.m4-code-display { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.m4-code-cell {
  width: 50px; height: 65px; border: 2px solid #333; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; gap: 4px; box-shadow: inset 0 0 10px #000;
}
.m4-code-sym { font-size: 1.1rem; color: #555; }
.m4-code-letter { font-size: 1.2rem; color: #333; font-family: monospace; }

/* Animación ruleta Hacker */
.m4-code-letter.hacking { color: #00ff00; filter: drop-shadow(0 0 5px #00ff00); animation: hackSpin 0.1s infinite; font-size: 1.8rem; }
@keyframes hackSpin { 0% { transform: translateY(-3px); opacity: 0.8; } 100% { transform: translateY(3px); opacity: 1; } }

.m4-code-cell.revealed { border-color: #7B68EE; background: rgba(123,104,238,0.1); box-shadow: 0 0 15px #7B68EE; }
.m4-code-cell.revealed .m4-code-sym { color: #fff; }
.m4-code-cell.revealed .m4-code-letter { color: #fff; font-size: 1.8rem; font-weight: bold; text-shadow: 0 0 10px #7B68EE; animation: none; }

.m4-big-word {
  font-size: 3rem; font-weight: bold; color: #fff; letter-spacing: 8px;
  text-shadow: 0 0 10px #7B68EE, 0 0 20px #7B68EE, 0 0 40px #7B68EE; display: block; margin: 1rem 0; animation: wordReveal 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes wordReveal {
  from { transform: scale(0.2) rotate(-10deg); opacity:0; letter-spacing: 30px; filter: blur(10px); }
  to { transform: scale(1) rotate(0); opacity:1; letter-spacing: 8px; filter: blur(0); }
}

/* Fase genérica */
.m3-phase, .m4-phase { }
.m3-phase + .m3-phase, .m4-phase + .m4-phase { margin-top: 0; }