/* Hero: o mundo do jogo ocupa a dobra inteira; texto e placa ficam dentro dele. */
.topo { padding: 14px max(28px, calc((100% - 1560px) / 2)); background: #10261fd9; }
.topo-marca img { width: 38px; height: 38px; object-fit: contain; filter: none; }
.topo-nav { margin-left: 20px; gap: 16px; }
.topo-nav a { font-weight: 500; font-size: .92rem; text-shadow: none; }
.topo .botao { box-shadow: none; border-radius: 4px; }
.idioma { background: transparent; border: 1px solid #647a60; border-radius: 4px; }
.idioma button { min-width: 34px; min-height: 30px; }

.capa {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: max(680px, 100svh); padding: 96px 28px 18px; text-align: left; color: #f6e6bc;
  /* Mesma leitura do céu 3D, para o carregamento e para o fallback. */
  background: linear-gradient(180deg, #1f78a8 0%, #7fb3a8 34%, #ffd08a 58%, #7fb06a 62%, #3f8a4e 76%, #1d5237 100%);
}
.hero-stage { position: absolute; inset: 0; z-index: -2; }
.hero-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.capa[data-scene='ready'] .hero-stage canvas { opacity: 1; }

/* Véu para o texto: escurece a esquerda e a base, deixa a roça limpa. */
.capa::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, #0b2a3399 0%, #0b2a3366 24%, #0b2a331a 44%, transparent 56%);
}
/* Chão: capim e terra em pixel art fecham o hero; a página segue "por dentro do solo". */
.capa::after {
  content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 102px; z-index: -1;
  background: url('/hero/ground-edge.png') repeat-x 0 0 / auto 100%; image-rendering: pixelated; pointer-events: none;
}

.hero-shell {
  flex: 1; width: min(1560px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); gap: 24px; align-items: stretch;
  pointer-events: none;
}
.hero-copy, .hero-console, .hero-preview-note, .hero-footer { pointer-events: auto; }

.hero-copy { align-self: center; padding: 20px 0 40px; }
.hero-wordmark { display: block; width: min(370px, 90%); margin-bottom: 26px; filter: drop-shadow(0 6px 0 #0b1d1766); }
.hero-genre { color: #d6e2c2; font-size: .94rem; margin-bottom: 14px; }
.hero-copy h1 {
  max-width: none; font-size: clamp(44px, 3.95vw, 66px); letter-spacing: -.015em; line-height: 1.06;
  text-wrap: balance; color: #fff0cc; text-shadow: 0 3px 0 #0b1d1780;
}
.hero-description { max-width: 38ch; font-size: clamp(16px, 1.3vw, 19px); margin-top: 22px; color: #e3ead7; line-height: 1.65; text-shadow: 0 1px 2px #0b1d17; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.capa .botao {
  border-radius: 4px; border: 1px solid #ffdc75; background: #ffcb50; color: #31280f;
  box-shadow: 0 4px 0 #ad7630; text-shadow: none; min-height: 52px; padding: 13px 23px; font-size: 1.15rem;
}
.hero-link { color: #fff7e2; text-decoration-color: #fff7e2; text-underline-offset: 5px; font-size: .95rem; font-weight: 600; text-shadow: 0 1px 3px #0b1d17, 0 0 10px #0b1d1799; }
.hero-platform { margin-top: 22px; color: #c2d0b4; font-size: .82rem; }

.hero-world { min-width: 0; display: flex; flex-direction: column; align-items: center; }
/* Janela: o espaço que a câmera usa para enquadrar a roça. */
.hero-window { flex: 1; width: 100%; min-height: 360px; position: relative; }
/* Poster: a mesma cena, parada, enquanto o 3D carrega ou quando não há WebGL. */
.hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }


/* Placa de madeira do placar. */
.hero-console {
  position: relative; width: min(640px, 100%); margin-top: 6px; padding: 16px 22px 13px;
  color: #fff3d6; border: 3px solid var(--borda-madeira); border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, #00000012 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--madeira-clara) 0%, var(--madeira-media) 100%);
  box-shadow: inset 0 3px 0 #c58a52, inset 0 -5px 0 #4a2c17, 0 6px 0 #1a0f0799, 0 22px 40px #0b1d1780;
}
.hero-console::before, .hero-console::after {
  content: ''; position: absolute; top: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: #2a1a0e; box-shadow: inset 1px 1px 0 #6b4024;
}
.hero-console::before { left: 9px; }
.hero-console::after { right: 9px; }
.hero-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero-score { display: flex; align-items: center; gap: 16px; }
.hero-score div { display: flex; flex-direction: column; }
.hero-score small { font-size: .68rem; letter-spacing: .08em; color: #f3dcb4; }
.hero-score output {
  display: inline-block; font-family: var(--pixel); font-size: 2.2rem; line-height: 1.05; min-width: 1ch;
  text-shadow: 0 2px 0 #2a1a0e; transform-origin: 50% 80%;
}
.hero-score output.is-pulsing { animation: hero-pulse .22s ease-out; }
@keyframes hero-pulse { 40% { transform: scale(1.32); } }
.hero-score .score-sum output { color: #b9dcff; }
.hero-score .score-mult output { color: #ffb4a8; }
.hero-score .score-total { padding-left: 18px; border-left: 2px solid #4a2c17; }
.hero-score .score-total output { color: #ffe08a; }
.hero-score > span { color: #f3dcb4; }

.hero-goal { display: flex; align-items: center; gap: 10px; margin-top: 11px; font-size: .68rem; letter-spacing: .06em; color: #f3dcb4; text-transform: uppercase; }
.hero-goal-bar { position: relative; flex: 1; height: 10px; border: 2px solid #2a1a0e; border-radius: 3px; background: #3a2414; overflow: hidden; }
.hero-goal-bar i { position: absolute; inset: 0; background: linear-gradient(180deg, #ffe08a, #ffb52e); transform: scaleX(0); transform-origin: 0 50%; transition: transform .18s linear; }
/* Marca da meta: 280 de 350. */
.hero-goal-bar b { position: absolute; top: 0; bottom: 0; left: 80%; width: 2px; background: #fff3d6; }
.hero-goal-jackcrop { color: #ffe08a; }
.hero-console[data-tier='meta'] .hero-goal-label, .hero-console[data-tier='jackcrop'] .hero-goal-label { color: #ffe08a; }
.hero-console[data-tier='jackcrop'] { animation: hero-jackcrop .5s steps(2) 4; }
@keyframes hero-jackcrop { 50% { box-shadow: inset 0 3px 0 #ffe9a8, inset 0 -5px 0 #4a2c17, 0 0 0 4px #ffcb50, 0 22px 40px #0b1d1780; } }

.hero-status { font-size: .8rem; color: #fff3d6; margin-top: 9px; min-height: 1.5em; }
.hero-preview-note { text-align: center; margin: 12px 0 0; font-size: .76rem; color: #dbe6cc; text-shadow: 0 1px 2px #0b1d17; }
.hero-preview-note a { color: #fff3d6; text-underline-offset: 3px; }
.hero-footer {
  width: min(1560px, 100%); margin: 78px auto 0; padding-top: 0;
  display: flex; justify-content: space-between; font-size: .82rem; color: #f3dcb4; text-shadow: 0 1px 0 #2a1a0e;
}
/* Plaquinhas sobre a terra: legíveis em qualquer ponto da faixa. */
.hero-footer span, .hero-footer a {
  padding: 7px 14px; color: #fff3d6; text-decoration: none; text-shadow: none; font-weight: 600;
  background: #2a1a0e; border: 2px solid #1a0f07; border-radius: 6px; box-shadow: inset 0 2px 0 #4a2c17, 0 3px 0 #1a0f0799;
}
.hero-footer a:hover { background: #4a2c17; }
.hero-fallback-note { display: none; }
.capa[data-scene='fallback'] .hero-fallback-note { display: inline; }
.capa[data-scene='fallback'] .hero-live-note { display: none; }
.capa[data-scene='fallback'] .hero-score { opacity: .5; }

@media (max-width: 1100px) {
  .topo-nav { gap: 0; margin-left: 0; }
  .hero-shell { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .hero-console { padding: 14px 16px 12px; }
  .hero-controls { flex-wrap: wrap; }
  .hero-controls .botao { flex: 1; }
  .hero-wordmark { width: 290px; }
  .hero-copy h1 { font-size: 48px; }
}

@media (max-width: 760px) {
  .topo { padding: 10px 20px; }
  .topo-nav { display: none; }
  .topo-acoes .botao { display: none; }
  .capa { padding: 78px 16px 16px; min-height: max(820px, 100svh); }
  .capa::before {
    background:
      linear-gradient(180deg, #0b2a33b3 0%, #0b2a3380 30%, transparent 46%);
  }
  .hero-shell { display: flex; flex-direction: column; gap: 0; }
  .hero-copy { align-self: stretch; padding: 0; }
  .hero-wordmark { width: 215px; margin-bottom: 14px; }
  .hero-genre { font-size: .78rem; margin-bottom: 8px; }
  .hero-copy h1 { max-width: 13ch; font-size: clamp(36px, 9.6vw, 50px); line-height: 1.02; }
  .hero-description { font-size: .92rem; line-height: 1.5; margin-top: 12px; max-width: 42ch; }
  .hero-actions { gap: 20px; margin-top: 16px; }
  .capa .botao { min-height: 45px; font-size: 1rem; padding: 11px 16px; }
  .hero-link { font-size: .83rem; }
  .hero-platform { display: none; }
  .hero-world { flex: 1; }
  .hero-window { min-height: 270px; width: calc(100% + 24px); }
  .hero-console { margin-top: 0; padding: 12px 14px 10px; }
  .hero-controls { flex-wrap: nowrap; gap: 10px; }
  .hero-score { gap: 9px; }
  .hero-score output { font-size: 1.7rem; }
  .hero-score small { font-size: .58rem; }
  .hero-score .score-total { padding-left: 10px; }
  .hero-controls .botao { flex: none; font-size: .88rem; padding: 10px; }
  .hero-goal { font-size: .58rem; margin-top: 8px; }
  .hero-status { font-size: .7rem; margin-top: 7px; }
  .hero-preview-note { font-size: .65rem; margin-top: 8px; }
  .capa::after { height: 68px; }
  .hero-footer { margin-top: 48px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage canvas { transition: none; }
  .hero-score output.is-pulsing, .hero-console[data-tier='jackcrop'] { animation: none; }
  html { scroll-behavior: auto; }
}

/* Costuras entre seções: a faixa de lançamento nasce da terra em vez de cortar em linha reta. */
.secao-lancamento { position: relative; }
.secao-lancamento::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, #2a1a0e 0%, #2a1a0ecc 30%, #2a1a0e00 100%);
}

/* Interação: a roça aceita arrasto horizontal sem prender a rolagem vertical. */
.hero-stage { touch-action: pan-y; }
.capa[data-cursor='pointer'] { cursor: pointer; }
.capa[data-cursor='grab'] { cursor: grab; }
.capa[data-cursor='grabbing'] { cursor: grabbing; }

/* Números de pontuação voando da casa até a placa. */
.hero-fly {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; white-space: nowrap;
  font-family: var(--pixel); font-size: clamp(22px, 2.2vw, 34px); line-height: 1;
  text-shadow: 2px 2px 0 #1a0f07, -1px -1px 0 #1a0f07, 2px -1px 0 #1a0f07, -1px 2px 0 #1a0f07;
}
.hero-fly-soma { color: #b9dcff; }
.hero-fly-mult { color: #ffb4a8; }

/* Faixa de resultado. */
.hero-world { position: relative; }
.hero-banner {
  position: absolute; left: 50%; top: 34%; z-index: 5; margin: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--titulo); font-size: clamp(34px, 4.6vw, 76px); line-height: 1; color: #ffe08a;
  -webkit-text-stroke: 2px #5a2f0a; paint-order: stroke fill;
  text-shadow: 0 5px 0 #5a2f0a, 0 12px 26px #0b1d17cc;
  transform: translate(-50%, -50%) scale(.4) rotate(-4deg); opacity: 0;
}
.hero-banner.is-showing { animation: hero-banner 2s cubic-bezier(.2, 1.4, .4, 1) both; }
.hero-banner[data-tier='jackcrop'] { font-size: clamp(46px, 6.4vw, 108px); color: #fff0a0; }
.hero-banner[data-tier='jackcrop'].is-showing { animation-duration: 3.2s; }
@keyframes hero-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-4deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(-4deg); }
  22%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1.04) rotate(-4deg); }
}

/* Botão de mudo. */
.hero-mute {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; cursor: pointer;
  color: #fff3d6; background: #4a2c17; border: 2px solid #2a1a0e; border-radius: 6px; box-shadow: inset 0 2px 0 #6b4024;
}
.hero-mute:hover { background: #5a3620; }
.hero-mute:focus-visible, .hero-toys button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.hero-mute:disabled { opacity: .5; cursor: default; }
.hero-mute .hero-mute-off, .hero-mute[aria-pressed='true'] .hero-mute-on { display: none; }
.hero-mute[aria-pressed='true'] .hero-mute-off { display: inline; }

/* Equivalentes de teclado dos cliques na roça: invisíveis até receberem foco. */
.hero-toys { position: absolute; left: 0; top: 0; z-index: 7; display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; pointer-events: none; }
.hero-toys button {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: auto;
  font: inherit; font-size: .8rem; color: #2a1a0e; background: #ffe08a; border: 2px solid #2a1a0e; border-radius: 4px; padding: 6px 10px;
}
.hero-toys button:focus-visible { position: static; width: auto; height: auto; clip-path: none; }

@media (max-width: 760px) {
  .hero-mute { width: 40px; height: 40px; }
  .hero-banner { top: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner.is-showing { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(-4deg); }
}

.capa[data-scene='fallback'] .hero-mute, .capa[data-scene='fallback'] .hero-toys { display: none; }

.capa .botao[aria-disabled='true'] { filter: saturate(.45) brightness(.92); cursor: progress; }

/* X (única rede por enquanto). */
.topo-x { display: grid; place-items: center; width: 38px; height: 38px; color: #fff3d6; border: 1px solid #647a60; border-radius: 4px; }
.topo-x:hover { background: #ffffff1f; }
.rodape-x { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.rodape-x:hover { text-decoration: underline; }
.lancamento-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lancamento-cta .botao { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 760px) { .topo-x { width: 34px; height: 34px; } }

/* Barra de progresso de leitura. */
.progresso { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px; background: linear-gradient(90deg, #ffcb50, #ff8a2a); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Abertura: a meta bate, cai o JACKCROP!, uma moeda toma a tela ---------- */
/* Só existe quando o script do <head> põe a classe "intro" no <html>. */
.abertura { display: none; }
html.intro { overflow: hidden; }
html.intro .abertura {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(70% 60% at 50% 45%, #4a2c17 0%, #2a1a0e 60%, #1a0f07 100%);
}
.abertura-raios {
  position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: 0;
  background: repeating-conic-gradient(from 0deg, #ffcb5026 0deg 7deg, transparent 7deg 20deg);
  animation: abertura-raios 2.4s linear .95s forwards;
}
@keyframes abertura-raios { 0% { opacity: 0; transform: rotate(0); } 15% { opacity: 1; } 100% { opacity: 1; transform: rotate(40deg); } }

.abertura-palco { position: relative; display: grid; justify-items: center; gap: clamp(14px, 3vh, 30px); padding: 0 16px; }

/* Placar chegando na meta. */
.abertura-placar { width: min(440px, 82vw); font-family: var(--pixel); color: #fff3d6; animation: abertura-sai .3s ease-in 1.05s forwards; }
.abertura-placar div { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1; }
.abertura-placar output { color: #ffe08a; }
.abertura-barra { position: relative; height: 16px; margin-top: 10px; border: 3px solid #1a0f07; border-radius: 5px; background: #3a2414; overflow: hidden; }
.abertura-barra i { position: absolute; inset: 0; background: linear-gradient(180deg, #ffe08a, #ffb52e); transform: scaleX(0); transform-origin: 0 50%; }
@keyframes abertura-sai { to { opacity: 0; transform: translateY(-14px) scale(.9); } }

/* Letras caindo uma a uma. */
.abertura-letras { display: flex; font-family: var(--titulo); font-size: clamp(3rem, 15vw, 11rem); line-height: 1; }
.abertura-letras span {
  display: inline-block; opacity: 0; color: #ffcb50;
  background: linear-gradient(180deg, #fff3a8 0%, #ffcb50 48%, #f08a1c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .05em 0 #7a3d0a) drop-shadow(0 .09em 0 #2a1a0e) drop-shadow(0 0 .12em #ffcb5066);
  animation: abertura-letra .42s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(1.1s + var(--i) * 70ms);
}
@keyframes abertura-letra {
  0% { opacity: 0; transform: translateY(-120vh) rotate(-18deg) scale(1.4); }
  60% { opacity: 1; transform: translateY(6%) rotate(3deg) scale(.96, 1.06); }
  100% { opacity: 1; transform: none; }
}
/* O palco inteiro treme quando a última letra bate. */
html.intro .abertura-palco { animation: abertura-tremor .32s steps(6) 1.78s; }
@keyframes abertura-tremor { 20% { transform: translate(-6px, 4px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, -3px); } 80% { transform: translate(4px, 3px); } }

/* Chuva de moedas. */
.abertura-moedas { position: absolute; inset: 0; pointer-events: none; }
.abertura-moedas i, .abertura-moedona {
  position: absolute; border-radius: 50%; border: 3px solid #7a4a0c;
  background: radial-gradient(circle at 35% 30%, #fff3a8 0%, #ffcb50 52%, #c9820e 100%); box-shadow: inset 0 0 0 4px #ffe08a55;
}
.abertura-moedas i {
  top: -8vh; left: var(--x); width: var(--s); height: var(--s); opacity: 0;
  animation: abertura-moeda var(--t) cubic-bezier(.4, 0, .9, .6) forwards; animation-delay: var(--d);
}
@keyframes abertura-moeda { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 1; transform: translateY(120vh) rotate(540deg); } }

/* A moeda que cresce até cobrir tudo. */
.abertura-moedona {
  left: 50%; top: 50%; width: 12vmax; height: 12vmax; margin: -6vmax 0 0 -6vmax; opacity: 0; border-width: .5vmax;
  animation: abertura-moedona .95s cubic-bezier(.5, 0, .2, 1) 2.15s forwards;
}
@keyframes abertura-moedona {
  0% { opacity: 1; transform: translateY(-80vh) scale(.5) rotate(-200deg); }
  38% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  50% { opacity: 1; transform: translateY(0) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(22); }
}
/* Escurece rapidão e some. */
.abertura-escuro { position: absolute; inset: 0; background: #1a0f07; opacity: 0; animation: abertura-escuro .22s ease-in 2.95s forwards; }
@keyframes abertura-escuro { to { opacity: 1; } }
html.intro .abertura.saindo { opacity: 0; transition: opacity .35s ease-out; pointer-events: none; }