/* =============================================================================
   PVP -- placar dos reinos: uma janela do jogo (board + titulo), o medidor do
   cliente como cabo de guerra e um ThinBoard por reino. No celular as colunas
   viram linhas: bandeira, nome e numero lado a lado.
   ============================================================================= */

.c-pvp-placar__janela {
	max-width: 62rem;
}

.c-pvp-placar__cabo {
	margin: 0 0 14px;
}

.c-pvp-placar__fatia {
	flex-grow: 0;
	flex-shrink: 0;
	transition: flex-basis 1.2s cubic-bezier(.2, .8, .2, 1);
}

.c-pvp-placar__fatia + .c-pvp-placar__fatia {
	box-shadow: -2px 0 0 #000;
}

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

.c-pvp-placar__reino {
	display: grid;
	justify-items: center;
	align-content: start;
	text-align: center;
	padding: 16px 8px 12px;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1.3), filter .3s;
}

/* A cor do reino entra por baixo do ThinBoard, como um brilho no chao da casa. */
.c-pvp-placar__reino::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%);
	pointer-events: none;
}

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

.c-pvp-placar__reino.is-lider {
	filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 55%, transparent));
}

.c-pvp-placar__coroa {
	position: absolute;
	z-index: 1;
	top: -20px;
	left: 50%;
	color: #ffe39a;
	filter: drop-shadow(0 2px 6px rgba(240, 214, 143, .7));
	transform: translateX(-50%) scale(0) rotate(-20deg);
	transition: transform .5s cubic-bezier(.2, .9, .3, 1.6);
}

.c-pvp-placar__reino.is-lider .c-pvp-placar__coroa {
	transform: translateX(-50%) scale(1) rotate(0);
}

.c-pvp-placar__bandeira {
	position: relative;
	width: clamp(70px, 9vw, 104px);
	height: auto;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .8);
}

.c-pvp-placar__nome {
	position: relative;
	margin: .55rem 0 0;
	font-family: var(--pvp-radical);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	color: var(--c);
	text-shadow: 0 2px 0 #000;
}

.c-pvp-placar__abates {
	position: relative;
	display: grid;
	margin: .1rem 0 0;
}

.c-pvp-placar__abates b {
	font-family: var(--pvp-radical);
	font-weight: 400;
	font-size: clamp(3rem, 7.5vw, 5rem);
	line-height: .95;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 3px 0 #000, 0 0 26px color-mix(in srgb, var(--c) 55%, transparent);
}

.c-pvp-placar__abates span {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: rgba(232, 220, 192, .6);
}

.c-pvp-placar__mais {
	position: absolute;
	left: 50%;
	top: 0;
	font-family: var(--pvp-radical);
	font-size: 1.6rem;
	color: var(--c);
	text-shadow: 0 2px 0 #000;
	pointer-events: none;
	animation: c-pvp-placar-mais 1.4s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes c-pvp-placar-mais {
	from { opacity: 0; transform: translate(-50%, 0) scale(.6); }
	20%  { opacity: 1; transform: translate(-50%, -18px) scale(1.2); }
	to   { opacity: 0; transform: translate(-50%, -58px) scale(1); }
}

.c-pvp-placar__reino.is-pulso { animation: c-pvp-placar-pulso .6s ease-out; }

@keyframes c-pvp-placar-pulso {
	30% { transform: scale(1.04); }
}

.c-pvp-placar__bonus {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: .6rem 0 0;
}

.c-pvp-placar__selo {
	font-size: .76rem;
	font-weight: 700;
	white-space: nowrap;
	transition: opacity .3s;
}

.c-pvp-placar__selo--ouro { color: #ffd76a; }
.c-pvp-placar__selo--xp { color: #9cc0ff; }
.c-pvp-placar__selo.is-zero { opacity: .32; }

.c-pvp-placar__gente {
	position: relative;
	margin: .5rem 0 0;
	font-size: .78rem;
	color: rgba(232, 220, 192, .55);
}

.c-pvp-placar__nota {
	margin: 12px 0 0;
	text-align: center;
	font-size: .9rem;
	color: rgba(232, 220, 192, .8);
}

/* ---- celular: uma linha por reino -------------------------------------------------- */
@media (max-width: 560px) {
	.c-pvp-placar__reinos { grid-template-columns: 1fr; gap: 6px; }
	.c-pvp-placar__reino {
		grid-template-columns: 64px 1fr auto;
		grid-template-areas:
			"band nome  num"
			"band bonus num"
			"band gente num";
		justify-items: start;
		align-items: center;
		column-gap: 10px;
		row-gap: 2px;
		padding: 8px 10px;
		text-align: left;
	}
	.c-pvp-placar__reino::before {
		background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, transparent), transparent 60%);
	}
	.c-pvp-placar__bandeira { grid-area: band; width: 64px; }
	.c-pvp-placar__nome { grid-area: nome; margin: 0; font-size: 1.25rem; line-height: 1; }
	.c-pvp-placar__bonus { grid-area: bonus; justify-content: flex-start; margin: 0; }
	.c-pvp-placar__gente { grid-area: gente; margin: 0; font-size: .72rem; }
	.c-pvp-placar__abates { grid-area: num; justify-items: end; margin: 0; }
	.c-pvp-placar__abates b { font-size: 2.8rem; }
	.c-pvp-placar__abates span { font-size: .6rem; }
	.c-pvp-placar__selo { font-size: .68rem; }
	/* a coroa pousa no canto da bandeira, longe do numero */
	.c-pvp-placar__coroa { top: -12px; left: 48px; transform: scale(0) rotate(-20deg); }
	.c-pvp-placar__reino.is-lider .c-pvp-placar__coroa { transform: scale(.8) rotate(-15deg); }
}

@media (prefers-reduced-motion: reduce) {
	.c-pvp-placar__reino.is-pulso { animation: none; }
}