/* ============================================================
   CRASH PALETTE OVERRIDES v1.0
   Applies CRASH's yellow/magenta color scheme to:
   - Audio controls panel
   - Guestbook (already in JS, this is backup/enhancement)
   
   CRASH Palette:
   - Primary: #ffe500 (yellow), #ffd700 (gold)
   - Secondary: #ff00ff (magenta), #cc0088 (muted), #990066 (dark)
   - Background: #0a0a12, rgba(13, 10, 20, 0.95)
============================================================ */

/* ============================================================
   AUDIO CONTROL PANEL - CRASH PALETTE
============================================================ */
#controlPanel {
  background: rgba(13, 10, 20, 0.95);
  border: 1px solid #990066;
  box-shadow: 
    0 0 20px rgba(204, 0, 136, 0.2),
    inset 0 0 30px rgba(255, 0, 255, 0.02);
}

#controlPanel:hover {
  border-color: #cc0088;
  box-shadow: 
    0 0 30px rgba(204, 0, 136, 0.3),
    inset 0 0 30px rgba(255, 0, 255, 0.04);
}

/* Track display */
#trackScroll {
  color: #ffe500;
  text-shadow: 0 0 8px rgba(255, 229, 0, 0.6);
  border-bottom: 1px solid rgba(204, 0, 136, 0.3);
}

/* Control buttons */
#controlsRow button {
  background: rgba(204, 0, 136, 0.1);
  border: 1px solid #990066;
  color: #ffe500;
  text-shadow: 0 0 6px rgba(255, 229, 0, 0.5);
  box-shadow: 0 0 8px rgba(204, 0, 136, 0.2);
}

#controlsRow button:hover {
  background: rgba(204, 0, 136, 0.2);
  border-color: #cc0088;
  box-shadow: 0 0 14px rgba(204, 0, 136, 0.4);
}

#controlsRow button:active {
  background: rgba(204, 0, 136, 0.25);
}

/* Labels */
.control-label {
  color: rgba(204, 0, 136, 0.7);
  text-shadow: 0 0 6px rgba(204, 0, 136, 0.4);
}

/* Volume display */
#volumeValue {
  color: #ffe500;
  text-shadow: 0 0 6px rgba(255, 229, 0, 0.5);
}

/* Volume slider */
#volumeSlider {
  background: rgba(204, 0, 136, 0.2);
}

#volumeSlider::-webkit-slider-thumb {
  background: #ffe500;
  box-shadow: 0 0 8px rgba(255, 229, 0, 0.5);
}

#volumeSlider::-moz-range-thumb {
  background: #ffe500;
  box-shadow: 0 0 8px rgba(255, 229, 0, 0.5);
}

#volumeSlider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #990066, #cc0088);
}

#volumeSlider::-moz-range-track {
  background: linear-gradient(to right, #990066, #cc0088);
}

/* ============================================================
   AUDIO VISUALIZER - CRASH PALETTE
============================================================ */
#viz {
  filter: 
    drop-shadow(0 0 10px rgba(255, 229, 0, 0.4))
    drop-shadow(0 0 30px rgba(204, 0, 136, 0.3))
    drop-shadow(0 0 60px rgba(255, 0, 255, 0.15)) !important;
}

/* ============================================================
   TRUST INDICATOR - CRASH PALETTE
============================================================ */
#trustIndicator {
  border-color: #990066;
  background: rgba(13, 10, 20, 0.9);
}

#trustIndicator:hover {
  border-color: #cc0088;
}

#trustValue {
  color: #ffe500;
  text-shadow: 0 0 6px rgba(255, 229, 0, 0.5);
}

/* ============================================================
   CORRUPTION METER - CRASH PALETTE ENHANCEMENT
============================================================ */
#corruptionMeter {
  color: #ffe500;
}

/* ============================================================
   GHOST MENU - CRASH PALETTE
============================================================ */
.ghost-menu {
  background: rgba(13, 10, 20, 0.98);
  border: 1px solid #cc0088;
  box-shadow: 
    0 0 20px rgba(204, 0, 136, 0.4),
    inset 0 0 30px rgba(255, 0, 255, 0.03);
}

.ghost-menu-btn {
  background: rgba(204, 0, 136, 0.1);
  border: 1px solid #990066;
  color: #ffe500;
  text-shadow: 0 0 6px rgba(255, 229, 0, 0.4);
  box-shadow: 0 0 8px rgba(204, 0, 136, 0.2);
}

.ghost-menu-btn:hover {
  background: rgba(204, 0, 136, 0.2);
  border-color: #cc0088;
  box-shadow: 0 0 12px rgba(204, 0, 136, 0.4);
  color: #fff066;
}

.ghost-menu-btn .menu-label {
  color: #ffe500;
}

.ghost-menu-btn .menu-hint {
  color: rgba(204, 0, 136, 0.6);
}

.ghost-menu-btn:hover .menu-hint {
  color: rgba(204, 0, 136, 0.8);
}

/* ============================================================
   LINK BAR - CRASH PALETTE ACCENT
============================================================ */
#linkBar .link-btn {
  border-color: #990066;
}

#linkBar .link-btn:hover {
  border-color: #cc0088;
  box-shadow: 0 0 15px rgba(204, 0, 136, 0.4);
}

#linkBar .link-btn.hot {
  border-color: #cc0088;
  background: rgba(204, 0, 136, 0.1);
}

#linkBar .link-btn.hot:hover {
  background: rgba(204, 0, 136, 0.2);
  box-shadow: 0 0 20px rgba(204, 0, 136, 0.5);
}

/* ============================================================
   SCROLLBAR - CRASH PALETTE
============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(13, 10, 20, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(204, 0, 136, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(204, 0, 136, 0.6);
}

/* ============================================================
   ACHIEVEMENT POPUP - CRASH PALETTE
============================================================ */
.achievement-popup {
  background: rgba(13, 10, 20, 0.98) !important;
  border: 2px solid #cc0088 !important;
  box-shadow: 
    0 0 40px rgba(204, 0, 136, 0.4),
    0 0 80px rgba(255, 0, 255, 0.2),
    inset 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

.achievement-icon {
  text-shadow: 
    0 0 10px #ffe500,
    0 0 30px #ffe500 !important;
  filter: drop-shadow(0 0 10px rgba(255, 229, 0, 0.6));
}

.achievement-title {
  color: #ffe500 !important;
}

.achievement-desc {
  color: rgba(204, 0, 136, 0.8) !important;
}

/* ============================================================
   MOBILE OVERRIDES - CRASH PALETTE
============================================================ */
@media (max-width: 768px) {
  #controlPanel {
    border-color: #990066;
  }
  
  body.is-mobile .music-btn {
    background: rgba(204, 0, 136, 0.1);
    border-color: #990066;
    color: #ffe500;
  }
  
  body.is-mobile .music-btn:hover {
    background: rgba(204, 0, 136, 0.2);
    border-color: #cc0088;
  }
}

/* ============================================================
   SWIPE FEEDBACK - CRASH PALETTE
============================================================ */
#swipeFeedback {
  border-color: #ffe500;
  color: #ffe500;
  text-shadow: 0 0 10px #ffe500;
  box-shadow: 
    0 0 20px rgba(255, 229, 0, 0.4),
    0 0 40px rgba(204, 0, 136, 0.3);
}