/* =============================================================================
   PVP -- o mapa: a janela do atlas (board + titulo) com os pontos, e o cartao do
   lugar como outra janela, com o recorte num ThinBoard. No celular o cartao vem
   logo embaixo do mapa, compacto, e as setas ficam no alcance do polegar.
   ============================================================================= */

.c-pvp-mapa__corpo {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.c-pvp-mapa__quadro {
	position: relative;
	line-height: 0;
	box-shadow: inset 0 0 0 1px #000;
	background: #1a0f08;
}

.c-pvp-mapa__img {
	display: block;
	width: 100%;
	height: auto;
}

.c-pvp-mapa__ponto {
	position: absolute;
	z-index: 1;
	left: var(--x);
	top: var(--y);
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c) 30%, transparent);
	border: 2px solid var(--c);
	box-shadow: 0 0 0 2px #000, 0 0 14px var(--c);
	line-height: normal;
	transition: transform .25s cubic-bezier(.2, .9, .3, 1.6), background .25s;
}

.c-pvp-mapa__ponto::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid var(--c);
	opacity: 0;
}

/* alvo de toque maior que o desenho */
.c-pvp-mapa__ponto::after {
	content: "";
	position: absolute;
	inset: -10px;
}

.c-pvp-mapa__ponto--ponte { width: 16px; height: 16px; margin: -8px 0 0 -8px; }

.c-pvp-mapa__ponto:hover,
.c-pvp-mapa__ponto:focus-visible { transform: scale(1.3); }

.c-pvp-mapa__ponto.is-ativo {
	transform: scale(1.35);
	background: var(--c);
}

.c-pvp-mapa__ponto.is-ativo::before {
	animation: c-pvp-mapa-onda 1.6s ease-out infinite;
}

@keyframes c-pvp-mapa-onda {
	from { transform: scale(1); opacity: .9; }
	to   { transform: scale(3.2); opacity: 0; }
}

/* rotulo no estilo da dica do jogo: ThinBoard pequeno */
.c-pvp-mapa__rotulo {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translate(-50%, 4px);
	padding: 3px 7px;
	border: 1px solid #6f5a33;
	background: rgba(0, 0, 0, .82);
	color: #f3e6c4;
	font-size: .72rem;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}

.c-pvp-mapa__ponto:hover .c-pvp-mapa__rotulo,
.c-pvp-mapa__ponto:focus-visible .c-pvp-mapa__rotulo,
.c-pvp-mapa__ponto.is-ativo .c-pvp-mapa__rotulo {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---- cartao do lugar ----------------------------------------------------------- */

.c-pvp-mapa__lupa {
	position: relative;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	line-height: 0;
}

.c-pvp-mapa__lupa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: opacity .35s, transform 6s ease-out;
}

.c-pvp-mapa__lupa.is-trocando img {
	opacity: 0;
	transform: scale(1.18);
	transition: opacity .2s, transform .2s;
}

.c-pvp-mapa__cartao:hover .c-pvp-mapa__lupa img { transform: scale(1.14); }

.c-pvp-mapa__mira {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--c), var(--c)) center / 1px 22% no-repeat,
		linear-gradient(var(--c), var(--c)) center / 22% 1px no-repeat;
	opacity: .6;
	box-shadow: inset 0 0 50px rgba(0, 0, 0, .7);
	pointer-events: none;
}

.c-pvp-mapa__nome {
	margin: .7rem 0 0;
	font-family: var(--pvp-radical);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--c);
	text-shadow: 0 2px 0 #000;
}

.c-pvp-mapa__texto {
	margin: .4rem 0 0;
	min-height: 4.6em;
	font-size: .93rem;
	line-height: 1.55;
	color: rgba(232, 220, 192, .8);
}

.c-pvp-mapa__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: .6rem;
}

.c-pvp-mapa__seta {
	min-width: 56px;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
}

.c-pvp-mapa__conta {
	min-width: 4.5rem;
	font-size: .85rem;
}

/* A lista e a versao sem JS; com JS (pvp-js) ela some e o cartao manda. */
.c-pvp-mapa__lista {
	margin: 1.5rem 0 0;
	padding: 0 0 0 1.1rem;
	color: rgba(242, 240, 236, .7);
	line-height: 1.6;
}

.pvp-js .c-pvp-mapa__lista {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

@media (max-width: 820px) {
	.c-pvp-mapa__corpo { grid-template-columns: 1fr; gap: 8px; }
	.c-pvp-mapa__cartao {
		display: grid;
		grid-template-columns: 6.5rem 1fr;
		grid-template-areas:
			"tipo  tipo"
			"lupa  nome"
			"lupa  texto"
			"nav   nav";
		column-gap: 10px;
		align-items: start;
	}
	.c-pvp-mapa__tipo { grid-area: tipo; }
	.c-pvp-mapa__lupa { grid-area: lupa; }
	.c-pvp-mapa__nome { grid-area: nome; margin: 0; font-size: 1.3rem; }
	.c-pvp-mapa__texto { grid-area: texto; min-height: 0; font-size: .86rem; margin-top: .25rem; }
	.c-pvp-mapa__nav { grid-area: nav; }
	/* o mapa no celular tem um terco da largura: o ponto encolhe junto (o alvo de
	   toque continua maior, pelo ::after) */
	.c-pvp-mapa__ponto { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 2px; }
	.c-pvp-mapa__ponto--ponte { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
	.c-pvp-mapa__rotulo { display: none; }
	.c-pvp-mapa__ponto.is-ativo .c-pvp-mapa__rotulo { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.c-pvp-mapa__ponto.is-ativo::before { animation: none; }
	.c-pvp-mapa__lupa img { transition: opacity .2s; }
}