/* Karaoke (GregularWeb's Karaoke folder): four kitschy themes, chosen from
 * boxes when karaoke opens. Each theme is a set of tokens on [data-theme],
 * used by the page and by its own box in the theme menu: colours, lettering,
 * which backdrop scene shows (KaraokeScene.swift), how a highlighted item
 * looks and how menus come in. Matches the Apple TV version's KaraokeStyle.
 *
 * Mobile first, as app.css: phone rules, then wider screens. Motion stops
 * for readers who ask (app.css's prefers-reduced-motion rule covers this
 * file too). Text keeps at least 4.5:1 contrast on each theme's card. */

/* Themes */

.karaoke, .k-theme-box {
  --k-bg: #120a24;
  --k-ink: #ffffff;
  --k-ink-2: rgba(255, 255, 255, 0.78);
  --k-sung: #ff2fd0;
  --k-accent: #ff2fd0;
  --k-accent-2: #2ff3ff;
  --k-on-accent: #1a0b1f;
  --k-card: rgba(18, 8, 36, 0.92);
  --k-item: rgba(40, 20, 62, 0.94);
  --k-glow: 0 0 0.5em rgba(255, 47, 208, 0.8), 0 0 1.2em rgba(47, 243, 255, 0.45);
  --k-font: "Arial Rounded MT Bold", "Trebuchet MS", "Avenir Next", var(--font);
  --k-lyrics-font: var(--k-font);
  --k-transform: none;
  --k-corner: var(--radius);
  --k-cover-0: #ff2fd0; --k-cover-1: #2ff3ff; --k-cover-2: #7333ff; --k-cover-3: #ffd933; --k-cover-ink: #fff;
  --k-disco: block; --k-synth: none; --k-pop: none; --k-lounge: none;
  --k-menu-in: k-in-flicker 0.3s ease-out;
}

/* Neon disco: a dark stage, hot pink and cyan glow, a mirror ball over a lit floor. */
[data-theme="neonDisco"] {
  --k-bg: radial-gradient(ellipse at 20% 10%, rgba(255, 47, 208, 0.3), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(47, 243, 255, 0.25), transparent 55%), #120a24;
}

/* 80s karaoke bar: chrome lettering, a sunset over a neon grid, a yellow colour wipe. */
[data-theme="karaokeBar"] {
  --k-bg: #05051a;
  --k-sung: #ffeb3b;
  --k-accent: #ffeb3b;
  --k-accent-2: #ff4081;
  --k-on-accent: #10091a;
  --k-card: rgba(5, 5, 40, 0.94);
  --k-item: rgba(20, 15, 76, 0.94);
  --k-glow: 0.08em 0.08em 0 #000, -0.04em -0.04em 0 #000, 0.08em -0.04em 0 #000, -0.04em 0.08em 0 #000;
  --k-font: "Courier New", "Courier", ui-monospace, monospace;
  --k-transform: uppercase;
  --k-corner: 4px;
  --k-cover-0: #ff4081; --k-cover-1: #1accf2; --k-cover-2: #ffeb3b; --k-cover-3: #6b2ed9;
  --k-disco: none; --k-synth: block;
  --k-menu-in: k-in-wipe 0.25s linear;
}

/* Bubblegum pop: candy pastels, rounded and bouncy. */
[data-theme="bubblegumPop"] {
  --k-bg: linear-gradient(160deg, #ffd1ec 0%, #e7d4ff 50%, #c9f1ff 100%);
  --k-ink: #3a1846;
  --k-ink-2: #5b2f6b;
  --k-sung: #e0217a;
  --k-accent: #e0217a;
  --k-accent-2: #1677c9;
  --k-on-accent: #ffffff;
  --k-card: rgba(255, 255, 255, 0.9);
  --k-item: rgba(255, 255, 255, 0.8);
  --k-glow: 0 0.06em 0 #fff;
  --k-font: "Chalkboard SE", "Comic Sans MS", "Marker Felt", "Arial Rounded MT Bold", var(--font);
  --k-corner: 1.6rem;
  --k-cover-0: #ff99cc; --k-cover-1: #99d9ff; --k-cover-2: #ffeb8c; --k-cover-3: #c7a8ff; --k-cover-ink: #3a1846;
  --k-disco: none; --k-pop: block;
  --k-menu-in: k-in-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Vegas lounge: red velvet, gold, spotlights and marquee bulbs. */
[data-theme="vegasLounge"] {
  --k-bg: radial-gradient(ellipse at 50% 30%, #7a0f1d, #2a0309 70%);
  --k-ink: #fff5e1;
  --k-ink-2: rgba(255, 245, 225, 0.8);
  --k-sung: #ffcc4d;
  --k-accent: #ffcc4d;
  --k-accent-2: #ff6b6b;
  --k-on-accent: #ffcc4d;
  --k-card: rgba(42, 3, 9, 0.94);
  --k-item: rgba(72, 8, 18, 0.94);
  --k-glow: 0 0 0.4em rgba(255, 204, 77, 0.6);
  --k-font: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
  --k-lyrics-font: "Didot", "Bodoni 72", Georgia, serif;
  --k-corner: 0.75rem;
  --k-cover-0: #8c0d1f; --k-cover-1: #ffcc4d; --k-cover-2: #1f1a1f; --k-cover-3: #f2e6cc; --k-cover-ink: #fff5e1;
  --k-disco: none; --k-lounge: block;
  --k-menu-in: k-in-curtain 0.45s ease-in-out;
}

/* The page */

/* Clipped, not just hidden: nothing (a focused item, above all) can scroll it. */
.karaoke {
  --k-pulse: 0;
  position: absolute; inset: 0; overflow: clip;
  background: var(--k-bg); color: var(--k-ink); font-family: var(--k-font);
  transition: background var(--slow) var(--ease);
}
.karaoke :focus-visible { outline: 3px solid var(--k-accent); outline-offset: 3px; }

/* The backdrop: each theme's scene, sized to its box (the page, or a theme box's miniature). */
.k-backdrop { position: absolute; inset: 0; pointer-events: none; container-type: size; }
.k-scene { position: absolute; inset: 0; overflow: hidden; }
.k-scene > div { position: absolute; inset: 0; }
.k-disco { display: var(--k-disco); }
.k-synth { display: var(--k-synth); }
.k-pop { display: var(--k-pop); }
.k-lounge { display: var(--k-lounge); }
.k-scene span { position: absolute; display: block; }

/* Neon disco: tiles lighting in turn, beams sweeping from a turning mirror ball. */
.k-floor { left: -30%; right: -30%; bottom: 0; height: 75%; transform-origin: bottom; transform: perspective(120cqh) rotateX(58deg);
  background: linear-gradient(90deg, #0b0418 3px, transparent 3px) 0 0 / 8.33% 100%, linear-gradient(#0b0418 3px, transparent 3px) 0 0 / 100% 16.66%,
    repeating-conic-gradient(#ff2fd0 0 25%, #2b1550 0 50%, #2ff3ff 0 75%, #7333ff 0) 0 0 / 25% 50%;
  opacity: calc(0.4 + 0.4 * var(--k-pulse)); animation: k-floor 2s steps(4) infinite; }
/* The tiles' colours step along, so each tile lights in turn. */
@keyframes k-floor { to { background-position: 0 0, 0 0, 100% 0; } }
.k-beams span { left: 50%; top: 9cqh; width: 16cqmin; height: 130cqh; margin-left: -8cqmin; transform-origin: 50% 0;
  clip-path: polygon(50% 0, 0 100%, 100% 100%); background: linear-gradient(rgba(255, 47, 208, 0.45), transparent 80%);
  opacity: calc(0.45 + 0.45 * var(--k-pulse)); animation: k-sweep 7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
.k-beams span:nth-child(even) { background: linear-gradient(rgba(47, 243, 255, 0.4), transparent 80%); }
.k-beams span:nth-child(3n) { background: linear-gradient(rgba(115, 51, 255, 0.45), transparent 80%); }
@keyframes k-sweep { from { transform: rotate(-42deg); } to { transform: rotate(42deg); } }
.k-mirror { left: 50%; top: 1cqh; width: 16cqmin; aspect-ratio: 1; margin-left: -8cqmin; border-radius: 50%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 1px, transparent 1px) 0 0 / 2cqmin 2cqmin,
    linear-gradient(rgba(0, 0, 0, 0.35) 1px, transparent 1px) 0 0 / 2cqmin 2cqmin,
    radial-gradient(circle at 35% 30%, #fff, #c9c9d6 35%, #6a6a7a 80%);
  box-shadow: 0 0 4cqmin rgba(255, 255, 255, 0.35); animation: k-turn 2.5s linear infinite; }
.k-mirror::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 10cqh; background: rgba(255, 255, 255, 0.4); }
@keyframes k-turn { to { background-position: 2cqmin 0, 0 0, 0 0; } }
.k-glints span { left: var(--x); top: calc(var(--y) * 0.62); width: 1.4cqmin; aspect-ratio: 1; border-radius: 50%;
  background: var(--k-accent); box-shadow: 0 0 1.2cqmin var(--k-accent); animation: k-twinkle 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.37s); }
.k-glints span:nth-child(odd) { background: var(--k-accent-2); box-shadow: 0 0 1.2cqmin var(--k-accent-2); }
@keyframes k-twinkle { 0%, 100% { transform: scale(0.4); opacity: 0.2; } 50% { transform: scale(1.3); opacity: 0.9; } }

/* 80s: a sliced sun setting over a grid that runs towards us, under scan lines. */
.k-synth { background: linear-gradient(#030312, #2d0b55 40%, #b0247a 62%, #14052a 62%, #04020f); }
.k-stars span { left: var(--x); top: calc(var(--y) * 0.5); width: 2px; height: 2px; border-radius: 50%; background: #fff;
  animation: k-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -0.41s); }
.k-sun { left: 50%; top: 62cqh; width: 44cqmin; aspect-ratio: 1; margin: -32cqmin 0 0 -22cqmin; border-radius: 50%;
  background: linear-gradient(#fff36a, #ff7a3d 55%, #ff2a8c 75%);
  mask: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 62%, transparent 62% 67%, #000 67% 71%, transparent 71% 100%);
  -webkit-mask: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 62%, transparent 62% 67%, #000 67% 71%, transparent 71% 100%);
  filter: drop-shadow(0 0 calc(3cqmin + 3cqmin * var(--k-pulse)) #ff3d9a); }
.k-grid { left: -50%; right: -50%; top: 62cqh; height: 60cqh; transform-origin: top; transform: perspective(30cqh) rotateX(68deg);
  background: linear-gradient(rgba(255, 64, 190, 0.85) 2px, transparent 2px) 0 0 / 100% 8cqh,
    linear-gradient(90deg, rgba(255, 64, 190, 0.85) 2px, transparent 2px) 0 0 / 4% 100%;
  opacity: calc(0.7 + 0.3 * var(--k-pulse)); animation: k-grid 1.2s linear infinite; }
.k-grid::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #ff7fd6; box-shadow: 0 0 1rem #ff7fd6; }
@keyframes k-grid { to { background-position: 0 8cqh, 0 0; } }
.k-scan { inset: 0; background: repeating-linear-gradient(transparent 0 4px, rgba(0, 0, 0, 0.18) 4px 6px); }

/* Bubblegum: candy stripes drifting, stars and hearts bobbing, bubbles rising. */
.k-stripes { inset: -20%; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 4rem, transparent 4rem 8rem);
  animation: k-stripes 10s linear infinite; }
@keyframes k-stripes { to { transform: translateX(11.3rem); } }
.k-shapes span { left: var(--x); top: var(--y); font-size: 7cqmin; line-height: 1; animation: k-bob 3s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.4s); scale: calc(1 + 0.15 * var(--k-pulse)); -webkit-text-stroke: 0.06em #fff; paint-order: stroke; }
.k-heart::before { content: "\2665"; color: #e0217a; }
.k-star::before { content: "\2605"; color: #1677c9; }
.k-shapes span:nth-child(4n + 2)::before { color: #ffc93c; }
@keyframes k-bob { from { transform: translateY(-1cqh) rotate(-14deg); } to { transform: translateY(1.5cqh) rotate(14deg); } }
.k-bubbles span { left: var(--x); bottom: -20cqh; width: calc(6cqmin + var(--y) * 0.07cqmin); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 10%, rgba(255, 255, 255, 0.22) 12%);
  scale: calc(1 + 0.12 * var(--k-pulse)); animation: k-rise 9s linear infinite; animation-delay: calc(var(--i) * -0.65s); }
@keyframes k-rise { from { transform: translate(0, 0); } 50% { transform: translate(2cqw, -65cqh); } to { transform: translate(-1cqw, -135cqh); } }

/* Vegas: spotlights sweeping a stage between velvet curtains, gold glints, footlights chasing. */
.k-spots span { left: calc(50% - 20cqw); bottom: -6cqh; width: 40cqw; height: 45cqh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, calc(0.25 + 0.25 * var(--k-pulse))), transparent);
  animation: k-spot 8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -4s); }
@keyframes k-spot { from { transform: translateX(-22cqw); } to { transform: translateX(22cqw); } }
.k-sparkles span { left: calc(15% + var(--x) * 0.7); top: calc(12% + var(--y) * 0.6); width: 3cqmin; aspect-ratio: 1; background: var(--k-accent);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: k-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.7s); }
.k-curtain { top: 0; bottom: 0; width: 13cqw; background: repeating-linear-gradient(90deg, #3d0107 0, #9e0f21 1.1cqw, #3d0107 2.2cqw);
  animation: k-sway 6s ease-in-out infinite alternate; }
.k-curtain-left { left: 0; transform-origin: top left; }
.k-curtain-right { right: 0; transform-origin: top right; animation-delay: -3s; }
@keyframes k-sway { from { transform: skewX(-1deg); } to { transform: skewX(1deg); } }
.k-pelmet { left: 0; right: 0; top: 0; height: 9cqh; background: linear-gradient(#5a0310, #8c0d1f);
  -webkit-mask: radial-gradient(50% 100% at 50% 0, #000 96%, transparent 100%) 0 100% / 6.25cqw 3cqh repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 3cqh + 1px) no-repeat;
  mask: radial-gradient(50% 100% at 50% 0, #000 96%, transparent 100%) 0 100% / 6.25cqw 3cqh repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 3cqh + 1px) no-repeat; }
.k-pelmet::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(3cqh - 3px); height: 3px; background: var(--k-accent); }
.k-footlights { left: 0; right: 0; bottom: 1cqh; height: 2cqmin;
  background: radial-gradient(circle, #fff3b0 0 28%, transparent 34%) 0 0 / 5cqmin 100% repeat-x;
  filter: drop-shadow(0 0 0.6cqmin #ffcc4d); animation: k-chase 0.6s steps(2) infinite; }
@keyframes k-chase { to { background-position: 2.5cqmin 0; } }

/* Headings, in each theme's lettering */

/* Each theme's lettering is a set of tokens, so a theme box's title keeps its own on any page. */
.karaoke, .k-theme-box {
  --k-title-colour: #fff; --k-title-fill: none; --k-title-clip: border-box; --k-title-filter: none; --k-title-style: normal;
  --k-title-shadow: 0 0 0.05em #fff, 0 0 0.12em var(--k-accent), 0 0 0.35em var(--k-accent);
  --k-title-in: k-flicker 0.35s steps(4) 1; --k-letter-move: none;
  --k-frame: transparent; --k-frame-glow: none; --k-frame-chase: none;
}
[data-theme="karaokeBar"] {
  --k-title-colour: transparent; --k-title-clip: text; --k-title-style: italic; --k-title-shadow: none; --k-title-in: none;
  --k-title-fill: linear-gradient(#fff 0%, #b3d9ff 47%, #20107f 50%, #ff73cc 56%, #fff 100%);
  --k-title-filter: drop-shadow(0.04em 0.04em 0 #ff4081) drop-shadow(0.03em 0.03em 0 #000);
}
[data-theme="bubblegumPop"] {
  --k-title-colour: #e0217a; --k-title-in: none; --k-letter-move: k-letter 1.6s ease-in-out infinite;
  --k-title-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 0 0.08em 0 rgba(58, 24, 70, 0.25);
}
[data-theme="vegasLounge"] {
  --k-title-colour: transparent; --k-title-clip: text; --k-title-style: italic; --k-title-shadow: none; --k-title-in: none;
  --k-title-fill: linear-gradient(#fff6b3, #ffcc4d 40%, #b8860b 70%, #ffe08a);
  --k-title-filter: drop-shadow(0 0.05em 0 #330007);
  --k-frame: #ffe9a8; --k-frame-glow: 0 0 0.4em rgba(255, 204, 77, 0.5), inset 0 0 0.4em rgba(255, 204, 77, 0.3);
  --k-frame-chase: k-marquee 0.8s steps(2) infinite;
}
.k-title { min-width: 0; font-family: var(--k-font); font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 800; line-height: 1.15;
  text-transform: var(--k-transform); white-space: nowrap; font-style: var(--k-title-style);
  color: var(--k-title-colour); background: var(--k-title-fill); -webkit-background-clip: var(--k-title-clip); background-clip: var(--k-title-clip);
  text-shadow: var(--k-title-shadow); filter: var(--k-title-filter); animation: var(--k-title-in); }
.k-letter { white-space: pre; display: inline-block; animation: var(--k-letter-move); animation-delay: calc(var(--i) * -0.18s); }
@keyframes k-flicker { 0% { opacity: 0.2; } 25% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
@keyframes k-letter { 50% { transform: translateY(-0.08em); } }
/* Room for Vegas's bulbs in every theme, so sampling one never moves what's below. */
.k-title.k-framed { padding: 0.15em 0.45em; border: 0.14em dotted var(--k-frame); border-radius: 0.3em; box-shadow: var(--k-frame-glow);
  animation: var(--k-title-in), var(--k-frame-chase); }
@keyframes k-marquee { 50% { border-color: #ffcc4d; } }

/* Song pictures (KaraokeCover): a pattern in two of the theme's cover colours, with initials */

.k-cover { --size: var(--k-cover-size, 3rem); position: relative; flex: none; display: grid; place-items: center; width: var(--size);
  aspect-ratio: 1; overflow: hidden; border-radius: min(var(--k-corner), 0.6rem); background-color: var(--back);
  font-size: calc(var(--size) * 0.37); }
.k-cover-small { --size: 1.75rem; }
.k-cover-large { --size: clamp(6rem, 22vw, 11rem); box-shadow: var(--shadow-lg); }
.k-cover-round { border-radius: 50%; }
.k-cover[data-pattern="stripes"] { background-image: repeating-linear-gradient(var(--angle), var(--front) 0 12.5%, var(--back) 12.5% 25%); }
.k-cover[data-pattern="rings"] { background-image: repeating-radial-gradient(circle, var(--back) 0 7%, var(--front) 7% 11%); }
.k-cover[data-pattern="dots"] { background-image: radial-gradient(circle, var(--front) 0 22%, transparent 24%); background-size: 25% 25%; }
.k-cover[data-pattern="sunburst"] { background-image: repeating-conic-gradient(from var(--angle) at 0 0, var(--front) 0 7.5deg, var(--back) 7.5deg 15deg); }
.k-cover[data-pattern="checks"] { background-image: conic-gradient(var(--front) 0 25%, var(--back) 0 50%, var(--front) 0 75%, var(--back) 0);
  background-size: 50% 50%; }
.k-cover[data-pattern="split"] { background-image: linear-gradient(var(--angle), var(--back) 50%, var(--front) 50%); }
.k-cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 50%, rgba(0, 0, 0, 0.15)); }
.k-cover-initials { position: relative; z-index: 1; font-family: var(--k-font); font-weight: 800; color: var(--k-cover-ink);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); letter-spacing: 0.02em; }

/* The stage */

.k-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-5) var(--gutter);
  transition: filter var(--slow) var(--ease); }
.k-stage:focus { outline: none; }
.karaoke.has-menu .k-stage { filter: blur(10px) brightness(0.35); }
/* The attract screen behind a menu would only be a blur; behind the cheer, a muddle. */
.karaoke.has-menu .k-stage.k-attract, .karaoke.k-cheering .k-stage { visibility: hidden; }
.song-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; visibility: hidden; }
.k-showing-video .song-video { visibility: visible; }
.k-attract { cursor: pointer; }

.k-card { position: relative; z-index: 1; max-width: 52rem; width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4); padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: var(--k-card);
  text-align: center; box-shadow: var(--shadow-lg); animation: k-card-in 0.35s var(--ease); }
@keyframes k-card-in { from { opacity: 0; transform: scale(0.92); } }
.k-card[data-card="attract"] { background: none; box-shadow: none; }
.k-card .k-title { font-size: clamp(2.4rem, 11vw, 6rem); }
.k-big { font-size: clamp(2rem, 8vw, 4.5rem); font-weight: 800; line-height: 1.05; color: var(--k-accent);
  text-shadow: var(--k-glow); text-transform: var(--k-transform); animation: k-wobble 2.6s ease-in-out infinite; }
@keyframes k-wobble { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }
.k-song-title { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.k-song-text { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; }
.k-song-text h1 { font-family: var(--k-font); font-size: clamp(1.6rem, 6vw, 3rem); text-shadow: var(--k-glow); text-transform: var(--k-transform); }
.k-song-credit { font-size: var(--text-xl); color: var(--k-ink-2); }
.k-song-album { color: var(--k-ink-2); font-style: italic; }
.k-press-play { min-height: 3.25rem; padding: 0 var(--space-6); border: 0; border-radius: var(--pill); font-weight: 800;
  font-size: var(--text-xl); font-family: var(--k-font); background: var(--k-accent); color: var(--k-on-accent); box-shadow: var(--k-glow);
  animation: k-pulse 1.4s ease-in-out infinite; text-transform: var(--k-transform); }
[data-theme="vegasLounge"] .k-press-play { background: var(--k-card); border: 3px solid var(--k-accent); }
@keyframes k-pulse { 50% { transform: scale(1.06); } }
.k-up-next { color: var(--k-ink-2); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.k-up-next h2 { font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.12em; color: var(--k-accent-2); }
.k-up-next p { display: flex; align-items: center; gap: var(--space-2); }
.k-paused { position: absolute; top: 12%; z-index: 2; padding: var(--space-2) var(--space-5); border-radius: var(--pill);
  background: var(--k-card); font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.1em; }
.k-controls { position: absolute; z-index: 3; right: var(--gutter); bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  display: flex; gap: var(--space-2); padding: var(--space-1); border-radius: var(--pill); background: var(--k-card); }
.k-controls .icon-button { color: var(--k-ink); }
.k-video-strip { position: absolute; z-index: 2; left: var(--gutter); bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--k-corner);
  background: var(--k-card); animation: k-strip 6s ease-in-out forwards; }
@keyframes k-strip { 0% { opacity: 0; transform: translateX(-2rem); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; visibility: hidden; } }

/* "Get ready!": twelve pieces, each theme its own way. */
.k-loader { display: flex; gap: 0.35rem; align-items: center; height: 3rem; }
.k-loader span { width: 0.6rem; height: 100%; border-radius: var(--pill); background: var(--k-accent); transform-origin: bottom;
  box-shadow: 0 0 0.6rem var(--k-accent); animation: k-eq 0.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
.k-loader span:nth-child(even) { background: var(--k-accent-2); box-shadow: 0 0 0.6rem var(--k-accent-2); }
@keyframes k-eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
[data-theme="karaokeBar"] .k-loader span { width: 1.2rem; height: 1.4rem; border-radius: 0; box-shadow: none; background: var(--k-accent);
  animation: k-blocks 1.6s steps(1) infinite; animation-delay: calc(var(--i) * 0.1s); }
@keyframes k-blocks { 0% { opacity: 0.15; } 50% { opacity: 1; } }
[data-theme="bubblegumPop"] .k-loader span { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.7);
  border: 3px solid var(--k-accent); box-shadow: none; animation: k-hop 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * -0.15s); }
[data-theme="bubblegumPop"] .k-loader span:nth-child(n + 5) { display: none; }
@keyframes k-hop { 50% { transform: translateY(-1.2rem); } }
[data-theme="vegasLounge"] .k-loader span { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #fff3b0;
  box-shadow: 0 0 0.6rem var(--k-accent); animation: k-blocks 1.2s steps(1) infinite; animation-delay: calc(var(--i) * 0.1s); }

.k-marquee { width: 100%; overflow: hidden; mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.k-marquee-track { display: flex; gap: var(--space-6); width: max-content; animation: k-scroll 40s linear infinite;
  font-size: var(--text-xl); color: var(--k-accent-2); text-transform: var(--k-transform); }
@keyframes k-scroll { to { transform: translateX(-50%); } }
.k-any-button { color: var(--k-ink-2); animation: k-blink 1.6s steps(2) infinite; }
@keyframes k-blink { 50% { opacity: 0.35; } }

/* The lyrics */

.k-lyrics { position: relative; z-index: 1; width: 100%; max-width: 70rem; display: flex; flex-direction: column;
  align-items: center; gap: var(--space-5); text-align: center; font-family: var(--k-lyrics-font);
  text-transform: var(--k-transform); }
.k-line { min-height: 1.3em; font-size: clamp(1.6rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.3; }
.k-line-next { font-size: clamp(1.2rem, 3.6vw, 2.6rem); opacity: 0.6; }
.k-line-current.k-enter { animation: k-line-up 0.45s var(--ease); }
.k-line-next.k-enter { animation: k-line-in 0.45s var(--ease); }
@keyframes k-line-up { from { transform: translateY(70%) scale(0.7); opacity: 0.5; } }
@keyframes k-line-in { from { transform: translateY(60%); opacity: 0; } }
.k-word { display: inline-block; transition: transform 0.15s var(--ease); }
.k-word, .k-gap { background: linear-gradient(90deg, var(--k-sung) calc(var(--fill, 0) * 100%), var(--k-ink) calc(var(--fill, 0) * 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-word.k-singing { transform: translateY(-0.06em); }
.k-line-current .k-word { filter: drop-shadow(0 0.04em 0.08em rgba(0, 0, 0, 0.5)); }
[data-theme="neonDisco"] .k-line-current .k-word { filter: drop-shadow(0 0 0.15em rgba(255, 47, 208, calc(var(--fill, 0) * 0.9))); }
.k-dots { display: flex; gap: 1.2rem; justify-content: center; min-height: 2rem; }
.k-dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0.3rem var(--k-accent), 0 0 0.9rem var(--k-accent);
  animation: k-dot-in 0.3s var(--ease); }
@keyframes k-dot-in { from { transform: scale(0.2); opacity: 0; } }
[data-theme="karaokeBar"] .k-dot { border-radius: 0; background: var(--k-accent); box-shadow: 0.25rem 0.25rem 0 #000; }
[data-theme="bubblegumPop"] .k-dot { background: rgba(255, 255, 255, 0.5); border: 4px solid var(--k-accent); box-shadow: none; }
[data-theme="vegasLounge"] .k-dot { background: #fff3b0; box-shadow: 0 0 0.8rem var(--k-accent); width: 1.3rem; height: 1.3rem; }
/* The ball: placed over a word by its transform, squashed (--squash) as it lands and leaves. */
.k-ball { position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; margin: -2.1rem 0 0 -0.8rem; will-change: transform; --squash: 0; }
.k-ball::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; transform-origin: bottom;
  transform: scale(calc(1 + 0.22 * var(--squash)), calc(1 - 0.22 * var(--squash)));
  box-shadow: 0 0 0.4rem var(--k-accent-2), 0 0 1rem var(--k-accent-2); }
[data-theme="karaokeBar"] .k-ball::before { border-radius: 0; background: var(--k-accent-2); box-shadow: 0.2rem 0.2rem 0 #000; }
[data-theme="bubblegumPop"] .k-ball::before { background: rgba(255, 255, 255, 0.7); border: 4px solid var(--k-accent); box-shadow: none; }
[data-theme="vegasLounge"] .k-ball::before { background: radial-gradient(circle at 30% 30%, #fff8cc, var(--k-accent)); box-shadow: 0 0 0.8rem var(--k-accent); }

/* The menus */

.k-menus:empty { display: none; }
.k-menus { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: center; overflow: clip;
  padding: env(safe-area-inset-top) 0 0; }
.k-menu { width: 100%; max-width: 64rem; display: flex; flex-direction: column; min-height: 0; animation: var(--k-menu-in); }
@keyframes k-in-flicker { 0% { opacity: 0; transform: scale(1.03); } 30% { opacity: 0.8; } 45% { opacity: 0.3; } 100% { opacity: 1; transform: none; } }
@keyframes k-in-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes k-in-pop { from { opacity: 0; transform: scale(0.86); } }
@keyframes k-in-curtain { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
.k-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--gutter) var(--space-2); flex: none; flex-wrap: wrap; }
.k-bar .icon-button { color: var(--k-ink); background: var(--k-item); }
/* The bar and hint keep their size in every theme, so sampling a theme never
   moves the menu (or the box under the pointer). */
.k-bar .k-title { overflow: hidden; text-overflow: ellipsis; }
.k-menu-themes .k-bar { flex-direction: column; justify-content: center; padding-top: var(--space-6); }
.k-menu-themes .k-bar .k-title { font-size: clamp(2.4rem, 11vw, 5.5rem); }
.k-pick { font-family: var(--k-font); font-size: var(--text-xl); color: var(--k-ink-2); text-transform: var(--k-transform); }
.k-menu-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-3) var(--gutter) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4); }
.k-hint { flex: none; padding: 0 var(--gutter) var(--space-2); color: var(--k-ink-2); font-size: var(--text-xs); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-subtitle { font-size: var(--text-lg); color: var(--k-accent-2); text-transform: var(--k-transform); }
.k-now { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--k-corner);
  background: var(--k-card); color: var(--k-ink-2); }
.k-empty { color: var(--k-ink-2); }

/* Items: lit in each theme's way when highlighted. Lit, not grown: a grown
   row would overflow the menu, which would then scroll. */
.k-list, .k-results { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.k-item { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 3.25rem; width: 100%;
  padding: var(--space-2) var(--space-4); border: 2px solid transparent; border-radius: var(--k-corner); background: var(--k-item);
  color: var(--k-ink); font-family: var(--k-font); text-align: left; transition: background var(--quick), border-color var(--quick); }
.k-list > .k-item, .k-tiles > .k-item, .k-queue-item { animation: k-row-in 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes k-row-in { from { opacity: 0; transform: translateX(1.5rem); } }
.k-item:hover, .k-item:focus-visible { background: var(--k-accent); color: var(--k-on-accent); border-color: var(--k-accent); outline: none;
  box-shadow: var(--k-glow); }
[data-theme="neonDisco"] .k-item:focus-visible { animation: k-flicker 0.2s steps(3) 1; }
[data-theme="karaokeBar"] .k-item:hover, [data-theme="karaokeBar"] .k-item:focus-visible { box-shadow: 0.35rem 0.35rem 0 #000; }
[data-theme="karaokeBar"] .k-row:focus-visible::before { content: "\25BA"; position: absolute; left: -1.4rem; color: var(--k-accent);
  animation: k-blink 0.8s steps(2) infinite; }
[data-theme="karaokeBar"] .k-list { padding-left: 1.4rem; }
[data-theme="bubblegumPop"] .k-item:hover, [data-theme="bubblegumPop"] .k-item:focus-visible { box-shadow: 0 0.3rem 0 rgba(224, 33, 122, 0.35);
  animation: k-squish 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes k-squish { 40% { transform: scale(1.03, 0.96); } }
[data-theme="vegasLounge"] .k-item:hover, [data-theme="vegasLounge"] .k-item:focus-visible { background: var(--k-card); color: var(--k-accent);
  border-color: var(--k-accent); overflow: hidden; }
[data-theme="vegasLounge"] .k-item:focus-visible::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 204, 77, 0.35) 45%, transparent 60%) -100% 0 / 200% 100% no-repeat;
  animation: k-glint 1.8s linear infinite; }
@keyframes k-glint { to { background-position: 200% 0; } }
.k-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.k-item-title { font-weight: 700; font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: var(--k-transform); }
.k-item-detail { opacity: 0.8; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-prominent { border-color: var(--k-accent); color: var(--k-accent); }
.k-surprise { justify-content: center; font-weight: 800; text-transform: var(--k-transform); }
.k-surprise .icon { width: 1.4rem; height: 1.4rem; }
.k-badges { display: flex; gap: var(--space-1); flex: none; }
/* Readable on a row lit or not. */
.k-badge { padding: 0.1rem 0.6rem; border-radius: var(--pill); font-size: var(--text-xs); font-weight: 700;
  background: var(--k-card); color: var(--k-accent-2); border: 2px solid var(--k-accent-2); }
.k-badge-quiet { color: var(--k-ink-2); border-color: var(--k-ink-2); }

/* Home: the song's controls, tiles for finding songs, the rest small at the foot. */
.k-song-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.k-big-button { flex: 1 1 10rem; justify-content: center; font-weight: 800; font-size: var(--text-lg); text-transform: var(--k-transform); }
.k-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.k-tile { flex-direction: column; justify-content: center; gap: var(--space-2); min-height: 6.5rem; text-align: center;
  font-weight: 800; font-size: var(--text-lg); text-transform: var(--k-transform); }
.k-tile .icon { width: 2.2rem; height: 2.2rem; }
.k-count { position: absolute; top: var(--space-2); right: var(--space-2); min-width: 1.6rem; padding: 0 0.4rem; border-radius: var(--pill);
  background: var(--k-accent-2); color: var(--k-on-accent); font-size: var(--text-sm); }
.k-up-next-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--k-ink-2); font-size: var(--text-sm); }
.k-up-next-strip strong { color: var(--k-accent-2); text-transform: uppercase; letter-spacing: 0.1em; }
.k-more { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.k-small-button { width: auto; min-height: 2.75rem; padding: var(--space-1) var(--space-4); border-radius: var(--pill); font-size: var(--text-sm);
  font-weight: 700; }
.k-small-button .icon, .k-big-button .icon { width: 1.2rem; height: 1.2rem; }

/* A long list, with letters to jump by. */
.k-list-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; }
.k-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.k-rail-letter { min-width: 2rem; min-height: 1.6rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--k-item);
  color: var(--k-ink); font-family: var(--k-font); font-weight: 800; font-size: var(--text-xs); }
.k-rail-letter:hover, .k-rail-letter:focus-visible { background: var(--k-accent); color: var(--k-on-accent); outline: none; }

.k-search-field { width: 100%; min-height: 3.25rem; padding: 0 var(--space-4); border: 2px solid var(--k-accent);
  border-radius: var(--pill); background: var(--k-card); color: var(--k-ink); font-family: var(--k-font); font-size: var(--text-lg); }
.k-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.k-queue-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--k-corner); background: var(--k-item); }
.k-queue-number { flex: none; min-width: 1.5rem; font-weight: 800; font-size: var(--text-xl); color: var(--k-accent); text-align: center; }
.k-queue-controls { display: flex; flex: none; }
.k-queue-controls .icon-button { color: var(--k-ink); }

/* Celebrations: the queue's count, a song flying to it, confetti, "Encore!" */

.k-queue-chip { position: absolute; z-index: 5; top: calc(var(--space-5) + env(safe-area-inset-top)); right: var(--gutter);
  padding: var(--space-1) var(--space-4); border-radius: var(--pill); background: var(--k-accent); color: var(--k-on-accent);
  font-weight: 800; font-size: var(--text-lg); box-shadow: var(--k-glow); pointer-events: none; }
[data-theme="vegasLounge"] .k-queue-chip { background: var(--k-card); border: 2px solid var(--k-accent); }
.k-queue-chip.k-bounce { animation: k-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes k-bounce { 30% { transform: scale(1.35); } }
.k-flying { position: absolute; z-index: 6; left: 50%; top: 55%; translate: -50% -50%; pointer-events: none;
  animation: k-fly 0.85s ease-in forwards; }
@keyframes k-fly { to { transform: translate(40vw, -48vh) scale(0.2); opacity: 0; } }
.k-confetti { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.k-confetti span { position: absolute; width: 0.7rem; height: 0.45rem; border-radius: 1px;
  animation: k-confetti 2.8s cubic-bezier(0.15, 0.6, 0.4, 1) forwards; animation-delay: var(--delay); }
@keyframes k-confetti {
  30% { transform: translate(calc(var(--dx) * 0.7), var(--dy)) rotate(calc(var(--spin) * 0.4)); opacity: 1; }
  to { transform: translate(var(--dx), calc(var(--dy) + 100vh)) rotate(var(--spin)); opacity: 0; } }
.k-encore { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--gutter); pointer-events: none; animation: k-in-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.k-encore .k-title { font-size: clamp(3rem, 14vw, 8rem); }
.k-encore .k-now { font-size: var(--text-xl); color: var(--k-ink); }

.k-notice { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateX(-50%); max-width: calc(100% - 2 * var(--gutter)); padding: var(--space-3) var(--space-5);
  border-radius: var(--pill); background: var(--k-card); color: var(--k-ink); font-weight: 700; box-shadow: var(--shadow-lg);
  text-align: center; }

/* The theme boxes: each in its own theme, its scene playing in miniature. */

/* Room round the boxes for one lit under the pointer, so it never
   overflows the menu (which would scroll it as the box takes focus, moving
   the box from under the click). */
.k-theme-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-3); }
.k-theme-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3);
  border: 3px solid transparent; border-radius: var(--radius-lg); background: var(--k-bg); color: var(--k-ink);
  font-family: var(--k-font); text-align: left; transition: transform var(--quick) var(--ease), border-color var(--quick); }
.k-theme-box:hover, .k-theme-box:focus-visible { border-color: var(--k-accent); transform: scale(1.03); outline: none;
  box-shadow: var(--k-glow); }
.k-theme-name { font-size: var(--text-xl); font-weight: 800; color: var(--k-accent); text-shadow: var(--k-glow);
  text-transform: var(--k-transform); }
.k-theme-tagline { color: var(--k-ink-2); font-size: var(--text-sm); }
.k-mini { position: relative; display: grid; place-items: center; width: 100%; height: 7rem; border-radius: var(--radius); overflow: hidden;
  background: var(--k-bg); container-type: size; }
.k-mini .k-title { position: relative; font-size: 1.8rem; animation: none; }
.k-mini .k-letter { animation: none; }

@media (min-width: 40rem) {
  .k-theme-grid { grid-template-columns: repeat(2, 1fr); }
  .k-tiles { grid-template-columns: repeat(3, 1fr); }
  .k-card { padding: var(--space-7) var(--space-6); }
  .k-song-title { flex-direction: row; text-align: left; }
  .k-song-text { align-items: flex-start; }
  .karaoke { --k-cover-size: 3.5rem; }
}
@media (min-width: 75rem) {
  .k-theme-grid { grid-template-columns: repeat(4, 1fr); }
  .k-mini { height: 10rem; }
}
@media (forced-colors: active) {
  .k-word, .k-gap { background: none; color: CanvasText; }
  .k-ball::before { background: Highlight; }
  .k-title { background: none; color: CanvasText; }
}