/*
 * HUD de corrida — NASCAR Daytona #17
 * Linguagem visual de HQ: contorno preto grosso, sombra chapada (sem gradiente),
 * paleta saturada (amarelo/branco sobre preto), tipografia bold estilo quadrinho.
 * Referência: reference/estilo-visual.md
 */

@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

:root {
  --hud-amarelo: #ffd400;
  --hud-branco: #ffffff;
  --hud-preto: #0a0a0a;
  --hud-vermelho: #e8291c;
  --hud-fonte: "Anton", "Arial Black", "Impact", "Franklin Gothic Bold", sans-serif;
  --hud-contorno: 2px;
}

/* Raiz do overlay: cobre o canvas do jogo inteiro, mas não intercepta clique/toque —
   quem precisa de interação (ex.: pausa) fica fora deste container. */
.nascar-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--hud-fonte);
  text-transform: uppercase;
  user-select: none;
  overflow: hidden;
  z-index: 100;
}

/* Contorno de tinta grosso e constante em texto — várias camadas de text-shadow
   garantem o traço em qualquer navegador; -webkit-text-stroke reforça onde suportado. */
.hud-texto-contornado {
  -webkit-text-stroke: var(--hud-contorno) var(--hud-preto);
  text-stroke: var(--hud-contorno) var(--hud-preto);
  text-shadow:
    2px 2px 0 var(--hud-preto),
    -2px -2px 0 var(--hud-preto),
    2px -2px 0 var(--hud-preto),
    -2px 2px 0 var(--hud-preto),
    0 3px 0 var(--hud-preto),
    3px 0 0 var(--hud-preto),
    0 -3px 0 var(--hud-preto),
    -3px 0 0 var(--hud-preto);
  letter-spacing: 0.03em;
}

/* Caixa de legenda de HQ: fundo semitransparente, borda preta grossa, leve rotação
   pra fugir do "flat design" moderno. */
.hud-caixa {
  background: rgba(10, 10, 10, 0.55);
  border: 3px solid var(--hud-preto);
  border-radius: 4px;
  padding: 6px 14px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}

/* ---------- Posição na corrida ---------- */

.hud-posicao {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  transform: rotate(-2deg);
}

.hud-posicao-valor {
  color: var(--hud-amarelo);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
}

.hud-posicao-total {
  color: var(--hud-branco);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1;
}

/* ---------- Volta atual ---------- */

.hud-volta {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) rotate(1deg);
  color: var(--hud-branco);
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  white-space: nowrap;
}

.hud-volta-numero {
  color: var(--hud-amarelo);
}

/* ---------- Velocímetro ---------- */

.hud-velocimetro {
  position: absolute;
  bottom: 22px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(2deg);
}

.hud-velocidade-valor {
  color: var(--hud-branco);
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 1;
}

.hud-velocidade-unidade {
  color: var(--hud-amarelo);
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  line-height: 1;
  margin-top: -4px;
}

/* ---------- Linhas de velocidade (durante a corrida) ---------- */
/* Mesma técnica das speed lines da tela final (repeating-conic-gradient,
   listras retas de HQ, nunca motion blur fotográfico), só que ativas o tempo
   todo e moduladas pela fração de velocidade atual via variável CSS. Fica
   atrás dos textos do HUD (é o primeiro filho da raiz) e some no centro da
   tela via mask radial, pra não atrapalhar a leitura da ação/HUD. */
.hud-linhas-velocidade {
  position: absolute;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.6) 0deg calc(0.4deg + var(--velocidade-intensidade, 0) * 0.4deg),
    transparent calc(0.4deg + var(--velocidade-intensidade, 0) * 0.4deg)
      calc(9deg - var(--velocidade-intensidade, 0) * 3deg)
  );
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 36%,
    black 68%,
    black 100%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 36%,
    black 68%,
    black 100%
  );
  opacity: calc(var(--velocidade-intensidade, 0) * 0.85);
}

/* ---------- Tela de corrida finalizada (splash page de HQ) ---------- */
/* Tratamento de página de impacto: fundo com halftone + speed lines,
   bandeiras quadriculadas em X como elemento gráfico grande e diagonal,
   título gigante em contorno grosso e "explosão" atrás do P final —
   nada de tela genérica de resultado de jogo. */

.hud-finalizada {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(24, 10, 10, 0.86) 0%,
    rgba(6, 6, 9, 0.95) 72%
  );
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  overflow: hidden;
}

.hud-finalizada.hud-visivel {
  opacity: 1;
  visibility: visible;
}

/* Textura halftone (pontilhismo) cobrindo a página inteira, como a
   arquibancada da referência — nunca gradiente suave/foto. */
.hud-finalizada::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background-image: radial-gradient(var(--hud-branco) 34%, transparent 36%);
  background-size: 20px 20px;
  opacity: 0.09;
  pointer-events: none;
}

/* Speed lines retas irradiando de um ponto acima do título — sugerem
   velocidade/impacto sem motion blur fotográfico. */
.hud-finalizada::after {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  background-image: repeating-conic-gradient(
    from 0deg at 50% 20%,
    rgba(255, 255, 255, 0.14) 0deg 1.6deg,
    transparent 1.6deg 11deg
  );
  pointer-events: none;
}

/* Par de bandeiras quadriculadas cruzadas em X, grandes e diagonais —
   elemento gráfico de HQ, não um discreto gradiente de resultado. */
.hud-bandeiras {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hud-bandeira {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(92vw, 620px);
  height: 78px;
  background-image: repeating-conic-gradient(
    var(--hud-preto) 0% 25%,
    var(--hud-branco) 0% 50%
  );
  background-size: 26px 26px;
  border: 4px solid var(--hud-preto);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
}

.hud-bandeira-a {
  transform: translate(-50%, -50%) rotate(-16deg);
}

.hud-bandeira-b {
  transform: translate(-50%, -50%) rotate(16deg);
}

.hud-finalizada-titulo {
  --hud-contorno: 3px;
  position: relative;
  z-index: 2;
  color: var(--hud-branco);
  font-size: clamp(3rem, 9vw, 5.6rem);
  transform: rotate(-3deg);
  text-shadow:
    3px 3px 0 var(--hud-preto),
    -3px -3px 0 var(--hud-preto),
    3px -3px 0 var(--hud-preto),
    -3px 3px 0 var(--hud-preto),
    0 4px 0 var(--hud-preto),
    4px 0 0 var(--hud-preto),
    0 -4px 0 var(--hud-preto),
    -4px 0 0 var(--hud-preto),
    9px 9px 0 var(--hud-vermelho);
}

/* Explosão atrás do "P1": duas formas quadradas sobrepostas e giradas,
   sombra chapada e contorno grosso — recurso clássico de splash page. */
.hud-finalizada-posicao-burst {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(170px, 32vw, 270px);
  height: clamp(170px, 32vw, 270px);
  margin-top: 6px;
}

.hud-finalizada-posicao-burst::before,
.hud-finalizada-posicao-burst::after {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: -1;
  background: var(--hud-vermelho);
  border: 5px solid var(--hud-preto);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

.hud-finalizada-posicao-burst::before {
  transform: rotate(6deg);
}

.hud-finalizada-posicao-burst::after {
  transform: rotate(-9deg);
}

.hud-finalizada-posicao {
  --hud-contorno: 3px;
  color: var(--hud-amarelo);
  font-size: clamp(3.4rem, 10vw, 5.8rem);
  transform: rotate(1deg);
}

/* Piloto na vitória — o recorte com contorno de tinta embutido (mesma arte da capa
   da tela de início), subindo do canto inferior esquerdo e sobrepondo as bandeiras,
   com sombra chapada dura. Fora do fluxo (absolute): antes, empilhado embaixo do P1,
   empurrava a coluna além da altura em janela baixa. Só aparece com P1 (showFinish). */
.hud-finalizada-foto {
  position: absolute;
  z-index: 3;
  left: 1vw;
  bottom: 0;
  display: none;
  height: min(58%, 520px);
  aspect-ratio: 640 / 611;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(10px 4px 0 rgba(10, 10, 10, 0.7));
}

.hud-finalizada-foto.hud-visivel {
  display: block;
}

/* ---------- Entrada da tela final (só roda ao aparecer, nunca durante a corrida) ----------
   Coreografia de impacto de HQ: bandeiras cruzam de fora, o título "carimba" com
   overshoot, a explosão do P estoura e o piloto sobe. Só scale/translate/opacity
   (propriedades individuais, para não brigar com os transform de rotação já usados). */
.hud-finalizada.hud-visivel .hud-bandeira-a {
  animation: hud-entra-bandeira-a 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}
.hud-finalizada.hud-visivel .hud-bandeira-b {
  animation: hud-entra-bandeira-b 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) 0.06s both;
}
.hud-finalizada.hud-visivel .hud-finalizada-titulo {
  animation: hud-entra-carimbo 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.hud-finalizada.hud-visivel .hud-finalizada-posicao-burst {
  animation: hud-entra-carimbo 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
}
.hud-finalizada.hud-visivel .hud-finalizada-foto.hud-visivel {
  animation: hud-entra-piloto 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) 0.6s both;
}

@keyframes hud-entra-bandeira-a {
  from { opacity: 0; translate: -70vw 0; }
}
@keyframes hud-entra-bandeira-b {
  from { opacity: 0; translate: 70vw 0; }
}
@keyframes hud-entra-carimbo {
  from { opacity: 0; scale: 2.4; }
}
@keyframes hud-entra-piloto {
  from { opacity: 0; translate: 0 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-finalizada.hud-visivel * {
    animation: none !important;
  }
}