/* ============================================================
   PLAYER BASE — Brand Page
   index.html（団体紹介・主催大会紹介）専用スタイル
   design-system.css / site.css の上に重ねる
   ============================================================ */

/* .pb-navbar__menu--end（ナビ右寄せ）は全ページ共通のため site.css に定義 */

/* セクション用アンカー（sticky ヘッダー分のオフセット） */
.pb-anchor { scroll-margin-top: 96px; padding-top: var(--pb-space-10); }

.pb-section-title--lg { font-size: 32px; margin: 0 0 var(--pb-space-3); }
.pb-section-lead {
  font-size: 17px;
  line-height: 1.9;
  color: rgba(26, 26, 26, .7);
  max-width: 860px;
  margin: 0 0 var(--pb-space-6);
}
.pb-section-lead strong { color: var(--pb-primary-active); font-weight: var(--pb-fw-bold); }

.pb-br-sp { display: none; }

/* ============================================================
   ヒーロー
   ============================================================ */
.pb-hero {
  position: relative;
  overflow: hidden;
  margin-top: var(--pb-space-8);
  padding: var(--pb-space-16) var(--pb-space-8);
  border-radius: var(--pb-radius);
  background: linear-gradient(135deg, rgba(20, 20, 20, .96), rgba(44, 44, 44, .90));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  color: var(--pb-surface);
  animation: pb-fade-up .6s cubic-bezier(.22, .61, .36, 1) both;
}
.pb-hero::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  top: -150px; right: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 247, 40, .45), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.pb-hero::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  bottom: -170px; left: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 247, 40, .20), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.pb-hero > * { position: relative; z-index: 1; }

.pb-hero__badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: var(--pb-fw-bold);
  letter-spacing: .08em;
  padding: 6px 18px;
  border-radius: var(--pb-radius-full);
  background: rgba(178, 247, 40, .14);
  border: 1px solid rgba(178, 247, 40, .45);
  color: var(--pb-primary);
}
.pb-hero__title {
  font-size: 64px;
  font-weight: var(--pb-fw-black);
  letter-spacing: .01em;
  line-height: 1.1;
  margin: var(--pb-space-4) 0 0;
}
.pb-hero__lead {
  font-size: 26px;
  font-weight: var(--pb-fw-bold);
  line-height: 1.5;
  margin: var(--pb-space-3) 0 0;
}
.pb-hero__lead strong { color: var(--pb-primary); }
.pb-hero__sub {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .78);
  max-width: 640px;
  margin: var(--pb-space-4) 0 0;
}
.pb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-3);
  margin-top: var(--pb-space-6);
}
.pb-hero__actions .pb-btn { font-size: 17px; padding: 12px 28px; }
.pb-hero__actions .pb-btn .pb-icon { font-size: 20px; }
.pb-hero__actions .pb-btn--secondary { background: var(--pb-primary); color: var(--pb-text); }
.pb-hero__actions .pb-btn--secondary:hover { background: var(--pb-primary-hover); }
.pb-hero__actions .pb-btn--outline {
  color: var(--pb-surface);
  border-color: rgba(255, 255, 255, .4);
  padding: 11px 26px;
}
.pb-hero__actions .pb-btn--outline:hover { background: var(--pb-surface); color: var(--pb-text); }

/* ============================================================
   団体紹介
   ============================================================ */
.pb-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pb-space-8);
  align-items: stretch;
}
/* 左カラム：本文の下に「代表」をぶら下げ、右カラムの下端に揃える */
.pb-about-col {
  display: flex;
  flex-direction: column;
}
.pb-about-lead p {
  font-size: 17px;
  line-height: 2;
  margin: 0 0 var(--pb-space-4);
}
.pb-about-lead p:last-child { margin-bottom: 0; }
.pb-about-lead strong { color: var(--pb-primary-active); font-weight: var(--pb-fw-bold); }

.pb-value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
}
.pb-value {
  /* 3枚を等高で分配し、左カラムと下端を揃える */
  flex: 1 1 0;
  display: flex;
  gap: var(--pb-space-4);
  align-items: center;
  padding: var(--pb-space-4) var(--pb-space-5);
  border-radius: var(--pb-radius);
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 8px 26px rgba(20, 30, 10, .08);
  transition: transform .22s ease, border-color .22s ease;
}
.pb-value:hover { transform: translateY(-3px); border-color: rgba(178, 247, 40, .55); }
.pb-value__icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1A1A1A, #2e2e2e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.pb-value__icon .pb-icon { font-size: 26px; color: var(--pb-primary); }
.pb-value__body h3 { font-size: 19px; font-weight: var(--pb-fw-bold); margin: 0 0 4px; }
.pb-value__body p  { font-size: 15px; margin: 0; color: rgba(26, 26, 26, .74); }

/* 代表：左カラムの最下段へ */
.pb-reps { margin-top: auto; padding-top: var(--pb-space-6); }
.pb-reps__title {
  font-size: 14px;
  font-weight: var(--pb-fw-black);
  letter-spacing: .18em;
  color: var(--pb-muted);
  margin: 0 0 var(--pb-space-3);
}
.pb-reps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-2);
}
.pb-rep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: var(--pb-fw-bold);
  padding: 8px 22px;
  border-radius: var(--pb-radius-full);
  background: var(--pb-text);
  color: var(--pb-primary);
}

/* ============================================================
   大会カード
   各大会のアクセントは --tc-a / --tc-b で切り替える
   ============================================================ */
.pb-tcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--pb-space-6);
}
.pb-tcard {
  --tc-a: #B2F728;
  --tc-b: #7FB50E;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--pb-radius);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 10px 34px rgba(20, 30, 10, .10);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
  animation: pb-fade-up .6s cubic-bezier(.22, .61, .36, 1) both;
}
.pb-tcard-grid > *:nth-child(2) { animation-delay: .08s; }
.pb-tcard-grid > *:nth-child(3) { animation-delay: .16s; }
.pb-tcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .16);
}

/* 上部のグラデーションビジュアル */
.pb-tcard__visual {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: var(--pb-space-5) var(--pb-space-6);
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg, var(--tc-a), var(--tc-b));
}
.pb-tcard__visual::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent);
  pointer-events: none;
}
.pb-tcard__glyph {
  position: absolute;
  right: -18px; top: -22px;
  font-size: 150px;
  line-height: 1;
  color: rgba(0, 0, 0, .12);
  pointer-events: none;
  transition: transform .4s ease;
}
.pb-tcard:hover .pb-tcard__glyph { transform: scale(1.08) rotate(-6deg); }

/* ルールアイコン（フェス系）：透かしではなくバッジとして見せる
   タグが下に潜り込まないよう、アイコン分の余白を右に確保する */
.pb-tcard--nawabari .pb-tcard__visual,
.pb-tcard--area .pb-tcard__visual { padding-right: 148px; }

.pb-tcard__rule {
  position: absolute;
  right: var(--pb-space-5);
  top: 50%;
  width: 104px;
  height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .22));
  pointer-events: none;
  transition: transform .4s ease;
}
.pb-tcard:hover .pb-tcard__rule { transform: translateY(-50%) scale(1.07) rotate(-4deg); }
.pb-tcard__tag {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: var(--pb-fw-bold);
  color: rgba(0, 0, 0, .82);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

.pb-tcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
  padding: var(--pb-space-6);
  flex: 1 0 auto;
}
.pb-tcard__title { font-size: 28px; font-weight: var(--pb-fw-black); margin: 0; }
.pb-tcard__desc  { font-size: 16px; line-height: 1.8; margin: 0; color: rgba(26, 26, 26, .78); }

.pb-tcard__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pb-tcard__meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--pb-fw-bold);
  color: rgba(26, 26, 26, .66);
}
.pb-tcard__meta .pb-icon { color: var(--tc-b); }

.pb-tcard__actions {
  margin-top: auto;
  padding-top: var(--pb-space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pb-space-3);
}
.pb-tcard__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: var(--pb-radius-full);
  background: var(--pb-text);
  color: var(--pb-primary);
  font-size: 17px;
  font-weight: var(--pb-fw-bold);
  transition: background .2s ease, gap .2s ease;
}
.pb-tcard__action .pb-icon { font-size: 20px; transition: transform .2s ease; }
.pb-tcard:hover a.pb-tcard__action { background: #000; gap: 16px; }
.pb-tcard:hover a.pb-tcard__action .pb-icon { transform: translateX(4px); }
.pb-tcard__action--soon {
  background: rgba(26, 26, 26, .07);
  color: var(--pb-muted);
  cursor: default;
}
.pb-tcard__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--pb-fw-bold);
  color: rgba(26, 26, 26, .62);
  transition: color .15s ease;
}
.pb-tcard__link:hover { color: var(--pb-text); }

/* 大会ごとのアクセント
   ガチャキング＝金 / フェス系は個別ページ設計時に季節グラデーションへ差し替え */
.pb-tcard--gachaking { --tc-a: #F2D06B; --tc-b: #B9862B; }
.pb-tcard--nawabari  { --tc-a: #6FE7D6; --tc-b: #2BA8C6; }
.pb-tcard--area      { --tc-a: #FFB259; --tc-b: #E8459B; }
.pb-tcard--gachaking .pb-tcard__action { color: #F5D98A; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .pb-br-sp { display: inline; }
  .pb-hero { padding: var(--pb-space-10) var(--pb-space-5); margin-top: var(--pb-space-5); }
  .pb-hero__title { font-size: 42px; }
  .pb-hero__lead  { font-size: 21px; }
  .pb-hero__sub   { font-size: 15px; }
  .pb-anchor { padding-top: var(--pb-space-8); }
  .pb-section-title--lg { font-size: 26px; }
  .pb-about-grid { grid-template-columns: 1fr; }
  .pb-tcard--nawabari .pb-tcard__visual,
  .pb-tcard--area .pb-tcard__visual { padding-right: 126px; }
  .pb-tcard__rule { width: 88px; right: var(--pb-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .pb-hero, .pb-tcard { animation: none; }
}