/* =============================================================================
   PVP -- numeros do reino: quatro ThinBoards do jogo, cada um com o icone num
   slot de item e o numero na fonte do PVP, contando do zero.
   ============================================================================= */

.c-pvp-numeros {
	padding-top: 0;
}

.c-pvp-numeros__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-pvp-numeros__bloco {
	display: grid;
	grid-template-columns: 44px 1fr;
	grid-template-areas:
		"icone valor"
		"icone rotulo"
		"dica  dica";
	column-gap: 10px;
	align-items: center;
	padding: 10px 12px 12px;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1.3);
}

.c-pvp-numeros__bloco::before {
	/* luz que segue o mouse: --mx/--my postos pelo JS */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(220px circle at var(--mx, -100px) var(--my, -100px), rgba(240, 214, 143, .12), transparent 60%);
	pointer-events: none;
}

.c-pvp-numeros__bloco:hover { transform: translateY(-3px); }

.c-pvp-numeros__icone {
	grid-area: icone;
	color: var(--pvp-areia);
}

.c-pvp-numeros__icone--vivo { color: #4fd17a; }
.c-pvp-numeros__icone--espada { color: var(--pvp-shinsoo); }
.c-pvp-numeros__icone--gente { color: var(--pvp-jinno); }
.c-pvp-numeros__icone--nivel { color: var(--pvp-chunjo); }

.c-pvp-numeros__valor {
	grid-area: valor;
	font-family: var(--pvp-radical);
	font-weight: 400;
	font-size: clamp(2.1rem, 4.4vw, 2.9rem);
	line-height: .95;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 0 #000;
}

.c-pvp-numeros__rotulo {
	grid-area: rotulo;
	font-size: .86rem;
	font-weight: 700;
	color: #f3e6c4;
}

.c-pvp-numeros__dica {
	grid-area: dica;
	margin-top: .5rem;
	font-size: .78rem;
	line-height: 1.4;
	color: rgba(232, 220, 192, .5);
}

.c-pvp-numeros__fonte {
	margin: .8rem 0 0;
	font-size: .8rem;
	color: rgba(242, 240, 236, .45);
	text-align: right;
}

@media (max-width: 900px) {
	.c-pvp-numeros__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
	.c-pvp-numeros__bloco {
		grid-template-columns: 1fr;
		grid-template-areas: "icone" "valor" "rotulo";
		justify-items: start;
		row-gap: 4px;
		padding: 8px 10px 10px;
	}
	.c-pvp-numeros__icone { width: 36px; height: 36px; }
	.c-pvp-numeros__dica { display: none; }
	.c-pvp-numeros__fonte { text-align: left; }
}