/* DJ Betty Karaoke — shared styles
   Color tokens pulled directly from djbetty.com's own CSS custom properties,
   so this matches the main site exactly rather than approximating it. */

:root {
  --bg: #08080c;
  --panel: #12121a;
  --panel2: #181822;
  --text: #f7f7fb;
  --muted: #b9b9c7;
  --yellow: #fff11a;
  --gold: #ffc928;
  --pink: #ff3f9c;
  --purple: #7b39ff;
  --line: #2a2a39;
  --green: #35d68a;
  --shadow: 0 18px 45px rgba(0,0,0,.28);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  padding: 24px 16px 60px;
}

main {
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}

main.host { max-width: 680px; }

/* soft violet/pink glow behind the top of the page, matching the reference */
.glow {
  position: absolute;
  top: -40px; left: -20px; right: -20px;
  height: 220px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(123,57,255,.32), rgba(255,63,156,.10) 50%, transparent 75%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

.eyebrow {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--muted);
  margin-bottom: 16px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.page-header {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

h1.headline {
  position: relative; z-index: 1;
  font-size: 1.9rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--yellow);
}
main.host h1.headline { font-size: 1.6rem; margin-bottom: 0; }
main:not(.host) h1.headline { text-align: center; }

.hero-img {
  position: relative; z-index: 1;
  display: block;
  width: 100%;
  max-width: 140px;
  margin: 0 auto 14px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.install-btn {
  position: relative; z-index: 1;
  display: block;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.82rem;
}

.ios-tip {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0,0,0,.6);
}
.ios-tip-inner {
  /* Pinned directly to the real bottom edge, rather than centered via flex
     inside a full-height fixed parent — on mobile, a browser's dynamic
     address bar can shrink the true viewport after layout, leaving a
     flex-centered sheet rendered below the fold, visible but untappable. */
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--panel2);
  border: 1px solid var(--gold);
  border-radius: 16px 16px 0 0;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
}
.ios-tip-title { font-weight: 800; font-size: 1rem; margin-bottom: 8px; }
.ios-tip-steps { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.ios-tip-steps strong { color: var(--text); }
.share-icon {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  color: var(--gold);
}
.ios-tip-close {
  display: block; margin: 16px auto 0;
  background: var(--yellow); color: #090909; border: none;
  border-radius: 999px; padding: 10px 24px;
  font-weight: 800; font-size: 0.9rem;
}

.count-tag { font-size: 0.9rem; color: var(--muted); white-space: nowrap; }

/* ---- inputs shared by search / name / quick-add ---- */
input[type="text"], input[type="tel"], textarea {
  width: 100%;
  font-family: inherit;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 1rem;
  resize: vertical;
}
input[type="text"]::placeholder, input[type="tel"]::placeholder, textarea::placeholder { color: var(--muted); }
input[type="text"]:focus, input[type="tel"]:focus, textarea:focus { outline: 2px solid var(--purple); outline-offset: 1px; }

.search-wrap { position: relative; z-index: 1; }
.search-wrap .search-icon {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; font-size: 1.05rem;
}

/* ---- search results dropdown ---- */
ul.results-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
ul.results-list:empty { border: none; }
ul.results-list li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
ul.results-list li:last-child { border-bottom: none; }
ul.results-list li:hover { background: var(--panel2); }
ul.results-list li.muted { color: var(--muted); cursor: default; }
ul.results-list li .r-title { font-weight: 700; }
ul.results-list li .r-artist { color: var(--muted); font-size: 0.85rem; margin-top: 1px; }

/* ---- selected song chip + name step ---- */
.selected-chip {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.selected-chip[hidden] { display: none; }
.selected-chip .txt { font-weight: 700; }
.selected-chip button { background: none; border: none; color: var(--muted); font-size: 0.85rem; cursor: pointer; text-decoration: underline; }

#name-step[hidden] { display: none; }
#name-step { margin-top: 14px; }
#name-step input { margin-top: 10px; }
#name-step input:first-child { margin-top: 0; }

#message-step[hidden] { display: none; }
#message-step { margin-top: 10px; }
#message-step textarea { font-size: 0.92rem; }
.identity-note { position: relative; z-index: 1; font-size: 0.8rem; color: var(--muted); margin-top: 10px; }
.identity-note button {
  background: none; border: none; color: var(--muted); text-decoration: underline;
  cursor: pointer; font-size: inherit; padding: 0; font-family: inherit;
}
.identity-note[hidden] { display: none; }

/* ---- buttons ---- */
button { cursor: pointer; font-family: inherit; }

.btn-primary {
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--yellow);
  color: #090909;
  font-size: 1rem;
  font-weight: 900;
}
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: 0.9rem;
}

.status-msg {
  position: relative; z-index: 1;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--pink);
  margin-top: 10px;
}

/* ---- guest: status card ("song request in queue") ---- */
.status-card {
  position: relative; z-index: 1;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--purple);
  background: linear-gradient(180deg, rgba(123,57,255,.16), rgba(255,63,156,.05));
  box-shadow: var(--shadow);
  text-align: center;
}
.status-card[hidden] { display: none; }
.status-card .label { font-size: 0.72rem; color: var(--muted); }
.status-card .num { font-size: 2rem; font-weight: 900; color: var(--gold); line-height: 1; margin: 4px 0 1px; }
.status-card .spot-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 8px; }
.status-card .song { font-weight: 800; font-size: 0.98rem; margin-bottom: 10px; }

.btn-leave {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- now singing (guest: small line / host: full card) ---- */
.now-singing-line {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 0.88rem; color: var(--muted);
  margin: 20px 0 4px;
}
.now-singing-line[hidden] { display: none; }
.now-singing-line strong { color: var(--text); }

.now-singing-card {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(123,57,255,.16), rgba(255,63,156,.05));
  border: 1px solid var(--purple);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  box-shadow: var(--shadow);
}
.now-singing-card .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); font-weight: 800; margin-bottom: 4px; }
.now-singing-card .song { font-weight: 800; font-size: 1.1rem; }
.now-singing-card .sub { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.now-singing-card .empty-text { color: var(--muted); font-size: 0.9rem; }
.now-singing-card[hidden] { display: none; }

/* ---- up next: simple numbered name list (guest) ---- */
.section-label {
  position: relative; z-index: 1;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  margin: 22px 0 6px;
}
ol.simple-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
ol.simple-list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
ol.simple-list li .n { color: var(--muted); width: 1.5em; text-align: right; flex-shrink: 0; }
ol.simple-list li .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { color: var(--muted); font-size: 0.9rem; padding: 10px 0; }

/* ---- host: quick add ---- */
.quick-add {
  position: relative; z-index: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin: 18px 0;
}
.quick-add p { margin: 0 0 12px; font-size: 0.85rem; color: var(--muted); }
.quick-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-add-row input {
  flex: 1; min-width: 130px; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 0.9rem;
}
.quick-add-row button {
  background: var(--yellow); color: #090909; font-weight: 800; border: none;
  border-radius: 999px; padding: 11px 20px; font-size: 0.9rem; white-space: nowrap;
}
.quick-add-row button:disabled { opacity: 0.5; }

/* ---- host: queue rows ---- */
ul.host-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.host-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.host-row-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.host-row .n { color: var(--muted); width: 1.4em; text-align: right; flex-shrink: 0; }
.host-row .info { flex: 1; min-width: 140px; }
.host-row .song { font-weight: 800; font-size: 1rem; }
.host-row .song.unset { color: var(--muted); font-weight: 600; font-style: italic; }
.host-row .sub { color: var(--muted); font-size: 0.85rem; margin-top: 1px; }
.host-row .controls { display: flex; gap: 5px; align-items: center; flex-shrink: 0; margin-left: auto; flex-wrap: wrap; }

.ctrl-icon {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.ctrl-icon:disabled { opacity: 0.3; }
.ctrl-icon-wide { width: 34px; letter-spacing: -2px; }

.pill-btn {
  border-radius: 999px; padding: 7px 15px; font-size: 0.82rem; font-weight: 700;
  border: 1px solid; background: transparent; white-space: nowrap;
}
.pill-btn.green { color: var(--green); border-color: var(--green); }
.pill-btn.pink { color: var(--pink); border-color: var(--pink); }
.pill-btn.gold { color: var(--gold); border-color: var(--gold); }

.message-bubble {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--pink);
  font-size: 0.88rem;
}
.message-bubble .label { font-size: 0.7rem; text-transform: uppercase; color: var(--pink); font-weight: 700; margin-bottom: 2px; }

.reply-sent {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
/* ...except when it's the first thing in the bubble — a guest who messages
   before the host ever does sees just their own text, with no stray rule
   floating above nothing. Covers both markup styles in use: the host page
   omits the "Sent" block outright when absent (:first-child), the guest page
   always renders it but toggles [hidden] ([hidden] + .reply-sent). */
.reply-sent:first-child, [hidden] + .reply-sent {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.reply-sent .label { font-size: 0.7rem; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 2px; }

.msg-row { display: flex; gap: 8px; margin-top: 10px; }
.msg-row input {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 0.85rem;
}

.rename-row { display: none; gap: 8px; margin-top: 10px; }
.rename-row.open { display: flex; }
.rename-row input {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 0.85rem;
}

.departure-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.departure-toast {
  padding: 9px 16px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--gold); color: var(--gold);
  font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  opacity: 1; transition: opacity .4s ease;
}
.departure-toast.fade-out { opacity: 0; }
.departure-toast.toast-reply { border-color: var(--pink); color: var(--pink); }

.reset-row {
  position: relative; z-index: 1;
  text-align: center;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.reset-row .pill-btn { opacity: 0.75; }
.reset-row .pill-btn:hover { opacity: 1; }

.footer-note {
  position: relative; z-index: 1;
  text-align: center; color: var(--muted); font-size: 0.75rem;
  margin-top: 28px; line-height: 1.5;
}
a.host-link, a.guest-link { color: var(--muted); }

.site-btn {
  position: relative; z-index: 1;
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

@media (min-width: 640px) {
  .host-row-top { flex-wrap: nowrap; }
}