/* ============================================
   BASE STYLES (site-wide theme consistency)
============================================ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
	background: linear-gradient(145deg, var(--green-mint) 0%, var(--green-light) 100%);
	color: var(--text-dark);
}

/* screen container */
.screen {
	display: none;
	min-height: 100vh;
}

.screen.active {
	display: block;
}

.screen-container {
	min-height: 100vh;
	padding: 2rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

:root {
	/* Colors */
	--background: #fdfdf8;
	--foreground: #2d3319;
	--green-forest: #1e3a0f;
	--green-mid: #2d5016;
	--green-light: #d4e8c8;
	--green-mint: #e8ede0;
	--green-deep: #1e3a0f;
	--green-soft: #4b7c2b;
	--yellow-warm: #fbbf24;
	--yellow-bright: #fde047;
	--health: #22c55e;
	--health-green: #22c55e;
	--attack: #f59e0b;
	--attack-amber: #f59e0b;
	--defense-gray: #78716c;
	--danger: #dc2626;
	--danger-red: #dc2626;
	--warning-orange: #f59e0b;
	--white: #ffffff;
	--defeat-red: #b91c1c;
	--victory-gold: #eab308;
	--text-light: #cbd5b0;
	--text-dark: #2d3319;
	--text-muted: #5d6b3e;
	--border-color: rgba(45, 80, 22, 0.15);
	--card-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.2);
	--glow-victory: 0 0 15px rgba(34, 197, 94, 0.4);
	--glow-defeat: 0 0 12px rgba(220, 38, 38, 0.3);

	/* Spacing */
	--radius: 0.75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
}

.main-content {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem;
}

.topbanner1 {
	background: #fff;
	color: #222;
	padding: 20px;
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.topbanner-pill {
	display: inline-block;  
	background: linear-gradient(145deg, var(--green-mint) 0%, var(--green-light) 100%);
	color: white;  
	padding: 10px 28px;
	margin-top: -2rem; 
	border-radius: 9999px; /* pill */
}


/*  ========================================
	 STATE 1: Initial Screen
	======================================== */

.initial-content {
	max-width: 800px;
	width: 100%;
	text-align: center;
}

.logo-section {
	margin-bottom: 2rem;
}

.logo-text-large {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-top: 0.5rem;
}

.logo-text-small {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.main-title {
	font-size: 3rem;
	font-weight: 700;
	color: var(--green-forest);
	margin-bottom: 1rem;
}

.main-subtitle {
	font-size: 1.25rem;
	color: var(--text-muted);
}

#connect-view {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px; 
	flex-wrap: wrap;
}

.button-section {
	margin: 2rem 0;
}

.btn-primary {
	padding: 1rem 3rem;
	background: linear-gradient(to right, var(--yellow-warm), var(--yellow-bright));
	color: var(--green-forest);
	border: none;
	border-radius: var(--radius-lg);
	font-size: 1.25rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transition: all 0.2s;
}

.btn-primary:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
	transform: scale(1.05);
}

.btn-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-primary:disabled:hover {
	transform: scale(1);
}

.btn-primary.btn-full {
	width: 100%;
}

.btn-primary.btn-wallet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	
	/* force both buttons to be exactly the same size */
	min-width: 220px;
	height: 3.2rem;
	padding: 0 2rem 0 1.5rem;
	margin: 0;
	
	background: linear-gradient(to right, var(--yellow-warm), var(--yellow-bright));
	color: var(--green-forest);
	border: none;
	border-radius: var(--radius-lg);
	font-size: 1.15rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transition: all 0.2s;
}

.btn-secondary {
	padding: 0.75rem 2rem;
	background: transparent;
	color: var(--green-mid);
	border: 2px solid var(--green-mid);
	border-radius: var(--radius-lg);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-secondary:hover {
	background: var(--green-mint);
}

.btn-secondary.btn-full {
	width: 100%;
}

.btn-wallet {
	margin: 0px 5px;
}

.btn-primary.btn-wallet img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
}

.nav-links {
	display: flex;
	margin-top: 2rem;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	color: var(--text-muted);
}

.nav-links a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.2s;
}

.nav-links a:hover {
	color: var(--green-mid);
}

.nav-links .separator {
	color: var(--text-light);
}

/*  ========================================
	 STATE 2: Connected Screen - Header
	======================================== */

.top-header {
	background: var(--green-mid);
	color: var(--white);
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-icon {
	font-size: 1.5rem;
}

.header-title {
	font-size: 1.25rem;
	font-weight: 700;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.wallet-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--green-forest);
	padding: 0.5rem 1rem;
	border-radius: var(--radius);
}

.wallet-label {
	font-size: 0.875rem;
	color: var(--green-light);
}

.wallet-address {
	font-family: 'Courier New', monospace;
	font-size: 0.875rem;
}

.btn-icon {
	background: transparent;
	border: none;
	color: var(--yellow-warm);
	font-size: 1.25rem;
	cursor: pointer;
	transition: color 0.2s;
}

.btn-icon:hover {
	color: var(--yellow-bright);
}

/*  ========================================
	 STATE 2: Farm Section
	======================================== */

.farm-section {
	margin-bottom: 2rem;
}

.farm-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.farm-icon {
	font-size: 2.5rem;
}

.farm-name {
	font-size: 2rem;
	font-weight: 700;
	color: var(--green-forest);
}

.farm-subtitle {
	color: var(--text-muted);
}

/* Fighter Cards */
.fighters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.fighter-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--forest-green);
	transition: border-color 0.2s;
}

.battle-fighter-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--health-green);
	transition: all 0.2s ease-in-out;
	cursor: pointer; 
	position: relative;
}

.battle-fighter-card:hover {
	border-color: var(--yellow-warm);
	border-width: 3px;
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.battle-fighter-card.selected {
	border-color: #2d5016; 
	border-width: 3px;
	background: #fef2f2; 
	box-shadow: 0 0 0 3px rgba(38, 162, 75, 0.2); /* outer glow */
	transform: scale(1.02);
	z-index: 10;
}

.enemy-fighter {
	background: var(--white);border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease-in-out;
	cursor: pointer; 
	position: relative;
}

.enemy-fighter:hover {
	border-color: var(--yellow-warm);
	border-width: 3px;
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.enemy-fighter.selected, 
.replay-defender-card.selected {
	border-color: #ef4444; 
	border-width: 3px !important;
	background: #fef2f2; 
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); 
	transform: scale(1.02);
	z-index: 10;
}

.fighter-image {
	aspect-ratio: 1;
	background: linear-gradient(135deg, var(--green-light), var(--green-mint));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	width: 100%;
}

.fighter-info {
	padding: 0.7rem;
}

.fighter-name {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--green-forest);
	text-align: center;
	margin-bottom: 0.75rem;
}

.fighter-stats {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.stat-row {
	display: flex;
	/* justify-content: space-between; */
	gap: 0.3rem;
	/* margin: 0.6rem 0; */
}

.stat-chip {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.2rem 0.3rem;
	border-radius: 30px;
	text-align: center;
	flex: 1;
	background: #f4f2ea;
}
.stat-chip.health { background: #e1f3e1; color: #2c6e2c; }
.stat-chip.attack { background: #fff0df; color: #ba0808; margin: 0rem 0.1rem; }
.stat-chip.defense { background: #ecebe4; color: #5a584b; }

.progress-bar {
	height: 6px;
	background: #e0ddd2;
	border-radius: 8px;
	margin-top: 4px;
	overflow: hidden;
}
.progress-fill {
	height: 6px;
	border-radius: 8px;
	width: 70%;
	background: var(--health-green);
}

.stat-label {
	color: var(--text-muted);
}


/* Farm Totals */
.farm-totals {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 1.1rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid #84cc16;
}

.totals-title {
	font-weight: 700;
	color: var(--green-forest);
	margin-bottom: 0.5rem;
}

.totals-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	text-align: center;
}

.total-value {
	font-size: 2rem;
	font-weight: 700;
}

.total-value.health {
	color: var(--health-green);
}

.total-value.attack {
	color: var(--attack-amber);
}

.total-value.defense {
	color: var(--defense-gray);
}

.total-label {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-top: 0.1rem;
}

/* Select Victim Section */
.select-victim {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 2rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--green-light);
}

.section-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--green-forest);
	margin-bottom: 1.5rem;
}

.select-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-group label {
	color: var(--text-muted);
	font-weight: 500;
}

.form-select {
	width: 100%;
	padding: 0.75rem 1rem;
	background: #f5f5f0;
	border: 2px solid var(--green-light);
	border-radius: var(--radius);
	font-size: 1rem;
	color: var(--foreground);
	cursor: pointer;
	transition: border-color 0.2s;
}

.form-select:focus {
	outline: none;
	border-color: #84cc16;
}

.help-text {
	font-size: 0.875rem;
	color: var(--text-muted);
	text-align: center;
}

/*  ========================================
	 STATE 3: Battle Screen
	======================================== */

.battle-title {
	text-align: center;
	margin-bottom: 2rem;
}

.battle-heading {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--green-forest);
	margin-bottom: 0.5rem;
}

.battle-subheading {
	font-size: 1.25rem;
	color: var(--text-muted);
}

.player-name {
	color: var(--green-mid);
	font-weight: 700;
}

.enemy-name {
	color: var(--danger-red);
	font-weight: 700;
}

/* Two Farm Layout */
.battle-farms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

.battle-farm {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.battle-farm-header {
	border-radius: var(--radius-lg);
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--white);
}

.battle-farm-header.player {
	background: linear-gradient(135deg, var(--green-mid), var(--green-forest));
}

.battle-farm-header.enemy {
	background: linear-gradient(135deg, var(--danger-red), #991b1b);
}

.farm-info-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.farm-icon-large {
	font-size: 2rem;
}

.battle-farm-name {
	font-weight: 700;
	font-size: 1.25rem;
}

.battle-farm-label {
	font-size: 0.875rem;
	opacity: 0.9;
}

.farm-hp {
	text-align: right;
}

.farm-hp-value {
	font-size: 1.5rem;
	font-weight: 700;
}

.farm-hp-value.player {
	color: #84cc16;
}

.farm-hp-value.enemy {
	color: var(--yellow-warm);
}

.farm-hp-label {
	font-size: 0.75rem;
	opacity: 0.9;
}


/* Battle Fighters */
.battle-fighters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
}

.battle-fighter-card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 0.75rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--green-mint);
	transition: border-color 0.2s;
	max-width: 200px;
}

.battle-fighter-card.player-fighter {
	border: 2px solid #84cc16;
}

.battle-fighter-card.defeated {
	opacity: 0.5;
}

.battle-fighter-icon {
	font-size: 2.5rem;
	text-align: center;
	margin-bottom: 0.5rem;
}

.battle-fighter-name {
	font-weight: 700;
	font-size: 0.9rem;
	text-align: center;
	margin-bottom: 0.5rem;
}

.battle-fighter-stats {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.battle-stat-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.7rem;
}

.battle-stat-label {
	color: var(--text-muted);
}

.battle-stat-value {
	font-weight: 700;
}

.battle-defender-card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 0.75rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--green-mint);
	transition: border-color 0.2s;
}

.battle-defender-card.player-fighter {
	border: 2px solid #84cc16;
}

.battle-defender-card.defeated {
	opacity: 0.5;
}

.battle-fighter-card.enemy-fighter {
	border: 2px solid var(--dark-green);
}

.defeated-text {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--danger-red);
	margin-top: 0.5rem;
}

/* Battle Bottom Section */
.battle-bottom {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1.5rem;
}

/* Battle Log */
.battle-log-panel {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--green-light);
}

.log-title {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--green-forest);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.battle-log {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-height: 400px;
	overflow-y: auto;
}

.log-entry {
	font-size: 0.875rem;
	padding: 0.5rem;
	border-radius: var(--radius);
}

.log-entry.neutral {
	background: var(--green-mint);
}

.log-entry.player {
	background: var(--green-light);
}

.log-entry.enemy {
	background: #fee2e2;
}

.log-entry.highlight {
	background: #fef3c7;
	border: 2px solid var(--yellow-warm);
}

.log-time {
	color: var(--text-muted);
}

.log-fighter.player {
	font-weight: 700;
	color: var(--green-mid);
}

.log-fighter.enemy {
	font-weight: 700;
	color: var(--danger-red);
}

.log-damage {
	color: var(--attack-amber);
	font-weight: 700;
}

.defeated-label {
	font-weight: 700;
	color: var(--danger-red);
}

/* Battle Controls */
.battle-controls-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.battle-controls {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--green-light);
}

.controls-title {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--green-forest);
	margin-bottom: 1rem;
}

.battle-options {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--text-muted);
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	cursor: pointer;
}

.round-info {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--green-light);
}

.round-info-title {
	font-weight: 700;
	color: var(--green-forest);
	margin-bottom: 0.75rem;
}

.round-stats {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.round-stat-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
}

.round-stat-label {
	color: var(--text-muted);
}

.round-stat-value {
	font-weight: 700;
}


/* ============================================
   🎉 VICTORY & DEFEAT 
   Glassmorphism + animated badges + battle log
============================================ */

.end-content-modern {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
}

.result-hero {
	text-align: center;
	margin-bottom: 2.5rem;
	position: relative;
}

	.result-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.75rem;
		background: rgba(255,255,245,0.9);
		backdrop-filter: blur(8px);
		padding: 0.75rem 2rem;
		border-radius: 100px;
		box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1);
		border: 2px solid rgba(255,215,0,0.5);
	}

	.result-badge.victory {
		background: linear-gradient(135deg, #fef9e3, #fef3c7);
		border-color: var(--victory-gold);
	}

	.result-badge.defeat {
		background: linear-gradient(135deg, #fff1f0, #ffe4e2);
		border-color: var(--defeat-red);
	}

	.result-icon {
		font-size: 3rem;
		filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.2));
		animation: bounceSoft 0.6s ease;
	}

	.result-title {
		font-size: 2.8rem;
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	.victory .result-title { color: var(--green-deep); text-shadow: 0 2px 5px rgba(234,179,8,0.3); }
	.defeat .result-title { color: #7f1a1a; }

	@keyframes bounceSoft {
		0% { transform: scale(0.8); opacity: 0; }
		80% { transform: scale(1.1); }
		100% { transform: scale(1); }
	}

	/* double column layout: stats summary + battle log */
	.battle-dashboard {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		margin-bottom: 2rem;
	}

	/* summary panel (cards style) */
	.stats-panel {
		background: rgba(255,255,250,0.92);
		backdrop-filter: blur(4px);
		border-radius: 2rem;
		padding: 1.8rem;
		box-shadow: var(--card-shadow);
		border: 1px solid rgba(255,215,0,0.3);
		transition: all 0.2s;
	}

	.vs-farms {
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
		margin-bottom: 1.8rem;
	}

	.farm-card-compact {
		background: white;
		border-radius: 1.5rem;
		padding: 1rem 1.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 5px 10px rgba(0,0,0,0.05);
		border-left: 8px solid;
		transition: transform 0.2s;
	}

	.farm-card-compact.winner-card {
		border-left-color: var(--health);
		background: linear-gradient(95deg, #ffffff, #f1fae9);
	}
	.farm-card-compact.loser-card {
		border-left-color: var(--danger);
		background: linear-gradient(95deg, #ffffff, #fff0f0);
	}

	.farm-meta {
		display: flex;
		align-items: center;
		gap: 0.8rem;
	}
	.farm-icon-big {
		font-size: 2.2rem;
	}
	.farm-name {
		font-weight: 800;
		font-size: 1.3rem;
	}
	.farm-stats-list {
		text-align: right;
	}
	.stat-badge {
		font-size: 0.8rem;
		background: #f3f4eb;
		padding: 0.2rem 0.6rem;
		border-radius: 30px;
		display: inline-block;
		margin-left: 0.4rem;
	}

	.global-stats {
		background: var(--green-mint);
		border-radius: 1.5rem;
		padding: 1rem;
		display: flex;
		justify-content: space-around;
		margin-top: 1rem;
	}

	.summary-stat-label {
		margin-right: 1rem;
	}
	.summary-stat-value {
		font-weight: bold;
	}

	.round-badge {
		text-align: center;
	}
	.round-number {
		font-size: 1.8rem;
		font-weight: 800;
		color: var(--green-mid);
	}

	.mvp-modern {
		margin-top: 1.5rem;
		background: linear-gradient(115deg, #fff6e5, #fff0da);
		border-radius: 1.5rem;
		padding: 1rem 1.2rem;
		display: flex;
		align-items: center;
		gap: 1rem;
		border: 1px solid var(--yellow-warm);
	}

	.mvp-icon {
		font-size: 3rem;
		background: #f5bc70;
		border-radius: 60px;
		padding: 0.4rem;
	}

	/* BATTLE LOG PANEL (scrollable) */
	.log-panel-modern {
		background: #1f2a0ecc;
		backdrop-filter: blur(12px);
		border-radius: 2rem;
		padding: 1.5rem;
		box-shadow: var(--card-shadow);
		border: 1px solid rgba(251,191,36,0.4);
		display: flex;
		flex-direction: column;
	}

	.log-header {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		font-size: 1.5rem;
		font-weight: 700;
		color: #fef9e3;
		border-bottom: 2px dashed var(--yellow-warm);
		padding-bottom: 0.8rem;
		margin-bottom: 1rem;
	}

	.battle-log-scroll {
		max-height: 380px;
		overflow-y: auto;
		padding-right: 0.3rem;
		display: flex;
		flex-direction: column;
		gap: 0.65rem;
	}

	.battle-log-scroll::-webkit-scrollbar {
		width: 5px;
	}
	.battle-log-scroll::-webkit-scrollbar-track {
		background: #3f4a2e;
		border-radius: 10px;
	}
	.battle-log-scroll::-webkit-scrollbar-thumb {
		background: var(--yellow-warm);
		border-radius: 10px;
	}

	.log-entry-card {
		background: rgba(30, 40, 18, 0.75);
		border-left: 4px solid var(--yellow-warm);
		border-radius: 1rem;
		padding: 0.6rem 1rem;
		font-size: 0.85rem;
		color: #fef7e0;
		transition: 0.1s;
	}

	.log-entry-card.player-log {
		border-left-color: #84cc16;
		background: rgba(45, 80, 22, 0.8);
	}
	.log-entry-card.enemy-log {
		border-left-color: #ef4444;
		background: rgba(139, 0, 0, 0.35);
	}

	.log-text {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0.3rem;
	}

	.action-buttons {
		margin-top: 1.8rem;
		margin-bottom: 1.8rem;
		display: flex;
		justify-content: center;
	}

	.btn-primary-glow {
		background: linear-gradient(95deg, var(--yellow-warm), #facc15);
		border: none;
		padding: 1rem 2.5rem;
		font-weight: 800;
		font-size: 1.2rem;
		border-radius: 60px;
		cursor: pointer;
		transition: all 0.2s;
		box-shadow: 0 6px 14px rgba(0,0,0,0.2);
		color: var(--green-deep);
	}

	.btn-primary-glow:hover {
		transform: scale(1.03);
		box-shadow: 0 10px 20px rgba(0,0,0,0.25);
		background: linear-gradient(95deg, #facc15, #fbbf24);
	}

	.stat-elo-highlight {
		font-weight: 800;
		color: var(--attack);
	}
	.stat-winloss-highlight {
		font-weight: 700;
		color: var(--green-mid);
	}

	#playerStatsVictory { 
		display: flex;  
		align-items: center; 
		gap: 0.5rem;         /* space between icon and content */
	}
	.farmProgressDiv {  
		margin-left: auto;   /* push this block to the far right of flex row */
	}

	#playerStatsDefeat { 
		display: flex;  
		align-items: center; 
		gap: 0.5rem;  
	}

/* responsive */
@media (max-width: 900px) {
	.battle-dashboard {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.result-title {
		font-size: 2rem;
	}
}

.defeat-highlight {
	color: var(--danger);
}

.corn-sparkle {
	position: relative;
}

/* hidden class for log filler */
.empty-log-msg {
	text-align: center;
	color: #d1d5bb;
	padding: 1rem;
	font-style: italic;
}

/* ===== New stat rows for player progress panels ===== */
.stat-row-compact {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	margin-top: 0.5rem;
	padding: 0.2rem 0;
	border-bottom: 1px dashed rgba(0,0,0,0.05);
}

.stat-value-highlight {
	font-weight: 800;
	color: var(--yellow-warm);
	background: #777;
	padding: 0.1rem 0.5rem;
	border-radius: 20px;
	/* margin-left: 1rem; */
}

	#defeatElo {
		margin-left: 1rem;
	}

	.stat-row-compact {
		display: flex;
		justify-content: space-between;
		font-size: 0.9rem;
		margin-top: 0.3rem;
	}


/* battle log cards in end screens */
.log-entry-card {
	background: rgba(30, 40, 18, 0.75);
	border-left: 4px solid var(--yellow-warm);
	border-radius: 1rem;
	padding: 0.6rem 1rem;
	font-size: 0.85rem;
	color: #fef7e0;
	transition: 0.1s;
}
.log-entry-card.player-log {
	border-left-color: #84cc16;
	background: rgba(45, 80, 22, 0.8);
}
.log-entry-card.enemy-log {
	border-left-color: #ef4444;
	background: rgba(139, 0, 0, 0.35);
}
.log-text {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.3rem;
}
.battle-log-scroll {
	max-height: 380px;
	overflow-y: auto;
	padding-right: 0.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.empty-log-msg {
	text-align: center;
	color: #d1d5bb;
	padding: 1rem;
	font-style: italic;
}


/*  ========================================
	 Responsive Design
	======================================== */

@media (max-width: 1024px) {
	.battle-bottom {
		grid-template-columns: 1fr;
	}
	.battle-farms {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.main-title {
		font-size: 2rem;
	}
	.main-subtitle {
		font-size: 1rem;
	}
	.fighters-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
	.totals-grid {
		grid-template-columns: 1fr;
	}
	.battle-heading {
		font-size: 1.75rem;
	}
	.battle-fighters {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
	.end-title {
		font-size: 2.5rem;
	}
	.summary-farms {
		grid-template-columns: 1fr;
	}
	.header-right {
		flex-direction: column;
		align-items: flex-end;
		gap: 0.5rem;
	}
}

@media (max-width: 480px) {
	.logo-image {
		width: 128px;
	}
	.logo-box {
		width: 140px;
		height: 140px;
	}
	.logo-icon {
		font-size: 3rem;
	}
	.main-title {
		font-size: 1.5rem;
	}
	.fighters-grid {
		grid-template-columns: 1fr;
	}
	.battle-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* ========================================
   Leaderboard Screen (State 5)
   ======================================== */

.leaderboard-content {
  max-width: 1100px;
  width: 100%;
  padding: 1rem 1rem;
}

.leaderboard-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.btn-back {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  border: 2px solid var(--green-mid);
  color: var(--green-mid);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-back:hover {
  background: var(--green-mid);
  color: var(--white);
}

.leaderboard-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--green-forest);
  margin-bottom: 0.5rem;
}

.leaderboard-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
}

.leaderboard-status {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hidden {
  display: none;
}

.leaderboard-table-wrapper {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
  border: 2px solid var(--green-light);
  overflow-x: auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.leaderboard-table thead {
  background: var(--green-mid);
  color: var(--white);
}

.leaderboard-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

.leaderboard-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.leaderboard-table tbody tr:hover {
  background: var(--green-mint);
}

.leaderboard-table td {
  padding: 0.875rem 1rem;
  color: var(--foreground);
}

.leaderboard-table td:first-child { /* Rank */
  font-weight: 700;
  color: var(--green-forest);
  width: 4rem;
}

.leaderboard-table td:nth-child(2) { /* Farm name */
  font-weight: 600;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Highlight top 3 ranks */
.leaderboard-table tbody tr:nth-child(1) td:first-child { color: var(--yellow-warm); }
.leaderboard-table tbody tr:nth-child(2) td:first-child { color: var(--attack-amber); }
.leaderboard-table tbody tr:nth-child(3) td:first-child { color: var(--defense-gray); }

img.banner {
	text-align: center;
}

/* Sortable headers */
.leaderboard-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.5rem; /* space for arrow */
}

.leaderboard-table th.sortable::after {
  content: " ↕";
  opacity: 0.3;
  position: absolute;
  right: 0.5rem;
}

.leaderboard-table th.sortable.asc::after {
  content: " ↑";
  opacity: 1;
}

.leaderboard-table th.sortable.desc::after {
  content: " ↓";
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .leaderboard-title {
	font-size: 1.75rem;
  }
  .btn-back {
	position: static;
	margin-bottom: 1rem;
  }
  .leaderboard-table th,
  .leaderboard-table td {
	padding: 0.75rem 0.5rem;
	font-size: 0.85rem;
  }
}


/*  ========================================
	STATE 6: No Fighters Found
	======================================== */

.no-fighters-content {
  max-width: 1000px;
  width: 100%;
  padding: 0 1rem 1rem 1rem;
  text-align: center;
}

.no-fighters-header {
  margin-bottom: 2rem;
}

.no-fighters-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--green-forest);
  margin-bottom: 1rem;
}

.no-fighters-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.dispenser-link {
  color: var(--attack-amber);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s;
}

.dispenser-link:hover {
  color: var(--yellow-bright);
}

/* fighter showcase grid */
.fighter-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.showcase-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  border: 2px solid var(--green-light);
  transition: transform 0.2s, border-color 0.2s;
  text-align: center;
}

.showcase-card:hover {
  transform: translateY(-3px);
  border-color: var(--yellow-warm);
}

.showcase-img {
  width: 100%;
  max-width: 100px;
  height: auto;
  margin: 0 auto 0.5rem;
  display: block;
}

.showcase-info {
  margin-top: 0.5rem;
}

.showcase-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green-forest);
  margin-bottom: 0.5rem;
}

.showcase-stat {
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.2rem 0;
}

.showcase-stat .stat-label {
  color: var(--text-muted);
  font-weight: 500;
}

.showcase-stat .stat-value {
  color: var(--foreground);
  font-weight: 600;
}

.no-fighters-action {
  margin: 2rem 0 1.5rem;
}

/* make sure the screen-container centers nicely */
#noFightersScreen .screen-container {
  padding-top: 3rem;
  padding-bottom: 3rem;
}


/*  ========================================
	STATE 7: No BATTLECORN Found
	======================================== */

.no-battlecorn-content {
	max-width: 650px;
	width: 100%;
	padding: 2rem 1rem;
	text-align: center;
}

.no-battlecorn-header {
	margin-bottom: 2rem;
}

.no-battlecorn-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--green-forest);
	margin-bottom: 1rem;
}

.no-battlecorn-subtitle {
	font-size: 1.1rem;
	color: var(--text-muted);
	line-height: 1.6;
}

.no-battlecorn-subtitle strong {
	color: var(--green-mid);
}

/* BATTLECORN Card Showcase */
.battlecorn-showcase {
	margin: 2rem auto;
	max-width: 320px;
}

.battlecorn-card {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: 1.75rem 1.5rem;
	box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
	border: 3px solid var(--yellow-warm);
	transition: transform 0.2s;
}

.battlecorn-card:hover {
	transform: translateY(-4px);
}

.battlecorn-img {
	width: 100%;
	max-width: 180px;
	height: auto;
	margin: 0 auto 1rem;
	display: block;
	border-radius: var(--radius-lg);
	/* optional subtle border */
	border: 2px solid var(--green-light);
}

.battlecorn-name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--green-forest);
	margin-bottom: 1rem;
}

.battlecorn-stats {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.battlecorn-stat-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.95rem;
}

.battlecorn-stat-row .stat-label {
	color: var(--text-muted);
	font-weight: 500;
}

.battlecorn-stat-row .stat-value {
	font-weight: 700;
	color: var(--foreground);
}

.no-battlecorn-action {
	margin: 2rem 0 1.5rem;
}

/* Responsive tweaks */
@media (max-width: 480px) {
	.no-battlecorn-title {
		font-size: 1.6rem;
	}
	.battlecorn-card {
		padding: 1.25rem 1rem;
	}
	.battlecorn-img {
		max-width: 140px;
	}
}

/*  ========================================
	STATE 8: Error
	======================================== */


/*  ========================================
	STATE 9: 3x Battle Limit Reached
	======================================== */

.stat-row-label {
	margin-right: 1rem;
}

.no-battle {
	text-decoration: line-through;
}


/*  ========================================
	STATE 10: ABOUT BB
	======================================== */

#aboutScreen .screen-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.about-content {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 2rem;
  padding: 1rem;
}

.about-header {
  margin: 2rem 0 2rem 0;
}

.about-subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-green, #2e7d32);
  text-align: center;
  margin-bottom: 2rem;
  border-left: 4px solid var(--primary-green, #2e7d32);
  padding-left: 1rem;
}

/* content cards */
.about-content p,
.about-content h4 {
  margin: 1.5rem 0;
  line-height: 1.5;
}

.about-content h4 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid rgba(46, 125, 50, 0.3);
  padding-bottom: 0.5rem;
}

.about-content h4::before {
  content: "🌽";
  font-size: 1.2rem;
}

/* custom lists */
.about-content ul {
  list-style: none;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.about-content li {
  margin: 0.5rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.about-content li::before {
  content: "⚔️";
  position: absolute;
  left: 0;
  color: var(--primary-green, #2e7d32);
}

.about-content a {
  text-decoration: none;
}

.about-content a:hover {
  border-bottom-style: solid;
}

.about-content .topbanner-pill {
  border-radius: 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


/*  ========================================
	STATE 11: HOW TO PLAY
	======================================== */

#helpScreen .screen-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.help-content {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 2rem;
  padding: 1rem;
}

.help-header {
  margin: 2rem 0 2rem 0;
}

.help-subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-green, #2e7d32);
  text-align: center;
  margin-bottom: 2rem;
  border-left: 4px solid var(--primary-green, #2e7d32);
  padding-left: 1rem;
}

/* content cards */
.help-content p,
.help-content h4 {
  margin: 1.5rem 0;
  line-height: 1.5;
}

.help-content h4 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid rgba(46, 125, 50, 0.3);
  padding-bottom: 0.5rem;
}

.help-content h4::before {
  content: "🌽";
  font-size: 1.2rem;
}

/* custom lists */
.help-content ul {
  list-style: none;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.help-content li {
  margin: 0.5rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.help-content li::before {
  content: "⚔️";
  position: absolute;
  left: 0;
  color: var(--primary-green, #2e7d32);
}

/* table wrapper for responsiveness */
.help-content table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  overflow: hidden;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.help-content th, 
.help-content td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.help-content th {
  background: var(--primary-green, #2e7d32);
  color: white;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.help-content tr:hover td {
  background: rgba(46, 125, 50, 0.2);
}

.help-content td:first-child,
.help-content th:first-child {
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.3);
}

/* fighter stats table specific */
.help-content table tbody tr td:first-child {
  font-family: monospace;
  font-weight: bold;
  color: #ffd966;
}

/* additional helper classes */
.help-content a {
  text-decoration: none;
}

.help-content a:hover {
  border-bottom-style: solid;
}

.help-content .topbanner-pill {
  border-radius: 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* responsive table */
@media (max-width: 700px) {
  .help-content table,
  .help-content thead,
  .help-content tbody,
  .help-content th,
  .help-content td,
  .help-content tr {
	display: block;
  }
  
  .help-content thead {
	display: none;
  }
  
  .help-content tr {
	margin-bottom: 1rem;
	border-radius: 1rem;
	background: rgba(0, 0, 0, 0.3);
	padding: 0.5rem;
  }
  
  .help-content td {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: none;
	padding: 8px;
  }
  
  .help-content td::before {
	content: attr(data-label);
	font-weight: bold;
	width: 40%;
	color: #ffd966;
  }
  
  .help-content td:first-child::before {
	content: "Fighter";
  }
  .help-content td:nth-child(2)::before {
	content: "Attack";
  }
  .help-content td:nth-child(3)::before {
	content: "Defense";
  }
  .help-content td:nth-child(4)::before {
	content: "Health";
  }
}

/*  ========================================
	STATE 12: FARM STATS PAGE
	======================================== */

.farm-content {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 2rem;
  padding: 1rem;
}

.farm-header {
  margin: 2rem 0 2rem 0;
}

.farm-subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-green, #2e7d32);
  text-align: center;
  margin-bottom: 2rem;
  border-left: 4px solid var(--primary-green, #2e7d32);
  padding-left: 1rem;
}

/* content cards */
.farm-content p,
.farm-content h4 {
  margin: 1.5rem 0;
  line-height: 1.5;
}

.farm-content h4 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid rgba(46, 125, 50, 0.3);
  padding-bottom: 0.5rem;
}

.farm-content h4::before {
  content: "🌽";
  font-size: 1.2rem;
}

.farm-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin: 1rem 0 2rem;
}

.farm-stat-card {
	background: white;
	border-radius: 1rem;
	padding: 1rem;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.farm-stat-value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--green-forest);
}

.farm-stat-label {
	color: var(--text-muted);
	font-size: 0.85rem;
}

.battle-win {
	color: #2d5016;
	font-weight: 700;
}

.battle-loss {
	color: #dc2626;
	font-weight: 700;
}

.elo-panel {
	background: white;
	border-radius: 1rem;
	padding: 1rem;
}

.elo-value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--green-forest);
}

.elo-sparkline {
	width: 100%;
	height: 60px;
	margin-top: 0.5rem;
}

.elo-sparkline polyline {
	fill: none;
	stroke: #22c55e;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.elo-change {
	color: #2d5016;
	font-weight: 700;
	margin-top: 1rem;
	margin-left: 0.5rem;
}

/* table wrapper for responsiveness */
.farm-content table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  overflow: hidden;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.farm-content th, 
.farm-content td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.farm-content th {
  background: var(--primary-green, #2e7d32);
  color: white;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.farm-content tr:hover td {
  background: rgba(46, 125, 50, 0.2);
}

.farm-content th:first-child,
.farm-content td:first-child {
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.3);
}

/* responsive table */
@media (max-width: 700px) {
	.farm-content table,
	.farm-content thead,
	.farm-content tbody,
	.farm-content th,
	.farm-content td,
	.farm-content tr {
		display: block;
	}
  
	.farm-content thead {
		display: none;
	}
  
	.farm-content tr {
		margin-bottom: 1rem;
		border-radius: 1rem;
		background: rgba(0, 0, 0, 0.3);
		padding: 0.5rem;
	}
  
	.farm-content td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: none;
		padding: 8px;
	}
  
	.farm-content td::before {
		content: attr(data-label);
		font-weight: bold;
		width: 40%;
		color: #ffd966;
	}
}

/*  ========================================
	STATE 13: BATTLE REPLAY PAGE
	======================================== */

#helpScreen .screen-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.help-content {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 2rem;
	padding: 1rem;
}

.replay-header {
	margin: 2rem 0 2rem 0;
}

.replay-farms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 2rem;
	margin-top: 1rem;
	margin-bottom: 4rem;
}

.replay-fighters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(102px, 0.1fr));
	gap: 0.3rem;
}

.replay-fighter-name {
	font-weight: 500;
	font-size: 0.7rem;
	color: var(--green-forest);
	text-align: center;
	margin-bottom: 0.75rem;
}

.replay-fighter-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--health-green);
	transition: all 0.2s ease-in-out;
	width: 102px;
	cursor: pointer; 
	position: relative;
}

.replay-defender-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--defeat-red);
	transition: all 0.2s ease-in-out;
	width: 102px;
	cursor: pointer; 
	position: relative;
}

.replay-fighter-card.selected {
	border-color: #2d5016; 
	border-width: 3px;
	background: #fef2f2; 
	box-shadow: 0 0 0 3px rgba(38, 162, 75, 0.2); /* outer glow */
	transform: scale(1.02);
	z-index: 10;
}

.replay-fighter-image {
	aspect-ratio: 1;
	background: linear-gradient(135deg, var(--green-light), var(--green-mint));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	width: 100%;
	max-width: 100px;
}

.replayRounds {
	margin-right: 1rem;
	font-weight: bold;
}

.statusbar {
	width: 100%;
	background: #B8B1A6; /* #eab308; */
	border-radius: 2rem;
	padding: 1rem;
	margin-bottom: 3rem;
	text-align: center;
}

.replay-fighter-info {
	padding: 0.4rem;
}

.buttonrow {
	justify-content: center;
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.replay-fighter-card.defeated,
.replay-defender-card.defeated {
	opacity: 0.5;
}