/* ===== ベース ===== */
:root {
  --pink: #ffb3c1;
  --pink-deep: #ff7a93;
  --cream: #fff6ee;
  --ink: #4a3b3b;
  --shadow: rgba(255, 122, 147, 0.25);
  --nav-h: 68px;

  /* セマンティック面（ダークモード切替の基点・#151）。
     ライトでは従来の見た目と同値。data-theme/OS設定で下のブロックが上書きする。 */
  --surface: #fff;          /* カード・パネルの面 */
  --surface-soft: #fff6ee;  /* やわらかい面（スタンプ枠・入力背景） */
  --surface-mute: #eee0e3;  /* ゴースト/ロックなど控えめなボタン面 */
  --pink-soft: #ffe1e8;     /* 進捗バーの溝・淡ピンクの面/枠線 */
  --text-muted: #6b5b5e;    /* 補助テキスト */
  /* 文字色（#359・features.md） */
  --pink-ink: #b8324f;
  --pink-fill: #c9395b;
  --text-sub: #8a6570;
  --header-ink: #8f2f4a;
  --coin-ink: #9a6b00;
  --streak-ink: #c2521a;
  --freeze-ink: #2f6fa8;
  --gold-ink: #a8620f;
  --green-ink: #3d7d55;
}

/* ダークテーマの変数上書き。手動トグル(data-theme="dark")とOS設定の両対応。
   data-theme="light" のときは OS がダークでもライトを維持する。 */
:root[data-theme="dark"] {
  --cream: #1f1a1d;
  --ink: #f3e9ec;
  --shadow: rgba(0, 0, 0, 0.45);
  --surface: #2a2327;
  --surface-soft: #332a2f;
  --surface-mute: #3a3236;
  --pink-soft: #3d2f36;
  --text-muted: #b9a8af;
  --pink-ink: #ff7a93;
  --text-sub: #c9aab3;
  --coin-ink: #e0a91f;
  --streak-ink: #ff7a3c;
  --freeze-ink: #6aa9e0;
  --gold-ink: #d98a2b;
  --green-ink: #5b9e74;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #1f1a1d;
    --ink: #f3e9ec;
    --shadow: rgba(0, 0, 0, 0.45);
    --surface: #2a2327;
    --surface-soft: #332a2f;
    --surface-mute: #3a3236;
    --pink-soft: #3d2f36;
    --text-muted: #b9a8af;
    --pink-ink: #ff7a93;
    --text-sub: #c9aab3;
    --coin-ink: #e0a91f;
    --streak-ink: #ff7a3c;
    --freeze-ink: #6aa9e0;
    --gold-ink: #d98a2b;
    --green-ink: #5b9e74;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

.app {
  min-height: 100%;
  /* ボトムナビと被らないように下に余白 */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ===== ビュー切り替え ===== */
.view {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h));
}

.view[hidden] {
  display: none;
}

/* ===== ヘッダー ===== */
.app-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--pink);
  color: var(--header-ink);
  box-shadow: 0 2px 8px var(--shadow);
}

.app-title {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}

.btn-back {
  border: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.btn-back:active {
  transform: scale(0.96);
}

.btn-sound {
  margin-left: auto;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.btn-sound:active {
  transform: scale(0.94);
}

.btn-sound[aria-pressed="false"] {
  opacity: 0.7;
}

/* ----- こどものアバター（ヘッダ隅・#121） ----- */
.child-avatar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 45%;
  border: none;
  padding: 4px 10px 4px 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
}

.child-avatar:active {
  transform: scale(0.94);
}

.child-avatar__face {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
}

.child-avatar__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 名前が空のときは丸アイコンだけ（右パディングを詰める） */
.child-avatar__name:empty {
  display: none;
}
.child-avatar:has(.child-avatar__name:empty) {
  padding-right: 4px;
}

/* ----- アイコン選択グリッド（#121） ----- */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 4px 0 8px;
}

.avatar-grid__btn {
  border: 2px solid transparent;
  background: var(--cream, #fff7fa);
  border-radius: 16px;
  aspect-ratio: 1;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.avatar-grid__btn:active {
  transform: scale(0.94);
}

.avatar-grid__btn[aria-pressed="true"] {
  border-color: var(--pink);
  background: var(--pink-soft, #ffe3ea);
}

/* ===== ビュー本文 ===== */
.view-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 20px;
  text-align: center;
}

.view-body--home {
  gap: 28px;
}

/* ===== ホーム統計パネル ===== */
.stats {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.level-block {
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px var(--shadow);
}

.level-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.level-badge {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.05rem;
  color: var(--pink-ink);
  white-space: nowrap;
}

.level-next {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-sub);
}

.xpbar {
  height: 18px;
  background: var(--pink-soft);
  border-radius: 999px;
  overflow: hidden;
}

.xpbar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd06a, var(--pink-deep));
  transition: width 0.5s ease;
}

/* ----- なかよしレベル（#124） ----- */
.bond-block {
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px var(--shadow);
}

.bond-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.bond-badge {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.05rem;
  color: var(--pink-ink);
  white-space: nowrap;
}

.bond-name {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 0.85rem;
  color: var(--gold-ink);
}

.bondbar {
  height: 18px;
  background: var(--pink-soft);
  border-radius: 999px;
  overflow: hidden;
}

.bondbar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9ec4, #ff5d7a);
  transition: width 0.5s ease;
}

.bond-next {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-sub);
  margin-top: 8px;
}

.goal-block {
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px var(--shadow);
}

.goal-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.goal-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.goal-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-sub);
}

.goal-count #statGoalCount {
  font-size: 1.15rem;
  color: var(--pink-ink);
}

.goalbar {
  height: 18px;
  background: var(--pink-soft);
  border-radius: 999px;
  overflow: hidden;
}

.goalbar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8fd694, #4caf7d);
  transition: width 0.5s ease;
}

.goal-msg {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-ink);
  text-align: center;
}

.goal-block--done {
  background: linear-gradient(135deg, #fffaf0, #fff3d6);
}

.goal-block--done .goal-msg {
  color: var(--coin-ink);
}

.settings-divider {
  border: none;
  border-top: 1px solid var(--pink-soft);
  margin: 18px 0;
}

/* アカウント切替の一覧（#182） */
.account-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--pink-soft);
  border-radius: 12px;
}

.account-row--active {
  background: var(--surface-soft);
  border-color: var(--accent, #ff7a93);
}

.account-row__name {
  font-weight: 700;
}

.account-row__badge {
  font-size: 0.85rem;
  color: var(--accent, #ff7a93);
  font-weight: 700;
}

.stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.stat-card {
  flex: 1 1 calc(50% - 7px);
  min-width: 0;
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 8px 12px;
  box-shadow: 0 4px 12px var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-icon {
  font-size: 1.7rem;
  line-height: 1;
}

.stat-value {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.5rem;
  color: var(--ink);
}

.stat-card--coin .stat-value {
  color: var(--coin-ink);
}

.stat-card--streak .stat-value {
  color: var(--streak-ink);
}

.stat-card--freeze .stat-value {
  color: var(--freeze-ink);
}

.stat-card--affinity .stat-value {
  color: var(--pink-ink);
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* ===== 記録ボタン ===== */
.btn-record {
  border: none;
  background: var(--pink-fill);
  color: #fff;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.2rem;
  padding: 16px 32px;
  border-radius: 999px;
  box-shadow: 0 6px 0 #962a45;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-record:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #962a45;
}

/* ===== 記録フォーム ===== */
.view-body--form {
  justify-content: flex-start;
  gap: 18px;
}

.record-form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-sub);
}

.field-input {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--pink-soft);
  border-radius: 14px;
  padding: 12px 14px;
  width: 100%;
}

.field-input:focus {
  outline: none;
  border-color: var(--pink-deep);
}

/* ----- 曲えらび ----- */
.song-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.song-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.song-chip {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pink-ink);
  background: var(--surface);
  border: 2px solid var(--pink-soft);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}

/* 未選択チップの左に曲色のスウォッチ（曲ごとに色が違うことを示す・#122） */
.song-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.song-chip::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--song-fill, #ddd);
  flex: 0 0 auto;
}

.song-chip.is-selected {
  background: var(--pink-fill);
  color: #fff;
  border-color: var(--pink-deep);
  box-shadow: inset 0 0 0 1px var(--song-fill);
}

.song-chip, .song-title, .song-collection__name { overflow-wrap: anywhere; }

.song-chip.is-selected::before {
  background: var(--song-fill, var(--surface));
}

.song-chip:active {
  transform: scale(0.96);
}

.song-add {
  display: flex;
  align-items: center;
  gap: 8px;
}

.song-add .field-input {
  flex: 1;
}

.btn-add-song {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 2px dashed var(--pink);
  border-radius: 14px;
  background: var(--surface);
  color: var(--pink-ink);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-add-song:active {
  transform: scale(0.96);
}

/* ----- スタンプカード ----- */
.stamp-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.stamp-card {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--pink-soft);
  border-radius: 18px;
  background: var(--surface);
  cursor: pointer;
}

.stamp-card.is-complete {
  border-color: #ffd06a;
  background: linear-gradient(135deg, #fff7e6, #fff);
}

.stamp-card:active {
  transform: scale(0.99);
}

.stamp-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 2px dashed var(--pink-soft);
}

.stamp-cell.is-goal {
  border-color: #ffd06a;
}

.stamp-cell.is-filled {
  background: var(--pink-soft);
  border-style: solid;
  border-color: var(--pink);
  animation: stamp-pop 0.18s ease-out;
}

@keyframes stamp-pop {
  0% { transform: scale(0.4); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.stamp-hint {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pink-ink);
}

.stamp-progress {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.05rem;
  color: var(--ink);
}

.stamp-progress span {
  color: var(--pink-ink);
  font-size: 1.4rem;
}

.btn-undo-stamp {
  border: none;
  border-radius: 14px;
  background: var(--pink-soft);
  color: var(--pink-ink);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
}

.btn-undo-stamp:active {
  transform: scale(0.97);
}

.btn-record--submit {
  align-self: center;
}

.record-error {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pink-ink);
}

/* ----- きろくの ほうほう 切替（スタンプ / まとめて） ----- */
.record-mode {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: var(--surface-soft);
  border-radius: 16px;
}

.record-mode__btn {
  flex: 1;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 0.95rem;
  color: var(--pink-ink);
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 10px 8px;
  min-height: 44px;
  cursor: pointer;
}

.record-mode__btn.is-active {
  background: var(--surface);
  color: var(--pink-ink);
  box-shadow: 0 2px 6px rgba(240, 138, 160, 0.3);
}

/* ----- まとめモード（曲名＋回数ステッパーの複数行） ----- */
.batch-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.batch-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-row__name {
  flex: 1;
  min-width: 0;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.stepper__btn {
  width: 40px;
  height: 44px;
  border: 2px solid var(--pink-soft);
  border-radius: 12px;
  background: var(--surface);
  color: var(--pink-ink);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}

.stepper__btn:active {
  transform: scale(0.94);
}

.stepper__value {
  width: 48px;
  height: 44px;
  text-align: center;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.05rem;
  color: var(--ink);
  border: 2px solid var(--pink-soft);
  border-radius: 12px;
  background: var(--surface);
  -moz-appearance: textfield;
}

.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.batch-row__del {
  flex: 0 0 auto;
  width: 36px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--pink-soft);
  color: var(--pink-ink);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-add-row {
  align-self: flex-start;
  margin-top: 10px;
  border: 2px dashed var(--pink);
  border-radius: 14px;
  background: var(--surface);
  color: var(--pink-ink);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}

.batch-total {
  margin-top: 14px;
  text-align: center;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.05rem;
  color: var(--ink);
}

.batch-total span {
  color: var(--pink-ink);
  font-size: 1.4rem;
}

/* ===== 記録履歴 ===== */
.view-body--history {
  justify-content: flex-start;
  gap: 22px;
}

.streak-cards {
  width: 100%;
  max-width: 360px;
  display: flex;
  gap: 14px;
}

/* ----- 今週のふりかえりカード（#144） ----- */
.review-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: 0 4px 12px var(--shadow);
  text-align: center;
}

.review-card__title {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1rem;
  color: var(--pink-ink);
  margin-bottom: 12px;
}

.review-card__stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 14px;
}

.review-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.review-stat__num {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1.1;
}

.review-stat__unit {
  font-size: 0.78rem;
  color: var(--text-sub);
}

.stat-card--best .stat-value {
  color: var(--gold-ink);
}

.history-section {
  width: 100%;
  max-width: 360px;
  text-align: left;
}

.history-heading {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1rem;
  color: var(--pink-ink);
  margin-bottom: 10px;
}

/* れんしゅうカレンダー（月間ヒートマップ・#236） */
.calendar { width: 100%; }

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.calendar__title {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.calendar__nav {
  border: none;
  background: var(--surface-soft);
  color: var(--pink-ink);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar__weekdays {
  margin-bottom: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

.cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--pink-soft);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.cal-cell__day {
  font-size: 0.6rem;
  color: var(--text-muted);
  padding: 2px 3px;
}

.cal-cell--pad { background: transparent; }
.cal-cell[data-level="1"] { background: #ffc9d5; }
.cal-cell[data-level="2"] { background: var(--pink); }
.cal-cell[data-level="3"] { background: var(--pink-fill); }
.cal-cell[data-level="1"] .cal-cell__day,
.cal-cell[data-level="2"] .cal-cell__day { color: #4a3b3b; }
.cal-cell[data-level="3"] .cal-cell__day { color: #fff; }
.cal-cell--today { outline: 2px solid var(--pink-deep); outline-offset: -2px; }
.cal-cell--future { opacity: 0.4; }

.calendar__legend {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 8px;
}

.calendar__legend .cal-cell {
  width: 14px;
  height: 14px;
  aspect-ratio: auto;
}

.calendar__legend-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.weekly-chart {
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 12px 10px;
  box-shadow: 0 4px 12px var(--shadow);
}

.weekly-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.weekly-chart .bar {
  fill: url(#barGrad);
}

.weekly-chart .bar-value {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 7px;
  fill: var(--ink);
  text-anchor: middle;
}

.weekly-chart .bar-label {
  font-size: 7px;
  font-weight: 700;
  fill: #b48a92;
  text-anchor: middle;
}

/* ----- 曲別コレクション（#122） ----- */
.song-collection__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.song-collection__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px var(--shadow);
}

.song-collection__swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex: 0 0 auto;
}

.song-collection__name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-collection__crown {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1;
}

/* ----- はなまるスタンプ（#145）／練習の質メモ（#239） ----- */
.praise-row,
.tempo-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.praise-stamp,
.tempo-stamp {
  font-size: 1.25rem;
  line-height: 1;
  padding: 6px 10px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--cream);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, border-color 0.15s, transform 0.1s;
}

.praise-stamp:hover,
.tempo-stamp:hover {
  opacity: 0.85;
}

.praise-stamp--on,
.tempo-stamp--on {
  opacity: 1;
  border-color: var(--pink-deep);
  background: var(--surface);
  transform: scale(1.08);
}

.song-collection__count {
  font-family: 'Mochiy Pop One', sans-serif;
  color: var(--text-sub);
  font-size: 0.95rem;
  white-space: nowrap;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px var(--shadow);
}

.history-card__date {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.history-card__day {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 0.95rem;
  color: var(--pink-ink);
}

.history-card__total {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-sub);
}

.history-card__total b {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1rem;
  color: var(--ink);
}

.history-songs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-songs li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9rem;
}

.history-songs .song-times {
  font-weight: 700;
  color: var(--pink-ink);
  white-space: nowrap;
}

.history-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--pink-soft);
}

.history-action {
  border: none;
  background: var(--pink-soft);
  color: var(--pink-ink);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.history-action:active {
  transform: scale(0.96);
}

.history-action--del {
  background: var(--pink-soft);
  color: var(--pink-ink);
}

.history-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-muted);
  font-weight: 700;
}

/* ===== ショップ ===== */
.view-body--shop {
  justify-content: flex-start;
  gap: 18px;
}

.shop-coins {
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 4px 12px var(--shadow);
}

.shop-coins .stat-icon {
  font-size: 1.4rem;
}

.shop-coins__value {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.4rem;
  color: var(--coin-ink);
}

.shop-coins__label {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.feed-section,
.shop-section {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-heading {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
}

.feed-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.feed-affinity {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pink-ink);
}

.feed-list,
.shop-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ----- なかよし ごほうび解放リスト（#124） ----- */
.bond-rewards-heading {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 0.9rem;
  color: var(--ink);
  margin: 4px 0 0;
}

.bond-rewards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bond-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px var(--shadow);
}

.bond-reward.is-locked .bond-reward__icon {
  opacity: 0.55;
}

.bond-reward__icon {
  font-size: 1.2rem;
  flex: 0 0 auto;
}

.bond-reward__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bond-reward__name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--pink-ink);
}

.bond-reward__desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.bond-reward__req {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-ink);
  white-space: nowrap;
  flex: 0 0 auto;
}

.shop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px var(--shadow);
}

.shop-card--equipped {
  outline: 2px solid var(--pink-deep);
}

/* なかよしLv未解放（#126）：非表示にせずアイコンだけ控えめにして「もうすぐ あえる」目標感を出す */
.shop-card--locked .shop-card__icon {
  opacity: 0.5;
}

.shop-card__icon {
  font-size: 2rem;
  line-height: 1;
  flex: 0 0 auto;
}

.shop-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.shop-card__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.shop-card__price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--coin-ink);
}

.shop-card__badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pink-ink);
}

.shop-card__badge--locked {
  color: var(--gold-ink);
}

.shop-btn {
  flex: 0 1 auto;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform 0.08s ease;
}

.shop-btn:active {
  transform: scale(0.95);
}

.shop-btn--buy {
  background: var(--pink-fill);
  color: #fff;
  box-shadow: 0 3px 0 #962a45;
}

.shop-btn--equip {
  background: #ffd06a;
  color: #6b4a16;
  box-shadow: 0 3px 0 #e0a91f;
}

.shop-btn--unequip {
  background: var(--pink-soft);
  color: var(--pink-ink);
}

.shop-btn--locked {
  background: var(--surface-mute);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.shop-btn--locked:active {
  transform: none;
}

/* ===== バッジ ===== */
.view-body--badges {
  justify-content: flex-start;
  gap: 18px;
}

.badges-count {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--pink-ink);
}

.badge-grid {
  width: 100%;
  max-width: 360px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.badge-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 18px 12px 14px;
  box-shadow: 0 4px 12px var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.badge-card__icon {
  font-size: 2.6rem;
  line-height: 1;
}

.badge-card__name {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 0.9rem;
  color: var(--ink);
}

.badge-card__desc {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.badge-card--locked {
  background: var(--surface-mute);
  box-shadow: none;
}

.badge-card--locked .badge-card__icon {
  filter: grayscale(1);
  opacity: 0.45;
}

.badge-card--locked .badge-card__name {
  color: var(--text-muted);
}

.badge-popup__name {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.1rem;
  color: var(--pink-ink);
}

/* ===== 獲得コインのポップアップ ===== */
.coin-popup {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(74, 59, 59, 0.18);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* 上の display:flex が UA既定の [hidden]{display:none} を上書きしてしまうため明示（理由・実測は features.md「ポップアップ演出」参照）。 */
.coin-popup[hidden] {
  display: none;
}

.coin-popup--show {
  opacity: 1;
}

.coin-popup__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border-radius: 24px;
  padding: 28px 40px;
  box-shadow: 0 10px 30px var(--shadow);
  transform: scale(0.7);
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.coin-popup--show .coin-popup__card {
  transform: scale(1);
}

.coin-popup__icon {
  font-size: 2.6rem;
  line-height: 1;
}

.coin-popup__amount {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 2rem;
  color: var(--coin-ink);
}

.coin-popup__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.coin-popup__levelup {
  margin-top: 6px;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1rem;
  color: var(--pink-ink);
}

/* ===== えさやり演出（#217） ===== */
/* えさは別タブ（ショップ）であげるためホームの猫が見えない。「あげた」感が伝わるよう、
   ポップアップ内でえさアイコンが もぐもぐ揺れて → 食べられて消え、なかよし💖が弾む。 */
.coin-popup--feed.coin-popup--show .coin-popup__icon {
  animation: pp-feed-chew 1.4s ease-in-out forwards;
  transform-origin: 50% 70%;
}

@keyframes pp-feed-chew {
  0%   { transform: scale(0.6); opacity: 0; }
  12%  { transform: scale(1); opacity: 1; }
  24%  { transform: scale(0.92) rotate(-7deg); }
  36%  { transform: scale(1) rotate(6deg); }
  48%  { transform: scale(0.9) rotate(-5deg); }
  60%  { transform: scale(1) rotate(4deg); }
  72%  { transform: scale(0.95) rotate(0); opacity: 1; }
  100% { transform: scale(0.15) rotate(0); opacity: 0; }
}

.coin-popup--feed.coin-popup--show .coin-popup__label {
  display: inline-block;
  animation: pp-feed-gain 1.4s ease-out forwards;
}

@keyframes pp-feed-gain {
  0%, 60% { transform: translateY(0) scale(1); color: #b0a3a3; }
  75%     { transform: translateY(-6px) scale(1.25); color: var(--pink-deep); }
  100%    { transform: translateY(-12px) scale(1.1); color: var(--pink-deep); }
}

/* えさやりクリップ（#294・理由は features.md） */
.feed-clip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(300px, 72vw, 70vh);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border-radius: 16px;
}
.coin-popup--clip { pointer-events: auto; }
.coin-popup--clip .coin-popup__card { padding: 14px 14px 18px; }
.coin-popup--clip .feed-clip {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.coin-popup--clip .coin-popup__icon,
.coin-popup--clip .badge-popup__name { display: none; }
.coin-popup--clip .coin-popup__label { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .coin-popup,
  .coin-popup__card {
    transition: none;
  }
  /* えさやり演出（#217）は揺れ・消失を止め、内容は静止表示で残す */
  .coin-popup--feed.coin-popup--show .coin-popup__icon,
  .coin-popup--feed.coin-popup--show .coin-popup__label {
    animation: none;
  }
  /* スタンプ/オンボーディングの登場アニメと、各種バーの伸び演出を止める（#151） */
  .stamp-cell.is-filled,
  .onboarding__card {
    animation: none;
  }
  .xpbar-fill,
  .bondbar-fill,
  .goalbar-fill {
    transition: none;
  }
}

/* ===== せってい（おうちのひとへ）・#140 ===== */
.btn-settings {
  border: none;
  background: rgba(255, 255, 255, 0.35);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.btn-settings:active {
  transform: scale(0.94);
}

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* display:flex が UA の [hidden]{display:none} を上書きしてしまうので明示的に消す */
.settings-overlay[hidden],
.settings-panel[hidden] {
  display: none;
}

.settings-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(74, 59, 59, 0.45);
}

.settings-panel {
  position: relative;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 12px 34px var(--shadow);
  /* 画面より高い親メニューでも全項目に届くようパネル内スクロール */
  max-height: 100%;
  overflow-y: auto;
}

.settings-panel__title {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.2rem;
  color: var(--pink-ink);
  text-align: center;
}

.settings-gate__q {
  font-weight: 700;
  color: var(--ink);
}

.settings-gate__problem {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.6rem;
  color: var(--ink);
}

.settings-gate__input {
  width: 120px;
  padding: 10px 14px;
  font-size: 1.3rem;
  text-align: center;
  border: 2px solid var(--pink);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
}

.settings-gate__error,
.settings-menu__note--error {
  color: #d6336c;
  font-weight: 700;
  font-size: 0.9rem;
}

.settings-menu__desc {
  font-size: 0.9rem;
  color: #8a7a7a;
  text-align: center;
  line-height: 1.6;
}

/* きょうの もくひょう 回数のステッパー（#238） */
.settings-goal__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.settings-goal__input {
  width: 4.5rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
}

.goal-step {
  min-width: 2.75rem;
  font-size: 1.4rem;
  line-height: 1;
  padding: 8px 0;
}

/* がぞくコード（クラウド保存先・#233） */
.cloud-code {
  display: block;
  word-break: break-all;
  font-size: 0.85rem;
  background: var(--surface-soft);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  text-align: center;
}

.settings-menu__note {
  font-size: 0.9rem;
  color: #4a9a5a;
  font-weight: 700;
  text-align: center;
}

.settings-panel__actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.settings-btn {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1rem;
  color: #fff;
  background: var(--pink-fill);
  cursor: pointer;
}

.settings-btn:active {
  transform: scale(0.97);
}

.settings-btn--ghost {
  background: var(--surface-mute);
  color: var(--ink);
}

.settings-btn--block {
  width: 100%;
  flex: none;
}

/* ===== 初回オンボーディング（猫の吹き出し紙芝居・#141） ===== */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.onboarding[hidden] {
  display: none;
}

.onboarding__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(74, 59, 59, 0.5);
}

.onboarding__card {
  position: relative;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border-radius: 28px;
  padding: 24px 22px 26px;
  box-shadow: 0 14px 38px var(--shadow);
  animation: onboarding-pop 0.28s ease;
}

@keyframes onboarding-pop {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.onboarding__cat {
  width: 120px;
  height: 120px;
}

.onboarding__cat svg {
  width: 100%;
  height: 100%;
}

.onboarding__bubble {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 2px solid var(--pink);
  border-radius: 20px;
  padding: 16px 18px;
  text-align: center;
}

/* 吹き出しのしっぽ（上向き三角・猫からの発話に見せる） */
.onboarding__bubble::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: var(--pink);
}
.onboarding__bubble::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--cream);
}

.onboarding__emoji {
  font-size: 1.8rem;
  line-height: 1;
}

.onboarding__title {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.15rem;
  color: var(--pink-ink);
}

.onboarding__body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
}

.onboarding__dots {
  display: flex;
  gap: 8px;
}

.onboarding__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink-soft);
}

.onboarding__dot.is-active {
  background: var(--pink-deep);
}

.onboarding__actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.onboarding__skip,
.onboarding__next {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

.onboarding__skip {
  flex: 0 0 auto;
  padding: 14px 20px;
  background: var(--surface-mute);
  color: var(--ink);
}

.onboarding__next {
  color: #fff;
  background: var(--pink-fill);
}

.onboarding__skip:active,
.onboarding__next:active {
  transform: scale(0.97);
}

/* ===== ボトムナビ ===== */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: var(--surface);
  border-top: 2px solid var(--pink-soft);
  box-shadow: 0 -2px 10px var(--shadow);
}

.nav-btn {
  flex: 1;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.nav-icon {
  font-size: 1.4rem;
  filter: grayscale(0.5);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.nav-btn.active {
  color: var(--pink-ink);
}

.nav-btn.active .nav-icon {
  filter: none;
  transform: translateY(-2px) scale(1.1);
}