/* ================================================
   BATTLE TABLE - Grid Layout, Slots & Rows
   ================================================ */

/* Battle Table Container */
.battle-screen__table {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	flex: 1 1 auto;
	min-height: 0;
	gap: clamp(1.2rem, 4vw, 2rem);
	width: 100%;
	max-width: calc(var(--game-width, 100vw));
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	overflow: hidden;
	max-height: 100%;
	padding: clamp(1rem, 4vw, 1.8rem) clamp(1rem, 4.5vw, 2rem);
	background: linear-gradient(160deg, rgba(10, 2, 6, 0.92), rgba(28, 6, 14, 0.85));
	border: 1px solid rgba(255, 82, 104, 0.18);
	border-radius: 18px;
	box-shadow: inset 0 0 30px rgba(255, 82, 104, 0.12), 0 28px 80px rgba(0, 0, 0, 0.72);
}

.battle-screen__table::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0.9;
	background:
		repeating-linear-gradient(to right, rgba(255, 82, 120, 0.065) 0, rgba(255, 82, 120, 0.065) 1px, rgba(255, 82, 120, 0) 1px, rgba(255, 82, 120, 0) 38px),
		repeating-linear-gradient(to bottom, rgba(255, 82, 120, 0.08) 0, rgba(255, 82, 120, 0.08) 1px, rgba(255, 82, 120, 0) 1px, rgba(255, 82, 120, 0) 38px);
	mix-blend-mode: screen;
	filter: drop-shadow(0 0 10px rgba(255, 82, 120, 0.16));
}

.battle-screen__table::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(circle at center, rgba(255, 82, 120, 0.12) 0%, rgba(255, 82, 120, 0) 68%);
	opacity: 0.7;
	mix-blend-mode: screen;
	filter: blur(1px);
}

/* Table Sections */
.battle-table__top,
.battle-table__bottom {
	display: flex;
	flex-direction: column;
	gap: clamp(0.45rem, 2.4vw, 0.9rem);
	align-items: center;
	min-height: 0;
	flex: 0 0 auto;
}

.battle-table__top {
	justify-content: flex-start;
	width: 100%;
	padding: 0;
}

.battle-table__bottom {
	justify-content: flex-end;
	width: 100%;
	padding: 0;
}

.battle-table__label {
	font-size: clamp(0.72rem, 2.4vw, 0.85rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 214, 224, 0.68);
	text-align: center;
	margin: 0;
	padding: 0;
}

/* Battle Rows */
.battle-row {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(0.6rem, 3.5vw, 1.35rem);
	width: 100%;
	min-height: 0;
	flex: 0 0 auto;
}

.battle-row::before {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 82, 104, 0.22), transparent);
	opacity: 0.6;
	transform: translateY(-50%);
}

.battle-row--player::before {
	inset: auto 0 50%;
}

.battle-row--turn-announce {
	animation: battleTurnAnnounce 680ms ease-in-out;
}

@keyframes battleTurnAnnounce {
	0% { filter: drop-shadow(0 0 0 rgba(255, 82, 120, 0)); }
	40% { filter: drop-shadow(0 0 18px rgba(255, 82, 120, 0.6)); }
	100% { filter: drop-shadow(0 0 0 rgba(255, 82, 120, 0)); }
}

/* Battle Slots */
.battle-slot {
	position: relative;
	flex: 0 1 var(--slot-size);
	min-width: 0;
	max-width: var(--slot-size);
	aspect-ratio: 2 / 3;
	border-radius: 16px;
	background: rgba(6, 0, 2, 0.55);
	border: 1px dashed rgba(255, 82, 104, 0.3);
	overflow: hidden;
	box-shadow: inset 0 0 22px rgba(255, 82, 104, 0.12);
	transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
	box-sizing: border-box;
}

.battle-row--player[data-active-turn="true"] .battle-slot[data-state="filled"] {
	cursor: pointer;
}

.battle-row--player[data-active-turn="true"] .battle-slot[data-state="filled"]:hover {
	border-color: rgba(120, 200, 255, 0.6);
	box-shadow: inset 0 0 20px rgba(120, 200, 255, 0.25), 0 0 22px rgba(120, 200, 255, 0.35);
	transform: scale(1.03);
}

.battle-slot[data-state="filled"] {
	border-style: solid;
	border-color: rgba(255, 82, 104, 0.45);
	background: rgba(12, 0, 6, 0.82);
	box-shadow: inset 0 0 12px rgba(255, 82, 104, 0.18), 0 12px 28px rgba(0, 0, 0, 0.55);
}

.battle-slot.is-targeted {
	border-color: rgba(255, 82, 120, 0.8);
	box-shadow: inset 0 0 24px rgba(255, 82, 120, 0.38), 0 0 26px rgba(255, 82, 120, 0.48), 0 0 48px rgba(255, 120, 160, 0.42);
}

/* Target Selection Styles */
.battle-slot.is-target-option {
	cursor: pointer;
	border-color: rgba(255, 170, 100, 0.5);
	transition: all 0.2s ease;
}

.battle-slot.is-target-option:hover {
	border-color: rgba(255, 170, 100, 0.8);
	box-shadow: inset 0 0 20px rgba(255, 170, 100, 0.28), 0 0 22px rgba(255, 170, 100, 0.38);
	transform: scale(1.02);
}

.battle-slot.is-current-target {
	border-color: rgba(255, 200, 120, 0.9);
	box-shadow: inset 0 0 28px rgba(255, 200, 120, 0.45), 0 0 32px rgba(255, 200, 120, 0.55), 0 0 52px rgba(255, 180, 100, 0.48);
}

.battle-slot.is-current-target::before {
	content: "TARGET";
	position: absolute;
	bottom: 0.4rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	color: rgba(255, 220, 150, 0.95);
	text-shadow: 0 0 8px rgba(255, 180, 100, 0.8);
	pointer-events: none;
	z-index: 10;
}

/* Slot Labels */
.battle-slot::after {
	content: attr(data-label);
	position: absolute;
	left: 50%;
	top: clamp(0.35rem, 1.8vw, 0.55rem);
	transform: translateX(-50%);
	font-size: clamp(0.62rem, 2vw, 0.75rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 192, 210, 0.6);
	pointer-events: none;
}

.battle-slot[data-state="filled"]::after {
	color: rgba(255, 234, 240, 0.75);
}

.battle-slot.is-targeted::after {
	color: rgba(255, 230, 238, 0.95);
}

/* Slot Content */
.battle-slot__content {
	position: absolute;
	top: clamp(1.45rem, 5vw, 2rem);
	left: clamp(0.35rem, 1.8vw, 0.6rem);
	right: clamp(0.35rem, 1.8vw, 0.6rem);
	bottom: clamp(0.55rem, 2.8vw, 0.85rem);
	display: grid;
	place-items: stretch;
}

/* Slot Impact Animations */
.battle-slot--under-attack {
	animation: battleSlotImpact 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes battleSlotImpact {
	0% { 
		box-shadow: inset 0 0 0 rgba(255, 82, 140, 0), 0 0 0 rgba(255, 130, 170, 0);
		transform: translate3d(0, 0, 0) scale(1);
		filter: brightness(1);
	}
	25% { 
		box-shadow: inset 0 0 22px rgba(255, 82, 140, 0.6), 0 0 28px rgba(255, 140, 190, 0.5);
		transform: translate3d(0, 3px, 0) scale(0.97);
		filter: brightness(1.15);
	}
	50% { 
		box-shadow: inset 0 0 32px rgba(255, 82, 140, 0.7), 0 0 42px rgba(255, 140, 190, 0.65);
		transform: translate3d(0, 6px, 0) scale(0.94);
		filter: brightness(1.3);
	}
	75% { 
		box-shadow: inset 0 0 18px rgba(255, 82, 140, 0.45), 0 0 18px rgba(255, 130, 170, 0.25);
		transform: translate3d(0, 2px, 0) scale(0.98);
		filter: brightness(1.1);
	}
	100% { 
		box-shadow: inset 0 0 8px rgba(255, 82, 140, 0.2), 0 0 0 rgba(255, 130, 170, 0);
		transform: translate3d(0, 0, 0) scale(1);
		filter: brightness(1);
	}
}

.battle-slot--critical-impact {
	animation: battleSlotCriticalImpact 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes battleSlotCriticalImpact {
	0% { 
		box-shadow: inset 0 0 0 rgba(255, 50, 80, 0), 0 0 0 rgba(255, 100, 140, 0);
		transform: translate3d(0, 0, 0) scale(1);
		filter: brightness(1);
	}
	15% { 
		box-shadow: inset 0 0 28px rgba(255, 50, 80, 0.8), 0 0 38px rgba(255, 100, 140, 0.7);
		transform: translate3d(0, 4px, 0) scale(0.95);
		filter: brightness(1.6);
	}
	30% { 
		box-shadow: inset 0 0 40px rgba(255, 50, 80, 0.9), 0 0 54px rgba(255, 100, 140, 0.85);
		transform: translate3d(0, 8px, 0) scale(0.92);
		filter: brightness(2);
	}
	45% { 
		box-shadow: inset 0 0 38px rgba(255, 50, 80, 0.8), 0 0 48px rgba(255, 100, 140, 0.75);
		transform: translate3d(0, 6px, 0) scale(0.93);
		filter: brightness(1.7);
	}
	65% { 
		box-shadow: inset 0 0 24px rgba(255, 50, 80, 0.55), 0 0 28px rgba(255, 100, 140, 0.4);
		transform: translate3d(0, 3px, 0) scale(0.97);
		filter: brightness(1.3);
	}
	85% { 
		box-shadow: inset 0 0 12px rgba(255, 50, 80, 0.3), 0 0 10px rgba(255, 100, 140, 0.15);
		transform: translate3d(0, 1px, 0) scale(0.99);
		filter: brightness(1.1);
	}
	100% { 
		box-shadow: inset 0 0 8px rgba(255, 82, 140, 0.2), 0 0 0 rgba(255, 130, 170, 0);
		transform: translate3d(0, 0, 0) scale(1);
		filter: brightness(1);
	}
}

/* Slot Placeholder */
.battle-slot-placeholder {
	display: grid;
	place-items: center;
	text-align: center;
	font-size: clamp(0.75rem, 2.2vw, 0.9rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 204, 216, 0.7);
	background: linear-gradient(180deg, rgba(255, 82, 104, 0.15), rgba(12, 2, 8, 0.18));
	border-radius: 10px;
	mix-blend-mode: screen;
}

/* Battle Divider */
.battle-divider {
	width: clamp(56%, 72%, 88%);
	height: 2px;
	margin: clamp(0.5rem, 2.4vw, 1rem) auto;
	background: linear-gradient(90deg, transparent, rgba(255, 82, 104, 0.42) 42%, rgba(255, 82, 104, 0.28) 58%, transparent);
	opacity: 1;
	border-radius: 999px;
	box-shadow: 0 8px 26px rgba(255, 82, 104, 0.06), inset 0 2px 6px rgba(255, 82, 104, 0.03);
	transform-origin: center;
	animation: divider-pulse 3.2s ease-in-out infinite;
	transition: opacity 280ms ease, transform 280ms ease;
	display: block;
	min-height: 2px;
}

@keyframes divider-pulse {
	0% { opacity: 0.85; transform: scaleX(0.985) translateY(0); filter: blur(0px); }
	40% { opacity: 1; transform: scaleX(1.02) translateY(-2px); filter: blur(0.6px); }
	70% { opacity: 0.92; transform: scaleX(0.995) translateY(1px); filter: blur(0.2px); }
	100% { opacity: 0.85; transform: scaleX(0.985) translateY(0); filter: blur(0px); }
}

/* Battle Event Popup */
.battle-event-popup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	pointer-events: none;
	z-index: 9999;
	font-family: 'Orbitron', monospace;
	font-weight: 900;
	font-style: italic;
	font-size: clamp(1.8rem, 4.2vw, 2.8rem);
	text-align: center;
	text-shadow: 0 0 24px currentColor, 0 0 48px currentColor, 0 0 72px currentColor, 0 4px 12px rgba(0, 0, 0, 0.9);
	letter-spacing: 0.18em;
	opacity: 0;
	white-space: nowrap;
	mix-blend-mode: screen;
}

.battle-event-popup.show {
	/* Faster, punchier animation (600ms total) */
	animation: battle-event-show 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.battle-event-popup--hit {
	color: #FFD700;
	filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 32px rgba(255, 215, 0, 0.4));
}

.battle-event-popup--crit {
	color: #FF2255;
	filter: drop-shadow(0 0 20px rgba(255, 34, 85, 1)) drop-shadow(0 0 40px rgba(255, 34, 85, 0.7));
}

.battle-event-popup--ultimate {
	color: #FF6BFF;
	filter: drop-shadow(0 0 28px rgba(255, 107, 255, 1)) drop-shadow(0 0 56px rgba(255, 107, 255, 0.8));
}

.battle-event-popup--evaded {
	color: #00E5FF;
	filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.9)) drop-shadow(0 0 40px rgba(0, 229, 255, 0.6));
}

.battle-event-popup--counter {
	color: #FF8800;
	filter: drop-shadow(0 0 22px rgba(255, 136, 0, 0.95)) drop-shadow(0 0 44px rgba(255, 136, 0, 0.7));
}

.battle-event-popup--turn-end {
	color: #BB33FF;
	filter: drop-shadow(0 0 20px rgba(187, 51, 255, 0.9)) drop-shadow(0 0 40px rgba(187, 51, 255, 0.6));
}

.battle-event-popup--turn-start {
	color: #00FF88;
	filter: drop-shadow(0 0 24px rgba(0, 255, 136, 1)) drop-shadow(0 0 48px rgba(0, 255, 136, 0.7));
}

.battle-event-popup--waiting {
	color: #FFBB66;
	filter: drop-shadow(0 0 18px rgba(255, 187, 102, 0.85)) drop-shadow(0 0 36px rgba(255, 187, 102, 0.5));
}

@keyframes battle-event-show {
	/* Wind-up: Charging in small */
	0% { 
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.1) rotate(-15deg);
		filter: brightness(0);
	}
	
	/* Impact: Explosive pop with scale */
	15% { 
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.25) rotate(4deg);
		filter: brightness(1.6);
	}
	
	/* Settle: Quick bounce to hold position */
	28% { 
		transform: translate(-50%, -50%) scale(0.95) rotate(-2deg);
		filter: brightness(1.2);
	}
	
	/* Hold: Steady display */
	35% { 
		transform: translate(-50%, -50%) scale(1.02) rotate(1deg);
		filter: brightness(1);
	}
	
	/* Sustain at full opacity for entire duration */
	65% { 
		opacity: 1;
		transform: translate(-50%, -52%) scale(1) rotate(0deg);
		filter: brightness(1);
	}
	
	/* Fade + Rise + Scale down */
	85% { 
		opacity: 0.6;
		transform: translate(-50%, -65%) scale(0.95) rotate(0deg);
	}
	
	/* Complete fade out and move up */
	100% { 
		opacity: 0;
		transform: translate(-50%, -85%) scale(0.7) rotate(0deg);
		filter: brightness(0.5);
	}
}

/* Turn Value Flash */
.battle-status__turn-value--pulse {
	animation: battleTurnValueFlash 680ms ease-out;
}

@keyframes battleTurnValueFlash {
	0% { color: var(--text-primary); text-shadow: none; }
	40% { color: #ff6f92; text-shadow: 0 0 18px rgba(255, 82, 120, 0.55); }
	100% { color: var(--text-primary); text-shadow: none; }
}

/* Responsive Adjustments */
@media (max-height: 640px) {
	.battle-screen {
		--slot-size: clamp(46px, min(calc(var(--game-width, 100vw) * 0.34), calc((var(--game-height, 100dvh) - 220px) / 3)), 118px);
		gap: clamp(0.4rem, 2vw, 0.9rem);
		padding: calc(0.65rem + env(safe-area-inset-top)) clamp(0.75rem, 4vw, 1.25rem) calc(0.85rem + env(safe-area-inset-bottom));
	}

	.battle-screen__table {
		gap: clamp(0.55rem, 3vw, 1rem);
		padding: clamp(0.6rem, 3vw, 1.05rem) clamp(0.7rem, 4vw, 1.2rem);
	}

	.battle-row {
		gap: clamp(0.45rem, 3vw, 1rem);
	}

	.battle-slot::after {
		top: clamp(0.28rem, 1.5vw, 0.45rem);
		letter-spacing: 0.18em;
	}

	.battle-slot__content {
		top: clamp(1.05rem, 4.2vw, 1.55rem);
		bottom: clamp(0.45rem, 2.5vw, 0.7rem);
	}
}

@media (max-height: 520px) {
	.battle-screen {
		--slot-size: clamp(40px, min(calc(var(--game-width, 100vw) * 0.3), calc((var(--game-height, 100dvh) - 210px) / 3)), 100px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.battle-divider {
		animation: none;
		transition: none;
	}

	.battle-event-popup {
		animation: none !important;
		opacity: 0 !important;
	}
}