/* =====================================================================
   CT VITINHO · DESAFIO DA EMBAIXADINHA (desafio.html)
   Tela cheia, sem rolagem: o canvas 3D fica no fundo e as telas de início e fim por cima.
   O placar gigante vazado fica ATRÁS do canvas (o canvas é transparente).
   ===================================================================== */
html,body.jogo{height:100%;overflow:hidden;overscroll-behavior:none}
body.jogo{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}

#jogo3d{position:fixed;inset:0;width:100%;height:100%;z-index:2;cursor:none}
.jogo.na-tela #jogo3d{cursor:default}

/* o placar: número gigante vazado, como o "01/02" das unidades no site */
.jogo-placar{position:fixed;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;padding-bottom:18vh}
.jogo-placar b{font:800 clamp(10rem,42vmin,30rem)/.8 var(--cond);color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.1);transition:-webkit-text-stroke-color .5s}
.jogo-placar b.pulsa{animation:pulsa .32s var(--ease)}
@keyframes pulsa{0%{transform:scale(1.07);-webkit-text-stroke-color:rgba(166,115,255,.55)}100%{transform:none}}
.jogo.na-tela .jogo-placar b{opacity:0}

/* a linha da areia, na altura da base do V (o jogo.js posiciona pela variável --chao) */
.jogo-chao{position:fixed;left:0;right:0;top:var(--chao,88%);z-index:1;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 18%,rgba(255,255,255,.09) 82%,transparent)}

/* no computador a quadra é mais estreita que a tela: duas linhas marcam onde a bola bate e volta */
.jogo-quadra{position:fixed;top:0;bottom:calc(100% - var(--chao,88%));z-index:1;pointer-events:none;
  border-inline:1px solid rgba(255,255,255,.06);
  -webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
.jogo-quadra[hidden]{display:none}

/* ---------- topo ---------- */
.jogo-topo{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:max(16px,env(safe-area-inset-top)) var(--pad) 16px}
.jogo-topo-dir{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px)}
.jogo-recorde{font:700 .78rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--txt-2)}
.jogo-recorde b{color:#fff;font-size:1.25em;letter-spacing:.04em;margin-left:.35em}
.jogo-som{font:700 .72rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);
  padding:.75em .9em;border:1px solid var(--linha);transition:color .3s,border-color .3s}
.jogo-som:hover{color:#fff;border-color:rgba(255,255,255,.3)}

/* ---------- telas de início e fim ---------- */
.jogo-tela{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:96px var(--pad) 22vh;text-align:center;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(10,10,12,.86),rgba(10,10,12,.55) 70%,rgba(10,10,12,.2))}
.jogo-tela[hidden]{display:none}
.jogo-tela h1{font-size:clamp(3.4rem,11vw,8.4rem);text-wrap:balance}
.jogo-texto{color:var(--txt-2);font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:36ch;margin-bottom:8px}
.jogo-texto a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.jogo-dica[hidden]{display:none}
.jogo-dica{font:700 .74rem/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3)}

.jogo-final{display:flex;flex-direction:column;align-items:center;gap:6px}
.jogo-final b{font-size:clamp(7rem,26vmin,15rem);line-height:.8;color:#fff}
.jogo-final span{font:700 .9rem/1 var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--txt-2)}
.jogo-nivel{font:700 .9rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--txt-2)}
.jogo-nivel b{color:#fff;font-size:1.3em;letter-spacing:.06em;margin-left:.3em}
.jogo-novo{font:800 1.5rem/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--roxo-claro)}
.jogo-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.btn-linha{color:#fff;background:var(--p4)} /* fundo, não contorno: o chanfro cortaria a linha da quina */
.btn-linha:hover,.btn-linha:focus-visible{color:var(--preto)}
.jogo-tela .link-seta{color:var(--txt-2);margin-top:6px}
.jogo-tela .link-seta:hover{color:#fff}

/* ---------- aviso de nível novo ---------- */
.jogo-marco{position:fixed;left:50%;top:clamp(84px,14vh,130px);z-index:6;transform:translateX(-50%);pointer-events:none;
  font:800 clamp(1.2rem,3vw,1.8rem)/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  background:var(--roxo);color:#fff;padding:.6em 1em .52em;opacity:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.jogo-marco.mostra{animation:marco 1.9s var(--ease)}
@keyframes marco{0%{opacity:0;transform:translate(-50%,14px)}12%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}

/* sem WebGL o jogo não roda: avisa e manda de volta pro site */
.sem-webgl .jogo-tela#tela-inicio .btn,.sem-webgl #dica-tecla{display:none}

@media (max-width:640px){
  .jogo-topo .marca span{display:none}
  .jogo-tela{gap:14px;padding-bottom:26vh}
  .jogo-acoes{flex-direction:column;align-items:stretch;width:min(100%,320px)}
}