/* ─── Pass the Aux — Venue Display Screen ───────────────────────────────────── */
@import './variables.css';

/* ─── Root layout ────────────────────────────────────────────────────────────── */
.display-root {
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  /* announcement | prompt (top third) | main (now playing + queue | QR) | footer */
  background: var(--bg);
  font-family: var(--font);
  overflow: hidden;
  color: var(--text);
  --display-scale: 1.5;
}

/* ─── Announcement banner ────────────────────────────────────────────────────── */
.display-announcement {
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--bg);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 700;
  text-align: center;
  padding: var(--space-3) var(--space-8);
  letter-spacing: 0.01em;
  animation: slide-down 0.3s var(--ease);
}
.display-announcement.hidden { display: none; }
@keyframes slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ─── Two-column grid: (prompt / now playing) | (QR / up next) ──────────────── */
.display-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 62% 38%;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.display-col-left {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border-muted);
}

.display-col-right {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Prompt — top of the left column when a prompt is active ───────────────── */
.display-prompt {
  flex: 0 0 auto;
  max-height: 34%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: clamp(14px, 2vh, 28px) clamp(20px, 3vw, 48px);
  gap: 6px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-muted);
  animation: fade-in 0.5s var(--ease);
}
.display-prompt.hidden { display: none; }

.display-prompt__eyebrow {
  font-size: clamp(0.7rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.display-prompt__text {
  font-size: clamp(1.5rem, 2.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── QR block — the scan target. Sized to be read across a room, not glanced at
       from a desk: it is the reason the right column exists. ─────────────────── */
.display-qr-block {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vh, 16px);
  padding: clamp(16px, 2.4vh, 32px) clamp(16px, 2vw, 32px);
  border-bottom: 1px solid var(--border-muted);
}

/* ─── Now playing — the priority element, gets the rest of the left column ──── */
.display-now-playing-zone {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  padding: clamp(16px, 2.5vh, 36px) clamp(20px, 3vw, 48px);
}

.display-track-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: clamp(0.7rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}

.display-album-art {
  width: clamp(64px, 11vw, 150px);
  height: clamp(64px, 11vw, 150px);
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

.display-album-placeholder {
  width: clamp(64px, 11vw, 150px);
  height: clamp(64px, 11vw, 150px);
  background: var(--bg-card);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.5rem, 3.5vw, 3.5rem);
  color: var(--text-dim);
  flex-shrink: 0;
}

/* No truncation — long titles wrap onto more lines instead of ellipsizing. */
.display-track-name {
  font-size: clamp(1.35rem, 2.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

.display-artist-name {
  font-size: clamp(0.9rem, 1.5vw, 1.5rem);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 6px;
}

.display-added-by {
  font-size: clamp(0.7rem, 1.1vw, 1rem);
  color: var(--text-dim);
  margin-top: 4px;
  font-style: italic;
}

/* ─── Upcoming queue — secondary tile grid, kept compact ─────────────────────── */
.display-upcoming {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
  padding: clamp(12px, 2vh, 24px) clamp(20px, 3vw, 40px);
}

.display-upcoming-label {
  font-size: clamp(0.6rem, 1vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
  flex-shrink: 0;
}

.display-queue-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  gap: 8px;
  overflow: hidden;
}

.display-queue-empty {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-style: italic;
  padding: var(--space-1) 0;
}

.display-qi {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  overflow: hidden;
}

.display-qi-art {
  width: clamp(32px, 6dvh, 56px);
  height: clamp(32px, 6dvh, 56px);
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.display-qi-art--empty {
  width: clamp(32px, 6dvh, 56px);
  height: clamp(32px, 6dvh, 56px);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.display-qi-info { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.display-qi-title {
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.display-qi-artist {
  font-size: clamp(0.6rem, 0.8vw, 0.75rem);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.display-qi-votes {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* ─── QR image — scales with the viewport and is capped by the column's own
       height (vmin) so it can never crowd out the queue below it. The white
       plate supplies the quiet zone the spec requires. ───────────────────────── */
.display-qr-img {
  /* No small px cap: a fixed ceiling would make the code physically SMALLER on a
     4K panel than on a 1080p one at the same screen size. Let vw/vmin govern so
     it stays a constant fraction of the screen at any resolution. */
  width: min(clamp(220px, 26vw, 1000px), 44vmin);
  height: min(clamp(220px, 26vw, 1000px), 44vmin);
  border-radius: var(--radius-md);
  background: #fff;
  padding: clamp(8px, 1vw, 16px);
  object-fit: contain;
  flex-shrink: 0;
  /* The 1024px source is downscaled at every realistic venue resolution, so let
     the browser interpolate smoothly — `pixelated` would alias the module edges
     and make the code harder for a camera to lock onto, not easier. */
  image-rendering: auto;
}
.display-qr-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.5vh, 6px);
  min-width: 0;
  text-align: center;
}
.display-qr-label {
  font-size: clamp(0.85rem, 1.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.display-qr-code {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.6vw, 4.5rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-shadow: var(--glow-accent);
  line-height: 1;
}

/* ─── Footer — low-priority meta, kept small on purpose ──────────────────────── */
.display-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 32px);
  padding: 6px clamp(16px, 3vw, 48px);
  border-top: 1px solid var(--border-muted);
  background: var(--bg);
  font-size: 0.75rem;
}

.display-wordmark {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-muted);
}
.display-wordmark span { color: var(--accent); }

.display-session-name-footer {
  color: var(--text-dim);
  font-style: italic;
}

.display-participant-count {
  color: var(--text-muted);
}
.display-participant-count strong {
  color: var(--accent);
  font-weight: 700;
}

/* ─── Playing indicator ──────────────────────────────────────────────────────── */
.playing-indicator {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.playing-indicator span {
  display: block;
  width: 3px;
  background: var(--green);
  border-radius: 2px;
  animation: bounce 1.2s ease infinite;
}
.playing-indicator span:nth-child(1) { height: 40%; animation-delay: 0s; }
.playing-indicator span:nth-child(2) { height: 80%; animation-delay: 0.2s; }
.playing-indicator span:nth-child(3) { height: 60%; animation-delay: 0.4s; }
.playing-indicator span:nth-child(4) { height: 90%; animation-delay: 0.1s; }
@keyframes bounce {
  0%, 100% { transform: scaleY(0.4); }
  50%       { transform: scaleY(1); }
}

/* ─── Leaderboard overlay ────────────────────────────────────────────────────── */
.display-leaderboard {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 64px);
  animation: lb-enter 0.4s var(--ease);
}
.display-leaderboard.hidden { display: none; }

@keyframes lb-enter {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

.display-lb-title {
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  font-weight: 800;
  text-align: center;
  color: var(--accent);
  letter-spacing: -0.025em;
  text-shadow: var(--glow-accent);
  margin-bottom: clamp(16px, 3vh, 40px);
  flex-shrink: 0;
}

.display-lb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  flex: 1;
  overflow: hidden;
}

.display-lb-section-title {
  font-size: clamp(0.75rem, 1.5vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: clamp(10px, 2vh, 24px);
}

.display-lb-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 24px);
  padding: clamp(8px, 1.5vh, 18px) 0;
  border-bottom: 1px solid var(--border-muted);
}
.display-lb-row:last-child { border-bottom: none; }

.display-lb-rank {
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 800;
  color: var(--text-dim);
  min-width: 2ch;
  text-align: center;
  flex-shrink: 0;
}
.display-lb-rank-1 { color: #ffd700; }
.display-lb-rank-2 { color: #c0c0c0; }
.display-lb-rank-3 { color: #cd7f32; }

.display-lb-art {
  width: clamp(36px, 5vw, 68px);
  height: clamp(36px, 5vw, 68px);
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-card);
}
.display-lb-art--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--text-dim);
}

.display-lb-info {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.display-lb-track {
  font-size: clamp(0.875rem, 1.8vw, 1.625rem);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.display-lb-artist {
  font-size: clamp(0.65rem, 1.2vw, 1rem);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.display-lb-score {
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: auto;
}

.display-lb-empty {
  color: var(--text-dim);
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  font-style: italic;
  padding: clamp(12px, 2vh, 24px) 0;
}

/* ─── Portrait / small screens ───────────────────────────────────────────────── */
@media (max-width: 900px), (orientation: portrait) {
  .display-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .display-col-left {
    border-right: none;
    border-bottom: 1px solid var(--border-muted);
  }
  /* Portrait: vw is the narrow axis, so the vw term would shrink the code.
     Widen it — the stacked layout has the vertical room to spare. */
  .display-qr-img {
    width: min(clamp(240px, 46vw, 1000px), 38vmax);
    height: min(clamp(240px, 46vw, 1000px), 38vmax);
  }
  .display-prompt__text { font-size: clamp(1.75rem, 8vw, 3.5rem); }
  .display-track-name   { font-size: clamp(1.5rem, 6vw, 3rem); }
  .display-artist-name  { font-size: clamp(1rem, 4vw, 1.75rem); }
}