/**
 * リーグ戦 星取表・順位表ジェネレーター - 専用スタイル
 * 共有クラス（.tool-card, .input-section, .btn-* 等）を再利用し、
 * 独自UIのみ rrs- 接頭辞で定義する。
 */

/* ====================
   勝ち点設定エリア
   ==================== */
.rrs-settings {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

.rrs-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rrs-field label {
	font-size: 12px;
	color: var(--color-text-muted);
}

.rrs-field select,
.rrs-point-input {
	height: 38px;
	padding: 0 10px;
	font-family: inherit;
	font-size: 14px;
	color: var(--color-text);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.rrs-field select:focus,
.rrs-point-input:focus {
	outline: none;
	border-color: var(--color-primary);
}

.rrs-point-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rrs-point-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.rrs-point-cell .rrs-point-label {
	font-size: 12px;
	color: var(--color-text-muted);
}

.rrs-point-input {
	width: 56px;
	text-align: center;
}

/* 得点モードトグル */
.rrs-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color-text);
	cursor: pointer;
}

.rrs-toggle input {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* ====================
   空状態
   ==================== */
.rrs-empty {
	padding: 36px 20px;
	text-align: center;
	font-size: 14px;
	color: var(--color-text-muted);
}

/* ====================
   結果エリア共通
   ==================== */
.rrs-result-block {
	margin-top: 24px;
}

.rrs-block-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin: 0 0 6px;
}

.rrs-block-desc {
	font-size: 12px;
	color: var(--color-text-muted);
	margin: 0 0 12px;
	line-height: 1.7;
}

/* ====================
   星取表（マトリクス）
   ==================== */
.rrs-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.rrs-matrix {
	border-collapse: collapse;
	width: auto;
	min-width: 100%;
	font-size: 13px;
}

.rrs-matrix th,
.rrs-matrix td {
	border: 1px solid var(--color-border);
	text-align: center;
	white-space: nowrap;
	padding: 0;
}

.rrs-matrix th {
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	padding: 8px 10px;
}

.rrs-matrix th.rrs-corner {
	background: var(--color-primary-dark);
}

.rrs-matrix td.rrs-row-head {
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	text-align: left;
	padding: 8px 12px;
	white-space: nowrap;
}

.rrs-row-no {
	opacity: 0.75;
	margin-right: 4px;
}

.rrs-matrix td.rrs-diagonal {
	background: var(--color-bg);
	color: var(--color-text-muted);
	padding: 8px 12px;
}

.rrs-matrix td.rrs-match-cell {
	background: var(--color-white);
	vertical-align: middle;
	padding: 4px;
}

/* 結果トグルボタン（セル内） */
.rrs-mark {
	display: block;
	width: 100%;
	min-width: 40px;
	height: 36px;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-text);
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.rrs-mark.is-none {
	color: var(--color-border);
}

.rrs-mark.is-none::after {
	content: '＋';
	font-size: 13px;
}

.rrs-mark.is-win {
	color: var(--color-primary);
	background: rgba(61, 90, 128, 0.08);
}

.rrs-mark.is-lose {
	color: var(--color-accent);
	background: rgba(224, 120, 80, 0.08);
}

.rrs-mark.is-draw {
	color: var(--color-text-muted);
	background: var(--color-bg);
}

.rrs-mark:hover {
	background: rgba(61, 90, 128, 0.14);
}

/* 得点入力（得点モード） */
.rrs-score-input {
	display: block;
	width: 100%;
	min-width: 40px;
	margin-top: 2px;
	padding: 3px 2px;
	font-family: inherit;
	font-size: 12px;
	text-align: center;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.rrs-score-input:focus {
	outline: none;
	border-color: var(--color-primary);
}

/* 凡例 */
.rrs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
	font-size: 12px;
	color: var(--color-text-secondary);
}

.rrs-legend span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rrs-legend b {
	font-family: var(--font-display);
	font-size: 15px;
}

.rrs-legend .rrs-lg-win { color: var(--color-primary); }
.rrs-legend .rrs-lg-lose { color: var(--color-accent); }
.rrs-legend .rrs-lg-draw { color: var(--color-text-muted); }

/* ====================
   順位表
   ==================== */
.rrs-standings {
	border-collapse: collapse;
	width: 100%;
	min-width: 480px;
	font-size: 13px;
}

.rrs-standings th,
.rrs-standings td {
	border: 1px solid var(--color-border);
	padding: 8px 8px;
	text-align: center;
	white-space: nowrap;
}

.rrs-standings th {
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
}

.rrs-standings td.rrs-name-col,
.rrs-standings th.rrs-name-col {
	text-align: left;
}

.rrs-standings td.rrs-rank-cell {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-text-secondary);
}

.rrs-standings td.rrs-points-cell {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-primary-dark);
}

.rrs-standings tr.rrs-rank-first td {
	background: rgba(224, 120, 80, 0.08);
}

.rrs-standings tr.rrs-rank-first td.rrs-rank-cell {
	color: var(--color-accent);
}

.rrs-standings tbody tr:nth-child(even) td:not(.rrs-name-col):not(.rrs-rank-cell):not(.rrs-points-cell) {
	background: var(--color-bg);
}

/* タイブレーク注記 */
.rrs-tiebreak-note {
	margin-top: 10px;
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.7;
}

/* ====================
   操作ボタン
   ==================== */
.rrs-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 4px;
}

/* ====================
   レスポンシブ
   ==================== */
@media (max-width: 600px) {
	.rrs-settings {
		gap: 12px;
	}

	.rrs-point-group {
		gap: 6px;
	}

	.rrs-point-input {
		width: 48px;
	}

	.rrs-mark {
		min-width: 34px;
		height: 32px;
		font-size: 16px;
	}

	.rrs-actions {
		flex-direction: column;
	}

	.rrs-actions .btn-primary,
	.rrs-actions .btn-secondary {
		width: 100%;
	}
}

/* ====================
   印刷（表だけ残す）
   ==================== */
@media print {
	.header,
	.footer,
	.breadcrumb,
	.page-description,
	.stats-section,
	.input-section,
	.options-section,
	.rrs-settings,
	.rrs-block-desc,
	.action-section,
	.rrs-actions,
	.rrs-legend,
	.adsense-wrapper,
	.card {
		display: none !important;
	}

	/* 結果テーブルのラッパーは input-section クラスだが、印刷では表示する */
	#rrsResultSections {
		display: block !important;
	}

	.tool-card {
		border: none;
	}

	.page-title {
		font-size: 18px;
		margin-bottom: 12px;
	}

	.rrs-table-wrapper {
		overflow: visible;
		border: none;
	}

	.rrs-matrix,
	.rrs-standings {
		page-break-inside: auto;
	}

	.rrs-mark {
		color: #000 !important;
		background: none !important;
	}

	.rrs-mark.is-none::after {
		content: '';
	}

	.rrs-score-input {
		border: none;
		background: none;
	}
}