/* Burgo — componentes: pergaminho, diálogos, inventário, mapa, gazeta e animações */

/* ---- o pergaminho (caixa do conteúdo) ------------------------------------- */
.pergaminho {
	border: 12px solid transparent;
	border-image: url("art/moldura.svg") 4 / 12px stretch;
	background: var(--caixa) padding-box;
	box-shadow: 10px 10px 0 var(--sombra);
	padding: 1.6rem clamp(1rem, 4vw, 2.6rem) 2rem;
}
.page_content { overflow-wrap: break-word; }
.page_content > :first-child { margin-top: 0; }
/* o bug abre um <p> antes de cada bloco em html; esconde os vazios */
.page_content p:empty { display: none; }

h1, h2, h3 {
	font-family: var(--font-titulo);
	font-weight: 400;
	line-height: 1.05;
	color: var(--titulo);
	letter-spacing: 0.01em;
	margin: 1.6rem 0 0.8rem;
	text-shadow: 2px 2px 0 var(--sombra);
}
h1 { font-size: 3.2rem; }
h2 { font-size: 2.7rem; }
h3 { font-size: 2.2rem; }
h4, h5, h6 {
	font-family: var(--font-texto);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--titulo);
	margin: 1.4rem 0 0.6rem;
}
h4 { font-size: 1.05rem; }
h5, h6 { font-size: 0.9rem; }

p { margin: 0 0 1em; }
strong { color: var(--destaque); }
em { font-style: oblique 8deg; }
del { color: var(--texto-suave); }
center { display: block; margin-bottom: 0.9em; }
img { max-width: 100%; height: auto; }

a {
	color: var(--link);
	text-decoration: underline dotted 2px;
	text-underline-offset: 4px;
	transition: background var(--duracao) steps(2), color var(--duracao) steps(2);
}
a:hover {
	background: var(--link-hover-fundo);
	color: var(--link-hover-texto);
	text-decoration: none;
}

/* hr vira uma linha de pixels dourados com um losango no meio */
hr {
	position: relative;
	height: 8px;
	margin: 2rem 0;
	border: 0;
	background: repeating-linear-gradient(90deg, var(--ouro-medio) 0 8px, transparent 8px 16px) center / 100% 4px no-repeat;
}
hr::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	background: var(--ouro);
	border: 3px solid var(--caixa);
	transform: translate(-50%, -50%) rotate(45deg);
}

code, pre {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.85em;
}
code {
	padding: 1px 6px;
	background: var(--caixa-funda);
	border: 2px solid var(--ouro-escuro);
}
pre {
	padding: 1rem;
	overflow-x: auto;
	white-space: pre-wrap;
	background: var(--caixa-funda);
	border: 3px solid var(--ouro-escuro);
	box-shadow: inset 4px 4px 0 var(--sombra);
}
pre code { padding: 0; border: 0; background: none; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { padding: 6px 10px; border: 2px solid var(--ouro-escuro); text-align: left; }
th { background: var(--caixa-funda); color: var(--titulo); }

/* ---- caixa de diálogo (blockquote) ---------------------------------------- */
blockquote {
	position: relative;
	margin: 1.6rem 0;
	padding: 1rem 1.4rem 1.4rem;
	border: 12px solid transparent;
	border-image: url("art/moldura-pedra.svg") 4 / 12px stretch;
	background: var(--caixa-funda) padding-box;
	text-align: left;
}
blockquote p:last-child { margin-bottom: 0; }
/* a seta "continuar" piscando no canto */
blockquote::after {
	content: "";
	position: absolute;
	right: 6px;
	bottom: 2px;
	width: 14px;
	height: 8px;
	background: url("art/continuar.svg") center / contain no-repeat;
	animation: piscar 1.1s steps(1) infinite;
}
/* na home e no "sobre", quem fala é o Pablo */
.page_home blockquote::before,
.page_en_home blockquote::before {
	content: "Pablo diz:";
	position: absolute;
	left: 10px;
	top: -26px;
	padding: 0 8px;
	background: var(--vermelho);
	color: var(--ouro-claro);
	font-weight: 700;
	font-size: 0.8rem;
	box-shadow: 3px 3px 0 var(--sombra);
}
.page_en_home blockquote::before { content: "Pablo says:"; }

/* ---- páginas: home centralizada, sobre/gavetão em coluna de leitura -------- */
.page_home .page_content,
.page_en_home .page_content { text-align: center; max-width: 640px; margin: 0 auto; }
/* o mapa substitui o logo da home neste tema */
.page_home .page_content img[alt="Murad Town"],
.page_en_home .page_content img[alt="Murad Town"] { display: none; }
.page_sobre .page_content,
.page_en_sobre .page_content,
body[class*="page_gavetao"] .page_content { max-width: 760px; margin: 0 auto; }

/* ---- inventário (Gavetão) ------------------------------------------------- */
.inventario {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 14px;
	margin: 1.4rem 0;
}
.slot {
	position: relative;
	padding: 0.7rem 0.9rem 0.8rem 3.6rem;
	border: 12px solid transparent;
	border-image: url("art/moldura-pedra.svg") 4 / 12px stretch;
	background: var(--caixa-funda) padding-box;
	line-height: 1.45;
	transition: transform var(--duracao) steps(2), box-shadow var(--duracao) steps(2);
}
.slot::before {
	content: "";
	position: absolute;
	left: 0.4rem;
	top: 0.7rem;
	width: 40px;
	height: 32px;
	background: url("art/bau.svg") center / contain no-repeat;
}
.slot-pub::before { background-image: url("art/pergaminho.svg"); }
.slot-web::before { background-image: url("art/orbe.svg"); }
.slot > a { display: block; font-weight: 700; text-decoration: none; }
.slot-sep,
.slot br { display: none; }
.slot-desc { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--texto-suave); }
.slot:hover,
.slot:focus-within { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ouro-escuro); }

/* ---- o mapa da vila (home) ------------------------------------------------ */
.mapa {
	margin: 0 0 18px;
	border: 12px solid transparent;
	border-image: url("art/moldura.svg") 4 / 12px stretch;
	background: var(--ceu-1) padding-box;
	box-shadow: 10px 10px 0 var(--sombra);
}
.mapa-svg { display: block; width: 100%; height: auto; }
.mapa-svg .ceu-1 { fill: var(--ceu-1); }
.mapa-svg .ceu-2 { fill: var(--ceu-2); }
.mapa-svg .ceu-3 { fill: var(--ceu-3); }
.mapa-svg .colina { fill: var(--colina); }
.mapa-svg .chao { fill: var(--chao); }
.mapa-svg .caminho { fill: var(--caminho); }
.mapa-svg .astro { fill: var(--astro); }
.mapa-svg .estrela { fill: var(--estrela); }
.mapa-svg .estrela:nth-child(3n) { animation: piscar 2.4s steps(1) infinite; }
.mapa-svg .estrela:nth-child(5n) { animation: piscar 3.7s steps(1) 0.8s infinite; }
.mapa-svg .lampiao .px-y { animation: tremular 0.9s steps(2) infinite; }
.mapa-svg .predio-torre .px-R { animation: piscar 1.4s steps(1) infinite; }

/* ---- a vila viva: bandeira, ondas de rádio, janelas, fumaça, nuvens ------- */
/* bandeira do castelo: dois quadros alternados */
.mapa-svg .bandeira-a { animation: piscar 0.9s steps(1) infinite; }
.mapa-svg .bandeira-b { animation: piscar 0.9s steps(1) -0.45s infinite; }
/* ondas da torre de rádio: a interna, depois a externa */
.mapa-svg .predio-torre .px-G { animation: radio 1.6s steps(1) infinite; }
.mapa-svg .predio-torre .px-W { animation: radio 1.6s steps(1) 0.4s infinite; }
@keyframes radio {
	0% { opacity: 1; }
	40%, 100% { opacity: 0.12; }
}
/* janelas do castelo: alguém acende e apaga uma vela */
.mapa-svg .predio-castelo .px-y { animation: tremular 2.6s steps(2) infinite; }
/* fumaça da chaminé da gazeta */
.mapa-svg .fumaca { fill: var(--fumaca); opacity: 0; animation: subir 3s steps(6) infinite; }
.mapa-svg .fumaca.f2 { animation-delay: 1s; }
.mapa-svg .fumaca.f3 { animation-delay: 2s; }
@keyframes subir {
	0% { transform: translate(0, 0); opacity: 0.9; }
	100% { transform: translate(4px, -10px); opacity: 0; }
}
/* nuvens atravessando o céu (com atraso negativo, já começam no meio) */
.mapa-svg .nuvem path { fill: var(--nuvem); }
.mapa-svg .nuvem { animation: vento 80s steps(190) infinite; }
.mapa-svg .nuvem.n1 { animation-delay: -28s; }
.mapa-svg .nuvem.n2 { animation-duration: 115s; animation-delay: -80s; }
@keyframes vento {
	from { transform: translateX(0); }
	to { transform: translateX(192px); }
}
/* estrela cadente, de vez em quando */
.mapa-svg .cadente { fill: var(--estrela); opacity: 0; animation: cometa 11s steps(14) 2s infinite; }
@keyframes cometa {
	0% { transform: translate(0, 0); opacity: 0; }
	1% { opacity: 1; }
	9% { transform: translate(56px, 22px); opacity: 0; }
	100% { transform: translate(56px, 22px); opacity: 0; }
}
/* vaga-lumes perto das árvores */
.mapa-svg .vagalume { fill: var(--vagalume); opacity: 0; animation: vagar 4.4s steps(1) infinite; }
.mapa-svg .vagalume.v1 { animation-delay: 1.1s; }
.mapa-svg .vagalume.v2 { animation-delay: 2.3s; }
.mapa-svg .vagalume.v3 { animation-delay: 3.2s; }
@keyframes vagar {
	0% { opacity: 0; transform: translate(0, 0); }
	15% { opacity: 1; transform: translate(1px, -1px); }
	30% { opacity: 0.4; transform: translate(2px, -1px); }
	45% { opacity: 1; transform: translate(2px, 0); }
	60%, 100% { opacity: 0; transform: translate(0, 0); }
}
.mapa-svg text {
	font-family: var(--font-texto);
	font-size: 4.6px;
	font-weight: 700;
	fill: var(--ouro-claro);
	paint-order: stroke;
	stroke: var(--tinta);
	stroke-width: 1px;
}
.mapa-svg a { text-decoration: none; }
.mapa-svg .area { fill: transparent; }
.mapa-svg .predio { transition: transform var(--duracao) steps(2); }
.mapa-svg a:hover .predio,
.mapa-svg a:focus-visible .predio {
	transform: translateY(-2px);
	filter: drop-shadow(0 0 1.5px var(--ouro));
}
.mapa-svg a:hover text,
.mapa-svg a:focus-visible text { fill: var(--ouro); }
.mapa-svg a:focus-visible { outline: none; }
.mapa-svg a:focus-visible .area {
	fill: rgba(244, 197, 66, 0.18);
	stroke: var(--foco);
	stroke-width: 0.8px;
	stroke-dasharray: 2 1;
}

/* em telas pequenas, o mapa vira uma lista de lugares */
.mapa-lista { display: none; }
@media (max-width: 560px) {
	.mapa { background: var(--caixa) padding-box; }
	.mapa-svg { display: none; }
	.mapa-lista { display: grid; gap: 4px; margin: 0; padding: 6px; list-style: none; }
	.mapa-lista a { display: flex; align-items: center; gap: 12px; padding: 6px; text-decoration: none; color: var(--texto); }
	.mapa-lista strong { color: var(--titulo); }
	.mapa-lista img { flex: none; image-rendering: pixelated; }
}

/* ---- Gazeta do Burgo (blog) ----------------------------------------------- */
.gazeta-cabeca {
	text-align: center;
	padding-bottom: 0.8rem;
	margin-bottom: 1.4rem;
	border-bottom: 4px double var(--ouro-medio);
}
.gazeta-nome {
	display: block;
	font-family: var(--font-titulo);
	font-size: clamp(2.6rem, 8vw, 4rem);
	line-height: 1;
	color: var(--titulo);
	text-shadow: 3px 3px 0 var(--sombra);
}
.gazeta-linha {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texto-suave);
}
.cronica-titulo { margin-top: 0; font-size: 2.8rem; }
.cronica-data { margin-top: -0.4rem; font-size: 0.85rem; color: var(--texto-suave); }
.cronica-data::before { content: "✦ "; color: var(--ouro-medio); }

ul.postlist { margin: 0; padding: 0; list-style: none; }
ul.postlist li { margin: 0 0 6px; }
ul.postlist a {
	display: block;
	padding: 8px 10px;
	text-decoration: none;
	border-bottom: 2px dashed var(--ouro-escuro);
}
.postlist-date { color: var(--texto-suave); font-size: 0.85rem; }
ul.postlist a:hover .postlist-date { color: inherit; }
.moreposts { margin-top: 1rem; text-align: right; }

/* placas: « mais recente · índice · mais antigo » */
#nextprev {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 4px double var(--ouro-medio);
	color: transparent; /* esconde os "·" entre as placas */
	font-size: 0;
}
#nextprev a {
	font-size: 0.9rem;
	padding: 4px 12px;
	border: 3px solid var(--ouro-medio);
	background: var(--caixa-funda);
	text-decoration: none;
	box-shadow: 3px 3px 0 var(--sombra);
}

/* ---- animações (passos, como num console de 8 bits) ----------------------- */
@keyframes piscar {
	50% { opacity: 0; }
}
@keyframes tremular {
	50% { opacity: 0.55; }
}
/* terceira camada de estrelas, que pisca */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(var(--estrela) 1px, transparent 1.6px);
	background-size: 227px 193px;
	background-position: 91px 13px;
	animation: piscar 3.1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}