:root{
  --pp-gold:#ffd54a; --pp-gold-2:#f4a51f; --pp-blue:#1b3a8f; --pp-blue-2:#0d1f4d;
  --pp-bg:#050a1c; --pp-text:#fff; --pp-sub:#9aa3c0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.pp-body{
  background:#061024 url('/fronts/plinko/assets/game-bg-mobile.jpg') center top/cover no-repeat fixed;
  color:var(--pp-text);
  font-family:'Roboto Condensed',system-ui,Arial,sans-serif;
  -webkit-user-select:none;user-select:none;
}
.pp-root{max-width:540px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:10px 12px 24px}

/* topo */
.pp-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.pp-brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.5px;font-size:14px}
.pp-balance{background:linear-gradient(180deg,rgba(28,37,80,.9),rgba(10,16,44,.9));border:1px solid #2b4an;
  border-color:#2b4a9b;border-radius:12px;padding:6px 12px;text-align:right;
  box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pp-balance small{display:block;color:var(--pp-sub);font-size:10px;letter-spacing:1px}
.pp-balance strong{font-size:18px;color:var(--pp-gold)}

/* ---------- TABULEIRO ---------- */
.pp-stage{position:relative;width:100%;aspect-ratio:1024/1536;margin:2px 0}
/* interior azul do tabuleiro (dentro do trapézio da moldura) */
/* O interior segue o TRAPÉZIO da moldura (mais estreito em cima), senão o
   fundo vaza para fora do dourado nos cantos de cima. */
.pp-board{position:absolute;left:5.5%;right:5.5%;top:21%;bottom:5%;z-index:1;
  background:url('/fronts/plinko/assets/game-bg-mobile.jpg') center/cover no-repeat, #12275e;
  overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.5);
  clip-path:polygon(12.5% 0, 87.5% 0, 100% 100%, 0 100%)}
.pp-board::after{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 40% at 50% 45%, rgba(255,220,150,.28), transparent 70%)}
/* moldura por cima */
.pp-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.55))}
/* faixa de texto dentro da placa azul da moldura */
.pp-tagline{position:absolute;left:27%;right:27%;top:13.7%;z-index:5;text-align:center;
  color:var(--pp-gold);font-weight:800;font-size:clamp(9px,2.6vw,13px);line-height:1.15;
  letter-spacing:.3px;text-shadow:0 2px 4px rgba(0,0,0,.6);pointer-events:none}
/* canvas dos pinos + bolas */
.pp-canvas{position:absolute;z-index:2}

/* slots de prêmio na base */
/* Faixa das casas: o verde e as molduras douradas vêm da IMAGEM original
   (slots-frame-cropped.png). As casas são posicionadas por cima, nas
   coordenadas exatas do jogo de referência. */
/* A faixa respeita a PROPORCAO do arquivo (1273x369). Se esticar, os nichos
   dourados saem do lugar e as imagens passam por cima das divisorias. */
.pp-slots{position:absolute;left:5%;right:5%;bottom:1.2%;z-index:3;pointer-events:none;
  aspect-ratio:1273/369}
.pp-slots-frame{display:block;width:100%;height:auto}
.pp-cell{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Todas as imagens tem a MESMA tela (260x520), entao ocupam o nicho no mesmo
   tamanho — sem uma sair maior que a outra nem invadir a divisoria. */
.pp-cell img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.pp-cell .txt{font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}
/* divisória dourada encorpada, como no original */
.pp-gap{flex:0 0 4px;
  background:linear-gradient(90deg,#7a5406 0%,#e8bf4e 35%,#fff3c0 50%,#e8bf4e 65%,#7a5406 100%);
  box-shadow:0 0 4px rgba(0,0,0,.6)}
/* Casa acesa quando a bolinha cai nela. O brilho dourado é o do original
   (pp-slot--flash: .6s, pico em 30% com box-shadow 18px 6px #ffd54a).
   O clarão vai num ::after para NÃO apagar o fundo da casa (a casa NADA tem
   gradiente verde próprio; animar `background` no elemento comia esse verde). */
.pp-cell.win{animation:pp-pop .6s ease,pp-glow .6s ease-out;border-radius:6px}
.pp-cell.win::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:6px;background:rgba(255,213,74,.45);animation:pp-fade .6s ease-out}
@keyframes pp-pop{0%{transform:translateY(0)}30%{transform:translateY(-6px) scale(1.06)}100%{transform:translateY(0)}}
@keyframes pp-glow{
  0%{box-shadow:0 0 rgba(255,213,74,0)}
  30%{box-shadow:0 0 18px 6px rgba(255,213,74,.9)}
  100%{box-shadow:0 0 rgba(255,213,74,0)}}
@keyframes pp-fade{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* Casa NADA: também reage — treme e dá um clarão frio (sem festa de prêmio). */
.pp-cell.perdeu{animation:pp-tremer .45s ease-out}
.pp-cell.perdeu::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:6px;background:rgba(210,225,255,.5);animation:pp-fade .5s ease-out}
@keyframes pp-tremer{
  0%{transform:translateX(0)}
  20%{transform:translateX(-3px)}
  40%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
  100%{transform:translateX(0)}}
/* etiqueta PRINCIPAL */
.pp-principal{position:absolute;z-index:6;transform:translate(-50%,-100%);
  background:linear-gradient(180deg,#3a2a06,#120c02);
  border:1px solid #e8bf4e;border-bottom:0;
  color:#ffd54a;font-size:9px;font-weight:800;letter-spacing:1px;
  padding:3px 10px;border-radius:5px 5px 0 0;white-space:nowrap;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  box-shadow:0 -2px 8px rgba(0,0,0,.5)}

/* ---------- HUD (abaixo do tabuleiro) ----------
   Medidas tiradas do original (viewport 380): laterais 16px, conteudo 348px,
   duas colunas iguais de 168px com 12px de gap. */
.pp-hud{padding:0 16px}
/* visitante: some com saldo/valor/quantidade e sobra so o botao de entrar */
.pp-hud.deslogado .hud-saldo,
.pp-hud.deslogado .hud-labels,
.pp-hud.deslogado .hud-controles{display:none}
.pp-hud.deslogado .pp-buy{margin-top:22px;height:60px;font-size:19px}

.hud-saldo{display:flex;align-items:center;justify-content:space-between;
  background:#10205f;border:1px solid #f4c430;border-radius:12px;
  padding:8px 14px;height:45px;margin-top:12px}
.hud-saldo span{font-size:11px;font-weight:700;letter-spacing:1px;color:#9fb4e6}
.hud-saldo b{font-size:16px;font-weight:800;color:var(--pp-gold)}

.hud-labels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;
  margin:16px 0 6px;font-size:11px;font-weight:700;letter-spacing:1px;color:#9fb4e6}

.hud-controles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.hud-preco{display:flex;align-items:center;justify-content:center;height:44px;
  background:#10205f;border:1px solid #f4c430;border-radius:10px;
  font-size:18px;font-weight:900;color:var(--pp-gold)}
.hud-stepper{display:flex;align-items:stretch;gap:8px;height:44px}
.hud-stepper button{width:44px;background:#10205f;border:1px solid #2a3f80;border-radius:10px;
  color:var(--pp-gold);font-family:inherit;font-size:22px;font-weight:800;line-height:1;cursor:pointer}
.hud-stepper button:active{background:#16296f}
.hud-stepper input{flex:1;min-width:0;background:#0b1740;border:1px solid #2a3f80;border-radius:10px;
  color:#fff;font-family:inherit;font-size:18px;font-weight:800;text-align:center;
  padding:8px 12px;outline:none;-moz-appearance:textfield}
.hud-stepper input::-webkit-outer-spin-button,
.hud-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.pp-buy{width:100%;margin-top:12px;height:54px;border:0;border-radius:12px;padding:15px 0;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:900;letter-spacing:.5px;
  color:#052e12;background:linear-gradient(180deg,#4ade80,#16a34a);transition:transform .05s}
.pp-buy:active{transform:translateY(2px)}
.pp-buy:disabled{filter:grayscale(.4) brightness(.85);cursor:not-allowed}
/* estado inicial, antes de saber se o jogador tem saldo */
.pp-buy.carregando{background:#10205f;border:1px solid #2a3f80;color:#9fb4e6;filter:none}
/* com saldo, o botão vira o de jogar (dourado) */
.pp-buy.jogar{color:#241a00;background:linear-gradient(180deg,var(--pp-gold),var(--pp-gold-2))}

/* selo do campeonato, flutuando no canto do tabuleiro */
.pp-camp{position:absolute;right:1%;top:6%;z-index:6;width:82px;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.pp-camp .pill{background:linear-gradient(180deg,#ff5d6e,#d61f37);color:#fff;
  font-size:10px;font-weight:800;padding:2px 9px;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);margin-bottom:-6px;position:relative;z-index:2}
.pp-camp .disco{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;background:radial-gradient(circle at 35% 30%,#ffe89a,#d99a1c 70%,#8a5c07);
  border:2px solid #ffe07a;box-shadow:0 4px 14px rgba(0,0,0,.55)}
.pp-camp .lbl{margin-top:-4px;font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--pp-gold);
  text-shadow:0 1px 3px rgba(0,0,0,.9)}

/* toasts */
/* z-index acima do modal de login (80): o aviso de erro precisa aparecer POR CIMA */
.pp-toasts{position:fixed;left:0;right:0;top:14px;z-index:100;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.pp-toast{background:linear-gradient(180deg,var(--pp-gold),var(--pp-gold-2));color:#241a00;
  font-weight:900;padding:10px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.45);
  animation:pp-toast-in .3s ease, pp-toast-out .3s ease 1.9s forwards}
@keyframes pp-toast-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes pp-toast-out{to{opacity:0;transform:translateY(-12px)}}

.pp-hint{color:var(--pp-sub);font-size:11px;text-align:center;margin-top:10px}
.pp-tag{display:inline-block;background:#1a2150;border:1px solid #2b4a9b;color:var(--pp-gold);
  font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px}

/* ---------- MODO DE LANÇAMENTO ---------- */
/* "TOQUE PARA SOLTAR" sobre o tabuleiro, só depois de comprar */
.pp-toque{position:absolute;left:0;right:0;top:22.5%;z-index:5;display:none;
  text-align:center;font-size:13px;font-weight:800;letter-spacing:.5px;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.9);pointer-events:none}
.pp-stage.soltando .pp-toque{display:block}
.pp-stage.soltando{cursor:pointer}

/* contador entre o saldo e o botão */
.hud-restantes{display:none;text-align:center;margin-top:14px;
  font-size:14px;font-weight:800;letter-spacing:.5px;color:#cfe0ff}
.hud-restantes b{color:var(--pp-gold)}
.pp-hud.soltando .hud-restantes{display:block}
/* comprando, some com valor/quantidade (o original troca pelo contador) */
.pp-hud.soltando .hud-labels,
.pp-hud.soltando .hud-controles{display:none}
/* botão de soltar todas: azul */
.pp-buy.soltar{color:#04203f;background:linear-gradient(180deg,#7cc5ff,#3b9bea)}

/* ---------- RESULTADO DA RODADA ---------- */
.win-overlay{position:fixed;inset:0;z-index:90;display:none;padding:24px;
  align-items:center;justify-content:center;background:rgba(3,8,22,.82)}
.win-overlay.aberto{display:flex}
.win-card{position:relative;overflow:hidden;width:100%;max-width:332px;padding:26px 20px;text-align:center;
  background:linear-gradient(180deg,#12285f,#0a1a4f);
  border:2px solid #f4c430;border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.6)}
.win-titulo{margin:0 0 10px;font-size:24px;font-weight:900;color:#ffd54a}
.win-sub{margin:0 0 14px;font-size:13px;font-weight:700;color:#cfe0ff}
.win-premios{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px}
.win-premio{background:rgba(255,255,255,.04);border:1px solid rgba(255,213,74,.35);
  border-radius:12px;padding:10px 12px;min-width:96px}
.win-premio img{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 6px}
.win-premio .nm{font-size:11px;font-weight:700;color:#fff}
.win-premio .vl{font-size:12px;font-weight:900;color:#7dffb0;margin-top:2px}
.win-premio .qt{font-size:10px;color:#9fb4e6}
.win-total{font-size:13px;font-weight:700;color:#cfe0ff;margin-bottom:18px}
.win-total b{font-size:24px;font-weight:900;color:#7dffb0;margin-left:8px}
.win-btn{width:100%;height:54px;border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:900;color:#3a1d00;
  background:linear-gradient(180deg,#ffd54a,#f4a51f)}

/* casa NADA: texto na vertical, como no original */
.pp-cell.nada{background:linear-gradient(180deg,#0d5c28,#06381a)}
.pp-cell.nada .nada-txt{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:13px;font-weight:900;letter-spacing:2px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* raios saindo do centro, atras do conteudo do card */
.win-card::before{content:"";position:absolute;left:50%;top:45%;width:220%;padding-top:220%;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.07) 0deg 7deg, rgba(255,255,255,0) 7deg 14deg);
  animation:win-girar 18s linear infinite}
.win-card > *{position:relative;z-index:1}
@keyframes win-girar{to{transform:translate(-50%,-50%) rotate(360deg)}}
.win-overlay.aberto .win-card{animation:win-entra .32s cubic-bezier(.2,1.3,.4,1)}
@keyframes win-entra{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* roleta das casas (revelacao apos a compra) */
.pp-cell.girando{filter:brightness(1.15) blur(.4px)}
.pp-cell.girando img{animation:casa-girar .08s linear infinite}
@keyframes casa-girar{from{transform:translateY(-14%)}to{transform:translateY(14%)}}
.pp-cell.parou{animation:casa-parou .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes casa-parou{0%{transform:scale(1.12)}100%{transform:scale(1)}}

/* card de derrota: mesmo formato do de vitoria, sem os premios */
.win-card.perdeu .win-titulo{font-size:26px;letter-spacing:.5px}
.win-card.perdeu .win-sub{font-size:14px;color:#fff;margin-bottom:20px}
.win-card.perdeu{padding:30px 20px 22px}

/* quantidade fixa: stepper travado */
.hud-stepper.travado button{opacity:.35;cursor:not-allowed}

/* botao de som (canto de cima, do lado oposto ao atalho do campeonato) */
.pp-som{position:absolute;top:10px;left:10px;z-index:6;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,213,74,.35);background:rgba(6,16,36,.55);color:#ffd54a;
  font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pp-som.mudo{color:rgba(255,255,255,.35);border-color:rgba(255,255,255,.18)}