/* press-start-2p-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/press-start-2p-v16-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/press-start-2p-v16-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

body {
  background-color: #000033;
  color: #00ffcc;
  font-family: 'Press Start 2P', monospace;
  margin: 0;
  padding: 20px;
}

a {
  color: #ff00cc; /* hot magenta */
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}

a:hover {
  color: #00aaff; /* electric blue */
  text-shadow: 0 0 8px #00aaff, 0 0 15px #00ffff;
}

a:visited {
  color: #cc00ff; /* neon purple */
}

a:active {
  color: #ffffff;
  text-shadow: 0 0 8px #00ffcc, 0 0 15px #ff00cc;
}

body.dark-mode a {
  color: #3399ff; /* electric blue */
}

body.dark-mode a:hover {
  color: #ff3366; /* neon red */
  text-shadow: 0 0 6px #ff3366, 0 0 12px #ff0033;
}

body.dark-mode a:visited {
  color: #cc33ff; /* neon purple */
}

body.dark-mode a:active {
  color: #ffffff;
  text-shadow: 0 0 6px #3399ff, 0 0 12px #ff3366;
}


.music-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000044;
  padding: 10px;
  gap: 15px;
  border: 3px double #00ffcc;
  flex-wrap: wrap; /* allows stacking in small screens */
  max-width: 100%; /* 
  prevent oversized growth */
}

/* Album cover — original 150x150, scales down if needed */
.left-section img.album-cover {
  width: 150px;
  height: 150px;
  max-width: 100%;
  height: auto;
  border: 2px dashed #ffcc00;
  object-fit: cover;
}

/* Controls section stays flexible */
.controls-section {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.track-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
}

/* Progress bar container in light mode */
.progress-container {
  width: 100%;
  height: 8px;
  background-color: #181800; /* light mode button background */
  border: 1px solid #ffcc00; /* light mode button border */
  border-radius: 2px; /* retro sharp corner */
  overflow: hidden;
}

/* Progress bar fill in light mode */
.progress-bar {
  height: 100%;
  width: 0;
  background-color: #ffcc00; /* matches button border/text color */
}


/* Player controls container */
.player-controls {
  display: flex;
  flex-wrap: wrap; /* buttons wrap instead of shrinking */
  gap: 8px;
}

/* Player control buttons and sliders */
.player-controls button,
.player-controls input[type="range"] {
  font-family: inherit; /* keep same pixel/retro font */
  padding: 5px 8px;
  background: #181800;
  border: 1px solid #ffcc00;
  color: #ffcc00;
  cursor: pointer;
  font-size: 14px;
  
  /* ... existing styles ... */
  line-height: 1.2;
  vertical-align: middle;
}

.player-controls button {
  height:28px;
}
.player-controls input[type="range"] {
  flex: 1;
  height: 16px;
}


/* Tip buttons inside player controls */
.player-controls .tip-btn {
  padding: 5px 8px;
  background: #ff00cc; /* hot magenta */
  border: 1px solid #ffcc00; 
  color: #181800;
}

/* Hover/active states for light mode */
.player-controls .tip-btn:hover {
  background: #ff00cc; /* hot magenta */
 border: 1px solid #181800;
  color: #00aaff; /* electric blue */
  text-shadow: 0 0 10px #00aaff, 0 0 17px #00ffff;
}


/* GIF — original 172x150, scales down if needed */
.right-section {
  display: flex;
  align-items: center;
}

.right-section img {
  width: 172px;
  height: 150px;
  max-width: 100%;
  height: auto;
  border: 2px dashed #ffcc00;
  object-fit: cover;
}

.lists-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 20px;
}

.track-list, .queue-list, .poll {
  background: #111144;
  padding: 15px;
  border: 3px double #00ffcc;
  box-sizing: border-box;
}

/* Default: Large screens */
.track-list {
  flex: 0 0 56%;
}

.queue-list {
  flex: 0 0 42.1%;
}

.queue-list h2 {
  display: inline-block;
  margin: 0;
  margin-right: 8px;
  vertical-align: middle;
}

.queue-list button {
  background: transparent;
  color: inherit;
  border: 1px solid #00ffcc;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
}

#playlist-section {
  margin-top: 0;       /* remove the inline margin */
}

.queue-list h2 + #playlist-section {
  display: inline-flex;
  gap: 8px;
  vertical-align: middle;
}

.track {
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px dashed #ffcc00;
}

.track:hover {
  background: #222266;
}

/* Tabs / sort UI for track list (retro-friendly, scoped) */
.track-list h2 {
  display: inline-block;
  margin: 0;
  margin-right: 8px; /* a few pixels away from title */
  vertical-align: middle;
}

.track-list .track-controls {
  display: inline-flex;
  gap: 8px;
  vertical-align: middle;
  margin-left: 6px;
  align-items: center;
}

.track-list .mode-toggle {
  display: inline-flex;
  gap: 6px;
}

.track-list .mode-toggle button,
.track-list .track-tabs button,
.track-list .track-sort-btn {
  background: transparent;
  color: inherit;
  border: 1px solid #00ffcc;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
}

.track-list .mode-toggle button.active,
.track-list .track-tabs button.active {
  background: #00ffcc;
  color: #000;
  border-color: #00ffcc;
}

.track-list .track-sort-btn {
  border-color: #ffcc00;
  color: #ffcc00;
  margin-left: 6px;
}

.track-list .track-groups {
  margin-top: 10px;
}

/* keep per-track spacing consistent with your existing .track style */
.track-list .track-group .track {
  margin-bottom: 6px;
}


.track-selector {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.selector-btn {
  background: #ffcc00; /* yellow-gold like old terminal highlights */
  color: #000;
  font-weight: bold;
  font-family: inherit; /* keep same pixel/retro font */
  border: 2px solid #ffcc00; /* match your frame border color */
  border-bottom: none;
  padding: 4px 8px;
  padding-top: 5px;
  cursor: pointer;
  text-transform: uppercase;
}

.selector-btn.active {
  background: #00ffcc;
  border: 2px solid #00ffcc; /* match your frame border color */
  color: #000;
}

.selector-btn:hover {
  background: #ff00ff; /* magenta hover like old ANSI art */
  color: #000;
}

.sub-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.sub-tab {
  background: #4444aa; /* retro blue */
  color: cyan;
  border: 2px solid #4444aa;
  padding: 3px 6px;
  font-family: inherit;
  cursor: pointer;
}

.sub-tab:hover {
  background: #ff00ff; /* magenta hover like old ANSI art */
  color: #000;
}

.no-data {
  color: gray;
  font-style: normal;
  font-family: inherit;
}



.queue-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;      /* keep vertical padding */
  padding-left: 4px;   /* reduced left padding */
  border-bottom: 1px dashed #00ffcc;
}

.remove-btn {
  background: none;
  color: #ff0066;
  border: none;
  cursor: pointer;
} 

.queue-item.dragging {
  opacity: 0.5;
}

/* Also add styling for the <li> elements in the queue */
#queue li {
  cursor: move;
  user-select: none;
}

#queue li.dragging {
  opacity: 0.5;
  background: rgba(255, 204, 0, 0.2);
}

/* Poll always full width below, slim height */
.poll {
  flex: 0 0 100%;
  padding: 2px 16px; /* Less vertical padding for slim look */
}

/* Poll question - slim */
.poll .question {
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 4px 2px;
  border-bottom: 1px dashed #ffcc00;
  line-height: 1.3;
  margin-bottom: 8px;
}

/* Poll answers - SIDE BY SIDE */
.poll .answers {
  display: flex;
  gap: 10px;
  padding: 0;
  align-items: stretch;
}

.poll .answers .answer {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 1px;
  flex: 1; /* Equal width for all answers */
  padding: 5px 8px;
  line-height: 1.4;
  min-width: 0; /* Prevents overflow issues */
  display: flex;
  flex-direction: column;
  white-space: nowrap; /* Prevent text wrapping initially */
}

/* When answer is clicked/expanded, allow wrapping */
.poll .answers .answer.expanded {
  white-space: normal;
}

.poll .answers .answer.selected {
  border: 1px dashed #606a9c;
}

.poll .answers .answer span.percentage_value {
  text-align: right;
  padding-right: 2px;
  color: #b0050e;
}

.poll .answers .answer span.percentage_bar {
  display: block;
  width: 0%;
  height: 8px;
  background: #E6E6FA;
  transition: width 200ms ease-in-out;
  margin-top: 1px;
}

.player-controls button:disabled {
  background: #555522; /* muted dark yellow/olive */
  border-color: #999966;   /* soft, desaturated yellow border */
  color: #bbbb88;          /* pale yellow text */
  cursor: not-allowed;
  opacity: 0.7;            /* slight transparency for subtlety */
  pointer-events: none;
  box-shadow: none;        /* no glow */
  transition: none;
}

.submit-btn {
  background: transparent;
  color: inherit;
  border: 1px solid #00ffcc;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
}
body.dark-mode .submit-btn {
  background: #111122;
  color: #00ffaa;
  border-color: #00ffaa;
}
body.dark-mode .submit-btn:hover {
  color: #ffcc00;
  border-color: #ffcc00;
  text-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}
body.dark-mode .submit-btn:active {
  background: #00aaff;
  color: #000;
  border-color: #00ffaa;
}

/* ==================== VOLUME SLIDER STYLES ==================== */

/* Remove default styling */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px; /* Match button height */
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
}

/* LIGHT MODE - Track (the background bar) */
.volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #181800;
  border: 1px solid #ffcc00;
  border-radius: 2px;
  cursor: pointer;
}

.volume-slider::-moz-range-track {
  width: 100%;
  height: 8px;
  background: #181800;
  border: 1px solid #ffcc00;
  border-radius: 2px;
  cursor: pointer;
}

/* LIGHT MODE - Thumb (the draggable knob) */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #ffcc00;
  border: 2px solid #ffcc00;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  top: -4px; /* Center on track */
  box-shadow: 0 0 4px rgba(255, 204, 0, 0.5);
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #ffcc00;
  border: 2px solid #ffcc00;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255, 204, 0, 0.5);
}

/* LIGHT MODE - Hover effects */
.volume-slider:hover::-webkit-slider-thumb {
  background: #ffaa00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

.volume-slider:hover::-moz-range-thumb {
  background: #ffaa00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

/* LIGHT MODE - Active/Dragging state */
.volume-slider:active::-webkit-slider-thumb {
  background: #ff00cc;
  border-color: #ff00cc;
  box-shadow: 0 0 12px rgba(255, 0, 204, 0.9);
}

.volume-slider:active::-moz-range-thumb {
  background: #ff00cc;
  border-color: #ff00cc;
  box-shadow: 0 0 12px rgba(255, 0, 204, 0.9);
}

/* Add a subtle glow to the track when hovering over the slider */
.volume-slider:hover::-webkit-slider-runnable-track {
  box-shadow: inset 0 0 4px rgba(255, 204, 0, 0.3);
}

.volume-slider:hover::-moz-range-track {
  box-shadow: inset 0 0 4px rgba(255, 204, 0, 0.3);
}

/* Smooth transition for visual feedback */
.volume-slider::-webkit-slider-thumb {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.volume-slider::-moz-range-thumb {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Add to your CSS file */

/* Popup forms styling for dark mode */
body.dark-mode #playlist-save-popup,
body.dark-mode #playlist-load-popup,
body.dark-mode #submit-track-popup {
  background: #222211 !important;
  border-color: #ffcc00 !important;
}

body.dark-mode #playlist-save-popup h3,
body.dark-mode #playlist-load-popup h3,
body.dark-mode #submit-track-popup h3,
body.dark-mode #playlist-save-popup p,
body.dark-mode #playlist-load-popup p,
body.dark-mode #submit-track-popup p,
body.dark-mode #playlist-save-popup label,
body.dark-mode #submit-track-popup label {
  color: #ffcc00 !important;
}

body.dark-mode #playlist-save-popup input,
body.dark-mode #submit-track-popup input {
  background: #111122 !important;
  border-color: #ffcc00 !important;
  color: #ffcc00 !important;
}

body.dark-mode #playlist-load-popup div[onclick] {
  border-color: #ffcc00 !important;
}

body.dark-mode #playlist-load-popup div[onclick] h4 {
  color: #00ffcc !important;
}

body.dark-mode #playlist-load-popup div[onclick] p {
  color: #ffcc00 !important;
}

/* Hidden class utility */
.hidden {
  display: none !important;
}

/* ==================== DARK MODE ==================== */

body.dark-mode {
  background-color: #000000;
  color: #ffcc00;
}

.dark-mode .track-list,
.dark-mode .queue-list,
.dark-mode .poll {
  background-color: #222222;
  border-color: #ffcc00;
}

/* Dark mode overrides for music player */
body.dark-mode .music-player {
  background: #222211;
  border: 3px double #ffcc00;
}

body.dark-mode .left-section img.album-cover,
body.dark-mode .right-section img {
  border: 2px dashed #00ffcc;
  border-color: #00ffcc;
}

body.dark-mode .progress-container {
  background-color: #111122;
  border: 1px solid #00ffaa; 
}

body.dark-mode .track {
  border-bottom: 1px dashed #00ffcc;
}

body.dark-mode .progress-bar {
  background: #00ffaa;
}

body.dark-mode .player-controls button {
  background: #111122;
  border-color: #00ffaa;
  color: #00ffaa;
}

body.dark-mode .player-controls input[type="range"] {
  border-color: #00ffaa;
}

/* Dark mode: override colors & gradient */
body.dark-mode .player-controls .tip-btn {
  background: #00aaff;
  border: 1px solid #00ffcc;
  color: #181800;
}

body.dark-mode .player-controls .tip-btn:hover {
  background: #00aaff;
  color: #ff00cc;
  text-shadow:
    0 0 4px  #ffcc00,   /* bright warm core */
    0 0 10px #00ffaa,   /* electric cyan halo */
    0 0 18px #ff33cc;   /* magenta bloom */
  border: 1px solid #181800;
}

body.dark-mode .poll .question {
  border-bottom: 1px dashed #00ffaa;
}

body.dark-mode .player-controls button:disabled {
  background: linear-gradient(135deg, #4d4d1a 0%, #666622 100%);
  border-color: #999977;
  color: #cccc99;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
  box-shadow: none;
  transition: none;
}

body.dark-mode .selector-btn {
  background: #00ffcc;
  color: #000;
  border: 2px solid #00ffcc;
}

body.dark-mode .selector-btn.active {
  background: #ffcc00;
  border: 2px solid #ffcc00;
  color: #000;
}

body.dark-mode .selector-btn:hover {
  background: #ff00ff;
  color: #000;
}

body.dark-mode .sub-tab {
  background: #ddaa11;
  color: #fcf2c3;
  border: 2px solid #ddaa11;
}

body.dark-mode .sub-tab:hover {
  background: #ff00ff;
  color: #000;
}

body.dark-mode .player-controls button {
  background: #111122;
  border-color: #00ffaa;
  color: #00ffaa;
}
body.dark-mode .queue-list button {
  background: #111122;
  border: 1px solid #00ffaa;
  color: #00ffaa;
}
body.dark-mode .queue-list button:hover {
  color: #ffcc00;
  border-color: #ffcc00;
  text-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}
body.dark-mode .queue-list button:active {
  background: #00aaff;
  color: #000;
  border-color: #00ffaa;
}


/* DARK MODE - Volume Slider Track */
body.dark-mode .volume-slider::-webkit-slider-runnable-track {
  background: #111122;
  border: 1px solid #00ffaa;
}

body.dark-mode .volume-slider::-moz-range-track {
  background: #111122;
  border: 1px solid #00ffaa;
}

/* DARK MODE - Thumb */
body.dark-mode .volume-slider::-webkit-slider-thumb {
  background: #00ffaa; /* electric blue */
  border-color: #00ffaa; /* green border like buttons */
  box-shadow: 0 0 4px rgba(0, 170, 255, 0.5);
}

body.dark-mode .volume-slider::-moz-range-thumb {
  background: #00ffaa; /* electric blue */
  border-color: #00ffaa; /* green border like buttons */
  box-shadow: 0 0 4px rgba(0, 170, 255, 0.5);
}

/* DARK MODE - Hover effects */
body.dark-mode .volume-slider:hover::-webkit-slider-thumb {
  background: #ffcc00; /* brighter electric blue on hover */
  box-shadow: 0 0 8px rgba(51, 153, 255, 0.8);
}

body.dark-mode .volume-slider:hover::-moz-range-thumb {
  background: #ffcc00; /* brighter electric blue on hover */
  box-shadow: 0 0 8px rgba(51, 153, 255, 0.8);
}

/* DARK MODE - Active/Dragging state */
body.dark-mode .volume-slider:active::-webkit-slider-thumb {
  background: #00aaff; /* bright electric blue when dragging */
  border-color: #00ffaa;
  box-shadow: 0 0 12px rgba(0, 204, 255, 0.9);
}

body.dark-mode .volume-slider:active::-moz-range-thumb {
  background: #00aaff; /* bright electric blue when dragging */
  border-color: #00ffaa;
  box-shadow: 0 0 12px rgba(0, 204, 255, 0.9);
}

body.dark-mode .volume-slider:hover::-webkit-slider-runnable-track {
  box-shadow: inset 0 0 4px rgba(0, 255, 170, 0.3);
}

body.dark-mode .volume-slider:hover::-moz-range-track {
  box-shadow: inset 0 0 4px rgba(0, 255, 170, 0.3);
}


.queue-item.dragging {
  opacity: 0.5;
}


/* Default spinner color */
#loading-spinner {
  display: none;
  text-align: center;
  font-size: 14px;
  color: #ff66cc;
  margin-bottom: 5px;
}

/* Spinner color when dark mode is active */
.dark-mode #loading-spinner {
  color: #ffb3ff;
}


/* ==================== RESPONSIVE DESIGN ==================== */

/* Phones: stack everything vertically */
@media (max-width: 600px) {
  .lists-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .track-list,
  .queue-list,
  .poll {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
  }
  
  /* Poll answers stack on very small screens */
  .poll .answers {
    flex-direction: column;
  }
  
  .poll .answers .answer {
    white-space: normal; /* Allow wrapping on mobile */
  }
}

/* Responsive stacking */
@media (max-width: 800px) {
  .music-player {
    flex-direction: column;
    align-items: stretch;
  }

  .left-section {
    display: flex;
    justify-content: center;
  }

  .controls-section {
    order: 2;
  }

  .right-section {
    order: 3;
    justify-content: center;
  }

  .player-controls {
    justify-content: center;
  }
}

/* small screens: tabs wrap */
@media (max-width: 480px) {
  .track-list .track-controls {
    display: block;
    margin-top: 6px;
  }
  .track-list h2 { 
    display: block; 
  }
}