/* =============================================================================
   PVP -- o que as secoes da landing /pvp/ dividem:
     - a fonte de titulo (Metal Mania, OFL, em assets/pvp/fonte/);
     - as cores dos tres reinos (as das bandeiras: Shinsoo vermelho, Chunjo
       amarelo, Jinno azul);
     - o KIT DE PECAS DO CLIENTE (.m2-*): a janela de pedra, o ThinBoard, a barra
       de titulo de couro, a barra ornamental, o botao de pedra, o slot, o campo
       de numero e o medidor. Toda a arte e do pack do jogo, exportada em 2x por
       tools/build_pvp_landing.py (ui()) e desenhada aqui na metade;
     - a cabeca de secao.
   Todo o resto mora no css da propria secao, sob a raiz dela.
   ============================================================================= */

@font-face {
	font-family: "Metal Mania";
	src: url("../assets/pvp/fonte/metal-mania.woff2") format("woff2");
	font-display: swap;
}

.pvp-pagina {
	--pvp-shinsoo: #e0473c;
	--pvp-chunjo:  #f0b92c;
	--pvp-jinno:   #4a86f0;
	--pvp-areia:   #c98a4b;
	--pvp-texto-jogo: #e8dcc0;      /* o bege do texto das janelas do cliente */
	--pvp-radical: "Metal Mania", "Georgia", serif;

	position: relative;
	overflow: hidden;              /* as animacoes de entrada nunca dao rolagem lateral */
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(201, 138, 75, .10), transparent 60%),
		linear-gradient(180deg, #120c09 0%, var(--bg) 40%, #0d0a09 100%);
}

/* ---- kit: janela de pedra (ui/pattern/board_*) --------------------------------
   A borda de 9 fatias e mais larga que o aro: border-image-width 32 px desenha
   por cima de 12 px de padding, entao o conteudo nunca encosta no aro.        */
.m2-board {
	--m2-borda: 20px;              /* borda + padding = 32 px: o canto do jogo em 1x */
	--m2-pad: 12px;
	position: relative;
	border: var(--m2-borda) solid transparent;
	border-image: url("../assets/pvp/ui/board-borda.png") 64 / 32px round;
	background: url("../assets/pvp/ui/board-fundo.webp") 0 0 / 128px repeat;
	background-clip: padding-box;
	padding: var(--m2-pad);
	color: var(--pvp-texto-jogo);
	filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5));
}

/* ---- kit: ThinBoard (ui/pattern/thinboard_*), translucido como no jogo ----- */
.m2-thin {
	position: relative;
	border: 8px solid transparent;
	border-image: url("../assets/pvp/ui/thin.png") 32 / 16px round;
	background: rgba(0, 0, 0, .58);
	background-clip: padding-box;
	padding: 8px 10px;
	color: var(--pvp-texto-jogo);
}

/* ---- kit: barra de titulo de couro (titlebar_*) ------------------------------
   23 px de alto, como TitleBar.BLOCK_HEIGHT no ui.py do cliente (a arte foi
   cortada nessa altura pelo gerador). Pontas de 32 px; o miolo de couro se
   REPETE (round), nao estica -- esticado, o couro borrava.                   */
.m2-titulo {
	display: block;
	height: 23px;
	margin: 0 0 12px;
	padding: 0 4px;
	border-style: solid;
	border-width: 0 32px;
	border-image: url("../assets/pvp/ui/titulo-23.png") 0 64 fill / 0 32px round stretch;
	color: #f6ead0;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 23px;
	text-align: center;
	text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8);
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dentro da janela, a barra vai onde o cliente a poe: x = 8, y = 7 da borda de
   fora, e larga ate 7 px da borda direita (uiscript: "x": 8, "y": 7,
   "width": largura - 15). Por isso a margem negativa desfaz borda + padding. */
.m2-board > .m2-titulo:first-child {
	margin: calc(7px - var(--m2-borda) - var(--m2-pad))
	        calc(7px - var(--m2-borda) - var(--m2-pad))
	        12px
	        calc(8px - var(--m2-borda) - var(--m2-pad));
}

/* ---- kit: barra ornamental (horizontalbar_*), 17 px de alto como no jogo ---- */
.m2-barra {
	display: inline-block;
	height: 17px;
	padding: 0 2px;
	border-style: solid;
	border-width: 0 32px;
	border-image: url("../assets/pvp/ui/barra-17.png") 0 64 fill / 0 32px round stretch;
	color: var(--pvp-texto-jogo);
	line-height: 17px;
}

/* ---- kit: botao de pedra (public/xlarge_button_01..03) ------------------------- */
.m2-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;              /* o desenho e de 25 px; o alvo de toque e 44 */
	padding: 0 1.4rem;
	border: 6px solid transparent;
	border-image: url("../assets/pvp/ui/botao-1.png") 12 fill / 6px stretch;
	background: none;
	color: #f2e8c9;
	font: inherit;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	text-shadow: 0 1px 2px #000;
	cursor: pointer;
	transition: transform .12s, filter .2s;
	-webkit-tap-highlight-color: transparent;
}

.m2-botao:hover,
.m2-botao:focus-visible {
	border-image-source: url("../assets/pvp/ui/botao-2.png");
	color: #fff;
}

.m2-botao:active {
	border-image-source: url("../assets/pvp/ui/botao-3.png");
	transform: translateY(1px);
}

/* O principal: o mesmo botao do jogo, com a letra dourada e um brilho em volta. */
.m2-botao--ouro {
	color: #ffe39a;
	filter: drop-shadow(0 0 10px rgba(240, 185, 44, .35));
}

.m2-botao--ouro:hover,
.m2-botao--ouro:focus-visible {
	color: #fff3c8;
	filter: drop-shadow(0 0 16px rgba(240, 185, 44, .55));
}

/* ---- kit: slot de item (public/slot_base) ---------------------------------------- */
.m2-slot {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	background: url("../assets/pvp/ui/slot.png") center / 100% 100% no-repeat;
}

/* ---- kit: campo de numero (public/parameter_slot_00) ----------------------------- */
.m2-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 3px solid transparent;
	border-image: url("../assets/pvp/ui/numero.png") 6 fill / 3px stretch;
	padding: .1rem .55rem;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* ---- kit: medidor (gauge_slot_* + gauge_<cor>) -----------------------------------
   A cor de cada trecho e a imagem do medidor do jogo; o amarelo de Chunjo nao
   existe no pack e sai do vermelho com hue-rotate.                              */
.m2-medidor {
	display: flex;
	height: 18px;
	padding: 4px 0;
	border-style: solid;
	border-width: 0 16px;
	border-image: url("../assets/pvp/ui/medidor-calha.png") 0 32 fill / 0 16px stretch;
}

.m2-medidor__trecho {
	height: 100%;
	background: url("../assets/pvp/ui/medidor-red.png") 0 0 / 16px 100% repeat-x;
}

.m2-medidor__trecho--azul { background-image: url("../assets/pvp/ui/medidor-blue.png"); }
.m2-medidor__trecho--amarelo { filter: hue-rotate(42deg) saturate(1.6) brightness(1.25); }

/* ---- cabeca de secao ------------------------------------------------------------- */

.pvp-secao {
	position: relative;
	padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}

/* A aba "PVM" fica presa na borda esquerda (c-pvp-portal): o recuo esquerdo e
   pelo menos a largura dela, para nunca cobrir texto. */
.pvp-pagina > section {
	padding-left: max(var(--gutter), 76px);
}

.pvp-cabeca {
	max-width: 46rem;
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* O sobretitulo e uma barra ornamental do jogo, curta. */
.pvp-cabeca__sobre {
	display: inline-block;
	max-width: 100%;
	margin: 0 0 .9rem;
	white-space: nowrap;           /* a barra do jogo tem uma linha de altura */
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #e9c58a;
	text-shadow: 0 1px 1px #000;
}

.pvp-cabeca__titulo {
	margin: 0;
	font-family: var(--pvp-radical);
	font-weight: 400;
	font-size: clamp(1.9rem, 4.6vw, 3rem);
	line-height: 1.08;
	letter-spacing: .01em;
	color: #f3e6c4;
	text-shadow: 0 2px 0 #000, 0 0 24px rgba(201, 138, 75, .25);
}

.pvp-cabeca__texto {
	margin: .85rem 0 0;
	color: rgba(242, 240, 236, .74);
	font-size: clamp(.98rem, 1.6vw, 1.08rem);
	line-height: 1.6;
}

.pvp-cabeca__texto b { color: #f3e6c4; }

/* Revelar ao rolar: js/c-pvp-base.js poe .pvp-js na pagina e .is-visto em cada
   bloco que entra na tela. Sem JS, tudo aparece. */
.pvp-js .pvp-revela:not(.is-visto) {
	opacity: 0;
	transform: translateY(18px);
}

.pvp-js .pvp-revela {
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--atraso, 0s);
}

@media (max-width: 720px) {
	/* no celular a aba "PVM" mora no canto de baixo (c-pvp-portal.css) */
	.pvp-pagina > section { padding-left: var(--gutter); }
	.m2-board {
		--m2-borda: 14px;
		--m2-pad: 10px;
		border-image-width: 24px;   /* o canto a 3/4: o aro fica a 6 px, e a barra tambem */
	}
	.m2-board > .m2-titulo:first-child {
		margin: calc(5px - var(--m2-borda) - var(--m2-pad))
		        calc(5px - var(--m2-borda) - var(--m2-pad))
		        10px
		        calc(6px - var(--m2-borda) - var(--m2-pad));
	}
	.m2-titulo { font-size: .7rem; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
	.pvp-js .pvp-revela:not(.is-visto) { opacity: 1; transform: none; }
	.pvp-js .pvp-revela { transition: none; }
}