@charset "UTF-8";

/* ==========================================================================
   スペース四川省 紹介ページ

   組みは原器 ../doubutsunanpure/style.css の写し（../doubutsukiokurelay/ と同じ）。
   配色は共通トークン（WEBSITE.md §2）。盤面の再現だけゲームの値を使う。
   出典:
     宇宙の地色 … ~/Unity/SpaceShisensho の紺 #05081A（ストアの文章 2.0.0 ASO のフィーチャー グラフィックの項）
     牌の絵     … Assets/Taabox/Arts/Tile/Space/*.png（256px を 160px の WebP に縮小）
     背景       … Assets/Taabox/Arts/Backdrop/space_base.png（900px の WebP に縮小）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  --c-bg:            #FBF8F3;
  --c-card:          #FFFFFF;
  --c-line:          #DCD2BE;
  --c-fill-soft:     #F0EAE0;
  --c-text:          #4A3A28;
  --c-text-strong:   #5A4634;
  --c-accent:        #EE9450;

  /* 宇宙の画面（ゲームの再現） */
  --c-space:         #05081A;
  --c-space-line:    #3A4A78;
  --c-tile:          #F2F2F4;
  --c-tile-edge:     #B9BCC6;
  --c-path:          #CFC8FF;   /* 星座の線 */

  --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;
}

/* --------------------------------------------------------------------------
   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__icon {
  width: 96px;
  height: 96px;
  margin: 0 0 20px;
  border-radius: 22%;
}

.hero__title {
  margin: 0 0 8px;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .04em;
}

.hero__catch {
  margin: 0 0 12px;
  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. ストアバッジ
   -------------------------------------------------------------------------- */
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

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

/* 実 ink の高さを 54px に揃える（原器と同じ） */
.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. 宇宙の画面の再現（ロゴ + 5×5 の盤面・月の牌 2 枚を 2 回曲がる線でつなぐ）
   盤面の中の座標は 1 マス = 1 の単位（SVG の viewBox 0 0 5 5 と同じ）。
   -------------------------------------------------------------------------- */
.stage {
  --board: min(340px, 72vw);
  padding: 28px 20px 32px;
  background: var(--c-space) url("assets/backdrop.webp") center top / cover no-repeat;
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
}

.stage__logo {
  width: min(78%, 360px);
  margin: 0 auto 22px;
}

.board {
  position: relative;
  width: var(--board);
  margin-inline: auto;
}

.board__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  aspect-ratio: 1;
  padding: 3%;
}

.tile img {
  width: 100%;
  height: 100%;
  border-radius: 14%;
}

.tile--pick img { outline: 3px solid #fff; outline-offset: 0; }

.board__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.path__glow { stroke: rgba(150, 140, 255, .45); stroke-width: .16; }
.path__core { stroke: #fff;                     stroke-width: .05; }

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


/* 牌の並び（収録内容） */
.tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 8px;
  padding: 24px 20px;
  background: var(--c-space);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  list-style: none;
}

.tiles img { width: 64px; height: 64px; border-radius: 14%; }

/* あそびかたは 5 枚。3 枚 + 2 枚で中央にそろえる */
.steps--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.steps--five .card { grid-column: span 2; }
.steps--five .card:nth-child(4) { grid-column: 2 / span 2; }

.card__figure--tile img { width: 88px; height: 88px; border-radius: 14%; }

.step__ok-ng {
  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;
}

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

/* --------------------------------------------------------------------------
   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__icon { margin-inline: auto; }

  .stores { justify-content: center; }

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

  .steps--five { grid-template-columns: minmax(0, 1fr); }
  .steps--five .card,
  .steps--five .card:nth-child(4) { grid-column: auto; }

  .card__figure { height: 112px; }
}

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

  .wrap { padding-inline: 20px; }

  .section { padding-block: 56px; }

  .stage { --board: min(300px, 70vw); padding: 24px 14px 28px; }

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

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

  .tiles img { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}