/* Full-screen listening: a large dial, a fading queue and unframed controls. */
body.is-tablet { background: #d9dbdd; }
html[data-tablet-theme="night"] body.is-tablet { background: #17191c; }
.is-tablet > #bg, .is-tablet .topbar, .is-tablet .player, .is-tablet .queue { display: none; }
.is-tablet .view { position: fixed; inset: 0; padding: 0; margin: 0; max-width: none; overflow: clip; }
.tablet {
  --tablet-bg: #d9dbdd; --tablet-ink: #343a40; --tablet-muted: #626970;
  --tablet-artist: #747c83; --tablet-secondary: #7a8289; --tablet-hover: #101820; --tablet-active: #242d35;
  --tablet-fill: #fafbfc; --tablet-track: #b8bdc2; --tablet-focus: #525c65;
  --tablet-icon-border: rgba(85,95,105,.16); --tablet-notice-bg: #f6f7f8;
  --tablet-marker: #111; --tablet-ring: rgba(80,90,100,.2);
  --tablet-time: #343a40; --tablet-duration: #747c83;
  --tablet-row-h: clamp(48px, 7vh, 70px);
  position: relative; width: 100%; height: 100%; height: 100dvh;
  padding: max(64px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
  color: var(--tablet-ink); background: var(--tablet-bg); overflow: clip; color-scheme: light;
  font: 300 16px/1.4 var(--font);
}
html[data-tablet-theme="night"] .tablet {
  --tablet-bg: #17191c; --tablet-ink: #cbd0d6; --tablet-muted: #969ea7;
  --tablet-artist: #929ba5; --tablet-secondary: #8d97a2; --tablet-hover: #f0f2f5; --tablet-active: #e5e9ee;
  --tablet-fill: #b6c0cb; --tablet-track: #3b424b; --tablet-focus: #b6c0cb;
  --tablet-icon-border: #414952; --tablet-notice-bg: #292e35;
  --tablet-marker: #cbd0d6; --tablet-ring: #3b424b;
  --tablet-time: #cbd0d6; --tablet-duration: #929ba5;
  color-scheme: dark;
}
.tablet:fullscreen { width: 100%; height: 100%; }
.tablet button, .tablet a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tablet :focus-visible { outline: 2px solid var(--tablet-focus); outline-offset: 2px; }
.tablet-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.tablet-header { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 24px; right: max(24px, env(safe-area-inset-right)); height: 44px; z-index: 3; pointer-events: none; }
.tablet-header-actions { height: 100%; display: flex; justify-content: flex-end; gap: 12px; }
.tablet-header-actions > * { pointer-events: auto; }
.tablet .icon-btn, .tablet .play-btn, .tablet .tablet-library {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; color: var(--tablet-ink); background: transparent; border: 0; box-shadow: none;
  transition: color .15s, opacity .15s, transform .15s;
}
.tablet .icon-btn { width: 48px; height: 48px; border-radius: 8px; }
.tablet .icon-btn svg { width: 24px; height: 24px; stroke-width: 1.4; }
.tablet .icon-btn:hover, .tablet .play-btn:hover, .tablet .tablet-library:hover { background: transparent; box-shadow: none; color: var(--tablet-hover); }
.tablet .icon-btn:active, .tablet .play-btn:active, .tablet .tablet-library:active { background: transparent; box-shadow: none; transform: scale(.94); }
.tablet-header .icon-btn { width: 44px; height: 44px; color: var(--tablet-muted); }
.tablet-header .icon-btn svg { width: 21px; height: 21px; }
.tablet-visualizers {
  position: absolute; z-index: 6; width: 240px; padding: 6px; border-radius: 16px;
  color: var(--tablet-ink); background: var(--tablet-notice-bg); border: 1px solid var(--tablet-icon-border);
  box-shadow: 0 12px 40px #00000018; overflow-y: auto; overscroll-behavior: contain;
}
.tablet-visualizers[hidden] { display: none; }
.tablet-visualizers button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px;
  text-align: left; padding: 10px 14px; border-radius: 10px; border: 0; box-shadow: none;
  color: var(--tablet-muted); background: transparent; font: 400 15px/1.4 var(--font);
}
.tablet-visualizers button[aria-pressed="true"] { color: var(--tablet-active); background: var(--tablet-bg); }
.tablet-visualizers button:hover { color: var(--tablet-active); background: var(--tablet-bg); box-shadow: none; }
.tablet-visualizers svg { flex: none; width: 25px; height: 25px; stroke-width: 1.3; }
.tablet-visualizers small { display: block; margin-top: 2px; color: var(--tablet-muted); font-size: 11px; font-weight: 300; }
@media (max-width: 380px) {
  .tablet .tablet-header { left: 8px; right: 8px; }
  .tablet .tablet-header .icon-btn { width: 40px; flex-shrink: 0; }
}
.tablet-body { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 64px); }
.tablet-listening { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 100px; justify-items: center; }
.tablet-visual { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.tablet-visual canvas { display: block; width: 100%; height: 100%; }
.tablet-disc-label { position: absolute; inset: 50% 0 auto; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; font-variant-numeric: tabular-nums; }
#tabletElapsed { font-size: clamp(16px, 1.8vw, 24px); line-height: 1.2; font-weight: 300; letter-spacing: -.04em; color: var(--tablet-time); }
#tabletDuration { font-size: 12px; font-weight: 300; color: var(--tablet-duration); }
.tablet:is([data-visualizer="orbit"], [data-visualizer="spiral"], [data-visualizer="nexus"]) .tablet-disc-label { inset: auto 0 2px; transform: none; flex-direction: row; gap: 10px; }
.tablet:is([data-visualizer="orbit"], [data-visualizer="spiral"], [data-visualizer="nexus"]) #tabletElapsed { font-size: 14px; letter-spacing: 0; }
.tablet:is([data-visualizer="orbit"], [data-visualizer="spiral"], [data-visualizer="nexus"]) #tabletDuration { font-size: 11px; }
.tablet input[type=range] { height: 36px; width: 100%; margin: 0; touch-action: pan-y; }
.tablet input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 4px; background: linear-gradient(to right, var(--tablet-fill) var(--p,0%), var(--tablet-track) var(--p,0%)); box-shadow: none; }
.tablet input[type=range]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -5px; background: var(--tablet-fill); border: 0; box-shadow: 0 1px 3px rgba(50,60,70,.15); opacity: 1; }
.tablet input[type=range]::-moz-range-track { height: 2px; border-radius: 4px; background: var(--tablet-track); box-shadow: none; }
.tablet input[type=range]::-moz-range-progress { height: 2px; background: var(--tablet-fill); }
.tablet input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; background: var(--tablet-fill); box-shadow: 0 1px 3px rgba(50,60,70,.15); }
.tablet-transport { width: 100%; max-width: 560px; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 30px); }
.tablet-transport .tablet-skip { width: 80px; height: 80px; }
.tablet-transport .tablet-skip svg { width: 48px; height: 48px; }
.tablet-transport .play-btn { width: 100px; height: 100px; border-radius: 8px; }
.tablet-transport .play-btn svg { width: 68px; height: 68px; }
.tablet .play-btn.loading { padding: 0; }
.tablet .play-btn.loading::after { display: none; }
.tablet-transport .tablet-secondary { color: var(--tablet-secondary); width: 48px; height: 56px; }
.tablet-transport .tablet-secondary svg { width: 27px; height: 27px; }
.tablet .tablet-secondary[aria-pressed="true"] { color: var(--tablet-active); }
.tablet-transport .tablet-secondary[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 2px; width: 14px; height: 2px; background: currentColor; }
.tablet .tablet-secondary { position: relative; }
.tablet-playlist { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 100px; }
.tablet-queue {
  --queue-pad: 0px;
  position: relative; min-width: 0; min-height: 0; height: 100%; padding: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  scroll-snap-type: y mandatory;
  cursor: grab; user-select: none; touch-action: pan-x pinch-zoom;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.tablet-queue::-webkit-scrollbar { display: none; }
.tablet-queue.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.tablet-queue .tablet-row { cursor: inherit; touch-action: pan-x pinch-zoom; }
.tablet-queue::before, .tablet-queue::after { content: ""; display: block; height: var(--queue-pad); }
.tablet-row {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
  width: 100%; height: var(--tablet-row-h); min-height: 44px; padding: 8px 12px; margin: 0;
  text-align: left; color: var(--tablet-muted); font-weight: 300;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  scroll-snap-align: center;
}
.tablet-row-copy { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; transform: scale(var(--row-scale, 1)); transform-origin: left center; }
.tablet-bubble { display: contents; }
.tablet-row:hover, .tablet-row:active { background: transparent; box-shadow: none; color: var(--tablet-ink); }
.tablet-row-artist, .tablet-row-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 300 clamp(14px, 1.4vw, 19px)/1.4 var(--font); }
.tablet-row-title { flex: 0 1 auto; max-width: 62%; }
.tablet-row-artist { flex: 0 1 auto; max-width: 42%; color: var(--tablet-artist); }
.tablet-row-separator { flex: none; color: var(--tablet-artist); font-size: 14px; }
.tablet-row.active { color: var(--tablet-ink); }
.tablet-row.active .tablet-row-title, .tablet-row.active .tablet-row-artist { font-weight: 700; }
.tablet-track-icon { display: block; flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid var(--tablet-icon-border); border-radius: 50%; transform: scale(var(--row-scale, 1)); transform-origin: left center; }
.tablet-track-icon.has-visual-icon { border-color: transparent; background: var(--tablet-bg); isolation: isolate; }
.tablet .visual-icon-image { mix-blend-mode: lighten; }
html[data-tablet-theme="light"] .tablet .visual-icon-image { filter: invert(1); mix-blend-mode: darken; }
/* The same queue becomes a scrollable collection of audio icons. */
.tablet[data-queue-view="grid"] .tablet-queue {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(136px, 100%), 1fr));
  align-content: start; gap: 16px 18px; padding: 12px;
  scroll-snap-type: none;
  mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.tablet[data-queue-view="grid"] .tablet-queue::before,
.tablet[data-queue-view="grid"] .tablet-queue::after { display: none; }
.tablet[data-queue-view="grid"] .tablet-row {
  flex-direction: column; align-items: center; gap: 14px; height: auto; min-height: 166px;
  padding: 12px 8px; border-radius: 10px; scroll-snap-align: none;
}
.tablet[data-queue-view="grid"] .tablet-track-icon {
  flex: none; width: min(104px, 75%); height: auto; aspect-ratio: 1; transform: none;
}
.tablet[data-queue-view="grid"] .tablet-row.active .tablet-track-icon { outline: 2px solid var(--tablet-active); outline-offset: 5px; }
.tablet[data-queue-view="grid"] .tablet-row-copy { display: block; flex: none; width: 100%; transform: none; }
.tablet[data-queue-view="grid"] .tablet-row-title,
.tablet[data-queue-view="grid"] .tablet-row-artist { max-width: 100%; font-size: 14px; }
.tablet[data-queue-view="grid"] .tablet-row-artist { margin-top: 3px; font-size: 12px; }
.tablet[data-queue-view="grid"] .tablet-row-separator { display: none; }
.tablet[data-queue-view="grid"] .tablet-queue.is-empty { display: block; padding: 0; mask-image: none; -webkit-mask-image: none; }
/* A packed cloud of physical circles; every labelled bubble is a queue item. */
.tablet[data-queue-view="bubbles"] .tablet-queue {
  isolation: isolate; scroll-snap-type: none; touch-action: pan-y pinch-zoom;
  mask-image: linear-gradient(transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.tablet[data-queue-view="bubbles"] .tablet-queue::before,
.tablet[data-queue-view="bubbles"] .tablet-queue::after { display: none; }
.bubble-world { position: relative; width: 100%; }
.tablet[data-queue-view="bubbles"] .tablet-row,
.bubble-pearl {
  position: absolute; left: 0; top: 0; display: block;
  width: var(--bubble-size); height: var(--bubble-size); min-height: 0; padding: 0;
  transform: translate3d(var(--bubble-x, 0px), var(--bubble-y, 0px), 0);
  border-radius: 50%; border: 0; background: #fbfcfd; color: #31373b;
  box-shadow: none; scroll-snap-align: none; touch-action: none;
}
.tablet[data-queue-view="bubbles"] .tablet-row { cursor: grab; z-index: 1; transition: none; }
.tablet[data-queue-view="bubbles"] .tablet-row:active { transform: translate3d(var(--bubble-x), var(--bubble-y), 0); }
.tablet[data-queue-view="bubbles"] .tablet-row.is-held { cursor: grabbing; z-index: 2; box-shadow: 0 8px 28px #00000012; }
.bubble-pearl { pointer-events: none; }
.tablet[data-queue-view="bubbles"] .tablet-bubble {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; gap: 7px;
}
.tablet[data-queue-view="bubbles"] .tablet-row.active .tablet-bubble { box-shadow: inset 0 0 0 2px var(--tablet-active); }
.tablet[data-queue-view="bubbles"] .tablet-row:focus-visible { outline-offset: -5px; outline-color: #31373b; }
.tablet[data-queue-view="bubbles"] .tablet-track-icon {
  flex: none; width: 20px; height: 20px; border: 0; transform: none; background: transparent;
}
.tablet[data-queue-view="bubbles"] .tablet-track-icon:not(.has-visual-icon) { display: none; }
.tablet[data-queue-view="bubbles"] .visual-icon-image { filter: none; mix-blend-mode: normal; }
html[data-tablet-theme="light"] .tablet[data-queue-view="bubbles"] .visual-icon-image { filter: none; mix-blend-mode: normal; }
.tablet[data-queue-view="bubbles"] .tablet-row-copy {
  position: relative; display: block; flex: none; width: 76%; transform: none;
  padding: 0; text-align: center; pointer-events: none;
}
.tablet[data-queue-view="bubbles"] .tablet-row-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;
  text-wrap: balance; max-width: 100%; font-size: var(--bubble-font, 13px); line-height: 1.15;
  color: #31373b;
}
.tablet[data-queue-view="bubbles"] .tablet-row-artist {
  max-width: 100%; font-size: max(10px, calc(var(--bubble-font, 13px) - 2px)); margin-top: 5px; color: #636a70;
}
.tablet[data-queue-view="bubbles"] .tablet-row-separator { display: none; }
.tablet[data-queue-view="bubbles"] .tablet-queue.is-empty { mask-image: none; -webkit-mask-image: none; }
.tablet-volume { display: flex; justify-content: center; align-items: center; }
.tablet-volume-control { display: flex; align-items: center; gap: 16px; width: min(70%, 310px); min-width: 190px; }
.tablet-volume-control .icon-btn { color: var(--tablet-muted); }
.tablet-volume-high { display: flex; color: var(--tablet-muted); }
.tablet-volume-high svg { width: 22px; height: 22px; stroke-width: 1.4; }
.tablet-queue.is-empty { padding: 0; mask-image: none; -webkit-mask-image: none; }
.tablet-queue.is-empty::before, .tablet-queue.is-empty::after { display: none; }
.tablet-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; color: var(--tablet-muted); }
.tablet-empty > svg { width: 32px; height: 32px; stroke-width: 1.3; }
.tablet-empty p { margin: 0; font-size: 18px; }
.tablet-empty .tablet-library { min-height: 48px; padding: 0 16px; text-decoration: underline; text-underline-offset: 5px; }
.tablet-notice { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 85%; padding: 12px 18px; border-radius: 12px; background: var(--tablet-notice-bg); color: var(--tablet-ink); font-size: 14px; z-index: 5; }
/* Portrait keeps all controls in view; only the wheel-shaped queue scrolls. */
@media (max-aspect-ratio: 9/10) {
  .tablet { --tablet-row-h: clamp(44px, 5.5vh, 60px); padding: max(54px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .tablet-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
  .tablet[data-queue-view="bubbles"] .tablet-body { grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr); }
  .tablet-listening { grid-template-rows: minmax(0, 1fr) 84px; }
  .tablet-visual { max-width: 700px; }
  .tablet-transport { max-width: 480px; gap: 18px; }
  .tablet-transport .play-btn { width: 88px; height: 84px; }
  .tablet-transport .play-btn svg { width: 60px; height: 60px; }
  .tablet-transport .tablet-skip { width: 72px; height: 72px; }
  .tablet-transport .tablet-skip svg { width: 44px; height: 44px; }
  .tablet-playlist { grid-template-rows: minmax(0, 1fr) 52px; }
  .tablet-row-title, .tablet-row-artist { font-size: clamp(14px, 2.2vw, 18px); }
  .tablet-volume-control { width: min(55%, 310px); }
}
@media (max-width: 520px) {
  #tabletDuration { display: none; }
  .tablet { --tablet-row-h: 44px; padding-left: 12px; padding-right: 12px; }
  .tablet-header { right: 12px; }
  .tablet-header-actions { gap: 4px; }
  .tablet-transport { gap: 8px; }
  .tablet-transport .tablet-skip { width: 56px; height: 64px; }
  .tablet-transport .tablet-skip svg { width: 38px; height: 38px; }
  .tablet-transport .play-btn { width: 76px; height: 76px; }
  .tablet-transport .play-btn svg { width: 54px; height: 54px; }
  .tablet-transport .tablet-secondary { width: 44px; }
  .tablet-row { gap: 8px; }
  .tablet-row-copy { gap: 4px; }
  .tablet-row-title, .tablet-row-artist { font-size: 14px; }
}
@media (max-height: 600px) and (min-aspect-ratio: 9/10) {
  .tablet { --tablet-row-h: 44px; padding-top: 48px; padding-bottom: 8px; }
  .tablet-listening { grid-template-rows: minmax(0, 1fr) 64px; }
  .tablet-playlist { grid-template-rows: minmax(0, 1fr) 64px; }
  .tablet-transport { gap: 6px; }
  .tablet-transport .play-btn { width: 72px; height: 64px; }
  .tablet-transport .play-btn svg { width: 50px; height: 50px; }
  .tablet-transport .tablet-skip { width: 56px; height: 56px; }
  .tablet-transport .tablet-skip svg { width: 38px; height: 38px; }
  .tablet-row-title, .tablet-row-artist { font-size: 14px; }
}
@media (max-width: 360px) {
  .tablet-transport { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tablet button, .tablet a { transition: none; }
  .tablet .play-btn.loading { animation: none; }
  .tablet-row-copy, .tablet-track-icon { transform: none; }
}