/* tema-anatomia.css - o tema Anatomia: uma silhueta fina, de frente, num traco continuo (diagrama
   de triagem desenhado por um designer suico, nunca um boneco). O corpo E o medidor de sangue: o
   interior se enche de perigo do pe para cima e o nivel desce com o sangue, com a linha tracejada
   no limiar em que se desmaia quando o servidor o manda. Cada lesao e um anel no lugar dela, que
   pulsa com o batimento, com uma linha guia fina ate o rotulo numa coluna ao lado: as do lado
   direito do corpo (a esquerda de quem olha) vao para a esquerda, as outras para a direita, e
   nenhuma guia cruza o corpo. A lesao de corpo inteiro e uma hachura sobre a silhueta, nao um
   anel. O diagrama mora na metade esquerda, e o centro fica livre para o corpo do jogador.

   Tudo por token. So transform e opacity animam; o nivel e um translateY no rect do SVG, em
   unidades do usuario (para um elemento SVG, 1px de transform CSS e 1 unidade do viewBox). */
.an { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* ---- o cabecalho: a fase e a manchete ------------------------------------------------------ */
.an-topo {
	position: absolute;
	left: var(--vt-coluna);
	top: calc(var(--vt-margem) - var(--aqua-space-2));
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: var(--aqua-space-1);
}
.an-fase { font-size: var(--vt-fs-fase); font-weight: 600; letter-spacing: -0.01em; line-height: 1; transition: color var(--vt-fase-t) var(--aqua-ease-in-out); }
.an[data-fase="out"] .an-fase { color: var(--vt-apagado); }
.an-titulo { font-size: var(--vt-fs-medio); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; padding-top: var(--aqua-space-3); }
.an-detalhe { font-size: var(--vt-fs-corpo); color: var(--vt-apagado); }
.an-topo--medico .an-fase { font-size: var(--vt-fs-medio); }
.an-topo--medico .an-titulo { font-size: var(--vt-fs-corpo); padding-top: var(--aqua-space-2); }
.an-topo--medico .an-detalhe { font-size: var(--vt-fs-meta); }

/* ---- o diagrama: a silhueta, os aneis, as guias e os rotulos, em px do quadro ---------------
   A caixa e fixa em 1920x1080 de proposito: num monitor mais largo o quadro cresce para a direita,
   e o diagrama fica onde a maquete o pos, na metade esquerda. */
.an-diagrama { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.an-silhueta { position: absolute; overflow: visible; }
.an-silhueta__sombra { fill: none; stroke: rgb(var(--aqua-black-rgb) / 55%); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.an-silhueta__traco { fill: none; stroke: var(--aqua-text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: 0.94; }
/* O sangue: um rect que desce dentro do recorte da silhueta; a superficie e um fio mais vivo. */
.an-silhueta__sangue { fill: rgb(var(--aqua-danger-rgb) / 62%); transform: translateY(calc((100 - var(--vt-sangue)) * 5.2px)); transition: transform var(--vt-nivel) linear; }
.an-silhueta__nivel { fill: var(--aqua-danger); transform: translateY(calc((100 - var(--vt-sangue)) * 5.2px)); transition: transform var(--vt-nivel) linear; }
.an-silhueta__limiar { stroke: var(--vt-apagado); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.an-silhueta__limiar-n { font-family: var(--aqua-font-mono); font-size: var(--vt-fs-mini); fill: var(--vt-fraco); }
.an-silhueta__hachura-linha { stroke: var(--aqua-danger); stroke-width: 1.2; }
.an-silhueta__corpo-inteiro { opacity: 0.6; }

.an-anel {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	border: 2px solid var(--aqua-danger);
	box-shadow: 0 0 0 1px rgb(var(--aqua-black-rgb) / 45%);
	will-change: transform;
}
.an-anel[data-grau="4"]::after { content: ""; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; border-radius: 50%; background: var(--aqua-danger); }
.an-anel[data-estancado] { border-color: var(--vt-apagado); }
.an-anel[data-estancado]::after { background: var(--vt-apagado); }

.an-guias { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
.an-guia { fill: none; stroke: rgb(var(--aqua-text-rgb) / 55%); stroke-width: 1; }
.an-guia[data-estancado] { stroke: rgb(var(--aqua-text-rgb) / 30%); }

.an-rotulo { position: absolute; display: flex; flex-direction: column; gap: 2px; max-width: 280px; }
.an-rotulo--esq { align-items: flex-end; text-align: right; max-width: 232px; }
.an-rotulo__texto { font-size: var(--vt-fs-meta); line-height: 1.2; }
.an-rotulo__meta { font-size: var(--vt-fs-mini); color: var(--vt-apagado); display: flex; align-items: center; gap: var(--aqua-space-2); }
.an-rotulo[data-estancado] .an-rotulo__texto { color: var(--vt-apagado); }
/* A lesao de corpo inteiro traz a amostra da hachura no lugar de um anel. */
.an-rotulo__amostra { width: 14px; height: 14px; border-radius: 3px; flex: none; opacity: 0.8; background: repeating-linear-gradient(45deg, var(--aqua-danger) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px rgb(var(--aqua-danger-rgb) / 60%); }

/* A entrada em cascata: o anel e o rotulo sobem, a guia so aparece. */
.an-anel, .an-rotulo { animation: vt-subir var(--aqua-t-base) var(--aqua-ease-out) both; animation-delay: calc(var(--i, 0) * var(--aqua-cascata)); }
.an-guia { animation: vt-aparecer var(--aqua-t-base) var(--aqua-ease-out) both; animation-delay: calc(var(--i, 0) * var(--aqua-cascata) + var(--aqua-t-rapido)); }

/* ---- a leitura, sob a silhueta: o sangue e o pulso, pequenos --------------------------------- */
.an-leitura { position: absolute; display: flex; align-items: baseline; gap: var(--aqua-space-8); white-space: nowrap; }
.an-leitura__sangue { display: flex; align-items: baseline; gap: var(--aqua-space-2); }
.an-leitura__sangue b { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; font-size: var(--vt-fs-medio); font-weight: 500; line-height: 1; color: var(--aqua-danger); }
.an-leitura__sangue small { font-size: var(--vt-fs-meta); color: var(--vt-apagado); }
.an-leitura__bpm { display: flex; align-items: baseline; gap: var(--aqua-space-2); }
.an-leitura__bpm b { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; font-size: var(--vt-fs-corpo); font-weight: 500; line-height: 1; display: inline-block; }
.an-leitura__bpm b:empty { display: none; }
.an-leitura__bpm span { font-size: var(--vt-fs-meta); color: var(--vt-apagado); }

/* ---- as acoes, na margem de baixo ---------------------------------------------------------- */
.an-acoes { position: absolute; left: var(--vt-coluna); bottom: var(--vt-margem); display: flex; flex-direction: column; gap: var(--aqua-space-3); }

/* ---- o modo simples: a silhueta pequena, com o tempo dentro, e o cronometro ---------------- */
.an-simples {
	position: absolute;
	left: var(--vt-coluna);
	bottom: var(--vt-margem);
	display: flex;
	flex-direction: column;
	gap: var(--aqua-space-3);
}
.an-simples__figura { position: relative; width: 84px; height: 220px; margin-bottom: var(--aqua-space-2); }
.an-simples__figura .an-silhueta { left: 0; top: 0; width: 84px; height: 220px; }
/* No simples o que enche e o tempo que falta, nao o sangue: --an-tempo, 0 a 100. */
.an-simples__figura .an-silhueta__sangue, .an-simples__figura .an-silhueta__nivel { transform: translateY(calc((100 - var(--an-tempo, 100)) * 5.2px)); }
.an-simples__titulo { font-size: var(--vt-fs-medio); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.an-simples__tempo { font-family: var(--aqua-font-mono); font-size: var(--vt-fs-tempo); font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.an-simples__linha { font-size: var(--vt-fs-corpo); color: var(--vt-apagado); }