@font-face{font-family:'Farmaco Pixel';src:url(/fonts/farmaco-pixel-regular.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Farmaco Pixel';src:url(/fonts/farmaco-pixel-bold.woff) format('woff');font-weight:700;font-display:swap}

:root{
  --noite:#15172E;--painel:#1E2246;--borda:#3A3F6B;--breu:#0B0C1C;
  --tinta:#1A1424;--creme:#F4EFE0;--papel-borda:#C9C4B0;
  --laranja:#FF9A1F;--laranja-claro:#FFD08A;--laranja-escuro:#B5541C;
  --verde:#6CD43F;--vermelho:#E0433A;--ceu:#1A1446;--membrana:#7032AC;
  --ciano:#39D3F0;--ouro:#F2C83A;--rosa:#FF6FA8;--lilas:#B072F0;--cinza:#B8BECC;--cinza-escuro:#8A90A0;
  --pixel:'Farmaco Pixel',monospace;--texto:'Atkinson Hyperlegible',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noite);color:var(--creme);font-family:var(--texto);font-size:17px;line-height:1.55;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}
h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}
.pular{position:absolute;left:-999px;top:8px;background:var(--creme);color:var(--tinta);padding:8px 12px;z-index:50}
.pular:focus{left:8px}

.caixa{width:min(1160px,100% - 32px);margin-inline:auto}
.titulo-pixel{font-family:var(--pixel);font-weight:700;line-height:1.12;letter-spacing:.01em}
h2.titulo-pixel{font-size:clamp(28px,4.2vw,44px);color:var(--creme);margin-bottom:14px}
.rotulo{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--laranja);margin-bottom:10px}
.rotulo--rosa{color:var(--rosa)}.rotulo--ciano{color:var(--ciano)}.rotulo--escuro{color:var(--laranja-escuro)}
.intro{color:var(--cinza);font-size:18px;max-width:36em}

/* botões: sombra dura, sem arredondar; ao apertar desce 4 px como no jogo */
.botao{display:inline-flex;align-items:center;justify-content:center;font-family:var(--pixel);font-weight:700;font-size:16px;letter-spacing:.02em;text-decoration:none;padding:12px 18px;border:3px solid #3A0A0C;background:var(--laranja);color:var(--tinta);box-shadow:0 5px 0 var(--laranja-escuro);transition:transform .06s,box-shadow .06s,background .1s;white-space:nowrap}
.botao:hover{background:#FFB04A;transform:translateY(-2px);box-shadow:0 7px 0 var(--laranja-escuro)}
.botao:active{transform:translateY(5px);box-shadow:0 0 0 var(--laranja-escuro)}
.botao--grande{font-size:20px;padding:16px 28px}
.botao--pequeno{font-size:13px;padding:8px 12px;box-shadow:0 4px 0 var(--laranja-escuro)}

/* topo: só no PC; no celular o logo já está na capa */
.topo{position:fixed;inset:0 0 auto;z-index:20;background:rgba(11,12,28,.88);border-bottom:3px solid var(--borda);backdrop-filter:blur(6px);transform:translateY(-110%);transition:transform .25s}
.topo.visivel{transform:none}
.topo__linha{display:flex;align-items:center;justify-content:space-between;height:60px}
.topo__logo img{width:193px}

/* capa */
.capa{position:relative;overflow:hidden;background:var(--breu)}
.capa__fundo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,28,.97) 0,rgba(11,12,28,.9) 48%,rgba(11,12,28,.55) 100%),url(/img/fundo.webp) center/cover no-repeat;image-rendering:pixelated}
.capa__grade{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center;min-height:min(100svh,860px);padding:72px 0 88px}
.capa__logo{width:336px;margin-bottom:28px}
.selo{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--verde);border:2px solid var(--verde);padding:4px 10px;margin-bottom:18px}
.capa h1{font-size:clamp(34px,4.6vw,56px);margin-bottom:18px;max-width:13em;text-wrap:balance}
.capa__sub{font-size:19px;color:var(--cinza);max-width:30em;margin-bottom:30px}
.capa__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.capa__nota{font-size:14px;color:var(--cinza-escuro);line-height:1.45}
.capa__nota b{color:var(--laranja-claro);font-weight:700}
.capa__tela{position:relative}
.celular{width:300px;aspect-ratio:432/768;background:#000;border:10px solid #23264A;border-radius:28px;box-shadow:0 0 0 3px var(--tinta),0 0 0 7px #3A3F6B,0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.celular__video{width:100%;height:100%;object-fit:cover}
.capa__dra{position:absolute;left:-118px;bottom:-12px;width:144px}
.capa__seta{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);text-decoration:none;color:var(--laranja-claro);font-size:18px;animation:quicar 1.6s ease-in-out infinite}
@keyframes quicar{50%{transform:translate(-50%,6px)}}

/* como se joga */
.como{padding:96px 0 72px;background:var(--noite)}
.atos{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:ato}
.ato{display:flex;flex-direction:column;gap:16px}
.ato img{width:100%;border:3px solid var(--tinta);box-shadow:0 0 0 3px var(--borda),6px 8px 0 3px var(--breu);background:#000}
.ato__texto{position:relative;padding-left:46px}
.ato__num{position:absolute;left:0;top:0;width:34px;height:34px;display:grid;place-items:center;font-family:var(--pixel);font-weight:700;font-size:18px;background:var(--laranja);color:var(--tinta);border:3px solid #3A0A0C}
.ato h3{font-family:var(--pixel);font-size:19px;margin-bottom:6px;color:var(--laranja-claro)}
.ato p{font-size:15.5px;color:var(--cinza);line-height:1.5}
.arraste{display:none}

/* remédios */
.remedios{padding:88px 0;background:linear-gradient(var(--noite),#1A1B3C)}
.cartas{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.carta{background:var(--painel);border:3px solid var(--borda);border-top:8px solid var(--cor);padding:20px;display:flex;flex-direction:column;gap:10px}
.carta__vidro{height:140px;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--cor) 18%,transparent),transparent 70%)}
.carta__vidro img{max-height:110px;width:auto;animation:boiar 4s ease-in-out infinite}
.carta:nth-child(2) .carta__vidro img{animation-delay:-1.3s}.carta:nth-child(3) .carta__vidro img{animation-delay:-2.6s}
.carta h3{font-family:var(--pixel);font-size:22px;color:var(--cor)}
.carta__fala{font-style:italic;color:var(--creme)}
.carta dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:15px}
.carta dt{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--cinza-escuro);text-transform:uppercase;padding-top:3px}
.carta dd{margin:0;color:var(--cinza)}
.mais{margin-top:24px;color:var(--cinza)}
@keyframes boiar{50%{transform:translateY(-6px) rotate(3deg)}}

/* horda */
.horda{padding:88px 0;background:radial-gradient(900px 420px at 80% 0,#2A1550 0,transparent 70%),var(--ceu)}
.moleculas{list-style:none;padding:0;margin:32px 0 40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.moleculas li{display:flex;flex-direction:column;gap:4px;background:rgba(11,12,28,.45);border:3px solid #3B2A78;padding:16px}
.moleculas img{height:84px;width:auto;object-fit:contain;align-self:center;margin-bottom:10px}
.moleculas b{font-family:var(--pixel);font-size:18px}
.moleculas small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--tinta);background:var(--vermelho);padding:2px 6px;margin-left:4px;vertical-align:3px}
.moleculas span{font-size:15px;color:var(--cinza);line-height:1.45}
.moleculas .chefe{border-color:var(--vermelho)}
.galeria{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:16px}
.galeria img{width:100%;border:3px solid var(--tinta);box-shadow:0 0 0 3px var(--borda)}
.galeria img:first-child{grid-row:1/3;height:100%;object-fit:cover}

/* receita final */
.receita-area{padding:96px 0 104px;background:var(--noite)}
.receita{position:relative;margin-inline:auto;max-width:760px;background:var(--creme);color:var(--tinta);border:3px solid var(--tinta);box-shadow:10px 10px 0 var(--breu);padding:32px 36px;display:flex;gap:28px;align-items:flex-end;overflow:hidden}
.receita__dra{width:144px;flex:none;margin-bottom:-35px}
.receita__corpo{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.receita h2.titulo-pixel{color:var(--tinta);font-size:clamp(24px,3.2vw,32px);margin:0}
.receita__nota{font-size:14px;color:#5A5468}
.carimbo{position:absolute;right:26px;top:22px;font-family:var(--pixel);font-weight:700;font-size:38px;color:var(--vermelho);border:5px solid var(--vermelho);padding:0 14px;letter-spacing:.12em;transform:rotate(-12deg) scale(2.4);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.carimbo.bateu{animation:carimbar .35s cubic-bezier(.3,1.6,.6,1) forwards}
@keyframes carimbar{to{transform:rotate(-12deg) scale(1);opacity:.85}}

/* rodapé */
.rodape{background:var(--breu);border-top:3px solid var(--borda);padding:32px 0 40px;font-size:14px;color:var(--cinza-escuro)}
.rodape__linha{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.rodape nav{display:flex;gap:20px}
.rodape a{color:var(--cinza)}
.rodape p{margin-left:auto}

.barra-jogar{display:none}

@media (max-width:900px){
  body{font-size:16px}
  .topo{display:none}
  /* capa no celular: a run ocupa a tela, o texto fica embaixo, no alcance do polegar */
  .capa{min-height:100svh}
  .capa__fundo{display:none}
  .capa__grade{display:block;min-height:100svh;padding:0;width:100%}
  .capa__tela{position:absolute;inset:0}
  .celular{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
  .celular::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(11,12,28,.85) 0,rgba(11,12,28,.1) 22%,rgba(11,12,28,.15) 42%,rgba(11,12,28,.92) 66%,var(--breu) 100%)}
  .capa__dra{display:none}
  .capa__texto{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom))}
  .capa__logo{width:224px;margin:0 auto auto}
  .selo{align-self:flex-start;font-size:11px;margin-bottom:12px;background:rgba(11,12,28,.7)}
  .capa h1{font-size:clamp(28px,8.4vw,36px);margin-bottom:12px;text-shadow:0 3px 0 var(--breu)}
  .capa__sub{font-size:16px;margin-bottom:20px;color:#D5D9E4}
  .capa__acoes{flex-direction:column;align-items:stretch;gap:14px}
  .capa__acoes .botao{width:100%}
  .capa__nota{text-align:center;font-size:13px}
  .capa__seta{display:none}

  .como,.remedios,.horda{padding:56px 0}
  .como{padding-bottom:40px}
  /* atos: carrossel de deslizar, um ato por vez */
  .atos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:28px -16px 0;padding:0 16px 12px;scrollbar-width:none}
  .atos::-webkit-scrollbar{display:none}
  .ato{flex:0 0 74%;scroll-snap-align:center}
  .arraste{display:block;margin-top:8px;text-align:right;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--cinza-escuro)}
  .cartas{grid-template-columns:1fr;gap:14px}
  .carta{display:grid;grid-template-columns:84px 1fr;column-gap:14px;row-gap:6px;padding:14px;border-top-width:3px;border-left:8px solid var(--cor)}
  .carta__vidro{grid-row:1/3;height:84px;align-self:start}
  .carta__vidro img{max-height:70px}
  .carta h3{font-size:19px;align-self:end}
  .carta__fala{font-size:14.5px}
  .carta dl{grid-column:1/-1;font-size:14px}
  .moleculas{grid-template-columns:1fr 1fr;gap:12px}
  .moleculas li{padding:12px}
  .moleculas img{height:64px}
  .moleculas b{font-size:16px}
  .moleculas span{font-size:14px}
  .galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
  .galeria::-webkit-scrollbar{display:none}
  .galeria img{flex:0 0 86%;scroll-snap-align:center;height:auto}
  .galeria img:first-child{grid-row:auto;height:auto}
  .receita-area{padding:64px 0 120px}
  .receita{flex-direction:column;align-items:stretch;padding:28px 20px 24px}
  .receita__dra{display:none}
  .receita__corpo{align-items:stretch}
  .carimbo{font-size:28px;right:14px;top:16px}
  .rodape{padding-bottom:110px}
  .rodape p{margin-left:0}
  /* barra fixa com o botão, depois que a capa sai da tela */
  .barra-jogar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(11,12,28,.95) 35%);transform:translateY(120%);transition:transform .25s}
  .barra-jogar.visivel{transform:none}
  .barra-jogar .botao{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .carimbo{opacity:.85;transform:rotate(-12deg)}
}