/* ============================================================================
   home.css — página inicial                                     [Fase 5 — 2026-09-27]
   Mobile-first: tudo nasce para o celular e ganha colunas a partir de 640/992px.
   Usa só os tokens do design system (--tv-*), então segue o modo e o tema ativo.
   ============================================================================ */
.tvh-hero {
	position: relative;
	min-height: calc(100svh - 70px);
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(120% 80% at 80% 10%, color-mix(in srgb, var(--tv-destaque) 22%, transparent), transparent 60%),
		radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--tv-matiz) 14%, transparent), transparent 55%),
		var(--tv-fundo);
}
html[data-modo="claro"] .tvh-hero {
	background:
		radial-gradient(120% 80% at 80% 10%, color-mix(in srgb, var(--tv-destaque) 16%, transparent), transparent 60%),
		linear-gradient(180deg, #1b1840 0%, #2a2466 100%);
}
.tvh-ceu {
	position: absolute; inset: 0; width: 100%; height: 100%;
	z-index: -1; image-rendering: pixelated; cursor: crosshair; touch-action: manipulation;
}
.tvh-hero-conteudo { position: relative; padding: 56px 16px 72px; pointer-events: none; }
.tvh-hero-conteudo a, .tvh-hero-conteudo button { pointer-events: auto; }

.tvh-selo {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 16px; padding: 6px 12px;
	font-size: 12px; font-weight: 600; letter-spacing: .02em;
	color: #e8e6ff; background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
	backdrop-filter: blur(6px);
}
.tvh-pontinho { width: 8px; height: 8px; border-radius: 50%; background: var(--tv-ok); box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.tvh-titulo {
	margin: 0 0 12px; color: #fff !important;
	font-size: clamp(34px, 9vw, 64px); line-height: 1.02; letter-spacing: -.02em; font-weight: 800;
	text-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
.tvh-destaque {
	color: #fff;
	background: linear-gradient(90deg, color-mix(in srgb, var(--tv-destaque) 35%, #fff) 0%, #ffffff 55%, color-mix(in srgb, var(--tv-destaque) 45%, #fff) 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	text-shadow: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35));
}
.tvh-frase {
	margin: 0 0 24px; max-width: 560px; min-height: 3em;
	font-size: clamp(16px, 4.2vw, 19px); line-height: 1.5; color: rgba(236, 236, 245, .86);
}
.tvh-frase::after { content: '▌'; margin-left: 2px; color: var(--tv-destaque); animation: tvh-pisca 1s steps(1) infinite; }
@keyframes tvh-pisca { 50% { opacity: 0; } }

.tvh-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.tvh-botao {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 46px; padding: 0 18px;
	font-weight: 700; font-size: 15px; text-decoration: none !important;
	color: #fff !important; background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--tv-raio);
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tvh-botao:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .16); }
.tvh-botao:active { transform: translateY(1px); }
.tvh-botao-principal {
	background: var(--tv-destaque); border-color: transparent;
	box-shadow: 0 6px 0 color-mix(in srgb, var(--tv-destaque) 55%, #000), 0 14px 30px color-mix(in srgb, var(--tv-destaque) 35%, transparent);
}
.tvh-botao-principal:hover { background: color-mix(in srgb, var(--tv-destaque) 88%, #fff); }
.tvh-botao-principal:active { box-shadow: 0 2px 0 color-mix(in srgb, var(--tv-destaque) 55%, #000); }
.tvh-botao-fantasma { background: transparent; }
/* botões fora do herói seguem o modo */
.tvh-secao .tvh-botao { color: var(--tv-texto) !important; background: var(--tv-superficie-2); border-color: var(--tv-borda); }
.tvh-secao .tvh-botao-principal { color: #fff !important; background: var(--tv-destaque); border-color: transparent; }

.tvh-dica { margin: 20px 0 0; font-size: 13px; color: rgba(236, 236, 245, .7); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.tvh-dica strong { padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #ffe066; font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.tvh-pausa {
	position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px;
	border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer;
}

/* ---------- seções ---------- */
.tvh-secao { padding: 48px 0; }
.tvh-secao-topo { margin-bottom: 20px; }
.tvh-sobre { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tv-destaque); }
.tvh-secao h2 { margin: 0; font-size: clamp(24px, 6vw, 34px); letter-spacing: -.01em; color: var(--tv-texto); }

.tvh-grade { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tvh-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tvh-grade { grid-template-columns: repeat(3, 1fr); } }
.tvh-card {
	position: relative; display: flex; align-items: center; gap: 14px;
	padding: 16px; min-height: 84px; text-decoration: none !important; color: var(--tv-texto) !important;
	background: var(--tv-superficie); border: 1px solid var(--tv-borda); border-radius: var(--tv-raio);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tvh-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tv-destaque) 60%, var(--tv-borda)); box-shadow: var(--tv-sombra); }
.tvh-card-icone {
	flex: 0 0 48px; height: 48px; display: grid; place-items: center; font-size: 22px;
	border-radius: calc(var(--tv-raio) * .8); color: #fff;
	background: linear-gradient(135deg, var(--tv-destaque), color-mix(in srgb, var(--tv-destaque) 55%, #000));
}
.tvh-card-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tvh-card-texto strong { font-size: 16px; }
.tvh-card-texto span { font-size: 13.5px; color: var(--tv-texto-2); line-height: 1.35; }
.tvh-seta { margin-left: auto; color: var(--tv-texto-2); transition: transform .15s ease; }
.tvh-card:hover .tvh-seta { transform: translateX(4px); color: var(--tv-destaque); }
.tvh-tag {
	position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: 2px 8px; border-radius: 999px; background: var(--tv-superficie-2); color: var(--tv-texto-2); border: 1px solid var(--tv-borda);
}

.tvh-jogos { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tvh-jogos { grid-template-columns: repeat(3, 1fr); } }
.tvh-jogo {
	position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10;
	border-radius: var(--tv-raio-lg); border: 1px solid var(--tv-borda); background: var(--tv-superficie-2);
	text-decoration: none !important;
}
.tvh-jogo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; image-rendering: auto; }
.tvh-jogo:hover img { transform: scale(1.06); }
.tvh-jogo-texto {
	position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px;
	display: flex; flex-direction: column; color: #fff;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
}
.tvh-jogo-texto strong { font-size: 18px; }
.tvh-jogo-texto span { font-size: 13px; opacity: .85; }

.tvh-faixa {
	display: flex; flex-direction: column; gap: 18px; padding: 24px;
	border-radius: var(--tv-raio-lg); border: 1px solid var(--tv-borda);
	background:
		radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--tv-destaque) 20%, transparent), transparent 60%),
		var(--tv-superficie);
}
.tvh-faixa p { margin: 8px 0 0; color: var(--tv-texto-2); max-width: 560px; }
@media (min-width: 992px) {
	.tvh-faixa { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 36px; }
	.tvh-hero-conteudo { padding: 80px 16px 96px; }
}

@media (prefers-reduced-motion: reduce) {
	.tvh-botao, .tvh-card, .tvh-jogo img { transition: none; }
	.tvh-frase::after { animation: none; }
}

/* ---------- portal (telas para quem não está logado) — 2026-09-28 ---------- */
.tvh-portal { min-height: calc(88svh - 70px); }
/* [2026-10-02] o #wrapper é coluna flex com o rodapé empurrado para o fim (margin-top: auto): o portal
   cresce até encostar no rodapé — antes sobrava uma faixa vazia entre o céu e o rodapé (e, no celular,
   atrás do menu inferior). A home (que tem seções depois do céu) não usa .tvh-portal e não muda. */
#wrapper > .tvh-portal { flex: 1 0 auto; }
@media (max-width: 767.98px) {
	.tvh-portal { min-height: calc(100svh - 58px); }   /* céu até o fim da tela, por trás do menu inferior fixo */
	.tvh-portal .tvh-pausa { bottom: 70px; }           /* botão de pausa acima do menu inferior */
}
.tvh-frase-fixa { min-height: 0; }
.tvh-frase-fixa::after { display: none; }

/* ---------- Terra 8-bit + Lua em órbita [2026-09-30] ----------------------
   A arte (Terra 34 px, Lua 11 px de arte, na proporção real ~27%) vem do tv-pixel.js;
   aqui só ampliamos sem suavizar (--tt = tamanho de 1 pixel de arte) e fazemos a órbita
   em CSS puro: X e Y oscilam com curva senoidal defasados 1/4 de volta = elipse; na
   metade de cima a Lua passa POR TRÁS da Terra (z-index), na de baixo passa na frente. */
.tvh-terra {
	--tt: 4px; --orbita: 40s;
	position: absolute; top: 10%; right: 11%; z-index: -2;   /* [2026-09-30] atrás do canvas: disco, inimigos e textos passam POR CIMA da Terra */
	width: calc(34 * var(--tt)); height: calc(34 * var(--tt));
	pointer-events: none; isolation: isolate;
}
.tvh-terra:not(.tvh-terra-pronta) { visibility: hidden; }
.tvh-terra img { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.tvh-terra-globo {
	position: absolute; inset: 0; z-index: 2;
	filter: drop-shadow(0 0 calc(var(--tt) * 4) rgba(90, 170, 255, .28));
}
.tvh-lua-x {
	position: absolute; left: 50%; top: 50%; z-index: 3;
	width: calc(11 * var(--tt)); height: calc(11 * var(--tt));
	margin: calc(-5.5 * var(--tt)) 0 0 calc(-5.5 * var(--tt));
	animation: tvh-lua-x calc(var(--orbita) / 2) cubic-bezier(.37, 0, .63, 1) infinite alternate,
		tvh-lua-z var(--orbita) step-end infinite;
}
.tvh-lua-y {
	display: block; width: 100%; height: 100%;
	animation: tvh-lua-y calc(var(--orbita) / 2) cubic-bezier(.37, 0, .63, 1) calc(var(--orbita) / -4) infinite alternate;
}
@keyframes tvh-lua-x { from { transform: translateX(calc(-30 * var(--tt))); } to { transform: translateX(calc(30 * var(--tt))); } }
@keyframes tvh-lua-y { from { transform: translateY(calc(-9 * var(--tt))); } to { transform: translateY(calc(9 * var(--tt))); } }
/* 1ª metade da volta: Lua embaixo (na frente); 2ª metade: em cima (atrás, um pouco mais escura) */
@keyframes tvh-lua-z { 0% { z-index: 3; filter: none; } 50% { z-index: 1; filter: brightness(.72); } }
.tvh-terra-parada .tvh-lua-x, .tvh-terra-parada .tvh-lua-y { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tvh-lua-x, .tvh-lua-y { animation-play-state: paused; } }
@media (max-width: 991px) { .tvh-terra { --tt: 3px; top: 8%; right: 8%; } }
@media (max-width: 575px) { .tvh-terra { --tt: 2px; top: 5%; right: 12%; opacity: .85; } }

/* ---------- placar do jogo do céu [2026-09-30] ---------- */
.tvh-dica kbd { padding: 0 5px; border-radius: 4px; font: 700 11px/1.5 ui-monospace, Consolas, monospace; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.tvh-hud { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font: 800 12px/1 ui-monospace, Consolas, monospace; letter-spacing: .04em; pointer-events: none; }
.tvh-hud > * { padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .1); }
.tvh-hud-nivel { color: #ffd84a; }
.tvh-hud-vidas { color: #ff4d6d; letter-spacing: .12em; min-width: 3.4em; text-align: center; }
.tvh-hud-pem { color: #ff8a2a; }
.tvh-hud-modo { color: #8ff08a; font-weight: 700; }
.tvh-hud-modo.tvh-modo-voce { color: #48d0ff; }