/* ===========================================================================
   c-ferreiro - refino, chances e materiais
   =========================================================================== */

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

/* ----------------------------------------------------------------- topo ---- */

.c-ferreiro__topo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
	gap: var(--e-4);
	align-items: center;
	margin-bottom: var(--e-5);
}

/* --------------------------------------------------------------- alerta ---- */

/* Sem caixa colorida gritando: um selo, um fio a esquerda e o texto. A cor de
   brasa entra so no selo e no fio. */
.c-ferreiro__alerta {
	display: flex;
	gap: 0.875rem;
	margin-top: var(--e-3);
	padding-left: var(--e-2);
	border-left: 2px solid var(--brasa);
}

.c-ferreiro__alertaSelo {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--brasa);
	color: #14100c;
	font-size: 0.875rem;
	font-weight: 700;
}

.c-ferreiro__alerta strong {
	display: block;
	color: #e08468;
	font-size: 1.0625rem;
}

.c-ferreiro__alerta p {
	margin-top: 0.2rem;
	color: var(--ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* ------------------------------------------------------------------ NPC ---- */

.c-ferreiro__npcCol {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ---------------------------------------------------- bloco colapsavel ----- */

.c-ferreiro__caixa {
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
	overflow: hidden;
}

.c-ferreiro__resumo {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-2) var(--e-3);
	cursor: pointer;
	list-style: none;
	transition: background var(--transicao);
}

.c-ferreiro__resumo::-webkit-details-marker { display: none; }
.c-ferreiro__resumo:hover { background: rgba(255, 255, 255, 0.03); }

.c-ferreiro__resumoTexto {
	flex: 1 1 auto;
	min-width: 0;
}

.c-ferreiro__resumoTexto strong {
	display: block;
	color: var(--ink);
	font-size: 1rem;
	font-weight: 600;
}

.c-ferreiro__resumoTexto small {
	display: block;
	margin-top: 0.15rem;
	color: var(--ink-3);
	font-size: 0.8125rem;
}

/* Previa da curva no resumo fechado: nove colunas de 20px. */
.c-ferreiro__resumoCurva {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 24px;
}

.c-ferreiro__resumoCurva > span {
	width: 4px;
	min-height: 2px;
	border-radius: 1px;
	background: var(--ouro-escuro);
}

.c-ferreiro__resumoCurva > span[data-risco="medio"] { background: #cf9a3f; }
.c-ferreiro__resumoCurva > span[data-risco="alto"]  { background: var(--brasa); }

.c-ferreiro__seta {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--ink-3);
	transition: transform var(--transicao), color var(--transicao);
}

.c-ferreiro__resumo:hover .c-ferreiro__seta { color: var(--ouro); }

.c-ferreiro__caixa[open] .c-ferreiro__seta { transform: rotate(180deg); }

.c-ferreiro__caixa[open] .c-ferreiro__resumo {
	border-bottom: 1px solid var(--linha);
	background: rgba(217, 180, 90, 0.04);
}

/* A previa da curva sai quando abre: a tabela de verdade esta logo abaixo. */
.c-ferreiro__caixa[open] .c-ferreiro__resumoCurva { display: none; }

.c-ferreiro__corpo { padding: var(--e-3); }

/* --------------------------------------------------------------- escada ---- */

.c-ferreiro__escadaCabeca {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-2);
	flex-wrap: wrap;
	margin-bottom: var(--e-2);
}

.c-ferreiro__escadaTitulo {
	font-size: 1.0625rem;
	font-weight: 600;
}

.c-ferreiro__verTudo {
	color: var(--ouro);
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transicao);
}

.c-ferreiro__verTudo:hover { border-bottom-color: var(--ouro); }

/* Uma faixa por nivel. Sem bordas de grade: o alinhamento sustenta a leitura, e
   a barra e quem conta a queda de chance. */
.c-ferreiro__niveis {
	display: flex;
	flex-direction: column;
}

.c-ferreiro__nivel {
	display: grid;
	grid-template-columns: 2.4rem minmax(60px, 1fr) 3.4rem 7.5rem minmax(0, 11rem);
	gap: var(--e-2);
	align-items: center;
	padding: 0.5rem 0.5rem;
	border-radius: var(--raio-sm);
	font-size: 0.875rem;
	transition: background var(--transicao);
}

.c-ferreiro__nivel:hover { background: rgba(255, 255, 255, 0.03); }

.c-ferreiro__nivelNum {
	color: var(--ink-2);
	font-family: var(--fonte-mono);
	font-weight: 600;
}

.c-ferreiro__nivelBarra {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

.c-ferreiro__nivelBarra > span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--ouro);
}

/* A cor sai do risco, nao de um gradiente decorativo: verde-ouro enquanto e
   seguro, brasa quando a aposta aperta. */
.c-ferreiro__nivel[data-risco="medio"] .c-ferreiro__nivelBarra > span {
	background: #cf9a3f;
}
.c-ferreiro__nivel[data-risco="alto"] .c-ferreiro__nivelBarra > span {
	background: var(--brasa);
}
.c-ferreiro__nivel[data-risco="alto"] .c-ferreiro__nivelNum { color: #e08468; }

.c-ferreiro__nivelPct {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
}

.c-ferreiro__nivelPct small { color: var(--ink-3); font-weight: 400; }

.c-ferreiro__nivelCusto {
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.c-ferreiro__nivelCusto small {
	color: var(--ink-3);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.c-ferreiro__nivelMat {
	color: var(--ink-2);
	font-size: 0.8125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c-ferreiro__nada { color: var(--ink-3); }

.c-ferreiro__nota {
	margin-top: var(--e-2);
	max-width: 68ch;
	color: var(--ink-3);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------- curvas ---- */

.c-ferreiro__curvasTitulo {
	margin: var(--e-5) 0 var(--e-3);
	font-size: 1.0625rem;
	font-weight: 600;
}

.c-ferreiro__curvas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--e-2);
}

.c-ferreiro__curva {
	padding: var(--e-3);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
}

.c-ferreiro__curvaTopo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-2);
	margin-bottom: var(--e-2);
}

.c-ferreiro__curvaRotulo {
	color: var(--ouro-claro);
	font-size: 0.9375rem;
	font-weight: 600;
}

.c-ferreiro__curvaQtd {
	color: var(--ink-3);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

/* Grafico de nove colunas, alinhadas pela base. */
.c-ferreiro__grafico {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 76px;
	padding: 0 1px;
}

.c-ferreiro__coluna {
	flex: 1;
	min-height: 3px;
	border-radius: 2px 2px 0 0;
	background: linear-gradient(180deg, var(--ouro), rgba(217, 180, 90, 0.28));
}

/* Do sexto nivel em diante a coluna vira brasa: e onde a curva realmente dói. */
.c-ferreiro__coluna[data-nivel="7"],
.c-ferreiro__coluna[data-nivel="8"],
.c-ferreiro__coluna[data-nivel="9"] {
	background: linear-gradient(180deg, var(--brasa), rgba(200, 85, 47, 0.28));
}

.c-ferreiro__curvaEixo {
	display: flex;
	justify-content: space-between;
	margin-top: 0.375rem;
	color: var(--ink-3);
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
}

.c-ferreiro__curvaTexto {
	margin-top: var(--e-2);
	color: var(--ink-2);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------- extras ---- */

.c-ferreiro__extrasTitulo {
	margin: var(--e-5) 0 var(--e-3);
	font-size: 1.0625rem;
	font-weight: 600;
}

.c-ferreiro__extras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--e-2);
}

.c-ferreiro__extra {
	padding: var(--e-3);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
}

.c-ferreiro__extraTitulo {
	margin-bottom: 0.5rem;
	color: var(--ouro-claro);
	font-size: 0.9375rem;
	font-weight: 600;
}

.c-ferreiro__extraTexto {
	color: var(--ink-2);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------- pergaminhos ---- */

.c-ferreiro__pergaminhos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--e-3);
	padding-top: var(--e-2);
	border-top: 1px solid var(--linha);
}

.c-ferreiro__pergaminho {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.6rem 0.25rem 0.25rem;
	border: 1px solid var(--linha);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	transition: border-color var(--transicao);
}

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

.c-ferreiro__pergaminho img {
	width: 24px;
	height: 24px;
	image-rendering: pixelated;
}

.c-ferreiro__pergaminho em {
	color: var(--ink-2);
	font-size: 0.75rem;
	font-style: normal;
	white-space: nowrap;
}

/* ------------------------------------------------------------- a promessa -- */

.c-ferreiro__server {
	margin-top: var(--e-5);
	padding: var(--e-4);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background:
		radial-gradient(ellipse 60% 100% at 0% 0%, rgba(217, 180, 90, 0.09), transparent 65%),
		var(--bg-alt);
}

.c-ferreiro__serverTitulo {
	max-width: 24ch;
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
}

.c-ferreiro__serverTexto {
	max-width: 68ch;
	margin-top: var(--e-2);
	color: var(--ink-2);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.c-ferreiro__serverNota {
	margin-top: var(--e-2);
	padding-left: 0.875rem;
	border-left: 2px solid var(--ouro-escuro);
	color: var(--ink-3);
	font-size: 0.875rem;
}

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

@media (max-width: 900px) {
	/* Empilha texto sobre o NPC. O palco ganha altura reduzida no c-npc.css; o
	   boneco 3D roda aqui tambem (nao ha mais corte por largura). */
	.c-ferreiro__topo { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.c-ferreiro__resumo { gap: var(--e-2); padding: var(--e-2); }

	/* Em telefone o resumo tem pouca largura; a previa da curva sai e ficam o
	   texto e a seta. */
	.c-ferreiro__resumoCurva { display: none; }

	.c-ferreiro__corpo { padding: var(--e-2); }
}

/* Os cartoes de curva e de extras usam minmax(280px/240px,1fr): abaixo do min a
   coluna nao encolhe e vazaria (~300-320px de largura interna). Uma coluna so. */
@media (max-width: 480px) {
	.c-ferreiro__curvas,
	.c-ferreiro__extras { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	/* A faixa de nivel vira duas linhas: numero + barra + % em cima, custo e
	   material embaixo. Continua legivel sem rolagem horizontal. */
	.c-ferreiro__nivel {
		grid-template-columns: 2.2rem minmax(40px, 1fr) 3rem;
		row-gap: 0.25rem;
		padding-bottom: 0.7rem;
		border-bottom: 1px solid rgba(38, 38, 47, 0.6);
		border-radius: 0;
	}

	.c-ferreiro__nivelCusto {
		grid-column: 2 / 4;
		text-align: left;
	}

	.c-ferreiro__nivelMat { grid-column: 2 / 4; }
}