/* ==========================================================================
   LyricDrop — theme tokens
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

:root[data-theme="light"]{
  --bg: #F6F2FF;
  --bg-alt: #EFE7FF;
  --card: #FFFFFF;
  --card-border: rgba(30,20,60,0.08);
  --text: #1E1433;
  --text-dim: #6B627F;
  --accent: #FF3CAC;
  --accent-2: #7B3FE4;
  --accent-3: #2FD5E5;
  --accent-4: #FFD23F;
  --success: #12B886;
  --danger: #F0436B;
  --shadow: rgba(60,20,90,0.14);
  --disc-face: #1E1433;
}

:root[data-theme="dark"]{
  --bg: #100C22;
  --bg-alt: #191233;
  --card: #1D1638;
  --card-border: rgba(255,255,255,0.08);
  --text: #F3EFFF;
  --text-dim: #A79FC4;
  --accent: #FF5FC0;
  --accent-2: #9C6BFF;
  --accent-3: #3FE8F5;
  --accent-4: #FFDA6B;
  --success: #2FE0A6;
  --danger: #FF5C7C;
  --shadow: rgba(0,0,0,0.45);
  --disc-face: #0B0818;
}

*{ box-sizing: border-box; }

/* Prevent the native "select text / Copy" bubble from popping up when
   tapping buttons, cards, and other interactive elements on mobile.
   Real inputs/textareas (and anything explicitly marked selectable,
   like song lyrics) are excluded so users can still select/copy those. */
button, .card, .mode-btn, .diff-card, .topbar, .brand, .theme-toggle,
a.btn, .btn, .btn-ghost, .btn-outline, [role="button"], .kick-btn,
nav, .support-bar, .ad-slot, h1, h2, h3, .display, .stat, .badge{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* stops the iOS long-press callout menu */
  -webkit-tap-highlight-color: transparent;
}
input, textarea, [contenteditable="true"], .selectable{
  -webkit-user-select: text;
  user-select: text;
}

html,body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height:100vh;
  transition: background .3s ease, color .3s ease;
}

body{
  background-image:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--accent-3) 16%, transparent) 0%, transparent 45%);
}

/* ---------- doodle background (scribbl.io-style ambient wallpaper) ---------- */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 260px 260px;
  transition: opacity .3s ease;
}
@media (min-width: 640px){
  body::before{ background-size: 340px 340px; }
}
:root[data-theme="light"] body::before{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Ctext%20x%3D%2246%22%20y%3D%2255%22%20font-size%3D%2226%22%20opacity%3D%220.22%22%20transform%3D%22rotate%287%2046%2055%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B5%3C/text%3E%3Ctext%20x%3D%22243%22%20y%3D%2249%22%20font-size%3D%2230%22%20opacity%3D%220.22%22%20transform%3D%22rotate%284%20243%2049%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B6%3C/text%3E%3Ctext%20x%3D%22319%22%20y%3D%2283%22%20font-size%3D%2226%22%20opacity%3D%220.22%22%20transform%3D%22rotate%28-19%20319%2083%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%A7%3C/text%3E%3Ctext%20x%3D%22517%22%20y%3D%2246%22%20font-size%3D%2230%22%20opacity%3D%220.22%22%20transform%3D%22rotate%283%20517%2046%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%99%EF%B8%8F%3C/text%3E%3Ctext%20x%3D%2275%22%20y%3D%22248%22%20font-size%3D%2238%22%20opacity%3D%220.22%22%20transform%3D%22rotate%28-19%2075%20248%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%93%BC%3C/text%3E%3Ctext%20x%3D%22170%22%20y%3D%22212%22%20font-size%3D%2230%22%20opacity%3D%220.22%22%20transform%3D%22rotate%282%20170%20212%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B8%3C/text%3E%3Ctext%20x%3D%22343%22%20y%3D%22204%22%20font-size%3D%2234%22%20opacity%3D%220.22%22%20transform%3D%22rotate%28-17%20343%20204%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B9%3C/text%3E%3Ctext%20x%3D%22518%22%20y%3D%22258%22%20font-size%3D%2230%22%20opacity%3D%220.22%22%20transform%3D%22rotate%28-17%20518%20258%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%A4%3C/text%3E%3Ctext%20x%3D%2250%22%20y%3D%22395%22%20font-size%3D%2226%22%20opacity%3D%220.22%22%20transform%3D%22rotate%28-19%2050%20395%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%A5%81%3C/text%3E%3Ctext%20x%3D%22224%22%20y%3D%22390%22%20font-size%3D%2234%22%20opacity%3D%220.22%22%20transform%3D%22rotate%281%20224%20390%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%BA%3C/text%3E%3Ctext%20x%3D%22359%22%20y%3D%22432%22%20font-size%3D%2230%22%20opacity%3D%220.22%22%20transform%3D%22rotate%28-6%20359%20432%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%92%BF%3C/text%3E%3Ctext%20x%3D%22540%22%20y%3D%22410%22%20font-size%3D%2234%22%20opacity%3D%220.22%22%20transform%3D%22rotate%28-11%20540%20410%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%BC%3C/text%3E%3Ctext%20x%3D%2265%22%20y%3D%22578%22%20font-size%3D%2234%22%20opacity%3D%220.22%22%20transform%3D%22rotate%2810%2065%20578%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B5%3C/text%3E%3Ctext%20x%3D%22223%22%20y%3D%22497%22%20font-size%3D%2230%22%20opacity%3D%220.22%22%20transform%3D%22rotate%281%20223%20497%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B6%3C/text%3E%3Ctext%20x%3D%22387%22%20y%3D%22505%22%20font-size%3D%2226%22%20opacity%3D%220.22%22%20transform%3D%22rotate%28-0%20387%20505%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%A7%3C/text%3E%3Ctext%20x%3D%22556%22%20y%3D%22498%22%20font-size%3D%2234%22%20opacity%3D%220.22%22%20transform%3D%22rotate%283%20556%20498%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%99%EF%B8%8F%3C/text%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Ctext%20x%3D%2246%22%20y%3D%2255%22%20font-size%3D%2226%22%20opacity%3D%220.16%22%20transform%3D%22rotate%287%2046%2055%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B5%3C/text%3E%3Ctext%20x%3D%22243%22%20y%3D%2249%22%20font-size%3D%2230%22%20opacity%3D%220.16%22%20transform%3D%22rotate%284%20243%2049%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B6%3C/text%3E%3Ctext%20x%3D%22319%22%20y%3D%2283%22%20font-size%3D%2226%22%20opacity%3D%220.16%22%20transform%3D%22rotate%28-19%20319%2083%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%A7%3C/text%3E%3Ctext%20x%3D%22517%22%20y%3D%2246%22%20font-size%3D%2230%22%20opacity%3D%220.16%22%20transform%3D%22rotate%283%20517%2046%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%99%EF%B8%8F%3C/text%3E%3Ctext%20x%3D%2275%22%20y%3D%22248%22%20font-size%3D%2238%22%20opacity%3D%220.16%22%20transform%3D%22rotate%28-19%2075%20248%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%93%BC%3C/text%3E%3Ctext%20x%3D%22170%22%20y%3D%22212%22%20font-size%3D%2230%22%20opacity%3D%220.16%22%20transform%3D%22rotate%282%20170%20212%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B8%3C/text%3E%3Ctext%20x%3D%22343%22%20y%3D%22204%22%20font-size%3D%2234%22%20opacity%3D%220.16%22%20transform%3D%22rotate%28-17%20343%20204%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B9%3C/text%3E%3Ctext%20x%3D%22518%22%20y%3D%22258%22%20font-size%3D%2230%22%20opacity%3D%220.16%22%20transform%3D%22rotate%28-17%20518%20258%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%A4%3C/text%3E%3Ctext%20x%3D%2250%22%20y%3D%22395%22%20font-size%3D%2226%22%20opacity%3D%220.16%22%20transform%3D%22rotate%28-19%2050%20395%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%A5%81%3C/text%3E%3Ctext%20x%3D%22224%22%20y%3D%22390%22%20font-size%3D%2234%22%20opacity%3D%220.16%22%20transform%3D%22rotate%281%20224%20390%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%BA%3C/text%3E%3Ctext%20x%3D%22359%22%20y%3D%22432%22%20font-size%3D%2230%22%20opacity%3D%220.16%22%20transform%3D%22rotate%28-6%20359%20432%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%92%BF%3C/text%3E%3Ctext%20x%3D%22540%22%20y%3D%22410%22%20font-size%3D%2234%22%20opacity%3D%220.16%22%20transform%3D%22rotate%28-11%20540%20410%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%BC%3C/text%3E%3Ctext%20x%3D%2265%22%20y%3D%22578%22%20font-size%3D%2234%22%20opacity%3D%220.16%22%20transform%3D%22rotate%2810%2065%20578%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B5%3C/text%3E%3Ctext%20x%3D%22223%22%20y%3D%22497%22%20font-size%3D%2230%22%20opacity%3D%220.16%22%20transform%3D%22rotate%281%20223%20497%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%B6%3C/text%3E%3Ctext%20x%3D%22387%22%20y%3D%22505%22%20font-size%3D%2226%22%20opacity%3D%220.16%22%20transform%3D%22rotate%28-0%20387%20505%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%A7%3C/text%3E%3Ctext%20x%3D%22556%22%20y%3D%22498%22%20font-size%3D%2234%22%20opacity%3D%220.16%22%20transform%3D%22rotate%283%20556%20498%29%22%20font-family%3D%22%27Apple%20Color%20Emoji%27%2C%27Segoe%20UI%20Emoji%27%2C%27Noto%20Color%20Emoji%27%2Csans-serif%22%3E%F0%9F%8E%99%EF%B8%8F%3C/text%3E%3C/svg%3E");
}


h1,h2,h3,.display{
  font-family:'Fredoka', sans-serif;
  letter-spacing:.2px;
}

.mono{ font-family:'Space Mono', monospace; }

a{ color: var(--accent-2); }

/* ---------- layout shells ---------- */
.wrap{ max-width: 960px; margin:0 auto; padding: 24px; }
.center-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  max-width: 960px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fredoka'; font-weight:600; font-size:1.3rem;
}
.brand-disc{
  width:34px; height:34px; border-radius:50%;
  background: conic-gradient(var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  position:relative; flex-shrink:0;
  animation: spin 6s linear infinite;
}
.brand-disc::after{
  content:''; position:absolute; inset:38%; border-radius:50%; background:var(--disc-face);
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.theme-toggle{
  border:none; cursor:pointer;
  width:44px; height:44px; border-radius:50%;
  background: var(--card);
  border: 1px solid var(--card-border);
  font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px var(--shadow);
  transition: transform .15s ease;
}
.theme-toggle:hover{ transform: scale(1.08) rotate(-8deg); }
a.theme-toggle{ text-decoration:none; color:inherit; }

.confetti-canvas{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:9999; }

/* ---------- cards & buttons ---------- */
.card{
  background: var(--card);
  border:1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: 0 12px 32px var(--shadow);
  padding: 28px;
}

.btn{
  font-family:'Fredoka'; font-weight:600; font-size:1rem;
  border:none; border-radius: 14px; cursor:pointer;
  padding: 14px 24px;
  color:#fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 50%, transparent); }
.btn:active{ transform: translateY(0px) scale(.98); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-outline{
  background: transparent;
  color: var(--text);
  border: 2px solid var(--card-border);
  box-shadow:none;
}
.btn-outline:hover{ border-color: var(--accent-2); box-shadow:none; }

.btn-ghost{
  background: var(--bg-alt);
  color: var(--text);
  box-shadow:none;
}

.btn-sm{ padding:8px 14px; font-size:.85rem; border-radius:10px; }

.btn-danger{ background: linear-gradient(120deg, var(--danger), #c92a4b); }
.btn-success{ background: linear-gradient(120deg, var(--success), #059669); }

input[type="text"], input[type="password"], input[type="number"], input[type="url"], textarea, select{
  font-family:'Inter'; font-size:1rem;
  padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--text);
  width:100%;
  outline:none;
  transition: border-color .15s ease;
}
input:focus, textarea:focus, select:focus{ border-color: var(--accent-2); }
label{ font-size:.85rem; font-weight:600; color: var(--text-dim); display:block; margin-bottom:6px; }

/* ---------- pill / badge ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 12px; border-radius: 999px;
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.pill-easy{ background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.pill-medium{ background: color-mix(in srgb, var(--accent-4) 25%, transparent); color: #a16207; }
:root[data-theme="dark"] .pill-medium{ color: var(--accent-4); }
.pill-hard{ background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }

/* ---------- footer action bar (donate / other site) ---------- */
.support-bar{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  padding: 18px 24px 32px;
}

/* ---------- ad slot ---------- */
.ad-slot{
  border: 2px dashed var(--card-border);
  border-radius: 16px;
  padding: 18px;
  text-align:center;
  color: var(--text-dim);
  font-size:.85rem;
  margin: 20px auto;
  max-width: 728px;
  min-height: 90px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- username gate modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(10,6,25,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index: 200; padding:20px;
  backdrop-filter: blur(4px);
}
.modal-card{
  max-width: 420px; width:100%;
  text-align:center;
}

/* ---------- vinyl hero ---------- */
.vinyl{
  width:180px; height:180px; border-radius:50%;
  margin: 0 auto 18px;
  background: conic-gradient(var(--accent), var(--accent-2), var(--accent-3), var(--accent-4), var(--accent));
  position:relative;
  box-shadow: 0 20px 40px var(--shadow);
  animation: spin 9s linear infinite;
}
.vinyl::before{
  content:''; position:absolute; inset:12%; border-radius:50%;
  background: repeating-radial-gradient(circle, transparent 0 6px, rgba(0,0,0,.08) 7px);
}
.vinyl::after{
  content:''; position:absolute; inset:40%; border-radius:50%; background: var(--disc-face);
  box-shadow: 0 0 0 4px var(--card);
}
.vinyl.paused{ animation-play-state: paused; }

/* ---------- home page mode buttons ---------- */
.mode-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:14px; margin: 24px 0 4px;
}
.mode-btn{
  cursor:pointer; text-align:center;
  border-radius:20px; padding:24px 16px;
  border:2px solid var(--card-border);
  background: var(--card);
  box-shadow: 0 10px 26px var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition: transform .15s ease, border-color .15s ease;
  font-family: inherit;
}
.mode-btn:hover{ transform: translateY(-3px); border-color: var(--accent-2); }
.mode-btn:active{ transform: translateY(0) scale(.98); }
.mode-icon{ font-size:2rem; }
.mode-label{ font-family:'Fredoka'; font-weight:600; font-size:1.05rem; color:var(--text); }
.mode-sub{ font-size:.8rem; color:var(--text-dim); }
.mode-daily{ border-color: color-mix(in srgb, var(--accent-4) 40%, var(--card-border)); }
.mode-unlimited{ border-color: color-mix(in srgb, var(--accent-3) 40%, var(--card-border)); }
.mode-multi{ border-color: color-mix(in srgb, var(--accent) 40%, var(--card-border)); }
.mode-artist{ border-color: color-mix(in srgb, var(--accent-2) 40%, var(--card-border)); }

/* ---------- artist search ---------- */
.artist-search-box{ position:relative; max-width:420px; margin: 0 auto; }
.artist-suggestions{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background: var(--card); border:2px solid var(--card-border); border-radius:14px;
  box-shadow: 0 14px 30px var(--shadow); max-height:260px; overflow-y:auto;
  z-index:20; text-align:left;
}
.artist-suggestions .artist-option{
  padding:10px 16px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; font-size:.92rem;
}
.artist-suggestions .artist-option:hover, .artist-suggestions .artist-option.active{ background: var(--bg-alt); }
.artist-suggestions .artist-option .count{ color:var(--text-dim); font-size:.8rem; white-space:nowrap; }
.diff-card.disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ---------- multiplayer: room code ---------- */
.room-code{
  font-family:'Space Mono', monospace; font-weight:700;
  font-size: 2rem; letter-spacing: 6px;
  background: var(--bg-alt); border-radius:14px; padding: 14px 10px;
  text-align:center; border: 2px dashed var(--card-border);
}
.copy-code-btn{ margin-top:10px; width:100%; }

/* ---------- multiplayer: player list / leaderboard ---------- */
.player-list{ display:flex; flex-direction:column; gap:8px; margin: 14px 0; }
.player-row{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bg-alt); border-radius:12px; padding: 10px 14px;
}
.player-row .rank{ font-family:'Fredoka'; font-weight:700; color:var(--text-dim); width:24px; }
.player-row .name{ flex:1; font-weight:600; display:flex; align-items:center; gap:6px; }
.player-row .score{ font-family:'Space Mono'; font-weight:700; }
.player-row.me{ border:2px solid var(--accent-2); }
.player-row.rank-1 .score{ color: var(--accent-4); }
.host-badge{ font-size:.68rem; background: var(--accent-2); color:#fff; padding:2px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; }
.kick-btn{ border:none; background:none; color:var(--danger); cursor:pointer; font-size:.75rem; padding:4px 8px; }

/* ---------- multiplayer: round timer bar ---------- */
.timer-bar-track{
  width:100%; height:10px; border-radius:999px; background: var(--bg-alt); overflow:hidden; margin: 10px 0 4px;
}
.timer-bar-fill{
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  transition: width .1s linear;
}
.round-indicator{ font-family:'Space Mono'; font-size:.85rem; color:var(--text-dim); text-align:center; margin-bottom:6px; }

.settings-row{ display:flex; gap:12px; flex-wrap:wrap; }
.settings-row > div{ flex:1; min-width:120px; }

.winner-banner{
  text-align:center; padding: 22px; border-radius:20px; margin-bottom:16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent));
  border: 2px solid var(--accent-2);
}
.winner-banner .trophy{ font-size:2.6rem; }

/* ---------- difficulty select cards ---------- */
.diff-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:16px; margin: 22px 0;
}
.diff-card{
  cursor:pointer; text-align:left;
  border-radius:18px; padding:20px;
  border:2px solid var(--card-border);
  background: var(--bg-alt);
  transition: transform .15s ease, border-color .15s ease;
}
.diff-card:hover{ transform: translateY(-3px); border-color: var(--accent-2); }
.diff-card h3{ margin: 10px 0 4px; }
.diff-card p{ margin:0; color: var(--text-dim); font-size:.88rem; }

/* ---------- lyric card in game ---------- */
.lyric-tape{
  background: var(--bg-alt);
  border-radius: 18px;
  padding: 26px;
  font-family:'Space Mono', monospace;
  font-size: 1.15rem;
  line-height:1.7;
  text-align:center;
  white-space: pre-line;
  border: 2px dashed var(--card-border);
  min-height:100px;
}

.guess-row{ display:flex; gap:10px; margin-top:18px; }
.guess-row input{ flex:1; }

.feedback{
  margin-top:14px; padding:12px 16px; border-radius:12px;
  font-weight:600; text-align:center;
}
.feedback.correct{ background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.feedback.wrong{ background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

.stats-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin: 16px 0; }
.stat-box{
  background: var(--bg-alt); border-radius:14px; padding: 10px 18px; text-align:center; min-width:90px;
}
.stat-box .num{ font-family:'Fredoka'; font-size:1.4rem; font-weight:700; }
.stat-box .lbl{ font-size:.72rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }

/* ---------- admin ---------- */
.admin-nav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.admin-tab{
  padding: 10px 16px; border-radius: 12px; cursor:pointer;
  background: var(--bg-alt); font-weight:600; font-size:.9rem;
  border: 2px solid transparent;
}
.admin-tab.active{ border-color: var(--accent-2); color: var(--accent-2); }
.admin-section{ display:none; }
.admin-section.active{ display:block; }

table{ width:100%; border-collapse: collapse; }
th,td{ text-align:left; padding: 10px 8px; border-bottom:1px solid var(--card-border); font-size:.9rem; }
th{ color: var(--text-dim); font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; }

.song-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.song-form-grid .full{ grid-column: 1 / -1; }
@media (max-width:600px){ .song-form-grid{ grid-template-columns:1fr; } }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: 12px 22px; border-radius:12px; font-weight:600;
  box-shadow: 0 10px 30px var(--shadow);
  z-index:300; opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

.hidden{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .vinyl, .brand-disc{ animation: none !important; }
}