:root {
  /* Lyst tema (standard – bedst i dagslys) */
  --bg: #eceaf2;
  --bg-grad: radial-gradient(150% 130% at 50% -25%, #ffffff 0%, #e8e6ee 72%);
  --text: #14121b;
  --muted: #5c5866;
  --faint: #8b8794;
  --line: rgba(0,0,0,.12);
  --surface: rgba(0,0,0,.035);
  --accent: #15a34a;
  --accent-soft: #128a3e;
  --slide-bg: #e6e4ec;
  --art-bg: #e0dde8;
  --art-fg: #8b8794;
  --track: rgba(0,0,0,.16);
  --amber: #c0883a;
}
body.dark {
  /* Mørkt tema (til aftenen – åbn /Tv?dark) */
  --bg: #0e0c14;
  --bg-grad: radial-gradient(150% 130% at 50% -25%, #1a1722 0%, #0e0c14 65%);
  --text: #ECEAF2;
  --muted: #8a8794;
  --faint: #75717f;
  --line: rgba(255,255,255,.08);
  --surface: rgba(255,255,255,.035);
  --accent: #1DB954;
  --accent-soft: #5fd98a;
  --slide-bg: #0c0b10;
  --art-bg: #23202c;
  --art-fg: #6f6a7a;
  --track: rgba(255,255,255,.14);
  --amber: #d6a35a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); overflow: hidden; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.screen {
  position: fixed; inset: 0;
  background: var(--bg-grad);
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 1.6vw, 26px);
  padding: clamp(18px, 2vw, 34px);
}

/* Topbar */
.topbar { grid-column: 1/3; display: flex; align-items: center; justify-content: space-between; }
.title { font-size: clamp(18px, 2.1vw, 30px); font-weight: 500; letter-spacing: .2px; }
.title .sub { display: block; font-size: clamp(9px, .9vw, 12px); font-weight: 400; letter-spacing: 3px; color: var(--faint); margin-top: 5px; text-transform: uppercase; }
.live { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: clamp(10px, 1vw, 13px); letter-spacing: .4px; border: 1px solid var(--line); padding: 6px 13px; border-radius: 9px; }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.live.on .dot { background: var(--accent); }

/* Slideshow */
.slide { position: relative; border-radius: 14px; overflow: hidden; background: var(--slide-bg); border: 1px solid var(--line); }
.frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.frame.on { opacity: 1; }
.frame .bg { position: absolute; inset: 0; background-position: center; background-size: cover; filter: blur(34px) brightness(.45) saturate(1.1); transform: scale(1.15) translateZ(0); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.01); will-change: transform; backface-visibility: hidden; }

/* Blødt "Ken Burns"-drift på det skarpe billede – baggrunden står stille for at undgå hak fra blur-rendering */
.frame.kb.kb-a img { animation: kb-a 9s linear forwards; }
.frame.kb.kb-b img { animation: kb-b 9s linear forwards; }
@keyframes kb-a { from { transform: scale(1.012) translate(0, 0); } to { transform: scale(1.07) translate(-1.4%, -1%); } }
@keyframes kb-b { from { transform: scale(1.012) translate(0, 0); } to { transform: scale(1.07) translate(1.4%, 1%); } }
@media (prefers-reduced-motion: reduce) {
  .frame.kb.kb-a img, .frame.kb.kb-b img { animation: none; }
}
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 30px; color: var(--faint); }
.empty .icon { font-size: clamp(30px, 3.4vw, 46px); }
.empty .t { font-size: clamp(13px, 1.3vw, 17px); color: var(--muted); }
.count { position: absolute; right: 14px; top: 14px; background: rgba(0,0,0,.5); padding: 5px 11px; border-radius: 8px; font-size: clamp(10px, 1vw, 13px); color: #cac6d6; z-index: 3; font-variant-numeric: tabular-nums; }
.new { position: absolute; left: 14px; top: 14px; background: rgba(0,0,0,.55); color: #cac6d6; padding: 5px 12px; border-radius: 8px; font-size: clamp(10px, 1vw, 13px); z-index: 3; opacity: 0; transition: opacity .4s; }
.new.show { opacity: 1; }
.credit { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,.5); color: #d6d2e0; padding: 6px 13px; border-radius: 999px; font-size: clamp(11px, 1.1vw, 14px); z-index: 3; opacity: 0; transition: opacity .5s; }
.credit.show { opacity: 1; }
.credit .icon { font-size: 1.05em; color: #b3aec0; }

/* Right column */
.right { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(14px, 1.6vw, 22px); min-height: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }

/* Now playing */
.np { padding: clamp(14px, 1.4vw, 20px); }
.np .label { display: flex; align-items: center; gap: 6px; color: var(--accent-soft); font-size: clamp(9px, .85vw, 11px); letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: clamp(11px, 1.2vw, 15px); }
.np .label .icon { font-size: 1.05em; }
.now { display: flex; gap: clamp(11px, 1.2vw, 16px); align-items: center; }
.art { width: clamp(56px, 6vw, 84px); aspect-ratio: 1; flex: none; border-radius: 9px; background: var(--art-bg); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--art-fg); }
.art .icon { font-size: clamp(22px, 2.4vw, 32px); }
.art.has-art .icon { display: none; }
.meta { min-width: 0; flex: 1; }
.song { font-size: clamp(14px, 1.5vw, 20px); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist { font-size: clamp(11px, 1.15vw, 15px); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.bar { height: 4px; border-radius: 2px; background: var(--track); margin-top: clamp(13px, 1.4vw, 18px); position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--text); border-radius: 2px; transition: width .9s linear; }
.tt { display: flex; justify-content: space-between; font-size: clamp(9px, .95vw, 12px); color: var(--faint); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* QR */
.qrs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.3vw, 18px); align-items: start; }
.qrcard { aspect-ratio: 1; padding: clamp(13px, 1.3vw, 19px) clamp(11px, 1.1vw, 15px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 1.1vw, 15px); }
.qrcard.photo { --qr-accent: var(--amber); }
.qrcard.jam { --qr-accent: var(--accent); }
.qr-title { align-self: flex-start; display: flex; align-items: center; gap: 7px; font-size: clamp(12px, 1.35vw, 18px); font-weight: 500; color: var(--text); }
.qr-title .icon { font-size: 1.15em; color: var(--qr-accent); }
.qr-frame { position: relative; padding: clamp(9px, .95vw, 14px); }
.qr { width: clamp(96px, 11vw, 220px); aspect-ratio: 1; background: #fff; border-radius: 8px; padding: 7px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.qr canvas, .qr img, .qr svg { width: 100%; height: 100%; display: block; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
.qr .fallback { font-size: 9px; color: #333; word-break: break-all; padding: 4px; }
.cnr { position: absolute; width: clamp(15px, 1.5vw, 24px); height: clamp(15px, 1.5vw, 24px); border: 0 solid var(--qr-accent); }
.cnr.tl { top: 0; left: 0; border-top-width: 2.5px; border-left-width: 2.5px; border-radius: 6px 0 0 0; }
.cnr.tr { top: 0; right: 0; border-top-width: 2.5px; border-right-width: 2.5px; border-radius: 0 6px 0 0; }
.cnr.bl { bottom: 0; left: 0; border-bottom-width: 2.5px; border-left-width: 2.5px; border-radius: 0 0 0 6px; }
.cnr.br { bottom: 0; right: 0; border-bottom-width: 2.5px; border-right-width: 2.5px; border-radius: 0 0 6px 0; }
.qrsub { font-size: clamp(10px, 1vw, 13px); color: var(--faint); }

/* Lyrics-panel (Lyrics Plus-stil: dybdeskarphed + blødt spring) */
.lyrics {
  position: relative; overflow: hidden;
  height: clamp(168px, 19vh, 270px);
  margin-top: clamp(13px, 1.5vw, 20px);
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 68%, transparent 100%);
}
.ly-track { position: absolute; left: 0; right: 0; top: 0; transition: transform .8s cubic-bezier(.16,1,.3,1); will-change: transform; }
.ly-line {
  font-size: clamp(12px, 1.3vw, 17px); line-height: 1.34; color: var(--faint); opacity: .4;
  padding: clamp(3px, .5vw, 7px) 0; transform-origin: left center; will-change: transform, filter, opacity;
  transition: filter .55s ease, opacity .55s ease, transform .6s cubic-bezier(.16,1,.3,1), color .45s ease, font-size .45s ease, font-weight .2s;
}
.ly-line.active { font-size: clamp(16px, 1.9vw, 25px); font-weight: 500; color: var(--text); opacity: 1; filter: none; }


/* --- Næste i køen --- */
.nextup { display: flex; align-items: center; gap: 7px; margin-top: clamp(8px, 1vw, 12px); color: var(--muted); font-size: clamp(11px, 1.05vw, 14px); letter-spacing: .2px; }
.nextup[hidden] { display: none; }
.nextup .icon { color: var(--accent-soft); font-size: 1.15em; }
.nextup #nextText { color: var(--text); font-weight: 500; }

/* --- Standby-skærm --- */
.standby { position: fixed; inset: 0; z-index: 50; background: var(--bg-grad); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.standby.show { opacity: 1; visibility: visible; }
.sb-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 3.2vh, 44px); text-align: center; padding: 5vw; }
.sb-title { font-size: clamp(30px, 5.2vw, 68px); font-weight: 500; color: var(--text); letter-spacing: .5px; }
.sb-sub { font-size: clamp(14px, 1.8vw, 24px); color: var(--muted); letter-spacing: .4px; margin-top: clamp(-14px, -1vh, -8px); }
.sb-qrs { display: flex; gap: clamp(28px, 6vw, 90px); }
.sb-card { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.standby .qr { width: clamp(140px, 17vw, 300px); }
.sb-label { display: flex; align-items: center; gap: 9px; font-size: clamp(14px, 1.7vw, 23px); font-weight: 500; color: var(--text); }
.sb-label .icon { font-size: 1.15em; }
.sb-card.photo .sb-label .icon { color: var(--amber); }
.sb-card.jam .sb-label .icon { color: var(--accent); }