/*
 * Eternity Showdown — Modern Battle UI
 * CSS-only overhaul layered on top of stock PS battle.css / client.css.
 * Loaded after custom.css via head-custom.html.
 */

/* ── Design tokens ── */
:root {
	--et-battle-accent: #b366ff;
	--et-battle-accent-soft: #c084fc;
	--et-battle-neon: #22d3ee;
	--et-battle-glow: rgba(168, 85, 247, 0.48);
	--et-battle-radius: 14px;
	--et-battle-radius-sm: 10px;
	--et-battle-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--et-battle-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Battle room shell ── */
.ps-room[id^="room-battle-"] {
	font-family: var(--et-battle-font);
}

.ps-room[id^="room-battle-"] .battle-log,
.ps-room[id^="room-battle-"] .battle-log-add {
	font-family: var(--et-battle-font);
	border-color: rgba(148, 163, 184, 0.25) !important;
}

.ps-room[id^="room-battle-"] .battle {
	border: 1px solid rgba(168, 85, 247, 0.42) !important;
	border-radius: var(--et-battle-radius) !important;
	box-shadow:
		0 0 0 1px rgba(192, 132, 252, 0.12) inset,
		0 8px 28px rgba(0, 0, 0, 0.28),
		0 0 32px var(--et-battle-glow),
		0 0 64px rgba(34, 211, 238, 0.08) !important;
	overflow: hidden !important;
	background: linear-gradient(165deg, #1e2840 0%, #0f1724 55%, #16102a 100%) !important;
}

/* ── Battle field: stock .backdrop IMAGE behind sprites (never restyle innerbattle kids) ──
 *
 * DOM (battle-animations.ts): .innerbattle > .backdrop, then weather / $sprite / statbars.
 * Sprites are <img style="position:absolute"> inside $sprite (a later sibling).
 * Do NOT hide .backdrop, and do NOT set position/z-index on .innerbattle > * —
 * that overrides .backdrop { position:absolute } and shoves sprites out of the 360px frame.
 * Weather/terrain overlays (.weather) stay later siblings so they still paint on top.
 */
/* Match any battle frame, not only `.ps-room[id^=room-battle-]`:
 * spectator/player share that id; client2 mini-windows use
 * `.mini-window-contents.ps-room-light` (no `.ps-room`); uploaded
 * replays stay `battle-*`; replay-embed wrappers are just `.battle`. */
.battle .backdrop,
.innerbattle > .backdrop {
	/* Stock geometry stays 700x500 / top:-90px / left:-50px (battle.css).
	   Full `background` shorthand + !important beats battle.css and stock inline BGs
	   (gen6 meadow/beach with daytime sky). Sprites are later siblings.
	   Opacidad <1: la arena/suelo del estadio menos dominante para que se noten los climas. */
	background: transparent url(/client/fx/bg-eternity-arena.png?v=20260813night1) no-repeat 42% 58% / cover !important;
	opacity: 0.72 !important;
	filter: none;
	pointer-events: none;
}

/* Night stadium: sunset → sunrise (Europe/Madrid via eternity-battle-backdrop.js) */
html.et-spain-night .battle .backdrop,
html.et-spain-night .innerbattle > .backdrop,
.et-spain-night .battle .backdrop,
.et-spain-night .innerbattle > .backdrop {
	background: transparent url(/client/fx/bg-eternity-arena-night.png?v=20260813night1) no-repeat 42% 58% / cover !important;
}

.ps-room[id^="room-battle-"] .innerbattle {
	border-radius: calc(var(--et-battle-radius) - 2px);
}

.ps-room[id^="room-battle-"] .innerbattle .statbar,
.ps-room[id^="room-battle-"] .innerbattle .leftbar,
.ps-room[id^="room-battle-"] .innerbattle .rightbar,
.ps-room[id^="room-battle-"] .battle .turn {
	z-index: 2;
}

/* ── Turn counter (field overlay) ── */
.ps-room[id^="room-battle-"] .battle .turn {
	top: 8px !important;
	left: 50% !important;
	transform: translateX(-50%);
	font-size: 9pt !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 3px 12px !important;
	border: 1px solid rgba(192, 132, 252, 0.55) !important;
	border-radius: 999px !important;
	color: #f3e8ff !important;
	background: rgba(15, 8, 30, 0.78) !important;
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.28),
		0 0 14px rgba(168, 85, 247, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ── Stat bars (HP / name / status / Tera / boosts on field) ── */
.ps-room[id^="room-battle-"] .statbar {
	box-sizing: border-box !important;
	width: 168px !important;
	min-height: auto !important;
	overflow: visible !important;
	padding: 3px 6px 4px !important;
	/* Opacidad alta: sin backdrop-filter (caro en GPU con 2–4 barras animadas) */
	background: linear-gradient(135deg, rgba(22, 16, 38, 0.92) 0%, rgba(10, 12, 22, 0.88) 100%) !important;
	box-shadow:
		0 0 0 1px rgba(168, 85, 247, 0.14) inset,
		0 4px 14px rgba(0, 0, 0, 0.18),
		0 0 12px rgba(168, 85, 247, 0.12) !important;
	border: 1px solid rgba(168, 85, 247, 0.16) !important;
	outline: none !important;
	border-radius: var(--et-battle-radius-sm) !important;
	contain: layout paint;
}

.ps-room[id^="room-battle-"] .statbar strong {
	display: block !important;
	margin: 0 !important;
	text-align: left !important;
	color: #f8fafc !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
	font-weight: 700 !important;
	font-size: 8.5pt !important;
	line-height: 1.25 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.ps-room[id^="room-battle-"] .statbar strong small {
	font-weight: 600 !important;
	opacity: 0.85;
}

.ps-room[id^="room-battle-"] .statbar strong img {
	vertical-align: middle !important;
	margin: 0 1px !important;
}

/* HP track — must NOT clip the .status chip row rendered inside .hpbar */
.ps-room[id^="room-battle-"] .statbar .hpbar {
	position: relative !important;
	overflow: visible !important;
	height: auto !important;
	min-height: 0 !important;
	width: 100% !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

.ps-room[id^="room-battle-"] .statbar .hpbar .prevhp {
	position: relative !important;
	display: block !important;
	height: 8px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	overflow: visible !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
	opacity: 1 !important;
	transition: width 0.6s ease;
}

.ps-room[id^="room-battle-"] .statbar .hpbar .hp,
.ps-room[id^="room-battle-"] .statbar .hpbar .hp-yellow,
.ps-room[id^="room-battle-"] .statbar .hpbar .hp-red {
	height: 100% !important;
	border: none !important;
	border-radius: 999px !important;
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.ps-room[id^="room-battle-"] .statbar .hpbar .hp {
	background: linear-gradient(90deg, #16a34a, #4ade80) !important;
	box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.ps-room[id^="room-battle-"] .statbar .hpbar .hp-yellow {
	background: linear-gradient(90deg, #ca8a04, #facc15) !important;
	box-shadow: 0 0 6px rgba(250, 204, 21, 0.35);
}

.ps-room[id^="room-battle-"] .statbar .hpbar .hp-red {
	background: linear-gradient(90deg, #dc2626, #f87171) !important;
	box-shadow: 0 0 6px rgba(248, 113, 113, 0.4);
	animation: et-hp-pulse 1.2s ease-in-out infinite;
}

@keyframes et-hp-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.82; }
}

.ps-room[id^="room-battle-"] .statbar .hpbar .prevhp-yellow {
	background: rgba(250, 204, 21, 0.2) !important;
}

.ps-room[id^="room-battle-"] .statbar .hpbar .prevhp-red {
	background: rgba(248, 113, 113, 0.2) !important;
}

.ps-room[id^="room-battle-"] .statbar .hpbar .hptext {
	position: absolute !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 4 !important;
	top: 50% !important;
	right: 3px !important;
	left: auto !important;
	transform: translateY(-50%) !important;
	width: auto !important;
	min-width: 30px !important;
	height: 12px !important;
	line-height: 12px !important;
	padding: 0 3px !important;
	font-size: 8px !important;
	font-weight: 700 !important;
	text-align: center !important;
	color: #f8fafc !important;
	background: rgba(15, 23, 42, 0.9) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 4px !important;
	text-shadow: none !important;
	pointer-events: none !important;
}

.ps-room[id^="room-battle-"] .statbar.rstatbar .hpbar .hptext,
.ps-room[id^="room-battle-"] .rstatbar .hpbar .hptext {
	right: 3px !important;
	left: auto !important;
	border-radius: 4px !important;
}

.ps-room[id^="room-battle-"] .statbar.lstatbar .hpbar .hptext,
.ps-room[id^="room-battle-"] .lstatbar .hpbar .hptext {
	right: 3px !important;
	left: auto !important;
	border-radius: 4px !important;
}

.ps-room[id^="room-battle-"] .statbar .hpbar .hptextborder {
	position: absolute !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 3 !important;
	top: -2px !important;
	width: 4px !important;
	height: 10px !important;
	background: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.ps-room[id^="room-battle-"] .statbar.rstatbar .hpbar .hptextborder,
.ps-room[id^="room-battle-"] .rstatbar .hpbar .hptextborder {
	right: -3px !important;
	left: auto !important;
}

.ps-room[id^="room-battle-"] .statbar.lstatbar .hpbar .hptextborder,
.ps-room[id^="room-battle-"] .lstatbar .hpbar .hptextborder {
	left: -3px !important;
	right: auto !important;
}

/* Chip row: PAR/BRN + Tera type + stat boosts + volatiles */
.ps-room[id^="room-battle-"] .statbar .hpbar .status {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	align-content: flex-start !important;
	gap: 3px !important;
	min-height: 0 !important;
	margin: 3px 0 0 !important;
	padding: 0 !important;
	position: static !important;
	overflow: visible !important;
	line-height: 1.15 !important;
	font-size: 0 !important;
}

.ps-room[id^="room-battle-"] .statbar .hpbar .status > * {
	font-size: 7pt !important;
}

.ps-room[id^="room-battle-"] .statbar .status > span.brn,
.ps-room[id^="room-battle-"] .statbar .status > span.psn,
.ps-room[id^="room-battle-"] .statbar .status > span.par,
.ps-room[id^="room-battle-"] .statbar .status > span.slp,
.ps-room[id^="room-battle-"] .statbar .status > span.frz {
	display: inline-flex !important;
	align-items: center !important;
	font-weight: 700 !important;
	font-size: 6.5pt !important;
	line-height: 1.2 !important;
	padding: 1px 4px !important;
	border: none !important;
	border-radius: 4px !important;
	color: #fff !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	flex-shrink: 0 !important;
}

.ps-room[id^="room-battle-"] .statbar .status > span.brn { background: #dc2626 !important; }
.ps-room[id^="room-battle-"] .statbar .status > span.psn { background: #9333ea !important; }
.ps-room[id^="room-battle-"] .statbar .status > span.par { background: #ca8a04 !important; }
.ps-room[id^="room-battle-"] .statbar .status > span.slp { background: #7c3aed !important; }
.ps-room[id^="room-battle-"] .statbar .status > span.frz { background: #0891b2 !important; }

.ps-room[id^="room-battle-"] .statbar .status > span.good,
.ps-room[id^="room-battle-"] .statbar .status > span.bad,
.ps-room[id^="room-battle-"] .statbar .status > span.neutral {
	display: inline-flex !important;
	align-items: center !important;
	font-weight: 700 !important;
	font-size: 6.5pt !important;
	line-height: 1.2 !important;
	padding: 1px 4px !important;
	border-radius: 4px !important;
	border: 1px solid transparent !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	text-shadow: none !important;
}

.ps-room[id^="room-battle-"] .statbar .status > span.good {
	background: rgba(34, 197, 94, 0.22) !important;
	border-color: rgba(74, 222, 128, 0.55) !important;
	color: #bbf7d0 !important;
}

.ps-room[id^="room-battle-"] .statbar .status > span.bad {
	background: rgba(239, 68, 68, 0.22) !important;
	border-color: rgba(248, 113, 113, 0.55) !important;
	color: #fecaca !important;
}

.ps-room[id^="room-battle-"] .statbar .status > span.neutral {
	background: rgba(148, 163, 184, 0.18) !important;
	border-color: rgba(148, 163, 184, 0.35) !important;
	color: #cbd5e1 !important;
}

.ps-room[id^="room-battle-"] .statbar .status .typeicon {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	min-width: 0 !important;
	height: 13px !important;
	padding: 1px 5px 0 14px !important;
	margin: 0 !important;
	font-size: 6.5pt !important;
	flex-shrink: 0 !important;
	vertical-align: middle !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.ps-room[id^="room-battle-"] .statbar .status img {
	vertical-align: middle !important;
	position: static !important;
	flex-shrink: 0 !important;
}

/* ── Team preview sidebars ── */
.ps-room[id^="room-battle-"] .leftbar,
.ps-room[id^="room-battle-"] .rightbar {
	background: rgba(8, 10, 20, 0.72) !important;
	border-color: rgba(168, 85, 247, 0.2) !important;
}

.ps-room[id^="room-battle-"] .trainer strong {
	color: #e2e8f0 !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	font-weight: 600 !important;
}

.ps-room[id^="room-battle-"] .teamicons {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* ── Controls panel (moves / switch) ── */
.ps-room[id^="room-battle-"] .battle-controls {
	background: linear-gradient(180deg, rgba(22, 18, 38, 0.94) 0%, rgba(14, 10, 28, 0.98) 100%) !important;
	border-top: 1px solid rgba(168, 85, 247, 0.38) !important;
	border-radius: 0 0 var(--et-battle-radius-sm) var(--et-battle-radius-sm);
	box-shadow:
		0 -4px 20px rgba(168, 85, 247, 0.1),
		inset 0 1px 0 rgba(192, 132, 252, 0.1) !important;
	padding-bottom: 6px !important;
}

.ps-room[id^="room-battle-"] .battle-controls .whatdo {
	color: #cbd5e1 !important;
	font-size: 9.5pt !important;
	padding: 4px 10px 2px !important;
}

.ps-room[id^="room-battle-"] .battle-controls .whatdo small {
	border-radius: 6px !important;
	font-weight: 600 !important;
	padding: 2px 6px !important;
	background: rgba(255, 255, 255, 0.06);
}

.ps-room[id^="room-battle-"] .battle-controls .whatdo small.weak {
	color: #fde047 !important;
	border-color: rgba(253, 224, 71, 0.5) !important;
	background: rgba(253, 224, 71, 0.12);
}

.ps-room[id^="room-battle-"] .battle-controls .whatdo small.critical {
	color: #fca5a5 !important;
	border-color: rgba(252, 165, 165, 0.5) !important;
	background: rgba(239, 68, 68, 0.15);
}

/* Tab selectors: Atacar / Cambiar */
.ps-room[id^="room-battle-"] .moveselect button,
.ps-room[id^="room-battle-"] .switchselect button,
.ps-room[id^="room-battle-"] .shiftselect button,
.ps-room[id^="room-battle-"] .allyTeam button {
	font-style: normal !important;
	font-weight: 700 !important;
	font-size: 11pt !important;
	padding: 8px 12px 6px !important;
	border-radius: var(--et-battle-radius-sm) !important;
	transition: var(--et-battle-transition) !important;
}

.ps-room[id^="room-battle-"] .moveselect button {
	color: #fb923c !important;
}

.ps-room[id^="room-battle-"] .switchselect button,
.ps-room[id^="room-battle-"] .allyTeam button {
	color: #93c5fd !important;
}

.ps-room[id^="room-battle-"] .shiftselect button {
	color: #c4b5fd !important;
}

/* ── Control containers (respect PS 330px / 650px grids) ── */
.ps-room[id^="room-battle-"] .movecontrols,
.ps-room[id^="room-battle-"] .switchcontrols,
.ps-room[id^="room-battle-"] .shiftcontrols {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 330px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 4px !important;
}

.ps-room[id^="room-battle-"] .wide-controls .movecontrols,
.ps-room[id^="room-battle-"] .wide-controls .switchcontrols,
.ps-room[id^="room-battle-"] .wide-controls .shiftcontrols {
	max-width: 650px !important;
}

/* ── Move buttons — strict 2×2 grid ── */
.ps-room[id^="room-battle-"] .movemenu {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 6px !important;
	padding: 4px 2px 0 !important;
	margin-right: 0 !important;
	overflow: visible !important;
	box-sizing: border-box !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.ps-room[id^="room-battle-"] .movemenu > p,
.ps-room[id^="room-battle-"] .movemenu .movewarning,
.ps-room[id^="room-battle-"] .movemenu .megaevo-box {
	flex: 1 1 100% !important;
	width: 100% !important;
}

.ps-room[id^="room-battle-"] .movebutton,
.ps-room[id^="room-battle-"] .movemenu button,
.ps-room[id^="room-battle-"] .movemenu button.movebutton {
	float: none !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 60px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 5px 8px 4px 10px !important;
	box-sizing: border-box !important;
	border-radius: var(--et-battle-radius-sm) !important;
	font-size: 10pt !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	text-align: left !important;
	text-shadow: none !important;
	border: none !important;
	outline: none !important;
	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
	filter: saturate(1.12);
	transition: transform var(--et-battle-transition), box-shadow var(--et-battle-transition), filter var(--et-battle-transition) !important;
	overflow: hidden;
	position: relative;
	white-space: normal;
}

.ps-room[id^="room-battle-"] .wide-controls .movemenu {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ps-room[id^="room-battle-"] .wide-controls .movebutton,
.ps-room[id^="room-battle-"] .wide-controls .movemenu button.movebutton {
	width: 100% !important;
	max-width: none !important;
	min-height: 60px !important;
}

.ps-room[id^="room-battle-"] .movebutton::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--et-move-accent, #94a3b8);
	border-radius: var(--et-battle-radius-sm) 0 0 var(--et-battle-radius-sm);
}

.ps-room[id^="room-battle-"] .movebutton:hover:not(:disabled):not(.disabled) {
	transform: translateY(-2px) !important;
	filter: brightness(1.08);
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.35),
		0 0 16px var(--et-move-glow, rgba(168, 85, 247, 0.25)),
		inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.ps-room[id^="room-battle-"] .movebutton:active:not(:disabled),
.ps-room[id^="room-battle-"] .movebutton.pressed {
	transform: translateY(0) scale(0.98) !important;
}

.ps-room[id^="room-battle-"] .movebutton .et-move-top,
.ps-room[id^="room-battle-"] .movebutton .et-move-bottom {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 4px !important;
	width: 100% !important;
	min-width: 0 !important;
}

.ps-room[id^="room-battle-"] .movebutton .et-move-name {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-size: 10pt !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.ps-room[id^="room-battle-"] .movebutton .et-move-bottom {
	margin-top: 2px !important;
}

.ps-room[id^="room-battle-"] .movebutton small.type {
	float: none !important;
	display: block !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	font-size: 7pt !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.85;
	padding: 0 !important;
	line-height: 1.1 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.ps-room[id^="room-battle-"] .movebutton .et-move-stats {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	flex-shrink: 0 !important;
}

.ps-room[id^="room-battle-"] .movebutton .et-move-cat img {
	display: block !important;
	height: 12px !important;
	width: auto !important;
	vertical-align: middle !important;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.ps-room[id^="room-battle-"] .movebutton .et-move-power {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 7pt !important;
	font-weight: 800 !important;
	font-variant-numeric: tabular-nums;
	padding: 1px 5px !important;
	border-radius: 4px !important;
	background: rgba(0, 0, 0, 0.32) !important;
	color: rgba(255, 255, 255, 0.95) !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}

.ps-room[id^="room-battle-"] .movebutton .et-move-power.et-move-status {
	font-size: 6.5pt !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 1px 4px !important;
}

.ps-room[id^="room-battle-"] .movebutton small.pp {
	float: none !important;
	position: static !important;
	flex-shrink: 0 !important;
	font-size: 7pt !important;
	font-weight: 700 !important;
	padding: 1px 6px !important;
	margin: 0 !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.28) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	line-height: 1.3 !important;
}

.ps-room[id^="room-battle-"] .movebutton:disabled,
.ps-room[id^="room-battle-"] .movebutton.disabled {
	opacity: 0.45 !important;
	filter: grayscale(0.4);
	cursor: not-allowed !important;
}

/* Type-colored move cards */
.ps-room[id^="room-battle-"] .movebutton.type-Normal { --et-move-accent: #b0b8c4; --et-move-glow: rgba(156, 163, 175, 0.38); background: linear-gradient(135deg, rgba(62, 66, 74, 0.98), rgba(40, 42, 50, 0.99)) !important; color: #f3f4f6 !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Fire { --et-move-accent: #f87171; --et-move-glow: rgba(239, 68, 68, 0.42); background: linear-gradient(135deg, rgba(153, 27, 27, 0.95), rgba(87, 13, 13, 0.98)) !important; color: #fecaca !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Water { --et-move-accent: #60a5fa; --et-move-glow: rgba(59, 130, 246, 0.42); background: linear-gradient(135deg, rgba(37, 72, 160, 0.95), rgba(20, 35, 70, 0.98)) !important; color: #bfdbfe !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Grass { --et-move-accent: #4ade80; --et-move-glow: rgba(34, 197, 94, 0.42); background: linear-gradient(135deg, rgba(22, 101, 52, 0.95), rgba(8, 58, 28, 0.98)) !important; color: #bbf7d0 !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Electric { --et-move-accent: #facc15; --et-move-glow: rgba(234, 179, 8, 0.42); background: linear-gradient(135deg, rgba(133, 77, 14, 0.95), rgba(82, 40, 8, 0.98)) !important; color: #fef08a !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Ice { --et-move-accent: #22d3ee; --et-move-glow: rgba(6, 182, 212, 0.42); background: linear-gradient(135deg, rgba(28, 95, 120, 0.95), rgba(12, 58, 88, 0.98)) !important; color: #a5f3fc !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Fighting { --et-move-accent: #fb923c; --et-move-glow: rgba(249, 115, 22, 0.42); background: linear-gradient(135deg, rgba(154, 52, 18, 0.95), rgba(90, 28, 10, 0.98)) !important; color: #fed7aa !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Poison { --et-move-accent: #c084fc; --et-move-glow: rgba(168, 85, 247, 0.42); background: linear-gradient(135deg, rgba(107, 33, 168, 0.95), rgba(76, 12, 130, 0.98)) !important; color: #e9d5ff !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Ground { --et-move-accent: #f59e0b; --et-move-glow: rgba(217, 119, 6, 0.42); background: linear-gradient(135deg, rgba(120, 65, 20, 0.95), rgba(72, 34, 12, 0.98)) !important; color: #fde68a !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Flying { --et-move-accent: #a5b4fc; --et-move-glow: rgba(129, 140, 248, 0.42); background: linear-gradient(135deg, rgba(67, 56, 202, 0.95), rgba(40, 36, 110, 0.98)) !important; color: #c7d2fe !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Psychic { --et-move-accent: #f472b6; --et-move-glow: rgba(236, 72, 153, 0.42); background: linear-gradient(135deg, rgba(157, 23, 77, 0.95), rgba(100, 10, 50, 0.98)) !important; color: #fbcfe8 !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Bug { --et-move-accent: #a3e635; --et-move-glow: rgba(132, 204, 22, 0.42); background: linear-gradient(135deg, rgba(63, 98, 18, 0.95), rgba(34, 58, 8, 0.98)) !important; color: #d9f99d !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Rock { --et-move-accent: #d6d3d1; --et-move-glow: rgba(168, 162, 158, 0.38); background: linear-gradient(135deg, rgba(87, 83, 78, 0.95), rgba(55, 48, 44, 0.98)) !important; color: #e7e5e4 !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Ghost { --et-move-accent: #a78bfa; --et-move-glow: rgba(124, 58, 237, 0.42); background: linear-gradient(135deg, rgba(91, 33, 182, 0.95), rgba(58, 20, 120, 0.98)) !important; color: #ddd6fe !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Dragon { --et-move-accent: #818cf8; --et-move-glow: rgba(99, 102, 241, 0.42); background: linear-gradient(135deg, rgba(67, 56, 202, 0.95), rgba(40, 36, 110, 0.98)) !important; color: #c7d2fe !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Dark { --et-move-accent: #a8a29e; --et-move-glow: rgba(120, 113, 108, 0.38); background: linear-gradient(135deg, rgba(52, 48, 46, 0.98), rgba(30, 26, 24, 0.99)) !important; color: #d6d3d1 !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Steel { --et-move-accent: #cbd5e1; --et-move-glow: rgba(148, 163, 184, 0.38); background: linear-gradient(135deg, rgba(71, 85, 105, 0.95), rgba(45, 55, 72, 0.98)) !important; color: #e2e8f0 !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Fairy { --et-move-accent: #f9a8d4; --et-move-glow: rgba(244, 114, 182, 0.42); background: linear-gradient(135deg, rgba(157, 23, 77, 0.92), rgba(100, 10, 50, 0.96)) !important; color: #fce7f3 !important; }
.ps-room[id^="room-battle-"] .movebutton.type-Stellar {
	background: linear-gradient(120deg, rgba(236, 72, 153, 0.85), rgba(34, 197, 94, 0.85) 40%, rgba(99, 102, 241, 0.85)) !important;
	color: #fff !important;
}

.ps-room[id^="room-battle-"] .movebutton small.type { color: inherit !important; opacity: 0.75; }

/* ── Switch panel — 3×2 CSS grid (6 across when wide-controls) ── */
.ps-room[id^="room-battle-"] .switchmenu,
.ps-room[id^="room-battle-"] .allyparty {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 6px !important;
	padding: 4px 2px !important;
	margin-right: 0 !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

.ps-room[id^="room-battle-"] .wide-controls .switchmenu,
.ps-room[id^="room-battle-"] .wide-controls .allyparty {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.ps-room[id^="room-battle-"] .switchmenu button,
.ps-room[id^="room-battle-"] .allyparty button {
	float: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 70px !important;
	margin: 0 !important;
	padding: 2px 4px 12px !important;
	box-sizing: border-box !important;
	border-radius: var(--et-battle-radius-sm) !important;
	font-size: 8.5pt !important;
	font-weight: 600 !important;
	text-align: center !important;
	background: rgba(30, 27, 50, 0.85) !important;
	border: 1px solid rgba(192, 132, 252, 0.22) !important;
	color: #e2e8f0 !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
	text-shadow: none !important;
	transition: var(--et-battle-transition) !important;
	position: relative !important;
	overflow: visible !important;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: 1.15 !important;
}

.ps-room[id^="room-battle-"] .switchmenu button:hover:not(:disabled):not(.disabled),
.ps-room[id^="room-battle-"] .allyparty button:hover:not(:disabled):not(.disabled) {
	transform: translateY(-2px) !important;
	border-color: rgba(192, 132, 252, 0.65) !important;
	background: rgba(38, 34, 62, 0.88) !important;
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.25),
		0 0 14px rgba(168, 85, 247, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	filter: none !important;
}

.ps-room[id^="room-battle-"] .switchmenu button .picon,
.ps-room[id^="room-battle-"] .allyparty button .picon {
	float: none !important;
	display: block !important;
	flex-shrink: 0 !important;
	position: relative !important;
	z-index: 1 !important;
	opacity: 1 !important;
	margin: 0 auto !important;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) !important;
}

.ps-room[id^="room-battle-"] .switchmenu button:hover:not(:disabled):not(.disabled) .picon,
.ps-room[id^="room-battle-"] .allyparty button:hover:not(:disabled):not(.disabled) .picon {
	opacity: 1 !important;
	z-index: 2 !important;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)) !important;
}

.ps-room[id^="room-battle-"] .switchmenu button .hpbar,
.ps-room[id^="room-battle-"] .allyparty button .hpbar {
	height: 4px !important;
	bottom: 6px !important;
	left: 8px !important;
	right: 8px !important;
	border: none !important;
	background: rgba(0, 0, 0, 0.4) !important;
	border-radius: 999px !important;
	opacity: 1 !important;
}

.ps-room[id^="room-battle-"] .switchmenu button .hpbar span,
.ps-room[id^="room-battle-"] .allyparty button .hpbar span {
	height: 100% !important;
	border: none !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, #16a34a, #4ade80) !important;
	transition: width 0.35s ease;
}

.ps-room[id^="room-battle-"] .switchmenu button .hpbar-yellow span,
.ps-room[id^="room-battle-"] .allyparty button .hpbar-yellow span {
	background: linear-gradient(90deg, #ca8a04, #facc15) !important;
}

.ps-room[id^="room-battle-"] .switchmenu button .hpbar-red span,
.ps-room[id^="room-battle-"] .allyparty button .hpbar-red span {
	background: linear-gradient(90deg, #dc2626, #f87171) !important;
}

.ps-room[id^="room-battle-"] .switchmenu button .status,
.ps-room[id^="room-battle-"] .allyparty button .status {
	width: 8px !important;
	height: 8px !important;
	bottom: 4px !important;
	right: 6px !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	box-shadow: 0 0 6px currentColor;
}

.ps-room[id^="room-battle-"] .switchmenu button.disabled,
.ps-room[id^="room-battle-"] .switchmenu button:disabled {
	opacity: 0.4 !important;
}

/* ── Tera / Mega / Dynamax toggles — compact pills in header row ── */
.ps-room[id^="room-battle-"] .movecontrols {
	position: relative !important;
	padding-top: 2px !important;
}

.ps-room[id^="room-battle-"] .moveselect,
.ps-room[id^="room-battle-"] .switchselect {
	display: inline-block !important;
	margin-right: 120px !important;
}

.ps-room[id^="room-battle-"] .movemenu .megaevo-box {
	position: absolute !important;
	top: 2px !important;
	right: 4px !important;
	left: auto !important;
	clear: none !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: right !important;
	z-index: 2;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
	gap: 4px !important;
	max-width: calc(100% - 90px) !important;
}

.ps-room[id^="room-battle-"] .megaevo-box {
	clear: both;
	padding: 4px 0 !important;
	text-align: center;
}

.ps-room[id^="room-battle-"] .megaevo {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	border-radius: 999px !important;
	padding: 4px 10px !important;
	font-size: 8pt !important;
	font-weight: 700 !important;
	border: 1px solid rgba(192, 132, 252, 0.35) !important;
	background: rgba(30, 20, 50, 0.75) !important;
	color: #e9d5ff !important;
	transition: var(--et-battle-transition) !important;
	cursor: pointer !important;
	text-shadow: none !important;
	line-height: 1.2 !important;
}

.ps-room[id^="room-battle-"] .megaevo input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}

.ps-room[id^="room-battle-"] .megaevo .typeicon {
	vertical-align: middle !important;
	font-size: 7pt !important;
	height: 12px !important;
	padding-top: 1px !important;
}

.ps-room[id^="room-battle-"] .megaevo:hover {
	border-color: rgba(192, 132, 252, 0.65) !important;
	background: rgba(45, 30, 75, 0.85) !important;
	color: #faf5ff !important;
}

.ps-room[id^="room-battle-"] .megaevo:has(:checked),
.ps-room[id^="room-battle-"] .megaevo.cur {
	border-color: var(--et-battle-accent-soft) !important;
	background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(34, 211, 238, 0.22)) !important;
	box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
	color: #fff !important;
}

/* ── Timer — compact pill, top-right of controls ── */
.ps-room[id^="room-battle-"] .battle-controls > .button[role="timer"],
.ps-room[id^="room-battle-"] .timerbutton,
.ps-room[id^="room-battle-"] .button.timerbutton-on,
.ps-room[id^="room-battle-"] .button.timerbutton-critical {
	border-radius: 999px !important;
	padding: 3px 10px !important;
	font-size: 8.5pt !important;
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums;
	border: 1px solid rgba(148, 163, 184, 0.35) !important;
	background: rgba(15, 15, 25, 0.75) !important;
	transition: var(--et-battle-transition) !important;
	z-index: 3 !important;
}

.ps-room[id^="room-battle-"] .timerbutton-on {
	color: #fca5a5 !important;
	border-color: rgba(252, 165, 165, 0.5) !important;
	background: rgba(127, 29, 29, 0.35) !important;
}

.ps-room[id^="room-battle-"] .timerbutton-critical {
	background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
	border-color: #ef4444 !important;
	animation: et-timer-pulse 0.8s ease-in-out infinite;
}

@keyframes et-timer-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
	50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ── Battle log (navy / near-black glass — cosmic theme) ── */
.ps-room[id^="room-battle-"] .battle-log {
	background: linear-gradient(180deg, #0b1528 0%, #070e1a 100%) !important;
	color: #e2e8f0 !important;
	border-color: rgba(100, 130, 180, 0.22) !important;
	font-size: 9.5pt !important;
	line-height: 1.45 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Stop intro/watermark from stretching to fill the log panel */
.ps-room[id^="room-battle-"] .battle-log .inner-preempt {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
}

.ps-room[id^="room-battle-"] .battle-log .inner-preempt.message-log h2,
.ps-room[id^="room-battle-"] .battle-log .message-log h2 {
	font-size: 9pt !important;
	font-weight: 700 !important;
	margin: 10px 0 4px !important;
	padding: 3px 8px !important;
	line-height: 1.3 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em !important;
	text-align: left !important;
	color: #c4b5fd !important;
	background: rgba(168, 85, 247, 0.1) !important;
	border: none !important;
	border-left: 3px solid rgba(192, 132, 252, 0.5) !important;
	border-radius: 0 4px 4px 0 !important;
	box-shadow: none !important;
}

.ps-room[id^="room-battle-"] .battle-log .inner {
	padding: 4px 10px 2px !important;
	background: transparent !important;
}

.ps-room[id^="room-battle-"] .battle-log .message-log .chat,
.ps-room[id^="room-battle-"] .battle-log .chat,
.ps-room[id^="room-battle-"] .battle-log .notice {
	color: #cbd5e1 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 1px 0 !important;
	line-height: 1.4 !important;
}

.ps-room[id^="room-battle-"] .battle-log .chat strong,
.ps-room[id^="room-battle-"] .battle-log .chat > strong {
	/* Fallback only — no !important so /customcolor + hash colors apply */
	color: #f1f5f9;
}

.ps-room[id^="room-battle-"] .battle-log .chat em,
.ps-room[id^="room-battle-"] .battle-log .chat q {
	color: #e2e8f0 !important;
}

.ps-room[id^="room-battle-"] .battle-log .chat small {
	color: #94a3b8 !important;
}

.ps-room[id^="room-battle-"] .battle-log a {
	color: #93c5fd !important;
}

.ps-room[id^="room-battle-"] .battle-log a:hover {
	color: #bfdbfe !important;
}

/* Turn headers only — regular log lines stay a continuous stream (stock PS style) */
.ps-room[id^="room-battle-"] .battle-log h2.battle-history {
	margin: 10px 0 4px !important;
	padding: 3px 8px !important;
	font-size: 9pt !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	color: #c4b5fd !important;
	background: rgba(168, 85, 247, 0.1) !important;
	border: none !important;
	border-left: 3px solid rgba(192, 132, 252, 0.5) !important;
	border-radius: 0 4px 4px 0 !important;
	box-shadow: none !important;
}

/* Battle action lines: no per-message cards */
.ps-room[id^="room-battle-"] .battle-log div.battle-history {
	margin: 0 !important;
	padding: 1px 0 !important;
	font-size: inherit !important;
	font-weight: normal !important;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: inherit !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	line-height: 1.4 !important;
}

.ps-room[id^="room-battle-"] .battle-log div.battle-history strong {
	color: #f1f5f9 !important;
}

.ps-room[id^="room-battle-"] .battle-log div.battle-history small {
	color: #94a3b8 !important;
}

.ps-room[id^="room-battle-"] .battle-log .spacer {
	margin-top: 2px !important;
}

.ps-room[id^="room-battle-"] .battle-log-add {
	background: #0a1424 !important;
	border-top: 1px solid rgba(100, 140, 200, 0.22) !important;
	border-color: rgba(100, 130, 180, 0.22) !important;
	color: #e2e8f0 !important;
}

.ps-room[id^="room-battle-"] .battle-log-add .textbox {
	border-radius: var(--et-battle-radius-sm) !important;
	background: rgba(0, 0, 0, 0.35) !important;
	border-color: rgba(192, 132, 252, 0.25) !important;
	color: #f1f5f9 !important;
}

.ps-room[id^="room-battle-"] .battle-log-add .textbox::placeholder {
	color: #94a3b8 !important;
	opacity: 1 !important;
}

.ps-room[id^="room-battle-"] .movewarning {
	color: #fcd34d !important;
	font-size: 9pt !important;
	padding: 4px 8px !important;
}

/* ── Light theme overrides ── */
.ps-room.ps-room-light[id^="room-battle-"] .battle {
	background: linear-gradient(165deg, #dbeafe 0%, #bfdbfe 45%, #e0e7ff 100%) !important;
	border-color: rgba(168, 85, 247, 0.4) !important;
	box-shadow:
		0 12px 32px rgba(30, 64, 175, 0.15),
		0 0 36px rgba(168, 85, 247, 0.18),
		0 0 48px rgba(59, 130, 246, 0.1) !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle .turn {
	color: #1e3a8a !important;
	background: rgba(255, 255, 255, 0.82) !important;
	border-color: rgba(168, 85, 247, 0.45) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 12px rgba(168, 85, 247, 0.25);
	text-shadow: none;
}

.ps-room.ps-room-light[id^="room-battle-"] .statbar {
	background: linear-gradient(135deg, rgba(22, 16, 38, 0.74) 0%, rgba(14, 12, 28, 0.68) 100%) !important;
	border: 1px solid rgba(168, 85, 247, 0.18) !important;
	box-shadow:
		0 0 0 1px rgba(168, 85, 247, 0.1) inset,
		0 4px 14px rgba(0, 0, 0, 0.14),
		0 0 10px rgba(168, 85, 247, 0.1) !important;
	outline: none !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .statbar strong {
	color: #f8fafc !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .statbar .status > span.good {
	background: rgba(34, 197, 94, 0.15) !important;
	border-color: rgba(22, 163, 74, 0.45) !important;
	color: #15803d !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .statbar .status > span.bad {
	background: rgba(239, 68, 68, 0.12) !important;
	border-color: rgba(220, 38, 38, 0.45) !important;
	color: #b91c1c !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .statbar .status > span.neutral {
	background: rgba(148, 163, 184, 0.15) !important;
	border-color: rgba(100, 116, 139, 0.35) !important;
	color: #475569 !important;
}

/* Battle rooms often keep .ps-room-light even with cosmic/dark chrome — stay navy. */
.ps-room.ps-room-light[id^="room-battle-"] .battle-controls {
	background: linear-gradient(180deg, rgba(11, 21, 40, 0.96) 0%, rgba(7, 14, 26, 0.98) 100%) !important;
	border-top: 1px solid rgba(100, 130, 180, 0.28) !important;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(100, 140, 200, 0.08) !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-controls .whatdo {
	color: #cbd5e1 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log {
	background: linear-gradient(180deg, #0b1528 0%, #070e1a 100%) !important;
	color: #e2e8f0 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .notice {
	color: #cbd5e1 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat strong,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat > strong {
	color: #f1f5f9;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat > em,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat > q,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner-preempt,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log h2,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log h2 {
	color: #e2e8f0 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log-add {
	background: #0a1424 !important;
	color: #e2e8f0 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log h2.battle-history {
	color: #c4b5fd !important;
	background: rgba(168, 85, 247, 0.1) !important;
	border: none !important;
	border-left: 3px solid rgba(192, 132, 252, 0.5) !important;
	border-radius: 0 4px 4px 0 !important;
	box-shadow: none !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log div.battle-history {
	color: inherit !important;
	background: transparent !important;
	border: none !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log div.battle-history strong {
	color: #f1f5f9 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log div.battle-history small {
	color: #94a3b8 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .switchmenu button,
.ps-room.ps-room-light[id^="room-battle-"] .allyparty button {
	background: rgba(15, 23, 42, 0.88) !important;
	border-color: rgba(100, 130, 180, 0.35) !important;
	color: #e2e8f0 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .switchmenu button:hover:not(:disabled):not(.disabled),
.ps-room.ps-room-light[id^="room-battle-"] .allyparty button:hover:not(:disabled):not(.disabled) {
	background: rgba(30, 41, 59, 0.95) !important;
	border-color: rgba(129, 140, 248, 0.55) !important;
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.35),
		0 0 12px rgba(99, 102, 241, 0.22),
		inset 0 1px 0 rgba(148, 163, 184, 0.12) !important;
	color: #f1f5f9 !important;
	filter: none !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .switchmenu button:hover:not(:disabled):not(.disabled) .picon,
.ps-room.ps-room-light[id^="room-battle-"] .allyparty button:hover:not(:disabled):not(.disabled) .picon {
	opacity: 1 !important;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22)) !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Normal { background: linear-gradient(135deg, #e2e8f0, #cbd5e1) !important; color: #1e293b !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Fire { background: linear-gradient(135deg, #fecaca, #fca5a5) !important; color: #7f1d1d !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Water { background: linear-gradient(135deg, #bfdbfe, #93c5fd) !important; color: #1e3a8a !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Grass { background: linear-gradient(135deg, #bbf7d0, #86efac) !important; color: #14532d !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Electric { background: linear-gradient(135deg, #fef08a, #fde047) !important; color: #713f12 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Ice { background: linear-gradient(135deg, #a5f3fc, #67e8f9) !important; color: #155e75 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Fighting { background: linear-gradient(135deg, #fed7aa, #fdba74) !important; color: #7c2d12 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Poison { background: linear-gradient(135deg, #e9d5ff, #d8b4fe) !important; color: #581c87 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Ground { background: linear-gradient(135deg, #fde68a, #fcd34d) !important; color: #78350f !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Flying { background: linear-gradient(135deg, #c7d2fe, #a5b4fc) !important; color: #312e81 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Psychic { background: linear-gradient(135deg, #fbcfe8, #f9a8d4) !important; color: #831843 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Bug { background: linear-gradient(135deg, #d9f99d, #bef264) !important; color: #365314 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Rock { background: linear-gradient(135deg, #e7e5e4, #d6d3d1) !important; color: #44403c !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Ghost { background: linear-gradient(135deg, #ddd6fe, #c4b5fd) !important; color: #4c1d95 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Dragon { background: linear-gradient(135deg, #c7d2fe, #a5b4fc) !important; color: #312e81 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Dark { background: linear-gradient(135deg, #d6d3d1, #a8a29e) !important; color: #292524 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Steel { background: linear-gradient(135deg, #e2e8f0, #cbd5e1) !important; color: #334155 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Fairy { background: linear-gradient(135deg, #fce7f3, #fbcfe8) !important; color: #831843 !important; }
.ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Stellar { background: linear-gradient(120deg, #fbcfe8, #bbf7d0 40%, #c7d2fe) !important; color: #1e293b !important; }

html.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Normal,
.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Normal { background: linear-gradient(135deg, #e2e8f0, #cbd5e1) !important; color: #1e293b !important; }
html.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Psychic,
.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Psychic { background: linear-gradient(135deg, #fbcfe8, #f9a8d4) !important; color: #831843 !important; }
html.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Ghost,
.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Ghost { background: linear-gradient(135deg, #ddd6fe, #c4b5fd) !important; color: #4c1d95 !important; }
html.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Fairy,
.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton.type-Fairy { background: linear-gradient(135deg, #fce7f3, #fbcfe8) !important; color: #831843 !important; }

.ps-room.ps-room-light[id^="room-battle-"] .movebutton .et-move-power,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton .et-move-power,
.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton .et-move-power {
	background: rgba(0, 0, 0, 0.1) !important;
	color: inherit !important;
}

/* ── Mobile / small layout ── */
@media (max-width: 700px) {
	.ps-room[id^="room-battle-"] .movecontrols,
	.ps-room[id^="room-battle-"] .switchcontrols {
		max-width: 100% !important;
		padding: 0 4px;
	}

	.ps-room[id^="room-battle-"] .movebutton,
	.ps-room[id^="room-battle-"] .movemenu button.movebutton {
		min-height: 56px !important;
		font-size: 9.5pt !important;
	}

	.ps-room[id^="room-battle-"] .wide-controls .movemenu {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.ps-room[id^="room-battle-"] .wide-controls .movemenu button.movebutton {
		min-height: 56px !important;
	}

	.ps-room[id^="room-battle-"] .switchmenu,
	.ps-room[id^="room-battle-"] .allyparty {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.ps-room[id^="room-battle-"] .switchmenu button,
	.ps-room[id^="room-battle-"] .allyparty button {
		min-height: 64px !important;
		padding: 1px 3px 11px !important;
		font-size: 8pt !important;
	}

	.ps-room[id^="room-battle-"] .wide-controls .switchmenu,
	.ps-room[id^="room-battle-"] .wide-controls .allyparty {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.ps-room[id^="room-battle-"] .movemenu .megaevo-box {
		position: static !important;
		text-align: center !important;
		padding: 4px 0 !important;
		max-width: 100% !important;
		justify-content: center !important;
	}

	.ps-room[id^="room-battle-"] .moveselect,
	.ps-room[id^="room-battle-"] .switchselect {
		margin-right: 0 !important;
	}
}

@media (max-height: 570px) and (min-width: 440px) {
	.ps-room[id^="room-battle-"] .controls {
		border-radius: var(--et-battle-radius) var(--et-battle-radius) 0 0 !important;
		background: rgba(18, 14, 32, 0.96) !important;
		border-top: 1px solid rgba(192, 132, 252, 0.25);
	}
}

/* ── Dark mode (html.dark) sync — dark battle rooms only ── */
html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-controls,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-controls {
	background: linear-gradient(180deg, rgba(22, 18, 38, 0.9) 0%, rgba(14, 10, 28, 0.96) 100%) !important;
	border-top: 1px solid rgba(168, 85, 247, 0.35) !important;
	color: #e2e8f0 !important;
}

html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log {
	background: linear-gradient(180deg, #0b1528 0%, #070e1a 100%) !important;
	color: #e2e8f0 !important;
}

html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .chat,
html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .notice,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .chat,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .notice {
	color: #cbd5e1 !important;
}

html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .chat > strong,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .chat > strong {
	color: #f1f5f9;
}

html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .chat > em,
html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .chat > q,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .chat > em,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .chat > q {
	color: #e2e8f0 !important;
}

html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log-add,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log-add {
	background: #0a1424 !important;
	color: #e2e8f0 !important;
}

html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log h2,
html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .message-log h2,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log h2,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log .message-log h2 {
	color: #c4b5fd !important;
	background: rgba(168, 85, 247, 0.1) !important;
	border: none !important;
	border-left: 3px solid rgba(192, 132, 252, 0.5) !important;
	box-shadow: none !important;
}

html.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log div.battle-history,
.dark .ps-room[id^="room-battle-"]:not(.ps-room-light) .battle-log div.battle-history {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* ── Light battle room: readable log + moves (wins over html.dark) ── */
.ps-room.ps-room-light[id^="room-battle-"] .statbar {
	background: linear-gradient(135deg, rgba(22, 16, 38, 0.74) 0%, rgba(14, 12, 28, 0.68) 100%) !important;
	border: 1px solid rgba(168, 85, 247, 0.18) !important;
	box-shadow:
		0 0 0 1px rgba(168, 85, 247, 0.1) inset,
		0 4px 14px rgba(0, 0, 0, 0.14),
		0 0 10px rgba(168, 85, 247, 0.1) !important;
	outline: none !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .statbar strong {
	color: #f8fafc !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ── Battle room log: navy glass wins over stock / ps-room-light white ──
   Battle rooms often carry .ps-room-light even under html.dark; keep cosmic navy. */
.ps-room.ps-room-light[id^="room-battle-"] .battle-log,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log,
html.dark .ps-room[id^="room-battle-"] .battle-log,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log,
.dark .ps-room[id^="room-battle-"] .battle-log {
	background: linear-gradient(180deg, #0b1528 0%, #070e1a 100%) !important;
	color: #e2e8f0 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner-preempt,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner-preempt,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner-preempt {
	background: transparent !important;
	color: #e2e8f0 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .notice,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .notice,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .notice,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .notice,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .notice,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .notice {
	color: #cbd5e1 !important;
	background: transparent !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat strong,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat > strong,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat > strong,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat > strong,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat > strong {
	color: #f1f5f9;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat em,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat q,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat em,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat q,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat em,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat q,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat em,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat q {
	color: #e2e8f0 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat small,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat small,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat small,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat small {
	color: #94a3b8 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log a,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log a,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log a {
	color: #93c5fd !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log a:hover,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log a:hover,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log a:hover {
	color: #bfdbfe !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log h2,
.ps-room.ps-room-light[id^="room-battle-"] .battle-log h2.battle-history,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log h2,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log h2.battle-history,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log h2,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log h2.battle-history {
	color: #c4b5fd !important;
	background: rgba(168, 85, 247, 0.1) !important;
	border: none !important;
	border-left: 3px solid rgba(192, 132, 252, 0.5) !important;
	border-radius: 0 4px 4px 0 !important;
	box-shadow: none !important;
}

html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log div.battle-history,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log div.battle-history {
	background: transparent !important;
	border: none !important;
	color: inherit !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log-add,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add,
html.dark .ps-room[id^="room-battle-"] .battle-log-add,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add,
.dark .ps-room[id^="room-battle-"] .battle-log-add {
	background: #0a1424 !important;
	color: #e2e8f0 !important;
	border-color: rgba(100, 130, 180, 0.28) !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .battle-log-add .textbox,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add .textbox,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add .textbox {
	background: rgba(0, 0, 0, 0.35) !important;
	color: #f1f5f9 !important;
	border-color: rgba(100, 140, 200, 0.28) !important;
}

/* ── Light theme: soft pastel blue (eye-friendly, matches Eternity room / light bg) ──
   Replaces harsh white. html:not(.dark) body:not(.dark) beats .ps-room-light navy defaults above. */
html:not(.dark) body:not(.dark) .ps-room[id^="room-battle-"] .battle-log,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log {
	background: linear-gradient(180deg, #d9eaf6 0%, #c8e0f2 55%, #bdd8ee 100%) !important;
	color: #1e3a5f !important;
	border-color: rgba(56, 140, 180, 0.28) !important;
}

html:not(.dark) body:not(.dark) .ps-room[id^="room-battle-"] .battle-log-add,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add {
	background: linear-gradient(180deg, #d2e6f4 0%, #c4dced 100%) !important;
	color: #1e3a5f !important;
	border-color: rgba(56, 140, 180, 0.28) !important;
}

html:not(.dark) body:not(.dark) .ps-room[id^="room-battle-"] .battle-controls,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-controls {
	background: linear-gradient(180deg, rgba(232, 244, 251, 0.97) 0%, rgba(210, 232, 245, 0.98) 100%) !important;
	border-top: 1px solid rgba(56, 160, 190, 0.32) !important;
	box-shadow: 0 -4px 16px rgba(30, 100, 140, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
	color: #1e3a5f !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-controls .whatdo,
html:not(.dark) body:not(.dark) .ps-room[id^="room-battle-"] .battle-controls .whatdo {
	color: #334e6b !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .inner-preempt {
	background: transparent !important;
	color: #1e3a5f !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .notice,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .notice,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat em,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat q,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat em,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat q {
	color: #243f5c !important;
	background: transparent !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat strong,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat > strong,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat > strong {
	color: #0f2d4a;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat small,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat small {
	color: #5a7a96 !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log a {
	color: #0369a1 !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log a:hover {
	color: #0284c7 !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log h2,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log h2.battle-history {
	color: #1d4f7a !important;
	background: rgba(56, 160, 190, 0.12) !important;
	border: none !important;
	border-left: 3px solid rgba(14, 116, 144, 0.45) !important;
	border-radius: 0 4px 4px 0 !important;
	box-shadow: none !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log div.battle-history {
	background: transparent !important;
	border: none !important;
	color: inherit !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log div.battle-history strong {
	color: #0f2d4a !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log div.battle-history small {
	color: #5a7a96 !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add .textbox {
	background: rgba(255, 255, 255, 0.55) !important;
	color: #1e3a5f !important;
	border-color: rgba(56, 140, 180, 0.35) !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .switchmenu button,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .allyparty button {
	background: rgba(255, 255, 255, 0.55) !important;
	border-color: rgba(56, 140, 180, 0.32) !important;
	color: #1e3a5f !important;
}

html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .switchmenu button:hover:not(:disabled):not(.disabled),
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .allyparty button:hover:not(:disabled):not(.disabled) {
	background: rgba(255, 255, 255, 0.82) !important;
	border-color: rgba(14, 116, 144, 0.45) !important;
	box-shadow: 0 6px 14px rgba(30, 100, 140, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
	color: #0f2d4a !important;
}


/* ── Dark theme restore (AFTER light): Preact uses body.dark — reassert navy aura ── */
html.dark .ps-room[id^="room-battle-"] .battle-log,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log,
body.dark .ps-room[id^="room-battle-"] .battle-log,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log,
.dark .ps-room[id^="room-battle-"] .battle-log,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log,
html[data-theme="dark"] .ps-room[id^="room-battle-"] .battle-log,
body[data-theme="dark"] .ps-room[id^="room-battle-"] .battle-log {
	background: linear-gradient(180deg, #0b1528 0%, #070e1a 100%) !important;
	color: #e2e8f0 !important;
	border-color: rgba(100, 130, 180, 0.22) !important;
}

html.dark .ps-room[id^="room-battle-"] .battle-log-add,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add,
body.dark .ps-room[id^="room-battle-"] .battle-log-add,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add,
.dark .ps-room[id^="room-battle-"] .battle-log-add,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log-add {
	background: #0a1424 !important;
	color: #e2e8f0 !important;
}

html.dark .ps-room[id^="room-battle-"] .battle-controls,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-controls,
body.dark .ps-room[id^="room-battle-"] .battle-controls,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-controls,
.dark .ps-room[id^="room-battle-"] .battle-controls,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-controls {
	background: linear-gradient(180deg, rgba(11, 21, 40, 0.96) 0%, rgba(7, 14, 26, 0.98) 100%) !important;
	border-top: 1px solid rgba(100, 130, 180, 0.28) !important;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(100, 140, 200, 0.08) !important;
	color: #e2e8f0 !important;
}

html.dark .ps-room[id^="room-battle-"] .battle-controls .whatdo,
body.dark .ps-room[id^="room-battle-"] .battle-controls .whatdo,
.dark .ps-room[id^="room-battle-"] .battle-controls .whatdo,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-controls .whatdo,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-controls .whatdo,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-controls .whatdo {
	color: #cbd5e1 !important;
}

html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .notice,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .notice,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .notice {
	color: #cbd5e1 !important;
	background: transparent !important;
}

html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat em,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat q,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat em,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat q,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat em,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat q {
	color: #e2e8f0 !important;
}

html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log h2,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log h2.battle-history,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log h2,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log h2.battle-history,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log h2,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log h2.battle-history {
	color: #c4b5fd !important;
	background: rgba(168, 85, 247, 0.1) !important;
	border: none !important;
	border-left: 3px solid rgba(192, 132, 252, 0.5) !important;
	border-radius: 0 4px 4px 0 !important;
	box-shadow: none !important;
}

html.dark .ps-room.ps-room-light[id^="room-battle-"] .switchmenu button,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .allyparty button,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .switchmenu button,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .allyparty button,
.dark .ps-room.ps-room-light[id^="room-battle-"] .switchmenu button,
.dark .ps-room.ps-room-light[id^="room-battle-"] .allyparty button {
	background: rgba(15, 23, 42, 0.88) !important;
	border-color: rgba(100, 130, 180, 0.35) !important;
	color: #e2e8f0 !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .movebutton,
.ps-room.ps-room-light[id^="room-battle-"] .movemenu button.movebutton,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton,
.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton {
	text-shadow: none !important;
}

.ps-room.ps-room-light[id^="room-battle-"] .movebutton small.pp,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton small.pp,
.dark .ps-room.ps-room-light[id^="room-battle-"] .movebutton small.pp {
	background: rgba(0, 0, 0, 0.1) !important;
	color: inherit !important;
}

/* ── /dt utilichart in battle log (/raw → .chat > .message > .utilichart) ──
   Battle log uses navy glass; utilichart keeps dark-glass card for /dt readability. */
.ps-room[id^="room-battle-"] .battle-log .chat .message .utilichart,
.ps-room[id^="room-battle-"] .battle-log .message-log .chat .message .utilichart,
.ps-room[id^="room-battle-"] .battle-log .chat .utilichart,
.ps-room[id^="room-battle-"] .battle-log .notice .utilichart,
.ps-room[id^="room-battle-"] .battle-log .utilichart,
html.dark .ps-room[id^="room-battle-"] .battle-log .utilichart,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart,
html[data-theme="dark"] .ps-room[id^="room-battle-"] .battle-log .utilichart,
.dark .ps-room[id^="room-battle-"] .battle-log .utilichart,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart {
	background: rgba(22, 18, 36, 0.98) !important;
	border: 1px solid rgba(148, 163, 184, 0.3) !important;
	border-radius: 10px !important;
	margin: 6px 0 !important;
	padding: 4px 8px 6px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32) !important;
	color: #e2e8f0 !important;
}

.ps-room[id^="room-battle-"] .battle-log .utilichart li.result,
.ps-room[id^="room-battle-"] .battle-log .utilichart .result,
.ps-room[id^="room-battle-"] .battle-log .chat .utilichart li.result,
.ps-room[id^="room-battle-"] .battle-log .chat .utilichart .result,
.ps-room[id^="room-battle-"] .battle-log .message-log .chat .utilichart li.result,
.ps-room[id^="room-battle-"] .battle-log .message-log .chat .utilichart .result,
html.dark .ps-room[id^="room-battle-"] .battle-log .utilichart li.result,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart li.result,
html[data-theme="dark"] .ps-room[id^="room-battle-"] .battle-log .utilichart li.result,
.dark .ps-room[id^="room-battle-"] .battle-log .utilichart li.result,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart li.result {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	contain: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ps-room[id^="room-battle-"] .battle-log .utilichart h3,
.ps-room[id^="room-battle-"] .battle-log .utilichart .resultheader h3,
html.dark .ps-room[id^="room-battle-"] .battle-log .utilichart h3,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart h3,
.dark .ps-room[id^="room-battle-"] .battle-log .utilichart h3,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart h3 {
	background: rgba(168, 85, 247, 0.3) !important;
	color: #f8fafc !important;
	border-color: rgba(148, 163, 184, 0.32) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

.ps-room[id^="room-battle-"] .battle-log .utilichart .col,
.ps-room[id^="room-battle-"] .battle-log .utilichart .namecol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .pokemonnamecol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .movenamecol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .statcol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .bstcol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .labelcol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .widelabelcol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .pplabelcol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .itemdesccol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .abilitydesccol,
.ps-room[id^="room-battle-"] .battle-log .utilichart .movedesccol,
.ps-room[id^="room-battle-"] .battle-log .utilichart b,
.ps-room[id^="room-battle-"] .battle-log .utilichart small,
html.dark .ps-room[id^="room-battle-"] .battle-log .utilichart .col,
html.dark .ps-room[id^="room-battle-"] .battle-log .utilichart .statcol,
html.dark .ps-room[id^="room-battle-"] .battle-log .utilichart .bstcol,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart .col,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart .statcol,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart .bstcol,
html[data-theme="dark"] .ps-room[id^="room-battle-"] .battle-log .utilichart .col,
html[data-theme="dark"] .ps-room[id^="room-battle-"] .battle-log .utilichart .statcol,
.dark .ps-room[id^="room-battle-"] .battle-log .utilichart .col,
.dark .ps-room[id^="room-battle-"] .battle-log .utilichart .statcol,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart .col,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart .statcol {
	color: #e2e8f0 !important;
	-webkit-text-fill-color: #e2e8f0 !important;
}

.ps-room[id^="room-battle-"] .battle-log .utilichart .statcol em,
.ps-room[id^="room-battle-"] .battle-log .utilichart .labelcol em,
.ps-room[id^="room-battle-"] .battle-log .utilichart .bstcol em,
.ps-room[id^="room-battle-"] .battle-log .utilichart .stattitlecol,
html.dark .ps-room[id^="room-battle-"] .battle-log .utilichart .statcol em,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart .statcol em,
.dark .ps-room[id^="room-battle-"] .battle-log .utilichart .statcol em,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .utilichart .statcol em {
	color: #94a3b8 !important;
	-webkit-text-fill-color: #94a3b8 !important;
}

.ps-room[id^="room-battle-"] .battle-log .utilichart a,
html.dark .ps-room[id^="room-battle-"] .battle-log .utilichart a,
.dark .ps-room[id^="room-battle-"] .battle-log .utilichart a {
	color: #93c5fd !important;
}

/* /dt footer details (separate .chat line with font size=1) */
.ps-room[id^="room-battle-"] .battle-log .chat font[size="1"],
.ps-room[id^="room-battle-"] .battle-log .message-log .chat font[size="1"],
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat font[size="1"],
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .chat font[size="1"] {
	color: #475569 !important;
}

.ps-room[id^="room-battle-"] .battle-log .chat .message,
.ps-room[id^="room-battle-"] .battle-log .message-log .chat .message,
html.dark .ps-room[id^="room-battle-"] .battle-log .chat .message,
.dark .ps-room[id^="room-battle-"] .battle-log .chat .message {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Night stadium neon ambient (synced with eternity-battle-backdrop.js)
 * Day (et-spain-day / no night class): keep existing dark/light styles.
 * Night (html.et-spain-night): cyan/magenta neon on field overlay + controls.
 * ═══════════════════════════════════════════════════════════════════════════ */
html.et-spain-night,
.et-spain-night {
	--et-battle-neon: #22d3ee;
	--et-battle-neon-hot: #f0abfc;
	--et-battle-glow: rgba(34, 211, 238, 0.55);
	--et-battle-glow-magenta: rgba(232, 121, 249, 0.42);
}

/* Field frame */
html.et-spain-night .ps-room[id^="room-battle-"] .battle,
.et-spain-night .ps-room[id^="room-battle-"] .battle {
	border-color: rgba(34, 211, 238, 0.55) !important;
	box-shadow:
		0 0 0 1px rgba(240, 171, 252, 0.18) inset,
		0 8px 28px rgba(0, 0, 0, 0.4),
		0 0 28px rgba(34, 211, 238, 0.35),
		0 0 56px rgba(232, 121, 249, 0.22),
		0 0 90px rgba(34, 211, 238, 0.1) !important;
}

/* Slight cool wash over night stadium (sprites stay crisp) */
html.et-spain-night .battle .backdrop,
.et-spain-night .battle .backdrop {
	filter: saturate(1.08) contrast(1.04) brightness(0.96);
}

/* Turn pill */
html.et-spain-night .ps-room[id^="room-battle-"] .battle .turn,
.et-spain-night .ps-room[id^="room-battle-"] .battle .turn {
	border-color: rgba(34, 211, 238, 0.75) !important;
	color: #e0f7ff !important;
	background: rgba(6, 18, 36, 0.82) !important;
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.35),
		0 0 16px rgba(34, 211, 238, 0.55),
		0 0 28px rgba(232, 121, 249, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
	text-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}

/* Controls dock */
html.et-spain-night .ps-room[id^="room-battle-"] .battle-controls,
html.et-spain-night .ps-room.ps-room-light[id^="room-battle-"] .battle-controls,
html.et-spain-night body.dark .ps-room[id^="room-battle-"] .battle-controls,
.et-spain-night .ps-room[id^="room-battle-"] .battle-controls {
	border-top-color: rgba(34, 211, 238, 0.45) !important;
	box-shadow:
		0 -6px 24px rgba(0, 0, 0, 0.35),
		0 -2px 20px rgba(34, 211, 238, 0.12),
		inset 0 1px 0 rgba(34, 211, 238, 0.22) !important;
}

html.et-spain-night .ps-room[id^="room-battle-"] .battle-controls .whatdo,
.et-spain-night .ps-room[id^="room-battle-"] .battle-controls .whatdo {
	text-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}

/* Move buttons — type-colored neon (not all cyan; avoids overload) */
html.et-spain-night .ps-room[id^="room-battle-"] .movebutton,
html.et-spain-night .ps-room[id^="room-battle-"] .movemenu button.movebutton,
.et-spain-night .ps-room[id^="room-battle-"] .movebutton,
.et-spain-night .ps-room[id^="room-battle-"] .movemenu button.movebutton {
	border: 1px solid color-mix(in srgb, var(--et-move-accent, #22d3ee) 55%, transparent) !important;
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.32),
		0 0 10px var(--et-move-glow, rgba(34, 211, 238, 0.45)),
		0 0 26px var(--et-move-glow, rgba(34, 211, 238, 0.28)),
		0 0 2px color-mix(in srgb, var(--et-move-accent, #22d3ee) 70%, white),
		inset 0 0 18px color-mix(in srgb, var(--et-move-accent, #22d3ee) 18%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
	filter: saturate(1.28) brightness(1.06);
	text-shadow: 0 0 8px color-mix(in srgb, var(--et-move-accent, #22d3ee) 35%, transparent);
}

html.et-spain-night .ps-room[id^="room-battle-"] .movebutton::before,
.et-spain-night .ps-room[id^="room-battle-"] .movebutton::before {
	width: 5px;
	background: var(--et-move-accent, #22d3ee);
	box-shadow:
		0 0 10px var(--et-move-accent, #22d3ee),
		0 0 20px var(--et-move-glow, rgba(34, 211, 238, 0.65)),
		2px 0 12px var(--et-move-glow, rgba(34, 211, 238, 0.35));
}

html.et-spain-night .ps-room[id^="room-battle-"] .movebutton:hover:not(:disabled):not(.disabled),
.et-spain-night .ps-room[id^="room-battle-"] .movebutton:hover:not(:disabled):not(.disabled) {
	border-color: color-mix(in srgb, var(--et-move-accent, #f0abfc) 80%, white) !important;
	filter: saturate(1.38) brightness(1.12);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.42),
		0 0 16px var(--et-move-glow, rgba(34, 211, 238, 0.6)),
		0 0 36px var(--et-move-glow, rgba(34, 211, 238, 0.4)),
		0 0 48px rgba(232, 121, 249, 0.22),
		inset 0 0 22px color-mix(in srgb, var(--et-move-accent, #22d3ee) 28%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
	text-shadow: 0 0 12px color-mix(in srgb, var(--et-move-accent, #22d3ee) 55%, transparent);
	animation: none;
}

/* Light theme + night: neon rim without washing pastel fills */
html.et-spain-night:not(.dark) body:not(.dark) .ps-room[id^="room-battle-"] .movebutton,
html.et-spain-night:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .movebutton {
	box-shadow:
		0 3px 10px rgba(30, 100, 140, 0.12),
		0 0 12px var(--et-move-glow, rgba(34, 211, 238, 0.4)),
		0 0 24px var(--et-move-glow, rgba(34, 211, 238, 0.22)),
		inset 0 0 14px color-mix(in srgb, var(--et-move-accent, #22d3ee) 12%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
	text-shadow: none;
}

/* Switch / ally party cards — cyan chrome for selection language */
html.et-spain-night .ps-room[id^="room-battle-"] .switchmenu button,
html.et-spain-night .ps-room[id^="room-battle-"] .allyparty button,
.et-spain-night .ps-room[id^="room-battle-"] .switchmenu button,
.et-spain-night .ps-room[id^="room-battle-"] .allyparty button {
	border-color: rgba(34, 211, 238, 0.42) !important;
	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.28),
		0 0 12px rgba(34, 211, 238, 0.28),
		0 0 22px rgba(232, 121, 249, 0.12),
		inset 0 0 12px rgba(34, 211, 238, 0.06) !important;
}

html.et-spain-night .ps-room[id^="room-battle-"] .switchmenu button:hover:not(:disabled):not(.disabled),
html.et-spain-night .ps-room[id^="room-battle-"] .allyparty button:hover:not(:disabled):not(.disabled),
.et-spain-night .ps-room[id^="room-battle-"] .switchmenu button:hover:not(:disabled):not(.disabled),
.et-spain-night .ps-room[id^="room-battle-"] .allyparty button:hover:not(:disabled):not(.disabled) {
	border-color: rgba(125, 249, 255, 0.85) !important;
	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.32),
		0 0 18px rgba(34, 211, 238, 0.55),
		0 0 36px rgba(34, 211, 238, 0.28),
		0 0 28px rgba(232, 121, 249, 0.22),
		inset 0 0 16px rgba(34, 211, 238, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Mega / tera / timer accents */
html.et-spain-night .ps-room[id^="room-battle-"] .megaevo,
.et-spain-night .ps-room[id^="room-battle-"] .megaevo {
	border-color: rgba(34, 211, 238, 0.45) !important;
	box-shadow: 0 0 14px rgba(34, 211, 238, 0.25), 0 0 22px rgba(232, 121, 249, 0.15);
}

html.et-spain-night .ps-room[id^="room-battle-"] .battle-controls > .button[role="timer"],
.et-spain-night .ps-room[id^="room-battle-"] .battle-controls > .button[role="timer"] {
	box-shadow: 0 0 14px rgba(34, 211, 238, 0.35), 0 0 24px rgba(232, 121, 249, 0.18);
}

/* Battle log chrome — subtle neon edge only */
html.et-spain-night .ps-room[id^="room-battle-"] .battle-log,
.et-spain-night .ps-room[id^="room-battle-"] .battle-log {
	border-color: rgba(34, 211, 238, 0.28) !important;
	box-shadow: inset 0 0 24px rgba(34, 211, 238, 0.04);
}

html.et-spain-night .ps-room[id^="room-battle-"] .battle-log h2.battle-history,
html.et-spain-night .ps-room[id^="room-battle-"] .battle-log .message-log h2,
.et-spain-night .ps-room[id^="room-battle-"] .battle-log h2.battle-history,
.et-spain-night .ps-room[id^="room-battle-"] .battle-log .message-log h2 {
	border-left-color: rgba(34, 211, 238, 0.7) !important;
	color: #a5f3fc !important;
	background: rgba(34, 211, 238, 0.08) !important;
	text-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}

/* Fallback when color-mix unsupported: keep readable neon via accent vars */
@supports not (border-color: color-mix(in srgb, red 50%, blue)) {
	html.et-spain-night .ps-room[id^="room-battle-"] .movebutton,
	.et-spain-night .ps-room[id^="room-battle-"] .movebutton {
		border-color: rgba(34, 211, 238, 0.4) !important;
	}
}

/* ── Spectator cinema: larger field + chat derecha + controles en tabla ── */
.ps-room.et-spectator {
	background:
		radial-gradient(ellipse 70% 55% at 42% 28%, rgba(34, 211, 238, 0.07), transparent 62%),
		radial-gradient(ellipse 50% 40% at 50% 100%, rgba(168, 85, 247, 0.06), transparent 55%);
	overflow: hidden !important;
}

/* Columna combate espectador: a la derecha de la userlist, menos el compose */
.ps-room.et-spectator .et-spectator-field.scrollable-battle-container {
	position: absolute;
	top: 0;
	left: var(--et-spec-ulist-w, 146px);
	bottom: 44px; /* hueco para el textbox del combate */
	overflow: hidden !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px 0;
	gap: 12px;
}

/* Rail izquierda: lista de usuarios dentro del panel de combate */
.ps-room.et-spectator > .userlist:not(.userlist-hidden) {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 145px;
	z-index: 3;
	border-right: 1px solid rgba(34, 211, 238, 0.22);
	background:
		linear-gradient(180deg, rgba(10, 18, 30, 0.97) 0%, rgba(6, 12, 22, 0.98) 100%) !important;
	box-shadow: inset -1px 0 0 rgba(34, 211, 238, 0.06);
}

.ps-room.et-spectator .et-spectator-stage-slot {
	flex: 0 0 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}

.ps-room.et-spectator .et-spectator-stage-inner {
	flex: 0 0 auto;
	margin: 0 auto !important;
	position: relative;
	z-index: 1;
	max-width: 100%;
}

.ps-room.et-spectator .et-spectator-controls-host {
	flex: 0 0 auto;
	margin-top: 0;
	width: 100%;
	position: relative;
	z-index: 2;
}

.ps-room.et-spectator .et-spectator-stage-inner .battle,
.ps-room.et-spectator .et-battle-stage .battle {
	border-color: rgba(34, 211, 238, 0.5) !important;
	box-shadow:
		0 0 0 1px rgba(34, 211, 238, 0.18) inset,
		0 12px 36px rgba(0, 0, 0, 0.35),
		0 0 40px rgba(34, 211, 238, 0.22),
		0 0 72px rgba(168, 85, 247, 0.12) !important;
}

/* Sin franjas laterales: avatares/equipo salen a la franja VS */
.ps-room.et-spectator .battle .leftbar,
.ps-room.et-spectator .battle .rightbar {
	display: none !important;
}

/* Turno del campo (burbuja blanca): solo dejamos el del scoreboard VS */
.ps-room.et-spectator .battle .turn,
.ps-room.et-spectator .innerbattle > .turn,
.ps-room.et-spectator .innerbattle .turn {
	display: none !important;
}

/* El fondo del arena cubre todo el marco (sin bandas oscuras a los lados) */
.ps-room.et-spectator .battle .backdrop,
.ps-room.et-spectator .innerbattle > .backdrop {
	background-position: 50% 55% !important;
	background-size: cover !important;
}

/* Clima / terreno / salas: texto arriba-izquierda (sin leftbar).
 * IMPORTANTE: no subir .weather con z-index por encima de $sprite —
 * DOM = backdrop → terrain → weather → sprites.
 * Estadio, terreno, clima, Pokémon (sin z-index en overlays). */
.ps-room.et-spectator .battle .weather > em {
	margin: 38px 0 0 10px !important;
	max-width: 240px;
	font-size: 10pt !important;
	font-weight: 700 !important;
	font-style: normal !important;
	line-height: 1.25 !important;
	color: #e0f7ff !important;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 0 8px rgba(34, 211, 238, 0.35),
		0 0 1px #000 !important;
	pointer-events: none;
	position: relative;
	z-index: 6;
}

.ps-room.et-spectator .battle .weather > em small {
	color: #a5f3fc !important;
	font-weight: 600 !important;
}

/* Terreno (sin <em>): visible bajo el clima; forzar top/opacity en espectador */
.ps-room.et-spectator .innerbattle > .weather:not(:has(> em)) {
	top: 0 !important;
}

/* Círculos de terreno (eléctrico / hada / planta / psíquico): cubren todo el suelo */
.ps-room.et-spectator .innerbattle > .weather.grassyterrainweather,
.ps-room.et-spectator .innerbattle > .weather.electricterrainweather,
.ps-room.et-spectator .innerbattle > .weather.mistyterrainweather,
.ps-room.et-spectator .innerbattle > .weather.psychicterrainweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.grassyterrainweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.electricterrainweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.mistyterrainweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.psychicterrainweather {
	top: 0 !important;
	display: block !important;
	visibility: visible !important;
	pointer-events: none;
	background: none !important;
	opacity: 1 !important;
	overflow: visible;
	mix-blend-mode: normal;
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.electricterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle > .weather.mistyterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle > .weather.grassyterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle > .weather.psychicterrainweather::before {
	content: "";
	position: absolute;
	left: 50%;
	/* Más abajo para envolver al Pokémon A (cerca) */
	top: 62%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(3.55, 3.55);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	pointer-events: none;
	/* El GIF trae fondo negro opaco: screen lo anula y solo deja el glow */
	mix-blend-mode: screen;
	opacity: 0.88;
	z-index: 0;
	contain: paint;
	will-change: auto;
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.electricterrainweather::before {
	background-image: url(/client/fx/eternity-field/terrain-electric.gif?v=10);
	opacity: 0.92;
	filter: saturate(1.12) brightness(1.08) contrast(1.06);
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.mistyterrainweather::before {
	background-image: url(/client/fx/eternity-field/terrain-misty.gif?v=8);
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.grassyterrainweather::before {
	background-image: url(/client/fx/eternity-field/terrain-grassy.gif?v=8);
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.psychicterrainweather::before {
	background-image: url(/client/fx/eternity-field/terrain-psychic.gif?v=5);
}

/* Auras (Trick Room, terrenos, etc.) legibles sobre el estadio Eternity */
.ps-room[id^="room-battle-"] .innerbattle > .weather.trickroomweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.wonderroomweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.magicroomweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.gravityweather {
	background-color: transparent !important;
	background-image:
		linear-gradient(160deg, rgba(150, 70, 200, 0.55) 0%, rgba(90, 30, 150, 0.4) 50%, rgba(40, 10, 70, 0.35) 100%),
		url(/client/fx/weather-trickroom.png) !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	opacity: 0.8 !important;
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.wonderroomweather {
	background-image:
		linear-gradient(160deg, rgba(99, 102, 241, 0.5) 0%, rgba(67, 56, 202, 0.35) 100%),
		url(/client/fx/weather-wonderroom.png) !important;
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.magicroomweather {
	background-image:
		linear-gradient(160deg, rgba(192, 132, 252, 0.5) 0%, rgba(126, 34, 206, 0.35) 100%),
		url(/client/fx/weather-magicroom.png) !important;
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.gravityweather {
	background-image:
		linear-gradient(160deg, rgba(168, 85, 247, 0.48) 0%, rgba(88, 28, 135, 0.35) 100%),
		url(/client/fx/weather-gravity.png) !important;
}

/* Climas / terrenos pkmn.pro (eternity-field) — ?v= bustea 404 cacheados por proxy Smogon */
.ps-room[id^="room-battle-"] .innerbattle > .weather.sunweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.sunnydayweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.desolatelandweather {
	background:
		linear-gradient(180deg, rgba(255, 200, 90, 0.12) 0%, rgba(255, 140, 40, 0.06) 40%, transparent 80%),
		transparent url(/client/fx/eternity-field/weather-sun.gif?v=3) no-repeat center center / cover !important;
	opacity: 0.58 !important;
	mix-blend-mode: overlay;
	filter: saturate(0.9) contrast(1.05);
}

/* Sol: calor suave en el estadio */
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.sunweather) > .backdrop,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.sunnydayweather) > .backdrop,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.desolatelandweather) > .backdrop,
.battle:has(.innerbattle > .weather.sunweather) .backdrop,
.battle:has(.innerbattle > .weather.sunnydayweather) .backdrop,
.battle:has(.innerbattle > .weather.desolatelandweather) .backdrop {
	filter: saturate(1.12) brightness(1.06) sepia(0.12) !important;
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.rainweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.raindanceweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.primordialseaweather {
	background: transparent url(/client/fx/eternity-field/weather-rain.gif?v=3) no-repeat center center / cover !important;
	opacity: 0.58 !important;
	mix-blend-mode: soft-light;
	filter: saturate(0.85) brightness(1.02) contrast(1.08);
}

/* Lluvia: oscurece el estadio con calma, sin saturación azul */
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.rainweather) > .backdrop,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.raindanceweather) > .backdrop,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.primordialseaweather) > .backdrop,
.battle:has(.innerbattle > .weather.rainweather) .backdrop,
.battle:has(.innerbattle > .weather.raindanceweather) .backdrop,
.battle:has(.innerbattle > .weather.primordialseaweather) .backdrop {
	filter: saturate(0.95) brightness(0.78) contrast(1.02) !important;
	opacity: 0.74 !important;
}

.ps-room[id^="room-battle-"] .battle:has(.weather.rainweather),
.ps-room[id^="room-battle-"] .battle:has(.weather.raindanceweather),
.ps-room[id^="room-battle-"] .battle:has(.weather.primordialseaweather) {
	background: linear-gradient(165deg, #1e2840 0%, #0f1724 55%, #16102a 100%) !important;
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.sandstormweather {
	background: transparent url(/client/fx/eternity-field/weather-sand.gif?v=1) no-repeat center center / cover !important;
	opacity: 0.36 !important;
	mix-blend-mode: normal;
}

.ps-room[id^="room-battle-"] .innerbattle > .weather.hailweather,
.ps-room[id^="room-battle-"] .innerbattle > .weather.snowscapeweather {
	background: transparent url(/client/fx/eternity-field/weather-hail.gif?v=2) no-repeat center center / cover !important;
	/* soft-light lavaba los copos blancos; screen + contraste los hace caer visibles */
	opacity: 0.62 !important;
	mix-blend-mode: screen;
	filter: contrast(1.25) brightness(1.08) saturate(0.85);
}

/* Nevada/granizo: estadio un poco más frío */
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.hailweather) > .backdrop,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.snowscapeweather) > .backdrop,
.battle:has(.innerbattle > .weather.hailweather) .backdrop,
.battle:has(.innerbattle > .weather.snowscapeweather) .backdrop {
	filter: saturate(0.9) brightness(0.88) contrast(1.04) !important;
}

/* Lluvia + eléctrico: ambos un poco más presentes juntos */
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.electricterrainweather):has(> .weather.rainweather) > .weather.rainweather,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.electricterrainweather):has(> .weather.raindanceweather) > .weather.raindanceweather,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.electricterrainweather):has(> .weather.primordialseaweather) > .weather.primordialseaweather {
	opacity: 0.64 !important;
	mix-blend-mode: soft-light;
	filter: contrast(1.14) brightness(1.06) saturate(0.9);
}

.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.electricterrainweather):has(> .weather.rainweather) > .weather.electricterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.electricterrainweather):has(> .weather.raindanceweather) > .weather.electricterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.electricterrainweather):has(> .weather.primordialseaweather) > .weather.electricterrainweather::before {
	opacity: 0.88;
	filter: saturate(1.15) brightness(1.1) contrast(1.08);
}

/* Tinte de respaldo en el estadio si el PNG queda flojo */
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.grassyterrainweather) > .backdrop,
.battle:has(.innerbattle > .weather.grassyterrainweather) .backdrop {
	filter: saturate(1.08) hue-rotate(-4deg) brightness(0.98) !important;
}
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.electricterrainweather) > .backdrop,
.battle:has(.innerbattle > .weather.electricterrainweather) .backdrop {
	filter: saturate(1.28) brightness(1.03) contrast(1.05) !important;
}
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.mistyterrainweather) > .backdrop,
.battle:has(.innerbattle > .weather.mistyterrainweather) .backdrop {
	filter: saturate(1.15) brightness(1.05) !important;
}
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.psychicterrainweather) > .backdrop,
.battle:has(.innerbattle > .weather.psychicterrainweather) .backdrop {
	filter: saturate(1.2) hue-rotate(10deg) brightness(0.96) !important;
}

/* Si hay terreno + clima a la vez, refuerza el suelo */
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.grassyterrainweather):has(> .weather.sandstormweather) > .weather.grassyterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.electricterrainweather):has(> .weather.sandstormweather) > .weather.electricterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.mistyterrainweather):has(> .weather.sandstormweather) > .weather.mistyterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.psychicterrainweather):has(> .weather.sandstormweather) > .weather.psychicterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.grassyterrainweather):has(> .weather.raindanceweather) > .weather.grassyterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.grassyterrainweather):has(> .weather.sunnydayweather) > .weather.grassyterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.grassyterrainweather):has(> .weather.hailweather) > .weather.grassyterrainweather::before,
.ps-room[id^="room-battle-"] .innerbattle:has(> .weather.grassyterrainweather):has(> .weather.snowscapeweather) > .weather.grassyterrainweather::before {
	opacity: 0.78;
}

/* ── Scoreboard espectador (estilo skin / colores Eternity) ── */
.ps-room.et-spectator .et-spectator-vs-bar {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	z-index: 2;
}

.ps-room.et-spectator .et-spectator-scoreboard {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 136px;
	padding: 8px 14px;
	box-sizing: border-box;
	position: relative;
	overflow: visible;
	width: 100%;
	max-width: 100%;
	background:
		linear-gradient(180deg, rgba(18, 28, 44, 0.98) 0%, rgba(10, 16, 28, 0.98) 100%);
	border: 1px solid rgba(34, 211, 238, 0.4);
	border-radius: 6px;
	box-shadow:
		0 0 0 1px rgba(168, 85, 247, 0.14) inset,
		0 6px 20px rgba(0, 0, 0, 0.35),
		0 0 24px rgba(34, 211, 238, 0.12);
}

.ps-room.et-spectator .et-spectator-scoreboard::before,
.ps-room.et-spectator .et-spectator-scoreboard::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translateY(-50%) rotate(45deg);
	border: 1px solid rgba(34, 211, 238, 0.55);
	background: rgba(34, 211, 238, 0.18);
	box-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
	pointer-events: none;
}

.ps-room.et-spectator .et-spectator-scoreboard::before {
	left: 6px;
}

.ps-room.et-spectator .et-spectator-scoreboard::after {
	right: 6px;
}

.ps-room.et-spectator .et-sb-wing {
	min-width: 0;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.ps-room.et-spectator .et-sb-near {
	justify-content: flex-end;
}

.ps-room.et-spectator .et-sb-far {
	justify-content: flex-start;
}

.ps-room.et-spectator .et-sb-versus {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	padding: 4px 14px 5px;
	background: rgba(4, 10, 18, 0.92);
	border: 1px solid rgba(168, 85, 247, 0.45);
	border-radius: 2px;
	box-shadow:
		0 0 16px rgba(168, 85, 247, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ps-room.et-spectator .et-sb-versus-text {
	font-family: var(--et-battle-font);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: #f8fafc;
	line-height: 1.1;
	text-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}

.ps-room.et-spectator .et-sb-turn {
	margin-top: 2px;
	font-family: var(--et-battle-font);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #67e8f9;
	opacity: 0.95;
}

/* Trainer: PNG (avatar plate + 6 hex + placa de nombre) */
.ps-room.et-spectator .et-spectator-scoreboard .trainer {
	--et-sb-graphic-h: 128px;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: block !important;
	width: min(440px, 100%);
	min-width: 320px;
	height: var(--et-sb-graphic-h);
	max-width: 100%;
	opacity: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;
	overflow: visible;
}

.ps-room.et-spectator .et-sb-near .trainer {
	background-image: url(/client/fx/eternity-field/scoreboard-near.png?v=3);
}

.ps-room.et-spectator .et-sb-far .trainer {
	background-image: url(/client/fx/eternity-field/scoreboard-far.png?v=3);
}

.ps-room.et-spectator .et-spectator-scoreboard .trainer .badges {
	display: none !important;
}

/* Nombre: sobre la placa del PNG, bajo la cadena de hex (como la skin) */
.ps-room.et-spectator .et-spectator-scoreboard .trainer strong {
	position: absolute !important;
	bottom: 2.2%;
	z-index: 5;
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 14.5%;
	min-height: 15px;
	max-height: 20px;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #f1f5f9 !important;
	text-shadow:
		0 1px 0 #000,
		0 0 2px rgba(0, 0, 0, 0.95);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em;
	pointer-events: none;
	text-align: center;
	background: transparent;
	border-radius: 0;
	padding: 0 10px;
	box-sizing: border-box;
}

/* Near: avatar izq → nombre bajo los hex (derecha de la placa) */
.ps-room.et-spectator .et-sb-near .trainer strong {
	left: 24.5%;
	width: 44%;
}

/* Far: avatar der → nombre bajo los hex (izquierda de la placa) */
.ps-room.et-spectator .et-sb-far .trainer strong {
	left: 30.5%;
	right: auto;
	width: 44%;
}

/* Avatar: placa grande del PNG (near izq / far der) — % para escalar con el ancho */
.ps-room.et-spectator .et-spectator-scoreboard .trainer .trainersprite {
	position: absolute !important;
	top: 8%;
	width: 24% !important;
	height: 62% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	opacity: 1 !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center bottom !important;
	filter: none;
	pointer-events: none;
	z-index: 2;
}

.ps-room.et-spectator .et-sb-near .trainer .trainersprite {
	left: 2.2%;
	clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 8% 100%, 0% 55%);
}

.ps-room.et-spectator .et-sb-far .trainer .trainersprite {
	right: 2.2%;
	left: auto;
	clip-path: polygon(0% 0%, 82% 0%, 100% 55%, 92% 100%, 0% 100%);
}

/* Capa de slots: zona del PNG (no la barra de nombre) */
.ps-room.et-spectator .et-spectator-scoreboard .trainer .teamicons,
.ps-room.et-spectator .et-spectator-scoreboard .et-sb-hexrow {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	height: var(--et-sb-graphic-h) !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	z-index: 3;
	pointer-events: none;
}

/* Contenedor transparente centrado en cada hex del PNG */
.ps-room.et-spectator .et-spectator-scoreboard .et-sb-hex {
	position: absolute !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 11.5% !important;
	height: 36% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	background: none !important;
	box-shadow: none !important;
	clip-path: none !important;
	overflow: visible;
	transform: translate(-50%, -50%);
}

/* Near: placa avatar izq + 6 hex (centros del PNG, escalan con %) */
.ps-room.et-spectator .et-sb-near .et-sb-hex:nth-child(1) { left: 31.72%; top: 59.05%; }
.ps-room.et-spectator .et-sb-near .et-sb-hex:nth-child(2) { left: 41.28%; top: 40.00%; }
.ps-room.et-spectator .et-sb-near .et-sb-hex:nth-child(3) { left: 50.81%; top: 59.05%; }
.ps-room.et-spectator .et-sb-near .et-sb-hex:nth-child(4) { left: 60.34%; top: 40.00%; }
.ps-room.et-spectator .et-sb-near .et-sb-hex:nth-child(5) { left: 69.63%; top: 59.05%; }
.ps-room.et-spectator .et-sb-near .et-sb-hex:nth-child(6) { left: 79.16%; top: 40.00%; }

/* Far: 6 hex + placa avatar der */
.ps-room.et-spectator .et-sb-far .et-sb-hex:nth-child(1) { left: 20.53%; top: 40.00%; }
.ps-room.et-spectator .et-sb-far .et-sb-hex:nth-child(2) { left: 30.06%; top: 59.05%; }
.ps-room.et-spectator .et-sb-far .et-sb-hex:nth-child(3) { left: 39.34%; top: 40.00%; }
.ps-room.et-spectator .et-sb-far .et-sb-hex:nth-child(4) { left: 48.88%; top: 59.05%; }
.ps-room.et-spectator .et-sb-far .et-sb-hex:nth-child(5) { left: 58.41%; top: 40.00%; }
.ps-room.et-spectator .et-sb-far .et-sb-hex:nth-child(6) { left: 67.97%; top: 59.05%; }

/*
 * NO tocar background-position/size del .picon (sprite-sheet PS).
 */
.ps-room.et-spectator .et-spectator-scoreboard .et-sb-hex > .picon,
.ps-room.et-spectator .et-spectator-scoreboard .et-sb-hex > span.picon {
	float: none !important;
	display: block !important;
	width: 40px !important;
	height: 30px !important;
	min-width: 40px !important;
	min-height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	transform: scale(0.84);
	transform-origin: center center;
	clip-path: none;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	image-rendering: pixelated;
	opacity: 1 !important;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85));
}

/* Badge «Espectando» */
.ps-room.et-spectator .et-spectator-stage-inner::before,
.ps-room.et-spectator .et-battle-stage.et-spectator-field > .et-spectator-stage-inner::before {
	content: "Espectando";
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 6;
	pointer-events: none;
	font-size: 9pt;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 12px;
	border: 1px solid rgba(34, 211, 238, 0.55);
	border-radius: 999px;
	color: #e0f7ff;
	background: rgba(8, 24, 36, 0.82);
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.28),
		0 0 14px rgba(34, 211, 238, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	font-family: var(--et-battle-font);
}

/* Chat derecho: ancho moderado, tipografía más aireada */
.ps-room.et-spectator .battle-log {
	border-left: 1px solid rgba(34, 211, 238, 0.28) !important;
	border-top: none !important;
	background:
		linear-gradient(180deg, rgba(12, 20, 34, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%) !important;
	box-shadow: inset 1px 0 0 rgba(34, 211, 238, 0.08);
	font-size: 10pt !important;
	line-height: 1.5 !important;
}

.ps-room.et-spectator .battle-log .inner {
	padding: 6px 14px 8px !important;
}

.ps-room.et-spectator .battle-log .message-log .chat,
.ps-room.et-spectator .battle-log .chat,
.ps-room.et-spectator .battle-log .notice {
	padding: 2px 0 !important;
	margin: 0 !important;
	font-size: 10pt !important;
	line-height: 1.5 !important;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.ps-room.et-spectator .battle-log .inner-preempt.message-log h2,
.ps-room.et-spectator .battle-log .message-log h2,
.ps-room.et-spectator .battle-log h2.battle-history {
	font-size: 9.5pt !important;
	margin: 12px 0 6px !important;
	padding: 4px 10px !important;
	letter-spacing: 0.06em !important;
}

.ps-room.et-spectator .battle-log-add {
	padding: 6px 10px 8px !important;
	border-top: 1px solid rgba(34, 211, 238, 0.18) !important;
	background: rgba(6, 10, 18, 0.92) !important;
}

.ps-room.et-spectator .battle-log-add .textbox {
	font-size: 10pt !important;
	padding: 7px 10px !important;
	min-height: 34px !important;
	border-radius: 8px !important;
}

.ps-room.et-spectator .userlist .userlist-count {
	border-bottom: 1px solid rgba(34, 211, 238, 0.16) !important;
}
.ps-room.et-spectator .userlist {
	background: rgba(10, 16, 28, 0.95) !important;
}

/* Battle options: top-right of the right log/chat panel (not left userlist) */
.ps-room.et-spectator > .et-spec-log-battleopts {
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 6;
	font-size: 9pt;
	padding: 3px 8px;
	border-radius: 6px;
	border: 1px solid rgba(34, 211, 238, 0.35);
	background: rgba(10, 18, 30, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
}
.ps-room.et-spectator > .battle-log {
	/* Keep first log lines clear of the floating options button */
	padding-top: 30px !important;
	box-sizing: border-box;
}

.ps-room.et-spectator .battle-controls.et-spectator-controls {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100%;
	border-color: rgba(34, 211, 238, 0.28) !important;
	padding: 6px 8px 8px !important;
	background: linear-gradient(180deg, rgba(12, 22, 34, 0.92) 0%, rgba(8, 14, 24, 0.96) 100%) !important;
	box-sizing: border-box;
}

/* Tabla de controles espectador (bordes invisibles) */
.ps-room.et-spectator .et-spectator-controls-wrap {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 860px;
}

.ps-room.et-spectator .et-spectator-controls-table {
	width: 100%;
	border: none !important;
	border-collapse: separate;
	border-spacing: 5px 5px;
	table-layout: fixed;
	background: transparent !important;
}

.ps-room.et-spectator .et-spectator-controls-table td,
.ps-room.et-spectator .et-spectator-controls-table th {
	border: none !important;
	padding: 0 !important;
	vertical-align: middle;
	background: transparent !important;
}

.ps-room.et-spectator .et-spec-row-playback .et-spec-cell {
	width: 20%;
}

.ps-room.et-spectator .et-spec-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 34px;
	margin: 0 !important;
	padding: 6px 8px !important;
	border-radius: 9px !important;
	border: 1px solid rgba(34, 211, 238, 0.28) !important;
	background: linear-gradient(180deg, rgba(22, 36, 52, 0.95), rgba(12, 22, 34, 0.98)) !important;
	color: #e2e8f0 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
	white-space: nowrap;
}

.ps-room.et-spectator .et-spec-btn .et-spec-btn-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ps-room.et-spectator .et-spec-row-actions .et-spec-btn .et-spec-btn-label {
	text-overflow: clip;
	overflow: visible;
}

.ps-room.et-spectator .et-spec-btn i.fa {
	opacity: 0.9;
	font-size: 11px;
	flex-shrink: 0;
}

.ps-room.et-spectator .et-spec-btn:hover:not(.disabled):not([disabled]) {
	border-color: rgba(34, 211, 238, 0.55) !important;
	background: linear-gradient(180deg, rgba(28, 48, 68, 0.98), rgba(16, 30, 46, 1)) !important;
	transform: translateY(-1px);
}

.ps-room.et-spectator .et-spec-btn.disabled,
.ps-room.et-spectator .et-spec-btn[disabled] {
	opacity: 0.42 !important;
	cursor: default !important;
	transform: none !important;
}

.ps-room.et-spectator .et-spec-cell-play .et-spec-btn {
	border-color: rgba(34, 211, 238, 0.45) !important;
	color: #cffafe !important;
}

.ps-room.et-spectator .et-spectator-tools {
	padding-top: 0 !important;
}

.ps-room.et-spectator .et-spectator-tools .button,
.ps-room.et-spectator .et-spectator-tool-roomid .button,
.ps-room.et-spectator .et-spectator-tool-replay .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 34px;
	margin: 0 !important;
	padding: 6px 8px !important;
	border-radius: 9px !important;
	border: 1px solid rgba(148, 163, 184, 0.3) !important;
	background: linear-gradient(180deg, rgba(22, 36, 52, 0.95), rgba(12, 22, 34, 0.98)) !important;
	color: #cbd5e1 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
	box-sizing: border-box;
}

.ps-room.et-spectator .et-spectator-tools .button:hover:not(:disabled),
.ps-room.et-spectator .et-spectator-tool-roomid .button:hover:not(:disabled),
.ps-room.et-spectator .et-spectator-tool-replay .button:hover:not(:disabled) {
	border-color: rgba(34, 211, 238, 0.4) !important;
	color: #e0f2fe !important;
}

html.et-spain-night .ps-room.et-spectator,
.et-spain-night .ps-room.et-spectator {
	background:
		radial-gradient(ellipse 70% 55% at 42% 28%, rgba(34, 211, 238, 0.1), transparent 62%),
		radial-gradient(ellipse 50% 40% at 50% 100%, rgba(99, 102, 241, 0.08), transparent 55%);
}

/* Capas clima/terreno: aislar paint; pausar pulses UI con pestaña oculta */
.ps-room[id^="room-battle-"] .innerbattle > .weather {
	contain: paint;
	pointer-events: none;
}
/* Jugador: contención extra en el stage (controles + FX a la vez); no tocar layout espectador */
.ps-room[id^="room-battle-"]:not(.et-spectator) .et-battle-stage {
	contain: layout paint;
}
.ps-room[id^="room-battle-"]:not(.et-spectator) .battle {
	contain: paint;
	isolation: isolate;
}
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle > .weather::before {
	contain: strict;
	will-change: auto;
}
/* Jugador: menos filtros encadenados sobre backdrop (GPU con menú de moves abierto) */
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.sunweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.sunnydayweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.desolatelandweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.rainweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.raindanceweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.primordialseaweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.hailweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.snowscapeweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.grassyterrainweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.electricterrainweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.mistyterrainweather) > .backdrop,
.ps-room[id^="room-battle-"]:not(.et-spectator) .innerbattle:has(> .weather.psychicterrainweather) > .backdrop {
	filter: none !important;
}
html.et-doc-hidden .ps-room[id^="room-battle-"] .hptext,
html.et-doc-hidden .ps-room[id^="room-battle-"] .timerbutton,
html.et-doc-hidden .ps-room[id^="room-battle-"] .et-timer-pulse {
	animation-play-state: paused !important;
}