/* =========================================================
   juegos-common.css
   Estilos compartidos por todos los juegos de designtech.uy
   (2048, ajedrez, buscaminas, crucigrama, mahjong, snake,
   solitario, sudoku).
   Cada juego conserva en su propio <style> SOLO lo que le es
   específico (tablero, piezas, colores propios del juego).
   ========================================================= */

/* ===== Caja de título / intro de cada juego ===== */
.seccion-titulo{
  background:#fff;color:#000;padding:1.5rem 2rem;margin:1.5rem auto;border-radius:12px;
  box-shadow:0 2px 5px rgba(0,0,0,.1);font-size:.9rem;max-width:1140px;text-align:left;
}

/* ===== Caja de "Ayuda rápida" ===== */
.ayuda-botones{max-width:1140px;margin:0 auto 30px auto;padding:10px 12px;color:#334;font-size:.92rem;}
.ayuda-botones ul{margin:6px 0 0 18px;}

/* ===== Animación de aparición (scroll-in) ===== */
.fade-in{opacity:0;transform:translateY(16px);animation:fadeInUp .6s ease forwards;}
@keyframes fadeInUp{ to{opacity:1;transform:translateY(0);} }

/* ===== Panel/tarjeta blanca genérica (tablero, ranking, etc.) ===== */
.panel{background:#fff;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.1);padding:14px;}
.panel h3{margin:6px 0 10px 0;color:#003366;font-size:1.05rem;}

/* ===== Barra de estado (puntos, movimientos, tiempo, etc.) ===== */
.statusbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0 12px 0;color:#003366;font-size:.9rem;}

/* ===== Botones e inputs genéricos de los juegos ===== */
.btn,.input{border:1px solid #cfd9ea;background:#fff;border-radius:8px;padding:10px 12px;font-size:.95rem;cursor:pointer;}
.btn:hover{background:#f7faff;}
.btn.primary{background:#00449C;color:#fff;border-color:#00449C;}
.btn.primary:hover{filter:brightness(1.05);}
.btn.danger{background:#d9534f;color:#fff;border-color:#d9534f;}
.btn.danger:hover{filter:brightness(1.05);}

/* ===== Texto secundario ===== */
.muted{color:#7a8aa1;font-size:.88rem;}

/* ===== Tabla de ranking ===== */
table.rank{width:100%;border-collapse:collapse;font-size:.92rem;table-layout:fixed;}
table.rank th,table.rank td{border-bottom:1px solid #eee;padding:8px;text-align:left;word-break:break-word;}

/* ===== Wrapper del botón "Volver" ===== */
.volver-wrap{text-align:center;margin:22px 0;}

/* ===== Responsive: ajustes comunes en pantallas chicas ===== */
@media (max-width:600px){
  .panel{ padding:12px; }
  .controls{ gap:6px; }
  .btn,.input{ padding:9px 10px; font-size:.95rem; }
}