/* ================================================================
   FAVELA INVADERS — chrome do gabinete (o jogo mesmo é no canvas)
   ================================================================ */

/* fonte servida daqui mesmo: o jogo roda sem depender do Google */
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/press-start-2p-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/press-start-2p-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --neon:#ffd23f;
  --neon2:#ff3b6b;
  --cyan:#22e0c8;
  --ink:#07060c;
  --ink2:#12101c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;
  background:
    radial-gradient(120% 90% at 50% -10%, #2a1741 0%, #140d24 45%, #07060c 100%);
  background-attachment:fixed;
  color:#fff;
  font-family:"Press Start 2P", ui-monospace, "Courier New", monospace;
  /* a ficha do jogo mora embaixo do gabinete, então a página rola. O canvas
     e os botões de toque seguram o dedo (preventDefault), então arrastar pra
     mover não faz a página sair do lugar no meio do tiroteio. */
  overflow-x:hidden;
  -webkit-font-smoothing:none;
  -webkit-tap-highlight-color:transparent;
}
body::after{ /* brilho de poste de luz */
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0%, rgba(255,180,60,.10), transparent 70%);
}

#cabinet{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:10px; width:100%; height:100vh;
  justify-content:center;
}

#voltar{
  position:fixed; top:12px; left:14px; z-index:20;
  font-size:8px; letter-spacing:.1em; text-decoration:none;
  color:rgba(255,255,255,.45);
  padding:8px 10px; border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,6,12,.55);
}
#voltar:hover,#voltar:focus-visible{color:var(--neon); border-color:var(--neon)}

#stage{
  position:relative;
  width:min(96vw, calc((100vh - 130px) * 1.3333));
  aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  background:#07060c;
  box-shadow:
    0 0 0 3px #1d1730,
    0 0 0 6px #0a0812,
    0 0 40px rgba(255,60,110,.25),
    0 0 90px rgba(80,40,160,.35),
    0 22px 50px rgba(0,0,0,.7);
}
canvas#game{
  display:block; width:100%; height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
#scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:multiply;
  opacity:.55;
}

/* ---------------- overlays ---------------- */
.overlay{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.2%;
  text-align:center;
  padding:4%;
  background:linear-gradient(180deg, rgba(5,4,12,.90), rgba(10,6,20,.82) 60%, rgba(5,4,12,.94));
  backdrop-filter:blur(1.5px);
  animation:fade .22s ease-out;
}
.overlay.hidden{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.logo{display:flex; flex-direction:column; line-height:1; gap:.35em}
.logo .l1{
  font-size:clamp(18px,5.4vw,44px); letter-spacing:.06em;
  color:var(--neon);
  text-shadow:0 3px 0 #b8791a, 0 0 18px rgba(255,210,63,.7);
}
.logo .l2{
  font-size:clamp(15px,4.4vw,36px); letter-spacing:.02em;
  color:var(--neon2);
  text-shadow:0 3px 0 #7d0f2c, 0 0 20px rgba(255,59,107,.75);
  animation:flick 5.5s infinite steps(1);
}
@keyframes flick{
  0%,92%,100%{opacity:1} 93%{opacity:.35} 95%{opacity:1} 96%{opacity:.5} 97%{opacity:1}
}
.tagline{
  font-size:clamp(6px,1.65vw,11px); color:var(--cyan); letter-spacing:.14em;
  text-transform:uppercase; opacity:.9;
}

.roster{display:flex; gap:clamp(6px,1.6vw,14px); align-items:flex-end; margin:.4em 0}
.roster figure{display:flex; flex-direction:column; align-items:center; gap:6px}
.roster img{
  width:clamp(20px,5.2vw,40px); height:auto; image-rendering:pixelated;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6));
  animation:bob 1.6s ease-in-out infinite;
}
.roster figure:nth-child(2) img{animation-delay:.2s}
.roster figure:nth-child(3) img{animation-delay:.4s}
.roster figure:nth-child(4) img{animation-delay:.6s}
.roster figure:nth-child(5) img{animation-delay:.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.roster figcaption{font-size:clamp(4px,1.1vw,7px); color:#9b93b5; letter-spacing:.05em}

.btn{
  font-family:inherit; cursor:pointer;
  font-size:clamp(8px,2.1vw,14px);
  padding:.85em 1.6em;
  color:#1a0d00; background:var(--neon);
  border:0; border-radius:4px;
  box-shadow:0 4px 0 #a06d12, 0 0 22px rgba(255,210,63,.45);
  letter-spacing:.08em;
  transition:transform .06s, box-shadow .06s, background .15s;
}
.btn:hover{background:#ffe071}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 #a06d12, 0 0 14px rgba(255,210,63,.4)}

.hint{font-size:clamp(5px,1.35vw,9px); color:#8f88a8; line-height:2}
.hint b{color:var(--cyan)}
.hiline{font-size:clamp(5px,1.35vw,9px); color:#6f6890; letter-spacing:.1em}
.hiline span{color:var(--neon)}

/* intro de onda */
.waveNum{font-size:clamp(8px,2.2vw,14px); color:var(--cyan); letter-spacing:.2em}
.waveIcon{
  width:clamp(40px,11vw,86px); image-rendering:pixelated;
  filter:drop-shadow(0 0 12px rgba(255,59,107,.55));
  animation:zoomin .35s cubic-bezier(.2,1.5,.4,1);
}
@keyframes zoomin{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.waveName{
  font-size:clamp(11px,3.4vw,26px); color:var(--neon2);
  text-shadow:0 3px 0 #6d0b24, 0 0 18px rgba(255,59,107,.6);
  letter-spacing:.04em;
}
.waveTip{font-size:clamp(5px,1.5vw,10px); color:#c8bfe0; line-height:1.9; max-width:80%}

.bigword{
  font-size:clamp(15px,4.6vw,36px); color:var(--neon2);
  text-shadow:0 3px 0 #6d0b24, 0 0 22px rgba(255,59,107,.6);
  letter-spacing:.05em;
}
.goSub{font-size:clamp(5px,1.5vw,10px); color:#a79dc4; letter-spacing:.06em}
.scoreboard{display:flex; gap:clamp(10px,3vw,30px); margin:.5em 0}
.scoreboard div{display:flex; flex-direction:column; gap:.7em}
.scoreboard span{font-size:clamp(4px,1.15vw,8px); color:#7a7398; letter-spacing:.1em}
.scoreboard b{font-size:clamp(9px,2.4vw,17px); color:var(--neon)}

/* ---------------- ficha do jogo ----------------
   Fica embaixo do gabinete. Serve pra quem cai aqui de primeira entender o
   que é o jogo, e pro robô de busca ter o que ler: o jogo é canvas, e canvas
   é imagem. */
.ficha{
  max-width:720px; margin:0 auto; padding:64px 24px 80px;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color:#b9b2ce; font-size:15px; line-height:1.75;
  border-top:1px solid rgba(255,255,255,.07);
}
.ficha h1{
  font-family:"Press Start 2P", monospace; font-size:15px; line-height:1.6;
  letter-spacing:.04em; color:var(--neon); margin:0 0 20px;
}
.ficha h2{
  font-family:"Press Start 2P", monospace; font-size:9px; letter-spacing:.14em;
  color:var(--cyan); margin:30px 0 10px; text-transform:uppercase;
}
.ficha p{margin:0 0 14px}
.ficha b{color:#e6e1f2}
.ficha a{color:var(--neon)}
.ficha a:hover,.ficha a:focus-visible{color:#ffe071}
.ficha__voltar{margin-top:34px}

/* ---------------- toque ---------------- */
#touchpad{display:none; gap:10px; width:min(96vw,560px)}
.tbtn{
  flex:1; font-family:inherit; font-size:16px; color:#fff;
  background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.16);
  border-radius:10px; padding:16px 0;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.tbtn:active{background:rgba(255,210,63,.28); border-color:var(--neon)}
.tbtn.fire{flex:1.6; font-size:11px; color:var(--neon); letter-spacing:.1em}
@media (hover:none) and (pointer:coarse){
  #touchpad{display:flex}
  /* jogo e controles juntos na metade de baixo, ao alcance do polegar */
  #cabinet{justify-content:flex-end; gap:18px;
           padding:14px 8px calc(22px + env(safe-area-inset-bottom))}
  #stage{width:min(99vw, calc((100vh - 210px) * 1.3333))}
  .tbtn{padding:20px 0}
}

/* telas estreitas: as legendas do elenco se atropelam */
@media (max-width:430px){
  .roster figcaption{display:none}
  .roster{gap:10px}
  .overlay{gap:3.2%}
}

/* paisagem no celular: aproveita a largura toda */
@media (hover:none) and (pointer:coarse) and (orientation:landscape){
  #cabinet{flex-direction:row; align-items:center; gap:10px}
  #stage{width:min(72vw, calc((100vh - 40px) * 1.3333)); margin-top:0}
  #touchpad{flex-direction:column; width:auto; flex:1; max-width:26vw}
  .tbtn{padding:22px 0}
}