/* MIGRATED TO TAILWIND - Action button styles
   Buttons now use Tailwind classes in index.html:
   - Container: grid grid-cols-4 gap-3 mt-6 w-full
   - Buttons: bg-{color}-100 hover:bg-{color}-200 dark:bg-{color}-900/40
   - Typography: font-semibold py-3 rounded-xl
   - Interactions: hover:scale-105 active:scale-95
   
.action-buttons {
  display: none;
  width: 100%;
  max-width: 500px;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-buttons.visible {
  display: flex;
}

.action-btn {
  flex: 1;
  min-width: 100px;
  padding: 14px 16px;
  font-size: 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  font-weight: 500;
}

.btn-again {
  background-color: #FF6B6B;
  color: white;
}

.btn-again:hover {
  background-color: #EE5A5A;
}

.btn-hard {
  background-color: #FFA500;
  color: white;
}

.btn-hard:hover {
  background-color: #E69400;
}

.btn-good {
  background-color: #4A90E2;
  color: white;
}

.btn-good:hover {
  background-color: #357ABD;
}

.btn-easy {
  background-color: #51CF66;
  color: white;
}

.btn-easy:hover {
  background-color: #40B555;
}
*/