/* ========================================
   Bari Character Cards - Complete CSS
   Version: 2.0.0
   ======================================== */

/* カード全体の見た目 */
.character-card {
	max-width: 400px;
	background: linear-gradient(to bottom, #1c1c1c, #2b2b2b);
	border: 2px solid #666;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
	padding: 0.5em;
	margin: 1em auto;
	color: #fff;
	font-family: "Segoe UI", "Meiryo", sans-serif;
	font-size: 1em;
}

/* テーブル */
.character-table {
	width: 100%;
	min-width: 280px;
	border-collapse: collapse;
}

.character-table th,
.character-table td {
	border: 1px solid #444;
	padding: 6px;
	text-align: center;
	color: #ccc;
}

/* 名前欄 */
.name-cell {
	text-align: left;
	padding-left: 0.5em;
}

.name-cell .kana {
	font-size: 0.6em;
	color: #ccc;
}

.name-cell .name {
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
}

/* 名将・低レア用スタイル */
.character-card.meisho .name-cell .name,
.character-card.meisho .name-cell .kana {
	color: #ffcc00;
}
.character-card.low-rare .name-cell .kana {
	color: #bbb;
}

/* ステータスヘッダー */
.stat-header {
	background-color: #333;
	font-weight: bold;
}

span.meisho, span.season {
	color: #ffcc00;
}

/* ステータスの値 */
.stat-values td {
	font-weight: bold;
}

/* コンボ欄の色分け */
.status-row td {
	font-weight: bold;
	color: #fff;
}

.status-tag {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	font-size: 0.85em !important;
}

.status-tag.float {
	background-color: #1e88e5;
}
.status-tag.knockdown {
	background-color: #e53935;
}
.status-tag.kb {
	background-color: #8e24aa;
}
.status-tag.none {
	background-color: #000000;
}

/* 名将・シーズン表示 */
.meisho, .season {
	font-size: 0.75em;
	display: block;
	color: #aaa;
}

/* 複数カード用のグリッド */
.character-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	padding: 1em;
}

/* Core Layout */
.character-list-grid { 
	display: grid; 
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
	gap: 12px;
	margin: 1rem 0;
}

/* 名将専用 */
.character-card.meisho {
	border: 4px solid #ffcc00;
	background-color: #1e1a12;
	box-shadow: 0 0 12px rgba(255, 204, 0, 0.6);
	font-size: 1em;
}

/* レア度による文字色 */
.character-card.meisho .rare-cell {
	color: #ffcc00;
}
.character-card.low-rare .name-cell .name,
.character-card.low-rare .name-cell .kana,
.character-card.low-rare .rare-cell {
	color: #888888;
}

/* 所属色分け */
.shozoku-shoku { background-color: #2e7d32; color: #fff; }
.shozoku-gi    { background-color: #1565c0; color: #fff; }
.shozoku-go    { background-color: #c62828; color: #fff; }
.shozoku-gun   { background-color: #6a1b9a; color: #fff; }
.shozoku-ya    { background-color: #43464B; color: #fff; }

/* Character Image (for correct structure) */
.character-image {
	width: 104px !important;
	vertical-align: middle !important;
	text-align: center !important;
}

.character-image img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid #444;
}

/* Rare Cell */
.rare-cell {
	text-align: center !important;
	vertical-align: middle !important;
}

.character-stars {
	color: #fbbf24;
	font-weight: bold;
	font-size: 1.1em;
}

.display-level {
	margin-top: 4px;
	font-size: 0.9em;
	color: #ccc;
}

.current-lv {
	font-weight: bold;
	color: #fff;
}

/* Shozoku Cell Updates */
.shozoku-蜀, .shozoku-shoku { background: #c41e3a; color: white; padding: 4px; }
.shozoku-魏, .shozoku-gi { background: #1e3a8a; color: white; padding: 4px; }
.shozoku-呉, .shozoku-go { background: #059669; color: white; padding: 4px; }
.shozoku-群, .shozoku-gun { background: #7c2d12; color: white; padding: 4px; }
.shozoku-野, .shozoku-ya { background: #374151; color: white; padding: 4px; }

/* Stat Values with colored backgrounds */
.stat-cell .stat-value {
	font-size: 1.1em;
	font-weight: bold;
}

.stat-cell .stat-max {
	font-size: 0.8em;
	opacity: 0.8;
}

/* Waza Cell */
.waza-cell {
	text-align: left !important;
	padding: 8px !important;
}

/* フィルター */
.character-filter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1em;
	padding: 1.5em;
	background-color: #f9f9f9;
	border-radius: 10px;
	font-size: 14px;
	align-items: start;
}
.character-filter label {
	display: block;
	font-weight: bold;
}
.character-filter select,
.character-filter input[type="number"] {
	width: 100%;
	padding: 4px 8px;
	margin-top: 4px;
	font-size: 14px;
	box-sizing: border-box;
}

/* 所属 */
.shozoku-group {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1em;
}
.shozoku-group span {
	font-weight: bold;
	min-width: 3em;
}
.shozoku-option {
	background-color: #e0e0e0;
	padding: 6px 10px;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
}
.shozoku-option input {
	margin-right: 4px;
}

/* 特殊技フィルター */
.waza-filters {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 1em;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #fff;
	margin-top: 1em;
}
.waza-filters strong {
	width: 100%;
	margin-bottom: 0.5em;
}

/* レベル・凸・レア度選択ボタン共通 */
.level-selector, .totsu-selector, .min-rare-filter {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.5em;
	flex-wrap: wrap;
}
.level-selector label,
.totsu-selector label,
.min-rare-filter label {
	font-weight: bold;
}
/* 共通ボタンスタイル */
.totsu-btn,
.global-lv-btn,
.min-rare-btn {
	background-color: #ddd;
	border: 1px solid #aaa;
	border-radius: 4px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 14px;
}

.totsu-btn:hover,
.global-lv-btn:hover,
.min-rare-btn:hover {
	background-color: #bbb;
}

.totsu-btn.active,
.global-lv-btn.active,
.min-rare-btn.active {
	background-color: #444;
	color: #fff;
	font-weight: bold;
	border-color: #222;
}

/* ステータス最大値 */
.stat-max {
	font-size: 0.65em;
	color: #555;
	display: block;
	margin-top: 2px;
	line-height: 1;
}

/* 技タグ */
.waza-tag {
	display: inline-block;
	background-color: #fff;
	color: #c00;
	font-weight: bold;
	border: 1px solid #c00;
	border-radius: 4px;
	padding: 2px 6px;
	margin: 2px 4px 2px 0;
	font-size: 0.8em;
}

/* 索引 */
.character-index a {
	font-size: 0.85em;
	text-decoration: underline;
	color: #ccc;
}
.character-index a:hover {
	color: #fff;
}

/* Index Section */
#bcc-index.character-index { 
	display: flex; 
	flex-wrap: wrap; 
	gap: .4em .6em; 
	margin: .6em 0 1em 0;
	padding: .5em 0;
}

.character-index-link { 
	font-size: .9em; 
	padding: .2em .5em; 
	border-radius: 999px; 
	background: #2b2b2b; 
	border: 1px solid #444; 
	color: #fff; 
	text-decoration: none;
	transition: all 0.2s ease;
}

.character-index-link:hover { 
	background: #3a3a3a;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Filter Section */
.bcc-filter { 
	background: linear-gradient(135deg, #202020, #1a1a1a); 
	border: 1px solid #3a3a3a; 
	border-radius: 12px; 
	padding: .8em; 
	margin: .8em 0; 
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.bcc-filter .bcc-row { 
	display: flex; 
	flex-wrap: wrap; 
	gap: .6em .8em; 
	align-items: center; 
	margin: .4em 0;
}

.bcc-filter label { 
	font-weight: 600;
	color: #e5e7eb;
}

.bcc-filter .waza-check { 
	font-weight: 400; 
	border: 1px solid #3a3a3a; 
	padding: .2em .4em; 
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.2s ease;
}

.bcc-filter .waza-check:hover {
	background: rgba(255, 255, 255, 0.1);
}

.bcc-filter select,
.bcc-filter input[type="number"],
.bcc-filter input[type="text"] {
	background: #2a2a2a;
	border: 1px solid #555;
	color: #fff;
	padding: .3em .5em;
	border-radius: 4px;
}

/* Buttons */
.bcc-submit { 
	background: linear-gradient(135deg, #38b48b, #2d8f6f); 
	border: none; 
	color: white; 
	padding: .5em .9em; 
	border-radius: 10px; 
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(56, 180, 139, 0.3);
}

.bcc-submit:hover {
	background: linear-gradient(135deg, #2d8f6f, #26735c);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(56, 180, 139, 0.4);
}

#bcc-reset { 
	background: linear-gradient(135deg, #444, #333); 
	color: #fff; 
	border: 1px solid #666; 
	padding: .5em .9em; 
	border-radius: 10px; 
	cursor: pointer;
	transition: all 0.2s ease;
}

#bcc-reset:hover { 
	background: linear-gradient(135deg, #555, #444);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Loading & Error States */
.bcc-loading { 
	opacity: .5; 
	pointer-events: none;
}

.bcc-loading-spinner {
	text-align: center;
	padding: 2rem;
	color: #9ca3af;
	font-size: 1.1rem;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	margin: 1rem 0;
}

.bcc-loading-spinner:before {
	content: "⟳";
	display: inline-block;
	animation: bcc-spin 1s linear infinite;
	margin-right: 0.5rem;
	font-size: 1.5rem;
	color: #6366f1;
}

@keyframes bcc-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.bcc-error {
	background: linear-gradient(135deg, #ef4444, #dc2626);
	color: white;
	padding: 1rem 1.2rem;
	border-radius: 8px;
	margin: 1rem 0;
	text-align: center;
	border: 1px solid #b91c1c;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
	position: relative;
}

.bcc-error::before {
	content: "⚠";
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
}

.bcc-error p {
	margin: 0;
	font-weight: 500;
	padding-left: 1.5rem;
}

.totsu-stars {
	text-align: center;
	margin-bottom: 0.2em;
}

.display-level {
	text-align: center;
	font-size: 0.7em;
	color: #ccc;
	margin-bottom: 0.5em;
}

/* モバイル */
@media (max-width: 600px) {
	.character-filter {
		grid-template-columns: 1fr;
	}
	.shozoku-group,
	.waza-filters {
		grid-column: 1 / -1;
	}
	
	.character-list-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	
	.character-card {
		max-width: 100%;
	}
	
	.bcc-filter .bcc-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.level-selector, 
	.totsu-selector {
		justify-content: flex-start;
		gap: 0.3rem;
	}
	
	.level-selector .global-lv-btn, 
	.totsu-selector .totsu-btn {
		padding: 0.3em 0.5em;
		font-size: 0.9em;
	}
	
	#bcc-index.character-index {
		gap: 0.3rem 0.4rem;
	}
	
	.character-index-link {
		font-size: 0.8rem;
		padding: 0.15em 0.4em;
	}
}

/* モバイル：カードは横50%・縦は内容にフィット */
@media (max-width: 768px) {
	
	/* 親が grid の minmax(300px,1fr) で幅を上書きしないよう、モバイル時は柔らか */
	.character-list,
	#gattai-ranking-result,
	.combo-ranking-set-cards {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0.5em;
		justify-content: flex-start;
	}
	
	/* テーブルが横幅を押し広げないように（← 280pxの制約を解除） */
	.character-table {
		min-width: 0 !important;
		width: 100% !important;
		table-layout: fixed;
		word-break: break-word;
	}
	
	/* ここが本題：幅は50%、高さは auto（＝中身にフィット） */
	.character-card {
		box-sizing: border-box !important;
		
		/* 横幅を常に50%に固定（ビューポート基準） */
		flex: 0 0 50vw !important;
		width: 50vw !important;
		min-width: 140px !important;
		max-width: auto !important;
		
		/* 縦は内容に合わせて縮む */
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		
		/* 余白は軽めに */
		margin: 0 0.25em 0.5em 0.25em !important;
		
		/* 均等伸びを防ぐため、flexレイアウトは使わない */
		display: block !important;
		overflow: visible !important;
	}
	
	/* 以前の指定でテーブルを伸ばす flex が残っていた場合の打ち消し */
	.character-card .character-table {
		flex: 0 0 auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}
}

@media (max-width: 768px) {
	.character-card .character-table {
		font-size: 80% !important;      /* 全体フォントサイズを80%に縮小 */
		white-space: nowrap !important; /* 改行なし */
		min-width: 140px !important;    /* 前回指定の最小幅 */
	}
	
	/* セルごとに改行なし＆縮小を確実に適用 */
	.character-card .character-table th,
	.character-card .character-table td {
		font-size: 90% !important;
		white-space: nowrap !important;
		padding: 4px !important;        /* 狭くなった分パディングも調整 */
	}
	
	.character-image {
		width: 80px !important;
	}
	
	.character-image img {
		width: 76px;
		height: 76px;
	}
}

/* Accessibility Improvements */
.character-card:focus-within {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
}

.bcc-submit:focus,
#bcc-reset:focus,
.global-lv-btn:focus,
.totsu-btn:focus {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.character-card {
		border-width: 3px;
	}
	
	.status-tag,
	.waza-tag {
		border-width: 2px;
	}
}

/* Print Styles */
@media print {
	.bcc-filter,
	.character-filter,
	#bcc-index {
		display: none;
	}
	
	.character-list-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	
	.character-card {
		background: white;
		color: black;
		border: 1px solid #ccc;
		box-shadow: none;
	}
}

/* Anchor style for clickable waza */
a.waza-tag{ text-decoration:none; display:inline-block; }
a.waza-tag:hover{ filter:brightness(1.08); }

/* ========================================
   Mobile Responsive Styles
   ======================================== */
@media screen and (max-width: 782px) {
	/* フィルターエリアをコンパクトに */
	.bcc-wrapper {
		padding: 0;
		margin: 0;
	}

	.bcc-filter {
		background: #f5f5f5;
		padding: 10px;
		margin: 0 -15px;
		border: none;
		border-top: 2px solid #2271b1;
		border-bottom: 2px solid #2271b1;
		border-radius: 0;
	}

	.bcc-filter .bcc-row {
		margin: 10px 0;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}

	.bcc-filter .bcc-row:last-child {
		border-bottom: none;
	}

	.bcc-filter label {
		display: block;
		font-weight: 600;
		margin-bottom: 8px;
	}

	.bcc-filter input[type="text"],
	.bcc-filter select {
		width: 100%;
		padding: 8px;
		font-size: 14px;
	}

	.bcc-filter button {
		padding: 8px 12px;
		font-size: 13px;
	}

	/* 索引エリアを非表示 */
	#bcc-index {
		display: none;
	}

	/* レベル・突破セレクターをコンパクトに */
	.character-filter {
		padding: 10px;
		margin: 0 -15px;
		background: #fff;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

	.level-selector,
	.totsu-selector {
		margin: 8px 0;
	}

	.level-selector label,
	.totsu-selector label {
		display: block;
		margin-bottom: 5px;
		font-weight: 600;
	}

	.global-lv-btn,
	.totsu-btn {
		padding: 6px 10px;
		font-size: 12px;
		margin: 2px;
	}

	/* カードグリッドを4列に */
	.character-list-grid {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 8px !important;
		padding: 10px 0;
	}

	/* カードをコンパクトに */
	.character-card {
		max-width: none;
		margin: 0;
		padding: 0.3em;
		font-size: 0.75em;
	}

	.character-table th,
	.character-table td {
		padding: 3px;
		font-size: 0.85em;
	}

	.name-cell .name {
		font-size: 1em;
	}

	.name-cell .kana {
		font-size: 0.7em;
	}

	/* さらに小さい画面では3列 */
	@media screen and (max-width: 480px) {
		.character-list-grid {
			grid-template-columns: repeat(3, 1fr) !important;
		}
	}
}