/* ===========================================================================
   Mapa de missoes -- trilha vertical com a seta que desce
   ---------------------------------------------------------------------------
   A tela nao e uma timeline de tracejado. Tres decisoes definem o visual:

   1. CARTAO INCLINADO. Cada cartao nasce torto (rotate) e endireita quando a
      seta passa por ele. E o que faz a rolagem parecer que monta o mapa, em vez
      de so revelar uma lista.
   2. CANTO CORTADO em clip-path, nao borda tracejada. Da a cara de placa/
      pergaminho sem usar o vocabulario de "linha do tempo de blog".
   3. A SETA e um elemento so, que desce a trilha conforme a rolagem. Ela e a
      protagonista: os cartoes acendem atras dela.

   Tudo respeita prefers-reduced-motion: sem movimento, o mapa fica montado.
   =========================================================================== */

:root {
	--qm-ouro: #d4af37;
	--qm-ouro-claro: #f0d97a;
	--qm-brasa: #c8552f;
	--qm-linha: rgba(255, 255, 255, .09);
	--qm-tenue: rgba(255, 255, 255, .62);
	--qm-fundo: #0d0b09;
	--qm-carta: #16130f;

	/* Inclinacao base. Uma so variavel para nao haver dois angulos brigando. */
	--qm-torto: 2.4deg;
}

.qm {
	--qm-largura: min(1180px, 100% - 2.5rem);
	margin-inline: auto;
	width: var(--qm-largura);
	padding-block: clamp(2rem, 5vw, 4rem) 5rem;
	/* SEM overflow aqui. Tinha `overflow-x: clip` neste seletor para conter o
	   transbordo do cartao inclinado, e ele cortava junto a SANGRIA da textura
	   abaixo -- o grao aparecia numa faixa estreita no meio da tela em vez de
	   ir de ponta a ponta. O clip foi para os filhos que precisam dele. */
	position: relative;
	/* isolation: a mistura da textura abaixo tem de ficar DENTRO desta secao. */
	isolation: isolate;
}

/* ===========================================================================
   Textura
   ---------------------------------------------------------------------------
   As quatro imagens saem do proprio cliente (tools/build_texturas.py): o grao
   do painel do jogo, as nuvens da tela de intro, a greca e o pergaminho do
   quadro de missoes. Usar as do jogo, e nao textura de banco de imagem, e o que
   faz o site parecer o mesmo produto.

   A forca NUNCA esta na imagem: ela vem em tom neutro e quem controla e a
   opacidade e o blend aqui. Assim da para baixar tudo mexendo num numero, sem
   reexportar asset.
   =========================================================================== */
.qm::before {
	content: "";
	position: absolute;
	/* Sangra para fora da coluna de conteudo: preso ao `.qm` (max 1180px) o grao
	   virava uma FAIXA vertical com borda dura no meio da tela, que lia como
	   defeito. `calc(50% - 50vw)` leva a camada de ponta a ponta. */
	inset: 0 calc(50% - 50vw);
	z-index: -1;
	background: url("/assets/textura/grao.webp") repeat;
	background-size: 168px;
	opacity: .42;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* ---------------------------------------------------------------- hero ---- */
.qm-hero {
	position: relative;
	margin-bottom: clamp(2.5rem, 6vw, 5rem);
	isolation: isolate;
	/* A camada de nuvem abaixo sangra 30% para a direita; sem isto ela empurra a
	   largura da pagina. */
	overflow-x: clip;
}

/* Nuvens orientais atras do titulo, a 5%: a 100% e um tecido vermelho; a 5% e
   so a lembranca do desenho, que e o que se quer num fundo. Desaparece para a
   direita para nao competir com o texto. */
.qm-hero::after {
	content: "";
	position: absolute;
	inset: -1rem -30% -1rem -1rem;
	z-index: -1;
	background: url("/assets/textura/nuvem.webp") repeat;
	background-size: 210px;
	opacity: .05;
	mask-image: linear-gradient(100deg, #000 10%, transparent 72%);
	pointer-events: none;
}

.qm-hero__interno {
	max-width: 46rem;
}

.qm-hero__eyebrow {
	margin: 0 0 .6rem;
	font: 700 .72rem/1 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--qm-brasa);
}

.qm-hero__titulo {
	margin: 0;
	font: 400 clamp(1.9rem, 5vw, 3.4rem)/1.08 var(--font-primary, Cinzel), serif;
}

.qm-hero__titulo em {
	font-style: normal;
	color: var(--qm-ouro);
}

.qm-hero__lead {
	margin: 1rem 0 0;
	max-width: 40rem;
	color: var(--qm-tenue);
	line-height: 1.6;
}

/* ---------------------------------------------------------------- conta --- */
.qm-conta {
	margin-top: 1.6rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: .9rem 1.1rem;
	border: 1px solid var(--qm-linha);
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(212, 175, 55, .07), transparent 60%);
}

.qm-conta__txt {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	font-size: .88rem;
}

.qm-conta__txt strong {
	color: var(--qm-ouro-claro);
}

.qm-conta__txt span {
	color: var(--qm-tenue);
}

.qm-chars {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-left: auto;
}

.qm-char {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .35rem .7rem .35rem .4rem;
	border: 1px solid var(--qm-linha);
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
	font-size: .82rem;
	transition: border-color .2s, background .2s, transform .2s;
}

.qm-char:hover {
	transform: translateY(-1px);
	border-color: rgba(212, 175, 55, .45);
}

.qm-char.is-ativo {
	border-color: var(--qm-ouro);
	background: rgba(212, 175, 55, .12);
}

.qm-char img {
	border-radius: 50%;
	display: block;
}

.qm-char__nv {
	color: var(--qm-tenue);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- mapa ---- */
.qm-mapa {
	position: relative;
	/* A perspectiva mora aqui: e o que faz a inclinacao dos cartoes ter
	   profundidade em vez de parecer imagem torta. */
	perspective: 1400px;
	/* Contem o transbordo do cartao inclinado. Fica AQUI e nao no `.qm` porque
	   la ele cortaria a sangria da textura. A folga de 15px na lista garante que
	   este clip nao encoste no canto do cartao. */
	overflow-x: clip;
}

.qm-lista {
	list-style: none;
	margin: 0;
	/* Folga lateral do tamanho do transbordo da inclinacao, para o `clip` acima
	   nao cortar o canto do cartao. */
	padding: 0 15px;
	display: flex;
	flex-direction: column;
	gap: clamp(1.6rem, 4vw, 3.4rem);
}

/* ---------------------------------------------------------------- trilha -- */
.qm-trilha {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	transform: translateX(-50%);
	pointer-events: none;
}

/* O trilho apagado, do inicio ao fim. */
.qm-trilha__linha {
	position: absolute;
	inset: 0;
	border-radius: 4px;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, .16),
		rgba(255, 255, 255, .06) 30%,
		rgba(255, 255, 255, .06) 70%,
		transparent);
}

/* O trecho JA PERCORRIDO, que cresce com a rolagem. Altura vem do JS. */
.qm-trilha__feita {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0;
	border-radius: 4px;
	background: linear-gradient(180deg,
		rgba(110, 200, 255, .9),
		var(--qm-ouro) 55%,
		var(--qm-brasa));
	box-shadow: 0 0 14px rgba(212, 175, 55, .45);
}

/* A seta. `top` vem do JS, em pixels dentro da trilha. */
.qm-seta {
	position: absolute;
	top: 0;
	left: 50%;
	width: 34px;
	height: 44px;
	transform: translate(-50%, -60%);
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
	will-change: top;
}

.qm-seta__corpo {
	fill: var(--qm-ouro);
	stroke: rgba(10, 10, 12, .85);
	stroke-width: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
	.qm-seta {
		animation: qm-pulsa 2.4s ease-in-out infinite;
	}
}

@keyframes qm-pulsa {

	0%,
	100% {
		filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6))
			drop-shadow(0 0 4px rgba(212, 175, 55, .35));
	}

	50% {
		filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6))
			drop-shadow(0 0 16px rgba(212, 175, 55, .8));
	}
}

/* ---------------------------------------------------------------- no ------ */
.qm-no {
	position: relative;
	display: grid;
	/* Coluna do meio = a trilha. O cartao ocupa um lado, e o outro fica vazio
	   de proposito: e o zigue-zague que da a leitura de mapa. */
	grid-template-columns: 1fr 64px 1fr;
	align-items: center;
}

/* O cartao encosta na trilha e para de crescer no conteudo -- nao ocupa a
   coluna inteira. Sem isto, a missao de nivel 1 (um alvo, sem premio) virava um
   retangulo de 690px quase vazio e o mapa parecia mal diagramado. */
.qm-no--esq .qm-card {
	grid-column: 1;
	justify-self: end;
	width: fit-content;
	max-width: 100%;
	min-width: min(19rem, 100%);
}

.qm-no--dir .qm-card {
	grid-column: 3;
	justify-self: start;
	width: fit-content;
	max-width: 100%;
	min-width: min(19rem, 100%);
}

/* O marco redondo sobre a trilha. */
.qm-marco {
	grid-column: 2;
	justify-self: center;
	position: relative;
	z-index: 2;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--qm-fundo);
	border: 2px solid var(--cor, #888);
	box-shadow: 0 0 0 5px var(--qm-fundo), 0 0 18px -4px var(--cor, #888);
	font: 700 .82rem/1 var(--font-secondary, Inter), sans-serif;
	font-variant-numeric: tabular-nums;
	color: var(--cor, #ccc);
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.qm-no.is-feito .qm-marco {
	background: var(--cor, #888);
	color: #0a0a0c;
}

/* Braço do marco ate o cartao. Solido e curto -- e uma haste, nao tracejado. */
.qm-no::before {
	content: "";
	grid-column: 2;
	position: absolute;
	top: 50%;
	width: 42px;
	height: 2px;
	background: linear-gradient(90deg, var(--cor, #888), transparent);
	opacity: .55;
}

.qm-no--esq::before {
	right: 50%;
	margin-right: 22px;
	transform: scaleX(-1);
	transform-origin: right;
}

.qm-no--dir::before {
	left: 50%;
	margin-left: 22px;
}

/* ---------------------------------------------------------------- cartao -- */
.qm-card {
	position: relative;
	padding: 1.1rem 1.25rem 1.15rem;
	/* Camadas, de cima para baixo: brilho da quina, VEU que segura a forca do
	   pergaminho, o pergaminho, e a cor da carta. O veu em .94 deixa passar ~6%
	   da textura -- suficiente para o cartao ter pele e nao virar bege. */
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .045), transparent 55%),
		linear-gradient(rgba(22, 19, 15, .94), rgba(22, 19, 15, .94)),
		url("/assets/textura/pergaminho.webp") center / 260px auto repeat,
		var(--qm-carta);
	border: 1px solid var(--qm-linha);
	/* Canto cortado em vez de borda tracejada: cara de placa de madeira. */
	clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px),
		calc(100% - 14px) 100%, 0 100%);
	transform-style: preserve-3d;
	/* Sombra propria: sem ela o cartao inclinado parece imagem torta em vez de
	   objeto apoiado. box-shadow nao serve -- o clip-path a corta junto --,
	   entao a profundidade vem de filter. */
	filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
}

/* Fio de luz na borda de cima, do lado da trilha. */
.qm-card::after {
	content: "";
	position: absolute;
	top: 0;
	width: 38%;
	height: 2px;
	background: linear-gradient(90deg, var(--cor, transparent), transparent);
	opacity: .8;
}

.qm-no--dir .qm-card::after {
	left: 0;
}

.qm-no--esq .qm-card::after {
	right: 0;
	background: linear-gradient(270deg, var(--cor, transparent), transparent);
}

.qm-card__topo {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: .35rem;
}

.qm-card__nv {
	font: 700 .68rem/1 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cor, var(--qm-tenue));
}

.qm-card__selo {
	font: 700 .62rem/1 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .25rem .45rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, .07);
	color: var(--qm-tenue);
}

.qm-card__titulo {
	margin: 0 0 .8rem;
	font: 400 clamp(1.05rem, 2.2vw, 1.4rem)/1.2 var(--font-primary, Cinzel), serif;
}

/* ---------------------------------------------------------------- alvos --- */
.qm-alvos {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.qm-alvo {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .6rem .3rem .35rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid transparent;
	font-size: .78rem;
	transition: background .2s, border-color .2s;
}

.qm-alvo:hover {
	background: rgba(255, 255, 255, .07);
}

/* O papel do alvo muda a cor da borda esquerda -- matar, falar, entregar. */
.qm-alvo--matar {
	border-left: 2px solid var(--qm-brasa);
}

.qm-alvo--inicio {
	border-left: 2px solid var(--qm-ouro);
}

.qm-alvo--entrega {
	border-left: 2px solid #78ffbe;
}

.qm-alvo--encontrar {
	border-left: 2px solid rgba(255, 255, 255, .3);
}

.qm-fig {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
}

.qm-fig img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	display: block;
}

.qm-fig__vazio {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .22);
}

.qm-alvo__txt {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.qm-alvo__txt b {
	font: 700 .64rem/1.2 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qm-tenue);
}

.qm-alvo--mais {
	padding: .3rem .7rem;
	color: var(--qm-tenue);
	font-weight: 700;
}

/* ---------------------------------------------------------------- premios - */
.qm-premios {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .8rem;
	padding-top: .9rem;
}

/* O divisor e a GRECA do jogo, nao uma linha de 1px: e o mesmo meandro que
   aparece na moldura das janelas do Metin2. */
.qm-premios::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 7px;
	background: url("/assets/textura/greca.webp") repeat-x;
	background-size: auto 100%;
	/* A greca e escura na origem; sobre o cartao escuro, a .22 ela desaparecia.
	   `screen` a faz clarear em vez de escurecer, e ai o desenho aparece. */
	opacity: .5;
	mix-blend-mode: screen;
	pointer-events: none;
}

.qm-premio {
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .45rem;
	border-radius: 8px;
	background: rgba(212, 175, 55, .07);
	font-size: .74rem;
	font-variant-numeric: tabular-nums;
}

.qm-premio img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	display: block;
}

.qm-premio--exp {
	background: rgba(110, 200, 255, .1);
}

.qm-premio--yang {
	background: rgba(240, 217, 122, .12);
}

.qm-premio__sinal {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .07);
	font: 700 .58rem/1 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .02em;
	color: var(--qm-tenue);
}

/* Premio sem icone no cliente. "?" parecia defeito de pagina; uma caixinha le
   como "item", e o nome continua no title do chip. */
.qm-premio--item .qm-premio__sinal {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 60%),
		rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
}

.qm-premio--mais {
	color: var(--qm-tenue);
	font-weight: 700;
}

/* ---------------------------------------------------------------- travado - */
.qm-card--travado {
	background: rgba(255, 255, 255, .022);
	border-style: solid;
	border-color: rgba(255, 255, 255, .06);
}

.qm-card--travado .qm-card__titulo {
	color: var(--qm-tenue);
}

.qm-card__trava {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: .8rem;
	color: var(--qm-tenue);
}

.qm-cadeado {
	width: 13px;
	height: 11px;
	flex: 0 0 auto;
	position: relative;
	border: 2px solid currentColor;
	border-radius: 2px;
	opacity: .8;
}

.qm-cadeado::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 7px;
	height: 6px;
	transform: translateX(-50%);
	border: 2px solid currentColor;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}

/* ---------------------------------------------------------------- rodape -- */
.qm-rodape,
.qm-vazio {
	margin: 3rem auto 0;
	max-width: 44rem;
	text-align: center;
	font-size: .84rem;
	color: var(--qm-tenue);
	line-height: 1.6;
}

/* ===========================================================================
   Movimento
   ---------------------------------------------------------------------------
   O estado de repouso e o cartao MONTADO. A animacao e um estado inicial
   (`.qm-no` sem `.vis`) que sai. Assim, se o JS nao rodar ou o navegador nao
   suportar, a pagina fica legivel em vez de invisivel -- foi um bug real no
   guia de Experiência.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	.qm-no .qm-card,
	.qm-no .qm-marco {
		transition:
			opacity .5s ease,
			transform .65s cubic-bezier(.22, .61, .36, 1);
	}

	/* Antes de a seta passar: torto, recuado e apagado. */
	.qm-no:not(.vis) .qm-card {
		opacity: 0;
	}

	.qm-no--esq:not(.vis) .qm-card {
		transform: translateX(-26px) rotateY(9deg) rotate(calc(var(--qm-torto) * -2.2));
	}

	.qm-no--dir:not(.vis) .qm-card {
		transform: translateX(26px) rotateY(-9deg) rotate(calc(var(--qm-torto) * 2.2));
	}

	/* Nao revelado fica MENOR, nao minusculo: a escada de niveis a frente e
	   informacao util, e em scale(.55) o numero virava borrao. */
	.qm-no:not(.vis) .qm-marco {
		transform: scale(.82);
		opacity: .5;
	}

	/* Depois de a seta passar: endireita, mas NAO ate zero -- a leve inclinacao
	   que sobra e o que o dono pediu ("cards inclinados"). */
	.qm-no--esq.vis .qm-card {
		transform: rotate(calc(var(--qm-torto) * -1));
	}

	.qm-no--dir.vis .qm-card {
		transform: rotate(var(--qm-torto));
	}

	.qm-no.vis .qm-marco {
		transform: scale(1);
	}

	/* Apontar o cartao endireita de vez: da a sensacao de "peguei na mao". */
	.qm-no.vis .qm-card:hover {
		transform: rotate(0deg) translateY(-3px);
		border-color: rgba(212, 175, 55, .3);
	}
}

/* Sem preferencia por movimento: inclinacao estatica, nada anima. */
@media (prefers-reduced-motion: reduce) {

	.qm-no--esq .qm-card {
		transform: rotate(calc(var(--qm-torto) * -1));
	}

	.qm-no--dir .qm-card {
		transform: rotate(var(--qm-torto));
	}
}

/* ---------------------------------------------------------------- celular - */
@media (max-width: 720px) {

	.qm-trilha {
		left: 23px;
		transform: none;
	}

	.qm-no {
		grid-template-columns: 46px 1fr;
		gap: .9rem;
		align-items: start;
	}

	.qm-no--esq .qm-card,
	.qm-no--dir .qm-card {
		grid-column: 2;
		justify-self: stretch;
		width: auto;
		/* Zerar o min-width e obrigatorio: 19rem + a coluna do marco nao cabem
		   em 390px e a pagina passava a rolar de lado. */
		min-width: 0;
	}

	.qm-marco {
		grid-column: 1;
		justify-self: start;
	}

	/* Sem zigue-zague nao ha braço: ele sairia por cima do cartao. */
	.qm-no::before {
		display: none;
	}

	/* No celular a inclinacao fica menor: em coluna estreita, cartao muito
	   torto encosta no vizinho. */
	.qm {
		--qm-torto: 1.1deg;
	}

	.qm-chars {
		margin-left: 0;
	}
}

/* ===========================================================================
   Abas: progresso x evento
   ---------------------------------------------------------------------------
   Sao LINKS, nao botoes de JS: o filtro vive na querystring (ver o comentario
   em guia/quests/index.php), entao a aba tem de ser navegavel, compartilhavel e
   funcionar com o script desligado. Mesma escolha do filtro do /guia/.
   =========================================================================== */
.qm-abas {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0 0 1.4rem;
}

.qm-aba {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	/* 44px de alvo tatil: o site inteiro segue WCAG 2.5.5 (--tap no base.css). */
	min-height: 44px;
	padding: .5rem 1rem;
	border: 1px solid var(--qm-linha);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	color: var(--qm-tenue);
	font: 600 .82rem/1 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .04em;
	text-decoration: none;
	transition: border-color 200ms cubic-bezier(.2, 0, .2, 1),
	            background-color 200ms cubic-bezier(.2, 0, .2, 1),
	            color 200ms cubic-bezier(.2, 0, .2, 1);
}

.qm-aba:hover {
	border-color: rgba(212, 175, 55, .45);
	color: var(--qm-ouro-claro);
}

/* A ativa e o unico dourado cheio da faixa -- um acento por tela. */
.qm-aba.is-ativa {
	border-color: var(--qm-ouro);
	background: var(--qm-ouro);
	color: #0d0b09;
}

.qm-aba__qtd {
	font-variant-numeric: tabular-nums;
	font-size: .72rem;
	padding: .1rem .4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
}

.qm-aba.is-ativa .qm-aba__qtd {
	background: rgba(0, 0, 0, .18);
}

.qm-abas__lead {
	margin: 0 0 2rem;
	max-width: 62ch;
	color: var(--qm-tenue);
	font: 400 .95rem/1.6 var(--font-secondary, Inter), sans-serif;
}

.qm-abas__lead strong { color: var(--qm-ouro-claro); font-weight: 600; }

/* ===========================================================================
   Cartoes de evento
   =========================================================================== */
.qm-eventos {
	list-style: none;
	margin: 0 0 3.5rem;
	padding: 0;
	display: grid;
	/* auto-fit e nao auto-fill: com 2 eventos, auto-fill deixaria uma coluna
	   fantasma e os cartoes ficariam estreitos no meio da tela. */
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.2rem;
}

.qm-evento {
	position: relative;
	padding: 1.4rem 1.5rem 1.5rem;
	background: var(--qm-carta);
	border: 1px solid var(--qm-linha);
	border-radius: 12px;
	/* Canto cortado, o mesmo gesto do .qm-card da trilha. */
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.qm-evento__titulo {
	margin: 0 0 .5rem;
	font: 400 clamp(1.1rem, 2.2vw, 1.35rem)/1.25 var(--font-primary, Cinzel), serif;
	color: var(--qm-ouro-claro);
}

.qm-evento__linha {
	margin: 0 0 1rem;
	color: var(--qm-tenue);
	font: 400 .9rem/1.55 var(--font-secondary, Inter), sans-serif;
}

.qm-evento__selos {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.qm-selo {
	font: 700 .62rem/1 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .3rem .5rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, .07);
	color: var(--qm-tenue);
}

/* O dia e a informacao que a pessoa vem buscar aqui, entao e o unico destacado. */
.qm-selo--dia {
	background: rgba(212, 175, 55, .14);
	color: var(--qm-ouro-claro);
}

.qm-evento__entrada {
	margin: 0 0 1.1rem;
	font: 400 .85rem/1.5 var(--font-secondary, Inter), sans-serif;
	color: var(--qm-tenue);
}

.qm-evento__entrada span {
	display: block;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .38);
	margin-bottom: .2rem;
}

.qm-evento__premiosRotulo {
	display: block;
	font: 700 .62rem/1 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .38);
	margin-bottom: .55rem;
}

.qm-eventos .qm-premios {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qm-eventos .qm-premio {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 0;
	background: none;
	border: 0;
}

/* Slot de inventario 40x40, o mesmo do calendario: o icone e pixel art do
   proprio cliente, e suavizar borraria. */
.qm-premio__slot {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: grid;
	place-items: center;
	background: url('/assets/items/slot.png') center / cover no-repeat;
	image-rendering: pixelated;
}

.qm-premio__slot img { image-rendering: pixelated; }

.qm-premio__txt {
	font: 400 .82rem/1.3 var(--font-secondary, Inter), sans-serif;
	color: var(--qm-tenue);
}

.qm-premio__txt em {
	font-style: normal;
	font-weight: 700;
	color: var(--qm-ouro-claro);
}

/* Escada de breakpoints do site: max-width, desktop-first. */
@media (max-width: 640px) {
	.qm-eventos { grid-template-columns: 1fr; }
	.qm-evento { padding: 1.2rem 1.1rem 1.3rem; }
}

@media (max-width: 480px) {
	.qm-abas { gap: .45rem; }
	.qm-aba { padding: .5rem .8rem; font-size: .76rem; }
}