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

   ■ 棒と円盤の大きさ
     棒の高さ --peg-h は、画面の高さから、棒以外が使う分を引いたもの
     （下限 220px、上限 360px）。円盤の高さは、枚数 --n に合わせて決める
     （--n は game.js が .pegs に入れる）。3 枚なら大きく、64 枚なら
     数 px の薄い板になる。円盤の幅と色は、game.js が円盤ごとに入れる
     （幅 = 棒の何 % か、色 = --hue）。

   ■ 構成
     01. フォント
     02. 色（カスタムプロパティ）とベース
     03. ヘッダー・フッター
     04. 画面の切り替え
     05. カード（タイトル・クリア）
     06. ボタン・枚数ボタン
     07. ブラフマーの塔（ネタ）
     08. ゲーム画面：上の帯・数字
     09. ゲーム画面：棒と円盤
         （完成したときの円盤のはね .solved、おてほんの「タップで止める層」と、
          ホワイトアウトの白 .demo-white もここ）
     10. ゲーム画面：道具
     11. 動きを減らす設定

   ■ クリアの帯・紙ふぶきは、このファイルには無い
     ナンプレと共有の /kids/shared/clearfx.css が持つ。ここにあるのは、
     ハノイの塔に固有の「完成した円盤をはねさせる」動きだけ。
   ================================================================ */

/* ── 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:        #f1f4fa;
  --card:      #ffffff;
  --primary:   #3b78d8;   /* 空の青 */
  --primary-d: #2a5cab;
  --accent:    #f08a24;
  --text:      #2f3342;
  --muted:     #7c8294;
  --shadow:    rgba(47, 51, 66, 0.10);

  --pole:      #9aa3b8;   /* 棒 */
  --base:      #b08a5b;   /* 台 */
  --peg-sel:   #e3edff;   /* 円盤を持ち上げている棒の地 */
  --err:       #d63a3a;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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 6px; text-align: center; }
.site-title { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: 0.02em; }
.title-accent { color: var(--primary); }
.site-tagline {
  margin: 4px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted);
}
/* 遊んでいるあいだは、タイトルを小さくして、フッターは隠す（棒に高さを使う） */
body.playing .site-header { padding: 6px 16px 2px; }
body.playing .site-title { font-size: 18px; }
body.playing .site-tagline,
body.playing .site-footer { display: none; }

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

/* ── 04. 画面の切り替え ─────────────────────────────────────── */
main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.game-container {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  width: 100%; max-width: 580px; margin: 0 auto; padding: 0 12px;
}
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ── 05. カード ─────────────────────────────────────────────── */
.card {
  margin: 12px auto;
  width: 100%; max-width: 520px;
  padding: 22px 20px 24px;
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 8px 28px var(--shadow);
  text-align: center;
}
.card-heading { margin: 0 0 12px; font-size: 18px; font-weight: 900; }

.rules { list-style: none; margin: 0 0 12px; padding: 0; text-align: left; }
.rules li { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; font-size: 15px; line-height: 1.45; }
.rule-icon { flex: none; font-size: 26px; line-height: 1.2; }

.start-label { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.privacy-note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

.result-emoji { margin: 0; font-size: 56px; }
.result-message { margin: 6px 0 8px; font-size: 22px; font-weight: 900; }
.result-detail { margin: 0 0 16px; font-size: 16px; line-height: 1.7; }
.result-detail > span { display: block; }

/* ── 06. ボタン・枚数ボタン ─────────────────────────────────── */
.btn {
  display: block; width: 100%; max-width: 280px;
  margin: 10px auto 0;
  padding: 12px 18px;
  border: 0; border-radius: 16px;
  font: inherit; font-size: 18px; font-weight: 900; letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .icon-btn:focus-visible, .tool:focus-visible,
.peg:focus-visible { outline: 3px solid #f08a24; outline-offset: 2px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-d); }
.btn-secondary { background: #e4e9f3; color: var(--text); }
/* 英語の下に、日本語を小さく添える */
.btn-en { display: block; }
.btn-ja { display: block; margin-top: 1px; font-size: 12px; font-weight: 700; opacity: 0.9; }
.btn-continue { margin-top: 4px; }

/* 枚数ボタン：5つ横にならべる。数字を大きく、「まい」を小さく添える */
.level-list {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-top: 8px;
}
.level-list .btn {
  margin: 0; max-width: none;
  padding: 8px 0 7px;
  letter-spacing: 0;
}
.lv-n  { display: block; font-size: 28px; line-height: 1.1; }
.lv-en { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; }
.lv-ja { display: block; font-size: 10px; font-weight: 700; line-height: 1.2; opacity: 0.9; }
/* 枚数が増えるほど色を変えて、取り違えにくくする（3・4 枚は青、5・6 枚はオレンジ、7 枚は紫） */
.level-list .lv-mid  { background: var(--accent); box-shadow: 0 4px 0 #c4691a; }
.level-list .lv-hard { background: #8e5bd6; box-shadow: 0 4px 0 #6d3fb0; }

/* ── 07. ブラフマーの塔（ネタ） ─────────────────────────────── */
.brahma {
  margin-top: 18px;
  padding: 14px 14px 16px;
  border: 2px dashed #bfaef0;
  border-radius: 16px;
  background: #f5f2ff;
}
.brahma-title { margin: 0 0 8px; font-size: 15px; font-weight: 900; color: #4b3a8f; }
.brahma-title .ja { color: #6b5bb0; }
.brahma-text { margin: 0; font-size: 13px; line-height: 1.5; text-align: left; }
.btn-brahma {
  background: linear-gradient(135deg, #4b3a8f, #2f2a63);
  color: #ffd978;
  box-shadow: 0 4px 0 #1d1a40;
}

/* ── 08. ゲーム画面：上の帯・数字 ───────────────────────────── */
/* 帯・数字・棒・道具は、同じ幅にそろえる */
.hud, .stats, .pegs, .tools, .status, .brahma-note {
  width: 100%; max-width: 540px; margin-left: auto; margin-right: auto;
}
.hud {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 8px;
}
.icon-btn {
  flex: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 12px;
  background: #e4e9f3;
  font-size: 20px; line-height: 1; font-weight: 900;
  color: var(--text);
  cursor: pointer;
}
.hud-level { flex: 1; margin: 0; font-size: 16px; font-weight: 900; line-height: 1.2; }
.hud-level small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.stat {
  margin: 0; padding: 5px 6px 6px;
  min-width: 0;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--shadow);
  text-align: center;
}
.stat-l { display: block; font-size: 10px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.stat-v { display: block; font-size: 20px; font-weight: 900; line-height: 1.25; }
/* 64 枚の最短手数のような長い数字は、小さくして折り返す */
.stat-v.long { font-size: 10px; line-height: 1.5; word-break: break-all; }

/* ── 09. ゲーム画面：棒と円盤 ───────────────────────────────── */
.pegs {
  --n: 3;
  --peg-h: clamp(220px, calc(100dvh - 350px), 360px);
  /* 円盤 1 枚の高さ。棒の高さから、台と持ち上げる分（約 40px）を引いて、枚数で割る。上限 30px */
  --disk-h: min(30px, calc((var(--peg-h) - 40px) / var(--n) - 1px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}

.peg {
  position: relative;
  height: var(--peg-h);
  padding: 0 4px 14px;
  border: 0; border-radius: 16px;
  background: var(--card);
  box-shadow: 0 2px 8px var(--shadow);
  display: flex; flex-direction: column-reverse; align-items: center;   /* 下から積む */
  font: inherit; color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease;
}
/* 棒（円盤の後ろ） */
.peg::before {
  content: '';
  position: absolute; left: 50%; top: 8px; bottom: 14px;
  width: 8px; margin-left: -4px;
  border-radius: 4px 4px 0 0;
  background: var(--pole);
}
/* 台 */
.peg::after {
  content: '';
  position: absolute; left: 6px; right: 6px; bottom: 4px;
  height: 10px;
  border-radius: 5px;
  background: var(--base);
}
/* 円盤を持ち上げている棒。色だけでなく、輪も出す */
.peg.src { background: var(--peg-sel); box-shadow: 0 0 0 3px var(--primary), 0 2px 8px var(--shadow); }
.peg.shake { animation: shake 0.3s ease; }

.disk {
  position: relative; z-index: 1;
  flex: none;
  height: var(--disk-h);
  margin-top: 1px;
  border-radius: min(9px, calc(var(--disk-h) / 2));
  background: hsl(var(--hue, 210) 72% 68%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: min(16px, calc(var(--disk-h) * 0.6));
  font-weight: 900; line-height: 1;
  color: var(--text);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* 持ち上げた円盤。上へ浮かせて、影を付ける */
.disk.lifted {
  transform: translateY(-14px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 5px 6px rgba(47, 51, 66, 0.28);
}
/* いま置いた円盤。上からストンと落ちる */
.disk.drop { animation: drop 0.2s ease-out; }

/* 完成したとき、右の棒の円盤が下から順にはねる（--k は円盤の下からの順番。game.js が入れる） */
.pegs.solved .peg:nth-child(3) .disk {
  animation: win 0.7s ease both;
  animation-delay: calc(var(--k, 0) * 60ms);
}
@keyframes win {
  0%, 100% { transform: translateY(0); filter: none; }
  40%      { transform: translateY(-14px); filter: brightness(1.12) saturate(1.2); }
}

/* おてほん：再生中に画面を覆う、タップで止めるための透明な層と、ホワイトアウトの白 */
.demo-layer {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px 6vh;
  cursor: pointer;
}
.demo-hint {
  margin: 0; padding: 6px 16px;
  border-radius: 14px;
  background: rgba(47, 51, 66, 0.72); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center;
}
.demo-hint .ja { color: #dfe3ee; margin-top: 0; font-size: 11px; }
.demo-white {
  position: fixed; inset: 0; z-index: 70;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

@keyframes drop {
  from { transform: translateY(-26px); }
  to   { transform: translateY(0); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

.status {
  min-height: 52px;
  margin-top: 6px; margin-bottom: 0;
  text-align: center;
  font-size: 13px; font-weight: 900; line-height: 1.3;
  color: var(--err);
}
.status .ja { margin-top: 0; font-size: 12px; color: var(--err); }
.brahma-small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; opacity: 0.85; }
.brahma-note {
  margin-top: 0; margin-bottom: 6px;
  text-align: center;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  color: #4b3a8f;
}

/* ── 10. ゲーム画面：道具 ───────────────────────────────────── */
.tools {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-bottom: 10px;
}
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  padding: 5px 4px 6px;
  border: 0; border-radius: 14px;
  background: #e4e9f3;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.tools.has-demo { grid-template-columns: repeat(3, 1fr); }
.tool:active { transform: scale(0.97); }
.tool:disabled { opacity: 0.4; cursor: default; transform: none; }
.tool-icon { font-size: 20px; line-height: 1.1; font-weight: 900; }
.tool-en { font-size: 12px; font-weight: 900; line-height: 1.2; }
.tool-ja { font-size: 10px; font-weight: 700; color: var(--muted); line-height: 1.2; }
/* 「もういちど押すと」の確認中 */
.tool.confirm { background: var(--accent); color: #fff; }
.tool.confirm .tool-ja { color: #fff; }

/* ── 11. 動きを減らす設定 ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn, .peg, .disk { transition: none; }
  .disk.drop, .peg.shake, .pegs.solved .peg:nth-child(3) .disk { animation: none; }
}