/* Cartel de combate de los artículos Versus (includes/versus.php). Usa los tokens del tema. */

.mv-cartel {
	--a: var(--mv-spot, #d4006f);
	--b: var(--mv-cyan, #00a0e3);
	--print: var(--mv-print-ink, #121214);
	--display: var(--mv-display, "Arial Narrow", sans-serif);
	max-width: var(--mv-wide, 58rem);
	margin: 1.6em auto 0;
	padding: clamp(18px, 3vw, 30px);
	background: var(--mv-night, #0e0e10);
	background-image: radial-gradient(circle, rgb(255 255 255 / 0.1) 26%, transparent 29%);
	background-size: 7px 7px;
	color: var(--mv-night-ink, #f1f1ec);
	box-shadow: 10px 10px 0 var(--mv-yellow, #ffe500);
}

.mv-cartel__ring {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(10px, 2vw, 22px);
}

.mv-cartel__lado {
	display: grid;
	gap: 6px;
	padding: clamp(12px, 2vw, 18px);
	border: 3px solid var(--mv-night-ink, #f1f1ec);
}

.mv-cartel__lado--a {
	border-left: 12px solid var(--a);
}

.mv-cartel__lado--b {
	border-right: 12px solid var(--b);
	text-align: right;
	justify-items: end;
}

.mv-cartel__tipo {
	justify-self: start;
	padding: 0.15em 0.6em 0.1em;
	background: var(--tipo, #ffffff);
	color: var(--tipo-ink, var(--print));
	font-family: var(--display);
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mv-cartel__lado--b .mv-cartel__tipo {
	justify-self: end;
}

.mv-tipo--nintendo { --tipo: var(--mv-red, #e30613); --tipo-ink: #ffffff; }
.mv-tipo--pc       { --tipo: var(--mv-cyan, #00a0e3); --tipo-ink: var(--mv-print-ink, #121214); }
.mv-tipo--retro    { --tipo: var(--mv-yellow, #ffe500); --tipo-ink: var(--mv-print-ink, #121214); }
.mv-tipo--otra     { --tipo: var(--mv-violet, #662483); --tipo-ink: #ffffff; }
.mv-tipo--sobremesa { --tipo: var(--mv-green, #00a651); --tipo-ink: #ffffff; }

.mv-cartel__nombre {
	font-family: var(--display);
	font-weight: 900;
	font-style: italic;
	font-size: clamp(1.5rem, 0.9rem + 2.6vw, 2.8rem);
	line-height: 0.92;
	text-transform: uppercase;
	color: #ffffff;
}

.mv-cartel__tuya {
	display: none;
	justify-self: start;
	padding: 0.1em 0.5em;
	background: var(--mv-yellow, #ffe500);
	color: var(--print);
	font-family: var(--display);
	font-weight: 900;
	font-size: 0.85rem;
	text-transform: uppercase;
}

.mv-cartel__lado--b .mv-cartel__tuya {
	justify-self: end;
}

html[data-consola="switch2"] .mv-cartel__lado[data-lector~="switch2"] .mv-cartel__tuya,
html[data-consola="switch"] .mv-cartel__lado[data-lector~="switch"] .mv-cartel__tuya,
html[data-consola="deck"] .mv-cartel__lado[data-lector~="deck"] .mv-cartel__tuya,
html[data-consola="ally"] .mv-cartel__lado[data-lector~="ally"] .mv-cartel__tuya,
html[data-consola="legion"] .mv-cartel__lado[data-lector~="legion"] .mv-cartel__tuya,
html[data-consola="retro"] .mv-cartel__lado[data-lector~="retro"] .mv-cartel__tuya {
	display: inline-block;
}

/* El VS: estrella de cómic que «golpea» al cargar */
.mv-cartel__vs {
	display: grid;
	place-items: center;
	width: clamp(64px, 9vw, 104px);
	aspect-ratio: 1;
	background: var(--mv-yellow, #ffe500);
	color: var(--print);
	clip-path: polygon(50% 0, 61% 30%, 95% 18%, 72% 45%, 100% 62%, 66% 66%, 72% 100%, 50% 76%, 25% 100%, 32% 66%, 0 60%, 28% 44%, 6% 16%, 39% 30%);
	font-family: var(--display);
	font-weight: 900;
	font-style: italic;
	font-size: clamp(1.4rem, 0.9rem + 1.8vw, 2.3rem);
	transform: rotate(-8deg);
}

/* Pantallas superpuestas a escala */
.mv-cartel__pantallas {
	--px: clamp(22px, 5vw, 46px);
	display: grid;
	place-items: end center;
	margin-top: 22px;
	padding: 14px;
}

.mv-cartel__pantallas .mv-screen {
	position: relative;
	grid-area: 1 / 1;
	width: calc(var(--w) * var(--px));
	height: calc(var(--h) * var(--px));
	border: 4px solid var(--a);
	border-radius: 3px;
}

.mv-cartel__pantallas .mv-cartel__pant--b {
	border-color: var(--b);
	border-style: dashed;
}

.mv-cartel__nota-pant {
	margin: 0;
	text-align: center;
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #b2b2b8;
}

/* Marcador: barras que crecen desde el centro */
.mv-cartel__marcador {
	display: grid;
	gap: 8px;
	margin-top: 22px;
}

.mv-cartel__fila {
	display: grid;
	grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) 6.2rem minmax(0, 1fr) minmax(4.5rem, auto);
	align-items: center;
	gap: 10px;
}

.mv-cartel__etiqueta {
	text-align: center;
	font-family: var(--display);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mv-yellow, #ffe500);
}

.mv-cartel__barra {
	height: 14px;
	background: rgb(255 255 255 / 0.1);
}

.mv-cartel__barra::before {
	content: "";
	display: block;
	height: 100%;
	width: calc(var(--v) * 100%);
	background: var(--a);
}

.mv-cartel__barra--a::before {
	margin-left: auto;
	transform-origin: right;
}

.mv-cartel__barra--b::before {
	background: var(--b);
	transform-origin: left;
}

.mv-cartel__dato {
	font-weight: 700;
	font-size: 1rem;
	white-space: nowrap;
}

.mv-cartel__dato--b {
	text-align: right;
}

.mv-cartel__dato.gana {
	color: #ffffff;
}

.mv-cartel__dato--a.gana::before,
.mv-cartel__dato--b.gana::after {
	content: "★";
	color: var(--mv-yellow, #ffe500);
	margin-inline: 0.25em;
}

.mv-cartel__resultado {
	margin: 20px 0 0;
	text-align: center;
	font-family: var(--display);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mv-cartel__resultado span {
	font-weight: 900;
	font-style: italic;
	font-size: 2.6rem;
	vertical-align: -0.12em;
}

.mv-cartel__resultado span:first-child {
	color: var(--a);
}

.mv-cartel__resultado span:nth-child(2) {
	color: var(--b);
}

.mv-cartel__pie {
	margin: 6px auto 0;
	max-width: 40rem;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #b2b2b8;
}

.mv-cartel__pie a {
	color: #ffffff;
}

@media (max-width: 600px) {
	.mv-cartel__ring {
		grid-template-columns: 1fr;
		justify-items: stretch;
	}

	.mv-cartel__vs {
		justify-self: center;
		margin: -18px 0;
		z-index: 1;
		position: relative;
	}

	.mv-cartel__fila {
		grid-template-columns: minmax(0, 1fr) 5.4rem minmax(0, 1fr);
		grid-template-areas: "da et db" "ba et bb";
		row-gap: 4px;
	}

	.mv-cartel__dato--a { grid-area: da; }
	.mv-cartel__dato--b { grid-area: db; }
	.mv-cartel__barra--a { grid-area: ba; }
	.mv-cartel__barra--b { grid-area: bb; }
	.mv-cartel__etiqueta { grid-area: et; }

	.mv-cartel__dato {
		font-size: 0.92rem;
		white-space: normal;
	}
}