#splash{
  /* Segue o esquema do tema Polyser (variáveis --pl-*); sem o tema, usa Creme & Dourado */
  --sp-bg:var(--pl-fundo-2, #EFDFC9);
  --sp-bg-2:var(--pl-superficie-2, #F6EEE6);
  --sp-bg-rgb:var(--pl-borda-escura-rgb, 239,223,201);
  --sp-accent:var(--pl-acento-1, #E3B655);
  --sp-accent-2:var(--pl-acento-2, #B98527);
  --sp-pct-from:var(--pl-acento-2, #C9993A);
  --sp-brown:var(--pl-escuro-4, #6B4A1E);
  --sp-text:var(--pl-escuro-3, #4A2F14);
  --sp-text-rgb:var(--pl-sombra-rgb, 74,47,20);
  --sp-muted:var(--pl-texto-suave, #856E51);
  --sp-glow-rgb:var(--pl-brilho-1-rgb, 227,182,85);
  --sp-btn:var(--pl-botao, #6B4A1E);
  --sp-btn-text:var(--pl-texto-em-botao, #FBF7F1);
  --sp-ratio:1.389;                /* altura ÷ largura da capa (1478 / 1064) */

  position:fixed; inset:0; z-index:999999; cursor:pointer;
  display:flex; flex-direction:column;
  background:var(--sp-bg); color:var(--sp-text);
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow:hidden; -webkit-user-select:none; user-select:none;
  transition:opacity .55s ease, transform .55s ease;
}
#splash.sp-out{opacity:0; transform:scale(1.04); pointer-events:none}
#splash.sp-hidden{display:none}

/* ---- arte (sua capa entra aqui) ---- */
.sp-art{
  position:relative; flex:0 0 auto;
  height:min(calc(100vw * var(--sp-ratio)), 66%);   /* capa inteira na largura; corta só embaixo se faltar altura */
  background-color:var(--sp-bg-2);
  background-image:
    var(--sp-capa),
    radial-gradient(60% 50% at 28% 30%, rgba(var(--sp-glow-rgb),.35), transparent 70%),
    linear-gradient(160deg, var(--sp-bg-2) 0%, var(--sp-bg) 100%);
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  transform-origin:50% 0;
  animation:sp-zoom 10s ease-out forwards;
}
.sp-art::before{ /* granulado sutil */
  content:''; position:absolute; inset:0; opacity:.06; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- HUD ---- */
.sp-hud{
  position:relative; z-index:1; flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:0 28px calc(22px + env(safe-area-inset-bottom,0px));
  background:var(--sp-bg);
}
.sp-hud::before{ /* degradê que funde a capa ao fundo */
  content:''; position:absolute; left:0; right:0; bottom:100%; height:120px; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--sp-bg-rgb),0) 0%, var(--sp-bg) 100%);
}

.sp-brand{ text-align:center; margin-bottom:28px; }
.sp-logo{
  display:block; width:min(250px, 68%); aspect-ratio:1170/216; margin:0 auto;
  background-color:var(--sp-text);
  -webkit-mask:var(--sp-logo) center / contain no-repeat; mask:var(--sp-logo) center / contain no-repeat;
}
.sp-load{ margin-top:0; }
.sp-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.sp-status{ font-size:14px; font-weight:500; color:var(--sp-muted); transition:opacity .16s, transform .16s; }
.sp-pct{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:38px; font-weight:800; line-height:1; color:var(--sp-brown);
  font-variant-numeric:tabular-nums; min-width:3.1ch; text-align:right;
  background:linear-gradient(180deg, var(--sp-pct-from) 0%, var(--sp-brown) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sp-bar{ height:8px; border-radius:999px; background:rgba(var(--sp-text-rgb),.16); }
.sp-fill{
  position:relative; height:100%; width:0%; border-radius:inherit; overflow:hidden;
  background:linear-gradient(90deg, var(--sp-accent-2), var(--sp-accent));
  box-shadow:0 0 16px rgba(var(--sp-glow-rgb),.55);
  transition:width .3s cubic-bezier(.2,.8,.2,1);
}
.sp-fill::after{ /* brilho que percorre a barra */
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  transform:translateX(-100%);
  animation:sp-shine 1.5s ease-in-out infinite;
}
.sp-tip{
  margin:18px 0 0; min-height:2.9em; font-size:13px; line-height:1.45; text-align:center;
  color:var(--sp-muted); transition:opacity .16s, transform .16s;
}
.sp-swap{ opacity:0; transform:translateY(4px); }

/* ---- estado de erro (sem internet / loja fora do ar) ---- */
.sp-retry{
  display:block; margin:18px auto 0; border:0; border-radius:999px; padding:13px 26px; cursor:pointer;
  background:var(--sp-btn); color:var(--sp-btn-text); font:inherit; font-weight:700; font-size:15px;
}
.sp-retry[hidden]{ display:none; }
.sp-retry:focus-visible{ outline:3px solid var(--sp-accent); outline-offset:3px; }
#splash.sp-error .sp-pct{ visibility:hidden; }
#splash.sp-error .sp-status{ color:var(--sp-text); font-weight:600; }
#splash.sp-error .sp-fill{ background:rgba(var(--sp-text-rgb),.35); box-shadow:none; }
#splash.sp-error .sp-fill::after{ animation:none; }

@keyframes sp-zoom{ from{transform:scale(1)} to{transform:scale(1.04)} }
@keyframes sp-shine{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

@media (max-height:700px){
  .sp-logo{ width:min(200px, 58%); }
  .sp-brand{ margin-bottom:18px; }
  .sp-tip{ margin-top:12px; }
}

@media (prefers-reduced-motion:reduce){
  .sp-art, .sp-fill::after{ animation:none }
  #splash{ transition:opacity .3s }
  #splash.sp-out{ transform:none }
}

/* ---- dica de pular ---- */
.sp-skip{ margin:10px 0 0; font-size:12px; text-align:center; color:var(--sp-muted); opacity:0; transition:opacity .4s; }
#splash.sp-pode-pular .sp-skip{ opacity:.85; }

/* ---- desktop: capa em tela inteira, carregamento sobre a faixa inferior ---- */
@media (min-width:900px){
  #splash{ display:block; }

  /* Capa horizontal (campo "Computador"): cobre a tela inteira, nítida */
  .sp-art{
    position:absolute; inset:0; margin:0; height:auto; border-radius:0;
    background-color:var(--sp-bg);
    background-image:var(--sp-capa-desktop, var(--sp-capa));
    background-size:cover; background-position:center; background-repeat:no-repeat;
    transform-origin:50% 50%;
    animation:sp-zoom 14s ease-out forwards;
  }
  .sp-art::before{ display:none; }   /* sem granulado em cima da foto */

  /* Só a capa vertical: fundo desfocado da mesma imagem + pôster nítido e inteiro no centro */
  #splash.sp-capa-retrato .sp-art{ background-image:none; animation:none; }
  #splash.sp-capa-retrato .sp-art::before{
    content:''; display:block; position:absolute; inset:-8vh -8vw; opacity:.72; mix-blend-mode:normal;
    background:var(--sp-capa) center / cover no-repeat;
    filter:blur(46px) saturate(.9);
  }
  #splash.sp-capa-retrato .sp-art::after{
    content:''; position:absolute; left:0; right:0; top:3vh; bottom:31vh;
    background:var(--sp-capa) center / contain no-repeat;
    filter:drop-shadow(0 26px 48px rgba(0,0,0,.32));
    transform-origin:50% 50%;
    animation:sp-zoom 14s ease-out forwards;
  }

  .sp-hud{
    position:absolute; left:0; right:0; bottom:0; top:auto; flex:none;
    align-items:center; justify-content:flex-end;
    padding:15vh 8vw 5vh;
    background:linear-gradient(180deg, rgba(var(--sp-bg-rgb),0) 0%, rgba(var(--sp-bg-rgb),.92) 52%, var(--sp-bg) 100%);
  }
  .sp-hud::before{ display:none; }
  .sp-brand{ margin:0 0 20px; }
  .sp-logo{ width:min(300px, 34vw); }
  .sp-load{ width:min(720px, 68vw); margin:0; }
  .sp-row{ margin-bottom:12px; }
  .sp-pct{ font-size:40px; }
  .sp-tip{ font-size:14px; min-height:2.2em; }
}