/* frontend/app.css */
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-primary: #0d0d0d;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #252525;
  --text-primary: #e8e8e8;
  --text-secondary: #999;
  --text-muted: #666;
  --accent: #c8102e;
  --accent-hover: #e01838;
  --border: #333;
  --player-height: 360px;
  --thumb-size: 40px;
  --stage-black: #090a0b;
  --amp-charcoal: #17191c;
  --paper-white: #faf8f3;
  --steel: #7d858f;
  --signal-red: #c51f35;
  --stage-height: clamp(210px, 50vw, 300px);
}

@media (width <= 600px) {
  :root {
    --player-height: 200px;
    --thumb-size: 32px;
  }
}

.stage-lyrics.hero-stage {
  overflow: hidden;
  background: linear-gradient(180deg, #090a0b59, var(--stage-black) 48%, #090a0b59), repeating-linear-gradient(90deg, transparent 0 79px, #ffffff05 80px);
  border-radius: 10px;
}

.lyrics-stage {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-height: 0;
  inset: 0;
}

.lyrics-rail {
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  mask-image: linear-gradient(#0000, #000 22% 78%, #0000);
  flex: 1;
  padding: 45% 8% 48%;
}

.lyrics-rail::-webkit-scrollbar {
  display: none;
}

.lyric-line {
  display: block;
  color: var(--steel);
  text-align: left;
  letter-spacing: -.025em;
  cursor: pointer;
  opacity: .38;
  transform-origin: left center;
  background: none;
  border: 0;
  width: 100%;
  padding: .42em 0;
  transition: color .22s, opacity .22s, transform .22s;
  font-family: Arial Narrow, Roboto Condensed, sans-serif;
  font-size: clamp(1.25rem, 4.5vw, 2.65rem);
  font-weight: 750;
  line-height: 1.08;
}

.lyric-line:hover {
  opacity: .75;
  color: var(--text-primary);
  outline: none;
}

.lyric-line:focus-visible {
  opacity: .75;
  color: var(--text-primary);
  outline: none;
}

.lyric-line.past {
  opacity: .2;
}

.lyric-line.active {
  color: var(--paper-white);
  opacity: 1;
  text-shadow: 0 4px 30px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateX(.35rem)scale(1.035);
}

.lyrics-source {
  position: absolute;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font: .66rem / 1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  bottom: 10px;
  right: 14px;
}

.lyrics-plain {
  white-space: pre-wrap;
  overflow-y: auto;
  color: var(--paper-white);
  padding: 42px clamp(24px, 8vw, 80px) 58px;
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  line-height: 1.8;
}

.lyrics-empty {
  display: flex;
  color: var(--text-muted);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  gap: 8px;
  height: 100%;
}

.lyrics-empty strong {
  color: var(--text-primary);
  font-size: 1.15rem;
}

.stage-switch {
  display: inline-flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px;
}

.stage-switch button {
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 6px 9px;
  font-size: .72rem;
}

.stage-switch button.active {
  background: var(--accent);
  color: #fff;
}

.btn-focus {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border)) !important;
}

.btn-focus.active {
  background: var(--accent) !important;
  color: #fff !important;
}

.ma-trigger {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  letter-spacing: .04em;
  cursor: pointer;
  border-radius: 5px;
  padding: 6px 9px;
  font: .68rem / 1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.ma-trigger:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.ma-backdrop {
  position: fixed;
  z-index: 100;
  display: flex;
  backdrop-filter: blur(5px);
  background: #000000b8;
  justify-content: flex-end;
  inset: 0;
}

.ma-browser {
  overflow-y: auto;
  background: var(--stage-black);
  border-left: 1px solid var(--border);
  width: min(880px, 94vw);
  height: 100%;
  padding: clamp(18px, 4vw, 42px);
  box-shadow: -24px 0 70px #000000b3;
}

.ma-browser-head {
  display: flex;
  align-items:  flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.ma-browser-head > div {
  flex: 1;
}

.ma-browser-head h2 {
  color: var(--paper-white);
  letter-spacing: -.035em;
  font-family: Arial Narrow, Roboto Condensed, sans-serif;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: .95;
}

.ma-kicker {
  display: block;
  color: var(--accent);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font: .68rem / 1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.ma-close {
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 2rem;
}

.ma-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 22px;
}

.ma-search input {
  border: 1px solid var(--border);
  background: var(--amp-charcoal);
  color: var(--text-primary);
  border-radius: 7px;
  min-width: 0;
  padding: 11px 13px;
}

.ma-search button, .focus-action {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 7px;
  padding: 10px 16px;
  font-weight: 700;
}

.ma-message {
  color: var(--text-secondary);
  padding: 22px 0;
}

.ma-message.error {
  color: #ff899b;
}

.ma-results {
  display: grid;
  gap: 7px;
}

.ma-results button, .ma-similar button {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid var(--border);
  background: var(--amp-charcoal);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  border-radius: 7px;
  gap: 3px 18px;
  padding: 12px 14px;
}

.ma-results span, .ma-similar span {
  color: var(--text-muted);
  font-size: .8rem;
}

.ma-identity {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  align-items:  center;
  gap: clamp(18px, 4vw, 38px);
}

.ma-photo {
  aspect-ratio: 4 / 3;
  display: grid;
  overflow: hidden;
  background: var(--amp-charcoal);
  border: 1px solid var(--border);
  place-items:  center;
}

.ma-photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ma-photo span {
  color: var(--text-muted);
  font: 2rem ui-monospace, monospace;
}

.ma-logo {
  display: block;
  object-fit: contain;
  object-position: left center;
  max-width: min(330px, 100%);
  max-height: 110px;
  margin-bottom: 14px;
}

.ma-identity-copy p {
  color: var(--text-secondary);
}

.ma-actions {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
  margin-top: 18px;
}

.ma-actions a {
  color: var(--text-secondary);
  font-size: .8rem;
}

.ma-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  gap: 4px;
  margin: 30px 0 18px;
}

.ma-tabs button {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  padding: 10px 12px;
}

.ma-tabs button.active {
  color: var(--paper-white);
  border-color: var(--accent);
}

.ma-overview dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--border);
  gap: 1px;
}

.ma-overview dl div {
  background: var(--amp-charcoal);
  padding: 12px 14px;
}

.ma-overview dl .wide {
  grid-column: 1 / -1;
}

.ma-overview dt {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font: .65rem ui-monospace, monospace;
}

.ma-overview dd {
  color: var(--text-primary);
  margin: 4px 0 0;
}

.ma-members {
  margin-top: 26px;
}

.ma-members h3 {
  margin-bottom: 14px;
}

.ma-members h4 {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 16px 0 6px;
  font-size: .75rem;
}

.ma-members p {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
}

.ma-members p span {
  color: var(--text-muted);
  text-align: right;
}

.ma-discography, .ma-similar {
  display: grid;
  gap: 7px;
}

.ma-release {
  border: 1px solid var(--border);
  background: var(--amp-charcoal);
}

.ma-release-head {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 12px;
  width: 100%;
  padding: 8px;
}

.ma-release-head div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.ma-release-head span {
  color: var(--text-muted);
  font-size: .78rem;
}

.ma-cover {
  aspect-ratio: 1;
  display: grid;
  overflow: hidden;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  place-items:  center;
  width: 58px;
}

.ma-cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ma-tracklist {
  padding: 4px 18px 16px 78px;
}

.ma-tracklist > p {
  color: var(--text-muted);
  margin-bottom: 8px;
  font-size: .75rem;
}

.ma-tracklist li {
  display: flex;
  color: var(--text-secondary);
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.ma-tracklist time {
  color: var(--text-muted);
  font: .72rem ui-monospace, monospace;
}

.ma-similar button {
  grid-template-columns: 1fr auto;
}

.ma-similar button span {
  grid-column: 1;
}

.ma-similar button b {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--accent);
  align-self:  center;
}

@media (width <= 650px) {
  .ma-browser {
    width: 100vw;
    padding: 16px 12px 32px;
  }

  .ma-identity {
    grid-template-columns: 1fr;
  }

  .ma-photo {
    max-height: 220px;
  }

  .ma-overview dl {
    grid-template-columns: 1fr;
  }

  .ma-overview dl .wide {
    grid-column: auto;
  }

  .ma-tracklist {
    padding-left: 16px;
  }

  .stage-switch {
    order: 20;
    width: 100%;
  }

  .stage-switch button {
    flex: 1;
  }

  .btn-focus {
    max-width: 135px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lyrics-rail {
    scroll-behavior: auto;
  }

  .lyric-line {
    transition: none;
  }

  .lyric-line.active {
    transform: none;
  }
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  line-height: 1.5;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
}

.app-video {
  max-width: 720px;
}

.language-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 6px;
  gap: 2px;
  padding: 2px;
}

.language-switch button {
  cursor: pointer;
  filter: grayscale(.75);
  opacity: .55;
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 3px 5px;
  line-height: 1;
}

.language-switch button:hover, .language-switch button.active {
  background: var(--bg-tertiary);
  filter: none;
  opacity: 1;
}

@media (width <= 600px) {
  .ma-trigger {
    font-size: 0;
  }

  .ma-trigger:after {
    content: "MA";
    font-size: .68rem;
  }

  .app {
    padding: 12px 8px;
  }
}

.header {
  display: flex;
  border-bottom: 1px solid var(--border);
  position: relative;
  align-items:  center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
}

.header-brand, .header-context, .header-tools {
  display: flex;
  align-items:  center;
}

.header-context {
  gap: 8px;
  min-width: 0;
}

.header-tools {
  gap: 12px;
}

.transport-controls, .feedback-controls, .player-view-controls {
  display: contents;
}

.header h1 {
  letter-spacing: .02em;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.5rem;
  font-weight: 800;
}

.header-sub {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .7rem;
  font-weight: 500;
}

@media (width <= 600px) {
  .header-sub {
    display: none;
  }

  .header h1 {
    font-size: 1.2rem;
  }
}

.header .genre-badge {
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 600;
}

.header .reconnect-badge {
  color: var(--text-muted);
  font-size: .7rem;
}

.header-spacer {
  flex: 1;
}

.settings-trigger {
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  background: none;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
  transition: background .15s, color .15s, border-color .15s;
  font-size: 1.1rem;
}

.settings-trigger:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.settings-popover {
  position: absolute;
  z-index: 50;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  gap: 14px;
  min-width: 260px;
  padding: 14px;
  top: 56px;
  right: 16px;
  box-shadow: 0 12px 30px #00000080;
}

.popover-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popover-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-size: .7rem;
}

.popover-buttons {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: 6px;
  gap: 4px;
  padding: 3px;
}

.popover-buttons button {
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  flex: 1;
  padding: 6px 10px;
  font-size: .85rem;
}

.popover-buttons button:hover {
  color: var(--text-primary);
}

.popover-buttons button.active {
  background: var(--accent);
  color: #fff;
}

.popover-themes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.theme-chip {
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  align-items:  center;
  gap: 8px;
  padding: 6px 8px;
  font-size: .8rem;
}

.theme-chip:hover {
  color: var(--text-primary);
}

.theme-chip.active {
  border-color: var(--accent);
  color: var(--text-primary);
}

.theme-swatch {
  border: 1px solid #ffffff1a;
  border-radius: 50%;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.theme-classic .theme-swatch {
  background: linear-gradient(135deg, #c8102e 50%, #0d0d0d 50%);
}

.theme-midnight .theme-swatch {
  background: linear-gradient(135deg, #4f9cf9 50%, #0a1730 50%);
}

.theme-forest .theme-swatch {
  background: linear-gradient(135deg, #5ec27e 50%, #0d1a10 50%);
}

.theme-sunset .theme-swatch {
  background: linear-gradient(135deg, #ff9a3c 50%, #2b1437 50%);
}

.theme-lavender .theme-swatch {
  background: linear-gradient(135deg, #b388ff 50%, #1a112e 50%);
}

.theme-mono .theme-swatch {
  background: linear-gradient(135deg, #fff 50%, #111 50%);
}

.theme-vapor .theme-swatch {
  background: linear-gradient(135deg, #ff77c6 50%, #41d1ff 50%);
}

.theme-paper .theme-swatch {
  background: linear-gradient(135deg, #c0392b 50%, #f5f1e6 50%);
}

.theme-terminal .theme-swatch {
  background: linear-gradient(135deg, #00ff7f 50%, #001a00 50%);
}

.theme-gold .theme-swatch {
  background: linear-gradient(135deg, #d4af37 50%, #100c04 50%);
}

.header .yt-toggle {
  color: var(--text-muted);
  cursor: pointer;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-left: auto;
  padding: 2px 8px;
  transition: background .15s;
  font-size: .75rem;
}

.header .yt-toggle:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.hero {
  position: relative;
  background: radial-gradient(ellipse at top, var(--bg-tertiary) 0%, var(--bg-primary) 80%);
  border: 1px solid var(--border);
  display: flex;
  border-radius: 14px;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  padding: 22px 18px 16px;
  box-shadow: 0 8px 24px #0006;
}

.hero-stage {
  position: relative;
  height: var(--stage-height);
  min-height: var(--stage-height);
  overflow: hidden;
  background: var(--stage-black);
  display: flex;
  border-radius: 10px;
  justify-content: center;
  align-items:  center;
  width: 100%;
}

.player-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.stage-vinyl .player-frame, .stage-lyrics .player-frame {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.stage-video.hero-stage {
  justify-content: center;
  align-items: stretch;
}

.stage-video .player-frame {
  overflow: hidden;
  background: #000;
  border-radius: 8px;
  height: 100%;
}

.player-frame iframe, #yt-player, #yt-player-inner {
  display: block;
  width: 100%;
  height: 100%;
}

.player-frame iframe {
  border: 0;
}

.player-placeholder {
  position: absolute;
  display: flex;
  color: var(--text-muted);
  background: #0006;
  border-radius: 8px;
  justify-content: center;
  align-items:  center;
  font-size: 1rem;
  inset: 0;
}

.vinyl-row {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.vinyl-rail {
  display: flex;
  overflow: hidden;
  flex: 1;
  align-items:  center;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
}

.vinyl-rail-history {
  -webkit-mask-image: linear-gradient(90deg, #0000 0%, #000 45%);
  mask-image: linear-gradient(90deg, #0000 0%, #000 45%);
  flex-direction: row-reverse;
  justify-content: flex-start;
  padding-right: 12px;
}

.vinyl-rail-queue {
  -webkit-mask-image: linear-gradient(90deg, #000 55%, #0000 100%);
  mask-image: linear-gradient(90deg, #000 55%, #0000 100%);
  justify-content: flex-start;
  padding-left: 12px;
}

.vinyl-disc {
  position: relative;
  display: flex;
  cursor: pointer;
  outline: none;
  background: #050505;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  padding: 0;
  transition: transform .25s, opacity .25s, box-shadow .25s;
}

.vinyl-disc:focus-visible {
  box-shadow: 0 0 0 3px var(--accent);
}

.vinyl-disc:disabled {
  cursor: default;
}

.vinyl-large {
  width: 260px;
  height: 260px;
  box-shadow: 0 14px 38px #000000b3, inset 0 0 0 2px #ffffff0f;
}

.vinyl-small {
  width: 84px;
  height: 84px;
  box-shadow: 0 4px 14px #0000008c;
}

.vinyl-small:not(:disabled):hover {
  z-index: 5;
  box-shadow: 0 6px 18px #000000b3;
  opacity: 1 !important;
  transform: scale(1.12) !important;
}

.vinyl-grooves {
  position: absolute;
  pointer-events: none;
  background: repeating-radial-gradient(circle, #ffffff0b 0 1px, #0000 1px 4px);
  border-radius: 50%;
  inset: 5%;
}

.vinyl-art {
  object-fit: cover;
  z-index: 1;
  border-radius: 50%;
  width: 62%;
  height: 62%;
  box-shadow: 0 0 0 3px #000000d9;
}

.vinyl-art-blank {
  background: var(--bg-tertiary);
  display: block;
}

.vinyl-hole {
  position: absolute;
  background: var(--bg-primary);
  z-index: 3;
  border-radius: 50%;
  width: 10%;
  height: 10%;
  box-shadow: inset 0 0 0 1px #000c;
}

.vinyl-disc.spinning .vinyl-art, .vinyl-disc.spinning .vinyl-grooves {
  animation: vinyl-spin 8s linear infinite;
}

@keyframes vinyl-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl-disc.spinning .vinyl-art, .vinyl-disc.spinning .vinyl-grooves {
    animation: none;
  }
}

.hero-meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 56px;
}

.hero-meta .track-title {
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 500;
}

.hero-meta .track-artist {
  color: var(--accent);
  letter-spacing: .01em;
  font-size: 1.1rem;
  font-weight: 700;
}

.hero-meta .track-artist.clickable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.hero-meta .track-artist.clickable:hover {
  color: var(--accent-hover);
}

.hero-meta .track-meta {
  display: flex;
  color: var(--text-muted);
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: .78rem;
}

.hero-meta .track-meta span {
  background: #ffffff0a;
  border-radius: 4px;
  padding: 2px 8px;
}

.album-credit {
  display: flex;
  color: var(--text-secondary);
  justify-content: center;
  align-items:  center;
  gap: 7px;
  min-height: 20px;
  font: .72rem / 1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.album-credit time:before {
  content: "· ";
  color: var(--text-muted);
}

.ma-rating {
  display: inline-flex;
  color: var(--text-muted);
  align-items:  center;
  gap: 5px;
}

.ma-stars {
  position: relative;
  display: inline-block;
  color: #414141;
  letter-spacing: .06em;
  line-height: 1;
}

.ma-stars-fill {
  position: absolute;
  overflow: hidden;
  color: #d7a928;
  white-space: nowrap;
  inset: 0 auto 0 0;
}

.ma-rating em {
  font: inherit;
  font-style: normal;
}

.ma-rating.unrated {
  opacity: .55;
}

.hero .progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-bar {
  background: var(--bg-tertiary);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  touch-action: none;
  border-radius: 3px;
  width: 100%;
  height: 6px;
}

.progress-bar:hover {
  background: color-mix(in srgb, var(--bg-tertiary) 82%, white);
}

.progress-bar .fill {
  background: var(--accent);
  pointer-events: none;
  border-radius: 3px;
  height: 100%;
  transition: width .3s linear;
}

.progress-text {
  color: var(--text-muted);
  text-align: right;
  font-size: .78rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:  center;
  gap: 8px;
}

.btn-play {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  display: flex !important;
  border-radius: 50% !important;
  justify-content: center !important;
  align-items:  center !important;
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
}

.btn-play:hover:not(:disabled) {
  transform: scale(1.04);
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.controls button {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 6px;
  padding: 8px 16px;
  transition: background .15s, border-color .15s;
  font-size: .9rem;
}

@media (width <= 600px) {
  .controls button {
    padding: 10px 18px;
    font-size: 1rem;
  }
}

.controls button:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}

.controls button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.controls .btn-secondary {
  border-color: var(--border);
  background: none;
  padding: 8px 10px;
  font-size: .8rem;
}

.controls .btn-secondary:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--text-muted);
}

.controls .btn-feedback {
  background: var(--bg-tertiary);
  border-color: var(--border);
  padding: 8px 12px;
  transition: background .15s, border-color .15s, transform .15s;
  font-size: 1rem;
  line-height: 1;
}

.controls .btn-feedback:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.controls .btn-feedback.flash {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.15);
}

.volume-menu, .view-menu {
  position: relative;
}

.controls .audio-trigger, .controls .view-trigger {
  display: grid;
  place-items:  center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.audio-trigger svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

.audio-trigger .audio-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.view-trigger svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  width: 17px;
  height: 17px;
}

.volume-menu.open .audio-trigger, .view-menu.open .view-trigger {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.volume-popover, .view-popover {
  position: absolute;
  z-index: 30;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-secondary) 96%, black);
  border-radius: 8px;
  width: 270px;
  padding: 13px;
  bottom: calc(100% + 10px);
  right: 0;
  box-shadow: 0 14px 38px #0000007a;
}

.view-popover {
  width: 286px;
}

.view-popover .popover-label {
  display: block;
  margin-bottom: 8px;
}

.volume-popover:after, .view-popover:after {
  content: "";
  position: absolute;
  border: 6px solid #0000;
  border-top-color: var(--border);
  top: 100%;
  right: 12px;
}

.volume-popover-head {
  display: flex;
  color: var(--text-primary);
  justify-content: space-between;
  font-size: .78rem;
}

.volume-popover-head span {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.volume-popover > input[type="range"] {
  accent-color: var(--accent);
  width: 100%;
  margin: 11px 0 13px;
}

.controls .audio-normalization {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  text-align: left;
  background: var(--bg-tertiary);
  align-items:  center;
  gap: 9px;
  width: 100%;
  padding: 9px;
}

.controls .audio-normalization:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg-tertiary) 86%, var(--accent));
}

.audio-normalization-mark {
  display: grid;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: 50%;
  place-items:  center;
  width: 28px;
  height: 28px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.audio-normalization.active .audio-normalization-mark {
  color: #fff;
  background: var(--accent);
}

.audio-normalization > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.audio-normalization strong {
  font-size: .72rem;
  font-weight: 650;
}

.audio-normalization small {
  color: var(--text-muted);
  font-size: .62rem;
  line-height: 1.25;
}

.audio-normalization em {
  color: var(--text-muted);
  font: .66rem / 1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.audio-normalization.active em {
  color: var(--accent);
}

.mode-section {
  display: flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
}

.rock-confirmation {
  display: flex;
  flex-direction: column;
  align-items:  center;
  padding: 8px 0 0;
}

.lets-rock {
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  cursor: pointer;
  border-radius: 6px;
  width: min(330px, 100%);
  padding: 8px 18px 7px;
  transition: color .15s, border-color .15s, background .15s;
}

.lets-rock.dirty {
  color: #fff;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 72%, var(--bg-tertiary));
}

.lets-rock:hover:not(:disabled) {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.lets-rock:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lets-rock:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.lets-rock span {
  display: block;
  letter-spacing: .09em;
  font-size: .86rem;
  font-weight: 750;
}

.lets-rock small {
  display: block;
  color: var(--text-muted);
  letter-spacing: .015em;
  margin-top: 1px;
  font-size: .62rem;
}

.lets-rock.dirty small, .lets-rock:hover:not(:disabled) small {
  color: #ffffffbd;
}

.config-error {
  color: var(--accent);
  text-align: center;
  margin: 6px 0 0;
  font-size: .76rem;
}

.mode-toggle {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: 6px;
  gap: 4px;
  padding: 3px;
}

.mode-toggle button {
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  flex: 1;
  padding: 8px 12px;
  transition: background .15s, color .15s;
  font-size: .9rem;
  font-weight: 500;
}

.mode-toggle button:hover {
  color: var(--text-primary);
}

.mode-toggle button.active {
  background: var(--accent);
  color: #fff;
}

.mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
}

.mode-row-label {
  color: var(--text-secondary);
  min-width: 90px;
  font-size: .8rem;
}

.mode-genre, .mode-band {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mode-row > select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 6px;
  flex: 1;
  min-width: 140px;
  padding: 6px 8px;
  font-size: .9rem;
}

.anchor-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anchor-frequency-wrap {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin-top: 6px;
}

.anchor-frequency-wrap input[type="range"] {
  accent-color: var(--accent);
  flex: 1;
  max-width: 120px;
}

.frequency-label {
  color: var(--text-secondary);
  text-align: right;
  min-width: 35px;
  font-size: .85rem;
  font-weight: 600;
}

.anchor-input {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
  padding: 8px 10px;
  font-size: .95rem;
}

.anchor-input:focus {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.anchor-status {
  color: var(--text-muted);
  font-size: .8rem;
}

.anchor-error {
  color: var(--accent);
  font-size: .8rem;
}

.anchor-candidates {
  list-style: none;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 6px;
  margin: 0;
  padding: 0;
}

.anchor-candidates li button {
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  background: none;
  border: 0;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
}

.anchor-candidates li + li {
  border-top: 1px solid var(--border);
}

.anchor-candidates li button:hover {
  background: var(--bg-secondary);
}

.candidate-name {
  font-size: .95rem;
}

.candidate-hint {
  color: var(--text-muted);
  font-size: .75rem;
}

.anchor-badge {
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  align-items:  center;
  gap: 8px;
  padding: 8px 10px;
}

.anchor-label {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-size: .75rem;
}

.anchor-name {
  flex: 1;
  font-size: .95rem;
  font-weight: 600;
}

.anchor-source {
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .7rem;
}

.btn-sm {
  padding: 4px 10px;
  font-size: .8rem;
}

.decade-chips {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 6px;
}

.decade-chip {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 999px;
  padding: 4px 12px;
  transition: background .15s, color .15s, border-color .15s;
  font-size: .85rem;
}

.decade-chip:hover {
  color: var(--text-primary);
}

.decade-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.spread-slider {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: 6px;
  flex: 1;
  gap: 4px;
  padding: 3px;
}

.spread-step {
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  flex: 1;
  padding: 6px 8px;
  transition: background .15s, color .15s;
  font-size: .85rem;
}

.spread-step:hover {
  color: var(--text-primary);
}

.spread-step.active {
  background: var(--accent);
  color: #fff;
}

@media (width <= 600px) {
  .mode-row {
    flex-direction: column;
    align-items: stretch;
  }

  .mode-row-label, .mode-row > select {
    min-width: 0;
  }
}

.loading {
  display: flex;
  color: var(--text-muted);
  justify-content: center;
  align-items:  center;
  padding: 32px;
}

.kbd-hint {
  text-align: center;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 12px;
  font-size: .7rem;
}

.kbd-hint kbd {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: .7rem;
}

@media (width <= 600px) {
  .kbd-hint {
    display: none;
  }
}

@media (width <= 700px) {
  .hero {
    padding: 16px 10px 12px;
  }

  .vinyl-large {
    width: 180px;
    height: 180px;
  }

  .vinyl-small {
    width: 56px;
    height: 56px;
  }

  .vinyl-row {
    gap: 6px;
    min-height: 200px;
  }

  .hero-stage {
    height: var(--stage-height);
    min-height: var(--stage-height);
  }

  .stage-video .player-frame {
    height: 100%;
  }
}

@media (width <= 480px) {
  .vinyl-rail {
    max-width: 30%;
  }
}

[data-theme="midnight"] {
  --bg-primary: #07101f;
  --bg-secondary: #0e1a2f;
  --bg-tertiary: #182840;
  --text-primary: #e6efff;
  --text-secondary: #92a8c4;
  --text-muted: #5a6a82;
  --accent: #4f9cf9;
  --accent-hover: #6db0ff;
  --border: #1d2a40;
}

[data-theme="forest"] {
  --bg-primary: #0a140d;
  --bg-secondary: #11201a;
  --bg-tertiary: #1a2f24;
  --text-primary: #e2efe2;
  --text-secondary: #9bb59b;
  --text-muted: #60745f;
  --accent: #5ec27e;
  --accent-hover: #79d295;
  --border: #1f3329;
}

[data-theme="sunset"] {
  --bg-primary: #160b1e;
  --bg-secondary: #251433;
  --bg-tertiary: #361e47;
  --text-primary: #ffe9d8;
  --text-secondary: #d29a82;
  --text-muted: #8d6b5f;
  --accent: #ff9a3c;
  --accent-hover: #ffb364;
  --border: #3b2353;
}

[data-theme="lavender"] {
  --bg-primary: #100b1c;
  --bg-secondary: #1a112e;
  --bg-tertiary: #261a40;
  --text-primary: #ebe2ff;
  --text-secondary: #ada3cf;
  --text-muted: #6e6593;
  --accent: #b388ff;
  --accent-hover: #c8a8ff;
  --border: #2d2046;
}

[data-theme="mono"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #161616;
  --bg-tertiary: #232323;
  --text-primary: #f5f5f5;
  --text-secondary: #b3b3b3;
  --text-muted: #6e6e6e;
  --accent: #fff;
  --accent-hover: #d8d8d8;
  --border: #2c2c2c;
}

[data-theme="mono"] .btn-play, [data-theme="mono"] .mode-toggle button.active, [data-theme="mono"] .spread-step.active, [data-theme="mono"] .decade-chip.active, [data-theme="mono"] .popover-buttons button.active, [data-theme="mono"] .header .genre-badge {
  color: #000 !important;
}

[data-theme="vapor"] {
  --bg-primary: #100a25;
  --bg-secondary: #1c1140;
  --bg-tertiary: #2a1c5a;
  --text-primary: #f4eaff;
  --text-secondary: #a9bdff;
  --text-muted: #6e5fa8;
  --accent: #ff77c6;
  --accent-hover: #ff9bd1;
  --border: #321f6e;
}

[data-theme="vapor"] .hero {
  background: linear-gradient(160deg, #2a1c5a 0%, #150a32 60%, #41d1ff22 100%);
}

[data-theme="vapor"] .hero-meta .track-artist {
  text-shadow: 0 0 10px #ff77c6, 0 0 20px #41d1ff;
}

[data-theme="paper"] {
  --bg-primary: #f5f1e6;
  --bg-secondary: #fff;
  --bg-tertiary: #e9e2cf;
  --text-primary: #2b2620;
  --text-secondary: #6b6356;
  --text-muted: #8d8472;
  --accent: #c0392b;
  --accent-hover: #d24a3c;
  --border: #d9d1be;
}

[data-theme="paper"] .vinyl-disc {
  background: #1a1612;
}

[data-theme="paper"] .vinyl-hole {
  background: #f5f1e6;
}

[data-theme="paper"] .player-frame {
  background: #2b2620;
}

[data-theme="terminal"] {
  --bg-primary: #000a00;
  --bg-secondary: #001a00;
  --bg-tertiary: #002a00;
  --text-primary: #00ff7f;
  --text-secondary: #5cd87a;
  --text-muted: #2d8045;
  --accent: #00ff7f;
  --accent-hover: #5cffa7;
  --border: #003c0f;
}

[data-theme="terminal"] body, [data-theme="terminal"] .hero, [data-theme="terminal"] .anchor-input, [data-theme="terminal"] select {
  font-family: JetBrains Mono, Fira Code, monospace;
}

[data-theme="terminal"] .btn-play {
  color: #000 !important;
}

[data-theme="gold"] {
  --bg-primary: #100c04;
  --bg-secondary: #1a1408;
  --bg-tertiary: #2a2010;
  --text-primary: #f7ecc7;
  --text-secondary: #c4b78d;
  --text-muted: #806f4a;
  --accent: #d4af37;
  --accent-hover: #e8c548;
  --border: #2e2614;
}

[data-theme="gold"] .btn-play, [data-theme="gold"] .mode-toggle button.active, [data-theme="gold"] .spread-step.active, [data-theme="gold"] .decade-chip.active, [data-theme="gold"] .popover-buttons button.active {
  color: #100c04 !important;
}

[data-view="cards"] .vinyl-disc {
  background: var(--bg-tertiary);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 6px 18px #00000073;
}

[data-view="cards"] .vinyl-large {
  width: 240px;
  height: 240px;
}

[data-view="cards"] .vinyl-small {
  width: 96px;
  height: 96px;
}

[data-view="cards"] .vinyl-art {
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
}

[data-view="cards"] .vinyl-hole, [data-view="cards"] .vinyl-grooves {
  display: none;
}

[data-view="cards"] .vinyl-disc.spinning .vinyl-art, [data-view="cards"] .vinyl-disc.spinning .vinyl-grooves {
  animation: none;
}

[data-view="cards"] .vinyl-disc:after {
  content: attr(aria-label);
  position: absolute;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  background: linear-gradient(#0000, #000000d9);
  padding: 6px 8px;
  font-size: .7rem;
  bottom: 0;
  left: 0;
  right: 0;
}

[data-view="cards"] .vinyl-large:after {
  padding: 12px 14px;
  font-size: .85rem;
}

[data-view="compact"] .vinyl-row {
  gap: 6px;
  min-height: 120px;
}

[data-view="compact"] .vinyl-large {
  width: 110px;
  height: 110px;
}

[data-view="compact"] .vinyl-small {
  width: 60px;
  height: 60px;
}

[data-view="compact"] .hero-stage {
  --stage-height: 180px;
}

[data-view="compact"] .hero {
  gap: 8px;
  padding: 14px 14px 10px;
}

[data-view="compact"] .hero-meta .track-title {
  font-size: 1.15rem;
}

[data-view="compact"] .hero-meta .track-artist {
  font-size: 1rem;
}

.controls .stage-switch {
  display: inline-flex;
  padding: 3px;
}

.controls .stage-switch button {
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 6px 9px;
  font-size: .72rem;
}

.controls .stage-switch button.active, .controls .btn-focus.active {
  background: var(--accent);
  color: #fff;
}

[data-view="compact"] .stage-lyrics.hero-stage {
  min-height: var(--stage-height);
}

.mode-section.focus-paused > :not(.focus-note) {
  opacity: .42;
  pointer-events: none;
  user-select: none;
}

.focus-note {
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
  background: #d82a2a14;
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: .8rem;
}

.hero-meta .track-title {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 650;
}

.album-credit {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  align-self:  center;
  padding: 3px 6px;
}

.album-credit:hover {
  color: var(--text-primary);
  outline: 1px solid var(--border);
  background: #ffffff0d;
}

.album-credit:focus-visible {
  color: var(--text-primary);
  outline: 1px solid var(--border);
  background: #ffffff0d;
}

.queue-loader {
  display: flex;
  color: var(--text-muted);
  align-items:  center;
  gap: 9px;
  max-width: 195px;
}

.queue-loader small {
  font: .67rem / 1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.queue-loader-disc {
  background: radial-gradient(circle, var(--accent) 0 3px, #080808 4px 12px, #282828 13px 14px, #080808 15px);
  opacity: .55;
  border-radius: 50%;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}

.queue-loader.active .queue-loader-disc {
  opacity: 1;
  animation: queue-spin 1.15s linear infinite;
}

@keyframes queue-spin {
  to {
    transform: rotate(360deg);
  }
}

.lyrics-offset {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #090a0be6;
  border-radius: 5px;
  bottom: 9px;
  left: 14px;
}

.lyrics-offset button {
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  min-width: 30px;
  padding: 4px 7px;
  font: .68rem / 1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.lyrics-offset button:last-child {
  border-right: 0;
}

.lyrics-offset button:hover {
  color: #fff;
  background: var(--accent);
}

.ma-review-link {
  display: inline-flex;
  color: var(--accent);
  text-underline-offset: 3px;
  margin: 3px 0 12px;
  font-size: .76rem;
}

.controls .btn-secondary.active {
  border-color: var(--accent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .queue-loader.active .queue-loader-disc {
    animation: none;
  }
}

@media (width <= 600px), (height <= 500px) and (pointer: coarse) {
  :root {
    --stage-height: clamp(218px, 68vw, 280px);
    --touch-target: 44px;
  }

  body {
    overflow-x: hidden;
  }

  .app {
    padding: max(12px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    width: 100%;
  }

  .header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand tools" "context context";
    gap: 8px 10px;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }

  .header-brand {
    grid-area: brand;
    min-width: 0;
  }

  .header h1 {
    font-size: 1.35rem;
  }

  .header-sub, .header-spacer {
    display: none;
  }

  .header-tools {
    grid-area: tools;
    gap: 6px;
  }

  .header-context {
    grid-area: context;
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .header-context:empty {
    display: none;
  }

  .header .genre-badge {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .header .reconnect-badge {
    white-space: nowrap;
  }

  .language-switch {
    min-height: var(--touch-target);
  }

  .language-switch button {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: 0;
    font-size: 1rem;
  }

  .ma-trigger, .settings-trigger {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }

  .ma-trigger {
    padding: 0 10px;
    font-size: 0;
  }

  .ma-trigger:after {
    content: "MA";
    font-size: .68rem;
  }

  .settings-popover {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top))  + 56px);
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    max-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
    overflow-y: auto;
    width: auto;
    min-width: 0;
  }

  .theme-chip {
    min-height: var(--touch-target);
  }

  .hero {
    border-radius: 12px;
    gap: 12px;
    padding: 12px 10px 14px;
  }

  .hero-stage {
    border-radius: 8px;
  }

  .vinyl-row {
    gap: 6px;
  }

  .vinyl-large, [data-view="cards"] .vinyl-large {
    width: clamp(150px, 48vw, 190px);
    height: clamp(150px, 48vw, 190px);
  }

  .vinyl-small, [data-view="cards"] .vinyl-small {
    width: 44px;
    height: 44px;
  }

  .vinyl-rail {
    flex: 0 52px;
    gap: 0;
    max-width: 52px;
  }

  .vinyl-rail-history {
    padding-right: 2px;
  }

  .vinyl-rail-queue {
    padding-left: 2px;
  }

  .vinyl-rail .vinyl-disc:nth-child(n+2) {
    display: none;
  }

  .queue-loader {
    justify-content: center;
  }

  .queue-loader small {
    display: none;
  }

  [data-view="compact"] .hero-stage {
    --stage-height: 190px;
  }

  [data-view="compact"] .vinyl-large {
    width: 132px;
    height: 132px;
  }

  .hero-meta {
    min-height: 48px;
  }

  .hero-meta .track-title {
    overflow-wrap: anywhere;
    font-size: clamp(1.12rem, 5vw, 1.4rem);
    line-height: 1.2;
  }

  .hero-meta .track-artist {
    overflow-wrap: anywhere;
  }

  .album-credit {
    min-height: var(--touch-target);
    flex-wrap: wrap;
  }

  .progress-bar {
    height: 10px;
  }

  .controls {
    flex-flow: column;
    gap: 10px;
    width: 100%;
  }

  .transport-controls, .feedback-controls, .player-view-controls {
    display: flex;
    justify-content: center;
    align-items:  center;
    gap: 8px;
    width: 100%;
  }

  .feedback-controls {
    align-items: stretch;
  }

  .player-view-controls {
    flex-wrap: wrap;
  }

  .controls button {
    min-height: var(--touch-target);
  }

  .transport-controls > button:not(.btn-play) {
    min-width: 62px;
    padding-inline-start: 18px;
    padding-inline-end: 18px;
  }

  .controls .btn-feedback {
    width: var(--touch-target);
    min-width: var(--touch-target);
    padding: 0;
  }

  .controls .btn-focus {
    flex: 1;
    min-width: 0;
    max-width: 190px;
  }

  .controls .stage-switch {
    flex: 1 0 100%;
    order: 0;
    width: 100%;
    padding: 3px;
  }

  .controls .stage-switch button {
    min-height: var(--touch-target);
    padding: 8px 10px;
    font-size: .78rem;
  }

  .controls .audio-trigger, .controls .view-trigger {
    width: var(--touch-target);
    height: var(--touch-target);
  }

  .controls .btn-secondary {
    min-height: var(--touch-target);
  }

  .volume-popover, .view-popover {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
  }

  .volume-popover:after, .view-popover:after {
    display: none;
  }

  .popover-buttons button {
    min-height: var(--touch-target);
  }

  .controls .audio-normalization {
    min-height: 58px;
  }

  .mode-section {
    gap: 16px;
    padding: 12px;
  }

  .mode-toggle button, .mode-row > select, .spread-step, .decade-chip, .anchor-input, .anchor-badge .btn-sm, .lets-rock {
    min-height: var(--touch-target);
  }

  .mode-row {
    gap: 8px;
  }

  .mode-row-label {
    letter-spacing: .02em;
    font-size: .76rem;
  }

  .decade-chips {
    gap: 7px;
  }

  .decade-chip {
    padding: 7px 13px;
  }

  .anchor-frequency-wrap input[type="range"] {
    min-height: var(--touch-target);
    max-width: none;
  }

  .anchor-badge {
    flex-wrap: wrap;
  }

  .anchor-name {
    overflow-wrap: anywhere;
    min-width: 45%;
  }

  .lyrics-offset button {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }

  .lyrics-source {
    bottom: 14px;
  }

  .ma-browser {
    padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    width: 100vw;
    height: 100dvh;
  }

  .ma-close {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }

  .ma-search input, .ma-search button {
    min-height: var(--touch-target);
  }

  .ma-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ma-tabs::-webkit-scrollbar {
    display: none;
  }

  .ma-tabs button {
    min-height: var(--touch-target);
    white-space: nowrap;
  }

  .ma-results button, .ma-similar button, .ma-release-head, .focus-action {
    min-height: var(--touch-target);
  }
}

@media (height <= 500px) and (pointer: coarse) {
  :root {
    --stage-height: min(58dvh, 220px);
  }

  .app {
    max-width: 720px;
  }

  .hero {
    padding-block-start: 10px;
    padding-block-end: 10px;
  }

  .vinyl-large, [data-view="cards"] .vinyl-large {
    width: min(48dvh, 180px);
    height: min(48dvh, 180px);
  }
}