/**
 * Unified Slider System
 * Base classes with color variants via CSS variables
 * All slider styles in one place for easy maintenance
 */

/* ============================================
   BASE GAME SLIDER - Standard size (8px track, 20px thumb)
   ============================================ */
.game-slider {
    --slider-color: #4ecdc4;
    --slider-color-dark: #3dbdb5;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    background: linear-gradient(90deg, #1a1a2e 0%, var(--slider-color) 100%);
}
.game-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color), var(--slider-color-dark));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}
.game-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4);
}
.game-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color), var(--slider-color-dark));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
}

/* ============================================
   LARGE GAME SLIDER - Soul distribution size (16px track, 26px thumb)
   ============================================ */
.game-slider-lg {
    --slider-color: #4ecdc4;
    --slider-color-light: #44ffdd;
    --slider-color-dark: #3dbdb5;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    background: linear-gradient(90deg, #1a1a2e 0%, var(--slider-color) 50%, var(--slider-color-light) 100%);
}
.game-slider-lg::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color-light), var(--slider-color));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 3px solid #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}
.game-slider-lg::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 5px 10px rgba(0, 0, 0, 0.4);
}
.game-slider-lg::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color-light), var(--slider-color));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 3px solid #fff;
}

/* ============================================
   SLIDER COLOR VARIANTS
   ============================================ */
.slider-teal { --slider-color: #4ecdc4; --slider-color-light: #44ffdd; --slider-color-dark: #3dbdb5; }
.slider-amber { --slider-color: #f59e0b; --slider-color-light: #fbbf24; --slider-color-dark: #d97706; }
.slider-green { --slider-color: #22c55e; --slider-color-light: #4ade80; --slider-color-dark: #16a34a; }
.slider-red { --slider-color: #ff6b6b; --slider-color-light: #ff8e8e; --slider-color-dark: #e55555; }
.slider-gold { --slider-color: #ffd700; --slider-color-light: #ffec8b; --slider-color-dark: #ccac00; }
.slider-purple { --slider-color: #9b59b6; --slider-color-light: #c39bd3; --slider-color-dark: #7d4692; }

/* ============================================
   LEGACY CLASS ALIASES - For backwards compatibility
   ============================================ */

/* Training & City sliders (teal) */
.training-slider, .city-slider {
    --slider-color: #4ecdc4;
    --slider-color-dark: #3dbdb5;
}

/* Proficiency & Forge sliders (amber) */
.proficiency-slider, .forge-slider {
    --slider-color: #f59e0b;
    --slider-color-dark: #d97706;
}

/* Alchemy slider (green) */
.alchemy-slider {
    --slider-color: #22c55e;
    --slider-color-dark: #16a34a;
}

/* Intensity slider (uses parent color) */
.intensity-slider {
    --slider-color: #4ecdc4;
    --slider-color-dark: #3dbdb5;
}

/* Recruit slider (teal) */
.recruit-slider {
    --slider-color: #4ecdc4;
    --slider-color-dark: #3dbdb5;
}

/* Allocation slider (teal) */
.allocation-slider {
    --slider-color: #4ecdc4;
    --slider-color-dark: #3dbdb5;
}

/* Legacy slider base styles */
.training-slider, .city-slider, .proficiency-slider,
.intensity-slider, .alchemy-slider, .forge-slider,
.recruit-slider, .allocation-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    background: linear-gradient(90deg, #1a1a2e 0%, var(--slider-color) 100%);
}

.training-slider::-webkit-slider-thumb, .city-slider::-webkit-slider-thumb,
.proficiency-slider::-webkit-slider-thumb, .intensity-slider::-webkit-slider-thumb,
.alchemy-slider::-webkit-slider-thumb, .forge-slider::-webkit-slider-thumb,
.recruit-slider::-webkit-slider-thumb, .allocation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color), var(--slider-color-dark));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}

.training-slider::-webkit-slider-thumb:hover, .city-slider::-webkit-slider-thumb:hover,
.proficiency-slider::-webkit-slider-thumb:hover, .intensity-slider::-webkit-slider-thumb:hover,
.alchemy-slider::-webkit-slider-thumb:hover, .forge-slider::-webkit-slider-thumb:hover,
.recruit-slider::-webkit-slider-thumb:hover, .allocation-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4);
}

.training-slider::-moz-range-thumb, .city-slider::-moz-range-thumb,
.proficiency-slider::-moz-range-thumb, .intensity-slider::-moz-range-thumb,
.alchemy-slider::-moz-range-thumb, .forge-slider::-moz-range-thumb,
.recruit-slider::-moz-range-thumb, .allocation-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color), var(--slider-color-dark));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
}

/* ============================================
   SOUL SLIDER - Large slider for soul distribution
   ============================================ */
.soul-slider {
    --slider-color: #4ecdc4;
    --slider-color-light: #44ffdd;
}
.soul-slider.qi-slider {
    --slider-color: #4ecdc4;
    --slider-color-light: #44ffdd;
}
.soul-slider.body-slider {
    --slider-color: #ff6b6b;
    --slider-color-light: #ff8e8e;
}
.soul-slider.luck-slider {
    --slider-color: #ffd700;
    --slider-color-light: #ffec8b;
}
.soul-slider.talent-slider {
    --slider-color: #9b59b6;
    --slider-color-light: #c39bd3;
}

.soul-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    background: linear-gradient(90deg, #1a1a2e 0%, var(--slider-color) 50%, var(--slider-color-light) 100%);
}
.soul-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color-light), var(--slider-color));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 3px solid #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}
.soul-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 5px 10px rgba(0, 0, 0, 0.4);
}
.soul-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color-light), var(--slider-color));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 3px solid #fff;
}

/* ============================================
   INTERACTIVE CARD COMPONENTS
   ============================================ */

/* Mission Option Card (hover effect) */
.mission-option-card:hover {
    border-color: #4ecdc4 !important;
}

/* ============================================
   GAME CHECKBOX - Styled checkbox
   ============================================ */
.game-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #4ecdc4;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
.game-checkbox:hover {
    border-color: #5ee0d8;
    box-shadow: 0 0 8px rgba(78, 205, 196, 0.4);
}
.game-checkbox:checked {
    background: linear-gradient(135deg, #4ecdc4, #3dbdb5);
    border-color: #4ecdc4;
}
.game-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.game-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   RATE BUTTONS - Spirit Stone rate selection
   ============================================ */
.rate-btn {
    padding: 4px 8px;
    font-size: 0.75em;
    background: rgba(78, 205, 196, 0.2);
    border: 1px solid #4ecdc4;
    border-radius: 4px;
    color: #4ecdc4;
    cursor: pointer;
    transition: all 0.2s ease;
}
.rate-btn:hover {
    background: rgba(78, 205, 196, 0.4);
    box-shadow: 0 0 8px rgba(78, 205, 196, 0.4);
}
.rate-btn.active {
    background: linear-gradient(135deg, #4ecdc4, #3dbdb5);
    color: #1a1a2e;
    font-weight: bold;
}
.rate-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rate-btn-max {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
}
.rate-btn-max:hover {
    background: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.rate-btn-max.active {
    background: linear-gradient(135deg, #ffd700, #ccac00);
    color: #1a1a2e;
}

/* ============================================
   SLIDER CONTAINERS & LABELS
   ============================================ */

/* Workshop Intensity Container */
.workshop-intensity {
    margin: 12px 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}
.workshop-intensity label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9em;
}

/* Slider Labels (min/max indicators) */
.intensity-labels, .slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: #888;
    margin-top: 2px;
}