@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; src: url(fonts/plus_jakarta_sans_medium.ttf) format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; src: url(fonts/plus_jakarta_sans_semibold.ttf) format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; src: url(fonts/plus_jakarta_sans_extrabold.ttf) format("truetype"); }

:root {
  --bg: #0F172A; --bg2: #172238; --ink: #E2E8F0; --faint: #94A3B8;
  --teal: #00D2D3; --teal-light: #3EE6E6; --blue: #1B8BF9; --pink: #FF3366; --gold: #FFC857;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 500; color: var(--ink); }
[hidden] { display: none !important; }

/* 1920x1080 design, scaled by vw so any TV resolution matches; 5% TV-safe margin on every side. 1em = 16px at 1920 wide. */
#stage {
  position: relative; width: 100vw; height: 100vh; overflow: hidden;
  padding: 5.4vh 5vw;
  font-size: calc(100vw / 1920 * 16);
  background: radial-gradient(120% 90% at 50% 0%, var(--bg2) 0%, var(--bg) 70%);
}
section { position: relative; width: 100%; height: 100%; z-index: 1; }

/* the built-in background: three big soft glows drifting slowly (transform only, light enough for a Chromecast) */
#bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
#bg i { position: absolute; width: 70vw; height: 70vw; border-radius: 50%; opacity: .5; will-change: transform; }
#bg .b1 { left: -15vw; top: -30vw; background: radial-gradient(closest-side, rgba(0, 210, 211, .22), transparent); animation: d1 38s ease-in-out infinite alternate; }
#bg .b2 { right: -20vw; top: 5vw; background: radial-gradient(closest-side, rgba(27, 139, 249, .20), transparent); animation: d2 46s ease-in-out infinite alternate; }
#bg .b3 { left: 20vw; bottom: -45vw; background: radial-gradient(closest-side, rgba(255, 51, 102, .14), transparent); animation: d3 52s ease-in-out infinite alternate; }
@keyframes d1 { to { transform: translate(22vw, 14vw) scale(1.15); } }
@keyframes d2 { to { transform: translate(-26vw, 10vw) scale(.9); } }
@keyframes d3 { to { transform: translate(18vw, -16vw) scale(1.1); } }

/* idle */
#idle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6em; }
.wordmark { font-weight: 800; font-size: 9em; letter-spacing: -.02em; line-height: 1; }
.wordmark span { color: var(--teal); }
.ready { font-weight: 600; font-size: 2.6em; color: var(--teal-light); letter-spacing: .02em; }
.version { position: absolute; bottom: 0; font-size: 1.3em; color: var(--faint); }
.upnext { font-weight: 600; font-size: 1.7em; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#idle .upnext { max-width: 70%; }

/* song */
#show { display: flex; flex-direction: column; justify-content: space-between; }
header .title { font-weight: 800; font-size: 2.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header .artist { font-weight: 500; font-size: 1.7em; color: var(--faint); margin-top: .2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); display: flex; gap: 1em; height: 1.4em; transition: opacity .2s; }
.dots i { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 1.2em rgba(0, 210, 211, .6); transition: opacity .2s, transform .2s; }
.dots i.off { opacity: 0; transform: scale(.4); }
.dots.none { opacity: 0; }
.lyrics { position: absolute; left: 0; right: 0; top: 38%; display: flex; flex-direction: column; gap: 1.4em; align-items: center; }
.row { position: relative; width: 100%; height: 1.3em; font-size: 4.6em; font-weight: 800; line-height: 1.3; text-align: center; white-space: nowrap; transition: opacity .18s; }
.row.dim { opacity: .55; }
.row .base, .row .sung { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: pre; font-size: calc(1em * var(--k, 1)); line-height: 1.3; }
.row .base { color: #fff; }
.row .sung { color: var(--teal); text-shadow: 0 0 .3em rgba(0, 210, 211, .45); clip-path: inset(0 100% 0 0); }
.row.blank { opacity: 0; }
.note { position: absolute; left: 0; right: 0; top: 44%; text-align: center; font-weight: 600; font-size: 2.2em; color: var(--faint); }
footer { position: relative; }
.prog { height: .45em; border-radius: .25em; background: rgba(148, 163, 184, .22); overflow: hidden; }
.bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.meta { display: flex; justify-content: space-between; gap: 2em; margin-top: .8em; font-weight: 600; font-size: 1.5em; color: var(--faint); min-height: 1.4em; }
.meta .upnext { font-size: 1em; max-width: 75%; text-align: right; }

/* score */
#score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em; text-align: center; }
.s-title { font-weight: 800; font-size: 2.6em; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-artist { font-weight: 500; font-size: 1.7em; color: var(--faint); max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring { position: relative; width: 26em; height: 26em; margin: 1.6em 0 .6em; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: rgba(148, 163, 184, .2); }
.ring .arc { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 552.92; stroke-dashoffset: 552.92; filter: drop-shadow(0 0 6px rgba(0, 210, 211, .6)); }
.ring .n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11em; color: #fff; line-height: 1; }
.ring.done .n { color: var(--gold); animation: pop .5s ease-out; }
.ring.done .arc { stroke: var(--gold); }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.s-label { font-weight: 800; font-size: 3.4em; color: var(--teal-light); min-height: 1.3em; opacity: 0; transition: opacity .4s; }
.s-label.on { opacity: 1; }

.debug { position: absolute; right: 5vw; bottom: 3vh; max-width: 45vw; font: 12px/1.4 monospace; color: var(--faint); white-space: pre-wrap; text-align: right; z-index: 5; }