/* =============================================================================
   Vale Tóxico — página do jogo, com a cara DO JOGO (não do estúdio)
   Referência: site do Stardew Valley. Céu, vale em camadas (parallax), placas de
   madeira com papel, fonte pixel nos títulos. A "toxicidade" entra no verde
   ácido do logo, na fumaça da fábrica e na gosma.
   ============================================================================= */
:root{
  --sky-1: #5fb7f0; --sky-2: #a9dcff;
  --grass: #4f8f2f; --grass-d: #3b6e22; --dirt: #7a4f2a;
  --wood-d: #3a2212; --wood: #8b5a2b; --wood-l: #c98c4b; --wood-h: #e7b27a;
  --paper: #f7e2b5; --paper-d: #e9c98e; --ink: #4a2a12; --ink-2: #7a4c26;
  --tox: #a6ff3a; --tox-d: #2f6d0c; --slime: #7ee03a;
  --pix: "Pixelify Sans", "Silkscreen", monospace;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0; color: var(--ink); font: 600 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 4px, transparent 4px 12px),
    var(--grass);
}
img{ display: block; max-width: 100%; height: auto; }
.px{ image-rendering: pixelated; image-rendering: crisp-edges; }
a{ color: inherit; }
.wrap{ width: min(1180px, 100% - 40px); margin-inline: auto; }
.skip{ position: absolute; left: -999px; }
.skip:focus{ left: 12px; top: 12px; z-index: 99; background: var(--tox); color: #000; padding: 8px 12px; }

/* barra fina do estúdio (como os sites de jogo da Rockstar) */
.studio-bar{ background: #050505; color: #ddd; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; position: relative; z-index: 5; }
.studio-bar .wrap{ display: flex; align-items: center; gap: 24px; height: 40px; }
.studio-bar a{ text-decoration: none; color: #bbb; }
.studio-bar a:hover{ color: #fff; }
.studio-bar .home{ color: #fff; display: flex; align-items: center; gap: 8px; }
.studio-bar .home svg{ width: 18px; height: 18px; color: #fff; }
.studio-bar .sp{ margin-left: auto; display: flex; gap: 20px; }
@media (max-width: 640px){ .studio-bar .sp a:not(:last-child){ display: none; } }

/* ---------- madeira + papel (o componente-base) ---------- */
.board{
  position: relative; background: var(--paper); color: var(--ink);
  border: 4px solid var(--wood-d);
  box-shadow: inset 0 0 0 4px var(--wood-l), inset 0 0 0 8px var(--wood), inset 0 0 0 10px var(--wood-d), 0 8px 0 rgba(0,0,0,.25);
  padding: 34px 32px 30px;
  clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
}
.board.dark{ background: #2a1a0e; color: var(--paper); }
.plank{
  display: inline-block; font: 700 18px/1 var(--pix); color: var(--paper); background: var(--wood);
  padding: 12px 20px; border: 4px solid var(--wood-d); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 4px 0 var(--wood-h), 0 6px 0 rgba(0,0,0,.25);
  text-shadow: 2px 2px 0 var(--wood-d);
}
.title{ font: 700 clamp(30px, 4vw, 48px)/1.05 var(--pix); color: var(--ink); margin: 0 0 14px; }
.board.dark .title{ color: var(--paper); }
.muted{ color: var(--ink-2); }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none;
  font: 700 18px/1 var(--pix); color: #102b04; background: var(--tox); padding: 15px 24px;
  border: 4px solid #143804; box-shadow: inset 0 -5px 0 #5fbf1c, inset 0 4px 0 #dbff9e, 0 6px 0 rgba(0,0,0,.3);
  transition: transform .08s;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(3px); box-shadow: inset 0 -2px 0 #5fbf1c, 0 2px 0 rgba(0,0,0,.3); }
.btn.wood{ color: var(--paper); background: var(--wood); border-color: var(--wood-d); box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), inset 0 4px 0 var(--wood-h), 0 6px 0 rgba(0,0,0,.3); text-shadow: 2px 2px 0 var(--wood-d); }

/* ---------- herói com parallax ---------- */
.hero{ position: relative; height: min(calc(100vh - var(--s-navh, 72px)), 860px); min-height: 560px; overflow: hidden; background: linear-gradient(180deg, var(--sky-1), var(--sky-2)); }
.layer{ position: absolute; left: 0; right: 0; bottom: 0; height: 100%; will-change: transform; }
.layer img{ position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; min-width: 100%; transform: translateX(-50%); object-fit: cover; }
.hero-in{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px 120px; z-index: 3; }
.logo{
  font: 700 clamp(64px, 12vw, 168px)/.9 var(--pix); margin: 0; letter-spacing: .02em; color: var(--tox);
  text-shadow:
    0 6px 0 var(--tox-d), 6px 6px 0 var(--tox-d), -6px 6px 0 var(--tox-d),
    6px 0 0 #102b04, -6px 0 0 #102b04, 0 -6px 0 #102b04, 0 12px 0 #102b04, 6px 12px 0 #102b04, -6px 12px 0 #102b04,
    0 24px 40px rgba(0,0,0,.35);
}
.logo .v{ display: block; font-size: .5em; color: var(--paper); text-shadow: 4px 4px 0 var(--wood-d), -4px 4px 0 var(--wood-d), 4px -4px 0 var(--wood-d), -4px -4px 0 var(--wood-d), 0 8px 0 var(--wood-d); margin-bottom: .1em; }
.hero-in .plank{ margin-top: 34px; font-size: clamp(15px, 1.6vw, 20px); max-width: 92vw; line-height: 1.4; }
.hero-cta{ display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.drip{ position: absolute; left: 0; right: 0; bottom: -2px; height: 40px; z-index: 4; background:
  radial-gradient(14px 20px at 6% 0, var(--grass) 98%, transparent) ,
  linear-gradient(var(--grass), var(--grass)) bottom/100% 18px no-repeat; }

/* ---------- seções ---------- */
.sec{ padding: 90px 0; }
.sec-h{ text-align: center; margin-bottom: 34px; }

/* história em quadros */
.story{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.frame{ background: var(--wood-d); padding: 8px; box-shadow: 0 8px 0 rgba(0,0,0,.25); }
.frame img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 3px solid var(--wood-l); }
.frame p{ margin: 10px 4px 4px; font: 700 15px/1.35 var(--pix); color: var(--paper); }
.frame .n{ color: var(--tox); margin-right: 6px; }
@media (max-width: 900px){ .story{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .story{ grid-template-columns: 1fr; } }

/* o que você faz */
.do{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 30px; margin-top: 10px; }
.do div{ border-top: 4px dotted var(--paper-d); padding-top: 14px; }
.do b{ display: block; font: 700 22px/1.15 var(--pix); color: var(--ink); margin-bottom: 6px; }
.do b i{ font-style: normal; color: var(--tox-d); }
.do span{ color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px){ .do{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .do{ grid-template-columns: 1fr; } }

/* prints */
.shots{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.shots .col{ display: grid; gap: 18px; }
.shots figure{ margin: 0; }
.shots figcaption{ font: 700 14px/1 var(--pix); color: var(--paper); margin-top: 10px; text-shadow: 2px 2px 0 var(--grass-d); }
@media (max-width: 800px){ .shots{ grid-template-columns: 1fr; } }

/* finais */
.ends{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.end{ background: var(--paper); border: 4px solid var(--wood-d); box-shadow: inset 0 0 0 4px var(--wood-l), 0 8px 0 rgba(0,0,0,.25); padding: 10px 10px 16px; }
.end img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 3px solid var(--wood-d); }
.end b{ display: block; font: 700 22px/1.1 var(--pix); margin: 12px 4px 4px; }
.end span{ display: block; margin: 0 4px; color: var(--ink-2); font-size: 15px; }
.end.best{ background: #fff6c9; box-shadow: inset 0 0 0 4px #f2c94c, 0 0 0 4px #f2c94c, 0 8px 0 rgba(0,0,0,.25); }
.end .k{ font: 700 12px/1 var(--pix); color: var(--tox-d); margin: 10px 4px 0; display: block; }
@media (max-width: 900px){ .ends{ grid-template-columns: 1fr 1fr; } }

/* ficha + lista */
.join{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: start; }
@media (max-width: 860px){ .join{ grid-template-columns: 1fr; } }
.facts{ list-style: none; margin: 0; padding: 0; }
.facts li{ display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 4px dotted var(--paper-d); }
.facts li:last-child{ border-bottom: 0; }
.facts b{ font: 700 15px/1.5 var(--pix); color: var(--ink-2); }
.facts .live{ color: var(--tox-d); font-weight: 800; }

.signup-form{ display: grid; gap: 14px; }
.signup-form .row{ display: grid; gap: 6px; }
.signup-form label{ font: 700 16px/1 var(--pix); }
.signup-form input[type=text], .signup-form input[type=email]{
  width: 100%; font: 700 17px var(--body); color: var(--ink); background: #fff8e6; padding: 13px 14px;
  border: 4px solid var(--wood-d); box-shadow: inset 0 3px 0 var(--paper-d); border-radius: 0; outline: none;
}
.signup-form input:focus{ border-color: var(--tox-d); }
.signup-form [aria-invalid=true]{ border-color: #b3261e; }
.signup-form .btn{ width: 100%; }
.hp, .is-hidden{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status{ min-height: 1.3em; margin: 0; font: 700 15px/1.4 var(--body); color: var(--ink-2); }
.status.ok{ color: var(--tox-d); }
.status.err{ color: #b3261e; }
.fineprint{ font-size: 13px; color: var(--ink-2); margin: 0; }
.refbox{ border: 4px dotted var(--tox-d); padding: 14px; color: var(--ink); }
.refbox a{ color: var(--tox-d) !important; }
.reflink{ display: flex; gap: 8px; }
.reflink input{ flex: 1; min-width: 0; padding: 10px; border: 3px solid var(--wood-d); font: 700 14px var(--body); }
.btn-line{ font: 700 14px var(--pix); background: var(--wood); color: var(--paper); border: 3px solid var(--wood-d); padding: 8px 12px; cursor: pointer; }

/* rodapé = estúdio */
.foot{ background: #050505; color: #9a9a9a; font: 14px/1.6 Inter, system-ui, sans-serif; padding: 34px 0; }
.foot .wrap{ display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot a{ color: #cfcfcf; text-decoration: none; margin-left: 18px; }
.foot a:hover{ color: #fff; }

.motion .reveal{ opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s steps(6); }
.motion .reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .motion .reveal{ opacity: 1; transform: none; } }

/* ajustes: chão liso da paisagem fica fora do quadro; galeria 16:9; fonte pixel sem ligaduras */
.layer img{ height: 128%; bottom: -26%; }
body, .plank, .title, .btn, .logo, .do b, .end b, .frame p, .facts b, label{ font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
.shots{ grid-template-columns: 1fr 1fr; align-items: start; }
.shots > figure:first-child{ grid-column: 1 / -1; }
.shots .col{ display: contents; }
.shots img{ width: 100%; aspect-ratio: 16 / 9 !important; object-fit: cover; }
@media (max-width: 700px){ .shots{ grid-template-columns: 1fr; } }
.shots .col img{ height: clamp(180px, 22vw, 320px); width: 100%; object-fit: cover; aspect-ratio: auto !important; }
.shots > figure:first-child img{ height: auto; aspect-ratio: auto !important; }