/* hud.css - o que todo jogador ve: os alertas, o cartao do /previsao, os avisos e a barra do ensaio.

   So o HUD. O painel de clima tem o panel.css, que entra na primeira abertura. Tudo em
   @layer aqua.consumidor e so por token: zero literal de cor. Sem laco de animacao: o que se move
   e transicao de opacidade com os tempos do kit, e o no sai do DOM por relogio (hud.js). */

/* Fora de camada, como no painel.css do aqua-manager: o [hidden] tem de vencer o display do kit. */
[hidden] { display: none !important; }

@layer aqua.consumidor {
	html { background: transparent; }
	body { margin: 0; min-height: 100vh; overflow: hidden; }

	/* ==== o conteiner do painel: a tela inteira, o painel no centro ======================== */
	.aw-painel {
		position: fixed;
		inset: 0;
		z-index: calc(var(--aqua-z-veil) + 1);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--aqua-space-4);
		box-sizing: border-box;
	}

	/* ==== a entrada e a saida de tudo que o HUD mostra ==================================== */
	/* Opacidade e um deslize curto; o hud.js poe a classe um quadro depois de anexar, e a tira
	   300 ms antes de remover o no. Sem transitionend em lado nenhum: no CEF sem ecra a transicao
	   pode nao andar, e o no sairia na mesma. */
	.aw-alerta, .aw-aviso, .aw-cartao, .aw-ensaio {
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity var(--aqua-t-base) var(--aqua-ease-out), transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aw-hud--visivel { opacity: 1; transform: translateY(0); }

	/* ==== os alertas: no alto, ao centro, um embaixo do outro ============================== */
	/* Um alerta e uma frase do dono ("Tempestade chegando em 5 minutos."), sobre o jogo cru. O tint
	   e o do modo HUD (2), e o tom entra como um fio a esquerda, na cor semantica do token. */
	.aw-hud-alertas {
		position: fixed;
		top: var(--aqua-space-8);
		left: 50%;
		transform: translateX(-50%);
		z-index: var(--aqua-z-toast);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--aqua-space-2);
		pointer-events: none;
	}
	.aw-alerta {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-3);
		padding: var(--aqua-space-2) var(--aqua-space-4) var(--aqua-space-2) var(--aqua-space-3);
		border-radius: var(--aqua-radius-md);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-left: 3px solid var(--aqua-warning);
		background: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-hud-2-tint));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		font-weight: 500;
		line-height: var(--aqua-lh-tight);
		max-width: 60vw;
	}
	.aw-alerta--danger { border-left-color: var(--aqua-danger); }
	.aw-alerta--info { border-left-color: var(--aqua-info); }
	.aw-alerta--success { border-left-color: var(--aqua-success); }

	/* ==== o cartao do /previsao: no alto, a direita ======================================== */
	/* Tipografico, sem icone: o HUD nao carrega os icones do kit. A regiao em cima, e uma linha por
	   segmento da fila: a hora de jogo em mono, o clima, a temperatura em mono a direita. A linha de
	   agora e a primeira, e leva o texto cheio; as seguintes, o muted. */
	.aw-cartao {
		position: fixed;
		top: var(--aqua-space-8);
		right: var(--aqua-space-8);
		z-index: var(--aqua-z-toast);
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 260px;
		max-width: 340px;
		padding: var(--aqua-space-3) var(--aqua-space-4);
		border-radius: var(--aqua-radius-lg);
		color: var(--aqua-text);
		pointer-events: none;
	}
	.aw-cartao__cabeca { display: flex; flex-direction: column; gap: 2px; line-height: var(--aqua-lh-tight); }
	.aw-cartao__regiao { font-size: var(--aqua-fs-lg); font-weight: 600; letter-spacing: -0.01em; }
	.aw-cartao__nota { font-size: var(--aqua-fs-xs); color: var(--aqua-text-muted); }
	.aw-cartao__lista { display: flex; flex-direction: column; }
	.aw-cartao__linha {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr) auto;
		align-items: baseline;
		gap: var(--aqua-space-3);
		padding: var(--aqua-space-1) 0;
		border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		font-size: var(--aqua-fs-sm);
		color: var(--aqua-text-muted);
	}
	.aw-cartao__linha:first-child { border-top: 0; }
	.aw-cartao__linha--agora { color: var(--aqua-text); font-weight: 500; }
	.aw-cartao__hora, .aw-cartao__temp { font-variant-numeric: tabular-nums; }
	.aw-cartao__clima { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	/* ==== os avisos: embaixo, a direita, como a pilha de toasts do kit ===================== */
	.aw-hud-avisos {
		position: fixed;
		right: var(--aqua-space-8);
		bottom: var(--aqua-space-8);
		z-index: var(--aqua-z-toast);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--aqua-space-2);
	}
	.aw-aviso {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-3);
		padding: var(--aqua-space-2) var(--aqua-space-3) var(--aqua-space-2) var(--aqua-space-4);
		border-radius: var(--aqua-radius-md);
		border-left: 3px solid var(--aqua-info);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		max-width: 420px;
	}
	.aw-aviso--success { border-left-color: var(--aqua-success); }
	.aw-aviso--warning { border-left-color: var(--aqua-warning); }
	.aw-aviso--danger { border-left-color: var(--aqua-danger); }

	/* ==== o ensaio: a barra pequena, sem veu, sobre o ceu de verdade ====================== */
	/* Sem botao: cada gesto e uma tecla, e a barra so diz qual. O kbd e o da base do kit. */
	.aw-ensaio {
		position: fixed;
		left: 50%;
		top: var(--aqua-space-8);
		transform: translateX(-50%);
		z-index: calc(var(--aqua-z-veil) + 1);
		display: flex;
		align-items: center;
		gap: var(--aqua-space-4);
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border-radius: var(--aqua-radius-lg);
		white-space: nowrap;
	}
	.aw-ensaio.aw-hud--visivel { transform: translateX(-50%); }
	.aw-ensaio__estado { display: flex; align-items: baseline; gap: var(--aqua-space-2); }
	.aw-ensaio__estado strong { font-weight: 600; }
	.aw-ensaio__teclas {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-4);
		padding-left: var(--aqua-space-4);
		border-left: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		font-size: var(--aqua-fs-sm);
		color: var(--aqua-text-muted);
	}
	.aw-ensaio__tecla { display: flex; align-items: center; gap: var(--aqua-space-2); }
	.aw-ensaio__tecla:first-child { color: var(--aqua-text); }
}