/* =====================================================================
   VENUETONE — Abspielgerät

   Gestaltet für ein Tablet, das an der Wand oder neben der Kasse hängt.
   Das heißt: groß genug, um aus zwei Metern zu erkennen, was läuft, und
   Bedienelemente, die man mit dem Daumen trifft, ohne hinzusehen.

   Dieselbe Farbsprache wie die Sendezentrale — Bernstein für aktiv,
   Blaugrün für Messwerte, Monospace für alles Zählbare.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root {
  --ink-900: #0e1218;
  --ink-850: #12171f;
  --ink-800: #161c25;
  --ink-700: #1d2531;
  --line:    #2a3543;
  --line-soft: #212a36;

  --text:     #dfe5ec;
  --text-mid: #9aa6b5;
  --text-dim: #6b7787;

  --signal: #e39b3c;
  --meter:  #52a3c9;
  --ok:     #6fbf8f;
  --alert:  #d4685f;

  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'IBM Plex Mono', Consolas, monospace;
  --display: 'Space Grotesk', var(--sans);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* --------------------------------------------------------------------
   Das hidden-Attribut muss gewinnen.

   Browser blenden [hidden] über eine Standardregel aus. Jede eigene
   Regel mit display schlägt sie -- .screen { display: flex } sorgte
   dafür, dass die drei Bildschirme trotz hidden untereinander standen
   statt sich abzuwechseln. Nach dem Verbinden änderte sich oben nichts,
   weil der Startbildschirm die ganze Zeit darunter lag.

   Deshalb hier einmal zentral und mit Vorrang.
   -------------------------------------------------------------------- */
[hidden] { display: none !important; }


html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Nichts soll sich im Laden versehentlich markieren lassen */
  user-select: none;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* --- Vollbildschirme (Verbinden, Start) ----------------------------- */

.screen {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.screen__inner { width: 100%; max-width: 420px; text-align: center; }

.brand {
  font-family: var(--display);
  font-weight: 600; font-size: 30px; letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.brand span { color: var(--signal); }

.lead { color: var(--text-mid); margin: 0 0 28px; }

.zone {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 40px;
}

.hint { margin-top: 26px; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }

/* --- Verbinden ------------------------------------------------------ */

.pair { text-align: left; }
.pair label {
  display: block; font-size: 13px; color: var(--text-mid); margin-bottom: 6px;
}
.pair input {
  width: 100%;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--mono); font-size: 15px;
  padding: 13px 14px;
  margin-bottom: 14px;
}
.pair input:focus { border-color: var(--meter); outline: none; }
.pair__error { color: var(--alert); font-size: 13.5px; margin: 12px 0 0; min-height: 1.2em; }

/* --- Schaltflächen -------------------------------------------------- */

.btn {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: 13px 22px;
  cursor: pointer;
}
.btn:active { background: var(--ink-800); }
.btn[disabled] { opacity: .5; }

.btn--primary { background: var(--signal); border-color: var(--signal); color: #191203; width: 100%; }

/* Der Startknopf ist absichtlich groß: Er wird einmal am Morgen von
   jemandem gedrückt, der gleichzeitig den Laden aufschließt. */
.btn--start {
  background: var(--signal); border-color: var(--signal); color: #191203;
  font-size: 19px; font-weight: 600;
  padding: 26px 40px;
  width: 100%;
  border-radius: 4px;
}

/* --- Kopfzeile ------------------------------------------------------ */

.player { min-height: 100dvh; display: flex; flex-direction: column; padding: 18px 20px 24px; }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.bar__zone {
  font-family: var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar__net { color: var(--text-dim); display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-dim); }
.dot--on  { background: var(--ok); }
.dot--off { background: var(--alert); }

/* --- Aktueller Titel ------------------------------------------------ */

.now {
  flex: 1;
  display: flex; align-items: center; gap: 30px;
  padding: 34px 0;
  min-height: 0;
}

.cover {
  width: 210px; height: 210px; flex-shrink: 0;
  background: var(--ink-800) center/cover no-repeat;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.cover.has-image { border-color: var(--line-soft); }

.now__text { min-width: 0; flex: 1; }

.now__title {
  font-family: var(--display);
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.now__artist { font-size: 19px; color: var(--text-mid); margin: 0 0 3px; }
.now__album  { font-size: 14px; color: var(--text-dim); margin: 0 0 24px; }

.progress {
  height: 3px; background: var(--ink-700); border-radius: 2px; overflow: hidden;
}
.progress__fill { display: block; height: 100%; width: 0; background: var(--meter); }

.progress__times {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-dim);
  margin-top: 7px;
}

.status { font-size: 14px; color: var(--signal); margin: 18px 0 0; min-height: 1.4em; }
.status--alert { color: var(--alert); }
.status.is-empty { margin: 0; min-height: 0; }

/* --- Bedienung ------------------------------------------------------ */

.controls {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.controls .btn { min-width: 116px; }

.vol { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.vol span { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.vol input { width: 170px; accent-color: var(--signal); }

/* --- Puffer als sichtbare Reihe ------------------------------------- */

.upnext { border-top: 1px solid var(--line-soft); padding-top: 14px; }

.upnext__head {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.upnext__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

.up { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
/* Hohl = noch nicht geladen, gefüllt = liegt offline bereit */
.up__dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--text-dim); flex-shrink: 0;
}
.up--ready { color: var(--text-mid); }
.up--ready .up__dot { background: var(--meter); border-color: var(--meter); }

.up__title { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Schmale Geräte -------------------------------------------------- */

@media (max-width: 720px) {
  .now { flex-direction: column; text-align: center; gap: 22px; padding: 24px 0; }
  .cover { width: 160px; height: 160px; }
  .progress__times { justify-content: space-between; }
  .controls { flex-wrap: wrap; }
  .vol { margin-left: 0; width: 100%; }
  .vol input { flex: 1; width: auto; }
  .upnext__list { flex-direction: column; gap: 7px; }
  .up__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}