/* ================================================================
   PIANO（8ビットピアノ）
   ================================================================
   ■ フォントは自己ホスト
     Google Fonts への外部リンクは張らない。/kids* の CSP は
     font-src 'self' しか許可していないため、外から読もうとしても
     届かない。他のゲームと同じ方針。

   ■ 見た目は「ファミコンの画面」
     角を丸めず、太い縁と、ずれた影だけで立体にする。押すと影の分だけ沈む。
     色は、暗い紺の地に、黄・ピンク・ミントの3色。

   ■ 鍵盤は画面の下に貼り付ける
     スマホは縦に長いので、上の設定（音色・曲）をスクロールしても、
     鍵盤はいつも画面の下に見えているようにする（position: sticky）。
     鍵の高さ --keys-h は、画面の高さの 32%（下限 170px、上限 340px）。
     ガイドのボタンと知らせも、鍵盤といっしょに貼り付けて、いつも見えるようにする。

   ■ スマホとパソコンの出し分け
     「指で触る端末」は (hover: none) and (pointer: coarse)。この端末では、
     キーボードの案内（.pc-only）と、鍵盤に書く PC のキーの文字を隠す。
     ラベルの切り替えボタンは、HTML では hidden にしておき、
     パソコンのときだけ game.js が見せる。

   ■ 構成
     01. フォント
     02. 色とベース
     03. ヘッダー・フッター
     04. パネル・ボタンの共通部分
     05. 音色・オクターブ・ラベル
     06. 曲・モード・知らせ
     07. 鍵盤
     08. 動きを減らす設定
   ================================================================ */

/* ── 01. フォント ───────────────────────────────────────────── */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/nunito-latin-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 02. 色とベース ─────────────────────────────────────────── */
:root {
  --bg:      #1b1a33;   /* 画面の地 */
  --panel:   #2a2850;   /* パネル */
  --btn:     #3b3874;   /* ボタン */
  --edge:    #0f0e24;   /* 縁と影 */
  --text:    #f4f1e8;
  --muted:   #b4b1d8;
  --yellow:  #ffd23f;   /* 選んでいるもの・押している鍵 */
  --pink:    #ff5d8f;   /* 押している黒鍵 */
  --mint:    #3ee6b5;   /* ガイド：つぎに押す鍵 */
  --white-key: #f4f1e8;
  --white-low: #c9c4b3;
  --black-key: #1a1a2e;
  --black-low: #4a4a7a;
  --keys-h:  clamp(170px, 32dvh, 340px);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* ダブルタップで拡大しないように。iPhone の Safari は viewport の user-scalable=no を無視するので、こちらで止める。
   スクロールと、2 本指で広げる拡大はそのまま使える。鍵盤だけは、さらに強い touch-action: none（07. 鍵盤） */
html, body { touch-action: manipulation; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', system-ui, -apple-system, 'Hiragino Sans',
               'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic,
               'Noto Sans JP', Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.ja { display: block; margin-top: 2px; font-size: 0.92em; color: var(--muted); }

/* ── 03. ヘッダー・フッター ─────────────────────────────────── */
.site-header { padding: 14px 16px 4px; text-align: center; }
.site-title { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: 0.06em; }
.title-accent { color: var(--yellow); }
.site-tagline {
  margin: 4px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted);
}

.site-footer { padding: 14px 16px 22px; text-align: center; }
.footer-copy { margin: 4px 0; font-size: 12px; color: var(--muted); }
.footer-link { color: var(--mint); font-weight: 700; text-decoration: none; }
.footer-link:hover, .footer-link:focus-visible { text-decoration: underline; }

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.piano-container {
  flex: 1; display: flex; flex-direction: column;
  width: 100%; max-width: 680px; margin: 0 auto; padding: 8px 12px 0;
}

/* ── 04. パネル・ボタンの共通部分 ───────────────────────────── */
.panel {
  margin: 0 0 10px;
  padding: 10px 10px 12px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: 0 4px 0 var(--edge);
}
.panel-heading {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 900; letter-spacing: 0.06em;
  color: var(--muted);
}
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ボタンは、太い縁・ずれた影・押すと沈む */
.tone-btn, .song-btn, .mode-btn, .step-btn, .label-btn {
  border: 3px solid var(--edge);
  border-radius: 0;
  background: var(--btn);
  color: var(--text);
  font: inherit;
  box-shadow: 0 4px 0 var(--edge);
  cursor: pointer;
  transition: transform 0.05s steps(2);
}
.tone-btn:active, .song-btn:active, .mode-btn:active, .step-btn:active, .label-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}
.tone-btn:focus-visible, .song-btn:focus-visible, .mode-btn:focus-visible,
.step-btn:focus-visible, .label-btn:focus-visible {
  outline: 3px solid var(--mint); outline-offset: 2px;
}
button:disabled { opacity: 0.4; cursor: default; transform: none; }

/* ── 05. 音色・オクターブ・ラベル ───────────────────────────── */
.tone-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tone-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 6px 2px 7px;
  min-width: 0;
}
.tone-icon { font-size: 20px; line-height: 1.2; }
.tone-en   { font-size: 11px; font-weight: 900; line-height: 1.3; }
.tone-ja   { font-size: 10px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.tone-btn[aria-pressed="true"] { background: var(--yellow); color: var(--edge); }
.tone-btn[aria-pressed="true"] .tone-ja { color: var(--edge); }

.octave { display: flex; align-items: center; gap: 8px; }
.step-btn { width: 48px; height: 44px; font-size: 18px; font-weight: 900; line-height: 1; }
.octave-now { margin: 0; min-width: 96px; text-align: center; line-height: 1.2; }
.octave-en, .octave-ja { display: block; font-size: 10px; font-weight: 700; color: var(--muted); }
.octave-range { display: block; font-size: 20px; font-weight: 900; color: var(--yellow); }

.label-btn { display: flex; flex-direction: column; align-items: center; padding: 4px 14px 5px; line-height: 1.25; }
.label-en, .label-ja { font-size: 10px; font-weight: 700; color: var(--muted); }
.label-now { font-size: 18px; font-weight: 900; color: var(--yellow); }

/* ── 06. 曲・モード・知らせ ─────────────────────────────────── */
.song-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.song-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 5px 0 6px;
  min-width: 0;
}
.song-icon { font-size: 20px; line-height: 1.2; }
.song-ja   { font-size: 10px; font-weight: 900; line-height: 1.25; text-align: center; text-wrap: balance; }
.song-en   { font-size: 9px; font-weight: 700; line-height: 1.25; color: var(--muted); text-align: center; }
.song-btn[aria-pressed="true"] { background: var(--yellow); color: var(--edge); }
.song-btn[aria-pressed="true"] .song-en { color: var(--edge); }

/* ガイドの帯：鍵盤のすぐ上。曲のボタンはスクロールで動いても、ここはいつも見えている */
.guide-bar { max-width: 520px; margin: 0 auto 4px; }
.mode-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mode-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 2px;
  white-space: nowrap;
}
.mode-icon { font-size: 15px; line-height: 1.2; font-weight: 900; }
.mode-en   { font-size: 13px; font-weight: 900; line-height: 1.2; }
.mode-ja   { font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--muted); }
/* うごいているモード。もういちど押すと止まる */
.mode-btn.running { background: var(--mint); color: var(--edge); }
.mode-btn.running .mode-ja { color: var(--edge); }

/* 知らせは 1 行。英語のあとに、日本語を並べる。
   ボタンと鍵盤のあいだに入るので、上下はつめて、そのぶん鍵盤を大きくしている */
.status {
  min-height: 1.3em;
  margin: 3px 0 0;
  text-align: center;
  font-size: 13px; font-weight: 900; line-height: 1.3;
  color: var(--mint);
}
.status .ja { display: inline; margin: 0 0 0 0.6em; font-size: 12px; color: var(--mint); }

/* 曲の調の注意書き。曲のボタンの下に小さく */
.song-note {
  margin: 8px 0 0;
  font-size: 11px; line-height: 1.5; color: var(--muted);
}

/* ── 07. 鍵盤 ───────────────────────────────────────────────── */
.keys-wrap {
  position: sticky; bottom: 0; z-index: 5;
  margin: 0 -12px 8px;
  padding: 10px 12px 8px;
  background: var(--bg);
}
/* 鍵盤の本体。白鍵 8 本が横にならび、黒鍵が上に重なる。
   触ったまま指をすべらせても、画面が動かないように touch-action: none。 */
.keys {
  position: relative;
  display: flex;
  height: var(--keys-h);
  background: var(--edge);
  border: 4px solid var(--edge);
  box-shadow: 0 4px 0 var(--edge);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.key { position: relative; }

.key.white {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px;
  padding-bottom: 10px;
  background: var(--white-key);
  box-shadow: inset 0 -8px 0 var(--white-low);
  color: var(--edge);
}
.key.white + .key.white { border-left: 3px solid var(--edge); }
/* 黒鍵：左どなりの白鍵との境目の上。--b は「境目が左から何本目か」（game.js が入れる） */
.key.black {
  position: absolute; top: 0; z-index: 2;
  left: calc(var(--b) * 12.5% - 3.75%);
  width: 7.5%; height: 62%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 8px;
  background: var(--black-key);
  border: 3px solid var(--edge);
  border-top: 0;
  box-shadow: inset 0 -8px 0 var(--black-low);
  color: var(--text);
}

.k-main { font-size: clamp(13px, 3.8vw, 20px); font-weight: 900; line-height: 1.1; pointer-events: none; }
.k-pc {
  min-width: 1.6em; padding: 1px 4px;
  border: 2px solid currentColor;
  font-size: 11px; font-weight: 900; line-height: 1.2; text-align: center;
  opacity: 0.75;
  pointer-events: none;
}
.key.black .k-pc { font-size: 10px; }

/* 押している鍵：色がかわり、1段沈む */
.key.white.on { background: var(--yellow); box-shadow: inset 0 -2px 0 #c99a00; padding-top: 3px; }
.key.black.on { background: var(--pink); box-shadow: inset 0 -2px 0 #b32e5c; }

/* ガイド：つぎに押す鍵。ミント色で、かちかち点滅する（点滅は steps なので、ドット絵のよう） */
.key.next { animation: next-blink 0.7s steps(1) infinite; }
@keyframes next-blink {
  0%   { background: var(--mint); }
  50%  { background: var(--white-key); }
}
.key.black.next { animation-name: next-blink-black; }
@keyframes next-blink-black {
  0%   { background: var(--mint); }
  50%  { background: var(--black-key); }
}
/* 押したら、点滅より押している色のほうを優先する */
.key.on.next { animation: none; }

.pc-help {
  margin: 8px 0 0;
  font-size: 12px; line-height: 1.5; text-align: center; color: var(--muted);
}
kbd {
  display: inline-block; margin: 0 1px; padding: 0 5px;
  border: 2px solid var(--muted); border-radius: 0;
  font: inherit; font-size: 11px; font-weight: 900; color: var(--text);
}

/* 指で触る端末では、キーボードの案内と、鍵盤に書くキーの文字は要らない */
@media (hover: none) and (pointer: coarse) {
  .pc-only, .k-pc { display: none; }
}

/* 広い画面（パソコン・タブレット）。設定を 2 列にならべて、鍵盤まで 1 画面に収める。
   左：音色とオクターブ、右：曲。鍵盤と案内は、2 列ぶんの幅を使う。 */
@media (min-width: 820px) {
  .piano-container {
    max-width: 920px;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px;
    align-content: start;
  }
  .panel-tone   { grid-column: 1; grid-row: 1; }
  .panel-row    { grid-column: 1; grid-row: 2; }
  .panel-songs  { grid-column: 2; grid-row: 1 / span 2; }
  .keys-wrap { grid-column: 1 / -1; }
}

/* 画面が低い（スマホを横にしたとき）。鍵盤を少し低くして、上の設定を見やすくする */
@media (max-height: 520px) {
  :root { --keys-h: clamp(120px, 38dvh, 210px); }
  .site-header { padding-top: 6px; }
  .site-tagline { display: none; }
}

/* ── 08. 動きを減らす設定 ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tone-btn, .song-btn, .mode-btn, .step-btn, .label-btn { transition: none; }
  /* 点滅はやめて、ミント色のまま止める */
  .key.next { animation: none; background: var(--mint); }
}