/* live.buskermate.com — standalone styles. NOT importing /style.css,
   so nothing here collides with the main app's dialog/form rules. */

:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --text: #111827;
  --text-muted: #6b7280;
  --text-dim: #9ca3af;
  --accent: #2050ff;        /* musescore-ish vivid blue */
  --accent-soft: #eef2ff;
  --accent-strong: #1a3fe0;
  --like: #e11d48;
  --like-soft: #ffe4e9;
  --ok: #15803d;
  --ok-soft: #d1fae5;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06);
  --radius: 10px;
  --gap: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Apple SD Gothic Neo",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Block stray horizontal scroll using `clip` (NOT `hidden`) — the
     latter kills momentum scrolling on iOS Safari. Fallback below
     for browsers that don't yet know `clip`. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* Centered loading overlay shown while /api/live/by-slug is fetching. */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);   /* 50% transparent, no blur */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 100;
}
.loading-overlay .spinner {
  width: 38px;
  height: 38px;
  border: 4px solid rgba(32, 80, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
.loading-overlay .loading-text {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Gentle perpetual "heartbeat" on the now-playing overlay. Two jobs: (1) reads
 * as a subtle LIVE cue; (2) guarantees the rendered frame keeps changing, so a
 * capture/streaming layer that drops STATIC sources (a suspected TikTok URL-
 * widget failure mode) can't classify the overlay as a dead frame. Pure
 * compositor animation — runs even when JS timers are throttled. The data fix
 * (always-poll + cache-bust + resume-recover in live.js) is the real cure;
 * this is cheap defense-in-depth. */
@keyframes bm-live-heartbeat {
  0%, 100% { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14); }
  50%      { box-shadow: 0 18px 50px rgba(79, 124, 255, 0.30); }
}
.info-card, .info-empty {
  animation: bm-live-heartbeat 2.6s ease-in-out infinite;
  will-change: box-shadow;
}
.muted-link { color: var(--text-muted); font-size: 13px; }
.hint { color: var(--text-muted); font-size: 13px; margin: 4px 0 0; }

/* ── topbar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 880px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 20px; }
.brand-mark-img { display: block; }
.brand-text { font-weight: 700; font-size: 16px; }
.brand-tag {
  background: var(--accent); color: white;
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  margin-left: 4px; vertical-align: 2px; font-weight: 700;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.me-name { font-size: 13px; color: var(--text); font-weight: 600; }
.google-btn { min-height: 32px; }

/* ── layout ─────────────────────────────────────────────────────────── */
.page {
  max-width: 880px; margin: 24px auto 60px; padding: 0 20px;
  display: flex; flex-direction: column; gap: var(--gap);
}
.footer {
  max-width: 880px; margin: 40px auto 60px; padding: 22px 20px 0;
  color: var(--text-dim); font-size: 12px; text-align: center;
  border-top: 1px solid var(--border);
  line-height: 1.7;
}
.footer .biz-info { color: #4b5563; }
.footer .biz-info strong { color: #1f2937; font-weight: 700; }
.footer .biz-info > div { margin: 2px 0; }
.footer .copyright { margin-top: 14px; color: #9ca3af; }
.footer .legal-links { margin-top: 14px; }
.footer .legal-links a { color: #4b5563; margin: 0 4px; font-weight: 500; text-decoration: none; }
.footer .legal-links a:hover { text-decoration: underline; }
.footer .sep { color: #d1d5db; }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #1e40af 0%, #2050ff 50%, #6366f1 100%);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-md);
  color: white;
}
.hero-inner { display: flex; align-items: center; gap: 18px; }
.hero-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; flex-shrink: 0;
}
.hero h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.hero-handle { margin: 4px 0 0; opacity: 0.85; font-size: 14px; }

/* ── tabs ───────────────────────────────────────────────────────────── */
.tabs {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  display: flex; gap: 4px;
  box-shadow: var(--shadow-sm);
}
.tab {
  flex: 1;
  border: none; background: transparent;
  padding: 10px 14px; border-radius: 6px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.tab:hover { background: #f3f4f6; color: var(--text); }
.tab.active { background: var(--accent); color: white; }
.tab.active .tab-count { background: rgba(255,255,255,0.25); color: white; }
.tab-icon { font-size: 14px; }
.tab-count {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: #f3f4f6; color: var(--text-muted); font-weight: 700;
  min-width: 20px; text-align: center;
}

/* ── card / pane ────────────────────────────────────────────────────── */
.card, .pane {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.empty { text-align: center; color: var(--text-muted); padding: 36px 20px; }
.empty-line {
  text-align: center; color: var(--text-dim);
  padding: 28px 0; margin: 0; font-size: 14px;
}
.pane-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.pane-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.pane-head .btn-primary { margin-left: auto; }
.sort-controls { margin-left: auto; }
.sort-select {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; font-size: 13px; background: white;
}

/* ── schedule ───────────────────────────────────────────────────────── */
.schedule-list { list-style: none; padding: 0; margin: 0; }
.sched-card {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.sched-card:last-child { border-bottom: none; }
.sched-date-pill {
  background: var(--accent-soft); color: var(--accent-strong);
  border-radius: 8px; padding: 8px;
  text-align: center;
}
.sched-date-pill .month { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.sched-date-pill .day { font-size: 22px; font-weight: 800; line-height: 1; }
.sched-date-pill .year { font-size: 10px; color: var(--accent); opacity: 0.7; margin-top: 2px; }
.sched-card.past .sched-date-pill { background: #f3f4f6; color: var(--text-muted); }
.sched-card.past .sched-date-pill .year { color: var(--text-muted); }
.sched-body .sched-time-venue {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sched-time { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sched-type-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong);
}
.sched-type-badge.online { background: var(--warn-soft); color: var(--warn); }
.sched-venue { color: var(--text); }
.sched-venue a { word-break: break-all; }
.sched-notes { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.sched-actions { display: flex; gap: 6px; }

/* ── request form ───────────────────────────────────────────────────── */
.login-cta {
  background: var(--accent-soft); color: var(--accent-strong);
  padding: 12px 14px; border-radius: 8px;
  font-size: 14px;
}
.request-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.rf-row { display: flex; gap: 8px; }
.rf-row > input { flex: 1; }
.rf-row > input + input { flex: 0.8; }
.rf-row > input + button { flex: 0 0 auto; }
.request-form input {
  padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: 8px; font-size: 14px; background: white;
}
.request-form input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
@media (max-width: 560px) {
  .rf-row { flex-direction: column; }
}

/* ── requests ───────────────────────────────────────────────────────── */
.requests-list { list-style: none; padding: 0; margin: 0; }
.req-card {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.req-card:last-child { border-bottom: none; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.req-body { min-width: 0; }
.req-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.req-song { font-size: 16px; font-weight: 700; color: var(--text); }
.req-artist { color: var(--text-muted); font-size: 14px; }
.req-fulfilled-badge {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok); margin-left: 2px;
}
.req-meta { color: var(--text-dim); font-size: 12px; margin-top: 3px; }
.req-message { color: var(--text); margin-top: 6px; font-size: 14px; }
.req-memo {
  margin-top: 8px; padding: 8px 12px;
  background: var(--warn-soft); border-left: 3px solid #f59e0b;
  border-radius: 4px; font-size: 13px; color: #78350f;
}
.req-memo strong { color: var(--warn); }
.req-actions {
  margin-top: 8px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.like-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 4px 12px; background: white;
  font-size: 13px; color: var(--text-muted); cursor: pointer;
  transition: all 0.12s;
}
.like-btn:hover { border-color: var(--like); color: var(--like); }
.like-btn.liked {
  background: var(--like-soft); border-color: var(--like); color: var(--like);
  font-weight: 600;
}
.like-btn .heart { font-size: 12px; }
.owner-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.owner-actions label { font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.replies {
  margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.reply {
  font-size: 13px; color: var(--text);
}
.reply .author { font-weight: 700; color: var(--text); }
.reply .reply-meta { color: var(--text-dim); font-size: 11px; margin-left: 4px; }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-link {
  font-family: inherit; font-size: 14px; font-weight: 600;
  border-radius: 8px; cursor: pointer; line-height: 1;
  padding: 9px 16px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-primary {
  background: var(--accent); color: white; border: 1px solid var(--accent);
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-ghost {
  background: white; color: var(--text); border: 1px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-ghost.danger { color: var(--danger); border-color: #fecaca; }
.btn-ghost.danger:hover { background: #fef2f2; border-color: var(--danger); }
.btn-link {
  background: transparent; border: none; padding: 4px 8px;
  color: var(--accent); font-weight: 600;
}
.btn-link:hover { background: var(--accent-soft); }

/* ── dialog ─────────────────────────────────────────────────────────── */
dialog.dlg {
  border: none; border-radius: 12px;
  padding: 22px 24px;
  width: min(440px, 92vw);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}
dialog.dlg::backdrop { background: rgba(15, 23, 42, 0.5); }
dialog.dlg h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
dialog.dlg label {
  display: block; margin-top: 12px; font-size: 13px; color: var(--text-muted);
  font-weight: 600;
}
dialog.dlg input, dialog.dlg select, dialog.dlg textarea {
  width: 100%; margin-top: 4px;
  padding: 9px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: white;
}
dialog.dlg input:focus, dialog.dlg select:focus, dialog.dlg textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
dialog.dlg .form-row { display: flex; gap: 10px; }
dialog.dlg .form-row > label { flex: 1; margin-top: 12px; }
.dlg-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px;
}

/* ── /info overlay — TikTok-Live URL widget mode ──────────────────────
   Compact "now playing" card. Designed to be embedded inside another
   stream (TikTok Live, YouTube live banner). When `?bg=transparent` is
   set, the body background drops so the card can chroma-key cleanly.

   NOTE on sizing: the iframe size in TikTok is determined by TikTok's
   widget (drag handles in their editor), NOT by our page. We just have
   to render attractively inside whatever rectangle they give us. So we
   fill 100% of the iframe AND center the card — whatever extra space
   the iframe has becomes "the stream behind the card", which is what
   the busker actually wants once they go live. */
body.info-mode,
html {
  height: 100%;
}
body.info-mode {
  margin: 0;
}
.info-pane {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
body.info-transparent {
  background: transparent !important;
}
body.info-transparent .info-card,
body.info-transparent .info-empty {
  /* Slight darken so light text reads on bright streams. */
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.info-empty {
  font-size: 28px;
  color: var(--text-muted);
  padding: 24px 36px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed var(--border-strong);
}
.info-card {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 28px 36px 36px;   /* extra bottom space for signature */
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
  min-width: 340px;
  max-width: 720px;
  text-align: center;
  position: relative;        /* anchor for absolutely-positioned signature */
}
/* Tiny "Cover by 커버곰" tag in the bottom-right of the overlay card.
 * Absolute so it doesn't push the title layout around at any card width. */
.info-signature {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  opacity: 0.85;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.info-transparent .info-signature {
  color: rgba(255, 255, 255, 0.75);
}
.info-status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.info-status-pill.status-preparing {
  background: #e0e7ff;
  color: #3730a3;
  animation: info-soft-pulse 2.2s ease-in-out infinite;
}
/* "Coming up" card: slightly dimmed + soft pulse to convey
   anticipation without competing with the actual stream content. */
.info-card.upcoming {
  opacity: 0.92;
}
.info-card.upcoming .info-title {
  opacity: 0.92;
}
@keyframes info-soft-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.info-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 6px;
  word-break: keep-all;
}
.info-artist {
  font-size: 22px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.info-perf {
  /* Perf-name / venue removed from the overlay (TikTok-friendly: title
   * + artist only). Kept here for any future "full info" mode but
   * hidden by default — JS sets .hidden on this element. */
  display: none;
}
body.info-transparent .info-artist,
body.info-transparent .info-perf {
  color: rgba(255, 255, 255, 0.78);
}
body.info-transparent .info-perf {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Scale down for narrow embeds. */
@media (max-width: 480px) {
  .info-title { font-size: 28px; }
  .info-artist { font-size: 18px; }
  .info-card { padding: 18px 22px; min-width: 0; }
}