/* =========================================================
   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:.75rem;
  box-shadow:0 2px .3125rem rgba(0,0,0,.1);font-size:.9rem;max-width:71.25rem;text-align:left;
}

/* ===== Caja de "Ayuda rápida" ===== */
.ayuda-botones{max-width:71.25rem;margin:0 auto 1.875rem auto;padding:.625rem .75rem;color:#334;font-size:.92rem;}
.ayuda-botones ul{margin:.375rem 0 0 1.125rem;}

/* ===== Animación de aparición (scroll-in) ===== */
.fade-in{opacity:0;transform:translateY(1rem);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:.75rem;box-shadow:0 2px .3125rem rgba(0,0,0,.1);padding:.875rem;}
.panel h3{margin:.375rem 0 .625rem 0;color:#003366;font-size:1.05rem;}

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

/* ===== Botones e inputs genéricos de los juegos ===== */
.btn,.input{border:1px solid #cfd9ea;background:#fff;border-radius:.5rem;padding:.625rem .75rem;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:.5rem;text-align:left;word-break:break-word;}

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

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