/* Plush Keys LP — Gentle Pastel Animal School のトーン (パステル + こげ茶 + 暖色イエロー) */
:root {
  --cream: #FFF9F2;
  --card: #FFFFFF;
  --text: #4A3728;          /* こげ茶 */
  --muted: #8A7A6B;
  --text-muted: #6F5F52;
  --pink: #F7B8C6;
  --yellow: #FBBF24;
  --sky: #BFE3F2;
  --green: #BFE6C8;
  --accent: #E58AA0;
  --text-accent: #A43D5A;
  --focus: #34708F;
  --radius: 18px;
  --shadow: 0 6px 20px rgba(74, 55, 40, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #FFF4E8 0%, var(--cream) 40%, #F3F9FF 100%);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* ヘッダ / 言語トグル */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; max-width: 880px; margin: 0 auto; }
.brand { font-weight: 800; font-size: 20px; letter-spacing: .02em; }
.brand .dot { color: var(--accent); }
.langtoggle button {
  border: 1.5px solid var(--pink); background: #fff; color: var(--text);
  border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer; margin-left: 6px;
}
.langtoggle button.active { background: var(--pink); }

/* ヒーロー */
.hero { text-align: center; padding: 40px 0 28px; }
.hero .icon { width: 108px; height: 108px; border-radius: 26px; box-shadow: var(--shadow); margin-bottom: 18px; }
.hero h1 { font-size: clamp(26px, 5vw, 40px); margin: 0 0 14px; line-height: 1.35; }
.hero p { font-size: 17px; color: var(--text); max-width: 640px; margin: 0 auto 10px; }
.hero .sub { color: var(--text-muted); font-size: 15px; }

/* CTA ボタン */
.cta-btn {
  display: inline-block; margin-top: 18px; background: var(--text); color: #fff;
  text-decoration: none; font-weight: 800; padding: 14px 28px; border-radius: 999px;
  box-shadow: var(--shadow); font-size: 16px;
}
.cta-btn:hover { opacity: .92; }

/* セクション */
section { padding: 26px 0; }
h2 { font-size: clamp(22px, 4vw, 30px); text-align: center; margin: 0 0 22px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--text-muted); font-size: 14.5px; }

/* 保護者向け安心セクション */
.safety { background: #FFFDF8; border-radius: var(--radius); padding: 8px 0 24px; box-shadow: var(--shadow); margin: 8px 0; }
.safety .cards .card { background: #FBF7F0; }

.cta-section { text-align: center; padding: 40px 0; }
.cta-section p { font-size: 17px; max-width: 600px; margin: 0 auto 4px; }

/* フッター */
footer { text-align: center; color: var(--text-muted); font-size: 13px; padding: 30px 20px 50px; }
footer a { color: var(--text-accent); text-decoration: none; margin: 0 8px; font-weight: 600; }
footer a:hover { text-decoration: underline; }
footer .small { display: block; margin-top: 10px; font-size: 12px; }

/* 法務ページ (privacy / eula) */
.legal { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 30px; margin: 20px 0 50px; }
.legal h1 { font-size: 26px; }
.legal h2 { text-align: left; font-size: 19px; margin: 28px 0 8px; }
.legal h3 { font-size: 16px; }
.legal p, .legal li { color: var(--text); font-size: 15px; }
.legal a { color: var(--text-accent); }
.legal .eff { color: var(--text-muted); font-weight: 700; }
.legal .backlink { display: inline-block; margin-bottom: 8px; font-weight: 700; color: var(--text-accent); text-decoration: none; }

/* ヒーロー: バッジ・チップ・スクリーンショット・浮遊音符 */
.hero { position: relative; }
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.chip {
  background: #fff; border: 1.5px solid var(--green); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 700; color: var(--text);
}
.store-badge { display: inline-block; margin-top: 16px; }
.store-badge img { height: 60px; width: auto; display: block; }
.store-badge:hover { opacity: .9; }
.hero-shot {
  width: min(720px, 100%); height: auto; margin-top: 26px;
  border-radius: 22px; border: 6px solid #fff;
  box-shadow: 0 14px 40px rgba(74, 55, 40, 0.18);
  transform: rotate(-1.2deg);
}
.float-note {
  position: absolute; font-size: 26px; color: var(--accent); opacity: .65;
  animation: floatup 6s ease-in-out infinite; pointer-events: none; user-select: none;
}
.float-note.n1 { left: 10%; top: 32%; }
.float-note.n2 { right: 12%; top: 24%; color: var(--yellow); animation-delay: 2s; }
.float-note.n3 { left: 20%; top: 72%; color: #8FBEDC; animation-delay: 4s; }
@keyframes floatup {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-18px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .float-note { animation: none; }
}

/* スクリーンショットギャラリー */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; height: auto; border-radius: 16px; border: 4px solid #fff;
  box-shadow: var(--shadow); display: block;
}
.gallery figcaption { font-size: 13.5px; color: var(--text-muted); text-align: center; margin-top: 8px; font-weight: 600; }

/* 収録曲チップ */
.lead { text-align: center; color: var(--text-muted); font-size: 15px; max-width: 640px; margin: -10px auto 18px; }
.songchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 0 auto; }
.songchips span {
  background: var(--card); border: 1.5px solid var(--sky); border-radius: 999px;
  padding: 5px 14px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow);
}
.songchips .more { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }

/* 作曲家ずかん */
.composer-row { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.composer-row figure { margin: 0; text-align: center; }
.composer-row img {
  width: 96px; height: 96px; border-radius: 50%; border: 4px solid #fff;
  box-shadow: var(--shadow); display: block; margin: 0 auto;
}
.composer-row figcaption { font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.composer-more {
  width: 72px; height: 72px; border-radius: 50%; background: var(--yellow); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; box-shadow: var(--shadow);
}

/* FAQ */
.faq details { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 18px; margin: 10px 0; }
.faq summary { font-weight: 700; cursor: pointer; font-size: 15.5px; }
.faq p { color: var(--text-muted); font-size: 14.5px; margin: 10px 0 2px; }
.faq a { color: var(--text-accent); }

/* モバイル用スティッキー CTA (ヒーロー通過後に表示) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255, 253, 248, 0.95); backdrop-filter: blur(8px);
  box-shadow: 0 -4px 16px rgba(74, 55, 40, 0.12);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.sticky-cta span { font-size: 13px; font-weight: 700; }
.cta-btn.small { margin-top: 0; padding: 10px 18px; font-size: 14px; white-space: nowrap; }
body.scrolled .lang-section.show .sticky-cta { display: flex; }
@media (min-width: 720px) { .sticky-cta { display: none !important; } }

/* 言語切替表示制御 (JS あり時) */
.lang-section { display: none; }
.lang-section.show { display: block; }
/* JS 無効時は両言語表示 (noscript フォールバック) */
.no-js .lang-section { display: block; }

/* ===== 収録曲ショーケース (Song Finder) ===== */
/* =====================================================================
 * Plush Keys LP — 収録曲ショーケース (Song Finder) スタイル
 * 既存 styles.css の :root 変数(--cream/--text/--pink/--sky/--green/--accent
 * /--yellow/--radius/--shadow/--muted/--card) を再利用。新規変数は足さない。
 * すべて pk- 接頭辞で既存 .songchips 等と衝突しない。
 * ===================================================================== */

.pk-showcase { padding: 28px 0 32px; }

/* ---- 証拠バー: 数字カード4枚 ---- */
.pk-stats {
  list-style: none; margin: 6px auto 8px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 720px;
}
.pk-stat {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 8px 13px; text-align: center;
  border: 2px solid var(--cream);
}
.pk-stat-songs     { border-color: var(--sky); }
.pk-stat-classical { border-color: var(--green); }
.pk-stat-composers { border-color: var(--pink); }
.pk-stat-free      { border-color: var(--yellow); }
.pk-stat-n {
  display: block; font-weight: 800; color: var(--text);
  font-size: clamp(26px, 7vw, 38px); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.pk-stat-l { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 480px) {
  .pk-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- シーン別おすすめ棚 ---- */
.pk-scene-block { margin: 22px 0 8px; }
.pk-scene-title { text-align: center; font-size: 16px; margin: 0 0 12px; color: var(--text); }
.pk-scenes {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}
/* デスクトップ等、収まる時は中央寄せ */
@media (min-width: 640px) { .pk-scenes { justify-content: center; flex-wrap: wrap; } }
.pk-scene {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--card); border: 1.5px solid var(--pink); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 16px; cursor: pointer;
  color: var(--text); font: inherit; min-width: 84px;
}
.pk-scene-emoji { font-size: 22px; line-height: 1; }
.pk-scene-label { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pk-scene.is-active { background: var(--pink); border-color: var(--accent); }
.pk-scene:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- ファインダー: 検索 + ピル ---- */
.pk-finder { max-width: 720px; margin: 18px auto 0; }
.pk-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1.5px solid var(--sky); border-radius: 999px;
  box-shadow: var(--shadow); padding: 4px 16px; margin: 0 auto 14px; max-width: 520px;
}
.pk-search-icon { font-size: 16px; opacity: .8; }
.pk-search-input {
  flex: 1; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 15px; padding: 8px 0; min-width: 0;
}
.pk-search-input::placeholder { color: var(--text-muted); opacity: 1; }
.pk-search-input:focus { outline: none; }
.pk-search:focus-within { border-color: var(--accent); }

.pk-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px;
}
.pk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1.5px solid var(--sky); border-radius: 999px;
  box-shadow: var(--shadow); padding: 6px 14px; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700;
}
.pk-pill-count {
  font-size: 11px; font-weight: 800; color: var(--text-muted);
  background: var(--cream); border-radius: 999px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.pk-pill.is-active { background: var(--sky); border-color: var(--accent); }
.pk-pill.is-active .pk-pill-count { background: #fff; }
.pk-pill.pk-cat-green.is-active  { background: var(--green); }
.pk-pill.pk-cat-pink.is-active   { background: var(--pink); }
.pk-pill.pk-cat-accent.is-active { background: var(--accent); color: #fff; }
.pk-pill.pk-cat-accent.is-active .pk-pill-count { color: var(--text); }
.pk-pill.pk-cat-yellow.is-active { background: var(--yellow); }
.pk-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.pk-count { text-align: center; color: var(--text-muted); font-size: 13px; font-weight: 700; margin: 4px 0 16px; }

/* ---- 曲チップグリッド ---- */
.pk-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.pk-songchip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1.5px solid var(--sky); border-radius: 999px;
  box-shadow: var(--shadow); padding: 6px 14px; max-width: 100%;
}
.pk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); flex: 0 0 auto; }
.pk-songname { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pk-composer { font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* カテゴリ色をドット/枠に反映 */
.pk-cat-sky    .pk-dot, .pk-cat-sky.pk-songchip    { }
.pk-songchip.pk-cat-green  { border-color: var(--green); }
.pk-songchip.pk-cat-green  .pk-dot { background: var(--green); }
.pk-songchip.pk-cat-pink   { border-color: var(--pink); }
.pk-songchip.pk-cat-pink   .pk-dot { background: var(--pink); }
.pk-songchip.pk-cat-accent { border-color: var(--accent); }
.pk-songchip.pk-cat-accent .pk-dot { background: var(--accent); }
.pk-songchip.pk-cat-yellow { border-color: var(--yellow); }
.pk-songchip.pk-cat-yellow .pk-dot { background: var(--yellow); }

/* hover/focus は触覚的に控えめ(タッチ端末では無効) */
@media (hover: hover) {
  .pk-songchip:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(74,55,40,.16); transition: transform .15s ease, box-shadow .15s ease; }
}

/* ---- もっと見る ---- */
.pk-more {
  display: block; margin: 18px auto 0; cursor: pointer;
  background: #fff; border: 1.5px solid var(--accent); color: var(--text-accent);
  border-radius: 999px; padding: 10px 24px; font: inherit; font-weight: 800; font-size: 14px;
  box-shadow: var(--shadow);
}
.pk-more:hover { background: var(--accent); color: #fff; }
.pk-more:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- 空状態 ---- */
.pk-empty { text-align: center; padding: 24px 12px 8px; }
.pk-empty-text { color: var(--text-muted); font-size: 15px; margin: 0 0 14px; }

/* ---- ファインダー直後CTA ---- */
.pk-finder-cta { text-align: center; margin-top: 26px; }
.pk-finder-cta .cta-btn { margin-top: 0; }

/* ---- 軽い float-note を背景に薄く(世界観継続) ---- */
.pk-showcase { position: relative; overflow: hidden; }

/* ===== 追加アニメーション ===== */
/* =====================================================================
 * Plush Keys LP — 追加アニメーション
 * すべて transform / opacity のみ(レイアウト非破壊・GPU安価)。
 * prefers-reduced-motion: reduce で完全停止。
 * 既存 styles.css の float-note / floatup は触らない(共存)。
 * ===================================================================== */

/* ---- セクション・リビール (下からふわっと) ----
 * .pk-reveal を付けた要素は初期 opacity:0。animations.js が IntersectionObserver で
 * .pk-in を付与して表示。JS 無効/未到達でも最終的に見えるよう no-js / fallback を用意。 */
.pk-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.pk-reveal.pk-in {
  opacity: 1;
  transform: none;
}
/* JS 無効時(no-js)は最初から表示 */
.no-js .pk-reveal { opacity: 1; transform: none; }

/* ---- 曲チップの絞り込み stagger フェードイン ----
 * showcase.js が .pk-stagger と --i (0..20) を付与。 */
.pk-stagger {
  animation: pkChipIn .34s ease both;
  animation-delay: calc(var(--i, 0) * 20ms);
}
@keyframes pkChipIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- 証拠バー(ヒーロー & ショーケース)の数字: 出現時の軽い pop ---- */
.pk-stat.pk-in .pk-stat-n,
.pk-hero-stat.pk-in .pk-stat-n {
  animation: pkPop .5s ease both;
}
@keyframes pkPop {
  0%   { transform: scale(.9); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---- sticky CTA 出現をスライドアップに (既存 display:flex の差し替えでなく上乗せ) ---- */
body.scrolled .lang-section.show .sticky-cta {
  animation: pkStickyUp .28s ease both;
}
@keyframes pkStickyUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---- sticky CTA ボタンの控えめパルス (購入喚起・周期) ---- */
.sticky-cta .cta-btn.small { animation: pkPulse 2.6s ease-in-out infinite; }
@keyframes pkPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ---- ヒーロー hero-shot: 初回フェードイン(1回) ---- */
.hero-shot.pk-shot-in {
  animation: pkShotIn .7s ease both;
}
@keyframes pkShotIn {
  from { opacity: 0; transform: rotate(-1.2deg) translateY(18px) scale(.97); }
  to   { opacity: 1; transform: rotate(-1.2deg); }
}

/* ---- ミニ「落ちるノート」装飾 (ヒーロー証拠バー近傍・任意) ----
 * 既存 float-note と別。aria-hidden 前提。控えめに1〜2個。 */
.pk-fallnote {
  position: absolute; font-size: 20px; color: var(--accent); opacity: .5;
  pointer-events: none; user-select: none;
  animation: pkFall 5.5s linear infinite;
}
@keyframes pkFall {
  0%   { transform: translateY(-12px); opacity: 0; }
  15%  { opacity: .5; }
  85%  { opacity: .5; }
  100% { transform: translateY(54px); opacity: 0; }
}

/* =====================================================================
 * reduced-motion: すべて停止し、最終状態を即適用
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pk-stagger { animation: none !important; }
  .pk-stat.pk-in .pk-stat-n,
  .pk-hero-stat.pk-in .pk-stat-n { animation: none !important; }
  body.scrolled .lang-section.show .sticky-cta { animation: none !important; }
  .sticky-cta .cta-btn.small { animation: none !important; }
  .hero-shot.pk-shot-in { animation: none !important; opacity: 1 !important; transform: rotate(-1.2deg) !important; }
  .pk-fallnote { animation: none !important; display: none !important; }
}

/* ===== 作曲家フェイスウォール ===== */
/* =====================================================================
 * Plush Keys LP — 作曲家フェイスウォール (Composer Face Wall) スタイル
 * 既存 styles.css の :root 変数(--cream/--card/--text/--muted/--pink/
 * --yellow/--sky/--green/--accent/--radius/--shadow)のみ再利用。新規変数なし。
 * すべて pk-face* / pk-facewall* / pk-facechip* 接頭辞で既存と衝突しない。
 *
 * レイアウト方針:
 *  - モバイル: 横スクロール「顔の川」(scroll-snap + 端フェードマスク)。
 *    高さ統一(サイズ2段階は使わない)で雑然化を防ぐ。
 *  - 640px+: flex-wrap の中央寄せグリッド。ここで .pk-face-lg の大小ヒエラルキー
 *    (主力作曲家=大)を効かせる。
 * ===================================================================== */

.pk-facewall-block { margin: 26px 0 10px; }
.pk-facewall-title { text-align: center; font-size: 18px; margin: 0 0 6px; color: var(--text); }
.pk-facewall-lead { text-align: center; color: var(--text-muted); font-size: 13.5px; margin: 0 auto 12px; max-width: 560px; }

/* ---- 選択中チップ「ショパンの曲 15曲 ✕」 ---- */
.pk-facechip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto 14px; padding: 5px 6px 5px 14px;
  background: var(--accent); color: #fff; border-radius: 999px;
  box-shadow: var(--shadow); font-weight: 800; font-size: 13px;
  position: relative; left: 50%; transform: translateX(-50%);
}
.pk-facechip[hidden] { display: none; }
.pk-facechip-text { line-height: 1.2; white-space: nowrap; }
.pk-facechip-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.28); color: #fff; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; line-height: 1;
}
.pk-facechip-clear:hover { background: rgba(255,255,255,.45); }
.pk-facechip-clear:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- 顔の壁(コンテナ) ----
 * モバイル: 横スクロール。端フェードで「まだ続く」感→スワイプ誘発。 */
.pk-faces {
  display: flex; gap: 12px;
  overflow-x: auto; padding: 8px 14px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* 端フェードマスク(装飾・静的)。reduced-motion でも維持(モーションではない)。 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
/* 640px+: 折り返し中央寄せグリッドに切替。マスク不要。 */
@media (min-width: 640px) {
  .pk-faces {
    flex-wrap: wrap; justify-content: center;
    overflow-x: visible; padding: 8px 0 14px;
    -webkit-mask-image: none; mask-image: none;
    max-width: 820px; margin: 0 auto;
  }
}

/* ---- 顔タイル(ボタン) ---- */
.pk-face {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 92px; padding: 0; border: 0; background: transparent;
  cursor: pointer; color: var(--text); font: inherit;
  position: relative;
}
.pk-face:focus { outline: none; }
.pk-face:focus-visible .pk-face-img,
.pk-face:focus-visible .pk-face-all-ic { outline: 3px solid var(--focus); outline-offset: 3px; }

.pk-face-img {
  width: 76px; height: 76px; display: block; border-radius: 50%;
  /* 似顔絵PNGは既にクリーム円フレーム入り。枠は薄い白リングで「シール」感のみ。 */
  background: var(--cream);
  box-shadow: var(--shadow);
  border: 2.5px solid #fff;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.pk-face-name {
  font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--text); max-width: 92px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 曲数バッジ(右下シール) */
.pk-face-badge {
  position: absolute; top: 2px; right: 6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 2px solid var(--cream);
  border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(74,55,40,.18);
}

/* 640px+ のみ大小ヒエラルキー(主力 n>=5 を大きく) */
@media (min-width: 640px) {
  .pk-face-lg { width: 108px; }
  .pk-face-lg .pk-face-img { width: 92px; height: 92px; }
  .pk-face-lg .pk-face-name { max-width: 108px; font-size: 12.5px; }
}

/* 選択中: 枠を accent リング + 影強調(レイアウト不動・色/影のみ) */
.pk-face.is-active .pk-face-img {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(229,138,160,.30), 0 10px 22px rgba(74,55,40,.18);
}
.pk-face.is-active .pk-face-name { color: var(--text-accent); }

/* ---- 先頭「ぜんぶ」タイル ---- */
.pk-face-all .pk-face-all-ic {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: #fff; font-size: 30px; font-weight: 800;
  border: 2.5px solid #fff; box-shadow: var(--shadow);
}
@media (min-width: 640px) {
  /* グリッドでも「ぜんぶ」は標準サイズで先頭に置く */
  .pk-face-all { width: 92px; }
}

/* hover/tap/focus: ぴょこっと跳ねる(transform のみ)。タッチ端末では :active で。
   実体は animations-add.css 側に集約(ここはレイアウトのみ)。 */

/* ===== フェイスウォール 追加アニメ ===== */
/* =====================================================================
 * Plush Keys LP — 作曲家フェイスウォール 追加アニメーション
 * すべて transform / opacity のみ(レイアウト非破壊・GPU安価)。
 * prefers-reduced-motion: reduce で完全停止(最終状態を即適用)。
 * 既存 animations 規律(--i stagger / hover:hover / reduced-motion 停止)を踏襲。
 * このブロックは styles.css 末尾 or animations 用 CSS に追記する想定。
 * ===================================================================== */

/* ---- 顔タイルの初回 stagger フェードイン ----
 * composers.js が .pk-face-stagger と --i (0..20) を付与。
 * 既存 .pk-stagger と同型だが、顔サイズに合わせ translateY を少し大きめに。 */
.pk-face-stagger {
  animation: pkFaceIn .36s ease both;
  animation-delay: calc(var(--i, 0) * 20ms);
}
@keyframes pkFaceIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---- hover/focus で「ぴょこっ」と跳ねる(似顔絵だけ動かす) ----
 * ポインタ端末のみ。タップ端末は :active で一瞬沈む。 */
@media (hover: hover) {
  .pk-face .pk-face-img,
  .pk-face .pk-face-all-ic {
    transition: transform .15s ease-out, box-shadow .18s ease, border-color .18s ease;
  }
  .pk-face:hover .pk-face-img,
  .pk-face:hover .pk-face-all-ic,
  .pk-face:focus-visible .pk-face-img,
  .pk-face:focus-visible .pk-face-all-ic {
    transform: translateY(-4px) scale(1.04);
  }
}
/* タップ時の触覚的フィードバック(全端末) */
.pk-face:active .pk-face-img,
.pk-face:active .pk-face-all-ic {
  transform: translateY(-1px) scale(.98);
  transition: transform .08s ease-out;
}

/* ---- 選択チップの出現(下からふわっと・固定要素なのでレイアウト不動) ---- */
.pk-facechip:not([hidden]) {
  animation: pkChipPop .2s ease both;
}
@keyframes pkChipPop {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =====================================================================
 * reduced-motion: すべて停止し、最終状態を即適用
 * (横スクロール自体は残すが、snap と端フェードマスクは静的なので可)
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pk-face-stagger { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pk-face:hover .pk-face-img,
  .pk-face:hover .pk-face-all-ic,
  .pk-face:focus-visible .pk-face-img,
  .pk-face:focus-visible .pk-face-all-ic,
  .pk-face:active .pk-face-img,
  .pk-face:active .pk-face-all-ic { transform: none !important; }
  .pk-face .pk-face-img,
  .pk-face .pk-face-all-ic { transition: none !important; }
  .pk-facechip:not([hidden]) { animation: none !important; }
}