/* app-shell.css — App-Aufbau des Valueverse-Players (Thomas 9.11., BAUPLAN-PLAY §35).
   Gilt NUR unter html.tw-app: gesetzt auf app.teamwavefm.com (PLAY_APP_HOSTS), in der installierten PWA (display-mode: standalone)
   oder zum Ausprobieren per ?app=1 (?app=0 schaltet ab). Alles andere (play.css, player.css) bleibt die Website-Fassung.
   Grundsatz: gleiche Bausteine, andere Anordnung – Kopfzeile mit wischbaren Chips, Miniplayer nur Play + Satswheel,
   großer Player mit dem Rundrad als Ring um das runde Cover. Safe-Area oben/unten (iPhone-Notch, Home-Balken). */

/* ── Kopfzeile: Wellen-Logo · Chips „My Shows · Valueverse · Radio“ zum Wischen · Avatar ── */
html.tw-app .play-app .play-bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:10px;min-height:0;padding:calc(env(safe-area-inset-top,0px) + 10px) 0 8px;row-gap:0;overflow:visible;border-bottom:1px solid var(--line)}
html.tw-app .play-app .play-brand{grid-row:1;grid-column:1;gap:0;min-height:44px}
html.tw-app .play-app .play-word{display:none!important}
html.tw-app .play-app .play-wave{height:26px}
html.tw-app .play-app .play-nav{grid-row:1;grid-column:2;position:relative;display:flex;align-items:center;justify-self:stretch;gap:10px;margin:0;padding:6px 0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.tw-app .play-app .play-nav::-webkit-scrollbar{display:none}
/* angeschnittene Nachbar-Chips laufen weich aus – so sieht man, dass sich hier wischen lässt */
html.tw-app .play-app .play-nav{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
html.tw-app .play-app .play-nav::before{content:"";flex:0 0 var(--pad-l,0px)}
html.tw-app .play-app .play-nav::after{content:"";flex:0 0 var(--pad-r,0px)}
html.tw-app .play-app .play-nav .tw-chip{flex:none;scroll-snap-align:center;scroll-snap-stop:always}
html.tw-app .play-app [data-nav-playlists],html.tw-app .play-app [data-nav-artist]{display:none!important}
html.tw-app .play-app .play-tools{grid-row:1;grid-column:3;gap:8px}
/* Hell/Dunkel, Wallet und Abmelden wandern ins Konto-Fenster (Avatar antippen) */
html.tw-app .play-app .play-tools-slot,html.tw-app .play-app .play-wallet,html.tw-app .play-app .play-logout,html.tw-app .play-app .play-theme{display:none!important}
html.tw-app .play-app .play-avatar{width:38px;height:38px}

/* ── Startseite: Zurück/Home verschwinden, solange sie nichts tun; Suche über die ganze Breite; Begrüßung größer; keine Quellen-Kacheln ── */
html.tw-app .play-app .pagebar .back:disabled,html.tw-app .play-app .pagebar .home-btn:disabled{display:none}
html.tw-app .play-app .pagebar{margin-bottom:18px}
html.tw-app .play-app .welcome h1{font-size:30px}
html.tw-app .play-app .welcome .lead{font-size:17px;line-height:1.45}
html.tw-app .play-app .source-tiles{display:none}
html.tw-app .play-app .play-layout{padding-top:16px}
html.tw-app .play-app{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}

/* ── Miniplayer: Cover + Titel · PLAY (weiß, groß, mittig) · Sats-Zahl mit „Sats“ darunter, Cent daneben, Rundrad ganz rechts.
      Kein Skip, kein ⛶, keine Wiedergabeliste, keine Zeiten – die Zeitleiste ist ein farbiger Strich an der Oberkante.
      Tippen auf eine freie Fläche öffnet den großen Player (bigplayer.js). ── */
html.tw-app .transport{height:auto;min-height:74px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));cursor:pointer}
html.tw-app .transport .now{grid-column:1;grid-row:1;max-width:none;gap:10px}
html.tw-app .transport .cover-slot{display:block}
html.tw-app .transport .cover-slot .cover{width:46px;height:46px;border-radius:8px}
html.tw-app .transport .now-text strong{font-size:13px}
html.tw-app .transport .now-text small{font-size:11px;margin-top:3px}
html.tw-app .transport .save-now,html.tw-app .transport .queue-btn,html.tw-app .transport .expand{display:none!important}
html.tw-app .transport-center{grid-column:2;grid-row:1;position:static;display:block;min-width:0}
html.tw-app .transport-center .controls{position:static;gap:0}
html.tw-app .transport .controls [data-prev],html.tw-app .transport .controls [data-next]{display:none!important}
html.tw-app .transport .play{--tw-size:50px;--tw-icon:23px}
html.tw-app .transport .seek{position:absolute;left:0;right:0;top:-1px;height:3px;width:auto;gap:0;font-size:0}
html.tw-app .transport .seek [data-elapsed],html.tw-app .transport .seek [data-duration]{display:none}
html.tw-app .transport .seek-wrap{--tw-knob:0px;--tw-track:3px;flex:1;height:3px;min-width:0;pointer-events:none}
html.tw-app .transport .seek-wrap .tw-timeline__rail{left:0;right:0;height:3px;border:0;border-radius:0;background:#0e0c15;box-shadow:none}
html.tw-app .transport .seek-wrap input[type=range]{height:3px;pointer-events:none}
html.tw-app .transport .seek-wrap .seek-dim{display:none}
html.tw-app .transport-right{grid-column:3;grid-row:1;padding-right:0;gap:10px;justify-content:flex-end;min-width:0}
html.tw-app .transport .preview-chip,html.tw-app .transport .vol,html.tw-app .transport .volicon{display:none!important}
html.tw-app .transport .satscontrol{display:flex;align-items:center;gap:8px}
html.tw-app .transport .satsnumber{min-width:0;display:flex;align-items:center;gap:6px;text-align:right}
html.tw-app .transport .satsnumber strong{display:flex;flex-direction:column;align-items:center;line-height:1;font-size:18px;white-space:nowrap}
html.tw-app .transport .satsnumber strong .unit{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--pv-muted);margin-top:3px}
html.tw-app .transport .satsnumber .sats-sub{display:none}
html.tw-app .transport .satsnumber .sats-cents{display:block;font:500 11px/1 "DM Mono",ui-monospace,monospace;color:var(--pv-muted);white-space:nowrap}
html.tw-app .transport .satscontrol .wheel{margin:2px 4px 2px 6px;transform:scale(1.15)}
html.tw-app .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
html.tw-app .mock-banner{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* ── Großer Player: oben nur der Chevron (⌄, zwei Linien) und die Wallet-Pille; rundes Cover mit dem Rundrad als Ring,
      der Betrag unten in der Ringmitte; darunter Titel/Künstler + Speichern, Zeitleiste, Play + Skips, ganz links die Wiedergabeliste. ── */
html.tw-app .bigplayer{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html.tw-app .bighead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:6px 14px 0;border-bottom:0}
html.tw-app .bighead-left{grid-column:2;justify-content:center;gap:0}
html.tw-app .bighead .brand,html.tw-app .bighead .eyebrow{display:none}
html.tw-app .bighead .back{--tw-size:44px;--tw-icon:30px;background:none!important;border-color:transparent!important;box-shadow:none!important;color:var(--pv-muted)}
html.tw-app .bighead .back .ic-desktop{display:none}
html.tw-app .bighead .back .ic-app{display:contents}
html.tw-app .bighead .back .ic-app svg{transform:rotate(90deg)}
html.tw-app .wallet-pill{grid-column:3;justify-self:end;max-width:46vw}
html.tw-app .bigbody{display:block;max-width:none;margin:4px 0 0;padding:0 20px 30px}
html.tw-app .bigleft{max-width:420px;margin:0 auto}
/* Ring: das Kit-Rundrad (kit/sats-controls.css) füllt den Rahmen, das Zifferblatt bleibt weg – sichtbar bleiben Farbbogen (Wert) und Skala */
html.tw-app .bigcover-wrap{position:relative;width:min(66vw,290px);aspect-ratio:1;margin:10px auto 22px;display:grid;place-items:center}
html.tw-app .bigcover-wrap .wheel.tw-sats--dial{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border-radius:50%;cursor:ns-resize}
html.tw-app .bigcover-wrap .wheel.tw-sats--dial:before{inset:11px}
html.tw-app .bigcover-wrap .wheel .tw-sats__dialface{display:none}
html.tw-app .bigcover-wrap .wheel .tw-sats__halo{inset:-18px;filter:blur(16px)}
html.tw-app .bigcover{position:relative;z-index:3;width:76%;aspect-ratio:1;pointer-events:none}
html.tw-app .bigcover .cover{width:100%;height:100%;max-width:none;border-radius:50%;box-shadow:0 12px 40px #0009}
html.tw-app .bigcover .cover-empty{border-radius:50%;padding:18%;justify-content:center;text-align:center}
html.tw-app .bigcover-wrap .satsnumber{position:absolute;left:50%;bottom:-16px;z-index:4;transform:translateX(-50%);display:flex;align-items:baseline;gap:7px;padding:7px 15px;border-radius:999px;border:1px solid var(--pv-line);background:var(--pv-bg);text-align:center;white-space:nowrap;box-shadow:0 6px 20px #0006}
html.tw-app .bigcover-wrap .satsnumber strong{font-size:21px;line-height:1}
html.tw-app .bigcover-wrap .satsnumber strong .unit{font-size:11px;color:var(--pv-muted);margin-left:4px}
html.tw-app .bigcover-wrap .satsnumber .sats-sub{display:none}
html.tw-app .bigcover-wrap .satsnumber .sats-cents{display:inline;font:500 12px/1 "DM Mono",ui-monospace,monospace;color:var(--pv-muted)}
html.tw-app .bigtitle{margin-top:22px;align-items:center}
html.tw-app .bigtitle h1{font-size:22px}
html.tw-app .bigleft .seek{margin-top:16px}
html.tw-app .bigleft .controls{position:relative;justify-content:center;gap:18px;margin:10px 0 18px}
html.tw-app .bigleft .controls .big-queue-toggle{display:inline-flex;position:absolute;left:0;top:calc(50% - 18px)}
html.tw-app .bigleft .controls .big-queue-toggle svg{width:18px;height:18px}
html.tw-app .valuebox,html.tw-app .bigvolume{display:none}
html.tw-app .bigqueue{display:none;margin:0 auto;max-width:420px}
html.tw-app .bigplayer.show-queue .bigqueue{display:block}