/* ===========================================================================
   c-calendario - a semana de eventos, na vertical
   ---------------------------------------------------------------------------
   Uma coluna de sete dias com um trilho a esquerda. Desktop: nome do dia numa
   coluna fixa, evento na outra. Telefone (<=640): o dia sobe para cima do
   evento e o trilho fica mais estreito -- em 360px de largura duas colunas nao
   caberiam sem esmagar o texto.

   Sem JS: quem abre e fecha o dia e o <details> do navegador.
   =========================================================================== */

.c-calendario {
	border-top: 1px solid var(--linha);
}

.c-calendario__cabeca { margin-bottom: var(--e-4); }

/* ---------------------------------------------------------------- semana --- */

/* O trilho vertical e uma borda do proprio <ol>: uma linha, sem elemento extra
   e sem calculo de altura. */
.c-calendario__semana {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	padding-left: var(--e-3);
	border-left: 1px solid var(--linha);
}

.c-calendario__dia {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--e-3);
	align-items: start;
}

/* --------------------------------------------------------------- o selo ---- */

.c-calendario__selo {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding-top: 0.9rem;   /* alinha o nome com a primeira linha do gatilho */
}

/* Ponto no trilho. Fica FORA do selo (deslocado para cima da borda do <ol>),
   por isso o left negativo bate exatamente com o padding-left da lista. */
.c-calendario__ponto {
	position: absolute;
	left: calc(-1 * var(--e-3) - 4px);
	top: 1.35rem;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--linha-forte);
}

.c-calendario__diaNome {
	color: var(--ink-2);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Hoje: o unico lugar da secao com dourado cheio. Um so acento por tela --
   se todo dia tivesse cor, nenhum dia se destacaria. */
.c-calendario__dia.esta-hoje .c-calendario__ponto {
	background: var(--ouro);
	box-shadow: 0 0 0 3px rgba(217, 180, 90, 0.18);
}

.c-calendario__dia.esta-hoje .c-calendario__diaNome { color: var(--ink); }

.c-calendario__hoje {
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--ouro);
	color: #14110a;
	font-family: var(--fonte-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------- eventos ---- */

.c-calendario__eventos {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
}

.c-calendario__evento {
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
	transition: border-color var(--transicao), background var(--transicao);
}

.c-calendario__evento:hover { border-color: var(--linha-forte); }
.c-calendario__evento[open] { background: var(--surface-2); }

.c-calendario__dia.esta-hoje .c-calendario__evento { border-color: var(--ouro-escuro); }

/* ------------------------------------------------------------- o gatilho --- */

.c-calendario__gatilho {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--e-2);
	align-items: center;
	min-height: var(--tap);   /* alvo de toque (WCAG 2.5.5) */
	padding: 0.9rem var(--e-2);
	cursor: pointer;
	list-style: none;         /* Firefox */
}

/* A setinha padrao do <summary> no WebKit. */
.c-calendario__gatilho::-webkit-details-marker { display: none; }

.c-calendario__gatilho:focus-visible {
	outline: 2px solid var(--ouro);
	outline-offset: 2px;
	border-radius: var(--raio);
}

.c-calendario__tituloEvento {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.c-calendario__tituloEvento strong {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
}

.c-calendario__tituloEvento small {
	color: var(--ink-3);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.c-calendario__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.c-calendario__selinho {
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--linha-forte);
	border-radius: 999px;
	color: var(--ink-2);
	font-family: var(--fonte-mono);
	font-size: 0.6875rem;
	white-space: nowrap;
}

.c-calendario__seta {
	color: var(--ink-3);
	transition: transform var(--transicao), color var(--transicao);
}

.c-calendario__evento[open] .c-calendario__seta {
	transform: rotate(180deg);
	color: var(--ouro);
}

/* --------------------------------------------------------------- o corpo --- */

/* A margem lateral (em vez de padding) e o que faz o fio do border-top parar
   antes da borda do cartao, alinhado com o texto do gatilho. */
.c-calendario__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	margin: 0 var(--e-2);
	padding: var(--e-3) 0;
	border-top: 1px solid var(--linha);
}

.c-calendario__linhas {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.35rem var(--e-2);
	margin: 0;
}

.c-calendario__linhas dt {
	color: var(--ink-3);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.c-calendario__linhas dd {
	margin: 0;
	color: var(--ink);
	font-size: 0.9375rem;
}

.c-calendario__blocoTitulo {
	margin-bottom: 0.625rem;
	color: var(--ouro);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Passos numerados. O contador e proprio para o numero sair dourado sem
   depender do ::marker, que o Safari antigo nao estiliza. */
/* list-style: none e obrigatorio aqui. O base.css zera so `ul`; um `ol` mantem
   a numeracao do navegador, e com o contador proprio a lista saia com DOIS
   numeros por linha ("1. 1 Fale com..."). */
.c-calendario__passos {
	counter-reset: passo;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	list-style: none;
}

.c-calendario__passos li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.c-calendario__passos li::before {
	counter-increment: passo;
	content: counter(passo);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.25rem;
	color: var(--ouro-escuro);
	font-family: var(--fonte-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: right;
}

/* ------------------------------------------------------------- premios ----- */

.c-calendario__premios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.c-calendario__premio {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.375rem 0.75rem 0.375rem 0.375rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio-sm);
	background: rgba(0, 0, 0, 0.25);
}

/* Item sem icone no cliente (ver calendario.php): sai SEM o quadro de
   inventario. Com o quadro, um slot vazio parece imagem que nao carregou; sem
   ele a pastilha e so texto e le como decisao, nao como falha. */
.c-calendario__premio--texto { padding-left: 0.75rem; }

/* Mesmo quadro de inventario do grid da home. */
.c-calendario__slot {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background-image: url("/assets/items/slot.png");
	background-size: 40px 40px;
	background-repeat: no-repeat;
}

.c-calendario__slot img {
	width: 32px;
	height: 32px;
	image-rendering: pixelated;
}

.c-calendario__premioTexto {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.c-calendario__premioTexto strong {
	font-size: 0.875rem;
	font-weight: 600;
}

.c-calendario__premioTexto small {
	color: var(--ouro);
	font-family: var(--fonte-mono);
	font-size: 0.75rem;
}

.c-calendario__premioNota {
	margin-top: 0.625rem;
	color: var(--ink-3);
	font-size: 0.8125rem;
}

/* ---------------------------------------------------------------- vazio ---- */

/* Dia sem evento. Fica visivelmente mais quieto que um dia com evento: sem
   fundo, sem borda cheia, sem clique -- nao ha nada para abrir. */
.c-calendario__vazio {
	padding: 0.9rem var(--e-2);
	border: 1px dashed var(--linha);
	border-radius: var(--raio);
}

.c-calendario__vazio strong {
	color: var(--ink-2);
	font-size: 0.9375rem;
	font-weight: 600;
}

.c-calendario__vazio p {
	margin-top: 0.35rem;
	color: var(--ink-3);
	font-size: 0.875rem;
	line-height: 1.55;
}

.c-calendario__nota {
	max-width: 62ch;
	margin-top: var(--e-4);
	color: var(--ink-3);
	font-size: 0.8125rem;
}

/* ----------------------------------------------------------- responsivo ---- */

@media (max-width: 900px) {
	.c-calendario__dia {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: var(--e-2);
	}
}

/* Duas colunas viram uma: o dia passa a ser um cabecalho em cima do evento. */
@media (max-width: 640px) {
	.c-calendario__dia {
		/* minmax(0, 1fr), e nao `1fr`: `1fr` equivale a minmax(AUTO, 1fr), e
		   `auto` como minimo e o min-content do conteudo. Enquanto o card era
		   so texto isso nao aparecia (texto quebra em qualquer largura), mas a
		   fileira de bichos tem min-content de 576px e passou a esticar a
		   coluna -- e com ela a pagina inteira, que ia a 651px de scrollWidth
		   numa viewport de 360. Com minimo 0 a coluna pode encolher e o
		   overflow-x da fileira volta a valer. */
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.c-calendario__selo { padding-top: 0; }

	.c-calendario__ponto {
		left: calc(-1 * var(--e-3) - 4px);
		top: 0.5rem;
	}

	/* O gatilho empilha: titulo, depois os selinhos. A seta sai da linha do
	   titulo e vai para o canto, senao o titulo fica com 6 caracteres por linha. */
	.c-calendario__gatilho {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"titulo seta"
			"meta   meta";
		gap: 0.625rem var(--e-2);
	}

	.c-calendario__tituloEvento { grid-area: titulo; }
	.c-calendario__meta         { grid-area: meta; }
	.c-calendario__seta         { grid-area: seta; align-self: start; margin-top: 0.35rem; }

	/* Rotulo em cima do valor: em duas colunas, "Arqueiro da Praça, na sua
	   cidade" quebrava em quatro linhas de duas palavras. */
	.c-calendario__linhas {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

@media (max-width: 480px) {
	.c-calendario__semana {
		padding-left: var(--e-2);
	}

	.c-calendario__ponto { left: calc(-1 * var(--e-2) - 4px); }

	.c-calendario__gatilho { padding: 0.75rem 0.875rem; }
	.c-calendario__corpo   { margin: 0 0.875rem; }
	.c-calendario__vazio   { padding: 0.75rem 0.875rem; }

	/* Em 360px cada premio ocupa a linha inteira: dois lado a lado cortariam o
	   nome do item ("Pergaminho do Dragão" nao cabe em metade da tela). */
	.c-calendario__premio { width: 100%; }
}

/* ===========================================================================
   ARTE DO EVENTO -- retrato, faixa de nivel e fileira de inimigos
   ---------------------------------------------------------------------------
   A secao era só palavra. O site já tinha 400 renders de mob por vnum
   (assets/mobs/v/, tirados do .gr2 do cliente) e não usava nenhum aqui.

   As imagens de mob são render 3D, não sprite: NÃO levam image-rendering:
   pixelated (que é o certo para o ícone de item, 32px de pixel art). São .webp
   de 128px servidos a 56/64px, então ficam nítidas em tela retina.

   O gatilho ganha uma coluna só quando o evento TEM arte -- por isso a regra
   mora em `.tem-arte` e a regra base de .c-calendario__gatilho fica intacta:
   evento sem retrato continua com o layout de três colunas de antes.
   =========================================================================== */

.c-calendario__evento.tem-arte .c-calendario__gatilho {
	grid-template-columns: auto minmax(0, 1fr) auto auto;
}

/* ------------------------------------------------------------- o retrato --- */

/* O clarão atrás da figura resolve um problema real: quase todo render é escuro
   (bicho de caverna) e, sobre a superfície escura do card, sumia. */
.c-calendario__retrato {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 45%,
			color-mix(in srgb, var(--ouro) 16%, transparent) 0%,
			transparent 70%),
		var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--linha);
	transition: box-shadow var(--transicao);
}

.c-calendario__retrato img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	/* O render vem com o bicho centrado na base do quadro; subir um fio deixa a
	   cabeça no meio do círculo em vez de encostada no topo. */
	transform: translateY(-1px);
}

.c-calendario__evento[open] .c-calendario__retrato,
.c-calendario__evento:hover .c-calendario__retrato {
	box-shadow: inset 0 0 0 1px var(--ouro-escuro);
}

.c-calendario__dia.esta-hoje .c-calendario__retrato {
	box-shadow: inset 0 0 0 1px var(--ouro-escuro);
}

/* -------------------------------------------------------- faixa de nivel --- */

/* Gate de entrada e faixa do conteúdo são coisas diferentes, e confundir os
   dois faz o jogador entrar onde não aguenta. Aqui os dois aparecem juntos. */
/* Flex e não grid, e a barra com largura FIXA: com `1fr` o trilho esticava de
   ponta a ponta do card e os dois números ficavam a 600px um do outro, o que
   lê como duas coisas sem relação em vez de um intervalo. Curto, os dois
   números se leem juntos e o texto explicativo cabe na mesma linha. */
.c-calendario__faixa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem var(--e-2);
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--linha);
}

.c-calendario__faixaRotulo {
	color: var(--ink-3);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c-calendario__faixaBarra {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.4rem;
	width: 8.5rem;
}

.c-calendario__faixaTrilho {
	flex: 1 1 auto;
	height: 2px;
	min-width: 1.5rem;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		var(--linha-forte) 0%,
		var(--ouro-escuro) 100%);
}

.c-calendario__faixaPonta {
	flex: 0 0 auto;
	min-width: 1.75rem;
	padding: 0.1rem 0.4rem;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--surface-2);
	color: var(--ink-2);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: center;
}

/* A ponta de cima da faixa é o teto: acesa, para ler como "até aqui". */
.c-calendario__faixaPonta:last-child {
	border-color: var(--ouro-escuro);
	color: var(--ouro);
}

.c-calendario__faixaTexto {
	flex: 1 1 14rem;
	min-width: 0;
	color: var(--ink-3);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ---------------------------------------------------- fileira de bichos --- */

/* Rola no próprio eixo: oito mobs não cabem em 360px, e a página nunca deve
   rolar na horizontal. scroll-snap para o dedo parar em cima de um bicho.

   `min-width: 0` NÃO É DECORAÇÃO. Sem ele, um flex container com overflow-x
   reivindica a largura do conteúdo (8 bichos × 4,5rem = 576px) e empurra a
   página inteira: medido em 360px, o documento ia a 651px de scrollWidth e o
   texto de todos os cards saía da tela. `overflow-x: auto` só passa a valer
   quando o elemento tem permissão de encolher. */
.c-calendario__inimigos {
	display: flex;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	padding: 0 0 0.35rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	list-style: none;
	scrollbar-width: thin;
}

/* A mesma permissão, para cima: da fileira até a coluna do dia. Basta um elo
   sem min-width para a largura do conteúdo voltar a vazar -- e item de flex
   nasce com min-width:auto, que é min-content. `__eventos` é flex column, então
   `__evento` (o <details>) é item de flex e precisa disto. */
.c-calendario__corpo,
.c-calendario__bloco,
.c-calendario__evento { min-width: 0; }

.c-calendario__bicho {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.3rem;
	align-items: center;
	width: 4.5rem;
	scroll-snap-align: start;
}

.c-calendario__bichoSlot {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 3.5rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface-2);
	transition: border-color var(--transicao);
}

.c-calendario__bicho:hover .c-calendario__bichoSlot { border-color: var(--ouro-escuro); }

.c-calendario__bichoSlot img {
	width: 3.25rem;
	height: 3.25rem;
	object-fit: contain;
}

/* Mob sem render ainda: quadro vazio de propósito. Um <img> quebrado seria pior,
   e o nome embaixo já identifica o bicho. */
.c-calendario__bichoVazio {
	width: 1.25rem;
	height: 1.25rem;
	border: 1px dashed var(--linha-forte);
	border-radius: 50%;
}

/* O número fica SOBRE a arte, no canto, como o nível sobre a cabeça do mob no
   próprio jogo. Fora do slot, roubaria uma linha de cada bicho. */
.c-calendario__bichoNivel {
	position: absolute;
	right: -1px;
	bottom: -1px;
	min-width: 1.15rem;
	padding: 0 0.2rem;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	/* --bg (o fundo da página), e não --surface: a pastilha do nível monta
	   sobre a arte e precisa ser o tom mais escuro para o número não competir
	   com o bicho. */
	background: var(--bg);
	color: var(--ink-2);
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

.c-calendario__bichoNome {
	color: var(--ink-3);
	font-size: 0.6875rem;
	line-height: 1.25;
	text-align: center;
	/* Duas linhas e corta: "Hidra das Profundezas" em 4.5rem daria cinco linhas
	   e desalinharia a fileira inteira. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ------------------------------------------- responsivo (arte) ------------- */

@media (max-width: 640px) {
	/* O retrato entra na grade de áreas do gatilho empilhado. Sem isto ele cai
	   como coluna implícita e empurra o título para fora. */
	.c-calendario__evento.tem-arte .c-calendario__gatilho {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"retrato titulo seta"
			"meta    meta   meta";
	}

	.c-calendario__retrato { grid-area: retrato; }

	/* Em telefone o rótulo e a barra ficam na primeira linha e o texto desce:
	   "Entra com 50; lá dentro vai de 58 a 63." não cabe ao lado de nada. */
	.c-calendario__faixaTexto { flex-basis: 100%; }
}

@media (max-width: 480px) {
	.c-calendario__retrato { width: 48px; height: 48px; }
	.c-calendario__retrato img { width: 44px; height: 44px; }

	/* Bicho um pouco menor: em 360px passam ~4 antes de precisar rolar, o que
	   já mostra que a fileira continua. */
	.c-calendario__bicho { width: 4rem; }
	.c-calendario__bichoSlot { height: 3.25rem; }
	.c-calendario__bichoSlot img { width: 3rem; height: 3rem; }
}

/* Quem pediu menos animação não deve receber rolagem com inércia de snap. */
@media (prefers-reduced-motion: reduce) {
	.c-calendario__inimigos { scroll-snap-type: none; }
	.c-calendario__retrato,
	.c-calendario__bichoSlot { transition: none; }
}