@charset "UTF-8";

/* ==========================================================================
   どうぶつマインスイーパー 紹介ページ

   組みは原器 ../doubutsunanpure/style.css の写し。
   配色は共通トークン（WEBSITE.md §2・原器と同じ値）。盤面の色だけゲームの値を使う。
   出典:
     盤面の色   … ~/Unity/AnimalMinesweeper/Assets/Taabox/Data/BoardStyle.asset
     盤面の寸法 … StoreAssets/1.0.0/googleplay/01_play.png（1080×1920）の盤面からの実測（§5）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  /* 地とカード（共通トークン・原器と同じ値） */
  --c-bg:            #FBF8F3;
  --c-card:          #FFFFFF;
  --c-line:          #DCD2BE;  /* 2px の枠線 */
  --c-fill-soft:     #F0EAE0;  /* 帯・チップ */

  /* 文字 */
  --c-text:          #4A3A28;
  --c-text-strong:   #5A4634;

  /* アクセント */
  --c-accent:        #EE9450;

  /* 盤面（BoardStyle.asset の値） */
  --c-hidden:        #B4CD9A;  /* _hiddenColor        閉じたマス（市松の 1 色目） */
  --c-hidden-alt:    #BFD5A7;  /* _hiddenColorAlt     閉じたマス（市松の 2 色目） */
  --c-raised:        #91AD77;  /* _raisedBaseColor    閉じたマスの下の段差 */
  --c-raised-alt:    #98B37E;  /* _raisedBaseColorAlt 同（2 色目） */
  --c-opened:        #F8EFDF;  /* _openedColor        開いたマス */
  --c-num-1:         #3B78C4;  /* _numberColors[0] */
  --c-num-2:         #3C8F55;  /* _numberColors[1] */
  --c-num-3:         #CF5340;  /* _numberColors[2] */
  --c-num-4:         #34508F;  /* _numberColors[3] */

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

/* 中黒でつないだ語群が語の途中で折れるのを防ぐ（「げきむ / ず」になっていた） */
.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: 560px;   /* 表示幅の上限。素材は 1149px（約 2x） */
  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. ミニ盤面（ゲームの盤面の再現・9×9）

   01_play.png（1080×1920）の盤面から測った値（px）と、ここでの比:
     マス        65 × 65                         → --tile = 盤面 × 65 / 617
     マスの間     4                               → --gap  = 盤面 × 4 / 617
     盤面の一辺   65 × 9 + 4 × 8 = 617            → --board
     カードの余白 14（2px の枠の内側から盤面まで）→ 盤面 × 14 / 617
     カードの枠   2px #E2CCA6（ここでは共通の --c-line で 2px）
     カードの角丸 26（外周）                      → 盤面 × 26 / 617
     マスの角丸   10                              → マス × 10 / 65 = .154
     段差の高さ   4（閉じたマスの下端。面は 61）  → マス × 4 / 65 = .0615
     数字         字面の高さ 22〜23 → 書体の大きさはマス × .48（800）
     旗           字面 30 × 38（素材 256 のうち 172 × 227）→ 器 = マス × .66、面の中央
   影・グラデーションは使わない（段差は下の枠線で描く）
   -------------------------------------------------------------------------- */
.board {
  --board: min(420px, 74vw);
  --tile:  calc(var(--board) * 65 / 617);
  --gap:   calc(var(--board) * 4 / 617);
  --card-pad: calc(var(--board) * 14 / 617);

  /* border-box なので、枠 2px を足して内寸を「盤面 + 余白 × 2」にする */
  width: calc(var(--board) + var(--card-pad) * 2 + 4px);
  margin-inline: auto;
  padding: var(--card-pad);
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: calc(var(--board) * 26 / 617);
}

.board__grid {
  display: grid;
  grid-template-columns: repeat(9, var(--tile));
  grid-template-rows: repeat(9, var(--tile));
  gap: var(--gap);
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: calc(var(--tile) * .154);
  font-size: calc(var(--tile) * .48);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.cell--open { background: var(--c-opened); }

/* 閉じたマス。面の下に段差（マス × .0615）を枠線で描く */
.cell--hidden {
  background: var(--c-hidden);
  border-bottom: calc(var(--tile) * .0615) solid var(--c-raised);
}

.cell--hidden.cell--alt {
  background: var(--c-hidden-alt);
  border-bottom-color: var(--c-raised-alt);
}

.cell--n1 { color: var(--c-num-1); }
.cell--n2 { color: var(--c-num-2); }
.cell--n3 { color: var(--c-num-3); }
.cell--n4 { color: var(--c-num-4); }

.cell__flag {
  width: calc(var(--tile) * .66);
  height: calc(var(--tile) * .66);
}

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

   倍率 = (長辺 ÷ 1119) ÷ 0.62 × 焼き込み白フチの補正
          補正 = (長辺 ÷ 4) ÷ (長辺 ÷ 4 − 13)
   長辺は com.taabox.animals の AnimalLibrary.g.cs の幅・高さ。
   長辺が幅の種は width、高さの種は height に入れる。
   -------------------------------------------------------------------------- */
/* 幅と高さの両方を auto に落としてから片側だけを指定する（原器の注記を参照） */
.an { --u: 84px; width: auto; height: auto; }

.an--frog    { width:  calc(var(--u) * .9583); }  /* 608 */
.an--inu     { width:  calc(var(--u) * .9583); }  /* 608 */
.an--neko    { width:  calc(var(--u) * .9583); }  /* 608 */
.an--hamster { width:  calc(var(--u) * 1.0255); } /* 655 */
.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--koala   { width:  calc(var(--u) * 1.2419); } /* 806 */
.an--zou     { width:  calc(var(--u) * 1.5277); } /* 1005 */

/* --------------------------------------------------------------------------
   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 40px;
  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__dim {
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* どうぶつの並び（図鑑の紹介） */
.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; }
}