/* Sudoku Game Styles */

body {
  background: #090714 url('bg.jpg') center/cover no-repeat;
}

.start-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.title-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(124, 108, 255, 0.45));
  animation: floatHero 3s ease-in-out infinite alternate;
}

@keyframes floatHero {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-6px) scale(1.03); }
}

.subtitle {
  margin: -6px 0 8px;
  color: #a5b4fc;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.diff-select {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 260px;
  margin: 8px auto 0;
}

.diff-btn {
  width: 100%;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  padding: 0.8rem 1.5rem;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.1s ease, filter 0.15s ease;
}

.diff-btn:hover {
  filter: brightness(1.1);
}

.diff-btn.easy {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.diff-btn.medium {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.diff-btn.hard {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.diff-btn.evil {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}