/* ============================================
   Juegos Católicos - estilos compartidos
   (Ahorcado, Sopa de Letras, Verdadero o Falso, Crucigrama)
   ============================================ */

.juego-container { max-width: 900px; margin: 0 auto 60px; padding: 0 20px; }

/* --- Selector de categoría/tema --- */
.categoria-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 30px; }
.categoria-pill {
    background: var(--blanco); border: 2px solid rgba(150,111,63,0.25); color: var(--texto);
    padding: 8px 18px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: 0.25s;
}
.categoria-pill:hover { border-color: var(--acento); }
.categoria-pill.active { background: var(--acento); border-color: var(--acento); color: #fff; }

/* --- Tarjeta central de juego --- */
.juego-card {
    background: var(--blanco); border-radius: 22px; padding: 35px 30px;
    box-shadow: var(--sombra, 0 15px 35px rgba(184,134,11,0.08)); text-align: center;
}

/* --- Vidas (corazones/cruces en vez de horca) --- */
.vidas { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; font-size: 1.5rem; }
.vidas i { color: var(--acento); transition: 0.3s; }
.vidas i.perdida { color: #ddd; transform: scale(0.85); }
body.dark-mode .vidas i.perdida { color: #444; }

/* --- Ahorcado --- */
.pista-box { background: var(--fondo); border-radius: 14px; padding: 14px 20px; margin-bottom: 25px; font-style: italic; color: var(--primario); font-size: 0.98rem; }
.palabra-oculta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.letra-slot { width: 34px; height: 44px; border-bottom: 3px solid var(--acento); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--primario); text-transform: uppercase; }
.teclado { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; max-width: 560px; margin: 0 auto; }
.tecla { background: var(--fondo); border: 2px solid rgba(150,111,63,0.2); border-radius: 10px; padding: 10px 0; font-weight: 700; font-size: 1rem; cursor: pointer; color: var(--texto); transition: 0.2s; }
.tecla:hover:not(:disabled) { border-color: var(--acento); transform: translateY(-2px); }
.tecla.correcta { background: #4CAF50; border-color: #4CAF50; color: #fff; }
.tecla.incorrecta { background: #c0392b; border-color: #c0392b; color: #fff; }
.tecla:disabled { cursor: default; opacity: 0.7; }

/* --- Resultado / banners --- */
.resultado-banner { margin: 25px 0; padding: 20px; border-radius: 16px; font-size: 1.1rem; font-weight: 700; display: none; }
.resultado-banner.show { display: block; animation: fadeUp 0.5s; }
.resultado-banner.ganaste { background: rgba(76,175,80,0.12); color: #2e7d32; }
.resultado-banner.perdiste { background: rgba(192,57,43,0.1); color: #c0392b; }
body.dark-mode .resultado-banner.ganaste { background: rgba(76,175,80,0.18); color: #81c784; }
body.dark-mode .resultado-banner.perdiste { background: rgba(192,57,43,0.18); color: #e57373; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.btn-juego { background: var(--acento); color: #fff; border: none; padding: 14px 30px; border-radius: 50px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.25s; display: inline-flex; align-items: center; gap: 8px; }
.btn-juego:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(150,111,63,0.3); }
.btn-juego.outline { background: transparent; color: var(--acento); border: 2px solid var(--acento); }

.racha-box { font-size: 0.85rem; opacity: 0.7; margin-top: 15px; }

/* --- Sopa de letras --- */
.sopa-layout { display: flex; gap: 35px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.sopa-grid { display: grid; gap: 2px; user-select: none; touch-action: none; background: rgba(150,111,63,0.15); padding: 4px; border-radius: 12px; }
.sopa-cell {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: var(--blanco); font-weight: 700; font-size: 0.95rem; color: var(--texto);
    border-radius: 4px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sopa-cell.selecting { background: rgba(150,111,63,0.35); }
.sopa-cell.encontrada { background: var(--acento); color: #fff; }
.palabras-buscar { list-style: none; margin: 0; padding: 0; min-width: 200px; text-align: left; }
.palabras-buscar li { padding: 8px 0; font-weight: 600; color: var(--texto); border-bottom: 1px dashed rgba(150,111,63,0.2); transition: 0.2s; }
.palabras-buscar li.encontrada { color: var(--acento); text-decoration: line-through; opacity: 0.6; }
@media (max-width: 640px) { .sopa-cell { width: 24px; height: 24px; font-size: 0.75rem; } }

/* --- Verdadero o Falso --- */
.vf-progreso { font-size: 0.85rem; opacity: 0.7; margin-bottom: 10px; }
.vf-timer-track { width: 100%; height: 6px; background: rgba(150,111,63,0.15); border-radius: 10px; overflow: hidden; margin-bottom: 25px; }
.vf-timer-bar { height: 100%; background: var(--acento); width: 100%; transition: width 0.1s linear; }
.vf-afirmacion { font-size: 1.3rem; font-family: 'Playfair Display', serif; color: var(--primario); margin: 20px 0 30px; line-height: 1.5; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.vf-botones { display: flex; gap: 18px; justify-content: center; margin-bottom: 20px; }
.vf-btn { flex: 1; max-width: 180px; padding: 20px; border-radius: 16px; border: none; font-size: 1.15rem; font-weight: 700; cursor: pointer; color: #fff; transition: 0.25s; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vf-btn.verdadero { background: #4CAF50; }
.vf-btn.falso { background: #c0392b; }
.vf-btn:hover:not(:disabled) { transform: translateY(-3px); }
.vf-btn:disabled { opacity: 0.5; cursor: default; }
.vf-feedback { padding: 16px 20px; border-radius: 14px; font-size: 0.95rem; text-align: left; display: none; }
.vf-feedback.show { display: block; animation: fadeUp 0.4s; }
.vf-feedback.correcto { background: rgba(76,175,80,0.12); color: #2e7d32; }
.vf-feedback.incorrecto { background: rgba(192,57,43,0.1); color: #c0392b; }
body.dark-mode .vf-feedback.correcto { background: rgba(76,175,80,0.18); color: #81c784; }
body.dark-mode .vf-feedback.incorrecto { background: rgba(192,57,43,0.18); color: #e57373; }
.vf-feedback strong { display: block; margin-bottom: 4px; }

/* --- Crucigrama --- */
.crucigrama-layout { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.crossword-grid { display: grid; gap: 1px; background: rgba(150,111,63,0.15); border-radius: 8px; overflow: hidden; }
.cw-cell { position: relative; width: 30px; height: 30px; background: var(--blanco); }
.cw-cell.black { background: transparent; }
.cw-cell input {
    width: 100%; height: 100%; border: none; background: transparent; text-align: center;
    font-size: 1rem; font-weight: 700; color: var(--texto); text-transform: uppercase; padding: 0;
}
.cw-cell input:focus { outline: 2px solid var(--acento); outline-offset: -2px; }
.cw-cell.correcta input { color: #2e7d32; }
.cw-cell.incorrecta input { color: #c0392b; }
.cw-number { position: absolute; top: 1px; left: 2px; font-size: 0.55rem; font-weight: 700; color: var(--acento); pointer-events: none; }
.cw-cell.resaltada { background: rgba(150,111,63,0.18); }
.clues-columns { display: flex; gap: 30px; min-width: 220px; }
.clues-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.clues-list h4 { font-family: 'Playfair Display', serif; color: var(--primario); margin: 0 0 10px; }
.clues-list li { font-size: 0.85rem; padding: 5px 0; cursor: pointer; color: var(--texto); }
.clues-list li:hover, .clues-list li.activa { color: var(--acento); font-weight: 700; }
.clues-list li span { font-weight: 700; margin-right: 4px; }
@media (max-width: 640px) { .cw-cell { width: 22px; height: 22px; } .cw-cell input { font-size: 0.8rem; } }