/* Tanuki Thunder · song list pages (/songs/, /ja/songs/) */
.songs-page { padding-bottom: 96px; }
.songs-hero { text-align: center; padding: clamp(2.5rem, 7vw, 4.5rem) 0 1.5rem; background: radial-gradient(ellipse at 50% 0, rgba(212,175,90,.16), transparent 65%); }
.songs-count { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: 1.05; margin: .2rem 0 .3rem;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[lang="ja"] .songs-count { font-family: var(--jp); letter-spacing: .04em; }
.songs-hero .flourish { display: block; width: 220px; height: 22px; margin: 1.1rem auto 1.4rem; color: var(--gold); }
.songs-tools { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.songs-search { position: relative; flex: 1 1 280px; max-width: 460px; }
.songs-search svg { position: absolute; left: .9rem; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--gold); pointer-events: none; }
.songs-search input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 1rem 0 2.7rem; font: inherit; font-size: 1.05rem; color: var(--cream);
  background: var(--black-3); border: 1px solid rgba(212,175,90,.55); border-radius: 999px; outline: none; }
.songs-search input:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(212,175,90,.2); }
.songs-shuffle, .btn-outline { display: inline-flex; align-items: center; gap: .5rem; height: 48px; padding: 0 1.3rem; font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--gold-hi); background: transparent; border: 1px solid var(--gold); border-radius: 999px; cursor: pointer; text-decoration: none; letter-spacing: .03em;
  transition: background .15s, color .15s; touch-action: manipulation; }
.songs-shuffle:hover, .btn-outline:hover { background: var(--gold); color: var(--black); }
.songs-shuffle svg { width: 20px; height: 20px; }
.songs-shown { font-size: .95rem; color: var(--muted); margin: .9rem 0 0; }
.songs-jump { position: sticky; top: 61px; z-index: 40; background: rgba(11,9,7,.94); border-block: 1px solid rgba(212,175,90,.25); }
.songs-jump .wrap { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; padding: .35rem 0; justify-content: safe center; }
.songs-jump a { flex: none; min-width: 30px; padding: .25rem .35rem; text-align: center; font-family: var(--display); color: var(--gold); text-decoration: none; border-radius: 3px; }
.songs-jump a:hover { background: rgba(212,175,90,.15); color: var(--gold-hi); }
.songs-wrap { padding: 1.5rem 0 2rem; }
.sg { content-visibility: auto; scroll-margin-top: 120px; margin-bottom: 1.6rem; }
.sg-h { display: flex; align-items: baseline; gap: .7rem; font-family: var(--display); font-weight: 400; font-size: 1.7rem; color: var(--gold-hi);
  border-bottom: 1px solid rgba(212,175,90,.35); padding-bottom: .3rem; margin: 0 0 .5rem; }
html[lang="ja"] .sg-h { font-family: var(--jp); }
.sg-h small { font-family: var(--body); font-size: .85rem; color: var(--muted); }
.sl { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 2rem; }
.sl li { break-inside: avoid; }
.sl button { display: block; width: 100%; text-align: left; padding: .5rem .5rem .5rem 1.4rem; position: relative; min-height: 40px;
  font: inherit; font-size: 1.02rem; line-height: 1.3; color: var(--cream); background: none; border: 0; border-bottom: 1px dotted rgba(212,175,90,.18);
  cursor: pointer; overflow-wrap: anywhere; touch-action: manipulation; }
.sl button::before { content: "♪"; position: absolute; left: .3rem; top: .5rem; color: var(--gold-lo); font-size: .9rem; }
.sl button:hover, .sl button:focus-visible { color: var(--gold-hi); background: rgba(212,175,90,.07); outline: none; }
.sl button[aria-current="true"] { color: var(--gold-hi); background: rgba(212,175,90,.12); }
.sl button[aria-current="true"]::before { content: "▶"; color: var(--gold-hi); }
.songs-none { text-align: center; color: var(--muted); font-style: italic; padding: 2rem 0; }
.songs-back { text-align: center; margin-top: 2.5rem; }
.np-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(19,16,12,.97); border-top: 1px solid var(--gold);
  box-shadow: 0 -8px 30px rgba(0,0,0,.6); padding: .55rem 0 calc(.55rem + env(safe-area-inset-bottom)); backdrop-filter: blur(6px); }
.np-inner { width: min(100% - 1.5rem, var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: .7rem; }
.np-mid { flex: 1; min-width: 0; }
.np-line { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .98rem; }
.np-label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-right: .3rem; }
.np-title { font-family: var(--display); color: var(--cream); }
.np-prog { display: flex; align-items: center; gap: .5rem; }
.np-prog .jb-time { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.np-bar .jb-btn { flex: none; width: 44px; height: 44px; }
.np-play { width: 50px !important; height: 50px !important; background: var(--gold) !important; color: var(--black) !important; }
.np-play .i-pause, .np-bar[data-state="playing"] .np-play .i-play { display: none; }
.np-bar[data-state="playing"] .np-play .i-pause { display: block; }
@media (max-width: 600px) {
  .sl { columns: 1; }
  .songs-jump { top: 57px; }
  .np-prog .jb-time { display: none; }
  .np-inner { gap: .45rem; }
}
.home-songs-cta { text-align: center; margin: 1.6rem 0 0; }

.bar-mode-link { display: inline-block; margin-top: 1.1rem; padding: .55rem 1.4rem; font-size: 1.3rem; font-weight: 600; letter-spacing: .06em; color: #fff; text-decoration: none; border: 1px solid rgba(212,175,90,.6); border-radius: 3px; box-shadow: inset 0 0 0 3px var(--black), inset 0 0 0 4px rgba(212,175,90,.25); transition: color .2s, border-color .2s, box-shadow .2s; }
.bar-mode-link:hover, .bar-mode-link:focus-visible { color: var(--gold-hi); border-color: var(--gold-hi); box-shadow: inset 0 0 0 3px var(--black), inset 0 0 0 4px rgba(241,213,138,.5), 0 0 18px rgba(212,175,90,.25); }
[lang="ja"] .bar-mode-link { letter-spacing: .08em; }