body {
	height:1650px;
	width:610px;
	background-image: url("../images/radio_background.jpg");
	background-color:#1C1C1C;
	background-repeat:no-repeat;
}

button {
	padding:1% 1% 1% 1%;
	margin: 3% 1% 3% 1%;
	border-radius: 5%;
	
}

/* Radio Buttons – Rahmen direkt sichtbar, gleiche Farbe wie Badge */
table button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0,0,0,0.8);       /* leicht transparent für Tiefe */
  border: 2px solid rgba(51,51,51,0.9); /* gleiche Farbe wie Genre Background */
  border-radius: 5%;
  padding: 1%;
  margin: 1% 1%;
  width: 195px;
  height: 210px;
}

/* Genre-Badge */
.genre {
  width: 175px;                
  margin: 4px auto 0 auto;    
  padding: 3px 0;
  font-size: 0.9em;
  text-align: center;
  background: rgba(51,51,51,0.9);  /* leicht transparent für besseren Kontrast */
  color: white;               
  border-radius: 6px;
  box-sizing: border-box;
  display: block;
}

footer {
	width:97%;
    padding: 1% 1% 1% 1%;
    margin: 1px auto auto auto;
    color: white;
    background:rgba(0,0,0,0.8);
    border-style: solid 1px;
    border-radius: 3px;
	font-family: Verdana;
}

table {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

/* Changelog Panel wie Miniplayer */
#changelogPanel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 520px;              /* etwas schmaler als 610px */
  max-height: 60vh;
  overflow-y: auto;

  background: rgba(0,0,0,0.9);
  color: white;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #888;

  display: none;
  z-index: 999;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
}

/* Close Button */
#changelogClose {
  position: absolute;
  top: 5px;
  right: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2em;
  color: #ccc;
}

#changelogClose:hover {
  color: white;
}

#changelogPanel h3 {
  margin-top: 0;
  font-size: 1em;
  margin-bottom: 6px;
}

#changelogPanel ul {
  padding-left: 20px;
  margin: 0;
}

#changelogPanel li {
  font-size: 0.85em;
  margin-bottom: 4px;
}

@media (max-width: 650px) {
  #changelogPanel {
    width: 92%;
    max-height: 70vh;
    padding: 14px;
  }
}

.miniplayer-modern {
  position: sticky;
  bottom: 10px;
  width: 97%;
  margin: 1px auto;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(0,0,0,0.92);
  border: 1px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
}

/* linke Seite */
.miniplayer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

#currentRadioLogo {
  width: 100px;
  height: 100px;
  border-radius: 3px;
  object-fit: cover;
}

/* Text */
.miniplayer-text {
  display: flex;
  flex-direction: column;
}

.miniplayer-label {
  font-size: 15px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#currentRadio {
  font-size: 22px;
  color: white;
  font-weight: bold;
}

/* Button */
#buttonp {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #222;
  border: 1px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
}

#buttonp img {
  width: 40px;
  height: 40px;
}

.station-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#stationLink {
  text-decoration: none;
  font-size: 18px;
  opacity: 0.8;
}

#stationLink:hover {
  opacity: 1;
}