/* player.css — Transportleiste, Satswheel und großer Player (BAUPLAN-PLAY §10.2, Entwurf valueverse.html).
   Dunkel ist Standard (feste Farben aus dem Entwurf); hell über :root[data-theme="light"]. Alles hier gilt nur für
   .transport, .bigplayer und .wheel – die übrigen Seitenstile stehen in play.css. */

/* ── Farben (Standard dunkel) ── */
.transport,
.bigplayer {
  --pv-bg: #1e1c27;
  --pv-line: #484050;
  --pv-line-soft: #2c2735;
  --pv-ink: #f3f0ea;
  --pv-muted: #9a98a8;
  --pv-bare: #b6a9c5;
  --pv-accent: #c179d1;
  --pv-sats: #e6b7e6;
  --pv-mark: #ffb1ee;
  --pv-card: #251d2d;
  --pv-card-line: #67476e;
  --pv-play-bg: #f3f0ea;
  --pv-play-ink: #181820;
  --pv-wheel-rim: #86628d;
  --pv-wheel-lit: #a87bab;
  --pv-wheel-dark: #393040;
  --pv-wheel-face-a: #63516e;
  --pv-wheel-face-b: #2e2637;
  --pv-wheel-edge: #8e6a96;
  --pv-dim: rgba(18, 18, 23, 0.62);
}

:root[data-theme="light"] .transport,
:root[data-theme="light"] .bigplayer {
  --pv-bg: #ffffff;
  --pv-line: #d6d0de;
  --pv-line-soft: #ebe7f0;
  --pv-ink: #121217;
  --pv-muted: #68666b;
  --pv-bare: #5b5366;
  --pv-accent: #a0339a;
  --pv-sats: #8e2a85;
  --pv-mark: #b0289b;
  --pv-card: #f6f2f9;
  --pv-card-line: #c9b5d2;
  --pv-play-bg: #121217;
  --pv-play-ink: #f3f0ea;
  --pv-wheel-rim: #9a7aa0;
  --pv-wheel-lit: #b48fbc;
  --pv-wheel-dark: #d9cfe2;
  --pv-wheel-face-a: #ffffff;
  --pv-wheel-face-b: #e7dfee;
  --pv-wheel-edge: #b9a2c4;
  --pv-dim: rgba(243, 240, 234, 0.7);
}

/* hidden gewinnt immer gegen die Layout-Regeln unten */
.transport [hidden],
.bigplayer [hidden],
.seek-dim[hidden],
.satscontrol[hidden],
.valuebox[hidden],
.base-setting[hidden],
.preview-chip[hidden] {
  display: none !important;
}

/* ── Transportleiste (fest unten, 96 px) ── */
.transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  /* über Seitenteilen wie der Sidebar (sticky), unter dem großen Player */
  z-index: 60;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px 29px;
  background: var(--pv-bg);
  border-top: 1px solid var(--pv-line);
  box-shadow: 0 -12px 40px #0002;
  color: var(--pv-ink);
}

.transport .now {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.transport .cover-slot {
  flex: none;
}
.transport .cover-slot .cover {
  width: 51px;
  height: 51px;
  padding: 0;
  border-radius: 6px;
}
.transport .now-text {
  min-width: 0;
  flex: 1;
}
.transport .now-text strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transport .now-text small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--pv-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Knöpfe = Button-Kit (public/play/kit/teamwave-buttons.css, Thomas 6.11.); hier nur Größen und Abstände */
.transport .tw-button {
  --tw-size: 36px;
  --tw-icon: 17px;
}
.transport .play {
  --tw-size: 44px;
  --tw-icon: 20px;
}
.transport .expand {
  margin-left: 7px;
}
.transport .to-studio {
  text-decoration: none;
}

.transport-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Seek-Leiste: Zeiten links/rechts, Vorschau-Marke als abgedunkelter Rest */
.seek {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: 9px/1 "Space Grotesk", ui-sans-serif, sans-serif;
  color: var(--pv-muted);
}
.seek [data-elapsed],
.seek [data-duration] {
  flex: none;
  font-variant-numeric: tabular-nums;
}
/* Zeitleiste = Kit (kit/timeline-chips.css); hier nur Einpassen + Vorschau-Marke über der Spur */
.seek-wrap {
  flex: 1;
  min-width: 40px;
}
.seek-dim {
  position: absolute;
  z-index: 0;
  top: calc(50% - var(--tw-track, 6px) / 2);
  height: var(--tw-track, 6px);
  right: calc(var(--tw-knob, 16px) / 2);
  border-radius: 0 6px 6px 0;
  background: var(--pv-dim);
  border-left: 1px dashed var(--pv-mark);
  pointer-events: none;
}

input[type="range"] {
  accent-color: var(--pv-accent);
  height: 3px;
  cursor: pointer;
}

/* ── Rechte Spalte: Vorschau-Chip, Lautstärke, Satswheel, Studio ── */
.transport-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  min-width: 0;
}
.preview-chip {
  flex: none;
  white-space: nowrap;
}
.volicon {
  color: var(--pv-muted);
  font-size: 12px;
}
.transport .vol input {
  width: 72px;
}
.satscontrol {
  display: flex;
  align-items: center;
  gap: 10px;
}
.satsnumber {
  min-width: 64px;
  text-align: right;
}
.satsnumber strong {
  display: block;
  font: 500 18px/1.1 "Space Grotesk", ui-sans-serif, sans-serif;
  color: var(--pv-sats);
  white-space: nowrap;
}
.satsnumber strong .unit {
  font-size: 10px;
}
.satsnumber small {
  display: block;
  margin-top: 3px;
  font: 10px/1.2 "Space Grotesk", ui-sans-serif, sans-serif;
  letter-spacing: 1px;
  color: var(--pv-muted);
  white-space: nowrap;
}

/* Satswheel = Rundrad aus dem Button-Kit (kit/sats-controls.css); satswheel.js setzt --tw-progress/--tw-sweep/--tw-energy/--tw-glow/--tw-angle */
.wheel {
  flex: none;
}
.satscontrol .wheel {
  margin: 0 6px;
}

/* ── Großer Player (Vollbild, Dialog) ── */
.bigplayer {
  position: fixed;
  inset: 0;
  /* Höhe explizit: sonst rechnete WebKit mit dem Ausschnitt ohne Leiste (28 px zu kurz) */
  height: 100vh;
  height: 100dvh;
  z-index: 90;
  overflow: auto;
  box-sizing: border-box;
  color: var(--pv-ink);
  background: radial-gradient(ellipse at 25% 35%, #30223a, transparent 60%), #121217;
}
:root[data-theme="light"] .bigplayer {
  background: radial-gradient(ellipse at 25% 35%, #e9dcf0, transparent 60%), #f3f0ea;
}
.bigplayer:not([hidden]) {
  display: block;
}

.bighead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 25px 35px;
  border-bottom: 1px solid #ffffff0c;
}
:root[data-theme="light"] .bighead {
  border-bottom-color: var(--pv-line-soft);
}
.bighead-left {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.bighead .back {
  flex: none;
}
.bighead .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bighead .brand img {
  display: block;
  height: 20px;
  width: auto;
}
.bigplayer .eyebrow {
  font: 500 9px/1.4 "DM Mono", ui-monospace, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pv-muted);
}
.bighead .eyebrow {
  margin: 0;
}
.wallet-pill {
  flex: none;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bigbody {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 35px auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 75px;
  padding: 0 35px 40px;
}
.bigleft {
  max-width: 475px;
  width: 100%;
  margin: 0 auto; /* nur waagerecht mittig – bei langer Warteschlange rutschte die Spalte sonst nach unten (6.11.) */
  align-self: start;
  min-width: 0;
}
.bigcover .cover {
  display: block;
  width: 100%;
  max-width: 410px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 0;
  border-radius: 13px;
  object-fit: cover;
  box-shadow: 0 20px 70px #0004;
}
.bigtitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.bigtitle h1 {
  margin: 0 0 6px;
  font: 500 25px/1.15 "Space Grotesk", ui-sans-serif, sans-serif;
  overflow-wrap: anywhere;
}
.bigtitle p {
  margin: 0;
  color: var(--pv-muted);
  font-size: 13px;
}
.bigtitle .big-genre {
  margin-top: 5px;
  font: 500 9px/1 "DM Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-accent);
}
.bigtitle .save {
  flex: none;
}

.bigleft .seek {
  margin-top: 25px;
}
.bigleft .controls {
  justify-content: center;
  margin: 20px 0 25px;
}

.valuebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--pv-card-line);
  border-radius: 12px;
  background: var(--pv-card);
}
.valuebox-eyebrow {
  margin: 0 0 8px;
  font-size: 8px;
  color: var(--pv-accent);
}
.valuebox .satsnumber {
  text-align: left;
}
.valuebox .satsnumber strong {
  font-size: 29px;
}
.valuebox .wheel {
  margin-right: 8px;
}


.bigvolume {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
}
.bigvolume .tw-volume {
  flex: 1;
  display: flex;
  min-width: 0;
}
.bigvolume .tw-volume input {
  flex: 1;
  width: auto;
}
/* Großer Player: Play und Skip größer (Thomas 6.11.) */
.bigleft .controls .tw-button {
  --tw-size: 58px;
  --tw-icon: 25px;
}
.bigleft .controls .play {
  --tw-size: 78px;
  --tw-icon: 33px;
}

/* Wiedergabeliste rechts */
.bigqueue {
  min-width: 0;
}
.bigqueue .sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--pv-line);
}
.bigqueue h2 {
  margin: 0;
  font: 500 17px/1.2 "Space Grotesk", ui-sans-serif, sans-serif;
}
.bigqueue .eyebrow {
  text-transform: uppercase;
}
.bigqueue .queue-label {
  margin: 12px 0 15px;
  font-size: 10px;
  color: var(--pv-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 10px 8px 10px 0;
  border: 0;
  border-bottom: 1px solid var(--pv-line-soft);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.qrow.active {
  background: #ffffff07;
  box-shadow: inset 3px 0 0 var(--pv-accent);
  padding-left: 9px;
}
:root[data-theme="light"] .qrow.active {
  background: #a0339a0d;
}
.qrow:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: -2px;
}
.qrow .cover {
  width: 43px;
  height: 43px;
  flex: none;
  border-radius: 5px;
  padding: 0;
}
.qrow .qtext {
  min-width: 0;
  flex: 1;
}
.qrow .qtext strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qrow .qtext small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--pv-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qrow .qtime {
  flex: none;
  font: 500 10px/1 "DM Mono", ui-monospace, monospace;
  color: var(--pv-muted);
}
.queue-empty {
  margin: 12px 0;
  font-size: 12px;
  color: var(--pv-muted);
}

/* ── Breiten: Entwurf 1100 / 800 / 550 px ── */
@media (max-width: 1100px) {
  .transport {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    padding: 12px 22px;
  }
  .transport-right {
    gap: 8px;
  }
  .transport-right > .vol,
  .transport-right > .volicon {
    display: none;
  }
  .bigbody {
    gap: 35px;
    grid-template-columns: minmax(0, 1fr) 310px;
  }
}

@media (max-width: 800px) {
  .transport {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: 116px;
    padding: 12px 18px;
  }
  .transport-center {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .transport-center .controls {
    position: absolute;
    right: 22px;
    top: 14px;
    gap: 14px;
  }
  .transport-right {
    padding-right: 125px;
  }
  .transport .cover-slot .cover {
    width: 38px;
    height: 38px;
  }
  .transport .now {
    gap: 8px;
  }
  .transport .now-text strong {
    font-size: 11px;
  }
  .transport .now-text small {
    font-size: 9px;
  }
  .transport .satsnumber strong {
    font-size: 15px;
  }
  .bighead {
    padding: 18px;
  }
  .bighead .eyebrow {
    display: none;
  }
  .bigbody {
    grid-template-columns: 1fr;
    max-width: 620px;
    gap: 35px;
  }
  .bigcover .cover {
    max-width: 330px;
  }
}

@media (max-width: 550px) {
  .transport {
    max-width: 100vw;
    /* linke Spalte schrumpfbar, rechte so breit wie ihr Inhalt – sonst lag die Sats-Zahl über dem ⛶ */
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .transport .vol,
  .transport .volicon {
    display: none;
  }
  .transport-right {
    min-width: 0;
    justify-content: flex-end;
  }
  .transport .now {
    max-width: 200px;
  }
  .transport .expand {
    flex: none;
    min-width: 36px;
  }
  .transport .cover-slot {
    display: none;
  }
  .transport-right {
    padding-right: 96px; /* Platz für die Steuerung oben rechts (absolut) */
    gap: 6px;
  }
  /* Telefon: Vorschau-Chip entfällt (zu schmal); Weg zur Wallet = Wallet-Pille im großen Player */
  .preview-chip {
    display: none !important;
  }
  .satscontrol {
    gap: 6px;
  }
  /* Telefon: ⛶ bleibt sichtbar (einziger Weg zum großen Player), dafür ＋ weg – Speichern geht im großen Player */
  .transport .save-now {
    display: none;
  }
  .transport .controls {
    gap: 8px;
    right: 15px;
  }
  .transport .controls [data-prev] {
    display: none;
  }
  .transport .satsnumber {
    min-width: 45px;
  }
  .transport .satsnumber small {
    font-size: 7px;
    letter-spacing: 0.2px;
  }
  .transport .seek {
    font-size: 8px;
  }
  .bighead {
    gap: 8px;
  }
  .bighead .brand img {
    height: 16px;
  }
  .wallet-pill {
    max-width: 160px;
  }
  .bigbody {
    padding: 0 20px 40px;
    margin-top: 23px;
  }
  .bigtitle h1 {
    font-size: 23px;
  }
  .bigcover .cover {
    max-width: 290px;
  }
  .valuebox {
    padding: 15px;
  }
  .bigqueue {
    margin-bottom: 20px;
  }
}

/* kurze Bildschirme (Laptop): großer Player kompakter */
@media (min-width: 801px) and (max-height: 850px) {
  .bighead {
    padding: 18px 30px;
  }
  .bigbody {
    margin: 22px auto;
    gap: 60px;
  }
  .bigcover .cover {
    max-width: 250px;
  }
  .bigtitle {
    margin-top: 17px;
  }
  .bigleft .seek {
    margin-top: 16px;
  }
  .bigleft .controls {
    margin: 12px 0 16px;
  }
  .bigleft .controls .tw-button {
    --tw-size: 50px;
    --tw-icon: 22px;
  }
  .bigleft .controls .play {
    --tw-size: 64px;
    --tw-icon: 27px;
  }
  .valuebox {
    padding: 12px 17px;
  }
  .valuebox .satsnumber strong {
    font-size: 25px;
  }
  .bigvolume {
    margin-top: 13px;
  }
}

/* Schriftzug im großen Player je Thema (wie .play-brand in play.css) */
.bighead .brand .word-light { display: none; }
html[data-theme="light"] .bighead .brand .word-dark { display: none; }
html[data-theme="light"] .bighead .brand .word-light { display: inline-block; }

/* Button-Kit: Beschriftete Knöpfe in unserer Schrift, Lautstärke-Icon im großen Player, Telefon-Größen */
.tw-button--label {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 14px;
}
@media (max-width: 550px) {
  .transport .play {
    --tw-size: 40px;
    --tw-icon: 18px;
  }
}

/* Zeitleiste/Regler: beim Springen keine blaue Auswahl und kein Fokusring (Thomas 6.11.) */
.transport,
.bigleft {
  user-select: none;
  -webkit-user-select: none;
}
.seek-wrap input,
.transport .vol,
.bigvolume input {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.seek-wrap input:focus,
.seek-wrap input:focus-visible,
.transport .vol:focus,
.bigvolume input:focus {
  outline: none;
  box-shadow: none;
}