/*
 * Tela de início — "capa de revista em quadrinhos, edição #17".
 *
 * Direção: em vez de um menu com texto sobre gradiente, a tela é a CAPA de uma HQ
 * americana — logotipo gigante com relevo, o piloto como arte de capa estourando o
 * quadro (cabeça passando por cima da borda do painel), explosão de raios chapados
 * atrás dele, bandeiras quadriculadas cruzadas, balão de fala, chamada em estouro
 * amarelo e fumaça de pneu sólida com contorno cobrindo a base. Tudo pela bíblia
 * visual (reference/estilo-visual.md): contorno de tinta grosso (traço 1), sombra
 * chapada em corte duro, nunca gradiente suave (traço 2), paleta primária saturada
 * (traço 4), pontilhismo/halftone (traço 5), tipografia de HQ contornada (traço 6),
 * fumaça sólida e speed lines retas (traço 7).
 *
 * Contrato com src/game/main.js (não mudar):
 *   - #tela-inicio.escondida  -> some (aqui: "vira a página" e fica invisível);
 *   - #botao-comecar:disabled -> "carregando carro" (texto trocado pelo main.js);
 *   - #tela-inicio > .controles-jogo -> aviso de falha de carregamento (toast).
 *
 * Performance: tudo que anima em loop usa só transform/opacity (camada própria no
 * compositor). A tela é opaca e isolada (isolation), então nada aqui mistura com o
 * canvas do Three.js por baixo.
 */

:root {
  --capa-amarelo: #ffd400;
  --capa-amarelo-claro: #fff27a;
  --capa-amarelo-escuro: #e0a800;
  --capa-vermelho: #e8291c;
  --capa-vermelho-escuro: #9e1409;
  --capa-vinho: #4a0a06;
  --capa-preto: #0a0a0a;
  --capa-papel: #f4ecd8;
  --capa-fonte-titulo: "Anton", "Arial Black", "Impact", sans-serif;
  --capa-fonte-hq: "Bangers", "Anton", "Arial Black", sans-serif;
  --capa-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --capa-impacto: cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--capa-fonte-titulo);
}
canvas { display: block; }

#jogo-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ================= Raiz da capa ================= */

#tela-inicio {
  /* --px/--py: posição do ponteiro (-1..1), escritas por tela-inicio.js. */
  --px: 0;
  --py: 0;
  position: absolute;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  isolation: isolate;
  background: var(--capa-preto);
  text-transform: uppercase;
  color: var(--capa-papel);
  user-select: none;
}

/* Bug já corrigido antes (mantido): o HUD de corrida existe desde o 1º frame e
   vazaria atrás da capa. Esconde o HUD enquanto a capa estiver visível. */
#tela-inicio:not(.escondida) ~ .nascar-hud {
  visibility: hidden;
}

/* Saída: a capa "vira a página" num corte diagonal revelando a corrida.
   visibility só vira hidden no fim (transition com atraso), então o clique
   não fica preso numa tela invisível e a animação chega a aparecer. */
#tela-inicio.escondida {
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.55s;
  animation: capa-virar-pagina 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes capa-virar-pagina {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: none;
  }
  100% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translateX(-6%) rotate(-2deg);
  }
}

.capa-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Paralaxe: cada camada declara --prof (profundidade). translate é propriedade
   independente de transform, então não briga com as animações de entrada. */
.camada-paralaxe {
  translate: calc(var(--px) * var(--prof, 0) * 14px) calc(var(--py) * var(--prof, 0) * 10px);
}

/* ================= Fundo ================= */

.capa-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 70% at 72% 42%, #6b0d07 0%, #2a0604 55%, var(--capa-preto) 100%);
}

/* Speed lines retas irradiando da cabeça do piloto; giram devagar (só transform). */
.capa-raios {
  position: absolute;
  left: 72%;
  top: 38%;
  width: 260vmax;
  height: 260vmax;
  margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 212, 0, 0.16) 0deg 2.2deg,
    transparent 2.2deg 9deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0 6%, #000 22%);
  mask-image: radial-gradient(circle, transparent 0 6%, #000 22%);
  will-change: transform;
  animation:
    capa-entra-fade 0.8s ease-out both,
    capa-girar 90s linear infinite;
}

/* Pontilhismo de impressão (Ben-Day), mais forte nas bordas, como gibi antigo. */
.capa-pontilhado {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--capa-vermelho) 30%, transparent 33%);
  background-size: 14px 14px;
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 45%, transparent 35%, #000 95%);
  mask-image: radial-gradient(ellipse 70% 70% at 60% 45%, transparent 35%, #000 95%);
}

/* Grão de papel por cima de tudo: ruído estático (SVG turbulence), sem blend-mode. */
.capa-granulado {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 1.6 -0.45'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* ================= Bandeiras quadriculadas cruzadas ================= */

.capa-bandeiras {
  --prof: 0.35;
  position: absolute;
  z-index: 2;
  right: 1vw;
  top: 2vh;
  width: min(40vw, 62vh);
  height: auto;
  overflow: visible;
  filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.55));
  animation: capa-entra-cima 0.7s var(--capa-impacto) 0.35s both;
}

.capa-bandeira {
  transform-box: view-box;
  animation: capa-balancar 3.2s ease-in-out infinite alternate;
}
.capa-bandeira-esq { transform-origin: 120px 350px; }
.capa-bandeira-dir { transform-origin: 400px 350px; animation-delay: -1.6s; }

@keyframes capa-balancar {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}

/* ================= Logotipo (masthead) ================= */

.capa-cabecalho {
  --prof: -0.45;
  position: absolute;
  z-index: 3;
  left: 4vw;
  top: 4vh;
  width: 52vw;
}

.capa-selo {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 0 10px;
  padding: 6px 14px 6px 12px;
  background: var(--capa-papel);
  color: var(--capa-preto);
  border: 4px solid var(--capa-preto);
  box-shadow: 5px 5px 0 var(--capa-vermelho);
  transform: rotate(-3deg);
  font-size: clamp(0.7rem, 1.1vw, 1rem);
  line-height: 1;
  animation: capa-entra-carimbo 0.45s var(--capa-mola) 0.15s both;
}
.capa-selo-n { font-size: 1.3em; }
.capa-selo-num {
  font-size: 2.6em;
  color: var(--capa-vermelho);
  -webkit-text-stroke: 1.5px var(--capa-preto);
}
.capa-selo-texto {
  font-size: 0.95em;
  line-height: 1.05;
  letter-spacing: 0.06em;
  padding-left: 10px;
  border-left: 3px solid var(--capa-preto);
}

.capa-titulo {
  position: relative;
  margin: 0.5vh 0 0;
  font-weight: 400;
  line-height: 0.86;
  transform: rotate(-4deg) skewX(-8deg);
  transform-origin: 0 100%;
}

/* Cada palavra do logotipo tem 3 camadas: ::before = bloco de relevo (extrusão
   preta + sombra chapada vermelha), a letra em si = preenchimento em dois tons
   com corte duro + contorno, ::after = brilho que varre a letra de tempos em tempos.
   (text-shadow não pode ficar na mesma camada do preenchimento com
   background-clip:text — ele pintaria POR CIMA do preenchimento.) */
.capa-titulo-daytona,
.capa-titulo-numero {
  position: relative;
  display: block;
  isolation: isolate;
  width: max-content;
}

.capa-titulo-daytona {
  font-size: clamp(3.6rem, min(15vw, 26vh), 15rem);
  letter-spacing: 0.01em;
  color: transparent;
  animation: capa-entra-titulo 0.7s var(--capa-impacto) 0.25s both;
}

.capa-titulo-daytona::before,
.capa-titulo-numero::before {
  content: attr(data-texto);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--capa-preto);
  -webkit-text-stroke: 10px var(--capa-preto);
  text-shadow:
    1px 1px 0 var(--capa-preto), 2px 2px 0 var(--capa-preto),
    3px 3px 0 var(--capa-preto), 4px 4px 0 var(--capa-preto),
    5px 5px 0 var(--capa-preto), 6px 6px 0 var(--capa-preto),
    7px 7px 0 var(--capa-preto), 8px 8px 0 var(--capa-preto),
    9px 9px 0 var(--capa-preto), 10px 10px 0 var(--capa-preto),
    16px 16px 0 var(--capa-vermelho);
}

.capa-titulo-daytona::after,
.capa-titulo-numero::after {
  content: attr(data-texto);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
}

/* Frente do DAYTONA: faixa de brilho (1ª camada, anima) sobre o amarelo em três
   tons de corte duro (2ª camada). */
.capa-titulo-daytona::after {
  background-image:
    linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.95) 46% 50%, transparent 56% 100%),
    linear-gradient(180deg, var(--capa-amarelo-claro) 0 44%, var(--capa-amarelo) 44% 78%, var(--capa-amarelo-escuro) 78% 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  -webkit-text-stroke: 3px var(--capa-preto);
  animation: capa-brilho 6s ease-in-out 1.4s infinite;
}

@keyframes capa-brilho {
  0% { background-position: 120% 0, 0 0; }
  18%, 100% { background-position: -20% 0, 0 0; }
}

/* "#17" no estilo do número de porta do carro: vermelho em dois tons, filete
   branco (papel) e contorno preto por fora. */
.capa-titulo-numero {
  margin: -1vh 0 0 18%;
  font-size: clamp(3rem, min(11vw, 19vh), 11rem);
  color: transparent;
  animation: capa-entra-carimbo 0.5s var(--capa-mola) 0.6s both;
}
.capa-titulo-numero::after {
  background-image: linear-gradient(180deg, #ff4a3a 0 48%, var(--capa-vermelho) 48% 80%, var(--capa-vermelho-escuro) 80% 100%);
  -webkit-text-stroke: 3px var(--capa-papel);
}
.capa-titulo-numero::before {
  -webkit-text-stroke: 12px var(--capa-preto);
  text-shadow:
    1px 1px 0 var(--capa-preto), 2px 2px 0 var(--capa-preto),
    3px 3px 0 var(--capa-preto), 4px 4px 0 var(--capa-preto),
    5px 5px 0 var(--capa-preto), 6px 6px 0 var(--capa-preto),
    7px 7px 0 var(--capa-preto), 8px 8px 0 var(--capa-preto),
    14px 14px 0 var(--capa-amarelo);
}

/* Caixa de legenda amarela de HQ. */
.capa-subtitulo {
  display: inline-block;
  margin: 2.2vh 0 0 3vw;
  padding: 6px 18px 4px;
  font-family: var(--capa-fonte-hq);
  font-size: clamp(1.2rem, min(2.6vw, 4.4vh), 2.6rem);
  letter-spacing: 0.06em;
  color: var(--capa-preto);
  background: var(--capa-amarelo);
  border: 4px solid var(--capa-preto);
  box-shadow: 6px 6px 0 var(--capa-preto);
  transform: rotate(2deg);
  animation: capa-entra-esquerda 0.5s var(--capa-mola) 0.85s both;
}

/* ================= Painel da arte de capa ================= */

/* Quadro de HQ inclinado atrás do piloto: borda grossa + filete de papel +
   sombra chapada. O piloto é maior que o quadro e "estoura" a borda de cima. */
.capa-painel {
  --prof: 0.5;
  position: absolute;
  z-index: 4;
  right: 4vw;
  top: 30vh;
  bottom: -2vh;
  width: 44vw;
  transform: skewX(-7deg);
  border: 6px solid var(--capa-preto);
  box-shadow:
    inset 0 0 0 5px var(--capa-papel),
    inset 0 0 0 9px var(--capa-preto),
    14px 14px 0 rgba(0, 0, 0, 0.7);
  overflow: hidden;
  background: var(--capa-vermelho-escuro);
  animation: capa-entra-painel 0.6s var(--capa-impacto) 0.1s both;
}

/* Explosão de raios chapados (sunburst de capa) + pontilhado que escurece a base. */
.capa-painel-miolo {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 50% 40%, var(--capa-amarelo) 0 7%, var(--capa-preto) 7.2% 8%, transparent 8.2%),
    repeating-conic-gradient(from 0deg at 50% 40%, var(--capa-vermelho) 0deg 7deg, var(--capa-vermelho-escuro) 7deg 14deg);
  will-change: transform;
  animation: capa-girar 60s linear infinite reverse;
}
.capa-painel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(10, 10, 10, 0.55) 32%, transparent 35%);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 90%);
  mask-image: linear-gradient(180deg, transparent 20%, #000 90%);
}

/* ================= Piloto ================= */

.capa-piloto {
  --prof: 1;
  position: absolute;
  z-index: 5;
  right: 5vw;
  bottom: 0;
  margin: 0;
  height: min(92vh, 60vw);
  aspect-ratio: 640 / 611;
  pointer-events: none;
}

.capa-piloto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  /* Sombra chapada dura do recorte (o contorno de tinta já vem no arquivo,
     ver scripts/gerar-arte-piloto.py). */
  filter: drop-shadow(14px 6px 0 rgba(10, 10, 10, 0.75));
  transform-origin: 50% 100%;
  animation: capa-entra-piloto 0.8s var(--capa-impacto) 0.2s both;
}

/* Legenda com o nome do piloto: caixa de papel sobre a fumaça. */
.capa-legenda {
  position: absolute;
  z-index: 2;
  left: 8%;
  bottom: 6vh;
  display: flex;
  flex-direction: column;
  padding: 8px 18px 6px;
  background: var(--capa-papel);
  color: var(--capa-preto);
  border: 4px solid var(--capa-preto);
  box-shadow: 7px 7px 0 var(--capa-vermelho);
  transform: rotate(-3deg);
  line-height: 1;
  animation: capa-entra-carimbo 0.45s var(--capa-mola) 1.05s both;
}
.capa-legenda-nome {
  font-size: clamp(1.1rem, min(2.4vw, 4vh), 2.4rem);
  letter-spacing: 0.02em;
}
.capa-legenda-extra {
  margin-top: 4px;
  font-family: var(--capa-fonte-hq);
  font-size: clamp(0.7rem, min(1.1vw, 1.9vh), 1.05rem);
  letter-spacing: 0.08em;
  color: var(--capa-vermelho-escuro);
}

/* ================= Balão de fala ================= */

.capa-balao {
  --prof: 0.8;
  position: absolute;
  z-index: 6;
  right: 1.5vw;
  top: 30vh;
  max-width: 15vw;
  padding: 14px 18px 12px;
  font-family: var(--capa-fonte-hq);
  font-size: clamp(0.95rem, min(1.7vw, 3vh), 1.8rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--capa-preto);
  background: #fffdf6;
  border: 4px solid var(--capa-preto);
  border-radius: 50% / 46%;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
  animation: capa-entra-balao 0.45s var(--capa-mola) 1.25s both;
}
/* Rabicho do balão apontando pra boca do piloto (duas camadas: contorno + miolo). */
.capa-balao::before,
.capa-balao::after {
  content: "";
  position: absolute;
  left: 4%;
  bottom: -14px;
  width: 0;
  height: 0;
  border-style: solid;
}
.capa-balao::before {
  border-width: 16px 34px 0 0;
  border-color: var(--capa-preto) transparent transparent transparent;
  transform: rotate(22deg);
  bottom: -18px;
  left: 2%;
}
.capa-balao::after {
  border-width: 11px 24px 0 0;
  border-color: #fffdf6 transparent transparent transparent;
  transform: rotate(22deg);
  bottom: -9px;
  left: 6%;
}

/* ================= Chamada em estouro amarelo ================= */

.capa-chamada,
.capa-estouro {
  position: absolute;
  z-index: 6;
  clip-path: polygon(50.0% 4.4%, 58.8% 17.2%, 76.6% 4.0%, 74.0% 26.0%, 96.6% 23.1%, 82.8% 41.2%, 96.5% 50.0%, 82.8% 58.8%, 95.1% 76.0%, 74.0% 74.0%, 75.3% 93.8%, 58.8% 82.8%, 50.0% 104.6%, 41.2% 82.8%, 26.4% 90.8%, 26.0% 74.0%, 6.4% 75.2%, 17.2% 58.8%, -3.8% 50.0%, 17.2% 41.2%, 5.5% 24.3%, 26.0% 26.0%, 26.0% 8.4%, 41.2% 17.2%);
}

.capa-chamada {
  --prof: 0.9;
  left: 44vw;
  top: 46vh;
  width: clamp(120px, min(15vw, 26vh), 230px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--capa-preto);
  animation: capa-entra-carimbo 0.5s var(--capa-mola) 1.1s both;
}
.capa-chamada > span {
  position: absolute;
  inset: 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  clip-path: inherit;
  background: var(--capa-amarelo);
  font-family: var(--capa-fonte-hq);
  font-size: clamp(0.9rem, min(1.6vw, 2.8vh), 1.6rem);
  line-height: 1;
  color: var(--capa-preto);
  transform: rotate(-8deg);
}
.capa-chamada b {
  font-weight: 400;
  color: var(--capa-vermelho);
  font-size: 1.25em;
}

/* Estouro vermelho menor atrás do ombro — só cor, dá profundidade à cena. */
.capa-estouro {
  --prof: 0.6;
  z-index: 4;
  right: 36vw;
  top: 24vh;
  width: clamp(80px, 11vw, 170px);
  aspect-ratio: 1;
  background: var(--capa-amarelo);
  opacity: 0.9;
  animation: capa-entra-carimbo 0.5s var(--capa-mola) 0.7s both;
}
.capa-estouro > span {
  position: absolute;
  inset: 14%;
  clip-path: inherit;
  background: var(--capa-vermelho);
}

/* ================= Fumaça de pneu ================= */

.capa-fumaca {
  position: absolute;
  z-index: 7;
  left: -8vw;
  right: -8vw;
  bottom: -4vh;
  height: 26vh;
  pointer-events: none;
}
.capa-nuvem {
  position: absolute;
  bottom: 0;
  width: 34vw;
  height: 17vw;
  overflow: visible;
  will-change: transform;
  animation: capa-fumegar 5s ease-in-out infinite alternate;
}
.capa-nuvem-1 { left: 44%; width: 30vw; bottom: 2vh; animation-duration: 4.2s; }
.capa-nuvem-2 { left: 62%; width: 36vw; bottom: -5vh; animation-delay: -1.3s; }
.capa-nuvem-3 { left: 82%; width: 28vw; bottom: 1vh; animation-duration: 5.6s; animation-delay: -2.2s; }
.capa-nuvem-4 { left: 28%; width: 26vw; bottom: -7vh; animation-duration: 6s; animation-delay: -0.6s; }
.capa-nuvem-5 { left: -2%; width: 32vw; bottom: -9vh; animation-duration: 4.8s; animation-delay: -3s; }

@keyframes capa-fumegar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2.5vw, -1.2vh, 0) scale(1.06); }
}

/* ================= Ação: botão + controles ================= */

.capa-acao {
  position: absolute;
  z-index: 10;
  left: 4vw;
  bottom: 5vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6vh;
  max-width: 40vw;
  animation: capa-entra-baixo 0.55s var(--capa-mola) 0.95s both;
}

.capa-botao {
  position: relative;
}

/* Anel pulsando atrás do botão pronto — chama o olho sem animar box-shadow. */
.capa-botao::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 4px solid var(--capa-amarelo);
  transform: skewX(-10deg);
  opacity: 0;
  pointer-events: none;
  animation: capa-pulso 1.8s ease-out 2s infinite;
}
.capa-botao:has(#botao-comecar:disabled)::before {
  animation: none;
}

@keyframes capa-pulso {
  0% { opacity: 0.8; transform: skewX(-10deg) scale(1); }
  100% { opacity: 0; transform: skewX(-10deg) scale(1.18, 1.45); }
}

#botao-comecar {
  position: relative;
  overflow: hidden;
  font-family: var(--capa-fonte-titulo);
  text-transform: uppercase;
  font-size: clamp(1.4rem, min(2.8vw, 5vh), 2.6rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--capa-preto);
  background: linear-gradient(180deg, var(--capa-amarelo-claro) 0 42%, var(--capa-amarelo) 42% 100%);
  border: 5px solid var(--capa-preto);
  border-radius: 0;
  /* espaço à esquerda pra faixa quadriculada (::before) */
  padding: 0.5em 1.1em 0.45em 2.3em;
  cursor: pointer;
  transform: skewX(-10deg);
  box-shadow:
    7px 7px 0 var(--capa-preto),
    12px 12px 0 var(--capa-vermelho);
  transition:
    transform 0.25s var(--capa-mola),
    box-shadow 0.25s var(--capa-mola),
    background 0.2s ease,
    color 0.2s ease;
}

/* Faixa quadriculada na ponta do botão (bandeira de largada). */
#botao-comecar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.4em;
  border-right: 4px solid var(--capa-preto);
  background-image: repeating-conic-gradient(var(--capa-preto) 0% 25%, var(--capa-papel) 0% 50%);
  background-size: 0.7em 0.7em;
}

/* Brilho metálico que atravessa o botão no hover (só transform). */
#botao-comecar::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: translateX(-150%) skewX(-18deg);
  pointer-events: none;
}

#botao-comecar:hover:not(:disabled),
#botao-comecar:focus-visible:not(:disabled) {
  transform: skewX(-10deg) translate(-3px, -3px) scale(1.03);
  box-shadow:
    10px 10px 0 var(--capa-preto),
    16px 16px 0 var(--capa-vermelho);
}
#botao-comecar:hover:not(:disabled)::after {
  transition: transform 0.6s ease;
  transform: translateX(450%) skewX(-18deg);
}
#botao-comecar:focus-visible {
  outline: 4px solid var(--capa-papel);
  outline-offset: 6px;
}
#botao-comecar:active:not(:disabled) {
  transform: skewX(-10deg) translate(6px, 6px);
  box-shadow:
    1px 1px 0 var(--capa-preto),
    4px 4px 0 var(--capa-vermelho);
  transition-duration: 0.06s;
}

/* Carregando (main.js desabilita e troca o texto enquanto o carro 3D baixa):
   botão "afundado" no papel, apagado, com faixa zebrada de obra correndo na base —
   lê como "espera", não como botão quebrado. Quando habilita, a transição com
   mola faz ele "saltar" pra fora da página. */
#botao-comecar:disabled {
  cursor: progress;
  color: var(--capa-amarelo);
  background: #2b2622;
  transform: skewX(-10deg) translate(6px, 6px);
  box-shadow:
    1px 1px 0 var(--capa-preto),
    3px 3px 0 #5a1a12;
}
#botao-comecar:disabled::before {
  opacity: 0.35;
}
#botao-comecar:disabled::after {
  top: auto;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 7px;
  background: repeating-linear-gradient(-45deg, var(--capa-amarelo) 0 10px, var(--capa-preto) 10px 20px);
  transform: none;
  animation: capa-zebra 0.8s linear infinite;
}

@keyframes capa-zebra {
  from { transform: translateX(0); }
  to { transform: translateX(-28.28px); }
}

/* Controles como teclas de verdade (keycaps chapados de HQ). */
.capa-controles {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 22px;
  background: rgba(10, 10, 10, 0.82);
  border: 3px solid var(--capa-preto);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
  font-size: clamp(0.72rem, min(1.05vw, 1.9vh), 1rem);
  letter-spacing: 0.05em;
  color: var(--capa-papel);
}
.capa-controles li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.capa-teclas {
  display: inline-flex;
  gap: 3px;
}
.capa-controles kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 4px;
  box-sizing: border-box;
  font-family: var(--capa-fonte-titulo);
  font-size: 0.95em;
  color: var(--capa-preto);
  background: linear-gradient(180deg, var(--capa-papel) 0 55%, #cfc6b0 55% 100%);
  border: 2px solid var(--capa-preto);
  border-radius: 4px;
  box-shadow: 0 3px 0 var(--capa-preto);
}
.capa-controles .capa-tecla-larga { min-width: 4.4em; }

.capa-rodape {
  margin: 0;
  font-family: var(--capa-fonte-hq);
  font-size: clamp(0.8rem, min(1.2vw, 2.1vh), 1.15rem);
  letter-spacing: 0.08em;
  color: var(--capa-amarelo);
  text-shadow: 2px 2px 0 var(--capa-preto);
}

/* Aviso de falha de carregamento (main.js anexa um div.controles-jogo aqui). */
#tela-inicio > .controles-jogo {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 4vh;
  max-width: min(90vw, 560px);
  padding: 12px 18px;
  transform: translateX(-50%) rotate(-1deg);
  background: var(--capa-vermelho);
  color: var(--capa-papel);
  border: 4px solid var(--capa-preto);
  box-shadow: 6px 6px 0 var(--capa-preto);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  text-align: center;
}

/* ================= Coreografia de entrada ================= */

@keyframes capa-girar {
  to { transform: rotate(360deg); }
}
@keyframes capa-entra-fade {
  from { opacity: 0; }
}
@keyframes capa-entra-titulo {
  0% { opacity: 0; transform: scale(1.9) rotate(4deg); }
  60% { opacity: 1; transform: scale(0.94) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes capa-entra-carimbo {
  0% { opacity: 0; scale: 2.2; }
  100% { opacity: 1; scale: 1; }
}
@keyframes capa-entra-painel {
  from { opacity: 0; transform: skewX(-7deg) translateX(30vw); }
  to { opacity: 1; transform: skewX(-7deg); }
}
@keyframes capa-entra-piloto {
  0% { opacity: 0; transform: translateY(30%) scale(0.92); }
  100% { opacity: 1; transform: none; }
}
@keyframes capa-entra-cima {
  from { opacity: 0; transform: translateY(-30vh) rotate(-8deg); }
}
@keyframes capa-entra-esquerda {
  from { opacity: 0; transform: translateX(-30vw) rotate(2deg); }
}
@keyframes capa-entra-baixo {
  from { opacity: 0; transform: translateY(20vh); }
}
@keyframes capa-entra-balao {
  0% { opacity: 0; transform: scale(0.2) rotate(-12deg); transform-origin: 0 100%; }
  100% { opacity: 1; transform: none; }
}

/* ================= Telas pequenas ================= */

/* Retrato (celular em pé): logotipo em cima, piloto no meio, botão sobre a fumaça. */
@media (max-aspect-ratio: 1/1) {
  .capa-cabecalho { left: 5vw; right: 5vw; width: auto; top: 3vh; }
  .capa-titulo-daytona { font-size: clamp(3rem, 22vw, 9rem); }
  .capa-titulo-numero { font-size: clamp(2.4rem, 16vw, 7rem); margin-left: 30%; margin-top: 1vh; }
  .capa-subtitulo { margin-top: 1vh; }
  .capa-painel { left: 6vw; right: 6vw; width: auto; top: 38vh; }
  .capa-piloto { right: 50%; translate: 50% 0; height: auto; width: min(100vw, 70vh); bottom: 14vh; }
  .capa-balao, .capa-estouro, .capa-bandeiras { display: none; }
  .capa-chamada { left: auto; right: 4vw; top: 30vh; width: 24vw; }
  .capa-legenda { display: none; }
  .capa-acao { left: 5vw; right: 5vw; max-width: none; align-items: center; bottom: 4vh; }
  .capa-controles { display: none; }
}

/* Viewport curto (janela baixa / celular deitado): tudo menor, só o essencial. */
@media (max-height: 420px) {
  .capa-cabecalho { top: 2vh; }
  .capa-selo { display: none; }
  .capa-titulo-daytona { font-size: clamp(2.2rem, 24vh, 8rem); -webkit-text-stroke-width: 2px; }
  .capa-titulo-numero { font-size: clamp(1.8rem, 17vh, 6rem); }
  .capa-titulo-daytona::before,
  .capa-titulo-numero::before { -webkit-text-stroke-width: 6px; }
  .capa-subtitulo { margin-top: 1vh; padding: 2px 10px; border-width: 3px; }
  .capa-balao, .capa-legenda, .capa-estouro { display: none; }
  .capa-chamada { top: 40vh; }
  .capa-acao { bottom: 3vh; gap: 6px; }
  #botao-comecar { border-width: 3px; }
  .capa-controles { padding: 5px 8px; gap: 3px 12px; }
  .capa-rodape { display: none; }
}

/* Movimento reduzido: sem loops nem paralaxe; a capa aparece pronta. */
@media (prefers-reduced-motion: reduce) {
  #tela-inicio *,
  #tela-inicio *::before,
  #tela-inicio *::after {
    animation: none !important;
  }
  .camada-paralaxe { translate: none; }
  #tela-inicio.escondida { animation: none; transition: none; }
}