/* Background palettes stay atmospheric; the controls have their own ink and accents. */
body.spatial-room {
  --ui-ink: 244, 238, 232;
  --ui-blue: 211, 235, 142;
  --ui-peach: 207, 154, 105;
  --ui-violet: 168, 185, 128;
  --theme-text-rgb: var(--ui-ink);
  --theme-accent-rgb: var(--ui-blue);
  --theme-panel-rgb: 12, 10, 8;
}
.spatial-room .listening-intro h1 { color: #d2cbbb; font-weight: 400; }
.spatial-room .listening-intro h1 em { color: #bed18d; }
.spatial-room .listening-intro .label, .spatial-room .topline { color: #bdc994; }
.spatial-room .catalog-heading h2 { color: #c3d39d; }
.spatial-room .track-item { --tile-accent: var(--ui-blue); }
.spatial-room .track-item:nth-child(3n+2) { --tile-accent: var(--ui-peach); }
.spatial-room .track-item:nth-child(3n) { --tile-accent: var(--ui-violet); }
.spatial-room .track-art { color: rgb(var(--tile-accent)); background: rgba(var(--tile-accent), .055); }
.spatial-room .track-item.is-playing .track-select {
  border-color: rgba(var(--tile-accent), .32);
  background: linear-gradient(110deg, rgba(var(--tile-accent), .11), #100d0960 70%);
  box-shadow: inset 2px 0 rgba(var(--tile-accent), .8), inset 0 1px 0 #ffffff0b;
}
.spatial-room .track-item .track-select::after { background: rgb(var(--tile-accent)); }
.spatial-room .track-artist { color: #aaa395; }
.spatial-room .text-wave-mask { color: rgb(var(--theme-accent-rgb)); }
.spatial-room .theme-hint > span[aria-hidden] { color: #c4d891; filter: none; }
.spatial-room .chat-hint::before { background: #cba48e; box-shadow: 0 0 8px #cba48e33; }

/* Matte, warm sprayed pigment. Keep the original breath, dissolution and fragments. */
body.spatial-room .logo-vector { mix-blend-mode: normal; animation: logoVectorDissolve 10.5s ease-in-out infinite; filter: drop-shadow(0 3px 3px #0006); }
.spatial-room .reactive-logo { animation: reactiveLogoBreath 11s ease-in-out infinite; }
.spatial-room .logo-ink-base { opacity: 1; }
.spatial-room .logo-vector-core { opacity: 1; }
.spatial-room .logo-vector-outline { opacity: calc(.12 + var(--logo-high) * .25); }
.spatial-room .logo-grain { opacity: .38; mix-blend-mode: soft-light; }
.spatial-room .logo-grain rect { animation: pigment-drift 19s ease-in-out infinite alternate; }
@keyframes pigment-drift { to { transform: translate(2px, -1px) scale(1.01); } }
.spatial-room .logo-veins { opacity: .48; }
.spatial-room .logo-reactive-canvas { mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%); }
body.spatial-room .logo-wrap.release-logo::before { inset: -175% -42% -190% -38%; border-radius: 0; background: url('assets/logo-ink-blot.svg') center / 100% 100% no-repeat; filter: none; transform: rotate(-4deg); opacity: 0; animation: logo-darkness 71s ease-in-out infinite; }
.logo-acid { position: fixed; z-index: 30; pointer-events: none; }
body.spatial-room .logo-wrap.is-acid .reactive-logo { animation: none; opacity: var(--acid-return, 0) !important; }
body.spatial-room .logo-wrap.is-acid .logo-particles { visibility: hidden; }
@keyframes logo-darkness { 0%, 19%, 68%, 100% { opacity: 0; transform: rotate(-6deg) scale(.85); } 34%, 48% { opacity: .9; transform: rotate(-2deg) scale(1.08); } }
.spatial-room .logo-wrap.is-ink-rebuilt .logo-vector-core { opacity: .07; }
.spatial-room .logo-wrap.is-ink-rebuilt .logo-vector-outline { opacity: .18; }
.spatial-room .logo-wrap.is-ink-rebuilt .logo-grain { opacity: .2; }
.spatial-room .logo-wrap.is-rebuilding .reactive-logo { clip-path: url(#logo-rebuild-clip); }
.spatial-room .logo-wrap.is-rebuilding .logo-particles { visibility: hidden; }
.logo-storm-piece { filter: none; }

/* A letter cut from the original wordmark, appearing after a walk. */
.resident-mark { position: absolute; inset: 7px 0 10px; background: linear-gradient(135deg, #dce2ab, #9aa56f 45%, #c49c6d); mask: url('assets/resident-m.svg') center / contain no-repeat; opacity: 0; transform: scale(.6) rotate(-12deg); transition: opacity 1.6s, transform 2s; }
.room-resident[data-state="letter"] .resident-body { opacity: 0; transform: scale(.55) rotate(12deg); }
.room-resident[data-state="letter"] .resident-mark { opacity: .9; transform: scale(1) rotate(-4deg); animation: resident-letter-breathe 5s ease-in-out infinite; }
.room-resident[data-state="letter"] .resident-mist { opacity: .2; }
@keyframes resident-letter-breathe { 50% { transform: translateY(-3px) rotate(3deg); opacity: .68; } }

/* The viewport ends after a whole row, including at the end of the catalog. */
body.spatial-room .track-viewport { height: var(--catalog-height, 100%) !important; border-bottom: 0 !important; }
.spatial-room .track-list, .spatial-room .track-list.has-overflow { padding: 0 2px; scroll-snap-type: y mandatory; scroll-padding-block: 0; }
.spatial-room .track-item { scroll-snap-align: start; scroll-snap-stop: always; }
.spatial-room .track-item:last-child { height: var(--tile-height); min-height: var(--tile-height); padding-bottom: 0; }

/* Quiet transport: track identity, three controls, a timeline and volume. */
.spatial-room .player-caption, .spatial-room .volume-control label { display: none; }
.spatial-room .player-art { display: none; }
.spatial-room .active-player { border-radius: 22px; border-color: #e9e1ce15; background: linear-gradient(120deg, #d9d4b909, transparent 60%), #0e0c09b8; box-shadow: inset 0 1px 0 #ffffff09, 0 12px 34px #0003; }
.spatial-room .volume-control { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 8px; }
.spatial-room .volume-control::before { content: ''; width: 12px; height: 12px; background: #929dad; clip-path: polygon(0 35%, 30% 35%, 65% 6%, 65% 94%, 30% 65%, 0 65%); }
.spatial-room .volume-control input { appearance: none; background: transparent; accent-color: #aab6c6; }
.spatial-room .volume-control input::-webkit-slider-runnable-track { height: 2px; background: #c9d2df33; border-radius: 2px; }
.spatial-room .volume-control input::-webkit-slider-thumb { appearance: none; width: 6px; height: 6px; margin-top: -2px; border-radius: 50%; background: #b4c2d4; }
.spatial-room .volume-control input::-moz-range-track { height: 2px; background: #c9d2df33; }
.spatial-room .volume-control input::-moz-range-thumb { width: 6px; height: 6px; border: 0; border-radius: 50%; background: #b4c2d4; }
.spatial-room .volume-note { grid-column: 1 / -1; }
.spatial-room .active-player .transport-play { width: 44px; height: 44px; min-width: 44px; min-height: 44px; background: #d9e0e5; color: #151a22; border-color: #f1f4f766; box-shadow: 0 0 0 5px #a8bdd608; }
.spatial-room .active-player .transport-play:hover:not(:disabled) { background: #bfd1df; box-shadow: 0 0 0 7px #a8bdd60d; }
.spatial-room .transport-skip { color: #a7b0bf; }
.spatial-room .active-player .transport { grid-template-columns: 1fr 44px 1fr; grid-template-rows: 44px 36px; gap: 0 14px; }
.spatial-room .active-player .transport-seek-field { height: 36px; }
.spatial-room .transport-progress { height: 36px; }
.spatial-room .transport-seek-field::before { height: 1px; background: linear-gradient(to right, #acc8dc var(--seek), #c7d3e027 var(--seek)); }
.spatial-room .active-player .transport-time { font-size: 10px; color: #9199a9; }
.spatial-room .transport-progress::-webkit-slider-thumb { width: 8px; height: 8px; margin-top: -2px; border-radius: 6px; background: #c5ddea; box-shadow: 0 0 10px #a0c5df25; transform: none; }
.spatial-room .transport-progress::-moz-range-thumb { width: 8px; height: 8px; border-radius: 6px; background: #c5ddea; box-shadow: 0 0 10px #a0c5df25; transform: none; }
@media (min-width: 801px) and (min-height: 541px) {
  .spatial-room { --dock-height: 104px; }
  .spatial-room .active-player { grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.3fr) 100px; padding: 10px 24px; }
}
@media (max-width: 800px) and (min-height: 541px), (max-width: 500px) {
  .spatial-room { --dock-height: 150px; }
  .spatial-room .active-player { grid-template-columns: minmax(0, 1fr) 78px; grid-template-rows: 32px 80px; gap: 8px 12px; padding: 12px 16px; }
  .spatial-room .active-player .transport { grid-template-rows: 44px 36px; }
  html[data-theme] .spatial-room .active-player .now-playing-title { font-size: 14px; -webkit-line-clamp: 1; }
  .spatial-room .active-track-artist { font-size: 10px; }
}
@media (min-width: 501px) and (max-height: 540px) {
  .spatial-room { --dock-height: 96px; }
  .spatial-room .active-player { grid-template-columns: minmax(100px, 1fr) minmax(200px, 1.25fr) 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-grain rect, .resident-mark, body.spatial-room .logo-wrap.release-logo::before { animation: none !important; }
}