/* Shared look for the karaoke player (tv.html) and the phone remote (index.html).
   A karaoke room: indigo walls, lyric captions in white with a dark edge that
   turn gold as they are "sung". One rounded heavy typeface, like lyric captions. */

:root {
  --room: #1d1650;
  --room-raised: #2b2275;
  --room-lip: #110c37;
  --line: #3d3394;
  --lyric: #fffdf6;
  --edge: #0f0a33;
  --sung: #ffc83d;
  --mute: #aaa3da;
  --alert: #ff8a7a;
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", system-ui, sans-serif;
  color-scheme: dark;
}

@property --p {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--room);
  color: var(--lyric);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--sung); outline-offset: 3px; }

[hidden] { display: none !important; }

/* Lyric caption: the element keeps the real (transparent) text for layout and
   screen readers; ::before draws the dark edge, ::after the white-to-gold fill. */
.lyric {
  position: relative;
  display: inline-block;
  color: transparent;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.lyric::before,
.lyric::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lyric::before {
  color: var(--edge);
  -webkit-text-stroke: 0.2em var(--edge);
}
.lyric::after {
  color: transparent;
  background: linear-gradient(90deg, var(--sung) var(--p), var(--lyric) var(--p));
  -webkit-background-clip: text;
  background-clip: text;
}
.lyric.unsung { --p: 0%; }
.lyric.sing::after { animation: sing var(--sing-time, 1.6s) linear both; }

@keyframes sing {
  from { --p: 0%; }
  to { --p: 100%; }
}

/* Remote-control key: a raised button with a bottom lip that presses down. */
.key {
  position: relative;
  border: 0;
  border-radius: 22px;
  background: var(--room-raised);
  color: var(--lyric);
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  padding: 0 12px 7px;
  box-shadow: inset 0 -7px 0 var(--room-lip), inset 0 1px 0 rgb(255 255 255 / 0.09);
  transition: transform 70ms ease, box-shadow 70ms ease, padding 70ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.key:active,
.key.hit {
  transform: translateY(4px);
  padding-bottom: 3px;
  box-shadow: inset 0 -3px 0 var(--room-lip), inset 0 1px 0 rgb(255 255 255 / 0.09);
}
.key.gold {
  background: var(--sung);
  color: var(--room);
  box-shadow: inset 0 -7px 0 #b9851a, inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.key.gold:active,
.key.gold.hit {
  box-shadow: inset 0 -3px 0 #b9851a, inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.key.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--line);
  padding-bottom: 0;
}
.key.ghost:active,
.key.ghost.hit {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 2px var(--mute);
}
.key:disabled { opacity: 0.45; cursor: default; }

/* Tap feedback: the key's label is sung once, white to gold. */
.key .label {
  --p: 0%;
  background: linear-gradient(90deg, var(--sung) var(--p), var(--lyric) var(--p));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.key.gold .label { background: none; color: inherit; }
.key.hit .label { animation: sing 260ms linear both; }

@media (prefers-reduced-motion: reduce) {
  .lyric.sing::after,
  .key.hit .label { animation-duration: 1ms; }
  .key { transition: none; }
}

/* Level slider: gold fill up to the thumb (--fill is set from script). */
.range {
  --fill: 100%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sung) var(--fill), var(--room-lip) var(--fill));
  box-shadow: inset 0 0 0 1px var(--line);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -9px;
  border: 4px solid var(--sung);
  border-radius: 50%;
  background: var(--lyric);
  box-shadow: 0 2px 0 var(--room-lip);
}
.range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--room-lip); box-shadow: inset 0 0 0 1px var(--line); }
.range::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--sung); }
.range::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid var(--sung); border-radius: 50%; background: var(--lyric); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--sung); outline-offset: 3px; }

/* Song rows: thumbnail, title, then small actions. */
.songs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.songs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.songs img {
  display: block;
  width: 64px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: var(--room-lip);
}
.songs .song-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
}
.songs .actions { display: flex; gap: 6px; }
.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--room-raised);
  color: var(--mute);
  cursor: pointer;
}
.icon-button:hover { color: var(--lyric); }
.icon-button svg { width: 18px; height: 18px; }
.icon-button:disabled, .add-button:disabled { opacity: 0.5; cursor: default; }
.icon-button.starred { color: var(--sung); }

/* Two lists sharing one spot: Up next and Favorites. */
.tabs { display: flex; gap: 6px; }
.tab {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mute);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--room-raised); color: var(--lyric); }
.tab .count { margin-left: 4px; font-weight: 500; color: var(--mute); }
.songs .song-text { display: grid; gap: 2px; min-width: 0; }
.songs .song-meta { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--sung);
  color: var(--room);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 #b9851a;
}
.add-button:disabled { background: var(--room-raised); color: var(--mute); box-shadow: none; }

/* Search results panel shared by both pages. */
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.results-head h2 { margin: 0; font-size: 14px; font-weight: 800; color: var(--mute); }
.results-note { margin: 0; color: var(--mute); font-size: 14px; }
.results-note:empty { display: none; }
.text-button {
  border: 0;
  background: none;
  padding: 6px 4px;
  color: var(--sung);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}