/* =============================================================================
   PVP -- "Morreu, perdeu" e o maior matador do canal.

   A janela de equipamento e a do inventario do cliente (equipamento.png, 155x187
   em 1x), desenhada em --e vezes. Os slots tem as posicoes do uiscript
   inventorywindow.py (EquipmentSlot em (3, 3) + o x/y de cada slot), em px de
   1x; o CSS multiplica por --e.
   ============================================================================= */

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

/* ---- a janela de equipamento ------------------------------------------------- */

.c-pvp-risco__palco {
	position: relative;
	display: grid;
	justify-items: center;
	padding: 4px 0 0;
}

.c-pvp-risco__janela {
	--e: 1.5;
	position: relative;
	width: calc(155px * var(--e));
	height: calc(187px * var(--e));
	background: url("../assets/pvp/ui/equipamento.png") 0 0 / 100% 100% no-repeat;
	box-shadow: 0 0 0 1px #000, 0 10px 24px rgba(0, 0, 0, .55);
}

.c-pvp-risco__slot {
	position: absolute;
	left: calc(var(--x) * var(--e) * 1px);
	top: calc(var(--y) * var(--e) * 1px);
	width: calc(var(--w, 32) * var(--e) * 1px);
	height: calc(var(--h, 32) * var(--e) * 1px);
	display: grid;
	place-items: center;
}

.c-pvp-risco__slot--arma   { --x: 6;   --y: 6;   --h: 96; }
.c-pvp-risco__slot--corpo  { --x: 42;  --y: 40;  --h: 64; }
.c-pvp-risco__slot--cabeca { --x: 42;  --y: 5; }
.c-pvp-risco__slot--pes    { --x: 42;  --y: 148; }
.c-pvp-risco__slot--escudo { --x: 78;  --y: 38; }
.c-pvp-risco__slot--pulso  { --x: 78;  --y: 70; }
.c-pvp-risco__slot--brinco { --x: 117; --y: 38; }
.c-pvp-risco__slot--colar  { --x: 117; --y: 70; }

.c-pvp-risco__slot img {
	max-width: 100%;
	max-height: 100%;
	image-rendering: auto;
	filter: drop-shadow(0 1px 1px #000);
	transition: opacity .2s, transform .2s;
}

/* salvo pelo Deus Dragao: o slot acende em ouro */
.c-pvp-risco__slot.is-salvo {
	animation: c-pvp-risco-salvo 1.4s ease-out;
}

@keyframes c-pvp-risco-salvo {
	0%   { box-shadow: inset 0 0 0 0 rgba(255, 215, 106, 0); }
	25%  { box-shadow: inset 0 0 18px 4px rgba(255, 215, 106, .9), 0 0 22px rgba(255, 215, 106, .8); }
	100% { box-shadow: inset 0 0 0 0 rgba(255, 215, 106, 0); }
}

/* perdeu: o slot pisca em vermelho e fica vazio ate o item "voltar" */
.c-pvp-risco__slot.is-perdeu {
	animation: c-pvp-risco-perdeu .9s ease-out;
}

.c-pvp-risco__slot.is-vazio img { opacity: 0; transform: scale(.6); }

@keyframes c-pvp-risco-perdeu {
	0%, 100% { box-shadow: inset 0 0 0 0 rgba(224, 71, 60, 0); }
	20%, 60% { box-shadow: inset 0 0 20px 6px rgba(224, 71, 60, .95), 0 0 26px rgba(224, 71, 60, .8); }
}

/* o escudo do Deus Dragao: anel dourado que abre sobre o slot */
.c-pvp-risco__escudo {
	position: absolute;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	border: 3px solid #ffd76a;
	box-shadow: 0 0 18px rgba(255, 215, 106, .9), inset 0 0 14px rgba(255, 215, 106, .7);
	opacity: 0;
	pointer-events: none;
}

.c-pvp-risco__escudo.is-ativo {
	animation: c-pvp-risco-escudo 1.2s ease-out;
}

@keyframes c-pvp-risco-escudo {
	0%   { opacity: 0; transform: scale(.3); }
	30%  { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.9); }
}

/* o chao embaixo da janela: onde o item cai */
.c-pvp-risco__chao {
	position: relative;
	width: 100%;
	height: 64px;
	margin-top: 6px;
	background:
		radial-gradient(60% 100% at 50% 100%, rgba(201, 138, 75, .28), transparent 70%),
		linear-gradient(180deg, transparent, rgba(0, 0, 0, .35));
}

/* o item que caiu (criado pelo JS) */
.c-pvp-risco__caido {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	transform-origin: 50% 100%;
}

.c-pvp-risco__caido img {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .8)) drop-shadow(0 0 10px rgba(224, 71, 60, .7));
}

.c-pvp-risco__caido-rotulo {
	position: absolute;
	left: 50%;
	bottom: -22px;
	transform: translateX(-50%);
	padding: 1px 6px;
	border: 1px solid #6f5a33;
	background: rgba(0, 0, 0, .85);
	color: #ff9c8a;
	font-size: .72rem;
	font-weight: 700;
	white-space: nowrap;
}

/* o "dado": dez casas, a vermelha e a chance de perder */
.c-pvp-risco__dado {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 14px 0 0;
}

.c-pvp-risco__casa {
	width: 18px;
	height: 18px;
	border: 1px solid #000;
	background: linear-gradient(180deg, #ffe39a, #b8862c);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
	opacity: .55;
	transition: opacity .2s, transform .2s;
}

.c-pvp-risco__casa.is-perde {
	background: linear-gradient(180deg, #ff7a6a, #9c1f16);
}

.c-pvp-risco__casa.is-sorteada {
	opacity: 1;
	transform: translateY(-4px) scale(1.15);
	box-shadow: 0 0 12px rgba(255, 215, 106, .9);
}

.c-pvp-risco__casa.is-perde.is-sorteada { box-shadow: 0 0 14px rgba(224, 71, 60, 1); }

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

/* o chat do jogo: as duas mensagens do core */
.c-pvp-risco__chat {
	display: grid;
	gap: 2px;
	min-height: 5.6em;
	margin: 12px 0 0;
	padding: 6px 10px;
	list-style: none;
	font-family: Tahoma, Verdana, var(--fonte);
	font-size: .82rem;
	line-height: 1.4;
}

.c-pvp-risco__chat li { text-shadow: 0 1px 1px #000; }
.c-pvp-risco__chat .is-deus   { color: #ffe39a; }
.c-pvp-risco__chat .is-perdeu { color: #ff9c8a; }
.c-pvp-risco__chat .is-matador { color: #a7e3a0; }
.c-pvp-risco__chat .is-novo { animation: c-pvp-risco-linha .35s ease-out; }

@keyframes c-pvp-risco-linha {
	from { opacity: 0; transform: translateY(6px); }
}

.c-pvp-risco__regras {
	display: grid;
	gap: 4px;
	margin: 12px 0 2px;
	padding: 0 0 0 1.1rem;
	font-size: .9rem;
	line-height: 1.5;
	color: rgba(232, 220, 192, .8);
}

.c-pvp-risco__regras b { color: #f3e6c4; }

/* ---- o maior matador ------------------------------------------------------------ */

.c-pvp-risco__trono {
	display: grid;
	justify-items: center;
	text-align: center;
	padding: 4px 0 10px;
}

.c-pvp-risco__coroa {
	color: #ffd76a;
	filter: drop-shadow(0 0 10px rgba(255, 215, 106, .8));
	animation: c-pvp-risco-coroa 2.6s ease-in-out infinite;
}

.c-pvp-risco__top:not(.is-ocupado) .c-pvp-risco__coroa {
	color: #6f6656;
	filter: none;
	animation: none;
}

@keyframes c-pvp-risco-coroa {
	50% { transform: translateY(-4px) rotate(-4deg); filter: drop-shadow(0 0 18px rgba(255, 215, 106, 1)); }
}

.c-pvp-risco__retrato {
	width: 72px;
	height: 72px;
	margin-top: 2px;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, #ffd76a) 70%, transparent), 0 0 24px color-mix(in srgb, var(--c, #ffd76a) 45%, transparent);
}

.c-pvp-risco__retrato img {
	width: 56px;
	height: 56px;
	object-fit: cover;
}

.c-pvp-risco__retrato--vago {
	box-shadow: none;
	font-family: var(--pvp-radical);
	font-size: 2.2rem;
	color: #6f6656;
}

.c-pvp-risco__nome {
	margin: .5rem 0 0;
	font-family: var(--pvp-radical);
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	line-height: 1;
	color: var(--c, #ffd76a);
	text-shadow: 0 2px 0 #000, 0 0 18px color-mix(in srgb, var(--c, #ffd76a) 50%, transparent);
	overflow-wrap: anywhere;
}

.c-pvp-risco__nome--vago { color: #c9bfa6; text-shadow: 0 2px 0 #000; }

.c-pvp-risco__quem {
	max-width: 22rem;
	margin: .35rem 0 0;
	font-size: .86rem;
	line-height: 1.45;
	color: rgba(232, 220, 192, .7);
}

.c-pvp-risco__seq {
	margin: .4rem 0 0;
	color: rgba(232, 220, 192, .8);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.c-pvp-risco__seq b {
	display: block;
	font-family: var(--pvp-radical);
	font-weight: 400;
	font-size: 3.4rem;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	text-shadow: 0 3px 0 #000, 0 0 14px #ff7a3c, 0 0 30px #e0473c;
	animation: c-pvp-risco-fogo 1.6s ease-in-out infinite alternate;
}

@keyframes c-pvp-risco-fogo {
	to { text-shadow: 0 3px 0 #000, 0 0 20px #ffb04a, 0 0 42px #e0473c; }
}

.c-pvp-risco__premio-titulo {
	margin: 4px 0 6px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #e9c58a;
	text-align: center;
}

.c-pvp-risco__premios {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-pvp-risco__premios li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 8px;
	font-size: .9rem;
	line-height: 1.35;
}

.c-pvp-risco__premios li > span:nth-child(2) { flex: 1; }
.c-pvp-risco__premios b { color: #ffd76a; }
.c-pvp-risco__premios small { display: block; color: rgba(232, 220, 192, .6); font-size: .78rem; }
.c-pvp-risco__premios .m2-slot img { width: 32px; height: 32px; object-fit: contain; }

.c-pvp-risco__bandeirinhas {
	display: inline-flex;
	gap: 2px;
	width: 44px;
	justify-content: center;
	flex: none;
}

.c-pvp-risco__bandeirinhas img { width: 14px; height: auto; }

.c-pvp-risco__queda img { animation: c-pvp-risco-balanca 2.4s ease-in-out infinite; }

@keyframes c-pvp-risco-balanca {
	0%, 70%, 100% { transform: none; }
	80% { transform: translateY(4px) rotate(-14deg); }
	90% { transform: translateY(2px) rotate(8deg); }
}

.c-pvp-risco__historico {
	margin: 12px 0 0;
	font-size: .84rem;
	color: rgba(232, 220, 192, .75);
}

.c-pvp-risco__historico[hidden] { display: none; }
.c-pvp-risco__historico p { margin: 0 0 4px; font-weight: 700; color: #e9c58a; }
.c-pvp-risco__historico ol { margin: 0; padding-left: 1.1rem; }
.c-pvp-risco__historico small { color: rgba(232, 220, 192, .5); }

/* ---- o que ja caiu ------------------------------------------------------------------ */

.c-pvp-risco__feed { margin-top: 14px; }

.c-pvp-risco__feed-titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 8px;
	font-weight: 700;
	color: #f3e6c4;
}

.c-pvp-risco__feed-titulo small { font-weight: 400; color: rgba(232, 220, 192, .55); }

.c-pvp-risco__feed-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-pvp-risco__feed-lista li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 8px;
	font-size: .86rem;
	line-height: 1.35;
	color: rgba(232, 220, 192, .85);
}

.c-pvp-risco__feed-lista .m2-slot img { width: 32px; height: 32px; object-fit: contain; }
.c-pvp-risco__feed-lista small { display: block; color: rgba(232, 220, 192, .5); }

.c-pvp-risco__feed-vazio {
	margin: 0;
	color: rgba(232, 220, 192, .6);
	font-size: .9rem;
}

.c-pvp-risco__feed-vazio[hidden] { display: none; }

/* ---- celular ------------------------------------------------------------------------ */
@media (max-width: 860px) {
	.c-pvp-risco__corpo { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
	.c-pvp-risco__janela { --e: 1.35; }
	.c-pvp-risco__casa { width: 15px; height: 15px; }
	.c-pvp-risco__pct { font-size: 1.6rem; }
	.c-pvp-risco__chat { font-size: .76rem; }
	.c-pvp-risco__seq b { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.c-pvp-risco__coroa,
	.c-pvp-risco__seq b,
	.c-pvp-risco__queda img { animation: none; }
}