/* ==========================================================================
   Songless — songless.io-style board. base.css handles tokens/reset/menu shell.
   Local accent override: green (play button, correct rows, primary buttons).
   ========================================================================== */

body {
  --accent: #57bb4b;
  --accent-soft: rgba(87, 187, 75, 0.15);
  --sl-red: #cf3b3f;
  --sl-yellow: #ddc043;
  --sl-green: #57bb4b;
  --sl-gray: #33343d;
}

.hidden { display: none !important; }

/* SoundCloud fallback player — present in DOM (audio needs it) but off-screen */
#scWidgetFrame { position: absolute; width: 1px; height: 1px; left: -9999px; top: -9999px; border: 0; opacity: 0; pointer-events: none; }

.app { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-4); }

/* ---------- menu (unchanged shell) ---------- */
.menu-panel {
  width: 100%; max-width: 440px;
  background: linear-gradient(160deg, #10160f, #0b0f0b);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 38px 34px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  box-shadow: var(--shadow-soft); position: relative; z-index: 1;
  animation: menu-entrance .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes menu-entrance { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.menu-hint { color: var(--muted); max-width: 32ch; text-align: center; margin: 0; line-height: 1.5; }
.menu-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
.menu-best { color: var(--muted); font-size: .82rem; margin: 2px 0 0; min-height: 1em; }

.pl-form { width: 100%; display: flex; flex-direction: column; gap: 8px; animation: menu-entrance .25s cubic-bezier(.22,1,.36,1) both; }
.pl-search { position: relative; }
.pl-form input { width: 100%; min-height: 44px; background: #1a201b; border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; color: var(--text); font-size: .92rem; font-family: inherit; }
.pl-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pl-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 232px; overflow-y: auto; background: #141a15; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); z-index: 20; text-align: left; }
.pl-suggest:empty { display: none; }
.pl-sg { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.pl-sg:last-child { border-bottom: none; }
.pl-sg:hover, .pl-sg.hi { background: var(--accent-soft); }
.pl-sg .pl-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #22232e center/cover no-repeat; color: var(--accent); display: grid; place-items: center; overflow: hidden; }
.pl-sg .pl-ic-ph { background: var(--accent-soft); }
.pl-sg .pl-ic svg { width: 17px; height: 17px; }
.pl-sg .pl-nm { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-form .primary-btn { flex-direction: row; padding: 11px 18px; font-size: .95rem; }
.pl-msg { margin: 0; color: var(--muted); font-size: .8rem; text-align: center; min-height: 1em; }
.pl-msg.err { color: var(--sl-red); }

.primary-btn {
  padding: 14px 20px; border: none; border-radius: var(--radius-md); background: var(--accent); color: #0c1509;
  font-weight: 800; font-size: 1.02rem; cursor: pointer; font-family: inherit; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 8px 24px rgba(87, 187, 75, .28); transition: transform .15s, filter .15s;
}
.primary-btn .sub { font-size: .72rem; font-weight: 600; opacity: .75; letter-spacing: .02em; }
.primary-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.primary-btn:active { transform: scale(.97); }
.primary-btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.primary-btn.ghost:hover { border-color: var(--accent); }
.primary-btn:disabled { opacity: .5; cursor: default; }

/* ---------- game layout ---------- */
.game {
  min-height: 100dvh; width: 100%; max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 10px) 20px calc(env(safe-area-inset-bottom) + 26px);
  gap: 12px;
}
.wordmark {
  margin: 0; font-size: clamp(1.9rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.05; text-align: center;
}
.topbar { display: flex; align-items: center; gap: 10px; }
.chip { padding: 5px 13px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: .8rem; }
#scoreChip { background: var(--surface); color: var(--muted); }
.chip-btn { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 700; cursor: pointer; font-family: inherit; font-size: .8rem; }
.chip-btn:hover { color: var(--text); border-color: var(--accent); }

/* ---------- guess rows ---------- */
.rows { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 8px; }
.row {
  min-height: 42px; border-radius: 8px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px 14px; font-weight: 600; font-size: .93rem; color: #fff;
  overflow: hidden;
}
.row.now { border-color: rgba(255, 255, 255, .22); }
.row.skip { background: var(--sl-gray); border-color: var(--sl-gray); color: #d5d5de; }
.row.wrong { background: var(--sl-red); border-color: var(--sl-red); }
.row.artist { background: var(--sl-yellow); border-color: var(--sl-yellow); color: #17150a; }
.row.artist b { font-weight: 800; }
.row.correct { background: var(--sl-green); border-color: var(--sl-green); }
.row.wrong, .row.artist, .row.correct, .row.skip { animation: row-pop .25s cubic-bezier(.22,1,.36,1); }
@keyframes row-pop { from { transform: scale(.985); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---------- progress bar ---------- */
.bar-zone { width: 100%; max-width: 820px; position: relative; padding-top: 30px; margin-top: 2px; }
.bar-marker { position: absolute; bottom: 100%; transform: translateY(30px); left: 0; width: 0; pointer-events: none; }
.bar-marker #stepLabel {
  position: absolute; bottom: 11px; left: 0; transform: translateX(-50%);
  white-space: nowrap; font-weight: 800; font-size: .92rem; color: var(--text);
}
.bar-marker .tri {
  position: absolute; bottom: 0; left: 0; transform: translateX(-50%);
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 10px solid #e9e9f1;
}
.bar-marker.edge-l #stepLabel { transform: translateX(-14px); }
.bar-marker.edge-r #stepLabel { transform: translateX(calc(-100% + 14px)); }
.bar-segs { display: flex; gap: 3px; height: 12px; }
.bar-segs div { border-radius: 4px; background: #26272e; flex-basis: 0; transition: background .25s ease; }
.bar-segs div.on { background: #45464f; }

/* ---------- play button ---------- */
.play-btn {
  width: 66px; height: 66px; padding: 0; border-radius: 50%; border: none;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  cursor: pointer; box-shadow: 0 8px 24px rgba(87, 187, 75, .3);
  transition: transform .12s, filter .15s;
}
.play-btn svg { width: 26px; height: 26px; margin-left: 3px; }
.play-btn:hover { filter: brightness(1.07); }
.play-btn:active { transform: scale(.94); }
.play-btn.playing { filter: brightness(1.12); box-shadow: 0 10px 34px rgba(87, 187, 75, .5); }
.play-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* ---------- search + skip ---------- */
.guess-area { width: 100%; max-width: 640px; display: flex; gap: 10px; }
.search-wrap { position: relative; flex: 1; }
.search-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
#search {
  width: 100%; min-height: 46px; background: #1a201b; border: 1px solid transparent; border-radius: 9px;
  padding: 11px 16px 11px 46px; color: var(--text); font-size: 1rem; font-family: inherit;
}
#search::placeholder { color: #6f7080; }
#search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#search:disabled { opacity: .5; }
.suggest { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: #141a15; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); z-index: 20; }
.suggest:empty { display: none; }
.sg { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.sg:last-child { border-bottom: none; }
.sg:hover { background: var(--accent-soft); }
.sg .t { font-weight: 700; font-size: .92rem; }
.sg .a { color: var(--muted); font-size: .8rem; }
.skip-btn {
  flex: none; min-width: 110px; min-height: 46px; padding: 0 22px; border-radius: 9px; border: none;
  background: #ececec; color: #16161c; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit;
  transition: filter .15s, transform .12s;
}
.skip-btn:hover { filter: brightness(1.06); }
.skip-btn:active { transform: scale(.97); }
.skip-btn:disabled { opacity: .45; cursor: default; }

/* ---------- song reveal popup ---------- */
.reveal-card { max-width: 380px; }
.reveal-card .r-verdict { margin-bottom: 12px; }
.reveal-info { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
.rev-cover { flex: none; width: 48px; height: 48px; border-radius: 8px; background: #171f18 center/cover; display: grid; place-items: center; font-size: 1.3rem; color: var(--accent); background-size: cover; background-position: center; }
.rev-meta { flex: 1; min-width: 0; text-align: left; }
.rev-t { font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-a { color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-src { color: var(--muted); font-size: .68rem; opacity: .7; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color .15s, background .15s; }
.rev-play:hover { border-color: var(--accent); background: var(--accent-soft); }
.rev-play svg { width: 18px; height: 18px; }
.rev-play .ic-stop { display: none; }
.rev-play.playing .ic-play { display: none; }
.rev-play.playing .ic-stop { display: block; }
.reveal-btns { display: flex; gap: 10px; }
.reveal-btns .primary-btn { flex: 1; flex-direction: row; min-height: 46px; padding: 10px 18px; font-size: .95rem; }

/* ---------- load error ---------- */
.load-err {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 460px; padding: 16px 20px; text-align: center;
  background: var(--surface); border: 1px solid rgba(207, 59, 63, .5); border-radius: var(--radius-md);
  animation: menu-entrance .3s cubic-bezier(.22,1,.36,1) both;
}
.load-err-msg { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.load-err-btns { display: flex; gap: 10px; }
.load-err-btns .primary-btn { width: auto; flex-direction: row; padding: 10px 20px; font-size: .9rem; }

/* ---------- overlays (help + daily summary) ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-4); background: rgba(8,8,14,.86); backdrop-filter: blur(8px); }
.help-card, .result-card {
  position: relative; width: 100%; background: linear-gradient(160deg, #10160f, #0b0f0b);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 26px 24px; text-align: center; animation: menu-entrance .4s cubic-bezier(.22,1,.36,1) both;
  max-height: calc(100dvh - 48px); overflow-y: auto;
}
.help-card { max-width: 400px; }
.result-card { max-width: 460px; }
/* custom popup: let the artist dropdown overflow instead of scrolling the card */
#plOvl .help-card { overflow: visible; }

/* clean, subtle scrollbars for all scroll areas */
.suggest, .pl-suggest, .result-card, .rows { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.suggest::-webkit-scrollbar, .pl-suggest::-webkit-scrollbar, .result-card::-webkit-scrollbar { width: 8px; }
.suggest::-webkit-scrollbar-track, .pl-suggest::-webkit-scrollbar-track, .result-card::-webkit-scrollbar-track { background: transparent; }
.suggest::-webkit-scrollbar-thumb, .pl-suggest::-webkit-scrollbar-thumb, .result-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.suggest::-webkit-scrollbar-thumb:hover, .pl-suggest::-webkit-scrollbar-thumb:hover, .result-card::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: content-box; }
.ovl-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.ovl-x:hover { color: var(--text); border-color: var(--accent); }
.ovl-x svg { width: 15px; height: 15px; }

.help-card h2 { margin: 4px 0 10px; font-size: 1.5rem; }
.help-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.legend { display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; }
.lg-row { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; }
.lg { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.lg.gray { background: var(--sl-gray); }
.lg.red { background: var(--sl-red); }
.lg.yellow { background: var(--sl-yellow); }
.lg.green { background: var(--sl-green); }

/* ---------- daily summary ---------- */
.r-verdict { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; margin: 4px 0 6px; }
.r-verdict.win { color: var(--sl-green); }
.r-verdict.lose { color: var(--sl-red); }
.r-title { margin: 0 0 2px; font-size: 1.9rem; }
.r-artist { margin: 0 0 16px; color: var(--muted); }
.r-dots { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 18px; text-align: left; }
.r-line { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.r-mini { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background-color: #171f18; background-size: cover; background-position: center; display: grid; place-items: center; cursor: pointer; color: #fff; overflow: hidden; }
.r-mini::after { content: ""; position: absolute; inset: 0; background: rgba(8,8,14,.35); transition: background .15s; }
.r-mini:hover::after, .r-mini.playing::after { background: rgba(8,8,14,.55); }
.r-mini svg { position: relative; z-index: 1; width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.r-mini .ic-stop { display: none; }
.r-mini.playing .ic-play { display: none; }
.r-mini.playing .ic-stop { display: block; }
.r-mini.loading svg { animation: mini-pulse .8s ease-in-out infinite; }
@keyframes mini-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.r-song { flex: 1; min-width: 0; }
.r-song .t { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-song .a { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-gdots { display: flex; gap: 3px; flex: none; }
.r-gdots span { width: 9px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.08); }
.r-gdots span.skip { background: var(--sl-gray); }
.r-gdots span.wrong { background: var(--sl-red); }
.r-gdots span.artist { background: var(--sl-yellow); }
.r-gdots span.correct { background: var(--sl-green); }
.r-badge { flex: none; width: 26px; text-align: right; font-weight: 800; font-size: .82rem; color: var(--sl-red); }
.r-badge.win { color: var(--sl-green); }
.r-actions { display: flex; flex-direction: column; gap: 10px; }
.r-actions .primary-btn { width: 100%; flex-direction: row; }

/* ---------- mobile ---------- */
@media (max-width: 600px) {
  .game { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .wordmark { font-size: 1.9rem; margin-top: 30px; }
  .rows { gap: 6px; }
  .row { min-height: 40px; font-size: .84rem; padding: 5px 10px; }
  .bar-marker #stepLabel { font-size: .84rem; }
  .bar-segs { height: 11px; }
  .play-btn { width: 60px; height: 60px; }
  .play-btn svg { width: 24px; height: 24px; }
  .skip-btn { min-width: 86px; padding: 0 14px; }
  .r-gdots { display: none; }
  .reveal-btns { flex-direction: column; }
}