/* ============================================================
   O VISUAL DE TODOS OS JOGOS — GugaPlay
   Um arquivo só, para que jogo novo já nasça parecido com os
   outros. As cores e as fontes saíram da corrida 3D, que foi o
   primeiro jogo: ela é a referência, não o contrário.
   ============================================================ */
:root{
  --vidro:rgba(14,9,36,.62); --borda:rgba(255,255,255,.38);
  --tinta:#f6f0ff; --fraca:#c6b8ec; --ouro:#ffd93d; --rosa:#ff5fa2;
  --verde:#3ddc84; --azul:#4dd0ff; --fundo:#120a2e;
  --display:"Luckiest Guy","Chalkboard SE",cursive;
  --corpo:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* ===== O FUNDO MORA NO HTML, PRESO À TELA =====
   Antes ele ficava no body, com html e body de altura 100% e o degradê
   sem no-repeat: o desenho tinha a altura de UMA tela e se repetia, e
   ao rolar a estante aparecia uma faixa reta cortando o fundo no meio
   (foto 21-hub-rodape). Agora o degradê pinta uma vez só, preso à tela
   (fixed), e onde ele não alcança fica a cor em que ele mesmo termina
   (#0b0620). No iPhone, que ignora o fixed, ele estica pela página
   inteira e termina na mesma cor: também não aparece emenda. */
html{
  min-height:100%;
  background-color:#0b0620;
  background-image:radial-gradient(120% 80% at 50% 0%, #2a1a63 0%, #120a2e 60%, #0b0620 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
html,body{ margin:0; }
body{
  font-family:var(--corpo); color:var(--tinta);
  overflow-x:hidden;
}
.faixa{ font-family:var(--display); font-size:clamp(16px,3.6vmin,30px); letter-spacing:.14em;
        color:var(--ouro); text-shadow:0 3px 0 #8a5a00; text-align:center; }
.como{ font-size:clamp(12px,1.9vh,16px); color:var(--fraca); max-width:44ch; line-height:1.55;
       margin:0 auto; text-align:center; }
.botao{ display:inline-block; cursor:pointer; border:0; font-family:var(--display);
        font-size:min(5.4vw,4.4vh,34px); letter-spacing:.05em; color:#2a0f00;
        background:linear-gradient(180deg,#fff06b,#ffab14); border-radius:26px;
        padding:clamp(10px,1.7vh,16px) clamp(26px,5.5vw,46px);
        box-shadow:0 10px 0 #b3660a, 0 20px 36px rgba(0,0,0,.5); }
.botao:active{ transform:translateY(4px); box-shadow:0 6px 0 #b3660a; }
.nivel{ cursor:pointer; font-family:var(--display); font-size:clamp(14px,2.1vh,21px);
        letter-spacing:.04em; padding:9px 18px; border-radius:999px; color:var(--tinta);
        background:var(--vidro); border:3px solid var(--borda); transition:transform .12s; }
.nivel:active{ transform:scale(.95); }
.escondido{ display:none !important; }