@charset "UTF-8";

/* ==========================================================================
   文字探し２ 紹介ページ

   様式は doubutsunanpure/ を雛形にしている（WEBSITE.md §3）。
   トークンの値はサイト共通（css/style.css）と同じものを使う（同 §2）。
   盤面の色と幾何はゲーム側の実装からの転記で、推測値を使わない。
   出典（ゲーム側プロジェクト）:
     色      … Spec.md §12 のベーシックテーマ確定値
               背景 #F2F7FC / 盤面セル 白 / インク #1E3A5F
               なぞりハイライト #6688CC（= cellSelectedColor・2026-08-04）
               発見帯 #EB7B9B #9D7FE0 #5FA3EC #51B374 …（発見帯の文字は白）
     盤面の幾何 … Assets/Taabox/View/GamePlay/BoardGridView.cs
               GAP_RATIO 0.10 / CORNER_RATIO 0.28 / PANEL_PAD_RATIO = GAP_RATIO
               Assets/Taabox/View/Ui/UiBuild.cs  BOARD_FONT_RATIO 0.58
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  /* 地とカード。**サイト共通のベージュではなくゲームの色の正本を使う**
     （WEBSITE.md §2 の但し書き。様式・フォント・ブレークポイントは共通のまま）。
     枠線は正本に無い色なので、指示書で明示された値を使う */
  --c-bg:            #F2F7FC;  /* 地（ゲーム内 theme.surface） */
  --c-card:          #FFFFFF;  /* 白カード（共通様式・不変） */
  --c-line:          #D9E4F2;  /* 2px の枠線（正本に無いため指示値） */
  --c-fill-soft:     #E8F2FB;  /* 交互の節の地 */

  /* 文字 */
  --c-text:          #1E3A5F;              /* 本文・見出し（ゲーム内 textPrimary） */
  --c-text-strong:   rgba(30, 58, 95, .72); /* 補足。本文色の透明度違い */

  /* アクセント */
  --c-accent:        #6688CC;  /* ゲーム内 primary / cellSelectedColor と同値 */

  /* 盤面（ゲーム内ベーシックテーマの実値） */
  /* 盤面の地。**ページの地（#F2F7FC）と同値にしない**——同値だとパネルの輪郭が
     画素差 0/255 で消える（2026-09-05 実測）。正本のスプラッシュ背景 #E8F2FB を使い、
     ゲーム側と同じ「地から半歩ずらしてパネルを浮かせる」考え方に揃える。
     交互の節の帯・ジャンルチップ（--c-fill-soft）と同値になるが、どちらも正本の値 */
  --c-board-bg:      #E8F2FB;  /* 盤面の地 */
  --c-board-cell:    #FFFFFF;  /* セル */
  --c-board-ink:     #1E3A5F;  /* 文字 */
  --c-board-trace:   #6688CC;  /* なぞり中 */
  --c-found-momo:    #EB7B9B;  /* 発見済み 1 */
  --c-found-sora:    #5FA3EC;  /* 発見済み 2 */
  --c-found-midori:  #51B374;  /* 発見済み 3 */
  --c-found-ink:     #FFFFFF;  /* 色地の上の文字は白抜き（Spec.md §12） */

  /* 角丸 */
  --r-card:          20px;
  --r-card-sm:       16px;

  /* 書体 */
  --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;
}

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

/* 見出しの直後に本文が来る節は、見出しの下余白だけを確保する */
.section__title--solo { margin-bottom: 40px; }

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

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

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

/* 分かち書きのキャッチは**空白のところでだけ折る**。
   既定だと狭幅で「なぞっ / て」のように語の途中で折れた（390px 実測）。
   語は最長5文字なので、keep-all にしても行から溢れることはない */
.hero__catch {
  margin: 0 0 8px;
  text-wrap: balance;
  word-break: keep-all;
  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. ミニ盤面（ゲームの盤面の再現・画像ではなく HTML/CSS で組む）

   実装からの転記（BoardGridView.cs）:
     セル       ピッチ × (1 − GAP_RATIO)      GAP_RATIO = 0.10
     角丸       セル × CORNER_RATIO           CORNER_RATIO = 0.28
     盤面の余白 ピッチ × PANEL_PAD_RATIO      PANEL_PAD_RATIO = GAP_RATIO
     盤面の角丸 セル × CORNER_RATIO + 余白
     文字       セル × BOARD_FONT_RATIO       BOARD_FONT_RATIO = 0.58
   -------------------------------------------------------------------------- */
.board {
  /* --board = 5×5 のセルが並ぶ正方形の一辺（＝ピッチ × 5） */
  --board: min(400px, 74vw);
  --pitch: calc(var(--board) / 5);
  --cell:  calc(var(--pitch) * .90);
  --pad:   calc(var(--pitch) * .10);

  width: calc(var(--board) + var(--pad) * 2);
  margin-inline: auto;
  padding: var(--pad);
  background: var(--c-board-bg);
  /* セルの角丸と同心になる半径（BuildPanel と同じ式） */
  border-radius: calc(var(--cell) * .28 + var(--pad));
}

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

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cell);
  height: var(--cell);
  border-radius: calc(var(--cell) * .28);
  background: var(--c-board-cell);
  color: var(--c-board-ink);
  font-size: calc(var(--cell) * .58);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  /* ひらがなの字面を升の中心へ置く（行間の影響を受けないようにする） */
  text-indent: 0;
}

/* 発見済み（色地 + 白抜き） */
.cell--found-momo   { background: var(--c-found-momo);   color: var(--c-found-ink); }
.cell--found-sora   { background: var(--c-found-sora);   color: var(--c-found-ink); }
.cell--found-midori { background: var(--c-found-midori); color: var(--c-found-ink); }

/* なぞっている途中（色地 + 白抜き） */
.cell--trace { background: var(--c-board-trace); color: var(--c-found-ink); }

/* --------------------------------------------------------------------------
   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__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;
}

/* あそびかた（4ステップ） */
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.steps .card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 4px 16px;
  text-align: left;
}

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

.step__body {
  margin: 0;
  align-self: center;
  color: var(--c-text-strong);
  font-size: 15px;
}

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

.about__body p { margin: 0; }

/* --------------------------------------------------------------------------
   8. 収録内容
   -------------------------------------------------------------------------- */
.specs {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.spec {
  padding: 24px 28px;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
}

.spec + .spec { margin-top: 16px; }

/* 確定稿の1行をそのまま持つ（「ラベル:」も本文の一部として字面を変えない）。
   太字にするのはラベルの部分だけで、文字は 1 字も足し引きしない */
.spec__body {
  margin: 0;
  color: var(--c-text-strong);
  font-size: 15px;
}

.spec__label {
  color: var(--c-text);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .03em;
}

/* ジャンル名のチップ。1チップ＝1ジャンル */
.genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.genre {
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--c-fill-soft);
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;   /* 中黒（U+30FB）で語が割れないようにする */
}

/* --------------------------------------------------------------------------
   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. お問い合わせ
   様式は ../doubutsunanpure/ と同じ（ページ内完結・メール難読化）。
   -------------------------------------------------------------------------- */
.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,
  .steps { grid-template-columns: minmax(0, 1fr); }

  .genres { justify-content: center; }
}

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

  .wrap { padding-inline: 20px; }

  .section { padding-block: 56px; }

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

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

  .spec { padding: 22px 20px; }

  .credits { padding: 28px 20px; }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}