/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Choice Difficulty Styles - Sprint 3
 * Styles for choice difficulty indicators
 */

/* ============================================
   DIFFICULTY BADGE
   ============================================ */

.difficulty-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 0.5rem;
    letter-spacing: 0.5px;

.difficulty-badge-easy {
    background: var(--color-success, #5cb85c);
    color: white;

.difficulty-badge-medium {
    background: var(--color-warning, #ffc107);
    color: #000;

.difficulty-badge-hard {
    background: var(--color-danger, #f44336);
    color: white;

.difficulty-badge-extreme {
    background: var(--color-danger, #d32f2f);
    color: white;
    animation: extremePulse 2s infinite;

@keyframes extremePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7);

    50% {
        opacity: 0.9;
        box-shadow: 0 0 0 4px rgba(211, 47, 47, 0);

/* ============================================
   CHOICE BUTTON WITH DIFFICULTY
   ============================================ */

.choice-btn .difficulty-badge,
.player-choice-btn .difficulty-badge,
[data-choice] .difficulty-badge {
    vertical-align: middle;

/* ============================================
   RESPECT REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .difficulty-badge-extreme {
        animation: none;

}}}}}}}}}}}