/* voidcast Cast-App — Nest Hub (1024×600), touch-first, dunkel.
   Design nach den Mockups (Seite „Cast App"). */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }

:root {
  --bg: #0b0d12;
  --surface: #12161f;
  --surface-2: #1d2430;
  --line: #1c2230;
  --line-2: #2a2452;
  --text: #eef1f6;
  --dim: #8a93a6;
  --faint: #5b6273;
  --accent: #7c6cff;
  --accent-soft: rgba(124, 108, 255, 0.25);
  --accent-text: #9b8dff;
  --good: #63b878;
}

html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
}
.font-display { font-family: Outfit, 'Segoe UI', sans-serif; }

/* PoC-Erkenntnis: Das Cast-SDK injiziert ein <touch-controls>-Overlay
   (z-index 1000000), das alle Touch-Events schluckt. Komplett deaktivieren —
   unsere UI ist die Touch-Bedienung. */
touch-controls { pointer-events: none !important; display: none !important; }

#app { width: 100%; height: 100%; }
.view { width: 100%; height: 100%; display: flex; flex-direction: column; }

.btn {
  border: none; border-radius: 14px; padding: 14px 20px;
  font-family: Outfit, sans-serif; font-weight: 600; font-size: 16px;
  background: var(--surface-2); color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 12px 36px var(--accent-soft); }
.btn:active { transform: scale(0.96); filter: brightness(1.1); }

.iconbtn {
  width: 52px; height: 52px; border-radius: 50%; border: none; background: #151a23;
  color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.iconbtn:active { background: var(--surface-2); transform: scale(0.94); }

.avatar-sm {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(99,184,120,0.16);
  border: 2px solid var(--good); display: flex; align-items: center; justify-content: center; font-size: 19px;
}

.topbar { display: flex; align-items: center; gap: 12px; padding: 22px 36px 8px; }
.topbar .crumb { color: var(--dim); font-size: 15px; }

.error-banner {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #2c1a1f; color: #ff9a9a; border-radius: 12px; padding: 10px 18px;
  font-size: 14px; z-index: 50; max-width: 80vw; text-align: center;
}

/* ---------- Pairing ---------- */

.pairing {
  align-items: center; justify-content: center; gap: 28px;
  background: radial-gradient(ellipse 700px 400px at 50% -10%, rgba(124,108,255,0.18), transparent), var(--bg);
}
.pairing .code {
  background: #151a23; border: 1px solid var(--line-2); border-radius: 22px;
  padding: 26px 56px; box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  font-family: ui-monospace, monospace; font-weight: 600; font-size: 60px;
  letter-spacing: 0.16em; color: var(--accent-text);
}
.pairing .hint { text-align: center; color: var(--dim); font-size: 17px; line-height: 1.6; }
.pairing .hint b { color: var(--text); font-weight: 600; }

/* ---------- Profile ---------- */

.profiles { align-items: center; justify-content: center; gap: 40px; }
.profiles h1 { font-size: 34px; font-weight: 600; }
.profile-row { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.profile-tile {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 26px;
  padding: 30px 48px; cursor: pointer;
}
.profile-tile:active { transform: scale(0.96); background: var(--surface-2); }
.profile-tile .pa {
  width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 70px; background: rgba(99,184,120,0.16); border: 3px solid var(--good);
}
.profile-tile .pn { font-family: Outfit, sans-serif; font-weight: 600; font-size: 24px; }
.profiles .foot { color: var(--faint); font-size: 15px; }

/* ---------- Regal ---------- */

.regal { padding: 24px 36px; gap: 18px; overflow: hidden; }
.regal-head { display: flex; align-items: center; gap: 12px; }
.regal-head h1 { font-size: 25px; font-weight: 600; }
.profile-chip {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px 6px 6px; cursor: pointer;
}
.profile-chip span { font-family: Outfit, sans-serif; font-weight: 600; font-size: 14px; color: var(--dim); }

.resume-hero {
  background: linear-gradient(105deg, #221c46, #151a23 65%);
  border: 1px solid var(--line-2); border-radius: 20px; padding: 18px 22px;
  display: flex; align-items: center; gap: 20px; cursor: pointer;
}
.resume-hero:active { transform: scale(0.99); }
.resume-hero .cover { width: 92px; height: 92px; border-radius: 14px; flex-shrink: 0; overflow: hidden; }
.resume-hero .k { font-family: Outfit, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.12em; color: var(--accent-text); }
.resume-hero .t { font-family: Outfit, sans-serif; font-weight: 600; font-size: 21px; margin-top: 4px; }
.resume-hero .playbig {
  width: 78px; height: 78px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 34px rgba(124,108,255,0.35);
}

.shelf-label { font-family: Outfit, sans-serif; font-weight: 600; font-size: 19px; }
.shelf { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; }

.tile { width: 158px; flex-shrink: 0; cursor: pointer; }
.tile:active { transform: scale(0.97); }
.tile .cover { width: 158px; height: 158px; border-radius: 16px; position: relative; overflow: hidden; }
.tile .tt { font-weight: 600; font-size: 13px; line-height: 1.3; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .pbar { height: 4px; border-radius: 2px; background: var(--surface-2); margin-top: 6px; }
.tile .pbar > div { height: 4px; border-radius: 2px; background: var(--accent); }
.tile .badge {
  position: absolute; right: 8px; bottom: 8px; background: rgba(11,13,18,0.8);
  border-radius: 999px; padding: 3px 9px; font-family: Outfit, sans-serif; font-weight: 600;
  font-size: 11px; color: var(--accent-text);
}
.tile .badge.done { color: var(--good); }

.cover-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #262c3a, #1a2029);
  font-family: Outfit, sans-serif; font-weight: 700; font-size: 40px; color: rgba(255,255,255,0.7);
}
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Bibliothek (Grid) ---------- */

.libgrid {
  flex: 1; display: grid; grid-template-columns: repeat(3, 232px); gap: 20px 32px;
  justify-content: center; align-content: start; overflow-y: auto; padding: 6px 36px 24px;
}
.libgrid .tile { width: 232px; }
.libgrid .tile .cover { width: 232px; height: 232px; }

/* Serien-Ordner: 2×2-Mini-Cover */
.folder-cover {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px;
  background: var(--surface); border: 1px solid var(--line-2); padding: 6px; box-sizing: border-box;
}
.folder-cell { border-radius: 8px; overflow: hidden; background: var(--surface-2); }

/* ---------- Album ---------- */

.albumview { padding: 20px 36px 30px; gap: 8px; }
.albumbody { flex: 1; display: flex; align-items: center; gap: 44px; min-height: 0; }
.albumbody .bigcover { width: 350px; height: 350px; border-radius: 24px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55); }
.albumbody .meta { flex: 1; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.albumbody h1 { font-size: 34px; font-weight: 600; line-height: 1.2; }
.albumbody .sub { color: var(--dim); font-size: 17px; }
.albumbody .progline { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #b8bfce; }
.albumbody .pbar { height: 6px; border-radius: 3px; background: var(--surface-2); max-width: 480px; }
.albumbody .pbar > div { height: 6px; border-radius: 3px; background: var(--accent); }
.album-actions { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.album-actions .row { display: flex; gap: 12px; }
.album-actions .row .btn { flex: 1; font-size: 16px; padding: 14px 16px; }

/* ---------- Player ---------- */

.playerview { padding: 18px 36px 26px; gap: 6px; }
.playerbody { flex: 1; display: flex; align-items: center; gap: 40px; min-height: 0; }

.flip { width: 300px; height: 300px; flex-shrink: 0; perspective: 1200px; cursor: pointer;
  transition: width 0.5s, height 0.5s; }
/* Umgedreht wächst die Karte — die Trackliste bekommt mehr Platz und Schrift */
.flip.flipped { width: 430px; height: 430px; }
.flip-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform 0.5s;
}
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 22px;
  overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,0.55);
}
.flip-back {
  transform: rotateY(180deg); background: var(--surface); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; padding: 14px 6px 14px 14px;
}
.flip-back .fb-head { font-family: Outfit, sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.12em; color: var(--accent-text); padding: 0 0 8px 8px; }
.fb-list { flex: 1; overflow-y: auto; padding-right: 8px; }
.fb-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  font-size: 16px; cursor: pointer;
}
.fb-row:active { background: var(--surface-2); }
.fb-row.current { background: #221c46; color: var(--accent-text); font-weight: 600; }
.fb-row .st { width: 22px; color: var(--good); font-size: 14px; flex-shrink: 0; text-align: center; }
.fb-row .ft { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-row .fd { color: var(--faint); font-size: 13.5px; }

.flip-hint { display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--faint); font-size: 13px; margin-top: 10px; }

.pmeta { flex: 1; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pmeta .tt { font-family: Outfit, sans-serif; font-weight: 600; font-size: 32px; line-height: 1.2; }
.pmeta .ts { color: var(--dim); font-size: 18px; margin-top: 6px; }

.progress-row { display: flex; align-items: center; gap: 14px; }
.progress-row .tm { color: var(--dim); font-size: 15px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.seek { position: relative; flex: 1; height: 44px; display: flex; align-items: center; touch-action: none; }
.seek::before { content: ''; position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--surface-2); }
.seek .fill { position: absolute; left: 0; height: 6px; border-radius: 3px; background: var(--accent); }
.seek .knob {
  position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transform: translateX(-50%); box-shadow: 0 0 0 6px var(--accent-soft);
}

.transport { display: flex; align-items: center; gap: 44px; justify-content: center; }
.tbtn {
  width: 84px; height: 84px; flex: 0 0 auto; /* nie vom Flex-Layout verzerren */
  border-radius: 50%; border: none; background: #151a23;
  color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.tbtn:active { background: var(--surface-2); transform: scale(0.94); }
/* Text-Knöpfe bleiben KREISE — width:auto machte aus border-radius:50% Eier */
.tbtn.small {
  font-family: Outfit, sans-serif; font-weight: 600; font-size: 17px;
  color: var(--text, #e8ecf4);
}
.tbtn.main { width: 112px; height: 112px; background: var(--accent); color: #fff; box-shadow: 0 14px 40px rgba(124,108,255,0.35); }
.upnext { text-align: center; color: var(--faint); font-size: 15px; }
.slot-hint { display: none; text-align: center; color: var(--accent-text); font-size: 16px;
  font-family: Outfit, sans-serif; font-weight: 600; margin-top: 4px; }

/* ---------------------------------------------------------------------------
   TV-Modus (Shield & Co.): kein Touch, keine D-Pad-Events im Receiver.
   Alles, was zum Antippen einlädt, verschwindet — die Play/Pause-Anzeige
   bleibt, weil die Medientasten der Fernbedienung wirklich funktionieren.
   Zusätzlich Rand fürs Overscan, das viele Fernseher noch anwenden.
--------------------------------------------------------------------------- */
.tv .view { padding: 2.5vh 3vw; }
.tv .profile-chip,
.tv .sleepbtn,
.tv .flip-hint,
.tv .sortbtn,
.tv .favbtn,
.tv .backzone .iconbtn,
.tv .npbar .toggle,
.tv .transport .tbtn:not(.main) { display: none !important; }
.tv .tbtn.main { pointer-events: none; }
.tv .fb-row { pointer-events: none; }

.tv-idle {
  align-items: center; justify-content: center; text-align: center; gap: 22px;
}
.tv-idle h1 { font-size: 34px; font-weight: 600; }
.tv-cover {
  width: 260px; height: 260px; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.tv-cover img { width: 100%; height: 100%; object-fit: cover; }
.tv-sub { color: var(--dim); font-size: 19px; max-width: 70%; }
.tv-hint { color: var(--faint); font-size: 17px; line-height: 1.7; }

/* Abend-Dimmen: sanftes Abdunkeln der App zum Slot-Ende (Touch geht durch) */
.night-dim {
  position: fixed; inset: 0; z-index: 500; background: #000;
  opacity: 0; pointer-events: none; transition: opacity 12s linear;
}

/* Mini-Player: zurück zum Now Playing, ohne neu zu verbinden */
.npbar {
  position: fixed; left: 28px; right: 28px; bottom: 16px; z-index: 20;
  background: rgba(21, 26, 35, 0.96); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 10px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.npbar:active { transform: scale(0.99); }
/* Der fixe Mini-Player schwebt über dem Inhalt — Scroll-Flächen brauchen
   unten Freiraum, damit die letzte Reihe nicht verdeckt wird */
.view:has(.npbar) .libgrid { padding-bottom: 112px; }
.regal:has(.npbar) { padding-bottom: 104px; }
.npbar .cov { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.npbar .txt { flex: 1; min-width: 0; }
.npbar .t {
  font-family: Outfit, sans-serif; font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.npbar .sub { color: var(--dim); font-size: 12px; margin-top: 2px; }
.npbar .toggle {
  width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
}

.hidden { display: none !important; }

/* Favoriten-Herz */
.favbtn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--dim); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; margin-right: 14px;
}
.favbtn:active { background: var(--surface-2); }
.tile .badge.fav { left: 8px; right: auto; color: #ff6b8a; }

/* Einschlaf-Timer im Player */
.sleepbtn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--dim);
  font-family: Outfit, sans-serif; font-weight: 600; font-size: 15px;
  padding: 10px 18px; border-radius: 22px; cursor: pointer; margin-right: 14px;
}
.sleepbtn.on { color: var(--accent-text); border-color: var(--accent); }
.sleepbtn:active { background: var(--surface-2); }

/* Sortier-Umschalter in der Bibliothek (große Touch-Fläche) */
.sortbtn {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text, #e8ecf4);
  font-family: Outfit, sans-serif; font-weight: 600; font-size: 15px;
  padding: 10px 20px; border-radius: 22px; cursor: pointer; margin-right: 14px;
}
.sortbtn:active { background: var(--surface-2); }
.sortbtn.on { border-color: var(--accent, #9b8dff); color: var(--accent, #9b8dff); }

/* Große Touch-Zone für Zurück: Icon + Beschriftung + großzügiges Padding */
.backzone {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 28px 12px 12px; margin: -12px 0 -12px -12px;
  border-radius: 18px; cursor: pointer; user-select: none;
}
.backzone:active { background: var(--surface); transform: scale(0.98); }
.backzone .iconbtn { pointer-events: none; }

/* Handy verbinden: QR-Overlay (Hub 1024×600, Querformat) */
.qr-overlay {
  position: fixed; inset: 0; z-index: 400; background: rgba(5, 7, 11, 0.94);
  display: flex; align-items: center; justify-content: center;
}
.qr-box { display: flex; align-items: center; gap: 40px; padding: 30px; }
.qr-code { background: #fff; border-radius: 18px; padding: 8px; line-height: 0; flex-shrink: 0; }
.qr-side { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.qr-title { font-weight: 700; font-size: 30px; }
.qr-text { color: var(--dim); font-size: 18px; line-height: 1.5; }
.qr-words { font-weight: 700; font-size: 34px; letter-spacing: .05em; color: var(--accent-text, #9b8dff); }
.qr-status { color: var(--faint, #6b7488); font-size: 16px; }
.qr-status.ok { color: var(--good, #4ade80); font-weight: 600; font-size: 20px; }
.qr-wait { color: var(--dim); font-size: 20px; }

/* Suche mit Mini-Tastatur: Treffer als Reihe oben, Tasten unten */
.view.search .topbar { padding-bottom: 4px; }
.kb-field {
  flex: 1; margin-left: 18px; min-height: 48px; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 24px;
  padding: 0 22px; font-family: Outfit, sans-serif; font-weight: 600; font-size: 22px;
  letter-spacing: 0.5px; text-transform: uppercase; overflow: hidden; white-space: nowrap;
}
.kb-caret { width: 2px; height: 26px; margin-left: 3px; background: var(--accent); animation: kb-blink 1s steps(1) infinite; }
@keyframes kb-blink { 50% { opacity: 0; } }
.kb-results {
  flex: 1; min-height: 0; display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden;
  padding: 10px 36px 6px; align-items: flex-start;
}
.kb-results .tile { width: 136px; }
.kb-results .tile .cover { width: 136px; height: 136px; }
.kb-results .tile .tt { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.kb-empty { color: var(--dim); font-size: 17px; padding: 30px 0; }
.kb { padding: 6px 20px 14px; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.kb-row { display: flex; gap: 7px; }
.kb-key {
  width: 74px; height: 50px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text, #e8ecf4);
  font-family: Outfit, sans-serif; font-weight: 600; font-size: 21px; cursor: pointer;
}
.kb-key.wide { width: 120px; font-size: 16px; }
.kb-key:active { background: var(--accent); border-color: var(--accent); transform: scale(0.95); }