:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f4f4;
  color: #2d2d2d;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.site-header,
.site-footer {
  background: #292929;
  color: #fff;
  padding: 1rem;
}

.site-header h1 { margin: 0; font-size: clamp(1.45rem, 4vw, 2rem); }
main { flex: 1; }

.player-container {
  width: min(100% - 2rem, 980px);
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.player {
  background: #fff;
  padding: 1rem;
  border: 1px solid #d6d6d6;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 9%);
}

.player.is-playing { border-color: #1267d6; box-shadow: 0 4px 16px rgb(18 103 214 / 20%); }
.logo-button { width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.station-logo { width: 130px; height: 86px; max-width: 100%; object-fit: contain; }
.station-name { min-height: 2.4em; margin: .6rem 0; font-size: 1rem; }
.controls { display: flex; justify-content: center; align-items: center; gap: .7rem; }
.play-button { min-width: 44px; min-height: 40px; cursor: pointer; font-size: 1.1rem; }
.time { min-width: 4.2rem; color: #666; font-variant-numeric: tabular-nums; }
.status { min-height: 1.2em; margin: .55rem 0 0; color: #666; font-size: .82rem; }
.global-message { min-height: 1.2em; margin: 1rem 1rem -1rem; color: #a11; }
.site-footer a { color: #65a9ff; font-weight: 700; }

@media (max-width: 480px) {
  .player-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; width: min(100% - 1rem, 980px); }
  .player { padding: .7rem; }
  .station-logo { height: 70px; }
}