/* パーティーポータル（/party/）だけの追加スタイル。
 * 見た目の土台はトップと共通の /assets/brand.css（docs/games-top-brand-spec.md §2）。
 * ここは「/party/ へ直接来た人向けの簡易版」に必要な差分だけを持つ。 */

/* トップよりヒーローは控えめに（ここはゲーム選びが主役） */
.portal-hero {
  padding: 10px 0 20px;
}

/* ===== 系統セクション（docs/party-portal2-spec.md §1） =====
 * 23枚をフラットに並べると選べないので、4つの系統に割って
 * 「いまの場に合うのはどれか」で絞れるようにする。
 * 見出しは brand.css の .tg-h2、その下に1行の場面コピーを敷く */

.portal-sec + .portal-sec {
  margin-top: 6px;
}

/* .tg-h2 の下マージンぶんを場面コピーが引き取る（見出しとコピーを1かたまりに見せる） */
.portal-sec .tg-h2 {
  margin-bottom: 4px;
}

.portal-sec__lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tg-ink-soft);
}

/* スマホ2列でカードの内寸を6px広げる（brand.css の左右12px→9px）。
 * 9文字のゲーム名（「おしくらまんじゅう」「しんけいすいじゃく」）と
 * 「人数＋タグ1個」の1行が、ちょうどこの数pxで入るか折れるかが変わる */
@media (max-width: 699px) {
  .portal-sec .tg-card {
    padding-left: 9px;
    padding-right: 9px;
  }
}

/* ===== カードのタグ行 =====
 * 🤖ひとりでもOK / 🌐リモートOK・🏠集まって / 🤝協力 を最大2個まで（人数は
 * カードの右肩＝brand.css の .tg-card__players に移した。2026-08-31）。
 * 色はゲームごとの色ではなくクリームで統一する */
.tg-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
}

.tg-tag {
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.6;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--tg-cream-deep);
  color: #8a5a24;
  white-space: nowrap;
}

@media (min-width: 700px) {
  .tg-card__tags {
    gap: 4px;
  }

  .tg-tag {
    font-size: 11.5px;
    padding: 2px 8px;
  }
}

/* ===== 「🤖ひとりで」直行の帯（2026-09-05・トップのカード下辺） =====
 * solo:true のゲーム（＋odeko の1台モード）は、カードを .tg-cardbox で包んで
 * 下辺に /party/<slug>/?solo=1 直行のリンク帯を付ける。
 * カードは <a> なので入れ子にできず、包む div がグリッドの1マスになる。
 * 角丸と影は包み側に移し、カード（上半分）と帯（下半分）で1枚に見せる。
 * 帯はタップ領域44px以上を守りつつ、クリーム地＋小さめ文字で
 * カード本体より一段控えめに（主役はあくまで「みんなで遊ぶ」の方） */
.tg-cardbox {
  display: flex;
  flex-direction: column;
  border-radius: var(--tg-radius);
  box-shadow: var(--tg-shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

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

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

/* 中のカードは浮き沈みを包み側にゆずる（単独カードの hover/active と二重にしない） */
.tg-cardbox .tg-card,
.tg-cardbox .tg-card:hover,
.tg-cardbox .tg-card:active {
  flex: 1;
  border-radius: var(--tg-radius) var(--tg-radius) 0 0;
  box-shadow: none;
  transform: none;
}

.tg-solo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 0 0 var(--tg-radius) var(--tg-radius);
  background: var(--tg-cream-deep);
  color: #8a5a24;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.tg-solo:hover {
  background: #ffe6c7;
}

@media (min-width: 700px) {
  .tg-solo {
    font-size: 13px;
  }
}

/* トップへの導線。カードの列とは別のリズムにして「もっとある」感を出す */
.portal-more {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  padding: 14px 18px;
  border-radius: var(--tg-radius);
  background: var(--tg-cream-deep);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--tg-shadow);
}

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

.portal-more__emoji {
  font-size: 32px;
  line-height: 1;
  flex: none;
}

.portal-more strong {
  color: #b96a17;
  font-weight: 900;
}

/* 大人の目に触れる注意書き（docs/party-platform-spec.md §5）。
 * 薄くしすぎず、でも怖くない色で */
.portal-note {
  background: var(--tg-card);
  border-radius: var(--tg-radius);
  padding: 14px 18px;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.8;
  box-shadow: var(--tg-shadow);
}

/* 丸ゴシックは太字を持たない環境があるため、ここは色でも効かせる */
.portal-note strong {
  font-weight: 900;
  color: #c0452f;
}