/* temoto games ブランド共通スタイル（docs/games-top-brand-spec.md §1）。
 *
 * 使う場所: トップ（/）と パーティーポータル（/party/）。
 * ゲーム内のUIは各ゲームのCSS（/party/common/party.css ほか）が持つので、ここには入れない。
 *
 * ブランドの狙い: 本体 temoto.app の落ち着いたプロダクト調とは切り離し、
 * 「休み時間の教室」のノリ。クリーム色の地に、ゲームごとの色のカードが並んで
 * “おもちゃ箱”に見える状態をトップの完成形とする。
 * 画像ロゴは作らない（テキストロゴ＋🎲）。外部フォント・外部CDNの読み込みは禁止。
 */

:root {
  /* 地の色。白だと硬いので、ほんのりクリーム（チルダンの暖色トイ感と喧嘩しない） */
  --tg-cream: #fff7ec;
  --tg-cream-deep: #ffeeda;
  --tg-card: #ffffff;
  --tg-ink: #2f2417;
  --tg-ink-soft: #7a6c59;
  --tg-line: #f1e2ca;
  --tg-shadow: 0 6px 0 rgba(90, 62, 30, 0.09);

  /* ゲームごとのテーマ色（カードは --tg-tint の淡い地で色を出す） */
  --tg-chillda: #e8763a;
  --tg-wordwolf: #7c4dff;
  --tg-reflex: #ff8a2b;
  --tg-daifugo: #2fa96b;
  --tg-sketch: #29b6d8;
  --tg-icchi: #f0a500;
  --tg-quiz: #3d6fe0;
  --tg-pairs: #1f7a5a;

  --tg-radius: 22px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--tg-cream);
  color: var(--tg-ink);
  /* 丸ゴシックが入っていれば丸ゴシック。無ければ素直なsans-serifに落ちる（webフォントは読まない） */
  font-family: 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN W4', 'Zen Maru Gothic',
    'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP',
    sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

.tg-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 20px) calc(env(safe-area-inset-right) + 18px)
    calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 18px);
}

/* ===== ヒーロー（ロゴ・タグライン・3つの約束） ===== */

.tg-hero {
  text-align: center;
  padding: 18px 0 26px;
}

.tg-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tg-ink);
  text-decoration: none;
}

.tg-logo__dice {
  font-size: 40px;
  line-height: 1;
  /* サイコロだけ少し傾けて“転がってきた”感じを出す */
  transform: rotate(-12deg);
  display: inline-block;
}

.tg-tagline {
  font-size: 20px;
  font-weight: 800;
  margin: 10px 0 0;
}

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

.tg-points li {
  background: var(--tg-cream-deep);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #8a5a24;
}

/* ===== 見出し ===== */

.tg-h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 32px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tg-h2::after {
  content: '';
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--tg-line);
}

/* ===== ゲームカード（おもちゃ箱の中身） ===== */

.tg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 700px) {
  .tg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .tg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* 9本ちょうどのトップは3列のままにして、PCで3×3の“おもちゃ箱”に見せる
     （4列だと最後の1枚だけあふれる） */
  .tg-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* トップの「ダンジョンかパーティーか」の2枚だけは、PCでも横に伸びきらないよう
   2列で止めて中央に置く（4列に2枚だと左に寄って落ち着かない） */
@media (min-width: 700px) {
  .tg-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 620px;
    margin: 0 auto;
  }
}

.tg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 22px 12px 14px;
  border-radius: var(--tg-radius);
  background: var(--tg-card);
  box-shadow: var(--tg-shadow);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* 上端の色帯は撤去（2026-08-31）。24枚が並ぶと帯の色がぶつかって一覧がうるさくなるため、
   カードの色は絵文字の丸（--tg-tint の淡い地）だけに残す */

.tg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 rgba(90, 62, 30, 0.1);
}

.tg-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(90, 62, 30, 0.12);
}

.tg-card__emoji {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
  background: var(--tg-tint, var(--tg-cream-deep));
  margin-bottom: 2px;
}

.tg-card__title {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.tg-card__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tg-ink-soft);
}

/* 人数はカードの右肩に小さく。いちばん先に効く絞り込み（何人いる？）なのに
   タイトルより目立ってはいけないので、タグ行と同じクリームのチップにする */
.tg-card__players {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  padding: 1px 7px;
  border-radius: 999px;
  color: #8a5a24;
  background: var(--tg-cream-deep);
}

/* 画面が広いとカードの中身がスカスカに見えるので、絵と文字を一段大きくする */
@media (min-width: 700px) {
  .tg-card {
    padding: 26px 14px 18px;
  }

  .tg-card__emoji {
    width: 76px;
    height: 76px;
    font-size: 42px;
  }

  .tg-card__title {
    font-size: 18px;
  }

  .tg-card__desc {
    font-size: 13.5px;
  }
}

/* ===== party の系統リスト（トップ・docs/party-portal2-spec.md §3） =====
 * 23枚のカードを全部ならべる代わりに、「どんな遊びが入っているか」だけを4行で見せる。
 * カードではなくリストにしているのは、ここでゲームを選ばせたくないため
 * （選ぶ場所は /party/ ひとつに寄せる） */

.tg-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .tg-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tg-cat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--tg-card);
  border-radius: var(--tg-radius);
  padding: 13px 17px;
  box-shadow: var(--tg-shadow);
}

.tg-cat__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 900;
}

/* 本数は見出しの右端に。数を主役にしない（何本あるかより、どんな遊びかが先） */
.tg-cat__head b {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: #b96a17;
  background: var(--tg-cream-deep);
  border-radius: 999px;
  padding: 1px 9px;
}

.tg-cat__lead {
  font-size: 13px;
  font-weight: 700;
  color: var(--tg-ink-soft);
}

.tg-cat__names {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tg-ink-soft);
}

.tg-cats__more {
  display: block;
  margin: 12px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  color: #b96a17;
  text-decoration: none;
  background: var(--tg-cream-deep);
  border-radius: var(--tg-radius);
  padding: 13px 18px;
  box-shadow: var(--tg-shadow);
}

.tg-cats__more:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(90, 62, 30, 0.12);
}

/* ===== あそびかた3コマ ===== */

.tg-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .tg-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tg-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--tg-card);
  border-radius: var(--tg-radius);
  padding: 14px 16px;
  box-shadow: var(--tg-shadow);
}

.tg-step__num {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tg-cream-deep);
  color: #b96a17;
  font-weight: 900;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-step__text {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.45;
}

.tg-step__text span {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--tg-ink-soft);
}

/* ===== 安全の約束（保護者向け・小さめ） ===== */

.tg-safety {
  background: var(--tg-cream-deep);
  border-radius: var(--tg-radius);
  padding: 16px 18px;
  margin: 28px 0 0;
}

.tg-safety__title {
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 6px;
}

.tg-safety__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13.5px;
  color: #6b5637;
}

.tg-safety__list li::before {
  content: '✔ ';
  color: #2fa96b;
  font-weight: 900;
}

/* ===== フッター ===== */

.tg-foot {
  margin: 28px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--tg-ink-soft);
  line-height: 1.9;
}

.tg-foot a {
  color: #b96a17;
}

/* 📴 オフライン表示（docs/party-pwa-spec.md §5）。
   バッジは .tg-hero の末尾に JS が生成する。沈めるのは solo:false のカード
   （.tg-cardbox ごと沈めるので「🤖ひとりで」帯も一緒に消える） */
.tg-offline-badge {
  margin: 14px auto 0;
  max-width: 560px;
  background: #ffffff;
  border: 2px solid #f1e2ca;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--tg-shadow);
}
.tg-offline .tg-card--offdim {
  opacity: 0.35;
  filter: saturate(0.4);
  pointer-events: none;
}