/* ============================================================
   Karaoke DJ — shared theme (Disco edition)
   One source of truth for tokens + components used by every page.
   ============================================================ */
:root {
  /* surfaces */
  --bg: #0b0618;
  --bg2: #120a26;
  --card: #1a1030;
  --card2: #231640;
  --field: #120a24;
  --line: #2f2150;
  /* text */
  --fg: #f7f3ff;
  --muted: #b4a9cf;   /* 8.2:1 on --card */
  --faint: #8a7fa8;   /* 5.4:1 on --bg  */
  /* brand */
  --pink: #ff5aa8;        /* text / accents on dark */
  --pink-fill: #d61f78;   /* filled buttons, white text 4.85:1 */
  --violet-fill: #7c3aed; /* white text 5.7:1 */
  --gold: #ffc94a;        /* last call / highlights, black text 13.7:1 */
  --lilac: #c9a7ff;       /* "original" (with vocals) accent, 9:1 on --card */
  --lilac-fill: #7c4dd8;  /* white text 5.4:1 */
  --blush: #f4b6d8;       /* soft pink highlight, dark text 10.8:1 */
  --ok: #4ade80;
  --danger: #ff6b6b;
  --disco: linear-gradient(90deg, #ff5aa8, #e39bff 50%, #c9a7ff);
  --disco-fill: linear-gradient(135deg, #d61f78, #7c4dd8);
  /* shape */
  --r-s: 8px; --r-m: 14px; --r-l: 20px;
  --tap: 44px;
  /* type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Monoton", "Righteous", var(--font);
  --heading: "Righteous", var(--font);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
input:focus-visible { outline: none; border-color: var(--lilac) !important; box-shadow: 0 0 0 3px rgba(201, 167, 255, .3); }
[hidden] { display: none !important; }

/* ---------- disco lights: drifting colored specks behind everything ---------- */
.disco-lights { position: fixed; inset: -20%; pointer-events: none; z-index: 0; opacity: .5;
  background:
    radial-gradient(3px 3px at 12% 18%, #ff5aa8 50%, transparent 51%),
    radial-gradient(2px 2px at 28% 62%, #c9a7ff 50%, transparent 51%),
    radial-gradient(3px 3px at 44% 30%, #ffc94a 50%, transparent 51%),
    radial-gradient(2px 2px at 63% 78%, #ff5aa8 50%, transparent 51%),
    radial-gradient(3px 3px at 78% 22%, #c9a7ff 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 55%, #ffc94a 50%, transparent 51%),
    radial-gradient(2px 2px at 6% 84%, #f4b6d8 50%, transparent 51%),
    radial-gradient(3px 3px at 52% 92%, #f4b6d8 50%, transparent 51%);
  background-size: 420px 420px; }
.disco-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 40% at 50% 0%, rgba(124, 58, 237, .25), transparent 70%),
              radial-gradient(40% 30% at 100% 100%, rgba(201, 167, 255, .14), transparent 70%); }

/* ---------- disco ball (SVG built by common.js discoBall()) ---------- */
.disco-ball { display: block; overflow: visible; }
.disco-ball .twinkle { transform-box: fill-box; transform-origin: center; }

/* ---------- wordmark ---------- */
.wordmark { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: 1.05;
  background: var(--disco); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- cards / labels ---------- */
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px; }
.label { color: var(--muted); font-size: 12px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-m); font-weight: 800; font-size: 15px; color: #fff; background: var(--card2); }
.btn.primary { background: var(--pink-fill); }
.btn.disco { background: var(--disco-fill); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--fg); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.gold { background: var(--gold); color: #000; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.iconbtn { flex: none; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--line); background: var(--card2);
  color: var(--fg); display: grid; place-items: center; font-size: 16px; padding: 0; }

/* ---------- tags ---------- */
.tag { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 6px; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }
.tag.k { background: #3d0f2a; color: #ff8cc4; }
.tag.v { background: #2a1650; color: #d8b4fe; }
.tag.star { background: #3a2c08; color: var(--gold); }

/* ---------- toast (with optional action) ---------- */
#toast { position: fixed; left: 16px; right: 16px; max-width: 480px; margin: 0 auto; bottom: calc(20px + env(safe-area-inset-bottom));
  background: var(--card2); border: 1px solid var(--line); color: var(--fg); padding: 8px 8px 8px 16px; min-height: 52px; border-radius: var(--r-m);
  display: flex; align-items: center; gap: 12px; font-weight: 600; z-index: 30; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transform: translateY(160%); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
#toast.show { transform: none; visibility: visible; transition: transform .25s; }
#toast span { flex: 1; padding: 6px 0; }
#toast button { border: 0; background: transparent; color: var(--gold); font-weight: 800; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-s); }
#toast.err { border-color: var(--danger); }
#toast.ok { border-color: var(--ok); }

/* ---------- confirm dialog ---------- */
dialog.confirm { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); color: var(--fg); padding: 20px; max-width: 360px; width: calc(100% - 32px); }
dialog.confirm::backdrop { background: rgba(5, 2, 12, .75); }
dialog.confirm h3 { margin: 0 0 6px; font-size: 18px; }
dialog.confirm p { margin: 0 0 16px; color: var(--muted); }
dialog.confirm .row { display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   TV screens (display.html + tv.html share these)
   ============================================================ */
.tv-screen { position: absolute; inset: 0; display: none; place-items: center; text-align: center; overflow: hidden; padding: 4vh 6vw;
  background: radial-gradient(ellipse at 50% 20%, #2a1250 0%, #140a2c 40%, var(--bg) 75%); }
.tv-screen.show { display: grid; }
.tv-screen > .inner { position: relative; z-index: 2; }
/* light beams from the ball */
.tv-beams { position: absolute; left: 50%; top: -30vh; width: 200vmax; height: 200vmax; transform: translateX(-50%); z-index: 1; pointer-events: none; opacity: .22;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 90, 168, .9) 0deg 2deg, transparent 2deg 16deg,
             rgba(201, 167, 255, .9) 16deg 18deg, transparent 18deg 30deg, rgba(244, 182, 216, .9) 30deg 32deg, transparent 32deg 45deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 8%, #000 9%, transparent 55%); mask: radial-gradient(circle at 50% 50%, transparent 8%, #000 9%, transparent 55%); }
.tv-hang { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; }
.tv-hang.left { left: auto; right: 27vw; transform: none; } .tv-hang.right { left: auto; right: 7vw; transform: none; }
.tv-hang svg { width: auto; }
.tv-hang.left svg { height: 26vh; } .tv-hang.right svg { height: 17vh; }
.tv-title { font-size: clamp(44px, 6.4vw, 120px); margin: 0; }
.tv-sub { color: var(--muted); font-family: var(--heading); font-size: clamp(20px, 2.1vw, 36px); margin: 1vh 0 0; letter-spacing: .04em; }
.tv-qr { width: clamp(240px, 36vh, 520px); height: auto; border-radius: 18px; background: #fff; padding: 10px; margin: 3vh auto 2vh; display: block;
  box-shadow: 0 0 0 4px rgba(255, 90, 168, .6), 0 0 40px rgba(255, 90, 168, .35), 0 0 80px rgba(201, 167, 255, .3); }
.tv-steps { color: var(--fg); font-size: clamp(20px, 1.9vw, 32px); margin: 1vh 0; }
.tv-steps b { vertical-align: .12em; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--pink-fill); color: #fff; font-size: .8em; margin-right: .3em; }
.tv-status { color: var(--muted); font-size: clamp(20px, 2vw, 32px); margin: 1.5vh 0 0; }
.tv-up { display: flex; gap: 1.2vw; justify-content: center; margin-top: 2.5vh; flex-wrap: wrap; }
.tv-up div { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.2vh 1.4vw; font-size: clamp(18px, 1.5vw, 26px); max-width: 28vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-up div b { color: var(--pink); }
.tv-hint { color: var(--faint); font-size: clamp(14px, 1.1vw, 18px); margin-top: 2vh; }
.tv-hint b { color: var(--muted); }
/* interstitial */
.tv-kicker { color: var(--gold); font-family: var(--heading); letter-spacing: .24em; font-size: clamp(18px, 1.7vw, 30px); }
.tv-name { font-family: var(--display); font-size: clamp(64px, 9.5vw, 180px); line-height: 1.05; margin: 2vh 0 1.5vh;
  background: var(--disco); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(255, 90, 168, .35)); }
.tv-name .amp { font-family: var(--font); font-weight: 300; font-size: .6em; vertical-align: .2em; }
/* emoji inside gradient text (names, wordmark): paint them normally instead of as gradient silhouettes */
.emo { -webkit-text-fill-color: initial; color: var(--fg); background: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font);
  font-size: .8em; vertical-align: .05em; }
.tv-song { font-size: clamp(24px, 2.7vw, 46px); max-width: 72vw; margin: 0 auto; font-weight: 700; }
.tv-count { margin-top: 4vh; font-size: clamp(20px, 2vw, 32px); color: var(--muted); }
.tv-count b { color: var(--gold); font-size: 1.6em; font-family: var(--heading); }
.tv-qrsmall { position: absolute; right: 2vw; bottom: 2vh; width: clamp(120px, 14vh, 200px); border-radius: 12px; background: #fff; padding: 6px; z-index: 3; }
.tv-star { display: none; margin-top: 1.5vh; font-family: var(--heading); color: var(--gold); font-size: clamp(22px, 2.2vw, 38px); letter-spacing: .06em; }
.birthday .tv-star { display: block; }
.birthday .tv-kicker { color: var(--pink); }

/* Disco ball motion (spin is in common.js) — always on, even with "Reduce motion". */
.disco-ball .twinkle { animation: twinkle 2.4s ease-in-out infinite; }
.disco-ball .twinkle:nth-of-type(2n) { animation-delay: .8s; }
.disco-ball .twinkle:nth-of-type(3n) { animation-delay: 1.6s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.swing { animation: swing 6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes swing { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }

/* ============================================================
   Other motion — only when the viewer allows it
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .disco-lights { animation: drift 90s linear infinite; }
  @keyframes drift { to { transform: translate3d(-420px, 420px, 0); } }
  .tv-beams { animation: beams 30s linear infinite; }
  @keyframes beams { to { transform: translateX(-50%) rotate(360deg); } }
}