/* Pixel Forge Games — abertura padrão (splash da marca + tela de carregamento).
   Módulo reutilizável: copiar splash.css + splash.js para qualquer jogo. Ver splash.js para a API. */
#pf-splash{
  position:fixed;inset:0;z-index:3000;display:grid;place-items:center;overflow:hidden;
  background:#15161C;color:#F4F1EA;font-family:'Fredoka','Nunito','Arial Rounded MT Bold',system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:none;transition:opacity .5s ease;
}
#pf-splash.out{opacity:0;pointer-events:none}
#pf-splash::before{
  content:'';position:absolute;inset:-20%;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,140,50,.22) 0%,rgba(255,140,50,0) 55%);
}
#pf-splash .pf-stage{position:relative;display:grid;place-items:center;text-align:center;gap:14px;padding:24px;max-width:90vw}
#pf-splash .pf-phase{display:grid;place-items:center;gap:14px;animation:pf-in .5s ease both}
#pf-splash .pf-phase.out{animation:pf-out .35s ease both}

/* marca: grade 5×5 de pixels que se acendem formando um "P" com a bigorna/faísca */
.pf-logo{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:min(30vw,130px);aspect-ratio:1/1}
.pf-logo i{display:block;border-radius:2px;background:#2A2C36;transform:scale(.6);opacity:0;animation:pf-pixel .35s cubic-bezier(.2,.9,.3,1.3) forwards}
.pf-logo i.p{background:linear-gradient(135deg,#FFB347,#FF7A2F)}
.pf-logo i.s{background:linear-gradient(135deg,#FFF3C4,#FFD166)}
.pf-logo i.d{background:#2A2C36}
.pf-brand{font-size:clamp(28px,6vw,52px);font-weight:700;letter-spacing:.06em;line-height:1;text-transform:uppercase;margin-top:6px}
.pf-brand b{color:#FF9A3C}
.pf-sub{font-size:clamp(13px,2.2vw,18px);font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:rgba(244,241,234,.55);margin-left:.42em}
.pf-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 12px 4px rgba(255,200,80,.7);opacity:0;animation:pf-spark 1.1s ease-out .55s}

/* carregamento */
.pf-game{display:grid;place-items:center;gap:10px}
.pf-game img{width:min(26vw,112px);height:auto;border-radius:24%;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.pf-title{font-size:clamp(26px,5vw,44px);font-weight:700;line-height:1.05}
.pf-bar{width:min(70vw,360px);height:14px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.pf-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#FF7A2F,#FFB347);transition:width .25s ease-out}
.pf-status{font-size:15px;font-weight:600;color:rgba(244,241,234,.6);min-height:1.4em}
.pf-by{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.35)}

@keyframes pf-pixel{to{transform:scale(1);opacity:1}}
@keyframes pf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pf-out{to{opacity:0;transform:scale(.96)}}
@keyframes pf-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(46px,-70px) scale(1.2)}}
@media (prefers-reduced-motion:reduce){
  #pf-splash *{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}
}