/* Each album sets its own palette, typefaces and shapes on <body data-album>. */
:root {
  --bg: #05050a;
  --panel: #0c0c14;
  --line: #24243a;
  --text: #d8dae6;
  --dim: #6f7290;
  --a1: #ff2e4d;
  --a2: #3df2ff;
  --a3: #ffb000;
  --display: "JetBrains Mono", ui-monospace, monospace;
  --body: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius: 4px;
  --title-size: clamp(40px, 8vw, 96px);
  --title-weight: 800;
  --title-spacing: 0.08em;
  --title-case: uppercase;
}

/* IV · The Quixote Protocol: night turning to dawn, indigo and gold */
body[data-album="quixote"] {
  --bg: #070611;
  --panel: rgba(17, 14, 34, 0.72);
  --line: #2c2750;
  --text: #ece8f6;
  --dim: #948db6;
  --a1: #f2c66d;
  --a2: #8fa8ff;
  --a3: #ffd9c2;
  --display: "Instrument Serif", Georgia, serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --radius: 14px;
  --title-size: clamp(44px, 8.5vw, 104px);
  --title-weight: 400;
  --title-spacing: 0;
  --title-case: none;
}

/* I · Transmissions from 2089: red and cyan on black, glitch and scanlines */
body[data-album="city"] {
  --bg: #05050a;
  --panel: #0c0c14;
  --line: #24243a;
  --dim: #6f7290;
  --a1: #ff2e4d;
  --a2: #3df2ff;
  --a3: #ffb000;
}

/* II · The Old World: gold and forest, carved capitals */
body[data-album="old"] {
  --bg: #07080a;
  --panel: #0e100e;
  --line: #2f3024;
  --text: #ece4cc;
  --dim: #8a8670;
  --a1: #e8b04a;
  --a2: #7fbf6a;
  --a3: #f0dca0;
  --display: "Cinzel", Georgia, serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --radius: 2px;
  --title-weight: 700;
  --title-spacing: 0.12em;
}

/* III · Edges of the Map: ice and ochre, thin and frosted */
body[data-album="edge"] {
  --bg: #04070a;
  --panel: rgba(12, 22, 30, 0.6);
  --line: #223441;
  --text: #e3f1f8;
  --dim: #7590a0;
  --a1: #9fdcff;
  --a2: #d98c4a;
  --a3: #e8f6ff;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --radius: 10px;
  --title-weight: 300;
  --title-spacing: 0.22em;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% -10%, color-mix(in srgb, var(--a1) 14%, transparent), transparent 55%),
    radial-gradient(ellipse at 100% 110%, color-mix(in srgb, var(--a2) 9%, transparent), transparent 50%),
    var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--body);
  transition: background-color 0.8s, color 0.8s;
}

a { color: var(--a2); }

#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* CRT scanlines belong to the city */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  display: none;
}
body[data-album="city"] .scanlines { display: block; }

.masthead, .albums, .layout, .foot { position: relative; z-index: 1; }

/* --- masthead --------------------------------------------------------- */
.masthead {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 16px 20px;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.kicker { margin: 0; color: var(--a1); text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-family: var(--body); }
.brand { font-weight: 700; color: var(--text); margin-right: 6px; }
.lede { max-width: 640px; color: var(--dim); margin: 12px 0 0; }
.epigraph {
  margin: 16px 0 0;
  max-width: 640px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--a3);
}

.headline {
  position: relative;
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-spacing);
  text-transform: var(--title-case);
  line-height: 1.02;
  text-shadow: 0 0 calc(var(--pulse, 0) * 40px) var(--a1);
}

/* the city tears its own name apart */
body[data-album="city"] .headline::before,
body[data-album="city"] .headline::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: screen;
}
body[data-album="city"] .headline::before { color: var(--a1); transform: translate(-3px, 0); animation: tear 3.2s infinite steps(1); }
body[data-album="city"] .headline::after { color: var(--a2); transform: translate(3px, 0); animation: tear 2.7s infinite reverse steps(1); }
@keyframes tear {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); }
  88% { clip-path: inset(12% 0 62% 0); transform: translate(-6px, 0); }
  91% { clip-path: inset(48% 0 30% 0); transform: translate(5px, 0); }
  94% { clip-path: inset(72% 0 6% 0); transform: translate(-2px, 0); }
}

/* the old world is carved in gold */
body[data-album="old"] .headline {
  background: linear-gradient(180deg, var(--a3), var(--a1) 55%, #8a5a1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* the edges of the map are frost */
body[data-album="edge"] .headline {
  color: var(--a3);
  text-shadow: 0 0 24px color-mix(in srgb, var(--a1) 45%, transparent), 0 0 calc(var(--pulse, 0) * 40px) var(--a1);
}

/* the album shimmers from night into dawn */
body[data-album="quixote"] .headline {
  font-style: italic;
  background: linear-gradient(100deg, var(--a2), var(--a3) 35%, var(--a1) 50%, var(--a3) 65%, var(--a2));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dawn 14s ease-in-out infinite alternate;
}
@keyframes dawn { from { background-position: 0% 0; } to { background-position: 100% 0; } }

#scope { flex: none; width: 220px; height: 220px; }

/* --- album shelf ------------------------------------------------------ */
.albums {
  max-width: 1180px;
  margin: 0 auto 20px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.album {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  align-content: center;
  text-align: left;
  padding: 10px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, transform 0.2s;
}
.album:hover { transform: translateY(-2px); border-color: var(--dim); }
.album-cover {
  grid-row: span 2;
  width: 52px;
  height: 52px;
  border-radius: calc(var(--radius) * 0.6);
  border: 1px solid var(--line);
  display: block;
}
.album-title { font-weight: 500; }
.album-sub { color: var(--dim); font-size: 12px; }
.album.active { border-color: var(--a1); box-shadow: 0 0 28px color-mix(in srgb, var(--a1) 18%, transparent); }
.album.active .album-cover { border-color: var(--a1); }

/* --- layout ----------------------------------------------------------- */
.layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px 24px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.tracks { display: grid; gap: 8px; }
.track {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 2px 10px;
  text-align: left;
  padding: 12px 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  backdrop-filter: blur(8px);
  transition: border-color 0.15s, transform 0.15s;
}
.track:hover { border-color: var(--dim); transform: translateX(2px); }
.track .num { grid-row: span 2; color: var(--dim); font-weight: 700; }
.track .title { font-weight: 500; letter-spacing: 0.5px; }
.track .dur { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.track .sub { grid-column: 2 / 4; color: var(--dim); font-size: 12px; }
.track.active { border-color: var(--a1); box-shadow: inset 3px 0 0 var(--a1), 0 0 24px color-mix(in srgb, var(--a1) 15%, transparent); }
.track.active .num { color: var(--a1); }
.track.live .num::after { content: " ●"; color: var(--a1); animation: blink 1s infinite steps(2); }
@keyframes blink { 50% { opacity: 0; } }

body[data-album="city"] .track .title,
body[data-album="old"] .track .title { text-transform: uppercase; letter-spacing: 1px; }
body[data-album="old"] .track .title { font-family: "Cinzel", serif; font-weight: 700; }
body[data-album="quixote"] .track .title { font-family: "Instrument Serif", serif; font-size: 19px; line-height: 1.2; }

/* --- deck ------------------------------------------------------------- */
.deck {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 calc(var(--pulse, 0) * 60px) color-mix(in srgb, var(--a1) 25%, transparent);
}
.deck-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.label { margin: 0; color: var(--a1); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
.deck h2 { margin: 4px 0 0; font-family: var(--display); font-size: 26px; font-weight: var(--title-weight); letter-spacing: 1px; }
body[data-album="city"] .deck h2 { text-transform: uppercase; letter-spacing: 2px; font-size: 22px; }
body[data-album="quixote"] .deck h2 { font-size: 34px; font-style: italic; }
.meta { margin: 2px 0 0; color: var(--a3); font-size: 12px; }
.blurb { margin: 6px 0 0; color: var(--dim); max-width: 560px; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  font: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 12px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--text); }
.btn.hot { border-color: var(--a1); color: var(--a1); }
.btn.hot:hover { background: var(--a1); color: var(--bg); }

.progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--a2), var(--a1)); transition: width 0.1s linear; }
.time { margin: 6px 0 12px; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; min-height: 1.6em; }

.editor-host {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  max-height: 62vh;
  min-height: 320px;
  background: #000;
}
.editor-host .cm-editor { font-size: 13px; background: #000 !important; }
.editor-host .cm-editor .cm-scroller { font-family: "JetBrains Mono", ui-monospace, monospace; }

.hint { margin: 10px 0 0; color: var(--dim); font-size: 12px; }
kbd { border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; color: var(--text); font-family: "JetBrains Mono", monospace; }

.foot { max-width: 1180px; margin: 0 auto; padding: 8px 16px 48px; color: var(--dim); font-size: 12px; }

@media (max-width: 900px) {
  .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .masthead { padding-top: 28px; flex-direction: column-reverse; align-items: flex-start; }
  #scope { width: 150px; height: 150px; align-self: flex-end; margin-bottom: -40px; }
}

@media (prefers-reduced-motion: reduce) {
  .headline, .headline::before, .headline::after, .track.live .num::after { animation: none !important; }
}