:root {
  --bg: #101014;
  --bg-header: rgba(16, 16, 20, 0.96);
  --card: #1b1b22;
  --card-border: #2a2a34;
  --text: #f2f2f5;
  --text-sub: #a5a5b4;
  --accent: #a78bfa;
  --confident: #f472b6;
  --singable: #4ade80;
  --prepared: #fbbf24;
  --vague: #22d3ee;
  --interested: #60a5fa;
  --youtube: #ff4d4f;
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* ヘッダー(検索・フィルター) */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-header);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border);
  padding: 10px calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left));
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.search-box {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  pointer-events: none;
  opacity: 0.7;
}

.search-input {
  width: 100%;
  height: 52px;
  padding: 0 14px 0 46px;
  font-size: 19px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.search-input::placeholder {
  color: var(--text-sub);
}

.search-input:focus {
  border-color: var(--accent);
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--text-sub);
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4 13.2L15.2 16 12 12.8 8.8 16 8 15.2 11.2 12 8 8.8 8.8 8 12 11.2 15.2 8l.8.8L12.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* フィルターは1行。画面幅に収まらない分は横スクロールし、
   最後のチップが見切れることでスクロールできると分かるようにする */
.filters {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 12px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text-sub);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 枠線が無いぶん、押した範囲が分かるようにする */
.chip:active {
  background: #21212b;
}

.chip.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.sort-select {
  min-height: 40px;
  padding: 0 32px 0 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a5a5b4'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.count {
  font-size: 15px;
  color: var(--text-sub);
  white-space: nowrap;
}

/* 曲カード */
.results {
  padding: 12px calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.results.slide-from-right {
  animation: slide-from-right 180ms ease-out;
}

.results.slide-from-left {
  animation: slide-from-left 180ms ease-out;
}

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .results.slide-from-right,
  .results.slide-from-left {
    animation: none;
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  content-visibility: auto;
  contain-intrinsic-size: auto 74px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
}

.card-toggle {
  flex: 1;
  min-width: 0;
  padding: 10px 0 10px 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.card-toggle:active {
  background: #24242e;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

/* 一覧ではカードの高さを揃えるため1行に省略し、展開したときだけ全文を出す */
.title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card.is-open .title-text,
.card.is-open .card-sub {
  overflow: visible;
  white-space: normal;
}

.card-sub {
  margin: 3px 0 0;
  font-size: 15px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 0fr→1fr のトランジションで高さをアニメーションさせる(iOS Safari でも動く) */
.card-detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease-out;
}

.card.is-open .card-detail-wrap {
  grid-template-rows: 1fr;
}

.card-detail-clip {
  overflow: hidden;
}

.card-detail {
  display: flex;
  gap: 12px;
  margin: 0 14px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--card-border);
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.card.is-open .card-detail {
  opacity: 1;
  transition-delay: 60ms;
}

@media (prefers-reduced-motion: reduce) {
  .card-detail-wrap,
  .card-detail {
    transition: none;
  }
}

.thumb {
  flex: 0 0 120px;
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  background: #24242e;
}

.detail-text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--text-sub);
}

.detail-row {
  display: flex;
  gap: 8px;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.detail-label {
  flex: 0 0 2.4em;
  color: #7c7c8c;
}

.artist-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  min-width: 0;
}

.artist-link {
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #16161c;
}

.badge-confident {
  background: var(--confident);
}

.badge-singable {
  background: var(--singable);
}

.badge-prepared {
  background: var(--prepared);
}

.badge-vague {
  background: var(--vague);
}

.badge-interested {
  background: var(--interested);
}

.yt-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  align-self: center;
  min-height: 48px;
  border-radius: 10px;
  color: var(--youtube);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.yt-link:active {
  background: #2a2a34;
}

.yt-link svg {
  width: 30px;
  height: 30px;
}

.message {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-sub);
  font-size: 16px;
}

.message code {
  color: var(--text);
  font-size: 14px;
}

@media (min-width: 700px) {
  body {
    max-width: 720px;
    margin: 0 auto;
  }
}