/*
 * Tactical Challenge — モバイルファースト（v0.3.0-rc）。
 * 375〜430px幅で「問題番号+タイトル+コート図+4択」が可能な限り
 * 1 viewport に収まることを目標に、余白・フォントサイズを詰めている。
 * 4択は縦積み（ラベルが長くなりうるため横グリッドにしない）。
 */

.bf-tc {
	max-width: 640px;
	margin: 0 auto;
	padding: 12px 16px 40px;
	color: #1a1a1a;
}

.bf-tc-preview-badge {
	position: sticky;
	top: 0;
	z-index: 10;
	text-align: center;
	background: #7c3aed;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 5px 8px;
	border-radius: 6px;
	margin: 0 0 8px;
}

.bf-tc-hero {
	text-align: center;
	margin-bottom: 10px;
}

.bf-tc-hero__eyebrow {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #666;
	margin: 0 0 2px;
}

.bf-tc-hero__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 4px;
}

.bf-tc-lead {
	font-size: 13px;
	color: #444;
	margin: 0;
}

.bf-tc-noscript,
.bf-tc-loading,
.bf-tc-error {
	text-align: center;
	padding: 24px 12px;
	color: #666;
}

/* ---- Progress ---- */

.bf-tc-progress {
	margin-bottom: 6px;
}

.bf-tc-progress__label {
	display: block;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: #666;
	margin-bottom: 4px;
}

.bf-tc-progressbar {
	height: 6px;
	border-radius: 999px;
	background: #eee;
	overflow: hidden;
}

.bf-tc-progressbar__fill {
	height: 100%;
	background: #c2410c;
	border-radius: 999px;
	transition: width 0.2s ease;
}

/* ---- Category / difficulty tags ---- */

.bf-tc-tags {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin: 8px 0 4px;
}

.bf-tc-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 999px;
	background: #f0f0f0;
	color: #555;
}

.bf-tc-tag--beginner { background: #e6f4ea; color: #1a7f37; }
.bf-tc-tag--intermediate { background: #eaf1fd; color: #1a56db; }
.bf-tc-tag--advanced { background: #fdecea; color: #c62828; }

/* ---- Situation ---- */

.bf-tc-scenario__title {
	font-size: 15px;
	font-weight: 800;
	margin: 2px 0 4px;
	text-align: center;
}

.bf-tc-scenario__situation {
	font-size: 12.5px;
	line-height: 1.5;
	color: #333;
	margin: 0 0 4px;
	text-align: center;
}

/* ---- Court board (SVG) ---- */

.bf-tc-court-wrap {
	max-width: 220px;
	margin: 0 auto 10px;
}

.bf-tc-court-wrap svg {
	width: 100%;
	height: auto;
	display: block;
	/* v0.4.0-rc Court Design Refresh: 既存の汎用オレンジ寄りウッドから、
	   Basketball Freakのブランドトーンに寄せて少し深みのあるウッドへ。 */
	background: #a9683f;
	border-radius: 8px;
}

.bf-tc-court-line {
	fill: none;
	/* 純白のまま維持（視認性最優先。項番9で「背景に埋もれないが目立ちすぎない」
	   と指定されているが、線の可読性を落とすと戦術図としての本質を損なうため）。 */
	stroke: #fff;
	stroke-width: 0.8;
}

/*
 * v0.4.0-rc Court Design Refresh: Offense/Defenseの色をBasketball Freakの
 * 既存ブランドトークン（docs/decisions.md `--bf-league-red`/`--bf-league-blue`、
 * bf-header-nav/bf-home-hero等で既に使われている#C8102E赤・#17408B紺）へ統一。
 * 「offenseは暖色系 or ブランドメイン色、defenseは寒色系 or 中立ダーク系」
 * （項番9）を満たしつつ、赤×紺は色覚多様性の観点でも識別しやすい組み合わせ。
 */
.bf-tc-court-marker-offense {
	fill: #c8102e;
	stroke: #fff;
	stroke-width: 0.6;
}

.bf-tc-court-marker-defense {
	fill: #17408b;
	stroke: #fff;
	stroke-width: 0.6;
}

.bf-tc-court-marker-label {
	/* v0.3.5-rc: O1〜O5/X1〜X5（2文字）からA〜E/1〜5（1文字）表示へ変更した際、
	   円の中でより大きく・くっきり読めるようfont-sizeを引き上げた
	   （4.2px→5.6px、半径4.5のマーカー内に収まる範囲で最大化）。 */
	fill: #fff;
	font-size: 5.6px;
	font-weight: 800;
	text-anchor: middle;
	dominant-baseline: central;
}

.bf-tc-court-ball {
	/* v0.4.0-rc: offense(赤)・defense(紺)のどちらとも被らない、視認性最優先の
	   ゴールドアクセント（項番9「ball：高視認アクセント色」）。v0.5.1-rc項番7:
	   半径をJS側で1.6→2.6へ拡大し、ball handlerマーカーに埋もれないよう
	   outlineを太くした。 */
	fill: #f5a623;
	stroke: #1a1a1a;
	stroke-width: 0.6;
}

/*
 * v0.4.0-rc Court Design Refresh〜v0.5.1-rcワードマーク全面刷新: Basketball
 * Freakブランド表記（項番8）。ロゴ画像資産がrepo/plugin内に見つからな
 * かったため、新規外部フォント・新規画像資産は追加しない。
 *
 * v0.5.1-rc: 実機QAで「筆記体（cursive）が格好悪い・結婚式の招待状風」との
 * フィードバックを受け、方向性を変更した——手書き風の筆記体フォントは
 * 一切使わず、(1) 太いsans-serif（Arial/Helvetica、新規依存なし）、
 * (2) font-style:italicではなくtransform:skewX()による一定角度の傾き
 * （端末ごとの疑似イタリック品質のばらつきを避けるため）、(3) 字間を
 * 詰めて文字がつながって見えるようにする、(4) ベースライン側にのみ
 * 下線スウッシュを添える、という「太字・スラント・タイト字間」の
 * スポーツロゴタイプ的な構成にした。プレー内容・マーカー・ボール・
 * 判断ポイントを一切邪魔しないよう、常に低opacity・pointer-events無効。
 */
.bf-tc-court-brand-center-text {
	fill: rgba(23, 64, 139, 0.16);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: -0.045em;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
	transform-box: fill-box;
	transform-origin: center;
	transform: skewX(-10deg);
}

.bf-tc-court-brand-baseline-wordmark {
	fill: #17408b;
	opacity: 0.78;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 4.8px;
	font-weight: 900;
	letter-spacing: -0.03em;
	text-anchor: middle;
	pointer-events: none;
	transform-box: fill-box;
	transform-origin: center;
	transform: skewX(-10deg);
}

.bf-tc-court-brand-baseline-swoosh {
	fill: none;
	stroke: #17408b;
	stroke-width: 0.45;
	opacity: 0.45;
	stroke-linecap: round;
	pointer-events: none;
}

.bf-tc-court-brand-baseline-text {
	fill: #17408b;
	opacity: 0.55;
	font-size: 2.1px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-anchor: middle;
	pointer-events: none;
}

/* ---- Choices ---- */

.bf-tc-choices {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 10px;
}

.bf-tc-choice {
	display: block;
	width: 100%;
	text-align: left;
	border: 2px solid #ddd;
	border-radius: 10px;
	background: #fff;
	padding: 9px 12px;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.bf-tc-choice:active {
	transform: scale(0.99);
}

.bf-tc-choice.is-disabled {
	cursor: default;
	opacity: 0.6;
}

.bf-tc-choice.is-picked {
	border-color: #1a56db;
	background: #eaf1fd;
}

/* grade別の枠線色（回答後のみ表示） */
.bf-tc-choice.grade-best.is-picked { border-color: #1a7f37; background: #eafaf0; }
.bf-tc-choice.grade-good.is-picked { border-color: #1a56db; background: #eaf1fd; }
.bf-tc-choice.grade-acceptable.is-picked { border-color: #b8860b; background: #fdf6e3; }
.bf-tc-choice.grade-poor.is-picked { border-color: #c62828; background: #fdecea; }

/* ---- 回答直後の短いフィードバック（長文解説は結果画面へ） ---- */

.bf-tc-feedback {
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 6px;
}

.bf-tc-feedback.grade-best { background: #eafaf0; border: 2px solid #1a7f37; }
.bf-tc-feedback.grade-good { background: #eaf1fd; border: 2px solid #1a56db; }
.bf-tc-feedback.grade-acceptable { background: #fdf6e3; border: 2px solid #b8860b; }
.bf-tc-feedback.grade-poor { background: #fdecea; border: 2px solid #c62828; }

.bf-tc-grade-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 2px 9px;
	border-radius: 999px;
	color: #fff;
	margin-bottom: 4px;
}

.bf-tc-grade-badge.grade-best { background: #1a7f37; }
.bf-tc-grade-badge.grade-good { background: #1a56db; }
.bf-tc-grade-badge.grade-acceptable { background: #b8860b; }
.bf-tc-grade-badge.grade-poor { background: #c62828; }

.bf-tc-feedback__short {
	font-size: 12.5px;
	line-height: 1.5;
	margin: 0;
}

.bf-tc-auto-advance-note {
	text-align: center;
	font-size: 11px;
	color: #888;
	margin: 0;
}

/* ---- Final result screen ---- */

.bf-tc-result {
	text-align: center;
}

.bf-tc-result-card {
	border: 2px solid #c2410c;
	border-radius: 14px;
	padding: 20px 16px;
	margin: 10px 0 16px;
	background: #fff;
}

.bf-tc-result-card__brand {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #666;
	margin: 0 0 10px;
}

.bf-tc-result-iq {
	margin: 0 0 2px;
}

.bf-tc-result-iq__num {
	font-size: 48px;
	font-weight: 800;
	color: #c2410c;
	line-height: 1;
	margin-right: 6px;
}

.bf-tc-result-iq__label {
	font-size: 13px;
	font-weight: 700;
	color: #666;
}

.bf-tc-result-rank {
	font-size: 18px;
	font-weight: 800;
	color: #1a7f37;
	margin: 0 0 14px;
}

.bf-tc-result-counts {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	text-align: left;
}

.bf-tc-result-counts li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px dashed #eee;
	font-size: 14px;
	font-weight: 600;
}

.bf-tc-result-categories {
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
	border-top: 1px solid #eee;
	text-align: left;
}

.bf-tc-result-categories li {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

.bf-tc-result-categories__grade {
	color: #c2410c;
	font-weight: 800;
}

/* ---- Share ---- */

.bf-tc-share {
	margin-bottom: 16px;
}

.bf-tc-share__label {
	font-size: 12px;
	font-weight: 700;
	color: #666;
	margin: 0 0 8px;
}

.bf-tc-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.bf-tc-btn--share {
	border: none;
	border-radius: 999px;
	padding: 9px 16px;
	font-weight: 700;
	font-size: 12.5px;
	cursor: pointer;
	color: #fff;
}

.bf-tc-btn--x { background: #000; }
.bf-tc-btn--line { background: #06c755; }
.bf-tc-btn--native { background: #1a56db; }
.bf-tc-btn--copy { background: #666; }

/* ---- Review ---- */

.bf-tc-review-toggle {
	display: block;
	width: 100%;
	background: #f5f5f5;
	border: none;
	border-radius: 10px;
	padding: 10px;
	font-weight: 700;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	margin-bottom: 12px;
}

.bf-tc-review-list {
	text-align: left;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bf-tc-review-item {
	border-radius: 10px;
	padding: 12px;
	border: 1px solid #eee;
}

.bf-tc-review-item.grade-best { border-left: 4px solid #1a7f37; }
.bf-tc-review-item.grade-good { border-left: 4px solid #1a56db; }
.bf-tc-review-item.grade-acceptable { border-left: 4px solid #b8860b; }
.bf-tc-review-item.grade-poor { border-left: 4px solid #c62828; }

.bf-tc-review-item__q {
	font-size: 13px;
	font-weight: 800;
	margin: 0 0 4px;
}

.bf-tc-review-item__situation {
	font-size: 12px;
	color: #555;
	margin: 0 0 6px;
	line-height: 1.5;
}

.bf-tc-review-item__picked {
	font-size: 12.5px;
	font-weight: 700;
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.bf-tc-review-item__explanation {
	font-size: 12.5px;
	line-height: 1.6;
	color: #333;
	margin: 0 0 4px;
}

.bf-tc-review-item__coaching-note {
	font-size: 11.5px;
	color: #666;
	margin: 0;
}

/* ---- Actions ---- */

.bf-tc-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.bf-tc-actions a,
.bf-tc-actions button {
	display: inline-block;
	border: none;
	border-radius: 999px;
	padding: 12px 24px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
}

.bf-tc-actions .bf-tc-btn--primary {
	background: #1a7f37;
	color: #fff;
}

.bf-tc-actions .bf-tc-btn--secondary {
	background: #f0f0f0;
	color: #1a1a1a;
}

/* ---- 極小幅（320px）でもはみ出さないための追加調整 ---- */
@media (max-width: 360px) {
	.bf-tc { padding: 10px 12px 32px; }
	.bf-tc-court-wrap { max-width: 190px; }
	.bf-tc-choice { padding: 8px 10px; font-size: 12px; }
	.bf-tc-result-iq__num { font-size: 40px; }
}