/* Production bridge from the approved local island study. Existing player IDs
   and APIs remain the source of playback state and commands. */
@font-face { font-family: "Nilo Splash"; src: url("/assets/fonts/splash-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nilo Fredericka"; src: url("/assets/fonts/fredericka-the-great-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nilo Cutive"; src: url("/assets/fonts/cutive-mono-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nilo Courier"; src: url("/assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nilo Courier"; src: url("/assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { font-family: "Nilo Courier", Consolas, monospace; }
body[data-view="dashboard"] .brand strong { font-family: "Nilo Splash", Georgia, serif !important; font-weight: 400; letter-spacing: 0; }
body[data-view="dashboard"] .workspace-header h1,
body[data-view="dashboard"] .setting-head h2,
body[data-view="dashboard"] .home-space strong,
body[data-view="dashboard"] .browser-search-head h2,
body[data-view="dashboard"] .browser-current-copy h3,
body[data-view="dashboard"] .twitch-feature h2,
body[data-view="dashboard"] .twitch-section-heading h2 { font-family: "Nilo Fredericka", Georgia, serif; letter-spacing: .01em; }
body[data-view="dashboard"] .kicker,
body[data-view="dashboard"] .number,
body[data-view="dashboard"] .nilo-home-intro small,
body[data-view="dashboard"] .home-space small { font-family: "Nilo Cutive", Consolas, monospace; }
body[data-view="dashboard"]:not([data-area="overview"]) .nilo-water,
body[data-view="dashboard"][data-area="overview"] .nilo-homefall {
  display: block;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #030705;
}
.nilo-water,.nilo-homefall { display: none; }
.nilo-water canvas,.nilo-homefall canvas { display: block; width: 100%; height: 100%; }
body[data-view="dashboard"] { --vr-canvas: #030705; background: #030705 !important; }
body[data-view="dashboard"] main { position: relative; z-index: 1; }
body[data-view="dashboard"]:not([data-shell="listen"]) .topbar {
  border-right-color: #405743;
  background: #040b07dc;
  box-shadow: none;
}
body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-utility {
  position: sticky;
  top: 0;
  z-index: 70;
  justify-content: flex-end;
  min-height: 62px;
  margin-bottom: 8px;
  border: 0;
  pointer-events: none;
}
body[data-view="dashboard"] .workspace-utility .global-search { pointer-events: auto; }
body[data-view="dashboard"] .workspace-utility .utility-caption { display: none; }
body[data-view="dashboard"] .global-search { width: min(420px, 100%); }
body[data-view="dashboard"] .setting-card,
body[data-view="dashboard"] .broadcast-settings .setting-card,
body[data-view="dashboard"] .twitch-feature,
body[data-view="dashboard"] .twitch-sources,
body[data-view="dashboard"] .twitch-delivery,
body[data-view="dashboard"] .twitch-future {
  border: 2px solid #4d6849 !important;
  border-radius: 10px 2px 10px 2px !important;
  background: #0d1a12 !important;
  box-shadow: none !important;
}
body[data-area="discord"] .resource-selector {
  padding: 20px;
  border: 2px solid #4d6849;
  border-radius: 10px 2px 10px 2px;
  background: #0d1a12;
}
body[data-area="twitch"] .twitch-feature-art { background: transparent !important; }
body[data-area="twitch"] .twitch-orbit { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar {
    width: 86px;
    overflow: hidden;
    background: #040b079c;
    transition: width .28s ease, background-color .28s ease, border-color .28s ease;
  }
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:hover,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:has(:focus-visible) {
    width: 220px;
    background: #040b07f5;
  }
  body[data-view="dashboard"]:not([data-shell="listen"]) main { margin-left: 86px; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .brand { flex: 0 0 82px; height: 82px; padding-left: 2px; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .brand strong { font-size: 31px; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .brand sup { opacity: 0; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:hover .brand sup,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:has(:focus-visible) .brand sup { opacity: 1; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .top-actions { flex: 0 0 53px; height: 53px; overflow: hidden; pointer-events: none; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:hover .top-actions,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:has(:focus-visible) .top-actions { pointer-events: auto; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .brand small,
  body[data-view="dashboard"]:not([data-shell="listen"]) .panel-heading,
  body[data-view="dashboard"]:not([data-shell="listen"]) .area-nav button > span:last-child,
  body[data-view="dashboard"]:not([data-shell="listen"]) .account-line > span:last-child,
  body[data-view="dashboard"]:not([data-shell="listen"]) .top-actions {
    opacity: 0;
    transition: opacity .14s ease;
  }
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:hover .brand small,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:hover .panel-heading,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:hover .area-nav button > span:last-child,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:hover .account-line > span:last-child,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:hover .top-actions,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:has(:focus-visible) .brand small,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:has(:focus-visible) .panel-heading,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:has(:focus-visible) .area-nav button > span:last-child,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:has(:focus-visible) .account-line > span:last-child,
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar:has(:focus-visible) .top-actions { opacity: 1; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .area-nav button { min-height: 48px; padding-left: 15px; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .server-panel { margin-top: 42px; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .account-line .avatar { flex: 0 0 38px; }
}
body[data-view="dashboard"][data-area="overview"] { background: #030705; }
body[data-area="overview"] .area-page[data-area-page="overview"] {
  padding: 0;
  border: 0;
  background: transparent;
}
body[data-area="overview"] .workspace-header { display: none; }
.nilo-home-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 5vw, 72px);
  min-height: clamp(390px, 55vh, 650px);
  margin-bottom: 22px;
  padding: clamp(22px, 3vw, 44px);
  border: 0;
  background: transparent;
}
.nilo-home-intro small {
  color: #a9cf82;
  font: 11px/1.5 ui-monospace, Consolas, monospace;
  letter-spacing: .16em;
}
.nilo-home-intro h2 {
  margin: 4px 0 -10px;
  color: #eef1df;
  font: normal clamp(110px, 17vw, 260px)/.95 "Nilo Splash", Georgia, serif;
  letter-spacing: -.075em;
}
.nilo-home-intro h2 span {
  position: relative;
  top: -.45em;
  margin-left: .07em;
  color: #bddd91;
  font: normal .23em Georgia, serif;
  letter-spacing: 0;
}
.nilo-home-intro p {
  max-width: 23ch;
  margin: 15px 0 8px;
  color: #cbd9c5;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.35;
}
body[data-view="dashboard"] .home-space-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px !important;
}
body[data-view="dashboard"] .home-space,
body[data-view="dashboard"] .music-summary {
  grid-column: auto;
  order: 0;
  min-height: 170px;
  padding: 19px !important;
  border: 2px solid #4e6849 !important;
  border-radius: 10px 2px 10px 2px !important;
  background: #102017 !important;
  color: #e9eee0;
  cursor: pointer;
}
body[data-view="dashboard"] .home-space:hover,
body[data-view="dashboard"] .home-space:focus-visible {
  border-color: #bddd91 !important;
  background: #1b3020 !important;
}
body[data-view="dashboard"] .home-space strong,
body[data-view="dashboard"] .music-summary strong { font-size: clamp(19px, 1.65vw, 26px); }
body[data-view="dashboard"] .home-space small { font-size: 17px; letter-spacing: .09em; }
body[data-view="dashboard"] .home-space em { font-size: 12px; }
body[data-view="dashboard"] .home-space .platform-mark,
body[data-view="dashboard"] .home-space.music-summary .platform-mark { display: grid; }

body[data-area="music"] {
  --bg: #030705;
  --paper: #0d1a12;
  --cream-text: #e8eee0;
  --cream-muted: #b8c7b1;
  background: #030705;
}
body[data-view="dashboard"][data-area="music"]:not([data-shell="listen"]) .workspace-header { min-height: 54px !important; margin: 0 0 8px !important; }
body[data-view="dashboard"][data-area="music"]:not([data-shell="listen"]) .workspace-header h1 { font-size: 30px !important; }
body[data-area="music"] .music-room-page { gap: 16px; }
body[data-area="music"] .playback-destination {
  padding: 9px 16px;
  border: 2px solid #4d6849;
  border-radius: 10px 2px 10px 2px;
  background: #0d1a12;
}
body[data-area="music"] .browser-music-surface {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  grid-template-areas: "player search" "player status" "player library" "note note";
  align-items: start;
  gap: 14px 20px;
}
body[data-area="music"] .browser-music-layout { display: contents; }
body[data-area="music"] .browser-search-head {
  grid-area: search;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 24px !important;
  border: 2px solid #4d6849 !important;
  border-radius: 10px 2px 10px 2px !important;
  background: #0d1a12 !important;
}
body[data-area="music"] .browser-search-head h2 { font-size: clamp(26px, 2.5vw, 37px); }
body[data-area="music"] .browser-search-head p { max-width: 45ch; line-height: 1.5; }
body[data-area="music"] .browser-music-status { grid-area: status; min-height: 0; }
body[data-area="music"] .browser-music-status:empty { display: none; }
body[data-area="music"] .browser-music-surface > .microcopy { grid-area: note; }
body[data-area="music"] .browser-player-card {
  grid-area: player;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "disc" "copy" "controls";
  min-height: 0 !important;
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
}
body[data-area="music"] .browser-player-current { display: contents; }
body[data-area="music"] .browser-disc-stage {
  grid-area: disc;
  min-height: clamp(310px, 26vw, 340px);
  padding: 12px;
  overflow: visible;
  background: transparent !important;
}
body[data-area="music"] .browser-disc-stage::before { display: none; }
body[data-area="music"] .browser-disc[hidden] { display: none !important; }
body[data-area="music"] .browser-youtube-player {
  width: min(100%, 550px);
  min-width: 200px;
  min-height: 210px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid #63825a;
  background: #000;
}
body[data-area="music"] .browser-youtube-player[hidden] { display: none !important; }
body[data-area="music"] .browser-youtube-player iframe { display: block; width: 100%; height: 100%; min-height: 206px; border: 0; }
body[data-area="music"] .browser-disc {
  width: clamp(260px, 22vw, 300px);
  max-width: 88%;
  border-color: #111d14;
  box-shadow: inset 0 0 0 1px #9fc97d;
}
body[data-area="music"] .browser-current-copy,
body[data-area="music"] .browser-player-controls,
body[data-area="music"] .browser-player-empty,
body[data-area="music"] .browser-library-card {
  border: 2px solid #4d6849 !important;
  background: #0d1a12 !important;
}
body[data-area="music"] .browser-current-copy {
  grid-area: copy;
  position: relative;
  min-height: 0;
  padding: 13px 70px 12px 18px;
  border-bottom: 0 !important;
  border-radius: 10px 2px 0 0;
}
body[data-area="music"] .browser-current-copy h3 { font-size: clamp(23px, 2vw, 30px); }
.browser-current-like {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #6c8d5c;
  border-radius: 50%;
  background: transparent;
  color: #d5e7c2;
  font-size: 28px;
  line-height: 1;
}
.browser-current-like:hover,
.browser-current-like[aria-pressed="true"] { color: #dbf2a5; background: #213a27; }
body[data-area="music"] .browser-player-controls {
  grid-area: controls;
  margin-top: 0;
  border-top: 1px solid #354c35 !important;
  border-radius: 0 0 10px 2px;
}
body[data-area="music"] .browser-player-empty {
  grid-area: copy;
  min-height: 310px;
  border-radius: 10px 2px 10px 2px;
  background: #0d1a12 !important;
}
body[data-area="music"] .browser-player-empty::before { display: none; }
body[data-area="music"] .browser-library-card {
  grid-area: library;
  min-height: 330px !important;
  border-radius: 10px 2px 10px 2px !important;
}
body[data-area="music"] .browser-player-controls {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "seek seek seek" ". transport volume";
  gap: 10px;
  padding: 12px 18px;
}
body[data-area="music"] .browser-volume-control { justify-content: flex-end; }
body[data-area="music"] .browser-volume-control input { width: min(110px, 55%); }

/* Discord uses the same free record / controls / queue hierarchy. */
body[data-area="music"] .music-live {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  grid-template-areas: "scene queue" "player queue";
  gap: 14px 20px;
  align-items: start;
  background: transparent;
}
body[data-area="music"] .music-live .listening-sheet { display: contents; }
body[data-area="music"] .music-live .music-scene {
  grid-area: scene;
  min-height: clamp(310px, 26vw, 340px);
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
}
body[data-area="music"] .music-live .music-scene::before,
body[data-area="music"] .music-live .music-scene::after { display: none; }
body[data-area="music"] .music-live .music-artwork { width: clamp(260px, 22vw, 300px); max-width: 88%; }
body[data-area="music"] .music-live .music-player-card,
body[data-area="music"] .music-live .music-queue-card {
  min-width: 0;
  padding: 24px;
  border: 2px solid #4d6849;
  border-radius: 10px 2px 10px 2px;
  background: #0d1a12;
}
body[data-area="music"] .music-live .music-player-card { grid-area: player; }
body[data-area="music"] .music-live .music-queue-card { grid-area: queue; margin: 0; min-height: 470px; }
body[data-area="music"] .music-disc { box-shadow: inset 0 0 0 1px #9fc97d; }
body[data-area="music"] .music-controls { justify-content: space-between; }
body[data-area="music"] .music-controls .music-transport { order: 0; }

/* A listening room is the same composition, with its own honest control set. */
body[data-area="music"] #music-room-view {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  grid-template-areas:
    "header header"
    "disc add"
    "controls queue"
    "audio queue"
    "status queue"
    "sharing sharing";
  gap: 14px 20px;
  align-items: start;
  min-width: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-area="music"] #music-room-snapshot { display: contents; }
body[data-area="music"] .room-view-header { grid-area: header; padding: 16px 20px; border: 2px solid #4d6849; border-radius: 10px 2px 10px 2px; background: #0d1a12; }
body[data-area="music"] .room-record-stage { grid-area: disc; display: grid; place-items: center; min-height: clamp(310px, 26vw, 340px); }
body[data-area="music"] .room-record-stage .music-disc { width: clamp(260px, 22vw, 300px); max-width: 88%; aspect-ratio: 1; }
body[data-area="music"] .room-record-stage .music-disc[hidden] { display: none; }
body[data-area="music"] .room-youtube-player:not([hidden]) {
  display: block;
  width: min(100%, 560px);
  aspect-ratio: 16 / 9;
  min-height: 210px;
  border: 2px solid #4d6849;
  background: #050705;
}
body[data-area="music"] .room-youtube-player iframe { display: block; width: 100%; height: 100%; border: 0; }
body[data-area="music"] #music-room-soundcloud-widget:not([hidden]) {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body[data-area="music"] #music-room-view.is-playing .room-record-stage .music-disc { animation-play-state: running; }
body[data-area="music"] .room-playback-summary,
body[data-area="music"] .room-audio-boundary,
body[data-area="music"] .room-enqueue,
body[data-area="music"] .room-queue,
body[data-area="music"] .room-sharing {
  min-width: 0;
  padding: 22px;
  border: 2px solid #4d6849;
  border-radius: 10px 2px 10px 2px;
  background: #0d1a12;
}
body[data-area="music"] .room-playback-summary { grid-area: controls; gap: 13px; }
body[data-area="music"] .room-playback-summary > strong { color: #d6e5c3; letter-spacing: .05em; }
body[data-area="music"] #music-room-current { color: #ecf1e4; font: normal clamp(25px, 2.4vw, 36px)/1.15 Georgia, serif; }
body[data-area="music"] #music-room-position { font-variant-numeric: tabular-nums; }
body[data-area="music"] .room-transport { justify-content: center; }
body[data-area="music"] .room-transport button { min-height: 44px; }
body[data-area="music"] .room-audio-boundary { grid-area: audio; }
body[data-area="music"] .room-enqueue { grid-area: add; }
body[data-area="music"] .room-queue { grid-area: queue; min-height: 300px; }
body[data-area="music"] #music-room-status { grid-area: status; }
body[data-area="music"] .room-sharing { grid-area: sharing; }

@media (max-width: 1050px) {
  body[data-view="dashboard"] .home-space-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-area="music"] .browser-music-surface { grid-template-columns: minmax(0, 1fr); grid-template-areas: "player" "search" "status" "library" "note"; }
  body[data-area="music"] .music-live { grid-template-columns: minmax(0, 1fr); grid-template-areas: "scene" "player" "queue"; }
  body[data-area="music"] .music-live .music-queue-card { min-height: 0; }
  body[data-area="music"] #music-room-view {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "disc" "controls" "audio" "status" "add" "queue" "sharing";
  }
}
@media (max-width: 650px) {
  .nilo-home-intro { align-items: start; flex-direction: column; min-height: 0; }
  .nilo-home-intro h2 { font-size: clamp(72px, 23vw, 108px); }
  body[data-view="dashboard"] .home-space-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-view="dashboard"] .home-space,
  body[data-view="dashboard"] .music-summary { min-height: 155px; }
  body[data-area="music"] .browser-disc-stage,
  body[data-area="music"] .music-live .music-scene,
  body[data-area="music"] .room-record-stage { min-height: 330px; }
  body[data-area="music"] .browser-disc,
  body[data-area="music"] .music-live .music-artwork,
  body[data-area="music"] .room-record-stage .music-disc { width: min(72vw, 285px); }
  body[data-area="music"] .browser-search-head,
  body[data-area="music"] .music-live .music-player-card,
  body[data-area="music"] .music-live .music-queue-card { padding: 20px; }
  body[data-area="music"] .browser-current-copy { padding: 20px 72px 15px 20px; }
  body[data-area="music"] .browser-player-controls { grid-template-columns: minmax(0, 1fr); grid-template-areas: "seek" "transport" "volume"; padding: 17px 12px; }
  body[data-area="music"] .browser-volume-control { justify-content: center; }
}

/* Stable music composition across personal, room, and Discord destinations. */
.twitch-button img { width: 19px; height: 19px; object-fit: contain; }
body[data-area="overview"] .nilo-home-intro { min-height: calc(100dvh - 100px); margin-bottom: 0; }
.nilo-home-intro h2 { display: flex; align-items: flex-start; gap: .18em; width: max-content; max-width: 100%; letter-spacing: 0; }
.nilo-home-intro .nilo-wordmark { position: static; display: inline-block; margin: 0; color: inherit; font: inherit; letter-spacing: -.075em; }
.nilo-home-intro .nilo-wordmark-star { position: static; display: inline-block; flex: none; margin: .12em 0 0; color: #bddd91; font: normal .22em/1 Georgia, serif; letter-spacing: 0; }
body[data-area="music"] .browser-music-surface,
body[data-area="music"] .music-live,
body[data-area="music"] #music-room-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body[data-area="music"] .browser-player-card { grid-template-rows: minmax(365px, 39vh) 160px auto; align-content: start; }
body[data-area="music"] .browser-disc-stage,
body[data-area="music"] .music-live .music-scene,
body[data-area="music"] .room-record-stage { min-height: 365px; }
body[data-area="music"] .browser-disc,
body[data-area="music"] .music-live .music-artwork,
body[data-area="music"] .room-record-stage .music-disc { width: clamp(280px, 25vw, 350px); }
body[data-area="music"] .browser-youtube-player,
body[data-area="music"] .room-youtube-player:not([hidden]) { width: min(100%, 640px); min-height: 270px; }
body[data-area="music"] .browser-player-empty { height: 160px; padding: 18px 72px 18px 20px; place-content: center start; justify-items: start; text-align: left; border-radius: 10px 2px 0 0; border-bottom: 0 !important; }
body[data-area="music"] .browser-player-empty h3 { margin: 0 0 5px; }
body[data-area="music"] .browser-player-empty p { margin: 0; }
body[data-area="music"] .browser-current-copy { height: 160px; padding: 18px 78px 18px 20px; overflow: hidden; }
body[data-area="music"] .browser-current-copy h3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.browser-current-like { box-sizing: border-box; flex: 0 0 44px; min-width: 44px; max-width: 44px; min-height: 44px; max-height: 44px; inset: 17px 17px auto auto; text-align: center; line-height: 1; transform: none; }
body[data-area="music"] .browser-player-controls { min-height: 130px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); grid-template-areas: "seek seek seek" ". transport volume"; align-content: center; }
body[data-area="music"] .browser-volume-control { justify-content: flex-end; }
body[data-area="music"] .browser-transport { min-width: 286px; }
body[data-area="music"] .browser-transport button { flex: 0 0 42px; width: 42px; height: 42px; }
body[data-area="music"] .browser-transport #browser-play-pause { flex-basis: 54px; }
body[data-area="music"] .music-live .music-player-card { min-height: 250px; }
body[data-area="music"] .music-live .music-queue-card,
body[data-area="music"] .room-queue { min-height: 420px; }
body[data-area="music"] .room-playback-summary { min-height: 250px; }
@media (max-width: 1050px) {
  body[data-area="music"] .browser-music-surface,
  body[data-area="music"] .music-live,
  body[data-area="music"] #music-room-view { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  body[data-area="overview"] .nilo-home-intro { min-height: calc(100dvh - 90px); }
  body[data-area="music"] .browser-player-card { grid-template-rows: 320px 160px auto; }
  body[data-area="music"] .browser-disc-stage,
  body[data-area="music"] .music-live .music-scene,
  body[data-area="music"] .room-record-stage { min-height: 320px; }
  body[data-area="music"] .browser-disc,
  body[data-area="music"] .music-live .music-artwork,
  body[data-area="music"] .room-record-stage .music-disc { width: min(75vw, 290px); }
  body[data-area="music"] .browser-player-controls { grid-template-columns: minmax(0,1fr); grid-template-areas: "seek" "transport" "volume"; }
  body[data-area="music"] .browser-transport { min-width: 0; }
  body[data-area="music"] .browser-volume-control { justify-content: center; }
}