/* Base (portrait/default): stacked, dark text on gradient */

body { 

  font-family: Arial, sans-serif;

  margin: 0; 

  padding: 0; 

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  background: linear-gradient(-45deg, #89f7fe, #66a6ff, #d4a3dc, #ffcfd2, #c2e9fb);

  background-size: 400% 400%;

  animation: gradientShift 30s ease infinite;

  color: #333;                 /* default dark text */

}



body.gradient-bg {             /* kept for explicit toggling */

  background: linear-gradient(-45deg, #89f7fe, #66a6ff, #d4a3dc, #ffcfd2, #c2e9fb);

  background-size: 400% 400%;

  animation: gradientShift 30s ease infinite;

  color: #333;

}



/* Retro Dance theme: flip text to white over video */

body.retro-dance { color: #fff; }

a { color: inherit; }

body.retro-dance a { color: #fff; }



@keyframes gradientShift {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



header, footer {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}



footer {

  font-size: 0.8em;

  line-height: 1.2;

  padding: 10px 0;

}



.footer-content { margin: 4px 0; }



.logo img {

  max-width: 150px;

  margin-top: 10px;

}



/* Portrait - stacked */

.top-bar {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  width: 100%;

}



/* Landscape (short viewports) - side-by-side centered */

@media (orientation: landscape) and (max-height: 500px) {

  .top-bar {

    flex-direction: row;

    align-items: center;

    justify-content: center;  /* keep centered */

    gap: 1rem;                /* space between logo and text */

    padding: 0;

    text-align: left;

    max-width: 900px;

    margin: 0 auto;

  }

  .now-playing {

    margin-top: 0;

    margin-left: 0;

  }

}



.now-playing {

  margin-top: 0.5rem;

  display: flex;

  flex-direction: column;

  align-items: center;   /* ensures audio-wrapper is centered */

}



#station-message,

#now-playing-message {

  white-space: normal;

  overflow: visible;

  text-overflow: unset;

}



.audio-wrapper {

  width: 100%;

  max-width: 400px;

  margin: 15px auto;     /* center horizontally */

}



audio#audioPlayer { 

  width: 100%;

}



/* Make native controls readable on dark video only */

body.retro-dance audio#audioPlayer {

  filter: invert(1) hue-rotate(180deg);

}



/* Quality controls */

.quality-btn {

  padding: 0.5rem 1rem;

  border: none;

  border-radius: 6px;

  background: linear-gradient(180deg, #00bfff, #008fb3);

  box-shadow: 0 3px 6px rgba(0,0,0,0.2);

  color: #fff;

  font-weight: bold;

}



.quality-btn.active {

  background: linear-gradient(180deg, #1ad1ff, #008fb3);

  box-shadow: 0 4px 8px rgba(0,0,0,0.25);

  color: #fff;

}



/* Background video (shown during Retro Dance only) */

#bgVideo {

  position: fixed;

  inset: 0;

  min-width: 100%;

  min-height: 100%;

  object-fit: cover;

  z-index: -1;           /* behind everything */

  display: none;         /* hidden by default, JS toggles */

}



/* === Random Fact: slide-out + slide-away (layout-safe) === */

#random-fact-wrap{

  margin-top: 0.5rem;

  display: inline-flex;

  align-items: stretch;

  overflow: hidden;

  opacity: 1;

}



/* Hidden state: truly invisible + non-interactive (no red rail, no gap) */

#random-fact-wrap.rf-hidden{

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  margin-top: 0;

}



/* the red strip */

.rf-rail{

  width: 6px;

  background: #d33;

  border-radius: 4px 0 0 4px;

  flex: 0 0 6px;

}



/* outer panel animates its width so it truly "slides out" */

.rf-panel{

  background: #f5f5f5;

  border-radius: 0 4px 4px 0;

  overflow: hidden;



  /* collapsed state */

  max-width: 0;



  transition: max-width 420ms ease;

}



/* expanded state: allow the panel to take space (up to 420px) */

#random-fact-wrap.rf-expanded .rf-panel{

  max-width: 420px;

}



/* inner panel animates height + opacity + slight slide for polish */

.rf-panel-inner{

  padding: 0.5rem 0.75rem;



  font-size: 0.9rem;

  line-height: 1.3;



  /* collapsed state */

  max-height: 0;

  opacity: 0;

  transform: translateX(-10px);



  overflow: hidden;



  transition:

    max-height 420ms ease,

    opacity 200ms ease,

    transform 420ms ease;

}



/* expanded state */

#random-fact-wrap.rf-expanded .rf-panel-inner{

  max-height: 500px;

  opacity: 1;

  transform: translateX(0);

}



.rf-title{

  display:block;

  font-size:0.75rem;

  opacity:0.7;

  margin-bottom:0.15rem;

}



/* Accessibility: respect reduced motion */

@media (prefers-reduced-motion: reduce){

  .rf-panel,

  .rf-panel-inner{

    transition: none;

  }

}



/* Force random fact text to dark, regardless of site theme */
#random-fact-wrap,
#random-fact-wrap * {
  color: #111;
}







.vote-btn{
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  background: rgba(255,255,255,0.75);
}
body.retro-dance .vote-btn{
  background: rgba(0,0,0,0.35);
  color: #fff;
}
.vote-btn.active{
  outline: 3px solid rgba(0,0,0,0.2);
}
body.retro-dance .vote-btn.active{
  outline: 3px solid rgba(255,255,255,0.35);
}



#vote-status{
  min-height: 28px;              /* prevents layout jump */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

#vote-status p{
  margin: 0;
  line-height: 1.2;
}

.vote-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:78px;
}

.vote-label{ line-height:1.1; }

.vote-count{
  line-height:1.1;
  font-size:0.85em;
  opacity:0.85;
  min-height: 1em;     /* reserves space when visible */
  display:none;        /* hidden until voted */
}

.vote-btn.show-counts .vote-count{
  display:block;
}


@keyframes votePulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.vote-btn.pulse {
  animation: votePulse 300ms ease-out;
}