/* ==========================================================================
   skin-bento.css — WINAMP 2026 — Bento Skin
   Warm analog equipment, Japanese hi-fi aesthetics, amber VU meters.
   Think vintage Nakamichi tape decks, warm tube amplifiers, premium
   wood-grain stereo equipment. Cozy, organic, analog.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframe Animations
   -------------------------------------------------------------------------- */

@keyframes bento-warmth {
  0%, 100% {
    box-shadow:
      inset 0 1px 4px rgba(0, 0, 0, 0.6),
      inset 0 0 12px rgba(0, 0, 0, 0.3),
      inset 0 0 20px rgba(218, 165, 32, 0.04);
  }
  50% {
    box-shadow:
      inset 0 1px 4px rgba(0, 0, 0, 0.6),
      inset 0 0 12px rgba(0, 0, 0, 0.3),
      inset 0 0 28px rgba(218, 165, 32, 0.08);
  }
}

@keyframes bento-sheen {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes bento-vu-pulse {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(218, 165, 32, 0.4),
      0 0 20px rgba(218, 165, 32, 0.15),
      inset 0 0 10px rgba(218, 165, 32, 0.08);
  }
  50% {
    box-shadow:
      0 0 12px rgba(218, 165, 32, 0.55),
      0 0 28px rgba(218, 165, 32, 0.25),
      inset 0 0 14px rgba(218, 165, 32, 0.12);
  }
}

/* --------------------------------------------------------------------------
   1. Player Container — Warm dark wood-grain texture
   -------------------------------------------------------------------------- */

body.bento-active .player {
  background:
    /* Wood-grain: thin horizontal lines with slight color variation */
    repeating-linear-gradient(
      180deg,
      rgba(80, 48, 20, 0.06) 0px,
      rgba(60, 34, 14, 0.04) 1px,
      transparent 1px,
      transparent 3px,
      rgba(90, 54, 24, 0.05) 3px,
      rgba(70, 40, 18, 0.03) 4px,
      transparent 4px,
      transparent 7px
    ),
    /* Base mahogany undertone */
    linear-gradient(
      180deg,
      #1e1510 0%,
      #1a1310 50%,
      #16110e 100%
    );
  border-color: rgba(160, 110, 60, 0.25);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(180, 120, 40, 0.04),
    inset 0 1px 0 rgba(200, 150, 80, 0.06);
}

/* --------------------------------------------------------------------------
   2. Title Bar — Brushed copper/bronze gradient
   -------------------------------------------------------------------------- */

body.bento-active .title-bar {
  background: linear-gradient(
    180deg,
    #2a1e16 0%,
    #221812 40%,
    #1c1410 60%,
    #181210 100%
  );
  border-bottom-color: rgba(160, 110, 60, 0.2);
  position: relative;
  overflow: hidden;
}

/* Warm metallic sheen sweep */
body.bento-active .title-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 150, 80, 0.03) 35%,
    rgba(220, 170, 100, 0.07) 50%,
    rgba(200, 150, 80, 0.03) 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: bento-sheen 10s ease-in-out infinite;
  pointer-events: none;
}

/* Title text — warm amber */
body.bento-active .title-bar-text {
  color: #d4a040;
  text-shadow:
    0 0 6px rgba(218, 165, 32, 0.5),
    0 0 12px rgba(218, 165, 32, 0.2);
}

body.bento-active .title-bar-logo {
  color: #d4a040;
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.5);
}

/* Chrome dots — warm amber LED indicators */
body.bento-active .chrome-dot {
  background: radial-gradient(
    circle at 40% 35%,
    #e8b840 0%,
    #c89030 50%,
    #8a6020 100%
  );
  border-color: rgba(200, 150, 60, 0.3);
  box-shadow:
    0 0 4px rgba(218, 165, 32, 0.35),
    0 0 8px rgba(218, 165, 32, 0.15);
}

/* --------------------------------------------------------------------------
   3. LCD Section — Amber/orange phosphor VU meter aesthetic
   -------------------------------------------------------------------------- */

body.bento-active .lcd-section {
  background: #0e0a06;
  animation: bento-warmth 5s ease-in-out infinite;
}

/* Warm vignette overlay */
body.bento-active .lcd-section::before {
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 55%,
    rgba(10, 6, 2, 0.2) 100%
  );
}

/* Softer scanlines — vintage LCD style, not harsh CRT */
body.bento-active .lcd-section::after,
body.bento-active .lcd-scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.03) 3px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* LCD text — warm amber phosphor */
body.bento-active .lcd-time {
  color: #e8a830;
  text-shadow:
    0 0 6px rgba(232, 168, 48, 0.6),
    0 0 14px rgba(232, 168, 48, 0.4),
    0 0 30px rgba(232, 168, 48, 0.15);
}

body.bento-active .lcd-samplerate,
body.bento-active .lcd-bitrate {
  color: rgba(200, 140, 40, 0.5);
  text-shadow: 0 0 4px rgba(200, 140, 40, 0.15);
}

body.bento-active .lcd-marquee {
  color: #e8a830;
  text-shadow:
    0 0 4px rgba(232, 168, 48, 0.5),
    0 0 10px rgba(232, 168, 48, 0.2);
}

body.bento-active .lcd-badge {
  color: rgba(180, 120, 40, 0.35);
}

body.bento-active .lcd-badge.is-active {
  color: #e8a830;
  text-shadow:
    0 0 4px rgba(232, 168, 48, 0.5),
    0 0 10px rgba(232, 168, 48, 0.35),
    0 0 20px rgba(232, 168, 48, 0.15);
}

body.bento-active .lcd-badge.is-active::before {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(232, 168, 48, 0.15) 0%,
    transparent 70%
  );
}

/* --------------------------------------------------------------------------
   4. Transport Buttons — Warm dark metallic, copper/bronze
   -------------------------------------------------------------------------- */

body.bento-active .transport-btn {
  background: linear-gradient(
    180deg,
    #2a2018 0%,
    #1e1610 40%,
    #1a1410 100%
  );
  border-color: rgba(140, 100, 50, 0.25);
  color: rgba(200, 170, 130, 0.6);
  /* Warm highlight on top edge for physical feel */
  box-shadow: inset 0 1px 0 rgba(200, 150, 80, 0.1);
}

body.bento-active .transport-btn:hover {
  border-color: rgba(218, 165, 32, 0.5);
  color: #d4a040;
  box-shadow:
    inset 0 1px 0 rgba(200, 150, 80, 0.12),
    0 0 8px rgba(218, 165, 32, 0.2);
}

body.bento-active .transport-btn:active {
  background: #141010;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Play button — warm amber emphasis */
body.bento-active .transport-btn.play-btn {
  border-color: rgba(218, 165, 32, 0.35);
  color: #d4a040;
}

body.bento-active .transport-btn.play-btn .play-icon {
  fill: #d4a040;
}

body.bento-active .transport-btn.play-btn:hover {
  border-color: rgba(218, 165, 32, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(200, 150, 80, 0.12),
    0 0 12px rgba(218, 165, 32, 0.3);
}

/* Active playing state — VU meter amber pulse */
body.bento-active .transport-btn.play-btn.is-playing {
  color: #e8b840;
  background: linear-gradient(
    180deg,
    rgba(50, 36, 16, 0.9) 0%,
    #1a1410 100%
  );
  border-color: rgba(218, 165, 32, 0.5);
  animation: bento-vu-pulse 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   5. EQ Sliders — Wood-toned track, copper/gold thumb
   -------------------------------------------------------------------------- */

body.bento-active .eq-panel {
  background: #161110;
  border-top-color: rgba(140, 100, 50, 0.15);
}

body.bento-active .eq-title {
  color: #d4a040;
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.2);
}

body.bento-active .eq-preset-select {
  color: #d4a040;
  background-color: #0e0a06;
  border-color: rgba(140, 100, 50, 0.2);
  text-shadow: 0 0 4px rgba(218, 165, 32, 0.2);
  background-image:
    linear-gradient(45deg, transparent 50%, #a07828 50%),
    linear-gradient(135deg, #a07828 50%, transparent 50%);
}

body.bento-active .eq-preset-select option {
  background: #0e0a06;
  color: #d4a040;
}

/* Warm dark wood-toned track */
body.bento-active .eq-slider {
  background: #0c0806;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Copper/gold metallic thumb — WebKit */
body.bento-active .eq-slider::-webkit-slider-thumb {
  background: linear-gradient(
    0deg,
    #6a4820 0%,
    #a07830 20%,
    #d4a850 48%,
    #8a6428 52%,
    #b08838 80%,
    #6a4820 100%
  );
  border-color: rgba(60, 40, 15, 0.5);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

body.bento-active .eq-slider::-webkit-slider-thumb:hover {
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(218, 165, 32, 0.35);
}

body.bento-active .eq-slider:active::-webkit-slider-thumb {
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(218, 165, 32, 0.5),
    0 0 20px rgba(218, 165, 32, 0.2);
}

/* Copper/gold metallic thumb — Firefox */
body.bento-active .eq-slider::-moz-range-thumb {
  background: linear-gradient(
    0deg,
    #6a4820 0%,
    #a07830 20%,
    #d4a850 48%,
    #8a6428 52%,
    #b08838 80%,
    #6a4820 100%
  );
  border-color: rgba(60, 40, 15, 0.5);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

body.bento-active .eq-slider::-moz-range-thumb:hover {
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(218, 165, 32, 0.35);
}

body.bento-active .eq-slider:active::-moz-range-thumb {
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(218, 165, 32, 0.5),
    0 0 20px rgba(218, 165, 32, 0.2);
}

/* EQ band label hover */
body.bento-active .eq-band:hover label {
  color: #d4a040;
}

/* --------------------------------------------------------------------------
   6. Visualizer — Warm amber inner glow, softer vignette
   -------------------------------------------------------------------------- */

body.bento-active .viz-container {
  background: #080604;
}

body.bento-active .viz-container::before {
  box-shadow:
    inset 0 0 12px rgba(218, 165, 32, 0.06),
    inset 0 0 3px rgba(0, 0, 0, 0.5);
}

body.bento-active .viz-container.is-expanded::before {
  box-shadow:
    inset 0 0 24px rgba(218, 165, 32, 0.08),
    inset 0 0 5px rgba(0, 0, 0, 0.5);
}

body.bento-active .player.theater-mode .viz-container::before {
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.4),
    inset 0 0 24px rgba(218, 165, 32, 0.06);
}

body.bento-active .viz-mode-btn.active {
  color: #d4a040;
  border-color: rgba(218, 165, 32, 0.4);
  box-shadow: 0 0 6px rgba(218, 165, 32, 0.15);
}

/* --------------------------------------------------------------------------
   7. Feature Bar — Warm dark wood undertone, amber active glow
   -------------------------------------------------------------------------- */

body.bento-active .feature-bar {
  background:
    repeating-linear-gradient(
      180deg,
      rgba(80, 48, 20, 0.03) 0px,
      transparent 1px,
      transparent 4px
    ),
    #141010;
  border-top-color: rgba(140, 100, 50, 0.15);
}

body.bento-active .feature-btn:hover {
  color: rgba(200, 170, 130, 0.8);
  background: rgba(180, 120, 40, 0.04);
}

body.bento-active .feature-btn.is-active {
  color: #d4a040;
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.4);
}

/* Active underline — amber/gold glow */
body.bento-active .feature-btn.is-active::after {
  background: #d4a040;
  box-shadow: 0 0 6px rgba(218, 165, 32, 0.5);
}

/* --------------------------------------------------------------------------
   8. Playlist — Warm paper-like texture, amber playing indicator
   -------------------------------------------------------------------------- */

body.bento-active .playlist-panel {
  background:
    /* Very subtle warm horizontal lines — fine paper texture */
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 2px,
      rgba(160, 120, 60, 0.015) 2px,
      rgba(160, 120, 60, 0.015) 3px
    ),
    #0e0b08;
}

body.bento-active .playlist-header {
  background: #161110;
  border-bottom-color: rgba(140, 100, 50, 0.15);
}

body.bento-active .playlist-title {
  color: #d4a040;
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.2);
}

body.bento-active .playlist-action-btn {
  border-color: rgba(140, 100, 50, 0.2);
  color: rgba(200, 170, 130, 0.6);
}

body.bento-active .playlist-action-btn:hover {
  color: #d4a040;
  border-color: rgba(180, 130, 50, 0.35);
  background: rgba(180, 120, 40, 0.05);
}

/* Warmer hover highlight on tracks */
body.bento-active .playlist-track:hover {
  background: rgba(180, 120, 40, 0.05);
}

/* Currently playing — warm amber highlight */
body.bento-active .playlist-track.is-playing {
  background: rgba(218, 165, 32, 0.06);
}

/* Amber left bar with soft glow */
body.bento-active .playlist-track.is-playing::before {
  background: #d4a040;
  box-shadow:
    0 0 6px rgba(218, 165, 32, 0.5),
    0 0 12px rgba(218, 165, 32, 0.2);
}

body.bento-active .playlist-track.is-playing .track-title {
  color: #e8b840;
  text-shadow: 0 0 6px rgba(218, 165, 32, 0.2);
}

/* Warm amber scrollbar */
body.bento-active .playlist-tracks::-webkit-scrollbar-thumb {
  background: rgba(218, 165, 32, 0.2);
}

body.bento-active .playlist-tracks::-webkit-scrollbar-thumb:hover {
  background: rgba(218, 165, 32, 0.35);
}

body.bento-active .playlist-tracks {
  scrollbar-color: rgba(218, 165, 32, 0.2) rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   9. Seek Bar — Amber fill, gold-tinted thumb
   -------------------------------------------------------------------------- */

body.bento-active .seek-bar {
  background: #0c0806;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

body.bento-active .seek-fill {
  background: linear-gradient(
    90deg,
    #b08030 0%,
    #d4a040 100%
  );
  box-shadow: 0 0 8px rgba(218, 165, 32, 0.35);
}

body.bento-active .seek-thumb {
  background: linear-gradient(
    180deg,
    #d4a850 0%,
    #b08838 50%,
    #8a6428 100%
  );
  border-color: rgba(60, 40, 15, 0.5);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

body.bento-active .seek-bar:hover .seek-thumb {
  box-shadow:
    0 0 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(218, 165, 32, 0.4);
}

body.bento-active .seek-time {
  color: rgba(200, 170, 130, 0.4);
}

/* --------------------------------------------------------------------------
   Horizontal sliders (volume, etc.) — warm styling
   -------------------------------------------------------------------------- */

body.bento-active .styled-slider::-webkit-slider-runnable-track {
  background: #0c0806;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

body.bento-active .styled-slider::-moz-range-track {
  background: #0c0806;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

body.bento-active .styled-slider::-webkit-slider-thumb {
  background: linear-gradient(
    180deg,
    #d4a850 0%,
    #b08838 50%,
    #8a6428 100%
  );
  border-color: rgba(60, 40, 15, 0.5);
}

body.bento-active .styled-slider::-webkit-slider-thumb:hover {
  box-shadow:
    0 0 4px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(218, 165, 32, 0.35);
}

body.bento-active .styled-slider::-moz-range-thumb {
  background: linear-gradient(
    180deg,
    #d4a850 0%,
    #b08838 50%,
    #8a6428 100%
  );
  border-color: rgba(60, 40, 15, 0.5);
}

body.bento-active .styled-slider::-moz-range-thumb:hover {
  box-shadow:
    0 0 4px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(218, 165, 32, 0.35);
}

/* Slider value readout — amber */
body.bento-active .slider-value {
  color: #d4a040;
  text-shadow: 0 0 6px rgba(218, 165, 32, 0.2);
}

/* --------------------------------------------------------------------------
   FX Panel — Warm wood undertone
   -------------------------------------------------------------------------- */

body.bento-active .fx-panel {
  background: #141010;
  border-top-color: rgba(140, 100, 50, 0.15);
}

body.bento-active .fx-title {
  color: #d4a040;
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.2);
}

body.bento-active .fx-btn {
  border-color: rgba(140, 100, 50, 0.2);
  color: rgba(200, 170, 130, 0.45);
}

body.bento-active .fx-btn:hover {
  color: rgba(200, 170, 130, 0.8);
  border-color: rgba(180, 130, 50, 0.35);
}

body.bento-active .fx-btn[aria-pressed="true"] {
  color: #d4a040;
  border-color: rgba(218, 165, 32, 0.4);
  box-shadow: 0 0 8px rgba(218, 165, 32, 0.15);
  text-shadow: 0 0 6px rgba(218, 165, 32, 0.3);
}

body.bento-active .fx-btn[aria-pressed="true"]::after {
  background: #d4a040;
  box-shadow: 0 0 4px rgba(218, 165, 32, 0.4);
}

/* --------------------------------------------------------------------------
   Player grip — warm tint
   -------------------------------------------------------------------------- */

body.bento-active .player-grip {
  background: #141010;
}

body.bento-active .player-grip span {
  background: rgba(160, 110, 60, 0.2);
}

/* --------------------------------------------------------------------------
   Drop overlay — amber accent
   -------------------------------------------------------------------------- */

body.bento-active .drop-overlay-content {
  color: #d4a040;
  text-shadow:
    0 0 10px rgba(218, 165, 32, 0.5),
    0 0 30px rgba(218, 165, 32, 0.2);
}

body.bento-active .drop-overlay-icon {
  color: #d4a040;
}

body.bento-active .drop-prompt-icon {
  color: #d4a040;
}

/* --------------------------------------------------------------------------
   Mobile nav — warm styling
   -------------------------------------------------------------------------- */

@media (max-width: 540px) {
  body.bento-active .mobile-nav {
    background: #141010;
    border-top-color: rgba(140, 100, 50, 0.15);
  }

  body.bento-active .mobile-nav-btn.is-active {
    color: #d4a040;
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.4);
  }

  body.bento-active .mobile-nav-btn.is-active::after {
    background: #d4a040;
    box-shadow: 0 0 6px rgba(218, 165, 32, 0.5);
  }
}

/* --------------------------------------------------------------------------
   10. Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.bento-active .lcd-section,
  body.bento-active .title-bar::after,
  body.bento-active .transport-btn.play-btn.is-playing,
  body.bento-active .playlist-track.is-playing::before {
    animation: none;
  }

  body.bento-active .lcd-section {
    box-shadow:
      inset 0 1px 4px rgba(0, 0, 0, 0.6),
      inset 0 0 12px rgba(0, 0, 0, 0.3),
      inset 0 0 20px rgba(218, 165, 32, 0.05);
  }

  body.bento-active .transport-btn.play-btn.is-playing {
    box-shadow:
      0 0 8px rgba(218, 165, 32, 0.4),
      0 0 20px rgba(218, 165, 32, 0.15),
      inset 0 0 10px rgba(218, 165, 32, 0.08);
  }
}