/* =============================
   css/base.css
   ============================= */
/* ===== base: variáveis, reset, moldura do jogo ===== */
:root{--k:#111;--y:#ffd93b;--o:#ff8c42;--g:#3ecf5a;--b:#4aa8ff;--r:#ff4b4b;--w:#fff6dc}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;background:#14101c}
body{display:flex;align-items:center;justify-content:center;font-family:"Comic Sans MS","PDDTitle",Impact,sans-serif}

/* tela fixa 360x640, escalada por JS para caber */
#game{position:relative;width:360px;height:640px;flex:none;overflow:hidden;transform-origin:center;border:0;background:#222;border-radius:14px;box-shadow:0 0 0 3px var(--k),0 12px 50px #000c;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);isolation:isolate}

/* cada cena ocupa a tela toda; filhos diretos são posicionados à mão */
.scene{position:absolute;inset:0}
.scene>*{position:absolute}

[hidden]{display:none!important}

@keyframes pulse{50%{transform:scale(1.04) rotate(var(--rot,0deg))}}
@keyframes pop{from{transform:scale(.3) rotate(-10deg)}}
@keyframes float{to{translate:30px 0}}
@keyframes wave{50%{transform:rotate(1deg)}}
@keyframes bob{to{translate:0 -3px}}
@keyframes blink{94%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes yap{to{height:20px}}