@charset "UTF-8";
/*
 * game.css
 * 試合結果一覧ページ専用スタイル（archive-dsbc_game.php）
 * SPアコーディオンは common.js の initSpAccordion() を使用
 * フォントサイズは variables.css の --page-* 変数を使用
 *
 * @package ds-basketballclub-2026
 */

/* =============================================
   試合結果アーカイブ セクション
   ============================================= */

/* ─── 大会ブロック一覧 ─── */
.game-archive__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ─── 投稿なし ─── */
.game-archive__empty {
	padding: 60px 0;
	text-align: center;
	font-family: var(--font-ja);
	font-size: var(--text-base-size);
	color: var(--color-gray-2);
}

/* =============================================
   大会ブロック
   ============================================= */

/* ─── 黄緑ヘッダー（大会名）：PCは常時展開のためcursorはdefault ─── */
.game-block__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background-color: var(--color-accent);
	padding: 16px 24px;
	cursor: default;
	user-select: none;
}

.game-block__title {
	font-family: var(--font-ja);
	font-size: var(--page-h2-pc); /* 26px */
	font-weight: 900;
	color: var(--color-black);
	line-height: 1.5;
	margin: 0;
}

/* chevronアイコン：PCでは非表示 */
.game-block__chevron {
	display: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* ─── グレーボディ：PCは常時展開 ─── */
.game-block__body {
	display: block;
	overflow: visible;
}

/* JS が .acc-inner を動的挿入した後も背景・paddingが効くよう
   background-color は body-inner 側で管理し、acc-inner は padding: 0 */
.game-block__body-inner {
	background-color: var(--color-offwhite);
	padding: 32px 40px 40px;
	display: flex;
	flex-direction: column;
}

/* 会場 */
.game-block__venue {
	font-family: var(--font-ja);
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 700;
	color: var(--color-black);
	margin: 0 0 28px;
}

/* 結果 */
.game-block__result {
	font-family: var(--font-ja);
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 700;
	color: var(--color-black);
	margin: 40px 0 0;
}

/* 備考 */
.game-block__note {
	font-family: var(--font-ja);
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 700;
	color: var(--color-black);
	line-height: 1.8;
	margin: 12px 0 0;
}

/* =============================================
   試合リスト
   ============================================= */
.game-match-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.game-match-list__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* 日付 */
.game-match__date {
	font-family: var(--font-ja);
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 700;
	color: var(--color-black);
	margin: 0;
}

/* ラウンド */
.game-match__round {
	font-family: var(--font-ja);
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 700;
	color: var(--color-black);
	margin: 0;
}

/* スコア行：チームA スコア チームB */
.game-match__score-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.game-match__team {
	font-family: var(--font-ja);
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 700;
	color: var(--color-black);
}

.game-match__score {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-en);
}

.game-match__score-num {
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 700;
	color: var(--color-black);
	min-width: 28px;
	text-align: center;
}

.game-match__score-sep {
	font-size: var(--page-body-pc); /* 20px */
	font-weight: 700;
	color: var(--color-black);
}

/* =============================================
   レスポンシブ（タブレット 〜1024px）
   ============================================= */
@media screen and (max-width: 1024px) {
	.game-block__body-inner {
		padding: 24px 28px 32px;
	}

	.game-block__title {
		font-size: var(--page-h2-pc); /* 26px */
	}

	.game-block__venue,
	.game-block__result,
	.game-block__note,
	.game-match__date,
	.game-match__round,
	.game-match__team,
	.game-match__score-num,
	.game-match__score-sep {
		font-size: var(--page-body-tab); /* 18px */
	}
}

/* =============================================
   レスポンシブ（SP 〜768px）
   ============================================= */
@media screen and (max-width: 768px) {

	/* SP: ブロック間の区切り（白線） */
	.game-archive__list {
		gap: 0;
	}

	.game-block {
		border-bottom: 1px solid var(--color-white);
	}

	/* SP: ヘッダーをタップ可能に */
	.game-block__header {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		padding: 16px 20px;
	}

	/* ヘッダー（大会名）: CLUBのSPアコーディオンヘッダーと統一 */
	.game-block__title {
		font-size: var(--text-lg-size); /* 18px */
	}

	/* SP: 矢印アイコン表示（黄緑背景なので黒矢印） */
	.game-block__chevron {
		display: block;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='2,6 10,14 18,6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transition: transform 0.3s ease;
	}

	/* 開いているとき矢印回転 */
	.js-accordion-item.is-open .game-block__chevron {
		transform: rotate(180deg);
	}

	/* SP: アコーディオン開閉
	   padding は acc-inner（JS が動的挿入）に持たせることで scrollHeight が正確になる */
	.game-block__body {
		overflow: hidden;
		height: 0;
		transition: height 0.35s ease;
	}

	/* acc-inner は padding なし（body-inner 側で管理） */
	.game-block__body > .acc-inner {
		padding: 0;
	}

	.game-block__body-inner {
		padding: 16px 20px 24px;
	}

	.game-block__venue {
		margin-bottom: 16px;
	}

	.game-block__result {
		margin-top: 24px;
	}

	.game-match-list {
		gap: 16px;
	}

	/* ボディ内テキスト */
	.game-block__venue,
	.game-block__result,
	.game-block__note,
	.game-match__date,
	.game-match__round,
	.game-match__team,
	.game-match__score-num,
	.game-match__score-sep {
		font-size: var(--page-body-sp); /* 16px */
	}
}