@charset "UTF-8";

/* ==========================================================================
   どうぶつナンプレ 紹介ページ

   色・寸法はすべてゲーム実装からの転記である（推測値を使わない）。
   出典:
     色      … Assets/Taabox/Data/Config/BoardThemeSO.asset
     色の名前 … Spec.md §5.2（盤面の基準パレット）
     盤面の幾何 … Assets/Taabox/View/Puzzle/BoardView.cs
               Assets/Taabox/Data/Config/PuzzleConfigSO.asset
               Assets/Taabox/View/Puzzle/PuzzleScreenView.cs
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（BoardThemeSO の実値）
   -------------------------------------------------------------------------- */
:root {
  /* 地とカード */
  --c-bg:            #FBF8F3;  /* _screenBackground */
  --c-card:          #FFFFFF;  /* _boardCard */
  --c-line:          #DCD2BE;  /* _progressTrack   … 2px の枠線に使う */
  --c-fill-soft:     #F0EAE0;  /* _hintMessageFill */
  --c-locked-card:   #F5F1E8;  /* _lockedCard */

  /* 文字 */
  --c-text:          #4A3A28;  /* _primaryText */
  /* _secondaryText。**本ページでは未使用**（2026-09-05）——
     地色 #FBF8F3 上で 3.93:1・帯 #F0EAE0 上で 3.48:1 しか無く、
     WCAG AA（4.5:1）に届かないため本文系はすべて _strongText へ寄せた。
     トークンの一覧としては残す */
  --c-text-sub:      #8A7A64;
  --c-text-strong:   #5A4634;  /* _strongText（= _hintFrameColor） */

  /* アクセント・状態 */
  --c-accent:        #EE9450;  /* _accentButton */
  --c-mistake:       #D93A36;  /* _mistakeColor */
  --c-cell-border:   rgba(255, 255, 255, .9); /* _cellBorder … 白 alpha 0.9 */
  --c-mark:          #FFFFFF;  /* _markColor */

  /* 盤面の基準パレット 9色（Spec.md §5.2。L は輝度の実測値） */
  --c-nest-budou:    #7B5EA7;  /* 0 ぶどう   L 111.0 */
  --c-nest-ichigo:   #C55F6A;  /* 1 いちご   L 126.8 */
  --c-nest-umi:      #5C97D8;  /* 2 うみ     L 140.8 */
  --c-nest-mori:     #5CBC8B;  /* 3 もり     L 153.7 */
  --c-nest-mikan:    #EE9450;  /* 4 みかん   L 167.2 */
  --c-nest-fuji:     #BCA8E0;  /* 5 ふじ     L 180.4 */
  --c-nest-momo:     #F5A8C4;  /* 6 もも     L 194.2 */
  --c-nest-mizuiro:  #A5DFE3;  /* 7 みずいろ L 206.1 */
  --c-nest-wakaba:   #D3E9A2;  /* 8 わかば   L 218.3 */

  /* サイズ固有色 _sizeColors（5×5 → 9×9） */
  --c-size-5:        #5CBC8B;
  --c-size-6:        #5C97D8;
  --c-size-7:        #C55F6A;
  --c-size-8:        #EE9450;
  --c-size-9:        #7B5EA7;

  /* 角丸（ゲーム規約の継承）
     ボタン … 高さ × 0.45（ほぼカプセル）
     カード … 16〜20px 相当
     画面全幅の帯 … 角丸なし */
  --r-card:          20px;
  --r-card-sm:       16px;
  --r-button-ratio:  .45;

  /* 書体 */
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
          "Yu Gothic", "Meiryo", system-ui, sans-serif;

  /* 版面 */
  --wrap: 1080px;
}

/* --------------------------------------------------------------------------
   2. 土台
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-text-strong); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: 72px; }

/* 画面全幅の帯は角丸を持たない（ゲーム規約） */
.band {
  background: var(--c-fill-soft);
  border-radius: 0;
}

.section__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 4.4vw, 32px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .04em;
  text-align: center;
}

/* 中黒でつないだ語群が語の途中で折れるのを防ぐ（「げきむ / ず」になっていた） */
.nw { white-space: nowrap; }

.section__lead {
  margin: 0 auto 40px;
  text-wrap: balance;
  max-width: 42em;
  color: var(--c-text-strong);
  font-size: 15px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. ヒーロー
   -------------------------------------------------------------------------- */
.hero { padding-block: 56px 72px; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero__logo {
  width: 100%;
  max-width: 600px;   /* 表示幅の上限。素材は 2x（1200px）を積んである */
  margin: 0 0 24px;
}

.hero__catch {
  margin: 0 0 8px;
  text-wrap: balance;
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .03em;
}

.hero__sub {
  margin: 0 0 32px;
  color: var(--c-text-strong);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   4. ストアバッジ
   URL が決まったら index.html の「ストアURL差し替え」ブロックだけを直す。
   CSS 側で触るものは無い。
   -------------------------------------------------------------------------- */
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.store {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* 実 ink の高さを 54px に揃える。
   App Store バッジ … 108.851 × 40（余白なし）→ 54px
   Google Play バッジ … 646 × 250 のうち ink は 646 × 192（上下に規定の余白）
                       → 54 × 250 / 192 = 70.3px */
.store__img--apple  { height: 54px;   width: auto; }
.store__img--google { height: 70px;   width: auto; }

.store.is-disabled {
  pointer-events: none;
  cursor: default;
  filter: grayscale(1);
  opacity: .45;
}

.stores__note {
  flex-basis: 100%;
  margin: 0;
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.stores__note::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  vertical-align: 1px;
}

/* --------------------------------------------------------------------------
   5. ミニ盤面（ゲームの盤面の再現）

   実装からの転記:
     盤面カード  面 #FFFFFF / 縁 2px #DCD2BE / 角丸 24 / 余白 24
                （PuzzleScreenView.BOARD_CARD_CORNER / _BORDER / _MARGIN）
     格子の間隔  盤面の一辺 ÷ N
     タイル      間隔 × (1 − 0.06)      PuzzleConfigSO._cellGapRatio = 0.06
     角丸        タイル × 0.12          BoardView.CELL_CORNER_RATIO
     枠          2px（参照1080基準）     BoardView.CELL_BORDER_WIDTH
     × 印        タイル × 0.55          PuzzleConfigSO._markSizeRatio = 0.55
                線幅は mark_x.svg（48 の器に stroke-width 10・丸端）から
     どうぶつ    タイル × 0.8 × 種ごとの倍率   BoardView.ANIMAL_FILL_RATIO
   -------------------------------------------------------------------------- */
.board {
  /* --board = 5×5 の正方形の一辺。カードの余白と角丸はここから比で決まる */
  --board: min(420px, 74vw);
  --pitch: calc(var(--board) / 5);
  --tile:  calc(var(--pitch) * .94);
  --card-pad: calc(var(--board) * .024157);   /* 24 / 993.60 */

  /* 実装は「カードの外周 = 盤面 + 余白 24 × 2」で、2px の枠はその内側に描かれる。
     border-box では枠が余白を食うので、padding から 2px 引いて内寸を盤面ちょうどにする */
  width: calc(var(--board) + var(--card-pad) * 2);
  margin-inline: auto;
  padding: calc(var(--card-pad) - 2px);
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--card-pad);   /* BOARD_CARD_CORNER 24 を同じ比で縮めた値 */
}

.board__grid {
  display: grid;
  grid-template-columns: repeat(5, var(--pitch));
  grid-template-rows: repeat(5, var(--pitch));
  place-items: center;
}

.cell {
  position: relative;
  width: var(--tile);
  height: var(--tile);
  /* 枠は 2 参照px。5×5 のタイルは 186.80 参照px なので 2 / 186.80 = 0.010707 */
  border: calc(var(--tile) * .010707) solid var(--c-cell-border);
  border-radius: calc(var(--tile) * .12);
}

.cell--budou   { background: var(--c-nest-budou); }
.cell--ichigo  { background: var(--c-nest-ichigo); }
.cell--umi     { background: var(--c-nest-umi); }
.cell--mori    { background: var(--c-nest-mori); }
.cell--mikan   { background: var(--c-nest-mikan); }
.cell--fuji    { background: var(--c-nest-fuji); }
.cell--momo    { background: var(--c-nest-momo); }
.cell--mizuiro { background: var(--c-nest-mizuiro); }
.cell--wakaba  { background: var(--c-nest-wakaba); }

/* × 印。mark_x.svg と同じ形を CSS で引く。
   器 48 に対し 線幅 10・丸端・端点 (6.6,7.2)〜(41.6,41.5)。
   丸端の棒（stadium）は「軸の長さ + 太さ」が全長になるので
     全長 = √(35² + 34.3²) + 10 = 59.005 → 器 × 1.2293
     太さ = 10 → 器 × 0.2083
     角度 = atan2(34.3, 35) = 44.42°（もう1本は -45.58°）
   器はタイル × 0.55（PuzzleConfigSO._markSizeRatio）。
   結果、× の外接は 45 / 48 = タイル × 0.5156 で実装と一致する */
.cell__mark {
  position: absolute;
  inset: 0;
}

.cell__mark::before,
.cell__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width:  calc(var(--tile) * .55 * 1.2293);
  height: calc(var(--tile) * .55 * .2083);
  border-radius: 999px;
  background: var(--c-mark);
}

.cell__mark::before { transform: translate(-50%, -50%) rotate(44.42deg); }
.cell__mark::after  { transform: translate(-50%, -50%) rotate(-45.58deg); }

/* どうぶつ。長辺 = タイル × 0.8 × 種ごとの倍率。
   倍率は AnimalScaleConfigSO の比（長辺 ÷ 1119）÷ 基準 0.62 で、
   さらに素材へ焼き込まれた白フチ（BakedEdgeWidth 13）のぶんを戻してある。
     イヌ / ネコ  … 0.8 × 0.87636 × 1.09353 = 0.7667（長辺 = 幅）
     ウサギ       … 0.8 × 1.06518 × 1.07569 = 0.9167（長辺 = 高さ） */
.cell__animal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cell__animal--land { width:  calc(var(--tile) * .7667); height: auto; }
.cell__animal--port { height: calc(var(--tile) * .9167); width:  auto; }

/* --------------------------------------------------------------------------
   5b. どうぶつの相対サイズ（盤面の外で並べるとき）

   Spec.md §5.2「どうぶつの相対サイズ」の再現。
   各画面は「自分の基準寸法 × 種ごとの倍率」で描く。ここでは --u が基準寸法。

   倍率 = (長辺 ÷ 1119) ÷ 0.62 × 焼き込み白フチの補正
          ─ AnimalScaleConfigSO._ratios / ._baseRatio / ._bakedEdgeWidth(13)
          補正 = アトラス長辺 ÷ (アトラス長辺 − 13)   ※アトラスは原寸の 0.25 倍
   長辺が幅の種は width、高さの種は height に入れる。
   -------------------------------------------------------------------------- */
/* **幅と高さの両方を auto に落としてから片側だけを指定する。**
   img の基礎規則は height しか押さえておらず、width を CSS で指定しないと
   HTML の width 属性（presentational hint）がそのまま効いて縦横比が壊れる。
   実測（2026-09-05）: 縦長のウサギ・キリンが 232.52% / 210.77% ずれていた */
.an { --u: 84px; width: auto; height: auto; }

.an--inu     { width:  calc(var(--u) * .9583); }  /* 608 → 0.87636 × 1.09353 */
.an--neko    { width:  calc(var(--u) * .9583); }  /* 608 */
.an--hiyoko  { width:  calc(var(--u) * .9583); }  /* 608 */
.an--penguin { width:  calc(var(--u) * .9542); }  /* 605 */
.an--panda   { width:  calc(var(--u) * .9886); }  /* 629 */
.an--usagi   { height: calc(var(--u) * 1.1457); } /* 739（縦長） */
.an--lion    { width:  calc(var(--u) * 1.2865); } /* 837 */
.an--kirin   { height: calc(var(--u) * 1.2260); } /* 795（縦長） */
.an--zou     { width:  calc(var(--u) * 1.5277); } /* 1005（最大種ウリアル 1119 に次ぐ） */

/* --------------------------------------------------------------------------
   6. カード（特徴・あそびかた・収録内容）
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 32px 28px 36px;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  text-align: center;
}

.card__figure {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 124px;
  margin-bottom: 16px;
}

.card__figure .an { --u: 96px; }

.card__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .03em;
}

.card__body {
  margin: 0;
  color: var(--c-text-strong);
  font-size: 15px;
}


/* あそびかた */
.steps { counter-reset: step; }

.steps .card { text-align: left; }

.step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 18px;   /* 高さ 40 × 0.45 */
  background: var(--c-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.step__rule {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: var(--r-card-sm);
  background: var(--c-fill-soft);
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. どんなパズル?
   -------------------------------------------------------------------------- */
.about__body {
  max-width: 34em;
  margin-inline: auto;
  font-size: 16px;
}

.about__body p { margin: 0 0 1.2em; }

.about__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. 収録内容
   -------------------------------------------------------------------------- */
.sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 116px;
  padding: 16px 18px;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card-sm);
}

.size__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
}

.size--5 .size__name { color: var(--c-size-5); }
.size--6 .size__name { color: var(--c-size-6); }
.size--7 .size__name { color: var(--c-size-7); }
.size--8 .size__name { color: var(--c-size-8); }
.size--9 .size__name { color: var(--c-size-9); }

.levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.level {
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--c-fill-soft);
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* どうぶつの並び（図鑑の紹介） */
.zukan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 20px 28px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.zukan .an { --u: 84px; }

/* --------------------------------------------------------------------------
   9. クレジット
   -------------------------------------------------------------------------- */
.credits {
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  text-align: center;
}

.credits dl { margin: 0; }

.credits dt {
  color: var(--c-text-strong);
  font-size: 13px;
  letter-spacing: .08em;
}

.credits dd {
  margin: 0 0 22px;
  color: var(--c-text);
  font-size: 16px;
  font-weight: 700;
}

.credits dd:last-of-type { margin-bottom: 0; }

.credits__license {
  display: block;
  color: var(--c-text-strong);
  font-size: 13px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   9b. お問い合わせ
   様式はクレジットのカードに揃える（面は地色・縁は 2px ProgressTrack）。
   -------------------------------------------------------------------------- */
.contact {
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  text-align: center;
}

.contact__label {
  margin: 0 0 10px;
  color: var(--c-text-strong);
  font-size: 13px;
  letter-spacing: .08em;
}

.contact__mail {
  margin: 0 0 12px;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 800;
  letter-spacing: .02em;
  word-break: break-all;
}

/* クリックでコピーできることを示す。JS が無くても文字は読める */
.js-copy-mail {
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--c-accent);
}

.contact__note {
  margin: 0;
  color: var(--c-text-strong);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   10. フッター
   -------------------------------------------------------------------------- */
.footer {
  padding-block: 40px 48px;
  border-top: 2px solid var(--c-line);
  color: var(--c-text-strong);
  font-size: 14px;
  text-align: center;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.footer__nav a { color: var(--c-text-strong); }

.footer__copy { margin: 0; }

/* --------------------------------------------------------------------------
   11. 画面幅への追従
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    text-align: center;
  }

  .hero__logo { margin-inline: auto; }

  .stores { justify-content: center; }

  .cards { grid-template-columns: minmax(0, 1fr); }

  .card__figure { height: 112px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }

  .wrap { padding-inline: 20px; }

  .section { padding-block: 56px; }

  .board { --board: min(340px, 84vw); }

  .card { padding: 28px 22px 30px; }

  .size { min-width: 96px; padding: 14px 14px; }
}

/* 動きを減らす設定を尊重する（本ページは JS を使わないが、
   将来スクロール演出を足すときのため既定を置いておく） */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}