/**
 * 試合結果ページ（page-game_result.php）。年度タイムライン。
 * カードで囲わず、罫線の3階層で区切る（design-policy.md 2章）。勝敗は色だけで
 * 区別せず、テキストラベル（勝ち/負け/引分）を必ず併記する（design-policy.md 10章）。
 *
 * @package goonies
 */

.game-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 試合と試合の間（第1階層・詰め版）。1年度20試合前後が縦に並ぶため、
   線の濃さ（--rule-1）は保ったまま余白だけ40pxに詰める（design-policy.md 2章）。
   最初の試合の上には要らないため :first-child で除外する */
.game-timeline__item {
	margin-top: var(--space-tier-1-before-dense);
	border-top: var(--rule-1);
	padding-top: var(--space-tier-1-after-dense);
}

.game-timeline__item:first-child {
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}

.game-timeline__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	min-height: var(--tap-min);
	padding: 12px 0;
	list-style: none;
	cursor: pointer;
	transition: background var(--duration-standard) var(--ease-standard);
}

.game-timeline__summary::-webkit-details-marker {
	display: none;
}

/* リスト行ホバー：背景をごく淡く（design-policy.md 9章） */
.game-timeline__summary:hover {
	background: var(--c-hover);
}

.game-timeline__date {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-list-heading);
	letter-spacing: var(--ls-number);
	font-variant-numeric: tabular-nums;
	color: var(--c-gray-50);
	flex: none;
}

.game-timeline__name {
	font-family: var(--f-body);
	font-size: var(--fs-body);
	color: var(--c-ink);
}

.game-timeline__opponent {
	font-family: var(--f-body);
	font-weight: var(--fw-body-medium);
	font-size: var(--fs-body);
	color: var(--c-ink);
}

.game-timeline__score {
	font-family: var(--f-display);
	font-weight: var(--fw-display-medium);
	font-size: var(--fs-list-heading);
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
	margin-left: auto;
}

.game-timeline__result {
	font-family: var(--f-body);
	font-size: var(--fs-body);
	color: var(--c-gray-70);
}

/* 展開トグル。開閉状態は色ではなく回転で示す */
.game-timeline__toggle {
	flex: none;
	width: 6px;
	height: 6px;
	margin-left: 4px;
	border-right: 1px solid var(--c-gray-50);
	border-bottom: 1px solid var(--c-gray-50);
	transform: rotate(-45deg);
	transition: transform var(--duration-standard) var(--ease-standard);
}

.game-timeline__details[open] .game-timeline__toggle {
	transform: rotate(45deg);
}

.game-timeline__detail {
	padding: 0 0 16px;
}

/* 線表。table/th[scope=row]で組むが、視覚上はCSS Gridの2行グリッドのまま。
   1fr（等分）にすると列が間延びし、逆に幅を詰めすぎると数字がくっつくため、
   各列に「2桁が入っても余る」最小幅（minmax）を与えて間隔を確保する。
   ラベル列は30pxとイニング列（16px）より広く取り、ラベルと数字群の区切りを
   イニング間の間隔より大きくする。1〜2桁 + Xしか入らない列なので、
   9イニング・375px幅でも横スクロールは発生しない（30 + 9×16 + 9×6=228px） */
.game-linescore {
	display: grid;
	grid-template-columns: minmax(30px, auto) repeat(var(--goonies-linescore-innings), minmax(16px, auto));
	justify-content: start;
	gap: 4px 6px;
	margin: 0 0 calc(var(--space-tier-3) / 2);
	border-spacing: 0;
}

/* 線表の直後に項目リスト（球場・開始時刻等）が続く場合だけ、その先頭行の上に
   区切り線を入れる（第3階層）。線を.game-linescore側の下端に持たせると、
   線表だけの試合（後に何も続かない）で相手のいない線が残ってしまうため、
   後続要素の上端側で持つ（.game-timeline__video-label の :first-child 除外と同じ考え方） */
.game-linescore + .player-personal .player-personal__row:first-child {
	padding-top: calc(var(--space-tier-3) / 2);
	border-top: var(--rule-3);
}

.game-linescore__body,
.game-linescore__row {
	display: contents;
}

.game-linescore__label,
.game-linescore__cell {
	padding: 0;
	vertical-align: baseline;
}

.game-linescore__label {
	font-family: var(--f-body);
	font-weight: var(--fw-body-regular);
	font-size: var(--fs-annotation);
	color: var(--c-gray-50);
	text-align: left;
}

.game-linescore__cell {
	font-family: var(--f-display);
	font-size: var(--fs-annotation);
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
	text-align: center;
}

/* 動画ありを示すアイコン（小さな再生三角）。.game-timeline__toggle と同じ
   border技法で組む。実際の動画は詳細を開いたときの facade（stats.css）で出す */
.game-timeline__video-icon {
	flex: none;
	width: 0;
	height: 0;
	margin-left: 2px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid var(--c-gray-50);
}

/* 動画facadeの直前のラベル（「試合動画」）。既存の項目ラベル
   （.player-personal__label。球場・開始時刻等）と体裁を揃える。
   線表・詳細項目の下に来るのが通例のため上に区切り線（第3階層）を入れるが、
   動画のみで他の項目が無い試合では先頭に来るため相殺する */
.game-timeline__video-label {
	margin-top: calc(var(--space-tier-3) / 2);
	padding-top: calc(var(--space-tier-3) / 2);
	border-top: var(--rule-3);
	margin-bottom: 8px;
}

.game-timeline__video-label:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}